/* ═══════════════════════════════════════════════════════════════════════════
   KIZWAY · дизайн-система «Пролёт»

   Мост между кабинетом Wildberries и Честным ЗНАКом. Отсюда и язык: светлая
   рабочая область, белая навигация с линией, стальной синий как цвет действия
   и графитовые «пролёты» — тёмные блоки, несущие главное действие раздела.
   Крупные заголовки набраны антиквой Lora, интерфейс — Manrope.
   Коралл #ff5a3c и графит #1b1e27 — знак бренда KIZWAY: логотип, печать, акцент
   второго уровня. Знак продукта — Data Matrix. Стили на переменных, без сборки.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/static/fonts/manrope-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/static/fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Заголовки, крупные числа и слово KIZWAY — Unbounded (айдентика «Свод», 17.10.2026): широкий,
   с мягкой геометрией под скруглённый верх знака и с кириллицей. Файлы — Google Fonts, OFL.
   До 17.10.2026 здесь была антиква Lora; её файлы лежат в fonts/, но больше не подключаются. */
@font-face {
  font-family: "Unbounded"; font-style: normal; font-weight: 600 800; font-display: swap;
  src: url("/static/fonts/unbounded-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Unbounded"; font-style: normal; font-weight: 600 800; font-display: swap;
  src: url("/static/fonts/unbounded-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/static/fonts/inter-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/static/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Токены ──────────────────────────────────────────────────────────────── */

:root {
  --bg:          #f8f9fb;
  --surface:     #ffffff;
  --surface-2:   #fbfbfd;
  --hover:       #f0f2f7;
  --line:        #e6e8ee;
  --line-strong: #d5d9e2;

  --ink:    #14161c;
  --ink-2:  #3c414f;
  --muted:  #686d7c;
  --faint:  #9aa0b0;

  /* акцент — коралл тёмный: ссылки, активное, фокус (4,6:1 на белом). Главные кнопки — графит */
  --accent:      #d63e1f;
  --accent-hi:   #b8331a;
  --accent-soft: #fff1ec;
  --accent-ink:  #b8331a;
  --ring:        rgba(255, 90, 60, .25);
  --action:      #1b1e27;
  --action-hi:   #2a2e3b;
  --action-ink:  #ffffff;

  /* коралловый знак KIZWAY: печать, логотип, акцент второго уровня */
  --brand:       #ff5a3c;
  --brand-soft:  #fff1ec;
  /* берега знака «Свод»: кабинет продавца и Честный ЗНАК */
  --mark-l:      #ff5a3c;
  --mark-r:      #1b1e27;
  /* «рассвет» — цвет награды (выведено, принято, мост построен); взят с кадра входа */
  --dawn-a:      #f6c7a4;
  --dawn-b:      #bcd2f3;
  --dawn-ink:    #3a2a20;
  /* метка площадки WB: её лиловый, а не наш красный — красный в интерфейсе значит риск */
  --wb:          #8b1d77;
  --wb-soft:     #f8eef6;

  --ok:   #1d7a53;  --ok-soft:   #e9f7f0;
  --warn: #9a5b12;  --warn-soft: #fdf5e8;
  --bad:  #c2263a;  --bad-soft:  #fdf1f2;
  --info: #23479e;  --info-soft: #eef2ff;

  /* «пролёт» — графитовый блок с главным действием раздела */
  --span:      #14161c;
  --span-2:    #1c1f28;
  --span-3:    #2a2f3c;
  --span-ink:  #e8eaf0;
  --span-muted:#a8aebd;
  --span-hi:   #ff8a70;

  --nav:       #ffffff;
  --nav-2:     #f4f6fa;
  --nav-3:     #e9edf6;
  --nav-ink:   #3c414f;
  --nav-muted: #9aa0b0;
  --nav-line:  #e6e8ee;

  --radius:    12px;
  --radius-sm: 9px;
  --radius-lg: 18px;
  --shadow:    0 1px 2px rgba(20, 22, 28, .05), 0 1px 1px rgba(20, 22, 28, .03);
  --shadow-lg: 0 14px 34px -16px rgba(20, 22, 28, .22);
  --shadow-xl: 0 30px 80px -20px rgba(20, 22, 28, .38);
  --sidebar:   240px;
  --mono: ui-monospace, "Cascadia Mono", "JetBrains Mono", Consolas, monospace;
  /* заголовки и слово KIZWAY — Unbounded; Manrope — запасной, пока шрифт грузится */
  --display: "Unbounded", "Manrope", system-ui, sans-serif;
  color-scheme: light;
}

/* Тёмная тема: по системе, если не выбрана светлая, или принудительно */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b0d12; --surface: #13161d; --surface-2: #171b23; --hover: #1d222c;
    --line: #242a36; --line-strong: #323a4a;
    --ink: #eef0f5; --ink-2: #cdd3de; --muted: #949cad; --faint: #6b7383;
    --accent: #ff7a5c; --accent-hi: #ff9478; --accent-soft: #2a1712; --accent-ink: #ffa58c;
    --action: #eceef3; --action-hi: #ffffff; --action-ink: #14161c;
    --ring: rgba(255, 122, 92, .3);
    --brand: #ff6f55; --brand-soft: #2a1712; --mark-l: #ff6f55; --mark-r: #eceef3; --wb: #e58ad3; --wb-soft: #2a1426; --dawn-a: #8a5a42; --dawn-b: #34507f; --dawn-ink: #fbeee4;
    --ok: #3ecf8e; --ok-soft: #0f2419; --warn: #f0b04b; --warn-soft: #2a1f0d;
    --bad: #ff6b6b; --bad-soft: #2c1414; --info: #7d9dff; --info-soft: #16203a;
    --span: #0f1218; --span-2: #171b23; --span-3: #262c39;
    --span-ink: #eef0f5; --span-muted: #949cad; --span-hi: #ff8a70;
    --nav: #0f1218; --nav-2: #171b23; --nav-3: #242a36;
    --nav-ink: #cdd3de; --nav-muted: #7d8595; --nav-line: #1e242e;
    --shadow: 0 1px 2px rgba(0,0,0,.4); --shadow-lg: 0 14px 34px -16px rgba(0,0,0,.65);
    --shadow-xl: 0 30px 80px -20px rgba(0,0,0,.8);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0b0d12; --surface: #13161d; --surface-2: #171b23; --hover: #1d222c;
  --line: #242a36; --line-strong: #323a4a;
  --ink: #eef0f5; --ink-2: #cdd3de; --muted: #949cad; --faint: #6b7383;
  --accent: #ff7a5c; --accent-hi: #ff9478; --accent-soft: #2a1712; --accent-ink: #ffa58c;
    --action: #eceef3; --action-hi: #ffffff; --action-ink: #14161c;
  --ring: rgba(255, 122, 92, .3);
  --brand: #ff6f55; --brand-soft: #2a1712; --mark-l: #ff6f55; --mark-r: #eceef3; --wb: #e58ad3; --wb-soft: #2a1426; --dawn-a: #8a5a42; --dawn-b: #34507f; --dawn-ink: #fbeee4;
  --ok: #3ecf8e; --ok-soft: #0f2419; --warn: #f0b04b; --warn-soft: #2a1f0d;
  --bad: #ff6b6b; --bad-soft: #2c1414; --info: #7d9dff; --info-soft: #16203a;
  --span: #0f1218; --span-2: #171b23; --span-3: #262c39;
  --span-ink: #eef0f5; --span-muted: #949cad; --span-hi: #ff8a70;
  --nav: #0f1218; --nav-2: #171b23; --nav-3: #242a36;
  --nav-ink: #cdd3de; --nav-muted: #7d8595; --nav-line: #1e242e;
  --shadow: 0 1px 2px rgba(0,0,0,.4); --shadow-lg: 0 14px 34px -16px rgba(0,0,0,.65);
  --shadow-xl: 0 30px 80px -20px rgba(0,0,0,.8);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 14px/1.5 "Manrope", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-feature-settings: "tnum";
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
code { font: 12.5px var(--mono); background: var(--hover); padding: 1px 5px; border-radius: 5px; }
[hidden] { display: none !important; }
::selection { background: var(--ring); }
/* иконка без своего правила — размером с текст; нулевая специфичность, любое правило сильнее */
:where(svg[aria-hidden="true"]) { width: 1.1em; height: 1.1em; flex: none; vertical-align: -.18em; }

/* ── Каркас ──────────────────────────────────────────────────────────────── */

.app { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); min-height: 100vh; }

.sidebar {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  background: var(--nav); color: var(--nav-ink);
  display: flex; flex-direction: column; padding: 14px 10px;
  border-right: 1px solid var(--nav-line);
}
.brand {
  display: flex; align-items: center; gap: 11px; padding: 4px 8px 14px;
  color: var(--ink); text-decoration: none !important;
}
/* Знак «Свод» — без плашки: на тёмной плашке прежний знак читался как QR (16.10.2026) */
.brand-mark { width: 34px; height: 34px; flex: none; display: grid; place-items: center; }
.brand-mark svg { width: 32px; height: 32px; }
.brand-mark .mark-l { fill: var(--mark-l); }
.brand-mark .mark-r { fill: var(--mark-r); }
/* KIZWAY — слово знака: Unbounded 700 без разрядки */
.brand-name { font-family: var(--display); font-weight: 700; font-size: 17px;
              letter-spacing: -.01em; line-height: 1.05; }
.brand-name small { display: block; margin-top: 2px; color: var(--muted); font-family: "Manrope",
                    system-ui, sans-serif; font-weight: 500; font-size: 11px; letter-spacing: 0; }

.side-search {
  display: flex; align-items: center; gap: 9px; width: 100%; height: 34px; padding: 0 8px 0 10px;
  margin: 2px 0 6px; border-radius: 8px; border: 1px solid var(--nav-line);
  background: var(--nav-2); color: var(--nav-muted); font: inherit; font-size: 13px; cursor: pointer;
  transition: border-color .12s, color .12s;
}
.side-search:hover { border-color: var(--nav-3); color: var(--nav-ink); }
.side-search svg { width: 15px; height: 15px; }
.side-search kbd { margin-left: auto; background: var(--nav-3); border-color: #34343b; color: var(--nav-muted); }

.nav-group { margin: 14px 0 2px; }
.nav-label {
  padding: 0 10px 6px; color: var(--nav-muted);
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}
.nav-item {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px; margin: 1px 0;
  border-radius: var(--radius-sm); color: var(--nav-ink); font-weight: 500;
  text-decoration: none !important; transition: background .12s, color .12s;
}
.nav-item:hover { background: var(--nav-2); color: var(--ink); }
.nav-item.on { background: var(--accent-soft); color: var(--ink); font-weight: 700; }
.nav-item svg { width: 17px; height: 17px; flex: none; opacity: .62; }
.nav-item.on svg { opacity: 1; color: var(--accent); }
.nav-badge {
  margin-left: auto; min-width: 20px; padding: 0 6px; height: 19px; border-radius: 10px;
  display: grid; place-items: center; font-size: 11.5px; font-weight: 700;
  background: var(--accent); color: #fff;
}
.nav-badge.alert { background: var(--bad); color: #fff; }

.sidebar-foot { margin-top: auto; padding-top: 10px; }
.theme-switch {
  display: flex; gap: 2px; padding: 3px; margin: 0 4px 10px; border-radius: 9px;
  background: var(--nav-2); border: 1px solid var(--nav-line);
}
.theme-switch button {
  flex: 1; height: 26px; border: 0; border-radius: 6px; background: transparent;
  color: var(--nav-muted); cursor: pointer; display: grid; place-items: center;
}
.theme-switch button:hover { color: var(--ink); }
.theme-switch button svg { width: 14px; height: 14px; }
.theme-switch button.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }

/* Тумблер звука (sound.js): рядом с темой, та же «таблетка». Иконка меняется классом .off */
.foot-tools { display: flex; gap: 6px; align-items: stretch; margin: 0 4px 10px; }
.foot-tools .theme-switch { flex: 1; margin: 0; }
.sound-toggle {
  flex: none; width: 34px; border-radius: 9px; border: 1px solid var(--nav-line); background: var(--nav-2);
  color: var(--nav-muted); cursor: pointer; display: grid; place-items: center; padding: 0;
}
.sound-toggle:hover { color: var(--ink); }
.sound-toggle svg { width: 15px; height: 15px; }
.sound-toggle svg + svg, .sound-toggle.off svg:first-child { display: none; }
.sound-toggle.off svg + svg { display: block; }
/* вход: звук ждёт первого клика (так требует браузер) — динамик зовёт мягким кольцом */
.sound-toggle.pending { animation: snd-call 1.8s ease-in-out infinite; color: var(--accent); }
@keyframes snd-call { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mark-l) 45%, transparent); }
                      50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--mark-l) 0%, transparent); } }
@media (prefers-reduced-motion: reduce) { .sound-toggle.pending { animation: none; } }

