/* ═══════════════════════════════════════════════════════════════════════════
   Операционный центр ARGO — система стилей.

   Источник: дизайн-система Redround (Figma «Dashbord», фрейм S0).
   Токены перенесены дословно: имена здесь те же, что в макете, — bg/canvas,
   text/muted, accent/lime и так далее. Если в макете поменяется значение,
   правится одна строка в :root, а не разметка.

   Шрифты подключаются локально (fonts.css) — на сеть заказчика не полагаемся.
   ═══════════════════════════════════════════════════════════════════════════ */

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

:root {
  color-scheme: dark;

  /* поверхности */
  --bg-canvas:     #1D1D1D;
  --bg-sidebar:    #191919;
  --bg-surface:    #222222;
  --bg-surface-2:  #282828;
  --border-subtle: #2E2E2E;
  --border-strong: #3D3D3D;

  /* текст */
  --text-primary:   #FFFFFF;
  --text-secondary: #DADADA;
  --text-muted:     #939393;
  --text-faint:     #5E5E5E;
  --text-on-accent: #141414;

  /* акцент */
  --accent:      #C7F634;
  --accent-deep: #9CC423;
  --accent-wash: #2C3418;

  /* данные и статусы */
  --positive: #B4EE3C;
  --negative: #FF5A4E;
  --warning:  #FFB03A;
  --info:     #7DA6FF;
  --violet:   #B08CFF;
  --neutral:  #6E6E6E;
  --track:    #333333;

  /* подложки статусов — выводим из основного цвета, чтобы не плодить хексы */
  --positive-wash: color-mix(in srgb, var(--positive) 12%, var(--bg-surface));
  --negative-wash: color-mix(in srgb, var(--negative) 12%, var(--bg-surface));
  --warning-wash:  color-mix(in srgb, var(--warning)  12%, var(--bg-surface));
  --info-wash:     color-mix(in srgb, var(--info)     12%, var(--bg-surface));
  --violet-wash:   color-mix(in srgb, var(--violet)   12%, var(--bg-surface));
  --positive-edge: color-mix(in srgb, var(--positive) 35%, transparent);
  --negative-edge: color-mix(in srgb, var(--negative) 35%, transparent);
  --warning-edge:  color-mix(in srgb, var(--warning)  35%, transparent);
  --info-edge:     color-mix(in srgb, var(--info)     35%, transparent);
  --accent-edge:   color-mix(in srgb, var(--accent)   35%, transparent);

  /* шрифты — как в боевом интерфейсе Redround */
  --ui:      Onest, "Segoe UI", system-ui, sans-serif;
  --display: Unbounded, Onest, "Segoe UI", system-ui, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, Consolas, monospace;

  /* геометрия */
  --r-card: 16px;
  --r-tile: 12px;
  --r-ctl:  10px;
  --r-sm:    8px;
  --r-pill: 999px;

  --sidebar-w: 248px;
  --topbar-h:   76px;
  --page-max: 1560px;

  /* Глубина строится поверхностями и границей в 1px, а не тенями:
     в боевой системе на шестнадцать файлов стилей всего девять теней.
     Тень остаётся только у того, что действительно висит над страницей. */
  --sh-card: none;
  --sh-pop:  0 26px 52px rgba(0,0,0,.55);

  /* Встроенные кривые CSS слишком вялые: ease-in на входящем элементе
     задерживает именно тот момент, на который смотрит человек. Здесь
     ease-out для появления, ease-in-out для движения по экрану. */
  --ease:        cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
}

/* светлая тема — из фрейма LightTheme того же макета */
[data-theme="light"] {
  color-scheme: light;

  --bg-canvas:     #F4F4F6;
  --bg-sidebar:    #FFFFFF;
  --bg-surface:    #FFFFFF;
  --bg-surface-2:  #F4F4F6;
  --border-subtle: #E6E6E8;
  --border-strong: #D5D5DA;

  --text-primary:   #141414;
  --text-secondary: #3A3A42;
  --text-muted:     #7A7A82;
  --text-faint:     #A8A8B0;
  --text-on-accent: #141414;

  --accent:      #8FBF00;
  --accent-deep: #6E9500;
  --accent-wash: #F0F7DC;

  --positive: #4E9A00;
  --negative: #E03A2E;
  --warning:  #D68400;
  --info:     #3A6FD8;
  --violet:   #7B55D6;
  --neutral:  #8A8A92;
  --track:    #E6E6E8;

  --sh-card: none;
  --sh-pop:  0 26px 52px rgba(20,20,20,.16);
}

