/* WorkFlow PLAN (сервис; бывш. Agent Control) — dark theme. Geist + Inter + Geist Mono,
   near-black elevation palette, Lucide monochrome icons, CSS-first motion.
   Все анимации только transform/opacity (GPU), 150–300ms, ease-out; полностью
   отключаются под prefers-reduced-motion. Контраст ≥ AA. */
:root{
  /* near-black base + layered elevation */
  --bg:#0a0b0f; --panel:#13151c; --panel2:#1b1e28; --panel3:#222633; --line:#272c39;
  --txt:#e8edf4; --mut:#9aa6b8;
  --acc:#6aa6ff; --acc2:#8b5cf6; --accsoft:rgba(106,166,255,.14);
  --green:#3fb950; --amber:#d6a022; --red:#f8604f; --purple:#a371f7;
  --donebd:#2a5c32;   /* приглушённый зелёный плитки «Готово» (объём выполненного) */
  /* Единый токен роли COO: розовый, чтобы планер не сливался с Klokod (синий)
     и владельцем (зелёный). Используется бейджем .b-coo и секцией планера на «Обвязке». */
  --coo:#ff86c8; --coo-bg:#331a28; --coo-line:#63304b;
  --chip:#1d2330;
  --radius:13px; --radius-sm:9px;
  /* elevation: hairline + soft shadow */
  --sh-1:0 1px 2px rgba(0,0,0,.4);
  --sh-2:0 6px 22px -8px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.35);
  --sh-pop:0 18px 50px -12px rgba(0,0,0,.7);
  --font-head:'Geist','Space Grotesk',system-ui,sans-serif;
  --font-body:'Inter','Inter Tight',system-ui,sans-serif;
  --font-mono:'Geist Mono','JetBrains Mono',ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--txt);font:14px/1.55 var(--font-body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  background-image:radial-gradient(1200px 600px at 78% -8%,rgba(124,92,255,.08),transparent 60%),
    radial-gradient(900px 500px at 0% 0%,rgba(106,166,255,.06),transparent 55%);background-attachment:fixed}
