/* =========================================================================
   Newton · Реестр оплат — таблица стилей.

   Разметка целиком генерируется строками в app.js, поэтому ни один класс
   здесь не переименовывается и не удаляется: селекторы только уточняются,
   новые добавляются рядом. Исключение — старый экран входа (.login/.spec):
   он переписан на классы .auth* и живёт в public/coins.css, поэтому его
   правила отсюда убраны, а .auth* здесь сознательно не объявляются.

   Принцип этой версии — «воздух вместо линий». Группы разделяются отступом
   и плоскостью, а не рамкой: карточка без обводки на чуть более плотном
   фоне, таблица без внешней рамки, разделители только там, где они несут
   смысл. Три уровня текста (--fg / --fg-2 / --mut) и один тихий серый на
   всё второстепенное: раньше их было четыре и они соревновались.

   Бренд: оранжевый #F4470B (логотип, ключевая цифра, линия выручки),
   индиго — цвет действия (кнопки, фокус, активная вкладка).
   Шрифты: Archivo (дисплей) / Inter (текст) / JetBrains Mono (цифры).

   Слои:
     1. токены          — палитра, шкалы, движение
     2. база            — reset, типографика, фокус
     3. оболочка        — .top .nav .who .wrap .sync .theme
     4. экраны          — смена пароля, мастер, реестр, дашборд, админка
     5. компоненты      — кнопки, таблицы, пилюли, чипы, графики, диалог
     6. движение        — появление экрана, карточек, строк, полос, графика
     7. отзывчивость    — 1400 / 1180 / 1100 / 1000 / 900 / 768 / 700 / 640 / 420
   ========================================================================= */

/* ============================ 1. ТОКЕНЫ ================================ */
/* Метрики Arial подогнаны под Inter: при поздней загрузке основного шрифта
   длина строк и высота блоков почти не меняются. */
@font-face{
  font-family:'Inter Metric Fallback';
  src:local('Arial');
  size-adjust:107.4%;
  ascent-override:90.2%;
  descent-override:22.48%;
  line-gap-override:0%;
}

:root{
  color-scheme:light;

  /* --- поверхности --------------------------------------------------------
     Имена исторические: --ink был «чернильным» фоном тёмной темы. Сейчас это
     фон страницы, --ink2 — карточка, дальше по возрастанию плотности.
     Фон страницы стал чуть плотнее прежнего: белая карточка теперь читается
     как отдельный слой без обводки. */
  --ink:#ECEFF6;            /* фон страницы: холодный, чуть лиловый  */
  --ink2:#FFFFFF;           /* поверхность карточки                  */
  --ink3:#F2F5FA;           /* поднятая поверхность, подложки        */
  --ink4:#E2E7F2;           /* ещё ступень: полосы, шкалы            */
  --ink0:#F8FAFD;           /* «утопленная» поверхность: подвалы     */

  /* линий стало два уровня вместо трёх: видимая граница и волосок.
     --line-strong остался как состояние (hover на контроле), а не ступень. */
  --line:#DCE2EE;           /* граница контрола, шапка таблицы        */
  --line-soft:#E9EDF5;      /* волосок между строками                */
  --line-strong:#B7C0D4;    /* граница в hover                        */
  --row-zebra:var(--ink2);  /* зебра снята: строки делит волосок      */

  /* --- акценты ------------------------------------------------------------
     Основной акцент — фирменный оранжевый Newton #F4470B: кнопки, активная
     вкладка, фокус, линия признанной выручки, логотип. Одна краска на всё,
     индиго осталось только оттенком пилюли «Продление».

     На белом #F4470B даёт 3.7:1 — этого хватает графике, границам и крупной
     цифре (порог 3:1), но не хватает подписи 13px (порог 4.5:1). Поэтому у
     бренда три роли:
       --accent        #F4470B  граница, иконка, линия, цифра дашборда
       --accent-solid  #D83D07  заливка под белый текст, 4.6:1
       --accent-t      #C13908  текст ≤14px: 5.4:1 на белом, 4.7:1 на тинте
     Хекс бренда при этом нигде не «плавает»: --accent ровно #F4470B.      */
  --accent:#F4470B;
  --accent-solid:#D83D07;   /* заливка кнопки: «Опубликовать» и главные CTA */
  --accent-d:#C13908;       /* нажатие / hover заливки                    */
  --accent-t:#C13908;       /* акцент для мелкого текста и активных пунктов */
  --accent-l:#FF7A45;       /* подсветка                                  */
  --orange:var(--accent);   /* исторические имена бренда — те же значения */
  --orange-t:var(--accent-t);
  --orange-d:var(--accent-d);
  --orange-l:var(--accent-l);
  /* индиго больше не акцент, но осталось отдельным оттенком статуса:
     «Продление» рядом с «Возвратом» не должно читаться как оттенок красного */
  --indigo-t:#4741C4;

  /* --white в app.js и в coins.css означает «самый контрастный текст», а не
     белый цвет: буквальным #FFFFFF он делал колонку «Поступило» в реестре и
     подпись NEWTON на карточке входа невидимыми в светлой теме. */
  --white:var(--fg);
  --blue:#3E82C4;           /* второй ряд графиков, ключи .tg          */
  --blue-l:#7FB3E0;
  --blue-t:#28618F;
  --ok:#0E9F6E;
  --warn:#B4690E;
  --bad:#DC2B2B;
  --bad-d:#B62828;

  /* «мягкие» текстовые варианты статусов — на светлых подложках это
     насыщенные цвета, а не осветлённые: иначе текст пропадает. */
  --ok-t:#0B7C57;
  --warn-t:#8A5008;
  --bad-t:#B32020;

  /* --- текст --------------------------------------------------------------
     Три уровня, дальше — только цвет статуса. Контрасты на белой карточке:
       --fg    #12162A  17.9:1   главное: цифры, имена, заголовки
       --fg-2  #3A4056  10.3:1   основной текст, значения
       --mut   #5C6479   5.9:1   подписи, второстепенное
     --mut2 оставлен как псевдоним --mut: он встречается в инлайн-стилях
     app.js, но четвёртый серый интерфейсу не нужен.                     */
  --fg:#12162A;
  --fg-2:#3A4056;
  --mut:#5C6479;
  --mut2:var(--mut);
  --fg-mut:var(--mut);
  --fg-dim:var(--mut);
  --fg-accent:var(--accent);
  --fg-on-accent:#FFFFFF;

  /* --- семантические поверхности -------------------------------------- */
  --bg:var(--ink);
  --surface-1:var(--ink2);
  --surface-2:var(--ink3);
  --surface-3:var(--ink4);
  --surface-sunken:var(--ink0);
  --border:var(--line);
  --border-hover:var(--line-strong);

  /* --- сплошные подложки статусов --------------------------------------
     Пилюля читается и на карточке, и под курсором — подложка непрозрачная
     и работает без обводки. */
  --tint-ok:#E4F6EF;
  --tint-warn:#FDF1DC;
  --tint-bad:#FDE8E8;
  --tint-accent:#FDECE4;
  --tint-orange:#FDECE4;
  --tint-indigo:#EEEDFD;
  --tint-blue:#E7F0FA;
  --tint-mut:#EDF0F7;

  /* --- цвета компонентов ------------------------------------------------ */
  --selection-bg:rgba(244,71,11,.18);
  --scrollbar-color:#C2C9DC;
  --scrollbar-thumb:#CBD2E3;
  --scrollbar-thumb-hover:#AEB7CE;
  --focus-glow:rgba(244,71,11,.18);
  --select-arrow:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C6479' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  --top-bg:rgba(255,255,255,.88);
  --top-shadow:0 1px 0 rgba(18,22,42,.05);
  --logo-glow:0 2px 8px -3px rgba(244,71,11,.6);
  --status-ok-border:#B7E3D2;
  --status-warn-border:#EBCE9A;
  --status-bad-border:#F2BDBD;
  --kpi-accent-border:#F6C7B2;
  --kpi-accent-bg:#FFF7F3;
  --edit-note-text:#6B3E06;
  --error-glow:rgba(220,43,43,.14);
  --btn-shadow:0 1px 2px rgba(18,22,42,.10);
  --skel-clear:rgba(255,255,255,0);
  --skel-shine:rgba(255,255,255,.95);
  --skel-shine-soft:rgba(255,255,255,.9);
  --modal-veil:rgba(18,22,42,.36);
  --on-accent-muted:rgba(255,255,255,.72);
  --ring-start:rgba(244,71,11,.45);
  --ring-end:rgba(244,71,11,0);
  --tg-bg:#141D26;
  --tg-line:#243240;
  --tg-fg:#E7EEF5;

  /* --- шкала интервалов, кратная 4px ----------------------------------- */
  --s-0:2px;  --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px;
  --s-5:20px; --s-6:24px; --s-7:32px; --s-8:40px; --s-9:48px; --s-10:64px;

  /* --- типографическая шкала -------------------------------------------
     Шесть фиксированных ступеней плюс три плавающих для крупного. */
  --fs-2xs:11px; --fs-xs:12px; --fs-sm:13px; --fs-md:15px; --fs-lg:17px;
  --fs-xl:20px;
  --fs-2xl:clamp(22px,calc(1vw + 10px),26px);
  --fs-3xl:clamp(28px,calc(1.3vw + 12px),36px);
  --fs-4xl:clamp(34px,calc(2vw + 12px),48px);

  --lh-tight:1.14;  --lh-snug:1.35;  --lh-base:1.55;  --lh-loose:1.7;
  --ls-tight:-.03em; --ls-snug:-.02em; --ls-wide:.06em; --ls-caps:.12em;

  --font-sans:Inter,'Inter Metric Fallback','Segoe UI Variable Text','Segoe UI',Roboto,Helvetica,Arial,system-ui,sans-serif;
  --font-dsp:Archivo,Inter,'Inter Metric Fallback','Aptos Display','Segoe UI Variable Display','Segoe UI',Arial,sans-serif;
  --font-mono:'JetBrains Mono','Cascadia Mono','SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace;

  /* --- радиусы --------------------------------------------------------- */
  --r:10px;
  --r-xs:6px; --r-sm:var(--r); --r-md:12px; --r-lg:16px; --r-full:999px;

  /* --- высоты (тени) ------------------------------------------------------
     Тени стали короче: раньше они делали вторую «рамку» вокруг карточки.
     Задача тени — только отделить слой от фона. */
  --sh-1:0 1px 2px rgba(18,22,42,.05), 0 1px 1px rgba(18,22,42,.04);
  --sh-2:0 2px 4px rgba(18,22,42,.05), 0 8px 20px -12px rgba(18,22,42,.18);
  --sh-3:0 4px 8px rgba(18,22,42,.06), 0 16px 34px -16px rgba(18,22,42,.22);
  --sh-4:0 8px 16px rgba(18,22,42,.08), 0 32px 64px -24px rgba(18,22,42,.30);
  --sh-inset:none;
  --sh-press:inset 0 2px 4px rgba(18,22,42,.10);
  --sh-accent:0 4px 12px -5px rgba(216,61,7,.45);

  /* --- движение -----------------------------------------------------------
     Одна шкала: 150ms — отклик на ввод, 220ms — появление блока,
     320/520ms — вход экрана и «дорисовка» данных. */
  --dur-1:150ms; --dur-2:220ms; --dur-3:320ms; --dur-4:520ms;
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --ease-std:cubic-bezier(.4,0,.2,1);
  --ease-spring:cubic-bezier(.34,1.32,.64,1);
  --stagger:34ms;           /* шаг каскада для карточек и строк */

  /* --- слои ------------------------------------------------------------- */
  --z-sticky:50; --z-header:50; --z-modal:900; --z-toast:1000;

  /* --- прочее ----------------------------------------------------------- */
  --top-h:64px;
  --gutter:clamp(16px,3vw,44px); /* боковое поле экрана: 16 на телефоне, 44 на ноутбуке */
  --tap:36px;               /* минимальная площадь нажатия для иконок */
  --td-label:104px;         /* колонка подписи в таблице-карточке (телефон) */
  --focus-ring:2px;
  --focus-gap:2px;
}

/* --- тёмная тема: явный выбор -------------------------------------------
   Блок дублируется ниже под prefers-color-scheme для режима «как в системе».
   Значения обоих блоков обязаны совпадать символ в символ. */
