/* ============================================================
   ТОКЕНЫ ТЕМЫ — единственный источник цвета для всего сайта.
   ------------------------------------------------------------
   Зачем файл появился: цвет на сайте был объявлен в трёх местах
   сразу (css/main.css, shared-styles.css, dark-theme.css), причём
   одни и те же имена значили разное — --bg-dark был и #050810,
   и #0a0e1a; --text-secondary и #ffffff, и #e2e8f0. Пока источник
   не один, переключать тему нечего.

   Как устроено:
     :root                     — тёмная тема (по умолчанию)
     :root[data-theme="light"] — светлая

   Почему светлая объявлена через атрибут, а не отдельным файлом:
   селектор :root[data-theme="light"] имеет специфичность выше
   голого :root, поэтому он перекрывает старые объявления в любом
   из трёх файлов НЕЗАВИСИМО от порядка загрузки. Это единственный
   способ не переписывать их все разом.

   ВАЖНО: в тёмной ветке здесь объявлены ТОЛЬКО новые
   семантические имена. Старые имена в тёмной теме не трогаются
   вообще — поэтому подключение файла не меняет вид сайта ни на
   один пиксель. Старым именам задаются значения только в светлой.

   Имена — по РОЛИ, а не по цвету: --surface-raised, а не --white.
   Роль не врёт при смене темы, название цвета врёт.
   ============================================================ */

:root {
  color-scheme: dark;

  /* — поверхности, по возрастанию «высоты» — */
  --surface-sunken:  #04060c;                    /* провалы, подвал */
  --surface-base:    #070b14;                    /* фон страницы */
  --surface-raised:  rgba(255, 255, 255, 0.03);  /* карточка на фоне */
  --surface-overlay: #0d1424;                    /* модалка, выпадающее меню */

  /* — текст — */
  --text-primary:   #ffffff;
  --text-secondary: #e2e8f0;
  --text-muted:     #94a3b8;
  --text-inverse:   #050810;   /* текст на заливке акцентом */

  /* — границы — */
  --border-subtle: rgba(255, 255, 255, 0.07);
  --border-strong: rgba(255, 255, 255, 0.14);

  /* — акцент. --accent для заливок и рамок, --brand-ink для ТЕКСТА:
       на светлом фоне яркая бирюза не добирает контраст, поэтому
       текстовый вариант всегда темнее заливочного. — */
  --brand:       #06b6d4;
  --brand-rgb:   6, 182, 212;
  --brand-hover: #0ea5e9;
  --brand-contrast: #ffffff;  /* что писать поверх заливки акцентом */

  /* — статусы — */
  --status-success: #10b981;
  --status-warning: #f59e0b;
  --status-danger:  #ef4444;
  --status-info:    #6366f1;

  /* — стекло — */
  --glass-surface: rgba(255, 255, 255, 0.04);
  --glass-edge:    rgba(255, 255, 255, 0.09);

  /* — тени. В тёмной теме глубину даёт свет, а не тень, поэтому они мягкие — */
  --shadow-card: 0 6px 22px rgba(0, 0, 0, 0.34);
  --shadow-lift: 0 18px 38px rgba(0, 0, 0, 0.45);

  /* ---- Миграционный слой (фазы 3–5) ----------------------------------
     Цвет на 133 страницах вшит прямо в разметку — 18 000 значений. Эти
     токены нужны, чтобы переводить его пачками БЕЗ риска: значение в
     тёмной ветке здесь буквально равно исходному цвету, который оно
     заменяет. Значит тёмная тема измениться не может в принципе —
     подставляется тот же цвет. Меняется только светлая ветка ниже.

     Имя содержит прозрачность НАМЕРЕННО. Сначала я свёл близкие значения
     в «ступени» (0.04 → та же ступень, что 0.03), и сплошная сверка это
     поймала: тёмная тема сдвигалась. Здесь важнее точность, чем красота
     имён — один токен на одно исходное значение, ноль сдвига. Свести их
     в ступени можно позже, уже осознанно и с проверкой глазами. */

  --glass-03: rgba(255, 255, 255, 0.03);
  --glass-04: rgba(255, 255, 255, 0.04);
  --glass-05: rgba(255, 255, 255, 0.05);
  --glass-06: rgba(255, 255, 255, 0.06);
  --glass-08: rgba(255, 255, 255, 0.08);
  --glass-10: rgba(255, 255, 255, 0.10);
  --edge-06:  rgba(255, 255, 255, 0.06);
  --edge-08:  rgba(255, 255, 255, 0.08);
  --edge-10:  rgba(255, 255, 255, 0.10);

  /* подложки/рамки в фирменном цвете */
  --tint-brand-1: rgba(6, 182, 212, 0.10);
  --tint-brand-2: rgba(6, 182, 212, 0.15);
  --tint-brand-3: rgba(6, 182, 212, 0.20);
  --tint-brand-4: rgba(6, 182, 212, 0.30);

  /* ступени текста: bright — заголовки, soft/faint — подписи */
  --text-bright: #f1f5f9;
  --text-soft:   #cbd5e1;
  --text-faint:  #64748b;

  /* Три оттенка бирюзы, которые встречаются в разметке как ЦВЕТ ТЕКСТА.
     Каждому свой токен: свести их в один означало бы поменять тёмную тему. */
  --brand-ink:   #06b6d4;
  --brand-ink-2: #22d3ee;
  --brand-ink-3: #67e8f9;

  /* Тёмные фоны в разметке тоже разные — #070b14, #050810, #0a0e1a.
     Отдельные токены по той же причине. */
  --surface-deep: #050810;
  --surface-alt:  #0a0e1a;

  /* ---- Субтитры плеера ----------------------------------------------
     Здесь важна РОЛЬ, а не цвет: прочитанное слово должно быть заметнее
     непрочитанного в ОБЕИХ темах. В тёмной это значит «светлее», в
     светлой — «темнее». Прямая подстановка цвета такую логику
     переворачивает: прочитанное #cbd5e1 на светлом фоне почти исчезает,
     и строка читается как два наложенных слоя текста. */
  --cue-panel:  rgba(15, 23, 42, 0.45);
  --cue-edge:   rgba(6, 182, 212, 0.18);
  /* Ещё не прочитанные строки расшифровки намеренно приглушены, но #64748b
     на тёмном давал 2.6:1 — читать невозможно. Поднято до 4.3:1, разница
     с текущей строкой (--cue-read) сохраняется. */
  --cue-unread: #94a3b8;
  --cue-read:   #e2e8f0;
  --cue-shadow: none;

  /* Панель плеера: следует теме вместе со своим содержимым, иначе
     значки и подписи темнеют, а фон остаётся тёмным. */
  --player-bg:   rgba(15, 23, 42, 0.96);
  --player-edge: rgba(6, 182, 212, 0.25);

  /* Пастельные оттенки статусов: на тёмном читаются, на светлой
     плашке того же тона исчезают. Светлые значения — насыщенные тёмные. */
  --ink-success: #6ee7b7;
  --ink-warning: #fdba74;
  --ink-gold: #fcd34d;
  --ink-amber: #fbbf24;   /* НЕ то же, что gold: свести их значило сдвинуть тёмную тему */
  --ink-danger: #fca5a5;
  --ink-info: #a5b4fc;
}

