/* ============================================================================
   MISSION CONTROL THEMES — v2 "Seven Identities"
   Each theme is a complete visual identity: own palette, own signature font,
   own background composition, own glass treatment, own glow language.
   Drop-in replacement for /static/themes.css.

   Contract (do not break):
   - html[data-theme="<name>"] sets the FULL variable set templates consume.
   - body font rule stays at specificity (0,1,2) with NO !important, so
     typography.css data-tf 2..8 (loaded later, same specificity) still wins
     when the user picks a font override. data-tf=1 = theme's own type.
   - Theme names are fixed: midnight obsidian void abyss umbra onyx terminal.
   - Square architecture: structural surfaces use border-radius: 0.
   ============================================================================ */

/* ============ MIDNIGHT — "Flagship Command" =================================
   Deep navy ops deck. Electric-blue LED glow. JetBrains Mono.
   Sharp, confident, the default. */
html[data-theme="midnight"] {
  --bg: #04060c; --panel: #0a0f1c; --card: #0b1322;
  --fg: #c3d0e8; --fg2: #eef3ff; --dim: #5f7396; --mute: #42546f;
  --line: #16203a; --acc: #4d8dff;
  --red: #ff5c6c; --amber: #ffb454; --blue: #5ec8ff;
  --glass: rgba(10,16,30,.60); --glass-strong: rgba(8,13,25,.78);
  --glass-line: #1a2540; --glass-shadow: 0 10px 36px rgba(0,0,0,.6);
  --font: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-head: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-ui: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --tt-head: none; --ls-head: 0; --fw-head: 700;
  --ls-body: -.005em; --lh-body: 1.5;
}
html[data-theme="midnight"] body {
  font-family: var(--font); letter-spacing: 0;
  line-height: var(--lh-body); color: var(--fg);
  background:
    radial-gradient(1000px 480px at 12% -10%, color-mix(in srgb, var(--acc) 13%, transparent), transparent 60%),
    radial-gradient(800px 420px at 105% 5%, color-mix(in srgb, var(--blue) 9%, transparent), transparent 55%),
    linear-gradient(rgba(77,141,255,.028) 1px, transparent 1px),
    var(--bg);
  background-size: auto, auto, 44px 44px, auto;
  background-attachment: fixed;
}
html[data-theme="midnight"] h1, html[data-theme="midnight"] h2 {
  font-family: var(--font-head); text-transform: var(--tt-head);
  letter-spacing: 0; font-weight: var(--fw-head); color: var(--fg2);
  text-shadow: 0 0 18px color-mix(in srgb, var(--acc) 45%, transparent);
}
html[data-theme="midnight"] .top, html[data-theme="midnight"] .side {
  background: var(--glass);
  backdrop-filter: saturate(1.4) blur(16px);
  -webkit-backdrop-filter: saturate(1.4) blur(16px);
  border-color: var(--glass-line);
  box-shadow: 0 0 30px rgba(77,141,255,.16) inset, 0 10px 36px rgba(0,0,0,.55);
}
html[data-theme="midnight"] .card, html[data-theme="midnight"] .login,
html[data-theme="midnight"] .chat-pop, html[data-theme="midnight"] .ver-toast {
  background: var(--glass);
  backdrop-filter: saturate(1.35) blur(14px);
  -webkit-backdrop-filter: saturate(1.35) blur(14px);
  border: 1px solid var(--glass-line); border-radius: 0; color: var(--fg);
  box-shadow: var(--glass-shadow);
}
html[data-theme="midnight"] .ver-toast {
  border-left: 3px solid var(--acc);
  box-shadow: 0 0 24px color-mix(in srgb, var(--acc) 35%, transparent), var(--glass-shadow);
}
html[data-theme="midnight"] .theme-btn {
  background: color-mix(in srgb, var(--acc) 9%, transparent);
  border: 1px solid var(--glass-line); border-radius: 0; color: var(--fg);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: box-shadow .18s ease, border-color .18s ease, color .18s ease;
}
html[data-theme="midnight"] .theme-btn:hover {
  border-color: var(--acc); color: var(--fg2);
  box-shadow: 0 0 16px color-mix(in srgb, var(--acc) 55%, transparent);
}
html[data-theme="midnight"] .nav-item { border-radius: 0; border-left: 2px solid transparent; }
html[data-theme="midnight"] table.b th {
  color: var(--dim); border-bottom: 2px solid var(--line);
  text-transform: uppercase; letter-spacing: 0; font-size: 11px;
}
html[data-theme="midnight"] table.b td { border-bottom: 1px solid var(--line); }
html[data-theme="midnight"] .meta, html[data-theme="midnight"] .det { color: var(--dim); }
html[data-theme="midnight"] .pill { border-radius: 0; font-weight: 700; letter-spacing: 0; }
html[data-theme="midnight"] .pill.ok  { color: var(--acc);  border: 1px solid var(--acc);  background: color-mix(in srgb, var(--acc) 13%, transparent); box-shadow: 0 0 10px color-mix(in srgb, var(--acc) 25%, transparent); }
html[data-theme="midnight"] .pill.blk { color: var(--red);  border: 1px solid var(--red);  background: color-mix(in srgb, var(--red) 13%, transparent); }
html[data-theme="midnight"] .pill.run { color: var(--amber); border: 1px solid var(--amber); background: color-mix(in srgb, var(--amber) 13%, transparent); }
html[data-theme="midnight"] .pill.que { color: var(--blue);  border: 1px solid var(--blue);  background: color-mix(in srgb, var(--blue) 13%, transparent); }
html[data-theme="midnight"] ::-webkit-scrollbar { width: 9px; height: 9px; }
html[data-theme="midnight"] ::-webkit-scrollbar-track { background: transparent; }
html[data-theme="midnight"] ::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--acc) 32%, transparent);
  border: 2px solid var(--bg); border-radius: 0;
}
html[data-theme="midnight"] ::-webkit-scrollbar-thumb:hover { background: var(--acc); }
html[data-theme="midnight"] .side, html[data-theme="midnight"] .main { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--acc) 45%, transparent) transparent; }
html[data-theme="midnight"] ::selection { background: color-mix(in srgb, var(--acc) 40%, transparent); color: var(--fg2); }

/* ============ OBSIDIAN — "Monochrome Brutalist" ===============================
   Near-black, silver-grey, zero chroma. Space Mono. Stark uppercase headers,
   hairline borders, inverted active row. No glow — just contrast. */
