/* ==========================================================================
   mtplane — style.css
   Токены и компоненты 1:1 по DESIGN.md / specs/components.md.
   Порядок: токены → база → утилиты → шелл → компоненты → страницы → адаптив.
   ========================================================================== */

/* ---------- 1. Токены (DESIGN §2–§4) ---------- */
:root {
  --bg:#0E1116; --bg-sunken:#0A0D11; --surface:#151A21; --surface-2:#1B222B; --surface-3:#222B36;
  --line:#232B36; --line-strong:#354052;
  --ink:#E8EDF4; --ink-2:#A7B2C2; --ink-3:#8A96A8; --ink-inv:#0B0E12;

  --accent-100:#FFE0F1; --accent-300:#FF9FD0; --accent-500:#E0559F; --accent-600:#C23E85;
  --accent-tint:rgba(224,85,159,.12); --focus:#FF9FD0;

  --st-ok-t:#3FD97F;   --st-ok-b:#142A1F;   --st-ok-bd:#22503A;
  --st-info-t:#58A6FF; --st-info-b:#16233A; --st-info-bd:#27436B;
  --st-warn-t:#F0B429; --st-warn-b:#2A2417; --st-warn-bd:#55491F;
  --st-err-t:#FF6B6B;  --st-err-b:#2A1A1D;  --st-err-bd:#5C2C31;
  --st-mute-t:#A7B2C2; --st-mute-b:#1E2530; --st-mute-bd:#333D4B;

  --btn-primary-bg:#E8EDF4; --btn-danger-bg:#C93B41; --btn-ok-bg:#3FD97F; --btn-warn-bg:#F0B429;

  --font-sans:-apple-system,"Segoe UI",Roboto,"Inter","Helvetica Neue",Arial,sans-serif;
  --font-mono:ui-monospace,"JetBrains Mono","SF Mono","Cascadia Mono",Menlo,Consolas,monospace;

  --fs-display:clamp(22px,2.2vw,26px); --fs-title:17px; --fs-sub:14px; --fs-body:14px;
  --fs-table:13px; --fs-small:12.5px; --fs-micro:11.5px; --fs-mono:12.5px; --fs-stat:30px;

  --sp-1:2px; --sp-2:4px; --sp-3:6px; --sp-4:8px; --sp-5:12px; --sp-6:16px;
  --sp-7:20px; --sp-8:24px; --sp-9:32px; --sp-10:40px; --sp-11:48px;

  --r-xs:4px; --r-sm:6px; --r-md:8px; --r-lg:10px; --r-full:999px;

  --sh-none:none;
  --sh-menu:0 4px 14px rgba(0,0,0,.45);
  --sh-modal:0 12px 40px rgba(0,0,0,.55);
  --sh-toast:0 6px 24px rgba(0,0,0,.5);

  --z-base:0; --z-sticky-th:10; --z-sticky-bar:20; --z-dropdown:30;
  --z-drawer:40; --z-modal:50; --z-toast:60; --z-tooltip:70;

  --topbar-h:56px; --side-w:232px; --row-h:36px; --filters-h:58px;
}

/* ---------- 2. База ---------- */
* { box-sizing:border-box; }
html { scroll-padding-top:calc(var(--topbar-h) + 8px); }
html,body { margin:0; }
body {
  background:var(--bg); color:var(--ink);
  font:var(--fs-body)/1.55 var(--font-sans);
  -webkit-font-smoothing:antialiased;
}
a { color:inherit; text-decoration:none; }
a:hover { text-decoration:underline; text-decoration-color:var(--accent-300); text-underline-offset:3px; }
:focus-visible { outline:2px solid var(--focus); outline-offset:2px; border-radius:var(--r-xs); }
h1,h2,h3 { text-wrap:balance; }
p { text-wrap:pretty; }
code,pre,.mono { font-family:var(--font-mono); font-size:var(--fs-mono); }
img,svg { vertical-align:middle; }
dialog { color:var(--ink); }
::selection { background:var(--accent-tint); }

/* ---------- 3. Утилиты ---------- */
.num { font-variant-numeric:tabular-nums; text-align:right; }
.mono-cell { font-family:var(--font-mono); font-size:var(--fs-mono); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
/* таблицы не сжимаются ниже min-content: фиксируем раскладку, иначе .sr-only растягивает документ */
table.sr-only { table-layout:fixed; }
.skip {
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--surface-2); color:var(--ink); padding:8px 12px; border-radius:var(--r-md);
}
.skip:focus { left:12px; top:12px; }
.u-ok { color:var(--st-ok-t); }
.u-warn { color:var(--st-warn-t); }
.u-err { color:var(--st-err-t); }
.u-info { color:var(--st-info-t); }
.u-mute { color:var(--ink-3); }
.js-live--contents { display:contents; }

