/* ===========================================================================
   app.css — единственная таблица стилей админ-панели «Штурм-Учёба».
   Версия 2: приведено к эталонной админке (тёмный неоновый дашборд).

   Ключевые признаки эталона, перенесённые в систему:
     • почти чёрный холст, панели-«карточки» на тон светлее, парящие на нём;
     • крупные скругления (20px панель / 12px поле / pill у кнопок и чипов);
     • тонкие светлые границы вместо жирных разделителей;
     • основная кнопка — белая пилюля с тёмным текстом;
     • синий — цвет ссылок, фокуса и данных; янтарный — только деньги;
     • статусы и сложность — компактные чипы, а не залитые плашки;
     • шапка таблицы: 11px, капитель, разряженная; строки без заливки.

   Все классы прежние — переименований нет, шаблоны не меняются.
   Единственная необязательная правка разметки: aria-current="page" на
   активной ссылке меню (см. RENAMES.md).
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. ТОКЕНЫ
   --------------------------------------------------------------------------- */

:root {
    /* --- Шрифты. Системный стек: сервер без интернета, кириллица обязана
       быть. Готовый @font-face — в закомментированном разделе 1a ниже. --- */
    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --fs-xs:   .72rem;
    --fs-sm:   .8rem;
    --fs-base: .875rem;
    --fs-md:   .9rem;
    --fs-lg:   1.05rem;

    --lh-base: 1.55;
    --fw-bold: 600;
    --fw-heavy: 650;
    --ls-heading: -.015em;

    /* --- Поверхности --------------------------------------------------- */
    --c-bg:            #0a0a0b;   /* холст                                */
    --c-surface:       #141517;   /* панель, карточка                     */
    --c-surface-2:     #1a1b1e;   /* панель внутри панели                 */
    --c-surface-sunk:  #101113;   /* JSON-блоки, «утопленное»             */
    --c-sidebar:       #0a0a0b;
    --c-field:         #1b1c1f;
    --c-row:           transparent;
    --c-row-alt:       rgba(255,255,255,.018);
    --c-row-hover:     rgba(255,255,255,.04);
    --c-row-archived:  rgba(255,255,255,.012);

    /* --- Границы: тонкие и светлые -------------------------------------- */
    --c-border:        rgba(255,255,255,.07);
    --c-border-strong: rgba(255,255,255,.12);
    --c-border-muted:  rgba(255,255,255,.05);

    /* --- Текст ---------------------------------------------------------- */
    --c-text:       #f4f5f7;
    --c-text-soft:  #dcdee2;
    --c-text-muted: #9a9ea6;
    --c-text-dim:   #7c8087;
    --c-text-faint: #62666d;
    --c-text-ghost: #4b4f55;

    /* --- Акцент: синий = действие/ссылка/фокус -------------------------- */
    --c-accent:          #3b74ff;
    --c-accent-hover:    #5a8bff;
    --c-accent-active:   #2b5ce0;
    --c-accent-contrast: #ffffff;
    --c-accent-tint:     rgba(59,116,255,.16);

    /* --- Деньги: янтарный, единственная роль --------------------------- */
    --c-money:      #f5b544;
    --c-money-tint: rgba(245,181,68,.14);

    /* --- Смысловые цвета данных (верно с 1-й / со 2-й / не решено) ------ */
    --c-success:      #2f9e5f;
    --c-success-text: #58d68d;
    --c-success-bg:   rgba(88,214,141,.12);

    --c-danger:       #e0463a;
    --c-danger-text:  #ff8577;
    --c-danger-bg:    rgba(224,70,58,.12);
    --c-danger-deep:  #7d201a;
    --c-danger-zone:  rgba(224,70,58,.05);
    --c-danger-edge:  rgba(224,70,58,.28);

    --c-warn:      #d99a2b;
    --c-warn-text: #f0c063;
    --c-warn-bg:   rgba(240,192,99,.12);

    --c-easy:      #58d68d;
    --c-info:      #7f8794;
    --c-info-text: #aab1bd;
    --c-info-bg:   rgba(170,177,189,.1);
    --c-neutral:   #ff8577;
    --c-attention: #f0c063;

    /* --- Геометрия: эталон скруглён щедро ------------------------------ */
    --radius-sm:   8px;
    --radius:      12px;
    --radius-lg:   20px;
    --radius-pill: 999px;

    --sp-1: .25rem;
    --sp-2: .5rem;
    --sp-3: .75rem;
    --sp-4: 1rem;
    --sp-5: 1.25rem;
    --sp-6: 1.5rem;
    --sp-8: 2rem;

    --shadow-panel: 0 1px 0 rgba(255,255,255,.03) inset;

    --sidebar-w: 224px;
    --form-w:    560px;
    --form-w-lg: 860px;
}