:root[data-theme="dark"]{
  color-scheme:dark;

  --ink:#0E1015;
  --ink2:#171A22;
  --ink3:#1F232C;
  --ink4:#2A2F3B;
  --ink0:#12151B;
  --line:#2C323F;
  --line-soft:#242A34;
  --line-strong:#48515F;
  --row-zebra:var(--ink2);

  /* тот же фирменный оранжевый, поднятый по светлоте под тёмный фон:
     #F4470B на #171A22 даёт 4.8:1, #FF7A45 — 6.7:1 и не «садится» в фон.
     Заливка здесь несёт тёмный текст, поэтому solid = accent. */
  --accent:#FF7A45;
  --accent-solid:#FF7A45;
  --accent-d:#FF9366;
  --accent-t:#FF7A45;
  --accent-l:#FFB093;
  --orange:var(--accent);
  --orange-t:var(--accent-t);
  --orange-d:var(--accent-d);
  --orange-l:var(--accent-l);
  --indigo-t:#B8B5FF;
  --blue:#67B0F3;
  --blue-l:#9ACBFA;
  --blue-t:#8DC8FF;
  --ok:#48D6A1;
  --warn:#F2B75F;
  --bad:#FF7272;
  --bad-d:#FF8B8B;
  --ok-t:#73E0B7;
  --warn-t:#FFD08A;
  --bad-t:#FF9B9B;

  /* WCAG 2.1 на карточке #171A22:
     --fg #F3F5FA 15.9:1; --fg-2 #D5DAE5 12.4:1; --mut #9CA5B7 7.0:1. */
  --fg:#F3F5FA;
  --fg-2:#D5DAE5;
  --mut:#9CA5B7;
  --mut2:var(--mut);
  --fg-on-accent:#11131A;

  --tint-ok:#12352B;
  --tint-warn:#382914;
  --tint-bad:#3B1C21;
  --tint-accent:#3A231B;
  --tint-orange:#3A231B;
  --tint-indigo:#27244A;
  --tint-mut:#242A34;
  --tint-blue:#162D43;

  --selection-bg:rgba(255,122,69,.32);
  --scrollbar-color:#495164;
  --scrollbar-thumb:#3B4353;
  --scrollbar-thumb-hover:#515B70;
  --focus-glow:rgba(255,122,69,.26);
  --select-arrow:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239CA5B7' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  --top-bg:rgba(23,26,34,.90);
  --top-shadow:0 1px 0 rgba(255,255,255,.04);
  --logo-glow:0 2px 10px -3px rgba(255,138,92,.55);
  --status-ok-border:#285E4A;
  --status-warn-border:#6D5127;
  --status-bad-border:#73363D;
  --kpi-accent-border:#70402D;
  --kpi-accent-bg:#221A18;
  --edit-note-text:#FFD08A;
  --error-glow:rgba(255,114,114,.20);
  --btn-shadow:0 1px 3px rgba(0,0,0,.34);
  --skel-clear:rgba(255,255,255,0);
  --skel-shine:rgba(255,255,255,.10);
  --skel-shine-soft:rgba(255,255,255,.075);
  --modal-veil:rgba(0,0,0,.66);
  --on-accent-muted:rgba(17,19,26,.68);
  --ring-start:rgba(255,122,69,.52);
  --ring-end:rgba(255,122,69,0);
  --tg-bg:#101820;
  --tg-line:#1F2B36;
  --tg-fg:#E7EEF5;

  --sh-1:0 1px 3px rgba(0,0,0,.38),0 0 0 1px rgba(255,255,255,.025);
  --sh-2:0 3px 8px rgba(0,0,0,.42),0 10px 24px -12px rgba(0,0,0,.70);
  --sh-3:0 6px 14px rgba(0,0,0,.46),0 20px 40px -16px rgba(0,0,0,.78);
  --sh-4:0 10px 20px rgba(0,0,0,.52),0 36px 72px -20px rgba(0,0,0,.86);
  --sh-inset:none;
  --sh-press:inset 0 2px 5px rgba(0,0,0,.42);
  --sh-accent:0 4px 14px -6px rgba(255,122,69,.42);
}

/* --- тёмная тема: «как в системе» --------------------------------------- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;

    --ink:#0E1015;
    --ink2:#171A22;
    --ink3:#1F232C;
    --ink4:#2A2F3B;
    --ink0:#12151B;
    --line:#2C323F;
    --line-soft:#242A34;
    --line-strong:#48515F;
    --row-zebra:var(--ink2);

    /* тот же фирменный оранжевый, поднятый по светлоте под тёмный фон:
       #F4470B на #171A22 даёт 4.8:1, #FF7A45 — 6.7:1 и не «садится» в фон.
       Заливка здесь несёт тёмный текст, поэтому solid = accent. */
    --accent:#FF7A45;
    --accent-solid:#FF7A45;
    --accent-d:#FF9366;
    --accent-t:#FF7A45;
    --accent-l:#FFB093;
    --orange:var(--accent);
    --orange-t:var(--accent-t);
    --orange-d:var(--accent-d);
    --orange-l:var(--accent-l);
    --indigo-t:#B8B5FF;
    --blue:#67B0F3;
    --blue-l:#9ACBFA;
    --blue-t:#8DC8FF;
    --ok:#48D6A1;
    --warn:#F2B75F;
    --bad:#FF7272;
    --bad-d:#FF8B8B;
    --ok-t:#73E0B7;
    --warn-t:#FFD08A;
    --bad-t:#FF9B9B;

    /* WCAG 2.1 на карточке #171A22:
       --fg #F3F5FA 15.9:1; --fg-2 #D5DAE5 12.4:1; --mut #9CA5B7 7.0:1. */
    --fg:#F3F5FA;
    --fg-2:#D5DAE5;
    --mut:#9CA5B7;
    --mut2:var(--mut);
    --fg-on-accent:#11131A;

    --tint-ok:#12352B;
    --tint-warn:#382914;
    --tint-bad:#3B1C21;
    --tint-accent:#3A231B;
    --tint-orange:#3A231B;
    --tint-indigo:#27244A;
    --tint-mut:#242A34;
    --tint-blue:#162D43;

    --selection-bg:rgba(255,122,69,.32);
    --scrollbar-color:#495164;
    --scrollbar-thumb:#3B4353;
    --scrollbar-thumb-hover:#515B70;
    --focus-glow:rgba(255,122,69,.26);
    --select-arrow:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239CA5B7' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
    --top-bg:rgba(23,26,34,.90);
    --top-shadow:0 1px 0 rgba(255,255,255,.04);
    --logo-glow:0 2px 10px -3px rgba(255,138,92,.55);
    --status-ok-border:#285E4A;
    --status-warn-border:#6D5127;
    --status-bad-border:#73363D;
    --kpi-accent-border:#70402D;
    --kpi-accent-bg:#221A18;
    --edit-note-text:#FFD08A;
    --error-glow:rgba(255,114,114,.20);
    --btn-shadow:0 1px 3px rgba(0,0,0,.34);
    --skel-clear:rgba(255,255,255,0);
    --skel-shine:rgba(255,255,255,.10);
    --skel-shine-soft:rgba(255,255,255,.075);
    --modal-veil:rgba(0,0,0,.66);
    --on-accent-muted:rgba(17,19,26,.68);
    --ring-start:rgba(255,122,69,.52);
    --ring-end:rgba(255,122,69,0);
    --tg-bg:#101820;
    --tg-line:#1F2B36;
    --tg-fg:#E7EEF5;

    --sh-1:0 1px 3px rgba(0,0,0,.38),0 0 0 1px rgba(255,255,255,.025);
    --sh-2:0 3px 8px rgba(0,0,0,.42),0 10px 24px -12px rgba(0,0,0,.70);
    --sh-3:0 6px 14px rgba(0,0,0,.46),0 20px 40px -16px rgba(0,0,0,.78);
    --sh-4:0 10px 20px rgba(0,0,0,.52),0 36px 72px -20px rgba(0,0,0,.86);
    --sh-inset:none;
    --sh-press:inset 0 2px 5px rgba(0,0,0,.42);
    --sh-accent:0 4px 14px -6px rgba(255,122,69,.42);
  }
}

/* ============================= 2. БАЗА ================================= */
*{box-sizing:border-box;margin:0;padding:0}

html{
  -webkit-text-size-adjust:100%;   /* iOS не «раздувает» текст при повороте */
  text-size-adjust:100%;
}

html,body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font-sans);
  font-size:var(--fs-md);
  line-height:var(--lh-base);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
body{min-height:100vh;overflow-x:hidden}

h1,h2,h3,h4{font-family:var(--font-dsp);font-weight:800;letter-spacing:var(--ls-snug);line-height:var(--lh-tight)}

code{
  font-family:var(--font-mono);font-size:.92em;
  background:var(--ink3);
  padding:1px 6px;border-radius:var(--r-xs);
  color:var(--fg-2);word-break:break-all;
}

::selection{background:var(--selection-bg);color:var(--fg)}

/* полосы прокрутки — тонкие, не отвлекают от цифр */
*{scrollbar-width:thin;scrollbar-color:var(--scrollbar-color) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border:2px solid transparent;background-clip:padding-box;border-radius:var(--r-full)}
::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover);border:2px solid transparent;background-clip:padding-box}

/* ---- фокус ---------------------------------------------------------------
   Одно правило закрывает всё, что можно сфокусировать. Компоненты внутри
   скролл-контейнеров уводят кольцо внутрь, чтобы его не срезал overflow. */
:focus{outline:none}
:focus-visible{
  outline:var(--focus-ring) solid var(--accent);
  outline-offset:var(--focus-gap);
  border-radius:inherit;
}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:var(--focus-ring) solid var(--accent);
  outline-offset:var(--focus-gap);
}
/* внутри прокручиваемых блоков смещение наружу срезается — уводим внутрь */
.tbl-wrap :focus-visible,.tabs :focus-visible,.nav :focus-visible,
.seg-group :focus-visible{outline-offset:-2px}

/* ---- элементы форм -------------------------------------------------- */
button,input,select,textarea{font-family:inherit;font-size:var(--fs-md);color:inherit}
button{cursor:pointer;border:none;background:none;line-height:var(--lh-snug)}

input,select,textarea{
  width:100%;
  min-height:40px;
  background-color:var(--ink2);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:8px 12px;
  line-height:var(--lh-snug);
  transition:border-color var(--dur-1) var(--ease-out),
             box-shadow  var(--dur-1) var(--ease-out),
             background-color var(--dur-1) var(--ease-out);
}
input:hover:not(:disabled),select:hover:not(:disabled),textarea:hover:not(:disabled){
  border-color:var(--line-strong);
}
input:focus,select:focus,textarea:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--focus-glow);
}
input::placeholder,textarea::placeholder{color:var(--mut);opacity:.75}

/* disabled отличается не только цветом: пунктирная граница + курсор */
input:disabled,select:disabled,textarea:disabled{
  background-color:var(--ink3);
  color:var(--mut);
  border-style:dashed;
  cursor:not-allowed;
  box-shadow:none;
  opacity:.85;
}

/* собственная стрелка select — инлайн data-URI, внешних зависимостей нет */
select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  padding-right:32px;
  background-image:var(--select-arrow);
  background-repeat:no-repeat;
  background-position:right 10px center;
  background-size:12px 12px;
  cursor:pointer;
}
select:disabled{background-image:none;cursor:not-allowed}
select option{background:var(--ink2);color:var(--fg)}

/* ---- утилиты типографики (используются в app.js) --------------------- */
.num,.kpi b,.c-sum b,.mono{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}
.mono{font-family:var(--font-mono)}
.dsp{font-family:var(--font-dsp);font-weight:900;letter-spacing:var(--ls-tight)}
/* «бровка» — тихая подпись над блоком. Трекинг уменьшен: широкая разрядка
   на 11px делала из подписи вторую по громкости строку. */
.eyebrow{
  font-size:var(--fs-2xs);letter-spacing:.1em;text-transform:uppercase;
  color:var(--mut);font-weight:600;line-height:var(--lh-snug);
}

/* ---- уважение к prefers-reduced-motion -------------------------------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    transition-delay:0ms !important;
    scroll-behavior:auto !important;
  }
  .type:hover,.btn:hover,.btn:active,.tab:active,.nav button:active,
  .kpi:hover,.country:hover,.seg:active,.theme .th:active,
  .tbl-wrap tr.clk:active{transform:none !important}
  .skel,.skel-line,.skel-card,.skel-row,.loading::after{
    animation:none !important;
    background-image:none !important;
    background-color:var(--ink3) !important;
  }
  /* каскады и «дорисовка» отключаются целиком: содержимое обязано остаться
     видимым, поэтому обнуляем и смещение, и обводку графика */
  #body,.grid>.card,tbody tr,.bars .b,.types .type,.prev,.fs,.diff>div,.chip,
  .modal-card,.banner,.toast,.fresh{
    animation:none !important;opacity:1 !important;transform:none !important;
  }
  .fresh{transform:translateX(-50%) !important}
  .toast{transform:translate(-50%,0) !important}
  .bars .t i{animation:none !important;transform:none !important;opacity:1 !important}
  .spark path{stroke-dasharray:none !important;stroke-dashoffset:0 !important;animation:none !important}
  .spark circle,.spark text{animation:none !important;opacity:1 !important}
  .sync.lag i,.sync.err i{animation:none !important}
}

/* =========================== 3. ОБОЛОЧКА ===============================
   Шапка: логотип, навигация роли, справа — состояние и учётная запись.
   Обводок в ней нет: слой отделён плотностью фона и одним волоском снизу. */
