/* ============================================================
   СПРИНТ · компоненты веб-платформы
   Требует tokens.css. Чистый CSS, без фреймворков.

   Правила вида (knowledge/дизайн/ПРАВИЛА-ВОЗДУХА.md):
   1. Блок по умолчанию БЕЗ рамки, БЕЗ заливки, БЕЗ тени.
      Структуру держит воздух; хайрлайн — только там, где без него
      строки слипаются. Рамка — признак того, что на объект можно нажать.
   2. Один акцент на экран. Золото и синий — заголовку и главному
      действию, а не каждой метке.
   3. Шрифт один — Inter. Иерархию держат размер и вес (400/500/600).
   4. Тёмная тема: радиус 20px у поверхностей и никаких теней.
   ============================================================ */

/* Новые токены подтягиваются самим app.css: страницы могут ещё не иметь
   своей строки <link> на sprint-tokens.css, а ядро обязано выглядеть
   по-новому без правок в экранах. Если страница уже подключила файл,
   второй разбор ничего не ломает — значения те же. */
@import url("sprint-tokens.css");

/* ============================================================
   МОСТ СТАРЫХ ТОКЕНОВ → sprint-tokens.css (редизайн «C · Цветной энергичный»)
   Старый tokens.css остаётся подключённым ради совместимости: здесь мы
   переопределяем КАЖДУЮ его переменную значением новой системы, поэтому
   золото (#CBA656), тёмно-синий (#14264E) и серый фон (#F7F7F7) нигде
   не проступают — ни на одной из одиннадцати страниц.
   ============================================================ */
:root {
  /* Серый меты чуть темнее токена: #6A7079 даёт 4,34:1 на утопленной
     плашке (--sp-sink) и 4,14:1 на мягком акценте — ниже 4,5:1 по WCAG.
     #61676E держит 4,97 / 4,74 на тех же подложках, на бумаге 5,29. */
  --sp-dim: #61676E;

  /* --- бренд: единственный акцент — синий #1D4E89 --- */
  --brand-gold: var(--sp-accent);
  --brand-gold-deep: #163C6B;
  --brand-gold-soft: var(--sp-line-2);
  --brand-gold-wash: var(--sp-accent-soft);
  --brand-navy: var(--sp-accent);
  --brand-navy-ink: var(--sp-accent);
  --brand-navy-deep: #163C6B;

  /* --- поверхности --- */
  --bg: var(--sp-paper);
  --bg-alt: var(--sp-card);
  --bg-sunken: var(--sp-sink);
  --surface: var(--sp-card);
  --surface-alt: var(--sp-sink);
  --surface-cream: var(--sp-accent-soft);
  --surface-hover: var(--sp-sink);

  /* --- текст --- */
  --text: var(--sp-mid);
  --text-strong: var(--sp-ink);
  --text-muted: var(--sp-dim);
  --text-display: var(--sp-ink);
  --text-on-dark: var(--sp-accent-ink);
  --text-on-gold: var(--sp-accent-ink);
  --text-on-navy: var(--sp-accent-ink);

  /* --- линии --- */
  --line: var(--sp-line);
  --line-strong: var(--sp-line-2);
  --line-gold: var(--sp-line);
  --line-dark: rgba(255,255,255,.25);
  --focus-ring: var(--sp-accent);

  /* --- статусы: цвет текста + мягкая подложка --- */
  --state-positive: var(--sp-ok-soft);
  --state-positive-ink: var(--sp-ok);
  --state-warn: var(--sp-warn-soft);
  --state-warn-ink: var(--sp-warn);
  --state-danger: var(--sp-bad-soft);
  --state-danger-ink: var(--sp-bad);

  /* --- тёмный контекст (вход, шапка) --- */
  --dark-bg: #0E1013;
  --dark-bg-alt: #0E1013;
  --dark-surface: #16191D;
  --dark-chip: #1D2126;
  --dark-card: #FFFFFF;
  --dark-card-ink: var(--sp-ink);
  --dark-card-alt: var(--sp-accent);
  --dark-card-vip: #1D2126;
  --dark-text: #FFFFFF;
  --dark-muted: #B4BBC3;
  --dark-line: rgba(255,255,255,.18);
  --dark-overlay: rgba(0,0,0,.72);

  /* --- типографика --- */
  --font-display: var(--sp-sans);
  --font-body: var(--sp-sans);
  --fs-2xs: var(--sp-text-meta);    /* 11.5 */
  --fs-xs: var(--sp-text-label);    /* 12 */
  --fs-sm: var(--sp-text-ui);       /* 13 */
  --fs-base: var(--sp-text-body);   /* 14 */
  --fs-md: var(--sp-text-body);     /* 14 */
  --fs-lg: var(--sp-text-num-m);    /* 16 */
  --fs-display-xs: 17px;
  --fs-display-sm: var(--sp-text-h2);   /* 21 */
  --fs-display-md: var(--sp-text-h1);   /* 27 */
  --fs-display-lg: var(--sp-text-num-xl);
  --fs-display-xl: var(--sp-text-num-xl);
  --fs-metric: var(--sp-text-num-xl);   /* 30 */

  --lh-display: 1.2;
  --lh-tight: 1.45;
  --lh-body: var(--sp-leading-text);
  --tracking-display: var(--sp-tracking-tight);
  /* капса в интерфейсе нет — разрядка капса схлопнута */
  --tracking-caps: .005em;
  --tracking-caps-wide: .01em;
  --fw-regular: var(--sp-weight-regular);  /* 500 */
  --fw-medium: var(--sp-weight-medium);    /* 600 */
  --fw-bold: var(--sp-weight-bold);        /* 640 */

  /* --- ритм --- */
  --s-1: var(--sp-space-1);
  --s-2: var(--sp-space-2);
  --s-3: var(--sp-space-3);
  --s-4: var(--sp-space-4);
  --s-5: var(--sp-space-5);
  --s-6: var(--sp-space-6);
  --s-7: var(--sp-space-7);
  --s-8: var(--sp-space-8);
  --s-9: 60px;
  --s-10: 76px;
  --gutter: var(--sp-space-5);
  --pad-card: 0px;
  --pad-boxed: var(--sp-space-5);
  --pad-control: 9px 16px;

  --layout-max: 1280px;
  --sidebar-w: var(--sp-sidebar);
  --header-h: 56px;
  --control-h: 36px;
  --control-h-sm: 30px;

  /* --- рамки, углы, тень --- */
  --bw: 1px;
  --bw-thick: 2px;
  --bw-rail: 3px;
  --radius: var(--sp-radius-md);      /* поля и кнопки — 12 */
  --radius-media: var(--sp-radius-2xl);
  --radius-surface: var(--sp-radius-xl);
  --radius-pill: var(--sp-radius-pill);
  --shadow: var(--sp-shadow);
  --shadow-soft: var(--sp-shadow);
  --shadow-none: none;
  --shadow-overlay: 0 24px 60px -20px rgba(21,23,26,.30), 0 2px 6px rgba(21,23,26,.08);
  --dur: 140ms;
  --ease: cubic-bezier(.2,.6,.3,1);
}

/* ---------- 1. База ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  color: var(--text-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  margin: 0;
}

p { margin: 0 0 var(--s-3); max-width: var(--measure); }
b, strong { font-weight: var(--fw-bold); }
p:last-child { margin-bottom: 0; }

a { color: var(--brand-navy); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--brand-gold-deep); }

:focus-visible {
  outline: var(--bw-thick) solid var(--focus-ring);
  outline-offset: 2px;
}

hr, .hairline {
  border: 0;
  border-top: var(--bw) solid var(--line);
  margin: var(--s-5) 0;
}
.hairline--gold { border-top-color: var(--line-gold); }

/* ---------- 2. Типографические утилиты ---------- */
/* Надзаголовок над заголовком экрана/блока.
   ПО УМОЛЧАНИЮ ТИХИЙ (серый). Золотым его делает только .overline--accent —
   и такой на экране ровно один. */
.overline {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-caps-wide);
  text-transform: none;
  color: var(--text-muted);
  margin: 0 0 var(--s-3);
}
.overline--accent { color: var(--brand-gold); }
.display-xl { font-size: var(--fs-display-xl); }
.display-lg { font-size: var(--fs-display-lg); }
.display-md { font-size: var(--fs-display-md); }
.display-sm { font-size: var(--fs-display-sm); }
.display-xs { font-size: var(--fs-display-xs); }
.display-sc { font-variant: small-caps; }   /* «Заглавная + капитель» */

.accent { color: var(--brand-gold); }       /* ровно одно слово в заголовке */

.label {                          /* КАПС-лейбл, вес 500 */
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-caps);
  text-transform: none;
  color: var(--text-strong);
}
.muted { color: var(--text-muted); }

/* Пояснительный текст. Держим его редким: 12px, серый, узкая колонка.
   Если пояснение можно не писать — не пишем. */
.hint {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: var(--lh-tight);
  max-width: var(--measure);
}
/* Пояснения, которые раньше стояли под КАЖДЫМ полем/цифрой/источником,
   по умолчанию скрыты. Нужно оставить — добавить .is-shown на сам элемент. */
.field__hint, .metric__note, .source__note, .pick__hint { display: none; }
.field__hint.is-shown, .metric__note.is-shown,
.source__note.is-shown, .pick__hint.is-shown { display: block; }
.num-mark {                        /* подсветка числа внутри строки */
  background: var(--dark-chip);
  color: var(--text-on-dark);
  padding: 2px 6px;
  white-space: nowrap;
}
.theme-light-mark, .num-mark--light {
  background: none;
  color: var(--text-strong);
  padding: 0;
  box-shadow: inset 0 -2px 0 var(--brand-gold-soft);
  font-weight: var(--fw-bold);
  white-space: nowrap;
}

/* ---------- 3. Каркас: шапка ---------- */
.app-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  display: flex;
  align-items: center;
  gap: var(--s-4);
  height: var(--header-h);
  padding: 0 var(--s-5);
  background: var(--dark-bg);
  border-bottom: var(--bw) solid var(--dark-line);
  color: var(--dark-text);
}
.app-header__burger {
  display: none;
  flex: none;
  width: var(--control-h);
  height: var(--control-h);
  padding: 0;
  background: transparent;
  border: var(--bw) solid var(--dark-line);
  color: var(--dark-text);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  cursor: pointer;
}
.app-header__brand {
  font-family: var(--font-display);
  font-size: var(--fs-display-xs);
  line-height: 1;
  letter-spacing: var(--tracking-display);
  color: var(--dark-text);
  text-decoration: none;
  white-space: nowrap;
}
.app-header__brand:hover { color: var(--dark-text); }
.app-header__sub {
  font-size: var(--fs-2xs);
  letter-spacing: var(--tracking-caps-wide);
  text-transform: none;
  color: var(--brand-gold);
  white-space: nowrap;
}
.app-header__nav {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin-left: var(--s-5);
  overflow: hidden;
}
.app-header__link {
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-caps);
  text-transform: none;
  color: var(--dark-muted);
  text-decoration: none;
  white-space: nowrap;
  padding: var(--s-1) 0;
  border-bottom: var(--bw-thick) solid transparent;
}
.app-header__link:hover { color: var(--dark-text); }
.app-header__link.is-active { color: var(--dark-text); border-bottom-color: var(--text-on-navy); }
.app-header__actions { margin-left: auto; display: flex; align-items: center; gap: var(--s-2); }
.app-header__user {
  display: flex; align-items: center; gap: var(--s-2);
  font-size: var(--fs-xs); color: var(--dark-muted); white-space: nowrap;
}
.avatar {
  width: 26px; height: 26px; flex: none;
  border-radius: var(--radius-pill);
  border: var(--bw-thick) solid rgba(255,255,255,.6);
  background: var(--brand-navy);
  color: var(--text-on-navy);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: 0;
}
.avatar--lg { width: 64px; height: 64px; font-size: var(--fs-lg); }

/* Мультяшное лицо в аватарке. Рисуется только там, где ставить больше нечего:
   нет ни портрета, ни инициалов. Заливка кружка при этом не нужна — лицо само
   несёт фон, а синий круг под ним превращался бы в тёмный ободок. */
.ava__face { width: 100%; height: 100%; display: block; border-radius: inherit; }
.avatar:has(.ava__face) { background: transparent; border-color: rgba(255,255,255,.35); }

/* ---------- 4. Каркас: боковое меню + контент ---------- */
.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  align-items: start;
  min-height: calc(100vh - var(--header-h));
  /* белая «рельса» меню держится на всю высоту страницы, а не только 100vh */
  background:
    linear-gradient(to right,
      var(--bg-alt) 0 var(--sidebar-w),
      var(--line) var(--sidebar-w) calc(var(--sidebar-w) + 1px),
      var(--bg) calc(var(--sidebar-w) + 1px) 100%);
}
.app-sidebar {
  position: sticky;
  top: var(--header-h);
  z-index: var(--z-sidebar);
  height: calc(100vh - var(--header-h));
  overflow-y: auto;
  padding: var(--s-5) 0 var(--s-8);
  background: var(--bg-alt);
  border-right: var(--bw) solid var(--line);
}
.app-sidebar__group { margin-bottom: var(--s-6); }
.app-sidebar__title {
  padding: 0 var(--s-5);
  margin: 0 0 var(--s-2);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-caps-wide);
  text-transform: none;
  color: var(--text-muted);
}
.nav-item {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 7px var(--s-5);
  font-size: var(--fs-base);
  color: var(--text);
  text-decoration: none;
  border-left: 3px solid transparent;
  cursor: pointer;
}
.nav-item:hover { background: var(--surface-hover); color: var(--text-strong); }
.nav-item.is-active {
  background: var(--surface-alt);
  border-left-color: var(--brand-gold);
  color: var(--text-strong);
  font-weight: var(--fw-bold);
}
.nav-item__count {
  margin-left: auto;
  font-size: var(--fs-2xs);
  color: var(--text-muted);
}
.app-main {
  min-width: 0;
  padding: var(--s-7) var(--s-8) var(--s-10);
  max-width: var(--layout-max);
}
.app-sidebar__backdrop { display: none; }

/* Заголовок экрана. Линии под ним НЕТ — отделяет воздух.
   Нужна линия (длинная простыня разделов) — .page-head--ruled. */
.page-head {
  display: flex;
  align-items: flex-end;
  gap: var(--s-5);
  flex-wrap: wrap;
  margin-bottom: var(--s-8);
}
.page-head--ruled {
  padding-bottom: var(--s-5);
  border-bottom: var(--bw) solid var(--line);
}
.page-head__text { min-width: 0; }
.page-head__actions { margin-left: auto; display: flex; gap: var(--s-3); flex-wrap: wrap; }
.page-title { font-size: var(--fs-display-md); }
.page-sub {
  margin-top: var(--s-3);
  font-size: var(--fs-lg);
  color: var(--text);
  max-width: var(--measure);
}

/* Раздел. Воздух между разделами — самый большой на экране. */
.section { margin-bottom: var(--s-9); }
.section:last-child { margin-bottom: 0; }
.section__head { margin-bottom: var(--s-5); }
.section__title { font-size: var(--fs-display-sm); }

/* Сетки */
.grid { display: grid; gap: var(--gutter); }
.grid--top { align-items: start; }   /* блоки не растягиваются по высоте строки */
.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)); }
.row { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; }
.stack > * + * { margin-top: var(--s-4); }
.stack--airy > * + * { margin-top: var(--s-6); }

/* ---------- 5. Кнопки ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: var(--control-h);
  padding: var(--pad-control);
  border: var(--bw) solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: none;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
  background: transparent;
  color: var(--text-strong);
}
/* Кнопки (14.09.2026, ред. 2): золото с синим текстом выглядело слабо (Артём).
   Главное действие — заливка чернилами с белым текстом (контраст 15.2),
   второе — белая с рамкой и текстом теми же чернилами. Золото в кнопках
   больше не участвует: оно осталось акцентом заголовка и метки. */
/* Три ступени громкости, а не три оттенка одной кнопки (Артём, 16.09.2026:
   «все кнопки с обводкой и пустотой внутри, непонятно куда смотреть»):
     1. главное действие  — заливка чернилами;
     2. второе действие   — белая с рамкой;
     3. тихое действие    — только текст, без рамки и фона.
   Так на экране сразу видно, что делать, а что «тоже можно». */
