/* АЛЁНА – Автоматический Ловец Ёрничества, Небрежности и Аутентичности.
   Оформление интерфейса: токены, каркас, компоненты.

   Дизайн-код взят с uralolimp.website (тема Scholaria): та же палитра,
   та же шкала размеров и отступов, те же радиусы, тени и кольцо фокуса.
   Отличие одно и оно намеренное: АЛЁНА – рабочий стол с таблицами и
   списками, поэтому шаг шкалы выбран мельче (база 15px вместо 18px).
   Токены названы как в образце; прежние имена оставлены псевдонимами
   ниже – на них ссылаются шаблоны и app.js. */

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/manrope-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/manrope-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Моноширинный – как в образце. Цифр в интерфейсе много (проценты,
   номера, метрики), и системный стек давал разную ширину на разных ОС. */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/jetbrains-mono-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/jetbrains-mono-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ─────────────────────────── Токены ─────────────────────────── */

:root {
  color-scheme: light;

  /* Бренд */
  --brand:        #015D1E;
  --brand-hover:  #024E19;
  --brand-soft:   #E8F1EA;
  --on-brand:     #FFFFFF;

  /* Нейтрали */
  --ink:          #1A1F1B;
  --ink-strong:   #0B0F0C;
  --muted:        #5F6B62;
  --muted-soft:   #8C968F;
  --surface:      #FFFFFF;
  --surface-2:    #f6f8f6;
  --surface-3:    #edf1ee;
  --rule:         #D9DFDB;
  --rule-strong:  #B8C2BC;

  /* Состояния. success и danger – из образца; для «внимания» взят его же
     акцентный жёлтый, чтобы не заводить шестой оттенок. */
  --success:      #027A48;  --success-soft: #DFF3E8;
  --attention:    #B8860B;  --attention-soft: #FAF1DC;
  --danger:       #B42318;  --danger-soft:  #FEE4E2;
  --neutral:      #5F6B62;  --neutral-soft: #edf1ee;

  /* Тёмный рельс – каркас приложения, в образце аналога нет.
     Держится на затемнённом бренде. */
  --rail:         #04361a;
  --rail-hi:      #0a5029;
  --rail-ink:     #cfe3d6;
  --rail-strong:  #b7d6c2;
  --rail-muted:   #6f9c81;
  --rail-cap:     #5d8770;
  --rail-btn:     #157a35;
  --rail-btn-hi:  #1d9243;
  --rail-rule:    rgba(255,255,255,.08);

  /* Фокус и тени */
  --focus-ring:   0 0 0 3px rgba(1,93,30,.35);
  --shadow-1:     0 1px 2px rgba(15,20,17,.04), 0 1px 3px rgba(15,20,17,.06);
  --shadow-2:     0 4px 12px rgba(15,20,17,.08), 0 2px 4px rgba(15,20,17,.04);
  --shadow-3:     0 12px 32px rgba(15,20,17,.12), 0 4px 8px rgba(15,20,17,.06);

  /* Радиусы */
  --radius-sm:    4px;
  --radius:       8px;
  --radius-lg:    16px;
  --radius-pill:  999px;

  /* Отступы */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;
  --space-4: 16px; --space-5: 24px; --space-6: 32px;
  --space-7: 48px; --space-8: 64px; --space-9: 96px;

  /* Шрифты */
  --font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Consolas, Menlo, monospace;

  /* Размеры. Шкала образца; --text-15 добавлена как рабочая база АЛЁНЫ. */
  --text-11: .6875rem;
  --text-12: .75rem;
  --text-13: .8125rem;
  --text-14: .875rem;
  --text-15: .9375rem;
  --text-16: 1rem;
  --text-18: 1.125rem;
  --text-20: 1.25rem;
  --text-24: 1.5rem;
  --text-30: 1.875rem;
  --text-36: 2.25rem;

  --leading-tight: 1.2;
  --leading-snug:  1.35;
  --leading-base:  1.6;

  --rail-w: 224px;

  /* Псевдонимы прежних имён: используются в шаблонах и app.js. */
  --ground:    var(--surface);
  --raised:    var(--surface-2);
  --ink-2:     var(--muted);
  --line:      var(--rule);
  --line-soft: var(--surface-3);
  --brand-hi:  var(--brand-hover);
  --brand-ink: var(--on-brand);
  --ok:   var(--success);   --ok-bg:   var(--success-soft);
  --warn: var(--attention); --warn-bg: var(--attention-soft);
  --crit: var(--danger);    --crit-bg: var(--danger-soft);
  --idle: var(--neutral);   --idle-bg: var(--neutral-soft);
  --r:      var(--radius);
  --r-lg:   var(--radius-lg);
  --shadow: var(--shadow-2);
  --ui:     var(--font-sans);
  --mono:   var(--font-mono);
}

