/* ═══════════════════════════════════════════════════════════════════════════
   alt.vu — дизайн-система веба
   Версия 1.0 · 17.09.2026

   Что это. Один файл, который подключается тегом <link> и даёт готовый
   набор токенов и компонентов. Своих цветов, размеров и теней в разметке
   писать не нужно — всё, что нужно интерфейсу alt.vu, уже здесь.

   Откуда взято. Значения сняты с действующего веба (src/alt.py, www/index.html),
   а не придуманы заново. Три цвета подтемнены против продакшена — они не
   дотягивали до порога читаемости; отличия перечислены в правилах.

   Правило, которое экономит время: сначала ищите готовый класс, и только
   если его нет — пишите свой. Пара своих стилей в разметке через месяц
   превращается во вторую дизайн-систему.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Шрифт ───────────────────────────────────────────────────────────────
   Inter, четыре начертания. Файлы уже лежат в проде по этим путям.
   Пятого начертания нет и заводить не надо: 400 — текст, 500 — строки
   и подписи, 600 — заголовки и кнопки, 700 — только крупные числа.     */

@font-face{font-family:Inter;src:url(/assets/inter-e06f6b1b.woff2) format("woff2");
  font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url(/assets/inter-0ff3e946.woff2) format("woff2");
  font-weight:500;font-display:swap}
@font-face{font-family:Inter;src:url(/assets/inter-5cb7103e.woff2) format("woff2");
  font-weight:600;font-display:swap}
@font-face{font-family:Inter;src:url(/assets/inter-fa888127.woff2) format("woff2");
  font-weight:700;font-display:swap}


/* ── 2. Токены ──────────────────────────────────────────────────────────────
   Единственное место, где живут цвета и размеры. В разметке — только
   var(--…). Шестнадцатеричный код в атрибуте style означает, что токена
   не хватило: заведите токен, а не исключение.                          */

:root{
  color-scheme: light;

  /* Бренд. Лайм — цвет действия, и у него ровно одно место на экране:
     главная кнопка, включённый переключатель, отметка «зачислено».
     Лайм НИКОГДА не красит текст и не красит данные на графике:
     на белом он даёт 1,4 к 1 — это не читается. */
  --brand:        #cbf14a;
  --brand-ink:    #161514;   /* текст и значки на лайме — 14,1 к 1 */
  --brand-600:    #0f7533;   /* ссылки и зелёный смысл «пришло» */

  /* Серая шкала. Чем больше число, тем темнее. */
  --n50:          #f6f7f8;   /* фон страницы */
  --n100:         #e9ecf0;   /* вторая кнопка, разделители, пустые полосы */
  --n300:         #b9b7b7;   /* обводки и нерабочие состояния — НЕ текст */
  --n400:         #8a8686;   /* значки и ручка шторки — НЕ текст */
  --n500:         #6b6767;   /* подписи, вторичный текст, подсказки в полях */
  --n850:         #211e1d;   /* текст строк */
  --n900:         #161514;   /* заголовки и главные числа */
  --white:        #ffffff;   /* плита */

  /* Смысловые. Каждый приходит парой: цвет + своя подложка. */
  --ok:           #0f7533;  --ok-bg:    #e6f2ea;
  --err:          #bd340e;  --err-bg:   #fbe9e4;
  --err-mark:     #ec5732;               /* только значок, не текст */
  --warn-bg:      #f2f8dc;  --warn-ink: #211e1d;  --warn-mark:#5f7314;
  --info-bg:      #e9ecf0;

  /* Радиусы. Четыре значения, пятого нет. */
  --r-card:       20px;   /* плита, группа строк, пустое состояние */
  --r-field:      16px;   /* поле, кнопка, предупреждение */
  --r-sheet:      24px;   /* шторка — только два верхних угла */
  --r-pill:       999px;  /* бейдж, чип, кружок, переключатель */

  /* Тени. Три штуки. Тень — не украшение, она говорит «это лежит выше». */
  --sh-card:      0 1px 2px #1615140a;      /* плита на фоне */
  --sh-float:     0 1px 3px #1615141a, inset 0 0 0 1px #16151410; /* круглая кнопка */
  --sh-brand:     0 6px 14px #cbf14a5c;     /* главная кнопка */
  --sh-sheet:     0 -10px 30px #1615141a;   /* шторка */

  /* Отступы. Шаг 4. Между значениями не вклиниваться. */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px;
  --s7:32px; --s8:40px; --s9:56px;

  /* Сетка. Поля и ширина полосы контента по ширинам экрана. */
  --gut:          16px;   /* поле слева и справа; на десктопе больше */
  --col-max:      1200px; /* предельная ширина полосы на десктопе */
  --side:         240px;  /* боковое меню десктопа */

  /* Время. Больше 200 мс интерфейс кажется вялым; меньше 120 — дёрганым. */
  --t-fast:       140ms;
  --t-base:       180ms;
  --ease:         cubic-bezier(.2,.8,.2,1);

  /* Данные на графиках. Цвета проверены на различимость, в том числе при
     дальтонизме. Порядок фиксированный: первая серия всегда слот 1.
     Перекрашивать серии при смене фильтра нельзя — цвет принадлежит
     сущности, а не её месту в списке. */
  --viz-1:        #0f7533;   /* зелёный — наш, первая серия всегда он */
  --viz-2:        #2a78d6;   /* синий */
  --viz-3:        #4a3aa7;   /* фиолетовый */
  --viz-4:        #eb6834;   /* оранжевый — только столбики и линии */

  /* Шкала величины: один цвет от светлого к тёмному. Для карты
     интенсивности, для столбиков одной серии. Радуги не бывает. */
  --viz-s1:#e8f4ec; --viz-s2:#c7e4d2; --viz-s3:#9ed0b1; --viz-s4:#6fb78c;
  --viz-s5:#3f9a68; --viz-s6:#1f8551; --viz-s7:#0f7533;

  --viz-grid:     #e9ecf0;   /* сетка графика — тише данных */
  --viz-axis:     #6b6767;   /* подписи осей */
}


