/* =========================================================================
   ПРАВИЛА, ПЕРЕЕХАВШИЕ ИЗ tokens.css.

   Это основа внешнего вида: страница, ссылки, кнопки Bootstrap, мобильные
   поправки. Раньше они лежали вместе с настройками, из-за чего tokens.css
   нельзя было подключить к доске — он тащил за собой чужую вёрстку.
   Порядок сохранён: tokens.css по-прежнему подключается первым, эти правила
   идут следом, а собственные кирпичи components.css — после них.
   ========================================================================= */

/* ── ТЁПЛАЯ ГАММА НА ВЕСЬ САЙТ ──────────────────────────────────────────
   Раньше страницы были белыми с холодными серыми границами и тенью под
   каждой карточкой, а заголовки разделов — фиолетовыми плашками с белыми
   буквами. Теперь всё живёт на тёплой бумаге: поверхности чуть светлее фона,
   границы волосяные, теней нет.

   Почему тени убраны целиком. Тень изображает высоту — будто карточка лежит
   НАД страницей. Когда так «приподнято» всё подряд, высота перестаёт что-либо
   значить и остаётся только грязь по краям. Разделяем линией: она честнее и
   дешевле для глаза.
   ─────────────────────────────────────────────────────────────────────── */
body { background: var(--c-paper); }

/* Шапка сайта. Светлая, с одной волосяной линией снизу вместо градиента. */
.site-nav {
    background: var(--c-paper);
    border-bottom: 1px solid var(--c-rule);
}
.site-nav .navbar-brand {
    font-family: var(--font-display);
    font-weight: 700; letter-spacing: -.01em; color: var(--c-ink);
}
/* Вес селектора нарочно высокий: у Bootstrap правило для ссылок светлой
   шапки написано через три класса и иначе побеждает, оставляя буквы
   полупрозрачно-серыми. */
.site-nav.navbar-light .navbar-nav .nav-link { color: var(--c-ink-2); font-weight: 400; }
.site-nav.navbar-light .navbar-nav .nav-link:hover,
.site-nav.navbar-light .navbar-nav .nav-link:focus { color: var(--c-ink); }
.site-nav .navbar-toggler { border-color: var(--c-rule); }
.site-nav .btn-outline-light {
    color: var(--c-ink); border-color: var(--c-ink); border-radius: 4px;
}
.site-nav .btn-outline-light:hover { background: var(--c-ink); color: var(--c-paper); }

/* Карточки Bootstrap и свои — тёплые и плоские. */
.card, .app-card, .app-section-card, .app-form-card {
    background: #fffdfa;
    border: 1px solid var(--c-rule);
    box-shadow: none;
}
/* Тени, расставленные по шаблонам классами Bootstrap, гасим здесь же:
   иначе пришлось бы править полсотни файлов ради одного и того же. */
.shadow, .shadow-sm, .shadow-lg, .card.shadow, .card.shadow-sm {
    box-shadow: none !important;
}

/* Кнопки: одинаковое скругление вместо «таблеток» вперемешку с прямыми. */
.btn { border-radius: 6px; }
.btn-lg { border-radius: 7px; }


/* ══ ТЁПЛЫЙ BOOTSTRAP ════════════════════════════════════════════════════
   Переопределяем только поверхности и границы. Размеры, отступы и поведение
   Bootstrap не трогаем: ломать чужую сетку ради цвета — плохая сделка.     */

/* Поверхности, которые Bootstrap красит белым. */
.bg-white, .bg-light { background-color: var(--c-bg-soft) !important; }
.card-header, .card-footer {
    background-color: var(--c-bg-soft);
    border-color: var(--c-border);
}
.list-group-item {
    background-color: var(--c-surface);
    border-color: var(--c-border);
    color: var(--c-text);
}
.modal-content, .dropdown-menu, .offcanvas, .accordion-item, .accordion-button {
    background-color: var(--c-surface);
    border-color: var(--c-border);
    color: var(--c-text);
}
.modal-header, .modal-footer, .accordion-item { border-color: var(--c-border); }
.dropdown-item { color: var(--c-text); }
.dropdown-item:hover, .dropdown-item:focus {
    background-color: var(--c-surface-hover); color: var(--c-text);
}

/* Поля ввода. Белое поле на тёплой бумаге бросается в глаза сильнее самой
   страницы; делаем его чуть светлее фона, а не ярче всего вокруг. */