/* Тёмная тема – палитра образца. Вынесена в переменную-набор, который
   применяется и по системной настройке, и по явному переключателю. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --brand:#4FB069; --brand-hover:#6CC987; --brand-soft:#0E2415; --on-brand:#0B130D;
    --ink:#E8ECE9; --ink-strong:#FFFFFF; --muted:#9AA59E; --muted-soft:#6F7A73;
    --surface:#0F1411; --surface-2:#161d18; --surface-3:#1f2822;
    --rule:#2A332C; --rule-strong:#3A4640;
    --success:#3FBF92; --success-soft:#102A22;
    --attention:#E2B85C; --attention-soft:#2B2415;
    --danger:#F1746A; --danger-soft:#2E1715;
    --neutral:#9AA59E; --neutral-soft:#1f2822;
    --rail:#08130d; --rail-hi:#14301f; --rail-ink:#a9c6b4;
    --rail-strong:#b7d6c2; --rail-muted:#6f9c81; --rail-cap:#5d8770;
    --rail-btn:#1a7c3b; --rail-btn-hi:#22984c;
    --focus-ring:0 0 0 3px rgba(79,176,105,.4);
    --shadow-1:0 1px 2px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.3);
    --shadow-2:0 4px 12px rgba(0,0,0,.45);
    --shadow-3:0 12px 32px rgba(0,0,0,.55);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --brand:#4FB069; --brand-hover:#6CC987; --brand-soft:#0E2415; --on-brand:#0B130D;
  --ink:#E8ECE9; --ink-strong:#FFFFFF; --muted:#9AA59E; --muted-soft:#6F7A73;
  --surface:#0F1411; --surface-2:#161d18; --surface-3:#1f2822;
  --rule:#2A332C; --rule-strong:#3A4640;
  --success:#3FBF92; --success-soft:#102A22;
  --attention:#E2B85C; --attention-soft:#2B2415;
  --danger:#F1746A; --danger-soft:#2E1715;
  --neutral:#9AA59E; --neutral-soft:#1f2822;
  --rail:#08130d; --rail-hi:#14301f; --rail-ink:#a9c6b4;
  --rail-strong:#b7d6c2; --rail-muted:#6f9c81; --rail-cap:#5d8770;
  --rail-btn:#1a7c3b; --rail-btn-hi:#22984c;
  --focus-ring:0 0 0 3px rgba(79,176,105,.4);
  --shadow-1:0 1px 2px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.3);
  --shadow-2:0 4px 12px rgba(0,0,0,.45);
  --shadow-3:0 12px 32px rgba(0,0,0,.55);
}

/* ──────────────────────────── База ──────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  font-size: var(--text-15);
  line-height: var(--leading-base);
  color: var(--ink);
  background: var(--surface);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
button { font-family: inherit; cursor: pointer; }
button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans); font-weight: 700; color: var(--ink-strong);
  line-height: var(--leading-tight); letter-spacing: -.01em; margin: 0;
}

a {
  color: var(--brand);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--brand) 40%, transparent);
  transition: color .15s ease, text-decoration-color .15s ease;
}
a:hover { color: var(--brand-hover); text-decoration-color: var(--brand-hover); }
/* Ссылки-кнопки и пункты меню подчёркивание не наследуют. */
a.btn, a.btn-new, a.nav-item, a.who, a.chip, .job a { text-decoration: none; }

strong, b { font-weight: 700; }
code, kbd, samp, pre { font-family: var(--font-mono); font-size: .92em; }

::selection { background: var(--brand); color: var(--on-brand); }