/* 1a. Фирменный гротеск, если появятся файлы .woff2 с кириллицей: положить в
   static/fonts/ и снять комментарий — остальной файл править не нужно.

@font-face {
    font-family: "AdminSans";
    src: url("fonts/adminsans-regular-cyrillic.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: "AdminSans";
    src: url("fonts/adminsans-semibold-cyrillic.woff2") format("woff2");
    font-weight: 600 700;
    font-display: swap;
}
:root { --font-sans: "AdminSans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
*/

/* ---------------------------------------------------------------------------
   2. БАЗА
   --------------------------------------------------------------------------- */

* { box-sizing: border-box; }

body {
    font-family: var(--font-sans);
    margin: 0;
    background: var(--c-bg);
    color: var(--c-text);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

code { font-family: var(--font-mono); }

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

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
::selection { background: var(--c-accent-tint); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: var(--radius-pill); border: 3px solid var(--c-bg); }
::-webkit-scrollbar-track { background: transparent; }

/* ---------------------------------------------------------------------------
   3. КАРКАС — шапка, сайдбар, контент
   --------------------------------------------------------------------------- */

header {
    background: var(--c-bg);
    padding: var(--sp-4) var(--sp-6);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-4);
    flex-shrink: 0;
    border-bottom: 1px solid var(--c-border-muted);
}
header h1 {
    margin: 0;
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-heading);
    color: var(--c-text);
}
/* Кнопка «Выйти» — тёмная пилюля, как управляющие чипы в шапке эталона */
header a.logout {
    color: var(--c-text-muted);
    font-size: var(--fs-sm);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-pill);
    padding: .35rem .9rem;
}
header a.logout:hover { color: var(--c-text); border-color: var(--c-border-strong); }

.layout { display: flex; flex: 1; min-height: 0; }

.sidebar {
    width: var(--sidebar-w);
    background: var(--c-sidebar);
    padding: var(--sp-5) var(--sp-3);
    flex-shrink: 0;
    border-right: 1px solid var(--c-border-muted);
}
.sidebar .nav-section {
    display: block;
    font-size: .68rem;
    color: var(--c-text-ghost);
    text-transform: uppercase;
    letter-spacing: .1em;
    padding: var(--sp-4) var(--sp-3) var(--sp-2);
}
.sidebar nav { display: flex; flex-direction: column; gap: 2px; }
.sidebar nav a {
    display: block;
    padding: .45rem var(--sp-3);
    color: var(--c-text-muted);
    font-size: var(--fs-md);
    border-radius: var(--radius-sm);
}
.sidebar nav a:hover { background: rgba(255,255,255,.05); color: var(--c-text); }
/* Активный пункт — без нового класса: aria-current="page" в шаблоне */
.sidebar nav a[aria-current="page"] {
    background: rgba(255,255,255,.08);
    color: var(--c-text);
    font-weight: var(--fw-bold);
}
.content { flex: 1; padding: var(--sp-6) var(--sp-8) var(--sp-8); overflow-y: auto; }