.top{
  position:sticky;top:0;z-index:var(--z-header);
  display:flex;align-items:center;gap:var(--s-4);
  padding:0 var(--s-6);height:var(--top-h);
  background:var(--top-bg);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  box-shadow:var(--top-shadow);
}
.logo{
  display:flex;align-items:center;gap:var(--s-2);
  font-family:var(--font-dsp);font-weight:900;font-size:var(--fs-lg);letter-spacing:var(--ls-tight);
  flex:0 0 auto;user-select:none;
}
.logo i{
  width:12px;height:12px;display:block;border-radius:4px;
  background:linear-gradient(140deg,var(--orange-l),var(--orange));
  box-shadow:var(--logo-glow);
}

/* Раскладка шапки: логотип фиксирован, меню забирает свободное место,
   блок пользователя прижат к правому краю. Меню не переносится на вторую
   строку никогда — сначала ужимаются внутренние отступы (1440, 1200),
   на узком десктопе остаются одни иконки (769–1000), в крайнем случае
   полоса прокручивается без видимого скроллбара. Шапка всегда одной
   высоты: перенос «Настроек» под логотип был похож на сломанную вёрстку. */
.nav{
  display:flex;gap:var(--s-0);margin-left:var(--s-1);
  flex:1 1 auto;min-width:0;
  flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
  scrollbar-width:none;
}
.nav::-webkit-scrollbar{display:none}
.nav button{
  flex:0 0 auto;
  display:inline-flex;align-items:center;gap:var(--s-2);
  padding:7px var(--s-3);border-radius:var(--r);
  color:var(--mut);font-weight:600;font-size:var(--fs-sm);white-space:nowrap;
  transition:color var(--dur-1) var(--ease-out),
             background-color var(--dur-1) var(--ease-out),
             transform var(--dur-1) var(--ease-out);
}
.nav button .ico{opacity:.7;transition:opacity var(--dur-1) var(--ease-out)}
.nav button:hover{color:var(--fg);background:var(--ink3)}
.nav button:hover .ico{opacity:1}
.nav button:active{transform:translateY(1px)}
/* активный пункт: тихая подложка и акцентный текст вместо залитой плашки
   с подсветкой — на светлой теме сплошная заливка была самым тяжёлым
   пятном экрана и спорила с кнопкой «Опубликовать» */
.nav button.on,.nav button[aria-current="page"]{
  color:var(--accent-t);background:var(--tint-accent);font-weight:700;box-shadow:none;
}
.nav button.on .ico,.nav button[aria-current="page"] .ico{opacity:1;color:var(--accent)}
.nav button.on:hover{background:var(--tint-accent);color:var(--accent-t)}

.who{
  margin-left:auto;flex:0 0 auto;
  display:flex;align-items:center;gap:var(--s-3);
  font-size:var(--fs-sm);color:var(--mut);min-width:0;
}
.who b{color:var(--fg);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* роль — тихая подпись, а не пилюля с обводкой: рамка вокруг двух слов
   в шапке была самой заметной линией на экране */
.who .role{
  font-size:var(--fs-2xs);letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent-t);font-weight:700;white-space:nowrap;
}
/* В шапке остаётся только то, что меняется и на что смотрят: где я
   (навигация), кто я (имя), состояние второго хранилища и выход.
   Филиал дублирует фильтры, название роли человек про себя знает, а
   «база + таблица» в норме — это зелёная точка, а не строка текста.
   Вместе они занимали ~420px и роняли навигацию на вторую строку уже
   на 1400: именно это заказчик и увидел как сломанную вёрстку. */
.who>span:not(.role):not(.sync){display:none}
.who .role{display:none}
/* владелец системы виден короной: у него есть право снимать директоров,
   и это не должно быть неожиданностью — единственная роль, которая
   остаётся видимой */
.role.su{display:inline-flex;align-items:center;gap:5px}
.role.su .ico{width:13px;height:13px}
.who .role.su{
  display:inline-flex;font-size:0;gap:0;
  width:28px;height:28px;justify-content:center;
}
.who .role.su .ico{width:15px;height:15px}
/* норма — точка с подсказкой в title; отставание, ошибка и «не подключено»
   текст сохраняют: на них место в шапке потратить как раз стоит */
.top .sync.ok{
  width:28px;height:28px;padding:0;gap:0;font-size:0;
  justify-content:center;background:none;
}
.top .sync.ok i{width:9px;height:9px;flex:0 0 9px}

.wrap{
  width:100%;max-width:1440px;margin:0 auto;
  padding:var(--s-6) var(--gutter) var(--s-10);
}
/* первый заголовок экрана не должен получать двойной отступ сверху */
#body>.h2:first-child,#body>.banner:first-child{margin-top:var(--s-1)}

/* ---- индикатор второго хранилища -------------------------------------
   Точка + короткий текст. Обводка есть только у состояний, требующих
   внимания: в норме это тихая подпись. */
.sync{
  display:flex;align-items:center;gap:var(--s-2);
  font-size:var(--fs-xs);padding:4px 10px;
  border:1px solid transparent;border-radius:var(--r-full);
  cursor:default;white-space:nowrap;color:var(--mut);
  transition:border-color var(--dur-1) var(--ease-out);
}
.sync i{width:7px;height:7px;border-radius:50%;display:block;flex:0 0 7px}
.sync.ok i{background:var(--ok)}
.sync.ok{color:var(--mut)}
.sync.lag i{background:var(--warn)}
.sync.lag{color:var(--warn-t);background:var(--tint-warn)}
.sync.err i{background:var(--bad)}
.sync.err{color:var(--bad-t);background:var(--tint-bad)}
.sync.off i{background:var(--mut)}
.sync.off{color:var(--mut)}

/* ---- переключатель темы ------------------------------------------------
   Три состояния: «как в системе», светлая, тёмная. Живёт в шапке рядом с
   индикатором хранилищ: это настройка просмотра, а не учётной записи. */
.theme{
  display:inline-flex;align-items:center;gap:2px;
  padding:3px;border-radius:var(--r-full);
  background:var(--ink3);
  flex:0 0 auto;
}
.theme .th{
  display:grid;place-items:center;
  width:28px;height:28px;border-radius:var(--r-full);
  color:var(--mut);
  transition:background-color var(--dur-1) var(--ease-out),
             color var(--dur-1) var(--ease-out),
             transform var(--dur-1) var(--ease-spring);
}
.theme .th .ico{width:14px;height:14px}
.theme .th:hover{color:var(--fg);background:var(--ink2)}
.theme .th:active{transform:scale(.9)}
.theme .th.on{color:var(--fg-on-accent);background:var(--accent-solid)}
.theme .th:focus-visible{outline-offset:0}

/* ======================= 4. СМЕНА ПАРОЛЯ =============================== */
.center{min-height:100vh;display:grid;place-items:center;padding:var(--gutter)}
.pw{
  width:100%;max-width:420px;
  background:var(--ink2);border-radius:var(--r-lg);
  padding:var(--s-7);box-shadow:var(--sh-2);
}
.pw h1{margin:var(--s-3) 0 var(--s-2)}

/* ==================== 5. СЕТКА, КАРТОЧКИ, KPI ==========================
   Карточка без обводки: её границу задаёт плоскость и короткая тень.
   Отступ между карточками больше, чем был, — воздух вместо линий. */
.grid{display:grid;gap:var(--s-4)}
.grid>*{min-width:0}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}

.card{
  background:var(--ink2);
  border-radius:var(--r-lg);
  padding:var(--s-6);
  min-width:0;
  box-shadow:var(--sh-1);
  transition:box-shadow var(--dur-2) var(--ease-out),
             transform var(--dur-2) var(--ease-out);
}
/* приподнимаем только сводные плитки: сплошной hover по экрану был бы шумом */
.kpi:hover,.country:hover{box-shadow:var(--sh-2);transform:translateY(-2px)}

/* KPI: цифра громкая, подпись тихая. Иконка — метка смысла в цвете тона,
   без цветной плашки: восемь плашек на дашборде спорили с цифрами. */
.kpi{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-content:start;row-gap:var(--s-1);column-gap:var(--s-3);
}
.kpi .eyebrow{grid-column:1;grid-row:1;align-self:center}
.kpi .k-ico{
  grid-column:2;grid-row:1;align-self:center;
  display:grid;place-items:center;color:var(--mut);
  width:22px;height:22px;
  transition:color var(--dur-2) var(--ease-out);
}
.kpi .k-ico .ico{width:18px;height:18px}
.kpi b{
  grid-column:1/-1;
  display:block;font-family:var(--font-dsp);font-weight:900;
  font-size:var(--fs-3xl);letter-spacing:var(--ls-tight);
  line-height:1.08;margin-top:var(--s-1);
  font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere;
}
.kpi span{
  grid-column:1/-1;
  font-size:var(--fs-xs);color:var(--mut);display:block;
  line-height:var(--lh-snug);max-width:34ch;
}
/* «нет данных»: тире вместо цифры не должно весить как цифра — иначе пустая
   плитка выглядит заполненной жирной полосой */
.kpi b.none{font-size:var(--fs-xl);color:var(--mut);line-height:1.3}

/* главная плитка блока: цифра фирменным оранжевым + едва заметная подложка */
.kpi.acc{background:linear-gradient(180deg,var(--kpi-accent-bg),var(--ink2) 58%)}
.kpi.acc b{color:var(--orange)}
.kpi.acc b.none{color:var(--mut)}
.kpi.t-accent .k-ico{color:var(--orange-t)}
.kpi.t-indigo .k-ico{color:var(--indigo-t)}
.kpi.t-ok     .k-ico{color:var(--ok-t)}
.kpi.t-warn   .k-ico{color:var(--warn-t)}
.kpi.t-bad    .k-ico{color:var(--bad-t)}
.kpi.t-blue   .k-ico{color:var(--blue-t)}
/* Второй ряд показателей — производные: цифра на ступень тише первой.
   Селектор ловит и g3: во втором ряду дашборда осталось три плитки после
   того, как «Оплат в контуре» убрали как повтор заголовка. */
.grid.g4 + .grid.g4 .kpi b,
.grid.g4 + .grid.g3 .kpi b{font-size:var(--fs-2xl)}

/* ============================ 6. МАСТЕР ================================
   Шаги: раньше это была коробка из четырёх ячеек с разделителями. Теперь
   ряд без рамок; подзаголовок шага показан только у активного. */
.steps{
  display:flex;align-items:stretch;gap:var(--s-2);
  margin:0 0 var(--s-6);flex-wrap:wrap;
}
.steps div{
  flex:1 1 160px;padding:var(--s-3) var(--s-4);
  display:flex;gap:var(--s-3);align-items:center;
  border-radius:var(--r-md);min-width:0;
  background:transparent;
  transition:background-color var(--dur-2) var(--ease-out);
}
.steps i{
  width:26px;height:26px;flex:0 0 26px;border-radius:50%;
  background:var(--ink4);display:grid;place-items:center;
  font-style:normal;font-size:var(--fs-xs);font-weight:700;color:var(--mut);
  font-variant-numeric:tabular-nums;
  transition:background-color var(--dur-2) var(--ease-out),
             color var(--dur-2) var(--ease-out);
}
.steps .t{font-size:var(--fs-sm);font-weight:600;color:var(--mut);line-height:var(--lh-snug)}
.steps .s{display:none;font-size:var(--fs-2xs);color:var(--mut);line-height:var(--lh-snug)}
.steps div.on{background:var(--ink2);box-shadow:var(--sh-1)}
.steps div.on i{background:var(--accent-solid);color:var(--fg-on-accent)}
.steps div.on .t{color:var(--fg)}
.steps div.on .s{display:block}
.steps div.done i{background:var(--tint-accent);color:var(--accent-t)}
.steps div.done .t{color:var(--fg-2)}

/* ---- выбор типа операции ---------------------------------------------
   Девять карточек. Обводка появляется только под курсором и фокусом:
   девять постоянных рамок были главным источником шума на первом шаге. */
.types{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3)}
/* Короткий набор роли: у отдела сервиса карточка ровно одна, и в сетке на три
   колонки она висела в левой трети пустого экрана. Колонки по содержимому. */
