:root {
  --surface: #ffffff;
  --surface-2: #f7faf6;
  --surface-3: #edf4eb;
  --surface-4: #dfeadd;
  --field: #ffffff;
  --hover: #f5f7f4;
  --text: #101411;
  --text-soft: #5d675f;
  --border: #b8c8b8;
  --border-strong: #8eaa92;
  --accent: #49785a;
  --accent-2: #2e6e42;
  --accent-soft: #e8f1e5;
  --danger: #8c2d2d;
  --danger-soft: #fbefef;
  --success: #1f6f3b;
  --success-soft: #edf7ef;
  --shadow-elevated: 0 18px 50px rgba(16,20,17,.14);
}

:root[data-theme="dark"] {
  --ink: #f1f5f1;
  --muted: #a7b0aa;
  --line: #354039;
  --line-strong: #49574e;
  --panel: #161c18;
  --panel-deep: #1d261f;
  --page: #0d100e;
  --button: #171c19;
  --good: #8ed2a1;
  --good-bg: #122219;
  --bad: #ef9999;
  --bad-bg: #2a1717;
  --focus: #8fc59b;
  --shadow: 0 1px 0 rgba(255,255,255,.035);

  --surface: #111512;
  --surface-2: #141916;
  --surface-3: #171e19;
  --surface-4: #1d271f;
  --field: #101411;
  --hover: #1a211c;
  --text: #f1f5f1;
  --text-soft: #a7b0aa;
  --border: #354039;
  --border-strong: #4b5a50;
  --accent: #7aa889;
  --accent-2: #93c49f;
  --accent-soft: #18271d;
  --danger: #f0a0a0;
  --danger-soft: #2a1717;
  --success: #8ed2a1;
  --success-soft: #122219;
  --shadow-elevated: 0 18px 60px rgba(0,0,0,.46);
}

html { background: var(--page); }
html.theme-transition *, html.theme-transition *::before, html.theme-transition *::after {
  transition: background-color .22s ease, border-color .22s ease, color .22s ease, box-shadow .22s ease !important;
}

.theme-toggle { display:flex; align-items:center; gap:5px; }
.theme-icon { font-size: 15px; line-height:1; }

:root[data-theme="dark"] body,
:root[data-theme="dark"] .masthead,
:root[data-theme="dark"] .history-shell,
:root[data-theme="dark"] .quiz-pane,
:root[data-theme="dark"] .builder-editor,
:root[data-theme="dark"] .builder-sidebar,
:root[data-theme="dark"] .library-block,
:root[data-theme="dark"] .game-stage,
:root[data-theme="dark"] .host-question-card,
:root[data-theme="dark"] .test-card,
:root[data-theme="dark"] .wrong-shell {
  background: var(--surface);
  color: var(--text);
}

:root[data-theme="dark"] .masthead {
  border-color: #638b6e;
  box-shadow: inset 0 0 0 5px #18231b, 2px 3px 0 #29362c;
}
:root[data-theme="dark"] .topbar,
:root[data-theme="dark"] .control-panel,
:root[data-theme="dark"] .question-meta,
:root[data-theme="dark"] .room-code-wrap,
:root[data-theme="dark"] .host-set-summary,
:root[data-theme="dark"] .mode-help,
:root[data-theme="dark"] .stat-card,
:root[data-theme="dark"] .player-row,
:root[data-theme="dark"] .leader-row,
:root[data-theme="dark"] .popcorn-device-card,
:root[data-theme="dark"] .popcorn-turn,
:root[data-theme="dark"] .media-preview,
:root[data-theme="dark"] .builder-count {
  background: var(--surface-3);
  border-color: var(--border);
  color: var(--text);
}

:root[data-theme="dark"] .mode-card,
:root[data-theme="dark"] .entry-card,
:root[data-theme="dark"] .my-quiz-row,
:root[data-theme="dark"] .builder-question-item,
:root[data-theme="dark"] .player-answer,
:root[data-theme="dark"] .host-option,
:root[data-theme="dark"] .chest-grid button,
:root[data-theme="dark"] .podium-card,
:root[data-theme="dark"] .tf-option,
:root[data-theme="dark"] .answer {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text);
}