html[data-theme="obsidian"] {
  --bg: #010102; --panel: #09090b; --card: #0c0c0f;
  --fg: #c9c9d1; --fg2: #f2f2f5; --dim: #63636e; --mute: #3d3d45;
  --line: #1b1b20; --acc: #c9c9d1;
  --red: #ff6b6b; --amber: #e8c07d; --blue: #8fb8d8;
  --glass: rgba(10,10,12,.66); --glass-strong: rgba(6,6,8,.82);
  --glass-line: #232329; --glass-shadow: 0 10px 30px rgba(0,0,0,.65);
  --font: "Space Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-head: "Space Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-ui: "Space Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --tt-head: uppercase; --ls-head: 0; --fw-head: 700;
  --ls-body: 0; --lh-body: 1.55;
}
html[data-theme="obsidian"] body {
  font-family: var(--font); letter-spacing: 0;
  line-height: var(--lh-body); color: var(--fg);
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), transparent 220px),
    var(--bg);
  background-attachment: fixed;
}
html[data-theme="obsidian"] h1, html[data-theme="obsidian"] h2 {
  font-family: var(--font-head); text-transform: var(--tt-head);
  letter-spacing: 0; font-weight: var(--fw-head); color: var(--fg2);
}
html[data-theme="obsidian"] .top, html[data-theme="obsidian"] .side {
  background: var(--glass);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-color: var(--glass-line);
  box-shadow: none;
}
html[data-theme="obsidian"] .card, html[data-theme="obsidian"] .login,
html[data-theme="obsidian"] .chat-pop, html[data-theme="obsidian"] .ver-toast {
  background: var(--glass);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--glass-line); border-radius: 0; color: var(--fg);
  box-shadow: var(--glass-shadow);
}
html[data-theme="obsidian"] .ver-toast { border-left: 3px solid var(--fg2); }
html[data-theme="obsidian"] .theme-btn {
  background: transparent; border: 1px solid var(--glass-line);
  border-radius: 0; color: var(--fg);
  transition: background .15s ease, color .15s ease;
}
html[data-theme="obsidian"] .theme-btn:hover {
  background: var(--fg); color: #000; border-color: var(--fg);
}
html[data-theme="obsidian"] .nav-item { border-radius: 0; }
html[data-theme="obsidian"] table.b th {
  color: var(--fg2); border-bottom: 2px solid var(--fg2);
  text-transform: uppercase; letter-spacing: 0; font-size: 11px;
}
html[data-theme="obsidian"] table.b td { border-bottom: 1px solid var(--line); }
html[data-theme="obsidian"] .meta, html[data-theme="obsidian"] .det { color: var(--dim); }
html[data-theme="obsidian"] .pill { border-radius: 0; font-weight: 700; letter-spacing: 0; text-transform: uppercase; font-size: 10px; }
html[data-theme="obsidian"] .pill.ok  { color: var(--fg2); border: 1px solid var(--fg2); background: transparent; }
html[data-theme="obsidian"] .pill.blk { color: var(--red); border: 1px solid var(--red); background: transparent; }
html[data-theme="obsidian"] .pill.run { color: var(--amber); border: 1px solid var(--amber); background: transparent; }
html[data-theme="obsidian"] .pill.que { color: var(--blue); border: 1px solid var(--blue); background: transparent; }
html[data-theme="obsidian"] ::-webkit-scrollbar { width: 8px; height: 8px; }
html[data-theme="obsidian"] ::-webkit-scrollbar-track { background: transparent; }
html[data-theme="obsidian"] ::-webkit-scrollbar-thumb { background: #2c2c33; border-radius: 0; }
html[data-theme="obsidian"] ::-webkit-scrollbar-thumb:hover { background: #4a4a55; }
html[data-theme="obsidian"] .side, html[data-theme="obsidian"] .main { scrollbar-width: thin; scrollbar-color: #2c2c33 transparent; }
html[data-theme="obsidian"] ::selection { background: var(--fg2); color: #000; }

/* ============ VOID — "Nebula Dream" ==========================================
   Deep violet space. Neon purple + magenta. Victor Mono with violet glow.
   Dreamy heavy-blur glass, nebula background, soft luminous edges. */
html[data-theme="void"] {
  --bg: #05030e; --panel: #0d0722; --card: #100a28;
  --fg: #cfbaf2; --fg2: #f2e9ff; --dim: #6f5aa8; --mute: #4c3f7c;
  --line: #1d1440; --acc: #b07cff;
  --red: #ff5f9e; --amber: #ffc46b; --blue: #7fd7ff;
  --glass: rgba(16,10,40,.55); --glass-strong: rgba(12,8,32,.75);
  --glass-line: #2a1d5e; --glass-shadow: 0 12px 44px rgba(0,0,0,.6);
  --font: "Victor Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-head: "Victor Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-ui: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --tt-head: none; --ls-head: 0; --fw-head: 600;
  --ls-body: .01em; --lh-body: 1.6;
}
html[data-theme="void"] body {
  font-family: var(--font); letter-spacing: 0;
  line-height: var(--lh-body); color: var(--fg);
  background:
    radial-gradient(900px 600px at 85% 110%, color-mix(in srgb, var(--red) 10%, transparent), transparent 60%),
    radial-gradient(1100px 550px at 8% -12%, color-mix(in srgb, var(--acc) 15%, transparent), transparent 62%),
    radial-gradient(700px 500px at 60% 45%, color-mix(in srgb, var(--acc) 6%, transparent), transparent 65%),
    var(--bg);
  background-attachment: fixed;
}
html[data-theme="void"] h1, html[data-theme="void"] h2 {
  font-family: var(--font-head); text-transform: var(--tt-head);
  letter-spacing: 0; font-weight: var(--fw-head); color: var(--fg2);
  text-shadow: 0 0 22px color-mix(in srgb, var(--acc) 65%, transparent), 0 0 60px color-mix(in srgb, var(--red) 30%, transparent);
}
html[data-theme="void"] .top, html[data-theme="void"] .side {
  background: var(--glass);
  backdrop-filter: saturate(1.6) blur(20px);
  -webkit-backdrop-filter: saturate(1.6) blur(20px);
  border-color: var(--glass-line);
  box-shadow: 0 0 34px rgba(176,124,255,.20) inset, 0 12px 44px rgba(0,0,0,.55);
}
html[data-theme="void"] .card, html[data-theme="void"] .login,
html[data-theme="void"] .chat-pop, html[data-theme="void"] .ver-toast {
  background: var(--glass);
  backdrop-filter: saturate(1.5) blur(18px);
  -webkit-backdrop-filter: saturate(1.5) blur(18px);
  border: 1px solid var(--glass-line); border-radius: 0; color: var(--fg);
  box-shadow: var(--glass-shadow), 0 0 22px color-mix(in srgb, var(--acc) 12%, transparent);
}
html[data-theme="void"] .ver-toast {
  border-left: 3px solid var(--acc);
  box-shadow: 0 0 30px color-mix(in srgb, var(--acc) 45%, transparent), var(--glass-shadow);
}
html[data-theme="void"] .theme-btn {
  background: color-mix(in srgb, var(--acc) 10%, transparent);
  border: 1px solid var(--glass-line); border-radius: 0; color: var(--fg);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: box-shadow .2s ease, border-color .2s ease, color .2s ease;
}
html[data-theme="void"] .theme-btn:hover {
  border-color: var(--acc); color: var(--fg2);
  box-shadow: 0 0 20px color-mix(in srgb, var(--acc) 60%, transparent), 0 0 44px color-mix(in srgb, var(--red) 25%, transparent);
}
html[data-theme="void"] .nav-item { border-radius: 0; }
html[data-theme="void"] table.b th {
  color: var(--acc); border-bottom: 2px solid var(--line);
  letter-spacing: 0; font-size: 11px;
  text-shadow: 0 0 12px color-mix(in srgb, var(--acc) 50%, transparent);
}
html[data-theme="void"] table.b td { border-bottom: 1px solid var(--line); }
html[data-theme="void"] .meta, html[data-theme="void"] .det { color: var(--dim); }
html[data-theme="void"] .pill { border-radius: 0; font-weight: 700; letter-spacing: 0; }
html[data-theme="void"] .pill.ok  { color: var(--acc); border: 1px solid var(--acc); background: color-mix(in srgb, var(--acc) 13%, transparent); box-shadow: 0 0 12px color-mix(in srgb, var(--acc) 30%, transparent); }
html[data-theme="void"] .pill.blk { color: var(--red); border: 1px solid var(--red); background: color-mix(in srgb, var(--red) 13%, transparent); box-shadow: 0 0 12px color-mix(in srgb, var(--red) 30%, transparent); }
html[data-theme="void"] .pill.run { color: var(--amber); border: 1px solid var(--amber); background: color-mix(in srgb, var(--amber) 13%, transparent); }
html[data-theme="void"] .pill.que { color: var(--blue); border: 1px solid var(--blue); background: color-mix(in srgb, var(--blue) 13%, transparent); }
html[data-theme="void"] ::-webkit-scrollbar { width: 9px; height: 9px; }
html[data-theme="void"] ::-webkit-scrollbar-track { background: transparent; }
html[data-theme="void"] ::-webkit-scrollbar-thumb {
  background: linear-gradient(color-mix(in srgb, var(--acc) 55%, transparent), color-mix(in srgb, var(--red) 45%, transparent));
  border-radius: 0;
}
html[data-theme="void"] ::-webkit-scrollbar-thumb:hover { background: var(--acc); }
html[data-theme="void"] .side, html[data-theme="void"] .main { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--acc) 50%, transparent) transparent; }
html[data-theme="void"] ::selection { background: color-mix(in srgb, var(--acc) 45%, transparent); color: var(--fg2); }

/* ============ ABYSS — "Bioluminescent Depth" =================================
   Deep teal ocean trench. Cyan bioluminescence. IBM Plex Mono.
   Light falls from above; the glow lives in the deep. */
html[data-theme="abyss"] {
  --bg: #01090b; --panel: #05181d; --card: #072026;
  --fg: #a9d9de; --fg2: #e2fafc; --dim: #4f838b; --mute: #35606a;
  --line: #0e2c33; --acc: #22c7c0;
  --red: #ff6b6b; --amber: #ffce6b; --blue: #4fd8ff;
  --glass: rgba(6,26,32,.60); --glass-strong: rgba(4,20,25,.78);
  --glass-line: #144049; --glass-shadow: 0 10px 36px rgba(0,0,0,.6);
  --font: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-head: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-ui: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --tt-head: none; --ls-head: 0; --fw-head: 600;
  --ls-body: 0; --lh-body: 1.55;
}
html[data-theme="abyss"] body {
  font-family: var(--font); letter-spacing: 0;
  line-height: var(--lh-body); color: var(--fg);
  background:
    radial-gradient(1200px 500px at 50% -15%, color-mix(in srgb, var(--acc) 11%, transparent), transparent 60%),
    linear-gradient(180deg, color-mix(in srgb, var(--acc) 5%, transparent), transparent 40%),
    radial-gradient(700px 700px at 90% 100%, color-mix(in srgb, var(--blue) 7%, transparent), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}
html[data-theme="abyss"] h1, html[data-theme="abyss"] h2 {
  font-family: var(--font-head); text-transform: var(--tt-head);
  letter-spacing: 0; font-weight: var(--fw-head); color: var(--fg2);
  text-shadow: 0 0 16px color-mix(in srgb, var(--acc) 55%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--acc) 25%, transparent);
  padding-bottom: 6px;
}
html[data-theme="abyss"] .top, html[data-theme="abyss"] .side {
  background: var(--glass);
  backdrop-filter: saturate(1.45) blur(15px);
  -webkit-backdrop-filter: saturate(1.45) blur(15px);
  border-color: var(--glass-line);
  box-shadow: 0 0 28px rgba(34,199,192,.15) inset, 0 10px 36px rgba(0,0,0,.55);
}
html[data-theme="abyss"] .card, html[data-theme="abyss"] .login,
html[data-theme="abyss"] .chat-pop, html[data-theme="abyss"] .ver-toast {
  background: var(--glass);
  backdrop-filter: saturate(1.35) blur(13px);
  -webkit-backdrop-filter: saturate(1.35) blur(13px);
  border: 1px solid var(--glass-line); border-radius: 0; color: var(--fg);
  box-shadow: var(--glass-shadow);
}
html[data-theme="abyss"] .ver-toast {
  border-left: 3px solid var(--acc);
  box-shadow: 0 0 24px color-mix(in srgb, var(--acc) 40%, transparent), var(--glass-shadow);
}
html[data-theme="abyss"] .theme-btn {
  background: color-mix(in srgb, var(--acc) 8%, transparent);
  border: 1px solid var(--glass-line); border-radius: 0; color: var(--fg);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: box-shadow .18s ease, border-color .18s ease, color .18s ease;
}
html[data-theme="abyss"] .theme-btn:hover {
  border-color: var(--acc); color: var(--fg2);
  box-shadow: 0 0 16px color-mix(in srgb, var(--acc) 55%, transparent);
}
html[data-theme="abyss"] .nav-item { border-radius: 0; border-bottom: 1px solid transparent; }
html[data-theme="abyss"] table.b th {
  color: var(--acc); border-bottom: 2px solid var(--line);
  letter-spacing: 0; font-size: 11px;
}
html[data-theme="abyss"] table.b td { border-bottom: 1px solid var(--line); }
html[data-theme="abyss"] .meta, html[data-theme="abyss"] .det { color: var(--dim); }
html[data-theme="abyss"] .pill { border-radius: 0; font-weight: 700; letter-spacing: 0; }
html[data-theme="abyss"] .pill.ok  { color: var(--acc); border: 1px solid var(--acc); background: color-mix(in srgb, var(--acc) 13%, transparent); box-shadow: 0 0 10px color-mix(in srgb, var(--acc) 28%, transparent); }
html[data-theme="abyss"] .pill.blk { color: var(--red); border: 1px solid var(--red); background: color-mix(in srgb, var(--red) 13%, transparent); }
html[data-theme="abyss"] .pill.run { color: var(--amber); border: 1px solid var(--amber); background: color-mix(in srgb, var(--amber) 13%, transparent); }
html[data-theme="abyss"] .pill.que { color: var(--blue); border: 1px solid var(--blue); background: color-mix(in srgb, var(--blue) 13%, transparent); }
html[data-theme="abyss"] ::-webkit-scrollbar { width: 9px; height: 9px; }
html[data-theme="abyss"] ::-webkit-scrollbar-track { background: transparent; }
html[data-theme="abyss"] ::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--acc) 38%, transparent);
  border: 2px solid var(--bg); border-radius: 0;
}
html[data-theme="abyss"] ::-webkit-scrollbar-thumb:hover { background: var(--acc); }
html[data-theme="abyss"] .side, html[data-theme="abyss"] .main { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--acc) 45%, transparent) transparent; }
html[data-theme="abyss"] ::selection { background: color-mix(in srgb, var(--acc) 40%, transparent); color: var(--fg2); }

