/* Light keeps styles.css unchanged. Only the new settings control is unscoped. */
.settings-theme {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.settings-theme legend {
  padding: 0;
  margin-bottom: 8px;
  color: var(--text);
  font-weight: 800;
}

.theme-options {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}

.theme-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--card-strong);
  color: var(--text);
  cursor: pointer;
  font-weight: 750;
}

.theme-option input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--gold-dark);
}

.theme-option:has(:checked) {
  border-color: var(--gold-dark);
  background: var(--gold-violet-active);
}

.theme-option:has(:focus-visible) {
  outline: 2px solid var(--gold-dark);
  outline-offset: 3px;
}

.settings-theme:disabled .theme-option {
  cursor: not-allowed;
  color: var(--muted);
  background: var(--bg-alt);
}

.theme-save-message {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.settings-theme[data-save-state="error"] .theme-save-message {
  color: var(--theme-danger-text, #b91c1c);
}

/* Stable account-integration contract: html[data-theme="dark"]. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #141516;
  --bg-alt: #1b1d1f;
  --card: #202224;
  --card-strong: #282b2e;
  --text: #f3f3ef;
  --muted: #bbbdbf;
  --quiet: #a7aaad;
  --border: #414448;
  --border-strong: #777c82;
  --gold: #e5bf62;
  --gold-dark: #ecc976;
  --gold-soft: #353023;
  --accent-gold: var(--gold);
  --accent-violet: #c2b0ed;
  --accent-violet-soft: rgba(194, 176, 237, 0.045);
  --accent-violet-rim: rgba(194, 176, 237, 0.28);
  --accent-violet-glow: rgba(194, 176, 237, 0.06);
  --accent-gradient: linear-gradient(135deg, #e5bf62, #edcd83);
  --accent-gradient-hover: linear-gradient(135deg, #edcd83, #f3d993);
  --accent-outline-gradient: linear-gradient(135deg, #96793d, #75623c 68%, #716384);
  --accent-outline-glow: 0 0 0 1px rgba(229, 191, 98, 0.08);
  --chrome-ambient-glow: 0 16px 44px rgba(0, 0, 0, 0.18);
  --button-gold-fill: var(--accent-gradient);
  --button-gold-fill-hover: var(--accent-gradient-hover);
  --gold-violet-soft: linear-gradient(135deg, #302b20, #242527 78%, #29262e);
  --gold-violet-active: linear-gradient(135deg, #3e3422, #30302c 76%, #322d3b);
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--gold);
  --mock-card-untaken-bg: var(--card);
  --mock-card-untaken-hover-bg: #292b2c;
  --mock-card-untaken-border: var(--border);
  --mock-card-taken-bg: #2d2b24;
  --mock-card-taken-hover-bg: #373126;
  --mock-card-taken-border: #b99443;
  --mock-card-icon-bg: #33382e;
  --green: #8cdbac;
  --red: #ffaaa5;
  --reading: #b5c3d2;
  --listening: #eeafc0;
  --writing: #98d5ac;
  --speaking: #e5bf76;
  --vocab: #c2b0ed;
  --shadow: 0 16px 42px rgba(0, 0, 0, 0.24);
  --shadow-soft: 0 10px 28px rgba(0, 0, 0, 0.14);
  --theme-control-bg: #26292c;
  --theme-hover-bg: #323539;
  --theme-raised-bg: #2b2e31;
  --theme-on-gold: #211d13;
  --theme-selected-border: #dfb958;
  --theme-success-bg: #203b2c;
  --theme-success-text: #a4e8bb;
  --theme-success-border: #70b78a;
  --theme-danger-bg: #412a2b;
  --theme-danger-text: #ffb6b0;
  --theme-danger-border: #dc8a84;
  --theme-warning-bg: #3a3020;
  --theme-warning-text: #efd18a;
  --theme-warning-border: #bc9b55;
  --theme-overlay: rgba(0, 0, 0, 0.66);
  --theme-selection-bg: #624d24;
  --theme-selection-text: #fff3cc;
  --theme-media-bg: #ffffff;
  --theme-chart-track: #3e4246;
  --heat-0: #33363a;
  --heat-1: #706039;
  --heat-2: #a38a49;
  --heat-3: #d0ac52;
  --heat-4: #f0d180;
}

/* Page and chrome levels. No dimensions or sidebar/exam mechanics here. */
:root[data-theme="dark"] :is(body, .app-frame, .marketing-shell, .pricing-page, .onboarding-shell, .review-page, .site-gate-shell) {
  background: var(--bg);
}

:root[data-theme="dark"] .top-nav::before,
:root[data-theme="dark"] :is(.public-nav, .app-sidebar) {
  background: linear-gradient(150deg, #282825, #202224 72%, #242329);
  box-shadow: var(--shadow);
}

:root[data-theme="dark"] .app-sidebar::before {
  background: transparent;
}

:root[data-theme="dark"] .brand-mark:not(.mascot-logo-mark) {
  background: var(--gold-soft);
  border-color: var(--theme-warning-border);
  box-shadow: var(--shadow-soft);
}

:root[data-theme="dark"] .brand-mark.mascot-logo-mark {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

:root[data-theme="dark"] :is(.profile-popover, .strategy-modal, .settings-modal, .vocab-detail-panel, .review-menu-dropdown, .score-point-popover, .fluency-select-popover, .mobile-drawer-panel, .toast, .writing-image-modal, .site-gate-panel) {
  background: var(--theme-raised-bg);
  border-color: var(--border-strong);
  box-shadow: var(--shadow);
}

:root[data-theme="dark"] :is(.modal-overlay, .vocab-detail-overlay, .writing-image-modal-overlay) {
  background: var(--theme-overlay);
}

/* Existing panels, inset groups and rows across every role share these levels. */
:root[data-theme="dark"] :is(.practice-option-card, .exam-selection-card.coming-soon, .reading-history-card, .reading-question-group, .sat-text-block, .sat-graphic-card, .sat-review-question, .sat-notes-list, .writing-prompt-box, .writing-response-box, .writing-helper-card, .section-item, .feedback-item, .step-item, .mock-section, .plan-status, .plan-link-row, .vocab-review-info, .review-setup-section, .review-card-preview, .review-flashcard, .onboarding-card, .auth-step-preview, .account-type-intro, .exam-goal-card, .date-choice-panel, .visual-node, .summary-card, .feature-card, .method-card, .encouragement-card, .loading-row, .settings-section, .score-graph-card, .timeline-item, .pricing-card, .public-pricing-grid .pricing-card, .preview-card, .preview-grid span, .workflow-item, .marketing-exam-card, .pricing-comparison-panel, .pricing-comparison-card, .student-homework-row, .app-frame .page-header, .task-row, .school-list-row, .assignment-target-option, .empty-state, .speaking-recorder) {
  background: var(--card);
  border-color: var(--border);
}

:root[data-theme="dark"] :is(.reading-question-item, .teacher-class-meta span, .mock-meta-item, .review-loading-steps span, .review-session-meta span, .vocab-pill, .settings-modal-badge, .reading-note, .reading-mode-card, .marketing-proof-row span, .preview-dot, .preview-sidebar, .preview-canvas, .nav-links, .ielts-section-nav) {
  background: var(--bg-alt);
  border-color: var(--border);
}

:root[data-theme="dark"] :is(.highlight-card, .mock-card-main, .recommendation, .plan-detail-hero, .vocab-hero, .review-flashcard.revealed, .expert-badge, .mascot-horizontal, .mascot-hero, .marketing-cta, .pricing-note-panel, .school-package-card, .school-alert-card, .primary-role-choice, .plus-plan-card, .pro-plan-card) {
  background: var(--gold-violet-soft);
  border-color: var(--theme-warning-border);
}

:root[data-theme="dark"] :is(.student-home-hero, .progress-dock-card, .auth-brand-panel, .marketing-product-preview) {
  background: linear-gradient(135deg, #2c2922, #222426 82%) padding-box, var(--accent-outline-gradient) border-box;
  box-shadow: var(--shadow-soft);
}

:root[data-theme="dark"] .daily-card::before {
  background: linear-gradient(135deg, rgba(229, 191, 98, 0.065), transparent 60%);
}

:root[data-theme="dark"] :is(.skill-row, .school-staff-code-box, .answer-option-bank) {
  border-color: var(--border);
}

/* Controls retain their existing shape, hit area, animation and layout. */
:root[data-theme="dark"] :is(.btn-secondary, .exam-home-link, .avatar-btn, .nav-search-pill, .sidebar-collapse-toggle, .sidebar-sideline-handle, .sidebar-school-card, .sidebar-role-card, .sidebar-brand-block, .tab-btn, .filter-pill, .mock-nav-chip, .reading-choice, .sat-question-pill, .sat-review-row, .fluency-select-trigger, .qb-filter-control select, .answer-bank-chip, .answer-slot, .answer-slot-clear, .reading-answer-chip, .reading-explanation-toggle, .listening-audio-btn, .audio-player, .bookmark-button, .icon-button, .review-nav-button, .choice-button, .score-button, .progress-dock-button, .quick-launch-card, .score-chart-range-button, .pricing-bundle-row span, .pricing-bundle-choice, .pricing-cycle-button, .pricing-exam-toggle, .pricing-exam-toggle:not(.selected)) {
  background: var(--theme-control-bg);
  color: var(--text);
  border-color: var(--border-strong);
  box-shadow: none;
}

:root[data-theme="dark"] :is(.text-input, .search-input, .textarea, .onboarding-input, .select-input, .site-gate-input) {
  background: var(--bg-alt);
  color: var(--text);
  border-color: var(--border-strong);
  caret-color: var(--gold);
}

:root[data-theme="dark"] .app-frame .sidebar-sideline-handle {
  background: linear-gradient(150deg, #282825, #262727);
  border-color: var(--border);
  box-shadow: 5px 8px 16px rgba(0, 0, 0, 0.12);
}

:root[data-theme="dark"] .app-frame .sidebar-sideline-handle:hover {
  border-color: var(--gold);
}

:root[data-theme="dark"] :is(input, textarea)::placeholder {
  color: var(--quiet);
  opacity: 1;
}

:root[data-theme="dark"] :is(input, select, textarea, audio) {
  color-scheme: dark;
  accent-color: var(--gold);
}

:root[data-theme="dark"] :is(.btn-secondary:hover, .task-row:hover, .exam-home-link:hover, .nav-link:hover, .sidebar-collapse-toggle:hover, .sidebar-school-card:hover, .reading-choice:hover:not(:disabled), .sat-review-row:hover, .answer-bank-chip:hover:not(:disabled), .answer-slot-clear:hover, .fluency-select-trigger:hover, .fluency-select[open] .fluency-select-trigger, .fluency-select-option:hover, .fluency-select-option:focus-visible, .review-menu-button:hover) {
  background: var(--theme-hover-bg);
  color: var(--text);
  border-color: var(--gold);
}

:root[data-theme="dark"] :is(.sidebar-link, .sidebar-group > summary, .sidebar-top-label, .sidebar-section-title) {
  color: var(--muted);
}

:root[data-theme="dark"] :is(.sidebar-link:hover, .sidebar-group > summary:hover) {
  background: linear-gradient(var(--theme-hover-bg), var(--theme-hover-bg)) padding-box, var(--accent-outline-gradient) border-box;
  color: var(--text);
}

:root[data-theme="dark"] .sidebar-link.active {
  background: var(--gold-violet-active) padding-box, var(--accent-outline-gradient) border-box;
  color: var(--gold);
}

:root[data-theme="dark"] :is(.tab-btn.active, .filter-pill.active, .mock-nav-chip.active, .nav-link.active, .reading-choice.active, .sat-question-pill.active, .sat-review-row.active, .fluency-select-option.active, .answer-bank-chip.is-active, .answer-slot.is-ready, .answer-slot.is-filled, .score-chart-range-button.active, .score-chart-range-button:hover, .choice-button.selected, .score-button.selected, .review-response-btn.selected, .pricing-bundle-choice.selected, .pricing-cycle-button.selected, .pricing-exam-toggle.selected, .listening-start-card [data-listening-start-mode="chill"], .listening-start-card [data-listening-start-mode="chill"]:hover) {
  background: var(--gold-violet-active);
  border-color: var(--theme-selected-border);
  color: var(--gold);
}

:root[data-theme="dark"] .answer-slot.is-filled {
  color: var(--text);
}

:root[data-theme="dark"] .answer-slot.is-filled span {
  color: var(--text);
}

:root[data-theme="dark"] .answer-slot:hover:not(:disabled) {
  background: var(--gold-violet-active);
  border-color: var(--theme-selected-border);
}

:root[data-theme="dark"] :is(.bookmark-button.saved, .pricing-card.selected) {
  background: var(--gold-violet-active);
  color: var(--gold);
  border-color: var(--theme-selected-border);
}

:root[data-theme="dark"] :is(.btn-primary, .listening-audio-btn.primary, .site-gate-button, .mobile-shell-drawer > summary) {
  background: var(--button-gold-fill);
  color: var(--theme-on-gold);
  border-color: var(--gold);
  box-shadow: var(--shadow-soft);
}

:root[data-theme="dark"] :is(.btn-primary:hover:not(:disabled), .listening-audio-btn.primary:hover:not(:disabled), .site-gate-button:hover:not(:disabled)) {
  background: var(--button-gold-fill-hover);
  color: var(--theme-on-gold);
}

:root[data-theme="dark"] :is(.btn:disabled, .btn:disabled:hover, .site-gate-button:disabled, .listening-audio-btn:disabled, .review-nav-button:disabled, .review-nav-button:disabled:hover) {
  background: var(--border);
  color: var(--muted);
  border-color: var(--border);
  box-shadow: none;
}

:root[data-theme="dark"] :is(.goal-pill, .badge, .tiny-pill, .status-pill, .listening-speed-badge, .highlight-icon) {
  background: var(--theme-control-bg);
  border-color: var(--border);
}

:root[data-theme="dark"] :is(.icon-circle, .reading-start-icon) {
  background: color-mix(in srgb, var(--accent, var(--gold)) 12%, var(--card));
  color: color-mix(in srgb, var(--accent, var(--gold)) 55%, var(--text));
}

/* Replace fixed dark-on-light label colors, including nested component labels. */
:root[data-theme="dark"] :is(.mascot-figure figcaption strong, .goal-pill, .profile-avatar, .timer-pill, .reading-card-score, .locked-card-badge, .reading-primary-type-pill, .reading-primary-types-card .reading-primary-type-pill, .reading-alert, .sat-note-box, .sat-note-box p, .act-paragraph-number, .fluency-select-trigger .icon, .answer-bank-chip strong, .answer-slot em, .reading-answer-feedback.unanswered, .reading-answer-chip.unanswered, .reading-reveal-btn, .reading-explanation-toggle, .reading-prep-status strong, .reading-table th, .listening-transcript-lines strong, .writing-word-warning.show, .tiny-icon, .plan-bullet span, .step-number, .band-pill, .auth-brand-chip, .visual-node span, .expert-badge strong, .settings-modal-badge-role, .settings-modal-badge-demo, .settings-modal-badge-warning, .upgrade-note, .public-nav-links a:hover, .preview-topline strong, .sidebar-badge, .progress-dock-button b, .student-homework-copy span) {
  color: var(--gold-dark);
}

:root[data-theme="dark"] :is(.site-gate-copy h1, .sat-rw-card .test-meta-line, .preview-grid span) {
  color: var(--text);
}

:root[data-theme="dark"] :is(.marketing-lede, .exam-selection-card.coming-soon .status-pill) {
  color: var(--muted);
}

:root[data-theme="dark"] .topic-pill {
  color: var(--accent-violet);
  background: #302a3d;
}

:root[data-theme="dark"] :is(.reading-primary-types-card .reading-primary-type-pill, .band-pill, .settings-modal-badge-role, .settings-modal-badge-demo, .settings-modal-badge-warning) {
  background: var(--gold-soft);
  border-color: var(--border);
}

:root[data-theme="dark"] .reading-explanation-box {
  background: var(--bg-alt);
  border-color: var(--border);
  border-left-color: var(--gold);
}

:root[data-theme="dark"] .pricing-exam-toggle:not(.selected) em {
  background: var(--bg-alt);
}

:root[data-theme="dark"] .reading-test-card:hover {
  background: var(--mock-card-untaken-hover-bg);
  box-shadow: var(--shadow);
}

:root[data-theme="dark"] .reading-test-card.is-completed:hover {
  background: var(--mock-card-taken-hover-bg);
}

:root[data-theme="dark"] .preview-dot.active {
  background: var(--gold);
  border-color: var(--gold);
  box-shadow: none;
}

:root[data-theme="dark"] .mock-card-action {
  background: none;
  color: var(--gold);
  -webkit-text-fill-color: var(--gold);
}

:root[data-theme="dark"] .mock-card-action::after {
  background: none;
}

/* Status colors accompany the existing status labels, icons and answer text. */
:root[data-theme="dark"] :is(.status-active, .status-unused, .status-approved, .settings-modal-badge-ok, .review-status-label.perfected, .sat-question-pill.answered:not(.active), .reading-question-correct, .sat-review-choice.correct, .qb-choice-grid .reading-choice.correct, .qb-feedback-card.correct, .reading-answer-feedback.correct, .reading-answer-chip.correct) {
  background: var(--theme-success-bg);
  color: var(--theme-success-text);
  border-color: var(--theme-success-border);
}

:root[data-theme="dark"] :is(.btn-danger, .review-status-label.improve, .reading-question-incorrect, .sat-review-choice.selected:not(.correct), .qb-choice-grid .reading-choice.incorrect, .qb-feedback-card.incorrect, .reading-answer-feedback.incorrect, .reading-answer-chip.incorrect, .danger-section) {
  background: var(--theme-danger-bg);
  color: var(--theme-danger-text);
  border-color: var(--theme-danger-border);
}

:root[data-theme="dark"] :is(.btn-warning, .status-overdue, .status-awaiting-approval, .status-awaiting-admin, .danger-action-card.warning-action) {
  background: var(--theme-warning-bg);
  color: var(--theme-warning-text);
  border-color: var(--theme-warning-border);
}

:root[data-theme="dark"] :is(.status-completed, .status-redeemed) {
  background: var(--theme-control-bg);
  color: var(--muted);
  border-color: var(--border-strong);
}

:root[data-theme="dark"] .danger-action-card {
  background: var(--card);
  border-color: var(--theme-danger-border);
}

:root[data-theme="dark"] .input-error-text {
  color: var(--theme-danger-text);
}

:root[data-theme="dark"] .onboarding-input.input-error {
  border-color: var(--theme-danger-border);
}

:root[data-theme="dark"] .sat-review-row.correct { border-color: var(--theme-success-border); }
:root[data-theme="dark"] .sat-review-row.incorrect { border-color: var(--theme-danger-border); }

/* UI charts only. Exam diagrams and graphics retain their original colors. */
:root[data-theme="dark"] :is(.score-chart, .chart-empty) {
  background: var(--bg-alt);
  border-color: var(--border);
}

:root[data-theme="dark"] :is(.score-chart-axis, .score-chart-grid, .score-graph-grid, .reading-history-axis, .reading-history-grid) {
  stroke: var(--border);
}

:root[data-theme="dark"] :is(.score-chart-dot, .score-chart-dot.mini, .score-graph-dot, .reading-history-dot) {
  fill: var(--card);
}

:root[data-theme="dark"] .reading-history-score { fill: var(--text); }

:root[data-theme="dark"] :is(.score-chart-line, .score-chart-single-line) {
  stroke: color-mix(in srgb, var(--line-color) 60%, var(--text));
}

:root[data-theme="dark"] .score-chart-dot {
  stroke: color-mix(in srgb, var(--dot-color) 60%, var(--text));
}

:root[data-theme="dark"] .score-chart-single-line {
  opacity: 1;
}

:root[data-theme="dark"] .reading-choice:disabled {
  opacity: 1;
}

:root[data-theme="dark"] :is(.bar-shell, .progress-track, .audio-track, .day-dot) {
  background: var(--theme-chart-track);
}

:root[data-theme="dark"] .progress-orb {
  background: radial-gradient(circle closest-side, var(--card) 74%, transparent 75%), conic-gradient(var(--gold) 0deg, var(--theme-chart-track) 0deg);
}

:root[data-theme="dark"] .line {
  background: linear-gradient(90deg, var(--theme-chart-track), var(--card-strong), var(--theme-chart-track));
}

:root[data-theme="dark"] .day-dot.active {
  color: var(--theme-on-gold);
  background: var(--gold);
  border-color: var(--gold);
}

:root[data-theme="dark"] .listening-progress {
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold) var(--listening-progress-percent), var(--theme-chart-track) var(--listening-progress-percent), var(--theme-chart-track) 100%);
}

:root[data-theme="dark"] .listening-progress::-webkit-slider-thumb { background: var(--gold); }
:root[data-theme="dark"] .listening-progress::-moz-range-thumb { background: var(--gold); }
:root[data-theme="dark"] .listening-progress::-moz-range-track { background: var(--theme-chart-track); }

/* Unchanged maps/graphs get a neutral backing; no image filters or tinting. */
:root[data-theme="dark"] :is(.writing-image-card, .writing-image-modal img, .sat-graphic-image-card img, .sat-qb-image-card img) {
  background: var(--theme-media-bg);
}

:root[data-theme="dark"] .sat-graphic-card:not(.is-missing) {
  background: var(--theme-media-bg);
  color: #111827;
  --text: #111827;
  --muted: #6b7280;
  --border: #e5e1d8;
  --gold: #c8a24a;
  --gold-dark: #a9852f;
  --gold-violet-soft: linear-gradient(135deg, rgba(244, 234, 210, 0.92), rgba(255, 255, 255, 0.88) 74%, rgba(185, 163, 255, 0.07));
}

:root[data-theme="dark"] .sat-graphic-card .reading-table th {
  color: #6f5415;
}

:root[data-theme="dark"] :is(.writing-image-card.is-missing, .writing-image-fallback) {
  background: var(--bg-alt);
  color: var(--muted);
}

:root[data-theme="dark"] ::selection {
  background: var(--theme-selection-bg);
  color: var(--theme-selection-text);
}

:root[data-theme="dark"] :is(button, a, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

@media (forced-colors: active) {
  .theme-option:has(:checked) { border-color: Highlight; }
  .theme-option:has(:focus-visible) { outline-color: Highlight; }
}