/* Bankai LMS — интерфейс.

   Что делает тёмную панель дорогой: не цвет, а свет и контраст.
   Поэтому здесь три вещи, которых раньше не было:

   1. Источник света. Каждая поднятая поверхность получает светлую кромку сверху
      и мягкую тень снизу. Плоская темнота без света всегда выглядит дёшево.
   2. Контраст размеров. Заголовок 30px против подписи 10.5px — а не всё подряд
      по 13–14px, как было.
   3. Физика. Кнопка выглядит нажимаемой, поле — утопленным.

   Всё локально: системные шрифты, инлайновый SVG, ни одного внешнего запроса.
*/

/* ---------------------------------------------------------- токены */

:root {
    /* Полотно чуть теплее нейтрального — чистый серый читается как «дёшево». */
    --bg:      #08090b;
    --sunken:  #0b0c0f;
    --surface: #0e1013;
    --raised:  #14171c;
    --high:    #1b1f26;

    --line:        rgba(255, 255, 255, .055);
    --line-strong: rgba(255, 255, 255, .10);

    /* Светлая кромка сверху — главный приём всей темы. */
    --edge:   inset 0 1px 0 rgba(255, 255, 255, .045);
    --edge-2: inset 0 1px 0 rgba(255, 255, 255, .07);
    --lift:   0 1px 2px rgba(0, 0, 0, .5), 0 8px 24px -12px rgba(0, 0, 0, .6);
    --lift-2: 0 2px 4px rgba(0, 0, 0, .5), 0 24px 60px -20px rgba(0, 0, 0, .8);
    --sink:   inset 0 1px 2px rgba(0, 0, 0, .45);

    --ink:   #eceef1;
    --ink-2: #98a0ad;
    /* Подсказки и мелкие пометки. Светлее, чем просится глазу: замер показал
       3.2:1 на приподнятых поверхностях — ниже нормы читаемости 4.5:1.
       Дорого выглядит не приглушённый серый, а текст, который видно. */
    --ink-3: #78808d;

    --ok:   #4ade80;
    --warn: #fbbf24;
    --bad:  #fb7185;

    --accent:      #9db8ff;
    --accent-ink:  #08101f;
    --accent-soft: rgba(157, 184, 255, .13);
    --accent-line: rgba(157, 184, 255, .38);
    --accent-glow: rgba(157, 184, 255, .22);

    --r:    9px;
    --r-sm: 6px;
    --r-lg: 14px;

    --side-w: 248px;
    --top-h:  56px;

    --t: 130ms cubic-bezier(.22, 0, .18, 1);

    /* Шрифты. На машине проверено: Segoe UI, Bahnschrift, Constantia и Consolas
       есть и несут собственную кириллицу. Ничего не грузится из сети. */
    /* Шрифты лежат у нас в static/fonts. Системные оставлены запасными:
       если файл почему-то не дошёл, интерфейс останется читаемым. */
    --ui:      'Inter', "Segoe UI", system-ui, -apple-system, "Noto Sans", sans-serif;
    --display: var(--ui);
    --mono:    'JetBrains Mono', Consolas, "Cascadia Mono", ui-monospace, monospace;
    --num:     var(--mono);
}

:root[data-accent="blade"] {
    --accent: #c4f24a; --accent-ink: #131b02;
    --accent-soft: rgba(196, 242, 74, .13);
    --accent-line: rgba(196, 242, 74, .38);
    --accent-glow: rgba(196, 242, 74, .2);
}
:root[data-accent="indigo"] {
    --accent: #8f80ff; --accent-ink: #0b0824;
    --accent-soft: rgba(143, 128, 255, .15);
    --accent-line: rgba(143, 128, 255, .4);
    --accent-glow: rgba(143, 128, 255, .25);
}

/* Редакционный контраст: антиква в заголовках, гротеск в тексте.
   Единственная тема — выбор сделан, переключателя больше нет. */
:root[data-font="editorial"] {
    --display: 'Source Serif 4', Constantia, Georgia, serif;
}

/* Чем крупнее набор, тем теснее должны стоять буквы: в мелком кегле просвет
   нужен для читаемости, в заголовке тот же просвет читается как рыхлость.
   Inter это чувствует особенно — у него широкие апрош по умолчанию. */
h1 { letter-spacing: -.022em; }
h2 { letter-spacing: -.016em; }
h3, .panel-title { letter-spacing: -.008em; }
:root[data-font="tech"] h1,
:root[data-font="tech"] h2,
:root[data-font="tech"] h3 { letter-spacing: -.03em; }
:root[data-font="editorial"] h1,
:root[data-font="editorial"] h2 { letter-spacing: -.01em; }

* { box-sizing: border-box; }

html, body { height: 100%; }
body {
    margin: 0; padding: 0;
    background: var(--bg); color: var(--ink);
    font-family: var(--ui); font-size: 13.5px; line-height: 1.55;
    /* Цифры одной ширины: в таблицах и счётчиках колонки перестают дрожать
       при обновлении, а проценты выстраиваются по разряду. */
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
}

/* Едва заметный свет сверху слева, чтобы полотно не было мёртвой плоскостью. */
body::before {
    content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(900px 480px at 18% -8%, rgba(255, 255, 255, .028), transparent 62%),
        radial-gradient(700px 400px at 100% 0%, var(--accent-soft), transparent 60%);
    opacity: .55;
}
.shell, .top-plain, .canvas { position: relative; z-index: 1; }

.mono, td, th, .num, input[type=number], .kpi .v, .exam-timer,
table.grid td, .event-head .mono, .day-num {
    font-variant-numeric: tabular-nums;
}

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

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.ico { flex: none; display: block; }
button, a, label, summary, select { cursor: pointer; }
input, textarea { cursor: text; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------------------------------------------------------- защита */

.protected, .protected * {
    -webkit-user-select: none; -moz-user-select: none; user-select: none;
    -webkit-touch-callout: none;
}
.protected input, .protected textarea { -webkit-user-select: text; user-select: text; }
.protected img, .protected video { -webkit-user-drag: none; }
@media print { body { display: none !important; } }

#shield {
    position: fixed; inset: 0; z-index: 9000; display: none;
    align-items: center; justify-content: center; text-align: center; padding: 24px;
    background: rgba(8, 9, 11, .92);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
#shield.on { display: flex; }
#shield .sh-box { max-width: 400px; }
#shield h3 { margin: 0 0 8px; font-size: 18px; font-family: var(--display); }
#shield p { margin: 0; color: var(--ink-2); font-size: 13.5px; }
#shield .sh-mark { color: var(--accent); font-family: var(--mono); font-size: 12px; margin-top: 14px; }

#watermark { position: fixed; inset: 0; z-index: 500; pointer-events: none; overflow: hidden; opacity: .085; }
#watermark span {
    position: absolute; white-space: nowrap; font-family: var(--mono);
    font-size: 12px; color: #fff; transform: rotate(-24deg); letter-spacing: .04em;
}

/* ---------------------------------------------------------- каркас */

.shell { display: flex; height: 100vh; overflow: hidden; }

