/* ============================================================
   OBLIK — облик панели: тема «уголь», полоса-меню, метки.

   Принят человеком 12.09.2026. Донор приёмов — панель 3x-ui его VPN-сервера
   (`design-system/donors/3x-ui-panel/2026-09-12/`), макет и разбор —
   `b2b-radar/dizayn-panel-2026-09-12/`.

   Подключается ПОСЛЕДНИМ, после vkus.css и vkus-lending.css: здесь только
   переопределения. Светлый слой не тронут — тема включается классом `ugol`
   на теле, и класс ставится лишь вошедшему. Лендинг входа остаётся светлым:
   у него своя композиция (`vkus-lending.css`), и тёмный корпус там ни к чему.

   Три приёма донора, ради которых всё это:
   1. Полоса-меню 72px, выезжающая оверлеем без сдвига контента.
   2. Метка = тёмная подложка тона + насыщенный текст того же тона, и тон
      закреплён за ОСЬЮ колонки, а не за строкой.
   3. Состояние — точка со словом, а не заливка ячейки: цветная плашка
      оставлена одной оси, иначе таблица превращается в рябь (замер приёмки
      07.09.2026: 18 акцентных пятен при доле площади 1,2%).
   ============================================================ */

/* ---------- 1. Тема «уголь» ----------
   Переопределяются токены Nova на том же элементе, где vkus.css объявляет мост
   `--dt-*`: мост собран из `var(--nv-*)`, поэтому считается по этому же элементу
   и подхватывает значения ниже. Отдельно объявлять `--dt-*` не нужно. */
.nv-body.ugol{
  --nv-bg:#17181C;
  --nv-bg-deep:#121316;
  --nv-surface:#23252B;
  --nv-surface-2:#1E2025;
  --nv-text:rgba(255,255,255,.88);
  --nv-text-muted:rgba(255,255,255,.66);
  --nv-text-dim:rgba(255,255,255,.45);

  --nv-accent:#9B9FEA;
  --nv-accent-glow:rgba(155,159,234,.20);
  /* Заливка под светлой надписью — НЕ акцент: акцент подобран как текст и под
     белой надписью даёт 3.11 при норме 4.5 (поймано приёмкой 12.09.2026).
     Здесь на две ступени темнее: контраст 6.80. */
  --nv-surface-ink:#4448BE;
  --nv-on-ink:#F8F8FC;
  --nv-on-accent:#F8F8FC;

  --nv-success:#6FC98F;
  --nv-warning:#DDA64A;
  --nv-danger:#EE8B80;

  --nv-field:#1E2025;
  --nv-border:rgba(255,255,255,.09);
  --nv-border-strong:rgba(255,255,255,.18);

  /* Тона меток: подложка почти чёрная, насыщенность держит текст. Все пары
     проверены на контраст ≥ 4.5 скриптом 12.09.2026. */
  --mtk-green-bg:#152318;   --mtk-green-fg:#6FC98F;
  --mtk-amber-bg:#241C0E;   --mtk-amber-fg:#DDA64A;
  --mtk-red-bg:#2A1614;     --mtk-red-fg:#EE8B80;
  --mtk-indigo-bg:#1D1B33;  --mtk-indigo-fg:#9B9FEA;
  --mtk-slate-bg:#26272C;   --mtk-slate-fg:#B6B6BF;
  --mtk-blue-bg:#111C2E;    --mtk-blue-fg:#79B0F0;
  --mtk-teal-bg:#10221F;    --mtk-teal-fg:#63C3B9;
  --mtk-magenta-bg:#271426; --mtk-magenta-fg:#E58AB8;

  background:var(--nv-bg);
  color:var(--nv-text);
}

/* Светлая половина тех же тонов — чтобы метки работали и без темы «уголь»
   (страницы до входа, печать, откат темы одним классом). */
.nv-body{
  --mtk-green-bg:#E8F5EC;   --mtk-green-fg:#1F6B41;
  --mtk-amber-bg:#FAF0DE;   --mtk-amber-fg:#75490E;
  --mtk-red-bg:#FAE9E6;     --mtk-red-fg:#A32C24;
  --mtk-indigo-bg:#EDEDFA;  --mtk-indigo-fg:#3F43A8;
  --mtk-slate-bg:#EFEFF2;   --mtk-slate-fg:#494851;
  --mtk-blue-bg:#E7F0FC;    --mtk-blue-fg:#1C56A3;
  --mtk-teal-bg:#E2F2F0;    --mtk-teal-fg:#175F58;
  --mtk-magenta-bg:#FAE8F0; --mtk-magenta-fg:#96275E;
}

.ugol .nv-card,
.ugol .nv-panel{
  /* блик верхней кромки вместо светлой тени — приём донора */
  box-shadow:0 1px 2px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.03);
}