/* ---------- 4. Иконки ---------- */
.ic { width:16px; height:16px; flex:none; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.ic-lg { width:18px; height:18px; }
.ic-xl { width:24px; height:24px; }

/* ---------- 5. Шелл (C01) ---------- */
.c-shell { display:grid; grid-template-columns:var(--side-w) 1fr; min-height:100vh; }
.c-side {
  position:sticky; top:0; height:100vh; overflow-y:auto; z-index:var(--z-drawer);
  background:var(--surface); border-right:1px solid var(--line);
  display:flex; flex-direction:column; gap:var(--sp-3); padding:var(--sp-4) var(--sp-3);
}
.c-brand {
  display:flex; align-items:center; gap:var(--sp-4); height:48px; padding:0 var(--sp-4);
  font-weight:800; font-size:17px; letter-spacing:.2px; flex:none;
}
.c-brand svg { color:var(--accent-500); }
.c-brand i { font-style:normal; color:var(--accent-300); }
.c-nav { display:flex; flex-direction:column; gap:2px; }
.c-nav__group {
  margin:var(--sp-5) var(--sp-4) var(--sp-2);
  font:600 var(--fs-micro)/1.3 var(--font-sans); text-transform:uppercase; letter-spacing:.04em; color:var(--ink-3);
}
.c-nav a {
  display:flex; align-items:center; gap:var(--sp-4); height:34px; padding:0 var(--sp-4);
  border-radius:var(--r-md); color:var(--ink-2); font-weight:500; border-left:2px solid transparent;
}
.c-nav a:hover { background:var(--surface-2); color:var(--ink); text-decoration:none; }
.c-nav a[aria-current] { background:var(--accent-tint); color:var(--ink); border-left-color:var(--accent-500); }
.c-nav a .cnt { margin-left:auto; font-size:var(--fs-small); font-weight:600; color:var(--st-err-t); }
.c-nav a .cnt[data-tone=ok] { color:var(--st-ok-t); }
.c-nav a .cnt[data-tone=warn] { color:var(--st-warn-t); }
.c-side__foot {
  margin-top:auto; border-top:1px solid var(--line);
  padding:var(--sp-4) var(--sp-4) var(--sp-2);
  display:flex; align-items:center; gap:var(--sp-4); color:var(--ink-2); font-size:var(--fs-small);
}
.c-side__foot form { margin:0 0 0 auto; }
.c-side__foot .c-iconbtn { margin-left:auto; }

.c-main { display:flex; flex-direction:column; min-width:0; }
.c-topbar {
  position:sticky; top:0; z-index:var(--z-sticky-bar); height:var(--topbar-h);
  display:flex; align-items:center; gap:var(--sp-5); padding:0 var(--sp-7);
  background:var(--surface); border-bottom:1px solid var(--line);
}
.c-topbar h1 { margin:0; font-size:var(--fs-display); font-weight:700; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.c-topbar__right { margin-left:auto; display:flex; align-items:center; gap:var(--sp-6); }
.c-burger { display:none; background:none; border:0; color:var(--ink-2); cursor:pointer; padding:var(--sp-3); border-radius:var(--r-md); }
.c-burger:hover { background:var(--surface-2); color:var(--ink); }
.c-content {
  max-width:1440px; width:100%; margin:0 auto; padding:var(--sp-7);
  display:flex; flex-direction:column; gap:var(--sp-6); flex:1; min-width:0;
}
.c-foot { padding:var(--sp-5) var(--sp-7) var(--sp-8); color:var(--ink-3); font-size:var(--fs-small); }
.c-foot__sep { opacity:1; }
.c-backdrop { display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:calc(var(--z-drawer) - 1); }

/* C22 — индикатор авто-обновления */
.c-live {
  display:flex; align-items:center; gap:var(--sp-3); color:var(--ink-2); font-size:var(--fs-small);
  background:none; border:0; cursor:pointer; padding:var(--sp-2) var(--sp-3); border-radius:var(--r-md);
  font-family:var(--font-sans);
}
.c-live:hover { background:var(--surface-2); color:var(--ink); }
.c-live .dot { width:7px; height:7px; border-radius:var(--r-full); background:var(--st-ok-t); animation:pulse 2s ease-in-out infinite; flex:none; }
.c-live[data-state=paused] .dot { background:var(--st-warn-t); }
.c-live[data-state=error] .dot { background:var(--st-err-t); }
.c-live[data-state=off] .dot { background:var(--ink-3); animation:none; }
.c-live[hidden] { display:none; }

/* C21 — заголовок страницы / крошки */
.c-pagehead { display:flex; flex-direction:column; gap:var(--sp-3); }
.crumbs { display:flex; align-items:center; gap:var(--sp-3); font-size:var(--fs-small); color:var(--ink-3); }
.crumbs a { color:var(--ink-3); }
.crumbs a:hover { color:var(--ink); }
.crumbs .sep { color:var(--ink-3); opacity:.6; }
.crumbs [aria-current] { color:var(--ink-2); }
.c-pagehead__row { display:flex; align-items:center; gap:var(--sp-6); flex-wrap:wrap; }
.c-pagehead__row h1 { margin:0; font-size:var(--fs-display); font-weight:700; letter-spacing:-.01em; display:flex; align-items:center; gap:var(--sp-4); flex-wrap:wrap; }
.c-pagehead__actions { margin-left:auto; display:flex; align-items:center; gap:var(--sp-4); flex-wrap:wrap; }
.c-pagehead__actions .c-sep { width:1px; height:20px; background:var(--line-strong); margin:0 var(--sp-2); }
.c-pagehead__sub { color:var(--ink-3); font-size:var(--fs-small); }
.c-pagehead__sub a { color:var(--ink-2); text-decoration:underline; text-decoration-color:var(--line-strong); text-underline-offset:3px; }

/* ---------- 6. Кнопки (C05) ---------- */
.c-btn {
  display:inline-flex; align-items:center; gap:var(--sp-3); height:32px; padding:0 var(--sp-5);
  border-radius:var(--r-md); border:1px solid var(--line-strong); background:var(--surface-2);
  color:var(--ink); font:500 var(--fs-body)/1 var(--font-sans); cursor:pointer;
  transition:background .12s, border-color .12s; white-space:nowrap; user-select:none;
}
.c-btn:hover { background:var(--surface-3); text-decoration:none; }
.c-btn:active { transform:translateY(1px); }
.c-btn[disabled], .c-btn[aria-disabled=true] { opacity:.45; cursor:not-allowed; }
.c-btn[disabled]:hover { background:var(--surface-2); }
.c-btn--primary { background:var(--btn-primary-bg); border-color:transparent; color:var(--ink-inv); }
.c-btn--primary:hover { background:#fff; }
.c-btn--primary:active { background:#DDE3EC; }
.c-btn--danger { background:var(--btn-danger-bg); border-color:transparent; color:#fff; }
.c-btn--danger:hover { background:#D8494F; }
.c-btn--danger:active { background:#B33338; }
.c-btn--warn { background:transparent; border-color:var(--st-warn-bd); color:var(--st-warn-t); }
.c-btn--warn:hover { background:var(--st-warn-b); }
.c-btn--ghost { background:transparent; border-color:transparent; color:var(--ink-2); }
.c-btn--ghost:hover { background:var(--surface-2); color:var(--ink); }
.c-btn--sm { height:26px; padding:0 9px; font-size:var(--fs-small); border-radius:var(--r-sm); }
.c-btn--icon { width:32px; padding:0; justify-content:center; }
.c-btn--icon.c-btn--sm { width:26px; }
.c-btn.is-loading { position:relative; pointer-events:none; }
.c-btn.is-loading::before {
  content:""; width:14px; height:14px; flex:none; border-radius:50%;
  border:2px solid currentColor; border-right-color:transparent;
  animation:spin .8s linear infinite;
}
.c-btn--icon.is-loading::before { position:absolute; inset:50% auto auto 50%; margin:-7px 0 0 -7px; }
.c-btn--icon.is-loading > svg { visibility:hidden; }
.c-iconbtn {
  width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:0; border-radius:var(--r-sm); color:var(--ink-3); cursor:pointer; padding:0;
  transition:background .12s, color .12s;
}
.c-iconbtn:hover { background:var(--surface-3); color:var(--ink); }
.c-iconbtn--danger:hover { color:var(--st-err-t); }
.c-iconbtn--warn:hover { color:var(--st-warn-t); }
.cell-ellip { display:inline-block; max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:middle; }
.c-iconbtn.is-loading { position:relative; pointer-events:none; }
.c-iconbtn.is-loading::before {
  content:""; position:absolute; inset:50% auto auto 50%; width:12px; height:12px; margin:-6px 0 0 -6px;
  border-radius:50%; border:2px solid currentColor; border-right-color:transparent; animation:spin .8s linear infinite;
}
.c-iconbtn.is-loading > svg { visibility:hidden; }

/* ---------- 7. Поля форм (C06–C08) ---------- */
.c-field { display:flex; flex-direction:column; gap:var(--sp-2); min-width:0; }
.c-field__lbl { font-size:var(--fs-small); color:var(--ink-2); }
.c-field__req { color:var(--st-err-t); }
.c-field__hint { font-size:var(--fs-small); color:var(--ink-3); margin:0; }
.c-field__err { font-size:var(--fs-small); color:var(--st-err-t); margin:0; display:flex; align-items:center; gap:var(--sp-2); }
.c-field__err:empty { display:none; }
.c-input, .c-select, .c-textarea {
  width:100%; height:34px; padding:0 10px; border-radius:var(--r-md);
  background:var(--bg-sunken); border:1px solid var(--line-strong); color:var(--ink);
  font:var(--fs-body)/1.4 var(--font-sans);
}
.c-input:hover, .c-select:hover, .c-textarea:hover { border-color:#3F4B5F; }
.c-input:focus, .c-select:focus, .c-textarea:focus {
  outline:none; border-color:var(--focus); box-shadow:0 0 0 3px rgba(255,159,208,.18);
}
.c-input::placeholder, .c-textarea::placeholder { color:#8A96A8; }
.c-input[aria-invalid=true], .c-select[aria-invalid=true], .c-textarea[aria-invalid=true] {
  border-color:var(--st-err-bd); box-shadow:0 0 0 3px rgba(255,107,107,.14);
}
.c-input:disabled, .c-select:disabled, .c-textarea:disabled { opacity:.5; cursor:not-allowed; }
.c-input[readonly], .c-textarea[readonly] { background:var(--surface); border-color:var(--line); }
.c-select {
  appearance:none; padding-right:30px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237C8899' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 9px center;
}
.c-select option { background:var(--surface-2); color:var(--ink); }
.c-textarea { height:auto; min-height:88px; padding:8px 10px; resize:vertical; }
.c-textarea--mono { font-family:var(--font-mono); font-size:var(--fs-mono); line-height:1.6; tab-size:2; }
.c-field--inline { flex-direction:row; align-items:center; gap:var(--sp-4); }
/* P07 — селект тарифа + кнопка «Обновить список» */
.c-config-pick { display:flex; gap:var(--sp-3); align-items:center; }
.c-config-pick .c-select { flex:1 1 auto; min-width:0; }
.c-config-pick .c-btn { flex:0 0 auto; white-space:nowrap; }
/* P14 — пикер локаций/регионов (порядок ротации) и живая цена */
.c-locpick[hidden], .c-field__err[hidden] { display:none; }
.c-locpick { display:flex; flex-direction:column; gap:var(--sp-4); border:1px solid var(--line); border-radius:var(--r-md); padding:var(--sp-4) var(--sp-5); background:var(--bg-sunken); }
.c-locpick__list { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:var(--sp-3) var(--sp-5); }
.c-locpick__item { display:flex; align-items:center; gap:var(--sp-3); font-size:var(--fs-body); cursor:pointer; min-width:0; }
.c-locpick__item input { accent-color:var(--accent-500); width:16px; height:16px; margin:0; cursor:pointer; flex:none; }
.c-locpick__item.is-off { color:var(--ink-3); cursor:not-allowed; }
.c-locpick__item.is-off input { cursor:not-allowed; }
.c-locpick__ord { display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 var(--sp-2); border-radius:var(--r-full); background:var(--accent-tint); color:var(--accent-300); font:600 var(--fs-micro)/1 var(--font-sans); flex:none; }
/* скрытый, но занимает место: подписи локаций не прыгают при отметке */
.c-locpick__ord[hidden] { display:inline-flex; visibility:hidden; }
.c-locpick__name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.c-locpick__meta { color:var(--ink-3); font-size:var(--fs-small); flex:none; }
.c-locpick__bar { display:flex; align-items:center; gap:var(--sp-4); flex-wrap:wrap; }
.c-locpick__preview { color:var(--ink-2); font-size:var(--fs-small); }
.c-price { margin:0; font-size:var(--fs-body); color:var(--ink); }
.c-price.is-muted { color:var(--ink-3); }
.c-price [data-estimate-value] { font-variant-numeric:tabular-nums; }
.c-formgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:var(--sp-5); align-items:start; }
.c-formgrid--2 { grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.c-fieldset { border:1px solid var(--line); border-radius:var(--r-md); padding:var(--sp-5) var(--sp-6) var(--sp-6); margin:0; display:flex; flex-direction:column; gap:var(--sp-5); }
.c-fieldset > legend { font-size:var(--fs-sub); font-weight:600; padding:0 var(--sp-2); }

/* C09 — чекбокс / switch */
.c-check { display:inline-flex; align-items:center; gap:var(--sp-4); font-size:var(--fs-body); cursor:pointer; }
.c-check input { accent-color:var(--accent-500); width:16px; height:16px; margin:0; cursor:pointer; }
.c-check input:disabled { opacity:.5; }
.c-switch { display:inline-flex; align-items:center; gap:var(--sp-4); cursor:pointer; font-size:var(--fs-body); }
.c-switch input { appearance:none; width:34px; height:20px; border-radius:var(--r-full); background:var(--surface-3); position:relative; margin:0; cursor:pointer; transition:background .12s; flex:none; }
.c-switch input::after { content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:var(--ink-2); transition:transform .12s, background .12s; }
.c-switch input:checked { background:var(--st-ok-bg); }
.c-switch input:checked::after { transform:translateX(14px); background:var(--st-ok-t); }
.c-switch input:disabled { opacity:.5; cursor:not-allowed; }

/* ---------- 8. Бейджи (C04) и чипы (C16) ---------- */
.c-badge {
  display:inline-flex; align-items:center; gap:var(--sp-2); height:22px; padding:0 var(--sp-4);
  border-radius:var(--r-xs); border:1px solid var(--st-mute-bd); background:var(--st-mute-b);
  color:var(--st-mute-t); font:600 var(--fs-micro)/1 var(--font-sans); white-space:nowrap;
}
.c-badge .ic { width:12px; height:12px; stroke-width:2; }
/* совместимость со statusClass: st-green|st-blue|st-orange|st-red|st-gray */
.c-badge.st-green { color:var(--st-ok-t); background:var(--st-ok-b); border-color:var(--st-ok-bd); }
.c-badge.st-blue { color:var(--st-info-t); background:var(--st-info-b); border-color:var(--st-info-bd); }
.c-badge.st-orange { color:var(--st-warn-t); background:var(--st-warn-b); border-color:var(--st-warn-bd); }
.c-badge.st-red { color:var(--st-err-t); background:var(--st-err-b); border-color:var(--st-err-bd); }
.c-badge.st-gray { color:var(--st-mute-t); background:var(--st-mute-b); border-color:var(--st-mute-bd); }
/* data-st — приоритетнее (обновления из JS) */
.c-badge[data-st=ok] { color:var(--st-ok-t); background:var(--st-ok-b); border-color:var(--st-ok-bd); }
.c-badge[data-st=info] { color:var(--st-info-t); background:var(--st-info-b); border-color:var(--st-info-bd); }
.c-badge[data-st=warn] { color:var(--st-warn-t); background:var(--st-warn-b); border-color:var(--st-warn-bd); }
.c-badge[data-st=err] { color:var(--st-err-t); background:var(--st-err-b); border-color:var(--st-err-bd); }
.c-badge[data-st=mute] { color:var(--st-mute-t); background:var(--st-mute-b); border-color:var(--st-mute-bd); }
.c-badge.is-pulse::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; animation:pulse 1.6s ease-in-out infinite; flex:none; }
.c-badge.is-solid { border-color:transparent; }
.c-chip {
  display:inline-flex; align-items:center; gap:var(--sp-3); height:26px; padding:0 10px;
  border-radius:var(--r-full); border:1px solid var(--line-strong); background:var(--surface-2);
  color:var(--ink-2); font:500 var(--fs-small)/1 var(--font-sans); cursor:pointer; white-space:nowrap;
}
.c-chip:hover { background:var(--surface-3); color:var(--ink); text-decoration:none; }
.c-chip[aria-pressed=true], .c-chip.is-active { background:var(--surface-3); color:var(--ink); border-color:var(--line-strong); }
.c-chip[aria-pressed=true][data-st=err] { border-color:var(--st-err-bd); color:var(--st-err-t); }
.c-chip[aria-pressed=true][data-st=warn] { border-color:var(--st-warn-bd); color:var(--st-warn-t); }
.c-chip[aria-pressed=true][data-st=ok] { border-color:var(--st-ok-bd); color:var(--st-ok-t); }
.c-chip[aria-pressed=true][data-st=info] { border-color:var(--st-info-bd); color:var(--st-info-t); }
.c-chip .cnt { font-variant-numeric:tabular-nums; opacity:.75; }
.c-chip--static { cursor:default; border-radius:var(--r-xs); height:22px; font-size:var(--fs-micro); }
.c-chip--static:hover { background:var(--surface-2); color:var(--ink-2); }

/* ---------- 9. Stat-полоса (C02) ---------- */
.c-stats {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
}
.c-stat { padding:var(--sp-6) var(--sp-7); border-left:1px solid var(--line); display:block; min-width:0; }
.c-stat:first-child { border-left:0; }
a.c-stat:hover { background:var(--surface-2); text-decoration:none; }
.c-stat__num {
  font-size:var(--fs-stat); font-weight:750; line-height:1.1;
  font-variant-numeric:tabular-nums; display:flex; align-items:center; gap:var(--sp-4); color:var(--ink);
}
.c-stat__lbl { margin-top:var(--sp-1); color:var(--ink-2); font-size:var(--fs-small); display:block; }
.c-stat__sub { margin-top:var(--sp-1); color:var(--ink-3); font-size:var(--fs-micro); display:block; }
.c-stat[data-tone=ok]   .c-stat__num { color:var(--st-ok-t); }
.c-stat[data-tone=warn] .c-stat__num { color:var(--st-warn-t); }
.c-stat[data-tone=err]  .c-stat__num { color:var(--st-err-t); }
.c-stat[data-tone=info] .c-stat__num { color:var(--st-info-t); }
.c-stat[data-tone=mute] .c-stat__num { color:var(--st-mute-t); }
.c-stat.is-stale .c-stat__num { color:var(--ink-2); }
.c-stat__go { margin-left:auto; color:var(--ink-3); opacity:0; transition:opacity .12s; }
.c-stat:hover .c-stat__go, .c-stat:focus-visible .c-stat__go { opacity:1; }
.c-stat__skel { display:inline-block; width:var(--sp-9); height:24px; border-radius:var(--r-xs); background:var(--surface-2); animation:skel 1.4s ease-in-out infinite; }

/* ---------- 10. Карточки ---------- */
.c-card, .card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--sp-6) var(--sp-7); min-width:0; }
.c-card__head, .card__head { display:flex; align-items:center; gap:var(--sp-5); margin-bottom:var(--sp-5); flex-wrap:wrap; }
.c-card__head h2, .card__head h2, .card__head h3 { margin:0; font-size:var(--fs-title); font-weight:650; }
.c-card__head .right, .card__head .right { margin-left:auto; display:flex; gap:var(--sp-4); align-items:center; flex-wrap:wrap; }
.c-card__head .sub, .card__head .sub { color:var(--ink-3); font-size:var(--fs-small); }
.c-card__note { margin:var(--sp-5) 0 0; color:var(--ink-3); font-size:var(--fs-small); }
.c-card__foot { margin-top:var(--sp-5); padding-top:var(--sp-5); border-top:1px solid var(--line); display:flex; align-items:center; gap:var(--sp-4); }

/* ---------- 11. Таблицы (C03) ---------- */
/* шапка таблицы липнет под фильтр-баром (C16), а не под ним скрытно */
.c-filters + .c-table__wrap .c-table thead th { top:calc(var(--topbar-h) + var(--filters-h)); }
/* Липкая шапка и overflow у обёртки несовместимы: внутри скролл-контейнера sticky
   отсчитывает top от него, а не от вьюпорта, и на scrollY=0 съезжает вниз на свою
   высоту, накрывая первую строку. Поэтому overflow включаем точечно: на узких
   экранах (там шапка не липнет) и широким таблицам — класс is-scroll-x ставит app.js.
   Правила идут после .c-filters + …: одинаковая специфичность. */
.c-table__wrap { overscroll-behavior-x:contain; }
/* m10: аффорданс «есть ещё колонки» при внутреннем скролле — тень у краёв.
   Крышки (local) скроллятся с контентом и скрывают тень на достигнутом крае. */
.c-table__wrap.is-scroll-x {
  overflow-x:auto; overflow-y:clip;
  background:
    linear-gradient(to right, var(--surface) 30%, rgba(21,26,33,0)) left center / 32px 100% no-repeat local,
    linear-gradient(to left, var(--surface) 30%, rgba(21,26,33,0)) right center / 32px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.45), rgba(0,0,0,0)) left center / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.45), rgba(0,0,0,0)) right center / 14px 100% no-repeat scroll;
}
.c-table__wrap.is-scroll-x .c-table thead th { top:0; }
@media (max-width:899px) {
  .c-table__wrap {
    overflow-x:auto; overflow-y:clip;
    background:
      linear-gradient(to right, var(--surface) 30%, rgba(21,26,33,0)) left center / 32px 100% no-repeat local,
      linear-gradient(to left, var(--surface) 30%, rgba(21,26,33,0)) right center / 32px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.45), rgba(0,0,0,0)) left center / 14px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.45), rgba(0,0,0,0)) right center / 14px 100% no-repeat scroll;
  }
}
.c-card > .c-table__wrap { margin:0 calc(var(--sp-7) * -1) calc(var(--sp-6) * -1); }
.c-card > .c-table__wrap:last-child { margin-bottom:calc(var(--sp-6) * -1); }
.c-table { width:100%; border-collapse:collapse; font-size:var(--fs-table); }
.c-table caption { text-align:left; }
.c-table th {
  text-align:left;
  padding:6px 12px; background:var(--surface-2); color:var(--ink-3);
  font:600 var(--fs-micro)/1.3 var(--font-sans); text-transform:uppercase; letter-spacing:.04em;
  border-bottom:1px solid var(--line); white-space:nowrap;
}
/* Липнет ТОЛЬКО шапка таблицы (C03). position:sticky на всех `.c-table th`
   задевал и tbody-th (`th.rowhead`): sticky считается от скроллпорта (вьюпорта),
   поэтому такие ячейки вставали на top:var(--topbar-h) и накрывали первую строку. */