.form-control, .form-select, .input-group-text {
    background-color: var(--c-surface);
    border-color: var(--c-border);
    color: var(--c-text);
}
.form-control:focus, .form-select:focus {
    background-color: var(--c-surface);
    border-color: var(--c-primary-400);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, .12);
}
.form-control::placeholder { color: var(--c-text-muted); opacity: 1; }

/* Таблицы: вместо полосатой заливки — волосяные линии. */
.table { --bs-table-bg: transparent; color: var(--c-text); border-color: var(--c-border); }
.table > :not(caption) > * > * { border-color: var(--c-border); }
.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: transparent;
    background-color: transparent;
    color: var(--c-text);
}
.table-hover > tbody > tr:hover > * {
    --bs-table-accent-bg: var(--c-surface-hover);
    color: var(--c-text);
}

/* Раскрытый пункт «гармошки» (список модулей курса). У Bootstrap для него
   отдельное правило .accordion-button:not(.collapsed) с голубой заливкой
   #e7f1ff и синим текстом — оно сильнее нашего по весу селектора, поэтому
   страница курса была тёплой ровно до первого щелчка по модулю. */
.accordion-button:not(.collapsed) {
    background-color: var(--c-primary-50);
    color: var(--c-primary-800);
    box-shadow: none;
}
.accordion-button:focus { box-shadow: none; border-color: var(--c-border); }

/* Метка .bg-info у Bootstrap — светлая бирюза #0dcaf0, а текст в .badge
   белый: белое по светло-бирюзовому не читается. Переводим на фирменный. */
.badge.bg-info { background-color: var(--c-primary-100) !important; color: var(--c-primary-800) !important; }

/* Сообщения. Bootstrap рисует их пастельной заливкой с цветной рамкой;
   оставляем заливку тёплой, а рамку — волосяной слева, как цитату. */
.alert {
    border: 1px solid var(--c-border);
    border-left-width: 3px;
    border-radius: var(--r-md);
}
.alert-success { background: var(--c-success-soft); border-left-color: var(--c-success); color: var(--c-success-text); }
.alert-danger  { background: var(--c-danger-soft);  border-left-color: var(--c-danger);  color: var(--c-danger-text); }
.alert-warning { background: var(--c-warning-soft); border-left-color: var(--c-warning); color: var(--c-warning-text); }
.alert-info, .alert-primary { background: var(--c-primary-50); border-left-color: var(--c-primary-500); color: var(--c-primary-800); }

/* Метки. Были насыщенные заливки на пол-строки. */
.badge.bg-light { color: var(--c-text-soft) !important; border: 1px solid var(--c-border); }
.badge.bg-secondary { background-color: var(--c-bg-soft) !important; color: var(--c-text-soft) !important; }

/* Полоса выполнения. */
.progress { background-color: var(--c-bg-soft); }

/* Разделитель. */
hr { border-color: var(--c-border); opacity: 1; }

/* Утилиты Bootstrap — единственное место, где !important обязателен: сам
   Bootstrap объявляет их с !important, и без него наше правило не сработает.
   .text-muted стоит в тридцати шаблонах семьдесят три раза и красил подписи
   холодным #6c757d — на тёплой бумаге он отдавал в синеву. */
.text-muted { color: var(--c-text-muted) !important; }
.text-secondary { color: var(--c-text-soft) !important; }
.border { border-color: var(--c-border) !important; }
.border-top, .border-bottom, .border-start, .border-end { border-color: var(--c-border) !important; }

/* Тень при наведении на карточку курса: «0 10px 20px» с !important. Карточка
   и так обведена линией, а подскок под курсором ничего не сообщает. */
.hover-shadow:hover { box-shadow: none !important; }
.hover-shadow { transition: border-color .15s ease; }
.hover-shadow:hover { border-color: var(--c-border-strong) !important; }

/* Вторичная кнопка: была серой заливкой Bootstrap. */
.btn-outline-secondary {
    color: var(--c-text-soft);
    border-color: var(--c-border-strong);
}
.btn-outline-secondary:hover, .btn-outline-secondary:focus, .btn-outline-secondary:active {
    background-color: var(--c-bg-soft) !important;
    border-color: var(--c-border-strong) !important;
    color: var(--c-text) !important;
}

/* ── Базовая типографика ───────────────────────────────────────────────── */
html, body {
    font-family: var(--font-sans);
    color: var(--c-text);
}

