/* ===== 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;
  --topbar:#ffffff;
  --up:#2ca36a;          /* рост — зелёный (по ТЗ) */
  --down:#e2563f;        /* падение/стагнация — красный (по ТЗ) */
  --gold:#e0a000;
  --shadow:none;
  --r:16px;     /* единый радиус карточек */
  --r-sm:12px;  /* радиус мелких элементов (чипы, плашки) */
}

/* ---- Тёмная тема ---- */
[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;
  --gold:#f0b62a;
  --shadow:none;
}

*{box-sizing:border-box}
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>. */
.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}
/* дайджест владельца: план месяца, мини-график лидов, дельта к вчера */
.digplan{margin:4px 2px 2px}
.digplan__top{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;color:var(--ink-soft);margin-bottom:7px}
.digplan__top b{font-size:15px;font-variant-numeric:tabular-nums}
.digplan__bar{height:9px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);overflow:hidden}
.digplan__bar i{display:block;height:100%;border-radius:999px;transition:width .5s ease}
.digspark{margin:2px 2px 4px}
.digspark .sparkwrap{height:56px}
.digdelta{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
/* дашборд-сетка дайджеста: отчёты по 2 в ряд, «Бизнес» — во всю ширину; страница вдвое короче */
.diggrid{display:grid;grid-template-columns:1fr 1fr;gap:10px 20px;align-items:start;margin-top:8px}
.diggrid>.block{margin-top:0}
.digfull{grid-column:1 / -1}
.digsub{display:grid;grid-template-columns:1fr 1fr;gap:4px 24px;align-items:start}
.diggrid .histkpi{margin-bottom:14px}
.diggrid>.block:not(.digfull) .histkpi.histkpi--4{grid-template-columns:1fr 1fr}
@media (max-width:1000px){ .diggrid{grid-template-columns:1fr} .digfull{grid-column:auto} .digsub{grid-template-columns:1fr} }
/* ===== ПРЕМИУМ-ПОЛИРОВКА страницы «Кто на сайте / Команда» (только стили, разметку не трогаем; скоуп .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}
.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);
}
.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)}

/* ---- Лента «Недавние канбаны» (в шапке; новейший справа) ---- */
.recentbar{display:flex;align-items:center;gap:12px;padding:8px 16px;background:var(--surface);
  border-bottom:1px solid var(--line);min-width:0;position:sticky;top:60px;z-index:16}
.recentbar[hidden]{display:none}
.recent__lbl{display:inline-flex;align-items:center;gap:6px;flex:none;white-space:nowrap;
  font-size:11.5px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:var(--muted)}
.recent__lbl svg{width:14px;height:14px}
.recent__list{display:flex;align-items:center;gap:8px;flex:1;min-width:0;overflow-x:auto;
  padding:3px 1px;scrollbar-width:none}
.recent__list::-webkit-scrollbar{display:none}
.recent__chip{display:inline-flex;align-items:center;gap:8px;flex:none;cursor:pointer;white-space:nowrap;
  background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:5px 14px 5px 6px;transition:.15s}
/* иконка-плитка чипа — в ЦВЕТЕ КАНБАНА (--c = цвет отдела, как плитки «Мои канбаны»):
   доска одного цвета везде (иконка, столбцы, чип «недавних»). */
.recent__ic{width:24px;height:24px;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));transition:.15s}
.recent__ic svg{width:14px;height:14px}
.recent__t{font-size:12.5px;font-weight:600;color:var(--ink-soft);transition:.15s}
.recent__chip:hover{border-color:var(--c, var(--brand))}
.recent__chip:hover .recent__ic{background:color-mix(in srgb, var(--c, var(--brand)) 22%, var(--surface))}
.recent__chip:hover .recent__t{color:var(--c, var(--brand))}
/* активная доска — чип залит СВОИМ цветом (если канбан зелёный — активный зелёный);
   флэт, без тени — активность читается по заливке */
.recent__chip.is-active{background:var(--c, var(--brand));border-color:var(--c, var(--brand))}
.recent__chip.is-active .recent__ic{background:rgba(255,255,255,.22);color:#fff}
.recent__chip.is-active .recent__t{color:#fff}
@media (max-width:560px){ .recent__lbl{display:none} .recentbar{padding:8px 12px} }

/* ---- 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}

.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);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 ---- */
.hubs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:20px}
.hub{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:15px 6px;border:1px solid var(--line);background:var(--surface);
  border-radius:var(--r);transition:.15s;
}
.hub:active{transform:scale(.97)}
.hub:hover{border-color:var(--c,var(--brand))}
.hub__icon{
  position:relative;
  width:44px;height:44px;border-radius:13px;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);
}
.hub__icon svg{width:22px;height:22px}
.hub__count{
  position:absolute;top:-7px;right:-9px;min-width:19px;height:19px;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:11.5px;font-weight:600;text-align:center;color:var(--ink-soft)}

.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}
.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));
}
.metric.is-up{border-left-color:var(--up)}
.metric.is-down{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}
.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%}
/* Подсказки на графиках */
.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). */
.k5tip{position:fixed;z-index:80;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}
.chartcard__head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;font-size:15px;font-weight:500;margin-bottom:14px;letter-spacing:.2px;min-height:42px}
.cc-title{line-height:1.3}
.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}

/* ---- Рейтинг-лента ---- */
.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)}

