/* ============================================================
   Светлая минималистичная тема с синим акцентом. Mobile-first.
   ============================================================ */
:root {
    /* Notion-style: светлый, почти белый фон с едва заметным голубым оттенком */
    --bg: #f6f8fc;
    --surface: #ffffff;
    --surface-2: #eef2fa;
    --border: #e2e8f3;
    --text: #16202e;
    --muted: #66728a;
    /* Насыщенный, достаточно тёмный синий — читается как акцент, не
       вымывается на белом фоне; пастельным остаётся только фон-подложка (--accent-bg) */
    --accent: #3457d5;
    --accent-dark: #2643b0;

    --green-dark: #15803d;
    --green: #16a34a;
    --orange: #c2660a;
    --red: #dc2626;
    --gray: #6b7280;

    --green-bg: #e1f6e7;
    --red-bg: #fdeaea;
    --orange-bg: #fbead9;
    --gray-bg: #eef1f6;
    --green-dark-bg: #cdefd6;
    --accent-bg: #e6ecfd;

    /* Шкала скруглений: мелкие элементы -> крупные поверхности */
    --radius-xs: 10px;
    --radius-sm: 14px;
    --radius: 20px;
    --radius-lg: 26px;

    /* Мягкие многослойные тени вместо жёстких границ */
    --shadow: 0 1px 2px rgba(22, 32, 46, 0.05), 0 8px 20px rgba(22, 32, 46, 0.06);
    --shadow-lift: 0 14px 34px rgba(22, 32, 46, 0.12);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* Явный сброс на интерактивных элементах — некоторые мобильные браузеры
   (особенно старые версии Chrome/WebView на Android) игнорируют это
   свойство на *, если оно не продублировано прямо на самом элементе:
   иначе при тапе по <select> внутри ячейки таблицы подсвечивается синим
   вся строка целиком, а не сам элемент. */
a, button, summary, select, tr, td, .btn, .cal-slot, .today-row { -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; height: 100%; }

body {
    margin: 0;
    font-family: "Golos Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
    font-size: 15.5px;
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { font-weight: 800; letter-spacing: -0.01em; color: var(--text); }

/* ===== Шапка =====
   Без backdrop-filter/blur: на слабых телефонах он подвешивает скролл —
   вместо "стеклянного" эффекта берём ровный непрозрачный фон + тень. */
.site-header {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 0 rgba(22,32,46,.02);
    position: sticky;
    top: 0;
    z-index: 20;
}
.header-inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}
.brand .logo { max-height: 52px; display: block; }
.brand-text { font-size: 21px; font-weight: 800; color: var(--text); letter-spacing: -0.02em; }

/* Пункты навигации — иконка + подпись, единый компонент .nav-link
   переиспользуется и в верхней строке (десктоп), и в нижнем таббаре (моб.) */
.main-nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.nav-icon { width: 19px; height: 19px; flex-shrink: 0; }
.nav-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--muted);
    font-weight: 600;
    font-size: 14px;
    padding: 9px 13px;
    border-radius: var(--radius-sm);
    position: relative;
    list-style: none;
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
}
.nav-link:hover, .main-nav a:hover { color: var(--accent-dark); background: var(--accent-bg); text-decoration: none; }
.nav-link[aria-current="page"], .nav-link.is-active { color: var(--accent-dark); background: var(--accent-bg); }
summary.nav-link::-webkit-details-marker { display: none; }
.nav-user { color: var(--text); font-size: 13.5px; font-weight: 700; padding: 9px 6px; }
.nav-dropdown-name { display: none; }
.nav-dropdown-theme { display: none; }
.nav-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--red);
    margin-left: 2px;
    vertical-align: top;
}

/* ===== Основной контейнер ===== */
.site-main {
    max-width: 960px;
    width: 100%;
    margin: 0 auto;
    padding: 18px 14px 70px;
    flex: 1 0 auto;
    box-sizing: border-box;
}
/* Немного воздуха перед футером на телефоне — саму защиту от нижнего
   таббара обеспечивает padding-bottom футера (см. ниже), не дублируем тут. */
@media (max-width: 760px) {
    .site-main { padding-bottom: 26px; }
}

.site-footer {
    text-align: center;
    color: var(--muted);
    font-size: 12px;
    padding: 20px 0 40px;
}

/* ===== Заголовки страниц ===== */
.page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
}
.page-head h1 { margin: 0; font-size: 21px; }
.head-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.muted { color: var(--muted); font-weight: 400; font-size: 14px; }
.back-link { font-size: 13px; color: var(--muted); }
.back-link:hover { color: var(--accent); }

/* ===== Карточки форм ===== */
.form-card, .auth-box {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px;
    max-width: 520px;
    box-shadow: var(--shadow);
}
.auth-box { margin: 8vh auto 40px; }
.auth-box h1 { margin-top: 0; font-size: 19px; }
.auth-hint { color: var(--muted); font-size: 13px; margin-top: 14px; text-align: center; }

form label {
    display: block;
    margin-bottom: 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
}
form input[type=text],
form input[type=password],
form input[type=date],
form input[type=time],
form input[type=number],
form input[type=url],
form input[type=file],
form select,
form textarea {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 11px 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    font-size: 15px;
    font-family: inherit;
    background: var(--surface);
    color: var(--text);
    -webkit-appearance: none;
}
form input:focus, form select:focus, form textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-bg);
}
form textarea { resize: vertical; }
.checkbox-label { display: flex; align-items: center; gap: 8px; font-weight: 500; color: var(--text); cursor: pointer; }
.checkbox-label input { width: auto; margin: 0; cursor: pointer; }
.field-hint { display: block; color: var(--muted); font-size: 12px; font-weight: 400; margin-top: 4px; }

.btn {
    display: inline-block;
    padding: 12px 20px;
    border-radius: var(--radius-sm);
    border: none;
    font-size: 14.5px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
    transition: background .12s ease, border-color .12s ease, color .12s ease, transform .08s ease, box-shadow .12s ease;
}
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--accent); color: #ffffff; box-shadow: 0 1px 2px rgba(22,32,46,.08); }
.btn-primary:hover { background: var(--accent-dark); text-decoration: none; color: #fff; box-shadow: 0 4px 14px rgba(52,87,213,.28); }
.btn-ghost { background: var(--surface); color: var(--text); border: 1px solid var(--border); }
.btn-ghost:hover { text-decoration: none; border-color: var(--accent); color: var(--accent-dark); background: var(--accent-bg); }
.btn-block { display: block; width: 100%; white-space: normal; }
.btn-sm { padding: 7px 12px; font-size: 12.5px; border-radius: var(--radius-xs); }

/* ===== Панель поиска/фильтров ===== */
.toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px;
    box-shadow: var(--shadow);
}
.toolbar input[type=text], .toolbar select {
    display: inline-block;
    width: auto;
    margin-top: 0;
    padding: 9px 10px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: 14px;
}
.toolbar form { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; align-items: center; }
.toolbar input[type=text] { flex: 1 1 220px; min-width: 160px; }

