:root {
    /* Clean Minimal palette (Linear-inspired) */
    --app-bg: #fafafa;
    --app-surface: #ffffff;
    /* Акцент ссылается на фирменную шкалу --primary-* (единый источник: Styles/app.css) */
    --app-accent: rgb(var(--primary-600));
    --app-accent-soft: rgb(var(--primary-600) / 0.08);
    --app-text: #1c1c1c;
    --app-muted: #8c8c8c;
    --app-border: #e8e8e8;
    --app-hover: rgba(0, 0, 0, 0.03);
    /* Заметный ховер интерактивных карточек-действий (План/Задания/История).
       --app-hover (3%) почти не виден; этот — сильнее и одинаков на всех трёх страницах. */
    --app-hover-strong: rgba(0, 0, 0, 0.06);
    --sidebar-bg: #fbfbfb;
    --app-container-max-width: 1080px;
    --page-body-width: 880px;
    --app-main-padding-top: 2.5rem;
    --app-main-padding-bottom: 3rem;
    /* Реальная мобильная шапка (лого/колокол 40px + паддинг контейнера 1rem + бордер
       1px = 57px; см. расчёт в Styles/app.css — именно тот файл выигрывает в каскаде,
       т.к. tailwind.css грузится последним). Держим тут то же значение на случай
       смены порядка. */
    --app-header-height: calc(40px + 1rem + 1px);
    /* Высота нижней навигации (мобилка): вкладка (иконка 24 + подпись 10 + gap 3 +
       паддинг 0.6rem) + паддинги панели 0.7rem + бордер 1px ≈ 59px; safe-area
       добавляется в местах использования отдельно. */
    --app-bottomnav-height: 59px;
    --radius-lg: 16px;
    --radius-md: 12px;
    --radius-sm: 8px;
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --sidebar-width: 240px;
}

/* Место под вертикальный скроллбар резервируется всегда: иначе при переключении
   вкладок/страниц с разной высотой контента полоса прокрутки появляется и
   исчезает, а центрированный контент дёргается по горизонтали. */
html {
    scrollbar-gutter: stable;
    /* Нижняя навигация (.app-bottomnav) фиксирована: запрещаем документу «резинить»
       за конец страницы — iOS Safari при overscroll утаскивает fixed/sticky панели
       вместе с отскоком, и меню уезжает к середине экрана с голым фоном под ним.
       Побочно на Android Chrome гаснет pull-to-refresh (его и так отключали в
       BottomSheet). iOS < 16 свойство не знает — там остаётся штатный отскок,
       его прикрывает подложка .app-bottomnav::after. */
    overscroll-behavior-y: none;
}

/* box-sizing:border-box — второй кусок базового сброса, пропавший вместе с Bootstrap
   Reboot (preflight у tailwind выключен). Без него всё считалось по content-box, и
   любая связка «width:100% + padding» вылезала за родителя ровно на свой padding:
   .container (width:100% + padding-inline:0.75rem) делал документ на 24px шире экрана
   — на мобиле появлялась горизонтальная прокрутка, карточки уезжали за правый край,
   а поле ввода ИИ-помощника (tw-w-full + tw-pl-14/tw-pr-[76px]) торчало из плашки.
   Весь UI написан на Tailwind, а его утилиты рассчитаны именно на border-box. */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* margin:0 — базовый сброс. Раньше его давал Bootstrap Reboot (снят на этапе 4),
   а tailwind собирается с preflight:false, поэтому остался дефолт браузера
   body{margin:8px}: sticky-шапка стартовала на 8px ниже верха и «прыгала» к нулю
   при скролле (чёрная полоска-зазор сверху и по бокам в тёмной теме), плюс
   min-height:100dvh + 16px вертикальных отступов давали странице лишние 16px
   прокрутки на пустом контенте. */
html body {
    margin: 0;
    background: var(--app-bg) !important;
    color: var(--app-text) !important;
    min-height: 100vh;
    min-height: 100dvh;
}

/* <FocusOnNavigate Selector="h1"> (App.razor) программно ставит фокус на первый
   заголовок при загрузке/навигации — браузер рисует фокус-обвод вокруг h1.
   Гасим только визуальный обвод: сам фокус остаётся (скринридеры/клавиатура
   по-прежнему попадают на заголовок). К h1 нельзя добраться через Tab
   (tabindex="-1"), поэтому это не вредит клавиатурной доступности. */
h1:focus {
    outline: none;
}

.app-shell {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

.app-header {
    backdrop-filter: blur(14px);
    background: color-mix(in srgb, var(--app-surface) 82%, transparent);
    border-bottom: 1px solid var(--app-border);
    position: sticky;
    top: 0;
    z-index: 1040;
}

/* Базовый .container — раньше приезжал из Bootstrap CDN (снят на этапе 4).
   Ширину капим фирменным токеном: шапка и контент выравниваются по одной сетке. */
.container {
    width: 100%;
    max-width: var(--app-container-max-width);
    margin-inline: auto;
    padding-inline: 0.75rem;
}

.app-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding-block: 1.2rem;
}

/* .header-bar, .header-content — layout migrated to Tailwind */
.app-header .header-content nav {
    flex: 1;
}

/* Floating upload button in media library */
.media-library-upload-fab {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    width: 3.25rem;
    height: 3.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #5b57d6;
    color: #fff;
    box-shadow: 0 10px 25px rgba(91, 87, 214, 0.25);
    cursor: pointer;
    z-index: 1030;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.media-library-upload-fab:hover,
.media-library-upload-fab:focus-visible,
.media-library-upload-fab:focus-within {
    box-shadow: 0 14px 28px rgba(91, 87, 214, 0.3);
    background: #4a45bd;
    outline: none;
}

.media-library-upload-fab__icon {
    font-size: 1.75rem;
    line-height: 1;
}

.media-library-upload-fab__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

@media (max-width: 576px) {
    .media-library-upload-fab {
        right: 1rem;
        bottom: 1rem;
        width: 3rem;
        height: 3rem;
    }

    .media-library-upload-fab__icon {
        font-size: 1.5rem;
    }
}

/* .header-auth, .auth-links — migrated to Tailwind */

.mobile-menu-toggle {
    border: none;
    background: transparent;
    z-index: 9999 !important;
    pointer-events: auto !important;
    min-width: 44px;
    min-height: 44px;
    display: flex; /* ← Центрирует иконку */
    align-items: center;
    justify-content: center;
}

/* Скрываем кнопку на десктопе (sidebar виден с 992px) */
@media (min-width: 992px) {
    .mobile-menu-toggle {
        display: none !important;
    }
}

.mobile-menu-toggle:hover,
.mobile-menu-toggle:focus-visible {
    background: rgba(91, 87, 214, 0.12);
    color: var(--app-accent);
}

.mobile-menu-icon,
.mobile-menu-icon::before,
.mobile-menu-icon::after {
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.mobile-menu-icon {
    position: relative;
}

.mobile-menu-icon::before,
.mobile-menu-icon::after {
    content: "";
    position: absolute;
    left: 0;
}

.mobile-menu-icon::before {
    transform: translateY(-6px);
}

.mobile-menu-icon::after {
    transform: translateY(6px);
}

.app-header.mobile-menu-open .mobile-menu-icon {
    background: transparent;
}

.app-header.mobile-menu-open .mobile-menu-icon::before {
    transform: translateY(6px) rotate(45deg);
}

.app-header.mobile-menu-open .mobile-menu-icon::after {
    transform: translateY(-6px) rotate(-45deg);
}

/* ============================================================== */
/* Плавающая мобильная шапка + быстрая навигация (вкладки).        */
/* Действует только < 992px — .app-header--mobile скрыта на        */
/* десктопе (там левый сайдбар).                                   */
/* ============================================================== */

/* Плоская шапка-плашка, прижатая к самому верху без зазоров. Фон/блюр/нижний
   бордер берём от базового .app-header (он sticky top:0) — никакой «плавающей»
   карточки со скруглением и тенью, как было раньше. */
.app-header--mobile .container {
    padding-block: 0.4rem;
    padding-inline: 0.6rem;
}

/* Развёрнутое меню «Ещё» (на весь экран) — фон поплотнее, иначе список
   читается поверх прокручиваемого контента. */
.app-header--mobile.mobile-menu-open {
    background: color-mix(in srgb, var(--app-surface) 97%, transparent);
}

.app-header--mobile .header-bar {
    gap: 0.25rem;
    /* Все элементы (логотип, вкладки, «Ещё») — равноудалённые: одинаковые
       промежутки между соседями. Достигается уплощением вложенных оболочек ниже
       (display:contents), чтобы они стали прямыми флекс-детьми этого ряда. */
    justify-content: space-between;
}

/* Быстрая навигация переехала из верхней шапки в нижнюю панель (.app-bottomnav,
   см. ниже). Вкладки переиспользуют классы .mobile-quicknav__* — стили ниже общие. */

/* Колокол уведомлений в мобильной верхней шапке (справа от логотипа). */
.topbar-bell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--app-muted);
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.topbar-bell:hover,
.topbar-bell:focus-visible {
    color: var(--app-text);
    background: var(--app-hover);
    outline: none;
}

.topbar-bell__badge {
    position: absolute;
    top: 2px;
    right: -2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #22c55e;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 0 0 2px var(--app-surface);
}

.mobile-quicknav__item,
.mobile-more-toggle {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    /* Одинаковый размер всех пунктов: равный flex-базис (при нехватке места все
       сжимаются одинаково — базис и коэффициент сжатия общие), метка при этом
        обрезается многоточием. Базис/боковой паддинг подобраны так, чтобы пять
        пунктов после логотипа помещались на 360px-экране. Длинные метки могут
        переноситься на две строки. Вертикальный паддинг не трогаем — от него
        посчитана --app-header-height (см. Styles/app.css). */
    flex: 1 1 0;
    max-width: 4rem;
    min-width: 0;
    padding: 0.15rem 0.1rem;
    border-radius: 12px;
    text-decoration: none;
    color: var(--app-muted);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.mobile-quicknav__item:hover,
.mobile-more-toggle:hover {
    color: var(--app-text);
    background: var(--app-hover);
}

/* Активная вкладка — брендовый акцент: мягкая подложка + короткое акцентное
   подчёркивание у самой нижней кромки шапки (паддинг контейнера 0.4rem).
   .mobile-more-toggle.active — кнопка «Ещё», когда текущая страница живёт внутри
   меню (Настроение, Динамика, Настройки, …): других сигналов «где я» в шапке нет;
   подпись кнопки при этом показывает имя страницы (CurrentMorePageLabel). */
.mobile-quicknav__item.active,
.mobile-more-toggle.active {
    color: var(--app-accent);
    background: var(--app-accent-soft);
}

.mobile-quicknav__item.active::after,
.mobile-more-toggle.active::after {
    content: "";
    position: absolute;
    bottom: -0.4rem;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 3px;
    border-radius: 999px;
    background: var(--app-accent);
}

.mobile-quicknav__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.mobile-quicknav__label {
    font-size: 10px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-quicknav__label--wrap {
    line-height: 1.05;
    max-height: 2.1em;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Вкладка «Помощник» больше не подменяется кольцом бюджета: общий ИИ-бюджет
   показывается только виджетом UsageWidget в глобальной шапке. */

/* Кнопка «Ещё» = бургер с подписью и зелёной пимпочкой при непрочитанных.
   Размер общий со вкладками quicknav (flex-базис выше); минимальную тап-зону
   44px даёт базовый .mobile-menu-toggle. */

.mobile-more-toggle__glyph {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.mobile-more-toggle__dot {
    position: absolute;
    top: -1px;
    right: -6px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 2px var(--app-surface);
}

/* ============================================================== */
/* Нижняя навигация (мобилка, < 992px): классические вкладки внизу */
/* экрана — План / Задания / История / Ещё. Рендерится ВНЕ шапки   */
/* (MainLayoutHeader, после </header>): backdrop-filter шапки —    */
/* containing block для position:fixed. ИИ-помощника среди вкладок */
/* нет — он плавающей кнопкой (AiAssistantWidget) над панелью.     */
/* ============================================================== */

.app-bottomnav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1040; /* вровень с шапкой; панели/листы (1055+) открываются поверх */
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    gap: 0.25rem;
    padding: 0.35rem 0.75rem calc(0.35rem + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--app-surface) 92%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--app-border);
}

/* Подложка под панелью: в обычном состоянии целиком за нижней кромкой экрана и
   не видна. Если iOS всё же протащит панель вверх (rubber-band на iOS < 16 без
   overscroll-behavior, баг fixed-элементов iOS 26), под ней покажется её же
   поверхность, а не голый фон страницы. */
.app-bottomnav::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 50vh;
    background: var(--app-surface);
}

/* Вкладки чуть шире, чем в старой верхней шапке — внизу места больше. */
.app-bottomnav .mobile-quicknav__item {
    max-width: 6rem;
    padding: 0.3rem 0.2rem;
}

/* Акцентная чёрточка активной вкладки: в нижней панели — у ВЕРХНЕЙ кромки
   (базовое правило рисует её снизу, под вкладкой верхней шапки). */
.app-bottomnav .mobile-quicknav__item.active::after {
    top: -0.35rem;
    bottom: auto;
}

/* ============================================================== */
/* Лист меню «Ещё» (мобилка) — дизайн Claude: «Меню» + закрыть,    */
/* плитки (На главную / Уведомления), разделы иконками, активный   */
/* пункт акцентом. Действует < 992px (.app-header--mobile).        */
/* ============================================================== */

/* Открытое меню «Ещё»: верхний бар ОСТАЁТСЯ на месте, меню выпадает ПОД ним и
   скроллится. overflow:visible — чтобы fixed-панель уведомлений не обрезалась
   (шапка с backdrop-filter иначе клипает потомков). Закрывается той же «Ещё». */
.app-header--mobile.mobile-menu-open { overflow: visible; }
/* box-sizing:border-box + gap:0 — иначе остаточный padding-top (content-box) даёт
   фикс-шапке ~6px собственного скролла, а gap из медиазапроса — лишний зазор бар↔меню. */
.app-header--mobile.mobile-menu-open .container { height: 100%; padding-bottom: 0; gap: 0; box-sizing: border-box; }
.app-header--mobile.mobile-menu-open .header-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    width: 100%;
    padding: 0;
    gap: 0;
    margin-top: 0.45rem;
    border-top: 1px solid var(--app-border);
    overflow: hidden;
    /* Базовое правило шапки даёт align-items:flex-start → .mm-scroll сжимался до
       ширины контента и оставлял зазор справа. Тянем на всю ширину. */
    align-items: stretch;
}

.mm-scroll {
    flex: 1;
    min-height: 0;
    width: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0 0.85rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
}
.mm-scroll::-webkit-scrollbar { width: 0; }

/* Плитки: уведомления / бюджет. */
.mm-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; margin-bottom: 0.25rem; }
/* Одна плитка (у не-родителей нет бюджета) — тянем на всю ширину, чтобы не висела в полколонки. */
.mm-tiles--single { grid-template-columns: 1fr; }
/* Компактный переключатель темы — тонкой полосой сразу под плитками (перенесён снизу меню). */
.mm-theme-compact { margin: 0.15rem 0 0.35rem; }
.mm-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.45rem;
    padding: 0.8rem 0.7rem;
    border-radius: 16px;
    background: var(--app-surface-alt);
    border: none;
    cursor: pointer;
    text-align: left;
    text-decoration: none;
    transition: background-color 0.15s ease;
    min-width: 0;
    min-height: 102px;
}
.mm-tile:hover { background: var(--app-hover); }
.mm-tile__icon,
.mm-tile__visual {
    position: relative;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
}
.mm-tile__icon { color: var(--app-muted); }
.mm-tile__icon svg { width: 23px; height: 23px; }
.mm-tile__label {
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--app-text);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mm-tile__chev {
    position: absolute; top: 0.8rem; right: 0.7rem;
    width: 20px; height: 20px; color: var(--app-muted); opacity: 0.7;
    transition: transform 0.18s ease;
}
.mm-tile--open .mm-tile__chev { transform: rotate(180deg); }
/* Счётчик непрочитанных сидит на самом колокольчике (иконка = .mm-tile__icon,
   position:relative), а не в углу плитки. Зелёный в тон пимпочке на «Ещё»
   (.mobile-more-toggle__dot, #22c55e); кольцо цвета плитки отбивает пузырёк
   от штрихов иконки. */