.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{display:grid;grid-template-columns:236px minmax(280px,360px) minmax(0,1fr);min-height:0}
.napp--page{height:calc(100vh - 132px);min-height:440px;margin-top:4px;
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.napp--drawer{flex:1;min-height:0}
.napp__side{display:flex;flex-direction:column;min-height:0;overflow-y:auto;background:var(--bg);border-right:1px solid var(--line)}
.napp__col{display:flex;flex-direction:column;min-height:0;background:var(--surface);border-right:1px solid var(--line)}
.napp__editor{display:flex;flex-direction:column;min-height:0;overflow-y:auto;background:var(--surface)}

/* папки-дерево (сайдбар) */
.napp__sidehead{display:flex;align-items:center;gap:8px;padding:14px 16px 8px;font-size:16px;font-weight:700;color:var(--ink);flex:none}
.napp__logo{width:18px;height:18px;color:var(--brand)}
.napp__folders{padding:12px 8px 14px;display:flex;flex-direction:column;gap:1px}
.nfold{display:flex;align-items:center;gap:7px;width:100%;text-align:left;border:none;background:transparent;
  border-radius:9px;padding:7px 10px 7px calc(8px + var(--d,0)*15px);color:var(--ink-soft);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;transition:background .12s,color .12s}
.nfold:hover{background:var(--surface-2)}
.nfold.is-active{background:var(--brand-tint);color:var(--brand)}
.nfold__exp{flex:none;width:18px;height:18px;border:none;background:transparent;color:var(--muted);display:grid;place-items:center;cursor:pointer;border-radius:5px;padding:0}
.nfold__exp svg{width:13px;height:13px;transform:rotate(-90deg);transition:transform .15s}
.nfold__exp.is-open svg{transform:rotate(0)}
.nfold__exp:hover{color:var(--brand)}
.nfold__exp--none{cursor:default}
.nfold__ic{flex:none;width:18px;height:18px;color:var(--brand);display:grid;place-items:center}
.nfold__ic svg{width:17px;height:17px}
.nfold--add .nfold__ic,.nfold--tag .nfold__ic{color:var(--muted)}
.nfold__name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nfold__sub{flex:none;width:22px;height:22px;border:none;background:transparent;color:var(--muted);display:grid;place-items:center;cursor:pointer;border-radius:6px;opacity:0;transition:.12s}
.nfold__sub svg{width:14px;height:14px}
.nfold:hover .nfold__sub{opacity:1}
.nfold__sub:hover{background:var(--brand-tint);color:var(--brand)}
.nfold__del{flex:none;width:22px;height:22px;border:none;background:transparent;color:var(--muted);display:grid;place-items:center;cursor:pointer;border-radius:6px;opacity:0;transition:.12s}
.nfold__del svg{width:14px;height:14px}
.nfold:hover .nfold__del{opacity:1}
.nfold__del:hover{background:rgba(224,83,61,.14);color:#e0533d}
/* кнопки действий папки (переименовать/удалить) — появляются на наведении */
.nfold__act{flex:none;width:22px;height:22px;border:none;background:transparent;color:var(--muted);display:grid;place-items:center;cursor:pointer;border-radius:6px;opacity:0;transition:.12s}
.nfold__act svg{width:14px;height:14px}
.nfold:hover .nfold__act,.nfold:focus-within .nfold__act{opacity:1}
.nfold__act:hover{background:var(--brand-tint);color:var(--brand)}
.nfold__act--del:hover{background:rgba(224,83,61,.14);color:#e0533d}
@media (hover:none){ .nfold__act{opacity:1} }
/* строка переименования папки */
.nfold--rename{padding-top:4px;padding-bottom:4px}
.nfold__renameinp{flex:1;min-width:0;border:1px solid var(--brand);border-radius:8px;padding:6px 9px;font:inherit;font-size:13.5px;background:var(--surface);color:var(--ink);outline:none}
.nfold--add{color:var(--muted)}
.nfold__sec{padding:13px 10px 4px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.nfold__newrow{padding:4px 6px 6px calc(8px + var(--d,0)*15px)}
.nfold__newinp{width:100%;border:1px solid var(--brand);border-radius:9px;padding:8px 10px;font:inherit;font-size:13.5px;background:var(--surface);color:var(--ink);outline:none}
.nfold__newtop{display:flex;align-items:center;gap:6px}
.nfold__newtop .nfold__newinp{flex:1;min-width:0;width:auto}
.nfold__newx{flex:none;width:30px;height:30px;border:none;background:transparent;color:var(--muted);display:grid;place-items:center;cursor:pointer;border-radius:8px;transition:.12s}
.nfold__newx svg{width:15px;height:15px}
.nfold__newx:hover{background:rgba(224,83,61,.14);color:#e0533d}
.nfold__palettelbl{margin:9px 2px 0;font-size:11px;font-weight:700;color:var(--ink-soft);display:flex;flex-wrap:wrap;align-items:baseline;gap:5px}
.nfold__palettelbl span{font-weight:500;color:var(--muted)}
.nfold__newhint{margin:8px 2px 2px;font-size:11px;color:var(--muted)}
@media (hover:none){ .nfold__sub,.nfold__del{opacity:1} }

/* список заметок */
.napp__listhead{display:flex;align-items:center;gap:8px;padding:11px 12px;border-bottom:1px solid var(--line);flex:none}
.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}
.napp__new{flex:none;width:34px;height:34px;border:none;border-radius:10px;background:var(--brand);color:#fff;display:grid;place-items:center;cursor:pointer;transition:.15s}
.napp__new svg{width:18px;height:18px}
.napp__new:hover{background:var(--brand-2)}
.napp__listscroll{flex:1;min-height:0;overflow-y:auto;padding:6px}
.nlist__sec{display:flex;align-items:center;gap:6px;padding:10px 9px 5px;font-size:12px;font-weight:700;color:var(--muted)}
.nlist__sec svg{width:13px;height:13px}
.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)}
.nrow__main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.nrow__title{display:flex;align-items:center;gap:5px;font-size:14px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nrow__pinmark{flex:none;color:var(--brand);display:inline-grid;place-items:center}
.nrow__pinmark svg{width:12px;height:12px}
.nrow__sub{display:flex;gap:7px;font-size:12px;color:var(--muted);min-width:0}
.nrow__date{flex:none;font-weight:600;color:var(--ink-soft)}
.nrow__prev{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nrow__folder{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--muted);font-weight:600}
.nrow__folder svg{width:12px;height:12px;color:var(--muted)}
.nrow__thumb{flex:none;width:46px;height:46px;border-radius:8px;overflow:hidden;border:1px solid var(--line)}
.nrow__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.nrow__tacts{flex:none;display:flex;gap:4px}
.nrow__tbtn{width:28px;height:28px;border:none;border-radius:8px;background:var(--surface-2);color:var(--muted);display:grid;place-items:center;cursor:pointer;transition:.15s}
.nrow__tbtn svg{width:15px;height:15px}
.nrow__tbtn:hover{color:var(--brand)}
.nrow__tbtn--del:hover{color:var(--down)}

/* редактор */
.ned{display:flex;flex-direction:column;min-height:0;height:100%}
.ned__top{position:relative;display:flex;align-items:center;gap:10px;padding:11px 16px;border-bottom:1px solid var(--line);flex:none}
.ned__date{flex:none;min-width:0;font-size:12px;color:var(--muted);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ned__tools{display:flex;align-items:center;gap:6px;flex:none}
/* кнопка «‹ Заметки» — возврат к списку, только на узких экранах (мобильная раскладка) */
.ned__back{display:none;align-items:center;gap:2px;flex:none;border:none;background:transparent;color:var(--brand);
  font:inherit;font-size:14px;font-weight:600;cursor:pointer;padding:4px 8px 4px 0;margin-left:-4px}
.ned__back-chev{width:21px;height:21px;transform:rotate(90deg)}   /* «v» повёрнут — указывает влево «‹» */
.ned__back:active{opacity:.55}
.ned__tool{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);border-radius:9px;padding:6px 10px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;transition:.15s}
.ned__tool svg{width:15px;height:15px}
.ned__tool:hover{border-color:var(--brand);color:var(--brand)}
.ned__tool.is-on{border-color:var(--brand);background:var(--brand-tint);color:var(--brand)}
.ned__tool--del:hover{border-color:var(--down);color:var(--down)}
.ned__tool:disabled{opacity:.38;cursor:default;border-color:var(--line);background:var(--surface);color:var(--ink-soft)}
.ned__tool--ai{border-color:color-mix(in srgb,var(--brand) 35%,var(--line));color:var(--brand)}
.ned__tool--ai:hover{background:var(--brand-tint);border-color:var(--brand)}
.ned__tool--ai.is-busy{opacity:1;color:var(--brand);border-color:var(--brand);background:var(--brand-tint);cursor:default}
.ned__tool--ai.is-busy svg{animation:nspin .8s linear infinite}
.ned__tool:disabled:hover{border-color:var(--line);color:var(--ink-soft)}
.ned__toolsep{align-self:stretch;width:1px;margin:4px 1px;background:var(--line);flex:none}
.ned__foldbtn span{max-width:130px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---- Проверка орфографии (как в 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)}}
.ned__rich .sperr{text-decoration:underline;text-decoration-style:wavy;text-decoration-color:var(--down);text-decoration-skip-ink:none;
  text-underline-offset:2px;cursor:pointer;border-radius:3px;transition:background .12s}
.ned__rich .sperr:hover{background:color-mix(in srgb,var(--down) 14%,transparent)}
/* всплывашка вариантов — компактная карточка ровно как в 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}
.ned__movemenu{position:absolute;top:calc(100% - 2px);right:16px;z-index:5;background:var(--surface);border:1px solid var(--line);
  border-radius:12px;box-shadow:0 18px 50px rgba(16,24,40,.18);padding:6px;min-width:200px;max-height:300px;overflow-y:auto;display:flex;flex-direction:column;gap:1px}
.ned__moveitem{display:flex;align-items:center;gap:8px;border:none;background:transparent;border-radius:8px;padding:8px 10px 8px calc(10px + var(--d,0)*14px);font:inherit;font-size:13px;color:var(--ink-soft);text-align:left;cursor:pointer}
.ned__moveitem svg{width:15px;height:15px;color:var(--brand)}
.ned__moveitem:hover{background:var(--surface-2)}
.ned__moveitem.is-active{color:var(--brand);font-weight:700}
.ned__body{flex:1;min-height:120px;border:none;outline:none;resize:none;background:transparent;color:var(--ink);
  font:inherit;font-size:15px;line-height:1.6;padding:16px 18px}
.ned__body::placeholder{color:var(--muted)}
/* Редактор с живыми кружками (contenteditable) */
.ned__rich{flex:1;min-height:120px;overflow-y:auto;padding:16px 18px;outline:none;font:inherit;font-size:15px;line-height:1.6;color:var(--ink);cursor:text}
.ned__rich .rln{display:flex;align-items:flex-start;gap:9px;min-height:1.6em}
.ned__rich .rln__box{flex:none;width:21px;height:21px;margin-top:2px;border:2px solid color-mix(in srgb,var(--ink) 26%,transparent);border-radius:50%;background:transparent;cursor:pointer;transition:.12s;display:grid;place-items:center;user-select:none}
.ned__rich .rln__box:hover{border-color:var(--brand)}
.ned__rich .rln--chk[data-chk="1"] .rln__box{background:var(--brand);border-color:var(--brand)}
.ned__rich .rln--chk[data-chk="1"] .rln__box::after{content:"";width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);margin-top:-2px}
.ned__rich .rln__t{flex:1;min-width:0;white-space:pre-wrap;word-break:break-word;outline:none}
.ned__rich .rln.is-done .rln__t{color:var(--muted);text-decoration:line-through}
.ned__rich .rln__bul{flex:none;width:21px;height:21px;margin-top:2px;display:grid;place-items:center;color:var(--brand);font-weight:700;font-size:19px;line-height:0;user-select:none}
.ned__rich .rln__bul::before{content:"•"}
.ned__photos{display:flex;flex-wrap:wrap;gap:8px;padding:0 18px 16px}
.ned__photos:empty{display:none}
.ned__ph{position:relative;width:90px;height:90px;border-radius:10px;overflow:hidden;border:1px solid var(--line)}
.ned__ph img{width:100%;height:100%;object-fit:cover;display:block;cursor:zoom-in}
.ned__phx{position:absolute;top:3px;right:3px;width:20px;height:20px;border-radius:50%;border:none;background:rgba(0,0,0,.6);color:#fff;display:grid;place-items:center;cursor:pointer}
.ned__phx svg{width:12px;height:12px}

/* пустые состояния */
.ned__empty,.nlist__empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  height:100%;min-height:220px;text-align:center;color:var(--muted);padding:30px 18px}
.ned__emptyic,.nlist__emptyic{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;background:var(--brand-tint);color:var(--brand)}
.ned__emptyic svg,.nlist__emptyic svg{width:24px;height:24px}
.ned__empty p,.nlist__empty p{margin:0;font-size:13.5px;max-width:300px;line-height:1.5}

/* ----- Оболочка боковой панели (drawer справа, ШИРОКАЯ — три колонки) ----- */
.ndrawer{position:fixed;inset:0;z-index:76}
.ndrawer[hidden]{display:none}
.ndrawer__backdrop{position:absolute;inset:0;background:rgba(10,14,18,.35);opacity:0;transition:opacity .2s}
.ndrawer.is-open .ndrawer__backdrop{opacity:1}
.ndrawer__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)}
.ndrawer.is-open .ndrawer__card{transform:none}
.ndrawer__head{display:flex;align-items:center;gap:11px;padding:13px 16px;border-bottom:1px solid var(--line);flex:none}
.ndrawer__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)}
.ndrawer__ava svg{width:19px;height:19px}
.ndrawer__id{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.ndrawer__id b{font-size:14.5px;font-weight:800;letter-spacing:.3px}
.ndrawer__id>span:not(.nstat){font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ndrawer__page{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface-2);
  color:var(--ink-soft);border-radius:10px;padding:7px 11px;font-size:12px;font-weight:700;flex:none;transition:.15s}
.ndrawer__page svg{width:14px;height:14px}
.ndrawer__page:hover{border-color:var(--brand);color:var(--brand)}
.ndrawer__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}
.ndrawer__close svg{width:14px;height:14px}
.ndrawer__close:hover{color:var(--down)}
.ndrawer__body{flex:1;min-height:0;display:flex;flex-direction:column;background:var(--surface)}