.btn--primary {
  background: var(--brand-navy-ink);
  color: var(--text-on-dark);
  border-color: var(--brand-navy-ink);
}
.btn--primary:hover { background: var(--brand-navy-deep); border-color: var(--brand-navy-deep); }
.btn--primary:active { background: #0A1330; border-color: #0A1330; }

.btn--secondary {
  background: #FFFFFF;
  color: var(--brand-navy-ink);
  border-color: var(--brand-navy-ink);
}
.btn--secondary:hover { background: #EDF1F8; }
.btn--secondary:active { background: var(--brand-navy-ink); color: var(--text-on-dark); }

/* Тихая кнопка: рамки нет совсем — иначе она спорит со второй ступенью */
.btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: transparent;
  padding-left: var(--s-3);
  padding-right: var(--s-3);
}
.btn--ghost:hover { background: var(--surface-hover); color: var(--brand-navy-ink); border-color: transparent; }
.btn--ghost:active { background: #E6EAF2; }

.btn--danger { background: transparent; color: var(--state-danger-ink); border-color: transparent; }
.btn--danger:hover { background: #FBEDED; border-color: transparent; }
.btn--danger:active { background: #F6DEDE; }

/* Нажатие видно на любой кнопке: лёгкий сдвиг вниз */
.btn:active:not([disabled]):not(.is-disabled) { transform: translateY(1px); }
.btn:focus-visible { outline: var(--bw-thick) solid var(--focus-ring); outline-offset: 2px; }
.btn--sm { min-height: var(--control-h-sm); padding: 4px 10px; font-size: var(--fs-xs); }
.btn--block { width: 100%; }
.btn[disabled], .btn.is-disabled {
  opacity: .55;          /* .45 стирало надпись до нечитаемой (Артём, 14.09.2026) */
  cursor: not-allowed;
  pointer-events: none;
}
.btn-row {                        /* правило проекта: кнопки форм — СЛЕВА */
  display: flex;
  justify-content: flex-start;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.app-header .btn--ghost { color: var(--dark-text); border-color: var(--dark-line); }
.app-header .btn--ghost:hover { background: var(--dark-surface); color: var(--dark-text); border-color: var(--brand-gold); }
/* На тёмном экране входа чернила сливаются с фоном — берём синий на ступень светлее */
.theme-dark .btn--primary { background: var(--brand-navy); border-color: var(--brand-navy); color: var(--text-on-dark); }
.theme-dark .btn--primary:hover { background: #35508F; border-color: #35508F; }
.theme-dark .btn--secondary { background: transparent; color: var(--dark-text); border-color: var(--dark-text); }
.theme-dark .btn--secondary:hover { background: var(--dark-text); color: var(--brand-navy-deep); border-color: var(--dark-text); }
.theme-dark .btn--ghost { color: var(--dark-text); border-color: var(--dark-line); }
.theme-dark .btn--ghost:hover { background: var(--dark-surface); color: var(--dark-text); border-color: var(--brand-gold); }

/* ---------- 6. Формы ---------- */
.form { max-width: 620px; }
.form-grid { display: grid; gap: var(--s-5) var(--gutter); grid-template-columns: repeat(2, minmax(0,1fr)); }
/* Внутри сетки воздух задаёт gap: собственный отступ поля удвоил бы его до 48 px —
   а это уже «между блоками», и форма распадается на отдельные строки. */
.form-grid > .field { margin-bottom: 0; }
.form-actions {
  display: flex;
  justify-content: flex-start;   /* кнопки слева */
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-top: var(--s-6);
}
.field { display: block; margin-bottom: var(--s-5); min-width: 0; }
.field:last-child { margin-bottom: 0; }
.field--full { grid-column: 1 / -1; }
.field__label {
  display: block;
  margin-bottom: var(--s-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: none;
  color: var(--text-muted);
}
.field__req { color: var(--brand-gold); }
/* Пояснение под полем скрыто по умолчанию (см. блок .hint выше).
   Оставляем .is-shown только там, где без подписи поле не заполнить. */
.field__hint { margin-top: var(--s-2); font-size: var(--fs-sm); color: var(--text-muted); line-height: var(--lh-tight); }
.field__error { margin-top: var(--s-2); font-size: var(--fs-sm); color: var(--state-danger-ink); }

.input, .textarea, .select {
  width: 100%;
  min-height: var(--control-h);
  padding: var(--pad-control);
  background: var(--bg-alt);
  border: var(--bw) solid var(--line);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: 1.4;
  color: var(--text-strong);
}
.input::placeholder, .textarea::placeholder { color: var(--text-muted); }
.input:hover, .textarea:hover, .select:hover { border-color: var(--brand-navy); }
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--brand-gold);
  box-shadow: inset 0 0 0 1px var(--brand-gold);
}
.input[disabled], .textarea[disabled], .select[disabled] {
  background: var(--surface-alt);
  color: var(--text-muted);
  cursor: not-allowed;
}
.input.is-invalid, .textarea.is-invalid, .select.is-invalid { border-color: var(--state-danger-ink); }
.textarea { min-height: 108px; resize: vertical; line-height: var(--lh-body); }
.select {
  appearance: none;
  padding-right: 30px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-strong) 50%),
    linear-gradient(135deg, var(--text-strong) 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.input-group { display: flex; gap: var(--s-2); align-items: stretch; flex-wrap: wrap; }
.input-group .input { flex: 1 1 180px; }

/* Чекбокс / радио */
.check {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  font-size: var(--fs-base);
  color: var(--text);
  cursor: pointer;
  padding: 5px 0;
  line-height: var(--lh-tight);
}
.check input {
  appearance: none;
  flex: none;
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  background: var(--bg-alt);
  border: var(--bw) solid var(--line-strong);
  border-radius: var(--radius);
  cursor: pointer;
  display: grid;
  place-content: center;
}
.check input[type="radio"] { border-radius: var(--radius-pill); }
.check input:hover { border-color: var(--brand-navy); }
.check input:checked { background: var(--brand-navy); border-color: var(--brand-navy); }
.check input[type="checkbox"]:checked::after {
  content: "";
  width: 8px; height: 4px;
  border-left: var(--bw-thick) solid var(--text-on-navy);
  border-bottom: var(--bw-thick) solid var(--text-on-navy);
  transform: translateY(-1px) rotate(-45deg);
}
.check input[type="radio"]:checked::after {
  content: "";
  width: 6px; height: 6px;
  border-radius: var(--radius-pill);
  background: var(--text-on-navy);
}
.check input:focus-visible { outline: var(--bw-thick) solid var(--focus-ring); outline-offset: 2px; }
.check input[disabled] { opacity: .45; cursor: not-allowed; }
.check-list { display: grid; gap: var(--s-2); }

/* ---------- 7. Блок (.card) ----------
   ГЛАВНОЕ ИЗМЕНЕНИЕ: блок по умолчанию — просто область на фоне страницы.
   Ни рамки, ни заливки, ни тени, ни внутреннего падинга.
   Заливка появляется только у именованных вариантов ниже,
   и на экране их должно быть один-два, не десять. */
.card {
  background: none;
  border: 0;
  border-radius: var(--radius);
  box-shadow: none;
  padding: var(--pad-card);
  min-width: 0;
}
/* Варианты с заливкой — им нужен падинг */
.card--alt, .card--navy, .card--cream, .card--dark, .card--boxed, .card--paper {
  padding: var(--pad-boxed);
}
.card--flat { box-shadow: none; }
.card--raised { box-shadow: none; }        /* тени в потоке страницы больше нет */
.card--alt { background: var(--surface-alt); }   /* серая плашка — как у Романа */
.card--paper { background: var(--surface); }     /* белый лист на сером фоне */
.card--boxed { border: var(--bw) solid var(--line); background: var(--bg-alt); }
.card--navy {
  background: var(--brand-navy);
  border-color: var(--brand-navy);
  color: var(--text-on-navy);
}
.card--navy .card__title, .card--navy .card__head h3 { color: var(--text-on-navy); }
.card--navy .card__body, .card--navy .bullets > li { color: rgba(255,255,255,.92); }
.card--navy .hint, .card--navy .muted { color: rgba(255,255,255,.65); }
.card--navy .card__hairline, .card--navy .card__foot { border-top-color: rgba(255,255,255,.3); }
/* Кремовый блок — это и есть «один акцент на экран». Второго такого нет. */
.card--cream {
  background: var(--surface-cream);
  border-left: var(--bw-rail) solid var(--brand-gold);
}
.card--dark {                       /* тёмный контекст: радиус 20, теней нет */
  background: var(--dark-surface);
  border-color: var(--dark-line);
  border-radius: var(--radius-media);
  box-shadow: none;
  color: var(--dark-text);
}
.card__head {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-bottom: var(--s-4);
}
.card__title {                      /* КАПС-метка 500 — заголовок карточки */
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: none;
  color: var(--text-strong);
  margin: 0;
}
.card__title--display {             /* вариант: антиква */
  font-family: var(--font-display);
  font-size: var(--fs-display-xs);
  font-weight: var(--fw-regular);
  letter-spacing: var(--tracking-display);
  text-transform: none;
  color: var(--text-display);
}
/* Разделитель «заголовок → текст». Раньше был обязательным — теперь нет:
   заголовок от текста отделяет воздух. Линию ставим, только если блок
   реально распадается без неё. */
.card__hairline {
  border: 0;
  border-top: var(--bw) solid var(--line);
  margin: var(--s-4) 0;
}
.card__body { font-size: var(--fs-base); color: var(--text); max-width: var(--measure); }
.card__foot {
  margin-top: var(--s-5);
  display: flex;
  gap: var(--s-3);
  align-items: center;
  flex-wrap: wrap;
}
.card--ribbon { position: relative; padding-top: var(--s-6); }

/* Золотой ярлык-таб в верхнем левом углу карточки */
.ribbon {
  position: absolute;
  top: 0;
  left: var(--pad-boxed);
  background: none;
  color: var(--brand-gold-deep);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: none;
  padding: var(--s-3) 0 0;
}

/* Крупная цифра. Число говорит само — пояснение под ним скрыто (.metric__note). */
.metric { display: block; }
.metric__label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: none;
  color: var(--text-muted);
}
.metric__value {
  font-family: var(--font-display);
  font-size: var(--fs-metric);
  line-height: 1;
  color: var(--text-display);
  margin: var(--s-3) 0 0;
}
/* У цифры line-height: 1 — хвосты знаков выходят за строку.
   Полосе прогресса под цифрой нужен свой воздух, иначе она режет глифы. */
.metric .progress { margin-top: var(--s-3); }
/* Ряд цифр: заливка одного блока не должна ломать общую линию —
   соседние блоки без заливки получают тот же вертикальный ритм. */
.grid--metrics > .card { padding-block: var(--pad-boxed); }
.metric__note {
  margin-top: var(--s-3);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: var(--lh-tight);
}

/* ---------- 8. Плашка-метка (tag / chip / pill) ----------
   Метка по умолчанию БЕЗ заливки и БЕЗ рамки — это просто тихая подпись.
   Заливку получает только то, что обязано кричать: .tag--gold (главное)
   и .tag--navy. Статусы окрашивают текст, а не фон.
   Нужна старая плашка с фоном — .tag--solid, применять штучно. */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: none;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: none;
  color: var(--text-muted);
  white-space: nowrap;
}
.tag--solid {
  padding: 3px 10px;
  border: var(--bw) solid var(--line);
  background: var(--surface-alt);
  color: var(--text-strong);
}
.tag--gold { background: none; border: 0; color: var(--brand-gold-deep); }
.tag--navy { background: none; border: 0; color: var(--brand-navy); }
/* ЕДИНСТВЕННАЯ метка с заливкой. На экране такая допустима одна.
   Заливка тёмная (#14264E), текст белый: золото под тёмным текстом Артём снял 16.09.2026. */
.tag--accent { padding: 3px 10px; background: var(--brand-navy-ink); border: 0; color: var(--text-on-navy); }
.tag--positive { background: none; border: 0; color: var(--state-positive-ink); }
.tag--warn { background: none; border: 0; color: var(--state-warn-ink); }
.tag--danger { background: none; border: 0; color: var(--state-danger-ink); }
/* Чип, который можно убрать, остаётся в рамке даже со статусным цветом:
   рамка = «объект, с которым взаимодействуют» (ПРАВИЛА-ВОЗДУХА, п.1) */
.tag--solid.tag--danger {
  padding: 3px 10px;
  border: var(--bw) solid var(--line);
  background: var(--surface-alt);
  color: var(--state-danger-ink);
}
.tag--muted { background: none; color: var(--text-muted); }
.tag--lg { padding: 5px 12px; font-size: var(--fs-sm); }
/* Две метки подряд разделяем точкой, а не двумя плашками */
.tag-list { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.tag-list > .tag + .tag::before { content: "·"; margin-right: var(--s-3); color: var(--line-strong); }
.chip {                             /* пилюля ДО/ПОСЛЕ */
  display: inline-flex;
  align-items: center;
  padding: 3px 14px;
  border: var(--bw-thick) solid currentColor;
  border-radius: var(--radius-pill);
  background: transparent;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: none;
}

/* ---------- 9. Таблица ----------
   Ни внешней рамки, ни заливки шапки, ни зебры. Только хайрлайн между
   строками и воздух в ячейках. Зебра и рамка — это и был «перегруз». */
.table-wrap { overflow-x: auto; }
.table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: var(--fs-base);
}
.table thead th {
  text-align: left;
  padding: 0 var(--s-4) var(--s-3) 0;
  background: none;
  border-bottom: var(--bw) solid var(--line);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: none;
  color: var(--text-muted);
  white-space: nowrap;
}
.table tbody td {
  padding: var(--s-4) var(--s-4) var(--s-4) 0;
  border-bottom: var(--bw) solid var(--line);
  color: var(--text);
  vertical-align: middle;
}
.table thead th:last-child, .table tbody td:last-child { padding-right: 0; }
.table tbody tr:nth-child(even) { background: none; }
.table tbody tr:hover { background: none; }
.table tbody tr:last-child td { border-bottom: 0; }
.table__name { color: var(--text-strong); font-weight: var(--fw-bold); }
.table__num { text-align: right; white-space: nowrap; }
.table__actions { text-align: right; white-space: nowrap; }
.table--compact tbody td { padding: var(--s-3) var(--s-4) var(--s-3) 0; }
.table--compact thead th { padding: 0 var(--s-4) var(--s-2) 0; }

/* Горизонтальный бар метрики внутри таблицы */
.bar {
  position: relative;
  height: 18px;
  min-width: 80px;
  background: var(--bg-sunken);
  border-radius: var(--radius);
}
.bar__fill { height: 100%; background: var(--state-positive); }
.bar__value {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding-left: 8px;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  color: var(--text-strong);
}

/* ---------- 10. Вкладки ---------- */
.tabs {
  display: flex;
  gap: var(--s-5);
  border-bottom: var(--bw) solid var(--line);
  margin-bottom: var(--s-5);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: none;
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: var(--bw-thick) solid transparent;
  padding: 0 0 var(--s-3);
  margin-bottom: -1px;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: none;
  /* Неактивный шаг — кликабельная навигация, а не подпись: --text-muted давал
     контраст 3,6:1 на мелком капслоке. Берём цвет тела текста (7,0:1). */
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
}
.tab:hover { color: var(--text-strong); }
.tab.is-active { color: var(--text-strong); border-bottom-color: var(--brand-navy-ink); }
.tab-panel { display: none; }
.tab-panel.is-active { display: block; }

/* ---------- 11. Модальное окно ---------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: rgba(6,6,6,.72);
  display: none;
  /* Короткое окно стоит по центру экрана, длинное прижимается к верху и скроллится:
     center + margin:auto даёт оба поведения одним правилом (Артём, 15.09.2026). */
  align-items: center;
  justify-content: center;
  padding: var(--s-8) var(--s-4);
  overflow-y: auto;
}
.modal-backdrop > .modal { margin: auto; }
.modal-backdrop.is-open { display: flex; }
.modal {
  width: 100%;
  max-width: 520px;
  background: var(--bg-alt);
  border: 0;
  border-radius: var(--radius);
  box-shadow: var(--shadow-overlay);   /* тень = «слой над страницей», в потоке её нет */
}
.modal--wide { max-width: 760px; }
.modal__head {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-6) var(--s-6) var(--s-4);
}
.modal__title { font-size: var(--fs-display-sm); }
.modal__close {
  margin-left: auto;
  flex: none;
  width: 26px; height: 26px;
  padding: 0;
  background: transparent;
  border: var(--bw) solid var(--line-strong);
  color: var(--text-strong);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: 1;
  cursor: pointer;
}
.modal__close:hover { background: var(--surface-hover); }
.modal__body { padding: 0 var(--s-6); font-size: var(--fs-base); }
.modal__foot {
  display: flex;
  justify-content: flex-start;    /* кнопки слева */
  gap: var(--s-3);
  flex-wrap: wrap;
  padding: var(--s-6);
}

/* ---------- 12. Тосты ---------- */
.toast-stack {
  position: fixed;
  right: var(--s-5);
  bottom: var(--s-5);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  width: min(360px, calc(100vw - 32px));
  /* Пустая часть стопки не должна перехватывать клики по кнопкам под ней. */
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--bg-alt);
  border: 0;
  border-left: 3px solid var(--brand-navy);
  border-radius: var(--radius);
  box-shadow: var(--shadow-overlay);
  font-size: var(--fs-base);
  color: var(--text);
}
.toast--ok { border-left-color: var(--state-positive-ink); }
.toast--warn { border-left-color: var(--brand-gold); }
.toast--error { border-left-color: var(--state-danger-ink); }
.toast__title {
  display: block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: none;
  color: var(--text-strong);
  margin-bottom: 2px;
}
/* Длинная ссылка без пробелов не переносится сама и вылезала за края уведомления
   (Артём, 14.09.2026). Ломаем такие строки принудительно. */
.toast { overflow: hidden; }
.toast__text { min-width: 0; flex: 1 1 auto; overflow-wrap: anywhere; word-break: break-word; }
.toast__msg { display: block; overflow-wrap: anywhere; word-break: break-word; }
.toast__close {
  margin-left: auto;
  flex: none;
  background: transparent;
  border: 0;
  padding: 0 0 0 var(--s-2);
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  cursor: pointer;
}
.toast__close:hover { color: var(--text-strong); }

/* ---------- 13. Пустое состояние ---------- */
.empty {
  border: 0;
  background: none;
  padding: var(--s-9) var(--s-5);
  text-align: center;
}
.empty__mark {
  /* Раньше здесь стояли номер шага или ромбик —человек читал их как случайные цифры
     (Артём, 16.09.2026). Теперь это иконка состояния в тихом круге. */
  width: 56px;
  height: 56px;
  margin: 0 auto;
  display: grid;
  place-content: center;
  border-radius: 50%;
  background: var(--surface-alt);
  color: var(--text-muted);
}
.empty__mark .ic { width: 26px; height: 26px; vertical-align: 0; }
.empty--error .empty__mark { background: #FBEDED; color: var(--state-danger-ink); }
.empty__title { font-size: var(--fs-display-sm); margin: var(--s-3) 0 var(--s-2); }
.empty__text { font-size: var(--fs-lg); color: var(--text-muted); max-width: 50ch; margin: 0 auto var(--s-6); }
.empty__actions { display: flex; justify-content: center; gap: var(--s-3); flex-wrap: wrap; }

/* ---------- 14. Прогресс фоновой задачи ---------- */
.task {
  border: 0;
  background: none;
  padding: 0;
}
.task__head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-bottom: var(--s-4);
}
.task__name {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: none;
  color: var(--text-strong);
}
.task__pct { margin-left: auto; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text-strong); }
.progress {
  height: 6px;
  background: var(--bg-sunken);
  overflow: hidden;
}
.progress__fill {
  height: 100%;
  width: 0;
  background: var(--brand-navy-ink);
  transition: width 300ms var(--ease);
}
.progress--navy .progress__fill { background: var(--brand-navy); }
.progress--indeterminate .progress__fill {
  width: 35%;
  animation: task-slide 1.4s var(--ease) infinite;
}
@keyframes task-slide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(320%); }
}
.task__meta {
  display: flex;
  gap: var(--s-4);
  flex-wrap: wrap;
  margin-top: var(--s-3);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.task__steps { margin-top: var(--s-3); display: grid; gap: 4px; }
.task__step { display: flex; gap: var(--s-2); font-size: var(--fs-xs); color: var(--text-muted); }
.task__step.is-done { color: var(--text); }
.task__step.is-done::before { content: "✓"; color: var(--state-positive-ink); }
.task__step.is-active { color: var(--text-strong); font-weight: var(--fw-bold); }
.task__step.is-active::before { content: "▸"; color: var(--brand-gold); }
.task__step.is-wait::before { content: "·"; }
@media (prefers-reduced-motion: reduce) {
  .progress--indeterminate .progress__fill { animation: none; width: 100%; opacity: .4; }
}

/* ---------- 15. Буллеты ---------- */
.bullets {
  list-style: none;
  margin: 0;
  padding: 0;
}
.bullets > li {
  position: relative;
  padding-left: var(--bullet-hang);
  margin-bottom: var(--s-3);       /* воздух ~1.5 строки */
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--text);
}
.bullets > li:last-child { margin-bottom: 0; }
.bullets > li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: currentColor;
}
/* «Почему подойдёт» — золотой ромб */
.bullets--fit > li::before { content: "◆"; color: var(--brand-gold); font-size: 10px; top: 4px; }
/* «Риски» — синий минус */
.bullets--risk > li::before { content: "—"; color: var(--brand-navy); font-weight: var(--fw-bold); }
.bullets--check > li::before { content: "✓"; color: var(--state-positive-ink); }