.userchip {
  display: flex; align-items: center; gap: 10px; padding: 10px 8px 4px;
  border-top: 1px solid var(--nav-line);
}
.avatar {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: linear-gradient(135deg, #2a3040, #14161c); color: #fff; font-size: 12.5px; font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.userchip .who { line-height: 1.25; font-size: 13px; color: var(--ink); min-width: 0; }
.userchip .who small { display: block; color: var(--nav-muted); font-size: 11.5px; }
.userchip a { margin-left: auto; color: var(--nav-muted); display: grid; place-items: center;
              width: 28px; height: 28px; border-radius: 7px; }
.userchip a:hover { color: var(--ink); background: var(--nav-2); text-decoration: none; }
.userchip a svg { width: 16px; height: 16px; }
.userchip .logout { margin: 0 0 0 auto; }
.userchip .logout button { color: var(--nav-muted); display: grid; place-items: center; width: 28px; height: 28px;
                           border: 0; border-radius: 7px; background: none; padding: 0; cursor: pointer; }
.userchip .logout button:hover { color: var(--ink); background: var(--nav-2); }
.userchip .logout svg { width: 16px; height: 16px; }

.main { min-width: 0; display: flex; flex-direction: column; }

.topbar {
  position: sticky; top: 0; z-index: 30; height: 56px;
  display: flex; align-items: center; gap: 10px; padding: 0 28px;
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.crumbs { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--muted);
          font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--ink); text-decoration: none; }
.crumbs b { color: var(--ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.crumbs .sep { color: var(--faint); }
.topbar .spacer { flex: 1; }

.status-chip {
  display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px;
  border-radius: 999px; border: 1px solid var(--line); background: var(--surface);
  color: var(--ink-2); font-size: 12.5px; font-weight: 500; white-space: nowrap;
  text-decoration: none !important;
}
a.status-chip:hover { border-color: var(--line-strong); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); flex: none; }
.dot.ok   { background: var(--ok);   box-shadow: 0 0 0 3px var(--ok-soft); }
.dot.warn { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft); }
.dot.bad  { background: var(--bad);  box-shadow: 0 0 0 3px var(--bad-soft); }
.dot.info { background: var(--info); box-shadow: 0 0 0 3px var(--info-soft); }

/* Полоса согласия с условиями: висит, пока текущая редакция не принята */
.legal-bar { display: flex; align-items: center; gap: 14px; margin: 0 0 18px;
             padding: 11px 16px; border: 1px solid var(--line); border-radius: 12px;
             background: var(--surface); font-size: 13px; color: var(--ink-2); }
.legal-bar .lb-text { flex: 1; min-width: 0; }
.legal-bar .lb-checks { display: flex; flex-direction: column; gap: 6px; }
.legal-bar .lb-checks .check { align-items: flex-start; line-height: 1.4; }
.legal-bar .lb-checks input { margin-top: 2px; }
.side-legal { display: flex; gap: 6px; justify-content: center; padding: 8px 0 2px;
              color: var(--muted); font-size: 11.5px; }
.side-legal a { color: var(--muted); }
.side-legal a:hover { color: var(--ink-2); }

/* ── Колокольчик ─────────────────────────────────────────────────────────────
   Счётчик висит в топбаре на любой странице: уведомление рождается в фоне, и
   человек должен увидеть его там, где работает, а не в отдельном разделе. */
.bell-wrap { position: relative; }
.btn.bell { padding: 0 9px; }
.btn.bell.has-new { color: var(--ink); border-color: var(--line-strong); }
.bell-badge {
  position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 999px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700;
  display: grid; place-items: center; border: 2px solid var(--bg);
}
.bell-badge.urgent { background: var(--bad); }
.bell-menu {
  position: absolute; top: calc(100% + 8px); right: 0; width: 380px; max-width: 86vw;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow-lg, 0 18px 40px rgba(0,0,0,.16)); overflow: hidden; z-index: 40;
}
.bell-head { display: flex; align-items: center; gap: 8px; padding: 11px 14px;
             border-bottom: 1px solid var(--line); font-size: 13px; }
.bell-head .spacer { flex: 1; }
.bell-list { max-height: 62vh; overflow: auto; }
.bell-item { display: block; padding: 11px 14px; border-bottom: 1px solid var(--line);
             color: inherit; text-decoration: none !important; }
.bell-item:last-child { border-bottom: 0; }
a.bell-item:hover { background: var(--hover); }
.bell-item .t { display: block; font-weight: 600; font-size: 13.5px; }
.bell-item .b { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.bell-item .at { display: block; color: var(--muted); font-size: 11.5px; margin-top: 4px;
                 font-variant-numeric: tabular-nums; }
.bell-item.unread { background: color-mix(in srgb, var(--info-soft) 45%, transparent); }
.bell-item.unread .t::before { content: ''; display: inline-block; width: 6px; height: 6px;
                               border-radius: 50%; background: var(--info); margin-right: 7px;
                               vertical-align: 1px; }
.bell-item.urgent .t::before { background: var(--bad); }
.bell-empty { padding: 22px 16px; color: var(--muted); font-size: 13px; text-align: center; }

main { padding: 26px 28px 80px; max-width: 1480px; width: 100%; }

/* ── Типографика ─────────────────────────────────────────────────────────── */

h1 { font-family: var(--display); font-size: 30px; line-height: 1.16; font-weight: 700;
     letter-spacing: -.012em; margin: 0 0 4px; }
h2 { font-size: 15px; font-weight: 700; letter-spacing: -.01em; margin: 26px 0 10px; }
.panel > h2:first-child { margin-top: 0; }
.sub { color: var(--muted); margin: 0 0 18px; max-width: 880px; }
.hint { color: var(--muted); font-size: 12.5px; }
.good { color: var(--ok);   font-weight: 600; }
.warn { color: var(--warn); font-weight: 600; }
.bad  { color: var(--bad);  font-weight: 600; }
.zero { color: var(--muted); }
.mono { font-family: var(--mono); font-size: 12.5px; letter-spacing: -.01em; }
.cis  { font: 12px var(--mono); color: var(--muted); letter-spacing: -.01em; }
.nowrap { white-space: nowrap; }

kbd {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 5px; border: 1px solid var(--line-strong); border-bottom-width: 2px;
  background: var(--surface-2); color: var(--muted);
  font: 600 11px/1 "Manrope", system-ui, sans-serif; white-space: nowrap;
}

/* ── Заголовок страницы ──────────────────────────────────────────────────── */

.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 14px 24px; flex-wrap: wrap; margin: 0 0 22px;
}
.page-head .titles { flex: 1 1 380px; min-width: 0; max-width: 660px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px;
  color: var(--muted); font-size: 12.5px; font-weight: 550;
}
a.eyebrow:hover { color: var(--ink); text-decoration: none; }
.eyebrow svg { width: 14px; height: 14px; }
.page-head h1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; }
.page-head .sub { margin: 6px 0 0; }
.page-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }

/* ── Поверхности ─────────────────────────────────────────────────────────── */

.panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 20px; margin-bottom: 16px; box-shadow: var(--shadow);
}
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); margin-bottom: 16px; min-width: 0;
}
.card-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 11px 18px; border-bottom: 1px solid var(--line); min-height: 52px;
}
.card-head h2 { margin: 0; font-size: 14.5px; display: flex; align-items: center; gap: 8px; }
.card-head h2 svg { width: 16px; height: 16px; color: var(--muted); }
.card-head .spacer { flex: 1; }
.card-body { padding: 16px 18px; }
.card-body > :last-child { margin-bottom: 0; }
.card-note { padding: 12px 18px 0; margin: 0; color: var(--muted); font-size: 13px; }
.card-foot { padding: 12px 18px; border-top: 1px solid var(--line); background: var(--surface-2);
             border-radius: 0 0 var(--radius) var(--radius); }
.card > .tablewrap { border: 0; border-radius: 0 0 var(--radius) var(--radius); box-shadow: none; }
.card > .tablewrap thead th { border-radius: 0 !important; }

.row { display: flex; gap: 16px; flex-wrap: wrap; align-items: stretch; }
.row > .panel { margin-bottom: 16px; }

.grid { display: grid; gap: 16px; align-items: start; margin-bottom: 16px; }
.grid > .card, .grid > .panel { margin-bottom: 0; }
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.side   { grid-template-columns: minmax(0, 1fr) 340px; }
/* Обзор: две колонки-стопки без выравнивания по строкам — короткая карточка не оставляет дыру (21.10.2026) */
.dash-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch;
             margin-bottom: 16px; }
.dash-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.dash-col > .card { margin-bottom: 0; }
.dash-col > .card:last-child { flex: 1 1 auto; }   /* низ колонок вровень */
/* УПД: таблица документов широкая (статус, ЭДО, кнопки) — на экранах уже 1500 px
   памятка «Как это работает» уходит под таблицу, а не режет колонку статуса */
@media (max-width: 1500px) { .grid.side.upd-side { grid-template-columns: minmax(0, 1fr); } }
.stack { display: grid; gap: 16px; align-content: start; min-width: 0; }
.stack > .card, .stack > .panel { margin-bottom: 0; }

.count {
  display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 7px;
  border-radius: 99px; background: var(--hover); color: var(--muted);
  font-size: 12px; font-weight: 600; letter-spacing: 0;
}
.count.bad  { background: var(--bad-soft);  color: var(--bad); }
.count.warn { background: var(--warn-soft); color: var(--warn); }
.count.ok   { background: var(--ok-soft);   color: var(--ok); }

/* ── Метрики ─────────────────────────────────────────────────────────────── */

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
         gap: 12px; margin: 18px 0 20px; }
.tile {
  position: relative; display: block; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px 13px; color: inherit; text-decoration: none !important;
  box-shadow: var(--shadow); transition: border-color .15s, transform .15s, box-shadow .15s;
}
a.tile:hover { border-color: var(--line-strong); transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.tile .v { font-size: 26px; line-height: 1.1; font-weight: 650; letter-spacing: -.03em; }
.tile .k { margin-top: 5px; color: var(--muted); font-size: 12.5px; font-weight: 500; }

/* Вкладки-метрики: переключатель вида, в котором сразу видно, сколько где */
.views {
  display: flex; margin: 0 0 18px; overflow-x: auto; scrollbar-width: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.views::-webkit-scrollbar { display: none; }
.view {
  position: relative; flex: 1 1 0; min-width: 128px; padding: 12px 16px 13px;
  color: inherit; text-decoration: none !important; border-right: 1px solid var(--line);
  transition: background .12s;
}
.view:last-child { border-right: 0; }
a.view:hover { background: var(--surface-2); }
.view .k { display: flex; align-items: center; gap: 7px; color: var(--muted);
           font-size: 12.5px; font-weight: 550; white-space: nowrap; }
.view .k svg { width: 14px; height: 14px; }
.view .v { margin-top: 3px; font-family: var(--display); font-size: 28px; line-height: 1.1;
           font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }
.view .v small { margin-left: 6px; font-family: "Manrope", system-ui, sans-serif; font-size: 12px;
                 font-weight: 600; letter-spacing: 0; }
.view.on .k { color: var(--ink); }
.view.on::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 2px;
                  border-radius: 2px 2px 0 0; background: var(--accent); }
.view.bad .v  { color: var(--bad); }
.view.warn .v { color: var(--warn); }
.view.total { flex: 0 0 auto; background: var(--surface-2); }
.view.total .v { color: var(--muted); }

.meter { height: 6px; border-radius: 99px; background: var(--hover); overflow: hidden; }
.meter > span { display: block; height: 100%; border-radius: 99px; background: var(--accent); }
.meter.ok > span   { background: var(--ok); }
.meter.warn > span { background: var(--warn); }
.meter.bad > span  { background: var(--bad); }

/* ── Панель инструментов и поля ──────────────────────────────────────────── */

.toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.toolbar .spacer { flex: 1; }
.card-head .toolbar { margin: 0; }

input[type=text], input[type=password], input[type=number], input[type=date], input[type=search], select {
  height: 34px; padding: 0 11px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background-color: var(--surface); color: var(--ink); font: inherit; font-size: 13.5px;
  transition: border-color .12s, box-shadow .12s; min-width: 0;
}
select {
  padding-right: 30px; appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center; background-size: 14px;
}
input[type=file] { font: inherit; font-size: 12.5px; color: var(--muted); }
input:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
input::placeholder { color: var(--muted); }
input[type=checkbox] { accent-color: var(--accent); width: 15px; height: 15px; vertical-align: -2px; cursor: pointer; }
input[type=search]::-webkit-search-cancel-button { display: none; }

/* Сегменты: быстрый фильтр без перезагрузки */
.seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 9px; background: var(--hover);
       border: 1px solid var(--line); }
.seg > button, .seg > a {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border: 0;
  border-radius: 6px; background: transparent; color: var(--muted); font: inherit; font-size: 13px;
  font-weight: 550; white-space: nowrap; cursor: pointer; text-decoration: none !important;
}
.seg > button:hover, .seg > a:hover { color: var(--ink); }
.seg > .on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(16,16,20,.08), 0 0 0 1px var(--line); }
.seg .n { color: var(--muted); font-weight: 600; font-size: 12px; }

/* Фишки-фильтры со счётчиками */
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px;
  border-radius: 99px; border: 1px solid var(--line); background: var(--surface);
  color: var(--ink-2); font-size: 13px; font-weight: 500; white-space: nowrap; text-decoration: none !important;
  transition: border-color .12s, background .12s;
}
.chip:hover { border-color: var(--line-strong); }
.chip .n { color: var(--muted); font-weight: 600; font-size: 12px; }
.chip.on { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.chip.on .n { color: inherit; opacity: .65; }
.chip .dot { width: 6px; height: 6px; box-shadow: none; }

tbody tr:has(input:checked) { background: var(--accent-soft); }
tbody tr:has(input:checked):hover { background: color-mix(in srgb, var(--accent-soft) 70%, var(--hover)); }

.search { position: relative; display: inline-flex; align-items: center; }
.search > svg { position: absolute; left: 10px; width: 15px; height: 15px; color: var(--faint); pointer-events: none; }
.search input { padding-left: 32px; padding-right: 36px; width: 300px; }
.search kbd { position: absolute; right: 8px; pointer-events: none; }
.search input:focus + kbd, .search input:not(:placeholder-shown) + kbd { display: none; }

label.field { display: flex; flex-direction: column; gap: 6px; margin: 0 0 16px;
              font-size: 13px; font-weight: 550; color: var(--ink-2); }
label.field:last-child { margin-bottom: 0; }
label.field input, label.field select { width: 100%; max-width: 520px; font-weight: 400; }
label.field .hint { font-weight: 400; }
.check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); cursor: pointer; }

