/* ═══════════════════════════════════════════════════════════════
   ТЕМНА ТЕМА: ГЛУШНИК БЛИСКУ.

   Проблема: сторінки будувались під світлу тему, де глянець, м'яке
   світіння й пульсація читаються як «жвавий інтерфейс». У темряві
   те саме поводиться інакше:

     • нескінченна пульсація — єдиний рухомий об'єкт на темному
       екрані, тому тягне погляд сильніше за сам контент;
     • «shimmer»-відблиск — світла смуга, що їздить по темному тлі;
     • box-shadow чорним по чорному не видно взагалі: тінь не
       відділяє блок, а лише розмиває його межу;
     • кольорові glow і radial-gradient дають брудні плями.

   Файл нічого не перефарбовує — лише гасить рух і зайвий блиск, а
   там, де тінь була єдиною межею блоку, ставить тонку світлу лінію.
   Підключається ОСТАННІМ (з футера), щоб перекривати посторінкові
   стилі без !important там, де вистачає порядку.

   Спінери завантаження (spin, pnSpin) навмисно НЕ чіпаємо: вони
   несуть сенс «іде робота», а не прикрашають.
   ══════════════════════════════════════════════════════════════ */

/* ── 1. РУХ ────────────────────────────────────────────────────
   Глушимо саме декоративні нескінченні анімації, поіменно. */
body.dark-mode .notification-dot,
body.dark-mode .notification-badge,
body.dark-mode .admin-badge,
body.dark-mode .menu-new,
body.dark-mode .mc-badge,
body.dark-mode .badge-icon,
body.dark-mode .pulse,
body.dark-mode .live-dot,
body.dark-mode [class*="-pulse"],
body.dark-mode [class*="pulse-"],
body.dark-mode [class*="shimmer"],
body.dark-mode [class*="glow"] {
    animation: none !important;
}

/* Псевдоелементи, якими малюють відблиск і світіння. */
body.dark-mode .menu-new::before,
body.dark-mode .menu-new::after,
body.dark-mode .block_of_menu::before,
body.dark-mode .tab-btn::before,
body.dark-mode .btn::before,
body.dark-mode .mix-cta::before,
body.dark-mode .promo::before,
body.dark-mode .ph-promo::before {
    animation: none !important;
    opacity: 0 !important;
}

/* Тло сторінки: обертові кольорові плями під контентом. */
body.dark-mode::before,
body.dark-mode::after,
body.dark-mode body::before {
    animation: none !important;
    opacity: 0 !important;
}

/* Пошана до системного «менше руху» — і в темній, і в світлій. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

/* ── 2. ТІНІ ───────────────────────────────────────────────────
   Чорна тінь на темному тлі невидима, тому блок «розчиняється».
   Прибираємо її, а межу лишаємо за рамкою. Точково, по контейнерах,
   а не глобальним `* { box-shadow:none }` — інакше зникли б і
   потрібні підсвітки фокуса. */
body.dark-mode .card,
body.dark-mode .panel,
body.dark-mode .test-item-card,
body.dark-mode .test-card,
body.dark-mode .test-item,
body.dark-mode .cat-item,
body.dark-mode .article,
body.dark-mode .sess-item,
body.dark-mode .tabs,
body.dark-mode .topic-chip,
body.dark-mode .badge,
body.dark-mode .promo,
body.dark-mode .ph-promo,
body.dark-mode .mix-cta,
body.dark-mode .ms-modal__dialog {
    box-shadow: none;
}

/* Там, де тінь була єдиним відділенням від тла, ставимо лінію.
   Картку тесту сюди НЕ включаємо: її рамку й тінь задає
   assets/common/test-card.css через змінні --tc-line / --tc-sh
   (там !important), і два джерела рамки лише конфліктували б. */