/* Картинки. Две строки, которые снимают сразу две частые поломки:

   height: auto — если у картинки прописаны настоящие размеры атрибутами
   (width/height, это подсказка браузеру о пропорции), а в CSS задана только
   ширина, то высота берётся из атрибута БУКВАЛЬНО, и картинка растягивается.
   Ровно это случилось с портретом на главной: 420 на 1280 вместо 420 на 595.

   max-width: 100% — картинка из письма ученика или из разбора задачи бывает
   шириной в 3000 точек и раздвигает собой страницу.

   Правило самое слабое (по имени тега), поэтому любое местное
   .что-то img со своими размерами по-прежнему сильнее и работает как раньше. */
img, video { max-width: 100%; height: auto; }

/* Заголовки страниц — шрифтом с засечками, как на главной.
   Раньше главная жила одной типографикой, а остальные шестьдесят страниц — другой:
   жирным без засечек и крупнее. Получалось, что человек переходит с главной в
   кабинет и попадает будто на другой сайт. Одно правило здесь сводит все страницы
   вместе — шаблоны править не нужно. */
h1, h2 {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -.012em;
    color: var(--c-text);
}
h1 { font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.2rem); }
h2 { font-size: clamp(1.3rem, 1rem + 1vw, 1.6rem); }
h3, h4, h5, h6 { font-weight: 600; color: var(--c-text); }

a { color: var(--c-primary-600); }
a:hover { color: var(--c-primary-700); }

/* ── Bootstrap-кнопки и алерты переопределяем под violet ───────────────── */
.btn-primary {
    background-color: var(--c-primary-600);
    border-color: var(--c-primary-600);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--c-primary-700) !important;
    border-color: var(--c-primary-700) !important;
}

.btn-outline-primary {
    color: var(--c-primary-600);
    border-color: var(--c-primary-600);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    background-color: var(--c-primary-600) !important;
    border-color: var(--c-primary-600) !important;
    color: #fff !important;
}

.bg-primary { background-color: var(--c-primary-600) !important; }
.text-primary { color: var(--c-primary-600) !important; }
.border-primary { border-color: var(--c-primary-600) !important; }

.alert-info,
.alert-primary {
    background-color: var(--c-primary-50);
    color: var(--c-primary-text);
    border-color: var(--c-primary-200);
}

/* ── Прогресс-бар Bootstrap ────────────────────────────────────────────── */
.progress-bar { background-color: var(--c-primary-600); }

/* ── Focus-ring (свечение вокруг сфокусированных элементов) ─────────────
   Bootstrap по умолчанию рисует голубой ореол. Перекрашиваем в violet. */
.btn-primary:focus,
.btn-primary:focus-visible,
.btn-primary.focus,
.btn-primary:active:focus,
.btn-check:focus + .btn-primary {
    box-shadow: 0 0 0 .25rem rgba(124, 58, 237, .35) !important;
}
.btn-outline-primary:focus,
.btn-outline-primary:focus-visible,
.btn-outline-primary.focus {
    box-shadow: 0 0 0 .25rem rgba(124, 58, 237, .35) !important;
}
.btn-outline-light:focus,
.btn-outline-light:focus-visible,
.btn-outline-light.focus {
    box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .25) !important;
}
/* На всякий случай — общий «синий» :focus у любых .btn заменим на нейтральный */
.btn:focus,
.btn:focus-visible {
    outline: none;
}

/* ── Поля ввода: фокус-обводка тоже фиолетовая ─────────────────────────── */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--c-primary-400) !important;
    box-shadow: 0 0 0 .25rem rgba(124, 58, 237, .20) !important;
}
.form-check-input:checked {
    background-color: var(--c-primary-600) !important;
    border-color: var(--c-primary-600) !important;
}

/* ── Лайтбокс (используется через _lightbox.html + lightbox.js) ────────── */
.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .9);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 2rem;
}
.lightbox.open { display: flex; }
.lightbox img {
    max-width: 100%;
    max-height: calc(100vh - 4rem);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .5);
    border-radius: var(--r-md);
    background: #fff;
}
.lightbox .close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .15);
    border: none;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
}
.lightbox .close:hover { background: rgba(255, 255, 255, .3); }

[data-lightbox-src] { cursor: zoom-in; }