/* ── Кнопки ──────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 34px; padding: 0 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
  font: inherit; font-size: 13.5px; font-weight: 550; cursor: pointer; white-space: nowrap;
  text-decoration: none !important; box-shadow: var(--shadow);
  transition: background .12s, border-color .12s, box-shadow .12s, transform .06s;
}
.btn:hover { background: var(--hover); border-color: var(--faint); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.btn svg { width: 15px; height: 15px; flex: none; }
/* главная кнопка — графит, как вторая половина знака: не спорит с метками WB и Ozon */
.btn.primary {
  background: var(--action); border-color: var(--action); color: var(--action-ink);
  box-shadow: 0 1px 2px rgba(20,22,28,.25), inset 0 1px 0 rgba(255,255,255,.12);
}
.btn.primary:hover { background: var(--action-hi); border-color: var(--action-hi); }
.btn.danger { color: var(--bad); }
.btn.danger:hover { background: var(--bad-soft); border-color: var(--bad); }
.btn.danger-solid { background: var(--bad); border-color: var(--bad); color: #fff; }
.btn.danger-solid:hover { background: var(--bad); filter: brightness(1.08); }
.btn.ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--ink-2); }
.btn.ghost:hover { background: var(--hover); }
.btn.sm { height: 28px; padding: 0 10px; font-size: 12.5px; border-radius: 6px; }
.btn.sm svg { width: 13px; height: 13px; }
.btn.busy { pointer-events: none; opacity: .8; }
.btn.busy svg { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.filepick { position: relative; overflow: hidden; }
.filepick input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* ── Таблицы ─────────────────────────────────────────────────────────────── */

.tablewrap {
  overflow-x: auto; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
table { border-collapse: separate; border-spacing: 0; width: 100%; font-variant-numeric: tabular-nums; }
th, td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
thead th {
  position: sticky; top: 0; z-index: 2; background: var(--surface-2);
  color: var(--muted); font-size: 11.5px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; border-bottom: 1px solid var(--line);
}
.tablewrap th:first-child, .tablewrap td:first-child { padding-left: 18px; }
.tablewrap th:last-child, .tablewrap td:last-child { padding-right: 18px; }
.tablewrap thead th:first-child { border-top-left-radius: var(--radius); }
.tablewrap thead th:last-child  { border-top-right-radius: var(--radius); }
tbody tr { transition: background .1s; }
tbody tr:hover { background: var(--hover); }
tbody tr:last-child td { border-bottom: 0; }
tr[data-href] { cursor: pointer; }
td.num, th.num { text-align: right; }
td.shrink, th.shrink { width: 1%; }
td.wrap { white-space: normal; }
tfoot td { font-weight: 650; background: var(--surface-2); border-top: 1px solid var(--line); border-bottom: 0; }
.group-start td { border-top: 1px solid var(--line-strong); }
.panel table th, .panel table td { padding-left: 0; }
.panel table tbody tr:hover { background: transparent; }
td.empty { padding: 0; white-space: normal; }
.row-link { color: var(--ink); font-weight: 600; }
tr:hover .row-link { color: var(--accent-ink); }
.table-foot { display: flex; align-items: center; gap: 10px; padding: 11px 18px; color: var(--muted);
              font-size: 12.5px; border-top: 1px solid var(--line); }

/* Код маркировки: клик копирует */
.code {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  font: 12px var(--mono); letter-spacing: -.01em; color: var(--ink-2);
  cursor: copy; border-radius: 6px; padding: 2px 6px; margin: -2px -6px;
  transition: background .12s, color .12s;
}
.code:hover { background: var(--hover); color: var(--ink); }
.code svg { width: 13px; height: 13px; flex: none; opacity: 0; color: var(--muted); transition: opacity .12s; }
.code:hover svg { opacity: 1; }
.code.copied { background: var(--ok-soft); color: var(--ok); }
.code.copied svg { opacity: 1; color: var(--ok); }
.missing { color: var(--bad); font-size: 12.5px; font-weight: 550; }

/* ── Метки статусов ──────────────────────────────────────────────────────── */

.tag {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px;
  border-radius: 999px; font-size: 12px; font-weight: 550; white-space: nowrap;
  background: var(--hover); color: var(--ink-2); letter-spacing: 0;
}
.tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .85; }
.tag.posted, .tag.complete { background: var(--ok-soft);   color: var(--ok); }
.tag.new                   { background: var(--accent-soft); color: var(--accent-ink); }
.tag.confirm               { background: var(--warn-soft); color: var(--warn); }
.tag.cancelled             { background: var(--bad-soft);  color: var(--bad); }
.tag.info                  { background: var(--info-soft); color: var(--info); }
.tag.draft, .tag.cancel    { background: var(--hover);     color: var(--muted); }
.tag.lg { height: 26px; padding: 0 11px; font-size: 13px; }

/* Сколько осталось до срока вывода */
.due {
  display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px;
  border-radius: 99px; font-size: 12px; font-weight: 600; white-space: nowrap;
  background: var(--hover); color: var(--ink-2);
}
.due svg { width: 12px; height: 12px; }
.due.bad  { background: var(--bad-soft);  color: var(--bad); }
.due.warn { background: var(--warn-soft); color: var(--warn); }
.due.none { background: transparent; color: var(--muted); font-weight: 500; padding: 0; }

/* ── Сообщения на странице ───────────────────────────────────────────────── */

.callout {
  display: flex; gap: 12px; align-items: flex-start; margin: 0 0 16px; padding: 12px 14px;
  border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface);
  color: var(--ink-2); font-size: 13.5px; line-height: 1.5;
}
.callout > svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--muted); }
.callout .body { flex: 1; min-width: 0; }
.callout b, .callout strong { color: var(--ink); }
.callout.warn { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 26%, transparent); }
.callout.warn > svg { color: var(--warn); }
.callout.bad { background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 26%, transparent); }
.callout.bad > svg { color: var(--bad); }
.callout.info { background: var(--info-soft); border-color: color-mix(in srgb, var(--info) 22%, transparent); }
.callout.info > svg { color: var(--info); }
.callout.ok { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 22%, transparent); }
.callout.ok > svg { color: var(--ok); }

/* вспышки — на странице входа, где нет всплывающих уведомлений */
.flash {
  display: flex; gap: 10px; align-items: flex-start; margin: 0 0 16px; padding: 11px 14px;
  border-radius: var(--radius); border: 1px solid color-mix(in srgb, var(--ok) 25%, transparent);
  background: var(--ok-soft); color: var(--ink-2); line-height: 1.5;
}
.flash::before { content: ""; flex: none; width: 7px; height: 7px; margin-top: 7px; border-radius: 50%; background: var(--ok); }
.flash.warn { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 30%, transparent); font-weight: 450; }
.flash.warn::before { background: var(--warn); }

.empty-state { display: grid; justify-items: center; gap: 4px; padding: 46px 20px 50px;
               text-align: center; color: var(--muted); white-space: normal; }
.empty-state .ic { width: 46px; height: 46px; margin-bottom: 8px; border-radius: 13px;
                   display: grid; place-items: center; background: var(--hover); color: var(--muted); }
.empty-state .ic.ok { background: var(--ok-soft); color: var(--ok); }
.empty-state .ic svg { width: 22px; height: 22px; }
.empty-state b { color: var(--ink); font-size: 14.5px; font-weight: 600; }
.empty-state p { margin: 0; max-width: 420px; }

/* ── Детальные страницы ──────────────────────────────────────────────────── */