/* ---------------------------------------------------------------------------
   4. ТИПОГРАФИКА И ШАПКА СТРАНИЦЫ
   --------------------------------------------------------------------------- */

.page-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-4);
    margin-bottom: var(--sp-6);
}
.page-head--back {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    margin-bottom: var(--sp-6);
}
h1, h2, h3 { font-weight: var(--fw-bold); letter-spacing: var(--ls-heading); margin: 0; }
.page-title { margin-top: 0; font-size: 1.5rem; }
.page-title--accent { margin-top: 0; font-size: 1.5rem; }

.group-title {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    color: var(--c-text);
    font-weight: var(--fw-bold);
    letter-spacing: .01em;
    font-size: var(--fs-md);
    padding-bottom: var(--sp-3);
    margin-bottom: var(--sp-3);
    border-bottom: 1px solid var(--c-border-muted);
}
.group-count {
    color: var(--c-text-dim);
    font-size: var(--fs-sm);
    font-weight: normal;
    background: rgba(255,255,255,.05);
    border-radius: var(--radius-pill);
    padding: .1rem .55rem;
}

.section { margin-bottom: var(--sp-8); }
.lead { color: var(--c-text-muted); font-size: var(--fs-md); margin: 0 0 var(--sp-6); max-width: 76ch; }