/* ── 2. Сброс ──────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg-canvas);
  color: var(--text-primary);
  font: 400 14px/20px var(--ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--accent); color: var(--text-on-accent); }
input, textarea { caret-color: var(--accent); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 99px; border: 3px solid var(--bg-canvas); }
::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }

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

/* ── 3. Типографика ────────────────────────────────────────────────────── */
/* Имена классов повторяют стили из макета: Display/L → .t-display-l и т. д. */

.t-display-l { font: 700 44px/46px var(--display); letter-spacing: -.25px; }
.t-display-m { font: 600 32px/36px var(--display); letter-spacing: -.2px; }
.t-num-m     { font: 500 20px/24px var(--display); letter-spacing: -.15px; font-variant-numeric: tabular-nums; }
.t-num-l     { font: 500 28px/32px var(--display); letter-spacing: -.2px;  font-variant-numeric: tabular-nums; }

.t-h2 { font: 600 24px/30px var(--ui); letter-spacing: -.15px; }
.t-h3 { font: 600 18px/24px var(--ui); letter-spacing: -.1px; }
.t-h4 { font: 600 16px/22px var(--ui); letter-spacing: -.05px; }

.t-num-table   { font: 600 14px/20px var(--ui); letter-spacing: -.05px; font-variant-numeric: tabular-nums; }
.t-body        { font: 400 14px/20px var(--ui); }
.t-body-s      { font: 400 13px/18px var(--ui); }
.t-body-s-med  { font: 500 13px/18px var(--ui); }
.t-body-s-semi { font: 600 13px/18px var(--ui); }
.t-caption     { font: 400 12px/16px var(--ui); }
.t-caption-med { font: 500 12px/16px var(--ui); }
.t-label       { font: 500 11px/14px var(--ui); letter-spacing: .6px; text-transform: uppercase; }

.c-primary   { color: var(--text-primary); }
.c-secondary { color: var(--text-secondary); }
.c-muted     { color: var(--text-muted); }
.c-faint     { color: var(--text-faint); }
.c-accent    { color: var(--accent); }
.c-positive  { color: var(--positive); }
.c-negative  { color: var(--negative); }
.c-warning   { color: var(--warning); }
.c-info      { color: var(--info); }
.c-violet    { color: var(--violet); }

.num { font-variant-numeric: tabular-nums; }
.t-code { font: 400 12px/16px var(--mono); color: var(--text-muted); }
.nowrap { white-space: nowrap; }

/* ── 4. Каркас страницы ────────────────────────────────────────────────── */

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

/* — боковое меню — */

.sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 14px;
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border-subtle);
  overflow-y: auto;
}

.brand { display: flex; align-items: center; gap: 10px; padding: 2px 6px 0; }
.brand__mark {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
  flex: none;
}
.brand__name { font: 600 16px/22px var(--display); letter-spacing: -.2px; }
.brand__tag {
  margin-left: auto;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  background: var(--bg-surface-2);
  color: var(--text-muted);
  font: 500 10px/12px var(--ui);
  letter-spacing: .6px;
  text-transform: uppercase;
}

.context-card {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-tile);
  background: var(--bg-surface);
}
.context-card__body { min-width: 0; flex: 1; }
.context-card__title { font: 500 13px/18px var(--ui); }
.context-card__sub { color: var(--text-muted); font: 400 12px/16px var(--ui); }

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav__group {
  margin: 14px 0 4px;
  padding: 0 8px;
  color: var(--text-faint);
  font: 500 11px/14px var(--ui);
  letter-spacing: .6px;
  text-transform: uppercase;
}
.nav__group:first-child { margin-top: 4px; }

.nav__item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  color: var(--text-secondary);
  font: 400 13px/18px var(--ui);
  cursor: pointer;
  transition: background .14s var(--ease), color .14s var(--ease);
  border: 0;
  background: none;
  width: 100%;
  text-align: left;
}
.nav__item:hover { background: var(--bg-surface); color: var(--text-primary); }
.nav__item[aria-current="page"] {
  background: var(--bg-surface-2);
  color: var(--text-primary);
  font-weight: 500;
}
.nav__item[aria-current="page"] .icon { color: var(--accent); }
.nav__item .icon { color: var(--text-muted); flex: none; }
.nav__count {
  margin-left: auto;
  color: var(--text-faint);
  font: 500 11px/14px var(--ui);
  font-variant-numeric: tabular-nums;
}

