:root {
    color-scheme: dark light;
    --theme-control-bg: rgba(15, 23, 42, 0.72);
    --theme-control-border: rgba(255, 255, 255, 0.12);
    --theme-control-text: var(--text, #e5e7eb);
    --theme-control-muted: var(--muted, #94a3b8);
}


html[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0b1018;
    --bg-soft: #121826;
    --panel: rgba(17, 24, 39, 0.86);
    --panel-strong: rgba(26, 34, 49, 0.98);
    --panel-soft: #1f2937;
    --surface: #161d2b;
    --surface-2: #1b2435;
    --surface-soft: #202b3f;
    --text: #eef2f8;
    --muted: #a8b3c7;
    --border: rgba(148, 163, 184, 0.18);
    --border-strong: rgba(148, 163, 184, 0.28);
    --line: rgba(255,255,255,.11);
    --line-strong: rgba(255,255,255,.18);
    --accent: #f15a22;
    --accent-strong: #ff7a45;
    --accent-soft: rgba(241, 90, 34, 0.16);
    --gold: #f5c518;
    --gold-soft: rgba(245,197,24,.14);
    --success: #47d18c;
    --success-soft: rgba(71, 209, 140, 0.16);
    --danger: #fb7185;
    --danger-strong: #ff91a2;
    --danger-soft: rgba(251, 113, 133, 0.16);
    --success-bg: rgba(34, 197, 94, 0.16);
    --success-border: rgba(34, 197, 94, 0.45);
    --error-bg: rgba(239, 68, 68, 0.14);
    --error-border: rgba(239, 68, 68, 0.35);
    --shadow: 0 22px 48px rgba(2, 6, 23, 0.35);
    --theme-control-bg: rgba(15, 23, 42, 0.72);
    --theme-control-border: rgba(255, 255, 255, 0.12);
    --theme-control-text: #eef2f8;
    --theme-control-muted: #a8b3c7;
}

html[data-theme="dark"] body {
    background:
        radial-gradient(circle at top right, rgba(241, 90, 34, 0.18), transparent 21%),
        radial-gradient(circle at top left, rgba(96, 165, 250, 0.08), transparent 25%),
        linear-gradient(180deg, #0b1018 0%, #080b12 100%);
}

html[data-theme="light"] {
    color-scheme: light;
    --bg: #f4f0e8;
    --bg-soft: #fffaf0;
    --panel: rgba(255, 255, 255, 0.92);
    --panel-strong: rgba(255, 255, 255, 0.98);
    --panel-soft: #f1f5f9;
    --surface: #ffffff;
    --surface-2: #f1f5f9;
    --surface-soft: #e8edf5;
    --text: #172033;
    --muted: #4f5f76;
    --border: rgba(15, 23, 42, 0.16);
    --border-strong: rgba(15, 23, 42, 0.24);
    --line: rgba(15, 23, 42, 0.14);
    --line-strong: rgba(15, 23, 42, 0.22);
    --accent: #d84b1e;
    --accent-strong: #f15a22;
    --accent-soft: rgba(216, 75, 30, 0.12);
    --gold: #b38300;
    --gold-soft: rgba(179, 131, 0, 0.12);
    --success: #16875a;
    --success-soft: rgba(22, 135, 90, 0.13);
    --danger: #dc3f61;
    --danger-strong: #e75572;
    --danger-soft: rgba(220, 63, 97, 0.13);
    --success-bg: rgba(22, 163, 74, 0.12);
    --success-border: rgba(22, 163, 74, 0.35);
    --error-bg: rgba(220, 38, 38, 0.11);
    --error-border: rgba(220, 38, 38, 0.28);
    --shadow: 0 18px 44px rgba(15, 23, 42, 0.12);
    --theme-control-bg: rgba(255, 255, 255, 0.86);
    --theme-control-border: rgba(15, 23, 42, 0.18);
    --theme-control-text: #172033;
    --theme-control-muted: #60708a;
}

html[data-theme="light"] body {
    background:
        radial-gradient(circle at top right, rgba(241, 90, 34, 0.16), transparent 22%),
        radial-gradient(circle at top left, rgba(96, 165, 250, 0.14), transparent 26%),
        linear-gradient(180deg, #fffaf0 0%, #f4f0e8 100%);
}

html[data-theme="matrix"] {
    color-scheme: dark;
    --bg: #020604;
    --bg-soft: #06110b;
    --panel: rgba(4, 17, 10, 0.92);
    --panel-strong: rgba(5, 23, 13, 0.98);
    --panel-soft: #071a10;
    --surface: #07140d;
    --surface-2: #0b2114;
    --surface-soft: #0d2b18;
    --text: #d8ffe6;
    --muted: #82b996;
    --border: rgba(41, 255, 114, 0.18);
    --border-strong: rgba(41, 255, 114, 0.32);
    --line: rgba(41, 255, 114, 0.18);
    --line-strong: rgba(41, 255, 114, 0.31);
    --accent: #00b95c;
    --accent-strong: #29ff72;
    --accent-soft: rgba(41, 255, 114, 0.14);
    --gold: #29ff72;
    --gold-soft: rgba(41, 255, 114, 0.14);
    --success: #29ff72;
    --success-soft: rgba(41, 255, 114, 0.16);
    --danger: #ff4d77;
    --danger-strong: #ff7a99;
    --danger-soft: rgba(255, 77, 119, 0.14);
    --success-bg: rgba(41, 255, 114, 0.12);
    --success-border: rgba(41, 255, 114, 0.36);
    --error-bg: rgba(255, 77, 119, 0.12);
    --error-border: rgba(255, 77, 119, 0.30);
    --shadow: 0 22px 50px rgba(0, 0, 0, 0.55);
    --theme-control-bg: rgba(4, 17, 10, 0.88);
    --theme-control-border: rgba(41, 255, 114, 0.24);
    --theme-control-text: #d8ffe6;
    --theme-control-muted: #82b996;
}

html[data-theme="matrix"] body {
    background:
        linear-gradient(90deg, rgba(41, 255, 114, 0.035) 1px, transparent 1px),
        linear-gradient(180deg, rgba(41, 255, 114, 0.035) 1px, transparent 1px),
        radial-gradient(circle at 20% 0%, rgba(41, 255, 114, 0.18), transparent 24%),
        linear-gradient(180deg, #020604 0%, #06110b 100%);
    background-size: 26px 26px, 26px 26px, auto, auto;
}

html[data-theme="matrix"] h1,
html[data-theme="matrix"] h2,
html[data-theme="matrix"] h3,
html[data-theme="matrix"] .stat-label,
html[data-theme="matrix"] .kicker,
html[data-theme="matrix"] .eyebrow {
    text-shadow: 0 0 18px rgba(41, 255, 114, 0.18);
}

html[data-theme="lotr"] {
    color-scheme: dark;
    --bg: #15100a;
    --bg-soft: #21180d;
    --panel: rgba(34, 25, 14, 0.92);
    --panel-strong: rgba(43, 32, 16, 0.98);
    --panel-soft: #302212;
    --surface: #241a0e;
    --surface-2: #332511;
    --surface-soft: #403018;
    --text: #f4ead2;
    --muted: #c8b88e;
    --border: rgba(214, 174, 86, 0.22);
    --border-strong: rgba(214, 174, 86, 0.38);
    --line: rgba(214, 174, 86, 0.22);
    --line-strong: rgba(214, 174, 86, 0.38);
    --accent: #8f6a2f;
    --accent-strong: #d6ae56;
    --accent-soft: rgba(214, 174, 86, 0.16);
    --gold: #d6ae56;
    --gold-soft: rgba(214, 174, 86, 0.16);
    --success: #8fc27c;
    --success-soft: rgba(143, 194, 124, 0.14);
    --danger: #c66b5f;
    --danger-strong: #dc8478;
    --danger-soft: rgba(198, 107, 95, 0.14);
    --success-bg: rgba(143, 194, 124, 0.12);
    --success-border: rgba(143, 194, 124, 0.34);
    --error-bg: rgba(198, 107, 95, 0.12);
    --error-border: rgba(198, 107, 95, 0.30);
    --shadow: 0 20px 52px rgba(0, 0, 0, 0.48);
    --theme-control-bg: rgba(34, 25, 14, 0.88);
    --theme-control-border: rgba(214, 174, 86, 0.27);
    --theme-control-text: #f4ead2;
    --theme-control-muted: #c8b88e;
}

html[data-theme="lotr"] body {
    background:
        radial-gradient(circle at top left, rgba(214, 174, 86, 0.18), transparent 26%),
        radial-gradient(circle at bottom right, rgba(44, 83, 49, 0.22), transparent 30%),
        linear-gradient(135deg, rgba(214, 174, 86, 0.035) 25%, transparent 25%) 0 0 / 36px 36px,
        linear-gradient(180deg, #15100a 0%, #20180d 100%);
}

html[data-theme="lotr"] h1,
html[data-theme="lotr"] h2,
html[data-theme="lotr"] h3 {
    letter-spacing: -0.035em;
}

html[data-theme="starwars"] {
    color-scheme: dark;
    --bg: #050711;
    --bg-soft: #0a1020;
    --panel: rgba(10, 16, 32, 0.90);
    --panel-strong: rgba(13, 20, 40, 0.98);
    --panel-soft: #101932;
    --surface: #0c1428;
    --surface-2: #121d3a;
    --surface-soft: #172449;
    --text: #f6f8ff;
    --muted: #aeb9d7;
    --border: rgba(255, 213, 79, 0.20);
    --border-strong: rgba(98, 180, 255, 0.36);
    --line: rgba(255, 213, 79, 0.18);
    --line-strong: rgba(98, 180, 255, 0.36);
    --accent: #2f8cff;
    --accent-strong: #ffd54f;
    --accent-soft: rgba(47, 140, 255, 0.15);
    --gold: #ffd54f;
    --gold-soft: rgba(255, 213, 79, 0.16);
    --success: #5eead4;
    --success-soft: rgba(94, 234, 212, 0.14);
    --danger: #ff6b8a;
    --danger-strong: #ff8aa4;
    --danger-soft: rgba(255, 107, 138, 0.14);
    --success-bg: rgba(94, 234, 212, 0.12);
    --success-border: rgba(94, 234, 212, 0.34);
    --error-bg: rgba(255, 107, 138, 0.12);
    --error-border: rgba(255, 107, 138, 0.30);
    --shadow: 0 22px 54px rgba(0, 0, 0, 0.58);
    --theme-control-bg: rgba(10, 16, 32, 0.88);
    --theme-control-border: rgba(255, 213, 79, 0.25);
    --theme-control-text: #f6f8ff;
    --theme-control-muted: #aeb9d7;
}

html[data-theme="starwars"] body {
    background:
        radial-gradient(circle at 16% 22%, rgba(255, 255, 255, 0.55) 0 1px, transparent 2px),
        radial-gradient(circle at 74% 12%, rgba(255, 255, 255, 0.45) 0 1px, transparent 2px),
        radial-gradient(circle at 88% 68%, rgba(255, 255, 255, 0.34) 0 1px, transparent 2px),
        radial-gradient(circle at 24% 80%, rgba(255, 255, 255, 0.30) 0 1px, transparent 2px),
        radial-gradient(circle at top right, rgba(47, 140, 255, 0.22), transparent 28%),
        linear-gradient(180deg, #050711 0%, #0a1020 100%);
}

/* Cross-page theme selector */
.theme-selector {
    position: relative;
    display: grid;
    gap: 7px;
    width: 100%;
    padding: 11px 12px 12px;
    border-radius: 18px;
    border: 1px solid var(--theme-control-border);
    background: var(--theme-control-bg);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
    backdrop-filter: blur(8px);
}

.theme-selector span,
.theme-label {
    display: block;
    color: var(--theme-control-muted);
    font-size: 0.70rem;
    font-weight: 850;
    letter-spacing: 0.10em;
    line-height: 1;
    text-transform: uppercase;
}

.theme-select {
    width: 100%;
    min-height: 38px;
    padding: 8px 34px 8px 10px;
    border-radius: 12px;
    border: 1px solid var(--theme-control-border);
    background: color-mix(in srgb, var(--theme-control-bg) 72%, var(--bg, #0b1018));
    color: var(--theme-control-text);
    font: inherit;
    font-size: 0.90rem;
    font-weight: 700;
    cursor: pointer;
}

.theme-select:focus {
    outline: 2px solid color-mix(in srgb, var(--accent-strong, #ff7a45) 45%, transparent);
    outline-offset: 2px;
}

/* Shared surfaces overridden after each page's local CSS */
html[data-theme] .hero,
html[data-theme] .hero-card,
html[data-theme] .panel,
html[data-theme] .stat-card,
html[data-theme] .movie-card,
html[data-theme] .movie-choice,
html[data-theme] .selected-card,
html[data-theme] .notice,
html[data-theme] .modal-card,
html[data-theme] .form-controls,
html[data-theme] .submit-panel,
html[data-theme] .toolbar-row,
html[data-theme] .veto-toolbar {
    border-color: var(--border, var(--line, rgba(255,255,255,.14)));
}

html[data-theme] .hero,
html[data-theme] .hero-card,
html[data-theme] .panel,
html[data-theme] .notice {
    background: linear-gradient(135deg, var(--panel-strong, var(--panel, #111827)), var(--panel, #111827));
    box-shadow: var(--shadow);
}

html[data-theme] .stat-card,
html[data-theme] .movie-card,
html[data-theme] .movie-choice,
html[data-theme] .selected-card {
    background: color-mix(in srgb, var(--surface, var(--panel, #111827)) 88%, transparent);
}

html[data-theme] .logo-link,
html[data-theme] .logo-badge,
html[data-theme] .main-logo-badge {
    background: linear-gradient(180deg, var(--surface-2, #1b2435), var(--surface, #161d2b));
    border-color: var(--border-strong, var(--border, rgba(255,255,255,.14)));
}

html[data-theme] input,
html[data-theme] select,
html[data-theme] textarea {
    background: color-mix(in srgb, var(--surface, #111827) 88%, var(--bg, #0b1018));
    color: var(--text);
    border-color: var(--border-strong, var(--border, rgba(255,255,255,.16)));
}

html[data-theme] input::placeholder,
html[data-theme] textarea::placeholder {
    color: color-mix(in srgb, var(--muted) 78%, transparent);
}

html[data-theme] .primary-link,
html[data-theme] .primary-button {
    background: linear-gradient(180deg, var(--accent-strong), var(--accent));
}

html[data-theme="light"] .primary-link,
html[data-theme="light"] .primary-button {
    color: #ffffff;
}

html[data-theme="matrix"] .primary-link,
html[data-theme="matrix"] .primary-button,
html[data-theme="lotr"] .primary-link,
html[data-theme="lotr"] .primary-button,
html[data-theme="starwars"] .primary-link,
html[data-theme="starwars"] .primary-button {
    color: #071014;
}

html[data-theme="light"] .secondary-button,
html[data-theme="light"] .ghost-button,
html[data-theme="light"] .admin-float-button,
html[data-theme="light"] .admin-modal-trigger {
    background: rgba(255, 255, 255, 0.86);
    color: var(--text);
    border-color: var(--border);
}

html[data-theme="matrix"] .imdb-link,
html[data-theme="matrix"] .inline-imdb {
    background: rgba(41, 255, 114, 0.15);
    border-color: rgba(41, 255, 114, 0.34);
    color: #9bffc0;
}

html[data-theme="starwars"] .imdb-link,
html[data-theme="starwars"] .inline-imdb,
html[data-theme="lotr"] .imdb-link,
html[data-theme="lotr"] .inline-imdb {
    background: var(--gold);
    color: #121212;
}

@media (max-width: 760px) {
    .theme-selector {
        width: 100%;
    }
}

/* v7 readability and theme polish */
html[data-theme="light"] {
    --bg: #f2efe8;
    --bg-soft: #fbf7ef;
    --panel: rgba(255, 255, 255, 0.96);
    --panel-strong: #ffffff;
    --panel-soft: #f3f5f8;
    --surface: #ffffff;
    --surface-2: #f6f8fb;
    --surface-soft: #e9edf5;
    --text: #1b2638;
    --muted: #384860;
    --border: rgba(15, 23, 42, 0.20);
    --border-strong: rgba(15, 23, 42, 0.30);
    --line: rgba(15, 23, 42, 0.16);
    --line-strong: rgba(15, 23, 42, 0.26);
    --accent: #d94b20;
    --accent-strong: #f05a24;
    --accent-soft: rgba(217, 75, 32, 0.13);
    --gold: #8c6500;
    --gold-soft: rgba(140, 101, 0, 0.12);
    --success: #087a4d;
    --success-soft: rgba(8, 122, 77, 0.12);
    --danger: #d93b5b;
    --danger-strong: #bf2847;
    --danger-soft: rgba(217, 59, 91, 0.12);
    --shadow: 0 16px 38px rgba(15, 23, 42, 0.13);
    --theme-control-bg: rgba(255, 255, 255, 0.94);
    --theme-control-border: rgba(15, 23, 42, 0.22);
    --theme-control-text: #1b2638;
    --theme-control-muted: #43536a;
}

html[data-theme="light"] body {
    color: var(--text);
}

html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] .movie-title,
html[data-theme="light"] .selected-card h3,
html[data-theme="light"] .modal-header h2,
html[data-theme="light"] .section-heading h2 {
    color: var(--text) !important;
}

html[data-theme="light"] .hero-text,
html[data-theme="light"] .page-purpose,
html[data-theme="light"] .section-heading p,
html[data-theme="light"] .movie-meta,
html[data-theme="light"] .summary,
html[data-theme="light"] .selected-card p,
html[data-theme="light"] .muted-text,
html[data-theme="light"] .empty-state,
html[data-theme="light"] .notice-detail {
    color: var(--muted) !important;
}

html[data-theme="light"] .kicker,
html[data-theme="light"] .card-kicker,
html[data-theme="light"] .stat-label,
html[data-theme="light"] .theme-label,
html[data-theme="light"] .theme-selector span {
    color: #7a5700 !important;
}

html[data-theme="light"] .chip,
html[data-theme="light"] .name-chip,
html[data-theme="light"] .participant-chip,
html[data-theme="light"] .stat-pill,
html[data-theme="light"] .selected-card,
html[data-theme="light"] .movie-card,
html[data-theme="light"] .movie-choice,
html[data-theme="light"] .toolbar-row,
html[data-theme="light"] .veto-toolbar,
html[data-theme="light"] .no-veto-option,
html[data-theme="light"] .no-veto-card {
    color: var(--text);
    border-color: var(--border);
}

html[data-theme="light"] .primary-link,
html[data-theme="light"] .primary-button {
    color: #ffffff !important;
    text-shadow: none;
}

html[data-theme="starwars"] {
    --bg: #00030a;
    --bg-soft: #030814;
    --panel: rgba(3, 8, 20, 0.90);
    --panel-strong: rgba(1, 4, 12, 0.98);
    --panel-soft: #071126;
    --surface: #050b1a;
    --surface-2: #08152d;
    --surface-soft: #0d2145;
    --text: #d7f7ff;
    --muted: #89bed0;
    --border: rgba(75, 213, 238, 0.24);
    --border-strong: rgba(255, 232, 31, 0.38);
    --line: rgba(75, 213, 238, 0.20);
    --line-strong: rgba(255, 232, 31, 0.34);
    --accent: #4bd5ee;
    --accent-strong: #ffe81f;
    --accent-soft: rgba(75, 213, 238, 0.15);
    --gold: #ffe81f;
    --gold-soft: rgba(255, 232, 31, 0.16);
    --success: #4bd5ee;
    --success-soft: rgba(75, 213, 238, 0.14);
    --danger: #ffe81f;
    --danger-strong: #fff46a;
    --danger-soft: rgba(255, 232, 31, 0.14);
    --shadow: 0 24px 58px rgba(0, 0, 0, 0.68);
    --theme-control-bg: rgba(1, 4, 12, 0.92);
    --theme-control-border: rgba(255, 232, 31, 0.34);
    --theme-control-text: #d7f7ff;
    --theme-control-muted: #ffe81f;
}

html[data-theme="starwars"] body {
    color: var(--text);
    background:
        radial-gradient(circle at 6% 14%, rgba(255,255,255,0.85) 0 1px, transparent 1.7px),
        radial-gradient(circle at 18% 72%, rgba(255,255,255,0.42) 0 1px, transparent 1.9px),
        radial-gradient(circle at 34% 28%, rgba(255,255,255,0.54) 0 1px, transparent 2px),
        radial-gradient(circle at 52% 82%, rgba(255,255,255,0.38) 0 1px, transparent 1.8px),
        radial-gradient(circle at 68% 18%, rgba(255,255,255,0.74) 0 1px, transparent 1.9px),
        radial-gradient(circle at 84% 62%, rgba(255,255,255,0.50) 0 1px, transparent 2px),
        radial-gradient(circle at 96% 36%, rgba(255,255,255,0.65) 0 1px, transparent 1.8px),
        radial-gradient(circle at top right, rgba(75, 213, 238, 0.20), transparent 31%),
        radial-gradient(circle at bottom left, rgba(255, 232, 31, 0.10), transparent 28%),
        linear-gradient(180deg, #00030a 0%, #020611 48%, #000000 100%);
    background-size: auto, auto, auto, auto, auto, auto, auto, auto, auto, auto;
}

html[data-theme="starwars"] .hero,
html[data-theme="starwars"] .hero-card,
html[data-theme="starwars"] .panel,
html[data-theme="starwars"] .notice,
html[data-theme="starwars"] .modal-card {
    background:
        radial-gradient(circle at top right, rgba(75, 213, 238, 0.13), transparent 34%),
        linear-gradient(135deg, rgba(1, 4, 12, 0.98), rgba(5, 11, 26, 0.94));
    border-color: rgba(75, 213, 238, 0.24);
}

html[data-theme="starwars"] h1 {
    color: #4bd5ee !important;
    text-shadow: 0 0 16px rgba(75, 213, 238, 0.34), 0 0 38px rgba(75, 213, 238, 0.14);
}

html[data-theme="starwars"] .hero-text,
html[data-theme="starwars"] .page-purpose {
    color: #9beeff !important;
}

html[data-theme="starwars"] h2,
html[data-theme="starwars"] h3,
html[data-theme="starwars"] .movie-title,
html[data-theme="starwars"] .section-heading h2,
html[data-theme="starwars"] .selected-card h3,
html[data-theme="starwars"] .kicker,
html[data-theme="starwars"] .card-kicker,
html[data-theme="starwars"] .stat-label,
html[data-theme="starwars"] .theme-selector span {
    color: #ffe81f !important;
    text-shadow: 0 0 14px rgba(255, 232, 31, 0.18);
}

html[data-theme="starwars"] .primary-link,
html[data-theme="starwars"] .primary-button {
    color: #050711 !important;
    background: linear-gradient(180deg, #fff46a 0%, #ffe81f 54%, #d6b500 100%) !important;
    box-shadow: 0 0 22px rgba(255, 232, 31, 0.20), 0 10px 24px rgba(0, 0, 0, 0.36);
}

html[data-theme="starwars"] .secondary-button,
html[data-theme="starwars"] .ghost-button,
html[data-theme="starwars"] .admin-float-button,
html[data-theme="starwars"] .admin-modal-trigger {
    color: #d7f7ff;
    background: rgba(3, 8, 20, 0.78);
    border-color: rgba(75, 213, 238, 0.30);
}

html[data-theme="starwars"] .stat-pill-active,
html[data-theme="starwars"] .movie-card.is-selected,
html[data-theme="starwars"] .movie-choice.is-selected {
    border-color: rgba(255, 232, 31, 0.58) !important;
    box-shadow: 0 0 0 3px rgba(255, 232, 31, 0.12), var(--shadow);
}

html[data-theme="starwars"] .imdb-link,
html[data-theme="starwars"] .inline-imdb {
    background: #ffe81f !important;
    border-color: #fff46a !important;
    color: #050711 !important;
}