/* ── 3. Сброс и основа ──────────────────────────────────────────────────── */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
svg{display:block}
img{max-width:100%;display:block}

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

body{
  font-family:Inter,system-ui,-apple-system,sans-serif;
  font-size:16px;
  line-height:22px;
  color:var(--n900);
  background:var(--n50);
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}

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

button,input,textarea,select{font:inherit;color:inherit}

/* Обводка фокуса. Убирать её нельзя: без неё интерфейс недоступен
   с клавиатуры. Можно только сделать аккуратной. */
:focus-visible{outline:2px solid var(--brand-600);outline-offset:2px;border-radius:4px}

/* Человек мог попросить систему не анимировать. Просьбу выполняем. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
}


/* ── 4. Типографика ─────────────────────────────────────────────────────────
   Семь размеров на весь продукт. Восьмого не заводить: каждый лишний
   кегль — это ещё одна строка, которая где-то не сойдётся с соседней. */

.t-hero   {font-size:28px;font-weight:600;line-height:34px;letter-spacing:-.3px}
.t-amount {font-size:32px;font-weight:600;line-height:38px;letter-spacing:-.5px}
.t-h1     {font-size:20px;font-weight:600;line-height:24px}
.t-h2     {font-size:16px;font-weight:600;line-height:22px}
.t-body   {font-size:16px;font-weight:400;line-height:22px}
.t-row    {font-size:16px;font-weight:500;line-height:22px}
.t-sub    {font-size:13px;font-weight:400;line-height:18px;color:var(--n500)}
.t-cap    {font-size:12px;font-weight:400;line-height:16px;color:var(--n500)}

/* Крупное число: целая часть крупно, копейки и валюта мельче и тише.
   Так число читается с одного взгляда, а мелочь не спорит с главным. */
.num{font-weight:600;letter-spacing:-.5px}
.num i{font-style:normal;font-weight:500;font-size:.62em}

/* Деньги набираются цифрами одной ширины, иначе в столбце сумм
   разряды пляшут и колонку невозможно читать сверху вниз. */
.mono-num{font-variant-numeric:tabular-nums}

/* Адрес в сети — моноширинный, с переносом по любому знаку.
   Многоточие здесь запрещено: человек сверяет адрес целиком. */
.mono-addr{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:15px;line-height:21px;letter-spacing:.2px;word-break:break-all}