/* ===== Общая статистика ===== */
.stats-row { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.text-red { color: var(--red); }
.text-green { color: var(--green); }
.text-orange { color: var(--orange); }
.text-accent { color: var(--accent); }

/* ===== Список учеников (карточки) ===== */
.student-list { display: flex; flex-direction: column; gap: 10px; }
.student-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 18px;
    box-shadow: var(--shadow);
    transition: box-shadow .15s ease, border-color .15s ease;
}
@media (hover: hover) and (pointer: fine) {
    .student-card:hover { border-color: #d7e0f7; box-shadow: var(--shadow-lift); }
}
.student-name a { color: var(--text); }
.student-name a:hover { color: var(--accent-dark); }
.student-card-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
.student-name { font-size: 16px; font-weight: 700; }
.student-login { color: var(--muted); font-size: 13px; }
.student-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
    font-size: 12.5px;
    color: var(--muted);
}
.student-actions {
    margin-top: 10px;
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 13.5px;
    font-weight: 600;
}
.danger-link { color: var(--red); }
.next-lesson-form { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.next-lesson-form input[type=date] {
    width: auto;
    margin: 0;
    padding: 6px 8px;
    font-size: 13px;
}
.due-today { color: var(--orange); font-weight: 700; }
.overdue { color: var(--red); font-weight: 700; }

/* ===== Таблица ===== */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td { padding: 10px 12px; text-align: left; font-size: 14px; }

/* ===== Бейджи ===== */
.badge {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}
.badge-green { background: var(--green-bg); color: var(--green); }
.badge-red { background: var(--red-bg); color: var(--red); }
.badge-gray { background: var(--gray-bg); color: var(--muted); }
.badge-grade-5 { background: var(--green-dark-bg); color: var(--green-dark); }
.badge-grade-4 { background: var(--green-bg); color: var(--green); }
.badge-grade-3 { background: var(--orange-bg); color: var(--orange); }
.badge-grade-2 { background: var(--red-bg); color: var(--red); }
.badge-grade-n { background: var(--gray-bg); color: var(--gray); }
.badge-grade-none { background: var(--gray-bg); color: var(--muted); }

/* ===== Карточки занятий ===== */
.lesson-list { display: flex; flex-direction: column; gap: 12px; }
.lesson-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 18px;
    box-shadow: var(--shadow);
    transition: box-shadow .15s ease, border-color .15s ease;
}
.lesson-card:hover { border-color: #d7e0f7; box-shadow: var(--shadow-lift); }
.lesson-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
    font-size: 14.5px;
}
.lesson-date { font-weight: 700; }
.lesson-card p { margin: 6px 0; font-size: 13.5px; color: var(--text); }
.lesson-card p b { color: var(--muted); font-weight: 600; }
.lesson-card-actions { margin-top: 10px; display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; font-weight: 600; }

.hw-quick-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.hw-quick-actions form { display: inline; }

.lesson-images { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.thumb {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid var(--border);
}
.thumb-wrap { text-align: center; font-size: 11px; }
.logo-preview { max-height: 60px; }

/* ===== Прочее ===== */
.section-title { font-size: 15px; margin: 26px 0 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.moodle-btn { display: inline-block; margin-top: 6px; }
.notes-box {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 13.5px;
    margin-bottom: 14px;
}

.alert {
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 13.5px;
    margin-bottom: 14px;
}
.alert-error { background: var(--red-bg); color: var(--red); }
.alert-success { background: var(--green-bg); color: var(--green); }
.alert-warning { background: var(--orange-bg); color: var(--orange); }

.empty-state { color: var(--muted); font-style: italic; }

/* ===== Десктоп ===== */
@media (min-width: 720px) {
    body { font-size: 15.5px; }
    .site-main { padding: 30px 20px 80px; }
    .page-head h1 { font-size: 25px; }
    .form-card { padding: 24px; }
}

/* ===== v3: аватары, прогресс-бары, блок Moodle ===== */
:root {
    --orange-bg2: #ece9fb;
}
.badge-orange { background: var(--orange-bg); color: var(--orange); }

.avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--accent-bg);
    color: var(--accent-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 15px;
    flex-shrink: 0;
}
.avatar-sm { width: 34px; height: 34px; font-size: 13px; }

.progress-bar {
    background: var(--gray-bg);
    border-radius: 20px;
    height: 6px;
    overflow: hidden;
    margin-top: 6px;
}
.progress-bar-fill {
    background: var(--accent);
    height: 100%;
    border-radius: 20px;
}

.moodle-block {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-bottom: 16px;
    box-shadow: var(--shadow);
}
.moodle-block-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}
.moodle-summary {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    margin-top: 10px;
}
.moodle-summary > div { min-width: 140px; }

.code-box {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
    word-break: break-all;
    margin: 8px 0;
}

/* ===== v4: пробники, простая таблица, аккуратные бейджи ===== */
.badge-blue-outline { background: var(--accent-bg); color: var(--accent-dark); }

.simple-table {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}
.simple-table th {
    background: var(--surface-2);
    color: var(--muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: 10px 14px;
    text-align: left;
}
.simple-table td {
    padding: 10px 14px;
    border-top: 1px solid var(--border);
    font-size: 13.5px;
    vertical-align: middle;
    text-align: center;
}
.simple-table tr:first-child td { border-top: none; }
.simple-table tbody tr { transition: background .1s ease; }
/* Наведение — только у преподавателя на компьютере: строки этих таблиц не
   кликабельны целиком (только отдельные контролы внутри), а на телефоне
   :hover эмулируется тапом и "залипает" — поэтому эффект только там, где
   он честно означает "мышь навелась", и только в админке. */
@media (hover: hover) and (pointer: fine) {
    body.role-admin .simple-table tbody tr:hover td { background: var(--surface-2); }
}

.goal-box {
    background: linear-gradient(135deg, var(--accent-bg), var(--surface));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-bottom: 16px;
}
.goal-box .goal-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--accent-dark);
    font-weight: 700;
}
.goal-box p {
    margin: 6px 0 0;
    font-size: 14px;
    color: var(--text);
}

/* ===== Таблица занятий: закруглённые строки-карточки, всё по центру ===== */
.lessons-table {
    border-collapse: separate;
    border-spacing: 0 8px;
    /* На телефоне долгий тап по ячейке иначе выделяет текст вместо простого
       нажатия на контрол (селект статуса, меню действий) — визуально
       выглядит как "залипание" синим выделением. */
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}
.lessons-table thead th {
    border: none;
    background: transparent;
    color: var(--muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 700;
    padding: 0 14px 6px;
}
.lessons-table tbody tr {
    background: var(--surface);
    box-shadow: var(--shadow);
    transition: box-shadow .12s ease;
}
@media (hover: hover) and (pointer: fine) {
    body.role-admin .lessons-table tbody tr:hover { box-shadow: var(--shadow-lift); }
}
.lessons-table tbody td {
    border-top: none;
    padding: 12px 14px;
    text-align: center;
    vertical-align: middle;
    font-size: 13.5px;
}
.lessons-table tbody td:first-child { border-radius: 14px 0 0 14px; }
.lessons-table tbody td:last-child { border-radius: 0 14px 14px 0; }
.lessons-table .topic-cell { max-width: 320px; text-align: left; }
.lessons-table .topic-cell .topic-line { text-align: left; }
.lessons-table .hw-text { text-align: left; }

/* Селекты быстрого редактирования — компактные закруглённые "таблетки" с цветом статуса */
.lessons-table .hw-select {
    padding: 5px 10px;
    font-size: 11.5px;
    font-weight: 600;
    border-radius: 20px;
    border: 1px solid transparent;
    background: var(--gray-bg);
    color: var(--muted);
    text-align: center;
    text-align-last: center;
    cursor: pointer;
    transition: filter .1s ease;
}
.lessons-table .hw-select:hover { filter: brightness(0.97); }
.lessons-table .hw-select:focus { outline: none; box-shadow: 0 0 0 3px var(--accent-bg); }
.hw-state-done .hw-select, .hw-state-paid .hw-select { background: var(--green-bg); color: var(--green); }
.hw-state-not_done .hw-select, .hw-state-unpaid .hw-select { background: var(--red-bg); color: var(--red); }
.hw-state-pending .hw-select { background: var(--gray-bg); color: var(--muted); }
.hw-state-grade-5 .hw-select { background: var(--green-dark-bg); color: var(--green-dark); }
.hw-state-grade-4 .hw-select { background: var(--green-bg); color: var(--green); }
.hw-state-grade-3 .hw-select { background: var(--orange-bg); color: var(--orange); }
.hw-state-grade-2 .hw-select { background: var(--red-bg); color: var(--red); }
.hw-state-grade-n .hw-select, .hw-state-grade-none .hw-select { background: var(--gray-bg); color: var(--gray); }

.tab-nav { display: flex; gap: 6px; margin-bottom: 18px; flex-wrap: wrap; }
.tab-nav a {
    padding: 9px 15px;
    border-radius: var(--radius-sm);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--muted);
    background: var(--surface);
    border: 1px solid var(--border);
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.tab-nav a:hover { color: var(--accent-dark); background: var(--accent-bg); border-color: var(--accent-bg); text-decoration: none; }
.tab-nav a.active { color: var(--accent-dark); background: var(--accent-bg); border-color: var(--accent-bg); font-weight: 700; }

/* ===== v5: донат-диаграмма, компактные плашки, подсветка строк, архив ===== */
.profile-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 16px;
}
.profile-identity { display: flex; align-items: center; gap: 14px; }
.profile-identity h1 { margin: 0 0 2px; font-size: 20px; }
.profile-sub { color: var(--muted); font-size: 13px; }
.profile-goal { color: var(--accent-dark); font-size: 13px; font-weight: 600; margin-top: 2px; }