/* ---------------------------------------------------------------------------
   5. КНОПКИ И ССЫЛКИ
   --------------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    padding: .5rem 1.1rem;
    font-family: inherit;
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    line-height: 1.35;
    cursor: pointer;
    white-space: nowrap;
}
/* Основная кнопка эталона — белая пилюля с тёмным текстом */
.btn--primary { background: #f4f5f7; color: #101113; }
.btn--primary:hover  { background: #ffffff; }
.btn--primary:active { background: #dcdee2; }
.btn--primary:disabled { background: rgba(255,255,255,.14); color: var(--c-text-dim); cursor: default; }

.btn--accent { background: var(--c-accent); color: var(--c-accent-contrast); }
.btn--accent:hover { background: var(--c-accent-hover); }
.btn--accent:active { background: var(--c-accent-active); }

/* Опасное, но обратимое (архивировать, удалить вопрос) — контурная пилюля:
   в таблице на 48 строк 48 залитых красных плашек убивают сигнал. */
.btn--danger {
    background: transparent;
    color: var(--c-danger-text);
    border-color: var(--c-danger-edge);
}
.btn--danger:hover  { background: var(--c-danger-bg); border-color: var(--c-danger-text); }
.btn--danger:active { background: var(--c-danger); color: #fff; border-color: var(--c-danger); }

/* Необратимое — единственная заливка тревожным цветом на весь интерфейс */
.btn--danger-deep {
    background: var(--c-danger-deep);
    color: #ffe9e6;
    border-color: rgba(255,133,119,.35);
    font-size: var(--fs-md);
}
.btn--danger-deep:hover { background: #96271f; }

.btn--ghost {
    background: var(--c-surface);
    color: var(--c-text-soft);
    border-color: var(--c-border);
    font-weight: normal;
}
.btn--ghost:hover { border-color: var(--c-border-strong); color: var(--c-text); }

.btn--sm { padding: .25rem .7rem; font-size: var(--fs-sm); font-weight: normal; }
.btn--wide { padding: .6rem 1.6rem; }
.btn--block { width: 100%; }
.btn--icon {
    background: none;
    border: none;
    color: var(--c-text-dim);
    cursor: pointer;
    font-size: var(--fs-sm);
    padding: .1rem .3rem;
    border-radius: var(--radius-sm);
}
.btn--icon:hover { color: var(--c-danger-text); background: var(--c-danger-bg); }

.link         { color: var(--c-text-muted); }
.link--accent { color: var(--c-accent); }
.link--success{ color: var(--c-success-text); }
.link--info   { color: var(--c-accent); font-size: var(--fs-sm); }
.link--back   { color: var(--c-text-muted); font-size: var(--fs-md); }
.link-cancel  { color: var(--c-text-muted); padding: .5rem 0; }
.link:hover, .link--accent:hover, .link--success:hover,
.link--info:hover, .link--back:hover, .link-cancel:hover { color: var(--c-text); }

.actions { display: flex; align-items: center; gap: var(--sp-3); }
.actions > * { margin-right: 0; }
.actions form { display: inline-flex; }

/* ПРАВКА ПРИ ВНЕДРЕНИИ (не терять при следующей поставке дизайна).
   `.actions` встречается в двух видах разметки: `<td><div class="actions">`
   (03-topics, 06-questions) и `class="actions"` прямо на `<td>` (12-children,
   и так же во всех шаблонах Jinja). Во втором случае `display:flex` побеждает
   `display:table-cell`, ячейка перестаёт быть ячейкой: она не растягивается до
   высоты строки (49px против 63px) и её нижняя граница уезжает на 13px вверх —
   разделители строк в колонке «Действия» не совпадают с остальной таблицей.
   Поэтому для `td` возвращаем поведение ячейки, а промежутки между действиями
   задаём отступами вместо gap. */
td.actions { display: table-cell; white-space: nowrap; }
td.actions > * { margin-right: var(--sp-3); }
td.actions > *:last-child { margin-right: 0; }
td.actions form { display: inline-flex; vertical-align: middle; }

/* ДОБАВЛЕНО ПРИ ВНЕДРЕНИИ (T128, не терять при следующей поставке дизайна):
   вкладки предметов на экране тем. Собственного вида не имеют — это ряд
   кнопок-пилюль из системы: активная `.btn--primary`, остальные `.btn--ghost`. */
.tabs { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-5); }

/* ДОБАВЛЕНО ПРИ ВНЕДРЕНИИ (массовое удаление тем, не терять при следующей поставке
   дизайна): панель над таблицей — кнопка «Удалить отмеченные» и пояснение к ней.
   Отдельный класс, а не `.actions`: тут нужен отступ до таблицы. */
.bulk-bar { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }

.form-actions { display: flex; gap: var(--sp-4); align-items: center; margin-top: var(--sp-5); }
.form-actions .spacer { margin-left: auto; }

/* ---------------------------------------------------------------------------
   6. КАРТОЧКИ — парящие панели эталона
   --------------------------------------------------------------------------- */

.card {
    background: var(--c-surface);
    padding: var(--sp-5) var(--sp-6);
    border-radius: var(--radius-lg);
    border: 1px solid var(--c-border);
    box-shadow: var(--shadow-panel);
    margin-bottom: var(--sp-5);
}
.card--narrow { max-width: 480px; }
/* Между narrow и полной шириной: формы, где в подпись поля попадает email
   родителя — в 480 px он не помещался и обрезался. */
.card--medium { max-width: 640px; }
.card--form   { max-width: 640px; padding: var(--sp-6); }
.card--plain  { margin-bottom: 0; }
.card--danger {
    background: var(--c-danger-zone);
    border-color: var(--c-danger-edge);
}
.card-title {
    margin: 0 0 var(--sp-4);
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-heading);
    color: var(--c-text);
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}
.card-title--danger { color: var(--c-danger-text); }
.card-title--form { margin-top: 0; }

/* ---------------------------------------------------------------------------
   7. ТАБЛИЦЫ
   --------------------------------------------------------------------------- */

.table-wrap {
    overflow-x: auto;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
}
.card .table-wrap, .table-wrap .table-wrap {
    background: none;
    border: 0;
    border-radius: 0;
}

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-base);
}
.table thead tr { background: none; text-align: left; }
.table--sunk thead tr { background: none; }
.table th {
    padding: var(--sp-3) var(--sp-4);
    color: var(--c-text-faint);
    font-weight: var(--fw-bold);
    font-size: var(--fs-xs);
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
    border-bottom: 1px solid var(--c-border);
}
.table--dense th { padding: var(--sp-2) var(--sp-3); }
.table td { padding: .65rem var(--sp-4); border-bottom: 1px solid var(--c-border-muted); }
.table--dense td { padding: .5rem var(--sp-3); }
.table tbody tr { background: var(--c-row); }
.table tbody tr:hover { background: var(--c-row-hover); }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr.row--alt { background: var(--c-row-alt); }
.table tbody tr.row--archived { background: var(--c-row-archived); color: var(--c-text-dim); }
.table tbody tr.row--archived:hover { background: var(--c-row-hover); }
.table--flush tbody tr,
.table--flush tbody tr:hover { background: none; }

.table .cell-title { font-weight: var(--fw-bold); color: var(--c-text); }
.table .cell-sub { font-size: var(--fs-xs); color: var(--c-text-faint); margin-top: .1rem; }
.cell-clip {
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cell-clip--sm { max-width: 160px; }

/* ---------------------------------------------------------------------------
   8. ФОРМЫ
   --------------------------------------------------------------------------- */

.form       { max-width: var(--form-w); }
.form--wide { max-width: var(--form-w-lg); }

.field { margin-bottom: var(--sp-4); }
.field--tight { margin-bottom: var(--sp-3); }
.field--loose { margin-bottom: var(--sp-6); }

.label {
    display: block;
    margin-bottom: .35rem;
    color: var(--c-text-muted);
    font-size: var(--fs-sm);
}
.label--sm { font-size: var(--fs-xs); }
.label--strong { color: var(--c-text); font-weight: var(--fw-bold); margin-bottom: var(--sp-3); }
.req { color: var(--c-danger-text); }

.input, .select, .textarea {
    width: 100%;
    padding: .55rem var(--sp-3);
    background: var(--c-field);
    border: 1px solid var(--c-border);
    color: var(--c-text);
    border-radius: var(--radius);
    font-family: inherit;
    font-size: var(--fs-md);
}
.input::placeholder, .textarea::placeholder { color: var(--c-text-ghost); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--c-border-strong); }
.input:focus, .select:focus, .textarea:focus {
    border-color: var(--c-accent);
    box-shadow: 0 0 0 3px var(--c-accent-tint);
    outline: none;
}
.input--invalid, .select--invalid, .textarea--invalid { border-color: var(--c-danger); }
.input--invalid:focus, .textarea--invalid:focus { box-shadow: 0 0 0 3px var(--c-danger-bg); }
.input--narrow { width: 120px; }
.input--amount { width: 120px; }
.textarea { resize: vertical; line-height: 1.5; }
.textarea--mono { font-family: var(--font-mono); font-size: var(--fs-sm); }
.select--auto { width: auto; }
.input--sunk { background: var(--c-surface-sunk); }
.input--mono { font-family: var(--font-mono); }
.input-file { color: var(--c-text-muted); font-size: var(--fs-sm); }
.input-file::file-selector-button {
    font-family: inherit;
    font-size: var(--fs-sm);
    color: var(--c-text-soft);
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-pill);
    padding: .3rem .8rem;
    margin-right: var(--sp-3);
    cursor: pointer;
}
.input-file::file-selector-button:hover { border-color: var(--c-border-strong); color: var(--c-text); }

