/* BestWayToLearn.AI — Theme presets (5 palettes & styles) */

/* ── 1. Neural · 神经网络（默认深色科技） ── */
html[data-theme="neural"] {
  --bg-deep: #060a10;
  --bg-surface: #0d1219;
  --bg-elevated: #141b26;
  --bg-card: #111820;
  --border: rgba(45, 212, 191, 0.12);
  --border-strong: rgba(45, 212, 191, 0.28);
  --text-primary: #e8edf4;
  --text-secondary: #8b9cb3;
  --text-muted: #5a6d85;
  --accent-teal: #2dd4bf;
  --accent-teal-dim: rgba(45, 212, 191, 0.15);
  --accent-amber: #f59e0b;
  --accent-amber-dim: rgba(245, 158, 11, 0.12);
  --accent-rose: #fb7185;
  --accent-violet: #a78bfa;
  --accent-sky: #38bdf8;
  --accent-sky-dim: rgba(56, 189, 248, 0.14);
  --font-display: 'Noto Serif SC', serif;
  --font-body: 'Outfit', sans-serif;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --shadow-glow: 0 10px 28px rgba(0, 0, 0, 0.28);
  --bg-glow-1: rgba(45, 212, 191, 0.07);
  --bg-glow-2: rgba(167, 139, 250, 0.05);
  --canvas-rgb: 45, 212, 191;
  --canvas-opacity: 0.32;
  --logo-accent: #2dd4bf;
}

html[data-theme="neural"] #phase-view-path {
  --path-accent: #7dd3c7;
  --path-accent-strong: #5eead4;
  --path-surface: #101820;
  --path-surface-raised: #151d28;
  --path-surface-hover: #1a2433;
}

html[data-theme="neural"] #phase-validate {
  --validate-accent: #94a8d4;
  --validate-surface: #101820;
  --validate-surface-raised: #161e2a;
  --validate-surface-hover: #1b2433;
}

/* ── 2. Aurora · 极光（冷蓝紫渐变） ── */
html[data-theme="aurora"] {
  --bg-deep: #070b18;
  --bg-surface: #0c1228;
  --bg-elevated: #131b38;
  --bg-card: #10162e;
  --border: rgba(96, 165, 250, 0.14);
  --border-strong: rgba(96, 165, 250, 0.32);
  --text-primary: #e8ecf8;
  --text-secondary: #8b9cc8;
  --text-muted: #5a6a94;
  --accent-teal: #60a5fa;
  --accent-teal-dim: rgba(96, 165, 250, 0.16);
  --accent-amber: #f472b6;
  --accent-amber-dim: rgba(244, 114, 182, 0.12);
  --accent-rose: #fb7185;
  --accent-violet: #818cf8;
  --accent-sky: #38bdf8;
  --accent-sky-dim: rgba(56, 189, 248, 0.16);
  --font-display: 'Outfit', sans-serif;
  --font-body: 'Outfit', sans-serif;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --shadow-glow: 0 12px 36px rgba(30, 58, 138, 0.22);
  --bg-glow-1: rgba(96, 165, 250, 0.12);
  --bg-glow-2: rgba(129, 140, 248, 0.1);
  --canvas-rgb: 96, 165, 250;
  --canvas-opacity: 0.28;
  --logo-accent: #93c5fd;
}

html[data-theme="aurora"] #phase-view-path {
  --path-accent: #7eb8ff;
  --path-accent-strong: #60a5fa;
  --path-surface: #0e1430;
  --path-surface-raised: #131b3a;
  --path-surface-hover: #182248;
  --path-phase-1: #7eb8ff;
  --path-phase-2: #a78bfa;
  --path-phase-3: #c4b5fd;
  --path-phase-4: #f0abfc;
}

html[data-theme="aurora"] #phase-validate {
  --validate-accent: #93c5fd;
  --validate-accent-strong: #bfdbfe;
  --validate-surface: #0e1430;
  --validate-surface-raised: #131b3a;
  --validate-surface-hover: #182248;
  --validate-success: #67e8f9;
}

