/* NMT Platform Styles - Exact replica of official test platform */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary: #e63946;
    --primary-dark: #c1121f;
    --primary-light: #ff6b6b;
    --bg-white: #ffffff;
    --bg-light: #f5f5f5;
    --bg-gray: #fafafa;
    --text-dark: #333333;
    --text-muted: #666666;
    --text-light: #999999;
    --border-color: #e0e0e0;
    --border-light: #eeeeee;
    --warning-bg: #fff8e1;
    --warning-border: #ffcc80;
    --link-color: #1976d2;
    --success: #4caf50;
    --success-light: #e8f5e9;
    --danger: #f44336;
    --danger-light: #ffebee;
    --info: #2196f3;
    --info-light: #e3f2fd;
    /* Семантичні кольори тексту (зелений/бурштиновий/червоний) — ЄДИНІ токени для світлої й темної теми.
       У темній їх перевизначає .ui-v2[data-theme="dark"] (ui-v2.css); у стилях не хардкодити #227840/#c0392b. */
    --green-ink: #227840;
    --amber-ink: #a86400;
    --red-ink: #c0392b;
    --card-border: var(--border-color);
    --safe-top: env(safe-area-inset-top);
    --safe-bottom: env(safe-area-inset-bottom);
}

html, body {
    height: 100%;
    overscroll-behavior: none;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background: var(--bg-white);
    color: var(--text-dark);
    line-height: 1.5;
    font-size: 14px;
    overscroll-behavior-y: contain;
    -webkit-font-smoothing: antialiased;
}

/* Screen management */
.screen {
    display: none;
    min-height: 100vh;
}

.screen.active {
    display: block;
}

#testScreen.active {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /* Верх (панель попередження/таби) не під статус-баром. */
    padding-top: var(--safe-top);
}