.sidebar__foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding-top: 12px; }

.theme-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  color: var(--text-muted);
  font: 400 13px/18px var(--ui);
}

/* — верхняя полоса — */

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

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: var(--topbar-h);
  padding: 14px 28px;
  background: color-mix(in srgb, var(--bg-canvas) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-subtle);
}
.topbar__titles { min-width: 0; }
.topbar__title { font: 600 24px/30px var(--display); letter-spacing: -.3px; }
.topbar__sub {
  margin-top: 3px;
  color: var(--text-muted);
  font: 400 13px/18px var(--ui);
}
.topbar__sub .sep { color: var(--text-faint); margin: 0 7px; }
.topbar__tools { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.page { padding: 22px 28px 56px; max-width: var(--page-max); width: 100%; }

/* ── 5. Сетки ──────────────────────────────────────────────────────────── */

.grid { display: grid; gap: 14px; }
/* Дети flex- и grid-контейнеров по умолчанию не сжимаются уже содержимого
   (min-width: auto). На узком экране из-за этого страница уезжает вбок:
   таблица или длинная строка растягивает всё дерево наружу. */
.grid > *, .stack > *, .row > * { min-width: 0; }
.grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.grid--5 { grid-template-columns: repeat(5, minmax(0,1fr)); }
.grid--main-side { grid-template-columns: minmax(0,1.62fr) minmax(0,1fr); }
.grid--side-main { grid-template-columns: minmax(0,1fr) minmax(0,1.62fr); }

.stack { display: flex; flex-direction: column; gap: 14px; }
.row { display: flex; align-items: center; gap: 10px; }
.row--wrap { flex-wrap: wrap; }
.row--between { justify-content: space-between; }
.spacer { flex: 1; }

/* ── 6. Карточки ───────────────────────────────────────────────────────── */

.card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-card);
  padding: 18px;
  box-shadow: var(--sh-card);
  min-width: 0;
}
.card--flush { padding: 0; overflow: hidden; }
.card--quiet { background: transparent; box-shadow: none; }

.card__head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px;
}
.card--flush .card__head { padding: 18px 18px 0; margin-bottom: 12px; }
.card__title { font: 600 16px/22px var(--ui); letter-spacing: -.05px; }
.card__meta { margin-left: auto; color: var(--text-muted); font: 400 12px/16px var(--ui); }

.section-label {
  color: var(--text-faint);
  font: 500 11px/14px var(--ui);
  letter-spacing: .6px;
  text-transform: uppercase;
  margin-bottom: 10px;
}

/* ── 7. Плитки показателей ─────────────────────────────────────────────── */

.kpi {
  display: flex; flex-direction: column; gap: 6px;
  padding: 13px 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-tile);
  min-width: 0;
}
.kpi__label { color: var(--text-faint); font: 500 11px/14px var(--ui); letter-spacing: .6px; text-transform: uppercase; }
.kpi__value { font: 500 20px/24px var(--display); letter-spacing: -.15px; font-variant-numeric: tabular-nums; }
.kpi__note  { color: var(--text-muted); font: 400 12px/16px var(--ui); }

.kpi--accent   { background: var(--accent-wash);   border-color: var(--accent-edge); }
.kpi--accent   .kpi__value { color: var(--accent); }
.kpi--positive { background: var(--positive-wash); border-color: var(--positive-edge); }
.kpi--positive .kpi__value { color: var(--positive); }
.kpi--negative { background: var(--negative-wash); border-color: var(--negative-edge); }
.kpi--negative .kpi__value, .kpi--negative .kpi__note { color: var(--negative); }
.kpi--warning  { background: var(--warning-wash);  border-color: var(--warning-edge); }
.kpi--warning  .kpi__value { color: var(--warning); }

/* ── 8. Кнопки ─────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  background: var(--bg-surface-2);
  color: var(--text-primary);
  font: 500 13px/18px var(--ui);
  cursor: pointer;
  white-space: nowrap;
  transition: background .14s var(--ease), border-color .14s var(--ease),
              opacity .14s var(--ease), transform .12s var(--ease);
}
.btn .icon { flex: none; }
/* Нажатие должно быть слышно пальцами: элемент уходит вглубь на 3 %. */
.btn:active { transform: scale(.97); }