/* ── Мобильные общие правила ───────────────────────────────────────────── */
@media (max-width: 640px) {
    /* Сжимаем фирменные «герои» — у них во всех шаблонах +/- одинаковая структура */
    .teacher-hero, .progress-page-hero, .student-hero, .form-hero,
    .workbook-form-hero, .workbook-hero, .sub-hero, .enroll-hero {
        padding: 1rem 1.1rem !important;
    }
    .teacher-hero h1, .progress-page-hero h1, .student-hero h1,
    .form-hero h1, .workbook-form-hero h1, .workbook-hero h1,
    .sub-hero h1, .enroll-hero h1 {
        font-size: 1.15rem !important;
    }

    /* Display-классы Bootstrap — большие 4rem заголовки на телефоне выглядят гипертрофированно */
    .display-4, .display-5 { font-size: 1.6rem !important; }
    .lead { font-size: 1rem !important; }

    /* Action-bar обычно flex с кнопками — чтобы не вылезали за экран */
    .actions-bar { gap: .5rem !important; }

    /* Hero на главной — поджимаем */
    .hero-section { padding: 60px 0 !important; }
}

/* =========================================================================
   Общие компоненты интерфейса. Подключается в visitor_base.html ПОСЛЕ
   tokens.css и Bootstrap.

   ЗАЧЕМ ЭТОТ ФАЙЛ ВЫРОС. Замер 6 сентября 2026: на сайте 65 страниц, 51 из них
   несла собственный блок <style> — всего 5550 строк против 394 в системе. Из-за
   этого одно и то же было нарисовано много раз и слегка по-разному:

       шапка страницы   19 копий под 10 именами (app-hero, form-hero,
                        teacher-hero, student-hero, workbook-hero, sub-hero,
                        enroll-hero, progress-page-hero, practice-hero, rep-hero)
       карточка-панель  25 копий под 16 именами
       ссылка «назад»   17 копий в 17 файлах
       кнопка           37 версий
       бейдж            32 версии
       поле ввода       25 версий

   Причём расхождения в основном НЕ по замыслу: половина копий писала
   `border-radius: .5rem` там, где другая писала `var(--r-lg)` — а это одно и то
   же число. Или #ede9fe вместо var(--c-primary-100) — тоже одно и то же.

   ПОРЯДОК ПЕРЕЕЗДА. Блоки <style> шаблонов идут ПОСЛЕ этого файла (в
   visitor_base.html он в <head> на строке 32, а {% block extra_css %} на 112),
   поэтому местное правило всегда побеждает общее. Значит добавление компонента
   сюда НЕ МЕНЯЕТ вид ни одной страницы, пока из шаблона не удалён его
   собственный CSS. Переезд идёт по одному шаблону: удалили блок — страница
   подхватила общий вид — посмотрели.

   Ради этого ниже у компонентов перечислены СТАРЫЕ ИМЕНА. Пока шаблон держит
   своё правило, оно и работает; как только его убрали, имя цепляется за общий
   компонент, и переписывать разметку не нужно.

   Bootstrap 5.1.3 на сайте уже есть: кнопки, поля, таблицы, сетку берём у него,
   здесь только то, чего у него нет.
   ========================================================================= */

/* ══ Шапка страницы ══════════════════════════════════════════════════════
   Заголовок раздела с волосяной линией под ним. Три размера: обычный,
   compact (формы и вложенные страницы) и large (кабинет).

   У правила было десять имён: app-hero и девять старых (form-hero,
   teacher-hero, student-hero, workbook-hero, workbook-form-hero, sub-hero,
   enroll-hero, progress-page-hero, practice-hero, rep-hero). Проверено: ни
   одно из девяти не встречается ни в одном шаблоне — они остались от прежней
   сборки. Убраны: искать среди десяти имён настоящее приходилось заново
   каждый раз.                                                               */
.app-hero {
    /* Была фиолетовая плашка с белыми буквами — на каждой странице кабинета.
       Стала обычная шапка раздела: тёмный заголовок на бумаге и волосяная
       линия снизу. Читается спокойнее и не спорит с содержимым. */
    background: transparent;
    color: var(--c-ink);
    border: 0;
    border-bottom: 1px solid var(--c-rule);
    border-radius: 0;
    padding: .25rem 0 1rem;
    margin-bottom: 1.5rem;
}
.app-hero h1 {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 600;
    margin: 0 0 .35rem;
}
/* Подпись под заголовком: дата, счётчик, имя ученика. */
.app-hero .meta, .app-hero .lead {
    color: var(--c-ink-3);
    font-size: .92rem;
    margin-bottom: 0;
}
/* Раньше размер шапки задавался отступами ВНУТРИ цветной плашки. Плашки
   больше нет, и отступы только отрывали заголовок от линии. Остаётся кегль. */