.readonly-value {
    padding: .55rem var(--sp-3);
    background: var(--c-surface-sunk);
    border: 1px solid var(--c-border-muted);
    border-radius: var(--radius);
    color: var(--c-text-dim);
}
.readonly-value--code {
    color: var(--c-money);
    font-family: var(--font-mono);
    font-size: var(--fs-md);
    letter-spacing: .02em;
}

.hint { font-size: var(--fs-sm); color: var(--c-text-faint); margin-top: var(--sp-1); }
.hint--inline { margin-left: var(--sp-2); }

.check {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    cursor: pointer;
    color: var(--c-text-soft);
    font-size: var(--fs-md);
}
.check + .check { margin-top: var(--sp-2); }
.check input { width: 1rem; height: 1rem; accent-color: var(--c-accent); }
.check--danger { color: var(--c-text); gap: .6rem; }
.check--danger input { accent-color: var(--c-danger); }
.check-row { display: flex; gap: var(--sp-5); flex-wrap: wrap; }
.check-row .check input { width: 1rem; height: 1rem; }

.form-inline {
    display: flex;
    gap: var(--sp-3);
    align-items: flex-end;
    flex-wrap: wrap;
}
.form-inline .field { margin-bottom: 0; flex: 1; min-width: 180px; }
.form-inline .field--fixed { flex: 0 0 auto; min-width: 0; }
/* Своя строка целиком — для полей с длинным содержимым (список семей с email
   родителя): в общем ряду им доставалось ~180 px и текст срезался. */
