/* luna.css — Windows XP "Luna" visual system. Faithful geometry, gradients, bevels.
   Color scheme switching via [data-scheme] custom properties (Blue / Olive Green / Silver). */

:root {
  --luna-face: #ece9d8;
  --luna-face-light: #f6f4ea;
  --luna-btn-border: #003c74;
  --luna-highlight: #316ac5;
  --luna-menu-sel: #316ac5;
  --title-active-1: #0a58d6;
  --title-active-g: linear-gradient(180deg, #0997ff 0%, #0570e2 9%, #0755dd 18%, #0653da 55%, #044fc4 86%, #0343a8 94%, #03348c 100%);
  --title-inactive-g: linear-gradient(180deg, #89a8ec 0%, #7394dd 12%, #7291dc 60%, #708bd4 88%, #687fbf 100%);
  --frame-color: #0831d9;
  --taskbar-h: 30px;
  --startmenu-bg1: #0831d9;
}

body[data-scheme="olive"] {
  --luna-face: #ece9d8;
  --title-active-g: linear-gradient(180deg, #a5c11b 0%, #99b41c 10%, #859c1c 45%, #758c1d 85%, #64771c 100%);
  --title-inactive-g: linear-gradient(180deg, #b6c98d 0%, #a9bd7c 50%, #97a966 100%);
  --frame-color: #7ba341;
  --startmenu-bg1: #5b7717;
}
body[data-scheme="silver"] {
  --luna-face: #ece9d8;
  --title-active-g: linear-gradient(180deg, #e6e8eb 0%, #ced2d8 10%, #b8bcc4 45%, #a9adb6 85%, #969aa3 100%);
  --title-inactive-g: linear-gradient(180deg, #eceef1 0%, #dde0e4 50%, #ccd0d6 100%);
  --frame-color: #9098a4;
  --startmenu-bg1: #6b7887;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; }
body {
  font-family: Tahoma, "Segoe UI", Verdana, Geneva, sans-serif;
  font-size: 11px;
  background: #000;
  user-select: none;
  -webkit-user-select: none;
  cursor: default;
  touch-action: manipulation;
}
img.xp-icon { display: block; image-rendering: -webkit-optimize-contrast; }

#os-root { position: fixed; inset: 0; overflow: hidden; }

/* ---- wallpaper ---------------------------------------------------- */
#wallpaper { position: absolute; inset: 0; z-index: 0; background: #2a76d4; }
.xp-wallpaper-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.xp-wallpaper-clouds { position: absolute; top: 0; left: 0; width: 130%; height: 100%; pointer-events: none; will-change: transform; }

#desktop-layer { position: absolute; inset: 0 0 var(--taskbar-h) 0; z-index: 1; }
#window-layer { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
#window-layer > * { pointer-events: auto; }
#dialog-layer { position: absolute; inset: 0; z-index: 60; pointer-events: none; }
#dialog-layer > * { pointer-events: auto; }
#balloon-layer { position: absolute; inset: 0; z-index: 80; pointer-events: none; }
#balloon-layer > * { pointer-events: auto; }
#taskbar-anchor { position: absolute; inset: auto 0 0 0; z-index: 70; }
#startmenu-anchor { position: absolute; left: 0; bottom: var(--taskbar-h); z-index: 95; pointer-events: none; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; }
#startmenu-anchor > * { pointer-events: auto; }
#overlay-layer { position: absolute; inset: 0; z-index: 120; pointer-events: none; }
#shutdown-layer { position: absolute; inset: 0; z-index: 200; pointer-events: none; }
#shutdown-layer > * { pointer-events: auto; }
#saver-layer { position: absolute; inset: 0; z-index: 150; display: none; pointer-events: auto; }

/* ---- boot / bios / splash ----------------------------------------- */
.bios-screen { position: absolute; inset: 0; background: #000; color: #ccc; padding: 28px; font-family: "Lucida Console", monospace; }
.bios-text { margin: 0; font-size: 13px; line-height: 1.5; white-space: pre-wrap; }

.boot-phase, .boot-splash, .welcome-screen { position: absolute; inset: 0; z-index: 300; }
.boot-splash { background: #000; display: grid; place-items: center; grid-template-rows: 1fr auto auto 1fr; color: #fff; }
.splash-brand { align-self: end; display: flex; gap: 14px; align-items: center; transform: translateY(-16px); }
.splash-name .splash-msft { font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif; letter-spacing: .5px; font-size: 20px; }
.splash-winname { font-family: "Franklin Gothic Medium", "Trebuchet MS", sans-serif; font-size: 44px; font-weight: bold; line-height: 1; letter-spacing: -.5px; }
.xp-sup { color: #ff9c26; font-size: 26px; vertical-align: super; margin-left: 2px; text-transform: uppercase; }
.splash-progress { width: 190px; height: 15px; border: 2px solid #8b8b8b; border-radius: 8px; overflow: hidden; margin: 26px auto 8px; position: relative; background:#111;}
.splash-blocks { position: absolute; top: 1.5px; display: flex; gap: 5px; left: -18%; will-change: transform; }
.splash-blocks::before {
  content: ""; width: 130%; height: 9px;
  background: repeating-linear-gradient(90deg, transparent 0 4px, #3388ff 4px 9px);
  border-radius: 4px;
}
.splash-foot { align-self: start; font-size: 10px; color: #888; text-align: center; padding-bottom: 18px; }

/* ---- welcome ------------------------------------------------------ */
.welcome-screen {
  background: linear-gradient(180deg, #5a7edc 0%, #3f68cf 46%, #3761c8 54%, #5a7edc 100%);
  display: flex; flex-direction: column; color: #fff;
}
.welcome-topbar { height: 84px; flex: 0 0 auto; background: linear-gradient(180deg,#245edb,#4f82ef); border-bottom: 2px solid rgba(255,255,255,.35); }
.welcome-mid { flex: 1; display: flex; align-items: center; justify-content: center; gap: 40px; padding: 0 6vw; }
.welcome-left { flex: 1.25; max-width: 520px; text-align: right; display: flex; justify-content: flex-end; align-items: center; gap: 18px; padding-right: 30px; border-right: 1px solid rgba(255,255,255,.45); min-height: 220px; }
.welcome-os { font-family: "Franklin Gothic Medium","Trebuchet MS",sans-serif; font-size: 40px; line-height: .95; }
.welcome-os::first-line {}
.welcome-hint { margin-top: 10px; opacity: .92; font-size: 14px; }
.welcome-right { flex: 1; max-width: 420px; padding-left: 26px; display: flex; flex-direction: column; gap: 16px; }
.welcome-users { display: flex; flex-direction: column; gap: 8px; }
.user-tile {
  display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,0); border: 0; color: #fff;
  font: inherit; cursor: pointer; padding: 8px 12px; border-radius: 6px; text-align: left;
}
.user-tile:hover { background: rgba(255,255,255,.14); outline-offset: -3px; }
.user-tile:hover .tile-name { color: #ffe27a; }
.tile-avatar img { border-radius: 6px; }
.tile-avatar { display:block; filter: drop-shadow(0 0 0 transparent); }
.user-tile .tile-avatar { box-shadow: 0 0 0 2px rgba(255,255,255,.65), 0 2px 10px rgba(0,0,20,.35); border-radius: 8px; overflow: hidden; line-height: 0; }
.tile-name { font-size: 20px; }
.welcome-sub { opacity: .9; }
.welcome-loading { text-align: center; opacity: .85; font-style: italic; min-height: 22px; flex: 0 0 auto; }
.welcome-loading.hidden { visibility: hidden; }
.welcome-bottombar { flex: 0 0 auto; height: 78px; background: linear-gradient(180deg,#2151c6,#497ee9); border-top: 2px solid rgba(255,255,255,.35);
  display: flex; align-items: center; justify-content: space-between; padding: 0 34px; }
.welcome-turnoff { display: flex; align-items: center; gap: 10px; background: none; border: 0; color: #fff; font: inherit; cursor: pointer; }
.welcome-turnoff:hover span:last-child { text-decoration: underline; }
.wt-orb { width: 26px; height: 26px; border-radius: 50%; display: inline-block; box-shadow: inset 0 -4px 6px rgba(0,0,0,.35), 0 0 0 2px rgba(255,255,255,.7); }
.wt-red { background: radial-gradient(circle at 35% 30%, #ff9d84, #e2372b 60%, #b31f12); }
.welcome-hint-bottom { opacity: .85; }

.shutdown-screen { position:absolute; inset:0; background: linear-gradient(180deg, #5a7edc, #3761c8); color:#fff; display:flex; flex-direction:column; gap:22px; align-items:center; justify-content:center; }
.shutdown-orbs { display:flex; gap:26px; }
.orb { width: 42px; height:42px; border-radius:50%; animation: orbpulse 1.1s ease-in-out infinite alternate; box-shadow: inset 0 -6px 8px rgba(0,0,0,.35), 0 0 0 2px rgba(255,255,255,.6); }
.orb.amber { background: radial-gradient(circle at 35% 30%, #ffe6a0, #f0b400 60%, #b38200); }
.orb.red { background: radial-gradient(circle at 35% 30%, #ffb09c, #e2372b 60%, #a81f12); animation-delay:.18s;}
.orb.green { background: radial-gradient(circle at 35% 30%, #c6f2ae, #57a83c 60%, #2f6b1c); animation-delay:.36s;}
@keyframes orbpulse { from { transform: scale(.92);} to { transform: scale(1.06);} }
.shutdown-label { font-size: 20px; text-shadow: 0 1px 2px rgba(0,0,40,.4); }
.powered-off { position:absolute; inset:0; background:#000; color:#e9b24a; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; font-family:"Lucida Console",monospace; transition: opacity .5s; }
.powered-off.fade { opacity: 0; pointer-events:none; }
.po-icon { font-size: 54px; }
.po-main { font-size: 18px; }
.po-sub { color:#7d6a43; font-size: 11px; }
.resume-overlay { position:absolute; inset:0; background:#000; color:#fff; display:grid; place-items:center; transition:opacity .4s; }
.resume-overlay.fade { opacity:0; pointer-events:none; }
.resume-inner { text-align:center; display:flex; flex-direction:column; gap:14px; align-items:center; }
.resume-label { font-size: 18px; }
.resume-bar { width: 200px; height: 13px; border-radius: 8px; border:2px solid #777; overflow:hidden; background:#151515; }
.resume-bar div { height: 100%; width: 0; transition: width 1.5s ease; background: repeating-linear-gradient(90deg,transparent 0 4px,#3388ff 4px 9px); }
.standby-veil { position:absolute; inset:0; background:#000; z-index:500; display:grid; place-items:center; cursor:pointer; }
.standby-breathe { width:52px;height:52px;border-radius:50%; background:radial-gradient(circle at 40% 32%, #333 30%, #0a0a0a 75%); animation: breathe 2.6s ease-in-out infinite; box-shadow: 0 0 24px rgba(120,160,255,.14);}
@keyframes breathe { 0%,100%{opacity:.35;} 50%{opacity:.9;} }

/* ---- desktop icons -------------------------------------------------- */
.xp-desktop-icons { position: absolute; inset: 0; overflow: hidden; outline: none; }
.xp-di {
  position: absolute; width: 76px; padding: 2px; text-align: center; cursor: default;
  display:flex; flex-direction:column; align-items:center; gap:3px;
}
.xp-di .xp-icon { width: 48px; height: 48px; }
.di-label {
  font-size: 11px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,40,.9), 0 0 3px rgba(0,0,40,.6);
  padding: 1px 2px; line-height: 1.25; word-break: break-word; max-width: 76px;
}
.xp-di.selected .xp-icon { filter: drop-shadow(0 0 4px #79c0ff) brightness(1.06) saturate(1.1); opacity: .82; }
.xp-di.selected .di-label { background: #316ac5; text-shadow: none; outline: 1px dotted rgba(255,255,255,.7); outline-offset:-1px; }
.xp-di.focused.selected .di-label { outline-style: solid; }
.xp-marquee { position: fixed; z-index: 5; border: 1px solid #316ac5; background: rgba(49,106,197,.28); pointer-events: none; }
.di-rename { font: inherit; font-size: 11px; border: 1px solid #316ac5; width: 72px; padding: 1px 2px; user-select: text; -webkit-user-select:text; }

/* ---- windows ------------------------------------------------------- */
.xp-window {
  position: absolute; display: flex; flex-direction: column;
  background: linear-gradient(180deg, #1450c8 0%, #1163e2 3px, #1059d6 90%);
  border-radius: 8px 8px 2px 2px;
  padding: 0 4px 4px;
  box-shadow: 2px 3px 14px rgba(0,10,60,.4);
  min-width: 120px;
}
.xp-window:not(.active) { box-shadow: 1px 2px 8px rgba(0,10,60,.25); }
.xp-window.active { background: linear-gradient(180deg, #1660d8 0%, #1170e8 3px, #0d55cc 96%); }
body[data-scheme="olive"] .xp-window:not(.active) { background: linear-gradient(180deg,#8ca25d,#9db06f); }
body[data-scheme="olive"] .xp-window.active { background: linear-gradient(180deg,#87a02e,#7d9a2b); }
body[data-scheme="silver"] .xp-window:not(.active) { background: linear-gradient(180deg,#b9bec6,#adb2ba); }
body[data-scheme="silver"] .xp-window.active { background: linear-gradient(180deg,#b0b5bd,#9ba0a8); }

.xp-titlebar {
  height: 29px; flex: 0 0 auto; margin: 0 -2px 0;
  border-radius: 7px 7px 0 0;
  background: var(--title-inactive-g);
  display: flex; align-items: center; gap: 4px; padding: 0 4px 0 6px;
  cursor: default; touch-action: none;
}
.xp-window.active .xp-titlebar { background: var(--title-active-g); }
.xp-window.maximized .xp-titlebar { border-radius: 0; }
.xp-title-text {
  flex: 1; font-weight: bold; font-size: 13px; color: #d9e6fa; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 1px 1px 1px rgba(0,10,50,.72);
}
.xp-window.active .xp-title-text { color: #fff; }
.xp-titlebar.hung .xp-title-text { color: #ffd2ac; }
.xp-title-buttons { display: flex; gap: 2px; }
.xp-win-btn {
  width: 21px; height: 21px; border-radius: 4px; border: 1px solid rgba(255,255,255,.75);
  box-shadow: inset 0 0 0 1px rgba(0,20,90,.35);
  background: radial-gradient(circle at 34% 24%, #a7d3ff 0%, #4396f4 28%, #1362d8 62%, #0b4bb4 100%);
  cursor: pointer; padding: 0; position: relative;
}
.xp-win-btn:hover { filter: brightness(1.18); }
.xp-win-btn:active { filter: brightness(.88); }
.xp-btn-minimize::after { content: ""; position: absolute; left: 5px; right: 5px; bottom: 4px; height: 2.6px; background: #fff; border-radius: 1px; box-shadow: 0 1px 0 rgba(0,20,90,.4); }
.xp-btn-maximize::after { content: ""; position: absolute; inset: 4px 4px 5px; border: 2.4px solid #fff; border-radius: 1.5px; box-shadow: 0 1px 0 rgba(0,20,90,.4); }
.xp-btn-maximize.restoremode::after { content: ""; top: 4px; bottom: 7px; left: 4px; right: 7px; }
.xp-btn-maximize.restoremode::before { content: ""; position: absolute; top: 7px; bottom: 4px; left: 7px; right: 4px; border: 2.4px solid #fff; border-radius: 1.5px; background: transparent; }
.xp-btn-close {
  background: radial-gradient(circle at 34% 24%, #ffc2ad 0%, #f2705a 30%, #d6381b 66%, #b02a12 100%);
  margin-left: 3px; width: 22px;
}
.xp-btn-close::after { content: "\00d7"; position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-weight:bold; font-size: 17px; line-height:1; text-shadow: 0 1px 1px rgba(60,0,0,.6); }

.xp-client { flex: 1; background: var(--luna-face); border: 1px solid var(--frame-color); border-top: 0; overflow: hidden; position: relative; display: flex; flex-direction: column; }
.xp-dialog .xp-client { border: 1px solid var(--frame-color); }
.xp-statusbar { flex: 0 0 auto; height: 20px; background: var(--luna-face); border-top: 1px solid #d4d0c0; display: flex; }
.xp-statusbar > * { border-right: 1px solid #d4d0c0; padding: 3px 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.xp-fill-col { display: flex; flex-direction: column; flex: 1; min-height: 0; }

.xp-resize { position: absolute; z-index: 6; }
.xp-resize-n { top: -3px; left: 6px; right: 6px; height: 7px; cursor: n-resize; }
.xp-resize-s { bottom: -3px; left: 6px; right: 6px; height: 7px; cursor: s-resize; }
.xp-resize-e { right: -3px; top: 8px; bottom: 8px; width: 7px; cursor: e-resize; }
.xp-resize-w { left: -3px; top: 8px; bottom: 8px; width: 7px; cursor: w-resize; }
.xp-resize-ne { top: -3px; right: -3px; width: 12px; height: 12px; cursor: ne-resize; }
.xp-resize-nw { top: -3px; left: -3px; width: 12px; height: 12px; cursor: nw-resize; }
.xp-resize-se { bottom: -3px; right: -3px; width: 12px; height: 12px; cursor: se-resize; }
.xp-resize-sw { bottom: -3px; left: -3px; width: 12px; height: 12px; cursor: sw-resize; }
.xp-window.maximized .xp-resize { display: none; }

/* ---- taskbar -------------------------------------------------------- */
.xp-taskbar {
  height: var(--taskbar-h);
  background:
    linear-gradient(180deg, #2b64e3 0%, #4780ea 6%, #2862d9 40%, #2255cd 86%, #1c47ad 92%, #153684 100%);
  border-top: 1px solid #1941a5;
  display: flex; align-items: stretch; position: relative; z-index: 70;
  box-shadow: 0 -1px 0 rgba(255,255,255,.22) inset;
  touch-action: none;
}
.tb-divider { width: 2px; margin: 4px 3px; background: rgba(255,255,255,.32); box-shadow: 1px 0 0 rgba(0,10,60,.35); }
.xp-start-btn {
  position: relative; border: 0; cursor: pointer; margin-right: 6px; padding: 0 26px 0 22px;
  font: italic bold 17px/1 "Franklin Gothic Medium", "Trebuchet MS", Tahoma, sans-serif; color: #fff;
  background: linear-gradient(180deg, #57a94e 0%, #3f9c38 12%, #379030 45%, #2f7f28 82%, #256b1f 93%, #1d5418 100%);
  border-radius: 0 14px 14px 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset -1px 0 3px rgba(10,60,10,.4);
  text-shadow: 1px 1px 2px rgba(0,40,0,.65);
  display: flex; align-items: center; gap: 7px;
}
.xp-start-btn:hover { filter: brightness(1.1); }
.xp-start-btn:active, .xp-start-btn.pressed { filter: brightness(.9); box-shadow: inset 0 2px 6px rgba(0,40,0,.5); }
.start-flag img { border-radius: 3px; }

.xp-quicklaunch { display: flex; align-items: center; gap: 2px; padding: 0 2px; }
.ql-btn { width: 22px; height: 22px; display:grid; place-items:center; background:none; border:1px solid transparent; border-radius:3px; padding:0; cursor:pointer; }
.ql-btn:hover { border-color: rgba(255,255,255,.6); background: rgba(255,255,255,.15); }
.ql-desktop-icon { width: 15px; height: 13px; border: 1px solid #cfe2ff; border-top-width: 3px; background: #7fb1e8; display:inline-block; border-radius: 2px; }

.xp-task-list { flex: 1; display: flex; gap: 3px; align-items: center; overflow: hidden; padding: 0 2px; }
.xp-task-button {
  height: 24px; min-width: 40px; max-width: 164px; flex: 1 1 auto;
  display: flex; align-items: center; gap: 4px; padding: 0 6px;
  background: linear-gradient(180deg, #467fe0 0%, #3a72da 45%, #3265cf 55%, #2c59bd 100%);
  border: 1px solid #1c4bb0; border-radius: 2px; color: #fff; font: inherit; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28);
}
.xp-task-button:hover { filter: brightness(1.12); }
.xp-task-button.active {
  background: linear-gradient(180deg, #1e50af 0%, #1746a4 50%, #123c91 100%);
  box-shadow: inset 1px 1px 4px rgba(0,10,50,.55);
  border-color: #12337e;
}
.xp-task-button.flashing { animation: flashbtn .4s steps(2) infinite; }
@keyframes flashbtn { to { filter: invert(.9); } }
.tb-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; font-weight: bold; text-shadow: 0 1px 1px rgba(0,10,50,.5);}
.tb-count { opacity: .8; font-size: 10px; }

.xp-tray {
  display: flex; align-items: center; gap: 5px; padding: 0 12px 0 10px;
  background: linear-gradient(180deg, #1290e8 0%, #0f7ce0 8%, #1272d8 45%, #0f63c4 86%, #0a53ab 94%, #08448e 100%);
  box-shadow: inset 1px 0 0 rgba(255,255,255,.3), inset 2px 0 0 rgba(0,10,60,.3);
  margin-left: 4px;
}
body[data-scheme="olive"] .xp-tray { background: linear-gradient(180deg,#89a03c 0%,#7d9436 50%,#6a7f2d 100%); }
body[data-scheme="silver"] .xp-tray { background: linear-gradient(180deg,#cfd3da 0%,#bfc4cb 50%,#a7acb4 100%); }
.tray-icon { background: none; border: 0; padding: 1px 2px; cursor: pointer; display: grid; place-items: center; border-radius: 3px; }
.tray-icon:hover { background: rgba(255,255,255,.2); }
.xp-clock { color: #fff; font-size: 11px; min-width: 54px; text-align: center; text-shadow: 0 1px 1px rgba(0,10,50,.55); cursor: default; }

/* ---- start menu ----------------------------------------------------- */
.xp-startmenu {
  width: min(402px, calc(100vw - 6px)); border-radius: 8px 8px 0 0; overflow: hidden; position: relative; pointer-events: auto; bottom: 0; left: 0;
  background: #4282d6; padding: 1px 2px 3px;
  box-shadow: 3px -2px 12px rgba(0,10,60,.45);
  border: 1px solid #1146c8;
}
.sm-header {
  height: 56px; display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(180deg, #1861ce 0%, #2d7be4 40%, #215fcb 85%, #1c53b8 100%);
  border-bottom: 1px solid #113c9a; margin: 0 -2px 0; border-radius: 8px 8px 0 0;
  padding: 0 10px 0 14px;
}
body[data-scheme="olive"] .sm-header { background: linear-gradient(180deg,#6a8520,#55701a 90%); }
body[data-scheme="silver"] .sm-header { background: linear-gradient(180deg,#aab1bc,#8f97a2 90%); }
.sm-username { color: #fff; font-size: 15px; font-weight: bold; text-shadow: 1px 1px 2px rgba(0,10,50,.7); }
.sm-avatar { width: 44px; height: 44px; border-radius: 4px; background-size: cover; box-shadow: 0 0 0 2px rgba(255,255,255,.8), 0 2px 6px rgba(0,10,50,.4); }
.sm-columns { display: flex; background: #1638b8; }
body[data-scheme="olive"] .sm-columns { background: #4d6416; }
body[data-scheme="silver"] .sm-columns { background: #7b828d; }
.sm-col-left { flex: 1.08; background: #fff; display: flex; flex-direction: column; padding: 4px; gap: 0; min-height: 380px; }
.sm-col-right { flex: 1; background: linear-gradient(180deg,#d3e5fa,#cfe2f8); display:flex; flex-direction: column; padding: 4px; border-left: 1px solid #aec7ea; }
.sm-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: none; border: 0; font: inherit; text-align: left; padding: 4px 6px; cursor: pointer; color: #00157f;
  border-radius: 0;
}
.sm-item b { font-weight: normal; font-size: 12px; }
.sm-item-big { padding: 6px 6px; color: #001a8c; }
.sm-item-big b { font-size: 13px; }
.sm-item:hover { background: var(--highlight-hover, #2f71cd); color: #fff; }
.sm-item:hover img { filter: drop-shadow(0 0 2px rgba(255,255,255,.8)); }
.sm-item.disabled { opacity: .45; pointer-events: none; }
.sm-sep { height: 1px; margin: 3px 4px; background: #c3d3e8; box-shadow: 0 1px 0 rgba(255,255,255,.7); }
.sm-fill { flex: 1; }
.sm-allprograms { border-top: 1px solid #dbe7f5; margin-top: 2px; justify-content: space-between; }
.ap-arrow { color: #2a64cf; font-size: 10px; }
.sm-allprograms .ap-label { display: flex; align-items: center; gap: 6px; color:#1438a8; }
.sm-recents-wrap { display: contents; }
.sm-recent .ri-label { color: #222; }
.sm-footer {
  height: 38px; display: flex; align-items: stretch; justify-content: flex-end; gap: 4px; padding: 3px 4px;
  background: linear-gradient(180deg, #4d8bdb 0%, #3a78d8 40%, #2f69cc 100%);
  border-top: 1px solid #16409f;
}
body[data-scheme="olive"] .sm-footer { background: linear-gradient(180deg,#637c1e,#4f6617); }
body[data-scheme="silver"] .sm-footer { background: linear-gradient(180deg,#98a0ab,#828a95); }
.sm-footer-btn {
  display: flex; align-items: center; gap: 7px; background: linear-gradient(180deg, #ffb13d 0%, #f49416 45%, #e07d08 60%, #cf6f04 100%);
  border: 1px solid #a85a08; border-radius: 3px; color: #fff; font: inherit; font-weight: bold;
  padding: 0 12px; cursor: pointer; text-shadow: 0 1px 1px rgba(120,60,0,.6);
}
.sm-footer-btn:hover { filter: brightness(1.08); }
.sm-logoff { background: linear-gradient(180deg,#f2b25c,#e39a33 60%,#c9821f); }
.sm-turnoff { background: linear-gradient(180deg,#ff9f3f,#f2861b 60%,#d96e06); }

/* flyouts */
.sm-flyout {
  position: fixed; z-index: 300; min-width: 200px; display: none;
  background: #fff; border: 1px solid #7f9de0; box-shadow: 2px 3px 8px rgba(0,10,60,.35);
  padding: 3px; color: #001;
}
.sm-flyout.visible { display: block; animation: menufade .09s ease-out; }
.sm-fly-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: none; border: 0; font: inherit; text-align: left; padding: 4px 8px; cursor: pointer; color: #14213d;
}
.sm-fly-item:hover { background: var(--highlight-hover,#2f71cd); color: #fff; }
.sm-fly-item.has-sub .mi-arrow { margin-left: auto; }
.sm-fly-sep { height: 1px; margin: 3px 6px; background: #dbe4f0; }
.ellip { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.has-arrow::after { content: " \25B8"; color: #1438a8; }
.sm-item:hover .has-arrow::after, .sm-item:hover.has-arrow::after { color: #fff; }

/* ---- context menus & menubar --------------------------------------- */
.xp-contextmenu, .sm-flyout.nested {
  position: fixed; z-index: 250; min-width: 168px; padding: 2px;
  background: #fff; border: 1px solid #7f9de0; box-shadow: 2px 3px 8px rgba(0,10,60,.35);
  animation: menufade .09s ease-out; color: #101010;
}
@keyframes menufade { from { opacity: 0; } }
.xp-menu-item { display: flex; align-items: center; gap: 7px; padding: 4px 22px 4px 6px; cursor: default; position: relative; }
.mi-icon { width: 18px; display: grid; place-items: center; }
.mi-check { width: 16px; color: #144a9e; font-weight: bold; }
.mi-label { flex: 1; white-space: nowrap; }
.mi-accel { color: #565656; margin-left: 18px; }
.mi-arrow { font-size: 8px; margin-left: 12px; }
.accel-underline { text-decoration: underline; }
.xp-menu-item:hover:not(.disabled) { background: var(--highlight-hover,#2f71cd); color: #fff; }
.xp-menu-item:hover:not(.disabled) .mi-accel { color: #dbe8ff; }
.xp-menu-item.bold { font-weight: bold; }
.xp-menu-item.disabled { color: #97948f; text-shadow: 1px 1px 0 #fff; }
.xp-menu-sep { height: 1px; margin: 3px 3px; background: #d6dbec; }
.xp-menubar { display: flex; flex: 0 0 auto; background: var(--luna-face); border-bottom: 1px solid #d4d0c0; position: relative; z-index: 4;}
.xp-menubar-item { padding: 3px 7px; cursor: default; }
.xp-menubar-item.open, .xp-menubar-item:hover { background: var(--highlight-hover,#2f71cd); color: #fff; }

/* ---- dialogs --------------------------------------------------------- */
.msgbox-body { display: flex; gap: 14px; padding: 18px 18px 12px; align-items: flex-start; }
.msgbox-body img { flex: 0 0 auto; }
.msgbox-textwrap { padding-top: 4px; }
.msgbox-text { font-size: 12px; color: #111; white-space: pre-line; }
.msgbox-detail { font-size: 11px; color: #333; margin-top: 4px; }
.msgbox-buttons { display: flex; gap: 7px; justify-content: center; padding: 10px 12px 14px; }
.prompt-form { padding: 16px 18px 4px; }
.prompt-label { margin-bottom: 8px; font-size: 11.5px; }
.endprog-form { padding: 2px 2px 0; }
.endprog-form .msgbox-body { margin: 6px 8px 0; }
.endprog-form .msgbox-buttons { justify-content: center; padding-bottom: 6px; }
.app-crashbox { padding: 26px; font-size: 12px; }

.xp-button {
  min-width: 74px; height: 23px; padding: 0 11px; font: inherit;
  color: #14141e;
  background: linear-gradient(180deg, #fdfdfd 0%, #f2f1ea 46%, #eceadf 86%, #e4e2d4 100%);
  border: 1px solid #003c74; border-radius: 3px; cursor: pointer;
  box-shadow: inset -1px -1px 0 rgba(160,160,140,.4), inset 1px 1px 0 #ffffff;
}
.xp-button:hover { box-shadow: inset 0 0 0 2px rgba(255,187,68,.65), inset -1px -1px 0 rgba(160,160,140,.4); }
.xp-button.default { box-shadow: inset 0 0 0 1px rgba(0,0,0,.18), 0 0 0 1px rgba(0,60,116,.55); }
.xp-button:active { background: linear-gradient(180deg,#e4e2d4,#efece0); box-shadow: inset 1px 1px 2px rgba(120,110,80,.5); }
.xp-input {
  height: 22px; font: inherit; padding: 0 5px; border: 1px solid #7f9db9; background: #fff;
  user-select: text; -webkit-user-select: text;
}
input[type=range] { accent-color: #2f71cd; }

/* file dialogs */
.fd-root { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.fd-maincol { flex: 1; padding: 8px 10px 6px; gap: 8px; }
.fd-topbar { display: flex; align-items: center; gap: 8px; }
.fd-up { min-width: 0; width: 30px; height: 24px; }
.fd-where { background: #fff; border: 1px solid #7f9db9; padding: 3px 6px; flex: 1; overflow: hidden; white-space: nowrap; }
.fd-list { flex: 1; overflow: auto; background: #fff; border: 1px solid #7f9db9; user-select:none; }
.fd-row { display: flex; gap: 8px; align-items: center; padding: 3px 8px; }
.fd-row img { width: 16px; height: 16px; }
.fd-row.sel { background: #316ac5; color: #fff; }
.fd-places { width: 128px; background: linear-gradient(180deg,#7ba7e0,#5a8bd8); padding: 8px; color: #00157f; }
.common-dialog .fd-root > .fd-maincol { position: relative; }
.fd-places-head { color: #17365f; font-weight: bold; margin-bottom: 6px; }
.fd-place { display: flex; gap: 7px; align-items: center; padding: 3px 4px; border-radius: 2px; cursor: pointer; color: #0c2f66; }
.fd-place:hover { background: rgba(255,255,255,.45); }
.fd-place img { width: 16px; height: 16px; }
.fd-namerow { display: flex; gap: 8px; align-items: center; }
.fd-filename { flex: 1; }
.fd-actions { justify-content: flex-end; padding: 6px 10px 10px; }

/* volume popup */
.xp-volume-popup { position: fixed; z-index: 240; width: 118px; background: var(--luna-face); border: 1px solid #003c74; box-shadow: 2px 2px 8px rgba(0,10,60,.35); padding: 6px; }
.vp-title { text-align: center; font-weight: bold; padding-bottom: 2px; }
.vp-slider-col { writing-mode: vertical-lr; direction: rtl; height: 92px; display: flex; justify-content: center; padding: 4px 0 8px; }
.vp-mute { display: flex; gap: 5px; align-items: center; }

/* balloons */
.xp-balloon {
  position: fixed; width: 264px; background: #ffffe1; border: 1px solid #767676; border-radius: 6px;
  padding: 9px 10px; font-size: 11px; color: #16160e;
  box-shadow: 2px 3px 9px rgba(0,10,40,.3);
}
.xp-balloon::after {
  content: ""; position: absolute; right: 22px; bottom: -13px; border: 7px solid transparent;
  border-top-color: #ffffe1; border-right-color: #ffffe1;
  transform: rotate(-8deg);
  filter: drop-shadow(1px 1px 0 #767676);
}
.balloon-title-row { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; padding-right: 14px; }
.balloon-title-row b { font-size: 11px; }
.balloon-body { color: #33321f; line-height: 1.4; display: flex; flex-direction: column; }
.balloon-close {
  position: absolute; top: 5px; right: 5px; width: 15px; height: 15px; border: 1px solid transparent; background: none;
  font-size: 9px; line-height: 1; cursor: pointer; color: #555; border-radius: 3px; padding:0;
}
.balloon-close:hover { background: #fbce4e; border-color: #c8901e; }

/* ---- generic app styles ---------------------------------------------- */
textarea.plain-edit {
  flex: 1; resize: none; border: 0; outline: none; font-family: "Lucida Console", Consolas, monospace;
  font-size: 12px; padding: 2px 4px; background: #fff; user-select: text; -webkit-user-select: text;
}
textarea.wrap-on { white-space: pre-wrap; overflow-wrap: anywhere; }
.app-crashbox {}

::-webkit-scrollbar { width: 16px; height: 16px; background: #f1efe2; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg,#c7d8f8 0%, #a9c4f2 55%, #8fb2ec 100%);
  border: 1px solid #7195dd; border-radius: 2px; box-shadow: inset 1px 1px 0 rgba(255,255,255,.85);
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg,#d8e5fb,#a2c0f4); }
::-webkit-scrollbar-button {
  background: #ece9d8; border: 1px solid #a8b7d8; height: 16px; width: 16px;
  background-image: linear-gradient(45deg, transparent 49%, #2a57c2 50%), linear-gradient(-135deg, transparent 49%, #2a57c2 50%);
}
::-webkit-scrollbar-corner { background: #ece9d8; }

/* dragging states */
body.is-dragging, body.is-dragging * { cursor: default !important; }
body.is-resizing, body.is-resizing * { cursor: inherit; }

@media (max-width: 700px) {
  body::after {
    content: "Best experienced on a desktop screen — but everything still works.";
    position: fixed; left: 8px; bottom: calc(var(--taskbar-h) + 8px); z-index: 999;
    background: rgba(20,35,90,.82); color: #dff0ff; padding: 7px 11px; border-radius: 8px;
    font-size: 11px; pointer-events: none; backdrop-filter: blur(2px);
    animation: tipfadein .5s ease-out both;
  }
  @keyframes tipfadein { from { opacity: 0; transform: translateY(8px);} }
}

/* ==================== app: explorer ==================== */
.ex-btn { width: 24px; height: 24px; border: 1px solid #003c74; background: linear-gradient(180deg,#fdfdfd,#eceadf); border-radius: 3px; cursor: pointer; }
.ex-btn:disabled { opacity: .45; }
.ex-up img { pointer-events: none; }
.ex-vr { width: 2px; align-self: stretch; margin: 3px 5px; background: #d4d0c0; box-shadow: 1px 0 0 #fff; }
.ex-toolrow { display: flex; align-items: center; gap: 4px; padding: 3px 6px; background: var(--luna-face); border-bottom: 1px solid #d9d5c5; position:relative; z-index:3; }
.ex-folders-toggle { min-width: 54px; }
.xp-button.on, .ex-folders-toggle.on { box-shadow: inset 1px 1px 3px rgba(120,110,80,.5); background:#e8e4d2; }
.ex-folders-toggle,.ex-views{min-width:auto;padding:0 10px;height:24px;}
.views-glyph::before { content:"⿴"; font-size:13px; }
.ex-addrrow { display:flex; gap:5px; align-items:center; padding:2px 6px; background: var(--luna-face); border-bottom:1px solid #d9d5c5; }
.ex-lab,.ie-addrrow>span:first-child { color:#444; }
.ex-address { flex:1; height:20px;}
.ex-go{height:20px;min-width:38px;padding:0 6px;}
.ex-split { flex:1; display:flex; min-height:0; background:#fff; }
.ex-taskpane { width:172px; flex:0 0 auto; overflow-y:auto; padding:7px 7px; background:linear-gradient(180deg,#7ba7e0,#5583cf); color:#0c2f66; }
.ex-taskpane.collapsed { display:none; }
.ex-tblock { background:#eff3fb; border-radius:4px; padding:7px 9px 9px; margin-bottom:9px; font-weight:bold; box-shadow: inset 0 0 0 1px rgba(255,255,255,.65), 0 1px 2px rgba(20,40,90,.25);}
.ex-tblock.tint-blue { background:#cfdff5; }
.ex-tblock.tint-grey { background:#f3ecd8; }
.ex-thead {}
.ex-task { display:block; width:100%; text-align:left; background:none; border:0; color:#215dc6; font:inherit; padding:2px 0; cursor:pointer; text-decoration:none; }
.ex-task:hover { color:#428eff; text-decoration:underline; }
.ex-task.disabled { color:#8a94a5; pointer-events:none; }
.ex-note { font-weight:normal; font-size:11px; color:#33415c; padding-top:2px;}
.ex-main { flex:1; display:flex; flex-direction:column; min-width:0; }
.ex-scroll { flex:1; overflow:auto; padding:6px; outline:none; user-select:none; }
.view-icons .ex-list { display:grid; }
.ex-list.view-icons { grid-template-columns: repeat(auto-fill, 92px); gap:4px; align-content:start; }
.view-list .ex-list, .view-tiles .ex-list { display:flex; flex-direction:column; }
.ex-irow { display:flex; flex-direction:column; align-items:center; text-align:center; padding:5px 3px; border-radius:3px; border:1px solid transparent; }
.ex-irow img { margin-bottom:4px; }
.view-list .ex-irow { flex-direction:row; justify-content:flex-start; gap:7px; padding:2px 6px; }
.i-name { word-break:break-word; max-width:84px; line-height:1.2; }
.ex-irow.sel .i-name, .ex-drow.sel .dc-name span:last-child, .ex-trow.sel .tile-name,
.ex-row-sel-label { background:#316ac5; color:#fff; }
.ex-irow.cut, .ex-drow.cut { opacity:.62; }
.view-tiles .ex-irow { flex-direction:row; gap:9px; border:1px solid transparent; }
.view-tiles .i-name { font-weight:bold; max-width:none;}
.tile-sub { color:#71716b; font-size:10.5px; }
.ex-trow { display:flex; gap:9px; padding:4px 8px; align-items:center; border:1px solid transparent; border-radius:2px;}
.ex-trow .tile-name { font-weight:bold; }
.ex-details-head { display:grid; grid-template-columns: 3fr 1fr 1.4fr 1.4fr; background:var(--luna-face); border-bottom:1px solid #cbc7b7; font-weight:bold; }
.ex-hcell { padding:3px 7px; border-right:1px solid #cbc7b7; cursor:pointer; }
.ex-hcell:hover { background:#f4efdd; }
.sort-arrow {color:#16529e}
.view-details .ex-list { display:block; }
.ex-drow { display:grid; grid-template-columns:3fr 1fr 1.4fr 1.4fr; padding:1px 0; }
.ex-drow > span { padding:2px 7px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ex-drow.sel > * { background:#316ac5; color:#fff !important; }
.dc-name { display:flex; gap:6px; align-items:center; }
.ex-list [data-id]:hover:not(.sel) { background:#f1f4fb; }

/* properties sheet */
.props-sheet { padding: 12px 14px 0; gap: 10px; overflow:auto;}
.props-head { display:flex; gap:12px; align-items:center; border:1px solid #b9bec8; padding:9px; background:linear-gradient(180deg,#fff,#f0eee2);}
.props-name { font-weight:bold; font-size:12px; color:#123264;}
.prop-rows {display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:11.5px;}
.props-sheet .prop-rows + .props-ro {margin-top:12px;}
.props-ro { display:flex; gap:6px; align-items:center; accent-color:#316ac5;}
.props-capacity { padding:2px 2px 6px;}
.cap-bar { height:16px;border:1px solid #686868;background:#fff;margin-top:6px;}
.cap-bar div { height:100%; }

/* ==================== app: notepad ==================== */
.np-root textarea { user-select:text;-webkit-user-select:text; }
.np-status { display:flex; }
.np-status .np-lncol { min-width:130px; }
.find-form { padding: 14px 14px 2px; display:flex; flex-direction:column; gap:10px; min-width:320px;}
.find-row1 { display:flex; gap:8px; align-items:center;}
.find-row1 label {min-width:64px;text-align:right;}
.find-row2 { display:flex; gap:14px; align-items:center; }
.xp-fieldset { border:1px solid #b7b3a2; padding:5px 9px 7px; display:flex; gap:9px; align-items:center;}
.xp-fieldset legend {padding:0 4px;}

/* ==================== app: paint ==================== */
.pt-root { background: var(--luna-face); }
.pt-mainrow { flex:1; display:flex; min-height:0; }
.pt-leftcol { width:58px; flex:0 0 auto; padding:4px; background: var(--luna-face); border-right:1px solid #d5d1bf; display:flex; flex-direction:column; gap:6px;}
.pt-toolbox { display:grid; grid-template-columns: repeat(2, 24px); gap:1px; align-self:center; }
.pt-tool { width:24px; height:24px; border:1px solid transparent; background:transparent; border-radius:2px; padding:0; display:grid; place-items:center; cursor:pointer;}
.pt-tool:hover {border-color:#bcb98f; background:#fbfaf2;}
.pt-tool.on { border-color:#7a96df; background:#dce8fa; box-shadow: inset 1px 1px 2px rgba(60,70,140,.35);}
.pt-options { display:flex; flex-direction:column; align-items:center; gap:5px; padding:6px 2px; background:#dfe8da; border:1px solid #aba  black;border-color:#a9b79d;}
.pt-optnote {font-size:9.5px;color:#333;text-align:center;overflow-wrap:anywhere;}
.pt-optlabel{font-size:9.5px;color:#333;}
.pt-sizerow {display:flex;flex-direction:column;gap:3px;align-items:center;}
.pt-size {width:26px;height:14px;border:1px solid #8ea483;background:#fff;display:grid;place-items:center;padding:0;}
.pt-size::before{content:"";display:block;width:calc(var(--dot) * .55);height:calc(var(--dot) * .22);background:#222;border-radius:40%;}
.pt-size.on{background:#cfe0fa;border-color:#4671c9;}
.pt-canvas-wrap { flex:1; overflow:auto; background:#7f8c85; padding:8px; position:relative; text-align:center;}
.pt-canvas { background:#fff; box-shadow: 2px 2px 0 rgba(30,50,40,.35), 0 0 0 1px #5f6b64; image-rendering: pixelated; touch-action:none; cursor:crosshair;}
.pt-text-input{position:absolute;z-index:5;width:150px;border:1px dashed #36589c;background:rgba(255,255,255,.92);font:inherit;user-select:text;-webkit-user-select:text;}
.pt-crosshair{}
.pt-bottombar{display:flex;gap:10px;align-items:center;padding:5px 8px;border-top:1px solid #d5d1bf;background:var(--luna-face);}
.pt-chipsrow{display:flex;align-items:center;gap:9px;flex:1;}
.pt-fgchip{position:relative;width:34px;height:34px;flex:0 0 auto;border:1px solid #7c8894;background:#fff;}
.chip{position:absolute;width:18px;height:18px;border:1px solid #55606b;}
.chip.front{left:1px;top:1px;z-index:2;box-shadow:1px 1px 0 rgba(255,255,255,.6) inset;}
.chip.back{right:1px;bottom:1px;z-index:1;}
.pt-palette{display:grid;grid-template-columns:repeat(14,14px);grid-auto-rows:14px;gap:1px;}
.pt-sw{width:14px;height:14px;border:1px solid #808078;padding:0;cursor:pointer;}
.pt-sw:hover{outline:1px solid #000;}
.pt-editcolors{min-width:0;height:21px;padding:0 8px;}
.ec-row{display:flex;gap:8px;align-items:center;padding:0 12px 8px;}
.ec-preview{width:52px;height:26px;border:1px solid #777;}

/* ==================== app: minesweeper ==================== */
.ms-root{background:#c0c0c0;border-top:2px outset #fff;}
.ms-outer{margin:8px;background:#c0c0c0;padding:6px;border:3px outset #fff;display:inline-flex;flex-direction:column;gap:6px;align-self:center;}
.ms-panel{display:flex;justify-content:space-between;align-items:center;border:2px inset #fff;padding:4px 6px;background:#c0c0c0;}
.ms-lcd{font-family:"Lucida Console",monospace;background:#000;color:#f00;padding:1px 3px;font-size:19px;letter-spacing:1.5px;border:1px inset #808080;line-height:1.1;}
.ms-face{width:27px;height:27px;font-family:"Lucida Console",monospace;font-size:14px;font-weight:bold;background:#c0c0c0;border:2px outset #fff;cursor:pointer;display:grid;place-items:center;line-height:1;}
.ms-face:active{border-style:inset;}
.ms-field{display:grid;--mscell:17px;border:3px inset #fff;width:max-content;}
.ms-cell{width:var(--mscell);height:var(--mscell);background:#c0c0c0;border:2px outset #f4f4f4;padding:0;font-family:"Lucida Console","Arial Black",monospace;font-size:11px;font-weight:900;color:#111;cursor:pointer;display:grid;place-items:center;user-select:none;}
.ms-cell.revealed{border:1px dotted #9a9a9a;background:#bdbdbd;cursor:default;}
.ms-cell.boom{background:#f33;}
.ms-cell.wrong-flag{background:#cc4444;}
.ms-cell.flagged,.ms-cell.question{color:#d00;font-size:12px;}
.ms-cell.question{color:#111;}
.ms-cell[data-num="1"]{color:#0100fc;} .ms-cell[data-num="2"]{color:#007b00;}
.ms-cell[data-num="3"]{color:#fe0000;} .ms-cell[data-num="4"]{color:#010080;}
.ms-cell[data-num="5"]{color:#800001;} .ms-cell[data-num="6"]{color:#008081;}
.ms-cell[data-num="7"]{color:#000;} .ms-cell[data-num="8"]{color:#7c7c7c;}
.ms-cell.cursor{outline:2px solid #1741e0;outline-offset:-2px;}
.ms-status{padding:2px 10px 6px;font-size:10.5px;color:#333;text-align:center;}

/* ==================== app: internet explorer ==================== */
.ie-toolbar { display:flex;align-items:center;gap:3px;padding:4px 6px;background:linear-gradient(180deg,#fefefe,var(--luna-face));border-bottom:1px solid #d5d1bf;position:relative;z-index:3;}
.ie-btn{width:26px;height:26px;border:1px solid transparent;background:none;border-radius:3px;cursor:pointer;position:relative;}
.ie-btn:hover:not(:disabled){border-color:#b5b18e;background:#fdf9e6;}
.ie-btn:disabled{opacity:.35;}
.tb-back::before{content:"◀";color:#16569e;font-size:13px;}
.tb-fwd::after{content:"▶";color:#16569e;font-size:13px;}
.tb-stop::after{content:"✕";color:#c03a2a;font-weight:bold;}
.tb-refresh::after{content:"⟳";color:#0a7a32;font-size:15px;}
.tb-home::after{content:"⌂";color:#9b6508;font-size:15px;}
.ie-vr{width:2px;align-self:stretch;margin:2px 5px;background:#d5d1bf;box-shadow:1px 0 0 #fff;}
.ie-throbber{margin-left:auto;width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ffe9a4,#e0a028 65%,#8a6414);opacity:.75;box-shadow:inset 0 0 0 2px rgba(255,255,255,.7);}
.ie-throbber.spinning{animation:spin9 1s linear infinite;opacity:1;}
@keyframes spin9{to{transform:rotate(360deg)}}
.ie-addrrow{display:flex;gap:6px;align-items:center;padding:3px 6px;background:var(--luna-face);border-bottom:1px solid #d5d1bf;}
.ie-address{flex:1;height:20px;}
.ie-go{height:20px;min-width:36px;padding:0 6px;}
.ie-viewport{flex:1;overflow:auto;background:#fff;user-select:text;-webkit-user-select:text;}
.ie-page-host{min-height:100%;}
.statusbar .status-zone{min-width:0;}
.ie-root .xp-statusbar > :last-child{min-width:110px;display:flex;gap:5px;justify-content:center;align-items:center;}
.ie-page-host a {color:#0645ad;text-decoration:underline;}
/* period page styles */
.page.msn{font-family:Verdana,Arial,sans-serif;font-size:12.5px;}
.msn-banner{background:linear-gradient(90deg,#048,#39c);color:#fff;padding:14px 18px;font-size:23px;font-weight:bold;}
.msn-banner span{font-size:11px;font-weight:normal;display:block;opacity:.85;}
.msn-grid{width:100%;border-spacing:10px;}
.msn-side{width:210px;vertical-align:top;}
.panel{background:#eef3fb;border:1px solid #aac;padding:10px;margin-bottom:10px;}
.panel h3{margin:0 0 6px;color:#036;font-size:12.5px;}
.panel ul{margin:0;padding-left:17px;line-height:1.7;}
.ticker{display:block;border-top:1px dashed #99b;background:#ffffe1;padding:6px 10px;font-style:italic;}
.page.geo{font-family:"Times New Roman",Times,serif;padding:24px 30px;background:#000040 url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='42'%3E%3Ccircle cx='4' cy='4' r='1.6' fill='%23596'/%3E%3C/svg%3E") repeat;color:#dfd;}
.rainbow{background:linear-gradient(90deg,#f0f,#0cf,#ff0,#0f6);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:26px;}
.counter,.blinkbox{display:inline-block;background:#300;border:2px ridge #800;padding:7px 13px;color:#fca;margin:8px;font-family:"Comic Sans MS",cursive;}
.blinkbox{animation:geoblink 1s steps(2) infinite;}
@keyframes geoblink{to{opacity:.25}}
.gallery2 .cards{display:grid;grid-template-columns:repeat(3,minmax(140px,1fr));gap:14px;margin:18px 0;}
.bento{aspect-ratio:4/3;border-radius:10px;padding:10px;display:flex;align-items:flex-end;color:#fff;font-family:Futura,"Century Gothic",Verdana,sans-serif;font-size:12px;text-align:left;box-shadow:0 4px 14px rgba(10,10,40,.5);}
.bento.neon{background:radial-gradient(circle at 70% 20%,#7a1fd0,#190733 70%),repeating-linear-gradient(115deg,transparent 0 12px,rgba(0,255,225,.14) 12px 13px);}
.bento.duo{background:linear-gradient(135deg,#20265c 45%,#ff5d73 100%);}
.bento.blissy{background:linear-gradient(180deg,#59a8ea 45%,#4d9e2f 46%,#2e6f1d);}
.bento figcaption{background:rgba(8,12,40,.55);padding:6px 8px;border-radius:6px;}
.tagline{color:#bcd;}
.page.helpctr{font-family:Tahoma,sans-serif;padding:22px 26px;background:#fff;}
.helpctr h1{color:#1041a3;}
.hc-cols{display:flex;gap:22px;}
.hc-block{flex:1;background:#eef3fb;border:1px solid #bbcfe8;padding:12px 16px;}
.hc-block h3{margin:0 0 8px;color:#036;}
.page.sysinfo{font-family:Tahoma;padding:22px 28px;}
.kvs{border-collapse:collapse;}
.kvs th{text-align:left;padding:5px 16px 5px 0;color:#4068a0;vertical-align:top;}
.kvs td{padding:5px 0;border-bottom:1px dotted #ccd;}

/* ==================== app: media player ==================== */
.wmp-root{background:#14163a;}
.wmp-skin{flex:1;display:flex;gap:10px;padding:10px;min-height:0;background:
 linear-gradient(160deg,#262b66 0%,#171a40 48%,#0d1030 100%);}
.wmp-screen-col{flex:1.4;min-width:0;position:relative;display:grid;place-items:center;
 background:radial-gradient(circle at 30% 22%,#2c3a78,#0d1030 74%);border:1px solid #38437c;border-radius:4px;padding:8px;}
.wmp-viz{max-width:100%;max-height:100%;border:1px solid #000;box-shadow:0 0 0 1px #3d4c94,0 2px 12px rgba(0,0,10,.5);}
.wmp-rightcol{flex:1;min-width:150px;display:flex;flex-direction:column;color:#cdd9ff;}
.wmp-now-title{font-size:13px;font-weight:bold;padding:2px 4px 10px;color:#fff;}
.wmp-now-title span{font-weight:normal;color:#9fb0ee;font-size:11px;}
.wmp-plhead{font-size:10px;text-transform:uppercase;letter-spacing:1.4px;color:#8fa2e6;border-bottom:1px solid #303a72;padding:0 2px 3px;}
.wmp-playlist{flex:1;overflow-y:auto;display:flex;flex-direction:column;}
.wmp-track{display:flex;gap:7px;align-items:baseline;background:none;border:0;color:#bcc9f8;font:inherit;font-size:11px;text-align:left;padding:5px 4px;border-bottom:1px dotted #2b3568;cursor:pointer;}
.wmp-track:hover{background:#232a56;color:#fff;}
.wmp-track.sel{background:linear-gradient(90deg,#3057c2,#1d3a91);color:#fff;}
.wmp-track .n{color:#7683bd;}
.wmp-track .a{margin-left:auto;color:#8895cd;font-style:italic;}
.wmp-transport{display:flex;align-items:center;gap:7px;padding:9px 12px;background:linear-gradient(180deg,#33386b,#1d2148);border-top:1px solid #4a559d;}
.wmp-ctl{width:30px;height:30px;border-radius:50%;border:1px solid #5865b2;background:radial-gradient(circle at 34% 30%,#8ea3f4,#33418f 70%);color:#fff;font-size:12px;cursor:pointer;display:grid;place-items:center;}
.wmp-ctl.play{width:38px;height:38px;font-size:15px;background:radial-gradient(circle at 34% 30%,#a4bbff,#29379c 74%);}
.wmp-ctl:hover{filter:brightness(1.2);}
.wmp-ctl.stop{background:radial-gradient(circle at 34% 30%,#e79f8d,#8e3a30 74%);}
.wmp-seekwrap{flex:1;display:flex;align-items:center;gap:9px;color:#aab7f2;}
.wmp-seek{flex:1;accent-color:#7fa4ff;}
.wmp-time{font-variant-numeric:tabular-nums;font-size:11px;min-width:40px;text-align:right;}
.wmp-vol{width:76px;accent-color:#7fa4ff;}
.wmp-modesel select{background:#1d2148;color:#cdd9ff;border:1px solid #5865b2;font:inherit;font-size:10.5px;border-radius:3px;}
.xp-client.silver-skin { --frame-color:#8a93a2; }
.silver-skin .wmp-skin{background:linear-gradient(160deg,#c9ced6 0%,#a9aeb8 48%,#8f95a0 100%);}
.silver-skin .wmp-rightcol{color:#3a4150;}
.silver-skin .wmp-track{color:#414859;border-bottom-color:#9aa0ab;}
.silver-skin .wmp-transport{background:linear-gradient(180deg,#d6dae1,#b3b8c1);border-top-color:#e7eaf0;}
.silver-skin .wmp-plhead,.silver-skin .wmp-track .a{color:#6b7280;}
.silver-skin .wmp-screen-col{background:radial-gradient(circle at 30% 22%,#ffffff,#aab0bc 74%);border-color:#7e8592;}
.hd-progress{height:15px;margin:4px 18px 16px;border:1px solid #7f9db9;background:#fff;}
.hd-fill{height:100%;width:8%;background:repeating-linear-gradient(90deg,#245edb 0 7px,#69a1f5 7px 10px);transition:width .25s;}

/* ==================== app: display props / datetime / sounds ==================== */
.dp-tabs{display:flex;gap:2px;padding:10px 12px 0;background:var(--luna-face);border-bottom:1px solid #919b9c;}
.dp-tab{padding:4px 12px;border:1px solid #919b9c;border-bottom:0;background:linear-gradient(180deg,#fdfdfd,#eceadb);border-radius:4px 4px 0 0;cursor:pointer;font:inherit;}
.dp-tab.on{background:#fff;padding-bottom:6px;margin-bottom:-1px;font-weight:bold;position:relative;}
.dp-body{flex:1;background:#fff;border-left:1px solid #919b9c;border-right:1px solid #919b9c;padding:14px 16px;display:flex;flex-direction:column;gap:11px;overflow:auto;}
.dp-monitor-wrap{display:grid;place-items:center;padding:4px 0 2px;}
.dp-monitor{width:200px;padding:10px 10px 24px;background:linear-gradient(180deg,#e7ebe4,#b9c0b2);border-radius:10px;box-shadow:inset 0 0 0 1px rgba(120,130,115,.7),0 2px 4px rgba(90,95,80,.35);}
.dp-screen{border:2px solid #3c4741;background:#77b0e5;height:128px;overflow:hidden;display:grid;place-items:stretch;}
.dp-screen img{width:100%;height:100%;object-fit:cover;}
.dp-wall-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:6px;max-height:150px;overflow:auto;border:1px solid #7f9db9;padding:6px;}
.dp-wall{display:flex;flex-direction:column;align-items:center;gap:4px;background:#fff;border:1px solid transparent;font:inherit;padding:5px;cursor:pointer;text-align:center;}
.dp-wall img{width:64px;height:46px;object-fit:cover;border:1px solid #c9cdc4;}
.dp-wall:hover{background:#f0f4fb;}
.dp-wall.sel{background:#cfdff5;border-color:#6a92c9;}
.dp-row{display:flex;align-items:center;gap:9px;}
.dp-rowlab{min-width:132px;text-align:right;color:#222;}
.dp-wr{display:flex;gap:8px;align-items:center;flex:1;}
.dp-select{font:inherit;height:22px;border:1px solid #7f9db9;background:#fff;min-width:170px;}
.dp-hint{color:#666;font-size:10.5px;border-top:1px dotted #ccc;padding-top:7px;}
.dp-footer{display:flex;gap:7px;justify-content:flex-end;padding:9px 12px;background:var(--luna-face);border:1px solid #919b9c;border-top:0;}
.dp-wait{width:46px;}
.dp-resslider{flex:1;accent-color:#2f71cd;}
.dt-row{display:flex;gap:18px;align-items:center;}
.dt-face{border:1px solid #b9b5a4;border-radius:50%;background:#fff;}
.dt-digital{font-size:19px;font-variant-numeric:tabular-nums;color:#12409c;}
.sc-vol{width:220px;}
.sc-root .dp-body{border-bottom:1px solid #919b9c;}

/* ==================== app: search companion ==================== */
.se-root{gap:0;}
.se-assistant{display:flex;gap:14px;align-items:center;padding:13px 16px;background:linear-gradient(180deg,#d2e3f8,#bdd5f2);border-bottom:1px solid #9dbde4;}
.se-assistant img{width:42px;height:42px;flex:0 0 auto;}
.se-assistant b{color:#1438a8;}
.dim{color:#5a6b85;}
.pad8{padding:8px;}
.se-form{display:flex;gap:7px;padding:10px 14px;border-bottom:1px solid #d5d1bf;background:var(--luna-face);}
.se-input{flex:1;}
.se-results{flex:1;overflow:auto;background:#fff;display:flex;flex-direction:column;}
.se-row{display:flex;gap:9px;align-items:center;background:none;border:0;font:inherit;text-align:left;padding:5px 12px;cursor:pointer;border-bottom:1px solid #eef0f6;}
.se-row:hover{background:#e8f1fd;}
.se-row img{flex:0 0 auto;}
.se-lab{color:#1257c2;}
.se-row:hover .se-lab{text-decoration:underline;}
.se-sub{margin-left:auto;color:#7c8894;font-size:10.5px;white-space:nowrap;overflow:hidden;max-width:46%;text-overflow:ellipsis;}

/* ==================== run / turnoff overlays ==================== */
.run-form .msgbox-buttons{padding-bottom:4px;}
.turnoff-overlay{position:absolute;inset:0;background:rgba(12,32,110,.55);backdrop-filter:saturate(.6) blur(1px);z-index:400;display:grid;place-items:center;pointer-events:auto;transition:opacity .24s;}
.turnoff-overlay.fade{opacity:0;pointer-events:none;}
.turnoff-sheet{width:min(430px,92vw);border-radius:8px;overflow:hidden;box-shadow:0 14px 44px rgba(0,8,40,.5);border:1px solid #16409f;}
.to-banner{display:flex;align-items:center;gap:10px;padding:12px 16px;background:linear-gradient(180deg,#1861ce,#2057be);color:#fff;font-size:16px;font-weight:bold;}
.to-body{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:18px 12px 16px;background:linear-gradient(180deg,#5a83dd,#3f68cf);}
.to-orb-btn{display:flex;flex-direction:column;align-items:center;gap:9px;background:none;border:1px solid transparent;border-radius:6px;color:#fff;font:inherit;cursor:pointer;padding:11px 4px;}
.to-orb-btn:hover{background:rgba(255,255,255,.16);}
.wt-orb-big{width:44px;height:44px;border-radius:50%;display:block;box-shadow:inset 0 -8px 12px rgba(0,0,0,.4),0 0 0 2px rgba(255,255,255,.75);}
.orb-amber{background:radial-gradient(circle at 35% 30%,#ffe6a0,#f0b400 60%,#b38200);}
.orb-red{background:radial-gradient(circle at 35% 30%,#ffb09c,#e2372b 60%,#a81f12);}
.orb-green{background:radial-gradient(circle at 35% 30%,#c6f2ae,#57a83c 60%,#2f6b1c);}
.to-footer{display:flex;justify-content:center;padding:11px;background:linear-gradient(180deg,#5a83dd,#4972cf);border-top:1px solid rgba(255,255,255,.35);}

.hourglass-pending, .xp-window.hung-window .xp-titlebar { cursor:progress; }

/* small screens: taskbar wraps icons reasonably */
@media (max-height:520px){
  .sm-columns{min-height:280px;}
}