.verdict { display: grid; gap: var(--gutter); grid-template-columns: repeat(2, minmax(0,1fr)); }
.verdict__title {                   /* заголовок → хайрлайн → текст */
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: none;
  padding-bottom: var(--s-3);
  border-bottom: var(--bw) solid var(--line);
  margin-bottom: var(--s-4);
}
.verdict__title--fit { color: var(--brand-gold-deep); }
.verdict__title--risk { color: var(--brand-navy); }

/* Нумерованный список результатов (01…05 антиквой) */
.steps { list-style: none; margin: 0; padding: 0; }
.steps > li {
  display: flex;
  gap: var(--s-4);
  align-items: baseline;
  padding: var(--s-3) 0;
  border-bottom: var(--bw) solid var(--line-gold);
}
.steps > li:last-child { border-bottom: 0; }
.steps__num {
  flex: none;
  font-family: var(--font-display);
  font-size: var(--fs-display-sm);
  line-height: 1;
  color: var(--brand-gold);
  border-right: var(--bw) solid var(--line-gold);
  padding-right: var(--s-4);
  min-width: 52px;
}

/* ---------- 16. Полосы, панели, пара ДО/ПОСЛЕ ---------- */
.strip {
  background: var(--brand-navy);
  color: var(--text-on-navy);
  text-align: center;
  padding: var(--s-4) var(--s-5);
}
.strip h2, .strip h3 { color: var(--text-on-navy); }
.cta-strip {
  background: var(--brand-navy-ink);
  color: var(--text-on-navy);
  padding: var(--s-4) var(--s-5);
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: none;
  font-size: var(--fs-sm);
}
.cta-strip .btn { margin-left: auto; }
.ba { display: grid; gap: var(--gutter); grid-template-columns: repeat(2, minmax(0,1fr)); }
.ba__side {                         /* светлая тема — острые углы; радиус 20 только в тёмной */
  padding: var(--pad-boxed);
  border-radius: var(--radius);
}
.theme-dark .ba__side { border-radius: var(--radius-surface); }
.ba__side--before { background: var(--dark-card); color: var(--dark-card-ink); }
.ba__side--after { background: var(--brand-navy); color: var(--text-on-navy); }
.ba__label {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: none;
  margin-bottom: var(--s-2);
}

/* ---------- 17. Тёмные блоки (вход, шапка экрана) ---------- */
.panel-dark {
  background: var(--dark-bg);
  color: var(--dark-text);
  border: var(--bw) solid var(--dark-line);
  padding: var(--s-7);
}
.theme-dark .card { background: var(--dark-surface); border: 0; color: var(--dark-text); box-shadow: none; border-radius: var(--radius-surface); padding: var(--pad-boxed); }
.theme-dark .card__title { color: var(--dark-text); }
.theme-dark .card__hairline, .theme-dark .card__foot { border-color: var(--dark-line); }
.theme-dark .input, .theme-dark .textarea, .theme-dark .select {
  background: rgba(255,255,255,.04);
  border-color: var(--dark-line);
  color: var(--text-on-navy);
}
.theme-dark .field__label { color: var(--dark-text); }
.theme-dark .check { color: var(--dark-text); }
.theme-dark .check input { background: transparent; border-color: var(--line-strong); }
.theme-dark .check input:checked { background: var(--text-on-dark); border-color: var(--text-on-dark); }
.theme-dark .check input[type="checkbox"]:checked::after { border-color: var(--brand-navy-ink); }
.theme-dark .check input[type="radio"]:checked::after { background: var(--brand-navy-ink); }
.theme-dark .hint, .theme-dark .muted { color: var(--dark-muted); }
.theme-dark h1, .theme-dark h2, .theme-dark h3 { color: var(--dark-text); }
.badge-outline {                   /* бейдж обложки: рамка 1px, число золотом */
  display: inline-flex;
  gap: 8px;
  align-items: baseline;
  border: var(--bw) solid rgba(255,255,255,.55);
  padding: 6px 12px;
  font-size: var(--fs-2xs);
  letter-spacing: var(--tracking-caps);
  text-transform: none;
  color: var(--text-on-navy);
}
.badge-outline b { color: var(--brand-gold); font-size: var(--fs-md); }

/* ---------- 19. Пункт меню, закрытый до заполнения брифа ---------- */
.nav-item--locked {
  color: var(--text-muted);
  cursor: not-allowed;
}
.nav-item--locked:hover { background: transparent; color: var(--text-muted); }
.nav-item__lock { margin-left: auto; font-size: var(--fs-2xs); color: var(--text-muted); }
.nav-hint {
  padding: var(--s-2) var(--s-5) 0;
  font-size: var(--fs-xs);
  line-height: 1.4;
  color: var(--text-muted);
}

/* ---------- 20. Доска-воронка (колонки со статусами) ---------- */
/* Воронка идёт одной строкой от края до края; не влезло — листается вбок
   (Артём, 15.09.2026). Перенос колонок в два ряда убран. */
.board {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: var(--s-6);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding-bottom: var(--s-4);
}
.board::after { content: ''; flex: 0 0 var(--s-4); }   /* воздух за последней колонкой */
/* Колонка — область на фоне, а не коробка: заливки нет,
   структуру держат хайрлайн под заголовком и воздух между колонками. */
.board__col {
  flex: 0 0 212px;
  width: 212px;
  display: flex;
  flex-direction: column;
  background: none;
  border: 0;
  scroll-snap-align: start;
}
.board__col.is-over { background: var(--surface-alt); box-shadow: inset 0 0 0 1px var(--brand-navy-ink); }
.board__head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0 0 var(--s-3);
  border-bottom: var(--bw) solid var(--line);
}
.board__title {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: none;
  color: var(--text-strong);
}
.board__count {
  margin-left: auto;
  min-width: 20px;
  text-align: center;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  color: var(--text-muted);
}
.board__list {
  display: grid;
  gap: var(--s-3);
  align-content: start;
  padding: var(--s-4) 0 0;
  min-height: 64px;
}
.board__empty {
  padding: var(--s-4) 0;
  border: 0;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  text-align: left;
}

/* Карточка эксперта на доске */
.pcard {
  background: var(--surface);
  border: 0;
  border-left: var(--bw-rail) solid var(--brand-navy);
  box-shadow: none;
  padding: var(--s-3) var(--s-4);
  cursor: grab;
  text-align: left;
  width: 100%;
  font-family: var(--font-body);
}
.pcard:hover { border-left-color: var(--brand-gold); }
.pcard.is-dragging { opacity: .45; }
.pcard.is-silent { border-left-color: var(--state-danger-ink); }
.pcard__nick {
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--text-strong);
  overflow-wrap: anywhere;
}
.pcard__meta { margin-top: var(--s-1); font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.4; }
.pcard__flags { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); margin-top: var(--s-2); }
.pcard__move { display: none; margin-top: var(--s-2); }

/* Заголовок колонки умеет переименовываться по месту и прятать своё меню до наведения */
.board__title-input {
  width: 100%;
  min-width: 0;
  padding: 2px 4px;
  font-family: var(--font-body);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: none;
  color: var(--text-strong);
  background: #FFFFFF;
  border: var(--bw) solid var(--brand-navy-ink);
  border-radius: var(--radius);
}
.col-act {
  width: 24px; height: 24px; padding: 0;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: var(--bw) solid transparent; border-radius: var(--radius);
  color: var(--text-muted); cursor: pointer;
  opacity: 0;
  transition: opacity var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.board__col:hover .col-act, .col-act:focus-visible { opacity: 1; }
.col-act:hover { color: var(--brand-navy-ink); border-color: var(--brand-navy-ink); }
.col-act--danger:hover { color: var(--state-danger-ink); border-color: var(--state-danger-ink); }
.col-act[disabled] { opacity: .3; cursor: not-allowed; }
/* Колонка-кнопка «добавить этап» в конце доски */
.board__add {
  flex: 0 0 160px;
  align-self: stretch;
  min-height: 120px;
  display: grid;
  place-content: center;
  gap: var(--s-2);
  background: none;
  border: var(--bw) dashed var(--line-strong);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: none;
  cursor: pointer;
}
.board__add:hover { border-color: var(--brand-navy-ink); color: var(--brand-navy-ink); }

/* ---------- Аватар эксперта: настоящее фото, инициалы — запасной вариант ---------- */
.ava {
  position: relative;
  flex: none;
  display: inline-grid;
  place-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--brand-navy);
  color: var(--text-on-dark);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: .02em;
  text-transform: none;
}
.ava--sm { width: 28px; height: 28px; font-size: var(--fs-2xs); }
.ava--lg { width: 64px; height: 64px; font-size: var(--fs-md); }
.ava__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ava__img[hidden] { display: none; }

/* ---------- Задачи по лиду ---------- */
.task-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: var(--s-3);
  align-items: center;
  padding: var(--s-3) 0;
}
.task-row + .task-row { border-top: var(--bw) solid var(--line); }
.task-row__text { min-width: 0; overflow-wrap: anywhere; }
.task-row__date { font-size: var(--fs-xs); color: var(--text-muted); white-space: nowrap; }
.task-row.is-done .task-row__text { color: var(--text-muted); text-decoration: line-through; }
.task-row.is-late .task-row__date { color: var(--state-danger-ink); font-weight: var(--fw-medium); }
.task-row.is-today .task-row__date { color: var(--brand-navy-ink); font-weight: var(--fw-medium); }
.pcard__task { margin-top: var(--s-2); font-size: var(--fs-2xs); color: var(--text-muted); }
.pcard__task.is-late { color: var(--state-danger-ink); }
.pcard__task.is-today { color: var(--brand-navy-ink); }

/* ---------- Таблица конверсий по этапам ---------- */
.conv { width: 100%; border-collapse: collapse; }
.conv th, .conv td { padding: var(--s-3) var(--s-4); text-align: left; font-size: var(--fs-base); }
.conv th { font-size: var(--fs-xs); letter-spacing: var(--tracking-caps); text-transform: none; color: var(--text-muted); font-weight: var(--fw-medium); }
.conv tbody tr + tr td { border-top: var(--bw) solid var(--line); }
.conv__num { font-variant-numeric: tabular-nums; }
.conv__bar { display: block; height: 6px; background: var(--brand-navy-ink); border-radius: 0; }
.conv__bar-wrap { display: block; width: 100%; max-width: 220px; height: 6px; background: var(--surface-alt); border-radius: 0; }
.conv__drop { color: var(--state-danger-ink); }

/* ---------- 21. Боковая панель-карточка (правая шторка) ---------- */
.side-panel {
  position: fixed;
  top: var(--header-h);
  right: 0;
  bottom: 0;
  z-index: var(--z-modal);
  display: flex;
  flex-direction: column;
  width: 430px;
  max-width: 100%;
  background: var(--bg-alt);
  border-left: 0;
  box-shadow: var(--shadow-overlay);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--dur) var(--ease), visibility var(--dur) var(--ease);
}
.side-panel.is-open { transform: none; visibility: visible; }
.side-panel__backdrop {
  display: none;
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: calc(var(--z-modal) - 1);
  background: rgba(6,6,6,.45);
}
.side-panel__backdrop.is-open { display: block; }
.side-panel__head {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-6) var(--s-6) var(--s-4);
}
.side-panel__title { font-size: var(--fs-display-sm); }
.side-panel__body { flex: 1 1 auto; overflow-y: auto; padding: 0 var(--s-6) var(--s-6); }

/* Пары «ключ — значение» */
.kv { display: grid; grid-template-columns: minmax(0,118px) minmax(0,1fr); gap: var(--s-3) var(--s-5); }
.kv__k {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: none;
  color: var(--text-muted);
}
.kv__v { font-size: var(--fs-base); color: var(--text-strong); overflow-wrap: anywhere; }

/* Сохранённый текст сообщения / КП */
.quote {
  background: var(--surface-alt);
  border: 0;
  border-left: var(--bw-rail) solid var(--brand-gold);
  padding: var(--s-4) var(--s-5);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.quote--navy { border-left-color: var(--brand-navy); }

/* ---------- 22. Фильтры-чипы ---------- */
.filter-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip-toggle {
  appearance: none;
  padding: 5px 12px;
  background: none;
  border: var(--bw) solid var(--line);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: none;
  color: var(--text);
  cursor: pointer;
}
.chip-toggle:hover { border-color: var(--brand-navy-ink); color: var(--brand-navy-ink); }
/* Активный фильтр — тёмная заливка с белым текстом (золото под тёмным текстом снято 16.09.2026) */
.chip-toggle.is-on { background: var(--brand-navy-ink); border-color: var(--brand-navy-ink); color: var(--text-on-navy); }

/* ---------- 23. Адаптив новых блоков ---------- */
@media (max-width: 760px) {
  .hide-narrow { display: none; }   /* второстепенная кнопка шапки на узком экране */
  .board { flex-direction: column; overflow-x: visible; gap: var(--s-7); }
  .board__col { flex: 1 1 auto; width: 100%; }
  .pcard { cursor: default; }
  .pcard__move { display: block; }
  .side-panel { width: 100%; }
  .kv { grid-template-columns: minmax(0,1fr); gap: 2px var(--s-3); }
  .kv__v { margin-bottom: var(--s-2); }
}

/* ---------- 18. Адаптив ---------- */
@media (max-width: 1100px) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 900px) {
  :root { --sidebar-w: 200px; }
  .grid--3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .app-header__nav { display: none; }
}
@media (max-width: 760px) {
  .app-header { padding: 0 var(--s-4); gap: var(--s-3); }
  .app-header__burger { display: inline-flex; align-items: center; justify-content: center; }
  .app-header__sub { display: none; }
  .app-shell { grid-template-columns: minmax(0,1fr); background: var(--bg); }
  .app-sidebar {
    position: fixed;
    top: var(--header-h);
    left: 0;
    width: 264px;
    max-width: 84vw;
    transform: translateX(-100%);
    transition: transform var(--dur) var(--ease);
    box-shadow: var(--shadow-overlay);
  }
  .app-sidebar.is-open { transform: translateX(0); }
  .app-sidebar__backdrop.is-open {
    display: block;
    position: fixed;
    inset: var(--header-h) 0 0 0;
    background: rgba(6,6,6,.5);
    z-index: calc(var(--z-sidebar) - 1);
  }
  .app-main { padding: var(--s-6) var(--s-4) var(--s-9); }
  .grid--2, .grid--3, .grid--4, .form-grid, .verdict, .ba { grid-template-columns: minmax(0,1fr); }
  .page-head { align-items: flex-start; }
  .page-head__actions { margin-left: 0; width: 100%; }
  .cta-strip .btn { margin-left: 0; }
  /* вкладки не режутся краем экрана — переносятся строками */
  .tabs { flex-wrap: wrap; gap: var(--s-4) var(--s-5); overflow-x: visible; }
  /* поле не сплющивается кнопкой: кнопка уходит на свою строку, слева */
  .input-group .input { flex: 1 1 100%; }
  /* на узком экране стопка висит под шапкой: снизу она накрывала кнопку «Дальше» */
  .toast-stack { right: var(--s-3); left: var(--s-3); bottom: auto; top: calc(var(--header-h) + var(--s-3)); width: auto; }
  /* у страниц без нижней липкой кнопки стопка остаётся внизу: сверху она
     на 30 секунд накрывала главное действие в шапке страницы (админка) */
  body.toasts-bottom .toast-stack { top: auto; bottom: var(--s-3); }
}
@media (max-width: 420px) {
  :root {
    --fs-display-md: 26px;
    --fs-display-lg: 34px;
    --fs-display-xl: 34px;
    --fs-metric: 34px;
    --pad-boxed: 16px;
    --gutter: 24px;
  }
  .btn { font-size: var(--fs-xs); }
  .page-head__actions .btn { flex: 1 1 auto; }
}

/* ============================================================
   19. Экраны платформы: вход, бриф, «Сегодня»
   ============================================================ */

/* --- 19.1 Ритм (только вертикальные отступы, без своих цветов) --- */
/* атрибут hidden должен побеждать display у .field / .notice / .row-item */
[hidden] { display: none !important; }
.mt-1 { margin-top: var(--s-3); }
.mt-2 { margin-top: var(--s-5); }
.mt-3 { margin-top: var(--s-7); }
.mb-1 { margin-bottom: var(--s-3); }
.mb-2 { margin-bottom: var(--s-5); }
.mb-3 { margin-bottom: var(--s-7); }