.side {
    width: var(--side-w); flex: none;
    display: flex; flex-direction: column;
    background: linear-gradient(180deg, #0c0e11, #090a0d);
    border-right: 1px solid var(--line);
    box-shadow: 1px 0 0 rgba(255, 255, 255, .02);
    transition: width .2s cubic-bezier(.22, 0, .18, 1), opacity .16s;
    overflow: hidden;
}
.shell.folded .side { width: 0; opacity: 0; border-right-color: transparent; }

.side-head { padding: 14px 12px 12px; }
.side-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mark {
    width: 30px; height: 30px; flex: none; border-radius: 8px;
    background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 78%, #000));
    color: var(--accent-ink); font-weight: 700; font-size: 13px;
    font-family: var(--display);
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--edge-2), 0 2px 8px -2px var(--accent-glow);
}
.mark.small { width: 25px; height: 25px; font-size: 11px; border-radius: 7px; }
.side-brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.28; }
.side-brand-text b { font-size: 14px; font-weight: 650; font-family: var(--display); letter-spacing: -.01em; }
.side-brand-text em {
    font-style: normal; font-size: 10.5px; color: var(--ink-3);
    letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.side-scroll {
    flex: 1; overflow-y: auto; padding: 2px 8px 10px;
    display: flex; flex-direction: column; gap: 20px;
    scrollbar-width: none; -ms-overflow-style: none;
}
.side-scroll::-webkit-scrollbar { display: none; }

.nav-group { display: flex; flex-direction: column; gap: 1px; }
.nav-heading {
    padding: 0 10px; margin-bottom: 7px;
    font-size: 10px; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; color: var(--ink-3);
}

.nav-item {
    position: relative;
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 7px 10px; border-radius: var(--r-sm);
    color: var(--ink-2); font-size: 13px; text-decoration: none;
    transition: background var(--t), color var(--t), box-shadow var(--t);
}
.nav-item::before {
    content: ""; position: absolute; left: -8px; top: 50%;
    width: 3px; height: 0; border-radius: 0 3px 3px 0;
    background: var(--accent); transform: translateY(-50%);
    box-shadow: 0 0 10px var(--accent-glow);
    transition: height var(--t);
}
.nav-item:hover { background: rgba(255, 255, 255, .035); color: var(--ink); text-decoration: none; }
.nav-item.on {
    background: var(--raised); color: var(--ink); font-weight: 570;
    box-shadow: var(--edge);
}
.nav-item.on::before { height: 18px; }
.nav-item.on .nav-face .ico { color: var(--accent); }

.nav-face { display: flex; align-items: center; gap: 10px; min-width: 0; }
.nav-face .ico { color: var(--ink-3); transition: color var(--t); }
.nav-item:hover .nav-face .ico { color: var(--ink-2); }
.nav-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-tail { display: flex; align-items: center; gap: 4px; flex: none; }

.nav-badge {
    min-width: 18px; height: 18px; padding: 0 6px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 700; font-family: var(--num);
    background: rgba(251, 113, 133, .16); color: var(--bad);
    box-shadow: inset 0 0 0 1px rgba(251, 113, 133, .2);
}

.nav-fold {
    width: 20px; height: 20px; padding: 0; border: 0; border-radius: 4px;
    background: transparent; color: var(--ink-3);
    display: flex; align-items: center; justify-content: center;
    transition: transform .18s, color var(--t), background var(--t);
}
.nav-fold:hover { background: rgba(255, 255, 255, .08); color: var(--ink); }
.nav-fold.open { transform: rotate(90deg); }

.nav-sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .2s cubic-bezier(.22, 0, .18, 1); }
.nav-sub.open { grid-template-rows: 1fr; }
.nav-sub-inner {
    overflow: hidden; min-height: 0;
    display: flex; flex-direction: column; gap: 1px;
    margin: 2px 0 2px 19px; padding-left: 10px;
    border-left: 1px solid var(--line);
}
.nav-item.child { padding: 5px 10px; font-size: 12.5px; }
.nav-item.child::before { display: none; }
.nav-dot { width: 4px; height: 4px; border-radius: 50%; flex: none; background: var(--ink-3); margin: 0 6px; }
.nav-item.child.on .nav-dot { background: var(--accent); box-shadow: 0 0 6px var(--accent-glow); }

.side-foot { padding: 8px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 1px; }
.side-user {
    display: flex; align-items: center; gap: 9px;
    margin-top: 7px; padding: 8px; border-radius: var(--r-sm);
    background: var(--raised); box-shadow: var(--edge); min-width: 0;
}
.side-user-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.28; }
.side-user-text b { font-size: 12.5px; font-weight: 620; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-user-text em { font-style: normal; font-size: 10.5px; color: var(--ink-3); font-family: var(--mono); }

/* ---------------------------------------------------------- шапка */

.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.topbar {
    height: var(--top-h); flex: none;
    display: flex; align-items: center; gap: 12px; padding: 0 18px;
    border-bottom: 1px solid var(--line);
    background: rgba(11, 12, 15, .82);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .02);
}
.icon-btn {
    width: 30px; height: 30px; flex: none; padding: 0;
    border: 0; border-radius: var(--r-sm); background: transparent;
    color: var(--ink-3);
    display: flex; align-items: center; justify-content: center;
    transition: background var(--t), color var(--t);
}
.icon-btn:hover { background: rgba(255, 255, 255, .06); color: var(--ink); }
.shell:not(.folded) .when-closed, .shell.folded .when-open { display: none; }

