/* ============================================================
   РЕДИЗАЙН v2 — «спокійна» тема (шавлія + тепле тло).
   Усе строго під .ui-v2 (на <html>). Старий UI недоторканий.
   Вмикається ?ui=new, вимикається ?ui=old.
   КРОК 1: токени + шрифти. Форми компонентів — наступні кроки.
   Зін-дизайн-система (html.ui-z поверх .ui-v2, ds/*.css): правила, які вона
   замінює, загорнуто в маркер @supports (--zin-legacy: 1) { … } — він завжди
   істинний, тож без прапорця ?ui=z вигляд не змінюється; під html.ui-z ці блоки
   вирізає інлайн-скрипт у <head> index.html.
   ============================================================ */

/* ---- Світла тема: нова палітра, мапнута на наявні змінні ---- */
.ui-v2 {
    /* наявні змінні (щоб миттєво перефарбувати компоненти, що їх юзають) */
    --primary: #7c9d85;
    --primary-dark: #5f8069;
    --primary-light: #eaf2e3;
    --bg-white: #fffdfb;
    --bg-light: #f9f6f2;
    --bg-gray: #f5f0ec;
    --text-dark: #2a2622;
    --text-muted: #8a8177;
    --text-light: #a39a90;
    --border-color: #e5ddd5;
    --border-light: #efe7df;
    --link-color: #5f8069;
    --success: #598e2e;
    --success-light: #eaf2e3;
    --danger: #dc4040;
    --danger-light: #fbe3e3;
    --warning-bg: #fdf3ea;
    --warning-border: #f3c9a5;

    /* нові токени дизайн-системи (для майбутніх .ui-v2-компонентів) */
    --paper: #f5f0ec;   --surface: #fffdfb;   --surface-2: #f9f6f2;
    --ink: #2a2622;     --ink-2: #5c544c;     --muted: #8a8177;   --muted-2: #a39a90;
    --border: #e5ddd5;  --border-2: #efe7df;
    --sage: #7c9d85;    --sage-dark: #5f8069; --sage-tint: #f1f6f0; --sage-tint-2: #eaf2e3; --sage-ink: #42604b;
    --orange: #ef8748;  --orange-dark: #c96a2c; --orange-tint: #fdeee2; --orange-tint-2: #fdf3ea; --orange-border: #f3c9a5;
    --green: #598e2e;   --red: #dc4040;       --red-tint: #fbe3e3; --red-ink: #a82f2f;

    /* Onest — увесь інтерфейс; Unbounded 700 — лише великі числа (бал, прогноз). Як у зіні (ds/tokens.css). */
    --font-ui: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-display: 'Unbounded', 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-math: 'Gelasio', Georgia, serif;

    font-family: var(--font-ui);
    background: var(--paper);
    color: var(--ink);
}

.ui-v2 body { background: var(--paper); color: var(--ink); font-family: var(--font-ui); }
/* Кнопки й поля не успадковують шрифт сторінки — без цього «Вийти», «Зберегти», вкладки, ✕ малювалися системним Arial, а не Onest.
   Без :where() (Safari 13 / Chrome < 88 відкинули б правило — див. scripts/check_ds.js), тож специфічність (0,1,1):
   моноширинне поле масового імпорту (.admin-bulk, styles.css) повертаємо окремо. У зіні блок вирізається — там це робить ds/base.css. */
@supports (--zin-legacy: 1) {
.ui-v2 button, .ui-v2 input, .ui-v2 select, .ui-v2 textarea { font-family: inherit; }
.ui-v2 .admin-bulk { font-family: ui-monospace, monospace; }
}

/* ---- Темна тема (спокійна) ---- */
.ui-v2[data-theme="dark"] {
    --primary: #a8d8b0;
    --primary-dark: #86c090;
    --primary-light: #2a3a2e;
    --bg-white: #262320;
    --bg-light: #2f2b27;
    --bg-gray: #1c1a18;
    --text-dark: #f5f0ec;
    --text-muted: #9c948a;
    --text-light: #7f7870;
    --border-color: #3b3733;
    --border-light: #33302b;
    --link-color: #a8d8b0;
    /* Семантика (успіх/помилка/інфо): світлі варіанти з styles.css :root у темній лишалися пастельними плашками
       зі світлим текстом → невидимий текст. Тут — темні тінти + читабельний текст. */
    --success: #86c090;      --success-light: #24302a;
    --danger: #e56a6a;       --danger-light: #3a2626;
    --info: #7db8e8;         --info-light: #1f2a33;
    --green-ink: #8fd6a6;    --amber-ink: #e0b666;    --red-ink: #f0a9a2;
    --card-border: #3b3733;

    --paper: #1c1a18;   --surface: #262320;   --surface-2: #2f2b27;
    --ink: #f5f0ec;     --ink-2: #cfc7bc;     --muted: #9c948a;   --muted-2: #7f7870;
    --border: #3b3733;  --border-2: #33302b;
    --sage: #a8d8b0;    --sage-dark: #86c090; --sage-tint: #24302a; --sage-tint-2: #24302a; --sage-ink: #cfe9d3;
    --orange: #ef8748;  --orange-dark: #f0a875;
    /* ⚠️ тінти теж перевизначаємо: інакше кремові плашки (warning-bar тощо) лишаються світлими,
       а текст стає світлим → невидимий текст у темній темі */
    --orange-tint: #38251a; --orange-tint-2: #2e2019; --orange-border: #4a3423;
    --warning-bg: #2e2019;  --warning-border: #4a3423;
    --green: #86c090;   --red: #e56a6a;       --red-tint: #3a2626;
}

/* ============================================================
   КРОК 2 — головна платформи (#testSelectScreen), спокійна тема.
   Усе під .ui-v2. Старий вигляд без прапорця не чіпається.
   ============================================================ */

/* Шапка-навігація (замість строкатих зелених кнопок) */
.ui-v2 .user-bar { background: var(--surface); border-bottom: 1px solid var(--border); padding: 12px 16px; }
.ui-v2 .user-name { color: var(--ink); font-weight: 800; }
.ui-v2 .btn-cabinet {
    background: var(--surface-2); border: 1px solid var(--border); color: var(--ink) !important;
    border-radius: 10px; font-weight: 700; box-shadow: none !important;
}
.ui-v2 .btn-cabinet:hover { border-color: var(--sage); color: var(--sage-ink) !important; background: var(--sage-tint); }
.ui-v2 .btn-logout { background: transparent; border: 1px solid var(--border); color: var(--muted); border-radius: 10px; font-weight: 700; }

/* Заголовок екрана + ейбрау-підпис (сигнатура системи) */
.ui-v2 .select-title {
    font-size: 27px; font-weight: 800; letter-spacing: -.7px; color: var(--ink); margin-bottom: 22px;
}
.ui-v2 .select-title::before {
    content: "ТВОЯ ПІДГОТОВКА"; display: block;
    font-size: 11px; font-weight: 800; letter-spacing: 1.5px; color: var(--sage-dark); margin-bottom: 8px;
}

/* Верхні таби */
.ui-v2 .top-tabs { border-bottom: 1px solid var(--border); background: transparent; }
.ui-v2 .top-tabs .tab { color: var(--muted); font-weight: 700; }
.ui-v2 .top-tabs .tab.active { color: var(--sage-ink); background: var(--sage-tint); border-radius: 9px; border-bottom-color: transparent; }

/* Картки категорій тестів */
.ui-v2 .cat-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: 18px;
    box-shadow: 0 2px 8px rgba(52,40,24,.05);
}
.ui-v2 .cat-card:hover { transform: translateY(-2px); border-color: var(--sage); box-shadow: 0 10px 24px rgba(124,157,133,.20); }
.ui-v2 .cat-card-icon { background: var(--sage-tint-2); border-radius: 14px; }
.ui-v2 .cat-card--official .cat-card-icon { background: var(--orange-tint); }
.ui-v2 .cat-card--author .cat-card-icon { background: var(--sage-tint-2); }
.ui-v2 .cat-card-title { color: var(--ink); font-weight: 800; }
.ui-v2 .cat-card-desc { color: var(--muted); }
.ui-v2 .cat-card-count {
    color: var(--sage-ink); background: var(--sage-tint-2); border-radius: 999px; font-weight: 700;
}
.ui-v2 .cat-card-arrow { color: var(--muted-2); }
.ui-v2 .cat-back { color: var(--sage-dark); font-weight: 800; }
.ui-v2 .cat-detail-title { color: var(--ink); font-weight: 800; letter-spacing: -.4px; }
.ui-v2 .cat-detail-count { color: var(--sage-ink); background: var(--sage-tint-2); }

/* ============================================================
   КРОК 3 — лендинг/логін (#loginScreen), спокійна тема.
   ============================================================ */