.info-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}
.info-pill {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 7px 14px;
    font-size: 12.5px;
    box-shadow: var(--shadow);
}
.info-pill .pill-label { color: var(--muted); }
.info-pill .pill-value { font-weight: 700; color: var(--text); }
.info-pill.pill-warn .pill-value { color: var(--red); }
.info-pill.pill-ok .pill-value { color: var(--green); }
.info-pill.pill-today .pill-value { color: var(--orange); }


.archive-toggle {
    margin-top: 10px;
    font-size: 13px;
}
.archive-toggle summary {
    cursor: pointer;
    color: var(--muted);
    font-weight: 600;
    padding: 8px 2px;
}
.archive-toggle summary:hover { color: var(--accent); }

.photo-upload-form { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.photo-upload-form input[type=file] { font-size: 12px; }

.secondary-nav { display: flex; gap: 16px; margin: 26px 0 4px; font-size: 13.5px; }
.secondary-nav a { color: var(--muted); font-weight: 600; }
.secondary-nav a:hover { color: var(--accent); }

/* ===== v6: фоновая текстура, мобильная таблица, ДЗ-акцент, аватар по клику ===== */

/* Едва заметный фоновый узор, медленно смещается */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image: url("../img/bg-pattern.svg");
    background-repeat: repeat;
    background-size: 260px 260px;
    opacity: 0.05;
    animation: bg-drift 90s linear infinite;
    pointer-events: none;
}
@keyframes bg-drift {
    0%   { background-position: 0 0; }
    100% { background-position: 520px 260px; }
}

/* Заголовки таблиц по центру */
.simple-table th, .data-table th { text-align: center; }

/* Тема занятия крупнее и жирнее, ДЗ — мельче и обычным текстом под ней */
.topic-line { font-weight: 700; color: var(--text); font-size: 14px; }
@media (max-width: 700px) {
    .topic-line { font-size: 13.5px; line-height: 1.3; }
    .hw-text { font-size: 12.5px; margin-top: 3px; }
    .lessons-table td.topic-cell { padding: 4px 0 6px; }
    .lessons-table .badge { font-size: 11px; padding: 2px 8px; }
}
.hw-text { font-size: 12px; color: var(--muted); margin-top: 4px; line-height: 1.4; }
.hw-text b { color: var(--text); font-weight: 600; }

/* Раскрытие длинного текста (ДЗ, заметки) — ограничение по высоте (в
   строках), а не по числу символов: одинаково аккуратно смотрится в узкой
   ячейке таблицы и в широком блоке заметок, не обрезает слова посередине. */
.expand-wrap .expand-body {
    max-height: 4.3em; /* около 3 строк при line-height 1.4 */
    overflow: hidden;
}
.expand-wrap.expand-open .expand-body { max-height: none; }
.expand-btn {
    display: block;
    margin-top: 4px;
    padding: 0;
    background: none;
    border: none;
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    color: var(--accent);
    cursor: pointer;
    /* Иначе на телефоне при нажатии весь текст на миг заливало синей
       подсветкой браузера по умолчанию — выглядело как визуальный глюк */
    -webkit-tap-highlight-color: transparent;
}
.expand-btn:hover { text-decoration: underline; }
/* Текст физически не обрезан (уместился в отведённые 3 строки, часто
   бывает на широком экране или при коротковатом тексте чуть за порогом
   в 110 символов) — тогда кнопка "Развернуть" не нужна и только сбивает
   с толку: клик по ней ничего не меняет, ведь скрывать нечего. Прячем её
   через JS после отрисовки (см. header.php) сравнением scrollHeight. */
.expand-wrap.no-clip .expand-btn { display: none; }

/* Аватар/фото — клик открывает выбор файла */
.avatar-edit {
    position: relative;
    display: inline-block;
    cursor: pointer;
    border-radius: 50%;
}
.avatar-edit input[type=file] {
    position: absolute;
    inset: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}
.avatar-edit-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.55);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    border-radius: 50%;
    opacity: 0;
    transition: opacity .15s ease;
    text-align: center;
    pointer-events: none;
}
.avatar-edit:hover .avatar-edit-overlay { opacity: 1; }
.avatar-photo {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    border: 1px solid var(--border);
    flex-shrink: 0;
}
.avatar-photo-sm { width: 34px; height: 34px; }

/* Курсы Moodle — несколько строк на профиле */
.moodle-course-row { padding: 10px 0; border-top: 1px solid var(--border); }
.moodle-course-row:first-of-type { border-top: none; }
.moodle-course-label { font-weight: 700; font-size: 13px; color: var(--text); margin-bottom: 4px; }

/* Контейнер таблицы — на мобильном превращается в карточки */
.table-scroll { width: 100%; }

/* ===== Мобильная адаптация таблиц ===== */
@media (max-width: 700px) {
    .lessons-table { border-spacing: 0; }
    .lessons-table thead, .simple-table thead { display: none; }
    .lessons-table, .lessons-table tbody, .lessons-table tr, .lessons-table td,
    .simple-table, .simple-table tbody, .simple-table tr, .simple-table td { display: block; width: 100%; }
    .lessons-table tr, .simple-table tr {
        border: 1px solid var(--border);
        border-radius: 14px;
        margin-bottom: 8px;
        padding: 10px 12px;
        background: var(--surface);
        box-shadow: var(--shadow);
    }
    /* .cell-check исключён отсюда: вне режима выбора он должен быть скрыт
       (display:none), а это правило иначе перебивало бы скрытие своей
       специфичностью — из-за чего чекбоксы были видны на телефоне всегда,
       а не только при нажатой "Выбрать несколько" */
    .lessons-table td:not(.cell-check), .simple-table td:not(.cell-check) {
        border-top: none;
        padding: 2px 0;
        font-size: 13px;
        min-height: 0;
        line-height: 1.35;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        text-align: right;
    }
    .lessons-table tbody td:first-child,
    .lessons-table tbody td:last-child { border-radius: 0; }
    .lessons-table td.topic-cell {
        display: block;
        text-align: left;
        padding: 2px 0 8px;
        margin-bottom: 4px;
        border-bottom: 1px solid var(--border);
    }
    .lessons-table td.topic-cell .topic-line { text-align: left; padding-right: 0; }
    .lessons-table td.topic-cell::before { content: none; }
    .lessons-table td.topic-cell .hw-text,
    .lessons-table td.topic-cell .muted { padding-right: 0; }
    .lessons-table .hw-text { margin-left: 0; text-align: left; max-width: none; }
    .lessons-table td::before, .simple-table td::before {
        content: attr(data-label);
        font-size: 10px;
        font-weight: 700;
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: .03em;
        text-align: left;
        flex-shrink: 0;
    }
    .lessons-table td[data-label=""]::before,
    .simple-table td[data-label=""]::before,
    .simple-table td:not([data-label])::before { display: none; }
    .lessons-table .hw-select { max-width: 140px; }
}

