/* ============================================================================
   dark.css — ночной режим сайта. Наложение, а не пересборка.
   ----------------------------------------------------------------------------
   Как это работает и почему именно так:

   1. Файл подключается из resources/views/layouts/navigation.blade.php — там же,
      где уже живут navbar.css/navbar.js (приём NAV-E2). Значит, он грузится
      ПОЗЖЕ app.css (тот в <head>), и при равной специфичности выигрывает.
      Самый опасный app.blade.php остаётся нетронутым, Mix не собирается.

   2. Признак темы — атрибут data-theme="dark" на <html>. Его ставит крошечный
      инлайновый скрипт в начале navigation.blade.php (до отрисовки) и меняет
      js/dark.js по клику. Префикс [data-theme="dark"] добавляет каждому правилу
      единицу специфичности — этого хватает, чтобы перебить и Bulma, и правила
      островов (.home-v2 и т. п.), и инлайновые <style> партиалов (кнопка
      «наверх» подключается ПОЗЖЕ нас, поэтому её бьём специфичностью).

   3. !important здесь ровно в двух местах, и оба вынужденные:
      — инлайновый атрибут style= у полосы-заголовка (layouts/breadcrumbs);
      — семь утилит Bulma, которые сами объявлены с !important.

   ЧЕГО ЭТОТ ФАЙЛ НЕ ДЕЛАЕТ (сознательно, см. отчёт разведки DARK):
      — не трогает иллюстрации в статьях (425 из 479 — светлые jpg);
      — не трогает 39 статей с редакторскими врезками (там цвет в атрибуте
        style внутри тела статьи — это контент, а не код);
      — не открывает платный текст: заслонка .hide-content остаётся на месте,
        у неё перекрашивается только градиент;
      — не действует на 7 видов, которые не включают layouts.navigation
        (contacts, instructors/*, auth/verify, auth/passwords/*, home_old);
      — не трогает Nova/менеджер и калькулятор /1rm (сам себе страница).

   Палитра — решение D-0, поднятое до ступени C в треке DARK-2 (вся лестница
   фонов сдвинута на шаг светлее, teal — на шаг ярче):
      фон #171C1E · карточка #202829 · поднятая #283032 · линия #36433F
      текст #E8EDEE · приглушённый #9FADB0 · ночной teal #2EA5B2 · золото #B8AA73
      Фирменный #1F6F78 на тёмном даёт 3.08 и для текста НЕ годится — поэтому
      в ночном режиме его нет вовсе.
   ============================================================================ */


/* ============================================================================
   0. Кнопка-переключатель. Живёт ВНЕ [data-theme], потому что она нужна
      в обеих темах — именно ею в ночную и входят.
      Иконка выбирается CSS, а не скриптом: разметку навбара пересобирает Vue
      (inline-template), и любое состояние, записанное в DOM до монтирования,
      было бы потеряно. CSS переживает перерисовку, класс — нет.
   ============================================================================ */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 6px 2px 6px 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #3a4a58;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    flex: none;
    align-self: center;
    transition: background-color .16s, color .16s;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
    background: rgba(31, 111, 120, .10);
    color: #1F6F78;
}

.theme-toggle:focus-visible {
    outline: 2px solid #1F6F78;
    outline-offset: 2px;
}