h1,h2,h3,h4{font-family:var(--font-head);font-weight:600;letter-spacing:-.01em}
a{color:inherit;text-decoration:none;cursor:pointer}
code{font-family:var(--font-mono);font-size:.9em;color:#bcc7d6}

/* ---- icons (Lucide inline) ---- */
/* GUARD: every inline <svg> already carries width/height ATTRIBUTES, so
   size never depends on CSS. This is a belt-and-suspenders cap so that ANY future
   attr-less <svg> can't blow up to container size (the giant-icon failure mode). */
svg:not([width]){width:1em;height:1em}
svg{max-width:100%}
.ic{width:16px;height:16px;flex:none;vertical-align:-3px;stroke-width:1.75}
.ic.s14{width:14px;height:14px}.ic.s18{width:18px;height:18px}
.ic.spin{animation:spin 1.1s linear infinite}

/* Шапка переносится на узком экране: иначе она не влезает в 1024 и толкает горизонтальный
   скролл всей страницы. */
.top{display:flex;align-items:center;flex-wrap:wrap;gap:16px;padding:11px 20px;background:rgba(15,17,23,.86);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;box-shadow:var(--sh-1)}
.logo{display:flex;align-items:center;gap:9px;font-weight:600;font-size:15px;font-family:var(--font-head);letter-spacing:-.02em}
/* вордмарк-картинка: высота фикс., ширина auto (пропорция ~10:1 ≈ 250px), без подложки */
.logo img{height:24px;width:auto;flex:none;display:block}
.logo .dim{color:var(--mut);font-weight:500;font-size:12px}
.tabs{display:flex;gap:3px;margin-left:8px}
.tab{display:flex;align-items:center;gap:7px;padding:7px 13px;border-radius:9px;color:var(--mut);font-weight:550;font-size:13px;transition:background .15s var(--ease),color .15s var(--ease)}
.tab:hover{color:var(--txt);background:var(--panel2)}
.tab.active{background:var(--panel2);color:var(--txt);box-shadow:inset 0 0 0 1px var(--line)}
.spacer{flex:1}
/* Чип почты штаба в шапке по прототипу docs/prototypes/mail-chip-proto.html (вариант Б):
   синий как чип «klokod-harness» на доске, шрифт 400; ноль — весь блок тёмно-серый и неподвижный. */
.mail{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 10px;border-radius:999px;border:1px solid #2a3d5c;background:#10161f;color:#6aa6ff;font-weight:400;font-size:13px;white-space:nowrap;cursor:pointer;text-decoration:none}
.mail:hover{border-color:#3c5687;background:#121a27}
.mail.zero{color:#5f6878;border-color:#1c222c;background:#0e1219;cursor:default}
.mail.zero:hover{border-color:#1c222c;background:#0e1219}
.mail svg{width:16px;height:16px;flex:none;display:block;animation:spinB 5s cubic-bezier(.4,0,.2,1) infinite}
.mail.zero svg{animation:none}
.mail .n{font-variant-numeric:tabular-nums}
/* Б — быстрый оборот 360° в плоскости за первые 12 % цикла (0,6 с), остальное покой до 5 с */
@keyframes spinB{0%{transform:rotate(0)}12%{transform:rotate(360deg)}100%{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.mail svg{animation:none}}
.who{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--mut)}
/* меню учётки (Профиль/Выйти) по клику на аватар */
.user-wrap{position:relative}
.user-wrap .who{cursor:pointer;user-select:none}
.user-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:50;min-width:170px;background:var(--panel2,#1b1f27);border:1px solid var(--line);border-radius:10px;padding:5px;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.user-menu a{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:7px;font-size:13px;cursor:pointer;color:var(--fg,#e6e6e6)}
.user-menu a:hover{background:var(--panel,#232833)}
/* одна строка: тулбар + сигналы вместе, wrap на узком */
.board-topline{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-bottom:12px}
.board-topline > *{margin-top:0!important;margin-bottom:0!important}
/* Два зазора над доской по 12 px. Нижнее поле строки владельца обнулено (id бьёт класс, объявленный
   ниже), вертикальный паддинг пилюль фильтра — 0: воздух внутри строки читается как воздух между строками. */
.board-topline > #owner-filter{margin-bottom:0!important}
#owner-filter .t2{padding-top:0;padding-bottom:0}
.board-topline h2{font-size:18px}
.board-topline .sig-row{margin:0}
.topline-spacer{flex:1 1 auto;min-width:8px}
@media (max-width:560px){.topline-spacer{display:none}}
/* «реестр · обновлено» у правого края одного ряда с фильтром владельца; на узком экране он встаёт
   первым и остаётся справа, а фильтр переносится строкой ниже (рвётся ряд, а не порядок) */
.topline-right{display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-left:auto}
@media (max-width:560px){.topline-right{order:-1}}

.wrap{display:flex;min-height:calc(100vh - 51px)}
.side{width:218px;border-right:1px solid var(--line);padding:14px 9px;flex:none;background:linear-gradient(180deg,var(--panel),rgba(19,21,28,.6))}
.side a{display:flex;align-items:center;gap:9px;padding:8px 12px;border-radius:9px;color:var(--mut);font-weight:550;font-size:13px;margin:1px 0;transition:background .15s var(--ease),color .15s}
.side a:hover{background:var(--panel2);color:var(--txt)}
.side a.active{background:var(--accsoft);color:#cfe2ff;box-shadow:inset 0 0 0 1px rgba(106,166,255,.2)}
.side .sect{font-size:10.5px;color:#67748a;text-transform:uppercase;letter-spacing:.6px;margin:16px 10px 5px;font-weight:600}
/* Потолка ширины у контейнера нет: карточки полноширинные, и на широком экране половина
   монитора иначе пустует. Поля остаются, чтобы контент не липнул к краям. */
.main{flex:1;padding:24px 28px;max-width:none;min-width:0}
/* Поле справа до края окна равно левому. Классическая полоса прокрутки (мышь в macOS, Windows)
   стоит справа внутри окна и добавляет к полю свою ширину. Ширину полосы кладёт в `--sbw` скрипт
   (`app.js`, `setScrollbarVar`); без полосы (трекпад, телефон) она 0. */
.main{padding-right:max(0px,calc(28px - var(--sbw,0px)))}
h1{font-size:21px;margin:0 0 5px}h2{font-size:15px;margin:24px 0 11px;color:#d3dbe6;display:flex;align-items:center;gap:8px}
.sub{color:var(--mut);margin:0 0 18px;font-size:13px}

.grid{display:grid;gap:13px}
/* .g3 адаптивна сама: auto-fit перетекает 4→3→2→1 колонок по ширине,
   жёсткий медиа-излом для неё не нужен (оставлен только для .g2/.g4). */
.g3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.g4{grid-template-columns:repeat(4,1fr)}.g2{grid-template-columns:repeat(2,1fr)}
@media(max-width:980px){.g4,.g2{grid-template-columns:1fr 1fr}}
.card{background:linear-gradient(180deg,var(--panel),rgba(15,17,23,.75));border:1px solid var(--line);border-radius:var(--radius);padding:15px;box-shadow:var(--sh-1)}
.card.click{cursor:pointer;transition:transform .18s var(--ease),border-color .18s,box-shadow .18s}
.card.click:hover{transform:translateY(-2px);border-color:rgba(106,166,255,.45);box-shadow:var(--sh-2)}
.card.click:active{transform:translateY(0) scale(.995)}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;padding:3px 10px;border-radius:20px;background:var(--chip);border:1px solid var(--line);white-space:nowrap}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none}
.g-ok{background:var(--green)}.g-warn{background:var(--amber)}.g-err{background:var(--red)}
.dot.pulse{animation:pulse-dot 1.9s var(--ease) infinite}
.badge{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;padding:2px 8px;border-radius:6px;font-weight:650;font-family:var(--font-body)}
.b-agent{background:#10243c;color:#8ecaff;border:1px solid #234a6e}
.b-human{background:#13301f;color:#8fe0a0;border:1px solid #2a5236}
/* Цвет владельца выводится из uid, а не из роли: у владельцев одна роль, и цвет роли их не
   различает. Цвет — вспомогательный признак: имя в чипе остаётся всегда (дальтонизм, ч/б печать).
   Занятые роли обходим: синий — исполнитель, розовый — планер, янтарный — предупреждения. */
.b-own-green{background:#13301f;color:#8fe0a0;border:1px solid #2a5236}   /* Григорий (привык) */
.b-own-purple{background:#241a38;color:#c4a5ff;border:1px solid #453266}  /* Юля */
.b-own-teal{background:#0f2b2b;color:#7fd6cd;border:1px solid #245150}
.b-own-indigo{background:#181f3a;color:#a0b0ff;border:1px solid #2f3a68}
.b-own-copper{background:#2e1f14;color:#e0ab7f;border:1px solid #573a26}
.b-own-slate{background:#1c222b;color:#adbcd0;border:1px solid #36404e}
.b-sys{background:#241a32;color:#c79bf0;border:1px solid #432f63}
.b-coo{background:var(--coo-bg);color:var(--coo);border:1px solid var(--coo-line)}
/* Принадлежность скила бейджем: канон = фиолетовый (тон персоны «Канон флота»,
   rgb 139,92,246), свой = нейтральный серый. Канон сам не живёт — он свойство скилов агента. */
.b-canon{background:rgba(139,92,246,.14);color:#c4b5fd;border:1px solid rgba(139,92,246,.4)}
.b-own{background:#1c2230;color:var(--mut);border:1px solid var(--line)}
/* «Klokod ждёт ответа»: срочность видно, не вчитываясь. Пульс мягкий и
   отключается при prefers-reduced-motion (мигание — барьер доступности). */
.kcard.kblocked{border-color:var(--red)!important;box-shadow:0 0 0 1px rgba(248,96,79,.45);animation:blockedPulse 2s ease-in-out infinite}
/* задача-виновница паузы НА карточке борда: «ждёт руки» (красн., пульс) / «молчит» (янтарь) */
.kcard.katt-alert{border-color:#ff6b6b!important;box-shadow:0 0 0 1px rgba(248,96,79,.45);animation:blockedPulse 2s ease-in-out infinite}
.kcard.katt-silence{border-color:var(--amber)!important;box-shadow:0 0 0 1px rgba(214,160,34,.4)}
.trow.katt-alert td:first-child,.trow.trow-blocked td:first-child{box-shadow:inset 3px 0 0 var(--red)}
.trow.katt-silence td:first-child{box-shadow:inset 3px 0 0 var(--amber)}
@media (prefers-reduced-motion:reduce){.kcard.katt-alert{animation:none}}
/* Задача обновления канона выделена бегущей меткой «NEW <версия>», рамка карточки обычная
   (эталон docs/prototypes/canon-release-highlight.html). Движение снимается при reduced-motion:
   анимация здесь привлекает внимание, а не несёт смысл. */
@property --kroll{syntax:"<angle>";inherits:false;initial-value:0deg}
/* Метка стоит сразу справа от номера задачи; пара «номер + метка» — неразрывная группа. */
.krollout-badge{font-family:var(--mono,ui-monospace,monospace);font-size:10px;font-weight:600;padding:1px 6px;
  margin-left:6px;white-space:nowrap;vertical-align:1px;line-height:9px;display:inline-block;
  border-radius:999px;color:#cdb6ff;letter-spacing:.02em;border:1.5px solid transparent;
  background:linear-gradient(#1a1530,#1a1530) padding-box,
  conic-gradient(from var(--kroll),#b48cff,#4cc9f0 25%,#3a3352 45%,#3a3352 70%,#b48cff) border-box;
  animation:krollSpin 4s linear infinite}
@keyframes krollSpin{to{--kroll:360deg}}
/* Метка сменяет «NEW <версия>» на «Обновление» раз в 10 с (период 20 с, переход .7s = 3.5 %, как у слота
   шапки). Размер метки задаёт только «NEW <версия>»: второй текст — абсолютом поверх, мельче, по центру. */
.krollout-badge{position:relative}
.krollout-badge .kb-new{animation:kbNew 20s linear infinite}
.krollout-badge .kb-upd{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;font-size:8px;font-weight:600;
  letter-spacing:0;white-space:nowrap;overflow:hidden;opacity:0;animation:kbUpd 20s linear infinite}
@keyframes kbNew{0%,46.5%{opacity:1}50%,96.5%{opacity:0}100%{opacity:1}}
@keyframes kbUpd{0%,46.5%{opacity:0}50%,96.5%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.krollout-badge{animation:none}
  .krollout-badge .kb-new{animation:none;opacity:1}.krollout-badge .kb-upd{animation:none;opacity:0}}
.kidrow{white-space:nowrap}
.kcard.krollout .ktitle{margin-top:5px}
/* Слот шапки: два чипа в одном месте, сменяются раз в 10 с (`startHeadSlot`). Оба лежат в
   одной ячейке грида — место не «прыгает», когда один уходит, а другой приходит; ушедший не кликается. */
.hslot{position:relative;display:grid;align-items:center}
/* Ячейка слота — флекс по центру: чип не садится на базовую линию строки, и «вышел канон» (11px) стоит
   на той же высоте, что «Разбери почту» (13px). */
.hslot>.hs{grid-area:1/1;display:flex;align-items:center;transition:opacity .7s ease,transform .7s ease}
.hslot>.hs.off{opacity:0;transform:translateY(6px);pointer-events:none}
/* Чип выпуска — та же бегущая обводка, что у метки «NEW» на карточке задачи обновления: одно движение
   на весь выпуск, а не два разных. */
.pill.krelease{color:#cdb6ff;border:1.5px solid transparent;
  background:linear-gradient(#0f141d,#0f141d) padding-box,
  conic-gradient(from var(--kroll),#b48cff,#4cc9f0 25%,#2c3a52 45%,#2c3a52 70%,#b48cff) border-box;
  animation:krollSpin 5s linear infinite}
.pill.krelease b{font-family:var(--mono,ui-monospace,monospace);font-weight:700}
@media (prefers-reduced-motion:reduce){
  .pill.krelease{animation:none}
  .cb-d.new{animation:none}
  .hslot>.hs{transition:none}}
/* Иконка входящих от штаба: очень маленькая, монохромная (цвет у строки, currentColor), мигает очень
   медленно — цикл 4 с, мягко (0.35 → 1). Под prefers-reduced-motion мигание выключается совсем. */
.blocked-badge{margin-top:6px;padding:5px 8px;border-radius:var(--radius-sm);background:rgba(248,96,79,.12);
  border:1px solid rgba(248,96,79,.5);color:var(--red);font-size:12px;display:flex;align-items:center;gap:6px}
.blocked-banner{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:12px;padding:11px 14px;
  border-radius:var(--radius);background:rgba(248,96,79,.12);border:1px solid rgba(248,96,79,.55);color:var(--red);
  animation:blockedPulse 2s ease-in-out infinite}
@keyframes blockedPulse{0%,100%{box-shadow:0 0 0 1px rgba(248,96,79,.35)}50%{box-shadow:0 0 0 4px rgba(248,96,79,.18)}}
@media (prefers-reduced-motion:reduce){.kcard.kblocked,.blocked-banner{animation:none}}
.badge .ic{width:12px;height:12px;vertical-align:-2px}
.kpi{font-size:25px;font-weight:700;font-family:var(--font-head);letter-spacing:-.02em;font-variant-numeric:tabular-nums}.kpi.s{font-size:19px}
.muted{color:var(--mut);font-size:12px}
.mono{font-family:var(--font-mono)}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;color:var(--mut);font-weight:600;font-size:11.5px;letter-spacing:.02em;padding:8px 9px;border-bottom:1px solid var(--line)}
td{padding:10px 9px;border-bottom:1px solid var(--line)}
th.col-s,td.col-s{text-align:right;white-space:nowrap;width:1%}
.trow{cursor:pointer;transition:background .14s var(--ease)}
.trow:hover{background:var(--panel2)}
.bar{height:6px;border-radius:4px;background:var(--line);overflow:hidden;margin-top:7px}
.bar>i{display:block;height:100%;width:0;border-radius:4px;transition:width .9s var(--ease)}

.tabs2{display:flex;gap:3px;border-bottom:1px solid var(--line);margin:8px 0 18px;flex-wrap:wrap;align-items:center}
/* Хвост строки вкладок: выбор вида доски у правого края той же строки, а не своей полосой под ней.
   Он служебный: мельче вкладки, без подчёркивания активной, приглушённый — чтобы не читаться шестой
   вкладкой. */
.tabs2-tail{margin-left:auto;display:flex;align-items:center;gap:2px}
.vw-switch{display:inline-flex;align-items:center;gap:1px;border:1px solid var(--line);border-radius:7px;
  padding:1px;background:rgba(16,20,27,.6)}
.vw-btn{display:inline-flex;align-items:center;gap:4px;padding:2px 7px;border:0;border-radius:6px;cursor:pointer;
  background:none;color:#6b7484;font-size:11px;line-height:1.4;font-family:inherit}
.vw-btn:hover{color:#aab3c5}
.vw-btn.on{background:#1b2130;color:#dfe6ef}
.vw-lbl{white-space:nowrap}
@media (max-width:560px){ .vw-lbl{display:none} .vw-btn{padding:3px 6px} }
.t2{display:flex;align-items:center;gap:7px;padding:9px 14px;color:var(--mut);font-weight:600;font-size:13px;border-bottom:2px solid transparent;cursor:pointer;transition:color .15s var(--ease),border-color .15s}
.t2:hover{color:var(--txt)}
.t2.active{color:var(--txt);border-bottom-color:var(--acc)}
/* вкладка «Отчёт» без файла: видна, но не кликается (честно «отчёта ещё нет») */
.t2.disabled{color:var(--mut);opacity:.45;cursor:not-allowed;pointer-events:none}
.tp-panel{margin-top:2px}
/* Строка сигналов: громкость держит ЦВЕТ, место экономит размер.
   Сигнал не приглушён — он сжат до бейджа со счётчиком и разворачивается кликом. */
.sig-row{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.sig-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;
  border:1px solid var(--line);background:var(--panel2);color:var(--mut);font-size:12px;font-weight:600;cursor:pointer}
.sig-badge:hover{color:var(--txt)}
.sig-badge.on{border-color:var(--acc);color:var(--txt)}
.sig-badge.sig-err{border-color:#5c2a2a;color:var(--red)}
.sig-badge.sig-warn{border-color:#5c4a2a;color:var(--amber)}
.sig-panel.hidden{display:none}
/* пилюля очереди прямо на карточке/строке задачи */
.q-pill{margin-left:6px;font-size:11px}
.q-pill.q-now{border-color:#2a5c3a;color:var(--green)}
.kcard .q-pill{display:inline-block;margin:6px 0 0}
/* Число колонок задаёт рендер, не константа: --kan-cols проставляется в kanbanHtml по
   фактическому числу колонок, иначе лишняя колонка переносится на вторую строку. */
.kanban{display:grid;grid-template-columns:repeat(var(--kan-cols,5),minmax(0,1fr));gap:11px}
/* Колонки в целых пикселях: доли 1fr дают дробные ширины, и Safari при DPR 2 рисует правый край
   колонок левее края шапки, хотя в DOM края совпадают. Первые N−1 колонок — округлённая вниз целая
   ширина, последняя забирает остаток до правого края `#task-kan`. Без `round()` (старый браузер)
   правило целиком не применяется — действует строка выше. */
.kanban{grid-template-columns:repeat(var(--kan-rest,4),round(down,calc((100% - 11px * var(--kan-rest,4)) / var(--kan-cols,5)),1px)) minmax(0,1fr)}
.kcol{background:linear-gradient(180deg,var(--panel),rgba(15,17,23,.6));border:1px solid var(--line);border-radius:11px;padding:9px;min-height:120px}
.kcol h4{margin:3px 5px 9px;font-size:11.5px;color:var(--mut);text-transform:uppercase;letter-spacing:.4px;display:flex;align-items:center;gap:6px}
/* Счётчик карточек колонки: читается как число, не как ещё одно слово
   заголовка (моноширинный, без caps-разрядки заголовка, приглушённая плашка). */
.kcount{font-variant-numeric:tabular-nums;font-family:var(--mono,ui-monospace,monospace);
  letter-spacing:0;background:var(--panel2);border:1px solid var(--line);border-radius:999px;
  padding:0 6px;line-height:16px;font-size:10.5px;color:var(--mut)}
.kcard{background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:9px;margin-bottom:7px;font-size:12px;box-shadow:var(--sh-1)}
/* Заголовок целиком: карточка растёт по высоте, текст переносится (в т.ч.
   длинное слово/URL), никакого ellipsis и никакой обрезки строки — данные не режем. */
.kcard .ktitle{display:block;margin-top:3px;white-space:normal;overflow-wrap:anywhere;
  word-break:normal;line-height:1.35}
.kcol{min-width:0}                       /* колонка grid не распирается длинным словом */
.kcard.click{cursor:pointer;transition:transform .16s var(--ease),border-color .16s}
.kcard.click:hover{transform:translateY(-2px);border-color:rgba(106,166,255,.4)}

.flow{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:12px 0}
.arr{color:#3a4456;display:inline-flex}
.btn{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:6px 12px;border-radius:9px;border:1px solid var(--line);background:var(--panel2);color:var(--txt);cursor:pointer;font-family:var(--font-body);font-weight:550;transition:transform .1s var(--ease),background .15s,border-color .15s}
/* Мини-кнопка карточки агента. Класс, а не инлайн: вторая мини-кнопка в другом месте
   не должна дублировать стиль. */
.btn-mini{font-size:10.5px;padding:3px 6px;border-radius:4px;gap:3px;line-height:1.15;font-weight:500}
.btn:hover{background:var(--panel3);border-color:#333c4c}
.btn:active{transform:scale(.97)}
.btn.ok{background:#143021;border-color:#2a5c32;color:#8fe0a0}.btn.no{background:#2a1518;border-color:#5c2a2a;color:#ff9a8e}
.btn.primary{background:linear-gradient(180deg,#2b62b8,#244f97);border-color:#3a6ec0;color:#eaf2ff}
.hidden{display:none}
/* Плашка декоративная и обязана пропускать клики сквозь себя: она `fixed` в правом нижнем
   углу и иначе перехватывает нажатия по кнопкам под ней. Обработчиков клика у неё нет
   (единственное обращение из JS — показать), поэтому pointer-events:none ничего не ломает. */
.proto{position:fixed;bottom:11px;right:13px;pointer-events:none;display:flex;align-items:center;gap:6px;font-size:11px;color:#67748a;background:rgba(19,21,28,.8);backdrop-filter:blur(6px);border:1px solid var(--line);padding:5px 11px;border-radius:20px}

.tgroup{border:1px solid var(--line);border-radius:var(--radius);margin-bottom:18px;overflow:hidden;border-left:4px solid var(--mut);box-shadow:var(--sh-1)}
.tghead{display:flex;align-items:center;gap:9px;padding:12px 16px;font-weight:600;font-size:14px;border-bottom:1px solid var(--line)}
.tghead .ic{color:inherit}
.tghead .cnt{color:var(--mut);font-weight:400;font-size:12px}
.tghead .hint{color:var(--mut);font-weight:400;font-size:11.5px;margin-left:auto;display:flex;align-items:center;gap:6px}
.tgroup table{margin:0}
.tgroup td{padding:11px 16px;border-bottom:1px solid var(--line)}
.tgroup tr:last-child td{border-bottom:none}
/* Хвост «Готово»: компактная визуализация ОБЪЁМА выполненного (сотни→тысячи):
   28-колоночная мозаика, count-up mono/green, квартальные полосы при >600, лента-стрип в списке. */
.done-tail{margin-top:12px;border-top:1px dashed var(--line);padding:10px 9px 4px}
.dt-head{display:flex;align-items:baseline;gap:8px}
.dt-count{font:600 18px var(--font-mono);color:var(--green)}
.dt-lbl{font-size:10px;color:var(--mut)}
.dt-mosaic{display:grid;grid-template-columns:repeat(28,1fr);gap:2px;margin:8px 0 6px}
.dt-mosaic i{aspect-ratio:1;border-radius:1.5px;background:var(--donebd);opacity:0;transform:scale(.3);
             transition:opacity .25s var(--ease),transform .25s var(--ease)}
.dt-mosaic i.on{opacity:1;transform:scale(1)}
.dt-mosaic i.hot{background:var(--green)}
.dt-mosaic i:hover{background:var(--acc);cursor:default}
.dt-meta{font-size:10px;color:var(--mut)}
a.dt-all{display:inline-block;margin-top:7px;font-size:11px;color:var(--acc);text-decoration:none;cursor:pointer;
         border:1px solid var(--line);border-radius:20px;padding:2px 10px;background:var(--chip)}
a.dt-all:hover{border-color:rgba(106,166,255,.55);box-shadow:0 0 12px rgba(106,166,255,.25)}
.dt-years{display:flex;flex-direction:column;gap:4px;margin:8px 0 6px}
.dt-yr{display:flex;align-items:center;gap:6px}
.dt-yr b{font:500 10px var(--font-mono);color:var(--mut);width:64px;flex:none}
.dt-yrbar{height:8px;border-radius:4px;background:var(--donebd);width:0;transition:width 1.1s cubic-bezier(.2,.7,.2,1)}
.dt-yr span{font:10px var(--font-mono);color:var(--mut)}
/* лента-стрип в футере группы «Готово» вида Список */
.tg-tail{border-top:1px dashed var(--line);padding:8px 16px;display:flex;align-items:center;gap:10px}
.tg-strip{flex:1;display:grid;grid-template-columns:repeat(60,1fr);gap:1.5px}
.tg-strip i{height:10px;border-radius:1px;background:var(--donebd);opacity:0;transition:opacity .2s}
.tg-strip i.on{opacity:1}
@media (prefers-reduced-motion:reduce){
  .dt-mosaic i,.tg-strip i{opacity:1;transform:none;transition:none}
  .dt-yrbar{transition:none}
}
@media (max-width:430px){.dt-mosaic{grid-template-columns:repeat(20,1fr)}}
.tg-work{border-left-color:var(--green)}.tg-work .tghead{background:rgba(63,185,80,.08)}
.tg-gate{border-left-color:var(--red)}.tg-gate .tghead{background:rgba(248,96,79,.1)}
.tg-rev{border-left-color:var(--amber)}.tg-rev .tghead{background:rgba(214,160,34,.09)}
.tg-back{border-left-color:#3a4452}.tg-back .tghead{background:var(--panel2)}
/* «Проектирование»: неготовые задачи, спрос с планера. Приглушённый фиолетовый,
   чтобы колонка читалась как «ещё не работа», но не как аномалия (красный занят). */
.tg-design{border-left-color:#7d5bbe}.tg-design .tghead{background:rgba(125,91,190,.10)}
.tg-plan{border-left-color:var(--acc)}.tg-plan .tghead{background:var(--accsoft)}
.tg-done{border-left-color:#2a5c32}.tg-done .tghead{background:rgba(63,185,80,.05)}
.tg-unrec{border-left-color:var(--red)}.tg-unrec .tghead{background:rgba(248,96,79,.14)}
.fresh{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--mut)}

/* ═════════════════════════════════════════════════════════════════════════════════════
   ЭКРАН ВХОДА ПО ЭТАЛОНУ docs/prototypes/login-2026-08-17.html.
   Цвета, радиусы, размеры, тайминги и тексты взяты из эталона как есть; селекторы эталона
   скоуплены под .auth-screen (в эталоне это body), переменные эталона переопределены В СКОУПЕ
   (каскад не трогает остальную админку). Не перенесены три заглушки эталона: переключатель
   громкости (.knobs), подпись прототипа (.note), жёсткие цифры статуса флота (текст приходит
   с /api/auth/pulse). Режим фона — «спокойно» (класс calm на .auth-screen). ═══════════════ */
input,select{font:14px var(--font-body)}
.auth-screen{
  --bg:#07080b;
  --ink:#f0f2f6; --ink-2:#9ba2b0; --ink-3:#6b7280; --ink-4:#4e545f;
  --line:#242833; --line-soft:#191c24;
  --blue:#3f7ae8; --violet:#7b5cf0; --cyan:#3fb9e8;
  --green:#35c98d; --red:#e8807b;
  --field:#0d0f14;
  position:fixed; inset:0; z-index:90; margin:0; background:var(--bg); color:var(--ink);
  font:400 15px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Arial,sans-serif;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:100vh; overflow:hidden; -webkit-font-smoothing:antialiased}
/* фон страницы: плывущие пятна + сетка */
.auth-screen .bg{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.auth-screen .orb{position:absolute; border-radius:50%; filter:blur(80px); will-change:transform}
.auth-screen .o1{left:-6%;  top:-10%;  width:46vw; height:46vw; background:radial-gradient(circle,rgba(63,122,232,.26),transparent 68%); animation:lg-float1 24s ease-in-out infinite}
.auth-screen .o2{right:-8%; bottom:-12%;width:42vw; height:42vw; background:radial-gradient(circle,rgba(123,92,240,.22),transparent 68%); animation:lg-float2 31s ease-in-out infinite}
.auth-screen .o3{left:46%;  top:58%;   width:30vw; height:30vw; background:radial-gradient(circle,rgba(53,201,141,.13),transparent 68%); animation:lg-float3 38s ease-in-out infinite}
@keyframes lg-float1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(3vw,2vw) scale(1.1)}}
@keyframes lg-float2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-3vw,-2vw) scale(1.12)}}
@keyframes lg-float3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-2vw,3vw) scale(.92)}}
.auth-screen .mesh{position:absolute; inset:0; opacity:.5;
  background-image:linear-gradient(var(--line-soft) 1px,transparent 1px),linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(ellipse 68% 58% at 50% 46%,#000 25%,transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse 68% 58% at 50% 46%,#000 25%,transparent 80%)}
/* карточка: стекло + светящаяся рамка */
/* display:block и min-height:0 — глушат протечку ГЛОБАЛЬНОГО .wrap админки
   (display:flex; min-height:calc(100vh - 51px)) — он растягивал карточку в узкий столб */
.auth-screen .wrap{position:relative; z-index:1; width:100%; max-width:478px; padding:24px;
  display:block; min-height:0}
.auth-screen .shell{position:relative; border-radius:22px; padding:1px;
  background:linear-gradient(150deg,rgba(63,122,232,.55),rgba(123,92,240,.32) 38%,rgba(255,255,255,.05) 62%,rgba(63,185,232,.30));
  box-shadow:0 40px 90px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.02)}
.auth-screen .card{position:relative; overflow:hidden; border-radius:21px; padding:40px 38px 30px; border:0; margin:0;
  box-shadow:none; /* глушит box-shadow глобального .card админки */
  background:
    radial-gradient(120% 90% at 12% -10%, rgba(63,122,232,.20), transparent 58%),
    radial-gradient(110% 80% at 100% 108%, rgba(123,92,240,.18), transparent 60%),
    linear-gradient(168deg, rgba(23,26,34,.94), rgba(13,15,20,.96));
  backdrop-filter:blur(18px) saturate(130%)}
.auth-screen .aurora{position:absolute; inset:-40%; z-index:0; pointer-events:none; opacity:.75;
  background:conic-gradient(from 0deg, transparent 0 32%, rgba(63,122,232,.20) 42%, rgba(123,92,240,.16) 52%, transparent 64% 100%);
  animation:lg-spin 26s linear infinite; will-change:transform}
@keyframes lg-spin{to{transform:rotate(1turn)}}
.auth-screen .sheen{position:absolute; left:-60%; top:0; width:60%; height:100%; z-index:0; pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.045),transparent); animation:lg-slide 9s ease-in-out infinite}
@keyframes lg-slide{0%{left:-60%}55%,100%{left:130%}}
.auth-screen .inner{position:relative; z-index:1}
/* логотип и заголовок */
.auth-screen .logo{display:block; width:312px; max-width:100%; height:auto; margin:0 auto 16px}
.auth-screen .h1{margin:0 0 5px; text-align:center; font-size:16.5px; font-weight:500; letter-spacing:-.1px}
.auth-screen .sub{margin:0 0 26px; text-align:center; font-size:12.5px; color:var(--ink-2)}
/* поля */
.auth-screen .field{margin-bottom:14px}
.auth-screen .lbl{display:block; font-size:12.5px; color:var(--ink-2); margin:0 0 7px}
.auth-screen .box{position:relative}
.auth-screen .box svg{position:absolute; left:14px; top:50%; transform:translateY(-50%); width:18px; height:18px;
  stroke:var(--ink-3); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; transition:stroke .18s; pointer-events:none}
.auth-screen input[type=email],.auth-screen input[type=password],.auth-screen input[type=text]{
  width:100%; height:50px; padding:0 46px 0 44px; font-size:15px; color:var(--ink); margin:0;
  background:var(--field); border:1px solid var(--line); border-radius:13px; outline:none;
  transition:border-color .2s, box-shadow .2s, background .2s}
.auth-screen input::placeholder{color:#565c67}
.auth-screen input:hover{border-color:#2e333f}
.auth-screen .box:focus-within svg{stroke:var(--blue)}
.auth-screen input:focus{border-color:var(--blue); background:#0f1218; box-shadow:0 0 0 3.5px rgba(63,122,232,.17)}
.auth-screen input.bad{border-color:var(--red); box-shadow:0 0 0 3.5px rgba(232,128,123,.14)}
.auth-screen .peek{position:absolute; right:6px; top:50%; transform:translateY(-50%); width:36px; height:36px;
  display:grid; place-items:center; border:0; background:transparent; cursor:pointer; border-radius:9px}
.auth-screen .peek:hover{background:#171a21}
.auth-screen .peek svg{position:static; transform:none; width:17px; height:17px}
/* строка «запомнить» */
.auth-screen .row{display:flex; align-items:center; justify-content:space-between; gap:12px; margin:16px 0 20px}
.auth-screen .check{display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--ink-2); cursor:pointer; user-select:none}
.auth-screen .check input{position:absolute; opacity:0; width:0; height:0}
.auth-screen .tickbox{width:18px; height:18px; border-radius:5.5px; border:1.5px solid #333846; background:var(--field);
  display:grid; place-items:center; transition:background .18s,border-color .18s}
.auth-screen .tickbox svg{width:11px; height:11px; stroke:#fff; stroke-width:2.6; fill:none; stroke-linecap:round; stroke-linejoin:round;
  opacity:0; transform:scale(.6); transition:opacity .16s,transform .16s}
.auth-screen .check input:checked + .tickbox{background:linear-gradient(140deg,var(--blue),var(--violet)); border-color:transparent}
.auth-screen .check input:checked + .tickbox svg{opacity:1; transform:none}
.auth-screen .check input:focus-visible + .tickbox{box-shadow:0 0 0 3px rgba(63,122,232,.25)}
.auth-screen .link{font-size:13.5px; color:#7ea6ee; text-decoration:none; transition:color .16s}
.auth-screen .link:hover{color:#a5c3f6; text-decoration:underline; text-underline-offset:3px}
/* кнопка */
.auth-screen .go{position:relative; overflow:hidden; width:100%; height:52px; border:0; border-radius:13px;
  background:linear-gradient(100deg,var(--blue),var(--violet) 55%,#8f6cf5);
  background-size:180% 100%; background-position:0% 50%; color:#fff;
  font:500 16px/1 inherit; cursor:pointer; letter-spacing:.1px;
  display:flex; align-items:center; justify-content:center; gap:10px;
  box-shadow:0 12px 30px -12px rgba(90,100,240,.65);
  transition:background-position .5s ease, transform .1s ease, box-shadow .25s ease}
.auth-screen .go:hover{background-position:100% 50%; box-shadow:0 16px 38px -12px rgba(90,100,240,.8)}
.auth-screen .go:active{transform:scale(.986)}
.auth-screen .go svg{width:17px; height:17px; stroke:#fff; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .22s}
.auth-screen .go:hover svg{transform:translateX(3px)}
.auth-screen .go.ok{background:linear-gradient(100deg,#1e9e75,#35c98d)}
.auth-screen .sweep{position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent); animation:lg-sweep 1.05s linear infinite}
@keyframes lg-sweep{0%{transform:translateX(-110%)}100%{transform:translateX(110%)}}
.auth-screen .err{min-height:19px; margin:4px 0 0; font-size:13px; color:var(--red); opacity:0; transform:translateY(-3px); transition:opacity .2s,transform .2s}
.auth-screen .err.on{opacity:1; transform:none}
/* детали внизу карточки */
.auth-screen .invite{margin:14px 0 0; text-align:center; font-size:12px; color:var(--ink-3); line-height:1.4; max-width:290px; margin-left:auto; margin-right:auto}
.auth-screen .fleet{margin-top:16px; padding-top:14px; border-top:1px solid var(--line-soft);
  display:flex; align-items:center; justify-content:center; gap:9px; font-size:12.5px; color:#7b8290}
.auth-screen .pulse{position:relative; width:7px; height:7px; border-radius:50%; background:var(--green); flex:0 0 auto}
.auth-screen .pulse::after{content:""; position:absolute; inset:-5px; border-radius:50%; border:1px solid var(--green); opacity:.5; animation:lg-ring 2.8s ease-out infinite}
@keyframes lg-ring{0%{transform:scale(.55);opacity:.6}100%{transform:scale(1.6);opacity:0}}
/* подвал */
.auth-screen .foot{position:relative; z-index:1; display:flex; flex-wrap:nowrap; align-items:center; justify-content:center;
  gap:14px; margin:18px 0 0; font-size:11.5px; color:var(--ink-4); white-space:nowrap}
.auth-screen .foot a{color:var(--ink-4); text-decoration:none; transition:color .16s}
.auth-screen .foot a:hover{color:var(--ink-2)}
/* появление */
.auth-screen .rise{opacity:0; transform:translateY(14px); animation:lg-rise .6s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes lg-rise{to{opacity:1; transform:none}}
/* успешный вход */
.auth-screen .leaving{transition:transform .6s cubic-bezier(.4,0,.2,1), opacity .6s ease; transform:translateY(-16px) scale(.96); opacity:0}
.auth-screen .done{position:fixed; inset:0; z-index:3; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; opacity:0; transition:opacity .6s ease .2s; pointer-events:none}
.auth-screen .done.on{opacity:1}
.auth-screen .tick{width:60px; height:60px; border-radius:50%; display:grid; place-items:center;
  background:radial-gradient(circle,rgba(53,201,141,.16),transparent 70%); border:1.5px solid rgba(53,201,141,.55)}
.auth-screen .tick svg{width:28px; height:28px}
.auth-screen .tick path{stroke:var(--green); stroke-width:2.4; fill:none; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:32; stroke-dashoffset:32; animation:lg-draw .55s ease .32s forwards}
@keyframes lg-draw{to{stroke-dashoffset:0}}
.auth-screen .done p{margin:0; font-size:15.5px; color:var(--ink-2)}
/* громкость фона — прод живёт в «спокойно» */
.auth-screen.calm .orb{animation-duration:40s}
.auth-screen.calm .o1{opacity:.6} .auth-screen.calm .o2{opacity:.55} .auth-screen.calm .o3{opacity:.4}
.auth-screen.calm .mesh{opacity:.34} .auth-screen.calm .aurora{opacity:.5} .auth-screen.calm .sheen{animation-duration:14s}
@media (prefers-reduced-motion:reduce){
  .auth-screen .orb,.auth-screen .aurora,.auth-screen .sheen,.auth-screen .pulse::after,.auth-screen .sweep{animation:none}
  .auth-screen .rise{opacity:1; transform:none; animation:none}
}
@media (max-width:520px){
  .auth-screen .card{padding:32px 22px 26px}
  .auth-screen .logo{width:240px}
  .auth-screen .foot{flex-wrap:wrap; gap:10px 14px; white-space:normal}
}
.modal input,.modal select{display:block;width:100%;margin:8px 0;padding:10px 12px;background:var(--bg);border:1px solid var(--line);border-radius:9px;color:var(--txt)}
.modal input:focus,.modal select:focus{outline:none;border-color:var(--acc)}
.card input,.card select{padding:10px 12px;background:var(--bg);border:1px solid var(--line);border-radius:9px;color:var(--txt);width:100%}
.card input:focus,.card select:focus{outline:none;border-color:var(--acc)}
/* Список проектов во всю ширину: карточка = строка-панель (три зоны),
   на узком экране зоны честно складываются в столбец. */
.proj-rows{display:flex;flex-direction:column;gap:13px}
/* «Матрица статусов»: люди/агенты × проекты. Горизонтальный скролл на узком,
   ячейки ≥44px (тач-таргет). Читает существующие резолверы, рисует иконками. */
.mtx-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;margin-top:12px}
.mtx{border-collapse:collapse;min-width:100%;font-size:13px}
.mtx th,.mtx td{border:1px solid var(--line);padding:0;text-align:center;min-width:44px;height:44px}
/* Первая колонка не зависит от длины имени: подпись «Klokod · <имя связки>» при nowrap
   раздвигала бы липкую колонку и всю таблицу. Ширина ограничена сверху, длинное имя
   переносится по словам; полное имя — в подсказке строки. */
/* Имя агента не рвётся посимвольно: `overflow-wrap:anywhere` рвёт слово в любом месте,
   поэтому `overflow-wrap:normal;word-break:normal`. Подпись агента (`uid@связка`) — одно
   слово, колонке дана ширина под него, лишнее срезается многоточием: управляемое сокращение
   вместо рваного переноса. Полное имя — в подсказке строки. */
.mtx-row{background:var(--panel);position:sticky;left:0;z-index:1;text-align:left;padding:7px 10px;min-width:190px;max-width:260px}
.mtx-actor{display:flex;align-items:center;gap:5px;font-weight:500;min-width:0;overflow-wrap:normal;word-break:normal;line-height:1.25}
.mtx-actor > span,.mtx-actor > b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* чей это агент — второй строкой, мелко: строка таблицы называет АГЕНТА, а владельца — рядом */
.mtx-owner{font-size:11px;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* клетка несёт ТОЛЬКО версию: одна строка, моноширинно, без переносов */
.mtx-ver{font-family:var(--font-mono);font-size:13px;line-height:1.3;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
/* Карта не кликается, и курсор не должен обещать клик: класс остался только у клеток карты
   (`<g class="mtx-cell">` в SVG) и у тонов таблицы флота ниже. */
.mtx-cell{font-size:13px;padding:9px 10px;text-align:center;transition:background .1s}
.mtx-empty,.mtx-cell.mtx-empty{cursor:default;background:repeating-linear-gradient(45deg,transparent,transparent 4px,var(--panel2) 4px,var(--panel2) 5px)}
/* словесный статус в клетке (один статус словами, цвет = актуальность канона) */
.mtx-word{font-size:12.5px;line-height:1.35;font-weight:600;white-space:nowrap}
/* Штамп свежести под версией: дата и чей это момент. Тон НЕ трогаем (цвет кодирует действие, не возраст); протухшее отличается словом и приглушением. */
.mtx-stamp{font-size:10px;line-height:1.2;opacity:.62;white-space:nowrap;margin-top:1px;overflow:hidden;text-overflow:ellipsis;max-width:100%}
/* Блок участника: аватар + имя в заголовке, таблица той же структуры внутри.
   Блоки — обычный поток, поэтому на узком экране они складываются в столбец сами. */
.mtx-block{margin:14px 0 18px}
/* Колонки выровнены между блоками. Каждый блок — своя <table>, и при авто-раскладке ширины
   считаются по содержимому — связки не сравнить по вертикали. Фиксированная раскладка + равные
   доли делают сетку общей: первая колонка — имена агентов, остальные делят остаток поровну. */
/* min-width — чтобы на узком экране таблица СКОЛЬЗИЛА в своей обёртке (overflow-x у
   .mtx-wrap), а не сжимала колонки до нечитаемого: фиксированная раскладка без него
   ужимает «Nextmetrica» под соседнюю ячейку. На десктопе 100% шире порога — правило
   не влияет. */
.mtx-block .mtx{table-layout:fixed;width:100%;min-width:640px}
.avatar.sm{width:28px;height:28px;font-size:12.5px}
.mtx-legend{font-size:12px;margin:8px 0}
/* сводка «оснащённость флота» + светофор актуальности (версия ведёт, доступ вторичен) */
.mtx-summary{margin:12px 0;padding:12px 14px}
.mtx-sum-head{display:flex;align-items:center;gap:7px;font-size:15px}
.mtx-chip{font-size:12px;padding:3px 9px;border-radius:7px;border:1px solid var(--line);white-space:nowrap}
.mtx-detail>div{margin:8px 0;line-height:1.45}
.mtx-next{background:var(--panel2);border-radius:8px;padding:8px 11px}
.mtx-notrack{background:#0f1a12;border-left:3px solid var(--green);border-radius:6px;padding:9px 12px;font-size:13px;line-height:1.45}
/* Попап автопилота «одна/весь план» (mobile-ok: на узком экране кнопки в столбик,
   растягиваются на всю ширину — паттерн fullscreen-попапа). */

/* Линия health под названием проекта: короткая полоса шириной левой колонки (имя/подзаголовок),
   не во всю ширину низа. Живёт внутри .proj-row-id (max-width 340px). */
.proj-row-id>.bar.pcard-health{margin-top:8px;max-width:260px}
/* Текст не обрубается посреди слова: строка переносится на вторую и обрывается по границе
   слова, а не по пикселю — обрубок не сообщает ничего, кроме того, что показ не поместился. */
/* Подпись и идентификатор не переносятся: перенос по буквам рвёт ID («HAR N- 768»). Перенос
   по буквам допустим только для длинного заголовка задачи — он в `.lw-title`. Строка строчная
   (не флекс), чтобы текст обтекал иконку, а не вставал колонкой. */
/* Без обрезки по пикселю: заголовок укорачивается по границе слова в разметке
   (`cutWords`), поэтому строке хватает двух строк без line-clamp и без обрубков. */
.last-work{font-size:11.5px;margin-top:7px;max-width:340px;white-space:normal;
  overflow-wrap:normal;word-break:normal}
.last-work .lw-id,.last-work .mono{white-space:nowrap}
.last-work .lw-title{overflow-wrap:break-word}
.last-work .mono{color:var(--txt)}
/* заголовок секции дашборда участника («Твой проект» / «Остальные проекты флота») */
.proj-sect-head{display:flex;align-items:center;gap:7px;font-weight:600;font-size:12px;
  text-transform:uppercase;letter-spacing:.4px;color:var(--mut);margin:16px 0 9px}
#cards>.proj-sect-head:first-child{margin-top:2px}
/* аватар-кругляш учётки (фото ∨ первая буква имени) */
.avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
  border-radius:50%;background:var(--panel2);border:1px solid var(--line);color:var(--txt);
  font-size:11px;font-weight:600;overflow:hidden;flex:none;vertical-align:middle}
.avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}  /* фото поверх буквы; 404 → onerror снимает → буква */

/* Аватар в чипе ложится в бокс иконки 14×14, ровно как `.ic.s14`, чтобы не менять высоту
   чипа и карточки; кольцо внутреннее (box-shadow inset), а не border — внешняя обводка
   добавила бы два пикселя. */
.avatar.xs{width:14px;height:14px;font-size:8px;border:0;
  box-shadow:inset 0 0 0 1px var(--av-ring, var(--line))}
.avatar.xs img{border-radius:50%}
/* Цвет выводится из UID (детерминированно) — переменная приходит инлайном из avatarHtml:
   имя человека можно переименовать, цвет от этого не «переоденется». */
.avatar[data-uid]{background:var(--av-bg, var(--panel2))}
.proj-row-main{display:flex;align-items:flex-start;gap:22px;flex-wrap:wrap}
.proj-row-id{flex:1 1 260px;min-width:220px;max-width:340px}
.proj-row-mid{flex:2 1 320px;min-width:260px}
/* Блок встаёт по центру между соседом и лого. Внутри своей колонки он центрирован, но у лого
   поверх общего зазора есть собственный `.proj-logo{margin-left:14px}`, и он весь ложится справа.
   Автоотступы не помогают: свободного места в строке нет (id и mid растягиваются). Тот же отступ
   зеркалится слева от колонки; гибкие соседи ужимаются на 14 px. */
.proj-row-side{flex:0 1 auto;margin-left:14px;display:flex;flex-direction:column;align-items:center;gap:7px;max-width:300px;min-width:0}
/* Канон-блок живёт в side-слоте: ширина ограничена, чтобы сумма flex-базисов
   (id 260 + mid 320 + side 260 + логотип 200+ml14 + gaps 66 = 1120) влезала и на узком
   десктопе (~1130px контента) — иначе логотип wrap-ится под карточку. */
/* Контейнер центрирует блок: `.canon-card-block` блочный, и `align-self:center` у самого
   блока не работает. Контейнер — флекс, блок по центру; ширина блока — по содержимому с
   потолком 260, чтобы центрирование было ВИДНО, а не совпадало с краями колонки. */
.proj-row-side .canon-card-block{max-width:300px;width:300px;display:flex;justify-content:center}
/* Потолок ширины — любому блоку внутри, не только `.status-block`: правило, привязанное к
   имени класса, тихо перестаёт действовать при переименовании. */
.proj-row-side .canon-card-block>*{max-width:260px}
/* Один статус-блок: рамка, обводка по тону, заголовок с индикатором, разделитель, строки. */
/* Только обводка, без заливки: на тёмном фоне заливка даёт грязный прямоугольник, а не
   подсветку. */
/* Центрируется блок, а не текст в нём: ширина по содержимому с потолком, колонка
   центрирует блок, текст внутри выравнивается влево. Высота — по содержимому (min-height
   вместо height): фиксированная высота с overflow режет фразу. */
.status-block{border:1px solid var(--line);border-radius:8px;padding:6px 9px;min-height:96px;box-sizing:border-box;width:fit-content;max-width:100%;display:flex;flex-direction:column;align-items:flex-start;text-align:left;align-self:center}
.status-block .sb-head{display:flex;align-items:center;gap:6px;font-size:12.5px;line-height:1.3}
.status-block .sb-head b{font-weight:600}
.status-block .sb-dot{width:7px;height:7px;border-radius:50%;flex:none;display:inline-block}
/* то же для подписи блока версии: переносы вместо обрубка */
/* Перенос по словам: `overflow-wrap:anywhere` рвёт слова посреди. Подпись занимает до трёх
   строк — места хватает, потому что высота блока не фиксирована. */
.status-block .sb-sub{font-size:11.5px;line-height:1.3;margin-top:2px;white-space:normal;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow-wrap:normal;word-break:normal}
/* Заголовок переносится, как подпись: nowrap+ellipsis режет состояние на середине, и вместо
   факта виден обрывок. Две строки: больше — и карточка снова начнёт расти. */
.status-block .sb-head b{overflow:hidden;white-space:normal;overflow-wrap:break-word;
  word-break:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.status-block .sb-rows{border-top:1px solid var(--line);margin-top:4px;padding-top:2px;overflow-y:auto;flex:1;min-height:0}
/* Колонка канона по центру высоты карточки, на одной линии с центром логотипа
   (`.proj-logo{align-self:center}`). На узком — правило ниже. */
.proj-row-side{align-self:center}
@media (max-width:820px){.proj-row-side{margin-left:0;align-items:flex-start;align-self:auto}.proj-row-id{max-width:none}}
/* 5 tier'ов ПЛОТНОСТИ по ширине самой карточки (container queries; источник правды о
   ширине один — карточка-контейнер). M (900–1600) = база; XS/S сбрасывают, L/XL добирают.
   Полный DOM всегда — показ управляет CSS. */
.proj-row{container-type:inline-size;container-name:pcard}
.proj-site{display:inline-flex;align-items:center;gap:5px}
/* чужой проект участнику: обзор виден, ВХОД закрыт (приглушён, курсор — не-клик) */
.proj-locked{opacity:.6;cursor:default}
.proj-locked.click:hover{transform:none;border-color:var(--line);box-shadow:var(--sh-1)}
.pcard-alarm:empty{display:none}
.pcard-alarm{display:none}                 /* M+: тревогу несёт колонка side; компактный слот скрыт */

/* L (≥1600): добираем колонку «Последние задачи» */
@container pcard (min-width:1600px){.proj-row-more{display:flex}}
/* XL (≥2100): + пульс 14 дн и «следующая в очереди» */
@container pcard (min-width:2100px){.pcard-xl{display:flex}}
/* S (≤900): спокойный side уходит; ТРЕВОГА (has-alarm) показывается компактным слотом у имени
   (мид с воркфлоу остаётся — спокойный статус дублировать не нужно). */
@container pcard (max-width:900px){
  .proj-row-side{display:none}
}
/* XS (≤480): только имя+лого, health-пилюля, ОДНА статус-пилюля (тревога ∨ спокойная), health-бар */
@container pcard (max-width:480px){
  .proj-row-mid,.pcard-repo,.proj-site{display:none}
  .pcard-alarm{display:inline-flex}
}
/* готовое сообщение агенту + кнопка копирования */
.copy-box{margin-top:8px}
.copy-msg{white-space:pre-wrap;background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:10px 12px;font-size:13px;line-height:1.5;color:var(--txt);margin:0 0 8px;font-family:var(--font-body)}
.disconn{display:flex;align-items:center;gap:9px;border:1px dashed var(--line);border-radius:var(--radius);padding:16px;color:var(--mut);background:var(--panel)}
.modal{position:fixed;inset:0;background:rgba(4,5,8,.62);display:flex;align-items:center;justify-content:center;z-index:60;padding:32px;animation:backdrop-in .18s var(--ease)}
.modal .box{background:var(--panel);border:1px solid var(--line);border-radius:15px;max-width:840px;width:100%;max-height:86vh;overflow:auto;padding:22px;box-shadow:var(--sh-pop);animation:modal-in .2s var(--ease)}
.modal .box h2{display:flex;align-items:center;gap:9px;margin-top:0}
.modal pre{white-space:pre-wrap;word-break:break-word;font-family:var(--font-mono);font-size:12px;line-height:1.55;color:#cad4e2;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:13px;margin:8px 0}
.modal h3{font-family:var(--font-head);font-size:13px;color:#d3dbe6}
.x-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;border:1px solid var(--line);background:var(--panel2);color:var(--mut);cursor:pointer;transition:transform .1s var(--ease),color .15s}
.x-btn:hover{color:var(--txt)}.x-btn:active{transform:scale(.93)}
.err-banner{display:flex;align-items:center;gap:8px;background:rgba(248,96,79,.08);border:1px solid #5c2a2a;color:#ff9a8e;padding:11px 14px;border-radius:10px;margin-bottom:14px}
.err-banner-msg{flex:1}
.err-banner-x{margin-left:auto;flex:none;opacity:.7;cursor:pointer}
.err-banner-x:hover{opacity:1}
/* done-баннер автопилота: относительный контейнер под ✕ (гаситель) в углу */
.ap-done{position:relative;border-color:#2a5c33;background:#0f1a12;margin:8px 0;cursor:pointer;padding-right:38px}
.ap-done-x{position:absolute;top:8px;right:10px;opacity:.7;cursor:pointer}
.ap-done-x:hover{opacity:1}

/* ---- E. animations catalog ---- */
.anim-in{animation:slide-in .26s var(--ease) both}
.flash{animation:row-flash 1.7s var(--ease)}
.skel{background:linear-gradient(100deg,var(--panel2) 30%,var(--panel3) 50%,var(--panel2) 70%);background-size:200% 100%;animation:shimmer 1.3s linear infinite;border-radius:9px}
.skel-row{height:46px;margin-bottom:10px}.skel-card{height:78px}
@keyframes pulse-dot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.78)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
@keyframes modal-in{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
@keyframes backdrop-in{from{opacity:0}to{opacity:1}}
@keyframes slide-in{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:translateY(0)}}
@keyframes row-flash{0%{background:rgba(106,166,255,.22)}100%{background:transparent}}
/* View Transitions (tab/view switches) — fade root */
::view-transition-old(root){animation:vt-out .18s var(--ease) both}
::view-transition-new(root){animation:vt-in .22s var(--ease) both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0}to{opacity:1}}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .dot.pulse,.ic.spin,.skel{animation:none!important}
  .card.click:hover,.kcard.click:hover{transform:none}
  .bar>i{transition:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none!important}
}
.btn:disabled{opacity:.45;cursor:not-allowed}
/* узкая колонка коворка: стеПпер скроллится, строки-узлы переносятся */
@media (max-width:560px){
  /* на узкой ширине логотип ужимается (~207px), подпись прячется — меню не переносится */
  .logo img{height:20px}
  .logo .dim{display:none}
}

/* ---------- Q&A-флоу онбординга ---------- */

/* Крупный шаг хендоффа Klokod: нумерованный кружок + контент.
   Шаг 1 (ключ) акцентирован: он самый частый пропуск owner-а (env на сервере). */

/* Медленный зелёный перелив внутри активных клеток карты. Анимируется только opacity
   (композитинг на GPU): сотни клеток не должны стоить кадров. Период 7.5с — «дыхание», а не
   мигание; фазу разводит inline-delay в разметке (волна). Тихие клетки (уровень < 2) класса
   mtx-live не получают вовсе. */
@keyframes mtxBreath{0%,100%{opacity:.72}50%{opacity:1}}
@keyframes mtxBreathHi{0%,100%{opacity:.6}50%{opacity:1}}
/* Анимация живёт, только пока карта в кадре: бесконечные анимации держат композитор занятым
   всегда и тормозят наведение на соседние карточки. Класс включает JS по IntersectionObserver
   (matrix.js), поэтому за кадром карта статична и не стоит ничего. */
.mtx-anim-on .mtx-live{animation:mtxBreath 7.5s ease-in-out infinite}   /* класс на КВАДРАТЕ (mtx-sub), но не больше 40 одновременно — потолок в разметке */
.mtx-anim-on .mtx-live-hi{animation-name:mtxBreathHi;animation-duration:6.5s}
/* Уважение к системной настройке: «меньше движения» → карта статична (канон доступности) */
@media (prefers-reduced-motion:reduce){.mtx-anim-on .mtx-live,.mtx-anim-on .mtx-live-hi{animation:none}}

/* Лого широкоформатное, не в кружке: картинка вписывается целиком (`object-fit:contain` —
   обрезки нет, маски нет). Круглая маска — только у плейсхолдера безлоготипного проекта. */
/* Блок лого фиксированный и один для всех карточек: 200×62, иначе колонка карточек рваная.
   Картинка вписывается внутрь (`object-fit:contain`, max-width/height 100% — ничего не
   растягивается и не обрезается); плейсхолдер — того же бокса по высоте, кружок по центру.
   На узком экране (≤820px) бокс ужимается по ширине, высота держится. */
/* Оптическая нормализация: логотип «знак + текст + слоган» (4.2:1) рядом с тонким вордмарком
   (10.3:1) при «вписать по ширине» доминирует по высоте. Потолок ВЫСОТЫ 40px это убирает,
   обрезки нет (`contain`). Ширину бокса не увеличивать: на 240px флекс-строка переносит лого
   на отдельную строку и карточка вырастает вдвое. */
.proj-logo{position:relative;flex:none;height:62px;width:200px;max-width:100%;
  margin-left:14px;display:flex;align-items:center;justify-content:center;
  align-self:center}  /* блок логотипа центрован и по вертикали строки (align-items:flex-start прижимал бы его к верху) */
.proj-logo img{position:relative;z-index:1;max-width:100%;max-height:40px;
  width:auto;height:auto;object-fit:contain;background:transparent}
/* У Kivolo прозрачных полей нет, и знак занимал бы весь блок 200×40; показ на 40 % меньше:
   120×24, по центру блока. */
.proj-logo[data-logo="kivolo"] img{max-width:120px;max-height:24px}
/* Логотип-компонент комплекта анимаций (HARN-1518): тот же предел, что у картинки; размер логотипа считает адаптер logos.js */
.proj-logo brand-logo{position:relative;z-index:1;--logo-max-w:200px;--logo-max-h:40px}
.proj-logo[data-logo="kivolo"] brand-logo{--logo-max-w:120px;--logo-max-h:24px}
/* DMS: знак в PNG комплекта занимает 48 % высоты (CSD — 77 %), поэтому блоку DMS почти вся высота карточки.
   29.09 слово владельца «уменьши логотим DMS на 20%»: 62 → 50 px (слой ≈150×50 вместо 186×62). */
.proj-logo[data-logo="dms"] brand-logo{--logo-max-h:50px}
.proj-logo-ph{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:62px;height:62px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:var(--panel2);border:1px solid var(--line);
  color:var(--mut);font-weight:700;font-size:22px}
@media (max-width:820px){.proj-logo{width:150px;margin-left:0}}

/* Зебра карточек проектов: чётная строка чуть светлее базовой. Разница намеренно лёгкая —
   глаз должен ловить границу строки, а не видеть полосатый экран. Красится только `.proj-row`. */
/* Имя проекта на карточке чуть крупнее базового 14px: заголовок читается отдельно, но не
   лозунгом. Класс один на обе ветки cardHtml (подключённая/неподключённая), его же берёт
   tier-адаптив. line-height не наследует 1.55 body: при 16.5px строка разъезжает пилюлю health. */
.proj-name{font-size:16.5px;line-height:1.25;letter-spacing:-.01em}
@media (max-width:560px){.proj-name{font-size:15.5px}}
.card.proj-alt{background:linear-gradient(180deg,var(--panel2),rgba(21,24,32,.75))}

/* Шапка страницы проекта: слева навигация+название, справа компактные метрики — чтобы
   канбан не опускался на пол-экрана. Вертикальный воздух шапки ужат (`.sub` 10px, `.tabs2` 6/12). */
.pd-head{display:flex;align-items:flex-start;gap:18px;flex-wrap:wrap}
.pd-head-id{flex:1 1 320px;min-width:260px}
.pd-head .sub{margin-bottom:10px}
.pd-head + .tabs2{margin:6px 0 12px}
.pd-kpi{display:flex;align-items:stretch;gap:8px;flex-wrap:wrap;flex:0 1 auto;margin-left:auto}
/* Компактный блок канона справа в шапке, на высоте «связка активна». Без контейнера-обёртки:
   обёртка вокруг pd-kpi утянула бы за собой слоты автопилота и карточки Klokod (они вставляются
   сиблингами pd-kpi). Блок прижимается вправо сам, соседей за собой не тянет. */
#pd-canon{flex:0 1 auto;margin-left:auto;max-width:360px}
#pd-canon:empty{display:none}
/* блок Клокода у правого края сайта — только выравнивание, как у блока канона */
#autopilot-slot{margin-left:auto}
/* Пустой сосед-слот (`#autopilot-done-slot`, ширина 0) в раскладке не участвует: иначе флекс-шапка
   кладёт gap и перед ним, и справа остаётся лишний зазор. */
#autopilot-done-slot:empty,#autopilot-flash-slot:empty{display:none}
/* Подвал карточки блоком: ряд потока и строка автопилота ниже. Флекс-подвал считает ширину
   суммой всех пунктов в одну линию и раздувает карточку. */
#autopilot-panel .ap-foot{display:block !important}
#autopilot-panel .ap-flow{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
#autopilot-panel .ap-flow:not(:last-child){margin-bottom:9px}   /* тот же зазор между рядами, что у флекс-подвала (row-gap 9 px) */
/* Предел ширины карточки 693 px: короче — по содержимому, длиннее — строка переносится внутри. */
#autopilot-panel{width:479px;max-width:100%}   /* ширина карточки 479 px */
/* Пилюля «сдана без кода: …» (nowrap, до 80 знаков) внутри карточки режется многоточием, полный
   текст в подсказке: иначе она вылезает за карточку и даёт горизонтальную прокрутку страницы. */
.pill[data-no-code]{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom}
/* Плашка вопроса остаётся внутри карточки: `.pill` — `nowrap`, и вопрос уезжал бы за правый край
   под соседнюю колонку. Перенос строк + потолок в три строки и многоточие внутри карточки
   (`-webkit-line-clamp` поддержан во всех живых движках); полный текст — в подсказке. */
.pill[data-phase-ask]{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;
  white-space:normal;overflow:hidden;max-width:100%;text-align:left;border-radius:10px;
  padding:4px 8px;line-height:1.35;vertical-align:bottom}
.pill[data-phase-answer]{white-space:normal;max-width:100%}
#pd-canon .status-block{font-size:12px;padding:7px 10px}
#pd-canon .sb-head b{font-size:12.5px}
#pd-canon .sb-sub{font-size:11.5px;margin-top:2px}
#pd-canon .sb-rows{margin-top:3px}
#pd-canon .btn{padding:3px 8px;font-size:11.5px;margin-top:6px}
@media (max-width:860px){#pd-canon{max-width:none;width:100%}}
.pd-kpi:empty{display:none}
/* карточка «Поток»: три значения потока (план → в работе → приёмка) в одной плитке */

/* сигнальная строка на карточке флота (колонка «Сейчас в воркфлоу») + числа под ней */
/* Сигнал не кричит кеглем: 12.5px/400 (размер обычного текста карточки); кричит только цвет —
   он несёт смысл. Текст не режется. */
.sig-line{display:flex;align-items:center;gap:8px;font-weight:400;font-size:12.5px;line-height:1.35;flex-wrap:wrap}
.sig-counts{font-size:12.5px;margin-top:6px}
/* ≤820px — метрики переносятся ПОД заголовок и тянутся в ряд, ничего не наезжает */
@media (max-width:820px){
  .pd-kpi{margin-left:0;width:100%}
  }

/* ============================================================================
   МОБИЛЬНАЯ АДАПТАЦИЯ (аддитивно, только @media ≤768px; десктоп не тронут).
   Принцип: «просто должно влезать в экран», не переделка и не крупнить.
   ============================================================================ */
@media (max-width: 768px) {
  /* ни одна страница не толкает горизонтальный скролл ВСЕГО документа */
  html, body { overflow-x: hidden; }
  /* на узком окне карточка Клокода по содержимому: фикс 479 px вылезает за окно 375 —
     слот в .pd-head сжимается по ребёнку, max-width:100% его не держит */
  #autopilot-panel { width: auto; }

  /* — Шапка: две строки максимум (лого+критичное · вкладки-лента) — */
  .top { padding: 8px 12px; gap: 8px 10px; }
  .logo { font-size: 14px; }
  .logo .dim { display: none; }                 /* «· центр управления» — не критично на мобиле */
  .tabs { margin-left: 0; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch;
          scrollbar-width: none; max-width: 100%; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { padding: 9px 12px; flex: none; min-height: 40px; }   /* тап-цель ≥44px с учётом линии */
  .who { font-size: 11px; }

  /* — Раскладка: сайдбар проекта не съедает пол-экрана, а становится лентой сверху — */
  .wrap { flex-direction: column; min-height: auto; }
  .side { width: auto; border-right: 0; border-bottom: 1px solid var(--line);
          display: flex; gap: 4px; overflow-x: auto; padding: 8px 10px; -webkit-overflow-scrolling: touch; }
  .side .sect { display: none; }                 /* заголовки секций сайдбара на мобиле лишние */
  .side a { flex: none; white-space: nowrap; min-height: 40px; }
  .main { padding: 14px 12px; }
  h1 { font-size: 18px; }

  /* — Канбан: колонки НЕ сжимать в буквы — горизонтальная лента со свайпом (scroll-snap) — */
  .kanban { display: flex; grid-template-columns: none; overflow-x: auto; gap: 10px;
            scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
            padding-bottom: 6px; scroll-padding: 0 12px; }
  .kanban .kcol { min-width: 85vw; max-width: 85vw; flex: none; scroll-snap-align: start; }
  .kcard { font-size: 13px; padding: 11px; }     /* читаемее пальцем, но не «крупнить» */

  /* — Модалки: во весь экран, кнопки достижимы большим пальцем — */
  .modal { padding: 0; align-items: stretch; }
  .modal .box { max-width: none; width: 100%; max-height: none; height: 100%;
                border-radius: 0; border: 0; padding: 16px 14px; }
  .modal .box .btn, .modal .box button.btn { min-height: 44px; }

  /* — Тап-цели: кнопки/чипы не микроскопические — */
  .btn { min-height: 40px; }
  .x-btn { width: 40px; height: 40px; }          /* «✕» достижим пальцем */

  /* — Широкие блоки (таблицы Юзеры/роли, реестр) — свой горизонтальный скролл, не ломать построчно — */
  .main table { display: block; overflow-x: auto; white-space: nowrap; max-width: 100%;
                -webkit-overflow-scrolling: touch; }

  /* — Гриды карточек (Проекты/Возможности) в один столбец — */
  .g4, .g2, .g3 { grid-template-columns: 1fr; }
}
/* Плашка расхождения — общая для раскрытия клетки и состава обвязки. */
.drift{background:#3a2f14;border:1px solid #5b4a1c;border-radius:8px;padding:8px 10px;
       font-size:12px;color:var(--amber)}

/* Раздел «Здоровье»: карточки-истории по эталону docs/design/health-dashboard-v4-etalon.html.
   Три вещи держатся ЗДЕСЬ, а не в разметке:
   1. верхняя тройка (кольцо · хроника · «нужен ты») схлопывается в одну колонку на узком —
      на телефоне три колонки по 300 px превращаются в нечитаемую кашу;
   2. пары «вопрос → ответ» внутри раскрытой истории на узком идут строками, а не колонками:
      150 px под заголовок поля съедают половину экрана 375 px;
   3. маркер <details> убран: он рисуется поверх собственной вёрстки summary. */

/* Нейтральная заставка ДО ответа авторизации: логотип на фоне, ничего не раскрывает.
   Убирается boot-ом: сессия есть → каркас (shell.html) + удаление; нет → экран входа. */
.splash{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;background:#07080b}
.splash img{max-width:60vw;height:auto;opacity:.85}

/* ---------- полоса статуса исполнителя ---------- */
.strip-slot{margin-top:14px}
.strip{display:flex;align-items:center;gap:13px;border:1px solid #1e2a38;border-radius:12px;background:var(--panel,#0f0f13);
  padding:0 16px;height:62px;position:relative;overflow:hidden;white-space:nowrap}
.strip-red{border-color:#4a2a2a}.strip-done{border-color:#1e4d38}.strip-wait{border-color:#4a3f20}.strip-idle{border-color:var(--line)}
/* «сдал, ждёт приёмки»: ожидание человека — жёлтый, но без пульса «нужен ты сейчас» (он у .strip-wait) */
.strip-hold{border-color:#4a3f20}.strip-hold .strip-pulse{background:#f0b429;box-shadow:none;animation:none}.strip-hold .strip-tid{color:#f0b429}
.strip-pulse{width:9px;height:9px;border-radius:50%;background:#2ee08a;box-shadow:0 0 10px #2ee08a;animation:strip-beat 2s ease-in-out infinite;flex:none}
.strip-red .strip-pulse{background:#ff5c5c;box-shadow:0 0 10px #ff5c5c;animation:none}
.strip-wait .strip-pulse{background:#f0b429;box-shadow:0 0 10px #f0b429}
.strip-done .strip-pulse,.strip-idle .strip-pulse{animation:none}
.strip-idle .strip-pulse{background:#3a3a44;box-shadow:none}
@keyframes strip-beat{0%,100%{opacity:.5;transform:scale(.85)}50%{opacity:1;transform:scale(1.2)}}
.strip-who{font-weight:700;flex:none}
.strip-tid{font:700 13px ui-monospace,Menlo,monospace;color:#3aa3ff;flex:none}
.strip-red .strip-tid{color:#ff5c5c}.strip-done .strip-tid{color:#2ee08a}.strip-wait .strip-tid{color:#f0b429}.strip-idle .strip-tid{color:var(--muted)}
/* Рисунка больше, слов меньше: рисунок занимает всю свободную ширину между идентификатором слева
   и текстом справа. Раскладку узлов под измеренную ширину считает stripFit/stripGeom: одной
   ширины контейнера мало — холст висел бы по центру (viewBox сохраняет пропорции). */
.strip-viz{flex:1 1 auto;min-width:260px;height:46px}
.strip-viz svg{width:100%;height:100%;overflow:visible}
/* Текст состояния не делит свободную ширину с рисунком: провод тянется до самого текстового
   блока, а слова стоят справа по своей ширине. */
.strip-what{color:var(--muted,#a9a9a5);font-size:13px;flex:0 1 auto;min-width:60px;max-width:34ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.strip-src{color:#70706c;font-size:11.5px}
.strip-right{flex:none;display:flex;gap:14px;font:11.5px ui-monospace,Menlo,monospace;color:#70706c}
.strip-right b{color:var(--muted,#a9a9a5)}   /* показ, не живое состояние */

@media (max-width:900px){.strip-viz{min-width:200px}.strip-what{max-width:18ch}.strip-second{display:none}}
.strip-paused .strip *{animation-play-state:paused!important}   /* скрытая вкладка: CSS-пульс тоже стоит */
@media (prefers-reduced-motion:reduce){.strip *,.strip{animation:none!important}.strip svg animate,.strip svg animateMotion{display:none}}

/* центр здоровья: одна цифра, десять точек */
.hc .sub{margin:0 0 8px}
.hc-hero{flex:1 1 430px;padding:16px 18px}
/* сплошная полоса здоровья для карточки проекта */
/* 4px (эталон docs/prototypes/card-health-bar-4px-2026-09-02.html). Полоска карточки — это
   `.hc-bar` (vitalBarHtml), а не `.bar`: `.bar` на карточке нет вовсе. Цвета — прежний зелёный. */
.hc-bar{height:4px;border-radius:3px;background:#2a3040;overflow:hidden;width:100%;max-width:260px}
.hc-bar>i{display:block;height:100%;border-radius:3px;background:var(--green)}
.hc-bar.hc-you>i{background:#ff9a8e}
.hc-bar.hc-self>i{background:#ffd166}
.hc-bar.hc-pending>i{background:#3a3a48}
/* Неполный индекс серый. Зелёная полоса обещает «посчитано и хорошо»; когда компонент
   посчитать не удалось, вычета нет и число выглядит отличным — цвет такого обещания давать не должен.
   Серая полоса с полосатой штриховкой читается как «число неполное», а не как «здоровье плохое». */
.hc-bar.hc-unknown>i{background:repeating-linear-gradient(90deg,#6b7280 0 6px,#4b5563 6px 12px)}
.pcard-health{display:flex;align-items:center;gap:8px;margin-top:6px}

/* «Вышла новая версия»: неброская плашка внизу справа, над плашкой read-only.
   Не модалка и не баннер во всю ширину: она сообщает, а не требует — работать можно дальше. */
.new-build{position:fixed;right:14px;bottom:52px;z-index:60;display:flex;align-items:center;gap:10px;
  padding:8px 12px;border:1px solid #2a5c33;border-radius:10px;background:var(--panel,#0f0f13);
  font-size:12.5px;box-shadow:0 6px 20px rgba(0,0,0,.35)}
.new-build b{color:var(--green)}
.new-build button{font-size:11.5px;padding:3px 9px;border-radius:5px;cursor:pointer;
  border:1px solid #2a5c33;background:transparent;color:var(--green)}
.new-build button:hover{background:#12241a}
@media (max-width:900px){.new-build{left:14px;right:14px;bottom:12px}}
@media (prefers-reduced-motion:reduce){.new-build{transition:none}}

/* ── ЖИВОЙ ПОТОК В КАРТОЧКЕ «В РАБОТЕ» ──────────────────────────────────────
   Эталон docs/prototypes/board-task-card-live-flow-2026-09-02.html — тайминги, размеры и glow
   перенесены как есть. Своих вариантов анимаций здесь нет и заводить их нельзя.
   ПРАВИЛО ЦВЕТА: цвет живёт ТОЛЬКО в анимации; все тексты статус-строки бело-серые
   (#6b7484 / #aab3c5) — иначе карточка начнёт кричать текстом. */
.tflow{position:relative;height:8px;margin:11px 0 0;opacity:.9}
.tflow .rail{position:absolute;left:0;right:0;top:50%;height:2px;background:#232a35;border-radius:2px}
.tflow .dot{position:absolute;top:50%;width:5px;height:5px;border-radius:50%;transform:translate(-50%,-50%)}
/* Зазоры фиксированные, а не остаточные: `space-between` раздаёт пространство только когда
   оно есть, и на карточке 236px колонки слипаются. `gap` резервирует 8px до раздачи остатка,
   `nowrap` не даёт налезания, `ellipsis` режет длинное по краю — середина (время) не сжимается
   никогда, потому что именно она отвечает «давно ли». */
.tstat{display:flex;justify-content:space-between;align-items:baseline;margin-top:6px;
  gap:8px;font-size:10px;color:#6b7484;white-space:nowrap}
.tstat>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.tstat>span:first-child{flex:1 1 auto}
.tstat>span:nth-child(2){flex:0 0 auto}      /* время не жмём и не режем */
.tstat>span:last-child{flex:0 1 auto;text-align:right}
.tstat b{color:#aab3c5;font-weight:600}
.tstat .g,.tstat .r{color:#aab3c5}

/* 1 CODE — правит код: встречный поток по ОДНОЙ линии */
.tflow-code .a{background:#4da3ff;box-shadow:0 0 6px #4da3ff;animation:tf-go 2.2s linear infinite}
.tflow-code .b{background:#4da3ff;box-shadow:0 0 6px #4da3ff;animation:tf-go 2.2s linear infinite;animation-delay:.7s;opacity:.75}
.tflow-code .c{background:#2ee08a;box-shadow:0 0 6px #2ee08a;animation:tf-back 2.2s linear infinite;animation-delay:.3s}
.tflow-code .d{background:#2ee08a;box-shadow:0 0 6px #2ee08a;animation:tf-back 2.2s linear infinite;animation-delay:1.4s;opacity:.75}
@keyframes tf-go{0%{left:2%;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:98%;opacity:0}}
@keyframes tf-back{0%{left:98%;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:2%;opacity:0}}

/* 2 GATES — гоняет проверки: мелкие точки в одну сторону, три дорожки */
.tflow-gates{height:11px}
.tflow-gates .r1{top:20%}.tflow-gates .r2{top:50%}.tflow-gates .r3{top:80%}
.tflow-gates .dot{width:3.5px;height:3.5px;background:#ffd166;box-shadow:0 0 5px #ffd166}
.tflow-gates .a{animation:tf-go 1.6s linear infinite}
.tflow-gates .b{animation:tf-go 1.6s linear infinite;animation-delay:.5s}
.tflow-gates .c{animation:tf-go 1.6s linear infinite;animation-delay:1s}

/* 3 DELIVER — доставка: одна тяжёлая посылка */
.tflow-deliver{height:9px}
.tflow-deliver .pkg{position:absolute;top:50%;transform:translate(-50%,-50%);width:7px;height:7px;
  border-radius:50%;background:#4da3ff;box-shadow:0 0 8px #4da3ff;animation:tf-pkg 3s ease-in-out infinite}
@keyframes tf-pkg{0%{left:4%;opacity:0}10%{opacity:1}90%{opacity:1}100%{left:96%;opacity:0}}

/* 4 WAIT — ждёт: точка дошла до середины и висит с кольцом */
.tflow-wait .dot{left:50%;background:#f0b429;box-shadow:0 0 7px #f0b429}
.tflow-wait .ring{position:absolute;left:50%;top:50%;width:11px;height:11px;border:1.5px solid #f0b429;
  border-radius:50%;transform:translate(-50%,-50%);animation:tf-ring 1.8s ease-out infinite}
@keyframes tf-ring{0%{transform:translate(-50%,-50%) scale(.4);opacity:.9}100%{transform:translate(-50%,-50%) scale(1.6);opacity:0}}

/* 4b OWNER-WAIT — ждёт ТВОЕГО ответа: карточка и текст обычные, кричит ТОЛЬКО анимация */
.tflow-owner{height:12px}
.tflow-owner .rail{background:linear-gradient(90deg,#232a35,#4a2a2a 40%,#4a2a2a 60%,#232a35);
  animation:tf-railbeat 1.6s ease-in-out infinite}
@keyframes tf-railbeat{0%,100%{opacity:.6}50%{opacity:1}}
.tflow-owner .dot{left:50%;width:7px;height:7px;background:#ff5c5c;box-shadow:0 0 10px #ff5c5c;
  animation:tf-dotbeat 1.6s ease-in-out infinite}
@keyframes tf-dotbeat{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.45)}}
.tflow-owner .ring{position:absolute;left:50%;top:50%;width:12px;height:12px;border:1.5px solid #ff5c5c;
  border-radius:50%;transform:translate(-50%,-50%);animation:tf-ring 1.6s ease-out infinite}
.tflow-owner .ring2{position:absolute;left:50%;top:50%;width:12px;height:12px;border:1px solid #ff5c5c;
  border-radius:50%;transform:translate(-50%,-50%);animation:tf-ring 1.6s ease-out infinite;animation-delay:.8s}

/* 5 STALLED — встал: обрыв, точка мигает, дальше мёртвый пунктир */
.tflow-stalled .rail{right:55%}
.tflow-stalled .rail2{position:absolute;left:50%;right:0;top:50%;height:0;border-top:2px dashed #3a2a2c}
.tflow-stalled .dot{left:45%;background:#ff5c5c;box-shadow:0 0 7px #ff5c5c;animation:tf-blink 1s steps(2,start) infinite}
@keyframes tf-blink{50%{opacity:.15}}

/* 6 DONE — сдал: один импульс и покой */
.tflow-done .rail{background:#22392a}
.tflow-done .pulse{position:absolute;top:50%;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,#7fdc8b,transparent);
  animation:tf-pulse 4s ease-in-out infinite;transform:translateY(-50%)}
@keyframes tf-pulse{0%{opacity:0}6%{opacity:1}18%{opacity:0}100%{opacity:0}}
.tflow-done .dot{left:96%;background:#2ee08a;box-shadow:0 0 6px #2ee08a;animation:none}

/* ── busy / offtask / unklive ──────────────────────────────────
   Эталон docs/prototypes/board-task-card-three-new-states-2026-09-03.html перенесён 1-в-1: те же
   формы, длительности и цвета, префикс анимаций `tf-`. Без них карточка гасла бы там, где работы
   больше всего: длинная операция без коммитов, коммиты в соседнюю задачу, живая сессия без
   следов. Тревога — только анимацией, тексты серые. */

/* 8 BUSY — длинная операция: по рельсе медленно дышит широкая полоса света, точек-коммитов нет */
.tflow-busy{height:9px}
.tflow-busy .rail{background:#232a35}
.tflow-busy .breath{position:absolute;top:50%;height:2px;width:34%;transform:translateY(-50%);
  border-radius:2px;background:linear-gradient(90deg,transparent,#4da3ff 40%,#4da3ff 60%,transparent);
  opacity:.9;animation:tf-breath 3.4s ease-in-out infinite}
@keyframes tf-breath{0%{left:-34%;opacity:.3}50%{opacity:1}100%{left:100%;opacity:.3}}
.tflow-busy .tick{position:absolute;top:50%;left:50%;width:5px;height:5px;border-radius:50%;
  background:#4da3ff;transform:translate(-50%,-50%);box-shadow:0 0 6px #4da3ff;
  animation:tf-tick 3.4s ease-in-out infinite}
@keyframes tf-tick{0%,100%{opacity:.35;transform:translate(-50%,-50%) scale(.8)}
  50%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}}

/* 9 OFF-TASK — работает мимо взятой: рельса пунктиром (след не сходится с работой),
   янтарные точки вразнобой в обе стороны, засечка посередине */
.tflow-offtask .rail{background:none;height:0;border-top:2px dashed #3a3320}
.tflow-offtask .a{background:#f0b429;box-shadow:0 0 6px #f0b429;animation:tf-go 2.6s linear infinite}
.tflow-offtask .b{background:#f0b429;box-shadow:0 0 6px #f0b429;animation:tf-go 2.6s linear infinite;
  animation-delay:1.1s;opacity:.7}
.tflow-offtask .c{background:#f0b429;box-shadow:0 0 6px #f0b429;animation:tf-back 3.1s linear infinite;
  animation-delay:.4s;opacity:.85}
.tflow-offtask .mark{position:absolute;top:50%;left:50%;width:1px;height:10px;background:#5c4a2a;
  transform:translate(-50%,-50%)}

/* 10 UNKNOWN-LIVE — пульса нет, сессия жива: самый тихий вид, серая точка с редким мерцанием */
.tflow-unklive .rail{background:#1a2029}
.tflow-unklive .dot{left:50%;background:#39414f;animation:tf-unk 4s ease-in-out infinite}
@keyframes tf-unk{0%,80%,100%{opacity:.35;box-shadow:none}90%{opacity:1;box-shadow:0 0 6px #6b7484}}

/* Правило полоски действует и здесь: движение — усиление, а не носитель смысла. */
@media (prefers-reduced-motion:reduce){
  .tflow .dot,.tflow .ring,.tflow .ring2,.tflow .pkg,.tflow .pulse,.tflow .rail,
  .tflow .breath,.tflow .tick{animation:none}
}

/* ── КАНОН-БЛОК КАРТОЧКИ ────────────────────────
   Эталон docs/prototypes/canon-block-fixed-card-2026-09-02.html — размеры, шрифты, цвета и
   компоновка перенесены как есть, своих решений здесь нет. Цвет несёт ТОЛЬКО точка вверху. */
/* Фон блока с лёгкой прозрачностью: карточка чуть просвечивает, блок отделяется от неё, но
   остаётся плотным — это не стекло. 0.72 непрозрачности того же тона #10141b. */
/* Высота по содержимому: фиксированная высота даёт пустой низ при одной строке. */
.cb{width:260px;min-height:0;height:auto;border:1px solid #232a35;border-radius:8px;padding:6px 9px;
  box-sizing:border-box;display:flex;flex-direction:column;background:rgba(16,20,27,.72)}
/* Слово состояния переносится на свою строку, если рядом с версией не помещается: многоточие
   при свободном месте ниже прятало бы слово зря. Режется только слово длиннее всей ширины блока. */
.cb .cb-top{display:flex;align-items:center;flex-wrap:wrap;column-gap:6px;row-gap:1px;font-size:11.5px;line-height:1.3;
  flex:none;min-width:0}
.cb .cb-d{width:7px;height:7px;border-radius:50%;flex:none}
.cb-d.ok{background:#2ee08a}
/* Первая строка блока канона после выпуска: меняется ТОЛЬКО точка (фиолетовая, с анимацией) —
   размер, позиция и поток строки те же, что у зелёной. Эталон — docs/prototypes/canon-release-highlight.html. */
.cb-d.new{background:#b48cff;animation:cbNewPulse 2s infinite}
@keyframes cbNewPulse{
  0%{box-shadow:0 0 0 0 rgba(180,140,255,.6)}
  70%{box-shadow:0 0 0 6px rgba(180,140,255,0)}
  100%{box-shadow:0 0 0 0 rgba(180,140,255,0)}}
.cb-d.warn{background:#f0b429;box-shadow:0 0 5px rgba(240,180,41,.4)}
.cb-d.blue{background:#4da3ff}
.cb-d.grey{background:#39414f}
.cb .cb-v{font-family:ui-monospace,Menlo,monospace;font-weight:700;color:#dfe6ef;flex:none}
.cb .cb-word{color:#8a93a6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.cb .cb-mid{flex:none;min-height:0;display:flex;flex-direction:column;justify-content:center;margin:3px 0 2px;
  gap:1px;font-size:10px;line-height:1.35;color:#6b7484;overflow:hidden}
/* Глобальное `.who{display:flex}` (виджет пользователя в шапке) превращает выделенное число строки в
   гибкий блок, и фраза рвётся на три строки с висящей запятой — здесь оно строчное. */
.cb .cb-mid .who{color:#aab3c5;display:inline;font-size:inherit}
.cb .cb-mid .ln{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cb .cb-mid .more{color:#4c5564}
.cb .cb-bot{flex:none;display:flex;justify-content:space-between;align-items:center;
  font-size:9px;color:#4c5564;border-top:1px solid #1a2029;padding-top:4px;margin-top:2px}
.cb-own{display:flex;align-items:center;gap:5px;min-width:0}
.cb-own .ph{width:13px;height:13px;border-radius:50%;flex:none;
  background:linear-gradient(135deg,#5a8,#357);box-shadow:0 0 0 1px #2b3442;
  background-size:cover;background-position:center}
.cb-own .nm{color:#aab3c5;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cb-own.dim .ph{filter:grayscale(1);opacity:.55}
.cb-own.dim .nm{color:#4c5564}
/* Почта нижней строкой блока канона (прототип docs/prototypes/HARN-1289-mail-widget-2026-09-22.html).
   Своей рамки, фона и ширины у почты нет — они общие, канонные: ярус лишь отделён
   волосяной линией во всю ширину блока и вырастает ровно на одну строку. */
.cb .cb-mail{flex:none;display:flex;align-items:center;gap:6px;line-height:1;white-space:nowrap;cursor:pointer;
  border-top:1px solid #1c2130;margin:5px -9px 0;padding:5px 9px 1px}
.cb .cb-mail:hover .cb-mail-w{color:#aab3c5}
.cb-mail-n{font-family:ui-monospace,Menlo,monospace;font-size:11px;font-weight:500;color:#8a93a6}
/* «Не разобрано» (wait) и «новое» (new) одного синего; конверт берёт цвет числа (currentColor). */
.cb-mail-n.wait{color:#7ea9dd} .cb-mail-n.new{color:#7ea9dd} .cb-mail-n.err{color:#d98077} .cb-mail-n.off{color:#5d6675}
.cb-mail-w{color:#8a93a6;font-size:11.5px;overflow:hidden;text-overflow:ellipsis}
.cb-mail-tot{margin-left:auto;font-family:ui-monospace,Menlo,monospace;font-size:9.5px;color:#4b5464}
/* конверт — ТОЛЬКО КОНТУР и только встроенный: ссылка на общий символ (`<use href>`) не получает стиль
   документа, заливка остаётся умолчательной, и вместо конверта выходит чёрный прямоугольник. */
.cb-mail .env{flex:none;display:block;overflow:visible}
.cb-mail .env rect,.cb-mail .env path{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round;
  stroke-linecap:round;vector-effect:non-scaling-stroke}
.cb-mail .env .fl{transform-origin:8px 3px;transform-box:view-box}
.cb-mail .e-wait{color:#6f97c8} .cb-mail .e-new{color:#6f97c8}   /* конверт «не разобрано» того же синего, что «новое» */ .cb-mail .e-err{color:#c4756c} .cb-mail .e-off{color:#4b5464}
/* три движения, каждое со своим сроком; больше в ярусе не движется ничего */
.cb-mail .e-wait .fl{animation:cbFlap 3.2s ease-in-out infinite}
@keyframes cbFlap{0%,74%,100%{transform:scaleY(1)}86%{transform:scaleY(.35)}}
.cb-mail .e-new{animation:cbNudge .5s cubic-bezier(.22,.61,.36,1)}
@keyframes cbNudge{0%{transform:translateY(-2px)}55%{transform:translateY(1px)}100%{transform:none}}
.cb-mail .e-err{animation:cbFade 2s ease-in-out infinite}
@keyframes cbFade{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){
  .cb-mail .e-wait .fl,.cb-mail .e-new,.cb-mail .e-err{animation:none}
}
.cb .cb-date{flex:none;white-space:nowrap}

/* ═══ дашборд «Флот и участники» ═══════════════════════════════════════════
   Геометрия эталона docs/prototypes/fleet-dashboard-2026-09-02.html; цвета — токены
   админки, а не хардкод прототипа: страница обязана жить в общей теме. Одно исключение —
   цвета связок (`--fd-b1..5`): они совпадают с порядком микро-квадратов почасовой матрицы,
   и связка не имеет права менять цвет между блоками одной страницы. */
.fd{--fd-tx3:var(--mut);--fd-b1:#2ee08a;--fd-b2:#8b5cf6;--fd-b3:#4da3ff;--fd-b4:#d6a022;--fd-b5:#7fb2ff}
.fd .sec{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);
  margin:30px 0 12px;display:flex;align-items:center;gap:10px}
.fd .sec:after{content:"";flex:1;height:1px;background:var(--line)}

/* шапка-KPI */
.fd .hero{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.fd .kpi{background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:13px 14px}
.fd .kpi .n{font:700 26px/1.1 var(--font-mono)}
.fd .kpi .n.dim{font-size:15px;color:var(--mut);font-weight:600}
.fd .kpi .l{color:var(--fd-tx3);font-size:11px;margin-top:3px}
.fd .kpi .d{font-size:10.5px;margin-top:5px;color:var(--fd-tx3)}
.fd .kpi .d.up{color:var(--green)}
.fd .kpi .d.bad{color:var(--red)}

/* связка = два агента */
.fd .duo{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fd .duo .card{display:flex;flex-direction:column;gap:8px}
.fd .duo .h{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px}
.fd .duo .b{border:1px solid var(--line);border-radius:999px;padding:2px 10px;font-size:10px;color:var(--fd-tx3)}
.fd .duo p{margin:0;color:var(--fd-tx3);font-size:12.5px;line-height:1.5}
.fd .duo .nums{display:flex;gap:20px;margin-top:4px;flex-wrap:wrap}
.fd .duo .nums span{font-size:10.5px;color:var(--fd-tx3)}
.fd .duo .nums b{display:block;font:700 19px var(--font-mono);color:var(--txt)}
.fd .duo .nums b.dim{font-size:12px;font-weight:600;color:var(--mut)}

/* жизнь по канону */
.fd .guides{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.fd .gd{background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:11px 13px;
  font-size:11px;color:var(--fd-tx3);line-height:1.45}
.fd .gd .t{font-weight:600;color:var(--txt);font-size:12px;margin-bottom:4px}
.fd .gd b{color:var(--txt);font-family:var(--font-mono);font-weight:600}
.fd .gd .mb{display:flex;gap:2px;align-items:flex-end;height:30px;margin:8px 0 4px}
.fd .gd .mb i{flex:1;min-width:2px;border-radius:1.5px 1.5px 0 0;background:#1f5c3d;
  transform-origin:bottom;animation:fdGrow .9s ease-out both}
.fd .gd .mb i.hot{background:var(--fd-b1);box-shadow:0 0 4px rgba(46,224,138,.5)}
.fd .gd .lb{display:flex;justify-content:space-between;font-size:9px;color:var(--mut);margin-bottom:6px}
.fd .gd .noeq{font-size:9.5px;color:var(--mut);border:1px dashed var(--line);border-radius:6px;
  padding:6px 8px;margin:8px 0 6px;line-height:1.35}
.fd .gd .lead{font-size:10px;color:var(--mut);border-top:1px solid var(--line);padding-top:6px;margin-top:6px}
.fd .gd .lead em{font-style:normal;text-transform:uppercase;font-size:9px;letter-spacing:.06em;color:var(--green)}
.fd .gd .lead em.warn{color:var(--amber)}
.fd .gd .lead em.none{color:var(--mut)}
@keyframes fdGrow{0%{transform:scaleY(0)}100%{transform:scaleY(1)}}

/* связки в разрезе */
.fd .combo{display:grid;grid-template-columns:1.55fr 1fr;gap:0;background:var(--panel);
  border:1px solid var(--line);border-radius:14px;overflow:hidden}
.fd .combo .lt{padding:12px 14px;border-right:1px solid var(--line);overflow-x:auto}
.fd .combo table{width:100%;border-collapse:collapse;font-size:10.5px}
.fd .combo th{font:600 8.5px var(--font-mono);letter-spacing:.06em;text-transform:uppercase;
  color:var(--mut);text-align:right;padding:4px 7px;border-bottom:1px solid var(--line);white-space:nowrap}
.fd .combo th:first-child{text-align:left}
.fd .combo td{padding:6px 7px;border-bottom:1px solid var(--line);text-align:right;
  font-family:var(--font-mono);color:var(--mut);white-space:nowrap}
.fd .combo td:first-child{text-align:left;font-family:inherit}
.fd .combo tr:last-child td{border-bottom:none}
.fd .combo .pn{font-weight:700;font-size:12px;color:var(--txt)}
.fd .combo .pnow{font-size:9px;color:var(--mut)}
.fd .combo .dotc{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:1px}
.fd .combo td.warn{color:var(--amber)}.fd .combo td.bad{color:var(--red)}.fd .combo td.good{color:var(--green)}
.fd .combo td.none{color:var(--mut);font-style:italic;font-family:var(--font-body);font-size:9.5px}
.fd .combo .rt{padding:12px 14px;display:flex;flex-direction:column}
.fd .combo .rt .cap{font-size:10.5px;color:var(--fd-tx3);margin-bottom:6px;display:flex;justify-content:space-between}
.fd .combo .rt svg{flex:1;width:100%;min-height:190px}
.fd .combo .rt polyline{fill:none;stroke-width:1.8;stroke-dasharray:420;stroke-dashoffset:420;
  animation:fdDraw 1.8s ease-out forwards}
.fd .combo .leg{display:flex;gap:12px;flex-wrap:wrap;font-size:9.5px;color:var(--fd-tx3);margin-top:8px}
.fd .combo .leg i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:4px;vertical-align:-1px}
@keyframes fdDraw{to{stroke-dashoffset:0}}

/* канон-строка */
.fd .canonrow{display:flex;align-items:center;gap:14px;font-size:12px;flex-wrap:wrap}
.fd .canonrow .okpill{border:1px solid var(--donebd);color:var(--green);border-radius:999px;padding:3px 12px;font-size:11px}
.fd .canonrow .okpill.warn{border-color:#5c4a2a;color:var(--amber)}
.fd .canonrow .m{display:flex;gap:4px}
.fd .canonrow .c{width:13px;height:13px;border-radius:4px;background:#173524;border:1px solid var(--donebd)}
.fd .canonrow .c.behind{background:#3a2f16;border-color:#5c4a2a}

@media (max-width:1100px){
  .fd .hero{grid-template-columns:repeat(3,1fr)}
  .fd .combo{grid-template-columns:1fr}
  .fd .combo .lt{border-right:none;border-bottom:1px solid var(--line)}
  .fd .duo{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.fd *{animation:none!important}}
@keyframes fdTw{0%,100%{opacity:.45}50%{opacity:1}}

/* ── слайдер проектов ──────────────────────────────────────────────── */
/* Фон = эталон (docs/prototypes/fleet-matrix-x2-and-slider-2026-09-03.html .sl): два цветных пятна,
   синее и бирюзовое, на #0b0e13; туманностей нет — на широком экране одно тёмное пятно читалось
   как чёрный прямоугольник. */
.fd .space{position:relative;height:300px;border-radius:16px;overflow:hidden;border:1px solid var(--line);
  background:radial-gradient(ellipse at 20% 30%,#1a1f3a 0%,transparent 55%),radial-gradient(ellipse at 80% 70%,#0f2a2a 0%,transparent 55%),#0b0e13}
.fd .space .comet{position:absolute;width:2.5px;height:2.5px;border-radius:50%;background:#fff;
  box-shadow:0 0 8px #9fd4ff;animation:fdComet 7s linear infinite;opacity:0;right:20%;top:18%}
.fd .space .comet:after{content:"";position:absolute;right:1px;top:50%;width:70px;height:1.5px;
  transform:translateY(-50%);background:linear-gradient(270deg,rgba(159,212,255,.9),transparent)}
@keyframes fdComet{0%{opacity:0;transform:translate(0,0)}4%{opacity:1}30%{opacity:1}
  42%{opacity:0;transform:translate(-340px,120px)}100%{opacity:0;transform:translate(-340px,120px)}}
.fd .space .star{position:absolute;border-radius:50%;background:#dfe6ef;animation:fdStar 3s ease-in-out infinite}
@keyframes fdStar{0%,100%{opacity:.12}50%{opacity:.95}}
.fd .space .slide-host{position:relative;z-index:3;height:100%}
/* Слайд: лого целиком, метрики 2+2 по бокам (эталон
   docs/prototypes/fleet-matrix-x2-and-slider-2026-09-03.html). Сетка 1fr / 360px / 1fr:
   метрики обязаны стоять по бокам лого. */
/* На широком экране крайние колонки 1fr растягиваются и метрики уезжают к краям:
   слайд ограничен шириной эталона (1180px) и центрирован; колонка лого 360px. */
.fd .space .slide{height:100%;display:grid;grid-template-columns:1fr 360px 1fr;max-width:1180px;margin:0 auto;
  align-items:center;text-align:center;animation:fdSlideIn 1s ease-out both}
@keyframes fdSlideIn{0%{opacity:0;transform:translateX(60px)}100%{opacity:1;transform:translateX(0)}}
/* Узкий экран (375): три колонки не помещаются — слайд встаёт в столбик: метрики строкой над и
   под лого, высота блока по содержимому (не меньше 300px), лого не шире экрана. */
@media (max-width:760px){
  .fd .space{height:auto;min-height:300px}
  .fd .space .slide{grid-template-columns:1fr;max-width:100%;padding:14px 0 26px}
  .fd .space .mcol{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:10px 22px;padding:0 12px}
  .fd .space .mcol.l,.fd .space .mcol.r{align-items:center;text-align:center}
  .fd .space .m .v{font-size:24px}
  .fd .plogo-img{max-width:78vw;height:72px}
  .fd .pname{font-size:20px}
}
.fd .space .mcol{z-index:2;display:flex;flex-direction:column;gap:26px;padding:0 48px}
.fd .space .mcol.l{align-items:flex-end;text-align:right}
.fd .space .mcol.r{align-items:flex-start;text-align:left}
.fd .space .m .v{font:700 34px/1 var(--font-mono);color:var(--txt);letter-spacing:-.02em}
.fd .space .m .v small{font-size:16px;color:var(--mut);margin-left:4px}
.fd .space .m .v.none{font-size:16px;color:var(--mut);font-family:var(--font-body);font-weight:600}
.fd .space .m .k{font-size:11.5px;color:var(--fd-tx3);margin-top:6px;letter-spacing:.06em;text-transform:uppercase}
.fd .space .m .d{font-size:11.5px;color:var(--fd-tx3);opacity:.8;margin-top:2px}
.fd .space .mid{z-index:2}
/* Лого целиком: `cover` в квадрате 84×84 режет широкие лого. `contain` + прозрачный фон +
   свечение эталона, без плашки. */
.fd .plogo-img{height:96px;max-width:300px;width:auto;object-fit:contain;background:transparent;
  border-radius:0;box-shadow:none;filter:drop-shadow(0 0 18px rgba(120,140,255,.35))}
.fd .plogo{width:96px;height:96px;border-radius:22px;
  background:linear-gradient(135deg,var(--acc2),#4a2b66);display:flex;align-items:center;
  justify-content:center;font:800 30px/1 var(--font-mono);letter-spacing:-.03em;color:#fff;
  box-shadow:0 0 44px rgba(139,92,255,.4),inset 0 0 0 1px rgba(255,255,255,.12)}
.fd .pname{font:700 24px/1.1 var(--font-head);letter-spacing:-.01em;color:var(--txt);margin-top:14px}
.fd .ptag{color:var(--mut);font-size:13px;margin-top:4px}
/* Владелец по центру: эталон центрирует строку как СТРОЧНЫЙ элемент внутри
   `.mid{text-align:center}`; блочный flex прижимал бы её к левому краю колонки. */
.fd .powner{display:inline-flex;align-items:center;gap:8px;margin-top:12px;font-size:12.5px;color:#aab3c5}
.fd .oava{width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,#a85,#753);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:10px;color:var(--txt)}
.fd .pdots{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:flex;gap:7px;z-index:4}
.fd .pdots span{width:6px;height:6px;border-radius:50%;background:#2a3140;cursor:pointer}
.fd .pdots span.on{background:var(--acc);box-shadow:0 0 6px var(--acc)}

/* ── УТИЛИТАРНЫЕ КЛАССЫ ИЗ INLINE-СТИЛЕЙ ─────────────────────────────────────
 * Одно объявление — один класс, имя выводится из объявления (fs11 = font-size:11px,
 * mt8 = margin-top:8px …). `!important` сознательно: inline-стиль бил любую каскадную ставку,
 * класс обязан бить так же — иначе пиксели разойдутся там, где у элемента уже есть класс с тем
 * же свойством. Динамические стили (${…}) остаются inline: значение известно только при рендере. */
.u-fs-11px{font-size:11px !important}
.u-fs-12px{font-size:12px !important}
.u-m-0-0-10px{margin:0 0 10px !important}   /* строка «у него здесь пусто» под фильтром владельца */
.u-fs-12px-c-warn{font-size:12px !important;color:var(--warn,#d29922)}   /* путь связки расходится с чекаутом */
.u-mt-8px{margin-top:8px !important}
.u-mt-4px{margin-top:4px !important}
.u-mt-6px{margin-top:6px !important}
.u-fs-11_5px{font-size:11.5px !important}
.u-mt-10px{margin-top:10px !important}
.u-m-10px-0{margin:10px 0 !important}
.u-c-xe8c37a{color:#e8c37a !important}
.u-fs-12px-mt-6px{font-size:12px !important;margin-top:6px !important}
.u-c-green{color:var(--green) !important}
.u-bc-x5c4a2a-mb-12px{border-color:#5c4a2a !important;margin-bottom:12px !important}
.u-mt-14px{margin-top:14px !important}
.u-d-flex-ai-center-gap-7px-c-amber{display:flex !important;align-items:center !important;gap:7px !important;color:var(--amber) !important}
.u-p-3px-0-bt-1px-solid-line-fs-12px{padding:3px 0 !important;border-top:1px solid var(--line) !important;font-size:12px !important}
.u-fs-12px-mt-2px{font-size:12px !important;margin-top:2px !important}
.u-d-flex-ai-center-gap-10px-fw-wrap{display:flex !important;align-items:center !important;gap:10px !important;flex-wrap:wrap !important}
.u-c-amber{color:var(--amber) !important}
.u-p-3px-0-bt-1px-solid-line-fs-12_5px{padding:3px 0 !important;border-top:1px solid var(--line) !important;font-size:12.5px !important}
.u-fs-12_5px{font-size:12.5px !important}
.u-d-flex-ai-center-gap-7px{display:flex !important;align-items:center !important;gap:7px !important}
.u-mb-6px{margin-bottom:6px !important}
.u-m-4px-0-8px{margin:4px 0 8px !important}
.u-ml-auto{margin-left:auto !important}
.u-fs-10_5px{font-size:10.5px !important}
.u-bc-x5c2a2a-mb-12px{border-color:#5c2a2a !important;margin-bottom:12px !important}
.u-fx-1{flex:1 !important}
.u-mb-10px{margin-bottom:10px !important}
.u-mt-12px{margin-top:12px !important}
.u-fs-12px-mt-4px{font-size:12px !important;margin-top:4px !important}
.u-bc-x2a5c32-c-x9be29b{border-color:#2a5c32 !important;color:#9be29b !important}
.u-fs-12px-mt-3px{font-size:12px !important;margin-top:3px !important}
.u-mt-2px{margin-top:2px !important}
.u-d-flex-ai-center-gap-8px{display:flex !important;align-items:center !important;gap:8px !important}
.u-bc-x5c2a2a-c-xff9a8e{border-color:#5c2a2a !important;color:#ff9a8e !important}
.u-mb-14px{margin-bottom:14px !important}
.u-ml-6px{margin-left:6px !important}
.u-bc-x5c4a2a-c-amber{border-color:#5c4a2a !important;color:var(--amber) !important}
.u-d-flex-ai-center-gap-8px-fw-wrap{display:flex !important;align-items:center !important;gap:8px !important;flex-wrap:wrap !important}
.u-fs-12px-m-4px-0{font-size:12px !important;margin:4px 0 !important}
.u-fs-12px-m-6px-0{font-size:12px !important;margin:6px 0 !important}
.u-d-flex-ai-center-gap-7px-c-xe8c37a{display:flex !important;align-items:center !important;gap:7px !important;color:#e8c37a !important}
.u-mb-12px{margin-bottom:12px !important}
.u-fs-11_5px-mt-3px{font-size:11.5px !important;margin-top:3px !important}
.u-td-none{text-decoration:none !important}
.u-m-8px-0-0-18px-p-0-fs-13px{margin:8px 0 0 18px !important;padding:0 !important;font-size:13px !important}
.u-fs-12px-mt-8px{font-size:12px !important;margin-top:8px !important}
.u-ovx-auto{overflow-x:auto !important}
.u-mt-8px-fs-11px{margin-top:8px !important;font-size:11px !important}
.u-c-red{color:var(--red) !important}
.u-mt-4px-fs-13px{margin-top:4px !important;font-size:13px !important}
.u-mt-8px-fs-13px{margin-top:8px !important;font-size:13px !important}
.u-mt-4px-pl-18px{margin-top:4px !important;padding-left:18px !important}
.u-d-flex-ai-center-gap-8px-fw-wrap-mt-4px{display:flex !important;align-items:center !important;gap:8px !important;flex-wrap:wrap !important;margin-top:4px !important}
.u-bc-x7a2020-c-xff6b6b-cur-default{border-color:#7a2020 !important;color:#ff6b6b !important;cursor:default !important}
.u-d-flex-ai-center-gap-5px{display:flex !important;align-items:center !important;gap:5px !important}
.u-fs-11px-tt-uppercase-ls-_04em-minw-64px{font-size:11px !important;text-transform:uppercase !important;letter-spacing:.04em !important;min-width:64px !important}
.u-d-flex-ai-center-gap-6px-fw-wrap-m-0-0-10px{display:flex !important;align-items:center !important;gap:6px !important;flex-wrap:wrap !important;margin:0 0 10px !important}
.u-d-flex-ai-center-gap-12px-fw-wrap{display:flex !important;align-items:center !important;gap:12px !important;flex-wrap:wrap !important}
.u-d-flex-gap-8px-ai-center-fw-wrap-mt-6px{display:flex !important;gap:8px !important;align-items:center !important;flex-wrap:wrap !important;margin-top:6px !important}
.u-w-260px-p-6px-9px{width:260px !important;padding:6px 9px !important}
.u-p-1px-7px-fs-11px{padding:1px 7px !important;font-size:11px !important}
.u-d-flex-gap-6px-fw-wrap-ai-center{display:flex !important;gap:6px !important;flex-wrap:wrap !important;align-items:center !important}
.u-m-12px-0{margin:12px 0 !important}
.u-m-4px-0-6px{margin:4px 0 6px !important}
.u-mt-6px-fs-11_5px{margin-top:6px !important;font-size:11.5px !important}
.u-m-2px-0-10px{margin:2px 0 10px !important}
.u-minw-180px{min-width:180px !important}
.u-bg-mut{background:var(--mut) !important}
.u-d-flex-ai-center-gap-10px{display:flex !important;align-items:center !important;gap:10px !important}
.u-d-flex-ai-center-gap-6px{display:flex !important;align-items:center !important;gap:6px !important}
.u-d-flex-ai-center-gap-7px-c-red{display:flex !important;align-items:center !important;gap:7px !important;color:var(--red) !important}
.u-mt-0{margin-top:0 !important}
.u-bc-x7a2020-bg-x2a1414-mb-12px{border-color:#7a2020 !important;background:#2a1414 !important;margin-bottom:12px !important}
.u-d-flex-ai-center-gap-7px-c-xff6b6b{display:flex !important;align-items:center !important;gap:7px !important;color:#ff6b6b !important}
.u-mt-4px-fs-12px-op-_8{margin-top:4px !important;font-size:12px !important;opacity:.8 !important}
.u-m-0{margin:0 !important}
.u-fs-11px-c-red{font-size:11px !important;color:var(--red) !important}
.u-cur-pointer-fs-13px{cursor:pointer !important;font-size:13px !important}
.u-fs-12px-mb-6px{font-size:12px !important;margin-bottom:6px !important}
.u-fs-11_5px-mt-6px{font-size:11.5px !important;margin-top:6px !important}
.u-fs-11_5px-mt-5px{font-size:11.5px !important;margin-top:5px !important}
.u-bc-x3a3f4a-c-mut{border-color:#3a3f4a !important;color:var(--mut) !important}
.u-fs-12_5px-c-mut{font-size:12.5px !important;color:var(--mut) !important}
.u-mw-260px{max-width:260px !important}
.u-d-grid-gtc-52px-1fr-gap-10px-p-7px-0-bt-1px-dashed-line{display:grid !important;grid-template-columns:52px 1fr !important;gap:10px !important;padding:7px 0 !important;border-top:1px dashed var(--line) !important}
.u-fs-11px-bc-x5c4a2a-c-xe2c99b{font-size:11px !important;border-color:#5c4a2a !important;color:#e2c99b !important}
.u-bc-x5c2a2a-c-xff9a8e-mt-4px{border-color:#5c2a2a !important;color:#ff9a8e !important;margin-top:4px !important}
.u-ta-right{text-align:right !important}
.u-mt-9px-pt-9px-bt-1px-solid-line-3278b{margin-top:9px !important;padding-top:9px !important;border-top:1px solid var(--line) !important;display:flex !important;align-items:center !important;gap:10px !important;flex-wrap:wrap !important}
.u-w-190px-p-3px-7px-fs-12px{width:190px !important;padding:3px 7px !important;font-size:12px !important}
.u-fs-12px-p-2px-5px{font-size:12px !important;padding:2px 5px !important}
.u-fs-11px-mt-8px{font-size:11px !important;margin-top:8px !important}
.u-w-0{width:0 !important}
.u-mw-560px-mt-14px-b-1px-solid-x5c2a2a-r-radius-p-12px-16px{max-width:560px !important;margin-top:14px !important;border:1px solid #5c2a2a !important;border-radius:var(--radius) !important;padding:12px 16px !important}
.u-c-xff9a8e-d-flex-ai-center-gap-7px{color:#ff9a8e !important;display:flex !important;align-items:center !important;gap:7px !important}
.u-m-8px-0-6px{margin:8px 0 6px !important}
.u-m-0-0-6px{margin:0 0 6px !important}
.u-m-8px-0-4px{margin:8px 0 4px !important}
.u-bc-line-mb-10px{border-color:var(--line) !important;margin-bottom:10px !important}
.u-d-inline-flex-ai-center-gap-5px-m-0-4px-4px-0{display:inline-flex !important;align-items:center !important;gap:5px !important;margin:0 4px 4px 0 !important}
.u-p-1px-5px-minw-0-lh-1{padding:1px 5px !important;min-width:0 !important;line-height:1 !important}
.u-d-inline-flex-gap-6px-fw-wrap-ai-center{display:inline-flex !important;gap:6px !important;flex-wrap:wrap !important;align-items:center !important}
.u-w-160px-p-4px-8px-fs-12px{width:160px !important;padding:4px 8px !important;font-size:12px !important}
.u-d-inline-flex-gap-6px-ai-center-ml-auto{display:inline-flex !important;gap:6px !important;align-items:center !important;margin-left:auto !important}
.u-fs-11px-p-1px-4px{font-size:11px !important;padding:1px 4px !important}
.u-minw-0{min-width:0 !important}
.u-d-flex-ai-center-gap-7px-fwt-600-fs-14_5px{display:flex !important;align-items:center !important;gap:7px !important;font-weight:600 !important;font-size:14.5px !important}
.u-c-x7f8ba0{color:#7f8ba0 !important}
.u-d-flex-ai-center-gap-14px-fw-wrap-ml-auto{display:flex !important;align-items:center !important;gap:14px !important;flex-wrap:wrap !important;margin-left:auto !important}
.u-d-flex-fd-column-gap-3px-minw-150px{display:flex !important;flex-direction:column !important;gap:3px !important;min-width:150px !important}
.u-fs-10_5px-tt-uppercase-ls-_04em{font-size:10.5px !important;text-transform:uppercase !important;letter-spacing:.04em !important}
.u-flexba-100pc{flex-basis:100% !important}
.u-mt-12px-pt-11px-bt-1px-solid-line-0e0f1{margin-top:12px !important;padding-top:11px !important;border-top:1px solid var(--line) !important;display:flex !important;align-items:center !important;gap:10px !important;flex-wrap:wrap !important}
.u-d-inline-flex-ai-center-gap-4px-fw-wrap{display:inline-flex !important;align-items:center !important;gap:4px !important;flex-wrap:wrap !important}
.u-c-x9be29b{color:#9be29b !important}
.u-c-xe29b9b{color:#e29b9b !important}
.u-d-flex-gap-8px{display:flex !important;gap:8px !important}
.u-animat-_04s{animation-delay:.04s !important}
.u-animat-_10s{animation-delay:.10s !important}
.u-animat-_14s{animation-delay:.14s !important}
.u-animat-_17s{animation-delay:.17s !important}
.u-animat-_20s{animation-delay:.20s !important}
.u-animat-_25s{animation-delay:.25s !important}
.u-animat-_30s{animation-delay:.30s !important}
.u-animat-_35s{animation-delay:.35s !important}
.u-animat-_42s{animation-delay:.42s !important}
.u-animat-_48s{animation-delay:.48s !important}
.u-animat-_54s{animation-delay:.54s !important}
.u-m-2px-0-0-d-flex-ai-center-gap-5px{margin:2px 0 0 !important;display:flex !important;align-items:center !important;gap:5px !important}
.u-bc-x5c5030-c-xe2c99b{border-color:#5c5030 !important;color:#e2c99b !important}
.u-op-_7{opacity:.7 !important}
.u-mt-9px-d-flex-fw-wrap-gap-6px-ai-center{margin-top:9px !important;display:flex !important;flex-wrap:wrap !important;gap:6px !important;align-items:center !important}
.u-fs-10_5px-p-3px-6px-r-4px-b-1px-solid-x2a5c33-c-green{font-size:10.5px !important;padding:3px 6px !important;border-radius:4px !important;border:1px solid #2a5c33 !important;color:var(--green) !important}
.u-d-flex-ai-center-gap-6px-fw-wrap{display:flex !important;align-items:center !important;gap:6px !important;flex-wrap:wrap !important}
.u-fs-14px-fwt-500-c-txt{font-size:14px !important;font-weight:500 !important;color:var(--txt) !important}
.u-d-inline-flex-ai-center-gap-6px-fw-wrap{display:inline-flex !important;align-items:center !important;gap:6px !important;flex-wrap:wrap !important}
.u-mt-7px-bt-1px-solid-line-pt-6px-e787c{margin-top:7px !important;border-top:1px solid var(--line) !important;padding-top:6px !important;display:flex !important;align-items:baseline !important;gap:9px !important;flex-wrap:wrap !important}
.u-fs-11px-td-underline{font-size:11px !important;text-decoration:underline !important}
.u-mt-10px-fs-12px-bt-1px-solid-line-pt-8px{margin-top:10px !important;font-size:12px !important;border-top:1px solid var(--line) !important;padding-top:8px !important}
.u-d-flex-gap-6px-ai-baseline{display:flex !important;gap:6px !important;align-items:baseline !important}
.u-fs-11_5px-ml-auto{font-size:11.5px !important;margin-left:auto !important}
.u-fs-12px-c-green{font-size:12px !important;color:var(--green) !important}
.u-fs-12px-c-amber{font-size:12px !important;color:var(--amber) !important}
.u-mt-10px-bt-1px-solid-line-pt-8px{margin-top:10px !important;border-top:1px solid var(--line) !important;padding-top:8px !important}
.u-d-flex-ai-baseline-gap-6px{display:flex !important;align-items:baseline !important;gap:6px !important}
.u-lh-1_9{line-height:1.9 !important}
.u-c-xff9a8e-fs-12px-d-block-m-4px-0-2px{color:#ff9a8e !important;font-size:12px !important;display:block !important;margin:-4px 0 2px !important}
.u-d-flex-gap-14px-fw-wrap-ai-center{display:flex !important;gap:14px !important;flex-wrap:wrap !important;align-items:center !important}
.u-fs-12px-m-8px-0-4px{font-size:12px !important;margin:8px 0 4px !important}
.u-mt-10px-d-flex-gap-8px-fw-wrap{margin-top:10px !important;display:flex !important;gap:8px !important;flex-wrap:wrap !important}
.u-mt-8px-d-flex-gap-8px-fw-wrap-ai-center{margin-top:8px !important;display:flex !important;gap:8px !important;flex-wrap:wrap !important;align-items:center !important}
.u-p-1px-8px-fs-12px{padding:1px 8px !important;font-size:12px !important}
.u-mt-6px-d-flex-ai-center-gap-8px-fw-wrap{margin-top:6px !important;display:flex !important;align-items:center !important;gap:8px !important;flex-wrap:wrap !important}
.u-mt-5px-fs-12_5px-w-fit-content{margin-top:5px !important;font-size:12.5px !important;width:fit-content !important}
.u-op-_92{opacity:.92 !important}
.u-m-4px-0{margin:4px 0 !important}
.u-fs-11px-tt-uppercase-ls-_3px-mb-4px{font-size:11px !important;text-transform:uppercase !important;letter-spacing:.3px !important;margin-bottom:4px !important}
.u-mt-3px{margin-top:3px !important}
.u-fs-11_5px-c-warn_xe8c37a{font-size:11.5px !important;color:var(--warn,#e8c37a) !important}
.u-d-flex-ai-center-gap-8px-fw-wrap-mt-3px{display:flex !important;align-items:center !important;gap:8px !important;flex-wrap:wrap !important;margin-top:3px !important}
.u-fs-11_5px-c-mut{font-size:11.5px !important;color:var(--mut) !important}
.u-ml-8px{margin-left:8px !important}
.u-bc-x2a5c33-c-green{border-color:#2a5c33 !important;color:var(--green) !important}
.u-mw-560px{max-width:560px !important}
.u-m-6px-0{margin:6px 0 !important}
.u-m-2px-0-10px-d-flex-ai-center-gap-5px{margin:2px 0 10px !important;display:flex !important;align-items:center !important;gap:5px !important}
.u-m-0-0-10px-d-flex-ai-flex-start-gap-5px{margin:0 0 10px !important;display:flex !important;align-items:flex-start !important;gap:5px !important}
.u-pos-absolute-left-0-right-0-top-20pc-h-0{position:absolute !important;left:0 !important;right:0 !important;top:20% !important;height:0 !important}
.u-pos-absolute-left-0-right-0-top-50pc-h-0{position:absolute !important;left:0 !important;right:0 !important;top:50% !important;height:0 !important}
.u-pos-absolute-left-0-right-0-top-80pc-h-0{position:absolute !important;left:0 !important;right:0 !important;top:80% !important;height:0 !important}
.u-fs-12px-d-inline-flex-ai-center-gap-5px{font-size:12px !important;display:inline-flex !important;align-items:center !important;gap:5px !important}
.u-w-90px{width:90px !important}
.u-w-200px{width:200px !important}
.u-w-170px{width:170px !important}
.u-p-10px-2px-c-green-fs-13px{padding:10px 2px !important;color:var(--green) !important;font-size:13px !important}
.u-p-10px-2px{padding:10px 2px !important}
.u-d-flex-gap-10px-ai-center-fw-wrap-mb-10px{display:flex !important;gap:10px !important;align-items:center !important;flex-wrap:wrap !important;margin-bottom:10px !important}
.u-ml-auto-minw-230px{margin-left:auto !important;min-width:230px !important}
.u-p-8px-4px-c-green-fs-12_5px{padding:8px 4px !important;color:var(--green) !important;font-size:12.5px !important}
.u-d-flex-gap-10px-fw-wrap-ai-center-m-10px-0-14px{display:flex !important;gap:10px !important;flex-wrap:wrap !important;align-items:center !important;margin:10px 0 14px !important}
.u-gap-8px-ai-center{gap:8px !important;align-items:center !important}
.u-c-xff9a8e-minh-18px-fs-12px{color:#ff9a8e !important;min-height:18px !important;font-size:12px !important}
.u-p-20px{padding:20px !important}
.u-d-block-mw-none{display:block !important;max-width:none !important}
.u-d-inline-flex-ai-center-gap-3px-fs-11px{display:inline-flex !important;align-items:center !important;gap:3px !important;font-size:11px !important}
.u-p-3px-9px-fs-12px{padding:3px 9px !important;font-size:12px !important}
.u-d-flex-ai-center-gap-12px-fw-wrap-mb-10px{display:flex !important;align-items:center !important;gap:12px !important;flex-wrap:wrap !important;margin-bottom:10px !important}
.u-w-auto-bg-panel2-c-txt-61b56{width:auto !important;background:var(--panel2) !important;color:var(--txt) !important;border:1px solid var(--line) !important;border-radius:8px !important;padding:4px 8px !important;font:12px var(--font-body) !important}
.u-d-inline-flex-gap-4px{display:inline-flex !important;gap:4px !important}
.u-mb-9px{margin-bottom:9px !important}
.u-fs-12_5px-mt-6px{font-size:12.5px !important;margin-top:6px !important}
.u-mt-7px-d-flex-gap-6px-fw-wrap-ai-center{margin-top:7px !important;display:flex !important;gap:6px !important;flex-wrap:wrap !important;align-items:center !important}
.u-fs-15px-fwt-600-mb-8px{font-size:15px !important;font-weight:600 !important;margin-bottom:8px !important}
.u-bc-green{border-color:var(--green) !important}
.u-fs-12px-mt-5px{font-size:12px !important;margin-top:5px !important}
.u-fx-1-minw-260px{flex:1 !important;min-width:260px !important}
.u-d-flex-ai-center-gap-9px-fw-wrap{display:flex !important;align-items:center !important;gap:9px !important;flex-wrap:wrap !important}
.u-mt-5px-fs-13px{margin-top:5px !important;font-size:13px !important}
.u-mt-9px-d-flex-gap-6px-fw-wrap-ai-center{margin-top:9px !important;display:flex !important;gap:6px !important;flex-wrap:wrap !important;align-items:center !important}
.u-mr-12px-ws-nowrap{margin-right:12px !important;white-space:nowrap !important}
.u-mr-10px-ws-nowrap-fs-12px{margin-right:10px !important;white-space:nowrap !important;font-size:12px !important}
.u-fx-1-minw-280px{flex:1 !important;min-width:280px !important}
.u-bc-red-m-10px-0{border-color:var(--red) !important;margin:10px 0 !important}

/* Прочерк с причиной: подсказка объясняет, ПОЧЕМУ пусто. Причину даёт бэкенд
   (конверт blanks), фронт её только показывает. Голый прочерк (data-dash="bare") — поле,
   за которым причины не прислали: выглядит как обычный «—», чтобы не пугать владельца,
   а ловит его контракт test_board (DashContract). */
.dash { color: var(--mut); }
.dash[data-dash="why"] { border-bottom: 1px dotted var(--mut); cursor: help; }

/* «Агенты флота»: вид по прототипу docs/prototypes/activity-by-agents.html.
   Своих украшений нет: цвета берутся из тех же переменных, что вся админка. */
/* База `.mtx` — тепловая матрица активности: клетки по центру, 44×44. Таблица агентов — обычная
   таблица данных, поэтому выравнивание и высоту она задаёт своя (прототип). */
.mtx-agents .mtx-gn{display:inline-flex;align-items:center;gap:8px;color:#3FB37F}
.mtx-agents .mtx-gn svg{color:#3FB37F}
.mtx-agents .mtx-cnt{color:#6b7280;font-weight:400;font-size:11.5px;margin-left:8px}
.mtx-agents .mtx-flag{color:#E0685A;font-size:11px;margin-left:8px;border:1px solid #3E1E1A;background:#2A1512;border-radius:3px;padding:1px 6px}
.mtx-agents .mtx-ver .mtx-src{color:#9aa3b2;font-size:11px;font-family:inherit;margin-left:0}  /* контраст ≥4,5 */
/* Карточка агента: первым человек, идентификатор один раз мелко, проблемные помечены */
.mtx-agents .mtx-who b{font-family:var(--font-body);font-size:13.5px;color:#e6e9ef;font-weight:600}
.mtx-agents .mtx-who .mtx-rw{display:none;font-family:var(--font-body);color:#9aa3b2;font-size:12px;margin-left:4px}  /* роль — своей колонкой; на телефоне колонки нет, и роль встаёт к имени */
.mtx-agents .mtx-ok-mark{color:#3FB37F;margin-left:6px;font-size:12px}
.mtx-agents .mtx-attn-why{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.mtx-agents .mtx-attn-pill{font-family:var(--font-body);font-size:11px;color:#f0c46a;border:1px solid #5a4418;background:#2a2111;border-radius:4px;padding:1px 6px}
.mtx-attn-pill.mtx-mild{color:#9aa3b2;background:transparent;border-color:var(--line)}   /* просрочен только срок доказательства */
.mtx-hooks{font-family:var(--font-body);font-size:12px;line-height:1.35;margin-top:4px;min-width:0;overflow-wrap:anywhere;white-space:normal;color:#9aa3b2}   /* корень плагина словами сервера */
.mtx-hooks.mtx-hooks-bad{color:var(--err,#f85149)}
.mtx-summary .mtx-sum-attn b{color:#f0c46a}
.mtx-summary .mtx-sum-part{margin-left:14px;font-size:12.5px}
.u-w-100pct{width:100%;box-sizing:border-box}   /* поле причины owner-gate на всю ширину */

/* ── УЗКИЙ ЭКРАН И ВЕС КНОПОК В СТРОКЕ АГЕНТА ──────────────────────────────────
   На 375 таблица агентов шире контейнера в разы: колонок справа не видно, имена обрываются;
   таблицы страницы «Канон» — так же. Кнопки строки мелкие: редкое действие не должно весить
   больше, чем версия канона и пульс. */

/* ── «АГЕНТЫ ФЛОТА» КАРТОЧКАМИ ПО ПРОТОТИПУ (docs/prototypes/HARN-1279-agents-fleet-2026-09-22.html) ──
   Кнопки в ряд, чтобы не растягивать ширину; пульс — важнейшее. Строка агента — карточка из двух
   строк: данные пятью колонками (кто · роль · канон · уборка · пульс) и лента действий под чертой.
   Ширину задают данные, не кнопки. Цвета и радиусы — токены админки, своих значений нет. */
.mtx-cards{min-width:0;width:100%}
.mtx-cards .mtx-grp{display:flex;align-items:center;gap:8px;margin:18px 0 8px;color:var(--mut);font-size:12.5px}
.mtx-cards .mtx-grp:first-child{margin-top:4px}
.mtx-cards .mtx-grp .mtx-gn{font-size:13.5px;font-weight:600;color:var(--green)}
.mtx-cards .mtx-grp .mtx-gn svg{color:var(--green)}
.mtx-cards .mtx-grp .mtx-cnt{color:var(--mut);font-size:12.5px;margin-left:0}
.mtx-cards .mtx-grp-ln{flex:1;height:1px;background:var(--line)}
.mtx-cards .mtx-noagents{background:var(--panel);border:1px dashed var(--line);border-radius:var(--radius);padding:11px 14px;margin-bottom:8px;
  color:var(--mut);font-size:12.5px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* Строка агента — строка таблицы по прототипу `docs/prototypes/fleet-agent-card-proto.html`:
   Агент · Канон · Пульс · действия; ширины 30/30/14/26 %, шапка капителью, кнопки прототипа,
   «ещё ▾» — выпадающим списком. На узкой ширине таблица прокручивается внутри рамки. */
.mtx-cards .mtx-tblwrap{overflow:visible;border:1px solid var(--line);border-radius:12px;background:var(--panel);margin-bottom:8px}
/* прокрутка внутри рамки — только на узкой: на обычной ширине рамка не обрезает выпадающее «ещё ▾» */
@media (max-width:800px){.mtx-cards .mtx-tblwrap{overflow-x:auto}
  /* Общее правило телефона делает таблицы блоками, и colgroup перестаёт действовать: «Канон»
     сжимается до слова в строке. Прокрутку держит рамка, таблица остаётся таблицей. */
  .mtx-cards .mtx-tblwrap .mtx-tbl{display:table}}
.mtx-cards .mtx-tbl{border-collapse:collapse;width:100%;min-width:900px}
/* При `table-layout:fixed` доли — закон, а не пожелание. В ряду одна кнопка «Перевыпустить» и
   «ещё ▾» (~20 %), в «Обвязке» слово ≤ 20 знаков; остальное — «Агенту», «Канону» и «Пульсу» */
.mtx-cards .mtx-tbl col.mtx-c-agent{width:26%} .mtx-cards .mtx-tbl col.mtx-c-canon{width:24%}
.mtx-cards .mtx-tbl col.mtx-c-rig{width:15%}
.mtx-cards .mtx-tbl col.mtx-c-pulse{width:15%} .mtx-cards .mtx-tbl col.mtx-c-acts{width:20%}
.mtx-cards td.mtx-rig{white-space:nowrap;line-height:1.35}
/* раскладка держится colgroup: длинное слово «Обвязки» иначе раздувает колонку и выталкивает «Пульс» и кнопки */
.mtx-cards .mtx-tbl{table-layout:fixed}
/* ячейка «Обвязки» открывает попап паспорта: кнопка без рамки, видом как слово пульса */
.mtx-cards .mtx-rig-open{all:unset;cursor:pointer;border-bottom:1px dotted transparent}
.mtx-cards .mtx-rig-open:hover .mtx-age,.mtx-cards .mtx-rig-open:focus-visible .mtx-age{text-decoration:underline dotted}
.mtx-cards .mtx-rig-open:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:4px}
.modal .mtx-rig-sum{font-weight:600;margin:4px 0 12px}
.modal .mtx-rig-sum .mtx-dot{display:inline-block;width:8px;height:8px;border-radius:50%;vertical-align:middle;margin-right:4px;background:#3a3f4c}
.modal .mtx-rig-sum.mtx-ok .mtx-dot{background:var(--green)} .modal .mtx-rig-sum.mtx-warn .mtx-dot{background:var(--amber)}
.modal .mtx-rig-sum.mtx-err .mtx-dot{background:var(--red)}
.modal .mtx-rig-sec{padding:8px 0;border-top:1px solid var(--line)}
.modal .mtx-rig-sec.mtx-rig-bad > b{color:var(--amber)}
.modal .mtx-rig-list{margin:6px 0 0;padding-left:18px;font-size:12px;line-height:1.5;overflow-wrap:anywhere}
.mtx-cards .mtx-st.mtx-err .mtx-dot{background:var(--red)} .mtx-cards .mtx-st.mtx-err .mtx-age{color:var(--red)}
.mtx-cards .mtx-tbl th{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:#5f6878;text-align:left;padding:10px 16px;
  border-bottom:1px solid var(--line);font-weight:600;white-space:nowrap}
.mtx-cards .mtx-tbl td{padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:middle}
/* общее `.mtx-ver{white-space:nowrap;моно}` (оснащённость) ячейке канона не указ: в прототипе доказательство переносится */
.mtx-cards td.mtx-ver{white-space:normal;font-family:inherit;font-size:inherit;line-height:inherit}
.mtx-cards .mtx-tbl tr:last-child td{border-bottom:0}
.mtx-cards .mtx-ag.mtx-attn td:first-child{box-shadow:inset 3px 0 var(--amber)}
.mtx-cards .mtx-ag.mtx-dead td:first-child{box-shadow:inset 3px 0 var(--red)} .mtx-cards .mtx-ag.mtx-dead td{background:#16121a}
.mtx-cards .mtx-name{font-weight:600;font-size:15px}
.mtx-cards .mtx-uid .mtx-u{font:12px/1.4 var(--font-mono);color:var(--mut);margin-top:2px;overflow-wrap:anywhere}
.mtx-cards .mtx-attn-why{margin-top:5px}
.mtx-cards .mtx-attn-pill{border-radius:999px;padding:1px 7px;background:transparent}
.mtx-cards .mtx-v{font:600 14px/1.3 var(--font-mono);color:var(--txt)}
.mtx-cards .mtx-v.mtx-old{color:var(--amber)} .mtx-cards .mtx-v.mtx-anc{color:var(--red)}
.mtx-cards .mtx-v.mtx-none{color:var(--mut);font-weight:500}
.mtx-cards .mtx-proof{font-size:12px;color:var(--mut);margin-top:2px}
.mtx-cards .mtx-proof .mtx-ok-mark{color:var(--green);margin-left:0}
.mtx-cards .mtx-proof .c-warn{color:var(--amber)}
.mtx-cards .mtx-when{font-size:12px;color:var(--mut)}
.mtx-cards .mtx-when .mtx-src{font-size:12px;color:var(--mut)}
.mtx-cards td.mtx-st{font:12.5px var(--font-mono);white-space:nowrap}
.mtx-cards .mtx-dot{display:inline-block;width:8px;height:8px;border-radius:50%;vertical-align:middle;margin-right:6px;background:#3a3f4c}
.mtx-cards .mtx-st.mtx-ok .mtx-dot{background:var(--green)}
.mtx-cards .mtx-st.mtx-warn .mtx-dot{background:var(--amber)}
.mtx-cards .mtx-age{color:var(--mut)}
.mtx-cards .mtx-st.mtx-ok .mtx-age{color:var(--green)} .mtx-cards .mtx-st.mtx-warn .mtx-age{color:var(--amber)}
.mtx-cards td.mtx-acts{white-space:nowrap;text-align:right;position:relative}
.mtx-cards td.mtx-acts .btn{font:500 12.5px/1 var(--font-body);padding:7px 11px;border-radius:8px;border:1px solid #2c3442;
  background:var(--panel2);color:var(--txt);white-space:nowrap}
.mtx-cards td.mtx-acts .btn + .btn{margin-left:6px}
.mtx-cards td.mtx-acts .btn.mtx-danger{color:var(--red);border-color:#5c2a2a;background:#1a1012}
.mtx-cards td.mtx-acts .btn.mtx-accent{color:var(--acc);border-color:#2a3d5c;background:#10161f}
.mtx-cards .mtx-more{display:inline-block;margin-left:10px;text-align:left}
.mtx-cards .mtx-more > summary{list-style:none;color:var(--mut);cursor:pointer;font-size:12px;border-bottom:1px dotted var(--mut)}
.mtx-cards .mtx-more > summary::-webkit-details-marker{display:none}
.mtx-cards .mtx-more-pop{position:absolute;right:16px;top:calc(100% - 6px);z-index:5;min-width:250px;padding:10px;display:flex;
  flex-direction:column;align-items:flex-start;gap:6px;background:var(--panel2);border:1px solid var(--line);border-radius:10px;
  box-shadow:var(--sh-pop);white-space:normal}
.mtx-cards .mtx-more-pop .btn{margin-left:0 !important}
.mtx-cards .mtx-more-info{font:11.5px/1.4 var(--font-mono);color:var(--mut)}

/* вторая строка карточки проекта: одна строка «описание · репо», длинное — многоточием, полное — в подсказке */
.card-sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}

/* Строка адресата на карточке задачи обновления: несколько таких задач различаются именно ею,
   поэтому она читаемая, а не служебная мелочь. */
/* Слой фона «Орбиты» карточки Klokod. Класс `ap-orbit-on` вешает JS у зелёной карточки; canvas
   и маска — под содержимым (отрицательный z-index внутри изолированного контекста рисуется над
   фоном карточки и под её текстом), обрезаются радиусом карточки. */
#autopilot-panel.ap-orbit-on{position:relative;isolation:isolate;overflow:hidden}
#autopilot-panel .ap-orbit{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;opacity:.9}
#autopilot-panel .ap-orbit-mask{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,#0e1218d9 0%,#0e12189c 47%,#0e12181a 100%)}

/* попап «вышел канон» 1 в 1 по прототипу docs/prototypes/canon-release-popup.html. */
.pill.krelease{cursor:pointer}
.cr-modal{padding:24px}   /* 92vh вместо 88vh прототипа: 6 тезисов выпуска на 1280×860 без прокрутки и на запасных шрифтах */
.cr-box{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:16px;width:100%;max-width:640px;
  max-height:92vh;overflow:auto;box-shadow:var(--sh-pop);animation:modal-in .22s var(--ease);padding:0}
.cr-x{position:absolute;top:14px;right:14px;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  border-radius:8px;border:1px solid var(--line);background:var(--panel2);color:var(--mut);cursor:pointer;transition:color .15s}
.cr-x:hover{color:var(--txt)} .cr-x svg{width:14px;height:14px}
.cr-head{padding:18px 26px 14px;border-bottom:1px solid var(--line);background:
  radial-gradient(420px 120px at 18% 0%,rgba(139,92,246,.16),transparent 70%),
  radial-gradient(360px 120px at 80% 100%,rgba(76,201,240,.10),transparent 70%)}
.cr-logo{display:block;height:18px;width:auto;opacity:.95;margin-bottom:10px}
.cr-eyebrow{font:600 11px/1 var(--font-head);letter-spacing:.12em;text-transform:uppercase;color:var(--mut);margin-bottom:8px}
.cr-title{display:flex;align-items:center;flex-wrap:wrap;gap:10px 12px;margin:0;font:600 22px/1.2 var(--font-head);color:var(--txt)}
.cr-ver{--kroll:0deg;display:inline-flex;align-items:center;padding:4px 14px;border-radius:999px;border:1.5px solid transparent;
  font:700 20px/1.1 var(--font-mono);letter-spacing:.02em;
  background:linear-gradient(var(--panel),var(--panel)) padding-box,conic-gradient(from var(--kroll),#b48cff,#4cc9f0 25%,#3a3352 45%,#3a3352 70%,#b48cff) border-box;
  animation:krollSpin 4s linear infinite;box-shadow:0 0 24px -6px rgba(139,92,246,.55)}
.cr-ver span{background:linear-gradient(90deg,#cdb6ff,#8fe3ff,#cdb6ff);background-size:200% 100%;-webkit-background-clip:text;
  background-clip:text;color:transparent;animation:crShimmer 3.2s linear infinite}
@keyframes crShimmer{to{background-position:-200% 0}}
.cr-lead{margin:10px 0 0;color:var(--mut);font-size:13px}
/* призыв к задачам обновления планеров: под заголовком, выше «Коротко…»; длинное название переносится в строке */
.cr-must{margin:10px 0 0;font-size:13px}
.cr-must-lead{margin:0;font-weight:600;color:var(--txt)}
.cr-must-list{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:5px;min-width:0}
.cr-must-list li{color:#d9e0ea;overflow-wrap:anywhere;min-width:0}
.cr-must-id{color:var(--acc);cursor:pointer;text-decoration:underline dotted}
.cr-must-st{color:var(--mut)}
.cr-body{padding:16px 26px 4px}
.cr-h{margin:12px 0 6px;font:600 12px/1 var(--font-head);letter-spacing:.08em;text-transform:uppercase;color:#c9d1dc}
.cr-body .cr-h:first-child{margin-top:0}
.cr-new{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.cr-new li{position:relative;padding-left:18px;color:#d9e0ea}
.cr-new li::before{content:"";position:absolute;left:2px;top:.62em;width:7px;height:7px;border-radius:50%;background:linear-gradient(135deg,#b48cff,#4cc9f0)}
.cr-do{list-style:none;margin:0;padding:0;display:grid;gap:5px;counter-reset:n}
.cr-do li{display:flex;gap:11px;align-items:flex-start;color:#d9e0ea}
.cr-do li::before{counter-increment:n;content:counter(n);flex:none;width:22px;height:22px;border-radius:50%;background:var(--panel3);
  border:1px solid var(--line);color:#cdb6ff;font:600 12px/22px var(--font-mono);text-align:center}
.cr-note{margin-top:4px;padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel2);color:var(--mut);font-size:13px}
.cr-note b{color:#d9e0ea;font-weight:600}
.cr-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:14px 26px 18px;border-top:1px solid var(--line);margin-top:10px}
.cr-more{display:inline-flex;align-items:center;gap:8px;color:var(--acc);text-decoration:none;font-size:13px}
.cr-more:hover{text-decoration:underline} .cr-more svg{width:15px;height:15px;flex:none} .cr-more small{color:var(--mut)}
.cr-btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 22px;border-radius:10px;border:1px solid rgba(255,255,255,.08);
  cursor:pointer;font:600 14px/1 var(--font-body);color:#fff;background:linear-gradient(180deg,#5d9dff,#3f7ff0);
  box-shadow:0 8px 24px -10px rgba(106,166,255,.8);transition:transform .12s,filter .12s}
.cr-btn:hover{filter:brightness(1.06)} .cr-btn:active{transform:scale(.97)}
@media (max-width:480px){.cr-head,.cr-body{padding-left:18px;padding-right:18px}.cr-foot{padding:14px 18px 18px}
  .cr-title{font-size:19px}.cr-ver{font-size:17px}.cr-btn{width:100%}}
@media (prefers-reduced-motion:reduce){.cr-ver,.cr-ver span,.cr-box,.cr-modal{animation:none}}

/* переходы владельца в попапе задачи */
.owner-acts{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start;margin:0 0 12px}
.owner-acts #owner-act-form{flex-basis:100%}
.owner-act-ask{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.owner-act-ask textarea{width:100%;box-sizing:border-box;background:var(--panel2);border:1px solid var(--line);border-radius:8px;color:var(--txt);padding:8px;font:inherit}
.owner-act-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* Пульт владельца: восемь страниц по образцу «Оснащённости флота». Классы строк и групп — те же `.mtx-*`
   (страницы оборачивают группы в `.mtx-cards`); здесь только то, чего у «Оснащённости» нет: ряд кнопок шапки, пометка
   вида, список агентов в ячейке, полоска доли, две колонки, свёрнутое «ещё N», меню группами со счётчиком. */
#adm-side .adm-g .sect:first-child{margin-top:4px}
#adm-side .adm-n{margin-left:auto;font:500 11.5px var(--font-mono);color:var(--amber)}
.desk .desk-pact{margin:10px 0 8px;display:flex;gap:8px;flex-wrap:wrap}
.desk .desk-pact .btn{font:500 12.5px/1 var(--font-body);padding:8px 12px;border-radius:8px;border:1px solid #2c3442;background:var(--panel2);color:var(--txt)}
.desk .btn.mtx-accent{color:var(--acc);border-color:#2a3d5c;background:#10161f}
.desk .btn[disabled]{opacity:.55;cursor:not-allowed}
.desk .mtx-summary .mtx-sum-part.ok b{color:var(--green)}
.desk .mtx-summary .mtx-sum-part.warn b,.desk .desk-warn{color:var(--amber)}
.desk .mtx-summary .mtx-sum-part.err b{color:var(--red)}
.mtx-cards .mtx-note{font-size:12.5px;color:var(--mut);margin-top:2px;line-height:1.4}
.mtx-cards td.mtx-note{margin-top:0}
.mtx-cards .mtx-st.mtx-err .mtx-dot{background:var(--red)} .mtx-cards .mtx-st.mtx-err .mtx-age{color:var(--red)}
.desk .mtx-tbl tr.mtx-attn td:first-child{box-shadow:inset 3px 0 var(--amber)}
.desk .mtx-tbl tr.mtx-dead td:first-child{box-shadow:inset 3px 0 var(--red)}
.desk .mtx-tbl .r,.desk .mtx-tbl th.r{text-align:right}
.desk .num{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.desk .desk-kind{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#5f6878;font-weight:600;white-space:nowrap}
.desk .desk-agl{display:flex;flex-direction:column;gap:2px;font-size:13px}
.desk .desk-agl > span{display:flex;gap:10px;align-items:baseline;white-space:nowrap}
.desk .desk-agl .mtx-v{font-size:12.5px;margin-left:auto;font-weight:500}
.desk .desk-key{font-weight:500}
.desk .desk-inline{display:inline;font-weight:400}
.desk .desk-bar{height:3px;border-radius:2px;background:var(--panel3,#222633);overflow:hidden;max-width:220px}
.desk .desk-bar i{display:block;height:100%;background:var(--mut);border-radius:2px}
.desk .desk-two{display:grid;grid-template-columns:1fr 1fr}
.desk .desk-two > div{min-width:0}
.desk .desk-txt{padding:14px 16px;font-size:13.5px;line-height:1.55}
.desk .desk-txt .desk-kind{margin-bottom:8px}
.desk .desk-side{border-left:1px solid var(--line)}
.desk .mtx-tbl.desk-inner{min-width:0;width:100%}
.desk .mtx-tbl.desk-inner td{padding:6px 12px 6px 0;border:0}
.desk .desk-hide{display:none}
.desk .desk-wrap,.desk .mtx-u{overflow-wrap:anywhere;word-break:break-word}
.desk #desk-journal + .desk-filter + .mtx-tblwrap .mtx-tbl{table-layout:fixed}
.desk .desk-dot-warn{background:var(--amber)} .desk .desk-dot-err{background:var(--red)}
.desk .mtx-legend{display:flex;gap:6px 18px;flex-wrap:wrap;font-size:12px;color:var(--mut);margin:8px 0}
.desk .mtx-legend > span{display:inline-flex;align-items:center}
.desk .mtx-legend .mtx-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}
.desk .desk-filter{display:flex;gap:8px;margin:0 0 8px}
.desk .desk-filter input{flex:1;max-width:340px}
.desk .desk-site{display:flex;gap:6px}
.desk .desk-site input{min-width:160px}
.desk .tabs2{margin:14px 0 2px}
@media (max-width:980px){
  #view-admin .wrap{flex-direction:column;min-height:auto}
  #adm-side{width:auto;border-right:0;border-bottom:1px solid var(--line);display:flex;flex-wrap:wrap;gap:2px;padding:10px 12px}
  #adm-side .adm-g{display:contents}
  #adm-side .sect{display:none}
  #adm-side a{flex:none;white-space:nowrap}
  .desk .desk-two{grid-template-columns:1fr}
  .desk .desk-side{border-left:0;border-top:1px solid var(--line)}
  .desk .mtx-tblwrap{overflow-x:auto}
}

/* ═════════ страница «Обвязка» (стили прототипа под корнем .rigp) ═════════ */
/* «new» у пункта «Обвязка» — слово, не плашка: тот же размер, строчные, зелёный, без фона,
   рамки и анимации */
.tab-new{color:var(--green)}
.tab-new.hidden{display:none}
.rigp{font-size:12.5px;line-height:1.35}
.rigp code{font-family:var(--font-mono);font-size:.9em;color:#bcc7d6}
.rigp .muted{color:var(--mut)}.rigp .small{font-size:11px}
.rigp .pill{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);border-radius:999px;padding:1px 8px;font-size:11px;background:var(--chip);color:var(--txt);white-space:nowrap}
.rigp .pill.g{border-color:#2a5c32;color:#9be29b;background:#122016}
.rigp .pill.a{border-color:#5c4a2a;color:#e2c99b;background:#221b10}
.rigp .pill.b{border-color:#2b3f66;color:#a8c6ff;background:#141b2c}
.rigp .pill .dot{width:7px;height:7px;border-radius:50%;background:currentColor}
.rigp section{margin:0 0 40px;opacity:0;transform:translateY(10px);animation:rigin .6s var(--ease) forwards}
.rigp section:nth-of-type(2){animation-delay:.12s}.rigp section:nth-of-type(3){animation-delay:.24s}.rigp section:nth-of-type(4){animation-delay:.36s}
.rigp section:last-of-type{margin-bottom:0}
@keyframes rigin{to{opacity:1;transform:none}}
.rigp .sh{display:flex;align-items:baseline;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.rigp .sh h2{font-size:17px;margin:0}.rigp .sh .why{color:var(--mut);font-size:12px}
.rigp .card{background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:12px 16px}
.rigp .card.hcard+.card.hcard,.rigp .card.skb+.card.skb{margin-top:22px}
.rigp .hl{font-family:var(--font-head);font-weight:600;font-size:13px;letter-spacing:.02em;margin-bottom:6px}
.rigp .hrow{padding:6px 0 10px}.rigp .hrow+.hrow{border-top:1px solid var(--line);padding-top:10px}
.rigp .hh{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:5px}
.rigp .hh b{font-family:var(--font-head);font-size:13.5px}
.rigp .hh .hr{margin-left:auto;color:var(--mut);font-size:12px}
.rigp .hbar{height:10px;border-radius:5px;background:var(--panel3);overflow:hidden;display:flex;gap:1px}
.rigp .hbar b{display:block;height:100%;transform-origin:left;animation:riggrow 1.1s var(--ease) both}
@keyframes riggrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.rigp .hleg{display:flex;flex-wrap:wrap;gap:3px 12px;margin-top:6px;font-size:11.5px;color:var(--mut)}
.rigp .hleg i{display:inline-block;width:8px;height:8px;border-radius:3px;margin-right:4px;vertical-align:-1px}
.rigp .hfacts{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:5px;font-size:11.5px;color:var(--mut)}
.rigp .more{color:var(--mut);cursor:pointer;font-size:12px}
.rigp .hdet{display:none;margin-top:6px;padding:6px 10px;border-radius:8px;background:var(--panel2);font-size:11.5px}
.rigp .hrow.open .hdet{display:block}
.rigp .hdet dl{display:grid;grid-template-columns:200px 1fr;gap:2px 10px;margin:0}
.rigp .hdet dt{color:var(--mut)}.rigp .hdet dd{margin:0;word-break:break-word}
.rigp .c1{background:#5fd36b}.rigp .c2{background:#4cc3e8}.rigp .c3{background:#d9b04a}.rigp .c4{background:#f8604f}.rigp .c5{background:#b06cf5}.rigp .c6{background:#4a5163}
.rigp .k1{background:#5fd36b}.rigp .k2{background:#4cc3e8}.rigp .k3{background:#4a5163}
.rigp .skb{padding:12px 16px}
.rigp .skh{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.rigp .skh b{font-family:var(--font-head);font-size:13px}.rigp .skh .hr{margin-left:auto}
.rigp .tot{font-family:var(--font-mono);font-size:12px;color:var(--txt);margin-left:2px}.rigp .tot.over{color:var(--red)}
.rigp table.skt{width:100%;border-collapse:collapse;font-size:12px}
.rigp .skt th{text-align:left;color:var(--mut);font-weight:500;font-size:11px;padding:4px 8px;border-bottom:1px solid var(--line)}
.rigp .skt th.thname{width:220px}
.rigp .skt th.thnum{width:120px;text-align:right;white-space:nowrap}
.rigp .rig-norm{margin-top:8px}
.rigp .skt td{padding:5px 8px;border-bottom:1px solid var(--line);vertical-align:top}
.rigp .skt tr:last-child td{border-bottom:0}
.rigp .skt td.k{font-family:var(--font-mono);font-size:11.5px;color:#bcc7d6;white-space:nowrap}
.rigp .skt td.path{font-family:var(--font-mono);font-size:11.5px;color:#9fb0c6;word-break:break-all}
.rigp .skt td.num{text-align:right;font-family:var(--font-mono);font-size:12px;color:var(--mut);white-space:nowrap}
.rigp .skt td.num.over{color:var(--red)}
.rigp .now{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:4px 0 12px;padding:7px 12px;font-size:12px;background:linear-gradient(90deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:var(--radius)}
.rigp .now b{font-family:var(--font-head)}
.rigp .blink{animation:rigblink 2.4s ease-in-out infinite}
@keyframes rigblink{0%,100%{opacity:1}50%{opacity:.45}}
.rigp .lanes{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.rigp .lane{background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:12px 16px;position:relative;overflow:hidden}
.rigp .lane h3{font-size:13.5px;display:flex;align-items:center;gap:10px;margin:0 0 2px}
.rigp .lane .who{color:var(--mut);font-size:11px;margin-bottom:8px}
.rigp .lane .role{width:20px;height:20px;border-radius:6px;display:grid;place-items:center;font-size:11px;font-family:var(--font-head)}
.rigp .lane.pl .role{background:#1f2a44;color:#a8c6ff}.rigp .lane.ex .role{background:#16301c;color:#9be29b}
.rigp .steps{position:relative;padding-left:26px}
.rigp .rail{position:absolute;left:8px;top:4px;bottom:14px;width:2px;background:var(--line);border-radius:2px}
.rigp .rail i{position:absolute;left:-3px;width:8px;height:8px;border-radius:50%;background:var(--acc);box-shadow:0 0 12px var(--acc);animation:rigrun 7s linear infinite;top:0}
.rigp .lane.ex .rail i{background:var(--green);box-shadow:0 0 12px var(--green);animation-duration:9s;animation-delay:1.2s}
@keyframes rigrun{0%{top:0;opacity:0}6%{opacity:1}94%{opacity:1}100%{top:calc(100% - 8px);opacity:0}}
.rigp .step{position:relative;padding:4px 8px 5px 9px;margin:0 0 2px;border-radius:7px;border:1px solid transparent;cursor:pointer;transition:background .25s var(--ease),border-color .25s var(--ease)}
.rigp .step:hover{background:var(--panel2)}
.rigp .step::before{content:"";position:absolute;left:-22px;top:9px;width:9px;height:9px;border-radius:50%;background:var(--panel3);border:2px solid var(--line)}
.rigp .step.done::before{background:var(--green);border-color:#2a5c32}
.rigp .step.live::before{background:var(--acc);border-color:#2b3f66;box-shadow:0 0 0 4px var(--accsoft);animation:rigpulse 1.8s ease-out infinite}
.rigp .step.live{border-color:#2b3f66;background:rgba(106,166,255,.06)}
.rigp .step.warn::before{background:var(--amber);border-color:#5c4a2a;box-shadow:0 0 0 4px rgba(214,160,34,.18)}
.rigp .step.warn{border-color:#5c4a2a;background:rgba(214,160,34,.06)}
@keyframes rigpulse{0%{box-shadow:0 0 0 0 rgba(106,166,255,.5)}100%{box-shadow:0 0 0 10px rgba(106,166,255,0)}}
.rigp .step .t{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.rigp .step .n{font-family:var(--font-mono);font-size:10px;color:var(--mut);width:14px}
.rigp .step .name{font-weight:600;font-size:12.5px}
.rigp .step .what{color:var(--mut);font-size:11.5px;margin-top:1px}
.rigp .step .hold{margin-top:3px;display:flex;gap:4px;flex-wrap:wrap}
.rigp .step .det{display:none;margin-top:5px;padding:6px 9px;border-radius:8px;background:var(--panel2);font-size:11.5px;line-height:1.4}
.rigp .step.open .det{display:block}
.rigp .step .det dt{color:var(--mut);display:inline;margin-right:6px}.rigp .step .det dd{display:inline;margin:0}
.rigp .step .det div{margin:2px 0}
.rigp .tag{display:inline-block;font-family:var(--font-mono);font-size:10px;padding:1px 5px;border-radius:6px;background:var(--panel3);color:#bcc7d6}
.rigp .legend{display:flex;gap:10px;flex-wrap:wrap;color:var(--mut);font-size:11px;margin-top:8px}
.rigp .legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px;vertical-align:-1px}
@media (max-width:900px){.rigp .lanes{grid-template-columns:1fr}.rigp .hdet dl{grid-template-columns:1fr}.rigp .hh .hr{margin-left:0}
  .rigp table.skt{table-layout:fixed}.rigp .skt th.thname{width:34%}.rigp .skt th.thnum{width:64px}
  .rigp .skt td,.rigp .skt th{white-space:normal}.rigp .skt td.k{white-space:normal;overflow-wrap:anywhere;word-break:normal}
  .rigp .pill{white-space:normal}.rigp .now span{overflow-wrap:anywhere}}
@media (prefers-reduced-motion:reduce){.rigp *,.rigp section{animation:none!important;transition:none!important}
  .rigp section{opacity:1;transform:none}.rigp .rail i{display:none}}

/* ── ВЫКАТ НА ПРОД ПО РУБИЛЬНИКУ (HARN-1505, прототип HARN-1448-задача-выката-финал) ─────────────────────────────────
   Всё под префиксом `rl-`: классы прототипа (.st, .now, .pipe, .card) заняты сайтом. Появляется только у проекта с
   включённым рубильником «Прод-стейдж». */
.rl-badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;padding:1px 8px;border-radius:999px;border:1px solid #23607a;color:#4cc9f0;background:#0f1d26;letter-spacing:.02em;margin-left:6px;vertical-align:1px}
@property --rl-a{syntax:"<angle>";inherits:false;initial-value:0deg}
.kcard.rl-card{border:1.5px solid transparent;background:linear-gradient(#161b24,#161b24) padding-box,var(--rl-ring) border-box}
.kcard.rl-run{--rl-ring:conic-gradient(from var(--rl-a),#4cc9f0,#5fd36a,#1b2a36 40%,#1b2a36 60%,#4cc9f0);animation:rl-spin 3s linear infinite}
.kcard.rl-wait{--rl-ring:conic-gradient(from var(--rl-a),#e0b04b,#7a5d23 40%,#2a2414 60%,#e0b04b);animation:rl-spin 4s linear infinite}
.kcard.rl-fail{--rl-ring:linear-gradient(#ff6b6b,#ff6b6b)}
.kcard.rl-done{--rl-ring:linear-gradient(#2d3542,#2d3542)}
.kcard.rl-plan{--rl-ring:repeating-linear-gradient(90deg,#23607a 0 8px,transparent 8px 14px)}
@keyframes rl-spin{to{--rl-a:360deg}}
.rl-mini{border-top:1px dashed #243040;padding-top:8px;margin-top:8px;display:flex;flex-direction:column;gap:5px}
.rl-ms{display:grid;grid-template-columns:repeat(6,1fr);gap:3px}
.rl-ms i{height:6px;border-radius:3px;background:#262e3a}
.rl-ms i.passed{background:#5fd36a}.rl-ms i.running{background:#4cc9f0;animation:rl-blink 1.2s infinite}
.rl-ms i.waiting{background:#e0b04b;animation:rl-blink 1.6s infinite}.rl-ms i.failed{background:#ff6b6b}
@keyframes rl-blink{50%{opacity:.35}}
.rl-mc{display:flex;justify-content:space-between;gap:8px;font-size:11.5px;color:#8a93a6}.rl-mc b{font-weight:600}
.rl-ok{color:#5fd36a}.rl-run{color:#4cc9f0}.rl-wait{color:#e0b04b}.rl-fail{color:#ff6b6b}
@media (prefers-reduced-motion:reduce){.kcard.rl-run,.kcard.rl-wait,.rl-ms i,.rl-st .rl-p{animation:none!important}}
.rl-pop{display:flex;flex-direction:column;gap:16px}
.rl-mh h2{margin:0}
.rl-state{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:3px 10px;border-radius:999px;border:1px solid #2d3542}
.rl-state.run{color:#4cc9f0;border-color:#23607a}.rl-state.wait{color:#e0b04b;border-color:#7a5d23}.rl-state.fail{color:#ff6b6b;border-color:#6a2b2b}.rl-state.done{color:#5fd36a;border-color:#2a5c33}.rl-state.plan{color:#8a93a6}
.rl-sec{font-size:12px;color:#8a93a6;text-transform:uppercase;letter-spacing:.07em;margin-bottom:6px}
.rl-wave{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.rl-w{font-size:12px;border:1px solid #2d3542;border-radius:8px;padding:3px 8px;background:#141922}
.rl-w b{font-weight:500;margin-right:4px}.rl-w.ok b{color:#5fd36a}
.rl-pipe{background:#080b10;border:1px solid #1d4b5c;border-radius:12px;padding:14px 16px 10px;overflow-x:auto}
.rl-pipe-h{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.rl-name{font-family:var(--mono,ui-monospace,monospace);font-weight:700;font-size:15px}
.rl-what{color:#8a93a6;font-size:12.5px;width:100%}
.rl-strip{position:relative;display:grid;grid-template-columns:repeat(6,minmax(90px,1fr));margin-top:16px;min-width:560px}
.rl-rail{position:absolute;top:8px;height:3px;background:#3a4250;border-radius:2px}
.rl-fill{position:absolute;top:8px;height:3px;background:#5fd36a;border-radius:2px}
.rl-st{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;z-index:1;cursor:pointer}
.rl-st .rl-p{width:19px;height:19px;border-radius:50%;background:#3a4250;border:3px solid #080b10;display:grid;place-items:center;font-size:10px;color:#080b10;font-weight:700}
.rl-st .rl-n{font-family:var(--mono,ui-monospace,monospace);font-size:12px;color:#5f6878;text-align:center;line-height:1.25}
.rl-st .rl-h{font-size:10.5px;color:#5f6878;text-align:center;line-height:1.3;max-width:130px}
.rl-st.passed .rl-p{background:#5fd36a}.rl-st.passed .rl-n{color:#5fd36a}
.rl-st.running .rl-p{background:#4cc9f0;animation:rl-pulse 1.4s infinite}.rl-st.running .rl-n{color:#4cc9f0;font-weight:700}
.rl-st.waiting .rl-p{background:#e0b04b}.rl-st.waiting .rl-n{color:#e0b04b;font-weight:700}
.rl-st.failed .rl-p{background:#ff6b6b}.rl-st.failed .rl-n{color:#ff6b6b;font-weight:700}
.rl-st.sel .rl-n{text-decoration:underline;text-underline-offset:4px}.rl-st.sel .rl-p{outline:2px solid #cfe3ff;outline-offset:2px}
.rl-st:focus-visible{outline:2px solid #5fb0ff;outline-offset:2px}
@keyframes rl-pulse{0%{box-shadow:0 0 0 0 rgba(76,201,240,.55)}70%{box-shadow:0 0 0 8px rgba(76,201,240,0)}100%{box-shadow:0 0 0 0 rgba(76,201,240,0)}}
.rl-groups{display:grid;grid-template-columns:1fr 2fr 3fr;gap:6px;margin-top:10px;min-width:560px}
.rl-groups div{font-size:10.5px;color:#5f6878;text-transform:uppercase;letter-spacing:.07em;text-align:center;border-top:1px solid #232a35;padding-top:5px}
.rl-now{border-radius:12px;padding:12px 14px;border:1px solid #2d3542;background:#141922}
.rl-now.run{border-color:#23607a}.rl-now.wait{border-color:#7a5d23;background:#1a160c}.rl-now.fail{border-color:#6a2b2b;background:#1a0f11}.rl-now.ok{border-color:#2a5c33}
.rl-big{font-size:15px;font-weight:600}
.rl-txt{color:#8a93a6;font-size:13px;margin-top:3px;max-width:62ch}
.rl-cmdl{display:flex;gap:8px;align-items:center;margin-top:10px;flex-wrap:wrap}
.rl-cmdl code{font:600 14px var(--mono,ui-monospace,monospace);background:#05070a;color:#cfe3da;border:1px solid #2d3542;border-radius:8px;padding:8px 12px}
.rl-selcard{background:#141922;border:1px solid #232a35;border-radius:12px;padding:12px 14px}
.rl-sub{display:flex;flex-direction:column;gap:4px;margin-top:8px;font-family:var(--mono,ui-monospace,monospace);font-size:12px}
.rl-tscroll{overflow-x:auto}
.rl-list{width:100%;border-collapse:collapse;font-size:13px}
.rl-list td,.rl-list th{padding:7px 8px;border-bottom:1px solid #232a35;vertical-align:top;text-align:left}
.rl-list th{color:#8a93a6;font-weight:500;font-size:12px}
.rl-list td.num{font-family:var(--mono,ui-monospace,monospace);color:#5f6878;width:28px}
.rl-list tr.cur td{background:#101a22}.rl-list tr.curw td{background:#1a160c}.rl-list tr.curf td{background:#1a0f11}
.rl-t{white-space:nowrap;color:#8a93a6}
.rl-sdot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:1px;background:#3a4250}
.rl-sdot.passed{background:#5fd36a}.rl-sdot.running{background:#4cc9f0}.rl-sdot.waiting{background:#e0b04b}.rl-sdot.failed{background:#ff6b6b}
.rl-src{font-size:12px;color:#8a93a6;white-space:nowrap}
.rl-hh{display:flex;gap:10px;align-items:center;font-size:12.5px;color:#8a93a6;flex-wrap:wrap}
.rl-log{background:#06080c;border:1px solid #232a35;border-radius:10px;padding:10px 12px;font-family:var(--mono,ui-monospace,monospace);font-size:12px;line-height:1.7;max-height:320px;overflow:auto}
.rl-l{display:flex;gap:10px}.rl-l i{font-style:normal;color:#5f6878;flex:none}
.rl-stageblk{background:#10141b;border:1px solid #232a35;border-radius:12px;padding:12px 14px;margin:0 0 12px}
.rl-sp{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.rl-cardline{font-size:12.5px;color:#8a93a6;margin-top:4px;display:flex;align-items:center;gap:6px}