/* ═══════════════════════════════════════════════════════════════════════════
   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;   /* ссылки и зелёный смысл «пришло» */
  --brand-glow:   #00d18a;   /* второе пятно свечения за картой — как в шапке приложений */

  /* Серая шкала. Чем больше число, тем темнее. */
  --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; /* круглая кнопка */
  --bub-glow:     #16151412;  /* свечение по краю кружка площадки */
  --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}

/* Вход и ввод кода: страница помещается в один экран (правка Ника
   25.09.2026). Раньше высоту в экран занимала карточка входа, и подвал с
   языками уезжал за нижний край — на телефоне его никто не видел. Теперь
   экран целиком делит колонка: карточка сверху, подвал прижат к низу. */
body.bare{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
body.bare > main{flex:1 0 auto}
@media (max-width:640px){
  body.bare > main{padding-bottom:var(--s5)}
  body.bare > .site-foot-band{padding:var(--s5) 0}
}

.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 и раздел 26). */
.shell{display:block}


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

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

/* Группа строк — часть блока, поэтому под ней тот же шаг 12, что и внутри
   любой карточки (эталон «Статистики»). */
.group{background:var(--white);border-radius:var(--r-card);
  box-shadow:var(--sh-card);padding:var(--s1) 0;margin-bottom:var(--s3)}

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

/* Все отступы — из шкалы --s1…--s9 (правка Ника 24.09.2026): раньше здесь
   стояли 18, 14, 10 и отрицательные 4 и 6, и зазоры на экране не совпадали
   с шагом между блоками. */
.note{font-size:13px;font-weight:400;line-height:18px;color:var(--n500);
  padding:0 var(--s1);margin:var(--s1) 0 var(--s3)}
.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:0 0 var(--s3)}
/* Поле, под которым стоит подсказка или ошибка, ужимает свой нижний отступ:
   подпись относится к нему и стоит ближе, чем следующий блок. */
.field:has(+ .hint),.field:has(+ .field-error){margin-bottom:var(--s2)}


/* ── 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;
  max-width:170px;overflow:hidden;text-overflow:ellipsis}
/* Заданное значение фильтра — плотным цветом, незаданное тихим: с одного
   взгляда видно, что человек уже выбрал. Лаймом значение не красится —
   лайм принадлежит главной кнопке. */
.row .val.set{color:var(--n900);font-weight:500}

.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. Кнопки ──────────────────────────────────────────────────────────────
   Два вида, третьего нет. Главная — лайм, на экране одна. Вторая — серая.
   Высота одна на весь продукт — 48 (правка Ника 24.09.2026: «сделай все
   размеры кнопок одинаковыми, для всех экранов»). Было 52 у обычной и 44 у
   мелкой, и рядом они выглядели разнобоем. 48 ≥ мишени 44.          */

.btn,.btn-sec{display:inline-flex;align-items:center;justify-content:center;
  gap:var(--s2);height:48px;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%}
/* .sm остался в разметке, но размера больше не меняет: Ник 24.09.2026 —
   кнопки одинаковые везде, и по высоте, и по полям. Разные поля давали
   разную ширину у кнопок с одинаковой надписью, и рядом это было видно. */
.btn.sm,.btn-sec.sm{height:48px;font-size:16px;padding:0 var(--s5)}

/* Опасное действие — не красная кнопка, а серая с красным текстом.
   Красная заливка торопит, а удаление торопить не надо. */
.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 с подписью над значением. Подпись
   не исчезает при вводе: человек должен видеть, что он заполняет,
   когда уже начал печатать.                                            */

/* Поле — той же высоты, что кнопка: 48 (Ник 24.09.2026). Подпись и
   значение поэтому мельче, иначе два этажа в 48 не встают. */
.field{display:flex;align-items:center;gap:var(--s3);min-height:48px;
  border-radius:var(--r-field);padding:0 var(--s3);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 32px;width:32px;height:32px;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:11px;font-weight:400;
  line-height:14px;color:var(--n500)}
/* Выбранное значение в списке (.pick) набрано так же, как значение в поле
   ввода рядом: одна строка фильтров — один кегль (Ник 24.09.2026). */
.field .body b,.field .body input,.field .body > .t-row{display:block;width:100%;
  border:0;outline:0;background:none;padding:0;
  font-size:14px;font-weight:500;line-height:18px;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:0 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}
/* Выбор виден сразу, а не после сохранения: класс sel ставит сервер, а это
   правило — браузер по самому переключателю. Без него человек нажимал, ничего
   не менялось, и казалось, что выбрать нельзя (ошибка Ника 24.09.2026). */
label.chip:has(input:checked){background:var(--n900);color:var(--white);box-shadow:none}

.chips{display:flex;gap:var(--s2);overflow-x:auto;scrollbar-width:none}
.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:var(--s4);margin:0}
.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:var(--s7) var(--s6);
  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:var(--s1)}


/* ── 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)}
/* Внутри шторки тот же ритм, что внутри карточки: 12. */
.sheet h2{font-size:20px;font-weight:600;line-height:24px;margin-bottom:var(--s3)}
.sheet p{font-size:15px;font-weight:400;line-height:21px;color:var(--n500);
  margin:0 0 var(--s3)}

/* На десктопе шторка снизу неуместна: там она становится окном по центру. */
@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}
}


/* Шапка шторки с действием справа: «Сбросить» — надпись, а не кнопка.
   Сброс нужен редко и не должен весить столько же, сколько главное действие. */
.sheet-head{display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--s4);margin-bottom:var(--s4)}
.sheet-head h2{margin:0}
.sheet-head a{font-size:14px;font-weight:500;color:var(--n500)}

/* Галочка выбранного значения в списке выбора. Именно галочка, а не
   переключатель: переключатель обещает, что можно включить несколько. */
.row .tick{flex:0 0 24px;width:24px;height:24px;border-radius:var(--r-pill);
  background:var(--brand);color:var(--brand-ink);display:flex;
  align-items:center;justify-content:center}


/* ── 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)}
/* Широкая таблица (больше четырёх колонок): заголовки переносятся, иначе
   на планшете таблица шире экрана. */
table.tbl.wrap-head th{white-space:normal}

@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. Навигация ──────────────────────────────────────────────────────────
   Полоса сверху, одна и та же на всех ширинах (правка Ника 24.09.2026).
   Раньше на телефоне она висела снизу, а с 1280 становилась колонкой слева —
   от перестроений отказались, раскладка у кабинета одна.               */

/* Марка и меню стоят одной строкой: знак, подпись, следом пункты (правка
   Ника 24.09.2026). Липнет к верху вся строка целиком, иначе марка уезжала
   бы, а меню оставалось. На узком экране строка переносится: меню занимает
   всю ширину и встаёт под марку. */
.topbar{position:sticky;top:0;z-index:30;background:var(--n50);display:flex;
  flex-wrap:wrap;align-items:center;gap:var(--s5) var(--s7);
  padding:var(--s3) 0;margin-bottom:var(--s5)}