.app-hero.compact h1 { font-size: 1.35rem; }
.app-hero.large h1 { font-size: 1.75rem; margin-bottom: .5rem; }

/* Шапка раздела теперь на бумаге, поэтому ссылки в ней — обычные фирменные. */
.app-hero a { color: var(--c-primary-700); text-decoration: underline; text-underline-offset: 2px; }
.app-hero a:hover { color: var(--c-primary-800); }

/* ══ Карточки ════════════════════════════════════════════════════════════
   Белый блок с рамкой — основа всех страниц кабинета. Три вида отличаются
   только внутренним отступом, поэтому и заведены модификаторами, а не
   отдельными классами.                                                       */
.app-card,
.app-section-card,
.app-form-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
}
.app-card { padding: 1.25rem 1.5rem; }
.app-section-card { padding: 1.25rem 1.5rem; margin-bottom: 1.25rem; }
.app-form-card { padding: 1.5rem; }

.app-section-card > h2,
.app-card > h2 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 .85rem;
    color: var(--c-text);
}
.app-form-card label { font-weight: 500; font-size: .9rem; color: var(--c-text-soft); }
.app-form-card .form-text { font-size: .78rem; color: var(--c-text-muted); }

/* Карточка, по которой щёлкают (курс, колода, доска). Подъём при наведении
   один на весь сайт: прежде было три разных — на 3, 5 и 10 пикселей. */
.app-card.clickable,
.app-card-link {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.app-card.clickable:hover,
.app-card-link:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--c-border-strong);
    color: inherit;
}

/* ══ Заголовок раздела ═══════════════════════════════════════════════════ */
.app-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--c-text);
    margin: 0 0 .85rem;
}
/* Надстрочная метка над группой: «ДОМАШНЕЕ ЗАДАНИЕ», «МАТЕРИАЛЫ». */
.app-eyebrow {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--c-text-muted);
    margin-bottom: .5rem;
}

/* ══ Приглушённый текст ══════════════════════════════════════════════════
   Мелкий серый текст был набран девятью кеглями от .76rem до .95rem. Здесь
   два: обычный и совсем мелкий. Больше двух глаз всё равно не различает.      */
.app-muted { font-size: .88rem; color: var(--c-text-muted); }
.app-muted-xs { font-size: .78rem; color: var(--c-text-muted); }

/* ══ Ссылка «Назад» ══════════════════════════════════════════════════════ */
.btn-back-link,
.btn-back, .tg-back, .cw-back {
    color: var(--c-text-muted);
    text-decoration: none;
    font-size: .9rem;
    margin-bottom: 1rem;
    display: inline-block;
}
.btn-back-link:hover,
.btn-back:hover, .tg-back:hover, .cw-back:hover { color: var(--c-primary-600); }

/* ══ Бейджи ══════════════════════════════════════════════════════════════
   Форм две: прямоугольная (метка типа) и пилюля (счётчик). Цвета — только из
   палитры. Прежде их набирали хексами: #ede9fe вместо var(--c-primary-100),
   #fef3c7 вместо var(--c-warning-soft) — те же цвета, написанные вручную.     */
.app-badge {
    display: inline-block;
    font-size: .7rem;
    font-weight: 600;
    padding: .12rem .5rem;
    border-radius: var(--r-sm);
    margin-left: .35rem;
    vertical-align: middle;
    background: var(--c-gray-100);
    color: var(--c-text-soft);
}
.app-badge.pill { border-radius: var(--r-pill); padding: .15rem .6rem; font-size: .75rem; }
.app-badge.primary,  .app-badge.homework { background: var(--c-primary-100);  color: var(--c-primary-800); }
.app-badge.warning,  .app-badge.workbook { background: var(--c-warning-soft);  color: var(--c-warning-text); }
.app-badge.success { background: var(--c-success-soft); color: var(--c-success-text); }
.app-badge.danger  { background: var(--c-danger-soft);  color: var(--c-danger-text); }
.app-badge.mono    { font-family: var(--font-mono); font-weight: 600; }

/* Счётчик непрочитанного: круглая пилюля с числом. */
.app-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: var(--r-pill);
    background: var(--c-primary-600);
    color: #fff;
    font-size: .78rem;
    font-weight: 600;
}