/* --- 19.2 Экран входа --- */
.auth {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  background: var(--dark-bg);
  color: var(--dark-text);
}
.auth__aside {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s-8);
  padding: var(--s-10) var(--s-9);
  border-right: var(--bw) solid var(--dark-line);
}
.auth__main {
  display: flex;
  align-items: center;
  padding: var(--s-10) var(--s-9);
}
.auth__form { width: 100%; max-width: 400px; }
.auth__mark {
  font-family: var(--font-display);
  font-size: var(--fs-display-xl);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  color: var(--dark-text);
  margin: 0;
}
.auth__lead {
  margin-top: var(--s-4);
  max-width: 34ch;
  font-size: var(--fs-base);
  color: var(--dark-muted);
}
.auth__facts {                     /* факты обложки: без рамок, одной строкой */
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-6);
  margin-top: var(--s-6);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: none;
  color: var(--dark-muted);
}
.auth__facts b { color: var(--dark-text); }
.auth__foot {
  padding-top: var(--s-4);
  border-top: var(--bw) solid var(--dark-line);
  font-size: var(--fs-xs);
  color: var(--dark-muted);
}
@media (max-width: 900px) {
  .auth { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .auth__aside {
    border-right: 0;
    border-bottom: var(--bw) solid var(--dark-line);
    padding: var(--s-7) var(--s-5);
    gap: var(--s-6);
  }
  .auth__main { padding: var(--s-7) var(--s-5); align-items: flex-start; }
}

/* --- 19.3 Плашка-сообщение (не нативный alert) --- */
.notice {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  padding: var(--s-3) 0 var(--s-3) var(--s-4);
  background: none;
  border: 0;
  border-left: var(--bw-rail) solid var(--brand-navy);
  font-size: var(--fs-base);
  color: var(--text);
}
.notice__title {
  display: block;
  margin-bottom: 2px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: none;
}
.notice__body { min-width: 0; }
.notice--ok { border-left-color: var(--state-positive-ink); color: var(--state-positive-ink); }
.notice--warn { background: var(--state-warn); padding-right: var(--s-4); border-left-color: var(--brand-gold-deep); color: var(--state-warn-ink); }
.notice--error { background: var(--state-danger); padding-right: var(--s-4); border-left-color: var(--state-danger-ink); color: var(--state-danger-ink); }
.notice--gold { border-left-color: var(--brand-gold); color: var(--text); }
.notice[hidden] { display: none; }
.theme-dark .notice { border-left-color: var(--brand-gold); color: var(--dark-text); }
/* на тёмном фоне светлая заливка плашки съедает текст — оставляем только рейку и цвет букв */
.theme-dark .notice--error,
.theme-dark .notice--warn { background: transparent; padding-right: 0; }
.theme-dark .notice--error { border-left-color: var(--state-danger); color: var(--state-danger); }
.theme-dark .notice--warn { border-left-color: var(--brand-gold); color: var(--state-warn); }

/* --- 19.4 Пояснение под закрытыми пунктами меню (сам .nav-item--locked — выше) --- */
.app-sidebar__note {
  margin: var(--s-2) var(--s-5) 0;
  padding: var(--s-3) 0 var(--s-3) var(--s-3);
  background: none;
  border-left: var(--bw) solid var(--line);
  font-size: var(--fs-sm);
  line-height: var(--lh-tight);
  color: var(--text);
}

/* --- 19.5 Липкая полоса состояния (прогресс брифа) --- */
.sticky-panel {
  position: sticky;
  top: var(--header-h);
  z-index: calc(var(--z-sidebar) - 10);
  padding: var(--s-4) 0;
  margin-bottom: var(--s-7);
  background: var(--bg);
  border: 0;
  border-bottom: var(--bw) solid var(--line);
  box-shadow: none;
}
.sticky-panel__head {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-bottom: var(--s-3);
}
.sticky-panel__pct { margin-left: auto; font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--text-strong); }
@media (max-width: 760px) { .sticky-panel__pct { margin-left: 0; } }

/* --- 19.6 Чипы-значения в поле (ниши, стоп-ниши) --- */
.chips { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-3); }
.chips:empty { display: none; }
/* ниша может оказаться длинной строкой — чип переносится внутри себя,
   иначе страница уезжает вбок (поймано QA 13.09.2026) */
.chips .tag { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.tag__x {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0 0 0 2px;
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: 1;
  color: currentColor;
  opacity: .65;
  cursor: pointer;
}
.tag__x:hover { opacity: 1; }

/* --- 19.7 Загрузка файла (логотип, фото для КП) --- */
/* ---------- Пошаговая инструкция со скриншотами ----------
   Живёт внутри модалки: шаг — текст слева, снимок экрана справа. */
.guide { list-style: none; margin: 0; padding: 0; }
.guide__step {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: var(--s-5);
  align-items: start;
  padding: var(--s-5) 0;
}
.guide__step + .guide__step { border-top: var(--bw) solid var(--line); }
.guide__num {
  display: block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: none;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.guide__title { display: block; font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--text-strong); }
.guide__note { margin: var(--s-2) 0 0; color: var(--text); }
.guide__shot {
  width: 100%;
  height: auto;
  display: block;
  border: var(--bw) solid var(--line);
  border-radius: var(--radius);
}
@media (max-width: 760px) { .guide__step { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); } }

/* Подсказка-действие рядом с полем: кнопка и строка пояснения под ней */
.field__aside { margin-top: var(--s-2); display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.field__aside .hint { margin: 0; }

/* ---------- Иконки ----------
   Спрайт живёт в js/icons.js, здесь только размеры. Цвет иконка берёт от текста,
   поэтому отдельного «цвета иконки» в палитре нет. */
.ic {
  width: 20px; height: 20px;
  flex: none;
  vertical-align: -4px;
  color: inherit;
}
.ic--sm { width: 16px; height: 16px; vertical-align: -3px; }
/* В капсовых подписях трекинг съедает пробел после иконки — отбиваем явно */
.seg__label .ic, .tab .ic, .btn .ic { margin-right: 6px; }
.ic--lg { width: 24px; height: 24px; vertical-align: -5px; }
/* Крупная иконка в рамке — для мест, где прикладывают файл */
.ic-badge {
  flex: none;
  width: 44px; height: 44px;
  display: grid; place-content: center;
  border: var(--bw) solid var(--line);
  border-radius: var(--radius);
  color: var(--brand-navy-ink);
  background: #FFFFFF;
}
.ic-badge .ic { width: 22px; height: 22px; vertical-align: 0; }
.upload:hover .ic-badge { border-color: var(--brand-navy-ink); }
/* Иконка внутри пункта бокового меню */
.nav-item__ic { margin-right: var(--s-3); color: var(--text-muted); vertical-align: -5px; }
.nav-item.is-active .nav-item__ic, .nav-item:hover .nav-item__ic { color: var(--brand-navy-ink); }

.upload {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  background: var(--surface-alt);
  border: var(--bw) solid var(--line);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  cursor: pointer;
}
.upload:hover { border-color: var(--brand-navy-ink); }
.upload input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.upload__mark {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-content: center;
  background: none;
  border: var(--bw) solid var(--line);
  color: var(--brand-navy-ink);
  font-family: var(--font-display);
  font-size: var(--fs-display-xs);
}
.upload__text { min-width: 0; }
.upload__name { display: block; font-size: var(--fs-base); font-weight: var(--fw-bold); color: var(--text-strong); }
.upload input:focus-visible ~ .upload__text { outline: var(--bw-thick) solid var(--focus-ring); outline-offset: 2px; }

/* --- 19.8 Выбор акцентного цвета КП (только цвета бренда) ---
   Имя .kp-swatch, а не .swatch: короткое имя уже занято другой раскладкой. */
.kp-swatches { display: flex; flex-wrap: wrap; gap: var(--s-4); }
.kp-swatch {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  width: 76px;
  cursor: pointer;
}
.kp-swatch input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.kp-swatch__dot {
  display: block;
  flex: none;
  width: 34px;
  height: 34px;
  background: var(--sw, var(--brand-gold));
  border: var(--bw) solid var(--line);
}
.kp-swatch input:checked + .kp-swatch__dot { outline: var(--bw-thick) solid var(--brand-navy-ink); outline-offset: 3px; }
.kp-swatch input:focus-visible + .kp-swatch__dot { outline: var(--bw-thick) solid var(--focus-ring); outline-offset: 3px; }
.kp-swatch__cap { display: block; font-size: var(--fs-2xs); line-height: 1.2; color: var(--text-muted); text-align: center; }

/* --- 19.10 Кнопка-призрак внутри тёмной шапки --- */
.app-header .btn--ghost { color: var(--dark-text); border-color: var(--dark-line); }
.app-header .btn--ghost:hover { background: var(--dark-surface); color: var(--dark-text); border-color: var(--brand-gold); }

/* --- 19.11 Ошибки полей в тёмном контексте (вход) --- */
.theme-dark .field__error { color: var(--state-danger); }
.theme-dark .input.is-invalid,
.theme-dark .textarea.is-invalid,
.theme-dark .select.is-invalid { border-color: var(--state-danger); }

/* --- 19.9 Строка списка: человек / задача дня --- */
.row-item {
  display: flex;
  align-items: flex-start;
  gap: var(--s-5);
  padding: var(--s-5) 0;
  border-bottom: var(--bw) solid var(--line);
}
.row-item:first-child { padding-top: 0; }
.row-item:last-child { padding-bottom: 0; border-bottom: 0; }
.row-item__body { min-width: 0; flex: 1 1 240px; }
.row-item__name { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--text-strong); }
.row-item__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2px var(--s-4);
  margin-top: var(--s-2);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.row-item__note { margin-top: var(--s-3); font-size: var(--fs-base); color: var(--text); max-width: var(--measure); }
.row-item__tags { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-top: var(--s-3); }
.row-item__side {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
}
@media (max-width: 760px) {
  .row-item { flex-wrap: wrap; }
  .row-item__side { margin-left: 0; width: 100%; }
}

/* ============================================================
   Агент поиска экспертов: настройка прогона (search.html) и выдача (results.html)
   ============================================================ */

/* --- служебное --- */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.is-hidden { display: none !important; }
/* якорь не должен уезжать под липкую шапку */
.app-main .section { scroll-margin-top: calc(var(--header-h) + var(--s-4)); }

/* Закрытый пункт меню (.nav-item--locked) и подпись под ним (.app-sidebar__note)
   описаны выше, в блоке про бриф — здесь не дублируем. */

/* --- Переключатель площадки (сегменты) --- */
.seg {
  display: flex;
  flex-wrap: wrap;
  border: var(--bw) solid var(--line);
  background: none;
  width: fit-content;
  max-width: 100%;
}
.seg__item { position: relative; display: flex; margin: 0; }
.seg__item + .seg__item { border-left: var(--bw) solid var(--line); }
.seg__item input {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  margin: 0;
  opacity: 0;
  appearance: none;
  cursor: pointer;
}
.seg__label {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-h);
  padding: 0 var(--s-4);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: none;
  color: var(--text-muted);
  white-space: nowrap;
  cursor: pointer;
}
.seg__item:hover .seg__label { color: var(--text-strong); background: var(--surface-hover); }
.seg__item input:checked ~ .seg__label {
  background: var(--brand-navy-ink);
  color: var(--text-on-navy);
}
.seg__item input:focus-visible ~ .seg__label {
  outline: var(--bw-thick) solid var(--focus-ring);
  outline-offset: -2px;
}

/* --- Поля: диапазон и суффикс --- */
.range { display: flex; align-items: center; gap: var(--s-2); }
.range .input { flex: 1 1 0; min-width: 0; }
.range__sep { flex: none; color: var(--text-muted); }
.input-group--tight { gap: 0; flex-wrap: nowrap; }
.input-group--tight .input { flex: 1 1 auto; min-width: 0; }
.suffix {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: var(--control-h);
  padding: 0 var(--s-3);
  background: var(--surface-alt);
  border: var(--bw) solid var(--line-strong);
  border-left: 0;
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-caps);
  text-transform: none;
  color: var(--text-muted);
  white-space: nowrap;
}
.check-list--row { grid-auto-flow: column; grid-auto-columns: max-content; gap: var(--s-6); }
@media (max-width: 520px) {
  .check-list--row { grid-auto-flow: row; grid-auto-columns: auto; gap: var(--s-1); }
}

/* --- Строка запуска: кнопка слева + честная цена --- */
.run-bar {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  flex-wrap: wrap;
  margin-top: var(--s-6);
}
.run-bar__note {
  flex: 1 1 320px;
  font-size: var(--fs-sm);
  line-height: var(--lh-tight);
  color: var(--text-muted);
  max-width: var(--measure);
}
.run-bar__note b { color: var(--text-strong); font-weight: var(--fw-bold); }

/* --- Панель фильтров выдачи --- */
.toolbar {
  display: flex;
  align-items: center;
  gap: var(--s-3) var(--s-6);
  flex-wrap: wrap;
  padding: 0 0 var(--s-4);
  background: none;
  border-bottom: var(--bw) solid var(--line);
  margin-bottom: var(--s-5);
}
.toolbar__group { display: flex; align-items: center; gap: var(--s-3); }
.toolbar__label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: none;
  color: var(--text-muted);
  white-space: nowrap;
}
.toolbar__end { margin-left: auto; }
.select--inline {
  width: auto;
  min-width: 148px;
  min-height: var(--control-h-sm);
  padding: 2px 28px 2px 10px;
  font-size: var(--fs-sm);
}
@media (max-width: 760px) {
  .toolbar__group { width: 100%; }
  .select--inline { width: 100%; min-width: 0; flex: 1 1 auto; }
  .toolbar__end { margin-left: 0; }
}

/* --- Честная строка «нашли / проверили / показываем» --- */
.count-line {
  display: flex;
  align-items: baseline;
  gap: var(--s-2) var(--s-4);
  flex-wrap: wrap;
  margin-bottom: var(--s-6);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.count-line b { color: var(--text-strong); font-weight: var(--fw-bold); }
/* разделитель рисует сам пункт — скрытый пункт не оставляет висящей точки */
.count-line__i + .count-line__i::before {
  content: "·";
  margin-right: var(--s-3);
  color: var(--line-strong);
}
@media (max-width: 760px) {
  /* в столбик: точка-разделитель в начале строки читается как мусор */
  .count-line { flex-direction: column; align-items: flex-start; gap: var(--s-1); }
  .count-line__i + .count-line__i::before { content: none; }
}

/* --- Карточка эксперта --- */
.xpert { margin-bottom: var(--s-7); scroll-margin-top: calc(var(--header-h) + var(--s-4)); }
.xpert:last-child { margin-bottom: 0; }
/* карточки идут подряд и длинные — воздуха мало, ставим хайрлайн */
.xpert + .xpert { padding-top: var(--s-7); border-top: var(--bw) solid var(--line); }
.xpert__top { display: flex; align-items: flex-start; gap: var(--s-4); flex-wrap: wrap; }
.xpert__pick { flex: none; padding: 0; margin-top: 6px; }
.xpert__id { flex: 1 1 220px; min-width: 0; }
.xpert__name {
  font-family: var(--font-display);
  font-size: var(--fs-display-xs);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  margin: 0;
}
.xpert__name a { color: var(--text-display); text-decoration: none; border-bottom: var(--bw) solid var(--line-gold); }
.xpert__name a:hover { color: var(--brand-gold-deep); border-bottom-color: var(--brand-gold); }
.xpert__meta {
  margin-top: var(--s-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-tight);
  color: var(--text-muted);
  overflow-wrap: anywhere;
}
.xpert__tags { display: flex; gap: var(--s-4); flex-wrap: wrap; margin-top: var(--s-3); }
.xpert__score { flex: none; margin-left: auto; }
.xpert--quiet { background: var(--surface-alt); }

/* Оценка 0–100 */
.score {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 76px;
  padding: var(--s-3) 0;
  background: var(--brand-gold-wash);
  border: 0;
}
.score__num {
  font-family: var(--font-display);
  font-size: var(--fs-display-sm);
  line-height: 1;
  color: var(--brand-navy-ink);
}
.score__label {
  margin-top: var(--s-1);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: none;
  color: var(--text-muted);
}
.score--warn { background: var(--state-warn); }
.score--warn .score__label { color: var(--state-warn-ink); }

/* Мини-метрики */
.mini-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-5);
  margin: var(--s-5) 0;
}
.mini {
  min-width: 0;
  padding: 0;
  background: none;
}
.mini__label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: none;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mini__value {
  margin-top: var(--s-1);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  color: var(--text-strong);
}
.mini__value--up { color: var(--state-positive-ink); }
.mini__value--down { color: var(--state-danger-ink); }
.mini__note { font-size: var(--fs-sm); color: var(--text-muted); }
@media (max-width: 900px) {
  .mini-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Темы последних публикаций */
.topics { display: flex; gap: var(--s-4); flex-wrap: wrap; }

/* --- Свёрнутая группа «под вопросом» --- */
.collapse { border: 0; border-top: var(--bw) solid var(--line); }
.collapse > summary {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  padding: var(--s-4) 0;
  list-style: none;
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: none;
  color: var(--text-strong);
}
.collapse > summary::-webkit-details-marker { display: none; }
.collapse > summary::before { content: "▸"; flex: none; color: var(--brand-gold); }
.collapse[open] > summary::before { content: "▾"; }
.collapse > summary:hover { color: var(--brand-gold-deep); }
.collapse__note {
  margin-left: auto;
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-muted);
}
.collapse__body {
  padding: 0 0 var(--s-5);
  background: none;
}
/* Свёрнутый текст внутри строки списка: строку уже отделяет её хайрлайн,
   вторая линия сверху была бы шумом. */
.row-item .quote { max-width: var(--measure); }
.row-item .collapse { border-top: 0; }
.row-item .collapse > summary { padding: var(--s-2) 0 0; }
.row-item .collapse[open] > summary { padding-bottom: var(--s-3); }
.row-item .collapse__body { padding-bottom: 0; }
@media (max-width: 520px) {
  .collapse__note { margin-left: 0; width: 100%; }
}

/* --- Панель пачки (сколько отобрано) --- */
.bulk {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  padding: var(--s-4) var(--s-5);
  background: var(--surface-cream);
  border: 0;
  border-left: var(--bw-rail) solid var(--brand-navy-ink);
  margin-bottom: var(--s-6);
  font-size: var(--fs-base);
  color: var(--text-strong);
}
.bulk__actions { margin-left: auto; display: flex; gap: var(--s-3); flex-wrap: wrap; }
@media (max-width: 520px) {
  .bulk__actions { margin-left: 0; }
  /* на узком: галочка, аватар и оценка — одной строкой, имя и теги — под ними */
  .xpert__id { flex: 1 1 100%; order: 3; }
  .xpert__score { order: 2; }
}