/* Кольцо фокуса вместо обводки – как в образце. Радиус задаётся только
   ссылкам: у кнопок, полей и карточек он свой и его нельзя перебивать. */
:focus-visible { outline: none; box-shadow: var(--focus-ring); }
a:focus-visible { border-radius: 2px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
/* В образце надзаголовок набран брендовым цветом – он же и здесь. */
.eyebrow {
  font-size: var(--text-11); font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--brand);
}
.sub  { font-size: var(--text-11); color: var(--muted); }
.hint { font-size: var(--text-12); color: var(--muted); }

/* ─────────────────────────── Каркас ─────────────────────────── */

.app { display: grid; grid-template-columns: var(--rail-w) minmax(0,1fr); height: 100dvh; }

.rail { background: var(--rail); color: var(--rail-ink); display: flex; flex-direction: column; min-height: 0; }
.rail-brand { padding: var(--space-4) var(--space-4) var(--space-3); display: flex; gap: var(--space-3); align-items: center; }
/* Марка приложения – логотип. Белая подложка обязательна: контур у него
   тёмный и на тёмной шапке пропадает. */
.rail-mark {
  width: 34px; height: 34px; flex: none; border-radius: var(--radius);
  background: #fff; padding: 3px; object-fit: contain; display: block;
}
.rail-name { font-weight: 750; font-size: var(--text-15); color: #fff; letter-spacing: -.01em; }
.rail-sub { font-size: var(--text-11); color: var(--rail-muted); margin-top: 1px; line-height: var(--leading-snug); }
/* Расшифровка названия: слово на строке, выделенные буквы читаются сверху
   вниз как АЛЁНА. Ради этого – список, а не абзац. */
.rail-full {
  list-style: none; margin: 0 0 var(--space-3); padding: 0 var(--space-4) var(--space-3);
  font-size: var(--text-11); line-height: var(--leading-snug); color: var(--rail-muted);
  border-bottom: 1px solid var(--rail-rule);
}
.rail-full b { color: var(--rail-strong); font-weight: 800; }

.rail-cta { margin: 0 var(--space-3) var(--space-3); }
.btn-new {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3); border: 1px solid transparent; border-radius: var(--radius);
  background: var(--rail-btn); color: #fff; font-weight: 600; font-size: var(--text-13);
  cursor: pointer; transition: background .15s ease;
}
.btn-new:hover { background: var(--rail-btn-hi); color: #fff; }

.rail-nav { padding: 0 var(--space-2); display: flex; flex-direction: column; gap: 2px; overflow-y: auto; flex: 1; min-height: 0; }
.nav-cap {
  padding: var(--space-3) var(--space-2) var(--space-1); font-size: var(--text-11);
  font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--rail-cap);
}
.nav-item {
  display: flex; align-items: center; gap: var(--space-3); width: 100%;
  padding: var(--space-2) var(--space-3); border: 0; background: transparent; color: var(--rail-ink);
  border-radius: var(--radius); cursor: pointer; text-align: left; font-size: var(--text-14);
  transition: background .15s ease, color .15s ease;
}
.nav-item svg { width: 16px; height: 16px; flex: none; opacity: .8; }
.nav-item:hover { background: var(--rail-hi); color: #fff; }
.nav-item[aria-current="page"] { background: var(--rail-hi); color: #fff; font-weight: 600; }
.nav-item[aria-current="page"] svg { opacity: 1; }
.nav-badge {
  margin-left: auto; font-family: var(--font-mono); font-size: var(--text-11);
  background: rgba(255,255,255,.13); padding: 1px var(--space-2); border-radius: var(--radius-pill);
}

.rail-foot { border-top: 1px solid var(--rail-rule); padding: var(--space-2); }
.who {
  display: flex; align-items: center; gap: var(--space-2); width: 100%; padding: var(--space-2);
  background: transparent; border: 0; border-radius: var(--radius); cursor: pointer;
  color: var(--rail-ink); text-align: left;
}
.who:hover { background: var(--rail-hi); color: var(--rail-ink); }
.avatar {
  width: 28px; height: 28px; flex: none; border-radius: var(--radius-pill);
  background: var(--rail-btn-hi); color: #fff; display: grid; place-items: center;
  font-size: var(--text-11); font-weight: 700;
}
.who-name { font-size: var(--text-13); color: #fff; font-weight: 600; line-height: var(--leading-snug); display: block; }
.who-role { font-size: var(--text-11); color: var(--rail-muted); display: block; }

.main { min-width: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--surface); }
.topbar {
  flex: none; display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-5); background: var(--surface);
  border-bottom: 1px solid var(--rule);
}
.topbar h1 { font-size: var(--text-20); font-weight: 700; letter-spacing: -.02em; }
.topbar-sub { font-size: var(--text-12); color: var(--muted); margin-top: 1px; line-height: var(--leading-snug); }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); }