/* ── 3. Sunrise · 晨曦（暖色浅色） ── */
html[data-theme="sunrise"] {
  --bg-deep: #faf7f2;
  --bg-surface: #fffdf9;
  --bg-elevated: #ffffff;
  --bg-card: #ffffff;
  --border: rgba(234, 88, 12, 0.14);
  --border-strong: rgba(234, 88, 12, 0.28);
  --text-primary: #1c1917;
  --text-secondary: #57534e;
  --text-muted: #a8a29e;
  --accent-teal: #ea580c;
  --accent-teal-dim: rgba(234, 88, 12, 0.1);
  --accent-amber: #d97706;
  --accent-amber-dim: rgba(217, 119, 6, 0.1);
  --accent-rose: #e11d48;
  --accent-violet: #c026d3;
  --accent-sky: #0284c7;
  --accent-sky-dim: rgba(2, 132, 199, 0.1);
  --font-display: 'Noto Serif SC', serif;
  --font-body: 'Outfit', sans-serif;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --shadow-glow: 0 10px 30px rgba(120, 53, 15, 0.08);
  --bg-glow-1: rgba(251, 146, 60, 0.14);
  --bg-glow-2: rgba(253, 186, 116, 0.12);
  --canvas-rgb: 234, 88, 12;
  --canvas-opacity: 0.08;
  --logo-accent: #ea580c;
}

html[data-theme="sunrise"] .locale-content-notice {
  background: rgba(234, 88, 12, 0.06);
  border-color: rgba(234, 88, 12, 0.2);
}

html[data-theme="sunrise"] #phase-view-path {
  --path-accent: #ea580c;
  --path-accent-strong: #c2410c;
  --path-surface: #fff7ed;
  --path-surface-raised: #ffffff;
  --path-surface-hover: #ffedd5;
  --path-text-soft: #78716c;
  --path-phase-1: #ea580c;
  --path-phase-2: #d97706;
  --path-phase-3: #ca8a04;
  --path-phase-4: #be185d;
}

html[data-theme="sunrise"] #phase-validate {
  --validate-accent: #c2410c;
  --validate-accent-strong: #9a3412;
  --validate-surface: #fff7ed;
  --validate-surface-raised: #ffffff;
  --validate-surface-hover: #ffedd5;
  --validate-text-soft: #78716c;
  --validate-success: #059669;
}

/* ── 4. Forest · 森林（深绿自然） ── */
html[data-theme="forest"] {
  --bg-deep: #080f0a;
  --bg-surface: #0d1610;
  --bg-elevated: #121f16;
  --bg-card: #101a13;
  --border: rgba(74, 222, 128, 0.12);
  --border-strong: rgba(74, 222, 128, 0.26);
  --text-primary: #e8f0ea;
  --text-secondary: #8ba894;
  --text-muted: #5a6f60;
  --accent-teal: #4ade80;
  --accent-teal-dim: rgba(74, 222, 128, 0.12);
  --accent-amber: #fbbf24;
  --accent-amber-dim: rgba(251, 191, 36, 0.1);
  --accent-rose: #f87171;
  --accent-violet: #86efac;
  --accent-sky: #34d399;
  --accent-sky-dim: rgba(52, 211, 153, 0.12);
  --font-display: 'Noto Serif SC', serif;
  --font-body: 'Outfit', sans-serif;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --shadow-glow: 0 8px 24px rgba(0, 0, 0, 0.32);
  --bg-glow-1: rgba(74, 222, 128, 0.06);
  --bg-glow-2: rgba(52, 211, 153, 0.05);
  --canvas-rgb: 74, 222, 128;
  --canvas-opacity: 0.22;
  --logo-accent: #4ade80;
}

html[data-theme="forest"] #phase-view-path {
  --path-accent: #6ee7b7;
  --path-accent-strong: #4ade80;
  --path-surface: #0e1812;
  --path-surface-raised: #132019;
  --path-surface-hover: #182820;
  --path-phase-1: #4ade80;
  --path-phase-2: #34d399;
  --path-phase-3: #a3e635;
  --path-phase-4: #fbbf24;
}

html[data-theme="forest"] #phase-validate {
  --validate-accent: #6ee7b7;
  --validate-surface: #0e1812;
  --validate-surface-raised: #132019;
  --validate-surface-hover: #182820;
  --validate-success: #4ade80;
}