/* ===== Заметки по закупкам — ОБЩИЙ блокнот команды (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}

.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%} }

/* ----- Узкие экраны: мобильная раскладка «одна панель за раз» (как iOS «Заметки»).
   По умолчанию видим СПИСОК (папки + заметки). Тап по заметке — редактор на весь
   экран с кнопкой «‹ Заметки». Раньше три колонки складывались в стопку, и редактор
   уезжал ВНИЗ за край экрана — заметка будто «не открывалась». ----- */
@media (max-width:900px){
  .napp{display:flex;flex-direction:column;overflow-y:auto}
  .napp--page{height:auto;min-height:0}
  .napp__side,.napp__col,.napp__editor{flex:none;min-height:0;overflow:visible;border-right:none}
  .napp__side{border-bottom:1px solid var(--line);max-height:32vh;overflow-y:auto}
  .napp__col{border-bottom:1px solid var(--line)}
  .napp__listscroll{flex:none;min-height:220px;overflow:visible}
  .ned,.napp__editor{height:auto}
  .ned__body,.ned__rich{min-height:220px}
  /* показываем СПИСОК или ЗАМЕТКУ — но не всё сразу */
  .napp__editor{display:none}
  .napp--showeditor .napp__side,
  .napp--showeditor .napp__col{display:none}
  .napp--showeditor .napp__editor{display:flex}
  .ned__back{display:inline-flex}   /* кнопка «‹ Заметки» — только на мобиле */
  .ned__date{display:none}          /* место в шапке отдаём кнопке возврата (дата есть в списке) */
  /* панель инструментов редактора переносится, а не уезжает за край (иначе на телефоне
     крайние кнопки — камера/удалить — оказывались за экраном и были недоступны) */
  .ned__top{flex-wrap:wrap;row-gap:8px}
  .ned__tools{flex:1 1 100%;min-width:0;flex-wrap:wrap;justify-content:flex-end}
  /* открытая заметка на ОТДЕЛЬНОЙ СТРАНИЦЕ раскрывается на ВЕСЬ экран (поверх шапки и
     вкладок ролей) — раньше редактор начинался ниже середины и заметка была видна
     лишь на ~60% экрана. Шапка редактора липкая — кнопка «‹ Заметки» всегда под рукой. */
  .napp--page.napp--showeditor .napp__editor{position:fixed;inset:0;z-index:55;background:var(--surface);overflow-y:auto;-webkit-overflow-scrolling:touch}
  .napp--page.napp--showeditor .ned__top{position:sticky;top:0;z-index:3;background:var(--surface)}
  /* шрифт полей и редактора >=16px — иначе iOS Safari САМ зумит страницу при тапе в поле */
  .napp input,.napp textarea,.ned__rich,.ndrawer input,.ndrawer textarea{font-size:16px}
}
@media (max-width:680px){
  .ndrawer__card{top:auto;left:0;width:100%;height:min(92dvh,820px);border-left:none;border-top:1px solid var(--line);
    border-radius:18px 18px 0 0;transform:translateY(102%)}
  .ndrawer.is-open .ndrawer__card{transform:none}
  .ndrawer__page span{display:none}
  .ndrawer__page{padding:7px}
}

/* ============================================================
   ЗАМЕТКИ · Волна 1 — цвета папок, сортировка, перетаскивание,
   быстрая заметка + отделка (привлекательнее, но в фирстиле).
   ============================================================ */
/* активная папка — подсветка и левый акцент в ЕЁ цвете */
.nfold{position:relative}
.nfold.is-active{background:color-mix(in srgb,var(--fc,var(--brand)) 13%,transparent);color:var(--fc,var(--brand))}
.nfold.is-active::before{content:"";position:absolute;left:3px;top:7px;bottom:7px;width:3px;border-radius:3px;background:var(--fc,var(--brand))}
.nfold.is-active .nfold__ic{color:var(--fc,var(--brand))!important}
.nfold--root,.nfold--tag,.nfold--add{--fc:var(--brand)}
/* палитра цветов для новой папки */
.nfold__palette{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px;padding-left:2px}
.nfold__sw{width:20px;height:20px;border-radius:50%;border:none;background:var(--sw);cursor:pointer;
  box-shadow:0 0 0 1px var(--line);transition:transform .12s,box-shadow .12s}
.nfold__sw:hover{transform:scale(1.15)}
.nfold__sw.is-sel{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--sw);transform:scale(1.12)}
/* перетаскивание заметки в папку */
.nrow[draggable="true"]{cursor:grab}
.nrow.is-dragging{opacity:.4}
.nfold.is-dropzone{background:color-mix(in srgb,var(--fc,var(--brand)) 22%,transparent);
  outline:2px dashed var(--fc,var(--brand));outline-offset:-2px;color:var(--fc,var(--brand))}
/* сортировка списка */
.napp__listhead{position:relative}
.napp__icbtn{flex:none;width:34px;height:34px;border:1px solid var(--line);border-radius:10px;background:var(--surface);
  color:var(--ink-soft);display:grid;place-items:center;cursor:pointer;transition:.15s}
.napp__icbtn svg{width:17px;height:17px}
.napp__icbtn:hover,.napp__icbtn.is-on{border-color:var(--brand);color:var(--brand)}
.napp__sortmenu{position:absolute;top:48px;right:46px;z-index:8;background:var(--surface);border:1px solid var(--line);
  border-radius:12px;box-shadow:0 18px 50px rgba(16,24,40,.18);padding:6px;min-width:214px;display:flex;flex-direction:column;gap:1px}
.napp__sortitem{display:flex;align-items:center;gap:8px;border:none;background:transparent;border-radius:8px;
  padding:9px 11px;font:inherit;font-size:13px;color:var(--ink-soft);text-align:left;cursor:pointer}