/* ============================================================
   СВЕТЛАЯ ТЕМА — «мягкий свет».
   Фон намеренно НЕ белый (#f5f7fa): чистый белый под тёмный
   контент даёт резь в глазах и убивает полупрозрачные плитки.
   Карточки, наоборот, белые — и отделяются от фона настоящей
   тенью, а не прозрачностью, как в тёмной теме.
   ============================================================ */
:root[data-theme="light"] {
  color-scheme: light;

  --surface-sunken:  #e8edf5;
  --surface-base:    #f5f7fa;
  --surface-raised:  #ffffff;
  --surface-overlay: #ffffff;

  --text-primary:   #0f172a;
  --text-secondary: #334155;
  --text-muted:     #5a6675;   /* #64748b давал 4.36:1 — чуть ниже нормы */
  --text-inverse:   #ffffff;

  --border-subtle: rgba(15, 23, 42, 0.10);
  --border-strong: rgba(15, 23, 42, 0.18);

  --brand:       #0891b2;   /* заливки/рамки */
  --brand-rgb:   8, 145, 178;
  --brand-ink:   #0b5c74;   /* текст и ссылки — темнее, чтобы пройти по контрасту */
  --brand-hover: #0b5c74;
  --brand-contrast: #ffffff;

  /* Статусы на светлом фоне надо затемнять: исходные рассчитаны на тёмный
     и на белом дают меньше 4.5:1 для обычного текста. */
  --status-success: #065f46;
  --status-warning: #b45309;
  --status-danger:  #b91c1c;   /* #dc2626 давал 4.29:1 */
  --status-info:    #4338ca;

  --glass-surface: rgba(255, 255, 255, 0.72);
  --glass-edge:    rgba(15, 23, 42, 0.10);

  /* В светлой теме глубину даёт именно тень — она короткая и плотная. */
  --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.06), 0 2px 8px rgba(15, 23, 42, 0.08);
  --shadow-lift: 0 4px 10px rgba(15, 23, 42, 0.08), 0 12px 28px rgba(15, 23, 42, 0.14);

  /* ---- Старые имена из трёх исторических наборов. Перекрываем их здесь,
       чтобы светлая тема заработала до того, как файлы будут переписаны
       на семантические токены (это фазы 3–5). ---- */

  /* css/main.css + shared-styles.css */
  --primary:        #0b5c74;
  --primary-dark:   #155e75;
  --primary-rgb:    8, 145, 178;
  --secondary:      #0369a1;
  /* Историческое --accent — это ОРАНЖЕВЫЙ, а не бирюза (бирюза — --brand).
     На светлом фоне исходный #f97316 даёт около 2.6:1 и для текста не годится,
     поэтому затемняем. */
  --accent:         #9a3412;
  --success:        #065f46;
  --warning:        #b45309;
  --danger:         #dc2626;
  --bg-dark:        #f5f7fa;
  --bg-darker:      #e8edf5;
  --glass-bg:       rgba(255, 255, 255, 0.72);
  --glass-border:   rgba(15, 23, 42, 0.10);
  --glass-blur:     blur(18px) saturate(140%);

  /* dark-theme.css */
  --bg:     #f5f7fa;
  --card:   #ffffff;
  --border: rgba(15, 23, 42, 0.10);
  --text:   #0f172a;
  --text-2: #334155;
  --text-3: #475569;

  /* ---- Миграционный слой в светлой теме ----
     Полупрозрачное белое на светлом фоне невидимо, поэтому «стекло»
     переворачивается в полупрозрачное тёмное. Ступени сохраняются:
     чем выше номер, тем заметнее поверхность. */
  --glass-03: rgba(15, 23, 42, 0.03);
  --glass-04: rgba(15, 23, 42, 0.04);
  --glass-05: rgba(15, 23, 42, 0.05);
  --glass-06: rgba(15, 23, 42, 0.06);
  --glass-08: rgba(15, 23, 42, 0.07);
  --glass-10: rgba(15, 23, 42, 0.09);
  /* Рамки на светлом требуют больше плотности, чем заливки, — иначе
     карточка «плывёт» без видимого края. */
  --edge-06:  rgba(15, 23, 42, 0.09);
  --edge-08:  rgba(15, 23, 42, 0.11);
  --edge-10:  rgba(15, 23, 42, 0.14);

  --tint-brand-1: rgba(8, 145, 178, 0.08);
  --tint-brand-2: rgba(8, 145, 178, 0.12);
  --tint-brand-3: rgba(8, 145, 178, 0.16);
  --tint-brand-4: rgba(8, 145, 178, 0.24);

  --text-bright: #0f172a;
  --text-soft:   #475569;
  --text-faint:  #5a6675;   /* на светлом даёт ~4.8:1 — проходит, не меняем */

  /* Субтитры: роль сохраняется, направление контраста переворачивается.
     Панель становится белой карточкой с настоящей тенью — на светлом
     фоне полупрозрачная тёмная плашка выглядела грязным пятном. */
  --cue-panel:  #ffffff;
  --cue-edge:   rgba(8, 145, 178, 0.28);
  --cue-unread: #64748b;    /* ещё не прочитано: 4.8:1 на белом — проходит.
                               #94a3b8 давал 2.56:1 и был нечитаем */
  --cue-read:   #0f172a;    /* прочитано — самое контрастное */
  --cue-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 4px 14px rgba(15, 23, 42, 0.10);
  --player-bg:   rgba(255, 255, 255, 0.97);
  --player-edge: rgba(15, 23, 42, 0.12);
  --ink-danger: #b91c1c;
  --ink-gold: #854d0e;
  --ink-amber: #854d0e;
  --ink-info: #4338ca;
  --ink-success: #065f46;
  --ink-warning: #9a3412;


  --brand-ink-2: #0891b2;
  --brand-ink-3: #0891b2;

  --surface-deep: #eef2f8;
  --surface-alt:  #eef2f8;

  /* css/pricing-section.css */
  --p2-cyan:   #0b5c74;
  --p2-purple: #6d28d9;
  --p2-orange: #9a3412;
  --p2-blue:   #1d4ed8;
  --p2-glass:  rgba(255, 255, 255, 0.8);
  --p2-border: rgba(15, 23, 42, 0.10);
  --p2-txt:    #0f172a;
  --p2-mut:    rgba(15, 23, 42, 0.66);
  --p2-dim:    rgba(15, 23, 42, 0.42);
}


/* ============================================================
   Базовый переворот страницы. Специфичность :root[data-theme] +
   тег выше, чем у голого `body {}` в инлайновых <style> страниц,
   поэтому фон переключается даже там, где он вшит в разметку.
   Остальное содержимое страниц переводится на токены в фазах 3–5.
   ============================================================ */
