/* ===== Kronos5 — главный экран · фирстиль (оранжевый/серый/чёрный) · мобайл-фёрст =====
   Стиль приближен к референсам личного кабинета: тонкие линии, белые карточки,
   лёгкий шрифт Manrope, фильтры у заголовков, линейные графики, рейтинг-лента. */

/* ---- Светлая тема ---- */
:root{
  --bg:#f3f4f5;          /* Chef's Hat — фон страницы */
  --surface:#ffffff;     /* карточки — белые */
  --surface-2:#e9ecec;   /* мягкий серый фон-плашка (Drifting Cloud-семья) */
  --ink:#100c08;         /* Smoky Black — основной текст */
  --ink-soft:#3d3833;    /* тёплый тёмно-серый */
  --muted:#8a8782;       /* второстепенный — тёплый серый */
  --line:#e0e4e5;        /* тонкие границы (волосяные) */
  --brand:#ff4d06;       /* RAL 2005 Luminous Orange — ФИРМЕННЫЙ оранжевый (тракторы) */
  --brand-2:#ff9408;     /* Merin's Fire — светлый оранжевый (градиенты) */
  --brand-ink:#ffffff;
  --brand-tint:#fbe7de;
  /* Фирменный цвет в роли ЦВЕТА ТЕКСТА (подписи активных чипов, ссылки-инвойсы, счётчики).
     По умолчанию это тот же --brand; отдельный токен нужен светлым палитрам кабинета, где
     заливка читаемая, а тот же тон буквами по белому даёт 2:1 (см. блок «ПАЛИТРА КАБИНЕТА»). */
  --brand-fg:var(--brand);
  --topbar:#ffffff;
  --up:#2ca36a;          /* рост — зелёный (по ТЗ) */
  --down:#e2563f;        /* падение/стагнация — красный (по ТЗ) */
  --release:#d90429;     /* яркий срок релиза; 5.25:1 с белым текстом для мелких подписей */
  /* Текст НА красной заливке. Отдельный токен, а не литерал: модульный слой
     (public/modules) не имеет права писать цвета мимо палитры, и это проверяется
     (dev/dev_esm_check.php). Оба тона красного тёмные — буквы белые в обеих темах. */
  --down-ink:#ffffff;
  --gold:#e0a000;
  --shadow:none;
  --r:16px;     /* единый радиус карточек */
  --r-sm:12px;  /* радиус мелких элементов (чипы, плашки) */
  /* Слой плавающих кружков «Техника»/«Заметки» — выше ВСЕГО, что открывается над
     страницей (самый высокий слой в файле — 1200: .supdrawer/.specj/.spop). Тема его
     не переопределяет: это геометрия, а не цвет. Подробно — комментарий у .qnote. */
  --z-fab:1250;
}

/* ---- Тёмная тема ---- */
[data-theme="dark"]{
  --bg:#100c08;          /* Smoky Black — фон */
  --surface:#1b1712;
  --surface-2:#26211a;
  --ink:#f3f4f5;
  --ink-soft:#cbc7c1;
  --muted:#928c84;
  --line:#322c24;
  --brand:#ff5a1f;       /* RAL 2005 (чуть мягче для тёмного фона) */
  --brand-2:#ff9408;
  --brand-ink:#100c08;
  --brand-tint:#2a1810;
  --topbar:#16120e;
  --up:#33bd82;
  --down:#ef6a52;
  --release:#d90429;
  --down-ink:#ffffff;
  --gold:#f0b62a;
  --shadow:none;
}

/* ---- Нежно-розовая тема (третий вариант; СВЕТЛАЯ по основе) ----
   Выбирается тем же переключателем, что тёмная/светлая (цикл light → dark → rose),
   хранится в localStorage['k5-theme']='rose', ставится атрибутом data-theme на корне
   (initTheme/applyTheme в app.js + ранний скрипт в index.php — без мигания).
   Роза владельца #ff8fab светлая, поэтому текст НА заливке тёмный (--brand-ink),
   а буквы фирменным по белому берут отдельный тёмный тон (--brand-fg) — та же логика,
   что в палитре кабинета :root[data-suptheme="rose"] ниже. Верхняя панель (--topbar)
   намеренно заметно-розовая: просьба «тема вверху экрана нежно-розовая». */
[data-theme="rose"]{
  --bg:#fdf2f7;          /* нежно-розовый фон страницы */
  --surface:#fffafc;     /* карточки — почти белые с еле заметным розовым подтоном */
  --surface-2:#fae6ef;   /* мягкая розовая плашка */
  --ink:#241019;         /* тёмно-сливовый текст — читаемо на розовом */
  --ink-soft:#5a3a47;
  --muted:#9a808b;
  --line:#f4d7e3;        /* розовые волосяные границы */
  --brand:#ff8fab;       /* роза; заливка светлая — текст на ней ТЁМНЫЙ (см. --brand-ink) */
  --brand-2:#ffc2d1;     /* светлее — второй цвет градиентов */
  --brand-ink:#3d1520;   /* тёмно-сливовый: 8.8:1 на #ff8fab (белый дал бы 2.1:1) */
  --brand-tint:#ffeaf0;  /* мягкая подложка чипов и плашек */
  --brand-fg:#c2185b;    /* роза для БУКВ по белому: 5.9:1 против 2.1:1 у #ff8fab */
  --topbar:#ffe3ee;      /* нежно-розовая верхняя панель */
  --up:#2ca36a;
  --down:#e2563f;
  --release:#d90429;
  --down-ink:#ffffff;
  --gold:#d8a01f;
  --shadow:none;
}

/* ---- ПАЛИТРА КАБИНЕТА ПОДРЯДЧИКА (2026-08-24) ----------------------------------------
   Кабинет открывается заводу под его брендом: у Кентавра он розовый (просьба владельца).
   Тема хранится в карточке поставщика (partners.theme, миграция 0036), реестр значений —
   k5_sup_themes() на сервере и SUP_THEMES в app.js; сюда приходит атрибутом на КОРНЕ
   документа (supThemeApply) — именно на корне, потому что шторка карточки и оверлеи
   кабинета выносятся порталом в body и из-под .suppliers палитру бы не унаследовали.

   Переопределяем ТОЛЬКО фирменные переменные и общий фон — ничего «розового» в разметке
   кабинета нет, весь оранжевый там и так идёт через --brand. Цвета ЭТАПОВ (SUP_STATUSES в
   app.js) сознательно не трогаем: это смысловые цвета состояния (просрочено — красный,
   готово — зелёный), одинаковые во всех кабинетах; перекрасив их в розовый, мы бы стёрли
   единственный быстрый признак «где горит».
   Идёт ПОСЛЕ блока тёмной темы — своя пара переменных на каждую (у [data-theme="dark"]
   специфичность ниже, но полагаться на порядок вместо явного дубля не стоит).

   ЦВЕТ ЗАДАН ВЛАДЕЛЬЦЕМ: #ff8fab (2026-08-24). Он светлый, и из этого следует ОДНО важное
   последствие, которое надо помнить при правках: белый текст на такой заливке нечитаем
   (контраст 2.1:1), поэтому --brand-ink здесь ТЁМНЫЙ — тёмно-сливовый, 8.8:1 на этой розе.
   Обратная сторона: там, где --brand работает не заливкой, а ЦВЕТОМ ТЕКСТА по белому
   (подписи активных чипов, ссылки), контраст тоже 2.1:1 — такие подписи бледные. Если это
   мешает, лечится одной парой: оставить #ff8fab заливкам и завести отдельный тёмный тон
   для текста. Пока сознательно оставлено как просил владелец. */
:root[data-suptheme="rose"]{
  --brand:#ff8fab;        /* роза владельца; светлая — текст на ней ТЁМНЫЙ, см. --brand-ink */
  --brand-fg:#c2185b;     /* та же роза, но для БУКВ по белому: 5.9:1 против 2.1:1 у #ff8fab */
  --brand-2:#ffc2d1;      /* ещё светлее — второй цвет градиентов шапки и кнопок */
  --brand-ink:#3d1520;    /* тёмно-сливовый: 8.8:1 на #ff8fab (белый дал бы 2.1:1) */
  --brand-tint:#ffeaf0;   /* мягкая подложка чипов и плашек */
  --bg:#fdf7f9;           /* фон страницы с еле заметным розовым подтоном */
  --surface-2:#faeaf0;
  --line:#f6dde6;
  --gold:#d8a01f;
}
:root[data-suptheme="rose"][data-theme="dark"]{
  /* на тёмном фоне та же роза работает и текстом (8.8:1 к #14090e) — оттенок не меняем */
  --brand:#ff8fab;
  --brand-fg:#ff8fab;
  --brand-2:#ffc2d1;
  --brand-ink:#1a0710;
  --brand-tint:#3a1622;
  --bg:#14090e;
  --surface:#1f1218;
  --surface-2:#2b1a22;
  --line:#3a232d;
}

*{box-sizing:border-box}
/* Поля <input type=number> по всему сайту — без стрелочек-степпера (мешают, когда цифр
   больше одной-двух) и без изменения значения колёсиком мыши (см. js: initNumberInputGuards
   в app.js — блюрит наведённое числовое поле при скролле, само поле остаётся кликабельным). */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
input[type="number"]{-moz-appearance:textfield;appearance:textfield}
html,body{margin:0;padding:0}
html{overflow-y:scroll}   /* всегда резервируем вертикальную полосу прокрутки: открытие выпадашки или смена длины страницы больше не дёргает вёрстку вбок (раньше полоса то появлялась, то исчезала — экран прыгал) */
body{
  font-family:"Manrope","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  background:var(--bg); color:var(--ink);
  font-weight:500; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  padding-bottom:env(safe-area-inset-bottom);
  transition:background .2s ease,color .2s ease;
}
button{font-family:inherit; cursor:pointer; color:inherit}
::-webkit-scrollbar{height:7px;width:7px}
::-webkit-scrollbar-thumb{background:var(--brand);border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:var(--brand-600,#e6420a)}
html{scrollbar-color:var(--brand) transparent;scrollbar-width:thin}

/* ---- Topbar ---- */
.topbar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:11px 16px; background:var(--topbar); color:var(--ink);
  border-bottom:1px solid var(--line);
}
/* левый/правый блоки НЕ сжимаются (иначе nowrap-пилюли вылезают на поиск) —
   всю усадку принимает центральный .hsearch (min-width:0) */
.topbar__left{display:flex; align-items:center; gap:11px; flex:0 0 auto}
.brandlogo{display:inline-flex;align-items:center;cursor:pointer}
.brandlogo__pic{display:inline-flex;align-items:center}
.brandlogo svg,.brandlogo__img,.brandlogo__mark{height:30px;width:auto;display:block}
@media (min-width:680px){ .brandlogo svg,.brandlogo__img,.brandlogo__mark{height:34px} }
/* Логотип — CSS-маска, залитая фирменным var(--brand) (ровно как кнопки/активные,
   и так же адаптируется к теме). Слово (1329x266 ~5:1) на десктопе, квадратный
   знак (1:1) на ≤1024 — поведение как было у <picture>. */
/* ⚠️ АДРЕС КАРТИНКИ В CSS СЧИТАЕТСЯ ОТ ФАЙЛА СТИЛЕЙ, а не от страницы. Пока styles.css лежал
   в корне public/, хватало `assets/…`; после переезда в public/front/css/ (01.09.2026) тот же
   адрес указывал в несуществующий front/css/assets/ — маска не грузилась, и логотип в шапке
   исчез (поймано 02.09.2026). Путь относительный, а не `/assets/…`, нарочно: харнессы
   поднимают сервер с корня репозитория и отдают стили как /public/front/css/…, там корневой
   адрес тоже промахнулся бы. */
.brandlogo__mark{
  aspect-ratio:1329 / 266; width:auto;
  background:var(--brand);
  -webkit-mask:url(../../assets/kronos-logo.png?v=2) left center / contain no-repeat;
          mask:url(../../assets/kronos-logo.png?v=2) left center / contain no-repeat;
}
@media (max-width:1024px){
  .brandlogo__mark{ aspect-ratio:1 / 1;
    -webkit-mask-image:url(../../assets/kronos-mark.png?v=1);
            mask-image:url(../../assets/kronos-mark.png?v=1); }
}
.brand__name{font-weight:700;line-height:1;font-size:16px;letter-spacing:.2px}
.brand__name b{color:var(--brand);font-weight:800}
.brand__sub{font-size:13px;color:var(--ink-soft);font-weight:600;white-space:nowrap}
.topbar__right{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.hstat{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 13px;
  font-size:12px;font-weight:600;color:var(--muted);
  border:1px solid var(--line);border-radius:11px;background:var(--surface);white-space:nowrap;
  transition:border-color .15s}
.hstat__lbl{font-weight:600;color:var(--ink-soft)}
.hstat__dot{width:9px;height:9px;border-radius:50%;flex:none;background:#c2c7d0;transition:background .2s,box-shadow .2s}
.hstat__dot.is-on{background:var(--up);animation:dotlive 2.4s ease-out infinite}
@keyframes dotlive{0%{box-shadow:0 0 0 0 rgba(44,163,106,.45)}70%{box-shadow:0 0 0 7px rgba(44,163,106,0)}100%{box-shadow:0 0 0 0 rgba(44,163,106,0)}}
.hstat--off .hstat__dot{background:var(--down);box-shadow:0 0 0 3px rgba(226,86,63,.16)}
.hstat--off{color:var(--down);border-color:rgba(226,86,63,.35)}
.hstat--checking .hstat__dot{background:#c2c7d0;animation:dotpulse 1s ease-in-out infinite}
@keyframes dotpulse{0%,100%{opacity:.4}50%{opacity:1}}
.hstat__t b{color:var(--ink);font-weight:800}
/* Объединённый статус-блок: «Сервер» + «онлайн» (аватарки/счётчик) в ОДНОЙ карточке
   (правка владельца — раньше были два отдельных блока). Внутренние .hstat теряют
   свою рамку/фон, между ними тонкий разделитель. Работает на всех экранах. */
.statusbar{display:inline-flex;align-items:center;gap:10px;height:38px;padding:0 12px;
  border:1px solid var(--line);border-radius:11px;background:var(--surface);transition:border-color .15s}
.statusbar:hover{border-color:var(--brand)}
.statusbar .hstat{border:none;background:none;height:auto;padding:0;border-radius:0}
.statusbar .onlinestack{padding:0;cursor:pointer}
.statusbar .onlinestack:hover{border-color:transparent}
.statusbar__sep{width:1px;height:18px;background:var(--line);flex:none}
.statusbar:has(.hstat--off){border-color:rgba(226,86,63,.35)}
/* Индикатор «онлайн» в шапке, кликабелен (→ «Кто онлайн»). Правка владельца:
   есть место (широкий экран) — стопка аватарок + капсула «точка + число»;
   тесно (≤1200, планшет и уже) — стопку прячем, остаётся одна капсула. */
.onlinestack{cursor:pointer;gap:8px;padding:0 10px}
.onlinestack:hover{border-color:var(--brand)}
.ppl-stack{display:inline-flex;align-items:center}
.ppl-ava{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  font-size:9px;font-weight:800;color:#fff;border:2px solid var(--surface);margin-left:-8px;letter-spacing:-.3px}
.ppl-ava:first-child{margin-left:0}
.ppl-ava--more{background:var(--surface-2);color:var(--ink-soft)}
@media (max-width:1200px){ .ppl-stack{display:none} }
/* «Живой» счётчик онлайн: капсула с пульсирующей точкой присутствия (ЗЕЛЁНАЯ — в пару с «Сервер ●», по просьбе владельца) */
.ppl-live{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px 0 7px;border-radius:999px;
  background:color-mix(in srgb, var(--up) 13%, transparent)}
.ppl-live__dot{width:7px;height:7px;border-radius:50%;flex:none;background:var(--up);
  animation:ppllive 2.4s ease-out infinite}
.ppl-live b{color:var(--up);font-weight:800;font-size:12.5px;line-height:1;font-variant-numeric:tabular-nums}
@keyframes ppllive{
  0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--up) 50%, transparent)}
  70%{box-shadow:0 0 0 6px transparent}
  100%{box-shadow:0 0 0 0 transparent}}

/* Страница «Кто онлайн» */
.pres__now{display:inline-flex;align-items:center;gap:8px;padding:7px 14px 7px 11px;border-radius:999px;white-space:nowrap;
  font-size:12.5px;font-weight:600;color:var(--up);
  background:color-mix(in srgb, var(--up) 11%, var(--surface));
  border:1px solid color-mix(in srgb, var(--up) 28%, transparent)}
.pres__now b{font-weight:800;font-size:14.5px;color:var(--up);letter-spacing:.2px}
.pres__now-dot{width:8px;height:8px;border-radius:50%;background:var(--up);flex:none;animation:dotlive 2.4s ease-out infinite}
.pres__note{color:var(--muted);font-size:12.5px;margin:-4px 0 13px}
.psorts{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}
.psort{border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);
  border-radius:999px;padding:7px 13px;font-size:12.5px;font-weight:600;transition:.15s}
.psort:hover{border-color:var(--brand)}
.psort.is-active{background:var(--brand);color:var(--brand-ink);border-color:var(--brand)}
.pres__list{display:grid;gap:8px}
.prow{display:flex;align-items:center;gap:13px;padding:11px 14px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);transition:border-color .15s}
.prow:hover{border-color:var(--brand)}
.prow__ava{position:relative;width:40px;height:40px;border-radius:50%;flex:none;
  display:grid;place-items:center;color:#fff;font-weight:800;font-size:13.5px;letter-spacing:-.3px}
.prow__ava img,.pweek__ava img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.prow__dot{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;
  background:var(--muted);border:2px solid var(--surface)}
.prow__dot.is-on{background:var(--brand)}
.prow__main{flex:1;min-width:0}
.prow__name{font-weight:700;font-size:14px;color:var(--ink);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.prow__dept{font-size:11px;font-weight:600;color:var(--muted);background:var(--surface-2);padding:2px 8px;border-radius:999px}
.prow__status{font-size:12.5px;color:var(--muted);margin-top:3px}
.prow__on{color:var(--brand);font-weight:700}
.prow__metric{flex:none;text-align:right;min-width:98px}
.prow__metric b{display:block;font-size:14px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.prow__metric span{font-size:10.5px;color:var(--muted)}
@media (max-width:680px){ .prow__metric:last-child{display:none} .prow__metric{min-width:78px} }
/* «Кто на сайте»: KPI-ряд на 4, бейдж «это вы», график доступности, инциденты, дружелюбные состояния */
.histkpi.histkpi--4{grid-template-columns:repeat(4,1fr)}
.prow__you{font-size:10.5px;font-weight:700;color:var(--brand);background:color-mix(in srgb,var(--brand) 13%,transparent);padding:2px 8px;border-radius:999px}
.avail{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:2px 2px 14px}
.avail__pct{font-size:34px;font-weight:800;letter-spacing:.2px;line-height:1;font-variant-numeric:tabular-nums}
.avail__lbl{font-size:13px;color:var(--muted);font-weight:600}
.inc-list{display:grid;gap:8px}
.inc{display:flex;align-items:center;gap:12px;padding:11px 14px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);transition:border-color .15s}
.inc:hover{border-color:var(--brand)}
.inc__ic{width:34px;height:34px;border-radius:10px;flex:none;display:grid;place-items:center}
.inc__ic svg{width:18px;height:18px}
.inc__main{flex:1;min-width:0}
.inc__t{font-weight:700;font-size:13.5px;color:var(--ink)}
.inc__sub{font-size:12px;color:var(--muted);margin-top:2px;font-variant-numeric:tabular-nums}
.inc__dur{flex:none;font-weight:800;font-size:14px;font-variant-numeric:tabular-nums}
.pres-ok{display:flex;flex-direction:column;align-items:center;text-align:center;gap:9px;padding:28px 16px;color:var(--muted)}
.pres-ok__ic{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;background:var(--surface-2);color:var(--muted)}
.pres-ok__ic svg{width:25px;height:25px}
.pres-ok__ic--ok{background:color-mix(in srgb,var(--up) 14%,transparent);color:var(--up)}
.pres-ok b{color:var(--ink);font-size:15px;font-weight:700}
.pres-ok span{font-size:13px;max-width:420px}
/* состояние активен/отошёл, устройство+локация, кнопка «выкинуть» */
.prow{position:relative}
.prow--away{opacity:.82}
.prow--away .prow__ava{filter:grayscale(.35)}
.prow__on--away{color:var(--muted)}
/* неактивные аккаунты: подпись «был в сети N назад» + быстрые действия */
.inact__when{font-size:12px;color:var(--muted);margin-top:2px}
.inact__ctl{flex:none;display:flex;align-items:center;gap:7px}
.inact--blocked .prow__ava{filter:grayscale(.5);opacity:.7}
.inact--blocked .prow__name{color:var(--muted)}
.pres-away .secthead h2{color:var(--muted)}
.pres-away__n{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--surface-2);color:var(--muted);font-size:11.5px;font-weight:800;font-variant-numeric:tabular-nums}
.pres-manage{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:var(--r-sm);font-weight:700;font-size:12.5px;cursor:pointer;border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);transition:all .15s}
.pres-manage svg{width:15px;height:15px}
.pres-manage:hover{border-color:var(--brand);color:var(--brand)}
.pres-manage--danger{color:var(--down);border-color:color-mix(in srgb,var(--down) 30%,var(--line))}
.pres-manage--danger:hover{background:var(--down);color:#fff;border-color:var(--down)}
/* нагрузка/здоровье сервера */
.srv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.srv{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px}
.srv__top{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12.5px;color:var(--muted);font-weight:600}
.srv__top b{font-size:15px;font-weight:800;font-variant-numeric:tabular-nums}
.srv__bar{height:7px;border-radius:999px;background:var(--surface-2);margin-top:9px;overflow:hidden}
.srv__bar i{display:block;height:100%;border-radius:999px;transition:width .3s}
.srv__note{font-size:11.5px;color:var(--muted);margin-top:7px}
/* тепловая карта по часам */
.heat{display:flex;align-items:flex-end;gap:3px;height:84px;margin:4px 2px 0}
.heatbar{flex:1;min-width:0;height:var(--h);border-radius:3px 3px 0 0;transition:height .3s}
.heat__axis{display:flex;justify-content:space-between;margin:7px 2px 0;font-size:10.5px;color:var(--muted);font-variant-numeric:tabular-nums}
/* устройства сотрудника (#5) */
.dvc-list{display:flex;flex-direction:column;gap:5px;margin-top:5px}
.dvc{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--muted)}
.dvc__ic{width:13px;height:13px;flex:none;opacity:.8}
.dvc__t{flex:1;min-width:0;font-variant-numeric:tabular-nums}
.dvc__when{flex:none;font-size:10.5px;color:var(--muted);font-variant-numeric:tabular-nums}
/* матрица доступа (#3) */
.mtx-list{display:flex;flex-direction:column;gap:8px}
.mtx{display:flex;align-items:center;gap:12px;padding:11px 14px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface)}
.mtx--admin{border-color:color-mix(in srgb,var(--brand) 35%,var(--line));background:color-mix(in srgb,var(--brand) 5%,var(--surface))}
.mtx__role{flex:none;min-width:170px;font-weight:700;font-size:13.5px;color:var(--ink)}
.mtx__n{flex:none;min-width:64px;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.mtx__acc{flex:1;text-align:right;font-size:12.5px;color:var(--ink-soft)}
@media (max-width:600px){ .mtx{flex-wrap:wrap;gap:4px 12px} .mtx__role{min-width:0} .mtx__acc{text-align:left;width:100%} }
/* сводка безопасности: подписи + «откуда заходят» */
.secsum__lbl{font-size:12px;font-weight:700;color:var(--muted);margin:14px 2px 8px;text-transform:uppercase;letter-spacing:.4px}
.secsum__geo{display:flex;flex-wrap:wrap;gap:7px;margin:0 2px}
.secsum__geoitem{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-soft);background:var(--surface-2);border:1px solid var(--line);padding:5px 11px;border-radius:999px}
.secsum__geoitem b{color:var(--ink);font-variant-numeric:tabular-nums}
/* ===== ПРЕМИУМ-ПОЛИРОВКА страницы «Кто на сайте / Команда» (только стили, разметку не трогаем; скоуп .users перебивает базовые правила по специфичности) ===== */
.users .hkpi{border-radius:14px;transition:box-shadow .18s,transform .12s,border-color .18s}
.users .hkpi:hover{box-shadow:0 8px 22px -14px rgba(20,16,12,.28);transform:translateY(-1px)}
.users .urow{border-radius:14px;transition:border-color .16s,box-shadow .16s}
.users .urow:hover{border-color:color-mix(in srgb,var(--brand) 26%,var(--line));box-shadow:0 7px 24px -15px rgba(20,16,12,.3)}
.users .urow__main{padding:14px 16px;gap:14px}
.users .urow__main:hover{background:color-mix(in srgb,var(--brand) 4%,transparent)}
.users .urow--open .urow__main{background:color-mix(in srgb,var(--brand) 5%,transparent)}
.users .urow__ava{box-shadow:0 2px 9px -3px rgba(20,16,12,.24)}
.users .urow__name{font-size:14.5px}
.users .urow__login{margin-top:2px}
/* пароль — единый аккуратный чип вместо россыпи иконок */
.users .upass{background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:5px 7px;gap:5px;width:auto;min-width:148px}
.users .upass--empty{background:transparent;border-color:transparent;padding-left:0;min-width:0}
.users .upass__act:hover{background:var(--surface)}
/* ВЫРАВНИВАНИЕ колонок строки команды (десктоп): фиксированные ширины — пароль/роль/права/кнопки стоят ровно по вертикали во всех строках, независимо от длины имени/роли и числа кнопок */
@media (min-width:681px){
  .users .upass{width:156px;min-width:156px;flex:none}
  .users .upass--empty{min-width:156px}
  .users .urow__role{width:220px;min-width:220px;flex:none}
  .users .urow__role .dd,.users .urow__role .dd__btn{width:100%}
  .users .urow__role .dd__cur{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .users .urow__ctl{min-width:200px;justify-content:flex-end;gap:7px}
  .users .urow__ctl .ubtn{flex:none}
}
/* полоса «На сайте за неделю» — премиальнее */
.users .pweek{border-radius:13px;padding:11px 13px;transition:border-color .15s,box-shadow .15s}
.users .pweek:hover{box-shadow:0 6px 20px -14px rgba(20,16,12,.26)}
.users .pweek__rank{font-size:13px;color:color-mix(in srgb,var(--ink) 48%,transparent)}
.users .pweek__val{background:color-mix(in srgb,var(--brand) 13%,transparent);padding:1px 9px;border-radius:999px;font-size:11.5px}
.users .pweek__bar{height:9px;background:color-mix(in srgb,var(--brand) 9%,var(--surface-2))}
.users .pweek__bar span{background:linear-gradient(90deg,color-mix(in srgb,var(--brand) 70%,#ffb340),var(--brand));box-shadow:0 1px 5px -1px color-mix(in srgb,var(--brand) 55%,transparent)}
/* мои блоки аналитики — мягче */
.users .srv{border-radius:13px;transition:border-color .15s,box-shadow .15s}
.users .srv:hover{border-color:color-mix(in srgb,var(--brand) 22%,var(--line));box-shadow:0 6px 18px -14px rgba(20,16,12,.22)}
.users .srv__bar{height:8px}
.users .heat{gap:4px;height:90px}
.users .heatbar{border-radius:4px 4px 2px 2px;box-shadow:inset 0 -2px 7px -2px rgba(0,0,0,.07)}
/* строки журнала входов/инцидентов на этой странице — мягче */
.users .inc{border-radius:12px}
.users .inc:hover{box-shadow:0 5px 16px -13px rgba(20,16,12,.24)}
/* ⚠ подозрительный вход (дата-центр / прокси / из-за рубежа) */
.prow__warn{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:800;color:#e08600;background:color-mix(in srgb,#e08600 14%,transparent);padding:2px 8px;border-radius:999px;white-space:nowrap;cursor:help}
.prow__warn-ic{width:12px;height:12px;flex:none}
.prow--warn{border-color:color-mix(in srgb,#e08600 45%,var(--line));box-shadow:inset 3px 0 0 #e08600}
.prow__meta{display:flex;align-items:center;gap:6px;margin-top:4px;font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.prow__meta-ic{width:13px;height:13px;flex:none;opacity:.8}
.prow__kick{flex:none;width:34px;height:34px;display:grid;place-items:center;border-radius:10px;cursor:pointer;
  border:1px solid color-mix(in srgb,var(--down) 30%,var(--line));background:color-mix(in srgb,var(--down) 8%,transparent);color:var(--down);transition:all .15s}
.prow__kick svg{width:17px;height:17px}
.prow__kick:hover{background:var(--down);color:#fff;border-color:var(--down)}
/* подтверждение в модалке */
.confirm__actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px;flex-wrap:wrap}
.cbtn{display:inline-flex;align-items:center;gap:7px;padding:10px 16px;border-radius:var(--r-sm);font-weight:700;font-size:13.5px;cursor:pointer;border:1px solid var(--line);background:var(--surface);color:var(--ink);transition:all .15s}
.cbtn svg{width:16px;height:16px}
.cbtn--ghost:hover{border-color:var(--brand);color:var(--brand)}
.cbtn--danger{background:var(--down);border-color:var(--down);color:#fff}
.cbtn--danger:hover{filter:brightness(1.08)}
.cbtn--primary{background:var(--brand);border-color:var(--brand);color:#fff}
.cbtn--primary:hover{filter:brightness(1.08)}
.cbtn:disabled{opacity:.55;cursor:default}
/* Баннер «ненадёжный пароль» (self-service смена) — вверху рабочего стола, в стиле сайта */
.pwnag{display:flex;align-items:center;gap:14px;margin:14px 16px 0;padding:13px 16px;border:1px solid color-mix(in srgb,#e08600 35%,var(--line));background:color-mix(in srgb,#e08600 8%,var(--surface));border-radius:var(--r)}
.pwnag__ic{flex:none;width:38px;height:38px;display:grid;place-items:center;border-radius:11px;background:color-mix(in srgb,#e08600 16%,transparent);color:#e08600}
.pwnag__ic svg{width:20px;height:20px}
.pwnag__txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.pwnag__txt b{font-size:14px;font-weight:700}
.pwnag__txt span{font-size:12.5px;color:var(--muted)}
.pwnag__btn{margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:var(--r-sm);font-weight:700;font-size:13px;cursor:pointer;border:none;background:var(--brand);color:#fff;transition:filter .15s}
.pwnag__btn svg{width:15px;height:15px}
.pwnag__btn:hover{filter:brightness(1.07)}
.pwnag__later{flex:none;padding:9px 12px;border-radius:var(--r-sm);font-weight:600;font-size:12.5px;cursor:pointer;border:1px solid var(--line);background:transparent;color:var(--muted);transition:all .15s}
.pwnag__later:hover{border-color:var(--brand);color:var(--brand)}
@media (max-width:640px){ .pwnag{flex-wrap:wrap} .pwnag__btn{margin-left:0} }
/* алерт о подозрительных входах — красный акцент поверх .pwnag */
.secnag{border-color:color-mix(in srgb,var(--down) 38%,var(--line));background:color-mix(in srgb,var(--down) 8%,var(--surface))}
.secnag .secnag__ic{background:color-mix(in srgb,var(--down) 16%,transparent);color:var(--down)}
.secnag .secnag__btn{background:var(--down)}
/* форма смены пароля в модалке */
.pwform{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.pwform__in{width:100%;padding:11px 14px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2);color:var(--ink);font-size:14px;font-family:inherit}
.pwform__in:focus{outline:none;border-color:var(--brand)}
.pwform__hint{font-size:12.5px;font-weight:600;min-height:16px;color:var(--muted)}
.pwform__hint--bad{color:var(--down)}
.pwform__hint--ok{color:#00a79a}
/* страница «Пользователи»: метка «заблокирован» + кнопки */
.urow{position:relative}
.urow--blocked{border-color:color-mix(in srgb,var(--down) 40%,var(--line));background:color-mix(in srgb,var(--down) 5%,var(--surface))}
.urow--blocked .urow__ava{filter:grayscale(.6);opacity:.7}
.urow__blocked{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;color:var(--down);background:color-mix(in srgb,var(--down) 13%,transparent);padding:2px 8px;border-radius:999px}
.urow__blocked svg{width:12px;height:12px}
.urow__ctl{flex:none;display:flex;align-items:center}
.ubtn{cursor:pointer;border-radius:var(--r-sm);font-weight:700;font-size:12.5px;transition:all .15s;border:1px solid var(--line);background:var(--surface)}
.ubtn--block{width:34px;height:34px;display:grid;place-items:center;color:var(--down);border-color:color-mix(in srgb,var(--down) 30%,var(--line));background:color-mix(in srgb,var(--down) 8%,transparent)}
.ubtn--block svg{width:16px;height:16px}
.ubtn--block:hover{background:var(--down);color:#fff;border-color:var(--down)}
.ubtn--unblock{padding:8px 13px;color:var(--up);border-color:color-mix(in srgb,var(--up) 35%,var(--line));background:color-mix(in srgb,var(--up) 8%,transparent)}
.ubtn--unblock:hover{background:var(--up);color:#fff;border-color:var(--up)}
@media (max-width:900px){ .histkpi.histkpi--4{grid-template-columns:1fr 1fr} }
@media (max-width:880px){ .hstat__t,.hstat__lbl{display:none} .hstat{padding:7px 9px;gap:5px} }
.filial{display:flex;flex-direction:column;font-size:11px;color:var(--muted);gap:3px;font-weight:600}
.filial select{
  border:1px solid var(--line);border-radius:10px;padding:7px 9px;
  background:var(--surface);color:var(--ink);font-size:13px;font-weight:600;
}
.iconbtn{
  width:38px;height:38px;border-radius:11px;border:1px solid var(--line);
  background:var(--surface);display:grid;place-items:center;transition:.15s;color:var(--ink-soft);
}
.iconbtn:hover{border-color:var(--brand);color:var(--brand);background:color-mix(in srgb,var(--brand) 6%,var(--surface))}
.iconbtn:active{transform:scale(.94)}
.iconbtn svg{width:20px;height:20px}
/* Плашка версии: какой коммит разлит (заполняет verChipInit из screens/shell).
   Мелкая и приглушённая — метка для своих; моноширинный шрифт, чтобы хэш читался посимвольно. */
.verchip{
  padding:3px 9px;border:1px solid var(--line);border-radius:999px;background:var(--surface);
  color:var(--muted);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12px;letter-spacing:.3px;text-decoration:none;white-space:nowrap;
}
.verchip:hover{color:var(--brand);border-color:var(--brand)}
@media (max-width:700px){.verchip{display:none}}
.userbox{display:flex;align-items:center;gap:8px}
.userbox__avatar{
  width:38px;height:38px;border-radius:50%;overflow:hidden;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;
  display:grid;place-items:center;font-weight:700;
}
.userbox__avatar img{width:100%;height:100%;object-fit:cover;display:block}
.userbox__info{display:none}
.userbox__name{font-weight:700;font-size:13px;line-height:1}
.userbox__role{font-size:11px;color:var(--muted)}

/* ---- Rolebar (демо) ---- */
.rolebar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:11px 16px;background:var(--bg);border-bottom:1px solid var(--line);
}
/* display:flex выше перебивает UA-правило [hidden] — вернём скрытие явно
   (переключатель ролей прячется у рядового сотрудника, initRoles()). */
.rolebar[hidden]{display:none}
.rolebar__label{font-size:12px;color:var(--muted);font-weight:600}
.rolebar__chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{
  border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);
  border-radius:999px;padding:7px 13px;font-size:12.5px;font-weight:600;transition:.15s;
}
.chip.is-active{background:var(--brand);color:var(--brand-ink);border-color:var(--brand)}

/* ---- Content ---- */
/* Все страницы — во всю ширину экрана (удобно работать на больших мониторах):
   потолок убран, колоночные сетки сами добавляют колонки на широких ширинах.
   Узкие читательские страницы (.hist, .searchpage) центрируются своим max-width. */
.content{padding:16px;margin:0 auto}
@media (min-width:1200px){ .content{padding:18px 28px} }
/* доска: чуть шире боковые поля под длинные ряды колонок */
.content.is-board{padding-inline:clamp(16px,2.4vw,40px)}
.hello{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:6px 2px 18px}
.hello__h{font-size:27px;margin:0;font-weight:300;letter-spacing:.3px}
.hello__h b{font-weight:700}
.hello__p{margin:4px 0 0;color:var(--muted);font-size:13px;font-weight:500}

/* Главный hero переезда — первый и самый заметный блок после системных уведомлений. */
.refactor-hero{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(440px,31%);min-height:214px;
  margin:0 0 22px;overflow:hidden;border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface);box-shadow:0 12px 34px color-mix(in srgb,var(--ink) 7%,transparent);
}
.refactor-hero__main{padding:28px 34px 24px;display:flex;flex-direction:column;justify-content:center;min-width:0}
.refactor-hero__eyebrow{display:flex;align-items:center;gap:8px;color:var(--brand-fg);font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.refactor-hero__eyebrow span{width:8px;height:8px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 5px color-mix(in srgb,var(--brand) 13%,transparent)}
.refactor-hero__title{font-size:clamp(28px,3vw,46px);line-height:1.02;letter-spacing:-.035em;margin:12px 0 7px;font-weight:800}
.refactor-hero__lead{margin:0;color:var(--muted);font-size:13px;line-height:1.45;max-width:760px}
.refactor-hero__progressline{display:grid;grid-template-columns:auto minmax(120px,1fr);align-items:center;gap:18px;margin-top:22px}
.refactor-hero__percent{font-size:32px;line-height:1;font-weight:800;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.refactor-hero__track{height:14px;padding:3px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.refactor-hero__fill{display:block;width:var(--refactor-pct);height:100%;border-radius:999px;background:linear-gradient(90deg,var(--brand),var(--brand-2));position:relative}
.refactor-hero__fill::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0,transparent 31px,color-mix(in srgb,var(--surface) 55%,transparent) 31px,color-mix(in srgb,var(--surface) 55%,transparent) 34px)}
.refactor-hero__stats{display:flex;gap:24px;margin:13px 0 0 70px}
.refactor-hero__stats span{display:flex;align-items:baseline;gap:6px;color:var(--muted)}
.refactor-hero__stats strong{color:var(--ink);font-size:15px;font-weight:800;font-variant-numeric:tabular-nums}
.refactor-hero__stats small{font-size:11px;font-weight:650}
.refactor-hero__pending{margin-top:24px;height:40px;display:flex;align-items:center;color:var(--muted);font-size:13px}
.refactor-hero__release{background:var(--release);color:var(--down-ink);padding:28px 30px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;position:relative;isolation:isolate}
.refactor-hero__release::after{content:"";position:absolute;right:-42px;bottom:-70px;width:190px;height:190px;border:38px solid color-mix(in srgb,var(--down-ink) 11%,transparent);border-radius:50%;z-index:-1}
.refactor-hero__release-label{font-size:12px;font-weight:850;letter-spacing:.18em;text-transform:uppercase}
.refactor-hero__date{font-size:clamp(31px,3vw,48px);line-height:1;margin:12px 0 9px;letter-spacing:-.04em;font-weight:850;font-variant-numeric:tabular-nums;white-space:nowrap}
.refactor-hero__release-note{font-size:12px;font-weight:650}
.refactor-hero__countdown{margin-top:18px;display:flex;flex-direction:column;gap:5px;position:relative;z-index:1}
.refactor-hero__countdown>span{font-size:10px;font-weight:850;letter-spacing:.13em;text-transform:uppercase}
.refactor-hero__countdown time{font-size:clamp(16px,1.15vw,20px);font-weight:850;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.refactor-hero__countdown-live{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.refactor-hero__link{display:inline-flex;align-items:center;gap:8px;margin-top:24px;color:inherit;text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--down-ink) 60%,transparent);font-size:12px;font-weight:800;padding-bottom:3px}
.refactor-hero__link:hover{border-color:currentColor}
@media (min-width:821px){
  .refactor-hero__countdown{position:absolute;right:28px;top:28px;margin:0;text-align:right;align-items:flex-end}
}
@media (max-width:820px){
  .refactor-hero{grid-template-columns:1fr;min-height:0}
  .refactor-hero__main{padding:24px 22px 20px}
  .refactor-hero__release{padding:20px 22px;min-height:146px}
  .refactor-hero__date{font-size:36px}
  .refactor-hero__link{margin-top:16px}
}
@media (max-width:520px){
  .refactor-hero{margin-bottom:18px;border-radius:14px}
  .refactor-hero__title{font-size:30px}
  .refactor-hero__lead{font-size:12px}
  .refactor-hero__progressline{grid-template-columns:1fr;gap:10px;margin-top:18px}
  .refactor-hero__percent{font-size:29px}
  .refactor-hero__stats{margin-left:0;gap:16px;justify-content:space-between}
  .refactor-hero__stats span{display:grid;gap:1px}
}
@media (prefers-reduced-motion:no-preference){.refactor-hero__fill{transition:width .45s ease}}

.rank{font-size:12.5px;font-weight:700;padding:8px 13px;border-radius:999px;white-space:nowrap}
.rank--gold{background:#fff6da;color:#9a6b00;border:1px solid #f0d480}
.rank--ok{background:var(--surface);color:var(--brand);border:1px solid var(--line)}
.rank--bad{background:#fdece8;color:#b53a23;border:1px solid #f3c4ba}
[data-theme="dark"] .rank--gold{background:#332a0d;color:#f0c64a;border-color:#5a481a}
[data-theme="dark"] .rank--bad{background:#331b14;color:#f0907a;border-color:#5a2c22}

/* ---- Кастомный выпадающий список ---- */
.dd{position:relative;display:inline-flex}
.dd__btn{
  display:inline-flex;align-items:center;gap:8px;height:38px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink);
  border-radius:11px;padding:0 13px;font-size:13px;font-weight:600;
  white-space:nowrap;transition:border-color .15s;
}
.dd__btn:hover{border-color:var(--brand)}
.dd__chev{width:15px;height:15px;color:var(--muted);transition:transform .2s}
.dd.is-open .dd__chev{transform:rotate(180deg)}
.dd.is-open .dd__btn{border-color:var(--brand)}
.dd__menu{
  position:absolute;top:calc(100% + 8px);min-width:210px;
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 16px 44px rgba(16,24,40,.16);padding:6px;z-index:60;
  max-height:min(58vh,360px);overflow-y:auto;overscroll-behavior:contain; /* длинные списки (бренды/категории) скроллятся ВНУТРИ меню, не растягивая страницу */
  display:flex;flex-direction:column;gap:4px; /* зазор пунктов — подсветки при hover не сливаются (стандарт всплывающих списков) */
  animation:ddIn .14s ease;
}
@keyframes ddIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.dd__menu[hidden]{display:none}
.dd__menu--right{right:0}
.dd__menu--left{left:0}
.dd__item{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:10px 12px;border:none;background:none;border-radius:10px;
  font-size:13.5px;font-weight:600;color:var(--ink-soft);text-align:left;white-space:nowrap;
}
.dd__item:hover{background:var(--surface-2)}
.dd__item.is-active{color:var(--brand-fg);background:var(--brand-tint)}
.dd__tick{width:16px;height:16px;margin-left:auto;color:var(--brand);flex:none}
[data-theme="dark"] .dd__menu{box-shadow:0 16px 44px rgba(0,0,0,.5)}

/* ---- Переключатель рабочего пространства (тракторы / запчасти) ----
   Тот же dd-компонент + акцент-точка проекта (цвет = акцент активного
   воркспейса). На узких экранах сворачивается до точки и шеврона. */
.wsdd{display:inline-flex}
.wsdd[hidden]{display:none}
.wsdd .dd__btn{font-weight:700}
/* плитка-иконка проекта (квадратная, НЕ круг — чтобы не путать со статус-точкой «Сервер») */
.dd__badge{width:22px;height:22px;border-radius:7px;flex:none;display:grid;place-items:center;
  background:color-mix(in srgb, var(--c) 17%, transparent);color:var(--c)}
.dd__badge svg{width:14px;height:14px;display:block}
@media (max-width:880px){ .wsdd .dd__cur{display:none} .wsdd .dd__btn{padding:0 7px;gap:6px} }

/* ---- Section header (заголовок + фильтр) ---- */
.secthead{display:flex;align-items:center;justify-content:space-between;gap:10px 14px;flex-wrap:wrap;margin:0 2px 13px}
.secthead h2{font-size:18px;margin:0;font-weight:500;letter-spacing:.2px;display:flex;align-items:center;gap:8px}
.filterpill{
  display:inline-flex;align-items:center;gap:7px;
  border:1px solid var(--line);background:var(--surface);color:var(--muted);
  border-radius:11px;padding:7px 12px;font-size:12.5px;font-weight:600;white-space:nowrap;
}
.filterpill::after{content:"▾";font-size:11px;opacity:.8}
.secthead__r{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
/* списки-превью (журналы, инциденты): первые N строк + кнопка «Показать все» */
.lmore__btn{display:inline-flex;align-items:center;gap:7px;margin:10px 2px 0;padding:7px 13px;border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);border-radius:999px;font-weight:600;font-size:12.5px;cursor:pointer;transition:all .15s}
.lmore__btn:hover{border-color:var(--brand);color:var(--brand)}
.lmore__chev{display:inline-flex;width:14px;height:14px;transition:transform .2s}
.lmore__chev svg{width:14px;height:14px}
.lmore__btn.is-open .lmore__chev{transform:rotate(180deg)}
.statsbtn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--brand);
  background:var(--brand-tint);color:var(--brand);border-radius:11px;padding:7px 13px;
  font-size:12.5px;font-weight:700;white-space:nowrap;transition:.15s}
.statsbtn:hover{background:var(--brand);color:#fff}
.statsbtn__ic{width:15px;height:15px}

/* Страница «Все статистики» */
.statsblock{margin-top:22px}
.statsblock__h{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:700;margin:0 2px 12px}
.statsblock__dot{width:9px;height:9px;border-radius:50%;background:var(--brand);flex:none}

/* ---- Hubs: чипы-разделы ----
   Разделов стало 20+, и вертикальные плитки перестали помещаться: на десктопе
   панель была принудительно вытянута в одну строку (grid-auto-flow:column в
   медиазапросе ≥680px), каждая плитка получала ~1/21 ширины и подписи наезжали
   друг на друга. Теперь — компактные чипы «иконка + название» с переносом
   строк: помещаются на любой ширине без спец-правил, разметка и привязки JS
   (data-hub, data-hubcount, каскад входа по --i) не менялись. */
.hubs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px}
.hub{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 18px 8px 8px;border:1px solid var(--line);background:var(--surface);
  border-radius:999px;
  transition:border-color .18s ease,background .18s ease,transform .18s ease,box-shadow .18s ease;
}
.hub:active{transform:scale(.97)}
.hub:hover{
  border-color:color-mix(in srgb, var(--c,var(--brand)) 45%, var(--line));
  background:color-mix(in srgb, var(--c,var(--brand)) 5%, var(--surface));
  transform:translateY(-1px);box-shadow:0 8px 16px -13px rgba(20,16,12,.4);
}
.hub:hover .hub__title{color:var(--c,var(--brand))}
/* Иконка КРУГЛАЯ и отстоит от краёв чипа на равные 9px (8px паддинг + 1px рамка):
   контур иконки концентричен скруглению пилюли — радиусы не спорят друг с другом */
.hub__icon{
  position:relative;flex:none;
  width:36px;height:36px;border-radius:999px;display:grid;place-items:center;
  color:var(--c,var(--brand));
  background:color-mix(in srgb, var(--c,var(--brand)) 13%, transparent);
  transition:background .18s ease;
}
.hub:hover .hub__icon{background:color-mix(in srgb, var(--c,var(--brand)) 22%, transparent)}
.hub__icon svg{width:20px;height:20px}
.hub__count{
  position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 5px;
  border-radius:999px;display:grid;place-items:center;
  font-size:10.5px;font-weight:800;line-height:1;border:2px solid var(--surface);
}
.hub__count.is-on{background:var(--down);color:#fff}
.hub__count.is-zero{background:var(--surface-2);color:var(--muted)}
.hub__title{font-size:13px;font-weight:600;color:var(--ink-soft);white-space:nowrap}

/* ---- Выбор раздела «Маркетинга»: Кронос / Мультибренд ----
   Карточки разделов реюзают дизайн карточек-отчётов Аналитики (.repcard/.repfolder). */
/* Кнопка «Сменить раздел» (.mk-brandswitch) убрана 2026-07-20 — назад ведёт хлебная крошка. */

.ownerbar{
  display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600;
  background:var(--brand-tint);border:1px solid var(--line);color:var(--brand);
  padding:11px 13px;border-radius:14px;margin-bottom:18px;
}
.ownerbar svg{width:18px;height:18px;flex:none}

/* ---- Живая панель данных из 1С ---- */
.onecbox{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;margin-bottom:18px}
.onecbox__head{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:700;color:var(--ink);margin-bottom:13px}
.onecbox--off .onecbox__title{color:var(--down)}
.onec__dot{width:9px;height:9px;border-radius:50%;flex:none;background:var(--up);box-shadow:0 0 0 4px rgba(44,163,106,.16)}
.onecbox--loading .onec__dot{background:var(--muted);box-shadow:0 0 0 4px var(--surface-2);animation:pulse 1.1s ease-in-out infinite}
.onecbox--off .onec__dot{background:var(--down);box-shadow:0 0 0 4px rgba(226,86,63,.16)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.onecbox__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 12px}
.onect{display:flex;flex-direction:column;gap:3px;min-width:0}
.onect__l{font-size:11.5px;color:var(--muted);font-weight:600}
.onect__v{font-size:18px;font-weight:800;color:var(--ink);letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (min-width:680px){.onecbox__grid{grid-template-columns:repeat(4,1fr)}}

/* ---- Blocks / grids ---- */
.block{margin-top:26px}
.block__title{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:18px;margin:0 2px 13px;font-weight:500;letter-spacing:.2px}
.ttl-ic{width:18px;height:18px;color:var(--brand)}
.block__note{font-size:11.5px;color:var(--muted);font-weight:500}
/* ссылка на раздел прямо в подписи блока (кнопка, а не <a> — переход внутренний, SPA) */
.block__notelink{font:inherit;color:var(--brand);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.block__notelink:hover{text-decoration-thickness:2px}
   /* подпись воронки внутри вкладки переключателя */
.grid{display:grid;gap:12px}
/* minmax(0,…) во ВСЕХ сетках главной: колонка может ужаться ниже min-content
   содержимого — иначе на планшете/узких широкая плитка (график, KPI) распирает
   страницу и появляется горизонтальный скролл */
.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
.charts{grid-template-columns:minmax(0,1fr)}
.kanbans{grid-template-columns:repeat(2,minmax(0,1fr))}

/* ---- Metric card (стиль инфографики: номер + иконка + цветовой акцент) ---- */
.metric{
  position:relative;overflow:hidden;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:14px;border-left:3px solid var(--c,var(--line));
  transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease;
}
.metric:hover{transform:translateY(-2px);border-color:color-mix(in srgb, var(--c,var(--brand)) 28%, var(--line));box-shadow:0 12px 28px -20px rgba(20,16,12,.35)}
.metric.is-up{border-left-color:var(--up)}
.metric.is-down{border-left-color:var(--down)}
.metric.is-up:hover{border-left-color:var(--up)}
.metric.is-down:hover{border-left-color:var(--down)}
.metric__head{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:9px;margin-bottom:10px}
.metric__hright{display:flex;align-items:center;gap:8px}

/* Кнопка-инфо (регламент по показателю/графику) — тонкая иконка в стиле сайта */
.infobtn{
  width:22px;height:22px;flex:none;border:none;background:transparent;padding:0;
  color:var(--muted);display:inline-grid;place-items:center;transition:.15s;border-radius:8px;
}
.infobtn svg{width:17px;height:17px}
.infobtn:hover{color:var(--brand);background:var(--brand-tint)}
.cc-title{display:inline-flex;align-items:center;gap:8px}
.cc-sub{font-size:12px;color:var(--muted);white-space:nowrap;cursor:help}
.rules{list-style:none;margin:10px 0;padding:0;display:grid;gap:9px;font-size:13.5px;line-height:1.45}
.rules li{padding-left:2px}
.rules__up{font-weight:700;color:var(--up)}
.rules__down{font-weight:700;color:var(--down)}
.metric__chip{
  width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  background:color-mix(in srgb, var(--c) 14%, transparent);color:var(--c);
}
.metric__chip svg{width:20px;height:20px}
.metric__label{position:relative;z-index:1;font-size:12px;color:var(--muted);font-weight:600;line-height:1.3}
.metric__value{position:relative;z-index:1;font-size:25px;font-weight:700;letter-spacing:.2px;margin-top:3px}
.metric__unit{font-size:12px;font-weight:600;color:var(--muted);margin-left:4px}
.spark{position:relative;z-index:1;width:100%;height:34px;display:block;margin-top:8px}
.sparkwrap{position:relative;width:100%;height:34px;margin-top:8px}
.sparkwrap .spark{margin-top:0;height:100%}

/* ---- Вход главной: оркестрованный каскад — «приборная панель включается».
   Порядок: приветствие → хабы лесенкой → KPI-карточки (цифры докручивает JS,
   линию спарклайна отрисовывает штрих). Живое обновление 1С каскад не переигрывает
   (.no-in на заменённой секции), при reduce-motion всё появляется мгновенно. ---- */
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes sparkdraw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion: no-preference){
  .hello{animation:fadeUp .38s ease both}
  .hubs .hub{animation:fadeUp .34s ease both;animation-delay:calc(.05s + var(--i,0)*.028s)}
  .metrics .metric{animation:fadeUp .36s ease both;animation-delay:calc(.12s + var(--i,0)*.045s)}
  .metrics .metric .spark path[pathLength]{stroke-dasharray:1;stroke-dashoffset:1;
    animation:sparkdraw .9s ease-out both;animation-delay:calc(.3s + var(--i,0)*.045s)}
  .no-in .metric,.no-in .hub{animation:none}
  .no-in .spark path[pathLength]{animation:none;stroke-dashoffset:0}
}
@media (prefers-reduced-motion: reduce){
  .suppliers{animation:none}
}
/* Подсказки на графиках */
.js-chart{cursor:crosshair}
.chartdot{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--c,var(--brand));
  border:2px solid var(--surface);transform:translate(-50%,-50%);pointer-events:none;z-index:4;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--c,var(--brand)) 24%, transparent)}
.charttip{position:fixed;z-index:60;pointer-events:none;background:var(--surface);
  border:1px solid var(--line);border-radius:10px;padding:7px 11px;
  box-shadow:0 10px 28px rgba(0,0,0,.14);display:flex;flex-direction:column;gap:1px;white-space:nowrap}
/* display:flex выше перебивает браузерное [hidden] — без этой строки tip.hidden=true не прячет подсказку */
.charttip[hidden]{display:none}
/* Демо-данные (не из 1С) — обесцвечены, чтобы отличались от живых показателей */
.metric.is-demo,.chartcard.is-demo{filter:grayscale(1);opacity:.55}
.demobadge{font-size:9.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:2px 7px;white-space:nowrap}
.charttip__l{font-size:11px;color:var(--muted);font-weight:600}
.charttip__v{font-size:14px;color:var(--ink);font-weight:800}
[data-theme="dark"] .charttip{box-shadow:0 12px 30px rgba(0,0,0,.5)}
/* Кастомная подсказка вместо нативного title — в стиле сайта (как .charttip):
   белая карточка на --surface, тонкая линия, мягкая тень, стрелка к элементу.
   Элемент подключает её атрибутом data-tip="текст" (см. initTips в app.js). */
/* Тултип живёт в body и обязан быть выше любых карточек/модалок. Иначе внутри
   .supov (z-index:1198) текст есть, но вся подсказка оказывается под оверлеем. */
.k5tip{position:fixed;z-index:10020;pointer-events:none;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:6px 10px;width:max-content;max-width:240px;
  font-size:12.5px;font-weight:600;color:var(--ink);white-space:normal;line-height:1.35;text-align:center;
  box-shadow:0 10px 28px rgba(0,0,0,.14);opacity:0;transform:translateY(-4px);
  transition:opacity .12s ease,transform .12s ease}
.k5tip.is-on{opacity:1;transform:translateY(0)}
.k5tip[hidden]{display:none}
/* стрелка: по умолчанию тултип НАД элементом (стрелка снизу), .k5tip--below — стрелка сверху */
.k5tip::after{content:"";position:absolute;bottom:-5px;left:var(--ax,50%);margin-left:-4px;
  width:9px;height:9px;background:var(--surface);border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);transform:rotate(45deg)}
.k5tip--below::after{bottom:auto;top:-5px;border-right:none;border-bottom:none;
  border-left:1px solid var(--line);border-top:1px solid var(--line)}
[data-theme="dark"] .k5tip{box-shadow:0 12px 30px rgba(0,0,0,.5)}
.trend{font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:999px;white-space:nowrap;display:inline-flex;gap:3px;align-items:center}
.trend--up{background:rgba(44,163,106,.12);color:var(--up)}
.trend--down{background:rgba(226,86,63,.12);color:var(--down)}

/* ---- AI block ---- */
.ai__hright{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ai__total{font-size:12.5px;font-weight:800;color:var(--up);
  background:rgba(44,163,106,.12);border-radius:999px;padding:7px 13px;white-space:nowrap}
.sortsel{
  border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);
  border-radius:var(--r-sm);padding:7px 11px;font-size:12.5px;font-weight:600;
}
.ai__list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ai__item{
  display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;
  transition:border-color .15s;
}
.ai__item--price{border-left:3px solid var(--gold)}
.ai__item--dept{border-left:3px solid var(--brand)}
.ai__item--price:hover{border-color:var(--gold)}
.ai__item--dept:hover{border-color:var(--brand)}
.ai__body{display:flex;gap:11px;align-items:flex-start;flex:1 1 260px;min-width:0}
.ai__text{margin:0;font-size:13.5px;line-height:1.5}
.ai__tag{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:800;
  padding:5px 10px;border-radius:999px;white-space:nowrap;align-self:flex-start;
  background:var(--surface-2);color:var(--muted)}
.ai__tag svg{width:13px;height:13px}
.ai__item--price .ai__tag{background:rgba(224,160,0,.14);color:var(--gold)}
.ai__item--dept .ai__tag{background:var(--brand-tint);color:var(--brand)}
.ai__impact{
  flex:none;margin-left:auto;display:inline-flex;align-items:center;gap:10px;white-space:nowrap;
  background:rgba(44,163,106,.09);border:1px solid rgba(44,163,106,.20);
  border-radius:var(--r-sm);padding:8px 13px 8px 9px;
}
.ai__impact-ic{width:26px;height:26px;border-radius:50%;background:var(--up);color:#fff;
  display:grid;place-items:center;flex:none}
.ai__impact-ic svg{width:14px;height:14px}
.ai__impact-txt{display:flex;flex-direction:column;line-height:1.15}
.ai__impact-val{font-size:15px;font-weight:800;color:var(--up)}
.ai__impact-cap{font-size:9.5px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.4px}

/* ---- Chart card (линейный график с осями) ---- */
.chartcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;position:relative}
/* «Итог — графики» — сетка 4 колонки, у каждой карточки своя ширина (1-4 колонки,
   grid-column:span N, ставится инлайн из mkLayoutFor()/app.js) — родная авто-раскладка
   CSS grid сама переносит соседей по строкам, без ручного пересчёта. */
/* Заголовок карточки метрики — ДВА фиксированной высоты ряда (не единая flex-wrap строка),
   чтобы высота заголовка не «прыгала» между узкими (1/4) и широкими карточками: раньше при
   переносе элементов строки заголовок вырастал, и итоговая высота карточки плавала. Скопом
   только под .mk-charts-stack — .chartcard__head/.cc-title общие классы, в других местах
   раздела (compact-сетка «Общего» и т.п.) их трогать не нужно. */
/* Переключатель вида метрики (график/донат/таблица) — mkLayoutFor()/app.js */
/* Кнопка «показать/скрыть Итого» на графике «по объявлениям» (data-mkavtotal, app.js) —
   ОТДЕЛЬНАЯ круглая кнопка, не часть сегмента .mk-viewsw (у той скругление только по
   краям всей группы, overflow:hidden — одиночная кнопка внутри неё была бы квадратной). */
/* Переключатель доли комбинированной карточки «Лиды и деньги» (data-mkcombobasis, app.js) —
   как .mk-viewsw, но с текстовыми подписями (лиды/деньги), поэтому кнопки по содержимому. */
/* На узкой карточке (1/4 ширины) подпись кнопки цели не помещается рядом с переключателем
   вида — оставляем только иконку, сама кнопка остаётся кликабельной. */
/* Ручка изменения ширины карточки — потянуть за правый край (mkBindResize()/app.js) */
.chartcard.is-resizing{z-index:3}
/* Тело метрики (график/донат/таблица) — ОДНА фиксированная высота для всех трёх видов,
   чтобы карточки были одного роста независимо от вида и ширины (донат/таблица центрируются
   по вертикали внутри той же высоты, что и график — .lc(210)+ось Х(~24) ≈ 234). */
/* justify-content:flex-start, НЕ center — центрирование overflow-содержимого во flex-
   колонке обрезает его «с обеих сторон одинаково», и верхняя часть донат/таблицы с
   13 каналами становилась недостижимой даже при overflow:auto (классическая дыра
   flexbox-центрирования). При выравнивании по верху лишнее просто уезжает ВНИЗ —
   там оно нормально доскроллится. */
/* Донат внутри карточки метрики — свой рамки/фон снят (снаружи уже есть рамка
   .chartcard, вложенная была лишней именно в этом контексте; в «Отчёте по сайтам»,
   где донаты стоят в ряд, не трогаем).
   На 1/4 ширины: донат КОЛОНКОЙ на всю ширину карточки (aspect-ratio держит его
   круглым), список каналов ниже — виден только если проскроллить вниз саму карточку
   (.mk-metricbody{overflow:auto} тут и раньше скроллил весь блок целиком, это то,
   что нужно — «диаграмма на всю карточку, легенда по скроллу»).
   На 2/4 и шире: донат СЛЕВА и растёт на всю высоту карточки (aspect-ratio держит
   круглым по высоте, не по ширине) — упирается в потолок 234px и дальше не растёт,
   лишняя ширина просто сдвигает легенду правее (то самое «легенда правее, диаграмма
   крупнее»). Легенда при этом скроллится СВОИМ отдельным окном (max-height:100%),
   донат не двигается — не «уезжает» при скролле списка каналов. */
/* Комбинированная карточка «Лиды и деньги» — легенда с двумя числовыми столбцами
   (лиды и расход) + столбец доли; тот столбец, по которому сейчас строится диаграмма,
   выделен (is-basis). Строка-шапка (mk-share__hdr) подписывает столбцы. */
/* Разносим столбцы легенды (лиды/расход/доля) — иначе на узкой карточке слипаются:
   больший межстолбцовый разрыв + фиксированная ширина у каждого числового столбца,
   расход шире (влезает и цифра без бонусов рядом серым). */
/* «График» комбинированной карточки — две панели с разбивкой по объявлениям: слева лиды,
   справа расход, у каждой своя ось Y. Каркас .lc общий с linechart(). */
.lc__yaxis--right{text-align:left}
/* Подсказка combo-графика — две числовые колонки (лиды/расход) в каждой строке. */
/* Два столбца цифр в подсказке: оттенки фирменного оранжевого и нейтрали (был синий —
   убран вместе с остальной «радугой», 2026-07-27). Светлые тона: подложка тёмная всегда. */
/* Длинная надпись в центре доната («677 тыс ₽», «в среднем» и т.п.) не влезала одной
   строкой в маленький круг — меньший шрифт + перенос по словам вместо обрезки/
   выпирания за край; на крупном круге (везде, кроме 1/4) места больше — крупнее. */
/* «График» по каналам (mkMultiLineChart/app.js) — точки на линиях под курсором +
   общая подсказка (mkBindMultiCharts): своя, показывает значение КАЖДОЙ линии сразу. */
/* pointer-events:auto (не none, как у обычных чарт-тултипов) — список каналов внутри
   скроллится мышью, курсору нужно физически «дойти» до подсказки и там его удержать. */
/* Ссылка на объявление Avito (см. docs/MARKETING.md заход 40) — сама .mk-item-lnk, не
   вложенный в неё .mk-mlc__tipname, теперь прямой flex-элемент строки .mk-mlc__tiprow
   (родитель — сама строка), поэтому растягивать нужно именно её, иначе значение справа
   (<b>) перестаёт быть прижато к правому краю. */
/* Режим «Итого»: в подсказке только строка итога, отделять её больше не от чего — убираем
   черту, иначе она читается как обрезанный список (владелец 2026-07-27). */
/* Все 13 каналов (не только нарисованные топ-5) не влезают одним списком без раздувания
   тултипа — «Итого» закреплён сверху, остальные каналы скроллятся внутри того же окна. */
/* Таблица «канал → значение» одной метрики (вид «таблица») — своя высота = высоте
   .mk-metricbody (не max-height: иначе короткая таблица была бы ниже графика/доната),
   скроллится внутри. Селектор с ДВУМЯ классами — иначе .mk-tblwrap{overflow:hidden}
   (общий базовый класс, объявлен ниже по файлу) при равной специфичности выигрывает
   по порядку и глушит overflow-y:auto — оба класса в селекторе поднимают специфичность
   выше базового однокласового правила, независимо от порядка объявления в файле. */
.cc-title{line-height:1.3}
/* Личная расстановка графиков «Итог — графики» (mkBindGraphReorder, app.js) — стрелки ▲/▼ и
   ручка-«гамбургер» для перетаскивания в левом углу карточки; сохраняется через api/mkorder.php
   по логину, у каждого пользователя своя. */
/* Перестановка карточек — только перетаскиванием за ручку-точки (стрелки убраны
   по решению владельца 2026-07-20). */
.chartcard.is-drag{opacity:.4}
.lc{display:flex;gap:10px;height:170px}
.lc__yaxis{display:flex;flex-direction:column;justify-content:space-between;text-align:right;
  width:42px;flex:none;font-size:10.5px;color:var(--muted);font-weight:500}
.lc__plot{flex:1;position:relative;min-width:0}
.lc__svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.lc__xaxis{display:flex;justify-content:space-between;margin:8px 0 0 52px}
.lc__xaxis span{font-size:10.5px;color:var(--muted);font-weight:500}
/* Дискретный график «палочками» (stemchart) — целые значения (шт), точка на верхнем конце
   рисуется HTML-элементом, а не SVG-кругом: у .lc__svg viewBox растянут непропорционально
   (preserveAspectRatio="none"), круг в его координатах стал бы эллипсом. */
.lc__pt{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--c,var(--brand));
  transform:translate(-50%,-50%);box-shadow:0 0 0 2px var(--surface);pointer-events:none;z-index:2}
.lc__pt--zero{width:4px;height:4px;background:var(--muted);opacity:.4;box-shadow:none}
/* Планка (целевой показатель графика, opts.target у linechart()) — подпись значения слева у
   линии; сама линия — gold-пунктир в SVG (см. linechart()). Общая для всех (api/mktargets.php),
   в отличие от .mk-reorder — той личной настройки вида. */
/* Подпись цели на графике: значение + постановщик, цвет цели (--gc) — у последнего видимого
   сегмента (см. mkGoalsSvg). Сама ступенька/границы — пунктир того же цвета в SVG. Команднáя
   (api/mktargets.php); линию можно тащить за сам сегмент (data-goalseg в SVG), не за подпись. */
.lc__goal-lbl{position:absolute;transform:translate(-100%,-50%);display:inline-flex;align-items:baseline;gap:4px;
  font-size:10px;font-weight:800;color:var(--gc,var(--gold));background:var(--surface);padding:1px 5px;
  border-radius:999px;border:1px solid color-mix(in srgb,var(--gc,var(--gold)) 45%,var(--line));pointer-events:none;
  z-index:3;white-space:nowrap;max-width:70%;overflow:hidden;text-overflow:ellipsis}
.lc__goal-lbl i{font-style:normal;font-weight:600;opacity:.7;font-size:9px}
/* Крестик удаления цели прямо в подписи (только у постановщика) — сам крестик кликабелен,
   остальная подпись — нет (не мешает наведению на график). */
.lc__goal-lbl.is-own{pointer-events:auto}
.lc__goal-del{display:inline-flex;align-items:center;justify-content:center;width:13px;height:13px;padding:0;margin-left:1px;
  border:none;background:transparent;color:var(--gc,var(--gold));opacity:.5;cursor:pointer;border-radius:50%;flex:none}
.lc__goal-del:hover{opacity:1;color:var(--down);background:color-mix(in srgb,var(--down) 16%,transparent)}
.lc__goal-del svg{width:8px;height:8px}
/* Справочная врезка «Цель: X/день» под донатом/таблицей (#5). */
/* Кнопка «Задать цель» в строке контролов — прижата вправо (перенесена из заголовка, #1). */
/* Кнопка «Задать цель» рядом с названием графика (только «Итог — графики»; в компактной сетке
   «Общего» планка отображается, но не редактируется — там кнопки нет). */
/* Кнопка «Вид по умолчанию» в шапке «Отчёта по Avito»/«Отчёта по сделкам» — сбрасывает личный
   порядок столбцов таблицы и порядок/ширину/вид карточек-метрик, см. mkAvitoResetView(). */
/* Менеджер целей метрики (mkOpenGoalsManager): строка цели — цвет-точка, значение(я), даты,
   постановщик, действия (у своих — редактировать/удалить, у чужих — «только просмотр»). */
/* Форма создания/редактирования цели (mkOpenGoalForm/mkOpenGoalEdit). Календарь-диапазон в строке
   выравниваем справа, как остальные поля формы. */
.cform__err{color:var(--down);font-size:12px;font-weight:600;margin:2px 0 4px}
/* Инлайн-поповер ввода значения при добавлении излома двойным кликом на графике (mkShowBpInput). */

/* ---- Рейтинг-лента ---- */
.rating{display:flex;gap:14px;overflow-x:auto;padding:6px 2px 10px;scroll-snap-type:x proximity}
.rating__item{flex:0 0 auto;width:74px;display:flex;flex-direction:column;align-items:center;gap:7px;scroll-snap-align:start}
/* Статус-уровни команды (металлическое кольцо-обводка, в духе FIFA-карт) */
.tier-bronze{background:linear-gradient(145deg,#f0c39a 0%,#c87a3f 38%,#8a4f23 60%,#e2a36e 82%,#7a431d 100%)}
.tier-gold{background:linear-gradient(145deg,#fff1c2 0%,#f3c63f 32%,#b8860b 56%,#ffe48a 80%,#9a6a00 100%)}
.tier-platinum{background:linear-gradient(145deg,#ffffff 0%,#cdd6df 30%,#8e9dac 56%,#eef2f6 80%,#9aa7b4 100%)}
.tier-regular{background:var(--surface-2)}
.rating__ring{padding:4px;border-radius:50%;flex:none;line-height:0}
.rating__ring.tier-bronze,.rating__ring.tier-gold,.rating__ring.tier-platinum{box-shadow:0 3px 9px rgba(40,30,10,.16)}
.rating__ring.tier-regular{padding:3px;background:linear-gradient(145deg,#eaeef2,#ccd4dc)}
.rating__ava{
  position:relative;width:58px;height:58px;border-radius:50%;
  display:grid;place-items:center;color:#fff;font-weight:700;font-size:18px;
  border:2px solid var(--surface);
}
.rating__badge{
  position:absolute;top:-4px;right:-4px;width:21px;height:21px;
  border-radius:999px;background:var(--surface);border:2px solid var(--surface);
  box-shadow:0 0 0 1px var(--line) inset;
  display:grid;place-items:center;font-size:11px;font-weight:800;color:var(--muted);
}
.rating__item.is-me .rating__name{color:var(--brand)}
/* Легенда уровней */
.tiers-legend{display:flex;gap:16px;flex-wrap:wrap;margin:14px 2px 0}
.tl{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:var(--muted);font-weight:600}
.tl__dot{width:13px;height:13px;border-radius:50%;flex:none}
.tl__dot.tier-regular{box-shadow:0 0 0 1px var(--line) inset}
.rating__name{font-size:11px;color:var(--ink-soft);font-weight:600;text-align:center;max-width:74px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rating__val{font-size:11px;color:var(--muted);font-weight:600}

/* ---- Kanban card ---- */
.kanban{
  display:flex;flex-direction:row;gap:12px;align-items:center;text-align:left;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:14px;transition:.15s;
}
.kanban:active{transform:scale(.98)}
.kanban:hover{border-color:var(--c,var(--brand))}
.kanban__icon{
  width:40px;height:40px;border-radius:11px;flex:none;display:grid;place-items:center;
  background:var(--brand-tint);color:var(--c,var(--brand));
  background:color-mix(in srgb, var(--c,var(--brand)) 13%, transparent);
}
.kanban__icon svg{width:21px;height:21px}
.kanban__txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.kanban__txt{flex:1;min-width:0}
.kanban__name{font-size:13.5px;font-weight:700;line-height:1.25}
.kanban__dept{font-size:11px;color:var(--muted)}
.kanban__ppl{flex:none;display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;
  color:var(--ink-soft);background:var(--surface-2);border-radius:999px;padding:4px 9px}
.kanban__ppl-ic{width:14px;height:14px;color:var(--muted)}

/* ---- Полезные ссылки (отдельный блок, нарочно НЕ как канбаны) ---- */
.links{display:flex;flex-wrap:wrap;gap:10px;background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--r);padding:14px}
.lnk{display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  background:var(--surface);border:1px solid var(--line);border-radius:999px;
  padding:8px 15px 8px 8px;font-size:13px;font-weight:600;color:var(--ink);transition:.15s}
.lnk:hover{border-color:var(--brand);color:var(--brand)}
.lnk__ic{width:28px;height:28px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--brand-tint);color:var(--brand)}
.lnk__ic svg{width:15px;height:15px}
.lnk__ext{width:14px;height:14px;flex:none;color:var(--muted)}
.lnk:hover .lnk__ext{color:var(--brand)}

/* ---- Раскрываемая панель «Программы» (главная): установщики рабочего софта.
       Свёрнутая — это ровно заголовок блока, поэтому шапка повторяет .block__title:
       закрытая панель должна читаться как обычный заголовок соседнего блока, а не
       как чужеродная плашка. Список и адреса кнопок приходят с сервера
       (ME.progs_list ← lib/progs.php) — см. progsHtml() в app.js. ---- */
.progs{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px}
.progs__head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:18px;font-weight:500;
  letter-spacing:.2px;cursor:pointer;list-style:none;user-select:none}
.progs__head::-webkit-details-marker{display:none}
.progs__chev{width:16px;height:16px;color:var(--muted);margin-left:auto;transition:transform .15s}
.progs[open] .progs__chev{transform:rotate(180deg)}
.progs__list{display:flex;flex-direction:column;gap:8px;margin-top:13px}
.prog{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px}
.prog__txt{flex:1;min-width:200px;display:flex;flex-direction:column;gap:2px;font-size:13.5px}
.prog__hint{font-size:11.5px;color:var(--muted);line-height:1.35}
/* Одинаково выглядят и <a> (прямое скачивание), и <button> (VPN — сперва выдача) */
.prog__btn{flex:none;display:inline-flex;align-items:center;gap:7px;text-decoration:none;
  background:var(--brand);color:#fff;border:0;border-radius:999px;padding:8px 15px;
  font:inherit;font-size:13px;font-weight:600;line-height:1.2;cursor:pointer}
.prog__btn svg{width:15px;height:15px}
.prog__btn:hover{filter:brightness(1.06)}
.prog__btn.is-busy{opacity:.55;pointer-events:none}
.progs__empty,.progs__more{font-size:12px;color:var(--muted);margin:13px 2px 0;line-height:1.45}
.progs__more a{color:var(--brand)}

.foot{margin:30px 2px 12px;text-align:center;color:var(--muted);font-size:11.5px}

/* ---- Блок «Правки от руководителя» ---- */
.edits__panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px}
.edits__row{display:flex;gap:10px;align-items:stretch}
.edits__ta{flex:1;resize:vertical;min-height:48px;border:1px solid var(--line);border-radius:var(--r-sm);
  padding:11px 13px;font-family:inherit;font-size:13.5px;line-height:1.4;background:var(--bg);color:var(--ink)}
.edits__ta:focus{outline:none;border-color:var(--brand)}
.edits__ta::placeholder{color:var(--muted)}
.edits__actions{display:flex;flex-direction:column;gap:8px;flex:none}
.edits__attach{flex:none;height:42px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface-2);color:var(--ink-soft);display:grid;place-items:center;cursor:pointer;transition:.15s}
.edits__attach:hover{border-color:var(--brand);color:var(--brand)}
.edits__attach svg{width:20px;height:20px}
.edits__btn{flex:1;border:none;background:var(--brand);color:#fff;border-radius:var(--r-sm);
  padding:0 18px;font-weight:700;font-size:13.5px;transition:.15s}
.edits__btn:hover{background:var(--brand-2)}
.edits__btn:disabled{opacity:.55}
.edits__thumbs{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.edits__thumbs:empty{display:none}
.thumb{position:relative;width:62px;height:62px;border-radius:10px;overflow:hidden;border:1px solid var(--line)}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb__x{position:absolute;top:2px;right:2px;width:18px;height:18px;border-radius:50%;border:none;
  background:rgba(0,0,0,.6);color:#fff;font-size:10px;line-height:1;display:grid;place-items:center;cursor:pointer}
.edits__msg{font-size:12.5px;color:var(--up);font-weight:600;margin-top:8px;min-height:16px}
.edits__msg.is-err{color:var(--down)}
.edits__list{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.ed{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--bg)}
.ed__head{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.ed__badge{font-size:10px;font-weight:800;padding:2px 9px;border-radius:999px}
.ed--new{background:var(--brand-tint);color:var(--brand)}
.ed--prog{background:rgba(47,109,240,.14);color:#2f6df0}
.ed--done{background:rgba(44,163,106,.14);color:var(--up)}
.ed__time{font-size:11px;color:var(--muted);margin-left:auto}
.ed__text{font-size:13px;line-height:1.45;color:var(--ink)}
.ed__reply{font-size:12.5px;color:var(--muted);margin-top:7px;padding-top:7px;border-top:1px dashed var(--line)}
.ed__imgs{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.ed__img{display:block;width:74px;height:74px;border-radius:8px;overflow:hidden;border:1px solid var(--line)}
.ed__img img{width:100%;height:100%;object-fit:cover;display:block}
.ed--empty{color:var(--muted);font-size:12.5px;text-align:center;border-style:dashed}
@media (max-width:560px){ .edits__row{flex-direction:column} .edits__actions{flex-direction:row} .edits__attach{width:52px} .edits__btn{flex:1;padding:11px} }

/* ============================================================
   ЗАМЕТКИ — как iCloud/iPhone: ТРИ КОЛОНКИ СРАЗУ (папки · список · редактор).
   Одна раскладка на drawer (широкий, справа) и страницу. Папки с вложенностью,
   список с секцией «Прикреплено». Фирстиль главной: флэт, оранжевое действие.
   ============================================================ */
.hub__count--notes.is-on{background:var(--brand);color:#fff}
.hub__count--notes.is-zero{background:var(--surface-2);color:var(--muted)}

/* ----- Сетка трёх колонок (общая для drawer и страницы) ----- */

/* папки-дерево (сайдбар) */
/* кнопки действий папки (переименовать/удалить) — появляются на наведении */
/* строка переименования папки */

/* список заметок */
.napp__search{flex:1;min-width:0;display:flex;align-items:center;gap:7px;background:var(--surface-2);border-radius:10px;padding:7px 11px}
.napp__search svg{width:15px;height:15px;color:var(--muted);flex:none}
.napp__search input{flex:1;min-width:0;border:none;background:transparent;font:inherit;font-size:13px;color:var(--ink);outline:none}
.nrow{display:flex;align-items:flex-start;gap:10px;width:100%;text-align:left;cursor:pointer;
  border:none;background:transparent;border-radius:11px;padding:10px 11px;transition:background .12s}
.nrow+.nrow{margin-top:2px}
.nrow:hover{background:var(--surface-2)}
.nrow.is-active{background:var(--brand-tint)}

/* редактор */
/* кнопка «‹ Заметки» — возврат к списку, только на узких экранах (мобильная раскладка) */
   /* «v» повёрнут — указывает влево «‹» */

/* ---- Проверка орфографии (как в Google Документах): подчёркивание + всплывашка ---- */
/* min-height резервирует место под 2 строки: статус-строка не меняет высоту при
   смене состояния («ошибок не нашёл» 1 строка <-> «Нашёл N ошибок...» 2 строки),
   поэтому текст заметки под ней НЕ прыгает при обновлении результата проверки. */
.nspell{display:flex;align-items:center;gap:7px;margin:8px 16px 0;padding:7px 11px;border-radius:10px;min-height:48px;
  font-size:12.5px;font-weight:600;line-height:1.35;border:1px solid var(--line);background:var(--surface-2);color:var(--muted)}
.nspell:empty{display:none}
.nspell svg{width:15px;height:15px;flex:none}
.nspell b{color:var(--ink)}
.nspell--load svg{animation:nspin 1s linear infinite;color:var(--brand)}
.nspell--ok{color:var(--up);border-color:color-mix(in srgb,var(--up) 28%,var(--line));background:color-mix(in srgb,var(--up) 8%,transparent)}
.nspell--has{color:var(--brand);border-color:color-mix(in srgb,var(--brand) 30%,var(--line));background:var(--brand-tint)}
/* кнопка «Исправить все» в строке статуса орфографии — фирменный оранжевый */
.nspell__fix{display:inline-flex;align-items:center;gap:6px;margin-left:auto;flex:none;border:0;cursor:pointer;
  background:var(--brand);color:#fff;border-radius:8px;padding:5px 10px;font:inherit;font-size:12px;font-weight:700;
  white-space:nowrap;transition:filter .12s,transform .04s}
.nspell__fix svg{width:14px;height:14px;flex:none}
.nspell__fix:hover{filter:brightness(1.07)}
.nspell__fix:active{transform:translateY(1px)}
@keyframes nspin{to{transform:rotate(360deg)}}
/* всплывашка вариантов — компактная карточка ровно как в Google Документах */
.spop{position:fixed;z-index:1200;min-width:172px;max-width:280px;background:var(--surface);
  border:1px solid var(--line);border-radius:8px;box-shadow:0 2px 10px rgba(16,24,40,.16),0 1px 3px rgba(16,24,40,.1);
  padding:5px;animation:spopin .1s ease}
[data-theme="dark"] .spop{box-shadow:0 4px 18px rgba(0,0,0,.55)}
@keyframes spopin{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
.spop__sugs{display:flex;flex-direction:column;gap:1px;max-height:228px;overflow-y:auto}
.spop__s{display:block;width:100%;text-align:left;border:0;background:none;cursor:pointer;border-radius:5px;
  padding:7px 10px;font:inherit;font-size:14px;font-weight:600;color:var(--ink);transition:background .1s}
.spop__s:hover,.spop__s:focus-visible{background:var(--surface-2);outline:none}
.spop__none{padding:7px 10px;color:var(--muted);font-size:13px}
.spop__foot{display:flex;align-items:center;gap:3px;margin-top:3px;padding-top:3px;border-top:1px solid var(--line)}
.spop__ign{flex:1 1 auto;text-align:left;border:0;background:none;cursor:pointer;border-radius:5px;padding:7px 10px;
  font:inherit;font-size:13px;font-weight:600;color:var(--muted);transition:.1s}
.spop__ign:hover{background:var(--surface-2);color:var(--ink)}
.spop__kebab{flex:none;width:30px;height:30px;display:grid;place-items:center;border:0;background:none;cursor:pointer;
  border-radius:6px;color:var(--muted);transition:.1s}
.spop__kebab:hover,.spop.is-more .spop__kebab{background:var(--surface-2);color:var(--ink)}
.spop__more{margin-top:3px;padding-top:3px;border-top:1px solid var(--line)}
.spop__more[hidden]{display:none}
.spop__mitem{display:flex;align-items:center;gap:8px;width:100%;text-align:left;border:0;background:none;cursor:pointer;
  border-radius:5px;padding:7px 10px;font:inherit;font-size:13px;font-weight:600;color:var(--ink-soft);transition:.1s}
.spop__mitem:hover{background:var(--brand-tint);color:var(--brand)}
.spop__mic{width:15px;height:15px;flex:none}
/* Редактор с живыми кружками (contenteditable) */

/* пустые состояния */

/* ----- Оболочка боковой панели (drawer справа, ШИРОКАЯ — три колонки) ----- */

/* ===== Заметки по закупкам — ОБЩИЙ блокнот команды (drawer СЛЕВА + таблица) ===== */
.purch-notesbtn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--surface-2);
  color:var(--ink-soft);border-radius:11px;padding:7px 13px;font-size:12.5px;font-weight:700;white-space:nowrap;cursor:pointer;transition:.15s}
.purch-notesbtn:hover{border-color:var(--brand);color:var(--brand)}
.purch-notesbtn svg{width:15px;height:15px}

/* «Обновить анализ сейчас» — та же форма кнопки, что «Заметки» */
.purch-refreshbtn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--surface-2);
  color:var(--ink-soft);border-radius:11px;padding:7px 13px;font-size:12.5px;font-weight:700;white-space:nowrap;cursor:pointer;transition:.15s}
.purch-refreshbtn:hover{border-color:var(--brand);color:var(--brand)}
.purch-refreshbtn svg{width:15px;height:15px}
.purch-refreshbtn.is-busy{opacity:.6;cursor:default;pointer-events:none}
.purch-refreshbtn.is-busy svg{animation:purchspin 1s linear infinite}
@keyframes purchspin{to{transform:rotate(360deg)}}

.pndrawer{position:fixed;inset:0;z-index:78}
.pndrawer[hidden]{display:none}
.pndrawer__backdrop{position:absolute;inset:0;background:rgba(10,14,18,.35);opacity:0;transition:opacity .2s}
.pndrawer.is-open .pndrawer__backdrop{opacity:1}
.pndrawer__card{position:absolute;top:0;right:0;bottom:0;width:min(1180px,96vw);display:flex;flex-direction:column;
  background:var(--surface);border-left:1px solid var(--line);box-shadow:-18px 0 50px rgba(16,24,40,.16);
  transform:translateX(102%);transition:transform .24s cubic-bezier(.4,0,.2,1)}
.pndrawer.is-open .pndrawer__card{transform:none}
.pndrawer__head{display:flex;align-items:center;gap:11px;padding:13px 16px;border-bottom:1px solid var(--line);flex:none}
.pndrawer__ava{width:38px;height:38px;border-radius:12px;flex:none;display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,var(--brand),color-mix(in srgb,var(--brand) 45%,#ffb340));
  box-shadow:0 4px 12px color-mix(in srgb,var(--brand) 30%,transparent)}
.pndrawer__ava svg{width:19px;height:19px}
.pndrawer__id{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.pndrawer__id b{font-size:14.5px;font-weight:800;letter-spacing:.3px}
.pndrawer__id span{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pndrawer__close{border:none;background:var(--surface-2);width:30px;height:30px;border-radius:9px;color:var(--muted);
  display:grid;place-items:center;cursor:pointer;flex:none}
.pndrawer__close svg{width:14px;height:14px}
.pndrawer__close:hover{color:var(--down)}
.pndrawer__body{flex:1;min-height:0;overflow-y:auto;background:var(--surface-2);padding:14px 16px;display:flex;flex-direction:column;gap:12px}

.pn-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pn-top__cnt{font-size:12px;color:var(--muted);font-weight:600}
.pn-newbtn{display:inline-flex;align-items:center;gap:8px;background:var(--brand);color:#fff;border:none;border-radius:11px;
  padding:9px 15px;font-size:13px;font-weight:800;cursor:pointer;transition:.15s}
.pn-newbtn:hover{filter:brightness(1.06)}
.pn-newbtn svg{width:16px;height:16px}
/* поиск по заметкам закупок — белое поле сразу (как .purch-search), а не серое до клика;
   стоит в одну строку с кнопкой и счётчиком (flex:1 — занимает остаток ширины) */
.pn-search-wrap{flex:1 1 220px;min-width:0;margin:0}
.pn-search{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:8px 8px 8px 12px;transition:.15s}
.pn-search:focus-within{border-color:var(--brand);background:var(--surface)}
.pn-search>svg{width:16px;height:16px;color:var(--muted);flex:none}
.pn-search__in{flex:1;min-width:0;border:none;background:transparent;font:inherit;font-size:13px;color:var(--ink);outline:none}
.pn-search__x{flex:none;border:none;background:transparent;width:24px;height:24px;border-radius:7px;display:none;place-items:center;cursor:pointer;color:var(--muted);transition:.15s}
.pn-search__x svg{width:13px;height:13px}
.pn-search__x:hover{color:var(--down);background:color-mix(in srgb,var(--down) 12%,transparent)}
.pn-search-wrap.is-filled .pn-search__x{display:grid}
.pn-list{display:flex;flex-direction:column;gap:12px}
.pn-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;color:var(--muted);
  padding:38px 16px;font-size:13.5px;font-weight:500;line-height:1.5}
.pn-empty b{color:var(--ink);font-weight:700}
.pn-empty__ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--brand-tint);color:var(--brand)}
.pn-empty__ic svg{width:22px;height:22px}

.pncard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:13px 14px;display:flex;flex-direction:column;gap:11px}
.pncard__head{display:flex;align-items:center;gap:10px}
.pncard__ava{width:32px!important;height:32px!important;font-size:12px}
.pncard__who{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.pncard__who b{font-size:13px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pncard__who span{font-size:11px;color:var(--muted)}
.pncard__del{border:none;background:transparent;color:var(--muted);width:28px;height:28px;border-radius:8px;display:grid;place-items:center;cursor:pointer;flex:none;transition:.15s}
.pncard__del:hover{background:color-mix(in srgb,var(--down) 12%,transparent);color:var(--down)}
.pncard__del svg{width:15px;height:15px}
/* Авто-высота под текст (pn-grow → pnGrow): растёт вниз по содержимому,
   без вертикального скролла и без ручки ресайза (как ячейки таблицы и правила). */
.pncard__text{width:100%;display:block;resize:none;overflow:hidden;min-height:38px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);
  border-radius:var(--r-sm);padding:8px 11px;font:inherit;font-size:13px;line-height:1.45}
.pncard__text:focus{outline:none;border-color:var(--brand);background:var(--surface)}
/* Кликабельный ВИД комментария (когда не редактируем): тот же вид, что поле, но
   div — растёт под текст сам, переносит длинные ссылки. По клику → правка. */
.pncard__textview{cursor:text;white-space:pre-wrap;overflow-wrap:anywhere;height:auto}
.pncard__textview:hover{border-color:var(--brand)}
.pncard__textview.is-empty{color:var(--muted)}
/* Ссылки в комментарии стилизует .ned__link (оранжевые, ОДНО подчёркивание через
   border-bottom) — свой text-decoration не добавляем, иначе выходит двойная линия. */

.pnt-wrap{display:flex;flex-direction:column;gap:10px}
.pnt-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.pnt{width:max-content;min-width:100%;border-collapse:collapse;font-size:13px;table-layout:fixed}
/* Сетку-«Excel» убрали: строки делит только тонкая горизонталь, столбцы — совсем
   бледная вертикаль. Таблица «дышит», как белые карточки на главной. */
.pnt td{border:none;border-bottom:1px solid var(--line);border-right:1px solid color-mix(in srgb,var(--line) 55%,transparent);vertical-align:middle}
.pnt tbody tr:last-child td{border-bottom:none}
.pnt tbody tr:hover>td{background:color-mix(in srgb,var(--brand) 4%,var(--surface))}
.pnt thead th{background:var(--surface-2);position:relative;white-space:nowrap;border:none;border-bottom:1.5px solid var(--line)}
.pnt__th--name{min-width:150px}
/* Колонка действий (крестик удаления строки) ПРИКЛЕЕНА к правому краю — видна
   всегда, даже когда таблица шире окна и едет вбок (раньше крестик уезжал из вида). */
.pnt th.pnt__th--act,.pnt td.pnt__td--act{position:sticky;right:0;z-index:2;width:42px;min-width:42px;
  background:var(--surface);border:none;border-bottom:1px solid var(--line);border-left:1px solid var(--line);text-align:center;padding:6px;vertical-align:middle}
.pnt thead th.pnt__th--act{background:var(--surface-2);z-index:6;border-bottom:1.5px solid var(--line)}
.pnt tbody tr:last-child td.pnt__td--act{border-bottom:none}
/* «Замыливание» у правого края: содержимое (длинная ссылка/текст) не упирается в
   резкую белую кромку липкой колонки-крестика, а плавно тает в фон — узкая полоса-
   градиент слева от колонки действий. pointer-events:none — клики проходят насквозь,
   сам крестик остаётся чётким (полоса целиком левее ячейки). */
.pnt td.pnt__td--act::before{content:"";position:absolute;top:0;bottom:0;left:-28px;width:28px;pointer-events:none;background:linear-gradient(to right,transparent,var(--surface))}
.pnt tbody tr:hover>td.pnt__td--act::before{background:linear-gradient(to right,transparent,color-mix(in srgb,var(--brand) 4%,var(--surface)))}
.pnt thead th.pnt__th--act::before{content:"";position:absolute;top:0;bottom:0;left:-28px;width:28px;pointer-events:none;background:linear-gradient(to right,transparent,var(--surface-2))}
.pnt tbody tr:hover>td.pnt__td--act{background:color-mix(in srgb,var(--brand) 4%,var(--surface))}
.pnt__hin{width:100%;min-width:64px;border:none;background:transparent;color:var(--muted);font-weight:700;font-size:11px;
  padding:9px 20px 9px 11px;text-transform:uppercase;letter-spacing:.5px}
.pnt__th--name .pnt__hin{padding-right:11px}
.pnt__hin:focus{outline:none;color:var(--ink)}
.pnt__colx{position:absolute;top:50%;right:3px;transform:translateY(-50%);border:none;background:transparent;color:var(--muted);
  width:18px;height:18px;border-radius:5px;display:grid;place-items:center;cursor:pointer;opacity:0;transition:.15s}
.pnt thead th:hover .pnt__colx{opacity:1}
.pnt__colx:hover{color:var(--down);background:color-mix(in srgb,var(--down) 12%,transparent)}
.pnt__colx svg{width:12px;height:12px}
/* Ручка изменения ширины столбца — тонкая полоса на правой границе th (как в Excel).
   Видна ВСЕГДА (бледный серый штрих-разделитель) — это подсказка, что границу
   можно тянуть; под курсором/при перетаскивании становится оранжевой и выше. */
.pnt__rz{position:absolute;top:0;right:-4px;width:9px;height:100%;cursor:col-resize;z-index:4;touch-action:none;-webkit-user-select:none;user-select:none}
.pnt__rz::after{content:"";position:absolute;top:24%;bottom:24%;left:3.5px;width:2px;border-radius:2px;
  background:color-mix(in srgb,var(--muted) 42%,transparent);transition:background .15s,top .15s,bottom .15s}
.pnt thead th:hover .pnt__rz::after,.pnt__rz:hover::after,.pnt__rz.is-drag::after{background:var(--brand);top:12%;bottom:12%}
.pnt.is-resizing,.pnt.is-resizing .pnt__cin,.pnt.is-resizing .pnt__hin{cursor:col-resize}
.pnt.is-resizing{user-select:none}
.pnt__cin{width:100%;min-width:0;border:none;background:transparent;color:var(--ink);padding:9px 11px;font:inherit;font-size:13px;
  font-family:inherit;line-height:1.45;resize:none;overflow:hidden;display:block;white-space:pre-wrap;overflow-wrap:anywhere}
.pnt__cin::placeholder{color:color-mix(in srgb,var(--muted) 48%,transparent)}
.pnt__cin:focus{outline:none;box-shadow:inset 0 0 0 1.6px var(--brand);background:color-mix(in srgb,var(--brand) 6%,var(--surface));border-radius:5px}
/* Наименования — отдельной серифной гарнитурой (Lora), чтобы выделялись на фоне
   грубоватого Manrope в остальных столбцах: глаз сразу цепляется за позицию. */
.pnt__cin--name{font-family:"Lora","Georgia","Times New Roman",serif;font-weight:600;font-size:14.5px;letter-spacing:.1px;line-height:1.45}
.pnt__td:not(.pnt__td--name):not(.pnt__td--text) .pnt__cin{text-align:center;font-variant-numeric:tabular-nums}
.pnt__td--text .pnt__cin{text-align:left}
/* Лёгкий ПРОСМОТР ячейки: div вместо textarea (тысяча textarea = тормоз рендера).
   Выглядит как .pnt__cin; по клику превращается в textarea (pnCellHtml/celledit). */
.pnt__cv{min-width:0;color:var(--ink);padding:9px 11px;font:inherit;font-size:13px;line-height:1.45;
  white-space:pre-wrap;overflow-wrap:anywhere;cursor:text;min-height:19px}
.pnt__cv.is-empty{color:color-mix(in srgb,var(--muted) 48%,transparent)}
.pnt__cv--name{font-family:"Lora","Georgia","Times New Roman",serif;font-weight:600;font-size:14.5px;letter-spacing:.1px}
.pnt__td:not(.pnt__td--name):not(.pnt__td--text) .pnt__cv{text-align:center;font-variant-numeric:tabular-nums}
.pnt__td--text .pnt__cv{text-align:left}
.pnt__cv:hover{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--brand) 32%,var(--line));border-radius:5px}
/* совпадение поиска в ячейке/заголовке таблицы: внутрь полей <mark> не положить,
   поэтому метим саму ячейку фоном в цвет бренда — как mark.hl в тексте. */
.pnt__td--hit,.pnt__th--hit{background:color-mix(in srgb,var(--brand) 13%,transparent)}
.pnt__th--hit .pnt__hin{color:var(--brand)}
.pnt__rowx{border:none;background:transparent;color:var(--muted);width:28px;height:28px;border-radius:7px;display:grid;place-items:center;cursor:pointer;opacity:.55;transition:.15s}
.pnt tbody tr:hover .pnt__rowx{opacity:.85}
.pnt__rowx:hover{color:var(--down);opacity:1;background:color-mix(in srgb,var(--down) 12%,transparent)}
.pnt__rowx svg{width:15px;height:15px}
/* Колонка-ручка перетаскивания строки (точки-«грип») — слева, ПРИКЛЕЕНА к левому
   краю (видна всегда, даже когда таблица уехала вбок). За неё пользователь тянет
   и меняет порядок позиций (rows + параллельные ссылки/фото переставляются вместе). */
.pnt th.pnt__th--grip,.pnt td.pnt__td--grip{position:sticky;left:0;z-index:2;width:30px;min-width:30px;
  background:var(--surface);border:none;border-bottom:1px solid var(--line);border-right:1px solid var(--line);padding:2px;text-align:center;vertical-align:middle}
.pnt thead th.pnt__th--grip{background:var(--surface-2);z-index:6;border-bottom:1.5px solid var(--line)}
.pnt tbody tr:last-child td.pnt__td--grip{border-bottom:none}
.pnt tbody tr:hover>td.pnt__td--grip{background:color-mix(in srgb,var(--brand) 4%,var(--surface))}
.pnt__grip{border:none;background:transparent;color:var(--muted);width:24px;height:26px;border-radius:7px;display:grid;place-items:center;
  cursor:grab;opacity:.3;transition:.15s;touch-action:none;-webkit-user-select:none;user-select:none}
.pnt tbody tr:hover .pnt__grip{opacity:.7}
.pnt__grip:hover{opacity:1;color:var(--brand);background:var(--brand-tint)}
.pnt__grip:active{cursor:grabbing}
.pnt__grip svg{width:16px;height:16px}
/* На время перетаскивания: гасим выделение текста, строку «приподнимаем» подсветкой. */
.pnt.is-reordering,.pnt.is-reordering .pnt__grip{cursor:grabbing}
.pnt.is-reordering{user-select:none}
.pnt__tr--drag td{background:color-mix(in srgb,var(--brand) 9%,var(--surface))}
.pnt tr.pnt__tr--drag td.pnt__td--grip,.pnt tr.pnt__tr--drag td.pnt__td--act{background:color-mix(in srgb,var(--brand) 12%,var(--surface))}
.pnt__tr--drag .pnt__grip{opacity:1;color:var(--brand)}
.pnt__norows{padding:11px;text-align:center;color:var(--muted);font-size:12px;font-weight:600}
.pnt__acts{display:flex;gap:8px;flex-wrap:wrap}
.pnt__add{display:inline-flex;align-items:center;gap:5px;border:1px dashed var(--line);background:var(--surface);color:var(--ink-soft);
  border-radius:9px;padding:6px 11px;font-size:12px;font-weight:700;cursor:pointer;transition:.15s}
.pnt__add:hover{border-color:var(--brand);color:var(--brand);border-style:solid}
.pnt__add svg{width:13px;height:13px}

/* Столбец «Ссылки»: на каждую позицию — список ссылок (их может быть несколько). */
.pnt__th--links{min-width:200px;padding:9px 11px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);text-align:left}
.pnt__lkic{width:13px;height:13px;vertical-align:-2px;margin-right:5px;color:var(--muted)}
.pnt__td--links{padding:7px;vertical-align:middle;background:var(--surface)}
.pnt tbody tr:hover>td.pnt__td--links{background:color-mix(in srgb,var(--brand) 4%,var(--surface))}
.pnt-lks{display:flex;flex-direction:column;gap:5px;min-width:188px;margin-bottom:7px}
.pnt-lk{display:flex;align-items:center;gap:3px;background:var(--surface-2);border:1px solid var(--line);border-radius:9px;padding:1px 3px 1px 8px;transition:.15s}
.pnt-lk:focus-within{border-color:var(--brand)}
.pnt-lk__ic{flex:none;width:15px;height:15px;display:grid;place-items:center;color:var(--muted)}
.pnt-lk.is-set .pnt-lk__ic{color:var(--brand)}
/* ссылка-совпадение поиска: подсвечиваем плашку в цвет бренда (внутрь input <mark> не положить) */
.pnt-lk.is-hit{background:color-mix(in srgb,var(--brand) 15%,var(--surface-2));border-color:color-mix(in srgb,var(--brand) 45%,var(--line))}
.pnt-lk__ic svg{width:14px;height:14px}
.pnt-lk__in{flex:1;min-width:0;border:none;background:transparent;color:var(--ink);font:inherit;font-size:12px;padding:6px 2px;white-space:nowrap;overflow:hidden;text-overflow:clip}
/* «Замыливание» длинного адреса: когда ссылка не помещается, текст мягко тает у
   правого края чипа, а не обрывается резко у липкой колонки с крестиком. При
   фокусе-правке маску снимаем — виден конец адреса и каретка. */
.pnt-lk__in:not(:focus){-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 22px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 22px),transparent)}
.pnt-lk__in:focus{outline:none}
.pnt-lk__go,.pnt-lk__x{flex:none;border:none;background:transparent;width:24px;height:24px;border-radius:7px;display:grid;place-items:center;cursor:pointer;color:var(--muted);transition:.15s}
.pnt-lk__go svg,.pnt-lk__x svg{width:13px;height:13px}
.pnt-lk__go:hover{color:var(--brand);background:var(--brand-tint)}
.pnt-lk__x:hover{color:var(--down);background:color-mix(in srgb,var(--down) 12%,transparent)}
/* Фото строки: ряд маленьких миниатюр. Клик по миниатюре — крупно (лайтбокс). */
.pnt-phs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:188px;margin-bottom:7px}
.pnt-ph{position:relative;width:46px;height:46px;flex:none;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--surface-2)}
.pnt-ph__img{width:100%;height:100%;object-fit:cover;display:block;cursor:zoom-in}
.pnt-ph__x{position:absolute;top:2px;right:2px;width:18px;height:18px;border:none;border-radius:50%;background:rgba(8,11,16,.55);color:#fff;
  display:grid;place-items:center;cursor:pointer;opacity:0;transition:.15s}
.pnt-ph__x svg{width:11px;height:11px}
.pnt-ph:hover .pnt-ph__x,.pnt-ph:focus-within .pnt-ph__x{opacity:1}
.pnt-ph__x:hover{background:var(--down)}
/* Ряд кнопок-иконок «добавить фото / ссылку» — без текста, в одну строку. */
.pnt-att{display:flex;align-items:center;gap:6px}
.pnt-addbtn{display:grid;place-items:center;width:34px;height:30px;border:1px dashed var(--line);background:var(--surface);color:var(--muted);
  border-radius:8px;cursor:pointer;transition:.15s}
.pnt-addbtn:hover{border-color:var(--brand);color:var(--brand);border-style:solid;background:var(--brand-tint)}
.pnt-addbtn svg{width:16px;height:16px}

/* Блок «Правила закупок» — сверху drawer'а, общий для всей команды. */
.pnr{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:13px 14px;display:flex;flex-direction:column;gap:10px}
.pnr__head{display:flex;align-items:center;gap:10px}
.pnr__ic{width:34px;height:34px;border-radius:11px;flex:none;display:grid;place-items:center;background:var(--brand-tint);color:var(--brand)}
.pnr__ic svg{width:18px;height:18px}
.pnr__id{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.pnr__id b{font-size:14px;font-weight:800;color:var(--ink)}
.pnr__id span{font-size:11.5px;color:var(--muted)}
.pnr__cnt{flex:none;font-size:12px;font-weight:800;color:var(--brand);background:var(--brand-tint);border-radius:20px;padding:3px 10px}
.pnr__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.pnr__item{display:flex;align-items:flex-start;gap:9px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:7px 8px 7px 10px;transition:.15s}
.pnr__item:focus-within{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 5%,var(--surface))}
.pnr__num{flex:none;width:22px;height:22px;margin-top:2px;border-radius:7px;display:grid;place-items:center;background:var(--brand);color:#fff;font-size:11px;font-weight:800;font-variant-numeric:tabular-nums}
.pnr__in{flex:1;min-width:0;border:none;background:transparent;color:var(--ink);font:inherit;font-family:inherit;font-size:13px;line-height:1.45;resize:none;overflow:hidden;display:block;padding:3px 2px;white-space:pre-wrap;overflow-wrap:anywhere}
.pnr__in:focus{outline:none}
.pnr__x{flex:none;border:none;background:transparent;width:26px;height:26px;border-radius:7px;display:grid;place-items:center;cursor:pointer;color:var(--muted);opacity:.55;transition:.15s}
.pnr__x:hover{color:var(--down);opacity:1;background:color-mix(in srgb,var(--down) 12%,transparent)}
.pnr__x svg{width:13px;height:13px}
/* Ручка-точки слева у правила: тянешь — переставляешь на любую позицию (как строки таблицы). */
.pnr__grip{flex:none;margin-top:1px;border:none;background:transparent;color:var(--muted);width:22px;height:24px;border-radius:7px;display:grid;place-items:center;
  cursor:grab;opacity:.4;transition:.15s;touch-action:none;-webkit-user-select:none;user-select:none}
.pnr__item:hover .pnr__grip{opacity:.8}
.pnr__grip:hover{opacity:1;color:var(--brand);background:var(--brand-tint)}
.pnr__grip:active{cursor:grabbing}
.pnr__grip svg{width:16px;height:16px}
.pnr__list.is-reordering,.pnr__list.is-reordering .pnr__grip{cursor:grabbing}
.pnr__list.is-reordering{user-select:none}
.pnr__item--drag{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 10%,var(--surface));box-shadow:0 4px 14px rgba(0,0,0,.08)}
.pnr__item--drag .pnr__grip{opacity:1;color:var(--brand)}
.pnr__empty{font-size:12.5px;color:var(--muted);line-height:1.5;margin:0}
.pnr__add{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;border:1px dashed var(--line);background:var(--surface);color:var(--ink-soft);
  border-radius:9px;padding:7px 13px;font-size:12.5px;font-weight:700;cursor:pointer;transition:.15s}
.pnr__add:hover{border-color:var(--brand);color:var(--brand);border-style:solid}
.pnr__add svg{width:14px;height:14px}
@media (max-width:680px){ .pndrawer__card{width:100%} }

/* ============================================================
   ЗАМЕТКИ · Волна 1 — цвета папок, сортировка, перетаскивание,
   быстрая заметка + отделка (привлекательнее, но в фирстиле).
   ============================================================ */
/* активная папка — подсветка и левый акцент в ЕЁ цвете */
/* палитра цветов для новой папки */
/* перетаскивание заметки в папку */
.nrow[draggable="true"]{cursor:grab}
.nrow.is-dragging{opacity:.4}
/* перетаскивание ПАПКИ: меняем порядок списка (черта = куда встанет) */
/* сортировка списка */
/* редактор — тонкий акцент в цвете папки заметки */
/* отделка: активная заметка с левым акцентом, закреплённые — тёплый фон */
.nrow{position:relative}
.nrow.is-active{background:var(--brand-tint)}
.nrow.is-active::before{content:"";position:absolute;left:3px;top:9px;bottom:9px;width:3px;border-radius:3px;background:var(--brand)}

/* ============================================================
   ЗАМЕТКИ · Волна 2 — режим просмотра: чек-листы (галочки) + кликабельные ссылки.
   ============================================================ */
.ned__link{color:var(--brand);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--brand) 35%,transparent);word-break:break-all;cursor:pointer}
.ned__link:hover{border-bottom-color:var(--brand)}
/* В редакторе-contenteditable курсор над ссылкой — «рука» (кликабельно), а не I-beam. */
.ckline{display:flex;align-items:flex-start;gap:10px;margin:5px 0}
.ckbox{flex:none;width:21px;height:21px;margin-top:1px;border:2px solid color-mix(in srgb,var(--ink) 26%,transparent);border-radius:50%;
  background:transparent;color:#fff;display:grid;place-items:center;cursor:pointer;transition:.12s;padding:0}
.ckbox svg{width:12px;height:12px;stroke-width:3}
.ckbox:hover{border-color:var(--brand)}
.ckbox.is-done{background:var(--brand);border-color:var(--brand)}
.cktext{flex:1;min-width:0;white-space:pre-wrap;word-break:break-word}
.ckline.is-done .cktext{color:var(--muted);text-decoration:line-through}

/* ---- Лайтбокс фото из заметки (слой выше drawer) ---- */
.notelb-ov{position:fixed;inset:0;z-index:130;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(8,11,16,.86)}
.notelb-ov[hidden]{display:none}
.notelb-img{max-width:100%;max-height:90vh;border-radius:12px;box-shadow:0 24px 64px rgba(0,0,0,.5)}
.notelb-x{position:absolute;top:16px;right:16px;width:40px;height:40px;border-radius:50%;border:none;
  background:rgba(255,255,255,.14);color:#fff;display:grid;place-items:center;cursor:pointer}
.notelb-x svg{width:18px;height:18px}
.notelb-x:hover{background:rgba(255,255,255,.26)}

/* ---- Тост (например, переполнение памяти браузера) ---- */
.ntoast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(10px);z-index:140;
  background:var(--ink);color:var(--bg);font-size:13px;font-weight:600;padding:10px 16px;border-radius:12px;
  box-shadow:0 12px 30px rgba(0,0,0,.25);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;max-width:90vw}
.ntoast.is-on{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---- Страница «История изменений» (во всю ширину, как все страницы) ---- */
/* Хлебные крошки «Главная > ... > Текущая» (заменили кнопку .backbtn).
   Текстовые ссылки в стиле главной: muted -> оранжевый на ховере, текущая = ink.
   Отрицательный left-margin = на 7px ширины внутреннего padding ссылки: текст
   «Главная» встаёт ровно по левому краю заголовка ниже, а ховер-подложка дышит. */
.crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:2px;margin:0 0 16px -7px;line-height:1}
.crumbs__link{border:0;background:none;padding:5px 7px;border-radius:var(--r-sm);
  color:var(--muted);font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;
  transition:color .12s,background .12s}
.crumbs__link:hover{color:var(--brand);background:color-mix(in srgb,var(--brand) 9%,transparent)}
.crumbs__link:focus-visible{outline:none;color:var(--brand);background:color-mix(in srgb,var(--brand) 13%,transparent)}
.crumbs__sep{display:inline-flex;align-items:center;color:var(--muted);opacity:.45}
.crumbs__sep-ic{width:13px;height:13px;transform:rotate(-90deg)}
.crumbs__cur{padding:5px 4px;color:var(--ink);font-size:13px;font-weight:700}
.hist__h{font-size:26px;font-weight:300;letter-spacing:.3px;margin:0}
.hist__p{color:var(--muted);font-size:13px;margin:5px 0 18px}
.feed{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ev{display:flex;gap:13px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:13px 15px;transition:border-color .15s}
.ev:hover{border-color:var(--line)}
.ev__ava{width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;color:#fff;font-weight:700;font-size:13px}
.ev__ava svg{width:18px;height:18px}
.ev__body{min-width:0;flex:1}
.ev__line{margin:0;font-size:13.5px;line-height:1.45}
.ev__target{color:var(--ink-soft)}
.ev__meta{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:7px}
.ev__board{font-size:10.5px;font-weight:700;padding:3px 10px;border-radius:999px;white-space:nowrap;
  background:color-mix(in srgb, var(--c) 14%, transparent);color:var(--c)}
.ev__move{font-size:11.5px;color:var(--muted);font-weight:600}
.ev__arr{color:var(--brand);font-weight:800}
.ev__time{font-size:11.5px;color:var(--muted);margin-left:auto;white-space:nowrap}

/* ---- История изменений: ДВЕ КОЛОНКИ (Контент | Сайт и код) + откат ---- */
.hist--two{max-width:none}   /* во всю ширину, как все страницы */
/* строка-сводка (как KPI-ряд главной): белые плитки с цветной иконкой и числом */
.histkpi{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0 2px 22px}
.hkpi{display:flex;align-items:center;gap:13px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px}
.hkpi__ic{width:42px;height:42px;border-radius:12px;flex:none;display:grid;place-items:center;
  background:color-mix(in srgb,var(--c,var(--brand)) 13%,var(--surface));color:var(--c,var(--brand))}
.hkpi__ic svg{width:21px;height:21px}
.hkpi__b{display:flex;flex-direction:column;min-width:0}
.hkpi__v{font-size:24px;font-weight:700;letter-spacing:.2px;color:var(--ink);line-height:1.1}
.hkpi__l{font-size:12px;color:var(--muted);font-weight:600;margin-top:2px}
@media (max-width:760px){ .histkpi{grid-template-columns:1fr 1fr} }
/* ---- блок «Динамика изменений»: две панели с графиком (стиль главной) ---- */
.hdyn{margin:0 2px 22px}
.hdyn__grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.hdyn__grid--3{grid-template-columns:1fr 1fr 1fr}
.hdyn__grid--4{grid-template-columns:repeat(4,1fr)}
.hdyn__card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px 12px}
.hdyn__top{display:flex;align-items:center;gap:11px;margin-bottom:10px}
.hdyn__ic{width:38px;height:38px;border-radius:11px;flex:none;display:grid;place-items:center;
  background:color-mix(in srgb,var(--c) 14%,transparent);color:var(--c)}
.hdyn__ic svg{width:19px;height:19px}
.hdyn__lbl{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.hdyn__lbl b{font-size:14px;font-weight:700;color:var(--ink)}
.hdyn__lbl span{font-size:11px;color:var(--muted);font-weight:600}
.hdyn__num{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;line-height:1.1}
.hdyn__num b{font-size:23px;font-weight:700;color:var(--ink)}
.hdyn__num span{font-size:10.5px;color:var(--muted);font-weight:600}
.hdyn__top .trend{flex:none}
.hdyn__chart{margin-top:4px}
.hdyn__chart .lc{height:128px}
.hdyn__empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  height:128px;text-align:center;color:var(--muted);padding:0 16px}
.hdyn__empty svg{width:24px;height:24px;opacity:.7}
.hdyn__empty span{font-size:12px;max-width:240px;line-height:1.4}
.hdyn .chempty{padding:26px 12px}
.hdyn__card--board .lboard{display:flex;flex-direction:column;gap:2px;margin-top:2px;
  max-height:248px;overflow-y:auto;scrollbar-width:thin} /* сотрудников может быть много — карточка не растягивает ряд */
.hdyn__card--board .lrow{padding:7px 2px;gap:9px}
.hdyn__card--board .lrow__place{width:22px;font-size:16px}
.hdyn__card--board .lrow__ava{width:30px;height:30px;font-size:11px}
.hdyn__card--board .lrow__count{min-width:44px}
.hdyn__card--board .lrow__count b{font-size:16px}
.hdyn__card--board .lrow__track{height:4px}
/* строка робота под рейтингом людей: приглушённая, отделена пунктиром — автоматика вне соревнования */
.lrow--bot{opacity:.72;border-top:1px dashed var(--line);margin-top:4px;padding-top:10px}
.lrow--bot .lrow__place{color:var(--muted)}
.lrow--bot .lrow__place svg,.lrow__ava--bot svg{width:15px;height:15px}
.lrow__ava--bot{background:#94a3b8;color:#fff;display:inline-flex;align-items:center;justify-content:center;border-radius:50%}
/* чипы-легенда «кто вносит» под графиками динамики: аватар + имя + число, цвет = линия на графике */
.lc-ppl{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.lc-ppl__chip{display:inline-flex;align-items:center;gap:6px;padding:3px 9px 3px 4px;
  border:1px solid var(--line);border-radius:999px;background:var(--surface);
  font-size:11.5px;font-weight:600;color:var(--ink);box-shadow:inset 3px 0 0 var(--a)}
.lc-ppl__chip b{font-weight:700}
.lc-ppl__ava{width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;
  justify-content:center;color:#fff;font-size:8.5px;font-weight:700;flex:none}
.lc-ppl__ava--img{overflow:hidden}
.lc-ppl__ava--img img{width:100%;height:100%;object-fit:cover;display:block}
.hdyn__chart--heat{display:flex;flex-direction:column;justify-content:center;min-height:132px}
.hdyn__card--heat .hmap__grid{justify-content:center}
@media (max-width:1200px){ .hdyn__grid--4{grid-template-columns:1fr 1fr} }
@media (max-width:1100px){ .hdyn__grid--3{grid-template-columns:1fr 1fr} }
@media (max-width:760px){ .hdyn__grid,.hdyn__grid--3,.hdyn__grid--4{grid-template-columns:1fr} }
/* фото-аватар в рейтинге (#7) + бейдж серии (#4) */
.lrow__ava--img{overflow:hidden}
.lrow__ava--img img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
.lrow__streak{display:inline-flex;align-items:center;gap:2px;font-size:10.5px;font-weight:800;white-space:nowrap;
  color:#e0533d;background:color-mix(in srgb,#e0533d 13%,transparent);border-radius:999px;padding:1px 7px 1px 5px;margin-left:2px}
.lrow__streak svg{width:11px;height:11px}
/* заголовки дней в ленте контента (#5) */
.chday{display:flex;align-items:center;gap:8px;list-style:none;margin:11px 2px 5px;padding:0}
.chday:first-child{margin-top:2px}
.chday__l{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.chday__n{font-size:10px;font-weight:700;color:var(--ink-soft);background:var(--surface-2);border-radius:999px;padding:1px 8px}
/* календарь активности — heatmap (#1) */
.hmap{margin:0 2px 22px}
.hmap__grid{display:flex;gap:3px;overflow-x:auto;padding:4px 2px 2px}
.hmap__w{display:flex;flex-direction:column;gap:3px}
.hmap__c{width:13px;height:13px;border-radius:3px;background:var(--surface-2);flex:none}
.hmap__c--void{visibility:hidden}
.hmap__c--l0{background:var(--surface-2)}
.hmap__c--l1{background:color-mix(in srgb,var(--brand) 28%,var(--surface-2))}
.hmap__c--l2{background:color-mix(in srgb,var(--brand) 52%,var(--surface-2))}
.hmap__c--l3{background:color-mix(in srgb,var(--brand) 76%,var(--surface-2))}
.hmap__c--l4{background:var(--brand)}
.hmap__legend{display:flex;align-items:center;gap:4px;margin:9px 2px 0;font-size:11px;color:var(--muted)}
.hmap__legend .hmap__c{width:11px;height:11px}
/* ---- соревнование «кто двигает сайт» + оценка эффективности ---- */
.contest{margin:0 2px 22px}
.contest__cols{margin-top:4px}
/* рейтинг правок */
.lboard{display:flex;flex-direction:column;gap:4px;margin-top:4px}
.lrow{display:flex;align-items:center;gap:11px;padding:9px 6px;border-radius:var(--r-sm);transition:background .15s}
.lrow:hover{background:var(--surface-2)}
.lrow.is-empty{opacity:.55}
.lrow__place{width:26px;text-align:center;font-size:18px;flex:none}
.lrow__num{font-size:13px;font-weight:800;color:var(--muted)}
.lrow__ava{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--a,#94a3b8);color:#fff;font-size:12px;font-weight:800}
.lrow__main{flex:1;min-width:0}
.lrow__name{font-size:13.5px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:7px;margin-bottom:5px}
.lrow__role{font-size:10.5px;font-weight:600;color:var(--muted)}
.lrow__track{height:8px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.lrow__fill{display:block;height:100%;border-radius:999px;transition:width .5s ease}
.lrow__count{flex:none;text-align:right;min-width:54px;line-height:1.05}
.lrow__count b{font-size:20px;font-weight:800;color:var(--ink)}
.lrow__count span{display:block;font-size:10px;color:var(--muted);font-weight:600}
/* карточки эффективности */
.effgrid{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.effcard{border:1px solid var(--line);border-radius:var(--r-sm);padding:11px 12px;background:var(--surface)}
.effcard__top{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.effcard__ava{width:28px;height:28px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--a,#94a3b8);color:#fff;font-size:11px;font-weight:800}
.effcard__name{font-size:13.5px;font-weight:700;color:var(--ink)}
.effbar{display:grid;grid-template-columns:74px 1fr 30px;align-items:center;gap:9px;margin:5px 0}
.effbar__l{font-size:11px;color:var(--muted);font-weight:600}
.effbar__track{height:7px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.effbar__fill{display:block;height:100%;border-radius:999px;transition:width .5s ease}
.effbar__v{font-size:11px;font-weight:800;color:var(--ink-soft);text-align:right}
.effcard__verdict{display:flex;align-items:flex-start;gap:6px;margin:9px 0 0;font-size:12px;line-height:1.4;color:var(--ink-soft)}
.effcard__verdict svg{width:14px;height:14px;color:var(--brand);flex:none;margin-top:1px}
.eff__note{font-size:11.5px;color:var(--muted);line-height:1.45;margin:11px 2px 0}
@media (max-width:820px){ .contest__cols{grid-template-columns:1fr} }
.chcols{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.chcol{min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 14px 8px}
/* шапка колонки: цветная иконка-плитка + название + счётчик-пилюля + подпись */
.chcol__head{display:flex;align-items:center;gap:9px;padding:2px 2px 12px;margin:0 0 10px;border-bottom:1px solid var(--line)}
.chcol__ic{width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center}
.chcol__ic svg{width:16px;height:16px}
.chcol__ic--content{background:color-mix(in srgb,#6366f1 14%,var(--surface));color:#6366f1}
.chcol__ic--code{background:color-mix(in srgb,var(--brand) 14%,var(--surface));color:var(--brand)}
.chcol__t{font-size:15px;font-weight:700;color:var(--ink)}
.chcol__n{min-width:20px;height:20px;padding:0 6px;border-radius:999px;display:grid;place-items:center;
  background:var(--surface-2);color:var(--ink-soft);font-size:11px;font-weight:800}
.chcol__sub{margin-left:auto;font-size:11px;font-weight:500;color:var(--muted);white-space:nowrap}
.chl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;max-height:calc(100dvh - 250px);overflow-y:auto;scrollbar-width:none}
.chl::-webkit-scrollbar{display:none}
.chl__note{font-size:11px;color:var(--muted);text-align:center;padding:10px 4px 4px}
/* фильтры истории: период (вплоть до часов) + сотрудник */
.histfilters{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;margin:0 2px 16px}
.histf__periods{display:inline-flex;gap:6px;flex-wrap:wrap}
.histf__chip{border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);border-radius:999px;
  padding:7px 14px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;transition:.15s}
.histf__chip:hover{border-color:var(--brand);color:var(--brand)}
.histf__chip.is-active{background:var(--brand);color:var(--brand-ink);border-color:var(--brand)}
.histf__range{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.histf__lbl{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--muted);font-weight:600}
.histf__dt{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:var(--r-sm);padding:7px 10px;font:inherit;font-size:12.5px}
.histf__dt:focus{outline:none;border-color:var(--brand)}
.histf__udd{margin-left:auto}   /* фирменный .dd внутри — стилизуется сам */
/* откат «до момента» (#9): кнопка + модалка */
.histf__rollback{display:inline-flex;align-items:center;gap:6px;border:1px solid color-mix(in srgb,var(--down) 30%,var(--line));
  background:var(--surface);color:var(--down);border-radius:999px;padding:7px 13px;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;transition:.15s}
.histf__rollback svg{width:14px;height:14px}
.histf__rollback:hover{background:color-mix(in srgb,var(--down) 10%,transparent);border-color:var(--down)}
.rb__intro{font-size:13px;line-height:1.5;color:var(--ink-soft);margin:0 0 13px}
.rb__lbl{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:12px}
.rb__reason{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:var(--r-sm);padding:8px 10px;font:inherit;font-size:13px;resize:vertical}
.rb__reason:focus,.rb .histf__dt:focus{outline:none;border-color:var(--brand)}
.rb__count{font-size:13px;color:var(--ink);background:var(--surface-2);border-radius:var(--r-sm);padding:9px 12px;margin-bottom:4px}
/* поиск по истории (#1) */
.histf__search{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);
  border-radius:999px;padding:0 10px;height:34px;min-width:230px;flex:1 1 230px;max-width:340px}
.histf__search svg{width:15px;height:15px;color:var(--muted);flex:none}
.histf__q{border:0;background:none;outline:none;font:inherit;font-size:13px;color:var(--ink);width:100%}
.histf__qx{border:0;background:none;cursor:pointer;color:var(--muted);display:inline-flex;padding:2px}
.histf__qx svg{width:13px;height:13px}
.histf__qx:hover{color:var(--ink)}
/* поиск + фильтры по команде (страница «Пользователи») */
.uctrls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px}
.uctrls__search{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:0 12px;height:36px;min-width:220px;flex:1 1 260px;max-width:380px}
.uctrls__sic{width:16px;height:16px;color:var(--muted);flex:none}
.uctrls__in{border:0;background:none;outline:none;font:inherit;font-size:13.5px;color:var(--ink);width:100%}
.uctrls__clr{border:0;background:none;cursor:pointer;color:var(--muted);font-size:14px;line-height:1;padding:2px 4px;border-radius:6px;flex:none}
.uctrls__clr:hover{color:var(--ink)}
.uctrls__chips{display:inline-flex;gap:7px;flex-wrap:wrap}
.uchip{cursor:pointer;border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);font-weight:600;font-size:12.5px;padding:7px 13px;border-radius:999px;transition:all .15s}
.uchip:hover{border-color:var(--brand);color:var(--brand)}
.uchip.is-active{background:var(--brand);border-color:var(--brand);color:#fff}
.uctrls__count{font-size:12px;color:var(--muted);margin-left:auto;white-space:nowrap}
.uctrls__empty{padding:18px 6px;text-align:center;color:var(--muted);font-size:13px}
/* активная метка-фильтр (#2) */
.histf__tag{display:inline-flex;align-items:center;gap:6px;border:1px solid color-mix(in srgb,var(--brand) 35%,var(--line));
  background:color-mix(in srgb,var(--brand) 10%,transparent);color:var(--ink);border-radius:999px;
  padding:5px 10px;font:inherit;font-size:12px;font-weight:600;cursor:pointer}
.histf__tag b{color:var(--brand);font-weight:800}
.histf__tag svg{width:12px;height:12px;color:var(--muted)}
.histf__tag:hover svg{color:var(--down)}
/* кликабельные чипы темы/доски (#2) */
.chrow__board[data-tag]{cursor:pointer}
.chrow__board[data-tag]:hover{filter:brightness(.96);text-decoration:underline}
/* дельта период-к-периоду на плитках (#3) */
.hkpi__d{font-size:11px;font-weight:800;margin-left:8px;vertical-align:middle;white-space:nowrap}
.hkpi__d.is-up{color:var(--up)}
.hkpi__d.is-down{color:var(--down)}
/* подсветка опасных действий — удаления/массовый откат (#4) */
.chrow--danger{background:color-mix(in srgb,var(--down) 5%,transparent);box-shadow:inset 3px 0 0 var(--down)}
.chrow--danger .chrow__ava{box-shadow:0 0 0 2px color-mix(in srgb,var(--down) 35%,transparent)}
.chrow__codetag{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;padding:2px 8px;border-radius:999px;
  background:color-mix(in srgb,var(--brand) 13%,transparent);color:var(--brand)}
.chrow__codetag svg{width:11px;height:11px}
@media (max-width:760px){ .histf__udd{margin-left:0} }
/* строка события — белая карточка с аватаром, действием, чипом доски и временем */
.chrow{display:flex;align-items:flex-start;gap:11px;border:1px solid transparent;border-radius:var(--r-sm);
  padding:9px 10px;transition:background .15s,border-color .15s}
.chrow[data-cev],.chrow[data-commit]{cursor:pointer}
.chrow[data-cev]:hover,.chrow[data-commit]:hover{background:var(--surface-2);border-color:var(--line)}
.chrow.is-undone{opacity:.5}
.chrow.is-undone .chrow__line{text-decoration:line-through;text-decoration-color:var(--muted)}
.chrow__ava{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--a,#94a3b8);color:#fff;font-size:12px;font-weight:800;letter-spacing:.3px}
.chrow__ava--sys{background:var(--surface-2);color:var(--muted)}
.chrow__ava--sys svg{width:17px;height:17px}
.chrow__ava--code{background:color-mix(in srgb,var(--brand) 13%,var(--surface));color:var(--brand);border-radius:10px}
.chrow__ava--code svg{width:17px;height:17px}
.chrow__body{min-width:0;flex:1}
.chrow__line{margin:0;font-size:13px;line-height:1.4;color:var(--ink-soft);word-break:break-word}
.chrow__line b{color:var(--ink);font-weight:700}
.chrow__tgt{color:var(--ink);font-weight:600}
.chrow__meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:5px}
.chrow__board{font-size:10px;font-weight:700;padding:2px 9px;border-radius:999px;white-space:nowrap;
  background:color-mix(in srgb,var(--c,var(--brand)) 14%,transparent);color:var(--c,var(--brand))}
.chrow__move{font-size:11px;color:var(--muted);font-weight:600}
.chrow__move i{color:var(--brand);font-style:normal;font-weight:800}
.chrow__author{font-size:11px;font-weight:600;color:var(--ink-soft)}
.chrow__time{font-size:11px;color:var(--muted);white-space:nowrap}
.chrow__hash{font-size:10.5px;color:var(--muted);font-family:ui-monospace,Menlo,Consolas,monospace}
.chrow__undone{font-size:9.5px;font-weight:800;color:var(--down);text-transform:uppercase;letter-spacing:.3px}
.chrow__undo{flex:none;align-self:center;display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
  border:1px solid color-mix(in srgb,var(--down) 28%,var(--line));background:var(--surface);
  color:var(--down);border-radius:999px;padding:5px 12px 5px 9px;font:inherit;font-size:11px;font-weight:700;cursor:pointer;transition:.15s;opacity:.6}
.chrow:hover .chrow__undo{opacity:1}
.chrow__undo svg{width:13px;height:13px}
.chrow__undo:hover{background:color-mix(in srgb,var(--down) 10%,transparent);border-color:var(--down)}
/* пустое/закрытое состояние — по центру, иконка в плитке + текст */
.chempty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:9px;padding:34px 16px;color:var(--muted)}
.chempty__ic{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;background:var(--surface-2);color:var(--ink-soft)}
.chempty__ic svg{width:24px;height:24px}
.chempty__t{margin:0;font-size:14px;font-weight:600;color:var(--ink-soft)}
.chempty__s{font-size:12px;color:var(--muted);max-width:280px;line-height:1.45}
/* пояснение изменения сайта простыми словами (деталь коммита) */
.cdet__plain{display:flex;gap:10px;align-items:flex-start;margin:10px 0 4px;padding:10px 12px;
  background:color-mix(in srgb,var(--brand) 7%,var(--surface));
  border:1px solid color-mix(in srgb,var(--brand) 22%,transparent);border-radius:var(--r-sm)}
.cdet__plain>svg{width:16px;height:16px;color:var(--brand);flex:none;margin-top:2px}
.cdet__plainlbl{font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--brand);margin-bottom:3px}
.cdet__plain p{margin:0;font-size:13.5px;line-height:1.45;color:var(--ink)}
.hist__commsubj{margin:8px 0 4px;font-size:14px;font-weight:600;color:var(--ink)}
.hist__commbody{margin:0 0 6px;font-size:12.5px;color:var(--ink-soft);line-height:1.5}
@media (max-width:820px){ .chcols{grid-template-columns:1fr} .chl{max-height:none} }

/* ---- страница «Пользователи и доступы» (как главная: белые карточки на сером) ---- */
.ulist{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.urow{display:flex;align-items:center;gap:13px;padding:11px 13px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--surface);transition:border-color .15s,background .15s}
.urow:hover{border-color:color-mix(in srgb,var(--brand) 30%,var(--line));background:var(--surface-2)}
.urow__ava{width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--a,#94a3b8);color:#fff;font-size:13px;font-weight:800;letter-spacing:.3px}
.urow__id{min-width:0;flex:1}
.urow__name{font-size:14px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:7px}
.urow__me{font-size:10px;font-weight:800;color:var(--brand);text-transform:uppercase;letter-spacing:.4px}
.urow__login{font-size:12px;color:var(--muted);margin-top:1px}
.urow__role{flex:none;min-width:210px;display:flex;align-items:center;gap:6px}
/* Совмещение должностей: бейдж «+N» рядом с основной ролью (тултип — какие ещё) */
.urow__multi{flex:none;font-size:11px;font-weight:800;color:var(--brand);
  border:1px solid color-mix(in srgb,var(--brand) 45%,var(--line));border-radius:999px;
  padding:1px 7px;background:color-mix(in srgb,var(--brand) 10%,transparent);cursor:default}
.urow__rights{flex:none;width:190px;text-align:right;font-size:12.5px}
/* ---- Наборы прав (этап 2 ACCESS-RFC): раздел на странице «Пользователи» ---- */
.pset__hint{font-size:13px;color:var(--muted);margin:0 0 12px;max-width:760px}
.psrow{border:1px solid var(--line);border-radius:14px;background:var(--surface);margin-bottom:10px}
.psrow__main{display:flex;align-items:center;gap:12px;padding:12px 14px}
.psrow__ic{width:34px;height:34px;border-radius:10px;flex:none;display:grid;place-items:center;
  color:var(--brand);background:color-mix(in srgb,var(--brand) 12%,transparent)}
.psrow__id{min-width:0;flex:1}
.psrow__name{font-size:14px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.psrow__w{font-size:10.5px;font-weight:800;color:var(--up);text-transform:uppercase;letter-spacing:.3px;
  border:1px solid color-mix(in srgb,var(--up) 40%,var(--line));border-radius:999px;padding:1px 7px}
.psrow__meta{font-size:12.5px;color:var(--muted);margin-top:2px}
.psedit__name{display:flex;align-items:center;gap:10px;margin:0 0 12px;flex-wrap:wrap}
.psedit__name .uinput{flex:1;min-width:240px}
/* ---- Замещения (этап 3 ACCESS-RFC): список грантов + форма выдачи ---- */
.urow__multi--grant{color:#b45309;border-color:color-mix(in srgb,#f59e0b 55%,var(--line));
  background:color-mix(in srgb,#f59e0b 12%,transparent)}
.ugr__list{display:flex;flex-direction:column;gap:6px;margin:0 0 10px}
.ugr{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 12px;
  border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.ugr__st{flex:none;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.3px;
  border-radius:999px;padding:2px 8px;color:var(--muted);border:1px solid var(--line)}
.ugr__st--on{color:var(--up);border-color:color-mix(in srgb,var(--up) 45%,var(--line));
  background:color-mix(in srgb,var(--up) 10%,transparent)}
.ugr__st--wait{color:#b45309;border-color:color-mix(in srgb,#f59e0b 45%,var(--line));
  background:color-mix(in srgb,#f59e0b 10%,transparent)}
.ugr__what{font-size:13px;font-weight:700;color:var(--ink)}
.ugr__dates{font-size:12.5px;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.ugr__why{font-size:12.5px;color:var(--muted);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:280px}
.ugr__x{margin-left:auto}
.ugradd{border:1px dashed color-mix(in srgb,var(--brand) 40%,var(--line));border-radius:12px;padding:12px;margin-top:4px}
.ugradd__row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0 0}
.ugradd__f{display:inline-flex;align-items:center;font-size:13px;color:var(--ink-soft)}
.ugradd__why{flex:1;min-width:220px}
.uright{display:inline-flex;align-items:center;gap:6px}
.uright--full{color:var(--up);font-weight:700}
.uright--full::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--up)}
.uright--lim{color:var(--ink-soft)}
.uright--none{color:var(--down);font-weight:600}
@media (max-width:680px){
  .urow{flex-wrap:wrap}
  .urow__role,.urow__rights{min-width:0;width:100%;text-align:left}
  .urow__role .dd,.urow__role .dd__btn{width:100%}
}

/* ---- Modal ---- */
.modal[hidden]{display:none}
.modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:18px}
.modal__backdrop{position:absolute;inset:0;background:rgba(10,14,18,.45)}
.modal__card{position:relative;width:100%;max-width:440px;background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:0 24px 64px rgba(0,0,0,.25);overflow:hidden}
.modal__head{display:flex;align-items:center;justify-content:space-between;padding:15px 16px;border-bottom:1px solid var(--line)}
.modal__head h3{margin:0;font-size:16px;font-weight:600}
.modal__close{border:none;background:var(--surface-2);width:30px;height:30px;border-radius:9px;font-size:14px;color:var(--muted)}
.modal__body{padding:16px;font-size:14px;line-height:1.55}
.modal__body .muted{color:var(--muted);font-size:13px}
.modal__card{max-height:88vh;display:flex;flex-direction:column}
.modal__body{overflow:auto}

/* ---- ОКОННЫЙ РЕЖИМ («окно в окне», 2026-08-24, грилинг с Ильёй) ------------------
   Карточка лида — обычное содержимое ОБЩЕЙ модалки (окно в приложении одно, из него
   же открываются все прочие диалоги), поэтому свободная геометрия живёт на окне, а
   не на карточке: классы ставит app.js (k5win*), геометрия — в CSS-переменных.
     .is-win  — окно умеет двигаться (в нём карточка лида): шапка-ручка, уголок, кнопки.
     .is-free — уже открепили: затемнения нет, слой пропускает клики на доску и панель
                «Техника», закрытие только крестиком и Escape (случайный клик мимо
                больше не роняет несохранённый ввод).
   Пока класса нет — окно ведёт себя ровно как раньше, по центру и со стеклом. */
.modal.is-win .modal__head{cursor:move;user-select:none}
.modal.is-win .modal__head button{cursor:pointer}
.modal.is-free{display:block;padding:0;pointer-events:none}
.modal.is-free .modal__backdrop{display:none}
/* !important здесь ОБЯЗАТЕЛЕН, а не лень: размеры окна под конкретное содержимое
   заданы селекторами вида `.modal__card:has(#lcwrap){width:min(980px,96vw)}` (их в
   проекте десяток — карточка лида, приёмка, отладка, кабинет поставщика), а id внутри
   :has() поднимает их специфичность выше любого разумного селектора режима. Без
   important окно тянулось по высоте и не тянулось по ширине — ровно это и показал
   первый прогон харнесса. */
.modal.is-free .modal__card{position:fixed;left:var(--winx);top:var(--winy);
  width:var(--winw)!important;height:var(--winh)!important;
  max-width:none!important;max-height:none!important;pointer-events:auto}
.win-tools{display:flex;align-items:center;gap:6px;margin-left:auto;padding-left:10px}
.win-btn{border:1px solid var(--line);background:var(--surface);color:var(--muted);border-radius:8px;
  font:inherit;font-size:11.5px;padding:3px 9px;cursor:pointer;white-space:nowrap}
.win-btn:hover{border-color:var(--brand);color:var(--brand)}
/* Уголок изменения размера: рисуем штриховкой, отдельной картинки не заводим. */
.win-grip{position:absolute;right:0;bottom:0;width:20px;height:20px;cursor:nwse-resize;z-index:3;
  background:linear-gradient(135deg,transparent 46%,color-mix(in srgb,var(--muted) 42%,transparent) 46%,
  color-mix(in srgb,var(--muted) 42%,transparent) 56%,transparent 56%,transparent 68%,
  color-mix(in srgb,var(--muted) 42%,transparent) 68%,color-mix(in srgb,var(--muted) 42%,transparent) 78%,transparent 78%)}
/* Во время перетаскивания гасим выделение и подсветку под курсором во всём документе. */
body.k5win-drag{user-select:none;cursor:move}
body.k5win-size{user-select:none;cursor:nwse-resize}

/* ============================================================
   ШАБЛОН КАНБАН-ДОСКИ (универсальный, под все доски)
   ============================================================ */
.board{--accent:var(--brand);position:relative}
.board .crumbs{margin-bottom:10px}
/* шапка доски = блок .hello главной + иконка-плитка слева + инструменты справа */
.board__hello{flex-wrap:wrap;gap:14px}
.board__id{display:flex;align-items:center;gap:12px;min-width:0;flex-wrap:wrap}
/* иконка доски = ИДЕНТИЧНОСТЬ → цвет отдела (--c из renderBoard), как плитка на главной */
.board__icon{width:46px;height:46px;border-radius:13px;flex:none;display:grid;place-items:center;
  background:color-mix(in srgb, var(--c, var(--accent)) 13%, transparent);color:var(--c, var(--accent))}
.board__icon svg{width:24px;height:24px}
/* чип «N карточек» — сразу справа от названия; СЕРЫЙ (нейтральная информация,
   не действие — правка владельца со скриншота 12.06) */
.board__count-chip{display:inline-flex;align-items:center;gap:6px;align-self:center;white-space:nowrap;
  background:var(--surface-2);color:var(--muted);
  border-radius:999px;padding:6px 13px 6px 11px;font-size:13px;font-weight:600;letter-spacing:.1px}
.board__count-chip svg{width:15px;height:15px}
.board__count-chip b{font-weight:800;font-size:14.5px;color:var(--ink-soft)}
.board__tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* поиск в тулбаре доски — тот же компонент .msearch, но под высоту «Нового заказа» */
.board__tools .msearch{height:38px;border-radius:var(--r-sm)}
.board__new{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 15px 0 12px;border:none;border-radius:var(--r-sm);
  background:var(--brand);color:var(--brand-ink);font-weight:700;font-size:13px;cursor:pointer;white-space:nowrap;transition:filter .15s}
.board__new svg{width:16px;height:16px}
.board__new:hover{filter:brightness(1.06)}

/* view-transition-name — чтобы браузер морфил ИМЕННО трек колонок при «развернуть
   канбан» (см. блок «РАЗВЕРНУТЬ КАНБАН» ниже). Вне этого перехода ни на что не влияет. */
.board__scrollwrap{position:relative;view-transition-name:boardplate}
/* зелёные кнопки прокрутки доски — ПО ЦЕНТРУ ЭКРАНА по вертикали (fixed), у краёв */
.board__arrow{display:none;position:fixed;top:50%;transform:translateY(-50%);z-index:30;width:44px;height:44px;border-radius:50%;
  border:1px solid var(--line);background:var(--surface);color:var(--up);
  align-items:center;justify-content:center;cursor:pointer;box-shadow:0 6px 20px rgba(16,24,40,.16);transition:background .15s,color .15s,border-color .15s,box-shadow .15s}
.board__arrow svg{width:20px;height:20px}
.board__arrow--l{left:14px}
.board__arrow--l svg{transform:rotate(90deg)}
.board__arrow--r{right:14px}
.board__arrow--r svg{transform:rotate(-90deg)}
.board__arrow:active{transform:translateY(-50%) scale(.94)}
.board__arrow:hover{background:var(--up);color:#fff;border-color:var(--up);box-shadow:0 8px 22px color-mix(in srgb, var(--up) 35%, transparent)}
.board__scroll.is-fade-l ~ .board__arrow--l{display:flex}
.board__scroll.is-fade-r ~ .board__arrow--r{display:flex}
.board__scroll{position:relative;overflow-x:auto;overflow-y:visible;padding-bottom:12px;margin:8px -2px 0;
  min-height:max(460px, calc(100dvh - 296px))}
.board__cols{display:flex;gap:14px;align-items:stretch;padding:0 2px;width:max-content;
  min-height:max(460px, calc(100dvh - 296px))}

/* ============================================================
   «РАЗВЕРНУТЬ КАНБАН» (ТЗ 2026-07-28 /grilling)
   ============================================================
   В position:fixed уезжает ТОЛЬКО трек колонок (.board__scrollwrap.is-fs) — плита почти
   во весь экран. Шапка доски остаётся в потоке, поэтому в щели по периметру размыто
   просвечивает настоящая страница (топбар, крошки, заголовок, тулбар, полоса пульса),
   а не пустой фон. z-45 — НИЖЕ модалки (#modal, z-50): карточка открывается поверх
   плиты без единой правки в openCardDetail. Кнопка входа — .board__fs в тулбаре доски. */
.board__fs{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;flex:none;
  border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);border-radius:var(--r-sm);cursor:pointer;transition:.15s}
.board__fs svg{width:17px;height:17px}
.board__fs:hover{border-color:var(--brand);color:var(--brand)}
/* Подложка: размывает то, что реально осталось в потоке. Она же — зона клика «свернуть».
   Если залагает на слабых машинах — снять backdrop-filter, оставив затемнение. */
.boardfs-ov{position:fixed;inset:0;z-index:44;cursor:zoom-out;
  background:color-mix(in srgb, var(--bg) 34%, transparent);
  -webkit-backdrop-filter:blur(7px) saturate(.92);backdrop-filter:blur(7px) saturate(.92)}
.board__scrollwrap.is-fs{position:fixed;inset:var(--bfs-gap,20px);z-index:45;
  display:flex;flex-direction:column;padding:10px 16px 6px;
  background:var(--bg);border:1px solid var(--line);border-radius:18px;
  box-shadow:0 26px 74px rgba(16,24,40,.30)}
/* Захардкоженные под высоту хрома calc(100dvh - 296px/266px) внутри плиты неверны —
   трек и колонки тянем по её собственной высоте. Ширину колонки НЕ меняем: смысл
   «развернуть» — больше карточек в кадре, а не толще столбцы (решение в.11). */
.board__scrollwrap.is-fs .board__scroll{flex:1;min-height:0;margin-top:0;padding-bottom:6px}
.board__scrollwrap.is-fs .board__cols{min-height:100%;height:100%}
.board__scrollwrap.is-fs .col{max-height:100%}
/* Снаружи стрелки прокрутки — fixed по центру ЭКРАНА и z-30, то есть под плитой.
   Внутри прижимаем их к её краям и поднимаем над треком. */
.board__scrollwrap.is-fs .board__arrow{position:absolute;z-index:3}
.board__scrollwrap.is-fs .board__arrow--l{left:6px}
.board__scrollwrap.is-fs .board__arrow--r{right:6px}
/* Шапка плиты: поиск + сохранённые виды + «Фильтры» + «свернуть». Больше ничего —
   пилюли периода уехали ВНУТРЬ панели фильтров (решение в.7), а активный период
   печатается на самой кнопке «Фильтры», чтобы скрытый отбор не читался как
   «карточки пропали». .bflt__panel якорится к этой полосе (она position:relative). */
.bfsbar{position:relative;display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  padding:2px 0 9px;margin:0 0 4px;border-bottom:1px solid var(--line)}
.bfsbar .msearch{height:36px;border-radius:var(--r-sm);flex:1 1 200px;max-width:340px}
.bfsbar__x{display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:34px;height:34px;border:1px solid var(--line);border-radius:50%;background:var(--surface);
  color:var(--muted);cursor:pointer;transition:.14s}
.bfsbar__x svg{width:17px;height:17px}
.bfsbar__x:hover{border-color:var(--down);color:var(--down);background:color-mix(in srgb, var(--down) 8%, var(--surface))}
/* Морфинг «канбан развернулся»: браузер снимает плиту до и после и сам разгоняет её из
   места на странице во весь экран. Снимки кросс-фейдятся, поэтому текст не плющится —
   в отличие от FLIP через scale. Где View Transitions нет — фолбэк .is-fsin ниже. */
::view-transition-group(boardplate){animation-duration:.32s}
::view-transition-old(boardplate),::view-transition-new(boardplate){
  animation-duration:.32s;animation-timing-function:cubic-bezier(.22,.61,.36,1)}
/* Фолбэк-«всплытие» — ОДНОРАЗОВОЕ: класс снимается по animationend (boardFsAfterRender).
   Стоячая animation здесь недопустима: доска сама перерисовывается при любом изменении
   карточек (finishLoad), и плита подпрыгивала бы каждый раз, когда РОП перетащил лида. */
@keyframes bfsIn{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}
.board__scrollwrap.is-fs.is-fsin{animation:bfsIn .18s ease}
@media (prefers-reduced-motion:reduce){
  .board__scrollwrap.is-fs.is-fsin{animation:none}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none !important}
}
/* Фича десктопная (решение в.12): на телефоне щель 20px — выброшенные пиксели, за ней
   ничего не прочесть, Escape нет, а сама щель как тач-таргет выхода ненадёжна. */
@media (max-width:560px){ .board__fs{display:none} }
/* колонка = ПРОЗРАЧНАЯ дорожка (правка владельца 12.06: убраны белые «плиты»
   во всю высоту и щели между ними — на сером фоне живут только белые карточки,
   как в Trello/Linear; пустота под карточками невидима, но остаётся зоной
   для перетаскивания — колонки по-прежнему растянуты на высоту ряда) */
.col{flex:none;width:244px;background:none;border:none;
  display:flex;flex-direction:column;--tone:var(--accent);
  max-height:calc(100dvh - 266px)}
.col--good{--tone:var(--up)}
.col--warn{--tone:#e08600}
.col--bad{--tone:var(--down)}
.col--over .col__body{outline:2px dashed color-mix(in srgb, var(--tone) 45%, transparent);
  outline-offset:-3px;border-radius:var(--r);background:color-mix(in srgb, var(--tone) 4%, transparent)}
/* шапка этапа = ЯРЛЫК-ТАБ в ТОН столбца (оттенок цветовой семьи доски): акцент СНИЗУ
   (у карточек слева → сразу различаются), название ЗАГЛАВНЫМИ-лейблом в тон, счётчик —
   сплошной кружок в тон, единая высота. Восстановлено после параллельного затирания. */
.col__head{display:flex;flex-direction:column;gap:5px;padding:6px 9px 7px;
  border-radius:9px 9px 5px 5px;
  /* Непрозрачная плашка поверх фона страницы + тон-тинт сверху: раньше тинт мешался
     прямо в surface и на светлом фоне шапка растворялась. Рамка по периметру в тон —
     чтобы шапка не «обрывалась» сверху и с боков; нижняя граница-акцент остаётся. */
  background:linear-gradient(color-mix(in srgb, var(--tone) 10%, transparent), color-mix(in srgb, var(--tone) 10%, transparent)) var(--surface);
  border:1px solid color-mix(in srgb, var(--tone) 28%, var(--line));
  border-bottom:2px solid color-mix(in srgb, var(--tone) 55%, transparent);
  box-shadow:0 1px 2px color-mix(in srgb, var(--ink) 5%, transparent)}
.col__hrow{display:flex;align-items:center;gap:6px;min-height:22px}
.col__hbar{display:flex;align-items:center;gap:8px}
.col__dot{width:7px;height:7px;border-radius:50%;background:var(--tone);flex:none}
.col__name{flex:1;min-width:0;font-size:10.5px;font-weight:700;line-height:1.2;letter-spacing:.2px;text-transform:uppercase;
  color:color-mix(in srgb, var(--tone) 55%, var(--ink));
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.col__i{border:none;background:none;padding:0;color:color-mix(in srgb, var(--tone) 52%, var(--muted));cursor:pointer;flex:none;display:grid;place-items:center}
.col__i svg{width:13px;height:13px;display:block}
.col__i:hover{color:var(--tone)}
.col__n{margin-left:auto;flex:none;min-width:20px;height:19px;padding:0 6px;border-radius:999px;
  background:var(--surface);color:color-mix(in srgb, var(--tone) 78%, var(--ink));
  font-size:11px;font-weight:700;display:grid;place-items:center;
  border:1px solid color-mix(in srgb, var(--tone) 30%, transparent)}
/* сумма этапа + «Добавить» — В ОДНУ СТРОКУ; без подложки (дорожка прозрачная) */
.col__bar{display:flex;align-items:center;gap:8px;padding:8px 3px 0}
.col__sum{font-size:11.5px;font-weight:700;color:var(--ink-soft);white-space:nowrap;
  background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:3px 11px}
.col__quick{margin-left:auto;display:inline-flex;align-items:center;gap:5px;border:none;background:none;
  color:var(--muted);font:inherit;font-size:12px;font-weight:600;padding:5px 9px;border-radius:999px;cursor:pointer;flex:none;white-space:nowrap;transition:.15s}
.col__quick svg{width:15px;height:15px}
.col__quick:hover{color:var(--brand);background:color-mix(in srgb, var(--brand) 9%, transparent)}
.col__body{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:9px;padding:9px 3px 10px;min-height:54px;scrollbar-width:none}
.col__body::-webkit-scrollbar{display:none}
/* вертикальное замыливание верх/низ (как боковое .edgefade, только по вертикали):
   маска появляется только там, где есть скрытые сверху/снизу карточки */
.col__body.is-fade-t:not(.is-fade-b){-webkit-mask-image:linear-gradient(to bottom,transparent,#000 16px);mask-image:linear-gradient(to bottom,transparent,#000 16px)}
.col__body.is-fade-b:not(.is-fade-t){-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 16px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 16px),transparent)}
.col__body.is-fade-t.is-fade-b{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 16px,#000 calc(100% - 16px),transparent);mask-image:linear-gradient(to bottom,transparent,#000 16px,#000 calc(100% - 16px),transparent)}

/* заглушка пустой доски — в стиле пустых состояний сайта */
.board__empty{position:absolute;left:0;right:0;top:52%;transform:translateY(-50%);
  display:flex;flex-direction:column;align-items:center;gap:11px;pointer-events:none;text-align:center;padding:0 16px}
.board__empty-ic{width:64px;height:64px;border-radius:18px;display:grid;place-items:center;
  background:var(--surface);border:1px solid var(--line);color:var(--muted)}
.board__empty-ic svg{width:30px;height:30px}
.board__empty-t{margin:0;font-size:17px;font-weight:300;color:var(--ink-soft)}
.board__empty-s{font-size:12.5px;color:var(--muted)}

/* Силуэты карточек (SALES_TRACKLIST T13) — пока доска грузится/офлайн, честная заглушка
   вместо демо-данных: контур карточки (полоски вместо текста), без выдуманных клиентов. */
.bcard-skel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:11px 12px;border-left:3px solid var(--line);display:flex;flex-direction:column;gap:8px;
  position:relative;overflow:hidden}
.bcard-skel span{display:block;height:8px;border-radius:4px;background:var(--surface-2)}
.bcard-skel span:nth-child(1){width:70%;height:10px}
.bcard-skel span:nth-child(2){width:45%}
.bcard-skel span:nth-child(3){width:55%;margin-top:6px}
.bcard-skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--surface) 70%, transparent) 50%, transparent);
  animation:skelshine 1.5s ease-in-out infinite}
.bcard-skel--static::after{display:none}
@keyframes skelshine{to{transform:translateX(100%)}}

/* Баннер «нет связи» — прибит над доской, не пропадает сам, пока связь не восстановится. */
.board__offlinebar{display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:var(--r-sm);
  background:color-mix(in srgb, var(--down) 12%, var(--surface));border:1px solid color-mix(in srgb, var(--down) 30%, var(--line));
  color:var(--down);font-size:12.5px;font-weight:600;margin:0 0 10px}
.board__offlinebar svg{width:16px;height:16px;flex:none}

/* Дропзона «клиент → новый лид» на доске retailbase (SALES_TRACKLIST P1-8) — ещё один
   элемент строки колонок (.board__cols), а не оверлей поверх страницы: sticky к правому
   краю СКРОЛЛЯЩЕЙСЯ зоны доски (.board__scroll), поэтому видна без докрутки до конца
   ленты колонок, но остаётся внутри области колонок — не перекрывает ни фильтры сверху
   («Только мои»/«Фильтры»), ни плавающую кнопку «Заметки» внизу экрана (та вне доски). */
.retail-dropzone{position:sticky;right:2px;top:12px;flex:none;align-self:flex-start;
  width:150px;height:220px;
  /* фикс. высота (не stretch на всю колонку) — верхняя граница доски у retailbase
     «плавающая» (зависит от «Пульса доски»/фильтров), рассчитать безопасный dvh-отступ
     сверху нельзя, а фикс. высота с sticky:top гарантированно не долезет ни до фильтров
     сверху, ни до плавающей кнопки «Заметки» (.qnote, fixed) снизу. */
  padding:16px 12px;border-radius:var(--r);border:2px dashed var(--line);
  background:repeating-linear-gradient(135deg, var(--surface-2) 0 8px, var(--surface) 8px 16px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;
  color:var(--muted);font-size:12px;font-weight:600;line-height:1.35;
  transition:border-color .15s,color .15s,background .15s}
.retail-dropzone svg{width:26px;height:26px;flex:none}
.retail-dropzone.is-over{border-color:var(--brand);border-style:solid;color:var(--brand);
  background:color-mix(in srgb, var(--brand) 10%, var(--surface))}
@media (max-width: 900px){ .retail-dropzone{display:none} }

/* Дропзона «Доп. действия с лидом» на доске sales (SALES_TRACKLIST, встреча 2026-07-15
   п.11) — В ОТЛИЧИЕ от .retail-dropzone (которая висит в строке колонок постоянно),
   эта появляется только на время перетаскивания карточки (класс .is-active навешивается
   в bindBoard() на dragstart/dragend) — небольшой квадрат внизу экрана по центру, не
   занимает место на доске, пока лид никуда не тащат. Дроп карточки НЕ переносит и не
   дублирует её, а открывает меню действий (сейчас — заявка на скидку). Правее (right:22px)
   остаётся плавающая кнопка «Заметки» (.qnote, тоже fixed, bottom:22px) — не пересекаются. */
.lead-actions-dropzone{display:none;position:fixed;left:50%;bottom:24px;transform:translateX(-50%);
  z-index:45;width:110px;height:110px;
  padding:10px;border-radius:var(--r);border:2px dashed var(--line);
  background:repeating-linear-gradient(135deg, var(--surface-2) 0 8px, var(--surface) 8px 16px);
  flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;
  color:var(--muted);font-size:11px;font-weight:600;line-height:1.3;
  box-shadow:0 8px 24px color-mix(in srgb, #000 20%, transparent);
  transition:border-color .15s,color .15s,background .15s}
.lead-actions-dropzone.is-active{display:flex}
.lead-actions-dropzone svg{width:22px;height:22px;flex:none}
.lead-actions-dropzone.is-over{border-color:var(--brand);border-style:solid;color:var(--brand);
  background:color-mix(in srgb, var(--brand) 10%, var(--surface))}
@media (max-width: 900px){ .lead-actions-dropzone{display:none !important} }

/* карточка заявки — белая карточка с акцент-бордером слева (как .metric главной) */
.bcard{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:11px 12px;
  cursor:grab;transition:border-color .15s,box-shadow .15s;border-left:3px solid var(--tone,var(--accent))}
.bcard:hover{border-color:var(--tone,var(--accent))}
.bcard.is-drag{opacity:.45}
/* Просрочка — состояние карточки (не колонка): подсветка фона по ТЗ РОПа (#ffd6d6) */
.bcard--overdue{background:#ffd6d6}
[data-theme="dark"] .bcard--overdue{background:color-mix(in srgb, var(--down) 20%, var(--surface))}
.bcard__t{margin:0;font-size:13px;font-weight:700;line-height:1.35;color:var(--ink)}
/* шапка плитки: название слева, владелец(ы) в правом верхнем углу (стопка внахлёст) */
.bcard__top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.bcard__top .bcard__t{flex:1;min-width:0}
.bcard__owners{display:inline-flex;flex-shrink:0;align-items:center}
.bcard__owners .cava{box-shadow:0 0 0 2px var(--surface)}
.bcard__owners .cava+.cava{margin-left:-8px}
/* Лента сверху (вариант №3): этап + теплота; цвет = теплота лида */
.bcard__strip{display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-size:10px;font-weight:700;padding:3px 9px;border-radius:99px;margin:0 0 8px}
.bcard__strip span:last-child{text-transform:lowercase;opacity:.95}
.bcard__strip.is-hot{background:#FCEBEB;color:#A32D2D}
.bcard__strip.is-warm{background:#FAEEDA;color:#854F0B}
.bcard__strip.is-cool{background:#E6F1FB;color:#185FA5}
.bcard__strip.is-cold{background:var(--surface-2);color:var(--muted)}
/* Спокойные иконки звонка/мессенджеров в подвале плитки */
.bcard__cic,.bcard__mic{width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;flex-shrink:0}
.bcard__cic{background:#1D9E75;color:#fff}
.bcard__cic:hover{background:#0F6E56}
.bcard__mic{border:1px solid var(--line);color:var(--muted)}
.bcard__mic:hover{border-color:var(--brand);color:var(--ink)}
.bcard__cic svg,.bcard__mic svg{width:13px;height:13px}
.bcard__mic--max{font-size:11px;font-weight:700}
/* Время у клиента: зелёное в 9–18, красное вне */
.bcard__time{font-size:10px;padding:1px 8px;border-radius:99px;display:inline-flex;align-items:center;gap:3px;white-space:nowrap}
.bcard__time svg{width:11px;height:11px}
.bcard__time.is-work{background:#EAF3DE;color:#3B6D11}
.bcard__time.is-off{background:#FCEBEB;color:#A32D2D}
.bx__deal{font-size:11px;color:var(--muted);margin:0}
/* ИИ-подсказка «Что сделать, чтобы закрыть»: метка авторства, подпись свежести, спиннер */
.bx__ai{font-size:8.5px;font-weight:700;color:#7A5AF8;background:rgba(122,90,248,.12);border-radius:4px;padding:1px 4px;letter-spacing:.02em;text-transform:none}
.bx__aimeta{font-size:8.5px;color:var(--muted);opacity:.75;margin:2px 0 0}
.bx__deal--load{display:flex;align-items:center;gap:6px;color:var(--muted)}
.bx__spin{display:inline-block;width:10px;height:10px;border:2px solid rgba(122,90,248,.25);border-top-color:#7A5AF8;border-radius:50%;animation:bxspin .7s linear infinite}
@keyframes bxspin{to{transform:rotate(360deg)}}
/* Вероятность закрытия — прогресс-бар внизу карточки */
.bcard__prob{display:flex;align-items:center;gap:8px;margin-top:9px}
.bcard__prob-l{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.02em;white-space:nowrap}
.bcard__prob-track{flex:1;height:6px;border-radius:99px;background:var(--surface-2)}
.bcard__prob-fill{display:block;height:6px;border-radius:99px}
.bcard__prob-v{font-size:11px;font-weight:700;white-space:nowrap}
/* Уровни вероятности: заливка одна на обе темы (средние тона), а ЦИФРА переопределяется темой —
   прежние инлайн-hex (#0F6E56 и т.п.) в тёмной теме давали контраст ~2:1 (№7 бета-теста) */
.bcard__prob--hi .bcard__prob-fill{background:#1D9E75}
.bcard__prob--mid .bcard__prob-fill{background:#EF9F27}
.bcard__prob--lo .bcard__prob-fill{background:#E24B4A}
.bcard__prob--hi .bcard__prob-v{color:#0F6E56}
.bcard__prob--mid .bcard__prob-v{color:#BA7517}
.bcard__prob--lo .bcard__prob-v{color:#A32D2D}
[data-theme="dark"] .bcard__prob--hi .bcard__prob-v{color:#4ed9a4}
[data-theme="dark"] .bcard__prob--mid .bcard__prob-v{color:#f2b25c}
[data-theme="dark"] .bcard__prob--lo .bcard__prob-v{color:#f28b8b}

/* ---- Настройка порядка блоков главной (личная, 2026-08-12) ---- */
.homecfg{display:flex;justify-content:flex-end;align-items:center;gap:8px;margin:2px 0 10px}
.homecfg--edit{justify-content:flex-start;background:rgba(239,159,39,.08);border:1.5px solid #EF9F27;border-radius:11px;padding:9px 11px;flex-wrap:wrap}
.homecfg--edit b{font-size:12.5px}
.homecfg__hint{color:var(--muted);font-size:11px;flex:1;min-width:140px}
.homecfg__btn{border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);font-size:11.5px;padding:5px 10px;border-radius:8px;cursor:pointer}
.homecfg__btn:hover{border-color:var(--brand);color:var(--brand)}
.homecfg__save{border:0;background:var(--brand);color:var(--brand-ink);font-size:11.5px;font-weight:700;padding:6px 12px;border-radius:8px;cursor:pointer}
#homeBlocks.is-edit .hblk{border:1.5px dashed var(--line);border-radius:12px;margin:0 0 12px;background:var(--surface)}
#homeBlocks.is-edit .hblk.is-drag{opacity:.45}
.hblk__bar{display:flex;align-items:center;gap:8px;padding:7px 11px;border-bottom:1px dashed var(--line);cursor:grab;font-size:12px}
.hblk__grip{color:var(--muted);letter-spacing:-1px}
.hblk__hint{color:var(--muted);font-size:11px;margin-left:auto}
.hblk__body{pointer-events:none;opacity:.75;padding:6px}
/* настройка — только с компьютера: на телефоне перетаскивать нечем, кнопку прячем */
@media (max-width:900px){.homecfg{display:none}}
/* Статус одной строкой (минимал): время · след.шаг · дн в работе */
.bcard__status{display:flex;flex-wrap:nowrap;align-items:center;gap:4px;margin:6px 0 0;font-size:10px;color:var(--muted);white-space:nowrap;overflow:hidden}
.bcard__status>span{flex:none}
.bcard__status svg{width:11px;height:11px;vertical-align:-1px}
.bcard__st-work{color:#3B6D11}
.bcard__st-off{color:#A32D2D}
.bcard__st-sep{color:var(--line)}
/* Метки точками */
.bcard__tagdot{display:inline-flex;align-items:center;gap:4px;font-size:10px;color:var(--ink-soft)}
.bcard__tagdotc{width:7px;height:7px;border-radius:50%;display:inline-block;flex-shrink:0}
.bcard__sub{margin:4px 0 0;font-size:11.5px;color:var(--muted)}
.bcard__heat{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:middle}
.bcard__lead{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:5px 0 0;font-size:11px;color:var(--muted)}
.bcard__reg{display:inline-block}
.bcard__next{display:inline-flex;align-items:center;gap:3px;padding:1px 7px;border-radius:99px;
  background:var(--surface);border:1px solid var(--line)}
.bcard__next.is-over{color:#A32D2D;border-color:#F09595;background:#FCEBEB}
.bcard__next.is-today{color:#854F0B;border-color:#FAC775;background:#FAEEDA}
/* Звонок/мессенджеры прямо с плитки лида (без открытия карточки) */
.bcard__act{display:flex;align-items:center;gap:6px;margin:8px 0 0}
.bcard__call{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:5px;
  font-size:11.5px;font-weight:700;padding:6px 8px;border-radius:var(--r-sm);
  background:#1D9E75;color:#fff;text-decoration:none}
.bcard__call svg{width:13px;height:13px}
.bcard__call:hover{background:#0F6E56}
.bcard__msg{width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--r-sm);border:1px solid var(--line);color:var(--muted);text-decoration:none}
.bcard__msg svg{width:15px;height:15px}
.bcard__msg:hover{border-color:var(--tone,var(--accent));color:var(--ink)}
/* Бейдж непрочитанных из мессенджеров — красный кружок в углу плитки (как на айфоне) */
.bcard--unread{position:relative}
/* Вынос за край карточки был ровно -7px, а у .col__body боковой padding всего 3px и
   overflow-y:auto — то есть кружок РЕЗАЛСЯ прокруткой колонки (2026-08-24: «бейдж прячется
   под другие элементы»). Держим его в пределах padding'а колонки: визуальный «уголок»
   остаётся, обрезки нет. */
.bcard__unread{position:absolute;top:-2px;right:-2px;min-width:19px;height:19px;padding:0 5px;
  border-radius:99px;background:#E24B4A;color:#fff;font-size:11px;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px var(--surface);z-index:2}
/* Непрочитанные чаты в «Пропущенное событие»: счётчик «ответить: N» + подсветка «конца дня» */
.col__chat{display:inline-flex;align-items:center;gap:3px;font-size:10.5px;font-weight:700;white-space:nowrap;
  padding:1px 7px;border-radius:999px;background:color-mix(in srgb,var(--brand) 14%,transparent);color:var(--brand)}
.col__chat svg{width:11px;height:11px}
.col__chat.is-eod{background:#FCEBEB;color:#A32D2D}
.col--eodalert{outline:1.5px solid #F09595;outline-offset:-1px}
/* Инлайн-разворот плитки лида: кнопка снизу + развёрнутый блок (номера/сделка/метки/комментарий) */
.bcard__expbtn{display:flex;align-items:center;justify-content:center;gap:5px;width:100%;margin:9px 0 0;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2);color:#185FA5;font-size:11.5px;font-weight:700;padding:6px;cursor:pointer}
.bcard__expbtn:hover{border-color:var(--brand)}
.bcard__expbtn svg{width:13px;height:13px;transition:transform .15s}
.bcard__expbtn .lbl-close{display:none}
.bcard__exp{display:block;margin-top:8px;padding-top:8px;border-top:1px dashed var(--line)}
.bcard.is-expanded .bcard__expbtn svg{transform:rotate(180deg)}
.bcard.is-expanded .bcard__expbtn .lbl-open{display:none}
.bcard.is-expanded .bcard__expbtn .lbl-close{display:inline}
.bx__lbl{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.02em;margin:7px 0 3px;display:flex;align-items:center;gap:4px}
.bx__lbl:first-child{margin-top:0}
.bx__lbl svg{width:10px;height:10px}
.bx__blk{background:var(--surface-2);border-radius:var(--r-sm);padding:5px 7px}
.bx__ph{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 0;font-size:11px}
.bx__ph i{color:var(--muted);font-style:normal;font-size:9.5px}
.bx__mc{width:22px;height:22px;border-radius:50%;background:#1D9E75;color:#fff;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;text-decoration:none}
.bx__mc svg{width:12px;height:12px}
.bx__grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 9px;font-size:11px}
.bx__grid span{display:block;color:var(--muted);font-size:9px}
.bx__grid b{font-weight:700}
.bx__tags{display:flex;flex-wrap:wrap;gap:4px}
.bx__tag{font-size:9.5px;padding:1px 7px;border-radius:99px;background:var(--surface-2);color:var(--ink-soft)}
.bx__comment{background:#FAECE7;border-radius:var(--r-sm);padding:6px 7px;font-size:11px;color:#712B13;line-height:1.45}
/* Кнопка «развернуть всех» — в строке фильтров доски (справа) */
.board__expall{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;padding:6px 11px;
  border-radius:99px;border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);cursor:pointer}
.board__expall svg{width:14px;height:14px}
.board__expall:hover{border-color:var(--brand);color:var(--brand)}
.board__expall .lbl-close{display:none}
.board.is-allexp .board__expall .lbl-open{display:none}
.board.is-allexp .board__expall .lbl-close{display:inline}
.bcard__badges{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.bbadge{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;padding:2px 8px;border-radius:999px;
  background:color-mix(in srgb, var(--tone,var(--accent)) 13%, transparent);color:var(--tone,var(--accent))}
/* иконка внутри бейджа (спецификация/фото/брак/новая заявка) — маленькая, не растягивается */
.bbadge svg{width:11px;height:11px;flex:none}
.bcard__discbadge{display:inline-block;font-size:10px;font-weight:700;padding:2px 8px;border-radius:999px}
.bcard__discbadge--pending{background:color-mix(in srgb, #EF9F27 16%, transparent);color:#B06A00}
.bcard__discbadge--approved{background:color-mix(in srgb, #1D9E75 16%, transparent);color:#0F6E56}
.bcard__discbadge--rejected{background:color-mix(in srgb, #E24B4A 16%, transparent);color:#A32D2D}
.bcard__discbadge--withdrawn{background:var(--surface-2);color:var(--muted)}
/* СКИДКА КАК ДЕНЬГИ (28.08.2026, docs/DISCOUNTS.md). Строка заявки на плитке доски
   «Согласование скидок»: во сколько уступка обойдётся компании — и кнопка быстрого
   согласования. Цифра слева НЕ бейдж: это главное число плитки, ради него её и читают. */
.bcard__discask{display:flex;align-items:center;gap:8px;margin-top:6px}
.bcard__discask__s{font-size:14px;font-weight:700;color:var(--brand-fg)}
/* Сама кнопка — из общего слоя (k5Ui.html.button): обёртке остаётся только раскладка и
   data-атрибуты, за которые её ловит делегированный обработчик. */
.bcard__discask__b{margin-left:auto;display:inline-flex}
/* Быстрое подтверждение согласования: те же три числа, что в карточке заявки, — человек
   не должен переучиваться, переходя с плитки в окно. */
.dq__who{font-size:15px;font-weight:700}
.dq__what{margin-top:2px;font-size:13px;color:var(--ink-soft)}
.dq__warn{margin-top:8px;padding:7px 10px;border-left:3px solid var(--brand);
  background:var(--brand-tint);border-radius:0 var(--r-sm) var(--r-sm) 0;font-size:12.5px}
.dq__nums{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0 4px}
.dq__nums span{display:flex;flex-direction:column;gap:2px;flex:1 1 110px}
.dq__nums i{font-style:normal;font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)}
.dq__nums b{font-size:19px;line-height:1.15;white-space:nowrap}
.dq__minus b{color:var(--brand-fg)}
.dq__pay b{color:var(--up)}
.dq__mar{margin-top:6px;font-size:13px;color:var(--ink-soft)}
.dq__bad{color:var(--down)}
.dq__unk{color:var(--muted);font-size:12px}
/* Отчёт по скидкам (кнопка «Отчёт» на доске «Согласование скидок»). Те же четыре числа
   сверху, что и в остальных сводках проекта: сперва итог, потом разрезы. */
.dr__range{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}
.dr__range input{font:inherit;padding:4px 8px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink)}
.dr__nums{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0 2px}
.dr__nums span{display:flex;flex-direction:column;gap:2px;flex:1 1 110px}
.dr__nums i{font-style:normal;font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)}
.dr__nums b{font-size:19px;line-height:1.15;white-space:nowrap}
.dr__sec{margin:14px 0 6px;font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted)}
.dr__t{width:100%;border-collapse:collapse;font-size:13px}
.dr__t th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);font-weight:600;padding:4px 6px;border-bottom:1px solid var(--line)}
.dr__t td{padding:5px 6px;border-bottom:1px solid var(--line)}
.dr__t .dr__n,.dr__n{text-align:right;white-space:nowrap}
.dr__list{display:flex;flex-direction:column;gap:3px;max-height:260px;overflow:auto}
.dr__row{display:flex;align-items:baseline;gap:8px;font-size:13px}
.dr__d{color:var(--muted);font-size:12px;min-width:44px}
.dr__s{font-size:11px;text-transform:uppercase;letter-spacing:.4px;min-width:44px}
.dr__s--ok{color:var(--up)}
.dr__s--no{color:var(--down)}
.dr__l{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dr__rm{font-style:normal;color:var(--muted);font-size:11px}
.dr__m{white-space:nowrap}
.bcard__lostbadge{display:inline-block;font-size:10px;font-weight:700;padding:2px 8px;border-radius:999px;background:color-mix(in srgb, #E24B4A 16%, transparent);color:#A32D2D}
/* Сделка из журнала (docs/DEALS.md, заход 2): статус/этап исполнения на плитке */
.bcard__dealbadge{display:inline-block;font-size:10px;font-weight:700;padding:2px 8px;border-radius:999px;background:color-mix(in srgb, #378ADD 14%, transparent);color:#1E5E9E}
.bcard__dealbadge--ok{background:color-mix(in srgb, #1D9E75 16%, transparent);color:#0F6E56}
.bcard__dealbadge--warn{background:color-mix(in srgb, #EF9F27 18%, transparent);color:#93600F}
/* Повторная сделка (заход 3): клиент уже покупал — фиолетовый, чтобы не путать со статусами */
.bcard__dealbadge--repeat{background:color-mix(in srgb, #8A5AC2 14%, transparent);color:#6A3FA0}
/* Бронь товара (§1.4, кредит/лизинг — заготовка): иконка-бейдж на плитке; срок 2 недели,
   истёкшая — янтарная (ждёт продления через РОПа или снятия) */
.bcard__resbadge{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;padding:2px 8px;border-radius:999px;
  background:color-mix(in srgb, #534AB7 14%, transparent);color:#4A42A3}
.bcard__resbadge svg{width:10px;height:10px}
.bcard__resbadge--expired{background:color-mix(in srgb, #EF9F27 18%, transparent);color:#B06A00}
/* Секции-аккордеон стадий оформления в колонке «Кредит/лизинг…» (§1.4): заголовок-строка
   со счётчиком, свёрнутая секция — только строка; дроп карточки на секцию меняет стадию */
.credsec{border-radius:10px;transition:background .15s}
.credsec.is-over{background:color-mix(in srgb, var(--tone) 10%, transparent);outline:1.5px dashed var(--tone);outline-offset:-1px}
.credsec__h{display:flex;align-items:center;gap:6px;width:100%;margin:2px 0 6px;padding:5px 7px;
  border:none;background:none;font:inherit;font-size:10.5px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted);cursor:pointer;border-radius:8px;text-align:left}
.credsec__h:hover{background:color-mix(in srgb, var(--ink) 5%, transparent);color:var(--ink-soft)}
.credsec__arr{flex:none;font-size:9px;line-height:1}
.credsec__t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.credsec__n{flex:none;margin-left:auto;font-style:normal;font-size:10px;font-weight:800;
  background:color-mix(in srgb, var(--ink) 7%, transparent);color:var(--ink-soft);border-radius:999px;padding:1px 7px}
.credsec.is-collapsed .credsec__h{margin-bottom:2px;opacity:.75}
/* Заявка на скидку (доска discounts) — запрошенный размер/итог на плитке. */
.bcard__discreq{display:inline-block;font-size:10px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--surface-2);color:var(--muted)}
.bcard__discreq--done{background:color-mix(in srgb, #1D9E75 16%, transparent);color:#0F6E56}
.bcard__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:5px 8px;margin-top:9px;min-height:1px}
.bcard__sum{font-size:12.5px;font-weight:800;color:var(--ink)}
.bcard__eta{font-size:11px;color:var(--muted)}
/* чип плановой даты след. шага (фильтр сегодня/неделя) */
.bcard__due{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;white-space:nowrap;
  padding:2px 8px;border-radius:999px;background:var(--surface-2);color:var(--muted)}
.bcard__due svg{width:11px;height:11px}
.bcard__due.is-week{color:var(--ink-soft)}
.bcard__due.is-today{background:color-mix(in srgb, var(--brand) 14%, transparent);color:var(--brand)}
.bcard__due.is-over{background:color-mix(in srgb, var(--down) 14%, transparent);color:var(--down)}

/* Песочница «Тест»: кнопки «Принять»/«Отклонить» на авто-предложениях (см. app.js cardFace/tbGenerate) */
.bcard__testact{display:flex;gap:6px;margin-top:9px}
.tbtn{flex:1;border:none;border-radius:8px;padding:7px 0;font:inherit;font-size:12px;font-weight:700;
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:4px;transition:.15s}
.tbtn svg{width:14px;height:14px}
.tbtn--ok{background:color-mix(in srgb, var(--up) 16%, transparent);color:var(--up)}
.tbtn--ok:hover{background:color-mix(in srgb, var(--up) 26%, transparent)}
.tbtn--no{background:var(--surface-2);color:var(--muted)}
.tbtn--no:hover{background:color-mix(in srgb, var(--down) 14%, transparent);color:var(--down)}
/* Компактные кнопки-решения (напоминание о готовности): мельче «Принять/Отклонить» */
.bcard__testact--sm{gap:5px;margin-top:7px}
.bcard__testact--sm .tbtn{padding:4px 6px;font-size:10.5px;font-weight:600;border-radius:7px}
.bcard__testact--sm .tbtn svg{width:11px;height:11px}
/* «Кабинет поставщика» в детали карточки «Теста»: правка полей строки ЛК из канбана */
.tbsync__grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;padding:10px 2px 4px}
@media (max-width:720px){.tbsync__grid{grid-template-columns:1fr}}
.tbsync__row{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:30px;
  border-radius:8px;padding:2px 6px;transition:background .25s}
.tbsync__row.is-saved{background:color-mix(in srgb, var(--up) 14%, transparent)}
.tbsync__l{font-size:12px;color:var(--muted);flex:1}
.tbsync__in{border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);
  font:inherit;font-size:12.5px;padding:4px 8px;width:160px;max-width:46%}
.tbsync__in:focus{outline:none;border-color:var(--brand)}
.tbsync__in.is-err{border-color:var(--down)}
.tbsync__tgl input{width:16px;height:16px;accent-color:var(--brand);cursor:pointer}
/* Кнопка перехода этапа в детали строки ЛК (заменяет статусные тумблеры поставщика) */
.supnext{margin:10px 0 4px;display:flex;flex-direction:column;gap:7px}
.supnext__btn[disabled]{opacity:.45;cursor:not-allowed;filter:grayscale(.3)}
/* Кабинет брокера (демо-каркас): таблица заказов с отправленной предоплатой */
.brok__wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-sm)}
.brok__table{width:100%;border-collapse:collapse;font-size:12.5px}
.brok__table th{position:sticky;top:0;background:var(--surface-2);color:var(--muted);font-size:10.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
.brok__table td{padding:9px 12px;border-bottom:1px solid var(--line);color:var(--ink);vertical-align:top}
.brok__table tbody tr:last-child td{border-bottom:none}
.brok__table tbody tr:hover{background:color-mix(in srgb, var(--brand) 4%, transparent)}
.brok__item{font-weight:600;overflow-wrap:anywhere}
.brok__empty{color:var(--muted);font-style:italic;font-size:11.5px}
/* «Просрочено на N дней» — крупно под датой готовности («Заказ в производстве», доска «Тест») */
.tbc__latebig{margin:2px 0 4px;font-size:15.5px;font-weight:800;line-height:1.25;color:var(--down)}
/* «Добавить контейнер» в детали строки ЛК (этап «Заказ отгружен») */
.supcont__add{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:11.5px;font-weight:600;
  color:var(--brand);background:transparent;border:1px dashed color-mix(in srgb, var(--brand) 45%, var(--line));
  border-radius:8px;padding:5px 12px;cursor:pointer}
.supcont__add:hover{background:color-mix(in srgb, var(--brand) 8%, transparent)}
.supcont__add svg{width:12px;height:12px}
/* Кабинет брокера — вкладка «Аналитика» (демо-дэшборды) */
.brokstat__sub{font-size:10px;color:var(--muted)}
.brokstat__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;margin-top:12px}
.brokstat__card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:14px 16px}
.brokstat__hd{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--ink);margin-bottom:12px}
.brokstat__bars{display:flex;align-items:flex-end;gap:10px;height:150px;padding:0 4px}
.brokstat__bar{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;height:100%}
.brokstat__barfill{width:100%;max-width:38px;border-radius:7px 7px 3px 3px;background:color-mix(in srgb, var(--brand) 75%, transparent);min-height:6px}
.brokstat__barv{font-size:11px;font-weight:800;color:var(--ink)}
.brokstat__barl{font-size:10.5px;color:var(--muted)}
.brokstat__ring{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.brokstat__legs{display:flex;flex-direction:column;gap:6px}
.brokstat__leg{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--ink-soft)}
.brokstat__leg i{width:9px;height:9px;border-radius:50%;flex:none}
.brokstat__leg b{color:var(--ink)}
.brokstat__crow{display:flex;align-items:center;gap:10px;margin:7px 0}
.brokstat__cl{flex:none;width:96px;font-size:11.5px;color:var(--muted)}
.brokstat__cl--w{width:140px}
.brokstat__ctrack{flex:1;height:9px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.brokstat__cfill{display:block;height:100%;border-radius:999px}
.brokstat__cv{flex:none;font-size:11.5px;color:var(--ink);min-width:38px;text-align:right}
/* Окошко выбора логиста (демо) — «Контейнер заказан» на этапе «Заказ в производстве» */
.logpick{display:flex;flex-direction:column;gap:8px;margin:4px 0 10px}
.logpick__it{display:flex;align-items:center;gap:11px;width:100%;text-align:left;font:inherit;cursor:pointer;
  padding:10px 12px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surface);
  transition:border-color .12s,background .12s}
.logpick__it:hover{border-color:var(--brand);background:color-mix(in srgb, var(--brand) 6%, var(--surface))}
.logpick__it > svg{width:15px;height:15px;color:var(--muted);margin-left:auto;transform:rotate(-90deg);flex:none}
.logpick__x{display:flex;flex-direction:column;gap:1px;min-width:0}
.logpick__x b{font-size:13.5px;color:var(--ink)}
.logpick__x span{font-size:11.5px;color:var(--muted)}
/* Мобильный ЛК поставщика: длинные названия/номера (без пробелов) переносим, а не обрезаем */
.supkb__item,.suppliers .bcard__t,.supov__id b,.supneg__req,.bcard__rcmt,.supkb__sub,.suppliers .bcard__sub{
  overflow-wrap:anywhere;word-break:break-word;min-width:0}
@media (max-width:640px){
  /* деталь строки: поля не сжимаются в нечитаемое (drawer на всю ширину — правило ниже по файлу) */
  .suptr2{flex-wrap:wrap}
  .suptr2 .suptr2__in,.suptr2 input,.suptr2 select{max-width:100%}
  /* кнопки перехода/принятия — на всю ширину, удобнее попадать пальцем */
  .supnext__btn,.supaccept__btn,.supkb__accept{width:100%;justify-content:center}
  /* тег страны и бейджи не наезжают на заголовок */
  .tbc__ctry{position:static;align-self:flex-start;margin:0 0 4px}
}
/* Пометка «Новая заявка» в канбане ЛК поставщика (вместо кнопки «Принять» на плитке) */
.supkb__new{display:flex;align-items:center;gap:6px;margin-top:8px;padding:6px 9px;border-radius:8px;
  font-size:11px;font-weight:700;color:var(--brand);
  background:color-mix(in srgb, var(--brand) 10%, var(--surface));
  border:1px dashed color-mix(in srgb, var(--brand) 40%, var(--line))}
.supkb__new svg{width:13px;height:13px;flex:none}
.bbadge--new{color:var(--brand);border-color:color-mix(in srgb, var(--brand) 45%, var(--line));
  background:color-mix(in srgb, var(--brand) 10%, var(--surface));font-weight:700}
/* «Отчитаться о расхождении» (деталь складской карточки) — компактная, не во всю ширину.
   Селектор с двумя классами: базовый .cform__ok объявлен НИЖЕ по файлу и иначе перебивает. */
.cform__ok.tbreclaim__btn{display:inline-flex;align-items:center;gap:6px;width:auto;align-self:flex-start;
  padding:6px 14px;font-size:12px;border-radius:8px}
.cform__ok.tbreclaim__btn svg{width:13px;height:13px}
/* Тег страны поставки (файл слежения) — правый верхний угол карточки «Теста» */
.tbc__ctry{position:absolute;top:7px;right:8px;font-size:10px;font-weight:800;letter-spacing:.02em;
  padding:2px 7px;border-radius:999px;line-height:1.4;pointer-events:auto}
.tbc__ctry--in{background:color-mix(in srgb, #f59e0b 16%, var(--surface));color:#b45309;
  border:1px solid color-mix(in srgb, #f59e0b 40%, var(--line))}
.tbc__ctry--cn{background:color-mix(in srgb, #dc2626 12%, var(--surface));color:#b91c1c;
  border:1px solid color-mix(in srgb, #dc2626 35%, var(--line))}
.tbreject__list{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.tbreject__list .cbtn{width:100%;justify-content:center}

/* панель песочницы над тестовой доской — крупные кнопки Запросить анализ/Тестовые
   данные/Очистить (в шапке колонки они терялись, вынесены над этапами) */
.tbbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0 12px;padding:10px 14px;
  border:1px dashed color-mix(in srgb, var(--brand) 45%, transparent);border-radius:12px;
  background:color-mix(in srgb, var(--brand) 5%, transparent)}
.tbbar__title{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:var(--muted);margin-right:6px}
.tbbar__title svg{width:15px;height:15px}
.tbbar__btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:10px;
  padding:9px 16px;font:inherit;font-size:13px;font-weight:700;cursor:pointer;background:var(--surface);color:var(--ink);transition:.15s}
.tbbar__btn svg{width:15px;height:15px}
.tbbar__btn:hover{border-color:var(--brand);color:var(--brand)}
.tbbar__btn--primary{background:var(--brand);border-color:var(--brand);color:#fff}
.tbbar__btn--primary:hover{background:color-mix(in srgb, var(--brand) 85%, #000);color:#fff}
.tbbar__btn--danger:hover{border-color:var(--down);color:var(--down);background:color-mix(in srgb, var(--down) 8%, transparent)}
.tbbar__btn:disabled{opacity:.55;cursor:default}

/* журнал отклонений тестовой доски в отчёте «Закупки» (#stats/purchasing) */
.tbrej{margin:12px 0;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface)}
.tbrej__head{display:flex;align-items:center;gap:8px;padding:10px 14px;font-size:13px;font-weight:700;
  color:var(--ink-soft);cursor:pointer;list-style:none;user-select:none}
.tbrej__head::-webkit-details-marker{display:none}
.tbrej__head svg{width:15px;height:15px;color:var(--down)}
.tbrej__filter{padding:0 14px 8px}
.tbrej__q{width:100%;max-width:340px;box-sizing:border-box;border:1px solid var(--line);border-radius:9px;
  padding:7px 11px;font:inherit;font-size:12.5px;background:var(--surface-2);color:var(--ink)}
.tbrej__q:focus{outline:none;border-color:var(--brand)}
.tbrej__list{padding:2px 14px 10px;display:flex;flex-direction:column;gap:8px}
.tbrej__row{display:flex;align-items:flex-start;gap:10px;padding:8px 10px;border-radius:9px;background:var(--surface-2)}
.tbrej__main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.tbrej__main b{font-size:13px;color:var(--ink)}
.tbrej__meta{font-size:11.5px;color:var(--muted)}
.tbrej__why{font-size:12.5px;color:var(--ink-soft)}
.tbrej__del{flex:none;border:none;background:none;color:var(--muted);cursor:pointer;padding:4px;border-radius:7px}
.tbrej__del svg{width:15px;height:15px}
.tbrej__del:hover{color:var(--down);background:color-mix(in srgb, var(--down) 10%, transparent)}
/* поле причины отклонения в модалке — на всю ширину; пустое обязательное подсвечиваем */
#tbRejReason{width:100%;box-sizing:border-box;margin-top:8px}
.lfeed__ta.is-err{border-color:var(--down)}

/* уведомление с «Отменить» и радиальным 10с-таймером (правый верхний угол) —
   кольцо: окружность r=8.5 → длина 2πr ≈ 53.41, дорисовывается CSS-анимацией undoRing */
#tbUndoWrap{position:fixed;top:72px;right:16px;z-index:1200;display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.undoToast{display:flex;align-items:center;gap:10px;max-width:400px;padding:10px 12px;border:1px solid var(--line);
  border-radius:12px;background:var(--surface);box-shadow:0 8px 28px rgba(0,0,0,.18);animation:undoIn .22s ease}
.undoToast.is-out{opacity:0;transform:translateY(-6px);transition:.2s}
@keyframes undoIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.undoToast__ring{width:22px;height:22px;flex:none;transform:rotate(-90deg)}
.undoToast__ringbg{fill:none;stroke:var(--line);stroke-width:2.5}
.undoToast__ringfg{fill:none;stroke:var(--brand);stroke-width:2.5;stroke-linecap:round;
  stroke-dasharray:53.41;stroke-dashoffset:0;animation:undoRing 10s linear forwards}
@keyframes undoRing{to{stroke-dashoffset:53.41}}
.undoToast__msg{font-size:12.5px;color:var(--ink);min-width:0}
.undoToast__msg b{color:var(--ink)}
.undoToast__undo{display:inline-flex;align-items:center;gap:5px;border:none;flex:none;cursor:pointer;
  background:color-mix(in srgb, var(--brand) 12%, transparent);color:var(--brand);
  font:inherit;font-size:12.5px;font-weight:700;padding:6px 12px;border-radius:9px}
.undoToast__undo svg{width:13px;height:13px}
.undoToast__undo:hover{background:color-mix(in srgb, var(--brand) 20%, transparent)}
.undoToast__x{border:none;background:none;color:var(--muted);cursor:pointer;font-size:13px;padding:2px 4px;flex:none}
.undoToast__x:hover{color:var(--ink)}

/* «Заказы поставщикам»: свой формат карточки (см. app.js cardFacePurchase) — сводка анализа
   закупок целиком на лицевой стороне, без скролла/открытия деталей. */
.bcard--purch{cursor:pointer}
.tbc__no{margin:0;font-size:10px;font-weight:600;letter-spacing:.02em;color:var(--muted)}
/* плашка-след группы на позиции расформированного заказа (arrival_split, 2026-07-30) */
.tbc__grouptrace{margin:6px 0 0;padding:6px 10px;font-size:12px;color:var(--muted);background:color-mix(in srgb, var(--accent) 7%, transparent);border:1px dashed color-mix(in srgb, var(--accent) 30%, transparent);border-radius:8px;display:flex;align-items:center;gap:6px}
.tbc__grouptrace svg{flex:none;width:13px;height:13px}
/* вкладка-контейнер в очереди приёмки — на базе credsec, свой акцент */
.rcvsec .credsec__t{display:inline-flex;align-items:center;gap:5px}
.rcvsec .credsec__t svg{width:13px;height:13px;opacity:.7}
.tbc__owner{margin:3px 0 0;font-size:11.5px;color:var(--muted);display:flex;align-items:center;gap:5px}
.tbc__item{margin:5px 0 3px;font-size:14px;font-weight:700;line-height:1.3;color:var(--ink)}
/* номер инвойса и номер контейнера — серой подстрокой сразу под названием карточки
   (2026-08-26; тот же размер и тон, что у .bcard__sub в кабинете поставщика) */
.tbc__ids{margin:0 0 3px}
.tbc__id{margin:0;font-size:11.5px;line-height:1.35;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tbc__row{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-size:12px;color:var(--muted);padding:1px 0}
.tbc__row b{font-weight:700;color:var(--ink);white-space:nowrap}
/* дата поступления последней закупки — между названием строки и цифрой («В обработке») */
.tbc__eta{font-size:10.5px;color:var(--muted);white-space:nowrap;opacity:.9}
.tbc__buy{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:7px;padding:7px 10px;
  border-radius:9px;background:color-mix(in srgb, var(--brand) 12%, transparent)}
.tbc__buy span{font-size:12px;font-weight:700;color:var(--brand)}
.tbc__buy b{font-size:18px;font-weight:800;color:var(--brand);white-space:nowrap}
/* просрочка дедлайна (трекинговый вид карточки «Тест» после оплаты) — красным */
.tbc__buy--late{background:color-mix(in srgb, #e2563f 14%, transparent)}
.tbc__buy--late span,.tbc__buy--late b{color:#e2563f}
/* плашка расчёта даты готовности в ЛК поставщика (под «Предварительной датой готовности») */
.supready{flex-wrap:wrap;gap:6px 10px}
.supready__calc{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--muted)}
.supready__calc svg{width:13px;height:13px;flex:none}
.supready__diff{font-size:12px;font-weight:700;color:#e2563f}
.supready__done{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;color:#2ca36a}
.supready__ok{margin-left:auto}
.tbc__sum{margin:6px 0 0;font-size:12.5px;font-weight:700;color:var(--ink)}
.tbc__more{margin-top:6px;padding-top:6px;border-top:1px dashed var(--line)}
.tbc__sup{margin:0;font-size:11.5px;color:var(--muted)}
/* Внутренний комментарий на плитке (2026-08-27): свой блок с подписью в ОБОИХ видах
   карточки закупки. Подпись — чтобы записку «для себя» не путали с «Комментарием для
   поставщика»; текст переносится целиком (pre-wrap сохраняет абзацы записки). */
.tbc__cmt{display:flex;flex-direction:column;gap:2px;margin:6px 0 0;padding-top:6px;
  border-top:1px dashed var(--line);font-size:11.5px;color:var(--muted)}
.tbc__cmtl{display:flex;align-items:center;gap:4px;font-size:10px;font-weight:800;
  letter-spacing:.03em;text-transform:uppercase;opacity:.75}
.tbc__cmtl svg{width:12px;height:12px}
.tbc__cmtt{white-space:pre-wrap;overflow-wrap:anywhere;color:var(--ink-soft)}
/* инпут количества в плашке «Необходимо заказать» — то же начертание, что и прежняя
   цифра (дизайн не меняется), пунктир снизу — намёк, что можно править */
.tbc__qtyinp{width:4.5ch;border:none;background:transparent;padding:0;margin:0;
  font:inherit;font-size:inherit;font-weight:inherit;color:inherit;text-align:right;
  border-bottom:1.5px dashed color-mix(in srgb, var(--brand) 45%, transparent);border-radius:0;
  -moz-appearance:textfield;appearance:textfield}
.tbc__qtyinp::-webkit-outer-spin-button,.tbc__qtyinp::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.tbc__qtyinp:focus{outline:none;border-bottom-style:solid}

/* деталь карточки закупок (cdet--purch) — та же сводка, что на плитке, только крупнее */
.cdet--purch .tbc__item{font-size:17px;margin-top:8px}
.cdet--purch .tbc__row{font-size:13.5px;padding:2px 0}
.cdet--purch .tbc__buy{margin-top:10px;padding:10px 14px}
.cdet--purch .tbc__buy b{font-size:22px}
.cdet--purch .tbc__sum{font-size:14px;margin:8px 0 4px}
/* «Отправить поставщику» на этапе «Согласование» + чип «отправлено, ждём принятия» */
.tbc__sendsup{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;margin:8px 0 2px}
.tbc__sendsup svg{width:15px;height:15px}
.tbc__sent{display:flex;align-items:center;gap:7px;margin:8px 0 2px;padding:9px 12px;font-size:12.5px;
  font-weight:700;color:var(--ink);border-radius:var(--r-sm);
  background:color-mix(in srgb, var(--up) 10%, var(--surface));
  border:1px solid color-mix(in srgb, var(--up) 35%, var(--line))}
.tbc__sent svg{width:15px;height:15px;color:var(--up);flex:none}
/* Этап «Заказ отгружён поставщиком»: подсказка «поставщик ещё не подтвердил» + «Передать брокеру» */
.tbship__empty{margin:8px 0 2px;font-size:12px;color:var(--muted)}
.tbc__sendbroker{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;margin:4px 0 2px}
.tbc__sendbroker svg{width:15px;height:15px}
/* «В обработке у брокера» — демо-переписка по почте (см. tbBrokerMailHtml в app.js) */
.tbmail{margin:8px 0;padding:12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface)}
.tbmail__hd{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:var(--ink);margin-bottom:8px}
.tbmail__hd svg{width:15px;height:15px;color:var(--muted)}
.tbmail__msg{border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px;background:var(--surface-2)}
.tbmail__meta{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:11.5px;color:var(--muted)}
.tbmail__ts{white-space:nowrap}
.tbmail__subj{margin-top:6px;font-size:13px;font-weight:700;color:var(--ink)}
.tbmail__body{margin-top:6px;font-size:12.5px;line-height:1.55;color:var(--ink-soft)}
.tbmail__note{margin-top:10px;font-size:11px;color:var(--muted)}
/* Раунд согласования заказа — форма предложения поставщика в ЛК */
.supneg{margin-top:6px}
/* иконки вставляются через svgIcon() без размеров — задаём их, иначе svg раздувается на пол-экрана */
.supneg__req svg,.supneg__clar svg,.supneg__sent svg,.supneg__btn svg{width:15px;height:15px;flex:none;vertical-align:-3px}
/* текст запроса на уточнение — комментарием в самый низ карточки (сверху остаётся только статус) */
.supneg__clarcmt{margin-top:10px;padding:9px 12px;border-radius:var(--r-sm);
  background:color-mix(in srgb,var(--down) 8%,var(--surface));border:1px solid color-mix(in srgb,var(--down) 28%,var(--line))}
.supneg__clarcmt__who{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:800;color:var(--down)}
.supneg__clarcmt__who svg{width:14px;height:14px;flex:none}
.supneg__clarcmt__t{display:block;margin-top:4px;font-size:12.5px;line-height:1.45;color:var(--ink-soft);white-space:pre-wrap;overflow-wrap:anywhere}
/* кнопки в строке действий модалок/форм (в т.ч. «Отправить запрос» в «Нужно уточнение») */
.cform__actions .cform__ok svg,.cform__actions .cform__cancel svg{width:15px;height:15px;vertical-align:-3px}
.supneg__req{font-size:13px;color:var(--ink);margin-bottom:8px;padding:9px 12px;border-radius:var(--r-sm);
  background:color-mix(in srgb,var(--brand) 7%,var(--surface));border:1px solid color-mix(in srgb,var(--brand) 22%,var(--line))}
.supneg__clar{display:flex;gap:7px;align-items:flex-start;margin-bottom:8px;padding:9px 12px;font-size:12.5px;font-weight:600;
  color:var(--down);border-radius:var(--r-sm);background:color-mix(in srgb,var(--down) 10%,var(--surface));border:1px solid color-mix(in srgb,var(--down) 32%,var(--line))}
.supneg__sent{display:flex;gap:7px;align-items:center;margin-bottom:8px;padding:9px 12px;font-size:12.5px;font-weight:600;
  color:var(--ink);border-radius:var(--r-sm);background:color-mix(in srgb,var(--brand) 8%,var(--surface))}
.supneg__btn{margin-top:10px;width:100%}
.supneg__hint{margin-top:6px;font-size:11.5px;color:var(--muted)}
.supneg__wait{margin-top:8px;font-size:12px;color:var(--muted)}
/* Позиция, которая едет отдельным заказом (юрлицо «ИМПУЛЬС-ТРАК», 2026-08-26).
   Цвета — токенами (паттерн .supneg__clar чуть выше), не хардкодом: хардкод
   #fff7ed/#9a3412 в тёмной теме оставался бы светлым пятном с нечитаемым текстом. */
.suplegal--solo{display:flex;gap:6px;align-items:center;margin:6px 0;padding:6px 8px;
  border-radius:8px;color:var(--down);background:color-mix(in srgb,var(--down) 10%,var(--surface));font-size:12px}
.suplegal--solo svg{flex:none;width:14px;height:14px}
.suptr2__ro{color:var(--ink)}
.supinv__file{display:inline-flex;align-items:center;gap:6px;color:var(--brand-fg);font-weight:700;font-size:12.5px}
.supinv__file svg{width:15px;height:15px}
.supinv__nofile{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:12.5px}
.supinv__nofile svg{width:15px;height:15px}
.supinv__up{display:inline-flex;align-items:center;gap:6px;margin-left:auto;cursor:pointer;font-size:12px;font-weight:700;
  color:var(--ink);padding:6px 10px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface)}
.supinv__up:hover{border-color:var(--brand);color:var(--brand)}
.supinv__up svg{width:14px;height:14px}
.supinv__makebox{grid-column:1/-1;display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;padding:10px 0 0}
.supinv__profile{flex:1 1 360px;display:grid;gap:5px;min-width:0}
.supinv__profile-row{display:grid;grid-template-columns:minmax(150px,220px) minmax(0,1fr);gap:8px;font-size:12px}
.supinv__profile-row span{color:var(--muted)}
.supinv__profile-row b{color:var(--ink);font-weight:650;white-space:pre-wrap;overflow-wrap:anywhere}
.supinv__make{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:7px 14px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--surface);color:var(--ink);font:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
.supinv__make:hover{border-color:var(--brand);color:var(--brand-fg)}
.supinv__make:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.supinv__make:disabled{opacity:.55;cursor:default;filter:none}
.supinv__make svg{width:15px;height:15px;flex:none}
@media(max-width:640px){.supinv__makebox{align-items:stretch}.supinv__profile-row{grid-template-columns:1fr}.supinv__make{width:100%}}
/* Дифф количества, предложенного поставщиком (крупная цифра «Количество» = supQty) */
.tbc__qtydiff{margin:4px 0 0;font-size:12px;font-weight:600;color:var(--down)}
.tbc__qtydiff b{font-weight:800}
.tbc__qtydiff--same{color:var(--muted);font-weight:600}
/* Раунд согласования — обзор предложения на стороне менеджера ([K] на «Согласовании») */
.tbrev{margin:8px 0;padding:11px 13px;border:1px solid color-mix(in srgb,var(--brand) 28%,var(--line));border-radius:var(--r-sm);
  background:color-mix(in srgb,var(--brand) 6%,var(--surface))}
.tbrev__h{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--ink);margin-bottom:8px}
.tbrev__h svg{width:16px;height:16px;color:var(--brand);flex:none}
.tbrev__row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 0;font-size:12.5px;color:var(--ink-soft);border-bottom:1px solid var(--line)}
.tbrev__row:last-of-type{border-bottom:0}
.tbrev__row b{color:var(--ink);text-align:right}
.tbrev__row a{color:var(--brand);font-weight:700;display:inline-flex;align-items:center;gap:5px}
.tbrev__row a svg{width:14px;height:14px}
.tbrev__nofile{color:var(--muted)}
.tbrev__acts{display:flex;gap:8px;margin-top:10px}
.tbrev__acts .cform__ok,.tbrev__acts .cform__cancel{flex:1;display:flex;align-items:center;justify-content:center;gap:6px}
.tbrev__acts svg{width:15px;height:15px}
/* Этап «Согласование»: выбор/создание поставщика полем автодополнения (вместо окна-пикера) */
.tbsup{margin:10px 0}
.tbsup__l{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:var(--ink);margin-bottom:6px}
.tbsup__l svg{width:15px;height:15px;color:var(--muted)}
.tbsup__q{width:100%;font:inherit;font-size:13px;padding:9px 11px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);color:var(--ink)}
.tbsup__q:focus{outline:none;border-color:var(--brand)}
.tbsup__list{max-height:260px;overflow-y:auto}
.tbsup__list button{display:flex;align-items:center;gap:8px;width:100%;text-align:left;font:inherit;font-size:13px;
  padding:8px 10px;border:0;border-radius:var(--r-sm);background:none;color:var(--ink);cursor:pointer}
.tbsup__list button:hover{background:var(--surface-2)}
.tbsup__dot{width:9px;height:9px;border-radius:50%;flex:none;background:var(--supc,#888)}
.tbsup__nm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tbsup__nm small{color:var(--muted)}
.tbsup__cab{font-style:normal;font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:99px;flex:none}
.tbsup__cab.is-yes{color:var(--up);background:color-mix(in srgb,var(--up) 14%,transparent)}
.tbsup__cab.is-no{color:var(--muted);background:var(--surface-2)}
.tbsup__new{color:var(--brand);font-weight:700}
.tbsup__new svg{width:14px;height:14px}
.tbsup__empty{padding:8px 10px;font-size:12px;color:var(--muted)}
.tbsup__hint{margin:6px 0 0;font-size:11.5px;color:var(--muted);line-height:1.45}
/* Пикер поставщика в формах создания заявки (2026-08-27): две колонки — подсказка
   «заказывали раньше» и поиск по справочнику. На узком экране — одна колонка. */
.k5sup{display:grid;gap:10px}
.k5sup.has-cand{grid-template-columns:minmax(140px,.8fr) 1.2fr}
.k5sup__h{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px;margin-bottom:6px}
.k5sup__h svg{flex:none;width:14px;height:14px}
.k5sup__cand{display:block;width:100%;text-align:left;padding:6px 8px;margin-bottom:4px;border:1px solid var(--line);
  border-radius:8px;background:var(--surface);color:var(--text);cursor:pointer;font-size:13px}
.k5sup__cand:hover{border-color:var(--accent)}
.k5sup__chosen{margin-top:6px;font-size:13px;color:var(--text);display:flex;align-items:center;gap:6px}
.k5sup__chosen svg{flex:none;width:15px;height:15px}
.k5sup__chosen em{color:var(--muted);font-style:normal}
@media (max-width:640px){.k5sup.has-cand{grid-template-columns:1fr}}
/* «Поставщик ждёт ответа» — карточка на «Согласовании» с присланным предложением */
.bcard--awaitus{border-color:color-mix(in srgb,var(--brand) 55%,var(--line));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--brand) 40%,transparent),0 2px 12px color-mix(in srgb,var(--brand) 14%,transparent)}
.tbc__await{display:flex;align-items:center;gap:6px;margin:0 0 8px;padding:7px 10px;font-size:11.5px;font-weight:700;
  color:var(--brand);border-radius:var(--r-sm);
  background:color-mix(in srgb,var(--brand) 12%,var(--surface));
  border:1px solid color-mix(in srgb,var(--brand) 32%,var(--line))}
.tbc__await svg{width:15px;height:15px;flex:none}
/* Этап «Что необходимо купить»: кнопки «Принять»/«Отклонить» в детали карточки */
.tbneed__acts{display:flex;gap:8px;margin:8px 0 2px}
.tbneed__acts .cform__ok,.tbneed__acts .cform__cancel{flex:1;display:flex;align-items:center;justify-content:center;gap:7px}
.tbneed__acts svg{width:15px;height:15px}
/* Разделить заказ (этап «Что необходимо купить») */
.tbsplit{margin:8px 0 2px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2)}
.tbsplit__head{cursor:pointer;padding:9px 12px;font-size:13px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:8px;list-style:none}
.tbsplit__head::-webkit-details-marker{display:none}
.tbsplit__head svg{width:15px;height:15px;color:var(--brand)}
.tbsplit__body{padding:2px 12px 12px;display:flex;flex-direction:column;gap:9px}
.tbsplit__cnt{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:8px}
.tbsplit__cntinp{width:64px;padding:5px 8px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font-weight:700}
.tbsplit__qtys{display:flex;flex-wrap:wrap;gap:8px}
.tbsplit__q{display:flex;flex-direction:column;gap:3px;font-size:11.5px;color:var(--muted)}
.tbsplit__qi{width:84px;padding:6px 8px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font-weight:700}
.tbsplit__info{margin:0;font-size:12.5px;color:var(--muted)}
.tbsplit__info b{color:var(--ink)}
/* Выбранный поставщик на «Что необходимо купить» (2026-08-24) + галочка «оставить
   поставщика во всех частях» в форме деления. */
.tbneed__sup{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:2px 0 8px;padding:8px 10px;
  border:1px solid color-mix(in srgb,var(--brand) 35%,var(--line));border-radius:var(--r-sm);
  background:color-mix(in srgb,var(--brand) 8%,var(--surface))}
.tbneed__supn{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:800;min-width:0;
  overflow-wrap:anywhere}
.tbneed__supn svg{width:14px;height:14px;flex:none;color:var(--brand)}
.tbneed__supcab{font-style:normal;font-size:11px;font-weight:700;padding:2px 6px;border-radius:6px;
  color:var(--gold);background:color-mix(in srgb,var(--gold) 16%,var(--surface))}
.tbneed__supch{margin-left:auto;font:inherit;font-size:12px;font-weight:700;color:var(--brand-fg);
  background:none;border:0;padding:2px 4px;cursor:pointer;text-decoration:underline}
.tbneed__supch:hover{opacity:.75}
/* Юрлицо-заказчик на «Что необходимо купить» (2026-08-26): пикер до отправки заявки,
   плашка «зафиксировано» после. */
.tbneed__legal{display:flex;flex-direction:column;gap:5px;margin:2px 0 8px;font-size:12.5px;
  font-weight:600;color:var(--ink-soft)}
.tbneed__legal.is-locked{display:flex;flex-direction:row;align-items:center;gap:7px;padding:8px 10px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2);color:var(--ink)}
.tbneed__legal.is-locked svg{width:14px;height:14px;flex:none;color:var(--muted)}
.tbneed__legalnote{display:block;margin-top:2px;font-style:normal;font-size:11.5px;font-weight:600;color:var(--down)}
/* Селект юрлица в .tbneed__legal — scoped, не занимаем глобальное имя .cform__inp
   (в проекте больше нигде не используется). */
.tbneed__legal select.cform__inp{border:1px solid var(--line);background:var(--surface);border-radius:var(--r-sm);
  padding:9px 11px;font:inherit;font-size:13.5px;color:var(--ink);outline:none;width:100%}
.tbneed__legal select.cform__inp:focus{border-color:var(--accent)}
.tbsplit__keep{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-soft);cursor:pointer}
.tbsplit__keep input{width:15px;height:15px;accent-color:var(--brand);cursor:pointer;margin:0;flex:none}
.tbneed__ok.is-off{opacity:.55}
.tbsplit__info b.is-off{color:#e2563f}
.tbsplit__err{font-size:12.5px;color:#e2563f;font-weight:600}
.tbsplit__go{align-self:flex-start;display:flex;align-items:center;gap:7px}
.tbsplit__go svg{width:15px;height:15px}
/* Этап «Создание карточки поставщика»: карточка-плитка подсвечена красным + предупреждение */
.bcard--needcab{border-color:color-mix(in srgb, var(--down) 55%, var(--line));
  box-shadow:0 0 0 1px color-mix(in srgb, var(--down) 40%, transparent),
  0 2px 10px color-mix(in srgb, var(--down) 12%, transparent)}
.tbc__warn{display:flex;align-items:center;gap:6px;margin:0 0 8px;padding:7px 10px;font-size:11.5px;font-weight:700;
  color:var(--down);border-radius:var(--r-sm);
  background:color-mix(in srgb, var(--down) 12%, var(--surface));
  border:1px solid color-mix(in srgb, var(--down) 35%, var(--line))}
.tbc__warn svg{width:15px;height:15px;flex:none}
/* Форма создания кабинета поставщика в детали карточки (этап supcard) */
.tbcab{margin:10px 0;padding:12px;border-radius:var(--r-sm);
  background:color-mix(in srgb, var(--down) 7%, var(--surface));
  border:1px solid color-mix(in srgb, var(--down) 30%, var(--line))}
.tbcab__h{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--ink);margin-bottom:6px}
.tbcab__h svg{width:16px;height:16px;color:var(--down);flex:none}
.tbcab__note{font-size:12px;line-height:1.5;color:var(--ink-soft);margin:0 0 10px}
.tbcab__row{display:flex;flex-direction:column;gap:4px;margin-bottom:8px;font-size:12px;color:var(--muted)}
.tbcab__row>span{display:flex;align-items:center;gap:6px}
.tbcab__row>span svg{width:14px;height:14px;flex:none}
.tbcab__row>span em{font-style:normal;font-weight:400;color:var(--muted);opacity:.75}
.tbcab__in{font:inherit;font-size:13px;padding:8px 11px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface);color:var(--ink)}
.tbcab__in:focus{outline:none;border-color:var(--brand)}
.tbcab__err{margin:2px 0 8px;font-size:12px;font-weight:600;color:var(--down)}
.tbcab__btn{display:flex;align-items:center;justify-content:center;gap:7px;width:100%}
.tbcab__btn svg{width:15px;height:15px}
.cdet--purch .cdet__assign{margin:8px 0 2px}
.cdet--purch .cdet__cycle{margin-top:10px}
.bcard__meta{display:inline-flex;flex-wrap:wrap;align-items:center;gap:5px 7px;margin-left:auto;justify-content:flex-end}
/* чип «когда создана карточка» — сколько времени назад, приглушённый (не статус, просто справка) */
.bcard__age{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;white-space:nowrap;color:var(--muted)}
.bcard__age svg{width:11px;height:11px}
/* Аватар ответственного (инициалы в кружке цвета сотрудника) */
.cava{display:inline-flex;align-items:center;justify-content:center;flex:none;border-radius:999px;
  background:var(--ava,#9aa0a6);color:#fff;font-weight:800;line-height:1;letter-spacing:.2px;
  box-shadow:0 0 0 2px var(--surface)}
.cava--sm{width:22px;height:22px;font-size:9.5px}
.cava--md{width:30px;height:30px;font-size:12px}
.cava--xs{width:20px;height:20px;font-size:9px;box-shadow:none}
.cava--none{background:var(--surface-2);color:var(--muted);box-shadow:inset 0 0 0 1px var(--line)}
.board__note{margin:16px 2px 6px;color:var(--muted);font-size:11.5px}

/* Фильтр доски по плановой дате: Все / Просроченные / На сегодня / На неделе */
.board__filters{position:relative;display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:10px 2px 0}
/* Расширенные фильтры + личные «виды» */
.bflt__right{margin-left:auto;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.bflt__view{display:inline-flex;align-items:center;gap:5px;border:1px solid color-mix(in srgb,#185FA5 30%,transparent);
  background:color-mix(in srgb,#185FA5 8%,transparent);color:#185FA5;border-radius:999px;padding:5px 7px 5px 11px;
  font:inherit;font-size:12px;font-weight:600;cursor:pointer}
.bflt__viewx{font-style:normal;font-size:13px;opacity:.6;cursor:pointer;line-height:1}
.bflt__viewx:hover{opacity:1}
.bflt__only,.bflt__more,.bflt__clear{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink-soft);border-radius:999px;padding:7px 13px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;transition:.15s}
.bflt__clear{padding:7px 10px}
.bflt__only svg,.bflt__more svg,.bflt__clear svg{width:14px;height:14px}
.bflt__only:hover,.bflt__more:hover,.bflt__clear:hover{border-color:var(--brand);color:var(--brand)}
.bflt__only.is-on,.bflt__more.is-on{background:var(--brand);color:#fff;border-color:var(--brand)}
.bflt__more i{background:#fff;color:var(--brand);border-radius:999px;padding:0 6px;font-size:10px;font-weight:800;font-style:normal}
.bflt__more.is-on i{background:#fff;color:var(--brand)}
/* Попап «Фильтры» (2026-07-22): раньше был блоком в потоке, раздвигавшим доску —
   теперь плавающее окно поверх доски, ничего не сдвигает и не переливается при
   открытии/закрытии. Разворачивается вниз-влево от кнопки «Фильтры»; своя прокрутка
   (max-height), если содержимое не влезает по высоте. Закрывается кликом мимо/Esc
   (см. bindBoardControlsOnce). */
.bflt__panel{position:absolute;top:calc(100% + 8px);right:0;z-index:40;
  width:min(760px,100%);max-height:min(74vh,620px);overflow-y:auto;
  margin:0;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:13px 14px;box-shadow:0 18px 44px rgba(16,18,22,.18)}
.bflt__grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px;align-items:stretch}
.bflt__g{background:color-mix(in srgb,var(--ink) 3.5%,transparent);border:0.5px solid var(--line);border-radius:12px;padding:9px 11px}
.bflt__gl{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-weight:700;margin:0 0 7px}
.bflt__row{display:flex;flex-wrap:wrap;gap:6px}
.bflt__chip{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);border-radius:999px;
  padding:5px 12px;font:inherit;font-size:12px;font-weight:500;cursor:pointer;transition:.13s;white-space:nowrap}
.bflt__chip svg{width:12px;height:12px;flex:none}
.bflt__chip:hover{border-color:#85B7EB;color:#185FA5;background:color-mix(in srgb,#185FA5 6%,var(--surface))}
.bflt__chip.is-on{background:#185FA5;color:#fff;border-color:#185FA5;box-shadow:0 2px 6px color-mix(in srgb,#185FA5 26%,transparent)}
.bflt__foot{display:flex;align-items:center;gap:10px;margin-top:12px;padding-top:11px;border-top:1px solid var(--line);
  position:sticky;bottom:0;background:var(--surface)}
.bflt__save{display:inline-flex;align-items:center;gap:6px;border:none;background:color-mix(in srgb,var(--up) 14%,transparent);
  color:var(--up);border-radius:999px;padding:8px 15px;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;transition:.13s}
.bflt__save svg{width:14px;height:14px}
.bflt__save:hover{background:color-mix(in srgb,var(--up) 20%,transparent)}
.bflt__foot .bflt__reset{margin-left:auto;border:none;background:none;color:var(--muted);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
.bflt__foot .bflt__reset:hover{color:var(--down)}
/* Массовое переназначение (SALES_TRACKLIST §1.3, П.7) — спрятана внутри панели
   «Фильтры», намеренно неприметная: без рамки/фона, только иконка */
.bflt__gear{margin-left:auto;border:none;background:none;padding:2px;color:var(--muted);
  font-size:15px;line-height:1;cursor:pointer;opacity:.6}
.bflt__gear:hover{opacity:1;color:var(--ink-soft)}
.bflt__foot .bflt__reset ~ .bflt__gear{margin-left:10px}
/* Бегунки (вероятность, дни касания) + поиск источника */
.bflt__sld{display:flex;align-items:center;gap:8px;width:100%;padding:3px 0 1px}
.bflt__sld input[type=range]{flex:1;min-width:56px;height:6px;accent-color:#1D9E75;cursor:pointer}
.bflt__sv{font-size:10.5px;font-weight:700;color:#0F6E56;white-space:nowrap;text-align:center;background:#EAF3DE;border-radius:99px;padding:2px 9px}
.bflt__hint{font-size:9.5px;color:var(--muted);margin:7px 0 0;line-height:1.4}
.bflt__srch{flex:1;min-width:120px;font-size:12px;padding:7px 12px;border-radius:9px;border:1px solid var(--line);background:var(--surface);color:var(--ink);outline:none;transition:border-color .13s}
.bflt__srch:focus{border-color:var(--accent)}
/* Источник: кнопка «Справочник» + выбранные источники чипами */
.bflt__srcbtn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--brand);background:var(--surface);color:var(--brand);border-radius:999px;padding:8px 14px;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;transition:.13s}
.bflt__srcbtn svg{width:14px;height:14px}
.bflt__srcbtn:hover{background:color-mix(in srgb,var(--brand) 8%,var(--surface))}
.bflt__srcn{font-style:normal;background:var(--brand);color:#fff;border-radius:999px;font-size:11px;font-weight:800;padding:0 7px;margin-left:2px}
/* Справочник источников (модалка): поиск + мультивыбор, группировка выставок по годам */
.srcpick__srch{display:flex;align-items:center;gap:8px;margin:0 0 10px;padding:9px 12px;border:1px solid var(--line);border-radius:10px}
.srcpick__srch svg{width:15px;height:15px;color:var(--muted)}
.srcpick__srch input{flex:1;border:none;outline:none;background:none;font:inherit;font-size:13.5px;color:var(--ink)}
.srcpick__body{max-height:46vh;overflow:auto;margin:0 -4px}
.srcpick__gt{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin:12px 6px 6px}
.srcpick__gt svg{width:13px;height:13px}
.srcpick__yr{font-size:12px;font-weight:700;color:#185FA5;margin:9px 6px 4px}
.srcpick__opt{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;cursor:pointer;font-size:13.5px;color:var(--ink)}
.srcpick__opt:hover{background:color-mix(in srgb,var(--ink) 4%,transparent)}
.srcpick__opt--all{font-weight:700;color:#0F6E56}
.srcpick__cbx{width:18px;height:18px;border-radius:5px;border:1.5px solid var(--line);display:inline-flex;align-items:center;justify-content:center;flex:none;color:transparent}
.srcpick__cbx svg{width:12px;height:12px}
.srcpick__opt.in .srcpick__cbx{background:var(--brand);border-color:var(--brand);color:#fff}
.srcpick__cnt{margin-left:auto;font-size:11.5px;color:var(--muted)}
.srcpick__empty{padding:18px;text-align:center;color:var(--muted);font-size:13px}
.srcpick__f{display:flex;align-items:center;gap:10px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.srcpick__sel{font-size:13px;color:var(--muted)}
.srcpick__rst{margin-left:auto;background:none;border:none;color:var(--muted);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
.srcpick__ok{background:var(--brand);color:#fff;border:none;border-radius:999px;padding:9px 20px;font:inherit;font-size:13px;font-weight:700;cursor:pointer}
/* Дабл-рейндж: одна линия, два ползунка, заливка между ними */
.bflt__dr{margin-bottom:13px}
.bflt__dr:last-of-type{margin-bottom:0}
.bflt__drh{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.bflt__drh span:first-child{font-size:11px;color:var(--ink-soft);font-weight:600}
.bflt__drv{font-size:10.5px;font-weight:700;color:#0F6E56;background:#EAF3DE;border-radius:99px;padding:2px 9px;white-space:nowrap}
/* Пропорциональные ширины блоков фильтра (6-колоночный грид попапа, см. .bflt__panel выше):
   широкие — где много чипов (менеджеры/источник), узкие — где 2-3 коротких варианта */
.bflt__g--s2{grid-column:span 2}.bflt__g--s3{grid-column:span 2}.bflt__g--s4{grid-column:span 3}.bflt__g--s6,.bflt__g--s8,.bflt__g--wide{grid-column:span 6}
@media (max-width:520px){.bflt__grid{grid-template-columns:1fr}.bflt__g--s2,.bflt__g--s3,.bflt__g--s4,.bflt__g--s6,.bflt__g--s8,.bflt__g--wide{grid-column:auto}}
.bflt__dr{width:100%}
.rng{position:relative;height:20px;display:flex;align-items:center;width:100%}
.rng__track{position:absolute;left:0;right:0;height:5px;border-radius:99px;background:var(--line)}
.rng__fill{position:absolute;height:5px;border-radius:99px;background:#1D9E75}
.rng__in{position:absolute;left:0;right:0;width:100%;margin:0;height:20px;background:none;pointer-events:none;-webkit-appearance:none;appearance:none}
.rng__in::-webkit-slider-runnable-track{background:none;height:20px}
.rng__in::-moz-range-track{background:none;height:20px}
.rng__in::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;pointer-events:auto;width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid #1D9E75;box-shadow:0 1px 3px rgba(0,0,0,.22);cursor:pointer}
.rng__in::-moz-range-thumb{pointer-events:auto;width:16px;height:16px;border:2px solid #1D9E75;border-radius:50%;background:#fff;cursor:pointer}
#fltSrcList{max-height:108px;overflow:auto;align-content:flex-start}
.bflt__dicts{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);border-radius:999px;padding:6px 13px;font:inherit;font-size:12px;font-weight:600;cursor:pointer}
.bflt__dicts svg{width:13px;height:13px}
.bflt__dicts:hover{border-color:var(--brand);color:var(--brand)}
/* Пикер дилеров и их менеджеров */
.dp__list{max-height:52vh;overflow:auto;margin-top:6px}
.dp__deal{border:1px solid var(--line);border-radius:10px;padding:9px 11px;margin-top:8px}
.dp__deal.open{border-color:#85B7EB;background:color-mix(in srgb,#185FA5 4%,transparent)}
.dp__h{display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer}
.dp__h b{font-size:13px;font-weight:600}
.dp__co{font-size:11px;color:var(--muted)}
.dp__hr{display:inline-flex;align-items:center;gap:6px}
.dp__sel{font-size:11px;color:#185FA5;font-weight:700}
.dp__chev svg{width:14px;height:14px;color:var(--muted);transition:transform .15s}
.dp__deal.open .dp__chev svg{transform:rotate(180deg)}
.dp__tags{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:7px}
.dp__tag{font-size:10px;padding:2px 8px;border-radius:99px;background:#FAEEDA;color:#854F0B;display:inline-flex;align-items:center;gap:4px}
.dp__tag i{cursor:pointer;font-style:normal;opacity:.6}
.dp__tag i:hover{opacity:1}
.dp__addt,.dp__all{font-size:10.5px;border:1px dashed var(--line);background:none;color:var(--muted);border-radius:99px;padding:2px 9px;cursor:pointer}
.dp__addt:hover,.dp__all:hover{border-color:var(--brand);color:var(--brand)}
.dp__mgr{padding:5px 0 0;font-size:13px}
.dp__mgr label{display:flex;align-items:center;gap:8px;cursor:pointer}
.dp__role{color:var(--muted);font-size:11px}
.bfilter{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);
  color:var(--ink-soft);border-radius:999px;padding:7px 14px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:.15s}
.bfilter svg{width:15px;height:15px}
.bfilter i{font-style:normal;font-weight:800;font-size:11px;background:var(--surface-2);color:var(--muted);border-radius:999px;padding:1px 6px}
.bfilter:hover{border-color:var(--accent);color:var(--accent)}
.bfilter.is-active{background:var(--accent);border-color:var(--accent);color:#fff}
.bfilter.is-active i{background:rgba(255,255,255,.26);color:#fff}
/* «Просроченные» — семантика опоздания = красный (как чип даты is-over на карточке) */
.bfilter--over i{background:color-mix(in srgb, var(--down) 14%, transparent);color:var(--down)}
.bfilter--over:hover{border-color:var(--down);color:var(--down)}
.bfilter--over.is-active{background:var(--down);border-color:var(--down);color:#fff}
.bfilter--over.is-active i{background:rgba(255,255,255,.26);color:#fff}
/* «Нужно действие» — карточки, где процесс ждёт менеджера (cardActionNeed) */
.bfilter--act i{background:color-mix(in srgb, #f59e0b 18%, transparent);color:#b45309}
.bfilter--act:hover{border-color:#f59e0b;color:#b45309}
.bfilter--act.is-active{background:#f59e0b;border-color:#f59e0b;color:#fff}
.bfilter--act.is-active i{background:rgba(255,255,255,.26);color:#fff}
/* «Неотвеченные» — ждут НАШЕГО ответа в беседе кабинета (cardChatUnanswered, 2026-08-18);
   синий, чтобы не спорить с янтарным «Нужно действие»: это разные очереди работы */
.bfilter--msg i{background:color-mix(in srgb, #0ea5e9 18%, transparent);color:#0369a1}
.bfilter--msg:hover{border-color:#0ea5e9;color:#0369a1}
.bfilter--msg.is-active{background:#0ea5e9;border-color:#0ea5e9;color:#fff}
.bfilter--msg.is-active i{background:rgba(255,255,255,.26);color:#fff}
/* Кнопка «Ответ не требуется» в шапке чата заказа и беседа ПОЗИЦИИ в составе заказа */
.supdcmt__noreply{color:#0369a1}
.supov__itchat{display:inline-flex;align-items:center;gap:4px;margin:0 6px;padding:3px 6px;border:1px solid var(--line);
  border-radius:7px;background:var(--surface);color:var(--muted);cursor:pointer}
.supov__itchat svg{width:13px;height:13px}
.supov__itchat:hover{border-color:#0ea5e9;color:#0369a1}
.supov__itchat.is-wait{border-color:#0ea5e9;color:#0369a1;background:color-mix(in srgb,#0ea5e9 8%,var(--surface))}
/* Диапазоны дат — каждый своим цветом (палитра сайта): сегодня — янтарный, неделя — синий, месяц — фиолетовый */
.bfilter--today i{background:color-mix(in srgb,#f59e0b 14%,transparent);color:#f59e0b}
.bfilter--today:hover{border-color:#f59e0b;color:#f59e0b}
.bfilter--today.is-active{background:#f59e0b;border-color:#f59e0b;color:#fff}
.bfilter--today.is-active i{background:rgba(255,255,255,.26);color:#fff}
.bfilter--week i{background:color-mix(in srgb,#2f6df0 14%,transparent);color:#2f6df0}
.bfilter--week:hover{border-color:#2f6df0;color:#2f6df0}
.bfilter--week.is-active{background:#2f6df0;border-color:#2f6df0;color:#fff}
.bfilter--week.is-active i{background:rgba(255,255,255,.26);color:#fff}
.bfilter--month i{background:color-mix(in srgb,#7c5cff 14%,transparent);color:#7c5cff}
.bfilter--month:hover{border-color:#7c5cff;color:#7c5cff}
.bfilter--month.is-active{background:#7c5cff;border-color:#7c5cff;color:#fff}
.bfilter--month.is-active i{background:rgba(255,255,255,.26);color:#fff}
/* ============================================================
   ДОСКА PRO — пульс, маршрут груза, застой, горящие этапы, физика
   ============================================================ */
/* «Сейчас смотрят доску» — стопка аватаров онлайн-сотрудников рядом с названием */
.bview{display:inline-flex;align-items:center;gap:7px;align-self:center;color:var(--muted);font-size:11.5px;font-weight:600;white-space:nowrap}
.bview>svg{width:15px;height:15px;color:var(--up);flex:none}
.bview__stack{display:inline-flex;align-items:center}
.bview__a,.bview__more{margin-left:-7px}
.bview__a:first-child{margin-left:0}
.bview__more{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;font-size:9px;font-weight:800;
  border-radius:999px;background:var(--surface-2);color:var(--muted);box-shadow:0 0 0 2px var(--surface)}

/* Пульс доски — белая «приборная» карточка: сводка + тепловая полоска этапов */
.pulse{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:13px 15px;margin:12px 2px 0}
.pulse__head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pulse__ic{display:grid;place-items:center;color:var(--brand);flex:none}
.pulse__ic svg{width:16px;height:16px}
.pulse__title{font-size:13px;font-weight:800;color:var(--ink);letter-spacing:.2px}
/* Охват счёта всего пульса («мои» / «мои и совместные» / «по фильтру участия»):
   одна метка на пять метрик — см. находку беты №10 */
.pulse__scope{font-size:11px;font-weight:700;color:var(--muted);background:var(--surface-2);border:1px solid var(--line);border-radius:20px;padding:1px 8px;white-space:nowrap}
/* Чип очереди за дневными лидами (кнопка + счётчик) у «Пульса доски» sales */
.qchip{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap}
.qchip__count{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;color:var(--muted)}
.qchip__count svg{width:14px;height:14px}
.qchip__count b{color:var(--ink);font-weight:800}
.qchip__btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:8px;padding:5px 11px;font-size:12px;font-weight:700;cursor:pointer;transition:background .12s,border-color .12s}
.qchip__btn svg{width:15px;height:15px}
.qchip__btn:hover:not(:disabled){border-color:var(--brand);background:var(--surface-2)}
.qchip__btn.is-in{border-color:var(--brand);color:var(--brand)}
.qchip__btn:disabled{opacity:.5;cursor:not-allowed}
/* «Открыть табель» рядом с запертой кнопкой очереди: путь исправить причину (бета №14) */
.qchip__tslink{font-size:11.5px;font-weight:600;color:var(--brand);background:none;border:0;padding:0 2px;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.pulse__worst{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;color:var(--muted)}
.pulse__worst.is-hot{color:var(--down)}
.pulse__worst svg{width:13px;height:13px}
.pulse__metrics{display:flex;gap:10px;flex-wrap:wrap;margin-top:11px}
.pmetric{flex:1;min-width:130px;background:var(--surface-2);border-radius:var(--r-sm);padding:8px 12px;display:flex;flex-direction:column;gap:2px}
.pmetric__l{font-size:10.5px;color:var(--muted);font-weight:600}
.pmetric__v{font-size:16px;font-weight:800;color:var(--ink);line-height:1.1}
.pmetric.is-bad .pmetric__v{color:var(--down)}
.pmetric.is-warn .pmetric__v{color:#c47700}
.pmetric__n{display:block;font-size:10.5px;font-weight:700;color:#c47700;line-height:1.2;margin-top:1px}
/* Метрика-фильтр (вкладка «Аналитика», Task 3): кликабельная плитка + подсветка включения */
.pmetric.is-click{cursor:pointer;text-align:left;border-color:var(--line);font:inherit}
.pmetric.is-click:hover{border-color:var(--brand)}
.pmetric.is-on{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 10%,var(--surface))}
.pmetric__of{display:block;font-size:10px;font-weight:600;color:var(--muted)}
/* тепловая полоска: высота столбика — деньги на этапе, цвет — застой, клик — прыжок */
.pulse__strip{display:flex;align-items:flex-end;gap:3px;height:56px;margin-top:13px}
.pseg{flex:1;min-width:0;height:100%;display:flex;align-items:flex-end;border:0;background:none;padding:0;cursor:pointer;border-radius:4px 4px 0 0}
.pseg__bar{width:100%;height:var(--h,8%);border-radius:4px 4px 0 0;transition:filter .15s,transform .15s;transform-origin:bottom}
.pseg--calm .pseg__bar{background:color-mix(in srgb, var(--ink) 15%, transparent)}
.pseg--warm .pseg__bar{background:#e08600}
.pseg--hot  .pseg__bar{background:var(--down)}
.pseg:hover .pseg__bar{filter:brightness(1.08);transform:scaleY(1.05)}
.pseg:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
/* Полоса «пульса» НАД колонкой (высота = деньги этапа, цвет = застой) — совпадает со своей колонкой */
.col__pulse{height:24px;display:flex;align-items:flex-end;padding:0 1px;margin:0 0 5px}
.col__pulse .pseg__bar{width:100%}
.pulse__legend{margin:9px 0 0;font-size:10.5px;color:var(--muted)}
/* компактная свёрнутая строка + кнопка-стрелка (перенос «Пульса» наверх, сворачивание по клику) */
.pulse__compact{display:none;align-items:center;gap:5px 15px;flex-wrap:wrap}
.pcm{font-size:12px;color:var(--muted);font-weight:600;white-space:nowrap}
.pcm b{color:var(--ink);font-weight:800;margin-left:3px}
.pcm.is-bad b{color:var(--down)}
.pcm.is-warn b{color:#c47700}
.pulse__toggle{margin-left:8px;flex:none;border:0;background:none;color:var(--muted);cursor:pointer;display:grid;place-items:center;padding:3px;border-radius:7px;transition:.15s}
.pulse__toggle:hover{color:var(--brand);background:color-mix(in srgb, var(--brand) 9%, transparent)}
.pulse__toggle svg{width:15px;height:15px;transform:rotate(180deg);transition:transform .18s}
.pulse.is-collapsed .pulse__toggle svg{transform:rotate(0)}
.pulse.is-collapsed{padding-top:11px;padding-bottom:11px}
.pulse.is-collapsed .pulse__metrics,.pulse.is-collapsed .pulse__strip,.pulse.is-collapsed .pulse__legend,.pulse.is-collapsed .pulse__worst{display:none}
.pulse.is-collapsed .pulse__compact{display:flex;margin-right:auto}

/* Горящий этап (есть просрочка) — красный ореол точки + счётчик в шапке столбца */
.col__hgr{margin-left:auto;display:flex;align-items:center;gap:6px}
.col__hgr .col__n{margin-left:0}
.col__over{display:inline-flex;align-items:center;gap:2px;font-size:10px;font-weight:800;color:#fff;
  background:var(--down);border-radius:999px;padding:2px 7px;box-shadow:0 1px 4px color-mix(in srgb, var(--down) 35%, transparent)}
.col__over svg{width:11px;height:11px}
.col--hot .col__dot{background:var(--down);animation:hotpulse 1.7s ease-out infinite}
@keyframes hotpulse{0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--down) 45%, transparent)}100%{box-shadow:0 0 0 7px transparent}}

/* Маршрут груза на карточке (производство → в пути → таможня → склад) */
.brt{display:flex;align-items:center;margin-top:9px}
.brt__seg{flex:1;height:2px;background:var(--line);margin:0 2px;border-radius:2px}
.brt__seg.is-done{background:var(--tone)}
.brt__n{width:19px;height:19px;flex:none;display:grid;place-items:center;color:var(--muted);border-radius:50%}
.brt__n svg{width:13px;height:13px}
.brt__n.is-done{color:var(--tone)}
.brt__n.is-cur{color:var(--tone);background:color-mix(in srgb, var(--tone) 15%, transparent);box-shadow:0 0 0 1.5px color-mix(in srgb, var(--tone) 40%, transparent)}

/* Чип застоя: сколько дней карточка стоит на этапе (цвет растёт с задержкой) */
.bstag{display:inline-flex;align-items:center;gap:3px;font-size:10px;font-weight:700;white-space:nowrap;
  padding:2px 7px;border-radius:999px;background:var(--surface-2);color:var(--muted)}
.bstag svg{width:10px;height:10px}
.bstag.is-aging{background:color-mix(in srgb,#e08600 15%,transparent);color:#b06a00}
.bstag.is-stuck{background:color-mix(in srgb, var(--down) 14%, transparent);color:var(--down)}

/* Премиум-физика переноса: наклон источника при драге, «пружинка» при приземлении, свайп */
.bcard{transition:border-color .15s,box-shadow .15s,transform .2s cubic-bezier(.34,1.56,.64,1)}
.bcard.is-drag{opacity:.5;transform:rotate(-2.5deg) scale(1.02);box-shadow:0 12px 26px rgba(16,24,40,.18)}
.bcard.is-swipe{transition:none;cursor:grabbing;z-index:5;box-shadow:0 10px 24px rgba(16,24,40,.16)}
.bcard.just-moved{animation:cardland .7s cubic-bezier(.34,1.56,.64,1)}
@keyframes cardland{
  0%{transform:scale(.9);background:color-mix(in srgb, var(--tone) 13%, var(--surface))}
  55%{transform:scale(1.04)}
  100%{transform:scale(1);background:var(--surface)}
}
@media (max-width:560px){
  .bview__t{display:none}
  .pmetric{min-width:calc(50% - 5px)}
}

/* ============================================================
   ДОСКА PRO+ — голосовое управление, мини-лента, цикл карточки
   ============================================================ */
/* Голосовая команда доской (кнопка в тулбаре; при записи — пульсация) */
.board__voice{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);font:inherit;font-size:13px;font-weight:600;
  cursor:pointer;white-space:nowrap;transition:.15s;touch-action:none}
.board__voice svg{width:16px;height:16px}
.board__voice:hover{border-color:var(--brand);color:var(--brand)}
.board__voice.is-rec{background:var(--brand);border-color:var(--brand);color:#fff;animation:micpulse 1.1s ease-out infinite}
.board__voice.is-rec .board__voice-t{max-width:240px}
/* кнопка «Заполнить демо» (только директор) */
.board__demofill{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;border-radius:var(--r-sm);
  border:1px dashed var(--line);background:var(--surface);color:var(--muted);font:inherit;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;transition:.15s}
.board__demofill svg{width:16px;height:16px}
.board__demofill:hover{border-color:var(--brand);color:var(--brand)}
/* Колокольчик мини-ленты + счётчик событий */
.board__bell{position:relative;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;flex:none;
  border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);border-radius:var(--r-sm);cursor:pointer;transition:.15s}
.board__bell svg{width:17px;height:17px}
.board__bell:hover{border-color:var(--brand);color:var(--brand)}
.board__bell-n{position:absolute;top:-6px;right:-6px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;
  background:var(--brand);color:#fff;font-size:10px;font-weight:800;display:grid;place-items:center;box-shadow:0 0 0 2px var(--surface)}

/* Мини-лента доски — выезжающая панель справа + затемнение */
.bfeed-ov{position:fixed;inset:0;background:rgba(16,16,16,.34);z-index:60}
.bfeed{position:fixed;top:0;right:0;bottom:0;width:min(380px,92vw);z-index:61;background:var(--surface);
  border-left:1px solid var(--line);box-shadow:-12px 0 40px rgba(16,24,40,.16);display:flex;flex-direction:column;
  transform:translateX(8px);opacity:0;transition:transform .22s ease, opacity .22s ease}
/* КРИТИЧНО: .bfeed{display:flex} перебивал атрибут [hidden] (стили автора > UA),
   и невидимая (opacity:0) панель шириной 380px висела справа во всю высоту, ПЕРЕХВАТЫВАЯ
   все клики/перетаскивания в правой части доски. Явно прячем скрытую панель. */
.bfeed[hidden]{display:none !important}
.bfeed:not(.is-open){pointer-events:none}
.bfeed-ov[hidden]{display:none !important}
.bfeed.is-open{transform:translateX(0);opacity:1;pointer-events:auto}
.bfeed__head{display:flex;align-items:center;gap:9px;padding:16px 18px;border-bottom:1px solid var(--line);font-size:15px;font-weight:800;color:var(--ink)}
.bfeed__head svg{width:18px;height:18px;color:var(--brand)}
.bfeed__close{margin-left:auto;display:grid;place-items:center;width:30px;height:30px;border:0;background:none;border-radius:8px;color:var(--muted);cursor:pointer}
.bfeed__close svg{width:16px;height:16px}
.bfeed__close:hover{background:var(--surface-2);color:var(--ink)}
.bfeed__list{flex:1;overflow-y:auto;padding:6px 0}
.bfeed__row{display:flex;gap:10px;padding:9px 18px;align-items:flex-start}
.bfeed__row+.bfeed__row{border-top:1px solid var(--line)}
.bfeed__main{min-width:0}
.bfeed__txt{margin:0;font-size:12.5px;line-height:1.45;color:var(--ink)}
.bfeed__txt b{font-weight:700}
.bfeed__item{color:var(--ink-soft)}
.bfeed__ago{font-size:11px;color:var(--muted)}
.bfeed__empty{padding:24px 18px;text-align:center;color:var(--muted);font-size:13px}
.bfeed__all{margin:10px 16px 16px;display:inline-flex;align-items:center;justify-content:center;gap:7px;height:40px;
  border:1px solid var(--line);background:var(--surface-2);color:var(--ink);border-radius:var(--r-sm);font:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:.15s}
.bfeed__all svg{width:16px;height:16px}
.bfeed__all:hover{border-color:var(--brand);color:var(--brand)}

/* ── ПРИСТЫКОВАННАЯ ЛЕНТА ДОСКИ «Заказы поставщикам» (2026-08-12) ────────────────────
   Просьба владельца: история событий видна СРАЗУ, справа, развёрнутым списком — и не
   перекрывает раскрытую карточку. Отсюда два отличия от выдвижной .bfeed выше:
     · панель живёт В ПОТОКЕ (грид «работа | лента», как .supwork в кабинете), а не
       фиксированной шторкой поверх страницы;
     · z-index НИЖЕ модалки карточки (50). Шторка висела на 61 и раскрытый заказ собой
       закрывала — ровно то, чего просили избежать.
   position:sticky держит ленту на месте при вертикальной прокрутке страницы;
   горизонтальная прокрутка доски живёт внутри .board__scroll и ленты не касается —
   «вне зависимости от положения канбана». */
.bwork{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:start}
.bwork>.board__scrollwrap{min-width:0}
/* ⚠️ СЕЛЕКТОР ДВОЙНОЙ (.bfeed.bfeed--dock), и это не украшение. Выше по файлу живёт
   `.bfeed:not(.is-open){pointer-events:none}` — правило выдвижной шторки, и его вес (0,2,0)
   БОЛЬШЕ одиночного класса (0,1,0). Пристыкованная панель из-за этого не принимала ни
   кликов, ни колеса мыши: кнопки на месте, но мёртвые, и список не прокручивался
   (поймано на проде 13.08.2026). В разметке панель дополнительно несёт .is-open — так
   правило не применяется вовсе, а двойной селектор страхует, если класс потеряется. */
.bfeed.bfeed--dock{position:sticky;top:96px;inset:auto;width:340px;max-height:calc(100vh - 130px);
  z-index:1;display:flex;flex-direction:column;transform:none;opacity:1;pointer-events:auto;
  border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:none}
/* min-height:0 — без него flex-элемент не сжимается ниже своего содержимого, список
   распирает панель изнутри и прокрутки НЕТ (та же строчка есть у ленты кабинета) */
.bfeed--dock .bfeed__list{flex:1;min-height:0;overflow-y:auto}
.bfeed--dock .bfeed__head{padding:12px 14px;font-size:14px}
.bfeed--dock .bfeed__head svg{width:16px;height:16px}
.bfeed--dock .bfeed__ref{margin-left:auto;display:grid;place-items:center;width:28px;height:28px;border:0;
  background:var(--surface-2);border-radius:8px;color:var(--muted);cursor:pointer;transition:.15s}
.bfeed--dock .bfeed__ref svg{width:14px;height:14px}
.bfeed--dock .bfeed__ref:hover{color:var(--ink)}
.bfeed--dock .bfeed__close{margin-left:6px}
.bfeed--dock .bfeed__row{padding:8px 14px}
.bfeed--dock .bfeed__all{margin:8px 14px 12px;height:36px;font-size:12.5px}
/* «событие из кабинета»: чип стороны «завод/КРОНОС». С 2026-08-15 лента кабинета носит
   эти же классы, так что пара цветов тут одна на оба места (свой .supfeed__side удалён). */
.bfeed__side{display:inline-block;font-weight:700;border-radius:999px;padding:1px 7px;font-size:10px;vertical-align:1px}
.bfeed__side--us{background:color-mix(in srgb,var(--brand) 14%,transparent);color:var(--brand)}
.bfeed__side--sup{background:color-mix(in srgb,#0ea5e9 16%,transparent);color:#0284c7}
.bfeed__row.is-open{cursor:pointer}
.bfeed__row.is-open:hover{background:var(--surface-2)}
.bfeed__warn{margin:0;padding:8px 14px;font-size:11.5px;line-height:1.4;color:var(--muted);
  background:var(--surface-2);border-bottom:1px solid var(--line);display:flex;gap:6px;align-items:flex-start}
.bfeed__warn svg{width:13px;height:13px;flex:none;margin-top:2px}
/* свёрнутая — корешок-кнопка. ОДИН набор правил на доску и на кабинет (2026-08-15):
   раньше у кабинета была своя копия этих же правил под .supfeed__peek. */
.bwork .bfeed__peek,.supwork .bfeed__peek{position:sticky;top:96px;display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:12px 8px;border:1px solid var(--line);border-radius:14px;background:var(--surface);
  color:var(--muted);font:inherit;font-size:12px;font-weight:700;cursor:pointer;transition:.15s}
.bwork .bfeed__peek:hover,.supwork .bfeed__peek:hover{color:var(--ink);border-color:var(--muted)}
.bwork .bfeed__peek span,.supwork .bfeed__peek span{writing-mode:vertical-rl;letter-spacing:.06em}
.bwork .bfeed__peek svg,.supwork .bfeed__peek svg{width:16px;height:16px}
/* Развёрнутый канбан: плита уходит в position:fixed, поэтому лента тоже — иначе она
   осталась бы в потоке ПОД плитой. Плита ужимается слева от ленты, обе под модалкой. */
.bwork.is-fs>.board__scrollwrap.is-fs{right:calc(var(--bfs-gap,20px) + 352px)}
.bwork.is-fs .bfeed--dock{position:fixed;top:var(--bfs-gap,20px);right:var(--bfs-gap,20px);
  bottom:var(--bfs-gap,20px);max-height:none;z-index:46}
.bwork.is-fs .bfeed__peek{position:fixed;top:var(--bfs-gap,20px);right:var(--bfs-gap,20px);z-index:46}
.bwork.is-fs:not(.is-feedopen)>.board__scrollwrap.is-fs{right:calc(var(--bfs-gap,20px) + 56px)}

/* Тост голосовой команды (внизу по центру) */
.btoast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:70;max-width:90vw;
  display:inline-flex;align-items:center;gap:7px;padding:11px 18px;border-radius:999px;font-size:13.5px;font-weight:700;
  box-shadow:0 10px 30px rgba(16,24,40,.22);animation:btoastin .25s ease}
.btoast svg{width:16px;height:16px;flex:none}
.btoast--ok{background:var(--up);color:#fff}
.btoast--bad{background:#33240c;color:#ffd9a8;border:1px solid #6b4a16}
.btoast i{font-style:italic;opacity:.85}
.btoast__undo{margin-left:4px;padding:3px 11px;border:1px solid rgba(255,255,255,.55);background:rgba(255,255,255,.14);
  color:#fff;font:inherit;font-weight:700;border-radius:999px;cursor:pointer;transition:.15s}
.btoast__undo:hover{background:#fff;color:var(--up)}
.btoast.is-out{opacity:0;transition:opacity .4s ease}
@keyframes btoastin{0%{transform:translate(-50%,12px);opacity:0}100%{transform:translate(-50%,0);opacity:1}}

/* Общий цикл + разбивка по этапам в карточке */
.cdet__cycle{margin:4px 0 12px;padding:11px 13px;background:var(--surface-2);border-radius:var(--r-sm)}
.cdet__cyclehead{font-size:13px;color:var(--ink-soft);display:flex;align-items:center;gap:6px;flex-wrap:wrap;cursor:pointer;list-style:none;user-select:none}
.cdet__cyclehead::-webkit-details-marker{display:none}
.cdet__cyclehead::after{content:"";width:7px;height:7px;margin-left:auto;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(-45deg);transition:transform .15s}
.cdet__cycle[open] .cdet__cyclehead::after{transform:rotate(45deg)}
.cdet__cyclehead svg{width:14px;height:14px;color:var(--brand)}
.cdet__cyclehead b{color:var(--ink);font-weight:800;font-size:14px}
.cdet__cyclehead span{color:var(--muted);font-size:11.5px}
.cdet__path{display:flex;flex-direction:column;gap:1px;margin-top:9px}
.cdet__pstage{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 10px;background:var(--surface);border-radius:8px;font-size:12.5px}
.cdet__pstage.is-cur{box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--brand) 45%, transparent)}
.cdet__pname{color:var(--ink);font-weight:600}
.cdet__pstage.is-cur .cdet__pname{color:var(--brand)}
.cdet__pdays{color:var(--muted);font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}

/* Замыливание краёв у горизонтально-скроллящихся блоков (.edgefade) —
   маска появляется только там, где ещё есть скрытый контент (классы ставит JS). */
.edgefade.is-fade-l:not(.is-fade-r){-webkit-mask-image:linear-gradient(to right,transparent,#000 38px);mask-image:linear-gradient(to right,transparent,#000 38px)}
.edgefade.is-fade-r:not(.is-fade-l){-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 38px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 38px),transparent)}
.edgefade.is-fade-l.is-fade-r{-webkit-mask-image:linear-gradient(to right,transparent,#000 38px,#000 calc(100% - 38px),transparent);mask-image:linear-gradient(to right,transparent,#000 38px,#000 calc(100% - 38px),transparent)}

/* ============================================================
   СПЛОШНОЙ КАНБАН КОМПАНИИ (внизу главной) — все доски в один ряд
   ============================================================ */
.megablock{margin-top:32px}
.board__filters--mega{margin:0;--accent:var(--brand)}   /* фильтры — ОРАНЖЕВЫЕ (действие), не цвет отдела */

/* Поиск по всем канбанам ряда — строка с живым счётчиком «N из M» и стрелками
   (как поиск в Google Документах). Пилюля в одну линию с фильтрами. */
.msearch{position:relative;display:inline-flex;align-items:center;gap:2px;border:1px solid var(--line);background:var(--surface);
  border-radius:999px;padding:0 6px 0 12px;height:34px;transition:border-color .15s, box-shadow .15s}
.msearch:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 12%, transparent)}
.msearch__ic{display:grid;place-items:center;color:var(--muted);flex:none}
.msearch__ic svg{width:15px;height:15px}
.msearch__in{border:0;outline:0;background:none;font:inherit;font-size:13px;font-weight:600;color:var(--ink);
  width:160px;padding:0 4px;transition:width .2s}
.msearch:focus-within .msearch__in{width:200px}
.msearch__in::placeholder{color:var(--muted);font-weight:500}
.msearch__count{font-size:12px;font-weight:700;color:var(--muted);white-space:nowrap;padding:0 4px;flex:none;font-variant-numeric:tabular-nums}
.msearch__count.is-zero{color:var(--down)}
.msearch__navs{display:none;align-items:center;gap:1px;border-left:1px solid var(--line);padding-left:4px;margin-left:2px}
.msearch__nav,.msearch__clear{display:grid;place-items:center;width:24px;height:24px;border:0;background:none;
  border-radius:8px;color:var(--ink-soft);cursor:pointer;padding:0;transition:.15s}
.msearch__nav:hover,.msearch__clear:hover{background:var(--surface-2);color:var(--brand)}
.msearch__nav svg,.msearch__clear svg{width:14px;height:14px}
.msearch__nav[data-mnav="-1"] svg{transform:rotate(180deg)}
.msearch__clear{display:none}
.msearch.has-q .msearch__navs{display:inline-flex}
.msearch.has-q .msearch__clear{display:grid}
/* листание результатов в крупном поиске «Закупок» (контейнер не .msearch, но даёт те же ▲▼/счётчик) */
.purch-bigsearch.has-q .msearch__navs{display:inline-flex}
.purch-bigsearch.has-q .msearch__clear{display:grid}
.purch-bigsearch .msearch__count{padding:0 2px}
/* листание результатов в поиске «Заказов» (контейнер .suptools__search) */
#ordSearch.has-q .msearch__navs{display:inline-flex}
#ordSearch.has-q .msearch__clear{display:grid}
#ordSearch .msearch__navs{border-left:1px solid var(--line);padding-left:4px}
@media (max-width:560px){.msearch__in{width:118px}.msearch:focus-within .msearch__in{width:140px}}
/* живой список совпадений под строкой поиска доски — видно сразу, клик прыгает к карточке.
   ВЫПАДАШКА ВИСИТ `position:fixed` И НАВОДИТСЯ СКРИПТОМ (msearchPlace в app.js) — тот же
   приём, что у пикера справочника (k5PickPlace в pick.js, грабля 14 в docs/MOVES.md).
   Почему не absolute: строка поиска живёт внутри прокручиваемых и обрезающих предков (тулбар
   доски, тело модалки, панель кабинета) — список резался по overflow, половина найденного
   была не видна, а соседние чипы фильтров рисовались ПОВЕРХ него. Обрезку по overflow не
   лечит ни один z-index. Слой 1200 нужен поверх обычного интерфейса; при открытии шторки
   карточки кабинета (1198) портал поиска закрывается скриптом. Геометрию
   (top/left/width/max-height) ставит скрипт инлайном — здесь только рамка и потолок ширины. */
.msearch__drop{position:fixed;top:0;left:0;z-index:1200;min-width:250px;max-width:min(360px,calc(100vw - 16px));
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
  box-shadow:0 14px 36px rgba(16,24,40,.16);padding:6px;max-height:min(60vh,360px);overflow:auto}
/* шапка со счётчиком — сколько всего нашлось видно сразу, прилипает при прокрутке списка */
.msearch__found{position:sticky;top:-6px;z-index:1;display:flex;align-items:center;gap:6px;margin:-6px -6px 4px;
  padding:9px 12px;background:var(--surface);border-bottom:1px solid var(--line);
  border-radius:var(--r-sm) var(--r-sm) 0 0;font-size:12px;font-weight:600;color:var(--muted)}
.msearch__found svg{width:14px;height:14px;color:var(--muted);flex:none}
.msearch__found b{color:var(--brand);font-weight:800;font-size:13.5px;font-variant-numeric:tabular-nums}
.msearch__hit{display:flex;flex-direction:column;gap:1px;width:100%;text-align:left;border:0;background:none;
  cursor:pointer;padding:7px 9px;border-radius:10px;color:var(--ink);transition:background .12s}
.msearch__hit:hover{background:var(--surface-2)}
.msearch__hit.is-cur{background:color-mix(in srgb, var(--brand) 12%, transparent)}
.msearch__hit-t{font-size:13px;font-weight:600;line-height:1.25}
.msearch__hit-t mark{background:color-mix(in srgb, var(--brand) 26%, transparent);color:inherit;border-radius:3px;padding:0 1px}
.msearch__hit-m{font-size:11.5px;color:var(--muted);font-weight:500;line-height:1.2}
.msearch__more{font-size:11.5px;color:var(--muted);text-align:center;padding:6px 0 3px;font-weight:600}
.msearch__empty{display:flex;align-items:center;justify-content:center;gap:7px;color:var(--muted);
  font-size:12.5px;font-weight:600;padding:14px 6px}
.msearch__empty svg{width:15px;height:15px}
/* Правило «прижать к правому краю на телефоне» ушло 28.08.2026 вместе с absolute: левый
   край считает скрипт по рамке поля и сам не даёт списку выйти за экран. */
/* В кабинете поставщика список найденного длиннее и шире (стог теперь по ВСЕМ полям) — не
   даём выйти за экран телефона (2026-08-24). Селектор через data-ctx, а НЕ «.suppliers …»:
   узел выпадашки один на приложение и лежит в body, предков кабинета над ним нет. Свой слой
   ему больше не нужен — базовый .msearch__drop и так выше всего (см. комментарий выше). */
#msearchDrop[data-ctx="sup"]{max-width:calc(100vw - 24px)}
/* Заметки по закупкам — навигация по поиску: приглушаем соседей, кольцо текущей. */
.pn-list.is-searching .pncard{opacity:.4;transition:opacity .15s, box-shadow .15s}
.pn-list.is-searching .pncard.is-hit{opacity:1;box-shadow:0 0 0 1.5px color-mix(in srgb, var(--brand) 38%, transparent)}
.pn-list.is-searching .pncard.is-cur{box-shadow:0 0 0 2.5px var(--brand)}
.pn-search-wrap .msearch{display:flex;width:100%}
.pn-search-wrap .msearch__in{flex:1;width:auto}
.pn-search-wrap .msearch:focus-within .msearch__in{width:auto}

/* Подсветка совпадений (сплошной канбан И страница доски): найденные карточки —
   оранжевый контур, остальные приглушаются; текущее — плотное оранжевое кольцо. */
.board__scroll.is-searching .bcard{opacity:.35;transition:opacity .15s, box-shadow .15s}
.board__scroll.is-searching .bcard.is-hit{opacity:1;
  box-shadow:0 0 0 1.5px color-mix(in srgb, var(--brand) 38%, transparent)}
.board__scroll.is-searching .bcard.is-cur{box-shadow:0 0 0 2.5px var(--brand)}
/* navigate-поиск кабинета поставщика (строки .suptr / карточки .supkb__card — ничего не прячем, подсвечиваем) */
.suptable.is-searching .suptr{opacity:.32;transition:opacity .15s, box-shadow .15s}
.suptable.is-searching .suptr.is-hit{opacity:1}
.suptable.is-searching .suptr.is-cur{box-shadow:0 0 0 2.5px var(--brand);border-radius:var(--r-sm)}
.supkb.is-searching .supkb__card{opacity:.32;transition:opacity .15s, box-shadow .15s}
.supkb.is-searching .supkb__card.is-hit{opacity:1}
.supkb.is-searching .supkb__card.is-cur{box-shadow:0 0 0 2.5px var(--brand)}
/* Тот же поиск на ЖИВОМ виде кабинета (.supboard — единственный вид с 2026-08-12). Правил
   для него не было вовсе: initCardSearch честно ставил .is-hit/.is-cur и считал «N из M»,
   но на экране НИЧЕГО не менялось — поиск выглядел сломанным (найдено 2026-08-18).
   Контейнер тут скроллит колонки, поэтому приглушаем сами карточки, как на доске. */
.supboard.is-searching .bcard{opacity:.32;transition:opacity .15s, box-shadow .15s}
.supboard.is-searching .bcard.is-hit{opacity:1;
  box-shadow:0 0 0 1.5px color-mix(in srgb, var(--brand) 38%, transparent)}
.supboard.is-searching .bcard.is-cur{opacity:1;box-shadow:0 0 0 2.5px var(--brand)}
/* Навигация-поиск по списку команды (#users): те же визуальные правила, что и на доске, но для строк .urow */
.users .ulist.is-searching .urow[data-q]{opacity:.32;transition:opacity .15s, box-shadow .15s}
.users .ulist.is-searching .urow[data-q].is-hit{opacity:1;box-shadow:0 0 0 1.5px color-mix(in srgb, var(--brand) 38%, transparent)}
.users .ulist.is-searching .urow[data-q].is-cur{box-shadow:0 0 0 2.5px var(--brand)}

/* История изменений (NAVIGATE): подсветка совпавших строк, приглушение соседей,
   кольцо текущего. .chday/.chempty не прячем — только строки .chrow. */
.chcols.is-searching .chrow{opacity:.32;transition:opacity .15s, box-shadow .15s, border-color .15s}
.chcols.is-searching .chrow.is-hit{opacity:1;border-color:color-mix(in srgb, var(--brand) 38%, var(--line));
  box-shadow:0 0 0 1.5px color-mix(in srgb, var(--brand) 32%, transparent)}
.chcols.is-searching .chrow.is-cur{opacity:1;border-color:transparent;box-shadow:0 0 0 2.5px var(--brand)}
.chcols.is-searching .chrow.is-cur mark,.chcols.is-searching .chrow.is-hit mark{background:color-mix(in srgb, var(--brand) 24%, transparent);color:inherit;border-radius:3px;padding:0 1px}

/* Кнопка-микрофон (во всех поисках): зажать — говорить; запись = оранжевая
   пульсация. Прячется сама, если браузер не умеет распознавание речи. */
.micbtn{display:grid;place-items:center;width:26px;height:26px;border:0;background:none;border-radius:999px;
  color:var(--muted);cursor:pointer;flex:none;padding:0;transition:background .15s, color .15s;touch-action:none}
.micbtn:hover{background:var(--surface-2);color:var(--brand)}
.micbtn svg{width:15px;height:15px}
.micbtn.is-rec{background:var(--brand);color:#fff;animation:micpulse 1.1s ease-out infinite}
@keyframes micpulse{0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--brand) 45%, transparent)}100%{box-shadow:0 0 0 10px transparent}}
.micbtn--lg{width:32px;height:32px}
.micbtn--lg svg{width:18px;height:18px}
.hsearch__box .micbtn{margin-left:2px}
.megascroll{min-height:0;margin-top:14px}
.mega{display:flex;align-items:stretch;width:max-content;gap:0;padding:2px 0}
/* группа = одна доска; разделитель отделов — вертикальная линия справа */
.mega__board{display:flex;flex-direction:column;flex:none;padding:0 16px;position:relative}
.mega__board:not(:last-child)::after{content:"";position:absolute;right:0;top:8px;bottom:8px;width:1px;
  background:repeating-linear-gradient(to bottom, var(--line) 0 6px, transparent 6px 12px)}
.mega__bhead{display:flex;align-items:center;gap:10px;padding:4px 4px 12px;border:none;background:none;cursor:pointer;text-align:left}
.mega__bic{width:34px;height:34px;border-radius:10px;flex:none;display:grid;place-items:center;
  background:color-mix(in srgb, var(--accent, var(--brand)) 14%, transparent);color:var(--accent, var(--brand))}
.mega__bic svg{width:18px;height:18px}
.mega__btitle{display:flex;flex-direction:column;gap:1px;min-width:0}
.mega__bname{font-size:14px;font-weight:700;color:var(--ink);white-space:nowrap}
.mega__bdept{font-size:11px;font-weight:600;color:var(--muted)}
.mega__bhead:hover .mega__bname{color:var(--accent, var(--brand))}
.mega__bhead:hover .mega__bic{background:var(--accent, var(--brand));color:#fff}
.mega__cols{display:flex;gap:8px;align-items:stretch}
.megascroll .col{width:236px;max-height:min(56vh,520px)}
.megascroll .bcard{cursor:default}
/* доступна, но не собрана */
.mega__board--todo{min-width:230px}
.mega__todo{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;text-align:center;
  border:1px dashed var(--line);border-radius:var(--r);color:var(--muted);padding:28px 16px;margin-bottom:6px;min-height:200px}
.mega__todo svg{width:30px;height:30px;color:var(--line)}
.mega__todo p{margin:0;font-size:13px;font-weight:700;color:var(--ink-soft)}
.mega__todo span{font-size:11.5px}
/* НЕТ ДОСТУПА — узкая вертикальная плашка с названием + замком (стильно) */
.mega__locked{flex:none;width:54px;align-self:stretch;margin:0 6px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;border-radius:var(--r);border:1px solid var(--line);
  background:repeating-linear-gradient(135deg, var(--surface-2) 0 7px, var(--surface) 7px 14px)}
.mega__lockic{width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--surface);border:1px solid var(--line);color:var(--muted)}
.mega__lockic svg{width:15px;height:15px}
.mega__lockname{writing-mode:vertical-rl;transform:rotate(180deg);font-size:12px;font-weight:700;color:var(--ink-soft);
  white-space:nowrap;letter-spacing:.4px;max-height:60vh;overflow:hidden;text-overflow:ellipsis}
/* зелёные кнопки прокрутки сплошного канбана — внутри его области (не fixed, как у доски) */
.megawrap{position:relative}
.megawrap .board__arrow{position:absolute;top:50%;transform:translateY(-50%)}
.megawrap .board__arrow:active{transform:translateY(-50%) scale(.94)}
.megawrap .board__arrow--l{left:6px}
.megawrap .board__arrow--r{right:6px}

/* форма создания / деталь карточки */
.cform{display:flex;flex-direction:column;gap:11px}
.cform__group{display:flex;flex-direction:column;gap:11px;padding:13px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--surface)}
.cform__gh{font-size:11.5px;font-weight:700;letter-spacing:.02em;color:var(--ink-soft);text-transform:uppercase}
.msel{display:flex;flex-wrap:wrap;gap:6px}
.msel__chip{appearance:none;font:inherit;font-size:12px;padding:5px 11px;border-radius:99px;cursor:pointer;
  border:1px solid var(--line);background:var(--surface);color:var(--ink-soft)}
.msel__chip.is-on{background:#E6F1FB;border-color:#85B7EB;color:#185FA5;font-weight:600}
.cform__row{display:flex;flex-direction:column;gap:4px}
.cform__l{font-size:12px;font-weight:600;color:var(--ink-soft)}
.cform__l i{color:var(--down);font-style:normal}
.cform__row input,.cform__row select,.cform__row textarea{border:1px solid var(--line);background:var(--surface);
  border-radius:var(--r-sm);padding:9px 11px;font:inherit;font-size:13.5px;color:var(--ink);outline:none;width:100%}
.cform__row input:focus,.cform__row select:focus,.cform__row textarea:focus{border-color:var(--accent)}
.cform__hint{font-size:11px;color:var(--muted)}
/* Поле пароля с кнопками «Сгенерировать»/«Скопировать» (формы создания сотрудника) */
.cform__pw{display:flex;gap:6px;align-items:stretch}
.cform__pw input{flex:1;min-width:0}
.cform__pw button{flex:none;white-space:nowrap}
/* Плашка «номер уже занят» на форме создания лида (запрет дублей, docs/DEALS.md заход 1) */
.dupbox{border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px;display:flex;flex-direction:column;gap:6px;font-size:12.5px}
.dupbox--busy{border-color:#E0A28C;background:rgba(216,90,48,.07)}
.dupbox--lost{border-color:#E3C983;background:rgba(239,159,39,.09)}
/* информационная: клиент базы розницы, создание не блокируется (заход 3) */
.dupbox--retail{border-color:#C7B3E3;background:rgba(138,90,194,.07)}
.dupbox__t{font-weight:700;color:var(--ink)}
.dupbox__sub{color:var(--ink-soft)}
.dupbox__btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:2px}
.dupbox__btn{appearance:none;font:inherit;font-size:12.5px;padding:6px 12px;border-radius:8px;cursor:pointer;border:1px solid var(--line);background:var(--surface);color:var(--ink)}
.dupbox__btn:hover{border-color:var(--accent)}
.dupbox__btn--main{border-color:var(--brand);color:var(--brand);font-weight:600}
.dupbox__force{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--ink-soft);cursor:pointer}
.dupbox__force input{accent-color:var(--brand)}
.dupbox__reason{border:1px solid var(--line);border-radius:var(--r-sm);padding:7px 10px;font:inherit;font-size:12.5px;background:var(--surface);color:var(--ink)}
/* Сводная форма переноса (2026-08-11): мультивыбор обязательного поля — чипы-чекбоксы */
.mvf-chips{display:flex;flex-wrap:wrap;gap:6px}
.mvf-chip{display:inline-flex;align-items:center;gap:5px;font-size:12px;padding:4px 10px;border:1px solid var(--line);border-radius:999px;cursor:pointer;user-select:none;background:var(--surface)}
.mvf-chip:has(input:checked){border-color:var(--brand);color:var(--brand);font-weight:600}
.mvf-chip input{margin:0}
/* Строка-чекбокс (напр. «Забронировать товар» в диалоге кредита/лизинга, §1.4) */
.cform__row--inline{flex-direction:row;align-items:center;gap:8px;font-size:13px;color:var(--ink);cursor:pointer}
.cform__row--inline input[type=checkbox]{width:16px;height:16px;flex:none;accent-color:var(--brand);cursor:pointer}
.cform__row--inline small{font-size:11px}
/* Массовое переназначение ответственного (SALES_TRACKLIST §1.3, П.7) — список
   карточек-кандидатов с чекбоксами внутри cform-модалки */
.bra__list{display:flex;flex-direction:column;gap:2px;max-height:260px;overflow-y:auto;
  border:1px solid var(--line);border-radius:var(--r-sm);padding:6px 10px}
.bra__row{display:flex;align-items:center;gap:8px;padding:5px 2px;font-size:13px;color:var(--ink);cursor:pointer}
.bra__row--all{border-bottom:1px solid var(--line);padding-bottom:8px;margin-bottom:2px}
.bra__name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bra__col{flex:none;font-size:11.5px;color:var(--muted)}
.bra__empty{padding:10px 2px;font-size:13px;color:var(--muted)}
/* Пикер поставщика (этап «Согласование заказа с поставщиком», доска «Тест»):
   поиск + список карточек справочника с бейджем «есть/нет ЛК» */
.suppick{display:flex;flex-direction:column;gap:4px;max-height:300px;overflow:auto;margin-top:6px}
.suppick__q{width:100%;border:1px solid var(--line);background:var(--surface);border-radius:var(--r-sm);
  padding:9px 11px;font-size:13.5px;color:var(--ink)}
.suppick__item{display:flex;align-items:center;gap:9px;width:100%;text-align:left;cursor:pointer;
  border:1px solid var(--line);background:var(--surface);border-radius:var(--r-sm);padding:9px 11px}
.suppick__item:hover{border-color:color-mix(in srgb, var(--up) 45%, var(--line));background:var(--surface-2)}
.suppick__dot{flex:none;width:10px;height:10px;border-radius:50%;background:var(--supc, #888)}
.suppick__name{flex:1;min-width:0;font-size:13.5px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.suppick__name i{font-style:normal;color:var(--muted);font-size:12px}
.suppick__cab{flex:none;font-size:10.5px;font-weight:700;border-radius:999px;padding:2px 8px}
.suppick__cab.is-yes{color:var(--up);border:1px solid color-mix(in srgb, var(--up) 45%, transparent)}
.suppick__cab.is-no{color:var(--muted);border:1px solid var(--line)}
/* Readonly-поле (заполняется анализом закупок из 1С, не вводится руками) — вид как у
   отключённого input, но это просто <span>, не участвует в отправке формы. */
.cform__ro{display:block;border:1px solid var(--line);background:var(--surface-2);border-radius:var(--r-sm);
  padding:9px 11px;font-size:13.5px;color:var(--ink-soft)}
/* Поле-файл карточки (тип "file" в data.js): ссылка на приложенное + выбор нового.
   Загружается сразу при выборе, «Сохранить» его не касается. */
.cform__filewrap{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cform__filewrap input[type=file]{flex:1 1 180px;min-width:0;font-size:12.5px}
.cform__file{display:inline-flex;align-items:center;gap:5px;font-size:13px;color:var(--brand);
  text-decoration:none;white-space:nowrap}
.cform__file:hover{text-decoration:underline}
.cform__file svg{width:14px;height:14px}
/* Автозаполнение поставщика (закупки) — свой список вместо нативного <datalist>
   (тот ненадёжно всплывает внутри скроллящихся модалок в части браузеров) */
.cform__supwrap{position:relative}
.cform__suglist{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:60;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:0 8px 24px rgba(0,0,0,.12);
  max-height:220px;overflow-y:auto}
.cform__suglist button{display:block;width:100%;text-align:left;padding:8px 11px;background:none;border:0;
  font:inherit;font-size:13px;color:var(--ink);cursor:pointer}
.cform__suglist button:hover{background:var(--surface-2)}
.cform__suglist button small{color:var(--muted);font-size:11.5px;margin-left:4px}

/* ── ПИКЕР СПРАВОЧНИКА (public/pick.js, docs/ENTITIES.md) ─────────────────────────────
   Общий виджет выбора сущности в карточках досок: строка — имя, техметки, подпись наличия
   и чипы «где лежит». В отличие от .cform__suglist (одна строка текста) здесь у варианта
   ТРИ этажа: логист выбирает не название, а «что и где лежит». Только переменные темы. */
.pick{position:relative}
.pick__input{width:100%}
/* Крестик сброса внутри поля: выбранную позицию надо снимать одним нажатием, а не стирать
   текст посимвольно. Место под него — правый отступ поля, чтобы текст не заезжал под кнопку. */
.pick:has(.pick__clear:not([hidden])) .pick__input{padding-right:36px}
.pick__clear{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:28px;height:28px;
  display:grid;place-items:center;border:0;background:none;color:var(--muted);cursor:pointer;
  border-radius:8px;padding:0;transition:.13s}
.pick__clear svg{width:15px;height:15px}
.pick__clear:hover{color:var(--ink);background:var(--surface-2)}
.pick__clear[hidden]{display:none}
/* Список — FIXED, координаты ставит k5PickPlace (см. pick.js): у модалки три слоя с
   overflow (.modal__card / .modal__body / .twin), и absolute резался всеми тремя —
   выдачу было видно наполовину. z-index выше окна (--z-fab 1250 у плавающей кнопки,
   у .supdrawer 1200): выпадашка обязана быть над любым содержимым модалки. */
.pick__list{position:fixed;z-index:1300;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:0 14px 38px rgba(0,0,0,.22);
  max-height:340px;overflow-y:auto;min-width:280px}
/* Полосу прокрутки в выпадашке приглушаем: глобальная — фирменные 7px оранжевого, и в
   маленьком списке она читалась как элемент интерфейса, а не как скролл (идиома
   .mk-mlc__tiprows — там та же причина). */
.pick__list::-webkit-scrollbar{width:5px}
.pick__list::-webkit-scrollbar-thumb{background:var(--line-2,var(--line));border-radius:8px}
.pick__list{scrollbar-color:var(--line) transparent}
.pick__row{display:block;width:100%;text-align:left;padding:7px 11px;background:none;border:0;
  border-bottom:1px solid var(--line);font:inherit;color:var(--ink);cursor:pointer}
.pick__row:last-child{border-bottom:0}
.pick__row:hover,.pick__row.is-cur{background:var(--surface-2)}
.pick__nm{display:block;font-size:13px;font-weight:600;line-height:1.3}
.pick__meta{display:block;font-size:11px;color:var(--muted);margin-top:1px}
.pick__badges{display:flex;flex-wrap:wrap;gap:4px;align-items:center;margin-top:4px}
.pick__note{padding:8px 11px;font-size:12px;color:var(--muted)}
/* Подпись наличия — одна на весь портал (k5PickStockHtml). Цвета семантические: зелёный
   «есть», оранжевый «едет», красный «свободных нет», серый «не знаем». */
.pick__st{font-size:10.5px;font-weight:600;padding:1px 7px;border-radius:6px;white-space:nowrap}
.pick__st.is-ok{background:#E4F4EA;color:#0A7A3D}
.pick__st.is-way{background:#FAEEDA;color:#854F0B}
.pick__st.is-over{background:#FCEBEB;color:#A32D2D}
.pick__st.is-none{background:var(--surface-2);color:var(--muted)}
.pick__st.is-unk{background:var(--surface-2);color:var(--muted)}
/* Второе, тихое число рядом с главным (общий остаток, когда главным идёт склад рейса). */
.pick__st.is-dim{background:none;color:var(--muted);font-weight:500;padding:1px 2px}
/* «Заказ уже едет» — предупреждение при наполнении: половина заказа может быть в другой
   машине, и знать об этом надо ДО того, как положил вторую не туда. Цвет тот же, что у
   «в пути» (is-way): это про ту же дорогу, а третий язык цвета читался бы как новый статус. */
.pick__st--ship{background:#FAEEDA;color:#854F0B;white-space:normal}
.pick__whl{font-size:10px;color:var(--muted);align-self:center;margin-right:1px}
.pick__where{display:inline-flex;flex-wrap:wrap;gap:4px}
.pick__wh{font-size:10.5px;padding:1px 6px;border-radius:6px;background:#E6F1FB;color:#185FA5;white-space:nowrap}
.pick__wh b{font-weight:700}
.pick__wh.is-more{background:var(--surface-2);color:var(--muted)}
[data-theme="dark"] .pick__st.is-ok{background:#12301f;color:#5cc98b}
[data-theme="dark"] .pick__st.is-way{background:#33260f;color:#e0a445}
[data-theme="dark"] .pick__st.is-over{background:#331715;color:#ef8078}
[data-theme="dark"] .pick__wh{background:#16273a;color:#7db4e8}

/* Форма создания заявки на «Заказах поставщикам» (2026-08-17): три зоны — что закупаем,
   сводка по позиции (плитки от api/demand.php?nomstat=1), сама заявка. Только переменные
   темы — сайт живёт в светлой и тёмной; жёсткие цвета только у плашки-предупреждения,
   она копирует вид .dupbox--busy (та же роль: «внимание, но не запрет»). */
/* hidden у зоны-группы: .cform__group{display:flex} СИЛЬНЕЕ display:none из UA-стилей
   атрибута hidden — без этой строки зона сводки в режиме «нет в 1С» оставалась на экране. */
.pnew [hidden]{display:none}
.pnew__link{appearance:none;align-self:flex-start;padding:0;border:0;background:none;font:inherit;
  font-size:12px;color:var(--brand);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.pnew__link:hover{opacity:.8}
.pnew__empty{font-size:12.5px;color:var(--muted)}
.pnew__tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px}
.pnew__tile{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--surface-2)}
.pnew__tl{font-size:11px;color:var(--muted)}
.pnew__tv{font-size:16px;font-weight:700;color:var(--ink);line-height:1.2}
.pnew__warn{border:1px solid #E0A28C;background:rgba(216,90,48,.07);border-radius:var(--r-sm);
  padding:8px 11px;font-size:12.5px;color:var(--ink-soft)}
.pnew__rec{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px;color:var(--ink)}
.pnew__take{appearance:none;font:inherit;font-size:12.5px;padding:5px 11px;border-radius:8px;cursor:pointer;
  border:1px solid var(--brand);background:var(--surface);color:var(--brand);font-weight:600}
.pnew__take:hover{background:var(--surface-2)}
.pnew__sum{font-size:12.5px;color:var(--muted)}
.pnew__sum b{color:var(--ink);font-size:13.5px}
.cform__toggles{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;padding:4px 0 2px}
.cform__toggle{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-soft);cursor:pointer}
.cform__toggle input{width:16px;height:16px;accent-color:var(--accent);flex:none}
/* Нижняя панель действий — ЛИПКАЯ к низу модалки. Контент мягко «растворяется» в панель
   через градиент-фейд (без жёсткой линии); кнопки с глубиной и плавными состояниями. */
.cform__actions{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:10px;position:sticky;bottom:0;z-index:3;
  margin:18px -16px -16px;padding:14px 16px;background:var(--surface)}
.cform__actions::before{content:"";position:absolute;left:0;right:0;top:-22px;height:22px;pointer-events:none;
  background:linear-gradient(to top,var(--surface),transparent)}
.cform__cancel{border:1px solid var(--line);background:transparent;color:var(--ink-soft);border-radius:var(--r-sm);
  padding:9px 16px;font:inherit;font-weight:500;font-size:13px;cursor:pointer;
  transition:background .15s,border-color .15s,color .15s}
.cform__cancel:hover{background:var(--surface-2);border-color:var(--line);color:var(--ink)}
.cform__ok{border:none;background:var(--accent,var(--brand));color:#fff;border-radius:var(--r-sm);
  padding:10px 20px;font:inherit;font-weight:600;font-size:13px;cursor:pointer;
  box-shadow:0 2px 8px color-mix(in srgb,var(--accent,var(--brand)) 30%,transparent);
  transition:transform .12s,box-shadow .15s,filter .15s}
/* Заблокированная кнопка формы должна ВЫГЛЯДЕТЬ заблокированной: сводная форма переноса
   гасит «Перенести», пока сервер проверяет реквизиты контрагента (party_required), — без
   этого правила кнопка оставалась яркой и клики по ней выглядели как «ничего не работает». */
.cform__ok:disabled{opacity:.5;cursor:not-allowed;box-shadow:none;filter:grayscale(.35)}
.cform__ok:disabled:hover{transform:none}
.cform__ok:hover{filter:brightness(1.04);box-shadow:0 5px 16px color-mix(in srgb,var(--accent,var(--brand)) 42%,transparent)}
.cform__ok:active{transform:translateY(1px) scale(.99)}
/* Круглая icon-only кнопка в один ряд с cform__ok/cform__cancel (напр. «Стереть все цели» у
   mkOpenTargetEditor) — тот же минимальный стиль, только без текста и полностью округлая. */
.cform__icon-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;flex:none;
  border:1px solid var(--line);background:transparent;color:var(--muted);cursor:pointer;border-radius:50%;
  transition:background .15s,border-color .15s,color .15s;margin-right:auto}
.cform__icon-btn:hover{color:var(--down);border-color:var(--down);background:color-mix(in srgb,var(--down) 10%,transparent)}
.cform__icon-btn svg{width:15px;height:15px}
/* Редактор этапов: личная перестановка колонок перетаскиванием */
.ceo__sec{margin:0 0 18px}
.ceo__h{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--ink);margin:0 0 3px}
.ceo__h svg{width:16px;height:16px;color:var(--brand)}
.ceo__sub{font-size:12px;color:var(--muted);margin:0 0 10px;line-height:1.4}
.ceo__list{display:flex;flex-direction:column;gap:6px}
.ceo__row{display:flex;align-items:center;gap:10px;padding:9px 11px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--surface);cursor:grab;touch-action:none;transition:border-color .12s,box-shadow .12s,opacity .12s}
.ceo__row:active{cursor:grabbing}
.ceo__row.is-drag{opacity:.4}
.ceo__row.is-over{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand)}
.ceo__grip{display:flex;color:var(--muted)}
.ceo__grip svg{width:18px;height:18px}
.ceo__pos{min-width:18px;font-size:12px;font-weight:600;color:var(--brand);text-align:center}
.ceo__nm{flex:1;font-size:13px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ceo__reset{border:none;background:none;color:var(--brand);font-size:12px;cursor:pointer;padding:6px 2px;text-align:left;margin-top:6px}
.ceo__reset:hover{text-decoration:underline}
.cdet{display:flex;flex-direction:column;gap:0}
.cdet__stage{font-size:12.5px;color:var(--muted);padding-bottom:10px;margin-bottom:4px;border-bottom:1px solid var(--line)}
.cdet__stage b{color:var(--ink)}
/* Окно дозвона (B9) в ЗАПАСНОЙ (не-360°) детали карточки лида (.lead — фолбэк-раскладка
   на случай, если 360°-карточка leadcard.js не открылась, см. openCardDetail) — та же
   разметка, что в leadcard.js, но там правила живут в JS-инжектируемом <style> под
   #lcwrap и сюда не достают, поэтому дублируем самодостаточно под .lead */
.lead .lc-dial{border:1px solid var(--line);border-radius:10px;padding:11px 12px;background:var(--surface);margin-bottom:13px}
.lead .lc-dial .lc-sec{font-size:11px;letter-spacing:.02em;color:var(--muted);text-transform:uppercase;margin:0 0 8px}
.lead .lc-dial-row{display:flex;align-items:center;gap:9px;padding:6px 4px;border-radius:7px;font-size:12.5px;cursor:default}
.lead .lc-dial-row--active{background:var(--brand-tint);cursor:pointer}
.lead .lc-dial-row input[type=checkbox]{width:16px;height:16px;flex:0 0 auto;accent-color:var(--brand)}
.lead .lc-dial-row input[type=checkbox]:not(:disabled){cursor:pointer}
.lead .lc-dial-n{font-weight:700;color:var(--ink-soft);flex:0 0 52px}
.lead .lc-dial-t{color:var(--muted);flex:0 0 auto}
.lead .lc-dial-s{margin-left:auto;font-size:11px;color:var(--muted)}
.lead .lc-dial-row--done .lc-dial-s{color:#2f9e44;font-weight:600}
.lead .lc-dial-row--missed{opacity:.55}
.lead .lc-dial-row--missed .lc-dial-s{color:#c92a2a}
.lead .lc-dial-row--active .lc-dial-s{color:var(--brand);font-weight:600}
.lead .lc-dial-row--future{opacity:.45}
.lead .lc-dial-exp{margin-top:8px;font-size:11.5px;color:#c92a2a;font-weight:600}
.lead .lc-dial-hint{margin-top:8px;font-size:11px;color:var(--muted);line-height:1.4}
.cdet__author{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);padding-bottom:10px;margin-bottom:4px;border-bottom:1px solid var(--line)}
.cdet__author svg{width:13px;height:13px;flex-shrink:0}
.cdet__author b{color:var(--ink)}
.cdet__heat{display:inline-block;margin-left:8px;font-size:11px;font-weight:600;padding:2px 9px;
  border-radius:99px;color:#fff;vertical-align:middle}
.cdet__namechips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
/* Карточка заявки на скидку (доска discounts, встреча 2026-07-15 п.10) — хедер сверху
   (техника/запрошено/комментарий менеджера) и блок решения директора снизу формы. */
.discreqbox{display:flex;flex-direction:column;gap:6px;padding:11px 13px;margin-bottom:12px;
  background:var(--surface-2);border-radius:var(--r-sm)}
.discreqbox__row{display:flex;gap:8px;font-size:12.5px;line-height:1.4}
.discreqbox__l{color:var(--muted);flex:none;min-width:150px}
.discreqbox__v{color:var(--ink);font-weight:600}
.discreqbox__v--accent{color:var(--brand)}
.discdec{margin-top:12px;padding:11px 13px;border-radius:var(--r-sm);background:var(--surface-2);
  display:flex;flex-direction:column;gap:8px}
.discdec--ok{background:color-mix(in srgb, #1D9E75 12%, var(--surface-2));color:#0F6E56}
.discdec--no{background:color-mix(in srgb, #E24B4A 12%, var(--surface-2));color:#A32D2D}
.discdec__h{font-weight:700;font-size:13px}
#discApprove{background:#1D9E75;border-color:#1D9E75}
#discReject{color:#A32D2D;border-color:#A32D2D}
.namechip{display:inline-block;font-size:11.5px;padding:2px 9px;border-radius:99px;
  background:var(--surface);border:1px solid var(--line);color:var(--ink-soft)}
.namechip--tag{background:#EEEDFE;border-color:#CECBF6;color:#534AB7;font-weight:600}
.ccontact{border:1px solid var(--line);border-radius:var(--r-sm);padding:12px;margin-bottom:12px;background:var(--surface)}
.ccontact__top{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.ccontact__name{font-weight:600;font-size:14px;color:var(--ink)}
.ccontact__reg{font-size:12px;color:var(--muted)}
.ccontact__btns{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.cmsg{display:flex;flex-direction:column;align-items:center;gap:4px;padding:9px 4px;border:1px solid var(--line);
  border-radius:var(--r-sm);font-size:11px;color:var(--ink);text-decoration:none;cursor:pointer}
.cmsg:hover{background:var(--surface-2)}
.cmsg--off{opacity:.4;cursor:default}
.cdet__tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin:6px 0 12px}
.cdet__tab{appearance:none;background:none;border:none;border-bottom:2px solid transparent;
  padding:8px 13px;font:inherit;font-size:13px;color:var(--muted);cursor:pointer}
.cdet__tab.is-active{color:var(--ink);border-bottom-color:var(--brand);font-weight:600}
.cdet__pane{display:none}
.cdet__pane.is-active{display:block}
.cdet__stub{padding:20px;text-align:center;color:var(--muted);font-size:13px;
  border:1px dashed var(--line);border-radius:var(--r-sm)}
.kp{border:1px solid var(--line);border-radius:var(--r-sm);padding:12px;background:var(--surface)}
.kp__head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.kp__no{font-weight:600;font-size:13px;color:var(--ink)}
.kp__demo{display:inline-block;margin-left:6px;font-size:10px;font-weight:600;padding:1px 7px;
  border-radius:99px;background:var(--line);color:var(--muted);text-transform:uppercase}
.kp__total{font-weight:700;font-size:14px;color:var(--ink)}
.kp__tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.kp__tbl th{text-align:left;font-weight:500;color:var(--muted);padding:6px 8px;border-bottom:1px solid var(--line)}
.kp__tbl td{padding:7px 8px;border-bottom:1px solid var(--line);color:var(--ink)}
.kp__tbl tr:last-child td{border-bottom:none}
.kp-ok{color:#3B6D11}
.kp-sum{text-align:right;font-weight:600;white-space:nowrap}
.kp__note{margin-top:10px;font-size:11px;color:var(--muted)}
/* ===== Карточка лида: двухколоночный layout (как прототип) ===== */
.modal__card:has(.lead){max-width:920px}
.lead{display:flex;flex-direction:column;gap:14px}
.lead__body{display:grid;grid-template-columns:300px 1fr;gap:16px;align-items:start}
.lead__left{display:flex;flex-direction:column;gap:12px;position:sticky;top:0;align-self:start}
.lead__right{min-width:0}
.lfun{display:flex;flex-direction:column;gap:10px}
.lfun__row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.lfun__label{font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted)}
.lfun__bar{display:flex;gap:3px;flex:1;min-width:120px}
.lfun__seg{flex:1;height:6px;border-radius:99px;background:var(--line)}
.lfun__seg.is-done{background:var(--brand)}
.lfun__seg.is-cur{background:var(--brand)}
.lfun__pos{font-size:11px;color:var(--muted);white-space:nowrap}
.lstages{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px}
.lstage{appearance:none;font:inherit;font-size:12px;white-space:nowrap;padding:7px 12px;border-radius:99px;cursor:pointer;
  border:1px solid var(--line);background:var(--surface);color:var(--ink-soft)}
.lstage.is-cur{background:var(--ink);color:#fff;border-color:var(--ink);font-weight:600}
.lstage--head{cursor:default}
.lcontact{border:1px solid var(--line);border-radius:var(--r-sm);padding:12px;background:var(--surface);display:flex;flex-direction:column;gap:10px}
.lcontact__top{display:flex;align-items:flex-start;gap:10px}
.lcontact__name{font-weight:600;font-size:14px;color:var(--ink)}
.lcontact__reg,.lcontact__time{font-size:12px;color:var(--muted);margin-top:2px}
.lcontact__time.is-work{color:#3B6D11}
.lcontact__time.is-off{color:#A32D2D}
.lph{display:flex;align-items:center;gap:9px}
.lph__call{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;flex:none;
  background:#E6F1FB;color:#185FA5;text-decoration:none}
.lph__num{font-size:13px;color:var(--ink)}
.lph__lbl{font-size:11px;color:var(--muted)}
.lmsg{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.lmeta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lmeta__heat .cdet__heat{margin-left:0}
.lpot{margin-left:auto;text-align:right}
.lpot__l{display:block;font-size:11px;color:var(--muted)}
.lpot__v{font-weight:700;font-size:14px;color:var(--ink)}
.lnext{border:1px solid #85B7EB;background:#E6F1FB;border-radius:var(--r-sm);padding:10px 12px}
.lnext__h{font-size:12px;color:#185FA5;margin-bottom:3px}
.lnext__v{font-weight:600;font-size:13px;color:#0C447C}
.lqual{border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px;background:var(--surface)}
.lqual__h{font-size:11px;text-transform:uppercase;letter-spacing:.02em;color:var(--muted);margin-bottom:6px}
.lqual__row{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;padding:3px 0;color:var(--ink)}
.lqual__row span{color:var(--muted)}
.lfield{font-size:13px}
.lfield__l{font-size:11px;color:var(--muted)}
.lfield__v{color:var(--ink);margin-top:2px}
.lassign{display:flex;flex-direction:column;gap:4px}
.lfeed{display:flex;flex-direction:column;gap:10px}
.lfeed__ai{background:var(--surface-2);border-radius:var(--r-sm);padding:11px 12px}
.lfeed__ail{font-size:12px;color:var(--muted);margin-bottom:5px}
.lfeed__aitext{font-size:13px;line-height:1.55;color:var(--ink)}
.lfeed__note{display:flex;gap:8px;align-items:flex-start}
.lfeed__ta{flex:1;border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 11px;font:inherit;font-size:13px;
  background:transparent;color:var(--ink);resize:vertical}
.lfeed__mic{flex:none;width:40px;height:40px;border-radius:50%;border:1px solid var(--down,#A32D2D);
  background:none;color:var(--down,#A32D2D);cursor:pointer;display:grid;place-items:center}
.lsale{display:flex;flex-direction:column;gap:10px}
.lsale .lqual__h{margin-bottom:2px}
.modal__card:has(.lead) .modal__head{background:#222834;border-bottom-color:#2c3342}
.modal__card:has(.lead) .modal__head h3{color:#fff}
.modal__card:has(.lead) .modal__close{color:#cfd4de}
@media (max-width:720px){.lead__body{grid-template-columns:1fr}.lead__left{position:static}}
.cdet__row{display:flex;gap:12px;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line);font-size:13px}
.cdet__row:last-of-type{border-bottom:none}
.cdet__l{color:var(--muted);flex:none}
.cdet__v{color:var(--ink);text-align:right;font-weight:600}
/* Ответственный: аватар + выпадающий выбор сотрудника */
.cdet__assign{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 0;border-bottom:1px solid var(--line);font-size:13px}
.cdet__pick{display:flex;align-items:center;gap:9px}
.cdet__sel{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:var(--r-sm);
  padding:7px 10px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;max-width:230px}
.cdet__sel:focus{outline:none;border-color:var(--brand)}
/* Лента истории карточки */
.cdet__hist{margin-top:14px}
.cdet__histhead{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--ink-soft);
  text-transform:uppercase;letter-spacing:.4px;margin-bottom:10px}
.cdet__histhead svg{width:14px;height:14px;color:var(--muted)}
.chist{display:flex;flex-direction:column;gap:11px}
.chist__row{display:flex;align-items:flex-start;gap:9px}
.chist__main{display:flex;flex-direction:column;gap:1px;min-width:0}
.chist__txt{margin:0;font-size:12.5px;color:var(--ink-soft);line-height:1.35}
.chist__txt b{color:var(--ink);font-weight:700}
.chist__ago{font-size:10.5px;color:var(--muted)}
.chist__empty{margin:0;font-size:12.5px;color:var(--muted)}
@media (max-width:560px){
  .board__tools{width:100%}
  .board__tools .msearch{flex:1}
  .board__tools .msearch__in{width:auto;flex:1}
  .board__new{flex:none}
  .col{width:84vw;max-width:300px}
  .cform__toggles{grid-template-columns:1fr}
}

/* ============================================================
   ПОИСК (центральный в шапке + подсказки + страница результатов)
   ============================================================ */
.hsearch{flex:1 1 auto;min-width:0;display:flex;justify-content:center;position:relative}
.hsearch__mini{display:none}
.hsearch__box{display:flex;align-items:center;gap:8px;width:100%;max-width:460px;height:38px;
  padding:0 10px 0 12px;border:1px solid var(--line);background:var(--surface);border-radius:11px;
  transition:border-color .15s,box-shadow .15s}
.hsearch.is-open .hsearch__box,.hsearch__box:focus-within{border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 14%, transparent)}
.hsearch__ic{display:inline-flex;color:var(--muted);flex:none}
.hsearch__ic svg{width:16px;height:16px;display:block}
.hsearch__input{flex:1;min-width:0;border:none;background:none;outline:none;font:inherit;
  font-size:13.5px;font-weight:500;color:var(--ink)}
.hsearch__input::placeholder{color:var(--muted);font-weight:500}
.hsearch__clear{border:none;background:var(--surface-2);color:var(--muted);width:22px;height:22px;
  border-radius:7px;font-size:12px;cursor:pointer;flex:none;line-height:1}
.hsearch__clear:hover{color:var(--down)}

.hsearch__panel{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);
  width:min(560px,92vw);background:var(--surface);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 18px 50px rgba(16,24,40,.18);padding:7px;z-index:60;animation:ddIn .14s ease}
.hsearch__panel[hidden]{display:none}

/* переключатель режимов «Товары / По сайту» */
.sg__tabs{display:flex;gap:6px;padding:3px;background:var(--surface-2);border-radius:11px;margin-bottom:7px}
.sg__tab{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;border:none;
  background:none;color:var(--ink-soft);font:inherit;font-size:12.5px;font-weight:700;padding:8px 6px;
  border-radius:9px;cursor:pointer;transition:.15s}
.sg__tab svg{width:15px;height:15px}
.sg__tab i{font-style:normal;font-size:11px;font-weight:800;color:var(--muted);
  background:var(--surface);border-radius:999px;padding:1px 7px;min-width:18px;text-align:center}
.sg__tab:hover{color:var(--ink)}
.sg__tab.is-active{background:var(--surface);color:var(--brand);box-shadow:0 1px 3px rgba(16,24,40,.08)}
.sg__tab.is-active i{color:#fff;background:var(--brand)}

.sg__list{display:flex;flex-direction:column;gap:4px;max-height:340px;overflow-y:auto}
.sg__item{display:flex;align-items:center;gap:11px;width:100%;border:none;background:none;text-align:left;
  padding:9px 10px;border-radius:10px;cursor:pointer;transition:background .12s}
.sg__item:hover{background:var(--surface-2)}
.sg__ic{flex:none;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;
  background:color-mix(in srgb, var(--brand) 12%, transparent);color:var(--brand)}
.sg__ic svg{width:16px;height:16px}
.sg__main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.sg__t{font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sg__sub{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sg__right{flex:none;font-size:12.5px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.sg__tag{font-size:10px;font-weight:700;color:var(--muted);background:var(--surface-2);
  padding:3px 9px;border-radius:999px}
.sg__hint{padding:18px 12px;text-align:center;color:var(--muted);font-size:12.5px}
.sg__all{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;margin-top:5px;
  border:none;border-top:1px solid var(--line);background:none;color:var(--brand);font:inherit;
  font-size:12.5px;font-weight:700;padding:11px 8px 6px;cursor:pointer;border-radius:0 0 9px 9px}
.sg__all:hover{color:var(--ink)}
.sg__all-ic{width:15px;height:15px;transform:rotate(-90deg)}

mark.hl{background:color-mix(in srgb, var(--brand) 26%, transparent);color:inherit;
  border-radius:3px;padding:0 1px;font-weight:800}

/* страница «Все варианты» (во всю ширину, как все страницы) */
.searchpage__h{font-size:26px;font-weight:300;letter-spacing:.3px;margin:0 0 14px}
.searchpage__box{display:flex;align-items:center;gap:10px;height:46px;padding:0 14px;
  border:1px solid var(--line);background:var(--surface);border-radius:13px;margin-bottom:12px;
  transition:border-color .15s,box-shadow .15s}
.searchpage__box:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 14%, transparent)}
.searchpage__ic{display:inline-flex;color:var(--muted)}
.searchpage__ic svg{width:18px;height:18px}
.searchpage__input{flex:1;min-width:0;border:none;background:none;outline:none;font:inherit;font-size:15px;color:var(--ink)}
.sg__tabs--page{max-width:340px;margin-bottom:10px}
.searchpage__cap{color:var(--muted);font-size:12.5px;margin:0 2px 14px}
.sres-list{display:flex;flex-direction:column;gap:8px}
.sres{display:flex;align-items:center;gap:13px;width:100%;text-align:left;cursor:pointer;
  border:1px solid var(--line);background:var(--surface);border-radius:var(--r-sm);padding:12px 14px;transition:border-color .15s}
.sres:hover{border-color:var(--brand)}
.sres__ic{flex:none;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  background:color-mix(in srgb, var(--brand) 12%, transparent);color:var(--brand)}
.sres__ic svg{width:19px;height:19px}
.sres__main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.sres__t{font-size:14.5px;font-weight:600;color:var(--ink)}
.sres__sub{font-size:12px;color:var(--muted)}
.sres__right{flex:none;font-size:14px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.sres__tag{font-size:10.5px;font-weight:700;color:var(--muted);background:var(--surface-2);padding:4px 10px;border-radius:999px}
.sres-empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:48px 16px;color:var(--muted);text-align:center}
.sres-empty__ic{width:46px;height:46px;color:var(--line)}
.sres-empty p{margin:0;font-size:14px}
.prodcard{display:flex;flex-direction:column;gap:0;margin-bottom:8px}
.prodcard__row{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.prodcard__row span{color:var(--muted)}
.prodcard__row b{color:var(--ink);font-weight:700}

@media (max-width:760px){
  .hsearch{flex:0 0 auto;gap:8px}
  .hsearch__box{display:none}
  .hsearch__mini{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
    border:1px solid var(--line);background:var(--surface);border-radius:11px;color:var(--ink-soft);cursor:pointer}
  .hsearch__mini svg{width:17px;height:17px}
  .hsearch__mini:hover{border-color:var(--brand);color:var(--brand)}
}

/* ===== Адаптив шапки под узкие экраны / мобилку =====
   Принцип: не ужимаем всё в одну строку (иконки наезжают), а ПЕРЕРАЗЛАГАЕМ —
   ряд 1: лого + контролы (с переносом), ряд 2: поиск во всю ширину. */
@media (max-width:560px){
  .topbar{flex-wrap:wrap;gap:9px 4px;padding:10px 12px}
  /* лого+статус слева, контролы справа (space-between), поиск — отдельной строкой:
     компактные 2 строки (знак-логотип + ужатый статус-блок освобождают место) */
  .topbar__left{gap:6px;flex:0 1 auto;min-width:0}
  .topbar__right{gap:6px;flex:0 1 auto;flex-wrap:wrap;justify-content:flex-end}
  .brandlogo svg,.brandlogo__img,.brandlogo__mark{height:24px}
  /* объединённый статус-блок на телефоне компактнее (меньше отступы/зазор) */
  .statusbar{gap:7px;padding:0 9px}
  /* оба дропдауна — только иконкой (подпись дублируется в меню) */
  .topbar__right .dd__cur{display:none}
  .topbar__right .dd__btn{padding:0 7px;gap:5px}
  /* единый компактный размер кнопок/аватара — ровная линия, без наезда по высоте;
     чуть ужаты, чтобы лого+статусы+контролы умещались в одну строку на телефоне */
  .iconbtn{width:34px;height:34px}
  .iconbtn svg{width:18px;height:18px}
  .userbox__avatar{width:34px;height:34px}
  /* поиск — отдельной строкой во всю ширину (удобнее мини-иконки) */
  .hsearch{order:3;flex:1 1 100%;justify-content:stretch}
  .hsearch__box{display:flex;max-width:none;width:100%}
  .hsearch__mini{display:none}
  /* меню дропдаунов не шире экрана */
  .dd__menu{max-width:calc(100vw - 24px)}
  /* роли — горизонтальный свайп вместо переноса в несколько рядов */
  .rolebar{padding:9px 12px;flex-wrap:nowrap}
  .rolebar__chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .rolebar__chips::-webkit-scrollbar{display:none}
  .chip{flex:none}
}
@media (max-width:380px){
  .brandlogo svg,.brandlogo__img,.brandlogo__mark{height:22px}
  .topbar__right{gap:5px}
}
/* === Устойчивый адаптив шапки на всех промежуточных ширинах (чтобы иконки не наезжали) ===
   Селекторы с .topbar/.topbar__right специально повышенной специфичности —
   перебивают min-width-правила ниже независимо от порядка в файле. */
@media (max-width:1024px){
  /* при нехватке места — перенос, а не наезд (страховка на любой ширине) */
  .topbar{flex-wrap:wrap}
  .topbar__left{min-width:0}
  .topbar__right{flex-wrap:wrap;justify-content:flex-end;min-width:0}
}
/* средние ширины: поиску — минимум, при тесноте он уходит на свою строку (wrap),
   а не сплющивается в ноль (ниже 760 поиск и так схлопывается в мини-кнопку) */
@media (max-width:1024px) and (min-width:761px){
  .hsearch{min-width:240px}
}
@media (max-width:900px){
  /* прячем «жадные» подписи: имя/роль пользователя + текст обоих дропдаунов */
  .topbar .userbox__info{display:none}
  .topbar__right .dd__cur{display:none}
  .topbar__right .dd__btn{padding:0 8px;gap:6px}
}

/* ===== Планшет / десктоп ===== */
@media (min-width:680px){
  .userbox__info{display:block}
  /* .hubs здесь больше не переопределяются: чипы с flex-wrap сами
     подстраиваются под любую ширину (однострочный grid-auto-flow:column
     давил 21 раздел в одну строку — подписи наезжали друг на друга) */
  .metrics{grid-template-columns:repeat(3,minmax(0,1fr))}
  .charts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kanbans{grid-template-columns:repeat(4,minmax(0,1fr))}
  .hello__h{font-size:30px}
}
@media (min-width:1000px){
  .metrics{grid-template-columns:repeat(3,minmax(0,1fr))}
  .charts{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* широкие мониторы — задействуем ширину: больше колонок в сетках */
@media (min-width:1500px){
  .metrics{grid-template-columns:repeat(4,minmax(0,1fr))}
  .kanbans{grid-template-columns:repeat(6,minmax(0,1fr))}
}
@media (min-width:2000px){
  .kanbans{grid-template-columns:repeat(8,minmax(0,1fr))}
}

/* ---- Экран входа ---- */
.login-page{min-height:100dvh;display:grid;place-items:center;padding:24px;background:var(--bg)}
.login{width:100%;max-width:330px;display:flex;flex-direction:column;align-items:center;gap:13px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:34px 28px 24px}
.login__logo{display:flex;align-items:center;justify-content:center;margin-bottom:2px}
.login__logo svg,.login__logo-img{height:40px;width:auto;display:block;max-width:100%}
.login__title{font-size:20px;font-weight:800;letter-spacing:.2px;margin:6px 0 0;color:var(--ink)}
.login__sub{font-size:13px;color:var(--muted);margin:-7px 0 8px;font-weight:600}
.login__input{width:100%;height:48px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface-2);padding:0 16px;font:inherit;font-size:17px;font-weight:700;color:var(--ink);
  text-align:center;letter-spacing:3px;transition:border-color .15s,background .15s}
.login__input::placeholder{letter-spacing:normal;font-weight:600;color:var(--muted)}
.login__input:focus{outline:none;border-color:var(--brand);background:var(--surface)}
/* поле с иконкой (человек/замок) и глазиком показа пароля */
.login__field{width:100%;height:48px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface-2);display:flex;align-items:center;gap:10px;padding:0 14px;cursor:text;
  transition:border-color .15s,background .15s}
.login__field:focus-within{border-color:var(--brand);background:var(--surface)}
.login__ficon{width:18px;height:18px;color:var(--muted);flex:none}
/* шрифт как у обычных полей сайта (14.5/500): крупный жирный 17/700 давал
   видимый «прыжок» рядом с браузерной подстановкой, которую CSS не красит */
.login__field>.login__input{flex:1;min-width:0;height:100%;border:none;background:none;
  padding:0;text-align:left;letter-spacing:normal;font-size:14.5px;font-weight:500}
.login__field>.login__input[type=password]{letter-spacing:2px}
.login__field>.login__input[type=password]::placeholder{letter-spacing:normal}
.login__eye{display:grid;place-items:center;width:30px;height:30px;flex:none;border:none;
  background:none;color:var(--muted);cursor:pointer;border-radius:8px;padding:0}
.login__eye:hover{color:var(--ink)}
.login__eye svg{width:19px;height:19px}
.login__eye svg[hidden]{display:none}  /* hidden не действует на инлайн-svg сам по себе */
/* автозаполнение Chrome: закрасить голубую заливку inset-тенью (bg-clip:text
   ломал размер шрифта при клике) и удержать НАШ шрифт через ::first-line */
.login__field>.login__input:-webkit-autofill,
.login__field>.login__input:-webkit-autofill:hover,
.login__field>.login__input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 1000px var(--surface-2) inset;
  -webkit-text-fill-color:var(--ink);caret-color:var(--ink)}
.login__field:focus-within>.login__input:-webkit-autofill{
  -webkit-box-shadow:0 0 0 1000px var(--surface) inset}
/* ::first-line с крупным шрифтом убран сознательно: браузерную подстановку
   CSS не красит, поэтому поля сведены к её масштабу (см. .login__field>input) */
.login__btn{width:100%;height:48px;border:none;border-radius:var(--r-sm);
  background:var(--brand);color:#fff;font:inherit;font-size:15px;font-weight:700;
  transition:filter .15s,transform .08s}
.login__btn:hover{filter:brightness(1.05)}
.login__btn:active{transform:scale(.985)}
.login__err{width:100%;text-align:center;font-size:13px;font-weight:600;color:var(--down);
  background:color-mix(in srgb,var(--down) 11%,transparent);border-radius:10px;padding:9px 10px}
.login__hint{font-size:11.5px;color:var(--muted);text-align:center;margin-top:2px}
/* подсказка «включён Caps Lock» под полем пароля */
.login__caps{width:100%;text-align:center;font-size:12.5px;font-weight:700;color:#9a6b00;
  background:color-mix(in srgb,#e8a300 15%,transparent);border-radius:10px;padding:8px 10px}
[data-theme="dark"] .login__caps{color:#e7b84d}
/* двухфакторный вход: код из письма */
.login__badge{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--brand) 12%,transparent);color:var(--brand);margin:2px 0 -4px}
.login__badge svg{width:23px;height:23px}
.login__input--code{letter-spacing:9px;font-size:23px;font-weight:800}
.login__input--code::placeholder{letter-spacing:9px}
.login__note{width:100%;text-align:center;font-size:13px;font-weight:600;color:var(--up);
  background:color-mix(in srgb,var(--up) 11%,transparent);border-radius:10px;padding:9px 10px}
.login__links{width:100%;display:flex;justify-content:space-between;gap:8px}
.login__linkbtn{border:none;background:none;font:inherit;font-size:12.5px;font-weight:700;
  color:var(--brand);cursor:pointer;padding:4px 2px}
.login__linkbtn:hover{text-decoration:underline}

/* ============================================================
   J.A.R.V.I.S. — иконка ✦ в строке поиска + панель-чат ИИ-помощника
   ============================================================ */
/* кнопка ✦ (шапка и страница поиска): фирменный оранжевый градиент */
.jbtn{display:grid;place-items:center;width:28px;height:28px;flex:none;border:none;cursor:pointer;border-radius:9px;
  background:linear-gradient(135deg,var(--brand),color-mix(in srgb,var(--brand) 45%,#ffb340));color:#fff;
  box-shadow:0 3px 10px color-mix(in srgb,var(--brand) 30%,transparent);
  transition:transform .12s,box-shadow .15s,filter .15s}
.jbtn svg{width:15px;height:15px}
.jbtn:hover{filter:brightness(1.07);transform:translateY(-1px);box-shadow:0 5px 14px color-mix(in srgb,var(--brand) 42%,transparent)}
.jbtn:active{transform:scale(.93)}
.jbtn--lg{width:34px;height:34px;border-radius:10px}
.jbtn--lg svg{width:17px;height:17px}
.hsearch__box .jbtn{margin-left:2px}
.hsearch__mini--j{border:none !important;color:#fff;
  background:linear-gradient(135deg,var(--brand),color-mix(in srgb,var(--brand) 45%,#ffb340))}
.hsearch__mini--j:hover{color:#fff;filter:brightness(1.07)}
.sg__hint-spark{width:13px;height:13px;color:var(--brand);vertical-align:-2px}

/* строка «Спросить J.A.R.V.I.S.» в подсказках и на странице поиска */
.sg__jarvis{display:flex;align-items:center;gap:11px;width:100%;text-align:left;cursor:pointer;
  border:1px solid color-mix(in srgb,var(--brand) 28%,transparent);
  background:color-mix(in srgb,var(--brand) 6%,transparent);border-radius:10px;
  padding:9px 10px;margin-top:5px;transition:border-color .15s,background .15s}
.sg__jarvis:hover{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 10%,transparent)}
.sg__jarvis--top{margin:0 0 6px}
.sg__jic{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,var(--brand),color-mix(in srgb,var(--brand) 45%,#ffb340))}
.sg__jic svg{width:16px;height:16px}
.sg__jarvis .sg__t{color:var(--brand)}
.sg__jgo{flex:none;display:grid;place-items:center;color:var(--brand)}
.sg__jgo svg{width:15px;height:15px;transform:rotate(-90deg)}
#searchJask .sg__jarvis{margin:0 0 12px;padding:11px 12px;border-radius:var(--r-sm)}

/* панель-чат: справа на десктопе, шторка снизу на мобильном */
.jpanel{position:fixed;inset:0;z-index:70}
.jpanel[hidden]{display:none}
.jpanel__backdrop{position:absolute;inset:0;background:rgba(10,14,18,.35);opacity:0;transition:opacity .2s}
.jpanel.is-open .jpanel__backdrop{opacity:1}
.jpanel__card{position:absolute;top:0;right:0;bottom:0;width:min(430px,100vw);display:flex;flex-direction:column;
  background:var(--surface);border-left:1px solid var(--line);box-shadow:-18px 0 50px rgba(16,24,40,.14);
  transform:translateX(102%);transition:transform .24s cubic-bezier(.4,0,.2,1)}
.jpanel.is-open .jpanel__card{transform:none}
.jpanel__head{display:flex;align-items:center;gap:11px;padding:14px 16px;border-bottom:1px solid var(--line);flex:none}
.jpanel__ava{width:38px;height:38px;border-radius:12px;flex:none;display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,var(--brand),color-mix(in srgb,var(--brand) 45%,#ffb340));
  box-shadow:0 4px 12px color-mix(in srgb,var(--brand) 30%,transparent)}
.jpanel__ava svg{width:19px;height:19px}
.jpanel__id{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.jpanel__id b{font-size:14.5px;font-weight:800;letter-spacing:.4px}
.jpanel__id span{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--muted)}
.jpanel__dot{width:6px;height:6px;border-radius:50%;background:var(--up);animation:dotlive 2.4s ease-out infinite}
.jpanel__close{border:none;background:var(--surface-2);width:30px;height:30px;border-radius:9px;color:var(--muted);
  display:grid;place-items:center;cursor:pointer;flex:none}
.jpanel__close svg{width:14px;height:14px}
.jpanel__close:hover{color:var(--down)}
.jpanel__thread{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;background:var(--bg)}
.jmsg{display:flex;gap:8px;max-width:88%}
.jmsg--ai{align-self:flex-start}
.jmsg--user{align-self:flex-end}
.jmsg__ava{width:26px;height:26px;border-radius:8px;flex:none;display:grid;place-items:center;color:#fff;margin-top:2px;
  background:linear-gradient(135deg,var(--brand),color-mix(in srgb,var(--brand) 45%,#ffb340))}
.jmsg__ava svg{width:13px;height:13px}
.jmsg__bubble{background:var(--surface);border:1px solid var(--line);border-radius:14px 14px 14px 5px;
  padding:10px 13px;font-size:13.5px;line-height:1.5;color:var(--ink);min-width:0}
.jmsg--user .jmsg__bubble{background:color-mix(in srgb,var(--brand) 10%,var(--surface));
  border-color:color-mix(in srgb,var(--brand) 22%,transparent);border-radius:14px 14px 5px 14px}
.jtyping{display:inline-flex;gap:4px;padding:3px 1px}
.jtyping i{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:jty 1s ease-in-out infinite}
.jtyping i:nth-child(2){animation-delay:.15s}
.jtyping i:nth-child(3){animation-delay:.3s}
@keyframes jty{0%,100%{opacity:.35;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
.jmsg__chips{display:flex;flex-direction:column;gap:6px;margin-top:9px}
.jchip{display:flex;align-items:center;gap:9px;width:100%;text-align:left;border:1px solid var(--line);
  background:var(--surface);border-radius:10px;padding:8px 10px;cursor:pointer;transition:border-color .14s}
.jchip:hover{border-color:var(--brand)}
.jchip__ic{flex:none;width:27px;height:27px;border-radius:8px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--brand) 12%,transparent);color:var(--brand)}
.jchip__ic svg{width:14px;height:14px}
.jchip__main{flex:1;min-width:0;display:flex;flex-direction:column}
.jchip__t{font-size:12.5px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jchip__sub{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jchip__go{flex:none;color:var(--muted)}
.jchip__go svg{width:13px;height:13px;transform:rotate(-90deg)}
.jchip:hover .jchip__go{color:var(--brand)}
.jpanel__foot{flex:none;border-top:1px solid var(--line);padding:11px 14px 10px;background:var(--surface)}
.jpanel__row{display:flex;align-items:center;gap:8px}
.jpanel__input{flex:1;min-width:0;height:40px;border:1px solid var(--line);background:var(--surface);
  border-radius:12px;padding:0 13px;font:inherit;font-size:13.5px;color:var(--ink);outline:none;
  transition:border-color .15s,box-shadow .15s}
.jpanel__input:focus{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 13%,transparent)}
.jpanel__send{width:40px;height:40px;flex:none;border:none;border-radius:12px;cursor:pointer;color:#fff;
  display:grid;place-items:center;background:linear-gradient(135deg,var(--brand),color-mix(in srgb,var(--brand) 45%,#ffb340));
  box-shadow:0 4px 12px color-mix(in srgb,var(--brand) 28%,transparent);transition:filter .15s,transform .12s}
.jpanel__send svg{width:17px;height:17px}
.jpanel__send:hover{filter:brightness(1.07)}
.jpanel__send:active{transform:scale(.93)}
.jpanel__hint{display:flex;align-items:center;justify-content:center;gap:5px;margin:8px 0 0;font-size:11px;color:var(--muted)}
.jpanel__hint svg{width:12px;height:12px}
@media (max-width:680px){
  .jpanel__card{top:auto;left:0;width:100%;height:min(88dvh,640px);border-left:none;border-top:1px solid var(--line);
    border-radius:18px 18px 0 0;transform:translateY(102%)}
}

/* ===== «Сегодня в компании» — показатели дня из 1С (блок на главной) =====
   Семантика цветов: оранжевый — тракторы (фирменный), зелёный — наличные/рост,
   индиго — безнал, голубой — новые клиенты. Анимации входа стартуют классом .is-in.
   На десктопе — три полноценные колонки; сжимаем только на планшете/мобиле. */
.tdy{padding:16px 20px 12px}
.tdy__head{margin-bottom:14px}
.tdy__date{margin-left:auto;font-size:12px;font-weight:600;color:var(--muted);white-space:nowrap}
.tdy__grid{display:grid;grid-template-columns:1fr 1.2fr 1fr}
.tdy__cell{min-width:0;padding:6px 18px 10px}
.tdy__cell+.tdy__cell{border-left:1px solid var(--line)}
.tdy__cell--tr{padding-left:2px}
.tdy__cell--cl{padding-right:2px}
.tdy__l{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--ink-soft);margin-bottom:12px;flex-wrap:wrap}
.tdy__ic{width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center;
  background:color-mix(in srgb,var(--c,var(--brand)) 12%,var(--surface));color:var(--c,var(--brand))}
.tdy__ic svg{width:16px;height:16px}
.tdy__sub{font-size:11.5px;color:var(--muted);font-weight:600}
/* --- тракторы: кольцо-прогресс + пиктограммный ряд --- */
.tdy__trmain{display:flex;align-items:center;gap:16px}
.tdy__ring{position:relative;width:106px;height:106px;flex:none}
.tdy__ringsvg{width:100%;height:100%;transform:rotate(-90deg)}
.tdy__ringbg{fill:none;stroke:var(--surface-2);stroke-width:9}
.tdy__ringfg{fill:none;stroke:var(--brand);stroke-width:9;stroke-linecap:round;
  stroke-dasharray:var(--circ);stroke-dashoffset:var(--circ);transition:stroke-dashoffset 1s cubic-bezier(.25,.7,.25,1) .2s}
.is-in .tdy__ringfg{stroke-dashoffset:var(--off)}
.tdy__ringmid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.tdy__ringmid b{font-size:30px;font-weight:800;color:var(--ink);letter-spacing:.3px}
.tdy__ringmid span{font-size:10.5px;color:var(--muted);font-weight:600;margin-top:3px}
.tdy__trside{display:flex;flex-direction:column;gap:2px;min-width:0}
.tdy__pct{font-size:20px;font-weight:800;color:var(--brand);line-height:1}
.tdy__picto{display:flex;flex-wrap:wrap;gap:3px;margin-top:9px;max-width:150px}
.tdy__tr{display:grid;place-items:center;opacity:0;transform:translateY(4px);
  transition:opacity .4s ease,transform .4s ease;transition-delay:calc(.25s + var(--d)*45ms)}
.is-in .tdy__tr{opacity:1;transform:none}
.tdy__tr svg{width:21px;height:21px;color:var(--line)}
.tdy__tr.is-on svg{color:var(--brand)}
/* --- деньги: итог за день + сплит нал/безнал + две суммы (без разбивки по счетам/часам) --- */
.tdy__total{margin-left:auto}
.tdy__total b{font-size:23px;font-weight:800;color:var(--ink);letter-spacing:.2px;white-space:nowrap}
.tdy__split{display:flex;height:10px;border-radius:999px;overflow:hidden;background:var(--surface-2);margin:0 0 16px}
.tdy__split i{display:block;height:100%;width:0;transition:width .9s cubic-bezier(.25,.7,.25,1) .15s}
.is-in .tdy__split i{width:var(--w)}
.tdy__split-ca{background:var(--up)}
.tdy__split-nc{background:#6366f1;border-left:2px solid var(--surface)}
.tdy__sums{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px}
.tdy__sum{display:flex;flex-direction:column;gap:6px;min-width:0}
.tdy__sumlbl{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;color:var(--ink-soft)}
.tdy__sumv{font-size:20px;font-weight:800;color:var(--ink);letter-spacing:.2px;white-space:nowrap}
/* остаток на всех счетах — кликабельная цифра, открывает отчёт */
.tdy__bal{display:flex;align-items:center;gap:10px;width:100%;margin-top:14px;padding:10px 12px;font:inherit;text-align:left;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);cursor:pointer;transition:border-color .15s,background .15s}
.tdy__bal:hover{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 5%,var(--surface))}
.tdy__bal-l{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;color:var(--ink-soft)}
.tdy__bal-l svg{width:15px;height:15px;color:var(--brand)}
.tdy__bal-r{margin-left:auto;display:inline-flex;align-items:center;gap:9px}
.tdy__bal-r b{font-size:18px;font-weight:800;color:var(--ink);white-space:nowrap}
.tdy__bal-go{display:inline-flex;color:var(--muted)}
.tdy__bal-go svg{width:16px;height:16px;transform:rotate(-90deg)}
.tdy__bal:hover .tdy__bal-go{color:var(--brand)}
/* модалка-отчёт «Остатки денег» */
.balr{display:flex;flex-direction:column;gap:16px}
.balr__total{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--surface-2);border-radius:var(--r-sm);padding:13px 15px}
.balr__total-l{font-size:12px;font-weight:700;color:var(--ink-soft)}
.balr__total-v{font-size:22px;font-weight:800;color:var(--ink);white-space:nowrap}
.balr__sec{display:flex;flex-direction:column;gap:9px}
.balr__sechead{display:flex;align-items:center;justify-content:space-between;font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.balr__sechead b{font-size:12.5px;font-weight:800;color:var(--ink-soft);text-transform:none;letter-spacing:0}
.balr__row{display:grid;grid-template-columns:9px minmax(86px,1.1fr) 1fr auto;align-items:center;gap:11px}
.balr__dot{width:9px;height:9px;border-radius:50%;flex:none}
.balr__name{font-size:12.5px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.balr__bar{height:7px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.balr__bar i{display:block;height:100%;width:var(--w);border-radius:999px}
.balr__sum{font-size:13px;font-weight:800;color:var(--ink);white-space:nowrap}
.balr__note{font-size:11.5px;color:var(--muted);margin:0}
@media (max-width:480px){ .balr__row{grid-template-columns:9px 1fr auto} .balr__bar{display:none} }
.tdy__key{width:8px;height:8px;border-radius:3px;flex:none}
.tdy__key--ca{background:var(--up)}
.tdy__key--nc{background:#6366f1}
/* --- новые клиенты: счётчик, дельта, аватары --- */
.tdy__clmain{display:flex;align-items:baseline;gap:10px;margin:0 0 12px}
.tdy__clnum{font-size:38px;font-weight:800;color:var(--ink);line-height:1;letter-spacing:.3px}
.tdy__delta{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:700;border-radius:999px;padding:3px 9px}
.tdy__delta svg{width:12px;height:12px}
.tdy__delta.is-up{color:var(--up);background:color-mix(in srgb,var(--up) 12%,transparent)}
.tdy__delta.is-down{color:var(--down);background:color-mix(in srgb,var(--down) 12%,transparent)}
.tdy__delta.is-down svg{transform:scaleY(-1)}
.tdy__avas{display:flex;margin-bottom:8px}
.tdy__ava{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:var(--a,#94a3b8);color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.2px;
  border:2px solid var(--surface);margin-left:-7px;
  opacity:0;transform:translateX(-6px);transition:opacity .4s ease,transform .4s ease;transition-delay:calc(.3s + var(--d,0)*60ms)}
.tdy__ava:first-child{margin-left:0}
.is-in .tdy__ava{opacity:1;transform:none}
.tdy__ava--more{background:var(--surface-2);color:var(--ink-soft);transition-delay:.75s}
/* --- нижняя живая строка: свободно тракторов + настоящие 1С-показатели (вал/продано/маржа) --- */
.tdy__foot{display:flex;flex-wrap:wrap;gap:8px 26px;border-top:1px solid var(--line);margin-top:12px;padding-top:11px}
.tdy__f{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:var(--muted);font-weight:600}
.tdy__f svg{width:14px;height:14px;color:var(--muted)}
.tdy__f b{font-size:12px;font-weight:800;color:var(--ink-soft);white-space:nowrap}
.tdy__f--stock svg{color:var(--brand)}
/* разбивка проданных сегодня по бренду (чипы): Кентавр Master / Солис / прочие */
.tdy__paidrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px}
.tdy__models{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.tdy__model{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:var(--ink-soft);
  background:var(--surface-2);border-radius:999px;padding:3px 9px 3px 8px;white-space:nowrap}
.tdy__model b{font-size:11.5px;font-weight:800;color:var(--ink)}
.tdy__model--rest{color:var(--muted)}
.tdy__model--rest b{color:var(--ink-soft)}
.tdy__mdot{width:7px;height:7px;border-radius:50%;flex:none}
.tdy__mdot--k{background:var(--brand)}
.tdy__mdot--s{background:#0ea5e9}
.tdy__mdot--x{background:var(--muted)}
/* новые клиенты по часам: когда приходят лиды (утро/день/вечер) */
.tdy__pulse{display:flex;align-items:flex-end;gap:4px;height:32px;margin:2px 0 4px}
.tdy__pbar{flex:1;height:var(--h);min-height:3px;border-radius:3px;background:var(--surface-2);
  transform:scaleY(0);transform-origin:bottom;transition:transform .5s cubic-bezier(.2,.7,.3,1.15);transition-delay:calc(.2s + var(--d)*40ms)}
.tdy__pbar.is-on{background:#0ea5e9;opacity:.9}
.is-in .tdy__pbar{transform:scaleY(1)}
.tdy__paxis{display:flex;justify-content:space-between;font-size:9.5px;font-weight:600;color:var(--muted);margin-bottom:5px}
@media (max-width:1100px){
  .tdy__grid{grid-template-columns:1fr 1fr}
  .tdy__cell--money{grid-column:1 / -1;border-left:none;border-top:1px solid var(--line);margin-top:8px;padding:14px 2px 8px;order:3}
  .tdy__cell--tr{padding:6px 16px 12px 2px;order:1}
  .tdy__cell--cl{border-left:1px solid var(--line);padding:6px 2px 12px 16px;order:2}
}
@media (max-width:640px){
  .tdy__grid{grid-template-columns:1fr}
  .tdy__cell,.tdy__cell--cl,.tdy__cell--tr{border-left:none;padding:12px 2px}
  .tdy__cell+.tdy__cell{border-top:1px solid var(--line);margin-top:6px}
  .tdy__cell--money{margin-top:0}
  .tdy__sums{grid-template-columns:1fr}
  .tdy__total{margin-left:0;width:100%}
  .tdy__date{display:none}
}

.en-kpi{grid-template-columns:repeat(4,1fr)}
/* ============ Око: кабинет + экраны (самодостаточно, стиль главной) ============ */
.okoprio{display:inline-block;font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;padding:2px 7px;border-radius:999px;vertical-align:1px}
.okoprio--hi{background:rgba(224,83,61,.14);color:#c23a26}
.okoprio--md{background:rgba(245,165,36,.18);color:#a96a08}
.okoimpact{display:inline-flex;align-items:center;gap:4px;color:var(--up);font-weight:700;font-size:11.5px;white-space:nowrap;margin-left:2px}
.okoimpact svg{width:13px;height:13px}
.okocta{display:flex;align-items:center;gap:13px;width:100%;text-align:left;cursor:pointer;background:var(--brand-tint);border:1px solid color-mix(in srgb,var(--brand) 32%,var(--line));border-radius:var(--r);padding:13px 15px;margin:2px 0 22px;transition:.15s;font:inherit}
.okocta:hover{border-color:var(--brand)}
.okocta__ic{width:42px;height:42px;border-radius:12px;flex:none;display:grid;place-items:center;background:var(--brand);color:#fff}
.okocta__ic svg{width:22px;height:22px}
.okocta__t{flex:1;min-width:0}
.okocta__t b{display:block;font-size:14.5px;font-weight:700;color:var(--ink)}
.okocta__t span{font-size:12px;color:var(--muted)}
.okocta__chev{width:20px;height:20px;color:var(--brand);transform:rotate(-90deg);flex:none}
.okonote{display:flex;align-items:flex-start;gap:9px;margin:0 2px 18px;padding:11px 14px;background:var(--surface-2);border-radius:var(--r-sm);font-size:12.5px;color:var(--muted);line-height:1.5}
.okonote svg{width:16px;height:16px;flex:none;margin-top:1px;color:var(--muted)}
.okokpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,168px),1fr));gap:12px;margin:0 2px 18px}
.okok{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--c,var(--brand));border-radius:var(--r);padding:13px 15px}
.okok__top{display:flex;align-items:center;justify-content:space-between;gap:9px;margin-bottom:9px}
.okok__lbl{font-size:12px;color:var(--muted);font-weight:600;line-height:1.3}
.okok__chip{width:34px;height:34px;border-radius:10px;flex:none;display:grid;place-items:center;background:color-mix(in srgb,var(--c,var(--brand)) 14%,transparent);color:var(--c,var(--brand))}
.okok__chip svg{width:19px;height:19px}
.okok__v{font-size:25px;font-weight:800;letter-spacing:.2px;color:var(--ink)}
.okorows{display:grid;gap:8px}
.okorow{display:flex;align-items:center;gap:13px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:11px 14px;transition:border-color .15s}
.okorow[data-okoperson]{cursor:pointer}
.okorow[data-okoperson]:hover{border-color:var(--brand)}
.okorow__ava{position:relative;width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center;color:#fff;font-weight:800;font-size:14px}
.okorow__dot{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;border:2px solid var(--surface);background:#b4b2a9}
.okorow__dot.is-on{background:#16a34a}
.okorow__main{flex:1;min-width:0}
.okorow__name{font-weight:700;font-size:14px;color:var(--ink);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.okorow__dept{font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px;background:color-mix(in srgb,var(--dc,var(--brand)) 14%,transparent);color:var(--dc,var(--brand))}
.okorow__sub{font-size:12.5px;color:var(--muted);margin-top:3px}
.okorow__eff{flex:none;text-align:right;min-width:104px}
.okorow__eff>b{display:block;font-size:18px;font-weight:800;font-variant-numeric:tabular-nums}
.okorow__eff>span{font-size:10.5px;color:var(--muted)}
.okorow__bar{height:6px;border-radius:999px;background:var(--surface-2);margin-top:6px;overflow:hidden}
.okorow__bar i{display:block;height:100%;border-radius:999px}
.okorecs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,232px),1fr));gap:12px}
/* реплика J.A.R.V.I.S. над советами + подзаголовки групп внутри блока */
.okojarvis{display:flex;align-items:flex-start;gap:9px;margin:0 0 16px;padding:12px 14px;background:var(--brand-tint);
  border:1px solid color-mix(in srgb,var(--brand) 24%,var(--line));border-radius:var(--r-sm);font-size:13px;color:var(--ink);line-height:1.55}
.okojarvis svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--brand)}
.okosub{display:flex;align-items:center;gap:8px;margin:18px 0 10px;font-size:14px;font-weight:700;color:var(--ink)}
.okosub:first-of-type{margin-top:0}
.okosub span{font-size:12px;font-weight:500;color:var(--muted)}
.okosub__ic{width:16px;height:16px;color:var(--muted);flex:none}
.okorec{display:flex;flex-direction:column;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px}
.okorec__h{display:flex;align-items:flex-start;gap:10px}
.okorec__ic{width:36px;height:36px;border-radius:10px;flex:none;display:grid;place-items:center;background:color-mix(in srgb,var(--c,var(--brand)) 14%,transparent);color:var(--c,var(--brand))}
.okorec__ic svg{width:19px;height:19px}
.okorec__t{flex:1;font-size:14px;font-weight:700;color:var(--ink);line-height:1.35}
.okorec__d{font-size:12.5px;color:var(--muted);line-height:1.55}
.okoempty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:34px 20px;color:var(--muted);text-align:center;background:var(--surface-2);border-radius:var(--r)}
.okoempty svg{width:30px;height:30px;opacity:.7}
/* Разбор дня одного человека: раскрывается прямо под его строкой (data-okoperson).
   Отрицательный отступ сверху подтягивает панель вплотную к строке, чтобы было
   видно, чей это разбор, когда открытых несколько экранов подряд. */
.okodet{background:var(--surface-2);border:1px solid var(--line);border-top:none;
  border-radius:0 0 var(--r) var(--r);padding:13px 15px 15px;margin:-9px 0 2px}
.okodet__h{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin-bottom:9px}
.okoapp{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--ink);padding:3px 0}
.okoapp__n{flex:none;width:min(34%,190px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.okoapp__bar{flex:1;height:7px;border-radius:999px;background:var(--surface);overflow:hidden;min-width:40px}
.okoapp__bar i{display:block;height:100%;border-radius:999px;background:var(--brand)}
.okoapp__t{flex:none;width:96px;text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}
.okospan{display:flex;align-items:baseline;gap:10px;font-size:12px;color:var(--muted);padding:3px 0;line-height:1.45}
.okospan>span:first-child{flex:none;width:96px;font-variant-numeric:tabular-nums}
.okospan>b{flex:none;width:min(26%,150px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink);font-weight:600}
.okospan>span:last-child{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:640px){
  .okoapp__n{width:44%}
  .okoapp__t{width:74px}
  .okospan{flex-wrap:wrap}
  .okospan>b{width:auto}
}
.scrtoggle{display:inline-flex;gap:3px;background:var(--surface-2);border-radius:999px;padding:3px;align-self:center}
.scrtoggle button{border:none;background:none;font:inherit;font-size:12.5px;font-weight:700;color:var(--muted);padding:7px 15px;border-radius:999px;cursor:pointer}
.scrtoggle button.is-on{background:var(--surface);color:var(--ink)}
.scrtoggle button[data-scrmode="live"].is-on{color:#16a34a}
.scrtoggle button:disabled{cursor:default;opacity:.5}
.scrtoggle button:disabled:hover{background:none}
.scr{position:relative;aspect-ratio:16/10;border-radius:7px;overflow:hidden;background:#0e1320}
.scr__top{position:absolute;top:0;left:0;right:0;height:15px;background:#1b2233;display:flex;align-items:center;gap:4px;padding:0 7px}
.scr__top i{width:5px;height:5px;border-radius:50%;background:#404b63}
.scr__ttl{font-size:8.5px;color:#8c96ac;margin-left:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.scr__body{position:absolute;top:15px;left:0;right:0;bottom:11px;display:flex;gap:5px;padding:6px}
.scr__side{width:20%;background:#161d2c;border-radius:3px;flex:none}
.scr__main{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}
.scr__hd{height:13%;width:52%;background:var(--a);border-radius:3px;opacity:.85}
.scr__ln{height:6.5%;background:#222c40;border-radius:2px}
.scr__ln.s{width:62%}
.scr__blk{flex:1;background:color-mix(in srgb,var(--a) 18%,#10172a);border-radius:3px;border:1px solid color-mix(in srgb,var(--a) 45%,transparent)}
.scr__task{position:absolute;left:0;right:0;bottom:0;height:11px;background:#080c14;display:flex;align-items:center;gap:5px;padding:0 6px}
.scr__task i{width:7px;height:7px;border-radius:2px;background:#2a3447}
.scr__task i.on{background:var(--a)}
.scr--big{aspect-ratio:16/9;border-radius:11px}
.scr--big .scr__top{height:24px}
.scr--big .scr__ttl{font-size:11px}
.scr--big .scr__body{top:24px;bottom:16px;padding:10px;gap:8px}
.scr--big .scr__task{height:16px}
.scrwall{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,232px),1fr));gap:14px}
.scrtile{position:relative;border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:8px;cursor:pointer;transition:.15s;text-align:left;font:inherit;display:block;width:100%}
.scrtile:hover{border-color:var(--brand);transform:translateY(-1px)}
.scrtile.is-sel{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-tint)}
.scr-wrap{position:relative}
.scrtile__rec{position:absolute;top:7px;left:7px;font-size:8.5px;font-weight:800;color:#fff;background:#e0533d;padding:2px 6px;border-radius:4px;letter-spacing:.6px;display:inline-flex;align-items:center;gap:4px}
.scrtile__rec::before{content:"";width:5px;height:5px;border-radius:50%;background:#fff;animation:pulse 1.3s infinite}
.scrtile__mon{position:absolute;top:7px;right:7px;font-size:9.5px;font-weight:800;color:#fff;background:rgba(0,0,0,.55);padding:2px 6px;border-radius:4px;display:inline-flex;align-items:center;gap:3px}
.scrtile__mon svg{width:11px;height:11px}
.scrtile__foot{display:flex;align-items:center;gap:9px;margin-top:9px}
.scrtile__ava{position:relative;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:11px;font-weight:800;flex:none}
.scrtile__on{position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;border-radius:50%;background:#b4b2a9;border:2px solid var(--surface)}
.scrtile__on.is-on{background:#16a34a}
.scrtile__id{min-width:0}
.scrtile__id b{display:block;font-size:13px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scrtile__id span{display:block;font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scrwatch{display:grid;grid-template-columns:1.6fr 1fr;gap:16px;margin-bottom:14px}
@media(max-width:760px){.scrwatch{grid-template-columns:1fr}}
.scrwatch__screen{position:relative}
.scrwatch__badge{position:absolute;top:12px;left:12px;font-size:11px;font-weight:800;color:#fff;background:rgba(0,0,0,.55);padding:5px 10px;border-radius:7px}
.scrwatch__badge.is-live{background:#e0533d}
.scrwatch__side{display:flex;flex-direction:column;gap:11px}
.scrwatch__who{display:flex;align-items:center;gap:10px}
.scrwatch__who b{font-size:15px;font-weight:700;color:var(--ink)}
.scrwatch__who span{font-size:12px;color:var(--muted)}
.scrwatch__now{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 13px}
.scrwatch__now>span{font-size:11px;color:var(--muted);font-weight:600;display:block;margin-bottom:2px}
.scrwatch__now b{font-size:13.5px;font-weight:700}
.scrwatch__m{display:flex;gap:10px}
.scrwatch__m>div{flex:1;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.scrwatch__m b{display:block;font-size:20px;font-weight:800;color:var(--ink)}
.scrwatch__m span{font-size:11px;color:var(--muted);font-weight:600}
.scrwatch__ctrl{display:flex;align-items:center;gap:10px;margin-top:2px}
.scrwatch__play{width:42px;height:42px;border-radius:50%;background:var(--brand);color:#fff;border:none;display:grid;place-items:center;cursor:pointer;flex:none}
.scrwatch__play svg{width:20px;height:20px}
.scrspeed{display:flex;gap:5px}
.scrspeed button{font:inherit;font-size:11.5px;font-weight:700;border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:6px 9px;color:var(--muted);cursor:pointer}
.scrspeed button.is-on{background:var(--brand-tint);color:var(--brand);border-color:color-mix(in srgb,var(--brand) 40%,var(--line))}
.scrtl{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;margin-bottom:22px}
.scrtl__head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.scrtl__date{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--ink)}
.scrtl__date svg{width:16px;height:16px;color:var(--muted)}
.scrtl__bar{position:relative;height:26px;border-radius:7px;overflow:hidden;display:flex;margin-top:12px;background:#cbd3e1}
.scrtl__seg{height:100%}
.scrtl__seg.a{background:#16a34a}
.scrtl__seg.i{background:#e7c14a}
.scrtl__seg.d{background:#e0533d}
.scrtl__seg.o{background:#cbd3e1}
.scrtl__cursor{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--ink)}
.scrtl__cursor::after{content:"";position:absolute;top:-4px;left:-4px;width:10px;height:10px;border-radius:50%;background:var(--ink)}
.scrtl__ax{display:flex;justify-content:space-between;margin-top:7px;font-size:10.5px;color:var(--muted);font-weight:600}
.scrtl__leg{display:flex;gap:14px;margin-top:11px;flex-wrap:wrap}
.scrtl__leg span{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--muted);font-weight:600}
.scrtl__leg span::before{content:"";width:9px;height:9px;border-radius:2px}
.scrtl__leg .a::before{background:#16a34a}
.scrtl__leg .i::before{background:#e7c14a}
.scrtl__leg .d::before{background:#e0533d}
.scrtl__leg .o::before{background:#cbd3e1}

/* ===== Око · Экраны — плеер, перемотка, выводы (переработка) ===== */
.scrnotes{display:grid;gap:8px;margin-bottom:16px}
.okonote--off{background:color-mix(in srgb,#94a3b8 12%,var(--surface-2))}
.okonote--off svg{color:#64748b}
/* обновление агентов («Экраны» → «Видеосистема», okupdPanel в app.js):
   объявленный выпуск, журнал объявлений с кнопкой «вернуть», форма
   объявления и перечень машин с переключателем */
.okupd__rel{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 2px 12px;padding:12px 14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);font-size:12.5px}
.okupd__rel b{font-size:13.5px}
.okupd__rel span{color:var(--muted);margin-left:8px}
.okupd__rel button{margin-left:auto}
.okupd__url,.okupd__sha{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;color:var(--muted);background:var(--surface-2);border-radius:6px;padding:3px 7px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.okupd__form{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;margin:0 2px 12px}
.okupd__form label{display:flex;flex-direction:column;gap:4px;font-size:11.5px;color:var(--muted);font-weight:600;flex:1 1 160px;min-width:0}
/* адрес и хэш длинные — им отдаём больше места, чем короткому номеру версии */
.okupd__form label:nth-child(2),.okupd__form label:nth-child(3){flex:2 1 260px}
/* журнал объявлений — свёрнут, пока выпуск объявлен; развёрнут, когда его нет
   (тогда «Вернуть» и есть единственное осмысленное действие на экране) */
.okupd__hist{margin:0 2px 12px}
.okupd__hist>summary{cursor:pointer;font-size:12px;font-weight:700;color:var(--muted);padding:6px 2px;list-style:revert}
.okupd__hist>summary:hover{color:var(--brand)}
.okupd__hist .okupd__row{margin-top:6px}
.okupd__list{display:flex;flex-direction:column;gap:6px}
.okupd__row{display:flex;align-items:center;gap:12px;padding:9px 14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);font-size:12.5px}
.okupd__row.is-on{border-color:color-mix(in srgb,var(--brand) 45%,var(--line))}
.okupd__row b{flex:0 0 auto}
/* min-width:0 у гибких детей — не украшение: без него флекс-элемент не сжимается
   уже своего содержимого, и 64-значный хэш в строке журнала растягивал строку,
   а с ней и всю страницу в горизонтальную прокрутку (поймано при отрисовке
   панели с настоящим styles.css). Многоточие в .okupd__sha работает только
   вместе с этим. */
.okupd__who{color:var(--muted);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.okupd__ver{margin-left:auto;color:var(--muted);display:inline-flex;align-items:center;gap:8px;min-width:0}
.okupd__ok{display:inline-flex;align-items:center;gap:3px;font-style:normal;color:var(--up,#16b364);font-weight:700}
.okupd__ok svg{width:13px;height:13px}
/* «стояло до этого» / «записано задним числом» — предупреждающая пометка, не
   украшение: без неё плохой выпуск лежит вплотную к хорошему с такой же
   кнопкой, и отличаются они только номером */
.okupd__prev{flex:none;font-style:normal;font-size:11px;font-weight:700;color:#c99700;background:color-mix(in srgb,#c99700 14%,transparent);border-radius:5px;padding:2px 6px;white-space:nowrap}
.okupd__row .cbtn{flex:none;padding:7px 12px;font-size:12px}
.scrwatch__main{position:relative}
.scrwatch__eff{margin-left:auto;font-size:19px;font-weight:800;font-variant-numeric:tabular-nums}
.scrwatch__hint{display:flex;align-items:flex-start;gap:8px;font-size:12px;color:var(--muted);line-height:1.5;background:var(--surface-2);border-radius:var(--r-sm);padding:10px 12px}
.scrwatch__hint svg{width:15px;height:15px;flex:none;margin-top:1px}
/* плеер */
.scrhero{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:10px;display:flex;flex-direction:column;gap:10px}
.scrhero__view{position:relative;border-radius:11px;overflow:hidden}
.scrhero__badge{position:absolute;top:12px;left:12px;z-index:3;display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;color:#fff;background:rgba(0,0,0,.55);padding:5px 10px;border-radius:7px;letter-spacing:.3px}
.scrhero__badge b{font-variant-numeric:tabular-nums}
.scrhero__badge.is-live{background:#e0533d}
.scrhero__badge.is-live i{width:6px;height:6px;border-radius:50%;background:#fff;animation:pulse 1.3s infinite}
.scrhero__badge.is-off{background:#64748b}
.scrhero__badge svg{width:13px;height:13px}
.scrhero__bar{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;background:linear-gradient(transparent,rgba(6,10,18,.82))}
.scrhero__now{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:#fff;min-width:0}
.scrhero__now svg{width:15px;height:15px;color:var(--c,#fff);flex:none}
.scrhero__meta{font-size:11px;color:rgba(255,255,255,.72);font-weight:600;white-space:nowrap;flex:none}
.scrhero.is-off .scr__body,.scrhero.is-off .scr__main{filter:grayscale(1) brightness(.7)}
/* оверлей простоя */
.scridle{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;
  background:repeating-linear-gradient(45deg,rgba(231,193,74,.16) 0 14px,rgba(231,193,74,.06) 14px 28px),rgba(20,24,34,.62);backdrop-filter:blur(1px)}
.scridle__ic{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:rgba(231,193,74,.22);color:#f5d24a;margin-bottom:2px}
.scridle__ic svg{width:26px;height:26px}
.scridle b{font-size:19px;font-weight:800;color:#ffe08a;letter-spacing:2px}
.scridle__t{font-size:44px;font-weight:800;line-height:1.05;color:#fff;letter-spacing:1px;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum";text-shadow:0 2px 10px rgba(0,0,0,.45);margin:2px 0}
.scridle__d{font-size:12.5px;color:rgba(255,255,255,.85);font-weight:600}
/* оверлей «запись выключена» */
.scroff{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;text-align:center;padding:0 28px;
  background:rgba(24,28,38,.8);backdrop-filter:blur(2px)}
.scroff__ic{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:rgba(148,163,184,.24);color:#cbd5e1}
.scroff__ic svg{width:26px;height:26px}
.scroff b{font-size:16px;font-weight:800;color:#fff}
.scroff span{font-size:12.5px;color:rgba(255,255,255,.78);line-height:1.5;max-width:420px}
/* дорожка перемотки */
.scrsc{padding:2px 2px 0}
.scrsc__track{position:relative;height:26px;border-radius:7px;overflow:hidden;background:#cbd3e1;cursor:pointer;touch-action:none}
.scrsc__seg{position:absolute;top:0;height:100%;transition:opacity .15s}
/* нижний слой дорожки — куски записи. Фон трека (#cbd3e1) остаётся цветом
   ДЫРЫ: светлее кусков, поэтому перерыв читается как провал, а не как ещё
   один отрезок */
.scrsc__seg--arc{background:#8ea0bb}
.scrsc__seg.is-dim{opacity:.25}
.scrsc__now{position:absolute;top:-2px;bottom:-2px;width:2px;background:rgba(15,23,42,.5);z-index:2}
.scrsc__handle{position:absolute;top:-3px;bottom:-3px;width:3px;background:var(--ink);z-index:3;border-radius:2px;transition:left .06s linear}
.scrsc__handle::after{content:"";position:absolute;top:-5px;left:-5px;width:13px;height:13px;border-radius:50%;background:var(--ink);border:2px solid var(--surface);box-shadow:0 1px 4px rgba(0,0,0,.3)}
.scrsc__handle.is-live{background:#e0533d}.scrsc__handle.is-live::after{background:#e0533d}
.scrsc__ax{display:flex;justify-content:space-between;margin-top:6px;font-size:10.5px;color:var(--muted);font-weight:600}
/* день с работой, но без кадров: видно, что человек работал, и видно, что
   мотать нечего — курсор обычный, data-scrtrack на треке нет */
.scrsc.is-noarc .scrsc__track{cursor:default;opacity:.45}
.scrsc__why{margin-top:6px;font-size:11px;color:var(--muted);font-weight:600}
.scrsc__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:9px}
.scrsc__leg{display:flex;gap:12px;flex-wrap:wrap}
.scrsc__leg span{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--muted);font-weight:600}
.scrsc__leg span::before{content:"";width:9px;height:9px;border-radius:2px}
.scrsc__leg .a::before{background:#16a34a}.scrsc__leg .i::before{background:#e7c14a}
/* «простой» и «неизвестно» на дорожке перемотки: красный совпадает с цветом
   отрезка в scrScrub, серый — с нижним слоем кусков записи (scrsc__seg--arc),
   иначе легенда объясняла бы не те цвета, что нарисованы */
.scrsc__leg .p::before{background:#e0533d}
.scrsc__leg .o::before{background:#8ea0bb}
/* проигрыватель под дорожкой: играть/пауза и покадровый шаг. Стрелки — та же
   иконка chevron, что и везде, развёрнутая поворотом: заводить ради двух
   кнопок ещё две иконки значило бы завести два новых способа их не совпасть */
.scrsc__play{display:flex;align-items:center;gap:6px}
.scrsc__pb{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;border-radius:9px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;transition:border-color .14s,transform .1s}
.scrsc__pb svg{width:17px;height:17px}
.scrsc__pb:hover{border-color:var(--brand)}
.scrsc__pb:active{transform:scale(.94)}
.scrsc__pb.is-main{width:34px;height:34px}
.scrsc__pb.is-main svg{width:20px;height:20px}
.scrsc__pb.is-prev svg{transform:rotate(90deg)}
.scrsc__pb.is-next svg{transform:rotate(-90deg)}
.scrsc__ctrl{display:flex;align-items:center;gap:6px}
/* выводы (структурированные карточки) */
.scrins{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:12px;margin-bottom:14px}
.scrin{display:flex;align-items:flex-start;gap:11px;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--c,var(--brand));border-radius:var(--r);padding:13px 14px}
.scrin__ic{width:36px;height:36px;border-radius:10px;flex:none;display:grid;place-items:center;background:color-mix(in srgb,var(--c,var(--brand)) 14%,transparent);color:var(--c,var(--brand))}
.scrin__ic svg{width:19px;height:19px}
.scrin__b{min-width:0;display:flex;flex-direction:column}
.scrin__l{font-size:11.5px;color:var(--muted);font-weight:600}
.scrin__v{font-size:19px;font-weight:800;color:var(--ink);line-height:1.15;margin:2px 0}
.scrin__d{font-size:11.5px;color:var(--muted);line-height:1.4}
.scradvice{display:flex;gap:12px;align-items:flex-start;background:var(--brand-tint);border:1px solid color-mix(in srgb,var(--brand) 26%,var(--line));border-radius:var(--r);padding:14px 16px}
.scradvice__ic{width:38px;height:38px;border-radius:11px;flex:none;display:grid;place-items:center;background:var(--brand);color:#fff}
.scradvice__ic svg{width:20px;height:20px}
.scradvice b{font-size:13.5px;font-weight:800;color:var(--brand);display:block;margin-bottom:2px}
.scradvice p{margin:0;font-size:13px;color:var(--ink);line-height:1.55}
/* доп. состояния плитки */
.scrtile__rec.is-off{background:#64748b;letter-spacing:0}
.scrtile__rec.is-off svg{width:11px;height:11px;margin-right:2px}
.scrtile__idle{position:absolute;bottom:7px;right:7px;display:inline-flex;align-items:center;gap:4px;font-size:9.5px;font-weight:800;color:#5a4a00;background:#f5d24a;padding:3px 8px;border-radius:5px}
.scrtile__idle svg{width:11px;height:11px}
.scrtile__idle b{font-size:11.5px;font-weight:800;font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.scrtile.is-idle{border-color:color-mix(in srgb,#e7c14a 55%,var(--line))}
.scrtile.is-idle .scr__body{filter:saturate(.55) brightness(.9)}
.scrtile.is-off{opacity:.72}
.scrtile.is-off .scr__body{filter:grayscale(1) brightness(.8)}
.scrtile{position:relative}
.scrtile:hover .cam__sel,.scrtile .cam__sel.is-on,.scrtile:focus-within .cam__sel{opacity:1;transform:scale(1)}
/* Отметка «на дашборде» — обводкой, как у .cam.is-picked, а не border-color:
   по силе селектор совпадал с .scrtile:hover и, стоя ниже, съедал его —
   отмеченная плитка переставала отзываться на курсор. Обводка вдобавок
   заметнее: рамку в один пиксель на тёмной плитке легко не увидеть вовсе. */
.scrtile.is-picked{box-shadow:0 0 0 2px #16b364}

/* ===== Око · ВИДЕОСТЕНА ЭКРАНОВ (в духе Kickidler) ===== */
.okbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 2px 14px}
.okgrid{display:inline-flex;gap:3px;background:var(--surface-2);border-radius:10px;padding:3px}
.okgrid__b{border:0;background:transparent;font:inherit;font-size:12px;font-weight:700;color:var(--muted);padding:6px 11px;border-radius:8px;cursor:pointer}
.okgrid__b.is-on{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(10,16,26,.08)}
.okstat{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:0 2px 12px;font-size:12.5px;color:var(--muted);font-weight:600}
.okstat span{display:inline-flex;align-items:center;gap:6px}
.okstat svg{width:15px;height:15px}
.okstat b{color:var(--ink);font-weight:800}
.okstat .is-idle b{color:#c99700}
.okstat__hint{margin-left:auto;font-weight:500}
/* сетка стены */
.okwall{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:12px}
/* плитка экрана */
.okpane{display:flex;flex-direction:column;background:#23262b;border:1px solid #33373d;border-radius:12px;overflow:hidden;transition:border-color .15s,box-shadow .15s}
.okpane:hover{border-color:var(--brand);box-shadow:0 8px 22px rgba(10,16,26,.22)}
.okpane[draggable="true"]{cursor:grab}
.okpane.is-drag{opacity:.45;outline:2px dashed var(--brand);outline-offset:-2px}
.okpane__head{display:flex;align-items:center;gap:8px;padding:8px 10px;background:#1b1e22;border-bottom:1px solid #33373d;min-width:0}
.okpane__head b{font-size:12.5px;font-weight:700;color:#e8eaed;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.okpane__head small{font-size:11px;color:#8b9099;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.okpane__dot{width:7px;height:7px;border-radius:50%;background:#6b7280;flex:none}
.okpane__dot.is-on{background:#16b364;box-shadow:0 0 0 3px rgba(22,179,100,.18)}
.okpane__exp{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:7px;color:#c7ccd4;background:rgba(255,255,255,.07);cursor:pointer;transition:background .14s,color .14s}
.okpane__exp:hover{background:var(--brand);color:#fff}
.okpane__exp svg{width:14px;height:14px}
/* экран */
.okpane__view{position:relative;aspect-ratio:16/10;overflow:hidden;cursor:pointer;background:#0e1320}
.okpane__view .scr{position:absolute;inset:0;aspect-ratio:auto;height:100%;border-radius:0}
.okpane__shade{position:absolute;inset:0;z-index:1;background:rgba(12,15,20,.42)}
.okpane.is-idle .okpane__shade{background:repeating-linear-gradient(45deg,rgba(231,193,74,.13) 0 14px,rgba(231,193,74,.04) 14px 28px),rgba(12,15,20,.6)}
.okpane.is-off .okpane__shade{background:rgba(14,17,22,.78)}
.okpane.is-off .scr{filter:grayscale(1) brightness(.6)}
/* крупный таймер поверх экрана */
.okpane__timer{position:absolute;top:50%;left:0;right:0;z-index:2;transform:translateY(-50%);text-align:center;
  font-size:clamp(26px,5.2vw,46px);font-weight:800;line-height:1;color:#fff;letter-spacing:1px;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum";text-shadow:0 2px 14px rgba(0,0,0,.6);pointer-events:none}
.okpane__timer.is-idle{color:#ffd85e}
.okpane__timer.is-off{color:#aeb4bd}
.okpane__timer--fs{font-size:clamp(40px,7vw,84px)}
.okpane__lock{position:absolute;left:0;right:0;top:calc(50% + 34px);z-index:2;text-align:center;font-size:12.5px;font-weight:700;color:#ffd85e;letter-spacing:.4px;pointer-events:none}
.okpane__lock--fs{top:calc(50% + 62px);font-size:16px}
.okpane__rec{position:absolute;top:8px;left:8px;z-index:3;display:inline-flex;align-items:center;gap:5px;font-size:9px;font-weight:800;color:#fff;background:#e0533d;padding:3px 7px;border-radius:4px;letter-spacing:.6px}
.okpane__rec::before{content:"";width:5px;height:5px;border-radius:50%;background:#fff;animation:pulse 1.3s infinite}
.okpane__rec.is-arch{background:rgba(0,0,0,.6);letter-spacing:0;font-variant-numeric:tabular-nums}
.okpane__rec.is-arch::before{display:none}
/* строка процесса снизу */
.okpane__foot{padding:7px 10px;background:#1b1e22;border-top:1px solid #33373d}
.okpane__proc{display:flex;align-items:baseline;gap:7px;min-width:0;font-size:11.5px}
.okpane__proc svg{width:13px;height:13px;color:#8b9099;flex:none;align-self:center}
.okpane__proc em{font-style:normal;font-weight:800;color:#f5a524;flex:none}
.okpane__proc b{font-weight:700;color:#7fb3ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.okpane__proc small{color:#8b9099;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.okpane__proc.is-warn b{color:#f5a524}
.okpane__proc.is-idle b{color:#ffd85e}
.okpane__proc.is-off b{color:#aeb4bd}
/* ГРАФИК РАБОЧИХ МИНУТ под монитором */
.okch{padding:7px 10px 8px;background:#1b1e22;border-top:1px solid #2b2f35}
.okch__plot{display:flex;align-items:flex-end;gap:2px;height:38px;cursor:pointer}
.okch__col{position:relative;flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;
  background:rgba(255,255,255,.05);border-radius:2px;overflow:hidden;transition:outline .12s}
.okch__col:hover{outline:1.5px solid var(--brand)}
.okch__col.is-now{outline:1.5px solid #fff}
.okch__i{display:block;width:100%}
.okch__i--a{background:#16b364}
.okch__i--d{background:#e0533d}
.okch__i--i{background:#e7c14a}
.okch__ax{display:flex;gap:2px;margin-top:3px}
.okch__ax span{flex:1;text-align:center;font-size:8.5px;color:#8b9099;font-weight:600}
.okch--big{background:transparent;border:0;padding:10px 0 0}
.okch--big .okch__plot{height:84px;gap:4px}
.okch--big .okch__ax span{font-size:11px;color:rgba(255,255,255,.55)}
.okch__leg{display:flex;align-items:center;gap:16px;margin-top:8px;font-size:11.5px;color:rgba(255,255,255,.6);font-weight:600}
.okch__leg span{display:inline-flex;align-items:center;gap:6px}
.okch__leg span::before{content:"";width:9px;height:9px;border-radius:2px}
.okch__leg .a::before{background:#16b364}
.okch__leg .i::before{background:#e7c14a}
.okch__leg .d::before{background:#e0533d}
.okch__leg b{margin-left:auto;color:#fff;font-weight:800}
/* НА ВЕСЬ ЭКРАН */
.okfs{position:fixed;inset:0;z-index:120;display:flex;flex-direction:column;gap:10px;padding:16px 18px 18px;background:rgba(10,13,17,.96);overflow:auto}
.okfs__top{display:flex;align-items:center;gap:16px;flex-wrap:wrap;color:#fff}
.okfs__id{display:flex;align-items:center;gap:11px;min-width:0}
.okfs__id b{font-size:16px;font-weight:700;display:block}
.okfs__id span{font-size:12px;color:rgba(255,255,255,.6)}
.okfs__badge{display:inline-flex;align-items:center;gap:6px;margin-left:6px;font-size:11px;font-weight:800;color:#fff;background:rgba(255,255,255,.14);padding:5px 10px;border-radius:7px}
.okfs__badge.is-live{background:#e0533d}
.okfs__badge.is-live i{width:6px;height:6px;border-radius:50%;background:#fff;animation:pulse 1.3s infinite}
.okfs__badge.is-off{background:#64748b}
.okfs__badge svg{width:13px;height:13px}
.okfs__sum{display:flex;gap:20px;margin-left:auto}
.okfs__sum span{display:flex;flex-direction:column;font-size:11px;color:rgba(255,255,255,.6);font-weight:600}
.okfs__sum b{font-size:17px;color:#fff;font-weight:800;font-variant-numeric:tabular-nums}
.okfs__stage{position:relative;flex:1;min-height:320px;border-radius:14px;overflow:hidden;background:#0e1320}
.okfs__stage .scr{position:absolute;inset:0;aspect-ratio:auto;height:100%;border-radius:0}
.okfs__proc{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;align-items:baseline;gap:9px;padding:16px 14px 11px;background:linear-gradient(transparent,rgba(6,10,18,.85));font-size:13px}
.okfs__proc em{font-style:normal;font-weight:800;color:#f5a524}
.okfs__proc b{color:#7fb3ff;font-weight:700}
.okfs__proc span{color:rgba(255,255,255,.7)}
.okfs .scrsc{padding:0}
.okfs .scrsc__ax,.okfs .scrsc__leg span{color:rgba(255,255,255,.55)}
.okfs .scrsc__track{background:#3a3f47}
.okfs .camp{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.16);color:#fff}
.okfs .camp--play{background:var(--brand);border-color:transparent}
.okfs .camp--live{color:#ffb08a}
.okfs__strip{display:flex;gap:9px;overflow-x:auto;padding:2px;scrollbar-width:none}
.okfs__strip::-webkit-scrollbar{display:none}
.okfs__thumb{position:relative;flex:none;width:150px;aspect-ratio:16/10;border-radius:9px;overflow:hidden;border:1px solid rgba(255,255,255,.14);background:#0e1320;cursor:pointer;padding:0}
.okfs__thumb .scr{position:absolute;inset:0;aspect-ratio:auto;height:100%;border-radius:0}
.okfs__thumb.is-active{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand)}
.okfs__tl{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:14px 7px 5px;display:flex;flex-direction:column;line-height:1.15;color:#fff;font-size:10.5px;font-weight:700;background:linear-gradient(transparent,rgba(0,0,0,.82));text-align:left}
.okfs__tl small{font-size:9.5px;font-weight:500;color:rgba(255,255,255,.62)}
.scrd__ava{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;color:#fff;font-size:12px;font-weight:800}
@media (max-width:1100px){ .okwall{grid-template-columns:repeat(2,minmax(0,1fr))!important} .okstat__hint{display:none} }
@media (max-width:680px){ .okwall{grid-template-columns:1fr!important} .okfs__sum{display:none} }

/* ===== Око · стена превью на живых кадрах (задача 10) =====
   Имена .scrwall, .scrtile, .scrtile__foot совпадают с давно неживыми правилами
   выше по файлу (там же .scrwatch, .scrtl и .okfs__thumb — более старые эры этой
   же страницы) — ни один текущий шаблон их больше не создаёт (проверено по всем
   public JS), поэтому правила ниже побеждают по порядку в каскаде. Не переимено-
   вывал и не чистил чужой мёртвый CSS — вне задачи; можно снести после блока.
   ВНИМАНИЕ: перечисляя такие классы через косую черту внутри этого комментария,
   легко случайно поставить звёздочку вплотную перед косой чертой — эта пара
   символов молча закрывает комментарий раньше времени и роняет разбор всех
   правил ниже до конца файла (ровно так и было в первой версии этого абзаца,
   нашли только живой проверкой в браузере). Перечисляйте через запятую. */
.scrwall{display:grid;grid-template-columns:repeat(var(--cols,3),1fr);gap:12px}
.scrtile{display:flex;flex-direction:column;gap:0;padding:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#0f1216;cursor:pointer;font:inherit;text-align:left}
.scrtile:hover{border-color:var(--brand)}
.scrtile__view{position:relative;aspect-ratio:16/10;background:#0f1216;display:grid;place-items:center;overflow:hidden}
.scrtile__img{width:100%;height:100%;object-fit:cover;display:block}
.scrtile__view.is-empty::after{content:"нет кадра";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:11px;color:#94a3b8}
.scrtile__off{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px;color:#94a3b8;text-align:center;font-size:12px}
.scrtile__off svg{width:24px;height:24px;opacity:.8}
.scrtile__off b{color:#cbd5e1;font-size:12.5px}
.scrtile__live{position:absolute;top:8px;left:8px;display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:800;letter-spacing:.4px;color:#fff;background:rgba(0,0,0,.55);padding:3px 8px;border-radius:999px}
.scrtile__live i{width:6px;height:6px;border-radius:50%;background:#ef4444}
.scrtile__foot{display:flex;flex-direction:column;gap:2px;padding:9px 11px;background:var(--surface)}
.scrtile__foot b{font-size:13px;color:var(--ink)}
.scrtile__foot span{font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.scrhero__img{width:100%;display:block;background:#0f1216}
.scrhero__view video{width:100%;display:block;background:#0f1216}
/* Перемотка, задача 12: на выбранную секунду архивного кадра может не быть
   (сервер честно отвечает 404) — тот же приём, что у scrtile__view выше:
   прячем img, показываем плейсхолдер вместо битой картинки браузера. */
.scrhero__view.is-empty::after{content:"нет кадра на этот момент";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12.5px;color:#94a3b8;background:#0f1216}
@media (max-width:640px){ .scrwall{grid-template-columns:1fr} }

/* ===== Око · Отработанное время ===== */
.scrhrows{display:grid;gap:8px}
.scrhrow{display:grid;grid-template-columns:auto minmax(150px,1.3fr) 108px repeat(4,minmax(72px,.8fr)) minmax(150px,1.2fr);
  align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:11px 14px}
.scrhrow__ava{position:relative;width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;color:#fff;font-weight:800;font-size:13px}
.scrhrow__id{min-width:0}
.scrhrow__id b{display:block;font-size:14px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scrhrow__id span{font-size:11.5px;color:var(--muted)}
.scrhrow__bars{display:flex;align-items:flex-end;gap:2px;height:34px}
.scrbar{flex:1;min-width:2px;background:#16a34a;border-radius:2px 2px 0 0;opacity:.85}
.scrhrow__num{text-align:right}
.scrhrow__num b{display:block;font-size:15px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.scrhrow__num span{font-size:10.5px;color:var(--muted);font-weight:600}
.scrhrow__num--soft b{font-size:13.5px;color:var(--muted);font-weight:700}
.scrhrow__norm{min-width:0}
.scrhrow__bar{height:7px;border-radius:999px;background:var(--surface-2);overflow:hidden;margin-bottom:4px}
.scrhrow__bar i{display:block;height:100%;border-radius:999px}
.scrhrow__norm>span{font-size:12px;font-weight:800;display:block}
.scrhrow__norm small{font-size:10.5px;color:var(--muted);font-weight:600}
.scrhnote{display:flex;align-items:flex-start;gap:8px;margin:14px 0 0;padding:10px 12px;background:var(--surface-2);border-radius:var(--r-sm);font-size:12px;color:var(--muted);line-height:1.5}
.scrhnote svg{width:15px;height:15px;flex:none;margin-top:1px}
@media (max-width:1180px){ .scrhrow{grid-template-columns:auto minmax(140px,1fr) 92px repeat(2,minmax(66px,.8fr)) minmax(130px,1fr)}
  .scrhrow__num--soft{display:none} }
@media (max-width:760px){ .camdash{height:auto;grid-template-columns:1fr!important} .scrd__view{aspect-ratio:16/10}
  .scrhrow{grid-template-columns:auto 1fr;gap:8px} .scrhrow__bars,.scrhrow__norm{grid-column:1/-1}
  .scrhrow__num{text-align:left} .scrhrow__num--soft{display:block} }
@media (max-width:980px){ .en-kpi{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .en-kpi{grid-template-columns:1fr} }

/* ============================================================
   Пользователи: пароль в строке + редактор ника/пароля/фото.
   ДОПОЛНЯЕТ уже существующие .urow/.ubtn/.cbtn/.urow__blocked —
   тут только НОВОЕ или переопределение строки в раскрывающийся блок.
   ============================================================ */
.urow{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0;overflow:hidden}
/* при открытом списке роли снимаем обрезку строки: меню роли (.dd__menu,
   position:absolute) иначе режется overflow:hidden и «правка роли» не
   разворачивается. Закрыт список → снова hidden (клиппинг/анимация редактора). */
.urow:has(.dd.is-open){overflow:visible}
.urow__main{display:flex;align-items:center;gap:13px;padding:11px 13px;transition:background .15s}
.urow:hover{border-color:color-mix(in srgb,var(--brand) 30%,var(--line));background:var(--surface)}
.urow:hover .urow__main{background:var(--surface-2)}
.urow--open{border-color:color-mix(in srgb,var(--brand) 45%,var(--line))}
.urow--open .urow__main{background:var(--surface-2)}
.urow__ava{overflow:hidden}
.urow__ava img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
.urow__ava--img{background:var(--surface-2)}
.urow__name{flex-wrap:wrap}
.upass{flex:none;width:156px;display:flex;align-items:center;gap:5px;font-size:12.5px}
.upass__ic{flex:none;color:var(--muted);display:grid;place-items:center}
.upass__ic svg{width:15px;height:15px}
.upass__val{min-width:50px;max-width:88px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700;letter-spacing:1px;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.upass__val[data-shown="1"]{letter-spacing:.2px;color:var(--ink);font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px}
.upass--empty .upass__none{color:var(--muted);font-weight:500;font-style:italic}
.upass__act{flex:none;cursor:pointer;border:none;background:transparent;color:var(--muted);padding:4px;border-radius:7px;display:grid;place-items:center;transition:.15s}
.upass__act:hover{color:var(--brand);background:var(--brand-tint)}
.upass__act svg{width:15px;height:15px}
.urow__ctl{flex:none;display:flex;align-items:center;gap:7px}
.ubtn--icon{width:34px;height:34px;display:grid;place-items:center;padding:0}
.ubtn--icon svg{width:16px;height:16px}
.ubtn--edit{width:34px;height:34px;display:grid;place-items:center;padding:0;color:var(--ink-soft)}
.ubtn--edit svg{width:16px;height:16px}
.ubtn--edit:hover,.ubtn--edit.is-on{color:var(--brand);border-color:color-mix(in srgb,var(--brand) 35%,var(--line));background:var(--brand-tint)}
.ubtn--ghost{padding:8px 12px;display:inline-flex;align-items:center;justify-content:center;gap:6px;color:var(--ink-soft)}
.ubtn--ghost:hover{border-color:var(--brand);color:var(--brand)}
.ubtn--ghost svg{width:15px;height:15px}
.ubtn--ghost.ubtn--icon{padding:0;width:42px;height:auto}
.ubtn--save{padding:9px 16px;display:inline-flex;align-items:center;gap:6px;background:var(--brand);color:#fff;border-color:var(--brand)}
.ubtn--save:hover{filter:brightness(1.06)}
.ubtn--save:disabled{opacity:.6;cursor:default}
.ubtn--save svg{width:15px;height:15px}
.uedit{max-width:900px;margin:4px 0 12px;padding:18px 20px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface-2);animation:ueditin .18s ease}
@keyframes ueditin{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
.uedit__err{color:var(--down);font-size:12.5px;font-weight:600;margin:0 0 11px}
.uedit__err[hidden]{display:none}
.uedit__grid{display:grid;grid-template-columns:104px 1fr;gap:16px;align-items:start}
.uedit__photo{display:flex;flex-direction:column;align-items:center;gap:8px}
.uava{width:72px;height:72px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line);box-shadow:0 0 0 3px var(--surface-2),0 0 0 4px color-mix(in srgb,var(--brand) 22%,var(--line))}
.uava img{width:100%;height:100%;object-fit:cover}
.uava span{width:100%;height:100%;display:grid;place-items:center;color:#fff;font-size:23px;font-weight:800}
.uedit__photobtns{display:flex;flex-direction:column;gap:7px;width:100%}
.uedit__photobtns .ubtn{font-size:12px}
.uedit__rm:hover{color:var(--down);border-color:color-mix(in srgb,var(--down) 35%,var(--line))}
/* Аватар сотрудника: перетаскивание файла с рабочего стола / вставка скрина (Ctrl+V) */
.uedit__photo .uava{cursor:pointer;transition:border-color .15s,box-shadow .15s,background .15s}
.uedit__photo.is-dragover .uava{border:2px dashed var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 22%,transparent);background:color-mix(in srgb,var(--brand) 8%,var(--surface-2))}
.uedit__photohint{font-size:10.5px;line-height:1.3;color:var(--muted);text-align:center;max-width:104px}
@media (max-width:760px){.uedit__photohint{display:none}}
.uedit__fields{display:flex;flex-direction:column;gap:9px;min-width:0}
.ufield{display:flex;flex-direction:column;gap:4px}
.ufield__l{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--ink-soft)}
.ufield__l em{font-style:normal;font-weight:500;color:var(--muted)}
.ufield__l svg{width:15px;height:15px;color:var(--muted)}
.ufield__hint{font-size:11.5px;color:var(--muted)}
.uinput{width:100%;padding:8px 11px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);color:var(--ink);font:inherit;font-size:13px;transition:border-color .15s,box-shadow .15s}
.uinput:hover{border-color:color-mix(in srgb,var(--brand) 24%,var(--line))}
.uinput:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 14%,transparent)}
.upwedit{display:flex;gap:8px}
.upwedit .uinput{flex:1;font-family:ui-monospace,Menlo,Consolas,monospace}
.uedit__actions{display:flex;justify-content:flex-end;gap:10px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
/* --- Кнопка и редактор доступов по доскам (точечные доодобрения) --- */
.ubtn--acc{color:var(--ink-soft)}
.ubtn--acc:hover,.ubtn--acc.is-on{color:var(--brand);border-color:color-mix(in srgb,var(--brand) 35%,var(--line));background:var(--brand-tint)}
.uacc{padding:16px 14px 14px;border-top:1px dashed var(--line);background:var(--surface);animation:ueditin .18s ease}
.uacc__err{color:var(--down);font-size:12.5px;font-weight:600;margin:0 0 11px}
.uacc__err[hidden]{display:none}
.uacc__note{font-size:12.5px;line-height:1.45;color:var(--ink-soft);margin:0 0 14px;display:flex;gap:7px;align-items:flex-start}
.uacc__note svg{width:15px;height:15px;color:var(--brand);flex:none;margin-top:1px}
.uacc__groups{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:760px){.uacc__groups{grid-template-columns:1fr}}
.uacc__gh{font-size:12px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin:0 0 8px}
.uacc__items{display:flex;flex-direction:column;gap:5px}
.uacc__item{display:flex;align-items:center;gap:9px;padding:7px 9px;border:1px solid var(--line);border-radius:var(--r-sm);cursor:pointer;transition:border-color .12s,background .12s}
.uacc__item:hover{border-color:color-mix(in srgb,var(--brand) 30%,var(--line))}
.uacc__item.is-on{border-color:color-mix(in srgb,var(--brand) 45%,var(--line));background:var(--brand-tint)}
.uacc__item input{position:absolute;opacity:0;width:0;height:0}
.uacc__box{flex:none;width:18px;height:18px;border:1.5px solid var(--line);border-radius:5px;display:grid;place-items:center;background:var(--surface);transition:border-color .12s,background .12s}
.uacc__box svg{width:12px;height:12px;color:#fff;opacity:0;transition:opacity .12s}
.uacc__item.is-on .uacc__box{background:var(--brand);border-color:var(--brand)}
.uacc__item.is-on .uacc__box svg{opacity:1}
.uacc__lbl{font-size:13px;color:var(--ink);flex:1;min-width:0}
.uacc__from{font-size:10.5px;font-weight:700;color:var(--muted);background:var(--surface-2);border-radius:999px;padding:2px 7px;flex:none}
.uacc__write{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px;padding-top:14px;border-top:1px dashed var(--line)}
.uacc__wl{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:var(--ink-soft)}
.uacc__wl svg{width:15px;height:15px;color:var(--muted)}
.uacc__wseg{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.uacc__wbtn{padding:7px 12px;font:inherit;font-size:12.5px;background:var(--surface);color:var(--ink-soft);border:none;border-left:1px solid var(--line);cursor:pointer;transition:background .12s,color .12s}
.uacc__wbtn:first-child{border-left:none}
.uacc__wbtn:hover{color:var(--brand)}
.uacc__wbtn.is-on{background:var(--brand);color:#fff}
@media (max-width:900px){
  .urow__main{flex-wrap:wrap}
  .upass{width:auto;order:5}
}
@media (max-width:760px){
  .uedit__grid{grid-template-columns:1fr}
  .uedit__photo{flex-direction:row;align-items:center;gap:14px}
  .uava{width:80px;height:80px}
  .uava span{font-size:26px}
  .uedit__photobtns{flex:1}
}
@media (max-width:560px){
  .urow__ctl{margin-left:auto}
}

/* ===== Камеры — единая видеостена магазинов (state.view="cameras") ===== */
/* общий вид «камерной» сцены (силуэты) — используется в фокусе, плитках и на весь экран */
.cam__scene .cs-floor{opacity:.42;stroke-width:1.2}
.cam__scene .cs-obj{opacity:.55;stroke-width:1.4}
.cam__scene .cs-hi{opacity:.8;stroke-width:.7}
@keyframes campulse{0%{box-shadow:0 0 0 0 rgba(255,59,48,.55)}70%{box-shadow:0 0 0 7px rgba(255,59,48,0)}100%{box-shadow:0 0 0 0 rgba(255,59,48,0)}}
.cam__live{position:absolute;top:10px;left:10px;z-index:3;display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;letter-spacing:.06em;color:#fff;background:rgba(0,0,0,.4);padding:4px 9px;border-radius:30px}
.cam__live i{width:7px;height:7px;border-radius:50%;background:#ff3b30;animation:campulse 1.5s infinite}
.cam__live--lg{font-size:12px;padding:5px 11px}
.camsig{display:inline-flex;align-items:flex-end;gap:2px;height:13px}
.camsig i{width:3px;background:#fff;border-radius:1px}
.camsig i:nth-child(1){height:5px}.camsig i:nth-child(2){height:8px}.camsig i:nth-child(3){height:11px}.camsig i:nth-child(4){height:13px;opacity:.5}
.cam__off{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#8b919c;font-size:11.5px;font-weight:600}
.cam__off svg{width:24px;height:24px;opacity:.7}

/* фокус-просмотр */
.camhero{margin:0 0 16px}
.camhero__view{position:relative;aspect-ratio:21/9;max-height:62vh;border-radius:var(--r);overflow:hidden;isolation:isolate;background:radial-gradient(130% 130% at 50% 0%,#283546 0%,#141b25 55%,#0a0e14 100%);color:#bcd4f0}
.camhero.is-off .camhero__view{background:linear-gradient(160deg,#23262b,#15171b)}
.camhero__view .cam__scene{position:absolute;inset:0;width:100%;height:100%;color:rgba(150,196,240,.5)}
.camhero__view::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;box-shadow:inset 0 0 120px 18px rgba(0,0,0,.5)}
.camhero__view::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.4;background:repeating-linear-gradient(0deg,rgba(255,255,255,.04) 0 1px,transparent 1px 3px)}
.camhero__meta{flex:none;display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;color:rgba(255,255,255,.78);font-variant-numeric:tabular-nums;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.camhero__bar{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:36px 16px 14px;background:linear-gradient(transparent,rgba(0,0,0,.8))}
.camhero__id{min-width:0}
.camhero__zone{display:block;color:#fff;font-size:20px;font-weight:700;line-height:1.15}
.camhero__store{display:inline-flex;align-items:center;gap:6px;color:rgba(255,255,255,.74);font-size:13px;margin-top:3px}
.camhero__store svg{width:14px;height:14px;flex:none}
.camhero__ctrl{position:absolute;top:12px;right:12px;z-index:3;display:flex;align-items:center;gap:8px}
.cambtn{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;border-radius:11px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.12);color:#fff;font:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:background .15s,transform .12s}
.cambtn svg{width:16px;height:16px}
.cambtn:hover{background:rgba(255,255,255,.22)}
.cambtn:active{transform:scale(.97)}
.cambtn--accent{background:var(--brand);border-color:transparent}
.cambtn--accent:hover{background:#ff5e1f}
.camhero.is-off .camhero__bar{background:linear-gradient(transparent,rgba(0,0,0,.6))}

/* таймлайн с перемоткой: дорожка + бегунок + метки открытия/закрытия + плеер */
.camscrub{margin-top:12px;padding:0 2px}
.camscrub__track{position:relative;height:8px;border-radius:8px;background:var(--surface-2);cursor:pointer;touch-action:none}
.camscrub__arch{position:absolute;left:0;top:0;bottom:0;border-radius:8px;background:linear-gradient(90deg,rgba(13,148,136,.3),rgba(255,77,6,.6))}
.camscrub__mark{position:absolute;top:50%;width:11px;height:11px;border-radius:50%;transform:translate(-50%,-50%);border:2px solid var(--surface);z-index:1}
.camscrub__mark--open{background:#16b364}
.camscrub__mark--close{background:#e0533d}
.camscrub__handle{position:absolute;top:50%;width:16px;height:16px;border-radius:50%;background:var(--brand);border:3px solid var(--surface);transform:translate(-50%,-50%);box-shadow:0 1px 4px rgba(0,0,0,.25);z-index:2;cursor:grab}
.camscrub__handle:active{cursor:grabbing}
.camscrub__handle.is-live{background:#ff3b30}
.camscrub__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:11px;flex-wrap:wrap}
.camscrub__lbl{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600}
.camscrub__livelbl{display:inline-flex;align-items:center;gap:6px;color:var(--brand)}
.camscrub__livelbl i{width:7px;height:7px;border-radius:50%;background:#ff3b30;animation:campulse 1.5s infinite}
.camscrub__archlbl{display:inline-flex;align-items:center;gap:6px;color:#b4801a}
.camscrub__archlbl svg{width:14px;height:14px}
.camscrub.is-live .camscrub__archlbl{display:none}
.camscrub.is-arch .camscrub__livelbl{display:none}
.camscrub__ctrl{display:flex;align-items:center;gap:6px}
.camp{display:inline-flex;align-items:center;justify-content:center;gap:5px;height:34px;min-width:34px;padding:0 9px;border-radius:9px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;transition:background .14s,border-color .14s,transform .1s}
.camp svg{width:16px;height:16px}
.camp:hover{border-color:var(--brand)}
.camp:active{transform:scale(.95)}
.camp[disabled]{opacity:.4;cursor:default}
.camp--play{background:var(--brand);border-color:transparent;color:#fff}
.camp--play[disabled]{background:var(--surface-2);color:var(--muted)}
.camp--spd.is-on{border-color:var(--brand);color:var(--brand)}
.camp--live{color:var(--brand)}
.camp--live svg{width:13px;height:13px}
.camp--live.is-cur{opacity:.45}
@media(max-width:600px){ .camp--live span{display:none} }

/* чипы-фильтры магазинов */
.camchips{display:flex;gap:9px;overflow-x:auto;padding:2px 2px 14px;scrollbar-width:none}
.camchips::-webkit-scrollbar{display:none}
.camchip{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px;border-radius:30px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;font-size:13.5px;font-weight:600;white-space:nowrap;cursor:pointer;transition:border-color .15s,background .15s,transform .12s}
.camchip svg{width:15px;height:15px;color:var(--muted)}
.camchip:hover{border-color:var(--brand)}
.camchip:active{transform:scale(.97)}
.camchip__n{font-size:11.5px;font-weight:700;color:var(--muted);background:var(--surface-2);padding:1px 7px;border-radius:20px}
.camchip.is-on{background:var(--brand);border-color:transparent;color:#fff}
.camchip.is-on svg,.camchip.is-on .camchip__n{color:#fff}
.camchip.is-on .camchip__n{background:rgba(255,255,255,.22)}

/* сетка превью */
.camwall{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:14px}
.cam{position:relative;display:block;width:100%;aspect-ratio:16/9;padding:0;text-align:left;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;cursor:pointer;isolation:isolate;background:radial-gradient(120% 120% at 50% 0%,#26313f 0%,#141a23 55%,#0b0f15 100%);color:#bcd4f0;transition:transform .16s,box-shadow .16s,border-color .16s}
.cam:hover{transform:translateY(-2px);border-color:#0d9488;box-shadow:0 12px 26px rgba(10,16,26,.22)}
.cam.is-active{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand)}
.cam .cam__scene{position:absolute;inset:0;width:100%;height:100%;color:rgba(150,196,240,.5);transition:transform .25s}
.cam:hover .cam__scene{transform:scale(1.04)}
.cam::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;box-shadow:inset 0 0 56px 10px rgba(0,0,0,.5)}
.cam::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5;background:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 3px)}
.cam__time{position:absolute;top:8px;right:9px;z-index:3;font-size:10.5px;font-weight:600;color:rgba(255,255,255,.85);font-variant-numeric:tabular-nums;text-shadow:0 1px 2px rgba(0,0,0,.7)}
.cam__bar{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;align-items:center;gap:7px;padding:18px 10px 8px;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.72))}
.cam__ic{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:6px;background:rgba(13,148,136,.9);color:#fff}
.cam__ic svg{width:13px;height:13px}
.cam__name{display:flex;flex-direction:column;line-height:1.2;font-size:12.5px;font-weight:600;min-width:0}
.cam__name small{font-size:11px;font-weight:500;color:rgba(255,255,255,.66)}
.cam__exp{margin-left:auto;flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:7px;background:rgba(255,255,255,.14);color:#fff;opacity:0;transform:translateY(2px);transition:opacity .16s,transform .16s}
.cam__exp svg{width:14px;height:14px}
.cam:hover .cam__exp{opacity:1;transform:translateY(0)}
.cam__now{margin-left:auto;font-size:10.5px;font-weight:800;letter-spacing:.04em;color:#fff;background:var(--brand);padding:2px 8px;border-radius:20px;white-space:nowrap}
.cam--off{cursor:default;color:#5d636e;background:linear-gradient(160deg,#23262b,#15171b)}
.cam--off:hover{transform:none;border-color:var(--line);box-shadow:none}
.cam--off .cam__scene{opacity:.22;filter:grayscale(1)}
.cam--off .cam__ic{background:rgba(255,255,255,.1)}
@media(max-width:560px){ .camwall{grid-template-columns:1fr 1fr;gap:10px} }
@media(max-width:380px){ .camwall{grid-template-columns:1fr} }
@media(max-width:600px){ .cambtn span{display:none} .cambtn{padding:0 11px} .camhero__zone{font-size:18px} }

/* режим «на весь экран» */
.camfs{position:fixed;inset:0;z-index:120;display:flex;flex-direction:column;gap:12px;padding:18px;background:rgba(8,11,16,.93)}
.camfs__top{display:flex;align-items:center;justify-content:space-between;gap:14px;color:#fff}
.camfs__id{display:flex;align-items:center;gap:12px;min-width:0;flex-wrap:wrap}
.camfs__id .cam__live{position:static}
.camfs__id b{font-size:17px;font-weight:700}
.camfs__id>span{color:rgba(255,255,255,.66);font-size:13px;font-variant-numeric:tabular-nums}
.camfs__close{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:12px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.1);color:#fff;cursor:pointer}
.camfs__close svg{width:20px;height:20px}
.camfs__close:hover{background:rgba(255,255,255,.2)}
.camfs__stage{position:relative;flex:1;min-height:0;border-radius:var(--r);overflow:hidden;isolation:isolate;background:radial-gradient(130% 130% at 50% 0%,#283546,#0a0e14);color:#bcd4f0}
.camfs__stage .cam__scene{position:absolute;inset:0;width:100%;height:100%;color:rgba(150,196,240,.5)}
.camfs__stage::before{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 160px 22px rgba(0,0,0,.5)}
.camhero__meta--fs{top:14px;right:16px}
.camfs__strip{display:flex;gap:10px;overflow-x:auto;padding:2px;scrollbar-width:none}
.camfs__strip::-webkit-scrollbar{display:none}
.camfs__thumb{position:relative;flex:none;width:152px;aspect-ratio:16/9;border-radius:10px;overflow:hidden;border:1px solid rgba(255,255,255,.14);background:radial-gradient(120% 120% at 50% 0%,#26313f,#0b0f15);color:#bcd4f0;cursor:pointer;isolation:isolate;padding:0}
.camfs__thumb .cam__scene{position:absolute;inset:0;width:100%;height:100%;color:rgba(150,196,240,.45)}
.camfs__thumb.is-active{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand)}
.camfs__tl{position:absolute;left:0;right:0;bottom:0;padding:12px 7px 5px;display:flex;flex-direction:column;line-height:1.15;color:#fff;font-size:11px;font-weight:600;background:linear-gradient(transparent,rgba(0,0,0,.78))}
.camfs__tl small{font-size:10px;color:rgba(255,255,255,.62)}

/* вспышка при снимке кадра */
.camshot-flash{position:absolute;inset:0;z-index:6;background:#fff;pointer-events:none;animation:camflash .44s ease-out forwards}
@keyframes camflash{0%{opacity:0}14%{opacity:.85}100%{opacity:0}}

/* ----- архив (перемотка): бейдж и тонировка фокуса ----- */
.cam__arch{position:absolute;top:10px;left:10px;z-index:3;display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;letter-spacing:.05em;color:#fff;background:rgba(186,117,23,.92);padding:4px 9px;border-radius:30px}
.cam__arch svg{width:13px;height:13px}
.cam__arch b{font-variant-numeric:tabular-nums}
.camhero.is-arch .camhero__view{filter:saturate(.85) brightness(.92)}

/* ----- люди в кадре: пилюли на фокусе и плитках ----- */
.camhero__zrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.campeep{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;padding:2px 9px;border-radius:20px;background:rgba(255,255,255,.16);color:#fff}
.campeep svg{width:13px;height:13px}
.campeep.is-on{background:rgba(22,179,100,.92)}
.cam__peep{position:absolute;top:8px;right:8px;z-index:3;display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:700;color:#fff;background:rgba(0,0,0,.42);padding:2px 7px;border-radius:20px}
.cam__peep svg{width:12px;height:12px}
.cam__peep.is-on{background:rgba(22,179,100,.9)}
.cam__name{margin-right:6px}

/* ----- пилюля статуса объекта ----- */
.campill{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;padding:2px 9px;border-radius:20px;white-space:nowrap}
.campill svg{width:11px;height:11px}
.campill--open{background:rgba(22,179,100,.14);color:#0f7a52}
.campill--open svg{color:#16b364}
.campill--closed{background:var(--surface-2);color:var(--muted)}

/* ===== Камеры: современная лаконичная отделка (v2 дизайн) ===== */
/* больше воздуха и спокойнее ритм секций */
.camhero{margin:6px 0 20px}
.camhero__view{border-radius:18px;max-height:56vh}
.camhero__bar{padding:42px 18px 16px;gap:12px}
.camhero__zone{font-size:21px;font-weight:600;letter-spacing:-.01em}
.camhero__store{font-size:12.5px;color:rgba(255,255,255,.66)}
.camchips{padding-bottom:20px}
.en-kpi{margin-bottom:22px}
/* спокойнее тёмная сцена фокуса — мягкий премиум-градиент */
.camhero__view{background:radial-gradient(120% 130% at 50% -10%,#2b3645 0%,#161d27 52%,#0b1018 100%)}
.camhero__view::before{box-shadow:inset 0 0 140px 22px rgba(0,0,0,.46)}

/* стеклянные круглые кнопки управления в углу кадра */
.camgbtn{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:rgba(18,24,34,.42);color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background .15s,transform .12s,border-color .15s}
.camgbtn svg{width:17px;height:17px}
.camgbtn:hover{background:rgba(18,24,34,.72);border-color:rgba(255,255,255,.34)}
.camgbtn:active{transform:scale(.92)}
.camgbtn--accent{background:var(--brand);border-color:transparent}
.camgbtn--accent:hover{background:#ff5e1f}

/* плитки: чище, без лишнего хрома, спокойный ховер */
.camwall{gap:13px}
.cam{border-radius:14px;background:radial-gradient(120% 130% at 50% -10%,#28333f 0%,#161d27 55%,#0b1018 100%)}
.cam::before{box-shadow:inset 0 0 50px 12px rgba(0,0,0,.42)}
.cam::after{opacity:.32}
.cam__bar{padding:20px 11px 9px;gap:8px}
.cam__name{font-size:13px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-right:0}
.cam__live{top:9px;left:9px;font-size:10px;letter-spacing:.08em;background:rgba(0,0,0,.4);padding:3px 8px}
.cam__peep svg{width:12px;height:12px}
.cam__peep.is-on{background:rgba(22,179,100,.92)}
.cam__exp{width:26px;height:26px;background:rgba(255,255,255,.16)}
.cam.is-active{box-shadow:0 0 0 2px var(--brand)}
.cam:hover{border-color:rgba(255,255,255,.28)}

/* людская пилюля на фокусе — мягче */
.campeep{font-weight:600;padding:3px 10px}

.campill{font-weight:600}

/* таймлайн перемотки — тоньше и спокойнее */
.camscrub{margin-top:14px}
.camscrub__track{height:6px}
.camscrub__handle{width:15px;height:15px}
.camp{height:36px;border-radius:10px}
.camp--play{height:36px}

/* ===== Камеры v3: серые заставки, встроенный плеер, выбор, дашборд ===== */
/* серые «заставки» вместо синих — нейтральный тон камеры */
.cam,.camd{background:radial-gradient(120% 130% at 50% -10%,#33373d 0%,#202327 55%,#131517 100%)}
.camhero__view,.camfs__stage{background:radial-gradient(120% 130% at 50% -10%,#34383e 0%,#202327 52%,#131517 100%)}
.camfs__thumb{background:radial-gradient(120% 130% at 50% -10%,#33373d,#131517)}
.cam .cam__scene,.camhero__view .cam__scene,.camfs__stage .cam__scene,.camfs__thumb .cam__scene,.camd .cam__scene{color:rgba(198,201,206,.5)}
.camhero.is-arch .camhero__view{filter:grayscale(1) brightness(.9)}

/* плитка как div-кнопка */
.cam{cursor:pointer}
.cam:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* встроенный плеер ВСЕГДА под сеткой камер магазина (во всю ширину) */
.camplayer{grid-column:1/-1;margin:14px 0 2px}
.camplayer .camhero{margin:0}
.camplayer .camhero__view{max-height:none;aspect-ratio:21/9}
@media(max-width:760px){ .camplayer .camhero__view{aspect-ratio:16/9} }
.camgbtn--close{background:rgba(18,24,34,.5)}

/* счётчик людей снова в нижней строке (угол занял выбор) */
.cam__peep{position:static;top:auto;right:auto;flex:none;display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:700;color:#fff;background:rgba(0,0,0,.4);padding:1px 7px;border-radius:20px}
.cam__bar .cam__name{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* кнопка выбора камеры на дашборд */
.cam__sel{position:absolute;top:8px;right:8px;z-index:4;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;border:1.5px solid rgba(255,255,255,.55);background:rgba(0,0,0,.35);color:#fff;cursor:pointer;opacity:0;transform:scale(.9);transition:opacity .14s,transform .14s,background .14s;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.cam__sel svg{width:14px;height:14px}
.cam:hover .cam__sel,.cam--off:hover .cam__sel{opacity:1;transform:scale(1)}
.cam__sel:hover{background:rgba(0,0,0,.62)}
.cam__sel.is-on{opacity:1;transform:scale(1);background:#16b364;border-color:transparent}
.cam.is-picked,.cam--off.is-picked{box-shadow:0 0 0 2px #16b364}
.cam.is-picked.is-active{box-shadow:0 0 0 2px var(--brand)}

/* переключатель Видеостена / Дашборд */
.cammode{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 2px 18px}
.camseg{display:inline-flex;background:var(--surface-2);border-radius:12px;padding:4px;gap:4px}
.camseg__b{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px;border:none;border-radius:9px;background:transparent;color:var(--muted);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;transition:background .14s,color .14s}
.camseg__b svg{width:16px;height:16px}
.camseg__b.is-on{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(10,16,26,.08)}
.camseg__n{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:20px;background:var(--brand);color:#fff;font-size:11px;font-weight:700}
.cammode__hint{font-size:12.5px;color:var(--muted)}
.cambtn-ghost{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.cambtn-ghost svg{width:15px;height:15px}
.cambtn-ghost:hover{border-color:var(--brand)}

/* дашборд: все выбранные камеры на один экран */
.camdash-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 2px 12px;font-size:13px;color:var(--muted);font-weight:600}
.camdash{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));grid-auto-rows:1fr;gap:10px;height:calc(100vh - 232px);min-height:340px}
.camd{position:relative;display:block;width:100%;height:100%;min-height:0;padding:0;text-align:left;border:1px solid var(--line);border-radius:13px;overflow:hidden;cursor:pointer;isolation:isolate;color:#c6c9ce;transition:border-color .15s,box-shadow .15s}
.camd:hover{border-color:var(--brand);box-shadow:0 8px 22px rgba(10,16,26,.18)}
.camd .cam__scene{position:absolute;inset:0;width:100%;height:100%;color:rgba(198,201,206,.5)}
.camd::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;box-shadow:inset 0 0 50px 12px rgba(0,0,0,.42)}
.camd .cam__bar{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;align-items:center;gap:7px;padding:16px 9px 7px;background:linear-gradient(transparent,rgba(0,0,0,.74))}
.camd .cam__name{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;line-height:1.15;color:#fff;font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.camd .cam__name small{font-size:10.5px;font-weight:500;color:rgba(255,255,255,.6)}
.camdash-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:64px 20px;color:var(--muted);background:var(--surface-2);border-radius:16px}
.camdash-empty svg{width:34px;height:34px;opacity:.6}
.camdash-empty p{margin:0;font-size:15px;font-weight:600;color:var(--ink)}
.camdash-empty span{font-size:13px;max-width:400px}
@media(max-width:600px){ .camdash{height:auto;grid-template-columns:1fr 1fr} }

/* ===== «Пользователи» Этап 1: контакты, копировать доступы, добавить/удалить ===== */
.ucontacts{display:inline-flex;align-items:center;gap:4px;margin-left:7px;vertical-align:middle}
.ucontact{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:6px;color:var(--muted);background:var(--surface-2);transition:.15s}
.ucontact:hover{color:#fff;background:var(--brand)}
.ucontact svg{width:13px;height:13px}
/* Анкета сотрудника на странице доступов: город · др + «о себе» */
.urow__prof{display:flex;flex-wrap:wrap;gap:3px 14px;margin-top:3px}
.uprof{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--muted)}
.uprof__ic{width:13px;height:13px;opacity:.85;flex:none}
.urow__about{margin-top:3px;font-size:12px;color:var(--ink-soft,#5b6470);line-height:1.4;max-width:560px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ubtn--creds{color:var(--ink-soft)}
.ubtn--creds:hover{color:var(--brand);border-color:color-mix(in srgb,var(--brand) 35%,var(--line));background:var(--brand-tint)}

/* ===== Закупки — отчёт «что заказать» (страница #stats) · паттерны главной ===== */
.purch-kpis{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-bottom:16px}
.purch-kpi{padding:13px 14px}
.metric__value.is-bad{color:var(--down)}
.kpi-chart{margin-left:auto;width:24px;height:24px;flex:none;border:none;background:transparent;color:var(--muted);display:inline-grid;place-items:center;border-radius:7px;cursor:pointer;transition:.15s}
.kpi-chart svg{width:15px;height:15px}
.kpi-chart:hover{color:var(--brand);background:var(--brand-tint)}
.kpichart{min-height:200px}
.orders-box{max-height:62vh;overflow:auto;margin-top:2px}
.orders-sum{font-size:13px;color:var(--muted);font-weight:600;margin:0 2px 12px}
.orders-sum b{color:var(--ink)}
.orders-stage{margin-bottom:14px}
.orders-stage__h{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:800;color:var(--ink);margin:0 0 7px}
.orders-stage__n{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--brand-tint);color:var(--brand);font-size:11.5px;font-weight:800}
.orders-item{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:8px 11px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);margin-bottom:6px}
.orders-item__t{font-size:13px;font-weight:700;color:var(--ink)}
.orders-item__s{font-size:11.5px;color:var(--muted);font-weight:600;font-variant-numeric:tabular-nums}
.purch-why{flex:none;width:22px;height:22px;border:none;background:transparent;color:var(--muted);display:inline-grid;place-items:center;border-radius:6px;cursor:pointer;transition:.15s}
.purch-why svg{width:14px;height:14px}
.purch-why:hover{color:var(--brand);background:var(--brand-tint)}
.purch-chev{flex:none;width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:8px;background:transparent;color:var(--muted);cursor:pointer;padding:0}
.purch-chev svg{width:15px;height:15px;transition:transform .15s}
.purch-chev:hover{border-color:var(--brand);color:var(--brand)}
.purch-chev.is-open svg{transform:rotate(180deg)}
.why-list{margin:0;padding:0 0 0 18px;font-size:14px;line-height:1.7}
.why-list li{margin:3px 0}
.why-rec{margin-top:12px;padding:11px 13px;background:var(--brand-tint);border-radius:var(--r-sm);font-size:14px;line-height:1.55;font-weight:600;color:var(--ink)}
/* поповер «почему столько» по наведению на «i» (десктоп) — фирменный стиль как .k5tip,
   но с вёрсткой why-box внутри; pointer-events включены, чтобы курсор можно было завести внутрь */
.why-pop{position:fixed;z-index:90;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:13px 15px;width:320px;max-width:calc(100vw - 20px);
  box-shadow:0 14px 38px rgba(0,0,0,.18);opacity:0;transform:translateY(-4px);
  transition:opacity .12s ease,transform .12s ease}
.why-pop.is-on{opacity:1;transform:translateY(0)}
.why-pop[hidden]{display:none}
.why-pop .why-list{font-size:13px;line-height:1.55}
.why-pop .why-rec{margin-top:10px;font-size:13px;padding:9px 11px}
.why-pop::after{content:"";position:absolute;bottom:-5px;left:var(--ax,50%);margin-left:-4px;
  width:9px;height:9px;background:var(--surface);border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);transform:rotate(45deg)}
.why-pop--below::after{bottom:auto;top:-5px;border-right:none;border-bottom:none;
  border-left:1px solid var(--line);border-top:1px solid var(--line)}
[data-theme="dark"] .why-pop{box-shadow:0 14px 36px rgba(0,0,0,.5)}
.purch-hint{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);font-weight:600;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 12px;margin-bottom:14px}
.purch-hint svg{width:15px;height:15px;flex:none;color:var(--muted)}
/* Плашка-пояснение «что в списке» — компактная инфо-строка в одну-две строки:
   маленькая бренд-иконка + текст одним абзацем. «дефицит» — в бренд-цвете, операторы
   и условие приглушены, «серым …» — muted-хвост. Термы формулы скреплены &nbsp;, не рвём. */
.purch-explain{display:flex;align-items:flex-start;gap:8px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:9px 13px;margin-bottom:13px}
.purch-explain__ic{flex:none;margin-top:1px;color:var(--brand)}
.purch-explain__ic svg{width:15px;height:15px;display:block}
.purch-explain__line{margin:0;font-size:12.5px;line-height:1.55;color:var(--ink-soft);
  font-variant-numeric:tabular-nums}
.purch-explain__h{color:var(--ink);font-weight:800}
.purch-explain__res{color:var(--brand);font-weight:800}
.purch-explain__line i{font-style:normal;font-weight:700;color:var(--muted)}
.purch-explain__rest{color:var(--muted)}
/* Закупки — крупное поле поиска по товарам (во всю ширину, на месте прежней плашки-пояснения) */
.purch-bigsearch{display:flex;align-items:center;gap:11px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);padding:13px 16px;margin:0 0 13px;
  transition:border-color .15s,box-shadow .15s}
.purch-bigsearch:focus-within{border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 13%,transparent)}
.purch-bigsearch__ic{flex:none;display:grid;place-items:center;color:var(--muted);transition:color .15s}
.purch-bigsearch__ic svg{width:19px;height:19px;display:block}
.purch-bigsearch:focus-within .purch-bigsearch__ic{color:var(--brand)}
.purch-bigsearch__in{flex:1;min-width:0;border:none;background:transparent;font:inherit;
  font-size:15px;font-weight:500;color:var(--ink);outline:none}
.purch-bigsearch__in::placeholder{color:var(--muted);font-weight:500}
.purch-bigsearch__in::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.purch-bigsearch__x{flex:none;border:none;background:transparent;width:28px;height:28px;border-radius:8px;
  display:none;place-items:center;cursor:pointer;color:var(--muted);transition:.15s}
.purch-bigsearch__x svg{width:14px;height:14px}
.purch-bigsearch__x:hover{color:var(--down);background:color-mix(in srgb,var(--down) 12%,transparent)}
.purch-bigsearch.is-filled .purch-bigsearch__x{display:grid}
.purch-list{display:grid;gap:9px}
.purch-card{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--st,var(--brand));
  border-radius:14px;padding:11px 13px;transition:border-color .15s}
.purch-card:hover{border-color:color-mix(in srgb,var(--st,var(--brand)) 45%,var(--line))}
.purch-card__top{display:flex;align-items:center;gap:10px}
.purch-ic{width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center;
  background:color-mix(in srgb,var(--c,var(--brand)) 14%,var(--surface));color:var(--c,var(--brand))}
.purch-ic svg{width:17px;height:17px}
.purch-hd{flex:1;min-width:0}
.purch-nm{font-size:18.9px;font-weight:800;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.purch-tags{margin-top:3px;display:flex;gap:5px;flex-wrap:wrap}
.purch-tag{display:inline-flex;align-items:center;gap:3px;font-size:10px;font-weight:700;color:var(--muted);
  background:var(--surface-2);border-radius:999px;padding:2px 8px;white-space:nowrap}
.purch-tag svg{width:11px;height:11px}
.purch-lb{flex:none;font-size:11.5px;font-weight:800;padding:5px 11px;border-radius:999px;white-space:nowrap;letter-spacing:.1px}
.purch-lb--crit{background:color-mix(in srgb,var(--down) 13%,var(--surface));color:#c43c28}
.purch-lb--ok{background:color-mix(in srgb,var(--up) 13%,var(--surface));color:#1d7a4f}
.purch-lb--soon{background:color-mix(in srgb,#ff9408 17%,var(--surface));color:#b56b00}
.purch-lb--dead{background:var(--surface-2);color:var(--muted)}
[data-theme="dark"] .purch-lb--crit{color:#f0907a}
[data-theme="dark"] .purch-lb--ok{color:#33bd82}
[data-theme="dark"] .purch-lb--soon{color:#f0b62a}
.purch-body{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
.purch-msrow{flex:1 1 360px;display:grid;grid-template-columns:repeat(auto-fit,minmax(98px,1fr));gap:10px 12px}
/* Раскрывающийся блок графиков динамики в строке отчёта «Закупки» (2026-08-12).
   Цвета тренда — общие переменные --up/--down (у них есть значения и для тёмной темы). */
.pchart{border-top:1px solid var(--line);margin:10px 0 0;padding:10px 0 12px}
.pchart__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pchart__cell{display:block;width:100%;text-align:left;background:var(--surface-2,var(--surface));
  border:1px solid var(--line);border-radius:10px;padding:8px 9px;cursor:pointer;font:inherit;color:inherit}
.pchart__cell:hover{border-color:var(--brand)}
/* Ячейка без данных из-за сбоя 1С (Task 4) — это div, не button: не кликабельна,
   поэтому без указателя и без подсветки рамки при наведении; геометрия та же. */
.pchart__cell--dead{cursor:default}
.pchart__cell--dead:hover{border-color:var(--line)}
.pchart__cell--dead .pchart__l{color:var(--muted)}
.pchart__h{display:flex;align-items:baseline;gap:6px}
.pchart__l{font-size:11.5px;color:var(--muted)}
.pchart__d{margin-left:auto;font-size:11.5px;font-weight:700;white-space:nowrap}
.pchart__d.is-up{color:var(--up)} .pchart__d.is-down{color:var(--down)} .pchart__d.is-flat{color:var(--muted);font-weight:600}
.pchart__v{font-size:13.5px;font-weight:700;margin:1px 0 5px}
.pchart__svg{display:block;width:100%;height:30px}
.pchart__svg.is-up{color:var(--up)} .pchart__svg.is-down{color:var(--down)} .pchart__svg.is-flat{color:var(--muted)}
.pchart__nodata{font-size:11.5px;color:var(--muted);height:30px;display:flex;align-items:center}
.pchart__note{font-size:11px;color:var(--muted);margin:8px 2px 0}
.pchart__state{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);padding:6px 2px}
.pchart__state svg{width:15px;height:15px}
.pchart__skel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pchart__skel i{display:block;height:74px;border-radius:10px;background:var(--line);opacity:.5}
@media (max-width:900px){.pchart__grid,.pchart__skel{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.pchart__grid,.pchart__skel{grid-template-columns:1fr}}
.purch-actions{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:9px;margin-left:auto}
.purch-card__top .purch-links{margin:0;flex:none;flex-wrap:nowrap}
.purch-ms{min-width:0}
.purch-ms__l{font-size:11px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.3px;line-height:1.15}
.purch-ms__i{display:inline-flex;vertical-align:middle;margin-left:3px;color:var(--muted);cursor:help;transition:color .15s}
.purch-ms__i svg{width:13px;height:13px}
.purch-ms__i:hover{color:var(--brand)}
/* Подсказка у подписи поля заказа (fldHint) — «i» кабинетов поставщика и брокера и
   карточки доски «Заказы поставщикам». Внешний вид — как у .purch-ms__i в «Закупках»
   (референс задачи), но своё имя: те живут внутри плитки показателя и наследуют её
   размеры. flex:none — подписи полей часто flex-контейнеры, иначе иконку сплющит. */
.fldhint{display:inline-flex;flex:none;vertical-align:middle;margin-left:4px;color:var(--muted);cursor:help;transition:color .15s;border-radius:50%}
.fldhint svg{width:13px;height:13px}
.fldhint:hover{color:var(--brand)}
.fldhint:focus-visible{outline:2px solid var(--brand);outline-offset:1px;color:var(--brand)}
.purch-ms__hist{display:inline-flex;vertical-align:middle;margin-left:4px;padding:0;border:none;background:transparent;color:var(--muted);cursor:pointer;transition:color .15s}
.purch-ms__hist svg{width:12px;height:12px}
.purch-ms__hist:hover{color:var(--brand)}
.purch-ms__v{font-size:15.5px;font-weight:800;margin-top:2px;font-variant-numeric:tabular-nums;line-height:1.2;white-space:nowrap}
.purch-ms__v small{font-size:11px;color:var(--muted);font-weight:600;margin-left:5px}
.purch-ms__v.is-bad{color:var(--down)}
.purch-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  margin-top:9px;padding-top:9px;border-top:1px solid var(--line)}
.purch-loss{display:flex;align-items:center;gap:11px;border-radius:var(--r-sm);padding:8px 13px;
  background:color-mix(in srgb,var(--down) 8%,var(--surface));border:1px solid color-mix(in srgb,var(--down) 22%,transparent)}
.purch-loss__ic{width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center;background:var(--down);color:#fff}
.purch-loss__ic svg{width:16px;height:16px}
.purch-loss__big{font-size:14px;font-weight:800;color:var(--down);line-height:1.1}
.purch-loss__sub{font-size:10.5px;color:var(--muted);font-weight:600;margin-top:2px}
.purch-loss.is-ok{background:color-mix(in srgb,var(--up) 8%,var(--surface));border-color:color-mix(in srgb,var(--up) 22%,transparent)}
.purch-loss.is-ok .purch-loss__ic{background:var(--up)}
.purch-loss.is-ok .purch-loss__big{color:var(--up)}
.purch-loss.is-dead .purch-loss__ic,.purch-loss.is-wait .purch-loss__ic{background:var(--muted)}
.purch-loss.is-dead .purch-loss__big,.purch-loss.is-wait .purch-loss__big{color:var(--ink-soft)}
.purch-loss.is-wait{background:var(--surface-2);border-color:var(--line)}
.purch-act{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:34px;box-sizing:border-box;background:var(--brand);color:#fff;border:none;
  border-radius:10px;padding:0 14px;font-size:12px;font-weight:800;cursor:pointer;white-space:nowrap;transition:.15s}
.purch-act svg{width:14px;height:14px}
.purch-act:hover{filter:brightness(1.06)}
.purch-act:disabled{opacity:.55;cursor:default;filter:none}
.purch-act--ghost{background:var(--brand-tint);color:var(--brand)}
.purch-send{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;justify-content:flex-end}
.purch-placed{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;color:#185fa5;background:color-mix(in srgb,#185fa5 12%,var(--surface));border-radius:999px;padding:3px 9px;white-space:nowrap}
.purch-placed svg{width:12px;height:12px}
.purch-placed.is-adv{color:#1d7a4f;background:color-mix(in srgb,var(--up) 12%,var(--surface))}
.purch-qty{width:58px;height:34px;box-sizing:border-box;border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:9px;padding:0 8px;font:inherit;font-size:13px;font-weight:700;text-align:center}
.purch-qty:focus{outline:none;border-color:var(--brand)}
.purch-arch{flex:none;width:34px;height:34px;box-sizing:border-box;display:inline-grid;place-items:center;border:1px solid var(--line);background:var(--surface);color:var(--muted);border-radius:9px;cursor:pointer;transition:.15s}
.purch-arch svg{width:16px;height:16px}
.purch-arch:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-tint)}
.purch-arch--del:hover{border-color:#e2563f;color:#e2563f;background:rgba(226,86,63,.08)}
.purch-price{flex:none;width:34px;height:34px;box-sizing:border-box;display:inline-grid;place-items:center;border:1px solid var(--line);background:var(--surface);color:var(--muted);border-radius:9px;cursor:pointer;transition:.15s}
.purch-price svg{width:16px;height:16px}
.purch-price:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-tint)}
.purch-sent{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:800;color:var(--up)}
.purch-sent svg{width:14px;height:14px}
/* «Отложено на сутки» (снуз): бейдж обратного отсчёта на карточке в фильтре «Отложенные на сутки» */
.purch-snz{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:var(--muted,#8a8782)}
.purch-snz svg{width:14px;height:14px}
.purch-undo{display:inline-flex;align-items:center;height:34px;box-sizing:border-box;border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);border-radius:9px;padding:0 14px;font:inherit;font-size:12px;font-weight:700;cursor:pointer;transition:.15s}
.purch-undo:hover{border-color:var(--down);color:var(--down)}
.psend-lbl{display:block;font-size:12.5px;font-weight:700;color:var(--ink-soft);margin:14px 0 6px}
.psend-ta{width:100%;box-sizing:border-box;border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:var(--r-sm);padding:10px 12px;font:inherit;font-size:14px;line-height:1.45;resize:vertical;min-height:64px}
.psend-ta:focus{outline:none;border-color:var(--brand)}
.psend-err{margin-top:10px;font-size:12.5px;font-weight:600;color:var(--down)}
/* Редактор цен товара (розничная / оптовая / дилерская) — окно с иконки-ярлыка карточки */
.pprice-sub{display:flex;align-items:center;gap:7px;margin:-2px 0 16px;font-size:12.5px;line-height:1.4}
.pprice-sub svg{width:15px;height:15px;color:var(--brand);flex:none}
.pprice-form{display:flex;flex-direction:column;gap:11px}
.pprice-row{display:flex;align-items:center;justify-content:space-between;gap:14px}
.pprice-row__l{display:flex;flex-direction:column;font-size:14px;font-weight:700;color:var(--ink)}
.pprice-row__l small{font-size:11px;font-weight:600;color:var(--muted);margin-top:1px}
.pprice-inp{position:relative;display:inline-flex;align-items:center}
.pprice-num{width:160px;height:42px;box-sizing:border-box;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:11px;padding:0 32px 0 14px;font:inherit;font-size:16px;font-weight:800;text-align:right;transition:.15s}
.pprice-num:focus{outline:none;border-color:var(--brand)}
.pprice-num.is-bad{border-color:var(--down)}
.pprice-cur{position:absolute;right:13px;color:var(--muted);font-weight:700;font-size:13px;pointer-events:none}
.pprice-note{display:flex;align-items:center;gap:8px;margin-top:16px;padding:10px 12px;border-radius:11px;font-size:12.5px;font-weight:600;line-height:1.4;background:var(--surface-2);color:var(--muted)}
.pprice-note svg{width:15px;height:15px;flex:none}
.pprice-note.is-ok{background:color-mix(in srgb,var(--up) 12%,var(--surface));color:var(--up)}
.pprice-note.is-warn{background:color-mix(in srgb,var(--down) 12%,var(--surface));color:var(--down)}
.pprice-note.is-info{background:var(--brand-tint);color:var(--brand)}
/* Цены: себестоимость + наценки над ней + маржа дилер→розница + доп. услуги */
.pprice-cost{display:flex;align-items:center;gap:11px;margin:0 0 15px;padding:11px 13px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}
.pprice-cost__ic{flex:none;width:34px;height:34px;display:inline-grid;place-items:center;border-radius:9px;background:color-mix(in srgb,var(--brand) 12%,var(--surface));color:var(--brand)}
.pprice-cost__ic svg{width:17px;height:17px}
.pprice-cost__l{display:flex;flex-direction:column;font-size:13.5px;font-weight:700;color:var(--ink);flex:1 1 auto;min-width:0}
.pprice-cost__l small{font-size:11px;font-weight:600;color:var(--muted);margin-top:1px}
.pprice-cost__v{font-size:16px;font-weight:800;color:var(--ink);white-space:nowrap}
.pprice-cost.is-unknown .pprice-cost__ic{background:var(--surface-2);color:var(--muted)}
.pprice-cost.is-unknown .pprice-cost__v{color:var(--muted)}
.pprice-right{display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.pprice-mk{font-size:11px;font-weight:700;color:var(--muted);min-height:13px;text-align:right;line-height:1.1}
.pprice-mk.is-up{color:var(--up)}
.pprice-mk.is-down{color:var(--down)}
/* Группа цен в долларах: заголовок с курсом из 1С, не сворачивается */
.pprice-usd{margin-top:14px;border-top:1px dashed var(--line);padding-top:14px}
.pprice-usd__h{display:flex;align-items:center;gap:7px;margin-bottom:12px;font-size:12.5px;font-weight:600;color:var(--muted)}
.pprice-usd__h svg{width:15px;height:15px;color:var(--brand);flex:none}
.pprice-rate b{color:var(--ink);font-weight:800}
.pprice-mk.is-usd{color:#3b82f6}   /* отклонение от розничной $ — синим (не зелёный/красный) */
.pprice-spread{display:flex;align-items:center;gap:9px;margin-top:14px;padding:11px 13px;border-radius:12px;
  background:color-mix(in srgb,var(--up) 11%,var(--surface));border:1px solid color-mix(in srgb,var(--up) 26%,transparent);color:var(--up)}
.pprice-spread[hidden]{display:none}
.pprice-spread.is-down{background:color-mix(in srgb,var(--down) 11%,var(--surface));border-color:color-mix(in srgb,var(--down) 26%,transparent);color:var(--down)}
.pprice-spread svg{width:16px;height:16px;flex:none}
.pprice-spread__l{font-size:13px;font-weight:700;flex:1 1 auto}
.pprice-spread__v{display:flex;flex-direction:column;align-items:flex-end;font-size:16px;font-weight:800;line-height:1.05;white-space:nowrap}
.pprice-spread__v small{font-size:10.5px;font-weight:700;opacity:.82;margin-top:2px}
.purch-confirm{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--ink-soft);flex-wrap:wrap}
.purch-cbtn{border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);border-radius:9px;padding:6px 13px;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
.purch-cbtn:hover{border-color:var(--brand)}
.purch-cbtn--yes{background:var(--brand);color:#fff;border-color:var(--brand)}
.purch-empty{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;color:var(--muted);
  padding:34px 16px;font-size:13.5px;font-weight:600}
.purch-empty svg{width:30px;height:30px;color:var(--muted)}
.purch-links{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 11px}
.purch-link{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:var(--ink-soft);text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:4px 10px 4px 8px;transition:.15s}
.purch-link:hover{border-color:var(--brand);color:var(--brand)}
.purch-link svg{width:14px;height:14px;color:var(--muted)}
.purch-link:hover svg{color:var(--brand)}
.anaflt-wait{display:inline-flex;align-items:center;gap:6px;border:1px dashed var(--line);background:var(--surface-2);color:var(--muted);border-radius:11px;padding:8px 12px;font-size:12.5px;font-weight:600;white-space:nowrap}
.purch-tag--who{background:color-mix(in srgb,#534ab7 13%,var(--surface));color:#534ab7}
/* Группа тегов «у кого заказывали» (purchSupTagsHtml): одна капсула в цвет раздела
   «Поставщики» (#0d9488) — чтобы поставщики не терялись среди серых тегов кода/категории/
   бренда. Иконка одна на всю группу, а не на каждый тег: три грузовика подряд — шум.
   Длинные имена контрагентов 1С режем многоточием, полное — в тултипе (data-tip). */
.purch-sup{--sup:#0d9488;display:inline-flex;align-items:center;gap:4px;max-width:100%;flex-wrap:wrap;
  background:color-mix(in srgb,var(--sup) 11%,var(--surface));border-radius:999px;padding:2px 8px 2px 7px}
.purch-sup__ic{width:12px;height:12px;color:var(--sup);flex:none}
.purch-sup__t{font-size:10px;font-weight:700;color:var(--sup);white-space:nowrap;max-width:140px;
  overflow:hidden;text-overflow:ellipsis}
.purch-sup__t+.purch-sup__t{border-left:1px solid color-mix(in srgb,var(--sup) 35%,transparent);padding-left:5px}
.purch-sup__t.is-link{text-decoration:none;border-bottom:1px dotted color-mix(in srgb,var(--sup) 60%,transparent);cursor:pointer}
.purch-sup__t.is-link:hover{color:var(--brand);border-bottom-color:transparent}
.purch-sup__t.is-hid{display:none}
.purch-sup.is-open .purch-sup__t.is-hid{display:inline-block}
.purch-sup__more{font-size:10px;font-weight:800;color:var(--sup);background:color-mix(in srgb,var(--sup) 16%,transparent);
  border:0;border-radius:999px;padding:1px 6px;cursor:pointer;white-space:nowrap}
.purch-sup__more:hover{background:color-mix(in srgb,var(--sup) 28%,transparent)}
[data-theme="dark"] .purch-sup{--sup:#2fb3a6}
.purch-tag--warn{background:color-mix(in srgb,#e0a000 16%,var(--surface));color:#9a6b00}
[data-theme="dark"] .purch-tag--warn{color:#f0c64a}
.purch-fresh{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--muted);background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:6px 12px;margin:0;white-space:nowrap}
.purch-fresh svg{width:14px;height:14px;color:var(--up);flex:none}
.purch-fresh.is-stale{color:#9a6b00;background:color-mix(in srgb,#e0a000 12%,var(--surface));border-color:color-mix(in srgb,#e0a000 35%,var(--line))}
.purch-fresh.is-stale svg{color:#e0a000}
[data-theme="dark"] .purch-fresh.is-stale{color:#f0c64a}
.purch-link.is-on{border-color:color-mix(in srgb,var(--up) 45%,var(--line));color:var(--up)}
.purch-link.is-on svg{color:var(--up)}
.purch-link.is-off{color:var(--muted);border-style:dashed;cursor:default}
.purch-link.is-off:hover{border-color:var(--line);color:var(--muted)}
.purch-link.is-off svg{color:var(--muted)}
.purch-addbtn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--brand);background:var(--brand-tint);color:var(--brand);border-radius:11px;padding:7px 13px;font-size:12.5px;font-weight:700;white-space:nowrap;cursor:pointer;transition:.15s}
.purch-addbtn:hover{background:var(--brand);color:#fff}
.purch-addbtn svg{width:15px;height:15px}
.purch-addform{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--brand);border-radius:var(--r);padding:14px 15px;margin-bottom:14px}
.purch-addform__t{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:800;margin-bottom:11px;flex-wrap:wrap}
.purch-addform__t svg{width:16px;height:16px;color:var(--brand)}
.purch-addform__row{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.purch-input{flex:1 1 200px;min-width:150px;border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:var(--r-sm);padding:9px 12px;font:inherit;font-size:13.5px}
.purch-input:focus{outline:none;border-color:var(--brand)}
.purch-search{flex:1 1 220px;min-width:160px;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:11px;padding:8px 13px;font:inherit;font-size:13px;font-weight:500}
.purch-search:focus{outline:none;border-color:var(--brand)}
.purch-search::placeholder{color:var(--muted)}
.purch-input--qty{flex:0 0 120px;min-width:90px}
.purch-addform__msg{margin-top:9px;font-size:12.5px;font-weight:600}
.purch-addform__msg.is-err{color:var(--down)}
.purch-addform__msg.is-ok{color:var(--muted)}
/* «Где лежит» — разбивка остатка по складам под позицией (purchWhsRow). Переменные —
   те же, что у .purch-tag выше (фон-плашка/приглушённый текст), своих не заводим.
   flex-basis:100% — .purch-body сам flex со wrap (msrow/actions), без этого чипы
   вставали БЫ узкой колонкой справа от метрик, а не отдельной строкой под ними. */
.purch-whs{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 2px;flex-basis:100%}
.purch-wh-chip{display:inline-flex;align-items:baseline;gap:5px;padding:2px 8px;border-radius:999px;background:var(--surface-2);color:var(--muted);font-size:12px;line-height:18px}
.purch-wh-chip b{color:var(--ink);font-weight:600}
.purch-wh-chip.is-off{opacity:.55;text-decoration:line-through}
.purch-wh-chip.is-neg b{color:var(--down)}
.purch-wh-chip--more{border:0;cursor:pointer;font:inherit}
/* Эффективность источников привлечения — таблица источников */
.srctbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-sm);margin-top:4px}
.srctbl{width:100%;border-collapse:collapse;font-size:13px;min-width:520px}
.srctbl thead th{text-align:right;font-weight:700;color:var(--muted);font-size:11.5px;text-transform:uppercase;letter-spacing:.03em;padding:10px 12px;background:var(--surface-2);border-bottom:1px solid var(--line);white-space:nowrap}
.srctbl thead th:first-child{text-align:left}
.srctbl td{text-align:right;padding:9px 12px;border-bottom:1px solid var(--line);font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.srctbl tbody tr:last-child td{border-bottom:0}
.srctbl tbody tr{cursor:pointer;transition:background .12s}
.srctbl tbody tr:hover{background:var(--surface-2)}
.srctbl tbody tr.is-sel{background:var(--brand-tint)}
.srctbl__nm{text-align:left !important;font-weight:700;color:var(--ink)}
.srctbl__pct{margin-left:6px;color:var(--muted);font-weight:700;font-size:12px}
.srctbl__rev{font-weight:800}
/* произвольный период — поля дат в шапке отчёта */
.srcdate-wrap{display:inline-flex;align-items:center;gap:6px}
.srcdate{border:1px solid var(--line);background:var(--surface-2);color:var(--ink);border-radius:var(--r-sm);padding:7px 9px;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.srcdate:focus{outline:none;border-color:var(--brand)}
.srcdate-sep{color:var(--muted);font-weight:700}
.avst__hint{display:flex;align-items:flex-start;gap:6px;font-size:12px;color:var(--muted);font-weight:600;margin:12px 2px 0}
/* Кастомный выбор произвольного периода в «Маркетинге» (mkDateRangeHtml/bindMkDateRange,
   app.js) — замена родного <input type=date>, у которого ручной набор цифр года бажит
   (владелец 2026-07-20: «может вывести 0222 год»). Текстовое поле с маской ДД.ММ.ГГГГ +
   кнопка-календарь со своим попапом, тот же паттерн всплытия, что у .dd-меню (см.
   .dd__menu) — те же радиус/тень/анимация, чтобы не выглядело чужеродно. */
/* Галочка подтверждения периода (мышиный эквивалент Enter) — видна только при валидных датах,
   отличающихся от применённого периода */
/* Блок советов J.A.R.V.I.S. на страницах отчётов: свой нижний отступ — иначе строка-штамп
   «посчитано по живым цифрам…» прилипала к карточке «Таблица» (владелец 2026-07-20:
   «расстояния нету»); у .block есть только margin-top, а у .mk-secsw верхнего нет. */
#mkAvitoPage .block.ai,#mkDealsPage .block.ai{margin-bottom:24px}
/* Переключатель подразделов «Отчёта по Avito»/«Отчёта по сделкам» (широкая таблица /
   диаграммы и графики) — раньше были двумя независимо сворачиваемыми блоками, владелец
   попросил 2026-07-20 сделать их соседними кнопками-вкладками (переключают, какой из
   двух виден), маленькими и без серых подписей-описаний (первая версия карточками была
   слишком громоздкой). Состояние активной вкладки личное, см. api/mksections.php.
   В той же строке, у правого края — кнопка «Свернуть пустые значения» (её вид не
   трогаем, см. .mk-hideempty-btn) — вкладки крупнее и слева. */
/* Короткая пометка «точки по неделям» — ВНУТРИ каждой карточки-графика, которую это
   касается (>120 дней в периоде), не общий блок под всеми карточками (владелец передумал
   2026-07-15, заход 46). Не «обрезано» — данные все, просто грубее, поэтому нейтральный
   цвет (info), не тревожный (было warn/gold, пока резали по времени — заход 45-46). */
.avst__hint svg{width:14px;height:14px;flex:none;margin-top:1px}
/* Аналитика — вкладки «Отчёты» / «Статистики» */
.anatabs{display:inline-flex;gap:8px;margin:2px 2px 18px;flex-wrap:wrap}
.ana-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.ana-head .hist__h{margin:0}
.ana-head .anatabs{margin:0}
.purch-toolbar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:10px 0 14px}
.purch-secthead{margin-bottom:0}
/* заголовок отчёта: заметка «из 1С · N» не должна налезать на название — переносим её под него */
.purch-secthead h2{flex-wrap:wrap}
.purch-ttl{display:inline-flex;align-items:center;gap:8px;min-width:0}
.purch-secthead .block__note{flex:0 0 auto;white-space:nowrap}
.purch-reset{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);
  color:var(--ink-soft);border-radius:11px;padding:8px 14px;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;white-space:nowrap;transition:.15s}
.purch-reset svg{width:14px;height:14px;color:var(--muted);transition:.15s}
.purch-reset:hover{border-color:var(--brand);color:var(--brand)}
.purch-reset:hover svg{color:var(--brand)}
.purch-reset.is-off{opacity:.45;cursor:default}
.purch-reset.is-off:hover{border-color:var(--line);color:var(--ink-soft)}
.purch-reset.is-off:hover svg{color:var(--muted)}
/* Переключатель «только на сайте» (опубликовано на kronos5.ru) — рядом с фильтром категорий */
.purch-onsite{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);
  color:var(--ink-soft);border-radius:11px;padding:8px 13px;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;white-space:nowrap;transition:.15s}
.purch-onsite svg{width:14px;height:14px;color:var(--muted);transition:.15s}
.purch-onsite:hover{border-color:var(--brand);color:var(--brand)}
.purch-onsite:hover svg{color:var(--brand)}
.purch-onsite.is-on{background:var(--brand);border-color:var(--brand);color:#fff}
.purch-onsite.is-on svg{color:#fff}
/* ===== Закупки — мобильная раскладка отчёта (телефоны / узкие планшеты) =====
   Десктоп не трогаем: всё внутри @media. Главное — имя позиции не обрезаем,
   карточка раскладывается в столбик, фильтры и действия становятся крупными и тапаемыми. */
@media (max-width:640px){
  /* Шапка отчёта: чип «обновлено» сверху, действия — в ряд крупными кнопками во всю ширину */
  .purch-secthead{align-items:flex-start;gap:9px}
  .purch-secthead .secthead__r{width:100%;gap:8px}
  .purch-secthead .secthead__r>*{flex:1 1 auto;justify-content:center}
  .purch-fresh{order:-1}
  /* Тулбар фильтров: поиск во всю ширину (16px — iOS не зумит при фокусе),
     дропдауны по два в ряд, «сбросить» — отдельной широкой кнопкой */
  .purch-toolbar{gap:8px;margin:8px 0 12px}
  .purch-search{flex:1 1 100%;min-width:0;font-size:16px;padding:11px 14px}
  .purch-bigsearch{padding:11px 13px;margin-bottom:11px;gap:9px}
  .purch-bigsearch__in{font-size:16px}    /* iOS не зумит поле при фокусе */
  .purch-toolbar .dd{flex:1 1 calc(50% - 4px);min-width:0}
  .purch-toolbar .dd__btn{width:100%;height:42px}
  .purch-toolbar .dd__cur{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
  .purch-reset{flex:1 1 100%;justify-content:center;height:42px}
  /* KPI — по две плитки в ряд */
  .purch-kpis{grid-template-columns:1fr 1fr;gap:9px}
  /* Карточка позиции — всё в столбик; имя видно целиком (до двух строк), не обрезаем многоточием */
  .purch-card{padding:12px;border-radius:13px}
  .purch-card__top{flex-wrap:wrap;align-items:flex-start}
  .purch-hd{min-width:56%}
  .purch-nm{white-space:normal;font-size:16px;line-height:1.25;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .purch-card__top .purch-links{order:5;flex:1 1 100%;margin:0;flex-wrap:wrap}
  /* Тело: показатели сеткой 2-в-ряд (подпись — на свою строку), затем действия во всю ширину */
  .purch-body{flex-direction:column;gap:12px;align-items:stretch}
  .purch-msrow{flex:1 1 auto;grid-template-columns:1fr 1fr;gap:11px 12px}
  .purch-ms__v small{display:block;margin-left:0;margin-top:2px;white-space:normal}
  /* .purch-body тут flex-direction:column — flex-basis:100% из десктопного .purch-whs
     считался бы по ГЛАВНОЙ оси (теперь вертикальной, то есть по высоте), а не по ширине;
     сбрасываем на тот же flex:1 1 auto, что и у msrow/actions выше — ширину во всю строку
     и так даёт align-items:stretch у .purch-body. */
  .purch-whs{flex:1 1 auto}
  .purch-actions{flex:1 1 auto;align-items:stretch;margin-left:0}
  .purch-send{flex-wrap:wrap;justify-content:flex-start}
  .purch-send__btn{flex:1 1 auto}
  .purch-qty{flex:0 0 66px;height:42px;font-size:16px}
  .purch-act{height:42px}
  .purch-arch,.purch-price{width:42px;height:42px}
  .purch-undo{height:42px}
  .purch-placed{flex:1 1 100%}
  /* Пояснения/подсказки — чуть компактнее по краям */
  .purch-explain,.purch-hint{padding:9px 11px}
}
@media (max-width:380px){
  .purch-toolbar .dd{flex:1 1 100%}      /* совсем узко — фильтры в один столбец */
  .purch-kpis{grid-template-columns:1fr 1fr}
  .purch-nm{font-size:15.5px}
}
/* окно графика KPI: переключатель периода (сегменты) */
.kpi-perbar{display:flex;gap:6px;flex-wrap:wrap;margin:2px 0 14px}
.kpi-perbtn{border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);border-radius:999px;padding:6px 13px;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;transition:.15s}
.kpi-perbtn:hover{border-color:var(--brand);color:var(--brand)}
.kpi-perbtn.is-active{background:var(--brand);color:#fff;border-color:var(--brand)}
/* плитки «Состояние сервера» — кликабельны, открывают график показателя за период */
.htile{cursor:pointer;transition:border-color .15s,background .15s,transform .06s;-webkit-tap-highlight-color:transparent}
.htile:hover{border-color:color-mix(in srgb,var(--htc) 60%,transparent)!important;background:color-mix(in srgb,var(--htc) 12%,transparent)!important}
.htile:active{transform:translateY(1px)}
.htile:focus-visible{outline:2px solid color-mix(in srgb,var(--htc) 60%,transparent);outline-offset:2px}
.htile__chart{flex:none;display:inline-flex;align-items:center;color:var(--muted);transition:color .15s}
.htile__chart svg{width:15px;height:15px}
.htile:hover .htile__chart{color:var(--htc)}
/* Отчёт «Заказы поставщикам»: группы по этапам + карточки заказов */
.ord-group{margin-top:18px}
.ord-group:first-of-type{margin-top:6px}
.ord-group__h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;
  margin:0 2px 9px;padding-left:10px;border-left:3px solid var(--gc,#2f6df0)}
.ord-group__nm{font-size:14px;font-weight:800;letter-spacing:.2px}
.ord-group__meta{font-size:11.5px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.ord-group--warn{--gc:#e0a000}
.ord-group--bad{--gc:var(--down)}
.ord-group--good{--gc:var(--up)}
.ord-group--ok{--gc:#2f6df0}
.ord-list{display:grid;gap:9px}
.ord-card{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--oc,#2f6df0);
  border-radius:14px;padding:11px 13px;transition:border-color .15s}
.ord-card:hover{border-color:color-mix(in srgb,var(--oc,#2f6df0) 45%,var(--line))}
.ord-card--warn{--oc:#e0a000}
.ord-card--bad{--oc:var(--down)}
.ord-card--good{--oc:var(--up)}
.ord-card--ok{--oc:#2f6df0}
.ord-card__top{display:flex;align-items:center;gap:10px}
.ord-ic{width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center;
  background:color-mix(in srgb,var(--oc,#2f6df0) 14%,var(--surface));color:var(--oc,#2f6df0)}
.ord-ic svg{width:17px;height:17px}
.ord-hd{flex:1;min-width:0}
.ord-name{font-size:13.5px;font-weight:800;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ord-tags{margin-top:3px;display:flex;gap:5px;flex-wrap:wrap}
.ord-tag{display:inline-flex;align-items:center;gap:3px;font-size:10px;font-weight:700;border-radius:999px;padding:2px 8px;white-space:nowrap}
.ord-tag svg{width:11px;height:11px}
.ord-tag--adv{background:color-mix(in srgb,var(--up) 14%,var(--surface));color:#1d7a4f}
[data-theme="dark"] .ord-tag--adv{color:#33bd82}
.ord-sum{flex:none;text-align:right;font-size:14px;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums}
.ord-sum small{display:block;font-size:9px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.3px;margin-top:2px}
.ord-body{margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
.ord-msrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:8px 12px}
.ord-conts{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:9px;padding-top:9px;border-top:1px dashed var(--line)}
.ord-conts__l{font-size:9px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.3px}
.ord-cont{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;background:var(--surface-2);border-radius:999px;padding:3px 10px;font-variant-numeric:tabular-nums}
.ord-cont b{font-weight:800;color:var(--brand)}
/* ===== дашборд поставок: тумблер «когда придёт / когда заказано» ===== */
.ord-sort{display:inline-flex;gap:4px;background:var(--surface-2);border-radius:999px;padding:4px;margin:14px 0 12px}
.ord-sortb{display:inline-flex;align-items:center;gap:7px;border:none;background:transparent;color:var(--ink-soft);font:inherit;font-size:12.5px;font-weight:700;padding:8px 16px;border-radius:999px;cursor:pointer;transition:.15s;white-space:nowrap}
.ord-sortb svg{width:15px;height:15px}
.ord-sortb:hover{color:var(--ink)}
.ord-sortb.is-active{background:var(--surface);color:var(--brand)}
/* группа-корзина срока: иконка-чип в цвет среза */
.ord-group--plain{--gc:#8a8782}
.ord-group__h{align-items:center}
.ord-group__ic{width:27px;height:27px;border-radius:8px;flex:none;display:grid;place-items:center;background:color-mix(in srgb,var(--gc,#2f6df0) 14%,var(--surface));color:var(--gc,#2f6df0)}
.ord-group__ic svg{width:15px;height:15px}
.ord-group__nm{margin-right:auto}
.ord-card--plain{--oc:#b4b2a9}
/* поставщик под названием + чипы (этап со срезом-точкой, кол-во, склад, контейнеры, предоплата) */
.ord-sup{font-size:11.5px;color:var(--muted);font-weight:600;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ord-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.ord-stage{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;color:var(--ink-soft);background:var(--surface-2);border-radius:999px;padding:3px 10px}
.ord-stage i{width:7px;height:7px;border-radius:50%;flex:none}
.ord-chip{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;color:var(--muted);background:var(--surface-2);border-radius:999px;padding:3px 9px;font-variant-numeric:tabular-nums}
.ord-chip svg{width:12px;height:12px}
.ord-chip--adv{color:#1d7a4f;background:color-mix(in srgb,var(--up) 13%,var(--surface))}
[data-theme="dark"] .ord-chip--adv{color:#33bd82}
/* полоса пути заказа: Заказан ──●── Придёт */
.ord-track{display:flex;align-items:center;gap:14px;margin-top:11px;padding-top:11px;border-top:1px solid var(--line);flex-wrap:wrap}
.ord-date{display:flex;flex-direction:column;gap:2px;flex:none;min-width:90px}
.ord-date--to{align-items:flex-end;text-align:right}
.ord-date__l{display:inline-flex;align-items:center;gap:5px;font-size:9px;text-transform:uppercase;letter-spacing:.3px;color:var(--muted);font-weight:700}
.ord-date__l svg{width:12px;height:12px}
.ord-date__v{font-size:13.5px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.1}
.ord-date__rel{font-size:10.5px;font-weight:800;color:var(--muted);margin-top:1px}
.ord-date__rel.is-bad{color:var(--down)}
.ord-date__rel.is-soon{color:#b56b00}
.ord-date__rel.is-ok{color:#1d7a4f}
[data-theme="dark"] .ord-date__rel.is-soon{color:#f0b62a}
[data-theme="dark"] .ord-date__rel.is-ok{color:#33bd82}
.ord-bar{flex:1 1 90px;min-width:64px;height:6px;border-radius:999px;background:var(--surface-2);position:relative}
.ord-bar.is-empty{align-self:center;background:none;height:0;border-top:2px dotted var(--line)}
.ord-bar__fill{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:var(--oc,#2f6df0);min-width:6px}
.ord-bar__dot{position:absolute;top:50%;width:12px;height:12px;border-radius:50%;background:var(--surface);border:2.5px solid var(--oc,#2f6df0);transform:translate(-50%,-50%)}
/* «Что горит» — сводка просрочек и застрявших дольше нормы */
.ordfire{display:flex;align-items:flex-start;gap:11px;background:color-mix(in srgb,var(--down) 9%,var(--surface));border:1px solid color-mix(in srgb,var(--down) 28%,transparent);border-radius:14px;padding:11px 14px;margin-bottom:14px}
.ordfire__ic{width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center;background:var(--down);color:#fff}
.ordfire__ic svg{width:17px;height:17px}
.ordfire__t{font-size:13px;font-weight:800;color:#a3231d}
[data-theme="dark"] .ordfire__t{color:#f0907a}
.ordfire__s{font-size:11.5px;font-weight:600;color:var(--ink-soft);margin-top:2px}
.ord-chip--stuck{color:#a3231d;background:color-mix(in srgb,var(--down) 13%,var(--surface))}
[data-theme="dark"] .ord-chip--stuck{color:#f0907a}
/* документы к таможне (зелёные чипы — что уже готово) */
.ord-docs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:9px;padding-top:9px;border-top:1px dashed var(--line)}
.ord-docs__l{font-size:9px;text-transform:uppercase;letter-spacing:.3px;color:var(--muted);font-weight:700}
.ord-doc{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;color:#1d7a4f;background:color-mix(in srgb,var(--up) 12%,var(--surface));border-radius:999px;padding:3px 9px}
.ord-doc svg{width:12px;height:12px}
[data-theme="dark"] .ord-doc{color:#33bd82}
/* история заказа — раскрывается по клику */
.ord-hist{margin-top:9px}
.ord-hist summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--muted)}
.ord-hist summary::-webkit-details-marker{display:none}
.ord-hist summary svg{width:13px;height:13px}
.ord-hist summary:hover{color:var(--brand)}
.ord-histb{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.ord-hev{font-size:10.5px;font-weight:600;color:var(--ink-soft);background:var(--surface-2);border-radius:999px;padding:3px 9px}
.ord-hev b{font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;margin-right:3px}
/* таблица-реестр заказов */
.ordt-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.ordt{width:100%;border-collapse:collapse;font-size:12.5px}
.ordt th{font-size:9.5px;text-transform:uppercase;letter-spacing:.3px;color:var(--muted);font-weight:800;text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
.ordt td{padding:11px 12px;border-bottom:1px solid var(--line);font-weight:700;font-variant-numeric:tabular-nums;vertical-align:middle}
.ordt tbody tr:last-child td{border-bottom:none}
.ordt tbody tr:hover{background:var(--surface-2)}
.ordt-nm b{display:block;font-weight:800;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px}
.ordt-nm span{font-size:10.5px;color:var(--muted);font-weight:600}
.ordt-stage{white-space:nowrap}
.ordt-stage i{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;vertical-align:middle}
.ordt-sum{text-align:right;white-space:nowrap}
.ordt-rem{font-weight:800;white-space:nowrap}
.ordt-rem.is-bad{color:var(--down)}.ordt-rem.is-soon{color:#b56b00}.ordt-rem.is-ok{color:#1d7a4f}
[data-theme="dark"] .ordt-rem.is-soon{color:#f0b62a}
/* ===== вид «Календарь» поставок ===== */
.ordcal{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px}
.ordcal-nav{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:12px}
.ordcal-arr{width:32px;height:32px;flex:none;display:grid;place-items:center;border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);border-radius:9px;cursor:pointer;transition:.15s}
.ordcal-arr:hover{border-color:var(--brand);color:var(--brand)}
.ordcal-arr svg{width:16px;height:16px}
.ordcal-arr[data-ordcal="prev"] svg{transform:rotate(90deg)}
.ordcal-arr[data-ordcal="next"] svg{transform:rotate(-90deg)}
.ordcal-title{text-align:center;font-size:15px;font-weight:800;min-width:200px}
.ordcal-title span{display:block;font-size:11px;font-weight:700;color:var(--muted);margin-top:1px}
.ordcal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.ordcal-dow{text-align:center;font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.3px;color:var(--muted);padding-bottom:2px}
.ordcal-cell{min-height:64px;border:1px solid var(--line);border-radius:9px;padding:5px;display:flex;flex-direction:column;gap:3px;background:var(--surface)}
.ordcal-cell.is-pad{border:none;background:none}
.ordcal-cell.has{background:var(--bg)}
.ordcal-cell.is-today{border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand)}
.ordcal-d{font-size:10.5px;font-weight:700;color:var(--muted)}
.ordcal-cell.is-today .ordcal-d{color:var(--brand)}
.ordcal-chip{font-size:9px;font-weight:800;border-radius:5px;padding:2px 5px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:var(--cc,#2f6df0)}
.ordcal-chip--bad{--cc:#e2563f}.ordcal-chip--warn{--cc:#e0a000}.ordcal-chip--ok{--cc:#2f6df0}.ordcal-chip--good{--cc:#2ca36a}.ordcal-chip--plain{--cc:#8a8782}
.ordcal-more{font-size:9px;font-weight:800;color:var(--muted)}
.ordcal-foot{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;color:var(--muted);margin-top:11px;padding-top:11px;border-top:1px solid var(--line)}
.ordcal-foot svg{width:14px;height:14px;flex:none}
@media (max-width:640px){.ordcal-chip{font-size:0;padding:3px}.ordcal-chip::before{content:"";display:block;width:100%;height:3px;border-radius:2px;background:#fff}.ordcal-cell{min-height:48px}}
/* ===== вид «Этапы» (воронка) ===== */
.ordfn{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px 16px;display:flex;flex-direction:column;gap:8px}
.ordfn-row{display:flex;align-items:center;gap:12px}
.ordfn-name{width:200px;flex:none;font-size:12.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ordfn-track{flex:1;height:24px;background:var(--surface-2);border-radius:7px;overflow:hidden;min-width:60px}
.ordfn-fill{height:100%;border-radius:7px;display:flex;align-items:center;padding:0 10px;font-size:11.5px;font-weight:800;color:#fff;min-width:24px;box-sizing:border-box}
.ordfn-sum{width:96px;flex:none;text-align:right;font-size:12.5px;font-weight:800;font-variant-numeric:tabular-nums}
@media (max-width:640px){.ordfn-name{width:120px}.ordfn-sum{width:72px}}
/* ===== вид «Поставщики» (надёжность) ===== */
.ordsup-list{display:flex;flex-direction:column;gap:9px}
.ordsup{display:flex;align-items:center;gap:13px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:11px 14px}
.ordsup-ring{width:46px;height:46px;border-radius:50%;flex:none;display:grid;place-items:center}
.ordsup-ring span{width:34px;height:34px;border-radius:50%;background:var(--surface);display:grid;place-items:center;font-size:11px;font-weight:800;font-variant-numeric:tabular-nums}
.ordsup-main{flex:1;min-width:0}
.ordsup-nm{display:flex;align-items:center;gap:7px;font-size:14px;font-weight:800}
.ordsup-nm svg{width:16px;height:16px;color:var(--muted);flex:none}
.ordsup-meta{font-size:11.5px;font-weight:600;color:var(--muted);margin-top:2px}
.ordsup-bad{color:var(--down)}
.ordsup-sum{flex:none;text-align:right;font-size:14px;font-weight:800;font-variant-numeric:tabular-nums}
.ordsup-sum small{display:block;font-size:9px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.3px;margin-top:2px}
/* ===== ИИ-подсказки (№20) ===== */
.ord-ai{display:flex;align-items:flex-start;gap:11px;background:color-mix(in srgb,#7c5cff 8%,var(--surface));border:1px solid color-mix(in srgb,#7c5cff 26%,transparent);border-radius:14px;padding:11px 14px;margin-bottom:12px}
.ord-ai__ic{width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center;background:#7c5cff;color:#fff}
.ord-ai__ic svg{width:17px;height:17px}
.ord-ai__t{font-size:12.5px;font-weight:800;color:#46399f;margin-bottom:3px}
[data-theme="dark"] .ord-ai__t{color:#b7adf5}
.ord-ai__l{margin:0;padding-left:16px;display:flex;flex-direction:column;gap:3px}
.ord-ai__l li{font-size:11.5px;font-weight:600;color:var(--ink-soft);line-height:1.35}
/* ===== дашборд-полоса: тренд + наличие-на-дату (№12, №11) ===== */
.ord-dash2{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px;margin-bottom:14px}
.ord-trend,.ord-avail{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:11px 13px}
.ord-trend__h,.ord-avail__l{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.3px}
.ord-trend__h svg,.ord-avail__l svg{width:14px;height:14px}
.ord-trend__bars{display:flex;align-items:flex-end;gap:7px;height:54px;margin-top:9px}
.ord-trend__col{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;height:100%;justify-content:flex-end}
.ord-trend__bar{width:100%;max-width:26px;min-height:3px;border-radius:4px 4px 0 0;background:var(--brand)}
.ord-trend__col span{font-size:9px;font-weight:700;color:var(--muted)}
.ord-avail{display:flex;flex-wrap:wrap;align-items:center;gap:9px}
.ord-avail__l{flex:none}
.ord-avail__in{height:32px;border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:9px;padding:0 9px;font:inherit;font-size:12.5px;font-weight:700}
.ord-avail__in:focus{outline:none;border-color:var(--brand)}
.ord-avail__r{font-size:12px;font-weight:700;color:var(--ink-soft)}
.ord-avail__r b{color:var(--brand)}
.ord-avail__hint{color:var(--muted);font-weight:600}
/* ===== карточка: след.шаг (№1), план/факт (№10), прогноз (№9), кнопка «на доске» (№18) ===== */
.ord-fc{font-size:10px;font-weight:700;color:#7c5cff;margin-top:1px}
[data-theme="dark"] .ord-fc{color:#b7adf5}
.ord-foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:9px;padding-top:9px;border-top:1px dashed var(--line)}
.ord-next{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:800;color:var(--brand);background:var(--brand-tint);border-radius:999px;padding:4px 10px}
.ord-next svg{width:12px;height:12px}
.ord-pf{font-size:10.5px;font-weight:600;color:var(--muted)}
.ord-open{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:var(--ink-soft);background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:5px 11px;cursor:pointer;transition:.15s}
.ord-open svg{width:13px;height:13px}
.ord-open:hover{border-color:var(--brand);color:var(--brand)}
/* ===== таблица: панель экспорта (№18) ===== */
.ordt-bar{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.ordt-cnt{font-size:12px;font-weight:700;color:var(--muted)}
.ordt-export{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--ink-soft);background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:7px 13px;cursor:pointer;transition:.15s}
.ordt-export svg{width:14px;height:14px}
.ordt-export:hover{border-color:var(--brand);color:var(--brand)}
.ord-chip--cli{color:#534ab7;background:color-mix(in srgb,#534ab7 12%,var(--surface))}
[data-theme="dark"] .ord-chip--cli{color:#b7adf5}
/* ===== вид «Маршрут импорта» ===== */
.ordrt{display:flex;align-items:stretch;gap:2px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px 10px;overflow-x:auto}
.ordrt-node{flex:1 0 116px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:4px 6px}
.ordrt-ic{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:color-mix(in srgb,var(--rc) 14%,var(--surface));color:var(--rc)}
.ordrt-ic svg{width:21px;height:21px}
.ordrt-nm{font-size:11px;font-weight:700;color:var(--ink-soft);line-height:1.2}
.ordrt-cnt{font-size:15px;font-weight:800;color:var(--rc);font-variant-numeric:tabular-nums}
.ordrt-sum{font-size:10.5px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.ordrt-link{display:flex;align-items:center;color:var(--line);flex:none}
.ordrt-link svg{width:16px;height:16px;transform:rotate(-90deg)}
/* ===== вид «Деньги во времени» ===== */
.ordmn{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px 16px}
.ordmn-kpis{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.ordmn-kpi{flex:1 1 160px;background:var(--bg);border-radius:12px;padding:10px 13px}
.ordmn-kpi span{font-size:10.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.3px}
.ordmn-kpi b{display:block;font-size:18px;font-weight:800;margin-top:3px;font-variant-numeric:tabular-nums}
.ordmn-charth{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.3px;margin-bottom:10px}
.ordmn-charth svg{width:14px;height:14px}
.ordmn-chart{display:flex;align-items:flex-end;gap:10px;height:140px;padding-top:18px}
.ordmn-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:5px;height:100%}
.ordmn-val{font-size:9.5px;font-weight:800;color:var(--ink-soft);font-variant-numeric:tabular-nums;white-space:nowrap}
.ordmn-bar{width:100%;max-width:42px;min-height:3px;border-radius:6px 6px 0 0;background:#2ca36a}
.ordmn-bar.is-zero{background:var(--surface-2)}
.ordmn-lab{font-size:10px;font-weight:700;color:var(--muted)}
.anatab{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--surface);
  color:var(--ink-soft);border-radius:11px;padding:9px 16px;font-size:13.5px;font-weight:700;transition:.15s;cursor:pointer}
.anatab svg{width:16px;height:16px}
.anatab:hover{border-color:var(--brand)}
.anatab.is-active{background:var(--brand);color:#fff;border-color:var(--brand)}
/* Аналитика — папка «Отчёты»: список отчётов + кнопка «назад» */
.repfolder{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin:0 2px}
.repcard{display:flex;align-items:center;gap:13px;text-align:left;width:100%;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);padding:15px;cursor:pointer;transition:.15s}
.repcard:hover{border-color:var(--c,var(--brand))}
.repcard:active{transform:scale(.99)}
.repcard__ic{width:44px;height:44px;border-radius:13px;flex:none;display:grid;place-items:center;
  background:color-mix(in srgb,var(--c,var(--brand)) 13%,var(--surface));color:var(--c,var(--brand))}
.repcard__ic svg{width:22px;height:22px}
.repcard__txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.repcard__t{font-size:14.5px;font-weight:700;line-height:1.2}
.repcard__s{font-size:12px;color:var(--muted);line-height:1.3}
.repcard__arr{flex:none;color:var(--muted);display:inline-grid;place-items:center}
.repcard__arr svg{width:18px;height:18px;transform:rotate(-90deg)}
.repcard:hover .repcard__arr{color:var(--c,var(--brand))}
.repback{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);
  color:var(--ink-soft);border-radius:11px;padding:8px 14px 8px 11px;font-size:13px;font-weight:700;cursor:pointer;
  margin:0 2px 14px;transition:.15s}
.repback:hover{border-color:var(--brand);color:var(--brand)}
.repback svg{width:15px;height:15px;transform:rotate(90deg)}
.ubtn--danger{padding:9px 14px;display:inline-flex;align-items:center;gap:6px;color:var(--down);border-color:color-mix(in srgb,var(--down) 32%,var(--line));background:color-mix(in srgb,var(--down) 7%,transparent)}
.ubtn--danger:hover{background:var(--down);color:#fff;border-color:var(--down)}
.ubtn--danger svg{width:15px;height:15px}
/* Круглая иконка-кнопка удаления: padding от .ubtn--danger сжимал SVG в точку 4px */
.ubtn--danger.ubtn--icon{padding:0;display:grid;place-items:center}
.ubtn--danger.ubtn--icon svg{width:16px;height:16px}
.uedit__actions{flex-wrap:wrap}
.uedit__spacer{flex:1 1 auto}
.uedit__row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.uedit__newhead{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:800;color:var(--ink);margin:0 0 12px}
.uedit__newhead svg{width:18px;height:18px;color:var(--brand)}
.urow--new{border-color:color-mix(in srgb,var(--brand) 45%,var(--line));background:var(--surface)}
.uava span svg{width:46px;height:46px}
.uadd{margin-left:auto;padding:8px 14px;white-space:nowrap}
.uadd svg{width:16px;height:16px}
.uadd.is-on{background:var(--surface);color:var(--brand);border-color:color-mix(in srgb,var(--brand) 40%,var(--line))}
/* «Сбросить все сессии» перенесена в шапку «Команда» — встаёт справа рядом с «Добавить» */
.chcol__reset{margin-left:auto;white-space:nowrap}
.chcol__head .uadd{margin-left:8px}
.chcol__head{flex-wrap:wrap;gap:8px}
@media (max-width:680px){ .uedit__row2{grid-template-columns:1fr} }

/* ===== «Команда» Этап 2: онлайн-статус в строке (слияние «Кто на сайте») ===== */
.urow__ava{position:relative;overflow:visible}
.urow__dot{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;border:2px solid var(--surface);background:#cbd2da;box-sizing:border-box}
.urow__dot.is-on{background:#22c55e}
.urow__dot.is-away{background:#e0a000}
.urow__dot.is-off{background:#cbd2da}
.urow__pres{font-size:11.5px;font-weight:600;color:var(--muted);margin-top:2px;display:flex;align-items:center;gap:4px;flex-wrap:wrap;line-height:1.3}
.urow__pres.is-on{color:#0f9d58}
.urow__pres.is-away{color:#c98a00}
.urow__dev{color:var(--muted);font-weight:500}
.urow__warn{display:inline-flex;align-items:center;gap:3px;font-size:10.5px;font-weight:700;color:#b07700;background:color-mix(in srgb,#e0a000 16%,transparent);padding:1px 7px;border-radius:999px}
.urow__warn svg{width:12px;height:12px}
[data-theme="dark"] .urow__pres.is-on{color:#34d399}
[data-theme="dark"] .urow__pres.is-away{color:#fbbf24}

/* ===== Этап 3: фото вместо инициалов (шапка «кто онлайн» + «История») ===== */
.chrow__ava--img,.ppl-ava--img{overflow:hidden}
.chrow__ava--img img,.ppl-ava--img img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}

/* ===== «Команда» Этап 4: часы присутствия за неделю ===== */
.pweek-list{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.pweek{display:flex;align-items:center;gap:11px;padding:9px 11px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);transition:border-color .15s}
.pweek:hover{border-color:color-mix(in srgb,var(--brand) 30%,var(--line))}
.pweek__rank{flex:none;width:20px;text-align:center;font-weight:800;font-size:12.5px;color:var(--muted)}
.pweek__ava{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:12px;font-weight:800;letter-spacing:.3px}
.pweek__main{flex:1;min-width:0}
.pweek__name{font-size:13px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pweek__val{font-weight:800;color:var(--brand);font-size:12.5px}
.pweek__bar{height:6px;border-radius:999px;background:var(--surface-2);margin-top:5px;overflow:hidden}
.pweek__bar span{display:block;height:100%;border-radius:999px;background:var(--brand)}
.pweek__spark{flex:none;width:92px}
@media (max-width:560px){ .pweek__spark{display:none} }

.cava--img{overflow:hidden}
.cava--img img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}

/* ===== Гамбургер-меню разделов (слева в шапке) → выезжающая панель со всеми хабами ===== */
.iconbtn.navburger{margin-right:2px}
.iconbtn.navburger:hover{border-color:var(--brand);color:var(--brand)}
.iconbtn.navburger svg{width:21px;height:21px}
.navm{position:fixed;inset:0;z-index:90}
.navm[hidden]{display:none}
.navm__backdrop{position:absolute;inset:0;background:rgba(10,14,18,.35);opacity:0;transition:opacity .2s}
.navm.is-open .navm__backdrop{opacity:1}
.navm__card{position:absolute;top:0;left:0;bottom:0;width:min(348px,90vw);display:flex;flex-direction:column;
  background:var(--surface);border-right:1px solid var(--line);box-shadow:18px 0 50px rgba(16,24,40,.16);
  transform:translateX(-102%);transition:transform .24s cubic-bezier(.4,0,.2,1)}
.navm.is-open .navm__card{transform:none}
.navm__head{display:flex;align-items:center;gap:11px;padding:15px 16px;border-bottom:1px solid var(--line);flex:none}
.navm__title{font-size:14px;font-weight:800;color:var(--ink);letter-spacing:.3px}
.navm__close{margin-left:auto;width:34px;height:34px;border:1px solid var(--line);border-radius:10px;background:var(--surface);
  display:grid;place-items:center;cursor:pointer;color:var(--muted);transition:.15s}
.navm__close:hover{border-color:var(--brand);color:var(--brand)}
.navm__close svg{width:16px;height:16px}
.navm__list{flex:1;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:3px}
.navm__sec{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;padding:10px 11px 4px}
.navm__item{display:flex;align-items:center;gap:12px;width:100%;text-align:left;font:inherit;
  border:1px solid transparent;border-radius:var(--r-sm);padding:9px 11px;cursor:pointer;background:none;transition:background .14s,border-color .14s}
.navm__item:hover{background:var(--surface-2);border-color:var(--line)}
.navm__ic{width:36px;height:36px;border-radius:10px;flex:none;display:grid;place-items:center;
  background:color-mix(in srgb,var(--c,var(--brand)) 13%,var(--surface));color:var(--c,var(--brand))}
.navm__ic svg{width:18px;height:18px}
.navm__tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.navm__tx b{font-size:13.5px;font-weight:700;color:var(--ink)}
.navm__tx span{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.navm__badge{flex:none;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--brand);color:#fff;
  font-size:10.5px;font-weight:800;display:grid;place-items:center}
.navm__go{flex:none;color:var(--muted);display:inline-flex}
.navm__go svg{width:15px;height:15px;transform:rotate(-90deg)}
.navm__item:hover .navm__go{color:var(--brand)}

/* Лента событий: прятать по [hidden]; у закрытой (не .is-open) гасим клики */
.bfeed[hidden]{display:none!important}
.bfeed:not(.is-open){pointer-events:none}

/* ===== Маркетинг — кокпит владельца (отдача источников и сайтов) · паттерны главной ===== */
/* таблица источников */
/* Личная расстановка столбцов «Отчёт по источникам» (bindMkExtras, app.js) — ручка-«гамбургер»
   в заголовке, тянешь — столбец встаёт на новое место; сохраняется через api/mkorder.php по
   логину, у каждого пользователя своя. */
/* рейтинг сайтов */
/* тренд к прошлому периоду — цвет означает «хорошо/плохо для бизнеса», не сам факт роста
   (см. mkTrend() в app.js): is-up/is-down красятся по параметру up конкретной метрики,
   is-flat — направление не оценивается (0% или показатель без явно «лучше/хуже») */
/* кликабельные числа/строки → график */
/* «Куда залить 100 руб» — рекомендация */
/* кликабельная карточка-метрика (KPI кокпита) */
/* донат «откуда вал — доля источников» */
/* Цель в центре доната (под цифрой «Итого», #1): значение/план цели цветом цели.
   v2: пилюли кликабельны у своих целей (правка итога на месте), «+»/«Введите цель» — новая цель. */
/* широкая таблица источников (много метрик) — горизонтальный скролл */
/* Дублирующий скроллбар СВЕРХУ таблицы (mkBindTopScroll, app.js) — тянуть таблицу,
   не опускаясь к её нижнему краю. Пустой внутренний div растянут на ширину таблицы,
   сам скроллбар — единственное, что видно (высота полосы). */
/* Таблица «по объявлениям» (Отчёт по Avito) — ширина столбцов задаётся ЯВНО (colgroup),
   table-layout:fixed, а не auto — иначе браузер сам раздувает столбец под длинный текст
   и наша ручка изменения ширины ничего не решает. Длинное название объявления не
   переносится по строкам, а обрезается многоточием («Обрезать текст», как в Google
   Таблицах) — раньше многострочные названия раздували высоту каждой строки и делали
   таблицу громоздкой (заметил владелец). */
/* width:auto (не 100%!) — иначе table-layout:fixed пропорционально СЖИМАЕТ все столбцы
   под ширину контейнера вместо реального переполнения/горизонтального скролла (обёртка
   .mk-tblwrap--scroll и так даёт overflow-x:auto) — из-за этого ручка изменения ширины
   визуально «не работала» (растягивала на N px, но браузер тут же пропорционально всё
   сжимал обратно, чтобы уместиться в 100%). */
/* min-width:1120px у .mk-tbl--wide — для таблицы «по источникам» (auto layout, много
   столбцов, не resizable): форсирует горизонтальный скролл вместо сжатия столбцов.
   У resizable-таблиц (Avito/сделки) ширина ЦЕЛИКОМ определяется явными width на
   ячейках (cw() в app.js) — тот же min-width поверх них раздувал таблицу пустым белым
   местом справа при малом числе видимых столбцов («Свернуть пустые значения» оставляет
   1-2 столбца) — сброс min-width здесь возвращает таблице её настоящую ширину. */
/* ЛИПКИЙ первый столбец: ячейка обязана остаться настоящей table-cell. С display:block она
   перестаёт тянуться на высоту строки (замер 27.07: 36px против 40px), и в зазор снизу
   просвечивает то, что проезжает ПОД ней при горизонтальной прокрутке — подсветка
   отсортированного столбца и вертикальные разделители. Многоточие даёт вложенный блок. */
/* Заголовок столбца — до ДВУХ строк, а не одна с «КОНТАКТЫ СО СК…» (владелец 2026-07-20:
   «съедается текст»): line-clamp дорезает многоточием только то, что не влезло и в две. */
/* «Итого» — первая строка таблицы «по объявлениям», выделена (см. app.js:mkAvItemsTableHtml) */
/* Закреплённые первые два столбца (название + регион) — ползут за горизонтальным скроллом,
   чтобы сверять метрики с названием объявления (владелец 2026-07-22). Смещение «региона»
   равно ширине «названия» — держится в --mk-name-w (mkSyncSticky2 в app.js). */
/* border-collapse:separate ОБЯЗАТЕЛЕН для закреплённых столбцов: при collapse (по умолчанию у
   .mk-tbl) Chrome НЕ двигает бордюры sticky-ячейки вместе с ней и рендерит их непредсказуемо
   (жирная граница «висла» на месте, линии в шапке пропадали — владелец 2026-07-22). Со
   separate каждый бордюр принадлежит ячейке и едет с ней. border-spacing:0 — без зазоров. */
/* Вертикальные разделители столбцов — сплошные var(--line), в тон горизонтальным (чтобы
   значения не сливались). В шапке линия чуть темнее — иначе не видна на сером фоне и столбец
   трудно ухватить для перетаскивания (владелец 2026-07-22). */
/* Жирная граница закреплённой зоны (объявление+регион) ↔ остальные — чёткая линия НА sticky-
   «регионе», едет вместе с ним (без размытой тени: в строке «Итого» она выглядела грязно). */
/* Подсветка столбца, по которому идёт сортировка (перебивает фон sticky-ячеек за счёт
   большей специфичности td.is-sorted/th.is-sorted). */
/* динамика — два двойных графика на одну полосу */
/* Каталог номенклатуры — сайдбар категорий + сетка карточек товара (ТЗ п.8) */
.mk-lead{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-soft);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 14px;margin:0 0 14px}
.mk-lead svg{width:16px;height:16px;flex:none;color:var(--brand)}
/* Подменю товаров категории (applyMkCatalog) — раскрывается под пунктом категории, список
   товаров может быть длинным (ТЗ: «позиций очень много»), поэтому со своим скроллом, а не
   растягивает всю боковую навигацию. */
/* Подзаголовок-бренд внутри подсписка категории — просто разделитель (не кнопка,
   не сворачивается), товар под ним всё так же открывается в один клик. */
/* Поиск по каталогу номенклатуры (applyMkCatalog) — в одной строке с фильтрами периода/суммы,
   прижат к правому краю (margin-left:auto на самом инпуте-обёртке). */
/* Заглушка под будущее фото товара/категории (пока — крупный значок в квадрате;
   когда появятся реальные фото из 1С, сюда встанет <img>, разметка не изменится). */
/* Явные подписи «шт продано»/«выручка»/ROMI (не голые числа рядом) — карточка товара
   и карточка-категория («Все категории») используют одну и ту же разметку. */
/* Сортировка каталога: «ЧТО» (dropdown) + компактный кружок-переключатель направления
   ▲/▼ рядом, визуально сросшийся с дропдауном в один элемент (общая рамка, без зазора). */
/* Крошки внутри каталога (Все категории › Категория › Бренд) — навигация между тремя
   уровнями вложенности. */
/* Переключатель «по брендам/категориям ↔ списком» — вкладки в сайдбаре (не кнопка с
   меняющейся подписью в тулбаре — владелец 2026-07-17 нашёл это неинтуитивным). Обе
   вкладки видны всегда, активная подсвечена — тот же паттерн, что переключатель вида
   таблицы/списка в других разделах приложения. */

/* Фильтр-дропдауны: длинные имена (поставщики) обрезаем троеточием, меню не шире экрана */
.dd__menu{max-width:min(340px,92vw)}
.dd__item{overflow:hidden}
.dd__label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd__cur{display:inline-block;max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}

/* «Заказано» кликабельно + иконки склада/отправки + таблица заказов из 1С */
.purch-ord{color:inherit;cursor:pointer;border-bottom:1px dashed var(--muted);transition:.15s}
.purch-ord:hover{color:var(--brand)}
.purch-ord:hover .purch-wh{opacity:1;color:var(--brand)}
.purch-wh{width:13px;height:13px;vertical-align:-2px;opacity:.6;margin-right:2px}
/* кликабельный «домик» — открывает остатки по складам */
.purch-wh-btn{border:none;background:transparent;color:inherit;font:inherit;cursor:pointer;padding:0 1px;border-radius:5px;border-bottom:1px dashed var(--muted);transition:.15s}
.purch-wh-btn:hover{color:var(--brand)}
.purch-wh-btn:hover .purch-wh{opacity:1;color:var(--brand)}
/* окно «Остатки по складам» */
.whlist{display:flex;flex-direction:column;gap:2px}
.whrow{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:9px 4px;border-bottom:1px solid var(--line)}
.whrow:last-child{border-bottom:none}
.whrow:nth-last-child(2){border-bottom:none}   /* строка перед «Итого» — без своей линии, чтобы не двоилось с border-top итога */
.whrow__n{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:var(--ink)}
.whrow__n svg{width:15px;height:15px;color:var(--muted);flex:none}
.whrow__q{font-size:13.5px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.whrow__q.is-neg{color:var(--down)}
.whrow--total{margin-top:4px;border-top:2px solid var(--line);border-bottom:none;padding-top:11px}
.whrow--total .whrow__n{font-weight:800;color:var(--muted)}
.whrow--head{margin-top:10px;border-top:2px solid var(--line);border-bottom:1px solid var(--line);padding-top:11px}
.whrow--head .whrow__n{font-weight:800;color:var(--muted)}
.whrow--head .whrow__q{color:var(--muted)}
.kpi-sent{display:inline-flex;vertical-align:-2px}.kpi-sent svg{width:14px;height:14px}
.ord-tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.ord-tbl th{text-align:left;color:var(--muted);font-weight:600;font-size:12px;padding:7px 10px;border-bottom:1px solid var(--line)}
.ord-tbl td{padding:8px 10px;border-bottom:1px solid var(--line);color:var(--ink)}
.ord-tbl td.ord-q{text-align:right;font-weight:700}
.ord-tbl tbody tr:last-child td{border-bottom:none}
/* ── Панель «Приёмка лидов» (docs/LEADS_INTAKE_PLAN.md §3.11), только админам ── */
.intake__head{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:9px 11px;margin-bottom:14px;border-radius:10px;background:var(--soft);font-size:13.5px}
.intake__head svg{width:16px;height:16px;flex:none;color:var(--ok,#00a79a)}
.intake__head.is-stale{background:color-mix(in srgb,var(--down) 12%,transparent)}
.intake__head.is-stale svg{color:var(--down)}
.intake__head button{margin-left:auto}
/* Панель широкая: таблица на 9 колонок в стандартные 440px модалки не влезает.
   Тот же приём, что у карточки лида ниже (.modal__card:has(.lead)). */
/* Панель широкая: таблица на 9 колонок в стандартные 440px модалки не влезала, а
   строки разъезжались на три. Потолок 1400px — предохранитель для больших мониторов:
   без него цифры уезжают к правому краю и отрываются от названия источника. */
.modal__card:has(.intake){max-width:1400px;max-height:94vh}
.intake__tbl{margin-bottom:6px}
.intake__tbl th,.intake__tbl td{padding:5px 10px;white-space:nowrap}
.intake__tbl tbody tr:hover{background:var(--soft)}   /* вести глазом строку до цифр */
.intake__tbl td.is-warn{color:var(--down)}
.intake__src{width:100%}   /* источник забирает свободную ширину, цифры жмутся вправо */
.intake__mode{display:inline-block;padding:1px 7px;border-radius:20px;font-size:11px;font-weight:700;letter-spacing:.02em}
.intake__mode.is-live{background:color-mix(in srgb,#00a79a 18%,transparent);color:#00a79a}
.intake__mode.is-shadow{background:color-mix(in srgb,#e08600 18%,transparent);color:#e08600}
.intake__mode.is-off{background:var(--soft);color:var(--muted)}
.intake__miss{color:var(--down);font-weight:700;cursor:help}
.intake__h{font-size:13px;font-weight:700;margin:18px 0 8px;color:var(--ink)}
.intake__h .muted{font-weight:400}
.intake__day{font-size:13px;padding:4px 0;border-bottom:1px solid var(--line)}
.intake__unk{font-size:12.5px;margin-bottom:6px;border:1px solid var(--line);border-radius:8px;padding:7px 10px}
.intake__unk summary{cursor:pointer;color:var(--muted);font-weight:600}
.intake__unk pre{margin:8px 0 0;white-space:pre-wrap;word-break:break-all;font-size:12px;color:var(--ink)}

/* ── Меню отладки (иконка у названия доски «Продажи», только роль developer) ──
   Вкладки «Звонки / STT» и «Приёмка»; широкая модалка достаётся ей от .intake выше. */
.board__dbg{border:1px solid var(--line);background:var(--surface);color:var(--muted);border-radius:9px;padding:6px;cursor:pointer;display:inline-flex;align-items:center}
.board__dbg:hover{color:var(--ink)}
.board__dbg svg{width:16px;height:16px}
.modal__card:has(.dbg){max-width:1400px;max-height:94vh}
.dbg__tabs{display:flex;gap:6px;margin-bottom:12px;border-bottom:1px solid var(--line);padding-bottom:8px}
.dbg__tab{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);color:var(--muted);border-radius:9px;padding:6px 11px;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.dbg__tab svg{width:15px;height:15px}
/* Фолбэк var(--soft,var(--bg)) не для красоты: переменная --soft в теме НЕ объявлена
   (проверено в браузере), поэтому «фон» из неё сейчас прозрачный — новые блоки на это
   не опираются. */
.dbg__tab.is-on{background:var(--soft,var(--bg));color:var(--ink)}
.dbg__textrow td{white-space:normal!important;background:var(--soft,var(--bg))}

/* ── Расшифровка разговора в карточке лида (текст тянется из call_stt, см. lib/stt.php) ── */
.chist__stt{margin-top:5px}
.chist__sttbtn{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);background:var(--surface);color:var(--muted);border-radius:8px;padding:3px 9px;font:inherit;font-size:12px;font-weight:600;cursor:pointer}
.chist__sttbtn:hover{color:var(--ink)}
.chist__sttbtn svg{width:14px;height:14px}
.chist__stttext{margin-top:6px;padding:8px 10px;border-radius:9px;background:var(--soft,var(--bg));border:1px solid var(--line);font-size:13px;line-height:1.45;max-height:320px;overflow:auto}
.chist__sttline{margin:0 0 4px;color:var(--ink)}
.chist__rechint{font-size:12px;color:var(--muted)}

/* № заказа — кликабельный, открывает состав заказа */
.ord-numlink{border:none;background:transparent;color:var(--brand);font:inherit;font-weight:700;cursor:pointer;padding:0;border-bottom:1px dashed currentColor}
.ord-numlink:hover{opacity:.8}
/* окно «Состав заказа» */
.ord-det__head{display:flex;flex-direction:column;gap:7px;margin-bottom:14px}
.ord-det__row{display:flex;align-items:baseline;justify-content:space-between;gap:14px;font-size:13.5px}
.ord-det__row span{color:var(--muted);font-weight:600;flex:none}
.ord-det__row b{font-weight:700;color:var(--ink);text-align:right}
.ord-det__tbl tfoot td{padding:9px 10px;border-top:2px solid var(--line);font-weight:800;color:var(--ink)}
.ord-det__tbl tfoot td.ord-q{text-align:right}
/* ── Премиальная отделка модалок закупок: плитки/чипы/строки из паттернов главной ── */
.mdl-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:14px}
.mdl-kpi{background:var(--surface-2);border-radius:var(--r-sm);padding:11px 13px;display:flex;flex-direction:column;gap:8px}
.mdl-kpi__chip{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--c,var(--brand)) 16%,transparent);color:var(--c,var(--brand))}
.mdl-kpi__chip svg{width:18px;height:18px}
.mdl-kpi__label{font-size:11.5px;color:var(--muted);font-weight:600;line-height:1.2}
.mdl-kpi__val{font-size:19px;font-weight:800;letter-spacing:.2px;line-height:1.05;font-variant-numeric:tabular-nums}
.mdl-kpi__val small{font-size:11.5px;font-weight:600;color:var(--muted);margin-left:3px}
.ordcard{background:var(--surface-2);border-radius:var(--r-sm);padding:2px 13px;margin-bottom:14px}
.ordcard__row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px solid var(--line)}
.ordcard__row:last-child{border-bottom:none}
.ordcard__k{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);font-weight:600;flex:none}
.ordcard__k svg{width:15px;height:15px;color:var(--muted)}
.ordcard__v{font-size:13.5px;font-weight:700;color:var(--ink);text-align:right}
.ordpill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:3px 11px;border-radius:999px;background:color-mix(in srgb,var(--c,var(--muted)) 15%,transparent);color:var(--c,var(--muted))}
.ordpill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.ordnote{display:flex;gap:9px;background:var(--brand-tint);border-radius:var(--r-sm);padding:10px 12px;margin-bottom:14px;font-size:13px;line-height:1.5;color:var(--ink-soft)}
.ordnote svg{width:16px;height:16px;flex:none;color:var(--brand);margin-top:1px}
.ordlines{display:flex;flex-direction:column;gap:7px}
.ordline{display:flex;align-items:center;gap:11px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 11px}
.ordline__q{flex:none;min-width:40px;height:30px;padding:0 9px;border-radius:9px;display:grid;place-items:center;background:var(--surface-2);font-weight:800;font-size:13px;font-variant-numeric:tabular-nums;color:var(--ink)}
.ordline__nm{flex:1;font-size:13px;font-weight:600;line-height:1.3;color:var(--ink)}
.ordline__sum{flex:none;font-size:13px;font-weight:800;color:var(--ink);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.ordline__sum.is-zero{color:var(--muted);font-weight:600}
.ordtotal{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:11px;padding-top:12px;border-top:2px solid var(--line)}
.ordtotal__l{font-size:13px;font-weight:800;color:var(--muted)}
.ordtotal__r{display:flex;align-items:baseline;gap:12px}
.ordtotal__q{font-size:13px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.ordtotal__s{font-size:18px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.whlist2{display:flex;flex-direction:column;gap:7px}
.whcard{display:flex;align-items:center;gap:11px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 11px}
.whcard__ic{flex:none;width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:color-mix(in srgb,var(--brand) 13%,transparent);color:var(--brand)}
.whcard__ic svg{width:17px;height:17px}
.whcard__nm{flex:1;font-size:13.5px;font-weight:600;color:var(--ink)}
.whcard__q{flex:none;font-size:14px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--ink)}
.whcard__q.is-neg{color:var(--down)}
.whcard__q small{font-size:11px;font-weight:600;color:var(--muted);margin-left:3px}
/* Склад исключён из анализа (purchWhsRow помечает так же) — окно живых остатков 1С не расходится с чипами */
.whcard.is-off{opacity:.55}
.whcard.is-off .whcard__nm{text-decoration:line-through}
/* Окно «Склады анализа» (openPurchUnits) — список складов с галочками включения в расчёт.
   Чип-кнопка наследует рамку от .purch-fresh (border:0 её перебивал — некликабельный сосед
   «обновлено N назад» выглядел рамкой заметнее кликабельной кнопки, находка №8 финального
   ревью); :hover — как у соседних переключателей тулбара (.purch-onsite). */
.purch-fresh--btn{cursor:pointer;font-family:inherit}
.purch-fresh--btn:hover{border-color:var(--brand);color:var(--brand)}
.purch-fresh--btn:hover svg{color:var(--brand)}
.whpick__note{color:var(--muted);font-size:13px;margin-bottom:10px}
.whpick__list{max-height:52vh;overflow-y:auto;display:flex;flex-direction:column;gap:2px}
.whpick__row{display:grid;grid-template-columns:18px 1fr auto;align-items:center;gap:10px;padding:7px 8px;border-radius:8px;cursor:pointer}
.whpick__row:hover{background:var(--surface-2)}
.whpick__row.is-off .whpick__nm{opacity:.55;text-decoration:line-through}
.whpick__n{color:var(--muted);font-size:12px;white-space:nowrap}
.whpick__del{color:var(--muted);font-size:11px}
.whpick__bar{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}
/* .purch-arch — обычно квадратная 34×34 кнопка-иконка (архив/цена у карточки позиции);
   здесь в ней текст («Отметить все» и т.п.) — снимаем фиксированную ширину. */
.whpick__bar .purch-arch{width:auto;padding:0 14px;font-size:12px;font-weight:700;white-space:nowrap}
.mdl-sub{display:flex;align-items:center;gap:8px;margin:16px 2px 10px;font-size:12.5px;font-weight:700;color:var(--muted)}
.mdl-sub svg{width:15px;height:15px;color:var(--muted)}
.mdl-sub__n{margin-left:auto;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.resv{display:flex;align-items:center;gap:10px;padding:8px 4px;border-bottom:1px solid var(--line)}
.resv:last-child{border-bottom:none}
.resv__ic{flex:none;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:var(--surface-2);color:var(--muted)}
.resv__ic svg{width:15px;height:15px}
.resv__mn{flex:1;display:flex;flex-direction:column;gap:1px;min-width:0;align-items:flex-start}
.resv__mn .ord-numlink{font-size:13px}
.resv__num{font-size:13px;font-weight:700;color:var(--ink)}
.resv__date{font-size:11.5px;color:var(--muted);font-weight:600}
.resv__q{flex:none;font-size:13px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--ink)}

/* Архивные позиции отчёта: серая приглушённая карточка, «Отправить» неактивна, кнопка архива — тумблер «Вернуть» */
.purch-card.is-archived{background:var(--surface-2);opacity:.72;filter:grayscale(.45)}
.purch-card.is-archived .purch-send__btn[disabled]{opacity:.5;cursor:not-allowed;pointer-events:none}
/* «Вернуть из архива» — сплошная подсветка (без полупрозрачного тинта), чтобы кнопка выделялась. */
.purch-arch.is-arch{color:#fff;background:var(--brand);border-color:var(--brand)}
.purch-arch.is-arch:hover{color:#fff;background:var(--brand);border-color:var(--brand);filter:brightness(1.08)}

/* «Остаток ассортимента»: под сужающим фильтром — серым вся подходящая номенклатура, которую
   анализ покупать не велел (можно дозаказать с запасом). Приглушена сильнее архива; на ховере
   оживает до полного цвета, чтобы удобно было выбрать и заказать нужное. */
.purch-resthead{margin-top:20px;padding-top:16px;border-top:1px dashed var(--line)}
.purch-list--rest{margin-top:2px}
.purch-card--rest{opacity:.6;filter:grayscale(.5);transition:opacity .14s ease,filter .14s ease}
.purch-card--rest:hover{opacity:1;filter:none}
.purch-rest-skel{display:flex;align-items:center;justify-content:center;gap:9px;
  padding:18px;color:var(--muted);font-size:13px;font-weight:600;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r,16px)}
.purch-rest-skel svg{width:18px;height:18px;opacity:.7;flex:none}
/* «Показать ещё» под серым ассортиментом — каталог рендерится порциями (тысячи карточек сразу вешают вкладку) */
.purch-restmore-wrap{display:flex;justify-content:center;margin-top:12px}
.purch-restmore__rest{color:var(--muted);font-weight:600;opacity:.8}
/* вторая цифра в фильтрах — «в запасе» (серый ассортимент): приглушённый довесок к цифре аудита */
.dd-res{color:var(--muted);font-weight:600;font-size:.92em;opacity:.85}
.dd__btn .dd-res{opacity:.7}


/* ============================================================
   ПОСТАВЩИКИ — каталог + кабинет производителя (из паттернов главной:
   .hello / .histkpi / .chcol / белые карточки на сером, флэт, без теней).
   ============================================================ */
/* ВНИМАНИЕ: анимация БЕЗ transform — намеренно. Раньше здесь был fadeUp, а он оставляет
   на .suppliers застрявший transform (translateY стартового кадра при fill-mode both).
   Элемент с transform становится точкой отсчёта для position:fixed внутри себя — и все
   плавающие слои кабинетов (.supdrawer, .supov, .suppickbar) обрезались по высоте
   секции: раскрытая карточка заказа была видна только до нижней границы канбана.
   Меняешь эту строку — проверь раскрытую карточку в ЛК поставщика И брокера. */
@keyframes fadeSoft{from{opacity:0}to{opacity:1}}
.suppliers{animation:fadeSoft .3s ease both}
/* каталог */
.supgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.supcard{display:flex;align-items:center;gap:13px;text-align:left;width:100%;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 15px;cursor:pointer;
  transition:border-color .16s,box-shadow .18s,transform .12s;font:inherit;color:inherit}
.supcard:hover{border-color:color-mix(in srgb,var(--c,var(--brand)) 45%,var(--line));
  box-shadow:0 8px 22px -16px rgba(20,16,12,.3);transform:translateY(-1px)}
.supcard__ava{width:44px;height:44px;border-radius:13px;flex:none;display:grid;place-items:center;
  background:var(--a,#94a3b8);color:#fff;font-size:14px;font-weight:800;letter-spacing:.3px}
.supcard__ava img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
.supcard__b{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.supcard__name{font-size:15px;font-weight:700;color:var(--ink);line-height:1.2}
.supcard__meta{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.supcard__chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.supchip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;color:var(--ink-soft);
  background:var(--surface-2);border-radius:999px;padding:3px 9px}
.supchip svg{width:13px;height:13px}
.supchip--warn{color:#a35a00;background:color-mix(in srgb,#f59e0b 16%,var(--surface))}
.supchip--ok{color:#127a4a;background:color-mix(in srgb,#16a34a 14%,var(--surface))}
.supcard__go{flex:none;color:var(--muted);display:inline-flex}
.supcard__go svg{width:18px;height:18px}
.supcard:hover .supcard__go{color:var(--c,var(--brand))}
.supcard__ring{flex:none;display:flex;flex-direction:column;align-items:center;gap:1px;margin-left:6px}
.supcard__ring svg{flex:0 0 auto}
.supcard__ringl{font-size:9.5px;color:var(--muted)}

/* кабинет: hero у поставщика */
.suphero{display:flex;gap:16px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:20px 22px;margin:0 2px 18px;border-left:4px solid var(--c,var(--brand))}
.suphero__ava{width:56px;height:56px;border-radius:15px;flex:none;display:grid;place-items:center;
  background:var(--a,var(--c,#94a3b8));color:#fff;font-size:18px;font-weight:800}
.suphero__ava img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
/* логотип в шапке — кнопка «на стартовую»: оболочка повторяет коробку аватара */
.suphero__home{flex:none;display:block;padding:0;border:0;background:none;line-height:0;cursor:pointer;
  border-radius:15px;transition:transform .12s ease,box-shadow .12s ease}
.suphero__home:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(15,23,42,.14)}
.suphero__home:active{transform:none}
.suphero__home:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.suphero__b{min-width:0}
.suphero__brand{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;letter-spacing:.4px;
  text-transform:uppercase;color:var(--c,var(--brand))}
/* Переключатель языка RU/EN/中文 (правый верх кабинета поставщика). Контейнер
   position:absolute со shrink-to-fit шириной — flex-wrap на нём никогда не сработает
   (нет ограничивающей ширины); от узкого экрана спасает @media ниже, переводящий блок
   в position:static. white-space:nowrap на кнопках — чтобы подпись не резалась. */
.suppliers{position:relative}
/* Ряд инструментов кабинета (дизайн + язык). Позиционируется ОН, а кнопки внутри —
   обычным потоком: пока каждая позиционировалась своим `right`, рост языкового
   переключателя до трёх языков накрыл кнопку дизайна (2026-08-12). */
.suphdtools{position:absolute;top:14px;right:8px;z-index:6;display:flex;align-items:center;gap:8px}
.suphdtools .suplang{position:static;top:auto;right:auto;transform:none}
.suplang{position:absolute;top:14px;right:8px;z-index:6;display:inline-flex;gap:2px;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:3px}
.suplang__b{font:inherit;font-size:12px;font-weight:700;border:0;background:none;color:var(--muted);border-radius:7px;padding:5px 11px;cursor:pointer;line-height:1.2;white-space:nowrap}
.suplang__b.is-on{background:var(--brand);color:var(--brand-ink)}
.suplang__b:not(.is-on):hover{color:var(--ink)}
/* Русский оригинал под машинным переводом названия позиции (supTranslate вставляет
   <span data-suporig>): поставщик сверяет по нему позицию. display:block — чтобы имя
   и оригинал не сливались в одну строку внутри .suptr__name (там flex/inline-контент);
   overflow-wrap — длинные имена позиций бывают в 200 символов. */
.supitem__o{display:block;flex:0 0 100%;width:100%;font-size:11.5px;color:var(--muted);margin-top:2px;line-height:1.35;font-weight:400;white-space:normal;overflow-wrap:anywhere}
/* Своего правила для .suptr__name здесь НЕТ и не нужно. Раньше стояло
   `.suptr__name:has(.supitem__o){flex-wrap:wrap;white-space:normal;overflow:visible;
   text-overflow:clip}` с объяснением «иначе оригинал встанет второй флекс-ячейкой и
   обрежется по ellipsis» — объяснение было НЕВЕРНЫМ и заодно опасным: оно оправдывало
   правило, которое ничего не решало. .suptr__name объявлен на верхнем уровне ДВАЖДЫ
   (:6849/:6854 с nowrap+ellipsis и :7014 с flex-wrap:wrap+white-space:normal+
   overflow:visible+text-overflow:clip); при равной специфичности побеждает ПОЗДНЕЕ, то
   есть перенос строки и так включён всегда, а :has() лишь повторял его набор свойств.
   Из этого следует, за чем тут надо следить: строка выше (.supitem__o) держит оригинал
   отдельной строкой САМА — flex:0 0 100% + display:block, а не надеждой на :has(). */
.suphero__brand svg{width:15px;height:15px}
/* мобилка: переключатель языка — в нормальный поток (не поверх текста героя) */
@media (max-width:640px){
  .suphero{flex-wrap:wrap}
  .suphero__ava,.suphero__home{order:-2}
  /* ряд инструментов уходит в поток шапки (позиционируется он, а не кнопки внутри).
     transform:none — гасим правило ≤740 ниже по файлу: у статичного элемента оно не
     центрировало бы, а просто сдвигало его вверх на половину высоты. */
  .suphdtools{position:static;order:-1;margin-left:auto;align-self:center;transform:none}
  .suphero__b{flex:1 1 100%;order:0}
}
.suphero__name{font-size:25px;font-weight:300;color:var(--ink);margin:5px 0 6px;line-height:1.15}
.suphero__p{font-size:13px;color:var(--muted);margin:0;max-width:760px;line-height:1.5}
/* шапка карточки поставщика у владельца: аватар + заголовок слева, кнопка справа */
.suphead{display:flex;align-items:center;gap:14px;min-width:0}
/* фото поставщика в форме «Изменить данные»: превью + кнопки */
.supcphoto{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:4px}
.supcphoto__act{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.supcphoto__hint{color:var(--muted);font-size:12px;flex-basis:100%}

/* список строк заказа */
.suplist{display:flex;flex-direction:column;gap:12px}
.supline{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:15px 16px;
  border-left:4px solid var(--c,var(--brand))}
.supline__head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.supline__title{display:flex;align-items:baseline;gap:10px;min-width:0;flex-wrap:wrap}
.supline__title b{font-size:15px;font-weight:700;color:var(--ink)}
.supline__qty{font-size:12.5px;font-weight:700;color:var(--c,var(--brand));white-space:nowrap}
.supstat{flex:none;font-size:11.5px;font-weight:800;color:var(--c,var(--brand));
  background:color-mix(in srgb,var(--c,var(--brand)) 13%,var(--surface));border-radius:999px;padding:4px 11px}
.supline__prog{height:5px;border-radius:999px;background:var(--surface-2);margin:11px 0 13px;overflow:hidden}
.supline__prog i{display:block;height:100%;border-radius:999px;transition:width .35s ease}
.supline__grid{display:grid;grid-template-columns:1.2fr 1fr;gap:16px}
.supline__lbl{font-size:11px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;color:var(--muted);
  display:flex;align-items:center;gap:8px;margin-bottom:9px}
.supline__top{display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap;margin-bottom:11px}
.supline__top .supline__facts{flex-direction:row;flex-wrap:wrap;gap:6px 18px}
.supline__top .supline__prod{margin:0}
.supline__top .supline__edit{margin-left:auto}
.supstages{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:10px;align-items:start}
.supstages .supstage{margin-bottom:0;height:100%}
/* предоплата от КРОНОС — правится прямо в карточке (дата) */
.supprepay{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--muted);background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:4px 6px 4px 11px;cursor:pointer}
.supprepay.is-yes{color:#127a4a;border-color:color-mix(in srgb,#16a34a 30%,var(--line));background:color-mix(in srgb,#16a34a 6%,var(--surface))}
.supprepay__l{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.supprepay__l svg{width:15px;height:15px}
.supprepay__i{font:inherit;font-size:12.5px;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:7px;padding:3px 7px}
.supprepay__i:focus{outline:none;border-color:var(--brand)}
/* статус спецификации в карточке (подкреплена / не подкреплена + прикрепить) */
.supline__specbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:11px}
.supspec{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;border-radius:9px;padding:5px 11px}
.supspec svg{width:15px;height:15px;flex:none}
.supspec--ok{color:#127a4a;background:color-mix(in srgb,#16a34a 8%,var(--surface));border:1px solid color-mix(in srgb,#16a34a 22%,var(--line))}
.supspec--ok .supline__lnk{color:#127a4a}
.supspec--none{color:#9a4410;background:color-mix(in srgb,#f59e0b 12%,var(--surface));border:1px solid color-mix(in srgb,#f59e0b 36%,var(--line))}
.supline__specbar .specrow__edit{width:27px;height:27px}
.supline__specbar .specrow__form{flex-basis:100%;display:flex;gap:8px;margin-top:2px}
.supline__specbar .specrow__form .uinput{flex:1;min-width:200px}
.supline__added{font-weight:600;letter-spacing:0;text-transform:none;color:var(--muted);font-size:11px}
.supline__spec{display:flex;flex-direction:column;gap:2px;margin-bottom:8px}
.supline__k{font-size:11px;font-weight:700;color:var(--muted)}
.supline__v{font-size:13.5px;color:var(--ink);line-height:1.45}
.supline__lnk{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;color:var(--brand);text-decoration:none}
.supline__lnk svg{width:13px;height:13px}
.supline__note{font-size:12.5px;color:var(--ink-soft);display:flex;align-items:flex-start;gap:7px;
  background:var(--surface-2);border-radius:var(--r-sm);padding:8px 10px;margin-bottom:9px}
.supline__note svg{width:15px;height:15px;flex:none;color:var(--muted);margin-top:1px}
.supline__facts{display:flex;flex-direction:column;gap:6px}
.supfact{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--muted)}
.supfact svg{width:15px;height:15px;flex:none}
.supfact.is-yes{color:#127a4a}
.supline__theirs{background:color-mix(in srgb,var(--surface-2) 60%,var(--surface));border:1px dashed var(--line);
  border-radius:var(--r-sm);padding:12px 13px}
/* тоглы поставщика */
.suptgls{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.suptgl{display:flex;align-items:center;gap:10px;width:100%;text-align:left;cursor:pointer;font:inherit;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 11px;
  color:var(--ink-soft);transition:border-color .15s,background .15s}
.suptgl:hover{border-color:color-mix(in srgb,var(--brand) 35%,var(--line))}
.suptgl__box{width:22px;height:22px;flex:none;border-radius:7px;border:2px solid var(--line);display:grid;place-items:center;
  color:#fff;transition:background .15s,border-color .15s}
.suptgl__box svg{width:15px;height:15px}
.suptgl.is-on{border-color:color-mix(in srgb,#16a34a 45%,var(--line));background:color-mix(in srgb,#16a34a 8%,var(--surface));color:var(--ink);font-weight:600}
.suptgl.is-on .suptgl__box{background:#16a34a;border-color:#16a34a}
.suptgl__t{flex:1;font-size:13px}
/* даты поставщика */
.supdates{display:flex;flex-direction:column;gap:9px}
.supdate{display:flex;flex-direction:column;gap:4px}
.supdate__l{font-size:11.5px;font-weight:700;color:var(--muted)}
.supdate__i{font:inherit;font-size:13px;color:var(--ink);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 10px;width:100%;max-width:240px}
.supdate__i:focus{outline:none;border-color:var(--brand)}
/* 3 стадии поставщика: блок-статус с обязательными полями */
.supstage{background:color-mix(in srgb,var(--surface-2) 55%,var(--surface));border-radius:var(--r-sm);padding:10px 11px;margin-bottom:9px}
.supstage.is-on{background:color-mix(in srgb,#16a34a 7%,var(--surface))}
.supstage__t .suptgl{margin:0}
.supstage__t--lbl{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink-soft);padding:1px 0}
.supstage__t--lbl b{font-weight:600;color:var(--ink)}
.supstage__chk{width:22px;height:22px;flex:none;border-radius:7px;border:2px solid var(--line);display:grid;place-items:center;color:#fff}
.supstage__chk.is-on{background:#16a34a;border-color:#16a34a}
.supstage__chk svg{width:15px;height:15px}
.supstage__f{display:flex;flex-wrap:wrap;gap:10px 12px;margin-top:10px}
.supstage__f .supdate{flex:1;min-width:150px;gap:4px}
.supstage__f .supdate__i{max-width:none}
.supreq{color:#e0533d;font-weight:700}
.supdate__i.is-need{border-color:#e0533d;background:color-mix(in srgb,#e0533d 6%,var(--surface))}
.supstage__warn{display:flex;align-items:center;gap:6px;margin-top:9px;font-size:12px;color:#9a4410;background:color-mix(in srgb,#f59e0b 15%,var(--surface));border-radius:7px;padding:6px 9px}
.supstage__warn svg{width:14px;height:14px;flex:none;color:#9a4410}
/* Табличный бланк позиции (4·7): подпись слева — поле/контрол справа, строками */
.suptbl2{margin-top:13px;border-top:1px solid var(--line)}
.suptbl2 .suptr2{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;padding:9px 2px;border:0;border-bottom:1px solid var(--line);font:inherit;font-size:13px;color:var(--ink);background:none;text-align:left}
.suptbl2 .suptr2:last-child{border-bottom:0}
.suptr2__l{flex:1 1 auto;min-width:0;color:var(--ink-soft)}
.suptr2__l.is-need{color:#e0533d}
.suptr2__in{flex:0 0 auto;width:182px;max-width:48%;text-align:right;font:inherit;font-size:12.5px;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:7px 10px}
.suptr2__in:focus{outline:none;border-color:var(--brand)}
.suptr2__in.is-need{border-color:#e0533d;background:color-mix(in srgb,#e0533d 6%,var(--surface))}
.suptr2__in::placeholder{color:var(--muted)}
.suptr2--tgl{cursor:pointer}
.suptr2--tgl .suptr2__l{color:var(--ink);font-weight:600}
.suptr2__sw{flex:0 0 auto;width:21px;height:21px;border-radius:6px;border:2px solid var(--line);display:grid;place-items:center;color:#fff;background:var(--surface)}
.suptr2__sw svg{width:13px;height:13px}
.suptr2--tgl.is-on .suptr2__sw{background:#16a34a;border-color:#16a34a}
.suptr2--wide{flex-wrap:wrap;gap:9px}
.suppay{margin-top:13px;padding:12px;border:1px solid var(--line);border-radius:var(--r-md);background:color-mix(in srgb,var(--surface-2) 55%,var(--surface))}
.suppay.is-need{border-color:#e0533d}
.suppay__head{display:flex;align-items:center;gap:6px;margin-bottom:8px;color:var(--ink);font-size:13px}
.suppay__row{display:grid;grid-template-columns:minmax(0,1fr) 120px;align-items:center;gap:9px;padding:7px 0;border-bottom:1px solid var(--line);font-size:12.5px}
.suppay__row>span{min-width:0;color:var(--ink-soft)}
.suppay__row>b{text-align:right}
.suppay__row--edit{grid-template-columns:minmax(0,1fr) 112px 30px}
.suppay__row--advance{grid-template-columns:minmax(0,1fr) 112px}
.suppay__row input{width:100%;min-width:0;padding:7px 9px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);color:var(--ink);font:inherit}
.suppay__row input:focus{outline:none;border-color:var(--brand)}
.suppay__row label{display:flex;align-items:center;gap:5px;color:var(--muted)}
.suppay__row label input{text-align:right}
.suppay__row button{display:grid;place-items:center;width:30px;height:30px;border:0;border-radius:8px;background:none;color:var(--muted);cursor:pointer}
.suppay__row button:hover{background:color-mix(in srgb,#e0533d 10%,transparent);color:#e0533d}
.suppay__row button svg,.suppay__add svg{width:14px;height:14px}
.suppay__add{display:inline-flex;align-items:center;gap:6px;margin-top:9px;padding:7px 10px;border:1px dashed var(--brand);border-radius:var(--r-sm);background:none;color:var(--brand-fg);font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.suppay__sum{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;padding:8px 10px;border-radius:9px;background:color-mix(in srgb,#f59e0b 12%,var(--surface));color:#9a4410;font-size:12px}
.suppay__sum.is-ok{background:color-mix(in srgb,#16a34a 10%,var(--surface));color:#08783b}
.suppay__sum span{font-size:11.5px}
@media(max-width:560px){.suppay__row--edit{grid-template-columns:minmax(0,1fr) 92px 30px}.suppay__row--advance,.suppay__row{grid-template-columns:minmax(0,1fr) 92px}.suppay__sum{align-items:flex-start;flex-direction:column;gap:2px}}
/* Подсказка внутри строки-тумблера идёт сразу за текстом подписи, поэтому подпись не должна
   растягивать иконку и не должна её обрезать (у .suptr2__l стоит min-width:0). */
.suptr2--tgl .suptr2__l{display:flex;align-items:center}
.suptbl2__warn{display:flex;align-items:center;gap:6px;margin-top:10px;font-size:12px;color:#9a4410;background:color-mix(in srgb,#f59e0b 15%,var(--surface));border-radius:7px;padding:6px 9px}
.suptbl2__warn svg{width:14px;height:14px;flex:none;color:#9a4410}
@media (max-width:760px){ .supline__grid{grid-template-columns:1fr} }

/* закрытая оболочка: внешний подрядчик (поставщик, брокер) после входа не видит
   остальной сайт. #navBurger («Все разделы») сюда добавлен 2026-08-06: кнопка живёт в
   статичной шапке index.html и открывала подрядчику полный внутренний список разделов. */
body.k5-supplier .topbar .statusbar,
body.k5-supplier #hsearch,
body.k5-supplier #wsDD,
body.k5-supplier #filialDD,
body.k5-supplier #navBurger,
body.k5-supplier .rolebar,
body.k5-supplier #topNav{display:none!important}
body.k5-supplier .brandlogo{pointer-events:none}
/* Кабинет — во всю ширину: канбан в стиле доски закупок стал ЕДИНСТВЕННЫМ видом
   (2026-08-12), поэтому прежнего ограничения 1080px и модификатора --board больше нет,
   как и кнопки .supdesign, которая их переключала. */
.suppliers--portal{margin:0 auto}
/* ЛЕНТА КОЛОНОК КАК НА ДОСКЕ «ЗАКАЗЫ ПОСТАВЩИКАМ» (2026-08-27, просьба владельца «сделать
   шире, точно так же»). Была сетка на всю ширину: девять этапов делили экран поровну и
   каждый сжимался до нечитаемой полоски, где название товара переносилось по слогам.
   Теперь колонки той же ширины, что на доске (244px, .supboard .col ниже), лишние уезжают
   за край — прокрутка вбок, как там же; замыливание края даёт класс .edgefade (его вешает
   разметка supKanbanBoard, обновляет initScrollFades). Переменная --sbcols в разметке
   осталась: её читают мобильные раскладки ниже по файлу. */
/* overflow-y:hidden, а НЕ visible: при overflow-x:auto браузер всё равно поднимает вторую
   ось до auto, и лента становилась лишним вертикальным скролл-портом (в нём и съезжала
   sticky-шапка этапа). Прокрутка по вертикали живёт внутри .col__body — здесь она не нужна. */
.supboard__cols{display:flex;gap:14px;align-items:stretch;overflow-x:auto;overflow-y:hidden;
  padding-bottom:12px;scrollbar-width:thin}
/* Табы ЛК «Заказы | Рекламация» — над контентом, в обоих режимах дизайна */
.suptabs{display:flex;gap:6px;margin:14px 0 2px}
.suptabs__b{display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:13.5px;font-weight:700;
  border:1px solid var(--line);background:var(--surface);color:var(--muted);border-radius:12px;
  padding:9px 16px;cursor:pointer}
.suptabs__b:hover{color:var(--ink)}
.suptabs__b.is-on{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.suptabs__n{display:inline-grid;place-items:center;min-width:19px;height:19px;padding:0 6px;border-radius:999px;
  font-size:11px;font-weight:800;background:var(--down);color:#fff}
.suptabs__b.is-on .suptabs__n{background:var(--brand-ink);color:var(--brand)}
/* Форма рекламации (перенос в «Недопоставку») + фото на карточках рекламации */
.rcphotos{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.rcphotos__it{width:52px;height:52px;border-radius:8px;overflow:hidden;border:1px solid var(--line);cursor:pointer;flex:none}
.rcphotos__it img{width:100%;height:100%;object-fit:cover;display:block}
.rcphotos--card .rcphotos__it{width:44px;height:44px}
.rcphotos__add{width:52px;height:52px;border-radius:8px;border:1px dashed var(--line);display:grid;place-items:center;cursor:pointer;color:var(--muted);flex:none}
.rcphotos__add:hover{color:var(--brand);border-color:var(--brand)}
.rcphotos__add svg{width:18px;height:18px}
.bcard__rcmt{margin:6px 0 0;font-size:11.5px;line-height:1.45;color:var(--ink-soft);
  background:var(--surface-2);border-radius:8px;padding:7px 9px;white-space:pre-line}
/* У плашки не было правила размера для иконки, а svgIcon отдаёт SVG БЕЗ width/height —
   браузер брал размер по умолчанию, и значок «внимание» вырастал на пол-карточки
   (2026-08-24). Любая новая плашка с svgIcon внутри обязана иметь такое правило. */
.bcard__rcmt svg{width:13px;height:13px;flex:none;vertical-align:-2px}
/* карточка рекламации раскрывается правой деталью (supReclaimDrawer) */
.bcard--rc{cursor:pointer}
.rcdrawer__cmt{white-space:pre-wrap;font-weight:500;line-height:1.5}
.rcdrawer__acts{display:flex;flex-direction:column;gap:8px;margin-top:14px}
/* Пожелания — вкладка кабинета (2026-08-13). Плитки, фото и окно берут общие классы
   bcard/rcphotos/supov; своё — только шапка вкладки, кнопка правки этапа и галерея,
   принимающая перетаскивание и вставку из буфера. */
.supwish__bar{display:flex;align-items:center;gap:10px;margin:0 0 10px}
.supwish__hint{margin:0;flex:1;font-size:12.5px;line-height:1.45;color:var(--muted)}
.supwish__fix{background:transparent;border:1px dashed var(--line);color:var(--muted)}
.supwish__fix:hover{color:var(--brand);border-color:var(--brand)}
.supwish__fix svg{width:13px;height:13px}   /* иконке нужен явный размер — грабля 12 */
.supwish__fixb{margin-right:6px}
.supwish__ph{align-items:center}
.supwish__ph.is-drop{outline:2px dashed var(--brand);outline-offset:3px;border-radius:8px}
.supwish__ph .rcphotos__it{position:relative}
.supwish__addph{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border:1px dashed var(--line);
  border-radius:8px;font-size:12px;color:var(--muted);cursor:pointer;flex:none}
.supwish__addph:hover{color:var(--brand);border-color:var(--brand)}
.supwish__addph svg{width:14px;height:14px}
.rcphotos__x{position:absolute;top:2px;right:2px;border:0;border-radius:999px;width:18px;height:18px;
  line-height:16px;padding:0;font-size:11px;background:rgba(0,0,0,.55);color:#fff;cursor:pointer}
.rcphotos__x:hover{background:var(--down)}
/* Окно «приложите скрин» сразу после создания пожелания (2026-08-13) */
.wishshot__drop{display:flex;flex-direction:column;align-items:center;gap:4px;padding:18px 14px;margin:4px 0 10px;
  border:2px dashed var(--line);border-radius:12px;cursor:pointer;text-align:center;outline:none;
  transition:border-color .15s, background .15s}
.wishshot__drop:hover,.wishshot__drop:focus-visible{border-color:var(--brand);background:color-mix(in srgb, var(--brand) 5%, transparent)}
.wishshot__drop.is-drop{border-color:var(--brand);background:color-mix(in srgb, var(--brand) 10%, transparent)}
.wishshot__ic{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:color-mix(in srgb, var(--brand) 12%, transparent);color:var(--brand)}
.wishshot__ic svg{width:18px;height:18px}
.wishshot__t{font-size:13.5px}
.wishshot__sub{font-size:12px;color:var(--muted)}
.wishshot__ph:empty{display:none}
.wishshot__ph .rcphotos__it{position:relative;width:64px;height:64px}
/* превью из локального файла, пока скрин летит на сервер */
.rcphotos__it.is-load{opacity:.55;animation:wishshotPulse 1s ease-in-out infinite alternate}
@keyframes wishshotPulse{from{opacity:.4}to{opacity:.75}}
.wishshot__skip{margin:2px 0 0;font-size:11.5px}
.wishshot__n:not(:empty){display:inline-grid;place-items:center;min-width:17px;height:17px;margin-left:6px;
  padding:0 5px;border-radius:999px;background:rgba(255,255,255,.28);font-size:11px;font-weight:800}
/* блок «Рекламация» в детали test-карточки */
.tbreclaim{margin:8px 0 2px;padding:10px 12px;border-radius:var(--r-sm);
  background:color-mix(in srgb, var(--down) 7%, var(--surface));
  border:1px solid color-mix(in srgb, var(--down) 30%, var(--line))}
.tbreclaim__hd{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:800;color:var(--down);margin-bottom:6px}
.tbreclaim__hd svg{width:15px;height:15px}
.tbreclaim__row{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:var(--muted);padding:2px 0}
.tbreclaim__row b{color:var(--ink)}
.tbreclaim__cmt{margin:6px 0 0;font-size:12px;line-height:1.5;color:var(--ink-soft);white-space:pre-line}
/* кнопка «Отказать» на карточке рекламации — как supkb__accept, но в красном */
.supkb__refuse{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;margin-top:8px;
  border:none;border-radius:var(--r-sm);padding:8px 10px;cursor:pointer;
  background:color-mix(in srgb, var(--down) 14%, var(--surface));color:var(--down);font-weight:700;font-size:12.5px}
.supkb__refuse:hover{background:var(--down);color:#fff}
.supkb__refuse:disabled{opacity:.6;cursor:default}
.supkb__refuse svg{width:14px;height:14px}
/* .col/.bcard рассчитаны на страницу-доску, и с 2026-08-27 кабинет живёт по её же правилам:
   фиксированная ширина колонки, высота по экрану и свой вертикальный скролл внутри — шапки
   этапов остаются на виду, как на доске. Прежние «снимаем страничные ограничения»
   (width:auto, max-height:none) и делали из кабинета резиновую сетку. */
.supboard .col{width:244px;flex:none;max-height:calc(100dvh - 300px)}
/* overscroll-behavior:contain — прокрутка колеса над этапом НЕ перетекает на страницу
   (жалоба владельца 27.08.2026: «навёлся на карточки, кручу вверх — уезжает вся страница»).
   Тот же приём уже стоит у панелей раскрытой карточки кабинета и у длинных меню. */
.supboard .col__body{overflow-y:auto;max-height:none;overscroll-behavior:contain}
.supboard .bcard{cursor:pointer}
/* бейдж «брак» на карточке ЛК — красный (у .bbadge базовый цвет = тон колонки) */
.supboard .bbadge--bad{background:color-mix(in srgb, var(--down) 14%, transparent);color:var(--down)}
/* CTA «Принять/Подтвердить» в board-карточке — прижат к низу с отступом от подвала */
.supboard .bcard .supkb__accept{margin-top:9px}
.supboard .bcard .supkb__unconf{margin-top:9px}
/* Прежнее правило «на узком экране — прокрутка вместо сжатия» больше не нужно: с
   2026-08-27 лента прокручивается всегда (см. .supboard__cols выше), на любой ширине. */
/* привязка логина поставщика в разделе «Аккаунты» */
.supbound{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:#0d9488;
  background:color-mix(in srgb,#0d9488 12%,var(--surface));border-radius:999px;padding:4px 10px}
.supbound svg{width:14px;height:14px}
/* кнопка-карандаш правки позиции (admin) + редактор позиции заказа */
.supline__edit{flex:none;width:30px;height:30px;border-radius:9px;border:1px solid var(--line);background:var(--surface);
  color:var(--muted);display:grid;place-items:center;cursor:pointer;transition:border-color .15s,color .15s}
.supline__edit svg{width:15px;height:15px}
.supline__edit:hover{border-color:var(--brand);color:var(--brand)}
/* карандаш правки прямо в строке заказа — виден сразу, без раскрытия */
.suptr__edit{flex:none;align-self:center;width:30px;height:30px;border-radius:9px;border:1px solid var(--line);
  background:var(--surface);color:var(--muted);display:grid;place-items:center;cursor:pointer;transition:border-color .15s,color .15s}
.suptr__edit svg{width:15px;height:15px}
.suptr__edit:hover{border-color:var(--brand);color:var(--brand)}
.supledit{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--brand);border-radius:var(--r);padding:15px 16px}
.supledit__head{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--ink);margin-bottom:12px}
.supledit__head svg{width:17px;height:17px;color:var(--brand)}
.supledit__grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.supledit__wide{grid-column:1/-1}
.supledit__tgl{display:flex;align-items:flex-end}
.supledit__tgl .suptgl{width:100%}
@media (max-width:640px){ .supledit__grid{grid-template-columns:1fr} }

/* Подбор пользователя 1С в карточке сотрудника (автор записи цен) */
.u1c{position:relative}
.u1c__cur{display:flex;align-items:center;gap:8px;margin:1px 0 4px;font-size:13px;min-height:20px}
.u1c__name{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--ink);padding:4px 11px;border-radius:999px;background:color-mix(in srgb,var(--up) 11%,transparent);border:1px solid color-mix(in srgb,var(--up) 26%,transparent)}
.u1c__name svg{width:14px;height:14px;color:var(--up)}
.u1c__none{color:var(--muted,#8a8782);font-size:12px}
/* filter-chrome вокруг поиска контрагента 1С в карточке: input + счётчик + крестик в одном ряду (счётчик/крестик — .suptools__found/.suptools__x) */
.cfco__sb{position:relative;display:flex;align-items:center;gap:7px}
.cfco__sb .u1c__q{flex:1;min-width:0}
.cfco__sb .suptools__found{margin-left:auto}
.cfco__sb .suptools__x{flex:none}
/* Группа полей доступа логина-поставщика (Поставщик + Контрагент 1С) — собрана
   в мягкую фирменно-подсвеченную карточку, чтобы блок читался как единое целое. */
.usupbox{display:flex;flex-direction:column;gap:11px;margin-top:3px;padding:13px 14px 14px;
  border:1px solid color-mix(in srgb,var(--brand) 18%,var(--line));border-radius:var(--r-sm);
  background:color-mix(in srgb,var(--brand) 5%,var(--surface))}
.usupbox__h{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:800;
  letter-spacing:.05em;text-transform:uppercase;color:var(--brand)}
.usupbox__h svg{width:14px;height:14px}
.u1c__clr{padding:2px 6px}
.u1c__clr svg{width:14px;height:14px}
/* выпадающий список 1С — тот же фирменный вид, что и меню роли (.dd__menu):
   скруглённая карточка, мягкая тень, пункты-пилюли с ховером, плавный вход */
.u1c__drop{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:60;
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 16px 44px rgba(16,24,40,.16);padding:6px;
  max-height:min(58vh,320px);overflow-y:auto;overscroll-behavior:contain;
  display:flex;flex-direction:column;gap:4px;animation:ddIn .14s ease}
.u1c__drop[hidden]{display:none}   /* display:flex перебивает дефолт [hidden] — вернуть скрытие */
[data-theme="dark"] .u1c__drop{box-shadow:0 16px 44px rgba(0,0,0,.5)}
/* .urow по умолчанию overflow:hidden (обрезал дропдаун до 1 строки) и перекрывался
   соседними строками — пока открыт наш подбор 1С, снимаем обрезку и поднимаем строку */
.urow:has(.u1c__drop:not([hidden])){overflow:visible;z-index:40}
.u1c__item{display:flex;align-items:center;gap:10px;width:100%;
  padding:10px 12px;border:none;background:none;border-radius:10px;
  font-size:13.5px;font-weight:600;color:var(--ink-soft);text-align:left;cursor:pointer}
.u1c__item:hover{background:var(--surface-2)}
.u1c__item.is-active{background:color-mix(in srgb,var(--brand) 12%,var(--surface-2));box-shadow:inset 2px 0 0 var(--brand)}
.u1c__empty{padding:10px 12px;color:var(--muted,#8a8782);font-size:13px}
/* должность сотрудника 1С: вторая строка в пункте списка + чип у выбранного автора */
.u1c__itxt{display:flex;flex-direction:column;gap:2px;min-width:0}
.u1c__iname{font-weight:600;color:var(--ink);line-height:1.2}
.u1c__ipos{font-size:11.5px;font-weight:600;color:var(--muted,#8a8782);line-height:1.2}
.u1c__poschip{font-size:11px;font-weight:700;color:var(--muted,#8a8782);
  background:var(--surface-2);padding:2px 8px;border-radius:999px;white-space:nowrap}

/* бейдж «непрочитанных» правок поставщика на карточке каталога (как новые сообщения) */
.supcard__avawrap{position:relative;flex:none;display:inline-flex}
.supcard__unseen{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;
  background:#FF4D06;color:#fff;font-size:11.5px;font-weight:800;display:grid;place-items:center;
  box-shadow:0 0 0 2px var(--surface);line-height:1}
.supcard.is-unseen{border-color:color-mix(in srgb,#FF4D06 45%,var(--line));background:color-mix(in srgb,#FF4D06 5%,var(--surface))}
.supcard.is-unseen .supcard__name{font-weight:800}
.supchip--new{color:#FF4D06;background:color-mix(in srgb,#FF4D06 13%,var(--surface));font-weight:700}
/* Онлайн-статус поставщика (вход в свой кабинет) — реальные данные online.php */
.supchip--pres{color:var(--muted);background:var(--surface-2)}
.supchip--pres.is-on{color:#127a4a;background:color-mix(in srgb,#16a34a 15%,var(--surface));font-weight:700}
/* Формы доставки завода (Incoterms, 2026-08-24): чип в списке поставщиков и чекбоксы в
   форме карточки. Терминов два и они короткие — рисуем в строку, без селектов. */
.supchip--inc{color:var(--ink-soft);background:var(--surface-2);font-weight:700;letter-spacing:.02em}
.supinc{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.supinc__i{display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border-radius:10px;
  border:1px solid var(--line);background:var(--surface);cursor:pointer;font-size:12.5px;font-weight:700;
  user-select:none;transition:.15s}
.supinc__i:hover{border-color:color-mix(in srgb,var(--brand) 40%,var(--line))}
.supinc__i:has(input:checked){border-color:var(--brand);background:color-mix(in srgb,var(--brand) 10%,var(--surface))}
.supinc__i input{width:15px;height:15px;accent-color:var(--brand);cursor:pointer;margin:0}
.supcard__on{position:absolute;left:-3px;bottom:-3px;width:14px;height:14px;border-radius:50%;
  background:#16a34a;box-shadow:0 0 0 2px var(--surface);animation:supPulse 2s ease-in-out infinite}
@keyframes supPulse{0%,100%{box-shadow:0 0 0 2px var(--surface),0 0 0 0 color-mix(in srgb,#16a34a 55%,transparent)}50%{box-shadow:0 0 0 2px var(--surface),0 0 0 5px transparent}}
/* строка статуса в шапке кабинета поставщика (вид владельца) */
.suphead__pres{display:inline-flex;align-items:center;gap:6px;margin:4px 0 0;font-size:12.5px;font-weight:600;color:var(--muted)}
.suphead__pres b{color:var(--ink);font-weight:700}
.suphead__pres svg.suphead__pic{width:14px;height:14px;flex:none;opacity:.75}
.suphead__pres .suphead__psub{color:var(--muted);font-weight:600}
.suphead__pres--is-on{color:#127a4a}
.suphead__pres--is-on b{color:#0f7a37}
.suphead__pdot{width:9px;height:9px;border-radius:50%;background:#16a34a;flex:none;
  box-shadow:0 0 0 3px color-mix(in srgb,#16a34a 22%,transparent)}
/* поставщик в общей плашке «Кто онлайн» (стопка аватаров шапки) — бирюзовая обводка */
.ppl-ava--sup{box-shadow:0 0 0 2px #0d9488}

/* чип «Поставщик» в панели ролей — демо-предпросмотр кабинета глазами поставщика */
.chip--sup{display:inline-flex;align-items:center;gap:5px;color:#0d9488;border-color:color-mix(in srgb,#0d9488 40%,var(--line))}
.chip--sup svg{width:14px;height:14px}
.chip--sup.is-active{background:#0d9488;color:#fff;border-color:#0d9488}

/* ===== Кабинет поставщика: сводка + переключатель вида + таблица + канбан ===== */
.supsum{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;margin:0 2px 16px}
.supsum__head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--ink);margin-bottom:13px}
.supsum__head svg{width:17px;height:17px;color:var(--muted)}
.supsum__head b{font-weight:700}
.supsum__hl{display:flex;align-items:center;gap:9px}
.supsum__ht{display:flex;flex-direction:column;gap:1px}
.supsum__sub{font-size:12px;color:var(--muted);font-weight:600}
.supring{display:flex;align-items:center;gap:11px}
.supring svg{flex:0 0 auto}
.supring__t{display:flex;flex-direction:column;line-height:1.2}
.supring__t b{font-size:16px;font-weight:700;color:var(--ink)}
.supring__t span{font-size:11.5px;color:var(--muted)}
.supcircs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:13px}
.supcirc{display:flex;flex-direction:column;align-items:center;gap:7px;background:var(--surface-2);border-radius:var(--r-sm);padding:13px 8px}
.supcirc svg{flex:0 0 auto}
/* серый «недозаполненный» трек кольца — заметно темнее серой плашки карточки (в тёмной теме светлее) */
.supcirc__track{stroke:color-mix(in srgb,var(--muted) 42%,var(--surface-2))}
.supcirc__l{font-size:11.5px;color:var(--muted);text-align:center;line-height:1.25}
@media (max-width:760px){ .supcircs{grid-template-columns:1fr 1fr} }
.suprw{flex:0 0 auto;align-self:center;margin-left:auto;display:inline-flex;flex-direction:column;align-items:center;gap:1px}
.suprw svg{display:block}
.suprw__rd{font-size:10px;font-weight:700;white-space:nowrap;line-height:1}
.supsum .histkpi{margin-bottom:13px}
.supsum__bar{display:flex;height:10px;border-radius:999px;overflow:hidden;background:var(--surface-2);gap:1px}
.supsum__bar i{display:block;height:100%;min-width:2px}
.supsum__legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:9px}
.supsum__legend--static{gap:14px}
/* Сводка поставщика v2 (10·B): геро-кольцо + ряды-стадии с динамикой */
.supsum--v2{padding:18px 18px 16px}
.supsum2__hd{display:flex;align-items:center;gap:9px;font-size:14.5px;font-weight:700;color:var(--ink);margin:0 0 16px}
.supsum2__hd b{font-weight:800}
/* слот «кто смотрит эту страницу» — единый, в шапке (одинаково на каждой странице) */
.statusbar__pview{display:inline-flex;align-items:center;padding-left:10px;border-left:1px solid var(--line);flex:none}
.statusbar__pview[hidden]{display:none}
.statusbar__pview .bview{font-size:11.5px}
@media (max-width:1100px){.statusbar__pview .bview__t{display:none}}
.supsum2__hdic{display:inline-flex;width:28px;height:28px;border-radius:8px;background:color-mix(in srgb,var(--brand) 12%,var(--surface));color:var(--brand);align-items:center;justify-content:center;flex:none}
.supsum2__hdic svg{width:16px;height:16px}
.supsum2{display:flex;align-items:center;gap:26px}
.supsum2__ring{flex:0 0 auto;display:flex;align-items:center;justify-content:center}
.supsum2__ring svg{flex:none;display:block}
.supsum2__rows{flex:1 1 auto;min-width:0}
.supst{margin-bottom:13px}
.supst:last-child{margin-bottom:0}
.supst__top{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;margin-bottom:5px;color:var(--ink)}
.supst__l{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.supst__p{font-weight:700;flex:none}
.supst__bar{height:7px;background:var(--surface-2);border-radius:6px;overflow:hidden}
.supst__bar i{display:block;height:7px;border-radius:6px;min-width:3px}
.supst__d{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--muted);margin-top:4px}
.supst__d--up{color:#1f8a55}
.supst__d--down{color:#c2410c}
.supst__d svg{width:11px;height:11px;flex:none}
/* «Не обработано» — ряд-тревога: крупное число заявок (красное), % мелким; зелёный, когда очередь пуста */
.supst--warn .supst__p{display:flex;align-items:baseline;gap:6px}
.supst--warn .supst__p b{font-size:17px;font-weight:800;color:#c2410c;line-height:1}
.supst--warn.is-clear .supst__p b{color:#16a34a}
.supst__pu{font-weight:600;font-size:11.5px;color:var(--muted)}
.supsum2__foot{display:flex;align-items:center;gap:7px;margin-top:15px;padding-top:13px;border-top:1px solid var(--line);font-size:12.5px;color:var(--ink-soft)}
.supsum2__foot svg{width:15px;height:15px;color:var(--muted);flex:none}
.supsum2__foot b{color:var(--ink);font-weight:700}
.supsum2__foot span{color:var(--muted)}
@media (max-width:640px){.supsum2{flex-direction:column;align-items:stretch;gap:16px}.supsum2__ring{align-self:center}}
.supbl{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.supbl>i{width:9px;height:9px;border-radius:50%;background:var(--c);flex:0 0 auto}
.supbl b{font-weight:700;color:var(--ink-soft)}
.suplg{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-soft)}
.suplg>i{width:9px;height:9px;border-radius:50%;background:var(--c)}
.suplg b{font-weight:700;color:var(--ink)}
.supviews{display:inline-flex;gap:3px;margin-left:auto;background:var(--surface-2);border-radius:999px;padding:3px}
.supview{display:inline-flex;align-items:center;gap:5px;font:inherit;font-size:12.5px;font-weight:600;color:var(--muted);background:transparent;border:0;border-radius:999px;padding:6px 13px;cursor:pointer}
.supview svg{width:15px;height:15px}
.supview.is-on{background:var(--surface);color:var(--brand-fg)}
/* Тулбар заказа (вариант 6): заголовок+виды одной строкой / ряд иконок-действий над поиском / поиск / чипы */
.supbar__top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.supbar__top .supviews{margin-left:0}
.supbar__head{border-bottom:0;margin:0;padding:2px 2px 0;flex:1 1 auto;min-width:0}
.supbar__acts{display:flex;gap:8px;flex:none}
.suptools__line{display:flex;align-items:center;gap:10px;flex:1 1 100%}
.supbar__ico{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--muted);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:none;transition:border-color .12s,color .12s,filter .12s}
.supbar__ico svg{width:18px;height:18px}
.supbar__ico:hover{border-color:var(--brand);color:var(--brand)}
.supbar__ico--cta{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.supbar__ico--cta:hover{color:#fff;filter:brightness(.95)}
.supbar__ico--cta.is-on{filter:brightness(.88)}
.suptable{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.suptable__head,.suptr,.suptable__foot{display:grid;grid-template-columns:92px minmax(0,1fr) 58px 192px 132px 20px;align-items:center;gap:12px}
.suptable__head{padding:9px 14px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:var(--muted);background:var(--surface-2);border-bottom:1px solid var(--line)}
/* итог штук прямо в шапке колонки «Кол-во» — виден всегда, без прокрутки */
.suptable__s--qty{display:flex;flex-direction:column;align-items:flex-start;gap:2px;line-height:1.1}
.suptable__sum{font-size:12.5px;font-weight:800;color:var(--ink);text-transform:none;letter-spacing:0;white-space:nowrap}
/* строка итогов: общее кол-во штук под колонкой «Кол-во» */
.suptable__foot{padding:11px 14px;background:var(--surface-2);border-top:1px solid var(--line)}
.suptable__footl{grid-column:1/3;text-align:right;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:var(--muted)}
.suptable__footq{font-size:13.5px;font-weight:800;color:var(--ink);white-space:nowrap}
.suptable__foots{grid-column:4/7;font-size:12px;font-weight:600;color:var(--muted);white-space:nowrap}
.suptr{width:100%;text-align:left;font:inherit;background:var(--surface);border:0;border-bottom:1px solid var(--line);padding:11px 14px;cursor:default;border-left:3px solid var(--c,var(--line))}
.suptr__name{cursor:pointer}
.suptr__chev{cursor:pointer;border-radius:8px}
.suptr__chev:hover{color:var(--ink);background:var(--surface-2)}
.suptr:hover{background:var(--surface-2)}
.suptr.is-open{background:color-mix(in srgb,var(--c) 7%,var(--surface))}
.suptr__name{font-size:13.5px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:6px;min-width:0}
.suptr__spec{color:var(--brand);display:inline-flex;flex:none}
.suptr__spec svg{width:13px;height:13px}
.suptr__qty{font-size:12.5px;font-weight:700;color:var(--ink-soft);white-space:nowrap}
/* статус: пилюля с цветной точкой, переносится при необходимости и НЕ налезает на даты;
   флаги (просрочено/косяк) — отдельной строкой под пилюлей, а не в одну линию */
.suptr__status{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:5px;justify-self:start}
.suptr__stat{max-width:100%;display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;color:var(--c);background:color-mix(in srgb,var(--c) 13%,var(--surface));border-radius:999px;padding:4px 11px 4px 9px;line-height:1.2}
.suptr__dot{flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:var(--c)}
.suptr__statt{min-width:0;white-space:normal;word-break:break-word}
.suptr__flags{display:flex;flex-wrap:wrap;gap:4px}
.suptr__flags .supod-b{margin:0;display:inline-flex;align-items:center;gap:3px}
.suptr__flags .supod-b svg{width:10px;height:10px}
/* «висит N дней» — сколько дней предоплата КРОНОС ждёт отгрузки (деньги в работе) */
.suphang{display:inline-flex;align-items:center;gap:4px;font-size:9.5px;font-weight:800;color:#f59e0b;background:color-mix(in srgb,#f59e0b 15%,var(--surface));border-radius:999px;padding:2px 8px;line-height:1.25;white-space:nowrap}
.suphang svg{width:11px;height:11px;flex:none}
.supkb__hang{margin-top:2px}
.suptr__dd .suphang{align-self:flex-start;margin-top:1px}
.suptr__c{text-align:center;color:var(--muted);font-size:12px}
.suptr__c.is-yes{color:#16a34a}
.suptr__c svg{width:16px;height:16px}
.suptr__ready{font-size:12px;color:var(--ink-soft);white-space:nowrap}
.suptr__chev{color:var(--muted);display:inline-flex}
.suptr__chev svg{width:16px;height:16px;transform:rotate(-90deg)}
.suptr__detail{padding:6px 14px 16px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--surface-2) 50%,var(--surface))}
.suptr__detail .supline__grid{display:grid;grid-template-columns:1.2fr 1fr;gap:16px}
.supmc{display:none}
@media (max-width:760px){
  .suptable__head{display:none}
  /* на телефоне строка таблицы превращается в карточку .supmc (вариант «полоса статуса + KPI») */
  .suptable{border:0;background:transparent;border-radius:0;overflow:visible}
  .suptr{display:block;padding:0;border:0;background:transparent;margin:0 0 12px}
  .suptr:hover{background:transparent}
  .suptr.is-open{background:transparent}
  .suptr>.suptr__added,.suptr>.suptr__main,.suptr>.suptr__qty,.suptr>.suptr__status,.suptr>.suptr__dd,.suptr>.suptr__chev{display:none}
  .supmc{display:block;position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 15px 14px 18px}
  .supmc::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--c,var(--brand))}
  .suptr.is-open .supmc{box-shadow:0 0 0 2px var(--c) inset}
  .supmc__added{display:flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
  .supmc__added svg{width:12px;height:12px;flex:none}
  .supmc__name{font-size:16px;font-weight:800;color:var(--ink);line-height:1.28;margin-top:8px;overflow-wrap:anywhere;word-break:break-word}
  .supmc__statrow{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin-top:9px}
  .supmc__stat{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:800;color:var(--c);background:color-mix(in srgb,var(--c) 13%,var(--surface));border-radius:999px;padding:5px 12px;line-height:1.2}
  .supmc__dot{width:7px;height:7px;border-radius:50%;background:var(--c);flex:none}
  .supmc__od{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:800;color:#dc2626;background:color-mix(in srgb,#dc2626 12%,var(--surface));border-radius:999px;padding:3px 9px}
  .supmc__od svg{width:12px;height:12px}
  .supmc__kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
  .supmc__kpi{background:var(--surface-2);border-radius:var(--r-sm);padding:9px 6px;text-align:center}
  .supmc__kpi b{display:block;font-size:17px;font-weight:800;color:var(--ink);line-height:1.1}
  .supmc__kpi span{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.3px}
  .supmc__stages{margin-top:13px}
  .supmc__cap{font-size:10.5px;font-weight:700;color:var(--muted);margin-top:8px}
  .supmc__media{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:11px}
  .supmc__media .supthb{margin:0;gap:7px}
  .supmc__media .supthb__t{width:44px;height:44px;border-radius:10px}
  .supmc__spec{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:800;color:var(--brand);background:color-mix(in srgb,var(--brand) 9%,var(--surface));border:1px solid color-mix(in srgb,var(--brand) 28%,var(--line));border-radius:999px;padding:4px 10px;text-decoration:none;white-space:nowrap}
  .supmc__spec svg{width:12px;height:12px}
  .supmc__foot{display:flex;align-items:center;gap:7px;margin-top:13px;flex-wrap:wrap}
  .supmc__foot .suphang{font-size:10.5px;padding:3px 8px}
  .supmc__acts{display:inline-flex;gap:6px;margin-left:auto}
  .supmc__ic{width:34px;height:34px;border-radius:10px;border:1px solid color-mix(in srgb,var(--brand) 28%,var(--line));background:color-mix(in srgb,var(--brand) 8%,var(--surface));color:var(--brand);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
  .supmc__ic svg{width:17px;height:17px}
  .suptr__detail .supline__grid{grid-template-columns:1fr}
  .suptable__foot{display:grid;grid-template-columns:1fr auto;margin-top:2px;border:1px solid var(--line);border-radius:var(--r-sm)}
  .suptable__footl{grid-column:auto;text-align:left}
  .suptable__foots{display:none}
  /* фильтры-чипы — одной прокручиваемой лентой (не плодим строки); спец. выше базового */
  .suptools .suptools__chips{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:3px;scrollbar-width:none}
  .suptools .suptools__chips::-webkit-scrollbar{display:none}
  .suptools .suptools__chips .supf{flex:0 0 auto}
}
.supkbsort{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin:0 2px 11px}
.supkbsort__l{font-size:12px;color:var(--muted);font-weight:600;margin-right:2px}
.supkb{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(190px,1fr);gap:10px;overflow-x:auto;padding-bottom:6px}
.supkb__col{background:var(--surface-2);border-radius:var(--r);padding:10px;min-width:0}
.supkb__h{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:var(--ink);padding:2px 4px 10px}
.supkb__dot{width:9px;height:9px;border-radius:50%;background:var(--c);flex:none}
.supkb__n{margin-left:auto;font-size:11px;font-weight:800;color:var(--c);background:color-mix(in srgb,var(--c) 14%,var(--surface));border-radius:999px;padding:1px 8px}
/* Заказ, присланный с доски «Тест»: баннер-уведомление в шапке ЛК + кнопки «Принять» */
.supnew{display:flex;align-items:center;gap:12px;margin:12px 0;padding:12px 16px;border-radius:var(--r);
  background:color-mix(in srgb, var(--up) 12%, var(--surface));border:1px solid color-mix(in srgb, var(--up) 40%, var(--line))}
.supnew__ic{flex:none;display:grid;place-items:center;color:var(--up)}
.supnew__ic svg{width:22px;height:22px}
.supnew__t{display:flex;flex-direction:column;gap:2px}
.supnew__t b{font-size:14px;color:var(--ink)}
.supnew__t span{font-size:12px;color:var(--ink-soft)}
.supkb__accept{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;margin-top:8px;
  border:none;border-radius:var(--r-sm);padding:8px 10px;cursor:pointer;
  background:var(--up);color:#fff;font-weight:700;font-size:12.5px}
.supkb__accept:hover{filter:brightness(1.08)}
.supkb__accept:disabled{opacity:.6;cursor:default}
.supkb__accept svg{width:14px;height:14px}
.supaccept{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px;padding:10px 12px;
  border-radius:var(--r-sm);background:color-mix(in srgb, var(--up) 10%, var(--surface));
  border:1px solid color-mix(in srgb, var(--up) 35%, var(--line))}
.supaccept.is-done{background:var(--surface-2);border-color:var(--line)}
.supaccept__t{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:var(--ink)}
.supaccept__t svg{width:15px;height:15px;color:var(--up)}
.supaccept__btn{margin-left:auto;display:flex;align-items:center;gap:6px;border:none;border-radius:var(--r-sm);
  padding:7px 14px;cursor:pointer;background:var(--up);color:#fff;font-weight:700;font-size:12.5px}
.supaccept__btn:hover{filter:brightness(1.08)}
.supaccept__btn:disabled{opacity:.6;cursor:default}
.supaccept__btn svg{width:14px;height:14px}
.supaccept__wait{margin-left:auto;font-size:11.5px;color:var(--muted)}
/* Отгрузочный комплект (деталь строки, 2026-08-14): пока не подтверждено — карточка канбана серая */
.supship{margin:12px 0;padding:12px;border-radius:var(--r-sm);background:var(--surface-2);
  border:1px dashed color-mix(in srgb, var(--muted) 45%, var(--line))}
.supship__hd{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:var(--ink);margin-bottom:8px}
.supship__hd svg{width:15px;height:15px;flex:none}
.supship__hd span{font-weight:400;font-size:11px;color:var(--muted)}
.supship__btn{margin-top:10px;width:100%;justify-content:center;display:flex}
.supship__wait{margin-top:8px;font-size:11.5px;color:var(--muted);text-align:center}
/* Информация о заказе на этапах после оплаты + мостик «файлы уехали в Документы»
   (2026-08-24). Блок читаемый: те же строки .suptr2, что на «Согласовании счёта», только
   заголовок свой — чтобы на длинной карточке было видно, где кончается работа этапа и
   начинается справка по заказу. */
.supterms{margin-top:12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);
  padding:10px 12px 4px}
.supterms.is-edit{border-color:color-mix(in srgb,var(--brand) 45%,var(--line));
  background:color-mix(in srgb,var(--brand) 5%,var(--surface))}
.supterms__hd{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:800;color:var(--ink);
  margin-bottom:6px}
.supterms__hd svg{width:14px;height:14px;flex:none;color:var(--brand)}
.supterms__ed{margin-left:auto;font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:999px;
  color:var(--brand-fg);background:color-mix(in srgb,var(--brand) 14%,var(--surface))}
.supship__moved{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:10px 0 0;padding:8px 10px;
  border-radius:var(--r-sm);font-size:12px;font-weight:700;color:var(--ink-soft);
  background:var(--surface-2);border:1px solid var(--line)}
.supship__moved svg{width:14px;height:14px;flex:none;color:var(--muted)}
.supship__moved b{color:var(--gold)}
.supov__tabn{display:inline-grid;place-items:center;min-width:17px;height:17px;padding:0 4px;margin-left:5px;
  border-radius:999px;font-size:10.5px;font-weight:800;color:var(--brand-ink);background:var(--gold)}
/* подсказка «позиции без привязки к 1С» — видна только нашей стороне */
.supship__warn{display:flex;align-items:center;gap:6px;margin-bottom:9px;padding:7px 9px;font-size:11px;font-weight:600;
  color:#a35a00;background:color-mix(in srgb,#f59e0b 16%,var(--surface));border-radius:var(--r-sm)}
.supship__warn svg{width:13px;height:13px;flex:none}
/* один слот отгрузочного комплекта: подпись + превью приложенного + кнопка добавить.
   Пустой ОБЯЗАТЕЛЬНЫЙ слот подсвечен тем же тоном, что .is-need у полей таблицы выше. */
.supslot{padding:9px 0;border-bottom:1px dashed var(--line)}
.supslot:last-child{border-bottom:0}
.supslot__l{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px;font-weight:600;color:var(--ink-soft);margin-bottom:7px}
.supslot__item{font-weight:400;color:var(--muted)}
.supslot.is-miss{margin:0 -10px 2px;padding:9px 10px;border-radius:var(--r-sm);
  border:1px solid color-mix(in srgb,#e0533d 40%,var(--line));background:color-mix(in srgb,#e0533d 6%,var(--surface))}
.supslot.is-miss .supslot__l{color:#e0533d}
/* VIN / заводские номера (2026-08-18) — единственные ДАННЫЕ в блоке отгрузки: строка
   слота, но вместо файлов поле ввода «по номеру в строке». Счётчик справа от подписи. */
.supvin__n{margin-left:auto;font-weight:700;font-size:11px;color:var(--muted)}
.supslot.is-miss .supvin__n{color:#e0533d}
.supvin__ta{display:block;width:100%;box-sizing:border-box;padding:7px 9px;border-radius:9px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;line-height:1.5;resize:vertical}
.supvin__ta:focus{outline:0;border-color:var(--brand)}
.supvin__list{display:flex;flex-wrap:wrap;gap:6px;font-size:12px;color:var(--ink-soft)}
.supvin__v{padding:4px 8px;border-radius:7px;background:var(--surface);border:1px solid var(--line);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.supslot__doc{position:relative;display:inline-flex;align-items:center;gap:5px;max-width:220px;
  padding:6px 24px 6px 9px;margin:0 7px 7px 0;border-radius:9px;background:var(--surface);border:1px solid var(--line);font-size:12px}
.supslot__doc svg{width:13px;height:13px;flex:none}
.supslot__doc a{overflow:hidden;color:var(--brand);text-decoration:none;text-overflow:ellipsis;white-space:nowrap}
.supslot__doc .supph__x{top:50%;right:4px;transform:translateY(-50%)}
/* Четыре стороны контейнера — одной строкой (ячейка на сторону), иначе блок отгрузки
   приходится листать. auto-fit: в узкой шторке ячейки сами встают в 2×2. */
.supslot__sides{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:7px}
.supslot__side{padding:6px 7px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface)}
.supslot__side.is-miss{border-color:color-mix(in srgb,#e0533d 40%,var(--line));background:color-mix(in srgb,#e0533d 6%,var(--surface))}
.supslot__sl{display:flex;align-items:center;gap:4px;margin-bottom:5px;font-size:11.5px;color:var(--muted)}
.supslot__side.is-miss .supslot__sl{color:#e0533d}
.supslot__side .supph__grid{margin:0}
.supslot__side .supph__add{margin:0}
.supkb__card.is-unconfirmed{filter:grayscale(1);opacity:.62}
.supkb__card.is-unconfirmed:hover{filter:grayscale(.4);opacity:.85}
.supkb__unconf{display:flex;align-items:center;gap:6px;margin-top:8px;padding:7px 9px;font-size:11px;
  font-weight:700;color:var(--muted);border:1px dashed var(--line);border-radius:var(--r-sm)}
.supkb__unconf svg{width:13px;height:13px;flex:none}
/* Плашка «нужно действие» на карточке ЛК (supActionNeed) — аналог .tbc__warn на доске
   «Заказы поставщикам»; рисуем только там, где карточка не подсказывает сама (кнопки
   «Принять и отправить», «Подтвердить отгрузку» и т.п. говорят за себя). */
.supkb__warn{display:flex;align-items:flex-start;gap:6px;margin-top:8px;padding:7px 9px;font-size:11px;
  font-weight:700;line-height:1.35;border-radius:var(--r-sm);
  background:color-mix(in srgb,#f59e0b 14%,transparent);color:#b45309}
.supkb__warn svg{width:13px;height:13px;flex:none;margin-top:1px}
/* «Нужен ответ» (2026-08-24) — та же плашка, что «Нужно действие», но синяя, как чип
   «Неотвеченные сообщения»: признак один и тот же (supChatUnanswered), и цвет обязан их
   связывать. Живёт СТРОКОЙ в потоке карточки, не абсолютом в углу — угловой бейдж режется
   прокруткой колонки (см. .bcard__unread ниже). */
.supkb__reply{display:flex;align-items:flex-start;gap:6px;margin-top:8px;padding:7px 9px;font-size:11px;
  font-weight:700;line-height:1.35;border-radius:var(--r-sm);
  background:color-mix(in srgb,#0ea5e9 15%,transparent);color:#0369a1}
.supkb__reply svg{width:13px;height:13px;flex:none;margin-top:1px}
.supkb__cards{display:flex;flex-direction:column;gap:8px}
.supkb__card{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--c);border-radius:var(--r-sm);padding:10px 11px;cursor:pointer;transition:box-shadow .12s,border-color .12s}
.supkb__card:hover{box-shadow:0 4px 14px -8px rgba(16,24,40,.3);border-color:color-mix(in srgb,var(--c) 40%,var(--line))}
.supkb__card.is-open{box-shadow:0 0 0 2px var(--c) inset}
.supkb__item{font-size:13px;font-weight:600;color:var(--ink);line-height:1.3;display:flex;align-items:flex-start;gap:6px}
.supkb__edit{flex:none;margin-left:auto;width:24px;height:24px;border-radius:7px;border:1px solid var(--line);background:var(--surface);color:var(--muted);display:grid;place-items:center;cursor:pointer}
.supkb__edit svg{width:13px;height:13px}
.supkb__edit:hover{color:var(--brand);border-color:var(--brand)}
.supkb__sub{font-size:11.5px;color:var(--muted);margin:5px 0 0}
.supkb__lnk{color:var(--brand);text-decoration:none;font-weight:600}
.supkb__lnk svg{width:11px;height:11px;vertical-align:-1px}
.supkb__note{font-size:11.5px;color:var(--ink-soft);background:var(--surface-2);border-radius:8px;padding:6px 8px;margin-top:7px;line-height:1.4}
.supkb__tgls{display:flex;flex-direction:column;gap:6px;margin-top:9px}
.supkb__tgls .suptgl{padding:7px 9px}
.supkb__tgls .suptgl__t{font-size:12px}
.supkb__date{margin-top:8px}
.supkb__date .supdate__i{max-width:none;font-size:12px;padding:6px 8px}
.supkb__date .supdate__l{font-size:11px}
.supkb__empty{font-size:12px;color:var(--muted);text-align:center;padding:14px 0;opacity:.7}
.supedit-top{margin-bottom:12px}
/* Редактор позиции — выезжающее окно справа (drawer) */
/* z-index как у журнала «Спецификаций» (.specj): слой перекрывает шапку сайта целиком.
   Меньшие значения не годятся — шапка живёт в другом контексте наложения и накрывала
   заголовок раскрытой карточки. Сам слой выносится порталом в body (supPortalLayers). */
.supdrawer{position:fixed;inset:0;z-index:1200;display:flex;justify-content:flex-end}
.supdrawer__backdrop{position:absolute;inset:0;background:rgba(10,14,18,.38);animation:supdrFade .2s ease}
.supdrawer__card{position:relative;width:min(560px,96vw);height:100%;background:var(--bg);overflow-y:auto;-webkit-overflow-scrolling:touch;box-shadow:-16px 0 48px -20px rgba(0,0,0,.45);padding:18px;animation:supdrIn .24s cubic-bezier(.22,.61,.36,1)}
.supdrawer__card .supledit{margin:0}
.supdrawer__close{position:absolute;top:13px;right:14px;z-index:2;width:34px;height:34px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--muted);display:grid;place-items:center;cursor:pointer}
.supdrawer__close:hover{color:var(--ink);border-color:var(--muted)}
.supdrawer__close svg{width:17px;height:17px}
@keyframes supdrIn{from{transform:translateX(100%)}to{transform:translateX(0)}}
@keyframes supdrFade{from{opacity:0}to{opacity:1}}
@media (max-width:560px){.supdrawer__card{width:100vw;padding:14px}}

/* строка таблицы кабинета: дата внесения · заявка(+спека,+комментарий) · даты завод/готов */
.suptr__added{font-size:11px;color:var(--muted);line-height:1.25;white-space:nowrap}
.suptr__addedk{display:block;font-size:9px;text-transform:uppercase;letter-spacing:.3px;opacity:.7}
/* номер строки в списке заказа — для ориентира (десктоп: над «внесено»; моб: чип в строке «внесено») */
.suptr__num{display:inline-block;font-size:12.5px;font-weight:800;color:var(--ink);background:var(--surface-2);border-radius:6px;padding:1px 7px;margin-bottom:4px}
.supmc__num{display:inline-flex;align-items:center;font-size:11px;font-weight:800;color:var(--ink);background:var(--surface-2);border-radius:6px;padding:1px 6px;margin-right:2px;letter-spacing:0}
.suptr__main{min-width:0;display:flex;align-items:flex-start;gap:10px}
.suptr__maintext{min-width:0;flex:1}
.suptr__name{font-size:13.5px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:8px;flex-wrap:wrap;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
.suptr__speclink{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:600;color:var(--brand);text-decoration:none;background:color-mix(in srgb,var(--brand) 10%,var(--surface));border-radius:999px;padding:2px 8px}
.suptr__speclink:hover{background:color-mix(in srgb,var(--brand) 20%,var(--surface))}
.suptr__speclink svg{width:12px;height:12px}
/* секция «Чат по заказу» в окне деталей строки (2026-07-31: раньше здесь были комментарии,
   класс .supdcmt остался — его теперь наполняет supChatBlock, сам чат — .k5chat*) */
.supdcmt{margin-top:14px;border-top:1px solid var(--line);padding-top:13px}
.supdcmt__hd{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:800;color:var(--ink);margin-bottom:9px;flex-wrap:wrap}
.supdcmt__hd svg{width:16px;height:16px;color:var(--brand)}
.supdcmt__note{font-size:11px;font-weight:700;color:var(--muted)}
/* даты «завод / готов»: подпись-ключ серым + значение жирным; готов зелёный когда есть, красный если просрочен */
.suptr__dd{display:flex;flex-direction:column;gap:3px;font-size:11px;color:var(--muted);white-space:nowrap}
.suptr__dl{display:flex;align-items:baseline;gap:6px}
.suptr__dk{flex:0 0 auto;min-width:36px;font-size:9px;text-transform:uppercase;letter-spacing:.3px;opacity:.7}
.suptr__dl b{color:var(--ink-soft);font-weight:700;font-size:12px}
.suptr__dl--ready.is-ready b{color:#16a34a}
.suptr__dl--ready.is-overdue b{color:#e0533d}
/* --- Фото товара из 1С: миниатюры в видах + пикер в редакторе --- */
.supthumb-w{display:block;flex:0 0 auto;width:44px;height:44px;border-radius:9px;overflow:hidden;background:var(--surface-2);border:1px solid var(--line)}
.supthumb{width:100%;height:100%;object-fit:cover;display:block}
.supthumb--kb{width:40px;height:40px;border-radius:8px}
.supthumb--lg{width:128px;height:128px;border-radius:12px;cursor:zoom-in}
.supkb__hd{display:flex;align-items:flex-start;gap:9px}
.supkb__hdx{min-width:0;flex:1}
.supline__prod{display:flex;gap:12px;align-items:flex-start;margin:2px 0 4px}
.supline__prodx{min-width:0;flex:1}
.supline__prodn{display:block;font-size:12.5px;font-weight:700;color:var(--ink-soft);margin:0 0 6px}
.supnom{grid-column:1/-1;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.supnom__sub{font-weight:600;text-transform:none;letter-spacing:0;color:var(--muted);font-size:11px}
.supnom__search{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.supnom__search .uinput{flex:1;min-width:160px}
.supnom__res{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:8px;max-height:280px;overflow:auto;padding:2px}
.supnom__cand{display:flex;flex-direction:column;gap:6px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:7px;cursor:pointer;text-align:left;font:inherit}
.supnom__cand:hover,.supnom__cand.is-active{border-color:var(--brand);box-shadow:0 0 0 2px color-mix(in srgb,var(--brand) 18%,transparent)}
.supnom__cand.has-photo{border-color:color-mix(in srgb,#16a34a 30%,var(--line))}
.supnom__cth{display:block;width:100%;aspect-ratio:1/1;border-radius:7px;overflow:hidden;background:var(--surface-2);position:relative}
.supnom__cth img{width:100%;height:100%;object-fit:cover;display:block}
.supnom__cth.is-empty::after{content:"нет фото";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--muted)}
.supnom__cn{font-size:11.5px;color:var(--ink-soft);line-height:1.3;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.supnom__hint{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px;padding:4px 2px}
.supnom__hint svg{width:14px;height:14px}
.supnom__sel{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.supnom__th-w{flex:0 0 auto;width:56px;height:56px;border-radius:10px;overflow:hidden;background:var(--surface);border:1px solid var(--line);position:relative}
.supnom__th{width:100%;height:100%;object-fit:cover;display:block}
.supnom__th-w.is-empty::after{content:"нет фото";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:9px;color:var(--muted);text-align:center}
.supnom__info{min-width:0;flex:1}
.supnom__info b{display:block;font-size:13px;color:var(--ink);font-weight:700}
.supnom__info span{font-size:11.5px;color:var(--muted)}
.supnom__sela{display:flex;gap:6px;flex-wrap:wrap}
.ubtn--sm{padding:5px 9px;font-size:12px}
.supkb__dates{display:flex;flex-direction:column;gap:7px;margin-top:8px}
.supkb__dates .supdate__i{max-width:none;font-size:12px;padding:6px 8px}
.supkb__dates .supdate__l{font-size:11px}

/* раздел «Спецификации» */
.speclist{display:flex;flex-direction:column}
.specrow{display:grid;grid-template-columns:minmax(0,1fr) 80px auto;align-items:center;gap:12px;padding:11px 4px;border-bottom:1px solid var(--line)}
.specrow:last-child{border-bottom:0}
.specrow__name{font-size:13.5px;font-weight:600;color:var(--ink);min-width:0}
.specrow__qty{font-size:12.5px;font-weight:700;color:var(--ink-soft);white-space:nowrap}
.specrow__act{display:flex;align-items:center;gap:8px;justify-self:end}
.specrow__lnk{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;color:var(--brand);text-decoration:none;background:color-mix(in srgb,var(--brand) 10%,var(--surface));border-radius:999px;padding:5px 12px}
.specrow__lnk:hover{background:color-mix(in srgb,var(--brand) 18%,var(--surface))}
.specrow__lnk svg{width:14px;height:14px}
.specrow__no{font-size:12px;color:var(--muted)}
.specrow__edit{width:30px;height:30px;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--muted);display:grid;place-items:center;cursor:pointer}
.specrow__edit svg{width:14px;height:14px}
.specrow__edit:hover{color:var(--brand);border-color:var(--brand)}
.specrow__form{grid-column:1/-1;display:flex;gap:8px;margin-top:9px}
.specrow__form .uinput{flex:1}
.suppliers__specsbtn{align-self:flex-start}
@media (max-width:680px){ .specrow{grid-template-columns:1fr auto} .specrow__qty{display:none} }

/* кабинет: тулбар фильтров/поиск + расписание + подсветка просрочки */
.suptools{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:0 0 14px}
/* поиск в кабинете поставщика — на всю ширину (инпут тянется) */
.suptools .msearch{flex:1 1 auto;display:flex;width:auto;min-width:0}
.suptools .msearch__in,.suptools .msearch:focus-within .msearch__in{flex:1 1 auto;width:auto;min-width:0}
.suptools__search{display:flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:7px 14px;min-width:230px;flex:1;max-width:360px}
.suptools__search svg{width:15px;height:15px;color:var(--muted);flex:none}
.suptools__search input{border:0;background:transparent;font:inherit;font-size:13px;color:var(--ink);outline:none;width:100%}
.suptools__search.is-filled{border-color:color-mix(in srgb,var(--brand) 45%,var(--line))}
.suptools__found{flex:none;font-size:12px;font-weight:700;color:var(--brand);white-space:nowrap}
.suptools__found.is-zero{color:var(--muted)}
.suptools__x{flex:none;display:grid;place-items:center;width:18px;height:18px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--muted);cursor:pointer}
.suptools__x:hover{background:var(--surface-2);color:var(--ink)}
.suptools__x svg{width:12px;height:12px}
.suptools__chips{display:flex;flex-wrap:wrap;gap:6px;flex:1 1 100%}
/* строка фильтров: чипы (слева, тянутся/прокручиваются) + сортировка по дате (справа) */
/* ── ТОЧНЫЕ ФИЛЬТРЫ КАБИНЕТА (2026-08-24) ─────────────────────────────────────────────
   Панель раскрывается ПОД строкой поиска, в потоке — не плавающей выпадашкой: восемь полей
   поверх канбана и были тем «наслаиванием», на которое жаловались. Свёрнутая панель со
   взведёнными условиями обязана оставлять след (.supfltbar) — иначе карточки режутся молча. */
.supfltb{flex:none;display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:13px;font-weight:700;
  color:var(--ink-soft);background:var(--surface);border:1.5px solid var(--line);border-radius:999px;
  padding:7px 14px;cursor:pointer;transition:border-color .12s,color .12s}
.supfltb svg{width:15px;height:15px}
.supfltb:hover{border-color:var(--brand);color:var(--brand)}
.supfltb.is-on,.supfltb.has-n{border-color:var(--brand);color:var(--brand)}
.supfltb b{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;
  background:var(--brand);color:var(--brand-ink);font-size:11px}
.supfltbar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;flex:1 1 100%;margin:0 0 10px;
  padding:7px 12px;border-radius:var(--r-sm);background:var(--brand-tint);color:var(--brand);
  font-size:12.5px;font-weight:700}
.supfltbar svg{width:14px;height:14px}
.supfltbar__x{display:inline-flex;align-items:center;gap:5px;font:inherit;font-size:12px;font-weight:700;
  color:inherit;background:transparent;border:1px solid currentColor;border-radius:999px;padding:3px 10px;cursor:pointer}
.supfltbar__x:hover{background:color-mix(in srgb,currentColor 12%,transparent)}
.supfltp{flex:1 1 100%;display:flex;flex-direction:column;gap:10px;margin:0 0 12px;padding:12px 14px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.supfltp__row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.supfltp__l{flex:0 0 150px;font-size:12px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--muted)}
.supfltp__chks{display:flex;flex-wrap:wrap;gap:8px 14px;flex:1 1 auto;min-width:0}
.supflt__in{width:150px;flex:none}
.supfltchk{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;cursor:pointer}
.supfltchk input{accent-color:var(--brand);width:15px;height:15px;flex:none}
.supfltchk span{position:relative;padding-left:12px}
.supfltchk span::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:7px;height:7px;border-radius:50%;background:var(--c,transparent)}
.supfltp__acts{display:flex;gap:9px;justify-content:flex-end}
@media (max-width:740px){
  .supfltp__l{flex:1 1 100%}
  .supflt__in{width:calc(50% - 6px)}
  .suppliers .supfltb{padding:6px 11px}
}
.suptools__filters{display:flex;align-items:center;gap:10px;flex:1 1 100%;min-width:0}
.suptools__filters .suptools__chips{flex:1 1 auto;min-width:0}
.suptools__sort{display:inline-flex;align-items:center;gap:6px;flex:none;color:var(--muted)}
.suptools__sort > svg{width:15px;height:15px;flex:none}
.supf{display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:13px;font-weight:600;color:var(--ink-soft);background:var(--surface);border:1.5px solid color-mix(in srgb,var(--c,var(--line)) 32%,var(--line));border-radius:999px;padding:7px 14px;cursor:pointer;transition:background .12s,border-color .12s}
.supf svg{width:13px;height:13px}
.supf__dot{width:8px;height:8px;border-radius:50%;background:var(--c,var(--muted));flex:none}
.supf b{font-weight:800;color:var(--c,var(--ink))}
.supf:hover{border-color:color-mix(in srgb,var(--c,var(--brand)) 60%,var(--line));background:color-mix(in srgb,var(--c,var(--brand)) 7%,var(--surface))}
.supf.is-on{background:color-mix(in srgb,var(--c,var(--brand)) 16%,var(--surface));color:var(--c,var(--brand));border-color:var(--c,var(--brand))}
.supf.is-on b{color:var(--c,var(--brand))}
/* «Нужно действие» — тот же янтарный акцент, что у одноимённой кнопки доски (.bfilter--act) */
.supf--act.is-on{background:var(--c);border-color:var(--c);color:#fff}
.supf--act.is-on b{color:#fff}
.suptr.is-overdue{background:color-mix(in srgb,#e0533d 6%,var(--surface))}
.suptr.is-overdue{border-left-color:#e0533d}
.supkb__card.is-overdue{border-left-color:#e0533d;background:color-mix(in srgb,#e0533d 5%,var(--surface))}
.supod-b{font-size:9.5px;font-weight:800;color:#fff;background:#e0533d;border-radius:999px;padding:2px 7px;margin-left:5px}
.supod{color:#e0533d;display:inline-flex;margin-right:4px}
.supod svg{width:13px;height:13px}
/* Календарь готовностей поставщика */
.supcal{display:flex;flex-direction:column;gap:12px}
.supcal__bar{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.supcal__nav{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid var(--line);background:var(--surface);border-radius:50%;color:var(--ink);cursor:pointer}
.supcal__nav:hover{background:var(--surface-2)}
.supcal__nav svg{width:16px;height:16px}
.supcal__nav--prev svg{transform:rotate(180deg)}
.supcal__title{font-size:16px;font-weight:700;color:var(--ink);min-width:140px;text-align:center}
.supcal__today{font:inherit;font-size:12.5px;font-weight:600;color:var(--muted);background:var(--surface-2);border:0;border-radius:999px;padding:7px 14px;cursor:pointer}
.supcal__today:hover{color:var(--brand)}
.supcal__sum{margin-left:auto;font-size:12.5px;font-weight:600;color:var(--muted);display:inline-flex;align-items:center;gap:6px}
.supcal__sum svg{width:14px;height:14px}
.supcal__od{color:#e0533d;font-weight:700;display:inline-flex;align-items:center;gap:4px}
.supcal__od svg{width:13px;height:13px}
.supcal__wds{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.supcal__wd{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);padding:0 4px 2px}
.supcal__wd.is-we{color:#e0533d}
.supcal__cells{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.supcal__cell{min-height:98px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:7px 7px 9px;display:flex;flex-direction:column;gap:4px}
.supcal__cell--pad{background:transparent;border:0;min-height:0}
.supcal__cell.is-today{border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand)}
.supcal__dnum{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--ink-soft);margin-bottom:1px}
.supcal__td{font-size:9px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:#fff;background:var(--brand);border-radius:999px;padding:1px 6px}
.supcal__pill,.supcal__chip{display:flex;align-items:center;gap:6px;min-width:0;cursor:pointer;font-size:11.5px;font-weight:600;color:var(--ink)}
.supcal__pill{background:color-mix(in srgb,var(--c) 9%,var(--surface));border:1px solid color-mix(in srgb,var(--c) 20%,var(--line));border-left:3px solid var(--c);border-radius:7px;padding:3px 7px}
.supcal__pill:hover{background:color-mix(in srgb,var(--c) 17%,var(--surface))}
.supcal__pill.is-overdue{background:color-mix(in srgb,#e0533d 12%,var(--surface));border-color:color-mix(in srgb,#e0533d 32%,var(--line));border-left-color:#e0533d}
.supcal__pill.is-open,.supcal__chip.is-open{box-shadow:0 0 0 2px var(--c)}
.supcal__dot{width:7px;height:7px;border-radius:50%;background:var(--c);flex:0 0 auto}
.supcal__pn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.supcal__more{font-size:11px;font-weight:700;color:var(--muted);padding:0 4px}
.supcal__none{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:11px 13px;display:flex;flex-direction:column;gap:9px}
.supcal__nonehd{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:var(--ink)}
.supcal__nonehd svg{width:15px;height:15px;color:var(--muted)}
.supcal__nonehd b{font-size:11px;font-weight:800;color:var(--muted);background:var(--surface-2);border-radius:999px;padding:1px 8px}
.supcal__nonelist{display:flex;flex-wrap:wrap;gap:7px}
.supcal__chip{background:var(--surface-2);border:1px solid var(--line);border-left:3px solid var(--c);border-radius:999px;padding:5px 12px}
.supcal__chip:hover{background:color-mix(in srgb,var(--c) 12%,var(--surface))}
.supcal__detail{margin-top:2px}
.supcal__nonehint{font-size:11.5px;font-weight:500;color:var(--muted)}
/* ═══ Раскрытая карточка заказа в кабинете подрядчика (2026-08-06) ═══════════════
   Было: панель-drawer справа 620px, всё одной колонкой — до кнопок этапа приходилось
   прокручивать паспорт, форму и чат. Стало: окно ПО ЦЕНТРУ 1120px в манере раскрытой
   карточки доски «Заказы поставщикам» (.pord): слева паспорт заказа, справа работа,
   скроллятся КОЛОНКИ, а не окно. Геометрия намеренно повторяет .modal__card:has(.pord)
   (радиус 18, 88vh, колонка 320px, отступы 14/16) — один визуальный язык с доской;
   меняешь там — меняй и здесь. Общие для двух раскладок мелочи (.prow, .pord__sec)
   объявлены один раз с двойным селектором `.pord …, .supov …` ниже по файлу. */
.supov{position:fixed;inset:0;z-index:1198;display:grid;place-items:center;padding:18px}   /* см. комментарий к .supdrawer */
.supov__backdrop{position:absolute;inset:0;background:rgba(10,14,18,.45);opacity:0;animation:supovFade .2s ease forwards}
.supov__card{position:relative;width:100%;max-width:1120px;height:88vh;max-height:88vh;
  display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);
  border-radius:18px;box-shadow:0 24px 64px rgba(0,0,0,.25);overflow:hidden;
  /* появление — ТОЛЬКО прозрачностью, без transform: элемент с transform становится
     точкой отсчёта для position:fixed внутри себя (см. предупреждение у .suppliers
     выше по файлу), а внутри карточки живут лайтбокс и тултипы */
  opacity:0;animation:supovIn .18s ease forwards}
/* Десктопная карточка + сворачиваемый чат справа. Рабочая карточка сохраняет свои
   прежние 1120px; при раскрытии к ней добавляется самостоятельная колонка чата. */
.supov__shell{position:relative;z-index:1;width:100%;max-width:1120px;height:88vh;max-height:88vh;min-height:0;display:grid;grid-template-columns:minmax(0,1fr);gap:10px;transition:max-width .2s ease}
.supov__shell.has-chat{max-width:1174px;grid-template-columns:minmax(0,1120px) 44px}
.supov__shell.has-chat.is-chatopen{max-width:1480px;grid-template-columns:minmax(0,1120px) minmax(300px,350px)}
.supov__shell>.supov__card{max-width:none;height:100%;max-height:100%}
.supov__chatdock{min-width:0;min-height:0;height:100%;display:flex;border:1px solid var(--line);border-radius:16px;background:var(--surface);box-shadow:0 20px 52px rgba(0,0,0,.18);overflow:hidden}
.supov__chatpeek{width:100%;height:100%;border:0;background:var(--surface);color:var(--muted);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;padding:10px 5px;font:inherit;font-size:11px;font-weight:800;cursor:pointer}
.supov__chatpeek:hover{color:var(--brand);background:var(--surface-2)}
.supov__chatpeek svg{width:17px;height:17px;flex:none}
.supov__chatpeek>span{writing-mode:vertical-rl;letter-spacing:.07em}
.supov__chatcount{min-width:21px;height:21px;padding:0 5px;border-radius:11px;display:grid;place-items:center;background:color-mix(in srgb,var(--brand) 13%,var(--surface));color:var(--brand-fg);font-size:10px;font-variant-numeric:tabular-nums}
.supov__chatpanel{display:none;width:100%;min-width:0;min-height:0}
.supov__chatdock.is-open .supov__chatpeek{display:none}
.supov__chatdock.is-open .supov__chatpanel{display:flex}
.supov__chatpanel .supdcmt{width:100%;min-width:0;min-height:0;margin:0;padding:0;border:0;display:flex;flex-direction:column}
.supov__chatpanel .supdcmt__hd{flex:none;margin:0;padding:12px;border-bottom:1px solid var(--line);flex-wrap:nowrap}
.supov__chatpanel .supdcmt__note{display:none}
.supov__chatpanel .k5chat{flex:1;min-height:0;padding:12px}
.supov__chatpanel .k5chat__feed{flex:1;max-height:none;min-height:0}
.supov__chatcollapse{display:none;border:0;background:var(--surface-2);width:28px;height:28px;border-radius:8px;color:var(--muted);place-items:center;cursor:pointer;flex:none;margin-left:auto}
.supov__chatcollapse:hover{color:var(--ink)}
.supov__chatcollapse svg{width:13px;height:13px;transform:rotate(-90deg)}
.supov__chatpanel .supov__chatcollapse{display:grid}
@keyframes supovFade{to{opacity:1}}
@keyframes supovIn{to{opacity:1}}
/* окно уже было открыто — render() просто пересобрал DOM (клик по чек-листу/тумблеру
   внутри него): показываем сразу конечное состояние, без повторного проигрывания входа */
.supov--noanim .supov__backdrop{animation:none;opacity:1}
.supov--noanim .supov__card{animation:none;opacity:1;transform:none}
/* Полоса этапов под шапкой — аналог .pord__step карточки доски */
.supov__step{flex:none;padding:9px 16px;border-bottom:1px solid var(--line);background:var(--surface);overflow-x:auto}
.supov__step .spath{margin:0}
/* Две колонки: паспорт слева, работа справа. Скроллит каждая сама себя. */
.supov__cols{flex:1;min-height:0;display:grid;grid-template-columns:320px 1fr}
.supov__left{border-right:1px solid var(--line);padding:14px;overflow-y:auto;display:flex;flex-direction:column;gap:11px}
.supov__right{padding:14px;overflow-y:auto;display:flex;flex-direction:column;gap:11px;min-width:0}
/* Гибридная карточка заказа (2026-08-13): состав слева, существующие процессные формы
   занимают основную ширину; путь заказа и справочные вкладки идут ниже. Старые блоки
   не переписаны — лишь разложены по новым контейнерам, поэтому подсказки/права/действия
   остаются едиными с прежней карточкой. */
.supov__desktop{display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden}
.supov__mobile{display:none}
.supov__deskmain{flex:1 1 auto;display:grid;grid-template-columns:minmax(240px,280px) minmax(0,1fr);min-height:0;overflow:hidden}
.supov__positions{min-width:0;min-height:0;padding:13px;background:var(--surface-2);border-right:1px solid var(--line);overflow-y:auto;overscroll-behavior:contain}
.supov__workspace{min-width:0;min-height:0;padding:16px;display:flex;flex-direction:column;gap:11px;overflow-y:auto;overscroll-behavior:contain}
.supov__workspace>*{min-width:0;flex:none}
.supov__rail{display:flex;flex-direction:column;gap:9px}
.supov__railhead{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.055em}
.supov__railhead svg{width:14px;height:14px;flex:none}
.supov__railhead b{font-weight:800;color:var(--ink)}
.supov__railhead span{margin-left:auto;min-width:22px;padding:2px 7px;border-radius:999px;background:var(--surface);color:var(--muted);font-size:10px;text-align:center}
.supov__poslist{display:flex;flex-direction:column;gap:6px}
.supov__pos{display:grid;grid-template-columns:minmax(0,1fr);align-items:center;gap:6px;padding:6px 6px 6px 9px;border:1px solid transparent;border-radius:11px;transition:.15s}
.supov__pos.has-pick{grid-template-columns:minmax(0,1fr) 32px}
.supov__pos:hover{background:var(--surface)}
.supov__pos.is-active{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 7%,var(--surface))}
.supov__pos.is-picked:not(.is-active){background:color-mix(in srgb,var(--brand) 4%,var(--surface))}
.supov__posopen{min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 8px;padding:2px 0;border:0;background:none;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.supov__posname{min-width:0;font-size:12.5px;font-weight:700;line-height:1.3;overflow-wrap:anywhere}
.supov__possub{grid-column:1;color:var(--muted);font-size:10.5px;line-height:1.25}
.supov__posqty{grid-column:2;grid-row:1 / 3;align-self:center;font-size:11.5px;white-space:nowrap;font-variant-numeric:tabular-nums}
.supov__pick{position:relative;width:32px;height:32px;display:grid;place-items:center;border-radius:9px;cursor:pointer;transition:.15s}
.supov__pick:hover{background:var(--surface-2)}
.supov__pick input{position:absolute;left:50%;top:50%;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.supov__pick span{width:18px;height:18px;display:grid;place-items:center;border:1.5px solid var(--line);border-radius:6px;background:var(--surface);color:#fff;transition:.15s}
.supov__pick span svg{width:11px;height:11px;opacity:0;transform:scale(.65);transition:.12s}
.supov__pick input:checked+span{border-color:var(--brand);background:var(--brand)}
.supov__pick input:checked+span svg{opacity:1;transform:none}
.supov__pick:has(input:focus-visible){outline:2px solid var(--brand);outline-offset:1px}
.supov__bulk{display:flex;flex-direction:column;gap:7px;margin-top:2px;padding:10px;border:1px solid var(--line);border-radius:11px;background:var(--surface)}
.supov__bulkn{font-size:11.5px;font-weight:800}
.supov__bulksel,.supov__bulkbtn{width:100%;min-height:34px;border:1px solid var(--line);border-radius:9px;background:var(--surface-2);color:var(--ink);padding:7px 9px;font:inherit;font-size:11px}
.supov__bulkbtn{display:flex;align-items:center;justify-content:center;gap:6px;cursor:pointer}
.supov__bulkbtn svg{width:13px;height:13px}
.supov__bulkclear{align-self:flex-start;border:0;background:none;color:var(--muted);padding:2px;font:inherit;font-size:10.5px;cursor:pointer}
.supov__bulkclear:hover{color:var(--ink)}
.supov__workspace .supgd__row.is-focus,.supov__workspace .suptr2.is-focus{outline:2px solid color-mix(in srgb,var(--brand) 35%,transparent);outline-offset:1px;border-radius:9px;background:color-mix(in srgb,var(--brand) 5%,var(--surface))}
.supov__track{flex:none;padding:12px 16px 10px;border-top:1px solid var(--line);background:var(--surface);overflow-x:auto}
.supov__track .spath{margin:0}
.supov__details{flex:none;display:flex;flex-direction:column;min-height:0;max-height:min(38vh,340px);border-top:1px solid var(--line);background:var(--surface);overflow:hidden}
.supov__footer{flex:none;display:flex;align-items:stretch;min-width:0;border-bottom:1px solid var(--line);background:var(--surface)}
.supov__tabs{flex:1 1 auto;min-width:0;display:flex;align-items:flex-end;gap:3px;padding:7px 0 0 14px;overflow-x:auto}
.supov__tab{flex:none;border:0;border-bottom:2px solid transparent;background:none;color:var(--muted);padding:8px 10px 9px;font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.supov__tab:hover{color:var(--ink)}
.supov__tab.is-on{color:var(--brand);border-bottom-color:var(--brand)}
.supov__actionslot{flex:none;display:flex;align-items:center;gap:8px;margin-left:auto;padding:7px 14px 7px 15px;background:var(--surface)}
.supov__actionslot[hidden]{display:none}
.supov__actionslot .supaccept__btn{width:auto;min-height:34px;margin:0;justify-content:center;white-space:nowrap}
.supov__actionslot .supneg__btn,.supov__actionslot .supship__btn{margin:0;width:auto}
/* Левый слот той же строки — дополнительное действие этапа («в производство без предоплаты»):
   стоит ПЕРВЫМ, поэтому margin-left:auto основного слота по-прежнему отжимает его вправо. */
.supov__actionslot--left{margin-left:0;padding-left:14px;padding-right:6px}
.supnopay{margin-top:12px}
.supov__actionslot .supnopay{margin:0}
.supnopay__btn{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:7px 12px;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--muted);font:inherit;font-size:12px;font-weight:700;white-space:nowrap;cursor:pointer}
.supnopay__btn:hover{border-color:color-mix(in srgb,#7c5cff 55%,var(--line));color:#7c5cff}
.supnopay__btn svg{width:15px;height:15px}
.supnopay__btn[disabled]{opacity:.55;cursor:default}
/* Подсказка под кнопкой: чего не хватает для отправки / что признак уже стоит. В левом слоте
   нижней строки места нет — там подсказка не показывается (кнопка туда переносится одна). */
.supnopay__hint{margin-top:5px;color:var(--muted);font-size:11.5px;line-height:1.35;max-width:420px}
.supov__actionslot .supnopay__hint{display:none}
/* Плашка «завод готов начать без предоплаты» в блоке решения на карточке доски и пометка
   той же серой подстрокой на плитке. */
.pord__nopay{margin:10px 0 0;padding:9px 11px;border:1px solid color-mix(in srgb,#7c5cff 35%,var(--line));border-radius:10px;background:color-mix(in srgb,#7c5cff 7%,var(--surface));color:var(--ink);font-size:12.5px;line-height:1.45}
.pord__nopay svg{width:15px;height:15px;vertical-align:-3px;margin-right:5px;color:#7c5cff}
.tbc__id--nopay{color:#7c5cff;font-weight:700}
.supov__workspace .supnext:empty{display:none}
.supov__tabpanel{display:none;padding:13px 16px 16px}
.supov__tabpanel.is-on{display:block;flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.supov__tabpanel .pass__item{font-size:16px;font-weight:800;line-height:1.3}
.supov__tabpanel .pass__sub{margin-top:3px;color:var(--muted);font-size:12px}
.supov__tabpanel .supthumb-w{align-self:flex-start;max-width:220px}
.supov__tabpanel .supph,.supov__tabpanel .supmoney{margin-top:11px}
.supov__tabempty{margin:0;color:var(--muted);font-size:12px}
.supov__history{display:flex;flex-direction:column;gap:8px}
.supov__hrow{display:grid;grid-template-columns:10px minmax(0,1fr) auto;align-items:center;gap:8px;font-size:12px}
.supov__hrow>span:last-child{color:var(--muted);white-space:nowrap}
.supov__hdot{width:8px;height:8px;border-radius:50%;background:var(--c,var(--brand))}
/* Карточка рекламации — одноколоночная и узкая (маленькая таблица + кнопки решения):
   растягивать её на 1120px не за чем, окно тянется по содержимому. */
.supov--solo .supov__card{max-width:620px;height:auto}
.supov--solo .supov__body{display:block;overflow:auto;padding:16px}
/* ═══ ЛЕНТА ДЕЙСТВИЙ КАБИНЕТА — правая колонка канбана (2026-08-12) ═══════════════════
   ТОЛЬКО ДЕСКТОП (просьба Никиты): ниже 1200px колонка съела бы канбан, поэтому и панель,
   и её свёрнутый корешок скрыты полностью — на узком экране кабинет как раньше.
   С 2026-08-15 панель носит КЛАССЫ ЛЕНТЫ ДОСКИ (.bfeed--dock / .bfeed__row / .bfeed__peek):
   владелец просил точную копию, и сделана она переиспользованием, а не вторым набором
   правил. Своего здесь осталось только это: сетка колонки и десктоп-онли показ. Меняешь
   ВИД ленты — правь блок .bfeed выше по файлу, тут ничего.
   ⚠️ ВЕС СЕЛЕКТОРА: .bfeed.bfeed--dock — это (0,2,0) и оно ставит display:flex. Прятать
   панель можно только селектором НЕ ЛЕГЧЕ, иначе она вылезет на телефоне — отсюда
   .supwork .bfeed.bfeed--dock, а не .supwork .bfeed--dock. */
.supwork{display:block}
.supwork > .chcol{min-width:0}
.supwork .bfeed.bfeed--dock,.supwork .bfeed__peek{display:none}
@media (min-width:1200px){
  .supwork{display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:12px;align-items:start}
  .supwork.is-feedopen{grid-template-columns:minmax(0,1fr) 340px}
  .supwork .bfeed.bfeed--dock{display:flex}
  .supwork .bfeed__peek{display:flex}
}
/* Документы по заказу в паспорте карточки кабинета (2026-08-06): папки номенклатуры,
   открытые заводу автоматически при отправке заказа. Ссылки, не копии. */
.supdocs{display:flex;flex-direction:column;gap:7px}
.supdocs__n{display:flex;flex-direction:column;gap:4px}
.supdocs__nh{font-size:11.5px;font-weight:800;line-height:1.3}
.supdocs__g{display:flex;flex-direction:column;gap:3px;padding-left:6px;border-left:2px solid var(--line)}
.supdocs__gh{font-size:10.5px;font-weight:700;color:var(--muted);display:flex;align-items:center;gap:4px}
.supdocs__gh svg{width:12px;height:12px;flex:none}
.supdocs__f{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--brand);
  text-decoration:none;overflow-wrap:anywhere}
.supdocs__f:hover{text-decoration:underline}
.supdocs__f svg{width:13px;height:13px;flex:none}
.supdocs__spec{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:var(--ink-soft)}
.supdocs__spec svg{width:12px;height:12px;flex:none}
.supdocs__hint{margin:7px 0 0;font-size:10.5px;color:var(--muted)}
/* Паспорт: комментарий КРОНОС и фото товара 1С */
.supov__cmt{margin:0;font-size:12.5px;line-height:1.45;color:var(--ink-soft);white-space:pre-wrap;overflow-wrap:anywhere}
.supov__left .supthumb-w{align-self:flex-start;max-width:100%}
/* Паспорт слева: те же секции и строки, что в левой рельсе карточки доски */
.supov__left .pass__item{font-size:16.5px;font-weight:800;line-height:1.3}
.supov__left .pass__sub{font-size:12px;color:var(--muted);margin-top:3px}
.supov__left .supph,.supov__left .supmoney{margin-top:0}
.supov__head{display:flex;align-items:center;gap:11px;padding:13px 16px;border-bottom:1px solid var(--line);flex:none}
.supov__ava{width:38px;height:38px;border-radius:12px;flex:none;display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,var(--c,var(--brand)),color-mix(in srgb,var(--c,var(--brand)) 55%,#fff))}
.supov__ava svg{width:19px;height:19px}
.supov__id{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.supov__id b{font-size:15px;font-weight:800;letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* вторая строка названия заказа — номер контейнера, тем же шрифтом, что заголовок (2026-08-11) */
.supov__id>.supov__idc{font-size:15px;font-weight:800;letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bcard__tc,.pass__itemc{display:block}
.supov__id>span{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.supov__id i{font-style:normal;font-weight:700}
.supov__close{border:none;background:var(--surface-2);width:32px;height:32px;border-radius:10px;color:var(--muted);
  display:grid;place-items:center;cursor:pointer;flex:none;transition:.15s}
.supov__close svg{width:15px;height:15px}
.supov__close:hover{color:var(--down);background:color-mix(in srgb,var(--down) 12%,var(--surface-2))}
/* Отмена последнего действия и ВРЕМЕННОЕ удаление карточки (2026-08-13) — те же габариты,
   что у крестика: шапка карточки читается как один ряд одинаковых кнопок. */
.supov__undo,.supov__del,.supov__edit{border:none;background:var(--surface-2);width:32px;height:32px;border-radius:10px;
  color:var(--muted);display:grid;place-items:center;cursor:pointer;flex:none;transition:.15s}
.supov__undo svg,.supov__del svg,.supov__edit svg{width:15px;height:15px}
/* Режим редактирования (2026-08-24): выключенный — как «отмена», включённый — залит
   фирменным цветом, чтобы по одному взгляду было видно, что карточка открыта на правку. */
.supov__edit:hover{color:var(--brand);background:color-mix(in srgb,var(--brand) 12%,var(--surface-2))}
.supov__edit.is-on{color:var(--brand-ink);background:var(--brand)}
.supov__undo:hover{color:var(--brand);background:color-mix(in srgb,var(--brand) 12%,var(--surface-2))}
.supov__undo:disabled{opacity:.5;cursor:default}
/* удаление — единственная необратимая кнопка в шапке, поэтому красная СРАЗУ, а не по наведению */
.supov__del{color:var(--down);background:color-mix(in srgb,var(--down) 10%,var(--surface-2))}
.supov__del:hover{color:#fff;background:var(--down)}
.supov__body{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
/* Узкий десктоп: окно во весь экран; до мобильного порога рабочие зоны остаются независимыми. */
@media (max-width:900px){
  .supov{padding:0}
  .supov__shell{width:100%;height:100%;max-height:100%}
  .supov__shell.has-chat{max-width:100%}
  .supov__shell.has-chat.is-chatopen{max-width:100%;grid-template-columns:minmax(0,1fr) minmax(280px,38vw)}
  .supov__card{max-width:100%;height:100%;max-height:100%;border:0;border-radius:0}
  .supov__cols{grid-template-columns:1fr}
  .supov__left{border-right:0;border-bottom:1px solid var(--line);overflow:visible}
  .supov__right{overflow:visible}
}
@media (max-width:760px){
  .supcal__cells{gap:5px}.supcal__wds{gap:5px}
  .supcal__cell{min-height:62px;padding:5px 5px 6px}
  .supcal__pn{display:none}
  .supcal__pill,.supcal__chip{padding:4px;border-radius:6px;justify-content:center}
  .supcal__sum{width:100%;margin-left:0}
  .supov__left,.supov__right{padding:14px 16px}.supov--solo .supov__body{padding:14px 16px}
  .supov__head{padding-left:16px;padding-right:14px}
}

/* ═══ МОБИЛЬНЫЙ КАБИНЕТ ПОСТАВЩИКА (≤740px, спека 2026-08-11) ═══════════════════════
   Порог ОДИН с JS (supIsMobile). Новые элементы (точки, бейдж «N нов.», паспорт-кнопка,
   чат-иконка, пилюля «Сохранено») по умолчанию СКРЫТЫ — десктоп не меняется ни на пиксель;
   их включает только media-блок ниже. */
.supdots,.col__newb,.supov__passbtn,.supov__chatbtn,.supov__chatwrap,.supov__saved{display:none}
/* Состав заказа — общий для десктопа (верх паспорта у оплаченной стопки) и мобильного
   (первый блок тела шторки; отступы переопределяет media-блок ниже). */
/* flex:none ОБЯЗАТЕЛЕН: и .supov__left, и .supov__body — flex-колонки, а overflow:hidden
   (нужен для скругления) даёт flex-у право сжать блок до нуля при переполнении колонки —
   у заказов с длинным списком документов состав «исчезал» или обрезался до 2 строк. */
.supov__items{flex:none;margin:0 0 13px;border:1px solid var(--line);border-radius:13px;
  background:var(--surface);overflow:hidden}
.supov__itshd{display:flex;align-items:center;gap:7px;padding:10px 13px 8px;font-size:11px;
  font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.supov__itshd svg{width:13px;height:13px;flex:none}
.supov__it{display:flex;align-items:baseline;gap:9px;padding:9px 13px;border-top:1px solid var(--line);font-size:13.5px}
.supov__itn{flex:1;min-width:0;font-weight:600;line-height:1.35}
.supov__itq{flex:none;font-weight:800;white-space:nowrap;font-variant-numeric:tabular-nums}
.supov__itr{flex:none;font-size:11px;color:#16a34a;font-weight:700;white-space:nowrap}
@media (max-width:740px){
  .supov__body{overflow:auto}
  .supov__desktop{display:none}
  .supov__mobile{display:flex;flex-direction:column;min-height:100%}
  /* шапка: только аватар + имя (решение Никиты 2026-08-11 — без подписи и вступления) */
  .suphero{padding:12px 14px;gap:11px;align-items:center}
  .suphero__brand,.suphero__p{display:none}
  .suphero .suphero__ava{width:42px;height:42px;font-size:15px}
  .suphero .suphero__home{border-radius:12px}
  .suphero__name{font-size:19px;margin:0}
  .suphdtools{top:50%;transform:translateY(-50%)}
  /* баннер и сводки на мобильном не живут (JS их и не рендерит — это страховка) */
  .suppliers .supnew,.suppliers .supsum,.suppliers .pulse{display:none}
  /* На телефоне из чипов оставляем ТОЛЬКО «Нужно действие» и «Неотвеченные сообщения»
     (.supf--act): этапы и так видны колонками, а эти два — единственный способ увидеть,
     где ждут тебя. Раньше пряталась вся строка чипов, и завод, работающий с телефона, про
     неотвеченный вопрос не узнавал вовсе (2026-08-24). */
  .suppliers .suptools__chips{display:flex}
  .suppliers .suptools__chips .supf:not(.supf--act){display:none}
  .suppliers .suptools__chips:not(:has(.supf--act)){display:none}
  /* канбан: лента колонн со snap-свайпом, край следующей подглядывает */
  .suppliers .supboard__cols{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
    gap:10px;padding-bottom:4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .suppliers .supboard__cols::-webkit-scrollbar{display:none}
  .suppliers .supboard__cols>.col{flex:0 0 82%;min-width:0;scroll-snap-align:center}
  .suppliers .supboard__cols .col__pulse{display:none}   /* вертикальная полоса «загрузки» этапа на узкой колонке — лишний брусок */
  .suppliers .supboard__cols .col__body{max-height:calc(100dvh - 320px);min-height:120px;overflow-y:auto}
  .suppliers .supdots{display:flex;justify-content:center;gap:5px;padding:9px 0 2px}
  .suppliers .supdots i{width:6px;height:6px;border-radius:3px;background:var(--muted);opacity:.4;transition:all .2s}
  .suppliers .supdots i.is-on{opacity:1;width:16px;background:var(--brand)}
  /* бейдж «N нов.» на колонке «Не обработано» + точка на непросмотренной заявке */
  .col__newb{display:inline-flex;align-items:center;background:#e0533d;color:#fff;
    font-size:10.5px;font-weight:800;padding:1px 8px;border-radius:999px;white-space:nowrap;
    font-variant-numeric:tabular-nums}
  .bcard--supnew.is-unseen .bcard__t::before{content:"";display:inline-block;width:8px;height:8px;
    border-radius:50%;background:#e0533d;margin-right:6px;vertical-align:1px}
  /* вкладки — нижний таб-бар (Заказы · Рекламация · Документы) */
  .suppliers .suptabs{position:fixed;left:0;right:0;bottom:0;z-index:1150;margin:0;gap:4px;
    padding:7px 8px calc(9px + env(safe-area-inset-bottom));border-top:1px solid var(--line);
    background:color-mix(in srgb,var(--surface) 86%,transparent);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
  .suppliers .suptabs__b{flex:1;justify-content:center;padding:9px 4px;font-size:13px}
  .suppliers{padding-bottom:78px}
  /* панель отметок «Сгруппировать в заказ» — над таб-баром */
  .suppickbar{bottom:calc(72px + env(safe-area-inset-bottom));max-width:calc(100vw - 16px);
    flex-wrap:wrap;justify-content:center;z-index:1160}
  /* раскрытая карточка: шторка справа 88%, слева полоса-скрим (тап закрывает) */
  .supov__card{position:absolute;top:0;right:0;bottom:0;left:auto;width:88%;max-width:88%;
    height:100%;max-height:100%;border:0;border-radius:22px 0 0 22px;
    box-shadow:-14px 0 44px rgba(10,14,18,.3);
    animation:supovSlide .3s cubic-bezier(.2,.85,.25,1)}
  .supov--noanim .supov__card{animation:none}
  .supov__backdrop::after{content:"‹";position:absolute;top:50%;left:9px;transform:translateY(-50%);
    color:#fff;font-size:24px;line-height:1;opacity:.85;text-shadow:0 1px 6px rgba(0,0,0,.45)}
  .supov__head{position:relative;gap:9px}
  /* паспорт — аккордеон: левая рельса скрыта, пока не раскрыта кнопкой */
  .supov__cols .supov__left{display:none}
  .supov__card.is-pass .supov__cols .supov__left{display:block}
  /* состав заказа — первым блоком тела шторки (в теле, не в паспорте — тот свёрнут) */
  .supov__items{margin:10px 16px 0}
  .supov__passbtn{display:flex;flex:none;align-items:center;gap:8px;width:calc(100% - 32px);margin:10px 16px 0;
    padding:11px 14px;border:1px solid var(--line);border-radius:13px;background:var(--surface);
    font:inherit;font-size:13px;font-weight:700;color:var(--ink);cursor:pointer;text-align:left}
  .supov__passbtn svg{width:15px;height:15px;color:var(--muted)}
  .supov__passchev{margin-left:auto;transition:transform .2s}
  .supov__passbtn.is-on .supov__passchev{transform:rotate(180deg)}
  /* компактный степпер: только кружки и линии (подписи в тултипах) */
  .supov__step .spath__lb,.supov__step .spath__dt{display:none}
  .supov__step{padding-bottom:6px}
  /* чат — иконка в правом верхнем углу, панель разворачивается под шапкой */
  .supov__chatbtn{display:grid;place-items:center;position:relative;width:38px;height:38px;flex:none;
    border:1px solid var(--line);border-radius:50%;background:var(--surface-2);color:var(--muted);cursor:pointer}
  .supov__chatbtn svg{width:17px;height:17px}
  .supov__chatbtn.is-on{background:var(--brand);border-color:var(--brand);color:#fff}
  .supov__chatbtn .k5unread{position:absolute;top:-5px;right:-5px}
  .supov__chatwrap{display:block;max-height:0;overflow:hidden;
    transition:max-height .3s cubic-bezier(.2,.8,.2,1);background:var(--surface);flex:none}
  .supov__chatwrap.is-open{max-height:min(360px,55dvh);border-bottom:1px solid var(--line)}
  .supov__chatwrap .supdcmt{margin:8px 14px 12px}
  .supov__chatwrap .k5chat__feed{max-height:min(230px,34dvh);overflow-y:auto}
  /* пилюля «Сохранено» — мигает на каждую правку (автосохранение и так мгновенное) */
  .supov__saved{display:inline-flex;align-items:center;gap:5px;position:absolute;top:50%;right:96px;
    transform:translateY(calc(-50% - 6px));opacity:0;transition:opacity .25s,transform .25s;
    pointer-events:none;background:color-mix(in srgb,#16a34a 14%,var(--surface));color:#16a34a;
    font-size:11.5px;font-weight:800;padding:5px 10px;border-radius:999px;white-space:nowrap}
  .supov__saved svg{width:12px;height:12px}
  .supov__saved.is-show{opacity:1;transform:translateY(-50%)}
}
@keyframes supovSlide{from{transform:translateX(104%)}to{transform:none}}
@media (prefers-reduced-motion:reduce){
  .supov__card{animation:none}
  .supov__chatwrap{transition:none}
}

/* фото готовности к позиции */
.supph{margin-top:11px}
.supph__lbl{font-size:11px;font-weight:700;color:var(--muted);margin-bottom:7px}
.supph__lbl b{color:var(--brand)}
.supph__grid{display:flex;flex-wrap:wrap;gap:8px}
.supph__t{position:relative;width:64px;height:64px;border-radius:10px;overflow:hidden;border:1px solid var(--line)}
.supph__t img{width:100%;height:100%;object-fit:cover;display:block}
.supph__x{position:absolute;top:2px;right:2px;width:18px;height:18px;border-radius:50%;border:0;background:rgba(20,16,12,.6);color:#fff;display:grid;place-items:center;cursor:pointer}
.supph__x svg{width:11px;height:11px}
.supph__add{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;width:64px;height:64px;border-radius:10px;border:1.5px dashed var(--line);color:var(--muted);font-size:10.5px;font-weight:600;cursor:pointer}
.supph__add:hover{border-color:var(--brand);color:var(--brand)}
.supph__view{padding:0;border:0;background:none;cursor:zoom-in;display:block;width:100%;height:100%}
/* мини-превью фото в строке/карточке (рядом с этапами) */
.supthb{display:inline-flex;align-items:center;gap:4px;margin-top:6px;margin-left:12px;vertical-align:middle}
.supthb__t{width:30px;height:30px;border-radius:7px;overflow:hidden;border:1px solid var(--line);padding:0;cursor:zoom-in;background:var(--surface-2);flex:none;transition:transform .1s}
.supthb__t:hover{transform:scale(1.08);border-color:var(--brand)}
.supthb__t img{width:100%;height:100%;object-fit:cover;display:block}
.supthb__more{font-size:11px;font-weight:700;color:var(--muted)}
/* лайтбокс фото — поверх всего, в натуральном размере (до экрана) */
/* z-index 1300 — ВЫШЕ шторки карточки кабинета (.supdrawer, 1200): лайтбокс открывается
   из карточки, и на 120 он уезжал ПОД неё (фото было не видно, 2026-08-17). */
.suplb{position:fixed;inset:0;z-index:1300;background:rgba(8,10,14,.85);display:flex;align-items:center;justify-content:center;padding:20px;cursor:zoom-out;animation:supovFade .15s ease forwards}
.suplb__img{max-width:94vw;max-height:94vh;width:auto;height:auto;border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,.55);cursor:default}
.suplb__x{position:fixed;top:16px;right:18px;width:42px;height:42px;border-radius:50%;border:0;background:rgba(255,255,255,.16);color:#fff;display:grid;place-items:center;cursor:pointer}
.suplb__x:hover{background:rgba(255,255,255,.28)}
.suplb__x svg{width:22px;height:22px}
.supph__add svg{width:16px;height:16px}

/* Фото номенклатуры в ЛК поставщика: миниатюра строки, галерея паспорта, лайтбокс */
.supnph { display: flex; flex-direction: column; gap: 6px; margin: 6px 0; }
.supnph__big { max-width: 100%; max-height: 320px; object-fit: contain; border-radius: 10px; cursor: zoom-in; background: var(--panel2, #f1f0ee); }
.supnph__row { display: flex; gap: 6px; flex-wrap: wrap; }
.supnph__mini { width: 34px; height: 34px; object-fit: cover; border-radius: 6px; cursor: zoom-in; flex: 0 0 auto; vertical-align: middle; margin-right: 6px; background: var(--panel2, #f1f0ee); }
.supnph__nav { position: fixed; top: 50%; transform: translateY(-50%); font-size: 34px; line-height: 1; background: rgba(0,0,0,.35); color: #fff; border: 0; border-radius: 10px; padding: 8px 14px; cursor: pointer; z-index: 2; }
.supnph__nav--l { left: 16px; } .supnph__nav--r { right: 16px; }
.supnph__cnt { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); color: #fff; background: rgba(0,0,0,.45); border-radius: 999px; padding: 2px 12px; font-size: 13px; }

/* быстрые победы: легенда-кнопки, бейджи фото/сообщений, сортируемая шапка */
.suplg{border:0;background:transparent;font:inherit;cursor:pointer;padding:3px 8px;border-radius:999px}
.suplg:hover{background:var(--surface-2)}
.suplg.is-on{background:color-mix(in srgb,var(--c) 16%,var(--surface))}
.suplg.is-on b,.suplg.is-on{color:var(--c)}
.supbs{display:inline-flex;gap:5px;margin-left:8px;vertical-align:1px}
.supb{display:inline-flex;align-items:center;gap:2px;font-size:10.5px;font-weight:700;color:var(--muted);background:var(--surface-2);border-radius:999px;padding:1px 6px}
.supb svg{width:11px;height:11px}
.supkb__meta{margin-top:6px;display:flex}
.suptable__s{user-select:none}

/* деньги по заказу (видит только владелец) + частичная готовность */
.supmoney{display:flex;flex-direction:column;gap:3px;margin-top:9px;padding:8px 10px;background:color-mix(in srgb,#16a34a 7%,var(--surface));border:0.5px solid color-mix(in srgb,#16a34a 22%,var(--line));border-radius:var(--r-sm)}
.supmoney__r{font-size:12px;color:var(--ink-soft)}
.supmoney__r b{color:var(--ink);font-weight:700}
.supsum__money{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:11px;padding:11px 14px;background:color-mix(in srgb,#16a34a 7%,var(--surface));border:1px solid color-mix(in srgb,#16a34a 22%,var(--line));border-radius:var(--r-sm);font-size:13px;color:var(--ink-soft)}
.supsum__money b{color:var(--ink);font-weight:700;font-size:14px}
.supmoney__rem b{color:#127a4a}
.supmoney__hint{margin-left:auto;display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--muted)}
.supmoney__hint svg{width:13px;height:13px}
.supledit__moneyhd{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;color:var(--muted);margin-top:6px;padding-top:10px;border-top:1px dashed var(--line)}
.supledit__moneyhd svg{width:15px;height:15px}
/* Упрощённая форма позиции: наименование + штук + подкрепить + деньги-аккордеон */
.supledit--slim .ufield{margin-bottom:13px}
.supedit__note{resize:vertical;min-height:56px;line-height:1.45;font-size:13px}
.supedit__qtyrow{display:flex;align-items:stretch;max-width:220px}
.supedit__qtyrow .uinput{border-top-right-radius:0;border-bottom-right-radius:0;border-right:0;text-align:left}
.supedit__unit{display:flex;align-items:center;padding:0 15px;font-size:13px;font-weight:700;color:var(--ink-soft);background:var(--surface-2);border:1px solid var(--line);border-left:0;border-radius:0 var(--r-sm) var(--r-sm) 0}
.supedit__att{margin:2px 0 13px;background:color-mix(in srgb,var(--surface-2) 50%,var(--surface));border:1px dashed var(--line);border-radius:var(--r-sm);padding:12px}
.supedit__attl{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--ink-soft);margin-bottom:10px}
.supedit__attl svg{width:15px;height:15px;flex:none;color:var(--muted)}
.supedit__attrow{margin-bottom:9px}
.supedit__attn{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);background:color-mix(in srgb,var(--surface-2) 50%,var(--surface));border:1px dashed var(--line);border-radius:var(--r-sm);padding:11px 12px;margin:2px 0 13px}
.supedit__attn svg{width:16px;height:16px;flex:none;color:var(--muted)}
.supedit__money{margin-bottom:2px}
.supedit__moneysum{width:100%;cursor:pointer;display:flex;align-items:center;gap:8px;font:inherit;font-size:12.5px;font-weight:700;color:var(--ink-soft);background:color-mix(in srgb,var(--surface-2) 55%,var(--surface));border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px;text-align:left}
.supedit__moneysum>span{flex:1;display:flex;align-items:center;gap:7px}
.supedit__moneysum svg{width:15px;height:15px;color:var(--muted)}
.supedit__moneysum svg:last-child{margin-left:auto;transition:transform .15s}
.supedit__money.is-open .supedit__moneysum svg:last-child{transform:rotate(180deg)}
.supedit__money.is-open .supedit__moneysum{border-bottom-left-radius:0;border-bottom-right-radius:0}
.supedit__moneyb{display:none}
.supedit__money.is-open .supedit__moneyb{display:block;border:1px solid var(--line);border-top:0;border-radius:0 0 var(--r-sm) var(--r-sm)}
.supedit__moneygrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:12px}
@media (max-width:560px){.supedit__moneygrid{grid-template-columns:1fr}}

/* дашборд по всем поставщикам */
.dashtbl{border:1px solid var(--line);border-radius:var(--r);overflow-x:auto;background:var(--surface)}
.dashtbl__h,.dashr{display:grid;grid-template-columns:minmax(160px,1.6fr) 56px 54px 72px 124px 72px 104px 112px;align-items:center;gap:10px;min-width:840px}
.dashtbl__h{padding:9px 14px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:var(--muted);background:var(--surface-2);border-bottom:1px solid var(--line)}
.dashr{width:100%;text-align:left;font:inherit;background:var(--surface);border:0;border-bottom:1px solid var(--line);padding:11px 14px;cursor:pointer;border-left:3px solid var(--c,var(--line))}
.dashr:hover{background:var(--surface-2)}
.dashr.is-over{background:color-mix(in srgb,#e0533d 5%,var(--surface));border-left-color:#e0533d}
.dashr__name{display:flex;align-items:center;gap:9px;min-width:0;font-size:13.5px}
.dashr__name b{font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dashr__ava{width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center;background:var(--a,#94a3b8);color:#fff;font-size:11px;font-weight:800}
.dashr__ava img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.dashr__c{font-size:13px;font-weight:700;color:var(--ink-soft);text-align:center}
.dashr__done{color:#127a4a}
.dashr__over{color:#e0533d}
.dashr__val{font-size:12.5px;font-weight:700;color:var(--ink);white-space:nowrap}
.dashr__ready{display:flex;align-items:center;gap:7px;min-width:0}
.dashr__ready svg{flex:0 0 auto}
.dashr__readyt{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.dashr__readyt b{font-size:13px;font-weight:800;color:#127a4a}
.dashr__readyt span{font-size:10.5px;color:var(--muted);white-space:nowrap}
.dashr__ready--none{justify-content:center;color:var(--muted);font-weight:700}
.supdash__total{flex:none;display:flex;align-items:center}
.dashr__rel{display:flex;align-items:center;gap:8px}
.dashr__bar{flex:1;height:6px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.dashr__bar i{display:block;height:100%;border-radius:999px}
.dashr__rl{font-size:12px;font-weight:800;white-space:nowrap}

/* путь-этапы (stepper) в карточке позиции */
.spath{display:flex;margin:2px 0 16px;padding:4px 0}
.spath__n{flex:1;min-width:0;position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:5px;padding:0 4px}
.spath__line{position:absolute;top:15px;right:50%;width:100%;height:2px;background:var(--line);z-index:0}
.spath__line.is-on{background:var(--c)}
.spath__ic{position:relative;z-index:1;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--surface);border:2px solid var(--line);color:var(--muted)}
.spath__ic svg{width:16px;height:16px}
.spath__n.is-done .spath__ic{background:var(--c);border-color:var(--c);color:#fff}
.spath__lb{font-size:10.5px;font-weight:600;color:var(--muted);line-height:1.2}
.spath__n.is-done .spath__lb{color:var(--ink)}
.spath__dt{font-size:10.5px;color:var(--ink-soft);line-height:1.3;font-weight:600}
.spath__dt i{display:block;font-style:normal;font-size:9.5px;font-weight:500;color:var(--muted)}
.spath__no{color:var(--muted);opacity:.6;font-weight:500}
/* компактный путь-этапы — всегда виден в строке/карточке */
/* мини-степпер этапов: в узкой карточке кружки не должны вылезать за её край —
   переносим на вторую строку вместо переполнения */
.spmini{display:inline-flex;align-items:center;flex-wrap:wrap;gap:0 2px;max-width:100%;margin-top:6px}
.spmini__n{flex:0 0 auto;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);border:1px solid var(--line);color:var(--muted)}
.spmini__n svg{width:11px;height:11px}
.spmini__n.is-done{background:color-mix(in srgb,var(--c) 15%,var(--surface));border-color:color-mix(in srgb,var(--c) 38%,var(--line));color:var(--c)}
.spmini__line{flex:0 0 auto;width:11px;height:2px;background:var(--line)}
.spmini__line.is-on{background:color-mix(in srgb,var(--c) 55%,var(--line))}
.supkb__card .spmini{margin-top:9px}

/* Окно цен: свёрнутая группа валютных видов цены ($) */
.pprice-more{margin-top:8px;border-top:1px dashed var(--line);padding-top:6px}
.pprice-more>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--muted);padding:5px 0;user-select:none}
.pprice-more>summary::-webkit-details-marker{display:none}
.pprice-more>summary svg{width:14px;height:14px;transition:transform .15s}
.pprice-more[open]>summary svg{transform:rotate(90deg)}
.pprice-more>summary:hover{color:var(--ink)}
.pprice-more .pprice-form{margin-top:4px}

/* === Обобщённый поиск (navigate) — подсветка строк .k5srow === */
/* Подсветка совпадений для ПРОИЗВОЛЬНЫХ строк (не .bcard) в режиме navigate.
   Контейнер получает .is-searching, строки rowSel приглушаются, найденные —
   оранжевый контур, текущая (.is-cur) — плотное кольцо. Дублирует логику
   .board__scroll.is-searching .bcard, но цепляется к общему классу-строке.
   Подставь свой rowSel вместо .myrow (или повесь утилитарный класс .k5srow на строки). */
.is-searching .k5srow{opacity:.35;transition:opacity .15s, box-shadow .15s, background .15s}
.is-searching .k5srow.is-hit{opacity:1;
  box-shadow:0 0 0 1.5px color-mix(in srgb, var(--brand) 38%, transparent)}
.is-searching .k5srow.is-cur{opacity:1;
  box-shadow:0 0 0 2.5px var(--brand)}
/* для строк-таблиц (tr), где box-shadow рвётся границами ячеек — подсветка фоном: */
.is-searching tr.k5srow{opacity:.4}
.is-searching tr.k5srow.is-hit{opacity:1;background:color-mix(in srgb, var(--brand) 8%, transparent)}
.is-searching tr.k5srow.is-cur{opacity:1;background:color-mix(in srgb, var(--brand) 16%, transparent);
  box-shadow:inset 2.5px 0 0 var(--brand)}
/* <mark> в подсказке уже стилизован у msearch; в самой строке подсветку слов не делаем,
   чтобы не перерисовывать innerHTML строк на каждый набор (дёшево и без потери обработчиков). */

/* ===== Спецификации (Книга заводов) ===== */
.specs{animation:fadeUp .3s ease both}
.spchead__ava,.specfacchip__a{width:28px;height:28px;border-radius:8px;font-size:12px;flex:0 0 auto}
.spchead__flag{font-size:12px;color:var(--muted);margin-left:8px;font-weight:500}
.specgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:12px}
.speccard{display:flex;align-items:center;gap:12px;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px;cursor:pointer;transition:border-color .15s,transform .05s;width:100%;font:inherit;color:inherit}
.speccard:hover{border-color:var(--c)}
.speccard:active{transform:translateY(1px)}
.speccard__cover{flex:0 0 88px;width:88px;height:88px;align-self:stretch;border-radius:var(--r-sm);background:color-mix(in srgb,var(--c) 12%,var(--surface-2));display:flex;align-items:center;justify-content:center;color:var(--c);overflow:hidden}
.speccard__cover img{width:100%;height:100%;object-fit:cover}
.speccard__cover svg{width:34px;height:34px}
.speccard__b{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.speccard__title{font-weight:600;font-size:15px;color:var(--ink)}
.speccard__meta{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.speccard__chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.speccard__go{color:var(--muted);flex:0 0 auto}
.speccard__go svg{width:18px;height:18px}
.specstatus{font-size:11px;font-weight:600;padding:3px 8px;border-radius:999px;border:1px solid transparent;white-space:nowrap}
.specstatus.is-draft{background:#f1f5f9;color:#64748b;border-color:#e2e8f0}
.specstatus.is-review{background:#fff7ed;color:#c2630a;border-color:#fed7aa}
.specstatus.is-approved{background:#ecfdf5;color:#15803d;border-color:#bbf7d0}
.specstatus--lg{font-size:13px;padding:5px 12px}
.specbadge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:var(--muted);background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:3px 8px;white-space:nowrap}
.specbadge svg{width:12px;height:12px}
.specbadge--shared{color:#2563eb;background:#eff6ff;border-color:#bfdbfe}
.spectop{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:2px 0 14px}
.spectop__sp{flex:1}
.specfacs{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.specfacchip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:3px 10px 3px 3px}
.specact{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:7px 12px;cursor:pointer;transition:border-color .15s}
.specact svg{width:15px;height:15px}
.specact:hover{border-color:var(--brand)}
.specact.is-on{background:var(--brand);color:#fff;border-color:var(--brand)}
.spectabs{display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin-bottom:14px}
.spectab{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--muted);background:transparent;border:none;border-bottom:2px solid transparent;padding:9px 12px;cursor:pointer;border-radius:8px 8px 0 0;font-family:inherit}
.spectab svg{width:15px;height:15px}
.spectab:hover{color:var(--ink);background:var(--surface-2)}
.spectab.is-on{color:var(--ink);border-bottom-color:var(--brand)}
.spectab--add{color:var(--brand)}
.specblock{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.specblock__head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.specblock__t{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;color:var(--ink)}
.specblock__t svg{width:17px;height:17px;color:var(--brand)}
.specblock__sp{flex:1}
.speclink{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--brand);background:none;border:none;cursor:pointer;font-family:inherit}
.speclink svg{width:13px;height:13px}
.spectext{font-size:14px;line-height:1.6;color:var(--ink)}
.spectr{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.spectr__col{min-width:0}
.spectr__col--tr{border-left:1px solid var(--line);padding-left:18px}
.spectr__lang{display:block;font-size:11px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.spectr__empty{display:flex;flex-direction:column;gap:6px;color:var(--muted);font-size:13px;background:var(--surface-2);border:1px dashed var(--line);border-radius:var(--r-sm);padding:14px;text-align:center}
.spectr__empty svg{width:22px;height:22px;margin:0 auto;color:#94a3b8}
.spectr__empty p{font-weight:600;color:var(--ink);margin:0}
.spectr__empty span{font-size:12px}
.specedit__ta{width:100%;min-height:140px;font:inherit;font-size:14px;line-height:1.6;color:var(--ink);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px;resize:vertical;box-sizing:border-box}
.specedit__bar{display:flex;gap:8px;align-items:center;margin-top:10px;flex-wrap:wrap}
.specedit__hint{font-size:12px;color:var(--muted)}
.specphotos{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.specphoto{position:relative;width:84px;height:84px;border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--line);background:var(--surface-2)}
.specphoto img{width:100%;height:100%;object-fit:cover}
.specphoto__x{position:absolute;top:3px;right:3px;width:20px;height:20px;border-radius:50%;border:none;background:rgba(15,23,42,.6);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}
.specphoto__x svg{width:12px;height:12px}
.specphoto--add{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--brand);font-size:11px;font-weight:600;border-style:dashed;cursor:pointer}
.specphoto--add svg{width:18px;height:18px}
.specj{position:fixed;inset:0;z-index:1200}
.specj[hidden]{display:none}
.specj__backdrop{position:absolute;inset:0;background:rgba(15,23,42,.32);opacity:0;transition:opacity .2s}
.specj.is-open .specj__backdrop{opacity:1}
.specj__card{position:absolute;top:0;right:0;height:100%;width:380px;max-width:92vw;background:var(--surface);border-left:1px solid var(--line);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .22s ease}
.specj.is-open .specj__card{transform:none}
.specj__head{display:flex;align-items:center;gap:10px;padding:16px;border-bottom:1px solid var(--line)}
.specj__ic{width:34px;height:34px;border-radius:10px;background:#eef2ff;color:#6366f1;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.specj__ic svg{width:18px;height:18px}
.specj__id{flex:1;display:flex;flex-direction:column;min-width:0}
.specj__id b{font-size:14px;color:var(--ink)}
.specj__id span{font-size:11px;color:var(--muted)}
.specj__close{width:30px;height:30px;border:none;background:var(--surface-2);border-radius:8px;color:var(--muted);cursor:pointer;flex:0 0 auto}
.specj__close svg{width:15px;height:15px}
.specj__body{flex:1;overflow:auto;padding:10px}
.specj__item{display:flex;gap:10px;padding:10px;border-radius:var(--r-sm)}
.specj__item:hover{background:var(--surface-2)}
.specj__ava{width:30px;height:30px;border-radius:8px;font-size:12px;flex:0 0 auto}
.specj__txt{font-size:13px;color:var(--ink);line-height:1.45}
.specj__when{display:block;font-size:11px;color:var(--muted);margin-top:2px}
@media (max-width:760px){ .spectr{grid-template-columns:1fr} .spectr__col--tr{border-left:none;border-top:1px solid var(--line);padding-left:0;padding-top:14px} .specgrid{grid-template-columns:1fr} }
/* перетаскивание + копирование спек */
.speccardw{position:relative}
.speccardw .speccard{width:100%}
.speccardw.is-dragging{opacity:.45}
.speccard__copy{position:absolute;top:8px;right:8px;width:30px;height:30px;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:opacity .15s,color .15s,border-color .15s}
.speccardw:hover .speccard__copy{opacity:1}
.speccard__copy:hover{color:var(--brand);border-color:var(--brand)}
.speccard__copy svg{width:15px;height:15px}
.chcol__drophint{display:none;font-size:12px;font-weight:600;color:var(--brand);margin-left:8px}
.chcol.is-droptarget{outline:2px dashed var(--brand);outline-offset:6px;border-radius:var(--r);background:color-mix(in srgb,var(--brand) 6%,transparent)}
.chcol.is-droptarget .chcol__drophint{display:inline}
.specact--ghost{background:transparent}
/* диалог копирования/перемещения */
.speccopy{display:flex;flex-direction:column;gap:8px;min-width:300px}
.speccopy__src{font-size:13px;color:var(--muted);margin:0 0 4px}
.speccopy__l{font-size:12px;font-weight:700;color:var(--muted);margin-top:6px}
.speccopy__name{font:inherit;font-size:14px;color:var(--ink);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px;box-sizing:border-box}
.speccopy__name:focus{outline:none;border-color:var(--brand)}
.speccopy .dd{align-self:flex-start}
.speccopy__bar{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.speccopy__hint{font-size:12px;color:var(--muted);line-height:1.5;margin:8px 0 0}
/* фильтр-бар каталога спек */
.specfilter{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 16px}
.specfilter__search{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:8px 14px;min-width:240px;flex:1 1 240px;max-width:360px;color:var(--muted)}
.specfilter__search svg{width:16px;height:16px;flex:0 0 auto}
.specfilter__search input{border:none;background:transparent;font:inherit;font-size:14px;color:var(--ink);width:100%;outline:none}
.specfilter__cats{display:flex;gap:6px;flex-wrap:wrap;flex:1 1 auto}
.specchip{font:inherit;font-size:13px;font-weight:600;color:var(--muted);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:7px 14px;cursor:pointer;transition:all .15s}
.specchip:hover{color:var(--ink);border-color:var(--brand)}
.specchip.is-active{background:var(--brand);color:#fff;border-color:var(--brand)}
.specfilter__sort{display:flex;align-items:center;gap:8px;margin-left:auto}
.specfilter__sortl{font-size:12px;color:var(--muted);font-weight:600}
.specnores{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--muted);font-size:14px;padding:28px;background:var(--surface-2);border:1px dashed var(--line);border-radius:var(--r)}
.specnores svg{width:18px;height:18px}
/* доступ + presence на карточке */
.speccard__people{display:flex;align-items:center;gap:12px;margin-top:8px;flex-wrap:wrap}
.specaccess,.speclive{display:inline-flex;align-items:center;gap:6px}
.specava-stack{display:inline-flex}
.specava{width:24px;height:24px;border-radius:50%;font-size:10px;font-weight:800;border:2px solid var(--surface);margin-left:-8px;display:inline-grid;place-items:center;color:#fff}
.specava-stack .specava:first-child{margin-left:0}
.specava-more{font-size:11px;font-weight:700;color:var(--muted);margin-left:4px}
.speclive{padding:3px 10px 3px 8px;border-radius:999px;background:color-mix(in srgb,#16b364 12%,var(--surface));border:1px solid color-mix(in srgb,#16b364 30%,var(--line))}
.speclive__dot{width:8px;height:8px;border-radius:50%;background:#16b364;box-shadow:0 0 0 0 rgba(22,179,100,.55);animation:specpulse 1.8s infinite}
.speclive .specava{width:22px;height:22px;border:2px solid #eafaf0}
.speclive__t{font-size:11.5px;font-weight:700;color:#0f7a44}
@keyframes specpulse{0%{box-shadow:0 0 0 0 rgba(22,179,100,.5)}70%{box-shadow:0 0 0 7px rgba(22,179,100,0)}100%{box-shadow:0 0 0 0 rgba(22,179,100,0)}}
.specbadge--cat{color:#2563eb;background:#eff6ff;border-color:#bfdbfe}
/* карточка: действия (переименовать/копировать) + инлайн-переименование */
.speccard__acts{position:absolute;top:8px;right:8px;display:flex;gap:6px;opacity:1;transition:opacity .15s}
.speccard__act{width:30px;height:30px;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:color .15s,border-color .15s}
.speccard__act:hover{color:var(--brand);border-color:var(--brand)}
.speccard__act.is-ok{color:#16a34a;border-color:#16a34a}
.speccard__act svg{width:15px;height:15px}
.speccardw--edit{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--brand);border-radius:var(--r);padding:12px}
.speccard__renameinput{font:inherit;font-size:15px;font-weight:600;color:var(--ink);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 12px;width:100%;box-sizing:border-box;outline:none}
.speccard__renameinput:focus{border-color:var(--brand)}
.speccard__renamebar{display:flex;gap:8px;margin-top:8px}
.specact--sm{font-size:12px;padding:6px 10px}
/* №10 полоса присутствия */
.specpresence{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;margin:0 0 14px}
.specpresence__hd{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:13px;color:var(--ink);flex:0 0 auto}
.specpresence__dot{width:9px;height:9px;border-radius:50%;background:#16b364;box-shadow:0 0 0 0 rgba(22,179,100,.55);animation:specpulse 1.8s infinite;flex:0 0 auto}
.specpresence__cnt{min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:color-mix(in srgb,#16b364 14%,var(--surface));color:#0f7a44;font-size:12px;font-weight:800;display:inline-grid;place-items:center}
.specpresence__people{display:flex;gap:8px;flex-wrap:wrap;flex:1 1 auto;min-width:0}
.prsempty{font-size:13px;color:var(--muted)}
.prschip{display:inline-flex;align-items:center;gap:8px;background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:4px 12px 4px 4px;cursor:pointer;font:inherit;transition:border-color .15s}
.prschip:hover{border-color:var(--brand)}
.prschip__ava{width:26px;height:26px;border-radius:50%;font-size:10px;font-weight:800;color:#fff;display:inline-grid;place-items:center;flex:0 0 auto}
.prschip__b{display:flex;flex-direction:column;line-height:1.15;text-align:left;min-width:0}
.prschip__n{font-size:12.5px;font-weight:700;color:var(--ink)}
.prschip__s{font-size:11px;color:var(--muted);max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.specpresence__hot{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;margin-left:auto}
.specpresence__hotl{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:var(--muted)}
.specpresence__hotl svg{width:14px;height:14px;color:#f97316}
.prshot{display:inline-flex;align-items:center;gap:6px;background:transparent;border:1px solid var(--line);border-radius:999px;padding:5px 10px;cursor:pointer;font:inherit;font-size:12px;font-weight:600;color:var(--ink);transition:border-color .15s}
.prshot:hover{border-color:#f97316}
.prshot svg{width:13px;height:13px;color:#f97316;flex:0 0 auto}
.prshot__n{min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:color-mix(in srgb,#f97316 16%,var(--surface));color:#c2410c;font-size:10.5px;font-weight:800;display:inline-grid;place-items:center}
@media (max-width:760px){ .specpresence__hot{margin-left:0;width:100%} }
/* онлайн-виджет idle + иконка-график на карточке */
.bview--idle{color:var(--muted)}
.bview--idle>svg{color:var(--muted)}
.specchgpill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:#c2410c;background:#fff1e8;border:1px solid #ffd9c2;border-radius:999px;padding:3px 9px;cursor:pointer;transition:border-color .15s}
.specchgpill:hover{border-color:#f97316}
.specchgpill svg{width:12px;height:12px}
/* общий график изменений */
.specchgblock{margin:0 0 14px;padding:14px 16px}
.specchghd{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.specchgttl{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14.5px;color:var(--ink)}
.specchgttl svg{width:17px;height:17px;color:var(--brand)}
.specchgtot{font-size:13px;color:var(--muted)}
.specchgtot b{color:var(--ink);font-size:16px;font-weight:800;margin-right:4px}
.specchgranges{margin-left:auto;display:flex;gap:6px}
.specchgrange{font:inherit;font-size:12.5px;font-weight:600;color:var(--muted);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:6px 13px;cursor:pointer;transition:all .15s}
.specchgrange:hover{color:var(--ink);border-color:var(--brand)}
.specchgrange.is-on{background:var(--brand);color:#fff;border-color:var(--brand)}
.specchgchart{height:96px}
.sparksvg{width:100%;height:100%;display:block}
.spark-fill{fill:rgba(255,77,6,.10)}
.spark-line{fill:none;stroke:#FF4D06;stroke-width:2;vector-effect:non-scaling-stroke}
/* модалка изменений по спеке */
.specchgm__chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.specchgm__big{font-size:14px;color:var(--muted);margin-bottom:12px;display:flex;align-items:baseline;gap:7px}
.specchgm__big b{font-size:30px;font-weight:800;color:var(--ink)}
.specchgm__chart{height:120px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:8px}
.specchgm__cap{font-size:12px;color:var(--muted);margin:10px 0 0;line-height:1.5}
/* двухколоночная раскладка каталога + дерево категорий слева */
.speclayout{display:flex;gap:16px;align-items:flex-start}
.specside{flex:0 0 256px;width:256px;position:sticky;top:12px}
.specmain{flex:1;min-width:0}
.specfilter__sp{flex:1}
@media (max-width:860px){ .speclayout{flex-direction:column} .specside{width:100%;position:static} }
.sctree{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 10px}
.sctree__hd{font-size:15px;font-weight:700;color:var(--ink);margin:2px 6px 10px}
.sctree__row{display:flex;align-items:center;gap:3px;border-radius:9px;padding-left:calc(var(--d,0)*15px)}
.sctree__row.is-sel{background:color-mix(in srgb,var(--brand) 9%,transparent)}
.sctree__row.is-sel .sctree__lbl{color:var(--brand);font-weight:700}
.sctree__tog{width:20px;height:26px;flex:none;border:none;background:transparent;color:var(--muted);font-size:15px;font-weight:700;cursor:pointer;display:grid;place-items:center;border-radius:6px}
.sctree__tog:hover{color:var(--brand);background:var(--surface-2)}
.sctree__dot{width:20px;flex:none;text-align:center;color:#cbc7c2;font-size:11px}
.sctree__lbl{flex:1;min-width:0;display:flex;align-items:center;gap:8px;justify-content:space-between;text-align:left;background:none;border:none;font:inherit;font-size:13.5px;font-weight:500;color:var(--ink);cursor:pointer;padding:6px 8px;border-radius:8px;line-height:1.25}
.sctree__lbl:hover{color:var(--brand)}
.sctree__all{width:100%;margin-bottom:6px;color:var(--ink);font-weight:600}
.sctree__all.is-sel{color:var(--brand);font-weight:700;background:color-mix(in srgb,var(--brand) 9%,transparent)}
.sctree__n{font-size:11px;font-weight:700;color:var(--muted);background:var(--surface-2);border-radius:999px;padding:1px 7px;flex:none}
.sctree__kids{margin-left:9px;border-left:1px solid var(--line)}
.sctree__kids[hidden]{display:none}
/* онлайн-виджет в заголовке раздела */
.specs > .hello{display:flex;align-items:flex-start;gap:16px;justify-content:space-between}
.specs > .hello > .bview{margin-left:auto;align-self:center;font-size:12.5px;flex:none}
/* поиск спек — сайтовый компонент .msearch, растянут по ширине строки */
.specmain .specfilter .msearch{display:flex;flex:1 1 auto;max-width:560px;height:40px}
.specmain .specfilter .msearch__in{flex:1;width:auto;min-width:0}
.specmain .specfilter .msearch:focus-within .msearch__in{width:auto}

/* ==== Отчёт «Скорость ответа на лид» ==== */
.ls-toggles{display:flex;align-items:center;gap:14px 20px;flex-wrap:wrap;margin:0 2px 14px}
.ls-chk{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;font-weight:600;color:var(--ink);user-select:none}
.ls-chk input{position:absolute;opacity:0;width:0;height:0}
.ls-chk__box{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border:1.5px solid var(--line);border-radius:5px;background:var(--surface-2);transition:.15s}
.ls-chk__box svg{width:12px;height:12px;opacity:0;color:#fff;transition:opacity .12s}
.ls-chk input:checked ~ .ls-chk__box{background:var(--brand);border-color:var(--brand)}
.ls-chk input:checked ~ .ls-chk__box svg{opacity:1}
.ls-chk input:focus-visible ~ .ls-chk__box{outline:2px solid var(--brand);outline-offset:2px}
.ls-toggles__hint{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--muted);font-weight:600}
.ls-toggles__hint svg{width:13px;height:13px;flex:none}
.ls-detailhead{display:flex;align-items:center;gap:12px;margin:2px 2px 10px;flex-wrap:wrap}
.ls-back{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);border-radius:var(--r-sm);padding:6px 11px;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;transition:.15s}
.ls-back:hover{border-color:var(--brand);color:var(--brand)}
.ls-back svg{width:13px;height:13px;transform:rotate(180deg)}
.ls-detailhead__t{font-size:14px;font-weight:700;color:var(--ink)}
.ls-leads{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.ls-lead{border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.ls-lead__h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;background:var(--surface-2);border-bottom:1px solid var(--line)}
.ls-lead__num{font-weight:800;color:var(--ink);font-size:13px}
.ls-lead__sp{font-weight:800;color:var(--brand);font-variant-numeric:tabular-nums;font-size:13px}
.ls-trail{width:100%;border-collapse:collapse;font-size:12.5px}
.ls-trail td{padding:6px 12px;border-bottom:1px solid var(--line);color:var(--ink);font-weight:600}
.ls-trail tr:last-child td{border-bottom:0}
.ls-trail__dt{color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums;width:1%}
.ls-trail__u{white-space:nowrap;width:1%}
.ls-trail__s{color:var(--ink);font-weight:700}
.ls-trail tr:last-child .ls-trail__s{color:var(--brand)}

/* ===== Монитор очереди на лиды (queuemon) ===== */
.qm-date{font:inherit;padding:5px 9px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink)}
.qm-lbl{font-size:12px;color:var(--muted);font-weight:600;margin:2px 2px 8px}
.qm-lbl2{margin-top:20px}
.qm-empty{color:var(--muted);font-size:13px;padding:8px 2px}
.qm-queue{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:4px}
.qm-chip{display:flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:9px;padding:5px 11px;background:var(--card);font-weight:600;font-size:13px}
.qm-rk{color:var(--muted);font-variant-numeric:tabular-nums;font-size:12px}
.qm-ticks{display:flex;flex-direction:column;gap:10px}
.qm-tick{border:1px solid var(--line);border-radius:12px;background:var(--card);padding:10px 12px}
.qm-th{display:flex;align-items:center;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.qm-tm{font-variant-numeric:tabular-nums;font-weight:600;font-size:13px;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:2px 8px}
.qm-tn{font-weight:600}
.qm-ct{margin-left:auto;font-size:12px;color:var(--muted)}
.qm-tbl{width:100%;border-collapse:collapse}
.qm-tbl td{padding:5px 8px;border-top:1px solid var(--line);font-size:13px;vertical-align:middle}
.qm-tbl tr:first-child td{border-top:0}
.qm-lead{font-variant-numeric:tabular-nums;color:var(--muted);white-space:nowrap;width:1%}
.qm-arw{color:var(--muted);padding:0 4px}
.qm-to{font-weight:600}
.qm-desc{color:var(--muted);font-size:12px;margin-left:6px}
.qm-b{display:inline-block;font-size:12px;font-weight:600;border-radius:7px;padding:1px 8px;white-space:nowrap}
.qm-ok{background:rgba(29,158,117,.14);color:#0f6e56}
.qm-skip{background:rgba(239,159,39,.16);color:#854f0b}
.qm-err{background:rgba(226,75,74,.14);color:#a32d2d}

/* ═══════════ Дашборд безопасности («Пользователи и доступы») ═══════════
   Цвет серьёзности приходит инлайном: --vc у вердикта, --sc у находки.
   Тёмная тема отрабатывает сама — всё на токенах и color-mix. */
.hello__side{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:flex-end}

/* Строка-статус вверху страницы: одна строка вместо второго ряда плиток. Кликабельна. */
.secline{display:flex;align-items:center;gap:13px;width:100%;text-align:left;cursor:pointer;font:inherit;
  background:color-mix(in srgb,var(--sc) 6%,var(--surface));
  border:1px solid color-mix(in srgb,var(--sc) 26%,var(--line));
  border-left:3px solid var(--sc);border-radius:var(--r);padding:12px 16px;margin:0 2px 22px;
  transition:background .15s,border-color .15s}
.secline:hover{background:color-mix(in srgb,var(--sc) 11%,var(--surface));border-color:var(--sc)}
.secline:focus-visible{outline:2px solid var(--sc);outline-offset:2px}
.secline__ic{width:34px;height:34px;border-radius:10px;flex:none;display:grid;place-items:center;
  background:color-mix(in srgb,var(--sc) 15%,transparent);color:var(--sc)}
.secline__ic svg{width:18px;height:18px}
.secline__txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.secline__t{font-weight:800;font-size:14px;color:var(--ink)}
.secline__s{font-size:12px;color:var(--muted);font-weight:600}
.secline__go{flex:none;display:inline-flex;align-items:center;gap:3px;color:var(--sc);font-size:12.5px;font-weight:800}
.secline__go svg{width:15px;height:15px;transition:transform .15s}
.secline:hover .secline__go svg{transform:translateX(3px)}

/* Кольцо защищённости — единственный крупный акцент раздела (механика как у кольца плана) */
.sechero{display:flex;align-items:center;gap:26px;flex-wrap:wrap;padding:4px 2px 2px}
.sechero__ring{position:relative;width:132px;height:132px;flex:none}
.sechero__svg{width:100%;height:100%;transform:rotate(-90deg)}
.sechero__bg{fill:none;stroke:var(--surface-2);stroke-width:8}
.sechero__fg{fill:none;stroke:var(--sc);stroke-width:8;stroke-linecap:round;
  stroke-dasharray:var(--circ);stroke-dashoffset:var(--circ);
  transition:stroke-dashoffset 1.1s cubic-bezier(.25,.7,.25,1) .15s}
.is-in .sechero__fg{stroke-dashoffset:var(--off)}
.sechero__mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.sechero__mid b{font-size:36px;font-weight:800;color:var(--ink);letter-spacing:.3px;font-variant-numeric:tabular-nums}
.sechero__mid span{font-size:10px;color:var(--muted);font-weight:700;margin-top:5px;text-transform:uppercase;letter-spacing:.5px}
.sechero__body{flex:1;min-width:260px;display:flex;flex-direction:column;gap:5px}
.sechero__t{font-size:19px;font-weight:800;color:var(--ink);letter-spacing:-.2px}
.sechero__s{font-size:13.5px;color:var(--muted);font-weight:500;max-width:62ch}
.sechero__facts{display:flex;flex-wrap:wrap;gap:9px;margin-top:13px}
.secfact{display:inline-flex;align-items:center;gap:8px;background:var(--surface-2);border-radius:999px;padding:6px 14px 6px 8px}
.secfact__ic{width:24px;height:24px;border-radius:8px;flex:none;display:grid;place-items:center;background:var(--surface);color:var(--muted)}
.secfact__ic svg{width:13px;height:13px}
.secfact__v{font-size:15px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.secfact__l{font-size:12px;color:var(--muted);font-weight:600}
@media (max-width:620px){
  .sechero{gap:18px}
  .sechero__ring{width:104px;height:104px}
  .sechero__mid b{font-size:28px}
}

.secf{display:flex;gap:13px;padding:14px 16px;margin-bottom:9px;background:var(--surface);
  border:1px solid var(--line);border-left:3px solid var(--sc);border-radius:var(--r-sm);
  transition:border-color .15s}
.secf:last-child{margin-bottom:0}
.secf:hover{border-color:color-mix(in srgb,var(--sc) 45%,var(--line))}
.secf__sev{flex:none;align-self:flex-start;font-size:10px;font-weight:800;text-transform:uppercase;
  letter-spacing:.06em;padding:4px 9px;border-radius:999px;white-space:nowrap;
  background:color-mix(in srgb,var(--sc) 14%,transparent);color:var(--sc)}
.secf__b{flex:1;min-width:0}
.secf__t{font-weight:800;font-size:14px;color:var(--ink);margin-bottom:4px}
.secf__risk{font-size:13px;color:var(--ink-soft);line-height:1.5}
.secf__fix{font-size:13px;color:var(--ink);line-height:1.5;margin-top:7px;
  background:var(--surface-2);border-radius:var(--r-sm);padding:9px 12px}
.secf__fix b{color:var(--brand)}
.secf__ev{display:flex;align-items:center;gap:6px;margin-top:7px;font-size:11.5px;color:var(--muted);
  font-variant-numeric:tabular-nums}
.secf__ev svg{width:13px;height:13px;flex:none}
@media (max-width:560px){
  .secf{flex-direction:column;gap:9px}
  .hello__side{gap:9px}
}

/* значок «слабый пароль» в строке сотрудника (пароль больше не показываем) */
.upass__weak{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:6px;
  background:color-mix(in srgb,var(--down) 14%,transparent);color:var(--down);cursor:help}
.upass__weak svg{width:13px;height:13px}

/* Блок «логин + пароль + ссылка» в окне выдачи доступов (кнопка-ключ у сотрудника) */
.credsbox{font-family:ui-monospace,"SFMono-Regular","Cascadia Mono",Consolas,monospace;
  font-size:13px;line-height:1.7;white-space:pre-wrap;word-break:break-word;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:12px 14px;margin:14px 0 10px;color:var(--ink);user-select:all}
.credshint{font-size:12.5px;color:var(--muted);margin:0}

/* ============ Персональные уведомления (P1-9) ============ */
.notifbell{position:relative}
.notifbell__n{position:absolute;top:-3px;right:-3px;min-width:16px;height:16px;padding:0 4px;
  display:inline-flex;align-items:center;justify-content:center;border-radius:999px;
  background:var(--brand);color:var(--brand-ink);font-size:10px;font-weight:800;line-height:1;
  border:2px solid var(--topbar);box-sizing:content-box}
/* display:inline-flex/flex выше перебивают браузерное [hidden]: k5NotifBadge ставил hidden,
   а цифра оставалась на экране с последним значением («всегда 3» при пустом инбоксе, 14.09.2026) */
.notifbell__n[hidden],.notifpanel[hidden]{display:none}
.notifpanel{position:fixed;top:56px;right:14px;z-index:80;width:min(380px,94vw);max-height:min(70vh,560px);
  display:flex;flex-direction:column;overflow:hidden;background:var(--surface);color:var(--ink);
  border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 48px rgba(16,24,40,.28)}
.npanel__head{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:12px 14px;border-bottom:1px solid var(--line);font-size:14px}
.npanel__head b{font-weight:800}
.npanel__readall{border:1px solid var(--line);background:var(--surface);color:var(--brand);
  font:inherit;font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;cursor:pointer;transition:.15s}
.npanel__readall:hover{border-color:var(--brand);background:var(--brand-tint)}
.npanel__body{overflow-y:auto;padding:4px 0 8px}
.npanel__sec{padding:9px 14px 5px;font-size:11px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--muted)}
.npanel__sec--muted{color:var(--muted);opacity:.7}
.npanel__empty{padding:26px 14px;text-align:center;color:var(--muted);font-size:13px;display:flex;flex-direction:column;align-items:center;gap:6px}
.npanel__empty svg{width:22px;height:22px;opacity:.6}
.nrow{display:flex;gap:10px;width:100%;text-align:left;padding:10px 14px;border:0;background:none;cursor:pointer;
  font:inherit;color:var(--ink);border-bottom:1px solid var(--line);transition:background .12s}
.nrow:hover{background:var(--surface-2)}
.nrow__ic{flex:none;width:30px;height:30px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--surface-2);color:var(--muted)}
.nrow__ic svg{width:16px;height:16px}
.nrow--urgent .nrow__ic{background:var(--brand-tint);color:var(--brand)}
.nrow--unread{background:var(--brand-tint)}
.nrow--unread:hover{background:var(--brand-tint)}
.nrow--done .nrow__t{font-weight:600;color:var(--muted)}
.nrow__b{display:flex;flex-direction:column;gap:2px;min-width:0}
.nrow__t{font-size:13.5px;font-weight:700;line-height:1.25}
.nrow__m{font-size:12px;color:var(--muted);display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.nrow__ago{font-style:normal;margin-left:auto;white-space:nowrap;opacity:.85}
/* Стопка тостов уведомлений — справа снизу, новые выезжают снизу вверх, старые поднимаются.
   Всё заскоплено под .ntoast-wrap: иначе общий тост «.ntoast» (см. выше, position:fixed
   left:50%) перетягивал уведомления в центр экрана и они наплывали друг на друга. */
.ntoast-wrap{position:fixed;right:16px;bottom:20px;z-index:140;display:flex;flex-direction:column;gap:10px;max-width:min(360px,92vw);pointer-events:none}
.ntoast-wrap .ntoast{position:relative;left:auto;right:auto;top:auto;bottom:auto;z-index:auto;max-width:none;pointer-events:auto;
  display:flex;gap:11px;align-items:flex-start;padding:12px 14px;border-radius:13px;cursor:pointer;
  background:var(--surface);color:var(--ink);border:1px solid var(--line);box-shadow:0 12px 34px rgba(16,24,40,.24);
  transform:translateY(16px);opacity:0;transition:transform .28s ease,opacity .28s ease}
.ntoast-wrap .ntoast.is-in{transform:translateY(0);opacity:1}
.ntoast-wrap .ntoast.is-out{transform:translateY(10px);opacity:0}
.ntoast-wrap .ntoast--urgent{border-color:var(--brand);box-shadow:0 12px 34px rgba(255,77,6,.28)}
.ntoast-wrap .ntoast__ic{flex:none;width:30px;height:30px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--surface-2);color:var(--muted)}
.ntoast-wrap .ntoast--urgent .ntoast__ic{background:var(--brand-tint);color:var(--brand)}
.ntoast-wrap .ntoast__ic svg{width:16px;height:16px}
.ntoast-wrap .ntoast__b{min-width:0}
.ntoast-wrap .ntoast__t{font-size:13.5px;font-weight:700;line-height:1.3}
.ntoast-wrap .ntoast__s{font-size:12px;color:var(--muted);margin-top:2px}
@media(max-width:560px){.notifpanel{right:6px;left:6px;width:auto}.ntoast-wrap{right:8px;left:8px;bottom:12px;max-width:none}}

/* ═══ Деление заказов и заказы-стопки в ЛК поставщика + панели доски «Тест» (2026-07-27) ═══ */
/* Карточка «Не обработано»: мини-кнопки действий (разделить / в план / отклонить). */
.supkb__acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.supkb__mini{display:inline-flex;align-items:center;gap:5px;padding:5px 9px;border-radius:9px;cursor:pointer;
  border:1px solid var(--line);background:var(--card);color:var(--ink);font:inherit;font-size:11.5px;font-weight:700}
.supkb__mini:hover{border-color:var(--tone,var(--brand));color:var(--tone,var(--brand))}
.supkb__mini svg{width:13px;height:13px}
.supkb__mini--go{border-color:color-mix(in srgb,var(--tone,#0ea5e9) 45%,var(--line));color:var(--tone,#0ea5e9)}
.supkb__mini--no:hover{border-color:#e0533d;color:#e0533d}
.supkb__part{color:var(--tone,var(--brand))}
.bcard--supnew.is-rejected{opacity:.72}
.bcard--supnew.is-rejected .bcard__t{text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--muted) 60%,transparent)}
/* Карточка-стопка: состав заказа списком. */
.supgc__list{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:4px}
.supgc__it{display:flex;justify-content:space-between;gap:8px;font-size:11.5px;padding:4px 7px;border-radius:8px;
  min-width:0;overflow:hidden;background:color-mix(in srgb,var(--tone,#0ea5e9) 7%,transparent)}
.supgc__it.is-flag{outline:1.5px solid #f59e0b}
/* состав заказа в кабинете переехал на разметку доски (.tbc__gi, 2026-08-27) — подсветка
   позиции, по которой мы просим уточнение, переезжает вместе с ним */
.tbc__gi.is-flag{outline:1.5px solid #f59e0b;outline-offset:1px;border-radius:6px}
.supgc__in{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* количество с ценой тоже умеет сжиматься: без этого длинная «33 шт × 1200» распирала
   строку и она вылезала за край карточки */
.supgc__iq{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700;color:var(--muted)}
.supgc__more{font-size:11px;color:var(--muted);padding-left:7px}
.supgc__miss{display:block;margin-top:5px;font-size:11px;color:var(--muted)}
.bcard--supgroup.is-sent{opacity:.78}
.bcard--supgroup .bcard__t svg{width:14px;height:14px;vertical-align:-2px;margin-right:3px}
/* Деньги на каждой карточке — отдельная заметная строка, а не хвост мелкой подписи.
   Значения без currency остаются честно помеченными и не смешиваются с известными валютами. */
.supkbmoney{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;padding:8px 9px;
  border:1px solid color-mix(in srgb,var(--tone,var(--brand)) 35%,var(--line));border-radius:9px;
  background:color-mix(in srgb,var(--tone,var(--brand)) 9%,var(--surface));color:var(--ink)}
.supkbmoney__label{display:inline-flex;align-items:center;gap:5px;min-width:0;font-size:9.5px;font-weight:800;
  letter-spacing:.035em;text-transform:uppercase;color:color-mix(in srgb,var(--tone,var(--brand)) 68%,var(--ink))}
.supkbmoney__label>svg{width:13px;height:13px;flex:none}
.supkbmoney__label .fldhint,.col__money .fldhint,.supana__sectionhead .fldhint{margin-left:0}
.supkbmoney__value{min-width:0;text-align:right}
.supmoneyvalue{display:flex;align-items:baseline;gap:3px 8px;flex-wrap:wrap}
.supmoneyvalue__part{display:inline-flex;align-items:baseline;gap:4px;white-space:nowrap}
.supmoneyvalue__part b{font-size:13px;font-weight:900;color:var(--ink);font-variant-numeric:tabular-nums}
.supmoneyvalue__part small{font-size:8.5px;font-weight:700;color:var(--muted);white-space:normal}
.supmoneyvalue__empty{font-size:11px;font-weight:700;color:var(--muted)}
.supkbmoney.is-empty{border-style:dashed;background:var(--surface-2)}
.supkbmoney.is-empty .supkbmoney__label{color:var(--muted)}
.supkbmoney--loss{--tone:var(--down);border-color:color-mix(in srgb,var(--down) 42%,var(--line));
  background:color-mix(in srgb,var(--down) 10%,var(--surface))}
.supkbmoney--loss .supkbmoney__label,.supkbmoney--loss .supmoneyvalue__part b,.supmoneyvalue--loss .supmoneyvalue__part b{color:var(--down)}
/* Сумма этапа в шапке колонки. На узкой колонке деньги переходят на вторую строку,
   а не обрезаются вместе с количеством. */
.supboard .col__hbar{flex-wrap:wrap;gap:5px}
.col__money{display:flex;align-items:center;justify-content:space-between;gap:6px;min-width:0;flex:1 1 100%;
  padding:5px 7px;border-radius:8px;background:color-mix(in srgb,var(--tone) 9%,var(--surface));
  border:1px solid color-mix(in srgb,var(--tone) 24%,var(--line))}
.col__money>small{display:inline-flex;align-items:center;gap:3px;min-width:0;font-size:8.5px;font-weight:800;
  color:var(--muted);text-transform:uppercase;letter-spacing:.025em}
.col__money .supmoneyvalue{justify-content:flex-end;min-width:0}
.col__money .supmoneyvalue__part b{font-size:10.5px;color:color-mix(in srgb,var(--tone) 74%,var(--ink))}
.col__money .supmoneyvalue__part small{display:none}
.col__money--loss{--tone:var(--down);background:color-mix(in srgb,var(--down) 9%,var(--surface));border-color:color-mix(in srgb,var(--down) 28%,var(--line))}
/* Временная сводка превью карточки ЛК поставщика: счётчики сверху, реальные даты строго
   по нижним углам (последнее изменение слева, создание справа). */
/* Время на плитке — ОДНА серая строка (2026-08-27, «карточку компактнее»); даты создания и
   изменения ушли в подсказку. Классы __counters/__dates остались у открытой карточки. */
.supkbtime{display:flex;flex-wrap:wrap;gap:5px 10px;justify-content:space-between;
  margin-top:9px;padding-top:7px;border-top:1px solid var(--line);
  font-size:10.5px;line-height:1.3;color:var(--muted);font-variant-numeric:tabular-nums}
.supkbtime__r{margin-left:auto;text-align:right}   /* «на этапе» — в правый угол */
/* «и ещё N» / «свернуть» в составе заказа — кнопка, а не текст (раскрытие прямо на плитке) */
.supgc__toggle{width:100%;border:0;background:none;font:inherit;color:var(--muted);cursor:pointer;
  text-align:left;padding:3px 0;border-radius:6px}
.supgc__toggle:hover{color:var(--tone,var(--brand))}
.supkbtime__counters{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.supkbtime__counters>span{min-width:0;padding:6px 7px;border-radius:8px;background:var(--surface-2)}
.supkbtime small{display:block;color:var(--muted);font-size:8.5px;font-weight:700;line-height:1.25;letter-spacing:.02em}
.supkbtime b{display:block;margin-top:2px;color:var(--ink);font-size:11px;font-weight:800;line-height:1.25;font-variant-numeric:tabular-nums}
.supkbtime__dates{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;margin-top:7px}
.supkbtime__dates>span{min-width:0}
.supkbtime__dates b{font-size:9.5px;color:var(--ink-soft);white-space:normal;overflow-wrap:anywhere}
.supkbtime__created{text-align:right}
/* ═══ Компактный канбан кабинета (2026-08-27, макет «деньги в заголовке») ═══════════════
   Спека: docs/superpowers/specs/2026-08-27-sup-cabinet-card-compact-design.md */
/* Сумма заказа — в строке названия, прижата вправо: суммы выстраиваются в колонку. */
.supkb__sum{flex:none;margin-left:auto;padding-left:8px;font-size:13px;font-weight:800;color:var(--ink);
  white-space:nowrap;font-variant-numeric:tabular-nums;align-self:baseline}
.bcard--supgroup .supkb__sum,.bcard--supnew .supkb__sum{color:color-mix(in srgb,var(--tone) 30%,var(--ink))}
/* Сумма этапа в шапке колонки — вместо двух плиток. */
.col__stagesum{font-size:11px;font-weight:800;letter-spacing:.01em;font-variant-numeric:tabular-nums;
  color:color-mix(in srgb,var(--tone) 74%,var(--ink));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.col__stagesum small{font-weight:700;font-size:9px;letter-spacing:.03em;text-transform:uppercase;color:var(--muted)}
/* «Ход за заводом»: рамка, тёплый фон и медленная пульсация вместо кнопки на плитке. */
.bcard.is-actneed{border-color:color-mix(in srgb,#e08600 55%,var(--line));
  background:color-mix(in srgb,#e08600 7%,var(--card));animation:supActPulse 2.4s ease-in-out infinite}
@keyframes supActPulse{
  0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,#e08600 30%,transparent)}
  50%    {box-shadow:0 0 0 4px color-mix(in srgb,#e08600 0%,transparent)}}
@media (prefers-reduced-motion:reduce){.bcard.is-actneed{animation:none}}
.bcard.is-actneed.is-sent,.bcard.is-actneed.is-rejected{animation:none}
/* Денежный срез аналитики заказов по каждому этапу. */
.pmetric--money{background:color-mix(in srgb,var(--brand) 8%,var(--surface-2));border:1px solid color-mix(in srgb,var(--brand) 18%,var(--line))}
.pmetric--money .pmetric__v{font-size:14px}
.pmetric.is-bad.pmetric--money{background:color-mix(in srgb,var(--down) 9%,var(--surface));border-color:color-mix(in srgb,var(--down) 23%,var(--line))}
.pmetric.is-bad.pmetric--money .supmoneyvalue__part b{color:var(--down)}
.supana__sectionhead{display:flex;align-items:center;gap:4px;margin:12px 1px 7px;font-size:10.5px;font-weight:800;
  color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.supana__stages{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.supana__stage{min-width:0;padding:7px 8px;border-radius:9px;background:var(--surface-2);border:1px solid var(--line);
  cursor:pointer;text-align:left;font:inherit;width:100%}
.supana__stage.is-on{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 10%,var(--surface))}
.supana__stagehead{display:flex;align-items:center;gap:5px;min-width:0}
.supana__stagehead i{width:6px;height:6px;border-radius:50%;background:var(--tone);flex:none}
.supana__stagehead b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9px;color:var(--ink-soft)}
.supana__stagehead small{margin-left:auto;font-size:9px;font-weight:800;color:var(--muted)}
.supana__stagemoney{display:flex;margin-top:5px;min-width:0}
.supana__stagemoney .supmoneyvalue__part{display:flex}
.supana__stagemoney .supmoneyvalue__part b{font-size:10px;color:color-mix(in srgb,var(--tone) 70%,var(--ink))}
.supana__stagemoney .supmoneyvalue__part small{display:none}
.supana__stagemoney .supmoneyvalue__part+.supmoneyvalue__part:before{content:"·";margin-right:4px;color:var(--muted)}
.supana__stagemoney .supmoneyvalue__empty{font-size:10px}
/* Однострочный пульс над канбанами кабинета: индикатор здоровья + дверь на вкладку
   «Аналитика». Живёт и на телефоне — в одну строку, с переносом. */
.pstrip{display:flex;align-items:center;gap:14px;width:calc(100% - 4px);margin:12px 2px 0;padding:9px 14px;
  border:1px solid var(--line);border-radius:12px;background:var(--surface);font:inherit;font-size:12px;
  color:var(--ink);cursor:pointer;text-align:left}
.pstrip:hover{border-color:var(--brand);background:var(--surface-2)}
.pstrip.is-hot{border-color:color-mix(in srgb,var(--down) 45%,var(--line))}
.pstrip__ic{display:grid;place-items:center;color:var(--brand);flex:none}
.pstrip__ic svg{width:15px;height:15px}
.pstrip .pcm{white-space:nowrap;color:var(--muted)}
.pstrip .pcm b{color:var(--ink)}
.pstrip .pcm.is-bad b{color:var(--down)}
.pstrip .pcm.is-warn b{color:var(--warn,#f59e0b)}
.pstrip__worst{margin-left:auto;display:flex;align-items:center;gap:6px;font-weight:800;color:var(--muted)}
.pstrip__worst svg{width:14px;height:14px;flex:none}
.pstrip.is-hot .pstrip__worst{color:var(--down)}
.pstrip__go{display:grid;place-items:center;color:var(--muted);flex:none}
.pstrip__go svg{width:13px;height:13px;transform:rotate(-90deg)}
@media (max-width:760px){
  .pstrip{flex-wrap:wrap;gap:8px 12px;padding:8px 11px}
  .pstrip__worst{margin-left:0;width:100%}
  .pstrip__go{display:none}
}
/* ===== Вкладка «Аналитика» ЛК поставщика (2026-08-14): секции-аккордеоны ===== */
.supana{display:flex;flex-direction:column;gap:10px}
.supana__sec{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden}
.supana__sechead{display:flex;align-items:center;gap:8px;width:100%;padding:11px 14px;border:0;background:none;
  font:inherit;font-size:13px;font-weight:800;color:var(--ink);cursor:pointer;text-align:left}
.supana__sechead:hover{background:var(--surface-2)}
.supana__sechead i{margin-left:auto;display:grid;place-items:center;color:var(--muted)}
.supana__sechead svg{width:13px;height:13px;transition:transform .15s}
.supana__sec.is-closed .supana__sechead svg{transform:rotate(-90deg)}
.supana__secbody{padding:0 14px 14px}
.supana__secbody .pulse__metrics{margin:0}
.supana__worst{display:flex;align-items:center;gap:7px;margin:0 0 10px;font-size:12px;font-weight:800;color:var(--muted)}
.supana__worst.is-hot{color:var(--down)}
.supana__worst svg{width:14px;height:14px;flex:none}
.supana__empty{display:flex;align-items:center;gap:6px;margin:2px 0;font-size:12px;color:var(--muted)}
.supana__empty svg{width:14px;height:14px;flex:none}
/* Переключатель периода: чипы + свои даты */
.supana__period{display:flex;align-items:center;flex-wrap:wrap;gap:7px;padding:2px 2px 0}
.supana__periodlabel{font-size:10.5px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.supana__chip{border:1px solid var(--line);border-radius:999px;background:var(--surface);padding:5px 12px;
  font:inherit;font-size:12px;font-weight:700;color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.supana__chip:hover{border-color:var(--brand);color:var(--ink)}
.supana__chip.is-on{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 10%,var(--surface));color:var(--brand-fg)}
.supana__chip svg{width:12px;height:12px}
.supana__date{border:1px solid var(--line);border-radius:9px;background:var(--surface);padding:4px 8px;
  font:inherit;font-size:12px;color:var(--ink)}
.supana__dash{color:var(--muted)}
/* График динамики: легенда-переключатели серий + столбики по корзинам периода */
.supana__legend{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 12px}
.supana__leg{display:flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:999px;
  background:var(--surface);padding:5px 12px;font:inherit;font-size:12px;font-weight:700;color:var(--muted);
  cursor:pointer;opacity:.5}
.supana__leg:hover{opacity:.8}
.supana__leg.is-on{opacity:1;color:var(--ink);border-color:color-mix(in srgb,var(--c) 55%,var(--line))}
.supana__leg i{width:9px;height:9px;border-radius:50%;background:var(--c);flex:none}
.supana__leg b{font-variant-numeric:tabular-nums}
.supana__chart{display:flex;align-items:flex-end;gap:4px;height:180px;overflow-x:auto;padding-bottom:2px}
.supana__col{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:26px;flex:1;height:100%}
.supana__bars{display:flex;align-items:flex-end;gap:2px;flex:1;width:100%;justify-content:center;min-height:0}
.supana__bar{width:7px;height:var(--h);border-radius:3px 3px 0 0;background:var(--c);flex:none;
  border:0;padding:0;cursor:pointer}
.supana__bar.is-on{outline:2px solid var(--ink);outline-offset:1px}
.supana__col small{font-size:9px;color:var(--muted);white-space:nowrap}
/* Предупреждение «валюта строк разошлась с валютой кабинета» */
.supana__curwarn{display:flex;align-items:flex-start;gap:8px;padding:9px 12px;border-radius:11px;font-size:12px;
  border:1px solid color-mix(in srgb,var(--warn,#f59e0b) 45%,var(--line));
  background:color-mix(in srgb,var(--warn,#f59e0b) 8%,var(--surface));color:var(--ink)}
.supana__curwarn svg{width:15px;height:15px;flex:none;color:var(--warn,#f59e0b);margin-top:1px}
/* Кнопка правки карточки подрядчика в шапке кабинета (рядом с языком) */
.supcardedit{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;
  background:var(--surface);padding:5px 12px;font:inherit;font-size:12px;font-weight:700;color:var(--muted);cursor:pointer}
.supcardedit:hover{border-color:var(--brand);color:var(--ink)}
.supcardedit.is-on{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 10%,var(--surface));color:var(--brand)}
.supcardedit svg{width:13px;height:13px}
/* Пресеты вкладки: чип с именем + крестик удаления */
.supana__presets{display:flex;flex-wrap:wrap;align-items:center;gap:7px;padding:0 2px}
.supana__preset{display:inline-flex;align-items:stretch;border:1px solid var(--line);border-radius:999px;
  background:var(--surface);overflow:hidden}
.supana__preset.is-on{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 10%,var(--surface))}
.supana__presetuse{border:0;background:none;padding:5px 4px 5px 12px;font:inherit;font-size:12px;font-weight:700;
  color:var(--ink);cursor:pointer}
.supana__preset.is-on .supana__presetuse{color:var(--brand)}
.supana__presetdel{border:0;background:none;padding:0 9px 0 5px;font-size:14px;line-height:1;color:var(--muted);cursor:pointer}
.supana__presetdel:hover{color:var(--down)}
/* Переключатель подвкладок «Заказы | Рекламации» (Task 4) */
.supana__subs{display:inline-flex;gap:4px;padding:3px;border:1px solid var(--line);border-radius:999px;background:var(--surface-2)}
.supana__sub{display:inline-flex;align-items:center;gap:6px;border:0;border-radius:999px;background:none;
  padding:6px 14px;font:inherit;font-size:12px;font-weight:800;color:var(--muted);cursor:pointer}
.supana__sub.is-on{background:var(--surface);color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.08)}
.supana__subn{min-width:18px;height:18px;padding:0 5px;border-radius:9px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--down) 14%,var(--surface));color:var(--down);font-size:10px}
/* Строка выборки: поиск + чипы включённых фильтров */
.supana__filters{display:flex;flex-wrap:wrap;align-items:center;gap:7px;padding:0 2px}
.supana__find{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;
  background:var(--surface);padding:4px 12px;color:var(--muted)}
.supana__find svg{width:13px;height:13px;flex:none}
.supana__find input{border:0;background:none;font:inherit;font-size:12px;color:var(--ink);width:210px;outline:none}
.supana__chipf{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--brand);border-radius:999px;
  background:color-mix(in srgb,var(--brand) 12%,var(--surface));color:var(--brand);
  padding:5px 10px 5px 12px;font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.supana__chipf:hover{background:color-mix(in srgb,var(--brand) 20%,var(--surface))}
.supana__chipfd{color:var(--muted);font-weight:600}
.supana__chipf i{font-style:normal;font-size:14px;line-height:1;opacity:.7}
@media (max-width:760px){ .supana__find input{width:130px} }
/* Пустая выборка (Task 3): несовместимая пара условий вместо пустых блоков секций */
.supana__none{display:flex;flex-direction:column;align-items:center;gap:9px;padding:26px 14px;
  border:1px dashed var(--line);border-radius:14px;color:var(--muted);font-size:12px;text-align:center}
.supana__none svg{width:20px;height:20px}
.supana__none b{color:var(--ink);font-size:13px}
/* Рекламации: строка «за период» над метриками */
.supana__rcshare{margin:0 0 10px;font-size:12px;color:var(--muted)}
.supana__rcshare b{color:var(--ink);font-variant-numeric:tabular-nums}
.supana__rcshare b.is-bad{color:var(--down)}
/* Список выборки (Task 5): шапка «N из M» + сортировки, компактная строка со своими
   кликабельными значениями (этап, контейнер), просроченные — красноватые. */
.supana__lhead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 8px;font-size:12px;color:var(--muted)}
.supana__sorts{display:inline-flex;gap:4px;flex-wrap:wrap}
.supana__sortb{border:1px solid var(--line);border-radius:999px;background:var(--surface);padding:3px 10px;
  font:inherit;font-size:11px;font-weight:700;color:var(--muted);cursor:pointer}
.supana__sortb.is-on{border-color:var(--brand);color:var(--brand-fg)}
.supana__list{display:flex;flex-direction:column;gap:6px;max-height:420px;overflow:auto}
.supana__lrow{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;align-items:center;gap:10px;
  border:1px solid var(--line);border-radius:11px;background:var(--surface);padding:8px 12px}
.supana__lrow.is-late{border-color:color-mix(in srgb,var(--down) 32%,var(--line));
  background:color-mix(in srgb,var(--down) 4%,var(--surface))}
.supana__lmain{min-width:0;display:flex;flex-direction:column;gap:2px;border:0;background:none;padding:0;
  font:inherit;font-size:12px;color:var(--ink);cursor:pointer;text-align:left}
.supana__lmain b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.supana__lmain small{color:var(--muted);font-size:10px}
.supana__ltag{border:1px solid var(--line);border-radius:999px;background:var(--surface-2);padding:3px 9px;
  font:inherit;font-size:10.5px;font-weight:700;color:var(--tone,var(--muted));cursor:pointer;white-space:nowrap}
.supana__ltag:hover{border-color:var(--brand)}
.supana__ltag.is-empty{color:var(--muted);opacity:.6;cursor:default}
.supana__lmoney{font-size:12px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.supana__more{align-self:flex-start;margin-top:8px}
@media (max-width:760px){
  .supana__lrow{grid-template-columns:minmax(0,1fr) auto;row-gap:6px}
  .supana__lmoney{grid-column:2}
  .supana__ltag{grid-column:1/-1;justify-self:start}
}
/* Сроки по этапам: подпись — полоса — число дней */
.supana__funnel{display:flex;flex-direction:column;gap:7px}
.supana__frow{display:grid;grid-template-columns:minmax(180px,260px) 1fr minmax(120px,auto);align-items:center;gap:10px;font-size:12px;
  border:0;background:none;font-family:inherit;font-weight:inherit;line-height:inherit;width:100%;cursor:pointer;padding:2px 0}
.supana__frow.is-empty{opacity:.45}
.supana__frow.is-on .supana__flabel{color:var(--brand);font-weight:800}
.supana__flabel{color:var(--muted);font-weight:600}
.supana__fbar{height:10px;border-radius:5px;background:var(--surface-2);overflow:hidden}
.supana__fbar i{display:block;height:100%;width:var(--w);border-radius:5px;background:color-mix(in srgb,var(--brand) 65%,transparent)}
.supana__fval{white-space:nowrap;color:var(--ink);font-variant-numeric:tabular-nums}
.supana__fval small{color:var(--muted)}
@media (max-width:760px){
  .supana__chart{height:150px}
  .supana__col{min-width:20px}
  .supana__bar{width:5px}
  .supana__frow{grid-template-columns:minmax(0,1fr) auto}
  .supana__fbar{display:none}
}
@media (max-width:760px){
  .supana__secbody{padding:0 11px 12px}
}
.bcard--claim{border-color:color-mix(in srgb,var(--down) 35%,var(--line));
  background:linear-gradient(color-mix(in srgb,var(--down) 5%,transparent),color-mix(in srgb,var(--down) 5%,transparent)) var(--surface)}
@media(max-width:1180px){.supana__stages{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:740px){
  /* этапов семь: на телефоне по два в ряд, иначе подписи не читаются (правило идёт ПОСЛЕ
     общего «четыре в ряд» выше — порядок здесь и есть приоритет) */
  .supana__stages{grid-template-columns:repeat(2,minmax(0,1fr))}
  .supkbmoney{align-items:flex-start;flex-direction:column}.supkbmoney__value{text-align:left}
}
/* Подсказка и подсветка зон перетаскивания. */
.supkb__dhint{margin-top:10px;padding:10px;border:1.5px dashed var(--line);border-radius:12px;
  font-size:11.5px;color:var(--muted);text-align:center;line-height:1.45}
.supkb__dhint svg{width:14px;height:14px;vertical-align:-2px;margin-right:4px}
/* Форма деления в детали карточки. */
.supsplit{margin:10px 0;padding:11px 12px;border:1px solid var(--line);border-radius:13px;background:var(--card2,var(--card))}
.supsplit__h{font-size:12.5px;font-weight:800;display:flex;align-items:center;gap:6px;margin-bottom:8px}
.supsplit__h svg{width:15px;height:15px}
.supsplit__cnt{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700}
.supsplit__cntin{width:76px;padding:6px 8px;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--ink);font:inherit}
.supsplit__qtys{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:7px;margin:9px 0}
.supsplit__q{display:grid;gap:3px;font-size:11px;color:var(--muted)}
.supsplit__qi{padding:6px 8px;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--ink);font:inherit;font-weight:700}
.supsplit__info{margin:0;font-size:11.5px;color:var(--muted)}
.supsplit__info b.is-off{color:#e0533d}
.supsplit__err{margin-top:7px;font-size:11.5px;color:#e0533d}
.supsplit__acts{display:flex;gap:8px;align-items:center;margin-top:10px}
.supsplit__acts .supaccept__btn{width:auto}
.supnext--row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px}
.supnext--row .supaccept__btn{width:auto}
/* Деталь заказа-стопки: позиции с ценой и сроком. */
.supgd__items{margin:12px 0}
.supgd__h{font-size:12px;font-weight:800;display:flex;align-items:center;gap:6px;margin-bottom:7px}
.supgd__h svg{width:14px;height:14px}
.supgd__row{display:flex;flex-wrap:wrap;align-items:end;gap:9px;padding:9px 10px;border:1px solid var(--line);
  border-radius:12px;margin-bottom:7px;background:var(--card)}
.supgd__row.is-flag{border-color:#f59e0b;box-shadow:0 0 0 2px color-mix(in srgb,#f59e0b 18%,transparent)}
.supgd__nm{flex:1 1 190px;min-width:0;font-size:12.5px;font-weight:700}
/* :not(...) — про перевод названия и русский оригинал под ним (supTranslate, 2026-08-06):
   селектор «.supgd__nm span» специфичнее их правил, и без исключения перевод получал бы
   вид подзаголовка вместо названия, а оригинал — чужой размер и насыщенность. */
.supgd__nm span:not([data-suptr]):not([data-suporig]){display:block;font-size:11px;font-weight:600;color:var(--muted);margin-top:2px}
.supgd__f{display:grid;gap:3px;font-size:10.5px;color:var(--muted);flex:0 0 108px}
.supgd__f .suptr2__in{width:100%}
.supgd__ro{font-size:11.5px;color:var(--muted);font-weight:700}
.supgd__flag{color:#f59e0b}
.supgd__flag svg{width:15px;height:15px}
.supgd__move{flex:1 1 100%}
.supgd__sel{width:100%;padding:5px 8px;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--ink);font:inherit;font-size:11.5px}
/* Дерево документов номенклатуры в нижней вкладке «Документы»: название позиции —
   кнопка-аккордеон, под строкой раскрывается блок с подпапками папки-модели и файлами.
   Зоны нажатия крупные (мобильный кабинет), файл — строка на всю ширину. */
.supdocs__t{background:none;border:0;padding:0;font:inherit;font-weight:inherit;color:inherit;text-align:left;cursor:pointer;display:inline-flex;align-items:center;gap:5px;min-height:24px}
.supdocs__t > svg{width:12px;height:12px;flex:none;opacity:.55;transition:transform .15s}
.supdocs__t.is-open > svg{transform:rotate(90deg)}
.supdocs__t:hover,.supdocs__t.is-open{color:var(--brand)}
.supdocs{margin:2px 0 10px;padding:8px 12px;background:var(--surface-2);border-radius:10px}
.supdocs__h{display:flex;align-items:center;gap:6px;font-weight:700;font-size:12px;margin:7px 0 3px}
.supdocs__h > svg{width:13px;height:13px;flex:none}
.supdocs__h b{color:var(--muted);font-weight:600}
.supdocs__sec + .supdocs__sec{margin-top:4px}
.supdocs__f{display:flex;align-items:center;gap:8px;padding:8px 6px;min-height:36px;border-radius:8px;text-decoration:none;color:inherit;font-size:12.5px}
.supdocs__f:hover{background:color-mix(in srgb,var(--brand) 8%,transparent)}
.supdocs__f > svg{width:14px;height:14px;flex:none;opacity:.7}
.supdocs__f span{min-width:0;overflow-wrap:anywhere}
.supdocs__none{color:var(--muted);font-size:12.5px;margin:4px 0}
.supneg--flag{outline:2px solid #f59e0b;outline-offset:2px;border-radius:14px}
.supneg--rej .supneg__clar{background:color-mix(in srgb,#94a3b8 14%,transparent)}
/* Карточка доски «Тест»: состав группового заказа и сводка по разделённой потребности. */
.tbc__gitems{margin:8px 0;padding:8px 10px;border-radius:11px;background:color-mix(in srgb,var(--brand) 6%,transparent)}
.tbc__gh{font-size:11.5px;font-weight:800;display:flex;align-items:center;gap:6px;margin-bottom:5px}
.tbc__gh svg{width:14px;height:14px}
.tbc__gi{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;font-size:11.5px;padding:3px 0}
.tbc__gi span{min-width:0;white-space:normal;overflow-wrap:anywhere;line-height:1.3}
.tbc__gi b{flex:none;white-space:nowrap;line-height:1.3}
.tbc__gi--more{color:var(--muted)}
.tbc__gmore summary{display:flex;align-items:center;justify-content:space-between;gap:6px;min-height:22px;color:var(--brand);font-size:11px;font-weight:750;cursor:pointer;list-style:none}
.tbc__gmore summary::-webkit-details-marker{display:none}
.tbc__gmore summary svg{width:13px;height:13px;transition:transform .16s ease}
.tbc__gmore[open] summary svg{transform:rotate(180deg)}
.tbc__split{margin:8px 0;padding:7px 10px;border-radius:10px;font-size:11.5px;line-height:1.45;
  background:color-mix(in srgb,#0ea5e9 10%,transparent);color:var(--ink)}
.tbc__split svg{width:14px;height:14px;vertical-align:-2px;margin-right:4px}
.bcard--grouporder{border-left:3px solid var(--brand)}
/* Обзор группового предложения в детали карточки. */
.tbrev__items{display:grid;gap:5px;margin:8px 0}
.tbrev__it{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:6px 9px;border:1px solid var(--line);
  border-radius:10px;font-size:12px;cursor:pointer}
.tbrev__it:hover{border-color:var(--brand)}
.tbrev__cb{width:15px;height:15px;flex:none;accent-color:var(--brand)}
.tbrev__in{flex:1 1 160px;min-width:0;font-weight:700}
.tbrev__iq,.tbrev__ip{font-size:11.5px;color:var(--muted)}
.tbrev__note{margin:8px 0 0;font-size:11.5px;color:var(--muted)}
/* Панели доски: «Исходные заказы» и «Отклонённые потребности». */
.tbpan{flex:0 0 auto;width:64px;transition:width .18s ease}
.tbpan.is-open{width:290px}
.tbpan__head{padding:0}
.tbpan__toggle{display:flex;align-items:center;gap:7px;width:100%;padding:10px 9px;border:0;background:none;
  color:var(--ink);font:inherit;cursor:pointer;text-align:left}
.tbpan:not(.is-open) .tbpan__toggle{writing-mode:vertical-rl;justify-content:flex-start;height:210px}
.tbpan__chev{display:inline-flex;transition:transform .18s ease;color:var(--muted)}
.tbpan__chev svg{width:15px;height:15px}
.tbpan.is-open .tbpan__chev{transform:rotate(180deg)}
.tbpan__toggle .col__name{font-size:12px;font-weight:800;white-space:nowrap}
.tbpan__body{display:grid;gap:8px;padding:4px 8px 10px}
.tbpan__card{padding:9px 10px;border:1px solid var(--line);border-radius:12px;background:var(--card);cursor:pointer}
.tbpan__card:hover{border-color:var(--tone,var(--brand))}
.tbpan__t{margin:0;font-size:12.5px;font-weight:700;line-height:1.3}
.tbpan__sub{margin:3px 0 0;font-size:11px;color:var(--muted)}
.tbpan__note{margin:6px 0 0;font-size:11px;line-height:1.4;color:var(--ink);opacity:.85}
.tbpan__links{margin:6px 0 0;font-size:11px;color:var(--muted);display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.tbpan__links svg{width:13px;height:13px}
.tbpan__lnk{border:0;background:none;padding:0;font:inherit;font-size:11.5px;font-weight:700;color:var(--brand);cursor:pointer;text-decoration:underline}
.tbpan__acts{display:flex;gap:6px;align-items:center;margin-top:8px}
.tbpan__btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:6px 8px;border-radius:9px;
  border:1px solid var(--line);background:var(--card);color:var(--ink);font:inherit;font-size:11.5px;font-weight:700;cursor:pointer}
.tbpan__btn:hover{border-color:var(--brand);color:var(--brand)}
.tbpan__btn svg{width:13px;height:13px}
.tbpan__x{flex:none;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:8px;
  border:1px solid var(--line);background:var(--card);color:var(--muted);cursor:pointer}
.tbpan__x:hover{border-color:#e0533d;color:#e0533d}
.tbpan__x svg{width:13px;height:13px}
/* Построчный отчёт о расхождении (склад приёмки, групповой заказ). */
/* .rcvrow* (построчная форма расхождения) удалены 2026-07-30: карточка приёмки
   всегда однопозиционная — групповой заказ расформировывается на arrived */
@media(max-width:720px){.tbpan.is-open{width:82vw}.supgd__f{flex:1 1 46%}}
/* Отказ поставщика: потребность вернулась в «Что необходимо купить» — подсветка,
   а не задача (в «Нужно действие» такая карточка не попадает). */
.tbc__rejnote{display:flex;align-items:flex-start;gap:6px;margin:8px 0;padding:7px 10px;border-radius:10px;
  font-size:11.5px;font-weight:600;line-height:1.4;
  background:color-mix(in srgb,#e0533d 12%,transparent);color:var(--ink)}
.tbc__rejnote svg{width:14px;height:14px;flex:none;margin-top:1px;color:#e0533d}
.bcard--suprej{border-left:3px solid #e0533d}
/* Список «что будет удалено» в подтверждении полной чистки песочницы. */
.purge__list{margin:8px 0 12px;padding-left:18px;display:grid;gap:5px;font-size:13px;line-height:1.45}
.purge__list b{font-variant-numeric:tabular-nums}
/* Деление заявки прямо в окне «Отправить на доску Тест» (отчёт «Закупки»). */
.psplit{margin:10px 0;padding:10px 12px;border:1px solid var(--line);border-radius:12px}
.psplit__on{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;cursor:pointer}
.psplit__on input{width:16px;height:16px;accent-color:var(--brand)}
.psplit__body{margin-top:9px}
.psplit__cnt{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700}
.psplit__cnt input{width:76px;padding:6px 8px;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--ink);font:inherit}
.psplit__qtys{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:7px;margin:9px 0}
.psplit__q{display:grid;gap:3px;font-size:11px;color:var(--muted)}
.psplit__q input{padding:6px 8px;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--ink);font:inherit;font-weight:700}
.psplit__info{margin:0;font-size:12px;color:var(--muted)}
.psplit__info b.is-off{color:#e0533d}
/* Заказы на этапе «План» собираются кнопкой «+» и выбором позиций списком (без drag-n-drop). */
.supkb__add{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;margin-right:4px;
  border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--tone,var(--brand));cursor:pointer}
.supkb__add:hover{border-color:var(--tone,var(--brand));background:color-mix(in srgb,var(--tone,#0ea5e9) 10%,transparent)}
.supkb__add svg{width:14px;height:14px}
.supgc__empty{margin:8px 0 0;font-size:11.5px;line-height:1.4;color:var(--muted)}
.supgc__empty svg{width:13px;height:13px;vertical-align:-2px;margin-right:4px}
.supgd__add{display:grid;gap:5px;margin-top:9px;font-size:11.5px;font-weight:700;color:var(--muted)}
.supgd__add svg{width:13px;height:13px;vertical-align:-2px;margin-right:3px}
.supgd__add .supgd__sel{font-weight:600}
/* ── «ПОЛКИ» СВОБОДНЫХ ПОЗИЦИЙ (2026-08-24, вариант А). Список вместо нативного select:
   миниатюра фото, название, количество, номер исходного заказа; отмечают чекбоксами и
   добавляют пачкой. Миниатюру растим до 44 px — на 34 фото техники неразличимо. */
.supfree{margin-top:10px;border:1px solid var(--line);border-radius:12px;background:var(--bg);padding:10px}
.supfree__hd{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;color:var(--muted)}
.supfree__hd svg{width:13px;height:13px;flex:none}
.supfree__n{margin-left:auto;font-weight:600;color:var(--ink-soft)}
.supfree__find{display:flex;align-items:center;gap:7px;margin-top:8px;padding:0 9px;border:1px solid var(--line);
  border-radius:9px;background:var(--surface)}
.supfree__find svg{width:13px;height:13px;flex:none;color:var(--muted)}
.supfree__q2{flex:1;min-width:0;border:0;background:none;color:var(--ink);font:inherit;font-size:12.5px;
  padding:8px 0;outline:none}
.supfree__list{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.supfree__row{display:flex;align-items:center;gap:10px;padding:7px 9px;border-radius:10px;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);transition:.15s}
.supfree__row.is-over{display:none}
.supfree__row:hover{border-color:color-mix(in srgb,var(--brand) 40%,var(--line))}
.supfree__row:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.supfree__row.is-on{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 9%,var(--surface))}
.supfree__box{width:17px;height:17px;flex:none;border-radius:5px;border:1.5px solid var(--muted);
  display:grid;place-items:center;color:transparent}
.supfree__box svg{width:11px;height:11px}
.supfree__row.is-on .supfree__box{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.supfree__ph{flex:none;display:grid;place-items:center;width:44px;height:44px}
.supfree__ph .supnph__mini{width:44px;height:44px;margin:0;border-radius:8px}
.supfree__noph{display:grid;place-items:center;width:44px;height:44px;border-radius:8px;padding:2px;
  border:1px solid var(--line);background:var(--surface-2);color:var(--muted);
  font-size:9.5px;font-weight:700;line-height:1.15;text-align:center;overflow-wrap:anywhere}
.supfree__noph svg{width:17px;height:17px}
.supfree__nm{min-width:0;flex:1}
.supfree__nm b{display:block;font-size:12.5px;font-weight:600;line-height:1.3;overflow-wrap:anywhere}
.supfree__nm span{display:block;margin-top:2px;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.supfree__q{flex:none;font-size:12.5px;font-weight:800;white-space:nowrap;font-variant-numeric:tabular-nums}
.supfree__more{margin-top:7px;width:100%;padding:7px;border:1px dashed var(--line);border-radius:9px;
  background:none;color:var(--ink-soft);font:inherit;font-size:11.5px;font-weight:700;cursor:pointer}
.supfree__more:hover{border-color:var(--brand);color:var(--ink)}
.supfree__none{margin:8px 2px 0;font-size:11.5px;color:var(--muted)}
.supfree__bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px;padding-top:10px;
  border-top:1px solid var(--line)}
.supfree__add{border:0;border-radius:9px;padding:9px 13px;background:var(--brand);color:var(--brand-ink);
  font:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
.supfree__add:disabled{opacity:.45;cursor:default}
.supfree__clr{border:1px solid var(--line);border-radius:9px;padding:8px 11px;background:none;color:var(--ink-soft);
  font:inherit;font-size:12px;font-weight:600;cursor:pointer}
.supfree__hint{font-size:11px;color:var(--muted);margin-left:auto}
@media (max-width:520px){
  .supfree__hint{display:none}
  .supfree__ph,.supfree__ph .supnph__mini,.supfree__noph{width:38px;height:38px}
}
.supgd__note{margin:8px 0 0;font-size:11.5px;color:var(--muted)}
.tbc__part{margin-left:6px;padding:1px 6px;border-radius:6px;font-size:10.5px;font-weight:700;background:color-mix(in srgb,var(--brand) 14%,transparent);color:var(--brand)}

/* ================= Раздел «Почта» (mail.js, docs/MAIL.md) ================= */
.mailv{max-width:980px;margin:0 auto}
.mailv__head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.mailv__h{display:flex;align-items:center;gap:9px;margin:0;font-size:22px}
.mailv__h svg{width:22px;height:22px;color:var(--brand)}
.mailv__sub{margin:4px 0 0;font-size:12.5px;color:var(--muted)}
.mailv__q{flex:0 1 320px;min-width:200px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);font:inherit;font-size:13px;padding:8px 12px}
.mailv__banner{display:flex;align-items:center;gap:8px;margin-bottom:12px;padding:9px 12px;border:1px solid #f59e0b55;background:#f59e0b14;border-radius:var(--r-sm);font-size:12.5px;color:var(--ink-soft)}
.mailv__banner svg{width:15px;height:15px;color:#f59e0b;flex:none}
.mailv__list{display:grid;gap:8px}
.mailv__dim{margin:6px 0;font-size:12.5px;color:var(--muted)}
.mailv__foot{margin-top:12px;text-align:center}

/* строка треда */
.mailt{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);overflow:hidden}
.mailt__row{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr) auto;gap:12px;align-items:center;width:100%;padding:10px 12px;border:none;background:transparent;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.mailt__row:hover{background:var(--surface-2)}
.mailt__subj{font-size:13px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mailt__n{display:inline-block;min-width:18px;padding:0 5px;border-radius:9px;background:var(--surface-2);border:1px solid var(--line);font-size:11px;font-weight:700;color:var(--muted);text-align:center}
.mailt__snip{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mailt__meta{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--muted);white-space:nowrap}
.mailt__lnkc{display:inline-flex;align-items:center;gap:3px;color:var(--brand);font-weight:700}
.mailt__lnkc svg{width:12px;height:12px}
.mailt__body{border-top:1px solid var(--line);padding:12px}
@media(max-width:640px){.mailt__row{grid-template-columns:minmax(0,1fr) auto}.mailt__snip{display:none}}

/* письма треда */
.mailt__msgs{display:grid;gap:8px;max-height:420px;overflow:auto}
.mailm{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2);padding:9px 12px}
.mailm--out{background:var(--surface);border-style:dashed}
.mailm__meta{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:var(--muted)}
.mailm__out{display:inline-flex;align-items:center;gap:5px;color:var(--brand);font-weight:700}
.mailm__out svg{width:13px;height:13px}
.mailm__addr{color:var(--muted);font-size:11.5px}
.mailm__cc{margin-top:2px;font-size:11.5px;color:var(--muted)}
.mailm__ts{white-space:nowrap}
.mailm__body{margin-top:6px;font-size:12.5px;line-height:1.55;color:var(--ink-soft);word-break:break-word}
.mailm__atts{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.mailm__att{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border:1px solid var(--line);border-radius:9px;background:var(--surface);font-size:11.5px;color:var(--ink);text-decoration:none}
.mailm__att:hover{border-color:var(--brand);color:var(--brand)}
.mailm__att svg{width:13px;height:13px;color:var(--muted)}
.mailm__att.is-dead{opacity:.55;cursor:default}
.mailm__attsz{color:var(--muted)}
.mailm__qbtn{display:inline-flex;align-items:center;gap:5px;margin-top:8px;border:none;background:transparent;color:var(--muted);font:inherit;font-size:11.5px;font-weight:600;cursor:pointer;padding:0;border-bottom:1px dashed currentColor}
.mailm__qbtn:hover,.mailm__qbtn.is-open{color:var(--ink)}
.mailm__qbtn svg{width:12px;height:12px}
.mailm__quote{margin-top:8px;padding:8px 10px;border-left:3px solid var(--line);font-size:12px;line-height:1.5;color:var(--muted);max-height:340px;overflow:auto;word-break:break-word}
.mailm__orig{display:inline-flex;align-items:center;gap:5px;margin-top:8px;border:1px solid var(--line);background:var(--surface);color:var(--muted);border-radius:8px;padding:3px 9px;font:inherit;font-size:12px;font-weight:600;cursor:pointer}
.mailm__orig:hover{color:var(--ink)}
.mailm__orig svg{width:14px;height:14px}
.mailm__origbox{margin-top:8px}
.mailm__frame{width:100%;height:420px;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff}

/* ответ и привязки */
.mailt__reply{margin-top:10px}
.mailt__ta{width:100%;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);font:inherit;font-size:13px;padding:8px 12px;resize:vertical}
.mailt__replyrow{display:flex;align-items:center;gap:10px;margin-top:6px}
.mailt__send{display:inline-flex;align-items:center;gap:6px}
.mailt__send svg{width:14px;height:14px}
.mailt__hint{font-size:12px;color:var(--muted)}
.mailt__links{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px;padding-top:10px;border-top:1px dashed var(--line)}
.mailt__link{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border:1px solid var(--brand);border-radius:9px;color:var(--brand);font-size:11.5px;font-weight:700}
.mailt__link svg{width:12px;height:12px}
.mailt__lnka{display:inline-flex;align-items:center;gap:5px;color:inherit;text-decoration:none}
.mailt__lnka:hover{text-decoration:underline}
.mailt__unlink{border:none;background:transparent;color:inherit;font:inherit;font-size:14px;line-height:1;cursor:pointer;padding:0 0 0 2px;opacity:.7}
.mailt__unlink:hover{opacity:1}
.mailt__linkbtn{display:inline-flex;align-items:center;gap:5px;border:1px dashed var(--line);background:transparent;color:var(--muted);border-radius:9px;padding:3px 9px;font:inherit;font-size:11.5px;font-weight:600;cursor:pointer}
.mailt__linkbtn:hover{color:var(--ink);border-color:var(--ink)}
.mailt__linkbtn svg{width:12px;height:12px}
.mailt__picker{flex-basis:100%}
.mailt__pin{width:100%;margin-top:6px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);font:inherit;font-size:13px;padding:7px 11px}
.mailt__pres{display:grid;gap:4px;margin-top:6px;max-height:240px;overflow:auto}
.mailt__pcard{display:block;width:100%;text-align:left;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--ink);font:inherit;font-size:12.5px;padding:7px 10px;cursor:pointer}
.mailt__pcard:hover{border-color:var(--brand)}

/* блок «Почта» в детали карточки «Тест» */
.tbmailx{margin:8px 0;padding:12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface)}
.tbmailx .mailt{background:var(--surface-2)}
.tbmailx__list{display:grid;gap:6px}
.tbmailx__acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.tbmailx__acts .cform__cancel{display:inline-flex;align-items:center;gap:6px}
.tbmailx__acts svg{width:14px;height:14px}
.tbmailx__panel{margin-top:8px}
.tbmailx__form{display:grid;gap:6px}

/* значок ✉ на плитке доски «Тест» */
.tbc__mailn{display:inline-flex;align-items:center;gap:3px;margin-left:8px;color:var(--brand);font-size:11px;font-weight:700;vertical-align:1px}
.tbc__mailn svg{width:12px;height:12px}

/* ===== Закупки → вкладка «Анализ от ИИ» (purchai.js) ===== */
.purch-viewtabs { margin: 2px 0 14px; }
.pai-wrap { display: flex; flex-direction: column; gap: 14px; }
.pai-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pai-bar__sp { flex: 1; }
.pai-sel { padding: 7px 10px; border: 1px solid var(--line, #e2e0dc); border-radius: 10px; background: var(--card, #fff); font: inherit; color: inherit; }
.pai-meta { font-size: 13px; color: var(--muted, #8a8782); line-height: 1.5; }
.pai-meta b { color: inherit; }
.pai-note { font-size: 12.5px; color: var(--muted, #8a8782); display: flex; gap: 6px; align-items: baseline; }
.pai-note svg { width: 13px; height: 13px; flex: none; transform: translateY(2px); }
.pai-demo { display: inline-block; font-size: 10.5px; font-weight: 600; color: #9a6b00; background: #fdf3d8; border: 1px solid #f0dfae; border-radius: 6px; padding: 1px 6px; margin-left: 6px; vertical-align: middle; white-space: nowrap; cursor: help; }
.pai-kpis { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.pai-kpi__sub { font-size: 11.5px; color: var(--muted, #8a8782); margin-top: 4px; line-height: 1.35; }
.pai-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.pai-cols--2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.pai-card { background: var(--card, #fff); border: 1px solid var(--line, #e2e0dc); border-radius: 14px; padding: 14px 16px; min-width: 0; }
.pai-card--wide { grid-column: 1 / -1; }
.pai-card__h { font-weight: 700; font-size: 14px; margin-bottom: 10px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.pai-unit { font-weight: 400; font-size: 12px; color: var(--muted, #8a8782); }
.pai-brow { display: grid; grid-template-columns: minmax(110px, 42%) 1fr 64px; gap: 8px; align-items: center; padding: 3px 0; font-size: 12.5px; }
.pai-brow__l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pai-rank { display: inline-block; width: 18px; color: var(--muted, #8a8782); font-size: 11px; }
.pai-brow__track { background: var(--line, #eeece8); border-radius: 5px; height: 10px; overflow: hidden; }
.pai-brow__bar { height: 100%; border-radius: 5px; background: #8a8782; }
.pai-brow__bar.is-bad { background: #e2563f; }
.pai-brow__bar.is-warn { background: #e8a13c; }
.pai-brow__bar.is-ok { background: #2ca36a; }
.pai-brow__bar.is-info { background: #2f6df0; }
.pai-brow__v { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.pai-find { border: 1px solid var(--line, #e2e0dc); border-radius: 10px; margin-bottom: 8px; overflow: hidden; }
.pai-find__h { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 12px; background: none; border: 0; font: inherit; text-align: left; cursor: pointer; }
.pai-find__ic { width: 15px; height: 15px; flex: none; }
.pai-find.is-crit .pai-find__ic { color: #e2563f; }
.pai-find.is-warn .pai-find__ic { color: #e8a13c; }
.pai-find__t { flex: 1; font-weight: 600; font-size: 13px; }
.pai-find__chev { width: 14px; height: 14px; color: var(--muted, #8a8782); transition: transform .15s; }
.pai-find.is-open .pai-find__chev { transform: rotate(90deg); }
.pai-find__b { padding: 0 12px 12px; font-size: 13px; line-height: 1.55; }
.pai-find__b p { margin: 0 0 8px; }
.pai-lims { margin: 0; padding-left: 18px; }
.pai-lims li { margin-bottom: 5px; }
.pai-tblwrap { overflow-x: auto; }
.pai-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.pai-tbl th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted, #8a8782); padding: 6px 8px; border-bottom: 1px solid var(--line, #e2e0dc); white-space: nowrap; }
.pai-tbl td { padding: 7px 8px; border-bottom: 1px solid var(--line, #f0eeea); vertical-align: top; }
.pai-td-pr { color: var(--muted, #8a8782); font-variant-numeric: tabular-nums; }
.pai-td-num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.pai-td-name { min-width: 180px; }
.pai-nm { font-weight: 600; }
.pai-sub { font-size: 11.5px; color: var(--muted, #8a8782); margin-top: 2px; }
.pai-nosite { color: #e2563f; font-weight: 600; }
.pai-td-reason { min-width: 220px; max-width: 420px; }
.pai-td-empty { text-align: center; color: var(--muted, #8a8782); padding: 18px 8px; }
.pai-act { display: inline-block; font-size: 11px; font-weight: 600; border-radius: 7px; padding: 2px 8px; white-space: nowrap; }
.pai-act.is-bad { background: #fde3dd; color: #b3341c; }
.pai-act.is-warn { background: #fdf3d8; color: #9a6b00; }
.pai-act.is-info { background: #e4edfd; color: #2050b8; }
/* Сводка «Пожелания» (вкладка отчёта «Закупки», wishes.js, 2026-08-13) — список поверх .pai-* */
.pwish-row { cursor: pointer; }
.pwish-row:hover td { background: color-mix(in srgb, var(--brand) 5%, transparent); }
.pwish-badge { display: inline-block; font-size: 11px; font-weight: 700; white-space: nowrap;
  border-radius: 7px; padding: 2px 8px; color: var(--c, #94a3b8);
  background: color-mix(in srgb, var(--c, #94a3b8) 14%, transparent); }
.pai-conf { display: inline-block; font-size: 11px; font-weight: 600; border-radius: 7px; padding: 2px 8px; white-space: nowrap; }
.pai-conf.is-ok { background: #ddf3e7; color: #1d7a4c; }
.pai-conf.is-warn { background: #fdf3d8; color: #9a6b00; }
.pai-conf.is-bad { background: #fde3dd; color: #b3341c; }
.pai-conf.is-info { background: #e4edfd; color: #2050b8; }
.pai-actbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.pai-q { flex: 1; min-width: 200px; padding: 7px 11px; border: 1px solid var(--line, #e2e0dc); border-radius: 10px; font: inherit; background: var(--card, #fff); color: inherit; }
.pai-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.pai-chip { border: 1px solid var(--line, #e2e0dc); background: var(--card, #fff); border-radius: 999px; padding: 4px 11px; font: inherit; font-size: 12px; cursor: pointer; color: inherit; }
.pai-chip.is-active { border-color: #2f6df0; color: #2f6df0; font-weight: 600; background: #eef3fe; }
.pai-live { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line, #e2e0dc); background: var(--card, #fff); border-radius: 8px; padding: 3px 8px; font: inherit; font-size: 11.5px; cursor: pointer; color: inherit; text-decoration: none; white-space: nowrap; }
.pai-live svg { width: 12px; height: 12px; }
.pai-live:hover { border-color: #2f6df0; color: #2f6df0; }
.pai-seasons { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.pai-season { border: 1px solid var(--line, #e2e0dc); border-radius: 10px; padding: 10px 12px; font-size: 12.5px; }
.pai-season.is-main { border-color: #e8a13c; background: #fffaf0; }
.pai-season__h { font-weight: 700; margin-bottom: 6px; display: flex; align-items: center; gap: 5px; }
.pai-season__fire { width: 14px; height: 14px; color: #e8623c; }
.pai-season__row span { color: var(--muted, #8a8782); }
.pai-season__order b { color: #b3341c; }
.pai-season__note { margin-top: 5px; color: var(--muted, #8a8782); font-size: 11.5px; line-height: 1.4; }
.pai-season__src { margin-top: 5px; font-size: 11px; }
.pai-season__src a { color: #2f6df0; text-decoration: none; }
.pai-season__src svg { width: 10px; height: 10px; }
.pai-comp { border-top: 1px solid var(--line, #f0eeea); padding: 9px 0; }
.pai-comp:first-of-type { border-top: 0; }
.pai-comp__h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pai-comp__n { font-weight: 600; font-size: 13px; flex: 1; min-width: 200px; }
.pai-comp__our { font-size: 12.5px; }
.pai-offer { display: flex; gap: 12px; align-items: baseline; font-size: 12px; padding: 3px 0 0 14px; flex-wrap: wrap; }
.pai-offer__s a { color: #2f6df0; text-decoration: none; }
.pai-offer__s svg { width: 10px; height: 10px; }
.pai-offer__p { font-weight: 600; font-variant-numeric: tabular-nums; }
.pai-offer__d { color: var(--muted, #8a8782); }
.pai-panel { border: 1px dashed var(--line, #cfcdc8); border-radius: 12px; padding: 12px 14px; background: var(--card, #fff); }
.pai-panel__h { font-weight: 700; font-size: 13px; margin-bottom: 8px; }
.pai-ta { width: 100%; min-height: 140px; font-family: ui-monospace, monospace; font-size: 12px; border: 1px solid var(--line, #e2e0dc); border-radius: 8px; padding: 8px; box-sizing: border-box; background: var(--card, #fff); color: inherit; }
.pai-panel__row { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.pai-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line, #e2e0dc); background: var(--card, #fff); border-radius: 10px; padding: 7px 13px; font: inherit; font-size: 12.5px; cursor: pointer; color: inherit; }
.pai-btn svg { width: 13px; height: 13px; }
.pai-btn:hover { border-color: #2f6df0; color: #2f6df0; }
.pai-btn.is-primary { background: #2f6df0; border-color: #2f6df0; color: #fff; }
.pai-btn.is-primary:hover { background: #2050b8; color: #fff; }
.pai-btn.is-danger:hover { border-color: #e2563f; color: #e2563f; }
.pai-btn[disabled] { opacity: .55; cursor: default; pointer-events: none; }
.pai-hint { font-size: 11.5px; color: var(--muted, #8a8782); }
.pai-pre { max-height: 340px; overflow: auto; font-family: ui-monospace, monospace; font-size: 11.5px; line-height: 1.45; background: var(--bg, #faf9f7); border: 1px solid var(--line, #e2e0dc); border-radius: 8px; padding: 10px; white-space: pre-wrap; }
/* Отметки на карточках «Не обработано» в ЛК и панель «Сгруппировать в заказ». */
.supboard .bcard--supnew{position:relative}
.supkb__pick{position:absolute;top:8px;right:8px;z-index:2;display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:7px;background:var(--card);border:1px solid var(--line);cursor:pointer}
.supkb__pick:hover{border-color:var(--tone,var(--brand))}
.supkb__pick input{width:14px;height:14px;margin:0;accent-color:var(--brand);cursor:pointer}
.bcard--supnew.is-picked{border-color:var(--tone,var(--brand));box-shadow:0 0 0 2px color-mix(in srgb,var(--tone,#0ea5e9) 22%,transparent)}
.suppickbar{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:12px;
  padding:10px 14px;border-radius:14px;border:1px solid var(--line);background:var(--card);box-shadow:0 12px 34px rgba(0,0,0,.22)}
.suppickbar__n{font-size:13px;font-weight:800;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.suppickbar__n svg{width:15px;height:15px;color:var(--brand)}
.suppickbar__go{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border:0;border-radius:10px;cursor:pointer;
  background:var(--brand);color:#fff;font:inherit;font-size:13px;font-weight:700;white-space:nowrap}
.suppickbar__go:hover{filter:brightness(1.07)}
.suppickbar__go svg{width:15px;height:15px}
.suppickbar__x{border:0;background:none;padding:4px 6px;font:inherit;font-size:12.5px;color:var(--muted);cursor:pointer;text-decoration:underline;white-space:nowrap}
.suppickbar__x:hover{color:var(--ink)}
@media(max-width:560px){.suppickbar{left:8px;right:8px;transform:none;flex-wrap:wrap;justify-content:center}}
/* ═══ Карточка заказа доски «Тест»: шире + плашки коммуникаций над окном (2026-07-28) ═══ */
/* Окно карточки заказа немного шире обычного (440 → 600) и не обрезает выступающие плашки. */
.modal__card:has(.tbcomm__tabs){max-width:600px;overflow:visible}
.modal__card:has(.tbcomm__tabs) .modal__head{border-top-left-radius:18px;border-top-right-radius:18px}
.modal__card:has(.tbcomm__tabs) .modal__body{border-bottom-left-radius:18px;border-bottom-right-radius:18px}
/* Три плашки-закладки СБОКУ СПРАВА, за пределами карточки: вертикальный столбик,
   прижатый к правой кромке окна (как боковые закладки). */
/* ── ДОК ПЕРЕПИСКИ КАРТОЧКИ ЗАКАЗА (2026-08-24) ────────────────────────────────────────
   Геометрия НАМЕРЕННО повторяет чат кабинета (.supov__shell / .supov__chatdock): та же
   ширина карточки 1120, тот же корешок 44px, та же раскрытая панель 300-350px, тот же
   радиус и тень. Один визуальный язык — меняешь там, меняй и здесь.
   Переключатель разделов живёт ВНУТРИ дока: до этой правки закладки стояли абсолютом
   справа ЗА пределами окна (right:-152px) и на узком экране уезжали за край. */
.tbcomm__shell{position:relative;width:100%;max-width:1120px;height:88vh;max-height:88vh;min-height:0;
  display:grid;grid-template-columns:minmax(0,1fr);gap:10px;transition:max-width .2s ease}
.tbcomm__shell.has-comm{max-width:1174px;grid-template-columns:minmax(0,1120px) 44px}
.tbcomm__shell.has-comm.is-open{max-width:1480px;grid-template-columns:minmax(0,1120px) minmax(300px,350px)}
.tbcomm__shell>.modal__card{max-width:none;height:100%;max-height:100%}
.tbcomm__dock{min-width:0;min-height:0;height:100%;display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:16px;background:var(--surface);
  box-shadow:0 20px 52px rgba(0,0,0,.18);overflow:hidden}
.tbcomm__peek{width:100%;height:100%;border:0;background:var(--surface);color:var(--muted);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;padding:10px 5px;
  font:inherit;font-size:11px;font-weight:800;cursor:pointer}
.tbcomm__peek:hover{color:var(--brand);background:var(--surface-2)}
.tbcomm__peek svg{width:17px;height:17px;flex:none}
.tbcomm__peek>span{writing-mode:vertical-rl;letter-spacing:.07em}
.tbcomm__peekn{min-width:20px;height:20px;padding:0 5px;border-radius:10px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--brand) 14%,var(--surface));color:var(--brand-fg);font-size:10px}
/* переключатель разделов — сегментами в шапке дока */
.tbcomm__switch{flex:none;display:flex;gap:4px;padding:8px;border-bottom:1px solid var(--line)}
.tbcomm__switch .tbcomm__tab{flex:1;min-width:0;justify-content:center;padding:7px 6px;border-radius:9px;
  border-left:1px solid var(--line);box-shadow:none;font-size:11.5px;white-space:nowrap;overflow:hidden}
.tbcomm__switch .tbcomm__tab svg{width:13px;height:13px}
/* сама панель внутри дока занимает всю высоту, а прокручивается ЛЕНТА чата, не док */
.tbcomm__dock .tbcomm{flex:1;min-height:0;margin:0;border:0;border-radius:0;display:flex;flex-direction:column}
.tbcomm__dock .tbcomm__hd{flex:none;flex-wrap:nowrap}
.tbcomm__dock .tbcomm__t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tbcomm__dock .supdcmt__note{display:none}
.tbcomm__dock .k5chat{flex:1;min-height:0;display:flex;flex-direction:column}
.tbcomm__dock .k5chat__feed{flex:1;min-height:0;max-height:none}
.tbcomm__dock .tbcomm__logists,.tbcomm__dock .tbcomm__early{overflow:auto}
@media (max-width:1100px){
  /* узкий экран: док уходит под карточку — колонкой, а не за край окна */
  .tbcomm__shell.has-comm,.tbcomm__shell.has-comm.is-open{max-width:1120px;grid-template-columns:minmax(0,1fr)}
  .tbcomm__shell{height:auto;max-height:92vh;overflow:auto}
  .tbcomm__shell>.modal__card{height:auto}
  .tbcomm__dock{height:auto;max-height:70vh}
  .tbcomm__peek{flex-direction:row;height:auto;padding:9px}
  .tbcomm__peek>span{writing-mode:horizontal-tb}
}
.tbcomm__tabs{position:absolute;top:14px;right:-152px;display:flex;flex-direction:column;gap:6px;width:152px;z-index:2}
.tbcomm__tab{display:inline-flex;align-items:center;gap:7px;padding:9px 12px;border-radius:0 12px 12px 0;cursor:pointer;
  border:1px solid var(--line);border-left:0;background:var(--surface);color:var(--muted);
  font:inherit;font-size:12.5px;font-weight:700;text-align:left;box-shadow:6px 0 18px rgba(0,0,0,.12)}
.tbcomm__tab:hover{color:var(--tone);border-color:color-mix(in srgb,var(--tone) 45%,var(--line))}
.tbcomm__tab.is-on{background:var(--tone);border-color:var(--tone);color:#fff}
.tbcomm__tab svg{width:14px;height:14px;flex:none}
/* Панель раздела внутри карточки. */
.tbcomm{margin:0 0 14px;border:1px solid color-mix(in srgb,var(--tone) 35%,var(--line));border-radius:14px;overflow:hidden}
.tbcomm__hd{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:9px 11px;
  background:color-mix(in srgb,var(--tone) 10%,transparent);border-bottom:1px solid color-mix(in srgb,var(--tone) 22%,var(--line))}
.tbcomm__t{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:800}
.tbcomm__t svg{width:15px;height:15px;color:var(--tone)}
.tbcomm__tabs2{margin-left:auto;display:inline-flex;gap:4px}
.tbcomm__tab2{display:inline-flex;align-items:center;gap:5px;padding:5px 9px;border-radius:9px;cursor:pointer;
  border:1px solid var(--line);background:var(--card);color:var(--muted);font:inherit;font-size:11.5px;font-weight:700}
.tbcomm__tab2.is-on{background:var(--tone);border-color:var(--tone);color:#fff}
.tbcomm__tab2 svg{width:13px;height:13px}
.tbcomm__x{border:1px solid var(--line);background:var(--card);color:var(--muted);width:24px;height:24px;
  border-radius:8px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.tbcomm__x:hover{color:#e0533d;border-color:#e0533d}
.tbcomm__x svg{width:12px;height:12px}
/* Чат. */
.tbcomm__chat{display:grid;gap:8px;padding:11px;max-height:260px;overflow:auto}
.tbcomm__msg{max-width:86%;padding:8px 10px;border-radius:12px;background:var(--surface-2,var(--card));border:1px solid var(--line)}
.tbcomm__msg.is-me{margin-left:auto;background:color-mix(in srgb,var(--tone) 12%,transparent);border-color:color-mix(in srgb,var(--tone) 28%,var(--line))}
.tbcomm__mhd{display:flex;justify-content:space-between;gap:10px;font-size:11px;color:var(--muted);margin-bottom:3px}
.tbcomm__mhd b{color:var(--ink);font-size:11.5px}
.tbcomm__mtxt{margin:0;font-size:12.5px;line-height:1.45}
.tbcomm__send{display:flex;gap:8px;padding:10px 11px;border-top:1px solid var(--line)}
.tbcomm__inp{flex:1;min-width:0;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);font:inherit;font-size:12.5px}
.tbcomm__btn{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border:0;border-radius:10px;cursor:pointer;
  background:var(--tone);color:#fff;font:inherit;font-size:12.5px;font-weight:700;white-space:nowrap}
.tbcomm__btn:hover{filter:brightness(1.07)}
.tbcomm__btn svg{width:14px;height:14px}
/* Почта. */
.tbcomm__mail{display:grid;gap:8px;padding:11px;max-height:260px;overflow:auto}
.tbcomm__letter{padding:9px 10px;border:1px solid var(--line);border-radius:11px;background:var(--card)}
.tbcomm__lhd{display:flex;justify-content:space-between;gap:10px;font-size:12.5px}
.tbcomm__lhd span{font-size:11px;color:var(--muted);white-space:nowrap}
.tbcomm__lfrom{font-size:11px;color:var(--muted);margin:2px 0 4px}
.tbcomm__ltxt{margin:0;font-size:12.5px;line-height:1.45;color:var(--ink)}
.tbcomm__note{margin:0;padding:8px 11px;font-size:11px;line-height:1.4;color:var(--muted);border-top:1px solid var(--line)}
/* Подсказка «строки в кабинете ещё нет» над композером: чат в этот момент РАБОЧИЙ, поэтому
   плашка спокойная (не предупреждение) — она объясняет, что сделает первое сообщение. */
.tbcomm__hint{display:flex;align-items:flex-start;gap:6px;margin:0;padding:8px 11px;font-size:11.5px;
  line-height:1.4;color:var(--ink-soft);background:var(--surface-2)}
.tbcomm__hint svg{width:13px;height:13px;flex:none;margin-top:1px;color:var(--muted)}
/* подпись «видим мы и поставщик» — тот же вид, что в чате кабинета, и всегда справа */
.tbcomm__hd .supdcmt__note{margin-left:auto}
/* Узкий экран: столбик сбоку уже не помещается (600 окна + 152 плашек + отступы) —
   переносим плашки внутрь окна, под шапку, обычным рядом. */
@media(max-width:960px){
  .tbcomm__tabs{position:static;top:auto;right:auto;width:auto;flex-direction:row;flex-wrap:wrap;
    gap:8px;padding:10px 11px 0;justify-content:flex-end}
  .tbcomm__tab{border-radius:10px;border-left:1px solid var(--line);box-shadow:none}
  .modal__card:has(.tbcomm__tabs){overflow:hidden}
}
/* Закладка «Документы» — тот же столбик, но с ЛЕВОЙ стороны карточки заказа. */
.tbcomm__tabs--left{right:auto;left:-152px}
.tbcomm__tabs--left .tbcomm__tab{border-radius:12px 0 0 12px;border-left:1px solid var(--line);border-right:0;
  box-shadow:-6px 0 18px rgba(0,0,0,.12);justify-content:flex-end;text-align:right}
.tbcomm__tabs--left .tbcomm__tab.is-on{border-color:var(--tone)}
/* Панель документов: строка = документ, есть файл → ссылка «открыть». */
.tbdocs{display:grid;gap:6px;padding:11px;max-height:280px;overflow:auto}
.tbdocs__row{display:flex;align-items:center;gap:9px;padding:8px 10px;border:1px solid var(--line);border-radius:11px;background:var(--card)}
.tbdocs__row.is-have{border-color:color-mix(in srgb,var(--tone) 35%,var(--line));background:color-mix(in srgb,var(--tone) 6%,transparent)}
.tbdocs__ic{display:inline-flex;color:var(--muted);flex:none}
.tbdocs__row.is-have .tbdocs__ic{color:var(--tone)}
.tbdocs__ic svg{width:15px;height:15px}
.tbdocs__nm{flex:1;min-width:0;font-size:12.5px;font-weight:700}
.tbdocs__nm i{display:block;font-style:normal;font-size:11px;font-weight:600;color:var(--muted);margin-top:1px}
.tbdocs__open{flex:none;display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;color:var(--tone);text-decoration:none}
.tbdocs__open:hover{text-decoration:underline}
.tbdocs__open svg{width:13px;height:13px}
.tbdocs__wait{flex:none;font-size:11px;color:var(--muted)}
.tbdocs .rcphotos{margin-top:4px}
/* дерево «Номенклатура / Логистика» в живой витрине (2026-08-04) */
/* Ветки и позиции — кнопки-раскрывашки (свёрнуты по умолчанию, 2026-08-06) */
.tbdocs__branch{display:flex;align-items:center;gap:7px;width:100%;margin:6px 0 2px;padding:5px 8px;
  border:0;border-radius:9px;background:none;font-size:12px;font-weight:800;color:var(--ink);
  text-transform:uppercase;letter-spacing:.03em;text-align:left;cursor:pointer;font-family:inherit}
.tbdocs__branch:first-child{margin-top:0}
.tbdocs__branch:hover{background:color-mix(in srgb,var(--tone) 8%,transparent)}
.tbdocs__branch svg{width:14px;height:14px;color:var(--tone)}
.tbdocs__pos{display:grid;gap:5px;padding:8px 10px;border:1px dashed var(--line);border-radius:11px}
.tbdocs__poshd{display:flex;align-items:center;gap:7px;width:100%;padding:0;border:0;background:none;
  font-size:12px;font-weight:700;color:var(--ink);text-align:left;cursor:pointer;font-family:inherit}
.tbdocs__poshd svg{width:13px;height:13px;color:var(--muted)}
.tbdocs__pos.is-open .tbdocs__poshd{margin-bottom:2px}
.tbdocs__togl{flex:1;min-width:0}
.tbdocs__chev{display:inline-flex;flex:none;transition:transform .15s ease}
.tbdocs__chev svg{width:12px!important;height:12px!important;color:var(--muted)!important}
.tbdocs__chev.is-off{transform:rotate(-90deg)}
.tbdocs__n{flex:none;padding:1px 8px;border-radius:999px;background:var(--surface-2);
  font-size:11px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--ink)}
.tbdocs__n.is-zero{color:var(--muted);font-weight:600}
.tbdocs__src{display:flex;align-items:center;gap:6px;margin-top:3px;font-size:11px;font-weight:700;color:var(--muted)}
.tbdocs__src svg{width:12px;height:12px}
.tbdocs__src i{font-style:normal;font-weight:600;background:var(--surface-2);border-radius:999px;padding:1px 7px}
.tbdocs__hint{display:flex;align-items:flex-start;gap:6px;margin:2px 0;font-size:12px;line-height:1.45;color:var(--muted)}
.tbdocs__hint svg{width:13px;height:13px;flex:none;margin-top:2px}
.tbdocs__spec{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:6px 10px;border:1px solid var(--line);border-radius:11px;background:var(--card);font-size:12px}
.tbdocs__specnum{font-weight:700;word-break:break-all}
.tbdocs__attach{display:flex;gap:6px;align-items:center;padding:0 11px 4px}
.tbdocs__attach .dlibsp__in--num{flex:1;min-width:0}
.tbdocs__res{display:grid;gap:5px;padding:0 11px 8px}
@media(max-width:960px){
  .tbcomm__tabs--left{left:auto;justify-content:flex-start}
  .tbcomm__tabs--left .tbcomm__tab{border-radius:10px;border-right:1px solid var(--line);box-shadow:none;justify-content:flex-start;text-align:left}
}
/* Вкладка «Логисты» (задача 12): почтовый блок сверху (общие правила .tbmailx выше) +
   раскрывающийся справочник логистов снизу — список строкой в стиле .tbdocs__row и форма
   добавления. */
.tbcomm__logists{padding:11px}
.tblg__dir{margin-top:10px;border:1px solid var(--line);border-radius:11px;overflow:hidden}
.tblg__dir summary{display:flex;align-items:center;gap:7px;padding:9px 11px;font-size:12.5px;font-weight:700;cursor:pointer;background:var(--card);list-style:none}
.tblg__dir summary::-webkit-details-marker{display:none}
.tblg__dir summary svg{width:14px;height:14px;color:var(--muted)}
.tblg__dir[open] summary{border-bottom:1px solid var(--line)}
.tblg__list{display:grid;gap:6px;padding:10px 11px;max-height:220px;overflow:auto}
.tblg__row{display:flex;align-items:center;gap:9px;padding:8px 10px;border:1px solid var(--line);border-radius:11px;background:var(--card)}
.tblg__info{flex:1;min-width:0;font-size:12.5px}
.tblg__info b{font-weight:700}
.tblg__person,.tblg__email,.tblg__note{display:block;font-size:11px;color:var(--muted)}
.tblg__acts{flex:none;display:flex;gap:2px}
.tblg__ic{width:24px;height:24px;border:none;background:transparent;color:var(--muted);display:grid;place-items:center;cursor:pointer;border-radius:6px}
.tblg__ic svg{width:13px;height:13px}
.tblg__ic:hover{background:var(--brand-tint);color:var(--brand)}
.tblg__ic--del:hover{background:rgba(224,83,61,.14);color:#e0533d}
.tblg__add{display:grid;gap:6px;padding:10px 11px;border-top:1px solid var(--line)}

/* Заказ, который поставщик ещё собирает: карточка уже на доске, условий пока нет. */
.tbc__draft{display:flex;align-items:flex-start;gap:6px;margin:8px 0;padding:7px 10px;border-radius:10px;font-size:11.5px;line-height:1.4;font-weight:600;background:color-mix(in srgb,#0ea5e9 10%,transparent);color:var(--ink)}
.tbc__draft svg{width:14px;height:14px;flex:none;margin-top:1px;color:#0ea5e9}
.tbrev--draft{opacity:.95}

/* ── Кабинет брокера (#broker): панель карточки, переписка, подсветка проблем ──
   Канбан и карточки переиспользуют классы кабинета поставщика (.supboard/.col/.supkb__*),
   здесь только то, чего там не было. Поля панели — свой класс .brokd__in: cform__in
   занят «Маркетингом», и переопределять его нельзя. */
.brokd__in{width:100%;padding:7px 9px;border:1px solid var(--line);border-radius:8px;
  background:var(--surface);color:var(--ink);font:inherit;font-size:13px}
.brokd__in:focus{outline:none;border-color:var(--brand)}
.brokd__in[disabled]{opacity:.6;cursor:not-allowed;background:var(--surface-2)}
.supnext__row{display:flex;flex-direction:column;gap:4px}
.supnext__l{font-size:11.5px;color:var(--muted);font-weight:600}
.supnext__l i{font-weight:400;font-style:normal;opacity:.75}
.supkb__card--bad{border-color:var(--down);box-shadow:0 0 0 1px color-mix(in srgb,var(--down) 40%,transparent) inset}

/* Мессенджер-чат по заказу (ЛК поставщика/брокера + вкладки карточки) */
.k5chat{display:flex;flex-direction:column;gap:8px;min-width:0}
.k5chat__feed{display:flex;flex-direction:column;gap:8px;max-height:340px;overflow-y:auto;padding:2px}
.k5chat__msg{display:flex;gap:7px;max-width:86%;align-self:flex-start}
/* Запрос уточнения в переписке (2026-08-24): не реплика, а требование действия — своя
   рамка, подложка и заголовок. Цвет --gold, как у прочих «решение за вами» плашек
   (расхождение количества): красный врал бы про ошибку завода. Работает на обеих сторонах —
   у нас пузырь свой (is-me), у завода входящий, подсветка одна и та же. */
.k5chat__msg--alert .k5chat__b{border:1px solid color-mix(in srgb,var(--gold) 50%,var(--line));
  background:color-mix(in srgb,var(--gold) 13%,var(--surface))}
.k5chat__alerth{display:flex;align-items:center;gap:6px;margin:0 0 4px;font-size:11.5px;font-weight:800;
  color:var(--ink)}
.k5chat__alerth svg{width:14px;height:14px;flex:none;color:var(--gold)}
.k5chat__msg.is-me{align-self:flex-end;flex-direction:row-reverse}
.k5chat__ava{width:22px;height:22px;font-size:9px;flex:none;margin-top:2px;border-radius:50%;display:inline-grid;place-items:center;color:#fff}
/* фото-аватар: без этих правил img ехал в НАТУРАЛЬНЫЙ размер (512px на пол-чата) —
   тот же приём, что .cava--img/.ppl-ava--img выше по файлу */
.k5chat__ava--img{overflow:hidden}
.k5chat__ava--img img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
.k5chat__b{border:1px solid var(--line);border-radius:12px 12px 12px 4px;background:var(--surface);padding:6px 9px 7px;min-width:0}
.k5chat__msg.is-me .k5chat__b{border-radius:12px 12px 4px 12px;background:color-mix(in srgb,var(--brand) 8%,var(--surface));border-color:color-mix(in srgb,var(--brand) 25%,var(--line))}
.k5chat__h{font-size:10.5px;color:var(--muted);display:flex;gap:8px;margin-bottom:2px}
.k5chat__del{margin:-3px -4px -3px auto;padding:3px;border:0;border-radius:6px;background:none;color:var(--muted);cursor:pointer;display:inline-grid;place-items:center;opacity:.55}
.k5chat__del:hover{color:var(--danger);background:color-mix(in srgb,var(--danger) 9%,transparent);opacity:1}
.k5chat__del:disabled{opacity:.3;cursor:wait}
.k5chat__del svg{width:12px;height:12px}
.k5chat__t{font-size:13px;white-space:pre-wrap;word-break:break-word}
.k5chat__img img{max-width:180px;max-height:140px;border-radius:8px;display:block;margin-top:4px;cursor:zoom-in}
.k5chat__file{display:inline-flex;gap:5px;align-items:center;font-size:12.5px;margin-top:4px;max-width:100%;word-break:break-word}
.k5chat__empty{color:var(--muted);font-size:12.5px;display:flex;gap:6px;align-items:center;padding:10px 4px}
.k5chat__empty svg{width:15px;height:15px;flex:none}
/* flex-wrap (ревью задачи 9, мелочи): на 320-375px без него .k5chat__ta сжимался до
   нечитаемых ~63px, а на самых узких экранах строка вылезала за край — кнопки перевода
   должны переехать на свою строку, а не втискиваться в один ряд с полем и отправкой. */
.k5chat__send{display:flex;flex-wrap:wrap;gap:6px;align-items:flex-end}
/* Запертый композер (2026-08-24): переписку видно, писать нельзя — поле стоит на месте, но
   выключено, и под ним причина. Иконки скрепки и отправки остаются макетом (span, не
   кнопки), чтобы человек видел ту же строку ввода, а не другой интерфейс. */
.k5chat__send--lock{opacity:.85}
.k5chat__send--lock .k5chat__ta{background:var(--surface-2);color:var(--muted);cursor:not-allowed}
.k5chat__attach.is-off,.k5chat__btn.is-off{opacity:.4;cursor:not-allowed;pointer-events:none}
.k5chat__attach.is-off{display:grid;place-items:center;border:1px solid var(--line);border-radius:10px;
  width:34px;height:34px;flex:none}
.k5chat__btn.is-off{display:grid;place-items:center;border-radius:10px;width:38px;height:34px;flex:none;
  background:var(--brand);color:var(--brand-ink)}
.k5chat__locknote{display:flex;align-items:flex-start;gap:6px;margin:6px 0 0;font-size:11.5px;line-height:1.35;
  color:var(--ink-soft)}
.k5chat__locknote svg{width:13px;height:13px;flex:none;margin-top:1px;color:var(--muted)}
/* ПОЛЕ ВВОДА ЧАТА (2026-08-24, жалоба владельца: «диалоговое окно слишком маленькое»).
   Было rows=1 и min-height 34px — то есть ОДНА строка: уже вторая фраза («Надо уточнить
   подъезд») уезжала под скролл, и человек печатал в щёлку, не видя начала. Теперь по
   умолчанию три строки, а дальше поле РАСТЁТ под текст до 220px (k5ChatAutoGrow) — скролл
   включается только у совсем длинного сообщения. resize оставлен none: высотой управляет
   рост по содержимому, иначе ручная растяжка конфликтовала бы с ним на каждом вводе. */
.k5chat__ta{flex:1;min-width:90px;resize:none;min-height:62px;max-height:220px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);padding:7px 10px;font:inherit;font-size:13px}
.k5chat__attach{cursor:pointer;border:1px solid var(--line);border-radius:10px;width:34px;height:34px;display:grid;place-items:center;flex:none}
.k5chat__btn{border:0;border-radius:10px;width:38px;height:34px;background:var(--brand);color:var(--brand-ink);cursor:pointer;display:grid;place-items:center;flex:none}
.k5chat__btn:disabled{opacity:.5}
/* Кнопки перевода черновика EN/中文 (задача 9) — только у нашей стороны (mySide=kronos) */
.k5chat__tr{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin-left:auto;justify-content:flex-end}
.k5chat__trb{font:inherit;font-size:11.5px;line-height:1;padding:5px 8px;border-radius:7px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink-soft);cursor:pointer;white-space:nowrap}
.k5chat__trb:disabled{opacity:.6;cursor:default}
.k5chat__trb--undo{color:var(--muted)}
/* Перевод ВХОДЯЩЕГО сообщения партнёра на русский (задача 10) — кнопка под текстом чужого
   сообщения (только mySide=kronos) и сам перевод под оригиналом. white-space:pre-wrap —
   как у .k5chat__t: k5_tr_prose обязан сохранять переводы строк (lib/translate.php),
   без pre-wrap многострочный перевод визуально слипся бы в один абзац. */
.k5chat__trin{font:inherit;font-size:11px;line-height:1;padding:3px 6px;margin-top:4px;border-radius:6px;
  border:1px solid var(--line);background:transparent;color:var(--muted);cursor:pointer}
.k5chat__trin:disabled{opacity:.6;cursor:default}
.k5chat__trout{margin-top:5px;padding-top:5px;border-top:1px dashed var(--line);
  font-size:12.5px;color:var(--ink-soft);white-space:pre-wrap;word-break:break-word}
/* кнопка «Раскрыть» (малый чат → полноэкранное окно) — в шапках чат-блоков трёх экранов */
.k5chat__expand{border:1px solid var(--line);background:none;color:var(--muted);cursor:pointer;font:inherit;font-size:11px;padding:2px 8px;border-radius:8px;display:inline-flex;align-items:center;gap:4px;flex:none;vertical-align:middle}
.k5chat__expand:hover{color:var(--ink);border-color:var(--muted)}
.k5chat__expand svg{width:11px;height:11px}
/* ═══ «Раскрыть чат»: полноэкранная переписка поверх карточки/кабинета (2026-08-03).
   z-index 1300 — выше .supdrawer/.supov (1200) и модалки карточки (50). */
.k5cfull{position:fixed;inset:0;z-index:1300;display:grid;place-items:center;padding:20px}
.k5cfull__backdrop{position:absolute;inset:0;background:rgba(10,14,18,.45)}
.k5cfull__card{position:relative;width:min(780px,96vw);height:min(86vh,900px);display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 24px 64px rgba(0,0,0,.35);padding:12px 14px 14px}
.k5cfull__hd{display:flex;align-items:center;gap:8px;font-size:14px;margin-bottom:8px}
.k5cfull__hd>svg{width:16px;height:16px;flex:none}
.k5cfull__hd b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.k5cfull__x{border:0;background:none;color:var(--muted);cursor:pointer;width:30px;height:30px;display:grid;place-items:center;border-radius:8px;flex:none}
.k5cfull__x:hover{background:var(--surface-2);color:var(--ink)}
.k5cfull .k5chat{flex:1;min-height:0}
.k5cfull .k5chat__feed{max-height:none;flex:1}
@media (max-width:760px){ .k5cfull{padding:0} .k5cfull__card{width:100vw;height:100vh;border-radius:0} }
/* бейдж непрочитанного на плитках/вкладках */
/* Счётчик непрочитанного в строке заголовка. ОТСТУП ОБЯЗАТЕЛЕН (2026-08-24): без него
   число вплотную приклеивалось к названию и читалось как часть его («МБ-1080» + «1» =
   «МБ-10801»). vertical-align — чтобы кружок не съезжал вниз от базовой линии текста. */
.k5unread{display:inline-grid;place-items:center;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:#e0533d;color:#fff;font-size:10.5px;font-weight:700;
  margin-left:6px;vertical-align:middle}
/* …а там, где кружок ставят абсолютом в угол кнопки, отступ строки не нужен. */
.supov__chatbtn .k5unread,.supov__itchat .k5unread{margin-left:0}

/* ═══ Поля в раскрытой карточке ЛК: шире на ПК, без стрелок у числовых (2026-07-29) ═══ */
/* Числовые поля кабинета: убираем встроенные стрелки браузера — их всё равно не нажимают,
   а курсор в узком поле они закрывают. */
.suppliers input[type="number"]{-moz-appearance:textfield;appearance:textfield}
.suppliers input[type="number"]::-webkit-outer-spin-button,
.suppliers input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0}
/* На ПК поля детали заметно шире (было 182px / максимум 48% строки). */
@media (min-width:721px){
  .supov .suptr2__in,.supov .suptr2 input,.supov .suptr2 select{width:280px;max-width:62%}
  .supov .supgd__f{flex:0 0 150px}
  .supov .supgd__f--price{flex:0 0 190px}
  .supov .supgd__f--qty{flex:0 0 120px}
  .supov .supgd__f .suptr2__in{width:100%;max-width:100%}
  .supov .supgd__sel{max-width:100%}
}

/* Счётчик приёмки по факту (+/-) — поля с counter:true (склад, приёмка перемещения) */
.k5cnt{display:inline-flex;align-items:center;gap:6px}
.k5cnt>input{width:76px;text-align:center}
.k5cnt__b{min-width:38px;height:36px;border-radius:8px;border:1px solid rgba(128,128,128,.45);background:transparent;color:inherit;font-size:20px;line-height:1;cursor:pointer;padding:0 8px}
.k5cnt__b--plus{min-width:46px;background:#378ADD;color:#fff;border-color:#378ADD}
.k5cnt__b:active{transform:scale(.96)}

/* Лицо карточки доски «Перемещение между филиалами» — читаемая сводка */
.bcard__move{margin:4px 0 0;font-size:13px;line-height:1.4}
.bcard__move b{font-weight:600}
.bcard__moveqty{color:#185FA5;font-weight:600}
.bcard__movewhy{margin:3px 0 0;font-size:12px;color:#6b7280;line-height:1.45}
.bcard__movediff{margin:3px 0 0;font-size:12px;color:#993C1D;font-weight:500}

/* Инлайновые иконки в подписях карточек кабинетов. БЕЗ явного размера SVG растягивается
   до ширины контейнера: в кабинете брокера иконка проблемы в .supkb__note выросла до
   195 px. Селектор — только ПРЯМЫЕ потомки, чтобы не перебить вложенные иконки со своими
   размерами (например .supkb__lnk svg — 11 px). Добавляешь иконку в новый контейнер
   кабинета — убедись, что у него есть такое правило (docs/PARTNER_PORTAL.md, «Грабли»). */
.supkb__note > svg,.supkb__sub > svg,.supnext__l > svg{
  width:13px;height:13px;flex:none;vertical-align:-2px}

/* ── Раздел «Документы» (#doclib): дерево папок слева, файлы справа ──────────────
   Сетка СВОЯ (.dlib__grid). Раньше разметка опиралась на .dclayout/.dcside/.dcmain — это
   классы ЧУЖОГО реестра документов номенклатуры (public/front/js/docs.js, не закоммичен и к
   интерфейсу не подключён), и стилей у них здесь нет: дерево оказывалось блоком на всю
   ширину, а файлы — под ним. Не переиспользуй классы из того реестра, здесь всё своё
   (dlib…). Размеры иконок задаём ЯВНО: svgIcon() отдаёт svg без width/height, и без
   правила иконка растянется на весь блок (грабли №12 в docs/PARTNER_PORTAL.md). */
/* Пометка необязательного этапа в канбане брокера и кнопки «мимо этапа» в карточке:
   «Контрольные меры» и «Условный выпуск» таможня назначает не всем (docs/PARTNER_PORTAL.md). */
.brokopt{flex:none;padding:1px 6px;border:1px dashed var(--line);border-radius:999px;
  color:var(--muted);font-size:10.5px;font-weight:600;white-space:nowrap}
.brokskip{display:flex;gap:6px;flex-wrap:wrap}
.brokskip > button > svg{transform:rotate(-90deg)}

/* Чек-лист документов поставки в раскрытой карточке брокера + переключатели-галочки
   (состав считает сервер, docs/BROKER_PROCESS.md). Строка: иконка · подпись · поле ввода. */
.brokchk__list{display:flex;flex-direction:column;gap:4px;margin-top:4px}
.brokchk__row{display:grid;grid-template-columns:16px minmax(0,1fr);gap:4px 8px;align-items:start;
  padding:6px 8px;border:1px solid var(--line);border-radius:8px;background:var(--surface);font-size:12.5px}
.brokchk__row.is-done{background:color-mix(in srgb,var(--up) 8%,transparent);border-color:transparent}
.brokchk__row.is-gate{border-color:color-mix(in srgb,var(--down) 45%,var(--line))}
.brokchk__ic{grid-row:1;width:14px;height:14px;margin-top:1px;color:var(--muted)}
.brokchk__ic > svg{width:14px;height:14px}
.brokchk__row.is-done .brokchk__ic{color:var(--up)}
.brokchk__row.is-gate .brokchk__ic{color:var(--down)}
.brokchk__l{grid-row:1;min-width:0;font-weight:600}
.brokchk__l > i{font-style:normal;font-weight:400;color:var(--down);font-size:11.5px}
.brokchk__v{grid-column:2;grid-row:2}
.brokchk__v .supnext__row{margin:0;gap:4px}
.brokchk__v .supnext__l{font-size:11.5px;color:var(--muted)}
/* Галочка-переключатель (тот же вид, что tbsync__tgl на карточке доски) */
.brokchk{display:inline-flex;align-items:center;cursor:pointer}
.brokchk input{width:16px;height:16px;accent-color:var(--brand);cursor:pointer}
.brokchk input:disabled{cursor:default;opacity:.6}
/* Бейдж на карточке канбана, когда не хватает документов для выхода с «Прихода» */
.brokdocs--gate{color:var(--down);font-weight:600}

.dlib__grid{display:grid;grid-template-columns:minmax(220px,282px) minmax(0,1fr);gap:16px;align-items:start}
.dlib__main{min-width:0}
@media (max-width:820px){ .dlib__grid{grid-template-columns:1fr} }
.dlib__side{display:flex;flex-direction:column;gap:10px}
.dlib__root{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);overflow:hidden}
.dlib__rootb{display:flex;align-items:center;gap:8px;width:100%;padding:10px 11px;background:none;border:0;
  cursor:pointer;font:inherit;font-weight:700;font-size:13px;color:var(--ink);text-align:left}
.dlib__rootb:hover{background:var(--surface-2)}
.dlib__ric svg{width:15px;height:15px;color:var(--brand)}
.dlib__rname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dlib__rn{flex:none;min-width:18px;padding:1px 5px;border-radius:9px;background:var(--surface-2);
  color:var(--muted);font-size:11px;font-weight:700;text-align:center}
.dlib__chev{flex:none;display:inline-flex;transition:transform .15s ease}
.dlib__chev svg{width:13px;height:13px;color:var(--muted)}
.dlib__chev--off{transform:rotate(-90deg)}
.dlib__chev--none{width:13px}
.dlib__kids{padding:2px 8px 8px}
.dlib__node{padding-left:calc(var(--d,0) * 12px)}
.dlib__f{display:flex;align-items:center;gap:7px;width:100%;padding:5px 7px;border:0;border-radius:7px;
  background:none;cursor:pointer;font:inherit;font-size:12.5px;color:var(--ink);text-align:left}
.dlib__f:hover{background:var(--surface-2)}
.dlib__f.is-sel{background:color-mix(in srgb,var(--brand) 12%,transparent);font-weight:700}
.dlib__fic svg{width:13px;height:13px;color:var(--muted)}
.dlib__f.is-sel .dlib__fic svg{color:var(--brand)}
.dlib__fname2{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dlib__empty{padding:4px 8px;color:var(--muted);font-size:12px}
.dlib__add{display:inline-flex;align-items:center;gap:5px;margin:6px 0 0;padding:4px 8px;border:1px dashed var(--line);
  border-radius:7px;background:none;cursor:pointer;font:inherit;font-size:12px;color:var(--muted)}
.dlib__add:hover{color:var(--brand);border-color:var(--brand)}
.dlib__add svg{width:12px;height:12px}
.dlib__hd{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.dlib__crumbs{font-weight:700;font-size:13.5px;min-width:0;overflow:hidden;text-overflow:ellipsis}
.dlib__hdacts{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.dlib__hint{display:flex;align-items:flex-start;gap:6px;margin:0 0 10px;padding:7px 10px;border-radius:8px;
  background:color-mix(in srgb,#0ea5e9 10%,transparent);font-size:12px;line-height:1.4}
.dlib__hint > svg{width:14px;height:14px;flex:none;margin-top:1px;color:#0ea5e9}
.dlib__table td{vertical-align:middle}
.dlib__fname a{display:inline-flex;align-items:center;gap:6px;color:var(--ink);text-decoration:none;font-weight:600}
.dlib__fname a:hover{color:var(--brand)}
.dlib__fname a > svg{width:14px;height:14px;flex:none;color:var(--muted)}
.dlib__note{display:block;margin-top:2px;color:var(--muted);font-size:11.5px}
.dlib__acts{white-space:nowrap;display:flex;gap:6px}
@media (max-width:900px){ .dlib__hdacts{width:100%} }
.dlib__lead{margin:0 0 12px;color:var(--muted);font-size:12.5px;line-height:1.45}
/* ── Шеринг с подрядчиками (2026-08-03) ──────────────────────────────────────────
   Плашка «открыто такому-то» и предупреждение на открытой папке — не украшение:
   доступ к папке наследуется вниз, и это единственное, что стоит между «положил
   файл» и «отдал файл конкурирующему заводу». Поэтому заметно и всегда на месте. */
.dlib__shared{display:inline-flex;align-items:center;gap:5px;margin-top:3px;padding:2px 8px;border-radius:999px;
  background:color-mix(in srgb,#f59e0b 14%,transparent);border:1px solid color-mix(in srgb,#f59e0b 35%,transparent);
  color:#a15c07;font-size:11px;font-weight:700;line-height:1.5}
.dlib__shared > svg{width:12px;height:12px;flex:none}
.dlib__warn{display:flex;align-items:flex-start;gap:8px;margin:0 0 10px;padding:9px 12px;border-radius:9px;
  background:color-mix(in srgb,#f59e0b 12%,transparent);border:1px solid color-mix(in srgb,#f59e0b 38%,transparent);
  font-size:12.5px;line-height:1.5;color:var(--ink)}
.dlib__warn > svg{width:15px;height:15px;flex:none;margin-top:2px;color:#c2630a}
.dlib__warn b{display:block}
/* ── Номера сертификатов/деклараций (корень «Спецификации», 2026-08-03) ──────────
   Статусы проверки принесёт внешняя автоматика — сейчас все серые «не проверялся»,
   но подсветка истекающих по сроку бумаги работает уже сегодня. */
.dlibsp{margin:0 0 14px;padding:12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface)}
.dlibsp__hd{display:flex;align-items:center;gap:7px;margin:0 0 10px;font-size:13.5px;font-weight:700;color:var(--ink);flex-wrap:wrap}
.dlibsp__hd > svg{width:16px;height:16px;flex:none;color:var(--brand)}
.dlibsp__hd b{font-size:12px;background:var(--surface-2);border-radius:999px;padding:1px 8px}
.dlibsp__sub{font-size:11.5px;font-weight:500;color:var(--muted)}
.dlibsp__none{margin:0 0 10px;font-size:12.5px;color:var(--muted)}
.dlibsp__num{font-weight:600;color:var(--ink);word-break:break-all}
.dlibsp__st{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:999px;font-size:11.5px;font-weight:700;
  color:var(--t);background:color-mix(in srgb,var(--t) 12%,transparent);border:1px solid color-mix(in srgb,var(--t) 30%,transparent);white-space:nowrap}
.dlibsp__until{white-space:nowrap}
.dlibsp__until b{font-size:11px;font-weight:800;margin-left:5px}
.dlibsp__until.is-soon b{color:#c47700}
.dlibsp__until.is-dead{color:#dc2626}
.dlibsp__until.is-dead b{color:#dc2626}
.dlibsp__add{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:10px;padding-top:10px;border-top:1px dashed var(--line)}
.dlibsp__in{height:34px;font-size:12.5px}
.dlibsp__in--num{flex:2 1 260px;min-width:220px}
.dlibsp__in--note{flex:1 1 140px;min-width:120px}
.dlibsp__reg{margin-bottom:2px}
.dlibsp__go{display:inline-flex;align-items:center;gap:5px;background:none;border:none;font:inherit;font-size:12.5px;color:var(--brand);cursor:pointer;padding:0;text-align:left}
.dlibsp__go svg{width:13px;height:13px;flex:none}
.dlibsp__kpis{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 12px}
.dlibsp__kpi{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--ink-soft);
  background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:5px 12px}
.dlibsp__kpi svg{width:14px;height:14px}
.dlibsp__kpi b{color:var(--ink)}
.dlibsp__kpi.is-dead{color:#dc2626;border-color:color-mix(in srgb,#dc2626 35%,transparent);background:color-mix(in srgb,#dc2626 8%,transparent)}
.dlibsp__kpi.is-soon{color:#c47700;border-color:color-mix(in srgb,#c47700 35%,transparent);background:color-mix(in srgb,#c47700 8%,transparent)}
/* блок «Номенклатура 1С» на папке-модели (привязка позиций).
   svg без размера растягивается в натуральные 24px-вьюбокс на всю ширину — размер обязателен. */
.dlibnom{margin:0 0 14px;padding:12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface)}
.dlibnom__row{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:12.5px;min-width:0}
.dlibnom__ic{display:inline-flex;flex:none;color:var(--muted)}
.dlibnom__ic svg{width:14px;height:14px}
.dlibnom__nm{flex:1;min-width:0;font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.dlibnom__nm i{font-style:normal;font-weight:500;font-size:11px;color:var(--muted);margin-left:6px}
.dlibnom__find{display:flex;gap:6px;align-items:center;margin-top:8px;padding-top:8px;border-top:1px dashed var(--line)}
.dlibnom__find .dlibsp__in--num{flex:1;min-width:0}
.dlibnom__res{display:grid;gap:2px;margin-top:6px}
/* импорт номеров из Excel: превью плана в модалке (2026-08-04) */
.dlibimp{display:flex;flex-direction:column;gap:10px;min-width:min(760px,86vw)}
.dlibimp__tbl{max-height:48vh;overflow:auto}
.dlibimp__tbl .is-mute td{opacity:.55}
.dlibimp__f{font-weight:600}
.dlibimp__tag{display:inline-block;font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:999px;background:var(--surface-2);color:var(--muted);white-space:nowrap}
.dlibimp__tag.is-add{color:#166534;background:color-mix(in srgb,#16a34a 12%,transparent)}
.dlibimp__tag.is-new{color:var(--brand);background:color-mix(in srgb,var(--brand) 10%,transparent)}
.dlibimp__tag.is-warn{display:block;width:max-content;max-width:100%;white-space:normal;margin-top:3px;color:#92400e;background:color-mix(in srgb,#c47700 14%,transparent)}
.dlibimp__warn{display:flex;gap:7px;align-items:flex-start;margin:0;padding:8px 10px;border-radius:8px;font-size:12px;line-height:1.45;
  background:color-mix(in srgb,#c47700 8%,transparent);color:#92400e}
.dlibimp__warn svg{width:14px;height:14px;flex:none;margin-top:1px}
/* диалог «Доступ подрядчикам» */
.dlibsh{display:flex;flex-direction:column;gap:10px;min-width:min(420px,80vw)}
.dlibsh__what{display:flex;align-items:center;gap:7px;margin:0;font-size:14px;color:var(--ink)}
.dlibsh__what > svg{width:16px;height:16px;flex:none;color:var(--muted)}
.dlibsh__hint,.dlibsh__inh{display:flex;align-items:flex-start;gap:7px;margin:0;padding:8px 10px;border-radius:8px;
  font-size:12px;line-height:1.45;background:var(--surface-2);color:var(--ink-soft)}
.dlibsh__hint > svg,.dlibsh__inh > svg{width:14px;height:14px;flex:none;margin-top:1px;color:#c2630a}
.dlibsh__inh > svg{color:#0ea5e9}
.dlibsh__block{border:1px solid var(--line);border-radius:9px;padding:9px 11px}
.dlibsh__all{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink);cursor:pointer}
.dlibsh__live{display:flex;align-items:flex-start;gap:6px;margin:6px 0 2px;font-size:11.5px;line-height:1.45;color:#a15c07}
.dlibsh__live > svg{width:12px;height:12px;flex:none;margin-top:2px}
.dlibsh__row{display:flex;align-items:center;gap:8px;padding:4px 0 4px 22px;font-size:12.5px;color:var(--ink);cursor:pointer}
.dlibsh__row.is-off{opacity:.45;cursor:default}
.dlibsh__none{margin:6px 0 0;padding-left:22px;font-size:11.5px;color:var(--muted)}
.dlibsh__foot{margin:2px 0 0;font-size:11.5px;line-height:1.5;color:var(--muted)}
/* Перемещение файла между папками (модалка) */
.dlibmv{display:flex;flex-direction:column;gap:10px}
.dlibmv__what{display:flex;align-items:center;gap:6px;margin:0;font-size:13px;flex-wrap:wrap}
.dlibmv__what > svg{width:14px;height:14px;flex:none;color:var(--brand)}
.dlibmv__what span{color:var(--muted);font-size:12px}
.dlibmv__q{width:100%;padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);font-size:13px}
.dlibmv__list{max-height:52vh;overflow:auto;border:1px solid var(--line);border-radius:9px;padding:6px}
.dlibmv__root{display:flex;align-items:center;gap:6px;margin:6px 2px 2px;font-size:11px;font-weight:800;
  text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.dlibmv__root > svg{width:12px;height:12px;flex:none}
.dlibmv__row{display:flex;align-items:center;gap:7px;width:100%;padding:5px 8px 5px calc(8px + var(--d,0)*16px);
  border:0;border-radius:7px;background:none;color:var(--ink);font-size:12.5px;text-align:left;cursor:pointer}
.dlibmv__row:hover{background:color-mix(in srgb,var(--brand) 9%,transparent)}
.dlibmv__row.is-cur{opacity:.5;cursor:default}
.dlibmv__row.is-cur:hover{background:none}
.dlibmv__row > svg{width:13px;height:13px;flex:none;color:var(--brand)}
.dlibmv__row b{margin-left:auto;flex:none;font-size:10.5px;color:var(--muted);font-weight:600}
.dlibmv__nm{min-width:0}
.dlibmv__nm i{display:block;font-style:normal;font-size:10.5px;color:var(--muted)}
.dlibmv__none{margin:8px;font-size:12px;color:var(--muted)}
/* Импорт архивов (модалка админа) */
.dlibimp{display:flex;flex-direction:column;gap:10px}
.dlibimp__st{display:flex;align-items:flex-start;gap:6px;margin:0;font-size:12.5px;line-height:1.45}
.dlibimp__st > svg{width:13px;height:13px;flex:none;margin-top:2px;color:var(--brand)}
.dlibimp__btns{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dlibimp__log{max-height:38vh;overflow:auto;border:1px solid var(--line);border-radius:9px;padding:8px 10px;
  font-size:12px;line-height:1.5;display:flex;flex-direction:column;gap:3px}
.dlibimp__ln{display:flex;align-items:flex-start;gap:6px}
.dlibimp__ln > svg{width:12px;height:12px;flex:none;margin-top:2px;color:var(--brand)}
.dlibimp__ln.is-bad{color:#b42318}
.dlibimp__ln.is-bad > svg{color:#b42318}
.dlibimp__hint{margin:0;font-size:11.5px;line-height:1.5;color:var(--muted)}
/* «Файлы компании»: виртуальный блок сертификатов в папке модели (2026-08-12) */
.dlib__certs{margin-top:12px;padding:10px 12px;border:1px dashed var(--line);border-radius:10px}
.dlib__certshd{display:flex;align-items:center;gap:6px;font-weight:600;margin-bottom:6px}
.dlib__certshd > svg{width:14px;height:14px;flex:none;color:var(--brand)}
.dlib__certgrp{margin:4px 0}
.dlib__certfrom{color:var(--muted);font-size:12px;margin-right:8px}
.dlib__certfile{display:inline-flex;align-items:center;gap:4px;margin-right:12px;font-size:12.5px}
.dlib__certfile > svg{width:13px;height:13px;flex:none;color:var(--brand)}
/* «Файлы компании»: виртуальный блок фотографий номенклатуры в папке модели (2026-08-14) */
.dlib__nphrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.dlib__nph{width:92px;height:92px;object-fit:cover;border-radius:8px;background:var(--panel2,#f1f0ee)}
/* Стенд «Продукции» — панель для админ-ролей (api/doclib_seed.php). Не декорация: на проде
   это единственный способ наполнить дерево, консольный скрипт там не запускается. */
.dlib__seed{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin:0 0 12px;padding:10px 12px;border:1px dashed var(--line);border-radius:10px;
  background:color-mix(in srgb,var(--brand) 6%,transparent)}
.dlib__seedtx{display:flex;flex-direction:column;gap:3px;min-width:220px;flex:1;font-size:12.5px}
.dlib__seedhd{display:flex;align-items:center;gap:6px}
.dlib__seedhd > svg{width:14px;height:14px;flex:none;color:var(--brand)}
.dlib__seedst{color:var(--muted);font-size:12px}
.dlib__seednote{color:var(--muted);font-size:11.5px;line-height:1.4;max-width:70ch}
.dlib__seedmsg{margin-top:2px;color:var(--brand);font-size:12px;font-weight:600}
.dlib__seedbtns{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
@media (max-width:700px){ .dlib__seedbtns{width:100%} }

/* Панель библиотеки СЛЕВА от раскрытой карточки брокера (приём как у документов на карточке
   доски «Тест»). Живёт внутри .supdrawer — flex-строки, вынесенной порталом в body, поэтому
   встаёт слева от карточки и не зависит от секции. */
.dlibpanel{position:relative;display:flex;flex-direction:column;width:min(420px,42vw);height:100%;
  background:var(--bg);border-right:1px solid var(--line);box-shadow:-10px 0 32px -18px rgba(0,0,0,.4);
  padding:14px;overflow:hidden}
.dlibpanel__hd{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.dlibpanel__t{display:flex;align-items:center;gap:6px;font-weight:800;font-size:13.5px}
.dlibpanel__t > svg{width:15px;height:15px;color:var(--brand)}
.dlibpanel__body{flex:1;min-height:0;display:flex;flex-direction:column;gap:10px;overflow-y:auto}
.dlibpanel__tree{display:flex;flex-direction:column;gap:8px}
.dlibpanel__files{display:flex;flex-direction:column;gap:5px;padding-top:2px;border-top:1px solid var(--line)}
.dlib__pickrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:5px 7px;border:1px solid var(--line);
  border-radius:8px;background:var(--surface);font-size:12.5px}
.dlib__pickrow.is-on{border-color:color-mix(in srgb,var(--brand) 45%,var(--line));
  background:color-mix(in srgb,var(--brand) 7%,var(--surface))}
.dlib__pickname{flex:1;min-width:0;display:inline-flex;align-items:center;gap:6px;color:var(--ink);
  text-decoration:none;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dlib__pickname:hover{color:var(--brand)}
.dlib__pickname > svg{width:13px;height:13px;flex:none;color:var(--muted)}
.dlib__pickwhere{flex:none;color:var(--muted);font-size:11px}
.dlib__pickhint{display:flex;align-items:flex-start;gap:6px;color:var(--muted);font-size:12px;padding:6px 2px}
.dlib__pickhint > svg{width:14px;height:14px;flex:none;margin-top:1px}
/* Поиск и его результаты */
.dlib__search{margin:0 0 10px}
.dlib__hits{display:flex;flex-direction:column;gap:5px}
.dlib__hitshd{color:var(--muted);font-size:12px;margin-bottom:2px}
.dlib__hit{display:flex;align-items:center;gap:8px;width:100%;padding:6px 8px;border:1px solid var(--line);
  border-radius:8px;background:var(--surface);font:inherit;font-size:12.5px;color:var(--ink);text-align:left;cursor:pointer}
button.dlib__hit:hover{border-color:var(--brand)}
.dlib__hitn{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden}
.dlib__hitn i{color:var(--muted);font-style:normal;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dlib__hitn a{color:var(--ink);text-decoration:none;font-weight:600}
.dlib__hitn a:hover{color:var(--brand)}
@media (max-width:900px){ .dlibpanel{display:none} }

/* Клик по метрике дашборда → фильтр таблицы действий (purchai.js) */
.pai-kpi.is-click { cursor: pointer; }
.pai-kpi.is-click:hover { outline: 1px solid #2f6df0; outline-offset: -1px; }
.pai-brow.is-click { cursor: pointer; border-radius: 6px; }
.pai-brow.is-click:hover { background: #eef3fe; }
.pai-card__h.is-click { cursor: pointer; }
.pai-card__h.is-click:hover { color: #2f6df0; }
.pai-chip--metric { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Список позиций на карточке рейса/накопителя (доска «Перемещение между филиалами») */
.bcard__movelist{margin:4px 0 0;padding:0 0 0 2px;list-style:none;font-size:12px;color:var(--txt,#222);line-height:1.5}
.bcard__movelist li{margin:1px 0}
.bcard__movelist b{font-weight:600}
.bcard__movetag{font-size:10px;padding:0 6px;border-radius:6px;background:#FAEEDA;color:#854F0B;margin-left:2px}
.bcard__movemore{color:#6b7280;font-size:11px}

/* Список позиций рейса в детальном виде карточки (доска «Перемещение между филиалами») */
/* Состав рейса: строка = имя + метки/остаток слева, количество и действие справа.
   Причёсано 27.08.2026 вместе с формой добавления — жёсткие серые/синие цвета заменены
   переменными темы (в тёмной теме #6b7280 на тёмном фоне почти не читался). */
.titems{border:1px solid var(--line);border-radius:12px;padding:11px 12px;margin:8px 0}
.titems__hd{font-size:11.5px;font-weight:700;color:var(--muted);text-transform:uppercase;
  letter-spacing:.04em;margin-bottom:7px}
/* Строка — КАРТОЧКА с тремя зонами нажатия (выбор · название · убрать), каждая ≥ 40px.
   Было: чекбокс 13px, название нейтральным текстом, крестик в 8px площади — попасть можно
   было только мышью и с прицеливанием (замечания Дмитрия 27.08.2026). */
.titem{display:flex;align-items:flex-start;gap:8px;padding:7px 8px;border:1px solid transparent;
  border-radius:10px;transition:.13s}
.titem + .titem{margin-top:4px}
.titem:hover{border-color:var(--line);background:var(--surface-2)}
.titem.is-open{border-color:color-mix(in srgb,var(--brand) 38%,var(--line));background:var(--surface-2)}
.titem__main{flex:1;min-width:0;padding-top:2px}
/* Название — кнопка на всю ширину: цель нажатия во всю строку, а не по буквам */
.titem .titem__open{align-items:flex-start;padding:5px 4px;margin:-5px 0 0 -4px;border-radius:8px;
  font-size:13.5px;font-weight:600;line-height:1.35;min-height:34px}
.titem .titem__open:hover{background:color-mix(in srgb,var(--brand) 8%,transparent);color:var(--brand-fg)}
/* Тот же режим headerOnly: между названием и телом .titem__det стоят теги позиции.
   Шеврон у этой строки исторически СПРАВА — порядком и авто-отступом ставим его туда,
   а крутит его раскрытость строки (класс на .titem ставит обработчик). */
.titem .titem__open .k5dsc__chev{order:9;margin:6px 0 0 auto}
.titem.is-open .titem__open .k5dsc__chev{transform:rotate(90deg)}
.titem__nm{flex:1;min-width:0;font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.35}
.titem__sub{font-size:11px;color:var(--muted);font-weight:400}
.titem__q{font-weight:700;font-size:13px;white-space:nowrap;color:var(--ink);padding-top:9px}
.titem__tags{margin-top:3px;display:flex;flex-wrap:wrap;gap:5px;align-items:center}
/* Детали позиции — раскрываются ПОД строкой (окно в приложении одно, модалкой не перебиваем) */
.titem__det{margin:8px 0 2px;padding:10px 11px;border:1px solid var(--line);border-radius:9px;
  background:var(--surface)}
.titdet__facts{margin-top:7px;font-size:11.5px;color:var(--muted);line-height:1.4}
.titdet__retry{border:0;background:none;padding:0;font:inherit;font-size:11.5px;font-weight:700;
  color:var(--brand-fg);cursor:pointer;text-decoration:underline}
.titdet__note{font-size:11.5px;color:var(--muted)}
/* Состав заказа внутри строки-группы: позиция · количество · наличие на складе рейса */
.titdet__ord{display:flex;flex-direction:column;gap:4px}
.titdet__oi{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:5px 7px;border-radius:8px;
  background:var(--surface-2);font-size:12.5px}
.titdet__oin{flex:1;min-width:0;color:var(--ink)}
.titdet__oiq{font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.titdet__ois{display:inline-flex;gap:4px;flex-wrap:wrap}
/* Метка строки-заказа в составе рейса */
.titem__tag--ord{background:color-mix(in srgb,#6d5bd0 14%,var(--surface));color:#6d5bd0;
  border-color:color-mix(in srgb,#6d5bd0 38%,var(--line));font-weight:700}
.titem.is-ord{border-color:color-mix(in srgb,#6d5bd0 26%,var(--line))}
[data-theme="dark"] .titem__tag--ord{background:#241f3d;color:#a99bf0}

/* Набор строк в форме создания: список выбранного до создания карточки */
.trform__tabs{display:flex;gap:5px;flex:0 0 100%;margin-bottom:2px}
/* НАБРАННЫЕ СТРОКИ. Три `min-width:0` подряд — не суеверие: у флекс-элемента
   `min-width` по умолчанию `auto`, то есть «не уже своего содержимого», и одна длинная
   строка названия распирает список ШИРЕ окна. Тогда у формы появляется горизонтальная
   прокрутка, содержимое уезжает влево и подписи полей обрезаются по левому краю
   (скриншот Дмитрия 27.08.2026: «не влезает айтем товара»). max-width:100% — второй
   рубеж на случай элемента с собственной внутренней шириной (select, input с size). */
.trform__list{flex:0 0 100%;min-width:0;max-width:100%;display:flex;flex-direction:column;gap:4px;margin-top:6px}
.titem__tag{font-size:10px;font-weight:600;padding:1px 7px;border-radius:6px;
  background:var(--surface-2);color:var(--ink-soft);border:1px solid var(--line)}
.titem__tag--pay{background:#FAEEDA;color:#854F0B;border-color:transparent}
.titem__note{font-size:11px;color:var(--muted);flex-basis:100%}
[data-theme="dark"] .titem__tag--pay{background:#33260f;color:#e0a445}

/* Управление позициями рейса (× и форма добавления) */
.titem{position:relative}
/* «Инфо» → карточка позиции в справочнике. Тихая иконка, как и крестик: два одинаково
   заметных действия в конце строки спорили бы за внимание. */
.titem__info{flex:0 0 auto;width:34px;height:34px;display:grid;place-items:center;color:var(--muted);
  border-radius:9px;transition:.13s;text-decoration:none}
.titem__info svg{width:17px;height:17px}
.titem__info:hover{color:var(--brand-fg);background:color-mix(in srgb,var(--brand) 10%,transparent)}
/* Крестик — кнопка 34×34 (было 8×18: попасть почти невозможно), тихая до наведения:
   постоянный красный на каждой строке читался как «здесь ошибка», а не «убрать позицию». */
/* Крестик — кнопка слоя (ghost, icon-only, sm). Раздел задаёт РАЗМЕР 34 px и КРАСНЫЙ
   ПО НАВЕДЕНИЮ: у ghost наведение брендовое, а «убрать» обязано читаться как убрать.
   Заливка 'danger' не годится — постоянный красный на каждой строке читается как
   «здесь ошибка» (та же причина, по которой кнопка была тихой до наведения). */
.titem .titem__del.k5b{flex:0 0 auto;width:34px;min-height:34px;height:34px;padding:0;border-radius:9px;
  color:var(--muted)}
.titem .titem__del.k5b svg{width:18px;height:18px}
.titem .titem__del.k5b:hover{color:var(--down);background:color-mix(in srgb,var(--down) 12%,transparent)}
/* ── ФОРМА ДОБАВЛЕНИЯ ПОЗИЦИИ В РЕЙС (переделана 27.08.2026) ──────────────────────────
   Было: пять разнокалиберных контролов в одну строку (обрезанный placeholder, два нативных
   <select>, две разноцветные кнопки). Стало: карточка-блок — шапка с направлением рейса,
   пикер на всю ширину + количество + одна фирменная кнопка, ниже уточнения чипами.
   Только переменные темы: блок живёт и в светлой, и в тёмной. */
.titadd{margin-top:10px;padding:11px 12px 12px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface-2);display:flex;flex-direction:column;gap:9px}
.titadd__hd{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.titadd__t{font-size:12.5px;font-weight:700;color:var(--ink)}
.titadd__dir{font-size:11.5px;color:var(--muted)}
.titadd__dir b{color:var(--ink);font-weight:600}
.titadd__dir.is-warn{color:var(--down);font-weight:600}
.titadd__main{display:flex;flex-wrap:wrap;gap:7px;align-items:flex-start}
.titadd__wrap{flex:1 1 220px;min-width:0}
.titadd__item{width:100%;min-height:38px;padding:0 11px;border:1px solid var(--line);border-radius:9px;
  background:var(--surface);color:var(--ink);font:inherit;font-size:13px}
.titadd__item:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 16%,transparent)}
/* Количество: поле + подпись «шт» одним контролом — раньше «Кол-во» жило placeholder'ом
   и после ввода единица измерения исчезала вместе с ним. */
.titadd__qtyw{display:inline-flex;align-items:center;gap:5px;min-height:38px;padding:0 10px;
  border:1px solid var(--line);border-radius:9px;background:var(--surface);flex:0 0 auto}
.titadd__qtyw input{width:44px;border:0;background:none;color:var(--ink);font:inherit;font-size:13px;
  text-align:center;padding:0}
.titadd__qtyw input:focus{outline:none}
.titadd__qtyw span{font-size:11.5px;color:var(--muted)}
/* Переключатель вида сущности: товар | заказ целиком (накопитель группирует оба рода) */
.titadd__kinds{display:inline-flex;gap:5px;margin-left:auto}
.titadd__opts{display:flex;flex-wrap:wrap;align-items:center;gap:5px 9px}
.titadd__ol{font-size:9.5px;text-transform:uppercase;letter-spacing:.05em;font-weight:700;color:var(--muted)}
.titadd__chips{display:inline-flex;flex-wrap:wrap;gap:5px}
.titadd__chip{padding:4px 10px;font-size:11.5px}
/* Подсказка на приёмке («вне плана») */
.titadd__hint{font-size:11.5px;color:var(--muted);line-height:1.4}
/* «Доступно на складе N» — появляется после выбора позиции (trAvailAttach). Оранжевая,
   когда просят больше доступного: это ещё не запрет (сервер спросит причину), но человек
   обязан увидеть цифру ДО отправки. */
.titadd__avail{flex:0 0 100%;font-size:11.5px;line-height:1.4;color:var(--muted)}
.titadd__avail.is-over{color:var(--gold);font-weight:600}
.titadd__avail.is-none{color:var(--down);font-weight:600}
.titadd__qty.is-over{color:var(--gold);font-weight:700}
/* Остаток у строки состава: подставляется после отрисовки (transferStockFill), поэтому
   пустой держим без отступов — иначе у строк-задач висела бы дырка. */
.titem__stock{display:inline-flex;flex-wrap:wrap;gap:4px;align-items:center}
.titem__stock:empty{display:none}
.titadd__qty{width:80px}
/* Одна фирменная кнопка действия (был #378ADD — синий вне палитры сайта). */
.titadd__btn{min-height:38px;padding:0 16px;border:0;border-radius:9px;background:var(--brand);color:var(--brand-ink);
  font:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:filter .15s;flex:0 0 auto}
.titadd__btn:hover{filter:brightness(1.07)}
.titadd__btn:disabled{opacity:.6;cursor:default}
/* «i» — карточка позиции (public/front/modules/nomen-card). Рядом с «Добавить», но заметно
   тише её: это справка, а не действие формы. */
.titadd__info{min-height:38px;width:38px;flex:0 0 auto;border:1px solid var(--line);border-radius:9px;
  background:var(--surface);color:var(--muted);font:inherit;font-size:14px;font-weight:700;
  font-style:italic;cursor:pointer;transition:color .15s,border-color .15s}
.titadd__info:hover{color:var(--brand-fg);border-color:var(--brand)}

/* Сборка рейса из накопителя: чекбоксы + кнопка */
/* «Собрать рейс» — ВТОРИЧНОЕ действие рядом с фирменной кнопкой добавления: контурная,
   а не второй заливной цвет (был #0f6e56 — зелёный вне палитры). */
.titmaketrip{margin-top:9px;align-self:flex-start;min-height:36px;padding:0 14px;border:1px solid var(--line);
  border-radius:9px;background:var(--surface);color:var(--ink-soft);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;transition:.13s}
.titmaketrip:hover{border-color:var(--brand);color:var(--brand-fg);background:color-mix(in srgb,var(--brand) 7%,var(--surface))}
/* «Вынуть отмеченные из рейса» — обратная операция к «Собрать рейс», поэтому и выглядит
   так же тихо: обе меняют состав машины, а не удаляют груз. */
.titunnest{margin-top:6px;align-self:flex-start;min-height:36px;padding:0 14px;border:1px solid var(--line);
  border-radius:10px;background:var(--surface);color:var(--ink-soft);font:inherit;font-size:12.5px;
  font-weight:600;cursor:pointer;transition:border-color .15s,color .15s,background .15s}
.titunnest:hover{border-color:var(--brand);color:var(--brand-fg);background:color-mix(in srgb,var(--brand) 7%,var(--surface))}

/* ── ОКНО ПОЗИЦИИ (карточка без рейса) ──────────────────────────────────────────────
   У груза без машины нет этапов, поэтому вместо пяти окон рейса — два блока и одно
   действие. Кнопка «В рейс» стоит внизу и является главной: это единственный способ
   двинуть позицию дальше. */
.trpos__act{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:12px}
.trpos__totrip{flex:0 0 auto}
.trpos__hint{flex:1 1 220px;font-size:12px;line-height:1.45;color:var(--muted)}
/* Предупреждение в диалоге смены направления: заказ разъедется по филиалам. */
.trwarn{margin:8px 0 0;padding:8px 10px;border-radius:9px;font-size:12.5px;line-height:1.45;
  color:var(--ink);background:color-mix(in srgb,var(--gold) 16%,transparent)}
/* Судьба груза при удалении рейса. Галочка стоит ВКЛЮЧЕННОЙ: обратимый исход всегда
   умолчание — возвращённую позицию удаляют вторым кликом, а удалённый груз восстановить
   нечем. */
.trdel__keep{display:flex;align-items:flex-start;gap:8px;margin:10px 0 0;font-size:13px;
  line-height:1.4;color:var(--ink);cursor:pointer}
.trdel__keep input{margin-top:2px;width:16px;height:16px;accent-color:var(--brand);flex:0 0 auto}
.trdel__note{margin:4px 0 0 24px;font-size:12px;color:var(--muted)}
/* Строка состава рейса перетаскивается: курсор об этом говорит, иначе возможность
   невидима (список свёрнут по умолчанию, и никто не догадается потянуть). */
.trtile__ent.is-drag-src{cursor:grab}
.trtile__ent.is-drag-src:active{cursor:grabbing}
.trtile__ent.is-drag{opacity:.45}

/* Доска «Перемещение»: карточка окнами по этапам (Состав рейса → Погрузка → В пути →
   Приёмка). Каждое окно — <details>; текущее раскрыто, прошлые свёрнуты. */
.titems--bare{border:0;padding:0;margin:0}
.cform--twin{display:flex;flex-direction:column;gap:10px;margin:8px 0}
/* ── КАРТОЧКА РЕЙСА: ОКНА ПО ЭТАПАМ ──────────────────────────────────────────────────
   Переработано 27.08.2026 (постановка Дмитрия: «сделай карточку шире, пересмотри вёрстку
   модалок»). Было: узкое окно 440px по умолчанию, окна этапов вплотную, синяя рамка
   открытого этапа вне палитры. Стало: широкое окно, воздух между этапами, открытый этап
   отмечен фирменным цветом. Переменные темы, без жёстких цветов. */
.modal__card:has(.cform--twin){max-width:min(860px,96vw)}
.modal__card:has(.trform){max-width:min(680px,96vw)}
/* Модалки доски перемещений: шапка плотнее и с фирменной линией, тело — с воздухом,
   крестик крупнее (общий 30×30 мелковат для касания). Локально, чтобы не трогать все
   120+ вызовов openModal в приложении. */
.modal__card:has(.cform--twin) .modal__head,
.modal__card:has(.trform) .modal__head{padding:14px 18px;background:var(--surface-2);
  border-bottom:2px solid color-mix(in srgb,var(--brand) 30%,var(--line))}
.modal__card:has(.cform--twin) .modal__head h3,
.modal__card:has(.trform) .modal__head h3{font-size:15.5px;font-weight:700}
.modal__card:has(.cform--twin) .modal__close,
.modal__card:has(.trform) .modal__close{width:34px;height:34px;border-radius:10px;font-size:15px}
.modal__card:has(.cform--twin) .modal__close:hover,
.modal__card:has(.trform) .modal__close:hover{background:color-mix(in srgb,var(--down) 12%,var(--surface-2));color:var(--down)}
/* padding-bottom:0 — В ПАРЕ со sticky-подвалом ниже. sticky липнет к границе СОДЕРЖИМОГО,
   а не к рамке блока: с нижним отступом тела сквозь него просвечивал бы уезжающий контент
   (та же грабля, что была у нижней панели карточки лида — см. CLAUDE.md). */
.modal__card:has(.cform--twin) .modal__body,
.modal__card:has(.trform) .modal__body{padding:16px 18px 0}
/* ПОДВАЛ ПРИЖАТ К НИЗУ ДИАЛОГА (замечание Дмитрия 27.08.2026): окно высокое и с прокруткой,
   и кнопки уезжали вместе с содержимым. Теперь панель действий — sticky bottom:0: контент
   скроллится ПОД ней, «Создать» всегда под рукой. Отрицательные боковые поля гасят padding
   тела (18px), иначе в углах просвечивает едущий контент. */
.modal__card:has(.cform--twin) .cform__actions,
.modal__card:has(.trform) .cform__actions{position:sticky;bottom:0;z-index:3;
  display:flex;gap:9px;justify-content:flex-end;align-items:center;
  margin:14px -18px 0;padding:12px 18px;background:var(--surface);
  border-top:1px solid var(--line);box-shadow:0 -6px 14px -12px rgba(0,0,0,.35)}
.modal__card:has(.cform--twin) .cform__ok,
.modal__card:has(.trform) .cform__ok{min-height:40px;padding:0 20px;border:0;border-radius:10px;
  background:var(--brand);color:var(--brand-ink);font:inherit;font-size:13.5px;font-weight:700;cursor:pointer}
.modal__card:has(.cform--twin) .cform__ok:hover,
.modal__card:has(.trform) .cform__ok:hover{filter:brightness(1.07)}
.modal__card:has(.cform--twin) .cform__ok:disabled,
.modal__card:has(.trform) .cform__ok:disabled{opacity:.6;cursor:default}
.modal__card:has(.cform--twin) .cform__cancel,
.modal__card:has(.trform) .cform__cancel{min-height:40px;padding:0 16px;border:1px solid var(--line);
  border-radius:10px;background:var(--surface);color:var(--ink-soft);font:inherit;font-size:13.5px;cursor:pointer}
.modal__card:has(.cform--twin) .cform__cancel:hover,
.modal__card:has(.trform) .cform__cancel:hover{border-color:var(--line-2,var(--muted));color:var(--ink)}
/* «Удалить» уводим в левый край: рядом с «Сохранить» опасная кнопка ловит случайный клик.
   Порядком, а не разметкой — блок действий общий на все доски, менять его нельзя. */
.modal__card:has(.cform--twin) .cform__actions [data-del]{order:-1;margin-right:auto;color:var(--down);
  border-color:color-mix(in srgb,var(--down) 30%,var(--line))}
.modal__card:has(.cform--twin) .cform__actions [data-del]:hover{background:color-mix(in srgb,var(--down) 10%,var(--surface));
  border-color:var(--down);color:var(--down)}
/* .cform--twin (раскладка окон) объявлена ВЫШЕ, в блоке доски — второй раз её не пишем:
   два правила одного селектора в одном файле гасят друг друга по последнему. */
.twin{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface)}
.twin[open]{border-color:color-mix(in srgb,var(--brand) 42%,var(--line));
  box-shadow:0 1px 3px color-mix(in srgb,var(--brand) 10%,transparent)}
.twin__sum{list-style:none;cursor:pointer;display:flex;align-items:center;gap:9px;padding:11px 14px;
  font-size:13.5px;font-weight:700;user-select:none;color:var(--ink)}
.twin__sum::-webkit-details-marker{display:none}
.twin__sum:hover{background:var(--surface-2)}
.twin[open] .twin__sum{border-bottom:1px solid var(--line);background:var(--surface-2)}
.twin__sum>span{flex:1;min-width:0}
.twin__chev{width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(-45deg);transition:transform .15s;flex:none}
.twin[open] .twin__chev{transform:rotate(45deg)}
.twin__body{padding:13px 14px}
/* Поля этапов — в сетку: на широком окне два поля в ряд, на телефоне одно. Раньше они
   тянулись в одну колонку через всю ширину и читались как список без структуры. */
.twin__body .cform__group{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:10px;border:0;padding:0;margin:0}
.cdet__stage--tr{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.cdet__stagechip{font-size:12px;padding:3px 10px;border-radius:20px;background:#E6F1FB;color:#185FA5}
.cdet__stagewhy{font-size:12px;color:#6b7280;flex-basis:100%}

/* ===================== «ИИ-помощник закупок» — панель над доской «Тест» (демо,
   docs/PURCH_ASSIST.md). Карточки данных и цвета тона — по образцу purchai.js
   (.pai-*), но со своим префиксом .pas-*, т.к. это отдельная витрина. ===================== */
.pasbar{background:var(--card, var(--surface));border:1px solid var(--line);border-radius:14px;
  padding:12px 14px;margin:10px 0}
.pasbar__head{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700}
.pasbar__head svg{width:18px;height:18px;flex:none}
.pasbar__ic{color:var(--brand)}
.pasbar__demo{display:inline-flex;align-items:center;font-size:11px;font-weight:700;
  padding:2px 9px;border-radius:999px;background:color-mix(in srgb, var(--brand) 12%, transparent);color:var(--brand)}
.pasbar__sp{flex:1}
.pasbar__toggle{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;
  border:1px solid var(--line);border-radius:8px;background:var(--card, var(--surface));cursor:pointer;color:var(--ink)}
.pasbar__toggle:hover{border-color:var(--brand);color:var(--brand)}
.pasbar__chev{transition:transform .15s}
.pasbar__chev.is-collapsed{transform:rotate(-90deg)}

.pas-empty{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:10px;font-size:13px;color:var(--muted)}
.pas-empty svg{width:17px;height:17px;flex:none}

.pas-kpi{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-top:10px;font-size:12.5px}
.pas-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:999px;font-weight:700;font-size:12px}
.pas-chip svg{width:13px;height:13px}
.pas-chip--crit{background:color-mix(in srgb, var(--down, #d84b40) 12%, transparent);color:var(--down, #d84b40)}
.pas-chip--warn{background:color-mix(in srgb, #b98a1c 12%, transparent);color:#b98a1c}
.pas-chip--ok{background:color-mix(in srgb, var(--up, #4a9e58) 12%, transparent);color:var(--up, #4a9e58)}
.pas-kpi__headline{font-weight:700;color:var(--ink)}
.pas-kpi__meta{color:var(--muted)}
.pas-pick{margin-left:auto;padding:6px 9px;border:1px solid var(--line);border-radius:9px;
  background:var(--card, var(--surface));color:inherit;font:inherit;font-size:12px}

.pas-block{margin-top:14px}
.pas-block__h{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;margin-bottom:8px}
.pas-block__h svg{width:15px;height:15px;color:var(--brand)}

.pas-learned{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px}
.pas-learned__it{border-left:3px solid var(--brand);border-radius:0 10px 10px 0;
  background:var(--surface-2);padding:9px 11px}
.pas-learned__t{font-weight:700;font-size:12.5px}
.pas-learned__b{font-size:12px;color:var(--muted);margin-top:3px}
.pas-learned__links{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}

.pas-top{display:flex;flex-direction:column;gap:6px}
.pas-top__row{display:flex;align-items:center;gap:9px;font-size:12.5px}
.pas-top__title{flex:1;min-width:0}

.pas-cardlink{display:inline-flex;align-items:center;border:1px solid var(--line);background:var(--card, var(--surface));
  border-radius:999px;padding:3px 10px;font:inherit;font-size:11.5px;font-weight:600;cursor:pointer;color:var(--brand)}
.pas-cardlink:hover{border-color:var(--brand);background:color-mix(in srgb, var(--brand) 8%, transparent)}

.pas-tools{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.pas-tool{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:10px;
  padding:9px 16px;font:inherit;font-size:13px;font-weight:700;cursor:pointer;background:var(--surface);color:var(--ink);transition:.15s}
.pas-tool svg{width:15px;height:15px}
.pas-tool:hover{border-color:var(--brand);color:var(--brand)}
.pas-tool:disabled{opacity:.55;cursor:default}
.pas-tool--danger:hover{border-color:var(--down);color:var(--down);background:color-mix(in srgb, var(--down) 8%, transparent)}

.pas-panel{margin-top:12px;border:1px dashed var(--line);border-radius:12px;padding:12px 14px;
  background:var(--card, var(--surface))}
.pas-panel__h{font-size:13px;font-weight:700;margin-bottom:6px}
.pas-panel__hint{font-size:12.5px;color:var(--muted);margin:0}

/* ===================== Task 6 — бейдж на плитке + блоки детали карточки
   (подсказки ИИ с голосами 👍/👎, демо-переписка «Почта по заказу»). ===================== */
.pas-badge{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:700;
  border-radius:999px;padding:2px 7px;margin-top:4px}
.pas-badge svg{width:12px;height:12px}
.pas-badge--crit{background:color-mix(in srgb, #d84b40 12%, transparent);color:#c23e34}
.pas-badge--warn{background:color-mix(in srgb, #b98a1c 12%, transparent);color:#9a7315}
.pas-badge--ok{background:color-mix(in srgb, #4a9e58 12%, transparent);color:#3d8449}

.pas-cdet{border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin:10px 0;
  background:var(--card, var(--surface))}
.pas-cdet__head{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;margin-bottom:8px}
.pas-cdet__head svg{width:15px;height:15px;color:var(--brand)}

.pas-hint{border-left:3px solid var(--line);border-radius:0 10px 10px 0;background:var(--surface-2);
  padding:9px 11px;margin-bottom:8px}
.pas-hint:last-child{margin-bottom:0}
.pas-hint--crit{border-left-color:#d84b40}
.pas-hint--warn{border-left-color:#b98a1c}
.pas-hint--ok{border-left-color:#4a9e58}
.pas-hint__top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px}
.pas-hint__body{font-size:12.5px;color:var(--ink-soft);margin:5px 0 0}
.pas-hint__act{font-size:12.5px;font-weight:600;color:var(--brand);margin:5px 0 0}
.pas-hint__refs{font-size:11.5px;color:var(--muted);margin:5px 0 0}
.pas-hint__votes{display:inline-flex;gap:4px;margin-top:7px}

.pas-vote{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;
  border:1px solid var(--line);border-radius:9px;background:transparent;font-size:14px;line-height:1;
  cursor:pointer;transition:.15s}
.pas-vote:hover{border-color:var(--brand)}
.pas-vote.is-on{background:color-mix(in srgb, var(--brand) 15%, transparent);border-color:var(--brand)}

.pas-mail{border-radius:10px;padding:8px 11px;margin-bottom:8px;font-size:12.5px}
.pas-mail:last-child{margin-bottom:0}
.pas-mail--in{background:var(--surface-2)}
.pas-mail--out{background:color-mix(in srgb, var(--brand) 6%, var(--surface-2));margin-left:18px}
.pas-mail__meta{color:var(--muted);font-size:11.5px;margin-bottom:3px}
.pas-mail__subj{font-weight:600;margin-bottom:3px}
.pas-mail__text{margin:0;color:var(--ink-soft)}
/* ═══ Раскрытая карточка «Заказы поставщикам»: широкая раскладка (2026-08-05) ═══
   Было: окно 440px и всё одной колонкой — до кнопок этапа приходилось скроллить сводку,
   форму, тумблеры и историю. Стало: 1120px, паспорт заказа слева, работа справа;
   скроллятся КОЛОНКИ, а не окно, поэтому длинная история больше не растит карточку.
   ВАЖНО: правило ширины обязано стоять НИЖЕ .modal__card:has(.tbcomm__tabs) (строка ~9253) —
   плашки коммуникаций висят на карточке заказа ВСЕГДА, и их max-width:600px иначе выиграет
   (специфичность одинаковая, побеждает то, что ниже по файлу). */
.modal__card:has(.pord){max-width:1120px;height:88vh;max-height:88vh}
.modal__card:has(.pord) .modal__body{overflow:hidden;padding:0;display:flex;flex-direction:column;flex:1;min-height:0}
.pord{display:flex;flex-direction:column;flex:1;min-height:0}
.pord__body{display:grid;grid-template-columns:320px 1fr;flex:1;min-height:0;margin:0}
.pord__left{border-right:1px solid var(--line);padding:14px;overflow-y:auto;display:flex;flex-direction:column;gap:11px}
.pord__right{padding:14px;overflow-y:auto;display:flex;flex-direction:column;gap:11px;min-width:0;min-height:0;overscroll-behavior:contain}
.pord__right>*{flex-shrink:0}
.pord > .cform__actions{flex:none;margin:0;padding:11px 16px;border-top:1px solid var(--line);background:var(--surface)}

/* ── РАСКЛАДКА КАБИНЕТА НА КАРТОЧКЕ ЗАКАЗА (2026-08-24) ────────────────────────────────
   Спека: docs/superpowers/specs/2026-08-24-purchase-card-cabinet-layout-design.md
   Левая колонка стала РЕЛЬСОМ ПОЗИЦИЙ, путь этапов уехал под рабочую зону, вкладки — в
   нижнюю полосу. Вид намеренно повторяет кабинет (.supov__positions / .supov__pos /
   .supov__track / .supov__details) — один визуальный язык на два экрана про один заказ;
   меняешь там — меняй и здесь. */
.pord__left{background:var(--surface-2)}
.pord__poshd{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted);padding:0 2px 2px}
.pord__poshd svg{width:13px;height:13px;flex:none}
.pord__posn{margin-left:auto;min-width:19px;height:19px;padding:0 5px;border-radius:999px;display:grid;
  place-items:center;background:var(--surface);color:var(--ink-soft);font-size:11px}
.pord__pos{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 8px;
  padding:8px 9px;border:1px solid transparent;border-radius:11px;background:var(--surface);transition:.15s}
.pord__pos:has(.pord__pospick){grid-template-columns:26px minmax(0,1fr) auto}
.pord__pos.is-active{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 7%,var(--surface))}
.pord__posmain{min-width:0}
.pord__posname{min-width:0;font-size:12.5px;font-weight:700;line-height:1.3;overflow-wrap:anywhere}
.pord__possub{font-size:11px;color:var(--muted);line-height:1.35;overflow-wrap:anywhere}
.pord__posqty{font-size:12px;font-weight:800;white-space:nowrap;font-variant-numeric:tabular-nums}
.pord__pospick{display:grid;place-items:center;width:22px;height:22px;cursor:pointer;position:relative}
.pord__pospick input{position:absolute;inset:0;opacity:0;cursor:pointer}
.pord__pospick span{display:grid;place-items:center;width:20px;height:20px;border:1.5px solid var(--line);
  border-radius:6px;background:var(--surface);color:transparent}
.pord__pospick span svg{width:13px;height:13px}
.pord__pospick input:checked + span{border-color:var(--brand);background:var(--brand);color:var(--brand-ink)}
.pord__posempty,.pord__poshint{margin:6px 2px 0;font-size:11.5px;line-height:1.4;color:var(--muted)}
/* РАСХОЖДЕНИЕ КОЛИЧЕСТВА (24.08.2026, жалоба владельца «менеджеру никак не подсвечивают»).
   Цифра, по которой принимают решение, обязана быть заметна и на плитке, и в карточке.
   Акцент — --gold, а не --down: завод не сделал ничего плохого (он честно сказал, сколько
   может), но решение теперь за нами; красный врал бы про ошибку. ТЕКСТ при этом --ink:
   #e0a000 буквами по светлому фону даёт ~2:1 (та же ловушка, что с розовой палитрой, —
   заливка читаемая, а тот же тон текстом нет), поэтому золото живёт в рамке, подложке,
   иконке и цифрах-акцентах. Геометрия — как у соседних плашек плитки (.tbc__warn). */
.tbc__qchg{display:flex;align-items:flex-start;gap:6px;margin:6px 0 0;padding:7px 10px;
  font-size:11.5px;font-weight:700;line-height:1.35;border-radius:var(--r-sm);color:var(--ink);
  background:color-mix(in srgb,var(--gold) 14%,var(--surface));
  border:1px solid color-mix(in srgb,var(--gold) 45%,var(--line))}
.tbc__qchg svg{width:15px;height:15px;flex:none;margin-top:.5px;color:var(--gold)}
.tbc__qchg b{font-weight:800;white-space:nowrap}
.pord__pos--qchg{border-color:color-mix(in srgb,var(--gold) 50%,var(--line));
  background:color-mix(in srgb,var(--gold) 9%,var(--surface))}
.pord__qchgt{font-weight:700;color:var(--ink)}
.pord__qchgt b{font-weight:800}
.pord__qchgt i{font-style:normal;margin-left:3px;padding:0 4px;border-radius:6px;font-size:10.5px;
  font-weight:800;background:color-mix(in srgb,var(--gold) 28%,var(--surface))}
.pord__qchg{margin:0 0 10px;padding:9px 10px;border-radius:var(--r-sm);
  background:color-mix(in srgb,var(--gold) 11%,var(--surface));
  border:1px solid color-mix(in srgb,var(--gold) 42%,var(--line))}
.pord__qchgh{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:800;color:var(--ink)}
.pord__qchgh svg{width:14px;height:14px;flex:none;color:var(--gold)}
.pord__qchgl{margin-top:7px;display:grid;gap:4px}
.pord__qchgr{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:11.5px}
.pord__qchgr span{min-width:0;overflow-wrap:anywhere}
.pord__qchgr b{white-space:nowrap;font-weight:800;font-variant-numeric:tabular-nums}
.pord__qchgr b i{font-style:normal;font-weight:600;color:var(--muted)}
.pord__qchgr--more{color:var(--muted)}
.pord__qchgf{margin:8px 0 0;font-size:11px;color:var(--ink-soft);line-height:1.4}
.pord__qchgf b{font-weight:800;color:var(--ink)}
/* Сравнение цены с прошлой поставкой (2026-08-26): пометка у позиции и плашка на плитке.
   Токенов --bad/--good/--surface2 в файле нет — берём то, чем уже пользуются соседние
   плашки этого блока: --down (красный, «дороже» — плохо для нас) / --up (зелёный,
   «дешевле» — хорошо) и --surface-2 (мягкая серая подложка) вместо --surface2. */
.pord__pcmp{display:block;margin-top:2px;font-size:11px;line-height:1.35;color:var(--muted);overflow-wrap:anywhere}
.pord__pcmp.is-up{color:var(--down);font-weight:700}
.pord__pcmp.is-down{color:var(--up);font-weight:700}
.tbc__pcmp{display:flex;align-items:flex-start;gap:6px;margin:6px 0 0;padding:7px 10px;
  border-radius:10px;background:var(--surface-2);border:1px solid var(--line);font-size:11.5px;line-height:1.35}
.tbc__pcmp svg{width:15px;height:15px;flex:none;margin-top:.5px;color:var(--muted)}
.tbc__pcmp.is-up{border-color:var(--down);color:var(--down)}
.tbc__pcmp.is-up svg{color:var(--down)}
.tbc__pcmp.is-down{border-color:var(--up);color:var(--up)}
.tbc__pcmp.is-down svg{color:var(--up)}
.tbc__pcmp.is-same{color:var(--muted)}
.pord__controls{display:flex;flex-direction:column;gap:11px;min-width:0}
/* путь этапов — под рабочей зоной, как .supov__track в кабинете */
.pord__track{flex:none;border-top:1px solid var(--line);background:var(--surface)}
/* нижняя полоса вкладок: сами вкладки не скроллятся, скроллится их панель */
.pord__details{flex:none;display:flex;flex-direction:column;min-height:0;border-top:1px solid var(--line);
  background:var(--surface)}
.pord__details .cdet__tabs{flex:none;padding:9px 16px 0}
.pord__details .pord__panes{max-height:34vh;overflow-y:auto;padding:0 16px 12px}
.tbcomm--bare{margin:0;border:0;border-radius:0}
/* Событие из СВЯЗАННОЙ карточки в сквозной истории заказа (2026-08-24): помечено номером
   своей карточки и приглушено — видно, что это «до сборки этого заказа», но лента остаётся
   одной и читается сверху вниз. */
.chist__src{display:inline-block;margin-left:5px;padding:0 6px;border-radius:999px;
  background:var(--surface-2);color:var(--muted);font-size:10.5px;font-weight:800;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.chist__row--src .chist__txt{color:var(--ink-soft)}

/* Боковые закладки коммуникаций висят на 152px за кромкой окна с ОБЕИХ сторон. Широкой
   карточке нужно 1120 + 152·2 + отступы ≈ 1460px, иначе они уезжают за экран. Поднимаем
   порог переноса закладок внутрь окна с 960px (правило ~9303) до 1460px. */
@media(max-width:1460px){
  .modal__card:has(.pord) .tbcomm__tabs{position:static;top:auto;right:auto;left:auto;width:auto;
    flex-direction:row;flex-wrap:wrap;gap:8px;padding:10px 11px 0;justify-content:flex-end}
  .modal__card:has(.pord) .tbcomm__tab{border-radius:10px;border-left:1px solid var(--line);
    border-right:1px solid var(--line);box-shadow:none}
  .modal__card:has(.pord){overflow:hidden}
}
@media(max-width:900px){
  .modal__card:has(.pord){max-width:100%;height:94vh;max-height:94vh}
  .pord__body{grid-template-columns:1fr}
  .pord__left{border-right:0;border-bottom:1px solid var(--line);overflow:visible}
  .pord__right{overflow:visible}
  .modal__card:has(.pord) .modal__body{overflow:auto}
}

/* Степпер этапов в шапке карточки заказа */
.pord__step{flex:none;border-bottom:1px solid var(--line);background:var(--surface)}
.pstep{display:flex;align-items:center;gap:10px;padding:10px 16px}
.pstep__now{font-size:13px;font-weight:800;white-space:nowrap;max-width:38%;overflow:hidden;text-overflow:ellipsis}
.pstep__now.is-bad{color:var(--down)}
.pstep__now.is-warn{color:var(--gold)}
.pstep__now.is-good{color:var(--up)}
.pstep__bar{display:flex;gap:3px;flex:1;min-width:0}
.pstep__bar i{flex:1;height:4px;border-radius:2px;background:var(--line)}
.pstep__bar i.done{background:var(--brand-2)}
.pstep__bar i.cur{background:var(--brand)}
.pstep__bar i.cur.is-bad{background:var(--down)}
.pstep__bar i.cur.is-warn{background:var(--gold)}
.pstep__bar i.cur.is-good{background:var(--up)}
.pstep__pos{font-size:11.5px;color:var(--muted);white-space:nowrap}

/* Левая рельса — паспорт заказа */
.pass__item{font-size:16.5px;font-weight:800;line-height:1.3}
.pass__sub{font-size:12px;color:var(--muted);margin-top:3px}
/* Имя поставщика-ссылка в кабинет (tbSupNameHtml): в подписи паспорта и в заголовке
   вкладки «Кабинет поставщика». Подчёркивание только по наведению — чтобы серая подпись
   не превращалась в синюю строку ссылок, но было видно, что тут можно кликнуть. */
/* Строчный, НЕ inline-flex: длинное имя завода («Чанчжоу … Индастриал Ко., Лтд») должно
   переноситься по словам внутри 320px рельсы, а flex-элемент не рвётся и уехал бы за край. */
.suplink{color:inherit;text-decoration:none;border-bottom:1px dotted currentColor}
.suplink:hover{color:var(--brand);border-bottom-color:transparent}
.suplink__ext{width:11px;height:11px;display:inline-block;vertical-align:-1px;margin-left:3px;opacity:.6}
.suplink:hover .suplink__ext{opacity:1}
.cdet__cyclehead .suplink{font-weight:600}
.cdet__cyclehead .suplink__ext{width:12px;height:12px;color:inherit}
.pord__sec{border:1px solid var(--line);border-radius:12px;padding:10px 11px}
.pord__sech{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:800;margin-bottom:6px}
/* .prow — ОБЩЕЕ имя (им же нарисованы строки присутствия, ~стр. 159), поэтому строки
   паспорта скоупим по контейнеру: карточка доски (.pord) и карточка кабинета (.supov)
   рисуют их одинаково. */
.pord .prow,.supov .prow{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:13px;padding:3.5px 0;border-bottom:1px dashed var(--line)}
.pord .prow:last-child,.supov .prow:last-child{border-bottom:0}
.pord .prow span,.supov .prow span{color:var(--muted)}
.pord .prow b,.supov .prow b{font-weight:800;white-space:nowrap}
.prow__eta{font-size:11px;color:var(--gold);font-weight:700;margin-left:auto;padding-right:8px}
.pord__buy{background:var(--surface-2);border-radius:12px;padding:11px 12px}
.pord__buyl{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:800}
.pord__buyv{font-size:26px;font-weight:800;line-height:1.15;margin-top:2px;display:flex;align-items:baseline;gap:6px}
.pord__buyv em{font-style:normal;font-size:14px;color:var(--muted);font-weight:700}
.pord__buyv .tbc__qtyinp{font:inherit;font-size:26px;font-weight:800;width:96px;padding:1px 6px;
  border:1px solid var(--line);border-radius:8px;background:var(--surface);color:inherit}
.pord__buysum{font-size:13px;margin-top:7px;color:var(--ink-soft)}
.pord__buysum b{font-weight:800}
.pord .cdet__pick{display:flex;align-items:center;gap:8px}
.pord .cdet__pick select{flex:1;min-width:0}

/* Зона действия этапа + лента заметок */
.pord__act{border:1.5px solid var(--brand);background:var(--brand-tint);border-radius:14px;padding:13px 14px}
.pord__acth{display:flex;align-items:center;gap:7px;font-size:13.5px;font-weight:800;color:var(--brand);margin-bottom:8px}
.pord__acth svg{width:16px;height:16px;flex:none}
.pord__actp{margin:0 0 9px;font-size:13px;line-height:1.5;color:var(--ink-soft)}
.pord__acthint{margin:7px 0 0;font-size:11.5px;color:var(--muted);line-height:1.45}
.pord__actb{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
/* Кнопки зоны действия («Принять/Отклонить», «Подтвердить/Нужно уточнение»). Своего размера
   у них не было: иконка внутри — svg без width/height, и браузер разворачивал её на всю
   ширину кнопки (у соседей .tbsplit__go/.tbcab__btn такое правило есть, тут забыли). */
.pord__actb>button{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:7px 14px;font-size:12.5px;line-height:1.2}
.pord__actb>button svg{width:14px;height:14px;flex:none}
.pord__act--calm{border-color:var(--line);background:var(--surface)}
.pord__act--calm .pord__acth{color:var(--ink-soft)}
.pord__act--bad{border-color:var(--down);background:color-mix(in srgb,var(--down) 8%,transparent)}
.pord__act--bad .pord__acth{color:var(--down)}
/* вложенные блоки внутри зоны — без своей рамки и отступов, рамку даёт сама зона */
.pord__act .tbrev,.pord__act .tbc__sent,.pord__act .tbmail,.pord__act .tbc__warn{border:0;background:none;margin:0;padding:0}
.pord__act .tbrev__h{display:none}
/* Номер контейнера в раскрытой карточке (2026-08-28): на виду, а не в свёрнутой вкладке
   «Кабинет поставщика». Номер моноширинным — его сверяют символ за символом с коносаментом. */
.pord__cont{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  padding:8px 11px;border-radius:10px;background:var(--surface-2)}
.pord__contl{display:inline-flex;align-items:center;gap:5px;flex:none;
  font-size:11.5px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--muted)}
.pord__contl svg{width:14px;height:14px;flex:none}
.pord__contl em{font-style:normal;font-weight:800;color:var(--ink-soft)}
.pord__contv{display:flex;gap:6px;flex-wrap:wrap;min-width:0}
.pord__contv b{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--ink);word-break:break-all}
.pord__notes{display:flex;flex-direction:column;gap:6px}
.pord__note{font-size:12.5px;line-height:1.45;padding:8px 11px;border-radius:10px;background:var(--surface-2);color:var(--ink-soft)}
.pord__note--bad{background:color-mix(in srgb,var(--down) 12%,transparent);color:var(--ink)}
.pord__note svg{width:14px;height:14px;vertical-align:-2px;margin-right:4px}
/* «Комментарий» переехал из вкладки «Реквизиты» на главную страницу карточки (2026-08-24):
   он остаётся полем той же формы (сохраняется общей кнопкой «Сохранить»), просто стоит на
   виду. Ряд формы здесь вертикальный — поле шире, чем в двухколоночных «Реквизитах». */
.pord__cmt{margin:0}
.pord__cmt .cform__row{display:flex;flex-direction:column;align-items:stretch;gap:5px;margin:0}
.pord__cmt .cform__l{font-size:11.5px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--muted)}
.pord__cmt textarea{min-height:64px;resize:vertical}

/* Вкладки правой колонки */
.pord .cdet__tabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:8px}
.pord .cdet__tab{font:inherit;font-size:12.5px;font-weight:700;padding:6px 11px;border-radius:9px;
  border:1px solid transparent;background:transparent;color:var(--muted);cursor:pointer}
.pord .cdet__tab:hover{background:var(--surface-2)}
.pord .cdet__tab.is-active{background:var(--ink);color:var(--surface)}
.pord .cdet__tab b{background:var(--brand);color:#fff;border-radius:999px;padding:0 5px;font-size:10.5px;margin-left:4px}
.pord .cdet__pane{display:none}
.pord .cdet__pane.is-active{display:block}

/* Тумблеры заказа чипами */
.pord__chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.pord__chip{position:relative;display:inline-flex;align-items:center;font-size:12px;font-weight:700;
  padding:6px 11px;border-radius:999px;cursor:pointer;border:1px solid var(--line);
  background:var(--surface);color:var(--muted)}
.pord__chip input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.pord__chip:has(input:checked){background:var(--brand-tint);border-color:var(--brand);color:var(--brand)}

/* Состав заказа-стопки */
.pord__itbl{width:100%;border-collapse:collapse;font-size:12.5px}
.pord__itbl th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--muted);font-weight:800;padding:5px 8px;border-bottom:1px solid var(--line)}
.pord__itbl td{padding:7px 8px;border-bottom:1px solid var(--line)}
.pord__itbl .num{text-align:right;white-space:nowrap;font-weight:700}
.pord__itbl tbody tr:hover{background:var(--surface-2)}
.pord__itbl tfoot td{font-weight:800;padding-top:9px;border-bottom:0}
/* поставщик изменил количество: запрошенное — зачёркнутым рядом с предложенным */
.pord__qwas{color:var(--muted);font-weight:600;margin-left:3px}
.pord__itcb{width:26px}
.pord__itbl input[type=checkbox]{accent-color:var(--brand);width:15px;height:15px}
.pord__terms{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.pord__terms .tbrev__row{display:flex;justify-content:space-between;gap:8px;font-size:12.5px;
  padding:3.5px 0;border-bottom:1px dashed var(--line)}
.pord__terms .tbrev__row span{color:var(--muted)}
@media(max-width:900px){.pord__terms{grid-template-columns:1fr}}

/* ============ «Мой день» на главной (Э3 плана главной, 2026-08-07) ============
   Менеджеру — горящие лиды (просроченные/на сегодня), РОПу — сводка команды.
   Строка — ссылка в карточку (менеджер) или кнопка-переход на доску (РОП). */
.mday__list{display:flex;flex-direction:column;gap:7px}
/* строка + трубка: ссылка на карточку и ссылка tel: рядом (вложить <a> в <a> нельзя) */
.mday__item{display:flex;align-items:stretch;gap:7px}
.mday__item>.mday__row{flex:1;min-width:0;width:auto}
.mday__call{flex:none;width:46px;display:grid;place-items:center;border-radius:12px;
  background:var(--surface);border:1px solid var(--line);color:var(--up);text-decoration:none;
  transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease,background .15s ease}
.mday__call svg{width:18px;height:18px}
.mday__call:hover{transform:translateY(-1px);border-color:var(--up);
  background:color-mix(in srgb, var(--up) 10%, var(--surface));
  box-shadow:0 4px 14px color-mix(in srgb, var(--ink) 10%, transparent)}
.mday__call.is-off{color:var(--muted);opacity:.45;border-style:dashed;cursor:default}
.mday__row{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;
  background:var(--surface);border:1px solid var(--line);color:var(--ink);
  text-decoration:none;cursor:pointer;font:inherit;font-size:13.5px;text-align:left;width:100%;
  transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.mday__row:hover{transform:translateY(-1px);border-color:var(--brand);
  box-shadow:0 4px 14px color-mix(in srgb, var(--ink) 10%, transparent)}
.mday__dot{width:9px;height:9px;border-radius:50%;flex:none}
.mday__dot.is-over{background:var(--down);box-shadow:0 0 0 3px color-mix(in srgb, var(--down) 18%, transparent)}
.mday__dot.is-today{background:#f0a92e;box-shadow:0 0 0 3px color-mix(in srgb, #f0a92e 18%, transparent)}
.mday__dot.is-ok{background:var(--up)}
.mday__main{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* inline-block + nowrap: чип этапа переносится ЦЕЛИКОМ. Без этого на телефоне, где имя
   теперь может занимать две строки, «Не дозвонился» ломался посередине слова */
.mday__col{display:inline-block;white-space:nowrap;margin-left:8px;font-size:11px;color:var(--muted);border:1px solid var(--line);
  border-radius:999px;padding:1px 8px;vertical-align:1px}
.mday__due{flex:none;font-size:12px;font-weight:600;color:var(--muted)}
.mday__due.is-over{color:var(--down)}
.mday__due.is-today{color:#c07d10}
.mday__sum{flex:none;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;min-width:72px;text-align:right}
.mday__empty{display:flex;align-items:center;gap:8px;padding:14px 16px;border-radius:12px;
  background:var(--surface);border:1px dashed var(--line);color:var(--muted);font-size:13.5px}
.mday__more{margin-top:8px;padding:8px 14px;border-radius:10px;border:1px solid var(--line);
  background:none;color:var(--muted);font:inherit;font-size:12.5px;cursor:pointer}
.mday__more:hover{border-color:var(--brand);color:var(--brand)}
.mday__calltx{display:none}
/* ТЕЛЕФОН (находка беты №8). Было: строка сжималась в одну линию, этап и сумма
   ПРЯТАЛИСЬ совсем, имя резалось многоточием, а кнопка-трубка 46px у правого края
   попадала под плавающие кнопки («Заметка»/«Техника» — position:fixed, right:22px,
   56px, то есть правый угол на телефоне занят всегда). Стало: строка раскладывается
   в три линии, имя целиком, этап и сумма ВИДНЫ, а звонок — обычная кнопка с подписью
   ПОД строкой и ПО ЛЕВОМУ краю, куда плавающие кнопки не достают. */
@media(max-width:700px){
  .mday__item{flex-wrap:wrap;row-gap:6px}
  .mday__item>.mday__row{flex:1 1 100%;flex-wrap:wrap;align-items:flex-start;row-gap:3px;column-gap:8px}
  .mday__dot{margin-top:6px}
  .mday__main{flex:1 1 calc(100% - 20px);white-space:normal;overflow:visible;text-overflow:clip}
  .mday__col{margin-left:6px}
  .mday__due{margin-left:17px}                 /* под именем, с отбивкой на ширину точки */
  .mday__sum{min-width:0;text-align:left}
  .mday__call{width:auto;min-height:38px;padding:0 14px;gap:7px;margin-left:17px}
  .mday__call svg{width:16px;height:16px}
  .mday__calltx{display:inline;font-size:12.5px;font-weight:600}
  .mday__call.is-off{opacity:.6}
}

/* ============ «Работать от лица сотрудника» (админ, Ctrl+Shift+Space) ============ */
/* Плашка РЕЖИМА, а не подсказка: с 25.08.2026 из неё можно писать, поэтому она красная и
   не сливается с интерфейсом — забыть, что ты не под собой, дороже, чем потерпеть яркость. */
#impbar{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:9999;
  display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:999px;
  background:var(--down,#e0533d);color:#fff;font-size:13px;box-shadow:0 10px 30px rgba(0,0,0,.35);
  max-width:min(92vw,760px);white-space:nowrap;
  outline:2px solid color-mix(in srgb, #fff 45%, transparent);outline-offset:-4px}
#impbar b{color:#fff;text-decoration:underline;text-underline-offset:2px}
#impbar span{overflow:hidden;text-overflow:ellipsis}
.impbar__eye{flex:none;font-size:15px}
.impbar__x{flex:none;padding:5px 12px;border-radius:999px;border:1px solid color-mix(in srgb, #fff 55%, transparent);
  background:none;color:#fff;font:inherit;font-size:12.5px;cursor:pointer}
.impbar__x:hover{background:#fff;border-color:#fff;color:var(--down,#e0533d)}
/* Чип «за него: Имя» в лентах и журналах — след действия, сделанного в режиме. */
.chrow__imp,.chist__imp{display:inline-block;padding:1px 7px;border-radius:999px;font-size:11px;
  background:color-mix(in srgb, var(--down,#e0533d) 14%, transparent);color:var(--down,#e0533d);
  border:1px solid color-mix(in srgb, var(--down,#e0533d) 30%, transparent);white-space:nowrap;vertical-align:1px}
.imppick__q{width:100%;padding:9px 12px;border-radius:10px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink);font:inherit;margin-bottom:10px}
.imppick__list{display:flex;flex-direction:column;gap:6px;max-height:46vh;overflow:auto}
.imppick__row{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 12px;border-radius:10px;border:1px solid var(--line);background:var(--surface);
  color:var(--ink);font:inherit;font-size:13.5px;cursor:pointer;text-align:left}
.imppick__row:hover{border-color:var(--brand)}
.imppick__lbl{color:var(--muted);font-size:12px;flex:none}

/* Подпись под числом живой KPI-карточки («Выполнение плана»: рублёвый план месяца) */
.metric__sub{font-size:11.5px;color:var(--muted);margin-top:2px}

/* ── Блок «Сайт был недоступен» (страница «Пользователи») ─────────────────────
   Ответ простыми словами на вопрос владельца «как часто сайт не работает»:
   вывод одной фразой, плитки в разах/минутах и полоска дней (день = столбик). */
.dwn__hero{display:flex;gap:13px;align-items:flex-start;padding:15px 16px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--surface-2);margin:2px 2px 16px}
.dwn__hero.is-bad{border-color:color-mix(in srgb,var(--down) 42%,transparent);background:color-mix(in srgb,var(--down) 7%,transparent)}
.dwn__ic{width:44px;height:44px;border-radius:13px;flex:none;display:grid;place-items:center;
  background:color-mix(in srgb,var(--c) 14%,transparent);color:var(--c)}
.dwn__ic svg{width:22px;height:22px}
.dwn__txt{min-width:0}
.dwn__h{font-size:19px;font-weight:700;color:var(--ink);line-height:1.3}
.dwn__sub{font-size:13.5px;color:var(--muted);margin-top:5px;line-height:1.55}
.dwn__sub b{color:var(--ink);font-weight:700}
.dwn .histkpi{margin-bottom:18px}
.dwn__strip{display:flex;gap:3px;align-items:stretch;margin:0 2px 6px}
.dwnbar{flex:1 1 0;min-width:4px;height:36px;border-radius:4px;background:var(--c);opacity:.92;
  transition:opacity .12s,transform .12s;cursor:default}
.dwnbar:hover{opacity:1;transform:scaleY(1.07)}
.dwn__scale{display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted);margin:0 2px 10px;
  font-variant-numeric:tabular-nums}
.dwn__legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin:0 2px 16px}
.dwn__lg{display:inline-flex;align-items:center;gap:6px}
.dwn__lgd{width:10px;height:10px;border-radius:3px;background:var(--c);flex:none}
.dwn__lt{font-size:13px;font-weight:700;color:var(--ink);margin:0 2px 9px}
.dwn__note{font-size:12.5px;color:var(--muted);margin:12px 2px 0;line-height:1.5}
@media(max-width:720px){.dwn__h{font-size:17px}.dwnbar{height:30px}}

/* ============================================================
   ТОСТ СПРАВОЧНИКОВ (11.08.2026). Результат действия — «обновлено из 1С», «записано»,
   «1С не приняла» — раньше вставлялся плашкой в поток страницы: он сдвигал список ровно
   в тот момент, когда человек смотрел на строку, с которой работал. Теперь это карточка
   внизу справа с крестиком; ошибки не гаснут сами, успех живёт несколько секунд.
   Общий на nomen/sites1c/cats1c: разметка одна, разводит только класс модификатора.
   z-index ниже --z-fab, чтобы не перекрывать кнопки чата.
   ============================================================ */
.k5tst{position:fixed;right:22px;bottom:22px;z-index:1200;display:flex;gap:9px;align-items:flex-start;
  max-width:min(420px,calc(100vw - 44px));padding:12px 14px;border-radius:13px;font-size:12.5px;line-height:1.5;
  background:var(--surface);border:1px solid var(--line);color:var(--ink);
  box-shadow:0 14px 40px rgba(0,0,0,.28);animation:k5tstIn .16s ease-out}
.k5tst svg{width:17px;height:17px;flex:none;margin-top:1px;color:var(--brand)}
.k5tst.ok{border-color:#c6e7d8}.k5tst.ok svg{color:#1d9e75}
.k5tst.err{border-color:#f3c6c6}.k5tst.err svg{color:#e24b4a}
.k5tst .k5tst__x{margin-left:2px;cursor:pointer;border:0;background:transparent;color:var(--muted);
  padding:2px;border-radius:6px;display:inline-flex;flex:none;align-self:flex-start}
.k5tst .k5tst__x:hover{color:var(--ink);background:var(--surface-2)}
.k5tst .k5tst__x svg{width:15px;height:15px;color:currentColor;margin:0}
@keyframes k5tstIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:560px){.k5tst{right:12px;left:12px;bottom:86px;max-width:none}}

/* ==== Советник цен (вкладка «Цены» отчёта «Закупки», pricead.js) ==== */
.padv-fresh { font-size: 12.5px; color: var(--muted, #8a8782); display: inline-flex; align-items: center; gap: 6px; }
.padv-fresh svg { width: 13px; height: 13px; }
.padv-err { color: #c4372c; font-size: 12px; display: inline-flex; align-items: center; gap: 4px; max-width: 420px; }
.padv-err svg { width: 12px; height: 12px; flex: none; }
.padv-filters { margin-top: 12px; }
.padv-q { border: 1px solid var(--line, #e2e0dc); border-radius: 10px; padding: 7px 11px; font: inherit; font-size: 12.5px; min-width: 220px; background: var(--card, #fff); color: inherit; }
.padv-tile--on { outline: 2px solid #2f6df0; }
.padv-tblwrap { overflow-x: auto; margin-top: 12px; }
.padv-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.padv-tbl th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted, #8a8782); padding: 6px 8px; border-bottom: 1px solid var(--line, #e2e0dc); white-space: nowrap; }
.padv-tbl td { padding: 8px; border-bottom: 1px solid var(--line, #eceae6); vertical-align: top; }
.padv-name { min-width: 220px; max-width: 360px; font-weight: 600; word-break: break-word; }
.padv-sub { font-weight: 400; font-size: 11.5px; color: var(--muted, #8a8782); margin-top: 2px; }
.padv-verd { min-width: 260px; max-width: 420px; }
.padv-reason { line-height: 1.35; }
.padv-num { text-align: right; white-space: nowrap; }
.padv-to { font-weight: 700; }
.padv-b { display: inline-block; border-radius: 8px; padding: 2px 8px; font-weight: 700; font-size: 12px; background: var(--chip, #f1efec); }
.padv-b--up { background: #fdeceb; color: #c4372c; }
.padv-b--down { background: #fff4e0; color: #a06a00; }
.padv-mark { display: inline-block; margin-left: 6px; border-radius: 6px; padding: 1px 6px; font-size: 10.5px; background: var(--chip, #f1efec); color: var(--muted, #6f6d68); }
.padv-mark--dead { background: #fff4e0; color: #a06a00; }
.padv-mark--ok { background: #e8f5ec; color: #1d7a3e; }
.padv-pinbtn { padding: 4px 8px; }
.padv-none { text-align: center; color: var(--muted, #8a8782); padding: 24px 0; }
.padv-set { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; border-radius: 8px; padding: 2px 4px; }
.padv-set > span:first-child { min-width: 250px; font-size: 12.5px; }
.padv-set input[type="number"] { width: 90px; border: 1px solid var(--line, #e2e0dc); border-radius: 8px; padding: 5px 8px; font: inherit; }
.padv-set--bad { background: #fdeceb; }
.padv-set--bad input[type="number"] { border-color: #c4372c; }
.padv-errtext { color: #c4372c; font-size: 12px; display: inline-flex; align-items: center; gap: 5px; }
.padv-errtext svg { width: 13px; height: 13px; flex: none; }
/* Беседы по ЗАЯВКЕ под основным чатом вкладки «Поставщики» (2026-08-18): велись до сборки
   заказа, живут на позиции. Ждут ответа — синяя рамка, как у чипа «Неотвеченные». */
.tbcomm__early{margin-top:10px;padding-top:9px;border-top:1px dashed var(--line)}
.tbcomm__early.is-wait{border-top-color:#0ea5e9}
.tbcomm__earlyhd{display:flex;align-items:center;gap:7px;margin-bottom:7px;font-size:12px;font-weight:700;color:var(--ink-soft)}
.tbcomm__earlyhd svg{width:13px;height:13px;color:#0ea5e9}
.tbcomm__early.is-wait .tbcomm__earlyhd{color:#0369a1}
/* ---- Шапка навигации: Должности / Поставщики / Франчайзи (topnav.js) ---- */
.topnav{background:var(--surface);border-bottom:1px solid var(--line);padding:6px 16px}
.topnav[hidden]{display:none}
.tnav__row{display:flex;align-items:center;gap:8px;min-width:0;padding:2px 0}
.tnav__row--deep{padding-left:18px}
.tnav__list{display:flex;align-items:center;gap:8px;flex:1;min-width:0;overflow-x:auto;
  scrollbar-width:none;-ms-overflow-style:none}
.tnav__list::-webkit-scrollbar{display:none}
.tnav__top{display:inline-flex;align-items:center;gap:6px;flex:none;cursor:pointer;white-space:nowrap;
  border:1px solid var(--line);border-radius:999px;background:var(--bg);padding:5px 12px;
  font-size:12.5px;font-weight:600;color:var(--ink-soft);transition:.15s}
.tnav__top:hover{border-color:var(--brand);color:var(--brand)}
.tnav__top.is-open{background:var(--brand);border-color:var(--brand);color:#fff}
.tnav__caret{display:inline-flex;transition:transform .15s}
.tnav__caret svg{width:12px;height:12px}
.tnav__top.is-open .tnav__caret{transform:rotate(180deg)}
.tnav__chip{display:inline-flex;align-items:center;flex:none;cursor:pointer;white-space:nowrap;
  border:1px solid var(--line);border-radius:999px;background:var(--surface);padding:4px 11px;
  font-size:12.5px;font-weight:600;color:var(--ink-soft);text-decoration:none;transition:.15s}
.tnav__chip:hover{border-color:var(--brand);color:var(--brand)}
.tnav__chip.is-open{background:color-mix(in srgb, var(--brand) 14%, var(--surface));
  border-color:var(--brand);color:var(--brand)}
.tnav__board{display:inline-flex;align-items:center;gap:8px;flex:none;cursor:pointer;white-space:nowrap;
  border:1px solid var(--line);border-radius:999px;background:var(--surface);padding:4px 11px 4px 5px;transition:.15s}
.tnav__ic{width:22px;height:22px;border-radius:8px;flex:none;display:grid;place-items:center;
  background:color-mix(in srgb, var(--c, var(--brand)) 14%, var(--surface));color:var(--c, var(--brand))}
.tnav__ic svg{width:13px;height:13px}
.tnav__board .tnav__t{font-size:12.5px;font-weight:600;color:var(--ink-soft);transition:.15s}
.tnav__board:hover{border-color:var(--c, var(--brand))}
.tnav__board:hover .tnav__t{color:var(--c, var(--brand))}
.tnav__board.is-active{background:var(--c, var(--brand));border-color:var(--c, var(--brand))}
.tnav__board.is-active .tnav__ic{background:rgba(255,255,255,.22);color:#fff}
.tnav__board.is-active .tnav__t{color:#fff}
.tnav__note{font-size:12.5px;color:var(--muted);padding:4px 2px}
@media (max-width:560px){ .topnav{padding:6px 12px} .tnav__row--deep{padding-left:10px} }

/* ============================================================
   ДОСКА ПОСТАВЩИКА — раскладка «Приборная» (2026-08-24, выбор владельца)
   Колонка = белый контейнер с цветной крышкой-загрузкой и ЛИПКОЙ шапкой-KPI;
   карточка = «этажи» с разделителями (заголовок и деньги → состав → подвал).
   СОСТАВ КАРТОЧКИ НЕ МЕНЯЕТСЯ — ни одно поле не убрано, меняется только раскладка.
   Всё строго под .supboard: доска закупок и остальные 23 доски не затрагиваются.
   ============================================================ */
.supboard__cols{gap:16px}
/* без overflow:hidden — он превращает колонку в скролл-контейнер и убивает sticky-шапку */
.supboard .col{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:0 10px 10px}

/* полоса «загрузки» этапа → цветная крышка колонки во всю ширину */
.supboard .col__pulse{height:3px;margin:0 -10px;padding:0;border-radius:var(--r) var(--r) 0 0;overflow:hidden;
  background:color-mix(in srgb, var(--tone) 15%, transparent)}
.supboard .col__pulse .pseg__bar{width:var(--h,8%);height:100%;background:var(--tone);border-radius:0}

/* ── Шапка колонки: липнет под топбаром, иконка этапа + две KPI-плитки ── */
/* Шапка этапа — В ПОТОКЕ, без sticky (27.08.2026). Липкой она была, пока колонки кабинета
   росли вниз и скроллилась вся страница: `top:53px` подводил её под шапку сайта. С переходом
   на ленту колонок (высота по экрану, прокрутка внутри .col__body) шапка и так всегда видна,
   а sticky стал вредить: лента с overflow-x:auto — это ещё и вертикальный скролл-порт
   (браузер поднимает overflow-y:visible до auto, когда вторая ось не visible), и шапка
   съезжала в нём на те самые 53px вниз от своего места, накрывая собой верх первой карточки
   — «обрезанная превьюшка», которую владелец видел на проде. */
.supboard .col__head{position:static;z-index:3;margin:0 -10px;padding:11px 12px 11px;gap:9px;
  background:var(--surface);border:0;border-bottom:1px solid var(--line);border-radius:0;box-shadow:none}
.supboard .col__ic{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;flex:none;
  background:color-mix(in srgb, var(--tone) 12%, transparent);color:var(--tone)}
.supboard .col__ic svg{width:14px;height:14px;display:block}
.supboard .col__dot{display:none}                      /* точку заменила иконка-плитка */
.supboard .col__name{font-size:10.5px;letter-spacing:.35px;color:var(--ink-soft)}
.supboard .col__hgr{gap:6px}
.supboard .col__n{margin-left:0;background:var(--surface-2);border-color:transparent}
.supboard .col__hbar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:7px;flex-wrap:nowrap}
.supboard .col__hbar>:only-child{grid-column:1 / -1}
.supboard .col__sum,.supboard .col__money{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;
  gap:2px;min-width:0;flex:initial;white-space:normal;padding:6px 9px;border:0;border-radius:9px;background:var(--surface-2)}
.supboard .col__sum small,.supboard .col__money>small{font-size:8.5px;font-weight:800;letter-spacing:.03em;
  text-transform:uppercase;color:var(--muted)}
.supboard .col__sum b{font-size:13px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.supboard .col__money .supmoneyvalue{justify-content:flex-start}
.supboard .col__money .supmoneyvalue__part b{font-size:13px;color:var(--ink)}
.supboard .col__hot{display:flex}
.supboard .col__hot .col__over{font-size:10px;padding:3px 9px}

.supboard .col__body{display:flex;flex-direction:column;gap:12px;padding:12px 0 0}

/* ── Пустой этап: иконка-в-плитке + дружелюбный текст (правило пустых состояний) ── */
.supboard .supkb__empty{display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:26px 12px;opacity:1;text-align:center}
.supboard .supkb__empty-ic{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;
  background:var(--surface-2);color:var(--muted)}
.supboard .supkb__empty-ic svg{width:20px;height:20px;display:block}
.supboard .supkb__empty b{font-size:13px;font-weight:700;color:var(--ink-soft)}
.supboard .supkb__empty i{font-style:normal;font-size:11.5px;color:var(--muted)}

/* ── Карточка «этажами»: паддинг уходит на детей, разделители во всю ширину ── */
/* flex:none — ОБЯЗАТЕЛЬНО, не косметика (найдено владельцем на проде 27.08.2026, колонка
   «Согласование счёта» с 43 заказами превратилась в стопку полосок по 2 px). Тело колонки —
   flex-контейнер с ограниченной высотой, карточки в нём flex-элементы, а `overflow:hidden`
   ниже ОТМЕНЯЕТ им автоматический минимальный размер (min-height:auto работает только при
   overflow:visible — так устроен flexbox). Пока колонка кабинета росла вниз без ограничения,
   сжимать было нечего; как только высота стала по экрану, все карточки схлопнулись.
   На доске «Заказы поставщикам» того же не происходит именно потому, что там у .bcard
   overflow остаётся visible. */
.supboard .bcard{padding:0;overflow:hidden;flex:none}
.supboard .bcard>*{padding-left:12px;padding-right:12px}
.supboard .bcard>:first-child{padding-top:11px}
.supboard .bcard>:last-child{padding-bottom:11px}
.supboard .bcard__t{font-size:13.5px;font-weight:700;line-height:1.34}
.supboard .bcard__sub{font-size:11.5px}
/* деньги — крупным числом без коробки (этаж «сколько это стоит») */
.supboard .bcard .supkbmoney{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin:9px 0 0;
  padding:0 12px;border:0;background:none;border-radius:0}
.supboard .bcard .supkbmoney__label{font-size:9.5px;color:var(--muted);white-space:nowrap}
.supboard .bcard .supkbmoney__label>svg{width:12px;height:12px}
.supboard .bcard .supkbmoney__value{margin-left:0;text-align:left}
.supboard .bcard .supmoneyvalue__part b{font-size:17px;font-weight:800;letter-spacing:-.3px}
.supboard .bcard .supkbmoney.is-empty .supmoneyvalue__empty{font-size:12px}
/* ── Идиом карточки лида со «Сплошного канбана» (2026-08-24, «сделай дизайн карточек как
   тут»): смысловые блоки отделены ПУНКТИРОМ и подписаны мелким заглавным лейблом
   (.bcard__exp + .bx__lbl — те же классы, что у лида), внизу полоса готовности
   (.bcard__prob). Подложек-этажей больше нет: два канбана читаются одинаково. ── */
.supboard .bcard__t{font-size:14px;line-height:1.35}
.supboard .bcard .bcard__exp{margin:10px 0 0;padding:9px 12px 0;border-top:1px dashed var(--line)}
.supboard .bcard .bx__lbl{margin:0 0 5px;font-size:9px}
.supboard .bcard .supgc__list{margin:0;padding:0;gap:5px;background:none;border:0}
.supboard .bcard .supgc__it{padding:0;background:none;border-radius:0}
.supboard .bcard .supgc__more{padding-left:0;font-weight:700}
.supboard .bcard .supgc__empty{margin:10px 0 0;padding:9px 12px 0;background:none;
  border-top:1px dashed var(--line);border-bottom:0}
/* полоса готовности — во всю ширину карточки, как «вероятность» у лида */
.supboard .bcard .bcard__prob{margin:10px 0 0;padding:0 12px}
/* подвал: счётчики времени и даты — за тем же пунктиром */
.supboard .bcard .supkbtime{margin:10px 0 0;padding:9px 12px 11px;border-top:1px dashed var(--line)}
.supboard .bcard .supkbtime__counters>span{background:var(--surface-2)}

/* ===== Отчёт «Гарантия: закрытие обращений»: поиск и карточка лида ===== */
/* Поиск живёт в одной строке с фильтрами: занимает свободное место слева,
   выпадашки прижаты вправо своим .secthead__r. */
.wr-head{flex-wrap:nowrap;gap:14px}
@media (max-width:900px){.wr-head{flex-wrap:wrap}}
.wr-search__in{flex:1 1 340px;min-width:200px;max-width:640px;padding:9px 12px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--surface);color:var(--ink);font-size:13px;font-weight:600}
.wr-search__in::placeholder{color:var(--muted);font-weight:500}
.wr-search__in:focus{outline:none;border-color:var(--brand)}
/* Номер лида — единственная ссылка в строке; сама строка открывается двойным кликом. */
.srctbl a.wr-open{color:var(--brand);text-decoration:none;border-bottom:1px dotted currentColor}
.srctbl a.wr-open:hover{text-decoration:none;opacity:.8}

.wr-card__kv{display:grid;grid-template-columns:minmax(140px,180px) 1fr;gap:6px 16px;margin-bottom:18px}
.wr-kv{display:contents}
.wr-kv__k{color:var(--muted);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding-top:2px}
.wr-kv__v{color:var(--ink);font-size:13.5px;font-weight:600;min-width:0;overflow-wrap:anywhere}
.wr-pre{white-space:pre-wrap;font-weight:500}
.wr-sect{margin-bottom:16px}
.wr-sect__t{font-weight:700;font-size:13px;margin-bottom:6px;color:var(--ink)}
/* Таблицы внутри карточки узкие и текстовые — левое выравнивание читается лучше цифрового. */
.wr-sect .srctbl{min-width:0}
.wr-sect .srctbl thead th,.wr-sect .srctbl td{text-align:left;white-space:normal}
.wr-sect .srctbl tbody tr{cursor:default}
.wr-sect .srctbl tbody tr:hover{background:transparent}
@media (max-width:640px){.wr-card__kv{grid-template-columns:1fr;gap:2px}
  .wr-kv__k{padding-top:8px}}

/* ==== Фильтр по поставщику на доске «Заказы поставщикам» (2026-08-26) ====
   Чип «Поставщик» — тот же .bfilter (бирюзовый, как раздел «Поставщики», чтобы не спорить
   с янтарным «Нужно действие» и синим «Неотвеченные»: это отбор по адресату, а не очередь
   работы). Панель раскрывается ПОД строкой фильтров, отдельной строкой флекса
   (.board__filters — flex-wrap, отсюда flex-basis:100%), а не выпадашкой поверх канбана. */
.bfilter--sup:hover{border-color:#0d9488;color:#0f766e}
.bfilter--sup.is-active{background:#0d9488;border-color:#0d9488;color:#fff}
.bfilter__chev{width:12px;height:12px;opacity:.7}
.supfltbox{flex:0 0 100%;margin:2px 0 0;padding:10px 12px;border:1px solid var(--line);border-radius:12px;
  background:var(--surface);box-shadow:0 4px 14px rgba(15,23,42,.06)}
.supfltbox__l{display:flex;align-items:center;gap:6px;margin:0 0 8px;font-size:11.5px;font-weight:700;
  letter-spacing:.02em;text-transform:uppercase;color:var(--muted)}
.supfltbox__l svg{width:14px;height:14px;color:#0d9488}
.supfltbox__row{display:flex;flex-wrap:wrap;gap:7px}
.supfltbox__row .bflt__chip i{font-style:normal;font-weight:800;font-size:10.5px;background:var(--surface-2);
  color:var(--muted);border-radius:999px;padding:1px 6px}
.supfltbox__row .bflt__chip.is-on i{background:rgba(255,255,255,.26);color:#fff}
.supfltbox__none{font-size:12px;color:var(--muted)}
.supfltbox__acts{display:flex;justify-content:flex-end;gap:8px;margin-top:9px}
.supfltbox__x{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);background:none;
  color:var(--muted);border-radius:999px;padding:4px 11px;font:inherit;font-size:12px;cursor:pointer}
.supfltbox__x svg{width:12px;height:12px}
.supfltbox__x:hover{border-color:#0d9488;color:#0f766e}

/* ── КОММЕНТАРИЙ КРОНОС ПОД НАЗВАНИЕМ ПОЗИЦИИ (2026-08-26) ───────────────────────
   Одна плашка на все списки кабинета поставщика (supKrNoteHtml в app.js): плитки
   канбана, рельса раскрытой карточки, «Состав заказа», полка выбора позиций, паспорт.
   Читается как ПРОСЬБА, а не как ошибка: тон бирюзовый (наш «мы просим»), не красный —
   красный в кабинете занят отказами и просрочкой. Длинный текст обрезаем здесь, а не в
   JS: полный остаётся в title (и в паспорте, где clamp снят). */
.supkrn{display:flex;gap:6px;align-items:flex-start;margin:4px 0 2px;padding:5px 7px;border-radius:8px;
  background:color-mix(in srgb, #0d9488 9%, transparent);border:1px solid color-mix(in srgb, #0d9488 26%, transparent);
  font-size:12px;line-height:1.35;color:var(--ink);text-align:left}
.supkrn svg{width:13px;height:13px;flex:0 0 auto;margin-top:1px;color:#0d9488}
.supkrn span{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.supkrn--mini{margin:2px 0;padding:3px 6px;font-size:11.5px;border-radius:7px}
.supkrn--mini span{-webkit-line-clamp:2}
.pass__sub + .supkrn span{-webkit-line-clamp:unset}
/* Поле «Комментарий для поставщика» в карточке доски «Заказы поставщикам» */
.pord__krn{margin-top:10px;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2)}
.pord__krnh{display:flex;flex-wrap:wrap;gap:6px;align-items:baseline;font-size:12.5px;font-weight:600;color:var(--ink)}
.pord__krnh svg{width:14px;height:14px;color:#0d9488}
.pord__krnh em{font-style:normal;font-weight:400;font-size:11.5px;color:var(--ink-soft)}
.pord__krni{width:100%;margin-top:6px;padding:7px 9px;border:1px solid var(--line);border-radius:8px;
  background:var(--surface);color:var(--ink);font:inherit;font-size:12.5px;line-height:1.4;resize:vertical;min-height:52px}
.pord__krni:focus{outline:none;border-color:#0d9488;box-shadow:0 0 0 3px color-mix(in srgb, #0d9488 18%, transparent)}
.pord__krns{margin-top:5px;font-size:11.5px;color:#0d9488}
.pord__krns.is-bad{color:#e0533d}

/* Временная общая лента в строковом supComment/krNote. Плоская, без пузырей и без
   разделения сторон; сохраняется штатной кнопкой карточки. */
.supct{margin-top:10px;overflow:hidden;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.supct__head{display:flex;align-items:flex-start;gap:9px;padding:11px 12px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.supct__headicon{display:grid;place-items:center;width:26px;height:26px;flex:0 0 auto;border-radius:8px;background:color-mix(in srgb,#0d9488 11%,transparent);color:#0d9488}
.supct__headicon svg{width:14px;height:14px}.supct__head>span:nth-child(2){min-width:0}
.supct__head b{display:block;font-size:12.5px;font-weight:750;color:var(--ink)}
.supct__head small{display:block;margin-top:1px;font-size:10.5px;color:var(--muted)}
.supct__head>i{margin-left:auto;padding:1px 7px;border-radius:999px;background:var(--surface);color:var(--muted);font-size:10px;font-style:normal;font-weight:750}
.supct__feed{max-height:340px;overflow-y:auto;padding:0 12px}
.supct__msg{display:flex;gap:10px;padding:11px 0;border-bottom:1px solid color-mix(in srgb,var(--line) 72%,transparent)}
.supct__msg:last-child{border-bottom:0}.supct__avatar{display:grid;place-items:center;width:30px;height:30px;flex:0 0 auto;border-radius:50%;background:#233748;color:#fff;font-size:9.5px;font-weight:800}
.supct__avatar--supplier{background:#e5f0e7;color:#40724a}.supct__main{min-width:0;flex:1}
.supct__meta{display:flex;align-items:center;gap:7px;min-height:24px}.supct__meta>b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11.5px;color:var(--ink)}
.supct__meta time{flex:0 0 auto;font-size:9.5px;color:var(--muted)}.supct__acts{display:flex;align-items:center;gap:2px;margin-left:auto}
.supct__acts button{display:inline-flex;align-items:center;gap:4px;height:26px;padding:0 7px;border:0;border-radius:7px;background:none;color:var(--muted);font:inherit;font-size:9.5px;font-weight:650;cursor:pointer}
.supct__acts button:hover{background:var(--surface-2);color:var(--ink)}.supct__acts button.is-delete{width:26px;padding:0;justify-content:center}
.supct__acts button.is-delete:hover{background:color-mix(in srgb,#e2563f 9%,transparent);color:#e2563f}.supct__acts svg{width:12px;height:12px}
.supct__text{font-size:12px;line-height:1.55;color:var(--ink-soft);overflow-wrap:anywhere}.supct__text a{color:#0d7f76;font-weight:650;text-decoration:underline;text-decoration-color:#99d2cd;text-underline-offset:2px}
.supct__edit textarea{width:100%;min-height:66px;padding:7px 8px;border:1px solid #0d9488;border-radius:8px;background:var(--surface);color:var(--ink);font:inherit;font-size:12px;line-height:1.5;resize:vertical;outline:none}
.supct__edit>div{display:flex;justify-content:flex-end;gap:6px;margin-top:6px}.supct__edit button{padding:5px 9px;border:1px solid var(--line);border-radius:7px;background:var(--surface);color:var(--ink-soft);font:inherit;font-size:10px;font-weight:700;cursor:pointer}
.supct__edit button.is-primary{border-color:#0d9488;background:#0d9488;color:#fff}.supct__empty{margin:0;padding:18px 4px;text-align:center;font-size:11.5px;color:var(--muted)}
.supct__compose{display:flex;align-items:flex-end;gap:8px;padding:10px 12px;border-top:1px solid var(--line);background:var(--surface-2)}
.supct__compose textarea{min-height:42px;flex:1;padding:8px 9px;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--ink);font:inherit;font-size:12px;line-height:1.4;resize:vertical;outline:none}
.supct__compose textarea:focus{border-color:#0d9488;box-shadow:0 0 0 3px color-mix(in srgb,#0d9488 12%,transparent)}
.supct__compose>button{display:grid;place-items:center;width:36px;height:36px;flex:0 0 auto;border:0;border-radius:9px;background:#ff4d06;color:#fff;cursor:pointer;box-shadow:0 3px 8px color-mix(in srgb,#ff4d06 22%,transparent)}
.supct__compose>button svg{width:15px;height:15px}.supctmini{display:flex;align-items:flex-start;gap:6px;margin:3px 0;padding:4px 6px;border:1px solid color-mix(in srgb,#0d9488 20%,transparent);border-radius:7px;background:color-mix(in srgb,#0d9488 7%,transparent);font-size:11px;text-align:left}
.supctmini__avatar{display:grid;place-items:center;width:20px;height:20px;flex:0 0 auto;border-radius:50%;background:#233748;color:#fff;font-size:7px;font-weight:800}.supctmini__main{min-width:0;flex:1}.supctmini__main>b{font-size:10px}.supctmini__main time{margin-left:5px;font-size:8.5px;color:var(--muted)}
.supctmini__main>span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere;line-height:1.35;color:var(--ink-soft)}.supctmini__main a{color:#0d7f76;text-decoration:underline}.supctmini>i{flex:0 0 auto;border-radius:999px;background:var(--surface);padding:1px 5px;color:var(--muted);font-size:9px;font-style:normal;font-weight:750}
@media(max-width:700px){.supct__meta{flex-wrap:wrap}.supct__acts{width:auto}.supct__acts button span{display:none}.supct__feed{max-height:300px}.supct__compose>.supct__avatar{display:none}}

/* ===== ЧЕКЛИСТ ПОГРУЗКИ И ПРИЁМКИ ПЕРЕМЕЩЕНИЯ (2026-08-26, docs/MOVES.md) =====
   Главный сценарий — телефон в руке грузчика: крупные цели нажатия (44px+), одна
   основная кнопка на строку, состояние строки видно цветом рамки. Единицы рисуются
   сеткой только до 20 штук (дальше «+1 / остаток»), поэтому фиксированной высоты у
   блока нет — он растёт по содержимому. */
.tchk__box{display:flex;flex-direction:column;gap:8px}
.tchk__top{font-size:12.5px;color:var(--muted);padding:2px 0 4px}
.tchk__top b{font-size:15px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.tchk__badn{color:var(--down);font-weight:700}
.tchk__bar{height:8px;border-radius:99px;background:var(--surface-2);overflow:hidden;margin-top:6px}
.tchk__bar i{display:block;height:8px;border-radius:99px;background:var(--up)}
.tchk{border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px;background:var(--surface)}
.tchk--done{border-color:color-mix(in srgb,var(--up) 45%,var(--line));background:color-mix(in srgb,var(--up) 5%,var(--surface))}
.tchk--bad{border-color:color-mix(in srgb,var(--down) 45%,var(--line));background:color-mix(in srgb,var(--down) 5%,var(--surface))}
.tchk__h{display:flex;align-items:flex-start;gap:9px}
.tchk__ic{width:22px;height:22px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-size:11px;font-weight:800;background:var(--surface-2);color:var(--muted)}
.tchk--done .tchk__ic{background:var(--up);color:#fff}
.tchk--bad .tchk__ic{background:var(--down);color:#fff}
.tchk__nm{flex:1;min-width:0;font-size:13.5px;font-weight:700;line-height:1.3}
.tchk__cnt{font-size:12px;font-weight:800;white-space:nowrap;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.tchk__who{font-size:10.5px;color:var(--muted);line-height:1.5;margin-top:5px;padding-left:31px}
.tchk__who--none{opacity:.75}
.tchk__acts{display:flex;gap:7px;margin-top:9px;flex-wrap:wrap;padding-left:31px}
.tchk__units{display:flex;flex-wrap:wrap;gap:6px;flex-basis:100%}
.tchk__u{width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:var(--surface);
  font-size:12px;font-weight:700;color:var(--ink-soft);cursor:pointer}
.tchk__u:hover{border-color:var(--up);color:var(--up)}
.tchk__u.is-ok{background:var(--up);border-color:var(--up);color:#fff;cursor:default}
.tchk__u.is-bad{background:var(--down);border-color:var(--down);color:#fff;cursor:default}
.tchk__big{flex:1;min-width:150px;min-height:44px;border-radius:11px;border:0;background:var(--up);color:#fff;
  font-size:13.5px;font-weight:800;cursor:pointer}
.tchk__big:hover{filter:brightness(1.07)}
.tchk__one{min-width:56px;min-height:44px;border-radius:11px;border:1px solid var(--line);background:var(--surface);
  font-size:14px;font-weight:800;color:var(--ink-soft);cursor:pointer}
.tchk__one:hover{border-color:var(--up);color:var(--up)}
.tchk__bad{min-height:44px;padding:0 14px;border-radius:11px;border:1px solid var(--line);background:var(--surface);
  font-size:12.5px;font-weight:800;color:var(--down);cursor:pointer}
.tchk__bad:hover{border-color:var(--down);background:color-mix(in srgb,var(--down) 8%,var(--surface))}
.tchk__undo{min-height:38px;padding:0 13px;border-radius:9px;border:1px solid var(--line);background:var(--surface);
  font-size:11.5px;font-weight:700;color:var(--muted);cursor:pointer}
.tchk__undo:hover{border-color:var(--brand);color:var(--brand)}
.tchk__note{font-size:11.5px;color:var(--muted);line-height:1.5;padding-top:8px;border-top:1px dashed var(--line)}
.tchk__empty{padding:18px;text-align:center;font-size:12px;color:var(--muted);border:1px dashed var(--line);border-radius:var(--r-sm)}

/* Форма проблемы: причина из реестра + обязательное фото */
@media (max-width:640px){
  .tchk__who,.tchk__acts{padding-left:0}
  .tchk__big{min-width:100%}
}
.tchk__extra{min-height:38px;padding:0 13px;border-radius:9px;border:1px dashed var(--line);background:var(--surface);
  font-size:11.5px;font-weight:700;color:var(--gold);cursor:pointer}
.tchk__extra:hover{border-color:var(--gold);border-style:solid;background:color-mix(in srgb,var(--gold) 8%,var(--surface))}
.tchk__extran{font-size:11px;font-weight:800;color:var(--gold);align-self:center}
.tchk__miss{min-height:44px;padding:0 13px;border-radius:11px;border:1px solid var(--line);background:var(--surface);
  font-size:12.5px;font-weight:800;color:var(--muted);cursor:pointer}
.tchk__miss:hover{border-color:var(--down);color:var(--down)}
/* ── ТЕХНИКА ПО НОМЕРАМ (Ф2 слоя остатков): бейджи серийников, поле ввода на погрузке,
   решение по каждому номеру на приёмке. Цели нажатия — те же 44px, что у всего чеклиста. */
.tchk__techtag{font-size:10px;font-weight:700;color:var(--brand);border:1px solid currentColor;
  border-radius:6px;padding:0 6px;vertical-align:1px;white-space:nowrap}
.tchk__sns{display:flex;flex-wrap:wrap;gap:5px;margin:6px 0 2px}
.tchk__sn{font-family:inherit;font-size:11.5px;font-weight:700;padding:2px 8px;border-radius:7px;
  background:color-mix(in srgb,var(--up) 10%,var(--surface));color:var(--up);border:1px solid color-mix(in srgb,var(--up) 35%,var(--line))}
.tchk__sn.is-bad{background:color-mix(in srgb,var(--down) 10%,var(--surface));color:var(--down);border-color:color-mix(in srgb,var(--down) 35%,var(--line))}
.tchk__snadd{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px;align-items:center}
.tchk__snin{flex:1;min-width:160px;min-height:42px;padding:0 11px;border:1px solid var(--line);
  border-radius:10px;background:var(--surface);color:var(--ink);font:inherit;font-size:13px}
.tchk__snin:focus{outline:none;border-color:var(--brand)}
.tchk__snlist{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.tchk__snrow{display:flex;flex-wrap:wrap;gap:7px;align-items:center;padding:6px 9px;border:1px solid var(--line);
  border-radius:10px;background:var(--surface-2)}
.tchk__snrow b{font-size:12.5px;margin-right:auto}
/* Крестик отмены решения по КОНКРЕТНОМУ номеру: точечная отмена вместо «последней своей» */
.tchk__snx{flex:0 0 auto;width:30px;height:30px;display:grid;place-items:center;border:0;background:none;
  color:var(--muted);font-size:17px;line-height:1;cursor:pointer;border-radius:8px}
.tchk__snx:hover{color:var(--down);background:color-mix(in srgb,var(--down) 12%,transparent)}
.tchk__snrow .tchk__big{min-height:38px}
.tchk__snrow.is-ok{border-color:color-mix(in srgb,var(--up) 40%,var(--line))}
.tchk__snrow.is-bad,.tchk__snrow.is-miss{border-color:color-mix(in srgb,var(--down) 40%,var(--line))}
.tchk__sndec{font-size:11.5px;font-weight:800}
.tchk__snrow.is-ok .tchk__sndec{color:var(--up)}
.tchk__snrow.is-bad .tchk__sndec,.tchk__snrow.is-miss .tchk__sndec{color:var(--down)}
/* ── СЕКЦИИ НАПРАВЛЕНИЙ В КОЛОНКАХ-НАКОПИТЕЛЯХ (trColBody) ───────────────────────────
   Общий вид с очередью приёмки по контейнеру (.credsec), плюс подстрочник «N поз. · M шт»
   и кнопка «объединить», когда накопителей на направление больше одного: два параллельных
   накопителя одного «откуда → куда» — это расползшиеся заявки, а не два плана. */
/* ⚠️ СТРАХОВКА НА РАЗМЕР ИКОНКИ В ЗАГОЛОВКЕ СЕКЦИИ. `svgIcon()` отдаёт <svg> БЕЗ
   width/height, поэтому во flex-контейнере он растягивается на всю доступную ширину: в
   заголовке секции направления иконка выросла в гигантскую стрелку и вытеснила сам текст
   «Москва → Уфа» (находка Дмитрия 27.08.2026). У очереди приёмки размер задан своим
   правилом (.rcvsec .credsec__t svg) — потому там и не проявлялось. Из заголовка направления
   иконку убрал вовсе (стрелка «→» в тексте уже говорит всё), а это правило оставляю
   страховкой для любого будущего заголовка секции. */
.credsec__t svg{width:13px;height:13px;flex:none;vertical-align:-2px}
/* ═══ НАПРАВЛЕНИЕ И РЕЙС (макет «Требует отгрузки», 27.08.2026) ═══════════════════════
   Модель на экране: НАПРАВЛЕНИЕ (самый верхний блок) → РЕЙСЫ → сущности рейса (позиция
   или заказ). Макет рисовался на 820 px в одну колонку, здесь он живёт в колонке канбана
   (~320 px), поэтому вся мелочь макета сжата: подписи короче, метаданные переносятся,
   крупный кегль заголовка направления уменьшен до 15 px.
   ЦВЕТА — ТОЛЬКО ТОКЕНЫ (решение Дмитрия): в макете аура направления была своим синим и
   оранжевым, здесь она выводится из фирменного --brand через color-mix, поэтому тёмная
   тема и палитра кабинета работают сами. Разные оттенки по направлениям НЕ вводим: цвет
   в этом проекте занят смыслом (стадия, срочность), и третий язык цвета читался бы как
   статус, которого нет. */
/* СЕКЦИЯ — FLEX С GAP, И ЭТО НЕ КОСМЕТИКА (дефект, найден 27.08.2026). Промежутки между
   карточками в колонке задаёт контейнер `.col__body{display:flex;gap:9px}`, а у самой
   `.bcard` вертикального margin нет вовсе. Секция была обычным блоком — её карточки
   становились блочными детьми без gap и стыкались ВПЛОТНУЮ, давая двойную линию из двух
   соседних бордеров. Поэтому у секции свой flex-контекст со своим gap.
   Аура сознательно бледная: направление это КОНТЕЙНЕР, а не сигнал «тут авария» — цвет в
   этом проекте занят смыслом (стадия, срочность). */
.trsec{display:flex;flex-direction:column;gap:8px;margin-bottom:10px;padding:9px;border-radius:16px;
  background:radial-gradient(130% 110% at 0% 0%,
    color-mix(in srgb,var(--brand) 9%,transparent) 0%,
    color-mix(in srgb,var(--brand) 5%,transparent) 52%,
    color-mix(in srgb,var(--brand) 2%,transparent) 100%);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brand) 13%,transparent)}
.trsec > .credsec__h{font-size:12px;font-weight:700;color:var(--ink-soft);padding:0 2px}
.trsec__dir{display:flex;align-items:baseline;gap:5px;flex-wrap:wrap;min-width:0;
  font-size:14px;font-weight:700;letter-spacing:-.02em;line-height:1.15;color:var(--ink)}
.trsec__dir b{font-weight:700}
.trsec__arr{opacity:.45;font-weight:600}
.trsec__sub{display:flex;flex-wrap:wrap;gap:4px 7px;align-items:center;
  margin:0 0 0 22px;font-size:10.5px;color:var(--muted)}
.trsec__gap{flex:1 1 auto}
/* Кнопки направления («Новый рейс», «Объединить») — тихие: действие принадлежит
   направлению, а не карточке, и не должно перебивать сами рейсы. */
.trsec__act{border:1px solid color-mix(in srgb,var(--brand) 28%,var(--line));
  background:color-mix(in srgb,var(--surface) 85%,transparent);color:var(--ink-soft);
  border-radius:9px;padding:4px 9px;font:inherit;font-size:11px;font-weight:700;cursor:pointer;
  transition:background .15s,border-color .15s,color .15s}
.trsec__act:hover{background:var(--surface);border-color:var(--brand);color:var(--brand-fg)}
.trsec__merge{border-color:color-mix(in srgb,var(--gold) 45%,var(--line));
  background:color-mix(in srgb,var(--gold) 12%,transparent)}
.trsec__merge:hover{background:var(--gold);color:var(--brand-ink);border-color:var(--gold)}
.trsec__tot{color:var(--muted)}
/* Счёт в шапке направления — СЛОВАМИ («2 рейса · 1 без рейса»), а не голым числом:
   карточки направления разнородны, и число без единицы читается как что угодно (владелец
   прочёл «2» как «две позиции», хотя это были карточки). Поэтому это не круглый бейдж, как
   у однородных секций, а обычная подпись. */
.trsec__cnt{font-style:normal;font-size:11px;font-weight:700;color:var(--brand-fg);
  background:none;border-radius:0;padding:0;white-space:nowrap}

/* ── БЕЙДЖИ ПОЗИЦИИ (ровно три: источник · расщепление заказа · приоритет) ───────────
   В колонке 320 px больше не читается вовсе, поэтому плательщик и остаток живут внутри
   позиции. Источник — ССЫЛКА на заказ: из позиции проваливаемся в заказ и обратно. */
.trtile__badges{display:flex;flex-wrap:wrap;gap:4px;margin-top:1px}
.trbadge{font-size:10px;font-weight:700;line-height:1.5;padding:1px 7px;border-radius:20px;
  color:var(--muted);background:color-mix(in srgb,var(--ink) 6%,transparent);
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trbadge--ord{color:var(--brand-fg);background:color-mix(in srgb,var(--brand) 13%,transparent);
  text-decoration:none}
.trbadge--ord:hover{background:color-mix(in srgb,var(--brand) 22%,transparent)}
/* Расщеплённый заказ — предупреждение, а не украшение: клиент получит заказ частями. */
.trbadge--split{color:var(--gold-fg,var(--ink));background:color-mix(in srgb,var(--gold) 22%,transparent)}
.trbadge--p1{color:var(--brand-fg);background:color-mix(in srgb,var(--brand) 12%,transparent)}
.trbadge--p2{color:var(--ink-soft);background:color-mix(in srgb,var(--ink) 8%,transparent)}
.trbadge--p3,.trbadge--p4{color:var(--muted)}
/* «Не в рейсе» — подзаголовок перед нераспределёнными объектами. Показывается только
   когда в направлении есть И рейсы, И нераспределённое: в накопителях нераспределено всё,
   и подпись там была бы шумом. */
.trsec__loose{display:flex;align-items:center;gap:7px;padding:2px 2px 0}
.trsec__loosel{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--brand-fg)}
.trsec__loosen{font-style:normal;font-size:10.5px;font-weight:700;color:var(--brand-fg);
  background:color-mix(in srgb,var(--brand) 14%,transparent);border-radius:20px;padding:1px 7px}
/* Нераспределённый объект — пунктирная рамка: «ещё не в машине». Признак ставит рендер
   секции (карточка без рейса идёт после подзаголовка), поэтому правило смотрит на порядок. */
.trsec__loose ~ .bcard{border-style:dashed;
  border-color:color-mix(in srgb,var(--brand) 34%,var(--line))}

/* ── ФОРМА СОЗДАНИЯ РЕЙСА / НАКОПИТЕЛЯ (openTransferCardForm) ────────────────────────
   Направление — первый и главный блок формы: от него зависит и склад-донор в пикере, и
   имя карточки, и накопитель долгов. Поэтому оно на своей строке со стрелкой, а не в общем
   ряду полей. */
.trform__dir{margin-bottom:4px}   /* раскладку пары держит сам компонент (.k5pair) */
.trform__name{margin:0 0 2px;font-size:12px;color:var(--muted)}
.trform__name.is-warn{color:var(--down);font-weight:600}
.trform__dup{margin:0 0 4px;padding:8px 10px;border-radius:9px;font-size:12px;line-height:1.4;
  background:color-mix(in srgb,var(--gold) 12%,var(--surface));border:1px solid color-mix(in srgb,var(--gold) 34%,var(--line));color:var(--ink)}
.trform__open{border:0;background:none;padding:0;font:inherit;font-size:12px;font-weight:700;
  color:var(--brand-fg);cursor:pointer;text-decoration:underline}
.trform__first{display:flex;flex-wrap:wrap;align-items:flex-end;gap:7px;margin:6px 0 2px;min-width:0;
  padding:10px 11px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2)}
.trform__first > .cform__l{flex:0 0 100%;margin-bottom:2px}
.trform__first .cform__l em{font-style:normal;font-weight:400;color:var(--muted)}
.trform__pick{flex:1 1 220px;min-width:0;max-width:100%}
/* ===== ЗАПОЛНЯЕМОСТЬ ФУРЫ (перемещения, 2026-08-26) =====
   Метка на полосе (b) — порог 70 %: с него карточка уходит в «Поиск машины». */
.cdet__fill{display:flex;align-items:center;gap:9px;margin:8px 0 0;flex-wrap:wrap}
.cdet__fillbar{position:relative;flex:1;min-width:120px;height:8px;border-radius:99px;background:var(--surface-2)}
.cdet__fillbar i{display:block;height:8px;border-radius:99px;background:var(--muted);max-width:100%}
.cdet__fillbar b{position:absolute;top:-2px;bottom:-2px;width:1px;background:var(--muted);opacity:.55}
.cdet__fillv{font-size:14px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.cdet__fillnote{flex-basis:100%;font-size:11.5px;color:var(--muted)}
.cdet__fill.is-mid .cdet__fillbar i{background:var(--brand)}
.cdet__fill.is-mid .cdet__fillv{color:var(--brand)}
.cdet__fill.is-over .cdet__fillbar i{background:var(--down)}
.cdet__fill.is-over .cdet__fillv{color:var(--down)}
.cdet__over{margin-top:8px;padding:9px 12px;border-radius:10px;font-size:12px;font-weight:700;line-height:1.45;
  background:color-mix(in srgb,var(--down) 9%,var(--surface));color:var(--down);
  border:1px solid color-mix(in srgb,var(--down) 30%,var(--line))}

/* ── ПЛИТКА РЕЙСА (макет «Требует отгрузки») ─────────────────────────────────────────
   Шапка: моно-код · чип стадии · «N поз. · Σ шт · N кг». Ниже шкала загрузки с МЕТКОЙ
   ПОРОГА и подписью, затем первые сущности состава. Порог приезжает с сервера
   (fields.fillTh) — своей копии числа фронт не держит. */
.trtile{display:flex;flex-direction:column;gap:7px;margin:7px 0 0}
.trtile__hd{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.trtile__gap{flex:1 1 auto}
.trtile__code{flex:none;font:600 11px ui-monospace,SFMono-Regular,Menlo,monospace;
  color:var(--ink);background:var(--surface-2);border-radius:7px;padding:3px 6px}
.trtile__meta{font-size:11.5px;font-weight:600;color:var(--muted);white-space:nowrap}
.trtile__dir{font-size:11.5px;font-weight:600;color:var(--muted)}

/* Чип стадии. Пульсирующая точка — только у «Поиска машины»: это единственная стадия,
   где ждут действия логиста, и мигать больше нечему (иначе на доске в семь колонок
   анимация перестаёт что-либо значить). */
.trtile__st{display:inline-flex;align-items:center;gap:5px;flex:none;
  border-radius:20px;padding:3px 9px;font-size:11px;font-weight:700;
  background:var(--surface-2);color:var(--ink-soft)}
.trtile__st i{width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
.trtile__st.is-hot{background:color-mix(in srgb,var(--gold) 22%,transparent);color:var(--gold)}
.trtile__st.is-hot i{animation:trPulse 1.5s ease-in-out infinite}
.trtile__st.is-go{background:color-mix(in srgb,var(--brand) 16%,transparent);color:var(--brand-fg)}
.trtile__st.is-ok{background:color-mix(in srgb,var(--up) 18%,transparent);color:var(--up)}
@keyframes trPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}

.trtile__bar{display:flex;flex-direction:column;gap:5px}
.trtile__track{position:relative;height:10px;border-radius:7px;background:var(--surface-2);
  box-shadow:inset 0 0 0 1px var(--line)}
.trtile__track i{position:absolute;left:0;top:0;bottom:0;border-radius:7px;
  background:var(--muted);transition:width .35s ease}
/* Метка порога — вертикальная риска поверх шкалы: «вот где начинается поиск машины». */
.trtile__track b{position:absolute;top:-4px;bottom:-4px;width:2px;border-radius:2px;
  background:var(--ink);opacity:.55;transform:translateX(-1px)}
.trtile__bar.is-mid .trtile__track i{background:var(--gold)}
.trtile__bar.is-over .trtile__track i{background:var(--down)}
.trtile__brow{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;font-size:11.5px}
.trtile__brow em{font-style:normal;font-weight:700;color:var(--muted)}
.trtile__bar.is-mid .trtile__brow em{color:var(--gold)}
.trtile__bar.is-over .trtile__brow em{color:var(--down)}
.trtile__brow span{font-weight:500;color:var(--muted)}

/* Сущности рейса: ПОЗИЦИЯ и ЗАКАЗ. Заказ подписан меткой и числом своих позиций —
   иначе «Алексей Казакевич × 7» читается как товар с именем человека. */
.trtile__ents{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}
/* СТРОКА СУЩНОСТИ — КОЛОНКА, А НЕ РЯД (дефект, найден 27.08.2026 по скриншоту Дмитрия).
   В строке живут ДВА блока: кнопка-заголовок (шеврон · метка · название · количество) и
   раскрытый состав под ней. Пока `.trtile__ent` был flex-РЯДОМ, эти два блока становились
   соседями по горизонтали: состав вставал СПРАВА от заголовка, а название с `min-width:0`
   сжималось до нуля — на экране «ЗАКАЗ 7 поз.» налезало на первую позицию состава.
   Ряд нужен ВНУТРИ кнопки (там и стоит), а сама строка обязана быть колонкой. */
.trtile__ent{display:flex;flex-direction:column;min-width:0;
  font-size:12px;line-height:1.35;color:var(--ink)}
.trtile__kind{flex:none;font-size:9px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);background:var(--surface-2);border-radius:5px;padding:2px 5px}
.trtile__ent.is-ord .trtile__kind{color:var(--brand-fg);
  background:color-mix(in srgb,var(--brand) 12%,transparent)}
.trtile__nm{flex:1 1 auto;min-width:0;overflow:hidden;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.trtile__ent.is-ord .trtile__nm{font-weight:600}
.trtile__q{flex:none;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink-soft);
  white-space:nowrap}
.trtile__more{font-size:11px;color:var(--muted);padding-left:2px}

/* ── РАСКРЫТИЕ ПЛИТКИ РЕЙСА ─────────────────────────────────────────────────────────
   Плитка свёрнута по умолчанию, клик по ней раскрывает состав, карточку открывает «›»
   справа (решение Дмитрия 27.08.2026). Три уровня: плитка → объект/заказ → позиция.
   Курсор `pointer` не ставим: вся карточка и так кликабельна. */
.trtile__tchev{flex:none;width:14px;font-size:10px;color:var(--muted);text-align:center}
/* «Открыть» и «В рейс» — кнопки слоя (k5Ui.Button: ghost icon-only и primary). Раздел
   оставляет за собой ТОЛЬКО плотность: у общей кнопки минимум 32 px под палец, а строка
   плитки высотой 22 — на доске их десятки в столбец. Селектор двухклассовый, потому что
   components.css подключён после styles.css (иначе правило проиграет по каскаду). */
.trtile .trtile__open.k5b{flex:none;width:22px;min-height:22px;height:22px;padding:0;
  border-radius:7px;font-size:15px}

/* Заголовок строки — раскрытие слоя в режиме headerOnly (тело .trtile__det рисуется ниже,
   между ними стоит своя кнопка действия). Раздел оставляет плотность и раскладку названия:
   у общей шапки минимум 40 px под палец, а строк состава в плитке бывает десяток. */
.trtile .trtile__entb{align-items:flex-start;gap:6px;min-height:0;padding:2px 0;font-size:12px;
  line-height:1.35}
.trtile .trtile__entb .k5dsc__t{display:flex;align-items:flex-start;gap:6px;min-width:0}
.trtile .trtile__entb .k5dsc__chev{margin-top:4px}
.trtile .trtile__entb:hover .trtile__nm{color:var(--brand-fg)}
.trtile__ent.is-open .trtile__entb .k5dsc__chev{transform:rotate(90deg)}
/* Раскрытая сущность: состав заказа или краткая инфа позиции. Данные ТОЛЬКО те, что уже
   лежат в карточке — остатки на плитке не грузим вовсе (за подробностями — в карточку). */
/* Состав раскрытого заказа. Отступ 28px — под шеврон и метку, чтобы позиции начинались
   там же, где название заказа над ними, а не «висели» посередине. */
.trtile__sub{list-style:none;margin:3px 0 5px 28px;padding:0;display:flex;flex-direction:column;gap:3px}
.trtile__sub li{display:flex;align-items:baseline;gap:8px;font-size:11.5px;color:var(--muted)}
.trtile__sub li span{flex:1 1 auto;min-width:0;overflow-wrap:anywhere;line-height:1.3}
.trtile__sub li b{flex:none;font-variant-numeric:tabular-nums;color:var(--ink-soft)}
.trtile__det{margin:3px 0 5px 28px;font-size:11.5px;line-height:1.45;color:var(--muted)}
.trtile__ent.is-open > .trtile__entb .trtile__nm{font-weight:600}

/* ── ВЛОЖЕНИЕ ОБЪЕКТА В РЕЙС (этап 2) ───────────────────────────────────────────────
   Дроп на плитку рейса кладёт объект в него, дроп на фон секции переадресует карточку в
   это направление. Подсветка обязана отличаться: два разных действия на расстоянии
   нескольких пикселей друг от друга. */
.trtile.is-droptrip{outline:2px dashed var(--brand);outline-offset:3px;border-radius:10px}
.trsec.is-over{box-shadow:inset 0 0 0 2px var(--brand)}

/* Нераспределённый объект: ни кода рейса, ни стадии, ни шкалы — только «что и сколько»
   и одно действие. */
.trtile--obj .trtile__kind{font-size:9.5px}
.trtile .trtile__totrip{flex:none;min-height:22px;padding:3px 9px;border-radius:8px;
  font-size:11px;font-weight:700}

/* Меню «В рейс» — короткий список живых рейсов направления. Автоматики «в самый
   заполненный» нет сознательно: машина может быть уже под конкретного клиента. */
.trmenu{display:flex;flex-direction:column;gap:4px}
/* Строка меню — кнопка слоя (k5Ui.Button, block + labelHtml). Раздел добавляет только то,
   чего у общей кнопки нет по смыслу: название слева, приписка справа по базовой линии.
   Селектор ДВУХКЛАССОВЫЙ (.trmenu .trmenu__i) не для красоты — components.css подключён
   ПОСЛЕ styles.css, и одноклассовое правило проиграло бы .k5b--secondary по каскаду. */
.trmenu .trmenu__i{justify-content:space-between;align-items:baseline;text-align:left;
  font-size:13px;padding:9px 11px}
.trmenu .trmenu__i b{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}
.trmenu .trmenu__i span{font-size:11.5px;color:var(--muted)}
.trmenu .trmenu__new{border-style:dashed}
.trmenu__none{font-size:12.5px;color:var(--muted);padding:6px 2px}

/* Заголовок группы в чеклисте: строки, приехавшие из вложенного объекта. Отмечается всё
   равно КАЖДАЯ позиция — заголовок только говорит, чьи это места. */
.tchk__grp{display:flex;align-items:baseline;gap:7px;margin:9px 0 3px;
  font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--brand-fg)}
.tchk__grp i{font-style:normal;font-size:10.5px;font-weight:600;color:var(--muted);
  text-transform:none;letter-spacing:0}

/* Советник объединения: показывается только когда сумма заполняемости ≤ 100 % (результат
   влезает в одну машину) И только в накопителях, где сервер объединение разрешает. */
.trsec__adv{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:7px 9px;border-radius:var(--r-sm);font-size:11.5px;line-height:1.4;color:var(--ink);
  background:color-mix(in srgb,var(--gold) 12%,var(--surface));
  border:1px solid color-mix(in srgb,var(--gold) 34%,var(--line))}
.trsec__advb{flex:none;margin-left:auto;padding:4px 10px;border-radius:8px;font:inherit;
  font-size:11px;font-weight:700;cursor:pointer;color:var(--brand-ink);background:var(--gold);
  border:1px solid transparent}
.trsec__advb:hover{filter:brightness(1.06)}

/* ── КОМПАКТНОСТЬ ПЛИТОК В СЕКЦИИ (замечание Дмитрия 27.08.2026: «карточка очень высокая
   огромная»). Колонка канбана 320 px: каждая лишняя строка на карточке — это минус один
   видимый рейс в колонке. Поэтому у карточек внутри секции меньше padding, а у плитки
   объекта всё уместилось в одну строку. */
.trsec .bcard{padding:8px 10px}
.trsec .bcard__t{font-size:12.5px;line-height:1.3}
.trsec .bcard__foot{margin-top:5px}
.trtile{gap:6px;margin-top:6px}
.trtile--obj{margin-top:5px}
.trtile--obj .trtile__meta{font-size:11.5px}
.trtile .trtile__totrip{padding:2px 8px;font-size:10.5px}
/* Пустой рейс: подсказка вместо состава — «сюда можно положить». */
.trtile--empty .trtile__hint{font-size:11px;line-height:1.4;color:var(--muted)}