.c-table thead th { position:sticky; top:var(--topbar-h); z-index:var(--z-sticky-th); }
.c-table th[aria-sort] { cursor:pointer; user-select:none; }
.c-table th[aria-sort]::after { content:"↕"; margin-left:var(--sp-2); opacity:.5; }
.c-table th[aria-sort=ascending]::after { content:"↑"; opacity:.9; }
.c-table th[aria-sort=descending]::after { content:"↓"; opacity:.9; }
.c-table td { padding:6px 12px; border-bottom:1px solid var(--line); min-height:var(--row-h); vertical-align:middle; }
.c-table tbody tr { transition:background .12s; }
.c-table tbody tr:hover { background:var(--surface-2); }
.c-table tbody tr.is-selected { background:var(--surface-3); }
.c-table tbody tr.is-updated td { background:var(--accent-tint); transition:background .9s; }
.c-table tbody tr.is-pending { background:var(--surface-2); }
.c-table tbody tr[data-level=warn] > td:first-child { box-shadow:inset 2px 0 0 var(--st-warn-bd); }
.c-table tbody tr[data-level=error] > td:first-child, .c-table tbody tr[data-level=err] > td:first-child { box-shadow:inset 2px 0 0 var(--st-err-bd); }
.c-table th.rowhead { font:inherit; text-transform:none; letter-spacing:0; color:var(--ink); font-weight:500; }
.c-table .mut, .mut { color:var(--ink-3); font-size:var(--fs-small); }
.c-table .acts, .c-table td.c-table__actions { width:1%; white-space:nowrap; text-align:right; }
.c-table td.c-table__actions form, .c-table .acts form { display:inline-flex; margin:0; }
.c-table .acts .c-iconbtn, .c-table td.c-table__actions .c-iconbtn { opacity:0; transition:opacity .12s; }
.c-table tr:hover .c-iconbtn, .c-table tr:focus-within .c-iconbtn { opacity:1; }
.c-table .c-iconbtn:focus-visible { opacity:1; }
.c-table--compact td { height:var(--row-h); }
body[data-density=comfort] { --row-h:44px; }
body[data-density=comfort] .c-table td { height:var(--row-h); padding-top:10px; padding-bottom:10px; }
.bar {
  display:inline-block; width:40px; height:3px; border-radius:var(--r-full);
  background:var(--surface-3); vertical-align:middle; margin-left:var(--sp-3); overflow:hidden;
}
.bar i { display:block; height:100%; background:var(--st-ok-t); }
.bar[data-tone=warn] i { background:var(--st-warn-t); }
.bar[data-tone=err] i { background:var(--st-err-t); }
.c-table__more { color:var(--ink-3); font-size:var(--fs-small); }
.c-table__more a { color:var(--ink-2); }