/* ── 5. Сетка ───────────────────────────────────────────────────────────────
   Три ширины: телефон, планшет, десктоп. Больше точек перелома не нужно —
   каждая лишняя это ещё один макет, который надо проверять.

   Телефон  до 767   одна колонка, поля 16
   Планшет  768…1279 полоса 704, поля 32
   Десктоп  от 1280  полоса 1200, боковое меню 240 слева               */

.page{min-height:100vh;min-height:100dvh}

.container{width:100%;max-width:var(--col-max);margin:0 auto;
  padding-left:var(--gut);padding-right:var(--gut)}

/* Ряд карточек: на телефоне одна колонка, дальше — сколько поместится. */
.grid{display:grid;gap:var(--s3);grid-template-columns:1fr}

@media (min-width:768px){
  :root{--gut:32px}
  .grid.g-2,.grid.g-3,.grid.g-4{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1280px){
  :root{--gut:40px}
  .grid{gap:var(--s5)}
  .grid.g-3{grid-template-columns:repeat(3,1fr)}
  .grid.g-4{grid-template-columns:repeat(4,1fr)}
}

/* Каркас десктопа: меню слева, контент справа. На телефоне меню
   превращается в нижнюю панель — см. раздел 13. */
.shell{display:block}
@media (min-width:1280px){
  .shell{display:grid;grid-template-columns:var(--side) minmax(0,1fr);
    gap:var(--s7);align-items:start}
}


/* ── 6. Поверхности ─────────────────────────────────────────────────────────
   Плита — белая, на сером фоне, с еле заметной тенью. Рамок нет:
   поверхность отделяется светлотой, а не линией.                       */

.card{background:var(--white);border-radius:var(--r-card);
  box-shadow:var(--sh-card);padding:var(--s4)}
.card.flush{padding:0;overflow:hidden}          /* когда внутри строки */

.group{background:var(--white);border-radius:var(--r-card);
  box-shadow:var(--sh-card);padding:var(--s1) 0;margin-bottom:var(--s2)}

.section-title{font-size:16px;font-weight:600;line-height:22px;
  margin:var(--s1) 0 10px;padding:0 var(--s1)}

.note{font-size:13px;font-weight:400;line-height:18px;color:var(--n500);
  padding:0 var(--s1);margin:var(--s1) 0 18px}
.note b{font-weight:600;color:var(--n850)}

.hint{font-size:12px;font-weight:400;line-height:16px;color:var(--n500);
  padding:0 var(--s1);margin:-6px 0 var(--s3)}


/* ── 7. Строка ──────────────────────────────────────────────────────────────
   Главный кирпич интерфейса: кружок → название → подпись → значение.
   Волосок разделителя идёт от текста, а не от края плиты: так список
   читается как список, а не как набор полосок.                        */

.row{position:relative;display:flex;align-items:center;gap:var(--s3);
  min-height:60px;padding:10px var(--s4);
  box-shadow:inset 0 1px 0 var(--n50);
  background:none;border:0;width:100%;text-align:left;font:inherit;color:inherit}
.row:first-child{box-shadow:none}

a.row,button.row,label.row{cursor:pointer}
a.row:hover,button.row:hover,label.row:hover{background:var(--n50);text-decoration:none}

/* Строка с переключателем размечается как <label>: тогда нажимается вся
   строка, а не пятно 48×28 у правого края. Сам <input> прячется классом
   .sr-only и остаётся доступен клавиатуре и озвучке. */
label.row input[type=checkbox]{position:absolute;opacity:0;pointer-events:none}

.row .ic{flex:0 0 32px;width:32px;height:32px;border-radius:var(--r-pill);
  background:var(--n50);display:flex;align-items:center;justify-content:center;
  color:var(--n850)}
.row .ic.lg{flex-basis:40px;width:40px;height:40px}

.row .txt{flex:1;min-width:0;font-size:16px;font-weight:500;line-height:22px}
.row .txt i{display:block;font-style:normal;font-size:12px;font-weight:400;
  line-height:16px;color:var(--n500)}

.row .val{font-size:16px;font-weight:400;color:var(--n500);white-space:nowrap}

.row.total{box-shadow:inset 0 1.5px 0 var(--n100)}
.row.total .txt,.row.total .val{font-weight:600}
.row.total .val{color:var(--n900)}

.row.danger .txt{color:var(--err)}

/* Шеврон в конце строки: он говорит «здесь есть продолжение».
   Со значением справа не ставится — значение само это говорит. */
.row .chev{flex:0 0 auto;color:var(--n400);display:flex;align-items:center}

/* Длинное значение не ставится справа: оно сжимает название до
   многоточия. Такое значение — подпись под названием. */


/* ── 8. Кнопки ──────────────────────────────────────────────────────────────
   Два вида, третьего нет. Главная — лайм, на экране одна. Вторая — серая.
   Мишень 44 по высоте минимум, у главной 52.                          */

.btn,.btn-sec{display:inline-flex;align-items:center;justify-content:center;
  gap:var(--s2);height:52px;padding:0 var(--s5);border:0;cursor:pointer;
  border-radius:var(--r-field);font-size:16px;font-weight:600;line-height:1;
  transition:transform var(--t-fast) var(--ease),opacity var(--t-fast) var(--ease)}
.btn{background:var(--brand);color:var(--brand-ink);box-shadow:var(--sh-brand)}
.btn-sec{background:var(--n100);color:var(--n850)}

.btn:active,.btn-sec:active{transform:scale(.98)}
.btn[disabled],.btn-sec[disabled],.btn.off,.btn-sec.off{
  opacity:.45;pointer-events:none}

.btn.wide,.btn-sec.wide{width:100%}
.btn.sm,.btn-sec.sm{height:44px;font-size:15px;padding:0 var(--s4)}

/* Опасное действие — не красная кнопка, а серая с красным текстом.
   Красная заливка торопит, а удаление торопить не надо. */
.btn-sec.danger{color:var(--err)}

/* Круглая кнопка в шапке: значок 20–24 внутри мишени 40. */
.icon-btn{position:relative;width:40px;height:40px;border:0;cursor:pointer;
  border-radius:var(--r-pill);background:#ffffffe0;box-shadow:var(--sh-float);
  display:flex;align-items:center;justify-content:center;color:var(--n850)}
/* Цифра на счётчике тёмная, а не белая: белая на этом красном даёт 3,5 к 1.
   Красный не трогаем — он читается как тревожный именно таким. */
.icon-btn .badge{position:absolute;top:-3px;right:-3px;min-width:18px;height:18px;
  padding:0 5px;border-radius:var(--r-pill);background:var(--err-mark);
  color:#2b0d05;font-size:10px;font-weight:600;line-height:18px;text-align:center}

.link{display:inline-flex;align-items:center;gap:6px;font-size:14px;
  font-weight:500;color:var(--brand-600)}


/* ── 9. Поля ────────────────────────────────────────────────────────────────
   Поле — белая плашка высотой 68 с подписью над значением. Подпись
   не исчезает при вводе: человек должен видеть, что он заполняет,
   когда уже начал печатать.                                            */

.field{display:flex;align-items:center;gap:14px;min-height:68px;
  border-radius:var(--r-field);padding:0 var(--s4);margin-bottom:var(--s3);
  background:var(--white);box-shadow:var(--sh-card)}
.field.grey{background:var(--n100);box-shadow:none}

.field .ic{flex:0 0 40px;width:40px;height:40px;border-radius:var(--r-pill);
  background:var(--n50);display:flex;align-items:center;justify-content:center;
  color:var(--n850)}
.field.grey .ic{background:#ffffffb0}

.field .body{flex:1;min-width:0}
.field .body i{display:block;font-style:normal;font-size:12px;font-weight:400;
  line-height:16px;color:var(--n500)}
.field .body b,.field .body input{display:block;width:100%;border:0;outline:0;
  background:none;padding:0;font-size:16px;font-weight:500;line-height:22px;
  color:var(--n900)}

/* Подсказка в поле берёт --n500, а не --n300: светло-серый на белом
   даёт 2 к 1 и на солнце пропадает вместе со смыслом поля. */
.field .body input::placeholder{color:var(--n500);font-weight:400}

.field .addon{flex:0 0 auto;display:flex;align-items:center;gap:var(--s2);
  color:var(--n500)}

.field.error{box-shadow:inset 0 0 0 1.5px var(--err)}
.field-error{font-size:12px;line-height:16px;color:var(--err);
  padding:0 var(--s1);margin:-6px 0 var(--s3)}

/* Поле адреса: тянется по высоте, текст переносится, многоточия нет. */
.field.addr{min-height:68px;align-items:flex-start;padding:13px var(--s4) 15px}
.field.addr .ic{margin-top:1px}

/* Ряд действий под полем: вставить, сканировать, выбрать из книжки.
   Один и тот же ряд на всех экранах, где вводят адрес. */
.unit{background:var(--white);border-radius:var(--r-field);
  box-shadow:var(--sh-card);overflow:hidden;margin-bottom:var(--s3)}
.unit .zones{display:flex;box-shadow:inset 0 1px 0 var(--n100)}
.unit .zone{position:relative;flex:1;height:56px;border:0;background:none;
  cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;
  font-size:13px;font-weight:500;color:var(--n850)}
.unit .zone + .zone::before{content:"";position:absolute;left:0;top:12px;
  bottom:12px;width:1px;background:var(--n100)}

/* Переключатель. Мишень 48×28, но нажимается вся строка. */
.switch{position:relative;flex:0 0 48px;width:48px;height:28px;border:0;
  cursor:pointer;border-radius:var(--r-pill);background:var(--n100);
  box-shadow:inset 0 0 0 1.5px #16151426;transition:background var(--t-base) var(--ease)}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;
  border-radius:var(--r-pill);background:var(--white);box-shadow:0 1px 3px #16151426;
  transition:left var(--t-base) var(--ease)}
.switch.on{background:var(--brand);box-shadow:none}
.switch.on::after{left:23px}

.checkbox{flex:0 0 22px;width:22px;height:22px;border:0;cursor:pointer;
  border-radius:7px;background:var(--white);box-shadow:inset 0 0 0 1.5px var(--n400)}
.checkbox.on{background:var(--brand);box-shadow:none;
  display:flex;align-items:center;justify-content:center;color:var(--brand-ink)}


/* ── 10. Метки и сообщения ─────────────────────────────────────────────────
   Смысл никогда не передаётся одним цветом: рядом всегда слово или знак.
   Человек, который не различает красный и зелёный, должен понять
   состояние операции так же быстро, как все остальные.                 */

.badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;
  font-weight:600;line-height:16px;padding:2px 8px;border-radius:var(--r-pill);
  background:var(--brand);color:var(--brand-ink);white-space:nowrap}
.badge.ok{background:var(--ok-bg);color:var(--ok)}
.badge.err{background:var(--err-bg);color:var(--err)}
.badge.mute{background:var(--n100);color:var(--n500)}

.chip{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;
  border:0;cursor:pointer;border-radius:var(--r-pill);background:var(--white);
  box-shadow:var(--sh-card);font-size:14px;font-weight:500;color:var(--n850);
  white-space:nowrap}
.chip.on{background:var(--brand);color:var(--brand-ink);box-shadow:0 2px 8px #cbf14a5c}
/* Выбранный фильтр. Тёмный, а не лаймовый: на экране с главной кнопкой
   лаймовый чип стал бы вторым пятном действия (правило 1 цвета). */
.chip.sel{background:var(--n900);color:var(--white);box-shadow:none}

.chips{display:flex;gap:var(--s2);overflow-x:auto;scrollbar-width:none;
  margin-bottom:14px}
.chips::-webkit-scrollbar{display:none}

.warn{display:flex;gap:var(--s3);align-items:flex-start;background:var(--warn-bg);
  border-radius:var(--r-field);padding:14px var(--s4);margin:2px 0 14px}
.warn .ic{flex:0 0 22px;color:var(--warn-mark);margin-top:1px}
.warn p{font-size:13px;font-weight:400;line-height:18px;color:var(--warn-ink)}
.warn b{font-weight:600}

.empty{background:var(--white);border-radius:var(--r-card);padding:28px 26px;
  text-align:center;box-shadow:var(--sh-card)}
.empty .ic{width:52px;height:52px;margin:0 auto var(--s3);border-radius:var(--r-pill);
  background:var(--n50);color:var(--n400);display:flex;align-items:center;
  justify-content:center}
.empty b{display:block;font-size:16px;font-weight:600;line-height:22px}
.empty i{display:block;font-style:normal;font-size:13px;font-weight:400;
  line-height:18px;color:var(--n500);margin-top:5px}


/* ── 11. Шторка ─────────────────────────────────────────────────────────────
   Всё, что подтверждают или выбирают, приезжает снизу. Отдельную
   страницу ради выбора одного значения заводить не надо.               */

.scrim{position:fixed;inset:0;background:#161514;opacity:.4;z-index:40;
  border:0;cursor:pointer}

.sheet{position:fixed;left:0;right:0;bottom:0;z-index:41;background:var(--n50);
  border-radius:var(--r-sheet) var(--r-sheet) 0 0;padding:10px var(--s4) 36px;
  box-shadow:var(--sh-sheet);max-height:88vh;overflow-y:auto}
.sheet .grab{width:44px;height:5px;border-radius:3px;background:var(--n400);
  margin:0 auto var(--s4)}
.sheet h2{font-size:20px;font-weight:600;line-height:24px;margin-bottom:14px}
.sheet p{font-size:15px;font-weight:400;line-height:21px;color:var(--n500);
  margin:-4px 0 18px}

/* На десктопе шторка снизу неуместна: там она становится окном по центру. */
@media (min-width:1280px){
  .sheet{left:50%;right:auto;bottom:auto;top:50%;transform:translate(-50%,-50%);
    width:480px;border-radius:var(--r-sheet);padding:var(--s6) var(--s6) var(--s7)}
  .sheet .grab{display:none}
}


/* ── 12. Таблица ────────────────────────────────────────────────────────────
   На десктопе — таблица. На телефоне таблица не листается вбок: каждая
   строка становится карточкой. Подписи колонок берутся из data-label,
   поэтому в разметке они пишутся один раз.                             */

.table-wrap{background:var(--white);border-radius:var(--r-card);
  box-shadow:var(--sh-card);overflow:hidden}

table.tbl{width:100%;border-collapse:collapse;font-size:15px}
table.tbl th{text-align:left;font-size:12px;font-weight:600;line-height:16px;
  color:var(--n500);padding:14px var(--s4) 10px;white-space:nowrap}
table.tbl td{padding:14px var(--s4);border-top:1px solid var(--n50);
  line-height:20px}
table.tbl td.num-col,table.tbl th.num-col{text-align:right;
  font-variant-numeric:tabular-nums}
table.tbl tbody tr:hover{background:var(--n50)}

@media (max-width:767px){
  table.tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;
    clip-path:inset(50%)}                       /* заголовки читает озвучка */
  table.tbl tr{display:block;border-top:1px solid var(--n50);padding:var(--s3) 0}
  table.tbl tr:first-child{border-top:0}
  table.tbl td{display:flex;justify-content:space-between;gap:var(--s4);
    border:0;padding:5px var(--s4);text-align:right}
  table.tbl td::before{content:attr(data-label);flex:0 0 auto;text-align:left;
    font-size:13px;font-weight:400;color:var(--n500)}
}


/* ── 13. Навигация ──────────────────────────────────────────────────────────
   На телефоне — нижняя панель, на десктопе — меню слева. Это один и тот же
   список разделов, перечисленный в разметке один раз.                  */

.nav{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--n50);
  display:flex;padding:14px 0 calc(14px + env(safe-area-inset-bottom))}
.nav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;
  color:var(--n500);font-size:10px;font-weight:500;line-height:12px;
  min-height:44px;text-decoration:none}