/* ── 5. Ink · 水墨（冷灰浅色极简） ── */
html[data-theme="ink"] {
  --bg-deep: #f1f5f9;
  --bg-surface: #ffffff;
  --bg-elevated: #f8fafc;
  --bg-card: #ffffff;
  --border: rgba(79, 70, 229, 0.12);
  --border-strong: rgba(79, 70, 229, 0.24);
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #94a3b8;
  --accent-teal: #4f46e5;
  --accent-teal-dim: rgba(79, 70, 229, 0.08);
  --accent-amber: #0ea5e9;
  --accent-amber-dim: rgba(14, 165, 233, 0.08);
  --accent-rose: #e11d48;
  --accent-violet: #6366f1;
  --accent-sky: #0284c7;
  --accent-sky-dim: rgba(2, 132, 199, 0.08);
  --font-display: 'IBM Plex Mono', monospace;
  --font-body: 'Outfit', sans-serif;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --shadow-glow: 0 8px 24px rgba(15, 23, 42, 0.06);
  --bg-glow-1: rgba(99, 102, 241, 0.08);
  --bg-glow-2: rgba(148, 163, 184, 0.12);
  --canvas-rgb: 99, 102, 241;
  --canvas-opacity: 0.06;
  --logo-accent: #4f46e5;
}

html[data-theme="ink"] .locale-content-notice {
  background: rgba(79, 70, 229, 0.06);
  border-color: rgba(79, 70, 229, 0.18);
}

html[data-theme="ink"] #phase-view-path {
  --path-accent: #4f46e5;
  --path-accent-strong: #4338ca;
  --path-surface: #f8fafc;
  --path-surface-raised: #ffffff;
  --path-surface-hover: #f1f5f9;
  --path-text-soft: #64748b;
  --path-phase-1: #4f46e5;
  --path-phase-2: #0ea5e9;
  --path-phase-3: #8b5cf6;
  --path-phase-4: #ec4899;
}

html[data-theme="ink"] #phase-validate {
  --validate-accent: #6366f1;
  --validate-accent-strong: #4f46e5;
  --validate-surface: #f8fafc;
  --validate-surface-raised: #ffffff;
  --validate-surface-hover: #f1f5f9;
  --validate-text-soft: #64748b;
  --validate-success: #059669;
}

html[lang="en"][data-theme="ink"] {
  --font-display: 'IBM Plex Mono', monospace;
}

/* ── 6. Ember · 炽焰（暗红暖金） ── */
html[data-theme="ember"] {
  --bg-deep: #12080a;
  --bg-surface: #1a0c10;
  --bg-elevated: #221018;
  --bg-card: #1e0e14;
  --border: rgba(244, 63, 94, 0.14);
  --border-strong: rgba(244, 63, 94, 0.3);
  --text-primary: #fce8ec;
  --text-secondary: #c9a0a8;
  --text-muted: #7a5560;
  --accent-teal: #f43f5e;
  --accent-teal-dim: rgba(244, 63, 94, 0.14);
  --accent-amber: #fbbf24;
  --accent-amber-dim: rgba(251, 191, 36, 0.12);
  --accent-rose: #fb7185;
  --accent-violet: #fda4af;
  --accent-sky: #f97316;
  --accent-sky-dim: rgba(249, 115, 22, 0.12);
  --font-display: 'Noto Serif SC', serif;
  --font-body: 'Outfit', sans-serif;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --shadow-glow: 0 12px 32px rgba(80, 10, 20, 0.35);
  --bg-glow-1: rgba(244, 63, 94, 0.1);
  --bg-glow-2: rgba(251, 191, 36, 0.06);
  --canvas-rgb: 244, 63, 94;
  --canvas-opacity: 0.26;
  --logo-accent: #fb7185;
}

html[data-theme="ember"] #phase-view-path {
  --path-accent: #fb7185;
  --path-accent-strong: #f43f5e;
  --path-surface: #180c10;
  --path-surface-raised: #1f1016;
  --path-surface-hover: #26141c;
  --path-phase-1: #f43f5e;
  --path-phase-2: #f97316;
  --path-phase-3: #fbbf24;
  --path-phase-4: #fda4af;
}

html[data-theme="ember"] #phase-validate {
  --validate-accent: #fda4af;
  --validate-surface: #180c10;
  --validate-surface-raised: #1f1016;
  --validate-surface-hover: #26141c;
  --validate-success: #fbbf24;
}