/* ============================================================
   19. Экраны «Сообщения» и «Коммерческие» (message.html / proposal.html)
   ============================================================ */

/* Двухколонник «панель слева / работа справа» */
.layout-aside {
  display: grid;
  gap: var(--gutter);
  grid-template-columns: 320px minmax(0, 1fr);
  align-items: start;
}
.layout-aside--right { grid-template-columns: minmax(0, 1fr) 320px; }
@media (max-width: 1100px) {
  .layout-aside, .layout-aside--right { grid-template-columns: minmax(0, 1fr); }
}

/* Пары «ключ — значение» в карточке профиля */
.spec { margin: 0; }
.spec__row {
  display: flex;
  gap: var(--s-4);
  justify-content: space-between;
  align-items: baseline;
  padding: var(--s-3) 0;
  border-bottom: var(--bw) solid var(--line);
}
.spec__row:last-child { border-bottom: 0; }
.spec__key {
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-caps);
  text-transform: none;
  color: var(--text-muted);
}
.spec__val { font-size: var(--fs-base); font-weight: var(--fw-bold); color: var(--text-strong); text-align: right; }

/* Кнопка-правка в выбранном состоянии */
.btn.is-picked {
  background: #EDF1F8;
  border-color: var(--brand-navy-ink);
  color: var(--brand-navy-ink);
}

/* Поле редактирования сообщения */
.composer__text { min-height: 260px; font-size: var(--fs-md); }
.composer__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5);
  margin-top: var(--s-3);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* История вариантов */
.variant {
  border: 0;
  border-left: var(--bw-rail) solid var(--line);
  background: none;
  padding: 0 0 0 var(--s-5);
}
.variant + .variant { margin-top: var(--s-6); }
.variant.is-current { border-left-color: var(--brand-gold); }
.variant__head { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-2); }
.variant__no { font-family: var(--font-display); font-size: var(--fs-display-xs); line-height: 1; color: var(--brand-gold); }
.variant__text { font-size: var(--fs-base); color: var(--text); white-space: pre-line; }
.variant__foot { display: flex; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-4); }

/* Скелет «идёт генерация» */
.skeleton { display: grid; gap: var(--s-3); }
.skeleton__line {
  height: 12px;
  background: linear-gradient(90deg, var(--bg-sunken), var(--surface-hover), var(--bg-sunken));
  background-size: 200% 100%;
  animation: sk-slide 1.4s linear infinite;
}
.skeleton__line--short { width: 62%; }
.skeleton__line--mid { width: 84%; }
@keyframes sk-slide { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton__line { animation: none; } }

/* Цитата: реплика эксперта */
.quote {
  border-left: 3px solid var(--brand-navy);
  background: var(--surface-alt);
  padding: var(--s-3) var(--s-4);
  font-size: var(--fs-base);
  color: var(--text);
}

/* Токены: ссылки и файлы */
.token-row { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
.token {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 4px 10px;
  border: var(--bw) solid var(--line);
  background: var(--surface-alt);
  font-size: var(--fs-sm);
  color: var(--text-strong);
}
.token__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 210px; }
.token__x {
  flex: none;
  padding: 0;
  background: transparent;
  border: 0;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
}
.token__x:hover { color: var(--state-danger-ink); }

/* Выбор темы оформления */
.pick-row { display: grid; gap: var(--s-4); grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) { .pick-row { grid-template-columns: minmax(0, 1fr); } }
.pick {
  display: block;
  padding: var(--s-4);
  background: none;
  border: var(--bw) solid var(--line);
  cursor: pointer;
}
.pick:hover { border-color: var(--brand-navy-ink); }
.pick.is-active { border-color: var(--brand-navy-ink); box-shadow: inset 0 0 0 1px var(--brand-navy-ink); background: none; }
.pick__title {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: none;
  color: var(--text-strong);
}
.pick__hint { margin-top: var(--s-2); font-size: var(--fs-sm); color: var(--text-muted); line-height: var(--lh-tight); }
.pick__bar { display: flex; height: 24px; margin-top: var(--s-4); border: 0; }
.pick__bar i { flex: 1; }
/* образцы палитры — только токены бренда */
.sw--black { background: var(--dark-bg); }
.sw--coal { background: var(--dark-surface); }
.sw--gold { background: var(--brand-gold); }
.sw--deep { background: var(--brand-gold-deep); }
.sw--soft { background: var(--brand-gold-soft); }
.sw--white { background: var(--bg-alt); }
.sw--mist { background: var(--bg); }
.sw--navy { background: var(--brand-navy); }
.sw--cream { background: var(--surface-cream); }

/* Акцентный цвет КП */
.swatch-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.swatch {
  width: 30px;
  height: 30px;
  padding: 0;
  border: var(--bw-thick) solid var(--line);
  cursor: pointer;
}
.swatch.is-active { border-color: var(--text-strong); box-shadow: inset 0 0 0 2px var(--text-on-navy); }
.swatch--gold { background: var(--brand-gold); }
.swatch--deep { background: var(--brand-gold-deep); }
.swatch--navy { background: var(--brand-navy); }
.swatch--ink { background: var(--brand-navy-ink); }

/* Раздел КП */
.sec { border: 0; border-top: var(--bw) solid var(--line); background: none; }
.sec + .sec { margin-top: var(--s-6); }
.sec__head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  padding: var(--s-5) 0 var(--s-4);
  background: none;
}
.sec__num { flex: none; font-family: var(--font-display); font-size: var(--fs-display-xs); line-height: 1; color: var(--brand-gold); }
.sec__title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: none;
  color: var(--text-strong);
}
.sec__actions { margin-left: auto; display: flex; gap: var(--s-3); flex-wrap: wrap; }
.sec__body { padding: 0 0 var(--s-6); }
.sec.is-off .sec__body { display: none; }
.sec.is-off .sec__head { opacity: .6; }
@media (max-width: 520px) { .sec__actions { margin-left: 0; width: 100%; } }

/* Мини-превью обложки КП */
.cover {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  gap: var(--s-7);
  align-items: center;
  padding: var(--s-7);
  border: 0;
  background: var(--bg-alt);
}
@media (max-width: 760px) { .cover { grid-template-columns: minmax(0, 1fr); } }
.cover__photo {
  height: 200px;
  border: var(--bw) solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-3);
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-caps);
  text-transform: none;
  color: var(--text-muted);
  text-align: center;
}
.cover--dark .cover__photo { border-color: rgba(255,255,255,.35); color: var(--dark-muted); border-radius: var(--radius-media); }
.cover--dark { background: var(--dark-bg); border-color: var(--dark-line); border-radius: var(--radius-media); color: var(--dark-text); }
.cover--business { background: var(--bg-alt); }
.cover--pastel { background: var(--surface-cream); }
.cover__overline {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-caps-wide);
  text-transform: none;
  color: var(--accent-c, var(--brand-gold));
}
.cover__name {
  font-family: var(--font-display);
  font-size: var(--fs-display-lg);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  margin: var(--s-3) 0 0;
  color: var(--text-display);
}
.cover--dark .cover__name { color: var(--dark-text); }
.cover__rule { width: 96px; height: 2px; margin: var(--s-4) 0; background: var(--accent-c, var(--brand-gold)); }
.cover__promise { font-size: var(--fs-md); color: var(--text); max-width: 52ch; }
.cover--dark .cover__promise { color: rgba(255,255,255,.86); }
.cover__foot { display: flex; flex-wrap: wrap; gap: var(--s-5); margin-top: var(--s-6); font-size: var(--fs-sm); color: var(--text-muted); }
.cover--dark .cover__foot { color: var(--dark-muted); }
.cover__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  background: var(--accent-c, var(--brand-gold));
  color: var(--text-on-gold);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-caps);
}

/* Акцент КП: один из токенов бренда, новых цветов нет */
.accent-gold { --accent-c: var(--brand-gold); }
.accent-deep { --accent-c: var(--brand-gold-deep); }
.accent-navy { --accent-c: var(--brand-navy); }
.accent-ink  { --accent-c: var(--brand-navy-ink); }

/* Полоса экспорта */
.export-row { display: flex; gap: var(--s-4); flex-wrap: wrap; align-items: flex-end; }
.export-row .field { flex: 1 1 320px; margin-bottom: 0; }

/* ---------- Узкие экраны: плашки тем и лейблы мини-метрик ---------- */
/* Тема публикации — предложение целиком: на узком экране её нельзя держать
   в одну строку, иначе плашка вылезает за край карточки. */
@media (max-width: 600px) {
  .topics .tag {
    max-width: 100%;
    white-space: normal;
    text-align: left;
  }
  /* Лейбл мини-метрики упирался в рамку и обрезался многоточием:
     на двух колонках ему не хватало ~6 px из-за КАПС-трекинга. */
  .mini__label { letter-spacing: 0.06em; }
}

/* Имя пользователя в шапке распирало страницу на узких экранах (320 px):
   блок не сжимается, поэтому ниже 360 px оставляем только аватар. */
@media (max-width: 360px) {
  .app-header__user { font-size: 0; gap: 0; }
  .app-header__user .avatar { font-size: var(--fs-2xs); }
}

/* ============================================================
   Экран поиска: откуда берём кандидатов и свои площадки (search.html)
   ============================================================ */

/* --- Список источников: ряды-карточки с хайрлайном, без вертикальных линий --- */
.sources {
  border: 0;
  border-top: var(--bw) solid var(--line);
  background: none;
}
/* .source живёт поверх .check — от него берём чекбокс, здесь только плотность */
.source {
  gap: var(--s-3);
  padding: var(--s-4) 0;
  border-bottom: var(--bw) solid var(--line);
}
.source:hover { background: none; }
.source__body { display: grid; gap: var(--s-2); min-width: 0; }
.source__head { display: flex; align-items: baseline; gap: var(--s-4); flex-wrap: wrap; min-width: 0; }
.source__name {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--text-strong);
}
.source__note {
  margin-top: var(--s-1);
  font-size: var(--fs-sm);
  line-height: var(--lh-tight);
  max-width: var(--measure);
  color: var(--text-muted);
  overflow-wrap: anywhere;
}
.source__meta {
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-caps);
  text-transform: none;
  color: var(--text-muted);
}
/* снятый источник гаснет заголовком, подпись остаётся читаемой */
.sources input.src:not(:checked) ~ .source__body .source__name { color: var(--text-muted); }

/* --- Свои площадки: добавленные ссылки в общем списке --- */
.own-list {
  margin-top: var(--s-5);
  border: 0;
  border-top: var(--bw) solid var(--line);
  background: none;
}
.own-item {
  display: flex;
  align-items: center;
  gap: var(--s-3) var(--s-4);
  flex-wrap: wrap;
  padding: var(--s-4) 0;
  min-height: 44px;
  border-bottom: var(--bw) solid var(--line);
}
.own-item__name {
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--text-strong);
  overflow-wrap: anywhere;
  min-width: 0;
}
.own-item__note {
  flex: 1 1 220px;
  min-width: 0;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  overflow-wrap: anywhere;
}
.own-item__side { margin-left: auto; display: flex; align-items: center; gap: var(--s-3); flex: none; }
.own-empty { padding: var(--s-5) 0; font-size: var(--fs-sm); line-height: var(--lh-tight); color: var(--text-muted); }

/* Цена прогона, когда источники не выбраны: тот же блок, красный текст */
.run-bar__note.is-error, .run-bar__note.is-error b { color: var(--state-danger-ink); }

@media (max-width: 600px) {
  .source { padding: var(--s-4) 0; }
  .own-item { padding: var(--s-4) 0; }
  .own-item__side { margin-left: 0; width: 100%; }
  .own-item__note { flex-basis: 100%; }
}

/* ============================================================
   20. Экран «Коммерческое»: шаги сборки, голосовой ввод,
       пресеты оформления и разбор чужого образца
   Новых цветов и шрифтов нет — только токены из tokens.css.
   ============================================================ */

/* --- 20.1 Лента шагов: видно, что заполнено, а что нет --- */
.flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-5);
  margin-bottom: var(--s-8);
}
.flow__item {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  min-width: 0;
  padding: 0 0 0 var(--s-4);
  border: 0;
  border-left: var(--bw-rail) solid var(--line);
  background: none;
  color: var(--text);
  text-decoration: none;
}
.flow__item:hover { border-left-color: var(--brand-navy); }
.flow__item.is-done { border-left-color: var(--state-positive-ink); }
.flow__item.is-todo { border-left-color: var(--brand-gold); }
.flow__num {
  flex: none;
  font-family: var(--font-display);
  font-size: var(--fs-display-xs);
  line-height: 1;
  color: var(--brand-gold);
}
.flow__body { min-width: 0; }
.flow__name {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--text-strong);
  overflow-wrap: anywhere;
}
.flow__state {
  display: block;
  margin-top: var(--s-1);
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-caps);
  text-transform: none;
  color: var(--text-muted);
}
.flow__item.is-done .flow__state { color: var(--state-positive-ink); }
.flow__item.is-todo .flow__state { color: var(--brand-gold-deep); }
@media (max-width: 900px) { .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .flow { grid-template-columns: minmax(0, 1fr); } }

/* --- 20.2 Шаг мастера --- */
.step {
  border: 0;
  border-top: var(--bw) solid var(--line);
  background: none;
  box-shadow: none;
  margin-bottom: var(--s-8);
  scroll-margin-top: calc(var(--header-h) + var(--s-4));
}
.step__head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  padding: var(--s-5) 0 var(--s-4);
  background: none;
}
.step__num {
  flex: none;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-navy);
  color: var(--text-on-navy);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  line-height: 1;
}
.step__text { min-width: 0; flex: 1 1 260px; }
.step__title { font-size: var(--fs-display-sm); }
.step__sub {
  margin: var(--s-2) 0 0;
  font-size: var(--fs-base);
  color: var(--text-muted);
  line-height: var(--lh-tight);
  max-width: var(--measure);
}
.step__state { flex: none; margin-left: auto; }
.step__body { padding: 0 0 var(--s-6); }
@media (max-width: 520px) { .step__state { margin-left: 0; } }

/* --- 20.3 Разобранный профиль эксперта --- */
.profile-card {
  display: flex;
  gap: var(--s-4);
  align-items: flex-start;
  flex-wrap: wrap;
  padding: var(--s-5);
  border: 0;
  border-left: var(--bw-rail) solid var(--brand-gold);
  background: var(--surface-alt);
}
.profile-card__id { flex: 1 1 220px; min-width: 0; }
.profile-card__name {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-display-xs);
  color: var(--text-display);
  line-height: var(--lh-display);
}
.profile-card__nick {
  display: block;
  margin-top: var(--s-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--brand-gold-deep);
}
.profile-card__side { flex: 1 1 100%; }

/* --- 20.4 Голосовой ввод оффера --- */
.voice {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  padding: var(--s-4) var(--s-5);
  border: 0;
  background: var(--surface-alt);
}
.voice.is-recording { background: var(--brand-gold-wash); }
.voice__dot {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--line-strong);
}
.voice.is-recording .voice__dot {
  background: var(--state-danger-ink);
  animation: voice-pulse 1s ease-in-out infinite;
}
.voice__timer {
  flex: none;
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  color: var(--text-strong);
}
.voice__note { min-width: 0; font-size: var(--fs-sm); color: var(--text-muted); line-height: var(--lh-tight); }
.voice__actions { margin-left: auto; display: flex; gap: var(--s-3); flex-wrap: wrap; }
.voice__bars { display: flex; align-items: flex-end; gap: 3px; height: 18px; flex: none; }
.voice__bars i {
  width: 3px;
  height: 4px;
  background: var(--line-strong);
}
.voice.is-recording .voice__bars i { background: var(--brand-gold-deep); animation: voice-bar .9s ease-in-out infinite; }
.voice.is-recording .voice__bars i:nth-child(2) { animation-delay: .12s; }
.voice.is-recording .voice__bars i:nth-child(3) { animation-delay: .24s; }
.voice.is-recording .voice__bars i:nth-child(4) { animation-delay: .36s; }
.voice.is-recording .voice__bars i:nth-child(5) { animation-delay: .48s; }
@keyframes voice-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes voice-bar { 0%, 100% { height: 4px; } 50% { height: 18px; } }
@media (prefers-reduced-motion: reduce) {
  .voice__dot, .voice__bars i { animation: none !important; }
}
@media (max-width: 520px) { .voice__actions { margin-left: 0; width: 100%; } }

/* --- 20.5 Мини-превью слайда: один движок на CSS-переменных ---
   Размеры внутри — в em, поэтому и карточка в галерее, и крупный стенд
   рисуются одной разметкой: меняется только --pv-fs. */
.pv {
  --pv-fs: 7px;
  --pv-bg: var(--bg-alt);
  --pv-ink: var(--brand-navy-ink);
  --pv-muted: var(--text);
  --pv-accent: var(--brand-gold);
  --pv-on-accent: var(--text-on-gold);
  --pv-line: var(--line);
  --pv-photo: var(--bg-sunken);
  --pv-radius: 0px;
  --pv-display: var(--font-display);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .8em;
  aspect-ratio: 16 / 9;
  /* если содержимого больше, чем влезает в 16:9, кадр растёт, а не режет текст */
  min-height: fit-content;
  padding: 1.6em;
  overflow: hidden;
  font-size: var(--pv-fs);
  /* кегль тянется от ширины самой карточки: одна разметка живёт
     и в галерее (~200 px), и на крупном стенде (~560 px) */
  font-size: clamp(4.5px, 2.3cqi, var(--pv-fs-max, 8px));
  line-height: 1.45;
  background: var(--pv-bg);
  color: var(--pv-ink);
  border: var(--bw) solid var(--pv-line);
  border-radius: var(--pv-radius);
}
.pv--lg { --pv-fs: 13px; --pv-fs-max: 15px; }
.pv > *, .pv__cols > * { min-width: 0; }
/* кегль превью считается от ширины ОБЁРТКИ: сам себя элемент контейнером
   не опрашивает, поэтому container-type висит на родителе кадра */