.napp__sortitem svg{width:14px;height:14px;color:var(--brand)}
.napp__sortitem:hover{background:var(--surface-2)}
.napp__sortitem.is-active{color:var(--brand);font-weight:700}
/* редактор — тонкий акцент в цвете папки заметки */
.ned__foldbtn{border-color:color-mix(in srgb,var(--fc,var(--brand)) 38%,var(--line));color:var(--fc,var(--brand))}
.ned__foldbtn svg{color:var(--fc,var(--brand))}
.ned__top{box-shadow:inset 0 2px 0 color-mix(in srgb,var(--fc,var(--brand)) 55%,transparent)}
/* отделка: активная заметка с левым акцентом, закреплённые — тёплый фон */
.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)}
.nrow__pinmark svg{fill:var(--brand);stroke:var(--brand)}
/* плавающая кнопка «Быстрая заметка» (на любом экране) */
.qnote{position:fixed;right:22px;bottom:22px;z-index:40;display:inline-flex;align-items:center;justify-content:center;gap:0;
  width:56px;height:56px;padding:0;border:none;border-radius:50%;cursor:pointer;color:#fff;font:inherit;font-size:14px;font-weight:700;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  box-shadow:0 10px 28px color-mix(in srgb,var(--brand) 40%,transparent);transition:transform .14s,box-shadow .14s}
.qnote:hover{transform:translateY(-2px);box-shadow:0 14px 34px color-mix(in srgb,var(--brand) 50%,transparent)}
.qnote:active{transform:translateY(0)}
.qnote__ic{position:relative;display:grid;place-items:center}
.qnote__ic>svg{width:22px;height:22px}
.qnote__plus{position:absolute;right:-5px;bottom:-5px;width:16px;height:16px;border-radius:50%;background:#fff;color:var(--brand);display:grid;place-items:center;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.qnote__plus svg{width:11px;height:11px;stroke-width:3}
.qnote__lbl{display:none}

/* ============================================================
   ЗАМЕТКИ · Волна 2 — режим просмотра: чек-листы (галочки) + кликабельные ссылки.
   ============================================================ */
.ned__render{flex:1;min-height:120px;overflow-y:auto;padding:16px 18px;cursor:text;font-size:15px;line-height:1.6;color:var(--ink)}
.ned__title{font-size:19px;font-weight:800;line-height:1.3;margin-bottom:5px;color:var(--ink);white-space:pre-wrap;word-break:break-word}
.ned__pp{margin:2px 0;white-space:pre-wrap;word-break:break-word}
.ned__li{position:relative;margin:3px 0 3px 18px;white-space:pre-wrap;word-break:break-word}
.ned__li::before{content:"•";position:absolute;left:-14px;color:var(--brand);font-weight:700}
.ned__sp{height:10px}
.ned__hint{color:var(--muted);font-size:14px}
.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. */
.ned__rich .ned__link{cursor:pointer}
.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}
.ned__tool--edit span{font-size:12px}
@media (max-width:560px){ .ned__tool--edit span{display:none} }


/* ---- Лайтбокс фото из заметки (слой выше 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)}
.ntoast--act{display:flex;align-items:center;gap:12px;padding:9px 9px 9px 16px}
.ntoast__btn{border:0;background:var(--brand);color:#fff;font:inherit;font-size:12.5px;font-weight:700;border-radius:8px;padding:6px 13px;cursor:pointer;flex:none;transition:.12s}
.ntoast__btn:hover{filter:brightness(1.08)}
.ntoast__btn:active{transform:translateY(1px)}

/* ---- Статус сохранения заметок (Telegram-style: «Сохранено / Сохранение… / Нет сети») ----
   Всегда на виду: в шапке панели под «Заметки» и над открытой заметкой. Зелёный =
   сохранено, оранжевый-спиннер = идёт сохранение, янтарный/красный = нет связи. */
.nstat{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;line-height:1;
  letter-spacing:.2px;white-space:nowrap;border-radius:999px;padding:3px 2px;transition:color .2s,background .2s}
.nstat svg{width:14px;height:14px;flex:none}
.nstat__t{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nstat--saved{color:var(--up)}
.nstat--saving{color:var(--brand)}
.nstat--local{color:var(--muted)}
.nstat--off,.nstat--err{padding:3px 9px}
.nstat--off{color:var(--gold);background:color-mix(in srgb,var(--gold) 15%,transparent)}
.nstat--err{color:var(--down);background:color-mix(in srgb,var(--down) 14%,transparent)}
/* мини-спиннер — как «обновление…» в Telegram */
.nstat__spin{width:13px;height:13px;flex:none;border-radius:50%;
  border:2px solid color-mix(in srgb,var(--brand) 28%,transparent);border-top-color:var(--brand);
  animation:nspin .7s linear infinite}
@keyframes nspin{to{transform:rotate(360deg)}}
/* в шапке панели — статус как живой подзаголовок под «Заметки» */
.ndrawer__id .nstat{margin-left:-2px;font-size:11.5px}
/* над открытой заметкой — статус слева, инструменты прижаты вправо */
.ned__top .nstat{margin-right:auto;min-width:0}
/* в узкой боковой панели статус уже стоит в шапке (у крестика) — над заметкой не
   дублируем, чтобы длинная подпись не теснила кнопки инструментов */
.napp--drawer .ned__top .nstat{display:none}

/* ---- Страница «История изменений» (во всю ширину, как все страницы) ---- */
/* Хлебные крошки «Главная > ... > Текущая» (заменили кнопку .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}
.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}
.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}
.urow__rights{flex:none;width:190px;text-align:right;font-size:12.5px}
.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}

/* ============================================================
   ШАБЛОН КАНБАН-ДОСКИ (универсальный, под все доски)
   ============================================================ */
.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)}

.board__scrollwrap{position:relative}
/* зелёные кнопки прокрутки доски — ПО ЦЕНТРУ ЭКРАНА по вертикали (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))}
/* колонка = ПРОЗРАЧНАЯ дорожка (правка владельца 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;
  background:color-mix(in srgb, var(--tone) 12%, var(--surface));
  border-bottom:2px solid color-mix(in srgb, var(--tone) 52%, 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:10px;font-weight:700;line-height:1.2;letter-spacing:.2px;text-transform:uppercase;
  color:color-mix(in srgb, var(--tone) 72%, 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)}

/* карточка заявки — белая карточка с акцент-бордером слева (как .metric главной) */
.bcard{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}
.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}
/* Вероятность закрытия — прогресс-бар внизу карточки */
.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}
/* Статус одной строкой (минимал): время · след.шаг · дн в работе */
.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}
.bcard__unread{position:absolute;top:-7px;right:-7px;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{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))}
.bcard__foot{display:flex;align-items:center;justify-content:space-between;gap: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)}
.bcard__meta{display:inline-flex;align-items:center;gap:7px;margin-left:auto}
/* Аватар ответственного (инициалы в кружке цвета сотрудника) */
.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{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)}
.bflt__panel{margin:10px 2px 0;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:15px 16px;box-shadow:0 12px 32px rgba(16,18,22,.07)}
.bflt__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:11px;align-items:stretch}
.bflt__g{background:color-mix(in srgb,var(--ink) 3.5%,transparent);border:0.5px solid var(--line);border-radius:13px;padding:11px 13px}
.bflt__gl{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-weight:700;margin:0 0 8px}
.bflt__row{display:flex;flex-wrap:wrap;gap:6px}
.bflt__chip{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}
.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:14px;padding-top:12px;border-top:1px solid var(--line)}
.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)}
/* Бегунки (вероятность, дни касания) + поиск источника */
.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}
/* Пропорциональные ширины блоков фильтра (12-колоночный грид): широкие — где много чипов */
.bflt__g--s2{grid-column:span 2}.bflt__g--s3{grid-column:span 3}.bflt__g--s4{grid-column:span 4}.bflt__g--s6{grid-column:span 6}.bflt__g--s8{grid-column:span 8}.bflt__g--wide{grid-column:span 8}
@media (max-width:1180px){.bflt__grid{grid-template-columns:repeat(6,minmax(0,1fr))}.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:720px){.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}
/* Диапазоны дат — каждый своим цветом (палитра сайта): сегодня — янтарный, неделя — синий, месяц — фиолетовый */
.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}
.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}
/* тепловая полоска: высота столбика — деньги на этапе, цвет — застой, клик — прыжок */
.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)}

/* Тост голосовой команды (внизу по центру) */
.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}
.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}}
/* живой список совпадений под строкой поиска доски — видно сразу, клик прыгает к карточке */
.msearch__drop{position:absolute;top:calc(100% + 6px);left:0;z-index:60;min-width:max(100%,250px);max-width:360px;
  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}
@media (max-width:560px){.msearch__drop{left:auto;right:0}}
/* Заметки по закупкам — навигация по поиску: приглушаем соседей, кольцо текущей. */
.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)}
/* Навигация-поиск по списку команды (#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}
.napp__listscroll.is-searching .nrow{opacity:.4;transition:opacity .15s, box-shadow .15s}
.napp__listscroll.is-searching .nrow.is-hit{opacity:1;box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--brand) 38%, transparent)}
.napp__listscroll.is-searching .nrow.is-cur{opacity:1;box-shadow:inset 0 0 0 2.5px var(--brand)}

/* Кнопка-микрофон (во всех поисках): зажать — говорить; запись = оранжевая
   пульсация. Прячется сама, если браузер не умеет распознавание речи. */
.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__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;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}
.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)}
/* Редактор этапов: личная перестановка колонок перетаскиванием */
.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)}
.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}
.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}
  /* лента «Недавние» — не липкая (шапка стала выше), чтобы не наезжала */
  .recentbar{position:static;top:auto}
}
@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{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
  .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__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}

/* ============================================================
   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}
}

/* ============================================================
   ЭКРАН «ЭНЕРГИЯ» — самочувствие и продуктивность команды.
   Палитра/радиусы/тени строго из токенов главной. Флэт, Manrope.
   ============================================================ */
.ennote{display:flex;align-items:flex-start;gap:9px;margin:0 2px 18px;padding:11px 14px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);
  color:var(--muted);font-size:12.5px;line-height:1.5}
