/* ============================================================
   Windows 98 — authentic chrome
   Palette + bevel geometry follow the original USER/GDI metrics.
   ============================================================ */
:root{
  --face:#c0c0c0;
  --highlight:#ffffff;
  --light:#dfdfdf;
  --shadow:#808080;
  --dshadow:#000000;
  --desktop:#008080;
  --active1:#000080;
  --active2:#1084d0;
  --inactive1:#808080;
  --inactive2:#b5b5b5;
  --titletext:#ffffff;
  --inactivetitletext:#c0c0c0;
  --winbg:#ffffff;
  --wintext:#000000;
  --sel:#000080;
  --seltext:#ffffff;
  --tooltip:#ffffe1;
  --font: "MS Sans Serif","Microsoft Sans Serif",Tahoma,Geneva,Verdana,sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ width:100%; height:100%; overflow:hidden; background:#000; }
body{
  font-family:var(--font);
  font-size:11px;
  color:var(--wintext);
  -webkit-font-smoothing:none;
  font-smooth:never;
  cursor:default;
  user-select:none;
  -webkit-user-select:none;
}
button,input,textarea,select{ font-family:var(--font); font-size:11px; color:var(--wintext); }
img{ -webkit-user-drag:none; }

/* ---------- bevel primitives ---------- */
.bevel-out{        /* raised button/window edge */
  box-shadow: inset -1px -1px var(--dshadow), inset 1px 1px var(--light),
              inset -2px -2px var(--shadow),  inset 2px 2px var(--highlight);
}
.bevel-out-thin{   /* raised single edge (toolbars, statusbar grip) */
  box-shadow: inset -1px -1px var(--shadow), inset 1px 1px var(--highlight);
}
.bevel-in{         /* sunken input fields */
  box-shadow: inset -1px -1px var(--highlight), inset 1px 1px var(--shadow),
              inset -2px -2px var(--light),   inset 2px 2px var(--dshadow);
}
.bevel-in-thin{    /* sunken single edge (status bar fields, tray) */
  box-shadow: inset -1px -1px var(--shadow), inset 1px 1px var(--highlight);
}
.bevel-well{       /* deep well (MS paint canvas frame) */
  box-shadow: inset -1px -1px var(--light), inset 1px 1px var(--shadow),
              inset -2px -2px var(--highlight), inset 2px 2px var(--dshadow);
}
.groove{           /* etched groove line */
  border-top:1px solid var(--shadow);
  border-bottom:1px solid var(--highlight);
}

/* ---------- screen layers ---------- */
#screen{ position:fixed; inset:0; overflow:hidden; background:var(--desktop); }
#screen.wait, #screen.wait *{ cursor:wait !important; }

/* ---------- boot / shutdown ---------- */
#boot-layer{ position:absolute; inset:0; z-index:9000; background:#000; color:#c0c0c0;
  font-family:"Lucida Console","Courier New",monospace; font-size:14px; display:none; }
#boot-layer.bios{ display:block; padding:24px 32px; white-space:pre; line-height:1.5; }
#boot-layer .bios-cursor{ display:inline-block; width:9px; height:15px; background:#c0c0c0;
  vertical-align:-2px; animation:blink 0.9s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0; } }

#splash{ position:absolute; inset:0; z-index:9001; display:none; background:#000; }
#splash canvas{ width:100%; height:100%; display:block; }
#splash .splash-bar{ position:absolute; left:0; right:0; bottom:0; height:22px;
  background:
    linear-gradient(90deg, transparent 0%, transparent 10%, rgba(240,160,60,.9) 18%, rgba(90,140,220,.9) 30%, transparent 42%, transparent 100%),
    linear-gradient(180deg,#0a0a2e 0%, #12225a 55%, #0a0a2e 100%);
  background-size:280px 100%, 100% 100%;
  background-repeat:repeat-x;
  animation:splashscroll 1.1s linear infinite;
  border-top:1px solid #000;
}
@keyframes splashscroll{ from{ background-position:0 0,0 0; } to{ background-position:280px 0,0 0; } }

#shutdown-screen{ position:absolute; inset:0; z-index:9002; background:#000; display:none;
  align-items:center; justify-content:center; }
#shutdown-screen .safe{ color:#ff8030; font-family:"Courier New",monospace; font-weight:bold;
  font-size:32px; text-align:center; line-height:1.9; white-space:pre;
  text-shadow:0 0 6px rgba(255,128,48,.55); }