/* ===== Футер с контактами ===== */
.site-footer-contacts {
    text-align: center;
    padding: 22px 0 8px;
    color: var(--muted);
    font-size: 13px;
}
.site-footer-contacts .name { font-weight: 700; color: var(--text); }
.site-footer-contacts .site { margin-top: 2px; font-size: 11.5px; letter-spacing: .04em; }
/* Футер идёт сразу после .site-main — ему нужен тот же отступ снизу под
   нижний таббар (≈60-90px с учётом safe-area), иначе имя/домен прячутся
   под фиксированной панелью, когда страница короче экрана. */
@media (max-width: 760px) {
    .site-footer-contacts { padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
}


/* ===== Выпадающее меню в шапке "Ещё" =====
   Визуал самой кнопки задаёт .nav-link (см. выше) — тут только позиционирование
   и поведение самого раскрывающегося списка. */
.nav-dropdown { position: relative; display: inline-block; }
.nav-dropdown summary { list-style: none; }
.nav-dropdown summary::-webkit-details-marker { display: none; }
.nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 56;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lift);
    padding: 6px;
    min-width: 220px;
    display: flex;
    flex-direction: column;
    /* Пунктов меню со временем стало много — без этого список обрезался
       краем экрана без возможности пролистать. overscroll-behavior не даёт
       прокрутке "перетечь" на страницу целиком, когда доскроллили до конца
       списка — иначе именно это и закрывало меню (см. JS ниже). */
    max-height: min(70vh, 480px);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.nav-dropdown-menu a, .nav-dropdown-theme {
    padding: 10px 12px;
    border-radius: var(--radius-xs);
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    transition: background .12s ease;
}
.nav-dropdown-menu a:hover, .nav-dropdown-theme:hover { background: var(--surface-2); text-decoration: none; }
.nav-dropdown-theme {
    display: none;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    font: inherit;
    cursor: pointer;
}
.nav-dropdown-theme .theme-icon-dark { display: none; }
[data-theme="dark"] .nav-dropdown-theme .theme-icon-light { display: none; }
[data-theme="dark"] .nav-dropdown-theme .theme-icon-dark { display: inline; }
.nav-dropdown-menu .danger-link { color: var(--red); }
.nav-dropdown-menu .danger-link:hover { background: var(--red-bg); }
.nav-dropdown-menu a.danger-link .nav-icon,
.nav-dropdown-menu a .nav-icon { width: 16px; height: 16px; margin-right: 4px; vertical-align: -3px; }

/* ===== Сворачиваемый блок "Подробнее" ===== */
.details-toggle { margin-bottom: 16px; }
.details-toggle summary {
    cursor: pointer;
    list-style: none;
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
    display: inline-block;
}
.details-toggle summary::-webkit-details-marker { display: none; }
.details-toggle summary::before { content: "+ "; }
.details-toggle[open] summary::before { content: "− "; }

/* ===== Донат посещаемости ===== */
.donut-wrap { display: flex; align-items: center; gap: 12px; }
.donut {
    width: 72px; height: 72px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.donut-hole {
    width: 56px; height: 56px; border-radius: 50%;
    background: var(--surface);
    display: flex; align-items: center; justify-content: center;
    flex-direction: column;
}
.donut-hole span { font-weight: 800; font-size: 16px; color: var(--text); letter-spacing: -0.02em; }
.donut-caption { font-size: 12px; color: var(--muted); font-weight: 600; }

/* ===== Компактные плашки статистики (главная) ===== */
.stat-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.stat-chip {
    display: flex;
    align-items: baseline;
    gap: 7px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 7px 15px;
    font-size: 13px;
    color: var(--muted);
    text-decoration: none;
}
.stat-chip b { font-size: 15px; font-weight: 800; color: var(--text); letter-spacing: -0.02em; }
a.stat-chip:hover { border-color: var(--accent); text-decoration: none; }
.stat-chip.is-warn b { color: var(--red); }
.stat-chip.is-ok b { color: var(--green); }

/* ===== Подсветка строки с невыполненным ДЗ ===== */
.lessons-table tbody tr.row-hw-pending td { background: #fffdf5; }
.lessons-table tbody tr.row-hw-pending td:first-child {
    box-shadow: inset 3px 0 0 var(--accent);
}
/* ===== Подсветка строки с неявкой (санкция) — едва заметная, чтобы не резала глаз ===== */
.lessons-table tbody tr.row-no-show td { background: rgba(220, 38, 38, 0.05); }
.lessons-table tbody tr.row-no-show td:first-child {
    box-shadow: inset 3px 0 0 rgba(220, 38, 38, 0.45);
}
.no-show-note {
    text-align: center;
    font-weight: 700;
    color: var(--red);
    font-size: 13px;
}
.link-btn {
    background: none; border: none; padding: 0; cursor: pointer;
    font: inherit; color: var(--muted); text-decoration: underline;
}
.link-btn:hover { color: var(--accent); }


/* ===== Календарь расписания (месяц, без горизонтальной прокрутки) ===== */
.cal { margin-bottom: 12px; }
.cal-head, .cal-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
}
.cal-head {
    margin-bottom: 4px;
}
.cal-head div {
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    padding-bottom: 4px;
}
.cal-day {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 5px 5px 6px;
    min-height: 74px;
    position: relative;
}
.cal-out { opacity: .4; }
.cal-past { background: #fafbfc; }
.cal-today { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.cal-date {
    position: relative;
    display: flex; align-items: center; justify-content: space-between;
    font-size: 11px; font-weight: 700; color: var(--muted); margin-bottom: 4px;
}
.cal-add {
    background: none; border: none; cursor: pointer; padding: 0 2px;
    color: var(--border); font-size: 14px; line-height: 1; font-weight: 700;
}
.cal-day:hover .cal-add { color: var(--accent); }
.cal-today .cal-date { color: var(--accent); }

.cal-slot {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    line-height: 1.25;
    padding: 3px 5px;
    border-radius: 8px;
    margin-bottom: 3px;
    border-left: 3px solid transparent;
}
.cal-slot-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-slot-time { font-size: 10px; font-weight: 700; opacity: .75; }
.cal-slot.slot-done  { background: var(--green-bg);  border-left-color: var(--green);  color: var(--green-dark); }
.cal-slot.slot-plan  { background: var(--gray-bg);   border-left-color: var(--gray);   color: var(--muted); }
/* "Запланировано", но дата уже прошла — вероятно, забыли отметить.
   Остаётся серым, как обычный план (не хочется ярких цветов), но чуть
   заметнее: более плотная полоса слева и текст чуть темнее нейтрального. */
.cal-slot.slot-plan-overdue {
    background: var(--gray-bg);
    border-left-color: var(--muted);
    border-left-width: 4px;
    color: var(--text);
}
.cal-slot.slot-off   { background: var(--red-bg);    border-left-color: var(--red);    color: var(--red); }
.cal-slot.slot-moved { background: var(--orange-bg); border-left-color: var(--orange); color: var(--orange); }
.cal-slot.slot-moved .cal-slot-name { text-decoration: line-through; opacity: .8; }
/* Неявка — не то же самое, что отмена (тут санкция, ученик был должен
   прийти и не пришёл), поэтому цвет отдельный, не путаем с обычным "off" */
.cal-slot.slot-no_show { background: var(--red-bg); border-left-color: var(--red); color: var(--red); }
.cal-slot.slot-no_show .cal-slot-name::after { content: " ⚠"; }
.cal-slot.slot-movedin { background: var(--accent-bg); border-left-color: var(--accent); color: var(--accent-dark); }
.cal-slot.slot-movedin .cal-slot-name::before { content: "→ "; font-weight: 700; }
.cal-slot-group { color: var(--accent); font-weight: 900; flex-shrink: 0; }

.cal-slot-menu {
    background: none; border: none; padding: 0 2px; cursor: pointer;
    color: var(--muted); font-size: 13px; line-height: 1; flex-shrink: 0;
}
.cal-slot-menu:hover { color: var(--accent); }

/* Всплывающая форма — поверх сетки, не растягивает ячейку */
.cal-pop {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 40;
    width: 190px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(16,24,40,.16);
    padding: 8px;
}
.cal-pop.open { display: block; }
.cal-pop-title { font-size: 12px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.cal-pop-note { font-size: 11px; color: var(--muted); margin-bottom: 6px; line-height: 1.35; }
.cal-pop hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 9px 0;
}
.cal-pop-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted);
    margin-bottom: 5px;
}
.cal-day:nth-child(7n) .cal-pop,
.cal-day:nth-child(7n-1) .cal-pop { left: auto; right: 0; }
.cal-pop select, .cal-pop input {
    display: block; width: 100%; margin: 0 0 6px;
    padding: 5px 7px; font-size: 11.5px; border-radius: 8px;
    border: 1px solid var(--border); background: var(--surface); color: var(--text);
}

.cal-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--muted); margin-bottom: 18px; }
.cal-legend .lg { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: middle; }
.lg-done { background: var(--green); }
.lg-plan { background: var(--gray); }
.lg-off { background: var(--red); }
.lg-moved { background: var(--orange); }
.lg-overdue { background: var(--gray-bg); border-left: 4px solid var(--muted); }
.lg-movedin { background: var(--accent); }
.lg-no_show { background: var(--red); }