/* ---------- 2. Оболочка: полоса-меню и холст ---------- */
.app{display:flex; min-height:100vh}

/* Распорка держит место в потоке; сама полоса вынута из него и выезжает поверх.
   Анимируется clip-path, а не width: у донора width пересчитывает раскладку на
   каждом кадре. */
.rail-mesto{flex:0 0 auto; width:72px; min-width:72px}
.rail{
  position:fixed; top:0; left:0; height:100vh; width:236px;
  background:#15161A; color:rgba(255,255,255,.62);
  display:flex; flex-direction:column; z-index:30; overflow:hidden;
  clip-path:inset(0 164px 0 0);
  transition:clip-path .2s cubic-bezier(.645,.045,.355,1),
             box-shadow .2s cubic-bezier(.645,.045,.355,1);
}
/* Раскрытие держит наведение — и отдельным правилом клавиатура. `:focus-within`
   был бы дефектом: клик мышью оставляет фокус на пункте, и полоса не закрывалась
   бы после увода курсора (поймано человеком 12.09.2026). Правила разделены
   намеренно — в общем списке селекторов непонятый браузером `:has()` отбросил бы
   вместе с собой и `:hover`. */
.rail:hover{clip-path:inset(0); box-shadow:0 14px 40px rgba(0,0,0,.5)}
.rail:has(:focus-visible){clip-path:inset(0); box-shadow:0 14px 40px rgba(0,0,0,.5)}

.rail__znak{
  display:flex; align-items:center; gap:12px; flex:0 0 auto;
  height:56px; padding:0 24px; color:#F6F7FB; text-decoration:none;
  font-weight:600; letter-spacing:.02em; white-space:nowrap;
}
.rail__znak svg{flex:0 0 auto; width:24px; height:24px}
.rail__znak em{font-style:normal; font-weight:500; color:rgba(255,255,255,.5)}
/* в покое из-под обрезки видна только засечка, а не огрызок слова */
.rail__znak span{opacity:0; transition:opacity .2s cubic-bezier(.645,.045,.355,1)}
.rail:hover .rail__znak span{opacity:1}
.rail:has(:focus-visible) .rail__znak span{opacity:1}

/* `.nav` внутри полосы становится колонкой. Класс оставлен прежним намеренно:
   порядок пунктов заперт tests/test_sayt.py::test_spravka_pervaya_v_shapke,
   который ищет ровно `<nav class="nav">`. */