.form-inline .field--wide { flex: 1 0 100%; }

.fieldset {
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    background: var(--c-surface);
    padding: var(--sp-5) var(--sp-6) var(--sp-6);
    margin: 0 0 var(--sp-5);
}
.fieldset legend {
    color: var(--c-text);
    padding: 0 var(--sp-2);
    margin-left: -.25rem;
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-heading);
    font-size: var(--fs-md);
}
.grid { display: grid; gap: var(--sp-4); }
.grid--2 { grid-template-columns: 1fr 1fr; }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* ---------------------------------------------------------------------------
   9. БЕЙДЖИ И СТАТУСЫ — компактные чипы
   --------------------------------------------------------------------------- */

.badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .15rem .5rem;
    border-radius: var(--radius-pill);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    line-height: 1.5;
    background: rgba(255,255,255,.06);
    color: var(--c-text-soft);
}
.badge--difficulty { font-family: var(--font-mono); font-weight: normal; }
.badge--easy { background: var(--c-success-bg); color: var(--c-success-text); }
.badge--mid  { background: var(--c-warn-bg);    color: var(--c-warn-text); }
.badge--hard { background: var(--c-danger-bg);  color: var(--c-danger-text); }
.badge--count { background: rgba(255,255,255,.06); color: var(--c-text-dim); font-weight: normal; }
.badge--type { font-family: var(--font-mono); font-weight: normal; color: var(--c-text-muted); }
.badge--type-choice { background: var(--c-accent-tint); color: #9dbaff; }

.status-on  { color: var(--c-danger-text); }
.status-off { color: var(--c-text-dim); }

.val-money   { color: var(--c-money); font-weight: var(--fw-bold); }
.val-good    { color: var(--c-success-text); }
.val-mid     { color: var(--c-attention); }
.val-bad     { color: var(--c-neutral); }
.val-neutral { color: var(--c-text-ghost); }

/* ---------------------------------------------------------------------------
   10. СООБЩЕНИЯ И ПУСТЫЕ СОСТОЯНИЯ
   --------------------------------------------------------------------------- */

.alert {
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--radius);
    border: 1px solid transparent;
    margin-bottom: var(--sp-5);
    font-size: var(--fs-md);
}
.alert--error {
    background: var(--c-danger-bg);
    border-color: var(--c-danger-edge);
    color: #ffb3aa;
    font-weight: var(--fw-bold);
}
.alert--soft {
    background: var(--c-danger-bg);
    border-color: var(--c-border);
    color: var(--c-danger-text);
    font-weight: normal;
    margin-bottom: var(--sp-4);
}
.alert--warn {
    background: var(--c-warn-bg);
    border-color: rgba(240,192,99,.25);
    color: var(--c-warn-text);
    font-size: var(--fs-sm);
    line-height: var(--lh-base);
    margin: var(--sp-3) 0 0;
}

.empty { color: var(--c-text-ghost); }
.empty--plain { color: var(--c-text-faint); }

.pre {
    background: var(--c-surface-sunk);
    border: 1px solid var(--c-border-muted);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--radius);
    overflow-x: auto;
    color: var(--c-text-muted);
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    white-space: pre-wrap;
    margin: 0;
}
.pre--flush { margin: 0; background: none; border: 0; padding: 0; }