.done-row { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; padding: 3px 0; font-size: 13px; }
.done-num { color: var(--muted); font-weight: 700; min-width: 18px; }

/* На телефоне календарь превращается в вертикальный список дней */
@media (max-width: 700px) {
    .cal-head { display: none; }
    .cal-grid { display: block; }
    .cal-day {
        display: none;
        min-height: 0;
        margin-bottom: 6px;
        padding: 8px 10px;
    }
    /* показываем только дни, где что-то есть */
    .cal-day:has(.cal-slot) { display: block; }
    .cal-out { display: none !important; }
    .cal-date {
        font-size: 13px;
        color: var(--text);
        margin-bottom: 6px;
        padding-bottom: 5px;
        border-bottom: 1px solid var(--border);
    }
    .cal-date::after {
        content: attr(data-full);
        font-weight: 500;
        color: var(--muted);
        font-size: 11.5px;
        margin-left: 6px;
    }
    .cal-slot { font-size: 13px; padding: 6px 8px; margin-bottom: 4px; }
    .cal-slot-name { white-space: normal; }
    .cal-slot-time { display: inline; font-size: 11px; }
    .cal-pop { width: calc(100% - 20px); left: 10px; right: auto; }
    .cal-add { font-size: 18px; color: var(--accent); }
}

/* Компактный инлайн-фильтр в строке статистики */
.inline-filter { display: inline-flex; }
.inline-filter select {
    display: inline-block;
    width: auto;
    margin: 0;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
}
.inline-filter select:hover { border-color: var(--accent); }

/* Разовое занятие вне регулярного расписания */
.cal-slot.slot-extra .cal-slot-name::after {
    content: " •";
    color: var(--accent);
    font-weight: 700;
}