/* ── 7. Ocean · 深海（藏青海蓝） ── */
html[data-theme="ocean"] {
  --bg-deep: #04121a;
  --bg-surface: #071c28;
  --bg-elevated: #0c2636;
  --bg-card: #092030;
  --border: rgba(34, 211, 238, 0.14);
  --border-strong: rgba(34, 211, 238, 0.28);
  --text-primary: #e0f4fa;
  --text-secondary: #8ab4c4;
  --text-muted: #4d7284;
  --accent-teal: #22d3ee;
  --accent-teal-dim: rgba(34, 211, 238, 0.12);
  --accent-amber: #38bdf8;
  --accent-amber-dim: rgba(56, 189, 248, 0.1);
  --accent-rose: #67e8f9;
  --accent-violet: #7dd3fc;
  --accent-sky: #0ea5e9;
  --accent-sky-dim: rgba(14, 165, 233, 0.12);
  --font-display: 'Outfit', sans-serif;
  --font-body: 'Outfit', sans-serif;
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --shadow-glow: 0 14px 40px rgba(2, 40, 60, 0.35);
  --bg-glow-1: rgba(34, 211, 238, 0.08);
  --bg-glow-2: rgba(14, 165, 233, 0.06);
  --canvas-rgb: 34, 211, 238;
  --canvas-opacity: 0.24;
  --logo-accent: #67e8f9;
}

html[data-theme="ocean"] #phase-view-path {
  --path-accent: #22d3ee;
  --path-accent-strong: #06b6d4;
  --path-surface: #071c28;
  --path-surface-raised: #0c2636;
  --path-surface-hover: #103040;
  --path-phase-1: #22d3ee;
  --path-phase-2: #38bdf8;
  --path-phase-3: #67e8f9;
  --path-phase-4: #7dd3fc;
}

html[data-theme="ocean"] #phase-validate {
  --validate-accent: #67e8f9;
  --validate-surface: #071c28;
  --validate-surface-raised: #0c2636;
  --validate-surface-hover: #103040;
  --validate-success: #22d3ee;
}

/* ── 8. Lavender · 薰衣草（浅紫柔和） ── */
html[data-theme="lavender"] {
  --bg-deep: #faf8ff;
  --bg-surface: #ffffff;
  --bg-elevated: #f5f0ff;
  --bg-card: #ffffff;
  --border: rgba(147, 51, 234, 0.14);
  --border-strong: rgba(147, 51, 234, 0.26);
  --text-primary: #2e1065;
  --text-secondary: #6b5b8a;
  --text-muted: #a78bb8;
  --accent-teal: #9333ea;
  --accent-teal-dim: rgba(147, 51, 234, 0.08);
  --accent-amber: #c026d3;
  --accent-amber-dim: rgba(192, 38, 211, 0.08);
  --accent-rose: #e11d48;
  --accent-violet: #a855f7;
  --accent-sky: #7c3aed;
  --accent-sky-dim: rgba(124, 58, 237, 0.08);
  --font-display: 'Noto Serif SC', serif;
  --font-body: 'Outfit', sans-serif;
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 26px;
  --shadow-glow: 0 10px 32px rgba(88, 28, 135, 0.08);
  --bg-glow-1: rgba(192, 132, 252, 0.16);
  --bg-glow-2: rgba(233, 213, 255, 0.5);
  --canvas-rgb: 168, 85, 247;
  --canvas-opacity: 0.07;
  --logo-accent: #9333ea;
}

html[data-theme="lavender"] .locale-content-notice {
  background: rgba(147, 51, 234, 0.06);
  border-color: rgba(147, 51, 234, 0.18);
}

html[data-theme="lavender"] #phase-view-path {
  --path-accent: #9333ea;
  --path-accent-strong: #7e22ce;
  --path-surface: #f5f0ff;
  --path-surface-raised: #ffffff;
  --path-surface-hover: #ede9fe;
  --path-text-soft: #7c6b94;
  --path-phase-1: #9333ea;
  --path-phase-2: #a855f7;
  --path-phase-3: #c026d3;
  --path-phase-4: #e879f9;
}

html[data-theme="lavender"] #phase-validate {
  --validate-accent: #a855f7;
  --validate-accent-strong: #9333ea;
  --validate-surface: #f5f0ff;
  --validate-surface-raised: #ffffff;
  --validate-surface-hover: #ede9fe;
  --validate-text-soft: #7c6b94;
  --validate-success: #059669;
}