.topbar .brand{flex:0 0 auto}
.topbar .nav{flex:1 1 auto;min-width:0}
@media (max-width:899px){ .topbar .nav{flex:1 1 100%} }

.nav{display:flex}
/* Значок и подпись в строку (Ник 24.09.2026): раньше подпись стояла под
   значком мелким кеглем — так было на прежней нижней панели телефона. */
/* Пункты не сжимаются: подпись не переносится, и при сжатии она налезала бы
   на соседний значок. Ширину поровну делят только там, где полоса шире
   содержимого, — от 900. */
.nav a{flex:0 0 auto;display:flex;flex-direction:row;align-items:center;
  justify-content:center;gap:var(--s2);padding:0 var(--s3);
  color:var(--n500);font-size:15px;font-weight:500;line-height:20px;
  min-height:44px;text-decoration:none;white-space:nowrap}
@media (min-width:900px){ .nav a{flex:1;padding:0} }
.nav a svg{flex:0 0 auto;width:20px;height:20px}
/* Шесть подписей в полный кегль в строку помещаются не везде. Ступени:
   на планшете кегль мельче, а на телефоне подпись остаётся только у
   выбранного раздела — остальные стоят значками. Так строка одна, все шесть
   разделов видны сразу и ничего не надо листать (решение Ника 24.09.2026).
   Прокрутка оставлена страховкой: на тайском и португальском подписи шире. */
.nav{overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
@media (max-width:899px){
  .nav a{font-size:13px;line-height:18px;gap:var(--s1)}
  .nav a svg{width:18px;height:18px}
}
@media (max-width:640px){
  .nav a span{display:none}
  .nav a.on span{display:inline}
  .nav a{gap:var(--s1);padding:0 var(--s2)}
  .nav a svg{width:22px;height:22px}
}
.nav a.on{color:var(--n900);font-weight:600}



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

/* Подложка под прежнюю нижнюю панель. Полоса уехала наверх — места
   внизу больше не нужно; сам блок в разметке остался. */
.nav-space{height:0}


/* ── 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 h2,.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}}

/* Разделитель живёт внутри блока, поэтому и поля у него внутренние — 12,
   как между соседними элементами карточки (Ник 24.09.2026). */
.divider{height:1px;background:var(--n100);margin:var(--s3) 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)}
/* Отступ до содержимого и до подписи — тот же, что между блоками (--s5):
   на странице один вертикальный шаг, как на «Статистике» (Ник 24.09.2026). */
.page-head{margin-bottom:var(--s5)}
.page-head .t-sub{margin-top:var(--s1)}

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

/* Юридическая строка внизу каждой страницы и письма программы. */
.legal{margin-top:var(--s5);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}

/* ── 18. Десять языков и публичные страницы, 18.09.2026 ─────────────────────
   Портал partners.alt.vu вышел на десяти языках пакета ALT_LOCALES
   (ru en tr es pt vi id hi th fr) и получил лендинг.                     */

/* Хинди и тайский: матры и тоновые знаки уходят выше и ниже строки
   латиницы, и при высоте строки, подобранной под Inter, налезают на
   соседнюю строку. Узкое место этих языков — высота, а не ширина
   (partners-locales/INSTRUCTION.md, раздел 8). Специфичность поднята,
   чтобы перекрыть строчные размеры компонентов. */
:root:is(:lang(hi),:lang(th)) body *{line-height:1.6}

/* Подпись раздела в нижней панели переносится на вторую строку, а не
   вылезает: на испанском и французском она длиннее русской. */
.nav a{min-width:0}
.nav a span{max-width:100%;text-align:center;overflow-wrap:anywhere}

/* Шапка публичной страницы: знак, разделы, вход. */
.site-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--s3);margin-bottom:var(--s7)}
.site-head .chips{margin-bottom:0}
.brand{display:inline-flex;align-items:center;gap:var(--s3);min-height:40px;
  font-size:16px;font-weight:600;color:var(--n900);text-decoration:none}
/* Знак в серой оправе: круг 40, внутри фирменный знак 24 — те же 60 %, что
   у монет в кошельке. Знак берётся файлом бренда (alt-logo-64.png), своим
   контуром он не рисуется (правка Ника 24.09.2026). */
.brand .mark{flex:0 0 40px;width:40px;height:40px;border-radius:var(--r-pill);
  background:var(--n100);display:flex;align-items:center;justify-content:center}
.brand .mark img{display:block;width:24px;height:24px;border-radius:var(--r-pill)}
.site-foot{margin-top:var(--s8)}

/* Текст готового материала: переносы строк автора сохраняются — партнёр
   копирует его целиком и публикует как есть. */
.mat{white-space:pre-line}

/* Правила продвижения страны: раскрывающаяся статья внутри карточки правил.
   Заголовок ведёт себя как строка списка, тело — обычная статья. */
.pick-art > summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  justify-content:space-between;gap:var(--s3);min-height:44px}
.pick-art > summary::-webkit-details-marker{display:none}
.pick-art[open] > summary .chev{transform:rotate(180deg)}
.pick-art > summary .chev{color:var(--n500);transition:transform var(--t-fast) var(--ease)}
.pick-art .art{padding-top:var(--s3)}

/* Список меток (площадки на лендинге): чип без действия. */
ul.chips{list-style:none;padding:0}
li.chip{cursor:default}

/* Вопрос и ответ: <details class="card"><summary class="t-row">. Открыт
   или закрыт — видно знаком, а не только цветом (правило 3). */
details.card > summary{display:flex;align-items:center;gap:var(--s3);min-height:44px;
  cursor:pointer;list-style:none}
details.card > summary::-webkit-details-marker{display:none}
details.card > summary::after{content:"+";margin-left:auto;font-size:20px;
  font-weight:500;color:var(--n500)}
details.card[open] > summary::after{content:"−"}
details.card[open] > summary + *{margin-top:var(--s3)}

/* Выбор строкой плиты: <label class="row"><input type="radio">…</label>. */
label.row{cursor:pointer}
label.row input{width:20px;height:20px;margin:0;accent-color:var(--n900);flex:0 0 auto}

/* ── 19. Кабинет «рабочий стол», 19.09.2026 ─────────────────────────────────
   Раскладка кабинета partners.alt.vu: наверху страницы — один следующий шаг,
   ниже — деньги и данные. Всё собрано из тех же токенов; новых цветов нет. */

/* Мелочи браузера тоже из палитры: выделение, каретка, полоса прокрутки. */
::selection{background:var(--ok-bg);color:var(--n900)}
input,textarea{caret-color:var(--brand-600)}
html{scrollbar-color:var(--n300) transparent}

/* Крупная плита: следующий шаг, сводка денег. */
.card.lg{padding:var(--s5)}
@media (min-width:1280px){ .card.lg{padding:var(--s6)} }

/* Плита, разделённая на колонки. Колонки отделяет волосок светлоты, а не
   рамка. На телефоне колонки встают друг под другом. .lead — первая шире. */