/* Раскрытие строки (M3/N9): полноширинная подстрока — контент не наезжает на соседние колонки. */
.row-more__btn {
  display:inline-flex; align-items:center; justify-content:center; vertical-align:middle;
  width:22px; height:22px; margin-left:var(--sp-3); padding:0; border:0; background:none;
  border-radius:var(--r-sm); color:var(--ink-3); cursor:pointer;
}
.row-more__btn:hover { background:var(--surface-3); color:var(--ink); }
.row-more__btn[aria-expanded=true] { color:var(--ink); background:var(--surface-3); }
.row-more-row > td { background:var(--surface-2); position:static; }
.row-more-cell { padding:8px 12px 10px; }
.row-more__kv {
  margin:0; padding:0; display:grid; gap:2px var(--sp-7);
  grid-template-columns:max-content minmax(0,1fr); text-align:left;
  font-size:var(--fs-small); font-weight:400; max-width:720px;
}
.row-more__kv dt { color:var(--ink-3); white-space:nowrap; }
.row-more__kv dd { margin:0; min-width:0; overflow-wrap:anywhere; }
.row-more__kv .cell-ellip { max-width:100%; }

/* ---------- 12. Баннер (C23) ---------- */
.c-banner {
  display:flex; align-items:flex-start; gap:var(--sp-5); padding:var(--sp-5) var(--sp-6);
  border:1px solid var(--st-warn-bd); background:var(--st-warn-b); border-radius:var(--r-lg);
}
.c-banner[data-tone=err] { border-color:var(--st-err-bd); background:var(--st-err-b); }
.c-banner[data-tone=info] { border-color:var(--st-info-bd); background:var(--st-info-b); }
.c-banner[data-tone=ok] { border-color:var(--st-ok-bd); background:var(--st-ok-b); }
.c-banner svg { margin-top:2px; flex:none; }
.c-banner[data-tone=warn] svg { color:var(--st-warn-t); }
.c-banner[data-tone=err] svg { color:var(--st-err-t); }
.c-banner[data-tone=info] svg { color:var(--st-info-t); }
.c-banner[data-tone=ok] svg { color:var(--st-ok-t); }
.c-banner__body { flex:1; min-width:0; }
.c-banner__title { font-weight:600; }
.c-banner__text { color:var(--ink-2); font-size:var(--fs-small); margin-top:2px; overflow-wrap:anywhere; }
.c-banner__text code { font-size:var(--fs-mono); }
.c-banner .c-btn, .c-banner > .c-iconbtn { margin-left:auto; flex:none; }
.c-banner details { margin-top:var(--sp-3); }
.c-banner details summary { color:var(--ink-2); font-size:var(--fs-small); cursor:pointer; }

/* ---------- 13. Табы (C13) и сегмент-контрол ---------- */
.c-tabs {
  display:flex; align-items:flex-end; gap:var(--sp-2);
  border-bottom:1px solid var(--line); overflow-x:auto; overscroll-behavior-x:contain;
}
.c-tabs a {
  display:inline-flex; align-items:center; gap:var(--sp-3); height:36px; padding:0 12px;
  color:var(--ink-2); font-size:var(--fs-sub); font-weight:500; white-space:nowrap;
  border-bottom:2px solid transparent; margin-bottom:-1px;
}
.c-tabs a:hover { background:var(--surface-2); color:var(--ink); text-decoration:none; }
.c-tabs a[aria-selected=true] { color:var(--ink); border-bottom-color:var(--accent-500); }
.c-segment { display:inline-flex; border:1px solid var(--line-strong); border-radius:var(--r-md); overflow:hidden; }
.c-segment button, .c-segment a {
  display:inline-flex; align-items:center; height:26px; padding:0 var(--sp-5);
  background:transparent; border:0; color:var(--ink-2); font:500 var(--fs-small)/1 var(--font-sans); cursor:pointer;
}
.c-segment button:hover, .c-segment a:hover { color:var(--ink); background:var(--surface-2); text-decoration:none; }
.c-segment button[aria-checked=true], .c-segment a[aria-checked=true], .c-segment a.is-active {
  background:var(--surface-3); color:var(--ink);
}
.c-segment > * + * { border-left:1px solid var(--line-strong); }

