/* Оболочка сайта v4 «Moorly» — кожа разделов (29.10.2026). Действует только при html.sv4-on (site_v4.js).
   1) Прежняя оболочка (боковая колонка, шапка, мобильное меню) прячется; разделы садятся под закреплённую верхнюю полосу.
   2) Сырые токены шаблона (--sv4-*) в обеих темах (html[data-theme]) → токены сайта (index.html :root), рабочих экранов
   (.ws-kit) и «Агентов» v3 — так графики (SVG, canvas) и таблицы остаются как есть и красятся теми же переменными.
   Жёсткие цвета отдельных разделов (Реклама, Товары) — следующие пакеты, здесь не трогаются. */

/* ---------- 1. Посадка ---------- */
html.sv4-on { --sv4-top: 130px; }
html.sv4-on .shell-sidebar, html.sv4-on .shell-topbar, html.sv4-on .shell-mobnav, html.sv4-on .shell-more-sheet, html.sv4-on .shell-more-backdrop { display: none !important; }
html.sv4-on body { padding: calc(var(--sv4-top) + 12px) 24px 32px !important; margin: 0 !important; background: transparent !important; }
html.sv4-on body > .view { max-width: 1560px; margin-left: auto; margin-right: auto; }
html.sv4-on #tovary-topnav { top: var(--sv4-top); max-width: 1560px; margin-left: auto; margin-right: auto; background: transparent; }
html.sv4-on #dec-subnav, html.sv4-on #pa-subnav, html.sv4-on #fin-topbar { top: var(--sv4-top); background: transparent; }
html.sv4-on #home-v4 { padding-top: var(--sv4-top); }
html.sv4-on.hv4-on body:has(#v-today.view.active) { padding: 0 !important; }
@media (max-width: 760px) {
  html.sv4-on { --sv4-top: 112px; }
  html.sv4-on body { padding: calc(var(--sv4-top) + 8px) 12px calc(100px + env(safe-area-inset-bottom)) !important; }
}
html.sv4-on::view-transition-old(root), html.sv4-on::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

/* ---------- 2. Сырые токены шаблона ---------- */
html.sv4-on {
  --sv4-bg: oklch(95% .018 215); --sv4-glass: #ffffff9e; --sv4-glass-strong: #fafcfdd6; --sv4-glass-rim: #ffffffb3; --sv4-glass-hi: #fffffff2;
  --sv4-card: #ffffffdb; --sv4-card-2: oklch(45% .04 220/.055); --sv4-card-3: oklch(45% .04 220/.1);
  --sv4-ink: oklch(22% .025 230); --sv4-ink-2: oklch(36% .025 230); --sv4-muted: oklch(47% .02 230);
  --sv4-line: oklch(30% .03 230/.09); --sv4-line-2: oklch(30% .03 230/.16);
  --sv4-shadow: 0 1px 1px oklch(30% .05 230/.04), 0 12px 32px -18px oklch(35% .06 225/.32);
  --sv4-accent: oklch(50% .09 205); --sv4-accent-hi: oklch(56% .095 205); --sv4-accent-ink: #fff; --sv4-accent-soft: oklch(50% .09 205/.13); --sv4-accent-text: oklch(44% .085 205);
  --sv4-good: oklch(50% .11 155); --sv4-warn: oklch(52% .11 68); --sv4-bad: oklch(52% .16 25); --sv4-info: oklch(50% .12 250);
  --sv4-good-soft: oklch(60% .12 155/.15); --sv4-warn-soft: oklch(75% .13 75/.22); --sv4-bad-soft: oklch(60% .16 25/.13); --sv4-info-soft: oklch(60% .12 250/.13);
  --sv4-sky1: oklch(97.5% .012 230); --sv4-sky2: oklch(94.5% .03 210); --sv4-w4: oklch(78% .075 228);
  --sv4-font: "Urbanist", ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;   /* кириллицы у Urbanist нет — округлый системный, не обычный SF Pro */
  background: linear-gradient(180deg, var(--sv4-sky1), var(--sv4-sky2) 60%, var(--sv4-w4)) fixed; color-scheme: light;
}
html.sv4-on[data-theme="dark"] {
  --sv4-bg: oklch(17% .022 235); --sv4-glass: #0f161c9e; --sv4-glass-strong: #12191fdb; --sv4-glass-rim: #ffffff17; --sv4-glass-hi: #ffffff24;
  --sv4-card: #1e272ee6; --sv4-card-2: #dcf0f50b; --sv4-card-3: #dcf0f517;
  --sv4-ink: oklch(94% .01 220); --sv4-ink-2: oklch(84% .015 220); --sv4-muted: oklch(72% .018 225);
  --sv4-line: #dcf0f514; --sv4-line-2: #dcf0f526;
  --sv4-shadow: 0 1px 1px #0000004d, 0 16px 36px -18px #000000b3;
  --sv4-accent: oklch(77% .1 195); --sv4-accent-hi: oklch(82% .095 195); --sv4-accent-ink: oklch(20% .04 215); --sv4-accent-soft: oklch(77% .1 195/.15); --sv4-accent-text: oklch(82% .09 195);
  --sv4-good: oklch(79% .12 155); --sv4-warn: oklch(82% .12 78); --sv4-bad: oklch(75% .13 25); --sv4-info: oklch(77% .1 250);
  --sv4-good-soft: oklch(79% .12 155/.14); --sv4-warn-soft: oklch(82% .12 78/.14); --sv4-bad-soft: oklch(75% .13 25/.15); --sv4-info-soft: oklch(77% .1 250/.14);
  --sv4-sky1: oklch(15% .02 250); --sv4-sky2: oklch(19% .03 228); --sv4-w4: oklch(16.5% .045 235);
  color-scheme: dark;
}

/* ---------- 3. Токены сайта (index.html :root) ← шаблон; графики и таблицы берут их же ---------- */
html.sv4-on {
  --bg: transparent; --surface: var(--sv4-card); --surface-2: var(--sv4-card-2); --text: var(--sv4-ink); --text-muted: var(--sv4-muted);
  --border: var(--sv4-line-2); --green: var(--sv4-good); --red: var(--sv4-bad); --amber: var(--sv4-warn); --blue: var(--sv4-info);
  --accent: var(--sv4-accent); --success: var(--sv4-good); --danger: var(--sv4-bad); --warning: var(--sv4-warn);
  --success-bg: var(--sv4-good-soft); --danger-bg: var(--sv4-bad-soft); --warning-bg: var(--sv4-warn-soft); --accent-bg: var(--sv4-accent-soft);
  --grad-ai: linear-gradient(135deg, var(--sv4-accent-soft), var(--sv4-good-soft));
  --shadow: var(--sv4-shadow); --shadow-sm: var(--sv4-shadow); --shadow-pop: var(--sv4-shadow);
  --r-card: 16px; --r-control: 12px; --r-chip: 10px; --teal: var(--sv4-accent);
}
html.sv4-on body { font-family: var(--sv4-font); color: var(--sv4-ink); }
html.sv4-on .card, html.sv4-on .panel, html.sv4-on .block {
  background: linear-gradient(180deg, var(--sv4-glass-hi) -60%, transparent 38%), var(--sv4-glass);
  -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4);
  border-color: transparent; box-shadow: inset 0 1px 0 var(--sv4-glass-hi), inset 0 0 0 1px var(--sv4-glass-rim), var(--sv4-shadow);
}

