html[data-theme="dark"] {
  color-scheme: dark;
  --text-primary: #e7efee;
  --text-muted: #a7bab8;
  --text-heading: #f4f0e6;
  --text-accent: #91c8c2;
  --surface-page: #0d1517;
  --surface-card: #142023;
  --surface-soft: #101b1d;
  --surface-tinted: #1a2a2d;
  --surface-brand: #194b5b;
  --surface-brand-strong: #0c323b;
  --on-brand: #ffffff;
  --paper: var(--surface-page);
  --paper-cold: var(--surface-soft);
  --paper-blue: var(--surface-tinted);
  --line: #33494d;
  --mineral: #78b9ae;
  --vermilion: #e76f59;
  --vermilion-dark: #f08a75;
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"] body {
  background:
    radial-gradient(circle at 84% 12%, rgba(120, 185, 174, 0.08), transparent 25rem),
    var(--surface-page);
}

html[data-theme="dark"] :is(button, input, select, textarea) {
  color: var(--text-primary);
}

html[data-theme="dark"] :is(button, a, input, select, textarea, summary):focus-visible,
html[data-theme="dark"] .view h1:focus-visible,
html[data-theme="dark"] :is(.answer-feedback, .mock-review-feedback) h2:focus {
  outline-color: #ef9a87;
}

html[data-theme="dark"] :is(input, select, textarea, .search-field) {
  color: var(--text-primary);
  background-color: #0e191b;
  border-color: var(--line);
}

html[data-theme="dark"] :is(.language-toggle, .settings-card) {
  color: var(--text-primary);
  background: var(--surface-card);
  border-color: var(--line);
}

html[data-theme="dark"] .weakness-prescription {
  background:
    linear-gradient(90deg, rgba(231, 111, 89, 0.08), transparent 24%),
    var(--surface-card);
  border-color: var(--line);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.2);
}

html[data-theme="dark"] :is(input, textarea)::placeholder {
  color: #78908e;
}

html[data-theme="dark"] :is(
  .today-stamp-card,
  .panel,
  .lesson-main,
  .quiz-card,
  .result-card,
  .archive-tools,
  .heritage-card,
  .archive-empty,
  .heritage-detail-card,
  .heritage-learning-card,
  .basic-topic-card,
  .basic-quiz-card,
  .basic-result-card,
  .basic-topic-hint,
  .basic-review-perfect,
  .chinese-hint,
  .answer-feedback,
  .mock-exam-header,
  .mock-exam-choice,
  .mock-scope-section,
  .world-learning-section,
  .world-question-section,
  .mock-draft-choices .is-answer,
  .mock-draft-explanation .language-content,
  .mock-result-explanation .language-content,
  .learning-deep-dive__zh,
  .feedback-translation-copy,
  .review-index-card__meta,
  .mock-review-feedback .language-content,
  .world-learning-toolbar button
) {
  background: var(--surface-card);
  border-color: var(--line);
}

html[data-theme="dark"] :is(.detail-footer, .heritage-quiz-footer) {
  background: rgba(20, 32, 35, 0.97);
  border-color: var(--line);
}

html[data-theme="dark"] :is(.heritage-photo, .world-learning-photo) figcaption {
  background: rgba(20, 32, 35, 0.97);
}

html[data-theme="dark"] :is(.heritage-photo__frame, .world-learning-photo__frame) {
  background:
    radial-gradient(circle at 82% 18%, rgba(145, 200, 194, 0.13), transparent 28%),
    linear-gradient(135deg, var(--surface-tinted), #21383c);
}

html[data-theme="dark"] :is(.mock-result-caution, .mock-review-feedback) {
  background: #1d2927;
}

html[data-theme="dark"] :is(
  .mock-result-question__status,
  .mock-review-choice.is-wrong
) {
  background: #35211f;
}

html[data-theme="dark"] :is(
  .mock-result-question.is-correct .mock-result-question__status,
  .mock-review-choice.is-correct
) {
  background: #18302c;
}

html[data-theme="dark"] .mock-result-question.is-mastered .mock-result-question__status {
  color: #e6cf8c;
  background: #302a1b;
}

html[data-theme="dark"] :is(
  .answer-button.is-correct > span:first-child,
  .mock-review-choice.is-correct > span:first-child
) {
  color: #081614;
}

html[data-theme="dark"] :is(
  .answer-button.is-wrong > span:first-child,
  .mock-review-choice.is-wrong > span:first-child
) {
  color: #1c0b08;
}

html[data-theme="dark"][data-contrast="high"] {
  --text-primary: #ffffff;
  --text-muted: #d3dfde;
  --text-heading: #ffffff;
  --text-accent: #b9f0e9;
  --surface-page: #000000;
  --surface-card: #080d0e;
  --surface-soft: #05090a;
  --surface-tinted: #10191b;
  --line: #8ea09f;
}

@media (max-width: 780px) {
  html[data-theme="dark"] :is(.topbar, .side-nav) {
    background: rgba(8, 14, 15, 0.98);
    border-color: var(--line);
  }
}