/* ============================================================================
   MAPLE ERP — PRO SKIN  (loaded LAST on every page, after the module's own CSS)
   One file upgrades all 19 apps: palette, type, depth, controls, motion.
   Cosmetic only. No layout logic, no data, no behaviour is touched.
   ========================================================================== */

/* ---------- 1. TOKENS ------------------------------------------------- */
:root,
[data-theme="dark"] {
  --app:      #0b0e14;
  --surface:  #10141d;
  --card:     #141a25;
  --card-2:   #182030;
  --line:     #232b39;
  --hair:     rgba(255,255,255,.06);
  --fg:       #eef2f8;
  --muted:    #98a4b7;
  --faint:    #67738a;
  --brand:    #d92d20;
  --brand-d:  #8f1d15;
  --brand-l:  #f04438;
  --ok:       #12b76a;
  --warn:     #f79009;
  --info:     #2e90fa;
  --sh1: 0 1px 2px rgba(0,0,0,.40);
  --sh2: 0 6px 20px -6px rgba(0,0,0,.55);
  --sh3: 0 24px 56px -16px rgba(0,0,0,.70);
  --r-lg: 16px; --r-md: 12px; --r-sm: 10px;
  color-scheme: dark;
}
[data-theme="light"] {
  --app:      #f5f7fa;
  --surface:  #ffffff;
  --card:     #ffffff;
  --card-2:   #f8fafc;
  --line:     #e4e8ef;
  --hair:     rgba(16,24,40,.06);
  --fg:       #0d121c;
  --muted:    #5a6675;
  --faint:    #8b97a8;
  --brand:    #d92d20;
  --brand-d:  #b42318;
  --brand-l:  #f04438;
  --sh1: 0 1px 2px rgba(16,24,40,.06);
  --sh2: 0 6px 18px -6px rgba(16,24,40,.12);
  --sh3: 0 24px 48px -16px rgba(16,24,40,.18);
  color-scheme: light;
}

/* ---------- 2. BASE --------------------------------------------------- */
/* ONE typeface across all 19 apps — the phone's own display font (SF Pro on
   iPhone/Mac, Segoe on Windows, Roboto on Android). No web-font download, no
   outside service, nothing to load before the app paints. */
html body, html body * {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif !important;
}
html body code, html body pre, html body #impLog, html body .mono {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace !important;
}
html { -webkit-text-size-adjust: 100%; }
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv02","cv03","cv04","ss01","tnum" 0;
  letter-spacing: -.005em;
}
[data-theme="dark"] body {
  background-image:
    radial-gradient(900px 420px at 100% -8%,  rgba(217,45,32,.055), transparent 62%),
    radial-gradient(760px 380px at -10% 104%, rgba(46,144,250,.05), transparent 62%);
  background-attachment: fixed;
}
[data-theme="light"] body {
  background-image:
    radial-gradient(900px 420px at 100% -8%, rgba(217,45,32,.045), transparent 62%);
  background-attachment: fixed;
}

/* headings — tight, confident */
h1 { font-weight:650; letter-spacing:-.022em; line-height:1.15; }
h2 { font-weight:640; letter-spacing:-.016em; }
h3 { font-weight:640; letter-spacing:-.012em; }
.sub { line-height:1.5; }

/* every number in the app lines up in a column */
.v, .kpi .v, .amt, .money, .num, td.n, th.n, .total, .ttoday b, .pstate b,
.big, .kpiv, .stat b { font-variant-numeric: tabular-nums; }

/* ---------- 3. SURFACES ----------------------------------------------- */
.card, .widget, .tile, .panel, .staffcard, .kpi, .box {
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  box-shadow: var(--sh1);
}
[data-theme="dark"] .card,
[data-theme="dark"] .widget,
[data-theme="dark"] .tile,
[data-theme="dark"] .staffcard,
[data-theme="dark"] .panel {
  background-image: linear-gradient(180deg, rgba(255,255,255,.026), rgba(255,255,255,0) 40%);
}
.card:hover, .widget:hover { box-shadow: var(--sh2); }

