/* ============================================================
   Windows 98 system chrome
   ============================================================ */

:root {
  --silver: #c0c0c0;
  --silver-lt: #dfdfdf;
  --silver-dk: #808080;
  --shadow-dk: #404040;
  --navy: #000080;
  --navy-lt: #1084d0;
  --inactive-1: #808080;
  --inactive-2: #b5b5b5;
  --desktop-teal: #008080;
  --tooltip-bg: #ffffe1;
  --sel-blue: #000080;
  --font-ui: "Tahoma", "MS Sans Serif", "Segoe UI", Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  font-family: var(--font-ui);
  font-size: 11px;
  background: #000;
  -webkit-font-smoothing: none;
  user-select: none;
  cursor: default;
}

img, svg { display: block; }

/* Hourglass busy cursor (pixel-art hourglass) */
body.busy, body.busy * {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" shape-rendering="crispEdges"><rect x="3" y="1" width="13" height="2" fill="black"/><rect x="3" y="19" width="13" height="2" fill="black"/><rect x="4" y="3" width="11" height="2" fill="white" stroke="black" stroke-width="1"/><path d="M5 3 h9 v2 l-3 4 v4 l3 4 v2 h-9 v-2 l3-4 v-4 l-3-4 z" fill="white" stroke="black" stroke-width="1"/><path d="M7 5 h5 l-2.5 3 z" fill="%2300aaaa"/><path d="M9.5 13 l2.5 4 h-5 z" fill="%2300aaaa"/><rect x="9" y="9" width="1" height="3" fill="%2300aaaa"/></svg>') 11 11, wait !important;
}

/* ---------- bevel utilities ---------- */
.bevel-out {
  border: 1px solid;
  border-color: var(--silver-lt) var(--shadow-dk) var(--shadow-dk) var(--silver-lt);
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 var(--silver-dk);
  background: var(--silver);
}
.bevel-in {
  border: 1px solid;
  border-color: var(--shadow-dk) var(--silver-lt) var(--silver-lt) var(--shadow-dk);
  box-shadow: inset 1px 1px 0 var(--silver-dk), inset -1px -1px 0 #fff;
  background: var(--silver);
}
.bevel-in-thin {
  border: 1px solid;
  border-color: var(--silver-dk) #fff #fff var(--silver-dk);
}
.field-bevel {
  border: 1px solid;
  border-color: var(--silver-dk) #fff #fff var(--silver-dk);
  box-shadow: inset 1px 1px 0 var(--shadow-dk), inset -1px -1px 0 var(--silver-lt);
  background: #fff;
}

/* ---------- generic 3D button ---------- */
button, .btn98 {
  font-family: var(--font-ui);
  font-size: 11px;
  color: #000;
  background: var(--silver);
  border: 1px solid;
  border-color: var(--silver-lt) var(--shadow-dk) var(--shadow-dk) var(--silver-lt);
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 var(--silver-dk);
  padding: 3px 12px;
  cursor: default;
  outline: none;
  position: relative;
}
button:active:not(:disabled), .btn98.pressed {
  border-color: var(--shadow-dk) var(--silver-lt) var(--silver-lt) var(--shadow-dk);
  box-shadow: inset 1px 1px 0 var(--silver-dk), inset -1px -1px 0 #fff;
  padding: 4px 11px 2px 13px;
}
button:disabled { color: var(--silver-dk); text-shadow: 1px 1px 0 #fff; }
button:focus-visible::after {
  content: ""; position: absolute; inset: 3px;
  border: 1px dotted #000;
}
.btn98-default { outline: 1px solid #000; }

input[type="text"], textarea, select {
  font-family: var(--font-ui);
  font-size: 11px;
  background: #fff;
  color: #000;
  border: 2px inset #fff;
  border-color: var(--silver-dk) #fff #fff var(--silver-dk);
  box-shadow: inset 1px 1px 0 var(--shadow-dk);
  padding: 2px 3px;
  outline: none;
  cursor: text;
  user-select: text;
}
select { cursor: default; user-select: none; }

/* ---------- Win98 scrollbars ---------- */
.scroll98 { scrollbar-width: auto; }
.scroll98::-webkit-scrollbar { width: 16px; height: 16px; }
.scroll98::-webkit-scrollbar-track {
  background-image: repeating-conic-gradient(#fff 0 25%, var(--silver) 0 50%);
  background-size: 2px 2px;
}
.scroll98::-webkit-scrollbar-thumb {
  background: var(--silver);
  border: 1px solid;
  border-color: var(--silver-lt) var(--shadow-dk) var(--shadow-dk) var(--silver-lt);
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 var(--silver-dk);
}
.scroll98::-webkit-scrollbar-button:single-button {
  background-color: var(--silver);
  border: 1px solid;
  border-color: var(--silver-lt) var(--shadow-dk) var(--shadow-dk) var(--silver-lt);
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 var(--silver-dk);
  background-repeat: no-repeat;
  background-position: center;
  height: 16px; width: 16px;
}
.scroll98::-webkit-scrollbar-button:single-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="M4 2 L1 5 h6 z" fill="black"/></svg>');
}
.scroll98::-webkit-scrollbar-button:single-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="M4 6 L1 3 h6 z" fill="black"/></svg>');
}
.scroll98::-webkit-scrollbar-button:single-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="M2 4 L5 1 v6 z" fill="black"/></svg>');
}
.scroll98::-webkit-scrollbar-button:single-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="M6 4 L3 1 v6 z" fill="black"/></svg>');
}
.scroll98::-webkit-scrollbar-corner { background: var(--silver); }