/* ---------- 4. Рабочие экраны (.ws-kit: AI-директор, Товары, Поставки, Конкуренты, Настройки) ---------- */
html.sv4-on .ws-kit { --ads-cyan: var(--sv4-accent-text); --ads-red: var(--sv4-bad); --ads-amber: var(--sv4-warn); color: var(--sv4-ink); }
html.sv4-on .ws-kit .ws-panel, html.sv4-on .ws-kit .ws-kpi {
  border-color: transparent; border-radius: 16px;
  background: linear-gradient(180deg, var(--sv4-glass-hi) -60%, transparent 38%), var(--sv4-glass);
  -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4);
  box-shadow: inset 0 1px 0 var(--sv4-glass-hi), inset 0 0 0 1px var(--sv4-glass-rim), var(--sv4-shadow);
}
html.sv4-on .ws-kit .ws-state { border-color: var(--sv4-line-2); color: var(--sv4-muted); }
html.sv4-on .ws-kit .ws-tabs [role="tab"] { border-color: transparent; background: var(--sv4-card-2); color: var(--sv4-muted); box-shadow: inset 0 0 0 1px var(--sv4-line); border-radius: 10px; font-weight: 600; }
html.sv4-on .ws-kit .ws-tabs [role="tab"][aria-selected="true"] { background: var(--sv4-accent); color: var(--sv4-accent-ink); box-shadow: none; }
html.sv4-on .ws-kit .ws-badge { background: var(--sv4-accent-soft); color: var(--sv4-accent-text); }
html.sv4-on .ws-kit .ws-badge.danger { background: var(--sv4-bad-soft); color: var(--sv4-bad); }
html.sv4-on .ws-kit .ws-quality { background: var(--sv4-card-3); color: var(--sv4-muted); }
html.sv4-on .ws-kit .ws-quality[data-quality="ok"] { background: var(--sv4-good-soft); color: var(--sv4-good); }
html.sv4-on .ws-kit .ws-quality[data-quality="partial"], html.sv4-on .ws-kit .ws-quality[data-quality="stale"] { background: var(--sv4-warn-soft); color: var(--sv4-warn); }
html.sv4-on .ws-kit .ws-quality[data-quality="unavailable"] { background: var(--sv4-bad-soft); color: var(--sv4-bad); }