/* ── 9. Noir · 曜黑（黑金奢华） ── */
html[data-theme="noir"] {
  --bg-deep: #0a0a0a;
  --bg-surface: #111111;
  --bg-elevated: #1a1a1a;
  --bg-card: #141414;
  --border: rgba(212, 175, 55, 0.16);
  --border-strong: rgba(212, 175, 55, 0.32);
  --text-primary: #f5f5f5;
  --text-secondary: #a3a3a3;
  --text-muted: #666666;
  --accent-teal: #d4af37;
  --accent-teal-dim: rgba(212, 175, 55, 0.1);
  --accent-amber: #f5d061;
  --accent-amber-dim: rgba(245, 208, 97, 0.1);
  --accent-rose: #ef4444;
  --accent-violet: #e5c76b;
  --accent-sky: #a8a8a8;
  --accent-sky-dim: rgba(168, 168, 168, 0.1);
  --font-display: 'Noto Serif SC', serif;
  --font-body: 'Outfit', sans-serif;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --shadow-glow: 0 8px 28px rgba(0, 0, 0, 0.5);
  --bg-glow-1: rgba(212, 175, 55, 0.04);
  --bg-glow-2: rgba(255, 255, 255, 0.02);
  --canvas-rgb: 212, 175, 55;
  --canvas-opacity: 0.14;
  --logo-accent: #d4af37;
}

html[data-theme="noir"] #phase-view-path {
  --path-accent: #d4af37;
  --path-accent-strong: #b8942e;
  --path-surface: #111111;
  --path-surface-raised: #1a1a1a;
  --path-surface-hover: #222222;
  --path-phase-1: #d4af37;
  --path-phase-2: #c9a227;
  --path-phase-3: #a8a8a8;
  --path-phase-4: #f5d061;
}

html[data-theme="noir"] #phase-validate {
  --validate-accent: #d4af37;
  --validate-surface: #111111;
  --validate-surface-raised: #1a1a1a;
  --validate-surface-hover: #222222;
  --validate-success: #d4af37;
}

/* ── 10. Neon · 霓虹（赛博粉青） ── */
html[data-theme="neon"] {
  --bg-deep: #0d0221;
  --bg-surface: #140433;
  --bg-elevated: #1a0544;
  --bg-card: #16053a;
  --border: rgba(255, 0, 170, 0.18);
  --border-strong: rgba(255, 0, 170, 0.36);
  --text-primary: #f0e6ff;
  --text-secondary: #b8a0d8;
  --text-muted: #6e5a8a;
  --accent-teal: #ff00aa;
  --accent-teal-dim: rgba(255, 0, 170, 0.14);
  --accent-amber: #00fff0;
  --accent-amber-dim: rgba(0, 255, 240, 0.1);
  --accent-rose: #ff6bcb;
  --accent-violet: #bf7fff;
  --accent-sky: #00fff0;
  --accent-sky-dim: rgba(0, 255, 240, 0.12);
  --font-display: 'IBM Plex Mono', monospace;
  --font-body: 'Outfit', sans-serif;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --shadow-glow: 0 0 24px rgba(255, 0, 170, 0.18), 0 12px 32px rgba(0, 0, 0, 0.4);
  --bg-glow-1: rgba(255, 0, 170, 0.1);
  --bg-glow-2: rgba(0, 255, 240, 0.06);
  --canvas-rgb: 255, 0, 170;
  --canvas-opacity: 0.3;
  --logo-accent: #00fff0;
}

html[data-theme="neon"] #phase-view-path {
  --path-accent: #ff00aa;
  --path-accent-strong: #e6009a;
  --path-surface: #140433;
  --path-surface-raised: #1a0544;
  --path-surface-hover: #200655;
  --path-phase-1: #ff00aa;
  --path-phase-2: #00fff0;
  --path-phase-3: #bf7fff;
  --path-phase-4: #ff6bcb;
}

html[data-theme="neon"] #phase-validate {
  --validate-accent: #bf7fff;
  --validate-surface: #140433;
  --validate-surface-raised: #1a0544;
  --validate-surface-hover: #200655;
  --validate-success: #00fff0;
}

html[lang="en"][data-theme="neon"] {
  --font-display: 'IBM Plex Mono', monospace;
}

/* ── Theme picker UI ── */
.header-prefs-label {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.pref-theme-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-height: min(320px, 52vh);
  overflow-y: auto;
  padding-right: 0.1rem;
  scrollbar-width: thin;
}

.pref-theme-btn {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  padding: 0.45rem 0.55rem;
  background: var(--bg-elevated);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 0.78rem;
  text-align: left;
  cursor: pointer;
  transition: var(--transition);
}

.pref-theme-btn:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.pref-theme-btn.active {
  border-color: var(--accent-teal);
  color: var(--accent-teal);
  background: var(--accent-teal-dim);
  box-shadow: 0 0 0 1px var(--accent-teal-dim);
}