.crumbs { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 12.5px; color: var(--ink-3); }
.crumbs a { color: var(--ink-3); }
.crumbs a:hover { color: var(--ink-2); text-decoration: none; }
.crumbs .sep { opacity: .4; }
.crumbs .now { color: var(--ink); font-weight: 570; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.omni {
    margin-left: auto; display: flex; align-items: center; gap: 8px;
    height: 30px; padding: 0 8px 0 10px;
    background: var(--raised); border: 1px solid var(--line);
    border-radius: var(--r-sm); color: var(--ink-3);
    font-family: var(--ui); font-size: 12.5px;
    box-shadow: var(--edge);
    transition: border-color var(--t), color var(--t);
}
.omni:hover { border-color: var(--line-strong); color: var(--ink-2); }
.omni span { display: none; }
@media (min-width: 760px) { .omni span { display: inline; } }
.omni kbd, .kbd {
    font-family: var(--mono); font-size: 10px;
    padding: 2px 5px; border-radius: 4px;
    background: rgba(255, 255, 255, .05); border: 1px solid var(--line);
    color: var(--ink-3);
}

.canvas { flex: 1; overflow-y: auto; }
.canvas-in { max-width: 1200px; margin: 0 auto; padding: 30px 26px 80px; }

.top-plain {
    height: var(--top-h); display: flex; align-items: center; padding: 0 22px;
    border-bottom: 1px solid var(--line); background: rgba(11, 12, 15, .8);
}
.top-plain b { font-size: 14px; font-family: var(--display); letter-spacing: -.01em; }

/* ---------------------------------------------------------- палитра */

.omni-wrap { position: fixed; inset: 0; z-index: 9500; display: flex; justify-content: center; padding-top: 12vh; }
.omni-wrap[hidden] { display: none; }
.omni-backdrop {
    position: absolute; inset: 0; background: rgba(4, 5, 7, .74);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.omni-box {
    position: relative; width: min(560px, calc(100vw - 32px)); align-self: flex-start;
    background: linear-gradient(180deg, rgba(34, 38, 46, .92), rgba(24, 27, 33, .94));
    backdrop-filter: blur(28px) saturate(150%); -webkit-backdrop-filter: blur(28px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: var(--r-lg); overflow: hidden;
    box-shadow: var(--lift-2), inset 0 1px 0 rgba(255, 255, 255, .1);
    animation: omni-in .16s cubic-bezier(.22, 0, .18, 1);
}
@keyframes omni-in { from { opacity: 0; transform: translateY(-10px) scale(.985); } }

.omni-head { display: flex; align-items: center; gap: 10px; padding: 0 15px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.omni-head .ico { color: var(--ink-3); }
.omni-head input {
    flex: 1; background: transparent; border: 0; outline: none;
    padding: 15px 0; color: var(--ink); font-family: var(--ui); font-size: 14.5px;
}
.omni-head input::placeholder { color: var(--ink-3); }

.omni-list { max-height: 340px; overflow-y: auto; padding: 6px; }
.omni-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; border-radius: var(--r-sm);
    color: var(--ink-2); font-size: 13px; text-decoration: none;
}
.omni-row:hover { text-decoration: none; }
.omni-row .ico { color: var(--ink-3); }
.omni-row.on { background: var(--accent-soft); color: var(--ink); box-shadow: inset 0 0 0 1px var(--accent-line); }
.omni-row.on .ico { color: var(--accent); }
.omni-row .where { margin-left: auto; font-size: 10.5px; color: var(--ink-3); font-family: var(--mono); }
.omni-empty { padding: 26px; text-align: center; color: var(--ink-3); font-size: 13px; }
.omni-foot {
    display: flex; align-items: center; gap: 8px; padding: 9px 15px;
    border-top: 1px solid rgba(255, 255, 255, .07); color: var(--ink-3); font-size: 11.5px;
}

/* ---------------------------------------------------------- типографика */

/* Контраст размеров — то, чего не хватало больше всего. */
h1 {
    font-family: var(--display);
    font-size: 30px; line-height: 1.12; margin: 0 0 6px;
    letter-spacing: -.032em; font-weight: 640;
}
h2 { font-family: var(--display); font-size: 18px; margin: 30px 0 12px; letter-spacing: -.018em; font-weight: 630; }
h3 { font-size: 14.5px; margin: 22px 0 8px; font-weight: 630; }
p { margin: 0 0 12px; }
.lead { color: var(--ink-2); font-size: 14px; margin: 0 0 26px; max-width: 76ch; }
.muted { color: var(--ink-3); font-size: 12.5px; }
.eyebrow {
    font-size: 10px; font-weight: 700; letter-spacing: .16em;
    text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px;
}
.mono, td.mono { font-family: var(--mono); font-size: 11.5px; }

/* ---------------------------------------------------------- секции */

.panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--edge), var(--lift);
    padding: 18px 20px; margin-bottom: 16px;
}
.panel-title {
    display: flex; align-items: center; gap: 10px;
    margin: -18px -20px 18px; padding: 13px 20px;
    border-bottom: 1px solid var(--line);
    border-radius: var(--r) var(--r) 0 0;
    font-family: var(--display);
    font-size: 13.5px; font-weight: 630; letter-spacing: -.005em;
    text-transform: none; color: var(--ink);
    background: linear-gradient(180deg, rgba(255, 255, 255, .028), transparent);
}
.panel-title:not(:first-child) {
    margin: 24px 0 12px; padding: 0;
    border: 0; border-radius: 0; background: none;
    font-family: var(--ui);
    font-size: 10px; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; color: var(--ink-3);
}
.panel > *:last-child { margin-bottom: 0; }
.panel.tight { padding: 13px 15px; }
.panel.tight .panel-title { margin: -13px -15px 13px; padding: 11px 15px; }
.panel > .table-wrap, .panel > div[style*="overflow-x"] { margin: 0 -20px; }
.panel > .event { margin-left: -20px; margin-right: -20px; }

.callout {
    border-left: 2px solid var(--accent);
    background: var(--accent-soft);
    padding: 12px 15px; margin: 14px 0; border-radius: 0 var(--r-sm) var(--r-sm) 0;
    font-size: 13px;
}
.callout.warn { border-left-color: var(--warn); background: rgba(251, 191, 36, .08); }
.callout.bad  { border-left-color: var(--bad);  background: rgba(251, 113, 133, .08); }
.callout.ok   { border-left-color: var(--ok);   background: rgba(52, 211, 153, .08); }

/* ---------------------------------------------------------- сводка */

.kpi-row {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r); overflow: hidden; margin-bottom: 20px;
    box-shadow: var(--edge), var(--lift);
}
.kpi { padding: 16px 20px 15px; border-right: 1px solid var(--line); }
.kpi:last-child { border-right: 0; }
.kpi .v {
    font-family: var(--num); font-size: 30px; font-weight: 600;
    letter-spacing: -.035em; line-height: 1.05; color: var(--ink);
}
.kpi .l {
    font-size: 10px; color: var(--ink-3); margin-top: 7px;
    letter-spacing: .1em; text-transform: uppercase; font-weight: 650;
}
.kpi.acc .v { color: var(--accent); }
.kpi.bad .v { color: var(--bad); }
.kpi.ok  .v { color: var(--ok); }
.kpi.warn .v { color: var(--warn); }

/* ---------------------------------------------------------- дни */

.days {
    display: grid; gap: 1px; background: var(--line);
    border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
    box-shadow: var(--edge), var(--lift);
}
.day-card {
    position: relative; display: flex; align-items: center; gap: 16px;
    background: var(--surface); padding: 15px 20px;
    transition: background var(--t); text-decoration: none; color: inherit;
}
.day-card::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--accent); opacity: 0; transition: opacity var(--t);
}
.day-card.open:hover { background: var(--raised); text-decoration: none; }
.day-card.open:hover::before { opacity: 1; }
.day-card.locked { opacity: .35; }
.day-card.done::before { background: var(--ok); opacity: 1; }
.day-num { font-family: var(--num); font-size: 20px; font-weight: 600; color: var(--ink-3); min-width: 40px; letter-spacing: -.02em; }
.day-card.done .day-num { color: var(--ok); }
.day-card.open:not(.done) .day-num { color: var(--accent); }
.day-body { flex: 1; min-width: 0; }
.day-body .t { font-weight: 620; font-size: 14px; margin-bottom: 2px; }
.day-body .s { color: var(--ink-3); font-size: 12.5px; }
.day-meta { text-align: right; white-space: nowrap; }

/* ---------------------------------------------------------- метки */