.theme-toggle svg {
    width: 21px;
    height: 21px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* День: предлагаем ночь (луна). Ночь: предлагаем день (солнце). */
.theme-toggle .tt-sun {
    display: none;
}

[data-theme="dark"] .theme-toggle .tt-sun {
    display: block;
}

[data-theme="dark"] .theme-toggle .tt-moon {
    display: none;
}

[data-theme="dark"] .theme-toggle {
    color: #9FADB0;
}

[data-theme="dark"] .theme-toggle:hover,
[data-theme="dark"] .theme-toggle:focus-visible {
    background: rgba(42, 150, 162, .16);
    color: #2EA5B2;
}

[data-theme="dark"] .theme-toggle:focus-visible {
    outline-color: #2EA5B2;
}


/* ============================================================================
   1. Токены темы. Объявлены на самом <html>, чтобы их видели и база, и острова.
   ============================================================================ */
[data-theme="dark"] {
    --dk-bg: #171C1E;         /* фон страницы            */
    --dk-surface: #202829;    /* карточка, поле, панель  */
    --dk-elev: #283032;       /* поднятая поверхность    */
    --dk-line: #36433F;       /* линия-разделитель       */
    --dk-line-2: #46554F;     /* граница элемента ввода  */
    --dk-text: #E8EDEE;       /* основной текст          */
    --dk-muted: #9FADB0;      /* приглушённый текст      */
    --dk-faint: #6E7C7E;      /* выключенное, ellipsis   */
    --dk-teal: #2EA5B2;       /* ночной teal: ссылка/акцент */
    --dk-teal-hi: #3EB8C4;    /* он же на наведении      */
    --dk-gold: #B8AA73;       /* золото — на тёмном лучше, чем на белом */
    --dk-green: #5FCB9A;      /* «открыто»               */
    --dk-danger: #F1707A;     /* ошибка формы            */
    --dk-on-accent: #0B1214;  /* текст ПОВЕРХ teal/золота */

    /* Родные виджеты браузера (полосы прокрутки, календарь, выпадашки select). */
    color-scheme: dark;
}


/* ============================================================================
   2. База: страница и текст.
      В app.css ни html, ни body фона не задают — белизна была дефолтом браузера.
      Поэтому общий фон ставится одним правилом, без борьбы за специфичность.
   ============================================================================ */
[data-theme="dark"],
[data-theme="dark"] body {
    background-color: var(--dk-bg);
    color: var(--dk-text);
}

[data-theme="dark"] ::selection {
    background: rgba(42, 150, 162, .35);
    color: var(--dk-text);
}

[data-theme="dark"] .title,
[data-theme="dark"] .content h1,
[data-theme="dark"] .content h2,
[data-theme="dark"] .content h3,
[data-theme="dark"] .content h4,
[data-theme="dark"] .content h5,
[data-theme="dark"] .content h6,
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6,
[data-theme="dark"] strong,
[data-theme="dark"] .label {
    color: var(--dk-text);
}

[data-theme="dark"] .subtitle,
[data-theme="dark"] .help,
[data-theme="dark"] .content blockquote {
    color: var(--dk-muted);
}

[data-theme="dark"] hr,
[data-theme="dark"] .navbar-divider {
    background-color: var(--dk-line);
}

[data-theme="dark"] .content blockquote {
    background-color: var(--dk-elev);
    border-left-color: var(--dk-line-2);
}

[data-theme="dark"] code {
    background-color: var(--dk-elev);
    color: #F0A6AE;
}

[data-theme="dark"] pre {
    background-color: var(--dk-elev);
    color: var(--dk-text);
}

[data-theme="dark"] pre code {
    background-color: transparent;
    color: inherit;
}

/* Ссылки. В app.css они синие (#485fc7) и к бренду отношения не имеют —
   в ночном режиме отдаём их ночному teal, он же акцент. */
[data-theme="dark"] a {
    color: var(--dk-teal);
}

[data-theme="dark"] a:hover {
    color: var(--dk-teal-hi);
}

/* Поверх ПОДНЯТОЙ поверхности (#283032) ночной teal даёт 4.58 — норму 4.5
   проходит, но впритык (до DARK-2 было 4.17, то есть НЕ проходило). Там, где
   ссылка ложится именно на неё, всё равно берём светлую ступень — 5.68.
   Внутри .notification и .message-body такого правила не нужно:
   Bulma сама заставляет ссылки наследовать currentColor
   (.notification a:not(.button):not(.dropdown-item){color:currentColor}),
   то есть они получают наш основной светлый текст — 11.40. Проверено замером. */
[data-theme="dark"] .modal-card-head a,
[data-theme="dark"] .modal-card-foot a,
[data-theme="dark"] .has-background-light a {
    color: var(--dk-teal-hi);
}


/* ============================================================================
   3. Поверхности: карточки, панели, уведомления.
   ============================================================================ */
[data-theme="dark"] .box,
[data-theme="dark"] .card,
[data-theme="dark"] .panel,
[data-theme="dark"] .message-body {
    background-color: var(--dk-surface);
    color: var(--dk-text);
    box-shadow: 0 .5em 1em -.125em rgba(0, 0, 0, .45), 0 0 0 1px var(--dk-line);
}

[data-theme="dark"] .card-header {
    box-shadow: 0 .125em .25em rgba(0, 0, 0, .4);
}

[data-theme="dark"] .card-header-title,
[data-theme="dark"] .card-footer-item {
    color: var(--dk-text);
}

[data-theme="dark"] .card-content,
[data-theme="dark"] .card-footer,
[data-theme="dark"] .card-footer-item:not(:last-child) {
    border-color: var(--dk-line);
}

[data-theme="dark"] .notification,
[data-theme="dark"] .message-header {
    background-color: var(--dk-elev);
    color: var(--dk-text);
}

[data-theme="dark"] .section,
[data-theme="dark"] .hero,
[data-theme="dark"] .hero-body,
[data-theme="dark"] .container {
    background-color: transparent;
}

/* Секции Bulma, которым модификатор задаёт светлый фон. */
[data-theme="dark"] .hero.is-white,
[data-theme="dark"] .hero.is-light,
[data-theme="dark"] .section.is-light {
    background-color: var(--dk-bg);
    color: var(--dk-text);
}


/* ============================================================================
   4. Формы. Мимо них не проходит ни вход, ни регистрация, ни форма-стенка
      дайджеста на странице разбора.
   ============================================================================ */
[data-theme="dark"] .input,
[data-theme="dark"] .textarea,
[data-theme="dark"] .select select,
[data-theme="dark"] .file-name {
    background-color: var(--dk-surface);
    border-color: var(--dk-line-2);
    color: var(--dk-text);
}

[data-theme="dark"] .input::placeholder,
[data-theme="dark"] .textarea::placeholder {
    color: #8B999C;
}

[data-theme="dark"] .input:hover,
[data-theme="dark"] .textarea:hover,
[data-theme="dark"] .select select:hover {
    border-color: #55645F;
}

[data-theme="dark"] .input:focus,
[data-theme="dark"] .textarea:focus,
[data-theme="dark"] .select select:focus,
[data-theme="dark"] .input.is-active,
[data-theme="dark"] .textarea.is-active {
    border-color: var(--dk-teal);
    box-shadow: 0 0 0 .125em rgba(42, 150, 162, .28);
}

[data-theme="dark"] .input[disabled],
[data-theme="dark"] .textarea[disabled],
[data-theme="dark"] .select select[disabled] {
    background-color: var(--dk-elev);
    border-color: var(--dk-line);
    color: var(--dk-faint);
}

/* Стрелка у <select> и у пункта меню с выпадашкой. */
[data-theme="dark"] .select:not(.is-multiple):not(.is-loading):after,
[data-theme="dark"] .navbar-link:not(.is-arrowless):after {
    border-color: var(--dk-teal);
}

[data-theme="dark"] .checkbox:hover,
[data-theme="dark"] .radio:hover {
    color: var(--dk-teal-hi);
}

[data-theme="dark"] .input.is-danger,
[data-theme="dark"] .textarea.is-danger,
[data-theme="dark"] .select.is-danger select {
    border-color: var(--dk-danger);
}

[data-theme="dark"] .help.is-danger {
    color: var(--dk-danger);
}


/* ============================================================================
   5. Кнопки. Дефолтная .button в app.css — белая с серой рамкой,
      а .button.is-primary проектом переопределена в светло-серую (#d9dbdb).
   ============================================================================ */
[data-theme="dark"] .button {
    background-color: var(--dk-elev);
    border-color: var(--dk-line-2);
    color: var(--dk-text);
}

[data-theme="dark"] .button:hover,
[data-theme="dark"] .button.is-hovered {
    background-color: #2A3335;
    border-color: #55645F;
    color: var(--dk-text);
}

[data-theme="dark"] .button:focus,
[data-theme="dark"] .button.is-focused {
    border-color: var(--dk-teal);
    color: var(--dk-text);
}

[data-theme="dark"] .button:focus:not(:active) {
    box-shadow: 0 0 0 .125em rgba(42, 150, 162, .28);
}

[data-theme="dark"] .button[disabled],
[data-theme="dark"] .button.is-static {
    background-color: var(--dk-elev);
    border-color: var(--dk-line);
    color: var(--dk-faint);
}

/* Главное действие — ночной teal с тёмным текстом (5.39). */
[data-theme="dark"] .button.is-primary {
    background-color: var(--dk-teal);
    border-color: transparent;
    color: var(--dk-on-accent);
}

[data-theme="dark"] .button.is-primary:hover,
[data-theme="dark"] .button.is-primary.is-hovered {
    background-color: var(--dk-teal-hi);
    color: var(--dk-on-accent);
}

[data-theme="dark"] .button.is-light,
[data-theme="dark"] .button.is-white {
    background-color: var(--dk-elev);
    border-color: var(--dk-line-2);
    color: var(--dk-text);
}

[data-theme="dark"] .button.is-light:hover,
[data-theme="dark"] .button.is-white:hover {
    background-color: #2A3335;
    color: var(--dk-text);
}

[data-theme="dark"] .button.is-text {
    color: var(--dk-teal);
}


/* ============================================================================
   6. Навбар. Свои цвета пунктов задаёт navbar.css (NAV-E3); он подключён
      этим же файлом ВЫШЕ нас, поэтому перебивается без !important.
   ============================================================================ */
[data-theme="dark"] .navbar,
[data-theme="dark"] .navbar-menu,
[data-theme="dark"] .navbar-dropdown {
    background-color: var(--dk-surface);
}

[data-theme="dark"] .navbar {
    border-bottom-color: var(--dk-line);
}

[data-theme="dark"] .navbar-dropdown {
    border-top-color: var(--dk-line-2);
}

[data-theme="dark"] .navbar-item,
[data-theme="dark"] .navbar-link,
[data-theme="dark"] .navbar-burger,
[data-theme="dark"] .navbar .navbar-end .navbar-item,
[data-theme="dark"] .navbar .navbar-end .navbar-link {
    color: var(--dk-text);
}

[data-theme="dark"] .navbar-brand .navbar-item .content {
    color: var(--dk-text);
}

[data-theme="dark"] a.navbar-item:hover,
[data-theme="dark"] a.navbar-item:focus,
[data-theme="dark"] a.navbar-item.is-active,
[data-theme="dark"] .navbar-link:hover,
[data-theme="dark"] .navbar-link:focus,
[data-theme="dark"] .navbar .navbar-end > .navbar-item > a.navbar-item:hover,
[data-theme="dark"] .navbar .navbar-end > .navbar-item > a.navbar-item:focus,
[data-theme="dark"] .navbar .navbar-end > .navbar-item > a.navbar-item:focus-within {
    background-color: transparent;
    color: var(--dk-teal-hi);
}

[data-theme="dark"] .navbar-dropdown a.navbar-item:hover,
[data-theme="dark"] .navbar-dropdown a.navbar-item:focus {
    background-color: var(--dk-elev);
    color: var(--dk-teal-hi);
}

[data-theme="dark"] .navbar-burger:hover {
    background-color: rgba(255, 255, 255, .06);
}

[data-theme="dark"] .navbar-brand a.navbar-item:hover,
[data-theme="dark"] .navbar-brand a.navbar-item:focus {
    background-color: transparent;
}

/* Знак НаучОбзора — одноцветный SVG (#2B2A29 и обводка, и цифры «404»),
   вставлен через <img>, поэтому CSS не может перекрасить его изнутри.
   На тёмной панели он исчезал бы совсем. Инверсия здесь безопасна ровно
   потому, что цвет в файле ОДИН: #2B2A29 -> #D4D5D6, никаких искажений
   оттенка быть не может. Если владелец предпочтёт отдельный светлый файл
   логотипа — это правило снимается одной строкой. */
[data-theme="dark"] .navbar-brand .navbar-item img {
    filter: invert(1);
}


/* ============================================================================
   7. Подвал, таблицы, модалка, выпадашка, крошки, теги, пагинация, вкладки.
   ============================================================================ */
[data-theme="dark"] .footer {
    background-color: var(--dk-surface);
    color: var(--dk-muted);
    border-top: 1px solid var(--dk-line);
}

[data-theme="dark"] .footer .content {
    color: var(--dk-muted);
}

[data-theme="dark"] .table {
    background-color: var(--dk-surface);
    color: var(--dk-text);
}

[data-theme="dark"] .table td,
[data-theme="dark"] .table th,
[data-theme="dark"] .content table td,
[data-theme="dark"] .content table th {
    border-color: var(--dk-line);
    color: var(--dk-text);
}

[data-theme="dark"] .table thead td,
[data-theme="dark"] .table thead th {
    color: var(--dk-text);
}

[data-theme="dark"] .table.is-striped tbody tr:not(.is-selected):nth-child(2n) {
    background-color: var(--dk-elev);
}

[data-theme="dark"] .table tbody tr:not(.is-selected):hover {
    background-color: var(--dk-elev);
}

[data-theme="dark"] .modal-card-head,
[data-theme="dark"] .modal-card-foot {
    background-color: var(--dk-elev);
    border-color: var(--dk-line);
}

[data-theme="dark"] .modal-card-title {
    color: var(--dk-text);
}

[data-theme="dark"] .modal-card-body {
    background-color: var(--dk-surface);
    color: var(--dk-text);
}

[data-theme="dark"] .dropdown-content {
    background-color: var(--dk-surface);
    box-shadow: 0 .5em 1em -.125em rgba(0, 0, 0, .5), 0 0 0 1px var(--dk-line);
}

[data-theme="dark"] .dropdown-item {
    color: var(--dk-text);
}

[data-theme="dark"] a.dropdown-item:hover,
[data-theme="dark"] .dropdown-item.is-active {
    background-color: var(--dk-elev);
    color: var(--dk-teal-hi);
}

[data-theme="dark"] .dropdown-divider {
    background-color: var(--dk-line);
}

[data-theme="dark"] .breadcrumb a {
    color: var(--dk-teal);
}

[data-theme="dark"] .breadcrumb li.is-active a {
    color: var(--dk-muted);
}

[data-theme="dark"] .breadcrumb li + li:before {
    color: var(--dk-faint);
}

[data-theme="dark"] .tag:not(body) {
    background-color: var(--dk-elev);
    color: var(--dk-text);
}

[data-theme="dark"] .pagination-link,
[data-theme="dark"] .pagination-next,
[data-theme="dark"] .pagination-previous {
    background-color: var(--dk-surface);
    border-color: var(--dk-line-2);
    color: var(--dk-text);
}

[data-theme="dark"] .pagination-link:hover,
[data-theme="dark"] .pagination-next:hover,
[data-theme="dark"] .pagination-previous:hover {
    border-color: var(--dk-teal);
    color: var(--dk-teal-hi);
}

[data-theme="dark"] .pagination-link.is-current {
    background-color: var(--dk-teal);
    border-color: var(--dk-teal);
    color: var(--dk-on-accent);
}

[data-theme="dark"] .pagination-ellipsis {
    color: var(--dk-faint);
}

[data-theme="dark"] .tabs a {
    border-bottom-color: var(--dk-line);
    color: var(--dk-muted);
}

[data-theme="dark"] .tabs a:hover {
    border-bottom-color: var(--dk-teal);
    color: var(--dk-text);
}

[data-theme="dark"] .tabs li.is-active a {
    border-bottom-color: var(--dk-teal);
    color: var(--dk-teal-hi);
}

[data-theme="dark"] .menu-list a {
    color: var(--dk-text);
}

[data-theme="dark"] .menu-list a:hover {
    background-color: var(--dk-elev);
    color: var(--dk-teal-hi);
}


/* ============================================================================
   8. Полоса-заголовок (layouts/breadcrumbs.blade.php) — 20 страниц.
      Белый фон вписан ИНЛАЙНОВЫМ атрибутом style, поэтому здесь !important
      неизбежен. Сам атрибут снимать нельзя: под ним лежит битое правило
      .breadcrumbs{background-image:url(/public/images/breadcrumbs.jpg)} —
      см. трек HERO-FLAT.
   ============================================================================ */
[data-theme="dark"] .hero.breadcrumbs {
    background-color: var(--dk-bg) !important;
    background-image: none !important;
    border-bottom: 1px solid var(--dk-line);
}

[data-theme="dark"] .hero.breadcrumbs .title,
[data-theme="dark"] .hero.breadcrumbs .subtitle {
    color: var(--dk-text);
}


/* ============================================================================
   9. Заслонка платного текста.
      🔴 Сама заслонка НЕ снимается — она физически закрывает обрезанный текст
      и служит границей платного. Меняется ТОЛЬКО цвет тумана: белый градиент
      на тёмном фоне выглядел бы светлым пятном.
   ============================================================================ */
[data-theme="dark"] .hide-content {
    background: #171C1E;
    background: linear-gradient(0deg, #171C1E 0%, rgba(23, 28, 30, 0) 100%);
}

[data-theme="dark"] .hide-content i {
    color: var(--dk-muted);
}


/* ============================================================================
   10. Семь утилит Bulma, реально встречающихся в шаблонах. Все объявлены
       в app.css с !important — бить их можно только тем же.
       has-text-white и has-background-black-bis не трогаем: они и так светлый
       текст / тёмный фон, в ночном режиме ведут себя правильно.
   ============================================================================ */
[data-theme="dark"] .has-text-black,
[data-theme="dark"] .has-text-dark {
    color: var(--dk-text) !important;
}

[data-theme="dark"] .has-text-grey {
    color: var(--dk-muted) !important;
}

[data-theme="dark"] .has-text-danger {
    color: var(--dk-danger) !important;
}

[data-theme="dark"] .has-background-light {
    background-color: var(--dk-elev) !important;
}

[data-theme="dark"] .has-background-white {
    background-color: var(--dk-surface) !important;
}


/* ============================================================================
   11. Иллюстрации в статье и лайтбокс (article-media.css).
       Сами картинки не трогаем — это решение зафиксировано в отчёте разведки.
       Перекрашивается только подпись.
   ============================================================================ */
[data-theme="dark"] .content figure figcaption {
    color: var(--dk-muted);
}

/* Лайтбокс уже тёмный, ему хватает подложки — правим только рамку фокуса. */
[data-theme="dark"] .amlb__close:focus {
    box-shadow: 0 0 0 2px var(--dk-teal-hi);
}


/* ============================================================================
   12. Кнопка «наверх» (layouts/partials/scroll-top.blade.php).
       Её стили живут в инлайновом <style>, который подключается ПОЗЖЕ этого
       файла (footer идёт после navigation). Поэтому берём специфичностью:
       [data-theme] .up404 — два селектора против одного.
   ============================================================================ */
[data-theme="dark"] .up404 {
    background: var(--dk-elev);
    color: var(--dk-teal-hi);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .5), 0 1px 3px rgba(0, 0, 0, .4);
}

[data-theme="dark"] .up404:hover {
    background: #2A3335;
}

[data-theme="dark"] .up404:focus-visible {
    outline-color: var(--dk-teal-hi);
}

[data-theme="dark"] .up404-track {
    stroke: var(--dk-line-2);
}

[data-theme="dark"] .up404-prog {
    stroke: var(--dk-teal-hi);
}


/* ============================================================================
   13. ОСТРОВА. Палитра в проекте скопирована ЧЕТЫРЕЖДЫ и под разными именами:
       один и тот же #175861 зовётся --teal-dark на главной и --teal-hover
       в трёх других местах. Поэтому переопределяем все четыре набора.
       Специфичность [data-theme="dark"] .home-v2 (0,2,0) выше, чем .home-v2.
   ============================================================================ */

/* --- 13.1 главная: .home-v2 (25 переменных) -------------------------------- */
[data-theme="dark"] .home-v2 {
    --teal: var(--dk-teal);
    --teal-dark: var(--dk-teal-hi);
    --teal-soft: #173238;
    --accent-soft: var(--dk-gold);
    --dark: var(--dk-elev);
    --text: var(--dk-text);
    --muted: var(--dk-muted);
    --line: var(--dk-line);
    --line-dark: #4A5A59;
    --tint: #161D1F;
    --white: var(--dk-surface);
    --focus-ring: var(--dk-teal-hi);
    --shadow-soft: 0 18px 50px rgba(0, 0, 0, .45);
}

/* Текст поверх бирюзы: --white теперь тёмная поверхность, поэтому кнопкам
   и чипам он не годится — им нужен ночной «на акценте». */
[data-theme="dark"] .home-v2 .primary-button,
[data-theme="dark"] .home-v2 .primary-button:hover,
[data-theme="dark"] .home-v2 .confidence-chip,
[data-theme="dark"] .home-v2 .final-cta .primary-button {
    color: var(--dk-on-accent);
}

/* Финальная полоса — тёмная лента и в дневном режиме (background: var(--dark)),
   текст в ней задан через var(--white) и обязан остаться светлым. */
[data-theme="dark"] .home-v2 .final-cta,
[data-theme="dark"] .home-v2 .final-cta h2,
[data-theme="dark"] .home-v2 .final-cta-copy,
[data-theme="dark"] .home-v2 .final-cta-note {
    color: var(--dk-text);
}

[data-theme="dark"] .home-v2 .final-cta .primary-button {
    border-color: rgba(232, 237, 238, .30);
}

/* Стеклянные подложки карточек: белая плёнка на тёмном светилась бы. */
[data-theme="dark"] .home-v2 .audience-card,
[data-theme="dark"] .home-v2 .solution-card {
    background: rgba(27, 34, 36, .76);
    border-color: rgba(42, 150, 162, .22);
}

[data-theme="dark"] .home-v2 .benefit-card {
    background: rgba(27, 34, 36, .68);
}

/* Зарубежный тариф и коробка-сноска — светлые литералы мимо переменных. */
[data-theme="dark"] .home-v2 .pricing-intl {
    background: var(--dk-elev);
    color: var(--dk-muted);
}

[data-theme="dark"] .home-v2 .course-note {
    background: var(--dk-elev);
}

/* Метки доступа в блоке «Дайджест» на главной. */
[data-theme="dark"] .home-v2 .home-digest-lock.is-reg {
    border-color: #4A4230;
    background: #2E2A1C;
    color: #D8C98A;
}

[data-theme="dark"] .home-v2 .home-digest-lock.is-sub {
    border-color: var(--dk-line);
    background: #242C2E;
    color: var(--dk-muted);
}


/* --- 13.2 каталог: .catalog-v2 (11 переменных) ----------------------------- */
[data-theme="dark"] .catalog-v2 {
    --teal: var(--dk-teal);
    --teal-hover: var(--dk-teal-hi);
    --gold: var(--dk-gold);
    --ink: var(--dk-text);
    --muted: var(--dk-muted);
    --line: var(--dk-line);
    --tint: #161D1F;
    --white: var(--dk-surface);
    --shadow-hover: 0 10px 30px rgba(0, 0, 0, .5);
}

/* Текст поверх бирюзы и золота. --ink стал светлым, а на золоте нужен тёмный. */
[data-theme="dark"] .catalog-v2 .catalog-switch-btn.is-active,
[data-theme="dark"] .catalog-v2 .cat-badge.is-open,
[data-theme="dark"] .catalog-v2 .cat-more:hover,
[data-theme="dark"] .catalog-v2 .cat-badge.is-reg {
    color: var(--dk-on-accent);
}

/* Плашка «по подписке» лежит поверх обложки — оставляем светлый текст,
   но затемняем саму плёнку. */
[data-theme="dark"] .catalog-v2 .cat-badge.is-sub {
    background: rgba(0, 0, 0, .66);
    color: #FFFFFF;
}

[data-theme="dark"] .catalog-v2 .cat-year-title {
    border-bottom-color: var(--dk-line-2);
}

[data-theme="dark"] .catalog-v2 .cat-year-title .cat-year-count {
    color: var(--dk-muted);
}

/* Единственный блок подписки (VIT-2a) — свой набор литералов #1F6F78/#175861. */
[data-theme="dark"] #subscription .button.is-primary {
    border-color: var(--dk-teal);
    background-color: var(--dk-teal);
    color: var(--dk-on-accent);
}