.rail .nav{
  flex-direction:column; align-items:stretch; gap:2px;
  flex:1 1 auto; overflow-y:auto; overflow-x:hidden; margin-top:10px;
}
.rail .nav a,
.rail__p{
  display:flex; align-items:center; gap:14px;
  height:40px; padding:0 24px; color:inherit; text-decoration:none;
  white-space:nowrap; border-left:2px solid transparent;
  background:none; border-top:0; border-right:0; border-bottom:0;
  width:100%; font:inherit; font-size:14px; text-align:left; cursor:pointer;
  transition:color .2s cubic-bezier(.645,.045,.355,1),
             background-color .2s cubic-bezier(.645,.045,.355,1);
}
.rail .nav a svg,
.rail__p svg{flex:0 0 auto; width:20px; height:20px}
.rail .nav a:hover,
.rail__p:hover{color:#F6F7FB; background:rgba(255,255,255,.06)}
.rail .nav a[aria-current="page"]{
  color:#F6F7FB; background:rgba(155,159,234,.20); border-left-color:#9B9FEA;
}
.rail .nav a span,
.rail__p span{opacity:0; transition:opacity .2s cubic-bezier(.645,.045,.355,1)}
.rail:hover .nav a span,
.rail:hover .rail__p span{opacity:1}
.rail:has(:focus-visible) .nav a span,
.rail:has(:focus-visible) .rail__p span{opacity:1}

.rail__niz{flex:0 0 auto; padding:10px 0 14px; border-top:1px solid rgba(255,255,255,.08)}
.rail__niz form{margin:0}
.rail__versiya{
  padding:8px 24px 0; font-size:11px; color:rgba(255,255,255,.35);
  white-space:nowrap; opacity:0; transition:opacity .2s cubic-bezier(.645,.045,.355,1);
}
.rail:hover .rail__versiya{opacity:1}
.rail:has(:focus-visible) .rail__versiya{opacity:1}

/* Холст: контенту отдаётся почти всё окно, поэтому ограничение ширины снимается —
   рабочая часть это таблицы, им нужна ширина, а не колонка для чтения. */
.hol{flex:1 1 auto; min-width:0; display:flex; flex-direction:column}
.hol > .wrap,
.hol .wrap{max-width:none; margin:0; padding:0}
.hol__telo{padding:20px 24px 56px; display:flex; flex-direction:column; gap:16px}

/* ---------- Шапка холста ----------
   Имя экрана, состояние системы и одно главное действие. Заголовки переехали сюда из
   карточек: страница начиналась плитой с надзаголовком и большим заголовком, и до данных
   оставалась половина экрана. Липкая, потому что пульс ПК и имя экрана нужны и на
   прокрутке — панель длинная. */
.hol__top{
  position:sticky; top:0; z-index:25;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:13px 24px; background:var(--nv-bg);
  border-bottom:1px solid var(--nv-border);
}
.hol__imya{display:flex; flex-direction:column; gap:1px; min-width:0; margin-right:auto}
.hol__imya h1{
  margin:0; font-size:19px; font-weight:600; letter-spacing:-.01em; line-height:1.2;
  font-family:inherit; text-transform:none;
}
.hol__imya p{margin:0; font-size:12px; color:var(--nv-text-dim)}
.hol__top form{margin:0}
.puls{
  display:flex; align-items:center; gap:8px; white-space:nowrap;
  font-size:12px; color:var(--nv-text-muted);
}
.puls b{font-weight:600; color:var(--nv-text)}

/* Карта автосборки — то, что осталось от прежней карточки-шапки. */
.panel-sborka .avtosborka{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:8px}
/* Поиск и фильтры над таблицей, которой они управляют. */
.tabl-upravlenie{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin:10px 0 12px;
}
.tabl-upravlenie .poisk{margin:0; flex:1 1 260px; max-width:380px}
.tabl-upravlenie .poisk .nv-input{min-width:0}
.tabl-upravlenie .filtry{margin:0}
/* Строка стадий в плитке исходов: те же поля, что у факта метрики.
   Прежняя разметка исходов была полосой ПЛИТОК — `.itogi span` в vkus.css несёт рамку,
   поля 12×14 и число кеглем 26. Внутри карточки они выросли в пять вложенных боксов и
   растянули весь ряд метрик до 470px по высоте (поймано снимком 12.09.2026). Гасим
   плитку явно: сетка становится строкой, а число — обычным полужирным. */
.metrika .itogi{
  display:flex; flex-wrap:wrap; gap:2px 10px; margin:5px 0 0;
  font-size:12.5px; color:var(--nv-text-muted);
}
.metrika .itogi span{
  display:inline; flex-direction:row; align-items:baseline; text-align:left;
  padding:0; border:0; background:transparent; box-shadow:none;
  font-size:12.5px; letter-spacing:0; text-transform:none; font-weight:400;
  color:inherit; line-height:1.5; gap:0;
}
.metrika .itogi b{
  font-size:12.5px; line-height:inherit; letter-spacing:0;
  font-weight:600; color:var(--nv-text);
}

/* ---------- 3. Метка: тон закреплён за осью колонки ----------
   Селекторы бьют `main .nv-pill` из vkus.css: там 0,1,1, здесь 0,2,1. */
.nv-body main .nv-pill,
.nv-body .nv-panel .nv-pill{
  display:inline-flex; align-items:center; gap:5px;
  height:21px; padding:0 7px; border-radius:4px;
  font-size:12px; line-height:20px; letter-spacing:0; text-transform:none;
  border:0; box-shadow:none;
  background:var(--mtk-slate-bg); color:var(--mtk-slate-fg);
}
.nv-body main .nv-pill--success{background:var(--mtk-green-bg); color:var(--mtk-green-fg)}
.nv-body main .nv-pill--warning{background:var(--mtk-amber-bg); color:var(--mtk-amber-fg)}
.nv-body main .nv-pill--danger{background:var(--mtk-red-bg); color:var(--mtk-red-fg)}

/* Порог — та ось, за которой оставлен цвет: «выше порога» читается плашкой. */
.nv-body main td[data-st="Порог"] .nv-pill--success{
  background:var(--mtk-indigo-bg); color:var(--mtk-indigo-fg);
}

/* ---------- 4. Состояние — точка со словом ----------
   Статус и решение перестают быть плашками: иначе в строке их четыре. */
.nv-body main td[data-st="Статус"] .nv-pill,
.nv-body main td[data-st="Решение"] .nv-pill{
  background:transparent; color:var(--nv-text); padding-left:0; padding-right:0;
  --tochka:var(--nv-text-dim);
}
.nv-body main td[data-st="Статус"] .nv-pill::before,
.nv-body main td[data-st="Решение"] .nv-pill::before{
  content:""; flex:0 0 auto; width:8px; height:8px; border-radius:50%;
  background:var(--tochka);
}
.nv-body main td[data-st="Статус"] .nv-pill--success,
.nv-body main td[data-st="Решение"] .nv-pill--success{--tochka:var(--nv-success)}
.nv-body main td[data-st="Статус"] .nv-pill--warning,
.nv-body main td[data-st="Решение"] .nv-pill--warning{--tochka:var(--nv-warning)}
.nv-body main td[data-st="Статус"] .nv-pill--danger,
.nv-body main td[data-st="Решение"] .nv-pill--danger{--tochka:var(--nv-danger)}
/* «Без исхода» в выдачах — предупреждение, а не состояние строки: плашка остаётся. */
.nv-body main td[data-st="Без исхода"] .nv-pill--warning{
  background:var(--mtk-amber-bg); color:var(--mtk-amber-fg); padding:0 7px;
}
.nv-body main td[data-st="Без исхода"] .nv-pill--warning::before{content:none}

/* ---------- 5. Фильтры: выбранный залит чернилами ----------
   В шаблонах выбранный фильтр помечен тем же классом, что «успех», — но выбор
   это не успех, и зелёная плашка среди статусов читается как оценка. */
.nv-body .filtry{gap:6px; border-top:0; padding-top:0}
.nv-body .filtry .nv-pill{
  height:26px; padding:0 10px; border-radius:100px;
  border:1px solid var(--nv-border); background:var(--nv-surface-2);
  color:var(--nv-text-muted); font-size:12.5px; letter-spacing:0;
  text-transform:none; box-shadow:none;
}
.nv-body .filtry .nv-pill:hover{color:var(--nv-text); border-color:var(--nv-border-strong)}
.nv-body .filtry .nv-pill--success{
  background:var(--nv-surface-ink); border-color:transparent; color:var(--nv-on-ink);
}
.nv-body .filtry .nv-pill--success::before{content:none}

/* ---------- 6. Мобильная версия: полоса уезжает вниз ----------
   Пересборка, а не сжатие: полоса становится рядом иконок с подписями, как в
   приложении. Таблицы превращаются в карточки правилами sayt.css (≤720px). */
@media (max-width:760px){
  .app{flex-direction:column}
  .rail-mesto{display:none}
  .rail{
    position:fixed; top:auto; bottom:0; left:0; right:0;
    width:100%; min-width:0; height:auto; flex-direction:row; align-items:center;
    /* border-box обязателен: с `padding:0 4px` полоса считалась 383px при окне 375 —
       правый край уезжал за экран (замер 12.09.2026) */
    box-sizing:border-box; padding:0 4px; z-index:40; clip-path:none;
    box-shadow:0 -6px 20px rgba(0,0,0,.28);
  }
  .rail:hover,
  .rail:has(:focus-visible){clip-path:none}
  .rail__znak,.rail__niz,.rail__versiya{display:none}
  /* `nowrap` обязателен: `.nav` в sayt.css объявлен с `flex-wrap:wrap`, и семь
     пунктов по ~90px переносились в семь строк — полоса занимала весь экран
     столбцом (поймано снимком 375px 12.09.2026). Лишнее уезжает прокруткой
     внутри полосы, документ вбок не скроллит. */
  .rail .nav{flex-direction:row; flex-wrap:nowrap; margin:0; width:100%; overflow-x:auto}
  .rail .nav a{
    flex-direction:column; gap:3px; height:54px; padding:0 12px;
    border-left:0; border-bottom:2px solid transparent; font-size:10px;
    /* в колонке пункт был во всю ширину полосы — в ряду это растянуло бы один
       пункт на весь экран (поймано снимком 375px) */
    width:auto; flex:0 0 auto;
  }
  .rail .nav a[aria-current="page"]{border-left:0; border-bottom-color:#9B9FEA}
  .rail .nav a span{opacity:1}
  .hol__telo{padding:14px 14px 84px; gap:12px}
  .hol__top{padding:11px 14px}
  .hol__imya h1{font-size:17px}
}

/* ---------- 7. Плотность рабочей части ----------
   Найдено глазами на отрендеренных страницах 12.09.2026. Слой `press.css` даёт
   характер — дисплейные заголовки, моно в числах, — и он остаётся; но в панели
   заголовок на 40px и строка на 61px тратят экран, которого у таблицы и так нет.
   У донора плотность другая: кегль 12/14, ячейка 8px, контрол 32px. */
.hol .nv-h2{font-size:23px; line-height:1.15}
.hol h1.nv-h2{font-size:26px}
.hol .nv-card,
.hol .nv-panel{padding:14px 16px}
.hol .nv-card + .nv-card,
.hol .nv-panel + .nv-panel,
.hol .nv-dash > * + *{margin-top:16px}
.hol .nv-table th{padding:8px 10px}
.hol .nv-table td{padding:8px 10px}
.hol .rb-metka{margin-bottom:2px}

/* Метка набирается тем же шрифтом, что текст: моно из press.css растягивает её
   трекингом и превращает короткое слово в вывеску. */
.nv-body main .nv-pill,
.nv-body .nv-panel .nv-pill,
.nv-body .filtry .nv-pill{font-family:inherit}

/* Метка-абзац (предупреждение в воронке и выдачах) — не пилюля в строке:
   фиксированная высота 21px обрезала бы фразу. */
.nv-body main p.nv-pill{
  height:auto; display:block; white-space:normal; padding:7px 10px; line-height:1.45;
}

/* Колонку «Решение» облик НЕ трогает. Сетка 1fr 1fr и кнопки во всю ширину там
   стоят намеренно — с замерами и объяснением в vkus.css (08.09.2026): половинка
   рядом с пустотой читается как обрезанная, а `display:grid` на самом `<td>`
   вынимает ячейку из таблицы. Правка облика, ломающая это, стоила бы дороже
   своей пользы. */

/* Внутренняя навигация панели («Менеджеры · Компании · Исходы касаний») висела
   в пустоте над первой картой — становится строкой-подсказкой у верхней кромки. */
.hol .panel-nav{
  display:flex; flex-wrap:wrap; gap:14px; margin:0 0 14px; padding:0 2px;
  font-size:12.5px;
}
.hol .panel-nav a{color:var(--nv-text-dim); text-decoration:none}
.hol .panel-nav a:hover{color:var(--nv-text); text-decoration:underline}

/* ---------- 8. Роль на экране «Учётки» ----------
   Единственная цветная ось того экрана. Тон закреплён за ролью, а не за строкой:
   массовая роль (консультант) нейтральна, редкие права видны. */
.nv-body main .nv-pill.rb-rol--admin{background:var(--mtk-magenta-bg); color:var(--mtk-magenta-fg)}
.nv-body main .nv-pill.rb-rol--nablyudatel{background:var(--mtk-blue-bg); color:var(--mtk-blue-fg)}
.nv-body main .nv-pill.rb-rol--rukovoditel{background:var(--mtk-teal-bg); color:var(--mtk-teal-fg)}
.nv-body main .nv-pill.rb-rol--konsultant{background:transparent; color:var(--nv-text-muted); padding-left:0}
/* Колонка «Вход» — состояние, значит точка со словом; кнопка рядом остаётся кнопкой. */
.nv-body main td[data-st="Вход"] .nv-pill{
  background:transparent; color:var(--nv-text); padding-left:0; padding-right:0;
  --tochka:var(--nv-text-dim);
}
.nv-body main td[data-st="Вход"] .nv-pill::before{
  content:""; flex:0 0 auto; width:8px; height:8px; border-radius:50%; background:var(--tochka);
}
.nv-body main td[data-st="Вход"] .nv-pill--success{--tochka:var(--nv-success)}
.nv-body main td[data-st="Вход"] .nv-pill--danger{--tochka:var(--nv-danger)}
.nv-body main td[data-st="Вход"] form{display:inline-flex; margin-left:8px}

/* ---------- 9. Карточка метрики со спарклайном ----------
   Приём донора: число, его цена и его история в одной карточке. Кривая прижата к
   нижней кромке, подстрочники стоят НАД ней — пересечение текста и линии читается
   как грязь (поймано глазами 12.09.2026 на макете). */
.metriki{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:12px; margin:0 0 16px;
}
.metrika{
  position:relative; overflow:hidden; min-height:120px;
  display:flex; flex-direction:column; padding:14px 16px 0;
  background:var(--nv-surface); border:1px solid var(--nv-border);
  border-radius:var(--nv-r,12px);
  box-shadow:0 1px 2px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.03);
}
.metrika__im{
  font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--nv-text-dim);
}
.metrika__zn{display:flex; align-items:baseline; gap:5px; margin-top:6px}
.metrika__zn b{font-size:26px; font-weight:600; letter-spacing:-.02em; line-height:1}
.metrika__zn i{font-style:normal; font-size:13px; color:var(--nv-text-dim)}
.metrika__fakt{margin-top:5px; font-size:12.5px; color:var(--nv-text-muted)}
.metrika__kray{
  display:flex; justify-content:space-between; gap:10px; margin-top:auto;
  padding-bottom:40px; position:relative; z-index:1;
  font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--nv-text-dim);
}
.spark{
  position:absolute; left:0; right:0; bottom:0; width:100%; height:36px; display:block;
  opacity:.8;
}
.spark--indigo{color:var(--mtk-indigo-fg)}
.spark--green{color:var(--mtk-green-fg)}
.spark--amber{color:var(--mtk-amber-fg)}
.spark--red{color:var(--mtk-red-fg)}