/* ---------- 14. Код (C10), редактор (C19) ---------- */
.c-code { border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--surface); }
.c-code__bar {
  display:flex; align-items:center; gap:var(--sp-4); height:34px; padding:0 var(--sp-5);
  border-bottom:1px solid var(--line); color:var(--ink-2); font-size:var(--fs-small);
}
.c-code__name { font-family:var(--font-mono); font-size:var(--fs-mono); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.c-code__bar .right { margin-left:auto; display:flex; gap:var(--sp-3); align-items:center; }
.c-code__body {
  margin:0; padding:12px; background:var(--bg-sunken); font-size:var(--fs-mono); line-height:1.5;
  max-height:420px; overflow:auto; white-space:pre; tab-size:2;
}
.c-code__body.is-tall { max-height:520px; }
.c-code--inline {
  display:inline-flex; align-items:center; gap:var(--sp-3); padding:2px 6px;
  background:var(--bg-sunken); border:1px solid var(--line); border-radius:var(--r-sm);
  font-family:var(--font-mono); font-size:var(--fs-mono);
}
.c-copy-inline { display:inline-flex; align-items:center; gap:var(--sp-3); font-family:var(--font-mono); font-size:var(--fs-mono); min-width:0; }
.c-copy-inline .js-copy { opacity:0; transition:opacity .12s; }
.c-copy-inline:hover .js-copy, .c-copy-inline:focus-within .js-copy { opacity:1; }
.c-copy-inline .ellip { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:260px; }
.c-secret { font-family:var(--font-mono); font-size:var(--fs-mono); letter-spacing:.08em; }

.c-editor { display:flex; flex-direction:column; gap:var(--sp-5); }
.c-editor__bar { display:flex; align-items:center; gap:var(--sp-4); flex-wrap:wrap; }
.c-editor__bar .name { font-family:var(--font-mono); font-size:var(--fs-small); color:var(--ink-2); }
.c-editor__dirty { display:none; align-items:center; gap:var(--sp-3); color:var(--st-warn-t); font-size:var(--fs-small); }
.c-editor.is-dirty .c-editor__dirty { display:inline-flex; }
.c-editor__bar .right { margin-left:auto; display:flex; gap:var(--sp-4); align-items:center; flex-wrap:wrap; }
.c-editor__pane {
  width:100%; min-height:420px; padding:12px; background:var(--bg-sunken); color:var(--ink);
  border:1px solid var(--line-strong); border-radius:var(--r-md); resize:vertical;
  font-family:var(--font-mono); font-size:var(--fs-mono); line-height:1.6; tab-size:2; white-space:pre; overflow:auto;
}
.c-editor__pane:focus { outline:none; border-color:var(--focus); box-shadow:0 0 0 3px rgba(255,159,208,.18); }
.c-editor__status { min-height:18px; font-size:var(--fs-small); color:var(--ink-3); display:flex; align-items:center; gap:var(--sp-3); }
.c-editor__status[data-tone=ok] { color:var(--st-ok-t); }
.c-editor__status[data-tone=err] { color:var(--st-err-t); }
.c-rev { display:flex; align-items:center; gap:var(--sp-4); padding:var(--sp-2) 0; border-bottom:1px solid var(--line); font-size:var(--fs-small); min-height:32px; }
.c-rev:last-child { border-bottom:0; }
.c-rev__time { color:var(--ink-2); white-space:nowrap; }
.c-rev__note { color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.c-rev .right { margin-left:auto; display:flex; gap:var(--sp-3); flex:none; }
/* C19: редактор + правый список ревизий (≥1100px), ниже — в столбик */
.c-editor__split { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:var(--sp-7); align-items:start; }
.c-editor__revs { min-width:0; }
@media (max-width:1099px) { .c-editor__split { grid-template-columns:1fr; } }

/* ---------- 15. Пустое состояние (C14), загрузка (C15) ---------- */
.c-empty { padding:var(--sp-10) var(--sp-6); text-align:center; color:var(--ink-2); display:flex; flex-direction:column; align-items:center; }
.c-empty > .ic { width:24px; height:24px; color:var(--ink-3); margin-bottom:var(--sp-5); }
.c-empty h3 { margin:0 0 var(--sp-2); font-size:var(--fs-sub); font-weight:600; }
.c-empty p { margin:0 0 var(--sp-5); color:var(--ink-3); font-size:var(--fs-small); max-width:420px; }
.c-empty .c-btn { margin-top:var(--sp-2); }
.c-spin {
  display:inline-block; width:15px; height:15px; border-radius:50%;
  border:2px solid var(--ink-3); border-right-color:transparent; animation:spin .8s linear infinite;
}
.c-skel { display:block; height:12px; border-radius:var(--r-xs); background:var(--surface-2); animation:skel 1.4s ease-in-out infinite; }
.c-skel--row { height:36px; border-radius:0; }
.c-chart__loading {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:var(--sp-4);
  background:rgba(21,26,33,.6); border-radius:var(--r-md); color:var(--ink-2); font-size:var(--fs-small);
}

/* ---------- 16. Тосты (C11) ---------- */
.c-toasts {
  position:fixed; right:var(--sp-6); bottom:var(--sp-6); z-index:var(--z-toast);
  display:flex; flex-direction:column; gap:var(--sp-4); width:min(380px,calc(100vw - 32px));
}
.c-toast {
  display:flex; gap:var(--sp-4); align-items:flex-start; padding:10px 12px;
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:var(--sh-toast); animation:toast-in .18s cubic-bezier(.22,1,.36,1);
}
.c-toast svg { margin-top:1px; flex:none; }
.c-toast[data-sev=ok] svg { color:var(--st-ok-t); }
.c-toast[data-sev=err] svg { color:var(--st-err-t); }
.c-toast[data-sev=info] svg { color:var(--st-info-t); }
.c-toast__msg { flex:1; font-size:var(--fs-small); overflow-wrap:anywhere; }
.c-toast__msg a { text-decoration:underline; }
.c-toast button { background:none; border:0; color:var(--ink-3); cursor:pointer; padding:2px; border-radius:var(--r-xs); }
.c-toast button:hover { color:var(--ink); background:var(--surface-3); }
.c-toast__more { color:var(--ink-3); font-size:var(--fs-small); padding-left:2px; }

/* ---------- 17. Модалка (C12) ---------- */
.c-modal {
  width:min(440px,calc(100vw - 32px)); padding:var(--sp-7); border-radius:var(--r-lg);
  background:var(--surface-2); border:1px solid var(--line-strong); color:var(--ink);
  box-shadow:var(--sh-modal);
}
.c-modal--wide { width:min(720px,calc(100vw - 32px)); }
.c-modal::backdrop { background:rgba(0,0,0,.55); }
.c-modal__title { margin:0 0 var(--sp-3); font-size:var(--fs-title); font-weight:650; }
.c-modal__desc { margin:0; color:var(--ink-2); font-size:var(--fs-body); }
.c-modal__actions { display:flex; justify-content:flex-end; gap:var(--sp-4); margin-top:var(--sp-7); flex-wrap:wrap; }
.c-modal__body { margin-top:var(--sp-5); display:flex; flex-direction:column; gap:var(--sp-5); }
.c-modal__err { color:var(--st-err-t); font-size:var(--fs-small); display:none; }
.c-modal__err:not(:empty) { display:block; }

/* ---------- 18. Меню (C24) ---------- */
.c-menu { position:relative; display:inline-block; }
.c-menu__list {
  position:fixed; z-index:var(--z-dropdown); min-width:190px; margin:0; padding:var(--sp-2);
  list-style:none; background:var(--surface-2); border:1px solid var(--line-strong);
  border-radius:var(--r-md); box-shadow:var(--sh-menu); display:none;
}
.c-menu__list.is-open { display:block; }
.c-menu__list button, .c-menu__list a {
  display:flex; align-items:center; gap:var(--sp-4); width:100%; height:32px; padding:0 var(--sp-4);
  background:none; border:0; border-radius:var(--r-sm); color:var(--ink-2); font:400 var(--fs-body)/1 var(--font-sans);
  cursor:pointer; text-align:left; text-decoration:none;
}
.c-menu__list button:hover, .c-menu__list a:hover { background:var(--surface-3); color:var(--ink); text-decoration:none; }
.c-menu__list .is-danger { color:var(--st-err-t); }
.c-menu__list .is-danger:hover { background:var(--st-err-b); color:var(--st-err-t); }
.c-menu__list hr { border:0; border-top:1px solid var(--line); margin:var(--sp-2) 0; }

/* ---------- 19. Степпер (C18) ---------- */
.c-steps { display:flex; align-items:flex-start; gap:0; list-style:none; margin:0; padding:0; }
.c-steps li { display:flex; flex-direction:column; align-items:center; gap:var(--sp-2); flex:1; min-width:0; position:relative; }
.c-steps li + li::before {
  content:""; position:absolute; top:12px; right:50%; width:100%; height:2px;
  background:var(--line); margin-right:12px;
}
.c-steps li.is-done + li::before { background:var(--line-strong); }
.c-steps__num {
  width:24px; height:24px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  background:var(--surface-2); color:var(--ink-3); font:600 var(--fs-micro)/1 var(--font-sans); position:relative; z-index:1;
}
.c-steps li.is-done .c-steps__num { background:var(--st-ok-bg); color:var(--st-ok-t); }
/* N13: белым на accent-600 — контраст 4.86:1 (AA), на accent-500 было 3.52:1. */
.c-steps li[aria-current=step] .c-steps__num { background:var(--accent-600); color:#fff; }
.c-steps li.is-error .c-steps__num { background:var(--st-err-b); color:var(--st-err-t); }
.c-steps__lbl { font-size:var(--fs-small); color:var(--ink-3); text-align:center; }
.c-steps li[aria-current=step] .c-steps__lbl { color:var(--ink); }
.c-steps__mobile { display:none; color:var(--ink-3); font-size:var(--fs-small); }

/* ---------- 20. Пагинация (C17) ---------- */
.c-pager { display:flex; align-items:center; gap:var(--sp-4); color:var(--ink-3); font-size:var(--fs-small); flex-wrap:wrap; }
.c-pager .right { margin-left:auto; display:flex; gap:var(--sp-4); align-items:center; }

/* ---------- 21. Фильтр-бар (C16) ---------- */
.c-filters {
  position:sticky; top:var(--topbar-h); z-index:var(--z-sticky-bar); background:var(--bg);
  display:flex; align-items:center; gap:var(--sp-5); padding:var(--sp-5) 0; flex-wrap:wrap;
}
/* В карточке бар — во всю ширину: иначе строки таблицы (они выходят в padding
   карточки) выглядывают сбоку из-под липкой полосы. */
.c-card > .c-filters { margin:0 calc(var(--sp-7) * -1); padding-left:var(--sp-7); padding-right:var(--sp-7); }
.c-filters__search { position:relative; width:min(280px,100%); }
.c-filters .c-select { width:auto; }
.c-filters__search .ic { position:absolute; left:9px; top:50%; transform:translateY(-50%); color:var(--ink-3); pointer-events:none; }
.c-filters__search .c-input { padding-left:32px; }
.c-filters__chips { display:flex; gap:var(--sp-3); flex-wrap:wrap; align-items:center; }
.c-filters__right { margin-left:auto; display:flex; gap:var(--sp-3); align-items:center; }

/* ---------- 22. KV-сетка (P04) ---------- */
.c-kv { display:grid; grid-template-columns:minmax(120px,160px) minmax(0,1fr); gap:0; margin:0; font-size:var(--fs-table); }
.c-kv dt { color:var(--ink-3); padding:var(--sp-3) var(--sp-4) var(--sp-3) 0; border-bottom:1px solid var(--line); font-size:var(--fs-small); }
.c-kv dd { margin:0; padding:var(--sp-3) 0; border-bottom:1px solid var(--line); min-width:0; overflow-wrap:anywhere; }
.c-kv dt:last-of-type, .c-kv dd:last-of-type { border-bottom:0; }
.c-kv--2 { grid-template-columns:minmax(120px,160px) minmax(0,1fr) minmax(120px,160px) minmax(0,1fr); column-gap:var(--sp-7); }
.c-kv--2 dt { padding-right:0; }

/* ---------- 23. Чарты (C20, DESIGN §8) ---------- */
.c-chart__body { height:200px; position:relative; }
.c-chart__body--compact { height:160px; }
.c-chart__body--tall { height:260px; }
.c-chart__body canvas { width:100% !important; height:100% !important; display:block; }
.c-chart__note { margin:var(--sp-4) 0 0; color:var(--ink-3); font-size:var(--fs-small); }
.c-chart__legend { display:flex; gap:var(--sp-5); flex-wrap:wrap; margin-top:var(--sp-4); font-size:var(--fs-small); color:var(--ink-2); }
.c-chart__legend button { display:inline-flex; align-items:center; gap:var(--sp-3); background:none; border:0; color:inherit; cursor:pointer; font-size:inherit; padding:2px 4px; border-radius:var(--r-xs); }
.c-chart__legend button:hover { background:var(--surface-2); }
.c-chart__legend .pt { width:8px; height:8px; border-radius:50%; flex:none; }
.c-chart__legend button[aria-pressed=false] { opacity:.45; }
.c-chart__legend .pt[data-off=true] { background:var(--ink-3) !important; }

/* ---------- 24. Раскладки ---------- */
.grid-2 { display:grid; gap:var(--sp-6); grid-template-columns:2fr 1fr; align-items:start; }
.grid-2.even { grid-template-columns:1fr 1fr; }
/* N11: карточки дашборда («Балансы и лимиты», «Группы») — таблицы не влезают
   в половину ширины (внутренний скролл 109/149px @1280); стакаем в одну колонку. */
.dash-cards { display:grid; gap:var(--sp-6); grid-template-columns:1fr; align-items:start; }
.grid-3 { display:grid; gap:var(--sp-6); grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); align-items:start; }
.row-between { display:flex; align-items:center; gap:var(--sp-5); flex-wrap:wrap; }
.row-between > .right { margin-left:auto; display:flex; gap:var(--sp-4); align-items:center; flex-wrap:wrap; }
.btnrow { display:flex; gap:var(--sp-4); align-items:center; flex-wrap:wrap; }

/* ---------- 25. Login (P01) ---------- */
.login-wrap { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:var(--sp-7); gap:var(--sp-7); }
.login-brand { display:flex; align-items:center; gap:var(--sp-4); font-weight:800; font-size:22px; letter-spacing:.2px; }
.login-brand svg { color:var(--accent-500); width:28px; height:28px; }
.login-brand i { font-style:normal; color:var(--accent-300); }
.login-brand__sub { color:var(--ink-3); font-size:var(--fs-small); text-align:center; margin:var(--sp-3) 0 0; }
.login-card { width:min(360px,100%); }
.login-card .c-field { margin-bottom:var(--sp-5); }
.login-card .c-btn { width:100%; justify-content:center; }
.login-card__hint { color:var(--ink-3); font-size:var(--fs-small); margin:var(--sp-5) 0 0; text-align:center; }
.login-foot { color:var(--ink-3); font-size:var(--fs-small); }
.input-affix { position:relative; }
.input-affix .c-input { padding-right:36px; }
.input-affix .c-iconbtn { position:absolute; right:2px; top:50%; transform:translateY(-50%); }

/* ---------- 26. Error (P15) ---------- */
.errpage { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:var(--sp-7); gap:var(--sp-5); }
.errpage .ic-xl { color:var(--st-err-t); width:32px; height:32px; }
.errpage h1 { margin:0; font-size:var(--fs-display); }
.errpage p { margin:0; color:var(--ink-2); max-width:420px; }
.errpage .btnrow { justify-content:center; }
.errpage details { margin-top:var(--sp-5); max-width:640px; width:100%; text-align:left; }
.errpage summary { color:var(--ink-2); font-size:var(--fs-small); cursor:pointer; }

/* ---------- 27. Анимации ---------- */
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
@keyframes spin { to { transform:rotate(360deg) } }
@keyframes toast-in { from { opacity:0; transform:translateY(8px) } to { opacity:1; transform:none } }
@keyframes fade-in { from { opacity:0 } to { opacity:1 } }
@keyframes skel { 0%,100%{opacity:.5} 50%{opacity:.8} }
.is-new { animation:fade-in .18s ease-out; }

/* ---------- 28. Адаптив ---------- */
/* N12: на средних десктопах 4-колоночная KV сжимает значения до ~140px и рвёт mono
   посреди слова — переходим на 2 колонки (значение получает всю оставшуюся ширину). */
@media (max-width:1439px) {
  .c-kv--2 { grid-template-columns:minmax(104px,140px) minmax(0,1fr); }
}
@media (max-width:1199px) {
  :root { --side-w:60px; }
  .c-brand span, .c-nav__group, .c-nav a > span:not(.cnt) { display:none; }
  .c-nav a { justify-content:center; padding:0; }
  .c-nav a .cnt { position:absolute; top:2px; right:6px; margin:0; }
  .c-nav a { position:relative; }
  .c-side__foot .c-side__user { display:none; }
}
@media (max-width:1100px) {
  .grid-2 { grid-template-columns:1fr; }
  .c-kv--2 { grid-template-columns:minmax(104px,140px) minmax(0,1fr); }
}
@media (max-width:899px) {
  .c-shell { grid-template-columns:1fr; }
  .c-side {
    position:fixed; left:0; top:0; width:232px; transform:translateX(-100%);
    transition:transform .18s cubic-bezier(.22,1,.36,1);
  }
  .c-brand span, .c-nav__group, .c-nav a > span:not(.cnt) { display:inline; }
  .c-nav a { justify-content:flex-start; padding:0 var(--sp-4); }
  .c-nav a .cnt { position:static; margin-left:auto; }
  body.nav-open .c-side { transform:none; }
  body.nav-open .c-backdrop { display:block; }
  .c-burger { display:inline-flex; }
  .c-content { padding:var(--sp-5) var(--sp-4); }
  .c-topbar { padding:0 var(--sp-4); gap:var(--sp-3); }
  .c-topbar__right { gap:var(--sp-4); }
  .grid-2, .grid-2.even, .grid-3 { grid-template-columns:1fr; }
  .c-table thead th { top:0; }
  .c-filters + .c-table__wrap .c-table thead th { top:0; }
  .c-filters { position:static; }
  .c-table th:first-child { position:sticky; left:0; background:var(--surface-2); }
  .c-table td:first-child { position:sticky; left:0; background:var(--bg); }
  .c-table tbody tr:hover td:first-child { background:var(--surface-2); }
  .c-card > .c-table__wrap { margin-left:calc(var(--sp-6) * -1); margin-right:calc(var(--sp-6) * -1); }
  .c-card > .c-filters { margin-left:calc(var(--sp-6) * -1); margin-right:calc(var(--sp-6) * -1); padding-left:var(--sp-6); padding-right:var(--sp-6); }
  .c-card { padding:var(--sp-5) var(--sp-6); }
  .c-kv--2 { grid-template-columns:1fr; }
  .c-kv--2 dt { border-bottom:0; padding-bottom:0; }
  .c-kv--2 dd { padding-top:var(--sp-1); }
  .c-steps__lbl { display:none; }
  .c-steps__mobile { display:block; }
}
@media (max-width:639px) {
  .c-stat { border-left:0; border-top:1px solid var(--line); padding:var(--sp-5) var(--sp-6); }
  .c-stat:first-child { border-top:0; }
  .c-stats { grid-template-columns:1fr; }
  .c-pagehead__actions { margin-left:0; width:100%; }
  .c-pagehead__actions .c-btn { flex:1; justify-content:center; }
  .c-pagehead__actions form { flex:1; display:flex; }
  .c-pagehead__actions form .c-btn { width:100%; }
  .c-code__body { white-space:pre-wrap; word-break:break-word; }
  .c-filters__search { width:100%; }
  .c-filters__right { margin-left:0; width:100%; }
  .c-table th:first-child, .c-table td:first-child { position:static; }
  .c-banner { flex-wrap:wrap; }
  .c-banner .c-btn { margin-left:0; width:100%; justify-content:center; }
}
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  html { scroll-behavior:auto; }
}

/* ==========================================================================
   29. Дополнения дизайн-QA: форма группы, секреты, утилиты шаблонов
   ========================================================================== */
/* Секция «Сервер»/поля провайдера: [data-provider-fields] скрывает JS по типу. */
[data-provider-fields][hidden] { display:none; }
.c-select--auto { width:auto; }

/* P06: форма группы — контент + липкий предпросмотр (≥1200px). */
.c-groupform { display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,380px); gap:var(--sp-7); align-items:start; }
.c-groupform__main { display:flex; flex-direction:column; gap:var(--sp-6); min-width:0; }
.c-groupform__side { position:sticky; top:calc(var(--topbar-h) + var(--sp-5)); min-width:0; }
.c-groupform > .c-card__foot { grid-column:1 / -1; }
@media (max-width:1199px) {
  .c-groupform { grid-template-columns:1fr; }
  .c-groupform__side { position:static; }
}
.c-groupform__side .c-code__body { max-height:280px; }
.c-what { margin:var(--sp-4) 0 0; padding-left:var(--sp-6); color:var(--ink-2); font-size:var(--fs-small); display:flex; flex-direction:column; gap:var(--sp-3); }
.c-what strong { color:var(--ink); font-weight:600; }
.c-ivrow__pair { display:grid; grid-template-columns:minmax(0,10rem) minmax(0,1fr) auto; gap:var(--sp-3); align-items:center; }
.c-sshkey { display:flex; align-items:center; gap:var(--sp-5); flex-wrap:wrap; }
.c-secret { color:var(--ink-2); }
.c-provgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(420px,1fr)); gap:var(--sp-6); }
.c-catalog { max-height:240px; overflow:auto; margin-top:var(--sp-4); }
.c-catalog__row { display:flex; flex-wrap:wrap; gap:var(--sp-3); }
.c-editor__revs--standalone { margin-top:var(--sp-6); border-top:1px solid var(--line); padding-top:var(--sp-5); }
/* n2: утилиты вместо инлайн-стилей в шаблонах */
.u-mt-0 { margin-top:0; }
.u-mt-2 { margin-top:var(--sp-2); }
.u-mt-3 { margin-top:var(--sp-3); }
.u-mt-4 { margin-top:var(--sp-4); }
.u-mt-5 { margin-top:var(--sp-5); }
.u-mt-6 { margin-top:var(--sp-6); }
.u-my-5 { margin-top:var(--sp-5); margin-bottom:var(--sp-5); }
.u-mb-6 { margin-bottom:var(--sp-6); }
.u-mb-7 { margin-bottom:var(--sp-7); }
.u-pointer { cursor:pointer; }
.u-center { text-align:center; }
.u-fs0 { font-size:0; }
.c-sum { cursor:pointer; font-weight:600; }
.c-sum--sm { cursor:pointer; color:var(--ink-2); font-size:var(--fs-small); }
.c-details-narrow { text-align:left; max-width:520px; }
.c-chips { display:flex; flex-wrap:wrap; gap:var(--sp-4); }
.c-list { margin:var(--sp-5) 0 0; padding-left:var(--sp-6); color:var(--ink-2); display:flex; flex-direction:column; gap:var(--sp-3); }
.c-list--tight { margin-top:var(--sp-4); }
.u-mt-5 { margin-top:var(--sp-5); }
.u-mt-6 { margin-top:var(--sp-6); }
.u-mt-7 { margin-top:var(--sp-7); }