/* ============================================================
   Power / boot screens
   ============================================================ */
#power-screen {
  position: fixed; inset: 0; z-index: 10000;
  background: radial-gradient(ellipse at 50% 45%, #17171f 0%, #060608 70%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 26px;
}
#power-screen .crt-note {
  color: #55565f; font-size: 12px; letter-spacing: 1px; font-family: var(--font-ui);
}
#power-btn {
  width: 74px; height: 74px; border-radius: 50%;
  background: linear-gradient(145deg, #e8e4d8, #b7b2a4);
  border: 3px solid #8d8878;
  box-shadow: 0 0 0 6px #35343a, 0 6px 18px rgba(0,0,0,.8), inset 0 2px 3px #fff8;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
}
#power-btn:active { transform: translateY(1px); box-shadow: 0 0 0 6px #35343a, 0 3px 8px rgba(0,0,0,.8), inset 0 2px 6px #0004; }
#power-btn svg { width: 30px; height: 30px; }
#power-screen .machine-label {
  color: #8e8f98; font-size: 14px; font-family: Arial, sans-serif; font-weight: bold;
  letter-spacing: 3px;
}

#boot-screen {
  position: fixed; inset: 0; z-index: 9999;
  background: #000;
  overflow: hidden;
}
#boot-screen .post {
  font-family: "Courier New", monospace; font-size: 15px; line-height: 1.25;
  color: #aaa; padding: 18px 24px; white-space: pre-wrap; height: 100%;
}
#boot-screen .post .em { color: #fff; }
#boot-screen .post .energy {
  position: absolute; top: 14px; right: 24px; border: 2px solid #888; color: #888;
  padding: 6px 10px; font-size: 12px; text-align: center; line-height: 1.3;
}
#boot-logo {
  position: absolute; inset: 0; background: #000;
  display: flex; align-items: center; justify-content: center;
}
#boot-logo .logo-wrap { position: relative; width: min(560px, 80vw); }
#boot-logo .boot-bar-zone {
  position: absolute; left: 0; right: 0; bottom: -18vh; height: 14px;
  background: #000; overflow: hidden;
}
#boot-logo .boot-bar {
  position: absolute; top: 2px; height: 9px; width: 90px;
  background: repeating-linear-gradient(90deg,
    #2222dd 0 6px, #3355ff 6px 12px, #22aaff 12px 18px, #3355ff 18px 24px);
  animation: bootbar 1.6s linear infinite;
}
@keyframes bootbar {
  from { left: -90px; } to { left: 100%; }
}

/* ============================================================
   Desktop
   ============================================================ */
#desktop {
  position: fixed; inset: 0 0 28px 0;
  background: var(--desktop-teal);
  overflow: hidden;
}
#desktop.wall-clouds {
  background: linear-gradient(#3a6ea5, #3a6ea5);
}
#desktop .wallpaper {
  position: absolute; inset: 0; pointer-events: none;
}
#desktop-icons { position: absolute; inset: 0; }