body.dark-mode .card,
body.dark-mode .panel,
body.dark-mode .cat-item,
body.dark-mode .sess-item {
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Наведення: підняття лишаємо (воно корисне), важку тінь — ні. */
body.dark-mode .cat-item:hover,
body.dark-mode .card:hover,
body.dark-mode .article:hover {
    box-shadow: none;
    border-color: rgba(255, 255, 255, 0.16);
}

/* ── 3. ФОКУС ──────────────────────────────────────────────────
   Обведення фокуса — навпаки, має бути помітним: у темряві світлий
   контур єдиний спосіб зрозуміти, де зараз клавіатура. */
body.dark-mode :focus-visible {
    outline: 2px solid #7cc4e8;
    outline-offset: 2px;
}

/* ── 4. РЕКЛАМНІ БАНЕРИ ────────────────────────────────────────
   Банери «Відеокурси / КРОК-хаб» (.ad-*, у testView) і «Біохімічна
   база» (.bxb-*, PromoBiochemBanner) намальовані світло-блакитними
   градієнтами #e8f4fd → #f0f8ff. Це найбільша пляма на сторінці, і
   в темряві вона світиться як ліхтар посеред тексту.

   Переводимо на глибокий синій тієї самої родини: фон темніє, а
   текст і кнопка світлішають рівно настільки, щоб лишитись
   акцентом, а не сліпити. Кольорові «фігурки» (органи, молекули)
   не перефарбовуємо — лише приглушуємо яскравість, бо вони й у
   темряві читаються, просто занадто дзвінкі. */

/* Полотно банера. */
body.dark-mode .ad-banner,
body.dark-mode .bxb {
    background: linear-gradient(170deg, #101c2b 0%, #13202f 50%, #0f1a27 100%);
}

/* Крапкова сітка й м'які відблиски по краях. */
body.dark-mode .ad-banner::before,
body.dark-mode .bxb::before {
    background-image:
        radial-gradient(circle, rgba(125, 185, 232, .10) 1.5px, transparent 1.5px),
        radial-gradient(circle, rgba(125, 185, 232, .06) 1px, transparent 1px);
}
body.dark-mode .ad-banner::after,
body.dark-mode .bxb::after {
    background:
        linear-gradient(180deg, rgba(10, 18, 28, .55) 0%, transparent 20%),
        linear-gradient(0deg,   rgba(10, 18, 28, .55) 0%, transparent 20%);
}
body.dark-mode .ad-glow-l { background: radial-gradient(ellipse, rgba(96, 165, 250, .13) 0%, transparent 65%); }
body.dark-mode .ad-glow-r { background: radial-gradient(ellipse, rgba(251, 191, 36, .09) 0%, transparent 65%); }

/* Картка з текстом: була майже білою з блюром. У біохімічному
   банері вона зветься .bxb-center — саме її було пропущено, і на
   темному тлі лишався світлий скляний прямокутник. */
body.dark-mode .ad-banner-card,
body.dark-mode .bxb-center {
    background: rgba(17, 27, 40, .82);
    border-color: rgba(255, 255, 255, .12);
    box-shadow: none;
}

/* Молекули в біохімічному банері літали (bxFloat) І оберталися
   (bxSpin) одночасно, нескінченно — саме це й читалось як метушня.
   Лишаємо їх на місці, але нерухомими: банер має привертати увагу
   змістом, а не каруселлю. */
body.dark-mode .bxb-mol,
body.dark-mode .bxb-mol img {
    animation: none !important;
}
body.dark-mode .bxb-mol img { filter: none; }

/* Текст. Заголовок #0d47a1 на темному був майже невидимий. */
body.dark-mode .ad-banner-label,
body.dark-mode .bxb-eyebrow { color: #7cc0f0; opacity: .9; }
body.dark-mode .ad-banner-title,
body.dark-mode .bxb-title   { color: #eaf3fb; }
body.dark-mode .ad-banner-sub,
body.dark-mode .bxb-sub     { color: #a8c4dc; opacity: .85; }

/* Кнопка: лишається синьою, але без важкого світіння. */
body.dark-mode .ad-banner-btn,
body.dark-mode .bxb-btn {
    background: #2f7fc4;
    box-shadow: none;
}

/* Нижня стрічка з трьома «фічами». */
body.dark-mode .ad-banner-bot,
body.dark-mode .bxb-bot {
    background: rgba(255, 255, 255, .04);
    border-top-color: rgba(255, 255, 255, .09);
}
body.dark-mode .ad-feat,
body.dark-mode .bxb-feat { border-right-color: rgba(255, 255, 255, .07); }
body.dark-mode .ad-feat:hover,
body.dark-mode .bxb-feat:hover { background: rgba(255, 255, 255, .05); }
body.dark-mode .ad-feat-name,
body.dark-mode .bxb-feat-name { color: #cfe2f2; }
body.dark-mode .ad-feat-sub,
body.dark-mode .bxb-feat-sub  { color: #93aec6; opacity: .8; }

/* Фігурки: органи у банері курсів і молекули в біохімічному.
   Кольори лишаємо, гасимо різкість. */
body.dark-mode .ad-organ img,
body.dark-mode .bxb-mol img {
    opacity: .55;
    filter: saturate(.8) brightness(.85);
}
body.dark-mode .ad-feat img,
body.dark-mode .bxb-feat img { opacity: .7; }

/* Підказка під біохімічним банером. */
body.dark-mode .bxb-hint      { color: #93aec6; }
body.dark-mode .bxb-hint-sep  { color: #4a5c6e; }

/* Телеграм-банер — той самий світло-блакитний прямокутник, стоїть
   поруч із біохімічним. */
body.dark-mode .tg-banner {
    background: #141f2c;
    border-color: rgba(255, 255, 255, .10);
    box-shadow: none;
}
body.dark-mode .tg-glow-l { background: radial-gradient(circle, rgba(126, 200, 255, .16) 0%, transparent 70%); }
body.dark-mode .tg-glow-r { background: radial-gradient(circle, rgba(164, 218, 253, .12) 0%, transparent 70%); }
body.dark-mode .tg-title  { color: #eaf3fb; }
body.dark-mode .tg-sub    { color: #a8c4dc; }
body.dark-mode .tg-btn    { background: #2f7fc4; box-shadow: none; }

/* ── БАНЕР «КРОК-ХАБ» ──────────────────────────────────────────
   Четвертий банер, і в нього ВЛАСНИЙ набір класів `.krok-*`, а не
   спільний `.ad-*` — тому попередній прохід його не зачепив: у
   testView лежать ДВА різні банери (`.ad-banner` для відеокурсів і
   `.krok-banner` для хабу), а який показати, вирішує rand(0,1).
   Тобто половину заходів сторінка виглядала нормально, половину —
   світила синьо-зеленим прямокутником. Акцент тут зелений (хаб), а
   не синій — його й тримаємо, лише переводимо в темний діапазон. */
body.dark-mode .krok-banner {
    background: linear-gradient(160deg, #0f1f1c 0%, #12212c 45%, #0f2019 100%);
}
body.dark-mode .krok-banner::before {
    background-image:
        radial-gradient(circle, rgba(125, 200, 232, .09) 1.5px, transparent 1.5px),
        radial-gradient(circle, rgba(134, 209, 150, .08) 1px, transparent 1px);
}
body.dark-mode .krok-banner::after {
    background:
        linear-gradient(180deg, rgba(8, 20, 18, .55) 0%, transparent 20%),
        linear-gradient(0deg,   rgba(8, 20, 18, .55) 0%, transparent 20%);
}
body.dark-mode .krok-glow-l { background: radial-gradient(ellipse, rgba(96, 165, 250, .13) 0%, transparent 65%); }
body.dark-mode .krok-glow-r { background: radial-gradient(ellipse, rgba(102, 187, 106, .12) 0%, transparent 65%); }

/* Скляна картка — була майже білою. */
body.dark-mode .krok-card {
    background: rgba(15, 26, 24, .82);
    border-color: rgba(255, 255, 255, .12);
    box-shadow: none;
}
body.dark-mode .krok-eyebrow { color: #7fd4a0; opacity: .9; }
body.dark-mode .krok-title   { color: #eaf7f0; }
body.dark-mode .krok-sub     { color: #a6c8b8; opacity: .85; }
body.dark-mode .krok-btn     { background: #2f8f52; box-shadow: none; }

/* Нижня стрічка з фічами. */
body.dark-mode .krok-banner-bot {
    background: rgba(255, 255, 255, .04);
    border-top-color: rgba(255, 255, 255, .09);
}
body.dark-mode .krok-feat        { border-right-color: rgba(255, 255, 255, .07); }
body.dark-mode .krok-feat:hover  { background: rgba(255, 255, 255, .05); }
body.dark-mode .krok-feat-icon   { background: rgba(127, 212, 160, .12); border-color: rgba(127, 212, 160, .24); }
body.dark-mode .krok-feat-title  { color: #cfe8d9; }
body.dark-mode .krok-feat-sub    { color: #93b8a4; opacity: .8; }
body.dark-mode .krok-feat-img    { opacity: .7; }

/* Частинки: шість кружечків, кожен зі своєю нескінченною анімацією
   спливання. Лишаємо на місці, але без руху — див. секцію 1. */
body.dark-mode .krok-particle { animation: none !important; opacity: .35; }

/* ── СУПУТНІ СВІТЛІ ЕЛЕМЕНТИ ───────────────────────────────────
   Дрібніші за банери, але з тим самим ґанджем: пастельний фон із
   темним текстом, заданий числом повз змінні теми. */

/* Чипи джерела тесту на картці (КРОК / екзамен / Лікар). */
body.dark-mode .src-krok  { background: rgba(45,212,150,.13); border-color: rgba(45,212,150,.28); color: #7fe0b6; }
body.dark-mode .src-exam  { background: rgba(103,232,249,.12); border-color: rgba(103,232,249,.26); color: #9fdfeb; }
body.dark-mode .src-likar { background: rgba(244,143,177,.13); border-color: rgba(244,143,177,.28); color: #f0a8c4; }

/* Кнопки модалки «Завершити тест». */
body.dark-mode .fc-cancel { background: rgba(255,255,255,.08); color: #e2e8f0; }
body.dark-mode .fc-ok     { background: #b93b3b; color: #fff; }

/* Кнопки під списком тестів (дизайн B). */
body.dark-mode .btn-finish,
body.dark-mode .btn-mistakes,
body.dark-mode .btn-send { box-shadow: none; }
body.dark-mode .explain-area { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.09); }

/* Модалка «Біохімічна база» — відкривається з того самого банера,
   тож без неї півсправи: клікаєш по темному банеру й отримуєш
   білий аркуш. */
body.dark-mode .bxm-photo-frame { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); }
body.dark-mode .bxm-group       { background: rgba(234,179,8,.12); border-color: rgba(234,179,8,.3); }
body.dark-mode .bxm-group-icon  { background: rgba(255,255,255,.1); }
body.dark-mode .bxm-video-link  { background: rgba(96,165,250,.12); border-color: rgba(96,165,250,.28); }
body.dark-mode .bxm-close       { background: rgba(255,255,255,.1); color: #e2e8f0; }
body.dark-mode .bxm-zoom-hint   { background: rgba(15,23,42,.8); color: rgba(255,255,255,.7); }