/* ════════════════════════════════════════════════════════════════════════
   Студия v1.1 для CRM. Подключается ПОСЛЕ contentos.css.
   Источник: contentos-web/src/theme/studio/{tokens,base}.css (они же — порт
   studio_platform/static/app.css). CRM и ContentOS выглядят как одна система.

   1. Токены: тёмная по умолчанию, светлая — html[data-theme="light"].
      Переменные старой золотой темы (--gold, --surface, --text-muted…)
      переопределены как псевдонимы токенов Студии, поэтому всё, что
      красилось ими (включая inline style="" в шаблонах), уже в новой палитре.
   2. Основа: фон со свечением, Golos Text, ссылки, фокус.
   3. Каркас: сайдбар, шапка страницы, мобильная панель.
   4. Компоненты Студии: card, btn, tag, chip, seg, stchip, pav, kpis, calm…
   5. Графики _viz.html (ui-*).
   6. Перекрытие классов contentos.css (stat-card, tbl, badge, pill, section…).
   7. Движение и reduced-motion.
   ════════════════════════════════════════════════════════════════════════ */

/* ── 1. Токены ─────────────────────────────────────────────────────────── */
:root:root,
:root:root[data-theme='dark'] {
  --font: 'Golos Text', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-code: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  --bg: #07090e;
  --fg: #eef1f7;
  --fg2: rgba(238, 241, 247, 0.8);
  --mut: rgba(238, 241, 247, 0.62);
  --mut2: rgba(238, 241, 247, 0.52);

  --acc: #2e5bff;
  --acc2: #8aa6ff;
  --acc3: #6a8bff;
  --chart-top: #8aa6ff;
  --acc-grad: linear-gradient(135deg, #2e5bff, #6a8bff);
  --acc-soft: rgba(46, 91, 255, 0.16);
  --acc-soft2: rgba(46, 91, 255, 0.12);
  --on-acc: #ffffff;

  --card: rgba(17, 20, 28, 0.78);
  --card-solid: #11141c;
  --surface-2: #161a24;
  --surface-3: #1d2230;
  --pop: rgba(24, 28, 38, 0.96);
  --side: rgba(11, 14, 20, 0.72);
  --field: rgba(255, 255, 255, 0.03);
  --hover: rgba(46, 91, 255, 0.12);
  --chip: rgba(255, 255, 255, 0.03);
  --chip-bd: rgba(255, 255, 255, 0.09);

  --line: rgba(255, 255, 255, 0.07);
  --line2: rgba(255, 255, 255, 0.12);
  --line3: rgba(255, 255, 255, 0.22);

  --glow1: rgba(46, 91, 255, 0.2);
  --glow2: rgba(140, 120, 255, 0.1);
  --glow3: rgba(0, 180, 255, 0.06);

  --ok: #3ddc97;
  --warn: #ffb547;
  --bad: #ff6b6b;
  --vio: #b48cff;
  --info: #5cc8ff;
  --ok-grad: linear-gradient(135deg, #12a66a, #3ddc97);
  --bad-grad: linear-gradient(135deg, #e5484d, #ff8a7a);
  --warn-grad: linear-gradient(135deg, #e0762b, #ffb547);
  --vio-grad: linear-gradient(135deg, #7a5af8, #c08bff);
  --gtext-grad: linear-gradient(135deg, #8aa6ff, #b9a4ff);
  --bad-text-grad: linear-gradient(135deg, #ff7070, #ff9e8a);
  --ok-text-grad: linear-gradient(135deg, #3ddc97, #8af0c4);
  --warn-text-grad: linear-gradient(135deg, #ffb547, #ffd08a);

  --shadow: 0 20px 50px -18px rgba(20, 30, 60, 0.35);
  --shadow-pop: 0 24px 60px -18px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(46, 91, 255, 0.08);
  --r-btn: 9px;
  --r-field: 10px;
  --r-mini: 13px;
  --r-pop: 14px;
  --r-card: 18px;
  --side-w: 248px;

  --e-out: cubic-bezier(0.22, 1, 0.36, 1);
  --e-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --e-io: cubic-bezier(0.65, 0, 0.35, 1);

  /* ── псевдонимы contentos.css: золото и моно уходят ── */
  --font-sans: var(--font);
  --font-mono: var(--font);
  --surface: var(--card);
  --surface-hover: var(--hover);
  --text: var(--fg);
  --ink: var(--fg2);
  --text-muted: var(--mut);
  --text-dim: var(--mut2);
  --divider: var(--line);
  --divider-strong: var(--line2);
  --gold: var(--acc2);
  --gold-hover: var(--acc3);
  --gold-soft: var(--acc-soft);
  --focus-ring: var(--acc-soft);
  --success: var(--ok);
  --danger: var(--bad);
  --violet: var(--vio);
  --st-new: #a3b1e0;
  --st-active: var(--ok);
  --st-paid: var(--acc2);
  --st-lapsed: var(--warn);
  --st-blocked: var(--bad);
  --st-danger: var(--bad);
  --border: var(--line);
  --bg-lighter: var(--surface-2);
  --sidebar-width: var(--side-w);
  --cos-radius: 14px;
  --cos-shadow: var(--shadow);

  color-scheme: dark;
}

:root:root[data-theme='light'] {
  --bg: #f3f5fa;
  --fg: #0e1320;
  --fg2: #2a3142;
  --mut: #535c70;
  --mut2: #6b7389;

  --acc2: #2e5bff;
  --acc3: #4a72ff;
  --chart-top: #6a8bff;
  --acc-soft: rgba(46, 91, 255, 0.1);
  --acc-soft2: rgba(46, 91, 255, 0.06);

  --card: rgba(255, 255, 255, 0.62);
  --card-solid: #ffffff;
  --surface-2: #f7f8fc;
  --surface-3: #edf0f7;
  --pop: rgba(255, 255, 255, 0.96);
  --side: rgba(255, 255, 255, 0.55);
  --field: rgba(255, 255, 255, 0.7);
  --hover: rgba(46, 91, 255, 0.08);
  --chip: rgba(255, 255, 255, 0.6);
  --chip-bd: rgba(20, 30, 60, 0.1);

  --line: rgba(20, 30, 60, 0.08);
  --line2: rgba(20, 30, 60, 0.14);
  --line3: rgba(20, 30, 60, 0.22);

  --glow1: rgba(46, 91, 255, 0.22);
  --glow2: rgba(140, 120, 255, 0.18);
  --glow3: rgba(0, 180, 255, 0.12);

  --ok: #12a66a;
  --warn: #c27a00;
  --bad: #d93a3a;
  --vio: #6d4ae0;
  --info: #0369a1;
  --st-new: #5a6aa8;
  --gtext-grad: linear-gradient(135deg, #2e5bff, #5b3fe0);
  --bad-text-grad: linear-gradient(135deg, #c0392b, #b42727);
  --ok-text-grad: linear-gradient(135deg, #0e8f5a, #12a66a);
  --warn-text-grad: linear-gradient(135deg, #b25f00, #c27a00);

  --shadow: 0 20px 50px -18px rgba(30, 50, 120, 0.18);
  --shadow-pop: 0 24px 60px -18px rgba(30, 50, 120, 0.28), 0 0 0 1px rgba(46, 91, 255, 0.06);

  color-scheme: light;
}

/* ── 2. Основа ─────────────────────────────────────────────────────────── */
html { background: var(--bg); }
html, body { margin: 0; min-height: 100%; }
body, html.light body {
  background: var(--bg);
  color: var(--fg);
  font: 400 14px/1.45 var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: normal;
  font-variant-numeric: tabular-nums;
}
body :where(button, input, select, textarea) { font-family: var(--font); color: inherit; }
h1, h2, h3, h4 { font-family: var(--font); color: var(--fg); text-transform: none; }
h1 { font-size: 32px; font-weight: 600; letter-spacing: -0.035em; line-height: 1.1; }
h2 { font-size: 20px; font-weight: 600; letter-spacing: -0.025em; }
h3 { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
h4 { font-size: 14px; font-weight: 600; }
a { color: var(--acc2); text-decoration: none; transition: color .15s var(--e-out); }
a:hover { color: var(--fg); }
code, pre, kbd, samp {
  font-family: var(--font-code);
}
code {
  padding: 1px 6px; font-size: .84em; border-radius: 6px;
  color: var(--acc2); background: var(--acc-soft2); box-shadow: inset 0 0 0 1px var(--line);
}
.mono, .num { font-family: var(--font); font-variant-numeric: tabular-nums; }
::selection { background: color-mix(in srgb, var(--acc) 35%, transparent); color: var(--fg); }
input::placeholder, textarea::placeholder { color: var(--mut2); opacity: 1; }
:where(a, button, input, select, textarea, summary):focus-visible { outline: 2px solid var(--acc2); outline-offset: 2px; border-radius: 6px; }
* { scrollbar-color: var(--line3) transparent; scrollbar-width: thin; }
img { max-width: 100%; }
/* inline style="" старых шаблонов: моно и Inter -> Golos */
[style*="Source Code Pro"], [style*="font-family:Inter"], [style*="font-family: Inter"], [style*="var(--font-mono)"] { font-family: var(--font) !important; }
[style*="border-radius:4px"], [style*="border-radius: 4px"] { border-radius: 12px !important; }

.glow { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.glow i { position: absolute; border-radius: 50%; filter: blur(30px); }
.glow i:nth-child(1) { width: 820px; height: 820px; right: -220px; top: -320px; background: radial-gradient(circle, var(--glow1), transparent 65%); }
.glow i:nth-child(2) { width: 900px; height: 900px; left: 60px; bottom: -500px; background: radial-gradient(circle, var(--glow2), transparent 65%); }
.glow i:nth-child(3) { width: 600px; height: 600px; left: 46%; top: 26%; background: radial-gradient(circle, var(--glow3), transparent 65%); }

.st-skip { position: absolute; left: -9999px; z-index: 100; padding: 10px 16px; color: var(--on-acc); background: var(--acc); border-radius: 0 0 10px 0; }
.st-skip:focus { left: 0; top: 0; }

/* ── 3. Каркас ─────────────────────────────────────────────────────────── */
.st-app { display: flex; min-height: 100dvh; position: relative; }
.st-side {
  width: var(--side-w); flex: none; position: sticky; top: 0; height: 100dvh; z-index: 30;
  display: flex; flex-direction: column; gap: 6px; padding: 20px 14px 14px;
  background: var(--side); border-right: 1px solid var(--line);
  backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px); overflow: hidden;
}
.st-brand { display: flex; align-items: center; gap: 11px; padding: 2px 8px 12px; text-decoration: none; color: inherit; }
.st-brand:hover { color: inherit; }
.st-logo {
  width: 32px; height: 32px; flex: none; border-radius: 9px; display: grid; place-items: center;
  background: var(--acc-grad); color: var(--on-acc); box-shadow: 0 8px 22px -10px var(--acc);
  font-size: 11px; font-weight: 800; letter-spacing: -.02em;
}
.st-logo.sz-lg { width: 42px; height: 42px; border-radius: 12px; font-size: 13px; }
.st-logo.sz-sm { width: 28px; height: 28px; border-radius: 8px; font-size: 10px; }
.st-brand > span:last-child { flex: 1; min-width: 0; }
.st-brand b { display: block; font-size: 15px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.st-brand b em { font-style: normal; background: var(--gtext-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.st-brand small { display: block; margin-top: 3px; font-size: 11.5px; color: var(--mut2); }

/* сводка outreach в сайдбаре */
.st-out {
  display: flex; flex-direction: column; gap: 10px; margin: 0 0 10px; padding: 12px 12px 12px;
  border: 1px solid var(--line2); border-radius: 14px; background: var(--chip); color: var(--fg); text-decoration: none;
  position: relative; overflow: hidden;
  transition: border-color .15s var(--e-out), background-color .2s var(--e-out), transform .15s var(--e-out);
}
.st-out::before { content: ''; position: absolute; inset: 0; background: radial-gradient(80% 120% at 0% 0%, var(--acc-soft2), transparent 65%); pointer-events: none; }
.st-out:hover { border-color: var(--line3); background: var(--hover); color: var(--fg); }
.st-out:active { transform: scale(.98); }
.st-out .top { display: flex; align-items: center; gap: 12px; position: relative; }
.st-out .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.st-out .tx .cap { margin-bottom: 1px; }
.st-out .tx b { font-size: 13.5px; font-weight: 600; line-height: 1.2; }
.st-out .tx b em { font-style: normal; color: var(--ok); }
.st-out .tx small { font-size: 11.5px; color: var(--mut2); line-height: 1.3; }
.st-out .ui-stack { position: relative; gap: 0; }

/* поиск по странице */
.st-find {
  display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px; margin-bottom: 8px; width: 100%;
  border: 1px solid var(--line2); border-radius: 10px; background: var(--field); color: var(--mut2);
  font-size: 13px; cursor: pointer; text-align: left;
  transition: border-color .15s var(--e-out), color .15s var(--e-out);
}
.st-find:hover { border-color: var(--line3); color: var(--mut); }
.st-find span { flex: 1; }
.st-find kbd { font-family: var(--font); font-size: 11px; padding: 1px 6px; border-radius: 5px; border: 1px solid var(--line2); color: var(--mut2); }
.st-find[hidden] { display: none; }

/* навигация */
.st-nav { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 0 -6px; padding: 0 6px; scrollbar-width: none; }
.st-nav::-webkit-scrollbar { display: none; }
.st-navsep { margin: 14px 10px 5px; }
.st-navsep:first-child { margin-top: 4px; }
.st-nav a {
  display: flex; align-items: center; gap: 11px; padding: 7px 10px; border-radius: 8px;
  color: var(--mut); text-decoration: none; font-size: 14px; position: relative;
  transition: background-color .15s var(--e-out), color .15s var(--e-out);
}
.st-nav a .cos-icon, .st-nav a svg { flex: none; opacity: .85; }
.st-nav a > span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-nav a:hover { background: var(--hover); color: var(--fg); }
.st-nav a.on { background: var(--acc-soft); color: var(--fg); font-weight: 600; }
.st-nav a.on svg { color: var(--acc2); opacity: 1; }
.st-nav a.on::before {
  content: ''; position: absolute; left: 0; top: 9px; bottom: 9px; width: 2px; border-radius: 2px;
  background: var(--acc); box-shadow: 0 0 10px var(--acc); animation: nav-bar .3s var(--e-out) both;
}
.st-nav a .ct {
  flex: none; min-width: 20px; height: 18px; padding: 0 6px; border-radius: 9px; display: inline-grid; place-items: center;
  font-size: 10.5px; font-weight: 700; color: var(--mut); background: var(--chip); box-shadow: inset 0 0 0 1px var(--line2);
}
.st-nav a.on .ct { color: var(--on-acc); background: var(--acc-grad); box-shadow: 0 4px 12px -4px var(--acc); }
@keyframes nav-bar { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.st-foot { margin-top: auto; flex: none; display: flex; flex-direction: column; gap: 10px; padding-top: 12px; }
.st-more { position: relative; }
.st-more summary {
  display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 8px; cursor: pointer; list-style: none;
  color: var(--mut); font-size: 13px; transition: background-color .15s var(--e-out), color .15s var(--e-out);
}
.st-more summary::-webkit-details-marker { display: none; }
.st-more summary:hover { background: var(--hover); color: var(--fg); }
.st-more summary .chev { margin-left: auto; transition: transform .2s var(--e-out); }
.st-more[open] summary .chev { transform: rotate(180deg); }
.st-more-menu {
  position: absolute; bottom: calc(100% + 6px); left: 0; right: 0; z-index: 60;
  display: flex; flex-direction: column; padding: 6px; border-radius: var(--r-pop);
  background: var(--pop); border: 1px solid var(--line2); box-shadow: var(--shadow-pop);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); animation: ui-pop .2s var(--e-soft) both;
}
.st-more-menu a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; color: var(--fg); font-size: 13px; }
.st-more-menu a:hover { background: var(--hover); color: var(--fg); }
.st-more-menu a svg { color: var(--mut); }
.st-more-menu .sep { height: 1px; background: var(--line); margin: 5px 4px; }

.st-theme {
  width: 100%; height: 34px; border: 0; border-radius: 18px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: rgba(255, 255, 255, 0.92); color: #0e1320; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: transform .15s var(--e-out), box-shadow .2s var(--e-out);
}
:root[data-theme='light'] .st-theme { background: #fff; box-shadow: 0 6px 18px -10px rgba(30, 50, 120, .35), inset 0 0 0 1px var(--line); }
.st-theme:hover { box-shadow: 0 8px 22px -10px var(--acc); }
.st-theme:active { transform: scale(.96); }
.st-theme .t-light, :root[data-theme='light'] .st-theme .t-dark { display: inline-flex; align-items: center; gap: 8px; }
.st-theme .t-dark, :root[data-theme='light'] .st-theme .t-light { display: none; }
.st-me { display: flex; align-items: center; gap: 10px; padding: 12px 6px 0; border-top: 1px solid var(--line); }
.st-me .who { flex: 1; min-width: 0; line-height: 1.25; }
.st-me .who b { display: block; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-me .who small { font-size: 11.5px; color: var(--mut2); }
.st-me form { margin: 0; }

.st-main { flex: 1; min-width: 0; position: relative; z-index: 1; }
.st-page { padding: 30px 40px 60px; max-width: 1480px; display: flex; flex-direction: column; gap: 22px; }
.st-content { min-width: 0; }
/* старые обёртки, если где-то остались */
.st-content.cos-content { width: auto; min-height: 0; padding: 0; }

/* шапка страницы */
.st-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px 20px; flex-wrap: wrap; }
.st-head .ttl { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.st-head h1 { margin: 0; font-size: 32px; line-height: 1.1; font-weight: 600; letter-spacing: -0.035em; }
.st-head .sub { max-width: 72ch; margin: 0; }
.st-head .sub:empty { display: none; }
.st-head .acts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 20px; min-height: 36px; }
.st-head .acts:empty { display: none; }
.st-eyebrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.st-eyebrow .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--mut2); }
.st-eyebrow .dot:last-child, .st-eyebrow .dot:first-child { display: none; }

/* мобильная панель */
.st-mtop { display: none; }
.st-scrim { display: none; }
.st-close { display: none !important; }
@media (max-width: 900px) {
  .st-app { flex-direction: column; }
  .st-mtop {
    display: flex; align-items: center; gap: 10px; padding: 10px 16px; position: sticky; top: 0; z-index: 25;
    background: var(--side); border-bottom: 1px solid var(--line);
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  }
  .st-mtop .t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
  .st-mtop .t b { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .st-mtop .t small { font-size: 11.5px; color: var(--mut2); }
  .st-side {
    position: fixed; left: 0; top: 0; bottom: 0; height: 100dvh; width: min(290px, 86vw); z-index: 50;
    transform: translateX(-105%); transition: transform .32s var(--e-soft);
    background: var(--card-solid); box-shadow: var(--shadow);
  }
  .st-side.open { transform: none; }
  .st-close { display: inline-flex !important; margin-left: auto; }
  .st-scrim { display: block; position: fixed; inset: 0; z-index: 45; background: rgba(0, 0, 0, .45); backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity .25s var(--e-out); }
  .st-scrim.open { opacity: 1; pointer-events: auto; }
  .st-page { padding: 20px 16px 60px; gap: 18px; }
  .st-head h1 { font-size: 26px; }
  .st-head .acts { width: 100%; margin-top: 0; min-height: 0; }
}

/* ── 4. Компоненты Студии ──────────────────────────────────────────────── */
.cap { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--mut2); font-weight: 600; }
.sub { font-size: 13px; color: var(--mut); line-height: 1.5; }
.mut { color: var(--mut); } .mut2 { color: var(--mut2); }
.gtext { background: var(--gtext-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.btext { background: var(--bad-text-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.otext { background: var(--ok-text-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  padding: 22px 24px; display: flex; flex-direction: column; gap: 14px; min-width: 0;
  transition: border-color .2s var(--e-out), transform .2s var(--e-out), box-shadow .2s var(--e-out);
}
.card.tight { padding: 16px 18px; gap: 10px; }
.card.flush { padding: 0; gap: 0; overflow: hidden; }
.card.lift { box-shadow: var(--shadow); }
.card.solid { background: var(--card-solid); }
a.card, button.card, .card.link { color: inherit; text-decoration: none; text-align: left; cursor: pointer; }
a.card:hover, button.card:hover, .card.link:hover { transform: translateY(-2px); border-color: var(--line2); box-shadow: 0 16px 34px -20px var(--acc); color: inherit; }
.card h3 { margin: 0; font-size: 15px; font-weight: 600; }
.card-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.card-h h3 { font-size: 16px; letter-spacing: -.01em; }
.card-h .more { font-size: 12.5px; color: var(--mut); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; cursor: pointer; padding: 0; transition: color .15s var(--e-out), gap .2s var(--e-out); }
.card-h .more:hover { color: var(--fg); gap: 7px; }
.thread { position: relative; overflow: hidden; }
.thread::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; pointer-events: none; background: linear-gradient(90deg, transparent, var(--c1, var(--acc)), var(--c2, var(--acc2)), transparent); opacity: .9; }
.thread::after { content: ''; position: absolute; left: 10%; right: 10%; top: 0; height: 70px; pointer-events: none; background: radial-gradient(60% 100% at 50% 0%, color-mix(in srgb, var(--c1, var(--acc)) 16%, transparent), transparent 70%); }

.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.dash2 { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 18px; }
.row { display: flex; align-items: center; gap: 10px; }
.row.wrap { flex-wrap: wrap; } .row.between { justify-content: space-between; } .row.top { align-items: flex-start; }
.stack { display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 1200px) { .grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dash2 { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .grid2, .grid3, .grid4 { grid-template-columns: 1fr; } .card { padding: 18px 16px; } }

/* кнопки: .btn — акцентная; .btn.ghost и старая .btn-ghost — контурная */
.btn, .btn-ghost {
  height: 38px; padding: 0 16px; border: 0; border-radius: var(--r-btn); background: var(--acc); color: var(--on-acc);
  font: 600 13px/1 var(--font); display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  text-decoration: none; white-space: nowrap; cursor: pointer; box-shadow: none; letter-spacing: 0; text-transform: none;
  transition: background-color .15s var(--e-out), border-color .15s var(--e-out), color .15s var(--e-out), transform .15s var(--e-out), box-shadow .2s var(--e-out), filter .15s;
}
.btn:hover { background: var(--acc); color: var(--on-acc); filter: brightness(1.1); box-shadow: 0 8px 24px -10px var(--acc); }
.btn:active, .btn-ghost:active { transform: scale(.96); }
.btn.ghost, .btn-ghost { background: transparent; border: 1px solid var(--line2); color: var(--fg); font-weight: 500; }
.btn.ghost:hover, .btn-ghost:hover { border-color: var(--line3); background: var(--hover); color: var(--fg); filter: none; box-shadow: none; }
.btn.sm, .btn-ghost.sm { height: 32px; padding: 0 12px; font-size: 12.5px; border-radius: 8px; }
.btn.white { background: rgba(255, 255, 255, .92); color: #0e1320; border-radius: 18px; }
.btn.danger { background: var(--bad-grad); }
.btn.danger:hover { box-shadow: 0 8px 24px -10px var(--bad); }
.btn[disabled], .btn:disabled, .btn-ghost:disabled { opacity: .5; pointer-events: none; }
.icbtn {
  width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line2); background: var(--chip); color: var(--fg);
  display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; text-decoration: none; flex: none;
  transition: border-color .15s var(--e-out), background-color .2s, transform .15s var(--e-out);
}
.icbtn:hover { border-color: var(--acc2); background: var(--hover); color: var(--fg); }
.icbtn:active { transform: scale(.94); }
.icbtn.sm { width: 32px; height: 32px; border-radius: 9px; }

/* поля */
.fld { display: flex; flex-direction: column; gap: 6px; }
.fld > span { font-size: 12px; color: var(--mut); }
.in, .ta, .sel,
.field input, .field select, .field textarea,
input[type=text], input[type=date], input[type=number], input[type=email], input[type=url], input[type=search], input[type=password], input[type=datetime-local], input[type=time], input:not([type]),
select, textarea {
  border: 1px solid var(--line2); border-radius: var(--r-field); padding: 0 12px; font: 400 14px/1.4 var(--font);
  background: var(--field); color: var(--fg); outline: 0; min-height: 40px;
  transition: border-color .15s var(--e-out), box-shadow .2s var(--e-out);
}
textarea, .ta { padding: 10px 12px; line-height: 1.5; min-height: 84px; resize: vertical; }
select { padding-right: 30px; appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a93a8' 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 11px center; }
.in:focus, .ta:focus, .sel:focus, input:focus, select:focus, textarea:focus { border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-soft); outline: 0; }
select option { background: var(--card-solid); color: var(--fg); }
input[type=checkbox], input[type=radio], input[type=range] { accent-color: var(--acc); }
.dfn-input, .dfn-num { min-height: 0; }

/* метки, чипы, сегмент */
.tag { font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 12px; background: var(--acc-soft); color: var(--acc2); white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; }
.tag.solid { background: var(--acc); color: var(--on-acc); }
.tag.plain { background: transparent; border: 1px solid var(--line2); color: var(--mut); font-weight: 500; }
.tag.ok { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.tag.warn { background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--warn); }
.tag.bad { background: color-mix(in srgb, var(--bad) 14%, transparent); color: var(--bad); }
.tag.vio { background: color-mix(in srgb, var(--vio) 16%, transparent); color: var(--vio); }
.chip {
  padding: 7px 13px; border: 1.5px solid var(--chip-bd); background: var(--chip); border-radius: 999px;
  font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; color: var(--mut); cursor: pointer; text-decoration: none;
  transition: border-color .15s var(--e-out), background-color .2s var(--e-out), color .15s, transform .15s var(--e-out);
}
.chip:hover { color: var(--fg); border-color: var(--line3); }
.chip:active { transform: scale(.96); }
.chip.on { border-color: var(--acc); background: var(--acc-soft); color: var(--fg); }
.chip b { font-weight: 600; font-size: 12px; opacity: .7; }
.seg { display: inline-flex; padding: 3px; border-radius: 11px; background: var(--chip); border: 1px solid var(--line2); gap: 2px; max-width: 100%; overflow-x: auto; }
.seg button, .seg a {
  border: 0; background: transparent; padding: 6px 12px; border-radius: 8px; font-size: 12.5px; color: var(--mut);
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: color .15s var(--e-out), background-color .2s var(--e-out);
}
.seg button:hover, .seg a:hover { color: var(--fg); }
.seg .on, .seg .active { background: var(--acc-soft); color: var(--fg); font-weight: 600; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc) 35%, transparent); }
.seg em { font-style: normal; font-size: 11px; color: var(--mut2); font-weight: 600; }
.stchip {
  --c1: var(--acc); font-size: 10.5px; font-weight: 600; padding: 3px 8px; border-radius: 7px; white-space: nowrap; border: 0;
  background: color-mix(in srgb, var(--c1) 16%, transparent); color: color-mix(in srgb, var(--c1) 55%, var(--fg));
  display: inline-flex; align-items: center; gap: 5px; line-height: 1.35;
}
.stchip i { width: 6px; height: 6px; border-radius: 50%; background: var(--c1); box-shadow: 0 0 6px var(--c1); flex: none; }
.cdot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: none; background: var(--c, var(--acc)); box-shadow: 0 0 8px var(--c, var(--acc)); }

/* аватары */
.pav {
  --g1: #2e5bff; --g2: #7c5cff; width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center; border: 0; padding: 0;
  background: linear-gradient(135deg, var(--g1), var(--g2)); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .02em;
  box-shadow: 0 0 0 2px var(--card-solid), 0 6px 16px -8px var(--g1); overflow: hidden; text-decoration: none;
  transition: transform .18s var(--e-out), box-shadow .2s var(--e-out);
}
.pav img { width: 100%; height: 100%; object-fit: cover; }
a.pav:hover, button.pav:hover { transform: translateY(-1px) scale(1.06); color: #fff; }
.pav.sz-sm { width: 22px; height: 22px; font-size: 9px; }
.pav.sz-lg { width: 34px; height: 34px; font-size: 12px; }
.pav.sz-xl { width: 56px; height: 56px; font-size: 18px; border-radius: 16px; }
.pavs { display: inline-flex; align-items: center; }
.pavs > .pav + .pav { margin-left: -7px; }
.pavs .more { margin-left: 6px; font-size: 12px; color: var(--mut); }

/* полоса ключевых цифр */
.kpis { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); padding: 0 !important; gap: 0 !important; overflow: hidden; position: relative; }
.kpis::before { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 120% at 0% 0%, var(--acc-soft2), transparent 60%); pointer-events: none; }
.kpi { display: flex; flex-direction: column; gap: 6px; padding: 22px 24px 20px; text-decoration: none; color: inherit; position: relative; min-width: 0; transition: background-color .2s var(--e-out); }
.kpi + .kpi { border-left: 1px solid var(--line); }
a.kpi:hover { background: var(--hover); color: inherit; }
.kpi.on { background: var(--acc-soft2); box-shadow: inset 0 -2px 0 var(--acc); }
.kpi .kv { font-size: 38px; font-weight: 700; letter-spacing: -.04em; line-height: 1; display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.kpi .kv small { font-size: 15px; font-weight: 600; color: var(--mut); letter-spacing: -.01em; -webkit-text-fill-color: var(--mut); }
.kpi .kl { font-size: 13px; color: var(--mut); display: flex; align-items: center; gap: 6px; line-height: 1.3; }
.kpi .ks { font-size: 11.5px; color: var(--mut2); line-height: 1.35; }
.kpi.grad .kv span, .kpi.acc .kv span { background: var(--gtext-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kpi.bad { background: radial-gradient(90% 120% at 0% 0%, color-mix(in srgb, var(--bad) 14%, transparent), transparent 70%); }
.kpi.bad .kv span { background: var(--bad-text-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kpi.ok .kv span { background: var(--ok-text-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kpi.warn .kv span { background: var(--warn-text-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kpi.mute .kv span { color: var(--mut); }
.kpi .pips { display: flex; gap: 4px; margin-top: 4px; }
.kpi .pips i { flex: 1; max-width: 16px; height: 5px; border-radius: 3px; background: var(--line2); }
.kpi .pips i.on { background: var(--acc-grad); box-shadow: 0 0 10px -2px var(--acc); }
.kpi.ok .pips i.on { background: var(--ok-grad); box-shadow: 0 0 10px -2px var(--ok); }
.kpi.bad .pips i.on { background: var(--bad-grad); box-shadow: 0 0 10px -2px var(--bad); }
.kpi.warn .pips i.on { background: var(--warn-grad); box-shadow: 0 0 10px -2px var(--warn); }
.kpi .ksp { margin-top: 4px; }
@media (max-width: 900px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi { padding: 16px 16px 14px; }
  .kpi + .kpi { border-left: 0; }
  .kpi:nth-child(even) { border-left: 1px solid var(--line); }
  .kpi:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .kpi .kv { font-size: 30px; }
}

/* пустые состояния */
.calm { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 34px 16px; text-align: center; color: var(--mut); font-size: 13.5px; }
.calm .ring {
  width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--acc-grad); color: #fff; box-shadow: 0 10px 30px -10px var(--acc); animation: ui-pop .5s var(--e-soft) both;
}
.calm.ok .ring { background: var(--ok-grad); box-shadow: 0 10px 30px -10px var(--ok); }
.calm.warn .ring { background: var(--warn-grad); box-shadow: 0 10px 30px -10px var(--warn); }
.calm.bad .ring { background: var(--bad-grad); box-shadow: 0 10px 30px -10px var(--bad); }
.calm.vio .ring { background: var(--vio-grad); box-shadow: 0 10px 30px -10px #7a5af8; }
.calm b { color: var(--fg); font-weight: 600; font-size: 14.5px; }
.calm p { margin: 0; max-width: 46ch; line-height: 1.5; }
.calm .act { margin-top: 4px; }
.calm.boxed { border: 1px dashed var(--line2); border-radius: var(--r-card); background: var(--card); }

/* полосы, легенда */
.bar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--acc-grad); border-radius: 3px; transform-origin: left center; box-shadow: 0 0 10px -2px var(--acc); }
.bar.thick { height: 10px; border-radius: 5px; } .bar.thick > i { border-radius: 5px; }
.bar.ok > i { background: var(--ok-grad); box-shadow: 0 0 10px -2px var(--ok); }
.bar.bad > i { background: var(--bad-grad); box-shadow: 0 0 10px -2px var(--bad); }
.bar.warn > i { background: var(--warn-grad); box-shadow: 0 0 10px -2px var(--warn); }
.legend { display: flex; gap: 8px 14px; flex-wrap: wrap; font-size: 12px; color: var(--mut); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex: none; }
.legend b { color: var(--fg); font-weight: 600; }

/* ── 5. Графики _viz.html ──────────────────────────────────────────────── */
.ui-ring { position: relative; display: inline-grid; place-items: center; flex: none; }
.ui-ring svg { display: block; transform: rotate(-90deg); overflow: visible; }
.ui-ring .track { stroke: var(--line2); }
.ui-ring .mid { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; line-height: 1.05; }
.ui-ring .mid b { font-size: var(--rs, 22px); font-weight: 700; letter-spacing: -.03em; }
.ui-ring .mid small { font-size: 11px; color: var(--mut); margin-top: 2px; }
.ui-bars { display: flex; flex-direction: column; gap: 8px; }
.ui-bars .plot { display: grid; align-items: end; }
.ui-bars .bc { display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; gap: 4px; height: 100%; min-width: 0; }
.ui-bars .bc > span { font-size: 11.5px; text-align: center; color: var(--mut); white-space: nowrap; }
.ui-bars .bc.cur > span { color: var(--fg); font-weight: 700; }
.ui-bars .bcol {
  border-radius: 7px 7px 3px 3px; transform-box: fill-box; transform-origin: 50% 100%;
  background: linear-gradient(180deg, color-mix(in srgb, var(--chart-top) 60%, transparent), color-mix(in srgb, var(--acc) 35%, transparent));
}
.ui-bars .bc.cur .bcol { background: linear-gradient(180deg, var(--chart-top), var(--acc)); box-shadow: 0 0 22px -4px var(--acc), inset 0 1px 0 rgba(255,255,255,.25); }
.ui-bars .bc.zero .bcol { background: var(--line2); }
.ui-bars .bc.plan .bcol { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--chart-top) 40%, transparent) 0 5px, transparent 5px 10px); border: 1px dashed color-mix(in srgb, var(--chart-top) 55%, transparent); }
.ui-bars .xl { display: grid; gap: 4px; font-size: 11.5px; color: var(--mut); text-align: center; }
.ui-bars .xl span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-bars .xl .cur { color: var(--fg); font-weight: 600; }
.ui-hbars { display: flex; flex-direction: column; gap: 10px; }
.ui-hbar { display: grid; grid-template-columns: minmax(70px, var(--lw, 140px)) minmax(0, 1fr) auto; gap: 12px; align-items: center; font-size: 13px; color: inherit; text-decoration: none; }
a.ui-hbar:hover .l { color: var(--fg); }
.ui-hbar .l { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--mut); transition: color .15s; }
.ui-hbar .v { font-weight: 600; font-variant-numeric: tabular-nums; min-width: 28px; text-align: right; color: var(--fg); }
.ui-hbar .t { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.ui-hbar .t i { display: block; height: 100%; border-radius: 4px; background: var(--acc-grad); transform-origin: left center; box-shadow: 0 0 12px -3px var(--acc); }
.ui-funnel { position: relative; border-radius: 14px; overflow: hidden; }
.ui-funnel svg { display: block; width: 100%; }
.ui-funnel .cols { display: grid; position: absolute; inset: 0; }
.ui-funnel .fc { display: flex; flex-direction: column; justify-content: space-between; padding: 12px 14px; border-left: 1px solid color-mix(in srgb, var(--fg) 8%, transparent); min-width: 0; color: inherit; text-decoration: none; transition: background-color .2s var(--e-out); }
a.ui-funnel .fc:hover, .ui-funnel a.fc:hover { background: color-mix(in srgb, var(--fg) 4%, transparent); color: inherit; }
.ui-funnel .fc:first-child { border-left: 0; }
.ui-funnel .fn { font-size: 12.5px; color: var(--mut); display: flex; justify-content: space-between; gap: 6px; white-space: nowrap; }
.ui-funnel .fn span { overflow: hidden; text-overflow: ellipsis; }
.ui-funnel .fn em { font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--acc2); }
.ui-funnel .fv { font-size: 30px; font-weight: 700; letter-spacing: -.04em; line-height: 1; display: flex; flex-direction: column; gap: 4px; }
.ui-funnel .fv small { font-size: 11px; font-weight: 500; letter-spacing: 0; color: var(--mut); }
.ui-stack { display: flex; flex-direction: column; gap: 10px; }
.ui-stack .sb { display: flex; gap: 3px; height: var(--h, 10px); }
.ui-stack .sb i { display: block; height: 100%; border-radius: 5px; transform-origin: left center; min-width: 4px; }
.ui-heat { display: grid; gap: 4px; font-size: 12px; align-items: center; }
.ui-heat .c {
  height: var(--ch, 28px); border-radius: 7px; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 11.5px;
  background: color-mix(in srgb, var(--acc) calc(var(--v) * 1%), var(--chip)); color: var(--fg);
  box-shadow: inset 0 0 0 1px var(--line); transition: transform .15s var(--e-out);
}
.ui-heat .c.hot { color: #fff; box-shadow: 0 6px 16px -8px var(--acc); }
.ui-heat .c:hover { transform: scale(1.08); }
.ui-heat .hdr { color: var(--mut); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.ui-heat .rh { color: var(--mut); font-size: 12px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 6px; }
.ui-spark { display: block; overflow: visible; }
.ui-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.ui-steps li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; position: relative; padding-bottom: 14px; }
.ui-steps li:not(:last-child)::after { content: ''; position: absolute; left: 10.5px; top: 24px; bottom: 2px; width: 1px; background: linear-gradient(180deg, var(--line3), color-mix(in srgb, var(--acc) 60%, transparent)); }
.ui-steps .n { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--on-acc); background: var(--acc-grad); box-shadow: 0 4px 10px -4px var(--acc); }
.ui-steps li.off .n { background: var(--chip); color: var(--mut); box-shadow: inset 0 0 0 1px var(--line2); }
.ui-steps b { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.ui-steps small { display: block; font-size: 12px; color: var(--mut); margin-top: 2px; }

/* ── 6. Перекрытие классов contentos.css ───────────────────────────────── */
/* заголовок страницы, если шаблон рисует его сам (.eyebrow + h1 в контенте) */
.eyebrow {
  margin: 0 0 6px; color: var(--mut2); font: 600 10.5px/1.3 var(--font); letter-spacing: .12em; text-transform: uppercase;
}
.st-content > .eyebrow:first-child + h1, .st-content > .eyebrow:first-child + div > h1, .page-head h1 { font-size: 32px; margin: 0; }
.st-content > .eyebrow:first-child + div { align-items: center !important; }
.page-head { margin-bottom: 22px; display: flex; flex-direction: column; gap: 6px; }
.page-head .eyebrow { margin: 0; }
.page-head p.sub { margin: 4px 0 0; font-size: 13px; color: var(--mut); }
/* в каркасе уже есть шапка — дубль из шаблона прячем */
.st-page:has(> .st-head) .st-content > .page-head:first-child > :is(.eyebrow, h1) { display: none; }
.st-page:has(> .st-head) .st-content > .page-head:first-child:not(:has(> :not(.eyebrow, h1))) { display: none; }
@media (max-width: 900px) { .st-content > .eyebrow:first-child + h1, .page-head h1 { font-size: 26px; } }

.notice {
  margin: 0 0 20px; padding: 14px 16px 14px 46px; position: relative;
  color: var(--mut); background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); font-size: 12.5px; line-height: 1.6;
}
.notice::before {
  content: ''; position: absolute; left: 14px; top: 14px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--acc-grad); box-shadow: 0 4px 12px -4px var(--acc);
  -webkit-mask: radial-gradient(circle at 50% 30%, #000 1.6px, transparent 2px) , linear-gradient(#000, #000);
}
.notice::after { content: 'i'; position: absolute; left: 14px; top: 14px; width: 20px; height: 20px; display: grid; place-items: center; color: #fff; font: 700 11px/1 var(--font); }

/* плитки-метрики -> стеклянные KPI */
.stat-grid { gap: 12px; margin-bottom: 22px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.stat-grid.compact { gap: 8px; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.stat-card {
  padding: 18px 20px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; position: relative; overflow: hidden;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  transition: border-color .2s var(--e-out), transform .2s var(--e-out), box-shadow .2s var(--e-out), background-color .2s;
}
a .stat-card:hover { border-color: var(--line2); background: var(--card); transform: translateY(-2px); box-shadow: 0 16px 34px -20px var(--acc); }
.stat-card .label, .stat-grid.compact .stat-card .label {
  font: 500 12.5px/1.3 var(--font); letter-spacing: 0; text-transform: none; color: var(--mut);
}
.stat-card .value {
  margin-top: 8px; font: 700 30px/1 var(--font); letter-spacing: -.04em; color: var(--fg);
}
.stat-grid.compact .stat-card { padding: 12px 14px; }
.stat-grid.compact .stat-card .value { font-size: 22px; margin-top: 6px; }
.stat-card .sub { margin-top: 6px; font-size: 11.5px; color: var(--mut2); }
.stat-card.accent { background: var(--card); border-color: color-mix(in srgb, var(--acc) 45%, transparent); box-shadow: 0 16px 34px -24px var(--acc); }
.stat-card.accent::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(90% 120% at 0% 0%, var(--acc-soft), transparent 70%); }
.stat-card.accent .value { background: var(--gtext-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat-line { font-size: 13px; }
.stat-line .v, .stat-line .n { font-family: var(--font); color: var(--fg); }

/* фильтры: пилюли -> чипы Студии */
.filters { gap: 6px; margin-bottom: 12px; }
.filters .label-inline, .label-inline { font: 500 12.5px/1 var(--font); letter-spacing: 0; text-transform: none; color: var(--mut2); margin-right: 2px; }
.pill, .filters .pill {
  padding: 6px 12px; border: 1.5px solid var(--chip-bd); background: var(--chip); border-radius: 999px;
  font: 500 12.5px/1.2 var(--font); color: var(--mut); box-shadow: none;
  transition: border-color .15s var(--e-out), background-color .2s var(--e-out), color .15s, transform .15s var(--e-out);
}
.pill:hover, .filters .pill:hover { color: var(--fg); background: var(--chip); border-color: var(--line3); }
.pill:active { transform: scale(.96); }
.pill.active, .filters .pill.active { color: var(--fg); background: var(--acc-soft); border-color: var(--acc); font-weight: 600; box-shadow: none; }

/* таблицы — в стеклянной карточке, шапка без капса */
.tbl {
  margin: 8px 0 16px; background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); font-size: 13px;
}
.tbl th {
  padding: 12px 14px; color: var(--mut2); background: transparent; border-bottom: 1px solid var(--line);
  font: 500 12px/1.3 var(--font); letter-spacing: 0; text-transform: none;
}
.tbl td { padding: 12px 14px; border-bottom: 1px solid var(--line); color: var(--fg2); vertical-align: middle; }
.tbl td strong { color: var(--fg); }
.tbl td a { color: var(--fg); font-weight: 500; }
.tbl td a:hover { color: var(--acc2); }
.tbl tr:hover td { background: var(--hover); }
.tbl .num { font-family: var(--font); }
.tbl .tg-id { font-family: var(--font); color: var(--mut2); font-size: 11.5px; }
.tbl.heatmap td.hm-warn, span.hm-warn { color: var(--warn); }
.table-scroll, .tbl-scroll { border-radius: 16px; }
@media (max-width: 900px) {
  .st-content > .tbl, .section > .tbl { display: block; overflow-x: auto; }
}

/* бейджи -> статус-пилюли Студии */
.badge {
  --c1: var(--mut2); padding: 3px 8px; border: 0; border-radius: 7px; font: 600 11px/1.35 var(--font);
  background: color-mix(in srgb, var(--c1) 16%, transparent); color: color-mix(in srgb, var(--c1) 55%, var(--fg));
}
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--c1); box-shadow: 0 0 6px var(--c1); flex: none; }
.badge.s-new { --c1: #6e7fb8; }
.badge.s-active, .badge.s-running, .badge.s-done, .badge.s-succeeded, .badge.s-replied, .badge.s-won, .badge.s-interested, .badge.s-matched { --c1: #12a66a; }
.badge.s-paid, .badge.s-sent, .badge.s-approved, .badge.s-scheduled { --c1: #2e5bff; }
.badge.s-lapsed, .badge.s-paused, .badge.s-draft, .badge.s-pending, .badge.s-needs_manual, .badge.s-follow_up_needed { --c1: #f59e0b; }
.badge.s-blocked, .badge.s-failed, .badge.s-rejected, .badge.s-error, .badge.s-lost, .badge.s-stopped { --c1: #e5484d; }
.badge.s-interview, .badge.s-proposal, .badge.s-qualified { --c1: #8b5cf6; }
.badge.s-archived, .badge.s-not_sent { --c1: var(--mut2); }
.badge.bot-tarot { --c1: #8b5cf6; }
.badge.bot-astro { --c1: #38bdf8; }
.badge.bot-numero { --c1: #2ec4b6; }
.badge.bot-ai { --c1: #f06292; }
.badge.s-new, .badge.s-active, .badge.s-paid, .badge.s-lapsed, .badge.s-blocked,
.badge.bot-tarot, .badge.bot-astro, .badge.bot-numero { background: color-mix(in srgb, var(--c1) 16%, transparent); color: color-mix(in srgb, var(--c1) 55%, var(--fg)); }
.badge:empty::before { display: none; }

/* формы */
.form-row { gap: 12px; }
.field { gap: 6px; }
.field label { font: 500 12px/1.3 var(--font); letter-spacing: 0; text-transform: none; color: var(--mut); }
.chk { color: var(--mut); font-size: 13px; }
.chk input[type=checkbox] { accent-color: var(--acc); }

/* секции -> стеклянные карточки, заголовки секций без капса */
.section {
  margin: 0 0 18px; padding: 22px 24px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.section-h {
  margin: 0 0 14px; color: var(--fg); font: 600 16px/1.3 var(--font); letter-spacing: -.01em; text-transform: none;
}
.st-content > .section-h, .st-content > h2.section-h { font-size: 20px; letter-spacing: -.02em; margin: 26px 0 14px; }
.hint { color: var(--mut2); font-size: 12.5px; line-height: 1.6; }
.meta, .sub { color: var(--mut); }

/* пустое состояние старых шаблонов -> «спокойное» Студии */
.empty-state {
  display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 34px 24px 30px;
  color: var(--mut); text-align: center; background: var(--card); border: 1px dashed var(--line2); border-radius: var(--r-card);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); font-size: 13.5px; line-height: 1.6;
}
.empty-state::before {
  content: ''; width: 52px; height: 52px; border-radius: 50%; flex: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 13.5 6.5 5h11l2.5 8.5V19a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-5.5Z'/%3E%3Cpath d='M4 13.5h4.5l1 2h5l1-2H20'/%3E%3C/svg%3E") center / 22px no-repeat,
    var(--acc-grad);
  box-shadow: 0 10px 30px -10px var(--acc); animation: ui-pop .5s var(--e-soft) both;
}

/* карточки ботов / присутствия / экономики */
.bot-grid, .presence-grid, .econ-grid { gap: 14px; }
.bot-card, .presence-card, .econ-card {
  padding: 20px 22px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  transition: border-color .2s var(--e-out), transform .2s var(--e-out), box-shadow .2s var(--e-out);
}
.econ-card:hover, a .bot-card:hover { border-color: var(--line2); transform: translateY(-2px); box-shadow: 0 16px 34px -20px var(--acc); }
.bot-card .head, .presence-card .pc-head, .econ-card .ec-head { border-bottom-color: var(--line); }
.bot-card .name, .presence-card .pc-head .name, .econ-card .ec-head .name { font-weight: 600; }
.bot-card .total, .bot-card .rev .v, .econ-card .ec-row .v.gold { font-family: var(--font); color: var(--acc2); font-weight: 600; }
.bot-card .stage-row .n, .econ-card .ec-row .v { font-family: var(--font); }
.bot-card .rev { border-top-color: var(--line); }
.contact-head { border-bottom-color: var(--line); }
.contact-head .name { font-weight: 600; letter-spacing: -.02em; }

/* старая воронка ячейками */
.funnel-cell { background: var(--card); border: 1px solid var(--line); border-radius: 14px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.funnel-cell .label { font: 500 12px/1.3 var(--font); letter-spacing: 0; text-transform: none; color: var(--mut); }
.funnel-cell .value { font: 700 24px/1 var(--font); letter-spacing: -.03em; }
.chart-box { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }

/* экономика */
.econ-col-h { font: 600 13px/1.3 var(--font); letter-spacing: 0; text-transform: none; color: var(--fg); border-bottom-color: var(--line); }
.econ-col-h.me { color: var(--acc2); }
.econ-col-h.her { color: var(--vio); }
.econ-list li { border-bottom-color: var(--line); color: var(--fg2); }
.econ-list li::before { content: ''; top: 15px; left: 3px; width: 5px; height: 5px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 6px var(--acc); }
.econ-list.steps li::before { width: auto; height: auto; background: none; box-shadow: none; top: 8px; color: var(--acc2); font-family: var(--font); font-weight: 700; }

/* инбокс, события */
.inbox-list { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.inbox-row { border-bottom-color: var(--line); }
.inbox-row:hover { background: var(--hover); }
.inbox-row.inbox-out { background: var(--acc-soft2); }
.inbox-who a:hover { color: var(--acc2); }
.inbox-text { color: var(--fg2); }
.inbox-ts, .event-row .ts, .event-row .payload { font-family: var(--font); }
.inbox-reply { background: var(--surface-2); border-bottom-color: var(--line); }
.event-row { border-bottom-color: var(--line); }
.event-row .et { font-family: var(--font); color: var(--acc2); font-weight: 600; }

/* комментарии и директ */
.cmt { background: var(--card); border: 1px solid var(--line); border-radius: 16px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); padding: 16px 18px; }
.cmt-post { background: var(--field); border: 1px solid var(--line); border-radius: 10px; }
.cmt-reply { background: var(--acc-soft2); border-left: 0; border-radius: 12px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc) 22%, transparent); }
.dm-thread { background: var(--field); border: 1px solid var(--line); border-radius: 14px; }
.dm { background: var(--card-solid); border-color: var(--line); border-radius: 14px 14px 14px 4px; }
.dm.is-mine { background: var(--acc); color: var(--on-acc); border-radius: 14px 14px 4px 14px; }
.dm.is-mine .dm-at { color: rgba(255, 255, 255, .72); }
.dm-at { font-family: var(--font); }

/* Instagram: карточки выбора, медиа, шаги */
.scope-card, .media-card, .step-card { background: var(--field); border: 1px solid var(--line2); border-radius: 14px; }
.scope-card:hover, .media-card:hover { border-color: var(--line3); }
.scope-card:has(input:checked), .media-card:has(input:checked) { border-color: var(--acc); background: var(--acc-soft2); box-shadow: 0 0 0 3px var(--acc-soft); }
.media-thumb { background: var(--surface-3); border-radius: 10px; }
.media-kind { font-family: var(--font); background: rgba(7, 9, 14, .72); color: #fff; letter-spacing: .04em; border-radius: 6px; backdrop-filter: blur(6px); }
.media-meta strong { font-family: var(--font); }
.step-no { font: 600 12px/1 var(--font); letter-spacing: 0; text-transform: none; color: var(--acc2); }
.gate-num { font-family: var(--font); color: var(--on-acc); background: var(--acc-grad); box-shadow: 0 4px 10px -4px var(--acc); }

/* аналитика контента: сравнение */
.compare-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.compare-card.is-win { border-color: color-mix(in srgb, var(--acc) 50%, transparent); background: var(--card); box-shadow: 0 16px 34px -22px var(--acc); }
.compare-card.is-win .compare-num { background: var(--gtext-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.compare-label, .compare-num small, .compare-vs { font: 500 12px/1.3 var(--font); letter-spacing: 0; text-transform: none; color: var(--mut); }
.compare-num { letter-spacing: -.03em; }

/* аудитория кросс-промо */
.audience-result .summary .n { font-family: var(--font); color: var(--acc2); }
.audience-ids a { font-family: var(--font); background: var(--chip); border: 1px solid var(--line); border-radius: 7px; }
.audience-ids a:hover { color: var(--acc2); background: var(--hover); }

/* конструктор цепочек (Drawflow) */
.flow-toolbar { top: 0; background: var(--pop); border: 1px solid var(--line2); border-radius: 14px; box-shadow: var(--shadow); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.flow-toolbar .pill[data-node="message"] { --n-accent: var(--acc2); }
.flow-toolbar .pill[data-node="score_router"] { --n-accent: var(--warn); }
.flow-canvas, html.light .flow-canvas {
  background-color: var(--card-solid);
  background-image: radial-gradient(circle, color-mix(in srgb, var(--fg) 9%, transparent) 1px, transparent 1px);
  border: 1px solid var(--line); border-radius: var(--r-card);
}
.dfnode { --n-accent: var(--acc2); background: var(--card-solid); border-color: var(--line2); border-radius: 13px; box-shadow: var(--shadow); }
.dfn-message { --n-accent: var(--acc2); }
.dfn-delay { --n-accent: var(--info); }
.dfn-cond { --n-accent: var(--vio); }
.dfn-webhook { --n-accent: var(--ok); }
.dfn-score-router { --n-accent: var(--warn); }
.dfn-title { font: 600 12px/1.2 var(--font); letter-spacing: 0; text-transform: none; background: var(--surface-2); box-shadow: inset 0 2px 0 var(--n-accent); }
.dfn-input, .dfn-num, .dfn-range input { background: var(--field); border-color: var(--line2); border-radius: 8px; }
.dfn-outs, .dfn-range { font-family: var(--font); }
.dfn-media-item .nm::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--ok); vertical-align: middle; }
#drawflow .drawflow-node.selected .dfnode { box-shadow: 0 0 0 3px var(--acc-soft), var(--shadow); }
#drawflow .drawflow-node .input, #drawflow .drawflow-node .output { background: var(--card-solid); border-color: var(--line3); }
#drawflow .drawflow-node .input:hover, #drawflow .drawflow-node .output:hover { background: var(--acc); border-color: var(--acc); }
#drawflow .connection .main-path, html.light #drawflow .connection .main-path { stroke: color-mix(in srgb, var(--acc2) 55%, var(--line3)); }
#drawflow .connection .main-path:hover { stroke: var(--acc); }
#drawflow .connection .point { stroke: var(--acc); fill: var(--card-solid); }
.flow-panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }

/* старые утилиты: золото -> акцент */
.gold { color: var(--acc2); }

/* ── 7. Движение ───────────────────────────────────────────────────────── */
@keyframes ui-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes ui-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ui-pop { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes ui-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes col-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes ring-draw { from { stroke-dashoffset: var(--c); } }
@keyframes fn-reveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* Вход экрана: класс .enter на .st-app, ux.js снимает его через 1,1 с.
   Каскад 40 мс по прямым детям шапки и контента. */
.enter .st-page > .st-head, .enter .st-content > * { animation: ui-rise .34s var(--e-out) both; }
.enter .st-content > :nth-child(1) { animation-delay: .04s; }
.enter .st-content > :nth-child(2) { animation-delay: .08s; }
.enter .st-content > :nth-child(3) { animation-delay: .12s; }
.enter .st-content > :nth-child(4) { animation-delay: .16s; }
.enter .st-content > :nth-child(5) { animation-delay: .2s; }
.enter .st-content > :nth-child(6) { animation-delay: .24s; }
.enter .st-content > :nth-child(n + 7) { animation-delay: .28s; }
/* Drawflow считает координаты от трансформаций родителя — холст не двигаем */
.enter .st-content > :has(#drawflow), .enter .st-content > .flow-canvas { animation: ui-fade .34s var(--e-out) both; }
.enter .stat-grid > *, .enter .bot-grid > *, .enter .grid2 > *, .enter .grid3 > *, .enter .grid4 > * { animation: ui-rise .34s var(--e-out) both; }
.enter :is(.stat-grid, .bot-grid, .grid2, .grid3, .grid4) > :nth-child(2) { animation-delay: .05s; }
.enter :is(.stat-grid, .bot-grid, .grid2, .grid3, .grid4) > :nth-child(3) { animation-delay: .1s; }
.enter :is(.stat-grid, .bot-grid, .grid2, .grid3, .grid4) > :nth-child(4) { animation-delay: .15s; }
.enter :is(.stat-grid, .bot-grid, .grid2, .grid3, .grid4) > :nth-child(n + 5) { animation-delay: .2s; }

/* графики рисуются при появлении */
.ui-draw .bcol { animation: col-grow .8s var(--e-out) both; }
.ui-draw .bar > i, .ui-draw .ui-hbar .t i, .ui-draw .sb i, .bar.ui-draw > i { animation: ui-grow .8s var(--e-out) both .1s; }
.ui-draw .line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1s var(--e-out) forwards .15s; }
.ui-draw .ring-v { animation: ring-draw 1s var(--e-out) both .1s; }
.ui-draw .band { animation: fn-reveal 1s var(--e-out) both .15s; }
.ui-draw .fade { animation: ui-fade .5s var(--e-out) both .3s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .ui-draw .line { stroke-dashoffset: 0 !important; }
}

/* строка бренда: лого + кнопка закрытия меню на мобильном */
.st-brandrow { display: flex; align-items: flex-start; gap: 8px; }
.st-brandrow .st-brand { flex: 1; min-width: 0; }

/* сайдбар: шапка, сводка и низ не сжимаются — прокручивается только меню */
.st-brandrow, .st-out, .st-find, .st-foot { flex: none; }
.st-nav a { padding: 6px 10px; font-size: 13.5px; }
.st-navsep { margin: 12px 10px 4px; }
.st-nav a .ct { font-style: normal; }
/* нижняя тень меню, когда оно длиннее экрана */
.st-nav { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 18px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 18px), transparent); padding-bottom: 14px; }
/* «Ещё» — кнопка в строке пользователя, меню раскрывается вверх на ширину строки */
.st-me { position: relative; }
.st-me .st-more { position: static; }
.st-me .st-more summary { padding: 0; width: 32px; height: 32px; justify-content: center; color: var(--fg); }
.st-me .st-more[open] summary { border-color: var(--acc2); background: var(--hover); }
.st-me .st-more-menu { left: 0; right: 0; bottom: calc(100% + 8px); }

/* шаблон рисует заголовок сам: отступ до первого блока как у шапки каркаса */
.st-content > .eyebrow:first-child + h1, .st-content > .eyebrow:first-child + div:has(> h1) { margin-bottom: 20px !important; }
.st-content > .eyebrow:first-child + div:has(> h1) > h1 { margin: 0; }

/* Каркас уже вывел шапку (page_heading), а шаблон рисует ещё свой eyebrow + h1:
   eyebrow прячем, h1 шаблона становится заголовком-статусом второго уровня. */
.st-page:has(> .st-head) .st-content > .eyebrow:first-child { display: none; }
.st-page:has(> .st-head) .st-content > .eyebrow:first-child + h1,
.st-page:has(> .st-head) .st-content > .eyebrow:first-child + div:has(> h1) > h1 { font-size: 22px; letter-spacing: -.025em; }

/* ══ Раунд 1 критика: основа ════════════════════════════════════════════ */

/* Сайдбар целиком помещается в 1440×900: меню не прячется под кнопку темы.
   Если экран ниже — меню прокручивается, края гаснут сверху и снизу. */
.st-side { padding: 16px 14px 12px; gap: 4px; }
.st-brand { padding-bottom: 8px; }
.st-out { margin: 0 0 6px; padding: 9px 11px; gap: 7px; }
.st-out .top { gap: 10px; }
.st-out .tx { gap: 1px; }
.st-out .tx .cap { display: none; }
.st-out .tx b { font-size: 13px; }
.st-out .tx small { font-size: 11px; }
.st-find { display: none; }
.st-nav { gap: 1px; padding: 6px 6px 10px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12px, #000 calc(100% - 16px), transparent);
          mask-image: linear-gradient(180deg, transparent 0, #000 12px, #000 calc(100% - 16px), transparent); }
.st-nav a { padding: 5px 10px; min-height: 30px; font-size: 13.5px; }
.st-nav a.on::before { top: 8px; bottom: 8px; }
.st-navsep { margin: 10px 10px 3px; }
.st-navsep:first-child { margin-top: 0; }
.st-foot { gap: 8px; padding-top: 6px; }
.st-theme { height: 30px; font-size: 12.5px; }
.st-me { padding-top: 9px; }

/* Боты: градиентный бейдж вместо эмодзи */
.pav.sz-xs { width: 18px; height: 18px; font-size: 8.5px; box-shadow: 0 0 0 1.5px var(--card-solid); }
.pav.bot { border-radius: 7px; letter-spacing: -.02em; font-weight: 800; }
.pav.bot.sz-xs { border-radius: 5px; }
.pav.bot.sz-lg { border-radius: 10px; }
.pav.bot.sz-xl { border-radius: 16px; font-size: 20px; }
.botchip { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--fg); white-space: nowrap; }
.chip .pav, .pill .pav, .seg .pav { margin-right: 2px; }
.chip, .pill { display: inline-flex; align-items: center; gap: 6px; }

/* Ошибка: не пустое состояние, а предупреждение */
.alertcard {
  display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: var(--r-card);
  background: color-mix(in srgb, var(--bad) 8%, var(--card)); border: 1px solid color-mix(in srgb, var(--bad) 35%, transparent);
  position: relative; overflow: hidden;
}
.alertcard::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--bad-grad); }
.alertcard .ai { flex: none; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; color: #fff; background: var(--bad-grad); box-shadow: 0 8px 22px -10px var(--bad); }
.alertcard .ab { min-width: 0; display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--mut); line-height: 1.5; }
.alertcard .ab b { color: var(--fg); font-size: 14px; font-weight: 600; }
.alertcard .ab p { margin: 0; }
.alertcard.warn { background: color-mix(in srgb, var(--warn) 8%, var(--card)); border-color: color-mix(in srgb, var(--warn) 35%, transparent); }
.alertcard.warn::before, .alertcard.warn .ai { background: var(--warn-grad); }
.alertcard.warn .ai { box-shadow: 0 8px 22px -10px var(--warn); }
.alertcard.info { background: var(--card); border-color: var(--line2); }
.alertcard.info::before { background: linear-gradient(90deg, transparent, var(--acc), var(--acc2), transparent); }
.alertcard.info .ai { background: var(--acc-grad); box-shadow: 0 8px 22px -10px var(--acc); }

/* Значение для копирования */
.copyfld { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 14px; border-radius: var(--r-field); background: var(--field); border: 1px solid var(--line2); min-width: 0; }
.copyfld .cl { flex: none; font-size: 12px; color: var(--mut2); }
.copyfld code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: none; border: 0; padding: 0; font-size: 12.5px; color: var(--fg); }
.copyfld .icbtn.done { color: var(--ok); border-color: var(--ok); }

/* Таблица в своей прокрутке, страница не уезжает вбок */
.tbl-wrap { max-width: 100%; overflow-x: auto; border-radius: 18px; border: 1px solid var(--line); background: var(--card); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.tbl-wrap > .tbl { margin: 0; border: 0; border-radius: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; min-width: 100%; }
.tbl td.who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tbl td.who > span:last-child { min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.tbl td.who small { color: var(--mut2); font-size: 11.5px; }
.tbl td.nowrap, .tbl th.nowrap { white-space: nowrap; }
.tbl td .bar { min-width: 70px; }
time.rel { white-space: nowrap; color: var(--mut); font-size: 12.5px; }

/* Шапка карточки внутри .card с визуалом */
.vcard { display: flex; flex-direction: column; gap: 16px; }
.vcard .card-h { margin: 0; }
.vrow { display: flex; align-items: center; gap: 18px; min-width: 0; }
.vrow > .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.mini-legend { display: flex; flex-direction: column; gap: 7px; font-size: 12.5px; color: var(--mut); }
.mini-legend span { display: flex; align-items: center; gap: 8px; }
.mini-legend b { margin-left: auto; color: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.bigmoney { font-size: 30px; font-weight: 700; letter-spacing: -.04em; line-height: 1; background: var(--gtext-grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.bigmoney small { font-size: 16px; margin-left: 2px; }

/* Карточка бота */
.botcard .bh { display: flex; align-items: center; gap: 12px; }
.botcard .bh .t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.botcard .bh .t b { font-size: 15px; font-weight: 600; }
.botcard .bh .t small { font-size: 12px; color: var(--mut2); }
.botcard .money { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.botcard .money .l { font-size: 12px; color: var(--mut2); line-height: 1.35; }

/* Фильтры: строка «подпись + сегмент/селект» вместо стены чипов */
.fbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.fbar .fsel { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 4px 0 12px; border-radius: 10px; border: 1px solid var(--line2); background: var(--chip); font-size: 12.5px; color: var(--mut); }
.fbar .fsel.on { border-color: color-mix(in srgb, var(--acc) 55%, transparent); background: var(--acc-soft2); color: var(--fg); }
.fbar .fsel select { height: 30px; border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 26px 0 2px !important; font-weight: 600; color: var(--fg); min-width: 0; width: auto; }
.fbar .reset { font-size: 12.5px; color: var(--mut); display: inline-flex; align-items: center; gap: 5px; }
.fbar .reset:hover { color: var(--fg); }

/* Сворачиваемая справка для разработчика */
details.devnote { border: 1px solid var(--line); border-radius: 14px; background: var(--chip); font-size: 12.5px; color: var(--mut); }
details.devnote > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 10px 14px; color: var(--mut2); }
details.devnote > summary::-webkit-details-marker { display: none; }
details.devnote > summary:hover { color: var(--fg); }
details.devnote > summary .chev { margin-left: auto; transition: transform .2s var(--e-out); }
details.devnote[open] > summary .chev { transform: rotate(180deg); }
details.devnote > div { padding: 0 14px 12px; line-height: 1.6; }

/* Иконка-плитка в заголовке карточки (Экономика: фокус / фон / стоп) */
.tile-ic { width: 36px; height: 36px; flex: none; border-radius: 11px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--g1, #2E5BFF), var(--g2, #8AA6FF)); box-shadow: 0 8px 22px -10px var(--g1, #2E5BFF); }
.listx { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.listx li { display: flex; gap: 10px; font-size: 13px; color: var(--fg2); line-height: 1.45; }
.listx li::before { content: ''; flex: none; width: 6px; height: 6px; margin-top: 7px; border-radius: 50%; background: var(--c, var(--acc)); box-shadow: 0 0 8px var(--c, var(--acc)); }
.listx li b { color: var(--fg); font-weight: 600; }
.listx li small { display: block; color: var(--mut); font-size: 12px; margin-top: 2px; }

/* Шаг-разделитель между шапкой и первым блоком у страниц без st-head */
.st-content > * + * { margin-top: 18px; }
.st-content > .tbl-wrap + .hint, .st-content > .tbl + .hint { margin-top: 10px; }

/* Прочие заголовки разделов внутри контента */
.st-content > h2 { font-size: 20px; font-weight: 600; letter-spacing: -.02em; margin: 30px 0 0; }
.st-content > h2 + * { margin-top: 12px; }
/* приоритет клиента — цифра на углу аватара */
.prio { position: absolute; right: -5px; bottom: -4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; display: grid; place-items: center; font: 700 9.5px/1 var(--font); font-style: normal; color: var(--mut); background: var(--card-solid); box-shadow: 0 0 0 1.5px var(--line2); }
.prio.hi { color: #fff; background: var(--acc-grad); box-shadow: 0 0 0 1.5px var(--card-solid), 0 4px 10px -4px var(--acc); }
.fbar label.fsel { flex: none; width: auto; margin: 0; display: inline-flex; }
.fbar .fsel select { width: auto !important; max-width: 220px; }
.fbar .fsel select { field-sizing: content; }
/* пипсы-оценка вне KPI (балл, совпадение) */
.pips { display: inline-flex; gap: 3px; vertical-align: middle; }
.pips i { width: 12px; height: 5px; border-radius: 3px; background: var(--line2); }
.pips i.on { background: var(--acc-grad); box-shadow: 0 0 8px -2px var(--acc); }
.listx.nodot li::before { display: none; }
.copyfld code { background: none !important; border: 0 !important; padding: 0 !important; box-shadow: none !important; }
.st-page:has(> .st-head) .contact-head > .name { display: none; }
.st-nav { padding-bottom: 2px; padding-top: 4px; }
/* края меню гаснут только когда есть что прокручивать (класс ставит ux.js) */
.st-nav { -webkit-mask-image: none; mask-image: none; }
.st-nav.fade-b { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 22px), transparent); }
.st-nav.fade-t { -webkit-mask-image: linear-gradient(180deg, transparent, #000 22px); mask-image: linear-gradient(180deg, transparent, #000 22px); }
.st-nav.fade-t.fade-b { -webkit-mask-image: linear-gradient(180deg, transparent, #000 22px, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(180deg, transparent, #000 22px, #000 calc(100% - 22px), transparent); }
.presence-grid { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important; }
/* воронка на телефоне: лента не помещается — стадии плитками 2 в ряд */
@media (max-width: 600px) {
  .ui-funnel { height: auto !important; overflow: visible; }
  .ui-funnel svg { display: none; }
  .ui-funnel .cols { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px; }
  .ui-funnel .fc { border: 1px solid var(--line) !important; border-radius: 12px; gap: 10px; background: linear-gradient(135deg, var(--acc-soft2), transparent); }
  .ui-funnel .fv { font-size: 24px; }
}

/* ── Раунд 2: общие куски разделов ─────────────────────────────────────── */
/* Кросс-промо: маршрут «бот → бот» */
.xp-card { display: flex; flex-direction: column; gap: 18px; }
.xp-route { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 14px; }
.xp-end { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line2); background: var(--field); margin: 0; min-width: 0; cursor: pointer; transition: border-color .2s var(--e-out); }
.xp-end:hover { border-color: var(--line3); }
.xp-t { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.xp-t small { font-size: 12px; color: var(--mut2); }
.xp-t select { height: 34px; border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 26px 0 0 !important; font-size: 16px; font-weight: 600; color: var(--fg); width: 100%; }
.xp-q { --g1: var(--surface-3); --g2: var(--surface-2); color: var(--mut2) !important; background: var(--chip) !important; box-shadow: inset 0 0 0 1px var(--line2) !important; }
.xp-arrow { position: relative; width: 64px; height: 36px; display: grid; place-items: center; color: #fff; }
.xp-arrow i { position: absolute; left: 0; right: 0; top: 50%; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--acc), var(--acc2)); }
.xp-arrow svg { position: relative; width: 30px; height: 30px; padding: 6px; border-radius: 50%; background: var(--acc-grad); box-shadow: 0 8px 22px -8px var(--acc); }
.xp-opts { padding-top: 16px; border-top: 1px solid var(--line); }
.xp-opts .fsel input { height: 30px; border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 4px !important; font-weight: 600; color: var(--fg); }
.xp-opts .btn { margin-left: auto; }
.xp-ids { display: flex; flex-wrap: wrap; gap: 6px; max-height: 260px; overflow: auto; }
.xp-ids .chip { font-variant-numeric: tabular-nums; gap: 5px; }
@media (max-width: 700px) {
  .xp-route { grid-template-columns: 1fr; }
  .xp-arrow { transform: rotate(90deg); margin: -4px auto; }
  .xp-opts .btn { margin-left: 0; width: 100%; justify-content: center; }
}
/* Переключатель вкл/выкл (кнопка формы) */
.tgl { flex: none; width: 36px; height: 21px; padding: 0; border-radius: 999px; border: 1px solid var(--line2); background: var(--chip); position: relative; cursor: pointer; transition: background .25s var(--e-out), border-color .25s var(--e-out); }
.tgl i { position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: var(--mut2); transition: transform .3s var(--e-out), background .25s; }
.tgl.on { background: var(--ok-grad); border-color: transparent; box-shadow: 0 6px 16px -8px var(--ok); }
.tgl.on i { transform: translateX(15px); background: #fff; }
.tgl:active { transform: scale(.94); }
/* воронка: подпись стадии до двух строк, без «квалифицир…» */
.ui-funnel .fn { white-space: normal; align-items: flex-start; line-height: 1.25; }
.ui-funnel .fn span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: clip; overflow-wrap: break-word; }
.ui-funnel .fn em { flex: none; white-space: nowrap; }
.ring-cap { flex: none; display: inline-flex; flex-direction: column; align-items: center; gap: 4px; }
.ring-cap > small { font-size: 11px; color: var(--mut2); line-height: 1; }
/* Контент: пара «охват против откликов» */
.vs-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.vs-pair > div { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--field); min-width: 0; }
.vs-pair > div b { font-size: 13px; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vs-pair > .win { border-color: color-mix(in srgb, var(--ok) 40%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--ok) 10%, transparent), transparent); }
@media (max-width: 600px) { .vs-pair { grid-template-columns: 1fr; } }
/* Скелет списка (ждём данные) */
.dm-skel { display: flex; flex-direction: column; gap: 10px; }
.sk-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--field); }
.sk-av { width: 34px; height: 34px; border-radius: 50%; flex: none; }
.sk-lines { flex: 1; display: flex; flex-direction: column; gap: 7px; }
.sk-lines i { display: block; height: 8px; border-radius: 4px; }
.sk-chip { width: 74px; height: 20px; border-radius: 999px; flex: none; }
.sk-av, .sk-lines i, .sk-chip { background: linear-gradient(90deg, var(--line) 0%, var(--line2) 40%, var(--line) 80%); background-size: 240% 100%; animation: sk-sheen 1.8s var(--e-io) infinite; }
@keyframes sk-sheen { from { background-position: 120% 0; } to { background-position: -120% 0; } }
@media (prefers-reduced-motion: reduce) { .sk-av, .sk-lines i, .sk-chip { animation: none; } }
.alertcard .devnote { background: color-mix(in srgb, var(--fg) 3%, transparent); }
/* «Ещё фильтры»: редкие фильтры во всплывающей панели, чтобы строка не переносилась */
details.fmore { position: relative; flex: none; }
details.fmore > summary { list-style: none; cursor: pointer; padding-right: 10px; user-select: none; }
details.fmore > summary::-webkit-details-marker { display: none; }
details.fmore > summary b { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; display: inline-grid; place-items: center; font-size: 11px; color: #fff; background: var(--acc-grad); }
details.fmore > summary .chev { transition: transform .2s var(--e-out); }
details.fmore[open] > summary .chev { transform: rotate(180deg); }
.fmore-pop { position: absolute; z-index: 30; top: calc(100% + 8px); right: 0; display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: var(--r-pop); background: var(--pop); border: 1px solid var(--line2); box-shadow: var(--shadow-pop, var(--shadow)); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); animation: ui-pop .22s var(--e-out); min-width: 230px; }
.fmore-pop .fsel { justify-content: space-between; }
@media (max-width: 900px) { .fmore-pop { right: auto; left: 0; } }
/* таблица шире экрана: край гаснет, видно, что дальше есть колонки */
.tbl-wrap.has-more { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); }
.tbl-wrap.has-more.at-end { -webkit-mask-image: none; mask-image: none; }
.tbl-wrap.has-more.mid { -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 56px), transparent); }
.tbl-wrap.has-more.at-end.mid { -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px); mask-image: linear-gradient(90deg, transparent, #000 40px); }
/* Новый клиент: форма + превью */
.cn-grid { align-items: start; }
.cn-aside { position: sticky; top: 24px; }
.cn-preview { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--field); }
.cn-preview .t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cn-preview .t b { font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-preview .t small { font-size: 12px; color: var(--mut2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-steps { display: flex; flex-direction: column; gap: 0; }
.cn-step { position: relative; display: flex; align-items: center; gap: 12px; padding: 7px 0; font-size: 13px; color: var(--mut2); transition: color .2s var(--e-out); }
.cn-step i { position: relative; z-index: 1; width: 12px; height: 12px; border-radius: 50%; flex: none; background: var(--card-solid); box-shadow: inset 0 0 0 2px var(--line3); transition: background .25s var(--e-out), box-shadow .25s; }
.cn-step:not(:last-child)::after { content: ''; position: absolute; left: 5px; top: 22px; bottom: -8px; width: 2px; background: var(--line2); }
.cn-step.past { color: var(--mut); }
.cn-step.past i { background: var(--acc-soft); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--acc) 60%, transparent); }
.cn-step.on { color: var(--fg); font-weight: 600; }
.cn-step.on i { background: var(--acc-grad); box-shadow: 0 0 0 4px var(--acc-soft), 0 0 12px var(--acc); }
@media (max-width: 900px) { .cn-aside { position: static; } }
/* цифра справа у пункта списка (Экономика: фокус / фон / стоп) */
.listx li > span:first-child { flex: 1; min-width: 0; }
.lfig { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; padding-left: 8px; text-align: right; }
.lfig b { font-size: 17px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lfig small { font-size: 11px; color: var(--mut2); white-space: nowrap; margin: 0 !important; }
/* KPI на телефоне: нечётная последняя плитка на всю ширину, без пустой клетки */
@media (max-width: 900px) {
  .kpis > .kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.card-h .more { white-space: nowrap; flex: none; }
.card-h > div { min-width: 0; }
/* Пояснение-врезка вместо полоски слева */
.notebox { padding: 10px 14px 10px 36px !important; border-radius: 12px; border: 1px solid var(--line2); background: var(--acc-soft2); position: relative; color: var(--fg2) !important; }
.notebox::before { content: ''; position: absolute; left: 14px; top: 15px; width: 8px; height: 8px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 10px var(--acc); }
pre.codebox { background: var(--field); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; white-space: pre-wrap; font: 13px/1.6 var(--font); color: var(--fg2); }
.xp-ids { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 28px), transparent); padding-bottom: 14px; }
.lfig b.gtext, .lfig b.btext { color: transparent; }

/* ── Переключатель проектов (03.10.2026): одна кодовая база, отдельные CRM ── */
.st-projects{display:flex;gap:4px;padding:4px;margin:0 0 10px;border:1px solid var(--line);border-radius:12px;background:var(--field)}
.st-projects a{flex:1;text-align:center;padding:7px 6px;border-radius:9px;font-size:12.5px;font-weight:600;color:var(--mut);text-decoration:none;transition:background .2s var(--e-out),color .2s var(--e-out)}
.st-projects a:hover{color:var(--fg);background:var(--hover)}
.st-projects a.on{color:var(--fg);background:var(--acc-soft);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--acc) 35%,transparent)}
.hc-solo{display:grid;grid-template-columns:1fr;gap:18px}