/* Круглая кнопка-иконка – как .btn--icon в образце, только компактнее. */
.icon-btn {
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 1px solid var(--rule); border-radius: var(--radius-pill);
  background: var(--surface); cursor: pointer; color: var(--muted);
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.icon-btn:hover { background: var(--surface-2); border-color: var(--rule-strong); color: var(--ink); }
.icon-btn svg { width: 16px; height: 16px; }

.scroll { flex: 1; min-height: 0; overflow-y: auto; padding: var(--space-5) var(--space-5) var(--space-7); }

/* ───────────────────────── Компоненты ───────────────────────── */

/* Плитки – карточки образца в компактном исполнении. */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--space-3); }
.tile {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-lg);
  padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-1); min-width: 0;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.tile:hover { border-color: var(--rule-strong); box-shadow: var(--shadow-1); }
.tile-val {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: var(--text-30); font-weight: 700; letter-spacing: -.03em; line-height: var(--leading-tight);
}
.tile-foot { display: flex; align-items: baseline; gap: var(--space-2); font-size: var(--text-12); color: var(--muted); }

/* Две панели */
.panes { display: grid; grid-template-columns: 340px minmax(0,1fr); gap: var(--space-3); margin-top: var(--space-4); align-items: start; }
.pane { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden; }
.pane-head {
  display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3);
  border-bottom: 1px solid var(--rule); background: var(--surface-2);
}
.pane-head h2 { font-size: var(--text-13); font-weight: 700; }

.search { position: relative; flex: 1; }
.search input {
  width: 100%; padding: var(--space-2) var(--space-3) var(--space-2) var(--space-6);
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--surface); font-size: var(--text-13);
}
.search input::placeholder { color: var(--muted-soft); }
.search svg { position: absolute; left: var(--space-3); top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: var(--muted); }

.job-list { list-style: none; margin: 0; padding: 0; max-height: 62vh; overflow-y: auto; }
.job {
  position: relative; width: 100%; display: block; text-align: left; border: 0;
  border-bottom: 1px solid var(--surface-3); background: transparent;
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  cursor: pointer; transition: background .15s ease;
}
.job::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--tone, var(--neutral)); }
.job:hover { background: var(--surface-2); }
.job[aria-selected="true"] { background: var(--brand-soft); }
.job-top { display: flex; align-items: center; gap: var(--space-2); }
.job-id { font-family: var(--font-mono); font-size: var(--text-12); color: var(--muted); }
.job-group { font-weight: 700; font-size: var(--text-14); margin-left: auto; }
.job-meta { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-1); font-size: var(--text-12); color: var(--muted); }
.job-meta .mono { color: var(--ink); font-weight: 600; }

/* Статусные чипы – цвет, значок и подпись вместе. Форма из образца:
   таблетка, 12px, вес 500. */
.chip {
  display: inline-flex; align-items: center; gap: var(--space-1); flex: none;
  padding: 2px var(--space-2); border-radius: var(--radius-pill);
  font-size: var(--text-12); font-weight: 600; line-height: var(--leading-snug);
  white-space: nowrap; border: 1px solid transparent;
}
.chip svg { width: 12px; height: 12px; }
.chip.ok   { background: var(--success-soft);   color: var(--success); }
.chip.warn { background: var(--attention-soft); color: var(--attention); }
.chip.crit { background: var(--danger-soft);    color: var(--danger); }
.chip.idle { background: var(--neutral-soft);   color: var(--neutral); }
.chip.brand{ background: var(--brand-soft);     color: var(--brand); }