.panes{display:grid;gap:var(--s5)}
.panes > * + *{box-shadow:inset 0 1px 0 var(--n100);padding-top:var(--s5)}
@media (min-width:768px){
  .panes{grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:0}
  .panes.lead{grid-template-columns:minmax(0,1.6fr)}
  .panes > *{padding:0 var(--s5)}
  .panes > :first-child{padding-left:0}
  .panes > :last-child{padding-right:0}
  .panes > * + *{box-shadow:inset 1px 0 0 var(--n100);padding-top:0}
}

/* Асимметричные ряды десктопа: основное и боковое. */
@media (min-width:1280px){
  .grid.g-wide{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}
  .grid.g-side{grid-template-columns:minmax(0,1fr) 400px;align-items:start}
  .grid.g-side > .sticky{grid-column:2;grid-row:1}
  .sticky{position:sticky;top:var(--s7)}
}

/* Шапка страницы со сведениями справа. */
.page-head.between{align-items:flex-end;flex-wrap:wrap}

/* Отметка задачи в строке: сделана — галочка на зелёной подложке, текущая —
   тёмное кольцо, впереди — номер. Состояние всегда ещё и словом в подписи. */
.row .ic.done{background:var(--ok-bg);color:var(--ok)}
.row .ic.now{background:var(--white);box-shadow:inset 0 0 0 2px var(--n900)}
.row .ic .t-sub{color:inherit;font-weight:500}
.row.cur{background:var(--n50)}

/* Полоса из делений: задачи марафона, по делению на задачу. */
.viz.seg{height:10px}

/* Ячейка таблицы с полосой доли под числом. */
table.tbl td .viz.meter{margin-top:6px;max-width:160px;margin-left:auto}

/* Средняя колонка шире: в ней строки с суммами. */
@media (min-width:768px){
  .panes.mid{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}
}

/* Сумма в строке «название — сумма» не переносится и не сжимается. */
.between > .mono-num{flex:0 0 auto;white-space:nowrap}

/* Строки прямо в плите, без второй плиты вокруг: вложенная плита — рамка
   внутри рамки. Отступ строки равен нулю, волосок остаётся. */
.rows .row{padding-left:0;padding-right:0}

/* Состояния задач в полосе марафона — ступени шкалы величины одного цвета,
   не новые цвета: сделана — viz-1, доступна — viz-s2, впереди — дорожка.
   В легенде те же квадратики; рядом всегда слово. */
.viz .viz-s2{fill:var(--viz-s2)}
.legend i.viz-s2{background:var(--viz-s2)}
.legend i.viz-track{background:var(--n100)}

/* ── 20. Тёмная (ночная) тема, 19.09.2026 ───────────────────────────────────
   Включается атрибутом <html data-theme="dark">; сама по системной настройке
   не включается, пока вебу не принято решение о теме. Значения — те же, что
   у тёмной темы Android и iOS (src/android.py, DARK): не инверсия, а своя
   шкала. Поверхности светлеют по мере «подъёма», поэтому плита отделяется
   от фона без линии. Зелёный и красный подняты по светлоте: веб-значения на
   тёмном фоне не дотягивают до 4.5 к 1. Лайм и текст на нём не меняются. */

:root[data-theme="dark"]{
  color-scheme: dark;

  --brand-600:    #5ecb7e;   /* ссылки и «пришло» — как --ok тёмной темы */

  --n50:          #121211;   /* фон страницы — --bg */
  --n100:         #2b2a28;   /* вторая кнопка, разделители — --surface-3 */
  --n300:         #4a4744;   /* обводки — НЕ текст */
  --n400:         #7d7873;   /* значки — НЕ текст */
  --n500:         #b0aca7;   /* подписи — --on-variant */
  --n850:         #ebe9e6;   /* текст строк */
  --n900:         #f4f3f1;   /* заголовки — --on-bg */
  --white:        #1c1b1a;   /* плита — --surface */
  --bub-glow:     #ffffff2b;  /* на тёмном фоне свечение светлое */

  --ok:           #5ecb7e;  --ok-bg:    #1b2f21;
  --err:          #ff7a58;  --err-bg:   #3a1d15;
  --warn-bg:      #2a2f18;  --warn-ink: #f4f3f1;  --warn-mark:#c5dd6b;
  --info-bg:      #2b2a28;

  --sh-card:      0 1px 2px #00000040, inset 0 1px 0 #ffffff0a;
  --sh-float:     0 1px 3px #00000059, inset 0 0 0 1px #ffffff14;
  --sh-brand:     0 6px 14px #cbf14a33;
  --sh-sheet:     0 -10px 30px #00000059;

  /* Данные: те же слоты, поднятые по светлоте для тёмного фона. */
  --viz-1:        #5ecb7e;
  --viz-2:        #5b9cf0;
  --viz-3:        #9a8cf0;
  --viz-4:        #f08a5d;
  --viz-s1:#18261c; --viz-s2:#24472f; --viz-s3:#2f6440; --viz-s4:#3b8352;
  --viz-s5:#47a264; --viz-s6:#53b672; --viz-s7:#5ecb7e;
  --viz-grid:     #2b2a28;
  --viz-axis:     #b0aca7;
}