/* ---------- 5. «Агенты» v3 (свои токены = токены Главной v3, обе темы) ---------- */
html.sv4-on #agents-v3 .agt-v3, html.sv4-on #agents-v3[data-theme="light"] .agt-v3 {
  --page: transparent; --bar-bg: var(--sv4-glass); --control-bg: var(--sv4-card-2); --surface: var(--sv4-card); --panel: var(--sv4-card); --raised: var(--sv4-glass-strong);
  --surface-edge: var(--sv4-line); --text: var(--sv4-ink); --text-2: var(--sv4-ink-2); --text-muted: var(--sv4-muted); --muted: var(--sv4-muted);
  --accent-fill: var(--sv4-accent); --accent-ink: var(--sv4-accent-text); --accent-ink-hover: var(--sv4-accent-hi); --ads-cyan: var(--sv4-accent-text); --on-accent: var(--sv4-accent-ink);
  --good-ink: var(--sv4-good); --ads-good: var(--sv4-good); --bad-ink: var(--sv4-bad); --ads-red: var(--sv4-bad); --warn-ink: var(--sv4-warn); --ads-amber: var(--sv4-warn);
  --dot-ok: var(--sv4-good); --dot-partial: var(--sv4-warn); --dot-none: var(--sv4-muted);
  --live-edge: var(--sv4-accent); --live-tint: var(--sv4-accent-soft); --icon-bg: var(--sv4-card-2); --soft-bg: var(--sv4-card-2); --nav-active-bg: var(--sv4-card);
  --divider: var(--sv4-line); --line: var(--sv4-line); --control-edge: var(--sv4-line-2); --tint-hover: var(--sv4-card-2); --tint-press: var(--sv4-accent-soft); --skel: var(--sv4-card-3);
  --pill-red-ink: var(--sv4-bad); --pill-red-bg: var(--sv4-bad-soft); --pill-cyan-ink: var(--sv4-accent-text); --pill-cyan-bg: var(--sv4-accent-soft);
  --switch-off: var(--sv4-card-3); --switch-knob: #fff; --switch-on: var(--sv4-accent); --shadow-float: var(--sv4-shadow); --scrollbar: var(--sv4-line-2); --selection: var(--sv4-accent-soft);
  --radius-block: 16px; --radius-inner: 12px; --radius-control: 12px; --ease-out: cubic-bezier(.22, 1, .36, 1);
  font-family: var(--sv4-font); background: none; padding: 0; border-radius: 0;
}
html.sv4-on #agents-v3 .panel, html.sv4-on #agents-v3 .agt-card, html.sv4-on #agents-v3 .aid-state {
  border-color: transparent;
  background: linear-gradient(180deg, var(--sv4-glass-hi) -60%, transparent 38%), var(--sv4-glass);
  -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4);
  box-shadow: inset 0 1px 0 var(--sv4-glass-hi), inset 0 0 0 1px var(--sv4-glass-rim), var(--sv4-shadow);
}
html.sv4-on #agents-v3 .agt-card.working { box-shadow: inset 0 0 0 1.5px var(--sv4-accent), var(--sv4-shadow); }
html.sv4-on #agents-v3 .agt-kpis { background: none; border: 0; box-shadow: none; gap: 16px; overflow: visible; }
html.sv4-on #agents-v3 .agt-kpi { border-radius: 16px; background: var(--sv4-card); box-shadow: inset 0 0 0 1px var(--sv4-glass-rim), var(--sv4-shadow); }
html.sv4-on #agents-v3 .theme { display: none; }