:root[data-theme="dark"] .mode-card:hover,
:root[data-theme="dark"] .entry-card:hover,
:root[data-theme="dark"] .my-quiz-row:hover,
:root[data-theme="dark"] .builder-question-item:hover,
:root[data-theme="dark"] .answer:hover,
:root[data-theme="dark"] .player-answer:hover,
:root[data-theme="dark"] .host-option:hover,
:root[data-theme="dark"] .chest-grid button:hover {
  background: var(--hover);
  border-color: var(--border-strong);
}

:root[data-theme="dark"] .entry-card-accent,
:root[data-theme="dark"] .builder-question-item.active,
:root[data-theme="dark"] .player-answer.selected {
  background: var(--accent-soft);
  border-color: #60816a;
}

:root[data-theme="dark"] .history-button,
:root[data-theme="dark"] .top-button,
:root[data-theme="dark"] .button,
:root[data-theme="dark"] .settings-toggle,
:root[data-theme="dark"] .close-button,
:root[data-theme="dark"] .upload-button {
  background: var(--button);
  border-color: var(--border-strong);
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}
:root[data-theme="dark"] .history-button:hover,
:root[data-theme="dark"] .top-button:hover,
:root[data-theme="dark"] .button:hover,
:root[data-theme="dark"] .settings-toggle:hover,
:root[data-theme="dark"] .close-button:hover { background:#202721; border-color:#647268; }
:root[data-theme="dark"] .button.primary { background:#1a2a1f; border-color:#55745e; }

:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea {
  background: var(--field);
  color: var(--text);
  border-color: var(--border-strong) !important;
  color-scheme: dark;
}
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder { color:#77827a; }
:root[data-theme="dark"] option { background:#111512; color:#f1f5f1; }

:root[data-theme="dark"] .setting-row:hover { background: rgba(255,255,255,.028); }
:root[data-theme="dark"] .settings-head,
:root[data-theme="dark"] .char-count,
:root[data-theme="dark"] .question-count,
:root[data-theme="dark"] .connection-note,
:root[data-theme="dark"] .room-meta,
:root[data-theme="dark"] .my-quiz-info span,
:root[data-theme="dark"] .builder-head span,
:root[data-theme="dark"] .recent-top,
:root[data-theme="dark"] .stat-label { color: var(--text-soft); }

:root[data-theme="dark"] .feedback.good,
:root[data-theme="dark"] .answer.correct { background: var(--success-soft); color:var(--success); border-color:#315b3d; }
:root[data-theme="dark"] .feedback.bad,
:root[data-theme="dark"] .answer.incorrect { background: var(--danger-soft); color:var(--danger); border-color:#623636; }

:root[data-theme="dark"] .history-dialog::backdrop,
:root[data-theme="dark"] .wrong-dialog::backdrop,
:root[data-theme="dark"] .app-dialog::backdrop { background: rgba(0,0,0,.72); }
:root[data-theme="dark"] .history-head,
:root[data-theme="dark"] .pane-head,
:root[data-theme="dark"] .library-head,
:root[data-theme="dark"] .answer-editor-head,
:root[data-theme="dark"] .game-top,
:root[data-theme="dark"] .game-bottom,
:root[data-theme="dark"] .player-game-head { border-color: var(--border); }
:root[data-theme="dark"] .stats-row,
:root[data-theme="dark"] .recent-item { border-color:#242d27; }
:root[data-theme="dark"] .stats-row.header { background:#171d19; color:var(--text-soft); }

:root[data-theme="dark"] .host-timer-track { background:#27312a; }
:root[data-theme="dark"] .host-timer-fill { background:#759c80; }
:root[data-theme="dark"] .popcorn-countdown { background:rgba(13,16,14,.96); color:#fff; }
:root[data-theme="dark"] .popcorn-grade-button.correct { background:#16351f; border-color:#477e56; color:#a6e1b6; }
:root[data-theme="dark"] .popcorn-grade-button.wrong { background:#361a1a; border-color:#874a4a; color:#f2b0b0; }
:root[data-theme="dark"] .popcorn-grade-button.pass { background:#20251f; border-color:#596158; color:#d3d8d4; }

:root[data-theme="dark"] .footer { color:#6f7972; }