/* Детали */
.detail-head { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--rule); }
.detail-title { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.detail-title h2 { font-size: var(--text-20); font-weight: 700; letter-spacing: -.02em; }
.detail-title .mono { color: var(--muted); font-size: var(--text-13); }
.detail-facts { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5); margin-top: var(--space-2); font-size: var(--text-12); color: var(--muted); }
.detail-facts b { color: var(--ink); font-weight: 600; }
.detail-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-4); }

/* Кнопки. Основная – заливка брендом; обычная – контур, как .btn--ghost
   в образце. Радиус, вес и переходы взяты оттуда, паддинги мельче. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-4); border-radius: var(--radius);
  border: 1px solid var(--rule); background: transparent; color: var(--ink);
  font-family: var(--font-sans); font-size: var(--text-13); font-weight: 600; cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .05s ease;
}
.btn:hover { background: var(--surface-2); border-color: var(--rule-strong); color: var(--ink); }
.btn svg { width: 15px; height: 15px; }
.btn.primary { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.btn.primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); color: var(--on-brand); }
.btn.danger { color: var(--danger); }
.btn.danger:hover { border-color: var(--danger); background: var(--danger-soft); color: var(--danger); }
.btn.sm { padding: var(--space-1) var(--space-3); font-size: var(--text-12); }
.btn.lg { padding: var(--space-3) var(--space-5); font-size: var(--text-15); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* Измерители */
.meters {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--space-4) var(--space-5); padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--rule);
}
.meter-top { display: flex; align-items: baseline; gap: var(--space-2); }
.meter-label { font-size: var(--text-12); color: var(--muted); }
.meter-val { margin-left: auto; font-family: var(--font-mono); font-weight: 700; font-size: var(--text-15); }
.track { height: 7px; border-radius: var(--radius-pill); background: var(--surface-3); margin-top: var(--space-2); overflow: hidden; }
.track.big { height: 9px; }
.fill { height: 100%; border-radius: var(--radius-pill); background: var(--tone, var(--success)); transition: width .3s; }
.meter-note { font-size: var(--text-11); color: var(--muted); margin-top: var(--space-1); display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

/* Таблицы – шапка как .schedule-table в образце. */
.tbl-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: var(--text-14); }
thead th {
  text-align: left; padding: var(--space-2) var(--space-3); font-size: var(--text-12);
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
  background: var(--surface-2); border-bottom: 1px solid var(--rule); white-space: nowrap;
}
tbody td { padding: var(--space-3); border-bottom: 1px solid var(--surface-3); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--surface-2); }
td.num, th.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; }
td.act { text-align: right; white-space: nowrap; }
.who-cell { display: flex; align-items: center; gap: var(--space-2); }
.who-cell .avatar { width: 26px; height: 26px; background: var(--brand-soft); color: var(--brand); font-size: var(--text-11); }

/* Секции */
.section { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden; }
.section + .section { margin-top: var(--space-3); }
.section-head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--rule); }
.section-head h2 { font-size: var(--text-15); font-weight: 700; }
.section-head .spacer { margin-left: auto; }
.section-body { padding: var(--space-4); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-3); align-items: start; }
.stack { display: flex; flex-direction: column; gap: var(--space-4); }

details.violations { border-top: 1px solid var(--rule); }
details.violations > summary {
  padding: var(--space-3) var(--space-5); cursor: pointer; font-size: var(--text-13);
  font-weight: 600; display: flex; align-items: center; gap: var(--space-2); list-style: none;
}
details.violations > summary::-webkit-details-marker { display: none; }
/* Ширина фиксирована: глиф при повороте не должен дёргать строку. */
details.violations > summary::before {
  content: "▸"; color: var(--muted); font-size: var(--text-16);
  line-height: 1; width: 12px; text-align: center; flex: none;
}
/* Отступ слева = padding summary + стрелка + gap: тело под текстом, не под стрелкой. */
.viol-body { padding: 0 var(--space-5) var(--space-4) 44px; display: flex; flex-wrap: wrap; gap: var(--space-1); }
.code {
  font-family: var(--font-mono); font-size: var(--text-11); padding: 2px var(--space-2);
  border-radius: var(--radius-sm); background: var(--danger-soft); color: var(--danger); font-weight: 600;
}
.code.pass { background: var(--success-soft); color: var(--success); }