.ennote svg{width:16px;height:16px;flex:none;margin-top:1px;color:var(--muted)}
.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}
.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}
.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}
.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}
.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}
@media (max-width:980px){ .en-kpi{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .en-kpi{grid-template-columns:1fr} }

.en-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:14px}
.encard{display:flex;flex-direction:column;gap:12px;padding:15px 16px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);transition:border-color .15s,box-shadow .15s}
.encard:hover{border-color:var(--brand)}
.encard__top{display:flex;align-items:center;gap:12px}
.encard__ava{width:42px;height:42px;border-radius:50%;flex:none;display:grid;place-items:center;
  color:#fff;font-weight:800;font-size:14px;letter-spacing:-.3px}
.encard__id{flex:1;min-width:0}
.encard__name{font-weight:700;font-size:15px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.encard__dept{font-size:12px;color:var(--muted);font-weight:600;margin-top:1px}
.enenergy{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:54px;height:54px;border-radius:14px;background:color-mix(in srgb,var(--c) 14%,var(--surface));color:var(--c)}
.enenergy__v{font-size:21px;font-weight:800;line-height:1}
.enenergy__l{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;margin-top:2px;opacity:.85}

.enmood{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;
  padding:5px 11px 5px 8px;border-radius:999px;font-size:12.5px;font-weight:700;
  color:var(--c);background:color-mix(in srgb,var(--c) 13%,var(--surface));border:1px solid color-mix(in srgb,var(--c) 30%,transparent)}
.enmood svg{width:15px;height:15px}
.enmood i{font-style:normal;font-weight:600;color:var(--muted);font-size:11px}

.enm-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.enm{display:flex;flex-direction:column;align-items:center;gap:5px;padding:9px 4px;
  background:var(--surface-2);border-radius:var(--r-sm);text-align:center}
.enm__ic{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--c) 15%,var(--surface));color:var(--c)}
.enm__ic svg{width:16px;height:16px}
.enm__b{display:flex;flex-direction:column;line-height:1.1}
.enm__v{font-size:14px;font-weight:800;color:var(--ink)}
.enm__l{font-size:10.5px;color:var(--muted);font-weight:600;margin-top:1px}

.enweight{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);font-weight:600}
.enweight svg{width:16px;height:16px;color:var(--muted)}
.enweight b{color:var(--ink);font-weight:700}
.endelta{margin-left:auto;font-size:12px;font-weight:700}
.endelta.is-good{color:var(--up)}
.endelta.is-bad{color:var(--down)}
.endelta.is-flat{color:var(--muted)}

.encheck{display:flex;flex-wrap:wrap;gap:6px}
.enchk{display:inline-flex;align-items:center;gap:4px;padding:4px 9px 4px 7px;border-radius:999px;
  font-size:11.5px;font-weight:700;color:var(--muted);background:var(--surface-2);border:1px solid var(--line)}
.enchk svg{width:13px;height:13px}
.enchk.is-on{color:var(--up);background:color-mix(in srgb,var(--up) 12%,var(--surface));border-color:color-mix(in srgb,var(--up) 30%,transparent)}

.encard__foot{display:flex;align-items:center;gap:10px;padding-top:11px;border-top:1px solid var(--line)}
.enscore{display:flex;align-items:center;gap:9px;flex:1;min-width:0}
.enscore__ic{width:34px;height:34px;border-radius:10px;flex:none;display:grid;place-items:center;
  background:color-mix(in srgb,var(--c) 14%,var(--surface));color:var(--c)}
.enscore__ic svg{width:18px;height:18px}
.enscore__v{font-size:18px;font-weight:800;color:var(--ink);line-height:1}
.enscore__v i{font-style:normal;font-size:11px;font-weight:700;color:var(--muted)}
.enscore__l{display:block;font-size:11px;color:var(--muted);font-weight:600;margin-top:2px}
.entrend{flex:none;display:flex;flex-direction:column;align-items:flex-end;font-size:14px;font-weight:800;line-height:1.1}
.entrend i{font-style:normal;font-size:10px;font-weight:600;color:var(--muted);margin-top:2px}
.entrend.is-up{color:var(--up)}
.entrend.is-down{color:var(--down)}
.entrend.is-flat{color:var(--muted)}

.enbonus{flex:none;text-align:right}
.enbonus b{display:block;font-size:15px;font-weight:800;color:var(--up)}
.enbonus span{font-size:11px;color:var(--muted);font-weight:600}
.enboost{color:var(--up);font-weight:700}

.ensteps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:860px){ .ensteps{grid-template-columns:1fr} }
.enstep{display:flex;gap:12px;padding:14px 15px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.enstep__ic{width:40px;height:40px;border-radius:11px;flex:none;display:grid;place-items:center;
  background:color-mix(in srgb,var(--c) 14%,var(--surface));color:var(--c)}
.enstep__ic svg{width:20px;height:20px}
.enstep__b b{font-size:14.5px;color:var(--ink);font-weight:700}
.enstep__b p{margin:5px 0 0;font-size:12.5px;color:var(--muted);line-height:1.5}

.enempty{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)}
.enempty svg{width:30px;height:30px;color:var(--muted);opacity:.7}
.enempty p{margin:0;font-size:13px;max-width:380px}

/* ---- «Мой чек-ин» — форма ручного ввода на экране «Энергия» ---- */
.encheckin{margin-bottom:6px}
.encin{display:flex;flex-direction:column;gap:13px}
.encin__grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:520px){ .encin__grid{grid-template-columns:1fr} }
.encin__f{display:flex;flex-direction:column;gap:6px;font-size:12.5px;font-weight:700;color:var(--muted)}
.encin__f input,.encin__f textarea{font:inherit;font-weight:600;color:var(--ink);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px;outline:none;transition:border-color .15s}
.encin__f textarea{resize:vertical;min-height:42px;line-height:1.45}
.encin__f input:focus,.encin__f textarea:focus{border-color:var(--brand)}
.encin__lbl{display:block;font-size:12.5px;font-weight:700;color:var(--muted);margin-bottom:7px}
.enmc-row{display:flex;flex-wrap:wrap;gap:8px}
.enmc{display:inline-flex;align-items:center;gap:6px;padding:7px 12px 7px 9px;border-radius:999px;cursor:pointer;
  font-size:12.5px;font-weight:700;color:var(--muted);background:var(--surface);border:1px solid var(--line);transition:border-color .15s,background .15s,color .15s}
.enmc svg{width:15px;height:15px}
.enmc:hover{border-color:color-mix(in srgb,var(--c) 45%,var(--line))}
.enmc.is-on{color:var(--c);background:color-mix(in srgb,var(--c) 13%,var(--surface));border-color:color-mix(in srgb,var(--c) 45%,transparent)}
.encin__foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.encin__save{font:inherit;font-weight:800;font-size:13.5px;color:#fff;background:var(--brand);border:none;
  border-radius:var(--r-sm);padding:11px 22px;cursor:pointer;transition:filter .15s}
.encin__save:hover{filter:brightness(1.05)}
.encin__save:disabled{opacity:.6;cursor:default}
.encin__msg{font-size:12.5px;font-weight:600;color:var(--muted)}
.encin__msg.is-err{color:var(--down)}
.encin-done{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;color:var(--up)}
.encin-done svg{width:14px;height:14px}


/* ============================================================
   Пользователи: пароль в строке + редактор ника/пароля/фото.
   ДОПОЛНЯЕТ уже существующие .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)}

/* ----- «Объекты сегодня»: режим работы + люди + посещаемость ----- */
.camobjs{display:flex;flex-direction:column;gap:10px}
.camobj{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:13px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);cursor:pointer;font:inherit;transition:border-color .15s,box-shadow .15s,transform .12s}
.camobj:hover{border-color:var(--brand);box-shadow:0 6px 18px rgba(10,16,26,.07);transform:translateY(-1px)}
.camobj__ic{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:11px;background:color-mix(in srgb,var(--c) 16%,transparent);color:var(--c)}
.camobj__ic svg{width:20px;height:20px}
.camobj__main{flex:1;min-width:0}
.camobj__top{display:flex;align-items:center;gap:9px;font-size:14.5px;font-weight:700;color:var(--ink)}
.camobj__sub{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);margin-top:4px}
.camobj__sub svg{width:14px;height:14px;flex:none}
.camobj__occ{flex:none;width:130px;text-align:center}
.camobj__occ .camocc{width:120px;height:30px;display:block;margin:0 auto}
.camobj__occ small{display:block;font-size:10.5px;color:var(--muted);margin-top:3px}
.camobj__peep{flex:none;min-width:68px;text-align:right}
.camobj__peep b{font-size:22px;font-weight:700;color:var(--ink);line-height:1}
.camobj__peep span{display:block;font-size:11px;color:var(--muted);margin-top:3px}
@media(max-width:640px){ .camobj__occ{display:none} }
@media(max-width:420px){ .camobj__peep{min-width:0} .camobj__sub{font-size:11.5px} }

/* ===== Камеры: современная лаконичная отделка (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}

/* «Объекты сегодня»: легче, современнее, числа крупнее */
.camobjs{gap:8px}
.camobj{padding:14px 15px;border-color:var(--line);border-radius:14px}
.camobj:hover{box-shadow:0 6px 20px rgba(10,16,26,.06)}
.camobj__ic{width:42px;height:42px;border-radius:12px}
.camobj__top{font-size:14px;font-weight:600;letter-spacing:-.01em}
.camobj__peep b{font-size:24px;font-weight:600}
.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:3px 0 5px}
.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)}
.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}
.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)}
.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-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}
.pprice-sect{margin-top:16px;padding-top:15px;border-top:1px solid var(--line)}
.pprice-sect__h{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:800;color:var(--ink)}
.pprice-sect__h svg{width:16px;height:16px;color:var(--brand);flex:none}
.pprice-sect__note{font-size:11.5px;font-weight:600;color:var(--muted);margin:4px 0 13px 24px;line-height:1.4}
.pprice-svrow{display:flex;align-items:center;gap:11px;margin-top:13px;flex-wrap:wrap}
.pprice-svmsg{font-size:12px;font-weight:700}
.pprice-svmsg[hidden]{display:none}
.pprice-svmsg.is-ok{color:var(--up)}
.pprice-svmsg.is-warn{color:var(--down)}
.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}
.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)}
/* Эффективность источников привлечения — таблица источников */
.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}
.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-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}
.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}