/* ---------- desktop ---------- */
#desktop{ position:absolute; left:0; top:0; right:0; bottom:28px; overflow:hidden;
  background:var(--desktop); background-image:var(--wallpaper,none);
  background-size:var(--wallpaper-size,auto); background-position:center;
  background-repeat:var(--wallpaper-repeat,no-repeat); }
#desktop.hidden{ display:none; }

.desk-icon{ position:absolute; width:76px; padding:4px 2px 2px; text-align:center; }
.desk-icon .icon-img{ width:32px; height:32px; margin:0 auto; display:block; pointer-events:none; }
.desk-icon .icon-label{ display:inline-block; margin-top:4px; padding:1px 2px; color:#fff;
  font-size:11px; line-height:1.15; max-width:74px; word-wrap:break-word; pointer-events:none; }
.desk-icon.selected .icon-label{ background:var(--sel); outline:1px dotted #ffff80; outline-offset:0; }
.desk-icon.selected .icon-img{ filter:sepia(1) hue-rotate(190deg) saturate(3) brightness(.75); }
.desk-icon.focused .icon-label{ outline:1px dotted #fff; }

#marquee{ position:absolute; display:none; border:1px dotted #fff; mix-blend-mode:difference;
  background:rgba(255,255,255,.06); z-index:5; pointer-events:none; }

/* ---------- taskbar ---------- */
#taskbar{ position:absolute; left:0; right:0; bottom:0; height:28px; background:var(--face);
  box-shadow: inset 0 1px var(--light), inset 0 2px var(--highlight);
  display:flex; align-items:center; padding:2px 3px; z-index:8000; gap:2px; }
#start-button{ display:flex; align-items:center; gap:4px; height:22px; padding:0 6px 0 3px;
  background:var(--face); border:none; font-weight:bold; font-size:11px; flex:none; }
#start-button .flag{ width:19px; height:15px; flex:none; }
#start-button:active, #start-button.open{ box-shadow: inset -1px -1px var(--highlight), inset 1px 1px var(--shadow),
    inset -2px -2px var(--light), inset 2px 2px var(--dshadow); }
#start-button.open > *, #start-button:active > *{ transform:translate(1px,1px); }
#taskbar-divider{ width:1px; align-self:stretch; margin:1px 3px; flex:none;
  border-left:1px solid var(--shadow); border-right:1px solid var(--highlight); }
#task-buttons{ display:flex; align-items:center; gap:3px; flex:1; min-width:0; overflow:hidden; height:22px; }
.task-button{ display:flex; align-items:center; gap:4px; height:22px; min-width:34px; width:160px; max-width:160px;
  padding:0 6px 0 4px; background:var(--face); border:none; text-align:left; overflow:hidden; flex:none; }
.task-button .tb-icon{ width:16px; height:16px; flex:none; }
.task-button .tb-label{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.task-button:not(.active){ box-shadow: inset -1px -1px var(--dshadow), inset 1px 1px var(--light),
    inset -2px -2px var(--shadow), inset 2px 2px var(--highlight); }
.task-button.active{ box-shadow: inset -1px -1px var(--highlight), inset 1px 1px var(--shadow),
    inset -2px -2px var(--light), inset 2px 2px var(--dshadow);
  background-image:
    linear-gradient(45deg, rgba(255,255,255,.5) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.5) 75%),
    linear-gradient(45deg, rgba(255,255,255,.5) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.5) 75%);
  background-size:2px 2px; background-position:0 0, 1px 1px; }
.task-button.active .tb-label{ transform:translate(1px,1px); }
.task-button.active .tb-icon{ transform:translate(1px,1px); }
.task-button.flash .tb-label{ font-weight:bold; }

#tray{ flex:none; display:flex; align-items:center; gap:5px; height:22px; padding:0 8px 0 6px;
  box-shadow: inset -1px -1px var(--highlight), inset 1px 1px var(--shadow); }
#tray .tray-icons{ display:flex; gap:4px; align-items:center; }
#tray .tray-icons img{ width:16px; height:16px; display:block; }
#tray-clock{ min-width:52px; text-align:center; }

/* ---------- windows ---------- */
.window{ position:absolute; background:var(--face); padding:3px;
  box-shadow: inset -1px -1px var(--dshadow), inset 1px 1px var(--light),
              inset -2px -2px var(--shadow),  inset 2px 2px var(--highlight);
  display:flex; flex-direction:column; min-width:120px; min-height:40px; }