/* Места, где в системе стоял цвет, а не токен. */
:root[data-theme="dark"] .icon-btn{background:#1c1b1ae0}
:root[data-theme="dark"] .field.grey .ic{background:#ffffff14}
:root[data-theme="dark"] .switch{box-shadow:inset 0 0 0 1.5px #ffffff26}
:root[data-theme="dark"] .switch::after{background:var(--n900);box-shadow:0 1px 3px #00000059}
:root[data-theme="dark"] .scrim{background:#000;opacity:.6}
:root[data-theme="dark"] .topbar::before{background:linear-gradient(180deg,#12121100,var(--n50))}

/* ── 21. Доводка кабинета, 19.09.2026 ──────────────────────────────────────
   На ночной теме плиту отделяет блик по верхней кромке (в --sh-card темы):
   свет сверху, как у поднятой поверхности, без рамки. */

/* Заголовок и подпись под ним — одна пара: зазор 4, а не ноль. */
.t-h1 + .t-sub,.t-h2 + .t-sub{margin-top:var(--s1)}

/* Колонка, у которой последнее действие прижато к низу: у соседних колонок
   плиты нижние действия встают на одну линию. */
.fill{display:flex;flex-direction:column;gap:var(--s3)}
.fill > *{margin-top:0}
.fill > .end{margin-top:auto;padding-top:var(--s2)}

/* Строки «название — сумма»: сумма стоит на линии первой строки названия,
   а не посередине двух строк. */
.lines{display:flex;flex-direction:column;gap:var(--s4)}
.lines > .between{align-items:baseline}

/* Итоговая строка внизу колонки: волосок сверху отделяет её от описания. */
.fill > .end.rule{box-shadow:inset 0 1px 0 var(--n100);padding-top:var(--s3);align-items:baseline}

/* ── 22. Лендинг partners.alt.vu, 19.09.2026 ───────────────────────────────
   Состав и порядок блоков — лендинг ATLAS Partners (atlaspartners.io), вид —
   эта система. Полосы секций чередуют фон страницы и плиту. Все движения
   делает /assets/landing.js через CSSOM и только при
   prefers-reduced-motion: no-preference на ширине от 901: без скрипта и на
   телефоне страница целиком видна и читается. */

/* Шапка: знак, разделы, вход. Держится сверху при прокрутке. */
.site-bar{position:sticky;top:0;z-index:30;background:var(--n50);
  box-shadow:inset 0 -1px 0 var(--n100)}
.site-bar .container{display:flex;align-items:center;justify-content:space-between;
  gap:var(--s4);min-height:64px}
.site-bar nav{display:none}
@media (min-width:1024px){ .site-bar nav{display:flex;gap:var(--s1)} }
.site-bar nav a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 var(--s3);
  border-radius:var(--r-pill);font-size:14px;font-weight:500;color:var(--n500)}
.site-bar nav a:hover{background:var(--white);color:var(--n900);text-decoration:none}

/* Полоса секции во всю ширину; внутри — .container. */
.band{position:relative;padding:var(--s9) 0}
@media (min-width:1280px){ .band{padding:calc(var(--s9) * 2) 0} }
.band.raised{background:var(--white)}
.band-head{max-width:720px;margin-bottom:var(--s7)}
.band-head .t-body{margin-top:var(--s3);color:var(--n500)}

/* Первый экран: текст слева, карта справа, свечение фирменных цветов за
   картой — то же пятно, что в шапке мобильных приложений (src/android.py). */
.hero{position:relative;overflow:hidden;padding:var(--s9) 0}
@media (min-width:1280px){ .hero{padding:calc(var(--s9) * 2) 0 var(--s9)} }
.hero-tint{position:absolute;inset:-10% 0 auto auto;width:64%;height:90%;
  pointer-events:none;opacity:.22;filter:blur(40px);
  background:radial-gradient(52% 58% at 70% 40%,var(--brand) 0%,transparent 70%),
    radial-gradient(46% 50% at 30% 20%,var(--brand-glow) 0%,transparent 72%)}
.hero-grid{position:relative;display:grid;gap:var(--s7);align-items:center}
@media (min-width:1024px){ .hero-grid{grid-template-columns:1fr 1.08fr;gap:var(--s8)} }
.hero-copy .t-body{margin-top:var(--s4);color:var(--n500);max-width:520px}
.hero-copy .actions{margin-top:var(--s7)}

/* Лицо карты — файл эмитента, только уменьшен. Скругление — как у самой
   карты; обрезки нет. */
.card-face{display:block;width:min(620px,100%);height:auto;margin-left:auto;
  border-radius:var(--r-sheet);
  box-shadow:0 34px 56px #00000080,0 12px 26px #cbf14a26}
.card-wrap{position:relative;will-change:transform}

/* Три факта под первым экраном: волосок слева, а не цветная рамка. */
.facts{display:grid;gap:var(--s4);margin-top:var(--s8)}
@media (min-width:768px){ .facts{grid-template-columns:repeat(3,minmax(0,1fr))} }
.facts > div{padding-left:var(--s4);box-shadow:inset 1px 0 0 var(--n300)}

/* «Два источника»: сцена закреплена, карточки поднимаются при прокрутке. */
.scrub-pin{display:flex;flex-direction:column;justify-content:center}
.src-grid{display:grid;gap:var(--s4)}
@media (min-width:768px){ .src-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
.src-card{background:var(--n50);border-radius:var(--r-card);padding:var(--s6);
  box-shadow:var(--sh-card);transform-origin:50% 100%}
.band:not(.raised) .src-card{background:var(--white)}
.src-card .t-amount{margin:var(--s3) 0}
.src-team{margin-top:var(--s5)}
.scrub-hint{display:none}
@media (min-width:901px) and (prefers-reduced-motion:no-preference){
  .scrub{min-height:260vh}
  .scrub .scrub-pin{position:sticky;top:64px;min-height:calc(100vh - 64px)}
  .scrub-hint{display:block;margin-top:var(--s5)}
}

/* Витрина кабинета: демо-данные в тех же компонентах, что и кабинет. */
.showcase{display:grid;gap:var(--s7);align-items:center}
@media (min-width:1024px){ .showcase{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)} }
.frame{background:var(--n50);border-radius:var(--r-card);padding:var(--s5);
  box-shadow:var(--sh-float)}
.frame .row{padding-left:0;padding-right:0}

/* Лестница ставок: карточка отзывается на наведение подъёмом. */
.lift{transition:transform var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease)}
@media (hover:hover){ .lift:hover{transform:translateY(-2px);box-shadow:var(--sh-float)} }
.formula{display:grid;gap:var(--s3);align-items:center;margin-top:var(--s5)}
@media (min-width:1024px){ .formula{grid-template-columns:1fr auto 1fr auto 1fr} }
.formula .plus{font-size:20px;font-weight:600;color:var(--n500);text-align:center}

/* Каналы: без скрипта — ряд меток; со скриптом на десктопе — сцена кругов. */
.chan-field{position:relative;display:flex;flex-wrap:wrap;gap:var(--s3)}
.chan-field .chip svg{width:18px;height:18px}
@media (min-width:901px) and (prefers-reduced-motion:no-preference){
  .chan-scrub{min-height:230vh}
  .chan-scrub .scrub-pin{position:sticky;top:64px;min-height:calc(100vh - 64px)}
  .chan-scrub.is-scene .chan-field{height:min(560px,58vh)}
}
/* Кружок площадки. Внутреннее свечение идёт от края внутрь на половину
   радиуса (правка Ника 24.09.2026): на тёмном фоне плита почти того же
   тона, и без свечения кружки сливались с полосой. Свечение задано долями
   радиуса, поэтому одинаково выглядит и на большом кружке, и на маленьком. */
.bub{position:absolute;left:0;top:0;border-radius:var(--r-pill);display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:var(--s2);
  background:radial-gradient(circle at 50% 50%, #0000 50%, var(--bub-glow) 100%),
    var(--white);
  color:var(--n900);box-shadow:var(--sh-float);
  will-change:transform,filter,opacity;cursor:default}
.bub b{font-weight:600;text-align:center;padding:0 var(--s2)}
.bub svg{color:var(--viz-1)}
@media (hover:hover){ .bub:hover{box-shadow:var(--sh-float),inset 0 0 0 1.5px var(--viz-1)} }

/* Марафон: вкладки недель — радиокнопки в чипах, панели без скрипта. */
.weeks{display:flex;flex-wrap:wrap;gap:var(--s2);margin-bottom:var(--s5)}
.weeks label.chip:has(input:checked){background:var(--n900);color:var(--white);box-shadow:none}
.mar-panel{display:none}
.mar-tabs:has(#mw1:checked) .mar-panel[data-w="1"],
.mar-tabs:has(#mw2:checked) .mar-panel[data-w="2"],
.mar-tabs:has(#mw3:checked) .mar-panel[data-w="3"],
.mar-tabs:has(#mw4:checked) .mar-panel[data-w="4"]{display:block}
.mar-grid{display:grid;gap:var(--s5);align-items:start}
@media (min-width:1024px){ .mar-grid{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)} }

/* Финал: призыв слева, карта справа. */
.final{display:grid;gap:var(--s7);align-items:center}
@media (min-width:1024px){ .final{grid-template-columns:minmax(0,1fr) minmax(0,.9fr)} }

/* Подвал лендинга. */
.site-foot-band{padding:var(--s8) 0;box-shadow:inset 0 1px 0 var(--n100)}

/* Появление блока при прокрутке. Без скрипта класса .will-reveal нет, и
   блок виден сразу. */
@media (prefers-reduced-motion:no-preference){
  .will-reveal{opacity:0;transform:translateY(26px);
    transition:opacity .9s var(--ease),transform .9s var(--ease)}
  .will-reveal.in{opacity:1;transform:none}
  .card-intro{animation:cardIn .9s var(--ease) .15s both}
  .tint-intro{animation:tintIn 1.4s var(--ease) .05s both}
  @keyframes cardIn{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
  @keyframes tintIn{from{opacity:0}to{opacity:.22}}
}

/* На полосе-плите карточки берут цвет фона страницы: плита на плите того же
   цвета не видна. */
.band.raised .stat,.band.raised .card{background:var(--n50)}

/* Подпись круга канала: 16 у крупных, 13 у мелких — кегли системы. */
.bub b{font-size:16px;line-height:22px;overflow-wrap:anywhere}
.bub b.sm{font-size:13px;line-height:18px}
/* Метки каналов в сцене не видны глазу, но остаются для озвучки. */
.chan-scrub.is-scene .chan-field > .chip{position:absolute;opacity:0;pointer-events:none}
.band-head .actions{margin-top:var(--s6)}

/* ── 23. Кабинет по структуре ATLAS Partners, 19.09.2026 ────────────────────
   Состав, порядок и раскладка экранов кабинета — как у ATLAS (site/*.html:
   сетка 7 | 5, быстрые действия, лесенка уровней, клетки задач, оглавление
   Академии, путь первых шагов, вход с колонкой фактов). Вид — эта система. */

/* Ряды 7 | 5, 5 | 7, 4 | 8 на десктопе; на планшете и телефоне — одна колонка.
   Карточки в ряду равной высоты: ячейка сетки тянет свою карточку. */
@media (min-width:1280px){
  .grid.g-75{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .grid.g-57{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .grid.g-48{grid-template-columns:minmax(0,4fr) minmax(0,8fr);align-items:start}
}
.col{display:flex;flex-direction:column;gap:var(--s3)}
@media (min-width:1280px){ .col{gap:var(--s5)} }

/* Главная карточка экрана всплывает при загрузке — один раз. */
@media (prefers-reduced-motion:no-preference){
  .rise{animation:cardIn .9s var(--ease) .15s both}
}

/* Карточки кабинета отзываются на наведение подъёмом. */
@media (hover:hover){
  .card.lift,.tile{transition:transform var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease)}
  .card.lift:hover,.tile:hover{transform:translateY(-2px);box-shadow:var(--sh-float)}
}

/* Плашки месяца под суммой: три в ряд, на телефоне столбиком. */
.plates{display:grid;gap:var(--s3)}
@media (min-width:768px){ .plates{grid-template-columns:repeat(3,minmax(0,1fr))} }
.plate{background:var(--n50);border-radius:var(--r-field);padding:var(--s4)}
.plate .t-row{margin-top:var(--s1)}

/* Быстрые действия: плитка — значок, название, подпись. */
.tiles{display:grid;gap:var(--s3)}
@media (min-width:768px){ .tiles{grid-template-columns:repeat(3,minmax(0,1fr))} }
.tile{display:flex;align-items:center;gap:var(--s3);min-height:76px;padding:var(--s4);
  background:var(--white);border-radius:var(--r-card);box-shadow:var(--sh-card);
  color:var(--n900);text-decoration:none}
.tile:hover{text-decoration:none}
.tile .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)}
.tile .t-sub{display:block}

/* Лесенка уровней: пройденные тише, текущий — плотный, будущие — дорожка. */
.ladder{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s1)}
.ladder > div{padding:var(--s2) var(--s3);border-radius:var(--r-field);background:var(--n50);
  font-size:13px;line-height:18px;color:var(--n500)}
.ladder > div b{display:block;font-size:16px;line-height:22px;font-weight:600;color:var(--n500)}
.ladder > .past b{color:var(--n850)}
.ladder > .on{background:var(--n900);color:var(--white)}
.ladder > .on b{color:var(--white)}

/* Поле с адресом и кнопкой копирования рядом. */
.copyrow{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);background:var(--n50);
  border-radius:var(--r-field);padding:var(--s3) var(--s3) var(--s3) var(--s4)}
.copyrow > :first-child{flex:1 1 120px;min-width:0}

/* Строки «подпись — значение» в карточке. */
.kv{display:flex;flex-direction:column}
.kv > div{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);
  padding:var(--s3) 0;box-shadow:inset 0 -1px 0 var(--n100)}
.kv > div:last-child{box-shadow:none}
.kv > div > :last-child{text-align:right}
/* Значение строки — почта, адрес — переносится, а не раздвигает страницу:
   многоточие запрещено (раздел 5), вылет за экран тоже. */
.kv > div > :last-child{min-width:0;overflow-wrap:anywhere}
.card p{overflow-wrap:anywhere}

/* Строки с полосой доли: воронка, источники. */
.bars-list{display:flex;flex-direction:column;gap:var(--s4)}
.bars-list .viz.meter{margin-top:var(--s2)}
.viz.meter.fat{height:12px}

/* Марафон: клетка задачи 44 — номер или галочка; состояние ещё и словом в
   подписи клетки для озвучки. */
.cells{display:flex;flex-wrap:wrap;gap:var(--s2)}
.cell{position:relative;width:44px;height:44px;border-radius:12px;display:flex;
  align-items:center;justify-content:center;font-size:13px;font-weight:600;
  text-decoration:none;background:var(--n50);color:var(--n850);
  box-shadow:inset 0 0 0 1px var(--n100)}
.cell:hover{text-decoration:none}
@media (hover:hover){ .cell{transition:transform var(--t-fast) var(--ease)} .cell:hover{transform:translateY(-1px)} }
.cell.done{background:var(--ok-bg);color:var(--ok);box-shadow:none}
.cell.ahead{color:var(--n500);background:transparent}
.cell.sel{box-shadow:0 0 0 2px var(--n900)}
.cell .auto{position:absolute;top:4px;right:4px;width:6px;height:6px;border-radius:var(--r-pill);
  background:var(--n500)}
.legend i.cell-done{background:var(--ok-bg);box-shadow:inset 0 0 0 1px var(--ok)}
.legend i.cell-open{background:var(--n50);box-shadow:inset 0 0 0 1px var(--n300)}
.legend i.cell-ahead{background:transparent;box-shadow:inset 0 0 0 1px var(--n100)}
.legend i.cell-auto{width:6px;height:6px;border-radius:var(--r-pill);background:var(--n500)}
.weekchips{display:flex;flex-wrap:wrap;gap:var(--s2)}

/* Академия: оглавление прилипает на десктопе. Текущая статья — жирнее и
   плитой, не цветной чертой. */
@media (min-width:1280px){ .toc{position:sticky;top:var(--s7)} }
.toc a{display:flex;align-items:center;gap:var(--s2);min-height:44px;padding:var(--s2) var(--s3);
  border-radius:12px;color:var(--n850);font-size:14px;line-height:20px;text-decoration:none}
.toc a:hover{background:var(--n50);text-decoration:none}
.toc a[aria-current]{background:var(--n50);color:var(--n900);font-weight:600}
.toc .toc-cat{display:flex;justify-content:space-between;padding:var(--s3) var(--s3) var(--s1)}
.artnav{display:grid;gap:var(--s3)}
@media (min-width:768px){ .artnav{grid-template-columns:1fr 1fr} }
.artnav a{display:flex;flex-direction:column;gap:var(--s1);padding:var(--s4);min-height:44px;
  background:var(--n50);border-radius:var(--r-field);color:var(--n900);text-decoration:none}
.artnav a:hover{text-decoration:none}
.artnav .next{text-align:right}

/* Первые шаги: путь — кружок, название, состояние словом. */
.path{display:flex;flex-direction:column;gap:var(--s2)}
.path > div{display:flex;align-items:center;gap:var(--s3);padding:var(--s3);border-radius:var(--r-field)}
.path > .here{background:var(--n50)}
.path .num{flex:0 0 32px;width:32px;height:32px;border-radius:var(--r-pill);display:flex;
  align-items:center;justify-content:center;font-size:13px;font-weight:600;
  background:var(--n100);color:var(--n850)}
.path .done .num{background:var(--ok-bg);color:var(--ok)}
.path .here .num{background:var(--n900);color:var(--white)}
.opts{display:grid;gap:var(--s2)}
@media (min-width:768px){ .opts{grid-template-columns:repeat(2,minmax(0,1fr))} }
.opts label.row{background:var(--n50);border-radius:var(--r-field);box-shadow:none}
.opts label.row:has(input:checked){box-shadow:inset 0 0 0 2px var(--n900)}
.opts label.row:has(input:focus-visible){outline:2px solid var(--brand-600);outline-offset:2px}

/* Вход: форма слева, колонка фактов справа (на десктопе). */
.auth{display:grid;gap:var(--s8);align-items:start}
.auth-form{max-width:440px;width:100%}
.auth-facts{display:none}
@media (min-width:1280px){
  .auth{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .auth-facts{display:flex;flex-direction:column;gap:var(--s5);padding-top:var(--s9)}
  .auth-facts > div{padding-left:var(--s5);box-shadow:inset 1px 0 0 var(--n300)}
}

/* Подтверждение на месте, как у ATLAS: «Убрать» раскрывает вопрос и кнопку
   под собой. Работает без скрипта: <details class="confirm">. */
details.confirm > summary{list-style:none}
details.confirm > summary::-webkit-details-marker{display:none}
details.confirm[open] > summary{background:var(--n900);color:var(--white)}
details.confirm[open] > form{margin-top:var(--s2)}
.row > .actions{flex:0 0 auto;align-items:flex-start}
@media (max-width:767px){
  .rows .row{flex-wrap:wrap}
  .rows .row > .actions{width:100%}
}
.empty .actions{justify-content:center;margin-top:var(--s4)}
.artnav .t-cap.between{justify-content:flex-start;gap:var(--s1)}
.artnav .next .t-cap.between{justify-content:flex-end}
.path .txt{flex:1;min-width:0}
.path .txt i{display:block;font-style:normal}

/* ── 24. Экран «Статистика», 21.09.2026 ─────────────────────────────────────
   ТЗ Ника: уровень, один период на весь экран, деньги, воронка с разбивкой,
   ссылки и команда, рефералы. Новых цветов нет. Текущий уровень отмечен
   зелёным смыслом «пришло» и словом «Сейчас», закрытый — замком и тихим
   текстом; лайма на экране нет: главного действия у отчёта нет. */

.block{display:block}
.between.wrap{flex-wrap:wrap}

/* Уровень: слева — где ты и сколько до следующего, справа — три ступени. */
.st-status{display:grid;gap:var(--s5)}
@media (min-width:1280px){
  .st-status{grid-template-columns:minmax(0,4fr) minmax(0,8fr);align-items:center;gap:var(--s7)}
}
.st-now{display:flex;flex-direction:column;gap:var(--s2)}
.st-level{font-size:40px;line-height:44px;font-weight:600;letter-spacing:-1px;color:var(--n900)}
.st-meter{margin:var(--s1) 0}
.tiers{list-style:none;padding:0;display:grid;gap:var(--s3)}
@media (min-width:768px){ .tiers{grid-template-columns:repeat(3,minmax(0,1fr))} }
.tier{display:flex;flex-direction:column;gap:var(--s1);padding:var(--s4);
  border-radius:var(--r-card);background:var(--n50)}
.tier b{font-size:18px;line-height:24px;font-weight:600;color:var(--n900)}
.tier ul{list-style:none;padding:0;margin-top:var(--s2);display:flex;flex-direction:column;gap:var(--s1)}
.tier li{font-size:14px;line-height:20px;color:var(--n850)}
.tier.on{background:var(--ok-bg);box-shadow:inset 0 0 0 1.5px var(--ok)}
.tier.locked b,.tier.locked li{color:var(--n500)}
.tier-lock{display:inline-flex;color:var(--n400)}

/* Менеджер уровня Platinum. */
.mgr{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);padding:var(--s3);
  border-radius:var(--r-field);background:var(--n50)}
.mgr .ic{flex:0 0 40px;width:40px;height:40px;border-radius:var(--r-pill);background:var(--white);
  display:flex;align-items:center;justify-content:center;color:var(--n850)}
.mgr-txt{flex:1 1 120px;display:flex;flex-direction:column}

/* Полоса периода: «Всё время» отделена волоском, справа — даты периода.
   Второй ряд — разбивка и линии. На десктопе полоса едет за прокруткой:
   период управляет всем, что ниже. */
/* Отступы полосы — те же, что между блоками страницы (--s5): карточка → ряд,
   ряд → ряд, ряд → карточка и карточка → карточка одинаковы, 20 пикселей
   везде (правка Ника 24.09.2026). Полоса стоит в потоке и ничего своего не
   добавляет: 20 даёт отступ между блоками, ещё 20 — шаг между рядами. */
.pbar{display:flex;flex-direction:column;gap:var(--s5)}
.pbar-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s5) var(--s6)}
/* Внутри ряда всё стоит через --s2: и кнопка от кнопки, и подпись от кнопки,
   и волосок от соседей. Своих добавок у подписи и волоска нет. */
.pbar-set{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2)}
.pbar-range{font-size:14px;line-height:20px;color:var(--n500)}
.vr{width:1px;height:24px;background:var(--n300);margin:0}
.chip svg{flex:0 0 auto}
.chip.off{background:transparent;box-shadow:inset 0 0 0 1px var(--n100);color:var(--n500);cursor:default}
.chip-note{font-size:12px;font-weight:400;color:var(--n500)}
.chip-note::before{content:"· "}

/* Свой период: окно под кнопкой. Без скриптов — <details>. На телефоне
   окно встаёт в поток под рядом кнопок, шире экрана оно не бывает. */
.pop{position:relative}
.pop > summary{list-style:none}
.pop > summary::-webkit-details-marker{display:none}
.pop-body{margin-top:var(--s2);padding:var(--s4);border-radius:var(--r-card);
  background:var(--white);box-shadow:var(--sh-float)}
@media (min-width:768px){
  .pop-body{position:absolute;z-index:20;top:100%;right:0;width:320px}
}
.pop-dates{display:grid;gap:var(--s2)}
.field.sm{min-height:48px;margin-bottom:0}
.field.sm .ic{flex-basis:32px;width:32px;height:32px}
.field input[type="date"]{min-width:0;color-scheme:inherit}

/* Деньги: сумма периода — главная цифра экрана; ячейки линий рядом. */
.money{display:grid;gap:var(--s5)}
@media (min-width:1280px){
  .money{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);align-items:center;gap:var(--s7)}
}
.money-sum{display:flex;flex-direction:column;gap:var(--s1)}
.money-sum b{color:var(--n900);font-weight:600}
.figure{font-size:44px;line-height:48px;font-weight:600;letter-spacing:-1.2px;color:var(--n900)}
@media (min-width:1280px){ .figure{font-size:56px;line-height:60px;letter-spacing:-1.8px} }
.mcells{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
/* Четыре ячейки в ряд — только когда им хватает ширины (колонка контента
   шире 1100); в кабинете с боковым меню это сетка 2 × 2. */
@media (min-width:1600px){ .mcells.n4{grid-template-columns:repeat(4,minmax(0,1fr))} }
.mcell{display:flex;flex-direction:column;gap:var(--s1);padding:var(--s4);border-radius:var(--r-field);
  background:var(--n50);min-width:0}
.mcell .amt{font-size:24px;line-height:30px;font-weight:600;color:var(--n900)}
.mcell .t-cap{display:flex;align-items:center;gap:6px;overflow-wrap:anywhere}
.mcell.lock{background:transparent;border:1.5px dashed var(--n300);padding:calc(var(--s4) - 1.5px)}
.mcell.lock .amt{color:var(--n500)}
.mcell.lock svg{flex:0 0 auto;color:var(--n400)}

/* Воронка: шаг, полоса, число, доля от предыдущего шага. Самый большой
   разрыв — меткой и словом в строке под воронкой, не одним цветом. */
.fsteps{list-style:none;padding:0;display:flex;flex-direction:column;gap:var(--s3)}
.fstep{display:grid;grid-template-columns:minmax(0,1fr) auto auto;
  grid-template-areas:"name n pct" "bar bar bar";align-items:center;gap:var(--s1) var(--s3)}
.fstep > .fname{grid-area:name}
.fstep > svg{grid-area:bar}
.fstep > .fn{grid-area:n;text-align:right}
.fpct{grid-area:pct;min-width:64px;display:flex;justify-content:flex-end;align-items:center;
  font-size:13px;line-height:18px;color:var(--n500)}
@media (min-width:768px){
  .fstep{grid-template-columns:minmax(120px,180px) minmax(0,1fr) 64px 72px;grid-template-areas:"name bar n pct"}
}
.badge.drop{background:var(--warn-bg);color:var(--warn-ink)}
/* Строки со шкалами — тот же шаг, что у соседей внутри карточки. */
ol.bars-list{list-style:none;padding:0;display:flex;flex-direction:column;gap:var(--s3)}
/* Ссылки и команда — рядом под воронкой с 1280. */
@media (min-width:1280px){ .grid.side2{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start} }

/* Таблица в плите — без второй плиты вокруг. */
.table-wrap.flat{background:transparent;box-shadow:none;border-radius:0;overflow-x:auto}
table.tbl tbody th{text-align:left;font-size:15px;line-height:20px;font-weight:500;color:var(--n850);
  white-space:normal;padding:14px var(--s4);border-top:1px solid var(--n50)}
table.tbl tr.total th,table.tbl tr.total td{background:var(--ok-bg);color:var(--n900);font-weight:600;border-top:0}
table.tbl tr.total th{border-radius:var(--r-field) 0 0 var(--r-field)}
table.tbl tr.total td:last-child{border-radius:0 var(--r-field) var(--r-field) 0}
@media (max-width:767px){
  table.tbl tbody th{display:block;padding:5px var(--s4);border:0}
  table.tbl tr.total{border-radius:var(--r-field);background:var(--ok-bg)}
  table.tbl tr.total th,table.tbl tr.total td{border-radius:0;background:transparent}
}

/* Рефералы: поиск, статус и выгрузка одной строкой; итог — три числа. */
.rtool{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s3)}
.rtool-find{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);flex:1 1 320px}
.rtool-find .field{flex:1 1 200px}
.rtool-find .field:nth-of-type(2){flex:0 1 200px}
.rtotal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3)}
.rtotal > div{padding:var(--s3) var(--s4);border-radius:var(--r-field);background:var(--n50)}
.rtotal dd{color:var(--n900);font-weight:600}
th a.sort{display:inline-flex;align-items:center;gap:4px;min-height:44px;color:inherit;text-decoration:none}
th a.sort:hover{color:var(--n900)}
th a.sort .sort-ic{opacity:.45}
th a.sort.on{color:var(--n900)}
th a.sort.on .sort-ic{opacity:1}
table.tbl.refs td.mono-num,table.tbl .badge{white-space:nowrap}