/* m11/N12: KV-сетка — колонка значения шире, перенос по словам; подпись ужата до 140px. */
.c-kv { grid-template-columns:minmax(104px,140px) minmax(0,1fr); }
.c-kv dd { overflow-wrap:break-word; word-break:normal; hyphens:none; }

/* m12: тач-цели ≥44px на устройствах без hover. */
@media (hover:none) {
  .c-table .acts .c-iconbtn, .c-table td.c-table__actions .c-iconbtn { opacity:1; }
  .c-copy-inline .js-copy { opacity:1; }
  .c-table .c-iconbtn { width:44px; height:44px; }
  .row-more__btn { width:44px; height:44px; }
  .c-btn { min-height:44px; }
  .c-burger { min-width:44px; min-height:44px; }
  .c-switch { min-height:44px; }
  .c-switch input { width:40px; height:24px; }
  .c-switch input::after { width:20px; height:20px; }
  .c-switch input:checked::after { transform:translateX(16px); }
}
/* свитч в таблице: строка 36px — не раздувать */
.c-table .c-switch { font-size:0; gap:0; }
.c-table .c-switch input { cursor:pointer; }
.c-table td form { margin:0; }

/* ==========================================================================
   Legacy-совместимость для страниц, которые будут переведены во 2-й части
   (groups/profiles/providers/ips/incidents/log/settings/setup).
   ponytail: тонкий шим на старые классы; удалить после миграции всех страниц.
   ========================================================================== */