[data-theme="dark"] #subscription .button.is-primary:hover {
    background-color: var(--dk-teal-hi);
    border-color: var(--dk-teal-hi);
    color: var(--dk-on-accent);
    box-shadow: 0 10px 22px rgba(0, 0, 0, .5);
}

[data-theme="dark"] #subscription .button.is-primary:focus:not(:active) {
    border-color: var(--dk-teal-hi);
}


/* --- 13.3 полоса-вход «Дайджест» в каталоге: .cat-digest ------------------- */
/*     Вложенная ЧЕТВЁРТАЯ копия палитры, объявлена внутри catalog.css.       */
[data-theme="dark"] .cat-digest {
    --teal: var(--dk-teal);
    --teal-hover: var(--dk-teal-hi);
    --ink: var(--dk-text);
    --muted: var(--dk-muted);
    --line: var(--dk-line);
    --white: var(--dk-surface);
}

[data-theme="dark"] .cat-digest-lock.is-reg {
    color: #D8C98A;
    background: #2E2A1C;
    border-color: #4A4230;
}

[data-theme="dark"] .cat-digest-lock.is-sub {
    color: var(--dk-muted);
    background: #242C2E;
    border-color: var(--dk-line);
}


/* --- 13.4 дайджест: .svezhee-v2 (9 переменных) ----------------------------- */
[data-theme="dark"] .svezhee-v2 {
    --teal: var(--dk-teal);
    --teal-hover: var(--dk-teal-hi);
    --gold: var(--dk-gold);
    --ink: var(--dk-text);
    --muted: var(--dk-muted);
    --line: var(--dk-line);
    --tint: #161D1F;
    --white: var(--dk-surface);
}