@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: color-mix(in srgb, var(--bg-surface-2) 70%, var(--border-strong)); }
  .btn--primary:hover { background: var(--accent-deep); }
  .btn--ghost:hover { background: var(--bg-surface-2); color: var(--text-primary); }
  .btn--quiet:hover { background: var(--bg-surface-2); color: var(--text-primary); }
    .tabs__btn:hover { color: var(--text-primary); }
  .table tbody tr:hover td { background: var(--bg-surface-2); }
}

.btn--primary { background: var(--accent); color: var(--text-on-accent); font-weight: 600; }

.btn--ghost { background: transparent; border-color: var(--border-strong); color: var(--text-secondary); }

.btn--quiet { background: transparent; color: var(--text-muted); padding: 7px 9px; }

.btn--sm { padding: 6px 12px; font-size: 12px; line-height: 16px; }

/* Действие, которое не должно шуметь в длинном списке. Сто одиннадцать
   одинаковых крестиков вдоль страницы читаются как ошибка вёрстки, а не как
   набор кнопок. Проявляется при наведении на строку и всегда доступно
   с клавиатуры: скрываем прозрачностью, а не display. */
.задача__снять { opacity: 0; }
.задача__снять:focus-visible { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  *:hover > .задача__снять,
  *:hover > * > .задача__снять { opacity: .6; }
  .задача__снять:hover { opacity: 1; }
}
@media (hover: none) { .задача__снять { opacity: .5; } }
.btn--icon { padding: 8px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

/* ── 9. Чипы и бейджи ──────────────────────────────────────────────────── */

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--bg-surface-2);
  color: var(--text-secondary);
  font: 500 12px/16px var(--ui);
  white-space: nowrap;
}
.chip--accent   { background: var(--accent-wash);   color: var(--accent); }
.chip--positive { background: var(--positive-wash); color: var(--positive); }
.chip--negative { background: var(--negative-wash); color: var(--negative); }
.chip--warning  { background: var(--warning-wash);  color: var(--warning); }
.chip--info     { background: var(--info-wash);     color: var(--info); }
.chip--violet   { background: var(--violet-wash);   color: var(--violet); }
.chip--neutral  { background: var(--bg-surface-2);  color: var(--text-muted); }
.chip--outline  { background: transparent; border: 1px solid var(--border-strong); color: var(--text-muted); }

.dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }

/* ── 10. Поля ──────────────────────────────────────────────────────────── */

.field {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-ctl);
  color: var(--text-primary);
}
.field:focus-within { border-color: var(--border-strong); }
.field input, .field select {
  flex: 1; min-width: 0;
  background: none; border: 0; outline: none;
  font: 400 13px/18px var(--ui);
}
.field input::placeholder { color: var(--text-faint); }
.field .icon { color: var(--text-faint); flex: none; }

.switch {
  position: relative; width: 38px; height: 22px; flex: none;
  border-radius: var(--r-pill);
  background: var(--track);
  border: 0; cursor: pointer; padding: 0;
  transition: background .16s var(--ease);
}
.switch::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--text-muted);
  transition: transform .16s var(--ease), background .16s var(--ease);
}
.switch[aria-checked="true"] { background: var(--accent); }
.switch[aria-checked="true"]::after { transform: translateX(16px); background: var(--text-on-accent); }

/* ── 11. Таблицы ───────────────────────────────────────────────────────── */

.table-wrap { overflow-x: auto; }

.table { width: 100%; border-collapse: collapse; }
.table th {
  padding: 10px 14px;
  text-align: left;
  color: var(--text-faint);
  font: 500 11px/14px var(--ui);
  letter-spacing: .6px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border-subtle);
  white-space: nowrap;
}
.table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-subtle);
  font: 400 13px/18px var(--ui);
  vertical-align: top;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table .num, .table .right { text-align: right; font-variant-numeric: tabular-nums; }
.table .t-num-table { font: 600 14px/20px var(--ui); letter-spacing: -.05px; }
.table__sub { display: block; color: var(--text-muted); font: 400 12px/16px var(--ui); margin-top: 2px; }

/* ── 12. Уведомления и заметные полосы ─────────────────────────────────── */