/* kill the old cyan light-bar that sat on top of every single card */
.card::after, .kpi::after { display: none !important; }
.card:hover { box-shadow: var(--sh2) !important; transform: none !important; }

/* ---------- 4. HEADER + RAIL ------------------------------------------ */
header {
  height: 60px !important;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 72%, transparent) !important;
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
}
.search {
  border-radius: var(--r-sm) !important;
  background: color-mix(in srgb, var(--fg) 4%, transparent) !important;
  border-color: var(--hair) !important;
  transition: border-color .15s ease, background .15s ease;
}
.search:hover { border-color: var(--line) !important; }
.search kbd { color: var(--faint); border-color: var(--hair); }
.ic {
  border-radius: var(--r-sm) !important;
  border-color: var(--hair) !important;
  background: color-mix(in srgb, var(--fg) 4%, transparent) !important;
  transition: background .15s ease, color .15s ease, transform .12s ease;
}
.ic:hover { background: color-mix(in srgb, var(--fg) 9%, transparent) !important; }
.ic:active { transform: scale(.94); }
.av { box-shadow: inset 0 0 0 1px var(--hair); font-weight: 700; }

aside { background: var(--surface); border-right: 1px solid var(--line); }
.brand .m { box-shadow: 0 4px 12px -4px var(--brand); }
.nl { color: var(--faint); font-size: 10.5px; letter-spacing: .1em; }
.ni {
  border-radius: var(--r-sm);
  position: relative;
  transition: background .14s ease, color .14s ease;
}
.ni:hover { background: color-mix(in srgb, var(--fg) 6%, transparent); color: var(--fg); }
.ni.on {
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  color: var(--fg); font-weight: 620;
}
.ni.on::before {
  content:""; position:absolute; left:-12px; top:50%; transform:translateY(-50%);
  width:3px; height:18px; border-radius:0 3px 3px 0; background: var(--brand);
}

/* ---------- 5. BUTTONS ------------------------------------------------ */
.btn, button.btn, .mini, .timer {
  border-radius: var(--r-sm);
  font-weight: 620;
  letter-spacing: -.006em;
  transition: background .14s ease, border-color .14s ease, box-shadow .14s ease, transform .1s ease;
}
.btn { box-shadow: var(--sh1); }
.btn:hover { border-color: color-mix(in srgb, var(--fg) 22%, transparent); }
.btn:active, .mini:active, button:active { transform: translateY(1px); }
.btn.acc, button.acc, .btn.primary, .pbtn, .fab {
  border: 0;
  box-shadow: 0 1px 2px rgba(0,0,0,.28), 0 8px 20px -8px color-mix(in srgb, var(--brand) 70%, transparent);
}
.fab { box-shadow: 0 10px 28px -8px color-mix(in srgb, var(--brand) 85%, transparent) !important; }
.btn:disabled, button:disabled { opacity: .5; cursor: not-allowed; }
.btn:hover, button:hover { filter: none; }               /* drop the old glow */
.btn:focus-visible, button:focus-visible, .ni:focus-visible {
  outline: 2px solid var(--brand-l); outline-offset: 2px;
}

/* ---------- 6. FORM CONTROLS ------------------------------------------ */
input, select, textarea, input.t {
  border-radius: var(--r-sm) !important;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--fg) 3.5%, transparent);
  color: var(--fg);
  transition: border-color .14s ease, box-shadow .14s ease;
}
[data-theme="light"] input, [data-theme="light"] select, [data-theme="light"] textarea {
  background: #fff;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent) !important;
  outline: none;
}
input::placeholder, textarea::placeholder { color: var(--faint); }
input[type=checkbox], input[type=radio] { accent-color: var(--brand); width:17px; height:17px; }

/* segmented control */
.seg { border-radius: var(--r-md); padding: 3px; gap: 2px; }
.seg button { border-radius: var(--r-sm); transition: background .14s, color .14s; }
.seg button.on {
  background: var(--card) !important; color: var(--fg) !important;
  box-shadow: var(--sh1); font-weight: 650;
}

