/* Warm white and soft blue by day; coordinated navy surfaces at night. */
:root { color-scheme: light; --bg: #e8edf0; --paper: #f2f0ea; --ink: #2e404e; --muted: #526777; --line: #cbd7de; --green: #4d7188; --green-dark: #405f73; --lime: #d4e3e9; --soft-green: #dde8ec; --appearance-bg: #f2f0ea; --appearance-text: #3b5778; }
.theme-picker { display: flex; align-items: center; gap: 7px; width: 149px; flex-shrink: 0; }
.theme-picker > span[aria-hidden] { color: var(--appearance-text); }
.theme-picker svg { width: 16px; height: 16px; }
.theme-picker select { min-height: 36px; width: 126px; padding: 6px 8px; font-size: 11px; background: var(--appearance-bg); color: var(--appearance-text); border-color: var(--line); cursor: pointer; }
.appearance-setting { padding-bottom: 18px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.appearance-setting .field-label { margin-top: 0; }
.theme-note { font-size: 11px; line-height: 1.8; color: #526777; margin: 9px 0 0; }

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1f262d;
  --paper: #283139;
  --ink: #d1cfc7;
  --muted: #aeb5b9;
  --line: #46535e;
  --green: #8faabd;
  --green-dark: #a3bbc9;
  --lime: #8faabd;
  --soft-green: #2e414d;
  --night-raised: #2b3740;
  --night-inset: #20272e;
  --night-secondary: #bcc5c9;
  --night-accent: #a9c1d0;
  --night-positive-bg: #2e414d;
  --night-positive: #b7cbd7;
  --night-warning-bg: #3a3023;
  --night-warning: #d2bb94;
  --night-negative-bg: #3e2b28;
  --night-negative: #d3aa9a;
  --appearance-bg: var(--paper);
  --appearance-text: var(--night-secondary);
}
:root[data-theme="dark"] ::selection { background: #315581; color: #d8d7cf; }
:root[data-theme="dark"] :is(.sidebar, .topbar) { background: var(--night-inset); border-color: var(--line); }
:root[data-theme="dark"] :is(
  .word-card, .insight-card, .deck-card, .word-list, .metric-card, .activity-card,
  .lesson-card, .sound-cell, .translation-list > div, .practice-start, .practice-result,
  .quiz-card, .cefr-card, .exam-card, .multiword, .mock-card, .mock-card:first-child,
  .reading-preview, .writing-preview, .exam-history, .exam-question, .exam-choice,
  .result-sections > div, .answer-review, .writing-guide, .writing-model,
  .official-exam, .official-info table
) { background: var(--paper); border-color: var(--line); box-shadow: none; }
:root[data-theme="dark"] :is(
  .quiet-note, .goal-card, .language-bar, .content-scope, .standards-notice, .duo-card, .progress-note,
  .topik-table, .batch-header, .exam-notice, .resume-paper, .exam-running-header,
  .result-banner, .official-info, .official-sync, .gre-feature, .writing-banner, .det-banner
) { background: var(--night-raised); border-color: var(--line); }
:root[data-theme="dark"] :is(
  .reading-passage, .question-map, .listening-player, .sentence-building, .your-answer,
  .mode-tabs, .practice-tabs, .lesson-examples > div, .official-info th
) { background: var(--night-inset); border-color: var(--line); }
:root[data-theme="dark"] dialog { background: var(--paper); border-color: var(--line); box-shadow: 0 20px 100px #0008; }
:root[data-theme="dark"] dialog::backdrop { background: #07111fb8; }
:root[data-theme="dark"] :is(h1, h2, h3, .word-title, .meaning, .multiword h3,
  .multiword-gloss, .det-display-word, .exam-prompt, .built-sentence, .word-gap-passage,
  .detail-example, .sound-cell > strong, .lesson-examples p, .history-row strong,
  .breadcrumb b, .language-route select, .batch-header strong, .result-banner > strong,
  .result-sections strong, .official-sync strong, .official-scoring strong
) { color: var(--ink); }
:root[data-theme="dark"] :is(
  p, small, .muted, .sidebar-label, .nav-item, .settings-nav, .local-note,
  .quiet-note p, .quiet-badge, .breadcrumb, .breadcrumb > span, .eyebrow, .date-chip,
  .deck-dropdown, .icon-button, .phonetic, .word-pos, .recall-prompt, .example-en,
  .example-zh, .card-hint, .card-footer, .keyboard-note, .study-meta, .study-meta strong,
  .text-button, .ring-inner span, .goal-copy p, .goal-stats span, .goal-stats small,
  .review-count small, .review-description, .tip-header, .tip-card p, .deck-card p,
  .deck-icon svg, .page-footer, .finished-card > p, .finished-number span, .filter-tab,
  .word-row-ipa, .word-row-meaning, .word-row-meaning small, .status-tag, .list-foot,
  .empty-state, .metric-label, .metric-value span, .metric-card p, .chart-col > span,
  .chart-col label, .history-heading p, .history-row, .history-row span, .progress-note,
  .field-label, .field-label em, .field-label span, .toggle-row small, .dialog-note,
  .interface-language select, .language-route label > span, .route-arrow,
  .language-bar-note p, .custom-gloss-note, .content-scope, .content-scope p,
  .course-tabs > button, .course-tabs small, .course-badge, .course-card .course-description,
  .course-footnote, .lesson-card > p, .section-description, .sound-cell > small,
  .sound-cell > svg, .dictionary-controls > label > span, .modal-route, .detail-label,
  .translation-list > div > span, .lesson-body, .lesson-examples small,
  .practice-start > p:not(.eyebrow), .practice-start small, .practice-result > small,
  .quiz-top, .quiz-prompt, .quiz-choice, .quiz-choice > span, .practice-result > strong,
  .mistake-words > p, .mistake-words > button, .mistake-words > button > span,
  .standards-notice > p, .standards-notice > span, .cefr-card p, .exam-description,
  .duo-card > div > p:not(.eyebrow), table, th, td, .batch-select, .batch-header > p,
  .word-order, .multiword-reading, .dictionary-source-note, .exam-notice,
  .exam-tools small, .mock-card > p, .mock-meta, .paper-notes, .reading-filter,
  .reading-preview > p, .writing-preview > p, .gre-feature p, .writing-banner p,
  .exam-history-row, .exam-history-row small, .exam-running-header p,
  .exam-timer > span, .autosave-note, .question-map > strong, .question-top,
  .reading-passage, .exam-choice, .answer-instruction, .blank-fields label > span,
  .listening-player small, .speaking-tools p, .response-counter,
  .result-banner > p:not(.result-number), .result-sections span, .answer-review summary,
  .review-body, .review-body h3, .writing-guide > h3, .writing-structure,
  .writing-checklist, .model-prose, .draft-footer, .det-banner p, .selection-help,
  .original-tag, .reading-level, .reading-scope-note, .official-info-heading p:not(.eyebrow),
  .official-sync, .official-exam summary > span:last-child, .official-exam-body > p,
  .official-info th, .official-info td, .official-info td:nth-child(2), .official-scoring,
  .official-scope, .theme-note
) { color: var(--muted); }
:root[data-theme="dark"] :is(
  .word-row, .card-footer, .goal-stats, .goal-stats > div + div, .course-tabs,
  .translation-list, .translation-list > div, .toggle-row, .mistake-words > button,
  th, td, .exam-history-row, .question-top, .exam-navigation, .built-sentence,
  .official-info th, .official-info td, .official-exam-body .table-wrap
) { border-color: var(--line); }
:root[data-theme="dark"] :is(input:not([type=checkbox]), select, textarea,
  .exam-question input, .exam-question textarea, .writing-model textarea, .search-box
) { background: var(--night-inset); border-color: var(--line); color: var(--ink); }
:root[data-theme="dark"] :is(input::placeholder, textarea::placeholder) { color: #a7b3ba; opacity: 1; }
:root[data-theme="dark"] :is(.search-box input[type=search], .language-route select, .interface-language select) { background: transparent; }
:root[data-theme="dark"] :is(.button.secondary, .multiword-actions > button,
  .sentence-chunks button, .question-map > div > button, .reveal-meaning,
  .official-source-links a
) { background: var(--night-raised); border-color: var(--line); color: var(--night-secondary); }
:root[data-theme="dark"] :is(.button.primary, .button.lime) { background: #364f61; color: #d1d2ca; }
:root[data-theme="dark"] :is(.button.primary:hover, .button.lime:hover) { background: #405b6e; color: #d1d2ca; }
:root[data-theme="dark"] :is(.button.secondary:hover, .sound-cell:hover,
  .nav-item:hover, .audio-button:hover, .quiz-choice:hover:not(:disabled)
) { background: var(--soft-green); border-color: #607988; }
:root[data-theme="dark"] :is(.nav-item.active, .filter-tab.active, .course-tabs > button.active,
  .mode-tabs button.active, .practice-tabs button.active, .review-card .button,
  .deck-card.selected, .cefr-card.checked, .multiword.checked-word, .exam-choice.selected,
  .multiword-actions > button:last-child, .answer-key, .question-map > div > button.answered
) { background: var(--night-positive-bg); color: var(--night-positive); border-color: #607988; }
:root[data-theme="dark"] :is(.nav-item.active > span:first-child, .quiz-choice > span,
  .exam-choice > span:first-child, .audio-button, .finished-icon, .word-tag,
  .mock-meta > span, .det-coverage > span, .course-tabs small, .status-tag,
  .deck-icon, .practice-illustration, .practice-illustration > svg
) { background: var(--soft-green); color: var(--night-secondary); border-color: var(--line); }
/* Course icon backgrounds come from data attributes in the original card template. */
:root[data-theme="dark"] .deck-icon { background: var(--soft-green) !important; }
:root[data-theme="dark"] .mode-tabs button, :root[data-theme="dark"] .practice-tabs button { color: var(--muted); }
:root[data-theme="dark"] :is(.quiet-note > span svg, .course-cta, .lesson-complete,
  .finished-number, .quiz-score, .cefr-card strong, .exam-scale, .paper-notes a,
  .exam-timer strong, .result-number, .answer-reviews > section > h2,
  .writing-guide > a, .writing-model summary, .source-links a, .exam-card > a,
  .duo-card a, .topik-table > a, .acer-note > a, .standards-notice > svg
) { color: var(--night-accent); }
:root[data-theme="dark"] :is(.quiz-choice.correct, .status-tag.learned) { background: var(--night-positive-bg); color: var(--night-positive); border-color: #607988; }
:root[data-theme="dark"] :is(.is-correct, .quiz-feedback.positive, .answer-review summary > b) { color: var(--night-positive); }
:root[data-theme="dark"] :is(.quiz-choice.incorrect, .official-fallback, .acer-note,
  .writing-target-note, .status-tag.due, .icon-button.favorited, .gloss-language
) { background: var(--night-warning-bg); color: var(--night-warning); border-color: #7c6945; }
:root[data-theme="dark"] :is(.quiz-choice.incorrect, .answer-review.review-wrong summary > b,
  .is-wrong, .error-text, .quiz-feedback
) { color: var(--night-negative); }
:root[data-theme="dark"] .quiz-choice.incorrect { background: var(--night-negative-bg); border-color: #996451; }
:root[data-theme="dark"] .acer-note p { color: var(--night-warning); }
:root[data-theme="dark"] .icon-button.favorited svg { fill: #8b7847; }
:root[data-theme="dark"] .ring-inner { background: var(--night-raised); }
:root[data-theme="dark"] .progress-ring { background: conic-gradient(#7996a8 var(--p), #284665 0); }
:root[data-theme="dark"] :is(.deck-progress, .quiz-progress, .recall-lines i, .session-dots i, .quiet-dots b) { background: #284665; }
:root[data-theme="dark"] :is(.deck-progress span, .quiz-progress > span, .chart-bar, .session-dots i.past) { background: #647f90; }
:root[data-theme="dark"] :is(.chart-col.today .chart-bar, .session-dots i.current, .quiet-dots b:first-child, .nav-item i) { background: #8faabd; }
:root[data-theme="dark"] :is(.question-map > div > button.current, .exam-choice.selected > span:first-child, .deck-card .check-dot) { background: #8faabd; color: #14263e; border-color: #8faabd; }
:root[data-theme="dark"] .word-gap-passage .gap-word input { background: #2e414d; color: #d1cfc7; border-color: #bad4f5; }
:root[data-theme="dark"] #reading-passage::selection, :root[data-theme="dark"] #reading-passage ::selection { background: #315581; color: #d8d7cf; }
:root[data-theme="dark"] :is(.avatar, .language-glyph, .lang-en, .exam-badge, .exam-ielts, .exam-det) { background: #223a57; color: #b7cbd7; border-color: var(--line); }
:root[data-theme="dark"] :is(.lang-zh, .exam-cet6, .exam-cet, .exam-gre) { background: #3a3025; color: #e5c79f; }
:root[data-theme="dark"] :is(.lang-ja, .exam-ja) { background: #342b3d; color: #d5bfe4; }
:root[data-theme="dark"] .exam-toefl { background: #2c3044; color: #c3c9ef; }
:root[data-theme="dark"] :is(.lang-ko, .exam-ko) { background: #2e414d; color: #b9cbd5; }
:root[data-theme="dark"] .brand-icon { background: #364f61; color: #d1d2ca; }
:root[data-theme="dark"] #toast { background: #364f61; color: #d1d2ca; box-shadow: 0 5px 28px #0005; }
:root[data-theme="dark"] .button:is(.primary, .lime) :is(span, small) { color: inherit; }
@media (max-width: 1180px) { .topbar-right { gap: 12px; } .topbar-right .quiet-badge { display: none; } }
@media (max-width: 700px) {
  .topbar { padding: 0 16px; gap: 10px; }
  .topbar .breadcrumb { min-width: 0; flex: 1; }
  .breadcrumb b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar-right { gap: 8px; flex-shrink: 0; }
  .theme-picker { width: 114px; }
  .theme-picker > span[aria-hidden] { display: none; }
  .theme-picker select { width: 114px; font-size: 10px; }
  .interface-language select { width: 76px; min-height: 36px; }
  :root[data-theme="dark"] .nav-item.active { background: transparent; }
}

/* Native menus and small feedback indicators follow the same subdued palette. */
:root[data-theme="dark"] option { background: var(--paper); color: var(--ink); }
:root[data-theme="dark"] :is(.question-map > div > button.current, .exam-choice.selected > span:first-child, .deck-card .check-dot) { background: #3d586a; color: #d1d2ca; border-color: #718896; }