.mm-tile__badge {
    position: absolute; top: -5px; right: -4px;
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
    background: #22c55e; color: #fff;
    font-size: 10.5px; font-weight: 700; line-height: 18px; text-align: center;
    box-shadow: 0 0 0 2px var(--app-surface-alt);
}
.mm-tile:hover .mm-tile__badge { box-shadow: 0 0 0 2px var(--app-hover); }
/* Плитка ИИ-бюджета в меню «Ещё»: в трёхколоночной сетке ведёт себя как остальные плитки. */
.mm-tile--budget { align-items: flex-start; gap: 0.45rem; }
.mm-tile__budget-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; max-width: 100%; }
.mm-tile__budget-hours { font-size: 0.8rem; font-weight: 600; line-height: 1.1; white-space: nowrap; }

/* Индетерминантный «прогресс» для долгих фоновых стадий (обработка видео / анализ).
   Честный индикатор «что-то двигается» — бегущая полоса, без фейкового процента.
   Бесконечная анимация → переживает перерисовки при поллинге плана. */
.ml-rough-progress {
    position: relative;
    height: 4px;
    border-radius: 999px;
    background: var(--app-surface-alt);
    overflow: hidden;
}
.ml-rough-progress__fill {
    position: absolute;
    top: 0;
    height: 100%;
    width: 40%;
    border-radius: 999px;
    background: var(--app-accent);
    animation: ml-rough-progress-slide 1.4s ease-in-out infinite;
}
@keyframes ml-rough-progress-slide {
    0%   { left: -42%; }
    100% { left: 100%; }
}

/* Подменю «На главную» */
.mm-subcard {
    display: flex; flex-direction: column; gap: 2px;
    margin: 0.5rem 0 0.15rem; padding: 6px;
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: 16px;
    box-shadow: 0 16px 34px -18px rgba(28, 30, 42, 0.24);
}
.mm-subrow {
    display: flex; align-items: flex-start; gap: 0.8rem;
    padding: 0.7rem 0.75rem; border-radius: 12px;
    text-decoration: none; transition: background-color 0.15s ease;
}
.mm-subrow:hover { background: var(--app-surface-alt); }
.mm-subrow__icon { color: var(--app-muted); margin-top: 1px; display: inline-flex; flex: 0 0 auto; }
.mm-subrow__icon--accent { color: var(--app-accent); }
.mm-subrow__icon svg { width: 22px; height: 22px; }
.mm-subrow__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mm-subrow__title { font-size: 0.9rem; font-weight: 700; color: var(--app-text); }
.mm-subrow__sub { font-size: 0.78rem; color: var(--app-muted); }

/* Заголовок раздела — тихая метка-разделитель. Раньше был bold (700) и из-за этого
   читался как «важный пункт» и сливался со ссылками. Теперь легче по начертанию и
   с бо́льшей разрядкой — читается как категория, а не как пункт меню. */
.mm-section {
    font-size: 0.68rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--app-muted); padding: 0.9rem 0.5rem 0.35rem;
}
/* Тонкая линия перед разделом отделяет группу от предыдущей → проще ориентироваться.
   Линия появляется ТОЛЬКО перед разделом, над которым уже есть пункты (селектор
   требует предыдущего .mm-row), поэтому у самого первого раздела линии нет. */
.mm-row + .mm-section {
    margin-top: 0.4rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--app-border);
}

/* Строка пункта (компонент MobileMenuRow) */
.mm-row {
    display: flex; align-items: center; gap: 0.85rem;
    padding: 0.78rem 0.75rem; border-radius: 15px;
    text-decoration: none; color: var(--app-text-secondary);
    font-size: 0.95rem; font-weight: 500; letter-spacing: -0.01em;
    transition: background-color 0.15s ease, color 0.15s ease;
}
/* Ховер должен быть виден: --app-surface-alt (#f9fafb) почти совпадал с фоном
   сайдбара (#fbfbfb) → эффекта наведения не было. --app-hover-strong заметен и в
   светлой, и в тёмной теме. */
.mm-row:hover { background: var(--app-hover-strong); }
.mm-row__icon { flex: 0 0 auto; display: inline-flex; color: var(--app-muted); }
.mm-row__icon svg { width: 23px; height: 23px; }
.mm-row__label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-row__chev { flex: 0 0 auto; width: 20px; height: 20px; color: var(--app-border); }

.mm-row--active {
    background: color-mix(in srgb, var(--app-accent) 12%, transparent);
    color: var(--app-accent);
    font-weight: 700;
}
.mm-row--active .mm-row__icon,
.mm-row--active .mm-row__chev { color: var(--app-accent); }
/* Ховер активного пункта: не гасим акцент в нейтральный серый, а чуть усиливаем его
   (иначе .mm-row:hover перекрыл бы акцентную заливку активного пункта). */
.mm-row--active:hover { background: color-mix(in srgb, var(--app-accent) 16%, transparent); }

/* Аккаунт: переключатель темы + кнопка выхода */
.mm-account-extras { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.6rem 0.25rem 0; }
/* LogoutButton стилизуется только внутри .profile-menu — в листе меню он вне её,
   поэтому даём собственный вид: полноширинная строка-«Выйти» в стиле пунктов меню. */
.mm-account-extras .logout-form { width: 100%; margin: 0; }
.mm-account-extras .mm-logout {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.78rem 0.75rem;
    border-radius: 15px;
    background: transparent;
    color: #dc2626;
    font-size: 0.95rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.mm-account-extras .mm-logout:hover { background: color-mix(in srgb, #dc2626 9%, transparent); }
html.dark .mm-account-extras .mm-logout { color: #f87171; }

/* Панель уведомлений, открытая из плитки в меню — аккуратный дропдаун ПОД баром
   во всю ширину (перебиваем фикс. tw-w-[380px], иначе блок выглядел обрезанным). */
.app-header--mobile.mobile-menu-open .notification-panel {
    top: 3.8rem;
    left: 0.6rem;
    right: 0.6rem;
    bottom: auto;
    width: auto;
    max-width: none;
    max-height: calc(100dvh - 5.5rem);
}

/* Десктопный сайдбар использует ТЕ ЖЕ строки/иконки/разделы (общий RenderNavBody +
   .mm-row), но плотнее под колонку 240px и без шеврона-«вглубь». */
.app-sidebar .mm-row {
    font-size: 0.875rem;
    padding: 0.5rem 0.65rem;
    gap: 0.7rem;
    border-radius: 10px;
}
.app-sidebar .mm-row__icon svg { width: 20px; height: 20px; }
.app-sidebar .mm-row__chev { display: none; }
.app-sidebar .mm-section { padding: 1rem 0.65rem 0.35rem; }

/* ── Бейдж «План» (число заданий на сегодня) + анимация «улёта в план» ───────────
   Бейдж рисуется у пункта «План» в сайдбаре (строка .mm-row) и в мобильном quicknav
   (кружком в углу иконки). «Снаряд» .plan-fly-ghost летит от кнопки «В план» к цели.
   Логика — /js/plan-fly.js. */
.nav-plan-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    box-sizing: border-box;
    border-radius: 999px;
    background: var(--app-accent);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
}
/* Никакой постоянной анимации на базовом правиле: иначе после снятия «поп»-класса
   animation-name вернулся бы к intro и тот переигрывался бы «вырастанием из нуля» после
   каждого «попа» (видимый глитч). Появление на добавлении отыгрывает «поп» из plan-fly.js;
   при обычной загрузке страницы бейдж просто отрисовывается. */
/* Мобильный quicknav: маленький кружок в правом-верхнем углу иконки «План». */
.mobile-quicknav__icon { position: relative; }
.nav-plan-badge--dot {
    position: absolute;
    top: -6px;
    right: -9px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 0.62rem;
    border: 2px solid var(--app-surface);
}

@keyframes navPlanBadgePop {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.55); }
    70%  { transform: scale(0.86); }
    100% { transform: scale(1); }
}
.nav-plan-badge--pop { animation: navPlanBadgePop 0.5s ease; }

/* Летящий «снаряд» от кнопки «В план» к пункту «План». Цвет — sky-500 под кнопку-источник. */
.plan-fly-ghost {
    position: fixed;
    z-index: 4000;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #0ea5e9;
    color: #fff;
    font-size: 15px;
    pointer-events: none;
    box-shadow: 0 8px 20px rgba(14, 165, 233, 0.4);
    will-change: transform, opacity;
    transition: transform 0.6s cubic-bezier(0.5, -0.2, 0.3, 1.1), opacity 0.6s ease;
}

@media (prefers-reduced-motion: reduce) {
    .nav-plan-badge--pop { animation: none; }
    .plan-fly-ghost { transition: none; }
}

.brand-title {
    margin: 0;
}

.brand-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--app-text);
    text-decoration: none;
    text-transform: none;
    transition: transform 0.25s ease;
}

/* Подъём убран: логотип уезжал из-под курсора у нижней кромки и курсор мигал
   «палец ↔ стрелка». Наведение — лёгким осветлением. */
.brand-logo:focus-visible,
.brand-logo:hover {
    opacity: 0.85;
}

.brand-logo-image {
    display: block;
    height: 3.5rem;
}

.brand-logo .logo-word {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    font-size: 1.1rem;
    line-height: 1;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12);
}

.brand-logo .logo-word-primary {
    background: linear-gradient(135deg, #f8fafc, #e2e8f0);
    color: #1f2937;
    border: 1px solid rgba(148, 163, 184, 0.35);
}

.brand-logo .logo-word-secondary {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #f8fafc;
    border: 1px solid rgba(30, 64, 175, 0.35);
}

@media (max-width: 480px) {
    :root {
        /*
         * Шапка на телефоне не становится ниже: лого = tw-h-10 (40px), вкладки
         * quicknav/«Ещё» остаются на месте. Высота та же, что и в базовом значении
         * (≈57px), поэтому держим тот же calc, а не старый завышенный 2.4rem+2.5rem
         * (он опирался на отступы контейнера 2*1.2rem, которых давно нет — реальный
         * .app-header--mobile .container имеет padding-block 0.4rem).
         */
        --app-header-height: calc(38px + 1.2rem);
    }

    .brand-logo {
        font-size: 1.3rem;
        gap: 0.3rem;
    }

    .brand-logo-image {
        height: 2.5rem;
    }

    .brand-logo .logo-word {
        padding: 0.25rem 0.65rem;
        font-size: 0.95rem;
    }
}

/* .nav-links — layout migrated to Tailwind */

.nav-links a,
.nav-links button {
    border: none;
    background: transparent;
    color: var(--app-muted);
    font-weight: 500;
    transition: color 0.2s ease, background 0.2s ease;
    padding: 0.4rem 0.75rem;
    border-radius: var(--radius-sm);
    text-decoration: none;
}

.nav-links a:hover,
.nav-links button:hover,
.nav-links a.active {
    color: var(--app-accent);
    background: var(--app-accent-soft);
}

/* .nav-section-label — migrated to Tailwind */
.nav-section-label {
    display: none;
}

.profile-dropdown {
    position: relative;
}

.profile-overlay {
    position: fixed;
    /* Explicit viewport size, not inset:0 — the menu's .app-header ancestor has a
       backdrop-filter, which makes it the containing block for position:fixed. With
       inset:0 this overlay would only cover the header; 100vw/100dvh from its top-left
       (the header sits at viewport top) covers the whole screen so taps anywhere close
       the menu. */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    z-index: 999;
}

.profile-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 50%;
    transition: box-shadow 0.15s ease;
}

.profile-toggle:hover,
.profile-toggle:focus {
    box-shadow: 0 0 0 3px rgba(91, 87, 214, 0.2);
    outline: none;
}

/* Аватар облегчён: мягкая акцентная заливка вместо сплошного градиента — по
   визуальному весу вровень с остальными пунктами шапки. color-mix от --app-accent
   работает в обеих темах. */
.profile-toggle .avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--app-accent) 12%, var(--app-surface));
    color: var(--app-accent);
    border: 1px solid color-mix(in srgb, var(--app-accent) 25%, transparent);
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 0.875rem;
}

.profile-menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    min-width: 220px;
    background: var(--app-surface);
    border-radius: var(--radius-md);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    border: 1px solid var(--app-border);
    padding: 0.5rem 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
    z-index: 1000;
}

.profile-dropdown.open .profile-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.profile-menu-header {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.profile-name {
    font-weight: 600;
    color: var(--app-text);
    font-size: 0.9rem;
}

.profile-email {
    color: var(--app-muted);
    font-size: 0.8rem;
    /* Длинная почта (напр. seed-…@seed.mishalive.local) без пробелов иначе
       распирала меню по ширине и уводила его за край экрана — переносим её. */
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* ============================================================== */
/* Карточки каналов уведомлений + iOS-тумблер                      */
/* (модалка участника команды — TeamMemberConfigModal).           */
/* ============================================================== */
.channel-toggle-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 0.5rem;
    border: 1px solid var(--app-border);
    border-radius: 14px;
    background: var(--app-surface);
    min-width: 0;
}

.channel-toggle-card__label {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--app-text);
    text-align: center;
    line-height: 1.1;
    white-space: nowrap;
}

/* Telegram-карточка, когда не подключён: пунктир + «подключите», без тумблера. */
.channel-toggle-card--disabled {
    border-style: dashed;
    background: transparent;
}

.channel-toggle-card--disabled .channel-toggle-card__label {
    color: var(--app-muted);
}

.channel-toggle-card__hint {
    font-size: 0.72rem;
    color: var(--app-muted);
    line-height: 1;
}

.ui-switch {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    width: 44px;
    height: 26px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: var(--app-border);
    cursor: pointer;
    transition: background-color 0.18s ease;
}

.ui-switch__knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition: transform 0.18s ease;
}

.ui-switch--on {
    background: #2563eb;
}

.ui-switch--on .ui-switch__knob {
    transform: translateX(18px);
}

/* Частично включён (часть событий канала) — трек светло-синий, кнопка посередине. */
.ui-switch--partial {
    background: #93c5fd;
}

.ui-switch--partial .ui-switch__knob {
    transform: translateX(9px);
}

.profile-menu-item {
    display: block;
    padding: 0.625rem 1rem;
    color: var(--app-text);
    text-decoration: none;
    font-size: 0.875rem;
    transition: background 0.1s ease;
}

.profile-menu-item:hover {
    background: rgba(91, 87, 214, 0.06);
    color: var(--app-accent);
}

.profile-menu-divider {
    height: 1px;
    background: rgba(0, 0, 0, 0.06);
    margin: 0.375rem 0;
}

.profile-menu .logout-form {
    display: block;
    margin: 0;
}

.profile-menu .logout-btn {
    width: 100%;
    text-align: left;
    padding: 0.625rem 1rem;
    border: none;
    background: transparent;
    color: var(--app-text);
    font-size: 0.875rem;
    cursor: pointer;
    transition: background 0.1s ease;
}

.profile-menu .logout-btn:hover {
    background: rgba(239, 68, 68, 0.08);
    color: #dc2626;
}

.app-main {
    flex: 1;
}



.app-main .container {
    max-width: var(--app-container-max-width);
}

/* === Единая ширина тела страницы (десктоп) ===
   «Задания» (.ab-split-layout) и «План» (.plan-page-body) ограничивают тело
   страницы до 880px и центрируют его на десктопе (≥992px), оставаясь во всю
   ширину на мобиле. Тот же класс переиспользуем на остальных разделах
   (ИИ-помощник, Память, Заметки, Справка, Настройки, Подписка, Тарифы), чтобы
   ширина контента совпадала на всех страницах. Значение 880px и брейкпоинт 992px
   намеренно совпадают с .plan-page-body / .ab-split-layout. */