/* ---------------------------------------------------------------------------
   11. УТИЛИТЫ
   --------------------------------------------------------------------------- */

.muted  { color: var(--c-text-muted); }
.dim    { color: var(--c-text-dim); }
.faint  { color: var(--c-text-faint); }
.accent { color: var(--c-accent); }
.mono   { font-family: var(--font-mono); }

.fs-sm { font-size: var(--fs-sm); }
.fs-xs { font-size: var(--fs-xs); }

.m-0  { margin: 0; }
.mb-1 { margin: 0 0 .4rem; }
.mt-1 { margin-top: var(--sp-4); }

.t-center { text-align: center; }
.t-right  { text-align: right; }
.nowrap   { white-space: nowrap; }
.vtop     { vertical-align: top; }

.meta { color: var(--c-text-dim); font-size: var(--fs-sm); margin: 0 0 var(--sp-3); }
.note { color: var(--c-text-muted); font-size: var(--fs-md); margin: 0 0 var(--sp-4); }

.w-2  { width: 2.5rem; }
.w-8  { width: 8rem; }
.w-9  { width: 9rem; }
.w-10 { width: 10rem; }
.w-50  { width: 50px; }
.w-80  { width: 80px; }
.w-90  { width: 90px; }
.w-130 { width: 130px; }
.w-160 { width: 160px; }
.w-180 { width: 180px; }
.w-200 { width: 200px; }
.w-220 { width: 220px; }
.w-230 { width: 230px; }
.w-35p { width: 35%; }

/* ---------------------------------------------------------------------------
   12. ЭКРАН ВХОДА
   --------------------------------------------------------------------------- */

body.login-page {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background:
        radial-gradient(60rem 30rem at 50% -10%, rgba(59,116,255,.12), transparent 70%),
        var(--c-bg);
}
.login-box {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    padding: var(--sp-8);
    width: 340px;
}
.login-box h1 {
    margin: 0 0 var(--sp-6);
    font-size: var(--fs-lg);
    text-align: center;
}
.login-box .input { background: var(--c-surface-sunk); }
.login-box .btn { margin-top: var(--sp-5); padding: .6rem; }
.login-error {
    margin: var(--sp-4) 0 0;
    color: var(--c-danger-text);
    font-size: var(--fs-sm);
    text-align: center;
}

/* ---------------------------------------------------------------------------
   13. АДАПТИВ
   --------------------------------------------------------------------------- */

@media (max-width: 900px) {
    .grid--4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
    .layout { flex-direction: column; }
    .sidebar { width: 100%; border-right: 0; border-bottom: 1px solid var(--c-border-muted); }
    .content { padding: var(--sp-5) var(--sp-4); }
    .grid--2, .grid--4 { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   Правовые страницы (инкремент 009): политика и условия.

   Тот же «логин-бокс», но шире и с обычной вёрсткой текста: 340 px хватало
   форме из двух полей и не хватает документу, который человек действительно
   читает — а он его читает ровно один раз, перед согласием.
--------------------------------------------------------------------------- */
.login-box.legal {
    width: min(46rem, 92vw);
    text-align: left;
}
.login-box.legal h1 { text-align: left; }
.login-box.legal h2 {
    margin: var(--sp-6) 0 var(--sp-3);
    font-size: var(--fs-md);
}
.login-box.legal p,
.login-box.legal li { line-height: 1.55; }
.login-box.legal ul { padding-left: 1.2rem; }
.legal-version {
    margin-top: calc(var(--sp-4) * -1);
    color: var(--c-text-muted);
    font-size: var(--fs-sm);
}
.legal-table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--sp-4) 0;
    font-size: var(--fs-sm);
}
.legal-table th,
.legal-table td {
    border: 1px solid var(--c-border-muted);
    padding: var(--sp-3);
    text-align: left;
    vertical-align: top;
}