/* Суть карточки — это ТЕЛО текста, у него был свой литерал #34403F.
   Без этого правила короткие разборы в ночном режиме не читались бы вовсе. */
[data-theme="dark"] .svezhee-v2 .sv-summary {
    color: var(--dk-text);
}

[data-theme="dark"] .svezhee-v2 .sv-tag {
    color: #6FA9B1;
}

/* Плашки доступа ленты. */
[data-theme="dark"] .svezhee-v2 .sv-badge.is-open {
    background: #16281F;
    color: var(--dk-green);
}

[data-theme="dark"] .svezhee-v2 .sv-badge.is-reg {
    background: #2E2A1C;
    color: #D8C98A;
}

[data-theme="dark"] .svezhee-v2 .sv-badge.is-sub {
    background: #242C2E;
    color: var(--dk-muted);
}

/* Зелёные подтверждения «скопировано». */
[data-theme="dark"] .svezhee-v2 .sv-share-ok,
[data-theme="dark"] .svezhee-v2 .sv-share-note {
    color: var(--dk-green);
}

[data-theme="dark"] .svezhee-v2 .sv-pager-btn.is-off {
    color: var(--dk-faint);
}

/* Текст поверх бирюзы. */
[data-theme="dark"] .svezhee-v2 .sv-switch-btn.is-active,
[data-theme="dark"] .svezhee-v2 .sv-gate-btn,
[data-theme="dark"] .svezhee-v2 .sv-gate-btn:hover,
[data-theme="dark"] .svezhee-v2 .sv-share-copy {
    color: var(--dk-on-accent);
}