/* ============ UMBRA — "Ember Lamp" ============================================
   Warm dark study lit by a single lamp. Amber glow. Fira Code.
   The only warm theme: cozy, analog, late-night. */
html[data-theme="umbra"] {
  --bg: #0a0603; --panel: #171006; --card: #1c1308;
  --fg: #dec6a2; --fg2: #faf0da; --dim: #8f7450; --mute: #6a5539;
  --line: #2c1e0e; --acc: #ffab40;
  --red: #ff6a4d; --amber: #ffc857; --blue: #8fd0d0;
  --glass: rgba(24,16,6,.60); --glass-strong: rgba(18,12,5,.78);
  --glass-line: #3d2a12; --glass-shadow: 0 10px 36px rgba(0,0,0,.6);
  --font: "Fira Code", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-head: "Fira Code", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-ui: "Fira Code", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --tt-head: none; --ls-head: 0; --fw-head: 600;
  --ls-body: .005em; --lh-body: 1.6;
}
html[data-theme="umbra"] body {
  font-family: var(--font); letter-spacing: 0;
  line-height: var(--lh-body); color: var(--fg);
  background:
    radial-gradient(1000px 520px at 50% -12%, color-mix(in srgb, var(--acc) 12%, transparent), transparent 60%),
    radial-gradient(600px 400px at 50% -8%, color-mix(in srgb, #ffd9a0 6%, transparent), transparent 55%),
    var(--bg);
  background-attachment: fixed;
}
html[data-theme="umbra"] h1, html[data-theme="umbra"] h2 {
  font-family: var(--font-head); text-transform: var(--tt-head);
  letter-spacing: 0; font-weight: var(--fw-head); color: var(--fg2);
  text-shadow: 0 0 20px color-mix(in srgb, var(--acc) 40%, transparent);
}
html[data-theme="umbra"] .top, html[data-theme="umbra"] .side {
  background: var(--glass);
  backdrop-filter: saturate(1.25) blur(14px);
  -webkit-backdrop-filter: saturate(1.25) blur(14px);
  border-color: var(--glass-line);
  box-shadow: 0 0 30px rgba(255,171,64,.13) inset, 0 10px 36px rgba(0,0,0,.55);
}
html[data-theme="umbra"] .card, html[data-theme="umbra"] .login,
html[data-theme="umbra"] .chat-pop, html[data-theme="umbra"] .ver-toast {
  background: var(--glass);
  backdrop-filter: saturate(1.2) blur(12px);
  -webkit-backdrop-filter: saturate(1.2) blur(12px);
  border: 1px solid var(--glass-line); border-radius: 0; color: var(--fg);
  box-shadow: var(--glass-shadow), 0 0 18px color-mix(in srgb, var(--acc) 8%, transparent);
}
html[data-theme="umbra"] .ver-toast {
  border-left: 3px solid var(--acc);
  box-shadow: 0 0 24px color-mix(in srgb, var(--acc) 38%, transparent), var(--glass-shadow);
}
html[data-theme="umbra"] .theme-btn {
  background: color-mix(in srgb, var(--acc) 8%, transparent);
  border: 1px solid var(--glass-line); border-radius: 0; color: var(--fg);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: box-shadow .18s ease, border-color .18s ease, color .18s ease;
}
html[data-theme="umbra"] .theme-btn:hover {
  border-color: var(--acc); color: var(--fg2);
  box-shadow: 0 0 16px color-mix(in srgb, var(--acc) 55%, transparent);
}
html[data-theme="umbra"] .nav-item { border-radius: 0; border-left: 2px solid transparent; }
html[data-theme="umbra"] table.b th {
  color: var(--acc); border-bottom: 2px solid var(--line);
  letter-spacing: 0; font-size: 11px; font-style: italic;
}
html[data-theme="umbra"] table.b td { border-bottom: 1px solid var(--line); }
html[data-theme="umbra"] .meta, html[data-theme="umbra"] .det { color: var(--dim); }
html[data-theme="umbra"] .pill { border-radius: 0; font-weight: 700; letter-spacing: 0; }
html[data-theme="umbra"] .pill.ok  { color: var(--acc); border: 1px solid var(--acc); background: color-mix(in srgb, var(--acc) 13%, transparent); box-shadow: 0 0 10px color-mix(in srgb, var(--acc) 28%, transparent); }
html[data-theme="umbra"] .pill.blk { color: var(--red); border: 1px solid var(--red); background: color-mix(in srgb, var(--red) 13%, transparent); }
html[data-theme="umbra"] .pill.run { color: var(--amber); border: 1px solid var(--amber); background: color-mix(in srgb, var(--amber) 13%, transparent); }
html[data-theme="umbra"] .pill.que { color: var(--blue); border: 1px solid var(--blue); background: color-mix(in srgb, var(--blue) 13%, transparent); }
html[data-theme="umbra"] ::-webkit-scrollbar { width: 9px; height: 9px; }
html[data-theme="umbra"] ::-webkit-scrollbar-track { background: transparent; }
html[data-theme="umbra"] ::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--acc) 38%, transparent);
  border: 2px solid var(--bg); border-radius: 0;
}
html[data-theme="umbra"] ::-webkit-scrollbar-thumb:hover { background: var(--acc); }
html[data-theme="umbra"] .side, html[data-theme="umbra"] .main { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--acc) 45%, transparent) transparent; }
html[data-theme="umbra"] ::selection { background: color-mix(in srgb, var(--acc) 42%, transparent); color: var(--fg2); }