@media (max-width:760px){
  .metriki{grid-template-columns:1fr 1fr; gap:8px}
  .metrika{min-height:104px; padding:12px 12px 0}
  .metrika__zn b{font-size:22px}
  /* подстрочники на 375 переносились в две строки и рвали ритм: на телефоне карточка
     отвечает числом и кривой, детализация — на большом экране */
  .metrika__kray{display:none}
  .metrika{padding-bottom:40px}
}
@media (max-width:360px){
  .metriki{grid-template-columns:1fr}
}

/* Карточка без кривой (доля выдач без исхода — у неё нет истории по дням) не должна
   держать под собой пустую полосу в 40px: место под спарклайн бронируется только там,
   где он есть. */
.metrika--bez-krivoy .metrika__kray{padding-bottom:14px}

/* ---------- 10. Ступени воронки ----------
   Полоса вместо строки таблицы: видно, насколько ступень уже первой, без чтения чисел.
   Полосы центрированы (13.09.2026, просьба человека): выровненные по левому краю, они
   читались как гистограмма — а ступени конверсии называются воронкой, и сужаться силуэт
   должен симметрично. Экран при этом не обещает больше, чем знает: ширина — та же доля
   от выданных, что и была, форма не добавляет данных.
   Заливка тихая, края держат кромки акцентом — иначе пять насыщенных полос подряд
   спорят друг с другом. */
