:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #e7efeb;
  --ink-soft: #cad8d2;
  --muted: #a0b4ac;
  --paper: #101a18;
  --canvas: #101a18;
  --surface: #192623;
  --line: #30413b;
  --blue-pale: #342f25;
  --green-pale: #20382f;
  --coral-pale: #3a2c28;
  --shadow: 0 18px 48px rgba(0, 0, 0, .28);
}

:root[data-theme="dark"] body,
:root[data-theme="dark"] html { background-color: var(--paper); color: var(--ink); }
:root[data-theme="dark"] .theme-toggle { color: #f3dfb0; background: #24342e; }
:root[data-theme="dark"] .start-lead,
:root[data-theme="dark"] .result-lead,
:root[data-theme="dark"] .eyebrow,
:root[data-theme="dark"] .score-ring__inner span,
:root[data-theme="dark"] .score-copy__label,
:root[data-theme="dark"] .score-copy > span:last-child,
:root[data-theme="dark"] .breakdown-card__heading span:last-child,
:root[data-theme="dark"] .breakdown-row,
:root[data-theme="dark"] .breakdown-row strong,
:root[data-theme="dark"] .review-count,
:root[data-theme="dark"] .question-progress__meta span { color: #e0c58b; }

.theme-toggle {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-inline-start: 8px;
  padding: 0 12px;
  border: 1px solid var(--line, #dce7e2);
  border-radius: 10px;
  color: var(--ink, #163b34);
  background: var(--surface, #fff);
  box-shadow: none;
  font: 700 12px/1.2 'Tajawal', system-ui, sans-serif;
  cursor: pointer;
  transition: transform .15s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
}

.theme-toggle:hover { transform: translateY(-1px); }
.theme-toggle:hover,
.theme-toggle:active,
.theme-toggle:focus-visible { border-color: #bea374; background: #f4efe4; color: #163b34; }
.brand-mark .theme-toggle { margin-inline-start: auto; flex: 0 0 auto; }
.question-area > .theme-toggle { margin: 0 0 14px auto; }
.result-header .theme-toggle { margin-inline-end: auto; flex: 0 0 auto; }
.admin-brand .theme-toggle { margin-inline-start: auto; flex: 0 0 auto; }
.head-actions .theme-toggle { flex: 0 0 auto; }

.start-lead,
.result-lead { color: #806839; }

:root[data-theme="dark"] .topbar { background: rgba(22, 34, 30, .94); }
:root[data-theme="dark"] .study-rail,
:root[data-theme="dark"] .grade-select,
:root[data-theme="dark"] .grade-select-trigger,
:root[data-theme="dark"] .unit-picker__search,
:root[data-theme="dark"] .unit-picker__button,
:root[data-theme="dark"] .nav-back,
:root[data-theme="dark"] .answer-option,
:root[data-theme="dark"] .review-item,
:root[data-theme="dark"] .review-empty,
:root[data-theme="dark"] .finish-confirmation__cancel { background-color: #202e29; color: var(--ink-soft); }
:root[data-theme="dark"] .start-card--subjects,
:root[data-theme="dark"] .question-card,
:root[data-theme="dark"] .score-card,
:root[data-theme="dark"] .breakdown-card,
:root[data-theme="dark"] .unit-picker__box { background: var(--surface); color: var(--ink); }
:root[data-theme="dark"] .start-card__note,
:root[data-theme="dark"] .grade-panel__hint,
:root[data-theme="dark"] .answer-option__key { background-color: #24342e; color: var(--ink-soft); }
:root[data-theme="dark"] .question-progress .progress-track { background-color: #293832; }
:root[data-theme="dark"] .score-ring { background-image: conic-gradient(#bea374 var(--score), #30413b 0); }
:root[data-theme="dark"] .score-ring__inner { background: var(--surface); }
:root[data-theme="dark"] .grade-select option { background: #192623; color: var(--ink); }
:root[data-theme="dark"] .answer-option:hover,
:root[data-theme="dark"] .unit-picker__button:hover,
:root[data-theme="dark"] .grade-select-trigger:hover { background: #342f25; color: #f3dfb0; }
:root[data-theme="dark"] .answer-option.is-selected,
:root[data-theme="dark"] .unit-picker__button.is-selected { background: #3a3326; color: #f3dfb0; }
:root[data-theme="dark"] .answer-option__text,
:root[data-theme="dark"] .review-item__question,
:root[data-theme="dark"] .review-item__answer { color: #e7efeb; }
:root[data-theme="dark"] .answer-option__key { color: #e7efeb; }
:root[data-theme="dark"] .review-item__number { color: #c0d0c9; }
:root[data-theme="dark"] .admin-shell .mini-option,
:root[data-theme="dark"] .admin-shell .question-row__meta > span { color: #d6e2dc; }
:root[data-theme="dark"] .ambient { opacity: .12; }

:root[data-theme="dark"] body:has(.admin-shell) { background: radial-gradient(ellipse at 12% 0%, #20312b 0, transparent 34rem), var(--canvas); }
:root[data-theme="dark"] .admin-shell .login-card,
:root[data-theme="dark"] .admin-shell .dashboard-head,
:root[data-theme="dark"] .admin-shell .stat-card,
:root[data-theme="dark"] .admin-shell .panel,
:root[data-theme="dark"] .admin-shell .question-row,
:root[data-theme="dark"] .admin-shell .import-template-row,
:root[data-theme="dark"] .admin-shell .import-dropzone,
:root[data-theme="dark"] .admin-shell .import-format-help,
:root[data-theme="dark"] .admin-shell .import-message,
:root[data-theme="dark"] .admin-shell .import-report-wrap,
:root[data-theme="dark"] .admin-shell .mini-option,
:root[data-theme="dark"] .admin-shell .secondary,
:root[data-theme="dark"] .admin-shell .icon-button { background-color: var(--surface); color: var(--ink-soft); }
:root[data-theme="dark"] .admin-shell input:not([type="checkbox"]):not([type="radio"]),
:root[data-theme="dark"] .admin-shell select,
:root[data-theme="dark"] .admin-shell textarea { border-color: var(--line); background-color: #202e29; color: var(--ink); }
:root[data-theme="dark"] .admin-shell select option { background: #192623; color: var(--ink); }
:root[data-theme="dark"] .admin-shell .question-row__meta > span,
:root[data-theme="dark"] .admin-shell .mini-option { border-color: var(--line); background: #202e29; }
:root[data-theme="dark"] .admin-shell .question-row:hover,
:root[data-theme="dark"] .admin-shell .question-row:has(.question-checkbox:checked) { background: #22322d; }
:root[data-theme="dark"] .admin-shell .bulk-publish-bar { border-color: var(--line); background: #202e29; color: var(--ink-soft); }
:root[data-theme="dark"] .admin-shell .question-select span { background: #202e29; }
:root[data-theme="dark"] .admin-shell .question-select:has(input:checked) span { background: #bea374; }
:root[data-theme="dark"] .admin-confirm { background: var(--surface); color: var(--ink); }
:root[data-theme="dark"] .admin-shell .notice { background: #38282b; }

@media (max-width: 520px) {
  .theme-toggle { min-height: 40px; padding-inline: 10px; font-size: 11px; }
  .head-actions .theme-toggle { justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle { transition: none; }
}