/* ---------- 7. TABS --------------------------------------------------- */
.tabs { gap: 4px; border-bottom: 1px solid var(--line); }
.tabs button {
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  padding: 10px 14px !important;
  transition: color .14s ease, background .14s ease;
}
.tabs button:hover { color: var(--fg); background: color-mix(in srgb, var(--fg) 5%, transparent); }
.tabs button.on { color: var(--fg) !important; border-color: var(--brand) !important; }

/* ---------- 8. TABLES ------------------------------------------------- */
table { font-variant-numeric: tabular-nums; }
/* BUILD 256 — on a phone, 10.5px column headings are not readable, and the
   !important below means nothing on the page can raise them. "Hours come to"
   on the Time Clock and "Costs you /sq ft" on the Wrap Calculator are figures
   he checks in the shop, so they get the 11px floor the rest of the app has.
   Desktop keeps 10.5px: the difference is invisible there and the uppercase
   letter-spacing depends on it. */
@media (max-width: 640px) {
  th { font-size: 11px !important; }
}
th {
  font-size: 10.5px !important; letter-spacing: .09em; color: var(--faint) !important;
  font-weight: 700; text-transform: uppercase;
  border-bottom: 1px solid var(--line);
}
td { border-bottom: 1px solid var(--hair); }
tbody tr { transition: background .14s ease; }
tbody tr:hover { background: color-mix(in srgb, var(--fg) 4%, transparent) !important; }

/* ---------- 9. PILLS / BADGES ----------------------------------------- */
.pill, .badge, .chip, .st {
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
  border-radius: 999px; padding: 3px 9px;
  box-shadow: inset 0 0 0 1px var(--hair);
}

/* ---------- 10. LISTS / ROWS ------------------------------------------ */
.row, .arow, .mrow, .rc, .jt { border-color: var(--hair) !important; }
.lbl { color: var(--faint); letter-spacing: .09em; font-size: 10.5px; }

/* ---------- 11. TILE GRID (portal) ------------------------------------ */
.tiles { gap: 12px; }
.tile { transition: transform .14s ease, box-shadow .16s ease, border-color .16s ease; }
.tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh2);
  border-color: color-mix(in srgb, var(--brand) 45%, var(--line)) !important;
}
/* the icon carries its app's own colour — a hairline ring in that colour, not grey */
.tile .t-ic { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c, var(--fg)) 24%, transparent); }
/* those deep printed inks go muddy on a black screen — lift them at night,
   same hue, enough light to read */
[data-theme="dark"] .tile .t-ic {
  color: color-mix(in srgb, var(--c, var(--fg)) 62%, #f2f6fc);
  background: linear-gradient(150deg,
    color-mix(in srgb, var(--c, var(--fg)) 30%, transparent),
    color-mix(in srgb, var(--c, var(--fg)) 11%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c, var(--fg)) 38%, transparent);
}
[data-theme="dark"] .tile:hover .t-ic {
  background: linear-gradient(150deg,
    color-mix(in srgb, var(--c, var(--fg)) 42%, transparent),
    color-mix(in srgb, var(--c, var(--fg)) 16%, transparent));
}
.tile .nm { letter-spacing: -.012em; }

/* ---------- 12. OVERLAYS ---------------------------------------------- */
.pal, .modal, .sheet, .ov > div:not(.scrim) { box-shadow: var(--sh3); border-radius: var(--r-lg); }
.scrim { background: rgba(4,6,10,.55) !important; backdrop-filter: blur(4px); }

/* ---------- 13. SCROLLBARS + SELECTION -------------------------------- */
::selection { background: color-mix(in srgb, var(--brand) 34%, transparent); }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--fg) 16%, transparent);
  border-radius: 999px; border: 2px solid transparent; background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--fg) 28%, transparent); background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* ---------- 14. PHONE ------------------------------------------------- */