.pref-theme-swatch {
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.pref-theme-btn[data-theme="neural"] .pref-theme-swatch {
  background: linear-gradient(135deg, #060a10 45%, #2dd4bf 100%);
}

.pref-theme-btn[data-theme="aurora"] .pref-theme-swatch {
  background: linear-gradient(135deg, #070b18 40%, #60a5fa 55%, #818cf8 100%);
}

.pref-theme-btn[data-theme="sunrise"] .pref-theme-swatch {
  background: linear-gradient(135deg, #faf7f2 35%, #fb923c 70%, #ea580c 100%);
}

.pref-theme-btn[data-theme="forest"] .pref-theme-swatch {
  background: linear-gradient(135deg, #080f0a 45%, #4ade80 100%);
}

.pref-theme-btn[data-theme="ink"] .pref-theme-swatch {
  background: linear-gradient(135deg, #f1f5f9 40%, #4f46e5 100%);
}

.pref-theme-btn[data-theme="ember"] .pref-theme-swatch {
  background: linear-gradient(135deg, #12080a 45%, #f43f5e 70%, #fbbf24 100%);
}

.pref-theme-btn[data-theme="ocean"] .pref-theme-swatch {
  background: linear-gradient(135deg, #04121a 40%, #22d3ee 65%, #0ea5e9 100%);
}

.pref-theme-btn[data-theme="lavender"] .pref-theme-swatch {
  background: linear-gradient(135deg, #faf8ff 35%, #c084fc 70%, #9333ea 100%);
}

.pref-theme-btn[data-theme="noir"] .pref-theme-swatch {
  background: linear-gradient(135deg, #0a0a0a 50%, #d4af37 100%);
}

.pref-theme-btn[data-theme="neon"] .pref-theme-swatch {
  background: linear-gradient(135deg, #0d0221 40%, #ff00aa 55%, #00fff0 100%);
}

.pref-theme-name {
  flex: 1;
  line-height: 1.2;
}

.header-prefs-divider {
  height: 1px;
  margin: 0.85rem 0;
  background: var(--border);
}

.header-prefs-toggle .header-prefs-icon--theme {
  font-size: 0.85rem;
  line-height: 1;
}

/* Light themes — poster overlays follow page background */
html[data-theme="sunrise"] .page-poster-overlay,
html[data-theme="sunrise"] .page-poster-overlay-teal,
html[data-theme="sunrise"] .page-poster-overlay-amber,
html[data-theme="sunrise"] .page-poster-overlay-gold,
html[data-theme="sunrise"] .page-poster-overlay-violet,
html[data-theme="sunrise"] .page-poster-overlay-rose,
html[data-theme="sunrise"] .page-poster-overlay-validate,
html[data-theme="sunrise"] .page-poster-overlay-sky,
html[data-theme="sunrise"] .page-poster-overlay-path,
html[data-theme="ink"] .page-poster-overlay,
html[data-theme="ink"] .page-poster-overlay-teal,
html[data-theme="ink"] .page-poster-overlay-amber,
html[data-theme="ink"] .page-poster-overlay-gold,
html[data-theme="ink"] .page-poster-overlay-violet,
html[data-theme="ink"] .page-poster-overlay-rose,
html[data-theme="ink"] .page-poster-overlay-validate,
html[data-theme="ink"] .page-poster-overlay-sky,
html[data-theme="ink"] .page-poster-overlay-path,
html[data-theme="lavender"] .page-poster-overlay,
html[data-theme="lavender"] .page-poster-overlay-teal,
html[data-theme="lavender"] .page-poster-overlay-amber,
html[data-theme="lavender"] .page-poster-overlay-gold,
html[data-theme="lavender"] .page-poster-overlay-violet,
html[data-theme="lavender"] .page-poster-overlay-rose,
html[data-theme="lavender"] .page-poster-overlay-validate,
html[data-theme="lavender"] .page-poster-overlay-sky,
html[data-theme="lavender"] .page-poster-overlay-path {
  background:
    linear-gradient(100deg, color-mix(in srgb, var(--bg-deep) 94%, transparent) 0%, color-mix(in srgb, var(--bg-deep) 55%, transparent) 44%, transparent 70%),
    linear-gradient(to top, color-mix(in srgb, var(--bg-deep) 70%, transparent) 0%, transparent 50%);
}