.types.few{grid-template-columns:repeat(auto-fit,minmax(0,340px))}
.type{
  background:var(--ink2);
  border:1px solid transparent;border-radius:var(--r-lg);
  padding:var(--s-5);text-align:left;position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow:var(--sh-1);
  transition:border-color var(--dur-2) var(--ease-out),
             transform    var(--dur-2) var(--ease-out),
             box-shadow   var(--dur-2) var(--ease-out);
}
.type::before{
  content:'';position:absolute;inset:0 auto 0 0;width:3px;
  background:var(--accent);transform:scaleY(0);transform-origin:50% 0;
  transition:transform var(--dur-2) var(--ease-out);
}
.type:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--sh-2)}
.type:hover::before{transform:scaleY(1)}
.type:focus-visible{border-color:var(--accent)}
.type:focus-visible::before{transform:scaleY(1)}
.type:active{transform:translateY(0) scale(.994);box-shadow:var(--sh-1)}
.type .n{
  font-family:var(--font-dsp);font-weight:900;font-size:var(--fs-xs);
  color:var(--accent-t);letter-spacing:.1em;
}
.type h4{
  font-family:var(--font-dsp);font-size:var(--fs-lg);font-weight:800;
  margin:var(--s-2) 0 var(--s-1);letter-spacing:-.01em;line-height:var(--lh-snug);
}
.type p{font-size:var(--fs-sm);color:var(--mut);line-height:var(--lh-base);min-height:56px}
.type .tag{
  display:inline-block;align-self:flex-start;margin-top:var(--s-3);
  font-family:var(--font-sans);font-weight:600;
  font-size:var(--fs-2xs);padding:3px var(--s-2);border-radius:var(--r-xs);
  background:var(--tint-mut);color:var(--mut);
  letter-spacing:.04em;
}
.type .tag.p{background:var(--tint-ok);color:var(--ok-t)}
.type .tag.m{background:var(--tint-bad);color:var(--bad-t)}
.type .tag.n{background:var(--tint-warn);color:var(--warn-t)}

/* ============================ 7. ФОРМА =================================
   Блок формы больше не «карточка в карточке»: заголовок группы — тихая
   подпись над одной белой плоскостью, разделительной линии под ней нет. */
.form-l{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:var(--s-6);align-items:start}
.form-l>*{min-width:0}

.fs{margin-bottom:var(--s-5)}
.fs>h5{
  font-family:var(--font-sans);
  font-size:var(--fs-2xs);letter-spacing:var(--ls-caps);text-transform:uppercase;
  color:var(--mut);padding:0 0 var(--s-2) var(--s-1);
  font-weight:700;line-height:var(--lh-snug);
}
.fs>.body{
  padding:var(--s-5);display:grid;gap:var(--s-4);
  background:var(--ink2);border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
}

.f{min-width:0}
.f label{display:block;font-size:var(--fs-xs);color:var(--mut);margin-bottom:var(--s-1);font-weight:500}
.f label b{color:var(--accent-t);font-weight:700}
.f .hint{font-size:var(--fs-2xs);color:var(--mut);margin-top:var(--s-1);line-height:var(--lh-snug)}
.f.err input,.f.err select,.f.err textarea{
  border-color:var(--bad);
  background-color:var(--tint-bad);
  box-shadow:inset 2px 0 0 var(--bad);
}
.f.err input:focus,.f.err select:focus{box-shadow:inset 2px 0 0 var(--bad),0 0 0 3px var(--error-glow)}
.f.err label{color:var(--bad-t)}
.f .msg{font-size:var(--fs-2xs);color:var(--bad-t);margin-top:var(--s-1);line-height:var(--lh-snug)}

.row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4)}
.row3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4)}
.row21{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:var(--s-4)}

/* ---- предпросмотр сообщения ------------------------------------------
   Тёмный блок в обеих темах: это не поверхность интерфейса, а то, как
   сообщение увидит финслужба в чате. */
.prev{position:sticky;top:calc(var(--top-h) + var(--s-5))}
.tg{
  background:var(--tg-bg);
  border:1px solid var(--tg-line);border-radius:var(--r-md);
  padding:var(--s-4);
  font-family:var(--font-mono);font-size:var(--fs-sm);line-height:1.62;
  white-space:pre-wrap;word-break:break-word;color:var(--tg-fg);
  max-height:62vh;overflow:auto;
}
.tg .k{color:var(--blue-l)}
.tg .h{color:var(--orange-l);font-weight:600}
.tg .bad{background:rgba(255,99,99,.26);border-radius:var(--r-xs);box-shadow:0 0 0 1px rgba(255,77,77,.38)}

/* список проверок: рамка и разделители убраны, строки делит отступ,
   цвет остаётся только у ошибок и предупреждений */
.checks{margin-top:var(--s-4);display:grid;gap:var(--s-1)}
.checks .it{
  display:flex;gap:var(--s-2);padding:var(--s-2) var(--s-3);
  border-radius:var(--r);
  font-size:var(--fs-sm);align-items:flex-start;line-height:var(--lh-snug);
}
.checks .it i{width:6px;height:6px;border-radius:50%;flex:0 0 6px;margin-top:6px;font-style:normal}
.checks .it b{font-weight:600}
.checks .ok i{background:var(--ok)}
.checks .ok{color:var(--mut)}
.checks .ok b{color:var(--ok-t)}
.checks .er i{background:var(--bad)}
.checks .er{color:var(--bad-t);background:var(--tint-bad)}
.checks .wn i{background:var(--warn)}
.checks .wn{color:var(--warn-t);background:var(--tint-warn)}

/* =========================== 8. КНОПКИ ================================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  background:var(--accent-solid);color:var(--fg-on-accent);
  font-weight:700;font-size:var(--fs-sm);line-height:1.25;
  min-height:40px;
  padding:10px var(--s-5);border-radius:var(--r);
  border:1px solid transparent;
  text-decoration:none;white-space:nowrap;
  box-shadow:var(--btn-shadow);
  transition:background-color var(--dur-1) var(--ease-out),
             color var(--dur-1) var(--ease-out),
             border-color var(--dur-1) var(--ease-out),
             box-shadow var(--dur-1) var(--ease-out),
             transform var(--dur-1) var(--ease-out);
}
.btn:hover{background:var(--accent-d);color:var(--fg-on-accent);box-shadow:var(--sh-accent)}
/* нажатие — только transform, соседи не сдвигаются */
.btn:active{transform:translateY(1px);box-shadow:var(--sh-press)}
.btn:disabled,.btn[aria-disabled="true"]{
  background:var(--ink3);color:var(--mut);
  border-color:var(--line);border-style:dashed;
  cursor:not-allowed;box-shadow:none;transform:none;
}
.btn:disabled:hover{background:var(--ink3);color:var(--mut);box-shadow:none}

.btn.g{background:var(--ink2);border:1px solid var(--line);color:var(--fg-2);font-weight:600;box-shadow:none}
.btn.g:hover{border-color:var(--accent);background:var(--tint-accent);color:var(--accent-t)}
.btn.g:active{transform:translateY(1px);background:var(--ink3)}
.btn.g:disabled{background:transparent;color:var(--mut);border-style:dashed}

/* деструктивное действие в диалоге подтверждения */
.btn.danger{background:var(--bad);color:var(--fg-on-accent)}
.btn.danger:hover{background:var(--bad-d);color:var(--fg-on-accent)}
.btn.danger:disabled{background:var(--ink3);color:var(--mut)}

/* удаление в строке таблицы: в покое — обычная призрачная кнопка, иначе
   строка начинает кричать красным ещё до того, как её собрались трогать.
   Красной она становится ровно в момент намерения: наведение и фокус.
   Селектор с двумя классами (.btn.g.dgr) обязателен — иначе .btn.g:hover
   выигрывает по порядку и перекрашивает кнопку обратно в акцент. */
.btn.dgr,.btn.g.dgr{color:var(--mut)}
.btn.dgr:hover,.btn.g.dgr:hover,
.btn.dgr:focus-visible,.btn.g.dgr:focus-visible{
  border-color:var(--bad);
  background:var(--tint-bad);
  color:var(--bad-t);
}
.btn.dgr:focus-visible,.btn.g.dgr:focus-visible{outline-color:var(--bad)}
.btn.dgr:active,.btn.g.dgr:active{background:var(--tint-bad);color:var(--bad-t)}
.btn.dgr:disabled,.btn.g.dgr:disabled{color:var(--mut);background:transparent;border-color:var(--line)}

.btn.sm{padding:6px var(--s-3);font-size:var(--fs-sm);min-height:32px}

/* кнопка только с иконкой (сброс пароля, отключение, удаление) — площадь
   нажатия --tap. [title] дублирует :has() для браузеров без поддержки :has. */
.btn.sm[title],
.btn.sm:has(>.ico:only-child){
  min-width:var(--tap);min-height:var(--tap);padding:var(--s-2);
}
/* ячейка «Действия» в таблице сотрудников: три кнопки-иконки подряд.
   Размер задаётся явно, не полагаясь на title и :has, — промахнуться
   пальцем по сбросу пароля вместо удаления нельзя. */
td .bar{margin:0;gap:var(--s-2)}
td .bar .btn.sm{min-width:var(--tap);min-height:var(--tap);padding:var(--s-2);flex:0 0 auto}
td .bar .btn.sm .ico{width:16px;height:16px;margin:0}

.bar{display:flex;gap:var(--s-2);align-items:center;margin-top:var(--s-5);flex-wrap:wrap}

/* =========================== 9. ТАБЛИЦЫ ================================
   border-collapse:separate — обязательное условие для липкой шапки:
   при collapse браузеры теряют границу у sticky-th.
   Зебра снята: полосатый фон плюс волосок между строками — двойное
   кодирование одного и того же деления. Строки стали выше: плотность
   даёт воздух вместо линий.                                            */
table{
  width:100%;
  border-collapse:separate;border-spacing:0;
  font-size:var(--fs-sm);
  background:var(--ink2);
}
th{
  position:sticky;top:0;z-index:2;
  background:var(--ink2);
  text-align:left;font-size:var(--fs-2xs);letter-spacing:.08em;text-transform:uppercase;
  color:var(--mut);font-weight:600;
  padding:var(--s-3);
  border-bottom:1px solid var(--line);
  white-space:nowrap;
  /* строка, уходящая под шапку, не «просвечивает» через границу */
  box-shadow:0 1px 0 var(--line);
}
td{
  padding:var(--s-3);
  border-bottom:1px solid var(--line-soft);
  vertical-align:top;
  line-height:var(--lh-snug);
  color:var(--fg-2);
}
th:first-child,td:first-child{padding-left:var(--s-5)}
th:last-child,td:last-child{padding-right:var(--s-5)}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover td{background:var(--ink3)}

/* второстепенная строка внутри ячейки (город, класс, банк) приходит из
   app.js инлайном 10px — приводим её к ступени шкалы, иначе это нечитаемо */
td div[style*="10px"]{font-size:var(--fs-2xs) !important;line-height:1.45}

.num{
  text-align:right;
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
  white-space:nowrap;
  color:var(--fg);
}
th.num{text-align:right}
/* сумма, на которую смотрят в первую очередь */
.num.accent{color:var(--orange-t);font-weight:600}

/* сортировка: стрелка рисуется треугольником, без иконочного шрифта */
th[aria-sort],th[data-sort]{cursor:pointer;user-select:none;padding-right:var(--s-6);transition:color var(--dur-1) var(--ease-out)}
th[aria-sort]:hover,th[data-sort]:hover{color:var(--fg)}
th[aria-sort]::after{
  content:'';position:absolute;right:var(--s-3);top:50%;
  width:0;height:0;margin-top:-2px;
  border-left:3.5px solid transparent;border-right:3.5px solid transparent;
  border-bottom:5px solid currentColor;
  opacity:.28;
  transition:opacity var(--dur-1) var(--ease-out),border-color var(--dur-1) var(--ease-out);
}
th[aria-sort]:hover::after{opacity:.6}
th[aria-sort="none"]::after{opacity:.28;border-bottom-color:currentColor}
th[aria-sort="ascending"],th[aria-sort="descending"]{color:var(--fg)}
th[aria-sort="ascending"]::after{opacity:1;border-bottom-color:var(--accent)}
th[aria-sort="descending"]::after{
  opacity:1;border-bottom:0;
  border-top:5px solid var(--accent);
}

/* кликабельная строка: открывает карточку оплаты */
tr.clk{cursor:pointer}
tbody tr.clk:hover td{background:var(--tint-accent)}
tr.clk:hover td:first-child{box-shadow:inset 3px 0 0 var(--accent-l)}
tr.clk:active td{background:var(--ink4)}
tr.clk:focus-visible{outline:var(--focus-ring) solid var(--accent);outline-offset:-2px}
tbody tr.clk:focus-visible td{background:var(--ink3)}
tr.clk:focus-visible td:first-child{box-shadow:inset 3px 0 0 var(--accent)}

/* отключённая запись справочника или сотрудник: гасим цветом, не прозрачностью
   (opacity .45 давало ~2.4:1 — текст переставал читаться) */
tr.off td{color:var(--mut)}
tr.off td b{color:var(--fg-2);font-weight:600}
tr.off td:first-child{box-shadow:inset 2px 0 0 var(--line-strong)}
tr.off .pill{background:var(--tint-mut);color:var(--mut)}

/* контейнер таблицы: липкая шапка + горизонтальный скролл внутри себя.
   Внешняя рамка убрана — таблица и так отдельная плоскость. */