.pv-frame,
.preset__previews > *,
.stage > *,
.sample-grid > * { container-type: inline-size; }
.pv__kicker {
  display: block;
  font-size: 1.1em;
  font-weight: var(--fw-bold);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pv-accent);
}
.pv__title {
  display: block;
  font-family: var(--pv-display);
  font-size: 3em;
  line-height: .98;
  letter-spacing: var(--tracking-display);
  color: var(--pv-ink);
}
.pv__title--sm { font-size: 2.1em; }
.pv__rule { display: block; width: 6em; height: .28em; background: var(--pv-accent); }
/* Кадр повторяет приёмы самого листа (kp_render): хвост заголовка акцентом,
   номер призраком за текстом, капс на тёмной деке. Без этого предпросмотр
   показывал не тот документ, который потом собирается. */
.pv .hl { font-style: normal; color: var(--pv-accent); }
/* Кадр готового КП: метка горизонтальная и мелкая — ровно как .kick на листе. */
/* Цвет возвращаем палитре референса. Глобальное правило кабинета красит
   .pv__kicker и .pv__metric фирменным золотом и по специфичности перебивает
   переменную кадра — из-за этого метка предпросмотра была золотой на любом
   референсе, хотя лист рисовался его собственным акцентом. Селектор
   намеренно длинный: короче этого правило кабинета не перебить. */
body .app-shell .pv--kp .pv__kicker,
body .pv--kp .pv__kicker { color: var(--pv-accent); }
body .app-shell .pv--kp .pv__metric,
body .pv--kp .pv__metric { color: var(--pv-accent); }
.pv--kp .pv__kicker { font-size: .95em; letter-spacing: .18em; }
.pv--kp .pv__title { font-size: 3.2em; font-weight: 800; }
.pv--kp .pv__cols { grid-template-columns: minmax(0, 1fr); align-items: start; }
.pv__ghost {
  /* Цифра целиком внутри кадра: при отрицательном top её срезало верхним
     краем — кадр с overflow:hidden. */
  position: absolute; left: .4em; top: 0;
  font-family: var(--pv-display); font-size: 9em; font-weight: 800;
  line-height: .8; letter-spacing: -.06em; color: transparent;
  -webkit-text-stroke: 1px var(--pv-ink); opacity: .08;
  pointer-events: none; z-index: 0;
}
.pv--dark .pv__title { text-transform: uppercase; letter-spacing: -.025em; font-weight: 800; }
.pv > *:not(.pv__ghost) { position: relative; z-index: 1; }
.pv--dark .pv__foot > span {
  border: 1px solid rgba(255,255,255,.14); border-radius: .9em;
  background: rgba(255,255,255,.05); padding: .8em .9em;
}
.pv__text {
  /* обещание на обложке держим в двух строках: слайд 16:9 не должен
     разъезжаться от длины текста */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 1.15em;
  color: var(--pv-muted);
}
.pv__cols { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .5fr); gap: 1.2em; align-items: stretch; }
.pv__photo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 6em;
  background: var(--pv-photo);
  border: var(--bw) solid var(--pv-line);
  border-radius: var(--pv-radius);
  font-size: .95em;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pv-muted);
}
.pv__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8em; }
.pv__card {
  padding: .8em;
  border: var(--bw) solid var(--pv-line);
  border-radius: var(--pv-radius);
}
.pv__card b { display: block; font-size: .95em; letter-spacing: .08em; text-transform: uppercase; color: var(--pv-muted); font-weight: var(--fw-bold); }
.pv__metric {
  display: block;
  margin-top: .3em;
  font-family: var(--pv-display);
  font-size: 2.1em;
  line-height: 1;
  color: var(--pv-accent);
}
.pv__strip {
  display: block;
  margin-top: auto;
  padding: .7em 1em;
  background: var(--pv-accent);
  color: var(--pv-on-accent);
  font-size: .95em;
  font-weight: var(--fw-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.pv__foot {
  /* Цифры на обложке — РЯДОМ, каждая своей колонкой: подпись мелким сверху,
     значение крупным снизу. Раньше они шли строками «подпись: значение», не
     влезали в ширину кадра и вставали СТОЛБИКОМ в три ряда — обложка
     превращалась в плотный текстовый блок без воздуха (замер 23.09.2026:
     заголовок 4 строки + текст 3 строки + цифры 3 ряда в кадре 640×360). */
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 1.2em;
  align-items: end;
  font-size: .8em;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--pv-muted);
}
.pv__foot > span {
  display: flex; flex-direction: column; gap: .35em;
  border-top: 1px solid var(--pv-line, rgba(255,255,255,.16));
  padding-top: .6em;
  min-width: 0;
}
.pv__foot i {
  font-style: normal; font-size: .85em; opacity: .75;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pv__foot b {
  color: var(--pv-accent); font-weight: var(--fw-bold);
  font-family: var(--pv-display); font-size: 1.9em;
  letter-spacing: -.01em; text-transform: none;
}
/* в узком кадре (телефон) строка бенефитов не помещается в 16:9 —
   убираем её, чтобы не срезало плашку-вывод внизу слайда */
@container (max-width: 520px) {
  .pv__foot { display: none; }
}
.pv__chips { display: flex; gap: .6em; flex-wrap: wrap; }
.pv__chip {
  padding: .35em .9em;
  border: var(--bw) solid var(--pv-accent);
  border-radius: var(--radius-pill);
  font-size: .95em;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--pv-accent);
}
.pv__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6em;
  height: 2.6em;
  background: var(--pv-accent);
  color: var(--pv-on-accent);
  font-size: 1em;
  font-weight: var(--fw-bold);
  letter-spacing: .06em;
}

/* Пресеты: каждый переопределяет только переменные движка */
.pv-sprint {
  --pv-bg: var(--dark-bg);
  --pv-ink: var(--text-on-dark);
  --pv-muted: var(--dark-muted);
  --pv-accent: var(--brand-gold);
  --pv-on-accent: var(--text-on-gold);
  --pv-line: var(--dark-line);
  --pv-photo: var(--dark-surface);
  --pv-radius: var(--radius-media);
}
.pv-business {
  --pv-bg: var(--bg-alt);
  --pv-ink: var(--brand-navy-ink);
  --pv-muted: var(--text);
  --pv-accent: var(--brand-navy);
  --pv-on-accent: var(--text-on-navy);
  --pv-line: var(--line);
  --pv-photo: var(--bg-sunken);
  --pv-radius: 0px;
}
.pv-pastel {
  --pv-bg: var(--surface-cream);
  --pv-ink: var(--brand-navy-ink);
  --pv-muted: var(--text);
  --pv-accent: var(--brand-gold);
  --pv-on-accent: var(--text-on-gold);
  --pv-line: var(--brand-gold-soft);
  --pv-photo: var(--bg-sunken);
  --pv-radius: 0px;
}
.pv-minimal {
  --pv-bg: var(--bg-alt);
  --pv-ink: var(--brand-navy-ink);
  --pv-muted: var(--text-muted);
  --pv-accent: var(--brand-navy-ink);
  --pv-on-accent: var(--text-on-navy);
  --pv-line: var(--line);
  --pv-photo: var(--bg);
  --pv-radius: 0px;
}
.pv-bold {
  --pv-bg: var(--brand-navy);
  --pv-ink: var(--text-on-dark);
  --pv-muted: rgba(255,255,255,.78);
  --pv-accent: var(--brand-gold);
  --pv-on-accent: var(--text-on-gold);
  --pv-line: var(--line-dark);
  --pv-photo: var(--brand-navy-deep);
  --pv-radius: var(--radius-media);
}

/* Оттенок внутри пресета — идёт после пресетов, поэтому побеждает */
.pv-a-gold { --pv-accent: var(--brand-gold); --pv-on-accent: var(--text-on-gold); }
.pv-a-deep { --pv-accent: var(--brand-gold-deep); --pv-on-accent: var(--text-on-dark); }
.pv-a-soft { --pv-accent: var(--brand-gold-soft); --pv-on-accent: var(--text-on-gold); }
.pv-a-navy { --pv-accent: var(--brand-navy); --pv-on-accent: var(--text-on-navy); }
.pv-a-ink  { --pv-accent: var(--brand-navy-ink); --pv-on-accent: var(--text-on-navy); }
.pv-a-white { --pv-accent: var(--text-on-dark); --pv-on-accent: var(--brand-navy-ink); }

/* --- 20.6 Галерея пресетов --- */
.preset-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-5);
}
@media (max-width: 1100px) { .preset-grid { grid-template-columns: minmax(0, 1fr); } }
.preset {
  position: relative;
  display: block;
  padding: var(--s-4);
  border: var(--bw) solid var(--line);
  background: none;
  cursor: pointer;
}
.preset:hover { border-color: var(--brand-navy-ink); }
.preset input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.preset.is-active { border-color: var(--brand-navy-ink); box-shadow: inset 0 0 0 1px var(--brand-navy-ink); }
.preset input:focus-visible ~ .preset__head { outline: var(--bw-thick) solid var(--focus-ring); outline-offset: 2px; }
.preset__head { display: flex; align-items: baseline; gap: var(--s-2); flex-wrap: wrap; }
.preset__name {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--text-strong);
}
.preset__hint { display: block; margin-top: var(--s-2); font-size: var(--fs-sm); color: var(--text-muted); line-height: var(--lh-tight); }
.preset__previews { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); margin-top: var(--s-3); }
/* на узком экране пара превью не читается: раскладываем в столбик,
   каждое становится во всю ширину карточки */
@media (max-width: 640px) { .preset__previews { grid-template-columns: minmax(0, 1fr); } }
.preset__cap {
  display: block;
  margin-top: var(--s-2);
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-caps);
  text-transform: none;
  color: var(--text-muted);
}
.preset__mark {
  position: absolute;
  top: var(--s-4);
  right: var(--s-4);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--brand-gold-deep);
  opacity: 0;
}
.preset.is-active .preset__mark { opacity: 1; }

/* Крупный стенд выбранного стиля */
.stage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
@media (max-width: 900px) { .stage { grid-template-columns: minmax(0, 1fr); } }