/* ============ ONYX — "Crimson Alert" ==========================================
   Black glass, crimson alert glow. Source Code Pro. Sharp uppercase headers,
   red edge-lighting, the "something is happening" theme. */
html[data-theme="onyx"] {
  --bg: #070304; --panel: #18080d; --card: #1d0a11;
  --fg: #e2bcc6; --fg2: #ffeaef; --dim: #8f5d6a; --mute: #6b3f4c;
  --line: #2d1119; --acc: #ff3b5c;
  --red: #ff3b5c; --amber: #ffb84d; --blue: #7fb8ff;
  --glass: rgba(25,8,14,.60); --glass-strong: rgba(19,6,10,.78);
  --glass-line: #3f1620; --glass-shadow: 0 10px 36px rgba(0,0,0,.6);
  --font: "Source Code Pro", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-head: "Source Code Pro", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-ui: "Source Code Pro", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --tt-head: uppercase; --ls-head: 0; --fw-head: 700;
  --ls-body: .01em; --lh-body: 1.45;
}
html[data-theme="onyx"] body {
  font-family: var(--font); letter-spacing: 0;
  line-height: var(--lh-body); color: var(--fg);
  background:
    radial-gradient(900px 420px at 8% -10%, color-mix(in srgb, var(--acc) 12%, transparent), transparent 58%),
    linear-gradient(180deg, rgba(255,59,92,.03), transparent 200px),
    var(--bg);
  background-attachment: fixed;
}
html[data-theme="onyx"] h1, html[data-theme="onyx"] h2 {
  font-family: var(--font-head); text-transform: var(--tt-head);
  letter-spacing: 0; font-weight: var(--fw-head); color: var(--fg2);
  text-shadow: 0 0 18px color-mix(in srgb, var(--acc) 55%, transparent);
}
html[data-theme="onyx"] .top, html[data-theme="onyx"] .side {
  background: var(--glass);
  backdrop-filter: saturate(1.4) blur(15px);
  -webkit-backdrop-filter: saturate(1.4) blur(15px);
  border-color: var(--glass-line);
  border-bottom: 1px solid color-mix(in srgb, var(--acc) 30%, transparent);
  box-shadow: 0 0 28px rgba(255,59,92,.16) inset, 0 10px 36px rgba(0,0,0,.55);
}
html[data-theme="onyx"] .card, html[data-theme="onyx"] .login,
html[data-theme="onyx"] .chat-pop, html[data-theme="onyx"] .ver-toast {
  background: var(--glass);
  backdrop-filter: saturate(1.35) blur(13px);
  -webkit-backdrop-filter: saturate(1.35) blur(13px);
  border: 1px solid var(--glass-line); border-radius: 0; color: var(--fg);
  border-top: 2px solid color-mix(in srgb, var(--acc) 45%, transparent);
  box-shadow: var(--glass-shadow);
}
html[data-theme="onyx"] .ver-toast {
  border-left: 3px solid var(--acc);
  box-shadow: 0 0 26px color-mix(in srgb, var(--acc) 45%, transparent), var(--glass-shadow);
}
html[data-theme="onyx"] .theme-btn {
  background: color-mix(in srgb, var(--acc) 9%, transparent);
  border: 1px solid var(--glass-line); border-radius: 0; color: var(--fg);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: box-shadow .18s ease, border-color .18s ease, color .18s ease;
}
html[data-theme="onyx"] .theme-btn:hover {
  border-color: var(--acc); color: var(--fg2);
  box-shadow: 0 0 16px color-mix(in srgb, var(--acc) 60%, transparent);
}
html[data-theme="onyx"] .nav-item { border-radius: 0; border-left: 3px solid transparent; }
html[data-theme="onyx"] table.b th {
  color: var(--acc); border-bottom: 2px solid var(--line);
  text-transform: uppercase; letter-spacing: 0; font-size: 11px;
}
html[data-theme="onyx"] table.b td { border-bottom: 1px solid var(--line); }
html[data-theme="onyx"] .meta, html[data-theme="onyx"] .det { color: var(--dim); }
html[data-theme="onyx"] .pill { border-radius: 0; font-weight: 700; letter-spacing: 0; text-transform: uppercase; font-size: 10px; }
html[data-theme="onyx"] .pill.ok  { color: var(--acc); border: 1px solid var(--acc); background: color-mix(in srgb, var(--acc) 14%, transparent); box-shadow: 0 0 12px color-mix(in srgb, var(--acc) 35%, transparent); }
html[data-theme="onyx"] .pill.blk { color: #ff7a8a; border: 1px solid #ff7a8a; background: color-mix(in srgb, #ff7a8a 14%, transparent); }
html[data-theme="onyx"] .pill.run { color: var(--amber); border: 1px solid var(--amber); background: color-mix(in srgb, var(--amber) 13%, transparent); }
html[data-theme="onyx"] .pill.que { color: var(--blue); border: 1px solid var(--blue); background: color-mix(in srgb, var(--blue) 13%, transparent); }
html[data-theme="onyx"] ::-webkit-scrollbar { width: 9px; height: 9px; }
html[data-theme="onyx"] ::-webkit-scrollbar-track { background: transparent; }
html[data-theme="onyx"] ::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--acc) 40%, transparent);
  border: 2px solid var(--bg); border-radius: 0;
}
html[data-theme="onyx"] ::-webkit-scrollbar-thumb:hover { background: var(--acc); }
html[data-theme="onyx"] .side, html[data-theme="onyx"] .main { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--acc) 50%, transparent) transparent; }
html[data-theme="onyx"] ::selection { background: color-mix(in srgb, var(--acc) 45%, transparent); color: var(--fg2); }