.tbl-wrap{
  position:relative;
  overflow:auto;
  max-height:min(70vh,680px);
  border-radius:var(--r-lg);
  background:var(--ink2);
  box-shadow:var(--sh-1);
  -webkit-overflow-scrolling:touch;
}
.tbl-wrap>table{border:none;min-width:100%}

/* ==================== 10. ПИЛЮЛИ И ЧИПЫ ================================
   Подложка несёт статус, обводка ничего не добавляла — снята. */
.pill{
  display:inline-block;
  padding:3px var(--s-2);border-radius:var(--r-full);
  font-size:var(--fs-2xs);font-weight:600;letter-spacing:.03em;line-height:1.5;
  background:var(--tint-mut);color:var(--mut);white-space:nowrap;
  vertical-align:baseline;
}
.pill.new{background:var(--tint-ok);color:var(--ok-t)}
/* «Продление» осталось индиговым: оранжевая подложка рядом с розовой
   «Возврат» читалась бы как её оттенок */
.pill.ext{background:var(--tint-indigo);color:var(--indigo-t)}
.pill.sur{background:var(--tint-blue);color:var(--blue-t)}
.pill.ref{background:var(--tint-bad);color:var(--bad-t)}
.pill.fix{background:var(--tint-warn);color:var(--warn-t)}
.pill.can{background:var(--tint-mut);color:var(--mut)}

/* компактные статусные метки */
.chip{
  display:inline-flex;align-items:center;gap:var(--s-1);
  padding:3px var(--s-2);border-radius:var(--r-full);
  background:var(--tint-mut);color:var(--fg-2);
  font-size:var(--fs-xs);font-weight:600;line-height:var(--lh-snug);
  white-space:nowrap;vertical-align:middle;
}
.chip .ico{width:12px;height:12px}
.chip.ok{background:var(--tint-ok);color:var(--ok-t)}
.chip.warn{background:var(--tint-warn);color:var(--warn-t)}
.chip.bad{background:var(--tint-bad);color:var(--bad-t)}
.chip.mut{background:var(--tint-mut);color:var(--mut)}
td .chip{margin-top:var(--s-1)}

/* =========================== 11. ГРАФИКИ =============================== */
.bars{display:grid;gap:var(--s-4);margin-top:var(--s-3)}
/* Подпись стоит НАД полосой, а не слева от неё.
   Слева ей доставалось одиннадцать знаков, и «Шымкент · Аль-Фараби» — самое
   частое, что здесь пишут, — обрезался до «Шымкент · А…». Сравнивать длины
   полос это не мешало, а вот понять, чья полоса, уже нет. Сверху подпись
   получает всю ширину карточки, а полоса — тоже всю, и читается точнее. */
.bars .b{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:var(--s-1) var(--s-3);
  align-items:baseline;font-size:var(--fs-sm);
}
.bars .b>span:first-child{
  grid-column:1;grid-row:1;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--fg-2);
}
.bars .b>.num{grid-column:2;grid-row:1;color:var(--fg);font-weight:600}
.bars .t{
  grid-column:1/-1;grid-row:2;
  height:8px;background:var(--ink4);border-radius:var(--r-full);overflow:hidden;
}
.bars .t i{
  display:block;height:100%;border-radius:var(--r-full);
  background:var(--accent);
  transform-origin:left center;
  transition:width var(--dur-3) var(--ease-out);
  animation:bar-grow var(--dur-4) var(--ease-out) both;
  animation-delay:calc(var(--i,0) * 24ms + 60ms);
}
.bars .t i.alt{background:var(--blue)}

.spark{width:100%;height:150px;display:block;overflow:visible}
.legend{display:flex;gap:var(--s-4);font-size:var(--fs-xs);color:var(--mut);margin-top:var(--s-3);flex-wrap:wrap}
.legend b{display:inline-block;width:9px;height:9px;border-radius:var(--r-xs);margin-right:5px}

/* ================== 12. ЗАГОЛОВКИ, ФИЛЬТРЫ, СЛУЖЕБНОЕ ==================
   Ритм экрана держат отступы заголовков: 40px до раздела, 16px после.  */
.h2{display:flex;align-items:baseline;gap:var(--s-3);margin:var(--s-8) 0 var(--s-4);flex-wrap:wrap}
.h2 h3{font-family:var(--font-dsp);font-weight:800;font-size:var(--fs-2xl);letter-spacing:var(--ls-snug)}
.h2 span{font-size:var(--fs-xs);color:var(--mut);line-height:var(--lh-base);max-width:78ch}

.filters{display:flex;gap:var(--s-2);flex-wrap:wrap;align-items:center;margin-bottom:var(--s-5)}
.filters select,.filters>input,.srch{border-radius:var(--r-full)}
.filters select{
  width:auto;min-width:132px;min-height:36px;
  padding:6px var(--s-4);padding-right:30px;
  font-size:var(--fs-sm);
  background-color:var(--ink2);
}
.filters>input{
  width:auto;min-width:132px;min-height:36px;padding:6px var(--s-4);
  font-size:var(--fs-sm);background-color:var(--ink2);
}
.filters .note{margin-left:auto;color:var(--mut)}
.filters .btn.sm{min-height:36px}

/* поле поиска: <label class="srch"> с иконкой внутри рамки */
.srch{
  display:inline-flex;align-items:center;gap:var(--s-2);
  flex:0 1 320px;min-width:200px;min-height:36px;
  padding:0 var(--s-4);
  background-color:var(--ink2);
  border:1px solid var(--line);
  cursor:text;
  transition:border-color var(--dur-1) var(--ease-out);
}
.srch:hover{border-color:var(--line-strong)}
.srch>.ico{color:var(--mut);flex:0 0 auto;transition:color var(--dur-1) var(--ease-out)}
.filters .srch input,.srch input{
  width:100%;min-width:0;min-height:0;flex:1 1 auto;
  font-size:var(--fs-sm);
  padding:6px 0;
  background:none;border:none;border-radius:0;box-shadow:none;
}
.srch input:hover,.srch input:focus{border:none;box-shadow:none}
.srch input:focus-visible{outline:none}
.srch:focus-within{
  border-color:var(--accent);
  outline:var(--focus-ring) solid var(--accent);
  outline-offset:var(--focus-gap);
}
.srch:focus-within>.ico{color:var(--accent)}

.toast{
  position:fixed;left:50%;bottom:var(--s-6);
  transform:translate(-50%,0);
  background:var(--accent-solid);color:var(--fg-on-accent);
  padding:var(--s-3) var(--s-5);border-radius:var(--r);
  font-weight:700;font-size:var(--fs-sm);z-index:var(--z-toast);
  box-shadow:var(--sh-4);max-width:min(80vw,560px);
  animation:toast-in var(--dur-3) var(--ease-out) both;
}
.toast.bad{background:var(--bad);color:var(--fg-on-accent)}
@keyframes toast-in{
  from{opacity:0;transform:translate(-50%,10px)}
  to  {opacity:1;transform:translate(-50%,0)}
}

/* пустое состояние: иконка + заголовок + пояснение, без пунктирной рамки */
.empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--s-1);
  padding:var(--s-9) var(--s-5);text-align:center;color:var(--fg-2);
  background:var(--ink3);border-radius:var(--r-lg);
  font-size:var(--fs-sm);line-height:var(--lh-base);
}
.empty>.ico{color:var(--mut);margin-bottom:var(--s-2)}
.empty>.ico.lg{width:26px;height:26px}
.empty .note{color:var(--mut)}
td>.empty{background:none;padding:var(--s-8) var(--s-5)}

.note{font-size:var(--fs-xs);color:var(--mut);line-height:var(--lh-loose)}
.note b{color:var(--fg-2);font-weight:600}

/* баннер: одна цветная подложка и полоса слева. Иконка выводится первым
   потомком, поэтому позиционируется абсолютно — flex сломал бы текст с <b>
   на отдельные строки. */
.banner{
  position:relative;
  border-left:3px solid var(--bad);
  background:var(--tint-bad);
  color:var(--bad-t);
  padding:var(--s-4) var(--s-5) var(--s-4) 40px;
  border-radius:var(--r);
  font-size:var(--fs-sm);margin-bottom:var(--s-4);line-height:var(--lh-base);
  animation:fade-up var(--dur-3) var(--ease-out) both;
}
.banner>.ico:first-child{position:absolute;left:15px;top:17px}
.banner b{color:inherit;font-weight:700}
.banner.warn{border-left-color:var(--warn);background:var(--tint-warn);color:var(--warn-t)}
.banner.ok{border-left-color:var(--ok);background:var(--tint-ok);color:var(--ok-t)}

/* ================== 13. СОСТОЯНИЕ ЗАГРУЗКИ И СКЕЛЕТОНЫ ================= */
@keyframes skel-shift{from{background-position:130% 0}to{background-position:-30% 0}}

.skel,.skel-line,.skel-card,.skel-row{
  display:block;position:relative;
  border-radius:var(--r);
  background-color:var(--ink3);
  background-image:linear-gradient(100deg,
      var(--skel-clear) 28%,
      var(--skel-shine) 48%,
      var(--skel-clear) 68%);
  background-size:240% 100%;
  background-repeat:no-repeat;
  animation:skel-shift 1.6s var(--ease-std) infinite;
  color:transparent;user-select:none;pointer-events:none;
}
.skel-line{height:12px;margin-bottom:var(--s-2)}
.skel-line:last-child{margin-bottom:0}
.skel-card{height:104px;border-radius:var(--r-lg);background-color:var(--ink2);box-shadow:var(--sh-1)}
.skel-row{height:36px;margin-bottom:var(--s-2);border-radius:var(--r-xs)}
.skel-row:last-child{margin-bottom:0}

/* `.loading` остался в мастере (загрузка справочников) и в index.html до
   загрузки app.js — подпись плюс блок */
.loading{
  display:grid;gap:var(--s-3);
  padding:var(--s-1) 0 var(--s-6);
  color:var(--mut);
  font-size:var(--fs-xs);letter-spacing:var(--ls-caps);text-transform:uppercase;
  font-weight:600;text-align:left;
}
#app>.loading{padding:var(--s-8) var(--gutter)}
.loading::after{
  content:'';display:block;height:200px;border-radius:var(--r-lg);
  background-color:var(--ink2);
  background-image:linear-gradient(100deg,
      var(--skel-clear)      28%,
      var(--skel-shine-soft) 48%,
      var(--skel-clear)      68%);
  background-size:240% 100%;
  background-repeat:no-repeat;
  animation:skel-shift 1.6s var(--ease-std) infinite;
}

/* ====================== 14. ВЛОЖЕННАЯ НАВИГАЦИЯ ======================== */
.tabs{
  display:flex;align-items:stretch;gap:var(--s-1);
  border-bottom:1px solid var(--line);
  margin-bottom:var(--s-5);
  overflow-x:auto;flex-wrap:nowrap;
  scrollbar-width:none;
}
.tabs::-webkit-scrollbar{display:none}
.tab{
  position:relative;flex:0 0 auto;
  display:inline-flex;align-items:center;gap:var(--s-2);
  padding:var(--s-2) var(--s-3) var(--s-3);
  background:none;border:none;
  color:var(--mut);font-weight:600;font-size:var(--fs-sm);
  white-space:nowrap;border-radius:var(--r) var(--r) 0 0;
  transition:color var(--dur-1) var(--ease-out),
             background-color var(--dur-1) var(--ease-out);
}
.tab .ico{opacity:.7;transition:opacity var(--dur-1) var(--ease-out)}
.tab::after{
  content:'';position:absolute;left:var(--s-2);right:var(--s-2);bottom:0;height:2px;
  background:transparent;border-radius:2px 2px 0 0;
  transition:background-color var(--dur-2) var(--ease-out);
}
.tab:hover{color:var(--fg)}
.tab:hover .ico{opacity:1}
.tab:hover::after{background:var(--line-strong)}
.tab.on,.tab[aria-selected="true"]{color:var(--fg)}
.tab.on .ico,.tab[aria-selected="true"] .ico{opacity:1;color:var(--accent)}
.tab.on::after,.tab[aria-selected="true"]::after{background:var(--accent)}
.tab:disabled{color:var(--mut);cursor:not-allowed}
.tab:disabled::after{background:transparent}