.pill {
    display: inline-flex; align-items: center; max-width: 100%;
    font-size: 11px; font-weight: 570;
    padding: 3px 9px; border-radius: 6px;
    border: 1px solid var(--line-strong); color: var(--ink-2);
    background: var(--raised); box-shadow: var(--edge);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pill.ok   { color: var(--ok);   border-color: rgba(74, 222, 128, .28);  background: rgba(74, 222, 128, .1); }
.pill.warn { color: var(--warn); border-color: rgba(251, 191, 36, .28);  background: rgba(251, 191, 36, .1); }
.pill.bad  { color: var(--bad);  border-color: rgba(251, 113, 133, .28); background: rgba(251, 113, 133, .1); }
.pill.acc  { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }

.bar { height: 4px; background: rgba(255, 255, 255, .07); border-radius: 99px; overflow: hidden; box-shadow: var(--sink); }
.bar > i { display: block; height: 100%; background: var(--accent); box-shadow: 0 0 8px var(--accent-glow); transition: width .4s; }
.bar.ok > i { background: var(--ok); box-shadow: none; }

/* ---------------------------------------------------------- формы */

label.field { display: block; margin-bottom: 15px; }
label.field > span {
    display: block; font-size: 11.5px; color: var(--ink-2); margin-bottom: 6px;
    font-weight: 550;
}
/* Правило выше делает блоком любой прямой span — в том числе пару
   «поле + единица», и подпись «минут» уезжала под поле на всю ширину.
   Возвращаем ей flex: правило это перебивает по весу селектора. */
label.field > span.with-unit { display: flex; margin-bottom: 0; font-weight: 400; }

input[type=text], input[type=password], input[type=number], textarea, select {
    width: 100%; height: 36px; padding: 0 12px;
    background: var(--sunken); color: var(--ink);
    border: 1px solid var(--line-strong); border-radius: var(--r-sm);
    font-family: var(--ui); font-size: 13.5px; outline: none;
    box-shadow: var(--sink);
    transition: border-color var(--t), box-shadow var(--t);
}
textarea { height: auto; padding: 10px 12px; }
input::placeholder, textarea::placeholder { color: var(--ink-3); }
input:focus, textarea:focus, select:focus {
    border-color: var(--accent);
    box-shadow: var(--sink), 0 0 0 3px var(--accent-soft);
}
select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%),
                      linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
    background-position: calc(100% - 16px) 51%, calc(100% - 12px) 51%;
    background-size: 4px 4px, 4px 4px; background-repeat: no-repeat;
    padding-right: 32px;
}

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    height: 34px; padding: 0 15px; border-radius: var(--r-sm);
    border: 0; font-weight: 640; font-size: 13px; font-family: var(--ui);
    background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 84%, #000));
    color: var(--accent-ink); text-decoration: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 1px 2px rgba(0, 0, 0, .5),
                0 6px 18px -8px var(--accent-glow);
    transition: filter var(--t), transform var(--t), box-shadow var(--t);
}
.btn:hover { filter: brightness(1.07); text-decoration: none; }
.btn:active { transform: translateY(1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 1px rgba(0, 0, 0, .5); }
.btn:disabled, .btn.off { opacity: .28; cursor: not-allowed; filter: none; box-shadow: none; }
.btn.ghost {
    background: var(--raised); color: var(--ink-2);
    border: 1px solid var(--line-strong);
    box-shadow: var(--edge);
}
.btn.ghost:hover { color: var(--ink); border-color: var(--ink-3); background: var(--high); }
.btn.danger {
    background: rgba(251, 113, 133, .1); color: var(--bad);
    border: 1px solid rgba(251, 113, 133, .3); box-shadow: var(--edge);
}
.btn.danger:hover { background: rgba(251, 113, 133, .18); }
.btn.sm { height: 28px; padding: 0 11px; font-size: 12px; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.check { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 11px; }
.check input { margin-top: 2px; width: 15px; height: 15px; accent-color: var(--accent); flex: none; }
.check span { font-size: 13px; color: var(--ink-2); line-height: 1.5; }

.err  { color: var(--bad);  font-size: 13px; margin-bottom: 12px; }
.note { color: var(--warn); font-size: 13px; margin-bottom: 12px; }

/* ---------------------------------------------------------- таблицы */

table.grid { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.grid th {
    text-align: left; font-size: 10px; font-weight: 700; letter-spacing: .13em;
    text-transform: uppercase; color: var(--ink-3);
    padding: 11px 16px; border-bottom: 1px solid var(--line);
    background: var(--sunken);
    position: sticky; top: 0; z-index: 2; white-space: nowrap;
}
table.grid td { padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.grid tr:last-child td { border-bottom: 0; }
table.grid tr { transition: background var(--t); }
table.grid tr:hover td { background: rgba(255, 255, 255, .025); }
table.grid tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
table.grid td.center, table.grid th.center { text-align: center; }
.table-wrap { overflow-x: auto; }

/* ---------------------------------------------------------- журнал */

.event { padding: 13px 20px; border-bottom: 1px solid var(--line); border-left: 2px solid transparent; }
.event:last-child { border-bottom: 0; }
.sev-border-alert { border-left-color: var(--bad); }
.sev-border-warn  { border-left-color: var(--warn); }
.sev-border-info  { border-left-color: var(--line-strong); }
.event-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-bottom: 3px; }
.event-title { font-weight: 620; font-size: 13px; }
.event-head .mono { font-size: 11px; }
.event-body { color: var(--ink-2); font-size: 12.5px; line-height: 1.5; }
.event-meta { font-family: var(--mono); font-size: 11px; color: var(--ink-3); margin-top: 4px; }
.event-todo { margin-top: 6px; font-size: 12px; color: var(--warn); padding-left: 10px; border-left: 2px solid rgba(251, 191, 36, .35); }

/* ---------------------------------------------------------- ведомость */

table.grades td.center { font-family: var(--num); font-size: 12.5px; font-weight: 620; min-width: 44px; }
.cell-passed  { background: rgba(74, 222, 128, .1);  color: var(--ok); }
.cell-failed  { background: rgba(251, 113, 133, .1); color: var(--bad); }
.cell-started { background: rgba(251, 191, 36, .09); color: var(--warn); }
.cell-none    { color: var(--ink-3); }

.legend { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 14px; font-size: 12px; color: var(--ink-3); }
.legend span { display: flex; align-items: center; gap: 7px; }
.legend .sw { width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--line-strong); display: inline-block; }

.danger-zone { border-color: rgba(251, 113, 133, .22); }
.danger-zone .panel-title { color: var(--bad); background: linear-gradient(180deg, rgba(251, 113, 133, .07), transparent); }
.danger-zone p { color: var(--ink-2); font-size: 13px; }

/* ---------------------------------------------------------- редакторы */

textarea.editor {
    width: 100%; font-family: var(--mono); font-size: 12.5px; line-height: 1.7;
    background: var(--sunken); color: var(--ink);
    border: 1px solid var(--line-strong); border-radius: var(--r-sm);
    padding: 13px 15px; resize: vertical; outline: none; box-shadow: var(--sink);
}
textarea.editor:focus { border-color: var(--accent); box-shadow: var(--sink), 0 0 0 3px var(--accent-soft); }

details.hint { background: var(--sunken); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 14px; margin-bottom: 12px; }
details.hint summary { font-size: 12.5px; color: var(--accent); }
details.hint pre { font-family: var(--mono); font-size: 11.5px; color: var(--ink-2); margin: 10px 0; white-space: pre-wrap; line-height: 1.7; }

.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 8px; }
.settings-grid .field { margin-bottom: 0; }
.settings-grid small { display: block; margin-top: 5px; font-size: 11px; }

.calc-out { height: 36px; display: flex; align-items: center; padding: 0 12px; background: var(--sunken); border: 1px dashed var(--line-strong); border-radius: var(--r-sm); color: var(--accent); font-family: var(--num); font-size: 14px; }

.sticky-save {
    position: sticky; bottom: 0; z-index: 400;
    display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
    padding: 16px 0; margin-bottom: 14px;
    background: linear-gradient(0deg, var(--bg) 66%, rgba(8, 9, 11, 0));
}
.sticky-save .muted { font-size: 11.5px; }
.sticky-cta { position: sticky; bottom: 0; z-index: 400; padding: 20px 0 16px; background: linear-gradient(0deg, var(--bg) 62%, rgba(8, 9, 11, 0)); }

.setting { display: flex; gap: 24px; align-items: flex-start; padding: 15px 0; border-bottom: 1px solid var(--line); }
.setting:last-child { border-bottom: 0; padding-bottom: 0; }
.setting-main { flex: 1; min-width: 0; }
.setting-label { font-weight: 620; font-size: 13.5px; margin-bottom: 4px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.setting-hint { color: var(--ink-3); font-size: 12.5px; line-height: 1.5; }
.setting-input { width: 172px; flex: none; }
.setting-input input[type=number] { text-align: right; font-family: var(--num); }
.setting-input .muted { margin-top: 5px; font-size: 10.5px; text-align: right; }

.switch { display: flex; align-items: center; gap: 9px; height: 36px; }
.switch input { width: 16px; height: 16px; accent-color: var(--accent); }
.switch span { font-size: 12.5px; color: var(--ink-2); }

.with-unit { display: flex; align-items: stretch; }
.with-unit input { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: 0; text-align: right; }
.with-unit .unit {
    display: flex; align-items: center; padding: 0 12px; height: 36px;
    background: var(--raised); border: 1px solid var(--line-strong); border-left: 0;
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    color: var(--ink-3); font-size: 12px; white-space: nowrap; box-shadow: var(--edge);
}

ol.steps { margin: 0 0 14px; padding-left: 20px; }
ol.steps li { color: var(--ink-2); font-size: 13px; line-height: 1.6; margin-bottom: 7px; }
ol.steps li strong { color: var(--ink); }

/* ---------------------------------------------------------- вопросы */

.q-row { display: flex; gap: 16px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--line); }
.q-row:last-child { border-bottom: 0; }
.q-main { flex: 1; min-width: 0; }
.q-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.q-text-line { font-size: 13.5px; margin-bottom: 4px; }
.q-actions { display: flex; gap: 7px; flex: none; }

.draft { padding: 15px 0 15px 13px; border-bottom: 1px solid var(--line); border-left: 2px solid transparent; }
.draft:last-child { border-bottom: 0; }
.draft-bad { border-left-color: var(--bad); opacity: .6; }
.draft-text { font-size: 14px; line-height: 1.5; margin: 6px 0 10px; }
ol.draft-options { margin: 0 0 9px; padding-left: 20px; }
ol.draft-options li { font-size: 13px; color: var(--ink-2); margin-bottom: 5px; }
ol.draft-options li.right { color: var(--ok); font-weight: 620; }

/* ---------------------------------------------------------- строки форм */

.row-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 12px; }
.row-form:last-child { margin-bottom: 0; }
.row-form .field { margin-bottom: 0; }
.row-form .grow { flex: 1; min-width: 170px; }