@media (min-width: 992px) {
    .page-body-width {
        width: 100%;
        max-width: var(--page-body-width, 880px);
        margin-inline: auto;
    }
}

/* Справка (/help) намеренно живёт в обычном центрированном контейнере (как
   остальные страницы): раньше тут был full-width-оверрайд, из-за которого
   широкая лавандовая панель «плавала» в тёмном фоне приложения с полосками по
   краям. Теперь панель бесшовная с фоном (см. help.css → @media min-width:821px),
   поэтому особая ширина не нужна. */

/* Горизонтальная лента «подсказок бота» на дашборде — прячем скроллбар, лента остаётся свайпаемой. */
.bot-hints-scroll {
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
}

.bot-hints-scroll::-webkit-scrollbar {
    display: none;
}

.bot-hints-scroll > a {
    scroll-snap-align: start;
}

/* Ответы FAQ на /help (markdown → HTML) — компактные отступы вместо дефолтных Bootstrap. */
.help-answer p { margin: 0 0 0.5rem; }
.help-answer p:last-child { margin-bottom: 0; }
.help-answer ul,
.help-answer ol { margin: 0.25rem 0 0.5rem; padding-left: 1.25rem; }
.help-answer li { margin: 0.15rem 0; }

body.media-library-tight-header {
    --app-main-padding-top: 0;
    --app-main-padding-bottom: 0;
}

body.media-library-tight-header .app-main {
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
}

body.media-library-tight-header .app-main .container {
    max-width: none;
    width: 100%;
    padding-inline: 0;
}

/* Full width container for media library page on desktop */
@media (min-width: 992px) {
    .app-main .container:has(.media-library-page) {
        max-width: none;
        padding-inline: 0;
    }
}

/* ============================================================ */
/* TaskMaterials: «мастерская материалов» — обычный скролл       */
/* ============================================================ */
/* Чат страницы переехал в панель ИИ-виджета, страница стала обычной
   скроллируемой мастерской (превью липкое через sticky в разметке).
   Прежний полноэкранный режим (height:100dvh + overflow:hidden с
   внутренним скроллом чата) удалён: на десктопе над .app-main стоит
   шапка, 100dvh вылезал за вьюпорт и прокрутка «умирала». Осталась
   только широкая рабочая область на десктопе. */
@media (min-width: 992px) {
    .app-main .container:has(.task-materials-page) {
        max-width: none;
    }
}

/* Десктопная мастерская целиком помещается во вьюпорт: превью, лента версий и
   кнопки под ним («В задании» / «Скачать» / «Распечатать») видны без прокрутки,
   а скроллятся только плитки материалов внутри своей панели.
   Раньше панели сами мерили высоту как 100dvh − шапка и при этом стояли в потоке
   ПОД шапкой страницы (кнопка «назад» + заголовок ≈ 52px) — ровно на эту высоту
   низ панели и уезжал за экран. Теперь высоту один раз задаёт страница
   (0.5rem — зазор над контентом, 1rem — воздух снизу), а колонки её делят.
   Брейкпоинт ровно как у Tailwind-класса lg: — двухколоночная раскладка. */
@media (min-width: 1024px) {
    .task-materials-page {
        height: calc(100dvh - var(--app-header-height, 56px) - 1.5rem);
    }

    .task-materials-page .tm-workspace {
        flex: 1;
        min-height: 0;
    }

    /* Полотно превью сжимается внутри высоты панели: изображение с object-contain
       остаётся целиком видно, а действия под ним не уезжают за экран. */
    .task-materials-page .tm-preview-canvas {
        min-height: 0;
    }

    /* Галерея материалов слева — во всю высоту рабочей области: рядом с высоким
       превью короткая карточка выглядела обрубком, а плиткам не хватало места. */
    .task-materials-page .tm-materials-tall {
        min-height: 0;
    }
}

/* В широкой раскладке открытый компактный ИИ-чат занимает отдельную правую зону,
   поэтому мастерская остаётся слева и галерея материалов не оказывается под панелью. */
@media (min-width: 1280px) {
    body:has(.task-materials-page):has(.aiw-panel--open:not(.aiw-panel--expanded)) .task-materials-page {
        max-width: calc(100% - 468px);
        margin-left: 0;
        margin-right: auto;
    }
}

.app-footer {
    padding: 1rem 0 2rem;
    text-align: center;
    color: var(--app-muted);
    font-size: 0.875rem;
}

.dashboard-hero {
    background: linear-gradient(135deg, rgba(91, 87, 214, 0.12), rgba(16, 185, 129, 0.12));
    border-radius: var(--radius-lg);
    padding: clamp(1.8rem, 4vw, 2.6rem);
    margin-bottom: 2rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 28px 60px rgba(91, 87, 214, 0.12);
}

