/* ============================================================================
 * themes.css — SLQ.dk
 *
 * HOW THIS WORKS
 * --------------
 * 1) "SKIN ENGINE" below styles every component ONCE, reading CSS variables
 *    (tokens) like var(--surface), var(--win-shadow), var(--btn-bg)…
 * 2) Each theme block — html[data-theme="2000"] { … } etc. — only sets those
 *    tokens (plus a couple of structural exceptions). Change a colour for a
 *    whole theme in one place.
 *
 * To add a new theme: copy a theme block, rename the selector, retune tokens,
 * then add it to the THEMES list in js/slq.js.
 * ========================================================================== */

/* ============================================================================
 * SKIN ENGINE — component visuals from tokens (written once)
 * ========================================================================== */

body {
  background: var(--desktop);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font-ui);
}
.mono, .result .val, .formula, code, kbd { font-family: var(--font-mono); }
a { color: var(--link); }

/* Top bar */
.topbar {
  background: var(--top-bg);
  color: var(--top-text);
  border-bottom: var(--top-border);
  box-shadow: var(--top-shadow);
}
.topbar .brand { color: var(--brand-color); }
.topbar nav a { color: var(--top-text); border-radius: var(--top-link-radius); }
.topbar nav a:hover { background: var(--top-link-hover); }
.topbar nav a.active { background: var(--top-active-bg); color: var(--top-active-text); }

/* ── Left sidebar (Explorer-style tree) ───────────────────────────────────
 * Built once from tokens; each theme block already defines the tokens used. */