/* ============ TERMINAL — "Phosphor CRT" =======================================
   Green-phosphor CRT. Cascadia Code. Scanlines, vignette, text glow.
   The retro-future ops room. */
html[data-theme="terminal"] {
  --bg: #010503; --panel: #061209; --card: #081a0d;
  --fg: #a9ffbf; --fg2: #e9ffee; --dim: #3f7d52; --mute: #2c5a3a;
  --line: #0e2c17; --acc: #39ff14;
  --red: #ff5f56; --amber: #ffb000; --blue: #7ee0ff;
  --glass: rgba(6,20,10,.62); --glass-strong: rgba(4,15,8,.80);
  --glass-line: #164a24; --glass-shadow: 0 10px 36px rgba(0,0,0,.6);
  --font: "Cascadia Code", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-head: "Cascadia Code", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-ui: "Cascadia Code", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --tt-head: uppercase; --ls-head: 0; --fw-head: 600;
  --ls-body: .02em; --lh-body: 1.5;
}
html[data-theme="terminal"] body {
  font-family: var(--font); letter-spacing: 0;
  line-height: var(--lh-body); color: var(--fg);
  text-shadow: 0 0 6px color-mix(in srgb, var(--acc) 35%, transparent);
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px),
    radial-gradient(1200px 800px at 50% 50%, transparent 55%, rgba(0,0,0,.5) 100%),
    radial-gradient(900px 420px at 50% -10%, color-mix(in srgb, var(--acc) 8%, transparent), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}