/* ========================== 15. ДИАЛОГ ================================= */
.modal{
  position:fixed;inset:0;z-index:var(--z-modal);
  display:grid;place-items:center;
  padding:var(--s-5);
  background:var(--modal-veil);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  animation:modal-veil var(--dur-2) var(--ease-out) both;
}
.modal-card{
  width:100%;max-width:520px;max-height:86vh;
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--ink2);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-4);
  animation:modal-pop var(--dur-3) var(--ease-out) both;
  transform-origin:50% 50%;
}
.modal-card.wide{max-width:760px}
.modal-head{
  flex:0 0 auto;
  display:flex;align-items:center;gap:var(--s-3);
  padding:var(--s-5) var(--s-5) var(--s-3);
  font-family:var(--font-dsp);font-weight:800;font-size:var(--fs-xl);
  letter-spacing:var(--ls-snug);line-height:var(--lh-snug);
}
.modal-head .ico{color:var(--accent)}
.modal-body{
  flex:1 1 auto;overflow:auto;
  padding:0 var(--s-5) var(--s-5);
  font-size:var(--fs-md);color:var(--fg-2);line-height:var(--lh-base);
}
.modal-body b{color:var(--fg);font-weight:600}
.modal-body .tg{max-height:38vh;font-size:var(--fs-sm)}
.modal-body .eyebrow{display:block}
.modal-body>.bar:first-child{margin-top:0}
.modal-foot{
  flex:0 0 auto;
  display:flex;gap:var(--s-2);justify-content:flex-end;flex-wrap:wrap;
  padding:var(--s-3) var(--s-5);
  background:var(--ink0);
}
@keyframes modal-veil{from{opacity:0}to{opacity:1}}
@keyframes modal-pop{
  from{opacity:0;transform:scale(.97)}
  to  {opacity:1;transform:scale(1)}
}
@keyframes sheet-up{
  from{opacity:0;transform:translateY(24px)}
  to  {opacity:1;transform:none}
}

/* ---- лента связанных операций ---------------------------------------- */
.tl{
  position:relative;
  padding:var(--s-3) var(--s-3) var(--s-3) 26px;
  font-size:var(--fs-sm);line-height:var(--lh-base);color:var(--fg-2);
  border-radius:0 var(--r) var(--r) 0;
}
/* вертикальная линия, связывающая элементы */
.tl::before{
  content:'';position:absolute;left:9px;top:0;bottom:0;width:1px;
  background:var(--line);
}
/* у первого элемента линия начинается от узла, а не от края */
.tl:not(.tl + .tl)::before{top:19px}
/* у последнего — заканчивается на узле (браузеры без :has рисуют до края) */
.tl:not(:has(+ .tl))::before{bottom:auto;height:19px}
/* узел */
.tl::after{
  content:'';position:absolute;left:5px;top:15px;
  width:9px;height:9px;border-radius:50%;
  background:var(--ink4);box-shadow:0 0 0 3px var(--ink2);
}
.tl .mono{color:var(--fg)}
.tl .note{margin-top:var(--s-1);color:var(--mut)}
.tl.on{background:var(--ink3);box-shadow:inset 2px 0 0 var(--accent)}
.tl.on::after{background:var(--accent);box-shadow:0 0 0 3px var(--ink3)}
.tl.on .note{color:var(--fg-2)}

/* ==================== 16. КЛЮЧ → ЗНАЧЕНИЕ ==============================
   Раньше это была сетка из линий: рамка, внутренние разделители и фон
   между строками. Теперь строки делит только отступ. */
.kv{display:grid;gap:var(--s-1)}
.kv div{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-4);
  padding:var(--s-2) 0;
  border-bottom:1px solid var(--line-soft);
  font-size:var(--fs-sm);line-height:var(--lh-snug);
  min-width:0;
}
.kv div:last-child{border-bottom:none}
.kv div>:first-child{color:var(--mut);flex:0 1 auto;min-width:0;font-weight:400}
.kv div>:last-child{
  color:var(--fg);font-weight:600;text-align:right;
  font-variant-numeric:tabular-nums;overflow-wrap:anywhere;
}
.kv div>:only-child{color:var(--fg-2);text-align:left;font-weight:400}
.kv b.bad{color:var(--bad-t)}
.kv b.warn{color:var(--warn-t)}
.kv b.ok{color:var(--ok-t)}

/* ========================== 17. ИКОНКИ ================================= */
/* <svg class="ico"><use href="/icons.svg#users"></use></svg> */
.ico{
  width:16px;height:16px;
  flex:0 0 auto;
  display:inline-block;vertical-align:-.16em;
  color:inherit;
  fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  pointer-events:none;
}
.ico.lg{width:20px;height:20px;vertical-align:-.24em}
.ico.sm{width:14px;height:14px;vertical-align:-.14em}
.btn .ico{margin:0 -1px}

/* ======================= 18. РАСКЛАДКА АДМИНКИ ========================= */
.split{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(300px,380px);
  gap:var(--s-6);
  align-items:start;
}
.split>*{min-width:0}

/* ---- страницы списка сотрудников -------------------------------------
   Штат — три города по 150+ человек, поэтому таблица листается страницами. */
.pager{
  display:flex;align-items:center;justify-content:center;gap:var(--s-3);
  margin-top:var(--s-4);
}
.pager .note{min-width:150px;text-align:center}

/* ================= 19. ПЕРЕКЛЮЧАТЕЛЬ КОНТУРА (ГОРОДА) ==================
   Ком. директор и финслужба смотрят то всю платформу, то одну страну, то
   один город. Это не «ещё один фильтр», а переключатель системы координат,
   поэтому он стоит над фильтрами.

   Раньше это была белая скруглённая коробка с обводкой, тенью, меткой
   «КОНТУР» и подписями «2 гор.» под каждой кнопкой — на экране она весила
   как карточка с данными. Теперь это управляющий элемент: одна строка
   тихих сегментов прямо на фоне страницы, без контейнера. Группа стран и
   список городов разделены тонкой чертой .seg-div. */
.scope{
  display:flex;align-items:center;gap:var(--s-3);
  margin:0 0 var(--s-4);min-width:0;
}
/* метка остаётся: её всё ещё выводит ветка «контур задан ролью» */
.scope-t{
  font-size:var(--fs-2xs);letter-spacing:var(--ls-caps);text-transform:uppercase;
  color:var(--mut);font-weight:600;flex:0 0 auto;
}
.seg-group{
  display:flex;align-items:center;gap:var(--s-0);
  min-width:0;max-width:100%;
  flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  scrollbar-width:none;
  padding:var(--s-0) 0;
}
.seg-group::-webkit-scrollbar{display:none}
.seg{
  flex:0 0 auto;scroll-snap-align:start;
  display:inline-flex;align-items:center;
  padding:6px var(--s-3);border-radius:var(--r-full);
  font-size:var(--fs-sm);font-weight:600;color:var(--mut);
  white-space:nowrap;
  transition:background-color var(--dur-1) var(--ease-out),
             color var(--dur-1) var(--ease-out),
             transform var(--dur-1) var(--ease-out);
}
.seg:hover{background:var(--ink3);color:var(--fg)}
.seg:active{transform:scale(.97)}
.seg.on,.seg[aria-current="true"]{background:var(--tint-accent);color:var(--accent-t)}
/* «Все города / Казахстан / Узбекистан» — сводные контуры, а не ещё один
   город: чуть плотнее по начертанию, но без второго шрифта */
.seg.country{font-weight:700}
.seg-div{
  width:1px;height:18px;flex:0 0 1px;align-self:center;
  background:var(--line);margin:0 var(--s-2);
}
.seg-lock{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px var(--s-3);border-radius:var(--r-full);
  background:var(--tint-mut);color:var(--fg-2);
  font-size:var(--fs-sm);font-weight:600;flex:0 0 auto;
}
.seg-lock .ico{width:13px;height:13px;color:var(--mut)}

/* ===================== 20. СТРАНЫ И СВОДКИ ============================= */
.country{display:flex;flex-direction:column;gap:var(--s-4)}
.c-head{display:flex;align-items:center;gap:var(--s-3)}
.c-head>div{display:flex;flex-direction:column;min-width:0;flex:1 1 auto}
.c-head b{font-family:var(--font-dsp);font-weight:800;font-size:var(--fs-lg)}
.c-head span{font-size:var(--fs-xs);color:var(--mut)}
.c-head .btn{margin-left:auto;flex:0 0 auto}
.flag{
  display:grid;place-items:center;flex:0 0 auto;
  width:40px;height:40px;border-radius:var(--r-md);
  font-family:var(--font-dsp);font-weight:900;font-size:var(--fs-sm);letter-spacing:.02em;
}
.country.kz .flag{background:var(--tint-blue);color:var(--blue-t)}
.country.uz .flag{background:var(--tint-ok);color:var(--ok-t)}
/* сумма страны — вторая по громкости цифра на экране; разделительной
   линии над ней больше нет, её роль играет отступ */
.c-sum{padding:0}
.c-sum b{
  display:block;font-family:var(--font-dsp);font-weight:900;
  font-size:var(--fs-2xl);letter-spacing:var(--ls-tight);
  font-variant-numeric:tabular-nums;
}
.c-sum span{display:block;font-size:var(--fs-xs);color:var(--mut);margin-top:var(--s-1)}

/* ===================== 21. РЕДАКТИРОВАНИЕ ОПЛАТЫ =======================
   Правка публикуется корректировкой, поэтому экран обязан объяснить это
   до того, как автор нажмёт «Опубликовать», а не после. */
.edit-note{
  background:var(--tint-warn);
  border-left:3px solid var(--warn);border-radius:var(--r);
  padding:var(--s-4) var(--s-5);margin-bottom:var(--s-5);
}
.edit-note .e-h{
  display:flex;align-items:center;gap:var(--s-2);
  font-family:var(--font-dsp);font-weight:800;font-size:var(--fs-lg);color:var(--edit-note-text);
}
.edit-note .e-h .ico{width:17px;height:17px}
.edit-note p{font-size:var(--fs-xs);color:var(--fg-2);line-height:var(--lh-loose);margin-top:var(--s-2)}
.edit-note p b{color:var(--edit-note-text)}

/* список изменений: раньше каждая строка была отдельной карточкой в рамке
   внутри карточки. Теперь один блок, строки делит волосок. */
.diff{
  display:grid;margin-top:var(--s-4);
  background:var(--ink2);border-radius:var(--r);overflow:hidden;
}
.diff>div{
  display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap;
  padding:var(--s-2) var(--s-3);
  border-bottom:1px solid var(--line-soft);
  font-size:var(--fs-sm);
  animation:fade-up var(--dur-2) var(--ease-out) both;
}
.diff>div:last-child{border-bottom:none}
.diff>div>span{
  color:var(--mut);font-size:var(--fs-xs);font-weight:600;
  min-width:132px;flex:0 0 auto;
}
.diff s{color:var(--mut);text-decoration-color:var(--bad);font-family:var(--font-mono);font-size:var(--fs-xs)}
.diff .ico{width:13px;height:13px;color:var(--mut);flex:0 0 auto}
.diff b{color:var(--ok-t);font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:600;word-break:break-word}
.diff.empty{
  color:var(--mut);font-size:var(--fs-xs);
  border-radius:var(--r);
  padding:var(--s-4);background:var(--ink3);text-align:center;
}

/* отметка правки в реестре: дата, а не просто флажок — стандарт требует
   фиксировать именно момент редактирования */
.edited{
  display:inline-block;margin-top:var(--s-1);
  font-size:var(--fs-2xs);font-weight:600;
  color:var(--warn-t);background:var(--tint-warn);
  border-radius:var(--r-full);padding:1px var(--s-2);
  font-family:var(--font-sans);letter-spacing:0;
}

/* ---- пульс общей базы -------------------------------------------------
   База одна на три города. Пока экран открыт, коллега мог опубликовать
   оплату; молча перерисовывать таблицу под курсором нельзя — человек читает
   строку. Поэтому плашка внизу предлагает обновиться, а не делает это сама. */
.fresh{
  position:fixed;left:50%;bottom:var(--s-6);transform:translateX(-50%);
  display:flex;align-items:center;gap:var(--s-3);
  max-width:min(92vw,640px);
  padding:var(--s-2) var(--s-2) var(--s-2) var(--s-5);
  background:var(--ink2);border:1px solid var(--accent);
  border-radius:var(--r-full);
  box-shadow:var(--sh-3);
  z-index:var(--z-toast);
  font-size:var(--fs-sm);
  animation:fresh-in var(--dur-3) var(--ease-spring) both;
}
.fresh>.ico{color:var(--accent);flex:0 0 auto}
.fresh span{color:var(--fg-2);min-width:0}
.fresh b{color:var(--accent-t);font-weight:700}
.fresh .btn{flex:0 0 auto}
.fresh .btn.g{min-width:var(--tap);padding:6px var(--s-2)}
@keyframes fresh-in{
  from{opacity:0;transform:translate(-50%,14px) scale(.96)}
  to  {opacity:1;transform:translate(-50%,0) scale(1)}
}

/* ======================= 22. ДВИЖЕНИЕ =================================
   Анимации служат навигации, а не украшению: экран всплывает снизу,
   карточки и строки появляются каскадом сверху вниз (взгляд идёт туда же),
   полосы и график «дорисовываются» — видно, что цифра посчитана сейчас.
   Всё движение отключается при prefers-reduced-motion (см. раздел 2). */