/* Кружки «поделиться» — фон у них фирменный цвет площадки (в т. ч. чёрный),
   значок обязан остаться светлым, иначе на #000 он исчезнет. Берём ровно тот
   белый, что был в дневной теме (var(--white) = #fff): у серых кружков «Почта»
   и «Ещё» контраст и там ниже 3.0, и менять его — отдельный разговор, не тема
   ночного режима. */
[data-theme="dark"] .svezhee-v2 .sv-sbtn-ico {
    color: #FFFFFF;
}


/* ============================================================================
   DARK-2. Полировка по итогам приёмки первой тёмной темы.
   Шесть мест, каждое — по факту замера, а не на глаз (разведка DARK-2).
   ============================================================================ */

/* 14. Каталог: карточка — это ссылка целиком (<a class="cat-card">), поэтому
   на неё действует общее правило [data-theme="dark"] a:hover (0,2,1). Оно бьёт
   catalog.css .catalog-v2 a{color:inherit} (0,1,1), и при наведении бирюзовым
   заливался весь текст карточки, который цвет не задаёт сам. Возвращаем тексту
   основной цвет в обоих состояниях, а бирюзу отдаём ровно заголовку — там она
   и читается как «сюда веду». */
[data-theme="dark"] .catalog-v2 a.cat-card,
[data-theme="dark"] .catalog-v2 a.cat-card:hover {
    color: var(--dk-text);
}