html[data-theme="terminal"] h1, html[data-theme="terminal"] h2 {
  font-family: var(--font-head); text-transform: var(--tt-head);
  letter-spacing: 0; font-weight: var(--fw-head); color: var(--fg2);
  text-shadow: 0 0 14px color-mix(in srgb, var(--acc) 75%, transparent);
}
html[data-theme="terminal"] h1::before {
  content: ">_ ";
  color: var(--acc);
  text-shadow: 0 0 14px color-mix(in srgb, var(--acc) 80%, transparent);
}
html[data-theme="terminal"] .top, html[data-theme="terminal"] .side {
  background: var(--glass);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-color: var(--glass-line);
  box-shadow: 0 0 24px rgba(57,255,20,.12) inset, 0 10px 36px rgba(0,0,0,.55);
}
html[data-theme="terminal"] .card, html[data-theme="terminal"] .login,
html[data-theme="terminal"] .chat-pop, html[data-theme="terminal"] .ver-toast {
  background: var(--glass);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--glass-line); border-radius: 0; color: var(--fg);
  box-shadow: var(--glass-shadow), 0 0 18px color-mix(in srgb, var(--acc) 10%, transparent);
}
html[data-theme="terminal"] .ver-toast {
  border: 1px solid var(--acc);
  box-shadow: 0 0 26px color-mix(in srgb, var(--acc) 50%, transparent), var(--glass-shadow);
}
html[data-theme="terminal"] .theme-btn {
  background: transparent; border: 1px solid var(--glass-line);
  border-radius: 0; color: var(--fg);
  text-shadow: 0 0 8px color-mix(in srgb, var(--acc) 50%, transparent);
  transition: box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
html[data-theme="terminal"] .theme-btn:hover {
  border-color: var(--acc); background: color-mix(in srgb, var(--acc) 12%, transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--acc) 60%, transparent);
}
html[data-theme="terminal"] .nav-item { border-radius: 0; }
html[data-theme="terminal"] table.b th {
  color: var(--acc); border-bottom: 2px solid var(--line);
  text-transform: uppercase; letter-spacing: 0; font-size: 11px;
  text-shadow: 0 0 10px color-mix(in srgb, var(--acc) 60%, transparent);
}
html[data-theme="terminal"] table.b td { border-bottom: 1px dashed color-mix(in srgb, var(--line) 80%, transparent); }
html[data-theme="terminal"] .meta, html[data-theme="terminal"] .det { color: var(--dim); }
html[data-theme="terminal"] .pill { border-radius: 0; font-weight: 700; letter-spacing: 0; text-transform: uppercase; font-size: 10px; }
html[data-theme="terminal"] .pill.ok  { color: var(--acc); border: 1px solid var(--acc); background: transparent; text-shadow: 0 0 8px color-mix(in srgb, var(--acc) 70%, transparent); box-shadow: 0 0 12px color-mix(in srgb, var(--acc) 30%, transparent); }
html[data-theme="terminal"] .pill.blk { color: var(--red); border: 1px solid var(--red); background: transparent; text-shadow: 0 0 8px color-mix(in srgb, var(--red) 70%, transparent); }
html[data-theme="terminal"] .pill.run { color: var(--amber); border: 1px solid var(--amber); background: transparent; text-shadow: 0 0 8px color-mix(in srgb, var(--amber) 70%, transparent); }
html[data-theme="terminal"] .pill.que { color: var(--blue); border: 1px solid var(--blue); background: transparent; }
html[data-theme="terminal"] ::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-theme="terminal"] ::-webkit-scrollbar-track { background: #020604; }
html[data-theme="terminal"] ::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--acc) 45%, transparent);
  border: 2px solid #020604; border-radius: 0;
  box-shadow: 0 0 8px color-mix(in srgb, var(--acc) 40%, transparent);
}
html[data-theme="terminal"] ::-webkit-scrollbar-thumb:hover { background: var(--acc); }
html[data-theme="terminal"] .side, html[data-theme="terminal"] .main { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--acc) 55%, transparent) #020604; }
html[data-theme="terminal"] ::selection { background: var(--acc); color: #010503; text-shadow: none; }

/* ============ DAYBREAK — "Paper Morning" ==========================================
   The light theme. Warm paper, ink text, burnt-orange accent. System sans
   body + Georgia serif headings — deliberately NOT mono, so it reads as a
   different product from the seven dark themes.
   Append to themes.css AFTER the terminal block. */
html[data-theme="bluebreak"] {
  /* Daybreak clone, blue accent instead of peach. Same paper/ink base so every layout
     rule below stays shared; only the accent identity changes. */
  --bg: #eef1f6; --panel: #f7f9fc; --card: #ffffff;
  --fg: #2a2f38; --fg2: #0c1017; --dim: #5f6874; --mute: #939ca8;
  --line: #ccd5e0; --acc: #1d4ed8;
  --red: #dc2626; --amber: #b45309; --blue: #1d4ed8;
  --glass: rgba(255,255,255,.64); --glass-strong: rgba(247,249,252,.88);
  --glass-line: #c8d2e0; --glass-shadow: 0 10px 30px rgba(20,35,70,.14);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-head: Georgia, "Times New Roman", serif;
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --tt-head: none; --ls-head: 0; --fw-head: 700;
  --ls-body: 0; --lh-body: 1.55;
}

html[data-theme="greybreak"] {
  /* Daybreak clone, neutral grey accent. No hue at all, so it never fights a BG image. */
  --bg: #f0f0ef; --panel: #f8f8f7; --card: #ffffff;
  --fg: #2e2e2c; --fg2: #0f0f0e; --dim: #666663; --mute: #9a9a96;
  --line: #d6d6d3; --acc: #57534e;
  --red: #dc2626; --amber: #b45309; --blue: #475569;
  --glass: rgba(255,255,255,.62); --glass-strong: rgba(248,248,247,.88);
  --glass-line: #d2d2ce; --glass-shadow: 0 10px 30px rgba(40,40,35,.14);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-head: Georgia, "Times New Roman", serif;
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --tt-head: none; --ls-head: 0; --fw-head: 700;
  --ls-body: 0; --lh-body: 1.55;
}

html[data-theme="daybreak"] {
  --bg: #f1ede4; --panel: #faf7f0; --card: #ffffff;
  --fg: #33302a; --fg2: #12100c; --dim: #6f665a; --mute: #a39a8b;
  --line: #ddd4c2; --acc: #c2410c;
  --red: #dc2626; --amber: #b45309; --blue: #1d4ed8;
  --glass: rgba(255,255,255,.62); --glass-strong: rgba(250,247,240,.86);
  --glass-line: #d5c9b2; --glass-shadow: 0 10px 30px rgba(74,55,25,.14);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-head: Georgia, "Times New Roman", serif;
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --tt-head: none; --ls-head: 0; --fw-head: 700;
  --ls-body: 0; --lh-body: 1.55;
}
html[data-theme$="break"] body {
  font-family: var(--font); letter-spacing: 0;
  line-height: var(--lh-body); color: var(--fg);
  background:
    radial-gradient(1000px 500px at 50% -10%, rgba(194,65,12,.07), transparent 60%),
    linear-gradient(rgba(51,48,42,.045) 1px, transparent 1px),
    var(--bg);
  background-size: auto, 28px 28px, auto;
  background-attachment: fixed;
}
html[data-theme$="break"] h1, html[data-theme$="break"] h2 {
  font-family: var(--font-head); text-transform: var(--tt-head);
  letter-spacing: 0; font-weight: var(--fw-head); color: var(--fg2);
}
html[data-theme$="break"] .top, html[data-theme$="break"] .side {
  background: var(--glass);
  backdrop-filter: saturate(1.3) blur(14px);
  -webkit-backdrop-filter: saturate(1.3) blur(14px);
  border-color: var(--glass-line);
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 8px 24px rgba(74,55,25,.10);
}
html[data-theme$="break"] .card, html[data-theme$="break"] .login,
html[data-theme$="break"] .chat-pop, html[data-theme$="break"] .ver-toast {
  background: var(--glass);
  backdrop-filter: saturate(1.25) blur(12px);
  -webkit-backdrop-filter: saturate(1.25) blur(12px);
  border: 1px solid var(--glass-line); border-radius: 0; color: var(--fg);
  box-shadow: var(--glass-shadow);
}
html[data-theme$="break"] .ver-toast { border-left: 3px solid var(--acc); }
html[data-theme$="break"] .theme-btn {
  background: rgba(255,255,255,.55);
  border: 1px solid var(--glass-line); border-radius: 0; color: var(--fg);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8),
              0 1px 3px rgba(74,55,25,.15);
  text-shadow: none;
  transition: box-shadow .18s ease, border-color .18s ease, color .18s ease;
}
html[data-theme$="break"] .theme-btn:hover {
  border-color: var(--acc); color: var(--fg2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8),
              0 0 0 1px color-mix(in srgb, var(--acc) 45%, transparent),
              0 4px 14px color-mix(in srgb, var(--acc) 25%, transparent);
}
html[data-theme$="break"] .nav-item { border-radius: 0; border-left: 2px solid transparent; }
html[data-theme$="break"] table.b th {
  color: var(--dim); border-bottom: 2px solid var(--line);
  text-transform: uppercase; letter-spacing: 0; font-size: 11px;
}
html[data-theme$="break"] table.b td { border-bottom: 1px solid var(--line); }
html[data-theme$="break"] .meta, html[data-theme$="break"] .det { color: var(--dim); }
html[data-theme$="break"] .pill { border-radius: 0; font-weight: 700; letter-spacing: 0; }
html[data-theme$="break"] .pill.ok  { color: #166534; border: 1px solid #166534; background: rgba(22,101,52,.08); }
html[data-theme$="break"] .pill.blk { color: var(--red);  border: 1px solid var(--red);  background: rgba(220,38,38,.08); }
html[data-theme$="break"] .pill.run { color: var(--amber); border: 1px solid var(--amber); background: rgba(180,83,9,.10); }
html[data-theme$="break"] .pill.que { color: var(--blue);  border: 1px solid var(--blue);  background: rgba(29,78,216,.08); }
html[data-theme$="break"] ::-webkit-scrollbar { width: 9px; height: 9px; }
html[data-theme$="break"] ::-webkit-scrollbar-track { background: transparent; }
html[data-theme$="break"] ::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--acc) 35%, transparent);
  border: 2px solid var(--bg); border-radius: 0;
}
html[data-theme$="break"] ::-webkit-scrollbar-thumb:hover { background: var(--acc); }
html[data-theme$="break"] .side, html[data-theme$="break"] .main { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--acc) 45%, transparent) transparent; }
html[data-theme$="break"] ::selection { background: color-mix(in srgb, var(--acc) 30%, transparent); }