/* ===== Маркетинг — кокпит владельца (отдача источников и сайтов) · паттерны главной ===== */
.mk-demo{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:#e08600;
  background:color-mix(in srgb,#f59e0b 12%,transparent);padding:3px 10px;border-radius:999px}
.mk-demo svg{width:13px;height:13px}
.mk-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:11.5px;color:var(--muted);font-weight:600;margin:0 2px 11px}
.mk-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
/* таблица источников */
.mk-tblwrap{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.mk-tbl{width:100%;border-collapse:collapse;table-layout:fixed;font-size:13px}
.mk-tbl th{background:var(--surface-2);color:var(--muted);font-size:10px;font-weight:800;text-transform:uppercase;
  letter-spacing:.3px;padding:10px 9px;text-align:right;white-space:nowrap}
.mk-tbl th:first-child{text-align:left}
.mk-tbl td{padding:11px 9px;border-top:1px solid var(--line);text-align:right;color:var(--ink-soft);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.mk-tbl td:first-child{text-align:left;color:var(--ink);font-weight:700;white-space:normal}
.mk-tbl tr.is-best td{background:color-mix(in srgb,var(--brand) 5%,var(--surface))}
.mk-tbl b{font-weight:800;color:var(--ink)}
.mk-dot{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:8px;vertical-align:1px}
.mk-badge{font-size:9.5px;font-weight:800;padding:1px 7px;border-radius:999px;margin-left:5px;white-space:nowrap}
.mk-badge--best{background:var(--brand);color:#fff}
.mk-badge--warn{background:color-mix(in srgb,#f59e0b 16%,transparent);color:#b06a00}
.mk-100{display:flex;align-items:center;gap:7px;justify-content:flex-end}
.mk-100__bar{height:8px;border-radius:999px;flex:0 1 84px}
.mk-100__v{font-weight:800;color:var(--ink);white-space:nowrap}
/* рейтинг сайтов */
.mk-sites{display:flex;flex-direction:column;gap:8px}
.mk-site{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);padding:12px 14px;transition:border-color .15s}
.mk-site:hover{border-color:var(--brand)}
.mk-site--warn{border-color:color-mix(in srgb,#f59e0b 42%,var(--line));background:color-mix(in srgb,#f59e0b 6%,var(--surface))}
.mk-site--bad{border-color:color-mix(in srgb,var(--down) 42%,var(--line));background:color-mix(in srgb,var(--down) 6%,var(--surface))}
.mk-site__top{display:flex;align-items:center;gap:11px}
.mk-site__rank{width:18px;flex:none;font-weight:800;font-size:13px;color:var(--muted);text-align:center}
.mk-site__name{flex:1;min-width:0;font-weight:700;font-size:14px;color:var(--ink);overflow:hidden;text-overflow:ellipsis}
.mk-site__sub{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.mk-site__roas{font-size:18px;font-weight:800;min-width:52px;text-align:right;font-variant-numeric:tabular-nums}
.mk-mix{display:flex;height:7px;border-radius:999px;overflow:hidden;margin-top:10px}
.mk-mix span{display:block}
.mk-site__note{display:flex;align-items:center;gap:6px;font-size:11.5px;margin-top:8px}
.mk-site__note svg{width:13px;height:13px;flex:none}
@media (max-width:600px){ .mk-tblwrap{overflow-x:auto} .mk-tbl{min-width:560px} }
/* тренд к прошлому периоду (рост зелёный / падение красное) */
.mk-tr{font-size:10.5px;font-weight:800;margin-left:6px;white-space:nowrap;font-variant-numeric:tabular-nums}
.mk-tr.is-up{color:var(--up)}
.mk-tr.is-down{color:var(--down)}
/* кликабельные числа/строки → график */
.mk-clk{cursor:pointer}
.hkpi.mk-clk{transition:border-color .15s}
.hkpi.mk-clk:hover{border-color:var(--brand)}
.mk-tbl tr.mk-clk:hover td{background:color-mix(in srgb,var(--brand) 6%,var(--surface))}
/* «Куда залить 100 руб» — рекомендация */
.mk-advice{display:flex;gap:13px;align-items:flex-start;background:color-mix(in srgb,var(--brand) 7%,var(--surface));
  border:1px solid color-mix(in srgb,var(--brand) 30%,var(--line));border-radius:var(--r);padding:15px 16px;margin:0 2px 22px}
.mk-advice__ic{width:42px;height:42px;border-radius:12px;flex:none;display:grid;place-items:center;background:var(--brand);color:#fff}
.mk-advice__ic svg{width:22px;height:22px}
.mk-advice__t{font-size:15px;font-weight:800;color:var(--ink);margin:0 0 4px}
.mk-advice__p{font-size:13px;color:var(--ink-soft);margin:0;line-height:1.5}
.mk-advice__p b{color:var(--brand);font-weight:800}
/* кликабельная карточка-метрика (KPI кокпита) */
.metric.mk-clk{cursor:pointer}
.metric.mk-clk:hover{border-color:color-mix(in srgb,var(--brand) 45%,var(--line))}
/* донат «откуда вал — доля источников» */
.mk-donutwrap{display:flex;align-items:center;gap:24px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px}
.mk-donut{position:relative;width:128px;height:128px;flex:none}
.mk-donut__svg{width:100%;height:100%}
.mk-donut__c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.mk-donut__c b{font-size:18px;font-weight:800;color:var(--ink);line-height:1}
.mk-donut__c span{font-size:11px;color:var(--muted);margin-top:2px}
.mk-share{display:flex;flex-direction:column;gap:8px;min-width:180px;flex:1}
.mk-share__row{display:flex;align-items:center;gap:10px;font-size:13.5px}
.mk-share__dot{width:11px;height:11px;border-radius:3px;flex:none}
.mk-share__name{flex:1;color:var(--ink);font-weight:600}
.mk-share__pct{font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
/* широкая таблица источников (много метрик) — горизонтальный скролл */
.mk-tblwrap--scroll{overflow-x:auto}
.mk-tbl--wide{table-layout:auto;min-width:1120px}
.mk-tbl--wide th,.mk-tbl--wide td{padding:11px 12px}
/* динамика — два двойных графика на одну полосу */
.mk-charts2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:760px){ .mk-charts2{grid-template-columns:1fr} }
.mk-dualcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px}
.mk-dualcard__t{font-size:14px;font-weight:700;color:var(--ink);margin-bottom:8px}
.mk-dual-leg{display:flex;gap:16px;flex-wrap:wrap;font-size:11.5px;color:var(--muted);margin-bottom:8px}
.mk-dual-leg i{display:inline-block;width:12px;height:3px;border-radius:2px;margin-right:6px;vertical-align:3px}
.mk-dual-leg b{color:var(--ink);font-weight:800}
.mk-dual{width:100%;height:96px;display:block}
.mk-dual-x{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);margin-top:6px}

/* Фильтр-дропдауны: длинные имена (поставщики) обрезаем троеточием, меню не шире экрана */
.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}
/* № заказа — кликабельный, открывает состав заказа */
.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}
.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}

/* ============================================================
   РЕЙТИНГ СОТРУДНИКОВ — «Чемпион месяца»: герой-карточка лидера + стильный список.
   Современно/аспирационно, на токенах сайта (свет/тёмная тема), акценты — цвет отдела.
   ============================================================ */
.ldb-filters{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ldb-seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;background:var(--surface)}
.ldb-seg__b{border:none;background:transparent;padding:7px 13px;font:inherit;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;transition:.15s}
.ldb-seg__b:hover{color:var(--ink)}
.ldb-seg__b.is-on{background:var(--brand);color:#fff}
.ldb-all{display:inline-flex;align-items:center;gap:5px;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:600;cursor:pointer;transition:.15s}
.ldb-all:hover{border-color:var(--brand);color:var(--brand)}
.ldb-all__chev{width:14px;height:14px;transform:rotate(-90deg)}
.ldb{margin-top:10px}
.lbhero{position:relative;overflow:hidden;width:100%;text-align:left;display:flex;align-items:center;gap:20px;padding:22px 24px;border-radius:var(--r);cursor:pointer;font:inherit;
  background:linear-gradient(135deg,color-mix(in srgb,var(--c) 12%,var(--surface)),color-mix(in srgb,var(--c) 26%,var(--surface)));
  border:1px solid color-mix(in srgb,var(--c) 26%,var(--line));transition:transform .12s}
.lbhero:hover{transform:translateY(-1px)}
.lbhero__glow{position:absolute;right:-50px;top:-60px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--c) 36%,transparent),transparent 68%);pointer-events:none}
.lbhero__awrap{position:relative;flex:none;z-index:1}
.lbhero__crown{position:absolute;top:-15px;left:50%;transform:translateX(-50%);font-size:24px;z-index:2}
.lbhero__ava{display:flex;width:88px;height:88px;border-radius:50%;padding:3px;background:conic-gradient(from 210deg,var(--c),color-mix(in srgb,var(--c) 45%,#fff),var(--c))}
.lbhero__ava b{display:flex;width:100%;height:100%;border-radius:50%;background:var(--surface);align-items:center;justify-content:center;font-size:25px;font-weight:800;color:var(--c)}
.lbhero__info{z-index:1;min-width:0;display:flex;flex-direction:column}
.lbhero__eye{display:inline-flex;align-items:center;gap:5px;font-size:11px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:color-mix(in srgb,var(--c) 72%,var(--ink))}
.lbhero__eye-ic{width:13px;height:13px}
.lbhero__nm{font-size:23px;font-weight:800;color:var(--ink);margin:4px 0 3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lbhero__val{font-size:33px;font-weight:800;color:var(--ink);line-height:1}
.lbhero__val i{font-size:14px;color:var(--muted);font-style:normal;font-weight:600;margin-left:4px}
.lbhero__chips{display:flex;gap:7px;margin-top:11px;flex-wrap:wrap}
.lbchip{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;padding:4px 11px;border-radius:999px;background:color-mix(in srgb,var(--c) 13%,var(--surface));color:color-mix(in srgb,var(--c) 72%,var(--ink))}
.lbchip__ic{width:13px;height:13px}
.lbchip--up{background:color-mix(in srgb,var(--up) 15%,var(--surface));color:var(--up)}
.lbchip--dn{background:color-mix(in srgb,var(--down) 15%,var(--surface));color:var(--down)}
.lblist{margin-top:10px}
.lbrow{display:grid;grid-template-columns:26px 44px minmax(0,1fr) 160px 80px 44px;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;cursor:pointer;font:inherit;text-align:left;background:none;border:none;width:100%}
.lbrow:hover{background:var(--surface-2)}
.lbrow__rk{font-size:15px;font-weight:800;color:var(--muted);text-align:center}
.lbrow__ava{display:flex;width:44px;height:44px;border-radius:50%;padding:2.5px;flex:none}
.lbrow__ava b{display:flex;width:100%;height:100%;border-radius:50%;background:var(--surface);align-items:center;justify-content:center;font-size:13px;font-weight:800;color:var(--c)}
.lbrow__id{min-width:0}
.lbrow__id b{display:block;font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lbrow__id i{display:block;font-size:11.5px;color:var(--muted);font-style:normal}
.lbrow__bar{position:relative;height:9px;border-radius:999px;background:var(--surface-2)}
.lbrow__fill{display:block;height:100%;border-radius:999px;width:0;background:linear-gradient(90deg,color-mix(in srgb,var(--c) 50%,#fff),var(--c));transition:width .8s cubic-bezier(.22,1,.36,1)}
.lbrow__tick{position:absolute;top:-3px;bottom:-3px;width:2px;border-radius:2px;background:var(--ink-soft);opacity:.45}
.lbrow__v{text-align:right}
.lbrow__v b{font-size:15px;font-weight:800;color:var(--ink)}
.lbrow__v span{font-size:11px;color:var(--muted);margin-left:2px}
.lbrow__mv{font-size:11px;font-weight:700;text-align:right;color:var(--muted)}
.lbrow__mv--up{color:var(--up)}
.lbrow__mv--dn{color:var(--down)}
.ldb__hint{font-size:12.5px;color:var(--muted);text-align:center;margin:12px 0 0}
@media (max-width:560px){.lbhero{gap:14px;padding:18px}.lbhero__ava{width:72px;height:72px}.lbhero__val{font-size:28px}.lbrow{grid-template-columns:22px 38px minmax(0,1fr) 72px 40px;gap:8px}.lbrow__bar{display:none}}
.lcard__top{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.lcard__ava{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800;font-size:15px;flex:none}
.lcard__id{min-width:0;flex:1}
.lcard__id b{display:block;font-size:16px;font-weight:800;color:var(--ink)}
.lcard__id span{display:block;font-size:12.5px;color:var(--muted)}
.lcard__mv{margin-top:2px}
.lcard__big{text-align:right}
.lcard__big b{display:block;font-size:24px;font-weight:800;color:var(--ink);line-height:1.1}
.lcard__big i{font-size:12px;color:var(--muted);font-style:normal;margin-left:3px}
.lcard__cl{font-size:11.5px;color:var(--muted)}
.lcard__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-top:14px}
.lcard__cell{background:var(--surface-2);border-radius:var(--r-sm);padding:10px 12px}
.lcard__cv{display:block;font-size:18px;font-weight:800;color:var(--ink);margin-top:2px}
@media (max-width:560px){.ldb__bz{height:260px}.ldb__rank{font-size:22px}.ldb__ring{width:38px;height:38px;bottom:44px}.ldb__ph{width:30px;height:30px}}

/* ============================================================
   ПОСТАВЩИКИ — каталог + кабинет производителя (из паттернов главной:
   .hello / .histkpi / .chcol / белые карточки на сером, флэт, без теней).
   ============================================================ */
.suppliers{animation:fadeUp .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__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/中文 (правый верх кабинета поставщика) */
.suppliers{position:relative}
.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}
.suplang__b.is-on{background:var(--brand);color:#fff}
.suplang__b:not(.is-on):hover{color:var(--ink)}
.suphero__brand svg{width:15px;height:15px}
/* мобилка: переключатель языка — в нормальный поток (не поверх текста героя) */
@media (max-width:640px){
  .suphero{flex-wrap:wrap}
  .suphero__ava{order:-2}
  .suplang{position:static;order:-1;margin-left:auto;align-self:center}
  .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}
.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} }

/* закрытая оболочка: поставщик после входа не видит остальной сайт */
body.k5-supplier .topbar .statusbar,
body.k5-supplier #hsearch,
body.k5-supplier #wsDD,
body.k5-supplier #filialDD,
body.k5-supplier .rolebar,
body.k5-supplier #recentBar{display:none!important}
body.k5-supplier .brandlogo{pointer-events:none}
.suppliers--portal{max-width:1080px;margin:0 auto}
/* привязка логина поставщика в разделе «Аккаунты» */
.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}
.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)}
/* Тулбар заказа (вариант 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:#fff}
.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__cmt{font-size:13px;color:var(--ink-soft);background:var(--surface-2);border:0;border-radius:var(--r-sm);padding:10px 12px;margin-top:12px;display:flex;align-items:flex-start;gap:9px;line-height:1.5;font-weight:600}
  .supmc__cmt svg{width:16px;height:16px;flex:none;color:var(--muted);margin-top:1px}
  .supmc__cmt .supcmt-tx{flex:1;min-width:0;white-space:normal;overflow:visible;overflow-wrap:anywhere}
  .supmc__cmt .supcmt-pen{flex:none;color:var(--muted)}
  .supmc__cmt .supcmt-pen svg{width:14px;height:14px}
  .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 .supcmt-add{margin-top: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}
.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) */
.supdrawer{position:fixed;inset:0;z-index:80;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}
.suptr__cmt{font-size:12px;color:var(--ink-soft);background:color-mix(in srgb,#f59e0b 13%,var(--surface));border:0.5px solid color-mix(in srgb,#f59e0b 30%,var(--line));border-radius:8px;padding:5px 9px;margin-top:6px;display:flex;align-items:flex-start;gap:6px;line-height:1.4}
.suptr__cmt svg{width:14px;height:14px;flex:none;color:#a35a00;margin-top:1px}
/* инлайн-правка комментария КРОНОС: кликабельная плашка (карандаш на ховере), кнопка «+ Комментарий» когда пусто, и сам редактор */
.supcmt-hot{cursor:pointer;transition:background .15s,border-color .15s}
.suptr__cmt.supcmt-hot:hover{background:color-mix(in srgb,#f59e0b 20%,var(--surface));border-color:color-mix(in srgb,#f59e0b 46%,var(--line))}
.supkb__note.supcmt-hot:hover{background:color-mix(in srgb,var(--ink) 6%,var(--surface))}
.supcmt-tx{flex:1;min-width:0}
.supcmt-pen{flex:none;opacity:0;transition:opacity .15s;margin-top:1px}
.supcmt-pen svg{width:13px!important;height:13px!important;color:var(--muted)!important;margin-top:0}
.supcmt-hot:hover .supcmt-pen,.supcmt-hot:focus-visible .supcmt-pen{opacity:.85}
.supcmt-hot:focus-visible{outline:2px solid color-mix(in srgb,var(--brand) 50%,transparent);outline-offset:1px}
.supcmt-add{margin-top:6px;display:inline-flex;align-items:center;gap:5px;cursor:pointer;font:inherit;font-size:11.5px;font-weight:600;color:var(--muted);background:transparent;border:1px dashed color-mix(in srgb,#f59e0b 42%,var(--line));border-radius:8px;padding:4px 9px;transition:all .15s}
.supcmt-add:hover{color:#a35a00;background:color-mix(in srgb,#f59e0b 12%,var(--surface));border-color:color-mix(in srgb,#f59e0b 52%,var(--line))}
.supcmt-add svg{width:13px;height:13px}
.supcmt-ed{margin-top:6px;display:flex;flex-direction:column;gap:7px}
.supcmt-ed__ta{font-size:12.5px;line-height:1.45;resize:none;overflow:hidden;box-sizing:border-box;background:color-mix(in srgb,#f59e0b 7%,var(--surface));border-color:color-mix(in srgb,#f59e0b 30%,var(--line))}
.supcmt-ed__ta:focus{border-color:var(--brand);background:var(--surface)}
.supcmt-ed__row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.supcmt-ed__hint{font-size:10.5px;color:var(--muted)}
.supcmt-ed__btns{display:flex;gap:7px;margin-left:auto}
/* ── Лента комментариев: видно, КТО оставил (аватар-инициалы + имя + время); у одного автора их может быть несколько ── */
.supcfeed{margin-top:6px;display:flex;flex-direction:column;gap:6px}
.supcfeed .supcmt-add,.supcfeed .supcmt-ed{margin-top:0}
.supcf__list{display:flex;flex-direction:column;gap:5px}
/* КОМПОЗЕР нового комментария (как на больших сайтах: всегда внизу, аватар вошедшего + поле «Написать…») */
.supcf__new{display:flex;align-items:center;gap:7px}
.supcf__new--open{align-items:flex-start}
.supcf__newfield{flex:1;min-width:0;text-align:left;cursor:text;font:inherit;font-size:11.5px;font-weight:600;color:var(--muted);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:5px 12px;transition:border-color .15s,background .15s}
.supcf__newfield:hover{border-color:color-mix(in srgb,var(--brand) 40%,var(--line));background:color-mix(in srgb,var(--brand) 4%,var(--surface))}
.supcf__newbody{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px}
.supcf__newta{font-size:12.5px;line-height:1.45;resize:none;overflow:hidden;box-sizing:border-box;width:100%}
.supcf__newta:focus{border-color:var(--brand)}
.supcf__newrow{display:flex;align-items:center;justify-content:flex-end;gap:7px}
.supcf__item{display:flex;align-items:flex-start;gap:7px;background:color-mix(in srgb,#f59e0b 12%,var(--surface));border:0.5px solid color-mix(in srgb,#f59e0b 28%,var(--line));border-radius:9px;padding:5px 8px 6px}
.supcf__ava{width:19px;height:19px;border-radius:50%;flex:none;display:inline-flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;line-height:1;color:#fff;overflow:hidden;margin-top:1px}
.supcf__ava img{width:100%;height:100%;object-fit:cover}
.supcf__ava--anon{background:var(--surface-2)!important;color:var(--muted)}
.supcf__ava--anon svg{width:12px;height:12px}
.supcf__b{flex:1;min-width:0}
.supcf__h{display:flex;align-items:baseline;gap:6px;line-height:1.2}
.supcf__who{font-size:11px;font-weight:800;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.supcf__ts{font-size:10px;font-weight:600;color:var(--muted);flex:none}
.supcf__t{font-size:12px;color:var(--ink-soft);font-weight:600;line-height:1.4;white-space:pre-wrap;overflow-wrap:anywhere;margin-top:2px}
/* клик по тексту комментария → редактирование (карандаш-подсказка при наведении) */
/* действия комментария: карандаш-правка + крестик-удаление справа. Правка — ОТДЕЛЬНОЙ кнопкой (не клик по тексту) */
.supcf__act{display:inline-flex;align-items:center;gap:1px;flex:none;margin-top:-1px}
.supcf__edit{flex:none;opacity:.45;background:transparent;border:0;cursor:pointer;color:var(--muted);padding:2px;border-radius:6px;line-height:0;transition:opacity .15s,color .15s,background .15s}
.supcf__edit svg{width:13px;height:13px}
.supcf__item:hover .supcf__edit,.supcf__edit:focus-visible{opacity:.85}
.supcf__edit:hover{opacity:1;color:var(--brand);background:color-mix(in srgb,var(--brand) 12%,transparent)}
.supcf__item--ed .supcmt-ed{margin-top:3px}
.supcf__del{flex:none;opacity:0;background:transparent;border:0;cursor:pointer;color:var(--muted);padding:2px;margin:-1px -2px 0 0;border-radius:6px;line-height:0;transition:opacity .15s,color .15s,background .15s}
.supcf__del svg{width:13px;height:13px}
.supcf__item:hover .supcf__del,.supcf__del:focus-visible{opacity:.7}
.supcf__del:hover{opacity:1;color:#e0533d;background:color-mix(in srgb,#e0533d 12%,transparent)}
.supcfeed--kb .supcf__item{background:var(--surface-2);border-color:transparent;padding:5px 7px 6px;gap:6px}
.supcfeed--kb .supcf__t{font-size:11.5px}
.supcfeed--kb .supcf__ava{width:17px;height:17px;font-size:8px}
.supcfeed--mc .supcf__item{padding:7px 9px 8px}
.supcfeed--mc .supcf__t{font-size:13px;color:var(--ink)}
.supcfeed--mc .supcf__newfield{font-size:12.5px;padding:7px 13px}
/* на тач-экранах нет hover — карандаш/крестик правки видны всегда */
.supcfeed--mc .supcf__edit,.supcfeed--kb .supcf__edit{opacity:.7}
.supcfeed--mc .supcf__del,.supcfeed--kb .supcf__del{opacity:.5}
/* секция «Комментарии» в окне деталей позиции */
.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)}
.supcf__t a{color:var(--brand);font-weight:700;word-break:break-all}
.supline__cmt{font-size:13px;color:var(--ink);background:color-mix(in srgb,#f59e0b 15%,var(--surface));border:0.5px solid color-mix(in srgb,#f59e0b 32%,var(--line));border-radius:8px;padding:8px 11px;margin:2px 0 4px;display:flex;align-items:flex-start;gap:7px;line-height:1.45}
.supline__cmt svg{width:15px;height:15px;flex:none;color:#a35a00;margin-top:1px}
.supline__cmt b{color:#8a4d00;font-weight:700}
/* даты «завод / готов»: подпись-ключ серым + значение жирным; готов зелёный когда есть, красный если просрочен */
.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%}
/* строка фильтров: чипы (слева, тянутся/прокручиваются) + сортировка по дате (справа) */
.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))}
.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)}
/* Карточка позиции «Расписания» всплывает панелью справа (как drawer) — внести даты прямо отсюда */
.supov{position:fixed;inset:0;z-index:78}
.supov__backdrop{position:absolute;inset:0;background:rgba(10,14,18,.4);opacity:0;animation:supovFade .2s ease forwards}
.supov__card{position:absolute;top:0;right:0;bottom:0;width:min(620px,96vw);display:flex;flex-direction:column;
  background:var(--surface);border-left:1px solid var(--line);box-shadow:-18px 0 50px rgba(16,24,40,.18);
  transform:translateX(102%);animation:supovIn .26s cubic-bezier(.4,0,.2,1) forwards}
@keyframes supovFade{to{opacity:1}}
@keyframes supovIn{to{transform:none}}
.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}
.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))}
.supov__body{flex:1;min-height:0;overflow:auto;padding:16px}
@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__card{width:100vw}.supov__body{padding:14px 16px}.supov__head{padding-left:16px;padding-right:14px}
}

/* переписка КРОНОС ↔ поставщик по позиции */
.supcmt{margin-top:14px;padding-top:13px;border-top:1px solid var(--line)}
.supcmt__hd{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.supcmt__hd svg{width:15px;height:15px}
.supcmt__n{font-size:10px;font-weight:800;color:var(--brand);background:color-mix(in srgb,var(--brand) 13%,var(--surface));border-radius:999px;padding:1px 7px}
.supcmt__list{display:flex;flex-direction:column;gap:8px;margin-bottom:11px}
.supcmt__empty{font-size:12px;color:var(--muted);padding:2px 0}
.supcmt__m{max-width:80%;padding:8px 11px;border-radius:12px;font-size:13px;line-height:1.45}
.supcmt__m--kr{align-self:flex-start;background:var(--surface-2);border-bottom-left-radius:3px}
.supcmt__m--sup{align-self:flex-end;background:color-mix(in srgb,var(--brand) 12%,var(--surface));border-bottom-right-radius:3px}
.supcmt__a{display:flex;align-items:baseline;gap:7px;font-size:11px;font-weight:700;color:var(--ink-soft);margin-bottom:3px}
.supcmt__m--sup .supcmt__a{color:var(--brand)}
.supcmt__ts{font-size:10px;font-weight:600;color:var(--muted)}
.supcmt__x{color:var(--ink);white-space:pre-wrap;word-break:break-word}
.supcmt__form{display:flex;gap:8px}
.supcmt__form .uinput{flex:1}

/* фото готовности к позиции */
.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)}
/* лайтбокс фото — поверх всего, в натуральном размере (до экрана) */
.suplb{position:fixed;inset:0;z-index:120;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}

/* быстрые победы: легенда-кнопки, бейджи фото/сообщений, сортируемая шапка */
.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;margin-top:6px}
.supcmt-add + .spmini{margin-left:18px}
.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}