@keyframes fade-up{
  from{opacity:0;transform:translateY(8px)}
  to  {opacity:1;transform:none}
}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes bar-grow{from{transform:scaleX(0);opacity:.4}to{transform:scaleX(1);opacity:1}}
@keyframes pop-in{
  0%  {opacity:0;transform:translateY(10px) scale(.99)}
  100%{opacity:1;transform:none}
}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes ring{
  from{box-shadow:0 0 0 0 var(--ring-start)}
  to  {box-shadow:0 0 0 10px var(--ring-end)}
}

/* экран целиком: одна волна на смену вкладки */
#body{animation:fade-up var(--dur-3) var(--ease-out) both}

/* каскад: --i приходит из app.js, поэтому шаг задаётся один раз здесь */
.grid>.card{animation:pop-in var(--dur-3) var(--ease-out) both}
.grid>.card:nth-child(1){animation-delay:0ms}
.grid>.card:nth-child(2){animation-delay:var(--stagger)}
.grid>.card:nth-child(3){animation-delay:calc(var(--stagger) * 2)}
.grid>.card:nth-child(4){animation-delay:calc(var(--stagger) * 3)}

tbody tr{animation:fade-up var(--dur-2) var(--ease-out) both;animation-delay:calc(var(--i,0) * 12ms)}
.bars .b{animation:fade-up var(--dur-2) var(--ease-out) both;animation-delay:calc(var(--i,0) * 20ms)}

/* линия признанной выручки прочерчивается слева направо */
.spark path{stroke-dasharray:2600;stroke-dashoffset:2600;animation:draw 1.1s var(--ease-out) .15s forwards}
.spark circle{animation:fade-in var(--dur-3) var(--ease-out) both;animation-delay:.7s}
.spark text{animation:fade-in var(--dur-3) var(--ease-out) both;animation-delay:.8s}

/* индикатор второго хранилища: пульс, только когда есть отставание */
.sync.lag i,.sync.err i{animation:ring 1.8s var(--ease-out) infinite}

/* карточки типов операций в мастере: тот же каскад, но по строкам сетки */
.types .type{animation:pop-in var(--dur-3) var(--ease-out) both}
.types .type:nth-child(1){animation-delay:0ms}
.types .type:nth-child(2){animation-delay:26ms}
.types .type:nth-child(3){animation-delay:52ms}
.types .type:nth-child(4){animation-delay:78ms}
.types .type:nth-child(5){animation-delay:104ms}
.types .type:nth-child(6){animation-delay:130ms}
.types .type:nth-child(7){animation-delay:156ms}
.types .type:nth-child(8){animation-delay:182ms}
.types .type:nth-child(9){animation-delay:208ms}

/* блоки формы и предпросмотр всплывают волной */
.prev,.fs{animation:fade-up var(--dur-3) var(--ease-out) both}
.fs:nth-child(2){animation-delay:40ms}
.fs:nth-child(3){animation-delay:80ms}
.fs:nth-child(4){animation-delay:120ms}

/* чипы и пилюли при появлении не прыгают: только прозрачность */
.chip{animation:fade-in var(--dur-2) var(--ease-out) both}

/* ======================= НОВЫЕ ЭКРАНЫ =================================
   Фиксированные метрики удерживают планы и вложения стабильными при смене
   данных, а токены сохраняют тот же контраст в обеих темах. */
.plan-bar{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:var(--s-2)}
.plan-mon{min-width:11ch;text-align:center;font-size:var(--fs-md);font-weight:600;color:var(--fg)}

/* Широкий реестр остаётся локальным скролл-контейнером и не расширяет страницу. */
.tbl-wrap.plans{max-width:100%;overflow-x:auto}
.tbl-wrap.plans>table{width:max-content;min-width:100%}
th.wk{width:82px;min-width:82px}
/* Ячейка недели остаётся table-cell: display:flex вынимает её из колонок,
   и пять чек-поинтов встают в столбик вместо пяти столбцов. Поэтому цель
   и факт разводит отступ, а не flex-контейнер. */
td.wk{width:82px;min-width:82px;vertical-align:top}
.wk-p.mut{color:var(--mut2)}
td.wk>*+*{margin-top:var(--s-1)}
.wk-n{font-weight:600;color:var(--fg-2)}
.wk-r{display:block;white-space:nowrap;font-size:var(--fs-2xs);color:var(--mut2)}
.wk-in,.plan-in{width:100%;height:30px;min-height:30px;padding:var(--s-1) var(--s-2);font-family:var(--font-mono);font-size:var(--fs-xs);text-align:right}
.wk-in{min-width:0}
.plan-in{min-width:0}
/* Поле, валюта и кнопка разбивки живут одной строкой. Обёртка — flex, но
   внутри ячейки, а не вместо неё: сама td остаётся table-cell и не выпадает
   из колонок. */
.plan-cell{display:flex;align-items:center;justify-content:flex-end;gap:var(--s-1)}
/* Предел по самой длинной сумме («250 000 000» — 11 моноширинных знаков):
   без него поле тянет колонку, и таблица вылезает за обёртку в прокрутку. */
.plan-cell .plan-in{flex:1 1 auto;min-width:64px;max-width:132px}
.plan-cell .cur{flex:none;font-size:var(--fs-2xs);color:var(--mut2)}
.plan-cell .btn.split{flex:none;padding:0;width:28px;min-width:28px;height:28px;font-size:var(--fs-md);line-height:1}
.wk-p{display:block;font-family:var(--font-mono);font-size:var(--fs-xs);text-align:right;color:var(--fg)}
.wk-f{display:block;white-space:nowrap;font-family:var(--font-mono);font-size:var(--fs-2xs);text-align:right;color:var(--mut2)}
.wk.s-ok,.wk-item.s-ok{background:var(--tint-ok)}
.wk.s-bad,.wk-item.s-bad{background:var(--tint-bad)}
.wk.s-now,.wk-item.s-now{background:var(--tint-accent)}
.wk.s-now{box-shadow:inset 2px 0 0 var(--accent)}

/* Ячейка выполнения остаётся table-cell. display:flex вынимает td из колонок
   (тот же промах, что был у недельных ячеек): строки начинают наезжать друг
   на друга, а подпись «план не задан» уезжает из своего столбца. Дорожка
   и процент выстраиваются в строку сами — они строчные. */
td.prog-c{white-space:nowrap;vertical-align:middle}
.prog{display:inline-block;width:84px;vertical-align:middle;height:6px;overflow:hidden;border-radius:var(--r-full);background:var(--ink4)}
.prog i{display:block;height:100%;border-radius:var(--r-full);transition:width var(--dur-2) var(--ease-out)}
.prog.ok i{background:var(--ok)}
.prog.warn i{background:var(--warn)}
.prog.bad i{background:var(--bad)}
.prog-v{display:inline-block;margin-left:var(--s-2);vertical-align:middle;font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--mut)}
th.prog-h{min-width:132px}
/* «Это вы» — метка полосой у края, а не заливка всей строки. Тинт во всю
   ширину читается как подсветка ошибки и спорит с состояниями чек-поинтов,
   которые красят ячейки в тех же тонах. */
tbody tr.me td:first-child{box-shadow:inset 3px 0 0 var(--accent)}

/* Равные чек-поинты легче сравнивать взглядом независимо от числа недель. */
.wk-line{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--s-2);margin-top:var(--s-3)}
.wk-item{display:flex;flex-direction:column;gap:var(--s-1);padding:var(--s-3);border-radius:var(--r);background:var(--ink3)}
.wk-item b{font-family:var(--font-mono);font-size:var(--fs-md);color:var(--fg)}
/* В карточке чек-поинта цель и факт стоят друг под другом и по одному краю.
   Правое выравнивание факту нужно только в таблице планов, где он подписывает
   числовой столбец под полем ввода; здесь оно рвёт колонку надвое. */
.wk-item .wk-f{text-align:left}
/* Номер недели — заголовок карточки, дата под ним — подпись. Без этого
   «Н1» и «01–07.08» весят одинаково, и взгляд не находит, за что зацепиться. */
.wk-item .wk-n{font-size:var(--fs-sm);color:var(--fg)}
.wk-item .wk-r{margin-bottom:var(--s-2)}

/* Крупная зона снижает число промахов при перетаскивании и выборе файла. */
.drop{display:grid;justify-items:center;gap:var(--s-2);padding:var(--s-5);border:2px dashed var(--line-strong);border-radius:var(--r-lg);background:var(--ink0);text-align:center;cursor:pointer;transition:border-color var(--dur-2) var(--ease-out),background var(--dur-2) var(--ease-out)}
.drop>.ico{color:var(--mut2)}
.drop:hover,.drop:focus-visible{border-color:var(--accent);background:var(--tint-accent)}
.drop.over{border-style:solid;border-color:var(--accent);background:var(--tint-accent)}
.drop.busy{opacity:.6;pointer-events:none}
.lnk{padding:0;border:0;background:none;color:var(--accent-t);font:inherit;text-decoration:underline;cursor:pointer}
.att{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--s-2);margin-top:var(--s-3)}
.att-i{display:flex;align-items:center;gap:var(--s-2);padding:var(--s-2) var(--s-3);border-radius:var(--r);background:var(--ink3)}
.att-i>.ico{flex:none;color:var(--mut2)}
.att-i>.btn{flex:none}
.att-t{display:flex;flex:1 1 auto;min-width:0;flex-direction:column;gap:var(--s-1)}
.att-t b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fs-sm);color:var(--fg)}
.att-t span{font-size:var(--fs-2xs);color:var(--mut2)}

.rate-list{display:flex;flex-wrap:wrap;gap:var(--s-1)}
.rate{display:inline-flex;align-items:baseline;gap:var(--s-1);padding:3px var(--s-2);border-radius:var(--r-full);background:var(--tint-mut);color:var(--fg-2);font-size:var(--fs-2xs)}
.rate b{font-family:var(--font-mono)}
.rate.on{background:var(--tint-accent);color:var(--accent-t)}
.rate-in{width:80px;font-family:var(--font-mono);font-size:var(--fs-xs);text-align:right}

/* Льгота отделена от операционных статусов, чтобы не выглядеть оценкой оплаты. */
.chip.ben{background:var(--tint-indigo);color:var(--indigo-t)}
.chip.sm{padding:2px var(--s-1);font-size:var(--fs-2xs)}
.fs h5 .ico{width:16px;height:16px;margin-right:var(--s-1);vertical-align:-2px;color:var(--mut2)}

/* Равноправные колонки сохраняют ритм метрик, а auto-fit использует доступную ширину без пустот. */
.plan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--s-3) var(--s-4)}
.plan-grid>div{display:flex;flex-direction:column}
.plan-grid b{display:block;margin-top:var(--s-1);font-family:var(--font-mono);font-size:var(--fs-2xl);font-weight:600;line-height:var(--lh-tight);color:var(--fg)}
.plan-grid b.accent{color:var(--accent-t)}
.plan-grid span{display:block;margin-top:2px;font-size:var(--fs-2xs);line-height:var(--lh-snug);color:var(--mut2)}
.plan-in.lg{width:100%;max-width:200px;height:40px;margin-top:var(--s-1);font-size:var(--fs-md);text-align:left}

/* Отдельная дорожка не делит строку с процентом, поэтому занимает карточку целиком. */
.prog.lg{display:block;width:100%;height:10px;margin-top:var(--s-4)}

/* Тексту пустого состояния отдаётся остаток строки, а действие и пиктограмма не сжимаются. */
.plan-empty{display:flex;align-items:center;gap:var(--s-4)}
.plan-empty>.ico{flex:none;color:var(--mut2)}
.plan-empty>div{flex:1 1 auto;min-width:0}
.plan-empty b{display:block;font-size:var(--fs-md);color:var(--fg)}
.plan-empty>.btn{flex:none}

/* ======================= 23. ОТЗЫВЧИВОСТЬ ==============================
   Опорные ширины: 1440 и 1280 — рабочие ноутбуки заказчика (приоритет),
   1024 — планшет, 430/375 — телефон.                                   */

/* ---- ноутбук: 1281–1440 -------------------------------------------------
   Колонку предпросмотра можно позволить чуть шире — форма от этого не
   страдает, а сообщение перестаёт переносить строки. */
@media (min-width:1281px){
  .form-l{grid-template-columns:minmax(0,1fr) 420px}
  .split{grid-template-columns:minmax(0,1fr) minmax(320px,400px)}
}

/* ---- ноутбук: 1280 и уже ------------------------------------------------
   На 1280 шапка не вмещала логотип + пять пунктов + состояние + роль +
   имя + выход. Убираем то, что дублируется на экране: филиал (он же в
   фильтрах) и текст индикатора хранилищ — остаётся цветная точка с
   подсказкой в title. */
@media (max-width:1440px){
  .who{gap:var(--s-2)}
  .who b{max-width:13ch}
  .nav button{padding:7px 10px;gap:6px}
  /* таблицы на ноутбуке: 8 колонок обязаны укладываться без прокрутки */
  th,td{padding:var(--s-3) 10px}
  th:first-child,td:first-child{padding-left:var(--s-4)}
  th:last-child,td:last-child{padding-right:var(--s-4)}
}