[data-theme="dark"] .catalog-v2 a.cat-card:hover h3 {
    color: var(--dk-teal-hi);
}

/* 15. Аудиоплеер. Его стили — scoped-блок Vue: он не в app.css, а строкой
   внутри public/js/app.js и вставляется <style>-тегом в <head> во время
   выполнения. Значит, он идёт РАНЬШЕ нас (dark.css живёт в <body>), а
   специфичность .audio-player-container[data-v-6c6cbdf6] и нашего селектора
   одинаковая (0,2,0) — при равной побеждает более поздний, то есть мы.
   Ни хеш data-v, ни пересборка Mix не нужны — проверено замером порядка
   таблиц стилей на живой странице. */
[data-theme="dark"] .audio-player-container {
    background-color: var(--dk-elev);
    border-color: var(--dk-line-2);
}

[data-theme="dark"] .audio-player-container select {
    background-color: var(--dk-surface);
    color: var(--dk-text);
    border-color: var(--dk-line-2);
}

/* 16. Отзывы на главной: роль под именем задана литералом
   rgba(26, 29, 30, 0.78) мимо переменных острова — на тёмной карточке это
   почти невидимо. */
[data-theme="dark"] .home-v2 .author-role {
    color: var(--dk-muted);
}

/* 17. Редакционная врезка «оценка уверенности» в теле статьи.
   Опознаётся по инлайновому #f3f4f6 — по базе это значение стоит ТОЛЬКО на
   <div> и ровно по одному разу в каждой из 37 статей, то есть служебное.
   Осмысленные подсветки редактора живут на <span> и сюда не попадают.
   !important неизбежен: цвет вписан в атрибут style=. */