.window.minimized{ display:none; }
.window.dragging{ opacity:1; }
.window.focused{ z-index:auto; }
.title-bar{ height:18px; flex:none; display:flex; align-items:center; gap:2px;
  padding:2px 2px 2px 3px; font-weight:bold; font-size:11px;
  background:linear-gradient(90deg, var(--inactive1), var(--inactive2));
  color:var(--inactivetitletext); }
.window.active > .title-bar{ background:linear-gradient(90deg, var(--active1), var(--active2));
  color:var(--titletext); }
.title-bar .title-icon{ width:16px; height:16px; flex:none; display:flex; align-items:center; }
.title-bar .title-icon img, .title-bar .title-icon svg{ width:16px; height:16px; }
.title-bar .title-text{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  padding-right:2px; }
.title-bar-buttons{ display:flex; gap:2px; flex:none; }
.title-button{ width:16px; height:14px; padding:0; border:none; background:var(--face);
  display:flex; align-items:center; justify-content:center;
  box-shadow: inset -1px -1px var(--dshadow), inset 1px 1px var(--light),
              inset -2px -2px var(--shadow), inset 2px 2px var(--highlight); }
.title-button:active{ box-shadow: inset -1px -1px var(--highlight), inset 1px 1px var(--shadow),
    inset -2px -2px var(--light), inset 2px 2px var(--dshadow); }
.title-button svg{ width:10px; height:10px; }
.title-button:active svg{ transform:translate(1px,1px); }
.window:not(.active) .title-button svg{ opacity:.85; }
.window-body{ flex:1; min-height:0; display:flex; flex-direction:column; position:relative; }

/* resize handles */
.rs{ position:absolute; z-index:40; }
.rs.n{ top:-4px; left:8px; right:8px; height:7px; cursor:n-resize; }
.rs.s{ bottom:-4px; left:8px; right:8px; height:7px; cursor:s-resize; }
.rs.e{ right:-4px; top:8px; bottom:8px; width:7px; cursor:e-resize; }
.rs.w{ left:-4px; top:8px; bottom:8px; width:7px; cursor:w-resize; }
.rs.ne{ top:-4px; right:-4px; width:10px; height:10px; cursor:ne-resize; }
.rs.nw{ top:-4px; left:-4px; width:10px; height:10px; cursor:nw-resize; }
.rs.se{ bottom:-4px; right:-4px; width:10px; height:10px; cursor:se-resize; }
.rs.sw{ bottom:-4px; left:-4px; width:10px; height:10px; cursor:sw-resize; }
#resize-outline{ position:absolute; display:none; z-index:8500; pointer-events:none;
  border:2px dotted #fff; mix-blend-mode:difference; }

/* ---------- menu bar ---------- */
.menu-bar{ display:flex; align-items:center; height:20px; flex:none; padding:1px 0; background:var(--face); }
.menu-bar-item{ padding:3px 7px 4px; border:1px solid transparent; }
.menu-bar-item.open{ box-shadow: inset -1px -1px var(--highlight), inset 1px 1px var(--shadow); }
.menu-bar-item.hot{ box-shadow: inset -1px -1px var(--shadow), inset 1px 1px var(--highlight); }

/* ---------- popup menus ---------- */
.menu-popup{ position:fixed; z-index:9500; background:var(--face); padding:2px; min-width:40px;
  box-shadow: inset -1px -1px var(--dshadow), inset 1px 1px var(--light),
              inset -2px -2px var(--shadow), inset 2px 2px var(--highlight); }
.menu-popup .mi{ position:relative; display:flex; align-items:center; padding:4px 18px 4px 6px;
  white-space:nowrap; min-height:20px; }
.menu-popup .mi .mi-check{ width:18px; flex:none; display:flex; align-items:center; justify-content:center; }
.menu-popup .mi .mi-check img{ width:16px; height:16px; }
.menu-popup .mi .mi-label{ flex:1; padding-right:14px; }
.menu-popup .mi .mi-accel{ color:inherit; margin-left:18px; }
.menu-popup .mi .mi-sub{ width:10px; text-align:right; font-size:9px; }
.menu-popup .mi.hot{ background:var(--sel); color:var(--seltext); }
.menu-popup .mi.disabled{ color:var(--shadow); text-shadow:1px 1px 0 var(--highlight); }
.menu-popup .mi.disabled.hot{ background:none; color:var(--shadow); }
.menu-popup .sep{ height:0; margin:3px 2px; border-top:1px solid var(--shadow);
  border-bottom:1px solid var(--highlight); }

