/* ============================================================
   theme.css — Light / Dark mode overrides

   Dark mode is the default (defined in each page's :root).
   Light mode overrides all CSS custom properties when
   body.light-theme is present.

   Loaded by all pages via <link rel="stylesheet" href="theme.css">
   Theme applied by shared-header.js on DOMContentLoaded.
   ============================================================ */

/* ── Light theme variable overrides ─────────────────────────── */
body.light-theme {
  --bg:       #f5f0e8;
  --surface:  #ffffff;
  --surface2: #eeeef2;
  --surface3: #e4e4ea;
  --border:   #d0d0da;
  --text:     #1a1a2e;
  --muted:    #6b6b85;

  /* Tone colors — darkened for contrast on light backgrounds */
  --t1:       #d94040;
  --t2:       #b8960a;
  --t3:       #2e8b3e;
  --t4:       #2b7abf;
  --tn:       #9b4dcc;
  --partial:  #b8960a;
  --spoken:   #d05a20;
  --wrong:    #d93050;
}

/* ── Header — frosted glass with light tint ─────────────────── */
body.light-theme #site-header {
  background: rgba(228, 220, 205, 0.92);
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

/* ── Brand text ─────────────────────────────────────────────── */
body.light-theme .brand-name strong {
  color: #1a1a2e;
}

/* ── Home button ────────────────────────────────────────────── */
body.light-theme .home-btn {
  border-color: rgba(0, 0, 0, 0.15);
  color: rgba(0, 0, 0, 0.5);
}
body.light-theme .home-btn:hover {
  border-color: rgba(0, 0, 0, 0.35);
  color: #1a1a2e;
  background: rgba(0, 0, 0, 0.04);
}

/* ── User icon / hamburger buttons ──────────────────────────── */
body.light-theme .user-icon-btn,
body.light-theme .hamburger-btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.5);
}
body.light-theme .user-icon-btn:hover,
body.light-theme .hamburger-btn:hover {
  background: rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.2);
  color: #1a1a2e;
}
body.light-theme .hamburger-btn span {
  background: rgba(0, 0, 0, 0.5);
}
body.light-theme .hamburger-btn:hover span {
  background: #1a1a2e;
}

