/* ============================================================
 * TV Watching — color themes (35: 19 dark + 16 light)
 * Shared component rules + per-theme CSS variables
 * ============================================================ */

/* ---- shared themed surfaces (all non-default themes) ---- */

[data-theme] body {
  background-attachment: fixed;
}

[data-theme] .hero-panel,
[data-theme] .card,
[data-theme] .new-item,
[data-theme] .empty-state,
[data-theme] .modal,
[data-theme] .search-results,
[data-theme] .season-block,
[data-theme] .sidebar,
[data-theme] .sidebar-stats,
[data-theme] .sidebar-filter,
[data-theme] .shelf,
[data-theme] .episode-card,
[data-theme] .search-shelf {
  background: var(--bg-elev);
  border-color: var(--border);
  box-shadow: var(--shadow);
}

[data-theme] .sidebar {
  background: var(--sidebar-bg, linear-gradient(180deg, var(--bg-elev) 0%, var(--bg) 100%));
  box-shadow: none;
}

[data-theme] .search-shelf {
  background: var(--shelf-bg, color-mix(in srgb, var(--bg-elev) 88%, transparent));
  border-color: var(--shelf-border, var(--border-subtle, var(--border)));
  box-shadow: none;
}

[data-theme] .shelf {
  background: var(--shelf-bg, color-mix(in srgb, var(--bg-elev) 88%, transparent));
  border-color: var(--shelf-border, var(--border-subtle, var(--border)));
  box-shadow: none;
}

[data-theme] .sidebar-stats {
  background: var(--bg-elev-2);
  box-shadow: none;
}

[data-theme] .sidebar-stats strong {
  color: var(--accent);
}

[data-theme] .sidebar-stats .stat-green {
  color: var(--good) !important;
}

[data-theme] .new-item:hover {
  border-color: var(--accent);
}

[data-theme] .episode-card {
  box-shadow: var(--shadow);
}

[data-theme] .episode-card:hover {
  border-color: var(--border-strong);
}

[data-theme] .stat-card,
[data-theme] .season-header,
[data-theme] .provider-pill,
[data-theme] .search-result:hover {
  background: var(--bg-elev-2);
  border-color: var(--border);
}

[data-theme] .card .poster,
[data-theme] .new-item img.poster {
  background: var(--bg-elev-2);
}

[data-theme] .empty-state {
  border-style: solid;
  color: var(--text-muted);
}

[data-theme] .sync-progress {
  background: var(--bg-elev);
  border-bottom-color: var(--border);
}

[data-theme] button:not(.primary):not(.ghost):not(.icon-btn):not(.theme-swatch):not(.tab-btn):not(.sync-btn):not(.shelf-scroll):not(.btn-mark-watched):not(.btn-dismiss):not(.notification-fab):not(.notification-item):not(.dns-optout-allow):not(.dns-optout-continue):not(.user-menu-item):not(.notification-panel-tab) {
  background: var(--bg-elev-2);
  border-color: var(--border);
  color: var(--text);
}

[data-theme] button.ghost {
  background: var(--ghost-bg);
  border-color: var(--border);
  color: var(--text-muted);
}

[data-theme] button.ghost:hover {
  background: var(--bg-elev-2);
  color: var(--text);
  border-color: var(--border-strong);
}

[data-theme] button.primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  border-color: transparent;
  color: var(--accent-text);
  font-weight: 800;
  box-shadow: 0 0 20px var(--accent-glow);
}

[data-theme] button.primary:hover {
  background: linear-gradient(135deg, var(--accent-hover), var(--accent-strong));
  color: var(--accent-text-hover);
}

[data-theme] .sync-btn {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark, var(--accent-strong)));
  color: var(--accent-text, #fff);
  box-shadow: 0 0 20px var(--accent-glow, transparent);
}

[data-theme] .tab-strip {
  background: var(--bg-elev);
  border-color: var(--border);
  box-shadow: var(--shadow);
}

[data-theme] .tab-btn {
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-left: 4px solid transparent;
}

[data-theme] .tab-btn:hover {
  color: var(--text);
  background: var(--tab-hover);
}

[data-theme] .tab-btn.active {
  background: var(--tab-active-bg);
  color: var(--text);
  border: none;
  border-left: 4px solid var(--accent);
  box-shadow: none;
}

[data-theme] input[type="search"],
[data-theme] input[type="text"],
[data-theme] select,
[data-theme] .search-input,
[data-theme] .list-filter-input {
  background: var(--bg-elev-2);
  border-color: var(--border);
  color: var(--text);
}

[data-theme] input[type="search"]:focus,
[data-theme] .list-filter-input:focus,
[data-theme] select:focus {
  border-color: var(--border-strong);
  outline: none;
  box-shadow: 0 0 0 2px var(--accent-soft);
}

[data-theme] .card:hover,
[data-theme] .new-item:hover {
  border-color: var(--accent);
  box-shadow: 0 18px 40px var(--accent-glow);
}

[data-theme] .sync-progress-fill,
[data-theme] .progress-fill {
  background: var(--progress-fill);
}

[data-theme] .sync-progress-bar,
[data-theme] .progress-bar {
  background: var(--progress-track);
}

[data-theme] .badge-new {
  background: var(--accent);
  color: var(--accent-text);
}

[data-theme] .stat-value {
  color: var(--accent);
}

[data-theme] .stat-card:nth-child(2) .stat-value {
  color: var(--accent-strong);
}

[data-theme] .hero-panel {
  background: var(--hero-bg);
  border-color: var(--border-strong);
}

[data-theme] .modal-header {
  border-bottom-color: var(--border);
}

[data-theme] .episode-row {
  border-top-color: var(--border-subtle);
}

[data-theme] .icon-btn {
  background: var(--bg-elev-2);
  border-color: var(--border);
  color: var(--text-muted);
}

[data-theme] .icon-btn:hover {
  color: var(--text);
  border-color: var(--border-strong);
  background: var(--bg-elev);
}

[data-theme] .mobile-app-support-btn:hover:not(:disabled),
[data-theme] .mobile-app-support-btn:focus-visible {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark, var(--accent-strong)));
  color: var(--accent-text);
}

/* ---- 1. Broadcast (yellow + green) ---- */