/* На 109 страницах фон вшит прямо в тег: <html style="background:#070b14">.
   Он там не случайно — гасит белую вспышку до загрузки стилей. Инлайновый
   стиль не перебить ничем, кроме !important, поэтому здесь он оправдан:
   иначе в светлой теме из-под контента торчит тёмная подложка (видно при
   оттягивании страницы и там, где body не закрашивает всю высоту).
   Правка 109 файлов ради этого того не стоит — правило одно. */
:root[data-theme="light"] {
  background: var(--surface-base) !important;
}

:root[data-theme="light"] body {
  background: var(--surface-base);
  color: var(--text-primary);
}

/* Плавный переход темы — но только для фона и текста: перекрашивать
   переходом вообще всё означает лаг на слабых машинах. */
:root[data-theme="light"] body,
:root:not([data-theme="light"]) body {
  transition: background-color 0.25s ease, color 0.25s ease;
}

@media (prefers-reduced-motion: reduce) {
  :root[data-theme="light"] body,
  :root:not([data-theme="light"]) body { transition: none; }
}

/* ============================================================
   ФАЗА 2 — ОБЩАЯ ОБВЯЗКА В СВЕТЛОЙ ТЕМЕ
   ------------------------------------------------------------
   Шапка, выпадающие меню, мобильное меню и подвал. Живёт в этом
   же файле намеренно: он уже подключён на всех 116 страницах,
   а отдельный файл означал бы ещё один проход по всем страницам
   ради одного тега <link>.

   Содержимое самих страниц (фазы 3–5) сюда не входит — там цвет
   вшит в разметку и переводится на токены отдельно.
   ============================================================ */

/* — шапка — */
:root[data-theme="light"] .navbar {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.74));
  border-bottom: 1px solid var(--border-subtle);
}

:root[data-theme="light"] .nav-btn {
  background: rgba(15, 23, 42, 0.04);
  border-color: rgba(15, 23, 42, 0.14);
  color: #334155;
}