/* ── Dropdowns ──────────────────────────────────────────────── */
body.light-theme .user-dropdown,
body.light-theme .hamburger-dropdown {
  background: #ffffff;
  border-color: var(--border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
body.light-theme .hamburger-item,
body.light-theme .user-dd-item {
  color: var(--text);
}
body.light-theme .hamburger-item:hover {
  background: rgba(77, 157, 224, 0.08);
  color: var(--t4);
}
body.light-theme .user-dd-item:hover {
  background: rgba(77, 157, 224, 0.08);
  color: var(--t4);
}

/* ── Toast ──────────────────────────────────────────────────── */
body.light-theme .toast {
  background: #ffffff;
  border-color: var(--border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* ── Body background gradient overlay ───────────────────────── */
body.light-theme::before {
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(77,157,224,0.04) 0%, transparent 70%),
              radial-gradient(ellipse 60% 40% at 80% 80%, rgba(255,107,107,0.02) 0%, transparent 60%) !important;
}

/* ── Watermark Chinese characters pattern ──────────────────── */
body.light-theme::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Ctext x='20' y='50' font-size='48' fill='%231a1a2e' font-family='serif' transform='rotate(-15 20 50)'%3E你好%3C/text%3E%3Ctext x='160' y='40' font-size='38' fill='%231a1a2e' font-family='serif' transform='rotate(10 160 40)'%3E学习%3C/text%3E%3Ctext x='300' y='65' font-size='42' fill='%231a1a2e' font-family='serif' transform='rotate(-8 300 65)'%3E中文%3C/text%3E%3Ctext x='80' y='130' font-size='40' fill='%231a1a2e' font-family='serif' transform='rotate(12 80 130)'%3E咖啡%3C/text%3E%3Ctext x='240' y='130' font-size='35' fill='%231a1a2e' font-family='serif' transform='rotate(-20 240 130)'%3E茶%3C/text%3E%3Ctext x='350' y='150' font-size='50' fill='%231a1a2e' font-family='serif' transform='rotate(5 350 150)'%3E大%3C/text%3E%3Ctext x='10' y='210' font-size='38' fill='%231a1a2e' font-family='serif' transform='rotate(-5 10 210)'%3E谢谢%3C/text%3E%3Ctext x='180' y='220' font-size='42' fill='%231a1a2e' font-family='serif' transform='rotate(18 180 220)'%3E听%3C/text%3E%3Ctext x='310' y='230' font-size='40' fill='%231a1a2e' font-family='serif' transform='rotate(-12 310 230)'%3E说%3C/text%3E%3Ctext x='60' y='300' font-size='35' fill='%231a1a2e' font-family='serif' transform='rotate(8 60 300)'%3E读%3C/text%3E%3Ctext x='200' y='310' font-size='45' fill='%231a1a2e' font-family='serif' transform='rotate(-10 200 310)'%3E写%3C/text%3E%3Ctext x='340' y='320' font-size='38' fill='%231a1a2e' font-family='serif' transform='rotate(15 340 320)'%3E朋友%3C/text%3E%3Ctext x='30' y='380' font-size='42' fill='%231a1a2e' font-family='serif' transform='rotate(-18 30 380)'%3E水%3C/text%3E%3Ctext x='150' y='390' font-size='40' fill='%231a1a2e' font-family='serif' transform='rotate(6 150 390)'%3E要%3C/text%3E%3Ctext x='280' y='395' font-size='35' fill='%231a1a2e' font-family='serif' transform='rotate(-14 280 395)'%3E很好%3C/text%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 400px 400px;
}

/* ── Slider thumb border matches light bg ───────────────────── */
body.light-theme input[type="range"]::-webkit-slider-thumb {
  border-color: #ffffff;
}
body.light-theme input[type="range"]::-moz-range-thumb {
  border-color: #ffffff;
}

/* ── Select dropdown options ────────────────────────────────── */
body.light-theme select option {
  background: #ffffff;
  color: var(--text);
}

/* ── Logout modal (shared-header.js) ────────────────────────── */
body.light-theme .logout-modal-overlay {
  background: rgba(0, 0, 0, 0.3);
}
body.light-theme .logout-modal {
  background: #ffffff;
  border-color: var(--border);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15);
}

/* ── Global white-text → dark-text catch-all ───────────────────
   Converts all hardcoded #fff / #ffffff / white text to dark.
   Uses broad selectors so every page is covered without
   needing per-element overrides. Buttons with colored
   backgrounds keep white text via the button rule below.       */

/* Headings, paragraphs, spans, labels, divs with white text */
body.light-theme h1, body.light-theme h2, body.light-theme h3,
body.light-theme h4, body.light-theme h5, body.light-theme h6,
body.light-theme p, body.light-theme span, body.light-theme label,
body.light-theme div, body.light-theme li, body.light-theme td,
body.light-theme th, body.light-theme a, body.light-theme small,
body.light-theme strong, body.light-theme em, body.light-theme dt,
body.light-theme dd {
  color: var(--text);
}

/* Buttons & inputs — dark text by default in light mode */
body.light-theme button,
body.light-theme input,
body.light-theme textarea,
body.light-theme select {
  color: var(--text);
}

/* Buttons with colored backgrounds should keep white text */
body.light-theme .confirm-btn,
body.light-theme .next-btn,
body.light-theme .restart-btn,
body.light-theme .practice-missed-btn,
body.light-theme .auth-submit,
body.light-theme .btn-primary,
body.light-theme .btn-new-list,
body.light-theme .btn-practice,
body.light-theme .btn-save,
body.light-theme .scene-enter-btn,
body.light-theme .speed-btn.active,
body.light-theme .auth-tab.active,
body.light-theme .filter-btn.active,
body.light-theme .df-btn.df-active,
body.light-theme .word-choice-trigger.wc-picked,
body.light-theme .continue-btn,
body.light-theme .phase-continue {
  color: #fff;
}

/* Phase continue button — solid accent in light mode */
body.light-theme .continue-btn {
  background: var(--t4);
  box-shadow: 0 4px 16px rgba(43,122,191,0.25);
}

/* rgba(255,255,255,*) semi-transparent text → dark equivalent */
body.light-theme .chinese-char {
  color: var(--text);
}
body.light-theme .english-hint {
  color: var(--text);
}
body.light-theme .correct-english-reveal {
  color: var(--text);
}
body.light-theme .tryagain-banner {
  color: var(--text);
}
body.light-theme .cwp-english {
  color: var(--text);
}
body.light-theme .scenario-thumb-desc {
  color: var(--text);
}
body.light-theme .char-display {
  color: var(--text);
}
body.light-theme .phrase-zh,
body.light-theme .phrase-en {
  color: var(--text);
}
body.light-theme .ex-char.revealed {
  color: var(--text);
}

/* ── Learning-space popups ─────────────────────────────────── */

/* Sandhi popup (listening exercises) */
body.light-theme .ex-sandhi-popup {
  background: #ffffff;
  border-color: var(--border);
  box-shadow: 0 12px 40px rgba(0,0,0,0.12);
}
body.light-theme .ex-sandhi-popup h3 { color: #c07800; }
body.light-theme .ex-sandhi-rule { color: var(--text); }
body.light-theme .ex-sandhi-popup p { color: var(--muted); }

/* Sandhi popup (speaking exercises) */
body.light-theme .sp-sandhi-popup {
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}

/* Explainer / midpoint popup (speaking) */
body.light-theme .sp-explainer-popup {
  background: #ffffff;
  border-color: var(--border);
  box-shadow: 0 12px 40px rgba(0,0,0,0.12);
}
body.light-theme .sp-explainer-popup h3 { color: #c07800; }
body.light-theme .sp-explainer-popup p { color: var(--muted); }

/* Midpoint / explainer overlay backdrop */
body.light-theme .sp-sandhi-overlay,
body.light-theme .ex-overlay {
  background: rgba(0,0,0,0.25);
}

/* Scene completion overlay */
body.light-theme .scene-complete-overlay {
  background: rgba(0,0,0,0.4);
}
body.light-theme .scene-complete-card {
  background: #ffffff;
  border-color: var(--border);
  box-shadow: 0 16px 48px rgba(0,0,0,0.15);
}
body.light-theme .scene-complete-close {
  border-color: rgba(0,0,0,0.15);
  background: rgba(0,0,0,0.04);
  color: var(--muted);
}
body.light-theme .scene-complete-close:hover {
  background: rgba(0,0,0,0.08);
  color: var(--text);
}

/* Missed words list in score popups */
body.light-theme .sp-missed-list h4 { color: var(--t1); }
body.light-theme .sp-missed-pinyin { color: var(--muted); }
body.light-theme .sp-missed-meaning { color: var(--muted); }
body.light-theme .sp-missed-item {
  background: var(--surface2);
}

/* Overlay backdrops */
body.light-theme .ex-sandhi-overlay {
  background: rgba(0,0,0,0.25);
}

/* Scene image border */
body.light-theme .scene-img-wrap {
  border-color: var(--border);
}

/* Listening exercise overlay */
body.light-theme .ex-overlay {
  background: rgba(0,0,0,0.25);
}

/* Cards & surfaces with hardcoded dark bg */
body.light-theme .ls-card {
  background: #ffffff;
  border-color: var(--border);
}

/* Speaking legend target swatch */
body.light-theme .sp-legend-swatch.target {
  background: rgba(0,0,0,0.3);
}

/* Structure drag-drop zones */
body.light-theme .st-drop-zone {
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.1);
}
body.light-theme .st-drop-zone.active {
  border-color: rgba(0,0,0,0.15);
}

/* Vocabulary word choice items */
body.light-theme .word-choice-item {
  background: var(--surface2);
  border-color: var(--border);
}

/* Listening tone choice buttons */
body.light-theme .ex-tone-btn {
  background: #2a2a3e;
  color: #ffffff;
}
body.light-theme .ex-tone-btn .tone-pinyin,
body.light-theme .ex-tone-btn .tone-num {
  color: #ffffff;
}
body.light-theme .ex-tone-btn .tone-desc {
  color: rgba(255,255,255,0.6);
}

/* Learning-space scene number */
body.light-theme .progress-scene-num {
  color: var(--text);
}
body.light-theme .progress-scene-title {
  color: #111111 !important;
}
body.light-theme .sp-pinyin {
  background: rgba(0,0,0,0.08);
}

/* Dictionary word cards — solid white background */
body.light-theme .word-card {
  background: #ffffff;
  border-color: #c8c8d4;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

/* Checkmarks in checkboxes stay white on colored background */
body.light-theme .list-check:checked::after {
  color: #fff;
}

/* Auth spinner stays white */
body.light-theme .auth-submit.loading::after {
  border-top-color: #fff;
}

/* ── Tone sandhi badges — black bg / white text in light mode ── */
body.light-theme .ex-sandhi-badge {
  background: #1a1a2e;
  color: #fff;
}
body.light-theme .ex-sandhi-badge:hover {
  background: #2a2a42;
}
body.light-theme .sp-sandhi-badge {
  background: #1a1a2e;
  border-color: #1a1a2e;
  color: #fff;
}
body.light-theme .sp-sandhi-badge:hover {
  background: #2a2a42;
}

/* ── Structure drill — light mode overrides ── */
body.light-theme .st-slots {
  background: #111;
  border-color: rgba(255,255,255,0.12);
}
body.light-theme .st-slot {
  border-color: rgba(255,255,255,0.2);
}
body.light-theme .st-back-btn {
  background: rgba(0,0,0,0.08);
  color: var(--text);
}
body.light-theme .st-back-btn:hover {
  background: rgba(0,0,0,0.14);
}
body.light-theme .st-title {
  background: #111;
  color: #fff;
}

/* ── Learning Space hub — score % and labels dark in light mode ── */
body.light-theme .progress-cup-row {
  color: #1a1a1a;
}
body.light-theme .progress-cup-row .cup-pct {
  color: #1a1a1a;
}
body.light-theme .progress-scene-num {
  color: #1a1a1a;
}

/* ── Map-based navigation — light theme overrides ── */
body.light-theme .map-placeholder {
  background:
    radial-gradient(ellipse 40% 35% at 70% 30%, rgba(77,157,224,0.08) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 30% 70%, rgba(193,127,60,0.06) 0%, transparent 60%),
    linear-gradient(180deg, #e8e4dc 0%, #f0ece4 40%, #ece4d8 100%);
}
body.light-theme .map-placeholder::before {
  background-image:
    linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.03) 1px, transparent 1px);
}
body.light-theme .map-placeholder::after {
  color: rgba(0,0,0,0.05);
}
body.light-theme .map-pin-icon {
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.12), 0 0 0 0 rgba(232,168,75,0);
}
body.light-theme .map-pin-label {
  color: #f5f0e8;
  text-shadow: none;
}
body.light-theme .map-drawer {
  background: #fff;
  border-top-color: var(--border);
}
body.light-theme .map-path-line {
  stroke: var(--border);
}

/* ── AI Tutor ────────────────────────────────────────────────── */
body.light-theme .chat-topbar {
  background: #3a3a4a;
}
body.light-theme .msg.ai {
  background: #ffffff;
  border-color: #d8d4cc;
  color: #1a1a2e;
}
body.light-theme .msg.ai.alt {
  background: #e8f5e9;
  border-color: #a5d6a7;
}
body.light-theme .msg.user {
  background: #dce8f5;
  border-color: #b0c8e8;
  color: #1a2a3e;
}
body.light-theme .msg-text {
  color: inherit;
}
body.light-theme .msg-zh {
  color: #b71c1c;
}
body.light-theme .msg-hr {
  border-top-color: rgba(0,0,0,0.12);
}
body.light-theme #message-scroll {
  background: var(--bg);
}
body.light-theme #input-area {
  background: #fff;
  border-top-color: #d8d4cc;
}
body.light-theme #chat-input {
  background: #f5f0e8;
  color: #1a1a2e;
  border-color: #d8d4cc;
}
body.light-theme #right-col {
  background: #fff;
  border-left-color: #d8d4cc;
}
body.light-theme #col-divider {
  background: #d8d4cc;
}
body.light-theme #col-divider:hover,
body.light-theme #col-divider.dragging {
  background: var(--t4);
}
body.light-theme .answer-hint {
  color: #555;
}
body.light-theme .cap-badge {
  color: #666;
  border-color: #ccc;
}