/* --- 20.7 Разбор своего образца --- */
.sample-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter); align-items: start; }
@media (max-width: 900px) { .sample-grid { grid-template-columns: minmax(0, 1fr); } }
.pal-row { display: flex; flex-wrap: wrap; gap: var(--s-4); }
.pal { text-align: center; }
.pal__dot {
  display: block;
  width: 44px;
  height: 44px;
  border: var(--bw) solid var(--line);
}
.pal__hex {
  display: block;
  margin-top: var(--s-2);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.pal--ink .pal__dot { background: var(--brand-navy-ink); }
.pal--navy .pal__dot { background: var(--brand-navy); }
.pal--gold .pal__dot { background: var(--brand-gold); }
.pal--soft .pal__dot { background: var(--brand-gold-soft); }
.pal--cream .pal__dot { background: var(--surface-cream); }

/* Ещё два оттенка для ряда акцентов */
.swatch--soft { background: var(--brand-gold-soft); }
.swatch--white { background: var(--text-on-dark); }

/* --- 20.8 Полоса сборки --- */
.build {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
  padding: var(--s-4) var(--s-5);
  border: 0;
  border-left: var(--bw-rail) solid var(--brand-navy-ink);
  background: var(--surface-alt);
  margin-bottom: var(--s-8);
}
.build__note { min-width: 0; flex: 1 1 260px; font-size: var(--fs-base); color: var(--text); line-height: var(--lh-tight); }
.build__note b { color: var(--text-strong); }
.build__demo { margin-left: auto; display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.build__demo .label { font-size: var(--fs-sm); }
@media (max-width: 900px) { .build__demo { margin-left: 0; width: 100%; } }

/* ============================================================
   Один акцент на экран (правило воздуха №2)
   Заливка кнопки — привилегия ГЛАВНОГО действия экрана.
   В повторяющихся строках (список, таблица, доска) то же действие
   встречается 5–20 раз: там кнопка звучит тихо, иначе экран рябит.
   Нужна громкая кнопка внутри строки — .btn--keep-loud.
   ============================================================ */
.row-item .btn--primary:not(.btn--keep-loud),
.table .btn--primary:not(.btn--keep-loud),
.own-item .btn--primary:not(.btn--keep-loud),
.source .btn--primary:not(.btn--keep-loud),
.xpert .btn--primary:not(.btn--keep-loud) {
  background: none;
  /* Повторяющееся действие в строке списка звучит на ступень тише: рамка вместо
     заливки. Иначе двадцать одинаковых залитых кнопок превращают список в рябь. */
  color: var(--brand-navy-ink);
  border-color: var(--brand-navy-ink);
}
.row-item .btn--primary:not(.btn--keep-loud):hover,
.table .btn--primary:not(.btn--keep-loud):hover,
.own-item .btn--primary:not(.btn--keep-loud):hover,
.source .btn--primary:not(.btn--keep-loud):hover,
.xpert .btn--primary:not(.btn--keep-loud):hover {
  background: var(--brand-navy-ink);
  border-color: var(--brand-navy-ink);
  color: var(--text-on-dark);
}
.row-item .btn--secondary:not(.btn--keep-loud),
.table .btn--secondary:not(.btn--keep-loud),
.own-item .btn--secondary:not(.btn--keep-loud),
.xpert .btn--secondary:not(.btn--keep-loud) {
  background: none;
  color: var(--brand-navy);
  border-color: var(--line-strong);
}
.row-item .btn--secondary:not(.btn--keep-loud):hover,
.table .btn--secondary:not(.btn--keep-loud):hover,
.own-item .btn--secondary:not(.btn--keep-loud):hover,
.xpert .btn--secondary:not(.btn--keep-loud):hover {
  background: var(--surface-hover);
  border-color: var(--brand-navy);
  color: var(--brand-navy);
}

/* Длинный пояснительный абзац в потоке формы. Держим его узким и тихим —
   а лучше не пишем вовсе. */
.hint--block {
  margin: var(--s-4) 0 0;
  padding-left: var(--s-4);
  border-left: var(--bw) solid var(--line);
  max-width: 64ch;
}

/* Профиль продюсера в подвале меню — только логин строкой, без аватарки
   (Артём, 14.09.2026). */
.app-sidebar__login {
  display: block;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  word-break: break-all;
}

/* ------------------------------------------------------------------
   results.html: вердикт A/B/C у оценки, строка разбалловки, карточка
   «уже монетизируется». Добавлено 14.09.2026 — существующими классами
   не собиралось: .score знал только «оценку» и «спорно».
------------------------------------------------------------------- */
.score--verdict { width: 116px; padding: var(--s-3) var(--s-2); }
.score--verdict .score__label {
  white-space: normal;
  text-align: center;
  letter-spacing: 0.04em;
}
.score--ok { background: var(--state-positive); }
.score--ok .score__label { color: var(--state-positive-ink); }
.score--quiet { background: var(--surface-alt); }
.score--quiet .score__num { color: var(--text-muted); }
/* разбалловка: та же строка-перечисление, что и счётчики, но тише и уже.
   Разделитель — после пункта, а не перед: при переносе строка не начинается с точки. */
.split-line { margin-top: var(--s-4); margin-bottom: 0; }
.split-line b { font-weight: var(--fw-medium); }
.split-line { gap: var(--s-2) var(--s-6); }
.split-line .count-line__i + .count-line__i::before { content: none; }
/* «уже монетизируется» — карточка внизу списка, звучит тише */
.xpert--mono .xpert__name a { border-bottom-color: var(--line); }
@media (max-width: 760px) {
  /* разбалловка переносится, но остаётся строкой: столбик из 5 пунктов длиннее самой карточки */
  .split-line { flex-direction: row; align-items: baseline; gap: var(--s-1) var(--s-5); }
  .split-line .count-line__i + .count-line__i::before { content: none; }
}


/* ---------- Список приложенных файлов с описанием ----------
   Артём, 16.09.2026: к каждому файлу нужно поле «что это и зачем» —
   иначе агент не понимает, куда файл вставлять. */
.filelist { display: grid; gap: var(--s-3); margin-top: var(--s-4); }
.filerow {
  display: grid;
  grid-template-columns: auto minmax(120px, 220px) minmax(0, 1fr) 32px;
  gap: var(--s-3);
  align-items: center;
}
.filerow__name {
  min-width: 0;
  font-size: var(--fs-sm);
  color: var(--text-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.filerow .ic { color: var(--text-muted); }
.input--sm { min-height: 34px; padding: 4px 10px; font-size: var(--fs-sm); }
@media (max-width: 760px) {
  .filerow { grid-template-columns: auto minmax(0, 1fr) 32px; }
  .filerow__note { grid-column: 1 / -1; }
}

/* Компактная кнопка-иконка: удалить строку, закрыть, убрать файл */
.icon-btn {
  width: 32px; height: 32px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: var(--bw) solid transparent; border-radius: var(--radius);
  color: var(--text-muted); font-family: var(--font-body); font-size: var(--fs-sm);
  line-height: 1; cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.icon-btn:hover { color: var(--state-danger-ink); border-color: var(--state-danger-ink); }
.icon-btn:active { background: #FBEDED; }

/* Тихое подтверждение прямо на кнопке вместо всплывающего уведомления */
.btn.is-done { color: var(--state-positive-ink); border-color: var(--state-positive-ink); }
.btn--primary.is-done { background: var(--state-positive-ink); border-color: var(--state-positive-ink); color: #FFFFFF; }


/* ---------- Диктофон ----------
   Артём, 16.09.2026: прежний вид (крупный круг с прыгающими столбиками) выглядел старо.
   Теперь строка: кнопка записи, таймер, дорожка уровня от живого сигнала, действия. */
.rec {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  background: var(--surface-alt);
  border-radius: var(--radius);
}
.rec__btn {
  flex: none;
  width: 38px; height: 38px; padding: 0;
  display: inline-grid; place-content: center;
  background: var(--brand-navy-ink);
  border: 0; border-radius: 50%;
  color: #FFFFFF;
  cursor: pointer;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.rec__btn:hover { background: var(--brand-navy-deep); }
.rec__btn:active { transform: scale(.94); }
.rec__btn .ic { width: 20px; height: 20px; vertical-align: 0; }
.rec__btn--stop { background: var(--state-danger-ink); }
.rec__btn--stop:hover { background: #6E2525; }
.rec__square { width: 12px; height: 12px; background: #FFFFFF; border-radius: 0; }
.rec__timer {
  flex: none;
  min-width: 46px;
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: var(--text-strong);
}
.rec__wave {
  flex: 1 1 120px;
  min-width: 60px;
  height: 6px;
  background: var(--line);
  border-radius: 0;
  overflow: hidden;
}
.rec__level {
  display: block;
  width: 0%;
  height: 100%;
  background: var(--brand-navy-ink);
  border-radius: 0;
  transition: width .08s linear;
}
.rec__note { flex: 1 1 200px; min-width: 0; font-size: var(--fs-sm); color: var(--text-muted); }
.rec__actions { margin-left: auto; display: flex; gap: var(--s-3); }
.rec.is-recording .rec__btn { animation: rec-pulse 1.4s ease-in-out infinite; }
.rec.is-recording .rec__level { background: var(--state-danger-ink); }
@keyframes rec-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(139,47,47,.45); }
  50%      { box-shadow: 0 0 0 7px rgba(139,47,47,0); }
}
@media (prefers-reduced-motion: reduce) { .rec.is-recording .rec__btn { animation: none; } }
@media (max-width: 760px) {
  .rec { flex-wrap: wrap; }
  .rec__note { flex-basis: 100%; order: 3; }
  .rec__actions { order: 2; }
}


/* ============================================================
   РЕДИЗАЙН «C · Цветной энергичный» — вид компонентов.
   Имена классов и поведение не меняются: ниже только внешность.
   Блок идёт последним, поэтому побеждает при равной специфичности.
   ============================================================ */

/* --- тёмный контекст на новой палитре --- */
.theme-dark {
  --bg: #0E1013;
  --bg-alt: #16191D;
  --bg-sunken: #1D2126;
  --surface: #16191D;
  --surface-alt: #1D2126;
  --surface-cream: rgba(110,159,216,.13);
  --surface-hover: #1D2126;
  --text: #B4BBC3;
  --text-strong: #ECEEF0;
  --text-muted: #A3AAB3;
  --text-display: #ECEEF0;
  --line: rgba(236,238,240,.10);
  --line-strong: rgba(236,238,240,.22);
  --brand-gold: #6E9FD8;
  --brand-navy: #6E9FD8;
  --brand-navy-ink: #6E9FD8;
  --text-on-navy: #0E1013;
  --text-on-dark: #FFFFFF;
  --focus-ring: #6E9FD8;
}

/* --- База --- */
body { font-size: var(--fs-base); }
h1, h2, h3, h4 { letter-spacing: var(--sp-tracking-h2); font-weight: var(--fw-bold); }
a { color: var(--sp-accent); }
a:hover { color: #163C6B; }
:focus-visible { outline-color: var(--sp-accent); outline-width: 2px; }

/* числа, ники и микро-метки — моноширинным */
.metric__value, .score__num, .pcard__nick, .board__count, .nav-item__count,
.task__pct, .voice__timer, .rec__timer, .mini__value, .sticky-panel__pct,
.conv__num, .count-line b, .split-line b, .upload__mark, .flow__num,
.sec__num, .step__num, .variant__no, .steps__num, .table__num, .badge-outline b {
  font-family: var(--sp-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--sp-tracking-tight);
}
.board__count, .nav-item__count {
  letter-spacing: 0;
  font-size: var(--sp-text-meta);
}

/* --- Шапка --- */
.app-header {
  background: var(--sp-card);
  color: var(--sp-ink);
  border-bottom: 1px solid var(--sp-line);
}
.app-header__brand { color: var(--sp-ink); font-size: 18px; font-weight: var(--fw-bold); letter-spacing: var(--sp-tracking-h2); }
.app-header__brand:hover { color: var(--sp-ink); }
.app-header__sub { color: var(--sp-dim); font-size: var(--sp-text-meta); }
.app-header__link { color: var(--sp-mid); font-size: var(--sp-text-ui); border-bottom-width: 2px; }
.app-header__link:hover, .app-header__link.is-active { color: var(--sp-ink); }
.app-header__link.is-active { border-bottom-color: var(--sp-accent); }
.app-header__user { color: var(--sp-dim); font-size: var(--sp-text-meta); }
.app-header__burger { border-color: var(--sp-line-2); color: var(--sp-ink); border-radius: var(--sp-radius-md); }
.app-header .btn--ghost { color: var(--sp-mid); border-color: transparent; }
.app-header .btn--ghost:hover { background: var(--sp-sink); color: var(--sp-ink); border-color: transparent; }
.avatar { background: var(--sp-accent); color: #FFFFFF; border: 0; font-family: var(--sp-mono); font-size: var(--sp-text-meta); }

/* --- Меню: белая карточка 258 --- */
.app-shell { background: var(--sp-paper); }
.app-sidebar {
  background: var(--sp-card);
  border-right: 1px solid var(--sp-line);
  padding: var(--sp-space-4) 0 var(--sp-space-7);
}
.app-sidebar__title { font-size: var(--sp-text-meta); color: var(--sp-dim); padding: 0 var(--sp-space-4); }
.nav-item {
  gap: 0;
  margin: 0 var(--sp-space-3) 2px;
  padding: 9px var(--sp-space-3);
  border-left: 0;
  border-radius: var(--sp-radius-md);
  font-size: var(--sp-text-ui);
  font-weight: var(--sp-weight-regular);
  color: var(--sp-mid);
}
.nav-item:hover { background: var(--sp-sink); color: var(--sp-ink); }
.nav-item.is-active {
  background: var(--sp-accent-soft);
  color: var(--sp-accent);
  font-weight: var(--sp-weight-medium);
}
.nav-item__ic { margin-right: var(--sp-space-2); color: var(--sp-dim); }
.nav-item.is-active .nav-item__ic, .nav-item:hover .nav-item__ic { color: var(--sp-accent); }
.nav-item__count, .nav-item__lock { margin-left: auto; color: var(--sp-dim); }
.nav-item--locked { color: var(--sp-dim); }
.app-sidebar__note, .nav-hint { font-size: var(--sp-text-meta); color: var(--sp-dim); }
.app-sidebar__login { font-size: var(--sp-text-meta); color: var(--sp-dim); }

/* --- Заголовок экрана: 27 px + серая подпись --- */
.page-head { align-items: baseline; margin-bottom: var(--sp-space-6); }
.page-title { font-size: var(--sp-text-h1); letter-spacing: var(--sp-tracking-tight); color: var(--sp-ink); }
.page-sub { margin-top: 6px; font-size: var(--sp-text-ui); color: var(--sp-dim); }
.section { margin-bottom: var(--sp-space-7); }
.section__title { font-size: var(--sp-text-h2); letter-spacing: var(--sp-tracking-h2); }

/* --- Кнопки: пилюли --- */
.btn {
  border-radius: var(--sp-radius-pill);
  font-size: var(--sp-text-ui);
  font-weight: var(--sp-weight-medium);
  letter-spacing: 0;
  min-height: 36px;
  padding: 0 18px;
  color: var(--sp-ink);
}
.btn--primary { background: var(--sp-accent); border-color: var(--sp-accent); color: #FFFFFF; }
.btn--primary:hover { background: #163C6B; border-color: #163C6B; }
.btn--primary:active { background: #12325A; border-color: #12325A; }
.btn--secondary { background: var(--sp-card); border-color: var(--sp-line-2); color: var(--sp-ink); }
.btn--secondary:hover { background: var(--sp-sink); border-color: var(--sp-line-2); }
.btn--secondary:active { background: var(--sp-sink); color: var(--sp-ink); }
.btn--ghost { background: transparent; border-color: transparent; color: var(--sp-mid); padding: 0 12px; }
.btn--ghost:hover { background: var(--sp-sink); color: var(--sp-ink); }
.btn--ghost:active { background: var(--sp-sink); }
.btn--danger { color: var(--sp-bad); background: transparent; }
.btn--danger:hover { background: var(--sp-bad-soft); }
.btn--danger:active { background: var(--sp-bad-soft); }
.btn--sm { min-height: 30px; padding: 0 12px; font-size: var(--sp-text-meta); }
.btn.is-picked { background: var(--sp-accent-soft); border-color: var(--sp-accent); color: var(--sp-accent); }
.btn.is-done { color: var(--sp-ok); border-color: var(--sp-ok); }
.btn--primary.is-done { background: var(--sp-ok); border-color: var(--sp-ok); color: #FFFFFF; }

/* тихая ступень повторяющегося действия в списках */
.row-item .btn--primary:not(.btn--keep-loud),
.table .btn--primary:not(.btn--keep-loud),
.own-item .btn--primary:not(.btn--keep-loud),
.source .btn--primary:not(.btn--keep-loud),
.xpert .btn--primary:not(.btn--keep-loud) {
  background: var(--sp-accent-soft);
  color: var(--sp-accent);
  border-color: transparent;
}
.row-item .btn--primary:not(.btn--keep-loud):hover,
.table .btn--primary:not(.btn--keep-loud):hover,
.own-item .btn--primary:not(.btn--keep-loud):hover,
.source .btn--primary:not(.btn--keep-loud):hover,
.xpert .btn--primary:not(.btn--keep-loud):hover {
  background: var(--sp-accent);
  border-color: var(--sp-accent);
  color: #FFFFFF;
}
.row-item .btn--secondary:not(.btn--keep-loud),
.table .btn--secondary:not(.btn--keep-loud),
.own-item .btn--secondary:not(.btn--keep-loud),
.xpert .btn--secondary:not(.btn--keep-loud) {
  background: var(--sp-card);
  color: var(--sp-ink);
  border-color: var(--sp-line-2);
}
.row-item .btn--secondary:not(.btn--keep-loud):hover,
.table .btn--secondary:not(.btn--keep-loud):hover,
.own-item .btn--secondary:not(.btn--keep-loud):hover,
.xpert .btn--secondary:not(.btn--keep-loud):hover {
  background: var(--sp-sink);
  border-color: var(--sp-line-2);
  color: var(--sp-ink);
}
.icon-btn { border-radius: var(--sp-radius-md); color: var(--sp-dim); }
.icon-btn:hover { color: var(--sp-bad); border-color: var(--sp-bad); background: var(--sp-bad-soft); }
.icon-btn:active { background: var(--sp-bad-soft); }

/* --- Поля: радиус 12, мягкая рамка --- */
.input, .textarea, .select {
  min-height: 40px;
  border-radius: var(--sp-radius-md);
  border-color: var(--sp-line-2);
  background: var(--sp-card);
  color: var(--sp-ink);
  font-size: var(--sp-text-ui);
}
.input::placeholder, .textarea::placeholder { color: var(--sp-dim); }
.input:hover, .textarea:hover, .select:hover { border-color: var(--sp-accent); }
.input:focus, .textarea:focus, .select:focus {
  border-color: var(--sp-accent);
  box-shadow: 0 0 0 3px var(--sp-accent-soft);
}
.input.is-invalid, .textarea.is-invalid, .select.is-invalid { border-color: var(--sp-bad); }
.input--sm { min-height: 32px; border-radius: 0; }
.field__label { font-size: var(--sp-text-label); color: var(--sp-mid); font-weight: var(--sp-weight-medium); letter-spacing: 0; }
.field__req { color: var(--sp-bad); }
.field__hint, .hint { font-size: var(--sp-text-meta); color: var(--sp-dim); }
.field__error { font-size: var(--sp-text-meta); color: var(--sp-bad); }
.check input { border-radius: 0; border-color: var(--sp-line-2); background: var(--sp-card); }
.check input[type="radio"] { border-radius: 50%; }
.check input:checked { background: var(--sp-accent); border-color: var(--sp-accent); }
.suffix {
  background: var(--sp-sink);
  border-color: var(--sp-line-2);
  border-radius: 0 var(--sp-radius-md) var(--sp-radius-md) 0;
  min-height: 40px;
  color: var(--sp-dim);
  letter-spacing: 0;
}
.input-group--tight .input { border-radius: var(--sp-radius-md) 0 0 var(--sp-radius-md); }
.upload { border-radius: var(--sp-radius-md); border-color: var(--sp-line-2); background: var(--sp-sink); }
.upload__mark, .ic-badge { border-radius: var(--sp-radius-md); border-color: var(--sp-line-2); color: var(--sp-accent); }

/* --- Карточка: белая, одна тень, радиус 20 --- */
.card {
  background: var(--sp-card);
  border-radius: var(--sp-radius-2xl);
  box-shadow: var(--sp-shadow);
  padding: var(--sp-space-5);
}
.card--alt, .card--boxed, .card--paper { background: var(--sp-card); border: 0; padding: var(--sp-space-5); }
.card--flat, .card--raised { box-shadow: var(--sp-shadow); }
.card--navy { background: var(--sp-accent); color: #FFFFFF; border: 0; }
.card--cream { background: var(--sp-accent-soft); border-left: 0; box-shadow: none; }
.card--dark { background: #16191D; color: #ECEEF0; border: 0; border-radius: var(--sp-radius-2xl); }
.card__title {
  font-size: var(--sp-text-h2);
  font-weight: var(--sp-weight-bold);
  letter-spacing: var(--sp-tracking-h2);
  color: var(--sp-ink);
}
.card__title--display { font-size: var(--sp-text-h2); font-weight: var(--sp-weight-bold); }
.card__body { font-size: var(--sp-text-body); }
.grid { gap: var(--sp-space-4); }

/* --- Метка / тег: мягкая подложка, пилюля --- */
.tag {
  padding: 3px 10px;
  border-radius: var(--sp-radius-pill);
  background: var(--sp-sink);
  color: var(--sp-mid);
  font-size: var(--sp-text-meta);
  font-weight: var(--sp-weight-medium);
  letter-spacing: 0;
}
.tag--solid { background: var(--sp-sink); border: 0; color: var(--sp-ink); padding: 3px 10px; }
.tag--gold, .tag--navy, .tag--accent { background: var(--sp-accent-soft); color: var(--sp-accent); border: 0; padding: 3px 10px; }
.tag--positive { background: var(--sp-ok-soft); color: var(--sp-ok); }
.tag--warn { background: var(--sp-warn-soft); color: var(--sp-warn); }
.tag--danger, .tag--solid.tag--danger { background: var(--sp-bad-soft); color: var(--sp-bad); border: 0; padding: 3px 10px; }
.tag--muted { background: var(--sp-sink); color: var(--sp-dim); }
.tag--lg { padding: 5px 13px; font-size: var(--sp-text-ui); }
.tag-list { gap: var(--sp-space-2); }
.tag-list > .tag + .tag::before { content: none; margin: 0; }
.chip { border-width: 1px; border-color: var(--sp-line-2); font-size: var(--sp-text-meta); letter-spacing: 0; }

/* фильтры-пилюли со счётчиком */
.chip-toggle {
  padding: 6px 14px;
  border-radius: var(--sp-radius-pill);
  border-color: var(--sp-line-2);
  background: var(--sp-card);
  color: var(--sp-mid);
  font-size: var(--sp-text-ui);
  font-weight: var(--sp-weight-regular);
  letter-spacing: 0;
}
.chip-toggle:hover { border-color: var(--sp-accent); color: var(--sp-accent); background: var(--sp-card); }
.chip-toggle.is-on { background: var(--sp-accent); border-color: var(--sp-accent); color: #FFFFFF; }

/* --- Вкладки и сегменты --- */
.tabs { border-bottom-color: var(--sp-line); gap: var(--sp-space-5); }
.tab {
  font-size: var(--sp-text-ui);
  font-weight: var(--sp-weight-medium);
  letter-spacing: 0;
  color: var(--sp-mid);
  border-bottom-width: 2px;
}
.tab:hover { color: var(--sp-ink); }
.tab.is-active { color: var(--sp-accent); border-bottom-color: var(--sp-accent); }
.seg {
  border: 1px solid var(--sp-line-2);
  border-radius: var(--sp-radius-pill);
  background: var(--sp-card);
  padding: 3px;
  gap: 2px;
}
.seg__item + .seg__item { border-left: 0; }
.seg__label {
  border-radius: var(--sp-radius-pill);
  min-height: 30px;
  font-size: var(--sp-text-ui);
  font-weight: var(--sp-weight-regular);
  letter-spacing: 0;
  color: var(--sp-mid);
}
.seg__item:hover .seg__label { background: var(--sp-sink); color: var(--sp-ink); }
.seg__item input:checked ~ .seg__label { background: var(--sp-accent); color: #FFFFFF; }

/* --- Таблица: радиус 20, белый лист --- */
.table-wrap {
  background: var(--sp-card);
  border-radius: var(--sp-radius-2xl);
  box-shadow: var(--sp-shadow);
  padding: var(--sp-space-3) var(--sp-space-5);
}
.table { font-size: var(--sp-text-ui); }
.table thead th {
  font-size: var(--sp-text-meta);
  font-weight: var(--sp-weight-medium);
  letter-spacing: 0;
  color: var(--sp-dim);
  padding-top: var(--sp-space-3);
}
.table tbody td { border-bottom-color: var(--sp-line); color: var(--sp-mid); }
.table__name { color: var(--sp-ink); font-weight: var(--sp-weight-medium); }
.bar { border-radius: var(--sp-radius-pill); background: var(--sp-sink); }
.bar__fill { background: var(--sp-accent); border-radius: var(--sp-radius-pill); }
.bar__value { font-size: var(--sp-text-meta); font-family: var(--sp-mono); color: var(--sp-ink); }

/* --- Строка списка: высота 72 --- */
.row-item {
  min-height: var(--sp-row-height);
  align-items: center;
  gap: var(--sp-space-4);
  padding: var(--sp-space-3) 0;
  border-bottom-color: var(--sp-line);
}
.row-item__name { font-size: var(--sp-text-body); font-weight: var(--sp-weight-medium); color: var(--sp-ink); }
.row-item__meta { font-size: var(--sp-text-meta); color: var(--sp-dim); }
.row-item__note { font-size: var(--sp-text-ui); }
.own-item { min-height: var(--sp-row-height); border-bottom-color: var(--sp-line); }
.own-item__name { font-size: var(--sp-text-ui); font-weight: var(--sp-weight-medium); }
.source__name { font-size: var(--sp-text-body); font-weight: var(--sp-weight-medium); color: var(--sp-ink); }
.source__meta, .source__note, .own-item__note, .own-empty { font-size: var(--sp-text-meta); color: var(--sp-dim); letter-spacing: 0; }

/* --- Доска воронки: колонка 266, радиус 18 --- */
.board { gap: var(--sp-space-4); }
.board__col {
  flex: 0 0 var(--sp-board-column);
  width: var(--sp-board-column);
  background: var(--sp-sink);
  border-radius: var(--sp-radius-xl);
  padding: var(--sp-space-3);
}
.board__col.is-over { background: var(--sp-accent-soft); box-shadow: inset 0 0 0 2px var(--sp-accent); }
.board__head { border-bottom: 0; padding: 2px 4px var(--sp-space-3); }
.board__title { font-size: var(--sp-text-ui); font-weight: var(--sp-weight-medium); letter-spacing: 0; color: var(--sp-ink); }
.board__count { color: var(--sp-dim); font-weight: var(--sp-weight-medium); }
.board__list { padding-top: 0; gap: var(--sp-space-2); }
.board__empty { font-size: var(--sp-text-meta); color: var(--sp-dim); padding: var(--sp-space-3) 4px; }
.board__add {
  border-radius: var(--sp-radius-xl);
  border-color: var(--sp-line-2);
  font-size: var(--sp-text-ui);
  letter-spacing: 0;
  color: var(--sp-dim);
}
.board__add:hover { border-color: var(--sp-accent); color: var(--sp-accent); }
.board__title-input { border-radius: 0; border-color: var(--sp-line-2); font-size: var(--sp-text-ui); letter-spacing: 0; }
.col-act { border-radius: 0; }
.col-act:hover { color: var(--sp-accent); border-color: var(--sp-accent); }
.col-act--danger:hover { color: var(--sp-bad); border-color: var(--sp-bad); }

/* карточка лида: радиус 14, белая, одна тень */
.pcard {
  background: var(--sp-card);
  border: 0;
  border-left: 0;
  border-radius: var(--sp-radius-lg);
  box-shadow: var(--sp-shadow);
  padding: var(--sp-space-3);
}
.pcard:hover { box-shadow: 0 1px 2px rgba(21,23,26,.06), 0 14px 30px -14px rgba(21,23,26,.22); }
.pcard.is-silent { box-shadow: var(--sp-shadow), inset 3px 0 0 var(--sp-bad); }
.pcard__nick { font-size: var(--sp-text-ui); font-weight: var(--sp-weight-medium); color: var(--sp-ink); }
.pcard__meta, .pcard__task { font-size: var(--sp-text-meta); color: var(--sp-dim); }
.pcard__task.is-late { color: var(--sp-bad); }
.pcard__task.is-today { color: var(--sp-accent); }
.ava { background: var(--sp-accent); color: #FFFFFF; font-family: var(--sp-mono); font-size: var(--sp-text-meta); }

/* --- Модалка, шторка, тост --- */
.modal { border-radius: var(--sp-radius-2xl); background: var(--sp-card); box-shadow: var(--shadow-overlay); }
.modal__title { font-size: var(--sp-text-h2); letter-spacing: var(--sp-tracking-h2); }
.modal__close { border-radius: 50%; width: 30px; height: 30px; border-color: var(--sp-line-2); color: var(--sp-mid); }
.modal__close:hover { background: var(--sp-sink); }
.side-panel { width: var(--sp-lead-panel); background: var(--sp-card); box-shadow: var(--shadow-overlay); }
.side-panel__title { font-size: var(--sp-text-h2); letter-spacing: var(--sp-tracking-h2); }
.toast {
  border-radius: var(--sp-radius-lg);
  border-left: 0;
  box-shadow: var(--shadow-overlay);
  background: var(--sp-card);
  font-size: var(--sp-text-ui);
  border-top: 3px solid var(--sp-accent);
}
.toast--ok { border-top-color: var(--sp-ok); }
.toast--warn { border-top-color: var(--sp-warn); }
.toast--error { border-top-color: var(--sp-bad); }
.toast__title { font-size: var(--sp-text-meta); letter-spacing: 0; color: var(--sp-ink); }
.notice {
  padding: var(--sp-space-3) var(--sp-space-4);
  border-left: 0;
  border-radius: var(--sp-radius-md);
  background: var(--sp-accent-soft);
  color: var(--sp-mid);
  font-size: var(--sp-text-ui);
}
.notice--ok { background: var(--sp-ok-soft); color: var(--sp-ok); }
.notice--warn { background: var(--sp-warn-soft); color: var(--sp-warn); padding-right: var(--sp-space-4); }
.notice--error { background: var(--sp-bad-soft); color: var(--sp-bad); padding-right: var(--sp-space-4); }
.notice--gold { background: var(--sp-accent-soft); color: var(--sp-mid); }
.notice__title { font-size: var(--sp-text-meta); letter-spacing: 0; }

/* --- Пустое состояние, прогресс --- */
.empty__mark { background: var(--sp-accent-soft); color: var(--sp-accent); }
.empty--error .empty__mark { background: var(--sp-bad-soft); color: var(--sp-bad); }
.empty__title { font-size: var(--sp-text-h2); letter-spacing: var(--sp-tracking-h2); }
.empty__text { font-size: var(--sp-text-ui); color: var(--sp-dim); }
.progress { height: 6px; border-radius: var(--sp-radius-pill); background: var(--sp-sink); }
.progress__fill { background: var(--sp-accent); border-radius: var(--sp-radius-pill); }
.progress--navy .progress__fill { background: var(--sp-accent-mid); }
.task__name { font-size: var(--sp-text-ui); letter-spacing: 0; }
.task__pct { font-size: var(--sp-text-num-m); }
.task__step.is-done::before { color: var(--sp-ok); }
.task__step.is-active::before { color: var(--sp-accent); }
.sticky-panel { background: var(--sp-paper); border-bottom-color: var(--sp-line); }
.sticky-panel__pct { font-size: var(--sp-text-num-l); color: var(--sp-ink); }

/* --- Крупные числа --- */
.metric__value { font-size: var(--sp-text-num-xl); color: var(--sp-ink); font-weight: var(--sp-weight-bold); }
.metric__label { font-size: var(--sp-text-meta); letter-spacing: 0; color: var(--sp-dim); }
.mini__value { font-size: var(--sp-text-num-m); color: var(--sp-ink); }
.mini__label { font-size: var(--sp-text-meta); letter-spacing: 0; color: var(--sp-dim); }
.mini__value--up { color: var(--sp-ok); }
.mini__value--down { color: var(--sp-bad); }

/* --- Выдача экспертов --- */
.xpert {
  background: var(--sp-card);
  border-radius: var(--sp-radius-2xl);
  box-shadow: var(--sp-shadow);
  padding: var(--sp-space-5);
  margin-bottom: var(--sp-space-4);
}
.xpert + .xpert { padding-top: var(--sp-space-5); border-top: 0; }
.xpert__name { font-size: var(--sp-text-h2); letter-spacing: var(--sp-tracking-h2); }
.xpert__name a { color: var(--sp-ink); border-bottom: 0; }
.xpert__name a:hover { color: var(--sp-accent); }
.xpert__meta { font-size: var(--sp-text-meta); color: var(--sp-dim); }
.xpert--quiet, .xpert--mono { background: var(--sp-card); }
.score {
  width: 82px;
  border-radius: var(--sp-radius-lg);
  background: var(--sp-accent-soft);
  padding: var(--sp-space-2) 0;
}
.score__num { font-size: var(--sp-text-num-l); color: var(--sp-accent); font-weight: var(--sp-weight-bold); }
.score__label { font-size: var(--sp-text-micro); letter-spacing: 0; color: var(--sp-dim); }
.score--ok { background: var(--sp-ok-soft); }
.score--ok .score__num { color: var(--sp-ok); }
.score--ok .score__label { color: var(--sp-ok); }
.score--warn { background: var(--sp-warn-soft); }
.score--warn .score__num { color: var(--sp-warn); }
.score--warn .score__label { color: var(--sp-warn); }
.score--quiet { background: var(--sp-sink); }
.score--quiet .score__num { color: var(--sp-dim); }
.score--verdict { width: 118px; }
.count-line { font-size: var(--sp-text-ui); color: var(--sp-dim); }
.count-line b { color: var(--sp-ink); }
.toolbar { border-bottom-color: var(--sp-line); }
.toolbar__label { font-size: var(--sp-text-meta); letter-spacing: 0; color: var(--sp-dim); }
.select--inline { min-height: 32px; border-radius: var(--sp-radius-pill); padding: 2px 30px 2px 14px; }
.bulk {
  background: var(--sp-accent-soft);
  border-left: 0;
  border-radius: var(--sp-radius-lg);
  font-size: var(--sp-text-ui);
  color: var(--sp-ink);
}
.collapse { border-top-color: var(--sp-line); }
.collapse > summary { font-size: var(--sp-text-ui); letter-spacing: 0; color: var(--sp-ink); }
.collapse > summary::before { color: var(--sp-accent); }
.collapse > summary:hover { color: var(--sp-accent); }
.collapse__note { font-size: var(--sp-text-meta); color: var(--sp-dim); }

/* --- Прочие блоки --- */
.quote {
  background: var(--sp-sink);
  border-left: 3px solid var(--sp-accent);
  border-radius: 0 var(--sp-radius-md) var(--sp-radius-md) 0;
  font-size: var(--sp-text-ui);
  color: var(--sp-mid);
}
.kv__k { font-size: var(--sp-text-meta); letter-spacing: 0; color: var(--sp-dim); }
.kv__v { font-size: var(--sp-text-ui); color: var(--sp-ink); }
.spec__key { font-size: var(--sp-text-meta); letter-spacing: 0; color: var(--sp-dim); }
.spec__val { font-size: var(--sp-text-ui); }
.spec__row { border-bottom-color: var(--sp-line); }
.token { border-radius: var(--sp-radius-sm); border-color: var(--sp-line-2); background: var(--sp-sink); font-size: var(--sp-text-meta); }
.step, .sec, .sources, .own-list, .collapse { border-top-color: var(--sp-line); }
.step__num { border-radius: 50%; background: var(--sp-accent); color: #FFFFFF; font-family: var(--sp-mono); font-size: var(--sp-text-ui); }
.step__title { font-size: var(--sp-text-h2); letter-spacing: var(--sp-tracking-h2); }
.step__sub, .sec__title, .flow__name { letter-spacing: 0; }
.sec__title { font-size: var(--sp-text-ui); font-weight: var(--sp-weight-medium); }
.sec__num, .flow__num, .variant__no, .steps__num { color: var(--sp-accent); font-size: var(--sp-text-num-m); }
.steps > li { border-bottom-color: var(--sp-line); }
.steps__num { border-right-color: var(--sp-line); }
.flow__item { border-left-color: var(--sp-line-2); }
.flow__item:hover { border-left-color: var(--sp-accent); }
.flow__item.is-done { border-left-color: var(--sp-ok); }
.flow__item.is-todo { border-left-color: var(--sp-warn); }
.flow__state { font-size: var(--sp-text-meta); letter-spacing: 0; }
.flow__item.is-done .flow__state { color: var(--sp-ok); }
.flow__item.is-todo .flow__state { color: var(--sp-warn); }
.profile-card { background: var(--sp-sink); border-left: 0; border-radius: var(--sp-radius-lg); }
.profile-card__name { font-size: var(--sp-text-h2); letter-spacing: var(--sp-tracking-h2); }
.profile-card__nick { font-family: var(--sp-mono); font-size: var(--sp-text-meta); color: var(--sp-accent); }
.variant { border-left-color: var(--sp-line); }
.variant.is-current { border-left-color: var(--sp-accent); }
.build, .voice, .rec { background: var(--sp-sink); border-left: 0; border-radius: var(--sp-radius-lg); }
.voice.is-recording { background: var(--sp-bad-soft); }
.voice.is-recording .voice__bars i { background: var(--sp-accent); }
.rec__btn { background: var(--sp-accent); }
.rec__btn:hover { background: #163C6B; }
.rec__btn--stop { background: var(--sp-bad); }
.rec__level { background: var(--sp-accent); }
.rec.is-recording .rec__level { background: var(--sp-bad); }
.rec__wave { background: var(--sp-line-2); }
.conv__bar { background: var(--sp-accent); }
.conv__bar-wrap { background: var(--sp-sink); }
.conv__drop { color: var(--sp-bad); }
.conv th { font-size: var(--sp-text-meta); letter-spacing: 0; color: var(--sp-dim); }
.pick, .preset { border-radius: var(--sp-radius-lg); border-color: var(--sp-line-2); background: var(--sp-card); }
.pick:hover, .preset:hover { border-color: var(--sp-accent); }
.pick.is-active, .preset.is-active { border-color: var(--sp-accent); box-shadow: 0 0 0 1px var(--sp-accent); background: var(--sp-card); }
.pick__title { font-size: var(--sp-text-ui); letter-spacing: 0; }
.preset__mark { color: var(--sp-accent); }
.preset__cap, .pick__hint, .preset__hint { font-size: var(--sp-text-meta); letter-spacing: 0; color: var(--sp-dim); }
.kp-swatch__dot, .swatch, .pal__dot { border-radius: var(--sp-radius-sm); border-color: var(--sp-line-2); }
.kp-swatch input:checked + .kp-swatch__dot { outline-color: var(--sp-accent); }
.swatch.is-active { border-color: var(--sp-accent); }
.overline { font-size: var(--sp-text-meta); letter-spacing: 0; color: var(--sp-dim); }
.overline--accent, .accent { color: var(--sp-accent); }
.label { font-size: var(--sp-text-label); letter-spacing: 0; color: var(--sp-mid); }
.muted { color: var(--sp-dim); }
.num-mark { background: var(--sp-accent-soft); color: var(--sp-accent); border-radius: 0; }
.theme-light-mark, .num-mark--light { box-shadow: inset 0 -2px 0 var(--sp-accent-soft); color: var(--sp-ink); }
.bullets--fit > li::before { color: var(--sp-accent); }
.bullets--risk > li::before { color: var(--sp-mid); }
.bullets--check > li::before { color: var(--sp-ok); }
.verdict__title { border-bottom-color: var(--sp-line); letter-spacing: 0; font-size: var(--sp-text-meta); }
.verdict__title--fit { color: var(--sp-accent); }
.verdict__title--risk { color: var(--sp-mid); }
.strip, .cta-strip { background: var(--sp-accent); color: #FFFFFF; border-radius: var(--sp-radius-lg); letter-spacing: 0; }
.skeleton__line { border-radius: var(--sp-radius-sm); }
.guide__shot { border-radius: var(--sp-radius-md); border-color: var(--sp-line); }
.task-row + .task-row { border-top-color: var(--sp-line); }
.task-row__date { font-size: var(--sp-text-meta); color: var(--sp-dim); font-family: var(--sp-mono); }
.task-row.is-late .task-row__date { color: var(--sp-bad); }
.task-row.is-today .task-row__date { color: var(--sp-accent); }
.filerow__name { font-size: var(--sp-text-ui); }
.cover { border-radius: var(--sp-radius-2xl); }
.hairline, hr { border-top-color: var(--sp-line); }
.hairline--gold { border-top-color: var(--sp-line-2); }

/* --- Вход: тёмная обложка на новой палитре --- */
.auth { background: #0E1013; }
.auth__mark { font-size: 34px; letter-spacing: var(--sp-tracking-tight); }
.auth__lead { font-size: var(--sp-text-body); color: #B4BBC3; }
.auth__facts { font-size: var(--sp-text-meta); letter-spacing: 0; color: #B4BBC3; }
.auth__foot { font-size: var(--sp-text-meta); color: #B4BBC3; }
.theme-dark .card { background: #16191D; border-radius: var(--sp-radius-2xl); box-shadow: none; }
.theme-dark .btn--primary { background: #6E9FD8; border-color: #6E9FD8; color: #0E1013; }
.theme-dark .btn--primary:hover { background: #8AB4E4; border-color: #8AB4E4; }
.theme-dark .btn--secondary { background: transparent; color: #ECEEF0; border-color: rgba(236,238,240,.30); }
.theme-dark .btn--secondary:hover { background: rgba(236,238,240,.08); color: #ECEEF0; }
.theme-dark .input, .theme-dark .textarea, .theme-dark .select {
  background: rgba(255,255,255,.05);
  border-color: rgba(236,238,240,.20);
  color: #ECEEF0;
}
.theme-dark .notice { background: rgba(110,159,216,.13); color: #ECEEF0; }
.theme-dark .notice--error { background: rgba(220,130,114,.14); color: #DC8272; }
.theme-dark .notice--warn { background: rgba(210,160,84,.14); color: #D2A054; }
.theme-dark .field__label { color: #B4BBC3; }
.theme-dark .field__error { color: #DC8272; }

/* --- Мобильная раскладка --- */
@media (max-width: 760px) {
  .app-main { padding: var(--sp-space-5) var(--sp-space-4) var(--sp-space-8); }
  .app-sidebar { width: 258px; box-shadow: var(--shadow-overlay); }
  .card, .xpert { padding: var(--sp-space-4); border-radius: var(--sp-radius-xl); }
  .table-wrap { padding: var(--sp-space-2) var(--sp-space-4); border-radius: var(--sp-radius-xl); }
  .board__col { flex: 1 1 auto; width: 100%; }
  .side-panel { width: 100%; }
  .row-item { min-height: 0; }
}
@media (max-width: 420px) {
  :root { --pad-boxed: var(--sp-space-4); }
  .page-title { font-size: 23px; }
  .btn { font-size: var(--sp-text-meta); padding: 0 14px; }
}

/* Остатки старых оттенков в редких состояниях — на новую палитру */
.rec__btn--stop:hover { background: #8A3324; }
.btn--danger:active { background: var(--sp-bad-soft); }


/* Тёмный контекст (вход, тёмные блоки витрины): надзаголовок, акцент и бейджи
   брали светлые токены и тонули на тёмном фоне — 2.3–3.3:1 (проверка 16.09.2026). */
.theme-dark .overline { color: #A9B2BC; }
.theme-dark .accent { color: #6E9FD8; }
.theme-dark .badge-outline { color: #ECEEF0; border-color: rgba(236,238,240,.42); }
.theme-dark .badge-outline b { color: #6E9FD8; }