/* Телефон: ступени уровней — лентой вбок, иначе они занимают весь первый
   экран и деньги уходят вниз. Заголовки таблицы рефералов на телефоне
   скрыты (строки — карточками), поэтому сортировка там — полем формы. */
.m-only{display:none}
.sort-lbl{display:none}
@media (max-width:767px){
  /* Ряд уровней прокручивается вбок, но начинается там же, где текст над
     ним (правка Ника 25.09.2026): раньше он выходил за поля карточки, и
     «Silver» стоял левее заголовка. */
  .tiers{grid-auto-flow:column;grid-auto-columns:82%;overflow-x:auto;scroll-snap-type:x mandatory;
    scrollbar-width:none;margin:0;padding:0 0 var(--s1)}
  .tiers::-webkit-scrollbar{display:none}
  .tier{scroll-snap-align:start}
  .m-only{display:flex}
  th a.sort{display:none}
  .sort-lbl{display:inline}
  /* Разбивка — короткие числа: на телефоне остаётся таблицей, а не
     карточками, иначе месяц по дням растягивается на десятки экранов. */
  table.tbl.bd thead{position:static;width:auto;height:auto;overflow:visible;clip-path:none}
  table.tbl.bd thead th{padding:0 6px 8px;font-size:11px;line-height:14px;white-space:normal}
  table.tbl.bd tr{display:table-row;padding:0;border-top:0}
  table.tbl.bd td,table.tbl.bd tbody th{display:table-cell;padding:10px 6px;font-size:13px;line-height:18px;
    border-top:1px solid var(--n100)}
  table.tbl.bd td::before{display:none}
  table.tbl.bd tr.total th,table.tbl.bd tr.total td{background:var(--ok-bg);border-top:0}
  table.tbl.bd tr.total{background:transparent}
}
.tier-lock{color:var(--n500)}
/* Ступень — опора для скрытых подписей внутри: иначе они вылетают из ленты
   прокрутки и раздвигают страницу на телефоне. */
