/* =====================================================================
* nmmi_theme_system.css — v8
* NMMI · AI — unified theme & nav system
*
* LOAD ORDER (every page):
* ← this file, first
* ← page-specific after
*
* THEME ACTIVATION:
* Set data-theme="green-dark" | "green-light"
* "teal-dark" | "teal-light"
* "gray-dark" | "gray-light" ← NEW in v8
* on element. Default: green-dark.
* JS writes this via: document.documentElement.dataset.theme = hue+'-'+mode;
*
* v8 MIGRATION (2026-06-03):
* All 31 v8 design tokens added to every theme block. All legacy tokens
* retained for zero-regression backward-compat. Two new themes added:
* gray-dark and gray-light. See nmmi-ai/CHANGELOG-stage-b.md.
*
* DESIGN PRINCIPLES:
* • Topnav is ALWAYS a dark canvas regardless of light/dark mode.
* • Tile-heads match the topnav strip colour in dark themes.
* • Zero competing font stacks — declare once here, nowhere else.
* • No inline styles from JS for anything structural — use tokens.
* ===================================================================== */
/* ── 1. Box-sizing + font reset ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
}
.dashboard-shell {
font-family: "Inter var", Inter, -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-size: 15px;
line-height: 1.5;
font-weight: 400;
color: rgba(var(--accent-rgb), 0.96);
background: var(--bg-body);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
min-height: 100vh;
}
button, input, select, textarea, optgroup { font: inherit; color: inherit; }
h1, h2, h3, h4, h5, h6 {
margin: 0;
font-weight: 600;
letter-spacing: -0.01em;
color: rgba(var(--accent-rgb), 0.92);
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
/* ── 2. Structural sizing tokens (theme-agnostic) ────────────────────── */
:root {
--header-h: 2rem;
--footer-h: 2rem;
--pad: 0.75rem;
--gap: 0.75rem;
--box-pad: 14px;
--panel-head-h: 1.2rem;
--btn-size: 1.5rem;
--review-w: 16.5rem;
--tbar-chip-h: 1.3rem;
--tbar-tool-h: 1.3rem;
/* Status utility tokens */
--warn: #f59e0b;
--error: #ef4444;
--ok: #22c55e;
}
/* ── 3. Shared composition tokens (identical across all themes) ──────── */
:root,
[data-theme="green-dark"],
[data-theme="green-light"],
[data-theme="teal-dark"],
[data-theme="teal-light"],
[data-theme="gray-dark"],
[data-theme="gray-light"] {
/* surfaces */
--surface-1: rgba(var(--accent-rgb), 0.04);
--surface-2: rgba(var(--accent-rgb), 0.08);
--panel-bg: var(--bg-panel);
--panel-blur: 0px;
--panel-radius: 8px;
--panel-shadow: 0 4px 18px var(--shadow-colour);
--box-shadow-soft: 0 0 10px var(--shadow-colour);
/* borders — legacy */
--border-1: rgba(var(--accent-rgb), 0.12);
--border-2: rgba(var(--accent-rgb), 0.07);
--hairline: rgba(var(--accent-rgb), 0.10);
/* fields — legacy */
--field-bg: rgba(var(--accent-rgb), 0.08);
--field-bg-focus: rgba(var(--accent-rgb), 0.12);
/* accent system — legacy */
--accent-dim: rgba(var(--accent-rgb), 0.25);
--accent-soft: rgba(var(--accent-rgb), 0.50);
--accent-border: rgba(var(--accent-rgb), 0.10);
--accent-focus: rgba(var(--accent-rgb), 0.75);
--accent-glow: rgba(var(--accent-rgb), 0.05);
--accent-bg: rgba(var(--accent-rgb), 0.07);
/* toggles */
--tog-track: rgba(var(--accent-rgb), 0.10);
--tog-thumb: rgba(var(--accent-rgb), 0.30);
--tog-on-track: rgba(var(--green), 0.10);
--tog-on-thumb: rgba(var(--green), 0.70);
--tog-on-border: rgba(var(--green), 0.40);
--tog-on-glow: rgba(var(--green), 0.20);
--tog-on-label: rgba(var(--green), 0.70);
/* theme-bar pill */
--tbar-bg: rgba(var(--accent-rgb), 0.08);
--tbar-bdr: rgba(var(--green), 0.25);
--tbar-txt: rgba(var(--muted-rgb), 0.70);
--tbar-act-bg: rgba(var(--green), 0.12);
--tbar-act-bdr: rgba(var(--green), 0.45);
--tbar-act-txt: rgba(var(--green), 0.95);
/* code */
--code-bg: rgba(var(--accent-rgb), 0.06);
--code-txt: rgba(var(--green), 0.85);
--code-bdr: rgba(var(--green), 0.14);
/* scrollbar */
--scroll-thumb: rgba(var(--accent-rgb), 0.20);
--scroll-thumb-hi: rgba(var(--accent-rgb), 0.40);
}
/* ── 4. Per-theme colour blocks ──────────────────────────────────────── */
/* ── GREEN-DARK (default) ─────────────────────────────────────────── */
:root,
[data-theme="green-dark"] {
/* ── Legacy tokens ── */
--bg-body: #121212;
--bg-surface: #1a1a1a;
--bg-panel: rgba(18, 18, 18, 0.92);
--bg-select-option: #111111;
--accent: #c8c8c8;
--accent-rgb: 200, 200, 200;
--muted-rgb: 185, 185, 185;
--apply-rgb: 140, 140, 140;
--apply-color: #909090;
--green: 34, 255, 0;
--blue: 0, 229, 255;
--cyan: 0, 255, 255;
--gray: 18, 18, 18;
--shadow-colour: rgba(0, 0, 0, 0.65);
--input-text: rgba(255, 255, 255, 0.95);
--output-text: var(--input-text);
--input-bg: rgba(0, 0, 0, 0.40);
--input-bg-focus: rgba(0, 0, 0, 0.55);
--header-text: 34, 255, 0;
--header-text-shadow: 34, 255, 0;
--footer-text-c: rgba(var(--accent-rgb), 0.50);
--nav-bg: #121212;
--nav-fg-rgb: 200, 200, 200;
--nav-muted-rgb: 185, 185, 185;
--nav-hue-rgb: 34, 255, 0;
--tile-head-bg: #121212;
/* ── v8 additions ── */
--bg-surface-2: #1f1f1f;
--bg-input: rgba(255, 255, 255, 0.04);
--border: rgba(255, 255, 255, 0.09);
--border-soft: rgba(255, 255, 255, 0.06);
--text-hi: rgba(255, 255, 255, 0.95);
--text: rgba(200, 200, 200, 0.85);
--text-mid: rgba(185, 185, 185, 0.72);
--text-low: rgba(155, 155, 155, 0.60);
--text-faint: rgba(120, 120, 120, 0.50);
--shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.40);
--shadow-md: 0 2px 12px rgba(0, 0, 0, 0.45);
--theme-rgb: 34, 255, 0;
--theme: rgba(34, 255, 0, 0.95);
--theme-dim: rgba(34, 255, 0, 0.55);
--theme-border: rgba(34, 255, 0, 0.45);
--theme-bg: rgba(34, 255, 0, 0.10);
--theme-glow: rgba(34, 255, 0, 0.55);
--hero-gray: rgba(176, 176, 176, 0.85);
--gold: rgba(201, 168, 76, 0.80);
--gold-border: rgba(201, 168, 76, 0.35);
--gold-bg: rgba(201, 168, 76, 0.08);
--ok-bg: rgba(34, 197, 94, 0.07);
--ok-bd: rgba(34, 197, 94, 0.30);
--warn-bg: rgba(245, 158, 11, 0.07);
--warn-bd: rgba(245, 158, 11, 0.30);
--err: rgba(239, 68, 68, 0.85);
--err-bg: rgba(239, 68, 68, 0.07);
--err-bd: rgba(239, 68, 68, 0.30);
--info: rgba(96, 165, 250, 0.85);
--info-bg: rgba(96, 165, 250, 0.07);
--info-bd: rgba(96, 165, 250, 0.30);
}
/* ── GREEN-LIGHT ──────────────────────────────────────────────────── */
[data-theme="green-light"] {
/* ── Legacy tokens ── */
--bg-body: rgb(218, 218, 216);
--bg-surface: #f0f0ee;
--bg-panel: rgba(255, 255, 255, 0.88);
--bg-select-option: #d2d2d2;
--accent: #2a2a2a;
--accent-rgb: 42, 42, 42;
--muted-rgb: 55, 55, 55;
--apply-rgb: 90, 90, 90;
--apply-color: #5a5a5a;
--green: 0, 138, 0;
--blue: 0, 110, 180;
--cyan: 0, 160, 160;
--gray: 220, 220, 220;
--shadow-colour: rgba(0, 0, 0, 0.25);
--input-text: rgba(18, 18, 18, 0.92);
--output-text: rgba(12, 12, 12, 0.95);
--input-bg: rgba(255, 255, 255, 0.60);
--input-bg-focus: rgba(255, 255, 255, 0.80);
--header-text: 0, 138, 0;
--header-text-shadow: 0, 138, 0;
--footer-text-c: rgba(var(--accent-rgb), 0.60);
--nav-bg: #121212;
--nav-fg-rgb: 200, 200, 200;
--nav-muted-rgb: 160, 160, 160;
--nav-hue-rgb: 52, 220, 30;
--tile-head-bg: #1a1a1a;
/* ── v8 additions ── */
--bg-surface-2: #e8e8e6;
--bg-input: rgba(0, 0, 0, 0.03);
--border: rgba(0, 0, 0, 0.09);
--border-soft: rgba(0, 0, 0, 0.06);
--text-hi: rgba(18, 18, 18, 0.92);
--text: rgba(51, 51, 51, 0.80);
--text-mid: rgba(51, 51, 51, 0.72);
--text-low: rgba(75, 75, 75, 0.60);
--text-faint: rgba(105, 105, 105, 0.50);
--shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.08);
--shadow-md: 0 1px 8px rgba(0, 0, 0, 0.08);
--theme-rgb: 0, 138, 0;
--theme: rgba(0, 138, 0, 0.95);
--theme-dim: rgba(0, 138, 0, 0.55);
--theme-border: rgba(0, 138, 0, 0.45);
--theme-bg: rgba(0, 138, 0, 0.10);
--theme-glow: rgba(0, 138, 0, 0.55);
--hero-gray: rgba(74, 74, 74, 0.85);
--gold: rgba(154, 116, 32, 0.80);
--gold-border: rgba(154, 116, 32, 0.35);
--gold-bg: rgba(154, 116, 32, 0.07);
--ok-bg: rgba(22, 163, 74, 0.07);
--ok-bd: rgba(22, 163, 74, 0.30);
--warn-bg: rgba(180, 83, 9, 0.07);
--warn-bd: rgba(180, 83, 9, 0.30);
--err: rgba(185, 28, 28, 0.85);
--err-bg: rgba(185, 28, 28, 0.07);
--err-bd: rgba(185, 28, 28, 0.30);
--info: rgba(37, 99, 235, 0.85);
--info-bg: rgba(37, 99, 235, 0.07);
--info-bd: rgba(37, 99, 235, 0.30);
}
/* ── TEAL-DARK ────────────────────────────────────────────────────── */
[data-theme="teal-dark"] {
/* ── Legacy tokens ── */
--bg-body: #0d1a1e;
--bg-surface: #111f26;
--bg-panel: rgba(10, 22, 28, 0.94);
--bg-select-option: #0a1318;
--accent: #a8d8dc;
--accent-rgb: 168, 216, 220;
--muted-rgb: 160, 200, 205;
--apply-rgb: 100, 160, 168;
--apply-color: #64a0a8;
--green: 0, 210, 210;
--blue: 0, 229, 255;
--cyan: 0, 255, 255;
--gray: 12, 22, 28;
--shadow-colour: rgba(0, 0, 0, 0.65);
--input-text: rgba(225, 245, 248, 0.95);
--output-text: var(--input-text);
--input-bg: rgba(0, 0, 0, 0.35);
--input-bg-focus: rgba(0, 0, 0, 0.50);
--header-text: 0, 210, 210;
--header-text-shadow: 0, 210, 210;
--footer-text-c: rgba(var(--accent-rgb), 0.55);
--nav-bg: #0d1a1e;
--nav-fg-rgb: 168, 216, 220;
--nav-muted-rgb: 160, 200, 205;
--nav-hue-rgb: 0, 210, 210;
--tile-head-bg: #0d1a1e;
/* ── v8 additions (navy-dark palette) ── */
--bg-surface-2: #132028;
--bg-input: rgba(255, 255, 255, 0.04);
--border: rgba(255, 255, 255, 0.09);
--border-soft: rgba(255, 255, 255, 0.06);
--text-hi: rgba(220, 232, 240, 0.95);
--text: rgba(180, 200, 215, 0.85);
--text-mid: rgba(180, 200, 215, 0.72);
--text-low: rgba(140, 165, 185, 0.60);
--text-faint: rgba(100, 130, 155, 0.50);
--shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.40);
--shadow-md: 0 2px 12px rgba(0, 0, 0, 0.45);
--theme-rgb: 0, 210, 210;
--theme: rgba(0, 210, 210, 0.95);
--theme-dim: rgba(0, 210, 210, 0.55);
--theme-border: rgba(0, 210, 210, 0.45);
--theme-bg: rgba(0, 210, 210, 0.10);
--theme-glow: rgba(0, 210, 210, 0.55);
--hero-gray: rgba(176, 176, 176, 0.85);
--gold: rgba(201, 168, 76, 0.80);
--gold-border: rgba(201, 168, 76, 0.35);
--gold-bg: rgba(201, 168, 76, 0.08);
--ok-bg: rgba(34, 197, 94, 0.07);
--ok-bd: rgba(34, 197, 94, 0.30);
--warn-bg: rgba(245, 158, 11, 0.07);
--warn-bd: rgba(245, 158, 11, 0.30);
--err: rgba(239, 68, 68, 0.85);
--err-bg: rgba(239, 68, 68, 0.07);
--err-bd: rgba(239, 68, 68, 0.30);
--info: rgba(96, 165, 250, 0.85);
--info-bg: rgba(96, 165, 250, 0.07);
--info-bd: rgba(96, 165, 250, 0.30);
}
/* ── TEAL-LIGHT ───────────────────────────────────────────────────── */
[data-theme="teal-light"] {
/* ── Legacy tokens ── */
--bg-body: #f4f8f9;
--bg-surface: #ffffff;
--bg-panel: rgba(238, 245, 246, 0.95);
--bg-select-option: #d8e8ea;
--accent: #0d3d44;
--accent-rgb: 13, 61, 68;
--muted-rgb: 30, 80, 90;
--apply-rgb: 60, 120, 130;
--apply-color: #3c7882;
--green: 0, 110, 130;
--blue: 0, 140, 170;
--cyan: 0, 180, 200;
--gray: 210, 225, 228;
--shadow-colour: rgba(0, 0, 0, 0.18);
--input-text: rgba(12, 30, 34, 0.92);
--output-text: rgba(8, 22, 26, 0.95);
--input-bg: rgba(255, 255, 255, 0.70);
--input-bg-focus: rgba(255, 255, 255, 0.90);
--header-text: 0, 110, 130;
--header-text-shadow: 0, 110, 130;
--footer-text-c: rgba(var(--accent-rgb), 0.65);
--nav-bg: #0d1a1e;
--nav-fg-rgb: 168, 216, 220;
--nav-muted-rgb: 140, 180, 185;
--nav-hue-rgb: 0, 200, 210;
--tile-head-bg: #111f26;
/* ── v8 additions (navy-light palette) ── */
--bg-surface-2: #edf3f4;
--bg-input: rgba(0, 0, 0, 0.03);
--border: rgba(0, 0, 0, 0.09);
--border-soft: rgba(0, 0, 0, 0.06);
--text-hi: rgba(15, 30, 40, 0.92);
--text: rgba(30, 55, 70, 0.80);
--text-mid: rgba(30, 55, 70, 0.72);
--text-low: rgba(50, 80, 95, 0.60);
--text-faint: rgba(80, 110, 125, 0.50);
--shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.08);
--shadow-md: 0 1px 8px rgba(0, 0, 0, 0.08);
--theme-rgb: 0, 200, 210;
--theme: rgba(0, 200, 210, 0.95);
--theme-dim: rgba(0, 200, 210, 0.55);
--theme-border: rgba(0, 200, 210, 0.45);
--theme-bg: rgba(0, 200, 210, 0.10);
--theme-glow: rgba(0, 200, 210, 0.55);
--hero-gray: rgba(74, 74, 74, 0.85);
--gold: rgba(154, 116, 32, 0.80);
--gold-border: rgba(154, 116, 32, 0.35);
--gold-bg: rgba(154, 116, 32, 0.07);
--ok-bg: rgba(22, 163, 74, 0.07);
--ok-bd: rgba(22, 163, 74, 0.30);
--warn-bg: rgba(180, 83, 9, 0.07);
--warn-bd: rgba(180, 83, 9, 0.30);
--err: rgba(185, 28, 28, 0.85);
--err-bg: rgba(185, 28, 28, 0.07);
--err-bd: rgba(185, 28, 28, 0.30);
--info: rgba(37, 99, 235, 0.85);
--info-bg: rgba(37, 99, 235, 0.07);
--info-bd: rgba(37, 99, 235, 0.30);
}
/* ── GRAY-DARK (new in v8) ───────────────────────────────────────── */
[data-theme="gray-dark"] {
/* ── Legacy-compatible tokens ── */
--bg-body: #0f0f0f;
--bg-surface: #141414;
--bg-panel: rgba(15, 15, 15, 0.94);
--bg-select-option: #0a0a0a;
--accent: #c5c5c5;
--accent-rgb: 197, 197, 197;
--muted-rgb: 180, 180, 180;
--apply-rgb: 130, 130, 130;
--apply-color: #808080;
--green: 34, 255, 0;
--blue: 0, 229, 255;
--cyan: 0, 255, 255;
--gray: 15, 15, 15;
--shadow-colour: rgba(0, 0, 0, 0.65);
--input-text: rgba(230, 230, 230, 0.95);
--output-text: var(--input-text);
--input-bg: rgba(0, 0, 0, 0.40);
--input-bg-focus: rgba(0, 0, 0, 0.55);
--header-text: 34, 255, 0;
--header-text-shadow: 34, 255, 0;
--footer-text-c: rgba(var(--accent-rgb), 0.50);
--nav-bg: #0f0f0f;
--nav-fg-rgb: 197, 197, 197;
--nav-muted-rgb: 161, 161, 161;
--nav-hue-rgb: 34, 255, 0;
--tile-head-bg: #0f0f0f;
/* ── v8 tokens ── */
--bg-surface-2: #191919;
--bg-input: rgba(255, 255, 255, 0.04);
--border: rgba(255, 255, 255, 0.09);
--border-soft: rgba(255, 255, 255, 0.06);
--text-hi: rgba(230, 230, 230, 0.95);
--text: rgba(197, 197, 197, 0.85);
--text-mid: rgba(197, 197, 197, 0.72);
--text-low: rgba(161, 161, 161, 0.60);
--text-faint: rgba(125, 125, 125, 0.50);
--shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.40);
--shadow-md: 0 2px 12px rgba(0, 0, 0, 0.45);
--theme-rgb: 34, 255, 0;
--theme: rgba(34, 255, 0, 0.95);
--theme-dim: rgba(34, 255, 0, 0.55);
--theme-border: rgba(34, 255, 0, 0.45);
--theme-bg: rgba(34, 255, 0, 0.10);
--theme-glow: rgba(34, 255, 0, 0.55);
--hero-gray: rgba(176, 176, 176, 0.85);
--gold: rgba(201, 168, 76, 0.80);
--gold-border: rgba(201, 168, 76, 0.35);
--gold-bg: rgba(201, 168, 76, 0.08);
--ok-bg: rgba(34, 197, 94, 0.07);
--ok-bd: rgba(34, 197, 94, 0.30);
--warn-bg: rgba(245, 158, 11, 0.07);
--warn-bd: rgba(245, 158, 11, 0.30);
--err: rgba(239, 68, 68, 0.85);
--err-bg: rgba(239, 68, 68, 0.07);
--err-bd: rgba(239, 68, 68, 0.30);
--info: rgba(96, 165, 250, 0.85);
--info-bg: rgba(96, 165, 250, 0.07);
--info-bd: rgba(96, 165, 250, 0.30);
}
/* ── GRAY-LIGHT (new in v8) ──────────────────────────────────────── */
[data-theme="gray-light"] {
/* ── Legacy-compatible tokens ── */
--bg-body: #f5f5f5;
--bg-surface: #ffffff;
--bg-panel: rgba(255, 255, 255, 0.92);
--bg-select-option: #e8e8e8;
--accent: #2a2a2a;
--accent-rgb: 42, 42, 42;
--muted-rgb: 55, 55, 55;
--apply-rgb: 90, 90, 90;
--apply-color: #5a5a5a;
--green: 0, 138, 0;
--blue: 0, 110, 180;
--cyan: 0, 160, 160;
--gray: 220, 220, 220;
--shadow-colour: rgba(0, 0, 0, 0.18);
--input-text: rgba(28, 28, 28, 0.92);
--output-text: rgba(12, 12, 12, 0.95);
--input-bg: rgba(255, 255, 255, 0.60);
--input-bg-focus: rgba(255, 255, 255, 0.80);
--header-text: 0, 138, 0;
--header-text-shadow: 0, 138, 0;
--footer-text-c: rgba(var(--accent-rgb), 0.60);
--nav-bg: #121212;
--nav-fg-rgb: 197, 197, 197;
--nav-muted-rgb: 155, 155, 155;
--nav-hue-rgb: 0, 138, 0;
--tile-head-bg: #1a1a1a;
/* ── v8 tokens ── */
--bg-surface-2: #f9f9f9;
--bg-input: rgba(0, 0, 0, 0.03);
--border: rgba(0, 0, 0, 0.09);
--border-soft: rgba(0, 0, 0, 0.06);
--text-hi: rgba(28, 28, 28, 0.92);
--text: rgba(51, 51, 51, 0.80);
--text-mid: rgba(51, 51, 51, 0.72);
--text-low: rgba(75, 75, 75, 0.60);
--text-faint: rgba(105, 105, 105, 0.50);
--shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.08);
--shadow-md: 0 1px 8px rgba(0, 0, 0, 0.08);
--theme-rgb: 0, 138, 0;
--theme: rgba(0, 138, 0, 0.95);
--theme-dim: rgba(0, 138, 0, 0.55);
--theme-border: rgba(0, 138, 0, 0.45);
--theme-bg: rgba(0, 138, 0, 0.10);
--theme-glow: rgba(0, 138, 0, 0.55);
--hero-gray: rgba(74, 74, 74, 0.85);
--gold: rgba(154, 116, 32, 0.80);
--gold-border: rgba(154, 116, 32, 0.35);
--gold-bg: rgba(154, 116, 32, 0.07);
--ok-bg: rgba(22, 163, 74, 0.07);
--ok-bd: rgba(22, 163, 74, 0.30);
--warn-bg: rgba(180, 83, 9, 0.07);
--warn-bd: rgba(180, 83, 9, 0.30);
--err: rgba(185, 28, 28, 0.85);
--err-bg: rgba(185, 28, 28, 0.07);
--err-bd: rgba(185, 28, 28, 0.30);
--info: rgba(37, 99, 235, 0.85);
--info-bg: rgba(37, 99, 235, 0.07);
--info-bd: rgba(37, 99, 235, 0.30);
}
/* ── 5. Universal topnav layout ──────────────────────────────────────── */
.topnav {
position: sticky;
top: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: space-between;
height: var(--header-h);
padding: 0 var(--pad);
background: var(--nav-bg);
border-bottom: 1px solid rgba(var(--nav-hue-rgb), 0.12);
box-shadow: 0 1px 0 rgba(var(--nav-hue-rgb), 0.08);
color: rgba(var(--nav-fg-rgb), 0.90);
}
.nav-brand {
display: flex;
align-items: center;
gap: 0.55rem;
font-size: 0.92rem;
font-weight: 600;
letter-spacing: 0.01em;
color: rgba(var(--nav-hue-rgb), 0.90);
text-shadow:
0 0 8px rgba(var(--nav-hue-rgb), 0.40),
0 0 20px rgba(var(--nav-hue-rgb), 0.20);
}
.brand-mark img {
height: 2rem;
width: auto;
display: block;
filter:
drop-shadow(0 0 6px rgba(var(--nav-hue-rgb), 0.55))
drop-shadow(0 0 14px rgba(var(--nav-hue-rgb), 0.30));
}
.right-cluster {
display: flex;
align-items: center;
gap: 0.5rem;
}
.credit-balance {
display: flex;
align-items: baseline;
gap: 0.35rem;
font-size: 0.72rem;
color: rgba(var(--nav-muted-rgb), 0.75);
background: rgba(var(--nav-hue-rgb), 0.07);
border: 1px solid rgba(var(--nav-hue-rgb), 0.18);
border-radius: 999px;
padding: 0.15rem 0.65rem;
white-space: nowrap;
transition: background 0.15s, border-color 0.15s;
}
.credit-balance-label {
font-size: 0.67rem;
color: rgba(var(--nav-muted-rgb), 0.55);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.credit-balance b {
font-weight: 600;
color: rgba(var(--nav-hue-rgb), 0.90);
}
.settings-cog,
.signout-btn {
display: flex;
align-items: center;
justify-content: center;
width: var(--btn-size);
height: var(--btn-size);
padding: 0;
background: transparent;
border: 1px solid transparent;
border-radius: 6px;
color: rgba(var(--nav-muted-rgb), 0.60);
cursor: pointer;
transition: color 0.15s, background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.settings-cog svg,
.signout-btn svg {
width: 1rem;
height: 1rem;
pointer-events: none;
}
.settings-cog:hover {
color: rgba(var(--nav-hue-rgb), 0.90);
background: rgba(var(--nav-hue-rgb), 0.10);
border-color: rgba(var(--nav-hue-rgb), 0.20);
box-shadow: 0 0 8px rgba(var(--nav-hue-rgb), 0.20);
}
.signout-btn:hover {
color: rgba(255, 80, 80, 0.90);
background: rgba(255, 80, 80, 0.08);
border-color: rgba(255, 80, 80, 0.20);
}
.settings-cog:focus-visible,
.signout-btn:focus-visible {
outline: 2px solid rgba(var(--nav-hue-rgb), 0.70);
outline-offset: 2px;
}
/* ── 6. Tile head ────────────────────────────────────────────────────── */
.tile-head {
background: var(--tile-head-bg);
color: rgba(var(--nav-fg-rgb), 0.85);
border-bottom: 1px solid rgba(var(--nav-hue-rgb), 0.10);
}
/* ── 7. Scrollbar (WebKit) ───────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
background: var(--scroll-thumb);
border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hi); }
/* ── 8. Focus ring (global) ──────────────────────────────────────────── */
:focus-visible {
outline: 2px solid rgba(var(--nav-hue-rgb), 0.70);
outline-offset: 2px;
}