.nav a.on{color:var(--n900);font-weight:600}

/* Затухание над панелью: без него строка упирается в панель вплотную
   и кажется обрезанной. Нажатия сквозь него проходят. */
.nav::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:56px;
  pointer-events:none;background:linear-gradient(180deg,#f6f7f800,var(--n50))}

/* Полоса под нижней панелью, чтобы последняя строка не пряталась. */
.nav-space{height:114px}

@media (min-width:1280px){
  .nav{position:sticky;top:var(--s7);left:auto;right:auto;bottom:auto;
    flex-direction:column;gap:2px;padding:0;background:none;width:var(--side)}
  .nav a{flex:0 0 auto;flex-direction:row;justify-content:flex-start;gap:var(--s3);
    height:48px;padding:0 14px;border-radius:14px;font-size:15px;line-height:20px}
  .nav::before{display:none}
  .nav a.on{background:var(--white);box-shadow:var(--sh-card)}
  .nav a:hover{background:var(--white)}
  .nav-space{display:none}
}


/* ── 14. Показатели и графики ───────────────────────────────────────────────
   Число, за которым пришли, — крупно и само по себе. График рядом
   объясняет, откуда оно взялось, и не спорит с ним размером.           */

.stat{background:var(--white);border-radius:var(--r-card);box-shadow:var(--sh-card);
  padding:var(--s5)}
.stat .label{font-size:13px;font-weight:400;line-height:18px;color:var(--n500)}
.stat .value{font-size:32px;font-weight:600;line-height:40px;letter-spacing:-.5px;
  margin-top:var(--s1);font-variant-numeric:tabular-nums}
.stat .delta{display:inline-flex;align-items:center;gap:4px;margin-top:var(--s2);
  font-size:13px;font-weight:500}
.stat .delta.up{color:var(--ok)}
.stat .delta.down{color:var(--err)}

.chart{background:var(--white);border-radius:var(--r-card);box-shadow:var(--sh-card);
  padding:var(--s5)}
.chart h3{font-size:16px;font-weight:600;line-height:22px;margin-bottom:var(--s1)}
.chart .sub{font-size:13px;line-height:18px;color:var(--n500);margin-bottom:var(--s4)}

/* Легенда обязательна от двух серий и не нужна при одной: заголовок
   уже назвал, что нарисовано. */
.legend{display:flex;flex-wrap:wrap;gap:var(--s4);margin-top:var(--s4);
  font-size:13px;color:var(--n500)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:10px;height:10px;border-radius:3px;display:block}

/* Столбик: концы данных скруглены на 4, между заливками зазор в 2.
   Толстых столбиков не бывает — данные тонкие, воздух широкий. */
.bar-track{height:8px;border-radius:var(--r-pill);background:var(--n100);
  overflow:hidden}
.bar-track i{display:block;height:100%;border-radius:var(--r-pill);
  background:var(--viz-1)}


/* График разметкой SVG. Высота столбика — данные, и она живёт в атрибуте
   height у <rect>, а не в style. Цвет — только классом слота, в порядке
   слотов: первая серия всегда .viz-f1. */
.viz{display:block;width:100%;height:auto;overflow:visible}
.viz .viz-f1{fill:var(--viz-1)}
.viz .viz-f2{fill:var(--viz-2)}
.viz .viz-f3{fill:var(--viz-3)}
.viz .viz-f4{fill:var(--viz-4)}
.viz .viz-gridline{stroke:var(--viz-grid);stroke-width:1}
.viz text{fill:var(--viz-axis);font-size:12px}
.legend i.viz-f1{background:var(--viz-1)}
.legend i.viz-f2{background:var(--viz-2)}
.legend i.viz-f3{background:var(--viz-3)}
.legend i.viz-f4{background:var(--viz-4)}


/* ── 14.5. Мишень касания ───────────────────────────────────────────────────
   Правило простое: всё, что нажимается, нажимается зоной не меньше 44×44.
   Кружок может быть 40, чип — 36: зона расширяется невидимым слоем,
   а вид остаётся прежним. Палец попадает, глаз ничего не замечает.

   Если элемент лежит внутри строки, которая и так нажимается целиком
   (переключатель в .row), расширитель не нужен — мишенью служит строка. */

.icon-btn,.chip,.link,.switch,.checkbox{position:relative}
.icon-btn::before,.chip::before,.link::before,
.switch::before,.checkbox::before{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:max(100%,44px);height:max(100%,44px)}

/* Внутри строки мишенью служит сама строка. */
.row .switch::before,.row .checkbox::before{display:none}

.link{min-height:44px}

/* ── 15. Мелочи, о которых забывают ────────────────────────────────────────*/

/* Текст только для озвучки — виден программе чтения, не виден глазу. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* Загрузка: серая плашка вместо содержимого. Крутилка на весь экран
   говорит «жди», а плашка — «вот здесь будет таблица», и это честнее. */
.skeleton{background:var(--n100);border-radius:var(--r-field);
  animation:sk 1.4s ease-in-out infinite}
@keyframes sk{0%,100%{opacity:1}50%{opacity:.55}}

.divider{height:1px;background:var(--n100);margin:var(--s4) 0}

.stack > * + *{margin-top:var(--s3)}
.stack.tight > * + *{margin-top:var(--s2)}
.stack.loose > * + *{margin-top:var(--s5)}

.between{display:flex;align-items:center;justify-content:space-between;
  gap:var(--s3)}

/* ── 16. Каркас страницы кабинета ───────────────────────────────────────────
   Добавлено 17.09.2026 для партнёрского портала: в разметке не должно быть
   style, а поля страницы, заголовок и подвал нужны каждой странице.       */

.page-pad{padding-top:var(--s7);padding-bottom:var(--s9)}
.page-head{margin-bottom:var(--s6)}
.page-head .t-sub{margin-top:var(--s1)}

/* Узкая колонка: вход, подтверждение, короткие формы. */
.narrow{max-width:420px;margin-left:auto;margin-right:auto}

/* Юридическая строка внизу каждой страницы и письма программы. */
.legal{margin-top:var(--s8);font-size:12px;line-height:16px;color:var(--n500)}

/* Выпадающий список внутри поля — как текстовое поле. */
.field .body select{display:block;width:100%;border:0;outline:0;background:none;
  padding:0;font-size:16px;font-weight:500;line-height:22px;color:var(--n900);
  appearance:none;cursor:pointer}

/* Чип-переключатель: <label class="chip"><input type="radio">…</label>.
   Кружок радио скрыт, но доступен клавиатуре; фокус рисуется на чипе. */
label.chip input{position:absolute;opacity:0;pointer-events:none}
label.chip:has(input:focus-visible){outline:2px solid var(--brand-600);outline-offset:2px}
.chips.wrap{flex-wrap:wrap;overflow:visible}

/* Ряд кнопок. */
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3)}