@media (max-width: 900px) {
  main { padding: 16px 14px 92px !important; }
  h1 { font-size: 22px !important; }
  .tiles { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .tile { padding: 13px !important; }
  .tile .t-ic { width: 34px !important; height: 34px !important; margin-bottom: 8px !important; }
  .tile .t-ic svg { width: 18px !important; height: 18px !important; }
  .tile .nm { font-size: 13.5px !important; }
  .tile .ds { font-size: 11.5px !important; }
  .card { padding: 14px !important; border-radius: 14px; }
  .tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs button { white-space: nowrap; }
}

/* ---------- 15. MONEY APPS — same language as the rest of the ERP -------
   (Finance Center + Personal Finance shipped with a cyan "HUD" look. Pro
   money software is neutral and dense; colour is saved for real signals.) */
.brand { text-transform: none !important; letter-spacing: -.01em !important; }
.brand, .hudline { color: var(--faint) !important; }
.hudline { letter-spacing: .14em; font-size: 9px; }
header h1 { text-transform: none !important; letter-spacing: -.02em !important; font-size: 20px !important; }
.card:before, .toolbar:before { display: none !important; }
.lbl { letter-spacing: .07em !important; }

.nv { border-radius: var(--r-sm) !important; font-weight: 600 !important; }
.nv.on {
  background: color-mix(in srgb, var(--fg) 9%, transparent) !important;
  border-color: var(--hair) !important;
  color: var(--fg) !important;
}
.chip.on, .tabs button.on, .catc:hover {
  background: color-mix(in srgb, var(--fg) 9%, transparent) !important;
  border-color: color-mix(in srgb, var(--fg) 20%, transparent) !important;
  color: var(--fg) !important;
}
.tile .k, .tile .s { letter-spacing: .06em; }
.tile .v { font-size: 20px; letter-spacing: -.02em; }
.chip, .catc { border-radius: 999px; }

/* the money apps sit in a padded flex shell — give the phone its space back */
@media (max-width: 1080px) {
  body { padding: 12px !important; }
  .main { padding-bottom: 92px !important; }
  /* app switcher becomes one clean swipe row */
  .side { gap: 6px !important; overflow-x: auto; flex-wrap: nowrap !important;
          scrollbar-width: none; padding: 10px !important; }
  .side::-webkit-scrollbar { display: none; }
  .nv { white-space: nowrap; }
  .brand { white-space: nowrap; font-size: 0 !important; }        /* drop the kicker line */
  .brand b { font-size: 14.5px !important; }
  /* the headline card always gets the full width */
  .tiles .hero, .tiles .span2, .tiles .span3 { grid-column: 1 / -1 !important; }
  .hero { flex-direction: column; align-items: flex-start !important; gap: 14px !important; }
  .hero .side2 { width: 100%; justify-content: space-between; gap: 12px !important; }
  .hstat { text-align: left; }
  .hstat .hk { justify-content: flex-start; letter-spacing: .08em; }
}

/* the old sci-fi trim: graph-paper background, cyan corner brackets, sweeping
   light bars, glow on every hover. Calm surfaces read as professional. */
[data-theme="dark"] body {
  background: var(--app) !important;
  background-image:
    radial-gradient(900px 420px at 100% -8%,  rgba(217,45,32,.055), transparent 62%),
    radial-gradient(760px 380px at -10% 104%, rgba(46,144,250,.05), transparent 62%) !important;
  background-attachment: fixed !important;
}
[data-theme="dark"] .card:after,
[data-theme="dark"] .card:before,
[data-theme="dark"] .toolbar:after,
[data-theme="dark"] .toolbar:before { display: none !important; content: none !important; }
[data-theme="dark"] .card { border-color: var(--line) !important; }
[data-theme="dark"] .brand { color: var(--faint) !important; }
[data-theme="dark"] .nv.on {
  background: color-mix(in srgb, var(--fg) 9%, transparent) !important;
  border-color: var(--hair) !important; color: var(--fg) !important; box-shadow: none !important;
}
[data-theme="dark"] .nv.on svg, [data-theme="dark"] .hd .lbl svg { color: var(--muted) !important; }
[data-theme="dark"] .chip.on {
  background: color-mix(in srgb, var(--fg) 9%, transparent) !important;
  border-color: color-mix(in srgb, var(--fg) 20%, transparent) !important;
  color: var(--fg) !important; box-shadow: none !important;
}
[data-theme="dark"] .btn:hover, [data-theme="dark"] .catc:hover {
  border-color: color-mix(in srgb, var(--fg) 24%, transparent) !important;
  color: var(--fg) !important; box-shadow: var(--sh1) !important;
}
[data-theme="dark"] .fbar input:focus, [data-theme="dark"] .fbar select:focus {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent) !important;
}
[data-theme="dark"] .hero .big, [data-theme="dark"] .hstat .hv,
[data-theme="dark"] #hudDot { text-shadow: none !important; }
.logoMark { background: linear-gradient(135deg, var(--brand-l), var(--brand-d)) !important;
            color: #fff !important; box-shadow: var(--sh1) !important; }

/* ---------- 15b. LEFTOVER HUD GIMMICKS (every app) --------------------- */
.kpi::after, .kpi::before, .tile::after, .widget::after { display: none !important; content: none !important; }
.kpi:hover { transform: none !important; box-shadow: var(--sh2) !important; }
.kpi .v.up, .kpi .v.down, .kpi.net .v, .amt-in, .amt-out,
.hero .big, .hstat .hv { text-shadow: none !important; }
.kpi.net {
  background: var(--card) !important;
  border-color: color-mix(in srgb, var(--fg) 22%, transparent) !important;
  box-shadow: var(--sh2) !important;
}
[data-theme="dark"] .kpi.net {
  background-image: linear-gradient(180deg, rgba(255,255,255,.05), transparent 60%) !important;
}
tbody tr:hover { background: color-mix(in srgb, var(--fg) 4%, transparent) !important; }

/* ---------- 16. THE JUMP-TO-APP BUTTON -------------------------------- */
#mHomeBtn {
  background: color-mix(in srgb, var(--surface) 92%, transparent) !important;
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  box-shadow: var(--sh2) !important;
  color: var(--muted) !important;
  transition: color .14s ease, transform .12s ease;
}
#mHomeBtn:hover { color: var(--fg) !important; }
#mHomeBtn:active { transform: scale(.94); }