/* ==================== MODE SELECT SCREEN ==================== */
.mode-select-page {
    min-height: 100vh;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.mode-select-container {
    width: 100%;
    max-width: 800px;
}

.mode-select-header {
    text-align: center;
    margin-bottom: 40px;
}

.mode-select-title {
    font-size: 32px;
    font-weight: 700;
    color: white;
    margin-bottom: 10px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.mode-select-subtitle {
    font-size: 16px;
    color: rgba(255,255,255,0.9);
}

/* Quick trainer card (без логіну) */
.quick-trainer-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: linear-gradient(135deg, #ffffff 0%, #fff5f5 100%);
    border: 2px solid rgba(230, 57, 70, 0.3);
    border-radius: 16px;
    padding: 16px 20px;
    text-decoration: none;
    margin-bottom: 20px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.12);
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.quick-trainer-card:hover {
    transform: translateY(-2px);
    border-color: var(--primary);
    box-shadow: 0 10px 30px rgba(230, 57, 70, 0.25);
}

.quick-trainer-icon {
    font-size: 36px;
    flex-shrink: 0;
}

.quick-trainer-info {
    flex: 1;
    text-align: left;
}

.quick-trainer-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 2px;
}

.quick-trainer-desc {
    font-size: 13px;
    color: var(--text-muted);
}

.quick-trainer-arrow {
    font-size: 22px;
    color: var(--primary);
    font-weight: 700;
    flex-shrink: 0;
}

@media (max-width: 600px) {
    .quick-trainer-card {
        padding: 14px 16px;
        gap: 12px;
    }
    .quick-trainer-icon { font-size: 30px; }
    .quick-trainer-title { font-size: 15px; }
    .quick-trainer-desc { font-size: 12px; }
}

/* «Встановити як програму» — картка на головній + модалка з інструкцією */
/* :not([hidden]) — щоб працювали і хрестик «сховати», і приховування в Telegram/standalone */
.pwa-card:not([hidden]) {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 16px; margin: 4px 0 18px;
    border: 2px dashed var(--border-color, rgba(0,0,0,.15));
    border-radius: 14px; cursor: pointer; background: transparent;
    transition: border-color .2s, background .2s;
}
.pwa-card:hover { border-color: #227840; background: rgba(34,120,64,.04); }
.pwa-card-icon { flex-shrink: 0; color: #227840; display: flex; }
.pwa-card-icon svg { width: 22px; height: 22px; }
.pwa-card-info { flex: 1; text-align: left; }
.pwa-card-title { font-size: 15px; font-weight: 700; color: var(--text-dark); }
.pwa-card-desc { font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.pwa-card-close {
    flex-shrink: 0; border: none; background: transparent; cursor: pointer;
    font-size: 15px; color: var(--text-muted); padding: 4px 6px; line-height: 1;
}
.pwa-card-close:hover { color: var(--text-dark); }

.pwa-modal {
    position: fixed; inset: 0; z-index: 4000;
    background: rgba(0,0,0,.55);
    display: flex; align-items: center; justify-content: center;
    padding: 16px; overflow-y: auto;
}
.pwa-modal.hidden { display: none; }
.pwa-modal-box {
    position: relative; width: 100%; max-width: 460px;
    max-height: 90vh; overflow-y: auto;
    background: var(--card-bg, #fff); color: var(--text-dark);
    border-radius: 18px; padding: 24px 22px;
    box-shadow: 0 18px 50px rgba(0,0,0,.3);
}
.pwa-modal-close {
    position: absolute; top: 12px; right: 14px;
    border: none; background: transparent; cursor: pointer;
    font-size: 18px; color: var(--text-muted); line-height: 1; padding: 4px;
}
.pwa-modal-title { font-size: 20px; font-weight: 800; margin: 0 28px 8px 0; }
.pwa-modal-lead { font-size: 14px; color: var(--text-muted); margin: 0 0 16px; line-height: 1.5; }
/* :not([hidden]) обовʼязково — інакше display:block перебиває атрибут hidden
   і кнопка висіла б завжди, навіть коли браузер не дає встановлення (клік у пустоту) */
.pwa-native-btn:not([hidden]) { display: block; width: 100%; margin-bottom: 18px; padding: 12px; }
.pwa-steps {
    border: 1px solid var(--border-color, rgba(0,0,0,.12));
    border-radius: 12px; padding: 14px 16px; margin-bottom: 12px;
}
/* Блок для платформи учня — виділяємо, решта лишається як довідка */
.pwa-steps--primary { border-color: #227840; border-width: 2px; background: rgba(34,120,64,.05); }
/* Telegram — рекомендований шлях (разом зі сповіщеннями) */
.pwa-steps--tg { border-color: #1cb0f6; border-width: 2px; background: rgba(28,176,246,.06); }
.pwa-steps--tg .pwa-steps-h { color: #1899d6; }
.pwa-steps--tg a { color: #1899d6; font-weight: 800; }
.pwa-steps-h {
    display: flex; align-items: center; gap: 7px;
    font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px;
    color: #227840; margin-bottom: 10px;
}
.pwa-steps-h svg { width: 15px; height: 15px; }
.pwa-list { margin: 0; padding-left: 20px; }
.pwa-list li { font-size: 14px; line-height: 1.7; color: var(--text-dark); }
.pwa-note { font-size: 12px; color: var(--text-muted); margin-top: 8px; }

[data-theme="dark"] .pwa-card:hover { background: rgba(46,160,87,.08); border-color: #2ea057; }
[data-theme="dark"] .pwa-card-icon, [data-theme="dark"] .pwa-steps-h { color: #58c07f; }
[data-theme="dark"] .pwa-steps--primary { border-color: #2ea057; background: rgba(46,160,87,.08); }
[data-theme="dark"] .pwa-modal-box { background: #241f1c; }

/* Кабінет → вкладка «Тренажери»: рекомендація + каталог */
.gym-reco {
    border: 2px solid #227840;
    border-radius: 16px;
    padding: 16px 18px;
    margin-bottom: 18px;
    background: linear-gradient(135deg, rgba(34, 120, 64, 0.07) 0%, rgba(34, 120, 64, 0.02) 100%);
}
.gym-reco-label {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px;
    color: #227840; margin-bottom: 10px;
}
.gym-reco-label svg { width: 14px; height: 14px; }
.gym-reco-row { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.gym-reco-title { font-size: 19px; font-weight: 800; color: var(--text-dark); }
.gym-reco-why { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.gym-reco-btn { display: inline-block; padding: 10px 22px; text-decoration: none; text-align: center; }
.gym-intro { margin-bottom: 14px; }
.gym-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.gym-grid .quick-trainer-card { margin-bottom: 0; }
.gym-errs {
    display: inline-block; margin-top: 4px; padding: 2px 8px;
    font-size: 11px; font-weight: 700; border-radius: 999px;
    background: rgba(230, 57, 70, 0.12); color: #c92a2a;
}
[data-theme="dark"] .gym-reco { background: rgba(46, 160, 87, 0.08); border-color: #2ea057; }
[data-theme="dark"] .gym-reco-label { color: #58c07f; }
[data-theme="dark"] .gym-errs { background: rgba(255, 107, 107, 0.15); color: #ff8787; }
@media (max-width: 600px) {
    .gym-grid { grid-template-columns: 1fr; }
}

/* Кнопка «Тренажери» — розгортає список карток */
button.trainers-toggle {
    width: 100%;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
}
.trainers-toggle-arrow { transition: transform 0.2s; }
.trainers-toggle[aria-expanded="true"] .trainers-toggle-arrow { transform: rotate(180deg); }
.trainers-list { animation: trainersIn 0.25s ease; }
.trainers-list .quick-trainer-card { margin-bottom: 12px; }
@keyframes trainersIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Mode Cards */
.mode-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 20px;
}

.mode-cards.mode-cards-single {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 600px) {
    .mode-cards {
        grid-template-columns: 1fr;
    }
}

/* ==================== МОБІЛЬНІ UX-ВИПРАВЛЕННЯ ДЛЯ ЛОГІН-ЕКРАНУ ==================== */
@media (max-width: 600px) {
    /* iOS Safari автоматично зумить при фокусі на input з font-size < 16px.
       16px і більше — без зуму. */
    .email-form input {
        font-size: 16px;
        padding: 14px;
        min-height: 48px;
        box-sizing: border-box;
    }

    /* Touch targets ≥ 48px для зручного тапу пальцем (iOS HIG: min 44px) */
    .btn-email-login,
    .btn-google,
    .btn-guest {
        font-size: 16px;
        padding: 14px 20px;
        min-height: 48px;
    }

    /* Менший padding щоб контент вміщався без скролу */
    .login-card {
        padding: 20px 18px;
        margin-bottom: 16px;
    }

    .login-page {
        padding: 16px;
        align-items: flex-start;
        padding-top: 60px;
    }

    .login-header {
        margin-bottom: 20px;
    }

    .login-title {
        font-size: 22px;
    }

    .login-subtitle {
        font-size: 13px;
    }

    .login-card-title {
        font-size: 17px;
        margin-bottom: 16px;
    }

    /* Форм-лінки (Створити акаунт / Забули пароль) — більший тап-таргет */
    .form-links {
        font-size: 14px;
        gap: 12px;
    }
    .form-links a {
        padding: 8px 4px;
        display: inline-block;
    }

    /* Стартовий екран mode-select — менше відступів, щоб усе вмістилось */
    .mode-select-page {
        align-items: flex-start;
        padding: 50px 16px 16px;
    }
    .mode-select-header {
        margin-bottom: 20px;
    }
    .mode-select-title {
        font-size: 22px;
    }
    .mode-select-subtitle {
        font-size: 13px;
    }
    .mode-card {
        padding: 24px 20px;
    }
    .mode-card-icon {
        font-size: 42px;
        margin-bottom: 10px;
    }
    .mode-card-title {
        font-size: 19px;
        margin-bottom: 12px;
    }
    .mode-card-features li {
        font-size: 13px;
        padding: 6px 0;
    }
    .mode-card-btn {
        padding: 14px 20px;
        font-size: 16px;
        min-height: 48px;
    }
}

.mode-card {
    background: white;
    border-radius: 20px;
    padding: 32px;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    transition: transform 0.3s, box-shadow 0.3s;
}

.mode-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.2);
}

.mode-card-icon {
    font-size: 56px;
    margin-bottom: 16px;
}

.mode-card-title {
    font-size: 22px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 16px;
}

.mode-card-features {
    list-style: none;
    text-align: left;
    margin-bottom: 24px;
    padding: 0;
}

.mode-card-features li {
    padding: 8px 0;
    color: var(--text-muted);
    font-size: 14px;
    border-bottom: 1px solid var(--border-light);
}

.mode-card-features li:last-child {
    border-bottom: none;
}

.mode-card-btn {
    width: 100%;
    padding: 14px 24px;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.mode-card.practice .mode-card-btn {
    background: linear-gradient(135deg, #4caf50 0%, #2e7d32 100%);
    color: white;
}

.mode-card.practice .mode-card-btn:hover {
    box-shadow: 0 4px 15px rgba(76, 175, 80, 0.4);
}

.mode-card.exam .mode-card-btn {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    color: white;
}

.mode-card.exam .mode-card-btn:hover {
    box-shadow: 0 4px 15px rgba(79, 70, 229, 0.4);
}

/* Посилання «Увійти / зареєструватися» під головною кнопкою */
.mode-card-login-link {
    display: block;
    width: 100%;
    margin-top: 12px;
    padding: 6px;
    background: none;
    border: none;
    color: #6b7280;
    font-size: 13px;
    text-decoration: underline;
    cursor: pointer;
    transition: color 0.2s;
}

.mode-card-login-link:hover {
    color: #2e7d32;
}

/* Back Button */
.back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    color: var(--text-dark);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    padding: 10px 16px;
    min-height: 44px;              /* стандартна зона дотику Apple */
    border-radius: 10px;
    margin-bottom: 16px;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.back-btn:hover,
.back-btn:active {
    background: var(--bg-white);
    border-color: var(--primary);
    color: var(--primary);
}

/* Test Mode Info */
.test-mode-info {
    margin-top: 24px;
    padding: 16px;
    background: var(--bg-light);
    border-radius: 12px;
}

.test-mode-info p {
    font-size: 13px;
    color: var(--text-muted);
    margin: 8px 0;
}

.btn-exam-submit {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%) !important;
}

.login-card-text {
    text-align: center;
    color: var(--text-muted);
    margin-bottom: 20px;
}

/* ==================== LOGIN SCREEN (Practice Mode) ==================== */
.login-page {
    min-height: 100vh;
    background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ec 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.login-container {
    width: 100%;
    max-width: 440px;
}

.login-header {
    text-align: center;
    margin-bottom: 32px;
}

.login-title {
    font-size: 28px;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 8px;
}

.login-subtitle {
    font-size: 15px;
    color: var(--text-muted);
}

.login-card {
    background: var(--bg-white);
    border-radius: 12px;
    padding: 32px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    margin-bottom: 24px;
}

.login-card-title {
    font-size: 18px;
    font-weight: 500;
    color: var(--text-dark);
    margin-bottom: 8px;
    text-align: center;
}

.login-card-text {
    font-size: 14px;
    color: var(--text-muted);
    text-align: center;
    margin-bottom: 24px;
    line-height: 1.6;
}

.btn-google {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 14px 20px;
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-dark);
    cursor: pointer;
    transition: all 0.2s;
}

.btn-google:hover {
    border-color: var(--text-muted);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.btn-google:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.google-icon {
    flex-shrink: 0;
}

/* Вхід через Apple — за гайдлайном Apple: чорна кнопка, білий логотип, тієї ж ширини, що й Google */
.btn-apple {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
    padding: 14px 20px;
    background: #000;
    border: 1px solid #000;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s;
}
.btn-apple[hidden] { display: none; }   /* display:flex вище перебивав атрибут hidden — кнопку бачили всі, а працює вона лише в iOS */
.btn-apple:hover { background: #1a1a1a; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); }
.btn-apple:disabled { opacity: 0.6; cursor: not-allowed; }
.apple-icon { flex-shrink: 0; }
/* У темній темі чорне на темному зливається — робимо кнопку світлою, як радить Apple */
[data-theme="dark"] .btn-apple { background: #fff; border-color: #fff; color: #000; }
[data-theme="dark"] .btn-apple:hover { background: #eee; }

.login-divider {
    display: flex;
    align-items: center;
    margin: 20px 0;
}

.login-divider::before,
.login-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-color);
}

.login-divider span {
    padding: 0 16px;
    font-size: 13px;
    color: var(--text-light);
}

.btn-guest {
    width: 100%;
    padding: 14px 20px;
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 14px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
}

.btn-guest:hover {
    background: var(--bg-white);
    border-color: var(--text-muted);
}

.login-note {
    text-align: center;
    font-size: 12px;
    color: var(--text-light);
    margin-top: 12px;
}

/* Exam Mode Button */
.exam-mode-section {
    margin-top: 0;
}

.btn-exam-mode {
    width: 100%;
    padding: 14px 20px;
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    color: white;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-exam-mode:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.4);
}

.btn-exam-mode:active {
    transform: translateY(0);
}

/* Email Form Styles */
.email-form {
    margin-bottom: 16px;
}

.email-form .form-group {
    margin-bottom: 12px;
}

.email-form input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 14px;
    transition: border-color 0.2s;
}

.email-form input:focus {
    outline: none;
    border-color: var(--primary);
}

.btn-email-login {
    width: 100%;
    padding: 12px 20px;
    background: var(--primary);
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    color: white;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-email-login:hover {
    background: var(--primary-dark);
}

.btn-email-login:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.form-links {
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
    font-size: 13px;
}

.form-links a {
    color: var(--link-color);
    text-decoration: none;
}

.form-links a:hover {
    text-decoration: underline;
}

.form-error {
    color: var(--danger);
    font-size: 13px;
    margin-bottom: 12px;
    display: none;
}

.form-error:not(:empty) {
    display: block;
}

.form-success {
    color: var(--success);
    font-size: 13px;
    margin-bottom: 12px;
    display: none;
}

.form-success:not(:empty) {
    display: block;
}

.form-text {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 16px;
    text-align: center;
}

.login-features {
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-muted);
}

.feature-icon {
    font-size: 18px;
}

/* User Bar */
.user-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: var(--bg-white);
    border-bottom: 1px solid var(--border-color);
}

.user-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-light);
    object-fit: cover;
}

.user-avatar[src=""],
.user-avatar:not([src]) {
    display: none;
}

.user-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-dark);
}

.btn-logout {
    background: none;
    border: 1px solid var(--border-color);
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 13px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
}

.btn-logout:hover {
    border-color: var(--primary);
    color: var(--primary);
}

/* ==================== TOP TABS ==================== */
.top-tabs, .subject-tabs {
    display: flex;
    background: var(--bg-white);
    border-bottom: 1px solid var(--border-color);
    padding: 0 20px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.top-tabs .tab,
.subject-tabs .tab {
    padding: 12px 20px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 14px;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
}

.top-tabs .tab:hover,
.subject-tabs .tab:hover {
    color: var(--primary);
}

.top-tabs .tab.active,
.subject-tabs .tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

/* ==================== BREADCRUMBS ==================== */
.breadcrumbs {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    background: var(--bg-light);
    border-bottom: 1px solid var(--border-color);
    font-size: 13px;
    gap: 8px;
}

.breadcrumbs a {
    color: var(--link-color);
    text-decoration: none;
}

.breadcrumbs a:hover {
    text-decoration: underline;
}

.breadcrumbs .separator {
    color: var(--text-light);
}

.breadcrumbs .current {
    color: var(--text-dark);
}

.breadcrumbs .close-btn {
    margin-left: auto;
    background: none;
    border: none;
    font-size: 18px;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px 8px;
}

.breadcrumbs .close-btn:hover {
    color: var(--text-dark);
}

/* ==================== TEST SELECT SCREEN ==================== */
.select-page {
    min-height: 100vh;
    /* Верхня навігація не має ховатися під статус-бар / нотч. */
    padding-top: var(--safe-top);
}

.select-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 20px;
}

.select-title {
    font-size: 24px;
    font-weight: 400;
    color: var(--text-dark);
    margin-bottom: 30px;
}

.test-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.test-group {
    border: 1px solid var(--border-color);
    border-radius: 4px;
    overflow: hidden;
}

.test-group-header {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background: var(--bg-white);
    cursor: pointer;
    gap: 10px;
}

.test-group-header .arrow {
    color: var(--text-muted);
    transition: transform 0.2s;
}

.test-group-header.expanded .arrow {
    transform: rotate(90deg);
}

.test-group-title {
    font-weight: 500;
    color: var(--text-dark);
}

.test-group-content {
    padding: 0 16px 12px 36px;
    display: none;
}

.test-group-content.show {
    display: block;
}

.test-item-link {
    display: block;
    color: var(--link-color);
    text-decoration: none;
    padding: 8px 0;
    font-size: 14px;
}

.test-item-link:hover {
    text-decoration: underline;
}

.test-item-meta {
    display: block;
    font-size: 12px;
    color: var(--danger);
    margin-top: 2px;
}

/* ==================== TEST INFO SCREEN ==================== */
.info-page {
    min-height: 100vh;
    background: var(--bg-white);
    /* Верхні таби не під статус-баром. */
    padding-top: var(--safe-top);
}

.info-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 40px 20px;
}

.info-title {
    font-size: 18px;
    font-weight: 400;
    color: var(--text-dark);
    margin-bottom: 20px;
}

.info-text {
    color: var(--text-dark);
    line-height: 1.7;
    margin-bottom: 30px;
}

.info-text p {
    margin-bottom: 16px;
}

.btn-start-test {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    /* Головна дія — має бути найпомітнішою, а не текстовим лінком. */
    background: var(--primary);
    color: #fff;
    border: none;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    padding: 15px 24px;
    min-height: 50px;
    border-radius: 12px;
    flex: 1 1 100%;                       /* власний рядок, на всю ширину */
    box-shadow: 0 4px 14px rgba(88, 204, 2, .30);
    transition: filter .15s ease, transform .05s ease;
}

.btn-start-test:hover { filter: brightness(1.06); }
.btn-start-test:active { transform: translateY(1px); }

/* Коли банер Telegram відкритий — резервуємо місце знизу, щоб він
   не перекривав головні кнопки (напр. «Розпочати роботу над тестом»). */
body.tg-open .info-container,
body.tg-open .select-container,
body.tg-open .cabinet-page {
    padding-bottom: calc(210px + var(--safe-bottom));
}

.btn-start-test .arrow {
    font-size: 18px;
}

/* ==================== WARNING BAR ==================== */
.warning-bar {
    background: var(--warning-bg);
    border-bottom: 1px solid var(--warning-border);
    padding: 12px 20px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    flex-shrink: 0;
    position: sticky;
    top: var(--safe-top);          /* прилипає нижче статус-бару, не під ним */
    z-index: 20;
}

.warning-bar.hidden {
    display: none;
}

.warning-content {
    flex: 1;
}

.warning-text {
    font-size: 13px;
    color: var(--text-dark);
    line-height: 1.6;
}

.warning-link {
    color: var(--primary);
    text-decoration: none;
}

.warning-link:hover {
    text-decoration: underline;
}

.hide-link {
    color: var(--link-color);
    text-decoration: none;
    margin-left: 8px;
}

.hide-link:hover {
    text-decoration: underline;
}

.warning-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.btn-finish-warning {
    background: var(--primary);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

.btn-finish-warning:hover {
    background: var(--primary-dark);
}

.timer-display {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 500;
    color: var(--text-dark);
}

.timer-icon {
    color: var(--primary);
}

/* ==================== MAIN LAYOUT ==================== */
.main-layout {
    display: flex;
    flex: 1;
    align-items: flex-start;
}

/* Task Section — у природному потоці сторінки, без внутрішнього скролу */
.task-section {
    flex: 1;
    padding-bottom: 40px;
    min-width: 0;
}

@media (max-width: 768px) {
    .task-section {
        padding-bottom: calc(80px + var(--safe-bottom));
    }
}

/* Inner Tabs (Українська мова, Математика, etc.) */
.inner-tabs {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-white);
    padding: 0;
}

.inner-tabs .btn-nav-prev,
.inner-tabs .btn-nav-next {
    background: none;
    border: none;
    padding: 12px 16px;
    color: var(--text-muted);
    font-size: 14px;
    cursor: pointer;
}

.inner-tabs .btn-nav-prev:hover,
.inner-tabs .btn-nav-next:hover {
    color: var(--text-dark);
}

.inner-tab {
    padding: 12px 24px;
    border: none;
    background: none;
    color: var(--text-muted);
    font-size: 14px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
}

.inner-tab:hover {
    color: var(--primary);
}

.inner-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

/* Subject Header */
.subject-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-light);
}

.subject-name {
    font-size: 18px;
    font-weight: 400;
    color: var(--text-dark);
    margin-bottom: 4px;
}

.bookmark-link {
    font-size: 13px;
    color: var(--primary);
    text-decoration: none;
}

.bookmark-link:hover {
    text-decoration: underline;
}

/* Instruction Box */
.instruction-box {
    background: #ffebee;
    border: 1px solid var(--primary);
    border-radius: 4px;
    padding: 16px 20px;
    margin: 20px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-dark);
}

.instruction-box p {
    margin: 0;
}

/* Task Block */
.task-block {
    padding: 20px;
}

/* Year badge for NMT tasks */
.year-badge {
    display: inline-block;
    background: linear-gradient(135deg, #7b1fa2 0%, #9c27b0 100%);
    color: white;
    font-size: 11px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 8px;
    vertical-align: middle;
}

/* Task images — компактний розмір за замовчуванням, клік → лайтбокс на повний екран */
.task-content img.task-image,
img.task-image {
    display: block;
    max-width: 280px;
    width: auto;
    height: auto;
    max-height: 240px;
    margin: 12px 0;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    cursor: zoom-in;
    transition: transform 0.15s;
    object-fit: contain;
}

.task-content img.task-image:hover,
img.task-image:hover {
    transform: scale(1.03);
    box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}

.task-content img.task-image.small,
img.task-image.small {
    max-width: 180px;
    max-height: 180px;
}

.task-content img.task-image.large,
img.task-image.large {
    max-width: 420px;
    max-height: 340px;
}

@media (min-width: 768px) {
    .task-content img.task-image,
    img.task-image {
        max-width: 360px;
        max-height: 280px;
    }
    .task-content img.task-image.small,
    img.task-image.small {
        max-width: 220px;
        max-height: 220px;
    }
    .task-content img.task-image.large,
    img.task-image.large {
        max-width: 520px;
        max-height: 400px;
    }
}

/* Image lightbox */
.image-lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 10000;
    justify-content: center;
    align-items: center;
    cursor: zoom-out;
}

.image-lightbox.active {
    display: flex;
}

.image-lightbox img {
    max-width: 95%;
    max-height: 95%;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    color: white;
    font-size: 32px;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
}

/* Show Warning Button */
.show-warning-btn {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 100;
    background: var(--warning-bg);
    color: var(--warning-text);
    border: 1px solid var(--warning-border);
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    transition: all 0.2s;
}

.show-warning-btn:hover {
    background: #ffc107;
    transform: translateY(-1px);
}

.show-warning-btn.hidden {
    display: none;
}

.show-icon {
    font-size: 16px;
}

/* Modal Overlay */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(3px);
}

.modal-overlay.hidden {
    display: none;
}

.modal-content {
    background: white;
    border-radius: 12px;
    padding: 32px;
    max-width: 450px;
    width: 90%;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    animation: modalAppear 0.2s ease-out;
}

@keyframes modalAppear {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.modal-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.modal-title {
    font-size: 22px;
    font-weight: 600;
    color: #333;
    margin-bottom: 16px;
}

.modal-text {
    font-size: 15px;
    color: #555;
    line-height: 1.6;
    margin-bottom: 12px;
}

.modal-text strong {
    color: #d32f2f;
}

.modal-buttons {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    justify-content: center;
}

.modal-btn {
    padding: 12px 28px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
}

.modal-btn-cancel {
    background: #f5f5f5;
    color: #666;
}

.modal-btn-cancel:hover {
    background: #e0e0e0;
}

.modal-btn-confirm {
    background: var(--primary);
    color: white;
}

.modal-btn-confirm:hover {
    background: #1565c0;
    transform: translateY(-1px);
}

.task-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 16px;
}

.task-content {
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 20px;
}

.task-content p {
    margin-bottom: 12px;
}

.task-content img {
    max-width: 100%;
    height: auto;
    margin: 16px 0;
}

/* Answer Options */
.answers-block {
    margin-bottom: 20px;
}

.answer-option {
    display: flex;
    align-items: flex-start;
    padding: 12px 16px;
    margin-bottom: 8px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
    background: var(--bg-white);
}

.answer-option:hover {
    border-color: var(--text-muted);
}

.answer-option.selected {
    border-color: var(--primary);
    background: #fff5f5;
}

.answer-radio {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-color);
    border-radius: 50%;
    margin-right: 12px;
    flex-shrink: 0;
    position: relative;
    margin-top: 2px;
}

.answer-option:hover .answer-radio {
    border-color: var(--text-muted);
}

.answer-option.selected .answer-radio {
    border-color: var(--primary);
}

.answer-option.selected .answer-radio::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background: var(--primary);
    border-radius: 50%;
}

.answer-text {
    flex: 1;
    font-size: 15px;
    line-height: 1.5;
}

/* Matching Task Styles - Drag and Drop */
.matching-container {
    display: flex;
    gap: 30px;
}

.matching-left {
    flex: 1;
}

.matching-right {
    width: 280px;
    flex-shrink: 0;
}

.matching-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.matching-item {
    flex: 1;
    background: #e3f2fd;
    border: 1px solid #90caf9;
    border-radius: 4px;
    padding: 12px 16px;
    font-size: 15px;
    line-height: 1.5;
}

.matching-item-number {
    font-weight: 600;
    margin-right: 8px;
}

.matching-arrow {
    color: var(--text-muted);
    font-size: 18px;
    flex-shrink: 0;
}

/* Drop Zone */
.matching-dropzone {
    min-width: 50px;
    min-height: 40px;
    border: 2px dashed var(--border-color);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-light);
    transition: all 0.2s;
    cursor: pointer;
}

.matching-dropzone:hover:not(.disabled) {
    border-color: var(--primary);
    background: #fff5f5;
}

.matching-dropzone.drag-over {
    border-color: var(--primary);
    background: #ffebee;
    transform: scale(1.05);
}

.matching-dropzone.disabled {
    cursor: default;
}

/* Answer badge in dropzone */
.matching-answer-badge {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #90caf9;
    border-radius: 4px;
    font-weight: 600;
    font-size: 14px;
    color: var(--text-dark);
}

/* Options Box - Green background */
.matching-options-box {
    background: #e8f5e9;
    border: 1px solid #a5d6a7;
    border-radius: 4px;
    padding: 16px;
}

.matching-options-title {
    font-weight: 600;
    margin-bottom: 12px;
    font-size: 14px;
    color: var(--text-dark);
}

.matching-option-item {
    padding: 12px 16px;
    background: #c8e6c9;
    border-radius: 4px;
    margin-bottom: 10px;
    font-size: 15px;
    cursor: grab;
    transition: all 0.2s;
    user-select: none;
}

.matching-option-item:last-child {
    margin-bottom: 0;
}

.matching-option-item:hover:not(.disabled):not(.used) {
    background: #a5d6a7;
    transform: translateX(-2px);
}

.matching-option-item:active:not(.disabled):not(.used) {
    cursor: grabbing;
}

.matching-option-item.dragging {
    opacity: 0.5;
}

/* Підказка над таблицею matching */
.matching-hint {
    background: var(--info-light);
    border: 1px solid #bbdefb;
    color: #0d47a1;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    margin-bottom: 12px;
    line-height: 1.4;
}

/* Вибрана літера через тап (click-to-select для мобільних) */
.matching-option-item.selected {
    background: var(--primary);
    color: white;
    border-color: var(--primary-dark);
    box-shadow: 0 2px 10px rgba(230, 57, 70, 0.4);
    transform: scale(1.03);
}

.matching-option-item.selected .matching-option-letter {
    color: white;
}

.matching-option-item.used {
    opacity: 0.4;
    cursor: default;
    text-decoration: line-through;
}

.matching-option-item.disabled {
    cursor: default;
}

.matching-option-letter {
    font-weight: 600;
    margin-right: 6px;
}

/* Input Answer */
.answer-input-container {
    margin-top: 16px;
}

.answer-input-label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 8px;
    color: var(--text-dark);
}

/* ==================== РЕЖИМ ПЕРЕГЛЯДУ ВІДПОВІДЕЙ ==================== */
/* Зін (.ui-z): стани варіантів — у ds/screens.css; тут під .ui-z вирізається (маркер). */
@supports (--zin-legacy: 1) {
.answer-option.correct {
    background: var(--success-light, #e8f5e9) !important;
    border: 1.5px solid var(--success, #4caf50) !important;
}

.answer-option.wrong {
    background: var(--danger-light, #ffebee) !important;
    border: 1.5px solid var(--danger, #f44336) !important;
}

.answer-option.correct .answer-radio {
    border-color: var(--success, #4caf50);
    background: var(--success, #4caf50);
}

.answer-option.wrong .answer-radio {
    border-color: var(--danger, #f44336);
    background: var(--danger, #f44336);
}

.answer-option.correct .answer-radio::after,
.answer-option.wrong .answer-radio::after {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 50%;
    margin: 4px auto;
}
}

.review-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-left: auto;
}

.review-tag {
    display: inline-block;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border-radius: 4px;
    white-space: nowrap;
}

.review-tag--correct {
    background: var(--success, #4caf50);
    color: #fff;
}

.review-tag--user {
    background: #1976d2;
    color: #fff;
}

.review-summary {
    margin-top: 16px;
    padding: 12px 14px;
    background: #f8f9fa;
    border: 1px solid #e4e9e4;
    border-radius: 10px;
}

.review-summary-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: baseline;
    padding: 4px 0;
}

.review-summary-row + .review-summary-row {
    border-top: 1px dashed #ddd;
    padding-top: 8px;
    margin-top: 4px;
}

.review-summary-label {
    font-size: 14px;
    color: #555;
    min-width: 160px;
}

.review-summary-value {
    font-size: 16px;
    font-weight: 700;
    color: #222;
}

.review-summary-value.is-correct {
    color: var(--success, #2e7d32);
}

.review-summary-value.is-wrong {
    color: var(--danger, #c62828);
}

.review-summary-value.is-empty {
    color: #999;
    font-style: italic;
    font-weight: 500;
}

/* === MATCHING в режимі перегляду === */
.review-row--correct {
    background: var(--success-light, #e8f5e9);
    border-radius: 6px;
}

.review-row--wrong {
    background: var(--danger-light, #ffebee);
    border-radius: 6px;
}

.review-row--empty {
    background: #fff3e0;
    border-radius: 6px;
}

@supports (--zin-legacy: 1) {
.matching-answer-badge.is-correct {
    background: var(--success, #4caf50) !important;
    color: #fff !important;
    border-color: var(--success, #4caf50) !important;
}

.matching-answer-badge.is-wrong {
    background: var(--danger, #f44336) !important;
    color: #fff !important;
    border-color: var(--danger, #f44336) !important;
    text-decoration: line-through;
}
}

.matching-correct-tag {
    margin-left: 12px;
    padding: 3px 9px;
    font-size: 13px;
    background: var(--success-light, #e8f5e9);
    color: var(--success, #2e7d32);
    border: 1px solid var(--success, #4caf50);
    border-radius: 4px;
    white-space: nowrap;
}

.matching-empty-mark {
    color: #bbb;
    font-size: 18px;
    font-weight: 700;
}

@media (max-width: 600px) {
    .review-summary-label {
        min-width: 100%;
    }
    .review-tags {
        margin-left: 0;
        margin-top: 6px;
        width: 100%;
    }
    .matching-correct-tag {
        margin-left: 0;
        margin-top: 4px;
    }
}

.answer-input-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
    max-width: 340px;
}

.answer-input {
    flex: 1;
    min-width: 0;
    padding: 12px 16px;
    font-size: 16px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    transition: border-color 0.2s;
}

.answer-input:focus {
    outline: none;
    border-color: var(--primary);
}

.answer-input-sign-btn {
    flex: 0 0 auto;
    min-width: 52px;
    min-height: 48px;
    padding: 0 14px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    color: var(--text-dark, #222);
    background: #fff;
    border: 1.5px solid var(--border-color, #d0d0d0);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.05s;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.answer-input-sign-btn:hover {
    background: #f5f5f5;
    border-color: #888;
}

.answer-input-sign-btn:active {
    transform: scale(0.96);
    background: #ececec;
}

.answer-input-sign-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.answer-input-hint {
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--text-muted, #666);
    line-height: 1.4;
}

.answer-input-hint b {
    color: var(--text-dark, #222);
}

/* ==================== СЕКЦІЯ НМТ-2026 (помітна, з анімацією) ==================== */
.nmt2026-section {
    position: relative;
    margin-bottom: 24px;
    padding: 4px;
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 25%, #c0392b 50%, #ee5a6f 75%, #ff6b6b 100%);
    background-size: 300% 300%;
    border-radius: 16px;
    animation: nmt2026-gradient 6s ease-in-out infinite;
    box-shadow: 0 8px 32px rgba(230, 57, 70, 0.35);
}

@keyframes nmt2026-gradient {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.nmt2026-section .test-group-header {
    background: white;
    border-radius: 12px 12px 0 0;
    padding: 14px 18px;
    margin: 0;
    border: none;
}

.nmt2026-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    font-size: 17px;
    color: #c0392b;
    letter-spacing: 0.3px;
}

.nmt2026-pulse {
    display: inline-block;
    font-size: 22px;
    animation: nmt2026-heartbeat 1.2s ease-in-out infinite;
    transform-origin: center;
}

@keyframes nmt2026-heartbeat {
    0%, 28%, 70%, 100% { transform: scale(1); }
    14%   { transform: scale(1.3); }
    42%   { transform: scale(1.15); }
}

.nmt2026-badge {
    display: inline-block;
    padding: 3px 10px;
    background: linear-gradient(135deg, #ffd700 0%, #ffa500 100%);
    color: #5a3000;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    animation: nmt2026-badge-glow 2s ease-in-out infinite;
}

@keyframes nmt2026-badge-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.6); }
    50%      { box-shadow: 0 0 14px 4px rgba(255, 215, 0, 0.7); }
}

.nmt2026-section .test-group-content {
    background: white;
    border-radius: 0 0 12px 12px;
    padding: 16px;
}

.nmt2026-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.nmt2026-card {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 16px !important;
    border-radius: 12px;
    text-decoration: none;
    color: var(--text-dark);
    position: relative;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
    border: 2px solid transparent;
    background: var(--bg-light);
}

.nmt2026-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 107, 107, 0.08) 0%, rgba(230, 57, 70, 0.04) 100%);
    pointer-events: none;
}

.nmt2026-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(230, 57, 70, 0.25);
    border-color: var(--primary);
}

.nmt2026-card--official {
    background: linear-gradient(135deg, #fff5f5 0%, #ffe8e8 100%);
    border-color: rgba(230, 57, 70, 0.25);
}

.nmt2026-card--author {
    background: linear-gradient(135deg, #f5f8ff 0%, #e8edff 100%);
    border-color: rgba(79, 70, 229, 0.25);
}

.nmt2026-card--author:hover {
    box-shadow: 0 8px 20px rgba(79, 70, 229, 0.25);
    border-color: #4f46e5;
}

.nmt2026-card-icon {
    font-size: 26px;
    animation: nmt2026-icon-pulse 2s ease-in-out infinite;
}

@keyframes nmt2026-icon-pulse {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50%      { transform: scale(1.08) rotate(-3deg); }
}

.nmt2026-card-name {
    font-weight: 700;
    font-size: 15px;
    line-height: 1.25;
    z-index: 1;
}

.nmt2026-card-meta {
    font-size: 12px;
    color: var(--text-muted);
    z-index: 1;
}

.nmt2026-card-tag {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 3px 9px;
    background: var(--primary);
    color: white;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    z-index: 2;
}

.nmt2026-card-tag--author {
    background: #4f46e5;
}

@media (max-width: 600px) {
    .nmt2026-grid {
        grid-template-columns: 1fr;
    }
    .nmt2026-card { padding: 14px !important; }
    .nmt2026-title { font-size: 15px; }
    .nmt2026-pulse { font-size: 20px; }
    .nmt2026-badge { font-size: 10px; }
}

/* ==================== TELEGRAM БАНЕР (плаваючий, закривається) ==================== */
.tg-banner {
    position: fixed;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    z-index: 9000;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #0088cc 0%, #006699 100%);
    color: white;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 136, 204, 0.4), 0 2px 6px rgba(0,0,0,0.15);
    max-width: 540px;
    width: calc(100% - 32px);
    font-size: 14px;
    animation: tg-banner-slide-up 0.4s ease-out;
}

@keyframes tg-banner-slide-up {
    from { opacity: 0; transform: translate(-50%, 30px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

.tg-banner.hidden {
    display: none;
}

.tg-banner-icon {
    font-size: 28px;
    flex-shrink: 0;
}

.tg-banner-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    min-width: 0;
}

.tg-banner-text strong {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 2px;
}

.tg-banner-text span {
    font-size: 12px;
    opacity: 0.9;
}

.tg-banner-btn {
    flex-shrink: 0;
    background: white;
    color: #0088cc;
    text-decoration: none;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    transition: transform 0.15s, box-shadow 0.15s;
}

.tg-banner-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.tg-banner-close {
    background: rgba(255,255,255,0.15);
    border: none;
    color: white;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s;
}

.tg-banner-close:hover {
    background: rgba(255,255,255,0.3);
}

@media (max-width: 600px) {
    .tg-banner {
        flex-wrap: wrap;
        padding: 10px 12px;
    }
    .tg-banner-text { flex: 1 1 100%; order: 2; margin-top: 4px; }
    .tg-banner-icon { order: 1; }
    .tg-banner-btn { order: 3; }
    .tg-banner-close { order: 4; }
    .tg-banner-text strong { font-size: 14px; }
    .tg-banner-text span { font-size: 11px; }
    .tg-banner-btn { padding: 7px 12px; font-size: 12px; }
}

/* ==================== Кнопка «До списку тестів» ==================== */
.info-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 8px;
}

.btn-back-tests {
    background: var(--bg-light);
    color: var(--text-dark);
    border: 1px solid var(--border-color);
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-back-tests:hover {
    background: var(--bg-white);
    border-color: var(--text-muted);
}

.btn-back-tests .arrow {
    font-size: 18px;
}

.btn-share-test {
    background: var(--info-light);
    color: #0d47a1;
    border: 1px solid #bbdefb;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-share-test:hover {
    background: #bbdefb;
    border-color: #2196f3;
}

/* ==================== TELEGRAM КАРТКА (постійна, на головній) ==================== */
.tg-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: linear-gradient(135deg, #0088cc 0%, #006699 100%);
    color: white;
    border-radius: 16px;
    padding: 16px 20px;
    text-decoration: none;
    margin-bottom: 20px;
    box-shadow: 0 8px 24px rgba(0, 136, 204, 0.3);
    transition: transform 0.2s, box-shadow 0.2s;
}

.tg-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(0, 136, 204, 0.45);
}

.tg-card-icon {
    font-size: 36px;
    flex-shrink: 0;
}

.tg-card-info {
    flex: 1;
    text-align: left;
    min-width: 0;
}

.tg-card-title {
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 2px;
}

.tg-card-desc {
    font-size: 13px;
    opacity: 0.9;
}

.tg-card-arrow {
    font-size: 22px;
    font-weight: 700;
    flex-shrink: 0;
}

@media (max-width: 600px) {
    .tg-card { padding: 14px 16px; gap: 12px; }
    .tg-card-icon { font-size: 30px; }
    .tg-card-title { font-size: 15px; }
    .tg-card-desc { font-size: 12px; }
}

/* Untimed mode toggle (на екрані інформації перед тестом) */
.untimed-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    margin: 16px 0;
    background: var(--info-light);
    border: 1px solid #bbdefb;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-dark);
    max-width: 480px;
}

.untimed-toggle input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--primary);
}

.untimed-toggle.hidden {
    display: none;
}

/* Save Button — у природному потоці після варіантів відповідей */
.btn-save {
    background: var(--primary);
    color: white;
    border: none;
    padding: 12px 28px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-save:hover {
    background: var(--primary-dark);
}

.btn-save.saved {
    background: var(--success);
}

/* Режим тренування: кнопка «Перевірити» та «Наступне» */
.btn-save.training-check {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
}
.btn-save.training-check:hover {
    background: linear-gradient(135deg, #b45309 0%, #92400e 100%);
}
.btn-save.training-next {
    background: linear-gradient(135deg, #4caf50 0%, #2e7d32 100%);
}
.btn-save.training-next:hover {
    background: linear-gradient(135deg, #2e7d32 0%, #1b5e20 100%);
}

/* Підсвічування перемикача режиму тренування */
.training-toggle {
    background: #fff7ed;
    border-color: var(--instr-border, #f0a868);
}

/* ==================== TASKS SIDEBAR ==================== */
.tasks-sidebar {
    width: 200px;
    background: var(--bg-white);
    border-left: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    /* Прилипає праворуч під warning-bar при прокрутці сторінки */
    position: sticky;
    top: 96px;
    max-height: calc(100vh - 96px);
    overflow-y: auto;
    align-self: flex-start;
}

.sidebar-title {
    padding: 16px;
    font-weight: 500;
    color: var(--text-dark);
    border-bottom: 1px solid var(--border-light);
}

.task-grid {
    padding: 16px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    overflow-y: auto;
}

.task-btn {
    aspect-ratio: 1;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-white);
    color: var(--text-dark);
}

.task-btn:hover {
    border-color: var(--primary);
    transform: scale(1.05);
}

.task-btn.current {
    border-color: var(--link-color);
    box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.3);
}

.task-btn.answered {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

/* ==================== MOBILE NAVIGATION ==================== */
.mobile-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-white);
    border-top: 1px solid var(--border-color);
    padding: 12px 20px;
    padding-bottom: calc(12px + var(--safe-bottom));
    justify-content: space-between;
    align-items: center;
    z-index: 100;
}

.mobile-btn {
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    padding: 12px 24px;
    border-radius: 4px;
    font-size: 18px;
    cursor: pointer;
}

.mobile-btn.tasks-btn {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
    font-size: 14px;
    font-weight: 500;
}

/* Mobile Overlay */
.mobile-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 200;
    align-items: flex-end;
}

.mobile-overlay.active {
    display: flex;
}

.mobile-panel {
    background: var(--bg-white);
    width: 100%;
    max-height: 70vh;
    border-radius: 16px 16px 0 0;
    display: flex;
    flex-direction: column;
    padding-bottom: var(--safe-bottom);
}

.mobile-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-light);
    font-weight: 500;
}

.close-panel {
    background: none;
    border: none;
    font-size: 20px;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
}

.mobile-task-grid {
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    overflow-y: auto;
}

.mobile-task-grid .task-btn {
    font-size: 16px;
}

/* ==================== RESULTS SCREEN ==================== */
.results-page {
    max-width: 600px;
    margin: 0 auto;
    /* safe-area: «← Повернутися» вгорі — не під статус-баром / нотчем у застосунку */
    padding: calc(40px + var(--safe-top)) 20px 40px;
    text-align: center;
}

.results-header h1 {
    font-size: 24px;
    font-weight: 500;
    color: var(--text-dark);
    margin-bottom: 8px;
}

.results-header p {
    color: var(--text-muted);
    margin-bottom: 30px;
}

/* «← До …» (лише залогіненому) — ліворуч над заголовком, хоч сторінка й вирівняна по центру */
.results-back {
    display: flex;
    width: fit-content;
    margin: 0 auto 16px 0;
}

.results-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.result-card {
    background: var(--bg-light);
    border-radius: 8px;
    padding: 20px 12px;
}

.result-card.main {
    grid-column: span 2;
    background: var(--primary);
    color: white;
}

.result-card.main.scaled {
    background: linear-gradient(135deg, #2e7d32 0%, #4caf50 100%);
}

.result-card.main.not-passed {
    background: linear-gradient(135deg, #c62828 0%, #f44336 100%);
}

.result-card.main .result-value {
    font-size: 42px;
    color: white;
}

.result-value {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 4px;
}

.result-value.correct { color: var(--success); }
.result-value.wrong { color: var(--danger); }
.result-value.skipped { color: #ff9800; }

.result-label {
    font-size: 12px;
    color: var(--text-muted);
}

.result-card.main .result-label {
    color: rgba(255, 255, 255, 0.8);
}

.results-time {
    margin-bottom: 30px;
    font-size: 14px;
    color: var(--text-muted);
}

.results-time strong {
    color: var(--text-dark);
    font-size: 18px;
    margin-left: 8px;
}

.results-grid-section {
    text-align: left;
    margin-bottom: 30px;
}

.results-grid-section h3 {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 12px;
}

.results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
    gap: 6px;
}

.result-item {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: transform 0.15s;
}

.result-item:hover {
    transform: scale(1.1);
}

.result-item.correct {
    background: var(--success-light);
    color: var(--success);
    border: 1px solid var(--success);
}

.result-item.wrong {
    background: var(--danger-light);
    color: var(--danger);
    border: 1px solid var(--danger);
}

.result-item.skipped {
    background: #fff3e0;
    color: #ff9800;
    border: 1px solid #ff9800;
}

.result-item.partial {
    background: #fff8e1;
    color: #f57c00;
    border: 1px solid #f57c00;
}

.results-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.btn {
    padding: 14px 24px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.btn-primary {
    background: var(--primary);
    color: white;
    border: none;
}

.btn-primary:hover {
    background: var(--primary-dark);
}

.btn-secondary {
    background: var(--bg-white);
    color: var(--text-dark);
    border: 1px solid var(--border-color);
}

.btn-secondary:hover {
    border-color: var(--primary);
    color: var(--primary);
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 768px) {
    .tasks-sidebar {
        display: none;
    }

    /* Нижня панель ‹/› потрібна ЛИШЕ на екрані проходження тесту,
       інакше на кабінеті/адмінці висить порожній фіксований бар. */
    #testScreen.active .mobile-nav {
        display: flex;
    }

    .warning-bar {
        flex-direction: column;
        gap: 12px;
    }

    .warning-actions {
        width: 100%;
        justify-content: space-between;
    }

    .inner-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .inner-tab {
        padding: 12px 16px;
        white-space: nowrap;
    }

    .matching-container {
        flex-direction: column;
    }

    .matching-right {
        width: 100%;
    }

    .instruction-box {
        margin: 16px;
        padding: 14px 16px;
        font-size: 13px;
    }

    .task-block {
        padding: 16px;
    }

    .task-section {
        padding-bottom: calc(80px + var(--safe-bottom));
    }

    .results-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .result-card.main {
        grid-column: span 2;
    }
}

@media (max-width: 480px) {
    .top-tabs .tab,
    .subject-tabs .tab {
        padding: 10px 14px;
        font-size: 13px;
    }

    .select-title {
        font-size: 18px;
    }

    .timer-display {
        font-size: 16px;
    }

    .btn-finish-warning {
        padding: 8px 14px;
        font-size: 13px;
    }
}

/* KaTeX overrides */
.katex {
    font-size: 1.1em;
}

.task-content .katex-display {
    margin: 16px 0;
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* Print styles */
@media print {
    .warning-bar,
    .tasks-sidebar,
    .mobile-nav,
    .btn-save,
    .top-tabs,
    .subject-tabs,
    .breadcrumbs {
        display: none !important;
    }

    .main-layout {
        display: block;
    }

    .task-section {
        padding: 0;
    }
}

/* ==========================================
   CABINET PAGE STYLES
   ========================================== */

.cabinet-page {
    max-width: 900px;
    margin: 0 auto;
    /* safe-area: хедер («Назад…») не під статус-баром, а низ — не під home-індикатором. */
    padding: calc(20px + var(--safe-top)) 20px calc(24px + var(--safe-bottom));
}

.cabinet-header {
    margin-bottom: 24px;
}

.cabinet-title {
    font-size: 28px;
    font-weight: 600;
    color: var(--text-dark);
    margin-top: 16px;
}

/* User Card */
.cabinet-user-card {
    display: flex;
    align-items: center;
    gap: 20px;
    background: white;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    margin-bottom: 24px;
}

.cabinet-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), #7c4dff);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    color: white;
    overflow: hidden;
}

.cabinet-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cabinet-user-name {
    font-size: 22px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 4px;
}

.cabinet-user-email {
    font-size: 14px;
    color: var(--text-light);
}

/* Stats Cards */
.cabinet-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 32px;
}

.stat-card {
    background: white;
    padding: 20px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.stat-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 4px;
}

.stat-label {
    font-size: 13px;
    color: var(--text-light);
}

/* History Section */
.cabinet-history {
    background: white;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.history-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.history-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.history-loading {
    text-align: center;
    padding: 40px;
    color: var(--text-light);
}

.history-empty {
    text-align: center;
    padding: 40px;
    color: var(--text-light);
}

.history-empty-icon {
    font-size: 48px;
    margin-bottom: 12px;
}

.history-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    background: #f8f9fa;
    border-radius: 8px;
    transition: all 0.2s;
}

.history-item:hover {
    background: #f0f0f0;
}

.history-item-info {
    flex: 1;
}

.history-item-name {
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 4px;
}

.history-item-date {
    font-size: 13px;
    color: var(--text-light);
}

.history-item-score {
    text-align: right;
}

.history-score-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--primary);
}

.history-score-value.good {
    color: var(--success);
}

.history-score-value.medium {
    color: #ff9800;
}

.history-score-value.bad {
    color: var(--danger);
}

.history-score-details {
    font-size: 12px;
    color: var(--text-light);
}

/* Cabinet Button */
.btn-cabinet {
    background: var(--primary);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-cabinet:hover {
    background: #1565c0;
}

.user-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .cabinet-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-bottom: 20px;
    }

    /* Компактна картка: аватар зліва, ім'я/email праворуч (замість високого стовпця). */
    .cabinet-user-card {
        flex-direction: row;
        text-align: left;
        align-items: center;
        gap: 14px;
        padding: 14px 16px;
        margin-bottom: 16px;
    }
    .cabinet-avatar {
        width: 54px;
        height: 54px;
        font-size: 24px;
        flex-shrink: 0;
    }
    .cabinet-user-name { font-size: 18px; }

    .stat-card { padding: 14px 12px; }

    .stat-value {
        font-size: 22px;
    }

    .history-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .history-item-score {
        text-align: left;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}

/* Cabinet Tabs */
.cabinet-tabs {
    /* після результатів кабінет гортається одразу до вкладок (_revealCabinetTabs) — не під статус-бар */
    scroll-margin-top: calc(12px + var(--safe-top));
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    background: #f0f0f0;
    padding: 6px;
    border-radius: 10px;
}

.cabinet-tab {
    flex: 1;
    padding: 12px 20px;
    border: none;
    background: transparent;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-light);
    cursor: pointer;
    transition: all 0.2s;
}

.cabinet-tab:hover {
    color: var(--text-dark);
}

.cabinet-tab.active {
    background: white;
    color: var(--primary);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.cabinet-history.hidden {
    display: none;
}

/* ===== Домашні завдання (ДЗ) + адмінка ===== */
.hw-card {
    display: flex; align-items: center; gap: 14px;
    background: #fff; border: 1px solid #e4e9e4; border-radius: 12px;
    padding: 14px 16px; margin-bottom: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.hw-card-main { flex: 1; min-width: 0; }
.hw-card-title { font-weight: 600; color: #1f2937; font-size: 15px; margin-bottom: 4px; }
.hw-card-meta { font-size: 13px; color: #6b7280; line-height: 1.5; }
.hw-card-status { margin-top: 6px; }
.hw-badge { display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 20px; }
.hw-badge--done { background: #e6f4ea; color: #227840; }
.hw-badge--todo { background: #fdecea; color: #c0392b; }
.hw-due { font-size: 12px; color: #b26a00; background: #fff3e0; padding: 2px 8px; border-radius: 10px; margin-left: 6px; font-weight: 500; }
.hw-muted { color: #6b7280; }
.hw-start-btn {
    flex-shrink: 0; background: #227840; color: #fff; border: none;
    border-radius: 10px; padding: 10px 18px; font-size: 14px; font-weight: 600;
    cursor: pointer; transition: background .15s;
}
.hw-start-btn:hover { background: #1b5e33; }
.hw-del-btn {
    flex-shrink: 0; background: #fdecea; color: #c0392b; border: none;
    border-radius: 8px; padding: 8px 12px; font-size: 16px; cursor: pointer;
}
.hw-del-btn:hover { background: #f8d7d5; }

.admin-card {
    background: #fff; border: 1px solid #e4e9e4; border-radius: 14px;
    padding: 20px; margin-bottom: 18px;
}
/* Згортабельна секція «Додати учня» — щоб адмінка одразу відкривалась на списку. */
.admin-collapse { padding: 0; overflow: hidden; }
.admin-summary {
    margin: 0; padding: 16px 20px; cursor: pointer; list-style: none;
    display: flex; align-items: center; justify-content: space-between;
    font-size: 16px; font-weight: 600; color: #1f2937; user-select: none;
    min-height: 52px;
}
.admin-summary::-webkit-details-marker { display: none; }
.admin-summary::after {
    content: "▾"; font-size: 13px; color: #9ca3af; margin-left: 12px;
    transition: transform .2s ease;
}
.admin-collapse[open] .admin-summary::after { transform: rotate(180deg); }
.admin-collapse-body { padding: 0 20px 20px; }
[data-theme="dark"] .admin-summary { color: var(--ink, #e8eef7); }
.admin-h3 { margin: 0 0 16px; font-size: 17px; color: #1f2937; }
.admin-field { display: block; font-size: 13px; color: #6b7280; margin-bottom: 12px; font-weight: 500; }
.admin-field input {
    display: block; width: 100%; margin-top: 5px; padding: 10px 12px;
    border: 1px solid #d1d5db; border-radius: 9px; font-size: 15px; box-sizing: border-box;
}
.admin-row { display: flex; gap: 12px; flex-wrap: wrap; }
.admin-row .admin-field { flex: 1; min-width: 90px; }
.admin-types-title { font-size: 13px; color: #6b7280; font-weight: 500; margin: 6px 0 8px; }
.admin-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; margin-bottom: 12px; }
.admin-type-check {
    display: flex; align-items: center; gap: 8px; font-size: 14px; color: #374151;
    background: #f6f8f6; border: 1px solid #e4e9e4; border-radius: 9px; padding: 9px 11px; cursor: pointer;
}
.admin-type-check input { width: 17px; height: 17px; accent-color: #227840; }
.admin-pool { font-size: 13px; color: #227840; font-weight: 600; margin-bottom: 14px; }
.admin-msg { margin-top: 12px; font-size: 14px; color: #c0392b; font-weight: 500; }
.admin-msg--ok { color: #227840; }

/* ===== ДЗ: помітки на помилках (екран результатів) ===== */
.hw-flag-hint { font-size: 13px; color: #6b7280; margin: 0 0 12px; }
.hw-flag-row { background: #fff; border: 1px solid #e4e9e4; border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; }
.hw-flag-q { font-size: 14px; color: #1f2937; margin-bottom: 10px; line-height: 1.5; }
.hw-flag-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.hw-flag-btn { border: 1px solid #d1d5db; background: #f6f8f6; color: #374151; border-radius: 20px; padding: 7px 14px; font-size: 13px; font-weight: 500; cursor: pointer; transition: all .12s; }
.hw-flag-btn:hover { border-color: #227840; }
.hw-flag-btn.active { background: #227840; color: #fff; border-color: #227840; }

/* ===== Адмін: спроби + перегляд роботи ===== */
.hw-card-subs { margin-top: 6px; }
.hw-sub-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; color: #374151; padding: 4px 0; border-top: 1px dashed #eef1ee; }
.hw-sub-row:first-child { border-top: none; }
.hw-note-tag { background: #fff3e0; color: #b26a00; border-radius: 10px; padding: 1px 7px; font-size: 12px; }
.hw-view-btn { flex-shrink: 0; background: #eef5ef; color: #227840; border: 1px solid #cfe3d4; border-radius: 8px; padding: 5px 10px; font-size: 12px; font-weight: 600; cursor: pointer; }
.hw-view-btn:hover { background: #227840; color: #fff; }

.review-modal-content { max-width: 720px; width: 92%; max-height: 86vh; overflow-y: auto; text-align: left; position: relative; padding: 24px; }
.review-modal-close { position: absolute; top: 14px; right: 16px; background: none; border: none; font-size: 20px; color: #9ca3af; cursor: pointer; }
.rv-title { margin: 0 0 2px; font-size: 18px; color: #1f2937; }
.rv-sub { font-size: 14px; color: #6b7280; margin-bottom: 16px; }
.rv-task { border: 1px solid #e4e9e4; border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; }
.rv-task.rv-ok { border-color: #cfe3d4; background: #f6fbf7; }
.rv-task.rv-bad { border-color: #f1c9c6; background: #fdf4f3; }
.rv-q { font-size: 14px; color: #1f2937; line-height: 1.5; margin-bottom: 8px; }
.rv-img { max-width: 100%; max-height: 220px; display: block; margin: 6px 0; }
.rv-ans { font-size: 13px; color: #374151; }
.rv-note { margin-top: 8px; font-size: 13px; font-weight: 600; color: #b26a00; background: #fff3e0; border-radius: 8px; padding: 6px 10px; display: inline-block; }

/* ДЗ: галочка НМТ-оцінювання + правильна відповідь у помітках */
.admin-check { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #374151; margin-bottom: 14px; cursor: pointer; }
.admin-check input { width: 17px; height: 17px; accent-color: #227840; }
.hw-flag-correct { font-size: 13px; color: #227840; margin-bottom: 10px; }

/* Адмін: кнопки на картці ДЗ (переглянути/видалити) */
.hw-card-actions { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; align-items: stretch; }
.hw-card-actions .hw-view-btn { white-space: nowrap; }
#previewAnother { margin-bottom: 14px; }

/* ===== Лендинг вибору категорії тестів ===== */
.cat-grid { display: grid; grid-template-columns: 1fr; gap: 14px; max-width: 720px; margin: 0 auto; }
.cat-card {
    display: flex; align-items: center; gap: 16px; background: #fff;
    border: 1px solid #e4e9e4; border-radius: 16px; padding: 18px 20px;
    text-decoration: none; color: inherit; box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.cat-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(34,120,64,0.13); border-color: #227840; }
.cat-card-icon {
    font-size: 30px; flex-shrink: 0; width: 56px; height: 56px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 14px; background: #f0f6f1;
}
.cat-card--official .cat-card-icon { background: #fdeceb; }
.cat-card--author   .cat-card-icon { background: #eef7f0; }
.cat-card--generate .cat-card-icon { background: #fff4e0; }
.cat-card--archive  .cat-card-icon { background: #eef1f6; }
.cat-card-body { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cat-card-title { font-size: 18px; font-weight: 700; color: #1f2937; }
.cat-card-desc { font-size: 14px; color: #6b7280; line-height: 1.35; }
.cat-card-count {
    font-size: 12px; font-weight: 600; color: #227840; background: #eaf4ec;
    padding: 4px 11px; border-radius: 20px; white-space: nowrap; flex-shrink: 0;
}
.cat-card-arrow { font-size: 26px; color: #c3ccc4; flex-shrink: 0; line-height: 1; }

.cat-back { background: none; border: none; color: #227840; font-size: 15px; font-weight: 600; cursor: pointer; padding: 4px 0; margin-bottom: 6px; }
.cat-back:hover { text-decoration: underline; }
.cat-detail-title { font-size: 22px; color: #1f2937; margin: 4px 0 18px; display: flex; align-items: center; gap: 10px; }
.cat-detail-count { font-size: 13px; font-weight: 600; color: #227840; background: #eaf4ec; padding: 3px 10px; border-radius: 20px; }
.cat-empty { color: #9ca3af; padding: 10px 0; }

@media (max-width: 560px) {
    .cat-card { padding: 14px 15px; gap: 12px; }
    .cat-card-icon { width: 46px; height: 46px; font-size: 24px; }
    .cat-card-title { font-size: 16px; }
    .cat-card-desc { font-size: 13px; }
    .cat-card-arrow { display: none; }
}

/* Адмін: вкладки ДЗ / Учні */
.admin-tabs { display:flex; gap:8px; margin-bottom:18px; }
.admin-tab { flex:1; background:#f6f8f6; border:1px solid #e4e9e4; color:#374151; font-size:15px; font-weight:600;
  padding:11px 14px; border-radius:10px; cursor:pointer; }
.admin-tab.active { background:#227840; color:#fff; border-color:#227840; }

/* Адмін: рядки учнів */
.st-row { display:flex; align-items:center; gap:14px; background:#fff; border:1px solid #e4e9e4; border-radius:12px;
  padding:12px 15px; margin-bottom:9px; }
.st-main { flex:1; min-width:0; }
.st-name { font-weight:700; color:#1f2937; font-size:15px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.st-code { font-family:ui-monospace,monospace; font-size:12px; font-weight:700; color:#227840; background:#eaf4ec;
  padding:2px 8px; border-radius:6px; letter-spacing:.02em; }
.st-meta { font-size:13px; color:#6b7280; margin-top:3px; }
.st-status { margin-top:6px; display:flex; align-items:center; gap:10px; }

/* Адмін: дії на картці учня */
.st-actions { display:flex; gap:7px; flex-wrap:wrap; margin-top:9px; }
.st-btn { background:#f0f6f1; border:1px solid #cfe3d4; color:#227840; font-size:12px; font-weight:600;
  padding:6px 11px; border-radius:8px; cursor:pointer; }
.st-btn:hover:not(:disabled) { background:#227840; color:#fff; }
.st-btn:disabled { opacity:.4; cursor:not-allowed; }

/* Статистика учня (модалка) */
.st-stat-cards { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:6px 0 16px; }
.st-stat-card { background:#f6f8f6; border:1px solid #e4e9e4; border-radius:10px; padding:12px 6px; text-align:center; }
.st-stat-card b { display:block; font-size:22px; color:#227840; }
.st-stat-card span { font-size:12px; color:#6b7280; }
.st-stat-list { display:flex; flex-direction:column; }
.st-stat-row { display:flex; align-items:center; gap:10px; padding:9px 4px; border-top:1px solid #eef1ee; font-size:14px; }
.st-stat-row:first-child { border-top:none; }
.st-stat-name { flex:1; min-width:0; color:#1f2937; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.st-stat-meta { font-size:12px; color:#9ca3af; white-space:nowrap; }
.st-stat-pct { font-weight:700; color:#227840; white-space:nowrap; }

/* Конструктор курсу */
.admin-course-head { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.admin-field textarea { display:block; width:100%; margin-top:5px; padding:10px 12px; border:1px solid #d1d5db;
  border-radius:9px; font-size:15px; font-family:inherit; box-sizing:border-box; resize:vertical; }

/* Головна дія на картці учня */
.st-btn--go { background:#227840; color:#fff; border-color:#227840; }
.st-btn--go:hover:not(:disabled) { background:#1b5e33; }

/* Масовий імпорт уроків */
.admin-bulk { display:block; width:100%; margin-bottom:12px; padding:11px 13px; border:1px solid #d1d5db;
  border-radius:9px; font-family:ui-monospace,monospace; font-size:13px; box-sizing:border-box; resize:vertical; }
.admin-types-title code { background:#eef1ee; padding:2px 6px; border-radius:5px; font-size:12px; }

/* Конструктор: чипи ресурсів + пул-пікер */
.les-chips { display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 8px; }
.les-chip { display:inline-flex; align-items:center; gap:7px; background:#eef5ef; border:1px solid #cfe3d4;
  color:#1f2937; border-radius:20px; padding:5px 12px; font-size:13px; }
.les-chip button { background:none; border:none; color:#c0392b; cursor:pointer; font-size:14px; line-height:1; padding:0; }
.les-picker { display:block; width:100%; margin-bottom:14px; padding:10px 12px; border:1px solid #d1d5db;
  border-radius:9px; font-size:14px; background:#fff; box-sizing:border-box; }

/* Привʼязка групи на картці учня */
.st-group { margin-top:5px; font-size:13px; }
.st-group-link { color:#1899d6; font-weight:600; text-decoration:none; }
.st-group-link:hover { text-decoration:underline; }
.st-chatid { font-family:ui-monospace,monospace; font-size:12px; }

/* ============================================================
   Результат ДЗ: банер порогу · покрокові розвʼязки · рейтинг
   Єдиний зелений прогрес-акцент #227840, як у решті продукту.
   ============================================================ */

/* Банер «склав / не склав» на екрані результатів ДЗ */
.hw-banner { border-radius:12px; padding:14px 16px; margin-bottom:14px; font-size:14px; line-height:1.45; }
.hw-banner-title { font-weight:700; font-size:15px; display:flex; align-items:center; gap:8px; }
.hw-banner-sub { margin-top:4px; }
.hw-banner--pass { background:#eef7f0; border:1px solid #cfe3d4; color:#1b5e33; }
.hw-banner--fail { background:#fdf2f0; border:1px solid #f1c9c6; color:#9c2f22; }
.hw-banner .hw-start-btn { margin-top:12px; }

/* Покроковий розвʼязок (згортається) */
.hw-sol { margin-top:8px; }
.hw-sol > summary { cursor:pointer; color:#227840; font-weight:600; font-size:13px; list-style:none; display:inline-flex; align-items:center; gap:6px; padding:2px 0; }
.hw-sol > summary::-webkit-details-marker { display:none; }
.hw-sol > summary::before { content:"▸"; font-size:11px; transition:transform .15s ease; }
.hw-sol[open] > summary::before { transform:rotate(90deg); }
.hw-sol-body { margin-top:8px; padding:12px 14px; background:#f6fbf7; border:1px solid #e3efe6; border-radius:10px; }
.sol-step { display:flex; gap:10px; align-items:flex-start; }
.sol-step + .sol-step { margin-top:8px; padding-top:8px; border-top:1px dashed #dbe8de; }
.sol-num { flex:0 0 22px; height:22px; border-radius:50%; background:#227840; color:#fff; font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.sol-s { font-weight:600; color:#1f2937; font-size:14px; line-height:1.45; }
.sol-c { margin-top:2px; color:#6b7280; font-size:13px; line-height:1.4; }

/* Варіанти у перегляді ДЗ (правильний — зелений) */
.rv-opts { margin:8px 0 2px; display:grid; gap:4px; }
.rv-opts > div { font-size:14px; color:#374151; }
.rv-opts .rv-correct { font-weight:600; color:#227840; }
.rv-cols { margin:8px 0 2px; display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.rv-cols .rv-col-h { font-size:12px; color:#6b7280; margin-bottom:4px; }
.rv-cols .rv-hit { color:#227840; font-weight:600; }
@media (max-width:520px){ .rv-cols { grid-template-columns:1fr; gap:10px; } }

/* Deep-link ДЗ: копіювання посилання */
.dz-linkbar { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:10px 0; }
.dz-linkbar code { font-size:12px; color:#374151; background:#f3f4f6; padding:4px 8px; border-radius:6px; word-break:break-all; }

/* ===== Рейтинг учнів (модалка) ===== */
.lb-intro { margin-bottom:12px; }
.lb-row { display:flex; align-items:center; gap:12px; padding:11px 13px; border-radius:12px; margin-bottom:7px; background:#fafafa; border:1px solid #eef0ee; }
.lb-row--top { background:#eef7f0; border-color:#cfe3d4; }
.lb-row--me { background:#eaf3fb; border-color:#bcdcf5; }
.lb-rank { flex:0 0 36px; text-align:center; font-size:18px; font-weight:700; color:#374151; }
.lb-row--top .lb-rank { font-size:22px; }
.lb-name { flex:1; min-width:0; font-weight:600; color:#1f2937; }
.lb-name .lb-you { color:#1899d6; font-weight:600; font-size:13px; }
.lb-meta { font-weight:400; color:#6b7280; font-size:13px; }
.lb-score { flex:0 0 auto; font-size:20px; font-weight:800; }
.lb-score--hi { color:#227840; }
.lb-score--mid { color:#b26a00; }
.lb-score--lo { color:#c0392b; }

/* Кнопка «Рейтинг» у шапці — той самий вокабуляр, що й кабінет */
@media (max-width:600px){
  .lb-row { gap:9px; padding:10px 11px; }
  .lb-score { font-size:18px; }
  .hw-banner .hw-start-btn { width:100%; }
}

/* ============================================================
   ТЕМНИЙ РЕЖИМ
   Токен-фліп + прицільні перекриття хардкод-кольорів.
   Графіки/діаграми лишаються на світлій підкладці (щоб чорні лінії було видно).
   Зін-дизайн (html.ui-z): правила, що дублюють ui-v2 / ds (картки, варіанти, лендинг, вхід),
   загорнуто в маркер @supports (--zin-legacy: 1) { … } — він завжди істинний, тож без прапорця
   селектори й каскад ті самі, що й раніше (і в Safari 13 / Chrome < 88); під html.ui-z
   ці блоки вирізає інлайн-скрипт у <head> index.html. Холодні хардкоди решти — через var(--zd-*, #старий):
   без прапорця змінна не визначена → старий колір, під .ui-z — теплі токени (ds/tokens.css).
   ============================================================ */

/* Інлайн-кнопка перемикача теми (у рядку з Адмін/Рейтинг/Кабінет) */
.btn-theme-inline {
    padding: 0 !important; width: 38px; min-width: 38px; text-align: center;
    background: transparent !important; border: 1px solid rgba(255,255,255,0.45) !important;
    color: #fff !important; font-size: 17px; line-height: 1;
}
.btn-theme-inline:hover { background: rgba(255,255,255,0.18) !important; }
[data-theme="dark"] .btn-theme-inline { border-color: var(--card-border) !important; }

[data-theme="dark"] {
    color-scheme: dark;
    --bg-white: #0f1319;
    --bg-light: #161c25;
    --bg-gray: #161c25;
    --text-dark: #e8ebf0;
    --text-muted: #b7c0cc;
    --text-light: #93a0b0;
    --border-color: #2a323f;
    --border-light: #222932;
    --link-color: #6ba9e6;
    --warning-bg: #2a2113;
    --warning-border: #4a3a1a;
    --success-light: #16241c;
    --danger-light: #2a1616;
    --info-light: #14202c;
    /* локальні для перекриттів */
    --surface: #171d27;
    --surface-2: #1f2732;
    --ink: #e8ebf0;
    --ink-2: #b7c0cc;
    --muted: #9aa7b5;
    --card-border: #2a323f;
    --green-tint-bg: #16241c;
    --green-tint-bd: #274a30;
    --green-tint-ink: #8fd6a6;
    --red-tint-bg: #2a1616;
    --red-tint-bd: #542b28;
    --red-tint-ink: #f0a9a2;
    --warn-ink: #e0b666;
}

/* Картки / поверхні: білий → surface */
[data-theme="dark"] .admin-card,
[data-theme="dark"] .hw-flag-row,
[data-theme="dark"] .st-row,
[data-theme="dark"] .st-stat-card,
[data-theme="dark"] .review-modal-content,
[data-theme="dark"] .matching-options-box,
[data-theme="dark"] .matching-answer-badge,
[data-theme="dark"] .matching-dropzone,
[data-theme="dark"] .test-group-header,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .review-summary {
    background: var(--surface) !important;
    border-color: var(--card-border);
    color: var(--ink);
}
@supports (--zin-legacy: 1) {
[data-theme="dark"] .cat-card,
[data-theme="dark"] .result-card,
[data-theme="dark"] .answer-option,
[data-theme="dark"] .login-card,
[data-theme="dark"] .mode-card {
    background: var(--surface) !important;
    border-color: var(--card-border);
    color: var(--ink);
}
[data-theme="dark"] .mode-card,
[data-theme="dark"] .mode-card li,
[data-theme="dark"] .mode-card p,
[data-theme="dark"] .mode-card-title { color: var(--ink); }
[data-theme="dark"] .mode-card-subtitle { color: var(--muted); }
}


/* Другий рівень (rows у рейтингу, підкартки) */
[data-theme="dark"] .lb-row { background: var(--zd-surface-2, #141a22); border-color: var(--zd-line, #232b36); }
[data-theme="dark"] .lb-row--top { background: var(--green-tint-bg); border-color: var(--green-tint-bd); }
[data-theme="dark"] .lb-row--me { background: var(--zd-tint, #12202e); border-color: var(--zd-tint-line, #24445f); }

/* Заголовки та темний текст → світлий */
[data-theme="dark"] .cat-card-title,
[data-theme="dark"] .cat-detail-title,
[data-theme="dark"] .rv-q, [data-theme="dark"] .rv-title, [data-theme="dark"] .rv-ans,
[data-theme="dark"] .admin-h3,
[data-theme="dark"] .result-value, [data-theme="dark"] .answer-text,
[data-theme="dark"] .lb-name, [data-theme="dark"] .sol-s, [data-theme="dark"] .hw-flag-q,
[data-theme="dark"] .st-name, [data-theme="dark"] .matching-options-title,
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3 {
    color: var(--ink);
}

/* Приглушений текст */
[data-theme="dark"] .hw-muted,
[data-theme="dark"] .cat-card-desc, [data-theme="dark"] .rv-sub,
[data-theme="dark"] .lb-meta, [data-theme="dark"] .sol-c,
[data-theme="dark"] .result-label, [data-theme="dark"] .admin-field,
[data-theme="dark"] .admin-types-title, [data-theme="dark"] .cat-empty {
    color: var(--muted);
}

/* Поля вводу */
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select,
[data-theme="dark"] .les-picker,
[data-theme="dark"] .admin-field input,
[data-theme="dark"] .dz-linkbar code {
    background: var(--surface-2) !important;
    color: var(--ink);
    border-color: var(--zd-line, #333c48);
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color: var(--zd-placeholder, #6b7685); }

/* Зелені тінти */
[data-theme="dark"] .hw-banner--pass,
[data-theme="dark"] .hw-sol-body,
[data-theme="dark"] .les-chip {
    background: var(--green-tint-bg) !important;
    border-color: var(--green-tint-bd);
    color: var(--green-tint-ink);
}
@supports (--zin-legacy: 1) {
[data-theme="dark"] .cat-card-count,
[data-theme="dark"] .cat-detail-count {
    background: var(--green-tint-bg) !important;
    border-color: var(--green-tint-bd);
    color: var(--green-tint-ink);
}
}

[data-theme="dark"] .hw-banner--pass .hw-banner-title { color: var(--green-tint-ink); }
@supports (--zin-legacy: 1) {
[data-theme="dark"] .cat-card-count, [data-theme="dark"] .cat-detail-count { color: var(--green-tint-ink); }
}

[data-theme="dark"] .sol-num { background: #2fa25a; }

/* Червоні тінти */
[data-theme="dark"] .hw-banner--fail {
    background: var(--red-tint-bg) !important;
    border-color: var(--red-tint-bd);
    color: var(--red-tint-ink);
}
[data-theme="dark"] .hw-banner--fail .hw-banner-title { color: var(--red-tint-ink); }

/* Попереджувальні тінти */
[data-theme="dark"] .hw-due, [data-theme="dark"] .hw-note-tag, [data-theme="dark"] .rv-note {
    background: var(--warning-bg); color: var(--warn-ink);
}

/* Легкі кнопки (світлий тінт → темний тінт, зелений текст) */
[data-theme="dark"] .st-btn,
[data-theme="dark"] .hw-view-btn,
[data-theme="dark"] .hw-flag-btn,
[data-theme="dark"] .cat-back,
[data-theme="dark"] .btn-cabinet {
    background: #1b2620; color: #8fd6a6; border-color: #2c4a37;
}
[data-theme="dark"] .st-btn:hover:not(:disabled),
[data-theme="dark"] .hw-view-btn:hover,
[data-theme="dark"] .hw-flag-btn:hover { background: #227840; color: #fff; }
[data-theme="dark"] .st-btn--go, [data-theme="dark"] .hw-start-btn { color: #fff; }

/* Іконки категорій — глибші тінти */
@supports (--zin-legacy: 1) {
[data-theme="dark"] .cat-card-icon { background: #202834; }
[data-theme="dark"] .cat-card--official .cat-card-icon { background: #2a1616; }
[data-theme="dark"] .cat-card--author .cat-card-icon { background: var(--green-tint-bg); }
[data-theme="dark"] .cat-card--generate .cat-card-icon { background: #2a2113; }
[data-theme="dark"] .cat-card--archive .cat-card-icon { background: #182230; }
[data-theme="dark"] .cat-card-arrow { color: #4a5563; }
}


/* Роздільники/бордюри в темному */
[data-theme="dark"] .sol-step + .sol-step { border-top-color: #2a3a30; }
[data-theme="dark"] .hw-sub-row { border-top-color: var(--zd-line, #232b36); }

/* Сітка результатів (клітинки-номери) */
[data-theme="dark"] .result-item { background: var(--zd-surface-2, #1b222c); color: var(--muted); border-color: var(--zd-line, #2a323f); }
[data-theme="dark"] .result-item.correct { background: #16281c; color: #6ee7a0; border-color: #2c7a45; }
[data-theme="dark"] .result-item.wrong { background: #2a1618; color: #f4a6a0; border-color: #7a2f2f; }
[data-theme="dark"] .result-item.partial { background: #2a2113; color: #e8b968; border-color: #5c4620; }
[data-theme="dark"] .result-item.skipped { background: var(--zd-surface-2, #23262c); color: var(--zd-muted, #9aa4b2); border-color: var(--zd-line, #3a3f48); }

/* ГРАФІКИ/ДІАГРАМИ/ФІГУРИ: тримаємо на світлій підкладці, щоб чорні лінії було видно */
[data-theme="dark"] img.task-image,
[data-theme="dark"] .task-content img,
[data-theme="dark"] .rv-img,
[data-theme="dark"] .answer-text img,
[data-theme="dark"] .matching-item img,
[data-theme="dark"] .hw-flag-q img,
[data-theme="dark"] .sol-s img {
    background: var(--zd-figure, #ffffff);
    padding: 8px;
    border-radius: 10px;
    box-shadow: 0 0 0 1px var(--zd-line, #2a323f);
}

/* KaTeX успадковує колір тексту — на темному стає світлим автоматично.
   Але формула в кольорових плашках лишається читабельною завдяки currentColor. */
[data-theme="dark"] .katex { color: inherit; }

/* Модальна підкладка трохи темніша */
[data-theme="dark"] .modal-overlay { background: rgba(0,0,0,0.65); }

/* Логін-екран: швидкі картки-тренажери */
@supports (--zin-legacy: 1) {
[data-theme="dark"] .quick-trainer-card {
    background: var(--surface) !important;
    border-color: var(--card-border);
}
[data-theme="dark"] .quick-trainer-title { color: var(--ink); }
[data-theme="dark"] .quick-trainer-desc { color: var(--muted); }
[data-theme="dark"] .quick-trainer-arrow { color: #4a5563; }
[data-theme="dark"] .quick-trainer-icon { background: #202834; }
}


/* Картки перегляду завдань (rv-task) — прибираємо світлий тінт */
[data-theme="dark"] .rv-task { background: var(--surface); border-color: var(--card-border); color: var(--ink); }
[data-theme="dark"] .rv-task.rv-ok { background: #131b16; border-color: #274a30; }
[data-theme="dark"] .rv-task.rv-bad { background: #1f1514; border-color: #542b28; }
[data-theme="dark"] .rv-opts > div { color: var(--ink-2); }
[data-theme="dark"] .rv-opts .rv-correct { color: var(--green-tint-ink); }
[data-theme="dark"] .rv-cols .rv-col-h { color: var(--muted); }
[data-theme="dark"] .rv-cols .rv-hit { color: var(--green-tint-ink); }

/* ============================================================
   ТЕМНИЙ РЕЖИМ — доопрацювання (картки тестів, кабінет, адмінка)
   ============================================================ */

/* Картки тестів (офіційні/авторські) — прибираємо світлі градієнти */
[data-theme="dark"] .nmt2026-card { background: var(--surface); color: var(--ink); border-color: var(--card-border); }
[data-theme="dark"] .nmt2026-card::before { display: none; }
[data-theme="dark"] .nmt2026-card--official { background: var(--zd-surface, #1d1416); border-color: var(--zd-line, #4a2626); }
[data-theme="dark"] .nmt2026-card--author   { background: var(--zd-surface, #16182a); border-color: var(--zd-line, #2f3260); }
[data-theme="dark"] .nmt2026-card-name { color: var(--ink); }
[data-theme="dark"] .nmt2026-card-meta { color: var(--muted); }

/* Кабінет: профіль, статистика, історія, вкладки */
[data-theme="dark"] .cabinet-user-card,
html:not(.ui-z)[data-theme="dark"] .stat-card,   /* у зіні картки статистики кольорові (ds/shell.css) */
[data-theme="dark"] .history-item,
[data-theme="dark"] .hw-card {
    background: var(--surface) !important;
    border: 1px solid var(--card-border);
    box-shadow: none;
    color: var(--ink);
}
@supports (--zin-legacy: 1) {
[data-theme="dark"] .cabinet-history {
    background: var(--surface) !important;
    border: 1px solid var(--card-border);
    box-shadow: none;
    color: var(--ink);
}
}
[data-theme="dark"] .cabinet-user-name,
[data-theme="dark"] .history-item-name,
[data-theme="dark"] .hw-card-title { color: var(--ink); }
[data-theme="dark"] .cabinet-user-email,
[data-theme="dark"] .stat-label,
[data-theme="dark"] .history-item-date,
[data-theme="dark"] .hw-card-meta { color: var(--muted); }
[data-theme="dark"] .history-item:hover { background: var(--zd-surface-2, #1e2632) !important; }

[data-theme="dark"] .cabinet-tabs { background: var(--zd-surface-2, #141a22); }
[data-theme="dark"] .cabinet-tab { color: var(--muted); }
[data-theme="dark"] .cabinet-tab.active { background: var(--surface); color: var(--ink); }

/* Адмінка: вкладки + чипи тем */
[data-theme="dark"] .admin-tab { background: #1b2620; color: #8fd6a6; border-color: #2c4a37; }
[data-theme="dark"] .admin-tab.active,
[data-theme="dark"] .admin-tab--gen:hover { background: #227840; color: #fff; border-color: #227840; }
[data-theme="dark"] .admin-type-check { background: var(--surface-2); border-color: var(--card-border); color: var(--ink-2); }
[data-theme="dark"] .admin-check { color: var(--ink-2); }
[data-theme="dark"] .admin-bulk,
[data-theme="dark"] .admin-course-head { color: var(--ink); }

/* Темний режим — завдання на відповідність (ліві поля + варіанти) */
[data-theme="dark"] .matching-item {
    background: var(--zd-surface, #142333); border-color: var(--zd-line, #27476b); color: var(--ink);
}
[data-theme="dark"] .matching-item-number { color: var(--zd-accent, #7db3e6); }
[data-theme="dark"] .matching-option-item {
    background: #173322; color: #dcefe1; border: 1px solid #2b5537;
}
[data-theme="dark"] .matching-option-item:hover:not(.disabled):not(.used) { background: #1f4a2e; }
[data-theme="dark"] .matching-option-item.selected { background: #227840; color: #fff; }
[data-theme="dark"] .matching-option-item.used { opacity: 0.4; }
[data-theme="dark"] .matching-option-letter { color: #8fd6a6; font-weight: 700; }
[data-theme="dark"] .matching-dropzone:hover:not(.disabled) { background: #241417; }
[data-theme="dark"] .matching-arrow { color: var(--muted); }

/* Темний режим — банер-інструкція над завданням */
[data-theme="dark"] .instruction-box {
    background: var(--zd-tint, #1a2230); border-color: var(--zd-tint-line, #35507a); color: var(--ink-2);
}

/* Темний режим — вибраний варіант відповіді (був світло-рожевий) */
@supports (--zin-legacy: 1) {
[data-theme="dark"] .answer-option.selected { background: #241a22 !important; border-color: var(--primary); }
[data-theme="dark"] .answer-option.correct { background: #16241c !important; }
[data-theme="dark"] .answer-option.wrong { background: #2a1616 !important; }
}


/* Темний режим — кнопка «±» біля поля короткої відповіді */
[data-theme="dark"] .answer-input-sign-btn {
    background: var(--surface-2); color: var(--ink); border-color: var(--zd-line, #333c48);
}
[data-theme="dark"] .answer-input-sign-btn:hover { background: var(--zd-line, #2a3340); }

/* ============================================================
   РОЗБІР ЗАВДАНЬ (екран результатів ДЗ) — чіткий статус кожного завдання
   ============================================================ */

/* Легенда під сіткою відповідей */
.results-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; font-size: 13px; color: var(--text-muted); }
.rl-item { display: inline-flex; align-items: center; gap: 6px; }
.rl-dot { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
.rl-correct { background: #4caf50; }
.rl-wrong { background: #f44336; }
.rl-skipped { background: #cbd2d9; border: 1px solid #aab4c0; }
[data-theme="dark"] .rl-skipped { background: #3a3f48; border-color: #4a5563; }

/* Картка розбору */
.rv-part { border-color: #f0d9a8; background: #fffaf0; }
[data-theme="dark"] .rv-task.rv-part { background: #23200f; border-color: #5c4620; }

.rv-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.rv-num { font-weight: 700; font-size: 15px; color: var(--text-dark); }
.rv-status { font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; }
.rv-status--ok   { background: #e3f4e8; color: #1a7f37; }
.rv-status--bad  { background: #fbe4e2; color: #c0392b; }
.rv-status--part { background: #fbeed0; color: #9a6a12; }
[data-theme="dark"] .rv-num { color: var(--ink); }
[data-theme="dark"] .rv-status--ok   { background: #16281c; color: #6ee7a0; }
[data-theme="dark"] .rv-status--bad  { background: #2a1618; color: #f4a6a0; }
[data-theme="dark"] .rv-status--part { background: #2a2113; color: #e8b968; }

.rv-qtext { font-size: 14.5px; line-height: 1.5; color: var(--text-dark); margin-bottom: 8px; }
[data-theme="dark"] .rv-qtext { color: var(--ink); }

/* Варіанти з підсвіткою: правильний зелений, обраний помилковий червоний */
.rv-opt { display: flex; align-items: center; gap: 4px; padding: 7px 11px; border-radius: 7px; font-size: 14px;
          border: 1px solid transparent; color: var(--text-dark); }
.rv-opt + .rv-opt { margin-top: 4px; }
.rv-opt.rv-opt-correct { background: rgba(34,120,64,0.10); border-color: rgba(34,120,64,0.35); color: #1a7f37; font-weight: 600; }
.rv-opt.rv-opt-wrong { background: rgba(196,57,54,0.10); border-color: rgba(196,57,54,0.35); color: #c0392b; font-weight: 600; }
.rv-mark { margin-left: auto; font-weight: 700; }
.rv-mark--ok { color: #1a7f37; }
.rv-mark--bad { color: #c0392b; }
[data-theme="dark"] .rv-opt { color: var(--ink-2); }
[data-theme="dark"] .rv-opt.rv-opt-correct { background: rgba(46,158,90,0.14); border-color: #2c7a45; color: #8fe0aa; }
[data-theme="dark"] .rv-opt.rv-opt-wrong { background: rgba(244,90,84,0.13); border-color: #7a2f2f; color: #f4a6a0; }
[data-theme="dark"] .rv-mark--ok { color: #8fe0aa; }
[data-theme="dark"] .rv-mark--bad { color: #f4a6a0; }

/* Короткі/матчинг відповіді */
.rv-answers { font-size: 14px; display: grid; gap: 4px; margin: 6px 0; color: var(--text-dark); }
[data-theme="dark"] .rv-answers { color: var(--ink-2); }
.rv-good { color: #1a7f37; }
.rv-badtext { color: #c0392b; }
[data-theme="dark"] .rv-good { color: #8fe0aa; }
[data-theme="dark"] .rv-badtext { color: #f4a6a0; }

/* Відступи всередині картки розбору */
.rv-task .hw-sol, .rv-task .hw-flag-btns, .rv-task .hw-explain-slot { margin-top: 10px; }

/* Рядок-підсумок правильних завдань (згорнуто) */
.rv-correct-summary {
    background: rgba(34,120,64,0.07); border: 1px solid #cfe3d4; border-radius: 10px;
    padding: 10px 14px; margin-bottom: 10px; font-size: 14px; color: #1a7f37;
}
[data-theme="dark"] .rv-correct-summary { background: #131b16; border-color: #274a30; color: #8fd6a6; }

/* Клікабельний рядок статистики учня + підсумок роботи */
.st-stat-row--open { cursor: pointer; border-radius: 8px; transition: background .12s; }
.st-stat-row--open:hover { background: rgba(34,120,64,0.06); }
[data-theme="dark"] .st-stat-row--open:hover { background: #16241c; }
.rv-summary { font-size: 13.5px; color: var(--text-muted); margin: 4px 0 12px; }
[data-theme="dark"] .rv-summary { color: var(--muted); }
#rvBack { margin-bottom: 10px; }

/* Фото розвʼязків учня на екрані результатів */
.hw-photo-grid { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.hw-photo-thumb { width: 84px; height: 84px; border-radius: 8px; overflow: hidden; background: var(--bg-light); border: 1px solid var(--border-color); display: flex; align-items: center; justify-content: center; }
.hw-photo-thumb img { width: 100%; height: 100%; object-fit: cover; }
.hw-photo-err { color: #c0392b; font-weight: 700; }
.hw-photo-caption { width: 100%; box-sizing: border-box; margin: 6px 0 10px; padding: 9px 12px; border: 1px solid var(--border-color); border-radius: 9px; font-size: 14px; }
[data-theme="dark"] .hw-photo-thumb { background: var(--surface-2); border-color: var(--card-border); }
[data-theme="dark"] .hw-photo-caption { background: var(--surface-2); color: var(--ink); border-color: #333c48; }

/* ============================================================
   DUOLINGO-СКІН — дружній округлий вигляд: зелений акцент,
   3D-кнопки з натиском, товсті рамки, без тіней, шрифт Nunito.
   Зін-дизайн (html.ui-z, ds/*.css): увесь блок — у маркері @supports (--zin-legacy: 1).
   Без прапорця маркер істинний і нічого не змінює; під html.ui-z блок вирізає інлайн-скрипт
   у <head> index.html. Нові правила сюди не додавати.
   ============================================================ */
:root {
    --primary: #58cc02;
    --primary-dark: #58a700;
    --primary-light: #89e219;
    --link-color: #1cb0f6;
    --duo-radius: 16px;
    --duo-blue: #1cb0f6;
    --duo-blue-dark: #1899d6;
    --duo-red: #ff4b4b;
    --duo-red-dark: #e63946;
}
@supports (--zin-legacy: 1) {
body {
    font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 600;
}
h1, h2, h3, .mode-select-title, .select-title, .rv-title, .cabinet-title,
.cat-card-title, .nmt2026-card-name, .results-header h1, .stat-value {
    font-weight: 800; letter-spacing: -0.01em;
}

/* Головні зелені кнопки — «наліпка» з 3D-натиском */
.hw-start-btn, .mode-card-btn, .btn-email-login, .btn-primary,
.st-btn--go, .hw-view-btn {
    background: var(--primary) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 14px !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    box-shadow: 0 4px 0 var(--primary-dark) !important;
    transition: filter .1s ease, transform .06s ease, box-shadow .06s ease;
    cursor: pointer;
}
.hw-start-btn:hover, .mode-card-btn:hover, .btn-email-login:hover, .btn-primary:hover,
.st-btn--go:hover, .hw-view-btn:hover { filter: brightness(1.06); }
.hw-start-btn:active, .mode-card-btn:active, .btn-email-login:active, .btn-primary:active,
.st-btn--go:active, .hw-view-btn:active {
    transform: translateY(3px); box-shadow: 0 1px 0 var(--primary-dark) !important;
}

/* Вторинні кнопки — обведені пігулки */
.st-btn, .cat-back, .btn-cabinet {
    border-radius: 12px !important;
    font-weight: 700 !important;
    border-width: 2px !important;
}

/* Картки — товста рамка, без тіней, великий радіус (пласкі «наліпки») */
.cat-card, .nmt2026-card, .mode-card, .result-card, .admin-card,
.st-row, .hw-flag-row, .rv-task, .cabinet-user-card, .stat-card, .hw-card,
.tg-card, .quick-trainer-card, .lb-row, .st-stat-card, .review-modal-content {
    border-radius: var(--duo-radius) !important;
    box-shadow: none !important;
    border: 2px solid var(--border-color);
}
.cat-card:hover, .nmt2026-card:hover, .quick-trainer-card:hover { transform: translateY(-2px); box-shadow: 0 4px 0 var(--border-color) !important; }

/* Варіанти відповіді — товста рамка з натиском, кольорові стани */
.answer-option {
    border: 2px solid var(--border-color) !important;
    border-radius: 14px !important;
    box-shadow: 0 3px 0 var(--border-color);
    font-weight: 700;
    transition: all .1s ease;
}
.answer-option:hover { background: #f0f9ff; border-color: var(--duo-blue) !important; }
.answer-option.selected { background: #ddf4ff !important; border-color: var(--duo-blue) !important; box-shadow: 0 3px 0 var(--duo-blue) !important; }
.answer-option.selected .answer-radio { border-color: var(--duo-blue) !important; }
.answer-option.selected .answer-radio::after { background: var(--duo-blue) !important; }
.answer-option.correct { background: #d7ffb8 !important; border-color: var(--primary) !important; box-shadow: 0 3px 0 var(--primary) !important; }
.answer-option.wrong { background: #ffdfe0 !important; border-color: var(--duo-red) !important; box-shadow: 0 3px 0 var(--duo-red) !important; }

/* Категорійні картки-іконки — округліші */
.cat-card-icon, .quick-trainer-icon, .tg-card-icon, .nmt2026-card-icon { border-radius: 14px; }

/* Інпути — округлі, товща рамка */
input, textarea, select, .les-picker, .admin-field input {
    border-radius: 12px !important; border-width: 2px !important;
}
input:focus, textarea:focus, select:focus { border-color: var(--duo-blue) !important; outline: none; }

/* Пігулка-таб «Іспит» тощо + прогрес-бар акценти */
.top-tabs .tab.active { color: var(--primary); border-bottom-color: var(--primary); }

/* ===== Duolingo-скін у темному ===== */
[data-theme="dark"] .cat-card, [data-theme="dark"] .nmt2026-card, [data-theme="dark"] .mode-card,
[data-theme="dark"] .result-card, [data-theme="dark"] .admin-card, [data-theme="dark"] .st-row,
[data-theme="dark"] .hw-flag-row, [data-theme="dark"] .rv-task, [data-theme="dark"] .cabinet-user-card,
[data-theme="dark"] .stat-card, [data-theme="dark"] .hw-card, [data-theme="dark"] .quick-trainer-card,
[data-theme="dark"] .st-stat-card { border-color: var(--card-border); }
[data-theme="dark"] .answer-option { border-color: #2a323f !important; box-shadow: 0 3px 0 #202834; }
[data-theme="dark"] .answer-option.selected { background: #12283a !important; }
[data-theme="dark"] .answer-option.correct { background: #16321c !important; }
[data-theme="dark"] .answer-option.wrong { background: #331616 !important; }

/* ===== Duolingo-логін + маскот + округла сітка завдань ===== */
.mode-select-page {
    background: linear-gradient(180deg, #e8fbdd 0%, #ffffff 60%) !important;
}
[data-theme="dark"] .mode-select-page {
    background: linear-gradient(180deg, #16241c 0%, var(--bg-white) 60%) !important;
}
.mascot-fox {
    width: 132px; height: auto; display: block; margin: 4px auto 10px;
    filter: drop-shadow(0 6px 0 rgba(58,42,28,0.08));
    animation: mascot-bob 2.8s ease-in-out infinite;
}
}

@keyframes mascot-bob { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-9px) rotate(2deg); } }
@media (prefers-reduced-motion: reduce) { @supports (--zin-legacy: 1) {
.mascot-fox { animation: none; }
}
 }
@supports (--zin-legacy: 1) {
.mode-select-title { color: #3a4b2c !important; }
.mode-select-subtitle { color: #6d7d5b !important; }
[data-theme="dark"] .mode-select-title { color: var(--ink) !important; }
[data-theme="dark"] .mode-select-subtitle { color: var(--muted) !important; }

/* Округла сітка завдань — «пігулки» */
.task-btn, .mobile-task-grid .task-btn {
    border-radius: 12px !important;
    border-width: 2px !important;
    font-weight: 700 !important;
}
.task-btn.answered { background: #d7ffb8 !important; border-color: var(--primary) !important; color: #3a2a1c !important; }
.task-btn.current { border-color: var(--duo-blue) !important; box-shadow: 0 0 0 2px var(--duo-blue) inset; }
[data-theme="dark"] .task-btn.answered { background: #16321c !important; color: var(--ink) !important; }

/* Таймер — округла пігулка */
.timer-display { border-radius: 999px !important; }
}


/* Адмін → Практика (теми повторення) */
.practice-admin { max-width: 640px; }
.practice-admin h3 { margin: 0 0 6px; }
.practice-hint { color: var(--muted, #667); font-size: 14px; line-height: 1.5; margin: 0 0 16px; }
.practice-topics { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-bottom: 20px; }
.practice-topic { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 2px solid var(--border, #e3e3e3); border-radius: 14px; cursor: pointer; font-weight: 700; user-select: none; transition: border-color .12s, background .12s; }
.practice-topic input { width: 20px; height: 20px; accent-color: var(--primary, #58cc02); cursor: pointer; }
.practice-topic.on { border-color: var(--primary, #58cc02); background: color-mix(in srgb, var(--primary, #58cc02) 10%, transparent); }
[data-theme="dark"] .practice-topic { border-color: #2a3a2c; }
[data-theme="dark"] .practice-topic.on { background: #16321c; }
.practice-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.practice-msg { font-weight: 700; font-size: 14px; }

/* Дашборд ДЗ — матриця «учні × завдання» (як у Classtime) */
.dash-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.dash-head h3 { margin: 0; }
.dash-meta { color: var(--muted, #667); font-weight: 700; font-size: 14px; }
.dash-legend { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; font-size: 13px; font-weight: 700; }
.dash-lg { padding: 3px 9px; border-radius: 8px; }
.dash-hint { color: var(--muted, #889); font-weight: 600; }
.dash-scroll { overflow: auto; max-height: 74vh; border: 2px solid var(--border, #e3e3e3); border-radius: 12px; }
.dash-table { border-collapse: separate; border-spacing: 0; font-size: 14px; }
.dash-table th, .dash-table td { text-align: center; padding: 8px 6px; white-space: nowrap; }
.dash-table thead th { position: sticky; top: 0; z-index: 3; background: var(--card, #fff); border-bottom: 2px solid var(--border, #e3e3e3); font-weight: 800; }
.dash-th { min-width: 34px; }
.dash-name { position: sticky; left: 0; z-index: 2; width: 168px; min-width: 168px; max-width: 168px; overflow: hidden; text-overflow: ellipsis; background: var(--card, #fff); text-align: left !important; font-weight: 700; cursor: pointer; box-shadow: 2px 0 0 var(--border, #e3e3e3); }
.dash-pct { position: sticky; left: 168px; z-index: 2; min-width: 50px; background: var(--card, #fff); font-weight: 800; box-shadow: 2px 0 0 var(--border, #e3e3e3); }
.dash-table thead th.dash-name, .dash-table thead th.dash-pct { z-index: 4; }
.dash-cell { font-weight: 800; cursor: pointer; min-width: 34px; border-bottom: 1px solid var(--border, #eee); }
.dash-table tbody tr:hover .dash-cell { filter: brightness(0.96); }
.st-correct { background: #dcf0e2; color: #1e7a43; }
.st-partial { background: #ffe6cc; color: #b35a00; }
.st-wrong { background: #fbe0e0; color: #c0392b; }
.st-empty { background: #eef0ef; color: #9aa2ab; }
.st-na { background: transparent; }
.dash-diff { font-weight: 800; border-top: 2px solid var(--border, #e3e3e3); }
.dash-diff--ok { color: #227840; }
.dash-diff--mid { color: #8a6d00; }
.dash-diff--low { color: #c0392b; }
.dash-flag { font-size: 12px; color: #c47b00; }
.dash-table tfoot td { position: sticky; bottom: 0; z-index: 1; background: var(--card, #fff); }
.dash-table tfoot td.dash-name, .dash-table tfoot td.dash-pct { z-index: 3; }
[data-theme="dark"] .dash-name, [data-theme="dark"] .dash-pct,
[data-theme="dark"] .dash-table thead th, [data-theme="dark"] .dash-table tfoot td { background: #161e17; }
[data-theme="dark"] .st-correct { background: #1c3a1c; color: #8fe06a; }
[data-theme="dark"] .st-partial { background: #3a3413; color: #f0d060; }
[data-theme="dark"] .st-wrong { background: #3a1a1c; color: #ff8a8a; }
[data-theme="dark"] .st-empty { background: #242424; color: #8a9098; }
/* Причина помилки кольором клітинки (вступний): метод=оранж, неуважність=шавлія; «не знає» = червоний st-wrong */
.dash-cell.rs-unknown { background: #fbe0e0; color: #c0392b; }
.dash-cell.rs-method { background: #fbeccb; color: #8a5e0a; }
.dash-cell.rs-careless { background: #dbe8f8; color: #2b5e9e; }
.dash-cell.rs-none { background: #e9e8e4; color: #6d6a63; }
[data-theme="dark"] .dash-cell.rs-unknown { background: #3a1a1c; color: #ff8a8a; }
[data-theme="dark"] .dash-cell.rs-method { background: #3a2c0f; color: #f2c775; }
[data-theme="dark"] .dash-cell.rs-careless { background: #17273c; color: #82b1e8; }
[data-theme="dark"] .dash-cell.rs-none { background: #2b2926; color: #a8a29a; }
.dash-lg.rs-unknown { background: #fbe0e0; color: #c0392b; padding: 2px 8px; border-radius: 6px; }
.dash-lg.rs-method { background: #fbeccb; color: #8a5e0a; padding: 2px 8px; border-radius: 6px; }
.dash-lg.rs-careless { background: #dbe8f8; color: #2b5e9e; padding: 2px 8px; border-radius: 6px; }
.dash-lg.rs-none { background: #e9e8e4; color: #6d6a63; padding: 2px 8px; border-radius: 6px; }

/* ── Лайв-монітор ── */
.live-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.live-subhint { font-size: 12px; color: var(--muted, #8a8177); margin-left: 6px; }
.live-wrap { display: flex; flex-direction: column; gap: 12px; }
.live-empty { padding: 26px; text-align: center; color: var(--muted, #8a8177); }
.live-card { border: 1px solid var(--border, #e5ddd5); border-radius: 12px; padding: 12px 14px; background: var(--surface, #fffdfb); }
.live-card.live-stale { opacity: .5; }
.live-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: #e24b4a; flex: none; animation: livePulse 1.6s infinite; }
.live-card.live-stale .live-dot { background: #b4b2a9; animation: none; }
@keyframes livePulse { 0% { box-shadow: 0 0 0 0 rgba(226,75,74,.5); } 70% { box-shadow: 0 0 0 7px rgba(226,75,74,0); } 100% { box-shadow: 0 0 0 0 rgba(226,75,74,0); } }
.live-name { font-weight: 800; }
.live-hw { font-size: 12px; color: var(--muted, #8a8177); }
.live-ago { margin-left: auto; font-size: 12px; color: var(--muted, #8a8177); white-space: nowrap; }
.live-badge { font-size: 11px; padding: 2px 8px; border-radius: 99px; background: #eaf2e3; color: #42604b; }
.live-prog { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.live-bar { flex: 1; height: 8px; background: var(--paper, #f0ece7); border-radius: 99px; overflow: hidden; }
.live-bar > span { display: block; height: 100%; background: #7c9d85; transition: width .3s; }
.live-stat { font-size: 12px; color: #5c544c; white-space: nowrap; }
.live-marks { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 9px; }
.live-m { width: 17px; height: 17px; border-radius: 4px; font-size: 10px; line-height: 17px; text-align: center; font-weight: 800; }
.live-m.mk-correct { background: #dcecdd; color: #2e6b3f; }
.live-m.mk-wrong { background: #fbe0e0; color: #c0392b; }
.live-m.mk-empty { background: #ececea; color: #8a8177; }
.live-m.mk-cur { outline: 2px solid #ef8748; outline-offset: 1px; }
[data-theme="dark"] .live-card { background: #262320; border-color: #3b3733; }
[data-theme="dark"] .live-stat { color: #c9c2b8; }
[data-theme="dark"] .live-bar { background: #1c1a18; }
[data-theme="dark"] .live-m.mk-correct { background: #1f2e22; color: #9fd3ac; }
[data-theme="dark"] .live-m.mk-wrong { background: #3a1a1c; color: #ff8a8a; }
[data-theme="dark"] .live-m.mk-empty { background: #2b2926; color: #a8a29a; }
[data-theme="dark"] .live-badge { background: #24302a; color: #cfe9d3; }

/* ── Пауза / продовження тесту ── */
.btn-pause-test { background: #f0ece7; color: #5c544c; border: 1px solid #d7cec4; border-radius: 8px; padding: 6px 14px; font-weight: 700; cursor: pointer; margin-right: 8px; }
.btn-pause-test:hover { background: #e7e0d6; }
[data-theme="dark"] .btn-pause-test { background: #2e2b27; color: #c9c2b8; border-color: #413c36; }
.resume-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #eaf2e3; border: 1px solid #cfe0c2; border-radius: 12px; padding: 12px 14px; margin: 14px 0; }
.resume-info { display: flex; flex-direction: column; }
.resume-info b { color: #3b6d11; }
.resume-info span { font-size: 13px; color: #5c6b4c; }
.resume-acts { display: flex; align-items: center; gap: 8px; }
.resume-go { background: #598e2e; color: #fff; border: none; border-radius: 10px; padding: 9px 16px; font-weight: 800; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.resume-drop { background: transparent; border: none; color: #8a8177; font-size: 16px; cursor: pointer; }
[data-theme="dark"] .resume-banner { background: #1c221d; border-color: #33422f; }
[data-theme="dark"] .resume-info b { color: #9fd3ac; }
[data-theme="dark"] .resume-info span { color: #a8b39c; }

/* ── Matching у модалці розподілу ── */
.dist-match { display: flex; gap: 14px; margin: 12px 0; flex-wrap: wrap; }
.dist-match .dm-col { flex: 1; min-width: 190px; }
.dm-h { font-size: 12px; font-weight: 800; color: #8a8177; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.dm-item, .dm-opt { padding: 6px 9px; border: 1px solid var(--border, #e5ddd5); border-radius: 8px; margin-bottom: 5px; font-size: 13px; line-height: 1.4; }
.dm-opt--ok { background: #eaf2e3; border-color: #cfe0c2; }
.dm-correct { font-size: 13px; margin: 6px 0 4px; }
.dm-ans { display: flex; flex-wrap: wrap; gap: 4px; }
.dm-cell { font-size: 12px; padding: 1px 6px; border-radius: 5px; font-weight: 700; }
.dm-cell.dm-c { background: #dcecdd; color: #2e6b3f; }
.dm-cell.dm-w { background: #fbe0e0; color: #c0392b; }
.dm-cell.dm-e { background: #ececea; color: #8a8177; }
[data-theme="dark"] .dm-item, [data-theme="dark"] .dm-opt { border-color: #3b3733; }
[data-theme="dark"] .dm-opt--ok { background: #1c221d; border-color: #33422f; }
[data-theme="dark"] .dm-cell.dm-c { background: #1f2e22; color: #9fd3ac; }
[data-theme="dark"] .dm-cell.dm-w { background: #3a1a1c; color: #ff8a8a; }
[data-theme="dark"] .dm-cell.dm-e { background: #2b2926; color: #a8a29a; }

/* ── «Мій прогрес» (кабінет) ── */
.pg-big { text-align: center; padding: 18px 12px 14px; }
.pg-big-lab { display: block; font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted, #8a8177); }
.pg-big-num { display: block; font-family: Gelasio, Georgia, serif; font-size: 56px; font-weight: 700; line-height: 1.1; color: var(--sage-dark, #5f8069); }
.pg-big-sub { display: block; font-size: 13px; color: var(--muted, #8a8177); }
.pg-card { border: 1px solid var(--border, #e5ddd5); border-radius: 14px; padding: 14px 16px; margin: 12px 0; background: var(--surface, #fffdfb); }
.pg-card-h { display: flex; align-items: center; gap: 8px; font-weight: 800; margin-bottom: 10px; }
/* Графік «Динаміка по уроках» — смуга-крапка (варіант A, рендер _progressStripHtml в app.js).
   Кольори — лише локальні токени нижче, зібрані з токенів теми; темна тема приходить через ті самі змінні
   (ui-v2 / styles.css [data-theme="dark"]); зін перевизначає токени в ds/shell.css.
   Розкладка — за шириною самого графіка (container «pgs»), а не екрана: ≥600 px — широкий підпис;
   <480 — компактні відступи; <320 — рядок на 2 поверхи (підпис + число, під ними трек на всю ширину),
   щоб шкала 0–100 не стискалась до 60–100 px у класичному кабінеті на телефоні. */
.pgs {
    container: pgs / inline-size;
    --pgs-up: var(--green-tint-ink, var(--green-ink, #227840));   /* не нижче середини курсу */
    --pgs-mid: var(--muted, #8a8177);                             /* між p25 і серединою */
    --pgs-low: var(--danger, #dc4040);                            /* нижче p25 — ще й іконка + текст */
    --pgs-cue: var(--red-tint-ink, var(--red-ink, #c0392b));      /* текст «нижче більшості» */
    --pgs-band: var(--muted-2, #a39a90);                          /* заливка смуги p25–p75 (з прозорістю) */
    --pgs-edge: var(--muted, #8a8177);                            /* 1px край смуги: межі p25/p75 видно (≥3:1) */
    --pgs-tick: var(--ink-2, #5c544c);                            /* риска-середина; обвідка маркера «старт» */
    --pgs-sub: var(--ink-2, #5c544c);                             /* дрібний текст: шкала, «старт», «—», підказка (≥4.5:1) */
    --pgs-line: var(--border, var(--border-color, #e5ddd5));      /* трек 0–100 */
    --pgs-ring: var(--surface, #fffdfb);                          /* 2px кільце крапки = тло картки */
    --pgs-hover: var(--surface-2, #f9f6f2);
    --pgs-focus: var(--focus, var(--green-tint-ink, var(--green-ink, #227840)));
    --pgs-lab-w: 5.4em;
    --pgs-val-w: 3.5em;
    --pgs-gap: 10px;
    --pgs-inset: 8px;   /* крапка на 0 чи 100 не вилазить за трек */
    font-size: 13px;
    line-height: 1.3;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;   /* друк / PDF: усі мітки — це фони */
}
.pgs-sum { margin: 0 0 8px; font-size: 14px; color: var(--ink-2, #5c544c); }
.pgs-sum b { color: var(--ink, #2a2622); font-weight: 800; }
.pgs-nw { white-space: nowrap; }
.pgs-scale, .pgs-vis {
    display: grid;
    grid-template-columns: var(--pgs-lab-w) minmax(0, 1fr) var(--pgs-val-w);
    column-gap: var(--pgs-gap);
    align-items: center;
}
.pgs-scale { font-size: 11px; font-weight: 700; color: var(--pgs-sub); font-variant-numeric: tabular-nums; margin-bottom: 2px; }
.pgs-ax { grid-column: 2; position: relative; height: 14px; margin: 0 var(--pgs-inset); }
.pgs-ax > span { position: absolute; top: 0; transform: translateX(-50%); line-height: 14px; }
.pgs-ax-u { grid-column: 3; text-align: right; }
.pgs-list { list-style: none; margin: 0 -6px; padding: 0; }
.pgs-item { margin: 0; padding: 0; }
.pgs-item--ent { margin-bottom: 4px; padding-bottom: 4px; border-bottom: 1px solid var(--pgs-line); }
.pgs-row {
    display: block; width: 100%; margin: 0; padding: 0; border: 0; background: none; appearance: none; -webkit-appearance: none;
    font: inherit; color: inherit; text-align: left; cursor: pointer; border-radius: 8px; position: relative;
    -webkit-tap-highlight-color: transparent;
}
.pgs-vis { min-height: 34px; padding: 3px 6px; border-radius: 8px; grid-template-areas: "lab track val" ". cue cue"; }
.pgs-row:focus-visible { outline: 2px solid var(--pgs-focus); outline-offset: 1px; }
.pgs-row[aria-expanded="true"] .pgs-vis { background: var(--pgs-hover); }
@media (hover: hover) { .pgs-row:hover .pgs-vis { background: var(--pgs-hover); } }
.pgs-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* підпис переноситься, а не обрізається «…» (довгі назви без номера, збільшені інтервали тексту, запасний шрифт) */
.pgs-lab { grid-area: lab; min-width: 0; font-weight: 700; color: var(--ink, #2a2622); overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; }
.pgs-lab small { display: block; font-size: 11px; font-weight: 700; line-height: 1.1; color: var(--pgs-sub); }
.pgs-track { grid-area: track; position: relative; height: 26px; margin: 0 var(--pgs-inset); }
.pgs-track::before { content: ''; position: absolute; left: calc(-1 * var(--pgs-inset) + 2px); right: calc(-1 * var(--pgs-inset) + 2px); top: 50%; height: 2px; margin-top: -1px; border-radius: 1px; background: var(--pgs-line); }
.pgs-band { position: absolute; top: 50%; height: 10px; margin-top: -5px; left: var(--a); width: calc(var(--b) - var(--a)); min-width: 4px; box-sizing: border-box; border: 1px solid var(--pgs-edge); border-radius: 5px; background: var(--pgs-ring); }   /* непрозора підкладка: лінія треку не просвічує крізь смугу */
.pgs-band::before, .pgs-sw--band::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--pgs-band); opacity: .6; }
/* риска виступає на 4px над і під крапкою з кільцем (16px) — середину курсу видно, навіть коли крапка на ній */
.pgs-tick { position: absolute; top: 50%; left: var(--m); width: 2px; height: 24px; margin: -12px 0 0 -1px; border-radius: 1px; background: var(--pgs-tick); }
.pgs-dot { position: absolute; top: 50%; left: var(--v); width: 12px; height: 12px; margin: -6px 0 0 -6px; box-sizing: border-box; border-radius: 50%; background: var(--pgs-mid); box-shadow: 0 0 0 2px var(--pgs-ring); }
.pgs-row.is-up .pgs-dot { background: var(--pgs-up); }
.pgs-row.is-low .pgs-dot { background: var(--pgs-low); }
/* вступний — стартовий рівень: порожній маркер без оцінки кольором (позиція відносно смуги лишається) */
.pgs-row.is-ent .pgs-dot { background: var(--pgs-ring); border: 2.5px solid var(--pgs-tick); }
.pgs-val { grid-area: val; text-align: right; white-space: nowrap; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink, #2a2622); }
.pgs-row.is-none .pgs-val { font-weight: 700; color: var(--pgs-sub); }
.pgs-row.is-none .pgs-lab { color: var(--ink-2, #5c544c); }
.pgs-cue { grid-area: cue; display: flex; align-items: center; gap: 4px; margin: -3px 0 1px; font-size: 12px; font-weight: 700; color: var(--pgs-cue); }
.pgs-ico { flex: none; width: 14px; height: 14px; fill: none; stroke: var(--pgs-low); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pgs-det { margin: 2px 0 6px calc(var(--pgs-lab-w) + var(--pgs-gap) + 6px); padding: 7px 10px; border-radius: 8px; background: var(--pgs-hover); font-size: 12.5px; line-height: 1.45; color: var(--ink-2, #5c544c); }
.pgs-det[hidden] { display: none; }
.pgs-det b { color: var(--ink, #2a2622); font-weight: 800; }
.pgs-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 10px; font-size: 12px; color: var(--ink-2, #5c544c); }
.pgs-lg { display: inline-flex; align-items: center; gap: 5px; }
.pgs-lg--key { flex-wrap: wrap; gap: 4px 10px; }
.pgs-k { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.pgs-sw { display: inline-block; flex: none; }
.pgs-sw--band { position: relative; width: 22px; height: 10px; box-sizing: border-box; border: 1px solid var(--pgs-edge); border-radius: 5px; }
.pgs-sw--tick { width: 2px; height: 14px; border-radius: 1px; background: var(--pgs-tick); }
.pgs-sw--up, .pgs-sw--mid, .pgs-sw--low, .pgs-sw--ent { width: 10px; height: 10px; box-sizing: border-box; border-radius: 50%; background: var(--pgs-mid); }
.pgs-sw--up { background: var(--pgs-up); }
.pgs-sw--low { background: var(--pgs-low); }
.pgs-sw--ent { background: var(--pgs-ring); border: 2px solid var(--pgs-tick); }
.pgs-k .pgs-ico { width: 13px; height: 13px; }
.pgs-hint { flex-basis: 100%; color: var(--pgs-sub); }
.pgs-hint--touch { display: none; }
@media (hover: none) { .pgs-hint--hover { display: none; } .pgs-hint--touch { display: inline; } }
@container pgs (min-width: 600px) { .pgs-scale, .pgs-list { --pgs-lab-w: 8.6em; --pgs-gap: 14px; } }   /* довге слово назви («Комбінаторика») вміщається без переносу */
@container pgs (max-width: 479.98px) {
    .pgs-scale, .pgs-list { --pgs-gap: 8px; }
    .pgs-det { margin-left: 0; }
}
@container pgs (max-width: 319.98px) {
    .pgs-scale { grid-template-columns: minmax(0, 1fr); }
    .pgs-scale .pgs-ax { grid-column: 1; }
    .pgs-ax-u { display: none; }
    .pgs-vis { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "lab val" "track track" "cue cue"; padding: 4px 6px 2px; }
    .pgs-lab small { display: inline; margin-left: .45em; }
}
/* Windows «Висока контрастність»: фони й тіні примусово зникають — малюємо мітки системними кольорами */
@media (forced-colors: active) {
    .pgs-track::before, .pgs-band, .pgs-band::before, .pgs-tick, .pgs-dot, .pgs-sw, .pgs-sw::before { forced-color-adjust: none; }
    .pgs-track::before { background: GrayText; }
    .pgs-band, .pgs-sw--band { border-color: CanvasText; background: Canvas; }
    .pgs-band::before, .pgs-sw--band::before { background: GrayText; opacity: .6; }
    .pgs-tick, .pgs-sw--tick { background: CanvasText; }
    .pgs-dot, .pgs-row.is-up .pgs-dot, .pgs-row.is-low .pgs-dot, .pgs-sw--up, .pgs-sw--mid, .pgs-sw--low { background: Highlight; box-shadow: 0 0 0 2px Canvas; }
    .pgs-row.is-ent .pgs-dot, .pgs-sw--ent { background: Canvas; border-color: Highlight; }
}
.pg-ent, .pg-ent-now { font-size: 14px; margin-top: 4px; }
.pg-trend { display: flex; gap: 8px; flex-wrap: wrap; }
.pg-tr { font-size: 13px; padding: 4px 10px; border-radius: 8px; font-weight: 700; }
.pg-tr--u { background: #fbe0e0; color: #c0392b; }
.pg-tr--m { background: #fbeccb; color: #8a5e0a; }
.pg-tr--c { background: #dbe8f8; color: #2b5e9e; }
[data-theme="dark"] .pg-card { background: #262320; border-color: #3b3733; }
[data-theme="dark"] .pgs { --pgs-ring: #262320; --pgs-edge: #7f7870; }   /* кільце крапки = тло картки (воно тут задане явно); край смуги ~3.6:1 — тихіше за риску; у зін — токени */
[data-theme="dark"] .pg-big-num { color: #9fd3ac; }
[data-theme="dark"] .pg-tr--u { background: #3a1a1c; color: #ff8a8a; }
[data-theme="dark"] .pg-tr--m { background: #3a2c0f; color: #f2c775; }
[data-theme="dark"] .pg-tr--c { background: #17273c; color: #82b1e8; }

/* ── Публічна сторінка прогресу + огляд групи ── */
.pg-pub-head { font-size: 20px; font-weight: 800; margin: 6px 0 2px; }
.pg-pub-sub { display: block; font-size: 13px; font-weight: 400; color: var(--muted, #8a8177); margin-top: 2px; }
.go-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.go-card { border: 1px solid var(--border, #e5ddd5); border-radius: 12px; padding: 10px 12px; background: var(--surface, #fffdfb); }
.go-card--warn { border-color: #e8b2ac; background: #fdf4f3; }
.go-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; font-size: 14px; }
.go-tr { font-size: 11px; font-weight: 800; padding: 2px 7px; border-radius: 99px; white-space: nowrap; }
.go-tr--down { background: #fbe0e0; color: #c0392b; }
.go-tr--up { background: #dcecdd; color: #2e6b3f; }
.go-tr--flat { background: #ececea; color: #6d6a63; }
.go-tr--new { background: #dbe8f8; color: #2b5e9e; }
.go-spark { width: 100%; height: 40px; display: block; }
.go-sp-med { fill: none; stroke: #b4b2a9; stroke-width: 1; stroke-dasharray: 3 3; }
.go-sp-my { fill: none; stroke: #598e2e; stroke-width: 2; stroke-linejoin: round; }
.go-sp-dot { fill: #598e2e; }
.go-meta { font-size: 12px; color: var(--muted, #8a8177); margin-top: 3px; }
[data-theme="dark"] .go-card { background: #262320; border-color: #3b3733; }
[data-theme="dark"] .go-card--warn { background: #2e211f; border-color: #5a3a35; }
[data-theme="dark"] .go-sp-my { stroke: #9fd3ac; }
[data-theme="dark"] .go-sp-dot { fill: #9fd3ac; }
[data-theme="dark"] .go-tr--down { background: #3a1a1c; color: #ff8a8a; }
[data-theme="dark"] .go-tr--up { background: #1f2e22; color: #9fd3ac; }
[data-theme="dark"] .go-tr--flat { background: #2b2926; color: #a8a29a; }
[data-theme="dark"] .go-tr--new { background: #17273c; color: #82b1e8; }

/* ── Сторінка учня (адмінка) ── */
.sp-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 14px 0 4px; }
.sp-name { font-size: 24px; font-weight: 800; }
.sp-sub { font-size: 13px; color: var(--muted, #8a8177); }
.sp-stats { display: flex; gap: 10px; flex-wrap: wrap; }
.sp-stat { border: 1px solid var(--border, #e5ddd5); border-radius: 12px; padding: 8px 14px; text-align: center; background: var(--surface, #fffdfb); }
.sp-stat b { display: block; font-size: 20px; color: var(--sage-dark, #5f8069); }
.sp-stat span { font-size: 11px; color: var(--muted, #8a8177); }
.sp-regen { margin-left: auto; padding: 2px 8px; font-size: 13px; }
#spSummary { font-size: 14.5px; line-height: 1.6; white-space: pre-wrap; }
.sp-sum-at { font-size: 11px; color: var(--muted, #8a8177); margin-top: 6px; }
.sp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sp-table th { text-align: left; padding: 6px 8px; color: var(--muted, #8a8177); font-size: 11px; text-transform: uppercase; letter-spacing: .03em; border-bottom: 1px solid var(--border, #e5ddd5); }
.sp-table td { padding: 7px 8px; border-bottom: 1px solid var(--border, #e5ddd5); }
.go-card { cursor: pointer; }
.go-card:hover { border-color: var(--sage, #7c9d85); }
[data-theme="dark"] .sp-stat { background: #262320; border-color: #3b3733; }
[data-theme="dark"] .sp-stat b { color: #9fd3ac; }
[data-theme="dark"] .sp-table th, [data-theme="dark"] .sp-table td { border-color: #3b3733; }


.pg-summary { font-size: 14.5px; line-height: 1.65; white-space: pre-wrap; }

/* ── Компактніші результати вступного ── */
.entrance-results .hw-banner { padding: 12px 16px; margin-bottom: 10px; }
.entrance-results .entrance-fb { padding: 14px 16px; margin: 10px 0 6px; }
.entrance-results .entrance-fb p { font-size: 14px; line-height: 1.55; margin-bottom: 9px; }
.entrance-results .rv-correct-summary { padding: 8px 12px; }
.dash-acts { white-space: nowrap; }
.dash-sel { width: 30px; text-align: center; }
.dash-sel input { width: 16px; height: 16px; accent-color: #598e2e; cursor: pointer; vertical-align: middle; }
.dash-acts button { background: none; border: none; cursor: pointer; font-size: 15px; padding: 4px 5px; border-radius: 8px; opacity: .75; }
.dash-acts button:hover { opacity: 1; background: color-mix(in srgb, currentColor 12%, transparent); }
/* Тео-флешкартки */
.th-deck { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.th-card { border: 1px solid var(--border, #e5ddd5); border-radius: 14px; padding: 14px 16px; background: var(--surface-2, #f9f6f2); }
.th-q { font-weight: 800; font-size: 14.5px; line-height: 1.35; display: flex; gap: 8px; }
.th-num { flex: none; width: 22px; height: 22px; border-radius: 7px; background: #7c9d85; color: #fff; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; }
.th-a { margin-top: 8px; font-size: 14px; font-weight: 600; color: var(--text-dark, #2a2622); }
.th-ex { margin-top: 8px; font-size: 13px; color: var(--muted, #8a8177); background: var(--bg-white, #fff); border-radius: 10px; padding: 8px 10px; }
.th-ex span { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #c96a2c; margin-right: 4px; }
[data-theme="dark"] .th-card { background: #221f1d; border-color: #39342f; }
[data-theme="dark"] .th-ex { background: #1a1816; }

/* ═══ Самоперевірка готовності до заняття (кабінет учня) ═══ */
.prep-card { display: flex; align-items: center; gap: 14px; padding: 16px 18px; margin: 4px 0 18px; border-radius: 16px;
    background: var(--surface-2, #f4f7f3); border: 1px solid #d7e4d5; }
.prep-card--done { background: var(--surface-2, #f6f8f5); border-color: #cfe0cd; }
.prep-spark, .prep-done-badge { flex: none; width: 44px; height: 44px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; }
.prep-spark { background: #598e2e; color: #fff; }
.prep-done-badge { background: #227840; color: #fff; }
.prep-spark svg, .prep-done-badge svg, .prep-done-mark svg { width: 22px; height: 22px; }
.prep-body { flex: 1 1 auto; min-width: 0; }
.prep-title { font-weight: 800; font-size: 16px; color: var(--text-dark, #26302a); }
.prep-sub { margin-top: 4px; font-size: 13.5px; line-height: 1.45; color: var(--muted, #6f7b70); }
.prep-sub b { color: #427a49; font-weight: 800; }
.prep-start, .prep-again { flex: none; border: none; cursor: pointer; border-radius: 12px; font-weight: 800; font-size: 14px;
    display: inline-flex; align-items: center; gap: 7px; padding: 11px 16px; }
.prep-start { background: #598e2e; color: #fff; }
.prep-start:hover { background: #4d7d27; }
.prep-start svg { width: 16px; height: 16px; }
.prep-again { background: transparent; color: #598e2e; border: 1.5px solid #b9d1b0; padding: 9px 14px; }
.prep-again:hover { background: #eef4ea; }
@media (max-width: 560px) { .prep-card { flex-wrap: wrap; } .prep-start, .prep-again { width: 100%; justify-content: center; } }

/* Оверлей самоперевірки */
.prep-overlay { position: fixed; inset: 0; z-index: 10000; display: none; align-items: center; justify-content: center;
    background: rgba(24, 30, 26, .5); padding: 16px; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.prep-sheet { width: 100%; max-width: 480px; background: var(--bg-white, #fff); border-radius: 20px; padding: 22px 22px 24px;
    box-shadow: 0 24px 60px rgba(20, 30, 24, .28); animation: prepIn .22s ease; }
@keyframes prepIn { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.prep-head { display: flex; align-items: center; gap: 12px; }
.prep-progress { flex: 1 1 auto; height: 6px; border-radius: 4px; background: #e7ede4; overflow: hidden; }
.prep-progress span { display: block; height: 100%; background: #598e2e; border-radius: 4px; transition: width .25s ease; }
.prep-x { flex: none; border: none; background: none; cursor: pointer; font-size: 18px; color: var(--muted, #9aa39a); line-height: 1; padding: 4px; }
.prep-count { margin: 14px 0 6px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #7c9d85; }
.prep-question { font-size: 19px; font-weight: 800; line-height: 1.35; color: var(--text-dark, #26302a); }
.prep-reveal { margin-top: 18px; width: 100%; border: 1.5px solid #b9d1b0; background: #f0f5ec; color: #4d7d27; font-weight: 800;
    font-size: 15px; border-radius: 13px; padding: 13px; cursor: pointer; }
.prep-reveal:hover { background: #e7f0e1; }
.prep-hint { margin-top: 12px; font-size: 12.5px; color: var(--muted, #9aa39a); text-align: center; line-height: 1.4; }
.prep-answer { margin-top: 14px; padding: 14px 16px; border-radius: 13px; background: var(--surface-2, #f6f8f4); border: 1px solid #e0e8db; }
.prep-answer-line { font-size: 15px; font-weight: 600; line-height: 1.5; color: var(--text-dark, #2a332c); }
.prep-answer-line + .prep-answer-line { margin-top: 8px; }
.prep-ex-label { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #c96a2c; margin-right: 4px; }
.prep-ask { margin: 18px 0 10px; font-size: 14px; font-weight: 700; color: var(--text-dark, #3a4239); text-align: center; }
.prep-choices { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.prep-choice { border: 1.5px solid transparent; border-radius: 13px; cursor: pointer; padding: 12px 6px; display: flex; flex-direction: column; align-items: center; gap: 3px; font-family: inherit; }
.prep-choice b { font-size: 14px; font-weight: 800; }
.prep-choice span { font-size: 11px; opacity: .8; }
.prep-choice--know { background: #eef6ea; border-color: #cfe6c6; color: #3d7a2f; }
.prep-choice--know:hover { background: #e3f0dc; }
.prep-choice--refreshed { background: #fef4e8; border-color: #f6ddbc; color: #b9701f; }
.prep-choice--refreshed:hover { background: #fcebd6; }
.prep-choice--forgot { background: #f8f0ee; border-color: #ecd2ca; color: #b0554a; }
.prep-choice--forgot:hover { background: #f2e2dd; }
@media (max-width: 420px) { .prep-choices { grid-template-columns: 1fr; } .prep-choice { flex-direction: row; justify-content: center; gap: 6px; } }
.prep-sheet--done { text-align: center; }
.prep-done-mark { width: 56px; height: 56px; margin: 6px auto 14px; border-radius: 17px; background: #227840; color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.prep-done-mark svg { width: 30px; height: 30px; }
.prep-done-title { font-size: 20px; font-weight: 800; color: var(--text-dark, #26302a); }
.prep-done-score { margin-top: 8px; font-size: 15px; color: var(--muted, #6f7b70); }
.prep-done-score b { color: #427a49; font-size: 18px; }
.prep-done-line { margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--muted, #6f7b70); }
.prep-watch { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; padding: 12px 18px; border-radius: 13px;
    background: #ef8748; color: #fff; font-weight: 800; font-size: 14.5px; text-decoration: none; }
.prep-watch:hover { background: #e2793a; }
.prep-watch svg { width: 18px; height: 18px; }
.prep-done-close { display: block; width: 100%; margin-top: 16px; border: none; background: #598e2e; color: #fff; font-weight: 800; font-size: 15px; border-radius: 13px; padding: 13px; cursor: pointer; }
.prep-done-close:hover { background: #4d7d27; }
[data-theme="dark"] .prep-card { background: #1c221d; border-color: #33422f; }
[data-theme="dark"] .prep-sheet { background: #1e231f; }
[data-theme="dark"] .prep-question, [data-theme="dark"] .prep-title, [data-theme="dark"] .prep-done-title { color: #e6eee4; }
[data-theme="dark"] .prep-answer { background: #232a24; border-color: #33422f; }
[data-theme="dark"] .prep-answer-line { color: #d6ded2; }
[data-theme="dark"] .prep-progress { background: #2b332a; }
[data-theme="dark"] .prep-reveal { background: #232c22; border-color: #3c5334; color: #9ccb86; }

.th-invite { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--border, #e5ddd5); }
[data-theme="dark"] .th-invite { border-top-color: #39342f; }

/* Зведення самоперевірки (адмін) */
.th-sum-head { margin-top: 12px; font-size: 14px; color: var(--text-dark, #2a2622); }
.th-sum-head b { color: #427a49; }
.th-sum-table { margin-top: 12px; border: 1px solid var(--border, #e5ddd5); border-radius: 12px; overflow: hidden; }
.th-sum-row { display: grid; grid-template-columns: 1fr 74px 34px 34px 34px; align-items: center; gap: 6px; padding: 9px 12px; border-top: 1px solid var(--border, #eee6dd); }
.th-sum-row:first-child { border-top: none; }
.th-sum-row--h { background: var(--surface-2, #f7f4f0); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted, #8a8177); }
.th-sum-row--h span:not(:first-child) { text-align: center; }
.th-sum-name { font-weight: 700; font-size: 13.5px; color: var(--text-dark, #2a2622); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.th-ready { text-align: center; font-weight: 800; font-size: 13px; border-radius: 8px; padding: 3px 0; }
.th-ready--ok { background: #eef6ea; color: #3d7a2f; }
.th-ready--mid { background: #fef4e8; color: #b9701f; }
.th-ready--low { background: #f8f0ee; color: #b0554a; }
.th-pill { text-align: center; font-weight: 800; font-size: 13px; font-variant-numeric: tabular-nums; }
.th-pill--know { color: #3d7a2f; }
.th-pill--refr { color: #b9701f; }
.th-pill--forg { color: #b0554a; }
.th-sum-forgot { margin-top: 14px; }
.th-sum-forgot-h { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted, #8a8177); margin-bottom: 8px; }
.th-forgot-item { display: flex; gap: 8px; align-items: baseline; font-size: 13.5px; line-height: 1.4; padding: 5px 0; color: var(--text-dark, #2a2622); border-top: 1px dashed var(--border, #ece4db); }
.th-forgot-item:first-of-type { border-top: none; }
.th-forgot-c { flex: none; font-weight: 800; color: #b0554a; font-variant-numeric: tabular-nums; }
[data-theme="dark"] .th-sum-table { border-color: #39342f; }
[data-theme="dark"] .th-sum-row { border-top-color: #2e2a26; }
[data-theme="dark"] .th-sum-row--h { background: #221f1d; }
[data-theme="dark"] .th-sum-name, [data-theme="dark"] .th-forgot-item { color: #e6e0d8; }

.ent-edit-card { padding: 16px; }
.ent-edit-card .admin-field { display: block; margin: 8px 0; }
.ent-edit-actions { display: flex; align-items: center; gap: 10px; margin-top: 12px; }

/* Білдер звітів про прогрес */
.rep-works { display: flex; flex-direction: column; gap: 2px; }
.rep-work { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: 10px; }
.rep-work:hover { background: var(--surface-2, #f6f6f6); }
.rep-pick-lbl { display: inline-flex; align-items: center; flex: none; cursor: pointer; }
.rep-pick-lbl input { width: 18px; height: 18px; cursor: pointer; accent-color: #598e2e; }
.rep-w-title { flex: 1; min-width: 0; font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rep-w-att { font-weight: 600; font-size: 12px; color: var(--muted, #a39a90); }
.rep-w-pct { font-weight: 800; font-size: 14px; width: 46px; text-align: right; flex: none; }
.rep-w-date { font-size: 12px; color: var(--muted, #8a8177); width: 82px; text-align: right; flex: none; }
.rep-sim-lbl { font-size: 12px; font-weight: 700; color: var(--muted, #8a8177); display: inline-flex; align-items: center; gap: 4px; flex: none; cursor: pointer; white-space: nowrap; }
.rep-sim-lbl input { accent-color: #ef8748; cursor: pointer; }
.rep-link-row { display: flex; gap: 8px; margin-top: 8px; }
.rep-link-row input { flex: 1; font-size: 12px; padding: 8px 10px; border: 1px solid var(--border, #ddd); border-radius: 8px; background: var(--surface-2, #f6f6f6); color: inherit; }
@media (max-width: 560px) {
  .rep-w-date { display: none; }
  .rep-w-title { font-size: 13px; }
}

/* Прогрес групи */
.grp-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; font-weight: 700; color: var(--muted, #8a8177); margin-bottom: 8px; }
.grp-legend span { display: inline-flex; align-items: center; gap: 6px; }
.grp-lg { width: 16px; height: 10px; border-radius: 3px; display: inline-block; flex: none; }
.grp-lg--band { background: #eef4ec; border: 1px solid #d6e4d3; }
.grp-lg--avg { height: 3px; border-radius: 2px; background: #7c9d85; }
.grp-lg--sel { height: 3px; border-radius: 2px; background: #2a2622; }
[data-theme="dark"] .grp-lg--band { background: #24302a; border-color: #33463a; }
[data-theme="dark"] .grp-lg--avg { background: #86c090; }
[data-theme="dark"] .grp-lg--sel { background: #f2ede7; }
.grp-chart { overflow-x: auto; }
.grp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 14px 0; }
.grp-insight { padding: 14px 16px; }
.grp-ins-lab { font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted, #8a8177); }
.grp-ins-main { font-family: 'Gelasio', Georgia, serif; font-size: 19px; font-weight: 700; margin: 6px 0 3px; line-height: 1.2; }
.grp-ins-sub { font-size: 12.5px; font-weight: 600; color: var(--muted, #8a8177); }
.grp-ins-sub b { color: var(--text-dark, #2a2622); }
.grp-insight--hard .grp-ins-lab { color: #c96a2c; }
.grp-insight--hard .grp-ins-sub b { color: #c96a2c; }
.grp-ins-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; padding: 3px 0; }
.grp-ceil { font-size: 10px; font-weight: 700; color: var(--muted, #8a8177); }
.grp-list { display: flex; flex-direction: column; }
.grp-row { display: flex; align-items: center; gap: 12px; padding: 9px 8px; border-radius: 10px; cursor: pointer; border-bottom: 1px solid var(--border-light, #efe7df); }
.grp-row:last-child { border-bottom: none; }
.grp-row:hover { background: var(--bg-light, #f9f6f2); }
.grp-row.sel { background: color-mix(in srgb, #7c9d85 14%, transparent); }
.grp-name { flex: 1; min-width: 0; font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grp-spark { flex: none; line-height: 0; }
.grp-avg { width: 44px; text-align: right; font-weight: 800; font-size: 13px; color: var(--muted, #8a8177); flex: none; }
.grp-gain { width: 44px; text-align: right; font-weight: 800; font-size: 13px; flex: none; }
.grp-gain.up { color: #598e2e; }
.grp-gain.down { color: #dc4040; }
.grp-gain--na { color: var(--text-light, #a39a90); }
@media (max-width: 620px) {
  .grp-grid { grid-template-columns: 1fr; }
  .grp-avg { display: none; }
}

/* Дашборд — інструменти, смужка-рейтинг, бали, іконки типів */
.dash-tools { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.dash-sortlbl { font-size: 13px; font-weight: 700; color: var(--muted, #667); display: flex; align-items: center; gap: 6px; }
.dash-sortlbl select { font-family: inherit; font-weight: 700; padding: 6px 8px; border: 2px solid var(--border, #e3e3e3); border-radius: 10px; background: var(--card, #fff); color: inherit; cursor: pointer; }
.dash-name { border-left: 5px solid transparent; }
.dash-band--high { border-left-color: #227840; }
.dash-band--mid { border-left-color: #FF7A00; }
.dash-band--low { border-left-color: #d64545; }
.dash-pct { cursor: pointer; }
.dash-pct b { display: block; line-height: 1.1; }
.dash-pts { display: block; font-size: 11px; font-weight: 700; color: var(--muted, #8a929b); }
.dash-th { cursor: pointer; }
.dash-th:hover { background: color-mix(in srgb, var(--primary, #58cc02) 12%, transparent); }
.dash-tico { display: block; font-size: 10px; font-weight: 800; color: var(--muted, #99a); letter-spacing: -.5px; }
.dash-th--click { text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; text-decoration-color: var(--muted, #b7b0a6); }
[data-theme="dark"] .dash-sortlbl select { background: #161e17; border-color: #2a3a2c; }

/* Розбір завдання вступного: умова + варіанти + як відповідали учні */
.et-overlay { position: fixed; inset: 0; z-index: 10000; display: none; align-items: center; justify-content: center;
    background: rgba(24, 30, 26, .5); padding: 16px; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.et-sheet { width: 100%; max-width: 560px; max-height: 88vh; overflow-y: auto; background: var(--bg-white, #fff); border-radius: 18px;
    padding: 20px 22px 22px; box-shadow: 0 24px 60px rgba(20, 30, 24, .28); }
.et-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.et-num { font-size: 17px; font-weight: 800; color: var(--text-dark, #26302a); }
.et-tip { margin-top: 3px; font-size: 12.5px; color: var(--muted, #8a8177); }
.et-x { flex: none; border: none; background: none; cursor: pointer; font-size: 18px; color: var(--muted, #9aa39a); padding: 2px 4px; }
.et-q { margin: 14px 0 14px; font-size: 15.5px; font-weight: 700; line-height: 1.45; color: var(--text-dark, #26302a); }
.et-opts { display: flex; flex-direction: column; gap: 8px; }
.et-opt { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 11px; border: 1px solid var(--border, #e5ddd5); background: var(--surface-2, #f8f6f2); }
.et-opt--ok { border-color: #b9d1b0; background: #eef6ea; }
.et-opt-let { flex: none; width: 24px; height: 24px; border-radius: 7px; background: var(--muted-2, #cfc7bd); color: #fff; font-weight: 800; font-size: 12.5px; display: inline-flex; align-items: center; justify-content: center; }
.et-opt--ok .et-opt-let { background: #598e2e; }
.et-opt-txt { flex: 1 1 auto; font-size: 14px; color: var(--text-dark, #2a332c); }
.et-opt-badge { flex: none; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #3d7a2f; }
.et-diff { margin: 14px 0 4px; font-size: 13.5px; color: var(--muted, #6f7b70); }
.et-diff b { color: var(--text-dark, #2a332c); }
.et-students-h { margin: 14px 0 8px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted, #8a8177); }
.et-students { display: flex; flex-direction: column; gap: 4px; }
.et-srow { display: grid; grid-template-columns: 1fr 40px 68px auto; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 9px; background: var(--surface-2, #f8f6f2); }
.et-srow--ok { background: #eef6ea; }
.et-srow--wrong { background: #f8f0ee; }
.et-sname { font-weight: 700; font-size: 13.5px; color: var(--text-dark, #2a2622); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.et-spick { text-align: center; font-weight: 800; font-size: 14px; }
.et-sverd { text-align: center; font-weight: 800; font-size: 12px; }
.et-sverd--ok { color: #3d7a2f; }
.et-sverd--wrong { color: #b0554a; }
.et-sverd--na { color: var(--muted, #a39a90); font-weight: 700; }
.et-reason { font-size: 11px; font-weight: 700; border: 1px solid; border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.et-note { margin-top: 14px; font-size: 11.5px; line-height: 1.4; color: var(--muted, #a39a90); }
[data-theme="dark"] .et-sheet { background: #1e231f; }
[data-theme="dark"] .et-num, [data-theme="dark"] .et-q { color: #e6eee4; }
[data-theme="dark"] .et-opt { background: #232a24; border-color: #33422f; }
[data-theme="dark"] .et-opt--ok { background: #24331f; border-color: #3c5334; }
[data-theme="dark"] .et-srow { background: #232a24; }
[data-theme="dark"] .et-srow--ok { background: #24331f; }
[data-theme="dark"] .et-srow--wrong { background: #33241f; }
[data-theme="dark"] .et-sname { color: #e6e0d8; }

/* Розподіл відповідей по завданню */
.dash-dist-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, .5); z-index: 4000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.dash-dist-overlay.hidden { display: none; }
.dash-dist-box { background: var(--card, #fff); color: var(--ink, #222); border-radius: 16px; padding: 22px; max-width: 560px; width: 100%; max-height: 82vh; overflow: auto; position: relative; box-shadow: 0 20px 60px rgba(0, 0, 0, .3); }
.dash-dist-close { position: absolute; top: 12px; right: 14px; border: none; background: transparent; font-size: 20px; cursor: pointer; color: var(--muted, #889); }
.dash-dist-box h3 { margin: 0 6px 8px 0; }
.dist-q { color: var(--muted, #667); font-size: 14px; line-height: 1.45; margin-bottom: 10px; }
.dist-meta { font-weight: 700; margin-bottom: 14px; }
.dist-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.dist-ans { min-width: 90px; max-width: 160px; font-weight: 700; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dist-track { flex: 1; height: 20px; background: var(--border, #eee); border-radius: 6px; overflow: hidden; }
.dist-bar { display: block; height: 100%; border-radius: 6px; background: #c0392b; }
.dist-correct .dist-bar { background: #227840; }
.dist-empty .dist-bar { background: #b0b6bd; }
.dist-n { min-width: 62px; text-align: right; font-weight: 800; font-size: 13px; }
.dist-correct .dist-ans { color: #1e7a43; }
[data-theme="dark"] .dash-dist-box { background: #161e17; }
[data-theme="dark"] .dist-track { background: #2a2a2a; }

/* Навігація між учнями у вікні розбору */
.rv-nav { display: flex; align-items: center; gap: 12px; margin: 8px 0 4px; }
.rv-navpos { font-weight: 800; color: var(--muted, #778); font-size: 14px; }
.st-btn[disabled] { opacity: .4; cursor: default; }
.hw-list-top { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.dz-dash-list { display: flex; flex-wrap: wrap; gap: 8px; }

/* Список ДЗ-дашбордів у форматі «Сесії» (як ClassTime): рядок = назва · учні · дата */
.dzl { display: flex; flex-direction: column; }
.dzl-row {
    display: grid; grid-template-columns: 1fr 72px 116px; align-items: center; gap: 12px;
    width: 100%; text-align: left; background: none; border: none; cursor: pointer;
    padding: 13px 8px; border-top: 1px solid var(--border, #ece4db); font: inherit; color: var(--text-dark, #2a2622);
}
.dzl-row:first-child { border-top: none; }
.dzl-row:not(.dzl-row--head):hover { background: var(--surface-2, #f7f4f0); }
.dzl-row--head {
    cursor: default; padding-top: 4px; padding-bottom: 10px;
    font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted, #8a8177);
}
.dzl-row--head:hover { background: none; }
.dzl-name { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 14.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dzl-row--head .dzl-name { font-weight: 800; }
.dzl-dot { flex: none; width: 9px; height: 9px; border-radius: 999px; background: var(--muted-2, #cfc7bd); }
.dzl-dot.is-on { background: #598e2e; }
.dzl-count, .dzl-date { text-align: right; font-weight: 700; font-size: 13.5px; color: var(--ink-2, #5c544c); font-variant-numeric: tabular-nums; }
.dzl-row--head .dzl-count, .dzl-row--head .dzl-date { color: var(--muted, #8a8177); }
.dzl-date { color: var(--muted, #8a8177); font-weight: 600; }
[data-theme="dark"] .dzl-row { border-top-color: #2e2a26; color: var(--ink, #e8e0d8); }
[data-theme="dark"] .dzl-row:not(.dzl-row--head):hover { background: #221f1d; }
@media (max-width: 560px) {
    .dzl-row { grid-template-columns: 1fr 52px 84px; gap: 8px; padding: 12px 4px; }
    .dzl-name { font-size: 13.5px; }
    .dzl-date { font-size: 12px; }
}

/* Гість: результат збережено локально */
@supports (--zin-legacy: 1) {
.guest-note { border: 2px solid #FF7A00 !important; background: color-mix(in srgb, #FF7A00 8%, transparent); }
}

/* Фото-картка (вгорі результатів) — помітна */
@supports (--zin-legacy: 1) {
.hw-photo-card { border: 2px solid var(--primary, #58cc02) !important; background: color-mix(in srgb, var(--primary, #58cc02) 8%, transparent); }
}

/* Прапорці «є питання по завданню» */
.hw-flag-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.hw-flag-q { font-weight: 700; font-size: 14px; color: var(--muted, #667); }
.hw-flag-btns { display: flex; gap: 8px; flex-wrap: wrap; }
@supports (--zin-legacy: 1) {
.hw-flag-btn--ask { border-color: #FF7A00 !important; color: #b35a00 !important; font-weight: 800; }
.hw-flag-btn.active { background: #FF7A00 !important; color: #fff !important; border-color: #FF7A00 !important; }
}

/* Список відповідей учнів у модалці розподілу */
.dist-students-h { font-weight: 800; margin: 16px 0 8px; }
.dist-students { display: flex; flex-direction: column; gap: 6px; }
.dist-stud { display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 10px; border-left: 4px solid #ccc; }
.dist-stud.ds-correct { border-left-color: #227840; }
.dist-stud.ds-partial { border-left-color: #FF7A00; }
.dist-stud.ds-wrong { border-left-color: #c0392b; }
.dist-stud.ds-empty { border-left-color: #b0b6bd; }
.ds-name { font-weight: 700; cursor: pointer; text-decoration: underline dotted; }
.ds-ans { font-weight: 700; color: var(--muted, #556); max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-mark { font-weight: 800; }
.ds-del { border: none; background: transparent; cursor: pointer; font-size: 15px; opacity: .6; }
.ds-del:hover { opacity: 1; }

/* Небезпечна дія + адмін-дії в розборі */
.rv-admin-actions { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border, #eee); }
.st-btn--danger { color: #c0392b; border-color: #e6b0b0; }
.st-btn--danger:hover { background: #fbe0e0; }
[data-theme="dark"] .dist-stud { background: #12180f; }

/* Редагування спроби учня */
.ed-task { border: 1px solid var(--border, #e3e3e3); border-radius: 12px; padding: 12px; margin-bottom: 10px; }
.ed-q { font-weight: 700; margin-bottom: 8px; }
.ed-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.ed-ans, .ed-controls select, .ed-controls input { font-family: inherit; font-weight: 700; padding: 7px 10px; border: 2px solid var(--border, #e3e3e3); border-radius: 10px; background: var(--card, #fff); color: inherit; }
.ed-m { display: inline-flex; align-items: center; gap: 4px; }
.ed-ov { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; color: #b35a00; cursor: pointer; }
.ed-ov input { width: 18px; height: 18px; accent-color: #FF7A00; }
.ed-correct { font-size: 13px; color: var(--muted, #667); margin-top: 6px; }
[data-theme="dark"] .ed-ans, [data-theme="dark"] .ed-controls select, [data-theme="dark"] .ed-controls input { background: #161e17; border-color: #2a3a2c; }
.dz-dash-list .hw-view-btn { font-weight: 700; }

/* ═══════════════════════════════════════════════════════════
   МОБІЛЬНА АДАПТАЦІЯ (adapt): адмінка, дашборд, модалки, розбір.
   Ці поверхні були зроблені desktop-first і не мали правил < 640px.
   ═══════════════════════════════════════════════════════════ */

/* Сторінка ніколи не їде вбік по горизонталі */
html, body { max-width: 100%; overflow-x: hidden; }

/* Сенсорні цілі: на тач-пристроях кнопки мають бути ≥44px */
@media (pointer: coarse) {
    .st-btn, .hw-view-btn, .hw-flag-btn, .hw-del-btn, .btn-secondary,
    .admin-tab, .ds-del, .dash-dist-close {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .dash-cell, .dash-th { min-width: 40px; }
    /* hover-ефекти не потрібні там, де немає курсора */
    .dash-table tbody tr:hover .dash-cell { filter: none; }
}

@media (max-width: 640px) {
    /* ── Адмінка: вкладки прокручуються, картки компактніші ── */
    .admin-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 4px;
        scroll-snap-type: x proximity;
    }
    .admin-tabs::-webkit-scrollbar { display: none; }
    .admin-tab { flex: 0 0 auto; scroll-snap-align: start; white-space: nowrap; }
    .admin-card { padding: 14px; border-radius: 14px; }
    .admin-row { flex-direction: column; gap: 10px; }
    .admin-row .admin-field { width: 100%; min-width: 0; }

    /* ── Список учнів: дії в 2 колонки, картка вертикальна ── */
    .st-row { flex-direction: column; align-items: stretch; gap: 8px; }
    .st-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .st-actions .st-btn { width: 100%; font-size: 13px; padding: 8px 6px; }
    .st-row > .hw-del-btn { align-self: flex-end; }

    /* ── Картки ДЗ ── */
    .hw-card { flex-direction: column; align-items: stretch; gap: 10px; }
    .hw-card-actions { display: flex; flex-wrap: wrap; gap: 8px; }
    .hw-sub-row { flex-wrap: wrap; gap: 6px; }
    .dz-dash-list .hw-view-btn { width: 100%; text-align: left; }

    /* ── Дашборд: вужча липка колонка, компактніша сітка ── */
    .dash-head { gap: 10px; }
    .dash-head h3 { font-size: 18px; width: 100%; }
    .dash-tools { margin-left: 0; width: 100%; justify-content: space-between; }
    .dash-scroll { max-height: 68vh; }
    .dash-table { font-size: 13px; }
    .dash-table th, .dash-table td { padding: 7px 4px; }
    .dash-name { width: 116px; min-width: 116px; max-width: 116px; font-size: 13px; }
    .dash-pct { left: 116px; min-width: 44px; }
    .dash-pts { font-size: 10px; }
    .dash-legend { gap: 8px; font-size: 12px; }
    .dash-hint { width: 100%; }

    /* ── Модалка «розподіл відповідей» ── */
    .dash-dist-overlay { padding: 10px; align-items: flex-end; }
    .dash-dist-box { max-height: 88vh; padding: 18px 14px; border-radius: 16px 16px 0 0; }
    .dist-row { gap: 8px; }
    .dist-ans { min-width: 68px; max-width: 96px; font-size: 12px; }
    .dist-n { min-width: 54px; font-size: 12px; }
    .dist-stud { grid-template-columns: 1fr auto auto auto; gap: 8px; font-size: 13px; }
    .ds-ans { max-width: 84px; }

    /* ── Розбір роботи / редагування ── */
    .rv-nav { flex-wrap: wrap; gap: 8px; }
    .rv-nav .st-btn { flex: 1 1 auto; }
    .ed-controls { flex-direction: column; align-items: stretch; }
    .ed-ans, .ed-controls select, .ed-controls input { width: 100%; }
    .ed-m { justify-content: space-between; }
    .rv-admin-actions { display: flex; flex-wrap: wrap; gap: 8px; }

    /* ── Практика (теми) ── */
    .practice-topics { grid-template-columns: 1fr; }
    .practice-actions { flex-direction: column; align-items: stretch; }
    .practice-actions button { width: 100%; }
}

/* ── Мобільний фікс: верхня панель і вкладки більше не обрізаються ── */
@media (max-width: 640px) {
    /* Панель користувача: кнопки переносяться на свій рядок, нічого не зрізано */
    .user-bar {
        flex-wrap: wrap;
        gap: 8px;
        padding: 10px 14px;
    }
    .user-info { flex: 1 1 auto; min-width: 0; }
    .user-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 42vw; }
    .user-actions {
        width: 100%;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: flex-start;
    }
    .user-actions .btn-cabinet,
    .user-actions .btn-logout { padding: 8px 12px; font-size: 13px; }
    .btn-theme-inline { flex: 0 0 auto; }

    /* Горизонтальні стрічки вкладок: снап + підказка, що можна гортати */
    .top-tabs, .subject-tabs {
        padding: 0 14px;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%);
        mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%);
    }
    .top-tabs::-webkit-scrollbar, .subject-tabs::-webkit-scrollbar { display: none; }
    .top-tabs .tab, .subject-tabs .tab { scroll-snap-align: start; padding: 12px 14px; }

    /* Те саме для вкладок адмінки — видно, що є ще */
    .admin-tabs {
        -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%);
        mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%);
    }
}

/* Картка учня: щоденні дії на виду, решта — під «⋯ Ще» */
.st-more-btn { font-weight: 800; }
.st-more-btn.active { background: var(--border, #e3e3e3); }
.st-more { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border, #e3e3e3); display: flex; flex-direction: column; gap: 10px; }
.st-more[hidden] { display: none; }
.st-more-group { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.st-more-h { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted, #8a929b); min-width: 104px; }
.st-btn--warn { border-color: #f0c07a !important; color: #a86400 !important; }
[data-theme="dark"] .st-more-btn.active { background: #24312a; }
@media (max-width: 640px) {
    .st-more-h { min-width: 100%; margin-bottom: -2px; }
    .st-more-group { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .st-more-group .st-btn { width: 100%; font-size: 13px; }
}

/* ── Навчальний фідбек ДЗ: пояснення + причина помилки ── */
.training-feedback, #trainingFeedback { margin-top: 12px; }
.tf { border-radius: 12px; padding: 14px 16px; }
.tf--ok  { background: #eef7f0; border: 1px solid #cfe3d4; }
.tf--bad { background: #fdf2f0; border: 1px solid #f1c9c6; }
.tf-title { font-weight: 800; font-size: 15px; margin-bottom: 8px; }
.tf--ok  .tf-title { color: #1b5e33; }
.tf--bad .tf-title { color: #9c2f22; }
.tf .hw-sol { margin-top: 4px; }

.tf-reason-block { margin-top: 12px; padding-top: 12px; border-top: 1px dashed #e6bdb7; }
.tf-reason-q { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: #7a4a44; }
.tf-info { border: none; background: #f1c9c6; color: #7a2f27; width: 20px; height: 20px; border-radius: 50%; font-size: 12px; font-weight: 800; cursor: pointer; line-height: 1; }
.tf-info-panel { margin-top: 8px; padding: 10px 12px; background: #fff; border: 1px solid #ecd3cf; border-radius: 10px; font-size: 12.5px; line-height: 1.5; color: #555; display: flex; flex-direction: column; gap: 6px; }
.tf-info-panel.hidden { display: none; }
.tf-reasons { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.tf-reason { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 11px 14px; font-size: 14px; font-weight: 700; color: var(--text-dark, #333); background: #fff; border: 1.5px solid #e6d0cc; border-radius: 10px; cursor: pointer; transition: all .12s; }
.tf-reason:hover { border-color: #227840; }
.tf-reason.picked { border-color: #227840; background: #eef7f0; color: #1b5e33; }
.tf-reason-ic { font-size: 18px; }
.tf-explain-btn { padding: 8px 14px; font-size: 13px; font-weight: 700; color: #227840; background: #f6fbf7; border: 1px solid #cfe3d4; border-radius: 8px; cursor: pointer; }

/* Персональне нагадування на старті ДЗ */
.error-reminder { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 11px 16px; background: #fff7e6; border: 1px solid #f0d38a; border-radius: 12px; font-size: 13.5px; font-weight: 600; color: #7a5a15; }
.error-reminder.hidden { display: none; }
.error-reminder .er-ic { font-size: 18px; }

[data-theme="dark"] .tf--ok { background: #17281d; border-color: #2c4636; }
[data-theme="dark"] .tf--bad { background: #2a1a18; border-color: #4a2a26; }
[data-theme="dark"] .tf-reason { background: #1f2430; border-color: #3a3040; color: #e0e0e0; }
[data-theme="dark"] .tf-reason.picked { background: #17281d; color: #7fd39b; }
[data-theme="dark"] .tf-info-panel { background: #1f2430; border-color: #3a3040; color: #bbb; }
[data-theme="dark"] .error-reminder { background: #2a2413; border-color: #4a3f1a; color: #e6cf8a; }

/* ── Звіт «Аналіз помилок» ── */
.et-insight { display: flex; align-items: center; gap: 10px; margin: 4px 0 16px; padding: 12px 16px; border-radius: 12px; font-size: 14px; font-weight: 600; line-height: 1.45; }
.et-insight-ic { font-size: 20px; }
.et-insight--unknown  { background: #fdf2f0; border: 1px solid #f1c9c6; color: #9c2f22; }
.et-insight--method   { background: #eef2fb; border: 1px solid #cdd9f2; color: #2a4a8a; }
.et-insight--careless { background: #fff7e6; border: 1px solid #f0d38a; color: #7a5a15; }
.et-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.et-card { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 14px 10px; background: var(--bg-gray, #fafafa); border: 1px solid var(--border-color, #e0e0e0); border-radius: 12px; text-align: center; }
.et-card .et-ic { font-size: 22px; }
.et-card b { font-size: 24px; font-weight: 800; }
.et-card span { font-size: 11.5px; color: var(--text-muted, #666); line-height: 1.3; }
.et-card > span { min-height: 2.5em; display: flex; align-items: center; justify-content: center; }
.et-card .et-bar { width: 100%; height: 5px; margin-top: auto; background: #e6e6e6; border-radius: 999px; overflow: hidden; }
.et-card .et-bar span { display: block; height: 100%; border-radius: 999px; }
.et-card .et-pct { font-size: 12px; font-weight: 700; color: var(--text-muted, #666); }
.et-card--unknown  .et-bar span { background: #e0574a; }
.et-card--method   .et-bar span { background: #4a6fd0; }
.et-card--careless .et-bar span { background: #e0a52a; }
.et-section-h { margin: 18px 0 8px; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted, #666); }
.et-skill-list { display: flex; flex-direction: column; gap: 6px; }
.et-skill-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: var(--bg-gray, #fafafa); border: 1px solid var(--border-light, #eee); border-radius: 10px; }
.et-skill-name { flex: 1; font-size: 13.5px; font-weight: 700; }
.et-skill-badges { display: flex; gap: 10px; font-size: 13px; font-weight: 700; color: #555; }
.et-skill-total { min-width: 26px; text-align: center; font-size: 13px; font-weight: 800; color: #fff; background: #227840; border-radius: 999px; padding: 2px 8px; }
[data-theme="dark"] .et-card, [data-theme="dark"] .et-skill-row { background: #1f2430; border-color: #333b48; }
[data-theme="dark"] .et-skill-badges { color: #aeb6c2; }
[data-theme="dark"] .et-insight--unknown { background: #2a1a18; border-color: #4a2a26; color: #f0a89e; }
[data-theme="dark"] .et-insight--method { background: #1a2033; border-color: #2c3550; color: #9db4e8; }
[data-theme="dark"] .et-insight--careless { background: #2a2413; border-color: #4a3f1a; color: #e6cf8a; }
@media (max-width: 480px) { .et-card b { font-size: 20px; } .et-card span { font-size: 10.5px; } }

/* ── Вхідний екран вступного тесту ── */
.entrance-gate { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 20px; background: linear-gradient(160deg, #eaf5ee, #dbeee2); overflow-y: auto; }
.entrance-gate.hidden { display: none; }
.eg-card { width: 100%; max-width: 440px; background: #fff; border-radius: 20px; padding: 30px 26px; box-shadow: 0 18px 50px rgba(27,94,51,.18); text-align: center; }
.eg-logo { font-size: 46px; line-height: 1; }
.eg-title { margin: 10px 0 6px; font-size: 24px; font-weight: 800; color: #1b5e33; }
.eg-sub { margin: 0 0 20px; font-size: 14px; line-height: 1.55; color: #5a6b60; }
.eg-label { display: block; text-align: left; font-size: 13px; font-weight: 700; color: #227840; margin: 12px 0 5px; }
.eg-input { width: 100%; box-sizing: border-box; padding: 12px 14px; font-size: 15px; border: 1.5px solid #cfe0d4; border-radius: 11px; outline: none; transition: border-color .12s; font-family: inherit; }
.eg-input:focus { border-color: #227840; }
.eg-start { width: 100%; margin-top: 20px; padding: 14px; font-size: 16px; font-weight: 800; color: #fff; background: #227840; border: none; border-radius: 12px; cursor: pointer; transition: background .12s; }
.eg-start:hover { background: #1b5e33; }
.eg-start:disabled { opacity: .5; cursor: not-allowed; }
.eg-note { margin: 12px 0 0; font-size: 12px; color: #8a978d; }
[data-theme="dark"] .entrance-gate { background: linear-gradient(160deg, #16241b, #0f1a13); }
[data-theme="dark"] .eg-card { background: #1b2119; }
[data-theme="dark"] .eg-input { background: #232b21; border-color: #35452f; color: #e6efe6; }
[data-theme="dark"] .eg-sub { color: #9db3a5; }

/* Результат вступного тесту: фото + прев'ю */
.entrance-foot { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--border-color, #e0e0e0); }
.entrance-photo-prev { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.entrance-thumb { width: 74px; height: 74px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border-color, #e0e0e0); }

/* Кнопка «Не знаю / не пам'ятаю» (навчальний режим) */
.btn-dontknow { display: block; width: 100%; margin-top: 10px; padding: 12px; font-size: 14px; font-weight: 700; font-family: inherit; color: #6b7280; background: #f3f4f6; border: 1.5px dashed #cbd2da; border-radius: 12px; cursor: pointer; transition: all .12s; }
.btn-dontknow:hover { color: #a86400; background: #fdf6e9; border-color: #f0c07a; }
.btn-dontknow.hidden { display: none; }
[data-theme="dark"] .btn-dontknow { color: #9aa3af; background: #242a33; border-color: #3a424d; }
[data-theme="dark"] .btn-dontknow:hover { color: #e6cf8a; background: #2a2413; border-color: #4a3f1a; }

/* Персональний розбір вступного тесту (для учня, одразу на екрані) */
.entrance-fb { margin: 14px 0 4px; padding: 18px 20px; border-radius: 16px; background: var(--sage-tint, #f1f6f0); border: 1px solid var(--sage-dark, #cfe3d4); }
.entrance-fb-head { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; color: var(--sage-dark, #4d7d27); margin-bottom: 10px; }
.entrance-fb-head svg { width: 18px; height: 18px; }
.entrance-fb p { margin: 0 0 11px; font-size: 15px; line-height: 1.6; color: var(--text-dark, #2a332c); }
.entrance-fb p:last-child { margin-bottom: 0; }
[data-theme="dark"] .entrance-fb { background: #1c261f; border-color: #33422f; }
[data-theme="dark"] .entrance-fb p { color: #dbe4d6; }
[data-theme="dark"] .entrance-fb-head { color: #9ccb86; }

/* Статус авто-надсилання вступного результату */
.entrance-status { text-align: center; font-size: 14px; font-weight: 700; color: #1b5e33; padding: 10px; background: #eef7f0; border: 1px solid #cfe3d4; border-radius: 12px; }
.entrance-retry { margin-left: 6px; padding: 4px 10px; font-size: 13px; font-weight: 700; color: #fff; background: #227840; border: none; border-radius: 8px; cursor: pointer; }
[data-theme="dark"] .entrance-status { background: #17281d; border-color: #2c4636; color: #7fd39b; }

.eg-opt { font-weight: 600; font-size: 12px; color: #8a978d; }

/* ── Компактний екран входу на мобільному (менше скролу) + safe-area ── */
@media (max-width: 640px) {
  @supports (--zin-legacy: 1) {
.mode-select-page { padding: calc(env(safe-area-inset-top) + 8px) 14px 14px !important; align-items: flex-start !important; }
  .mascot-fox { width: 78px !important; margin: 0 auto 6px !important; }
  .mode-select-header { margin-bottom: 12px !important; }
  .mode-select-title { font-size: 20px !important; margin-bottom: 4px !important; }
  .mode-select-subtitle { font-size: 12.5px !important; }
  .tg-card { margin-bottom: 10px !important; padding: 10px 14px !important; }
  .tg-card-icon { font-size: 26px !important; }
  .quick-trainer-card { margin-bottom: 10px !important; padding: 10px 14px !important; }
  .quick-trainer-icon { font-size: 28px !important; }
  .mode-card { padding: 16px 18px !important; }
  .mode-card-icon { font-size: 32px !important; margin-bottom: 6px !important; }
  .mode-card-title { font-size: 17px !important; margin-bottom: 8px !important; }
  .mode-card-features { margin-bottom: 12px !important; }
  .mode-card-features li { font-size: 12.5px !important; padding: 5px 0 !important; }
  .mode-card-btn { padding: 12px 20px !important; font-size: 15px !important; min-height: 44px !important; }
  .mode-card-login-link { font-size: 12.5px !important; margin-top: 8px !important; }
}

}

/* ==================== ДАШБОРД ВСТУПНИХ ТЕСТІВ ==================== */
.ent-summary { }
.ent-agg { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start; }
.ent-agg-item { display: flex; flex-direction: column; }
.ent-agg-item > b { font-size: 30px; font-weight: 800; color: var(--text-dark); line-height: 1; }
.ent-agg-item > span { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.ent-agg-weak { flex: 1; min-width: 200px; }
.ent-agg-weak-lab { display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 6px; }
.ent-weak-chip { display: inline-block; font-size: 12px; background: var(--bg-light); border: 1px solid var(--border-color); border-radius: 999px; padding: 3px 10px; margin: 0 6px 6px 0; color: var(--text-dark); }
.ent-weak-chip b { color: #dc4040; }

.ent-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.ent-card { background: var(--bg-white); border: 1px solid var(--border-color); border-radius: 14px; padding: 16px; }
.ent-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.ent-name { font-size: 16px; font-weight: 700; color: var(--text-dark); }
.ent-meta { font-size: 12px; color: var(--text-muted); margin-top: 3px; }
.ent-score { text-align: right; flex-shrink: 0; line-height: 1.1; }
.ent-score b { display: block; font-size: 26px; font-weight: 800; }
.ent-score span { font-size: 12px; color: var(--text-muted); }

.ent-branches { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.ent-br { display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
.ent-br-lab { width: 118px; flex-shrink: 0; color: var(--text-dark); font-weight: 600; }
.ent-br-track { flex: 1; height: 8px; background: var(--bg-light); border-radius: 999px; overflow: hidden; }
.ent-br-track i { display: block; height: 100%; border-radius: 999px; }
.ent-br-val { width: 42px; text-align: right; color: var(--text-muted); font-weight: 700; flex-shrink: 0; }

.ent-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.ent-chip { font-size: 11.5px; font-weight: 700; border: 1.5px solid; border-radius: 999px; padding: 3px 10px; background: transparent; }

.ent-wrong { margin-top: 4px; }
.ent-wrong summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text-muted); padding: 6px 0; }
.ent-wrong-list { display: flex; flex-direction: column; gap: 5px; padding: 6px 0 2px; }
.ent-wrong-row { font-size: 13px; color: var(--text-dark); }
.ent-grade { font-size: 11px; color: var(--text-muted); }
.ent-photos { font-size: 12.5px; color: var(--text-muted); margin-top: 10px; }

/* ==================== АНАЛІЗ ПОМИЛОК: розбір по завданнях ==================== */
.et-task-list { display: flex; flex-direction: column; gap: 10px; }
.et-task { background: var(--bg-light); border: 1px solid var(--border-color); border-radius: 12px; padding: 12px 14px; }
.et-task-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.et-task-num { font-size: 14px; font-weight: 800; color: var(--text-dark); background: var(--bg-white); border: 1px solid var(--border-color); border-radius: 8px; padding: 2px 9px; }
.et-task-reason { font-size: 12px; font-weight: 700; color: var(--text-muted); }
.et-task--unknown .et-task-reason { color: #c0392b; }
.et-task--method .et-task-reason { color: #8a5e0a; }
.et-task--careless .et-task-reason { color: #2b5e9e; }
.et-task-hw { margin-left: auto; font-size: 11.5px; color: var(--text-muted); }
.et-task-q { font-size: 14.5px; line-height: 1.5; color: var(--text-dark); }
.et-task-q .katex { font-size: 1.02em; }

/* ── Самоперевірка зі спробою (прев'ю перед заняттям): поле/варіанти, вердикт, вибір «з чого почати» ── */
.prep-kind { font-size: 11px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; background: rgba(34,120,64,.1); color: #227840; }
.prep-kind--apply { background: rgba(239,135,72,.14); color: #c9601f; }
.prep-kind--mistake { background: rgba(230,57,70,.12); color: #c92a2a; }
.prep-kind--why { background: rgba(28,176,246,.12); color: #1899d6; }
.prep-try { display: flex; gap: 8px; margin: 14px 0 6px; }
.prep-input { flex: 1; min-width: 0; font: inherit; font-size: 18px; padding: 12px 14px; border: 2px solid rgba(0,0,0,.15); border-radius: 12px; background: #fff; color: inherit; }
.prep-input:focus { outline: none; border-color: #227840; }
.prep-check-btn { font: inherit; font-weight: 800; padding: 12px 18px; border: none; border-radius: 12px; background: #227840; color: #fff; cursor: pointer; }
.prep-opts { display: grid; gap: 8px; margin: 14px 0 6px; }
.prep-opt { display: flex; gap: 12px; align-items: flex-start; text-align: left; font: inherit; padding: 12px 14px; border: 2px solid rgba(0,0,0,.12); border-radius: 12px; background: #fff; color: inherit; cursor: pointer; }
.prep-opt:hover { border-color: #227840; }
.prep-opt b { flex-shrink: 0; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: rgba(34,120,64,.1); color: #227840; }
.prep-verdict { margin: 14px 0 8px; padding: 10px 14px; border-radius: 12px; font-weight: 700; }
.prep-verdict--ok { background: rgba(34,120,64,.1); color: #227840; }
.prep-verdict--bad { background: rgba(230,57,70,.1); color: #c92a2a; }
.prep-pick { display: grid; gap: 6px; margin: 12px 0; max-height: 46vh; overflow-y: auto; }
.prep-pick-item { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 2px solid rgba(0,0,0,.1); border-radius: 12px; cursor: pointer; }
.prep-pick-item:has(input:checked) { border-color: #227840; background: rgba(34,120,64,.06); }
.prep-pick-item input { margin-top: 3px; accent-color: #227840; }
.prep-pick-num { flex-shrink: 0; font-weight: 800; color: #227840; }
.prep-pick-q { flex: 1; font-size: 14px; line-height: 1.4; }
.prep-pick-tag { flex-shrink: 0; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: rgba(0,0,0,.06); color: #6b6b6b; }
.prep-pick-tag--bad { background: rgba(230,57,70,.1); color: #c92a2a; }
.prep-note { width: 100%; box-sizing: border-box; font: inherit; font-size: 14px; padding: 10px 12px; border: 2px solid rgba(0,0,0,.12); border-radius: 12px; resize: vertical; margin-bottom: 10px; background: #fff; color: inherit; }
[data-theme="dark"] .prep-input, [data-theme="dark"] .prep-opt, [data-theme="dark"] .prep-note { background: #2a2622; border-color: rgba(255,255,255,.14); }
[data-theme="dark"] .prep-kind { background: rgba(88,192,127,.15); color: #58c07f; }

/* Адмінка: тип картки й дані автоперевірки в прев'ю колоди; ширша таблиця зведення */
.th-kind { font-size: 10px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; padding: 1px 7px; border-radius: 999px; background: rgba(34,120,64,.1); color: #227840; vertical-align: middle; }
.th-kind--apply { background: rgba(239,135,72,.14); color: #c9601f; }
.th-kind--mistake { background: rgba(230,57,70,.12); color: #c92a2a; }
.th-kind--why { background: rgba(28,176,246,.12); color: #1899d6; }
.th-check { font-size: 13px; margin: 6px 0; padding: 8px 10px; border-radius: 10px; background: rgba(239,135,72,.08); }
.th-sum-table--7 .th-sum-row { grid-template-columns: 1.6fr 1fr .5fr .5fr .5fr .7fr .6fr; }

/* 🎫 Вхідний квиток — на екран/проєктор */
.ticket-overlay { position: fixed; inset: 0; z-index: 5000; background: rgba(0,0,0,.6); display: none; align-items: flex-start; justify-content: center; overflow-y: auto; padding: 20px; }
.ticket-sheet { width: 100%; max-width: 980px; background: var(--card-bg, #fff); color: var(--text-dark); border-radius: 20px; padding: 22px 26px; }
.ticket-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.ticket-title { font-size: 22px; font-weight: 800; }
.ticket-cards { display: grid; gap: 14px; }
.ticket-card { border: 2px solid #227840; border-radius: 16px; padding: 16px 20px; }
.ticket-meta { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.ticket-num { width: 30px; height: 30px; border-radius: 50%; background: #227840; color: #fff; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.ticket-why { font-size: 12px; color: var(--text-muted); }
.ticket-q { font-size: 24px; line-height: 1.35; font-weight: 600; margin-bottom: 10px; }
.ticket-opts { font-size: 18px; line-height: 1.7; margin-bottom: 10px; }
.ticket-a { margin-top: 10px; padding: 10px 14px; border-radius: 12px; background: rgba(34,120,64,.08); font-size: 18px; line-height: 1.5; }
.ticket-ex { color: var(--text-muted); font-size: 16px; margin-top: 4px; }
[data-theme="dark"] .ticket-sheet { background: #241f1c; }

/* Теорія: перемикач формату самоперевірки в Telegram */
.th-mode{display:flex;align-items:center;gap:8px;margin:12px 0 4px;font-size:13px;color:#5b5550;cursor:pointer}
.th-mode input{width:16px;height:16px;accent-color:#227840}
[data-theme="dark"] .th-mode{color:var(--ink-2,#c9c2b8)}

/* Тост (коротке повідомлення знизу, напр. «Продовжуємо з того місця…») */
.app-toast{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(12px);background:#1f2a24;color:#fff;padding:10px 16px;border-radius:12px;font-size:14px;line-height:1.35;max-width:92vw;box-shadow:0 8px 24px rgba(0,0,0,.25);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:9999}
.app-toast--on{opacity:1;transform:translateX(-50%) translateY(0)}

/* Адмінка → Класи */
.cls-members{display:grid;gap:4px;margin:6px 0 10px;font-size:13px}
.cls-member{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.cls-member > span:first-child{font-weight:700;min-width:120px}
.cls-sched .cls-slot{margin-bottom:6px;align-items:center}
.cls-sched select,.cls-sched input{min-width:0}
.cls-deliver-row{align-items:flex-end;flex-wrap:wrap;gap:8px}
.cls-emails{width:100%;box-sizing:border-box;margin:6px 0;padding:8px;border:1px solid #d8d2c8;border-radius:10px;font:inherit}

/* Кнопки в картках адмінки: нормальна зона натискання, іконка в один рядок з текстом
   (.btn-secondary сам по собі задає лише колір і рамку — без відступів кнопки були 36–58px) */
.admin-card .btn-secondary {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 14px; min-height: 38px; border-radius: 10px;
    font-size: 13px; font-weight: 700; line-height: 1.1; white-space: nowrap; cursor: pointer;
    vertical-align: middle; margin: 4px 6px 4px 0;
}
.admin-card .btn-secondary svg, .admin-card .hw-start-btn svg, .admin-card .st-btn svg { width: 16px; height: 16px; flex: none; }
.admin-card .hw-start-btn { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; vertical-align: middle; }
[data-theme="dark"] .admin-card .btn-secondary { background: #1e2a22; color: #e6efe8; border-color: #3a4a3f; }
[data-theme="dark"] .admin-card .btn-secondary:hover { border-color: #58a700; color: #9ed67a; }
.cls-deliver-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.cls-deliver-row .admin-field { flex: 0 0 120px; margin: 0; }
.cls-deliver-row .btn-secondary, .cls-deliver-row .hw-start-btn { margin: 0 0 2px; }
/* Рядок «Урок № + кнопки» в картці класу: поле вузьке, кнопки в один ряд (переносяться лише за браком місця) */
.admin-card .admin-row.cls-deliver-row { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.admin-card .cls-deliver-row .admin-field { flex: 0 0 120px; width: auto; min-width: 0; margin: 0; }
.admin-card .cls-deliver-row .admin-field input { width: 100%; box-sizing: border-box; }
.admin-card .cls-deliver-row .btn-secondary, .admin-card .cls-deliver-row .hw-start-btn { flex: none; margin: 0 0 2px; }

/* ═══ Чекліст «Що треба знати на заняття» (кабінет; під ?ui=z — вкладка «Уроки») ═══
   Карусель: один пункт на картку, гортання вбік (нативний scroll-snap — пальцем працює й без JS),
   ‹ › / стрілки / смужка / перетягування мишею — app.js _knowCarousel. Висота фіксована, довге — прокрутка в картці.
   Спершу механіка (спільна для всіх UI, без кольорів), далі вигляд legacy/ui-v2 у маркері --zin-legacy
   (під ?ui=z його вирізає <head>; вигляд там дає ds: .z-carousel у ds/components.css + ds/shell.css). */
.know-carousel{--know-h:236px;position:relative;margin-top:12px}
.know-list{position:relative;display:flex;gap:10px;margin:0;padding:2px 0 6px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.know-list::-webkit-scrollbar{display:none}
.know-list.is-drag{scroll-snap-type:none;cursor:grabbing;-webkit-user-select:none;user-select:none}
.know-slide{flex:0 0 calc(100% - 22px);min-width:0;height:var(--know-h);display:flex;box-sizing:border-box;scroll-snap-align:start;scroll-snap-stop:always}
.know-item,.know-sum{flex:1;min-width:0;display:flex;flex-direction:column;box-sizing:border-box}
.know-body{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow-x:hidden;overflow-y:auto}
.know-text{margin:0 0 auto;min-width:0;overflow-wrap:anywhere}
.know-body.is-more{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 28px),transparent)}
.know-mark,.know-done-row{flex:none}
.know-mark{display:flex;align-items:center;gap:10px;box-sizing:border-box;min-height:44px;cursor:pointer}
.know-hint[hidden]{display:none}
.know-img{display:block;max-width:100%;max-height:150px;object-fit:contain;margin:8px 0 2px}
.know-nav{display:flex;align-items:center;gap:10px;margin-top:6px}
.know-arrow{flex:none;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:44px;height:44px;padding:0;font:inherit;cursor:pointer}
.know-arrow svg{width:20px;height:20px}
.know-arrow[aria-disabled="true"]{cursor:default}
.know-pager{flex:1;min-width:0;display:flex;align-items:center;gap:10px}
.know-dots{flex:1;min-width:0;display:flex;align-items:center;gap:3px;height:24px;cursor:pointer}
.know-seg{flex:1 1 0;min-width:3px;height:6px;border-radius:99px}
.know-count{flex:none;min-width:3.5em;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.know-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.know-jumps{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.know-jump{min-width:36px;min-height:36px;padding:0 10px;font:inherit;cursor:pointer}
@media (min-width:720px){
.know-carousel{--know-h:248px}
/* пункт із рисунком на широкому екрані: текст ліворуч, рисунок праворуч (картка не мусить бути високою) */
.know-item.has-img .know-text{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,42%);column-gap:16px;align-items:center}
.know-item.has-img .know-text>*{grid-column:1}
.know-item.has-img .know-hint-btn{justify-self:start}
.know-item.has-img .know-img{grid-column:2;grid-row:1/span 3;margin:0;justify-self:end;max-height:170px}
}
@supports (--zin-legacy: 1) {
.know-card{background:#fff;border:1px solid #dfe6df;border-radius:14px;padding:16px 18px;margin-bottom:14px}
.know-title{font-weight:800;font-size:16px}
.know-sub{font-size:13px;color:#66716a;margin-top:2px}
.know-progress{font-size:13px;color:#227840;font-weight:700;margin-top:6px}
.know-carousel:focus-visible,.know-body:focus-visible{outline:3px solid #227840;outline-offset:3px;border-radius:12px}
.know-item,.know-sum{padding:14px 16px 12px;border:1px solid #dfe6df;border-radius:12px;background:#fbfcfb;transition:background .15s,border-color .15s}
.know-item.on{background:#eef7f0;border-color:#bfe0c8}
.know-sum{background:#f6f8f6}
.know-t{font-size:16px;font-weight:700;line-height:1.45}
.know-item.on .know-t{color:#3a5a45}
.know-hint-btn{display:inline-flex;align-items:center;gap:4px;min-height:32px;margin-top:10px;padding:0 12px;border:1px solid #dfe6df;border-radius:999px;background:#fff;color:#3a5a45;font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.know-hint-btn[aria-expanded="true"]{background:#eef7f0;border-color:#bfe0c8}
.know-hint{display:block;font-size:14px;color:#5b6660;background:#f6f8f6;border-radius:8px;padding:8px 10px;margin-top:8px}
.know-img{border-radius:8px;background:#fff}
.know-mark{margin-top:10px;padding:0 12px;border:1px solid #dfe6df;border-radius:10px;background:#fff;color:#2a2622;font-size:15px;font-weight:800}
.know-item.on .know-mark{border-color:#227840;color:#227840}
.know-tick{width:20px;height:20px;margin:0;accent-color:#227840;flex:none}
.know-sum-title{font-size:16px;font-weight:800}
.know-sum-text{margin-top:4px;font-size:14px;line-height:1.5;color:#3d4a42}
.know-jump{border:1px solid #dfe6df;border-radius:999px;background:#fff;color:#227840;font-size:13px;font-weight:800}
.know-done-row{display:flex;flex-direction:column;align-items:stretch;gap:6px;margin-top:10px}
.know-done-btn{min-height:44px;padding:0 14px;border:2px solid var(--green-ink,#227840);border-radius:10px;background:var(--success-light,#e6f4ea);color:var(--green-ink,#227840);font:inherit;font-size:14px;font-weight:800;cursor:pointer}
.know-done-btn:hover{background:#d8ecdd}
.know-done-btn:disabled{opacity:.65;cursor:default}
.know-done-note{font-size:13px;line-height:1.35;color:#66716a}
.know-arrow{border:1px solid #dfe6df;border-radius:999px;background:#fff;color:#2a2622}
.know-arrow:hover:not([aria-disabled="true"]){border-color:#227840;color:#227840}
.know-arrow[aria-disabled="true"]{opacity:.4}
.know-arrow:focus-visible,.know-hint-btn:focus-visible,.know-jump:focus-visible,.know-done-btn:focus-visible{outline:3px solid #227840;outline-offset:2px}
.know-seg{background:#e3e9e3}
.know-seg.is-done{background:#9ccaa9}
/* поточна картка — обведення (не заливка: заливка = «відмічено», інакше мала колода виглядає наполовину пройденою) */
.know-seg.is-current{height:10px;background:#fff;box-shadow:inset 0 0 0 2px #227840}
.know-seg.is-current.is-done{background:#9ccaa9}
.know-count{font-size:13px;font-weight:800;color:#66716a}
[data-theme="dark"] .know-card{background:#1b221d;border-color:#2f3a33}
[data-theme="dark"] .know-sub,[data-theme="dark"] .know-count{color:#9aa59e}
[data-theme="dark"] .know-progress{color:#8fd6a6}
[data-theme="dark"] .know-item,[data-theme="dark"] .know-sum{background:#202823;border-color:#2f3a33}
[data-theme="dark"] .know-item.on{background:#1f3627;border-color:#2f6a3d}
[data-theme="dark"] .know-item.on .know-t{color:#cfe6d5}
[data-theme="dark"] .know-hint-btn,[data-theme="dark"] .know-mark,[data-theme="dark"] .know-arrow,[data-theme="dark"] .know-jump{background:#1b221d;border-color:#3a4a3f;color:#e6efe8}
[data-theme="dark"] .know-hint-btn[aria-expanded="true"]{background:#1f3627;border-color:#2f6a3d}
[data-theme="dark"] .know-item.on .know-mark,[data-theme="dark"] .know-jump{border-color:#8fd6a6;color:#8fd6a6}
[data-theme="dark"] .know-arrow:hover:not([aria-disabled="true"]){border-color:#8fd6a6;color:#8fd6a6}
[data-theme="dark"] .know-tick{accent-color:#8fd6a6}
[data-theme="dark"] .know-hint{background:#242c27;color:#b8c3bb}
[data-theme="dark"] .know-sum-text{color:#cfd8d1}
[data-theme="dark"] .know-done-btn{background:var(--success-light,#24302a);border-color:var(--green-ink,#8fd6a6);color:var(--green-ink,#8fd6a6)}
[data-theme="dark"] .know-done-btn:hover{background:#2c3d31}
[data-theme="dark"] .know-seg{background:#2f3a33}
[data-theme="dark"] .know-seg.is-done{background:#3f7a50}
[data-theme="dark"] .know-seg.is-current{background:#1b221d;box-shadow:inset 0 0 0 2px #8fd6a6}
[data-theme="dark"] .know-seg.is-current.is-done{background:#3f7a50}
[data-theme="dark"] .know-done-note{color:#9aa59e}
[data-theme="dark"] .know-carousel:focus-visible,[data-theme="dark"] .know-body:focus-visible,[data-theme="dark"] .know-arrow:focus-visible,[data-theme="dark"] .know-hint-btn:focus-visible,[data-theme="dark"] .know-jump:focus-visible,[data-theme="dark"] .know-done-btn:focus-visible{outline-color:#8fd6a6}
@media (prefers-reduced-motion: reduce){.know-item,.know-sum{transition:none}}
}
/* Адмінка: чекліст у превʼю і зведенні */
.th-items{display:grid;gap:6px}
.th-item{display:flex;gap:8px;font-size:14px;align-items:flex-start}
.th-item-hint{color:#66716a;font-size:13px;margin-top:2px}
.th-know-wrap{overflow-x:auto;margin:6px 0 10px}
.th-know{border-collapse:collapse;font-size:13px;min-width:320px}
.th-know th,.th-know td{padding:4px 8px;text-align:center;border-bottom:1px solid #e6ebe6}
.th-know th:first-child,.th-know td:first-child{text-align:left;white-space:nowrap}
.th-know td.on{color:#227840;font-weight:800}
.th-know td.off{color:#b8c0b9}
[data-theme="dark"] .th-know th,[data-theme="dark"] .th-know td{border-color:#2f3a33}
[data-theme="dark"] .th-item-hint{color:#9aa59e}

/* ==================== СМУЖКА ПРОГРЕСУ ТЕСТУ ====================
   Заповнюється з кожною відповіддю. У навчальному режимі спалахує на правильну/хибну,
   на віхах (50% і 100% правильних) — світиться разом із конфеті. */
/* Лічильник серії правильних — спливає по центру над завданням і згасає */
.cb {
    position: fixed; left: 50%; top: 22%; transform: translate(-50%, 6px) scale(.8);
    z-index: 9998; pointer-events: none; opacity: 0;
    padding: 9px 16px; border-radius: 999px;
    background: linear-gradient(135deg, var(--orange, #ef8748), #ffb067);
    color: #fff; font-weight: 800; font-size: 15px; letter-spacing: .2px;
    box-shadow: 0 6px 20px rgba(239, 135, 72, .45);
    transition: opacity .18s ease-out, transform .28s cubic-bezier(.34, 1.6, .5, 1);
}
.cb--on { opacity: 1; transform: translate(-50%, -6px) scale(1); }
@media (prefers-reduced-motion: reduce) { .cb { transition: opacity .15s linear; } .cb--on { transform: translate(-50%, 0) scale(1); } }

/* Бічні варіанти — фіксовані над контентом, тож звільняємо їм смугу справа */
.has-qp-side #testScreen .main-layout { padding-right: 34px; }
@media (min-width: 900px) { .has-qp-side #testScreen .main-layout { padding-right: 0; } }

/* ── Варіант «колба»: вузька вертикальна ємність біля правого краю, наповнюється знизу ── */
.qp-tube {
    position: fixed; right: max(7px, env(safe-area-inset-right)); top: 50%; transform: translateY(-50%);
    width: 16px; height: 42vh; min-height: 160px; z-index: 40; pointer-events: none;
    background: var(--border-light, #eee); border: 1.5px solid var(--border-color, #e0e0e0);
    border-radius: 999px; overflow: visible;
}
.qp-tube-fill {
    position: absolute; left: 0; right: 0; bottom: 0; height: 0; border-radius: 999px;
    background: linear-gradient(180deg, var(--orange, #ef8748), var(--sage, #7c9d85));
    transition: height .45s cubic-bezier(.34, 1.4, .5, 1);
    animation: qpBreathe 2.6s ease-in-out infinite;
}
.qp-wave {                                   /* поверхня «рідини» — легке коливання */
    position: absolute; left: -3px; right: -3px; top: -5px; height: 10px; border-radius: 50%;
    background: var(--orange, #ef8748); opacity: .9;
    animation: qpBob 1.8s ease-in-out infinite;
}
.qp-tube-pct {
    position: absolute; left: 50%; bottom: -22px; transform: translateX(-50%);
    font-size: 11px; font-weight: 700; color: var(--text-muted, #6f6860); white-space: nowrap;
}
.qp-tube.qp--ok .qp-tube-fill { box-shadow: 0 0 16px rgba(46, 160, 87, .85); }
.qp-tube.qp-line.qp--bad { animation: qpShake .45s ease-out; }
.qp-tube.qp--milestone { box-shadow: 0 0 26px rgba(239, 135, 72, .9); }

/* ── Варіант «графік»: лінія повзе знизу вгору й хилиться праворуч за кожну правильну ── */
.qp-chart {
    position: fixed; right: max(5px, env(safe-area-inset-right)); top: 50%; transform: translateY(-50%);
    width: 34px; height: 44vh; min-height: 180px; z-index: 40; pointer-events: none;
    background: var(--bg-white, #fff); border: 1.5px solid var(--border-color, #e0e0e0);
    border-radius: 12px; padding: 6px 2px; box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
}
.qp-chart svg { width: 100%; height: 100%; overflow: visible; }
.qp-chart .qp-area { fill: var(--sage, #7c9d85); opacity: .22; }
.qp-chart .qp-line { fill: none; stroke: var(--sage-dark, #5f8069); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.qp-chart .qp-head { fill: var(--orange, #ef8748); stroke: #fff; stroke-width: 1.5; animation: qpBreathe 2s ease-in-out infinite; }
.qp-chart-pct {
    position: absolute; left: 50%; bottom: -20px; transform: translateX(-50%);
    font-size: 11px; font-weight: 700; color: var(--text-muted, #6f6860); white-space: nowrap;
}
.qp-chart.qp--ok .qp-line { stroke: #2ea057; filter: drop-shadow(0 0 6px rgba(46, 160, 87, .9)); }
.qp-chart.qp--ok .qp-head { animation: qpPing .6s ease-out; }
.qp-chart.qp-line.qp--bad { animation: qpShake .45s ease-out; }
.qp-chart.qp--milestone .qp-line { stroke: var(--orange, #ef8748); filter: drop-shadow(0 0 10px rgba(239, 135, 72, .95)); }
@keyframes qpBreathe { 0%, 100% { opacity: 1; } 50% { opacity: .78; } }
@keyframes qpBob { 0%, 100% { transform: translateY(0) scaleX(1); } 50% { transform: translateY(-2px) scaleX(1.12); } }
@keyframes qpPing { 0% { r: 4; } 45% { r: 9; } 100% { r: 4; } }
[data-theme="dark"] .qp-tube { background: var(--border, #3b3733); border-color: var(--border, #3b3733); }
[data-theme="dark"] .qp-chart { background: var(--surface, #262320); border-color: var(--border, #3b3733); box-shadow: 0 2px 10px rgba(0, 0, 0, .4); }

/* ── Комірковий бар (типовий вигляд, за ескізом): ⚡ + комірка на кожне завдання + 🏁→🏆 + лічильник ── */
.qp-segbar { display: flex; align-items: center; gap: 8px; margin: 8px 12px 2px; }
.qps-track { display: flex; gap: 3px; flex: 1 1 auto; min-width: 0; }
.qps-seg { position: relative; flex: 1 1 0; height: 14px; border-radius: 999px; background: var(--border-light, #e6e0d8); transition: background .25s; }
.qps-seg.on { background: #2e8f57; }
.qp--exam .qps-seg.on { background: var(--sage-dark, #5f8069); }   /* екзамен: нейтральний колір, без підказки правильності */
.qps-seg.off { background: #dca89f; }
.qps-seg.now { background: var(--orange, #ef8748); box-shadow: 0 0 10px rgba(239, 135, 72, .55); animation: qpsPop .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes qpsPop { 0% { transform: scale(.5); } 60% { transform: scale(1.3); } 100% { transform: scale(1); } }
.qp-segbar.qp--bad .qps-track { animation: qpShake .45s ease-out; }
.qps-cap { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.qps-cap svg { width: 16px; height: 16px; }
.qps-cap--a { background: var(--orange, #ef8748); color: #fff; box-shadow: 0 0 0 5px rgba(239, 135, 72, .14); }
.qps-cap--b { border: 2px solid #2e8f57; color: #2e8f57; }
.qps-cap--b.done { background: var(--orange, #ef8748); border-color: var(--orange, #ef8748); color: #fff; animation: qpsPop .5s cubic-bezier(.3, 1.6, .5, 1); }
.qps-count { font-size: 12px; font-weight: 800; color: var(--text-muted, #6f6860); font-variant-numeric: tabular-nums; flex: none; }
.qps-bub {
    position: absolute; left: 50%; bottom: calc(100% + 9px); z-index: 5;
    transform: translateX(-50%) translateY(6px) scale(.7); opacity: 0;
    background: var(--orange, #ef8748); color: #fff; font-weight: 900; font-size: 12px;
    padding: 3px 9px; border-radius: 999px; white-space: nowrap; pointer-events: none;
    transition: opacity .18s, transform .3s cubic-bezier(.3, 1.6, .5, 1);
}
.qps-bub::after { content: ""; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--orange, #ef8748); }
.qps-bub.show { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
.qps-bub i { position: absolute; width: 3px; height: 9px; border-radius: 2px; background: var(--orange, #ef8748); opacity: 0; }
.qps-bub.show i { animation: qpsSpark .6s ease-out; }
.qps-bub i:nth-child(1) { left: -11px; top: 1px; transform: rotate(-24deg); }
.qps-bub i:nth-child(2) { right: -11px; top: -2px; transform: rotate(22deg); animation-delay: .06s; }
@keyframes qpsSpark { 0% { opacity: 0; transform: scale(.4); } 45% { opacity: 1; } 100% { opacity: 0; transform: scale(1.5); } }
.qp-segbar.qp--milestone .qps-track { filter: drop-shadow(0 0 9px rgba(239, 135, 72, .85)); }
.qp-segbar.qp--milestone .qps-cap--a { animation: qpsPop .6s cubic-bezier(.3, 1.6, .5, 1); }
[data-theme="dark"] .qps-seg { background: var(--border, #3b3733); }
[data-theme="dark"] .qps-seg.on { background: #58c07f; }
[data-theme="dark"] .qp--exam .qps-seg.on { background: var(--sage-dark, #86c090); }
[data-theme="dark"] .qps-seg.off { background: #6d403a; }
[data-theme="dark"] .qps-cap--a { color: #1c1a18; }
[data-theme="dark"] .qps-cap--b { border-color: #58c07f; color: #58c07f; }
[data-theme="dark"] .qps-cap--b.done { color: #1c1a18; }
@media (prefers-reduced-motion: reduce) { .qps-seg.now, .qps-cap--b.done, .qps-bub.show i, .qp-segbar.qp--bad .qps-track { animation: none; } }

/* Тло самого документа = тема: у WebView (Telegram/додаток) незамальовані ділянки інакше стають чорними */
html { background: var(--bg-white, #fff); }

/* ── Мобільний екран тесту = app-розкладка: сторінка НЕ скролиться, гортається лише зона завдання.
   Прибирає і «чорну зону» знизу (розбіжність 100vh із реальним вьюпортом WebView), і перекриття варіантів. ── */
@media (max-width: 899px) {
    body.test-open { overflow: hidden; }
    #testScreen.active { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }
    @supports (--zin-legacy: 1) {
    /* ui-v2 / старий вигляд: гортається ВЕСЬ екран тесту (а не лише зона завдання) — панель з інструкцією й таймером
       іде вгору, а згори виїжджає компактна смужка з таймером (examkit.js), як у режимі «Іспит».
       Сторінка (body) як і раніше не гортається — «чорної зони» WebView немає. Зін має свою розкладку (ds/screens.css). */
    #testScreen.active { overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
    #testScreen.active > * { flex-shrink: 0; }   /* вкладки / крихти більше не сплющуються до 21 px */
    #testScreen .main-layout {
        flex: 1 0 auto; min-height: 0; background: var(--bg-white, #fff);
        padding-bottom: calc(104px + env(safe-area-inset-bottom));
    }
    }
}

.qp-line {
    position: relative; height: 6px; margin: 8px 16px 0;
    background: var(--border-light, #eee); border-radius: 999px; overflow: hidden;
}
.qp-fill {
    height: 100%; width: 0; border-radius: 999px;
    background: linear-gradient(90deg, var(--sage, #7c9d85), var(--sage-dark, #5f8069));
    transition: width .4s cubic-bezier(.34, 1.4, .5, 1), background .25s, box-shadow .25s;
}
/* блік, що пробігає смужкою на правильну відповідь */
.qp-sweep {
    position: absolute; inset: 0; border-radius: 999px; opacity: 0; pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .95), transparent);
    transform: translateX(-100%);
}
.qp-line.qp--ok .qp-fill { background: linear-gradient(90deg, #2ea057, #58c07f); box-shadow: 0 0 14px rgba(46, 160, 87, .75); }
.qp-line.qp--ok .qp-sweep { animation: qpSweep .65s ease-out; }
.qp-line.qp--ok { animation: qpPop .5s ease-out; }
.qp-line.qp--bad .qp-fill { background: linear-gradient(90deg, #c0392b, #e07a6f); box-shadow: 0 0 10px rgba(192, 57, 43, .5); }
.qp-line.qp--bad { animation: qpShake .45s ease-out; }
.qp-line.qp--milestone { height: 9px; box-shadow: 0 0 22px rgba(239, 135, 72, .85); }
.qp-line.qp--milestone .qp-fill { background: linear-gradient(90deg, var(--orange, #ef8748), #ffd166, var(--orange, #ef8748)); background-size: 200% 100%; animation: qpShine 1.2s linear; }
@keyframes qpSweep { from { opacity: .9; transform: translateX(-100%); } to { opacity: 0; transform: translateX(100%); } }
@keyframes qpPop { 0% { transform: scaleY(1); } 40% { transform: scaleY(2.1); } 100% { transform: scaleY(1); } }
@keyframes qpShake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@keyframes qpShine { from { background-position: 0 0; } to { background-position: 200% 0; } }
[data-theme="dark"] .qp-line { background: var(--border, #3b3733); }
@media (prefers-reduced-motion: reduce) {
    .qp--ok, .qp--bad, .qp--ok .qp-sweep, .qp-line.qp--milestone .qp-fill,
    .qp-tube-fill, .qp-wave, .qp-chart .qp-head { animation: none; }
    .qp-fill { transition: width .2s linear; }
}

/* Рисунок до пункту чекліста «Що треба знати» (геометрія) у превʼю адмінки; у кабінеті — .know-img вище */
.th-item-img { display: block; max-width: 100%; max-height: 140px; border-radius: 6px; margin-top: 4px; background: #fff; }

/* Класи замість інлайн-стилів (щоб темна тема могла їх перевизначити) */
.admin-field--nmt { border: 1.5px solid #cfe0d4; border-radius: 10px; padding: 10px; background: #f6fbf7; }
.hw-badge--login { background: #e0f0ff; color: #1899d6; }
.mt-ungraded-note { background: #fef3c7; border: 1px solid #f59e0b; padding: 8px 12px; border-radius: 6px; margin-bottom: 12px; color: #92400e; font-size: 14px; }

/* ==================== ТЕМНА ТЕМА: єдині токени замість захардкоджених кольорів ====================
   Принцип (як на mindfly.com.ua): жоден компонент не тримає «свій» світлий фон/темний текст —
   усе через токени (--surface/--ink/--success-light/--red-ink…), які перевизначає .ui-v2[data-theme="dark"].
   Нижче — компоненти, які досі мали захардкоджені кольори і в темній темі давали світлі плашки зі світлим текстом. */
[data-theme="dark"] .modal-content { background: var(--surface, #262320); color: var(--ink, #f5f0ec); box-shadow: 0 10px 40px rgba(0,0,0,.6); }
[data-theme="dark"] .modal-title { color: var(--ink, #f5f0ec); }
[data-theme="dark"] .modal-text { color: var(--ink-2, #cfc7bc); }
[data-theme="dark"] .modal-text strong { color: var(--red-ink, #f0a9a2); }
[data-theme="dark"] .modal-btn-cancel { background: var(--surface-2, #2f2b27); color: var(--ink-2, #cfc7bc); }
[data-theme="dark"] .modal-btn-cancel:hover { background: var(--border, #3b3733); }
[data-theme="dark"] .review-summary { background: var(--surface-2, #2f2b27); border-color: var(--border, #3b3733); }
[data-theme="dark"] .review-summary-label { color: var(--muted, #9c948a); }
[data-theme="dark"] .review-summary-value { color: var(--ink, #f5f0ec); }
[data-theme="dark"] .review-summary-value.is-correct { color: var(--green-ink, #8fd6a6); }
[data-theme="dark"] .review-summary-value.is-wrong { color: var(--red-ink, #f0a9a2); }
[data-theme="dark"] .review-summary-value.is-empty { color: var(--muted-2, #7f7870); }
[data-theme="dark"] .review-row--empty { background: var(--orange-tint, #38251a); }
[data-theme="dark"] .matching-hint,
[data-theme="dark"] .btn-share-test,
[data-theme="dark"] .untimed-toggle { background: var(--info-light, #1f2a33); border-color: var(--border, #3b3733); color: var(--ink-2, #cfc7bc); }
[data-theme="dark"] .btn-share-test:hover { background: var(--surface-2, #2f2b27); border-color: var(--sage, #a8d8b0); }
[data-theme="dark"] .training-toggle { background: var(--orange-tint, #38251a); border-color: var(--orange-border, #4a3423); }
[data-theme="dark"] .hw-del-btn { background: var(--danger-light, #3a2626); color: var(--red-ink, #f0a9a2); }
[data-theme="dark"] .hw-del-btn:hover { background: #4a2e2e; }
[data-theme="dark"] .hw-badge--done { background: var(--success-light, #24302a); color: var(--green-ink, #8fd6a6); }
[data-theme="dark"] .hw-badge--todo { background: var(--danger-light, #3a2626); color: var(--red-ink, #f0a9a2); }
[data-theme="dark"] .hw-badge--login { background: var(--info-light, #1f2a33); color: var(--info, #7db8e8); }
[data-theme="dark"] .hw-due { background: var(--orange-tint, #38251a); color: var(--amber-ink, #e0b666); }
[data-theme="dark"] .admin-types-title code { background: var(--surface-2, #2f2b27); color: var(--ink-2, #cfc7bc); }
[data-theme="dark"] .admin-field--nmt { border-color: #365a3e; background: var(--success-light, #24302a); }
[data-theme="dark"] .mt-ungraded-note { background: var(--orange-tint, #38251a); border-color: var(--orange-border, #4a3423); color: var(--amber-ink, #e0b666); }
[data-theme="dark"] .prep-choice--know { background: var(--success-light, #24302a); border-color: #365a3e; color: var(--green-ink, #8fd6a6); }
[data-theme="dark"] .prep-choice--know:hover { background: #2c3d31; }
[data-theme="dark"] .prep-choice--refreshed { background: var(--orange-tint, #38251a); border-color: var(--orange-border, #4a3423); color: var(--amber-ink, #e0b666); }
[data-theme="dark"] .prep-choice--refreshed:hover { background: #40301f; }
[data-theme="dark"] .prep-choice--forgot { background: var(--danger-light, #3a2626); border-color: #5a3535; color: var(--red-ink, #f0a9a2); }
[data-theme="dark"] .prep-choice--forgot:hover { background: #46302d; }
[data-theme="dark"] .th-ready--ok { background: var(--success-light, #24302a); color: var(--green-ink, #8fd6a6); }
[data-theme="dark"] .th-ready--mid { background: var(--orange-tint, #38251a); color: var(--amber-ink, #e0b666); }
[data-theme="dark"] .th-ready--low { background: var(--danger-light, #3a2626); color: var(--red-ink, #f0a9a2); }
[data-theme="dark"] .th-know td.on { color: var(--green-ink, #8fd6a6); }
[data-theme="dark"] .th-know td.off { color: var(--muted-2, #7f7870); }
[data-theme="dark"] .st-btn--danger { color: var(--red-ink, #f0a9a2); border-color: #5a3535; }
[data-theme="dark"] .st-btn--danger:hover { background: var(--danger-light, #3a2626); }
[data-theme="dark"] .tf--ok { background: var(--success-light, #24302a); border-color: #365a3e; }
[data-theme="dark"] .tf--bad { background: var(--danger-light, #3a2626); border-color: #5a3535; }
[data-theme="dark"] .tf--ok .tf-title { color: var(--green-ink, #8fd6a6); }
[data-theme="dark"] .tf--bad .tf-title { color: var(--red-ink, #f0a9a2); }
[data-theme="dark"] .eg-title { color: var(--green-ink, #8fd6a6); }
[data-theme="dark"] .eg-label { color: var(--sage-ink, #cfe9d3); }
[data-theme="dark"] .eg-note { color: var(--muted, #9c948a); }
[data-theme="dark"] .app-toast { background: var(--surface-2, #2f2b27); color: var(--ink, #f5f0ec); border: 1px solid var(--border, #3b3733); }

/* Адмінка → «Розсилка»: дні тижня, рядки учнів із галочками */
.dsp-days{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0 4px}
.dsp-day{border:1px solid var(--border-color);background:var(--bg-white);color:var(--text-dark);border-radius:20px;padding:6px 13px;font:inherit;font-weight:700;font-size:13px;cursor:pointer}
.dsp-day .n{opacity:.65;font-weight:600;margin-left:5px}
.dsp-day.today:not(.active){border-color:#227840;color:var(--green-ink)}
.dsp-day.active{background:#227840;border-color:#227840;color:#fff}
.dsp-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:10px 0;font-size:13px}
.dsp-opt{display:inline-flex;gap:6px;align-items:center;margin-left:auto;color:var(--text-muted);cursor:pointer}
.dsp-list{display:grid;gap:6px}
.dsp-row{display:grid;grid-template-columns:22px 50px minmax(130px,1.1fr) minmax(180px,2.2fr) auto;gap:10px;align-items:center;padding:9px 12px;border:1px solid var(--border-light);border-radius:10px;background:var(--bg-white);cursor:pointer}
.dsp-row:hover{border-color:var(--border-color)}
.dsp-row.off{opacity:.6;cursor:default}
.dsp-row input[type=checkbox]{width:18px;height:18px;accent-color:#227840}
.dsp-time{font-variant-numeric:tabular-nums;font-weight:700}
.dsp-name{font-weight:700}
.dsp-what{font-size:13px;color:var(--text-muted)}
.dsp-what b{color:var(--text-dark)}
.dsp-side{display:flex;gap:8px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.dsp-mode{font:inherit;font-size:12px;padding:4px 6px;border:1px solid var(--border-color);border-radius:8px;background:var(--bg-white);color:var(--text-dark)}
.dsp-status{font-size:12px;font-weight:700}
@media (max-width:760px){.dsp-row{grid-template-columns:22px 48px 1fr}.dsp-what,.dsp-side{grid-column:2 / -1;justify-content:flex-start}.dsp-opt{margin-left:0}}
.dsp-modes{display:inline-flex;border:1px solid var(--border-color);border-radius:10px;overflow:hidden;margin:4px 0 10px}
.dsp-modebtn{border:0;background:var(--bg-white);color:var(--text-dark);padding:8px 14px;font:inherit;font-weight:700;font-size:13px;cursor:pointer}
.dsp-modebtn + .dsp-modebtn{border-left:1px solid var(--border-color)}
.dsp-modebtn.active{background:#227840;color:#fff}
.thd-list{display:grid;gap:4px;margin-top:8px}
.thd-row{display:grid;grid-template-columns:54px minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:7px 10px;border:1px solid var(--border-light);border-radius:10px;font-size:13px}
.thd-row b{font-variant-numeric:tabular-nums}
@media (max-width:760px){.dsp-modes{display:flex}.dsp-modebtn{flex:1}.thd-row{grid-template-columns:48px 1fr}.thd-row > :nth-child(n+3){grid-column:2}}

/* Адмінка → «Іспити»: список і живий монітор «учень × завдання» */
.exl-row{display:flex;gap:12px;justify-content:space-between;align-items:center;flex-wrap:wrap;padding:10px 0;border-bottom:1px solid var(--border-light)}
.exl-row:last-child{border-bottom:0}.exl-main{min-width:240px;flex:1;line-height:1.7}.exl-act{display:flex;gap:6px;flex-wrap:wrap}
.exl-checks{display:flex;gap:6px 18px;flex-wrap:wrap;margin:8px 0 12px;font-size:13px}.exl-checks label{display:inline-flex;gap:6px;align-items:center;cursor:pointer}
.exm-stats{display:flex;gap:6px 18px;flex-wrap:wrap;font-size:14px;margin:4px 0 10px}.exm-tools{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.exm-wrap{overflow-x:auto}.exm-table{border-collapse:collapse;font-size:13px;width:100%}
.exm-table th,.exm-table td{padding:5px 6px;border-bottom:1px solid var(--border-light);text-align:center;white-space:nowrap}
.exm-table th{font-weight:700;color:var(--text-muted);position:sticky;top:0;background:var(--bg-white)}
.exm-table .exm-name{text-align:left;font-weight:700;position:sticky;left:0;background:var(--bg-white);min-width:150px;max-width:220px;overflow:hidden;text-overflow:ellipsis}
.exm-c{width:24px;min-width:24px;font-size:11px;font-weight:700;border-left:1px solid var(--border-light)}
.exm-sep{border-left:2px solid var(--border-color)!important}
.exm-c-c{background:#bfe5c6;color:#14532d}.exm-c-p{background:#fde9a8;color:#7a5200}.exm-c-w{background:#f6bcbc;color:#7f1d1d}.exm-c-e{background:transparent}
.exm-done .exm-name{color:var(--green-ink)}.exm-overdue .exm-name{color:var(--red-ink)}.exm-strike{color:var(--amber-ink);font-weight:700}
.exm-foot td{font-size:11px;color:var(--text-muted);border-bottom:0}.exm-op{font:inherit;font-size:12px;border:1px solid var(--border-color);border-radius:8px;background:var(--bg-white);color:var(--text-dark);padding:2px 4px}
/* Монітор іспиту: 22 стовпці завдань не влазять у 900px — розтягуємо сторінку лише коли відкрито монітор */
#adminScreen .cabinet-page:has(#exmBody){max-width:1480px}

/* ── Адмінка, огляд дизайну 20.09: поля форм, іспити, монітор, розсилка ── */
/* Поля: той самий вигляд для input і select, шрифт застосунку замість системного */
.admin-field input, .admin-field select, .admin-field textarea { font-family: inherit; color: var(--text-dark); background: var(--bg-white); }
.admin-field select { display: block; width: 100%; margin-top: 5px; padding: 10px 36px 10px 12px; border: 1px solid #d1d5db; font-size: 15px; box-sizing: border-box; min-height: 45px;
    appearance: none; -webkit-appearance: none; cursor: pointer; text-overflow: ellipsis;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238a8f87' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center; }
.admin-row .admin-field.exf-src { flex: 2 1 280px; min-width: 0; }
.admin-row .admin-field.exf-time { flex: 0 0 110px; }
.admin-field code { font-size: 12px; padding: 1px 5px; border-radius: 6px; background: var(--bg-light); color: var(--text-dark); word-break: break-all; }
/* Заголовок картки з дією праворуч (замість float) і кнопка-іконка */
.admin-h3--bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; flex: none; cursor: pointer;
    border: 1px solid var(--border-color); border-radius: 10px; background: var(--bg-white); color: var(--text-muted); transition: color .15s, border-color .15s; }
.icon-btn:hover { color: var(--primary); border-color: var(--primary); }
.icon-btn svg { width: 17px; height: 17px; }
.sum-title { display: inline-flex; align-items: center; gap: 8px; }
.sum-title svg { width: 18px; height: 18px; color: var(--primary); }
.admin-summary::after { font-size: 16px; }
/* Значки та кнопки-посилання */
.hw-badge--mute { background: var(--bg-light); color: var(--text-muted); border: 1px solid var(--border-light); }
a.st-btn { text-decoration: none; display: inline-flex; align-items: center; }
/* Іспити: «кого чекаємо» картками, перемикачі налаштувань рівною сіткою */
.exl-who { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; margin: 8px 0 14px; }
.exl-pick { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--border-color); border-radius: 12px; cursor: pointer; background: var(--bg-white); transition: border-color .15s, background .15s; }
.exl-pick:hover { border-color: var(--primary); }
.exl-pick:has(input:checked) { border-color: var(--primary); background: var(--green-tint-bg, #f0f6f1); }
.exl-pick input { margin: 3px 0 0; width: 16px; height: 16px; flex: none; accent-color: var(--primary); }
.exl-pick-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13px; line-height: 1.35; color: var(--text-dark); }
.exl-pick-t b { font-weight: 700; }
.exl-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px 18px; color: var(--text-dark); }
.exl-checks input { width: 16px; height: 16px; flex: none; accent-color: var(--primary); }
.exl-main .hw-badge { margin-right: 4px; }
.exl-cnt { white-space: nowrap; margin-left: 4px; }
/* Монітор: чипи стану замість емодзі, клітинки діляться шириною порівну, меню дій компактне */
.exm-stats { gap: 6px 8px; align-items: center; }
.exm-stat { display: inline-flex; align-items: baseline; gap: 5px; padding: 4px 10px; border-radius: 20px; font-size: 13px; background: var(--bg-light); color: var(--text-muted); border: 1px solid var(--border-light); }
.exm-stat b { color: var(--text-dark); font-variant-numeric: tabular-nums; }
.exm-stat--act::before, .exm-stat--done::before, .exm-stat--late::before { content: ""; width: 8px; height: 8px; border-radius: 50%; align-self: center; }
.exm-stat--act::before { background: #d9a019; } .exm-stat--done::before { background: #2f9a55; } .exm-stat--late::before { background: #d04b4b; }
.exm-st { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.exm-st--active { background: #fdf3d3; color: #7a5200; } .exm-st--done { background: #e6f4ea; color: #227840; } .exm-st--overdue { background: #fdecea; color: #c0392b; }
.exm-table { table-layout: auto; font-variant-numeric: tabular-nums; }
.exm-table .exm-c { width: auto; min-width: 26px; }
.exm-table td:last-child, .exm-table th:last-child { width: 1%; padding-right: 0; }
.exm-table .exm-op { width: 46px; text-align: center; cursor: pointer; }
.exm-table tbody tr:hover td:not(.exm-c) { background: var(--bg-light); }
.exm-table tbody tr:hover .exm-name { background: var(--bg-light); }
.exm-tools .exm-op { padding: 5px 8px; font-size: 13px; }
.exm-tools label { display: inline-flex; align-items: center; gap: 6px; }
[data-theme="dark"] .exm-st--active { background: #3a2f14; color: #e8c66a; } [data-theme="dark"] .exm-st--done { background: var(--green-tint-bg); color: var(--green-tint-ink); } [data-theme="dark"] .exm-st--overdue { background: var(--red-tint-bg); color: var(--red-tint-ink); }
[data-theme="dark"] .admin-field select { border-color: var(--border-color); }
.admin-row .admin-field.exf-src { flex: 3 1 260px; }
.admin-row .admin-field.exf-title { flex: 3 1 240px; }
.admin-field code { display: inline-block; word-break: normal; white-space: nowrap; max-width: 100%; overflow-x: auto; vertical-align: bottom; }
.icon-btn svg { width: 17px !important; height: 17px !important; }
/* Дашборд ДЗ: клік по клітинці відкриває картку завдання з відповіддю саме цього учня */
.dist-stud.ds-focus { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 8px; background: var(--green-tint-bg, #f0f6f1); }
.dash-cell[data-task] { cursor: pointer; }
.dash-th[data-task] { cursor: pointer; }
/* Монітор іспиту: номер завдання і клітинка відкривають картку з умовою */
.exm-table th.exm-click, .exm-table td.exm-click { cursor: pointer; }
.exm-table th.exm-click:hover { color: var(--primary); }

/* ── Кабінет → «Акаунт»: видалення акаунта (вимога App Store 5.1.1(v)) ── */
.cabinet-account { margin-top: 16px; }
.cabinet-account .account-note { margin: 4px 0 14px; color: var(--text-muted); font-size: 14px; line-height: 1.5; max-width: 60ch; }
.cabinet-account .account-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.btn-delete-account {
    min-height: 44px; padding: 10px 18px; border-radius: 10px; cursor: pointer;
    font: inherit; font-size: 15px; font-weight: 700;
    color: var(--danger, #c62828); background: transparent;
    border: 1.5px solid var(--danger, #c62828);
    transition: background .15s, color .15s;
}
.btn-delete-account:hover:not(:disabled) { background: var(--danger, #c62828); color: #fff; }
.btn-delete-account:focus-visible { outline: 2px solid var(--danger, #c62828); outline-offset: 2px; }
.btn-delete-account:disabled { opacity: .6; cursor: progress; }
.cabinet-account .account-link { font-size: 14px; color: var(--text-muted); text-underline-offset: 3px; }
[data-theme="dark"] .btn-delete-account { color: #ff8a80; border-color: #ff8a80; }
[data-theme="dark"] .btn-delete-account:hover:not(:disabled) { background: #ff8a80; color: #1c1a18; }

/* Групи в розгорнутому списку тренажерів на головній (scripts/build_trainer_cards.py) */
.trainers-group-title {
    margin: 18px 4px 8px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: var(--text-muted);
}
.trainers-list .trainers-group-title:first-child { margin-top: 4px; }

/* Розділ «Тренажери за темами» на головній (app.js, категорія trainers) */
.trainers-list--page { max-width: 760px; margin: 8px auto 0; }
.trainer-best { display: block; margin-top: 4px; font-size: 12px; font-weight: 800; color: #227840; }
[data-theme="dark"] .trainer-best { color: #7fd49a; }

/* Практика «Завдання НМТ за темами» (app.js, категорія nmtprac) */
.nmtp-list { display: grid; gap: 14px; max-width: 760px; margin: 8px auto 0; }
.nmtp-topic { background: var(--card-bg, #fff); border: 1.5px solid var(--border-color, #e3ded6); border-radius: 16px; padding: 16px 18px; }
.nmtp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.nmtp-title { font-size: 19px; font-weight: 800; }
.nmtp-meta { margin-top: 3px; font-size: 13px; color: var(--text-muted); }
.nmtp-bar { height: 6px; margin-top: 12px; border-radius: 99px; background: rgba(34,120,64,.12); overflow: hidden; }
.nmtp-bar i { display: block; height: 100%; background: #227840; border-radius: 99px; }
.nmtp-secs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.nmtp-sec { font: inherit; font-size: 13px; font-weight: 700; padding: 7px 12px; border-radius: 99px; cursor: pointer;
    border: 1.5px solid var(--border-color, #e3ded6); background: transparent; color: inherit; }
.nmtp-sec span { margin-left: 4px; color: var(--text-muted); font-weight: 600; }
.nmtp-sec:hover { border-color: #227840; }
.nmtp-sec:focus-visible, .nmtp-topic .hw-start-btn:focus-visible { outline: 2px solid #227840; outline-offset: 2px; }
[data-theme="dark"] .nmtp-topic { background: var(--surface, #262320); border-color: var(--card-border, #37332f); }
[data-theme="dark"] .nmtp-bar i { background: #5cc27f; }

/* «Схожі на НМТ» — генератор нових завдань тих самих типів */
.nmtp-gen-row { display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border-color, #e3ded6); }
.nmtp-gen { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 13.5px; font-weight: 800; padding: 8px 14px; border-radius: 10px; cursor: pointer;
    color: #1b5e33; background: rgba(34,120,64,.08); border: 1.5px solid rgba(34,120,64,.35); }
.nmtp-gen svg { width: 16px; height: 16px; }
.nmtp-gen:hover { background: rgba(34,120,64,.14); }
.nmtp-gen:focus-visible { outline: 2px solid #227840; outline-offset: 2px; }
.nmtp-gen-hint { flex: 1 1 220px; font-size: 12.5px; line-height: 1.4; color: var(--text-muted); }
/* заголовок завдання — світла плашка в обох темах, тож бейдж однаковий: темно-зелений з білим */
.year-badge.year-badge--gen { background: #1b5e33; color: #fff; font-weight: 700; }
.tf-why { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 10px; padding: 10px 12px; border-radius: 10px; font-size: 14px; line-height: 1.5;
    background: #fff; border: 1px solid #ecd3cf; color: #5b2a24; }
.tf-why-ic { flex: none; font-size: 15px; line-height: 1.4; }
.nmtp-next-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 10px; }
.nmtp-next-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.nmtp-next-tag { font-size: 12.5px; font-weight: 700; padding: 4px 10px; border-radius: 99px; background: #fdf2f0; border: 1px solid #f1c9c6; color: #7a2f27; }
[data-theme="dark"] .nmtp-next-tag { background: rgba(240,169,162,.1); border-color: #5a3535; color: #f0c9c3; }
[data-theme="dark"] .nmtp-gen { color: #8fd6a6; background: rgba(92,194,127,.1); border-color: rgba(92,194,127,.4); }
[data-theme="dark"] .nmtp-gen:hover { background: rgba(92,194,127,.18); }
[data-theme="dark"] .tf-why { background: rgba(0,0,0,.18); border-color: #4a2a26; color: #f0c9c3; }

/* Кабінет: «Новий дизайн (бета)» */
.cabinet-beta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 16px; padding: 12px 16px; border: 1px dashed var(--border-color); border-radius: 12px; }
.cabinet-beta__text { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.cabinet-beta__text span { color: var(--text-light); font-size: 13px; }
.cabinet-beta .btn-cabinet { flex: 0 0 auto; }
.cabinet-haptics[hidden] { display: none; }
.cabinet-haptics .btn-cabinet[aria-pressed="false"] { opacity: .75; }
.cabinet-push[hidden] { display: none; }
.cabinet-push .btn-cabinet:disabled { opacity: .75; cursor: default; }

/* Кабінет на телефоні: вкладки не вміщаються — гортаються вбік, а не обрізаються */
@media (max-width: 600px) {
    .cabinet-tabs { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .cabinet-tabs::-webkit-scrollbar { display: none; }
    .cabinet-tab { flex: 0 0 auto; white-space: nowrap; padding: 10px 14px; }
}

/* ═══════════════════════════════════════════════════════════════════
   ТАЙМЕР І ДОВІДКОВІ МАТЕРІАЛИ — як у режимі «Іспит» (examkit.js; структура — exam.html / exam.css).
   ui-v2 і старий вигляд. Зін (.ui-z) має власні правила в ds/screens.css — тут усе під маркером
   @supports (--zin-legacy: 1), який інлайн-скрипт index.html вирізає під .ui-z.
   ═══════════════════════════════════════════════════════════════════ */
@supports (--zin-legacy: 1) {
/* Верхній відступ смужки / довідки: виріз екрана, а в Telegram на весь екран (Bot API 8) — ще й його «Закрити» / «⋯»
   (Telegram задає їх лише своїми змінними, env() про них не знає) */
:root { --safe-top-tg: max(var(--safe-top, 0px), calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px))); }
/* Панель з інструкцією й таймером більше не «липне» (займала до 30 % екрана телефона): гортається зі сторінкою */
#testScreen .warning-bar { position: relative; top: auto; }
/* «Сховати» (як в «Іспиті») прибирає лише текст — «Пауза», «Завершити» і таймер лишаються */
#testScreen .warning-bar.text-hidden .warning-content { display: none; }
#testScreen .warning-bar.text-hidden { justify-content: flex-end; }
.warning-actions .lbl-short { display: none; }
/* Бічна сітка завдань липне під смужкою з таймером, а не під колишньою високою панеллю */
#testScreen .tasks-sidebar { top: calc(64px + var(--safe-top, 0px)); max-height: calc(100vh - 64px - var(--safe-top, 0px)); }

/* Таймер + «око» */
.timer-group { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.timer-eye {
    flex: none; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
    width: 40px; height: 40px; margin: 0; padding: 0; cursor: pointer;
    border: 1px solid var(--border-color, #ddd); border-radius: 999px;
    background: var(--bg-white, #fff); color: var(--text-dark, #333);
    -webkit-tap-highlight-color: transparent;
}
.timer-eye:hover { border-color: var(--primary); color: var(--primary-dark, var(--primary)); }
.timer-eye:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.timer-eye svg { width: 20px; height: 20px; }
.timer-eye .timer-eye__off,
.timer-eye[aria-pressed="true"] .timer-eye__on { display: none; }
.timer-eye[aria-pressed="true"] .timer-eye__off { display: inline-block; }
.timer-eye--sm { width: 34px; height: 34px; }
.timer-eye--sm svg { width: 18px; height: 18px; }
/* Сховано «оком»: часу не видно в жодному місці; замість пігулки — тиха примітка (у смужці місце лишається, як в «Іспиті») */
.timer-off-note { display: none; font-size: 13px; font-weight: 700; color: var(--text-muted, #666); white-space: nowrap; }
.nmt-timer-off .timer-group .timer-display { display: none; }
.nmt-timer-off .timer-off-note { display: inline; }
.nmt-timer-off .test-strip__time,
.nmt-timer-off .test-strip__label { visibility: hidden; }
/* Без таймера (ДЗ / практика / тренування): ні часу, ні «ока» */
.nmt-untimed .timer-group,
.nmt-untimed .test-strip__timer { display: none; }
/* Останні 5 хвилин */
.timer-display.is-low .timer-value,
.test-strip.is-low .test-strip__time { color: var(--danger, #c0392b); }
@media (prefers-reduced-motion: no-preference) {
    .timer-display.is-pulse, .test-strip__time.is-pulse { animation: nmtTimerPulse .7s ease-in-out 3; }
}
@keyframes nmtTimerPulse { 50% { transform: scale(1.08); } }

/* Компактна смужка згори (виїжджає, коли рядок з таймером прокрутили за край екрана) */
.test-strip {
    position: fixed; top: 0; left: 0; right: 0; z-index: 90;
    display: flex; align-items: center; justify-content: space-between; gap: 12px; box-sizing: border-box;
    min-height: 52px; padding: calc(6px + var(--safe-top-tg, 0px)) 20px 6px;
    background: var(--bg-white, #fff); color: var(--text-dark, #333);
    border-bottom: 3px solid var(--primary); box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
    transform: translateY(-110%); visibility: hidden;
    transition: transform .18s ease, visibility .18s;
}
.test-strip.is-on { transform: none; visibility: visible; }
.test-strip__title { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; font-weight: 700; color: var(--text-muted, #666); }
.test-strip__right { flex: none; display: flex; align-items: center; gap: 10px; }
.test-strip__ref {
    display: inline-flex; align-items: center; gap: 6px; box-sizing: border-box; min-height: 36px; margin: 0; padding: 0 12px;
    border: 2px solid var(--primary); border-radius: 999px; background: var(--bg-white, #fff); color: var(--text-dark, #333);
    font: inherit; font-size: 13px; font-weight: 700; white-space: nowrap; cursor: pointer;
}
.test-strip__ref:hover { background: var(--primary); color: #fff; }
.test-strip__ref:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.test-strip__ref svg { width: 16px; height: 16px; flex: none; }
.test-strip__short { display: none; }
.test-strip__timer { display: inline-flex; align-items: center; gap: 8px; }
.test-strip__label { font-size: 13px; color: var(--text-muted, #666); }
.test-strip__time { display: inline-block; min-width: 88px; text-align: center; font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.nmt-review .test-strip { display: none; }
/* Перегляд відповідей: «Інструкція» повертала б «Пауза» / «Завершити» / таймер уже зданої спроби */
.nmt-review [data-test-instr] { display: none; }
@media (prefers-reduced-motion: reduce) { .test-strip { transition: none; } }

/* Телефон: панель з таймером в один рядок — «Завершити» коротко, без іконки годинника */
@media (max-width: 480px) {
    #testScreen .warning-bar { padding-left: 14px; padding-right: 14px; }
    #testScreen .warning-actions { gap: 8px; flex-wrap: nowrap; }
    #testScreen .btn-pause-test { margin-right: 0; padding-left: 10px; padding-right: 10px; }
    .warning-actions .lbl-long { display: none; }
    .warning-actions .lbl-short { display: inline; }
    #testScreen .timer-display .timer-icon { display: none; }
    .test-strip { padding-left: 12px; padding-right: 12px; gap: 8px; }
    .test-strip__right { gap: 8px; }
    .test-strip__label, .test-strip__long { display: none; }
    .test-strip__short { display: inline; }
    .test-strip__time { min-width: 76px; font-size: 18px; }
}
@media (max-width: 374px) {
    #testScreen .btn-pause-test .lbl-pause { display: none; }
}
/* Великий рисунок (відповідність, 420 px) ширший за картку телефона: раніше його можна було «дотягнути» вбік
   у внутрішній прокрутці зони завдання, тепер екран гортається лише вертикально — рисунок вміщаємо в картку */
@media (max-width: 560px) {
    #testScreen .task-content img.task-image.large { max-width: 100%; }
}

/* ── Довідкові матеріали: модалка зі сторінками ── */
.ref-modal {
    position: fixed; inset: 0; z-index: 5000;
    display: flex; align-items: center; justify-content: center; box-sizing: border-box;
    padding: 16px; background: rgba(20, 18, 16, .6); overscroll-behavior: contain;
}
.ref-modal[hidden] { display: none; }
.ref-modal__box {
    display: flex; flex-direction: column; box-sizing: border-box; overflow: hidden;
    width: 100%; max-width: 980px; height: 100%; max-height: 92vh;
    background: var(--bg-white, #fff); color: var(--text-dark, #333);
    border-radius: 12px; box-shadow: 0 10px 40px rgba(0, 0, 0, .3);
}
.ref-modal__head {
    flex: none; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px 12px;
    padding: 10px 14px; border-bottom: 1px solid var(--border-color, #e0e0e0);
}
.ref-modal__title { margin: 0 auto 0 0; font-size: 18px; line-height: 1.25; font-weight: 800; color: var(--text-dark, #333); }
/* Час тесту в шапці довідки (examkit.js #refTimer) — лише в тесті на час, коли його не сховано «оком» */
.ref-modal__timer { flex: none; display: inline-flex; align-items: center; gap: 8px; }
.ref-modal__timer[hidden] { display: none; }
.ref-modal__timer-l { font-size: 13px; font-weight: 700; color: var(--text-muted, #666); white-space: nowrap; }
.ref-modal__timer-v {
    display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px;
    border: 1px solid var(--border-color, #ddd); background: var(--bg-light, #f5f5f5); color: var(--text-dark, #333);
    font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ref-modal__timer-v svg { width: 16px; height: 16px; flex: none; }
.ref-modal__timer.is-low .ref-modal__timer-v { color: var(--danger, #c0392b); border-color: currentColor; }
.ref-modal__tools { flex: none; display: flex; align-items: center; gap: 8px 12px; }
.ref-modal__zoom { display: inline-flex; align-items: center; gap: 4px; }
.ref-modal__zbtn {
    display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: 40px; height: 40px; margin: 0; padding: 0;
    border: 1px solid var(--border-color, #ccc); border-radius: 999px; background: var(--bg-light, #f5f5f5); color: var(--text-dark, #333); cursor: pointer;
}
.ref-modal__zbtn svg { width: 18px; height: 18px; }
.ref-modal__zbtn:disabled { opacity: .4; cursor: default; }
.ref-modal__zval { min-width: 50px; text-align: center; font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ref-modal__pdf { padding: 8px 6px; font-size: 13px; font-weight: 700; color: var(--link-color, var(--primary)); }
.ref-modal__back {
    display: inline-flex; align-items: center; gap: 8px; box-sizing: border-box; min-height: 40px; margin: 0; padding: 0 16px;
    border: 0; border-radius: 10px; background: var(--primary); color: #fff;
    font: inherit; font-size: 14px; font-weight: 800; white-space: nowrap; cursor: pointer;
}
.ref-modal__back svg { width: 18px; height: 18px; }
.ref-modal__back-short { display: none; }
.ref-modal__zbtn:focus-visible, .ref-modal__back:focus-visible, .ref-modal__pdf:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.ref-modal__body {
    flex: 1 1 auto; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    touch-action: pan-x pan-y; padding: 12px; background: var(--bg-gray, #555);
}
.ref-modal__body:focus-visible { outline: 3px solid var(--primary); outline-offset: -3px; }
.ref-pic { display: block; margin: 0 0 12px; }
.ref-pic:last-child { margin-bottom: 0; }
.ref-page {
    display: block; box-sizing: border-box; width: var(--ref-zoom, 100%); max-width: none; height: auto; margin: 0 auto;
    background: #fff; border-radius: 4px; box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
    -webkit-user-select: none; user-select: none;
}
html.ref-open, html.ref-open body { overflow: hidden; }
/* Планшет: «Повернутися до тесту» коротше, щоб шапка вміщалась в один рядок разом із часом */
@media (max-width: 900px) {
    .ref-modal__timer-l { display: none; }
    .ref-modal__back-long { display: none; }
    .ref-modal__back-short { display: inline; }
}
/* Телефон: на весь екран; рядок 1 — назва й час, рядок 2 — масштаб · PDF · «До тесту» (порядок = Tab) */
@media (max-width: 600px) {
    .ref-modal { padding: 0; }
    .ref-modal__box { max-width: none; max-height: none; height: 100%; border-radius: 0; padding-top: var(--safe-top-tg, 0px); }
    .ref-modal__head { padding: 8px 12px; }
    .ref-modal__title { flex: 1 1 auto; min-width: 0; font-size: 17px; }
    .ref-modal__tools { flex: 1 0 100%; }
    .ref-modal__back { margin-left: auto; padding: 0 12px; }
    .ref-modal__body { padding: 8px 8px calc(8px + var(--safe-bottom, 0px)); }
    .ref-pic { margin-bottom: 8px; }
}
@media (max-width: 374px) {
    .ref-modal__title { font-size: 15px; }
    .ref-modal__back { padding: 0 10px; }
    .ref-modal__timer-v { padding: 3px 8px; font-size: 15px; }
    .ref-modal__tools { gap: 6px; }
    .ref-modal .ref-modal__zbtn { width: 34px; height: 34px; }
    .ref-modal__zval { min-width: 42px; }
}
}

/* ═══ Правила ДЗ (functions/hw_rules.js): «Почати до … / Здати до … / Закрито о …» у списку ДЗ кабінету, банер «Нові правила ДЗ»
   (app.js _paintHwRulesCard), примітка про запізнілу спробу на екрані результатів. ═══ */
.hw-card-status { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.hw-badge--start { background: #fdeee2; color: #8a3f0b; }
.hw-badge--due { background: #f1f6f0; color: #42604b; }
.hw-badge--closed { background: #fbe3e3; color: #a82f2f; }
.hw-closed-note { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 8px 12px; border-radius: 10px; background: #f5f0ec; color: #5c544c; font-size: 13px; font-weight: 700; }
.hw-closed-note svg { width: 16px; height: 16px; }
.hw-banner--late { background: #fdf3ea; border: 1px solid #f3c9a5; color: #7a3a10; }
.hwr-card { margin: 0 0 16px; padding: 16px 18px; border-radius: 14px; background: #fffdfb; border: 1px solid #f3c9a5; }
.hwr-kick { display: inline-block; padding: 2px 10px; border-radius: 20px; background: #fdeee2; color: #8a3f0b; font-size: 12px; font-weight: 700; }
.hwr-title { margin: 8px 0 6px; font-size: 17px; line-height: 1.3; color: #2a2622; }
.hwr-text p { margin: 0 0 8px; font-size: 14px; line-height: 1.5; color: #5c544c; overflow-wrap: anywhere; }
.hwr-text b { color: #2a2622; }
.hwr-ack { margin-top: 4px; }
.hwr-msg { margin: 8px 0 0; font-size: 13px; color: #a82f2f; }
[data-theme="dark"] .hw-badge--start { background: var(--orange-tint, #38251a); color: #f0a875; }
[data-theme="dark"] .hw-badge--due { background: var(--sage-tint, #24302a); color: var(--sage-ink, #cfe9d3); }
[data-theme="dark"] .hw-badge--closed { background: var(--red-tint, #3a2626); color: var(--red-ink, #f0a9a2); }
[data-theme="dark"] .hw-closed-note { background: var(--surface-2, #2f2b27); color: var(--ink-2, #cfc7bc); }
[data-theme="dark"] .hw-banner--late { background: var(--orange-tint-2, #2e2019); border-color: var(--orange-border, #4a3423); color: #f0c9a8; }
[data-theme="dark"] .hwr-card { background: var(--surface, #262320); border-color: var(--orange-border, #4a3423); }
[data-theme="dark"] .hwr-kick { background: var(--orange-tint, #38251a); color: #f0a875; }
[data-theme="dark"] .hwr-title, [data-theme="dark"] .hwr-text b { color: var(--ink, #f5f0ec); }
[data-theme="dark"] .hwr-text p { color: var(--ink-2, #cfc7bc); }
[data-theme="dark"] .hwr-msg { color: var(--red-ink, #f0a9a2); }