/* Нумерованные шаги. */
.list{padding-left:var(--s5)}
.list li{font-size:15px;line-height:21px;color:var(--n850)}
.list li + li{margin-top:var(--s2)}

/* Полоса прогресса разметкой SVG: ширина — атрибут, не style. */
.viz .viz-track{fill:var(--n100)}
.viz.meter{height:8px}

/* Группа полей без рамки: поверхность отделяется светлотой, не линией. */
fieldset{border:0;min-width:0}
/* Длинная подпись в строке (почта, ссылка) переносится, а не вылезает. */
.row .txt i{overflow-wrap:anywhere}

/* ── 17. Поправки после проверки кабинета, 17.09.2026 ──────────────────────
   Нашлись проходом клавишей Tab и проверкой на трёх ширинах.            */

/* Фокус в поле виден кольцом вокруг всего поля: у самого input обводка
   убрана, и без этого кольца фокус в поле не виден вовсе (правило 6). */
.field:focus-within{box-shadow:var(--sh-card),0 0 0 2px var(--brand-600)}
.field.grey:focus-within{box-shadow:0 0 0 2px var(--brand-600)}
.field.error:focus-within{box-shadow:inset 0 0 0 1.5px var(--err),0 0 0 2px var(--brand-600)}

/* Спрятанные заголовки таблицы на телефоне не должны выходить за край:
   ширина их ячеек иначе остаётся прежней, хоть их и не видно. */
@media (max-width:767px){
  table.tbl thead th{padding:0;font-size:1px;line-height:1px}
}

/* Подпись под заголовком страницы переносится (длинная почта, ссылка). */
.page-head .t-sub{overflow-wrap:anywhere}

/* Скрытая радиокнопка в чипе не занимает места. */
label.chip input{width:1px;height:1px;margin:0}

/* Столбики графика тянутся по ширине, высота — постоянная. Подписи —
   обычным текстом под графиком: текст внутри SVG сжимается вместе с ним и
   на телефоне становится нечитаемым. */
.viz.bars{height:140px}

/* Чип не уже мишени: у короткой подписи («X») расширитель мишени иначе
   выходит за края чипа. */
.chip{min-width:44px;justify-content:center}