/* Тло екрана: тепле paper замість градієнта (перебиваємо !important duo-скіна) */
@supports (--zin-legacy: 1) {
.ui-v2 .mode-select-page,
.ui-v2[data-theme="dark"] .mode-select-page { background: var(--paper) !important; }
.ui-v2 .mode-select-title { color: var(--ink); font-weight: 800; letter-spacing: -.8px; text-shadow: none; }
.ui-v2 .mode-select-subtitle { color: var(--muted); }

/* Картка «Режим практики» */
.ui-v2 .mode-card { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; box-shadow: 0 2px 10px rgba(52,40,24,.06); }
.ui-v2 .mode-card-title { color: var(--ink); font-weight: 800; }
.ui-v2 .mode-card-features li { color: var(--ink-2); }
.ui-v2 .mode-card-login-link { color: var(--sage-dark); font-weight: 700; }

/* Головна кнопка входу — пласка шавлієва (без Duolingo-3D-тіні) */
.ui-v2 .mode-card-btn {
    background: var(--sage) !important; color: #fff !important;
    border-radius: 12px; box-shadow: 0 2px 8px rgba(124,157,133,.28) !important; font-weight: 800;
}
.ui-v2 .mode-card-btn:hover { filter: brightness(1.05); }
.ui-v2 .mode-card-btn:active { transform: translateY(1px); box-shadow: 0 1px 4px rgba(124,157,133,.28) !important; }
}


/* Картка геометрії-тренажера */
.ui-v2 .quick-trainer-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; }
.ui-v2 .quick-trainer-title { color: var(--ink); font-weight: 800; }
.ui-v2 .quick-trainer-desc { color: var(--muted); }

/* Форма логіну */
@supports (--zin-legacy: 1) {
.ui-v2 .login-card { background: var(--surface); border: 1px solid var(--border); }
.ui-v2 .login-card-title { color: var(--ink); font-weight: 800; }
.ui-v2 .email-form input { background: var(--surface-2); border: 1px solid var(--border); color: var(--ink); border-radius: 10px; }
.ui-v2 .email-form input:focus { border-color: var(--sage); outline: none; }
.ui-v2 .btn-email-login { background: var(--sage); border-radius: 10px; font-weight: 800; }
.ui-v2 .form-links a, .ui-v2 .google-signin-text { color: var(--sage-dark); }
}


/* ============================================================
   КРОК 4 — екран проходження тесту (#testScreen), спокійна тема.
   ============================================================ */