.sidebar { background: var(--surface); border-right: 1px solid var(--panel-border); color: var(--text); }
.side-head { background: var(--title-bg); color: var(--title-fg); border-bottom: var(--title-border, 1px solid var(--panel-border)); text-shadow: var(--title-text-shadow, none); }
.side-head .side-title { color: var(--title-fg); }
.tree { background: var(--field-bg); color: var(--field-text); }
.tree .row { color: var(--field-text); }
.tree .row:hover { background: rgba(127, 127, 127, .16); }
.tree a.row.sel { background: var(--accent); color: #fff; }
.tree .twist { color: var(--text-dim); }
.side-foot { background: var(--surface); color: var(--text); border-top: 1px solid var(--panel-border); }
.side-toggle { background: var(--title-bg); color: var(--title-fg); border: 1px solid var(--panel-border); border-radius: var(--panel-radius); text-shadow: var(--title-text-shadow, none); }

/* classic Explorer: [+]/[−] toggle boxes + dotted guide lines (XP & 2000) */
html[data-theme="xp"] .tree .twist, html[data-theme="2000"] .tree .twist { width: 9px; height: 9px; border: 1px solid #7b7b7b; background: var(--field-bg); }
html[data-theme="xp"] .tree .twist::before, html[data-theme="2000"] .tree .twist::before { content: ''; width: auto; height: auto; border: 0; transform: none; position: absolute; left: 1px; right: 1px; top: 3px; height: 1px; background: #000; }
html[data-theme="xp"] .tree .twist::after, html[data-theme="2000"] .tree .twist::after { content: ''; position: absolute; top: 1px; bottom: 1px; left: 3px; width: 1px; background: #000; }
html[data-theme="xp"] .tree li.folder.open > .row .twist::after, html[data-theme="2000"] .tree li.folder.open > .row .twist::after { display: none; }
html[data-theme="xp"] .tree .children, html[data-theme="2000"] .tree .children { margin-left: 12px; padding-left: 6px; border-left: 1px dotted #9a9a9a; }

/* Windows */
.win {
  background: var(--win-bg);
  border: var(--win-border);
  border-radius: var(--win-radius);
  box-shadow: var(--win-shadow);
}
.win-titlebar {
  background: var(--title-bg);
  color: var(--title-fg);
  border-radius: var(--title-radius);
  border-bottom: var(--title-border);
  text-shadow: var(--title-text-shadow);
}
.win-title { color: var(--title-fg); }
.win-controls i {
  background: var(--ctl-bg);
  color: var(--ctl-fg);
  border: var(--ctl-border);
  border-radius: var(--ctl-radius);
  box-shadow: var(--ctl-shadow);
}
.win-controls i:hover { background: var(--ctl-hover-bg); color: var(--ctl-hover-fg); }
.win-controls i.close:hover { background: var(--ctl-close-hover, #e81123); color: #fff; }
.win-body { background: var(--surface); color: var(--text); border-radius: var(--win-body-radius, 0); }

/* Fieldsets */
fieldset {
  background: var(--group-bg);
  border: 1px solid var(--group-border);
  border-radius: var(--group-radius, 0);
}
legend { color: var(--legend-text); background: transparent; }

/* Inputs & selects */
input[type="text"], input[type="number"], select {
  background: var(--field-bg);
  color: var(--field-text);
  border: var(--field-border);
  border-radius: var(--field-radius);
  box-shadow: var(--field-shadow);
}
input[type="text"]:focus, input[type="number"]:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--field-focus);
}
.field > label, .slider .head, .field .unit, .viz .toggles, .legend-row { color: var(--text-dim); }

/* Buttons */
button, .btn {
  background: var(--btn-bg);
  color: var(--btn-text);
  border: var(--btn-border);
  border-radius: var(--btn-radius);
  box-shadow: var(--btn-shadow);
}
button:hover, .btn:hover { background: var(--btn-hover-bg); }
button:active, .btn:active { box-shadow: var(--btn-active-shadow); transform: var(--btn-active-transform, none); }
button.primary, .btn.primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border: var(--btn-primary-border, var(--btn-border));
}
button.primary:hover, .btn.primary:hover { background: var(--btn-primary-hover, var(--btn-primary-bg)); filter: var(--btn-primary-hover-filter, none); }

/* Segmented toggle */
.seg button.active {
  background: var(--seg-active-bg);
  color: var(--seg-active-text);
  border: var(--seg-active-border, var(--btn-border));
  box-shadow: var(--seg-active-shadow, var(--btn-active-shadow));
}

/* Tabs */
.tab {
  background: var(--tab-bg);
  color: var(--tab-text);
  border: var(--tab-border);
  border-bottom: var(--tab-border-bottom, var(--tab-border));
  border-radius: var(--tab-radius);
}
.tab.active {
  background: var(--tab-active-bg);
  color: var(--tab-active-text);
  border-bottom: var(--tab-active-border-bottom, none);
}

/* Sliders (fully custom so the era reads through) */
input[type="range"] { -webkit-appearance: none; appearance: none; background: transparent; height: 20px; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track {
  height: var(--track-h); background: var(--track-bg);
  border: var(--track-border); border-radius: var(--track-radius);
}
input[type="range"]::-moz-range-track {
  height: var(--track-h); background: var(--track-bg);
  border: var(--track-border); border-radius: var(--track-radius);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: var(--thumb-w); height: var(--thumb-h);
  background: var(--thumb-bg); border: var(--thumb-border);
  border-radius: var(--thumb-radius);
  box-shadow: var(--thumb-shadow, none);
  margin-top: calc((var(--track-h) - var(--thumb-h)) / 2);
}
input[type="range"]::-moz-range-thumb {
  width: var(--thumb-w); height: var(--thumb-h);
  background: var(--thumb-bg); border: var(--thumb-border);
  border-radius: var(--thumb-radius);
  box-shadow: var(--thumb-shadow, none);
}

/* Results / formula / panels */
.results, .formula {
  background: var(--surface-2);
  border: 1px solid var(--panel-border);
  border-radius: var(--panel-radius, 0);
}
.result .val { color: var(--text); }
.formula .name { color: var(--text-dim); }
.formula b.hl { color: var(--accent); }

/* Tables */
table.grid th { background: var(--th-bg); color: var(--th-text); border-bottom: 2px solid var(--row-border); }
table.grid td { border-bottom: 1px solid var(--row-border); }
table.grid tbody tr:hover { background: var(--row-hover); }

/* Status bar */
.statusbar {
  background: var(--status-bg);
  color: var(--status-text);
  border-top: var(--status-border);
}
.statusbar .sb-cell { border-right: var(--status-cell-border, none); padding-right: 10px; }

/* Landing tiles */
.tile .win { transition: transform 120ms ease, box-shadow 120ms ease; }
.tile:not(.soon):hover .win { transform: var(--tile-hover-transform, translateY(-2px)); box-shadow: var(--tile-hover-shadow, var(--win-shadow)); }
.tile.soon .badge { background: var(--surface-2); border: 1px solid var(--panel-border); border-radius: var(--badge-radius, 2px); }

.footer { color: var(--text-dim); }

/* Scrollbars (WebKit) */
::-webkit-scrollbar { width: 16px; height: 16px; }
::-webkit-scrollbar-track { background: var(--sb-track); }
::-webkit-scrollbar-thumb { background: var(--sb-thumb); border: var(--sb-thumb-border); border-radius: var(--sb-radius, 0); }
::-webkit-scrollbar-thumb:hover { background: var(--sb-thumb-hover, var(--sb-thumb)); }
* { scrollbar-color: var(--sb-thumb) var(--sb-track); }


/* ============================================================================
 * DEFAULT TOKENS (fallback ≈ Windows 11) — overridden by each theme below
 * ========================================================================== */
:root {
  --font-ui: "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
  --font-mono: "Cascadia Mono", Consolas, ui-monospace, monospace;

  --desktop: linear-gradient(135deg,#dbe6f6 0%,#e9e4f5 50%,#d9ecf2 100%);
  --surface: #fbfbfd; --surface-2: #f3f4f8; --panel-border: #e4e6ee; --panel-radius: 6px;
  --text: #1b1d23; --text-dim: #5b5f6b; --accent: #0067c0; --on-accent: #fff; --link: #0067c0;

  --top-bg: rgba(252,252,253,.85); --top-text: #20232b; --top-border: 1px solid #e4e6ee;
  --top-shadow: 0 1px 0 rgba(0,0,0,.03); --brand-color: #0067c0;
  --top-link-hover: rgba(0,0,0,.06); --top-link-radius: 5px;
  --top-active-bg: #0067c0; --top-active-text: #fff;

  --win-bg: #fbfbfd; --win-border: 1px solid rgba(0,0,0,.08); --win-radius: 8px;
  --win-shadow: 0 10px 38px -12px rgba(20,30,55,.30), 0 2px 8px rgba(20,30,55,.08);
  --win-body-radius: 0 0 8px 8px;
  --title-bg: transparent; --title-fg: #1b1d23; --title-radius: 8px 8px 0 0;
  --title-border: 1px solid #eef0f5; --title-text-shadow: none;

  --ctl-bg: transparent; --ctl-fg: #4a4d57; --ctl-border: none; --ctl-radius: 5px; --ctl-shadow: none;
  --ctl-hover-bg: rgba(0,0,0,.07); --ctl-hover-fg: #1b1d23;

  --group-bg: transparent; --group-border: #e4e6ee; --group-radius: 6px; --legend-text: #5b5f6b;

  --field-bg: #fff; --field-text: #1b1d23; --field-border: 1px solid #c9ccd6; --field-radius: 5px;
  --field-shadow: none; --field-focus: 0 0 0 2px rgba(0,103,192,.30);

  --btn-bg: #fbfbfb; --btn-text: #1b1d23; --btn-border: 1px solid #c9ccd6; --btn-radius: 6px;
  --btn-shadow: 0 1px 1px rgba(0,0,0,.04); --btn-hover-bg: #f0f0f3; --btn-active-shadow: inset 0 1px 3px rgba(0,0,0,.12);
  --btn-primary-bg: #0067c0; --btn-primary-text: #fff; --btn-primary-border: 1px solid #005ba1; --btn-primary-hover: #0078da;

  --seg-active-bg: #0067c0; --seg-active-text: #fff; --seg-active-border: 1px solid #005ba1;

  --tab-bg: #eef0f5; --tab-text: #3a3d46; --tab-border: 1px solid #dfe1ea; --tab-radius: 6px 6px 0 0;
  --tab-active-bg: #fbfbfd; --tab-active-text: #0067c0;

  --track-h: 4px; --track-bg: #d4d7e0; --track-border: none; --track-radius: 2px;
  --thumb-w: 16px; --thumb-h: 16px; --thumb-bg: #0067c0; --thumb-border: 3px solid #fff;
  --thumb-radius: 50%; --thumb-shadow: 0 0 0 1px rgba(0,0,0,.15);

  --th-bg: #f3f4f8; --th-text: #2a2d35; --row-border: #e4e6ee; --row-hover: #f3f7fc;

  --status-bg: #f3f4f8; --status-text: #5b5f6b; --status-border: 1px solid #e4e6ee;

  --tile-hover-transform: translateY(-3px);
  --tile-hover-shadow: 0 16px 42px -14px rgba(20,30,55,.40);

  --sb-track: #eef0f5; --sb-thumb: #c3c7d2; --sb-thumb-hover: #aab0bf; --sb-radius: 8px;
  --sb-thumb-border: 4px solid transparent;

  --chart-line: #0067c0; --chart-fill: rgba(0,103,192,.16); --chart-grid: #e4e6ee;
  --chart-axis: #9aa0ad; --chart-text: #6b7280; --chart-acc: rgba(192,0,0,.85); --chart-jerk: rgba(0,150,80,.85);
}


/* ============================================================================
 * WINDOWS 2000 — classic silver, hard 3-D bevels, teal desktop
 * ========================================================================== */
html[data-theme="2000"] {
  --font-ui: Tahoma, "MS Sans Serif", Geneva, sans-serif;
  --font-mono: "Lucida Console", Consolas, monospace;
  font-size: 13px;

  --desktop: #3a6ea5;
  --surface: #d4d0c8; --surface-2: #ffffff; --panel-border: #808080; --panel-radius: 0;
  --text: #000; --text-dim: #2a2a2a; --accent: #0a246a; --link: #0a246a;

  --top-bg: #d4d0c8; --top-text: #000; --top-border: none;
  --top-shadow: inset 0 1px #fff, inset 0 -1px #808080, 0 1px 0 #404040;
  --brand-color: #0a246a; --top-link-hover: #b6d0f0; --top-link-radius: 0;
  --top-active-bg: #0a246a; --top-active-text: #fff;

  --win-bg: #d4d0c8; --win-radius: 0; --win-body-radius: 0;
  --win-border: 1px solid #000;
  --win-shadow: inset -1px -1px #808080, inset 1px 1px #fff, inset -2px -2px #404040, inset 2px 2px #dfdfdf;
  --title-bg: linear-gradient(90deg,#0a246a 0%,#a6caf0 100%);
  --title-fg: #fff; --title-radius: 0; --title-border: none; --title-text-shadow: none;

  --ctl-bg: #d4d0c8; --ctl-fg: #000; --ctl-radius: 0;
  --ctl-border: 1px solid #000;
  --ctl-shadow: inset -1px -1px #808080, inset 1px 1px #fff;
  --ctl-hover-bg: #d4d0c8; --ctl-hover-fg: #000; --ctl-close-hover: #d4d0c8;

  --group-bg: transparent; --group-border: #808080; --group-radius: 0; --legend-text: #000;

  --field-bg: #fff; --field-text: #000; --field-radius: 0;
  --field-border: 1px solid #808080;
  --field-shadow: inset 1px 1px #404040, inset -1px -1px #fff, inset 2px 2px #808080;
  --field-focus: inset 1px 1px #404040, inset -1px -1px #fff, inset 2px 2px #808080;

  --btn-bg: #d4d0c8; --btn-text: #000; --btn-radius: 0;
  --btn-border: 1px solid #000;
  --btn-shadow: inset -1px -1px #808080, inset 1px 1px #fff, inset -2px -2px #404040, inset 2px 2px #dfdfdf;
  --btn-hover-bg: #d4d0c8;
  --btn-active-shadow: inset 1px 1px #404040, inset -1px -1px #fff, inset 2px 2px #808080;
  --btn-primary-bg: #d4d0c8; --btn-primary-text: #000; --btn-primary-border: 2px solid #000; --btn-primary-hover: #d4d0c8;

  --seg-active-bg: #d4d0c8; --seg-active-text: #000;
  --seg-active-shadow: inset 1px 1px #404040, inset -1px -1px #fff, inset 2px 2px #808080;

  --tab-bg: #d4d0c8; --tab-text: #000; --tab-radius: 0;
  --tab-border: 1px solid #000;
  --tab-active-bg: #d4d0c8; --tab-active-text: #000;

  --track-h: 4px; --track-bg: #808080; --track-radius: 0;
  --track-border: 1px solid #404040;
  --thumb-w: 11px; --thumb-h: 21px; --thumb-bg: #d4d0c8; --thumb-radius: 0;
  --thumb-border: 1px solid #000;
  --thumb-shadow: inset -1px -1px #808080, inset 1px 1px #fff;

  --th-bg: #d4d0c8; --th-text: #000; --row-border: #808080; --row-hover: #b6d0f0;

  --status-bg: #d4d0c8; --status-text: #000;
  --status-border: 1px solid #fff;
  --status-cell-border: 1px solid #808080;

  --tile-hover-transform: none; --tile-hover-shadow: var(--win-shadow);

  --sb-track: #c0c0c0; --sb-thumb: #d4d0c8; --sb-thumb-hover: #d4d0c8; --sb-radius: 0;
  --sb-thumb-border: 1px solid #808080;

  --chart-line: #0a246a; --chart-fill: rgba(10,36,106,.14); --chart-grid: #b0aca4;
  --chart-axis: #000; --chart-text: #000; --chart-acc: #c00000; --chart-jerk: #008000;
}
html[data-theme="2000"] .win-titlebar { padding: 3px 3px 3px 6px; margin: 0; }
html[data-theme="2000"] .win-body { margin: 0; }
html[data-theme="2000"] .tabs { gap: 0; }
html[data-theme="2000"] .tab { margin-right: 2px; border-bottom: none; }
html[data-theme="2000"] .tab.active { position: relative; z-index: 2; }
html[data-theme="2000"] :focus-visible { outline: 1px dotted #000; outline-offset: -3px; }


/* ============================================================================
 * WINDOWS XP — Luna blue, rounded title bar, beige chrome
 * ========================================================================== */
html[data-theme="xp"] {
  --font-ui: Tahoma, "Franklin Gothic Medium", Verdana, sans-serif;
  --font-mono: "Lucida Console", Consolas, monospace;

  --desktop: linear-gradient(180deg,#6ea4e0 0%,#90b9e8 34%,#a9cf76 60%,#7aac4f 78%,#5e8f3c 100%);
  --surface: #ffffff; --surface-2: #ece9d8; --panel-border: #aca899; --panel-radius: 3px;
  --text: #000; --text-dim: #3a3a3a; --accent: #316ac5; --link: #0b3aa6;

  --top-bg: linear-gradient(180deg,#3168d5 0%,#2858c4 50%,#1f4fbf 100%);
  --top-text: #fff; --top-border: 1px solid #0c2f8a; --top-shadow: inset 0 1px rgba(255,255,255,.4);
  --brand-color: #fff; --top-link-hover: rgba(255,255,255,.22); --top-link-radius: 4px;
  --top-active-bg: rgba(255,255,255,.30); --top-active-text: #fff;

  --win-bg: #ece9d8; --win-radius: 8px 8px 4px 4px; --win-body-radius: 0 0 4px 4px;
  --win-border: 3px solid #0054e3; --win-shadow: 0 6px 22px -6px rgba(0,40,120,.45);
  --title-bg: linear-gradient(180deg,#0997ff 0%,#0053ee 9%,#0050ee 45%,#0556e6 85%,#0040d6 95%,#0a52e0 100%);
  --title-fg: #fff; --title-radius: 6px 6px 0 0; --title-border: none;
  --title-text-shadow: 1px 1px 1px rgba(0,0,40,.5);

  --ctl-bg: linear-gradient(180deg,#5a9bf0,#1c5fe0); --ctl-fg: #fff; --ctl-radius: 3px;
  --ctl-border: 1px solid #08308f; --ctl-shadow: inset 0 1px rgba(255,255,255,.5);
  --ctl-hover-bg: linear-gradient(180deg,#7ab0f5,#2f72e8); --ctl-hover-fg: #fff;
  --ctl-close-hover: linear-gradient(180deg,#f08a6a,#d13b18);

  --group-bg: transparent; --group-border: #aca899; --group-radius: 3px; --legend-text: #0b3aa6;

  --field-bg: #fff; --field-text: #000; --field-radius: 2px;
  --field-border: 1px solid #7f9db9; --field-shadow: inset 1px 1px #e0e0d0;
  --field-focus: 0 0 0 2px rgba(49,106,197,.35);

  --btn-bg: linear-gradient(180deg,#fdfdfb 0%,#f2efe0 48%,#e8e4d2 52%,#f4f1e3 100%);
  --btn-text: #000; --btn-radius: 3px; --btn-border: 1px solid #8a8772;
  --btn-shadow: inset 0 0 0 1px #fff, 0 1px 1px rgba(0,0,0,.10);
  --btn-hover-bg: linear-gradient(180deg,#fffefa 0%,#f6f2e6 48%,#efe9d8 52%,#fbf7ec 100%);
  --btn-active-shadow: inset 1px 1px 2px rgba(0,0,0,.25);
  --btn-primary-bg: linear-gradient(180deg,#fdfdfb 0%,#eef5e2 50%,#dcebc6 52%,#eef5e2 100%);
  --btn-primary-text: #14430f; --btn-primary-border: 1px solid #4e7d2f; --btn-primary-hover: linear-gradient(180deg,#fff,#e6f1d6);

  --seg-active-bg: linear-gradient(180deg,#dceaff,#9cc0f5); --seg-active-text: #0b2f7a;
  --seg-active-border: 1px solid #3b6fb5; --seg-active-shadow: inset 0 1px rgba(255,255,255,.6);

  --tab-bg: linear-gradient(180deg,#fbfaf4,#e7e3d2); --tab-text: #000; --tab-radius: 4px 4px 0 0;
  --tab-border: 1px solid #aca899;
  --tab-active-bg: #ece9d8; --tab-active-text: #0b3aa6; --tab-active-border-bottom: 1px solid #ece9d8;

  --track-h: 5px; --track-bg: linear-gradient(180deg,#c4c0ad,#e8e5d6); --track-radius: 3px;
  --track-border: 1px solid #8a8772;
  --thumb-w: 12px; --thumb-h: 20px; --thumb-radius: 3px;
  --thumb-bg: linear-gradient(180deg,#fdfdfb,#dcd8c6); --thumb-border: 1px solid #6e6b58;
  --thumb-shadow: inset 0 0 0 1px #fff;

  --th-bg: linear-gradient(180deg,#fbfaf4,#e2decd); --th-text: #0b3aa6; --row-border: #cfcbb8; --row-hover: #dcebfb;

  --status-bg: #ece9d8; --status-text: #000; --status-border: 1px solid #fff; --status-cell-border: 1px solid #aca899;

  --tile-hover-transform: translateY(-2px); --tile-hover-shadow: 0 10px 26px -8px rgba(0,40,120,.4);

  --sb-track: #e8e6d6; --sb-thumb: linear-gradient(90deg,#dfeefb,#9cc0f5); --sb-thumb-hover: linear-gradient(90deg,#eaf3ff,#aacbf8);
  --sb-radius: 2px; --sb-thumb-border: 1px solid #5a86c4;

  --chart-line: #0b54d6; --chart-fill: rgba(11,84,214,.15); --chart-grid: #cfcbb8;
  --chart-axis: #555; --chart-text: #444; --chart-acc: #c8281e; --chart-jerk: #2f7d2f;
}


/* ============================================================================
 * WINDOWS 7 — Aero glass, translucency, glossy buttons
 * ========================================================================== */
html[data-theme="7"] {
  --font-ui: "Segoe UI", "Frutiger", Tahoma, sans-serif;
  --font-mono: Consolas, "Lucida Console", monospace;

  --desktop: radial-gradient(120% 100% at 50% 0%, #2a6db5 0%, #1b4a86 45%, #0f2c54 100%);
  --surface: #ffffff; --surface-2: #eef4fb; --panel-border: #c3d4e8; --panel-radius: 4px;
  --text: #1a1a1a; --text-dim: #3d4b5c; --accent: #2c628b; --link: #1667b3;

  --top-bg: linear-gradient(180deg, rgba(240,247,255,.92), rgba(206,227,247,.88)); --top-text: #14334f;
  --top-border: 1px solid rgba(255,255,255,.7); --top-shadow: 0 1px 6px rgba(0,0,0,.25);
  --brand-color: #14507f; --top-link-hover: rgba(255,255,255,.6); --top-link-radius: 4px;
  --top-active-bg: rgba(255,255,255,.85); --top-active-text: #14507f;

  --win-bg: rgba(245,250,255,.55); --win-radius: 7px 7px 5px 5px; --win-body-radius: 0 0 5px 5px;
  --win-border: 1px solid rgba(255,255,255,.55);
  --win-shadow: 0 0 0 1px rgba(60,110,170,.35), 0 12px 36px -8px rgba(0,20,50,.5);
  --title-bg: linear-gradient(180deg, rgba(255,255,255,.65) 0%, rgba(220,235,250,.5) 48%, rgba(200,222,245,.45) 100%);
  --title-fg: #102a44; --title-radius: 6px 6px 0 0; --title-border: 1px solid rgba(255,255,255,.6);
  --title-text-shadow: 0 1px 2px rgba(255,255,255,.8);

  --ctl-bg: linear-gradient(180deg, rgba(255,255,255,.7), rgba(225,238,250,.5)); --ctl-fg: #14334f;
  --ctl-radius: 4px; --ctl-border: 1px solid rgba(120,160,200,.7); --ctl-shadow: inset 0 1px rgba(255,255,255,.85);
  --ctl-hover-bg: linear-gradient(180deg,#eaf6ff,#cbe6fb); --ctl-hover-fg: #0b2c4a;
  --ctl-close-hover: linear-gradient(180deg,#f6a98f,#d8442a);

  --group-bg: rgba(255,255,255,.45); --group-border: #c3d4e8; --group-radius: 4px; --legend-text: #14507f;

  --field-bg: rgba(255,255,255,.92); --field-text: #1a1a1a; --field-radius: 3px;
  --field-border: 1px solid #9db8d4; --field-shadow: inset 0 1px 2px rgba(0,30,70,.12);
  --field-focus: 0 0 0 3px rgba(60,127,177,.4), inset 0 1px 2px rgba(0,30,70,.1);

  --btn-bg: linear-gradient(180deg,#f6fbff 0%,#e3f0fb 48%,#d3e6f7 52%,#eaf4fd 100%);
  --btn-text: #11334f; --btn-radius: 4px; --btn-border: 1px solid #8fb2d6;
  --btn-shadow: inset 0 1px rgba(255,255,255,.9), 0 1px 2px rgba(0,20,50,.15);
  --btn-hover-bg: linear-gradient(180deg,#fbfeff 0%,#eaf6ff 48%,#d6ecff 52%,#f0f9ff 100%);
  --btn-active-shadow: inset 0 2px 4px rgba(0,30,70,.25);
  --btn-primary-bg: linear-gradient(180deg,#eaf6ff 0%,#bfe0fb 50%,#9ecdf3 52%,#cfeafe 100%);
  --btn-primary-text: #0b2c4a; --btn-primary-border: 1px solid #4f88bd; --btn-primary-hover: linear-gradient(180deg,#f3fbff,#cdebff);

  --seg-active-bg: linear-gradient(180deg,#eaf6ff,#b9dcf7); --seg-active-text: #0b2c4a;
  --seg-active-border: 1px solid #5a93c6; --seg-active-shadow: inset 0 1px rgba(255,255,255,.85);

  --tab-bg: linear-gradient(180deg, rgba(255,255,255,.6), rgba(214,232,248,.5)); --tab-text: #14334f;
  --tab-radius: 5px 5px 0 0; --tab-border: 1px solid rgba(150,180,210,.7);
  --tab-active-bg: rgba(255,255,255,.85); --tab-active-text: #14507f; --tab-active-border-bottom: 1px solid rgba(255,255,255,.85);

  --track-h: 6px; --track-bg: linear-gradient(180deg,#cdddef,#eaf3fb); --track-radius: 3px;
  --track-border: 1px solid #9db8d4;
  --thumb-w: 14px; --thumb-h: 20px; --thumb-radius: 4px;
  --thumb-bg: linear-gradient(180deg,#fbfeff,#cfe4f7); --thumb-border: 1px solid #5f8fbe;
  --thumb-shadow: inset 0 1px rgba(255,255,255,.9), 0 1px 2px rgba(0,20,50,.2);

  --th-bg: linear-gradient(180deg, rgba(255,255,255,.7), rgba(220,236,250,.6)); --th-text: #14507f;
  --row-border: #d3e0ee; --row-hover: rgba(207,234,254,.6);

  --status-bg: rgba(240,247,255,.7); --status-text: #14334f; --status-border: 1px solid rgba(255,255,255,.7);
  --status-cell-border: 1px solid rgba(150,180,210,.5);

  --tile-hover-transform: translateY(-2px); --tile-hover-shadow: 0 14px 34px -8px rgba(0,20,50,.55);

  --sb-track: rgba(220,235,250,.5); --sb-thumb: linear-gradient(90deg,#dcecfb,#9ecdf3);
  --sb-thumb-hover: linear-gradient(90deg,#eaf6ff,#b3d9f6); --sb-radius: 4px; --sb-thumb-border: 1px solid #6f9ecb;

  --chart-line: #1f6fb2; --chart-fill: rgba(31,111,178,.16); --chart-grid: #d3e0ee;
  --chart-axis: #5a6b7c; --chart-text: #3d4b5c; --chart-acc: #c43c2e; --chart-jerk: #2f8d50;
}
html[data-theme="7"] .win, html[data-theme="7"] .win-titlebar { -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4); }
html[data-theme="7"] .topbar { -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3); }


/* ============================================================================
 * WINDOWS 10 — flat, square, single accent blue
 * ========================================================================== */
html[data-theme="10"] {
  --font-ui: "Segoe UI", system-ui, sans-serif;
  --font-mono: Consolas, ui-monospace, monospace;

  --desktop: linear-gradient(135deg,#0b1d36 0%,#12325c 55%,#0a1626 100%);
  --surface: #ffffff; --surface-2: #f2f2f2; --panel-border: #d6d6d6; --panel-radius: 0;
  --text: #1f1f1f; --text-dim: #4c4c4c; --accent: #0078d4; --link: #0067b8;

  --top-bg: #ffffff; --top-text: #1f1f1f; --top-border: 1px solid #d6d6d6; --top-shadow: none;
  --brand-color: #0078d4; --top-link-hover: #eaeaea; --top-link-radius: 0;
  --top-active-bg: #0078d4; --top-active-text: #fff;

  --win-bg: #ffffff; --win-radius: 0; --win-body-radius: 0;
  --win-border: 1px solid #cccccc; --win-shadow: 0 2px 10px rgba(0,0,0,.14);
  --title-bg: #ffffff; --title-fg: #1f1f1f; --title-radius: 0; --title-border: 1px solid #eaeaea; --title-text-shadow: none;

  --ctl-bg: transparent; --ctl-fg: #1f1f1f; --ctl-radius: 0; --ctl-border: none; --ctl-shadow: none;
  --ctl-hover-bg: #e5e5e5; --ctl-hover-fg: #000;

  --group-bg: transparent; --group-border: #d6d6d6; --group-radius: 0; --legend-text: #0067b8;

  --field-bg: #fff; --field-text: #1f1f1f; --field-radius: 0;
  --field-border: 1px solid #767676; --field-shadow: none;
  --field-focus: 0 0 0 1px #0078d4;

  --btn-bg: #e1e1e1; --btn-text: #1f1f1f; --btn-radius: 0; --btn-border: 1px solid #adadad;
  --btn-shadow: none; --btn-hover-bg: #e5f1fb;
  --btn-active-shadow: inset 0 0 0 1px #005a9e;
  --btn-primary-bg: #0078d4; --btn-primary-text: #fff; --btn-primary-border: 1px solid #005a9e; --btn-primary-hover: #106ebe;

  --seg-active-bg: #0078d4; --seg-active-text: #fff; --seg-active-border: 1px solid #005a9e;

  --tab-bg: #f2f2f2; --tab-text: #1f1f1f; --tab-radius: 0; --tab-border: 1px solid #d6d6d6;
  --tab-active-bg: #fff; --tab-active-text: #0067b8;

  --track-h: 4px; --track-bg: #868686; --track-radius: 0; --track-border: none;
  --thumb-w: 8px; --thumb-h: 22px; --thumb-bg: #0078d4; --thumb-radius: 0; --thumb-border: none;
  --thumb-shadow: none;

  --th-bg: #f2f2f2; --th-text: #1f1f1f; --row-border: #e0e0e0; --row-hover: #f3f9fd;

  --status-bg: #f2f2f2; --status-text: #4c4c4c; --status-border: 1px solid #d6d6d6; --status-cell-border: 1px solid #d6d6d6;

  --tile-hover-transform: none; --tile-hover-shadow: 0 0 0 2px #0078d4, 0 2px 10px rgba(0,0,0,.14);

  --sb-track: #f0f0f0; --sb-thumb: #c2c3c9; --sb-thumb-hover: #a6a7ad; --sb-radius: 0; --sb-thumb-border: 4px solid transparent;

  --chart-line: #0078d4; --chart-fill: rgba(0,120,212,.14); --chart-grid: #e0e0e0;
  --chart-axis: #8a8a8a; --chart-text: #5a5a5a; --chart-acc: #c4262e; --chart-jerk: #107c41;
}


/* ============================================================================
 * WINDOWS 11 — rounded, mica, soft shadows  (also the :root default)
 * ========================================================================== */
html[data-theme="11"] { /* tokens already match :root defaults; explicit for clarity */
  --desktop: linear-gradient(135deg,#1453b5 0%,#2f7bd6 30%,#7bc7e8 60%,#b6a9e6 100%);
}
html[data-theme="11"] .win-titlebar { padding: 7px 8px 7px 12px; }


/* ============================================================================
 * DARK — modern dark (Win11-dark / editor vibe)
 * ========================================================================== */
html[data-theme="dark"] {
  --font-ui: "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
  --font-mono: "Cascadia Mono", Consolas, ui-monospace, monospace;

  --desktop: radial-gradient(140% 120% at 50% -10%, #1a2030 0%, #12151c 55%, #0c0e13 100%);
  --surface: #1e2027; --surface-2: #262932; --panel-border: #33363f; --panel-radius: 8px;
  --text: #e7e8ec; --text-dim: #9aa0ab; --accent: #4cc2ff; --on-accent: #06243a; --link: #4cc2ff;

  --top-bg: rgba(24,26,32,.85); --top-text: #e7e8ec; --top-border: 1px solid #2c2f38; --top-shadow: 0 1px 0 rgba(0,0,0,.3);
  --brand-color: #4cc2ff; --top-link-hover: rgba(255,255,255,.08); --top-link-radius: 5px;
  --top-active-bg: #2563a8; --top-active-text: #fff;

  --win-bg: #1e2027; --win-radius: 8px; --win-body-radius: 0 0 8px 8px;
  --win-border: 1px solid #2e313a; --win-shadow: 0 14px 40px -12px rgba(0,0,0,.7);
  --title-bg: #15171d; --title-fg: #e7e8ec; --title-radius: 8px 8px 0 0; --title-border: 1px solid #2a2d35; --title-text-shadow: none;

  --ctl-bg: transparent; --ctl-fg: #c6cad3; --ctl-radius: 5px; --ctl-border: none; --ctl-shadow: none;
  --ctl-hover-bg: rgba(255,255,255,.1); --ctl-hover-fg: #fff;

  --group-bg: #1a1c22; --group-border: #2e313a; --group-radius: 8px; --legend-text: #9aa0ab;

  --field-bg: #14161b; --field-text: #e7e8ec; --field-radius: 5px; --field-border: 1px solid #3a3d47;
  --field-shadow: none; --field-focus: 0 0 0 2px rgba(76,194,255,.35);

  --btn-bg: #2d3039; --btn-text: #e7e8ec; --btn-radius: 6px; --btn-border: 1px solid #3a3d47;
  --btn-shadow: none; --btn-hover-bg: #363a45; --btn-active-shadow: inset 0 1px 3px rgba(0,0,0,.5);
  --btn-primary-bg: #2563a8; --btn-primary-text: #fff; --btn-primary-border: 1px solid #2f78c8; --btn-primary-hover: #2c72c2;

  --seg-active-bg: #2563a8; --seg-active-text: #fff; --seg-active-border: 1px solid #2f78c8;

  --tab-bg: #20232b; --tab-text: #c6cad3; --tab-radius: 6px 6px 0 0; --tab-border: 1px solid #2e313a;
  --tab-active-bg: #1e2027; --tab-active-text: #4cc2ff;

  --track-h: 4px; --track-bg: #3a3d47; --track-radius: 2px; --track-border: none;
  --thumb-w: 16px; --thumb-h: 16px; --thumb-bg: #4cc2ff; --thumb-radius: 50%; --thumb-border: 3px solid #1e2027;
  --thumb-shadow: 0 0 0 1px rgba(0,0,0,.4);

  --th-bg: #262932; --th-text: #e7e8ec; --row-border: #2e313a; --row-hover: #23262f;

  --status-bg: #181a20; --status-text: #9aa0ab; --status-border: 1px solid #2a2d35; --status-cell-border: 1px solid #2e313a;

  --tile-hover-transform: translateY(-3px); --tile-hover-shadow: 0 18px 46px -14px rgba(0,0,0,.8);

  --sb-track: #15171d; --sb-thumb: #3a3d47; --sb-thumb-hover: #4a4e5a; --sb-radius: 8px; --sb-thumb-border: 4px solid transparent;

  --chart-line: #4cc2ff; --chart-fill: rgba(76,194,255,.16); --chart-grid: #2e313a;
  --chart-axis: #5b606b; --chart-text: #9aa0ab; --chart-acc: #ff6b6b; --chart-jerk: #4ade80;
}
html[data-theme="dark"] .win-titlebar { padding: 7px 8px 7px 12px; }