.pill { display:inline-flex; align-items:center; height:22px; padding:0 8px; border-radius:var(--r-xs); border:1px solid var(--st-mute-bd); background:var(--st-mute-b); color:var(--st-mute-t); font:600 var(--fs-micro)/1 var(--font-sans); white-space:nowrap; }
.pill.st-green { color:var(--st-ok-t); background:var(--st-ok-b); border-color:var(--st-ok-bd); }
.pill.st-blue { color:var(--st-info-t); background:var(--st-info-b); border-color:var(--st-info-bd); }
.pill.st-orange { color:var(--st-warn-t); background:var(--st-warn-b); border-color:var(--st-warn-bd); }
.pill.st-red { color:var(--st-err-t); background:var(--st-err-b); border-color:var(--st-err-bd); }
.pill.st-gray { color:var(--st-mute-t); background:var(--st-mute-b); border-color:var(--st-mute-bd); }
.btn {
  display:inline-flex; align-items:center; gap:var(--sp-3); height:32px; padding:0 var(--sp-5);
  border-radius:var(--r-md); border:1px solid var(--line-strong); background:var(--surface-2);
  color:var(--ink); font:500 var(--fs-body)/1 var(--font-sans); cursor:pointer; text-decoration:none;
}
.btn:hover { background:var(--surface-3); text-decoration:none; }
.btn.primary { background:var(--btn-primary-bg); border-color:transparent; color:var(--ink-inv); }
.btn.danger { background:var(--btn-danger-bg); border-color:transparent; color:#fff; }
.btn.warn { background:transparent; border-color:var(--st-warn-bd); color:var(--st-warn-t); }
.btn.small, .btn.sm { height:26px; padding:0 9px; font-size:var(--fs-small); border-radius:var(--r-sm); }
.btn.on { background:var(--surface-3); border-color:var(--line-strong); }
table:not(.c-table):not(.sr-only) { width:100%; border-collapse:collapse; font-size:var(--fs-table); }
table:not(.c-table) th { text-align:left; padding:6px 12px; background:var(--surface-2); color:var(--ink-3); font:600 var(--fs-micro)/1.3 var(--font-sans); text-transform:uppercase; letter-spacing:.04em; border-bottom:1px solid var(--line); }
table:not(.c-table) td { padding:6px 12px; border-bottom:1px solid var(--line); }
table:not(.c-table) tr:hover td { background:var(--surface-2); }
table.kv td:first-child { color:var(--ink-3); width:180px; }
.form label { display:flex; flex-direction:column; gap:var(--sp-2); font-size:var(--fs-small); color:var(--ink-2); margin-bottom:var(--sp-5); }
.form input, .form select, .form textarea {
  height:34px; padding:0 10px; border-radius:var(--r-md); background:var(--bg-sunken);
  border:1px solid var(--line-strong); color:var(--ink); font:var(--fs-body)/1.4 var(--font-sans);
}
.form textarea { height:auto; padding:8px 10px; font-family:var(--font-mono); font-size:var(--fs-mono); }
.form input:focus, .form select:focus, .form textarea:focus { outline:none; border-color:var(--focus); box-shadow:0 0 0 3px rgba(255,159,208,.18); }
.form.wide input, .form.wide select, .form.wide textarea { width:100%; }
.grid.cols-2 { display:grid; gap:var(--sp-6); grid-template-columns:1fr 1fr; align-items:start; }
.grid.cols-3 { display:grid; gap:var(--sp-5); grid-template-columns:repeat(3,1fr); }
.grid.cols-4 { display:grid; gap:var(--sp-6); grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
.grid.cols-5 { display:grid; gap:var(--sp-5); grid-template-columns:repeat(5,1fr); }
@media (max-width:1100px) { .grid.cols-5 { grid-template-columns:repeat(2,1fr); } }
@media (max-width:899px) { .grid.cols-2, .grid.cols-3, .grid.cols-5 { grid-template-columns:1fr; } }
.fieldset { border:1px solid var(--line); border-radius:var(--r-md); padding:var(--sp-5) var(--sp-6) 0; margin-bottom:var(--sp-6); }
.fieldset h4, .card h4 { margin:0 0 var(--sp-4); font-size:var(--fs-sub); color:var(--ink); }
.form label.chk { flex-direction:row; align-items:center; gap:var(--sp-3); }
.form label.chk input { width:auto; height:16px; accent-color:var(--accent-500); }
.form.wide { max-width:1100px; }
.form button { margin-top:var(--sp-3); }
details summary { cursor:pointer; color:var(--ink-2); }
details summary:hover { color:var(--ink); }
.card .stat.inline, .stat.inline { display:inline-block; padding:0 var(--sp-6) 0 0; color:var(--ink-2); font-size:var(--fs-small); }
.stat .num { font-size:var(--fs-stat); font-weight:750; display:block; color:var(--ink); }
.stat .lbl { color:var(--ink-2); font-size:var(--fs-small); }
.num.green { color:var(--st-ok-t); } .num.red { color:var(--st-err-t); } .num.orange { color:var(--st-warn-t); } .num.blue { color:var(--st-info-t); }
.green { color:var(--st-ok-t); } .red { color:var(--st-err-t); } .orange { color:var(--st-warn-t); } .blue { color:var(--st-info-t); }
.muted { color:var(--ink-3); } .small { font-size:var(--fs-small); } .nowrap { white-space:nowrap; }
.code, pre.code { margin:0; padding:12px; background:var(--bg-sunken); border:1px solid var(--line); border-radius:var(--r-md); font-size:var(--fs-mono); overflow:auto; max-height:320px; }
.code.small { font-size:11.5px; }
.ev-warn td:first-child { box-shadow:inset 2px 0 0 var(--st-warn-bd); }
.ev-error td:first-child { box-shadow:inset 2px 0 0 var(--st-err-bd); }
.logout-form { display:inline; }
footer { padding:var(--sp-5) var(--sp-7) var(--sp-8); color:var(--ink-3); font-size:var(--fs-small); }

/* ==========================================================================
   30. Мастер настройки: навигация вверху/внизу, проверка доступов,
       общий алерт валидации, пустой каталог тарифов
   ========================================================================== */
/* Навигация шага: кнопки связаны с формой через form="id" (app.js делает то же
   для внешних кнопок при отправке). Внизу — липкая, кнопку нельзя потерять. */
.c-wiznav { display:flex; align-items:center; gap:var(--sp-4); flex-wrap:wrap; }
.c-wiznav__spacer { margin-left:auto; }
.c-wiznav-foot {
  position:sticky; bottom:0; z-index:var(--z-sticky-bar);
  background:var(--bg); border-top:1px solid var(--line);
  padding:var(--sp-4) 0 calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
  display:flex; flex-direction:column; gap:var(--sp-3);
}
.c-wiznav__hint { margin:0; color:var(--ink-2); font-size:var(--fs-small); }
.c-wiznav__hint a { text-decoration:underline; }

.c-rowactions { display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; justify-content:flex-end; }
.c-table td.c-table__actions .c-rowactions { width:auto; }
.c-rowactions .c-btn { display:inline-flex; }

/* Общий алерт «Проверьте выделенные поля» — рядом с кнопкой отправки,
   во всю ширину строки кнопок. */
.c-formalert {
  flex:1 0 100%; order:-2; display:flex; align-items:center; gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4); border:1px solid var(--st-err-bd);
  background:var(--st-err-b); color:var(--st-err-t);
  border-radius:var(--r-md); font-size:var(--fs-small); font-weight:600;
}

/* Пошаговый результат «Проверить доступ». */
.c-testresult {
  margin-top:var(--sp-4); padding:var(--sp-4) var(--sp-5);
  border:1px solid var(--line-strong); border-radius:var(--r-md); background:var(--bg-sunken);
}
.c-testresult[hidden] { display:none; }
.c-testresult__head { display:flex; align-items:center; gap:var(--sp-3); font-size:var(--fs-body); }
.c-testresult__head .ic { color:var(--ink-2); }
.c-testresult__hint { margin:var(--sp-2) 0 0; color:var(--ink-2); font-size:var(--fs-small); overflow-wrap:anywhere; }
.c-teststeps { list-style:none; margin:var(--sp-3) 0 0; padding:0; display:flex; flex-direction:column; gap:var(--sp-2); }
.c-teststeps__item { padding:var(--sp-3) var(--sp-4); border-radius:var(--r-sm); background:var(--surface-2); }
.c-teststeps__item[data-st=ok] .ic { color:var(--st-ok-t); }
.c-teststeps__item[data-st=err] { background:var(--st-err-b); }
.c-teststeps__item[data-st=err] .ic { color:var(--st-err-t); }
.c-teststeps__row { display:flex; align-items:center; gap:var(--sp-3); }
.c-teststeps__name { font-weight:600; }
.c-teststeps__meta { margin-left:auto; color:var(--ink-3); font-size:var(--fs-small); text-align:right; overflow-wrap:anywhere; }
.c-teststeps__hint { margin:var(--sp-2) 0 0; color:var(--ink-2); font-size:var(--fs-small); }

/* Пустой каталог тарифов — заметный блок, кнопка не переносится на узких экранах. */
.c-catalog-empty { align-items:flex-start; }
.c-catalog-empty .c-btn { white-space:nowrap; }

@media (max-width:639px) {
  .c-wiznav > .c-btn { flex:1 1 auto; justify-content:center; }
  .c-wiznav__spacer { display:none; }
}