/* ══ Плашка-сообщение ════════════════════════════════════════════════════
   Цветная полоса с пояснением: пример, замечание, предупреждение, ошибка.
   Раньше это были .context-block, .ex, .note, .warn, .status-banner, .flash —
   шесть имён и семь наборов цветов, часть мимо палитры (#fffbeb вместо
   --c-warning-soft, #ef4444 вместо --c-danger).                               */
.app-note {
    background: var(--c-primary-50);
    border-left: 3px solid var(--c-primary-400);
    border-radius: var(--r-md);
    padding: .85rem 1.1rem;
    margin-bottom: 1.25rem;
    line-height: 1.6;
    color: var(--c-text);
}
.app-note.warn    { background: var(--c-warning-soft); border-left-color: var(--c-warning); }
.app-note.success { background: var(--c-success-soft); border-left-color: var(--c-success); }
.app-note.danger  { background: var(--c-danger-soft);  border-left-color: var(--c-danger); }
.app-note.plain   { background: var(--c-bg-soft);      border-left-color: var(--c-border-strong); }
.app-note > :last-child { margin-bottom: 0; }

/* ══ «Пусто» ═════════════════════════════════════════════════════════════ */
.app-empty-state,
.nt-empty, .ch-empty {
    background: var(--c-bg-soft);
    border: 1px dashed var(--c-border);
    border-radius: var(--r-lg);
    padding: 2rem;
    text-align: center;
    color: var(--c-text-muted);
}
.app-empty-state.compact { padding: 1rem; }

/* ══ Полоса выполнения ═══════════════════════════════════════════════════
   Было девять версий: высота 4, 6 и 8 пикселей, радиус 2, 3, 4 и 999,
   заливка то со скруглением, то без. Здесь одна.                             */
.app-bar {
    height: 8px;
    border-radius: var(--r-pill);
    background: var(--c-gray-200);
    overflow: hidden;
}
/* Заливка — ЛЮБОЙ вложенный элемент, а не только <i>. В шаблонах там div, span
   и i вперемешку, и требовать один тег значило бы править разметку ради
   селектора. Ширину ставит сам шаблон инлайном по проценту выполнения. */
.app-bar > * {
    display: block;
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: var(--c-primary-600);
    transition: width .3s ease;
}
.app-bar.done > * { background: var(--c-success); }
.app-bar.thin { height: 5px; }

/* ══ Плитка со счётчиком ═════════════════════════════════════════════════ */
.app-stat {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    padding: 1.25rem 1rem;
    text-align: center;
}
.app-stat .num { font-size: 1.5rem; font-weight: 700; line-height: 1.2; color: var(--c-text); }
.app-stat .lbl { font-size: .8rem; color: var(--c-text-muted); margin-top: .2rem; }
.app-stat.primary .num { color: var(--c-primary-700); }
.app-stat.success .num { color: var(--c-success); }
.app-stat.danger  .num { color: var(--c-danger); }

/* ══ Строка списка ═══════════════════════════════════════════════════════
   Ученик, урок, задача, переписка — всюду одна и та же строка: слева название,
   справа состояние, вся строка кликабельна.                                  */
.app-list {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    overflow: hidden;
}
.app-list .app-row + .app-row { border-top: 1px solid var(--c-border); }
.app-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .8rem 1rem;
    color: inherit;
    text-decoration: none;
}
a.app-row:hover { background: var(--c-bg-soft); color: inherit; }
.app-row .grow { flex: 1 1 auto; min-width: 0; }
.app-row .name { font-weight: 600; color: var(--c-text); }
.app-row .sub  { font-size: .82rem; color: var(--c-text-muted); }

/* ══ Просторная кнопка ═══════════════════════════════════════════════════
   НЕ новая кнопка, а РАЗМЕР для бутстраповской. Разница принципиальная: заводить
   свою .app-btn значило бы завести второй способ сделать главную кнопку — ровно
   то, от чего мы уходим.

   Зачем размер вообще. По сайту нашлось семь кнопок «главное действие» с одним
   и тем же фиолетовым фоном и белым текстом, но с шестью разными отступами
   (.35rem 1rem, .4rem 1rem, .6rem 1.2rem, .6rem 1.4rem, .65rem 1.4rem, 0 1.15rem)
   и пятью скруглениями. Все они просторнее бутстраповской (.375rem .75rem) —
   и правильно: это главное действие страницы, в него целятся пальцем. Bootstrap
   даёт .btn-lg, но тот заодно увеличивает кегль до 1.25rem, а нужен был только
   отступ.

   Пишется вместе с обычными классами: class="btn btn-primary app-lg".          */