/* respect people who turn motion off */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ============================================================================
   IRON HUD — the whole ERP dressed like a heads-up display.
   Loaded last on every page, dark theme only (light stays clean and printable).
   Pure looks: glowing edges, corner brackets, a faint tactical grid, scanline
   sheen, luminous stats. No layout logic, no behaviour, no data touched.
   ========================================================================== */

[data-theme="dark"] {
  --hud:      #35e0ff;
  --hud-dim:  rgba(53,224,255,.32);
  --hud-glow: rgba(53,224,255,.14);
  --hud-amber:#ffb547;
}

/* the air of the thing: a deep radial glow + faint tactical grid behind everything */
[data-theme="dark"] body {
  background:
    radial-gradient(1100px 520px at 18% -8%, rgba(53,224,255,.07), transparent 60%),
    radial-gradient(900px 460px at 108% 12%, rgba(53,224,255,.05), transparent 55%),
    linear-gradient(rgba(53,224,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(53,224,255,.022) 1px, transparent 1px),
    var(--app);
  background-size: auto, auto, 44px 44px, 44px 44px, auto;
}

/* every panel gets a HUD edge: hairline cyan + corner brackets */
[data-theme="dark"] .card,
[data-theme="dark"] .widget,
[data-theme="dark"] .tile,
[data-theme="dark"] .panel,
[data-theme="dark"] .kc,
[data-theme="dark"] .box,
[data-theme="dark"] .kpi,
[data-theme="dark"] .staffcard,
[data-theme="dark"] .bot {
  position: relative;
  border-color: color-mix(in srgb, var(--hud) 16%, var(--line)) !important;
  box-shadow: var(--sh1), inset 0 0 0 1px rgba(53,224,255,.03);
}
[data-theme="dark"] .card::before,
[data-theme="dark"] .widget::before,
[data-theme="dark"] .panel::before,
[data-theme="dark"] .kc::before,
[data-theme="dark"] .kpi::before {
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:
    linear-gradient(var(--hud-dim),var(--hud-dim)) left  0 top    0 / 14px 1.5px,
    linear-gradient(var(--hud-dim),var(--hud-dim)) left  0 top    0 / 1.5px 14px,
    linear-gradient(var(--hud-dim),var(--hud-dim)) right 0 bottom 0 / 14px 1.5px,
    linear-gradient(var(--hud-dim),var(--hud-dim)) right 0 bottom 0 / 1.5px 14px;
  background-repeat: no-repeat;
  opacity:.8;
}
[data-theme="dark"] .card:hover,
[data-theme="dark"] .widget:hover,
[data-theme="dark"] .tile:hover {
  border-color: color-mix(in srgb, var(--hud) 42%, var(--line)) !important;
  box-shadow: 0 0 0 1px var(--hud-glow), 0 8px 30px -12px rgba(53,224,255,.25), var(--sh2) !important;
}

/* the big numbers read like instruments */
[data-theme="dark"] .v,
[data-theme="dark"] .kpi .v,
[data-theme="dark"] .big,
[data-theme="dark"] .kpiv,
[data-theme="dark"] .qty {
  text-shadow: 0 0 18px var(--hud-glow);
}

/* headers: quiet uppercase telemetry */
[data-theme="dark"] .k,
[data-theme="dark"] .kpi .k,
[data-theme="dark"] label,
[data-theme="dark"] th {
  letter-spacing: .06em;
}

/* controls: cyan focus ring + luminous primary buttons */
[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus {
  border-color: var(--hud) !important;
  box-shadow: 0 0 0 3px var(--hud-glow) !important;
  outline: none;
}
[data-theme="dark"] .btn:hover,
[data-theme="dark"] button.save:hover {
  box-shadow: 0 0 14px -2px var(--hud-dim);
}

/* status dots breathe like indicators, not christmas lights */
@keyframes hudPulse { 0%,100%{opacity:1} 50%{opacity:.55} }
[data-theme="dark"] .dot { box-shadow: 0 0 8px currentColor; animation: hudPulse 2.6s ease-in-out infinite; }

/* progress / level bars glow */
[data-theme="dark"] progress::-webkit-progress-value { box-shadow: 0 0 10px var(--hud-dim); }

/* tables: hairline cyan separations */
[data-theme="dark"] tr { border-color: color-mix(in srgb, var(--hud) 10%, var(--line)) !important; }

/* scrollbars that belong on a HUD */
[data-theme="dark"] ::-webkit-scrollbar { width:10px; height:10px; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--hud) 18%, #1a2230); border-radius: 8px; border: 2px solid var(--app); }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--hud) 34%, #1a2230); }
[data-theme="dark"] ::-webkit-scrollbar-track { background: transparent; }

/* the workspace sidebar joins the HUD */
[data-theme="dark"] #mwsNav { border-right: 1px solid color-mix(in srgb, var(--hud) 22%, var(--line)); box-shadow: 12px 0 40px -22px rgba(53,224,255,.25); }
[data-theme="dark"] #mwsBtn { border-color: var(--hud-dim); color: var(--hud); box-shadow: 0 0 16px -4px var(--hud-dim), 0 8px 24px -10px rgba(0,0,0,.6); }
[data-theme="dark"] [data-ws="1"] { border-color: color-mix(in srgb, var(--hud) 18%, var(--line)) !important; }

/* one soft scanline sheen over everything — barely there, pure atmosphere */
[data-theme="dark"] body::after {
  content:""; position:fixed; inset:0; pointer-events:none; z-index:2147483000;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
}

/* phones: kill the heavy glows for battery + clarity, keep the edges */
@media (max-width: 820px) {
  [data-theme="dark"] body { background-image: none; background: var(--app); }
  [data-theme="dark"] body::after { display:none; }
  [data-theme="dark"] .dot { animation: none; }
}