.desk-icon {
  position: absolute;
  width: 75px;
  display: flex; flex-direction: column; align-items: center;
  gap: 4px;
  padding-top: 4px;
}
.desk-icon .ico { width: 32px; height: 32px; position: relative; }
.desk-icon .ico svg { width: 32px; height: 32px; }
.desk-icon .label {
  color: #fff; text-align: center; line-height: 1.2;
  padding: 1px 2px;
  max-width: 74px;
  text-shadow: 1px 1px 1px #000;
}
.desk-icon.selected .label {
  background: var(--sel-blue);
  outline: 1px dotted #ffff00;
  text-shadow: none;
}
.desk-icon.selected .ico { filter: opacity(0.7) drop-shadow(0 0 0 #000080); }
.desk-icon.drag-ghost { opacity: .55; }

#sel-marquee {
  position: absolute; border: 1px dotted #e6e6e6; background: rgba(0,0,128,0.12);
  pointer-events: none; z-index: 5;
}

#window-layer { position: absolute; inset: 0; pointer-events: none; }
#window-layer > * { pointer-events: auto; }

/* ============================================================
   Windows
   ============================================================ */
.win98-window {
  position: absolute;
  background: var(--silver);
  border: 1px solid;
  border-color: var(--silver-lt) var(--shadow-dk) var(--shadow-dk) var(--silver-lt);
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 var(--silver-dk);
  padding: 3px;
  display: flex; flex-direction: column;
  min-width: 120px; min-height: 60px;
}
.win98-window.maximized { border: none; box-shadow: none; padding: 2px; }

.titlebar {
  height: 18px;
  background: linear-gradient(90deg, var(--navy), var(--navy-lt));
  display: flex; align-items: center;
  padding: 1px 2px 1px 3px;
  gap: 3px;
  flex: 0 0 auto;
}
.win98-window.inactive .titlebar {
  background: linear-gradient(90deg, var(--inactive-1), var(--inactive-2));
}
.titlebar .t-icon { width: 16px; height: 16px; flex: 0 0 auto; }
.titlebar .t-icon svg { width: 16px; height: 16px; }
.titlebar .t-text {
  color: #fff; font-weight: bold; font-size: 11px;
  flex: 1 1 auto;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  letter-spacing: .2px;
}
.win98-window.inactive .titlebar .t-text { color: var(--silver); }
.titlebar .t-btns { display: flex; gap: 2px; flex: 0 0 auto; }
.titlebar .t-btns button {
  width: 16px; height: 14px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background-repeat: no-repeat; background-position: center;
}
.titlebar .t-btns button:active { padding: 1px 0 0 1px; }
.tbtn-min { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="9" height="9"><rect x="1" y="6" width="6" height="2" fill="black"/></svg>'); }
.tbtn-max { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="9" height="9"><rect x="0.5" y="0.5" width="8" height="8" fill="none" stroke="black"/><rect x="1" y="1" width="7" height="1.6" fill="black"/></svg>'); }
.tbtn-restore { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="9" height="9"><rect x="2.5" y="0.5" width="6" height="5.5" fill="none" stroke="black"/><rect x="3" y="1" width="5" height="1.4" fill="black"/><rect x="0.5" y="3" width="6" height="5.5" fill="white" stroke="black"/><rect x="1" y="3.5" width="5" height="1.4" fill="black"/></svg>'); }
.tbtn-close { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="9" height="9"><path d="M1 1 L8 8 M8 1 L1 8" stroke="black" stroke-width="1.6"/></svg>'); }
.tbtn-help { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="9" height="9"><text x="2" y="8" font-family="Arial" font-size="9" font-weight="bold" fill="black">?</text></svg>'); }

.menubar {
  display: flex; align-items: center;
  padding: 1px 0;
  flex: 0 0 auto;
  background: var(--silver);
}
.menubar .menu-title {
  padding: 2px 6px;
  border: 1px solid transparent;
}
.menubar .menu-title:hover, .menubar .menu-title.open {
  border-color: var(--silver-lt) var(--silver-dk) var(--silver-dk) var(--silver-lt);
}
.menubar .menu-title.open {
  border-color: var(--silver-dk) var(--silver-lt) var(--silver-lt) var(--silver-dk);
}
.menubar .menu-title u { text-decoration: underline; }

.win-body {
  flex: 1 1 auto;
  position: relative;
  overflow: hidden;
  display: flex; flex-direction: column;
  min-height: 0;
}

.statusbar {
  flex: 0 0 auto;
  display: flex; gap: 2px;
  padding-top: 2px;
}
.statusbar .pane {
  border: 1px solid;
  border-color: var(--silver-dk) #fff #fff var(--silver-dk);
  padding: 2px 6px;
  flex: 1 1 auto;
  white-space: nowrap; overflow: hidden;
  height: 18px;
}
.statusbar .pane.fixed { flex: 0 0 auto; }
.statusbar .size-grip {
  flex: 0 0 16px; height: 18px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13"><g><path d="M11 1 l-10 10" stroke="%23808080"/><path d="M12 2 l-10 10" stroke="white"/><path d="M11 5 l-6 6" stroke="%23808080"/><path d="M12 6 l-6 6" stroke="white"/><path d="M11 9 l-2 2" stroke="%23808080"/><path d="M12 10 l-2 2" stroke="white"/></g></svg>');
  background-repeat: no-repeat; background-position: bottom right;
  cursor: nwse-resize;
}

/* resize handles */
.rs { position: absolute; z-index: 3; }
.rs-n { top: -3px; left: 8px; right: 8px; height: 6px; cursor: ns-resize; }
.rs-s { bottom: -3px; left: 8px; right: 8px; height: 6px; cursor: ns-resize; }
.rs-e { right: -3px; top: 8px; bottom: 8px; width: 6px; cursor: ew-resize; }
.rs-w { left: -3px; top: 8px; bottom: 8px; width: 6px; cursor: ew-resize; }
.rs-ne { top: -3px; right: -3px; width: 11px; height: 11px; cursor: nesw-resize; }
.rs-nw { top: -3px; left: -3px; width: 11px; height: 11px; cursor: nwse-resize; }
.rs-se { bottom: -3px; right: -3px; width: 11px; height: 11px; cursor: nwse-resize; }
.rs-sw { bottom: -3px; left: -3px; width: 11px; height: 11px; cursor: nesw-resize; }

/* drag outline for resize */
#drag-outline {
  position: fixed; z-index: 9500;
  border: 2px dotted #000;
  background: transparent;
  pointer-events: none;
}

/* ============================================================
   Taskbar
   ============================================================ */
#taskbar {
  position: fixed; left: 0; right: 0; bottom: 0; height: 28px;
  background: var(--silver);
  border-top: 1px solid var(--silver-lt);
  box-shadow: inset 0 1px 0 #fff;
  display: flex; align-items: center;
  padding: 2px;
  gap: 3px;
  z-index: 9000;
}
#start-button {
  height: 22px;
  display: flex; align-items: center; gap: 4px;
  font-weight: bold; font-size: 11px;
  padding: 1px 6px 1px 3px;
  flex: 0 0 auto;
}
#start-button.pressed {
  border-color: var(--shadow-dk) var(--silver-lt) var(--silver-lt) var(--shadow-dk);
  box-shadow: inset 1px 1px 0 var(--silver-dk), inset -1px -1px 0 #fff;
  background-image: repeating-conic-gradient(#fff 0 25%, var(--silver) 0 50%);
  background-size: 2px 2px;
}
.start-logo {
  width: 16px; height: 16px; display: inline-block;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g transform="skewY(-8)"><rect x="1" y="3" width="6.4" height="5.4" fill="%23ff0000"/><rect x="8.4" y="3" width="6.4" height="5.4" fill="%2300a300"/><rect x="1" y="9.4" width="6.4" height="5.4" fill="%230000ff"/><rect x="8.4" y="9.4" width="6.4" height="5.4" fill="%23ffc700"/></g></svg>');
  background-size: contain; background-repeat: no-repeat;
}
.taskbar-divider {
  width: 1px; height: 22px; flex: 0 0 auto;
  border-left: 1px solid var(--silver-dk);
  border-right: 1px solid #fff;
}
#quick-launch { display: flex; align-items: center; gap: 1px; padding: 0 2px; flex: 0 0 auto; }
#quick-launch .ql-btn {
  width: 22px; height: 22px; border: 1px solid transparent;
  display: flex; align-items: center; justify-content: center;
}
#quick-launch .ql-btn:hover { border-color: var(--silver-lt) var(--silver-dk) var(--silver-dk) var(--silver-lt); }
#quick-launch .ql-btn:active { border-color: var(--silver-dk) var(--silver-lt) var(--silver-lt) var(--silver-dk); }
#quick-launch .ql-btn svg { width: 16px; height: 16px; }

#task-buttons {
  flex: 1 1 auto;
  display: flex; gap: 3px;
  overflow: hidden;
  height: 22px;
}
.task-btn {
  flex: 1 1 160px;
  max-width: 160px;
  min-width: 48px;
  height: 22px;
  display: flex; align-items: center; gap: 4px;
  padding: 1px 4px;
  text-align: left;
  overflow: hidden;
}
.task-btn .ti { width: 16px; height: 16px; flex: 0 0 auto; }
.task-btn .ti svg { width: 16px; height: 16px; }
.task-btn span.tt {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1 1 auto;
}
.task-btn.active {
  border-color: var(--shadow-dk) var(--silver-lt) var(--silver-lt) var(--shadow-dk);
  box-shadow: inset 1px 1px 0 var(--silver-dk), inset -1px -1px 0 #fff;
  background-image: repeating-conic-gradient(#fff 0 25%, var(--silver) 0 50%);
  background-size: 2px 2px;
  font-weight: bold;
}

#sys-tray {
  flex: 0 0 auto;
  height: 22px;
  display: flex; align-items: center; gap: 6px;
  padding: 0 8px 0 6px;
}
#tray-clock { font-size: 11px; }
#tray-volume { width: 16px; height: 16px; display: inline-block;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M2 6 h3 l4-3.5 v11 L5 10 H2 z" fill="%23c8c800" stroke="black" stroke-width="0.8"/><path d="M11 5 q2 3 0 6 M12.6 3.5 q3 4.5 0 9" stroke="black" fill="none" stroke-width="1"/></svg>');
  background-size: contain; background-repeat: no-repeat;
}