[data-theme="dark"] .content div[style*="#f3f4f6"] {
    background-color: var(--dk-elev) !important;
    border-color: var(--dk-line-2) !important;
}

[data-theme="dark"] .content div[style*="#f3f4f6"] span[style*="#6b7280"] {
    color: var(--dk-muted) !important;
}

[data-theme="dark"] .content div[style*="#f3f4f6"] span[style*="#ba372a"] {
    color: var(--dk-danger) !important;
}

/* 18. Таблицы в теле статьи. Тегов <th> в статьях нет вовсе (0 на 56 статей):
   шапка — обычный <tr> с инлайновым фоном, рамки ячеек — инлайновые, в двух
   написаниях сразу (#000 и solid black). Оба перебиваем. */
[data-theme="dark"] .content table tr[style*="#fff3cd"] {
    background-color: var(--dk-elev) !important;
}

[data-theme="dark"] .content table td[style*="#000"],
[data-theme="dark"] .content table td[style*="solid black"] {
    border-color: var(--dk-line-2) !important;
}

/* 19. Осмысленные подсветки редактора: <span> со своим фоном. Сам фон НЕ
   трогаем — это авторский смысл, а не тема. Но текст на нём унаследовал бы
   наш светлый и пропал, поэтому внутри такой подсветки возвращаем тёмные
   чернила. */