.stupeni{display:flex; flex-direction:column; gap:2px}
.stup{
  display:grid; grid-template-columns:minmax(150px,1.1fr) minmax(120px,3fr) 104px;
  align-items:center; gap:14px; padding:7px 0;
  border-bottom:1px solid var(--nv-border);
}
.stup:last-child{border-bottom:0}
.stup__im{font-size:13.5px}
.stup__im small{display:block; color:var(--nv-text-dim); font-size:11.5px}
.stup__pol{
  position:relative; height:24px; border-radius:4px; overflow:hidden;
  background:var(--nv-surface-2);
}
/* `box-sizing` явный: две кромки по 2px на узкой ступени (1–2% от выданных) без него
   раздули бы полосу шире её доли — то есть соврали бы в бо́льшую сторону. */
.stup__pol i{
  position:absolute; left:50%; transform:translateX(-50%); top:0; bottom:0; display:block;
  box-sizing:border-box; min-width:6px;
  /* Первой строкой — фолбэк на тон метки: он есть во всех трёх темах и рисуется там,
     где браузер не знает `color-mix` (старые телефоны). Второй строкой — разбавленный
     акцент темы: в «угле» и «корпоративной» тон метки почти совпадал с жёлобом
     (#1D1B33 на #1E2025, #ECECF8 на #FBF7F1), и силуэт держался одними кромками. */
  background:var(--mtk-indigo-bg);
  background:color-mix(in srgb, var(--nv-accent) 20%, transparent);
  border-left:2px solid var(--nv-accent); border-right:2px solid var(--nv-accent);
}
/* Водопад (30.09.2026): ширина — доля от ПРЕДЫДУЩЕЙ ступени, поэтому силуэта воронки нет,
   и полоса стоит от левого края — это конверсия шага, а не сужение от выданных. */
