/**
 * SYSTEM DOCUMENTATION
 * File: public/css/theme-modes.css
 * Role: Defines responsive, theme-aware presentation for Themes & Presentation; it contains no application authority.
 * Connections: Themes & Presentation views and their matching browser controllers.
 * Stability: Documentation only; preserve existing public contracts and runtime behavior.
 * END SYSTEM DOCUMENTATION
 */
/* theme-modes.css - site-wide multi-theme palettes and final theme overrides.
   Loaded after page CSS so every screen can share the same theme engine. */

:root[data-theme="minimal_dark"] {
  color-scheme: dark;
  --bg1: rgba(37, 99, 235, 0.28);
  --bg2: rgba(245, 158, 11, 0.12);
  --bg3: rgba(124, 58, 237, 0.24);
  --page-bg: #0b1120;
  --surface: rgba(15, 23, 42, 0.82);
  --surface-solid: #111827;
  --surface-soft: rgba(30, 41, 59, 0.74);
  --surface-muted: #1e293b;
  --card: var(--surface);
  --stroke: rgba(148, 163, 184, 0.28);
  --stroke-strong: rgba(147, 197, 253, 0.48);
  --text: #e5eefb;
  --muted: #a8b3c7;
  --primary: #60a5fa;
  --primary2: #a78bfa;
  --primary-soft: rgba(37, 99, 235, 0.18);
  --good: #4ade80;
  --good-soft: rgba(34, 197, 94, 0.16);
  --bad: #fb7185;
  --bad-soft: rgba(239, 68, 68, 0.16);
  --amber: #fbbf24;
  --amber-soft: rgba(245, 158, 11, 0.14);
  --shadow: 0 20px 60px rgba(0, 0, 0, .35);
  --shadow2: 0 8px 22px rgba(0, 0, 0, .24);
  --overlay: rgba(0, 0, 0, 0.62);
  --theme-gradient: radial-gradient(1200px 600px at 15% 10%, var(--bg1), transparent 60%), radial-gradient(900px 600px at 90% 30%, var(--bg3), transparent 55%), radial-gradient(900px 700px at 40% 95%, var(--bg2), transparent 55%), linear-gradient(180deg, var(--page-bg), var(--surface-solid));
  --kh-purple: #6d28d9;
  --kh-purple2: #9333ea;
  --kh-blue: #2563eb;
  --kh-card: rgba(15, 23, 42, .72);
  --kh-text: #e5eefb;
  --kh-muted: #a8b3c7;
}