:root[data-theme="light"] .nav-btn:hover { background: rgba(15, 23, 42, 0.08); color: #0f172a; }
:root[data-theme="light"] .logo-text { color: #0f172a; }

/* — выпадающие меню: в светлой теме отделяются тенью, а не свечением — */
:root[data-theme="light"] .dropdown {
  background: #ffffff;
  border-color: var(--border-subtle);
  box-shadow: var(--shadow-lift);
}

:root[data-theme="light"] .dropdown a { color: #334155; }
:root[data-theme="light"] .dropdown a:hover { background: rgba(8, 145, 178, 0.10); color: #0f172a; }
:root[data-theme="light"] .dropdown-nested-title { color: #64748b; }
:root[data-theme="light"] .dropdown-main { color: #0f172a; }

/* — кнопки входа — */
:root[data-theme="light"] .btn-login {
  background: rgba(15, 23, 42, 0.04);
  border-color: rgba(15, 23, 42, 0.14);
  color: #334155;
}

:root[data-theme="light"] .btn-login:hover { background: rgba(15, 23, 42, 0.09); color: #0f172a; }
:root[data-theme="light"] .btn-signup { background: linear-gradient(135deg, #0891b2, #0369a1); color: #ffffff; }

/* — бургер и мобильное меню — */
:root[data-theme="light"] .burger {
  background: rgba(15, 23, 42, 0.05);
  border-color: rgba(15, 23, 42, 0.12);
}

:root[data-theme="light"] .burger span { background: #475569; }
:root[data-theme="light"] .burger:hover span { background: #0f172a; }

:root[data-theme="light"] .mob-menu {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(248, 250, 252, 0.95));
  border-left-color: var(--border-subtle);
}

:root[data-theme="light"] .mob-header {
  background: rgba(255, 255, 255, 0.95);
  color: #0f172a;
  border-bottom-color: var(--border-subtle);
}

:root[data-theme="light"] .mob-header button {
  background: rgba(15, 23, 42, 0.05);
  border-color: rgba(15, 23, 42, 0.12);
  color: #475569;
}

:root[data-theme="light"] .mob-acc-title { color: #0f172a; }
:root[data-theme="light"] .mob-sub,
:root[data-theme="light"] .mob-sub-nested-item { color: #334155; }
:root[data-theme="light"] .mob-sub:hover { background: rgba(8, 145, 178, 0.10); }
:root[data-theme="light"] .mob-sub-nested-title { color: #64748b; }

/* — подвал — */
:root[data-theme="light"] .site-footer {
  background: #eef2f8;
  border-top-color: var(--border-subtle);
}

:root[data-theme="light"] .footer-title { color: #0f172a; }
:root[data-theme="light"] .footer-description,
:root[data-theme="light"] .footer-links a,
:root[data-theme="light"] .footer-copyright,
:root[data-theme="light"] .footer-bottom-links a { color: #475569; }
:root[data-theme="light"] .footer-links a:hover,
:root[data-theme="light"] .footer-bottom-links a:hover { color: var(--brand-ink); }
:root[data-theme="light"] .footer-bottom,
:root[data-theme="light"] .footer-divider { border-top-color: var(--border-subtle); }

:root[data-theme="light"] .social-link {
  background: rgba(15, 23, 42, 0.05);
  border-color: rgba(15, 23, 42, 0.12);
  color: #475569;
}

/* — кнопка переключения темы (разметку вставляет nav-loader.js) — */
.d4y-theme-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: none;
  padding: 0;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: #cbd5e1;
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
  line-height: 1;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.d4y-theme-btn:hover { background: rgba(255, 255, 255, 0.12); color: #ffffff; }

:root[data-theme="light"] .d4y-theme-btn {
  border-color: rgba(15, 23, 42, 0.14);
  background: rgba(15, 23, 42, 0.04);
  color: #475569;
}

:root[data-theme="light"] .d4y-theme-btn:hover { background: rgba(15, 23, 42, 0.09); color: #0f172a; }

/* Показываем только тот значок, который соответствует ТЕКУЩЕЙ теме:
   в тёмной — солнце (куда переключишься), в светлой — луну. */
.d4y-theme-btn .d4y-ico-sun { display: inline; }
.d4y-theme-btn .d4y-ico-moon { display: none; }
:root[data-theme="light"] .d4y-theme-btn .d4y-ico-sun { display: none; }
:root[data-theme="light"] .d4y-theme-btn .d4y-ico-moon { display: inline; }

/* ============================================================
   СВЕТЛЫЕ ПЕРЕКРЫТИЯ ДЛЯ ПРАВИЛ С !important
   ------------------------------------------------------------
   Сгенерировано из файлов сайта. В них 65 объявлений цвета/фона
   помечены !important и прибивают белый текст и белое «стекло» —
   обычное правило темы их не перебивает, !important бьёт
   специфичность. Здесь тот же !important, но селектор строго
   специфичнее (добавлен :root[data-theme="light"]), поэтому
   выигрывает. Тёмной темы не касается — блок работает только
   в светлой.
   ============================================================ */

:root[data-theme="light"] h1,
:root[data-theme="light"] h2,
:root[data-theme="light"] h3 { color: var(--text-primary) !important; }
/* Голый p — вторичным цветом: исходное правило делало все абзацы чисто
   белыми, но дословный эквивалент (почти чёрный) на светлом читается
   жёстко. Заголовки остаются максимально контрастными. */
:root[data-theme="light"] p { color: var(--text-secondary) !important; }
:root[data-theme="light"] .hero-description p { color: var(--text-secondary) !important; }
:root[data-theme="light"] .section-description { color: var(--text-primary) !important; }
:root[data-theme="light"] .bn-text { color: var(--text-muted) !important; }
:root[data-theme="light"] .modal-feature-content p { color: var(--text-secondary) !important; }
:root[data-theme="light"] .how-it-works-section .node-content h3 { color: var(--text-primary) !important; }
:root[data-theme="light"] .how-it-works-section .node-time { color: var(--text-primary) !important; }
:root[data-theme="light"] .how-it-works-section .node-details { color: var(--text-primary) !important; }
:root[data-theme="light"] .how-it-works-section .node-details p { color: var(--text-primary) !important; }
:root[data-theme="light"] .how-it-works-section .node-details strong { color: var(--brand-ink) !important; }
:root[data-theme="light"] .profession-section .section-description { color: var(--text-primary) !important; }
:root[data-theme="light"] .profession-text { color: var(--text-secondary) !important; }
:root[data-theme="light"] .stats-source p { color: var(--text-muted) !important; }
:root[data-theme="light"] .features-section .section-description { color: var(--text-primary) !important; }
:root[data-theme="light"] .carousel-btn,
:root[data-theme="light"] button.carousel-btn { background: var(--glass-04) !important; color: var(--text-secondary) !important; }
:root[data-theme="light"] .carousel-btn:hover { background: var(--glass-10) !important; border-color: var(--edge-10) !important; color: var(--text-primary) !important; }
:root[data-theme="light"] .final-cta-title { color: var(--text-primary) !important; }
:root[data-theme="light"] .final-cta-description { color: var(--text-primary) !important; }
:root[data-theme="light"] .mob-sub-nested-item { color: var(--text-secondary) !important; }
:root[data-theme="light"] .mob-sub-nested-item:hover { color: var(--brand-ink) !important; }
:root[data-theme="light"] .close-btn-light { background: var(--glass-10) !important; border-color: var(--edge-10) !important; color: var(--text-secondary) !important; }
:root[data-theme="light"] .close-btn-light:hover { background: var(--surface-raised) !important; border-color: var(--edge-10) !important; }
:root[data-theme="light"] .close-btn-light:active { background: var(--surface-raised) !important; }
:root[data-theme="light"] .close-btn-neon { color: var(--text-primary) !important; }
:root[data-theme="light"] .close-btn-gradient { color: var(--text-primary) !important; }
:root[data-theme="light"] .close-btn-glass { background: var(--glass-10) !important; color: var(--text-primary) !important; }
:root[data-theme="light"] .close-btn-glass:hover { background: var(--surface-raised) !important; border-color: var(--edge-10) !important; }
:root[data-theme="light"] .close-btn-3d { color: var(--text-primary) !important; }
:root[data-theme="light"] .close-btn-minimal { color: var(--text-muted) !important; }
:root[data-theme="light"] .close-btn-minimal:hover { color: var(--text-secondary) !important; }
:root[data-theme="light"] .close-btn-outlined:hover { color: var(--text-primary) !important; }
:root[data-theme="light"] .close-btn-soft { color: var(--text-primary) !important; }
:root[data-theme="light"] .close-btn-mega { color: var(--text-primary) !important; }
:root[data-theme="light"] .close-btn-rainbow { color: var(--text-primary) !important; }
:root[data-theme="light"] .close-btn-retro { color: var(--text-primary) !important; }
:root[data-theme="light"] .close-btn-fire { color: var(--text-primary) !important; }
:root[data-theme="light"] .close-btn-dark { color: var(--text-secondary) !important; }
:root[data-theme="light"] .close-btn-cartoon { color: var(--text-primary) !important; }
:root[data-theme="light"] [role="tab"]:hover,
:root[data-theme="light"] .tab:hover { background: var(--glass-05) !important; }
:root[data-theme="light"] [role="tab"]:active,
:root[data-theme="light"] .tab:active { background: var(--glass-08) !important; }

/* ============================================================
   КНОПКА «НАВЕРХ» ОТКЛЮЧЕНА — по просьбе, временно.
   ------------------------------------------------------------
   Появлялась двумя путями: scroll-to-top.js создаёт её скриптом
   (23 страницы) и ещё на 33 страницах она вшита в разметку.
   Вырезать из 56 файлов ради временного отключения — лишний
   риск, поэтому просто скрываем. Вернуть = удалить этот блок.
   ============================================================ */
#scrollToTop,
.scroll-to-top,
.scroll-top-btn {
  display: none !important;
}

/* ============================================================
   АДРЕСНЫЕ СЛУЧАИ (шаг 3)
   ============================================================ */

/* Блок цен объявляет свои переменные на .p2-root, а не на :root, поэтому
   светлые значения из блока выше до него не доходили — в каскаде выигрывает
   ближайший предок. Перекрываем в той же области. */
:root[data-theme="light"] .p2-root {
  --p2-cyan: #0b5c74;
  --p2-purple: #6d28d9;
  --p2-orange: #9a3412;
  --p2-blue: #1d4ed8;
  --p2-glass: rgba(15, 23, 42, 0.04);
  --p2-border: rgba(15, 23, 42, 0.12);
  --p2-txt: #0f172a;
  --p2-mut: rgba(15, 23, 42, 0.68);
  --p2-dim: rgba(15, 23, 42, 0.48);
}

/* Разделители в шапке героя — белые с прозрачностью 0.2; на светлом фоне
   не видны. Механика их пропускает: такой белый считается декором. */
:root[data-theme="light"] .divider { color: rgba(15, 23, 42, 0.28); }

/* Переключатель языка: стили приходят инлайном из nav-loader.js */
:root[data-theme="light"] .d4y-lang { color: #64748b; }
:root[data-theme="light"] .d4y-lang.active { color: var(--brand-ink); }
:root[data-theme="light"] .d4y-lang-sep { color: rgba(15, 23, 42, 0.32); }

/* Стрелка выпадающего меню в шапке — белая, на светлой шапке не видна */
:root[data-theme="light"] .nav-btn .arrow,
:root[data-theme="light"] .dropdown-arrow,
:root[data-theme="light"] .mob-arr,
:root[data-theme="light"] .mob-sub-arrow { color: #475569; }

/* Счётчик опыта: янтарный на светлом даёт около 1.6:1 */
:root[data-theme="light"] .mob-xp-val,
:root[data-theme="light"] #mob-profile-xp { color: #854d0e; }

/* ============================================================
   ВИДЕО-ФОНЫ В СВЕТЛОЙ ТЕМЕ
   ------------------------------------------------------------
   Три тёмных ролика — океан в герое, трак, Марина — продолжали
   играть поверх светлого фона. Текст к тому моменту стал тёмным,
   и вышло тёмное на тёмном: именно это выглядело хуже всего.
   Ролики сняты для тёмной темы, осветлить их нельзя — убираем.
   Яркость им пишет JS через opacity, поэтому глушим display:
   инлайновый opacity иначе не перебить.
   ============================================================ */
:root[data-theme="light"] .hero-bg-video,
:root[data-theme="light"] .midfx-bg-video,
:root[data-theme="light"] .section-bg-video {
  display: none !important;
}

/* Без ролика секции стали бы плоскими — даём спокойный светлый градиент */
:root[data-theme="light"] .hero-bg-stage {
  background: radial-gradient(120% 90% at 50% 0%, #e6eef9 0%, #f5f7fa 62%);
}

:root[data-theme="light"] .midfx-bg-stage,
:root[data-theme="light"] .section-bg-stage {
  background: linear-gradient(180deg, #f5f7fa 0%, #eaf0f8 50%, #f5f7fa 100%);
}

/* Тёмные вуали поверх роликов в светлой теме не нужны */
:root[data-theme="light"] .hero-bg-scrim,
:root[data-theme="light"] .midfx-bg-scrim,
:root[data-theme="light"] .section-bg-scrim {
  opacity: 0 !important;
}
/* ============================================================
   СВЕТЛАЯ ТЕМА — ПРОВЕРЕНО ГЛАЗАМИ В БРАУЗЕРЕ
   ------------------------------------------------------------
   Всё ниже найдено на живой странице и подтверждено скриншотом.
   Замер контраста эти вещи не ловил: он смотрит цвет текста
   против фона предка, а здесь мешали декоративные слои поверх.
   ============================================================ */

/* 1. Тёмная виньетка героя. Она затемняет видео под заголовком, но в
      светлой теме видео выключено — остаётся огромное тёмное пятно
      в центре экрана. Это выглядело хуже всего. */
:root[data-theme="light"] section.hero::before { background: none !important; }

/* 2. Холст с частицами (#neuralCanvas, position:fixed) рисует тёмный
      «космос» со звёздами. Из-за него целая секция была чёрной, а весь
      контент в ней невидим. */
:root[data-theme="light"] #neuralCanvas { display: none !important; }

/* 3. Шапка была полупрозрачной, и сквозь неё просвечивал градиент героя —
      читалась серой полосой. Делаем плотной. */
:root[data-theme="light"] .navbar {
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.08) !important;
}

/* 4. Главная кнопка: заливка 15% прозрачности с белым текстом — на светлом
      фоне текста не видно. Главному действию нужна плотная заливка. */
:root[data-theme="light"] .btn-chat,
:root[data-theme="light"] .btn.btn-large {
  background: linear-gradient(135deg, #0891b2, #0369a1) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 14px rgba(8, 145, 178, 0.28) !important;
}

/* 5. Вторичная кнопка — белая карточка с рамкой и тёмно-бирюзовым текстом */
:root[data-theme="light"] .program-link {
  background: #ffffff !important;
  color: var(--brand-ink) !important;
  border: 1px solid rgba(8, 145, 178, 0.35) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06) !important;
}

/* 6. Блок профиля и выход: цвета рассчитаны на тёмную шапку */
:root[data-theme="light"] .nav-profile-link {
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.10), rgba(139, 92, 246, 0.10)) !important;
  border-color: rgba(79, 70, 229, 0.28) !important;
}
:root[data-theme="light"] .nav-profile-link,
:root[data-theme="light"] .nav-profile-link * { color: #0f172a !important; }
:root[data-theme="light"] .nav-profile-link .mob-xp-val { color: #854d0e !important; }
:root[data-theme="light"] .nav-logout-btn {
  color: #b91c1c !important;
  background: rgba(185, 28, 28, 0.08) !important;
  border-color: rgba(185, 28, 28, 0.28) !important;
}

/* 7. Активная вкладка графика — белый текст на светлой заливке */
:root[data-theme="light"] .chart-tab.active {
  background: var(--brand-ink) !important;
  color: #ffffff !important;
}

/* ============================================================
   8. СВЕТЛАЯ ТЕМА: секции, которые остались тёмными
   ------------------------------------------------------------
   Замер контраста на главной в светлой теме дал 54 провала.
   Причина большинства — две секции не были переведены на светлую
   тему вообще: подложки карточек остались жёстко тёмными
   (rgba(18,24,40,.85) и rgba(20,27,45,.92)), а текст на них
   переключился в тёмный вместе с токенами. Контраст выходил
   1.01:1 — текст физически не виден.

   Ниже каждый цвет подобран под порог WCAG AA (4.5:1 для
   обычного текста, 3:1 для крупного), а не «на глаз».
   ============================================================ */

/* ── tools-section: карточки тренажёров ── */
:root[data-theme="light"] .map-trainer-card {
  background:
    radial-gradient(ellipse 65% 120% at 86% 42%, rgba(6, 182, 212, 0.10), transparent 60%),
    linear-gradient(160deg, #ffffff, #eef3f8) !important;
  border-color: rgba(8, 145, 178, 0.22) !important;
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.10) !important;
}
/* Диагональные лучи света рассчитаны на тёмный фон — на светлом это грязь */
:root[data-theme="light"] .map-trainer-card::before { background: none !important; }
/* Канва с белыми пылинками на белом не видна, только жрёт кадры */
:root[data-theme="light"] .map-trainer-particles { display: none !important; }
/* #0891b2 на светло-бирюзовой плашке давал 3.2:1 */
:root[data-theme="light"] .map-trainer-badge {
  color: #0b5c74 !important;
  background: rgba(8, 145, 178, 0.10) !important;
  border-color: rgba(8, 145, 178, 0.35) !important;
}

/* ── explore-section: карточки с роликами ── */
:root[data-theme="light"] .explore-item {
  background: linear-gradient(150deg, #ffffff, #eef3f8) !important;
  border-color: rgba(15, 23, 42, 0.10) !important;
}
/* Вуаль под текстом была почти чёрной — переворачиваем в белую, чтобы
   тёмный текст читался поверх ролика так же, как раньше читался белый. */
/* Вуаль тянется до 88% ширины, а не до 58%.
   Замер: текст карточки занимает от 3% до 79% ширины, а прежняя вуаль к
   58% падала до 0.26 — дальше тёмный текст лежал прямо на видео и не
   читался. Теперь плотная часть перекрывает весь текст, видео остаётся
   открытым справа. */
/* Вуаль плотная там, где текст, и отпускает ролик справа.
   Замер: строка занимала до 79% ширины и уезжала на видео. Ограничиваем
   текст 60% ширины (ниже) — и вуали хватает 68%, дальше кадр открыт. */
:root[data-theme="light"] .explore-item-scrim {
  background: linear-gradient(105deg,
              rgba(255, 255, 255, 0.98) 0%,
              rgba(255, 255, 255, 0.96) 62%,
              rgba(255, 255, 255, 0.90) 82%,
              rgba(255, 255, 255, 0.40) 93%,
              rgba(255, 255, 255, 0) 100%) !important;
}
:root[data-theme="light"] .explore-item:hover,
:root[data-theme="light"] .explore-item:focus-visible {
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.14) !important;
}

/* ── why-section: цифры карточек ──
   Цвет приходит инлайном через --acc и у каждой карточки свой (янтарь,
   бирюза, изумруд, синий, розовый, фиолетовый). Подменять его нельзя —
   тем же токеном покрашены иконки. Поэтому не заменяем, а затемняем:
   оттенок карточки сохраняется, светлота уходит под порог. */
:root[data-theme="light"] .bn-stat {
  color: color-mix(in srgb, var(--acc) 45%, #0f172a) !important;
}

/* ── profession-section: плашка роста ── */
:root[data-theme="light"] .chart-change {
  color: #065f46 !important;
  background: rgba(4, 120, 87, 0.10) !important;
  border-color: rgba(4, 120, 87, 0.30) !important;
}

/* ── pricing-section ── */
:root[data-theme="light"] .p2-spots-lbl { color: #b45309 !important; }
:root[data-theme="light"] .p2-old { color: rgba(15, 23, 42, 0.62) !important; }
:root[data-theme="light"] .p2-tag--prem { color: #9a3412 !important; }

/* ── мелочь, которая тоже не проходила порог ── */
:root[data-theme="light"] .divider { color: rgba(15, 23, 42, 0.68) !important; }
:root[data-theme="light"] .final-cta-badge { color: #0b5f74 !important; }
:root[data-theme="light"] .mob-arr,
:root[data-theme="light"] .mob-sub-arrow { color: #475569 !important; }
/* Правило цвета для .mob-acc-title выше перебивалось стилями меню */
:root[data-theme="light"] .mob-acc-title { color: #0f172a !important; }

/* ── белый текст на бирюзовых кнопках: #06b6d4 даёт 2.4:1, #0891b2 — 3.7:1 ── */
:root[data-theme="light"] .btn-chat,
:root[data-theme="light"] .btn.btn-large {
  background: linear-gradient(135deg, #0b5c74, #075985) !important;
}
:root[data-theme="light"] .btn-signup,
:root[data-theme="light"] .final-cta-btn-primary,
:root[data-theme="light"] .hlt-opt.active {
  background: linear-gradient(135deg, #0b5c74, #075985) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}

/* ── добор до порога: пять мест, которые после правок выше остались
      в диапазоне 2.3–4.45 при норме 4.5 ── */
:root[data-theme="light"] .p2-spots-lbl { color: #92400e !important; }
:root[data-theme="light"] .map-trainer-badge { color: #0b5f74 !important; }
:root[data-theme="light"] .chart-change {
  color: #065f46 !important;
  border-color: rgba(6, 95, 70, 0.30) !important;
}
/* Подпись под логотипом в мобильном меню — цвет приходит инлайном из nav.html */
:root[data-theme="light"] .mob-header span { color: #64748b !important; }

/* ============================================================
   9. СВЕТЛАЯ ТЕМА: цвет текста по умолчанию
   ------------------------------------------------------------
   body остался с белым цветом из тёмной темы. Пока у каждого
   блока цвет задан явно токеном, это не видно — но любой элемент
   БЕЗ своего цвета наследует белый и на светлом фоне исчезает.
   Так пропали цифры в карточках тренажёров.

   Ставим значение по умолчанию из токена. Блоки, которым нужен
   белый текст (кнопки с плотной заливкой, тёмные плашки), красят
   себя сами и этим правилом не задеваются — проверено замером
   контраста по всей странице.
   ============================================================ */
:root[data-theme="light"] body { color: var(--text-primary); }

/* ============================================================
   10. СВЕТЛАЯ ТЕМА: внутренние страницы
   ------------------------------------------------------------
   Светлую тему делали по главной, а внутренние страницы (уроки,
   глоссарий, кейсы, брокеры, аналитика) её не получили. Прогон по
   всем 111 страницам сайта дал 3510 нечитаемых мест: компоненты
   этих страниц красятся жёстко в цвета тёмной темы — белый,
   #e2e8f0, #cbd5e1 — прямо в инлайновых <style> самих страниц.

   Правила ниже — слой темы поверх страничных стилей. Селектор
   :root[data-theme="light"] .x весит больше, чем .x на странице,
   поэтому !important нужен лишь там, где у страницы правило
   составное.

   Разделено на два случая, и это важно:
     — текст, который должен стать ТЁМНЫМ (подписи, заголовки);
     — элементы с ЗАЛИВКОЙ, где белый текст правильный: им чиним
       не текст, а фон, иначе получится тёмное на тёмном.
   ============================================================ */

/* ── 1. Текст, который должен потемнеть ── */
:root[data-theme="light"] .kc-title,
:root[data-theme="light"] .faq-q-text,
:root[data-theme="light"] .ch-title,
:root[data-theme="light"] .ch-icon,
:root[data-theme="light"] .chart-bar-value,
:root[data-theme="light"] .banner-title,
:root[data-theme="light"] .cat-prog-name,
:root[data-theme="light"] .load-info-val,
:root[data-theme="light"] .load-info-route,
:root[data-theme="light"] .qz-opt,
:root[data-theme="light"] .qz-def,
:root[data-theme="light"] .say-this-text,
:root[data-theme="light"] .avatar,
:root[data-theme="light"] .ib-tip-text,
:root[data-theme="light"] .cp-section-title,
:root[data-theme="light"] .ib-links-title,
:root[data-theme="light"] .ib-link-text,
:root[data-theme="light"] .ib-link-ico { color: var(--text-primary) !important; }

:root[data-theme="light"] .kc-desc,
:root[data-theme="light"] .fb,
:root[data-theme="light"] .hn-l,
:root[data-theme="light"] .hero-sub,
:root[data-theme="light"] .banner-subtitle,
:root[data-theme="light"] .banner-stat-lbl,
:root[data-theme="light"] .card-xp-label,
:root[data-theme="light"] .card-status-icon,
:root[data-theme="light"] .side-diff-btn,
:root[data-theme="light"] .side-mode-btn,
:root[data-theme="light"] .side-stat-lbl,
:root[data-theme="light"] .side-streak-lbl,
:root[data-theme="light"] .qz-opt-num,
:root[data-theme="light"] .qz-level-name,
:root[data-theme="light"] .qz-level-count,
:root[data-theme="light"] .qz-counter,
:root[data-theme="light"] .qz-flip-hint,
:root[data-theme="light"] .ib-fact-lbl,
:root[data-theme="light"] .stat-label,
:root[data-theme="light"] .filter-btn,
:root[data-theme="light"] .filter-count,
:root[data-theme="light"] .dialog-empty,
:root[data-theme="light"] .cp-chip { color: var(--text-secondary) !important; }

:root[data-theme="light"] .faq-a-inner,
:root[data-theme="light"] .form-label,
:root[data-theme="light"] .ch-val,
:root[data-theme="light"] .load-info-label,
:root[data-theme="light"] .cat-btn { color: var(--text-muted) !important; }

/* Акцентные подписи: бирюза тёмной темы (#06b6d4) на светлом даёт 2.3:1 */
:root[data-theme="light"] .kc-cat,
:root[data-theme="light"] .faq-num,
:root[data-theme="light"] .side-panel-title,
:root[data-theme="light"] .hn-v,
:root[data-theme="light"] .hero-badge,
:root[data-theme="light"] .ch-badge,
:root[data-theme="light"] .qz-cat-badge,
:root[data-theme="light"] .team-role,
:root[data-theme="light"] .banner-stat-val,
:root[data-theme="light"] .ib-tip-next,
:root[data-theme="light"] .tip-card-label,
:root[data-theme="light"] .term-arrow,
:root[data-theme="light"] .option-letter,
:root[data-theme="light"] .broker-tag,
:root[data-theme="light"] .hub-tag,
:root[data-theme="light"] .cs-value,
:root[data-theme="light"] .nav-arrow { color: var(--brand-ink) !important; }

:root[data-theme="light"] .kc-xp,
:root[data-theme="light"] .section-badge { color: var(--ink-warning) !important; }

:root[data-theme="light"] .season-badge,
:root[data-theme="light"] .position-badge,
:root[data-theme="light"] .cat-prog-pct { color: #6d28d9 !important; }

/* Разделитель языков и декоративный номер сектора были почти прозрачными */
:root[data-theme="light"] .d4y-lang-sep { color: rgba(15, 23, 42, 0.55) !important; }
:root[data-theme="light"] .sector-number { color: rgba(11, 92, 116, 0.16) !important; }

/* ── 2. Элементы с заливкой: чиним ФОН, а не текст ──
      Здесь белый текст правильный. В светлой теме у них побледнела
      заливка, и белое поехало по белому. Возвращаем плотный фон. */
:root[data-theme="light"] .la-play,
:root[data-theme="light"] .btn-primary,
:root[data-theme="light"] .btn-p,
:root[data-theme="light"] .btn-pay,
:root[data-theme="light"] .search-btn,
:root[data-theme="light"] .mic-btn,
:root[data-theme="light"] .step-num,
:root[data-theme="light"] .tool-icon,
:root[data-theme="light"] .cp-cta,
:root[data-theme="light"] .state-card-badge,
:root[data-theme="light"] .docflow-step {
  background: linear-gradient(135deg, #0b5c74, #075985) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}
:root[data-theme="light"] .unread-badge,
:root[data-theme="light"] .popular-badge {
  background: #9a3412 !important;
  color: #ffffff !important;
}
:root[data-theme="light"] .expand-icon,
:root[data-theme="light"] .doc-tab-icon,
:root[data-theme="light"] .doc-tab-title { color: var(--text-primary) !important; }

/* ── 3. Второй круг: то, что осталось после первого прогона ── */

/* Текст, оставшийся светлым на светлом */
:root[data-theme="light"] .card-title,
:root[data-theme="light"] .prep-scenario,
:root[data-theme="light"] .prep-item-val,
:root[data-theme="light"] .session-details-scenario,
:root[data-theme="light"] .region-name,
:root[data-theme="light"] .rate-value,
:root[data-theme="light"] .hero-stat-number,
:root[data-theme="light"] .lv-big { color: var(--text-primary) !important; }

:root[data-theme="light"] .tag,
:root[data-theme="light"] .txt,
:root[data-theme="light"] .qz-level-name { color: var(--text-secondary) !important; }

:root[data-theme="light"] .active,
:root[data-theme="light"] .cs-label { color: var(--brand-ink) !important; }
:root[data-theme="light"] .state-card-value { color: var(--ink-warning) !important; }

/* Значение внутри цветной полосы графика: белым, полоса тёмная и в светлой теме */
:root[data-theme="light"] .chart-bar-value { color: #ffffff !important; }

/* Разделитель языков был еле виден даже после первой правки */
:root[data-theme="light"] .d4y-lang-sep { color: rgba(15, 23, 42, 0.7) !important; }

/* Блоки, оставшиеся тёмными: списки, панели, поля поиска, кнопки навигации */
:root[data-theme="light"] .thread-list-container,
:root[data-theme="light"] .rates-section,
:root[data-theme="light"] .search-box,
:root[data-theme="light"] .cp-head,
:root[data-theme="light"] .module-nav-btn {
  background: #ffffff !important;
  border-color: var(--border-subtle) !important;
  color: var(--text-primary) !important;
}

/* Декоративные номера-водяные знаки: они ДОЛЖНЫ быть бледными, это не текст.
   Задаём им заведомо декоративную прозрачность, чтобы не спорили с контентом. */
:root[data-theme="light"] .sector-number,
:root[data-theme="light"] .tech-num { color: rgba(11, 92, 116, 0.14) !important; }

/* ── 4. Третий круг ── */

/* Подписи внутри карточек модулей: были белыми, класса у них нет —
   цепляем через родителя, а не голым span, чтобы не задеть чужое. */
:root[data-theme="light"] .card-meta span,
:root[data-theme="light"] .card-top span { color: var(--text-secondary) !important; }
:root[data-theme="light"] .card-num,
:root[data-theme="light"] .hero-xp-text,
:root[data-theme="light"] .tool-card h4,
:root[data-theme="light"] .tool-card .tool-icon { color: var(--text-primary) !important; }

/* Дорожка столбика графика была тёмной (rgba(15,23,42,.6)) и в светлой теме */
:root[data-theme="light"] .chart-bar-wrapper {
  background: rgba(15, 23, 42, 0.08) !important;
}
/* Само значение остаётся белым — оно лежит на насыщенном градиенте столбика.
   Тень нужна там, где градиент уходит в светло-розовый: без неё белое тонет. */
:root[data-theme="light"] .chart-bar-value {
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

/* Цветные плашки статусов: на светлой подложке не добирали до порога */
:root[data-theme="light"] .rpm-badge,
:root[data-theme="light"] .severity,
:root[data-theme="light"] .tms-tag { color: #b91c1c !important; }
:root[data-theme="light"] .pc-severity,
:root[data-theme="light"] .csa-score { color: #92400e !important; }
:root[data-theme="light"] .stat-trend { color: #15803d !important; }

/* ── 5. Финальный круг ── */

/* Кнопки с заливкой: белый текст правильный, бледнел фон */
:root[data-theme="light"] .prep-start-btn,
:root[data-theme="light"] .fb-btn,
:root[data-theme="light"] .vcw-mic-container .mic-btn {
  background: linear-gradient(135deg, #0b5c74, #075985) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}

/* Мелкие подписи карточек */
:root[data-theme="light"] .card-version,
:root[data-theme="light"] .card-arrow,
:root[data-theme="light"] .bi-check { color: var(--brand-ink) !important; }
:root[data-theme="light"] .card-desc { color: var(--text-muted) !important; }
:root[data-theme="light"] .stat-trend { color: #14532d !important; }

/* Карточка груза оставалась тёмной — из-за неё подписи внутри не читались */
:root[data-theme="light"] .load-card,
:root[data-theme="light"] .load-info {
  background: #ffffff !important;
  border-color: var(--border-subtle) !important;
}
:root[data-theme="light"] .load-info-label { color: var(--text-muted) !important; }
:root[data-theme="light"] .load-info-val,
:root[data-theme="light"] .load-info-route { color: var(--text-primary) !important; }

/* ── 6. Полупрозрачные тёмные панели ──
   Фон задан как rgba тёмного с прозрачностью 0.3–0.7. На тёмной теме это
   лёгкое затемнение, на светлой — серая плита поперёк страницы. Оверлеи
   модальных окон (*-overlay) НЕ трогаем: там затемнение и должно быть. */
:root[data-theme="light"] .alphabet-nav,
:root[data-theme="light"] .load-stats-section,
:root[data-theme="light"] .timeline-node {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.04), rgba(15, 23, 42, 0.07)) !important;
  border-color: var(--border-subtle) !important;
  color: var(--text-primary) !important;
}

/* ── 7. Карточки секции «Что вы получите» ──
   Текст карточки лежит ПОВЕРХ фотографии, которую затемняет вуаль
   .feature-media::after — rgba(5,8,16,.35) сверху и .55 к низу. Карточка
   остаётся тёмной в ЛЮБОЙ теме, потому что это фото, а не подложка.

   В светлой теме заголовок брал --text-primary и становился тёмным на
   тёмном фото: контраст около 1.5:1, читать невозможно. Здесь нужен не
   «цвет по теме», а белый — как в тёмной.

   Тень обязательна: фотографии разные, внизу вуаль слабее, и без неё
   белый местами тонет в светлых участках кадра. */
:root[data-theme="light"] .feature-content h3 {
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) !important;
}
:root[data-theme="light"] .feature-content p {
  color: rgba(255, 255, 255, 0.92) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55) !important;
}
/* Вуаль плотнее снизу, где лежит текст: 0.35→0.55 не хватало на светлых
   кадрах даже белому. */
:root[data-theme="light"] .feature-media::after {
  background: linear-gradient(rgba(5, 8, 16, 0.30) 0%,
                              rgba(5, 8, 16, 0.62) 55%,
                              rgba(5, 8, 16, 0.86) 100%) !important;
}

/* ── Градиентный текст, начинавшийся с белого ──
   .p2-title и .p2-amount залиты градиентом через background-clip:text.
   Первый стоп у обоих — чистый белый: на тёмной теме это блик, на светлой
   первая половина слова просто исчезала («Выберите свой», «$8» в «$850»).
   Меняем стопы на тёмные, сам приём градиента сохраняем. */
:root[data-theme="light"] .p2-title {
  background-image: linear-gradient(120deg, #0f172a 0%, #4338ca 55%, #0b5c74 100%) !important;
}
:root[data-theme="light"] .p2-amount {
  background-image: linear-gradient(120deg, #0f172a 0%, #0b5c74 100%) !important;
  /* Обрезку по тексту задаём явно: у второй карточки её нет, и без этих
     двух строк градиент лёг бы сплошной плашкой позади цены. */
  -webkit-background-clip: text !important;
          background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* ── Тёмные декоративные слои не должны существовать в светлой теме ──
   Раньше они гасились через opacity:0. Этого мало: яркость этим слоям
   пишет JS инлайном по прокрутке, и в переходных состояниях тёмная
   вуаль успевала проступить поверх светлой страницы. Убираем их из
   раскладки совсем и на всякий случай обесцвечиваем фон. */
:root[data-theme="light"] .hero-bg-scrim,
:root[data-theme="light"] .midfx-bg-scrim,
:root[data-theme="light"] .section-bg-scrim {
  display: none !important;
  background: transparent !important;
}
/* Фон страницы — с приоритетом: в разметке страниц есть свои правила
   body{background:var(--surface-deep)}, и при частичном применении темы
   выигрывало не то. */
:root[data-theme="light"] body {
  background: var(--surface-base) !important;
}

/* ── Переключатель темы в разделе пользователя ──
   Кнопка убрана из общей шапки: тему меняют только вошедшие, из своего
   блока. На десктопе она встаёт рядом с профилем и «Выйти», на мобильном —
   отдельной строкой в карточке профиля, где рядом нужен текст-подпись. */
.d4y-theme-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.d4y-theme-row span {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}
:root[data-theme="light"] .d4y-theme-row {
  border-top-color: rgba(15, 23, 42, 0.12);
}
/* ── Переключатель темы в кабинете ──
   Стоит первым в шапке кабинета и подписан: видно и текущее положение,
   и что вообще можно выбрать. Иконка без подписи здесь не годится —
   пользователь не обязан догадываться, что означает луна. */
.theme-slot {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 20px;
}
.d4y-theme-switch {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 16px;
  background: var(--glass-05);
  border: 1px solid var(--edge-10);
}
.d4y-theme-caption {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
.d4y-theme-opts {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: var(--glass-04);
}
.d4y-theme-btn.d4y-theme-opt {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: auto;
  height: auto;
  padding: 8px 16px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background .18s ease, color .18s ease;
}
.d4y-theme-btn.d4y-theme-opt:hover { color: var(--text-primary); }
.d4y-theme-btn.d4y-theme-opt.is-active {
  background: linear-gradient(135deg, #22d3ee, #0891b2);
  color: #06283a;
  box-shadow: 0 4px 14px rgba(6, 182, 212, 0.3);
}
:root[data-theme="light"] .d4y-theme-btn.d4y-theme-opt.is-active {
  background: linear-gradient(135deg, #0b5c74, #075985);
  color: #ffffff;
}
/* Иконки внутри подписанных кнопок показываем обе — они часть подписи */
.d4y-theme-opt .d4y-ico-sun,
.d4y-theme-opt .d4y-ico-moon { display: inline !important; }

@media (max-width: 600px) {
  .theme-slot { justify-content: stretch; }
  .d4y-theme-switch { width: 100%; justify-content: space-between; }
  .d4y-theme-caption { display: none; }
  .d4y-theme-opts { flex: 1; }
  .d4y-theme-btn.d4y-theme-opt { flex: 1; justify-content: center; }
}