.tier{position:relative}


/* ── 26. Кабинет: одна раскладка на всех ширинах, 24.09.2026 ────────────────
   Решение Ника: блоки не перестраиваются, когда окно шире. Кабинет всегда
   выглядит так, как выглядел до 1280 — тем же столбцом и теми же рядами.
   Полоса контента не растёт дальше --col-max (1200) и стоит по центру окна,
   по бокам — поля.

   Правила ниже гасят десктопные раскладки только внутри кабинета (.shell
   есть лишь в его каркасе). Лендинг, вход и страница ошибки живут по
   прежним правилам и на широком экране перестраиваются, как и раньше.
   Чтобы вернуть перестроение кабинета, достаточно убрать этот раздел.  */

/* Ряд карточек — это блоки, а не ячейки внутри блока: между ними 20, как и
   между любыми блоками кабинета (эталон — «Статистика», решение Ника
   24.09.2026). Раньше сетки и колонки шли по 12, и на «Выплатах» и
   «Ссылках» соседние карточки стояли теснее остальных. Плоские вложения
   внутри карточки (.grid.flat) остаются на 12: это ячейки, а не блоки. */
.shell .grid:not(.flat),
.shell .col{gap:var(--s5)}

@media (min-width:1280px){
  /* Поля по бокам — как до 1280. */
  .shell{--gut:32px}
  .shell .card.lg{padding:var(--s5)}

  /* Ряды карточек: два в ряд, а не три и не четыре. */
  .shell .grid.g-3,
  .shell .grid.g-4{grid-template-columns:repeat(2,1fr)}

  /* Асимметричные ряды десктопа — в один столбец. */
  .shell .grid.g-75,
  .shell .grid.g-57,
  .shell .grid.g-48,
  .shell .grid.g-wide,
  .shell .grid.g-side,
  .shell .grid.side2{grid-template-columns:1fr}

  /* Уровень и деньги: заголовок сверху, ячейки под ним. */
  .shell .st-status,
  .shell .money{grid-template-columns:1fr;gap:var(--s5);align-items:stretch}
  .shell .figure{font-size:44px;line-height:48px;letter-spacing:-1.2px}

  /* Прилипающих колонок в одном столбце не бывает. */
  .shell .sticky,
  .shell .toc{position:static}
}
@media (min-width:1600px){
  .shell .mcells.n4{grid-template-columns:repeat(2,minmax(0,1fr))}
}