.btn.app-lg {
    padding: .65rem 1.4rem;
    font-weight: 600;
}

/* ══ Крупная кнопка-призыв ═══════════════════════════════════════════════
   Главное действие экрана. Была «пилюлей» с фиолетовым переливом, тенью и
   подпрыгиванием под курсором — три приёма привлечения внимания сразу, хотя
   на экране она и так одна такая. Оставлен один: сплошной фирменный цвет.
   Форма теперь та же, что у остальных кнопок сайта, — разный только размер. */
.app-cta {
    display: inline-block;
    background: var(--c-primary-600);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: .8rem 1.8rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s ease;
}
.app-cta:hover { color: #fff; background: var(--c-primary-700); }
.app-cta.sm { padding: .5rem 1.15rem; font-size: .9rem; }

/* ══ Мобильная адаптация ═════════════════════════════════════════════════ */
@media (max-width: 640px) {
    .app-hero, .app-hero.compact,
    .form-hero, .teacher-hero, .student-hero, .workbook-hero, .workbook-form-hero,
    .sub-hero, .enroll-hero, .progress-page-hero, .practice-hero, .rep-hero {
        padding: 1rem 1.1rem;
    }
    .app-hero h1, .app-hero.compact h1,
    .form-hero h1, .teacher-hero h1, .student-hero h1, .workbook-hero h1,
    .workbook-form-hero h1, .sub-hero h1, .enroll-hero h1, .progress-page-hero h1,
    .practice-hero h1, .rep-hero h1 { font-size: 1.15rem; }
    .app-hero.large { padding: 1.1rem 1.2rem; }
    .app-hero.large h1 { font-size: 1.3rem; }
    .app-card, .app-section-card { padding: 1rem 1.1rem; }
    .app-form-card { padding: 1.1rem; }
    .app-cta { padding: .7rem 1.5rem; }
}

/* ══ Экранные окна вместо системных alert / confirm / prompt ══════════════
   Разметку строит static/js/ui_dialog.js. Системное окно браузера подписано
   «Сайт сообщает…», выглядит чужеродно и на телефоне занимает пол-экрана;
   ученик читает предупреждение браузера, а не текст.                        */

.ui-dialog-back {
    position: fixed;
    inset: 0;
    z-index: 4000;
    background: rgba(28, 23, 49, .38);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.ui-dialog {
    background: var(--c-surface);
    color: var(--c-text);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-lg);
    padding: 1.35rem 1.5rem;
    width: 100%;
    max-width: 440px;
}

.ui-dialog-title { font-weight: 600; font-size: 1.05rem; margin-bottom: .45rem; }
.ui-dialog-msg { white-space: pre-wrap; line-height: 1.5; color: var(--c-text-soft); }

.ui-dialog-input {
    width: 100%;
    margin-top: .9rem;
    border: 1px solid var(--c-border-strong);
    border-radius: var(--r-md);
    padding: .55rem .7rem;
    font: inherit;
    color: var(--c-text);
    background: var(--c-surface);
}
textarea.ui-dialog-input { min-height: 160px; resize: vertical; font-family: var(--font-mono); font-size: .85rem; }
.ui-dialog-input:focus { outline: none; border-color: var(--c-primary-600); box-shadow: 0 0 0 3px var(--c-primary-100); }

.ui-dialog-btns { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1.15rem; }
.ui-dialog-btn {
    border: 1px solid var(--c-border-strong);
    background: var(--c-surface);
    color: var(--c-text);
    border-radius: var(--r-md);
    padding: .5rem 1rem;
    font: inherit;
    cursor: pointer;
    min-height: 40px;
}
.ui-dialog-btn:hover { background: var(--c-bg-soft); }
.ui-dialog-btn.primary { background: var(--c-primary-600); border-color: var(--c-primary-600); color: #fff; }
.ui-dialog-btn.primary:hover { background: var(--c-primary-700); border-color: var(--c-primary-700); }
.ui-dialog-btn.primary.danger { background: var(--c-danger); border-color: var(--c-danger); }
.ui-dialog-btn.primary.danger:hover { filter: brightness(.93); }