/* Строка выдачи курса: имя, метка типа, режим доступа.

   Метка НЕ идёт следом за названием — иначе её левый край гуляет вместе с
   длиной текста, и колонка выглядит осыпавшейся. Она вынесена в отдельную
   колонку.

   Колонки объявлены на СПИСКЕ, а строки подхватывают их через subgrid.
   Только так ширину колонки меток задаёт самая длинная метка во всём списке,
   и метки встают по одной линии. Если объявить сетку на каждой строке,
   каждая посчитает свою ширину, и разнобой вернётся — просто менее заметный.
   Там, где subgrid не поддержан, работает запасная сетка на строке: метки
   выровняются по правому краю, что тоже прилично. */
.enrol-list { display: grid; }
.enrol {
    display: grid;
    grid-template-columns: 1fr max-content 200px;
    align-items: center;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--line);
}
@supports (grid-template-columns: subgrid) {
    .enrol-list { grid-template-columns: 1fr max-content 200px; }
    .enrol { grid-template-columns: subgrid; grid-column: 1 / -1; }
}
.enrol:last-of-type { border-bottom: 0; }
.enrol-name {
    display: flex; align-items: center; gap: 10px;
    min-width: 0; margin: 0; cursor: pointer;
}
.enrol-name input { width: 15px; height: 15px; flex: none; accent-color: var(--accent); }
.enrol-title { font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.enrol-name:hover .enrol-title { color: var(--ink); }
.enrol-name input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.enrol-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.enrol-mode { height: 32px; font-size: 12.5px; }

/* ---------------------------------------------------------- группы */

.group-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 11px; }
.group-name { font-size: 16px; font-weight: 640; font-family: var(--display); letter-spacing: -.015em; }
.group-courses { display: flex; gap: 6px; flex-wrap: wrap; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chips .chip { font-family: var(--mono); font-size: 11px; padding: 4px 10px; }
select[multiple] { height: auto; padding: 6px; min-height: 92px; background-image: none; }

/* ---------------------------------------------------------- выбор курса */

.picker { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; margin-bottom: 20px; }
.picker-label { color: var(--ink-3); font-size: 12px; }
.chip {
    padding: 5px 13px; border-radius: 999px; font-size: 12.5px;
    border: 1px solid var(--line-strong); color: var(--ink-2);
    background: var(--raised); text-decoration: none; box-shadow: var(--edge);
    transition: border-color var(--t), color var(--t);
}
.chip:hover { border-color: var(--ink-3); color: var(--ink); text-decoration: none; }
.chip.on { border-color: var(--accent-line); color: var(--accent); background: var(--accent-soft); }

/* ---------------------------------------------------------- выбор темы */

.theme-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.theme-card {
    display: flex; align-items: center; gap: 11px;
    padding: 13px 14px; border-radius: var(--r-sm);
    border: 1px solid var(--line-strong); background: var(--raised);
    box-shadow: var(--edge);
    transition: border-color var(--t), background var(--t), box-shadow var(--t);
}
.theme-card:hover { border-color: var(--ink-3); }
.theme-card.on {
    border-color: var(--accent); background: var(--accent-soft);
    box-shadow: var(--edge), 0 0 0 1px var(--accent-line), 0 8px 24px -14px var(--accent-glow);
}
.theme-card input { width: 15px; height: 15px; flex: none; accent-color: var(--accent); }
.theme-dot { width: 24px; height: 24px; border-radius: 7px; flex: none; box-shadow: var(--edge-2); }
.theme-abc {
    width: 34px; height: 26px; flex: none; display: flex; align-items: center;
    justify-content: center; border-radius: 6px; background: var(--sunken);
    color: var(--ink); font-size: 15px; font-weight: 650; box-shadow: var(--sink);
}
.theme-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.theme-text b { font-size: 13px; font-weight: 630; }
.theme-text em { font-style: normal; font-size: 11px; color: var(--ink-3); }

/* ---------------------------------------------------------- урок и тест */

.narrow { max-width: 720px; margin: 0 auto; }

/* День, ответы которого ещё у ментора: пройден вперёд, но не закрыт. */
.day-card.waiting { border-color: rgba(251, 191, 36, .26); }
.day-card.waiting .day-num { color: var(--warn); }

/* ------------------------------------------------- переключатель правила */

/* Колонка настроек шире обычной: в неё встаёт переключатель на три положения,
   и правый край у всех строк совпадает. */
.setting-input.rule-state { width: 300px; display: flex; flex-direction: column; gap: 8px; }

.states { display: flex; border: 1px solid var(--line); border-radius: var(--r-sm);
          overflow: hidden; background: var(--sunken); box-shadow: var(--edge); }
.state { flex: 1; position: relative; cursor: pointer; text-align: center; }
.state + .state { border-left: 1px solid var(--line); }
.state input { position: absolute; opacity: 0; width: 0; height: 0; }
.state span {
    display: block; padding: 8px 6px; font-size: 11.5px; color: var(--ink-3);
    white-space: nowrap; transition: color .12s, background .12s;
}
.state:hover span { color: var(--ink-2); }
.state.on span { color: var(--accent); background: var(--accent-soft); font-weight: 550; }
.state input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Поле значения занимает ту же ширину, что и переключатель над ним. */
.state-value { display: grid; gap: 8px; }
.state-value.pair { grid-template-columns: 1fr 1fr; }
/* Три поля — часы, минуты, секунды. Обычной ширины настройки (172px) на них
   не хватает: подпись единицы не переносится, и от самого поля не остаётся
   ничего. Поэтому блок шире, колонок три, а подписи короткие. */
/* Три поля времени. Ширины 260px не хватало: браузер резервирует место под
   стрелки счётчика, и «30» показывалось как «3». Блок шире, отступы внутри
   поля меньше, стрелки убраны — они тут не нужны, значение набирают руками. */
.setting-input.triple { width: 330px; }
.state-value.triple { grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.state-value.triple .unit { padding: 0 8px; font-size: 11px; }
.state-value.triple input {
    min-width: 0; padding: 0 8px; text-align: center;
    -moz-appearance: textfield; appearance: textfield;
}
.state-value.triple input::-webkit-outer-spin-button,
.state-value.triple input::-webkit-inner-spin-button {
    -webkit-appearance: none; margin: 0;
}
.state-value.off { display: none; }
.state-value .with-unit input { width: 100%; min-width: 0; }

.rule-state .muted { margin: 0; font-size: 11px; text-align: right; }

/* ---------------------------------------------------------- картинки урока */

.shot { margin: 0 0 20px; }
.shot img {
    display: block; width: 100%; height: auto;
    border-radius: var(--r-sm); border: 1px solid var(--line);
    background: var(--sunken); box-shadow: var(--sink);
    -webkit-user-drag: none; user-select: none;
}
.shot figcaption {
    margin-top: 8px; font-size: 12.5px; color: var(--ink-3); line-height: 1.5;
}

/* Загруженные файлы в редакторе дня */
.shots {
    display: grid; gap: 14px; margin-bottom: 16px;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.shot-card {
    border: 1px solid var(--line); border-radius: var(--r-sm);
    background: var(--sunken); padding: 9px; box-shadow: var(--edge);
}
.shot-card img {
    display: block; width: 100%; height: 108px; object-fit: cover;
    border-radius: 5px; background: var(--bg); margin-bottom: 8px;
}
.shot-meta { display: flex; flex-direction: column; gap: 2px; font-size: 11.5px; }
.shot-meta .mono { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shot-actions { display: flex; gap: 6px; align-items: center; margin-top: 9px; }
.shot-actions form { margin: 0; }

.file-rows { display: flex; flex-direction: column; gap: 7px; }
.file-row {
    display: flex; align-items: center; gap: 12px;
    padding: 9px 12px; border-radius: var(--r-sm);
    background: var(--sunken); border: 1px solid var(--line); font-size: 12.5px;
}
.file-row form { margin: 0; }

.chip.danger { border-color: rgba(248, 113, 113, .28); color: var(--bad); }
.chip.danger:hover { border-color: var(--bad); background: rgba(248, 113, 113, .08); }

.lesson-body { font-size: 15px; line-height: 1.78; }
.lesson-body h2 { border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.lesson-body ul, .lesson-body ol { padding-left: 20px; margin: 0 0 15px; }
.lesson-body li { margin-bottom: 6px; }
.lesson-body strong { color: #fff; }
.lesson-body code {
    font-family: var(--mono); font-size: 12.5px; background: var(--sunken);
    border: 1px solid var(--line); padding: 1px 6px; border-radius: 4px; color: var(--accent);
}

.video-shell { position: relative; background: #000; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: var(--lift); }
.video-shell video { display: block; width: 100%; height: auto; }
.video-mark {
    position: absolute; right: 10px; bottom: 46px; z-index: 3; pointer-events: none;
    font-family: var(--mono); font-size: 11px; color: rgba(255, 255, 255, .42);
    text-shadow: 0 1px 3px rgba(0, 0, 0, .9);
}

/* Прокрутка на тесте нужна: вопрос бывает на полтора экрана, и без неё до
   поля ответа и кнопки не добраться — сдать тест становится нельзя. Скрываем
   только горизонтальную: по бокам ездить незачем. */
body.exam-mode { overflow-y: auto; overflow-x: hidden; }
.exam-stage { max-width: 680px; margin: 0 auto; padding: 28px 20px; }
.exam-head { display: flex; align-items: center; gap: 16px; border-bottom: 1px solid var(--line); padding-bottom: 14px; margin-bottom: 28px; }
.exam-counter { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.exam-timer { margin-left: auto; font-family: var(--num); font-size: 28px; font-weight: 620; color: var(--accent); letter-spacing: -.03em; }
.exam-timer.low { color: var(--bad); animation: pulse .8s infinite; }
@keyframes pulse { 50% { opacity: .4; } }

/* pre-wrap, а не обычный перенос: куратор пишет вопрос абзацами, а без
   этого браузер схлопывает переносы и ученик видит сплошную стену. */
.q-text { font-size: 19px; line-height: 1.5; margin-bottom: 24px; font-family: var(--display); letter-spacing: -.012em; white-space: pre-wrap; }
.opt {
    display: block; width: 100%; text-align: left;
    padding: 13px 16px; margin-bottom: 9px;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-sm); box-shadow: var(--edge);
    font-family: var(--ui); font-size: 14px; color: var(--ink);
    transition: border-color var(--t), background var(--t), transform var(--t);
}
.opt:hover { border-color: var(--accent-line); background: var(--raised); }
.opt.picked { border-color: var(--accent); background: var(--accent-soft); box-shadow: var(--edge), 0 0 0 1px var(--accent-line); }
.opt .k { display: inline-block; width: 22px; font-family: var(--mono); color: var(--ink-3); font-size: 12px; }

.violation-banner {
    position: fixed; left: 50%; top: 20px; transform: translateX(-50%);
    z-index: 9600; background: var(--bad); color: #1a0408;
    padding: 11px 20px; border-radius: var(--r-sm); font-weight: 640;
    font-size: 13px; display: none; box-shadow: var(--lift-2);
    max-width: 90vw; text-align: center;
}
.violation-banner.on { display: block; }

.fs-gate { position: fixed; inset: 0; z-index: 9800; background: var(--bg); display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px; }
.fs-gate.off { display: none; }

/* ---------------------------------------------------------- сообщения */

.flash { padding: 11px 15px; border-radius: var(--r-sm); margin-bottom: 12px; font-size: 13px; box-shadow: var(--edge); }
.flash.ok { background: rgba(74, 222, 128, .09); border: 1px solid rgba(74, 222, 128, .24); color: var(--ok); }
.flash.error { background: rgba(251, 113, 133, .09); border: 1px solid rgba(251, 113, 133, .24); color: var(--bad); }
.flash.invite { background: var(--sunken); border: 1px solid var(--accent-line); color: var(--accent); font-family: var(--mono); font-size: 11.5px; word-break: break-all; }

.center-card { max-width: 400px; margin: 10vh auto; }
.center-card .panel { box-shadow: var(--edge), var(--lift-2); }
.sev-alert { color: var(--bad); } .sev-warn { color: var(--warn); }
.sev-info { color: var(--ink-3); } .sev-ok { color: var(--ok); }
hr.sep { border: 0; border-top: 1px solid var(--line); margin: 24px 0; }

/* ---------------------------------------------------------- адаптив */

@media (max-width: 900px) {
    .shell .side { position: fixed; z-index: 800; height: 100vh; box-shadow: var(--lift-2); }
    .shell.folded .side { box-shadow: none; }
    .canvas-in { padding: 22px 15px 60px; }
    h1 { font-size: 23px; }
    .kpi .v { font-size: 25px; }
    .setting { flex-direction: column; gap: 9px; }
    .setting-input, .setting-input.rule-state { width: 100%; }
    .setting-input .muted { text-align: left; }
    .q-row { flex-direction: column; align-items: stretch; gap: 9px; }
    .enrol-list, .enrol { grid-template-columns: 1fr; gap: 8px; }
    .enrol { grid-column: auto; }
    .enrol-mode { width: 100%; }
    .day-meta { display: none; }
    .exam-timer { font-size: 22px; }
    .kpi-row { grid-template-columns: repeat(2, 1fr); }
    .kpi:nth-child(2n) { border-right: 0; }
    .kpi:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}

/* ---------------------------------------------------------- ширина полотна */

/* Панель с данными не должна ютиться в колонке посреди пустого монитора.
   Ширина тянется вместе с окном, отступы растут плавно вместе с ней. */
.canvas-in {
    max-width: 1760px;
    padding: 28px clamp(16px, 2.4vw, 44px) 80px;
}
/* Читаемым текстом это не управляет: длинные абзацы по-прежнему в .narrow. */

/* ---------------------------------------------------------- готовые значения */

.presets { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 2px; }
.presets .chip { padding: 4px 11px; font-size: 12px; border-radius: 6px; }
.presets .chip:active { transform: translateY(1px); }

/* ---------------------------------------------------------- своё значение дня */

.own-pair { display: flex; flex-direction: column; align-items: stretch; }
.own-pair .switch { justify-content: flex-end; }
.own-pair input[type=number]:disabled { opacity: .4; cursor: not-allowed; }
.own-pair .muted { margin-top: 5px; }

/* ---------------------------------------------------------- загрузка файла */

input[type=file] {
    width: 100%; height: auto; padding: 9px 12px;
    background: var(--sunken); color: var(--ink-2);
    border: 1px dashed var(--line-strong); border-radius: var(--r-sm);
    font-family: var(--ui); font-size: 12.5px; box-shadow: none;
}
input[type=file]:hover { border-color: var(--accent-line); color: var(--ink); }
input[type=file]::file-selector-button {
    margin-right: 12px; padding: 6px 12px;
    border: 1px solid var(--line-strong); border-radius: var(--r-sm);
    background: var(--raised); color: var(--ink); font-family: var(--ui);
    font-size: 12.5px; font-weight: 600; cursor: pointer;
}
input[type=file]::file-selector-button:hover { border-color: var(--ink-3); }

/* ---------------------------------------------------------- таблица аналитики */

/* Название дня разъезжалось на четыре строки и ломало ритм таблицы. */
table.grid td .day-name {
    display: block; max-width: 260px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Примечание куратора в таблице дней: длинную заметку обрезаем, целиком
   она в подсказке и в редакторе дня — иначе одна строка растянет всю таблицу. */
.day-note {
    /* Заметка не должна отжимать кнопки: у неё свой предел, а таблица при
       нехватке места прокручивается вбок — она уже в контейнере со скроллом. */
    max-width: 230px; min-width: 130px; font-size: 12.5px; color: var(--ink-2);
}
/* Кнопки действий держим в одну строку: в два ряда они читаются как разные
   строки таблицы. */
table.grid .btn-row { flex-wrap: nowrap; }
table.grid .btn-row .btn { white-space: nowrap; }
/* Заметка должна читаться как пометка на полях, а не как ещё одна ячейка
   данных. Даём ей корешок акцентного цвета и мягкую подложку: в таблице из
   ровного серого текста этого достаточно, чтобы глаз цеплялся.
   Жёлтый намеренно не берём — он в панели означает «требует внимания», и в
   этой же строке уже стоит жёлтая метка банка вопросов. */
.day-note span {
    display: block;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    padding: 6px 10px;
    border-left: 2px solid var(--accent);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    background: var(--accent-soft);
    color: var(--ink);
}
/* Пустая заметка, наоборот, не должна шуметь: это отсутствие, а не событие. */
.note-add {
    font-size: 12px; color: var(--ink-3);
    border-bottom: 1px dashed var(--line-strong);
    text-decoration: none;
}
.note-add:hover { color: var(--accent); border-color: var(--accent-line); }

/* Шапка курса: тип курса первым, потому что от него зависят все правила. */
.course-head {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin: 0 0 10px; font-size: 13px;
}
.course-head .muted { display: inline-flex; gap: 6px; flex-wrap: wrap; }

/* ---------------------------------------------------------- список прав */

.caps { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 8px; }
.cap {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; border-radius: var(--r-sm);
    background: var(--sunken); border: 1px solid var(--line);
    font-size: 12.5px; color: var(--ink-3);
}
.cap.on { color: var(--ink-2); border-color: rgba(74, 222, 128, .2); background: rgba(74, 222, 128, .05); }
.cap-mark { display: flex; color: var(--ink-3); }
.cap.on .cap-mark { color: var(--ok); }

/* Четыре колонки прав; на узком экране схлопываются сами. */
.cap-cols {
    display: grid; gap: 10px 20px;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    margin-top: 4px;
}
.cap-cols .cap { margin-bottom: 6px; }
.cap-head {
    font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--ink-3); margin: 6px 0 9px; font-weight: 600;
}

/* Выбор прав вручную */
.cap-picker { margin: 14px 0 16px; padding-top: 4px; }
/* «Как у роли» — набор показан, но правит его роль, а не мышь. */
.cap-picker.locked { pointer-events: none; }
.cap-picker.locked input { opacity: .7; }
.cap-check { margin-bottom: 8px; }
.cap-check.off span { color: var(--ink-3); }

.sub-head {
    font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--ink-3); font-weight: 600; margin: 22px 0 11px;
}

.preset-cols {
    display: grid; gap: 24px;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
}

/* Раскрывающийся блок настроек — закрыт по умолчанию, чтобы карточка
   сотрудника читалась с одного взгляда. */
details.fold { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 14px; }
details.fold > summary {
    cursor: pointer; font-size: 12.5px; color: var(--ink-2);
    list-style: none; display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 11px; border-radius: var(--r-sm);
    border: 1px solid var(--line); background: var(--raised); box-shadow: var(--edge);
}
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::before { content: "+"; color: var(--ink-3); font-size: 14px; }
details.fold[open] > summary::before { content: "‘2"; }
details.fold > summary:hover { color: var(--ink); border-color: var(--line-strong); }
details.fold > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
details.fold > *:not(summary) { margin-top: 16px; }

/* ---------------------------------------------------------- проверка ответов */

.review-q { font-size: 15px; line-height: 1.5; margin-bottom: 6px; font-family: var(--display); letter-spacing: -.01em; white-space: pre-wrap; }
.review-a {
    white-space: pre-wrap; font-size: 13.5px; line-height: 1.6;
    padding: 13px 15px; border-radius: var(--r-sm);
    background: var(--sunken); border: 1px solid var(--line-strong);
    box-shadow: var(--sink);
}
.review-guide {
    white-space: pre-wrap; font-size: 12.5px; line-height: 1.6; color: var(--ink-2);
    padding: 11px 14px; border-left: 2px solid var(--accent);
    background: var(--accent-soft); border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.panel-title .muted { font-weight: 400; font-size: 12px; letter-spacing: 0; text-transform: none; }


/* ==========================================================================
   ОБЛИК ПОВЕРХНОСТЕЙ

   Блок стоит последним намеренно: он перекрывает материал компонентов,
   описанный выше. Если поднять его в начало файла, каждое следующее правило
   вернёт матовую поверхность обратно, и переключатель перестанет работать.
   ========================================================================== */

/* ============================================================ матовое стекло

   Панели становятся полупрозрачными и размывают то, что под ними, а под всем
   лежит мягкое цветное свечение — иначе размывать нечего и приём не читается.

   Одно решение отличает это от обычного глассморфизма: подложка тонируется
   ЧЁРНЫМ, а не белым. Белая плёнка поверх тёмного фона поднимает светлоту
   поверхности, и светлый текст на ней теряет контраст — цифры в таблицах
   первыми становятся нечитаемыми. Чёрная плёнка сохраняет тёмную основу:
   стекло видно по кромке и по размытию, а не по осветлению.

   Размытие стоит дорого для видеокарты, поэтому оно живёт только на крупных
   поверхностях — оболочке и панелях. Строки таблиц, плашки и кнопки его не
   получают: их сотни на странице, и каждая стоила бы кадра. */

:root[data-skin="glass"] {
    --glass:        rgba(10, 12, 16, .62);
    --glass-strong: rgba(8, 10, 14, .78);
    --glass-line:   rgba(255, 255, 255, .11);
    --glass-edge:   inset 0 1px 0 rgba(255, 255, 255, .09);
    --glass-blur:   saturate(150%) blur(18px);

    --line:        rgba(255, 255, 255, .085);
    --line-strong: rgba(255, 255, 255, .15);
    /* Свечение поднимает светлоту фона под панелью, и подсказки уходили на
       4.44:1 при норме 4.5. Осветляем их ровно настолько, чтобы вернуться
       в норму: замер на самом ярком месте свечения даёт 4.63:1. */
    --ink-3: #7b8390;
    --r:    14px;
    --r-sm: 10px;
    --r-lg: 20px;
}

/* Свечение под всем интерфейсом. Прибито к окну, не ездит при прокрутке —
   иначе размытие пересчитывается каждый кадр и панель начинает тормозить. */
:root[data-skin="glass"] body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(1200px 780px at 12% 0%,
            color-mix(in srgb, var(--accent) 26%, transparent), transparent 66%),
        radial-gradient(950px 660px at 94% 10%, rgba(74, 222, 128, .13), transparent 62%),
        radial-gradient(1100px 760px at 56% 106%,
            color-mix(in srgb, var(--accent) 18%, transparent), transparent 64%);
    /* Свет неоднороден: чуть тёплое пятно сверху не даёт градиентам слиться
       в ровную заливку, из-за которой стекло перестаёт читаться стеклом. */
    background-color: var(--bg);
}
:root[data-skin="glass"] .shell,
:root[data-skin="glass"] .auth-wrap { position: relative; z-index: 1; }

/* --- оболочка */
:root[data-skin="glass"] .side,
:root[data-skin="glass"] .top {
    background-image: none;
    background-color: var(--glass-strong);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border-color: var(--glass-line);
}

/* --- панели: единственное место, где размытие оправдано */
:root[data-skin="glass"] .panel,
:root[data-skin="glass"] .auth-card,
:root[data-skin="glass"] .kpi-row,
:root[data-skin="glass"] .day-card,
:root[data-skin="glass"] .shot-card {
    background-image: none;
    background-color: var(--glass);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border-color: var(--glass-line);
    box-shadow: var(--glass-edge), 0 10px 40px -18px rgba(0, 0, 0, .85);
    position: relative;
}
/* Блик по верхней кромке: он и есть главный признак стекла. Без него
   полупрозрачная панель читается просто как тёмный прямоугольник. */
:root[data-skin="glass"] .panel::after,
:root[data-skin="glass"] .auth-card::after {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg,
        transparent, rgba(255, 255, 255, .28) 22%,
        rgba(255, 255, 255, .28) 78%, transparent);
}

/* --- то, что лежит ВНУТРИ панели, размытия не получает: под ним уже стекло,
       второй слой ничего не добавит, а кадры съест. Вместо этого — плотная
       подложка, чтобы числа не сидели на градиенте. */
:root[data-skin="glass"] .cap,
:root[data-skin="glass"] .file-row,
:root[data-skin="glass"] .states,
:root[data-skin="glass"] .seg,
:root[data-skin="glass"] .callout,
:root[data-skin="glass"] .hint,
:root[data-skin="glass"] pre,
:root[data-skin="glass"] .review-a {
    background: rgba(0, 0, 0, .30);
    border-color: var(--glass-line);
}
:root[data-skin="glass"] input,
:root[data-skin="glass"] select,
:root[data-skin="glass"] textarea {
    background: rgba(0, 0, 0, .34);
    border-color: var(--glass-line);
}
:root[data-skin="glass"] input:focus,
:root[data-skin="glass"] select:focus,
:root[data-skin="glass"] textarea:focus {
    background: rgba(0, 0, 0, .46);
}

/* --- таблицы: строки под данными делаем плотнее, иначе свечение просвечивает
       сквозь цифры и контраст гуляет от строки к строке */
:root[data-skin="glass"] table.grid th {
    background: rgba(0, 0, 0, .32);
    border-color: var(--glass-line);
}
:root[data-skin="glass"] table.grid td { border-color: rgba(255, 255, 255, .07); }
:root[data-skin="glass"] table.grid tbody tr:hover td { background: rgba(255, 255, 255, .045); }

/* --- кнопки и плашки: кромка ярче, размытия нет */
:root[data-skin="glass"] .btn.ghost,
:root[data-skin="glass"] .chip {
    background: rgba(255, 255, 255, .06);
    border-color: var(--glass-line);
}
:root[data-skin="glass"] .btn.ghost:hover,
:root[data-skin="glass"] .chip:hover { background: rgba(255, 255, 255, .10); }
:root[data-skin="glass"] .pill { background: rgba(0, 0, 0, .28); }

/* --- на слабой машине и при «уменьшить движение» размытие снимаем: панели
       остаются полупрозрачными, но не заставляют пересчитывать фон */
@media (prefers-reduced-transparency: reduce) {
    :root[data-skin="glass"] * {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
    :root[data-skin="glass"] .panel,
    :root[data-skin="glass"] .side,
    :root[data-skin="glass"] .top { background: var(--glass-strong); }
}

/* Образец материала в настройках */
.theme-slab {
    width: 34px; height: 34px; flex: none;
    border-radius: 8px; border: 1px solid var(--line-strong);
}
.theme-slab.skin-glass {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .03)),
        radial-gradient(120% 120% at 20% 0%, var(--accent-glow), transparent 70%),
        rgba(10, 12, 16, .6);
    border-color: rgba(255, 255, 255, .22);
}

/* Список файлов. Предпросмотр маленький намеренно: страница отвечает на
   вопрос «что занимает место», а не «как выглядит картинка». */
.file-thumb {
    width: 40px; height: 30px; object-fit: cover;
    border-radius: 6px; border: 1px solid var(--line);
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .03);
}
.file-thumb-video { color: var(--ink-3); }

/* Проверка ответов сгруппирована по ученикам: внутри карточки человека
   каждый ответ отделён линией, чтобы не сливались в одну простыню. */
.review-item { padding: 16px 0; border-top: 1px solid var(--line); }
.review-item:first-of-type { border-top: 0; padding-top: 6px; }
.review-head { display: flex; gap: 10px; align-items: baseline; margin-bottom: 8px; }
.review-head .mono { margin-left: auto; font-size: 12px; }

/* Правила конкретного вопроса — строка меток над текстом. Коротко и без
   красного шума: запреты одинаковые почти всегда, важно то, что отличается. */
.q-rules { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.q-rule {
    font-family: var(--ui); font-size: 11.5px; letter-spacing: .01em;
    padding: 4px 9px; border-radius: 999px;
    border: 1px solid var(--line-strong); color: var(--ink-2);
    background: var(--sunken);
}
.q-rule-ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
.q-rule-time { color: var(--ink); }

/* Картинки, приложенные учеником к ответу. Мелко, но узнаваемо: ментор
   решает, открывать ли целиком, по превью, а не по имени файла. */
.answer-shots { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.answer-shot {
    display: block; width: 116px; height: 78px; overflow: hidden;
    border: 1px solid var(--line-strong); border-radius: var(--r-sm);
    background: var(--sunken); box-shadow: var(--edge);
}
.answer-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.answer-shot:hover { border-color: var(--accent); }

/* Приложенные картинки на стороне ученика. */
.q-files { margin-top: 10px; }
.q-files-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.q-files-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 9px; }
.q-file {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 8px 6px 10px; border-radius: var(--r-sm);
    border: 1px solid var(--line-strong); background: var(--sunken);
    font-size: 12px; color: var(--ink-2); max-width: 260px;
}
.q-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-file button {
    border: 0; background: none; color: var(--ink-3); cursor: pointer;
    font-size: 15px; line-height: 1; padding: 0 2px;
}
.q-file button:hover { color: var(--bad); }

/* Скорость ответов в ведомости: полоска вместо голого числа — глазами
   видно быстрее, чем читается процент. */
.pace { display: flex; align-items: center; gap: 8px; }
.pace-bar {
    flex: 1; min-width: 54px; height: 6px; border-radius: 999px;
    background: var(--sunken); border: 1px solid var(--line); overflow: hidden;
}
.pace-bar i { display: block; height: 100%; background: var(--accent); }