/* Зін (.ui-z): розділ замінює ds/screens.css — під .ui-z вирізається (маркер нижче). */
@supports (--zin-legacy: 1) {

/* Варіанти відповіді — спокійні картки */
.ui-v2 .answer-option {
    border: 1.5px solid var(--border); border-radius: 12px; background: var(--surface);
    padding: 14px 16px; margin-bottom: 10px;
}
.ui-v2 .answer-option:hover { border-color: var(--sage); }
/* !important — duo-скін фарбує обрану у синій #1cb0f6 + дає синю 3D-тінь */
.ui-v2 .answer-option.selected { border-color: var(--sage) !important; background: var(--sage-tint) !important; box-shadow: none !important; }
.ui-v2 .answer-radio { border: 2px solid var(--muted-2); }
.ui-v2 .answer-option.selected .answer-radio { border-color: var(--sage-dark) !important; }
.ui-v2 .answer-option.selected .answer-radio::after { background: var(--sage-dark) !important; }
.ui-v2 .answer-option.correct { background: var(--sage-tint-2) !important; border-color: var(--green) !important; }
.ui-v2 .answer-option.wrong { background: var(--red-tint) !important; border-color: var(--red) !important; }

/* Панель-попередження з таймером — м'якша, оранжевий тінт */
.ui-v2 .warning-bar { background: var(--orange-tint-2); border-bottom: 1px solid var(--orange-border); }
.ui-v2 .timer-display { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; color: var(--ink); font-variant-numeric: tabular-nums; }  /* Onest: цифри пропорційні («1» вузька) — без tnum таймер «стрибає» */
.ui-v2 .btn-finish-warning { background: var(--sage); color: #fff; border: none; border-radius: 10px; font-weight: 800; box-shadow: none; }

/* Матчинг + короткі відповіді */
.ui-v2 .matching-option-item { border: 1.5px solid var(--border); border-radius: 12px; background: var(--surface); }
.ui-v2 .matching-option-item.selected { border-color: var(--sage); background: var(--sage-tint); }
.ui-v2 .input-answer input, .ui-v2 .short-answer-input {
    background: var(--surface-2); border: 1.5px solid var(--border); color: var(--ink); border-radius: 10px;
}
.ui-v2 .input-answer input:focus, .ui-v2 .short-answer-input:focus { border-color: var(--sage); outline: none; }
}

/* ============================================================
   КРОК 5 — результат тесту (#resultsScreen), спокійна тема.
   ============================================================ */
/* Зін (.ui-z): розділ замінює ds/screens.css — під .ui-z вирізається (маркер нижче). */
@supports (--zin-legacy: 1) {
.ui-v2 .results-header h1 { color: var(--ink); font-weight: 800; letter-spacing: -.6px; }
.ui-v2 .result-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 2px 8px rgba(52,40,24,.05); }
/* головні картки тепер світлі — старий білий текст (styles.css .result-card.main) на них невидимий */
.ui-v2 .result-card.main .result-value { color: var(--ink); }
.ui-v2 .result-card.main .result-label { color: var(--muted); }
.ui-v2 .result-card.scaled { background: var(--sage-tint); border-color: var(--sage); }
.ui-v2 .result-card.scaled .result-value { color: var(--sage-ink); font-size: 40px; letter-spacing: -1.5px; }
.ui-v2 .result-value { color: var(--ink); font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
/* «Не склав» — текст, не число: інтерфейсний шрифт */
.ui-v2 .result-card.main.not-passed .result-value { font-family: var(--font-ui); font-weight: 900; letter-spacing: -.01em; }
.ui-v2 .result-value.correct { color: var(--green); }
.ui-v2 .result-value.wrong, .ui-v2 .result-value.incorrect { color: var(--red); }
.ui-v2 .result-label { color: var(--muted); }
/* «Не склав» — червоним, а не зеленим кольором успіху */
.ui-v2 .result-card.main.not-passed { background: var(--red-tint); border-color: var(--red); }
.ui-v2 .result-card.main.not-passed .result-value { color: var(--red-ink); }
/* Фото розвʼязку (ДЗ) і «збережено на пристрої» (гість) — картки з відступами, як решта результатів */
.ui-v2 .hw-photo-card, .ui-v2 .guest-note { padding: 16px 18px; border-radius: 14px; }
.ui-v2 .hw-photo-card h3, .ui-v2 .guest-note h3 { margin-top: 0; color: var(--ink); font-weight: 800; }
}

/* ============================================================
   КРОК 6 — кабінет учня (#cabinetScreen), спокійна тема.
   ============================================================ */
.ui-v2 .cabinet-user-card { background: var(--surface); border: 1px solid var(--border); box-shadow: 0 2px 8px rgba(52,40,24,.05); }
.ui-v2 .cabinet-user-name { color: var(--ink); font-weight: 800; }
.ui-v2 .cabinet-user-email { color: var(--muted); }
.ui-v2 .cabinet-avatar { background: linear-gradient(135deg, var(--sage), var(--sage-dark)); }
.ui-v2 .cabinet-title { color: var(--ink); font-weight: 800; letter-spacing: -.5px; }
.ui-v2 .stat-card { background: var(--surface); border: 1px solid var(--border); box-shadow: 0 2px 8px rgba(52,40,24,.05); }
.ui-v2 .stat-value { color: var(--sage-dark); }
.ui-v2 .stat-label { color: var(--muted); }
.ui-v2 .hw-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; }
.ui-v2 .hw-card-title { color: var(--ink); font-weight: 800; }
.ui-v2 .hw-card-meta { color: var(--muted); }
.ui-v2 .hw-badge--done { background: var(--sage-tint-2) !important; color: var(--sage-ink) !important; }
.ui-v2 .hw-badge--todo { background: var(--surface-2) !important; color: var(--muted) !important; }
@supports (--zin-legacy: 1) {
.ui-v2 .hw-start-btn { background: var(--sage) !important; color: #fff !important; box-shadow: none !important; border-radius: 10px; }
}
.ui-v2 .cabinet-tab.active, .ui-v2 .cab-tab.active { color: var(--sage-ink); border-color: var(--sage); }

/* ============================================================
   ФАЗА A — енергійний хаб головної (#hubMount), зін-регістр.
   Рендериться лише в ui-v2 для залогіненого учня.
   ============================================================ */
.ui-v2 .hub { --sh-s: 3px 3px 0 var(--ink); --sh-l: 5px 5px 0 var(--ink); margin: 6px 0 26px; }
[data-theme="dark"].ui-v2 .hub { --sh-s: 3px 3px 0 #000; --sh-l: 5px 5px 0 #000; }

.ui-v2 .hub-top { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.ui-v2 .hub-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: 1.5px; color: var(--muted); margin-bottom: 5px; }
.ui-v2 .hub-hello { font-size: 30px; font-weight: 900; letter-spacing: -.8px; line-height: .92; text-transform: uppercase; color: var(--ink); }
.ui-v2 .hub-streak { margin-left: auto; display: flex; align-items: center; gap: 7px; flex-shrink: 0;
    background: var(--orange); color: #2a2622; border: 2.5px solid var(--ink); border-radius: 999px;
    padding: 8px 15px 8px 12px; box-shadow: var(--sh-s); transform: rotate(-2deg); font-weight: 900; font-size: 21px; }
.ui-v2 .hub-fire { font-size: 18px; }

.ui-v2 .hub-main { position: relative; background: var(--sage); border: 3px solid var(--ink); border-radius: 22px;
    padding: 18px; box-shadow: var(--sh-l); margin-bottom: 16px; }
.ui-v2 .hub-main-kick { font-size: 12px; font-weight: 800; letter-spacing: 1.1px; text-transform: uppercase; color: var(--sage-dark); margin-bottom: 6px; }
[data-theme="dark"].ui-v2 .hub-main-kick { color: #20301f; }
.ui-v2 .hub-main-title { font-size: 27px; font-weight: 900; letter-spacing: -.6px; line-height: 1.02; text-transform: uppercase; color: var(--surface); }
[data-theme="dark"].ui-v2 .hub-main-title { color: #16150f; }
.ui-v2 .hub-go { display: block; width: 100%; margin-top: 14px; background: var(--ink); color: var(--paper);
    border: none; border-radius: 14px; padding: 15px; font-family: inherit; font-size: 16px; font-weight: 900;
    letter-spacing: .4px; text-transform: uppercase; cursor: pointer; box-shadow: none; }
.ui-v2 .hub-go:active { transform: translateY(2px); }

.ui-v2 .hub-metrics { display: flex; gap: 12px; margin-bottom: 16px; }
.ui-v2 .hub-metric { flex: 1; border: 3px solid var(--ink); border-radius: 18px; padding: 15px; box-shadow: var(--sh-s); }
.ui-v2 .hub-metric.dark { background: var(--ink); }
.ui-v2 .hub-metric.light { background: var(--surface); }
.ui-v2 .hub-m-lab { font-size: 10.5px; font-weight: 800; letter-spacing: 1.1px; text-transform: uppercase; margin-bottom: 5px; }
.ui-v2 .hub-metric.dark .hub-m-lab { color: var(--muted-2); }
.ui-v2 .hub-metric.light .hub-m-lab { color: var(--muted); }
.ui-v2 .hub-m-num { font-family: var(--font-display); font-size: 36px; font-weight: 700; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.ui-v2 .hub-metric.dark .hub-m-num { color: var(--sage); }
.ui-v2 .hub-metric.light .hub-m-num { color: var(--green); }
.ui-v2 .hub-m-num small { font-size: 21px; font-weight: 700; }
.ui-v2 .hub-m-sub { font-size: 10.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; margin-top: 6px; }
.ui-v2 .hub-metric.dark .hub-m-sub { color: var(--muted-2); }
.ui-v2 .hub-metric.light .hub-m-sub { color: var(--muted); }

.ui-v2 .hub-trap { display: block; text-decoration: none; background: var(--red); color: #fff;
    border: 3px solid var(--ink); border-radius: 18px; padding: 15px 16px; box-shadow: var(--sh-s); }
.ui-v2 .hub-trap-kick { font-size: 10.5px; font-weight: 800; letter-spacing: 1.3px; text-transform: uppercase; opacity: .9; margin-bottom: 5px; }
.ui-v2 .hub-trap-title { font-size: 16px; font-weight: 800; }

/* Кнопка «Виправ свої помилки» на хабі (енергійна, помаранчева) */
.ui-v2 .hub-fix {
    display: block; width: 100%; text-align: left; cursor: pointer; font-family: inherit;
    background: var(--orange-tint); border: 3px solid var(--ink); border-radius: 18px;
    padding: 14px 16px; margin-bottom: 12px; box-shadow: var(--sh-s);
}
.ui-v2 .hub-fix:active { transform: translateY(2px); }
.ui-v2 .hub-fix-t { display: block; font-size: 16px; font-weight: 800; color: var(--ink); }
.ui-v2 .hub-fix-s { display: block; font-size: 12px; font-weight: 700; color: var(--orange-dark); margin-top: 3px; }
[data-theme="dark"].ui-v2 .hub-fix { background: #2e2318; }

/* Підказка на рівні «Банк тестів» */
.ui-v2 .cat-bank-hint { font-size: 13px; line-height: 1.5; color: var(--muted, #8a8177); margin: -4px 2px 14px; font-weight: 600; }

/* ==================== Нижній таб-бар учня (мобільний) ==================== */
.bottom-nav[hidden] { display: none !important; }
.ui-v2 .bottom-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    display: flex; justify-content: space-around; align-items: stretch;
    background: var(--surface, #fffdfb);
    border-top: 2.5px solid var(--ink, #2a2622);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -3px 16px rgba(20, 14, 4, .10);
}
.ui-v2 .bn-item {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
    background: none; border: none; cursor: pointer; font-family: inherit;
    padding: 7px 2px 5px; margin: 0 2px; color: var(--muted, #8a8177);
    border-radius: 13px; transition: background .12s, color .12s;
}
.ui-v2 .bn-ic { width: 23px; height: 23px; display: block; }
.ui-v2 svg.bn-ic { stroke-width: 2px; }
.ui-v2 .bn-item.active svg.bn-ic { stroke-width: 2.4px; }
.ui-v2 .bn-lb { font-size: 10.5px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; }
.ui-v2 .bn-item:active { transform: translateY(1px); }
.ui-v2 .bn-item.active { background: var(--sage-tint-2, #eaf2e3); color: var(--ink, #2a2622); }
.ui-v2 .bn-item.active .bn-lb { color: var(--sage-dark, #5f8069); }
/* Місце під бар, щоб контент не ховався за ним */
.ui-v2.has-bottom-nav #testSelectScreen,
.ui-v2.has-bottom-nav #cabinetScreen { padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }

/* ==================== Бокове меню репетитора (desktop) ==================== */
.tutor-rail[hidden] { display: none !important; }
.ui-v2 .tutor-rail { display: none; }               /* за замовч. схований; показуємо лише на широкому екрані */
.ui-v2 .tr-logo {
    width: 46px; height: 46px; border-radius: 14px; background: var(--sage, #7c9d85);
    color: #16150f; display: flex; align-items: center; justify-content: center;
    font-family: Gelasio, Georgia, serif; font-weight: 700; font-size: 24px; margin-bottom: 12px;
}
.ui-v2 .tr-item {
    width: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px;
    background: none; border: none; cursor: pointer; color: #8f877c; font-family: inherit;
    padding: 11px 2px; border-radius: 15px; transition: background .12s, color .12s;
}
.ui-v2 .tr-item i, .ui-v2 .tr-item svg { width: 24px; height: 24px; stroke-width: 2px; }
.ui-v2 .tr-item span { font-size: 10px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; }
.ui-v2 .tr-item:hover { color: #f5f0ec; }
.ui-v2 .tr-item.active { background: var(--sage, #7c9d85); color: #16150f; }

@media (min-width: 860px) {
    .ui-v2 .tutor-rail:not([hidden]) {
        position: fixed; left: 0; top: 0; bottom: 0; width: 94px; z-index: 850;
        display: flex; flex-direction: column; align-items: center; gap: 6px;
        background: #211f19; border-right: 3px solid #000;
        padding: 18px 9px calc(18px + env(safe-area-inset-bottom, 0px));
        overflow-y: auto;
    }
    .ui-v2.has-tutor-rail #adminScreen { padding-left: 94px; }
    /* Сайдбар заміняє горизонтальні секційні вкладки; лишаємо тільки кнопку «🎲 Згенерувати» */
    .ui-v2.has-tutor-rail .admin-tabs .admin-tab[data-atab] { display: none; }
}

/* ==================== Шапка + навбар: адаптив ==================== */
/* Фікс: клас .hidden сам по собі не мав правила — «Адмін» показувався всім. */
.ui-v2 #btnAdmin.hidden { display: none !important; }
/* Нижнє меню — МОБІЛЬНИЙ патерн. На вузькому екрані: показуємо його, а дубльовані
   «Рейтинг»/«Кабінет» ховаємо з шапки (вони в нижньому меню Топ/Я). */
@media (max-width: 767px) {
    .ui-v2 #btnLeaderboard, .ui-v2 #btnCabinet { display: none; }
    .ui-v2 .user-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
    .ui-v2 .user-bar { gap: 10px; }
}
/* Десктоп: нижнє меню ховаємо (не потрібне), навігація — через кнопки шапки (Рейтинг/Кабінет лишаються). */
@media (min-width: 768px) {
    .ui-v2 .bottom-nav { display: none !important; }
    .ui-v2.has-bottom-nav #testSelectScreen,
    .ui-v2.has-bottom-nav #cabinetScreen { padding-bottom: 0; }
}

/* ==================== Розміри Lucide-іконок (заміна емоджі) ==================== */
.cat-card-icon svg, .nmt2026-card-icon svg,
.tg-card-icon svg, .tg-banner-icon svg,
.quick-trainer-icon svg, .mode-card-icon svg { width: 26px; height: 26px; }
.cat-card-icon, .nmt2026-card-icon, .tg-card-icon, .tg-banner-icon,
.quick-trainer-icon, .mode-card-icon { display: inline-flex; align-items: center; justify-content: center; }
.btn-cabinet svg, .cabinet-tab svg, .top-tabs .tab svg { width: 17px; height: 17px; vertical-align: -3px; }
.cabinet-title svg { width: 24px; height: 24px; vertical-align: -4px; }
.hub-fix-t svg { width: 18px; height: 18px; vertical-align: -3px; }
.hub-fire svg { width: 15px; height: 15px; }
.nmt2026-card-meta svg { width: 13px; height: 13px; vertical-align: -2px; }
.cat-detail-title svg { width: 22px; height: 22px; vertical-align: -3px; }
.cat-card-count svg { width: 14px; height: 14px; vertical-align: -2px; }
/* Кнопка теми — svg не перехоплює кліки (Lucide fill:none), весь тап іде на кнопку */
.ui-v2 #btnTheme { display: inline-flex; align-items: center; justify-content: center; }
#btnTheme svg { width: 18px; height: 18px; }
#btnTheme svg, #btnTheme svg * { pointer-events: none; }

/* ==================== ТЕМНА ТЕМА: універсальна читабельність тексту ====================
   Багато класів у styles.css мають хардкод-кольори, що НЕ перемикаються в темній
   (темний текст на темному тлі → нечитабельно). Під темною темою ui-v2 мапимо на токени. */

/* Основний майже-чорний текст → світлий ink */
.ui-v2[data-theme="dark"] .hw-card-title,
.ui-v2[data-theme="dark"] .hw-flag-q,
.ui-v2[data-theme="dark"] .rv-title,
.ui-v2[data-theme="dark"] .rv-q,
.ui-v2[data-theme="dark"] .rv-ans,
.ui-v2[data-theme="dark"] .admin-check,
.ui-v2[data-theme="dark"] .hw-sub-row,
.ui-v2[data-theme="dark"] .st-name,
.ui-v2[data-theme="dark"] .st-stat-name,
.ui-v2[data-theme="dark"] .lb-rank { color: var(--ink) !important; }

/* Приглушений сірий текст → muted */
.ui-v2[data-theme="dark"] .hw-card-meta,
.ui-v2[data-theme="dark"] .hw-muted,
.ui-v2[data-theme="dark"] .admin-field,
.ui-v2[data-theme="dark"] .admin-types-title,
.ui-v2[data-theme="dark"] .hw-flag-hint,
.ui-v2[data-theme="dark"] .rv-sub,
.ui-v2[data-theme="dark"] .st-meta,
.ui-v2[data-theme="dark"] .st-stat-meta,
.ui-v2[data-theme="dark"] .lb-meta,
.ui-v2[data-theme="dark"] .rv-cols .rv-col-h,
.ui-v2[data-theme="dark"] .cat-empty { color: var(--muted) !important; }

/* Зелений → токен green (світлішає в темній) */
.ui-v2[data-theme="dark"] .admin-pool,
.ui-v2[data-theme="dark"] .admin-msg--ok,
.ui-v2[data-theme="dark"] .hw-flag-correct,
.ui-v2[data-theme="dark"] .st-stat-pct,
.ui-v2[data-theme="dark"] .rv-opts .rv-correct,
.ui-v2[data-theme="dark"] .rv-cols .rv-hit,
.ui-v2[data-theme="dark"] .dash-diff--ok { color: var(--green) !important; }

/* Червоний → токен red */
.ui-v2[data-theme="dark"] .admin-msg,
.ui-v2[data-theme="dark"] .hw-photo-err,
.ui-v2[data-theme="dark"] .dash-diff--low { color: var(--red) !important; }

/* Бурштиновий → orange */
.ui-v2[data-theme="dark"] .dash-diff--mid,
.ui-v2[data-theme="dark"] .dash-flag { color: var(--orange) !important; }

/* ==================== Розміри Lucide-іконок (батч 2: кнопки/бейджі/заголовки) ==================== */
.st-btn svg, .hw-view-btn svg, .hw-start-btn svg, .admin-tab svg,
.hw-badge svg, .rv-summary svg, .rv-ans svg, .admin-field svg,
.admin-types-title svg, .st-meta svg, .dash-flag svg, .ent-photos svg,
.hw-banner-title svg, .et-chip svg, .et-skill-badges svg,
.eg-label svg, .eg-start svg, .cabinet-tab svg { width: 16px; height: 16px; vertical-align: -3px; }
.rv-title svg, .admin-h3 svg { width: 20px; height: 20px; vertical-align: -3px; }
.rv-correct-summary svg { width: 15px; height: 15px; vertical-align: -2px; }
.history-empty-icon svg { width: 42px; height: 42px; }
.et-ic svg, .et-card svg { width: 24px; height: 24px; }
.et-task-reason svg, .et-chip svg { width: 14px; height: 14px; vertical-align: -2px; }

/* ==================== Бейджі-досягнення (кабінет) ==================== */
.cabinet-badges { margin: 4px 0 20px; }
.badges-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.badges-title { font-size: 16px; font-weight: 800; color: var(--ink, #2a2622); margin: 0; }
.badges-count { font-size: 13px; font-weight: 800; color: var(--sage-dark, #5f8069); background: var(--sage-tint-2, #eaf2e3); border-radius: 999px; padding: 3px 12px; }
.badges-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; }
.badge { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 6px; border-radius: 16px; text-align: center; border: 2px solid var(--border, #e5ddd5); background: var(--surface, #fffdfb); }
.badge-ic { width: 46px; height: 46px; border-radius: 13px; display: flex; align-items: center; justify-content: center; }
.badge-ic svg { width: 24px; height: 24px; }
.badge-name { font-size: 11px; font-weight: 700; line-height: 1.2; color: var(--ink, #2a2622); }
.badge--on { border-color: var(--sage, #7c9d85); }
.badge--on .badge-ic { background: var(--sage-tint-2, #eaf2e3); color: var(--sage-dark, #5f8069); }
.badge--off { opacity: .6; border-style: dashed; }
.badge--off .badge-ic { background: var(--surface-2, #f3f0ec); color: var(--muted-2, #a39a90); }
.badge--off .badge-name { color: var(--muted, #8a8177); }

/* ==================== Анімації (зумерський вайб) ==================== */
@keyframes badgePop { 0%{transform:scale(.5) translateY(10px);opacity:0} 60%{transform:scale(1.09)} 100%{transform:scale(1) translateY(0);opacity:1} }
@keyframes flameFlicker { 0%,100%{transform:scale(1) rotate(-3deg)} 50%{transform:scale(1.2) rotate(3deg)} }
@keyframes floatUp { from{transform:translateY(16px);opacity:0} to{transform:translateY(0);opacity:1} }
@keyframes popIn { 0%{transform:scale(.85);opacity:0} 70%{transform:scale(1.04)} 100%{transform:scale(1);opacity:1} }

/* Пружний відгук на натиск — завжди */
.ui-v2 .cat-card, .ui-v2 .badge, .ui-v2 .hub-fix, .ui-v2 .hub-go, .ui-v2 .bn-item, .ui-v2 .hub-trap { transition: transform .13s ease, box-shadow .13s ease; }
.ui-v2 .cat-card:active, .ui-v2 .hub-fix:active, .ui-v2 .badge:active { transform: scale(.97); }
.ui-v2 .bn-item:active { transform: scale(.9); }

@media (prefers-reduced-motion: no-preference) {
    /* Бейджі — послідовна пружна поява */
    .ui-v2 .badge { animation: badgePop .44s cubic-bezier(.34,1.56,.64,1) both; }
    .ui-v2 .badges-grid .badge:nth-child(1){animation-delay:.02s}
    .ui-v2 .badges-grid .badge:nth-child(2){animation-delay:.06s}
    .ui-v2 .badges-grid .badge:nth-child(3){animation-delay:.10s}
    .ui-v2 .badges-grid .badge:nth-child(4){animation-delay:.14s}
    .ui-v2 .badges-grid .badge:nth-child(5){animation-delay:.18s}
    .ui-v2 .badges-grid .badge:nth-child(6){animation-delay:.22s}
    .ui-v2 .badges-grid .badge:nth-child(7){animation-delay:.26s}
    .ui-v2 .badges-grid .badge:nth-child(8){animation-delay:.30s}
    .ui-v2 .badges-grid .badge:nth-child(9){animation-delay:.34s}
    .ui-v2 .badges-grid .badge:nth-child(n+10){animation-delay:.38s}
    .ui-v2 .badge:hover { transform: translateY(-3px) rotate(-2deg); }
    .ui-v2 .badge--on:hover { transform: translateY(-3px) rotate(2deg) scale(1.03); }
    /* Вогник стріку — живий пульс */
    .ui-v2 .hub-fire svg { animation: flameFlicker 1.5s ease-in-out infinite; transform-origin: center bottom; }
    /* Хаб — плавна поява карток */
    .ui-v2 .hub-main { animation: floatUp .42s ease both; }
    .ui-v2 .hub-metrics { animation: floatUp .42s ease both; animation-delay:.06s; }
    .ui-v2 .hub-fix { animation: floatUp .42s ease both; animation-delay:.12s; }
    .ui-v2 .hub-trap { animation: floatUp .42s ease both; animation-delay:.18s; }
    /* Пігулка стріку — застрибує */
    .ui-v2 .hub-streak { animation: popIn .5s cubic-bezier(.34,1.56,.64,1) both; animation-delay:.15s; }
    /* Активний таб знизу — легкий підскок іконки */
    .ui-v2 .bn-item.active .bn-ic { animation: popIn .3s ease; }
}

/* ═══════════════════════════════════════════════════════════════════
   СТАРТОВА СТОРІНКА — зін-стиль (ink-обведення, офсет-тіні, ALL-CAPS)
   Перекриває спокійні mode-select правила вище (той самий scope, пізніше).
   ═══════════════════════════════════════════════════════════════════ */
.ui-v2 { --zin-sh: var(--ink); }
@supports (--zin-legacy: 1) {
.ui-v2 .mode-select-page { padding: 26px 18px 40px; }
.ui-v2 .mode-select-container { max-width: 460px; }

/* Шапка */
.ui-v2 .mode-select-header { text-align: left; margin-bottom: 22px; position: relative; }
.ui-v2 .mode-select-title {
    font-size: clamp(28px, 8vw, 40px); font-weight: 900; line-height: 1.02;
    letter-spacing: -1.4px; color: var(--ink); text-wrap: balance; margin: 0;
}
.ui-v2 .mode-select-subtitle {
    margin-top: 10px; font-size: 15px; font-weight: 600; color: var(--ink-2); max-width: 40ch;
}
/* Маленька зін-мітка-«штамп» біля заголовка */
.ui-v2 .mode-select-header::before {
    content: "НМТ · МАТЕМАТИКА"; display: inline-block; margin-bottom: 12px;
    font-size: 10.5px; font-weight: 900; letter-spacing: 1.4px; text-transform: uppercase;
    color: #fff; background: var(--sage); border: 2.5px solid var(--ink);
    border-radius: 999px; padding: 4px 12px; box-shadow: 3px 3px 0 var(--zin-sh);
    transform: rotate(-2deg);
}
}


/* Спільна зін-плитка для карток-посилань */
.ui-v2 .tg-card, .ui-v2 .quick-trainer-card {
    border: 3px solid var(--ink) !important; border-radius: 18px !important;
    background: var(--surface) !important; box-shadow: 4px 4px 0 var(--zin-sh) !important;
    padding: 14px 16px; gap: 13px; transition: transform .14s cubic-bezier(.22,1,.36,1), box-shadow .14s;
    animation: floatUp .42s ease both;
}
.ui-v2 .tg-card { transform: rotate(-1deg); animation-delay: .04s; }
.ui-v2 .quick-trainer-card { transform: rotate(1deg); animation-delay: .1s; }
.ui-v2 .tg-card:hover, .ui-v2 .quick-trainer-card:hover {
    transform: rotate(0deg) translateY(-3px); box-shadow: 7px 7px 0 var(--zin-sh) !important;
}
.ui-v2 .tg-card:active, .ui-v2 .quick-trainer-card:active {
    transform: translateY(2px); box-shadow: 2px 2px 0 var(--zin-sh) !important;
}
/* Іконки-плитки */
.ui-v2 .tg-card-icon, .ui-v2 .quick-trainer-icon {
    width: 46px; height: 46px; flex: none; border: 2.5px solid var(--ink); border-radius: 13px;
    display: flex; align-items: center; justify-content: center; box-shadow: 2px 2px 0 var(--zin-sh);
}
.ui-v2 .tg-card-icon { background: var(--orange-tint); color: var(--orange-dark); }
.ui-v2 .quick-trainer-icon { background: var(--sage-tint-2); color: var(--sage-dark); }
.ui-v2 .tg-card-icon svg, .ui-v2 .quick-trainer-icon svg { width: 22px; height: 22px; }
.ui-v2 .tg-card-title, .ui-v2 .quick-trainer-title {
    font-weight: 900; font-size: 15px; letter-spacing: -.3px; color: var(--ink); text-transform: uppercase;
}
.ui-v2 .tg-card-desc, .ui-v2 .quick-trainer-desc { font-size: 12.5px; font-weight: 600; color: var(--muted); margin-top: 2px; }
/* Стрілки → у ink-кружечку */
.ui-v2 .tg-card-arrow, .ui-v2 .quick-trainer-arrow {
    flex: none; width: 30px; height: 30px; border: 2.5px solid var(--ink); border-radius: 999px;
    display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 16px;
    color: var(--ink); background: var(--surface-2);
}

/* Головна картка — «Режим практики» */
@supports (--zin-legacy: 1) {
.ui-v2 .mode-card {
    border: 3px solid var(--ink) !important; border-radius: 22px !important;
    background: var(--surface) !important; box-shadow: 5px 5px 0 var(--zin-sh) !important;
    padding: 22px 20px !important; animation: floatUp .42s ease both; animation-delay: .16s; text-align: left;
}
.ui-v2 .mode-card-icon {
    width: 54px; height: 54px; border: 3px solid var(--ink); border-radius: 16px;
    background: var(--sage); color: #fff; display: flex; align-items: center; justify-content: center;
    box-shadow: 3px 3px 0 var(--zin-sh); transform: rotate(-3deg); margin-bottom: 14px;
}
.ui-v2 .mode-card-icon svg { width: 26px; height: 26px; }
.ui-v2 .mode-card-title {
    font-size: 22px; font-weight: 900; letter-spacing: -.6px; text-transform: uppercase; color: var(--ink);
}
.ui-v2 .mode-card-features { margin: 14px 0 18px; display: flex; flex-direction: column; gap: 9px; text-align: left; }
.ui-v2 .mode-card-features li {
    list-style: none; font-size: 14px; font-weight: 600; color: var(--ink-2); text-align: left;
    padding: 3px 0 3px 30px !important; position: relative; line-height: 1.35;
}
.ui-v2 .mode-card-features li::before {
    content: "✓"; position: absolute; left: 0; top: -1px; width: 18px; height: 18px;
    display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 900;
    color: #fff; background: var(--sage); border: 2px solid var(--ink); border-radius: 6px;
}
/* Кнопки — зін.
   font-family: inherit — кнопки не успадковують шрифт сторінки й рендерилися системним (Arial) замість інтерфейсного (Onest). */
.ui-v2 .mode-card-btn {
    background: var(--orange) !important; color: #fff !important;
    border: 3px solid var(--ink) !important; border-radius: 14px !important;
    font-family: inherit; font-weight: 900 !important; font-size: 15px !important; letter-spacing: .3px; text-transform: uppercase;
    box-shadow: 4px 4px 0 var(--zin-sh) !important; padding: 14px !important;
    transition: transform .12s, box-shadow .12s !important;
}
.ui-v2 .mode-card-btn:hover {
    filter: none !important; transform: translateY(-2px); box-shadow: 6px 6px 0 var(--zin-sh) !important;
}
.ui-v2 .mode-card-btn:active {
    transform: translateY(2px); box-shadow: 1px 1px 0 var(--zin-sh) !important;
}
.ui-v2 .mode-card-login-link {
    font-family: inherit;
    margin-top: 12px !important; color: var(--sage-dark) !important; font-weight: 800 !important;
    text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px;
}
}


/* Темна тема: ink стає світлим → тверді офсет-тіні замінюємо на м'які, обведення лишаємо */
.ui-v2[data-theme="dark"] { --zin-sh: rgba(0,0,0,.55); }

.ui-v2[data-theme="dark"] .tg-card,
.ui-v2[data-theme="dark"] .quick-trainer-card,
.ui-v2[data-theme="dark"] .tg-card-icon,
.ui-v2[data-theme="dark"] .quick-trainer-icon {
    border-color: var(--ink) !important;
}
@supports (--zin-legacy: 1) {
.ui-v2[data-theme="dark"] .mode-select-header::before,
.ui-v2[data-theme="dark"] .mode-card,
.ui-v2[data-theme="dark"] .mode-card-icon,
.ui-v2[data-theme="dark"] .mode-card-btn {
    border-color: var(--ink) !important;
}
}


@media (prefers-reduced-motion: reduce) {
    .ui-v2 .tg-card, .ui-v2 .quick-trainer-card { animation: none; }
@supports (--zin-legacy: 1) {
.ui-v2 .mode-card { animation: none; }
}

    .ui-v2 .tg-card:hover,
.ui-v2 .quick-trainer-card:hover { transform: none; }
@supports (--zin-legacy: 1) {
.ui-v2 .mode-card-btn:hover { transform: none; }
}

}

/* Десктоп/ноут: ширша сітка замість вузької мобільної колонки.
   Заголовок зверху; головний CTA (Режим практики) — лівий стовпець;
   Telegram + геометрія — правий стовпець одна над одною. */
@media (min-width: 800px) {
    @supports (--zin-legacy: 1) {
.ui-v2 .mode-select-page { padding: 52px 32px 60px; display: flex; justify-content: center; }
    .ui-v2 .mode-select-container {
        max-width: 940px; width: 100%;
        display: grid; grid-template-columns: 1.15fr 1fr; gap: 20px; align-items: start;
    }
    .ui-v2 .mode-select-header { grid-column: 1 / -1; margin-bottom: 4px; }
    .ui-v2 .mode-select-title { font-size: clamp(42px, 4.4vw, 58px); letter-spacing: -1.8px; }
    .ui-v2 .mode-select-subtitle { font-size: 16px; max-width: 52ch; }
    /* Головна картка — лівий стовпець, на всю висоту двох правих карток */
    .ui-v2 .mode-cards { grid-column: 1; grid-row: 2 / span 2; margin: 0; align-self: start; }
    .ui-v2 .mode-card { padding: 28px 30px !important; }
    /* Telegram + геометрія — правий стовпець, стосом */
    .ui-v2 .tg-card { grid-column: 2; grid-row: 2; margin: 0; }
    .ui-v2 .quick-trainer-card { grid-column: 2; grid-row: 3; margin: 0; }
    .ui-v2 .login-card { grid-column: 1; grid-row: 2 / span 2; align-self: start; margin: 0; }
    /* Картка «Уроки з презентаціями» — третьою в правому стовпці: Telegram · уроки · тренажери (і розгорнутий список під ними) */
    .ui-v2 .mode-cards, .ui-v2 .login-card { grid-row: 2 / span 3; }
    .ui-v2 .quick-trainer-card.lessons-card { grid-row: 3; }
    .ui-v2 .quick-trainer-card.trainers-toggle { grid-row: 4; }
    .ui-v2 .mode-select-container > .trainers-list { grid-column: 2; grid-row: 5; }
}

}

/* ═══════════════════════════════════════════════════════════════════
   ПРОХОДЖЕННЯ ТЕСТУ (#testScreen) — зін-стиль (перекриває КРОК 4 вище).
   Логіка/структура не змінюються — лише вигляд.
   ═══════════════════════════════════════════════════════════════════ */
/* Зін (.ui-z): розділ замінює ds/screens.css — під .ui-z вирізається (маркер нижче). */
@supports (--zin-legacy: 1) {

/* Картка завдання */
.ui-v2 #testScreen .task-block {
    background: var(--surface); border: 3px solid var(--ink); border-radius: 20px;
    box-shadow: 5px 5px 0 var(--zin-sh); padding: 20px 20px 22px;
}
.ui-v2 #testScreen .task-title {
    font-size: 15px; font-weight: 900; letter-spacing: .3px; text-transform: uppercase;
    color: #fff; background: var(--ink); border-radius: 999px; padding: 6px 14px;
    display: inline-block; margin-bottom: 14px;
}
.ui-v2 #testScreen .subject-name { font-weight: 900; letter-spacing: -.4px; text-transform: uppercase; color: var(--ink); }
.ui-v2 #testScreen .instruction-box {
    background: var(--sage-tint); border: 2.5px solid var(--ink); border-radius: 14px;
    box-shadow: 3px 3px 0 var(--zin-sh); color: var(--ink); padding: 12px 14px;
}

/* Варіанти відповіді — зін-плитки */
.ui-v2 #testScreen .answer-option, .ui-v2 .answer-option {
    border: 2.5px solid var(--ink) !important; border-radius: 14px !important; background: var(--surface) !important;
    box-shadow: 3px 3px 0 var(--zin-sh); padding: 14px 16px; margin-bottom: 11px;
    transition: transform .12s cubic-bezier(.22,1,.36,1), box-shadow .12s;
}
.ui-v2 .answer-option:hover { transform: translateY(-2px); box-shadow: 5px 5px 0 var(--zin-sh); }
.ui-v2 .answer-option:active { transform: translateY(1px); box-shadow: 1px 1px 0 var(--zin-sh); }
.ui-v2 .answer-option.selected {
    border-color: var(--ink) !important; background: var(--sage-tint) !important;
    box-shadow: 3px 3px 0 var(--sage-dark) !important;
}
.ui-v2 .answer-option.correct { background: var(--sage-tint-2) !important; border-color: var(--ink) !important; box-shadow: 3px 3px 0 var(--sage-dark) !important; }
.ui-v2 .answer-option.wrong { background: var(--red-tint) !important; border-color: var(--ink) !important; box-shadow: 3px 3px 0 var(--red) !important; }
.ui-v2 .answer-radio { border: 2.5px solid var(--ink); }
.ui-v2 .answer-option.selected .answer-radio { border-color: var(--sage-dark) !important; background: var(--sage-tint-2); }
.ui-v2 .answer-option.selected .answer-radio::after { background: var(--sage-dark) !important; }

/* Матчинг + короткі відповіді — зін */
.ui-v2 .matching-option-item { border: 2.5px solid var(--ink) !important; border-radius: 12px; background: var(--surface); box-shadow: 2px 2px 0 var(--zin-sh); }
.ui-v2 .matching-option-item.selected { background: var(--sage-tint) !important; box-shadow: 2px 2px 0 var(--sage-dark); }
.ui-v2 .input-answer input, .ui-v2 .short-answer-input {
    background: var(--surface-2) !important; border: 2.5px solid var(--ink) !important; color: var(--ink); border-radius: 11px !important;
    font-weight: 800;
}
.ui-v2 .input-answer input:focus, .ui-v2 .short-answer-input:focus { box-shadow: 3px 3px 0 var(--sage-dark); outline: none; }

/* Кнопки збереження / не знаю */
.ui-v2 #testScreen .btn-save {
    background: var(--orange) !important; color: #fff !important; border: 3px solid var(--ink) !important;
    border-radius: 14px !important; font-weight: 900 !important; letter-spacing: .3px; text-transform: uppercase;
    box-shadow: 4px 4px 0 var(--zin-sh) !important; transition: transform .12s, box-shadow .12s;
}
.ui-v2 #testScreen .btn-save:hover { transform: translateY(-2px); box-shadow: 6px 6px 0 var(--zin-sh) !important; filter: none; }
.ui-v2 #testScreen .btn-save:active { transform: translateY(2px); box-shadow: 1px 1px 0 var(--zin-sh) !important; }
.ui-v2 #testScreen .btn-dontknow {
    background: var(--surface) !important; color: var(--ink-2) !important; border: 2.5px solid var(--ink) !important;
    border-radius: 12px !important; font-weight: 800 !important; box-shadow: 2px 2px 0 var(--zin-sh) !important;
}

/* Сітка номерів завдань — зін-плитки */
.ui-v2 #testScreen .sidebar-title, .ui-v2 .mobile-panel-header span {
    font-weight: 900; text-transform: uppercase; letter-spacing: .5px; color: var(--ink); font-size: 13px;
}
.ui-v2 #testScreen .task-btn, .ui-v2 .mobile-task-grid .task-btn {
    border: 2.5px solid var(--ink) !important; border-radius: 10px !important; background: var(--surface) !important;
    color: var(--ink) !important; font-weight: 800 !important; box-shadow: 2px 2px 0 var(--zin-sh);
    transition: transform .1s, box-shadow .1s;
}
.ui-v2 #testScreen .task-btn.answered, .ui-v2 .mobile-task-grid .task-btn.answered {
    background: var(--sage-tint-2) !important; box-shadow: 2px 2px 0 var(--sage-dark);
}
.ui-v2 #testScreen .task-btn.current, .ui-v2 .mobile-task-grid .task-btn.current {
    background: var(--orange) !important; color: #fff !important; box-shadow: 3px 3px 0 var(--zin-sh);
}
.ui-v2 #testScreen .task-btn:active, .ui-v2 .mobile-task-grid .task-btn:active { transform: translateY(1px); box-shadow: 1px 1px 0 var(--zin-sh); }

/* Таймер + завершити + інструкція-бар */
.ui-v2 #testScreen .timer-display {
    border: 2.5px solid var(--ink) !important; border-radius: 999px !important;
    font-weight: 800; padding: 6px 14px;
}
.ui-v2 #testScreen .timer-display:not(.is-low) { background: var(--ink) !important; color: #fff !important; box-shadow: 3px 3px 0 var(--orange); }
.ui-v2 #testScreen .timer-value { color: #fff; }
/* Останні 5 хвилин (examkit.js) — червона пігулка, як «.low» у режимі «Іспит». Світла тема — темніший червоний
   (--red-ink: білий текст ≈ 6.9 : 1; яскравий --red давав лише 4.3 : 1), темна — --red з темним текстом */
.ui-v2 #testScreen .timer-display.is-low { background: var(--red-ink); color: #fff; box-shadow: 3px 3px 0 var(--zin-sh); }
.ui-v2[data-theme="dark"] #testScreen .timer-display.is-low { background: var(--red); }
.ui-v2 #testScreen .btn-finish-warning {
    background: var(--sage) !important; color: #fff !important; border: 2.5px solid var(--ink) !important;
    border-radius: 12px !important; font-weight: 900 !important; text-transform: uppercase; letter-spacing: .3px;
    box-shadow: 3px 3px 0 var(--zin-sh) !important;
}
.ui-v2 #testScreen .btn-finish-warning:active { transform: translateY(2px); box-shadow: 1px 1px 0 var(--zin-sh) !important; }

/* Мобільна нижня навігація — зін */
.ui-v2 #testScreen .mobile-nav .mobile-btn {
    border: 2.5px solid var(--ink) !important; border-radius: 12px !important; background: var(--surface) !important;
    color: var(--ink) !important; font-weight: 900 !important; box-shadow: 3px 3px 0 var(--zin-sh);
}
.ui-v2 #testScreen .mobile-nav .tasks-btn { background: var(--sage) !important; color: #fff !important; }

@media (prefers-reduced-motion: reduce) {
    .ui-v2 .answer-option:hover, .ui-v2 #testScreen .btn-save:hover { transform: none; }
}
}

/* ═══════════════════════════════════════════════════════════════════
   ЗАЛОГІНЕНА ГОЛОВНА (#testSelectScreen) — зін-стиль для карток категорій
   і заголовка (перекриває спокійні КРОК 2 правила вище).
   ═══════════════════════════════════════════════════════════════════ */
.ui-v2 .select-title { font-size: clamp(26px, 4vw, 34px); font-weight: 900; letter-spacing: -1px; }
.ui-v2 .select-title::before { color: var(--sage-dark); }

.ui-v2 .cat-card {
    border: 3px solid var(--ink); border-radius: 18px; background: var(--surface);
    box-shadow: 4px 4px 0 var(--zin-sh);
    transition: transform .14s cubic-bezier(.22,1,.36,1), box-shadow .14s;
}
.ui-v2 .cat-card:hover {
    transform: translateY(-3px); border-color: var(--ink); box-shadow: 7px 7px 0 var(--zin-sh);
}
.ui-v2 .cat-card:active { transform: translateY(2px); box-shadow: 2px 2px 0 var(--zin-sh); }
.ui-v2 .cat-card-icon {
    border: 2.5px solid var(--ink); border-radius: 13px; box-shadow: 2px 2px 0 var(--zin-sh);
    background: var(--sage-tint-2);
}
.ui-v2 .cat-card--official .cat-card-icon { background: var(--orange-tint); }
.ui-v2 .cat-card-title { font-weight: 900; letter-spacing: -.3px; text-transform: uppercase; font-size: 17px; }
.ui-v2 .cat-card-count {
    border: 2px solid var(--ink); background: var(--sage-tint-2); color: var(--sage-ink);
    font-weight: 800; border-radius: 999px;
}
.ui-v2 .cat-card-arrow {
    width: 30px; height: 30px; border: 2.5px solid var(--ink); border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center; color: var(--ink); background: var(--surface-2);
    font-weight: 900;
}
.ui-v2 .cat-detail-title { font-weight: 900; letter-spacing: -.5px; }
[data-theme="dark"] .ui-v2 .cat-card,
.ui-v2[data-theme="dark"] .cat-card { border-color: var(--ink); }

/* Мобільний: пігулка-лічильник під текст (а не поруч — вона стискала опис у вузьку колонку) */
@media (max-width: 600px) {
    .ui-v2 .cat-card { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "icon body" "count count"; }
    .ui-v2 .cat-card-icon { grid-area: icon; }
    .ui-v2 .cat-card-body { grid-area: body; }
    .ui-v2 .cat-card-count { grid-area: count; justify-self: start; margin-top: 2px; }
    .ui-v2 .cat-card-arrow { display: none; }
}

/* ============================================================
   ТЕМНА ТЕМА — контраст «текст на акценті». У темній --sage і --ink стають СВІТЛИМИ,
   тож захардкоджений білий текст на них зникає (білий на світло-шавлієвому/кремовому).
   Правило: усе, що лежить на var(--sage) чи var(--ink), у темній пише кольором паперу.
   ============================================================ */
@supports (--zin-legacy: 1) {
.ui-v2[data-theme="dark"] .hw-start-btn { color: var(--paper) !important; }
}
@supports (--zin-legacy: 1) {
.ui-v2[data-theme="dark"] .btn-finish-warning,
.ui-v2[data-theme="dark"] #testScreen .btn-finish-warning,
.ui-v2[data-theme="dark"] #testScreen .mobile-nav .tasks-btn { color: var(--paper) !important; }
}
@supports (--zin-legacy: 1) {
.ui-v2[data-theme="dark"] .mode-select-header::before,
.ui-v2[data-theme="dark"] .mode-card-icon,
.ui-v2[data-theme="dark"] .mode-card-features li::before { color: var(--paper); }
}

@supports (--zin-legacy: 1) {
.ui-v2[data-theme="dark"] #testScreen .task-title { color: var(--paper); background: var(--sage); }
.ui-v2[data-theme="dark"] #testScreen .timer-display,
.ui-v2[data-theme="dark"] #testScreen .timer-value { color: var(--paper) !important; }
}
.ui-v2[data-theme="dark"] .modal-btn-confirm { color: var(--paper); }
.ui-v2[data-theme="dark"] .modal-btn-confirm:hover { background: var(--sage-dark); }

/* Екран старту тесту: «Інший варіант» лише для згенерованих (клас .hidden не мав правила — кнопка висіла на всіх тестах, зокрема НМТ-сесіях). */
#btnRegenerate.hidden { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════
   ТАЙМЕР І ДОВІДКОВІ МАТЕРІАЛИ (examkit.js) — ui-v2: ті самі зін-обведення, що й решта екрана тесту.
   Базова розмітка й поведінка — styles.css; зін (.ui-z) — ds/screens.css (цей блок під .ui-z вирізається).
   Текст на var(--ink) / var(--sage) — кольором паперу: у темній темі ці тла світлі.
   ═══════════════════════════════════════════════════════════════════ */
@supports (--zin-legacy: 1) {
.ui-v2 .timer-eye {
    border: 2.5px solid var(--ink); background: var(--surface); color: var(--ink);
    box-shadow: 2px 2px 0 var(--zin-sh); transition: transform .12s, box-shadow .12s;
}
.ui-v2 .timer-eye:hover { border-color: var(--ink); color: var(--ink); background: var(--sage-tint); }
.ui-v2 .timer-eye:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--zin-sh); }
.ui-v2 .timer-eye[aria-pressed="true"] { background: var(--sage-tint); }
.ui-v2 .timer-eye:focus-visible { outline-color: var(--sage-dark); }

.ui-v2 .test-strip {
    background: var(--surface); color: var(--ink);
    border-bottom: 2.5px solid var(--ink); box-shadow: 0 4px 14px rgba(42, 38, 34, .14);
}
.ui-v2 .test-strip__title { color: var(--ink-2); font-weight: 800; }
.ui-v2 .test-strip__ref {
    border: 2px solid var(--ink); background: var(--sage-tint); color: var(--ink);
    font-weight: 800; box-shadow: 2px 2px 0 var(--zin-sh); transition: transform .12s, box-shadow .12s;
}
.ui-v2 .test-strip__ref:hover { background: var(--sage-tint-2); color: var(--ink); }
.ui-v2 .test-strip__ref:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--zin-sh); }
.ui-v2 .test-strip__ref:focus-visible { outline-color: var(--sage-dark); }
.ui-v2 .test-strip__label,
.ui-v2 .timer-off-note,
.ui-v2 .ref-modal__timer-l { color: var(--ink-2); font-weight: 700; }
.ui-v2 .test-strip__time {
    padding: 4px 12px; border-radius: 999px; background: var(--ink); color: var(--paper);
    font-size: 17px; font-weight: 900; box-shadow: 2px 2px 0 var(--orange);
}
.ui-v2 .test-strip.is-low .test-strip__time { background: var(--red-ink); color: var(--paper); box-shadow: 2px 2px 0 var(--zin-sh); }
.ui-v2[data-theme="dark"] .test-strip.is-low .test-strip__time { background: var(--red); }
/* Час тесту в шапці довідки — та сама пігулка, що й у смужці */
.ui-v2 .ref-modal__timer-v {
    padding: 4px 12px; border: 0; border-radius: 999px; background: var(--ink); color: var(--paper);
    font-size: 16px; font-weight: 900; box-shadow: 2px 2px 0 var(--orange);
}
.ui-v2 .ref-modal__timer.is-low .ref-modal__timer-v { background: var(--red-ink); color: var(--paper); box-shadow: 2px 2px 0 var(--zin-sh); }
.ui-v2[data-theme="dark"] .ref-modal__timer.is-low .ref-modal__timer-v { background: var(--red); }
.ui-v2 .ref-modal { background: rgba(28, 24, 20, .6); }
.ui-v2[data-theme="dark"] .ref-modal { background: rgba(0, 0, 0, .7); }
.ui-v2 .ref-modal__box {
    background: var(--surface); color: var(--ink);
    border: 3px solid var(--ink); border-radius: 20px; box-shadow: 6px 6px 0 var(--zin-sh);
}
.ui-v2 .ref-modal__head { border-bottom: 2px solid var(--border); }
.ui-v2 .ref-modal__title { color: var(--ink); font-weight: 900; letter-spacing: -.3px; }
.ui-v2 .ref-modal__zoom { padding: 3px; border: 2px solid var(--ink); border-radius: 999px; background: var(--surface-2); }
.ui-v2 .ref-modal__zbtn { width: 36px; height: 36px; border: 0; background: transparent; color: var(--ink); }
.ui-v2 .ref-modal__zbtn:not(:disabled):hover { background: var(--sage-tint); }
.ui-v2 .ref-modal__zval { color: var(--ink); font-weight: 900; }
.ui-v2 .ref-modal__pdf { color: var(--sage-ink); text-decoration: underline; text-underline-offset: 3px; }
.ui-v2 .ref-modal__back {
    background: var(--ink); color: var(--paper); border: 2.5px solid var(--ink); border-radius: 12px;
    font-weight: 900; box-shadow: 3px 3px 0 var(--orange); transition: transform .12s, box-shadow .12s;
}
.ui-v2 .ref-modal__back:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--orange); }
.ui-v2 .ref-modal__zbtn:focus-visible, .ui-v2 .ref-modal__back:focus-visible, .ui-v2 .ref-modal__pdf:focus-visible,
.ui-v2 .ref-modal__body:focus-visible { outline-color: var(--sage-dark); }
.ui-v2 .ref-modal__body { background: var(--paper); }
.ui-v2 .ref-page { border: 2px solid var(--border); border-radius: 8px; box-shadow: none; }
@media (max-width: 600px) {
    .ui-v2 .ref-modal__box { border: 0; border-radius: 0; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
    .ui-v2 .timer-eye, .ui-v2 .test-strip__ref, .ui-v2 .ref-modal__back { transition: none; }
}
}

/* ---- Банер «Підтверди пошту» (app.js _showVerifyBanner; security 28.09). Кольори — токени: темна тема міняє їх сама ---- */
.verify-banner {
    position: fixed; left: 50%; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
    width: min(560px, calc(100vw - 24px)); z-index: 1000; box-sizing: border-box;
    display: none; grid-template-columns: 1fr auto; gap: 10px 14px; align-items: center;
    padding: 14px 44px 14px 16px; border-radius: 16px;
    background: var(--surface, #fffdfb); color: var(--ink, #2a2622);
    border: 2.5px solid var(--ink, #2a2622); box-shadow: 4px 4px 0 var(--orange, #ef8748);
    font-family: var(--font-ui, system-ui, sans-serif);
}
.verify-banner--on { display: grid; animation: verify-banner-in .22s ease-out; }
@keyframes verify-banner-in { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translateX(-50%); } }
.verify-banner__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.verify-banner__text strong { font-size: 15px; font-weight: 900; letter-spacing: -.2px; }
.verify-banner__text span { font-size: 13px; line-height: 1.35; color: var(--ink-2, #5c544c); }
.verify-banner__email { font-weight: 800; color: var(--ink, #2a2622); overflow-wrap: anywhere; }
.verify-banner__status:empty { display: none; }
.verify-banner__text .verify-banner__status { color: var(--sage-ink, #42604b); font-weight: 700; }
.verify-banner__actions { display: flex; flex-direction: column; gap: 6px; }
.verify-banner__btn {
    min-height: 36px; padding: 7px 12px; border-radius: 10px; cursor: pointer; white-space: nowrap;
    font: 800 13px/1.1 var(--font-ui, system-ui, sans-serif);
    background: var(--surface-2, #f9f6f2); color: var(--ink, #2a2622); border: 2px solid var(--border, #e5ddd5);
}
.verify-banner__btn--main { background: var(--ink, #2a2622); color: var(--paper, #f5f0ec); border-color: var(--ink, #2a2622); }
.verify-banner__btn:disabled { opacity: .6; cursor: progress; }
.verify-banner__close {
    position: absolute; top: 4px; right: 4px; width: 40px; height: 40px; border: 0; border-radius: 10px;
    background: transparent; color: var(--muted, #8a8177); font-size: 16px; cursor: pointer;
}
.verify-banner__close:hover { background: var(--surface-2, #f9f6f2); color: var(--ink, #2a2622); }
.verify-banner button:focus-visible { outline: 3px solid var(--sage-dark, #5f8069); outline-offset: 2px; }
body.verify-open { padding-bottom: 150px; }
@media (max-width: 520px) {
    .verify-banner { grid-template-columns: 1fr; padding: 12px 40px 12px 14px; }
    .verify-banner__actions { flex-direction: row; }
    .verify-banner__btn { flex: 1 1 0; min-width: 0; white-space: normal; }
    body.verify-open { padding-bottom: 270px; }
}
/* Банер стоїть НАД нижньою панеллю вкладок (інакше закриває її всю — 29.09). Класична: #bottomNav ≈ 66px. */
@media (max-width: 767px) {
    html.has-bottom-nav .verify-banner { bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
}
/* Зін: гортається не body, а .z-view — запас знизу даємо самій вкладці. Панель вкладок ≈ 67px + безпечна зона. */
html.ui-z.z-shell-on body.verify-open .z-view__inner { padding-bottom: 150px; }
@media (max-width: 899px) {
    html.ui-z.z-shell-on .verify-banner { bottom: calc(79px + var(--z-bottom, 0px)); }
    html.ui-z.z-shell-on.kb-open .verify-banner { bottom: calc(12px + var(--z-bottom, 0px)); }
}
@media (max-width: 520px) {
    html.ui-z.z-shell-on body.verify-open .z-view__inner { padding-bottom: 200px; }
}
/* ≥900px: зліва rail — банер по центру області вмісту */
@media (min-width: 900px) {
    html.ui-z.z-shell-on .verify-banner { left: calc(50% + var(--rail-w, 92px) / 2); width: min(560px, calc(100vw - var(--rail-w, 92px) - 24px)); }
}
@media (prefers-reduced-motion: reduce) { .verify-banner--on { animation: none; } }

/* ── Вбудований браузер (Telegram, Instagram…): підказка над «Увійти через Google» (app.js _initInAppNote) ── */
.inapp-note { margin: 0 0 12px; }
.inapp-note[hidden] { display: none !important; }
.inapp-note__acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.inapp-note__acts svg { width: 16px; height: 16px; }
.inapp-note__hint { margin-top: 8px !important; }
.inapp-note.is-pulse { animation: inappPulse .9s ease 2; }
@keyframes inappPulse { 50% { transform: scale(1.02); } }
html.ui-z .inapp-note.z-callout { grid-template-columns: minmax(0, 1fr); }
/* класичний вигляд: без ds/components.css */
html:not(.ui-z) .inapp-note { padding: 12px 14px; border-radius: 14px; border: 1.5px solid #e8b48a; background: #fdf0e4; color: #2b2622; text-align: left; }
html:not(.ui-z) .inapp-note .z-callout__title { display: block; font-size: 15px; margin-bottom: 4px; }
html:not(.ui-z) .inapp-note .z-callout__text { display: block; font-size: 13.5px; line-height: 1.45; }
html:not(.ui-z) .inapp-note__acts button { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 10px; border: 1.5px solid #2b2622; background: #fff; color: #2b2622; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
html:not(.ui-z) .inapp-note__acts button[data-inapp="open"] { background: #ef8748; border-color: #ef8748; color: #fff; }
html:not(.ui-z)[data-theme="dark"] .inapp-note { background: #3a2a1e; border-color: #8a5a36; color: #f3ece4; }
html:not(.ui-z)[data-theme="dark"] .inapp-note__acts button { background: #2a2420; color: #f3ece4; border-color: #f3ece4; }
@media (prefers-reduced-motion: reduce) { .inapp-note.is-pulse { animation: none; } }