.dashboard-hero h1 {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.dashboard-hero p {
    color: var(--app-muted);
    margin-bottom: 0.5rem;
}

.dashboard-hero .cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.4rem;
    border-radius: 999px;
    background: var(--app-accent);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.dashboard-hero .cta-btn:hover {
    background: color-mix(in srgb, var(--app-accent) 88%, #000);
}

.dashboard-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-sm);
    background: var(--app-accent-soft);
    border: 1px solid color-mix(in srgb, var(--app-accent) 22%, transparent);
    color: var(--app-accent);
    font-weight: 600;
    text-decoration: none;
    letter-spacing: 0.01em;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.dashboard-action-btn::after {
    content: "→";
    font-size: 1rem;
    transition: transform 0.2s ease;
}

.dashboard-action-btn:hover,
.dashboard-action-btn:focus-visible {
    background: var(--app-accent);
    border-color: var(--app-accent);
    color: #fff;
    text-decoration: none;
}

.dashboard-action-btn:focus-visible {
    outline: 3px solid rgba(139, 132, 227, 0.35);
    outline-offset: 2px;
}

.dashboard-action-btn:hover::after,
.dashboard-action-btn:focus-visible::after {
    transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
    .dashboard-action-btn,
    .dashboard-action-btn::after {
        transition: none;
    }
}

.card-grid {
    display: grid;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.card-surface {
    background: var(--app-surface);
    border-radius: var(--radius-lg);
    padding: 0.5rem;
    box-shadow: 0 24px 50px rgba(15, 23, 42, 0.06);
    border: 1px solid rgba(148, 163, 184, 0.18);
}

.section-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.student-card {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.student-card-visual {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.student-mood-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 92px;
    padding: 0.35rem 0.65rem;
    border-radius: var(--radius-md);
    border: 1px solid rgba(91, 87, 214, 0.12);
    background: rgba(91, 87, 214, 0.06);
}

.student-mood-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--app-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.student-mood-emoji {
    font-size: 2.35rem;
    line-height: 1.1;
}

.student-card h2 {
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.student-card .student-card-info {
    flex: 1;
}

.student-photo-circle {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    border: 2px solid rgba(91, 87, 214, 0.18);
    background: rgba(91, 87, 214, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.student-photo-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.student-photo-circle span {
    font-size: 2.5rem;
    font-weight: 600;
    color: var(--app-accent);
}

.student-photo-circle--sm {
    width: 88px;
    height: 88px;
    border-width: 1px;
}

.student-photo-circle--sm span {
    font-size: 1.75rem;
}

.student-photo-panel {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: stretch;
    margin-bottom: 1.5rem;
}

.student-photo-panel .student-photo-circle {
    align-self: center;
}

.student-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1rem;
    color: var(--app-muted);
    font-weight: 500;
}

.team-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    align-items: center;
    padding: 1rem;
    border-radius: var(--radius-md);
    border: 1px solid rgba(91, 87, 214, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.team-item:hover {
    box-shadow: 0 18px 35px rgba(15, 23, 42, 0.08);
}

.team-item .avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-color: rgba(91, 87, 214, 0.1);
    display: grid;
    place-items: center;
    font-weight: 600;
    color: var(--app-accent);
}

.team-item .team-name {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.team-item .team-role {
    color: var(--app-accent);
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.team-item .team-bio {
    color: var(--app-muted);
    font-size: 0.95rem;
    margin-bottom: 0.75rem;
}

.team-item .team-contact {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    font-size: 0.92rem;
    color: var(--app-muted);
}

.settings-inline-link {
    margin-top: 0.35rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--app-accent);
    text-decoration: none;
}

.settings-inline-link:hover {
    text-decoration: underline;
}

.settings-links-grid {
    display: grid;
    gap: 1rem;
}

.settings-link-card {
    display: block;
    padding: 1rem 1.25rem;
    border-radius: var(--radius-md);
    border: 1px solid rgba(148, 163, 184, 0.24);
    background: rgba(248, 250, 252, 0.65);
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.settings-link-card:hover {
    border-color: rgba(91, 87, 214, 0.35);
    box-shadow: 0 16px 30px rgba(15, 23, 42, 0.08);
}

.settings-link-card.disabled {
    pointer-events: none;
    opacity: 0.6;
    background: rgba(248, 250, 252, 0.35);
}

.settings-link-title {
    font-weight: 600;
    font-size: 1rem;
}

.settings-link-description {
    font-size: 0.92rem;
    color: var(--app-muted);
}

.student-subnav {
    display: flex;
    gap: 1rem;
    padding-bottom: 0.75rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}

.student-subnav__link {
    font-weight: 600;
    color: var(--app-muted);
    text-decoration: none;
    padding-bottom: 0.35rem;
    border-bottom: 2px solid transparent;
}

.student-subnav__link:hover {
    color: var(--app-accent);
}

.student-subnav__link.active {
    color: var(--app-accent);
    border-bottom-color: var(--app-accent);
}

.student-label {
    display: block;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    color: var(--app-muted);
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.student-subtitle {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.student-rich-text p {
    margin-bottom: 0.75rem;
}

.preference-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.preference-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.6rem;
    border-radius: 999px;
    background-color: rgba(91, 87, 214, 0.08);
    color: var(--app-accent);
    font-weight: 600;
    font-size: 0.9rem;
}

.preference-chip__score {
    font-size: 0.75rem;
    color: rgba(15, 23, 42, 0.65);
}

.preference-chip__score.negative {
    color: #dc3545;
}

.preference-summary {
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: var(--radius-md);
    padding: 1rem;
    background: rgba(15, 23, 42, 0.02);
}

.preference-summary__value {
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1;
}

.preference-table thead th {
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    color: var(--app-muted);
    border-bottom-width: 1px;
}

.preference-table tbody td {
    vertical-align: middle;
}

.restriction-list__item {
    padding: 0.85rem 1rem;
    border-radius: var(--radius-md);
    border: 1px solid rgba(91, 87, 214, 0.08);
    background: rgba(91, 87, 214, 0.03);
    margin-bottom: 0.75rem;
}

.restriction-list__title {
    font-weight: 600;
    margin-bottom: 0.2rem;
}

.restriction-list__meta {
    font-size: 0.85rem;
    color: var(--app-muted);
}

.restriction-list__notes {
    margin-top: 0.5rem;
    font-size: 0.9rem;
}

.plan-card {
    overflow: hidden;
}

.plan-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.plan-items {
    display: grid;
    gap: 0.9rem;
}

.plan-item {
    border-radius: var(--radius-md);
    padding: 1rem;
    border: 1px solid rgba(148, 163, 184, 0.2);
    display: grid;
    gap: 0.35rem;
    background: color-mix(in srgb, var(--app-surface) 70%, transparent);
}

.plan-item .badge {
    background: rgba(91, 87, 214, 0.12);
    color: var(--app-accent);
    font-weight: 600;
    border-radius: 999px;
    padding: 0.25rem 0.75rem;
}

.status-muted {
    color: var(--app-muted);
    font-size: 0.9rem;
}

.empty-state {
    text-align: center;
    padding: 3rem 1.5rem;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, rgba(15, 118, 110, 0.12), rgba(56, 189, 248, 0.12));
    border: 1px dashed rgba(45, 212, 191, 0.3);
}

.login-wrapper {
    min-height: calc(100vh - 5.5rem);
    min-height: calc(100dvh - 5.5rem);
    display: grid;
    place-items: center;
    background: radial-gradient(circle at top right, rgba(91, 87, 214, 0.18), transparent 55%),
        radial-gradient(circle at bottom left, rgba(16, 185, 129, 0.18), transparent 55%),
        var(--app-bg);
    padding: 2rem;
}

@media (max-width: 576px) {
    .login-wrapper {
        min-height: calc(100vh - 5.5rem);
        min-height: calc(100dvh - 5.5rem);
        padding: 1.5rem;
    }
}

.login-card {
    width: min(480px, 100%);
    background: var(--app-surface);
    border-radius: var(--radius-lg);
    padding: clamp(2rem, 4vw, 2.8rem);
    box-shadow: 0 30px 70px rgba(15, 23, 42, 0.18);
    border: 1px solid rgba(148, 163, 184, 0.18);
}

.login-card h1 {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.login-card p {
    color: var(--app-muted);
    margin-bottom: 1.75rem;
}

/* Bootstrap-остатки (.form-floating / .btn-primary / .btn-outline-secondary /
   .alert-modern) удалены — вся разметка на Tailwind, Bootstrap CDN выведен
   (docs/DESIGN_SYSTEM.md §7). */

.tag-muted {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.12);
    color: var(--app-muted);
    font-size: 0.85rem;
}

.badge-soft-success {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
    border-radius: 999px;
    padding: 0.35rem 0.75rem;
}

.difficulty-dot {
    width: 16px; /* Âíóòðåííèé êðóã */
    height: 16px;
    border-radius: 999px;
    display: inline-block;
}

.assignment-difficulty {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.assignment-difficulty--editable {
    gap: 0.75rem;
}

.assignment-difficulty__circle {
    width: 24px;
    height: 24px;
    border: 2px solid transparent;
    border-radius: 999px;
    padding: 3px; /* Îòñòóï äëÿ âíóòðåííåãî êðóãà */
    background-clip: content-box;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.assignment-difficulty--editable .assignment-difficulty__circle {
    cursor: pointer;
}

    .assignment-difficulty--editable .assignment-difficulty__circle:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.45);
    }

.assignment-difficulty__circle--active {
    transform: scale(1.1);
    border-color: rgba(15, 23, 42, 0.35);
}

.assignment-difficulty__label {
    font-size: 0.9rem;
    color: var(--app-muted);
}

.difficulty-dot {
    width: 100%;
    height: 100%;
    border-radius: 999px;
    display: block;
}

.difficulty-dot--easy {
    background: #bbf7d0;
}

.difficulty-dot--medium {
    background: #fde68a;
}

.difficulty-dot--hard {
    background: #fecaca;
}

.assignment-difficulty__circle--active.difficulty-dot--easy {
    background: #34d399;
}

.assignment-difficulty__circle--active.difficulty-dot--medium {
    background: #fbbf24;
}

.assignment-difficulty__circle--active.difficulty-dot--hard {
    background: #f87171;
}

.badge-soft-warning {
    background: rgba(245, 158, 11, 0.12);
    color: #b45309;
    border-radius: 999px;
    padding: 0.35rem 0.75rem;
}

@media (max-width: 991px) {
    .app-header .container {
        flex-direction: column;
        align-items: stretch;
        gap: 0.0rem;
        padding: 0.5rem;
    }

    .app-header .header-bar {
        width: 100%;
        justify-content: space-between;
    }

    .app-header .header-content {
        display: none;
        flex-direction: column;
        align-items: flex-start;
        gap: 1.25rem;
        width: 100%;
        padding: 0.75rem 0 0;
        border-top: 1px solid rgba(91, 87, 214, 0.08);
    }

    .app-header.mobile-menu-open {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        /* Скролл теперь ВНУТРИ листа (.mm-scroll), а не на самой шапке. overflow:visible
           обязателен, иначе backdrop-filter-шапка клипает fixed-панель уведомлений. */
        overflow: visible;
    }

    .app-header.mobile-menu-open .header-content {
        display: flex;
    }

    .app-header .nav-links {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 0.5rem;
    }

    .app-header .nav-links a,
    .app-header .nav-links button {
        width: 100%;
        text-align: left;
    }

    /* Section captions (Обучение / Наблюдение / …) — quiet labels, not items.
       Inline Tailwind on the span makes them tw-font-bold + muted, i.e. the SAME
       grey as the menu items but heavier, so the captions out-shout the links they
       organise. This higher-specificity rule wins over the utilities: shrink them,
       drop to medium weight, fade them a touch, and give an asymmetric margin
       (open above, snug below) so each caption reads as a header for the group
       directly beneath it rather than a free-floating line. */
    .app-header .nav-links .nav-section-label {
        display: block;
        font-size: 0.625rem;
        font-weight: 500;
        letter-spacing: 0.12em;
        line-height: 1.2;
        opacity: 0.65;
        padding: 0 0.75rem;
        margin: 0.85rem 0 0.05rem;
    }

    .app-header .nav-links .nav-section-label:first-child {
        margin-top: 0.15rem;
    }

    .app-header .nav-links .nav-section-toggle {
        display: flex;
        width: 100%;
        padding: 0.5rem 0.75rem;
        margin-top: 0.25rem;
    }

    /* Меню аккаунта живёт у аватара в шапке. При длинной почте absolute right:0
       (привязка к аватару, а он не у самого края — правее ещё «Ещё») уводил меню
       за ЛЕВЫЙ край. Поэтому на телефоне прижимаем его к ПРАВОМУ краю вьюпорта —
       как панель уведомлений: position:fixed + ЯВНЫЙ top. (Без явного top меню
       «улетало» вверх из-за backdrop-filter родителя; с явным top — корректно.) */
    .profile-menu {
        position: fixed;
        top: calc(var(--app-header-height, 56px) + 0.4rem);
        right: 0.5rem;
        left: auto;
        width: 17rem;
        max-width: calc(100vw - 1rem);
        max-height: calc(100dvh - var(--app-header-height, 56px) - 1rem);
        overflow-y: auto;
    }
}

@media (max-width: 767px) {
    .dashboard-hero {
        grid-template-columns: 1fr;
        padding: 1.25rem;
        margin-bottom: 1rem;
        gap: 1rem;
    }

    .dashboard-hero h1 {
        font-size: 1.5rem;
        margin-bottom: 0.35rem;
    }

    .dashboard-hero p {
        font-size: 0.875rem;
        margin-bottom: 0;
    }

    .student-card {
        flex-direction: row;
        align-items: center;
        padding: 0.5rem;
        gap: 0.75rem;
    }

    .student-photo-circle--sm {
        width: 56px;
        height: 56px;
        margin-bottom: 0;
    }

    .student-photo-circle--sm span {
        font-size: 1.25rem;
    }

    .student-card h2 {
        font-size: 1.1rem;
        margin-bottom: 0.15rem;
    }

    .student-meta .tag-muted {
        font-size: 0.8rem;
    }

    .plan-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
}

.access-denied-page {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.access-denied-card {
    background: var(--app-surface);
    border-radius: var(--radius-lg);
    padding: 2.5rem;
    max-width: 480px;
    text-align: center;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
}

.access-denied-card h1 {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.access-denied-card p {
    color: var(--app-muted);
    margin-bottom: 1.5rem;
}

.assignment-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.assignment-card {
    position: relative;
    display: block;
    padding: 0.875rem 0.75rem;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid var(--app-border);
    background: var(--app-surface);
    box-shadow: none;
    transition: background-color 0.15s ease;
    color: inherit;
}


.assignment-card__delete {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--app-text-secondary);
    opacity: 0.35;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    transition: opacity 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.assignment-card__delete:hover,
.assignment-card__delete:focus-visible {
    opacity: 1;
    color: #dc2626;
    background-color: rgba(220, 38, 38, 0.1);
}

.assignment-card__delete:focus-visible {
    outline: none;
    box-shadow: 0 0 0 0.15rem rgba(220, 38, 38, 0.2);
}

.assignment-card__delete-icon {
    width: 1rem;
    height: 1rem;
    fill: currentColor;
}

.testing-editor__delete-button {
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 999px;
    background: rgba(248, 113, 113, 0.06);
    color: #f87171;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.testing-editor__delete-button:hover,
.testing-editor__delete-button:focus-visible {
    background: rgba(248, 113, 113, 0.14);
    color: #ef4444;
}

.testing-editor__delete-button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 0.25rem rgba(239, 68, 68, 0.2);
}

.testing-editor__delete-button:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    background-color: #f3f4f6;
    color: #9ca3af;
    transform: none;
}

.testing-editor__delete-icon {
    width: 1rem;
    height: 1rem;
    display: block;
    fill: currentColor;
}

.assignment-card:hover,
.assignment-card:focus-visible {
    text-decoration: none;
    background-color: var(--app-surface-alt);
}

.assignment-card__title {
    font-weight: 600;
    font-size: 1.05rem;
    line-height: 1.35;
}

.assignment-card__summary {
    font-size: 0.78rem;
    color: #6c757d;
    line-height: 1.35;
    margin-top: 0.125rem;
    margin-bottom: 0.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Question mark watermark for tasks with short/missing descriptions */
.assignment-card--needs-description {
    position: relative;
    overflow: hidden;
}

.assignment-card--needs-description::before {
    content: '?';
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
    font-size: 4rem;
    font-weight: 700;
    color: rgba(148, 163, 184, 0.12);
    pointer-events: none;
    z-index: 0;
    line-height: 1;
}

.assignment-card--needs-description > * {
    position: relative;
    z-index: 1;
}

/* Question mark watermark for attempt group headers with short/missing descriptions */
.attempt-group-question-mark {
    position: absolute;
    top: 50%;
    right: 2rem;
    transform: translateY(-50%);
    font-size: 4rem;
    font-weight: 700;
    color: rgba(148, 163, 184, 0.12);
    pointer-events: none;
    z-index: 1;
    line-height: 1;
    user-select: none;
}

/* Indeterminate progress stripe for AssignmentAskModal.
   Полоса 1/3 ширины двигается слева направо и обратно — даёт ощущение
   «что-то происходит», в отличие от статичного спиннера. */
@keyframes ai-ask-progress-slide {
    0% { transform: translateX(-100%); }
    50% { transform: translateX(200%); }
    100% { transform: translateX(-100%); }
}

.ai-ask-progress-stripe {
    animation: ai-ask-progress-slide 1.6s ease-in-out infinite;
    opacity: 0.85;
}

/* "!" toggle for MTask.IsRequired right on the group header.
   Positioned outside the outer .attempt-group-toggle button (HTML-valid),
   absolutely placed at top-left of the header so it doesn't collide with the
   thumbnail (which lives in the middle row below). z-index lifts it above the
   group-toggle so its click isn't swallowed by the group expand/collapse.
   Вид 1:1 как «!» в списке заданий (2026-07-02): голая иконка без рамки/фона —
   активная красная заливка, неактивный серый контур. */
.attempt-group-required-toggle {
    position: absolute;
    top: 50%;
    left: 0.5rem;
    transform: translateY(-50%);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #d1d5db; /* gray-300 — как неактивный «!» на «Заданиях» */
    cursor: pointer;
    transition: color 0.12s ease;
    line-height: 1;
    font-size: 14px;
}

.attempt-group-required-toggle:hover {
    color: #f87171; /* red-400 */
    background: transparent;
}

.attempt-group-required-toggle.is-active,
.attempt-group-required-toggle.is-active:hover {
    color: #ef4444; /* red-500 */
    background: transparent;
}

.attempt-group-required-toggle:disabled {
    opacity: 0.6;
    cursor: progress;
}

/* Если кнопка «!» показана — у строки появляется отступ слева, чтобы иконка
   задания и заголовок не наезжали на кружок. 2.375rem ≈ 0.5rem (left) + 26px
   кнопки + зазор. Раньше отступ вешался на .attempt-group-middle-row; после
   перехода строки на flex его вешаем прямо на кнопку. */
.attempt-group-required-toggle ~ .attempt-group-toggle {
    padding-left: 2.375rem;
}

/* Attempts count badge */
.assignment-card__attempts {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.15), rgba(245, 158, 11, 0.15));
    color: #b45309;
    font-weight: 600;
    font-size: 0.75rem;
    line-height: 1;
}

.assignment-card__attempts i {
    font-size: 0.7rem;
    color: #f59e0b;
}

.assignment-card__side {
    align-items: flex-start;
}

@media (min-width: 768px) {
    .assignment-card__side {
        align-items: flex-end;
    }
}

.assignment-card__difficulty {
    margin-top: 0.5rem;
}

.assignment-card__footer {
    border-top: 1px solid rgba(148, 163, 184, 0.18);
    padding-top: 1.1rem;
}

.assignment-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    background: rgba(91, 87, 214, 0.12);
    color: var(--app-accent);
    font-weight: 600;
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.assignment-card:hover .assignment-card__cta,
.assignment-card:focus-visible .assignment-card__cta {
    background: var(--app-accent);
    color: #fff;
    transform: translateX(4px);
}

.assignment-card__cta-icon {
    font-size: 1rem;
    line-height: 1;
}

.assignment-card__tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    background: rgba(108, 117, 125, 0.1);
    color: var(--app-text-secondary);
    font-weight: 600;
    font-size: 0.78rem;
    line-height: 1.2;
}

.assignment-card__special-tags {
    min-height: 1.5rem;
}

.assignment-card__tag-toggle {
    border: none;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    background: rgba(108, 117, 125, 0.08);
    color: var(--app-text-secondary);
    font-weight: 600;
    font-size: 0.72rem;
    line-height: 1.2;
    transition: background 0.15s ease, color 0.15s ease;
    cursor: pointer;
}

.assignment-card__tag-toggle:hover,
.assignment-card__tag-toggle:focus-visible {
    background: rgba(108, 117, 125, 0.16);
    color: var(--app-text);
    outline: none;
}

.assignment-card__tag-toggle--active {
    background: rgba(180, 138, 74, 0.16);
    color: #8b6914;
}

.assignment-card__tag-toggle--active:hover,
.assignment-card__tag-toggle--active:focus-visible {
    background: rgba(180, 138, 74, 0.26);
    color: #7a5c10;
}

.assignment-card__action {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    border-radius: 0.25rem;
    padding: 0.2rem 0.4rem;
    transition: color 0.15s ease, background-color 0.15s ease;
    color: #9ca3af;
}

.assignment-card__action:hover {
    color: var(--app-accent);
    background-color: rgb(var(--primary-600) / 0.1);
}

.assignment-card__action:focus {
    outline: none;
    box-shadow: 0 0 0 0.2rem rgb(var(--primary-600) / 0.25);
}

.assignment-card__action.active {
    color: var(--app-text-secondary);
}

.assignment-card__action.active:hover {
    color: var(--app-text-secondary);
    background-color: rgba(108, 117, 125, 0.1);
}

.assignment-card__icons-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
    flex-shrink: 0;
    align-self: center;
}

.assignment-card__bookmark {
    flex-shrink: 0;
}

.assignment-card__important {
    flex-shrink: 0;
}

.assignment-card__important.on-board {
    color: var(--app-text-secondary);
}

.assignment-card__important.on-board:hover {
    color: var(--app-accent);
    background-color: rgb(var(--primary-600) / 0.1);
}

.assignment-card__important.active {
    color: var(--app-text-secondary);
}

.assignment-card__important.active:hover {
    color: var(--app-text-secondary);
    background-color: transparent;
}

.assignment-card__remove-board {
    flex-shrink: 0;
    opacity: 0.35;
    transition: opacity 0.15s ease, color 0.15s ease;
}

.assignment-card__remove-board:hover {
    opacity: 1;
    color: #dc2626 !important;
    background-color: rgba(220, 38, 38, 0.1) !important;
}

.assignment-card__add-board {
    flex-shrink: 0;
}

.assignment-card__variant-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: rgba(59, 130, 246, 0.12);
    color: #2563eb;
    font-weight: 600;
    font-size: 0.7rem;
    line-height: 1;
}

/* Add-to-plan button on assignment card */
.assignment-card__plan-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.6rem;
    border: none;
    border-radius: 999px;
    background: rgba(108, 117, 125, 0.1);
    color: var(--app-text-secondary);
    font-weight: 600;
    font-size: 0.72rem;
    line-height: 1.2;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}

.assignment-card__plan-btn:hover:not(:disabled) {
    background: rgba(108, 117, 125, 0.2);
    color: var(--app-text);
}

.assignment-card__plan-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.assignment-card__plan-btn--repeat {
    background: rgba(180, 138, 74, 0.12);
    color: #8b6914;
}

.assignment-card__plan-btn--repeat:hover:not(:disabled) {
    background: rgba(180, 138, 74, 0.22);
    color: #7a5c10;
}

.preference-tag-list {
    background: color-mix(in srgb, var(--app-surface) 65%, transparent);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: var(--radius-md);
    padding: 1rem;
    height: 100%;
}

.preference-tag-item {
    padding: 0.75rem 1rem;
    border: none;
    background: transparent;
    transition: background 0.2s ease, color 0.2s ease;
    border-radius: var(--radius-sm);
}

.preference-tag-item:hover,
.preference-tag-item:focus-visible {
    background: rgba(91, 87, 214, 0.08);
}

.preference-tag-item.active {
    background: var(--app-accent);
    color: #fff;
}

.preference-tag-item.active .text-muted {
    color: rgba(255, 255, 255, 0.75) !important;
}

.day-plan-date-picker {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .day-plan-date-picker input[type="date"] {
        max-width: 170px;
    }

.plan-date-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid var(--app-border);
    border-radius: 0.6rem;
    background: var(--app-surface);
    color: var(--app-muted);
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    flex-shrink: 0;
}

.plan-date-nav-btn:hover {
    background: var(--app-hover);
    border-color: var(--app-muted);
    color: var(--app-text);
}

.plan-date-nav-btn:active {
    background: var(--app-hover);
}

.plan-date-display {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 1rem;
    min-width: 8rem;
    height: 2.25rem;
    border: 1px solid var(--app-border);
    border-radius: 0.6rem;
    background: var(--app-surface);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    gap: 0;
}

.plan-date-display:hover {
    background: var(--app-hover);
    border-color: var(--app-muted);
}

.plan-date-display__weekday {
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--app-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1;
}

.plan-date-display__date {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--app-text);
    line-height: 1.2;
    white-space: nowrap;
}

/* План: правый слот шапки даты. На десктопе — «глаз» (скрыть завершённые); на мобилке
   у родителя его заменяет кликабельное кольцо расхода ИИ-бюджета (на десктопе кольцо уже
   живёт в сайдбаре). Брейкпоинт 992px — тот же, что у .app-header--mobile / .app-sidebar.
   Двойной селектор перебивает display из .plan-date-nav-btn без !important.
   Кольцо скрыто по умолчанию; «глаз» прячем только когда кольцо реально отрисовано
   (есть активная подписка → UsageWidget вернул разметку). Иначе (нет подписки / старый
   браузер без :has) остаёмся на «глазе» — слот никогда не пустой. */
.day-plan-date-picker .plan-date-budget {
    display: none;
    align-items: center;
}

/* Бейдж бюджета на странице плана убран и на мобиле (по просьбе — лишний шум в шапке
   расписания; общий ИИ-бюджет доступен в меню «Ещё» и на /subscription). «Глаз»
   (скрыть выполненные) остаётся на своём месте — больше не подменяется кольцом. */

.day-plan-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.day-plan-list--compact {
    gap: 0.5rem;
}

.day-plan-list__item {
    display: flex;
    align-items: stretch;
    gap: 1rem;
    width: 100%;
}

.day-plan-list--compact .day-plan-list__item {
    gap: 0.75rem;
}

.day-plan-list__item.list-group-item {
    border: none;
    border-radius: 0;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

.day-plan-list--compact .day-plan-list__item.list-group-item {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

.day-plan-list__item:last-child.list-group-item {
    border-bottom: none;
}

.day-plan-list__item .day-plan-card {
    flex: 1 1 auto;
}

.day-plan-card {
    border-radius: var(--radius-md);
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: var(--app-surface);
    padding: 0.5rem 1.0rem;
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.08);
}

.day-plan-card--faded {
    background: rgba(148, 163, 184, 0.08);
    border-color: rgba(148, 163, 184, 0.32);
    box-shadow: none;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.day-plan-card--faded:hover,
.day-plan-card--faded:focus-within {
    background: rgba(148, 163, 184, 0.12);
    border-color: rgba(148, 163, 184, 0.45);
}

.day-plan-card--faded .day-plan-card__title,
.day-plan-card--faded .day-plan-card__meta,
.day-plan-card--faded .day-plan-card__timeline,
.day-plan-card--faded .day-plan-card__score-value {
    color: var(--app-text-secondary);
}

.day-plan-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.day-plan-card__header-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.day-plan-card__header-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
}

.day-plan-card__header-info {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.day-plan-card__header-controls {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

.day-plan-card__title-container {
    flex: 1 1 auto;
    min-width: 0;
}

.day-plan-card__number {
    flex: 0 0 auto;
    min-width: 1.5rem;
    height: 1rem;
    margin-left: -0.5rem;
    border-radius: 0.75rem;
    background: rgb(201 201 201 / 12%);
    color: #8e8e8e;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.day-plan-card__header-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.4rem;
}

.active-board-page .day-plan-card {
    padding-right: 3rem;
}

.active-board-page .day-plan-card__header {
    position: static;
    padding-right: 0;
}

.active-board-page .day-plan-card__header-controls {
    position: absolute;
    top: 1rem;
    right: 1rem;
}

.active-board-page .day-plan-card__header-addon {
    justify-content: flex-start;
}

.active-board-page .day-plan-card__header-meta {
    align-items: flex-start;
}

.day-plan-card__delete-button {
    position: relative;
    z-index: 1;
}

.day-plan-card__delete-spinner {
    position: relative;
}

.day-plan-card--mobile .day-plan-card__header {
    padding-right: 3rem;
}

.day-plan-card--mobile .day-plan-card__header-controls {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
}

@media (max-width: 768px) {
    .day-plan-card__header {
        flex-direction: column;
        gap: 0.75rem;
    }

    .day-plan-card__header-top {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .day-plan-card__header-info {
        gap: 0.4rem;
    }

    .day-plan-card__header-top {
        align-items: center;
    }

    .day-plan-card__header-info {
        flex: 1 1 auto;
    }
}


.day-plan-card__title {
    font-size: 1.0rem;
    font-weight: 600;
}

.day-plan-card__meta {
    font-size: 0.85rem;
    color: var(--app-muted);
}

.day-plan-card__application {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: 0.85rem;
    color: #0c5460;
}

.day-plan-card__application-title {
    font-weight: 600;
}

.day-plan-card__application-link {
    color: #0d6efd;
    font-weight: 600;
    text-decoration: none;
}

    .day-plan-card__application-link:hover {
        color: #0a58ca;
        text-decoration: underline;
    }

.day-plan-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: flex-end;
}

.day-plan-card__timeline {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    font-size: 0.85rem;
    color: var(--app-muted);
    margin-bottom: 0.85rem;
}

.day-plan-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

/* Прозрачный оверлей под всплывающим календарём: клик мимо календаря закрывает его.
   z-index ниже самого поповера, но выше контента страницы. */
.day-plan-calendar-overlay {
    position: fixed;
    inset: 0;
    z-index: 1049;
}

.day-plan-calendar-popover {
    z-index: 1050;
}

.day-plan-calendar {
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: var(--radius-md);
    padding: 1.1rem;
    background: color-mix(in srgb, var(--app-surface) 90%, transparent);
}

.day-plan-calendar__month {
    font-weight: 600;
    text-transform: capitalize;
    margin-bottom: 0.75rem;
}

.day-plan-calendar__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.4rem;
}

.day-plan-calendar__weekday {
    text-transform: uppercase;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--app-muted);
    text-align: center;
}

.day-plan-calendar__day {
    position: relative;
    border: none;
    background: transparent;
    padding: 0.65rem 0;
    border-radius: var(--radius-sm);
    font-weight: 600;
    color: var(--app-text);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, color 0.2s ease;
}

    .day-plan-calendar__day:hover:not([disabled]) {
        background: rgba(91, 87, 214, 0.12);
    }

.day-plan-calendar__day--muted {
    color: rgba(148, 163, 184, 0.8);
}

.day-plan-calendar__day--today {
    /* Clear "today" marker: accent ring + accent text. The old 1px @40%
       border was too faint to spot when today is neither selected nor a
       plan day. `--selected` is defined after this and wins (solid accent
       fill + white text) when today is also the selected date. */
    border: 2px solid var(--app-accent);
    color: var(--app-accent);
}

.day-plan-calendar__day--selected {
    background: var(--app-accent);
    color: #fff;
}

    .day-plan-calendar__day--selected .day-plan-calendar__dot {
        background: #fff;
    }

.day-plan-calendar__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--app-accent);
    margin-top: 0.35rem;
}
/* Plan team member tag styling is handled in Pages/Students/Plan.razor.css */

.assignment-media-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

/* Medium view size */
.assignment-media-grid--medium {
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

.assignment-media-grid--medium .assignment-media-card {
    padding: 0.875rem;
}

.assignment-media-grid--medium .assignment-media-preview img,
.assignment-media-grid--medium .assignment-media-preview video {
    max-height: 140px;
}

.assignment-media-grid--medium .assignment-media-preview-frame {
    height: 140px;
}

/* Small view size */
.assignment-media-grid--small {
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}

.assignment-media-grid--small .assignment-media-card {
    padding: 0.5rem;
}

.assignment-media-grid--small .assignment-media-preview img,
.assignment-media-grid--small .assignment-media-preview video {
    max-height: 80px;
}

.assignment-media-grid--small .assignment-media-preview-frame {
    height: 80px;
}

.assignment-media-grid--small .assignment-media-header {
    gap: 0.25rem;
}

.assignment-media-grid--small .assignment-media-remove {
    font-size: 0.75rem;
    padding: 0.125rem 0.25rem;
}

.assignment-media-grid--small .assignment-media-remove span:not(.assignment-media-remove-icon) {
    display: none;
}

.assignment-media-grid--small .assignment-media-remove-btn {
    width: 22px;
    height: 22px;
}

.assignment-media-grid--small .assignment-media-remove-btn svg {
    width: 12px;
    height: 12px;
}

/* Context menu styles */
.assignment-media-context-menu {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 1050;
    min-width: 180px;
    background: var(--app-surface);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.15);
    padding: 0.375rem 0;
    margin-top: 0.25rem;
}

.assignment-media-context-menu-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.5rem 1rem;
    border: none;
    background: transparent;
    color: var(--app-text);
    font-size: 0.875rem;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.assignment-media-context-menu-item:hover:not(:disabled) {
    background: rgba(91, 87, 214, 0.08);
}

.assignment-media-context-menu-item:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.assignment-media-context-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: transparent;
}