[data-theme="dark"] .content span[style*="background"] {
    color: #1A1D1E !important;
}


/* ============================================================================
   DARK-2b. Добивка по фактам разведки DARK-2b.

   🔴 Ключевое наблюдение: Vue (#app компилируется целиком) переписывает
   инлайновый style в нормализованный вид — hex-цвет становится rgb(...):
       #f3f4f6 -> rgb(243, 244, 246)   #6b7280 -> rgb(107, 114, 128)
       #ba372a -> rgb(186, 55, 42)     #fff3cd -> rgb(255, 243, 205)
       #000    -> rgb(0, 0, 0)
   Селекторы по hex (блок DARK-2 выше) попадают ТОЛЬКО в окне до монтирования
   Vue — поэтому их НЕ убираем (иначе мигание при загрузке), а дублируем тем же
   объявлением по нормализованному написанию. Имя свойства (`background`) и
   ключевое слово `black` нормализация НЕ трогает — те правила уже работают
   в обеих фазах и здесь не повторяются.
   ============================================================================ */

/* 20. Каталог «по выпускам»: ночной аналог белой подсветки карточки.
   Факты разведки:
     — app.css .product-item:hover{background-color:#fff;color:#4a4a4a} (0,2,0),
       не темизирован — перебиваем поднятой поверхностью, специфичность (0,3,0);
     — app.css a.has-text-black:hover{color:#000!important} (0,2,1) бьёт
       [data-theme="dark"] .has-text-black (0,2,0) и чернит текст на наведении.
       Наш [data-theme="dark"] a.has-text-black:hover — (0,3,1)!important, выше.
   Накрывает все три has-text-black строки: год (.cat-year-title),
   выпуск (.release-title) и заголовок статьи в карточке (a.has-text-black). */
[data-theme="dark"] .product-item:hover {
    background-color: var(--dk-elev);
    color: var(--dk-text);
}

[data-theme="dark"] a.has-text-black:hover,
[data-theme="dark"] a.has-text-black:focus {
    color: var(--dk-text) !important;
}

/* 21. Врезка «оценка уверенности» — нормализованное написание рядом с hex. */
[data-theme="dark"] .content div[style*="rgb(243, 244, 246)"] {
    background-color: var(--dk-elev) !important;
    border-color: var(--dk-line-2) !important;
}

[data-theme="dark"] .content div[style*="rgb(243, 244, 246)"] span[style*="rgb(107, 114, 128)"] {
    color: var(--dk-muted) !important;
}

/* Вердикт живёт ВНУТРИ врезки (разведка: <span style="color:#ba372a"> — второй
   абзац того же div.mt-6, самостоятельного div с этим цветом нет). Поэтому
   селектор только вложенный; отдельный div[...186, 55, 42...] не добавляем. */
[data-theme="dark"] .content div[style*="rgb(243, 244, 246)"] span[style*="rgb(186, 55, 42)"] {
    color: var(--dk-danger) !important;
}

/* 22. Таблицы — нормализованное написание рядом с hex.
   tr #fff3cd -> rgb(255, 243, 205); td #000 -> rgb(0, 0, 0).
   td[style*="solid black"] и span[style*="background"] нормализацию переживают
   и уже работают (блок DARK-2) — здесь их не дублируем. */
[data-theme="dark"] .content table tr[style*="rgb(255, 243, 205)"] {
    background-color: var(--dk-elev) !important;
}

[data-theme="dark"] .content table td[style*="rgb(0, 0, 0)"] {
    border-color: var(--dk-line-2) !important;
}