.stupeni--vodopad .stup__pol i{left:0; transform:none}
.stupeni--vodopad .stup{grid-template-columns:minmax(150px,1.1fr) minmax(120px,3fr) 140px}
.stup__ch{text-align:right; font-variant-numeric:tabular-nums}
.stup__ch b{font-size:17px; font-weight:600}
.stup__ch small{display:block; color:var(--nv-text-dim); font-size:11.5px}

@media (max-width:760px){
  .stup, .stupeni--vodopad .stup{grid-template-columns:1fr; gap:6px}
  .stup__ch{text-align:left}
}

/* ---------- 11. Светлая секция внутри тёмной темы ----------
   `.vk-bumaga` (образец карточки в «Как это работает») переопределяет только ФОНЫ —
   `--nv-bg`, `--nv-surface`, — а цвет текста берёт с тела. На тёмной теме это дало
   светлые буквы на светлой бумаге: заголовок «Так выглядит карточка» и подписи стали
   почти невидимы (прислано человеком со боевого сайта 12.09.2026).

   Это ровно тот класс дефекта, что описан в правилах дизайн-системы: секция с локальной
   сменой поверхности не догоняет токены, объявленные на теле. Лечение — целиться
   селектором в саму секцию и вернуть ей весь светлый набор, а не только фон. */
.ugol .vk-bumaga{
  --nv-text:#1C1A19;
  --nv-text-muted:#4B4A50;
  --nv-text-dim:#6E6E78;
  --nv-border:rgba(28,26,25,.13);
  --nv-border-strong:rgba(28,26,25,.22);
  --nv-accent:#5B5FC7;
  --nv-accent-glow:rgba(91,95,199,.18);
  --nv-surface-ink:#4A4EB0;
  --nv-on-ink:#FFFFFE;
  --nv-on-accent:#FFFFFE;
  --nv-success:#2F7D4F;
  --nv-warning:#8A5A12;
  --nv-danger:#C0392B;
  --nv-field:#FFFFFE;

  /* метки внутри образца — светлой половиной тех же тонов */
  --mtk-green-bg:#E8F5EC;   --mtk-green-fg:#1F6B41;
  --mtk-amber-bg:#FAF0DE;   --mtk-amber-fg:#75490E;
  --mtk-red-bg:#FAE9E6;     --mtk-red-fg:#A32C24;
  --mtk-indigo-bg:#EDEDFA;  --mtk-indigo-fg:#3F43A8;
  --mtk-slate-bg:#EFEFF2;   --mtk-slate-fg:#494851;

  color:var(--nv-text);
}