.assignment-media-card {
    position: relative;
    background: var(--app-surface);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.08);
    border: 1px solid rgba(148, 163, 184, 0.18);
}

.assignment-media-card.selectable {
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.assignment-media-card.selectable:hover {
    border-color: rgba(91, 87, 214, 0.35);
    box-shadow: 0 22px 44px rgba(91, 87, 214, 0.16);
}

.assignment-media-card.selectable:focus-visible {
    outline: 2px solid rgba(91, 87, 214, 0.65);
    outline-offset: 3px;
}

.assignment-media-card.selectable[aria-disabled="true"] {
    cursor: default;
    transform: none;
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.08);
}

.assignment-media-card.selectable.selected {
    border-color: rgba(91, 87, 214, 0.6);
    box-shadow: 0 0 0 2px rgba(91, 87, 214, 0.18), 0 24px 48px rgba(91, 87, 214, 0.2);
}

.assignment-media-select {
    display: flex;
    align-items: center;
}

.assignment-media-checkbox {
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 0.35rem;
    border: 1px solid rgba(15, 23, 42, 0.25);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.18);
    accent-color: var(--app-accent);
    transition: box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.assignment-media-checkbox:focus-visible {
    outline: 2px solid var(--app-accent);
    outline-offset: 2px;
}

.assignment-media-card.selected .assignment-media-checkbox {
    border-color: var(--app-accent);
}

.assignment-media-checkbox:checked {
    background-color: var(--app-accent);
    border-color: var(--app-accent);
    box-shadow: 0 0 0 2px rgba(91, 87, 214, 0.22), 0 8px 18px rgba(91, 87, 214, 0.32);
    color: #fff;
}

.assignment-media-preview-wrapper {
    position: relative;
}

.assignment-media-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: nowrap;
}

.assignment-media-title {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--app-text);
    min-width: 0;
}

.assignment-media-title.empty {
    color: var(--app-muted);
    font-weight: 500;
}

.assignment-media-title .text-truncate {
    max-width: 100%;
}

.assignment-media-subtitle {
    font-size: 0.8rem;
    color: var(--app-muted);
    font-weight: 500;
    line-height: 1.2;
}

.assignment-media-remove {
    border: 1px solid rgba(239, 68, 68, 0.2);
    background: rgba(239, 68, 68, 0.08);
    color: #dc2626;
    border-radius: 999px;
    padding: 0.4rem 0.85rem;
    font-weight: 600;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    white-space: nowrap;
}

.assignment-media-remove:hover,
.assignment-media-remove:focus-visible {
    background: rgba(239, 68, 68, 0.16);
    box-shadow: 0 16px 32px rgba(239, 68, 68, 0.15);
    color: #b91c1c;
}

.assignment-media-remove:disabled {
    opacity: 0.6;
    pointer-events: none;
}

.assignment-media-remove-icon {
    font-size: 0.9rem;
    line-height: 1;
}

.assignment-media-remove-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 10;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    background: rgba(15, 23, 42, 0.55);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease;
    flex-shrink: 0;
}

.assignment-media-remove-btn:hover {
    background: #ef4444;
}

.assignment-media-remove-btn:disabled {
    opacity: 0.4;
    pointer-events: none;
}

.assignment-media-remove-btn svg {
    width: 16px;
    height: 16px;
}

.assignment-media-toolbar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.75rem;
    margin-top: 1rem;
    background: rgba(15, 23, 42, 0.03);
    border-radius: 12px;
    border: 1px solid rgba(15, 23, 42, 0.08);
}

.assignment-media-toolbar-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    border: 1px solid var(--app-border);
    background: var(--app-surface);
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--app-text);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.assignment-media-toolbar-btn:hover:not(:disabled) {
    background: var(--app-accent-soft);
    border-color: color-mix(in srgb, var(--app-accent) 35%, transparent);
    color: var(--app-accent);
}

.assignment-media-toolbar-btn:active:not(:disabled) {
    transform: translateY(0);
}

.assignment-media-toolbar-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.assignment-media-toolbar-btn svg {
    flex-shrink: 0;
}

.assignment-media-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.assignment-media-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.assignment-media-progress .progress {
    height: 0.5rem;
    border-radius: 999px;
    background: rgba(91, 87, 214, 0.12);
}

.assignment-media-progress .progress-bar {
    background: linear-gradient(135deg, #5b57d6, #7c3aed);
}

.assignment-media-progress-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
    font-size: 0.8rem;
    color: var(--app-muted);
}

.assignment-media-progress-meta span {
    max-width: 100%;
}

.assignment-media-error {
    font-weight: 600;
}

.assignment-media-preview {
    background: rgba(15, 23, 42, 0.03);
    border: 1px dashed rgba(148, 163, 184, 0.4);
    border-radius: var(--radius-md);
    padding: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 140px;
}

.assignment-media-preview img {
    width: 100%;
    max-height: 220px;
    object-fit: contain;
    border-radius: var(--radius-sm);
}

.assignment-media-preview video {
    width: 100%;
    max-height: 260px;
    border-radius: var(--radius-sm);
}

.assignment-media-preview audio {
    width: 100%;
}

.assignment-media-preview-frame {
    width: 100%;
    height: 200px;
    border: 0;
    border-radius: var(--radius-sm);
    pointer-events: none;
}