/* Формы */
.field { display: flex; flex-direction: column; gap: var(--space-1); }
.field label { font-size: var(--text-12); font-weight: 600; color: var(--ink); }
.field input[type="text"], .field input[type="password"], .field input[type="email"],
.field input[type="number"], .field select, .field textarea {
  font-family: var(--font-sans); font-size: var(--text-14); color: var(--ink);
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: var(--space-2) var(--space-3); width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--brand); box-shadow: var(--focus-ring); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-4); }
.check { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--text-13); cursor: pointer; padding: 3px 0; }
.check input { margin: 3px 0 0; accent-color: var(--brand); width: 15px; height: 15px; flex: none; }
input[type="range"] { width: 100%; accent-color: var(--brand); }
.gost-cols { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-1) var(--space-5); }

/* Критерий с весом: поле веса появляется, когда список переведён в режим
   взвешивания, и тогда строки идут в одну колонку – иначе не помещаются. */
.crit { display: flex; align-items: center; gap: var(--space-3); }
.crit .check { flex: 1; min-width: 0; }
.crit-w { display: none; align-items: center; gap: var(--space-2); flex: none; }
.crit-list.weighing { grid-template-columns: minmax(0, 1fr); }
.crit-list.weighing .crit-w { display: flex; }
.crit-w .w-in {
  width: 64px; padding: var(--space-1) var(--space-2); border: 1px solid var(--rule);
  border-radius: var(--radius); background: var(--surface); font-size: var(--text-13);
  font-family: var(--font-mono); text-align: right;
}
.crit-share { font-size: var(--text-12); color: var(--muted); min-width: 42px; text-align: right; }

/* Готовый отзыв в модальном окне */
.fb-text {
  width: 100%; padding: var(--space-3); border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--surface-2); color: var(--ink); font-family: var(--font-sans);
  font-size: var(--text-13); line-height: var(--leading-base); resize: vertical;
}

.dropzone {
  position: relative; border: 1.5px dashed var(--rule); border-radius: var(--radius-lg);
  background: var(--surface-2); padding: var(--space-6) var(--space-5); text-align: center;
  cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
.dropzone:hover, .dropzone.over { border-color: var(--brand); background: var(--brand-soft); }
.dropzone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dropzone.off, .dropzone.off:hover { border-color: var(--rule); background: var(--surface-2); opacity: .5; cursor: not-allowed; }
.dz-title { font-weight: 700; font-size: var(--text-16); color: var(--ink-strong); }
.dz-sub { font-size: var(--text-13); color: var(--muted); margin-top: var(--space-1); }

.progress-step { display: flex; align-items: baseline; gap: var(--space-3); font-size: var(--text-14); }
.progress-step .mono { margin-left: auto; font-weight: 700; }
.stat-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
/* Подпись и значение – прямые дети flex-контейнера, а пробел между flex-
   элементами не отрисовывается: без gap выходило «Файлов:1 / 2». */
.stat-chip {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-size: var(--text-12); color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--rule); border-radius: var(--radius-pill);
  padding: 3px var(--space-3);
}
.stat-chip b { font-family: var(--font-mono); }
/* Крестик «убрать файл» внутри плашки выбранного файла. Отступ слева на
   ширину gap меньше – остальное добирает сам контейнер. */
.chip-x { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: var(--text-16); line-height: 1; padding: 0 0 0 var(--space-1); margin: 0 -2px 0 0; }
.chip-x:disabled { opacity: .35; cursor: not-allowed; }
.chip-x:hover { color: var(--danger); }

/* Форма новой проверки на время самой проверки заперта. Поля выключены
   атрибутом disabled, здесь – только видимая часть: подписи гаснут вместе с
   полями, к которым относятся, и подсказка под кнопкой меняется на другую. */
#upload-form.locked .crit, #upload-form.locked .field,
#upload-form.locked .check, #upload-form.locked .eyebrow { opacity: .6; }
#upload-form.locked .check { cursor: not-allowed; }
.when-busy { display: none; }
#upload-form.locked .when-idle { display: none; }
#upload-form.locked .when-busy { display: inline; }

