/* ============================================================
   Windows XP replica — Luna shell styles
   ============================================================ */
* { margin:0; padding:0; box-sizing:border-box; -webkit-user-select:none; user-select:none; }
html,body { width:100%; height:100%; overflow:hidden; background:#000; }
body { font-family:Tahoma,'Segoe UI',Verdana,sans-serif; font-size:11px; color:#000; }

:root{
  --fsize:11px;
  --grad-taskbar: linear-gradient(to bottom,#245edb 0%,#3f8cf3 9%,#245edb 18%,#245edb 85%,#1941a5 100%);
  --grad-start: linear-gradient(to bottom,#9ede9d 0%,#5fb85f 6%,#45aa48 18%,#359637 38%,#2d8a2f 60%,#268026 80%,#1e6b1f 100%);
  --grad-start-hov: linear-gradient(to bottom,#b2e8b2 0%,#7ccc7c 10%,#5cba5e 30%,#44a946 55%,#389638 80%,#2d832d 100%);
  --grad-start-press: linear-gradient(to bottom,#1e5c1a 0%,#2d7a2a 30%,#35943a 70%,#44a04a 100%);
  --grad-title-a: linear-gradient(to bottom,#0058ee 0%,#3a93ff 4%,#288eff 6%,#127dff 8%,#036ffc 10%,#0262ee 13%,#0057e5 20%,#0054e3 45%,#0136b4 75%,#01308f 90%,#022e8b 100%);
  --grad-title-i: linear-gradient(to bottom,#7fa4e8 0%,#a8c3f0 5%,#9dbcec 10%,#8fafe6 20%,#83a2dd 45%,#7592cf 75%,#6d87c4 100%);
  --grad-taskbtn: linear-gradient(to bottom,#3980f4 0%,#2a72dd 12%,#2b6fd8 50%,#2866c4 90%,#245bb0 100%);
  --grad-taskbtn-act: linear-gradient(to bottom,#1a4fa8 0%,#1c55b8 15%,#1e5ecb 50%,#1a55b8 85%,#164a9e 100%);
  --grad-tray: linear-gradient(to bottom,#1290e9 0%,#19b5f3 8%,#12a4e9 20%,#0e8fd4 60%,#0b7cb8 100%);
  --grad-sm-col2: linear-gradient(to bottom,#5a80d8 0%,#4f74cc 50%,#4268b8 100%);
  --face:#ece9d8;
  --face2:#f4f3ee;
  --sel:#316ac5;
  --sel-hi:#4a8af0;
  --win-radius:8px;
  --win-border:#0831d9;
  --win-border-i:#97b4ea;
  --mengut:#e6e4da;
  --taskh:30px;
}
body[data-scheme="olive"]{
  --grad-taskbar: linear-gradient(to bottom,#9aa76e 0%,#b5c48c 9%,#a3b374 18%,#99a868 85%,#7e8c52 100%);
  --grad-title-a: linear-gradient(to bottom,#7b9058 0%,#a6bd82 4%,#9db578 6%,#92ab6c 10%,#8ba462 15%,#849d5c 30%,#7d9355 60%,#718349 85%,#687a44 100%);
  --grad-title-i: linear-gradient(to bottom,#b6c29a 0%,#ccd5b6 8%,#c3cfab 20%,#b5c29b 50%,#a4b188 80%,#97a377 100%);
  --grad-taskbtn: linear-gradient(to bottom,#a9b878 0%,#9cab6a 15%,#98a55f 50%,#8d9b55 90%,#828f4c 100%);
  --grad-taskbtn-act: linear-gradient(to bottom,#77854a 0%,#7f8e52 20%,#859456 55%,#7b8a4e 100%);
  --grad-tray: linear-gradient(to bottom,#b7c98f 0%,#c9d8a4 10%,#bccd92 30%,#aebd7f 70%,#a1af6f 100%);
  --grad-sm-col2: linear-gradient(to bottom,#7f9057 0%,#75874e 50%,#687a44 100%);
  --win-border:#5a6b34;
  --win-border-i:#b3bd96;
  --sel:#5c7a3c;
  --sel-hi:#7a9a55;
}
body[data-scheme="silver"]{
  --grad-taskbar: linear-gradient(to bottom,#b4bdd3 0%,#ccd3e4 9%,#bcc4d8 18%,#b2bacf 85%,#98a2b8 100%);
  --grad-title-a: linear-gradient(to bottom,#99a3bc 0%,#bcc4d6 4%,#b4bdcf 8%,#a8b2c5 14%,#9fa9bd 30%,#97a1b6 55%,#8d97ac 80%,#838da2 100%);
  --grad-title-i: linear-gradient(to bottom,#c6cadb 0%,#d8dbe6 8%,#cfd3e0 25%,#c2c6d5 60%,#b3b7c6 100%);
  --grad-taskbtn: linear-gradient(to bottom,#c0c7da 0%,#b3bacd 15%,#aab1c5 50%,#9ea6ba 90%,#949cb0 100%);
  --grad-taskbtn-act: linear-gradient(to bottom,#8f97ab 0%,#969eae 20%,#9ba3b4 55%,#8e96a8 100%);
  --grad-tray: linear-gradient(to bottom,#c4ccde 0%,#d4dae8 10%,#c8cfe0 30%,#bac2d4 70%,#adb5c8 100%);
  --grad-sm-col2: linear-gradient(to bottom,#8e97ad 0%,#848da3 50%,#767f96 100%);
  --win-border:#5c6378;
  --win-border-i:#b4bac8;
  --sel:#616d8a;
  --sel-hi:#8590ac;
}
body[data-theme="classic"]{
  --grad-taskbar: linear-gradient(to bottom,#d4d0c8 0%,#d4d0c8 100%);
  --grad-start: linear-gradient(to bottom,#d4d0c8 0%,#e4e0d8 50%,#d4d0c8 100%);
  --grad-start-hov: linear-gradient(to bottom,#e8e4dc 0%,#f0ece4 100%);
  --grad-start-press: linear-gradient(to bottom,#b8b4ac 0%,#c8c4bc 100%);
  --grad-title-a: linear-gradient(to right,#000080 0%,#1084d0 100%);
  --grad-title-i: linear-gradient(to right,#808080 0%,#b5b5b5 100%);
  --grad-taskbtn: linear-gradient(to bottom,#e8e4dc 0%,#d8d4cc 50%,#d0ccc4 100%);
  --grad-taskbtn-act: linear-gradient(to bottom,#f4f0e8 0%,#ece8e0 100%);
  --grad-tray: linear-gradient(to bottom,#d4d0c8 0%,#d4d0c8 100%);
  --grad-sm-col2: linear-gradient(to bottom,#d4d0c8 0%,#d0ccc4 100%);
  --face:#d4d0c8;
  --win-radius:0px;
  --win-border:#0a246a;
  --win-border-i:#808080;
  --sel:#0a246a;
  --sel-hi:#316ac5;
  --mengut:#d4d0c8;
}
body{ font-size:var(--fsize); }

#screen{ position:absolute; left:50%; top:50%; transform-origin:center; background:#3a6ea5; overflow:hidden; }
#screen *{ cursor:default; }
[hidden]{ display:none !important; }

/* ---------------- Wallpaper ---------------- */
#wallpaper{ position:absolute; inset:0 0 var(--taskh) 0; overflow:hidden; }
#wallpaper .wp-layer{ position:absolute; inset:0; }
#wallpaper .wp-clouds{ position:absolute; top:0; bottom:0; width:200%; animation:clouddrift 480s linear infinite; }
@keyframes clouddrift{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ---------------- Desktop icons ---------------- */
#desktopIcons{ position:absolute; inset:0 0 var(--taskh) 0; z-index:2; }
.dicon{ position:absolute; width:76px; padding:4px 2px 6px; text-align:center; }
.dicon .di-img{ width:42px; height:40px; margin:0 auto 2px; display:flex; align-items:flex-end; justify-content:center; position:relative; }
.dicon .di-img svg{ width:36px; height:36px; filter:drop-shadow(1px 2px 2px rgba(0,0,0,.45)); }
.dicon .di-shortcut{ position:absolute; left:0; bottom:0; width:11px; height:11px; }
.dicon .di-label{ color:#fff; font-size:11px; line-height:1.15; text-shadow:1px 1px 1px rgba(0,0,0,.8), 0 0 3px rgba(0,0,0,.6); word-wrap:break-word; max-height:28px; overflow:hidden; display:inline-block; padding:1px 3px; border:1px dotted transparent; }
.dicon.sel .di-img svg{ filter:drop-shadow(1px 2px 2px rgba(0,0,0,.45)) brightness(.6) sepia(1) hue-rotate(190deg) saturate(3); }
.dicon.sel .di-label{ background:var(--sel); border:1px dotted #ffd08a; text-shadow:none; }
.dicon.focus .di-label{ border:1px dotted #c8c8c8; }
.dicon.renaming .di-label{ display:none; }
.dicon .di-edit{ display:none; width:74px; font:11px Tahoma,sans-serif; text-align:center; border:1px solid #7f9db9; }
.dicon.renaming .di-edit{ display:block; }
.dicon.cut .di-img{ opacity:.5; }

#marquee{ position:absolute; border:1px dotted #fff; background:rgba(49,106,197,.25); outline:1px dotted rgba(49,106,197,.9); outline-offset:-1px; z-index:3; }

/* ---------------- Window chrome ---------------- */
#windowLayer{ position:absolute; inset:0 0 var(--taskh) 0; }
.win{ position:absolute; display:flex; flex-direction:column; background:var(--face); border-radius:var(--win-radius) var(--win-radius) 0 0; box-shadow:3px 4px 12px rgba(0,0,0,.55); border:1px solid var(--win-border); min-width:120px; min-height:60px; }
.win.inactive{ border-color:var(--win-border-i); }
.win .w-title{ height:28px; flex:none; border-radius:calc(var(--win-radius) - 1px) calc(var(--win-radius) - 1px) 0 0; background:var(--grad-title-a); display:flex; align-items:center; padding:0 4px 0 8px; position:relative; overflow:hidden; }
.win .w-title::after{ content:''; position:absolute; inset:0; background:radial-gradient(ellipse 220px 40px at 88% -10%, rgba(255,255,255,.35), transparent 60%); pointer-events:none; }
.win.inactive .w-title{ background:var(--grad-title-i); }
.win .w-title .w-ico{ width:16px; height:16px; flex:none; margin-right:4px; }
.win .w-title .w-ico svg{ width:16px; height:16px; }
.win .w-title .w-cap{ color:#fff; font-weight:bold; font-size:12px; letter-spacing:.2px; text-shadow:1px 1px 1px rgba(0,0,30,.7); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; padding-right:4px; }
.win.inactive .w-title .w-cap{ color:#f0f4fc; }
.w-btns{ display:flex; gap:2px; flex:none; }
.w-btn{ width:21px; height:21px; border-radius:3px; border:1px solid rgba(255,255,255,.55); background:linear-gradient(to bottom,#9fc4f8 0%,#6b9fe8 12%,#3d7ad4 50%,#2c5cb0 90%,#2450a0 100%); color:#fff; font:9px/1 'Marlett',Tahoma,sans-serif; display:flex; align-items:center; justify-content:center; text-shadow:0 0 2px #000,1px 1px 1px #000; position:relative; }
.w-btn svg{ width:11px; height:11px; }
.w-btn:hover{ background:linear-gradient(to bottom,#bcd7ff 0%,#8ab6f5 15%,#5c96e8 50%,#3f78c8 90%,#3060b4 100%); }
.w-btn:active{ background:linear-gradient(to bottom,#1c3f7c 0%,#2852a0 50%,#2c5cb0 100%); }
.w-btn.w-close{ background:linear-gradient(to bottom,#f0b39a 0%,#e08a66 8%,#da6238 45%,#cd4d20 75%,#b93a0e 100%); margin-left:2px; }
.w-btn.w-close:hover{ background:linear-gradient(to bottom,#ffd0b8 0%,#f4a07c 12%,#ec7a4e 50%,#d85c2a 90%,#c84a18 100%); }
.w-btn.w-close:active{ background:linear-gradient(to bottom,#8e2c08 0%,#a63c12 60%,#b04418 100%); }
.win.inactive .w-btn{ opacity:.75; }
.win .w-menubar{ flex:none; display:flex; background:var(--face2); border-bottom:1px solid #d4d0c8; padding:1px 2px; }
.w-menubar .mb-item{ padding:3px 7px; }
.w-menubar .mb-item:hover,.w-menubar .mb-item.open{ background:var(--sel); color:#fff; }
.win .w-toolbar{ flex:none; display:flex; align-items:center; gap:1px; background:var(--face2); border-bottom:1px solid #d4d0c8; padding:2px 4px; }
.win .w-body{ flex:1; position:relative; overflow:hidden; background:#fff; }
.win .w-statusbar{ flex:none; display:flex; background:var(--face2); border-top:1px solid #d4d0c8; padding:2px 4px; gap:2px; }
.sb-part{ border:1px solid #d8d4c8; border-top-color:#b0aca0; border-left-color:#b0aca0; padding:1px 6px; background:var(--face); }
.win .w-grip{ position:absolute; right:0; bottom:0; width:14px; height:14px; background:linear-gradient(135deg,transparent 50%,#a8a498 50%,#a8a498 55%,transparent 55%,transparent 65%,#a8a498 65%,#a8a498 70%,transparent 70%,transparent 80%,#a8a498 80%,#a8a498 85%,transparent 85%); }
.w-shield{ position:absolute; inset:0; z-index:90; }
.win.dragging{ opacity:.85; }
.win-ghost{ position:absolute; border:2px solid #555; background:rgba(120,150,200,.25); z-index:9999; pointer-events:none; }
.rs{ position:absolute; z-index:5; }
#screen .rs.n{top:-4px;left:4px;right:4px;height:7px;cursor:n-resize !important}
#screen .rs.s{bottom:-4px;left:4px;right:4px;height:7px;cursor:s-resize !important}
#screen .rs.e{right:-4px;top:4px;bottom:4px;width:7px;cursor:e-resize !important}
#screen .rs.w{left:-4px;top:4px;bottom:4px;width:7px;cursor:w-resize !important}
#screen .rs.ne{right:-5px;top:-5px;width:10px;height:10px;cursor:ne-resize !important}
#screen .rs.nw{left:-5px;top:-5px;width:10px;height:10px;cursor:nw-resize !important}
#screen .rs.se{right:-5px;bottom:-5px;width:10px;height:10px;cursor:se-resize !important}
#screen .rs.sw{left:-5px;bottom:-5px;width:10px;height:10px;cursor:sw-resize !important}

/* ---------------- Taskbar ---------------- */
#taskbar{ position:absolute; left:0; right:0; bottom:0; height:var(--taskh); background:var(--grad-taskbar); display:flex; align-items:stretch; z-index:4000; box-shadow:inset 0 1px 0 rgba(255,255,255,.35); }
#startBtn{ flex:none; width:98px; border:none; padding:0 12px 0 10px; display:flex; align-items:center; gap:6px; background:var(--grad-start); border-radius:0 10px 14px 0; box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 2px 0 4px rgba(0,0,0,.4); font:italic bold 17px 'Franklin Gothic Medium',Tahoma,sans-serif; color:#fff; text-shadow:1px 1px 2px rgba(0,60,0,.8); }
#startBtn:hover{ background:var(--grad-start-hov); }
#startBtn.open,#startBtn:active{ background:var(--grad-start-press); }
#startLogo{ width:20px; height:20px; flex:none; }
#startLogo svg{ width:20px; height:20px; filter:drop-shadow(1px 1px 1px rgba(0,0,0,.5)); }
body[data-theme="classic"] #startBtn{ color:#000; text-shadow:none; font:italic bold 15px Tahoma; box-shadow:inset 1px 1px 0 #fff,inset -1px -1px 0 #808080; border-radius:0; }
body[data-theme="classic"] #startText{ text-shadow:none; }
#quickLaunch{ flex:none; display:flex; align-items:center; gap:2px; padding:0 8px 0 10px; }
#quickLaunch .ql-ico{ width:18px; height:18px; padding:1px; border-radius:2px; }
#quickLaunch .ql-ico:hover{ background:rgba(255,255,255,.25); box-shadow:inset 0 0 0 1px rgba(255,255,255,.4); }
#quickLaunch .ql-ico svg{ width:16px; height:16px; }
#taskSep{ flex:none; width:2px; margin:3px 2px; background:linear-gradient(to bottom,rgba(0,0,0,.35),rgba(0,0,0,.2)); border-right:1px solid rgba(255,255,255,.25); }
#taskButtons{ flex:1; display:flex; align-items:center; gap:4px; padding:0 4px; overflow:hidden; }
.tbtn{ flex:0 1 160px; min-width:44px; height:22px; display:flex; align-items:center; gap:4px; padding:0 6px; border-radius:3px; background:var(--grad-taskbtn); box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 0 0 1px rgba(0,0,0,.15); color:#fff; font-size:11px; text-shadow:1px 1px 1px rgba(0,0,60,.6); overflow:hidden; white-space:nowrap; }
.tbtn svg{ width:16px; height:16px; flex:none; }
.tbtn .tbtn-label{ overflow:hidden; text-overflow:ellipsis; }
.tbtn .tbtn-count{ flex:none; }
.tbtn.active{ background:var(--grad-taskbtn-act); box-shadow:inset 0 1px 3px rgba(0,0,0,.45), inset 0 0 0 1px rgba(0,0,0,.25); }
.tbtn:hover:not(.active){ filter:brightness(1.12); }
.tbtn.flash{ animation:tflash .5s ease 3; }
@keyframes tflash{ 50%{ background:linear-gradient(to bottom,#e8a33c,#c8841e); } }
#tray{ flex:none; display:flex; align-items:center; gap:5px; padding:0 10px 0 4px; background:var(--grad-tray); box-shadow:inset 1px 0 0 rgba(255,255,255,.4), inset 2px 0 4px rgba(0,0,0,.25); }
#trayChevron{ color:#fff; font-size:12px; padding:0 2px; }
#trayChevron:hover{ background:rgba(255,255,255,.25); border-radius:2px; }
#trayIcons{ display:flex; gap:3px; align-items:center; }
.tray-ico{ width:16px; height:16px; padding:0; position:relative; }
.tray-ico svg{ width:14px; height:14px; vertical-align:top; }
.tray-ico:hover{ background:rgba(255,255,255,.2); border-radius:2px; }
#trayIcons .hidden-ico{ display:none; }
#trayPop{ position:absolute; bottom:var(--taskh); background:var(--grad-tray); padding:6px; display:flex; gap:5px; box-shadow:0 -2px 6px rgba(0,0,0,.4); z-index:4500; }
#trayClock{ color:#fff; font-size:11px; text-shadow:1px 1px 1px rgba(0,0,60,.6); padding-left:2px; }

/* ---------------- Start menu ---------------- */
#startMenu{ position:absolute; left:2px; bottom:var(--taskh); width:400px; z-index:5000; border-radius:8px 8px 0 0; box-shadow:4px 4px 16px rgba(0,0,0,.6); display:flex; flex-direction:column; overflow:hidden; border:1px solid #0831d9; border-bottom:none; }
.sm-head{ height:56px; background:var(--grad-title-a); display:flex; align-items:center; padding:0 10px; gap:10px; box-shadow:inset 0 -1px 0 rgba(0,0,0,.2); }
.sm-avatar{ width:42px; height:42px; border-radius:4px; border:2px solid rgba(255,255,255,.7); background:#fff; display:flex; align-items:center; justify-content:center; box-shadow:2px 2px 4px rgba(0,0,0,.4); overflow:hidden; }
.sm-avatar svg{ width:38px; height:38px; }
.sm-user{ color:#fff; font-size:14px; font-weight:bold; text-shadow:1px 1px 2px rgba(0,0,50,.7); }
.sm-cols{ display:flex; height:392px; }
.sm-col1{ width:200px; background:#fff; padding:4px 4px; display:flex; flex-direction:column; border-right:1px solid #c8d4ec; overflow:hidden; }
.sm-col2{ width:200px; background:var(--grad-sm-col2); padding:6px 4px; display:flex; flex-direction:column; }
.sm-item{ display:flex; align-items:center; gap:7px; padding:4px 6px; border-radius:3px; position:relative; }
.sm-item .smi-ico{ width:28px; height:28px; flex:none; }
.sm-item .smi-ico svg{ width:28px; height:28px; }
.sm-item .smi-t{ line-height:1.1; }
.sm-item .smi-sub{ font-size:9.5px; color:#909090; }
.sm-col1 .sm-item:hover{ background:var(--sel); color:#fff; }
.sm-col1 .sm-item:hover .smi-sub{ color:#cfe0ff; }
.sm-col2 .sm-item{ padding:4px 8px; color:#fff; font-weight:bold; font-size:11.5px; }
.sm-col2 .sm-item .smi-ico{ width:22px; height:22px; }
.sm-col2 .sm-item .smi-ico svg{ width:22px; height:22px; }
.sm-col2 .sm-item:hover{ background:rgba(255,255,255,.22); box-shadow:inset 0 0 0 1px rgba(255,255,255,.35); }
.sm-sep{ height:1px; background:#d8d8d8; margin:4px 6px; flex:none; }
.sm-col2 .sm-sep{ background:rgba(255,255,255,.35); }
.sm-allprog{ margin-top:auto; display:flex; align-items:center; justify-content:center; gap:6px; padding:7px 0 4px; font-size:11.5px; }
.sm-allprog:hover{ background:var(--sel); color:#fff; border-radius:3px; }
.sm-allprog .ap-arrow{ color:#2aa02a; font-weight:bold; }
.sm-allprog:hover .ap-arrow{ color:#fff; }
.sm-foot{ height:38px; background:linear-gradient(to bottom,#4a78dc 0%,#3f6ed0 8%,#3a68cc 100%); display:flex; align-items:center; justify-content:flex-end; gap:10px; padding:0 12px; box-shadow:inset 0 1px 0 rgba(255,255,255,.3); }
.sm-foot .smf-btn{ display:flex; align-items:center; gap:6px; color:#fff; font-size:11.5px; padding:4px 8px; border-radius:3px; }
.sm-foot .smf-btn:hover{ background:rgba(255,255,255,.22); box-shadow:inset 0 0 0 1px rgba(255,255,255,.35); }
.smf-ico{ width:20px; height:20px; border-radius:4px; display:flex; align-items:center; justify-content:center; }
.smf-ico svg{ width:14px; height:14px; }
.smf-logoff{ background:linear-gradient(#f5b869,#e0932e); box-shadow:inset 0 1px 0 rgba(255,255,255,.5); }
.smf-power{ background:linear-gradient(#e87b5d,#c53d17); box-shadow:inset 0 1px 0 rgba(255,255,255,.5); }

/* ---------------- Menus (dropdown/context/flyout) ---------------- */
.xmenu{ position:absolute; min-width:170px; background:#fff; border:1px solid #968f83; box-shadow:3px 3px 6px rgba(0,0,0,.35); padding:2px; z-index:6000; }
.xmenu .mi{ display:flex; align-items:center; height:22px; padding-right:14px; position:relative; white-space:nowrap; }
.xmenu .mi .mi-ico{ width:24px; flex:none; display:flex; justify-content:center; align-items:center; align-self:stretch; background:var(--mengut); margin-right:6px; }
.xmenu .mi .mi-ico svg{ width:16px; height:16px; }
.xmenu .mi .mi-chk{ width:24px; flex:none; display:flex; justify-content:center; align-items:center; align-self:stretch; background:var(--mengut); margin-right:6px; color:#2a5ac8; font-weight:bold; }
.xmenu .mi .mi-t{ flex:1; padding-right:12px; }
.xmenu .mi .mi-sc{ color:#777; margin-left:18px; }
.xmenu .mi .mi-sub{ color:#000; font-size:9px; }
.xmenu .mi:hover:not(.dis),.xmenu .mi.open{ background:var(--sel); color:#fff; }
.xmenu .mi:hover:not(.dis) .mi-sc{ color:#dfeaff; }
.xmenu .mi.dis{ color:#a0a0a0; }
.xmenu .mi.dis .mi-ico svg,.xmenu .mi.dis .mi-chk{ opacity:.4; }
.xmenu .msep{ height:1px; background:#d8d4c8; margin:3px 2px 3px 28px; }
.xmenu .mi.default .mi-t{ font-weight:bold; }

/* ---------------- Dialogs / controls ---------------- */
.dlg-body{ background:var(--face); }
.btn{ min-width:72px; padding:4px 10px 5px; font:11px Tahoma,sans-serif; background:linear-gradient(to bottom,#fff 0%,#ecebe4 45%,#d8d0c0 100%); border:1px solid #003c74; border-radius:3px; color:#000; }
.btn:hover{ box-shadow:inset 0 0 0 1px rgba(255,214,120,.9), inset 0 0 3px rgba(230,150,50,.6); }
.btn:active,.btn.pressed{ background:linear-gradient(to bottom,#d8d0c0 0%,#e0dcd0 60%,#ecebe4 100%); box-shadow:inset 0 1px 2px rgba(0,0,0,.2); }
.btn:focus{ outline:none; box-shadow:inset 0 0 0 2px #71a5e8, 0 0 2px #0055e5; }
.btn.default{ border:2px solid #003c74; padding:3px 9px 4px; }
.btn:disabled{ color:#a3a39a; border-color:#b0aca0; background:linear-gradient(to bottom,#f4f2ea,#e4e0d4); box-shadow:none; }
input[type=text],input[type=password],input[type=number],textarea,select{ font:11px Tahoma,sans-serif; background:#fff; border:1px solid #7f9db9; padding:2px 3px; -webkit-user-select:text; user-select:text; }
input[type=text]:focus,textarea:focus{ outline:none; border-color:#4a8af0; }
input:disabled,textarea:disabled{ background:#f4f3ee; color:#808080; }
select{ padding:1px; }
.xcheck,.xradio{ display:inline-flex; align-items:center; gap:5px; padding:1px; }
.xcheck input,.xradio input{ display:none; }
.xcheck .xc-box{ width:13px; height:13px; background:#fff; border:1px solid #9a9a8c; border-radius:2px; box-shadow:inset 1px 1px 1px rgba(0,0,0,.08); position:relative; flex:none; }
.xcheck input:checked + .xc-box::after{ content:'\2713'; position:absolute; left:0px; top:-3px; font-size:12px; color:#333; font-weight:bold; }
.xcheck input:disabled + .xc-box{ background:#f4f3ee; }
.xcheck input:disabled ~ .xc-t{ color:#90908a; }
.xradio .xc-box{ width:13px; height:13px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#fff,#e8e8e0); border:1px solid #9a9a8c; position:relative; flex:none; }
.xradio input:checked + .xc-box::after{ content:''; position:absolute; left:3px; top:3px; width:5px; height:5px; border-radius:50%; background:#3a6a3a; }
.xradio input:disabled ~ .xc-t{ color:#90908a; }
fieldset.xgroup{ border:1px solid #d0d0bf; border-radius:3px; padding:8px 8px 8px; margin:0; position:relative; }
fieldset.xgroup legend{ padding:0 4px; color:#0046d5; background:var(--face); }
.tabs{ display:flex; padding:0 6px; position:relative; z-index:2; }
.tab{ padding:3px 12px 4px; border:1px solid #919191; border-bottom:none; background:linear-gradient(to bottom,#faf8f3,#eae6da); margin-right:2px; border-radius:3px 3px 0 0; position:relative; top:2px; }
.tab.sel{ background:var(--face); top:0; padding:4px 12px 6px; z-index:3; }
.tabpane{ border:1px solid #919191; background:var(--face); padding:12px 10px; position:relative; z-index:1; box-shadow:1px 1px 2px rgba(0,0,0,.1); }
.xprogress{ height:14px; border:1px solid #7f9db9; background:#fff; padding:1px; }
.xprogress .xp-fill{ height:100%; background:repeating-linear-gradient(to right,#3c7dc8 0, #3c7dc8 9px, transparent 9px, transparent 12px); }
.xprogress.xp-solid .xp-fill{ background:#3c7dc8; }
.listbox{ background:#fff; border:1px solid #7f9db9; overflow:auto; }
.listbox .lb-item{ padding:1px 4px; white-space:nowrap; }
.listbox .lb-item.sel{ background:var(--sel); color:#fff; }
.xspin{ display:inline-flex; align-items:stretch; }
.xspin input{ border-right:none; }
.xspin .xsp-btns{ display:flex; flex-direction:column; }
.xspin .xsp-btns button{ width:16px; flex:1; border:1px solid #7f9db9; background:linear-gradient(#fff,#dcd8cc); font-size:7px; line-height:1; padding:0; }
.xslider{ -webkit-appearance:none; appearance:none; width:110px; height:18px; background:transparent; }
.xslider::-webkit-slider-runnable-track{ height:4px; background:#dcd8cc; border:1px solid #b0aca0; }
.xslider::-webkit-slider-thumb{ -webkit-appearance:none; width:9px; height:16px; margin-top:-7px; background:linear-gradient(to bottom,#fdfcf8,#d4d0c0); border:1px solid #8a8a7a; border-radius:2px; }
::-webkit-scrollbar{ width:16px; height:16px; }
::-webkit-scrollbar-track{ background:#f0efe6; }
::-webkit-scrollbar-thumb{ background:linear-gradient(to right,#e8e6da,#d4d0be); border:1px solid #b5b1a2; border-radius:2px; }
::-webkit-scrollbar-thumb:hover{ background:#e0dcc8; }
::-webkit-scrollbar-button{ background:linear-gradient(#f4f2ea,#d8d4c4); border:1px solid #b5b1a2; width:16px; height:16px; }
::-webkit-scrollbar-corner{ background:#f0efe6; }
.xtooltip{ position:absolute; background:#ffffe1; border:1px solid #767568; padding:2px 5px; font-size:11px; z-index:8000; pointer-events:none; box-shadow:1px 1px 3px rgba(0,0,0,.3); white-space:nowrap; }

/* ---------------- Balloons ---------------- */
.balloon{ position:absolute; width:260px; background:#ffffe1; border:1px solid #767568; border-radius:6px; padding:8px 10px 10px; z-index:7000; box-shadow:2px 3px 8px rgba(0,0,0,.35); }
.balloon .bl-title{ font-weight:bold; margin-bottom:3px; padding-right:14px; }
.balloon .bl-x{ position:absolute; right:5px; top:5px; width:14px; height:14px; font:10px/14px Tahoma; text-align:center; color:#767568; }
.balloon .bl-x:hover{ background:#e05a4e; color:#fff; border-radius:2px; }
.balloon .bl-tail{ position:absolute; bottom:-9px; width:16px; height:10px; overflow:hidden; }
.balloon .bl-tail::after{ content:''; position:absolute; left:3px; top:-8px; width:12px; height:12px; background:#ffffe1; border:1px solid #767568; transform:rotate(45deg); }

/* ---------------- Boot / Welcome / Shutdown ---------------- */
#bootLayer{ position:absolute; inset:0; z-index:9000; background:#000; }
#bootScreen{ position:absolute; inset:0; background:#000; display:flex; flex-direction:column; align-items:center; justify-content:center; }
#bootLogo{ text-align:center; margin-bottom:60px; }
#bootFlag{ width:88px; height:66px; margin:0 auto 18px; }
#bootFlag svg{ width:88px; height:66px; }
#bootWord{ color:#fff; font-family:'Franklin Gothic Medium',Arial,sans-serif; font-size:21px; letter-spacing:.5px; text-align:right; margin-bottom:-6px; }
#bootReg{ font-size:11px; vertical-align:super; }
#bootXP{ color:#fff; font-family:'Franklin Gothic Medium',Arial,sans-serif; font-size:66px; font-weight:bold; text-align:left; line-height:1; }
#bootXPx{ color:#f7941d; font-size:40px; vertical-align:14px; margin-left:6px; font-weight:bold; }
#bootBarWrap{ width:158px; height:15px; border:2px solid #8c8c8c; border-radius:4px; padding:2px; overflow:hidden; }
#bootBar{ display:flex; gap:3px; animation:bootslide 1.6s linear infinite; width:60px; }
#bootBar i{ width:11px; height:7px; background:linear-gradient(#a8d4ff,#4a90e0); border-radius:1px; flex:none; }
@keyframes bootslide{ from{transform:translateX(-60px)} to{transform:translateX(165px)} }
#bootCopy{ position:absolute; bottom:34px; color:#a0a0a0; font-size:11px; }
#welcomeScreen{ position:absolute; inset:0; display:flex; flex-direction:column; background:linear-gradient(to bottom,#00309c 0%,#4a6fcf 14%,#6d8fe8 30%,#7d9ae8 50%,#6d8fe0 72%,#4a6fc8 90%,#00309c 100%); }
.wel-top{ height:76px; display:flex; align-items:flex-end; padding:0 0 8px 24px; }
.wel-brand{ color:#fff; font-family:'Franklin Gothic Medium',Arial,sans-serif; font-size:26px; font-style:italic; text-shadow:1px 2px 3px rgba(0,0,40,.6); display:flex; align-items:baseline; gap:4px; }
.wel-brand .wel-flag{ width:30px; height:24px; display:inline-block; margin-right:2px; align-self:center; }
.wel-brand .wel-flag svg{ width:30px; height:24px; }
.wel-reg{ font-size:12px; }
.wel-xp{ font-size:20px; color:#f7941d; font-style:normal; font-weight:bold; }
.wel-mid{ flex:1; display:flex; border-top:2px solid rgba(255,255,255,.5); border-bottom:2px solid rgba(255,255,255,.5); background:linear-gradient(to bottom,rgba(255,255,255,.16),rgba(255,255,255,.05) 40%,rgba(0,0,60,.12)); }
.wel-left{ flex:1; display:flex; align-items:center; justify-content:flex-end; padding-right:60px; }
.wel-instructions{ color:#fff; font-size:15px; text-shadow:1px 1px 2px rgba(0,0,40,.7); max-width:220px; text-align:left; }
.wel-right{ flex:1.2; display:flex; align-items:center; }
#welUsers{ display:flex; flex-direction:column; gap:14px; }
.wel-user{ display:flex; align-items:center; gap:12px; padding:8px 16px 8px 10px; border-radius:8px; min-width:270px; }
.wel-user:hover{ background:rgba(255,255,255,.18); box-shadow:inset 0 0 0 1px rgba(255,255,255,.35); }
.wel-user .wu-av{ width:54px; height:54px; background:#fff; border-radius:6px; border:2px solid rgba(255,255,255,.75); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.wel-user .wu-av svg{ width:48px; height:48px; }
.wel-user .wu-name{ color:#fff; font-size:16px; text-shadow:1px 1px 2px rgba(0,0,40,.7); }
.wel-user .wu-sub{ color:#dce8ff; font-size:10.5px; }
.wel-bot{ height:84px; display:flex; align-items:center; justify-content:space-between; padding:0 26px; }
.wel-turnoff{ display:flex; align-items:center; gap:8px; color:#fff; font-size:12.5px; padding:6px 8px; border-radius:5px; }
.wel-turnoff:hover{ background:rgba(255,255,255,.15); }
.wel-power{ width:26px; height:26px; border-radius:5px; background:linear-gradient(#f0947a,#d24f28); display:inline-flex; align-items:center; justify-content:center; box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 1px 1px 3px rgba(0,0,0,.4); }
.wel-power svg{ width:15px; height:15px; }
.wel-hint{ color:#e8f0ff; font-size:10px; text-align:right; line-height:1.5; text-shadow:1px 1px 1px rgba(0,0,40,.5); }
#welStatus{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); color:#fff; font-size:15px; text-shadow:1px 1px 3px rgba(0,0,40,.8); }
#shutdownScreen{ position:absolute; inset:0; background:linear-gradient(to bottom,#00309c 0%,#5a7edc 50%,#00309c 100%); display:flex; align-items:center; justify-content:center; }
#shutdownText{ color:#fff; font-size:20px; font-family:'Franklin Gothic Medium',Tahoma,sans-serif; font-style:italic; text-shadow:1px 1px 3px rgba(0,0,40,.8); }
#safeOff{ position:absolute; inset:0; background:#000; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:34px; }
#safeOffText{ color:#f7941d; font:italic bold 26px 'Franklin Gothic Medium',Georgia,serif; text-align:center; line-height:1.35; }
#powerOn{ padding:6px 22px; font:12px Tahoma; background:#222; color:#888; border:1px solid #444; border-radius:4px; }
#powerOn:hover{ color:#ccc; border-color:#777; }
.standby-scr{ position:absolute; inset:0; background:#000; display:flex; align-items:center; justify-content:center; }
.standby-scr .stb-t{ color:#5a6a8a; font-size:15px; }

/* ---------------- Logoff / Turn off overlays ---------------- */
.sys-overlay{ position:absolute; inset:0; background:rgba(30,60,140,.55); z-index:8500; display:flex; align-items:center; justify-content:center; }
.turnoff-dlg{ width:340px; background:linear-gradient(to bottom,#4a78dc 0%,#3a68cc 100%); border-radius:10px; padding:18px 0 16px; box-shadow:0 6px 30px rgba(0,0,0,.6); text-align:center; }
.turnoff-dlg .to-title{ color:#fff; font-size:16px; font-weight:bold; margin-bottom:18px; text-shadow:1px 1px 2px rgba(0,0,40,.6); }
.to-btns{ display:flex; justify-content:center; gap:18px; margin-bottom:14px; }
.to-opt{ width:88px; text-align:center; color:#fff; font-size:11px; padding:6px 2px; border-radius:5px; }
.to-opt:hover{ background:rgba(255,255,255,.15); }
.to-opt.dis{ opacity:.4; }
.to-ico{ width:34px; height:34px; margin:0 auto 6px; border-radius:7px; display:flex; align-items:center; justify-content:center; box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 1px 2px 4px rgba(0,0,0,.45); }
.to-ico svg{ width:19px; height:19px; }
.to-standby .to-ico{ background:linear-gradient(#f5cf6b,#e0a02e); }
.to-off .to-ico{ background:linear-gradient(#f0947a,#c53d17); }
.to-restart .to-ico{ background:linear-gradient(#8ed07f,#3c9434); }
.to-cancel{ margin-top:2px; }
.logoff-dlg{ width:330px; background:linear-gradient(to bottom,#4a78dc,#3a68cc); border-radius:10px; padding:18px 0 16px; box-shadow:0 6px 30px rgba(0,0,0,.6); text-align:center; }
.logoff-dlg .to-title{ color:#fff; font-size:16px; font-weight:bold; margin-bottom:16px; }
.logoff-dlg .lo-btns{ display:flex; justify-content:center; gap:22px; margin-bottom:14px; }
.lo-opt{ width:100px; text-align:center; color:#fff; padding:6px 2px; border-radius:5px; }
.lo-opt:hover{ background:rgba(255,255,255,.15); }
.lo-opt .to-ico{ width:34px; height:34px; margin:0 auto 6px; border-radius:7px; display:flex; align-items:center; justify-content:center; box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 1px 2px 4px rgba(0,0,0,.45); }
.lo-switch .to-ico{ background:linear-gradient(#f5cf6b,#e0a02e); }
.lo-off .to-ico{ background:linear-gradient(#8ed07f,#3c9434); }

/* screensaver host */
#saverLayer{ position:absolute; inset:0; background:#000; z-index:9500; }