@media (max-width:1180px){
  .who b{max-width:11ch}
  .form-l{grid-template-columns:minmax(0,1fr) 340px}
}

/* ---- узкий десктоп и планшет-ландшафт: 769–1180 -----------------------
   Ниже 1180 подписи меню не помещаются даже сжатыми. Прокручивать всё
   меню ради последнего пункта хуже, чем оставить иконки: пять пунктов
   роли постоянны и запоминаются за день работы. Ниже 769 меню уезжает
   на собственную строку и подписи возвращаются. */
@media (min-width:769px) and (max-width:1180px){
  .nav{flex:0 1 auto}
  .nav button{
    font-size:0;gap:0;
    width:40px;height:36px;padding:0;
    justify-content:center;
  }
  .nav button .ico{width:19px;height:19px}
}

/* ---- планшет: колонка предпросмотра уходит под форму ------------------ */
@media (max-width:1100px){
  .form-l{grid-template-columns:minmax(0,1fr)}
  .prev{position:static}
  .tg{max-height:none}
  .types{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid.g4 + .grid.g4 .kpi b,
  .grid.g4 + .grid.g3 .kpi b{font-size:var(--fs-3xl)}
}

@media (max-width:1000px){
  .split{grid-template-columns:minmax(0,1fr)}
  .g3{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ниже 900 таблицы скроллятся горизонтально внутри своего контейнера,
   страница по горизонтали не растягивается */
@media (max-width:900px){
  .tbl-wrap{max-height:none}
  .tbl-wrap table{min-width:680px}
  .h2{margin:var(--s-7) 0 var(--s-4)}
}

/* ---- касание: 768 и уже -----------------------------------------------
   Два правила на весь блок: шрифт поля не меньше 16px (иначе iOS зумит
   экран на фокусе) и площадь нажатия от 44px. */
@media (max-width:768px){
  :root{--tap:44px}
  input,select,textarea,
  .filters select,.filters>input,.filters .srch input,.srch input{font-size:16px}
  input,select,textarea{min-height:var(--tap)}
  .filters select,.filters>input,.srch{min-height:var(--tap)}
  .btn{min-height:var(--tap);padding:11px var(--s-5)}
  .btn.sm{min-height:40px}
  .filters .btn.sm{min-height:var(--tap)}
  .theme .th{width:34px;height:34px}
  .theme .th .ico{width:16px;height:16px}

  /* шапка: логотип и учётная запись в одну строку, навигация — своей
     строкой с горизонтальной прокруткой. Полные подписи сохраняются:
     «Администрирование» в обрезанном виде читается хуже, чем прокрутка. */
  .top{
    position:static;
    height:auto;padding:var(--s-2) var(--gutter);
    flex-wrap:wrap;gap:var(--s-2) var(--s-3);
    align-items:center;
  }
  .logo{order:1}
  .who{order:2;margin-left:auto;gap:var(--s-2);font-size:var(--fs-xs);flex-wrap:nowrap}
  .who b{max-width:14ch}
  .nav{
    order:3;width:100%;margin-left:0;
    flex-wrap:nowrap;overflow-x:auto;
    gap:var(--s-1);padding:2px 0 var(--s-1);
    scroll-snap-type:x proximity;
    scrollbar-width:none;
  }
  .nav::-webkit-scrollbar{display:none}
  .nav button{flex:0 0 auto;scroll-snap-align:start;padding:9px var(--s-3)}
  .prev{position:static}
}

/* ---- телефон и крупный телефон: одна колонка -------------------------- */
@media (max-width:700px){
  .types{grid-template-columns:minmax(0,1fr)}
  .g2,.g3,.g4{grid-template-columns:minmax(0,1fr)}
  .row2,.row3,.row21{grid-template-columns:minmax(0,1fr)}
  .grid{gap:var(--s-3)}
  .card{padding:var(--s-5)}
  .fs>.body{padding:var(--s-4)}
  .h2{margin:var(--s-6) 0 var(--s-3)}
  .h2 h3{font-size:var(--fs-xl)}
  .kpi b{font-size:var(--fs-3xl)}
  .grid.g4 + .grid.g4,
  .grid.g4 + .grid.g3{margin-top:var(--s-3) !important}
  .steps{gap:var(--s-1);margin-bottom:var(--s-5)}
  .steps div{flex:1 1 100%;padding:var(--s-2) var(--s-3)}
  .type p{min-height:0}
  .filters{gap:var(--s-2)}
  .filters select,.filters>input{min-width:0;flex:1 1 140px}
  .srch{flex:1 1 100%;min-width:0}
  .filters .note{margin-left:0;flex:1 1 100%}
  /* переключатель контура на телефоне: одна прокручиваемая строка во всю
     ширину, метка (если её выводит роль) уходит на строку выше */
  .scope{gap:var(--s-2);flex-wrap:wrap}
  .scope-t{flex:1 1 100%}
  .seg-group{
    width:100%;
    /* край экрана не должен «обрезать» последний город без намёка */
    padding-right:var(--s-4);
    scroll-padding-inline:var(--s-4);
  }
  .bar .btn{flex:1 1 auto}
  .bar .btn.sm[title]{flex:0 0 auto}
  .pw{padding:var(--s-5);box-shadow:none;background:none}

  /* плашка «в базе появились оплаты»: в одну строку текст и кнопка уже
     не помещаются, таблетка с четырьмя строками внутри выглядит сломанной */
  .fresh{
    left:var(--s-3);right:var(--s-3);bottom:var(--s-3);
    transform:none;max-width:none;
    flex-wrap:wrap;row-gap:var(--s-2);
    padding:var(--s-3) var(--s-4);
    border-radius:var(--r-lg);
  }
  .fresh span{flex:1 1 100%;order:2}
  .fresh>.ico{order:1}
  .fresh .btn{order:3;flex:1 1 auto}
  .fresh .btn.g{flex:0 0 auto}
  @keyframes fresh-in{
    from{opacity:0;transform:translateY(14px)}
    to  {opacity:1;transform:none}
  }
  .toast{left:var(--s-3);right:var(--s-3);bottom:var(--s-3);transform:none;max-width:none;text-align:center}
  @keyframes toast-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
}

/* ======================================================================
   ТЕЛЕФОН: 640 и уже — таблица становится списком карточек.

   Таблица с 8–11 колонками на 375px нечитаема даже с прокруткой, поэтому
   строка превращается в блок, а ячейка — в пару «подпись → значение».
   Подпись берётся из data-label у <td>: он проставляется в app.js.
   Ячейка без data-label (действия, пустое состояние, colspan) занимает
   всю ширину карточки. Первая ячейка строки — заголовок карточки: номер
   оплаты или имя, поэтому подпись у неё не выводится.
   ====================================================================== */
@media (max-width:640px){
  .tbl-wrap{
    overflow:visible;max-height:none;
    background:none;box-shadow:none;border-radius:0;
  }
  .tbl-wrap>table{display:block;min-width:0;width:100%;background:none}
  .tbl-wrap thead{display:none}
  .tbl-wrap tbody{display:grid;gap:var(--s-3)}
  .tbl-wrap tbody tr{
    display:block;
    background:var(--ink2);border-radius:var(--r-lg);
    padding:var(--s-3) var(--s-4);
    box-shadow:var(--sh-1);
  }
  .tbl-wrap tbody td{
    display:block;position:relative;
    padding:var(--s-2) 0 var(--s-2) calc(var(--td-label) + var(--s-3));
    border-bottom:1px solid var(--line-soft);
    text-align:left;
    font-size:var(--fs-sm);
    line-height:var(--lh-snug);
  }
  .tbl-wrap tbody td::before{
    content:attr(data-label);
    position:absolute;left:0;top:var(--s-2);width:var(--td-label);
    font-size:var(--fs-2xs);font-weight:600;letter-spacing:.06em;
    text-transform:uppercase;color:var(--mut);line-height:1.5;
  }
  /* ячейка без подписи — во всю ширину */
  .tbl-wrap tbody td:not([data-label]),
  .tbl-wrap tbody td[data-label=""],
  .tbl-wrap tbody td:first-child{padding-left:0}
  .tbl-wrap tbody td:not([data-label])::before,
  .tbl-wrap tbody td[data-label=""]::before,
  .tbl-wrap tbody td:first-child::before{content:none}
  /* заголовок карточки */
  .tbl-wrap tbody td:first-child{
    font-size:var(--fs-md);font-weight:600;color:var(--fg);
    padding-top:0;
  }
  .tbl-wrap tbody td:last-child{border-bottom:none;padding-bottom:0}
  .tbl-wrap tbody td.num{text-align:left}
  .tbl-wrap tbody td div[style*="10px"]{font-size:var(--fs-xs) !important}
  /* фон и подсветка переезжают со строки-таблицы на карточку */
  .tbl-wrap tbody tr:hover td,.tbl-wrap tbody tr.clk:hover td,
  .tbl-wrap tbody tr:nth-child(even) td,.tbl-wrap tbody tr.clk:active td,
  .tbl-wrap tbody tr.clk:focus-visible td{background:none}
  .tbl-wrap tbody tr.clk:hover td:first-child,
  .tbl-wrap tbody tr.clk:focus-visible td:first-child,
  .tbl-wrap tbody tr.off td:first-child{box-shadow:none}
  .tbl-wrap tbody tr.clk:active{transform:scale(.99);background:var(--ink3)}
  .tbl-wrap tbody tr.clk:focus-visible{outline:var(--focus-ring) solid var(--accent);outline-offset:2px}
  .tbl-wrap tbody tr.off{box-shadow:inset 3px 0 0 var(--line-strong),var(--sh-1)}
  .tbl-wrap tbody tr:has(>td>.empty){background:none;box-shadow:none;padding:0}

  /* диалог: снизу вверх во всю ширину, а не окошко по центру */
  .modal{padding:0;place-items:end stretch}
  .modal-card,.modal-card.wide{
    width:100%;max-width:none;max-height:92vh;
    border-radius:var(--r-lg) var(--r-lg) 0 0;
    animation:sheet-up var(--dur-3) var(--ease-out) both;
  }
  .modal-head{padding:var(--s-5) var(--s-4) var(--s-3);font-size:var(--fs-lg)}
  .modal-body{padding:0 var(--s-4) var(--s-4)}
  .modal-foot{
    padding:var(--s-3) var(--s-4);
    padding-bottom:calc(var(--s-3) + env(safe-area-inset-bottom));
  }
  .modal-foot .btn{flex:1 1 auto}
  .modal-body .tg{max-height:44vh}

  /* шапка: под палец увеличиваются корона и выход, подпись выхода уходит */
  .who .role.su{width:var(--tap);height:var(--tap)}
  .who .role.su .ico{width:16px;height:16px}
  .who [data-act=logout]{
    font-size:0;gap:0;
    min-width:var(--tap);min-height:var(--tap);padding:0;
    justify-content:center;
  }
  .who [data-act=logout] .ico{width:18px;height:18px;margin:0}

  /* В карточке подпись уже задаёт ось, поэтому значения не держат табличную ширину. */
  .tbl-wrap tbody td.wk{width:auto;min-width:0;text-align:left}
  .wk-in,.plan-in{width:100%;max-width:160px}
  .wk-p,.wk-f{text-align:left}
  .tbl-wrap tbody td.prog-c{display:flex;justify-content:flex-start}
  .prog-c .prog{flex:0 1 160px}
  .wk-line{grid-template-columns:minmax(0,1fr)}

  /* На телефоне метрики и пустое состояние получают полную ширину для чтения и ввода. */
  .plan-grid{grid-template-columns:minmax(0,1fr)}
  .plan-empty{flex-direction:column;align-items:flex-start}
  .plan-in.lg{width:100%;max-width:none}
}

/* ---- маленький телефон: 375–430 --------------------------------------- */
@media (max-width:430px){
  .who b{display:none}
  /* корона суперпользователя — последнее, что уходит: без неё логотип и
     блок учётной записи встают в одну строку и шапка теряет треть высоты */
  .who .role.su{display:none}
  .logo{font-size:var(--fs-md)}
  .kpi b{font-size:var(--fs-2xl)}
  /* Раскладка та же, что и на десктопе — подпись сверху; на телефоне она
     тем более не помещается сбоку. Уменьшаем только шрифт. */
  .bars .b{font-size:var(--fs-xs)}
  .diff>div>span{min-width:0;flex:1 1 100%}
  .tl{padding-right:0}
  /* «← Назад · страница 1 из 4 · Вперёд →» в одну строку не помещаются */
  .pager{flex-wrap:wrap;gap:var(--s-2)}
  .pager .note{min-width:0}
}

@media (max-width:400px){
  :root{--td-label:88px}
  .tbl-wrap tbody tr{padding:var(--s-3)}
  .flag{width:34px;height:34px}
}