.assignment-media-preview--doc {
    padding: 0;
    background: linear-gradient(160deg, rgba(226, 232, 240, 0.45), rgba(148, 163, 184, 0.25));
    border-style: solid;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.assignment-media-preview--doc::after {
    content: "Нажмите для просмотра";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.5rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
    color: white;
    font-size: 0.75rem;
    text-align: center;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.assignment-media-preview--doc:hover::after {
    opacity: 1;
}

/* Image preview clickable styles */
.assignment-media-preview--image {
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.assignment-media-preview--image::after {
    content: "Нажмите для просмотра";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.5rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
    color: white;
    font-size: 0.75rem;
    text-align: center;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.assignment-media-preview--image:hover::after {
    opacity: 1;
}

.assignment-media-filename {
    font-size: 0.8rem;
}

.assignment-media-placeholder {
    font-size: 0.85rem;
    color: var(--app-muted);
    line-height: 1.4;
}

/* ---------------------------------------------- */
/* Assignment variants                            */
/* ---------------------------------------------- */

.assignment-variant-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.assignment-variant-header {
    display: flex;
    justify-content: flex-end;
}

.assignment-variant-list .assignment-variant-item {
    border: 1px solid var(--app-border);
    border-radius: var(--radius-sm);
    padding: 0.85rem 1rem;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    color: inherit;
}

.assignment-variant-list .assignment-variant-item:hover {
    background: rgba(15, 23, 42, 0.03);
}

.assignment-variant-list .assignment-variant-item:focus-visible {
    box-shadow: 0 0 0 3px rgba(91, 87, 214, 0.25);
}

.assignment-variant-list .assignment-variant-item.active {
    background: rgba(91, 87, 214, 0.08);
    border-color: rgba(91, 87, 214, 0.35);
    box-shadow: inset 0 0 0 1px rgba(91, 87, 214, 0.08);
    color: inherit;
}

.assignment-variant-list .assignment-variant-item.active .fw-semibold {
    color: var(--app-accent);
}

.assignment-variant-actions {
    display: flex;
    flex-direction: row;
    gap: 0.75rem;
    align-items: center;
    justify-content: flex-start;
}



@media (min-width: 576px) {
    .assignment-variant-actions {
        flex-direction: row;
        justify-content: flex-end;
    }
}

@media (min-width: 992px) {
    .assignment-variant-actions {
        flex-direction: column;
        justify-content: flex-start;
    }
}

.assignment-variant-action-btn {
    border: none;
    border-radius: var(--radius-sm);
    padding: 0.55rem 1.2rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    color: #fff;
    background: var(--app-accent);
    transition: background 0.15s ease;
}

.assignment-variant-action-btn--primary {
    background: var(--app-accent);
}

.assignment-variant-action-btn--danger {
    background: #ef4444;
}

.assignment-variant-action-btn:not(:disabled):hover {
    background: color-mix(in srgb, var(--app-accent) 88%, #000);
}

.assignment-variant-action-btn--danger:not(:disabled):hover {
    background: #dc2626;
}

.assignment-variant-action-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--app-accent-soft);
}

.assignment-variant-action-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.assignment-editor-card {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

.assignment-editor-toolbar {
    display: flex;
    justify-content: flex-start;
}

.assignment-mode-toggle {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.assignment-mode-toggle__btn {
    border-radius: 999px;
    border: 1px solid var(--app-border);
    background: transparent;
    color: var(--app-muted);
    font-weight: 600;
    padding: 0.45rem 1.2rem;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.assignment-mode-toggle__btn--active {
    background: var(--app-accent);
    color: #fff;
    border-color: var(--app-accent);
}

.assignment-mode-toggle__btn:not(:disabled):hover {
    background: var(--app-hover);
    color: var(--app-text);
}

.assignment-mode-toggle__btn--active:not(:disabled):hover {
    background: color-mix(in srgb, var(--app-accent) 88%, #000);
    color: #fff;
}

.assignment-mode-toggle__btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--app-accent-soft);
}

.assignment-difficulty--header {
    background: rgba(91, 87, 214, 0.08);
    border-radius: 999px;
    padding: 0.45rem 0.85rem;
    box-shadow: inset 0 0 0 1px rgba(91, 87, 214, 0.08);
}

.assignment-difficulty--editable.assignment-difficulty--header {
    background: rgba(91, 87, 214, 0.12);
    box-shadow: inset 0 0 0 1px rgba(91, 87, 214, 0.12);
}

.assignment-difficulty--header .assignment-difficulty__label {
    color: var(--app-text);
    font-weight: 600;
    text-transform: capitalize;
}

.assignment-editor-header {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

@media (min-width: 768px) {
    .assignment-editor-header {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
    }
}

.assignment-title-row {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}

@media (min-width: 768px) {
    .assignment-title-row {
        flex-direction: row;
        align-items: stretch;
    }
}

.assignment-title-input {
    flex: 1;
    min-width: 0;
}

.assignment-difficulty-wrapper {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

@media (min-width: 768px) {
    .assignment-difficulty-wrapper {
        justify-content: flex-end;
        min-width: 220px;
    }
}

.assignment-editor-title {
    flex: 1;
    min-width: 0;
}

.assignment-title {
    font-weight: 700;
}

.assignment-variant-label {
    color: var(--app-muted);
}

.assignment-media-section {
    background: rgba(148, 163, 184, 0.08);
    border-radius: var(--radius-sm);
    padding: 1rem;
}

.assignment-view-media {
    background: rgba(148, 163, 184, 0.08);
    border-radius: var(--radius-sm);
    padding: 1rem;
}

.assignment-media-library-btn {
    border: none;
    border-radius: var(--radius-sm);
    padding: 0.5rem 1.15rem;
    font-weight: 600;
    color: #fff;
    background: var(--app-accent);
    transition: background 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

.assignment-media-library-btn:not(:disabled):hover {
    background: color-mix(in srgb, var(--app-accent) 88%, #000);
}

.assignment-media-library-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--app-accent-soft);
}

.assignment-media-library-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* Bootstrap-модалка медиатеки (.assignment-media-wrapper .modal*, .modal .modal-body …)
   удалена — медиатека теперь в tw-оверлее (AssignmentMediaManager / AssignmentsBrowse),
   высота задаётся arbitrary-вариантом [&_.media-library-browser]:tw-h-full. */

.assignment-status-message {
    margin-top: 1rem;
    border-radius: var(--radius-sm);
    padding: 0.75rem 1rem;
    font-weight: 600;
    font-size: 0.95rem;
}

.assignment-status-message--success {
    background: rgba(34, 197, 94, 0.15);
    color: #047857;
    border: 1px solid rgba(34, 197, 94, 0.25);
}

.assignment-status-message--error {
    background: rgba(248, 113, 113, 0.18);
    color: #b91c1c;
    border: 1px solid rgba(248, 113, 113, 0.25);
}


/* Иконка в кнопке */
.assignment-variant-action-btn__icon {
    font-size: 1.4rem;
    line-height: 1;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Текст кнопки */
.assignment-variant-action-btn__text {
    display: inline-block;
}

/* Улучшенные переходы */
.assignment-variant-action-btn {
    min-height: 44px;
}

/* ====== МОБИЛЬНЫЕ УСТРОЙСТВА ====== */

/* Планшеты и меньше */
@media (max-width: 991px) {
    .assignment-variant-actions {
        width: 100%;
        margin-top: 0.5rem;
    }
}

/* Телефоны - только иконки */
@media (max-width: 576px) {
    .assignment-variant-action-btn {
        padding: 0.65rem 0.85rem;
        min-width: 50px;
        justify-content: center;
    }

    /* Скрываем текст */
    .assignment-variant-action-btn__text {
        display: none;
    }

    /* Увеличиваем иконку */
    .assignment-variant-action-btn__icon {
        font-size: 1.6rem;
    }
}

/* Маленькие телефоны */
@media (max-width: 380px) {
    .assignment-variant-actions {
        gap: 0.4rem;
    }

    .assignment-variant-action-btn {
        padding: 0.55rem 0.75rem;
        min-width: 46px;
        min-height: 46px;
    }
}


.capture-overlay {
    position: absolute;
    inset: 0; /* top:0; right:0; bottom:0; left:0 */
    opacity: 0;
    cursor: pointer;
    pointer-events: auto;
}
/* Mood page */
/* ── Mood page layout ── */
.mood-page {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.mood-summary-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

@media (max-width: 640px) {
    .mood-summary-row {
        grid-template-columns: 1fr;
    }
}

.mood-summary-card {
    display: flex;
    gap: 1rem;
    align-items: center;
    padding: 1.25rem;
    border: 1px solid var(--app-border);
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, rgba(91, 87, 214, 0.05), rgba(56, 189, 248, 0.05));
    min-height: 88px;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.mood-summary-card:hover {
    box-shadow: 0 8px 24px rgba(91, 87, 214, 0.1);
}

.mood-summary-card__emoji {
    font-size: 2.25rem;
    line-height: 1;
}

.mood-summary-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.mood-summary-card__title {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--app-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.mood-summary-card__description {
    font-weight: 600;
    color: var(--app-text);
    font-size: 1rem;
}

/* ── Section styling ── */
.mood-section {
    padding: 1.5rem !important;
}

.mood-section__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.mood-section__title {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0;
    color: var(--app-text);
}

.mood-section__subtitle {
    font-size: 0.875rem;
    color: var(--app-muted);
    margin: 0.25rem 0 0 0;
}

.mood-edit-toggle {
    border: 1px solid var(--app-border);
    background: var(--app-surface);
    border-radius: var(--radius-sm);
    padding: 0.4rem 1rem;
    font-size: 0.825rem;
    font-weight: 500;
    color: var(--app-muted);
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.mood-edit-toggle:hover {
    border-color: var(--app-accent);
    color: var(--app-accent);
}

.mood-edit-toggle--active {
    background: var(--app-accent);
    border-color: var(--app-accent);
    color: #fff;
}

.mood-edit-toggle--active:hover {
    background: color-mix(in srgb, var(--app-accent) 88%, #000);
    color: #fff;
}

/* ── Mood picker grid ── */
.mood-picker {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    grid-auto-rows: 1fr;
}

.mood-option {
    display: inline-flex;
    flex-direction: column;
    gap: 0.4rem;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--app-border);
    background: var(--app-surface);
    border-radius: var(--radius-md);
    padding: 1rem 0.75rem;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.mood-option::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(91, 87, 214, 0.06), rgba(56, 189, 248, 0.04));
    opacity: 0;
    transition: opacity 0.15s ease;
    border-radius: inherit;
}

.mood-option:hover::before,
.mood-option:focus-visible::before {
    opacity: 1;
}

.mood-option:hover,
.mood-option:focus-visible {
    border-color: var(--app-accent);
    background: var(--app-accent-soft);
}

.mood-option:active {
    background: var(--app-accent-soft);
}

.mood-option.disabled,
.mood-option:disabled {
    cursor: not-allowed;
    opacity: 0.5;
    transform: none;
    box-shadow: none;
}

.mood-option--add {
    border-style: dashed;
    border-color: var(--app-border);
    background: transparent;
}

.mood-option--add:hover {
    border-color: var(--app-accent);
    background: var(--app-accent-soft);
}

.mood-option__emoji {
    font-size: 2.25rem;
    line-height: 1;
    position: relative;
    z-index: 1;
}

.mood-option__label {
    font-weight: 600;
    font-size: 0.825rem;
    color: var(--app-text);
    position: relative;
    z-index: 1;
    text-align: center;
}

/* ── Calendar ── */
.mood-calendar-nav {
    display: inline-flex;
    align-items: center;
    gap: 0;
    border: 1px solid var(--app-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.mood-calendar-nav__btn {
    border: none;
    background: var(--app-surface);
    padding: 0.4rem 0.75rem;
    font-size: 0.875rem;
    color: var(--app-muted);
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}

.mood-calendar-nav__btn:hover:not(:disabled) {
    background: var(--app-accent-soft);
    color: var(--app-accent);
}

.mood-calendar-nav__btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.mood-calendar-nav__title {
    padding: 0.4rem 0.75rem;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--app-text);
    border-left: 1px solid var(--app-border);
    border-right: 1px solid var(--app-border);
    white-space: nowrap;
}

.mood-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid var(--app-border);
    background: var(--app-surface);
    border-radius: var(--radius-sm);
    padding: 0.4rem 0.85rem;
    font-size: 0.825rem;
    font-weight: 500;
    color: var(--app-muted);
    cursor: pointer;
    transition: all 0.15s ease;
}

.mood-filter-btn:hover {
    border-color: var(--app-accent);
    color: var(--app-accent);
}

.mood-filter-btn__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    border-radius: 999px;
    background: var(--app-accent);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0 0.3rem;
}

.mood-calendar-table {
    table-layout: fixed;
    width: 100%;
    border-collapse: separate;
    border-spacing: 3px;
}

.mood-calendar-table th {
    width: calc(100% / 7);
    min-width: 0;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--app-muted);
    font-weight: 600;
    padding: 0.5rem;
    border: none;
}

.mood-calendar-table td {
    width: calc(100% / 7);
    min-width: 0;
    border-radius: var(--radius-sm);
    border: 1px solid var(--app-border);
    transition: background 0.12s ease;
}

.mood-calendar-table td:hover {
    background: rgba(91, 87, 214, 0.03);
}

/* ── Period tabs ── */
.mood-period-tabs {
    display: inline-flex;
    border: 1px solid var(--app-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.mood-period-tab {
    border: none;
    background: var(--app-surface);
    padding: 0.45rem 0.9rem;
    font-size: 0.825rem;
    font-weight: 500;
    color: var(--app-muted);
    cursor: pointer;
    transition: all 0.12s ease;
    border-right: 1px solid var(--app-border);
}

.mood-period-tab:last-child {
    border-right: none;
}

.mood-period-tab:hover:not(:disabled) {
    background: var(--app-accent-soft);
    color: var(--app-accent);
}

.mood-period-tab--active {
    background: var(--app-accent);
    color: #fff;
}

.mood-period-tab--active:hover:not(:disabled) {
    background: color-mix(in srgb, var(--app-accent) 88%, #000);
    color: #fff;
}

.mood-period-tab:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.mood-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.75rem;
    height: 1.5rem;
    border-radius: 999px;
    background: var(--app-bg);
    color: var(--app-muted);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0 0.5rem;
    border: 1px solid var(--app-border);
}

/* ── History entries ── */
.mood-history-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.mood-history-entry {
    border: 1px solid var(--app-border);
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    transition: box-shadow 0.12s ease, border-color 0.12s ease;
    background: var(--app-surface);
}

.mood-history-entry:hover {
    border-color: rgba(91, 87, 214, 0.2);
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
}

.mood-history-entry__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.mood-history-entry__title-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.mood-history-entry__title {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--app-text);
}

.mood-category-badge {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background: var(--app-bg);
    color: var(--app-muted);
    border: 1px solid var(--app-border);
}

.mood-history-entry__meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.mood-history-entry__time {
    font-size: 0.8rem;
    color: var(--app-muted);
    white-space: nowrap;
}

.mood-history-entry__delete {
    border: none;
    background: none;
    color: var(--app-muted);
    font-size: 1.25rem;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    opacity: 0.4;
    transition: opacity 0.12s ease, color 0.12s ease;
}

.mood-history-entry__delete:hover:not(:disabled) {
    opacity: 1;
    color: #ef4444;
}

.mood-history-entry__delete:disabled {
    cursor: not-allowed;
}

.mood-history-entry__source {
    font-size: 0.8rem;
    color: var(--app-muted);
    margin-top: 0.25rem;
}

.mood-history-entry__detail {
    font-size: 0.85rem;
    color: var(--app-text);
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--app-border);
}

.mood-history-entry__detail--bold {
    font-weight: 600;
}

.attempt-mood-button {
    border: none;
    background: none;
    padding: 0;
    text-align: left;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: inherit;
}

.attempt-mood-button:focus-visible {
    outline: 2px solid var(--app-accent);
    outline-offset: 2px;
}

.attempt-mood-option-list .list-group-item {
    border-color: var(--app-border);
}

.attempt-mood-option-emoji {
    font-size: 1.5rem;
    line-height: 1;
}

.attempt-group-with-aggression {
    background-color: rgba(220, 53, 69, 0.04);
    border: none;
    border-radius: 0;
    padding: 0;
}

.attempt-group-average-mood .attempt-group-aggression-indicator {
    margin-left: 0.35rem;
}

/* Media Library Grid Layout - Google Drive style */
.media-folders-section {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.media-files-section {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

/* Ensure folder and file cards align properly */
.media-folders-section .media-card,
.media-files-section .media-card {
    display: flex;
    flex-direction: column;
}

@media (max-width: 768px) {
    .media-folders-section,
    .media-files-section {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 0.75rem;
    }

    .media-folders-section {
        margin-bottom: 1.5rem;
    }
}

.date-range-summary {
    gap: 0.5rem;
}

.date-range-summary .date-range-pill {
    font-size: 1.05rem;
    font-weight: 600;
    padding: 0.65rem 0.9rem;
}

/* ====================================================== */
/* Desktop Left Sidebar Navigation                         */
/* ====================================================== */

:root {
    --sidebar-width: 240px;
}

/* Свап знак↔полный логотип по ширине экрана убран: ряд шапки зажат
   --page-body-width (880px) и с экраном не растёт, поэтому полный логотип
   (~145px) на ≥1200px съедал запас ряда и ярлык «Ещё» резался до «Е..».
   В десктопной шапке теперь всегда компактный знак (см. MainLayoutHeader). */

/* Desktop experiment: top navigation replaces the left sidebar for now. */
@media (min-width: 992px) {
    :root {
        --app-header-height: calc(40px + 0.8rem);
    }

    .app-header--mobile {
        display: block !important;
    }

    .app-shell {
        flex-direction: column;
    }

    .app-sidebar {
        display: none !important;
    }

    .app-content-wrapper {
        margin-left: 0;
        flex: 1;
        min-height: calc(100vh - var(--app-header-height, 56px));
        min-height: calc(100dvh - var(--app-header-height, 56px));
        display: flex;
        flex-direction: column;
    }

    .app-content-wrapper .app-main {
        flex: 1;
    }

    .app-header--mobile .mobile-menu-sheet {
        display: none;
    }

    .app-header--mobile.mobile-menu-open {
        overflow: visible;
    }

    .app-header--mobile.mobile-menu-open .container {
        height: auto;
        padding-bottom: 0.4rem;
        gap: 0;
        box-sizing: border-box;
    }

    .app-header--mobile.mobile-menu-open .mobile-menu-sheet {
        position: fixed;
        top: calc(var(--app-header-height, 56px) + 0.5rem);
        /* Лист «Ещё» right-выровнен к правому краю контента (page-body-width, 880px): шапка
           сужена до ширины контента, кластер с «Ещё» стоит у этого края. */
        right: max(1rem, calc((100vw - var(--page-body-width, 880px)) / 2));
        left: auto;
        width: min(380px, calc(100vw - 2rem));
        max-height: calc(100dvh - var(--app-header-height, 56px) - 1rem);
        display: flex;
        flex-direction: column;
        min-height: 0;
        padding: 0.75rem 0 0;
        border: 1px solid var(--app-border);
        border-radius: 18px;
        background: var(--app-surface);
        box-shadow: 0 24px 60px rgba(15, 23, 42, 0.16), 0 2px 10px rgba(15, 23, 42, 0.08);
        overflow: hidden;
        align-items: stretch;
        z-index: 1100;
        /* Лёгкое открытие листа «Ещё» на десктопе (display:none→flex) — тот же fade+сдвиг,
           что у меню аккаунта. Только десктоп: на мобилке «Ещё» разворачивается на весь экран. */
        animation: hdr-dropdown-in 0.18s ease backwards;
    }

    .app-header--mobile.mobile-menu-open .mm-scroll {
        padding: 0 0.85rem 1rem;
    }

    /* Дубли верхней навигации (План/Задания/История/ИИ-помощник/Настроение) в меню «Ещё»
       скрыты на десктопе — они уже есть в топ-баре. На мобилке (<992px) строки видимы. */
    .app-header--mobile .mm-row--desktop-hide {
        display: none;
    }

    .app-header--mobile.mobile-menu-open .notification-panel {
        top: calc(var(--app-header-height, 56px) + 0.5rem);
        right: max(1rem, calc((100vw - var(--page-body-width, 880px)) / 2));
        left: auto;
        width: min(380px, calc(100vw - 2rem));
        max-width: calc(100vw - 2rem);
        max-height: calc(100dvh - var(--app-header-height, 56px) - 1rem);
    }

    /* NB: десктопный оверрайд .usage-popover (position:absolute; right:0) вынесен ВНИЗ,
       ПОСЛЕ базового правила .usage-popover, — иначе базовое (position:fixed; right:0.5rem)
       перебивало его по source-order при равной специфичности, и панель пинилась к правому
       краю вьюпорта (правее кольца, где справа ещё аватар). См. блок у base-правила. */
}

/* Mobile/Tablet: hide sidebar, show mobile header */
@media (max-width: 991px) {
    .app-sidebar {
        display: none !important;
    }

    .app-header--mobile {
        display: block;
    }

    .app-content-wrapper {
        margin-left: 0;
    }

    /* Нижняя навигация фиксирована — низ контента не должен прятаться под ней. */
    .app-main {
        padding-bottom: calc(var(--app-bottomnav-height, 59px) + env(safe-area-inset-bottom, 0px));
    }
}

/* Sidebar Header (Logo) — layout migrated to Tailwind */

/* Sidebar Navigation — layout migrated to Tailwind */

/* .sidebar-nav-link — layout migrated to Tailwind */
.sidebar-nav-link.active {
    color: var(--app-text);
    background: rgba(0, 0, 0, 0.04);
    font-weight: 500;
}

.sidebar-nav-divider {
    height: 1px;
    background: var(--app-border, #e5e7eb);
    margin: 0.5rem 1rem;
}

/* .sidebar-section-label — migrated to Tailwind */
.sidebar-section-label:first-child {
    margin-top: 0;
    padding-top: 0;
}

/* Collapsible admin toggle - sidebar (checkbox hack) */
.sidebar-admin-checkbox {
    display: none !important;
}

.sidebar-section-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    border: none;
    background: transparent;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--app-muted, #9ca3af);
    padding: 0.75rem 1rem 0.5rem;
    cursor: pointer;
    transition: color 0.2s ease;
}

.sidebar-section-toggle:hover {
    color: var(--app-accent);
}

.sidebar-admin-checkbox:checked ~ .sidebar-section-toggle {
    color: var(--app-accent);
}

.sidebar-section-chevron {
    margin-left: auto;
    transition: transform 0.2s ease;
    display: flex;
    align-items: center;
}

.sidebar-admin-checkbox:checked ~ .sidebar-section-toggle .sidebar-section-chevron {
    transform: rotate(180deg);
}

/* Animated submenu wrapper */
.sidebar-admin-submenu-wrapper {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 0.3s ease, opacity 0.25s ease;
}

.sidebar-admin-checkbox:checked ~ .sidebar-admin-submenu-wrapper {
    grid-template-rows: 1fr;
    opacity: 1;
}

.sidebar-admin-submenu-wrapper > .admin-submenu {
    overflow: hidden;
}

.sidebar-nav-link--nested {
    padding-left: 1.25rem;
}

/* Collapsible admin toggle - mobile */
.nav-section-toggle {
    display: none;
    align-items: center;
    gap: 0.35rem;
    border: none;
    background: transparent;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--app-muted, #9ca3af);
    padding: 0.25rem 0.75rem;
    cursor: pointer;
    transition: color 0.2s ease;
}

.nav-section-toggle:hover {
    color: var(--app-accent);
}

.nav-section-toggle.expanded {
    color: var(--app-accent);
}

.nav-section-chevron {
    transition: transform 0.2s ease;
    display: flex;
    align-items: center;
}

.nav-section-toggle.expanded .nav-section-chevron {
    transform: rotate(180deg);
}

/* Sidebar admin submenu items layout */
.sidebar-admin-submenu-wrapper .admin-submenu {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* Mobile admin submenu wrapper */
.nav-links .admin-submenu {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.25s ease;
}

.nav-links .admin-submenu--open {
    max-height: 600px;
    opacity: 1;
}

/* Multiline nav text */
.sidebar-nav-text--multiline {
    white-space: normal;
    line-height: 1.3;
}

.nav-link-multiline {
    line-height: 1.3;
}

/* .sidebar-nav-icon — migrated to Tailwind */

.sidebar-nav-icon svg {
    width: 20px;
    height: 20px;
}

/* .sidebar-nav-text — migrated to Tailwind */

/* Sidebar Footer — migrated to Tailwind */

/* Sidebar profile popover */
.sidebar-profile-popover {
    position: relative;
}

.sidebar-profile-overlay {
    position: fixed;
    inset: 0;
    z-index: 90;
    cursor: pointer;
}

/* .sidebar-profile-trigger — migrated to Tailwind */

/* Тот же облегчённый стиль, что у аватара мобильной шапки (.profile-toggle .avatar). */
.sidebar-profile-trigger .avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--app-accent) 12%, var(--app-surface));
    color: var(--app-accent);
    border: 1px solid color-mix(in srgb, var(--app-accent) 25%, transparent);
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 0.8rem;
    flex-shrink: 0;
}

/* .sidebar-profile-details, -name, -email — migrated to Tailwind */

.sidebar-profile-chevron {
    display: flex;
    align-items: center;
    color: var(--app-muted);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.sidebar-profile-popover.open .sidebar-profile-chevron {
    transform: rotate(180deg);
}

/* Popover menu (opens upward) */
.sidebar-profile-menu {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    right: 0;
    background: var(--app-surface);
    border: 1px solid var(--app-border, #e5e7eb);
    border-radius: var(--radius-md, 12px);
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12), 0 -1px 4px rgba(0, 0, 0, 0.06);
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
    padding: 0.375rem 0;
}

.sidebar-profile-popover.open .sidebar-profile-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.sidebar-profile-popover--topbar .sidebar-profile-overlay {
    z-index: 1095;
    /* .app-header (backdrop-filter) — containing block для position:fixed: базовый inset:0
       накрыл бы лишь полосу шапки, поэтому клик по странице не закрывал меню аккаунта.
       Явные 100vw/100dvh от низа шапки покрывают экран ниже (как .notification-overlay). */
    top: var(--app-header-height, 56px);
    left: 0;
    right: auto;
    bottom: auto;
    width: 100vw;
    height: 100dvh;
}

.sidebar-profile-popover--topbar .sidebar-profile-menu {
    top: calc(100% + 8px);
    right: 0;
    bottom: auto;
    left: auto;
    width: min(320px, calc(100vw - 2rem));
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.16), 0 2px 10px rgba(15, 23, 42, 0.08);
    z-index: 1100;
    transform: translateY(-8px);
}

.sidebar-profile-popover--topbar.open .sidebar-profile-menu {
    transform: translateY(0);
}

/* Sidebar profile menu items — migrated to Tailwind */
.sidebar-profile-menu-item svg {
    flex-shrink: 0;
    color: var(--app-muted);
}

.sidebar-profile-menu-item:hover svg {
    color: var(--app-accent, #5b57d6);
}

/* Sidebar "На главную" popover — выбор между главной приложения (/app)
   и публичной страницей (/). Открывается ВНИЗ от ссылки. Визуал пунктов —
   на Tailwind (см. .razor), здесь только позиционирование и анимация. */
.sidebar-home-popover {
    position: relative;
}

.sidebar-home-overlay {
    position: fixed;
    inset: 0;
    z-index: 90;
}

.sidebar-home-chevron {
    transition: transform 0.2s ease;
}

.sidebar-home-popover.open .sidebar-home-chevron {
    transform: rotate(180deg);
}

/* Меню выезжает вниз и выровнено под логотип, чтобы поместиться в 240px
   сайдбара (у него overflow:hidden). Сдвиг -46px = ширина логотипа (36px)
   + gap (10px): возвращает левый край меню к левому краю логотипа. */
.sidebar-home-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: -46px;
    width: 200px;
    background: var(--app-surface);
    border: 1px solid var(--app-border, #e5e7eb);
    border-radius: var(--radius-md, 12px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.06);
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
    padding: 0.375rem;
}

.sidebar-home-popover.open .sidebar-home-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Мобильный вариант «На главную» (.app-header--mobile): иконка-шеврон рядом с
   логотипом. Переиспользует .sidebar-home-* (анимация, открытие, шеврон), здесь —
   только поправки позиционирования под мобильную шапку. */
.mobile-home-popover .sidebar-home-menu {
    /* В сайдбаре меню absolute со сдвигом -46px под логотип. В мобильной шапке
       .app-header имеет backdrop-filter и служит containing-block для position:fixed —
       пользуемся этим: привязываем меню к левому краю шапки (под логотип) и ограничиваем
       ширину, чтобы на любой ширине экрана оно не выезжало за правый край. */
    position: fixed;
    top: calc(100% + 6px);
    left: 12px;
    right: auto;
    width: min(220px, calc(100vw - 24px));
}

.mobile-home-popover .sidebar-home-overlay {
    /* .app-header имеет backdrop-filter и становится containing block для
       position:fixed — inset:0 накрыл бы только полоску шапки. Явный размер во
       весь экран (как у .profile-overlay) ловит тап в любом месте. z-index ниже
       меню (100), но выше контента страницы (шапка — отдельный stacking-контекст). */
    inset: auto;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
}

/* Бэкдроп панели уведомлений: тап мимо панели закрывает её. На мобилке колокол
   живёт ВНУТРИ меню «Ещё», а .app-header c backdrop-filter — containing block для
   position:fixed, поэтому tw-inset-0 накрыл бы только шапку. Задаём явный размер во
   весь экран от левого-верхнего угла (тот же приём, что у .profile-overlay /
   .sidebar-home-overlay). cursor:pointer ОБЯЗАТЕЛЕН: iOS Safari не генерирует click
   по «не кликабельному» div без него — из-за этого тап по меню не закрывал панель. */
.notification-overlay {
    top: var(--app-header-height, 56px);
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    cursor: pointer;
}

/* Зона захвата BottomSheet за пределами scoped-стилей самого листа: собственные
   шапки FlushBody-панелей (список уведомлений, календарь-листалка) помечаем этим
   классом, чтобы за них тоже можно было тянуть лист вниз. touch-action:none гасит
   нативный ‘pull-to-refresh’ на первых пикселях протяжки — до того, как её
   перехватит bottom-sheet.js. Тапам по кнопкам внутри шапки не мешает. */
.bottom-sheet-drag-region {
    touch-action: none;
}

/* Лёгкое открытие выпадающих панелей шапки (как у меню аккаунта): fade + короткий
   сдвиг сверху. `backwards` — чтобы кадр 0% (opacity:0) применялся до старта и не было
   вспышки; НЕ `forwards`/`both` — иначе после анимации на элементе остался бы
   transform:translateY(0), а он = containing block для position:fixed потомков (см.
   reference_header_popover_transform_trap). Эти панели fixed-потомков не содержат. */
@keyframes hdr-dropdown-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ===== Notification dropdown panel =====
   Visual styles (width, surface, shadow) stay on the element as Tailwind utilities.
   Positioning lives here because the panel must escape the desktop sidebar's
   `overflow: hidden` and anchor differently on mobile vs desktop. */
.notification-panel {
    position: fixed;
    z-index: 1100; /* above the desktop sidebar (z-index: 1040) */
    max-height: 480px;
    /* Открытие как у меню аккаунта: панель невидима, пока список грузится (класс
       notif-ready навешивается по !isLoading), поэтому появляется УЖЕ заполненной —
       без «дёрганья» пустое→спиннер→контент, — а затем мягко проявляется. Transform
       на самой панели безопасен: position:fixed потомков у неё нет. */
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.16s ease, transform 0.16s ease;
}

.notification-panel.notif-ready {
    opacity: 1;
    transform: translateY(0);
}

/* Mobile/tablet: the bell lives top-right in the header bar →
   drop the panel down from under the header, right-aligned to the viewport.
   Cap the height to the viewport so it never overflows a short phone screen. */
@media (max-width: 991px) {
    .notification-panel {
        top: calc(var(--app-header-height, 56px) + 0.5rem);
        right: 0.5rem;
        left: auto;
        bottom: auto;
        max-width: calc(100vw - 1rem);
        max-height: calc(100dvh - var(--app-header-height, 56px) - 1rem);
    }
}

/* Desktop: the bell lives top-right in the header (топ-навигация заменила сайдбар,
   который здесь display:none). Раньше панель прижимали к правому краю центральной
   колонки body (right: (100vw - page-body-width)/2) — но на широких экранах (≥1440px)
   кластер «колокол/бюджет/профиль» вынесен ещё правее (position:absolute; left:100%+1rem),
   и панель оказывалась заметно ЛЕВЕЕ колокола. Якорим панель прямо к обёртке колокола
   (.notification-bell-wrapper — position:relative) через absolute: она сама встаёт под
   колокол, где бы кластер ни находился. Сайдбар на десктопе скрыт, его overflow:hidden
   больше не мешает, поэтому fixed для «побега» из сайдбара тут не нужен. */
@media (min-width: 992px) {
    .notification-panel {
        position: absolute;
        top: calc(100% + 0.5rem);
        right: 0;
        left: auto;
        bottom: auto;
    }
}

/* Поповер виджета «Расход» в мобильной шапке (.app-header--mobile). Колокол и
   виджет живут справа в шапке → роняем панель под шапку, прижав к правому краю
   вьюпорта, чтобы при центральной позиции пилюли она не уезжала за левый край
   (тот же приём, что у .notification-panel). Block-режим в десктопном сайдбаре
   позиционируется Tailwind-утилитами и сюда не попадает. */
.usage-popover {
    position: fixed;
    z-index: 1100; /* выше мобильной шапки (z-index: 1040) */
    top: calc(var(--app-header-height, 56px) + 0.5rem);
    right: 0.5rem;
    left: auto;
    width: 18rem;
    max-width: calc(100vw - 1rem);
    max-height: calc(100dvh - var(--app-header-height, 56px) - 1rem);
    overflow-y: auto;
    /* Лёгкое открытие (панель монтируется по клику) — тот же fade+сдвиг, что у меню аккаунта. */
    animation: hdr-dropdown-in 0.16s ease backwards;
}

/* Десктоп (≥992px): топ-навигация заменила сайдбар, кольцо расхода живёт в правом кластере,
   а справа от него — колокол/аватар. Базовое правило выше пинит панель к правому краю
   вьюпорта (right:0.5rem) — на десктопе это уводило её ПРАВЕЕ триггера. Якорим absolute к
   обёртке-триггеру (.tw-relative вокруг кольца, position:relative) — как .notification-panel —
   чтобы правый край панели совпадал с правым краем кольца. ВАЖНО: этот блок обязан идти ПОСЛЕ
   базового правила, иначе при равной специфичности source-order вернёт fixed. */
@media (min-width: 992px) {
    .usage-popover {
        position: absolute;
        top: calc(100% + 0.5rem);
        right: 0;
        left: auto;
        bottom: auto;
    }
}

/* ── Бейдж бюджета в десктопной шапке (UsageWidget TopbarPill) ──────────────────────
   Фиксированный кружок-кольцо: НЕ меняет размер и НЕ двигает соседние кнопки. Инфо
   (процент + остаток часов видео) показывается в floating-попапе (.budget-badge-pop) при
   наведении/фокусе — position:absolute, вне потока, поэтому раскладка не «съезжает».
   Клик открывает подробный поповер. TopbarPill рисуется только в десктоп-кластере (≥992px). */
.budget-badge-wrap {
    position: relative;
    display: inline-flex;
}

.budget-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    border-radius: 9999px;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.budget-badge:hover,
.budget-badge:focus-visible {
    background: var(--app-hover);
    outline: none;
}

/* Иконка-«карта» вместо кольца, когда бюджета нет (fallback «Подписка»). */
.budget-badge__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--app-muted);
}

/* Floating-попап под кружком: аккуратная карточка с процентом и остатком часов видео,
   появляется по наведению/фокусу. pointer-events:none — не перехватывает клики и не держит
   :hover на самом себе (поэтому попап гаснет, когда курсор ушёл с кружка). */
.budget-badge-pop {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 1101;
    min-width: 148px;
    padding: 10px 13px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    white-space: nowrap;
    border-radius: 12px;
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16), 0 3px 10px rgba(15, 23, 42, 0.07);
    opacity: 0;
    transform: translateY(-6px) scale(0.97);
    transform-origin: top right;
    pointer-events: none;
    transition: opacity 0.16s ease, transform 0.16s ease;
}

.budget-badge-wrap:hover .budget-badge-pop,
.budget-badge:focus-visible ~ .budget-badge-pop {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.budget-badge-pop__pct {
    font-size: 16px;
    font-weight: 700; /* как в открывающейся панели (tw-font-bold), не жирнее */
    line-height: 1;
}

.budget-badge-pop__sub {
    font-size: 12px;
    font-weight: 500;
    color: var(--app-muted);
}

/* Строка «с оплатой проблема» в попапе под кольцом. Раньше поповер молчал даже за сутки
   до отключения ИИ — предупреждения уходили только письмом и в телеграм. */
.budget-badge-pop__warn {
    margin-top: 2px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.25;
    /* У .budget-badge-pop nowrap — заголовок предупреждения длинный, разрешаем перенос
       и ограничиваем ширину, иначе попап растянулся бы через пол-экрана. */
    white-space: normal;
    max-width: 200px;
    color: #b45309;
}

.budget-badge-pop__warn--critical {
    color: #dc2626;
}

html.dark .budget-badge-pop__warn {
    color: #fbbf24;
}

html.dark .budget-badge-pop__warn--critical {
    color: #f87171;
}

/* Обёртка кольца в компактных режимах — якорь для значка «!» (в шапке рядом с кольцом
   идёт текст, и значок на краю кнопки оторвался бы от индикатора). */
.budget-ring-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

/* Значок «!» поверх кольца бюджета: подписка вот-вот отключится за неоплату либо уже
   приостановлена. Единственный след проблемы в шапке — поэтому заметный, но не сдвигающий
   раскладку (position:absolute). Обводка цветом подложки отделяет его от дуги кольца. */
.budget-badge__warn {
    position: absolute;
    top: -2px;
    right: -2px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 9999px;
    border: 2px solid var(--app-surface);
    background: #f59e0b;
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
    pointer-events: none;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.3);
}

.budget-badge__warn--critical {
    background: #ef4444;
    animation: budget-warn-pulse 2.4s ease-in-out infinite;
}

@keyframes budget-warn-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.18); }
}

@media (prefers-reduced-motion: reduce) {
    .budget-badge__warn--critical { animation: none; }
}

/* Hide Toast UI Editor toolbar when ShowToolbar=false */
.hide-toolbar .toastui-editor-toolbar {
    display: none !important;
}

/* AI Chat diff highlighting styles */
.diff-content {
    white-space: pre-wrap;
    word-wrap: break-word;
    line-height: 1.6;
}

.diff-added {
    background-color: rgba(34, 197, 94, 0.25);
    color: #166534;
    padding: 0.1em 0.2em;
    border-radius: 3px;
    text-decoration: none;
}

.diff-deleted {
    background-color: rgba(239, 68, 68, 0.25);
    color: #991b1b;
    padding: 0.1em 0.2em;
    border-radius: 3px;
    text-decoration: line-through;
}

/* AI Chat Message Bubbles - Mobile Optimized */
.ai-chat-messages {
    display: flex;
    flex-direction: column;
}

.ai-chat-message {
    animation: fadeInUp 0.2s ease-out;
}

.ai-chat-markdown p:last-child {
    margin-bottom: 0;
}

.ai-chat-markdown ul,
.ai-chat-markdown ol {
    margin-bottom: 0.5rem;
    padding-left: 1.5rem;
}

.ai-chat-markdown li {
    margin-bottom: 0.15rem;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Мобильный медиазапрос .mobile-chat-panel/.modal-footer удалён — целиком на
   Bootstrap-классах, потребителей в разметке нет (Bootstrap CDN выведен). */

/* ── Home dashboard ── */

.stat-card--link {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.stat-card--link:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    color: inherit;
}

.home-feature-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    position: relative;
}

.home-feature-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    color: inherit;
}

.home-feature-card__icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-feature-card--ai .home-feature-card__icon {
    background: linear-gradient(135deg, #8b84e3 0%, #6f69dd 100%);
    color: #fff;
}

.home-feature-card--mood .home-feature-card__icon {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: #fff;
}

.home-feature-card__arrow {
    margin-left: auto;
    font-size: 1.25rem;
    color: var(--app-muted);
    flex-shrink: 0;
}

.home-team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.75rem;
}

.home-team-member {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.home-team-avatar {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--app-accent-soft, rgba(91, 87, 214, 0.1));
    color: var(--app-accent, #5b57d6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    background-size: cover;
    background-position: center;
}

.home-team-name {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.2;
}

.home-team-role {
    font-size: 0.75rem;
    color: var(--app-muted);
}

.home-quick-link {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1rem 1.25rem;
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.home-quick-link:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    color: inherit;
}

.student-card-telegram {
    flex-shrink: 0;
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #2AABEE;
    color: #fff;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.student-card-telegram:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 14px rgba(42, 171, 238, 0.4);
    color: #fff;
}

.student-card-telegram:active {
    transform: scale(0.95);
}

@media (max-width: 640px) {
    .student-card-telegram {
        width: 34px;
        height: 34px;
    }

    .student-card-telegram svg {
        width: 18px;
        height: 18px;
    }
}

@media (max-width: 640px) {
    .home-feature-card {
        padding: 0.875rem 1rem;
        gap: 0.75rem;
    }

    .home-feature-card__icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
    }

    .home-feature-card__icon svg {
        width: 22px;
        height: 22px;
    }

    .home-feature-card h3 {
        font-size: 0.9rem;
    }

    .home-feature-card p {
        font-size: 0.8rem;
    }

    .home-team-grid {
        grid-template-columns: 1fr;
    }

    .home-quick-link {
        padding: 0.75rem 1rem;
    }

    .home-quick-link .h6 {
        font-size: 0.875rem;
    }
}

@media (max-width: 767px) {
    .dashboard-home section + section {
        margin-top: 0.75rem;
    }

    .dashboard-home .admin-grid {
        gap: 0.625rem;
        margin-bottom: 0.75rem;
    }
}

/* ── Transcription modal with video sync ── */

.transcription-modal-close {
    width: 1.25em;
    height: 1.25em;
    padding: 0.5em;
    opacity: 0.7;
    transition: opacity 0.15s ease;
}

.transcription-modal-close:hover {
    opacity: 1;
}

.transcription-modal-body {
    height: 70vh;
}

.transcript-line {
    display: flex;
    gap: 0.5rem;
    padding: 0.35rem 0.5rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.15s ease;
    font-size: 0.875rem;
    line-height: 1.4;
}

.transcript-line:hover {
    background-color: rgba(0, 0, 0, 0.06);
}

.transcript-line-active {
    background-color: rgba(13, 110, 253, 0.12) !important;
    border-left: 3px solid #0d6efd;
    padding-left: calc(0.5rem - 3px);
}

.transcript-time {
    flex-shrink: 0;
    font-family: monospace;
    font-size: 0.75rem;
    color: #6c757d;
    padding-top: 0.1rem;
    min-width: 3rem;
}

.transcript-text {
    white-space: pre-wrap;
    word-break: break-word;
}

.transcription-splitter {
    flex: 0 0 5px;
    cursor: col-resize;
    background: var(--app-border);
    transition: background-color 0.15s;
    align-items: stretch;
}

.transcription-splitter:hover,
.transcription-splitter.dragging {
    background: var(--app-accent);
}

/* ── Sidebar nav scrollbar — modern, minimal, theme-aware ─────────── */
.sidebar-nav {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--app-muted) 38%, transparent) transparent;
}
.sidebar-nav::-webkit-scrollbar { width: 6px; height: 6px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb {
    background-color: color-mix(in srgb, var(--app-muted) 32%, transparent);
    border-radius: 9999px;
}
.sidebar-nav::-webkit-scrollbar-thumb:hover {
    background-color: color-mix(in srgb, var(--app-muted) 55%, transparent);
}

/* ── Сканер видеоразбора — оверлей на превью попытки, пока идёт анализ ──────
   Полоса едет сверху вниз + мягкая индиго-подсветка поверх постера (когда
   видео НЕ проигрывается) — сразу видно, какие плитки сейчас анализируются.
   Тот же визуальный язык, что анимация разбора на лендинге (.ml-vr-scan в
   Landing.razor), но на токенах темы (--app-accent) и зациклен непрерывно.
   Классы ГЛОБАЛЬНЫЕ: одна реализация на обе плитки ленты — RenderFeedThumb
   в TaskAttemptHistory («Списком») и AttemptFeedTile («Плиткой» + дашборд).
   Декоративен (статус дублируется текстовой пилюлей под превью), клики
   проходят насквозь (pointer-events:none). */
.analysis-scan-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
    border-radius: inherit;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--app-accent) 22%, transparent),
        transparent 42%,
        color-mix(in srgb, var(--app-accent) 26%, transparent)
    );
    animation: analysis-scan-glow 2.6s ease-in-out infinite;
}

