/* ============================================================
   Windows XP replica — main stylesheet (Luna visual system)
   ============================================================ */
* { margin:0; padding:0; box-sizing:border-box; }
html,body { width:100%; height:100%; overflow:hidden; }
body {
  font-family: Tahoma, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  font-size: 11px;
  background:#000;
  user-select:none;
  -webkit-user-select:none;
  cursor:default;
}
.hidden { display:none !important; }

/* ---------- Full-screen overlays ---------- */
.fullscreen {
  position:fixed; inset:0; z-index:9000; overflow:hidden;
}
#boot-screen { background:#000; color:#fff; }
.boot-inner {
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:60px;
}
.boot-logo { text-align:center; }
.boot-flag { width:96px; height:92px; margin:0 auto 18px; position:relative; }
.bf { position:absolute; width:44px; height:42px; border-radius:10px 0 0 10px; opacity:.92; }
.bf-red    { left:0;  top:0;    background:linear-gradient(135deg,#e9644b,#c3391f); transform:skewY(8deg); }
.bf-green  { left:0;  top:48px; background:linear-gradient(135deg,#7ab648,#4b7d23); transform:skewY(-8deg); }
.bf-blue   { left:48px; top:0;  background:linear-gradient(135deg,#54a3f0,#1b5fbe); transform:skewY(8deg); border-radius:0 10px 10px 0; }
.bf-yellow { left:48px; top:48px; background:linear-gradient(135deg,#f6c445,#d89412); transform:skewY(-8deg); border-radius:0 10px 10px 0; }
.boot-title { font-size:26px; color:#fff; font-weight:bold; letter-spacing:.5px; font-family:'Franklin Gothic Medium','Arial Narrow',Tahoma,sans-serif; }
.boot-title .reg { font-size:12px; vertical-align:super; }
.boot-title .xpword { font-weight:bold; }
.boot-title .xp { color:#ff8c00; font-style:italic; }
.boot-status { text-align:center; }
.boot-bar {
  width:240px; height:16px; border:2px solid #6f6f6f; border-radius:8px;
  overflow:hidden; margin:0 auto 14px; background:#000; position:relative;
}
.boot-bar-fill {
  position:absolute; top:0; left:-50%; width:50%; height:100%;
  background:linear-gradient(90deg,transparent,#5aa5f2 30%,#8ec6ff 50%,#5aa5f2 70%,transparent);
  animation:bootslide 2.2s linear infinite;
}
@keyframes bootslide { from { transform:translateX(0); } to { transform:translateX(300%); } }
.boot-copyright { font-size:11px; color:#9a9a9a; line-height:1.5; }

/* ---------- Login ---------- */
#login-screen {
  background:linear-gradient(135deg,#5a7edc 0%,#4059a8 55%,#2f4680 100%);
}
.login-top { position:absolute; top:0; left:0; right:0; height:18%; background:linear-gradient(#7396e0,#5a7edc); border-bottom:2px solid #cfda7a; }
.login-center { position:absolute; top:18%; bottom:14%; left:0; right:0; }
.login-divider { height:2px; background:linear-gradient(90deg,transparent,#cfda7a 20%,#cfda7a 80%,transparent); }
.login-panel { display:flex; align-items:center; justify-content:center; gap:40px; height:calc(100% - 4px); }
.login-avatar { text-align:center; cursor:pointer; }
.login-avatar-img {
  width:64px; height:64px; margin:0 auto 6px; border-radius:6px;
  background:#d9e4f5; border:2px solid #fff; outline:2px solid #7f9db9;
  background-image:radial-gradient(circle at 50% 35%,#fff 0 18%,#cfe0f7 60%,#b7cdf0 100%);
}
.login-name { color:#fff; font-size:14px; font-weight:bold; }
.login-hint { color:#cfda7a; margin-top:4px; font-size:11px; }
.login-arrow {
  width:0; height:0; border-top:10px solid transparent; border-bottom:10px solid transparent;
  border-left:14px solid #cfda7a; opacity:0; transition:opacity .2s;
}
.login-panel:hover .login-arrow { opacity:1; }
.login-bottom { position:absolute; bottom:10px; right:24px; }
.login-turnoff {
  width:32px; height:32px; border-radius:50%; border:2px solid #cfda7a; background:linear-gradient(#e05c5c,#a02222);
  cursor:pointer; position:relative;
}
.login-turnoff::after {
  content:''; position:absolute; inset:8px; border:2px solid #fff; border-radius:50%;
  border-right-color:transparent; transform:rotate(45deg);
}
.login-bottom-strip { position:absolute; bottom:0; left:0; right:0; height:12%; background:linear-gradient(#2f4680,#1d2d55); border-top:2px solid #cfda7a; }

/* ---------- Desktop ---------- */
#desktop-root { position:fixed; inset:0; }
#desktop { position:absolute; inset:0 0 30px 0; overflow:hidden; outline:none; }
#wallpaper { position:absolute; inset:0; }
#wallpaper canvas { width:100%; height:100%; display:block; }
#clouds { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.cloud {
  position:absolute; border-radius:50%;
  background:radial-gradient(ellipse at 50% 60%, rgba(255,255,255,.95) 0 45%, rgba(255,255,255,0) 72%);
  filter:blur(2px);
  animation:clouddrift linear infinite;
}
@keyframes clouddrift {
  from { transform:translateX(-30vw); }
  to   { transform:translateX(130vw); }
}

/* ---------- Desktop icons ---------- */
#icons { position:absolute; top:4px; left:4px; display:flex; flex-direction:column; flex-wrap:wrap; align-content:flex-start; max-height:calc(100% - 8px); }
.dicon {
  width:76px; height:76px; margin:2px; display:flex; flex-direction:column; align-items:center;
  padding-top:6px; border-radius:1px; position:relative;
}
.dicon .di-img { width:34px; height:34px; }
#icons.icons-large .dicon { width:96px; height:96px; }
#icons.icons-large .dicon .di-img { width:56px; height:56px; }
#icons.icons-large .dicon .di-label { font-size:12px; max-width:88px; }
.dicon .di-img svg { width:100%; height:100%; }
.dicon .di-label {
  margin-top:4px; color:#fff; font-size:11px; text-align:center; line-height:1.2;
  text-shadow:0 1px 2px rgba(0,0,0,.8); max-width:72px; overflow:hidden;
}
.dicon.selected .di-label { background:#0a246a; }
.dicon.selected .di-img { filter:drop-shadow(0 0 3px rgba(120,180,255,.9)) brightness(1.1); }
.dicon input.rename { width:70px; font-size:11px; font-family:Tahoma,sans-serif; border:1px solid #0a246a; }

/* ---------- Taskbar ---------- */
#taskbar {
  position:absolute; left:0; right:0; bottom:0; height:30px; z-index:5000;
  display:flex; align-items:stretch;
  background:linear-gradient(#3168d5 0%,#4993e6 3%,#2157c9 6%,#2663d2 10%,#2159c4 24%,#1941a5 86%,#183a90 100%);
  box-shadow:inset 0 1px 0 #6ea6f0;
}
#start-button {
  display:flex; align-items:center; gap:5px; padding:0 18px 0 10px; cursor:pointer;
  border-radius:0 14px 14px 0;
  background:linear-gradient(#5eac56 0%,#3f9e37 8%,#2f8828 40%,#2c7d25 60%,#245f1e 100%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.5), inset -2px -2px 6px rgba(0,0,0,.25), 2px 0 5px rgba(0,0,0,.35);
  color:#fff; font-size:17px; font-style:italic; font-weight:bold;
  font-family:'Franklin Gothic Medium','Trebuchet MS',Tahoma,sans-serif;
  text-shadow:1px 1px 2px rgba(0,0,0,.6);
}
#start-button .sb-flag { position:relative; width:22px; height:20px; }
.sb { position:absolute; width:10px; height:9px; border-radius:2px; opacity:.95; }
.sb-red    { left:0; top:0;    background:#e2574c; transform:skewY(9deg); }
.sb-green  { left:0; top:10px; background:#7cb351; transform:skewY(-9deg); }
.sb-blue   { left:11px; top:0; background:#4f8ef7; transform:skewY(9deg); }
.sb-yellow { left:11px; top:10px; background:#f0b429; transform:skewY(-9deg); }
#start-button:hover { filter:brightness(1.15); }
#start-button.active { filter:brightness(.9); }
#task-buttons { flex:1; display:flex; align-items:center; gap:3px; padding:0 4px; overflow:hidden; }
.task-btn {
  height:24px; min-width:80px; max-width:170px; flex:0 1 auto; display:flex; align-items:center; gap:5px;
  padding:0 8px; color:#fff; font-size:11px; border-radius:3px;
  background:linear-gradient(#5f94e5 0%,#4282d6 12%,#366cc4 50%,#3a72c9 88%,#2e5dbb 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), inset -1px -1px 2px rgba(0,0,0,.2);
  cursor:pointer; overflow:hidden; white-space:nowrap;
}
.task-btn .t-ico { width:16px; height:16px; flex:none; }
.task-btn span.t-label { overflow:hidden; text-overflow:ellipsis; }
.task-btn:hover { filter:brightness(1.12); }
.task-btn.active {
  background:linear-gradient(#1e4baa 0%,#2f60c0 30%,#3b6fd0 100%);
  box-shadow:inset 1px 1px 3px rgba(0,0,0,.4);
}
.task-btn .tg-count { font-size:9px; background:rgba(255,255,255,.25); border-radius:6px; padding:0 4px; margin-left:2px; }
#tray {
  display:flex; align-items:center; gap:6px; padding:0 10px 0 12px;
  background:linear-gradient(#1889d5 0%,#1290dd 4%,#0f8cd8 10%,#0d84cd 24%,#0b6fb8 80%,#0a6ab4 100%);
  box-shadow:inset 2px 1px 3px rgba(0,0,0,.3), inset 1px 0 0 #4aa3e8;
}
#tray-icons { display:flex; align-items:center; gap:5px; }
.tray-ico { width:16px; height:16px; }
.tray-ico svg { width:100%; height:100%; }
#clock { color:#fff; font-size:11px; min-width:56px; text-align:center; text-shadow:0 1px 1px rgba(0,0,0,.5); }

/* ---------- Start menu ---------- */
#start-menu {
  position:absolute; left:0; bottom:30px; width:385px; z-index:6000;
  border-radius:8px 8px 0 0; overflow:hidden;
  box-shadow:3px -3px 8px rgba(0,0,0,.4);
  animation:sm-rise .18s ease-out;
  transform-origin:bottom left;
}
@keyframes sm-rise { from { transform:translateY(12px); opacity:.4; } to { transform:none; opacity:1; } }
.sm-banner {
  height:58px; padding:6px 10px; display:flex; align-items:center; gap:9px;
  background:linear-gradient(#2b71d8 0%,#2a6ad0 30%,#1e56c0 70%,#1a4fb5 100%);
  border-bottom:2px solid #cfda7a;
}
.sm-avatar {
  width:44px; height:44px; border-radius:6px; border:2px solid #b8cf7a; outline:2px solid #1a4fb5;
  background-image:radial-gradient(circle at 50% 35%,#fff 0 18%,#cfe0f7 60%,#b7cdf0 100%);
}
.sm-username { color:#fff; font-size:15px; font-weight:bold; text-shadow:1px 1px 2px rgba(0,0,0,.5); }
.sm-columns { display:flex; height:340px; }
.sm-left  { width:195px; background:#fff; border-right:1px solid #d0d0c0; padding:4px 0; display:flex; flex-direction:column; }
.sm-right { width:190px; background:#d3e5fa; padding:4px 0; display:flex; flex-direction:column; }
.sm-item {
  display:flex; align-items:center; gap:8px; padding:5px 8px; margin:0 2px; border:none; border-radius:0; cursor:pointer;
  font-size:11px; color:#0a0a0a; background:transparent; text-align:left; width:calc(100% - 4px);
  font-family:Tahoma,'Segoe UI',sans-serif; appearance:none; -webkit-appearance:none;
}
.sm-item .ico { width:24px; height:24px; flex:none; }
.sm-item .ico.small { width:16px; height:16px; }
.sm-item:hover { background:#316ac5; color:#fff; }
.sm-item .sm-sub { color:#0a246a; font-weight:bold; }
.sm-item:hover .sm-sub { color:#fff; }
.sm-item.bold { font-weight:bold; }
.sm-sep { height:1px; background:#d0d0c0; margin:3px 8px; }
.sm-sep.v { width:1px; background:#d0d0c0; margin:3px 0; align-self:stretch; }
.sm-right-header { padding:4px 10px 6px; font-weight:bold; color:#0a246a; }
.sm-spacer { flex:1; }
.sm-footer {
  height:44px; display:flex; align-items:center; justify-content:flex-end; gap:14px; padding:0 14px;
  background:linear-gradient(90deg,#d68a4e 0%,#e8873c 22%,#e97f36 48%,#d9712e 78%,#c86428 100%);
  border-top:2px solid #cfda7a;
}
.sm-footer-btn { display:flex; align-items:center; gap:6px; color:#fff; font-size:11px; cursor:pointer; padding:3px 6px; border-radius:0; text-shadow:0 1px 1px rgba(0,0,0,.4); }
.sm-footer-btn:hover { background:rgba(255,255,255,.2); }
.sm-footer-btn .ico { width:22px; height:22px; }

/* ---------- Icons (shared sprite sizing) ---------- */
.ico { display:inline-block; }
.ico-logoff svg, .ico-shutdown svg { width:100%; height:100%; }

/* ---------- Windows ---------- */
.window {
  position:absolute; min-width:180px; min-height:110px;
  border-radius:8px 8px 0 0; background:#ece9d8;
  box-shadow:2px 3px 10px rgba(0,0,0,.45);
  display:flex; flex-direction:column; overflow:hidden;
}
.window.active { box-shadow:3px 5px 14px rgba(0,0,0,.55); }
.window.maximized { border-radius:0; }
.titlebar {
  height:28px; display:flex; align-items:center; gap:6px; padding:0 3px 0 5px;
  background:linear-gradient(#0058ee 0%,#3f8cf3 8%,#0058ee 40%,#0054e6 88%,#2b73cf 100%);
  border-radius:8px 8px 0 0; cursor:default; flex:none;
}
.window:not(.active) .titlebar { background:linear-gradient(#7ba2e7 0%,#96b6ef 8%,#7ba2e7 45%,#6e97e3 100%); }
.window.maximized .titlebar { border-radius:0; }
.titlebar .tb-icon { width:16px; height:16px; }
.titlebar .tb-title {
  flex:1; color:#fff; font-weight:bold; font-size:13px;
  text-shadow:1px 1px 2px rgba(0,0,0,.7); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.window:not(.active) .tb-title { color:#e4e9f8; }
.tb-buttons { display:flex; gap:2px; align-self:center; }
.tb-btn {
  width:21px; height:21px; border-radius:3px; border:1px solid rgba(255,255,255,.7);
  display:flex; align-items:center; justify-content:center; cursor:pointer; position:relative;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.5);
}
.tb-btn:hover { filter:brightness(1.2); }
.tb-btn:active { filter:brightness(.85); }
.tb-btn.close { width:22px; background:linear-gradient(#ee7a6c 0%,#d64a38 20%,#c33a28 55%,#a83122 100%); }
.tb-btn.min { background:linear-gradient(#5aa0f0 0%,#2f6fd4 25%,#2559bd 100%); }
.tb-btn.max, .tb-btn.restore { background:linear-gradient(#5aa0f0 0%,#2f6fd4 25%,#2559bd 100%); }
.tb-btn.close::after, .tb-btn.min::after, .tb-btn.max::after, .tb-btn.restore::after { content:''; position:absolute; }
.tb-btn.min::after { width:8px; height:3px; background:#fff; bottom:4px; left:6px; box-shadow:0 1px 1px rgba(0,0,0,.4); }
.tb-btn.max::after { width:9px; height:8px; border:2px solid #fff; border-top-width:3px; }
.tb-btn.restore::after { width:12px; height:9px; border:1px solid #fff; background:linear-gradient(#fff 0 3px,transparent 3px); }
.tb-btn.close::after { content:'\d7'; color:#fff; font-size:14px; font-weight:bold; line-height:1; }
.window-body { flex:1; position:relative; display:flex; flex-direction:column; overflow:hidden; }
.window.resizable-off { resize:none; }
.resize-handle { position:absolute; z-index:20; }
.resize-handle.n { top:0; left:6px; right:6px; height:5px; cursor:n-resize; }
.resize-handle.s { bottom:0; left:6px; right:6px; height:5px; cursor:s-resize; }
.resize-handle.e { right:0; top:6px; bottom:6px; width:5px; cursor:e-resize; }
.resize-handle.w { left:0; top:6px; bottom:6px; width:5px; cursor:w-resize; }
.resize-handle.ne { top:0; right:0; width:12px; height:12px; cursor:ne-resize; }
.resize-handle.nw { top:0; left:0; width:12px; height:12px; cursor:nw-resize; }
.resize-handle.se { bottom:0; right:0; width:12px; height:12px; cursor:se-resize; }
.resize-handle.sw { bottom:0; left:0; width:12px; height:12px; cursor:sw-resize; }

/* generic XP controls */
button.xp {
  font-family:Tahoma,sans-serif; font-size:11px; padding:3px 14px; min-width:70px; height:23px;
  background:linear-gradient(#fff 0%,#f2f1ea 50%,#e6e4d4 100%);
  border:1px solid #003c74; border-radius:3px; cursor:pointer;
}
button.xp:hover { border-color:#e59400; box-shadow:inset 0 0 0 2px rgba(255,217,144,.55); }
button.xp:active { background:linear-gradient(#e2dfd2,#f0eee2); box-shadow:inset 1px 1px 2px rgba(0,0,0,.15); }
button.xp.default { box-shadow:inset 0 0 0 2px rgba(90,140,220,.35); }
.xp-input {
  font-family:Tahoma,sans-serif; font-size:11px; height:20px; border:1px solid #7f9db9; padding:1px 4px; background:#fff;
}
select.xp-input { height:20px; }

/* menus inside windows */
.menu-row { display:flex; background:#ece9d8; border-bottom:1px solid #d8d5c4; flex:none; }
.menu-row .menu-item { padding:3px 8px; cursor:default; }
.menu-row .menu-item:hover, .menu-row .menu-item.open { background:#316ac5; color:#fff; }

/* ---------- Context menus ---------- */
.ctx-menu {
  position:absolute; z-index:8000; min-width:160px; padding:2px;
  background:#fff; border:1px solid #a0a0a0; box-shadow:3px 3px 6px rgba(0,0,0,.35);
  font-size:11px;
}
.ctx-menu .cmi {
  padding:4px 20px 4px 26px; cursor:default; position:relative; white-space:nowrap; color:#000;
}
.ctx-menu .cmi:hover:not(.disabled) { background:#316ac5; color:#fff; }
.ctx-menu .cmi.disabled { color:#a0a0a0; }
.ctx-menu .cmi .cmi-arrow { position:absolute; right:6px; }
.ctx-menu .cm-sep { height:1px; background:#d8d8d8; margin:3px 2px; }
.ctx-menu .cmi .cmi-check { position:absolute; left:7px; }

/* ---------- Marquee selection ---------- */
#marquee { position:absolute; border:1px solid #2a5bd7; background:rgba(49,106,197,.15); z-index:100; pointer-events:none; }

/* ---------- Balloons ---------- */
.balloon {
  position:absolute; z-index:7500; width:260px; padding:10px 12px; border-radius:6px;
  background:linear-gradient(#ffffe1,#ffffcf); border:1px solid #8f8f6f;
  box-shadow:2px 2px 8px rgba(0,0,0,.3); font-size:11px; color:#000;
  animation:balloon-in .25s ease-out;
}
@keyframes balloon-in { from { transform:translateY(14px); opacity:0; } to { transform:none; opacity:1; } }
.balloon .bl-title { font-weight:bold; margin-bottom:4px; display:flex; gap:6px; align-items:center; }
.balloon .bl-close { float:right; cursor:pointer; font-weight:bold; }

/* ---------- Dialogs ---------- */
.dialog { position:absolute; z-index:7000; }
.dlg-body { padding:14px; display:flex; flex-direction:column; gap:12px; }
.dlg-msg-row { display:flex; gap:10px; align-items:flex-start; }
.dlg-icon { width:32px; height:32px; flex:none; }
.dlg-buttons { display:flex; justify-content:center; gap:8px; padding-bottom:4px; }

/* ---------- Explorer ---------- */
.explorer { display:flex; flex-direction:column; height:100%; background:#fff; }
.exp-toolbar { display:flex; align-items:center; gap:4px; padding:3px 6px; background:linear-gradient(#f6f5ec,#ece9d8); border-bottom:1px solid #d8d5c4; flex:none; }
.exp-tb-btn { display:flex; align-items:center; gap:4px; padding:2px 7px; border-radius:3px; cursor:pointer; font-size:11px; }
.exp-tb-btn:hover { background:#dcd8c8; box-shadow:inset 0 0 0 1px #b0ac98; }
.exp-tb-btn.disabled { color:#a0a0a0; cursor:default; }
.exp-tb-btn.disabled:hover { background:none; box-shadow:none; }
.exp-addr { display:flex; align-items:center; gap:6px; padding:3px 6px; background:#ece9d8; border-bottom:1px solid #d8d5c4; flex:none; }
.exp-addr .lab { color:#555; }
.exp-addr .addr { flex:1; display:flex; align-items:center; gap:4px; background:#fff; border:1px solid #7f9db9; height:21px; padding:0 4px; overflow:hidden; }
.exp-addr .addr .crumb { cursor:pointer; }
.exp-addr .addr .crumb:hover { text-decoration:underline; color:#00c; }
.exp-split { flex:1; display:flex; min-height:0; }
.exp-side { width:180px; flex:none; padding:10px; background:linear-gradient(180deg,#7ba2e7,#6494de); overflow-y:auto; }
.exp-panel { background:#eff3fb; border-radius:4px; padding:10px; margin-bottom:10px; border:1px solid #a5b8dd; }
.exp-panel h4 { font-size:11px; color:#0a246a; margin-bottom:8px; }
.exp-panel .ep-link { display:block; color:#0a246a; padding:2px 0; cursor:pointer; }
.exp-panel .ep-link:hover { color:#e05c00; text-decoration:underline; }
.exp-files { flex:1; overflow:auto; padding:8px; background:#fff; }
.exp-file { width:86px; display:inline-flex; flex-direction:column; align-items:center; margin:4px; padding:4px; vertical-align:top; border:1px solid transparent; }
.exp-file .fi-img { width:36px; height:36px; }
.exp-file .fi-img svg { width:100%; height:100%; }
.exp-file .fi-label { margin-top:4px; font-size:11px; text-align:center; overflow:hidden; max-width:80px; word-break:break-word; }
.exp-file.selected { background:#316ac5; }
.exp-file.selected .fi-label { color:#fff; }
.exp-status { flex:none; border-top:1px solid #d8d5c4; background:#ece9d8; padding:3px 8px; font-size:11px; color:#444; }

/* ---------- Notepad ---------- */
.notepad { display:flex; flex-direction:column; height:100%; background:#fff; }
.notepad textarea {
  flex:1; resize:none; border:none; outline:none; padding:2px 4px;
  font-family:'Lucida Console','Courier New',monospace; font-size:13px; white-space:pre; overflow:auto;
}
.notepad-status { border-top:1px solid #d8d5c4; background:#ece9d8; padding:2px 8px; font-size:11px; color:#555; display:flex; gap:14px; }

/* ---------- Paint ---------- */
.paint { display:flex; flex-direction:column; height:100%; background:#ece9d8; }
.paint-main { flex:1; display:flex; min-height:0; }
.paint-tools { width:60px; flex:none; padding:4px; background:#ece9d8; border-right:1px solid #d0cdbc; display:flex; flex-wrap:wrap; gap:2px; align-content:flex-start; }
.paint-tool { width:26px; height:26px; display:flex; align-items:center; justify-content:center; border:1px solid transparent; border-radius:2px; cursor:pointer; background:#ece9d8; }
.paint-tool:hover { border-color:#fff; background:#dfdcc8; }
.paint-tool.active { background:#fff; border:1px solid #7f9db9; box-shadow:inset 1px 1px 2px rgba(0,0,0,.2); }
.paint-tool svg { width:16px; height:16px; }
.paint-opts { width:56px; flex:none; padding:4px; background:#ece9d8; border-right:1px solid #d0cdbc; font-size:10px; }
.paint-canvas-wrap { flex:1; overflow:auto; background:#808080; padding:6px; }
.paint canvas { background:#fff; box-shadow:1px 1px 0 #555; cursor:crosshair; }
.paint-colors { flex:none; display:flex; align-items:center; gap:8px; padding:4px 8px; background:#ece9d8; border-top:1px solid #d0cdbc; }
.paint-cur { width:30px; height:26px; position:relative; }
.paint-cur .pc-fg { position:absolute; top:0; left:2px; width:18px; height:14px; border:1px solid #555; }
.paint-cur .pc-bg { position:absolute; bottom:0; right:2px; width:18px; height:14px; border:1px solid #555; }
.paint-palette { display:grid; grid-template-columns:repeat(14,16px); grid-auto-rows:14px; gap:1px; }
.paint-swatch { border:1px solid #808080; cursor:pointer; }
.paint-swatch:hover { outline:2px solid #ffd34e; }

/* ---------- Minesweeper ---------- */
.minesweeper { background:#c0c0c0; height:100%; display:flex; flex-direction:column; padding:6px; }
.mw-top { border:2px solid; border-color:#fff #808080 #808080 #fff; padding:5px 7px; display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; background:#c0c0c0; }
.mw-lcd { background:#000; color:#f00; font-family:'Lucida Console','Courier New',monospace; font-weight:bold; font-size:20px; padding:0 3px; letter-spacing:2px; }
.mw-face { width:26px; height:26px; background:#c0c0c0; border:2px solid; border-color:#fff #808080 #808080 #fff; display:flex; align-items:center; justify-content:center; font-size:15px; cursor:pointer; }
.mw-face:active { border-color:#808080 #fff #fff #808080; }
.mw-grid { border:3px solid; border-color:#808080 #fff #fff #808080; display:grid; gap:0; background:#c0c0c0; }
.mw-cell {
  width:16px; height:16px; background:#c0c0c0; border:2px solid; border-color:#fff #808080 #808080 #fff;
  display:flex; align-items:center; justify-content:center; font-weight:bold; font-size:11px; font-family:Tahoma;
  cursor:pointer;
}
.mw-cell.revealed { border:1px solid #b0b0b0; border-width:0 0 1px 1px; background:#c0c0c0; cursor:default; }
.mw-cell.boom { background:#f00; }
.mw-cell.n1 { color:#0000ff; } .mw-cell.n2 { color:#008000; } .mw-cell.n3 { color:#ff0000; }
.mw-cell.n4 { color:#000080; } .mw-cell.n5 { color:#800000; } .mw-cell.n6 { color:#008080; }
.mw-cell.n7 { color:#000000; } .mw-cell.n8 { color:#808080; }
.mw-menu { display:flex; gap:10px; padding:1px 4px; background:#c0c0c0; border-bottom:1px solid #808080; font-size:11px; }
.mw-menu span { padding:1px 6px; cursor:default; }
.mw-menu span:hover { background:#000080; color:#fff; }
.mw-status { margin-top:5px; font-size:10px; color:#333; }

/* ---------- IE ---------- */
.ie { display:flex; flex-direction:column; height:100%; background:#ece9d8; }
.ie-toolbar { display:flex; align-items:center; gap:4px; padding:3px 6px; background:linear-gradient(#f6f5ec,#ece9d8); border-bottom:1px solid #d8d5c4; flex:none; }
.ie-addr { display:flex; align-items:center; gap:6px; padding:3px 6px; background:#ece9d8; border-bottom:1px solid #d8d5c4; flex:none; }
.ie-addr input { flex:1; }
.ie-view { flex:1; overflow:auto; background:#fff; }
.ie-page { padding:14px 18px; font-size:12px; line-height:1.45; color:#000; user-select:text; -webkit-user-select:text; }
.ie-page h1 { font-size:20px; margin-bottom:8px; color:#00318c; }
.ie-page h2 { font-size:15px; margin:12px 0 5px; color:#00318c; }
.ie-page a { color:#00e; text-decoration:underline; cursor:pointer; }
.ie-page a:visited { color:#551a8b; }
.ie-page .ie-box { border:1px solid #99b; background:#eef; padding:8px 10px; margin:8px 0; }
.ie-status { border-top:1px solid #d8d5c4; background:#ece9d8; padding:2px 8px; font-size:11px; color:#444; }

/* ---------- WMP ---------- */
.wmp { display:flex; flex-direction:column; height:100%; background:#1a1a2e; }
.wmp-screen { flex:1; position:relative; overflow:hidden; background:#000; min-height:90px; }
.wmp-screen canvas { position:absolute; inset:0; width:100%; height:100%; }
.wmp-controls { flex:none; display:flex; align-items:center; gap:10px; padding:7px 12px; background:linear-gradient(#3a3a55,#232338); }
.wmp-btn { width:26px; height:26px; border-radius:50%; border:1px solid #8888aa; display:flex; align-items:center; justify-content:center; cursor:pointer; color:#cfe0ff; font-size:12px; }
.wmp-btn:hover { background:#444466; }
.wmp-btn.play { background:radial-gradient(circle at 35% 35%,#6fa8ff,#1d4fa8); }
.wmp-btn.stop { background:radial-gradient(circle at 35% 35%,#e08a8a,#a03030); }
.wmp-track { flex:1; height:6px; background:#111; border-radius:3px; position:relative; overflow:hidden; }
.wmp-track-fill { position:absolute; inset:0; width:0%; background:linear-gradient(90deg,#3f8cf3,#8ec6ff); }
.wmp-time { color:#9fb8e8; font-size:11px; min-width:70px; text-align:right; }
.wmp-visual-select { background:#232338; color:#cfe0ff; border:1px solid #666; font-size:10px; }
.wmp-title { color:#cfe0ff; font-size:11px; padding:4px 10px; background:#232338; display:flex; justify-content:space-between; }

/* ---------- Display Properties ---------- */
.disp { display:flex; flex-direction:column; height:100%; background:#ece9d8; }
.disp-tabs { display:flex; gap:2px; padding:6px 8px 0; }
.disp-tab { padding:3px 10px; border:1px solid #b0ac98; border-bottom:none; border-radius:3px 3px 0 0; background:#e4e1d0; cursor:pointer; }
.disp-tab.active { background:#ece9d8; position:relative; top:1px; font-weight:bold; }
.disp-body { flex:1; border:1px solid #b0ac98; margin:0 8px; padding:12px; background:#ece9d8; overflow:auto; }
.disp-foot { display:flex; justify-content:flex-end; gap:8px; padding:8px; }
.disp-preview { width:180px; height:135px; border:1px solid #555; background:#000; position:relative; overflow:hidden; margin:0 auto 10px; }
.disp-preview .dp-inner { position:absolute; inset:6px 10px 10px; overflow:hidden; border:1px solid #888; }
.disp-preview .dp-inner canvas { width:100%; height:100%; }

/* ---------- Shutdown overlay ---------- */
#shutdown-overlay {
  background:rgba(30,60,130,.55); backdrop-filter:blur(2px); z-index:9500;
  display:flex; align-items:center; justify-content:center;
}
.sh-box { width:420px; border-radius:6px; overflow:hidden; box-shadow:0 6px 24px rgba(0,0,0,.5); background:#3f6fb5; }
.sh-banner { text-align:center; color:#fff; font-size:17px; font-weight:bold; padding:12px; background:linear-gradient(#3a5fa8,#2a4a8a); }
.sh-buttons { display:flex; justify-content:center; gap:34px; padding:26px 10px; background:linear-gradient(#5a86c8,#3f6fb5); }
.sh-btn { display:flex; flex-direction:column; align-items:center; gap:8px; color:#fff; font-size:11px; cursor:pointer; padding:6px; border-radius:5px; }
.sh-btn:hover { background:rgba(255,255,255,.15); }
.sh-ico { width:44px; height:44px; border-radius:50%; border:2px solid rgba(255,255,255,.85); position:relative; }
.sh-standby { background:radial-gradient(circle at 40% 30%,#ffd76e,#c8860e); }
.sh-turnoff { background:radial-gradient(circle at 40% 30%,#e07a6a,#a82418); }
.sh-restart { background:radial-gradient(circle at 40% 30%,#7ea8e8,#2a56a8); }
.sh-standby::after { content:''; position:absolute; inset:14px; border:2px solid #fff; border-radius:50%; border-top-color:transparent; }
.sh-turnoff::after { content:''; position:absolute; top:8px; left:50%; width:3px; height:14px; background:#fff; transform:translateX(-50%); }
.sh-restart::after { content:''; position:absolute; inset:12px; border:3px solid #fff; border-radius:50%; border-bottom-color:transparent; border-left-color:transparent; }
.sh-cancel { text-align:center; color:#cfe0ff; padding:8px; cursor:pointer; font-size:11px; background:#2a4a8a; }
.sh-cancel:hover { background:#3a5a9a; }

/* ---------- Safe-to-turn-off ---------- */
#it-is-now-safe { background:#c69c6d; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:30px; }
.safe-text { font-size:20px; color:#5a3a1a; font-family:Tahoma; font-weight:bold; text-align:center; padding:0 30px; }
#safe-restart { font-family:Tahoma; font-size:12px; padding:4px 16px; }

/* ---------- Keyboard focus outline ---------- */
#desktop:focus { outline:none; }

/* ---------- Scrollbars (XP style, WebKit) ---------- */
::-webkit-scrollbar { width:16px; height:16px; }
::-webkit-scrollbar-track { background:#f0efe6; box-shadow:inset 1px 0 0 #d8d5c4; }
::-webkit-scrollbar-thumb {
  background:linear-gradient(90deg,#cdd9f3,#b6c8ef); border-radius:2px; border:1px solid #9db0d8;
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.7);
}
::-webkit-scrollbar-thumb:hover { filter:brightness(1.08); }
::-webkit-scrollbar-corner { background:#f0efe6; }
::-webkit-scrollbar-button { display:none; }

/* ---------- Display Properties: appearance color schemes ---------- */
.displayOlive{--tb1:#3c6d0d;--tb2:#70a040;--tb3:#5c8a2a;--tb4:#4a7524;}
.displaySilver{--tb1:#7d7d7d;--tb2:#b0b0b0;--tb3:#9a9a9a;--tb4:#808080;}
.displayOlive .titlebar,.displaySilver .titlebar{background:linear-gradient(var(--tb1) 0%,var(--tb2) 8%,var(--tb1) 40%,var(--tb3) 88%,var(--tb4) 100%);}
.displayOlive #taskbar{background:linear-gradient(#5a7a2a 0%,#7ca03a 3%,#55702a 6%,#5f7c2e 10%,#547428 24%,#405c1c 86%,#3a5418 100%);}
.displaySilver #taskbar{background:linear-gradient(#8f8f8f 0%,#c0c0c0 3%,#909090 6%,#9a9a9a 10%,#8a8a8a 24%,#707070 86%,#686868 100%);}
.displayOlive #tray{background:linear-gradient(#6b8c3a 0%,#7d9c48 4%,#6f8f3f 10%,#68883a 24%,#557a2c 80%,#4d7028 100%);}
.displaySilver #tray{background:linear-gradient(#b8b8b8 0%,#d0d0d0 4%,#c8c8c8 10%,#b0b0b0 24%,#989898 80%,#909090 100%);}
.displayOlive #start-button{background:linear-gradient(#7ca03a 0%,#6a9030 8%,#557a26 40%,#4c7022 60%,#3a5c1a 100%);}
.displaySilver #start-button{background:linear-gradient(#d8d8d8 0%,#b8b8b8 8%,#989898 40%,#8a8a8a 60%,#787878 100%);color:#222;text-shadow:none;}
.displayOlive .task-btn{background:linear-gradient(#7ca05a 0%,#65893f 12%,#557832 50%,#5c8038 88%,#4c6c2a 100%);}
.displaySilver .task-btn{background:linear-gradient(#e2e2e2 0%,#c8c8c8 12%,#b0b0b0 50%,#b8b8b8 88%,#a0a0a0 100%);color:#222;}
.displaySilver .tb-btn.min,.displaySilver .tb-btn.max,.displaySilver .tb-btn.restore{background:linear-gradient(#e8e8e8 0%,#c0c0c0 25%,#a8a8a8 100%);}

/* ---------- Small screens: keep desktop usable ---------- */
@media (max-width: 720px) {
  .sm-columns { height:auto; min-height:0; flex:1; overflow-y:auto; }
  #start-menu { width:min(385px, calc(100vw - 8px)); height:calc(100vh - 34px); display:flex; flex-direction:column; }
  #start-menu.hidden { display:none !important; }
  .sm-columns { flex:1 1 auto; }
  .sm-footer { flex:none; }
  .sm-banner { flex:none; }
  .dicon { width:64px; height:68px; }
  .dicon .di-label { font-size:10px; }
  #start-button { padding:0 12px 0 8px; font-size:15px; }
  #tray { padding:0 6px; }
  #clock { min-width:48px; font-size:10px; }
  .task-btn { min-width:56px; max-width:120px; }
}