/* ---- glass-buttons.css companion: daybreak needs a light-touch button ------ */
html[data-theme$="break"] .theme-btn, html[data-theme$="break"] .send-btn,
html[data-theme$="break"] .vt-btn {
  text-shadow: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8),
              0 0 0 1px color-mix(in srgb, var(--acc) 22%, transparent),
              0 2px 8px rgba(74,55,25,.12);
}
html[data-theme$="break"] .theme-btn:hover,
html[data-theme$="break"] .send-btn:hover:not(:disabled),
html[data-theme$="break"] .vt-btn:hover {
  text-shadow: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85),
              0 0 0 1px color-mix(in srgb, var(--acc) 50%, transparent),
              0 4px 16px color-mix(in srgb, var(--acc) 28%, transparent);
}

/* Daybreak: the content column is a clean white sheet. The body paints paper + a rule
   grid; .main sits on top and should read as the writing surface, not show the grid
   through the text. */
html[data-theme$="break"] .main {
  background: #ffffff;
  box-shadow: -1px 0 0 var(--line) inset;
}

/* ---- BACKGROUND IMAGE ON A LIGHT THEME ----------------------------------------
   ROOT CAUSE of "the background overrides don't work on lightmode":
   the image lives on `body::before` (position fixed, z-index 0) while `.main` is a
   SOLID `#ffffff` at z-index 1 — so on daybreak/bluebreak/greybreak the content column
   painted opaque white over the entire photo, leaving only a sliver visible at the
   window edge. The dark themes never had this because their `.main` has NO background
   at all, so the photo showed straight through.

   Fix: when a background image is enabled, the light `.main` becomes a translucent
   sheet instead of an opaque one. The photo shows through while text keeps enough
   contrast — the same relationship the dark themes get for free. Scoped to
   [data-bg="on"] so a light theme with NO image still reads as clean paper. */