:root[data-theme="modern"] {
  color-scheme: light;
  --bg1: #dbeafe;
  --bg2: #eef2ff;
  --bg3: #f5f3ff;
  --page-bg: #f8fafc;
  --surface: rgba(255, 255, 255, 0.92);
  --surface-solid: #ffffff;
  --surface-soft: rgba(241, 245, 249, 0.9);
  --surface-muted: #f1f5f9;
  --card: var(--surface);
  --stroke: rgba(148, 163, 184, .38);
  --stroke-strong: rgba(79, 70, 229, .45);
  --text: #0f172a;
  --muted: #475569;
  --primary: #4f46e5;
  --primary2: #0891b2;
  --primary-soft: #eef2ff;
  --good: #059669;
  --good-soft: #d1fae5;
  --bad: #dc2626;
  --bad-soft: #fee2e2;
  --amber: #b45309;
  --amber-soft: #fef3c7;
  --shadow: 0 18px 50px rgba(15, 23, 42, .12);
  --shadow2: 0 8px 22px rgba(15, 23, 42, .08);
  --overlay: rgba(15, 23, 42, .42);
  --theme-gradient: radial-gradient(980px 620px at 12% 8%, rgba(79, 70, 229, .12), transparent 58%), radial-gradient(850px 560px at 88% 16%, rgba(8, 145, 178, .12), transparent 54%), linear-gradient(180deg, #f8fafc, #ffffff);
  --kh-purple: #4f46e5;
  --kh-purple2: #7c3aed;
  --kh-blue: #0891b2;
  --kh-card: rgba(255,255,255,.74);
  --kh-text: #0f172a;
  --kh-muted: #475569;
}

:root[data-theme="minimal"] {
  color-scheme: light;
  --bg1: rgba(226, 232, 240, .55);
  --bg2: rgba(241, 245, 249, .75);
  --bg3: rgba(248, 250, 252, .75);
  --page-bg: #fafafa;
  --surface: #ffffff;
  --surface-solid: #ffffff;
  --surface-soft: #f8fafc;
  --surface-muted: #f1f5f9;
  --card: #ffffff;
  --stroke: #e2e8f0;
  --stroke-strong: #cbd5e1;
  --text: #111827;
  --muted: #64748b;
  --primary: #2563eb;
  --primary2: #334155;
  --primary-soft: #eff6ff;
  --good: #15803d;
  --good-soft: #dcfce7;
  --bad: #b91c1c;
  --bad-soft: #fee2e2;
  --amber: #92400e;
  --amber-soft: #fef3c7;
  --shadow: 0 10px 28px rgba(15, 23, 42, .06);
  --shadow2: 0 4px 14px rgba(15, 23, 42, .05);
  --overlay: rgba(15, 23, 42, .32);
  --theme-gradient: linear-gradient(180deg, #fafafa, #ffffff);
  --kh-purple: #334155;
  --kh-purple2: #2563eb;
  --kh-blue: #2563eb;
  --kh-card: rgba(255,255,255,.84);
  --kh-text: #111827;
  --kh-muted: #64748b;
}

:root[data-theme="neon"] {
  color-scheme: dark;
  --bg1: rgba(34, 211, 238, .22);
  --bg2: rgba(236, 72, 153, .20);
  --bg3: rgba(168, 85, 247, .26);
  --page-bg: #070314;
  --surface: rgba(15, 23, 42, .78);
  --surface-solid: #0f1024;
  --surface-soft: rgba(30, 41, 59, .68);
  --surface-muted: #181a37;
  --card: rgba(15, 23, 42, .78);
  --stroke: rgba(34, 211, 238, .28);
  --stroke-strong: rgba(236, 72, 153, .58);
  --text: #f8fafc;
  --muted: #b9c8e8;
  --primary: #22d3ee;
  --primary2: #ec4899;
  --primary-soft: rgba(34, 211, 238, .14);
  --good: #4ade80;
  --good-soft: rgba(74, 222, 128, .14);
  --bad: #fb7185;
  --bad-soft: rgba(251, 113, 133, .14);
  --amber: #facc15;
  --amber-soft: rgba(250, 204, 21, .14);
  --shadow: 0 22px 65px rgba(0,0,0,.45), 0 0 28px rgba(34,211,238,.12);
  --shadow2: 0 10px 28px rgba(0,0,0,.32), 0 0 16px rgba(236,72,153,.10);
  --overlay: rgba(2, 6, 23, .70);
  --theme-gradient: radial-gradient(900px 540px at 16% 10%, rgba(34,211,238,.24), transparent 58%), radial-gradient(900px 520px at 90% 18%, rgba(236,72,153,.24), transparent 56%), radial-gradient(900px 640px at 45% 105%, rgba(168,85,247,.24), transparent 58%), linear-gradient(135deg, #070314, #111827 48%, #250a38);
  --kh-purple: #a855f7;
  --kh-purple2: #ec4899;
  --kh-blue: #22d3ee;
  --kh-card: rgba(15, 23, 42, .68);
  --kh-text: #f8fafc;
  --kh-muted: #b9c8e8;
}

:root[data-theme="genz"] {
  color-scheme: light;
  --bg1: #cffafe;
  --bg2: #fce7f3;
  --bg3: #ede9fe;
  --page-bg: #fbf7ff;
  --surface: rgba(255, 255, 255, .88);
  --surface-solid: #ffffff;
  --surface-soft: rgba(255, 255, 255, .76);
  --surface-muted: #f5f3ff;
  --card: var(--surface);
  --stroke: rgba(168, 85, 247, .25);
  --stroke-strong: rgba(236, 72, 153, .45);
  --text: #24113d;
  --muted: #6b5a7c;
  --primary: #8b5cf6;
  --primary2: #ec4899;
  --primary-soft: #f5f3ff;
  --good: #10b981;
  --good-soft: #d1fae5;
  --bad: #f43f5e;
  --bad-soft: #ffe4e6;
  --amber: #d97706;
  --amber-soft: #fef3c7;
  --shadow: 0 18px 48px rgba(139, 92, 246, .16);
  --shadow2: 0 8px 20px rgba(236, 72, 153, .10);
  --overlay: rgba(36, 17, 61, .38);
  --theme-gradient: radial-gradient(900px 540px at 10% 6%, #cffafe, transparent 60%), radial-gradient(860px 560px at 90% 16%, #fce7f3, transparent 58%), radial-gradient(760px 560px at 48% 95%, #ede9fe, transparent 56%), linear-gradient(180deg, #fbf7ff, #ffffff);
  --kh-purple: #8b5cf6;
  --kh-purple2: #ec4899;
  --kh-blue: #06b6d4;
  --kh-card: rgba(255,255,255,.74);
  --kh-text: #24113d;
  --kh-muted: #6b5a7c;
}

:root[data-theme="vibrant"] {
  color-scheme: light;
  --bg1: #bfdbfe;
  --bg2: #fde68a;
  --bg3: #fbcfe8;
  --page-bg: #fff7ed;
  --surface: rgba(255,255,255,.9);
  --surface-solid: #ffffff;
  --surface-soft: rgba(255,255,255,.78);
  --surface-muted: #fff7ed;
  --card: var(--surface);
  --stroke: rgba(249, 115, 22, .30);
  --stroke-strong: rgba(37, 99, 235, .42);
  --text: #1f2937;
  --muted: #5b6472;
  --primary: #ea580c;
  --primary2: #2563eb;
  --primary-soft: #ffedd5;
  --good: #16a34a;
  --good-soft: #dcfce7;
  --bad: #dc2626;
  --bad-soft: #fee2e2;
  --amber: #ca8a04;
  --amber-soft: #fef9c3;
  --shadow: 0 18px 48px rgba(234, 88, 12, .14);
  --shadow2: 0 8px 20px rgba(37, 99, 235, .10);
  --overlay: rgba(31, 41, 55, .40);
  --theme-gradient: radial-gradient(900px 600px at 8% 6%, #bfdbfe, transparent 58%), radial-gradient(820px 540px at 92% 16%, #fde68a, transparent 58%), radial-gradient(780px 620px at 45% 100%, #fbcfe8, transparent 58%), linear-gradient(180deg, #fff7ed, #ffffff);
  --kh-purple: #ea580c;
  --kh-purple2: #eab308;
  --kh-blue: #2563eb;
  --kh-card: rgba(255,255,255,.76);
  --kh-text: #1f2937;
  --kh-muted: #5b6472;
}

:root[data-theme="pink"] {
  color-scheme: light;
  --bg1: #fce7f3;
  --bg2: #ffe4e6;
  --bg3: #fae8ff;
  --page-bg: #fff5fa;
  --surface: rgba(255,255,255,.9);
  --surface-solid: #ffffff;
  --surface-soft: rgba(253, 242, 248, .86);
  --surface-muted: #fdf2f8;
  --card: var(--surface);
  --stroke: rgba(244, 114, 182, .32);
  --stroke-strong: rgba(219, 39, 119, .45);
  --text: #401125;
  --muted: #7a4b61;
  --primary: #db2777;
  --primary2: #be185d;
  --primary-soft: #fce7f3;
  --good: #059669;
  --good-soft: #d1fae5;
  --bad: #e11d48;
  --bad-soft: #ffe4e6;
  --amber: #b45309;
  --amber-soft: #fef3c7;
  --shadow: 0 18px 48px rgba(219, 39, 119, .14);
  --shadow2: 0 8px 20px rgba(244, 114, 182, .12);
  --overlay: rgba(64, 17, 37, .40);
  --theme-gradient: radial-gradient(900px 560px at 12% 8%, #fce7f3, transparent 60%), radial-gradient(850px 560px at 88% 18%, #fae8ff, transparent 58%), linear-gradient(180deg, #fff5fa, #ffffff);
  --kh-purple: #db2777;
  --kh-purple2: #be185d;
  --kh-blue: #a21caf;
  --kh-card: rgba(255,255,255,.76);
  --kh-text: #401125;
  --kh-muted: #7a4b61;
}

:root[data-theme="pride"] {
  color-scheme: light;
  --bg1: #fee2e2;
  --bg2: #fef3c7;
  --bg3: #dbeafe;
  --page-bg: #ffffff;
  --surface: rgba(255,255,255,.92);
  --surface-solid: #ffffff;
  --surface-soft: rgba(255,255,255,.78);
  --surface-muted: #f8fafc;
  --card: var(--surface);
  --stroke: rgba(99, 102, 241, .24);
  --stroke-strong: rgba(236, 72, 153, .42);
  --text: #111827;
  --muted: #4b5563;
  --primary: #7c3aed;
  --primary2: #ec4899;
  --primary-soft: #f5f3ff;
  --good: #16a34a;
  --good-soft: #dcfce7;
  --bad: #dc2626;
  --bad-soft: #fee2e2;
  --amber: #d97706;
  --amber-soft: #fef3c7;
  --shadow: 0 18px 48px rgba(99, 102, 241, .12);
  --shadow2: 0 8px 20px rgba(236, 72, 153, .10);
  --overlay: rgba(17, 24, 39, .38);
  --theme-gradient: linear-gradient(90deg, rgba(239,68,68,.14), rgba(249,115,22,.14), rgba(234,179,8,.14), rgba(34,197,94,.14), rgba(59,130,246,.14), rgba(139,92,246,.14)), linear-gradient(180deg, #ffffff, #f8fafc);
  --kh-purple: #7c3aed;
  --kh-purple2: #ec4899;
  --kh-blue: #2563eb;
  --kh-card: rgba(255,255,255,.78);
  --kh-text: #111827;
  --kh-muted: #4b5563;
}

/* Rice Village mirrors the Private Mark V14.7 young-rice, warm-paper and harvest-gold palette. */
:root[data-theme="village"] {
  color-scheme: light;
  --bg1: #edf3df;
  --bg2: #f3f0dc;
  --bg3: #ecd2bd;
  --page-bg: #f3f0dc;
  --surface: rgba(255, 253, 240, .94);
  --surface-solid: #fffdf0;
  --surface-soft: #edf3df;
  --surface-muted: #e1e7d2;
  --card: var(--surface);
  --stroke: rgba(53, 94, 59, .20);
  --stroke-strong: rgba(82, 125, 67, .54);
  --text: #253620;
  --muted: #526349;
  --primary: #355e3b;
  --primary2: #527d43;
  --primary-soft: #edf3df;
  --good: #527d43;
  --good-soft: #dcebd7;
  --bad: #8e3e33;
  --bad-soft: #f5dfd8;
  --amber: #735200;
  --amber-soft: #f6e8b7;
  --shadow: 0 20px 54px rgba(51, 74, 40, .16);
  --shadow2: 0 8px 22px rgba(51, 74, 40, .10);
  --overlay: rgba(37, 54, 32, .38);
  --theme-gradient: radial-gradient(920px 560px at 9% 5%, rgba(120,163,93,.22), transparent 60%), radial-gradient(860px 540px at 92% 10%, rgba(199,154,47,.20), transparent 58%), linear-gradient(180deg, #f3f0dc, #fffdf0);
  --kh-purple: #355e3b;
  --kh-purple2: #6e934a;
  --kh-blue: #66877d;
  --kh-card: rgba(255,253,240,.80);
  --kh-text: #253620;
  --kh-muted: #526349;
}

/* Beach mirrors the Private Mark sky, turquoise, sand and coral palette. */
:root[data-theme="pattaya"] {
  color-scheme: light;
  --bg1: #d8f0f5;
  --bg2: #fff1cf;
  --bg3: #f4c2ae;
  --page-bg: #eaf6f8;
  --surface: rgba(255, 253, 246, .94);
  --surface-solid: #fffdf6;
  --surface-soft: #edf8f8;
  --surface-muted: #dcecef;
  --card: var(--surface);
  --stroke: rgba(34, 91, 118, .19);
  --stroke-strong: rgba(39, 126, 167, .52);
  --text: #173b4d;
  --muted: #466878;
  --primary: #225b76;
  --primary2: #469dcc;
  --primary-soft: #e7f7fb;
  --good: #176b52;
  --good-soft: #d8eee6;
  --bad: #9d382d;
  --bad-soft: #f9e2dc;
  --amber: #785800;
  --amber-soft: #f7ebc6;
  --shadow: 0 20px 56px rgba(27, 86, 111, .16);
  --shadow2: 0 8px 22px rgba(27, 86, 111, .10);
  --overlay: rgba(23, 59, 77, .38);
  --theme-gradient: radial-gradient(940px 560px at 8% 5%, rgba(70,157,204,.23), transparent 60%), radial-gradient(880px 540px at 92% 10%, rgba(77,190,184,.20), transparent 58%), radial-gradient(760px 520px at 52% 100%, rgba(223,119,103,.13), transparent 58%), linear-gradient(180deg, #eaf6f8, #fffdf6);
  --kh-purple: #225b76;
  --kh-purple2: #277ea7;
  --kh-blue: #469dcc;
  --kh-card: rgba(255,253,246,.80);
  --kh-text: #173b4d;
  --kh-muted: #466878;
}

/* Final page-level palette application for all non-default themes. */
:root[data-theme="minimal_dark"] body,
:root[data-theme="modern"] body,
:root[data-theme="minimal"] body,
:root[data-theme="neon"] body,
:root[data-theme="genz"] body,
:root[data-theme="vibrant"] body,
:root[data-theme="pink"] body,
:root[data-theme="pride"] body,
:root[data-theme="village"] body,
:root[data-theme="pattaya"] body {
  background: var(--theme-gradient, var(--page-bg)) !important;
  color: var(--text) !important;
}

:root[data-theme-group="dark"] body {
  background-color: var(--page-bg) !important;
}

:root[data-theme-group="dark"] h1,
:root[data-theme-group="dark"] h2,
:root[data-theme-group="dark"] h3,
:root[data-theme-group="dark"] h4,
:root[data-theme-group="dark"] strong,
:root[data-theme-group="dark"] label {
  color: var(--text) !important;
}

:root[data-theme-group="dark"] p,
:root[data-theme-group="dark"] td,
:root[data-theme-group="dark"] li,
:root[data-theme-group="dark"] .body-text {
  color: color-mix(in srgb, var(--text) 88%, var(--muted)) !important;
}

:root[data-theme-group="dark"] .subtitle,
:root[data-theme-group="dark"] .meta-line,
:root[data-theme-group="dark"] .small,
:root[data-theme-group="dark"] .muted,
:root[data-theme-group="dark"] .tiny-note,
:root[data-theme-group="dark"] .gate-help,
:root[data-theme-group="dark"] .override-note,
:root[data-theme-group="dark"] .stat-lbl,
:root[data-theme-group="dark"] .roster-meta {
  color: var(--muted) !important;
}

:root[data-theme] .card,
:root[data-theme] .login-card,
:root[data-theme] .control-card,
:root[data-theme] .panel,
:root[data-theme] .main-panel,
:root[data-theme] .side-form,
:root[data-theme] .card-table,
:root[data-theme] .quiz-card,
:root[data-theme] .modal,
:root[data-theme] .modal-card,
:root[data-theme] .qr-output-zone,
:root[data-theme] .dropzone-area,
:root[data-theme] .preview-box,
:root[data-theme] .manage-box,
:root[data-theme] .menu-item,
:root[data-theme] .review-item,
:root[data-theme] .metric-card,
:root[data-theme] .stat-card,
:root[data-theme] .summary-card {
  background: var(--card) !important;
  border-color: var(--stroke) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow) !important;
}

:root[data-theme] input,
:root[data-theme] select,
:root[data-theme] textarea {
  background: var(--surface-solid) !important;
  color: var(--text) !important;
  border-color: var(--stroke) !important;
}

:root[data-theme-group="dark"] input,
:root[data-theme-group="dark"] select,
:root[data-theme-group="dark"] textarea {
  background: var(--surface-muted) !important;
}

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

:root[data-theme] input:focus,
:root[data-theme] select:focus,
:root[data-theme] textarea:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 22%, transparent) !important;
}

:root[data-theme] table,
:root[data-theme] .table-wrap,
:root[data-theme] .card-table {
  color: var(--text) !important;
}

:root[data-theme] th {
  background: var(--surface-muted) !important;
  color: var(--muted) !important;
  border-color: var(--stroke) !important;
}

:root[data-theme] td,
:root[data-theme] tr {
  border-color: var(--stroke) !important;
}

:root[data-theme] tr:hover td {
  background: var(--surface-soft) !important;
}

:root[data-theme] .btn-primary,
:root[data-theme] .btn-action-start,
:root[data-theme] .btn-action,
:root[data-theme] .btn-generate,
:root[data-theme] .btn-upload,
:root[data-theme] .btn-print,
:root[data-theme] .btn-block {
  background: linear-gradient(135deg, var(--primary), var(--primary2)) !important;
  color: #fff !important;
  border-color: transparent !important;
}

:root[data-theme] .btn-secondary,
:root[data-theme] .back-btn,
:root[data-theme] .btn-ghost {
  background: var(--surface-muted) !important;
  color: var(--text) !important;
  border-color: var(--stroke) !important;
}

:root[data-theme] .btn-secondary:hover,
:root[data-theme] .back-btn:hover,
:root[data-theme] .btn-ghost:hover,
:root[data-theme] .menu-item:hover,
:root[data-theme] .quiz-card:hover,
:root[data-theme] .control-card:hover {
  background: var(--surface-soft) !important;
  border-color: var(--stroke-strong) !important;
}

:root[data-theme] .badge,
:root[data-theme] .badge-id,
:root[data-theme] .menu-badge,
:root[data-theme] .menu-id,
:root[data-theme] .query-string,
:root[data-theme] .pill,
:root[data-theme] .tag {
  background: var(--primary-soft) !important;
  color: var(--primary) !important;
  border-color: var(--stroke-strong) !important;
}

:root[data-theme="neon"] .btn-primary,
:root[data-theme="neon"] .btn-action-start,
:root[data-theme="neon"] .btn-action,
:root[data-theme="neon"] .btn-block,
:root[data-theme="neon"] .kh-start-btn {
  box-shadow: 0 0 18px rgba(34, 211, 238, .24), 0 0 28px rgba(236, 72, 153, .16) !important;
}

:root[data-theme="pride"] .topbar,
:root[data-theme="pride"] .kh-live-topbar {
  border-image: linear-gradient(90deg, #ef4444, #f97316, #eab308, #22c55e, #3b82f6, #a855f7) 1;
}

/* Kahoot palette integration. */
:root[data-theme] body.kh-body-host,
:root[data-theme] body.kh-body-participant {
  color: var(--kh-text) !important;
  background: var(--theme-gradient, linear-gradient(135deg, #2e1065, #581c87, #111827)) !important;
}

:root[data-theme] .kh-screen,
:root[data-theme] .kh-card,
:root[data-theme] .kh-player-card,
:root[data-theme] .kh-host-lobby-card,
:root[data-theme] .kh-quiz-card,
:root[data-theme] .kh-results-card,
:root[data-theme] .kh-scoreboard-card,
:root[data-theme] .kh-final-card {
  background: var(--kh-card, var(--card)) !important;
  border-color: var(--stroke) !important;
  color: var(--kh-text, var(--text)) !important;
}

:root[data-theme] .kh-live-brand h1,
:root[data-theme] .kh-live-brand p,
:root[data-theme] .kh-hero-row,
:root[data-theme] .kh-hero-row p,
:root[data-theme] .kh-live-home {
  color: var(--kh-text, var(--text)) !important;
}

:root[data-theme-group="dark"] .kh-live-brand h1,
:root[data-theme-group="dark"] .kh-live-brand p,
:root[data-theme-group="dark"] .kh-hero-row,
:root[data-theme-group="dark"] .kh-hero-row p,
:root[data-theme-group="dark"] .kh-live-home {
  color: #fff !important;
}

:root[data-theme] .kh-live-logo {
  background: linear-gradient(135deg, var(--primary), var(--primary2)) !important;
}

/* Theme switcher */
:root {
  /* Reserved vertical space for other floating classroom controls.
     Keeps setup launchers fully clear of the theme-selector pill. */
  --theme-switcher-control-clearance: 78px;
}

.theme-switcher {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.theme-toggle {
  position: static !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  border: 1px solid var(--stroke) !important;
  border-radius: 999px !important;
  padding: 10px 14px !important;
  background: var(--surface-solid) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow2) !important;
  font: 800 .88rem ui-sans-serif, system-ui, sans-serif !important;
  cursor: pointer;
  user-select: none;
}

.theme-toggle:hover {
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}

.theme-toggle__icon,
.theme-toggle__chevron { line-height: 1; }

.theme-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  width: min(330px, calc(100vw - 26px));
  max-height: min(620px, calc(100vh - 92px));
  overflow: auto;
  display: none;
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 10px;
  background: var(--surface-solid);
  border: 1px solid var(--stroke);
  border-radius: 20px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.theme-menu.open { display: grid; }

.theme-choice {
  width: 100%;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--stroke);
  border-radius: 15px;
  padding: 9px;
  background: var(--surface-soft);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.theme-choice:hover,
.theme-choice.active {
  border-color: var(--primary);
  background: var(--primary-soft);
}

.theme-choice__swatch {
  width: 30px;
  height: 30px;
  border-radius: 11px;
  border: 1px solid rgba(255,255,255,.42);
  box-shadow: inset 0 0 0 1px rgba(15,23,42,.08);
}

.theme-choice__content { display: grid; gap: 1px; }
.theme-choice__content strong { color: var(--text) !important; font-size: .92rem; }
.theme-choice__content small { color: var(--muted) !important; font-size: .74rem; }

.theme-choice--light .theme-choice__swatch { background: linear-gradient(135deg, #dbeafe, #fff7ed); }
.theme-choice--dark .theme-choice__swatch { background: linear-gradient(135deg, #0b1120, #1e293b); }
.theme-choice--minimal-dark .theme-choice__swatch { background: linear-gradient(135deg, #111827, #2563eb); }
.theme-choice--modern .theme-choice__swatch { background: linear-gradient(135deg, #f8fafc, #4f46e5); }
.theme-choice--minimal .theme-choice__swatch { background: linear-gradient(135deg, #ffffff, #cbd5e1); }
.theme-choice--neon .theme-choice__swatch { background: linear-gradient(135deg, #070314, #22d3ee, #ec4899); }
.theme-choice--genz .theme-choice__swatch { background: linear-gradient(135deg, #cffafe, #fce7f3, #8b5cf6); }
.theme-choice--vibrant .theme-choice__swatch { background: linear-gradient(135deg, #bfdbfe, #fde68a, #f97316); }
.theme-choice--pink .theme-choice__swatch { background: linear-gradient(135deg, #fff5fa, #f472b6, #be185d); }
.theme-choice--pride .theme-choice__swatch { background: linear-gradient(90deg, #ef4444, #f97316, #eab308, #22c55e, #3b82f6, #a855f7); }
.theme-choice--village .theme-choice__swatch { background: linear-gradient(135deg, #fffdf0, #78a35d, #c79a2f); }
.theme-choice--pattaya .theme-choice__swatch { background: linear-gradient(135deg, #fffdf6, #469dcc, #4dbeb8, #df7767); }

@media (max-width: 620px) {
  :root { --theme-switcher-control-clearance: 68px; }
  .theme-switcher { right: 12px; bottom: 12px; }
  .theme-toggle { padding: 9px 11px !important; }
  .theme-toggle__label { max-width: 112px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .theme-menu { width: min(310px, calc(100vw - 22px)); }
}

@media print {
  .theme-switcher { display: none !important; }
}

/* -------------------------------------------------------------------------
   Theme readability audit — final contrast layer
   Loaded after every page stylesheet. These tokens keep normal text at WCAG
   AA contrast or better on the matching surfaces while preserving each theme.
   ------------------------------------------------------------------------- */
:root,
:root[data-theme="light"] {
  --theme-readable-text: #0f172a;
  --theme-readable-muted: #475569;
  --theme-link-text: #1d4ed8;
  --theme-button-start: #1d4ed8;
  --theme-button-end: #6d28d9;
  --theme-button-text: #ffffff;
  --theme-good-text: #166534;
  --theme-bad-text: #991b1b;
  --theme-warning-text: #78350f;
  --theme-disabled-bg: #e2e8f0;
  --theme-disabled-text: #475569;
}

:root[data-theme="dark"],
:root[data-theme="minimal_dark"] {
  --theme-readable-text: #f1f5f9;
  --theme-readable-muted: #cbd5e1;
  --theme-link-text: #93c5fd;
  --theme-button-start: #1d4ed8;
  --theme-button-end: #6d28d9;
  --theme-button-text: #ffffff;
  --theme-good-text: #86efac;
  --theme-bad-text: #fda4af;
  --theme-warning-text: #fde68a;
  --theme-disabled-bg: #334155;
  --theme-disabled-text: #cbd5e1;
}

:root[data-theme="modern"] {
  --theme-readable-text: #0f172a;
  --theme-readable-muted: #475569;
  --theme-link-text: #3730a3;
  --theme-button-start: #4338ca;
  --theme-button-end: #0e7490;
  --theme-button-text: #ffffff;
  --theme-good-text: #065f46;
  --theme-bad-text: #991b1b;
  --theme-warning-text: #78350f;
  --theme-disabled-bg: #e2e8f0;
  --theme-disabled-text: #475569;
}

:root[data-theme="minimal"] {
  --theme-readable-text: #111827;
  --theme-readable-muted: #475569;
  --theme-link-text: #1d4ed8;
  --theme-button-start: #1d4ed8;
  --theme-button-end: #334155;
  --theme-button-text: #ffffff;
  --theme-good-text: #166534;
  --theme-bad-text: #991b1b;
  --theme-warning-text: #78350f;
  --theme-disabled-bg: #e2e8f0;
  --theme-disabled-text: #475569;
}

:root[data-theme="neon"] {
  --theme-readable-text: #f8fafc;
  --theme-readable-muted: #dbeafe;
  --theme-link-text: #67e8f9;
  --theme-button-start: #0e7490;
  --theme-button-end: #9d174d;
  --theme-button-text: #ffffff;
  --theme-good-text: #86efac;
  --theme-bad-text: #fda4af;
  --theme-warning-text: #fef08a;
  --theme-disabled-bg: #272b4b;
  --theme-disabled-text: #dbeafe;
}

:root[data-theme="genz"] {
  --theme-readable-text: #24113d;
  --theme-readable-muted: #5b456f;
  --theme-link-text: #6d28d9;
  --theme-button-start: #6d28d9;
  --theme-button-end: #9d174d;
  --theme-button-text: #ffffff;
  --theme-good-text: #065f46;
  --theme-bad-text: #9f1239;
  --theme-warning-text: #78350f;
  --theme-disabled-bg: #ede9fe;
  --theme-disabled-text: #5b456f;
}

:root[data-theme="vibrant"] {
  --theme-readable-text: #1f2937;
  --theme-readable-muted: #4b5563;
  --theme-link-text: #9a3412;
  --theme-button-start: #c2410c;
  --theme-button-end: #1d4ed8;
  --theme-button-text: #ffffff;
  --theme-good-text: #166534;
  --theme-bad-text: #991b1b;
  --theme-warning-text: #713f12;
  --theme-disabled-bg: #ffedd5;
  --theme-disabled-text: #4b5563;
}

:root[data-theme="pink"] {
  --theme-readable-text: #401125;
  --theme-readable-muted: #6b3d54;
  --theme-link-text: #9d174d;
  --theme-button-start: #be185d;
  --theme-button-end: #831843;
  --theme-button-text: #ffffff;
  --theme-good-text: #065f46;
  --theme-bad-text: #9f1239;
  --theme-warning-text: #78350f;
  --theme-disabled-bg: #fce7f3;
  --theme-disabled-text: #6b3d54;
}

:root[data-theme="pride"] {
  --theme-readable-text: #111827;
  --theme-readable-muted: #4b5563;
  --theme-link-text: #6d28d9;
  --theme-button-start: #6d28d9;
  --theme-button-end: #9d174d;
  --theme-button-text: #ffffff;
  --theme-good-text: #166534;
  --theme-bad-text: #991b1b;
  --theme-warning-text: #78350f;
  --theme-disabled-bg: #e2e8f0;
  --theme-disabled-text: #4b5563;
}

:root[data-theme="village"] {
  --theme-readable-text: #253620;
  --theme-readable-muted: #526349;
  --theme-link-text: #315737;
  --theme-button-start: #315737;
  --theme-button-end: #3f662f;
  --theme-button-text: #ffffff;
  --theme-good-text: #315737;
  --theme-bad-text: #8e3e33;
  --theme-warning-text: #735200;
  --theme-disabled-bg: #e1e7d2;
  --theme-disabled-text: #526349;
}

:root[data-theme="pattaya"] {
  --theme-readable-text: #173b4d;
  --theme-readable-muted: #466878;
  --theme-link-text: #225b76;
  --theme-button-start: #225b76;
  --theme-button-end: #176f7d;
  --theme-button-text: #ffffff;
  --theme-good-text: #176b52;
  --theme-bad-text: #9d382d;
  --theme-warning-text: #785800;
  --theme-disabled-bg: #dcecef;
  --theme-disabled-text: #466878;
}

:root[data-theme] body,
:root[data-theme] .card,
:root[data-theme] .panel,
:root[data-theme] .modal,
:root[data-theme] .phase4-card,
:root[data-theme] .activity-stage,
:root[data-theme] .menu-item,
:root[data-theme] .quiz-card {
  color: var(--theme-readable-text, var(--text)) !important;
}

:root[data-theme] p,
:root[data-theme] li,
:root[data-theme] dd,
:root[data-theme] td,
:root[data-theme] blockquote,
:root[data-theme] .body-text,
:root[data-theme] .question-primary-text,
:root[data-theme] .question-thai-text,
:root[data-theme] .sequence-card-label,
:root[data-theme] .answer-panel,
:root[data-theme] .transcript-panel,
:root[data-theme] .debug-code {
  color: var(--theme-readable-text, var(--text)) !important;
  opacity: 1 !important;
}

:root[data-theme] .subtitle,
:root[data-theme] .meta-line,
:root[data-theme] .small,
:root[data-theme] small,
:root[data-theme] .muted,
:root[data-theme] .tiny-note,
:root[data-theme] .gate-help,
:root[data-theme] .override-note,
:root[data-theme] .stat-lbl,
:root[data-theme] .roster-meta,
:root[data-theme] .activity-target-label,
:root[data-theme] .activity-prompt,
:root[data-theme] .activity-hint,
:root[data-theme] .phase4-status,
:root[data-theme] .phase4-helper,
:root[data-theme] [class$="-kicker"],
:root[data-theme] [class*="-kicker "],
:root[data-theme] [class$="-subtitle"],
:root[data-theme] [class*="-subtitle "] {
  color: var(--theme-readable-muted, var(--muted)) !important;
  opacity: 1 !important;
}

:root[data-theme] th,
:root[data-theme] legend,
:root[data-theme] summary,
:root[data-theme] label,
:root[data-theme] .phase4-section-heading span,
:root[data-theme] .field label {
  color: var(--theme-readable-text, var(--text)) !important;
  opacity: 1 !important;
}

:root[data-theme] input,
:root[data-theme] select,
:root[data-theme] textarea,
:root[data-theme] option {
  color: var(--theme-readable-text, var(--text)) !important;
  opacity: 1 !important;
}

:root[data-theme] input::placeholder,
:root[data-theme] textarea::placeholder {
  color: var(--theme-readable-muted, var(--muted)) !important;
  opacity: 1 !important;
}

:root[data-theme] button:disabled,
:root[data-theme] input:disabled,
:root[data-theme] select:disabled,
:root[data-theme] textarea:disabled,
:root[data-theme] [aria-disabled="true"] {
  opacity: .78 !important;
  cursor: not-allowed !important;
}

:root[data-theme] input:disabled,
:root[data-theme] select:disabled,
:root[data-theme] textarea:disabled {
  background: var(--theme-disabled-bg, var(--surface-muted)) !important;
  color: var(--theme-disabled-text, var(--muted)) !important;
  -webkit-text-fill-color: var(--theme-disabled-text, var(--muted)) !important;
}

:root[data-theme] .btn-primary,
:root[data-theme] .btn-action-start,
:root[data-theme] .btn-action,
:root[data-theme] .btn-generate,
:root[data-theme] .btn-upload,
:root[data-theme] .btn-print,
:root[data-theme] .btn-block,
:root[data-theme] .phase4-primary,
:root[data-theme] .kh-start-btn,
:root[data-theme] .quiz-edit-new-btn {
  background: linear-gradient(135deg, var(--theme-button-start, var(--primary)), var(--theme-button-end, var(--primary2))) !important;
  color: var(--theme-button-text, #fff) !important;
  border-color: transparent !important;
  text-shadow: none !important;
}

:root[data-theme] .btn-secondary,
:root[data-theme] .back-btn,
:root[data-theme] .btn-ghost,
:root[data-theme] .phase4-secondary,
:root[data-theme] .phase4-tool-nav a,
:root[data-theme] .attendance-nav a {
  background: var(--surface-muted) !important;
  color: var(--theme-readable-text, var(--text)) !important;
  border-color: var(--stroke) !important;
}

:root[data-theme] .badge,
:root[data-theme] .badge-id,
:root[data-theme] .menu-badge,
:root[data-theme] .menu-id,
:root[data-theme] .query-string,
:root[data-theme] .pill,
:root[data-theme] .tag,
:root[data-theme] .phase4-pill {
  color: var(--theme-link-text, var(--primary)) !important;
  opacity: 1 !important;
}

:root[data-theme] a:not([class]),
:root[data-theme] .quick-session-link,
:root[data-theme] .admin-qr-link,
:root[data-theme] .inline-link {
  color: var(--theme-link-text, var(--primary)) !important;
  text-decoration-thickness: .1em;
  text-underline-offset: .18em;
}

:root[data-theme] .success,
:root[data-theme] .status-success,
:root[data-theme] .score-pass,
:root[data-theme] .badge-good,
:root[data-theme] .status-box.good,
:root[data-theme] .good {
  color: var(--theme-good-text, var(--good)) !important;
}

:root[data-theme] .error,
:root[data-theme] .status-error,
:root[data-theme] .score-fail,
:root[data-theme] .badge-bad,
:root[data-theme] .status-box.bad,
:root[data-theme] .bad,
:root[data-theme] .phase4-alert.is-error,
:root[data-theme] .quick-session-status.is-error {
  color: var(--theme-bad-text, var(--bad)) !important;
}

:root[data-theme] .warning,
:root[data-theme] .status-box.locked,
:root[data-theme] .alert-banner,
:root[data-theme] .schema-warning,
:root[data-theme] .quick-session-status.is-warning {
  color: var(--theme-warning-text, var(--amber)) !important;
}

:root[data-theme] code,
:root[data-theme] pre,
:root[data-theme] kbd {
  color: var(--theme-readable-text, var(--text)) !important;
  background-color: var(--surface-muted) !important;
  border-color: var(--stroke) !important;
}

:root[data-theme] :focus-visible {
  outline: 3px solid var(--theme-link-text, var(--primary)) !important;
  outline-offset: 3px;
}

/* -------------------------------------------------------------------------
   Cross-module theme safety layer

   This final layer bridges older activity variables to the twelve-theme token
   system, guarantees readable custom controls, and gives overlays a stable
   stacking contract. It changes presentation only; hidden/state selectors and
   JavaScript-controlled visibility remain untouched.
   ------------------------------------------------------------------------- */
:root[data-theme] {
  --theme-surface: var(--surface-solid);
  --card-bg: var(--surface-solid);
  --surface-2: var(--surface-soft);
  --border-color: var(--stroke);
  --text-color: var(--theme-readable-text, var(--text));
  --accent-color: var(--theme-link-text, var(--primary));

  --theme-layer-floating: 800;
  --theme-layer-switcher: 900;
  --theme-layer-overlay: 2000;
  --theme-layer-dialog: 2010;
  --theme-layer-notice: 2100;

  /* Kahoot answer colors retain their four identities while meeting AA with
     white option labels and shape symbols. */
  --kh-red: #b91c1c;
  --kh-blue: #1d4ed8;
  --kh-yellow: #854d0e;
  --kh-green: #166534;
}

/* The selector is intentionally below every modal/overlay layer. Theme choice
   stays reachable on a normal screen but can never cover a dialog or popup. */
.theme-switcher {
  z-index: var(--theme-layer-switcher, 900) !important;
}

:root[data-theme] :where(
  .modal-overlay,
  .modal-backdrop,
  .phase4-modal,
  .classroom-timer-setup-overlay,
  .sentence-builder-setup-overlay,
  .speed-alphabet-randomizer-overlay,
  .speed-alphabet-setup-overlay,
  .quiz-board-cell-modal,
  .quiz-board-setup-overlay,
  .quiz-board-question-overlay,
  .quiz-board-randomizer-overlay,
  .quiz-board-randomizer-setup-overlay,
  .lucky-randomizer-overlay,
  .lucky-randomizer-setup-overlay
) {
  z-index: var(--theme-layer-overlay, 2000) !important;
  isolation: isolate;
}

/* Dialog surfaces use the active theme and stay scrollable inside short or
   zoomed viewports. Native <dialog> elements still use the browser top layer. */
:root[data-theme] :where(
  .modal,
  .modal-card,
  .phase4-modal-card,
  .classroom-setup-popup,
  .esl-setup-popup,
  .classroom-timer-setup-dialog,
  .sentence-builder-setup-dialog,
  .speed-alphabet-randomizer-dialog,
  .speed-alphabet-setup-dialog,
  .quiz-board-cell-dialog,
  .quiz-board-setup-card,
  .quiz-board-question-dialog,
  .quiz-board-randomizer-dialog,
  .lucky-modal-card,
  .lucky-randomizer-dialog
) {
  color: var(--theme-readable-text, var(--text)) !important;
  background-color: var(--surface-solid) !important;
  border-color: var(--stroke) !important;
  max-width: calc(100vw - 16px);
  max-height: calc(100dvh - 16px);
  overflow-wrap: anywhere;
  overscroll-behavior: contain;
}

/* Floating classroom tools reserve the switcher's footprint instead of being
   covered by it. An open setup popup becomes a dialog-layer surface. */
:root[data-theme] .classroom-floating-controls {
  inset-block-end: calc(var(--theme-switcher-control-clearance, 78px) + env(safe-area-inset-bottom, 0px));
  z-index: var(--theme-layer-floating, 800) !important;
}

:root[data-theme] .classroom-setup-popup {
  z-index: var(--theme-layer-dialog, 2010) !important;
}

/* These are children of their overlay rather than independent overlays. Keep
   their local stacking order so the backdrop can never cover dialog content. */
:root[data-theme] .answer-analysis-modal .answer-analysis-backdrop {
  z-index: 0 !important;
}

:root[data-theme] .answer-analysis-modal .answer-analysis-panel {
  position: relative;
  z-index: 1 !important;
}

:root[data-theme] .quiz-board-randomizer-setup-overlay .quiz-board-randomizer-toolbar {
  color: var(--theme-readable-text, var(--text)) !important;
  background-color: var(--surface-solid) !important;
  border-color: var(--stroke) !important;
  max-width: calc(100vw - 16px);
  max-height: calc(100dvh - 16px);
  overflow-wrap: anywhere;
  overscroll-behavior: contain;
}

:root[data-theme] :where(
  .modal-header,
  .modal-footer,
  .sentence-builder-setup-popup-heading,
  .speed-alphabet-setup-popup-heading
) {
  color: var(--theme-readable-text, var(--text)) !important;
  background: var(--surface-muted) !important;
  border-color: var(--stroke) !important;
}

/* Module-specific primary controls bypassed the generic .btn-* rules. Route
   all of them through the audited button tokens (minimum endpoint ratio 5.18). */
:root[data-theme] :where(
  .academic-grade-btn-primary,
  .attendance-button.attendance-primary,
  .attendance-primary,
  .classroom-management-primary,
  .classroom-session-primary,
  .classroom-timer-primary,
  .classroom-timer-setup-launcher,
  .esl-pack-primary,
  .esl-projector-audio,
  .game-launcher-primary,
  .lucky-btn-primary,
  .lucky-randomizer-setup-launcher,
  .module-quick-add-btn,
  .phase5ef-primary,
  .quiz-board-btn-primary,
  .quiz-board-setup-start,
  .quiz-board-question-btn.is-primary,
  .quiz-board-randomizer-btn.is-primary,
  .quiz-board-randomizer-setup-launcher,
  .random-groups-primary,
  .sentence-builder-primary,
  .sentence-builder-wheel-spin,
  .sentence-builder-setup-launcher,
  .speed-alphabet-start-button,
  .speed-alphabet-mode-button.is-active,
  .spinwheel-btn-primary,
  .spin-button,
  .trusted-device-add,
  .kh-primary,
  .kh-launch-hint
) {
  background: linear-gradient(135deg, var(--theme-button-start), var(--theme-button-end)) !important;
  color: var(--theme-button-text, #fff) !important;
  border-color: transparent !important;
  text-shadow: none !important;
  opacity: 1;
}

/* Bright decorative gradients previously reduced white labels below 4.5:1. */
:root[data-theme] :where(
  .logo,
  .score-hero,
  .mobile-menu-toggle.is-open,
  .attendance-logo,
  .attendance-completion-icon,
  .attendance-manual-roll-badge,
  .classroom-session-logo,
  .classroom-timer-logo,
  .games-dashboard-logo,
  .games-dashboard-card-icon,
  .kh-live-logo,
  .quiz-board-game-icon,
  .quiz-board-file-icon,
  .random-groups-logo,
  .random-groups-shuffle-orbit span,
  .sentence-builder-logo,
  .score-pop-card,
  .sequence-index,
  .spinwheel-partition-number,
  .lucky-current-turn-ribbon,
  .lucky-team-custom button,
  .lucky-direction-picker button.is-active,
  .lucky-direction-picker button[aria-pressed="true"],
  .esl-pack-tabs a[aria-current="page"],
  .class-update-trigger:hover,
  .students-inline-7,
  .students-inline-13
) {
  background: linear-gradient(135deg, var(--theme-button-start), var(--theme-button-end)) !important;
  color: var(--theme-button-text, #fff) !important;
}

/* Semantic actions use darker, stable colors so white labels remain readable. */
:root[data-theme] :where(
  .attendance-success,
  .esl-pack-success,
  .phase5ef-success,
  #hostLobbyScreen .kh-pin-copy.copied
) {
  background: linear-gradient(135deg, #166534, #065f46) !important;
  color: #fff !important;
}

:root[data-theme] :where(
  .esl-pack-danger,
  .phase5ef-danger,
  #hostPodiumScreen .kh-danger-action
) {
  background: linear-gradient(135deg, #b91c1c, #9f1239) !important;
  color: #fff !important;
}

:root[data-theme] :where(.phase5ef-warning) {
  background: linear-gradient(135deg, #92400e, #78350f) !important;
  color: #fff !important;
}

:root[data-theme] .lucky-roll-button,
:root[data-theme] .lucky-quick-actions button:first-child {
  background: linear-gradient(135deg, #b91c1c, #c2410c 50%, #854d0e) !important;
  color: #fff !important;
}

:root[data-theme] .kh-mobile-countdown,
:root[data-theme] body.kh-body-participant:has(#mobileAnswerScreen.active) #mobileCountdownHero.kh-mobile-countdown-hero {
  background: linear-gradient(135deg, #166534, #92400e 55%, #b91c1c) !important;
  color: #fff !important;
}

/* Random Groups uses the same hues with darker values for white labels. */
:root[data-theme] .random-groups-group-card:nth-child(6n + 1) { --group-color: #1d4ed8; }
:root[data-theme] .random-groups-group-card:nth-child(6n + 2) { --group-color: #6d28d9; }
:root[data-theme] .random-groups-group-card:nth-child(6n + 3) { --group-color: #be185d; }
:root[data-theme] .random-groups-group-card:nth-child(6n + 4) { --group-color: #c2410c; }
:root[data-theme] .random-groups-group-card:nth-child(6n + 5) { --group-color: #166534; }
:root[data-theme] .random-groups-group-card:nth-child(6n + 6) { --group-color: #0e7490; }

/* Normalize custom alert/status text that used light-only hard-coded colors. */
:root[data-theme] [class*="-alert"].is-error,
:root[data-theme] [class*="-status"].is-error {
  color: var(--theme-bad-text) !important;
  background: var(--bad-soft) !important;
  border-color: color-mix(in srgb, var(--theme-bad-text) 38%, var(--stroke)) !important;
  opacity: 1 !important;
}

:root[data-theme] [class*="-alert"].is-success,
:root[data-theme] [class*="-status"].is-success,
:root[data-theme] [class*="-status"].is-active,
:root[data-theme] [class*="-status"].is-completed,
:root[data-theme] [class*="-state"].is-completed,
:root[data-theme] .classroom-timer-lap-chip.is-complete {
  color: var(--theme-good-text) !important;
  background: var(--good-soft) !important;
  border-color: color-mix(in srgb, var(--theme-good-text) 36%, var(--stroke)) !important;
  opacity: 1 !important;
}

:root[data-theme] [class*="-alert"].is-warning,
:root[data-theme] [class*="-status"].is-warning,
:root[data-theme] [class*="-status"].is-draft,
:root[data-theme] [class*="-state"].is-draft {
  color: var(--theme-warning-text) !important;
  background: var(--amber-soft) !important;
  border-color: color-mix(in srgb, var(--theme-warning-text) 36%, var(--stroke)) !important;
  opacity: 1 !important;
}

:root[data-theme] .attendance-state.is-open {
  color: var(--theme-link-text) !important;
  background: var(--primary-soft) !important;
  border-color: color-mix(in srgb, var(--theme-link-text) 36%, var(--stroke)) !important;
}

/* Secondary destructive controls keep their quieter surface while using the
   audited error pair instead of low-contrast module-specific reds. */
:root[data-theme] :where(
  .classroom-session-danger,
  .classroom-session-unassign,
  .classroom-session-team-header-actions button,
  .classroom-timer-interval-remove,
  .classroom-timer-projector-error,
  .sentence-builder-danger
) {
  color: var(--theme-bad-text) !important;
  background: var(--bad-soft) !important;
  border-color: color-mix(in srgb, var(--theme-bad-text) 38%, var(--stroke)) !important;
}

/* Attendance's compact letters and Phase 4 judge buttons are normal-sized
   text, so their selected colors use the same darker semantic palette. */
:root[data-theme] .attendance-summary-item.is-p strong,
:root[data-theme] .attendance-status-mini.is-p.is-selected,
:root[data-theme] .activity-judge.is-correct {
  background: #166534 !important;
  color: #fff !important;
}

:root[data-theme] .attendance-summary-item.is-a strong,
:root[data-theme] .attendance-status-mini.is-a.is-selected,
:root[data-theme] .activity-judge.is-incorrect {
  background: #b91c1c !important;
  color: #fff !important;
}

:root[data-theme] .attendance-summary-item.is-l strong,
:root[data-theme] .attendance-status-mini.is-l.is-selected,
:root[data-theme] .activity-judge.is-partial {
  background: #92400e !important;
  color: #fff !important;
}

:root[data-theme] .attendance-summary-item.is-e strong,
:root[data-theme] .attendance-status-mini.is-e.is-selected,
:root[data-theme] .activity-judge.is-retry {
  background: #1d4ed8 !important;
  color: #fff !important;
}

:root[data-theme] .binary-switch:checked::after {
  background: #166534 !important;
  color: #fff !important;
}

/* Host-state labels remain visually distinct without putting white text on
   bright teal, green, or amber fills. */
:root[data-theme] body.kh-body-host #hostQuizGrid .kh-quiz-state.kahoot-only {
  background: linear-gradient(135deg, #0f766e, #115e59) !important;
}

:root[data-theme] body.kh-body-host #hostQuizGrid .kh-quiz-state.live,
:root[data-theme] #hostLobbyScreen .kh-player-card.kh-new-player::after,
:root[data-theme] #hostLobbyScreen .kh-player-pill.new-join {
  background: linear-gradient(135deg, #3f6212, #166534) !important;
  color: #fff !important;
}

:root[data-theme] body.kh-body-host #hostQuizGrid .kh-quiz-state.hidden {
  background: linear-gradient(135deg, #92400e, #78350f) !important;
  color: #fff !important;
}

:root[data-theme] #hostFinalBoard .rank-1 .kh-rank {
  color: #713f12 !important;
}

/* Results answer analysis was always dark while the final light-theme text rule
   could make its paragraphs dark. Make the entire panel a true themed surface. */
:root[data-theme] .answer-analysis-panel,
:root[data-theme] .answer-question-card,
:root[data-theme] .answer-summary-card,
:root[data-theme] .answer-option {
  color: var(--theme-readable-text, var(--text)) !important;
  background: var(--surface-solid) !important;
  border-color: var(--stroke) !important;
}

:root[data-theme] .answer-analysis-header,
:root[data-theme] .answer-analysis-summary,
:root[data-theme] .answer-question-topline {
  color: var(--theme-readable-text, var(--text)) !important;
  background: var(--surface-muted) !important;
  border-color: var(--stroke) !important;
}

:root[data-theme] :where(
  .answer-analysis-subtitle,
  .answer-question-thai,
  .answer-summary-card span,
  .answer-option span
) {
  color: var(--theme-readable-muted, var(--muted)) !important;
  opacity: 1 !important;
}

/* Phase 5E/F screens had fixed dark panels. They now consume the active theme
   on teacher, projector, and private team-device views. */
:root[data-theme] :where(.phase5ef-body, .phase5ef-projector, .wager-team-body) {
  background: var(--theme-gradient, var(--page-bg)) !important;
  color: var(--theme-readable-text, var(--text)) !important;
}

:root[data-theme] :where(
  .phase5ef-card,
  .phase5ef-question,
  .wager-team-card,
  .wager-team-options button,
  .wager-balance,
  .wager-options > div,
  .wager-projector-grid > div
) {
  background: var(--surface-solid) !important;
  color: var(--theme-readable-text, var(--text)) !important;
  border-color: var(--stroke) !important;
}

:root[data-theme] :where(
  .phase5ef-header span,
  .phase5ef-section-title span,
  .wager-options strong
) {
  color: var(--theme-link-text, var(--primary)) !important;
}

:root[data-theme] :where(.phase5ef-projector-event, .phase5ef-locks) {
  color: var(--theme-warning-text, var(--amber)) !important;
}

/* Form fields remain outlined but unfilled across every theme. This removes
   mismatched light/dark search fills while preserving borders, focus rings,
   validation state, and the compact geometry of checkboxes and switches. */
:root[data-theme] :where(
  input:not([type]),
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="url"],
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  input[type="month"],
  input[type="week"],
  textarea,
  select
) {
  background: transparent !important;
}

:root[data-theme] input[type="search"] {
  min-height: 42px;
  padding: 10px 14px !important;
}

:root[data-theme] :where(.admin-catalog-input-wrap, .games-dashboard-input-wrap) {
  background: transparent !important;
}

:root[data-theme] :where(.admin-catalog-input-wrap, .games-dashboard-input-wrap) input[type="search"] {
  padding: 10px 2px !important;
}

/* The two catalog dashboards share one accessible, on-demand search pattern.
   The full-viewport overlay owns the global layer; its backdrop and panel use
   local stacking so cards, sticky headers, and theme controls cannot cover it. */
body.catalog-search-open {
  overflow: hidden;
}

.catalog-search-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 26px;
  padding: 2px 0;
}

.catalog-search-trigger,
.catalog-search-done {
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--stroke);
  border-radius: 999px;
  background: transparent;
  color: var(--theme-readable-text, var(--text));
  font: inherit;
  font-weight: 850;
  cursor: pointer;
}

.catalog-search-trigger:hover,
.catalog-search-trigger:focus-visible,
.catalog-search-done:hover,
.catalog-search-done:focus-visible {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent);
}

.catalog-search-count {
  padding: 7px 11px;
  border: 1px solid var(--stroke);
  border-radius: 999px;
  color: var(--theme-readable-muted, var(--muted));
  font-size: .8rem;
  white-space: nowrap;
}

.catalog-search-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--theme-layer-overlay) !important;
  display: grid;
  place-items: center;
  padding: clamp(14px, 3vw, 28px);
}

.catalog-search-overlay[hidden] {
  display: none !important;
}

.catalog-search-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0 !important;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: rgba(2, 6, 23, .72);
  cursor: default;
}

.catalog-search-dialog {
  position: relative;
  z-index: 1 !important;
  width: min(760px, 100%);
  max-height: calc(100vh - clamp(28px, 6vw, 56px));
  overflow: auto;
  border: 1px solid var(--stroke);
  border-radius: clamp(18px, 3vw, 24px);
  background: var(--surface-solid) !important;
  color: var(--theme-readable-text, var(--text));
  box-shadow: 0 28px 80px rgba(2, 6, 23, .42);
}

.catalog-search-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 22px;
  border-bottom: 1px solid var(--stroke);
}

.catalog-search-head span {
  display: block;
  margin-bottom: 4px;
  color: var(--theme-link-text, var(--primary));
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.catalog-search-head h2 {
  margin: 0;
  color: var(--theme-readable-text, var(--text));
  font-size: clamp(1.25rem, 4vw, 1.65rem);
}

.catalog-search-close {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--stroke);
  border-radius: 50%;
  background: transparent;
  color: var(--theme-readable-text, var(--text));
  font: 700 1.7rem/1 system-ui, sans-serif;
  cursor: pointer;
}

.catalog-search-close:hover,
.catalog-search-close:focus-visible {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent);
}

.catalog-search-dialog :where(.admin-catalog-toolbar, .games-dashboard-toolbar) {
  grid-template-columns: minmax(240px, 1.4fr) minmax(210px, .9fr) !important;
  gap: 16px;
  margin: 0 !important;
  padding: 22px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.catalog-search-dialog :where(.admin-catalog-status, .games-dashboard-toolbar-status) {
  grid-column: 1 / -1;
  min-height: auto;
  align-items: flex-start;
}

.catalog-search-dialog-actions {
  display: flex;
  justify-content: flex-end;
  padding: 16px 22px 20px;
  border-top: 1px solid var(--stroke);
}

.catalog-search-done {
  border-color: transparent;
  background: linear-gradient(135deg, var(--theme-button-start), var(--theme-button-end));
  color: var(--theme-button-text, #fff);
}

@media (max-width: 620px) {
  .catalog-search-actions {
    justify-content: space-between;
    margin-bottom: 22px;
  }

  .catalog-search-dialog :where(.admin-catalog-toolbar, .games-dashboard-toolbar) {
    grid-template-columns: 1fr !important;
    padding: 18px !important;
  }

  .catalog-search-head {
    padding: 18px;
  }

  .catalog-search-dialog-actions {
    padding: 14px 18px 18px;
  }
}

/* The report follows screen themes but remains ink-safe and high contrast when
   printed, independent of the selected theme. */
@media print {
  :root[data-theme] body.academic-grade-report-body,
  :root[data-theme] body.academic-grade-report-body main,
  :root[data-theme] body.academic-grade-report-body section,
  :root[data-theme] body.academic-grade-report-body article,
  :root[data-theme] body.academic-grade-report-body table,
  :root[data-theme] body.academic-grade-report-body th,
  :root[data-theme] body.academic-grade-report-body td {
    background: #fff !important;
    color: #000 !important;
    box-shadow: none !important;
  }
}
/* Kahoot teacher timer contrast guard.
   theme-modes.css loads after the Kahoot component styles, so these scoped
   selectors prevent generic dark-theme <strong> rules from turning the
   timer number white on its light dial. */
:root[data-theme] body.kh-body-host .kh-host-timer {
  color: #0f172a !important;
}

:root[data-theme] body.kh-body-host #hostTimerNumber {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  filter: none !important;
  text-shadow: 0 2px 0 rgba(255, 255, 255, .86), 0 0 1px rgba(15, 23, 42, .4) !important;
}

:root[data-theme] body.kh-body-host .kh-host-timer > span {
  color: #334155 !important;
  -webkit-text-fill-color: #334155 !important;
  opacity: 1 !important;
}