/* ============================================================
   12. ТРИ ТЕМЫ И ПЕРЕКЛЮЧАТЕЛЬ (просьба человека 13.09.2026)

   «Уголь» — по умолчанию, «Корпоративная» — фирменный тон заказчика,
   «Бумага» — светлая. Выбор живёт в cookie и ставится формой: сайт работает
   без JS намеренно (хвост таблицы, фильтры, сортировка — ссылками и CSS), и
   тема, переживающая перезагрузку только в localStorage, у половины людей
   сбрасывалась бы молча.

   Светлая тема отдельного набора НЕ требует: это базовые токены Nova + vkus,
   то есть отсутствие класса на теле. Заводить ей пустой класс значило бы
   держать вторую копию тех же значений.
   ============================================================ */

/* ---------- Тема «Корпоративная»: кремовая бумага, красный акцент ----------
   Палитра снята с нашей корпоративной базы (`design-system/alfa/`), но ЧЕТЫРЕ цвета
   пришлось затемнить: в роли ТЕКСТА на кремовом фоне они не проходят 4.5 —
   акцент #E61E14 даёт 4.13, успех #16955C — 3.43, предупреждение #B8791E —
   3.25, тусклый #8A8F98 — 2.92 (замер 13.09.2026). Фирменный красный при этом
   остался: он работает заливкой, где белая надпись на нём даёт 5.88. */
.nv-body.alfa{
  --nv-bg:#F7F2EA;
  --nv-bg-deep:#F2E7D9;
  --nv-surface:#FFFFFF;
  --nv-surface-2:#FBF7F1;
  --nv-text:#1C1D20;
  --nv-text-muted:#515761;
  --nv-text-dim:#656A73;

  /* акцент как ТЕКСТ (ссылки, активные пункты) — затемнённый фирменный */
  --nv-accent:#C8102E;
  --nv-accent-glow:rgba(230,30,20,.16);
  /* заливка под белой надписью — тот же тон, белый на нём 5.88 */
  --nv-surface-ink:#C8102E;
  --nv-on-ink:#FFFFFF;
  --nv-on-accent:#FFFFFF;

  --nv-success:#0F6B42;
  --nv-warning:#8A5A12;
  --nv-danger:#B10E27;

  --nv-field:#FFFFFF;
  --nv-border:rgba(28,29,32,.12);
  --nv-border-strong:rgba(28,29,32,.22);

  /* метки — кремовые подложки тех же тонов, все пары ≥ 5.7 */
  --mtk-green-bg:#E7F3EB;   --mtk-green-fg:#1A6B45;
  --mtk-amber-bg:#F9EFDD;   --mtk-amber-fg:#7A4F12;
  --mtk-red-bg:#FBE9E7;     --mtk-red-fg:#A3251C;
  --mtk-indigo-bg:#ECECF8;  --mtk-indigo-fg:#3F43A8;
  --mtk-slate-bg:#EFEBE4;   --mtk-slate-fg:#4C4A45;
  --mtk-blue-bg:#E6EFFA;    --mtk-blue-fg:#1C56A3;
  --mtk-teal-bg:#E2F1EF;    --mtk-teal-fg:#175F58;
  --mtk-magenta-bg:#F9E8EE; --mtk-magenta-fg:#96275E;

  background:var(--nv-bg);
  color:var(--nv-text);
}

/* Полоса-меню в корпоративной теме — тёмная плашка угля, а не красная:
   красное поле шириной 72px на каждом экране перебивает акцент в данных. */
