/* ============================================================
   Тёмная тема курса китайского — надстройка над css/style.css.

   Курс писался со светлым дизайном и своей палитрой. Вместо
   переписывания девятисот строк перекрашиваем через переменные:
   его палитра отображается на токены платформы (shared/theme.css),
   а точечные правила чинят места, где светлый фон или белый текст
   прописаны жёстко.

   Подключается ПОСЛЕ css/style.css на каждой странице курса.
   ============================================================ */

:root {
  /* Акцент курса — как на его карточке в хабе. */
  --red:       #f43f5e;
  --red-light: #fb7185;
  --red-bg:    rgba(244, 63, 94, 0.12);

  --gold:      #fbbf24;
  --gold-light:#fcd34d;
  --gold-bg:   rgba(251, 191, 36, 0.10);

  --green:     #4ade80;
  --green-bg:  rgba(74, 222, 128, 0.10);

  --blue:      #60a5fa;
  --blue-bg:   rgba(96, 165, 250, 0.10);

  /* «Тёмный» в исходнике — это цвет текста. Теперь текст светлый. */
  --dark:      #e2e6f0;
  --gray:      #8b93a7;
  --gray-light:#2a2f40;

  /* «Белый» в исходнике — цвет карточек. Теперь карточки тёмные. */
  --white:     #161923;
  --bg:        #0f1117;

  --shadow:    0 4px 20px rgba(0, 0, 0, .35);
  --shadow-lg: 0 18px 50px rgba(0, 0, 0, .45);

  /* Радиусы приводим к платформенным. */
  --radius:    12px;
  --radius-sm: 8px;
}

body { font-family: var(--font, "Segoe UI", system-ui, sans-serif); }

/* Ширина как у остальных страниц платформы. */
.container { max-width: 1100px; }

/* ---------- Текст на акцентных заливках ----------
   В исходнике он задан как var(--white), но «белый» теперь тёмная
   поверхность — возвращаем этим местам настоящий белый. */