.analysis-scan-overlay__line {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    background: linear-gradient(
        90deg,
        transparent,
        color-mix(in srgb, var(--app-accent) 85%, #fff),
        transparent
    );
    box-shadow: 0 0 16px 3px color-mix(in srgb, var(--app-accent) 70%, transparent);
    animation: analysis-scan-sweep 2.6s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

@keyframes analysis-scan-sweep {
    0%   { top: 0;                 opacity: 0; }
    8%   {                         opacity: 1; }
    90%  {                         opacity: 1; }
    100% { top: calc(100% - 3px);  opacity: 0; }
}

@keyframes analysis-scan-glow {
    0%, 100% { opacity: 0.5; }
    50%      { opacity: 1; }
}

/* Уважаем «уменьшить движение»: гасим бег полосы, оставляем статичную
   индиго-подсветку — плитка всё равно читается как «анализируется». */
@media (prefers-reduced-motion: reduce) {
    .analysis-scan-overlay {
        animation: none;
        opacity: 0.85;
    }
    .analysis-scan-overlay__line {
        display: none;
    }
}

/* ═══ AiBotIcon (.abi) — мини-бот ИИ-помощника (Shared/AiBotIcon.razor) ═══
   Та же иконка и градиент, что у плавающей кнопки помощника (.aiw-fab в
   AiAssistantWidget.razor.css, акцент #786DE2): единый значок всех входов в ИИ
   («Спросить ИИ», материалы, правка задания). Лёгкая CSS-жизнь: моргание, взгляд
   по сторонам, покачивание головы и антенны. Фаза (--abi-phase, отрицательный
   delay) и темп (--abi-dur) рандомизируются компонентом на каждый инстанс —
   боты не совпадают ни с FAB (там пружинная JS-физика), ни друг с другом. */

.abi {
    display: inline-grid;
    place-items: center;
    width: var(--abi-size, 28px);
    height: var(--abi-size, 28px);
    flex: none;
    border-radius: 50%;
    color: #fff;
    /* Градиент FAB: верх светлее, низ темнее акцента — «выпуклый» кружок. */
    background: linear-gradient(158deg, #8b7eff 0%, #6057b5 100%);
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.28),
        inset 0 -2px 5px rgba(0, 0, 0, 0.16);
}

/* Плоский режим — без кружка (для цветных/градиентных кнопок): бот наследует
   цвет текста кнопки. */
.abi--plain {
    background: none;
    box-shadow: none;
    border-radius: 0;
    color: currentColor;
}

/* Тёмная тема: глобальное правило html.dark span перекрашивает span в --app-text —
   возвращаем боту белые штрихи (на кружке) и наследование (в плоском режиме). */
html.dark span.abi { color: #fff; }
html.dark span.abi--plain { color: inherit; }

.abi-svg {
    display: block;
    width: 68%;
    height: 68%;
    overflow: visible;
}

.abi--plain .abi-svg {
    width: 100%;
    height: 100%;
}

/* Группы SVG — те же «суставы», что у FAB-бота (голова/антенна/глаза). */
.abi-head {
    transform-box: view-box;
    transform-origin: 12px 14px;
    animation: abi-bob calc(5.3s * var(--abi-dur, 1)) ease-in-out infinite;
    animation-delay: var(--abi-phase, 0s);
}

.abi-antenna {
    transform-box: fill-box;
    transform-origin: right bottom;
    animation: abi-antenna-sway calc(3.9s * var(--abi-dur, 1)) ease-in-out infinite;
    animation-delay: calc(var(--abi-phase, 0s) * 0.7);
}

.abi-eyes {
    animation: abi-glance calc(8.7s * var(--abi-dur, 1)) ease-in-out infinite;
    animation-delay: calc(var(--abi-phase, 0s) * 1.4);
}

.abi-blink {
    transform-box: fill-box;
    transform-origin: center;
    animation: abi-blink calc(4.6s * var(--abi-dur, 1)) linear infinite;
    animation-delay: calc(var(--abi-phase, 0s) * 1.1);
}

/* Дыхание-покачивание головы. */
@keyframes abi-bob {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    30%      { transform: translateY(-0.35px) rotate(1.8deg); }
    55%      { transform: translateY(0.25px) rotate(-1.3deg); }
    80%      { transform: translateY(-0.1px) rotate(0.5deg); }
}

@keyframes abi-antenna-sway {
    0%, 100% { transform: rotate(0deg); }
    30%      { transform: rotate(-7deg); }
    65%      { transform: rotate(5deg); }
}

/* Взгляд: большую часть цикла прямо, изредка косится вправо/влево. */
@keyframes abi-glance {
    0%, 24%, 46%, 72%, 100% { transform: translate(0, 0); }
    28%, 40%                { transform: translate(1.1px, 0.2px); }
    52%, 66%                { transform: translate(-1.2px, -0.35px); }
}

/* Моргание: одиночное в начале цикла и двойное во второй половине. */
@keyframes abi-blink {
    0%, 8%, 14%, 57%, 63%, 66%, 72%, 100% { transform: scaleY(1); }
    11% { transform: scaleY(0.12); }
    60% { transform: scaleY(0.12); }
    69% { transform: scaleY(0.12); }
}

@media (prefers-reduced-motion: reduce) {
    .abi-head,
    .abi-antenna,
    .abi-eyes,
    .abi-blink {
        animation: none;
    }
}

/* ── Копирование в буфер (js/copy-text.js) ──────────────────────────────────
   Элемент [data-copy] на пару секунд получает атрибут data-copied — тогда
   вместо [data-copy-idle] показывается [data-copy-done] («Скопировано»).
   Селекторы с двумя атрибутами перевешивают одиночные tw-классы, поэтому
   display у done-состояния восстанавливается без !important. */
[data-copy] [data-copy-done] {
    display: none;
}

[data-copy][data-copied] [data-copy-idle] {
    display: none;
}

[data-copy][data-copied] [data-copy-done] {
    display: inline-flex;
}