.alfa .rail{background:#1D1E22}
.alfa .rail .nav a[aria-current="page"]{
  background:rgba(230,30,20,.22); border-left-color:#E61E14; color:#FFF7F6;
}
.alfa .nv-card,
.alfa .nv-panel{box-shadow:0 1px 2px rgba(28,29,32,.07), inset 0 1px 0 rgba(255,255,255,.7)}

/* ---------- Переключатель тем в полосе ---------- */
.rail__temy{display:flex; gap:6px; padding:10px 24px 2px}
/* В свёрнутой полосе (72px) три кружка не помещаются — 24+22+6+22+6+22 = 102px, и
   третий уезжал за обрезку (поймано снимком 13.09.2026). В покое виден только кружок
   текущей темы: он заодно говорит, какая тема стоит. Остальные приезжают с подписями. */
.rail__tema:not([aria-pressed="true"]){display:none}
.rail:hover .rail__tema,
.rail:has(:focus-visible) .rail__tema{display:block}
.rail__tema{
  width:22px; height:22px; padding:0; flex:0 0 auto; cursor:pointer;
  border-radius:50%; border:1px solid rgba(255,255,255,.28); background:#17181C;
  transition:transform .2s cubic-bezier(.645,.045,.355,1),
             border-color .2s cubic-bezier(.645,.045,.355,1);
}
.rail__tema--alfa{background:#F7F2EA; border-color:#E61E14}
.rail__tema--bumaga{background:#F6F5F1}
.rail__tema:hover{transform:scale(1.12); border-color:rgba(255,255,255,.7)}
.rail__tema[aria-pressed="true"]{
  border-color:#FFFFFF; border-width:2px;
  box-shadow:0 0 0 2px rgba(255,255,255,.18);
}
/* Подпись «Тема» проявляется вместе с остальными надписями полосы. */
.rail__temy-podpis{
  padding:6px 24px 0; font-size:11px; color:rgba(255,255,255,.35); white-space:nowrap;
  opacity:0; transition:opacity .2s cubic-bezier(.645,.045,.355,1);
}
.rail:hover .rail__temy-podpis,
.rail:has(:focus-visible) .rail__temy-podpis{opacity:1}

@media (max-width:760px){
  /* На телефоне полоса — ряд иконок внизу; переключателю там места нет,
     и тема на телефоне обычно не меняется каждый день. */
  .rail__temy,.rail__temy-podpis{display:none}
}

/* Подпись кнопки-кружка: видна только скринридеру. Без неё у кнопки нет имени вовсе —
   цвет именем не является. */
.vne-ekrana{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

/* Выбор темы на странице «Пароль» — тот же переключатель, но кнопками с подписями:
   на телефоне полоса превращается в ряд иконок внизу, и кружкам там места нет. */
.temy-vybor{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.temy-vybor .nv-btn{display:inline-flex; align-items:center; gap:8px}
.temy-vybor__tochka{
  width:12px; height:12px; border-radius:50%; display:inline-block; flex:0 0 auto;
  border:1px solid rgba(127,127,127,.45);
}
.temy-vybor__tochka--ugol{background:#17181C}
.temy-vybor__tochka--alfa{background:#F7F2EA; border-color:#C8102E}
.temy-vybor__tochka--bumaga{background:#FCFBF8}

/* ---------- 12. Путь заявки рядом с формой ----------
   Поля формы ограничены 640px (`sayt.css`), панель тянется во всю ширину — справа
   оставалось пустое поле в половину экрана (прислано человеком 13.09.2026). Заполняем
   не декорацией, а тем, чего на этом экране не хватало: подав ИНН, человек не знал,
   что произойдёт дальше и почему заявка висит «новой».

   Ступени названы словами статусов из `kontrakt.py` — это тот же перечень, что печатает
   пилюля в таблице ниже, поэтому колонка читается как легенда к ней. Сроки и лимиты сюда
   НЕ дублируются: обещание о них живёт в `_rasskaz.html` одним файлом на две страницы,
   третий носитель разошёлся бы с ним молча. Вместо чисел — ссылка на «Как это работает». */
.zayavka-ryad{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(230px,300px);
  gap:30px; align-items:start;
}
.chto-dalshe{border-left:1px solid var(--nv-border); padding-left:24px}
.shagi-zayavki{list-style:none; margin:12px 0 0; padding:0; counter-reset:shag}
.shagi-zayavki li{
  position:relative; counter-increment:shag;
  padding:0 0 14px 28px; font-size:12.5px; line-height:1.45; color:var(--nv-text-muted);
}
.shagi-zayavki li:last-child{padding-bottom:0}
.shagi-zayavki li::before{
  content:counter(shag,decimal-leading-zero); position:absolute; left:0; top:1px;
  font-size:11px; color:var(--nv-text-dim); font-variant-numeric:tabular-nums;
}
/* Нить между номерами: четыре пункта подряд без неё читаются как список свойств,
   а это последовательность — заявка проходит их по очереди. */
.shagi-zayavki li:not(:last-child)::after{
  content:""; position:absolute; left:7px; top:18px; bottom:2px;
  width:1px; background:var(--nv-border);
}
.shagi-zayavki b{display:block; color:var(--nv-text); font-weight:600; font-size:13px}

@media (max-width:900px){
  .zayavka-ryad{grid-template-columns:1fr; gap:20px}
  .chto-dalshe{border-left:0; border-top:1px solid var(--nv-border); padding:18px 0 0}
}