/* Инлайн-форма редактирования (список курсов Moodle) */
.inline-edit { display: none; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.inline-edit.open { display: block; }
.inline-edit form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.inline-edit input {
    display: inline-block; width: auto; margin: 0;
    padding: 7px 10px; font-size: 13px;
    border: 1px solid var(--border); border-radius: 10px;
    background: var(--surface); color: var(--text);
}
.inline-edit input[name="label"] { flex: 1 1 200px; }

/* ══════════════════════════════════════════════
   ТОСТЫ — подтверждение действий
   ══════════════════════════════════════════════ */
.toast-wrap {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: max-content;
    max-width: calc(100vw - 32px);
    transition: opacity .35s ease, transform .35s ease, bottom .2s ease;
}
/* Приподнимаем над нижним таббаром, чтобы тост не прятался под ним */
@media (max-width: 760px) {
    .toast-wrap { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
}
.toast-hide { opacity: 0; transform: translate(-50%, 12px); }
.toast {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border-radius: 14px;
    background: #eef2f7;
    color: #1f2937;
    border: 1px solid #d7dfe9;
    font-size: 13.5px;
    font-weight: 600;
    box-shadow: 0 8px 24px rgba(16, 24, 40, .12);
    animation: toast-in .28s cubic-bezier(.2, .8, .3, 1);
}
@keyframes toast-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.toast-success { background: #e8f6ee; border-color: #bfe3cd; color: #14532d; }
.toast-error { background: #fdecec; border-color: #f4c9c9; color: #7f1d1d; }
.toast-text { flex: 1; }
.toast-undo {
    color: inherit;
    text-decoration: underline;
    font-weight: 700;
    white-space: nowrap;
}
.toast-undo:hover { opacity: .7; }
.toast-close {
    background: none; border: none; color: currentColor; opacity: .5;
    font-size: 18px; line-height: 1; cursor: pointer; padding: 0 2px;
}
.toast-close:hover { opacity: 1; }

/* ══════════════════════════════════════════════
   ПУСТЫЕ СОСТОЯНИЯ
   ══════════════════════════════════════════════ */
.empty-block {
    text-align: center;
    padding: 40px 20px;
    background: var(--surface);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    margin-bottom: 18px;
}
.empty-block .empty-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 4px;
}
.empty-block .empty-sub {
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 14px;
}

/* ══════════════════════════════════════════════
   ТИПОГРАФИКА — единая шкала
   ══════════════════════════════════════════════ */
body {
    font-family: "Golos Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-feature-settings: "tnum" 1;   /* цифры одинаковой ширины — таблицы не «прыгают» */
}
h1 { font-size: 22px; letter-spacing: -0.02em; font-weight: 800; }
h2 { font-size: 16px; letter-spacing: -0.01em; font-weight: 700; }

/* ══════════════════════════════════════════════
   ГРАФИКИ
   ══════════════════════════════════════════════ */
.chart-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 18px 8px;
    margin-bottom: 20px;
    box-shadow: var(--shadow);
}
.chart-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.chart-title { font-size: 14px; font-weight: 700; color: var(--text); }
.chart-note { font-size: 11.5px; color: var(--muted); }
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart-grid { stroke: var(--border); stroke-width: 1; }
.chart-axis { font-size: 10px; fill: var(--muted); font-weight: 600; }
.chart-label { font-size: 10.5px; fill: var(--muted); }
.chart-value { font-size: 11px; fill: var(--text); font-weight: 700; }
.chart-line { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.chart-area { fill: var(--accent); opacity: .10; }
.chart-dot { fill: var(--surface); stroke: var(--accent); stroke-width: 2.5; }

@media (max-width: 700px) {
    .chart-card { padding: 12px 12px 4px; }
    .chart-value { font-size: 10px; }
    .chart-label { font-size: 9.5px; }
}

/* ══════════════════════════════════════════════
   МАССОВЫЕ ДЕЙСТВИЯ
   ══════════════════════════════════════════════ */
/* !important здесь осознанно: колонка выбора должна быть скрыта всегда,
   кроме явного режима "Выбрать несколько" — а мобильная адаптация таблиц
   (эта же страница) описывает display для td общими правилами, которые
   иначе перебивали бы скрытие на телефоне из-за порядка каскада. */
.cell-check { width: 34px; text-align: center; display: none !important; }
body.select-mode .cell-check { display: table-cell !important; }
.table-tools { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.cell-check input { width: 16px; height: 16px; cursor: pointer; margin: 0; }

.bulk-bar {
    display: none;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    background: var(--surface);
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    padding: 10px 14px;
    margin-bottom: 12px;
    box-shadow: var(--shadow);
}
.bulk-bar.open { display: flex; }
.bulk-count { font-size: 13px; color: var(--muted); margin-right: 4px; }
.bulk-count b { color: var(--text); font-size: 15px; }

@media (max-width: 700px) {
    body.select-mode .lessons-table td.cell-check {
        display: flex !important;
        justify-content: flex-start;
        gap: 8px;
        padding-bottom: 6px;
    }
    .lessons-table td.cell-check::before { content: "Выбрать"; }
    .bulk-bar {
        position: sticky;
        bottom: calc(72px + env(safe-area-inset-bottom, 0px));
        z-index: 50;
    }
}

/* ══════════════════════════════════════════════
   ТЁМНАЯ ТЕМА
   ══════════════════════════════════════════════ */
[data-theme="dark"] {
    --bg: #0f1520;
    --surface: #171f2e;
    --surface-2: #1e2738;
    --border: #2b3a52;
    --text: #e6ecf5;
    --muted: #94a3b8;
    --accent: #6f97fc;
    --accent-dark: #9db6fd;
    --accent-bg: rgba(111, 151, 252, .16);

    --green: #4ade80;
    --green-dark: #86efac;
    --green-bg: rgba(74, 222, 128, .15);
    --green-dark-bg: rgba(134, 239, 172, .18);
    --red: #f87171;
    --red-bg: rgba(248, 113, 113, .15);
    --orange: #f0a94e;
    --orange-bg: rgba(240, 169, 78, .16);
    --gray: #94a3b8;
    --gray-bg: rgba(148, 163, 184, .14);
    --shadow: 0 1px 3px rgba(0, 0, 0, .35), 0 8px 20px rgba(0, 0, 0, .2);
}
[data-theme="dark"] body::before { opacity: .025; }
[data-theme="dark"] .cal-past { background: #131c2e; }
[data-theme="dark"] .cal-today { background: #16243d; }
[data-theme="dark"] .lessons-table tbody tr.row-hw-pending td { background: #1d2536; }
[data-theme="dark"] .lessons-table tbody tr.row-no-show td { background: rgba(248, 113, 113, .05); }
[data-theme="dark"] .btn-primary { color: #0b1220; }
[data-theme="dark"] .toast { background: #1e293b; color: #e6ecf5; border-color: #2b3a52; }
[data-theme="dark"] .toast-success { background: #16301f; border-color: #245534; color: #86efac; }
[data-theme="dark"] .toast-error { background: #331b1b; border-color: #5a2a2a; color: #fca5a5; }

.theme-toggle {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    color: var(--muted);
    padding: 6px 8px;
    border-radius: 10px;
    line-height: 1;
}
.theme-toggle:hover { color: var(--accent); background: var(--surface-2); }
.theme-icon-dark { display: none; }
[data-theme="dark"] .theme-icon-light { display: none; }
[data-theme="dark"] .theme-icon-dark { display: inline; }

/* ══════════════════════════════════════════════
   НИЖНЯЯ НАВИГАЦИЯ (моб./PWA) — вместо гамбургера
   Тот же <nav id="mainNav">, что и на десктопе: на телефоне мы не
   показываем/скрываем его, а просто переверстываем в фиксированный
   таббар снизу — так пункты меню не дублируются в разметке.
   ══════════════════════════════════════════════ */
@media (max-width: 760px) {
    .header-inner { padding: 12px 16px; }
    .brand .logo { max-height: 40px; }
    .brand-text { font-size: 18px; }

    /* Эти элементы на телефоне переезжают внутрь листа "Ещё"
       (.nav-dropdown-name / .nav-dropdown-theme) — в самом таббаре
       для них нет места. */
    .nav-user, .theme-toggle { display: none; }

    .main-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 45;
        display: flex;
        flex-direction: row;
        align-items: stretch;
        gap: 2px;
        margin: 0;
        padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
        background: var(--surface);
        border-top: 1px solid var(--border);
        box-shadow: 0 -8px 24px rgba(22, 32, 46, 0.07);
    }
    .main-nav .nav-link {
        flex: 1 1 0;
        min-width: 0;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 7px 2px 6px;
        font-size: 10.5px;
        font-weight: 700;
        border-radius: 14px;
        text-align: center;
    }
    .main-nav .nav-link:hover { background: none; }
    .main-nav .nav-link:active { background: var(--accent-bg); }
    .main-nav .nav-link span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
    .nav-icon { width: 22px; height: 22px; }
    .nav-dropdown { flex: 1 1 0; width: auto; }
    .nav-dropdown > summary.nav-link { width: 100%; justify-content: center; }
    .nav-dropdown[open] > summary { background: var(--accent-bg); color: var(--accent-dark); }

    /* Лист "Ещё" открывается ВВЕРХ от таббара, а не вниз за экран */
    .nav-dropdown-menu {
        position: fixed;
        top: auto;
        bottom: calc(64px + env(safe-area-inset-bottom, 0px));
        right: 10px;
        left: 10px;
        width: auto;
        max-height: min(65vh, 460px);
        border-radius: var(--radius-sm);
    }
    .nav-dropdown-name {
        display: block;
        padding: 10px 12px 8px;
        font-size: 13px;
        font-weight: 700;
        color: var(--muted);
        border-bottom: 1px solid var(--border);
        margin-bottom: 4px;
    }
    .nav-dropdown-theme { display: block; }
}


/* ══════════════════════════════════════════════
   МЕНЮ ДЕЙСТВИЙ В СТРОКЕ ТАБЛИЦЫ
   ══════════════════════════════════════════════ */
.cell-actions { position: relative; width: 40px; }
.row-menu[open] { position: relative; z-index: 61; }
.row-menu summary {
    list-style: none;
    cursor: pointer;
    color: var(--muted);
    font-size: 16px;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 10px;
    display: inline-block;
}
.row-menu summary::-webkit-details-marker { display: none; }
.row-menu summary:hover { color: var(--accent); background: var(--surface-2); }
.row-menu-body {
    /*
     * position:fixed относительно окна (не относительно .cell-actions —
     * та колонка узкая, всего ~40px, и left/right внутри неё как
     * containing block ломают ширину). Запасные top/right — на случай,
     * если скрипт (placeMenu) на каком-то устройстве не выполнился: тогда
     * меню всё равно откроется в разумном видимом месте у верхнего края,
     * а не пропадёт. При успешном запуске скрипт просто перезаписывает
     * top/left/right точными координатами под конкретную кнопку.
     */
    position: fixed;
    top: 64px;
    right: 12px;
    z-index: 60;
    min-width: 180px;
    max-width: calc(100vw - 24px);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(16, 24, 40, .14);
    padding: 6px;
    display: flex;
    flex-direction: column;
    text-align: left;
}
.row-menu-body a,
.row-menu-body button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 10px;
    border: none;
    background: none;
    border-radius: 10px;
    font: inherit;
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
}
.row-menu-body a:hover,
.row-menu-body button:hover { background: var(--surface-2); text-decoration: none; }
.row-menu-body .danger-link { color: var(--red); }

@media (max-width: 700px) {
    /* Карточка-строка: подсветку даём самой карточке, иначе фон рвётся на куски */
    .lessons-table tbody tr.row-hw-pending {
        background: #fffdf5;
        border-color: #e8dcc0;
        box-shadow: inset 3px 0 0 var(--accent);
    }
    .lessons-table tbody tr.row-hw-pending td { background: transparent; }
    .lessons-table tbody tr.row-hw-pending td:first-child { box-shadow: none; }

    .lessons-table tbody tr.row-no-show {
        background: rgba(220, 38, 38, 0.05);
        border-color: #f4d6d6;
        box-shadow: inset 3px 0 0 rgba(220, 38, 38, 0.45);
    }
    .lessons-table tbody tr.row-no-show td { background: transparent; }
    .lessons-table tbody tr.row-no-show td:first-child { box-shadow: none; }

    .cell-actions { width: auto; position: static; }
    .lessons-table td.cell-actions { justify-content: flex-end; }
    .row-menu-body { left: 12px; right: 12px; width: auto; min-width: 0; }
}

[data-theme="dark"] .lessons-table tbody tr.row-hw-pending {
    background: #1d2536;
    border-color: #35415c;
}
[data-theme="dark"] .lessons-table tbody tr.row-no-show {
    background: rgba(248, 113, 113, .05);
    border-color: #4a2626;
}

/* ══════════════════════════════════════════════
   ОТЧЁТ ДЛЯ РОДИТЕЛЕЙ
   ══════════════════════════════════════════════ */
.report {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 26px 28px;
    box-shadow: var(--shadow);
}
.report-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--accent);
    margin-bottom: 18px;
}
.report-title { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.report-period { font-size: 13px; color: var(--muted); margin-top: 2px; }
.report-goal { font-size: 13px; color: var(--accent-dark); font-weight: 600; margin-top: 6px; }
.report-logo { max-height: 46px; }

.report-kpi { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
.report-kpi div {
    flex: 1 1 130px;
    background: var(--surface-2);
    border-radius: 14px;
    padding: 12px 14px;
    font-size: 12px;
    color: var(--muted);
}
.report-kpi span {
    display: block;
    font-size: 24px;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -.02em;
    margin-bottom: 2px;
}

.report-h {
    font-size: 14px;
    font-weight: 700;
    margin: 22px 0 8px;
    color: var(--text);
}
.report-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.report-table th {
    text-align: left;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted);
    padding: 6px 8px;
    border-bottom: 1px solid var(--border);
}
.report-table td { padding: 7px 8px; border-bottom: 1px solid var(--border); }
.report-table tr:last-child td { border-bottom: none; }

.report-footer {
    margin-top: 26px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    font-size: 11.5px;
    color: var(--muted);
    text-align: center;
}

@media print {
    .site-header, .site-footer-contacts, .no-print, .toast-wrap { display: none !important; }
    body { background: #fff; font-size: 11pt; }
    body::before { display: none; }
    .site-main { padding: 0; max-width: none; }
    .report { border: none; box-shadow: none; padding: 0; }
    .report-kpi div { background: #f7f9fc; }
    .report-table { page-break-inside: auto; }
    .report-table tr { page-break-inside: avoid; }
}

/* Подсказки для комментария к отчёту */
.hint-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.hint-chip {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 6px 12px;
    font: inherit;
    font-size: 12px;
    color: var(--muted);
    cursor: pointer;
    text-align: left;
}
.hint-chip:hover { border-color: var(--accent); color: var(--accent); }

.report-comment {
    margin: 24px 0 0;
    padding: 16px 18px;
    background: var(--accent-bg);
    border-left: 4px solid var(--accent);
    border-radius: 14px;
    font-size: 13.5px;
    line-height: 1.55;
}
.report-comment-label {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .07em;
    font-weight: 700;
    color: var(--accent-dark);
    margin-bottom: 6px;
}

/* Группы подсказок для комментария */
.hint-group { margin-top: 12px; }
.hint-group-title {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 700;
    color: var(--muted);
    margin-bottom: 5px;
}
.hint-chips { margin-top: 0; }

/* ══════════════════════════════════════════════
   ЭКРАН «СЕГОДНЯ»
   ══════════════════════════════════════════════ */
.today-block {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 18px;
    margin-bottom: 16px;
    box-shadow: var(--shadow);
}
/* Свой заголовок карточки — .section-title рассчитан на обычный поток
   страницы и добавляет большой верхний отступ (26px), из-за чего внутри
   карточки появлялась заметная пустота перед текстом */
.today-block-title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted);
    margin: 0 0 12px;
}
.today-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    /* margin-bottom у карточек внутри грида не создаёт видимого отступа
       ПОСЛЕ самого грид-контейнера (особенность CSS Grid) — поэтому отступ
       между строками задаём прямо здесь, а не полагаемся на детей */
    margin-bottom: 16px;
}
/* Без этого блоки внутри грида не сжимаются меньше своего "минимального
   содержимого" (например, двух кнопок в один ряд у "Просит отработку") —
   из-за чего вся страница на телефоне раздувалась шире экрана целиком. */
.today-grid > .today-block { min-width: 0; }
.today-list { display: flex; flex-direction: column; gap: 6px; }
.today-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 10px;
    border-radius: 12px;
    background: var(--surface-2);
}
.today-row-done { background: var(--green-bg); }
.today-row-off  { background: var(--gray-bg); opacity: .8; }
.today-row-moved{ background: var(--orange-bg); }
.today-row-no_show{ background: var(--red-bg); }

/* Левая часть (имя + подпись) не переносится и не толкает правую часть
   (сумму/кнопки) на отдельную строку — вместо этого длинное имя обрезается
   многоточием. На телефоне это выглядит намного аккуратнее, чем перенос. */
.today-row-main {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
}
.today-row-main-line { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.today-name {
    font-weight: 700;
    font-size: 13.5px;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.today-name:hover { color: var(--accent); }
.today-time { font-size: 12px; font-weight: 700; color: var(--muted); flex-shrink: 0; }
.today-sub {
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Правая часть (сумма/бейдж/кнопки) никогда не сжимается и не переносится */
.today-row > .btn, .today-row > b, .today-row > .badge, .today-row > a.muted, .today-row-actions {
    flex-shrink: 0;
}
.today-row-actions { display: flex; gap: 6px; }
/* "Давно не появлялся": подпись идёт не внутри today-row-main, а рядом с
   ним (там нечего показывать вторым пунктом кроме имени) — не даём ей
   сжиматься в ноль и не разрешаем переносить слова посередине */
.today-row > .today-sub { flex-shrink: 0; text-align: right; white-space: nowrap; }
@media (max-width: 480px) {
    .today-row > .today-sub { font-size: 11px; }
}

@media (max-width: 420px) {
    /* На совсем узких экранах подпись убираем — оставляем только имя и суть */
    .today-sub { display: none; }
    .today-row-actions .btn { padding: 5px 8px; font-size: 12px; }
}

@media (max-width: 900px) {
    .today-grid { grid-template-columns: 1fr; }
}
/* Обёртка ячейки оплаты — на мобильном её содержимое (селект + цена)
   должно вести себя как один flex-элемент, а не два */
/* На десктопе колонка "Оплата" центрирована, как и остальные — align-items
   переключается на flex-end только в мобильной раскладке (там ячейки
   выстраиваются в строку "подпись слева - значение справа") */
.payment-cell { display: flex; flex-direction: column; align-items: center; }
@media (max-width: 700px) {
    .payment-cell { align-items: flex-end; width: 100%; }
}

/* ══════════════════════════════════════════════
   PWA: баннер установки
   ══════════════════════════════════════════════ */
.install-banner {
    display: none;
    position: fixed;
    left: 50%;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    z-index: 190;
    align-items: center;
    gap: 12px;
    max-width: calc(100vw - 24px);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 12px 14px;
    box-shadow: 0 10px 30px rgba(16, 24, 40, .16);
    font-size: 13px;
}
.install-banner.open { display: flex; }
.install-text { color: var(--text); flex: 1; min-width: 160px; }
.install-close {
    background: none;
    border: none;
    color: var(--muted);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
    flex-shrink: 0;
}
.install-close:hover { color: var(--text); }

@media (max-width: 600px) {
    .install-banner { flex-wrap: wrap; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}

/* Невидимая подложка под открытыми меню/попапами — надёжно ловит клик
   мимо, даже если попап визуально накладывается на другой контент */
.ui-backdrop {
    position: fixed;
    inset: 0;
    z-index: 55;
    background: transparent;
}

/* ══════════════════════════════════════════════
   ФИНАНСЫ
   ══════════════════════════════════════════════ */
.finance-kpi { display: flex; gap: 10px; flex-wrap: wrap; }
.finance-kpi > div { flex: 1 1 140px; min-width: 0; }
.finance-kpi-value { display: block; font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: var(--text); word-break: break-word; }
.finance-kpi-label { font-size: 12px; color: var(--muted); }
.finance-kpi-label b { display: inline-block; margin-left: 4px; font-weight: 700; }

.finance-goal { margin-top: 16px; }
.finance-goal-bar { height: 8px; border-radius: 8px; background: var(--gray-bg); overflow: hidden; margin-bottom: 6px; }
.finance-goal-fill { height: 100%; background: var(--accent); border-radius: 8px; }

/* Форма плана: на узком экране в один ряд не помещается (подпись + поле +
   кнопка) — оборачиваем и даём полю тянуться, а не фиксированные 150px,
   из-за которых кнопка "уезжала" за пределы экрана */
.finance-goal-form {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}
.finance-goal-form label { font-size: 12px; color: var(--muted); flex: 1 1 160px; min-width: 0; }
.finance-goal-form input {
    display: block;
    width: 100%;
    max-width: 200px;
    margin-top: 4px;
    padding: 7px 10px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    box-sizing: border-box;
}
.finance-goal-form button { flex-shrink: 0; }

@media (max-width: 500px) {
    .finance-kpi > div { flex: 1 1 calc(50% - 5px); }
    .finance-goal-form label { flex-basis: 100%; }
    .finance-goal-form input { max-width: none; }
    .finance-goal-form button { width: 100%; }
}

/* ══════════════════════════════════════════════
   ПОЛОСА ЗАГРУЗКИ СВЕРХУ (переходы между страницами)
   ══════════════════════════════════════════════ */
.page-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    z-index: 300;
    background: linear-gradient(90deg, var(--accent), #60a5fa);
    box-shadow: 0 0 8px var(--accent);
    opacity: 0;
    pointer-events: none;
}

/* ══════════════════════════════════════════════
   СПИННЕР НА КНОПКАХ ПРИ ОТПРАВКЕ ФОРМЫ
   ══════════════════════════════════════════════ */
button[type="submit"].is-loading,
.btn.is-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}
button[type="submit"].is-loading::after,
.btn.is-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 15px;
    height: 15px;
    margin: -7.5px 0 0 -7.5px;
    border: 2px solid rgba(255, 255, 255, .5);
    border-top-color: #fff;
    border-radius: 50%;
    animation: btn-spin .6s linear infinite;
}
.btn-ghost.is-loading::after { border-color: rgba(37,99,235,.3); border-top-color: var(--accent); }
@keyframes btn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .page-progress { transition: none !important; }
    button[type="submit"].is-loading::after, .btn.is-loading::after { animation: none; }
}

/* ══════════════════════════════════════════════
   УРОВНИ УЧЕНИКОВ — карточки настроек
   (сама метка рядом с именем рисуется инлайн-стилем в PHP —
   см. student_level_badge() — там она гарантированно круглая
   независимо от каскада; здесь только окружение витрины)
   ══════════════════════════════════════════════ */
.level-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px;
    margin-bottom: 24px;
}
/* Карточка уровня — всё друг под другом, а не в строку: строчная
   раскладка (метка + счётчик + две ссылки в одном ряду) не помещалась
   почти ни при какой ширине и "уезжала". */
.level-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px 16px;
    box-shadow: var(--shadow);
    border-left: 3px solid var(--lv-color, var(--accent));
}
.level-card-preview { margin-bottom: 8px; }
.level-card-count { font-size: 11.5px; color: var(--muted); margin-bottom: 10px; }
.level-card-actions {
    display: flex;
    gap: 14px;
    font-size: 12.5px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

/* Выбор цвета — компактные кружки, кликабельны через JS (не через
   вложенный input), поэтому используется не <label>, а простой <span>.
   flex-shrink:0 — иначе на узкой форме кружки сплющивались в овалы. */
.color-swatches { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; align-items: center; }
.color-swatch { flex-shrink: 0; }
.color-swatch {
    position: relative;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid transparent;
    transition: transform .12s ease;
}
.color-swatch:hover { transform: scale(1.1); }
.color-swatch::after {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    opacity: 0;
    box-shadow: 0 0 0 1.5px rgba(0,0,0,.2);
}
.color-swatch.is-selected { border-color: var(--text); }
.color-swatch.is-selected::after { opacity: 1; }
.color-swatch-custom {
    background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red);
    padding: 0;
}
.color-swatch-custom::after { display: none; }
.color-swatch-custom.is-selected::after {
    opacity: 1;
    display: block;
}
.color-swatch-custom input[type="color"] {
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    position: absolute;
    inset: 0;
    padding: 0;
    border: none;
}

/* Страница "Удаление" — панель массовых действий и колонка действий строки */
.trash-bulk-bar { display: flex; gap: 10px; margin-bottom: 10px; }
.trash-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }

/* ══════════════════════════════════════════════
   СТРАНИЦА "УВЕДОМЛЕНИЯ" — единообразные карточки-блоки
   ══════════════════════════════════════════════ */
.notify-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 18px;
    box-shadow: var(--shadow);
    max-width: 560px;
    margin-bottom: 16px;
}
.notify-card h2 { margin: 0 0 4px; font-size: 16px; }
.notify-card-warn { border-color: var(--red); }
.notify-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.notify-btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.notify-personal {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}
.notify-group-title {
    margin: 22px 0 10px;
    font-size: 13px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.notify-tpl-card { transition: opacity .15s ease; }
.notify-tpl-disabled { opacity: .5; }

/* Рассылка — выбор получателя в виде трёх плашек вместо голых radio-строк */
.target-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.target-option {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 12px;
    cursor: pointer;
    font-size: 13px;
    transition: border-color .12s ease, background .12s ease;
}
.target-option:has(input:checked) { border-color: var(--accent); background: var(--accent-bg); }
.target-option input { margin: 0; flex-shrink: 0; }
.target-sub-block {
    max-height: 240px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 14px;
}
@media (max-width: 600px) {
    .target-picker { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════
   Кабинет ученика — компактный ряд: Telegram/ВК/пароль одной строкой,
   а не тремя большими блоками друг под другом
   ══════════════════════════════════════════════ */
.quick-access-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 18px; }
/* position:relative — панель ниже позиционируется абсолютно относительно
   именно этого элемента, а не занимает место в потоке. Без этого
   раскрытая панель растягивала свой <details> под свою же ширину и
   расталкивала соседние чипы в ряду (на мобильном не так заметно, там
   чипы и так переносятся по одному в строку, а на широком экране это
   выглядело как "всё съезжает"). */
.quick-chip-toggle { display: inline-block; position: relative; }
.quick-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    background: var(--accent-bg);
    color: var(--accent-dark);
    border: 1px solid transparent;
}
.quick-chip::-webkit-details-marker { display: none; }
.quick-chip-on { background: rgba(21,128,61,.12); color: #15803d; }
.quick-chip-muted {
    background: var(--surface-2);
    color: var(--muted);
    text-decoration: none;
}
.quick-chip-muted:hover { color: var(--text); }
.quick-chip-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 30;
    width: max-content;
    max-width: min(320px, 85vw);
    padding: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow);
    font-size: 13px;
}