.note {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 14px;
  border-radius: var(--r-ctl);
  background: var(--bg-surface-2);
  border: 1px solid transparent;
  font: 400 13px/18px var(--ui);
}
.note .icon { flex: none; margin-top: 1px; }
.note--positive { background: var(--positive-wash); border-color: var(--positive-edge); }
.note--positive .icon { color: var(--positive); }
.note--warning  { background: var(--warning-wash);  border-color: var(--warning-edge); }
.note--warning  .icon { color: var(--warning); }
.note--negative { background: var(--negative-wash); border-color: var(--negative-edge); }
.note--negative .icon { color: var(--negative); }
.note--info     { background: var(--info-wash);     border-color: var(--info-edge); }
.note--info     .icon { color: var(--info); }

.banner {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 18px 20px;
  border-radius: var(--r-card);
  background: var(--negative-wash);
  border: 1px solid var(--negative-edge);
}
.banner--accent  { background: var(--accent-wash);  border-color: var(--accent-edge); }
.banner--warning { background: var(--warning-wash); border-color: var(--warning-edge); }
.banner--info    { background: var(--info-wash);    border-color: var(--info-edge); }
.banner__mark {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--bg-canvas) 45%, transparent);
}
.banner__body { min-width: 0; flex: 1; }
.banner__title { font: 600 18px/24px var(--ui); letter-spacing: -.1px; }
.banner__text { margin-top: 4px; color: var(--text-secondary); font: 400 13px/18px var(--ui); }

/* ── 13. Прогресс ──────────────────────────────────────────────────────── */

.bar { height: 6px; border-radius: 99px; background: var(--track); overflow: hidden; }
/* Заливка всегда во всю ширину и сжимается масштабированием: анимировать
   width значит пересчитывать макет на каждом кадре, а transform считается
   на композиторе и не трогает раскладку. Долю задаёт переменная --доля. */
.bar__fill {
  height: 100%;
  border-radius: 99px;
  background: var(--accent);
  transform: scaleX(var(--доля, 0));
  transform-origin: left center;
  transition: transform .3s var(--ease);
}
.bar--sm { height: 4px; }
.bar__fill--positive { background: var(--positive); }
.bar__fill--warning  { background: var(--warning); }
.bar__fill--negative { background: var(--negative); }
.bar__fill--info     { background: var(--info); }
.bar__fill--muted    { background: var(--neutral); }

.ring { display: grid; place-items: center; position: relative; }
.ring svg { transform: rotate(-90deg); }
.ring__track { stroke: var(--track); fill: none; }
.ring__fill  { stroke: var(--accent); fill: none; stroke-linecap: round; transition: stroke-dashoffset .4s var(--ease); }
.ring__label { position: absolute; text-align: center; }

/* ── 14. Вкладки ───────────────────────────────────────────────────────── */

.tabs {
  display: flex; gap: 4px; padding: 3px;
  background: var(--bg-surface-2);
  border-radius: var(--r-ctl);
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs__btn {
  padding: 7px 13px; border: 0; border-radius: var(--r-sm);
  background: none; color: var(--text-muted);
  font: 500 13px/18px var(--ui); cursor: pointer;
  transition: background .14s var(--ease), color .14s var(--ease);
  white-space: nowrap;
}
.tabs__btn[aria-selected="true"] { background: var(--bg-surface); color: var(--text-primary); box-shadow: var(--sh-card); }

/* ── 15. Лента и хронология ────────────────────────────────────────────── */

.timeline { display: flex; flex-direction: column; }
.timeline__item {
  display: grid;
  grid-template-columns: 108px 18px minmax(0,1fr);
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.timeline__item:last-child { border-bottom: 0; }
.timeline__date { color: var(--text-muted); font: 500 12px/16px var(--ui); font-variant-numeric: tabular-nums; padding-top: 1px; }
.timeline__mark { display: flex; justify-content: center; padding-top: 5px; }
.timeline__mark .dot { width: 8px; height: 8px; }
.timeline__title { font: 500 13px/18px var(--ui); }
.timeline__text { margin-top: 3px; color: var(--text-muted); font: 400 12px/16px var(--ui); }

/* ── 16. Пустые состояния ──────────────────────────────────────────────── */

.empty {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 44px 24px;
  text-align: center;
  color: var(--text-muted);
}
.empty .icon { color: var(--text-faint); }
.empty__title { color: var(--text-secondary); font: 600 16px/22px var(--ui); }
.empty__text { max-width: 44ch; font: 400 13px/18px var(--ui); }

/* ── 17. Иконки ────────────────────────────────────────────────────────── */

.icon { width: 18px; height: 18px; display: inline-block; vertical-align: -3px; }
.icon--sm { width: 16px; height: 16px; }
.icon--lg { width: 22px; height: 22px; }
.icon--xl { width: 26px; height: 26px; }

/* ── 17.1. Прокручиваемый список ───────────────────────────────────────── */
/*
   Длинный список внутри карточки: показываем первые строки, остальное под
   прокруткой. Высота задаётся переменной --высота и вычисляется по месту —
   по низу последней видимой строки, а не по среднему росту строки: строки
   переносятся, и «восемь по сорок четыре пикселя» даёт то семь, то девять.

   Нижняя кромка растворяется маской, а не градиентной накладкой: накладка
   пришлось бы красить в цвет поверхности и ломалась бы на светлой теме.
*/
.scroll-list {
  max-height: var(--высота, 420px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent 100%);
          mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent 100%);
}
/* Домотали до низа — маска больше не нужна, иначе последняя строка выглядит обрезанной. */
.scroll-list[data-дно="да"] {
  -webkit-mask-image: none;
          mask-image: none;
}
.scroll-list::-webkit-scrollbar { width: 8px; }
.scroll-list::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border: 2px solid var(--bg-surface);
  border-radius: 99px;
}
.scroll-list::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }
.scroll-list { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }

.scroll-list__подпись {
  display: flex; align-items: center; gap: 6px;
  padding-top: 10px;
  color: var(--text-faint);
  font: 400 12px/16px var(--ui);
}

/* ── 18. Всплывающее и служебное ───────────────────────────────────────── */

.sheet {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center;
  padding: 24px;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(3px);
}
.sheet__body {
  width: min(720px, 100%);
  max-height: 86vh; overflow: auto;
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-card);
  box-shadow: var(--sh-pop);
  padding: 22px;
}

.toast-host { position: fixed; right: 20px; bottom: 20px; z-index: 80; display: flex; flex-direction: column; gap: 8px; }
.toast {
  padding: 11px 15px;
  border-radius: var(--r-ctl);
  background: var(--bg-surface-2);
  border: 1px solid var(--border-strong);
  box-shadow: var(--sh-pop);
  font: 500 13px/18px var(--ui);
  animation: toast-in .2s var(--ease);
}
.toast--error { border-color: var(--negative-edge); background: var(--negative-wash); }
@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } }

.skeleton {
  border-radius: var(--r-ctl);
  background: linear-gradient(90deg, var(--bg-surface) 25%, var(--bg-surface-2) 37%, var(--bg-surface) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.3s linear infinite;
}
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ── 19. Вход ──────────────────────────────────────────────────────────── */

.login {
  min-height: 100vh;
  display: grid; place-items: center;
  padding: 24px;
  background:
    radial-gradient(1100px 520px at 50% -12%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%),
    var(--bg-canvas);
}
.login__card {
  width: min(400px, 100%);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-card);
  padding: 28px;
  box-shadow: var(--sh-pop);
}
.login__brand { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.login__title { font: 600 20px/26px var(--display); letter-spacing: -.2px; }
.login__sub { margin-top: 6px; color: var(--text-muted); font: 400 13px/18px var(--ui); }
.login__form { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.login__error { color: var(--negative); font: 400 13px/18px var(--ui); }
.login__foot { margin-top: 18px; color: var(--text-faint); font: 400 12px/16px var(--ui); text-align: center; }

/* ── 20. Адаптив ───────────────────────────────────────────────────────── */

@media (max-width: 1280px) {
  .grid--5 { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .grid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid--main-side, .grid--side-main { grid-template-columns: minmax(0,1fr); }
}

/* ── 20.1. Навигация на узком экране ───────────────────────────────────── */
/*
   Два разных решения, потому что и задачи разные.

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

   Нам — выдвижная панель по кнопке: двенадцать пунктов в нижнюю не влезут,
   а резать их на «главные» и «прочие» значит выдумывать иерархию, которой нет.

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

.burger {
  display: none;
  align-items: center; justify-content: center;
  width: 44px; height: 44px;
  margin-right: 2px;
  flex: none;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-ctl);
  background: var(--bg-surface);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background .14s var(--ease), transform .12s var(--ease);
}
.burger:active { transform: scale(.96); }

.backdrop {
  position: fixed; inset: 0; z-index: 45;
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s var(--ease);
}
.app[data-menu="open"] .backdrop { opacity: 1; pointer-events: auto; }

.sidebar:focus { outline: none; }
.sidebar__close { display: none; }

.tabbar { display: none; }

@media (max-width: 1000px) {
  .app { grid-template-columns: minmax(0,1fr); }

  .burger { display: inline-flex; }

  .sidebar {
    position: fixed; z-index: 50; left: 0; top: 0;
    width: min(300px, 86vw);
    height: 100dvh;
    padding-top: calc(14px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-100%);
    transition: transform .22s var(--ease);
    border-right: 1px solid var(--border-strong);
  }
  .app[data-menu="open"] .sidebar { transform: none; box-shadow: var(--sh-pop); }

  .sidebar__close {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; margin-left: auto; flex: none;
    border: 0; border-radius: var(--r-sm);
    background: var(--bg-surface-2);
    color: var(--text-muted);
    cursor: pointer;
  }
  .nav__item { min-height: 44px; }

  .topbar { padding: 12px 16px; }
  .page { padding: 16px 16px 48px; }
  .grid--3, .grid--5 { grid-template-columns: repeat(2, minmax(0,1fr)); }

  /* Нижняя панель: у заказчика и куратора она вместо выдвижной */
  .app[data-панель="снизу"] .burger { display: none; }

  .tabbar {
    position: fixed; z-index: 40; left: 0; right: 0; bottom: 0;
    display: flex;
    background: color-mix(in srgb, var(--bg-sidebar) 94%, transparent);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--border-subtle);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .tabbar__item {
    flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px;
    min-height: 56px; padding: 8px 4px;
    border: 0; background: none;
    color: var(--text-muted);
    font: 500 11px/13px var(--ui);
    cursor: pointer;
    transition: color .14s var(--ease);
  }
  .tabbar__item span {
    max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .tabbar__item[aria-current="page"] { color: var(--accent); }
  .tabbar__item:active { transform: scale(.96); }

  /* Место под панель, иначе она накрывает последнюю строку содержимого */
  .app[data-панель="снизу"] .page {
    padding-bottom: calc(56px + 24px + env(safe-area-inset-bottom, 0px));
  }
}

/* Пока открыта выдвижная панель, страница под ней не прокручивается:
   иначе палец мотает фон, а человек думает, что мотает меню. */
body[data-меню="открыто"] { overflow: hidden; }

@media (max-width: 760px) {
  .topbar { flex-wrap: wrap; align-items: flex-start; }
  .topbar__tools { margin-left: 0; width: 100%; }
  .banner__body { flex-basis: 100%; }
}

@media (max-width: 640px) {
  .topbar__title { font-size: 19px; line-height: 25px; }
  .grid--2, .grid--3, .grid--4, .grid--5 { grid-template-columns: minmax(0,1fr); }
  .timeline__item { grid-template-columns: 84px 14px minmax(0,1fr); gap: 8px; }
}

/* Движение — помощь, а не спецэффект: кому оно мешает, тот его не получает.
   Цветовые переходы оставляем, они помогают понять, что изменилось. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .btn:active { transform: none; }
  .sidebar { transition: none; }
}

@media print {
  .sidebar, .topbar__tools, .btn { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ── 20.2 Присутствие ──────────────────────────────────────────────────── */
/*
 * Шарик в подвале панели: зелёный и дышит, пока заказчик в кабинете; серый,
 * когда нет. Анимацию гасим для тех, кто просил меньше движения — мигающая
 * точка в поле зрения весь рабочий день утомляет сильнее, чем помогает.
 */

/*
 * Имя своё: .dot в проекте уже есть (строка 460) и красится currentColor —
 * им размечены точки видимости в ленте. Переопределение ниже по файлу
 * обесцвечивало их все.
 */
.live-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-faint);
  box-shadow: 0 0 0 0 transparent;
}

.live-dot--on {
  background: var(--positive);
  animation: пульс 2.4s ease-in-out infinite;
}

@keyframes пульс {
  0%, 100% { box-shadow: 0 0 0 0 var(--positive-edge); }
  50%      { box-shadow: 0 0 0 5px transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .live-dot--on { animation: none; }
}