/* ---------- start menu ---------- */
#start-menu{ display:flex; padding:3px; min-width:0; }
#start-menu .sm-banner{ width:24px; flex:none; margin-right:3px; position:relative;
  background:linear-gradient(0deg, var(--active1) 0%, #1084d0 60%, #7bb8e8 100%); }
#start-menu .sm-banner span{ position:absolute; bottom:6px; left:50%; transform-origin:0 50%;
  transform:rotate(-90deg) translateY(-50%); white-space:nowrap; color:#d4d0c8; font-size:15px;
  font-weight:bold; letter-spacing:.5px; }
#start-menu .sm-banner span b{ color:#fff; font-weight:bold; }
#start-menu .sm-items{ flex:1; min-width:170px; }
#start-menu .mi{ padding-left:6px; min-height:30px; }
#start-menu .mi .mi-check{ width:28px; }
#start-menu .mi .mi-check img{ width:24px; height:24px; }
#start-menu .mi.sm-small{ min-height:20px; }
#start-menu .mi.sm-small .mi-check{ width:20px; }
#start-menu .mi.sm-small .mi-check img{ width:16px; height:16px; }

/* ---------- buttons / inputs ---------- */
.btn{ position:relative; min-width:74px; height:23px; padding:0 12px; border:none; background:var(--face);
  box-shadow: inset -1px -1px var(--dshadow), inset 1px 1px var(--light),
              inset -2px -2px var(--shadow), inset 2px 2px var(--highlight); }
.btn:active:not(:disabled), .btn.pressed{ box-shadow: inset -1px -1px var(--highlight), inset 1px 1px var(--shadow),
    inset -2px -2px var(--light), inset 2px 2px var(--dshadow); }