:root[data-theme="broadcast"] {
  --bg: #060504;
  --bg-elev: #221e14;
  --bg-elev-2: #2e281c;
  --border: #6a5c38;
  --border-strong: #8a7848;
  --border-subtle: rgba(106, 92, 56, 0.45);
  --text: #faf6ec;
  --text-muted: #d4c498;
  --text-dim: #a89868;
  --accent: #f5c518;
  --accent-dark: #e0a800;
  --accent-strong: #2ecc71;
  --accent-soft: rgba(245, 197, 24, 0.22);
  --accent-glow: rgba(245, 197, 24, 0.15);
  --accent-text: #1a1400;
  --accent-text-hover: #041208;
  --accent-hover: #ffd84d;
  --good: #2ecc71;
  --good-soft: rgba(46, 204, 113, 0.22);
  --ghost-bg: rgba(46, 36, 20, 0.45);
  --tab-hover: rgba(245, 197, 24, 0.08);
  --tab-active-bg: linear-gradient(135deg, rgba(245, 197, 24, 0.32), rgba(46, 204, 113, 0.14));
  --tab-active-border: rgba(245, 197, 24, 0.55);
  --tab-active-inset: rgba(255, 255, 255, 0.06);
  --track-bg: rgba(106, 92, 56, 0.55);
  --hero-bg: linear-gradient(135deg, #2a2418 0%, #221e14 100%);
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

[data-theme="broadcast"] body {
  background:
    radial-gradient(circle at 15% 0%, rgba(245, 197, 24, 0.14) 0%, transparent 45%),
    radial-gradient(circle at 85% 10%, rgba(46, 204, 113, 0.08) 0%, transparent 40%),
    linear-gradient(180deg, #0a0805 0%, #060504 100%);
}

/* ---- watchnext (landing blues + brand gold/green) ---- */

:root[data-theme="watchnext"] {
  --bg: #0a0c10;
  --bg-elev: #12161e;
  --bg-elev-2: #1a2030;
  --border: #3a4558;
  --border-strong: #505c72;
  --border-subtle: rgba(58, 69, 88, 0.45);
  --text: #eef2f8;
  --text-muted: #98a4b8;
  --text-dim: #687488;
  --accent: #f5c518;
  --accent-dark: #22b564;
  --accent-strong: #6aa3ff;
  --accent-soft: rgba(245, 197, 24, 0.18);
  --accent-glow: rgba(106, 163, 255, 0.15);
  --accent-text: #080b10;
  --accent-text-hover: #080b10;
  --accent-hover: #f7d045;
  --good: #2ecc71;
  --good-soft: rgba(46, 204, 113, 0.18);
  --watching: #2ecc71;
  --watching-soft: rgba(46, 204, 113, 0.18);
  --ghost-bg: rgba(26, 32, 48, 0.5);
  --tab-hover: rgba(106, 163, 255, 0.08);
  --tab-active-bg: linear-gradient(135deg, rgba(106, 163, 255, 0.22), rgba(46, 204, 113, 0.12));
  --tab-active-border: rgba(106, 163, 255, 0.45);
  --tab-active-inset: rgba(255, 255, 255, 0.06);
  --track-bg: rgba(58, 69, 88, 0.5);
  --hero-bg: linear-gradient(135deg, #161c28 0%, #12161e 100%);
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}

[data-theme="watchnext"] body {
  background:
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(106, 163, 255, 0.18), transparent),
    radial-gradient(ellipse 60% 40% at 100% 0%, rgba(46, 204, 113, 0.08), transparent),
    linear-gradient(180deg, #0c1018 0%, #0a0c10 100%);
}

/* ---- 2. Ocean (cyan + blue) ---- */

:root[data-theme="ocean"] {
  --bg: #04080c;
  --bg-elev: #0f1a24;
  --bg-elev-2: #152535;
  --border: #2a5a6e;
  --border-strong: #3a7890;
  --border-subtle: rgba(42, 90, 110, 0.45);
  --text: #e8f4fa;
  --text-muted: #8ec4d8;
  --text-dim: #5a8ca0;
  --accent: #22d3ee;
  --accent-dark: #0891b2;
  --accent-strong: #60a5fa;
  --accent-soft: rgba(34, 211, 238, 0.2);
  --accent-glow: rgba(34, 211, 238, 0.15);
  --accent-text: #042028;
  --accent-text-hover: #021018;
  --accent-hover: #67e8f9;
  --good: #34d399;
  --good-soft: rgba(52, 211, 153, 0.2);
  --ghost-bg: rgba(15, 30, 45, 0.5);
  --tab-hover: rgba(34, 211, 238, 0.08);
  --tab-active-bg: linear-gradient(135deg, rgba(34, 211, 238, 0.28), rgba(96, 165, 250, 0.14));
  --tab-active-border: rgba(34, 211, 238, 0.5);
  --tab-active-inset: rgba(255, 255, 255, 0.06);
  --track-bg: rgba(42, 90, 110, 0.5);
  --hero-bg: linear-gradient(135deg, #122030 0%, #0f1a24 100%);
  --shadow: 0 12px 40px rgba(0, 20, 40, 0.4);
}

[data-theme="ocean"] body {
  background:
    radial-gradient(circle at 20% 0%, rgba(34, 211, 238, 0.12) 0%, transparent 45%),
    radial-gradient(circle at 80% 10%, rgba(96, 165, 250, 0.1) 0%, transparent 40%),
    linear-gradient(180deg, #061018 0%, #04080c 100%);
}

/* ---- 3. Crimson (red + amber) ---- */

:root[data-theme="crimson"] {
  --bg: #0a0406;
  --bg-elev: #241014;
  --bg-elev-2: #321820;
  --border: #6e3040;
  --border-strong: #904858;
  --border-subtle: rgba(110, 48, 64, 0.45);
  --text: #faf0f2;
  --text-muted: #d4a0a8;
  --text-dim: #a07078;
  --accent: #f43f5e;
  --accent-dark: #e11d48;
  --accent-strong: #fb923c;
  --accent-soft: rgba(244, 63, 94, 0.2);
  --accent-glow: rgba(244, 63, 94, 0.15);
  --accent-text: #fff;
  --accent-text-hover: #fff;
  --accent-hover: #fb7185;
  --good: #fb923c;
  --good-soft: rgba(251, 146, 60, 0.2);
  --ghost-bg: rgba(50, 20, 28, 0.5);
  --tab-hover: rgba(244, 63, 94, 0.08);
  --tab-active-bg: linear-gradient(135deg, rgba(244, 63, 94, 0.28), rgba(251, 146, 60, 0.14));
  --tab-active-border: rgba(244, 63, 94, 0.5);
  --tab-active-inset: rgba(255, 255, 255, 0.06);
  --track-bg: rgba(110, 48, 64, 0.5);
  --hero-bg: linear-gradient(135deg, #301018 0%, #241014 100%);
  --shadow: 0 12px 40px rgba(40, 0, 10, 0.4);
}

[data-theme="crimson"] body {
  background:
    radial-gradient(circle at 15% 0%, rgba(244, 63, 94, 0.12) 0%, transparent 45%),
    radial-gradient(circle at 85% 10%, rgba(251, 146, 60, 0.08) 0%, transparent 40%),
    linear-gradient(180deg, #100608 0%, #0a0406 100%);
}

/* ---- 4. Violet (purple + magenta) ---- */

:root[data-theme="violet"] {
  --bg: #06040a;
  --bg-elev: #1a1228;
  --bg-elev-2: #241a38;
  --border: #5a4080;
  --border-strong: #7858a8;
  --border-subtle: rgba(90, 64, 128, 0.45);
  --text: #f4f0fa;
  --text-muted: #c4a8e0;
  --text-dim: #9078b0;
  --accent: #a855f7;
  --accent-dark: #9333ea;
  --accent-strong: #ec4899;
  --accent-soft: rgba(168, 85, 247, 0.22);
  --accent-glow: rgba(168, 85, 247, 0.15);
  --accent-text: #fff;
  --accent-text-hover: #fff;
  --accent-hover: #c084fc;
  --good: #ec4899;
  --good-soft: rgba(236, 72, 153, 0.2);
  --ghost-bg: rgba(36, 26, 56, 0.5);
  --tab-hover: rgba(168, 85, 247, 0.08);
  --tab-active-bg: linear-gradient(135deg, rgba(168, 85, 247, 0.28), rgba(236, 72, 153, 0.14));
  --tab-active-border: rgba(168, 85, 247, 0.5);
  --tab-active-inset: rgba(255, 255, 255, 0.06);
  --track-bg: rgba(90, 64, 128, 0.5);
  --hero-bg: linear-gradient(135deg, #221830 0%, #1a1228 100%);
  --shadow: 0 12px 40px rgba(20, 0, 40, 0.4);
}

[data-theme="violet"] body {
  background:
    radial-gradient(circle at 15% 0%, rgba(168, 85, 247, 0.14) 0%, transparent 45%),
    radial-gradient(circle at 85% 10%, rgba(236, 72, 153, 0.08) 0%, transparent 40%),
    linear-gradient(180deg, #0a0610 0%, #06040a 100%);
}

/* ---- 5. Forest (emerald + amber) ---- */

:root[data-theme="forest"] {
  --bg: #040806;
  --bg-elev: #122018;
  --bg-elev-2: #1a3024;
  --border: #3a6848;
  --border-strong: #508860;
  --border-subtle: rgba(58, 104, 72, 0.45);
  --text: #eef8f0;
  --text-muted: #98c8a0;
  --text-dim: #689878;
  --accent: #22c55e;
  --accent-dark: #16a34a;
  --accent-strong: #fbbf24;
  --accent-soft: rgba(34, 197, 94, 0.2);
  --accent-glow: rgba(34, 197, 94, 0.15);
  --accent-text: #042810;
  --accent-text-hover: #021808;
  --accent-hover: #4ade80;
  --good: #fbbf24;
  --good-soft: rgba(251, 191, 36, 0.2);
  --ghost-bg: rgba(26, 48, 36, 0.5);
  --tab-hover: rgba(34, 197, 94, 0.08);
  --tab-active-bg: linear-gradient(135deg, rgba(34, 197, 94, 0.28), rgba(251, 191, 36, 0.14));
  --tab-active-border: rgba(34, 197, 94, 0.5);
  --tab-active-inset: rgba(255, 255, 255, 0.06);
  --track-bg: rgba(58, 104, 72, 0.5);
  --hero-bg: linear-gradient(135deg, #183020 0%, #122018 100%);
  --shadow: 0 12px 40px rgba(0, 20, 10, 0.4);
}

[data-theme="forest"] body {
  background:
    radial-gradient(circle at 15% 0%, rgba(34, 197, 94, 0.12) 0%, transparent 45%),
    radial-gradient(circle at 85% 10%, rgba(251, 191, 36, 0.08) 0%, transparent 40%),
    linear-gradient(180deg, #081008 0%, #040806 100%);
}

/* ---- 6. Slate (steel blue + silver) ---- */

:root[data-theme="slate"] {
  --bg: #080a10;
  --bg-elev: #161c28;
  --bg-elev-2: #1e2838;
  --border: #3a4860;
  --border-strong: #506080;
  --border-subtle: rgba(58, 72, 96, 0.45);
  --text: #eef2f8;
  --text-muted: #98a8c0;
  --text-dim: #687898;
  --accent: #6aa3ff;
  --accent-dark: #4d8bff;
  --accent-strong: #94a3b8;
  --accent-soft: rgba(106, 163, 255, 0.18);
  --accent-glow: rgba(106, 163, 255, 0.12);
  --accent-text: #fff;
  --accent-text-hover: #fff;
  --accent-hover: #93c5fd;
  --good: #38d39f;
  --good-soft: rgba(56, 211, 159, 0.18);
  --ghost-bg: rgba(30, 40, 56, 0.5);
  --tab-hover: rgba(106, 163, 255, 0.08);
  --tab-active-bg: linear-gradient(135deg, rgba(106, 163, 255, 0.24), rgba(148, 163, 184, 0.12));
  --tab-active-border: rgba(106, 163, 255, 0.45);
  --tab-active-inset: rgba(255, 255, 255, 0.06);
  --track-bg: rgba(58, 72, 96, 0.5);
  --hero-bg: linear-gradient(135deg, #1a2230 0%, #161c28 100%);
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

[data-theme="slate"] body {
  background:
    radial-gradient(circle at 15% 0%, rgba(106, 163, 255, 0.1) 0%, transparent 45%),
    radial-gradient(circle at 85% 10%, rgba(148, 163, 184, 0.06) 0%, transparent 40%),
    linear-gradient(180deg, #0c1018 0%, #080a10 100%);
}

/* ---- 7. Paper (light blue-gray) ---- */

:root[data-theme="paper"] {
  --bg: #eef1f6;
  --bg-elev: #ffffff;
  --bg-elev-2: #f4f6fa;
  --border: #d4dbe6;
  --border-strong: #b8c4d4;
  --border-subtle: rgba(180, 196, 212, 0.55);
  --text: #152030;
  --text-muted: #4a5870;
  --text-dim: #687890;
  --accent: #2563eb;
  --accent-dark: #1d4ed8;
  --accent-strong: #0ea5e9;
  --accent-soft: rgba(37, 99, 235, 0.14);
  --accent-glow: rgba(37, 99, 235, 0.1);
  --accent-text: #fff;
  --accent-text-hover: #fff;
  --accent-hover: #3b82f6;
  --good: #059669;
  --good-soft: rgba(5, 150, 105, 0.12);
  --ghost-bg: rgba(244, 246, 250, 0.85);
  --tab-hover: rgba(37, 99, 235, 0.06);
  --tab-active-bg: linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(14, 165, 233, 0.08));
  --tab-active-border: rgba(37, 99, 235, 0.35);
  --tab-active-inset: rgba(255, 255, 255, 0.8);
  --track-bg: rgba(180, 196, 212, 0.45);
  --hero-bg: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
  --shadow: 0 8px 28px rgba(21, 32, 48, 0.08);
}

[data-theme="paper"] body {
  background:
    radial-gradient(circle at 12% 0%, rgba(37, 99, 235, 0.08) 0%, transparent 42%),
    radial-gradient(circle at 88% 8%, rgba(14, 165, 233, 0.06) 0%, transparent 38%),
    linear-gradient(180deg, #f4f6fa 0%, #eef1f6 100%);
}

/* ---- 8. Cream (warm ivory) ---- */

:root[data-theme="cream"] {
  --bg: #f6f0e6;
  --bg-elev: #fffcf6;
  --bg-elev-2: #faf4ea;
  --border: #e0d4c0;
  --border-strong: #c8b89c;
  --border-subtle: rgba(200, 184, 156, 0.55);
  --text: #2a2218;
  --text-muted: #6a5c48;
  --text-dim: #8a7860;
  --accent: #c45c26;
  --accent-dark: #a84818;
  --accent-strong: #0d9488;
  --accent-soft: rgba(196, 92, 38, 0.14);
  --accent-glow: rgba(196, 92, 38, 0.1);
  --accent-text: #fff;
  --accent-text-hover: #fff;
  --accent-hover: #d97038;
  --good: #0d9488;
  --good-soft: rgba(13, 148, 136, 0.12);
  --ghost-bg: rgba(250, 244, 234, 0.9);
  --tab-hover: rgba(196, 92, 38, 0.06);
  --tab-active-bg: linear-gradient(135deg, rgba(196, 92, 38, 0.14), rgba(13, 148, 136, 0.08));
  --tab-active-border: rgba(196, 92, 38, 0.32);
  --tab-active-inset: rgba(255, 255, 255, 0.85);
  --track-bg: rgba(200, 184, 156, 0.4);
  --hero-bg: linear-gradient(135deg, #fffaf2 0%, #fffcf6 100%);
  --shadow: 0 8px 28px rgba(42, 34, 24, 0.08);
}

[data-theme="cream"] body {
  background:
    radial-gradient(circle at 15% 0%, rgba(196, 92, 38, 0.1) 0%, transparent 42%),
    radial-gradient(circle at 85% 10%, rgba(13, 148, 136, 0.07) 0%, transparent 38%),
    linear-gradient(180deg, #faf4ea 0%, #f6f0e6 100%);
}

/* ---- 9. Mint (soft green) ---- */

:root[data-theme="mint"] {
  --bg: #e8f5ef;
  --bg-elev: #f8fdfb;
  --bg-elev-2: #eef8f2;
  --border: #b8dcc8;
  --border-strong: #94c4aa;
  --border-subtle: rgba(148, 196, 170, 0.5);
  --text: #142820;
  --text-muted: #3a6850;
  --text-dim: #588870;
  --accent: #059669;
  --accent-dark: #047857;
  --accent-strong: #f97316;
  --accent-soft: rgba(5, 150, 105, 0.14);
  --accent-glow: rgba(5, 150, 105, 0.1);
  --accent-text: #fff;
  --accent-text-hover: #fff;
  --accent-hover: #10b981;
  --good: #f97316;
  --good-soft: rgba(249, 115, 22, 0.12);
  --ghost-bg: rgba(238, 248, 242, 0.9);
  --tab-hover: rgba(5, 150, 105, 0.06);
  --tab-active-bg: linear-gradient(135deg, rgba(5, 150, 105, 0.14), rgba(249, 115, 22, 0.08));
  --tab-active-border: rgba(5, 150, 105, 0.32);
  --tab-active-inset: rgba(255, 255, 255, 0.85);
  --track-bg: rgba(148, 196, 170, 0.4);
  --hero-bg: linear-gradient(135deg, #f4fbf7 0%, #f8fdfb 100%);
  --shadow: 0 8px 28px rgba(20, 40, 32, 0.08);
}

[data-theme="mint"] body {
  background:
    radial-gradient(circle at 12% 0%, rgba(5, 150, 105, 0.1) 0%, transparent 42%),
    radial-gradient(circle at 88% 8%, rgba(249, 115, 22, 0.07) 0%, transparent 38%),
    linear-gradient(180deg, #eef8f2 0%, #e8f5ef 100%);
}

/* ---- 10. Lavender (soft purple) ---- */

:root[data-theme="lavender"] {
  --bg: #f0ecf8;
  --bg-elev: #faf8ff;
  --bg-elev-2: #f4f0fc;
  --border: #d0c4e8;
  --border-strong: #b4a0d8;
  --border-subtle: rgba(180, 160, 216, 0.5);
  --text: #221830;
  --text-muted: #5a4878;
  --text-dim: #786898;
  --accent: #7c3aed;
  --accent-dark: #6d28d9;
  --accent-strong: #db2777;
  --accent-soft: rgba(124, 58, 237, 0.14);
  --accent-glow: rgba(124, 58, 237, 0.1);
  --accent-text: #fff;
  --accent-text-hover: #fff;
  --accent-hover: #8b5cf6;
  --good: #db2777;
  --good-soft: rgba(219, 39, 119, 0.12);
  --ghost-bg: rgba(244, 240, 252, 0.9);
  --tab-hover: rgba(124, 58, 237, 0.06);
  --tab-active-bg: linear-gradient(135deg, rgba(124, 58, 237, 0.14), rgba(219, 39, 119, 0.08));
  --tab-active-border: rgba(124, 58, 237, 0.32);
  --tab-active-inset: rgba(255, 255, 255, 0.85);
  --track-bg: rgba(180, 160, 216, 0.4);
  --hero-bg: linear-gradient(135deg, #f8f4ff 0%, #faf8ff 100%);
  --shadow: 0 8px 28px rgba(34, 24, 48, 0.08);
}

[data-theme="lavender"] body {
  background:
    radial-gradient(circle at 15% 0%, rgba(124, 58, 237, 0.1) 0%, transparent 42%),
    radial-gradient(circle at 85% 10%, rgba(219, 39, 119, 0.07) 0%, transparent 38%),
    linear-gradient(180deg, #f4f0fc 0%, #f0ecf8 100%);
}

/* ---- 11. Sunrise (peach & coral) ---- */

:root[data-theme="sunrise"] {
  --bg: #fff0e8;
  --bg-elev: #fffaf6;
  --bg-elev-2: #fff4ec;
  --border: #f0c8b0;
  --border-strong: #e0a888;
  --border-subtle: rgba(224, 168, 136, 0.5);
  --text: #301810;
  --text-muted: #785848;
  --text-dim: #987060;
  --accent: #ea580c;
  --accent-dark: #c2410c;
  --accent-strong: #e11d48;
  --accent-soft: rgba(234, 88, 12, 0.14);
  --accent-glow: rgba(234, 88, 12, 0.1);
  --accent-text: #fff;
  --accent-text-hover: #fff;
  --accent-hover: #f97316;
  --good: #e11d48;
  --good-soft: rgba(225, 29, 72, 0.12);
  --ghost-bg: rgba(255, 244, 236, 0.9);
  --tab-hover: rgba(234, 88, 12, 0.06);
  --tab-active-bg: linear-gradient(135deg, rgba(234, 88, 12, 0.14), rgba(225, 29, 72, 0.08));
  --tab-active-border: rgba(234, 88, 12, 0.32);
  --tab-active-inset: rgba(255, 255, 255, 0.85);
  --track-bg: rgba(224, 168, 136, 0.4);
  --hero-bg: linear-gradient(135deg, #fff8f2 0%, #fffaf6 100%);
  --shadow: 0 8px 28px rgba(48, 24, 16, 0.08);
}

[data-theme="sunrise"] body {
  background:
    radial-gradient(circle at 12% 0%, rgba(234, 88, 12, 0.12) 0%, transparent 42%),
    radial-gradient(circle at 88% 8%, rgba(225, 29, 72, 0.08) 0%, transparent 38%),
    linear-gradient(180deg, #fff4ec 0%, #fff0e8 100%);
}


/* ---- midnight ---- */

:root[data-theme="midnight"] {
  --bg: #04060c;
  --bg-elev: #121828;
  --bg-elev-2: #1a2238;
  --border: #404878;
  --border-strong: #585898;
  --border-subtle: rgba(64, 72, 120, 0.45);
  --text: #e8eaf8;
  --text-muted: #9898c8;
  --text-dim: #686898;
  --accent: #6366f1;
  --accent-dark: #6366f1;
  --accent-strong: #818cf8;
  --accent-soft: rgba(99, 102, 241, 0.2);
  --accent-glow: rgba(99, 102, 241, 0.15);
  --accent-text: #042810;
  --accent-text-hover: #021808;
  --accent-hover: #818cf8;
  --good: #4ade80;
  --good-soft: rgba(74, 222, 128, 0.2);
  --ghost-bg: rgba(64, 72, 120, 0.35);
  --tab-hover: rgba(99, 102, 241, 0.08);
  --tab-active-bg: linear-gradient(135deg, rgba(99, 102, 241, 0.28), rgba(129, 140, 248, 0.14));
  --tab-active-border: rgba(99, 102, 241, 0.5);
  --tab-active-inset: rgba(255, 255, 255, 0.06);
  --track-bg: rgba(64, 72, 120, 0.5);
  --hero-bg: linear-gradient(135deg, #141830 0%, #121828 100%);
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

[data-theme="midnight"] body {
  background:
    radial-gradient(circle at 15% 0%, rgba(99, 102, 241, 0.12) 0%, transparent 45%),
    radial-gradient(circle at 85% 10%, rgba(129, 140, 248, 0.08) 0%, transparent 40%),
    linear-gradient(180deg, #0a0818 0%, #04060c 100%);
}

/* ---- ember ---- */

:root[data-theme="ember"] {
  --bg: #0a0604;
  --bg-elev: #241810;
  --bg-elev-2: #322418;
  --border: #684830;
  --border-strong: #886048;
  --border-subtle: rgba(104, 72, 48, 0.45);
  --text: #faf0e8;
  --text-muted: #d4a888;
  --text-dim: #a88068;
  --accent: #f97316;
  --accent-dark: #f97316;
  --accent-strong: #fb923c;
  --accent-soft: rgba(249, 115, 22, 0.2);
  --accent-glow: rgba(249, 115, 22, 0.15);
  --accent-text: #1a0800;
  --accent-text-hover: #fff;
  --accent-hover: #fb923c;
  --good: #fbbf24;
  --good-soft: rgba(251, 191, 36, 0.2);
  --ghost-bg: rgba(104, 72, 48, 0.35);
  --tab-hover: rgba(249, 115, 22, 0.08);
  --tab-active-bg: linear-gradient(135deg, rgba(249, 115, 22, 0.28), rgba(251, 146, 60, 0.14));
  --tab-active-border: rgba(249, 115, 22, 0.5);
  --tab-active-inset: rgba(255, 255, 255, 0.06);
  --track-bg: rgba(104, 72, 48, 0.5);
  --hero-bg: linear-gradient(135deg, #301810 0%, #241810 100%);
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

[data-theme="ember"] body {
  background:
    radial-gradient(circle at 15% 0%, rgba(249, 115, 22, 0.12) 0%, transparent 45%),
    radial-gradient(circle at 85% 10%, rgba(251, 146, 60, 0.08) 0%, transparent 40%),
    linear-gradient(180deg, #100804 0%, #0a0604 100%);
}

/* ---- aurora ---- */

:root[data-theme="aurora"] {
  --bg: #040808;
  --bg-elev: #101820;
  --bg-elev-2: #182830;
  --border: #306058;
  --border-strong: #488878;
  --border-subtle: rgba(48, 96, 88, 0.45);
  --text: #e8f8f4;
  --text-muted: #88c8b8;
  --text-dim: #589888;
  --accent: #2dd4bf;
  --accent-dark: #2dd4bf;
  --accent-strong: #a78bfa;
  --accent-soft: rgba(45, 212, 191, 0.2);
  --accent-glow: rgba(45, 212, 191, 0.15);
  --accent-text: #042018;
  --accent-text-hover: #021008;
  --accent-hover: #a78bfa;
  --good: #34d399;
  --good-soft: rgba(52, 211, 153, 0.2);
  --ghost-bg: rgba(48, 96, 88, 0.35);
  --tab-hover: rgba(45, 212, 191, 0.08);
  --tab-active-bg: linear-gradient(135deg, rgba(45, 212, 191, 0.28), rgba(167, 139, 250, 0.14));
  --tab-active-border: rgba(45, 212, 191, 0.5);
  --tab-active-inset: rgba(255, 255, 255, 0.06);
  --track-bg: rgba(48, 96, 88, 0.5);
  --hero-bg: linear-gradient(135deg, #142028 0%, #101820 100%);
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

[data-theme="aurora"] body {
  background:
    radial-gradient(circle at 15% 0%, rgba(45, 212, 191, 0.12) 0%, transparent 45%),
    radial-gradient(circle at 85% 10%, rgba(167, 139, 250, 0.08) 0%, transparent 40%),
    linear-gradient(180deg, #081018 0%, #040808 100%);
}

/* ---- copper ---- */

:root[data-theme="copper"] {
  --bg: #080604;
  --bg-elev: #201810;
  --bg-elev-2: #2c2218;
  --border: #685038;
  --border-strong: #886848;
  --border-subtle: rgba(104, 80, 56, 0.45);
  --text: #faf4ec;
  --text-muted: #d4b898;
  --text-dim: #a89070;
  --accent: #d97706;
  --accent-dark: #d97706;
  --accent-strong: #ea580c;
  --accent-soft: rgba(217, 119, 6, 0.2);
  --accent-glow: rgba(217, 119, 6, 0.15);
  --accent-text: #1a1000;
  --accent-text-hover: #fff;
  --accent-hover: #ea580c;
  --good: #f59e0b;
  --good-soft: rgba(245, 158, 11, 0.2);
  --ghost-bg: rgba(104, 80, 56, 0.35);
  --tab-hover: rgba(217, 119, 6, 0.08);
  --tab-active-bg: linear-gradient(135deg, rgba(217, 119, 6, 0.28), rgba(234, 88, 12, 0.14));
  --tab-active-border: rgba(217, 119, 6, 0.5);
  --tab-active-inset: rgba(255, 255, 255, 0.06);
  --track-bg: rgba(104, 80, 56, 0.5);
  --hero-bg: linear-gradient(135deg, #281810 0%, #201810 100%);
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

[data-theme="copper"] body {
  background:
    radial-gradient(circle at 15% 0%, rgba(217, 119, 6, 0.12) 0%, transparent 45%),
    radial-gradient(circle at 85% 10%, rgba(234, 88, 12, 0.08) 0%, transparent 40%),
    linear-gradient(180deg, #100804 0%, #080604 100%);
}

/* ---- graphite ---- */

:root[data-theme="graphite"] {
  --bg: #0a0c10;
  --bg-elev: #181c24;
  --bg-elev-2: #242830;
  --border: #484e58;
  --border-strong: #606878;
  --border-subtle: rgba(72, 78, 88, 0.45);
  --text: #eef0f4;
  --text-muted: #989ca8;
  --text-dim: #686e78;
  --accent: #64748b;
  --accent-dark: #64748b;
  --accent-strong: #94a3b8;
  --accent-soft: rgba(100, 116, 139, 0.2);
  --accent-glow: rgba(100, 116, 139, 0.15);
  --accent-text: #fff;
  --accent-text-hover: #fff;
  --accent-hover: #94a3b8;
  --good: #38bdf8;
  --good-soft: rgba(56, 189, 248, 0.2);
  --watching: #34d399;
  --watching-soft: rgba(52, 211, 153, 0.2);
  --ghost-bg: rgba(72, 78, 88, 0.35);
  --tab-hover: rgba(100, 116, 139, 0.08);
  --tab-active-bg: linear-gradient(135deg, rgba(100, 116, 139, 0.28), rgba(148, 163, 184, 0.14));
  --tab-active-border: rgba(100, 116, 139, 0.5);
  --tab-active-inset: rgba(255, 255, 255, 0.06);
  --track-bg: rgba(72, 78, 88, 0.5);
  --hero-bg: linear-gradient(135deg, #202428 0%, #181c24 100%);
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

[data-theme="graphite"] body {
  background:
    radial-gradient(circle at 15% 0%, rgba(100, 116, 139, 0.12) 0%, transparent 45%),
    radial-gradient(circle at 85% 10%, rgba(148, 163, 184, 0.08) 0%, transparent 40%),
    linear-gradient(180deg, #101418 0%, #0a0c10 100%);
}

/* ---- neon ---- */

:root[data-theme="neon"] {
  --bg: #06040a;
  --bg-elev: #180818;
  --bg-elev-2: #241030;
  --border: #603060;
  --border-strong: #804880;
  --border-subtle: rgba(96, 48, 96, 0.45);
  --text: #fce8f4;
  --text-muted: #d898c8;
  --text-dim: #a86898;
  --accent: #f472b6;
  --accent-dark: #f472b6;
  --accent-strong: #22d3ee;
  --accent-soft: rgba(244, 114, 182, 0.2);
  --accent-glow: rgba(244, 114, 182, 0.15);
  --accent-text: #fff;
  --accent-text-hover: #fff;
  --accent-hover: #22d3ee;
  --good: #a3e635;
  --good-soft: rgba(163, 230, 53, 0.2);
  --ghost-bg: rgba(96, 48, 96, 0.35);
  --tab-hover: rgba(244, 114, 182, 0.08);
  --tab-active-bg: linear-gradient(135deg, rgba(244, 114, 182, 0.28), rgba(34, 211, 238, 0.14));
  --tab-active-border: rgba(244, 114, 182, 0.5);
  --tab-active-inset: rgba(255, 255, 255, 0.06);
  --track-bg: rgba(96, 48, 96, 0.5);
  --hero-bg: linear-gradient(135deg, #201028 0%, #180818 100%);
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

[data-theme="neon"] body {
  background:
    radial-gradient(circle at 15% 0%, rgba(244, 114, 182, 0.12) 0%, transparent 45%),
    radial-gradient(circle at 85% 10%, rgba(34, 211, 238, 0.08) 0%, transparent 40%),
    linear-gradient(180deg, #0a0408 0%, #06040a 100%);
}

/* ---- moss ---- */

:root[data-theme="moss"] {
  --bg: #060804;
  --bg-elev: #181810;
  --bg-elev-2: #242818;
  --border: #505838;
  --border-strong: #687048;
  --border-subtle: rgba(80, 88, 56, 0.45);
  --text: #f0f4e8;
  --text-muted: #b8c898;
  --text-dim: #889868;
  --accent: #84cc16;
  --accent-dark: #84cc16;
  --accent-strong: #a3e635;
  --accent-soft: rgba(132, 204, 22, 0.2);
  --accent-glow: rgba(132, 204, 22, 0.15);
  --accent-text: #142004;
  --accent-text-hover: #fff;
  --accent-hover: #a3e635;
  --good: #eab308;
  --good-soft: rgba(234, 179, 8, 0.2);
  --ghost-bg: rgba(80, 88, 56, 0.35);
  --tab-hover: rgba(132, 204, 22, 0.08);
  --tab-active-bg: linear-gradient(135deg, rgba(132, 204, 22, 0.28), rgba(163, 230, 53, 0.14));
  --tab-active-border: rgba(132, 204, 22, 0.5);
  --tab-active-inset: rgba(255, 255, 255, 0.06);
  --track-bg: rgba(80, 88, 56, 0.5);
  --hero-bg: linear-gradient(135deg, #202818 0%, #181810 100%);
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

[data-theme="moss"] body {
  background:
    radial-gradient(circle at 15% 0%, rgba(132, 204, 22, 0.12) 0%, transparent 45%),
    radial-gradient(circle at 85% 10%, rgba(163, 230, 53, 0.08) 0%, transparent 40%),
    linear-gradient(180deg, #0a0c04 0%, #060804 100%);
}

/* ---- wine ---- */

:root[data-theme="wine"] {
  --bg: #0a0406;
  --bg-elev: #241018;
  --bg-elev-2: #301820;
  --border: #683040;
  --border-strong: #884858;
  --border-subtle: rgba(104, 48, 64, 0.45);
  --text: #faf0f2;
  --text-muted: #d4a0a8;
  --text-dim: #a87080;
  --accent: #be123c;
  --accent-dark: #be123c;
  --accent-strong: #fb7185;
  --accent-soft: rgba(190, 18, 60, 0.2);
  --accent-glow: rgba(190, 18, 60, 0.15);
  --accent-text: #fff;
  --accent-text-hover: #fff;
  --accent-hover: #fb7185;
  --good: #fda4af;
  --good-soft: rgba(253, 164, 175, 0.2);
  --ghost-bg: rgba(104, 48, 64, 0.35);
  --tab-hover: rgba(190, 18, 60, 0.08);
  --tab-active-bg: linear-gradient(135deg, rgba(190, 18, 60, 0.28), rgba(251, 113, 133, 0.14));
  --tab-active-border: rgba(190, 18, 60, 0.5);
  --tab-active-inset: rgba(255, 255, 255, 0.06);
  --track-bg: rgba(104, 48, 64, 0.5);
  --hero-bg: linear-gradient(135deg, #281018 0%, #241018 100%);
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

[data-theme="wine"] body {
  background:
    radial-gradient(circle at 15% 0%, rgba(190, 18, 60, 0.12) 0%, transparent 45%),
    radial-gradient(circle at 85% 10%, rgba(251, 113, 133, 0.08) 0%, transparent 40%),
    linear-gradient(180deg, #100608 0%, #0a0406 100%);
}

/* ---- arctic ---- */

:root[data-theme="arctic"] {
  --bg: #04080c;
  --bg-elev: #101820;
  --bg-elev-2: #182430;
  --border: #386080;
  --border-strong: #508098;
  --border-subtle: rgba(56, 96, 128, 0.45);
  --text: #e8f4fa;
  --text-muted: #98c0d8;
  --text-dim: #6890a8;
  --accent: #38bdf8;
  --accent-dark: #38bdf8;
  --accent-strong: #7dd3fc;
  --accent-soft: rgba(56, 189, 248, 0.2);
  --accent-glow: rgba(56, 189, 248, 0.15);
  --accent-text: #042028;
  --accent-text-hover: #021018;
  --accent-hover: #7dd3fc;
  --good: #67e8f9;
  --good-soft: rgba(103, 232, 249, 0.2);
  --ghost-bg: rgba(56, 96, 128, 0.35);
  --tab-hover: rgba(56, 189, 248, 0.08);
  --tab-active-bg: linear-gradient(135deg, rgba(56, 189, 248, 0.28), rgba(125, 211, 252, 0.14));
  --tab-active-border: rgba(56, 189, 248, 0.5);
  --tab-active-inset: rgba(255, 255, 255, 0.06);
  --track-bg: rgba(56, 96, 128, 0.5);
  --hero-bg: linear-gradient(135deg, #142030 0%, #101820 100%);
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

[data-theme="arctic"] body {
  background:
    radial-gradient(circle at 15% 0%, rgba(56, 189, 248, 0.12) 0%, transparent 45%),
    radial-gradient(circle at 85% 10%, rgba(125, 211, 252, 0.08) 0%, transparent 40%),
    linear-gradient(180deg, #081018 0%, #04080c 100%);
}

/* ---- obsidian ---- */

:root[data-theme="obsidian"] {
  --bg: #040404;
  --bg-elev: #141414;
  --bg-elev-2: #1c1c1c;
  --border: #484848;
  --border-strong: #606060;
  --border-subtle: rgba(72, 72, 72, 0.45);
  --text: #f4f4f4;
  --text-muted: #a8a8a8;
  --text-dim: #787878;
  --accent: #eab308;
  --accent-dark: #eab308;
  --accent-strong: #facc15;
  --accent-soft: rgba(234, 179, 8, 0.2);
  --accent-glow: rgba(234, 179, 8, 0.15);
  --accent-text: #1a1400;
  --accent-text-hover: #fff;
  --accent-hover: #facc15;
  --good: #fde047;
  --good-soft: rgba(253, 224, 71, 0.2);
  --ghost-bg: rgba(72, 72, 72, 0.35);
  --tab-hover: rgba(234, 179, 8, 0.08);
  --tab-active-bg: linear-gradient(135deg, rgba(234, 179, 8, 0.28), rgba(250, 204, 21, 0.14));
  --tab-active-border: rgba(234, 179, 8, 0.5);
  --tab-active-inset: rgba(255, 255, 255, 0.06);
  --track-bg: rgba(72, 72, 72, 0.5);
  --hero-bg: linear-gradient(135deg, #181818 0%, #141414 100%);
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

[data-theme="obsidian"] body {
  background:
    radial-gradient(circle at 15% 0%, rgba(234, 179, 8, 0.12) 0%, transparent 45%),
    radial-gradient(circle at 85% 10%, rgba(250, 204, 21, 0.08) 0%, transparent 40%),
    linear-gradient(180deg, #080808 0%, #040404 100%);
}

/* ---- snow ---- */

:root[data-theme="snow"] {
  --bg: #f4f8fc;
  --bg-elev: #ffffff;
  --bg-elev-2: #f0f4f8;
  --border: #c8d8e8;
  --border-strong: #a8c0d8;
  --border-subtle: rgba(200, 216, 232, 0.55);
  --text: #102030;
  --text-muted: #486080;
  --text-dim: #6888a0;
  --accent: #0284c7;
  --accent-dark: #0284c7;
  --accent-strong: #0ea5e9;
  --accent-soft: rgba(2, 132, 199, 0.14);
  --accent-glow: rgba(2, 132, 199, 0.1);
  --accent-text: #fff;
  --accent-text-hover: #fff;
  --accent-hover: #0ea5e9;
  --good: #059669;
  --good-soft: rgba(5, 150, 105, 0.12);
  --ghost-bg: rgba(200, 216, 232, 0.35);
  --tab-hover: rgba(2, 132, 199, 0.06);
  --tab-active-bg: linear-gradient(135deg, rgba(2, 132, 199, 0.14), rgba(14, 165, 233, 0.08));
  --tab-active-border: rgba(2, 132, 199, 0.32);
  --tab-active-inset: rgba(255, 255, 255, 0.85);
  --track-bg: rgba(200, 216, 232, 0.4);
  --hero-bg: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
  --shadow: 0 8px 28px rgba(16, 24, 40, 0.08);
}

[data-theme="snow"] body {
  background:
    radial-gradient(circle at 12% 0%, rgba(2, 132, 199, 0.1) 0%, transparent 42%),
    radial-gradient(circle at 88% 8%, rgba(14, 165, 233, 0.07) 0%, transparent 38%),
    linear-gradient(180deg, #eef4fa 0%, #f4f8fc 100%);
}

/* ---- sand ---- */

:root[data-theme="sand"] {
  --bg: #f4ede0;
  --bg-elev: #faf6ee;
  --bg-elev-2: #f0e8d8;
  --border: #d8c8a8;
  --border-strong: #c0a888;
  --border-subtle: rgba(216, 200, 168, 0.55);
  --text: #302818;
  --text-muted: #786848;
  --text-dim: #988868;
  --accent: #b45309;
  --accent-dark: #b45309;
  --accent-strong: #d97706;
  --accent-soft: rgba(180, 83, 9, 0.14);
  --accent-glow: rgba(180, 83, 9, 0.1);
  --accent-text: #fff;
  --accent-text-hover: #fff;
  --accent-hover: #d97706;
  --good: #0d9488;
  --good-soft: rgba(13, 148, 136, 0.12);
  --ghost-bg: rgba(216, 200, 168, 0.35);
  --tab-hover: rgba(180, 83, 9, 0.06);
  --tab-active-bg: linear-gradient(135deg, rgba(180, 83, 9, 0.14), rgba(217, 119, 6, 0.08));
  --tab-active-border: rgba(180, 83, 9, 0.32);
  --tab-active-inset: rgba(255, 255, 255, 0.85);
  --track-bg: rgba(216, 200, 168, 0.4);
  --hero-bg: linear-gradient(135deg, #fffaf2 0%, #faf6ee 100%);
  --shadow: 0 8px 28px rgba(16, 24, 40, 0.08);
}

[data-theme="sand"] body {
  background:
    radial-gradient(circle at 12% 0%, rgba(180, 83, 9, 0.1) 0%, transparent 42%),
    radial-gradient(circle at 88% 8%, rgba(217, 119, 6, 0.07) 0%, transparent 38%),
    linear-gradient(180deg, #f0e8d8 0%, #f4ede0 100%);
}

/* ---- blush ---- */

:root[data-theme="blush"] {
  --bg: #fdf2f8;
  --bg-elev: #fffafc;
  --bg-elev-2: #fce8f0;
  --border: #f0c0d0;
  --border-strong: #e0a0b8;
  --border-subtle: rgba(240, 192, 208, 0.55);
  --text: #301020;
  --text-muted: #885868;
  --text-dim: #a87888;
  --accent: #db2777;
  --accent-dark: #db2777;
  --accent-strong: #ec4899;
  --accent-soft: rgba(219, 39, 119, 0.14);
  --accent-glow: rgba(219, 39, 119, 0.1);
  --accent-text: #fff;
  --accent-text-hover: #fff;
  --accent-hover: #ec4899;
  --good: #be185d;
  --good-soft: rgba(190, 24, 93, 0.12);
  --ghost-bg: rgba(240, 192, 208, 0.35);
  --tab-hover: rgba(219, 39, 119, 0.06);
  --tab-active-bg: linear-gradient(135deg, rgba(219, 39, 119, 0.14), rgba(236, 72, 153, 0.08));
  --tab-active-border: rgba(219, 39, 119, 0.32);
  --tab-active-inset: rgba(255, 255, 255, 0.85);
  --track-bg: rgba(240, 192, 208, 0.4);
  --hero-bg: linear-gradient(135deg, #fff4f8 0%, #fffafc 100%);
  --shadow: 0 8px 28px rgba(16, 24, 40, 0.08);
}

[data-theme="blush"] body {
  background:
    radial-gradient(circle at 12% 0%, rgba(219, 39, 119, 0.1) 0%, transparent 42%),
    radial-gradient(circle at 88% 8%, rgba(236, 72, 153, 0.07) 0%, transparent 38%),
    linear-gradient(180deg, #fce8f0 0%, #fdf2f8 100%);
}

/* ---- sky ---- */

:root[data-theme="sky"] {
  --bg: #e8f4fc;
  --bg-elev: #f8fcff;
  --bg-elev-2: #eef6fc;
  --border: #b8d8f0;
  --border-strong: #98c0e0;
  --border-subtle: rgba(184, 216, 240, 0.55);
  --text: #102838;
  --text-muted: #487898;
  --text-dim: #6898b0;
  --accent: #0284c7;
  --accent-dark: #0284c7;
  --accent-strong: #38bdf8;
  --accent-soft: rgba(2, 132, 199, 0.14);
  --accent-glow: rgba(2, 132, 199, 0.1);
  --accent-text: #fff;
  --accent-text-hover: #fff;
  --accent-hover: #38bdf8;
  --good: #0891b2;
  --good-soft: rgba(8, 145, 178, 0.12);
  --ghost-bg: rgba(184, 216, 240, 0.35);
  --tab-hover: rgba(2, 132, 199, 0.06);
  --tab-active-bg: linear-gradient(135deg, rgba(2, 132, 199, 0.14), rgba(56, 189, 248, 0.08));
  --tab-active-border: rgba(2, 132, 199, 0.32);
  --tab-active-inset: rgba(255, 255, 255, 0.85);
  --track-bg: rgba(184, 216, 240, 0.4);
  --hero-bg: linear-gradient(135deg, #f4faff 0%, #f8fcff 100%);
  --shadow: 0 8px 28px rgba(16, 24, 40, 0.08);
}

[data-theme="sky"] body {
  background:
    radial-gradient(circle at 12% 0%, rgba(2, 132, 199, 0.1) 0%, transparent 42%),
    radial-gradient(circle at 88% 8%, rgba(56, 189, 248, 0.07) 0%, transparent 38%),
    linear-gradient(180deg, #eef6fc 0%, #e8f4fc 100%);
}

/* ---- honey ---- */

:root[data-theme="honey"] {
  --bg: #faf6e8;
  --bg-elev: #fffdf4;
  --bg-elev-2: #f8f0d8;
  --border: #e8d0a0;
  --border-strong: #d0b878;
  --border-subtle: rgba(232, 208, 160, 0.55);
  --text: #302810;
  --text-muted: #887848;
  --text-dim: #a89868;
  --accent: #ca8a04;
  --accent-dark: #ca8a04;
  --accent-strong: #eab308;
  --accent-soft: rgba(202, 138, 4, 0.14);
  --accent-glow: rgba(202, 138, 4, 0.1);
  --accent-text: #fff;
  --accent-text-hover: #fff;
  --accent-hover: #eab308;
  --good: #ea580c;
  --good-soft: rgba(234, 88, 12, 0.12);
  --ghost-bg: rgba(232, 208, 160, 0.35);
  --tab-hover: rgba(202, 138, 4, 0.06);
  --tab-active-bg: linear-gradient(135deg, rgba(202, 138, 4, 0.14), rgba(234, 179, 8, 0.08));
  --tab-active-border: rgba(202, 138, 4, 0.32);
  --tab-active-inset: rgba(255, 255, 255, 0.85);
  --track-bg: rgba(232, 208, 160, 0.4);
  --hero-bg: linear-gradient(135deg, #fffaf0 0%, #fffdf4 100%);
  --shadow: 0 8px 28px rgba(16, 24, 40, 0.08);
}

[data-theme="honey"] body {
  background:
    radial-gradient(circle at 12% 0%, rgba(202, 138, 4, 0.1) 0%, transparent 42%),
    radial-gradient(circle at 88% 8%, rgba(234, 179, 8, 0.07) 0%, transparent 38%),
    linear-gradient(180deg, #f8f0d8 0%, #faf6e8 100%);
}

/* ---- sage ---- */

:root[data-theme="sage"] {
  --bg: #eef4e8;
  --bg-elev: #f8fbf4;
  --bg-elev-2: #e8f0dc;
  --border: #c0d4a8;
  --border-strong: #a0b888;
  --border-subtle: rgba(192, 212, 168, 0.55);
  --text: #182810;
  --text-muted: #486838;
  --text-dim: #688858;
  --accent: #4d7c0f;
  --accent-dark: #4d7c0f;
  --accent-strong: #65a30d;
  --accent-soft: rgba(77, 124, 15, 0.14);
  --accent-glow: rgba(77, 124, 15, 0.1);
  --accent-text: #fff;
  --accent-text-hover: #fff;
  --accent-hover: #65a30d;
  --good: #ca8a04;
  --good-soft: rgba(202, 138, 4, 0.12);
  --ghost-bg: rgba(192, 212, 168, 0.35);
  --tab-hover: rgba(77, 124, 15, 0.06);
  --tab-active-bg: linear-gradient(135deg, rgba(77, 124, 15, 0.14), rgba(101, 163, 13, 0.08));
  --tab-active-border: rgba(77, 124, 15, 0.32);
  --tab-active-inset: rgba(255, 255, 255, 0.85);
  --track-bg: rgba(192, 212, 168, 0.4);
  --hero-bg: linear-gradient(135deg, #f4f8ee 0%, #f8fbf4 100%);
  --shadow: 0 8px 28px rgba(16, 24, 40, 0.08);
}

[data-theme="sage"] body {
  background:
    radial-gradient(circle at 12% 0%, rgba(77, 124, 15, 0.1) 0%, transparent 42%),
    radial-gradient(circle at 88% 8%, rgba(101, 163, 13, 0.07) 0%, transparent 38%),
    linear-gradient(180deg, #e8f0dc 0%, #eef4e8 100%);
}

/* ---- lilac ---- */

:root[data-theme="lilac"] {
  --bg: #f4f0fc;
  --bg-elev: #faf8ff;
  --bg-elev-2: #eee8f8;
  --border: #d0c0e8;
  --border-strong: #b4a0d0;
  --border-subtle: rgba(208, 192, 232, 0.55);
  --text: #281840;
  --text-muted: #685888;
  --text-dim: #8878a0;
  --accent: #9333ea;
  --accent-dark: #9333ea;
  --accent-strong: #c084fc;
  --accent-soft: rgba(147, 51, 234, 0.14);
  --accent-glow: rgba(147, 51, 234, 0.1);
  --accent-text: #fff;
  --accent-text-hover: #fff;
  --accent-hover: #c084fc;
  --good: #db2777;
  --good-soft: rgba(219, 39, 119, 0.12);
  --ghost-bg: rgba(208, 192, 232, 0.35);
  --tab-hover: rgba(147, 51, 234, 0.06);
  --tab-active-bg: linear-gradient(135deg, rgba(147, 51, 234, 0.14), rgba(192, 132, 252, 0.08));
  --tab-active-border: rgba(147, 51, 234, 0.32);
  --tab-active-inset: rgba(255, 255, 255, 0.85);
  --track-bg: rgba(208, 192, 232, 0.4);
  --hero-bg: linear-gradient(135deg, #f8f4ff 0%, #faf8ff 100%);
  --shadow: 0 8px 28px rgba(16, 24, 40, 0.08);
}

[data-theme="lilac"] body {
  background:
    radial-gradient(circle at 12% 0%, rgba(147, 51, 234, 0.1) 0%, transparent 42%),
    radial-gradient(circle at 88% 8%, rgba(192, 132, 252, 0.07) 0%, transparent 38%),
    linear-gradient(180deg, #eee8f8 0%, #f4f0fc 100%);
}

/* ---- coral ---- */

:root[data-theme="coral"] {
  --bg: #fff0f0;
  --bg-elev: #fffafa;
  --bg-elev-2: #ffe8e8;
  --border: #f0c0c0;
  --border-strong: #e0a0a0;
  --border-subtle: rgba(240, 192, 192, 0.55);
  --text: #301018;
  --text-muted: #885858;
  --text-dim: #a87878;
  --accent: #f43f5e;
  --accent-dark: #f43f5e;
  --accent-strong: #fb7185;
  --accent-soft: rgba(244, 63, 94, 0.14);
  --accent-glow: rgba(244, 63, 94, 0.1);
  --accent-text: #fff;
  --accent-text-hover: #fff;
  --accent-hover: #fb7185;
  --good: #ea580c;
  --good-soft: rgba(234, 88, 12, 0.12);
  --ghost-bg: rgba(240, 192, 192, 0.35);
  --tab-hover: rgba(244, 63, 94, 0.06);
  --tab-active-bg: linear-gradient(135deg, rgba(244, 63, 94, 0.14), rgba(251, 113, 133, 0.08));
  --tab-active-border: rgba(244, 63, 94, 0.32);
  --tab-active-inset: rgba(255, 255, 255, 0.85);
  --track-bg: rgba(240, 192, 192, 0.4);
  --hero-bg: linear-gradient(135deg, #fff6f6 0%, #fffafa 100%);
  --shadow: 0 8px 28px rgba(16, 24, 40, 0.08);
}

[data-theme="coral"] body {
  background:
    radial-gradient(circle at 12% 0%, rgba(244, 63, 94, 0.1) 0%, transparent 42%),
    radial-gradient(circle at 88% 8%, rgba(251, 113, 133, 0.07) 0%, transparent 38%),
    linear-gradient(180deg, #ffe8e8 0%, #fff0f0 100%);
}

/* ---- linen ---- */

:root[data-theme="linen"] {
  --bg: #f5f0ea;
  --bg-elev: #faf8f4;
  --bg-elev-2: #f0ebe4;
  --border: #d8cfc4;
  --border-strong: #c0b4a8;
  --border-subtle: rgba(216, 207, 196, 0.55);
  --text: #292524;
  --text-muted: #686058;
  --text-dim: #888078;
  --accent: #78716c;
  --accent-dark: #78716c;
  --accent-strong: #a8a29e;
  --accent-soft: rgba(120, 113, 108, 0.14);
  --accent-glow: rgba(120, 113, 108, 0.1);
  --accent-text: #fff;
  --accent-text-hover: #fff;
  --accent-hover: #a8a29e;
  --good: #0d9488;
  --good-soft: rgba(13, 148, 136, 0.12);
  --ghost-bg: rgba(216, 207, 196, 0.35);
  --tab-hover: rgba(120, 113, 108, 0.06);
  --tab-active-bg: linear-gradient(135deg, rgba(120, 113, 108, 0.14), rgba(168, 162, 158, 0.08));
  --tab-active-border: rgba(120, 113, 108, 0.32);
  --tab-active-inset: rgba(255, 255, 255, 0.85);
  --track-bg: rgba(216, 207, 196, 0.4);
  --hero-bg: linear-gradient(135deg, #faf6f0 0%, #faf8f4 100%);
  --shadow: 0 8px 28px rgba(16, 24, 40, 0.08);
}

[data-theme="linen"] body {
  background:
    radial-gradient(circle at 12% 0%, rgba(120, 113, 108, 0.1) 0%, transparent 42%),
    radial-gradient(circle at 88% 8%, rgba(168, 162, 158, 0.07) 0%, transparent 38%),
    linear-gradient(180deg, #f0ebe4 0%, #f5f0ea 100%);
}

/* ---- frost ---- */

:root[data-theme="frost"] {
  --bg: #eef2f6;
  --bg-elev: #f8fafc;
  --bg-elev-2: #e8eef4;
  --border: #c8d4e0;
  --border-strong: #a8b8c8;
  --border-subtle: rgba(200, 212, 224, 0.55);
  --text: #0f172a;
  --text-muted: #475569;
  --text-dim: #64748b;
  --accent: #475569;
  --accent-dark: #475569;
  --accent-strong: #64748b;
  --accent-soft: rgba(71, 85, 105, 0.14);
  --accent-glow: rgba(71, 85, 105, 0.1);
  --accent-text: #fff;
  --accent-text-hover: #fff;
  --accent-hover: #64748b;
  --good: #0284c7;
  --good-soft: rgba(2, 132, 199, 0.12);
  --ghost-bg: rgba(200, 212, 224, 0.35);
  --tab-hover: rgba(71, 85, 105, 0.06);
  --tab-active-bg: linear-gradient(135deg, rgba(71, 85, 105, 0.14), rgba(100, 116, 139, 0.08));
  --tab-active-border: rgba(71, 85, 105, 0.32);
  --tab-active-inset: rgba(255, 255, 255, 0.85);
  --track-bg: rgba(200, 212, 224, 0.4);
  --hero-bg: linear-gradient(135deg, #f4f8fc 0%, #f8fafc 100%);
  --shadow: 0 8px 28px rgba(16, 24, 40, 0.08);
}

[data-theme="frost"] body {
  background:
    radial-gradient(circle at 12% 0%, rgba(71, 85, 105, 0.1) 0%, transparent 42%),
    radial-gradient(circle at 88% 8%, rgba(100, 116, 139, 0.07) 0%, transparent 38%),
    linear-gradient(180deg, #e8eef4 0%, #eef2f6 100%);
}

/* ---- noir (cinema black + red) ---- */

:root[data-theme="noir"] {
  --bg: #0c0a0a;
  --bg-elev: #181414;
  --bg-elev-2: #221c1c;
  --border: #4a3838;
  --border-strong: #645050;
  --border-subtle: rgba(74, 56, 56, 0.45);
  --text: #f5f0f0;
  --text-muted: #b8a0a0;
  --text-dim: #887070;
  --accent: #ef4444;
  --accent-dark: #dc2626;
  --accent-strong: #f87171;
  --accent-soft: rgba(239, 68, 68, 0.18);
  --accent-glow: rgba(239, 68, 68, 0.14);
  --accent-text: #1a0808;
  --accent-text-hover: #0a0404;
  --accent-hover: #f87171;
  --good: #22c55e;
  --good-soft: rgba(34, 197, 94, 0.18);
  --watching: #22c55e;
  --watching-soft: rgba(34, 197, 94, 0.18);
  --ghost-bg: rgba(34, 28, 28, 0.5);
  --tab-hover: rgba(239, 68, 68, 0.08);
  --tab-active-bg: linear-gradient(135deg, rgba(239, 68, 68, 0.22), rgba(248, 113, 113, 0.1));
  --tab-active-border: rgba(239, 68, 68, 0.45);
  --tab-active-inset: rgba(255, 255, 255, 0.06);
  --track-bg: rgba(74, 56, 56, 0.5);
  --hero-bg: linear-gradient(135deg, #201818 0%, #181414 100%);
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
}

[data-theme="noir"] body {
  background:
    radial-gradient(ellipse 70% 45% at 50% -10%, rgba(239, 68, 68, 0.12), transparent),
    radial-gradient(circle at 90% 20%, rgba(255, 255, 255, 0.03), transparent 40%),
    linear-gradient(180deg, #100c0c 0%, #0c0a0a 100%);
}

/* ---- plasma (violet + cyan) ---- */

:root[data-theme="plasma"] {
  --bg: #100818;
  --bg-elev: #1a1028;
  --bg-elev-2: #241838;
  --border: #503870;
  --border-strong: #684898;
  --border-subtle: rgba(80, 56, 112, 0.45);
  --text: #f4eef8;
  --text-muted: #c4a8e0;
  --text-dim: #9078b0;
  --accent: #a855f7;
  --accent-dark: #7c3aed;
  --accent-strong: #22d3ee;
  --accent-soft: rgba(168, 85, 247, 0.2);
  --accent-glow: rgba(34, 211, 238, 0.14);
  --accent-text: #140820;
  --accent-text-hover: #0a0410;
  --accent-hover: #c084fc;
  --good: #22d3ee;
  --good-soft: rgba(34, 211, 238, 0.18);
  --watching: #22d3ee;
  --watching-soft: rgba(34, 211, 238, 0.18);
  --ghost-bg: rgba(36, 24, 56, 0.5);
  --tab-hover: rgba(168, 85, 247, 0.08);
  --tab-active-bg: linear-gradient(135deg, rgba(168, 85, 247, 0.24), rgba(34, 211, 238, 0.12));
  --tab-active-border: rgba(168, 85, 247, 0.48);
  --tab-active-inset: rgba(255, 255, 255, 0.06);
  --track-bg: rgba(80, 56, 112, 0.5);
  --hero-bg: linear-gradient(135deg, #221430 0%, #1a1028 100%);
  --shadow: 0 12px 40px rgba(20, 0, 40, 0.45);
}

[data-theme="plasma"] body {
  background:
    radial-gradient(circle at 20% 0%, rgba(168, 85, 247, 0.16) 0%, transparent 45%),
    radial-gradient(circle at 80% 10%, rgba(34, 211, 238, 0.1) 0%, transparent 42%),
    linear-gradient(180deg, #140c20 0%, #100818 100%);
}

/* ---- pebble (soft stone + teal) ---- */

:root[data-theme="pebble"] {
  --bg: #f4f5f2;
  --bg-elev: #fafbf8;
  --bg-elev-2: #eceee8;
  --border: #c8ccc4;
  --border-strong: #a8aea4;
  --border-subtle: rgba(200, 204, 196, 0.55);
  --text: #1a1f1c;
  --text-muted: #5a645c;
  --text-dim: #788078;
  --accent: #0d9488;
  --accent-dark: #0d9488;
  --accent-strong: #64748b;
  --accent-soft: rgba(13, 148, 136, 0.14);
  --accent-glow: rgba(13, 148, 136, 0.1);
  --accent-text: #fff;
  --accent-text-hover: #fff;
  --accent-hover: #14b8a6;
  --good: #059669;
  --good-soft: rgba(5, 150, 105, 0.12);
  --watching: #059669;
  --watching-soft: rgba(5, 150, 105, 0.12);
  --ghost-bg: rgba(200, 204, 196, 0.35);
  --tab-hover: rgba(13, 148, 136, 0.06);
  --tab-active-bg: linear-gradient(135deg, rgba(13, 148, 136, 0.14), rgba(100, 116, 139, 0.08));
  --tab-active-border: rgba(13, 148, 136, 0.32);
  --tab-active-inset: rgba(255, 255, 255, 0.85);
  --track-bg: rgba(200, 204, 196, 0.4);
  --hero-bg: linear-gradient(135deg, #f8faf6 0%, #fafbf8 100%);
  --shadow: 0 8px 28px rgba(24, 32, 28, 0.08);
}

[data-theme="pebble"] body {
  background:
    radial-gradient(circle at 12% 0%, rgba(13, 148, 136, 0.1) 0%, transparent 42%),
    radial-gradient(circle at 88% 8%, rgba(100, 116, 139, 0.07) 0%, transparent 38%),
    linear-gradient(180deg, #eef0ea 0%, #f4f5f2 100%);
}

/* Light themes — aurora tab label uses inverted blend so shimmer stays in the glyphs */
:root[data-theme="paper"],
:root[data-theme="cream"],
:root[data-theme="mint"],
:root[data-theme="lavender"],
:root[data-theme="sunrise"],
:root[data-theme="snow"],
:root[data-theme="sand"],
:root[data-theme="blush"],
:root[data-theme="sky"],
:root[data-theme="honey"],
:root[data-theme="sage"],
:root[data-theme="lilac"],
:root[data-theme="coral"],
:root[data-theme="linen"],
:root[data-theme="frost"],
:root[data-theme="pebble"] {
  --aurora-text: #101010;
  --aurora-blend-mode: lighten;
  --aurora-item-blend-mode: multiply;
  --aurora-item-opacity: 0.72;
  --brand-mark-filter: drop-shadow(0 3px 8px rgba(15, 23, 42, 0.32)) drop-shadow(0 1px 3px rgba(15, 23, 42, 0.22));
}

[data-theme="paper"] .mobile-app-support-bar,
[data-theme="cream"] .mobile-app-support-bar,
[data-theme="mint"] .mobile-app-support-bar,
[data-theme="lavender"] .mobile-app-support-bar,
[data-theme="sunrise"] .mobile-app-support-bar,
[data-theme="snow"] .mobile-app-support-bar,
[data-theme="sand"] .mobile-app-support-bar,
[data-theme="blush"] .mobile-app-support-bar,
[data-theme="sky"] .mobile-app-support-bar,
[data-theme="honey"] .mobile-app-support-bar,
[data-theme="sage"] .mobile-app-support-bar,
[data-theme="lilac"] .mobile-app-support-bar,
[data-theme="coral"] .mobile-app-support-bar,
[data-theme="linen"] .mobile-app-support-bar,
[data-theme="frost"] .mobile-app-support-bar,
[data-theme="pebble"] .mobile-app-support-bar {
  box-shadow: 0 10px 32px rgba(15, 23, 42, 0.12);
}

/* ---- theme swatch picker (prefs dialog) ---- */

.theme-grid {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-height: min(62vh, 540px);
  overflow-y: auto;
  padding-right: 4px;
}

.theme-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.theme-group-label {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.theme-group-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.theme-swatch {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 10px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--border);
  background: var(--bg-elev-2);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--text);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.theme-swatch:hover {
  border-color: var(--border-strong);
}

.theme-swatch.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.theme-swatch-colors {
  display: flex;
  gap: 4px;
  height: 28px;
  border-radius: 6px;
  overflow: hidden;
}

.theme-swatch-colors span {
  flex: 1;
}

.theme-swatch-name {
  font-size: 0.8rem;
  font-weight: 700;
}

.theme-swatch-desc {
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.3;
}

@media (max-width: 520px) {
  .theme-group-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}