html[data-theme$="break"][data-bg="on"] .main {
  background: color-mix(in srgb, #ffffff 72%, transparent);
  -webkit-backdrop-filter: none;
}
/* the sidebar and header are the same surface family — let the image through there too,
   or the photo stops dead at the sidebar seam and looks like a rendering bug. */
html[data-theme$="break"][data-bg="on"] .side {
  background: color-mix(in srgb, #ffffff 72%, transparent);
}
html[data-theme$="break"][data-bg="on"] .top {
  background: color-mix(in srgb, #ffffff 78%, transparent);
}

/* ============================================================================
   BRAND LOGO ON DARK THEMES.
   The wordmark is deep navy (#002F5B) — on a near-black panel it all but vanishes.
   brightness(3) lifts it to a readable blue and saturate(0.3) pulls the hue back so
   it does not glow neon against the accents. The light themes are deliberately left
   alone: on paper backgrounds the logo is already correct and brightening it would
   wash the navy out to nothing.
   Enumerated per dark theme rather than written as a default-plus-exclusion, because
   `system` is BOTH light and dark depending on the OS, and there is no CSS selector
   for "dark branch of a media query" other than the media query itself.
   Applies to .brand-logo, so the sidebar mark and the login-page mark are one rule. */
html[data-theme="midnight"] .brand-logo,
html[data-theme="obsidian"] .brand-logo,
html[data-theme="void"] .brand-logo,
html[data-theme="abyss"] .brand-logo,
html[data-theme="umbra"] .brand-logo,
html[data-theme="onyx"] .brand-logo,
html[data-theme="terminal"] .brand-logo,
html[data-theme="dark"] .brand-logo,
html[data-theme="crt"] .brand-logo {
  /* DISABLED: the dark theme now uses the light-sky mark (see .logo-dark below),
     which this filter would clamp to flat white. Kept as the record of why. */
  filter: none;
}
@media (prefers-color-scheme: dark) {
  html[data-theme="system"] .brand-logo {
    filter: brightness(3) saturate(0.3);
  }
}
/* one shared transition so a theme switch does not snap the logo bright->dim */
.brand-logo { transition: filter .18s ease; }

/* ==========================================================================
   TWO MARKS, ONE RULE SET.
   The light mark is the navy wordmark; the dark mark is the light-sky variant.
   Both are shipped in the HTML so a theme switch costs no network request and
   cannot flash the wrong logo while a new one loads.

   The old `filter: brightness(3) saturate(0.3)` workaround is now DISABLED: it
   existed to lift a navy wordmark off a near-black panel, but the dark mark is
   already light (#94CCF4 / #93A7BA), and brightness(3) would clamp it to flat
   white and destroy the colour. Kept, commented, as the reason it is gone.
   ========================================================================== */
.logo-dark { display: none; }

/* dark themes: show the light mark instead */
html[data-theme="midnight"] .logo-light,
html[data-theme="obsidian"] .logo-light,
html[data-theme="void"] .logo-light,
html[data-theme="abyss"] .logo-light,
html[data-theme="umbra"] .logo-light,
html[data-theme="onyx"] .logo-light,
html[data-theme="terminal"] .logo-light,
html[data-theme="dark"] .logo-light,
html[data-theme="crt"] .logo-light { display: none; }

html[data-theme="midnight"] .logo-dark,
html[data-theme="obsidian"] .logo-dark,
html[data-theme="void"] .logo-dark,
html[data-theme="abyss"] .logo-dark,
html[data-theme="umbra"] .logo-dark,
html[data-theme="onyx"] .logo-dark,
html[data-theme="terminal"] .logo-dark,
html[data-theme="dark"] .logo-dark,
html[data-theme="crt"] .logo-dark { display: block; }

/* `system` follows the OS, and there is no selector for "the dark branch of a
   media query" other than the media query itself — so it is handled here. */
@media (prefers-color-scheme: dark) {
  html[data-theme="system"] .logo-light { display: none; }
  html[data-theme="system"] .logo-dark { display: block; }
}