.btn:active:not(:disabled) > *, .btn.pressed > *{ transform:translate(1px,1px); }
.btn:focus-visible{ outline:none; }
.btn:focus{ outline:1px dotted #000; outline-offset:-4px; }
.btn.default{ border:1px solid #000; height:23px; }
.btn:disabled{ color:var(--shadow); text-shadow:1px 1px 0 var(--highlight); }

input[type=text], textarea, select, .sunken{ background:var(--winbg); color:var(--wintext); border:none;
  box-shadow: inset -1px -1px var(--highlight), inset 1px 1px var(--shadow),
              inset -2px -2px var(--light), inset 2px 2px var(--dshadow);
  padding:3px 4px; user-select:text; -webkit-user-select:text; }
input[type=text]:focus, textarea:focus{ outline:none; }
textarea{ resize:none; }

/* checkboxes & radios */
.chk, .rdo{ display:inline-flex; align-items:center; gap:5px; padding:2px; }
.chk .box, .rdo .box{ width:13px; height:13px; flex:none; background:var(--winbg);
  box-shadow: inset -1px -1px var(--highlight), inset 1px 1px var(--shadow),
              inset -2px -2px var(--light), inset 2px 2px var(--dshadow);
  display:flex; align-items:center; justify-content:center; }
.rdo .box{ border-radius:50%; box-shadow:none; border:1px solid var(--shadow);
  outline:1px solid var(--dshadow); outline-offset:-2px; background:radial-gradient(circle at 50% 50%, var(--winbg) 55%, var(--winbg)); }
.chk.checked .box::after{ content:""; width:9px; height:9px;
  background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="9" height="9"><path d="M1 4l2 3 5-6" stroke="black" stroke-width="2" fill="none"/></svg>') no-repeat center; }
.rdo.checked .box::after{ content:""; width:5px; height:5px; border-radius:50%; background:#000; }
.chk.disabled, .rdo.disabled{ color:var(--shadow); text-shadow:1px 1px 0 var(--highlight); }

/* ---------- status bar ---------- */
.status-bar{ display:flex; gap:2px; padding:2px 1px 0; flex:none; }
.status-field{ box-shadow: inset -1px -1px var(--highlight), inset 1px 1px var(--shadow);
  padding:2px 5px 3px; min-height:18px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }

/* ---------- scrollbars (webkit) ---------- */
.scroll{ overflow:auto; scrollbar-width:auto; }
.scroll::-webkit-scrollbar{ width:16px; height:16px; }
.scroll::-webkit-scrollbar-track{
  background-image:linear-gradient(45deg,#fff 25%,transparent 25%,transparent 75%,#fff 75%),
                   linear-gradient(45deg,#fff 25%,var(--face) 25%,var(--face) 75%,#fff 75%);
  background-size:2px 2px; background-position:0 0,1px 1px; }
.scroll::-webkit-scrollbar-thumb{ background:var(--face);
  box-shadow: inset -1px -1px var(--dshadow), inset 1px 1px var(--light),
              inset -2px -2px var(--shadow), inset 2px 2px var(--highlight); }
.scroll::-webkit-scrollbar-button{ width:16px; height:16px; background:var(--face);
  box-shadow: inset -1px -1px var(--dshadow), inset 1px 1px var(--light),
              inset -2px -2px var(--shadow), inset 2px 2px var(--highlight);
  background-repeat:no-repeat; background-position:center; }
.scroll::-webkit-scrollbar-button:active{ box-shadow: inset -1px -1px var(--highlight), inset 1px 1px var(--shadow),
    inset -2px -2px var(--light), inset 2px 2px var(--dshadow); }
.scroll::-webkit-scrollbar-button:vertical:decrement{
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8"><path d="M1 5l3-3 3 3z" fill="black"/></svg>'); }
.scroll::-webkit-scrollbar-button:vertical:increment{
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8"><path d="M1 3l3 3 3-3z" fill="black"/></svg>'); }
.scroll::-webkit-scrollbar-button:horizontal:decrement{
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8"><path d="M5 1L2 4l3 3z" fill="black"/></svg>'); }
.scroll::-webkit-scrollbar-button:horizontal:increment{
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8"><path d="M3 1l3 3-3 3z" fill="black"/></svg>'); }
.scroll::-webkit-scrollbar-corner{ background:var(--face); }

/* ---------- tooltips ---------- */
.tooltip{ position:fixed; z-index:9800; background:var(--tooltip); border:1px solid #000;
  padding:2px 5px 3px; font-size:11px; pointer-events:none; box-shadow:2px 2px 3px rgba(0,0,0,.25); }

/* ---------- dialogs ---------- */
.dialog-content{ display:flex; gap:14px; padding:14px 12px; align-items:flex-start; }
.dialog-content .dlg-icon{ width:32px; height:32px; flex:none; }
.dialog-content .dlg-text{ padding-top:3px; line-height:1.45; max-width:320px; white-space:pre-wrap; }
.dialog-buttons{ display:flex; justify-content:center; gap:8px; padding:6px 0 12px; }

/* group box / fieldset */
fieldset.gbox{ border:none; box-shadow: inset 1px 1px var(--shadow), inset -1px -1px var(--highlight); padding:12px 10px 10px; position:relative; }
fieldset.gbox legend{ position:absolute; top:-7px; left:8px; background:var(--face); padding:0 4px; }
.gbox-wrap{ position:relative; padding-top:7px; }

/* tabs */
.tab-row{ display:flex; padding:3px 3px 0; position:relative; z-index:2; }
.tab{ padding:4px 12px 5px; background:var(--face); margin-right:-1px; border:none; position:relative;
  box-shadow: inset 1px 1px var(--highlight), inset -1px 0 var(--shadow), inset 2px 2px var(--light), inset -2px 0 var(--dshadow); }
.tab.active{ padding:5px 14px 7px; margin:-3px -1px 0; z-index:3;
  box-shadow: inset 1px 1px var(--highlight), inset -1px 0 var(--shadow), inset 2px 2px var(--light), inset -2px 0 var(--dshadow); }
.tab-body{ background:var(--face); position:relative; z-index:1;
  box-shadow: inset -1px -1px var(--dshadow), inset 1px 1px var(--light),
              inset -2px -2px var(--shadow), inset 2px 2px var(--highlight);
  padding:14px 12px; }

/* list / tree */
.listbox{ background:var(--winbg); overflow:auto; user-select:none; }
.listbox .li{ display:flex; align-items:center; gap:5px; padding:2px 4px; white-space:nowrap; }
.listbox .li img{ width:16px; height:16px; flex:none; }
.listbox .li.sel{ background:var(--sel); color:var(--seltext); }
.tree .tnode{ white-space:nowrap; }
.tree .trow{ display:flex; align-items:center; gap:4px; padding:1px 2px; }
.tree .trow.sel{ background:var(--sel); color:var(--seltext); }
.tree .trow .twisty{ width:12px; height:12px; flex:none; border:1px solid #000; background:var(--face);
  color:#000; font-size:9px; line-height:10px; text-align:center; }
.tree .trow .twisty.leaf{ visibility:hidden; }
.tree .trow img{ width:16px; height:16px; }

/* hourglass overlay cursor */
.hourglass-host, .hourglass-host *{ cursor:wait !important; }

/* hidden */
.hidden{ display:none !important; }

/* selection inside text areas */
::selection{ background:var(--sel); color:var(--seltext); }