/* ============================================================
   Menus (popup, context, start)
   ============================================================ */
#menu-layer { position: fixed; inset: 0; z-index: 9600; pointer-events: none; }
.popup-menu {
  position: fixed;
  background: var(--silver);
  border: 1px solid;
  border-color: var(--silver-lt) var(--shadow-dk) var(--shadow-dk) var(--silver-lt);
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 var(--silver-dk), 2px 2px 3px rgba(0,0,0,.35);
  padding: 2px;
  min-width: 130px;
  pointer-events: auto;
}
.popup-menu .mi {
  display: flex; align-items: center; gap: 6px;
  padding: 3px 16px 3px 4px;
  position: relative;
  white-space: nowrap;
}
.popup-menu .mi .mi-ico { width: 16px; height: 16px; flex: 0 0 auto; }
.popup-menu .mi .mi-ico svg { width: 16px; height: 16px; }
.popup-menu .mi .mi-label { flex: 1 1 auto; padding-right: 12px; }
.popup-menu .mi .mi-label u { text-decoration: underline; }
.popup-menu .mi.hilite { background: var(--sel-blue); color: #fff; }
.popup-menu .mi.disabled { color: var(--silver-dk); text-shadow: 1px 1px 0 #fff; }
.popup-menu .mi.disabled.hilite { background: var(--sel-blue); text-shadow: none; }
.popup-menu .mi .sub-arrow {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 0; height: 0;
  border-left: 4px solid #000; border-top: 4px solid transparent; border-bottom: 4px solid transparent;
}
.popup-menu .mi.hilite .sub-arrow { border-left-color: #fff; }
.popup-menu .mi .checkmark { position: absolute; left: 5px; font-size: 10px; }
.popup-menu .separator {
  height: 0; margin: 3px 2px;
  border-top: 1px solid var(--silver-dk);
  border-bottom: 1px solid #fff;
}
.popup-menu.font-large .mi { padding-top: 4px; padding-bottom: 4px; }

/* Start menu */
.start-menu {
  position: fixed;
  bottom: 28px; left: 2px;
  background: var(--silver);
  border: 1px solid;
  border-color: var(--silver-lt) var(--shadow-dk) var(--shadow-dk) var(--silver-lt);
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 var(--silver-dk), 3px 3px 4px rgba(0,0,0,.4);
  display: flex;
  padding: 2px;
  pointer-events: auto;
}
.start-banner {
  width: 24px;
  background: linear-gradient(0deg, var(--navy-lt), var(--navy));
  position: relative;
  flex: 0 0 auto;
}
.start-banner span {
  position: absolute; bottom: 6px; left: 50%;
  transform: rotate(-90deg) translateY(-50%);
  transform-origin: left center;
  color: var(--silver);
  font-size: 15px; font-family: Arial, sans-serif;
  white-space: nowrap;
  letter-spacing: 1px;
}
.start-banner span b { color: #fff; font-weight: bold; }
.start-items { display: flex; flex-direction: column; min-width: 172px; }
.start-items .mi {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 14px 5px 6px;
  position: relative;
  white-space: nowrap;
}
.start-items .mi .mi-ico { width: 24px; height: 24px; flex: 0 0 auto; }
.start-items .mi .mi-ico svg { width: 24px; height: 24px; }
.start-items .mi.hilite { background: var(--sel-blue); color: #fff; }
.start-items .mi .sub-arrow {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  width: 0; height: 0;
  border-left: 4px solid #000; border-top: 4px solid transparent; border-bottom: 4px solid transparent;
}
.start-items .mi.hilite .sub-arrow { border-left-color: #fff; }
.start-items .separator {
  height: 0; margin: 2px 1px;
  border-top: 1px solid var(--silver-dk);
  border-bottom: 1px solid #fff;
}

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

/* ============================================================
   Dialogs / message boxes
   ============================================================ */
.dlg-shield {
  position: absolute; inset: 0; z-index: 8500;
}
.msgbox-body {
  display: flex; flex-direction: column;
  padding: 12px 12px 10px 12px;
  gap: 14px;
}
.msgbox-main { display: flex; gap: 12px; align-items: flex-start; }
.msgbox-main .mb-icon { width: 32px; height: 32px; flex: 0 0 auto; }
.msgbox-main .mb-icon svg { width: 32px; height: 32px; }
.msgbox-main .mb-text { padding-top: 6px; line-height: 1.5; max-width: 320px; }
.msgbox-btns { display: flex; justify-content: center; gap: 6px; }
.msgbox-btns button { min-width: 74px; }

/* Properties dialog tabs */
.tabs98 { display: flex; align-items: flex-end; padding: 6px 6px 0 6px; position: relative; z-index: 2; }
.tab98 {
  padding: 3px 10px 4px 10px;
  border: 1px solid;
  border-color: var(--silver-lt) var(--shadow-dk) transparent var(--silver-lt);
  box-shadow: inset 1px 1px 0 #fff;
  background: var(--silver);
  border-radius: 3px 3px 0 0;
  margin-right: 1px;
  position: relative;
}
.tab98.active {
  padding-bottom: 6px; margin-bottom: -1px;
  z-index: 3;
}
.tabpage98 {
  margin: 0 6px 6px 6px;
  border: 1px solid;
  border-color: var(--silver-lt) var(--shadow-dk) var(--shadow-dk) var(--silver-lt);
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 var(--silver-dk);
  padding: 12px;
  flex: 1 1 auto;
  position: relative; z-index: 1;
  overflow: auto;
}
.groupbox98 {
  border: 1px solid;
  border-color: var(--silver-dk) #fff #fff var(--silver-dk);
  box-shadow: inset 1px 1px 0 #fff;
  position: relative;
  padding: 12px 10px 10px 10px;
  margin-top: 6px;
}
.groupbox98 > legend, .groupbox98 > .gb-label {
  position: absolute; top: -7px; left: 8px;
  background: var(--silver); padding: 0 4px;
}

/* ============================================================
   Shutdown screen
   ============================================================ */
#shutdown-screen {
  position: fixed; inset: 0; z-index: 10001;
  background: #000;
  display: flex; align-items: center; justify-content: center;
}
#shutdown-screen .shut-text {
  color: #ff8c00;
  font-family: Arial, sans-serif;
  font-size: clamp(22px, 4.4vw, 42px);
  font-weight: bold;
  text-align: center;
  line-height: 1.4;
  text-shadow: 2px 2px 0 #7a3c00;
}

/* misc */
.hidden { display: none !important; }
::selection { background: var(--sel-blue); color: #fff; }