.site-header, .logo,
.header-nav a:hover, .header-nav a.active,
.hero,
.btn-gold, .btn-red, .btn-green, .btn-outline,
.lesson-header, .lesson-header .back-link:hover,
.tone-num, th, .step-badge,
.speak-btn:hover, .speak-btn.gold:hover {
  color: #ffffff;
}
.btn-gold { color: #1a1a2e; }          /* на жёлтом читается тёмный */

/* ---------- Шапка курса ----------
   Красная плашка превращается в тёмную панель с акцентной нитью —
   так же, как выглядит верх остальных курсов. */
.site-header {
  background: var(--white);
  border-bottom: 1px solid var(--gray-light);
  box-shadow: none;
}
.site-header, .logo { color: var(--dark); }
.header-nav a { color: var(--gray); }
.header-nav a:hover { background: var(--red-bg); color: var(--red); }
.header-nav a.active { background: var(--red-bg); color: var(--red); }

/* Полоска общего прогресса под шапкой. */
.global-progress { background: var(--gray-light); }

/* ---------- Первый экран ----------
   Вместо алой заливки — тёмный градиент с акцентным свечением. */
.hero {
  background:
    radial-gradient(900px 420px at 50% -10%, rgba(244, 63, 94, .28), transparent 70%),
    linear-gradient(180deg, #1a1220 0%, var(--bg) 100%);
}
.hero .zh-big { opacity: .16; }

.lesson-header {
  background:
    radial-gradient(700px 300px at 50% -20%, rgba(244, 63, 94, .30), transparent 70%),
    #1a1220;
}

/* ---------- Карточки уроков ---------- */
.lesson-card {
  border: 1px solid var(--gray-light);
}
.lesson-card:hover {
  border-color: var(--red);
}
.lesson-card.locked { opacity: .45; }

/* ---------- Кнопки ---------- */
.btn-white { background: var(--dark); color: var(--bg); }
.btn-gray { background: var(--gray-light); color: var(--dark); }

/* ---------- Светлые заливки, прописанные жёстко ---------- */

/* Сертификат в конце курса задан светлым градиентом и в style.css,
   и повторно в <style> урока 20 — поэтому с !important. */
.certificate {
  background: linear-gradient(135deg, #2a2436 0%, var(--white) 60%, #241d2b 100%) !important;
  border: 1px solid var(--gold);
}

/* Карточки мнемоник (урок 1): градиент уезжал в белый, и светлый
   текст на нём пропадал. Тёмная поверхность с золотой нитью. */
.mnemonic-card {
  background: linear-gradient(135deg, var(--gold-bg), var(--white)) !important;
  border: 1px solid rgba(251, 191, 36, .35) !important;
}

/* Таблицы: голова на тёмном фоне, зебра строк. */
th { background: var(--red); }
tr:nth-child(even) td { background: rgba(255, 255, 255, .03); }
td { border-color: var(--gray-light); }

/* Поля ввода в упражнениях. */
.fill-input, input[type="text"], select, textarea {
  background: var(--bg);
  color: var(--dark);
  border-color: var(--gray-light);
}

/* Карточки-перевёртыши тренажёра. */
.flip-front { background: var(--white); border: 1px solid var(--gray-light); }
.flip-back { background: var(--red-bg); border: 1px solid var(--red); }

/* Диалоговые пузыри. */
.dialog-bubble { background: var(--white); border: 1px solid var(--gray-light); }

/* Абзацы уроков в исходнике жёстко тёмно-серые (#333). */
.section p { color: var(--dark); }
.audio-hint { color: var(--blue); }
.section strong, .section em, .section b { color: inherit; }

/* Инлайн-подкраска «под светлую тему» вроде color:#1A5276 —
   тёмно-синие акценты внутри блоков. Возвращаем читаемый голубой. */
[style*="color:#1A5276"], [style*="color: #1A5276"],
[style*="color:#333"], [style*="color: #333"] {
  color: var(--dark) !important;
}

/* Баннеры «продолжить» и «тренажёр» задают градиент инлайном —
   приводим к тёмной поверхности с акцентной нитью. */
.continue-banner {
  background: var(--white) !important;
  border: 1px solid var(--gray-light);
  border-left: 3px solid var(--red);
  color: var(--dark);
}
.continue-banner h3 { color: var(--dark); }
.continue-banner p { color: var(--gray); }

/* ---------- Инлайн-стили страниц ----------
   Отдельные уроки рисуют свои блоки с жёстким светлым фоном
   (#FFF, #FFF9E6 и подобные) в собственных <style>. Добить каждую
   страницу правкой её стилей — хрупко; вместо этого приглушаем
   типовые случаи универсальными правилами по атрибуту. */
[style*="background:#FFF"], [style*="background: #FFF"],
[style*="background:#fff"], [style*="background: #fff"] {
  background: var(--white) !important;
  color: var(--dark);
}

/* Бейджи модулей в итоговом тесте определены в <style> страницы —
   там же пастельные фоны. Наш файл ниже по каскаду не стоит, поэтому
   усиливаем специфичность. */
span.module-badge.mb-1 { background: var(--red-bg); }
span.module-badge.mb-2 { background: var(--green-bg); }
span.module-badge.mb-3 { background: var(--blue-bg); }
span.module-badge.mb-4 { background: var(--gold-bg); color: var(--gold); }
span.module-badge.mb-5 { background: rgba(192, 132, 252, .12); color: #c084fc; }

/* ---------- Исправления по итогам аудита контраста ---------- */

/* Кнопки НЕ наследуют цвет текста: у них свой чёрный по умолчанию,
   который на тёмном фоне невидим. Это ломало варианты ответов во
   всех тестах курса. */
button { color: inherit; }
.option-btn { color: var(--dark); }
.option-btn .opt-zh { color: inherit; }

/* «Знаю» в тренажёре: белый по светло-зелёному не читается. */
.btn-green { color: #0f1117; }

/* ---------- Подсказки и озвучка в тестах (новые элементы) ---------- */

.quiz-hint-row { margin-top: 12px; }
.hint-toggle {
  background: transparent;
  border: 1px dashed var(--gold);
  color: var(--gold) !important;
  border-radius: 999px;
  padding: 5px 14px;
  font-size: .85rem;
  cursor: pointer;
}
.hint-toggle:hover { background: var(--gold-bg); }
.quiz-tip {
  display: none;
  margin-top: 10px;
  padding: 12px 16px;
  background: var(--gold-bg);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius-sm);
  font-size: .9rem;
  color: var(--dark);
}
.quiz-tip.show { display: block; }

.speak-big {
  font-size: 1rem;
  padding: 12px 22px;
  margin-top: 8px;
}

/* Объяснение после ответа в тесте: в исходнике текст тёмно-зелёный
   и бордовый — на тёмных подложках он пропадал. Текст светлый,
   цвет остаётся у рамки и лёгкой подложки. */
.quiz-feedback.correct-fb { color: var(--dark); }
.quiz-feedback.wrong-fb { color: var(--dark); }

/* Номер тона на золотой плашке — тёмный текст. */
.tone-num { color: #0f1117; }

/* В исходной палитре gray-light был бледно-серым ТЕКСТОМ, у нас это
   тёмный цвет РАМОК. Все места, где он использовался как текст: */
.pinyin-full-table td.empty { color: var(--gray) !important; }
.arrow-step { color: var(--gray) !important; }
.big-char-display { color: var(--gray) !important; }

/* Плашки схемы предложения и счётных слов: green/gold/blue стали
   светлыми акцентами — белому тексту на них нечего делать. */
.svo-s, .svo-v, .svo-o,
.fb-num, .fb-mw, .fb-n,
.step-badge { color: #0f1117 !important; }

/* Карточки цветов в уроке 11: фон карточки — сам изучаемый цвет
   (жёлтый, розовый...), белая подпись на них пропадает. Тёмная
   подпись читается на всей палитре. */
.color-card, .color-card * { color: #101418 !important; }
.color-card .cc-py, .color-card .cc-ru { opacity: 1; }
/* ...кроме карточки чёрного цвета: на ней текст, наоборот, светлый. */
.color-card[style*="#1A1A2E"], .color-card[style*="#1A1A2E"] * { color: #e2e6f0 !important; }

/* Инлайн-плашки «цвет на золоте» (легенда пиньиня в уроке 4). */
[style*="background:var(--gold)"] { color: #0f1117 !important; }

/* Пастельные плашки урока-повторения — переводим в тонированные
   тёмные того же оттенка. */
[style*="background:#e3f2fd"], [style*="background: #e3f2fd"] { background: var(--blue-bg) !important; }
[style*="background:#e8f5e9"], [style*="background: #e8f5e9"] { background: var(--green-bg) !important; }
[style*="background:#f3e5f5"], [style*="background: #f3e5f5"] { background: rgba(192, 132, 252, .10) !important; }
[style*="background:#fdecea"], [style*="background: #fdecea"] { background: var(--red-bg) !important; }
[style*="background:#fffde7"], [style*="background: #fffde7"] { background: var(--gold-bg) !important; }

/* ============================================================
   Светлая тема платформы.

   Этот файл перекрашивает изначально светлый курс в тёмный. Когда
   человек выбирает светлое оформление, надстройку нужно отменить:
   возвращаем курсу его родные значения. Переменные исходного
   style.css перечислены явно — так видно, что именно возвращается.
   ============================================================ */

:root[data-theme="light"] {
  --red:       #E74C3C;
  --red-light: #EC7063;
  --red-bg:    #fdecea;

  --gold:      #D4AF37;
  --gold-light:#E8C547;
  --gold-bg:   #fffde7;

  --green:     #27AE60;
  --green-bg:  #e8f5e9;

  --blue:      #2980B9;
  --blue-bg:   #e3f2fd;

  --dark:      #1a1a2e;
  --gray:      #6b7280;
  --gray-light:#e5e7eb;

  --white:     #ffffff;
  --bg:        #f7f7fb;

  --shadow:    0 4px 18px rgba(20, 28, 48, .10);
  --shadow-lg: 0 18px 44px rgba(20, 28, 48, .16);
}

/* Шапка и первый экран возвращаются к фирменной красной заливке. */
:root[data-theme="light"] .site-header {
  background: var(--red);
  border-bottom: none;
  box-shadow: var(--shadow);
}
:root[data-theme="light"] .site-header,
:root[data-theme="light"] .logo { color: #ffffff; }
:root[data-theme="light"] .header-nav a { color: rgba(255, 255, 255, .85); }
:root[data-theme="light"] .header-nav a:hover,
:root[data-theme="light"] .header-nav a.active {
  background: rgba(255, 255, 255, .18);
  color: #ffffff;
}

:root[data-theme="light"] .hero,
:root[data-theme="light"] .lesson-header {
  background: linear-gradient(135deg, var(--red) 0%, #c0392b 100%);
}
:root[data-theme="light"] .hero .zh-big { opacity: .12; }