/* ── 27. Выбор из списка, 24.09.2026 ───────────────────────────────────────
   Системная выпадашка <select> в тёмной теме рисуется средствами системы:
   синий список, чужие шрифты и отступы — в продукте это видно сразу
   (замечание Ника). Свой выбор: поле, под ним список. Работает без скриптов
   на <details> с радиокнопками внутри, выбранное значение печатает сервер.
   Скрипт только закрывает список после выбора.                          */

.pick{position:relative}
.pick > summary{list-style:none;cursor:pointer}
.pick > summary::-webkit-details-marker{display:none}
.pick > summary .chev{flex:0 0 auto;color:var(--n500);transition:transform var(--t-fast) var(--ease)}
.pick[open] > summary .chev{transform:rotate(180deg)}
/* Список раскрывается по самому длинному названию, а не по ширине поля
   (правка Ника 24.09.2026): раньше «Все статусы» и «Регистрация» обрезались
   многоточием, и выбрать было не из чего. Уже поля список не бывает, шире
   экрана — тоже. Последний в ряду открывается влево, чтобы не вылезать. */
.pick-body{position:absolute;z-index:25;top:calc(100% + var(--s2));left:0;right:auto;
  min-width:100%;width:max-content;max-width:min(420px,calc(100vw - 2 * var(--s4)));
  max-height:min(50vh,340px);overflow-y:auto;padding:var(--s2);
  border-radius:var(--r-card);background:var(--white);box-shadow:var(--sh-float)}