/* Модальное окно */
.modal-back { position: fixed; inset: 0; background: rgba(11,15,12,.5); display: grid; place-items: center; padding: var(--space-5); z-index: 50; }
.modal-back[hidden] { display: none; }
.modal {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3); width: min(560px, 100%); max-height: 90dvh; overflow-y: auto;
}
.modal.wide { width: min(760px, 100%); }
.modal-head { padding: var(--space-4) var(--space-5) var(--space-3); border-bottom: 1px solid var(--rule); }
.modal-head h2 { font-size: var(--text-18); }
.modal-head p { margin: var(--space-1) 0 0; font-size: var(--text-13); color: var(--muted); }
.modal-body { padding: var(--space-4) var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }
.modal-foot { padding: var(--space-3) var(--space-5); border-top: 1px solid var(--rule); display: flex; gap: var(--space-2); justify-content: flex-end; background: var(--surface-2); }

/* Сообщения */
.note {
  display: flex; gap: var(--space-3); padding: var(--space-3) var(--space-4);
  border-radius: var(--radius); background: var(--brand-soft);
  border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent);
  font-size: var(--text-13); color: var(--ink); margin-bottom: var(--space-4);
}
.note svg { width: 17px; height: 17px; flex: none; color: var(--brand); margin-top: 1px; }
.note b { color: var(--ink-strong); }
.note.bad { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 30%, transparent); }
.note.bad svg { color: var(--danger); }
.flashes { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }

.empty { padding: var(--space-7) var(--space-5); text-align: center; color: var(--muted); font-size: var(--text-14); }

/* Графики */
.chart-wrap { position: relative; }
.chart-wrap svg { display: block; width: 100%; overflow: visible; }
.tip {
  position: absolute; pointer-events: none; background: var(--ink-strong); color: #fff;
  font-size: var(--text-12); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm);
  white-space: nowrap; transform: translate(-50%, -130%); opacity: 0; transition: opacity .1s;
}
.bars { display: flex; flex-direction: column; gap: var(--space-2); }
.bar-row { display: grid; grid-template-columns: 170px minmax(0,1fr) 42px; gap: var(--space-3); align-items: center; font-size: var(--text-13); }
.bar-track { height: 9px; background: var(--surface-3); border-radius: var(--radius-pill); }
.bar-fill { height: 100%; border-radius: var(--radius-pill); background: var(--brand); }
.bar-row .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; color: var(--ink); font-weight: 600; }

/* Отдельные экраны – вход, смена пароля, ошибка */
.centered { min-height: 100dvh; display: grid; place-items: center; padding: var(--space-6) var(--space-4); background: var(--surface-2); }
.auth-card {
  width: min(400px, 100%); background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-2); overflow: hidden;
}
.auth-top { background: var(--rail); padding: var(--space-5); display: flex; gap: var(--space-3); align-items: center; }
.auth-body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }
.auth-foot {
  padding: var(--space-3) var(--space-5); border-top: 1px solid var(--rule); background: var(--surface-2);
  font-size: var(--text-11); color: var(--muted); text-align: center; line-height: var(--leading-snug);
}

/* Подпись команды: боковое меню, экраны входа, блок «О системе». */
.team {
  display: flex; align-items: baseline; gap: var(--space-2);
  margin-top: var(--space-2); padding: var(--space-2) var(--space-2) 3px;
  border-top: 1px solid var(--rail-rule);
}
.about-top img { flex: none; background: #fff; border-radius: var(--radius); padding: 3px; }
.team-tag { font-size: var(--text-12); font-weight: 700; color: var(--rail-strong); }
.team-note { font-size: var(--text-11); color: var(--rail-muted); margin-left: auto; }

.acronym {
  list-style: none; display: inline-block; text-align: left;
  margin: var(--space-2) 0 0; padding: 0; font-size: var(--text-12); line-height: var(--leading-base);
}
.acronym b { color: var(--ink-strong); font-weight: 800; }
.acronym.big { font-size: var(--text-14); margin-top: var(--space-3); }
.team-line {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--rule);
}
.about-top { display: flex; align-items: center; gap: var(--space-3); }
.about-name { font-size: var(--text-18); font-weight: 750; letter-spacing: -.02em; color: var(--ink-strong); }