.kv { display: grid; grid-template-columns: minmax(110px, max-content) minmax(0, 1fr);
      gap: 10px 20px; margin: 0; font-size: 13.5px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

.stepper { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.step { position: relative; padding: 28px 12px 0 0; font-size: 13px; }
.step::before { content: ""; position: absolute; top: 8px; left: 24px; right: 6px; height: 2px;
                border-radius: 2px; background: var(--line-strong); }
.step:last-child::before { display: none; }
.step .node { position: absolute; top: 0; left: 0; width: 18px; height: 18px; border-radius: 50%;
              border: 2px solid var(--line-strong); background: var(--surface);
              display: grid; place-items: center; color: #fff; }
.step .node svg { width: 11px; height: 11px; stroke-width: 3; }
.step.done .node { background: var(--ok); border-color: var(--ok); }
.step.done::before { background: var(--ok); }
.step.now .node { border-color: var(--accent); box-shadow: 0 0 0 4px var(--ring); }
.step.now .node::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.step.fail .node { background: var(--bad); border-color: var(--bad); }
.step .t { font-weight: 600; color: var(--ink); }
.step .d { color: var(--muted); font-size: 12px; }
.step.todo .t { color: var(--muted); font-weight: 500; }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { position: relative; padding: 0 0 18px 28px; }
.timeline li::before { content: ""; position: absolute; left: 6px; top: 18px; bottom: 0;
                       width: 2px; border-radius: 2px; background: var(--line); }
.timeline li:last-child { padding-bottom: 0; }
.timeline li:last-child::before { display: none; }
.timeline .node { position: absolute; left: 0; top: 4px; width: 14px; height: 14px; border-radius: 50%;
                  background: var(--surface); border: 2px solid var(--line-strong); }
.timeline .node.ok     { border-color: var(--ok);     background: var(--ok-soft); }
.timeline .node.bad    { border-color: var(--bad);    background: var(--bad-soft); }
.timeline .node.info   { border-color: var(--info);   background: var(--info-soft); }
.timeline .node.accent { border-color: var(--accent); background: var(--accent-soft); }
.timeline .t { font-weight: 600; font-size: 13.5px; }
.timeline .t .was { color: var(--muted); font-weight: 400; text-decoration: line-through;
                    text-decoration-color: var(--faint); margin-right: 4px; }
.timeline .d { color: var(--muted); font-size: 12.5px; }

.codecard { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line);
            border-radius: var(--radius-sm); background: var(--surface-2); margin-bottom: 8px; }
.codecard:last-child { margin-bottom: 0; }
.codecard .mark { width: 34px; height: 34px; flex: none; border-radius: 8px; display: grid; place-items: center;
                  background: var(--ink); color: var(--bg); }
.codecard .mark svg { width: 16px; height: 16px; }
.codecard .body { flex: 1; min-width: 0; }
.codecard .meta { color: var(--muted); font-size: 12px; margin-top: 4px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.qrbox { display: grid; place-items: center; padding: 16px; border-radius: var(--radius-sm);
         background: #fff; border: 1px solid var(--line); }
.qrbox img { width: 100%; max-width: 220px; image-rendering: pixelated; display: block; }

.integration { display: flex; gap: 16px; align-items: flex-start; }
.integration .logo { width: 46px; height: 46px; flex: none; border-radius: 12px; display: grid; place-items: center;
                     color: #fff; background: linear-gradient(135deg, #2a2a31, #111114);
                     box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), var(--shadow-lg); }
.integration .logo svg { width: 22px; height: 22px; }
.integration .body { flex: 1; min-width: 0; }
.integration h3 { margin: 0; font-size: 15.5px; font-weight: 650; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.integration p { margin: 3px 0 0; color: var(--muted); font-size: 13px; }

details.more > summary { cursor: pointer; color: var(--muted); font-size: 13px; list-style: none;
                         display: inline-flex; align-items: center; gap: 6px; user-select: none; }
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary svg { width: 14px; height: 14px; transition: transform .15s; }
details.more[open] > summary svg { transform: rotate(90deg); }
details.more > summary:hover { color: var(--ink); }
details.more > .inner { margin-top: 12px; }

/* ── Настройки ───────────────────────────────────────────────────────────── */

.set-row { display: grid; grid-template-columns: minmax(200px, 300px) minmax(0, 1fr);
           gap: 18px 48px; padding: 26px 0; border-bottom: 1px solid var(--line); }
.set-row:first-of-type { padding-top: 4px; }
.set-row .about h2 { margin: 0 0 6px; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.set-row .about h2 svg { width: 16px; height: 16px; color: var(--muted); }
.set-row .about p { margin: 0; color: var(--muted); font-size: 13px; }
.set-row .fields { max-width: 560px; }
.savebar { position: sticky; bottom: 0; z-index: 10; display: flex; align-items: center; justify-content: flex-end;
           gap: 12px; padding: 16px 0; background: linear-gradient(transparent, var(--bg) 40%); }
.saved { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px; border-radius: 99px;
         background: var(--ok-soft); color: var(--ok); font-size: 11.5px; font-weight: 600; }
.saved svg { width: 11px; height: 11px; stroke-width: 3; }

/* ── Уведомления ─────────────────────────────────────────────────────────── */

.toasts { position: fixed; right: 20px; bottom: 20px; z-index: 100; display: grid; gap: 10px;
          width: min(420px, calc(100vw - 32px)); pointer-events: none; }
.toast {
  pointer-events: auto; display: flex; gap: 11px; align-items: flex-start;
  padding: 12px 10px 12px 14px; border-radius: 12px;
  background: #18181b; color: #f4f4f5; border: 1px solid #2a2a30;
  box-shadow: 0 18px 44px -14px rgba(0,0,0,.45); font-size: 13.5px; line-height: 1.45;
  animation: toast-in .24s cubic-bezier(.2, .9, .3, 1.15);
}
.toast .ic { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
             background: #3ecf8e; color: #0b2a1b; }
.toast .ic svg { width: 12px; height: 12px; stroke-width: 3; }
.toast.warn .ic { background: #f0b04b; color: #2a1c05; }
.toast .text { flex: 1; min-width: 0; padding-top: 1px; overflow-wrap: anywhere; }
.toast .x { flex: none; width: 24px; height: 24px; border: 0; border-radius: 6px; background: transparent;
            color: #a1a1aa; cursor: pointer; display: grid; place-items: center; }
.toast .x:hover { background: #26262c; color: #fff; }
.toast .x svg { width: 14px; height: 14px; }
.toast.out { animation: toast-out .18s ease forwards; }
@keyframes toast-in  { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px); } }

/* ── Командная палитра и диалоги ─────────────────────────────────────────── */

.overlay {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: start center;
  padding: 12vh 16px 16px; background: rgba(9, 9, 11, .42); backdrop-filter: blur(3px);
  animation: fade .12s ease;
}
.overlay.center { place-items: center; padding: 16px; }
@keyframes fade { from { opacity: 0; } }
@keyframes pop  { from { opacity: 0; transform: translateY(-6px) scale(.985); } }

.cmdk { width: min(640px, 100%); overflow: hidden; background: var(--surface); border: 1px solid var(--line);
        border-radius: 14px; box-shadow: var(--shadow-xl); animation: pop .16s cubic-bezier(.2, .9, .3, 1.1); }
.cmdk-search { display: flex; align-items: center; gap: 10px; padding: 0 16px; border-bottom: 1px solid var(--line); }
.cmdk-search > svg { width: 18px; height: 18px; color: var(--faint); flex: none; }
.cmdk-search input[type=search] { flex: 1; height: 56px; border: 0; background: transparent; box-shadow: none;
                                  padding: 0; font-size: 15.5px; }
.cmdk-search input[type=search]:focus { box-shadow: none; }
.cmdk-list { max-height: min(440px, 58vh); overflow-y: auto; padding: 6px; }
.cmdk-head { padding: 10px 10px 5px; color: var(--muted); font-size: 11px; font-weight: 600;
             letter-spacing: .05em; text-transform: uppercase; }
.cmdk-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 40px; padding: 7px 10px;
             border: 0; border-radius: 8px; background: transparent; color: var(--ink);
             font: inherit; font-size: 14px; text-align: left; cursor: pointer; text-decoration: none !important; }
.cmdk-item > svg { width: 17px; height: 17px; color: var(--muted); flex: none; }
.cmdk-item .label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmdk-item .label small { display: block; color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
.cmdk-item .meta { margin-left: auto; padding-left: 10px; color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.cmdk-item.on { background: var(--hover); }
.cmdk-item.on > svg { color: var(--accent); }
.cmdk-empty { padding: 30px 20px; text-align: center; color: var(--muted); }
.cmdk-foot { display: flex; gap: 16px; padding: 9px 14px; border-top: 1px solid var(--line);
             background: var(--surface-2); color: var(--muted); font-size: 12px; }
.cmdk-foot span { display: inline-flex; align-items: center; gap: 6px; }
body.locked { overflow: hidden; }

.dialog { width: min(470px, 100%); padding: 22px 22px 18px; background: var(--surface); border: 1px solid var(--line);
          border-radius: 14px; box-shadow: var(--shadow-xl); animation: pop .16s cubic-bezier(.2, .9, .3, 1.1); }
.dialog .ic { width: 42px; height: 42px; margin-bottom: 14px; border-radius: 12px; display: grid; place-items: center;
              background: var(--accent-soft); color: var(--accent); }
.dialog .ic svg { width: 20px; height: 20px; }
.dialog.danger .ic { background: var(--bad-soft); color: var(--bad); }
.dialog h3 { margin: 0 0 6px; font-size: 16.5px; font-weight: 650; letter-spacing: -.01em; }
.dialog p { margin: 0; color: var(--muted); white-space: pre-line; }
.dialog .actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 22px; }

/* Панель массовых действий: появляется, когда что-то выбрано */
.bulkbar {
  position: fixed; bottom: 22px; left: calc(var(--sidebar) + (100vw - var(--sidebar)) / 2); z-index: 60;
  display: flex; align-items: center; gap: 8px; padding: 7px 7px 7px 16px;
  max-width: calc(100vw - var(--sidebar) - 32px); flex-wrap: wrap;
  border-radius: 14px; background: #18181b; color: #fff; border: 1px solid #2a2a30;
  box-shadow: 0 22px 50px -16px rgba(0,0,0,.55);
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  transition: transform .2s cubic-bezier(.2, .9, .3, 1.15), opacity .15s;
}
.bulkbar.on { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.bulkbar .n { font-weight: 650; white-space: nowrap; margin-right: 6px; }
.bulkbar .sep { width: 1px; align-self: stretch; margin: 4px; background: #2e2e35; }
.bulkbar .btn { box-shadow: none; }
.bulkbar .btn:not(.primary) { background: #232328; border-color: #33333a; color: #f4f4f5; }
.bulkbar .btn:not(.primary):hover { background: #2c2c33; }
.bulkbar select, .bulkbar input[type=text] { background-color: #232328; border-color: #33333a; color: #f4f4f5; }

/* ── Вход ──────────────────────────────────────────────────────────────────
   Видео моста на рассвете на весь экран, как у витрин AI-сервисов (Mercury, Magnific,
   Luma). Слева текст на мягкой вуали цвета фона, справа стеклянная карточка формы,
   внизу три цифры. Все цвета текста — из токенов, поэтому тёмная тема работает сама:
   вуаль темнеет, видео приглушается. */
.auth {
  position: relative; min-height: 100vh; min-height: 100dvh; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; gap: 24px;
  padding: 26px clamp(20px, 4vw, 56px) 24px; background: #e9eef5;
}
.auth-bg { position: absolute; inset: 0; z-index: 0; background: #e9eef5; }
.auth-bg video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%;
}
.auth-bg::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--bg) 90%, transparent) 0%,
                           color-mix(in srgb, var(--bg) 72%, transparent) 30%,
                           color-mix(in srgb, var(--bg) 14%, transparent) 56%, transparent 72%),
    linear-gradient(0deg, color-mix(in srgb, var(--bg) 80%, transparent) 0%, transparent 26%);
}
.auth > :not(.auth-bg) { position: relative; z-index: 1; }

.auth-top { display: flex; align-items: center; gap: 16px; }
.auth-top .brand { padding: 0; }
.auth-tools { margin-left: auto; display: flex; gap: 6px; align-items: stretch; }
.auth-theme, .auth-tools .sound-toggle { background: color-mix(in srgb, var(--surface) 70%, transparent);
              backdrop-filter: blur(10px); }
.auth-theme { margin: 0; }
.auth-tools .sound-toggle { min-height: 32px; }

.auth-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
             gap: clamp(28px, 5vw, 80px); align-items: center; }
.auth-copy { max-width: 680px; display: grid; gap: 18px; justify-items: start; }
.auth-chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; color: var(--ink-2); white-space: nowrap;
  background: color-mix(in srgb, var(--surface) 72%, transparent); backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent);
}
.auth-chip .d { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.auth-chip .d:not(:first-child) { margin-left: 6px; }
.auth-chip .d.wb { background: #a8228f; }
.auth-chip .d.oz { background: #2360d8; }
.auth-chip .d.cz { background: #1f8a63; }
.auth-copy h2 { font-family: var(--display); font-weight: 600; color: var(--ink); margin: 0;
                font-size: clamp(30px, 3.1vw, 46px); line-height: 1.08; letter-spacing: -.02em;
                text-wrap: balance; }   /* заголовок KIZWAY длиннее: строки выравниваются по длине */
.auth-copy p { margin: 0; color: var(--ink-2); font-size: 16px; line-height: 1.55; max-width: 520px; }

/* Лента возможностей: одна в фокусе, остальные приглушены */
/* Лента возможностей — «барабан»: строки крутятся по цилиндру, текущая — спереди. Высота ленты
   постоянная, меняются только transform и прозрачность, поэтому соседние блоки не двигаются: до
   17.10.2026 описание раскрывалось через max-height и дёргало весь экран. Позиция — data-pos
   (0 — спереди, ±1 — соседи, top/bottom — за краем), её ставит login-hero.js */
.auth-rail { list-style: none; margin: 10px 0 0; padding: 0; position: relative; height: 176px;
             justify-self: stretch; width: min(100%, 560px);   /* строки абсолютные — ширину задаём сами */
             perspective: 700px; perspective-origin: 0 50%; }
.auth-rail li { position: absolute; left: 0; right: 0; top: 50%; height: 64px; margin-top: -32px;
                padding: 0 0 0 24px; cursor: default; opacity: 0; transform-origin: 0 50%;
                transform: translateY(96px) rotateX(-70deg) scale(.9); backface-visibility: hidden;
                transition: transform .85s cubic-bezier(.22, .8, .24, 1), opacity .85s ease; }
.auth-rail li[data-pos="0"] { opacity: 1; transform: none; }
.auth-rail li[data-pos="-1"] { opacity: .3; transform: translateY(-62px) rotateX(42deg) scale(.94); }
.auth-rail li[data-pos="1"] { opacity: .3; transform: translateY(62px) rotateX(-42deg) scale(.94); }
.auth-rail li[data-pos="top"] { opacity: 0; transform: translateY(-96px) rotateX(70deg) scale(.9); }
.auth-rail li[data-pos="bottom"] { opacity: 0; transform: translateY(96px) rotateX(-70deg) scale(.9); }
.auth-rail li.jump { transition: none; }
/* крутят руками (колесо, клик, ↑/↓) — барабан отзывчивее; соседние строки кликабельны */
.auth-rail.manual li { transition-duration: .5s; }
.auth-rail li[data-pos="1"], .auth-rail li[data-pos="-1"] { cursor: pointer; }
.auth-rail:focus-visible { outline: 2px solid var(--ring); outline-offset: 6px; border-radius: 12px; }
.auth-rail li::before { content: ""; position: absolute; left: 0; top: 13px; width: 10px; height: 2px;
                        border-radius: 2px; background: var(--ink-2); transition: width .5s ease, background .5s; }
.auth-rail li[data-pos="0"]::before { width: 16px; background: linear-gradient(90deg, var(--mark-l), var(--accent)); }
.auth-rail li b { display: block; font-size: 19px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.auth-rail li span { display: block; margin-top: 3px; font-size: 13.5px; color: var(--ink-2); white-space: nowrap;
                     overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity .5s ease .15s; }
.auth-rail li[data-pos="0"] span { opacity: 1; }

/* Стеклянная карточка формы */
.auth-card {
  width: 100%; padding: 30px 30px 24px; border-radius: 22px;
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid color-mix(in srgb, var(--surface) 60%, transparent);
  box-shadow: 0 40px 90px -40px rgba(15, 25, 50, .45), 0 2px 6px -2px rgba(15, 25, 50, .06);
}
.auth-card h1 { font-size: 28px; letter-spacing: -.02em; margin: 0 0 6px; }
.auth-card .sub { color: var(--muted); font-size: 13.5px; margin: 0 0 22px; }
.auth-card label.field { margin-bottom: 14px; gap: 7px; }
.auth-card .lbl { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.auth-card label.field input { max-width: none; height: 44px; border-radius: 11px; }
.auth-card .btn.primary.lg { width: 100%; height: 46px; margin-top: 10px; font-size: 14.5px;
                             border-radius: 11px; gap: 8px;
                             background: linear-gradient(180deg,
                               color-mix(in srgb, var(--accent) 88%, #fff) 0%, var(--accent) 100%);
                             box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--accent) 80%, transparent),
                                         inset 0 1px 0 rgba(255,255,255,.18); }
.auth-card .btn.primary.lg:hover { filter: brightness(1.04); }
.auth-card .btn.primary.lg svg { width: 16px; height: 16px; }
.auth-note { display: flex; gap: 9px; margin-top: 20px; padding-top: 16px;
             border-top: 1px solid var(--line); color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.auth-note svg { width: 15px; height: 15px; flex: none; margin-top: 1px; color: var(--ok); }
.auth-help { margin-top: 14px; font-size: 13px; color: var(--muted); }
/* Ссылки под формой входа и на экранах учётной записи (регистрация, сброс пароля) */
.auth-links { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
              margin-top: 14px; font-size: 13px; color: var(--muted); }
.auth-card .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
@media (max-width: 520px) { .auth-card .row2 { grid-template-columns: 1fr; } }
.auth-card .check { display: flex; gap: 9px; align-items: flex-start; margin: 4px 0 10px;
                    font-size: 12.5px; line-height: 1.45; color: var(--ink-2); }
.auth-card .check input { margin-top: 2px; flex: none; }
.auth-card .hint { font-size: 12px; color: var(--muted); margin: -6px 0 12px; }
.auth-card .mail-box { padding: 14px 16px; border-radius: 12px; background: var(--accent-soft);
                       color: var(--ink); font-size: 13.5px; line-height: 1.5; margin: 0 0 14px;
                       overflow-wrap: anywhere; }

.auth-foot { display: flex; align-items: end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.auth-metrics { display: flex; margin: 0; max-width: 640px; flex: 1 1 480px; }
.auth-metrics > div { flex: 1; padding-right: 20px; }
.auth-metrics > div + div { padding-left: 20px; border-left: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); }
.auth-metrics dt { font-family: var(--display); font-size: 21px; font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.auth-metrics dd { margin: 2px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--ink-2); }
.auth-legal { padding: 0; }
.auth-legal a { color: var(--ink-2); }

/* Открытая страница kizway.ru (landing.html, 23.10.2026): тот же фон, что у входа, но длинная —
   фон закреплён, контент прокручивается на стеклянных блоках */
.land { overflow: visible; }
.land .auth-bg { position: fixed; }
.land-nav { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.land-nav > a:not(.btn) { color: var(--ink-2); font-weight: 600; font-size: 14px; padding: 6px 10px; }
.land-main { display: grid; gap: clamp(28px, 4vw, 48px); max-width: 1120px; width: 100%; }
.land-hero { padding: clamp(12px, 4vw, 48px) 0 0; }
.land-hero h1 { font-family: var(--display); font-weight: 600; color: var(--ink); margin: 0;
                font-size: clamp(30px, 3.4vw, 48px); line-height: 1.08; letter-spacing: -.02em; text-wrap: balance; }
.land-hero p { max-width: 640px; }
.land-cta { display: flex; gap: 10px; flex-wrap: wrap; }
.land-block { padding: clamp(18px, 3vw, 28px); border-radius: var(--radius-lg);
              background: color-mix(in srgb, var(--surface) 82%, transparent); backdrop-filter: blur(14px);
              box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 7%, transparent); }
.land-block h2 { margin: 0 0 6px; font-size: 22px; letter-spacing: -.01em; }
.land-sub { margin: 0 0 16px; color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.land-sub:last-child { margin: 16px 0 0; }
.land-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.land-plan { display: grid; grid-template-rows: auto auto 1fr auto; gap: 10px; padding: 18px;
             border-radius: var(--radius); background: var(--surface);
             box-shadow: inset 0 0 0 1px var(--line); }
.land-plan.soon { opacity: .72; }
.land-plan header { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: center; }
.land-plan header small { grid-column: 2; color: var(--muted); font-size: 12px; }
.land-ico svg { width: 22px; height: 22px; color: var(--accent); }
.land-plan b { font-size: 17px; }
.land-promise { margin: 0; font-weight: 600; color: var(--ink); font-size: 14px; line-height: 1.4; }
.land-plan ul { margin: 0; padding-left: 18px; color: var(--ink-2); font-size: 13.5px; line-height: 1.5; }
.land-price b { font-family: var(--display); font-size: 26px; }
.land-price s { color: var(--muted); }
.land-price small { color: var(--muted); font-size: 12.5px; margin-left: 4px; }
.land-price .soon-tag { font-weight: 600; color: var(--muted); }
.land-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 24px; }
.land-links { margin: 8px 0 0; padding-left: 18px; line-height: 1.9; }
.land-req { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 8px 0 0; font-size: 14px; }
.land-req dt { color: var(--muted); }
.land-req dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .land-two { grid-template-columns: minmax(0, 1fr); }
  .land-nav > a:not(.btn) { display: none; }
  .land-req { grid-template-columns: minmax(0, 1fr); }
  .land-req dt { margin-top: 6px; }
}

/* Тёмная тема: тот же рассвет, но приглушённый — светлое видео не должно слепить */
:root[data-theme="dark"] .auth, :root[data-theme="dark"] .auth-bg { background: #0b0d12; }
:root[data-theme="dark"] .auth-bg video { filter: brightness(.5) saturate(.85); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .auth, :root:not([data-theme="light"]) .auth-bg { background: #0b0d12; }
  :root:not([data-theme="light"]) .auth-bg video { filter: brightness(.5) saturate(.85); }
}

@media (max-width: 1240px) {
  .auth-rail li b { font-size: 17px; }
  .auth-metrics dt { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important;
                           transition-duration: .01ms !important; }
}

/* ── Адаптив ─────────────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .grid.cols-2, .grid.side { grid-template-columns: minmax(0, 1fr); }
  .dash-cols { grid-template-columns: minmax(0, 1fr); }
  .dash-col { display: contents; }               /* одна лента в порядке важности */
  .dash-o1 { order: 1; } .dash-o2 { order: 2; } .dash-o3 { order: 3; }
  .dash-o4 { order: 4; } .dash-o5 { order: 5; } .dash-o6 { order: 6; }
  .set-row { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}

@media (max-width: 980px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  /* навигация — одной строкой с прокруткой, как вкладки в мобильных приложениях */
  .sidebar { position: static; height: auto; flex-direction: row; flex-wrap: nowrap;
             align-items: center; gap: 2px; padding: 8px 10px; overflow-x: auto; scrollbar-width: none; }
  .sidebar::-webkit-scrollbar { display: none; }
  .brand { padding: 2px 6px 2px 0; }
  .nav-item { white-space: nowrap; padding: 7px 9px; }
  .brand-name, .nav-label, .userchip .who, .theme-switch, .side-search kbd, .side-search span { display: none; }
  .side-search { width: 34px; margin: 0; padding: 0; justify-content: center; }
  .nav-group { margin: 0; display: flex; gap: 2px; }
  .sidebar-foot { margin: 0 0 0 8px; padding: 0; }
  .userchip { border: 0; padding: 0; }
  .topbar { padding: 0 16px; }
  .topbar .status-chip.wb { display: none; }
  main { padding: 20px 16px 80px; }
  .search { flex: 1 1 220px; }
  .search input { width: 100%; }
  .bulkbar { left: 50%; max-width: calc(100vw - 24px); }
  /* телефон: видео остаётся фоном, текст короче, форма сразу под заголовком */
  .auth { padding: 18px 16px 22px; gap: 18px; }
  .auth .brand-name { display: block; }
  .auth-main { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 20px; }
  .auth-copy p, .auth-rail, .auth-metrics { display: none; }
  .auth-copy h2 { font-size: 30px; }
  .auth-bg::after { background: color-mix(in srgb, var(--bg) 55%, transparent); }
  .auth-card { padding: 24px 20px 20px; }
  .auth-foot { justify-content: center; }
}

/* ── Помощь: подключение и статьи ───────────────────────────────────────────
   Чек-лист строит мост: каждый пройденный шаг — пролёт. Все шесть — и мост зеленеет. */

.kb-connect {
  display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; margin: 0 0 26px;
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface);
  box-shadow: var(--shadow);
}
.kb-bridge {
  position: relative; padding: 18px 22px 8px;
  background:
    radial-gradient(520px 200px at 85% 0%, color-mix(in srgb, var(--brand) 22%, transparent), transparent 65%),
    var(--span);
}
.kb-bridge svg { display: block; width: 100%; max-width: 760px; height: auto; margin: 0 auto; }
/* путь кода сквозь шесть арок (18.10.2026): пройденный шаг — арка в коралле знака */
.kb-path { fill: none; stroke: rgba(255,255,255,.28); stroke-width: 2; stroke-dasharray: 2 7;
           stroke-linecap: round; }
.kb-arch { fill: none; stroke: rgba(255,255,255,.2); stroke-width: 4; stroke-linecap: round; }
.kb-arch.on { stroke: var(--brand); stroke-width: 6;
              animation: kb-lay .8s cubic-bezier(.25, .9, .2, 1) both;
              animation-delay: calc(var(--i) * .12s); stroke-dasharray: 220; }
@keyframes kb-lay { from { stroke-dashoffset: 220; } to { stroke-dashoffset: 0; } }
.kb-connect.done .kb-arch.on { stroke: var(--brand); }
.kb-connect.done .kb-path { stroke: color-mix(in srgb, var(--brand) 70%, transparent); stroke-dasharray: none; }
.kb-shore-label { fill: rgba(255,255,255,.55); font: 700 11px "Manrope", system-ui, sans-serif;
                  letter-spacing: .08em; }
.kb-progress { position: absolute; right: 22px; top: 14px; color: var(--span-muted);
               font-size: 12.5px; font-weight: 600; }
.kb-progress b { font-family: var(--display); font-weight: 700; font-size: 26px; color: #fff;
                 margin-right: 2px; }

.kb-steps { list-style: none; margin: 0; padding: 6px 0; }
.kb-steps li {
  display: flex; align-items: center; gap: 14px; padding: 12px 22px;
  border-top: 1px solid var(--line);
}
.kb-steps li:first-child { border-top: 0; }
.kb-dot {
  width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid var(--line-strong); color: var(--muted); font-size: 12.5px; font-weight: 700;
}
.kb-steps li.done .kb-dot { border-color: var(--ok); background: var(--ok-soft); color: var(--ok); }
.kb-dot svg { width: 14px; height: 14px; stroke-width: 2.6; }
.kb-step-body { flex: 1; min-width: 0; }
.kb-step-body b { display: block; font-size: 14px; font-weight: 700; }
.kb-step-body span { display: block; margin-top: 2px; color: var(--muted); font-size: 12.5px; }
.kb-steps li.done .kb-step-body b { color: var(--ink-2); }
.kb-step-acts { display: flex; gap: 6px; flex: none; }

.kb-h2 { margin: 0 0 12px; font-family: var(--display); font-size: 22px; font-weight: 700; }
.kb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.kb-card {
  display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  box-shadow: var(--shadow); text-decoration: none !important;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.kb-card:hover { border-color: var(--accent); box-shadow: var(--shadow-lg); transform: translateY(-1px); }
.kb-card-ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center;
              background: var(--accent-soft); color: var(--accent); margin-bottom: 4px; }
.kb-card-ic svg { width: 17px; height: 17px; }
.kb-card b { font-size: 14.5px; font-weight: 700; }
.kb-card span:last-child { color: var(--muted); font-size: 13px; line-height: 1.5; }

/* статья: колонка текста для чтения, оглавление справа */
.kb-layout { display: grid; grid-template-columns: minmax(0, 720px) 230px; gap: 36px;
             align-items: start; }
.kb-article h1 { font-size: 34px; margin: 4px 0 8px; }
.kb-lead { color: var(--muted); font-size: 16px; line-height: 1.55; margin: 0 0 22px; }
.kb-article h2 { font-family: var(--display); font-size: 21px; font-weight: 700;
                 margin: 30px 0 10px; letter-spacing: -.005em; }
.kb-article p, .kb-article li { font-size: 15px; line-height: 1.65; color: var(--ink-2); }
.kb-article p { margin: 0 0 12px; }
.kb-article a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px;
                text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.kb-article code { font-size: 13px; }
.kb-steps-list { margin: 0 0 14px; padding-left: 22px; }
.kb-steps-list li { margin: 0 0 8px; padding-left: 4px; }
.kb-steps-list li::marker { color: var(--accent); font-weight: 700; }

.kb-note {
  display: flex; gap: 12px; margin: 22px 0 6px; padding: 14px 16px; border-radius: var(--radius);
  background: var(--accent-soft); color: var(--ink-2); font-size: 14px; line-height: 1.6;
}
.kb-note > svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--accent); }
.kb-note.warn { background: var(--warn-soft); }
.kb-note.ok { background: var(--ok-soft); }
.kb-note.ok > svg { color: var(--ok); }
.kb-note.warn > svg { color: var(--warn); }

.kb-table { width: 100%; border-collapse: collapse; margin: 6px 0 14px; font-size: 14px; }
.kb-table th { text-align: left; font-size: 12px; font-weight: 700; color: var(--muted);
               letter-spacing: .04em; text-transform: uppercase; padding: 8px 12px 8px 0;
               border-bottom: 1px solid var(--line); }
.kb-table td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); vertical-align: top;
               color: var(--ink-2); line-height: 1.55; }

.kb-errors { display: grid; gap: 10px; margin: 8px 0 6px; }
.kb-error { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius);
            background: var(--surface); }
.kb-error b { display: block; font-size: 14.5px; margin-bottom: 4px; }
.kb-error p { margin: 0; font-size: 14px; }

.kb-next {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 12px;
  margin: 34px 0 0; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: var(--ink); text-decoration: none !important;
  transition: border-color .15s;
}
.kb-next:hover { border-color: var(--accent); }
.kb-next span { color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .06em;
                text-transform: uppercase; }
.kb-next b { grid-column: 1; font-size: 15.5px; }
.kb-next svg { grid-column: 2; grid-row: 1 / span 2; width: 18px; height: 18px; color: var(--accent); }

.kb-toc { position: sticky; top: 80px; display: flex; flex-direction: column; gap: 2px;
          padding-left: 14px; border-left: 1px solid var(--line); }
.kb-toc a { padding: 6px 8px; border-radius: 7px; color: var(--muted); font-size: 13px;
            text-decoration: none !important; }
.kb-toc a:hover { color: var(--ink); background: var(--hover); }
.kb-toc a.on { color: var(--accent-ink); font-weight: 700; background: var(--accent-soft); }
.kb-toc-home { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; color: var(--ink) !important;
               font-weight: 600; }
.kb-toc-home svg { width: 14px; height: 14px; }

@media (max-width: 1000px) {
  .kb-layout { grid-template-columns: minmax(0, 1fr); }
  .kb-toc { position: static; border-left: 0; padding-left: 0; }
  .kb-step-acts .ghost { display: none; }
}
@media (prefers-reduced-motion: reduce) { .kb-arch.on { animation: none; stroke-dasharray: none; } }

/* ── Пролёт: графитовый блок с главным действием раздела ───────────────────
   Тёмный остров на светлой странице: глаз идёт туда первым, и там же стоит
   единственная кнопка, которую в этом разделе вообще нужно нажимать. */

/* ── Автопилот: подключаемые функции ───────────────────────────────────────
   Карточка честно говорит, что сервис начнёт делать сам, и чего для этого требует. */

.autopilot { margin: 0 0 28px; }
.autopilot-head h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 17px; }
.autopilot-head p { margin: 0 0 14px; color: var(--muted); font-size: 13.5px; max-width: 640px; }
.autopilot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }

.auto-card {
  display: flex; flex-direction: column; gap: 8px; padding: 18px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  box-shadow: var(--shadow); transition: border-color .15s;
}
.auto-card.on { border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); }
.auto-card header { display: flex; align-items: center; gap: 8px; }
.auto-card header b { font-size: 15px; }
.auto-card .lead { margin: 0; color: var(--ink-2); font-size: 13.5px; line-height: 1.5; }
.auto-card ul { margin: 2px 0 0; padding-left: 18px; color: var(--muted); font-size: 13px;
                line-height: 1.55; }
.auto-card ul li { margin-bottom: 3px; }
.auto-card .needs { display: flex; gap: 8px; margin: 4px 0 0; padding: 10px 12px;
                    border-radius: var(--radius-sm); background: var(--surface-2);
                    color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.auto-card .needs svg { width: 15px; height: 15px; flex: none; margin-top: 1px; }
.auto-card footer { display: flex; align-items: center; gap: 10px; margin-top: auto;
                    padding-top: 12px; border-top: 1px solid var(--line); }
.auto-card .state { display: flex; align-items: center; gap: 7px; flex: 1;
                    font-size: 13px; font-weight: 600; color: var(--ink-2); }
.auto-card .state small { color: var(--muted); font-weight: 500; }

.auto-note { display: flex; align-items: center; gap: 7px; margin-top: 6px; font-size: 13px; }
.auto-note svg { width: 15px; height: 15px; color: var(--ok); flex: none; }
.auto-note a { color: var(--accent-ink); text-decoration: underline; }

.span-hero {
  position: relative; overflow: hidden; margin: 0 0 18px;
  border-radius: var(--radius-lg); background:
    radial-gradient(520px 260px at 82% 20%, color-mix(in srgb, var(--brand) 24%, transparent), transparent 62%),
    var(--span);
  color: var(--span-ink); box-shadow: var(--shadow-lg);
}
.span-hero-art { position: absolute; right: 0; bottom: 0; width: 520px; max-width: 58%;
                 height: auto; opacity: .55; pointer-events: none; }
.span-hero-art .sh-ground { fill: none; stroke: rgba(255,255,255,.18); stroke-width: 1.2; }
.span-hero-art .sh-arch { fill: none; stroke: rgba(255,255,255,.34); stroke-width: 4; stroke-linecap: round; }
.span-hero-art .sh-arch.lead { stroke: var(--brand); stroke-width: 6; }
.span-hero-art .sh-arch.far { stroke: rgba(255,255,255,.2); }
.span-hero-art .sh-path { fill: none; stroke: color-mix(in srgb, var(--brand) 80%, transparent); stroke-width: 2;
                          stroke-dasharray: 3 9; stroke-linecap: round; animation: sh-flow 1.6s linear infinite; }
.span-hero-art .sh-codes rect { fill: #fff; opacity: .85; }
@keyframes sh-flow { to { stroke-dashoffset: -24; } }
@media (prefers-reduced-motion: reduce) { .span-hero-art .sh-path { animation: none; } }

.span-hero-body { position: relative; padding: 26px 28px 28px; max-width: 620px; }
.span-hero-body .eyebrow { color: var(--span-hi); font-weight: 700; letter-spacing: .02em; }
.span-hero-body h2 { margin: 8px 0 0; font-family: var(--display); font-size: 34px; line-height: 1.12;
                     font-weight: 700; letter-spacing: -.015em; }
.span-hero-body p { margin: 12px 0 20px; color: var(--span-muted); font-size: 14px; line-height: 1.55;
                    max-width: 540px; }
.btn.lg { height: 46px; padding: 0 22px; font-size: 14.5px; font-weight: 700; border-radius: var(--radius); }

/* Главное действие на графитовом блоке — коралл справа вверху: видно сразу (21.10.2026) */
.span-hero-cta { position: absolute; top: 24px; right: 26px; z-index: 1; }
.span-hero:has(.span-hero-cta) .span-hero-body { max-width: min(620px, calc(100% - 330px)); }
.btn.hero-go { height: 52px; padding: 0 24px; font-size: 15px; border: 0; color: #fff; background: var(--brand);
               box-shadow: 0 10px 28px -8px color-mix(in srgb, var(--brand) 75%, transparent),
                           inset 0 1px 0 rgba(255,255,255,.22);
               animation: hero-go-ring 2.4s ease-out infinite; }
.btn.hero-go:hover { background: color-mix(in srgb, var(--brand) 88%, #fff); transform: translateY(-1px); }
.btn.hero-go:active { transform: translateY(0); }
.btn.hero-go:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.btn.hero-go svg { width: 18px; height: 18px; }
@keyframes hero-go-ring {
  0% { box-shadow: 0 10px 28px -8px color-mix(in srgb, var(--brand) 75%, transparent), 0 0 0 0 color-mix(in srgb, var(--brand) 55%, transparent); }
  70%, 100% { box-shadow: 0 10px 28px -8px color-mix(in srgb, var(--brand) 75%, transparent), 0 0 0 12px transparent; }
}
@media (prefers-reduced-motion: reduce) { .btn.hero-go { animation: none; } }

@media (max-width: 860px) {
  .span-hero-art { opacity: .25; }
  .span-hero-body { max-width: none; }
  .span-hero-body h2 { font-size: 27px; }
  .span-hero:has(.span-hero-cta) .span-hero-body { max-width: none; padding-bottom: 6px; }
  .span-hero-cta { position: static; padding: 0 28px 26px; }
  .btn.hero-go { width: 100%; justify-content: center; }
}

/* ── Мост вывода из оборота: фотокадр и живой слой ──────────────────────────
   Сцена ничего не «строит»: этикетки кодов идут по настилу всё время, пока
   документ в пути (static/withdraw-scene.js), и уходят в дымку. Стадию видно
   по подписи под кадром и по печати УКЭП на этикетках, а ответ Честного ЗНАКа
   гасит поток и выводит плашку итога. Двигаются только transform и opacity —
   рисует видеокарта, страница не перерисовывается. */

/* знак «всё выведено» в пустом списке: путь кода пройден сквозь все арки */
.mini-path { width: 176px; height: auto; margin-bottom: 10px; }
.mini-path .arch { fill: none; stroke: var(--muted); stroke-width: 3; stroke-linecap: round; opacity: .7; }
.mini-path .way { fill: none; stroke: url(#dawn-path); stroke-width: 5; stroke-linecap: round; }
.mini-path .g-a { stop-color: var(--dawn-a); }
.mini-path .g-b { stop-color: var(--accent); }
.empty-state.built { background: radial-gradient(420px 160px at 50% 30%,
                       color-mix(in srgb, var(--dawn-a) 28%, transparent), transparent 70%),
                     radial-gradient(420px 160px at 62% 46%,
                       color-mix(in srgb, var(--dawn-b) 32%, transparent), transparent 70%); }

.bridge-card { overflow: hidden; }
.bridge-stage { position: relative; border-bottom: 1px solid var(--line); background: #e9edf3; }

.wd {
  position: relative; overflow: hidden; display: block;
  background: #eef1f6; isolation: isolate; aspect-ratio: 21 / 9;
}
.wd > img, .wd > video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: filter .7s ease, transform .9s ease;
}
.wd.settled > img, .wd.settled > video { filter: saturate(.86) brightness(1.04) blur(1.5px); transform: scale(1.02); }
.wd-layer { position: absolute; inset: 0; pointer-events: none; }

/* этикетка кода: канвас с Data Matrix, поверх — печать УКЭП отдельным слоем */
.wd-tag { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform, opacity; }
.wd-tag canvas { display: block; }
.wd-tag .seal { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity .45s ease; }
.wd-tag.signed .seal { opacity: 1; }
.wd.settled .wd-tag { opacity: 0 !important; transition: opacity .5s ease; }

/* подпись стадии поверх кадра — нужна там, где под кадром её нет */
.wd-say {
  position: absolute; left: 16px; bottom: 14px; z-index: 3;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 13px 7px 11px; border-radius: 999px;
  background: rgba(255, 255, 255, .84); backdrop-filter: blur(8px);
  border: 1px solid rgba(20, 22, 28, .07);
  box-shadow: 0 6px 20px -12px rgba(20, 22, 28, .5);
  font: 500 13px/1.2 "Manrope", system-ui, sans-serif; color: #3c414f;
  transition: opacity .4s ease;
}
.wd.settled .wd-say { opacity: 0; }
.wd-say .dot { width: 7px; height: 7px; border-radius: 50%; background: #ff5a3c; flex: none; }
.wd-say[data-tone="run"] .dot { animation: wd-pulse 1.5s ease-in-out infinite; }
.wd-say[data-tone="ok"] .dot { background: #1d7a53; }
.wd-say[data-tone="fail"] .dot { background: #be2a35; }
@keyframes wd-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .28; } }

/* плашка итога: поток погас, кадр ушёл на задний план */
.wd-plate {
  position: absolute; z-index: 4; left: 50%; top: 50%;
  width: min(460px, 82%); transform: translate(-50%, -46%) scale(.97);
  opacity: 0; visibility: hidden;
  display: flex; gap: 14px; align-items: flex-start;
  padding: 18px 20px; border-radius: 16px;
  background: rgba(255, 255, 255, .95); backdrop-filter: blur(10px);
  border: 1px solid rgba(20, 22, 28, .06);
  box-shadow: 0 30px 80px -20px rgba(20, 22, 28, .38);
  transition: opacity .5s ease, transform .5s cubic-bezier(.2, .8, .3, 1), visibility 0s .5s;
}
.wd-plate.in {
  opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); transition-delay: 0s;
}
.wd-plate .mark { flex: none; width: 38px; height: 38px; }
.wd-plate .mark circle { fill: none; stroke: #1d7a53; stroke-width: 3; opacity: .22; }
.wd-plate .mark path {
  fill: none; stroke: #1d7a53; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 40; stroke-dashoffset: 40;
}
.wd-plate.in .mark path { animation: wd-tick .5s .18s cubic-bezier(.2, .8, .3, 1) forwards; }
@keyframes wd-tick { to { stroke-dashoffset: 0; } }
.wd-plate h3 { margin: 1px 0 3px; font: 600 17px/1.25 var(--display); color: #14161c; }
.wd-plate p { margin: 0; font: 400 13px/1.45 "Manrope", system-ui, sans-serif; color: #5d6271; }
.wd-plate p b { color: #3c414f; font-weight: 600; }
.wd-plate .num {
  display: block; margin-top: 6px; font: 500 12px/1.4 var(--mono); color: #686d7c;
  overflow-wrap: anywhere;
}
.wd-plate.bad .mark circle, .wd-plate.bad .mark path { stroke: #be2a35; }

/* кнопка итога живёт на плашке: нажать «Готово» можно, не уводя глаз с ответа.
   Плашка всегда светлая — цвета кнопок здесь свои, а не из темы. */
.wd-acts { display: flex; gap: 8px; margin-top: 14px; }
.wd-acts .btn { border-color: #d5d9e2; background: #fff; color: #14161c; }
.wd-acts .btn:hover { background: #f0f2f7; border-color: #767b8a; }
.wd-acts .btn.primary { background: #1b1e27; border-color: #1b1e27; color: #fff; }
.wd-acts .btn.primary:hover { background: #2a2e3b; border-color: #2a2e3b; }

@media (max-width: 640px) {
  .wd { aspect-ratio: 16 / 10; }
  .wd-plate { width: min(420px, 90%); padding: 14px 16px; }
  .wd-say { left: 10px; bottom: 10px; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .wd > img, .wd > video { transition: none; }
  .wd-plate { transition: opacity .2s ease; transform: translate(-50%, -50%); }
  .wd-plate.in .mark path { animation: none; stroke-dashoffset: 0; }
}

.bridge-body { display: grid; grid-template-columns: 1fr; }
.bridge-steps {
  list-style: none; margin: 0; padding: 18px; display: grid; gap: 2px;
  grid-template-columns: repeat(4, 1fr);
}
.bridge-steps li {
  position: relative; padding: 12px 14px 12px 0; color: var(--muted);
  border-top: 2px solid var(--line); transition: color .3s, border-color .5s;
}
.bridge-steps li b { display: block; font-size: 13.5px; font-weight: 700; }
.bridge-steps li span { display: block; margin-top: 3px; font-size: 12px; line-height: 1.4;
                        overflow-wrap: anywhere; }
.bridge-steps li .doc-num { font-family: var(--mono); font-size: 11px; }

.bridge-card[data-step="1"] .bridge-steps li[data-at="1"],
.bridge-card[data-step="2"] .bridge-steps li[data-at="1"],
.bridge-card[data-step="2"] .bridge-steps li[data-at="2"],
.bridge-card[data-step="3"] .bridge-steps li:not([data-at="4"]),
.bridge-card[data-step="4"] .bridge-steps li {
  color: var(--ink); border-color: var(--accent);
}
.bridge-card[data-state="ok"][data-step="4"] .bridge-steps li { border-color: var(--ok); }
.bridge-card[data-state="fail"] .bridge-steps li[data-at="3"] { border-color: var(--bad); color: var(--bad); }

.bridge-card[data-state="run"][data-step="1"] .bridge-steps li[data-at="1"] b,
.bridge-card[data-state="run"][data-step="2"] .bridge-steps li[data-at="2"] b,
.bridge-card[data-state="run"][data-step="3"] .bridge-steps li[data-at="3"] b {
  animation: breathe 1.8s ease-in-out infinite;
}
@keyframes breathe { 50% { opacity: .55; } }

.bridge-foot {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 18px; border-top: 1px solid var(--line); background: var(--surface-2);
}
.bridge-say { display: flex; align-items: center; gap: 10px; flex: 1 1 320px;
              min-width: 0; color: var(--ink-2); font-size: 13.5px; }
.bridge-say .spin {
  width: 14px; height: 14px; flex: none; border-radius: 50%;
  border: 2px solid var(--accent); border-right-color: transparent;
  animation: spin .9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.bridge-card[data-state="ok"] .bridge-say .spin { border: 2px solid var(--ok); animation: none; }
.bridge-card[data-state="fail"] .bridge-say .spin { border: 2px solid var(--bad); animation: none; }
.bridge-acts { display: flex; gap: 8px; margin-left: auto; }

@media (prefers-reduced-motion: reduce) {
  .bridge-steps li b { animation: none !important; }
}

@media (max-width: 720px) {
  .bridge-steps { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .page-head { align-items: flex-start; }
  .page-actions { justify-content: flex-start; }
  .btn kbd { display: none; }
  .stepper { grid-auto-flow: row; gap: 14px; }
  .step { padding: 0 0 0 30px; }
  .step::before { display: none; }
  .topbar .crumbs { display: none; }
  .toasts { right: 12px; bottom: 12px; }
}

@media print {
  .sidebar, .topbar, .toolbar, form, .btn, .bulkbar, .toasts, .page-actions { display: none !important; }
  .app { display: block; }
  main { padding: 0; }
  .panel, .tablewrap, .card { box-shadow: none; border-color: #ccc; }
}

/* ── Площадки: Wildberries и Ozon ────────────────────────────────────────────
   Переключатель «Все · WB · Ozon» над списками кодов и заказов, метка площадки
   в строках и две колонки цифр на обзоре. Цвета — только токены: WB — винный
   знак бренда, Ozon — синий «информации»; обе пары уже есть в тёмной теме. */
.market-bar { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; margin: 0 0 16px; }
.market-bar .hint { min-width: 0; }
.market-note { margin: -6px 0 16px; line-height: 1.55; }

.mkt {
  display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 5px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .03em; line-height: 1; white-space: nowrap;
  vertical-align: 1px; background: var(--hover); color: var(--muted);
}
.mkt.wb   { background: var(--wb-soft); color: var(--wb); }
.mkt.ozon { background: var(--info-soft);  color: var(--info); }

.kpis.by-market .kpi-head {
  display: flex; align-items: center; gap: 8px; padding: 10px 18px;
  background: var(--surface-2); color: var(--ink-2); font-size: 12.5px; font-weight: 650;
}

@media (max-width: 640px) {
  .market-bar .hint { flex-basis: 100%; }
}



/* Перетаскивание XML на страницу УПД и блок «быстрее, без скачивания» */
.upd-drop {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center;
  background: rgba(35, 71, 158, .14); backdrop-filter: blur(2px);
}
.upd-drop div {
  padding: 18px 26px; border-radius: 14px; border: 2px dashed var(--accent);
  background: var(--card); color: var(--ink); font-weight: 700; box-shadow: var(--shadow-lg, 0 18px 40px -24px rgba(16, 24, 40, .5));
}
.empty-state .btn { margin-top: 14px; }

/* ── Сцена подачи УПД: коды переезжают к площадке ───────────────────────────
   Родня сцене вывода, но смысл обратный: коды не растворяются, а доезжают до
   створа пилона и остаются у площадки (передача агенту, вид 00005). Поэтому в
   кадре видно берег с той стороны, а каждая принятая поставка даёт вспышку в
   створе, световую волну по настилу и щёлкает счётчик переданных кодов. */

.ud { position: relative; overflow: hidden; border-radius: 14px; background: #eaeef4;
      isolation: isolate; aspect-ratio: 21 / 9; }
.ud > img, .ud > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
            display: block; transition: filter .5s ease, transform .6s ease; }
.ud.settled > img, .ud.settled > video { filter: saturate(.9) brightness(1.03) blur(1.4px); transform: scale(1.02); }
.ud-layer { position: absolute; inset: 0; pointer-events: none; }

.ud-tag { position: absolute; left: 0; top: 0; transform-origin: 0 0;
          will-change: transform, opacity; }
.ud-tag canvas { display: block; }
.ud.settled .ud-tag { opacity: 0 !important; transition: opacity .35s ease; }

/* створ приёмки: отметка вспыхивает, когда площадка приняла документ */
.ud-hit { position: absolute; width: 0; height: 0; z-index: 3; pointer-events: none; }
.ud-hit span, .ud-hit svg {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.2);
  opacity: 0;
}
.ud-hit span { width: 130px; height: 130px; border-radius: 50%;
               background: radial-gradient(circle, rgba(62,207,142,.55), rgba(62,207,142,0) 70%); }
.ud-hit svg { width: 46px; height: 46px; }
.ud-hit svg path { fill: none; stroke: #fff; stroke-width: 4.5; stroke-linecap: round;
                   stroke-linejoin: round; filter: drop-shadow(0 1px 3px rgba(20,22,28,.5)); }
.ud-hit.on span { animation: ud-burst .62s cubic-bezier(.2, .9, .3, 1) forwards; }
.ud-hit.on svg { animation: ud-tick .5s cubic-bezier(.2, .9, .3, 1) forwards; }
@keyframes ud-burst {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.2); }
  22%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(2.6); }
}
@keyframes ud-tick {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.5); }
  35%  { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
  75%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}

/* световая волна по настилу к створу — «партия ушла». Слой во весь кадр, поэтому
   размер не зависит от ширины окна: двигается только transform и opacity. */
.ud-wave {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
  background: radial-gradient(130% 62% at 50% 100%,
              rgba(255, 255, 255, .62), rgba(255, 255, 255, 0) 60%);
}
.ud-wave.on { animation: ud-wave .55s cubic-bezier(.3, .8, .3, 1); }
@keyframes ud-wave {
  0%   { opacity: 0; transform: translateY(14%) scaleY(1.15); }
  22%  { opacity: .95; }
  100% { opacity: 0; transform: translateY(-34%) scaleY(.45); }
}

/* счётчик переданных кодов: главная награда, поэтому крупно и табличными цифрами */
.ud-count {
  position: absolute; right: 20px; top: 16px; z-index: 4; text-align: right;
  transition: opacity .35s ease;
}
.ud.settled .ud-count { opacity: 0; }
.ud-count b {
  display: block; font: 500 54px/1 var(--display); letter-spacing: -.02em;
  color: #14161c; font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 14px rgba(255, 255, 255, .9), 0 1px 2px rgba(255, 255, 255, .8);
}
.ud-count span {
  display: block; margin-top: 3px; font: 700 11px/1 "Manrope", system-ui, sans-serif;
  letter-spacing: .14em; text-transform: uppercase; color: #5c6273;
  text-shadow: 0 1px 10px rgba(255, 255, 255, .9);
}

.ud-say {
  position: absolute; left: 16px; bottom: 14px; z-index: 4;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 13px 7px 11px; border-radius: 999px;
  background: rgba(255, 255, 255, .86); backdrop-filter: blur(8px);
  border: 1px solid rgba(20, 22, 28, .07);
  box-shadow: 0 6px 20px -12px rgba(20, 22, 28, .5);
  font: 500 13px/1.2 "Manrope", system-ui, sans-serif; color: #3c414f;
  transition: opacity .35s ease;
}
.ud.settled .ud-say { opacity: 0; }
.ud-say .dot { width: 7px; height: 7px; border-radius: 50%; background: #ff5a3c; flex: none;
               animation: ud-pulse 1.2s ease-in-out infinite; }
.ud-say[data-tone="ok"] .dot { background: #1d7a53; animation: none; }
.ud-say[data-tone="fail"] .dot { background: #be2a35; animation: none; }
@keyframes ud-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* плашка итога вылетает пружиной — последний щелчок награды */
.ud-plate {
  position: absolute; z-index: 5; left: 50%; top: 50%;
  width: min(470px, 84%); transform: translate(-50%, -42%) scale(.94);
  opacity: 0; visibility: hidden;
  display: flex; gap: 14px; align-items: flex-start;
  padding: 18px 20px; border-radius: 16px;
  background: rgba(255, 255, 255, .96); backdrop-filter: blur(10px);
  border: 1px solid rgba(20, 22, 28, .06);
  box-shadow: 0 30px 80px -20px rgba(20, 22, 28, .4);
  transition: opacity .32s ease, transform .42s cubic-bezier(.2, 1.3, .35, 1), visibility 0s .42s;
}
.ud-plate.in { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1);
               transition-delay: 0s; }
.ud-plate .mark { flex: none; width: 38px; height: 38px; }
.ud-plate .mark circle { fill: none; stroke: #1d7a53; stroke-width: 3; opacity: .22; }
.ud-plate .mark path { fill: none; stroke: #1d7a53; stroke-width: 4.5; stroke-linecap: round;
                       stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; }
.ud-plate.in .mark path { animation: ud-draw .45s .14s cubic-bezier(.2, .8, .3, 1) forwards; }
@keyframes ud-draw { to { stroke-dashoffset: 0; } }
.ud-plate h3 { margin: 1px 0 3px; font: 600 17px/1.25 var(--display); color: #14161c; }
.ud-plate p { margin: 0; font: 400 13px/1.45 "Manrope", system-ui, sans-serif; color: #5d6271; }
.ud-plate p b { color: #3c414f; font-weight: 600; }
.ud-plate .num { display: block; margin-top: 6px; overflow-wrap: anywhere;
                 font: 500 12px/1.4 var(--mono); color: #686d7c; }
.ud-plate.bad .mark circle, .ud-plate.bad .mark path { stroke: #be2a35; }
.ud-acts { display: flex; gap: 8px; margin-top: 14px; }

/* Успех = «рассвет»: персик → небесный голубой, как на кадре входа. Блик проходит
   по плашке один раз, когда она появилась, — награда в первые полсекунды. */
.wd-plate:not(.bad), .ud-plate:not(.bad) {
  overflow: hidden; border-color: rgba(255, 255, 255, .7);
  background: linear-gradient(115deg, #fde6d4 0%, #f6efef 46%, #dfe9f9 100%);
}
.wd-plate:not(.bad)::after, .ud-plate:not(.bad)::after {
  content: ""; position: absolute; inset: -40% auto -40% -60%; width: 45%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .75), transparent);
  transform: translateX(0) skewX(-12deg); opacity: 0;
}
.wd-plate.in:not(.bad)::after, .ud-plate.in:not(.bad)::after { animation: dawn-sweep .9s .12s ease-out; }
@keyframes dawn-sweep { 0% { opacity: 0; transform: translateX(0) skewX(-12deg); }
                        20% { opacity: 1; }
                        100% { opacity: 0; transform: translateX(420%) skewX(-12deg); } }

@media (max-width: 640px) {
  .ud { aspect-ratio: 16 / 10; }
  .ud-count b { font-size: 38px; }
  .ud-plate { width: min(420px, 92%); padding: 14px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .ud-hit.on span, .ud-hit.on svg, .ud-wave.on::after { animation-duration: .01s; }
  .ud-plate { transition: opacity .2s ease; transform: translate(-50%, -50%); }
}

/* оверлей сцены: кадр разворачивается поверх страницы и держит внимание до ответа */
.scene-wrap {
  position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 20px;
  background: rgba(20, 22, 28, .42); backdrop-filter: blur(4px);
  animation: scene-in .22s ease-out;
}
@keyframes scene-in { from { opacity: 0; } to { opacity: 1; } }
.scene-card {
  width: min(1040px, 100%); border-radius: 18px; overflow: hidden;
  box-shadow: var(--shadow-xl); animation: scene-rise .34s cubic-bezier(.2, .9, .3, 1);
}
@keyframes scene-rise { from { transform: translateY(14px) scale(.985); } to { transform: none; } }
body.scene-on { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .scene-wrap, .scene-card { animation: none; }
}

/* ── Виджет поддержки (support-widget.js, 17.10.2026) ─────────────────────────
   Кнопка в правом нижнем углу на каждой странице; окно — ИИ-помощник по справке и
   «Позвать человека». Ниже сцен (70) и палитры (90): работа важнее разговора. */
.sup-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 60; width: 54px; height: 54px; border-radius: 50%;
  border: 0; cursor: pointer; display: grid; place-items: center; color: var(--action-ink);
  background: var(--action); box-shadow: 0 10px 28px -10px color-mix(in srgb, var(--ink) 55%, transparent);
  transition: transform .2s ease, box-shadow .2s ease;
}
.sup-fab:hover { transform: translateY(-2px); }
.sup-fab svg { width: 24px; height: 24px; }
.sup-fab::after { content: ""; position: absolute; right: 9px; top: 9px; width: 10px; height: 10px; border-radius: 50%;
                  background: var(--mark-l); box-shadow: 0 0 0 2px var(--action); }
.sup-fab.on::after { display: none; }
body:has(.sup-fab) .toasts { bottom: 88px; }
.sup-panel {
  position: fixed; right: 20px; bottom: 86px; z-index: 61; width: min(390px, calc(100vw - 32px));
  height: min(600px, calc(100vh - 120px)); display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 30px 70px -30px color-mix(in srgb, var(--ink) 55%, transparent);
  animation: sup-in .22s cubic-bezier(.2, .8, .2, 1);
}
.sup-panel[hidden] { display: none; }
@keyframes sup-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.sup-head { display: flex; align-items: center; gap: 10px; padding: 14px 14px 12px 16px; border-bottom: 1px solid var(--line); }
.sup-who { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.sup-who b { display: block; font-size: 14.5px; }
.sup-who small { display: block; color: var(--muted); font-size: 12px; }
.sup-ava { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none;
           background: linear-gradient(135deg, var(--mark-l), var(--accent)); color: #fff; }
.sup-ava svg { width: 18px; height: 18px; }
.sup-x { border: 0; background: transparent; color: var(--muted); width: 32px; height: 32px; border-radius: 8px;
         cursor: pointer; display: grid; place-items: center; }
.sup-x:hover { background: var(--surface-2); color: var(--ink); }
.sup-x svg { width: 18px; height: 18px; }
.sup-log { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.sup-msg { max-width: 88%; padding: 10px 12px; border-radius: 14px; font-size: 13.5px; line-height: 1.5; }
.sup-msg p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.sup-msg.bot { align-self: flex-start; background: var(--surface-2); color: var(--ink); border-bottom-left-radius: 4px; }
.sup-msg.me { align-self: flex-end; background: var(--action); color: var(--action-ink); border-bottom-right-radius: 4px; }
.sup-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.sup-links a { font-size: 12.5px; padding: 4px 9px; border-radius: 999px; text-decoration: none; font-weight: 600;
               background: var(--accent-soft); color: var(--accent-ink); }
.sup-cta { margin-top: 8px; border: 1px solid var(--accent); background: var(--accent-soft); color: var(--accent-ink);
           border-radius: 999px; padding: 6px 12px; font-size: 12.5px; font-weight: 650; cursor: pointer;
           display: inline-flex; align-items: center; gap: 6px; }
.sup-cta svg { width: 14px; height: 14px; }
.sup-cta:hover { background: var(--accent); color: #fff; }
.sup-msg.typing { display: flex; gap: 4px; padding: 12px 14px; }
.sup-msg.typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: sup-dot 1s infinite; }
.sup-msg.typing span:nth-child(2) { animation-delay: .15s; }
.sup-msg.typing span:nth-child(3) { animation-delay: .3s; }
@keyframes sup-dot { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
.sup-quick { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 10px; }
.sup-quick[hidden] { display: none; }
.sup-chip { border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); border-radius: 999px;
            padding: 6px 11px; font-size: 12.5px; cursor: pointer; }
.sup-chip:hover { border-color: var(--accent); color: var(--accent-ink); }
.sup-form { display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px; border-top: 1px solid var(--line); }
.sup-form textarea { flex: 1; resize: none; border: 1px solid var(--line); border-radius: 12px; padding: 9px 11px;
                     font: inherit; font-size: 13.5px; background: var(--surface); color: var(--ink); max-height: 120px; }
.sup-form textarea:focus { outline: 2px solid var(--ring); border-color: var(--accent); }
.sup-send { width: 40px; height: 40px; border-radius: 12px; border: 0; cursor: pointer; flex: none;
            background: var(--action); color: var(--action-ink); display: grid; place-items: center; }
.sup-send:disabled { opacity: .5; cursor: default; }
.sup-send svg { width: 18px; height: 18px; }
.sup-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 14px 12px;
            font-size: 11.5px; color: var(--muted); }
.sup-ticket { margin: 0 12px 10px; padding: 12px; border-radius: 12px; border: 1px solid var(--line);
              background: var(--surface-2); display: grid; gap: 8px; font-size: 13px; }
.sup-ticket textarea, .sup-ticket input { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px;
                                          font: inherit; font-size: 13px; background: var(--surface); color: var(--ink); }
.sup-ticket .sup-row { display: flex; justify-content: flex-end; gap: 8px; }
.sup-err { margin: 0; color: var(--bad); font-size: 12.5px; }
@media (max-width: 640px) {
  .sup-fab { right: 16px; bottom: 16px; }
  .sup-panel { right: 0; left: 0; bottom: 0; width: 100%; height: min(100vh, 100dvh); border-radius: 0; border: 0; }
  body.sup-open { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) { .sup-panel { animation: none; } .sup-msg.typing span { animation: none; opacity: .6; } }


/* ── Цена запуска (_promo.html; «героем» — 22.10.2026) ───────────────────────
   Тёмная графитовая карточка с коралловым свечением в обеих темах: на светлом «Обзоре» она одна
   такая и цепляет взгляд. Крупная цена градиентом, «билеты» по разделам, живой отсчёт с секундами,
   кнопка со свечением. Без зачёркнутой «скидки»: цена запуска и честно — сколько дальше.
   Цвета внутри — свои, не токены темы: фон карточки тёмный всегда. Движение — только без
   prefers-reduced-motion. */
.promo-hero {
  --ph-ink: #fff4ef; --ph-muted: #c9b8b2; --ph-line: rgba(255, 255, 255, .12); --ph-coral: #ff6a4a; --ph-peach: #ffc29a;
  position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px 32px; align-items: center; padding: 24px 26px; margin-bottom: 16px; border-radius: 20px; color: var(--ph-ink);
  background:
    radial-gradient(110% 130% at 0% 0%, rgba(255, 90, 60, .38), transparent 52%),
    radial-gradient(80% 120% at 100% 100%, rgba(255, 150, 100, .16), transparent 60%),
    linear-gradient(135deg, #17191f 0%, #23262f 55%, #2c201d 100%);
  border: 1px solid rgba(255, 106, 74, .35);
  box-shadow: 0 28px 60px -34px rgba(214, 62, 31, .75), 0 1px 0 rgba(255, 255, 255, .06) inset;
}
.promo-hero[hidden] { display: none; }
/* блик, который раз в несколько секунд проходит по карточке */
.promo-hero::after { content: ""; position: absolute; inset: -20% auto -20% -40%; width: 35%; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .09) 50%, transparent);
  transform: skewX(-18deg); animation: promo-shine 6.5s ease-in-out infinite; }
@keyframes promo-shine { 0%, 55% { left: -40%; } 85%, 100% { left: 130%; } }
.promo-glow { position: absolute; right: -60px; top: -80px; width: 260px; height: 260px; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, rgba(255, 106, 74, .55), transparent 65%); filter: blur(10px);
  animation: promo-float 7s ease-in-out infinite alternate; pointer-events: none; }
@keyframes promo-float { to { transform: translate(-40px, 30px) scale(1.15); } }

.promo-main { min-width: 0; }
.promo-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 5px 11px 5px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ph-peach);
  background: rgba(255, 106, 74, .14); border: 1px solid rgba(255, 106, 74, .3); }
.promo-live { width: 8px; height: 8px; border-radius: 50%; background: var(--ph-coral); flex: none;
  box-shadow: 0 0 0 0 rgba(255, 106, 74, .7); animation: promo-pulse 1.8s ease-out infinite; }
@keyframes promo-pulse { to { box-shadow: 0 0 0 9px rgba(255, 106, 74, 0); } }
.promo-head { margin: 12px 0 4px; font-family: var(--display); font-size: clamp(22px, 2.6vw, 30px); font-weight: 700;
  letter-spacing: -.02em; line-height: 1.12; color: var(--ph-ink); }
.promo-big { white-space: nowrap; background: linear-gradient(100deg, var(--ph-peach), var(--ph-coral) 55%, #ff3d6e);
  -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 1.28em; }
.promo-lede { margin: 0 0 14px; font-size: 14px; line-height: 1.45; color: var(--ph-muted); max-width: 560px; }
.promo-tickets { display: flex; gap: 10px; flex-wrap: wrap; }
.promo-ticket { position: relative; display: grid; gap: 2px; min-width: 132px; padding: 10px 16px 10px 18px; border-radius: 14px;
  background: rgba(255, 255, 255, .06); border: 1px dashed var(--ph-line); }
/* вырезы, как у билета */
.promo-ticket::before, .promo-ticket::after { content: ""; position: absolute; left: -7px; width: 12px; height: 12px;
  border-radius: 50%; background: #1d2027; top: calc(50% - 6px); }
.promo-ticket::after { left: auto; right: -7px; }
.promo-ticket.lead { background: linear-gradient(135deg, rgba(255, 106, 74, .26), rgba(255, 106, 74, .08));
  border: 1px solid rgba(255, 106, 74, .55); }
.promo-ticket small { font-size: 12px; font-weight: 600; color: var(--ph-muted); }
.promo-ticket b { font-family: var(--display); font-size: 28px; font-weight: 700; line-height: 1.05; letter-spacing: -.02em;
  color: var(--ph-ink); font-variant-numeric: tabular-nums; }
.promo-ticket b span { font-size: .6em; margin-left: 3px; color: var(--ph-peach); }
.promo-ticket em { font-style: normal; font-size: 11.5px; color: var(--ph-muted); }
.promo-fine { margin: 12px 0 0; font-size: 12px; color: var(--ph-muted); }

.promo-side { display: grid; gap: 12px; justify-items: stretch; min-width: 300px; }
.promo-timer-label { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--ph-muted); }
.promo-timer-label svg { width: 15px; height: 15px; color: var(--ph-peach); }
.promo-timer { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.promo-timer span { display: grid; justify-items: center; padding: 9px 6px 7px; border-radius: 12px;
  background: rgba(255, 255, 255, .07); border: 1px solid var(--ph-line); }
.promo-timer b { font-family: var(--display); font-size: 26px; font-weight: 700; line-height: 1; color: var(--ph-ink);
  font-variant-numeric: tabular-nums; }
.promo-timer small { margin-top: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ph-muted); }
.promo-timer .sec { background: linear-gradient(160deg, var(--ph-coral), #e2442a); border-color: transparent; }
.promo-timer .sec small { color: rgba(255, 255, 255, .8); }
.promo-timer b.tick { animation: promo-tick .35s cubic-bezier(.2, .9, .3, 1.4); }
@keyframes promo-tick { from { transform: translateY(-5px) scale(1.12); opacity: .4; } }
.promo-cta { display: flex; align-items: center; justify-content: center; gap: 10px; height: 46px; padding: 0 18px;
  border-radius: 13px; font-weight: 700; font-size: 14.5px; text-decoration: none !important; color: #fff;
  background: linear-gradient(100deg, #ff7a52, var(--ph-coral) 45%, #e2442a);
  box-shadow: 0 12px 28px -12px rgba(255, 90, 60, .9), 0 1px 0 rgba(255, 255, 255, .25) inset;
  transition: transform .2s ease, box-shadow .2s ease; }
.promo-cta span { transition: transform .2s ease; }
.promo-cta:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -12px rgba(255, 90, 60, 1), 0 1px 0 rgba(255, 255, 255, .25) inset; }
.promo-cta:hover span { transform: translateX(4px); }
.promo-cta:focus-visible { outline: 2px solid var(--ph-peach); outline-offset: 3px; }
.promo-cta.ghost { background: rgba(255, 255, 255, .08); box-shadow: none; border: 1px solid var(--ph-line); color: var(--ph-ink); }
.promo-cta.ghost:hover span { transform: translateY(3px); }
/* предпросмотр для владельца сервиса: акция выключена, а посмотреть надо (21.10.2026) */
.promo-flag { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 8px; padding: 8px 11px; border-radius: 10px;
  font-size: 12.5px; line-height: 1.45; color: var(--ph-ink); background: rgba(255, 255, 255, .08); border: 1px solid var(--ph-line); }
.promo-flag svg { flex: none; width: 15px; height: 15px; margin-top: 1px; color: var(--ph-peach); }
.promo-flag b { font-weight: 650; }
.promo-flag code { font-size: 12px; color: var(--ph-peach); background: none; }
@media (max-width: 900px) {
  .promo-hero { grid-template-columns: minmax(0, 1fr); padding: 20px 18px; }
  .promo-side { min-width: 0; }
}
@media (max-width: 480px) {
  .promo-ticket { flex: 1 1 120px; min-width: 0; }
  .promo-ticket b { font-size: 24px; }
  .promo-timer b { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .promo-hero::after, .promo-glow, .promo-live, .promo-timer b.tick { animation: none; }
  .promo-cta, .promo-cta span { transition: none; }
}

/* ── Виджет «Улучшить KIZWAY» (improve-widget.js, 21.10.2026) ───────────────
   Кнопка с лампочкой — слева от кнопки поддержки и меньше её: та главнее. Режим «укажите место»
   притемняет страницу; подсветка вокруг элемента — тень на весь экран, сам элемент остаётся светлым.
   Слои: кнопки 60, окно 62, режим выбора 80 — ниже палитры (90) и уведомлений (100). */
.imp-fab {
  position: fixed; right: 86px; bottom: 25px; z-index: 60; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; color: var(--accent);
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--ink) 50%, transparent);
  transition: transform .2s ease, color .2s ease, background .2s ease;
}
.imp-fab:hover { transform: translateY(-2px); background: var(--accent-soft); }
.imp-fab.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.imp-fab svg { width: 21px; height: 21px; }
.imp-fab:focus-visible, .imp-rate:focus-visible, .imp-link:focus-visible, .imp-x:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
body.imp-picking, body.imp-picking * { cursor: crosshair !important; }
body.imp-picking .imp-bar, body.imp-picking .imp-bar * { cursor: default !important; }
body.imp-picking .imp-bar button, body.imp-picking .imp-bar button * { cursor: pointer !important; }
.imp-veil { position: fixed; inset: 0; z-index: 80; pointer-events: none;
            background: color-mix(in srgb, #0b0d12 32%, transparent); }
.imp-veil[hidden], .imp-hl[hidden] { display: none; }
.imp-hl { position: fixed; z-index: 80; pointer-events: none; border-radius: 10px; border: 2px solid var(--accent);
          box-shadow: 0 0 0 100vmax color-mix(in srgb, #0b0d12 32%, transparent);
          transition: left .08s ease, top .08s ease, width .08s ease, height .08s ease; }
.imp-hl.picked { box-shadow: 0 0 0 4px var(--ring); transition: none; }
.imp-bar {
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 81; max-width: calc(100vw - 24px);
  display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; border-radius: 14px;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line);
  box-shadow: 0 20px 50px -20px color-mix(in srgb, var(--ink) 60%, transparent); font-size: 13.5px; font-weight: 600;
}
.imp-bar-ic { color: var(--accent); display: grid; }
.imp-bar-ic svg { width: 18px; height: 18px; }
.imp-x { border: 0; background: transparent; color: var(--muted); width: 32px; height: 32px; border-radius: 8px;
         cursor: pointer; display: grid; place-items: center; flex: none; }
.imp-x:hover { background: var(--surface-2); color: var(--ink); }
.imp-x svg { width: 18px; height: 18px; }
.imp-panel {
  position: fixed; right: 20px; bottom: 82px; z-index: 62; width: min(380px, calc(100vw - 32px));
  max-height: calc(100vh - 110px); overflow-y: auto; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 30px 70px -30px color-mix(in srgb, var(--ink) 55%, transparent);
  animation: sup-in .22s cubic-bezier(.2, .8, .2, 1);
}
.imp-panel[hidden] { display: none; }
.imp-head { display: flex; align-items: center; gap: 10px; padding: 14px 12px 12px 16px; border-bottom: 1px solid var(--line); }
.imp-head > div { flex: 1; min-width: 0; }
.imp-head b { display: block; font-size: 14.5px; }
.imp-head small { display: block; color: var(--muted); font-size: 12px; }
.imp-ava { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none;
           background: linear-gradient(135deg, var(--mark-l), var(--accent)); color: #fff; }
.imp-ava svg { width: 18px; height: 18px; }
.imp-body { display: grid; gap: 10px; padding: 14px 16px 16px; }
.imp-where { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.imp-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 5px 10px; border-radius: 999px;
            background: var(--surface-2); color: var(--ink-2); font-size: 12.5px; font-weight: 600; overflow-wrap: anywhere; }
.imp-chip svg { width: 14px; height: 14px; flex: none; color: var(--accent); }
.imp-link { border: 0; background: none; padding: 0; color: var(--accent-ink); font: inherit; font-size: 12.5px;
            font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.imp-label { font-size: 12.5px; font-weight: 650; color: var(--ink-2); margin-top: 2px; }
.imp-rates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.imp-rate { display: grid; justify-items: center; gap: 5px; padding: 10px 6px; border-radius: 12px; cursor: pointer;
            border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font: inherit;
            font-size: 12.5px; font-weight: 600; line-height: 1.2; text-align: center;
            transition: border-color .15s, background .15s, color .15s; }
.imp-rate svg { width: 24px; height: 24px; }
.imp-rate:hover { border-color: var(--line-strong); color: var(--ink); }
.imp-rate.bad[aria-checked="true"]  { border-color: var(--bad);  background: var(--bad-soft);  color: var(--bad); }
.imp-rate.meh[aria-checked="true"]  { border-color: var(--warn); background: var(--warn-soft); color: var(--warn); }
.imp-rate.good[aria-checked="true"] { border-color: var(--ok);   background: var(--ok-soft);   color: var(--ok); }
.imp-body textarea { resize: vertical; min-height: 92px; max-height: 260px; border: 1px solid var(--line); border-radius: 12px;
                     padding: 9px 11px; font: inherit; font-size: 13.5px; background: var(--surface); color: var(--ink); }
.imp-body textarea:focus { outline: 2px solid var(--ring); border-color: var(--accent); }
.imp-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.imp-count { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.imp-err { margin: 0; color: var(--bad); font-size: 12.5px; }
.imp-err[hidden] { display: none; }
.imp-done { padding: 22px 18px 24px; display: grid; gap: 6px; }
.imp-done b { font-size: 16px; }
.imp-done p { margin: 0; color: var(--ink-2); font-size: 13.5px; line-height: 1.5; }
@media (max-width: 640px) {
  .imp-fab { right: 80px; bottom: 21px; }
  .imp-panel { right: 0; left: 0; bottom: 0; width: 100%; max-height: 92vh; border-radius: 18px 18px 0 0; border-width: 1px 0 0; }
  .imp-bar { top: auto; bottom: 84px; left: 12px; right: 12px; transform: none; font-size: 13px; }
  .imp-bar-t { flex: 1; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) { .imp-panel { animation: none; } .imp-hl, .imp-fab { transition: none; } }
@media print { .imp-fab, .imp-panel, .promo-strip { display: none !important; } }