.pick:last-child > .pick-body{left:auto;right:0}
/* Строка списка — в одну строчку (Ник 24.09.2026): перенос делал из пункта
   два этажа и ломал ритм списка. Длинное название ужимается многоточием. */
.pick-item{position:relative;display:flex;align-items:center;justify-content:space-between;
  gap:var(--s3);min-height:44px;padding:0 var(--s3);border-radius:var(--r-field);
  cursor:pointer;font-size:15px;line-height:20px;color:var(--n850);white-space:nowrap}
.pick-item > span:not(.tick){overflow:hidden;text-overflow:ellipsis}
.pick-item input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.pick-item.on,
.pick-item:has(input:checked){background:var(--n50);color:var(--n900);font-weight:600}
/* Галочка стоит в разметке у каждой строки и показывается только у
   выбранной — тогда отметка появляется в тот же миг, что и нажатие. */
.pick-item .tick{visibility:hidden;flex:0 0 auto}
.pick-item:has(input:checked) .tick{visibility:visible}
.pick-item:has(input:focus-visible){outline:2px solid var(--brand-600);outline-offset:2px}
@media (hover:hover){ .pick-item:hover{background:var(--n50)} }


/* ── 28. Вложенные блоки без второй плиты, 24.09.2026 ──────────────────────
   Заголовок раздела на портале лежит внутри карточки (эталон — «Статистика»).
   Когда внутрь карточки попадает то, что раньше стояло на фоне страницы —
   сетка карточек или пустое состояние, — вторая плита поверх первой выглядит
   коробкой в коробке. .flat снимает у вложенных фон и тень, оставляя отступы
   и скругления: смысл группировки сохраняется, слоёв остаётся один.       */

.grid.flat > .card,
.empty.flat{background:var(--n50);box-shadow:none}