/* Подсказки к критериям */
.has-hint { border-bottom: 1px dotted var(--muted); cursor: help; }

/* ── Движение. Сдержанное: короткие входы и мягкие развороты, ничего,
      что заставляет ждать. При prefers-reduced-motion всё отключается
      правилом в начале файла. ── */

@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop  { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }

.scroll > * { animation: rise .24s ease-out both; }
.scroll > *:nth-child(2) { animation-delay: .04s; }
.scroll > *:nth-child(3) { animation-delay: .08s; }
.scroll > *:nth-child(4) { animation-delay: .12s; }

#detail-pane.swap { animation: fade .18s ease-out both; }

.modal-back { animation: fade .14s ease-out both; }
.modal-back .modal { animation: pop .18s cubic-bezier(.2, .8, .3, 1) both; }

.tile-val { transition: color .2s; }
.job::before { transition: width .15s; }
.job[aria-selected="true"]::before { width: 4px; }
.btn:active, .icon-btn:active { transform: translateY(1px); }
.bar-fill { transition: width .35s cubic-bezier(.3, .8, .4, 1); }

details.violations > summary::before { display: inline-block; transition: transform .18s ease; }
details.violations[open] > summary::before { transform: rotate(90deg); }

/* Сворачиваемый блок: анимируется высотой через grid, поэтому содержимое
   остаётся в DOM и разворот идёт плавно (в отличие от <details>). */
.fold { border-top: 1px solid var(--rule); }
.fold-head {
  display: flex; align-items: center; gap: var(--space-2); width: 100%;
  padding: var(--space-3) var(--space-5); background: transparent; border: 0; cursor: pointer;
  font-family: var(--font-sans); font-size: var(--text-14); font-weight: 700; color: var(--ink-strong);
  text-align: left; transition: background .15s ease;
}
.fold-head:hover { background: var(--surface-2); }
.fold-arrow {
  color: var(--muted); font-size: var(--text-16); line-height: 1;
  width: 12px; text-align: center; flex: none; transition: transform .18s ease;
}
.fold-head[aria-expanded="true"] .fold-arrow { transform: rotate(90deg); }
.fold-head .spacer { margin-left: auto; }
.fold-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .26s ease; }
.fold-body > div { overflow: hidden; }
.fold-head[aria-expanded="true"] + .fold-body { grid-template-rows: 1fr; }

/* Совпадения: список работ, у каждой – раскрывающийся список тех, с кем она
   совпала. Строк тут десятки, поэтому шрифт заголовка тише, чем у одиночного
   блока «Отчёты студентов». */
.match-list .fold:first-child { border-top: 0; }   /* под линией section-head */
.match-list .fold-head { font-weight: 600; }
.match-list .fold-head .chip { flex: none; }
.match-list .fold-body table { border-top: 1px solid var(--rule); }
.match-list .fold-body td:first-child, .match-list .fold-body th:first-child { padding-left: var(--space-7); }

/* Своя раскадровка: общий pop заканчивается на transform:none и сбил бы
   центрирование по translateX(-50%). */
@keyframes toast-in {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.toast { animation: toast-in .2s cubic-bezier(.2, .8, .3, 1) both; }

/* Адаптив */
@media (max-width: 1080px) {
  .panes { grid-template-columns: minmax(0,1fr); }
  .job-list { max-height: 320px; }
  .tiles { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 860px) {
  .app { grid-template-columns: minmax(0,1fr); }
  .rail { display: none; }
  .rail.open { display: flex; position: fixed; inset: 0 auto 0 0; width: 240px; z-index: 40; box-shadow: var(--shadow-3); }
  .burger { display: grid; }
  .grid-2, .form-grid, .gost-cols, .meters { grid-template-columns: minmax(0,1fr); }
  .scroll { padding: var(--space-4); }
  .topbar { padding: var(--space-3) var(--space-4); }
  .bar-row { grid-template-columns: 120px minmax(0,1fr) 38px; }
  .detail-head, .meters, details.violations > summary, .fold-head { padding-left: var(--space-4); padding-right: var(--space-4); }
}
@media (min-width: 861px) { .burger { display: none; } }