/* v10 SPA shell — Patch 12 PART D Claude Design skin.
   ZERO logic changes — only token replacement + font swap + spacing tightening.
   All old var names retained as aliases pointing to new oklch tokens
   so existing CSS rules and inline styles inherit the new palette automatically.

   Source: _CLAUDE_DESIGN/TOKENS_EXTRACTED.md §1-9 (Авіцен extraction).
*/
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ── Claude Design tokens (oklch warm neutral, hue 70°) ── */
  --bg-0:       oklch(0.16 0.006 70);   /* base */
  --bg-1:       oklch(0.19 0.006 70);   /* card */
  --bg-2:       oklch(0.22 0.007 70);   /* elev */
  --bg-3:       oklch(0.26 0.008 70);   /* hover */
  --line:       oklch(0.30 0.008 70);
  --line-soft:  oklch(0.24 0.007 70);
  --ink-0:      oklch(0.97 0.005 80);   /* primary text */
  --ink-1:      oklch(0.86 0.008 80);   /* secondary */
  --ink-2:      oklch(0.66 0.010 80);   /* tertiary */
  --ink-3:      oklch(0.50 0.010 80);   /* quaternary */
  --ink-4:      oklch(0.38 0.010 80);

  /* Accents — same chroma 0.14, lightness 0.78 */
  --good:       oklch(0.82 0.14 155);   /* mint */
  --good-d:     oklch(0.32 0.06 155);
  --warn:       oklch(0.82 0.14 80);    /* amber */
  --warn-d:     oklch(0.32 0.06 80);
  --bad:        oklch(0.74 0.16 28);    /* coral */
  --bad-d:      oklch(0.30 0.07 28);
  --info:       oklch(0.78 0.12 240);   /* periwinkle */
  --info-d:     oklch(0.30 0.06 240);
  --brand:      oklch(0.78 0.14 200);   /* teal — PRIMARY */
  --brand-d:    oklch(0.30 0.07 200);

  /* ── Legacy aliases — old var names map to new tokens ── */
  --bg:           var(--bg-0);
  --bg-elev:      var(--bg-1);
  --bg-elev-2:    var(--bg-2);
  --border:       var(--line);
  --border-soft:  var(--line-soft);
  --text:         var(--ink-1);
  --text-muted:   var(--ink-2);
  --accent:       var(--brand);
  --accent-2:     var(--info);
  --green:        var(--good);
  --amber:        var(--warn);
  --red:          var(--bad);

  /* ── Patch 13-NIGHT-A G37 — Standard spacing tokens (Йолт locked).
        Use these for ALL block / section / row gaps. NO arbitrary px. ── */
  --space-xs:   4px;  /* tight chip gaps */
  --space-sm:   8px;  /* small gap у row */
  --space-md:  12px;  /* DEFAULT block-to-block gap */
  --space-lg:  16px;  /* section-to-section gap */
  --space-xl:  24px;  /* major section break */
  --space-xxl: 32px;  /* page-level major divider */
}

/* ── Patch 13-NIGHT-A G37 — Default page/section grid spacing.
   Sibling blocks must not overlap; minimum gap = --space-md (12px). ── */
.page-grid > * + *  { margin-top: var(--space-md); }
.section-grid > * + * { margin-top: var(--space-lg); }

/* ── Patch 13-NIGHT-A G_AF — Active filters bar (shared component) ──
   Patch 13-AF-UNIFY — visual style mirrors Overview .filters-row exactly:
   sentence-case label, monospace dashed-border pills, underlined "Reset all". */
.active-filters-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 11px; color: var(--ink-3);
  padding: 6px 0;
}
.active-filters-bar .af-label {
  color: var(--ink-3);
  font-size: 11px;
}
.active-filters-bar .filter-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--bg-2);
  border: 1px dashed var(--line);
  border-radius: 14px;
  padding: 3px 8px 3px 10px;
  color: var(--ink-1);
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  cursor: pointer;
}
.active-filters-bar .filter-chip:hover { border-color: var(--brand); color: var(--brand); }
.active-filters-bar .filter-chip .x { color: var(--ink-3); margin-left: 2px; }
.active-filters-bar .reset-all {
  color: var(--ink-3); font-size: 11px; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.active-filters-bar .reset-all:hover { color: var(--brand); }
.active-filters-bar .filters-empty { color: var(--ink-3); font-style: italic; }
.active-filters-bar[hidden] { display: none; }

/* Patch 13-NIGHT-A Item 9 — CRM popup: emphasize Канал + Менеджер (responsible). */
.crm-modal-grid .crm-modal-emph strong {
  color: var(--accent);
  font-size: 14px;
  font-weight: 700;
}
.crm-modal-grid .crm-modal-emph .crm-lbl { color: var(--ink-1); }

/* Patch 13-NIGHT-A Item 17 — Orders count badge inline з category name (Sales table). */
.tbl-categories .name .cat-orders {
  display: inline-block;
  margin-left: var(--space-sm);
  padding: 1px var(--space-sm);
  background: var(--bg-2);
  border-radius: 10px;
  font-size: 10px;
  color: var(--ink-2);
  vertical-align: middle;
  letter-spacing: .02em;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg-0); color: var(--ink-1);
  font-family: 'Inter Tight', 'Inter', system-ui, -apple-system, Segoe UI, sans-serif;
  font-size: 13px; line-height: 1.45;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
}
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-feature-settings: "tnum", "zero"; }
.num,
.kpi-value,
.cfo-value,
.lc-hero-value,
.mk-hero-value,
.calc-headline-value,
.cpb-hero-value,
.rltv-card-value,
.rcm-card-value,
.hero-amount,
.hero-summary-value,
.leaks-tofu-value,
.leaks-total-value {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-feature-settings: "tnum";
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.app { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.app-main { display: flex; flex-direction: column; min-width: 0; }

#app-status {
  padding: 24px; background: var(--bg-elev); border-bottom: 1px solid var(--border);
  font-size: 13px; color: var(--text-muted);
}
#app-status.error { color: var(--red); border-bottom-color: var(--red); }

/* ---------- Sidebar ---------- */
/* Patch 13-DESIGN-INT.1 — Item 10: independent scroll. Fixed 100vh so sidebar
   stays visible while main content scrolls; nav region scrolls internally. */
.sb-root {
  background: var(--bg-elev); border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  height: 100vh; position: sticky; top: 0;
  overflow-y: auto; overflow-x: hidden;
  font-size: 13px;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.sb-root::-webkit-scrollbar { width: 6px; }
.sb-root::-webkit-scrollbar-track { background: transparent; }
.sb-root::-webkit-scrollbar-thumb {
  background: var(--line); border-radius: 3px;
}
.sb-root::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }
.sb-brand {
  padding: 16px; border-bottom: 1px solid var(--border-soft);
  display: flex; align-items: baseline; gap: 8px;
}
.sb-logo { font-weight: 800; font-size: 18px; }
.sb-version {
  background: var(--accent-2); color: white; font-size: 10px; padding: 2px 6px;
  border-radius: 3px; letter-spacing: .04em;
}
.sb-nav { flex: 1; overflow-y: auto; padding: 8px 4px 16px; }
.sb-group { padding: 6px 8px; }
.sb-group > summary {
  cursor: pointer; padding: 4px 8px; color: var(--text-muted);
  font-size: 11px; letter-spacing: .06em; list-style: none;
  display: flex; align-items: center; gap: 6px; user-select: none;
}
.sb-group > summary::marker { display: none; }
.sb-group-icon { font-size: 13px; }
.sb-group-label { flex: 1; font-weight: 600; text-transform: uppercase; }
.sb-group-count {
  background: var(--bg-elev-2); color: var(--text-muted); font-size: 10px;
  padding: 1px 6px; border-radius: 8px; min-width: 16px; text-align: center;
}
.sb-group ul { list-style: none; padding: 0; margin: 4px 0; }
.sb-item {
  display: flex; align-items: center; padding: 6px 12px; gap: 8px;
  border-radius: 4px; color: var(--text); transition: background 80ms;
}
.sb-item:hover { background: var(--bg-elev-2); text-decoration: none; }
.sb-item.active { background: var(--accent-2); color: white; }
.sb-item.soon { color: var(--text-muted); }
.sb-tag {
  margin-left: auto; font-size: 9px; padding: 1px 5px; border-radius: 3px; letter-spacing: .05em;
}
.sb-tag.live { background: rgba(63,185,80,.15); color: var(--green); }
.sb-tag.soon { background: rgba(124,92,255,.15); color: var(--accent-2); }
.sb-foot { padding: 12px 16px; border-top: 1px solid var(--border-soft); font-size: 11px; }

/* ---------- Topbar ---------- */
/* Patch 13-DESIGN-INT.1 — Item 9: sticky + backdrop-filter blur for frosted feel */
.tb-root {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in oklch, var(--bg-elev) 92%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  padding: 10px 16px;
}
.tb-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tb-row.tb-more-row {
  flex-direction: column; align-items: stretch; gap: 12px;
  padding-top: 12px; margin-top: 8px; border-top: 1px solid var(--border-soft);
}
.tb-cell { display: inline-flex; min-width: 0; }
.tb-cell-grid {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.tb-cascade { display: block; }
.tb-actions { margin-left: auto; display: inline-flex; gap: 6px; align-items: center; }
.tb-more {
  background: var(--bg-elev-2); border: 1px solid var(--border);
  color: var(--text); padding: 5px 10px; border-radius: 4px;
  font-size: 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
}
.tb-more:hover { border-color: var(--accent); }
.tb-active {
  font-size: 10px; padding: 1px 6px; border-radius: 10px;
  background: transparent; color: var(--text-muted); min-width: 16px; text-align: center;
}
.tb-active.on { background: var(--accent-2); color: white; }
.tb-actions button[data-act=reset], .tb-actions button[data-act=share] {
  background: var(--bg-elev-2); border: 1px solid var(--border);
  color: var(--text); padding: 5px 10px; border-radius: 4px; font-size: 12px; cursor: pointer;
}
.tb-actions button:hover { border-color: var(--accent); }

/* ---------- Breadcrumb ---------- */
.bc-root {
  padding: 8px 16px; font-size: 12px; color: var(--text-muted);
  border-bottom: 1px solid var(--border-soft); background: var(--bg);
}
.bc-sep { margin: 0 6px; color: var(--border); }

/* ---------- MultiSelect ---------- */
.ms-root { position: relative; min-width: 180px; }
.ms-toggle {
  width: 100%; display: flex; align-items: center; gap: 6px; padding: 5px 10px;
  background: var(--bg-elev-2); border: 1px solid var(--border); color: var(--text);
  border-radius: 4px; font-size: 12px; cursor: pointer;
}
.ms-toggle:hover { border-color: var(--accent); }
.ms-label { flex: 1; text-align: left; }
.ms-count { font-size: 10px; padding: 1px 6px; border-radius: 10px; background: transparent; color: transparent; }
.ms-count.on { background: var(--accent-2); color: white; }
.ms-caret { color: var(--text-muted); font-size: 10px; }
.ms-panel {
  position: absolute; top: calc(100% + 4px); left: 0; min-width: 240px; max-width: 320px;
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: 6px;
  z-index: 50; padding: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.45);
}
.ms-search {
  width: 100%; padding: 5px 8px; background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 4px; font-size: 12px;
}
.ms-actions { display: flex; gap: 8px; padding: 6px 0; }
.ms-link {
  background: none; border: none; color: var(--accent); font-size: 11px; cursor: pointer; padding: 2px 0;
}
.ms-list {
  max-height: 280px; overflow-y: auto; list-style: none; padding: 0; margin: 0;
}
.ms-list li { padding: 0; }
.ms-list label {
  display: flex; align-items: center; gap: 8px; padding: 4px 8px; cursor: pointer;
  font-size: 12px; border-radius: 3px;
}
.ms-list label:hover { background: var(--bg-elev-2); }
.ms-opt-count { margin-left: auto; color: var(--text-muted); font-size: 10px; }
.ms-empty { padding: 8px; color: var(--text-muted); font-size: 12px; text-align: center; }

/* ---------- DatePicker ---------- */
.dp-root { display: flex; flex-direction: column; gap: 6px; }
.dp-row { display: flex; align-items: center; gap: 6px; }
.dp-label { font-size: 11px; color: var(--text-muted); }
.dp-input {
  background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 4px;
  color: var(--text); padding: 4px 8px; font-size: 12px; min-width: 130px;
}
.dp-presets { display: inline-flex; gap: 4px; margin-left: 4px; }
.dp-presets button {
  background: transparent; border: 1px solid var(--border); color: var(--text);
  padding: 3px 8px; border-radius: 3px; font-size: 11px; cursor: pointer;
}
.dp-presets button:hover { border-color: var(--accent); }
.dp-modes { gap: 2px; padding-top: 2px; }
.dp-mode {
  background: var(--bg-elev-2); border: 1px solid var(--border); color: var(--text);
  padding: 3px 10px; border-radius: 3px; font-size: 11px; cursor: pointer;
}
.dp-mode.on { border-color: var(--accent); color: var(--accent); background: rgba(88,166,255,.08); }
/* Patch 01 — semantic colour per mode value so user sees what's active. */
.dp-mode[data-period-mode="real"].on     { border-color: var(--green); color: var(--green); background: rgba(63,185,80,.10); }
.dp-mode[data-period-mode="expected"].on { border-color: var(--amber); color: var(--amber); background: rgba(210,153,34,.10); }
.dp-mode[data-period-mode="total"].on    { border-color: var(--accent); color: var(--accent); background: rgba(88,166,255,.10); }
.dp-mode[data-metric-mode="revenue"].on  { border-color: var(--accent); color: var(--accent); background: rgba(88,166,255,.10); }
.dp-mode[data-metric-mode="profit"].on   { border-color: var(--accent-2); color: var(--accent-2); background: rgba(124,92,255,.10); }
.dp-default { color: var(--text-muted); font-weight: 400; font-size: 9px; }

/* ---------- Cascade Filter ---------- */
.cf-root .cf-row { display: flex; gap: 8px; flex-wrap: wrap; }
.cf-cell { flex: 1; min-width: 200px; }

/* ---------- KPI Card ---------- */
.kpi-card {
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: 8px;
  padding: 16px; min-width: 220px;
}
.kpi-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.kpi-title { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.kpi-mode {
  font-size: 10px; color: var(--accent); padding: 1px 6px;
  border: 1px solid rgba(88,166,255,.4); border-radius: 3px;
}
.kpi-badge { margin-left: auto; }
.kpi-value { font-size: 26px; font-weight: 700; color: var(--text); margin: 4px 0 8px; }
.kpi-projections { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 8px 0 0; padding: 8px; background: var(--bg); border-radius: 4px; }
.kpi-projections div { display: flex; flex-direction: column; gap: 2px; }
.kpi-projections dt { font-size: 10px; color: var(--text-muted); margin: 0; }
.kpi-projections dd { font-size: 13px; font-weight: 600; margin: 0; }
.kpi-desc { color: var(--text-muted); font-size: 11px; margin: 4px 0 0; }

/* ---------- Transparency Panel ---------- */
.tp-root {
  background: var(--bg-elev); border: 1px solid var(--border-soft); border-radius: 6px;
  padding: 0; margin: 0;
}
.tp-toggle {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: transparent; border: none; padding: 10px 14px; color: var(--text);
  cursor: pointer; font-size: 12px;
}
.tp-icon { color: var(--accent-2); font-size: 14px; }
.tp-toggle-label { font-weight: 600; }
.tp-chev { margin-left: auto; color: var(--text-muted); }
.tp-body { padding: 0 14px 12px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tp-block h4 { margin: 0 0 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.tp-block ul { padding-left: 18px; margin: 0; font-size: 12px; color: var(--text); }
.tp-block li { margin-bottom: 3px; }
.tp-empty { color: var(--text-muted); font-size: 12px; }

/* ---------- Coverage Badge ---------- */
.cb-root {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px; border-radius: 3px; font-size: 11px;
  background: var(--bg-elev-2); border: 1px solid var(--border);
}
.cb-root[data-tier=green] { border-color: var(--green); color: var(--green); }
.cb-root[data-tier=amber] { border-color: var(--amber); color: var(--amber); }
.cb-root[data-tier=red]   { border-color: var(--red); color: var(--red); }
.cb-pct { font-weight: 600; }
.cb-label { color: var(--text-muted); }

/* ---------- Outlet & pages ---------- */
#app-outlet { padding: 16px; flex: 1; min-width: 0; }

/* Demo page */
.pg-demo { display: flex; flex-direction: column; gap: 16px; }
.pg-demo-head h1 { margin: 0; font-size: 22px; }
.pg-demo-sub { color: var(--text-muted); font-size: 13px; margin: 4px 0 8px; }
.pg-demo-extra-filters { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.pg-demo-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px;
}
.pg-demo-charts {
  display: grid; grid-template-columns: 2fr 1fr; gap: 12px;
}
.pg-demo-info { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* DailyChart + ChannelDonut shared shell */
.dc-root, .cd-root {
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: 8px;
  padding: 16px; min-width: 0;
}
.dc-head, .cd-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.dc-head h3, .cd-head h3 { margin: 0; font-size: 14px; }
.dc-mode {
  font-size: 10px; color: var(--accent); padding: 1px 6px;
  border: 1px solid rgba(88,166,255,.4); border-radius: 3px;
}
.cd-hint { font-size: 11px; color: var(--text-muted); }
.dc-foot, .cd-foot { color: var(--text-muted); font-size: 11px; margin: 6px 0 0; font-family: 'JetBrains Mono', monospace; }
.dc-canvas-wrap, .cd-canvas-wrap { position: relative; }
.pg-demo-rules {
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: 8px; padding: 16px;
}
.pg-demo-rules h3 { margin: 0 0 6px; font-size: 14px; }
.pg-demo-rules p { margin: 4px 0; font-size: 12px; color: var(--text-muted); }
.pg-demo-rules-list { display: flex; gap: 4px; flex-wrap: wrap; }
.pg-rule-chip {
  background: rgba(124,92,255,.15); color: var(--accent-2); padding: 2px 8px;
  border-radius: 3px; font-size: 11px; font-family: 'JetBrains Mono', monospace;
}
.pg-demo-meta {
  display: flex; gap: 16px; padding: 8px 12px; background: var(--bg-elev-2);
  border: 1px solid var(--border-soft); border-radius: 4px; font-size: 11px;
  color: var(--text-muted); font-family: 'JetBrains Mono', monospace;
}

/* ---------- Section pages (Sales / Plan vs Fact / etc) ---------- */
.pg-head h1 { margin: 0; font-size: 22px; }
.pg-sub { color: var(--text-muted); font-size: 13px; margin: 4px 0 12px; }

.pg-grid { display: grid; gap: 12px; }
/* Patch 13-NIGHT-B Item 32 — products toplists side-by-side. */
.pg-grid-2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) { .pg-grid-2 { grid-template-columns: 1fr; } }

/* Patch 13-NIGHT-B-PhaseA2 Item 36 — 3-column grid (Geo top blocks, future per-page tops). */
.pg-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-md, 12px); }
@media (max-width: 1100px) { .pg-grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px)  { .pg-grid-3 { grid-template-columns: 1fr; } }
/* Patch 13-MAIN — Main page cross-card row + deferred-block dim styling. */
.pg-main-cross-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); }
@media (max-width: 1100px) { .pg-main-cross-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px)  { .pg-main-cross-row { grid-template-columns: 1fr; } }
.pg-main-defer { opacity: 0.78; }
.pg-main-defer .uk-note { font-size: 12.5px; line-height: 1.45; }
.geo-top-blocks .geo-top-card {
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: var(--space-md, 12px);
}
.geo-top-blocks .geo-top-card h4 {
  margin: 0 0 var(--space-sm, 8px);
  font-size: 12.5px;
  color: var(--ink-1);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.pg-grid-6 { grid-template-columns: repeat(6, minmax(140px, 1fr)); }
.pg-cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pg-cols-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }

.pg-table-wrap {
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: 8px;
  padding: 14px; overflow-x: auto;
}
.pg-table-wrap h3 { margin: 0 0 8px; font-size: 14px; }
.pg-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.pg-table th, .pg-table td {
  text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--border-soft);
}
.pg-table th { color: var(--text-muted); font-weight: 600; text-transform: uppercase; font-size: 10px; letter-spacing: .04em; }
.pg-table td { color: var(--text); }
.pg-table tr:hover td { background: var(--bg-elev-2); }
.pg-empty { color: var(--text-muted); padding: 12px !important; text-align: center; font-style: italic; }

/* StatusBarChart shell */
.sb-chart-root {
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: 8px;
  padding: 16px;
}
.sb-chart-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.sb-chart-head h3 { margin: 0; font-size: 14px; }
.sb-chart-hint { font-size: 11px; color: var(--text-muted); }
.sb-chart-canvas-wrap { position: relative; }
.sb-chart-foot { color: var(--text-muted); font-size: 11px; margin: 6px 0 0; font-family: 'JetBrains Mono', monospace; }

/* Managers (Section 4) */
.mgr-info { display: flex; gap: 8px; align-items: center; color: var(--text-muted); font-size: 12px; margin: 0 0 8px; }
.mgr-info strong { color: var(--text); font-size: 13px; }
.mgr-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin: 0 2px; }
.mgr-dot-top { background: rgba(63,185,80,.6); }
.mgr-dot-bottom { background: rgba(248,81,73,.45); }
.mgr-table th { cursor: pointer; user-select: none; white-space: nowrap; }
.mgr-table th:hover { color: var(--accent); }
.mgr-sort-ind { color: var(--accent); font-size: 9px; margin-left: 4px; }
.mgr-table td { white-space: nowrap; }
.mgr-table tr.mgr-row-top td { background: rgba(63,185,80,.08); }
.mgr-table tr.mgr-row-bottom td { background: rgba(248,81,73,.06); }
.mgr-tag { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 10px; letter-spacing: .03em; }
.mgr-tag-rk { background: rgba(124,92,255,.18); color: var(--accent-2); }
.mgr-tag-vp { background: rgba(63,185,80,.15); color: var(--green); }
.mgr-na    { color: var(--text-muted); }

/* Funnel (Section 9) */
.funnel-bars { display: flex; flex-direction: column; gap: 6px; padding: 14px;
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: 8px; margin: 0 0 12px; }
.funnel-bar-row { display: grid; grid-template-columns: 100px 1fr 60px; align-items: center; gap: 8px; }
.funnel-step-label { color: var(--text-muted); font-size: 12px; font-weight: 600; }
.funnel-step-pct { color: var(--text-muted); font-size: 11px; text-align: right; }
.funnel-bar-track { background: var(--bg-elev-2); border-radius: 4px; height: 24px; overflow: hidden; border: 1px solid var(--border-soft); }
.funnel-bar { height: 100%; display: flex; align-items: center; justify-content: flex-end; padding: 0 8px;
  transition: width 200ms; min-width: 60px; }
.funnel-bar-leads     { background: linear-gradient(90deg, rgba(124,92,255,.28), rgba(124,92,255,.55)); }
.funnel-bar-confirmed { background: linear-gradient(90deg, rgba(88,166,255,.30), rgba(88,166,255,.60)); }
.funnel-bar-closed    { background: linear-gradient(90deg, rgba(63,185,80,.30),  rgba(63,185,80,.65)); }
.funnel-bar-delivered { background: linear-gradient(90deg, rgba(63,185,80,.45),  rgba(63,185,80,.85)); }
.funnel-bar-count { color: white; font-size: 11px; font-weight: 600; font-family: 'JetBrains Mono', monospace; }
.pg-table .num   { text-align: right; font-variant-numeric: tabular-nums; }
.pg-table .muted { color: var(--text-muted); }

/* Plan vs Fact specifics */
.pvf-month-row { display: flex; align-items: center; gap: 12px; margin: 8px 0 12px; }
.pvf-month-row label { color: var(--text-muted); font-size: 12px; }
.pvf-month-row select {
  background: var(--bg-elev-2); color: var(--text); border: 1px solid var(--border);
  padding: 5px 10px; border-radius: 4px; font-size: 13px;
}
.pvf-elapsed { color: var(--text-muted); font-size: 12px; }
.pvf-table { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 8px; padding: 8px; }
.pvf-bar-col { width: 200px; }
.pvf-bar-track {
  position: relative; height: 12px; background: var(--bg-elev-2);
  border-radius: 6px; overflow: hidden; border: 1px solid var(--border-soft);
}
.pvf-bar { position: absolute; left: 0; top: 0; bottom: 0; transition: width 200ms; }
/* Patch 12 B.5 — Gradient progress bars + glow on overshoot */
.pvf-bar-green { background: linear-gradient(90deg, rgba(63,185,80,.4) 0%, var(--green) 100%); }
.pvf-bar-amber { background: linear-gradient(90deg, rgba(210,153,34,.4) 0%, var(--amber) 100%); }
.pvf-bar-red   { background: linear-gradient(90deg, rgba(248,81,73,.4) 0%, var(--red) 100%); }
.pvf-bar-glow  {
  background: linear-gradient(90deg, var(--green) 0%, #4dffff 100%);
  box-shadow: 0 0 12px rgba(0, 217, 255, 0.5);
  animation: pvf-glow-pulse 2.4s ease-in-out infinite;
}
@keyframes pvf-glow-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(0, 217, 255, 0.4); }
  50%      { box-shadow: 0 0 16px rgba(0, 217, 255, 0.7); }
}
.pvf-bar-na    { background: var(--border); }
.pvf-bar-mark { position: absolute; left: 100%; top: 0; bottom: 0; width: 2px; background: var(--text-muted); transform: translateX(-1px); }
.pvf-no-plan { color: var(--text-muted); font-size: 11px; font-style: italic; }

/* Placeholder */
.pg-placeholder { display: flex; align-items: center; justify-content: center; min-height: 60vh; }
.pg-placeholder-card {
  background: var(--bg-elev); border: 1px dashed var(--border); border-radius: 8px;
  padding: 32px; max-width: 540px; text-align: center;
}
.pg-placeholder-tag {
  background: rgba(124,92,255,.15); color: var(--accent-2);
  padding: 2px 10px; border-radius: 3px; font-size: 10px; letter-spacing: .08em;
}
.pg-placeholder-card h2 { margin: 12px 0 4px; }
.pg-placeholder-group { color: var(--text-muted); font-size: 12px; }
.pg-placeholder-foot { color: var(--text-muted); font-size: 12px; margin-top: 16px; }
.pg-error { padding: 24px; color: var(--red); }
.pg-error pre { background: var(--bg); padding: 12px; border-radius: 4px; font-size: 12px; overflow: auto; }

/* Responsive: drawer at narrow widths */
@media (max-width: 1100px) {
  .pg-grid-6 { grid-template-columns: repeat(3, 1fr); }
  .pg-cols-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .sb-root { position: static; min-height: auto; border-right: none; border-bottom: 1px solid var(--border); }
  .pg-demo-info { grid-template-columns: 1fr; }
  .pg-demo-charts { grid-template-columns: 1fr; }
  .pg-cols-2, .pg-cols-3 { grid-template-columns: 1fr; }
  .pg-grid-6 { grid-template-columns: repeat(2, 1fr); }
}

/* ─── Day 6.5-revert baseline (v9 GitHub-Dark palette only) ─────────────
   tokens.css and the polish overlay are gone. These rules keep the
   structural markup shipped Day 4–8 coherent under the original
   --bg / --accent / --green / --amber / --red palette.
   ─────────────────────────────────────────────────────────────────── */

/* Overview section header — uses .pg-head / .pg-sub already defined above */
.pg-overview-head { display: flex; flex-direction: column; gap: 6px; }
.pg-overview-head .pg-sub strong { color: var(--text); }
.pg-overview-coverage { margin-top: 4px; }

/* KPI tier accents (color-coded top border, v9 palette only) */
.kpi-card { border-top: 2px solid var(--accent-2); }
.kpi-card.kpi-card--orders   { border-top-color: var(--accent); }
.kpi-card.kpi-card--revenue  { border-top-color: var(--green); }
.kpi-card.kpi-card--profit   { border-top-color: var(--green); }
.kpi-card.kpi-card--aov      { border-top-color: var(--amber); }
.kpi-card.kpi-card--neutral  { border-top-color: var(--border); }
.kpi-value, .kpi-projections dd { font-feature-settings: 'tnum' 1, 'lnum' 1; }

/* "More filters · N" badge + accordion (Day 6 markup, baseline styling) */
.tb-active.tb-active-secondary {
  font-size: 10px; padding: 1px 6px; border-radius: 10px;
  background: transparent; color: transparent; min-width: 16px; text-align: center;
}
.tb-active.tb-active-secondary.on { background: var(--accent-2); color: white; }
.tb-more-icon, .tb-more-chev { color: var(--text-muted); font-size: 10px; }
.tb-more-row {
  display: grid; grid-template-columns: 1fr; gap: 12px;
  margin-top: 10px; padding: 12px; border-radius: 6px;
  background: var(--bg); border: 1px solid var(--border-soft);
}
.tb-more-row[hidden] { display: none; }
.tb-cascade-block { padding: 8px; background: rgba(0,0,0,.15); border-radius: 4px; }
.tb-block-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-muted); margin: 0 0 6px;
}

/* ─── Day 6.7 metric-mode tabs (DatePicker) + profit-mode tag ─── */
.dp-mode-groups { gap: 16px; flex-wrap: wrap; padding-top: 4px; }
.dp-mode-group { display: inline-flex; align-items: center; gap: 4px; }
.dp-mode-group-label {
  font-size: 9px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-muted); margin-right: 4px;
}
.pg-mode-tag {
  display: inline-block;
  background: rgba(63,185,80,.15); color: var(--green);
  font-size: 11px; padding: 1px 8px; border-radius: 3px;
  letter-spacing: .04em; font-weight: 500;
}

/* ─── Day 6.8 PATCH #2: scrollable table frame + sticky sum row ─── */
.table-frame {
  max-height: 600px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 4px;
  position: relative;
  background: var(--bg-elev);
}
.table-frame > table { width: 100%; border-collapse: collapse; margin: 0; }
.table-frame thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--bg-elev);
  box-shadow: 0 1px 0 var(--border);
}
.table-frame tfoot td {
  position: sticky; bottom: 0; z-index: 2;
  background: var(--bg-elev-2);
  border-top: 2px solid var(--border);
  box-shadow: 0 -1px 0 var(--border);
  font-weight: 600;
}
.sum-row td.label { color: var(--text-muted); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; font-size: 10px; }
.sum-row td.num   { color: var(--text); font-variant-numeric: tabular-nums; text-align: right; }
/* Day 25 — apply Day 6.8 sum-row pattern to ANY legacy tfoot regardless of
   whether it uses .pg-table / .num conventions. Keeps numbers right-aligned
   with body cells (Sales / Менеджери / Воронка / Plan vs Fact + future tables). */
tfoot tr.sum-row > td,
tfoot tr.sum-row > th       { padding: 6px 10px; font-variant-numeric: tabular-nums; }
tfoot tr.sum-row > td.num,
tfoot tr.sum-row > th.num   { text-align: right; }
tfoot tr.sum-row > td.label,
tfoot tr.sum-row > th.label { text-align: left; }

/* ─── Day 6.8 PATCH #3: semantic accent for KPI status cards ─── */
.kpi-card.kpi-card--success { border-top-color: var(--green); }
.kpi-card.kpi-card--info    { border-top-color: var(--accent); }
.kpi-card.kpi-card--warn    { border-top-color: var(--amber); }
.kpi-card.kpi-card--danger  { border-top-color: var(--red); }
.kpi-card.kpi-card--muted   { border-top-color: var(--border); }

/* ─── Day 9: RFM heatmap + segment cards (Section 15) ─── */
.pg-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(180px, 1fr)); gap: 12px; }

.rfm-heatmap-wrap { padding-bottom: 18px; }
.rfm-heat {
  display: grid;
  grid-template-columns: 60px repeat(5, 1fr);
  gap: 4px;
  margin-top: 8px;
}
.rfm-heat-rowlabel, .rfm-heat-collabel {
  font-size: 10px; color: var(--text-muted); text-align: center;
  display: flex; align-items: center; justify-content: center;
  text-transform: uppercase; letter-spacing: .06em;
}
.rfm-heat-rowlabel { justify-content: flex-end; padding-right: 6px; }
.rfm-heat-cell {
  border: 1px solid var(--border-soft);
  background: rgba(63,185,80,.05);
  border-radius: 4px;
  padding: 14px 4px;
  cursor: pointer;
  transition: border-color 120ms;
  font-family: 'JetBrains Mono', monospace;
}
.rfm-heat-cell:hover { border-color: var(--green); }
.rfm-heat-cell.is-active {
  border-color: var(--green);
  box-shadow: 0 0 0 1px var(--green) inset;
}
.rfm-heat-count { color: var(--text); font-size: 13px; font-weight: 600; }
.rfm-heat-legend { color: var(--text-muted); font-size: 11px; margin: 8px 0 0; font-style: italic; }

.rfm-seg-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
}
.rfm-seg-card {
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-top: 3px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
  text-align: left;
  cursor: pointer;
  transition: border-color 120ms, background 120ms;
  font-family: inherit;
  color: var(--text);
}
.rfm-seg-card:hover { background: var(--bg-elev); }
.rfm-seg-card.is-active { box-shadow: 0 0 0 1px var(--accent) inset; }
.rfm-seg-name    { font-size: 12px; font-weight: 600; }
.rfm-seg-count   { font-size: 22px; font-weight: 700; margin: 4px 0; font-variant-numeric: tabular-nums; }
.rfm-seg-revenue { font-size: 11px; color: var(--text-muted); }
.rfm-seg-detail  { font-size: 10px; color: var(--text-muted); margin-top: 4px; font-family: 'JetBrains Mono', monospace; }

.rfm-seg-tag {
  display: inline-block; font-size: 10px; padding: 1px 6px;
  border: 1px solid; border-radius: 3px; letter-spacing: .04em;
}
.rfm-customer-table td:first-child { font-family: 'JetBrains Mono', monospace; }

/* ─── Day 9: Cohort matrix tabs + heatmap cells ─── */
.cohort-tabs { display: inline-flex; gap: 4px; margin-top: 8px; }
.cohort-tab {
  background: var(--bg-elev-2); border: 1px solid var(--border);
  color: var(--text-muted); padding: 5px 14px; border-radius: 4px;
  font-size: 12px; cursor: pointer;
  transition: border-color 120ms, color 120ms;
}
.cohort-tab:hover { border-color: var(--accent); }
.cohort-tab.on {
  background: var(--accent);
  color: white; border-color: var(--accent);
}
.cohort-cell { font-variant-numeric: tabular-nums; transition: background 120ms; }
.cohort-table th { font-family: 'JetBrains Mono', monospace; font-size: 10px; }
.cohort-foot { font-size: 11px; color: var(--text-muted); margin: 8px 0 0; font-style: italic; }
.cohort-frame { max-height: 480px; }

/* ─── Day 10: Loyalty (Section 19) buckets ─── */
.loyalty-buckets {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
}
.loyalty-bucket {
  background: var(--bg-elev-2); border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: 4px; padding: 10px 12px;
}
.loyalty-bucket-name   { font-size: 12px; color: var(--text); font-weight: 600; }
.loyalty-bucket-count  { font-size: 22px; font-weight: 700; margin: 4px 0;
                         font-variant-numeric: tabular-nums; }
.loyalty-bucket-detail { font-size: 11px; color: var(--text-muted); }

/* ─── Day 10: Organizations / ФОП (Section 20) ─── */
.orgs-table-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.orgs-table-head h3 { margin: 0; font-size: 14px; }
.btn-ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 4px 12px; border-radius: 4px;
  font-size: 11px; cursor: pointer;
  transition: border-color 120ms, color 120ms;
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

.orgs-pivot td:first-child, .orgs-pivot th:first-child {
  position: sticky; left: 0; z-index: 1;
  background: var(--bg-elev);
  min-width: 280px; max-width: 320px;
  white-space: normal;
}
.orgs-pivot tfoot td:first-child { background: var(--bg-elev-2); z-index: 3; }
.orgs-null-row td { background: rgba(248,81,73,.06); }
.orgs-null-row td:first-child { color: var(--red); }

.orgs-escalate {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px; border-radius: 3px;
  background: rgba(248,81,73,.15); color: var(--red);
  font-size: 11px; font-weight: 500;
}

/* ─── Day 11: Products (Section 10) ─── */
.pg-grid-5 { display: grid; grid-template-columns: repeat(5, minmax(150px, 1fr)); gap: 12px; }
.products-controls {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  padding: 8px 0;
}
.products-search {
  flex: 1; min-width: 220px; max-width: 320px;
  background: var(--bg-elev-2); border: 1px solid var(--border);
  color: var(--text); padding: 5px 10px; border-radius: 4px; font-size: 12px;
}
.products-abc { display: inline-flex; gap: 2px; align-items: center; }
.products-abc .dp-label { margin-right: 4px; }
.abc-btn {
  background: var(--bg-elev-2); border: 1px solid var(--border);
  color: var(--text-muted); padding: 4px 10px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  cursor: pointer; border-radius: 3px;
  transition: border-color 120ms, color 120ms;
}
.abc-btn:hover { border-color: var(--accent); color: var(--text); }
.abc-btn.on    { background: var(--accent); color: white; border-color: var(--accent); }
.abc-clear { letter-spacing: .04em; text-transform: uppercase; font-size: 10px; }

.products-info { color: var(--text-muted); font-size: 11px; margin-left: auto; font-family: 'JetBrains Mono', monospace; }

.abc-tag {
  display: inline-block; font-family: 'JetBrains Mono', monospace; font-weight: 700;
  font-size: 11px; padding: 1px 7px; border-radius: 3px;
}
.abc-tag-A { background: rgba(63,185,80,.18); color: var(--green); }
.abc-tag-B { background: rgba(88,166,255,.18); color: var(--accent); }
.abc-tag-C { background: rgba(210,153,34,.18); color: var(--amber); }
.abc-tag-X { background: rgba(139,148,158,.15); color: var(--text-muted); }

.orphan-row td { background: rgba(248,81,73,.04); }
.orphan-tag {
  display: inline-block; font-size: 10px; padding: 1px 6px; border-radius: 3px;
  background: rgba(248,81,73,.15); color: var(--red); letter-spacing: .04em;
}

.products-table td:nth-child(2) { max-width: 320px; white-space: normal; }
.products-charts { margin-bottom: 12px; }

/* ─── Day 11: Categories drill (Section 11A) ─── */
.cat-breadcrumb { font-size: 12px; color: var(--text-muted); margin-top: 6px; }
.cat-bc-item { color: var(--text-muted); }
.cat-bc-item.active { color: var(--text); font-weight: 600; }
.cat-bc-item:hover { color: var(--accent); text-decoration: none; }
.cat-drill-row { cursor: pointer; transition: background 120ms; }
.cat-drill-row:hover td { background: var(--bg-elev-2); }
.cat-top-skus { display: flex; gap: 4px; flex-wrap: wrap; }
.cat-top-pill {
  display: inline-block; font-size: 10px; padding: 1px 6px; border-radius: 3px;
  background: var(--bg-elev-2); color: var(--text-muted); border: 1px solid var(--border-soft);
}

/* ─── Day 12: Site bucket tags (Section 11B) ─── */
.bucket-tag {
  display: inline-block; font-size: 10px; padding: 1px 7px; border-radius: 3px;
  letter-spacing: .04em; font-weight: 500;
}
.bucket-tag-own         { background: rgba(63,185,80,.15); color: var(--green); }
.bucket-tag-marketplace { background: rgba(124,92,255,.18); color: var(--accent-2); }
.bucket-tag-other       { background: rgba(139,148,158,.15); color: var(--text-muted); }

/* ─── Day 13: Promo controls ─── */
.promo-controls { margin-top: 8px; display: flex; gap: 14px; align-items: center; }
.promo-toggle { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 12px; color: var(--text-muted); }
.promo-toggle input { accent-color: var(--accent-2); }
.promo-toggle:hover { color: var(--text); }
.promo-charts { margin-bottom: 12px; }

/* ─── Day 16: Channels + Google health badges ─── */
.ch-badge {
  display: inline-block; font-size: 10px; padding: 1px 6px; border-radius: 3px;
  letter-spacing: .04em; font-weight: 600;
}
.ch-badge.success { background: rgba(63,185,80,.15);   color: var(--green);  }
.ch-badge.info    { background: rgba(56,139,253,.18);  color: var(--accent); }
.ch-badge.warn    { background: rgba(217,165,32,.15);  color: var(--amber);  }
.ch-badge.danger  { background: rgba(248,81,73,.18);   color: var(--red);    }
.ch-badge.muted   { background: rgba(139,148,158,.15); color: var(--text-muted); }

/* ─── Day 17: Money Leaks page ─── */
.leaks-headline {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--bg-elev); border: 1px solid var(--border-soft);
  border-radius: 8px; padding: 14px 18px; margin-bottom: 14px;
}
.leaks-total-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.leaks-total-value { font-size: 28px; font-weight: 700; color: var(--green); margin-top: 2px; }
.leaks-total-sub   { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.leaks-controls    { display: flex; gap: 14px; align-items: center; }
.leaks-controls .ch-toggle { display: inline-flex; gap: 6px; font-size: 12px; color: var(--text-muted); cursor: pointer; }
.leaks-restore     { font-size: 11px; padding: 4px 10px; background: var(--bg-elev-2); color: var(--text); border: 1px solid var(--border-soft); border-radius: 4px; cursor: pointer; }
.leaks-restore:hover { background: var(--bg-elev); }
.leaks-grid        { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.leaks-empty       { grid-column: 1/-1; text-align: center; color: var(--text-muted); padding: 32px; }

/* Anomalies feed — 2-column checkerboard з відступами */
.anom-feed {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg);
  margin-top: var(--space-lg);
  margin-bottom: var(--space-lg);
}
.anom-feed > .leaks-empty { grid-column: 1 / -1; }
.pg-anomalies > [data-slot="transparency"] { margin-top: var(--space-lg); }
@media (max-width: 900px) {
  .anom-feed { grid-template-columns: 1fr; gap: var(--space-md); }
}

.leak-card {
  background: var(--bg-elev); border: 1px solid var(--border-soft);
  border-left: 3px solid var(--border); border-radius: 6px;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 8px;
}
.leak-card.leak-warn    { border-left-color: var(--amber); }
.leak-card.leak-danger  { border-left-color: var(--red); }
.leak-card.leak-info    { border-left-color: var(--accent); }
.leak-card.leak-success { border-left-color: var(--green); }
.leak-card.leak-muted   { border-left-color: var(--border); opacity: 0.65; }

.leak-head { display: flex; align-items: center; gap: 8px; }
.leak-head h3 { margin: 0; font-size: 13px; flex: 1; }
.leak-dismiss {
  background: transparent; border: 0; color: var(--text-muted); cursor: pointer;
  font-size: 14px; padding: 0 4px; line-height: 1;
}
.leak-dismiss:hover { color: var(--red); }

.leak-impact { display: flex; align-items: baseline; gap: 8px; }
.leak-impact-label { font-size: 10px; text-transform: uppercase; color: var(--text-muted); letter-spacing: 0.05em; }
.leak-impact-value { font-size: 18px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }

.leak-mech   { font-size: 12px; color: var(--text); line-height: 1.4; }
.leak-action { font-size: 11px; color: var(--text-muted); line-height: 1.4; }
.leak-drill  {
  align-self: flex-start; font-size: 11px; padding: 3px 9px;
  background: var(--bg-elev-2); color: var(--accent); border: 1px solid var(--border-soft);
  border-radius: 3px; cursor: pointer;
}
.leak-drill:hover { background: var(--bg-elev); border-color: var(--accent); }

/* ─── Day 17: CEO Cockpit ─── */
.ceo-perf { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0; }
.ceo-perf-block {
  background: var(--bg-elev); border: 1px solid var(--border-soft);
  border-radius: 8px; padding: 14px;
}
.ceo-perf-block h3 { margin: 0 0 10px; font-size: 13px; }
.ceo-perf-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ceo-perf-list h4 { margin: 0 0 6px; font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 500; }
.ceo-perf-list ul { list-style: none; padding: 0; margin: 0; }
.ceo-perf-list li {
  background: var(--bg-elev-2); border: 1px solid var(--border-soft);
  border-radius: 4px; padding: 6px 9px; margin-bottom: 4px; font-size: 12px;
}
.ceo-perf-list li.muted { color: var(--text-muted); text-align: center; }
.ceo-li-primary  { color: var(--text); font-weight: 500; }
.ceo-li-secondary { color: var(--accent); font-variant-numeric: tabular-nums; font-size: 11px; }
.ceo-li-tertiary  { color: var(--text-muted); font-size: 10px; }

.ceo-health {
  background: var(--bg-elev); border: 1px solid var(--border-soft);
  border-radius: 8px; padding: 14px; margin-bottom: 12px;
}
.ceo-health h3 { margin: 0 0 10px; font-size: 13px; }
.ceo-health-empty { color: var(--green); font-size: 12px; padding: 8px; }
.ceo-health-summary { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.ceo-health-total { font-size: 24px; font-weight: 700; color: var(--amber); }
.ceo-health-sub   { font-size: 11px; color: var(--text-muted); }
.ceo-health-grid  { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 8px; margin-bottom: 12px; }
.ceo-health-card {
  background: var(--bg-elev-2); border: 1px solid var(--border-soft);
  border-left: 3px solid var(--border); border-radius: 4px; padding: 10px 12px;
}
.ceo-health-card.ceo-health-warn   { border-left-color: var(--amber); }
.ceo-health-card.ceo-health-danger { border-left-color: var(--red); }
.ceo-health-card.ceo-health-info   { border-left-color: var(--accent); }
.ceo-health-line1 { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font-size: 12px; }
.ceo-health-impact { margin-left: auto; color: var(--amber); font-variant-numeric: tabular-nums; font-weight: 600; }
.ceo-health-mech   { font-size: 11px; color: var(--text-muted); line-height: 1.4; }

@media (max-width: 960px) {
  .ceo-perf      { grid-template-columns: 1fr; }
  .ceo-perf-cols { grid-template-columns: 1fr; }
}

/* ─── Day 18: P&L page ─── */
.pnl-block { background: var(--bg-elev); border: 1px solid var(--border-soft); border-radius: 8px; padding: 14px; margin-bottom: 14px; }
.pnl-block-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; gap: 10px; }
.pnl-block-head h3 { margin: 0; font-size: 13px; }
.pnl-block-head select { background: var(--bg-elev-2); color: var(--text); border: 1px solid var(--border-soft); border-radius: 3px; padding: 2px 6px; font-size: 12px; }
.pnl-actions { display: flex; gap: 6px; align-items: center; }
.pnl-actions button, .pnl-cta { background: var(--bg-elev-2); color: var(--text); border: 1px solid var(--border-soft); border-radius: 4px; padding: 4px 10px; font-size: 11px; cursor: pointer; }
.pnl-actions button:hover, .pnl-cta:hover { background: var(--bg-elev); border-color: var(--accent); }
.pnl-import { font-size: 11px; color: var(--text-muted); cursor: pointer; }
.pnl-import input[type=file] { display: none; }
.pnl-hint { font-size: 11px; color: var(--text-muted); margin: 6px 0 0; }
.pnl-cell { background: var(--bg-elev-2); color: var(--text); border: 1px solid var(--border-soft); border-radius: 3px; padding: 3px 6px; font-size: 12px; width: 100%; min-width: 80px; text-align: right; font-variant-numeric: tabular-nums; }
.pnl-cell:focus { outline: 1px solid var(--accent); border-color: var(--accent); }
.pnl-cat { font-weight: 500; }
.pnl-row-action { width: 28px; text-align: center; }
.pnl-row-del { background: transparent; border: 0; color: var(--text-muted); cursor: pointer; padding: 0 4px; }
.pnl-row-del:hover { color: var(--red); }
.pnl-divider td { border-top: 1px solid var(--border); font-weight: 600; }
.pnl-net-row td { background: rgba(56,139,253,0.06); }
.pnl-pos { color: var(--green); }
/* Day 26a — semantic row colour coding for new P&L formula */
body.mode-normis .pnl-row-income td:first-child  { color: var(--green); }
body.mode-normis .pnl-row-cost   td:first-child  { color: var(--red); }
body.mode-normis .pnl-row-profit td:first-child  { color: var(--text); font-weight: 700; }
body.mode-plusultra .pnl-row-income td:first-child  { color: var(--green); }
body.mode-plusultra .pnl-row-cost   td:first-child  { color: var(--red); }
body.mode-plusultra .pnl-row-profit td:first-child  { color: var(--accent); font-weight: 700; }
.pnl-block-collapsible {
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: 8px;
  padding: 12px 16px;
}
.pnl-block-collapsible[open] { padding-bottom: 16px; }
/* Patch 01 — P&L period-mode indicator */
.pnl-mode-tag {
  display: inline-block; padding: 2px 8px; border-radius: 10px;
  font-size: 10px; letter-spacing: .05em; vertical-align: middle;
  margin-left: 8px; font-weight: 600;
  background: var(--bg-elev-2); color: var(--text-muted);
}
.pnl-mode-tag[data-mode="real"]     { background: rgba(63,185,80,.15);  color: var(--green); }
.pnl-mode-tag[data-mode="expected"] { background: rgba(210,153,34,.15); color: var(--amber); }
.pnl-mode-tag[data-mode="total"]    { background: rgba(88,166,255,.15); color: var(--accent); }

/* ──────────────────────────────────────────────────────────
   Patch 11 — Sales hourly × DOW heatmap
   ────────────────────────────────────────────────────────── */
.sales-heatmap-wrap { display: flex; flex-direction: column; gap: 8px; }
.sales-heatmap { display: flex; flex-direction: column; gap: 1px; }
.hm-row { display: grid; grid-template-columns: 56px repeat(24, 1fr); gap: 1px; }
.hm-cell { background: var(--bg-elev-2); height: 22px; border-radius: 2px; font-size: 10px; color: var(--text-muted); display: flex; align-items: center; justify-content: center; }
.hm-rowhead { background: transparent; color: var(--text-muted); font-size: 11px; font-weight: 600; }
.hm-colhead { background: transparent; color: var(--text-muted); font-size: 9px; }
.sales-heatmap-insight { font-size: 12px; color: var(--text-muted); padding: 6px 0; line-height: 1.5; }
.sales-heatmap-insight strong { color: var(--accent); }

.section-context { color: var(--text-muted); font-size: 12px; line-height: 1.5; margin: 6px 0 0; font-style: italic; }

/* Patch 11 — Loyalty caveat banner + ROI panel */
.loyalty-caveat-card {
  background: rgba(210,153,34,.08);
  border: 1px solid rgba(210,153,34,.30);
  border-left: 3px solid var(--amber);
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  margin-bottom: 12px;
}
.loyalty-caveat-card strong { color: var(--amber); }
.loyalty-caveat-card code   { background: var(--bg-elev-2); padding: 1px 6px; border-radius: 3px; font-size: 11px; }
.loyalty-roi { display: flex; flex-direction: column; gap: 6px; }

/* Patch 11 — Video honest empty state */
.pg-tag--soon {
  background: rgba(124,92,255,.15); color: var(--accent-2);
  border: 1px solid rgba(124,92,255,.30);
}
.video-empty {
  background: var(--bg-elev); border: 1px solid var(--border);
  border-left: 3px solid var(--accent-2); border-radius: 8px;
  padding: 28px 32px; max-width: 760px; margin: 0 auto;
}
.video-empty-icon { font-size: 42px; line-height: 1; margin-bottom: 14px; }
.video-empty-title { margin: 0 0 12px; font-size: 22px; font-weight: 700; }
.video-empty-body  { color: var(--text-muted); font-size: 14px; margin-bottom: 14px; }
.video-empty-list { padding-left: 20px; margin-bottom: 18px; font-size: 13px; line-height: 1.7; }
.video-empty-list code { background: var(--bg-elev-2); padding: 1px 6px; border-radius: 3px; font-size: 11px; }
.video-empty-current {
  background: var(--bg-elev-2); padding: 12px 16px; border-radius: 6px;
  font-size: 13px; line-height: 1.6; margin-bottom: 14px;
}
.video-empty-current ul { margin: 6px 0 0; padding-left: 20px; }
.video-empty-current code { background: var(--bg-elev); padding: 1px 6px; border-radius: 3px; font-size: 11px; }
.video-empty-warn { color: var(--amber); margin: 8px 0 0; font-size: 12px; }
.video-empty-roadmap {
  background: rgba(0,217,255,.05); border: 1px dashed var(--accent);
  border-radius: 6px; padding: 12px 16px; font-size: 13px; line-height: 1.6;
}
.video-empty-roadmap p { margin: 4px 0; }
.video-empty-roadmap code { background: var(--bg-elev-2); padding: 1px 6px; border-radius: 3px; font-size: 11px; }

/* ──────────────────────────────────────────────────────────
   Patch 09 — Universal section block spacing fix
   ────────────────────────────────────────────────────────── */
.pnl-block,
.ga-block,
.pp-block,
.cfo-block,
.lc-block,
.mk-block,
.cc-block,
.sp-block,
.calc-block,
.ceo-priorities,
.meta-truth,
.dashboard-section,
.section-block {
  margin-bottom: 20px;
}
.pnl-block:last-child,
.ga-block:last-child,
.pp-block:last-child,
.cfo-block:last-child,
.lc-block:last-child,
.mk-block:last-child,
.cc-block:last-child,
.sp-block:last-child,
.calc-block:last-child {
  margin-bottom: 0;
}
.pg-cols-2,
.pg-cols-3,
.pg-grid,
.cfo-hero,
.cpb-hero,
.rltv-comparison,
.cpb-scenarios {
  margin-bottom: 20px;
}
/* Two-column rows enforce gap so blocks never overlap */
.pg-cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pg-cols-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
@media (max-width: 1100px) {
  .pg-cols-2, .pg-cols-3 { grid-template-columns: 1fr; }
}

/* Patch 09 — Settings Channels editable */
.settings-channels-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.settings-channels-head .btn-ghost,
.btn-ghost {
  background: var(--bg-elev-2); border: 1px solid var(--accent); color: var(--accent);
  padding: 6px 14px; border-radius: 4px; font-size: 12px; cursor: pointer;
}
.btn-ghost:hover { background: var(--accent); color: #03152e; }
.settings-channels-list { display: flex; flex-direction: column; gap: 8px; }
.settings-channel-row {
  display: grid;
  grid-template-columns: 1fr 140px 1.5fr 36px;
  gap: 10px; align-items: end;
  padding: 10px 12px; background: var(--bg-elev-2); border-radius: 6px;
  border: 1px solid var(--border-soft);
}
.settings-channel-field { display: flex; flex-direction: column; gap: 4px; }
.settings-channel-field label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.settings-channel-field input,
.settings-channel-field select {
  background: var(--bg-elev); color: var(--text);
  border: 1px solid var(--border-soft); border-radius: 3px;
  padding: 5px 8px; font-size: 13px;
}
.settings-channel-field input:focus,
.settings-channel-field select:focus { outline: none; border-color: var(--accent); }
.settings-channel-del {
  width: 32px; height: 32px; padding: 0;
  background: transparent; border: 1px solid var(--border-soft);
  color: var(--text-muted); border-radius: 4px; cursor: pointer;
  align-self: end;
}
.settings-channel-del:hover { color: var(--red); border-color: var(--red); }
@media (max-width: 720px) {
  .settings-channel-row { grid-template-columns: 1fr; }
  .settings-channel-del { width: auto; }
}

/* Patch 11 — Anomaly playbook */
.anom-playbook { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--border-soft); }
.anom-playbook-title { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.anom-playbook-list { padding-left: 18px; margin: 0; font-size: 12px; line-height: 1.5; }
.anom-playbook-list li { padding: 2px 0; }

/* Patch 11 — CEO Top-3 priorities */
.ceo-priorities { background: linear-gradient(180deg, rgba(248,81,73,0.05), rgba(0,0,0,0)); border: 1px solid var(--border); border-left: 3px solid var(--red); border-radius: 8px; padding: 14px 16px; }
.ceo-priorities-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.ceo-priorities-head h3 { margin: 0; font-size: 13px; }
.ceo-priorities-hint { font-size: 11px; color: var(--text-muted); }
.ceo-priorities-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg);
}
@media (max-width: 900px) { .ceo-priorities-list { grid-template-columns: 1fr; gap: var(--space-md); } }
.ceo-priority-card { display: grid; grid-template-columns: 50px 1fr; gap: 12px; padding: 12px 14px; background: var(--bg-elev); border-radius: 6px; border-left: 3px solid var(--accent); }
.ceo-priority-rank { font-size: 22px; font-weight: 800; color: var(--accent); font-family: 'JetBrains Mono', monospace; }
.ceo-priority-title { font-weight: 600; margin-bottom: 4px; }
.ceo-priority-action { font-size: 12px; margin-bottom: 4px; color: var(--text-muted); }
.ceo-priority-meta { font-size: 12px; color: var(--text-muted); }
.ceo-priority-meta strong { color: var(--green); font-family: 'JetBrains Mono', monospace; }
.ceo-priority-danger  { border-left-color: var(--red); }
.ceo-priority-danger  .ceo-priority-rank { color: var(--red); }
.ceo-priority-warn    { border-left-color: var(--amber); }
.ceo-priority-warn    .ceo-priority-rank { color: var(--amber); }

/* Patch 11 — Overview YoY strip */
.overview-yoy { display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: var(--bg-elev); border: 1px solid var(--border-soft); border-radius: 6px; font-size: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.yoy-label { color: var(--text-muted); }
.yoy-chip  { padding: 4px 10px; background: var(--bg-elev-2); border-radius: 12px; }
.yoy-chip strong { font-family: 'JetBrains Mono', monospace; }

/* Patch 11 — AI Recs implementation tracker */
.rec-impl-badge { display: block; margin-top: 6px; font-size: 11px; color: var(--green); padding: 4px 6px; background: rgba(63,185,80,.10); border-radius: 4px; }
.rec-actions { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.rec-impl-btn { background: transparent; border: 1px solid var(--border-soft); color: var(--text-muted); padding: 3px 10px; border-radius: 4px; font-size: 11px; cursor: pointer; transition: border-color 120ms, color 120ms; }
.rec-impl-btn:hover { border-color: var(--green); color: var(--green); }
.leak-card.leak-implemented { opacity: .85; border-style: dashed; }
.pnl-block-summary {
  cursor: pointer; user-select: none; padding: 6px 0; list-style: none;
  display: flex; align-items: baseline; gap: 8px;
}
.pnl-block-summary::-webkit-details-marker { display: none; }
.pnl-block-summary-title { font-size: 13px; font-weight: 600; color: var(--text); }
.pnl-block-hint { font-size: 11px; color: var(--text-muted); }
/* Patch 12 A.5 — Block C honest empty state */
.pnl-pivot-empty {
  background: var(--bg-elev-2); border: 1px dashed var(--border-soft); border-radius: 6px;
  padding: 24px 28px; text-align: left; max-width: 640px;
}
.pnl-pivot-empty-icon { font-size: 32px; margin-bottom: 10px; }
.pnl-pivot-empty h4 { margin: 0 0 10px; font-size: 16px; color: var(--accent-2); }
.pnl-pivot-empty p { font-size: 13px; line-height: 1.6; color: var(--text-muted); margin: 8px 0; }
.pnl-pivot-empty p strong { color: var(--text); }
.pnl-pivot-empty code { background: var(--bg-elev); padding: 1px 6px; border-radius: 3px; font-size: 11px; }
.pnl-pivot-empty-roadmap { padding: 8px 12px; background: rgba(0,217,255,.05); border-left: 2px dashed var(--accent); border-radius: 3px; }
.pnl-pivot-empty-alt { color: var(--text-muted); }
.pnl-pivot-empty-alt a { color: var(--accent); }

/* ──────────────────────────────────────────────────────────
   Patch 12 A.6 — Section filter panel
   ────────────────────────────────────────────────────────── */
.sfp-root {
  background: var(--bg-elev);
  border: 1px solid var(--border-soft);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  padding: 10px 14px;
  margin-bottom: 16px;
  font-size: 12px;
}
.sfp-header {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 8px; padding-bottom: 6px;
  border-bottom: 1px dashed var(--border-soft);
}
.sfp-title { font-weight: 600; color: var(--accent); }
.sfp-hint  { color: var(--text-muted); font-size: 11px; }
.sfp-reset {
  margin-left: auto;
  background: var(--bg-elev-2); border: 1px solid var(--border-soft);
  color: var(--text-muted); padding: 3px 10px; border-radius: 4px;
  font-size: 11px; cursor: pointer;
}
.sfp-reset:hover { color: var(--red); border-color: var(--red); }
.sfp-body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}
.sfp-field { display: flex; flex-direction: column; gap: 4px; }
.sfp-field > label {
  font-size: 10px; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .04em;
}
.sfp-chips { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.sfp-chip {
  background: var(--bg-elev-2); border: 1px solid var(--border-soft);
  color: var(--text-muted); padding: 3px 10px; border-radius: 4px;
  font-size: 11px; cursor: pointer;
}
.sfp-chip:hover { border-color: var(--accent); color: var(--text); }
.sfp-chip.on { background: var(--accent); color: #03152e; border-color: var(--accent); font-weight: 600; }
.sfp-multi {
  background: var(--bg-elev-2); border: 1px solid var(--border-soft);
  border-radius: 4px; cursor: pointer; max-width: 100%;
}
.sfp-multi-summary {
  list-style: none; padding: 5px 10px; font-size: 12px;
  display: flex; align-items: center; justify-content: space-between;
}
.sfp-multi-summary::-webkit-details-marker { display: none; }
.sfp-multi-summary::after { content: '▾'; color: var(--text-muted); margin-left: 6px; }
.sfp-summary-empty  { color: var(--text-muted); }
.sfp-summary-active { color: var(--accent); font-weight: 600; }
.sfp-multi-list {
  max-height: 240px; overflow-y: auto;
  padding: 4px 10px 8px;
  border-top: 1px dashed var(--border-soft);
}
.sfp-multi-item {
  display: flex; gap: 6px; align-items: center;
  padding: 3px 0; cursor: pointer; font-size: 12px;
}
.sfp-multi-item:hover { color: var(--accent); }
.sfp-field select {
  background: var(--bg-elev-2); color: var(--text);
  border: 1px solid var(--border-soft); border-radius: 3px;
  padding: 5px 8px; font-size: 12px;
}

/* ──────────────────────────────────────────────────────────
   Patch 12 — bulk component styles
   ────────────────────────────────────────────────────────── */

/* C.3 Sortable th */
.sortable-th { cursor: pointer; user-select: none; position: relative; }
.sortable-th:hover { color: var(--accent); }
.sortable-arrow { font-size: 9px; margin-left: 4px; color: var(--accent); }

/* C.7 Section help ? icon */
.section-help {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; padding: 0;
  background: var(--bg-elev-2); border: 1px solid var(--border-soft);
  border-radius: 50%; color: var(--text-muted); cursor: help;
  font-size: 11px; font-weight: 700; margin-left: 10px; vertical-align: middle;
}
.section-help:hover { background: var(--accent); color: white; }

/* C.1 Locale toggle (lang + currency) */
.tb-locale {
  display: inline-flex; gap: 4px; align-items: center;
  margin-left: 8px;
}
.tb-locale [data-locale-lang] {
  background: var(--bg-elev-2); border: 1px solid var(--border);
  color: var(--text-muted); padding: 4px 10px; border-radius: 4px;
  font-size: 11px; cursor: pointer; min-width: 36px;
}
.tb-locale [data-locale-lang]:hover { color: var(--accent); border-color: var(--accent); }
.tb-locale [data-locale-currency] {
  background: var(--bg-elev-2); border: 1px solid var(--border);
  color: var(--text); padding: 3px 8px; border-radius: 4px;
  font-size: 11px;
}

/* B.20 Money Leaks TOFU */
.leaks-tofu {
  position: relative;
  background: linear-gradient(180deg, rgba(248,81,73,0.18) 0%, rgba(248,81,73,0.04) 100%);
  border: 1px solid rgba(248,81,73,0.45);
  border-left: 4px solid var(--red);
  border-radius: 12px;
  padding: 28px 32px;
  margin-bottom: 20px;
  overflow: hidden;
}
.leaks-tofu-bg {
  position: absolute; top: 0; right: 0; width: 60%; height: 100%;
  background: radial-gradient(circle at 80% 50%, rgba(248,81,73,0.18) 0%, transparent 60%);
  pointer-events: none;
}
.leaks-tofu-content { position: relative; z-index: 1; }
.leaks-tofu-label {
  font-size: 11px; color: var(--red); text-transform: uppercase;
  letter-spacing: .12em; font-weight: 700; margin-bottom: 6px;
}
.leaks-tofu-value {
  font-size: 56px; font-weight: 800;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  color: var(--red);
  text-shadow: 0 0 24px rgba(248,81,73,0.55);
  letter-spacing: -.02em; line-height: 1.05;
  margin-bottom: 10px;
}
.leaks-tofu-annual {
  font-size: 16px; color: var(--text);
  margin-bottom: 18px;
}
.leaks-tofu-annual-label { color: var(--text-muted); margin-right: 8px; }
.leaks-tofu-annual-value { color: var(--amber); font-weight: 700; font-family: 'JetBrains Mono', monospace; }
.leaks-tofu-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.leaks-tofu-btn {
  background: var(--red); color: white; border: 0;
  padding: 10px 20px; border-radius: 4px; font-size: 13px;
  font-weight: 700; cursor: pointer; transition: transform 120ms;
}
.leaks-tofu-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(248,81,73,0.45); }
.leaks-tofu-close-all {
  background: transparent; color: var(--text-muted);
  border: 1px solid var(--border-soft); padding: 10px 16px;
  border-radius: 4px; font-size: 12px; cursor: pointer;
}
.leaks-tofu-close-all:hover { color: var(--red); border-color: var(--red); }

/* B.7 Funnel insights */
.funnel-insights { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }

/* B.2 CEO channel pulse */
.ceo-channel-pulse { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ceo-channel-card {
  background: var(--bg-elev-2); border: 1px solid var(--border-soft);
  border-radius: 6px; padding: 14px 16px;
}
.ceo-channel-card.ceo-channel-green { border-left: 3px solid var(--green); }
.ceo-channel-card.ceo-channel-amber { border-left: 3px solid var(--amber); }
.ceo-channel-card.ceo-channel-red   { border-left: 3px solid var(--red); }
.ceo-channel-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.ceo-channel-trend { font-size: 12px; font-weight: 600; }
.ceo-channel-card.ceo-channel-green .ceo-channel-trend { color: var(--green); }
.ceo-channel-card.ceo-channel-amber .ceo-channel-trend { color: var(--amber); }
.ceo-channel-card.ceo-channel-red   .ceo-channel-trend { color: var(--red); }
.ceo-channel-foot { font-size: 11px; color: var(--text-muted); margin-top: 6px; }
.ceo-spark { display: block; }
@media (max-width: 720px) { .ceo-channel-pulse { grid-template-columns: 1fr; } }

/* B.1 Overview Top-3 inline summaries */
.overview-top3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.overview-top3-card { background: var(--bg-elev); border: 1px solid var(--border-soft); border-radius: 6px; padding: 10px 14px; }
.overview-top3-card.overview-top3-skus     { border-top: 2px solid var(--green); }
.overview-top3-card.overview-top3-channels { border-top: 2px solid var(--accent); }
.overview-top3-card.overview-top3-leaks    { border-top: 2px solid var(--red); }
.overview-top3-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
.overview-top3-body { font-size: 12px; line-height: 1.45; color: var(--text); }
@media (max-width: 1100px) { .overview-top3 { grid-template-columns: 1fr; } }

/* B.6 Менеджери donut + rank */
.mgr-donut-wrap, .mgr-rank-wrap { padding: 8px 12px; }
.mgr-donut-legend { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; max-height: 200px; overflow-y: auto; }
.mgr-donut-legend-row { display: grid; grid-template-columns: 14px 1fr 50px; gap: 6px; align-items: center; font-size: 11px; }
.mgr-donut-dot { width: 10px; height: 10px; border-radius: 50%; }
.mgr-donut-name { font-weight: 600; }
.mgr-donut-pct { color: var(--text-muted); text-align: right; font-variant-numeric: tabular-nums; }

/* Patch 13-NIGHT-A Item 22 — tighter rank list spacing via tokens. */
.mgr-rank-list { display: flex; flex-direction: column; gap: var(--space-xs); }
.mgr-rank-row {
  display: grid; grid-template-columns: 60px 1fr 100px 120px;
  gap: var(--space-sm); padding: var(--space-xs) var(--space-sm); border-radius: 4px;
  background: var(--bg-elev-2); align-items: baseline;
}
.mgr-rank-row.mgr-rank-top { border-left: 3px solid var(--green); }
.mgr-rank-row.mgr-rank-bot { border-left: 3px solid var(--red); }
.mgr-rank-num { font-weight: 700; font-size: 13px; }
.mgr-rank-name { font-weight: 600; font-size: 13px; }
.mgr-rank-rev  { font-family: 'JetBrains Mono', monospace; text-align: right; font-weight: 700; }
.mgr-rank-meta { font-size: 11px; color: var(--text-muted); }
.mgr-rank-divider { color: var(--text-muted); font-size: 11px; padding: 6px 0; text-align: center; font-style: italic; }

/* B.18 Channel groups */
.ch-groups-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.ch-group-card {
  background: var(--bg-elev-2); border: 1px solid var(--border-soft);
  border-radius: 8px; padding: 14px 16px; border-top: 2px solid var(--accent);
}
.ch-group-name { font-size: 14px; font-weight: 700; margin-bottom: 10px; color: var(--accent); }
.ch-group-metrics {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  margin-bottom: 10px;
}
.ch-group-metrics > div { display: flex; flex-direction: column; gap: 2px; padding: 4px 0; }
.ch-group-label { font-size: 9px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; }
.ch-group-metrics strong { font-family: 'JetBrains Mono', monospace; font-size: 13px; }
.ch-group-tag { font-size: 11px; padding: 4px 10px; background: var(--bg-elev); border-radius: 4px; display: inline-block; }

/* B.19 Google recs P0/P1 priority chip */
.ga-rec-priority {
  display: inline-block; padding: 1px 8px; border-radius: 10px;
  background: var(--bg-elev-2); color: var(--text); font-size: 10px;
  font-weight: 700; margin-right: 6px; letter-spacing: .04em;
}
.pnl-neg { color: var(--red); }

/* ─── Day 18.6: Loyalty Liability info + OPEX source tags ─── */
.pnl-loyalty { border-left: 3px solid var(--accent-2); }
.pnl-loyalty-text { font-size: 12px; color: var(--text); line-height: 1.5; margin: 0; font-style: italic; }
.pnl-loyalty-text strong { font-style: normal; }
.pnl-loyalty-text code { background: var(--bg-elev-2); padding: 1px 4px; border-radius: 3px; font-style: normal; }
.pnl-src-tag { font-size: 9px; padding: 0 4px; border-radius: 2px; margin-left: 4px; letter-spacing: 0.04em; text-transform: uppercase; }
.pnl-src-manual { background: rgba(63,185,80,0.18); color: var(--green); }
.pnl-src-pct    { background: rgba(124,92,255,0.18); color: var(--accent-2); }
.pnl-actions input[type=range] { width: 110px; vertical-align: middle; accent-color: var(--accent); }
.pnl-actions [data-percent-wrap] { display: inline-flex; gap: 6px; align-items: center; font-size: 11px; color: var(--text-muted); }
.pnl-good { color: var(--green); }
.pnl-warn { color: var(--amber); }
.pnl-bad  { color: var(--red); }
.pnl-neg-cell { text-align: right; color: var(--red); font-variant-numeric: tabular-nums; }
.pnl-pivot-frame { max-height: 600px; overflow-y: auto; }
.pg-table .num.bold { font-weight: 600; }

/* ─── Day 18: Manager ROI cells ─── */
.mgr-salary-edit {
  background: var(--bg-elev-2); color: var(--accent); border: 1px dashed var(--border-soft);
  border-radius: 3px; padding: 2px 6px; font-size: 11px; cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.mgr-salary-edit:hover { border-color: var(--accent); border-style: solid; background: var(--bg-elev); }
.mgr-roi-good { color: var(--green); font-weight: 600; }
.mgr-roi-ok   { color: var(--text); }
.mgr-roi-warn { color: var(--amber); }
.mgr-roi-bad  { color: var(--red); font-weight: 600; }

/* ─── Day 18: Лампочки grid ─── */
.lamps-controls { display: flex; gap: 10px; align-items: center; margin-top: 8px; }
.lamps-controls .ch-toggle { font-size: 12px; color: var(--text-muted); display: inline-flex; gap: 6px; }
.lamps-controls button { background: var(--bg-elev-2); color: var(--text); border: 1px solid var(--border-soft); border-radius: 4px; padding: 4px 10px; font-size: 11px; cursor: pointer; }
.lamps-controls button:hover { background: var(--bg-elev); }
.lamps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 12px 0; }
.lamp-card {
  background: var(--bg-elev); border: 1px solid var(--border-soft);
  border-top: 3px solid var(--border); border-radius: 6px; padding: 14px;
  display: flex; flex-direction: column; gap: 6px;
}
/* Patch 13-NIGHT-B Item 7 — UI Kit canonical: colored big number + subtle bg tint per severity. */
.lamp-card.lamp-green   { border-top-color: var(--good); background: color-mix(in oklch, var(--good) 6%, var(--bg-elev)); }
.lamp-card.lamp-yellow  { border-top-color: var(--warn); background: color-mix(in oklch, var(--warn) 6%, var(--bg-elev)); }
.lamp-card.lamp-red     { border-top-color: var(--bad);  background: color-mix(in oklch, var(--bad) 7%, var(--bg-elev)); }
.lamp-card.lamp-unknown { border-top-color: var(--border); opacity: 0.7; }
.lamp-card.lamp-green   .lamp-big { color: var(--good); }
.lamp-card.lamp-yellow  .lamp-big { color: var(--warn); }
.lamp-card.lamp-red     .lamp-big { color: var(--bad); }
.lamp-head { display: flex; align-items: center; gap: 8px; }
.lamp-head h3 { margin: 0; font-size: 12px; flex: 1; color: var(--text); }
.lamp-dot  { font-size: 12px; }
.lamp-edit-thr { background: transparent; border: 0; color: var(--text-muted); cursor: pointer; font-size: 12px; padding: 0 2px; }
.lamp-edit-thr:hover { color: var(--accent); }
.lamp-big  { font-size: 26px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.lamp-legend { font-size: 10px; color: var(--text-muted); letter-spacing: 0.02em; }
.lamp-comment-btn { background: transparent; border: 0; padding: 0; cursor: pointer; text-align: left; }
.lamp-comment {
  margin-top: 6px; padding: 6px 8px; border-radius: 4px;
  background: var(--bg-elev-2); border: 1px solid var(--border-soft);
  font-size: 11px;
}
.lamp-comment-empty { color: var(--text-muted); font-style: italic; }
.lamp-comment-filled { color: var(--text); }
.lamp-comment-date { color: var(--text-muted); font-size: 10px; }
.lamp-comment p { margin: 4px 0 0; line-height: 1.35; }

@media (max-width: 1280px) { .lamps-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px)  { .lamps-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px)  { .lamps-grid { grid-template-columns: 1fr; } }

/* ─── Day 19: GA4 sections ─── */
.ga4-trend, .ga4-table-block { background: var(--bg-elev); border: 1px solid var(--border-soft); border-radius: 8px; padding: 14px; margin-bottom: 12px; }
.ga4-trend h3, .ga4-table-block h3 { margin: 0 0 8px; font-size: 13px; }
.ga4-trend canvas { display: block; width: 100%; }

.ga4-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 12px 0; }
.ga4-tile {
  display: flex; flex-direction: column; gap: 4px; text-decoration: none;
  background: var(--bg-elev); border: 1px solid var(--border-soft);
  border-left: 3px solid var(--accent); border-radius: 6px; padding: 12px 14px;
  font-size: 12px; color: var(--text);
}
.ga4-tile:hover { background: var(--bg-elev-2); }
.ga4-tile strong { font-size: 13px; color: var(--text); }
.ga4-tile span { color: var(--text-muted); font-size: 11px; }

.ga4-banner { background: rgba(217,165,32,0.10); border: 1px solid var(--amber); color: var(--text); padding: 10px 14px; border-radius: 6px; margin-bottom: 12px; font-size: 12px; line-height: 1.5; }
.ga4-banner-warn { border-left: 3px solid var(--amber); }
.ga4-empty { background: var(--bg-elev-2); border: 1px dashed var(--border-soft); border-radius: 6px; padding: 18px; color: var(--text-muted); font-size: 12px; line-height: 1.5; }
.ga4-empty strong { color: var(--text); }

.video-bars { display: flex; align-items: flex-end; gap: 1px; height: 100px; padding: 8px 0; border-bottom: 1px solid var(--border-soft); }
.video-bar  { flex: 1; min-width: 2px; background: var(--accent-2); }
.video-bars-labels { display: flex; justify-content: space-between; font-size: 10px; color: var(--text-muted); padding-top: 4px; }

@media (max-width: 1280px) { .ga4-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px)  { .ga4-tiles { grid-template-columns: 1fr; } }

/* ─── Day 19: Mobile Behavior hero ─── */
.mobile-hero { background: var(--bg-elev); border: 1px solid var(--border-soft); border-radius: 8px; padding: 14px 16px; margin-bottom: 12px; }
.mobile-hero-headline { font-size: 14px; margin-bottom: 12px; color: var(--text); }
.mobile-hero-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mobile-hero-tile {
  background: var(--bg-elev-2); border: 1px solid var(--border-soft); border-top: 3px solid var(--border);
  border-radius: 6px; padding: 12px 14px;
}
.mobile-hero-green  { border-top-color: var(--green); }
.mobile-hero-amber  { border-top-color: var(--amber); }
.mobile-hero-muted  { border-top-color: var(--border); opacity: 0.85; }
.mobile-hero-label  { font-size: 11px; color: var(--text-muted); }
.mobile-hero-cr     { font-size: 26px; font-weight: 600; color: var(--text); margin-top: 4px; }
.mobile-hero-sub    { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.mobile-hero-rev    { font-size: 12px; color: var(--accent); margin-top: 4px; font-variant-numeric: tabular-nums; }
.mobile-hero-share  { font-size: 12px; color: var(--text-muted); margin-top: 10px; }
.mobile-recs        { padding-left: 18px; font-size: 12px; line-height: 1.5; color: var(--text); }
.mobile-recs strong { color: var(--text); }

/* ─── Day 19: Dark Funnel sub-panel ─── */
/* ─── Day 19.1: Funnel rows + Audience segments + Devices ─── */
.funnel-bars { display: flex; flex-direction: column; gap: 8px; }
.funnel-row { display: grid; grid-template-columns: 220px 1fr 220px; gap: 10px; align-items: center; font-size: 12px; }
.funnel-row-label { color: var(--text); font-weight: 500; }
.funnel-row-bar   { height: 24px; background: var(--bg-elev-2); border-radius: 4px; overflow: hidden; }
.funnel-bar-fill  { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.funnel-row-count { font-variant-numeric: tabular-nums; text-align: right; }
.funnel-cr        { color: var(--text-muted); font-size: 11px; margin-left: 6px; }
.funnel-est-tag   { font-size: 9px; padding: 1px 5px; border-radius: 2px; background: rgba(217,165,32,.18); color: var(--amber); margin-left: 4px; letter-spacing: 0.04em; text-transform: uppercase; }
.funnel-crm-grid  { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.funnel-crm-card  { background: var(--bg-elev-2); border: 1px solid var(--border-soft); border-left: 3px solid var(--accent); border-radius: 4px; padding: 10px 12px; }
.funnel-crm-label { font-size: 10px; text-transform: uppercase; color: var(--text-muted); letter-spacing: 0.05em; }
.funnel-crm-num   { font-size: 18px; font-weight: 600; color: var(--text); margin-top: 2px; font-variant-numeric: tabular-nums; }

.aud-stack { display: flex; height: 18px; border-radius: 4px; overflow: hidden; margin-bottom: 10px; }
.aud-stack-seg { display: block; height: 100%; }
.aud-dot   { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 4px; vertical-align: middle; }
.aud-deepest { display: flex; flex-direction: column; gap: 6px; }
.aud-deepest-row { display: grid; grid-template-columns: 130px 1fr 80px; gap: 8px; align-items: center; font-size: 12px; }
.aud-deepest-label { color: var(--text-muted); }
.aud-deepest-bar { height: 14px; background: var(--bg-elev-2); border-radius: 3px; overflow: hidden; }
.aud-deepest-bar span { display: block; height: 100%; background: var(--accent); }
.aud-deepest-num { font-variant-numeric: tabular-nums; text-align: right; }

.kpi-sub { font-size: 10px; color: var(--text-muted); margin-top: 2px; }

.ga4-banner-info { background: rgba(56,139,253,0.10); border: 1px solid var(--accent); color: var(--text); padding: 10px 14px; border-radius: 6px; margin-bottom: 12px; font-size: 12px; line-height: 1.5; border-left: 3px solid var(--accent); }

@media (max-width: 960px) {
  .funnel-row      { grid-template-columns: 1fr; }
  .funnel-crm-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ─── Day 6.13: Settings page ─── */
.settings-actions { display: flex; gap: 8px; margin-top: 10px; align-items: center; }
.settings-actions button { background: var(--bg-elev-2); color: var(--text); border: 1px solid var(--border-soft); border-radius: 4px; padding: 5px 12px; font-size: 12px; cursor: pointer; }
.settings-actions button:hover { background: var(--bg-elev); border-color: var(--accent); }
.settings-danger { color: var(--red) !important; }
.settings-tabs   { display: flex; gap: 4px; margin: 14px 0 8px; flex-wrap: wrap; border-bottom: 1px solid var(--border-soft); padding-bottom: 6px; }
.settings-tab    { background: transparent; border: 0; padding: 6px 12px; color: var(--text-muted); cursor: pointer; font-size: 12px; border-bottom: 2px solid transparent; margin-bottom: -7px; }
.settings-tab:hover  { color: var(--text); }
.settings-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.settings-body   { background: var(--bg-elev); border: 1px solid var(--border-soft); border-radius: 8px; padding: 18px; min-height: 200px; }
.settings-form   { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.settings-form label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--text-muted); }
.settings-form input, .settings-form select { background: var(--bg-elev-2); color: var(--text); border: 1px solid var(--border-soft); border-radius: 4px; padding: 5px 8px; font-size: 12px; }
.settings-form input[type="color"] { padding: 0; height: 32px; cursor: pointer; }
.settings-preview { background: var(--bg); border: 1px solid var(--border-soft); border-radius: 4px; padding: 12px; max-height: 500px; overflow: auto; font-size: 11px; }
.sb-settings { display: block; margin: 8px 12px; padding: 6px 12px; border-radius: 4px; color: var(--text-muted); text-decoration: none; font-size: 12px; border: 1px solid var(--border-soft); }
.sb-settings:hover, .sb-settings.active { color: var(--accent); border-color: var(--accent); background: var(--bg-elev); }

/* ─── Day 19.2: Meta Ads page mode toggle ─── */
.meta-mode-toggle { display: inline-flex; gap: 0; margin-top: 8px; border-radius: 4px; overflow: hidden; border: 1px solid var(--border-soft); }
.meta-mode-btn {
  padding: 6px 14px; background: var(--bg-elev); color: var(--text-muted);
  border: 0; cursor: pointer; font-size: 12px; border-right: 1px solid var(--border-soft);
}
.meta-mode-btn:last-child { border-right: 0; }
.meta-mode-btn:hover  { background: var(--bg-elev-2); color: var(--text); }
.meta-mode-btn.active { background: var(--accent); color: #fff; }

.dark-funnel { border-left: 3px solid var(--accent-2); }
.dark-funnel .pnl-block-head { gap: 14px; }
.dark-funnel select { background: var(--bg-elev-2); color: var(--text); border: 1px solid var(--border-soft); border-radius: 3px; padding: 2px 6px; font-size: 12px; }

@media (max-width: 900px) {
  .mobile-hero-grid { grid-template-columns: 1fr; }
}

/* ──────────────────────────────────────────────────────────
   Day 25 — Mode toggle (topbar) + Hero Panel + utility classes
   ────────────────────────────────────────────────────────── */

/* Mode toggle button (topbar) */
.tb-mode {
  background: var(--bg-elev-2); border: 1px solid var(--border);
  color: var(--text-muted); padding: 5px 12px; border-radius: 4px;
  font-size: 12px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: color 200ms, border-color 200ms, box-shadow 300ms, background 200ms;
}
.tb-mode .tb-mode-bolt { font-size: 14px; line-height: 1; opacity: .55; transition: opacity 200ms; }
.tb-mode:hover { border-color: var(--accent); color: var(--text); }
.tb-mode:hover .tb-mode-bolt { opacity: .85; }
.tb-mode.on {
  background: linear-gradient(135deg, rgba(0, 217, 255, 0.18), rgba(124, 92, 255, 0.18));
  border-color: #00d9ff;
  color: #fff;
  box-shadow: 0 0 12px rgba(0, 217, 255, 0.45), inset 0 0 8px rgba(0, 217, 255, 0.18);
}
.tb-mode.on .tb-mode-bolt { opacity: 1; }

/* Mode-scoped visibility helpers */
body.mode-normis    .plusultra-only { display: none !important; }
body.mode-plusultra .normis-only    { display: none !important; }

/* ── Hero Panel (Normis Overview attention panel) ── */
.hero-panel {
  position: relative;
  background: linear-gradient(180deg, rgba(124,92,255,0.06), rgba(63,185,80,0.04));
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-2);
  border-radius: 8px;
  padding: 18px 20px 16px;
  margin-bottom: 16px;
  transition: background 200ms, border-color 200ms;
}
.hero-panel.is-collapsed .hero-body,
.hero-panel.is-collapsed .hero-show-rest { display: none; }
.hero-panel.is-collapsed { padding: 12px 20px; }

.hero-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
}
.hero-title {
  margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -.005em;
  color: var(--text);
}
.hero-title [data-slot="client"] { color: var(--accent); }
.hero-collapse {
  background: var(--bg-elev-2); border: 1px solid var(--border-soft);
  color: var(--text-muted); width: 28px; height: 28px; border-radius: 4px;
  cursor: pointer; font-size: 14px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.hero-collapse:hover { color: var(--text); border-color: var(--accent); }

.hero-cards {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  margin-bottom: 14px;
}
.hero-card {
  background: var(--bg-elev);
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  padding: 14px 14px 12px;
  display: flex; flex-direction: column; gap: 8px;
  transition: border-color 200ms, transform 150ms;
}
.hero-card:hover { border-color: var(--border); }
.hero-card.is-empty { opacity: .55; }
.hero-card-head {
  display: flex; align-items: center; gap: 8px;
  margin: 0;
}
.hero-emoji { font-size: 18px; line-height: 1; }
.hero-card-title {
  margin: 0; font-size: 11px; font-weight: 700;
  letter-spacing: .08em; color: var(--text-muted);
  text-transform: uppercase;
}
.hero-card--lose   { border-top: 2px solid var(--red); }
.hero-card--unused { border-top: 2px solid var(--green); }
.hero-card--waste  { border-top: 2px solid var(--amber); }

.hero-amount {
  font-size: 26px; font-weight: 800; line-height: 1.1;
  letter-spacing: -.015em; color: var(--text);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.hero-amount--plus { color: var(--green); }
.hero-card--lose  .hero-amount { color: var(--red); }
.hero-card--waste .hero-amount { color: var(--amber); }

.hero-mech {
  font-size: 12px; line-height: 1.45; color: var(--text-muted);
  min-height: 34px;
}
.hero-cta {
  align-self: flex-start;
  background: transparent; color: var(--accent);
  border: 1px solid var(--border-soft); border-radius: 4px;
  padding: 4px 10px; font-size: 12px; cursor: pointer;
  transition: background 120ms, color 120ms, border-color 120ms;
}
.hero-cta:hover:not([disabled]) {
  background: var(--accent); color: #03152e; border-color: var(--accent);
}
.hero-cta[disabled] { opacity: .35; cursor: default; }

.hero-summary {
  display: flex; gap: 24px; flex-wrap: wrap;
  border-top: 1px dashed var(--border-soft);
  padding-top: 12px;
  font-size: 13px;
}
.hero-summary-row { display: inline-flex; gap: 8px; align-items: baseline; }
.hero-summary-label { color: var(--text-muted); }
.hero-summary-value {
  color: var(--text); font-weight: 700;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.hero-summary-value--plus { color: var(--green); }
.hero-summary-potential.is-empty .hero-summary-value--plus { color: var(--text-muted); }

.hero-show-rest {
  margin-top: 14px;
  background: transparent; border: 1px dashed var(--border-soft);
  color: var(--text-muted); padding: 6px 14px; border-radius: 4px;
  font-size: 12px; cursor: pointer; width: 100%;
  transition: color 120ms, border-color 120ms, background 120ms;
}
.hero-show-rest:hover {
  color: var(--text); border-color: var(--accent); background: var(--bg-elev);
}

@media (max-width: 900px) {
  .hero-cards { grid-template-columns: 1fr; }
  .hero-summary { gap: 12px; }
}

/* ──────────────────────────────────────────────────────────
   Day 26a — Real CM page styling
   ────────────────────────────────────────────────────────── */
.pg-real-cm { display: flex; flex-direction: column; gap: 16px; }
.pg-tag {
  display: inline-block; vertical-align: middle; margin-left: 8px;
  padding: 1px 8px; border-radius: 10px; font-size: 10px; letter-spacing: .05em;
  font-weight: 700;
}
.pg-tag--plus {
  background: rgba(0, 217, 255, 0.16); color: #00d9ff;
  border: 1px solid rgba(0, 217, 255, 0.35);
}

.rcm-banner-card {
  border-radius: 6px; border: 1px solid var(--border);
  padding: 12px 14px; font-size: 13px; line-height: 1.5;
}
.rcm-banner--info    { background: rgba(88,166,255,.06); border-color: rgba(88,166,255,.22); }
.rcm-banner--warn    { background: rgba(248,81,73,.06); border-color: rgba(248,81,73,.30); color: var(--text); }
.rcm-banner--success { background: rgba(63,185,80,.06); border-color: rgba(63,185,80,.30); }

.rcm-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.rcm-card {
  background: var(--bg-elev); border: 1px solid var(--border-soft);
  border-radius: 6px; padding: 12px 14px;
}
.rcm-card-cm { border-top: 2px solid var(--green); }
.rcm-card-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-muted); margin-bottom: 6px;
}
.rcm-card-value {
  font-size: 22px; font-weight: 700; letter-spacing: -.01em;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  color: var(--text);
}
.rcm-cm-value { color: var(--green); }
.rcm-cm-value.is-neg { color: var(--red); }
.rcm-card-sub { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

.rcm-table-wrap { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 8px; padding: 12px; overflow-x: auto; }
.rcm-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.rcm-table th, .rcm-table td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
.rcm-table th { color: var(--text-muted); font-weight: 600; text-transform: uppercase; font-size: 10px; letter-spacing: .04em; }
.rcm-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.rcm-mode-select {
  background: var(--bg-elev-2); color: var(--text);
  border: 1px solid var(--border-soft); border-radius: 3px;
  padding: 3px 6px; font-size: 11px; min-width: 100px;
}
.rcm-table input[type=number] {
  background: var(--bg-elev-2); color: var(--text);
  border: 1px solid var(--border-soft); border-radius: 3px;
  padding: 3px 6px; font-size: 12px; width: 90px;
  text-align: right; font-variant-numeric: tabular-nums;
}
.rcm-auto { color: var(--text-muted); font-size: 11px; font-style: italic; }
.rcm-auto-pill {
  display: inline-block; padding: 0 6px; border-radius: 8px;
  background: rgba(63,185,80,.15); color: var(--green);
  font-size: 9px; letter-spacing: .05em; vertical-align: middle;
  margin-right: 4px;
}
.rcm-note { color: var(--text-muted); font-size: 11px; max-width: 280px; }

@media (max-width: 900px) {
  .rcm-summary { grid-template-columns: 1fr; }
}

/* ──────────────────────────────────────────────────────────
   Day 26a — Real LTV page
   ────────────────────────────────────────────────────────── */
.pg-real-ltv { display: flex; flex-direction: column; gap: 16px; }
.rltv-comparison {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
.rltv-card {
  background: var(--bg-elev); border: 1px solid var(--border-soft);
  border-radius: 6px; padding: 12px 14px;
}
.rltv-card--accent { border-top: 2px solid var(--green); }
.rltv-card--diff   { border-top: 2px solid var(--accent); }
.rltv-card-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-muted); margin-bottom: 6px;
}
.rltv-card-value {
  font-size: 22px; font-weight: 700; letter-spacing: -.01em;
  font-family: 'JetBrains Mono', ui-monospace, monospace; color: var(--text);
}
.rltv-card-sub { font-size: 11px; color: var(--text-muted); margin-top: 4px; line-height: 1.4; }

.rltv-block {
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: 8px; padding: 14px 16px;
}
.rltv-block-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 8px; flex-wrap: wrap;
}
.rltv-block-head h3 { margin: 0; font-size: 13px; }
.rltv-toggle { display: inline-flex; gap: 0; border-radius: 4px; overflow: hidden; border: 1px solid var(--border-soft); }
.rltv-tab {
  padding: 5px 12px; background: var(--bg-elev); color: var(--text-muted);
  border: 0; cursor: pointer; font-size: 12px; border-right: 1px solid var(--border-soft);
}
.rltv-tab:last-child { border-right: 0; }
.rltv-tab:hover { background: var(--bg-elev-2); color: var(--text); }
.rltv-tab.on { background: var(--accent-2); color: white; }

.rltv-cohort-foot { font-size: 11px; color: var(--text-muted); margin-bottom: 8px; }
.rltv-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.rltv-table .muted { color: var(--text-muted); }
.rltv-segment-table .num { text-align: right; font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
  .rltv-comparison { grid-template-columns: 1fr 1fr; }
}

/* ──────────────────────────────────────────────────────────
   Day 26a — CAC Payback page
   ────────────────────────────────────────────────────────── */
.pg-cac-pb { display: flex; flex-direction: column; gap: 16px; }
.cpb-hero { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cpb-hero-card {
  background: var(--bg-elev); border: 1px solid var(--border-soft);
  border-radius: 6px; padding: 14px 16px;
}
.cpb-hero-info  { border-top: 2px solid var(--accent); }
.cpb-hero-green { border-top: 2px solid var(--green); }
.cpb-hero-amber { border-top: 2px solid var(--amber); }
.cpb-hero-red   { border-top: 2px solid var(--red); animation: pu-pulse-danger 3s ease-in-out infinite; }
.cpb-hero-muted { border-top: 2px solid var(--border); }
.cpb-hero-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-muted); margin-bottom: 6px;
}
.cpb-hero-value {
  font-size: 26px; font-weight: 700; letter-spacing: -.01em;
  font-family: 'JetBrains Mono', ui-monospace, monospace; color: var(--text);
}
.cpb-hero-sub { font-size: 11px; color: var(--text-muted); margin-top: 4px; line-height: 1.4; }

.cpb-banner { padding: 10px 14px; border-radius: 6px; font-size: 13px; }
.cpb-banner-green { background: rgba(63,185,80,.08); border: 1px solid rgba(63,185,80,.30); color: var(--text); }
.cpb-banner-amber { background: rgba(210,153,34,.08); border: 1px solid rgba(210,153,34,.30); color: var(--text); }
.cpb-banner-red   { background: rgba(248,81,73,.08); border: 1px solid rgba(248,81,73,.40); color: var(--text); font-weight: 600; }

.cpb-block {
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: 8px; padding: 14px 16px;
}
.cpb-block-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.cpb-block-head h3 { margin: 0; font-size: 13px; }
.cpb-table .num, .cpb-runway-out { font-variant-numeric: tabular-nums; }
.cpb-table .num { text-align: right; }

.cpb-st { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; }
.cpb-st-green { background: rgba(63,185,80,.18); color: var(--green); }
.cpb-st-amber { background: rgba(210,153,34,.18); color: var(--amber); }
.cpb-st-red   { background: rgba(248,81,73,.18); color: var(--red); font-weight: 600; }
.cpb-st-muted { background: var(--bg-elev-2); color: var(--text-muted); }

.cpb-input { display: inline-flex; gap: 6px; align-items: center; font-size: 12px; color: var(--text-muted); }
.cpb-input input {
  background: var(--bg-elev-2); color: var(--text);
  border: 1px solid var(--border-soft); border-radius: 3px;
  padding: 4px 8px; font-size: 12px; width: 130px;
  text-align: right; font-variant-numeric: tabular-nums;
}
.cpb-runway-card {
  padding: 12px 14px; border-radius: 6px; font-size: 13px; line-height: 1.5;
}
.cpb-runway-green { background: rgba(63,185,80,.10); border: 1px solid rgba(63,185,80,.30); }
.cpb-runway-amber { background: rgba(210,153,34,.10); border: 1px solid rgba(210,153,34,.30); }
.cpb-runway-red   { background: rgba(248,81,73,.10); border: 1px solid rgba(248,81,73,.40); font-weight: 600; }
.cpb-runway-info  { background: var(--bg-elev-2); border: 1px solid var(--border-soft); color: var(--text-muted); }

.cpb-slider-row { display: flex; align-items: center; gap: 14px; margin: 10px 0 14px; }
.cpb-slider-row input[type=range] { flex: 1; max-width: 360px; }
.cpb-slider-hint { font-size: 11px; color: var(--text-muted); }
.cpb-scenarios { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.cpb-sc-card {
  background: var(--bg-elev-2); border: 1px solid var(--border-soft);
  border-radius: 6px; padding: 10px 12px;
}
.cpb-sc-label { font-size: 10px; text-transform: uppercase; color: var(--text-muted); letter-spacing: .06em; margin-bottom: 4px; }
.cpb-sc-val { font-size: 18px; font-weight: 700; font-family: 'JetBrains Mono', ui-monospace, monospace; color: var(--text); }
.cpb-sc-sub { font-size: 10px; color: var(--text-muted); margin-top: 2px; }

@media (max-width: 900px) {
  .cpb-hero       { grid-template-columns: 1fr; }
  .cpb-scenarios  { grid-template-columns: 1fr 1fr; }
}

/* ──────────────────────────────────────────────────────────
   Day 26b — CFO Cockpit
   ────────────────────────────────────────────────────────── */
.pg-cfo { display: flex; flex-direction: column; gap: 16px; }
.cfo-hero { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.cfo-card {
  background: var(--bg-elev); border: 1px solid var(--border-soft);
  border-radius: 6px; padding: 10px 12px;
}
.cfo-label { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-bottom: 4px; }
.cfo-value { font-size: 18px; font-weight: 700; font-family: 'JetBrains Mono', ui-monospace, monospace; color: var(--text); }
.cfo-sub   { font-size: 10px; color: var(--text-muted); margin-top: 4px; line-height: 1.4; }
.cfo-card-profit { border-top: 2px solid var(--green); }
.cfo-card-loss   { border-top: 2px solid var(--red); }
.cfo-card-green  { border-top: 2px solid var(--green); }
.cfo-card-amber  { border-top: 2px solid var(--amber); }
.cfo-card-red    { border-top: 2px solid var(--red); }
.cfo-card-muted  { border-top: 2px solid var(--border); }
.cfo-warn { display: inline-block; padding: 1px 6px; border-radius: 8px; background: rgba(210,153,34,.18); color: var(--amber); font-size: 9px; margin-left: 4px; }

.cfo-status-card { padding: 16px 18px; border-radius: 8px; display: flex; gap: 16px; align-items: flex-start; }
.cfo-status-emoji { font-size: 36px; line-height: 1; }
.cfo-status-body h2 { margin: 0 0 4px; font-size: 18px; }
.cfo-status-body p  { margin: 0 0 8px; color: var(--text-muted); font-size: 13px; }
.cfo-status-body ul { margin: 0; padding-left: 20px; font-size: 13px; }
.cfo-status-body li { margin: 2px 0; }
.cfo-status-green { background: rgba(63,185,80,.06); border: 1px solid rgba(63,185,80,.30); }
.cfo-status-amber { background: rgba(210,153,34,.06); border: 1px solid rgba(210,153,34,.30); }
.cfo-status-red   { background: rgba(248,81,73,.06); border: 1px solid rgba(248,81,73,.40); }

.cfo-block { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; }
.cfo-block-head h3 { margin: 0 0 12px; font-size: 13px; }
.cfo-empty { color: var(--text-muted); font-style: italic; padding: 12px; text-align: center; }

.cfo-levers { display: flex; flex-direction: column; gap: 8px; }
.cfo-lever { display: grid; grid-template-columns: 110px 1fr 32px; gap: 12px; padding: 10px 12px; background: var(--bg-elev-2); border-radius: 4px; align-items: center; }
.cfo-lever-impact { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 16px; color: var(--green); }
.cfo-lever-danger .cfo-lever-impact { color: var(--red); }
.cfo-lever-warn   .cfo-lever-impact { color: var(--amber); }
.cfo-lever-title { font-weight: 600; margin-bottom: 2px; font-size: 13px; }
.cfo-lever-mech { font-size: 11px; color: var(--text-muted); margin-bottom: 4px; }
.cfo-lever-action { font-size: 12px; }
.cfo-lever-drill { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 4px; background: var(--bg-elev); color: var(--accent); font-size: 14px; }
.cfo-lever-drill:hover { background: var(--accent); color: #03152e; text-decoration: none; }

.cfo-trends { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cfo-trend { background: var(--bg-elev-2); padding: 10px 12px; border-radius: 6px; }
.cfo-trend-label { font-size: 11px; color: var(--text-muted); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .04em; }
.cfo-trend-foot { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.cfo-spark-green   { color: var(--green); }
.cfo-spark-cyan    { color: var(--accent); }
.cfo-spark-magenta { color: var(--accent-2); }

.cfo-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
.cfo-tile {
  background: var(--bg-elev-2); border: 1px solid var(--border-soft); border-radius: 4px;
  padding: 10px 12px; color: var(--text); font-size: 12px;
  transition: border-color 120ms, color 120ms;
}
.cfo-tile:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }

@media (max-width: 1100px) { .cfo-hero { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .cfo-hero { grid-template-columns: repeat(2, 1fr); } .cfo-trends { grid-template-columns: 1fr; } }

/* ──────────────────────────────────────────────────────────
   Day 26b — LTV:CAC Matrix
   ────────────────────────────────────────────────────────── */
.pg-ltv-cac { display: flex; flex-direction: column; gap: 16px; }
.lc-hero-card { padding: 18px 20px; border-radius: 8px; background: var(--bg-elev); border: 1px solid var(--border-soft); }
.lc-hero-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; }
.lc-hero-value { font-size: 36px; font-weight: 800; font-family: 'JetBrains Mono', monospace; color: var(--text); letter-spacing: -.01em; }
.lc-hero-sub { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.lc-hero-green { border-top: 3px solid var(--green); }
.lc-hero-amber { border-top: 3px solid var(--amber); }
.lc-hero-red   { border-top: 3px solid var(--red); }
.lc-hero-cyan  { border-top: 3px solid var(--accent); }
.lc-hero-muted { border-top: 3px solid var(--border); }

.lc-block { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; }
.lc-block-head h3 { margin: 0 0 10px; font-size: 13px; }
.lc-channel .num, .lc-matrix .num { text-align: right; font-variant-numeric: tabular-nums; }
.lc-channel-cust { color: var(--text-muted); font-size: 11px; }
.lc-st-pill { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; }
.lc-st-pill-green { background: rgba(63,185,80,.18); color: var(--green); }
.lc-st-pill-amber { background: rgba(210,153,34,.18); color: var(--amber); }
.lc-st-pill-red   { background: rgba(248,81,73,.18); color: var(--red); }
.lc-st-pill-cyan  { background: rgba(0,217,255,.18); color: var(--accent); }
.lc-st-pill-muted { background: var(--bg-elev-2); color: var(--text-muted); }
.lc-st-green { color: var(--green); }
.lc-st-amber { color: var(--amber); }
.lc-st-red   { color: var(--red); }
.lc-st-cyan  { color: var(--accent); }
.lc-cell { font-weight: 600; }
.lc-cell-green { color: var(--green); }
.lc-cell-amber { color: var(--amber); }
.lc-cell-red   { color: var(--red); }
.lc-cell-cyan  { color: var(--accent); }
.lc-cell-inf   { color: var(--green); font-weight: 700; }
.lc-rec { padding: 8px 12px; border-radius: 4px; margin-bottom: 6px; font-size: 13px; }
.lc-rec-green { background: rgba(63,185,80,.10); border-left: 3px solid var(--green); }
.lc-rec-amber { background: rgba(210,153,34,.10); border-left: 3px solid var(--amber); }
.lc-rec-red   { background: rgba(248,81,73,.10); border-left: 3px solid var(--red); }
.lc-rec-cyan  { background: rgba(0,217,255,.10); border-left: 3px solid var(--accent); }
.lc-pricing-card { padding: 12px 14px; background: var(--bg-elev-2); border-radius: 6px; font-size: 13px; line-height: 1.5; }

/* ──────────────────────────────────────────────────────────
   Day 26b — Portfolio Markup
   ────────────────────────────────────────────────────────── */
.pg-markup { display: flex; flex-direction: column; gap: 16px; }
.mk-hero-card { padding: 18px 20px; border-radius: 8px; background: var(--bg-elev); border: 1px solid var(--border-soft); border-top: 3px solid var(--accent); }
.mk-hero-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; }
.mk-hero-value { font-size: 36px; font-weight: 800; font-family: 'JetBrains Mono', monospace; color: var(--text); }
.mk-hero-sub { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.mk-hero-green { border-top-color: var(--green); }
.mk-hero-amber { border-top-color: var(--amber); }
.mk-hero-red   { border-top-color: var(--red); }
.mk-hero-cyan  { border-top-color: var(--accent); }

.mk-block { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; }
.mk-block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.mk-block-head h3 { margin: 0; font-size: 13px; }
.mk-actions { display: inline-flex; gap: 12px; flex-wrap: wrap; align-items: center; font-size: 12px; color: var(--text-muted); }
.mk-actions select { background: var(--bg-elev-2); color: var(--text); border: 1px solid var(--border-soft); border-radius: 3px; padding: 4px 8px; font-size: 12px; }
.mk-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.mk-cat { color: var(--text-muted); font-size: 11px; }
.mk-ratio { font-weight: 700; }
.mk-ratio-red     { color: var(--red); }
.mk-ratio-amber   { color: var(--amber); }
.mk-ratio-neutral { color: var(--text); }
.mk-ratio-green   { color: var(--green); }
.mk-ratio-cyan    { color: var(--accent); }

.mk-block-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mk-outlier-card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; }
.mk-outlier-card h4 { margin: 0 0 10px; font-size: 13px; }
.mk-outlier-under { border-left: 3px solid var(--red); }
.mk-outlier-over  { border-left: 3px solid var(--accent); }
.mk-outlier-count { font-size: 13px; color: var(--text); margin-bottom: 8px; }
.mk-outlier-row   { font-size: 12px; padding: 4px 0; border-bottom: 1px dashed var(--border-soft); color: var(--text-muted); }
.mk-outlier-empty { color: var(--text-muted); font-style: italic; padding: 8px 0; }
.mk-outlier-hint  { font-size: 12px; color: var(--text-muted); margin: 8px 0 0; }

.mk-procurement { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.mk-procurement label { font-size: 12px; color: var(--text-muted); display: inline-flex; gap: 6px; align-items: center; }
.mk-procurement input { background: var(--bg-elev-2); color: var(--text); border: 1px solid var(--border-soft); border-radius: 3px; padding: 5px 8px; font-size: 12px; width: 110px; text-align: right; font-variant-numeric: tabular-nums; }
.mk-proc-out { font-size: 14px; padding: 8px 12px; background: var(--bg-elev-2); border-radius: 4px; flex: 1; min-width: 200px; }

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

/* ──────────────────────────────────────────────────────────
   Day 26b — Cohort Cube
   ────────────────────────────────────────────────────────── */
.pg-cohort-cube { display: flex; flex-direction: column; gap: 12px; }
.cc-controls { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.cc-toggle { display: inline-flex; gap: 0; border: 1px solid var(--border-soft); border-radius: 4px; overflow: hidden; }
.cc-tab { padding: 6px 12px; background: var(--bg-elev); color: var(--text-muted); border: 0; border-right: 1px solid var(--border-soft); cursor: pointer; font-size: 12px; }
.cc-tab:last-child { border-right: 0; }
.cc-tab:hover { background: var(--bg-elev-2); color: var(--text); }
.cc-tab.on { background: var(--accent-2); color: white; }
.cc-segment { font-size: 12px; color: var(--text-muted); display: inline-flex; gap: 6px; align-items: center; }
.cc-segment select { background: var(--bg-elev-2); color: var(--text); border: 1px solid var(--border-soft); border-radius: 3px; padding: 4px 8px; font-size: 12px; }
.cc-meta { font-size: 11px; color: var(--text-muted); margin: 0; }
.cc-frame { overflow-x: auto; }
.cc-table { font-size: 11px; }
.cc-table th, .cc-table td { padding: 4px 6px; }
.cc-cell { font-variant-numeric: tabular-nums; min-width: 56px; }
.cc-cell-empty { color: var(--text-muted); }
.cc-cell-pred  { font-style: italic; opacity: .85; outline: 1px dashed var(--border-soft); outline-offset: -2px; }

.cc-block { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; }
.cc-block-head h3 { margin: 0 0 10px; font-size: 13px; }
.cc-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.cc-summary-card { background: var(--bg-elev-2); border: 1px solid var(--border-soft); border-radius: 6px; padding: 10px 12px; font-size: 12px; }
.cc-summary-cohort { font-weight: 700; font-size: 13px; color: var(--accent); margin-bottom: 4px; }
.cc-summary-size   { color: var(--text-muted); margin-bottom: 6px; font-size: 11px; }
.cc-summary-row    { padding: 2px 0; }
.cc-summary-proj   { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--border-soft); color: var(--accent-2); font-size: 11px; }

/* ──────────────────────────────────────────────────────────
   Day 26b — Scenario Planner
   ────────────────────────────────────────────────────────── */
.pg-scenario { display: flex; flex-direction: column; gap: 14px; }
.sp-tabs { display: inline-flex; gap: 0; border: 1px solid var(--border-soft); border-radius: 6px; overflow: hidden; }
.sp-tab { padding: 8px 18px; background: var(--bg-elev); color: var(--text-muted); border: 0; border-right: 1px solid var(--border-soft); cursor: pointer; font-size: 13px; font-weight: 600; }
.sp-tab:last-child { border-right: 0; }
.sp-tab:hover { background: var(--bg-elev-2); color: var(--text); }
.sp-tab.on { background: var(--accent-2); color: white; }

.sp-block { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; }
.sp-block-head h3 { margin: 0 0 10px; font-size: 13px; }

.sp-assumptions { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.sp-input { display: flex; gap: 8px; align-items: center; background: var(--bg-elev-2); padding: 8px 10px; border-radius: 4px; }
.sp-input-label { flex: 1; font-size: 12px; color: var(--text-muted); }
.sp-input input { background: var(--bg-elev); color: var(--text); border: 1px solid var(--border-soft); border-radius: 3px; padding: 4px 8px; font-size: 13px; width: 70px; text-align: right; font-variant-numeric: tabular-nums; }
.sp-input-suffix { font-size: 11px; color: var(--text-muted); width: 18px; }

.sp-canvas-wrap { height: 280px; }
.sp-forecast th, .sp-forecast td { font-size: 11px; padding: 4px 8px; }
.sp-forecast .num { text-align: right; font-variant-numeric: tabular-nums; }
.sp-forecast .bold { font-weight: 700; }

.sp-decision { padding: 10px 14px; border-radius: 4px; margin-bottom: 8px; font-size: 13px; line-height: 1.5; }
.sp-decision-green { background: rgba(63,185,80,.08); border-left: 3px solid var(--green); }
.sp-decision-amber { background: rgba(210,153,34,.08); border-left: 3px solid var(--amber); }
.sp-decision-red   { background: rgba(248,81,73,.08); border-left: 3px solid var(--red); }

/* ──────────────────────────────────────────────────────────
   Patch 02 — Google Ads cockpit
   ────────────────────────────────────────────────────────── */
.ga-block { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; }
.ga-block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.ga-block-head h3 { margin: 0; font-size: 13px; }
.ga-block-hint { font-size: 11px; color: var(--text-muted); }
.ga-canvas-wrap { position: relative; }
.ga-donut-legend { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.ga-donut-row { display: grid; grid-template-columns: 14px 100px 1fr; align-items: center; gap: 8px; padding: 2px 0; }
.ga-donut-dot { width: 10px; height: 10px; border-radius: 50%; }
.ga-donut-label { font-weight: 600; }
.ga-donut-meta  { color: var(--text-muted); font-variant-numeric: tabular-nums; text-align: right; }
.ga-scatter-foot { font-size: 11px; color: var(--text-muted); margin-top: 6px; }

.ga-collapsible { padding: 10px 16px; }
.ga-collapsible[open] { padding-bottom: 16px; }
.ga-block-summary { cursor: pointer; user-select: none; padding: 6px 0; list-style: none; display: flex; align-items: center; gap: 12px; }
.ga-block-summary::-webkit-details-marker { display: none; }
.ga-block-summary span:first-child { font-weight: 600; font-size: 13px; }

.ga-alerts { display: flex; flex-direction: column; gap: 6px; }
.ga-alert { padding: 8px 12px; border-radius: 4px; font-size: 13px; line-height: 1.5; }
.ga-alert-red    { background: rgba(248,81,73,.08);  border-left: 3px solid var(--red); }
.ga-alert-amber  { background: rgba(210,153,34,.08); border-left: 3px solid var(--amber); }
.ga-alert-green  { background: rgba(63,185,80,.08);  border-left: 3px solid var(--green); }
.ga-alert-info   { background: var(--bg-elev-2); color: var(--text-muted); }

/* ──────────────────────────────────────────────────────────
   Patch 03 — Meta Ads cockpit
   ────────────────────────────────────────────────────────── */
.meta-truth {
  background: linear-gradient(180deg, rgba(248,81,73,0.04), rgba(63,185,80,0.04));
  border: 1px solid var(--border);
  border-left: 3px solid var(--amber);
  border-radius: 8px; padding: 14px 16px;
}
.meta-truth-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.meta-truth-head h3 { margin: 0; font-size: 13px; }
.meta-truth-hint { font-size: 11px; color: var(--text-muted); }
.meta-truth-rows { display: flex; flex-direction: column; gap: 6px; }
.meta-truth-row {
  display: grid; grid-template-columns: 220px 90px 1fr;
  align-items: baseline; gap: 12px; padding: 6px 10px; border-radius: 4px;
  font-size: 13px;
}
.meta-truth-label { color: var(--text-muted); }
.meta-truth-value { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 18px; text-align: right; }
.meta-truth-tag   { color: var(--text-muted); font-size: 12px; }
.meta-truth-warn  { background: rgba(248,81,73,.08);  }
.meta-truth-warn .meta-truth-value { color: var(--red); }
.meta-truth-clean { background: rgba(63,185,80,.08); }
.meta-truth-clean .meta-truth-value { color: var(--green); }
.meta-truth-insight { background: rgba(124,92,255,.08); }
.meta-truth-insight .meta-truth-value { color: var(--accent-2); }
.meta-truth-quote { margin-top: 10px; font-size: 12px; color: var(--text-muted); font-style: italic; padding: 6px 10px; border-left: 2px dashed var(--border-soft); }

.meta-funnel { display: flex; flex-direction: column; gap: 6px; padding: 8px 0; }
.meta-funnel-stage { position: relative; }
.meta-funnel-bar {
  height: 30px; background: linear-gradient(90deg, var(--accent-2) 0%, var(--accent) 100%);
  border-radius: 3px; opacity: 0.55;
  transition: width 200ms;
}
.meta-funnel-meta {
  position: absolute; top: 0; left: 8px; right: 8px; height: 30px;
  display: flex; align-items: center; gap: 12px; font-size: 12px;
}
.meta-funnel-name { font-weight: 600; min-width: 100px; }
.meta-funnel-val  { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; }
.meta-funnel-rate { color: var(--text-muted); font-family: 'JetBrains Mono', monospace; margin-left: auto; }
.meta-funnel-insight { margin-top: 8px; }
.meta-funnel-warn { font-size: 12px; color: var(--amber); padding: 4px 0; }
.meta-funnel-info { font-size: 12px; color: var(--text-muted); padding: 4px 0; font-style: italic; }
.meta-limitations-text { font-size: 12px; color: var(--text-muted); line-height: 1.6; padding: 4px 0; }

/* ──────────────────────────────────────────────────────────
   Patch 04 — Per-product surfacing (Sales / Leaks / Cohorts / AI Recs)
   ────────────────────────────────────────────────────────── */
.pp-block {
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: 8px; padding: 14px 16px; margin-top: 12px;
}
.pp-block-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 10px; flex-wrap: wrap;
}
.pp-block-head h3 { margin: 0; font-size: 13px; }
.pp-block-hint { font-size: 11px; color: var(--text-muted); }
.pp-list-title { margin: 0 0 6px; font-size: 12px; font-weight: 600; color: var(--text-muted); }
.pp-margin-low { color: var(--red); font-weight: 600; }
.pp-good { color: var(--green); }
.pp-bad  { color: var(--red); }

.pp-kill-summary {
  font-size: 13px; padding: 10px 12px; background: var(--bg-elev-2);
  border-radius: 4px; margin-bottom: 10px; line-height: 1.5;
}
.leak-total-bad { color: var(--red); font-weight: 700; }

.pp-actions {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}
.pp-action-card {
  background: var(--bg-elev-2); border: 1px solid var(--border-soft);
  border-radius: 6px; padding: 10px 12px;
}
.pp-action-card h4 { margin: 0 0 6px; font-size: 12px; display: flex; gap: 6px; align-items: center; }
.pp-action-count {
  display: inline-block; padding: 1px 6px; border-radius: 8px;
  background: var(--bg-elev); font-size: 10px; color: var(--text-muted);
}
.pp-action-scale    { border-top: 2px solid var(--green); }
.pp-action-kill     { border-top: 2px solid var(--red); }
.pp-action-test     { border-top: 2px solid var(--amber); }
.pp-action-optimize { border-top: 2px solid var(--accent); }
.pp-action-rows { list-style: none; padding: 0; margin: 0; font-size: 11px; line-height: 1.5; }
.pp-action-rows li { padding: 4px 0; border-bottom: 1px dashed var(--border-soft); }
.pp-action-rows li:last-child { border-bottom: 0; }
.pp-action-empty { color: var(--text-muted); font-style: italic; font-size: 11px; padding: 4px 0; }

/* ──────────────────────────────────────────────────────────
   Patch 07 — Demo Flow overlay + spotlight
   ────────────────────────────────────────────────────────── */
.tb-demo {
  background: var(--bg-elev-2); border: 1px solid var(--border);
  color: var(--text); padding: 5px 12px; border-radius: 4px;
  font-size: 12px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: border-color 200ms, background 200ms;
}
.tb-demo:hover { border-color: var(--accent-2); background: rgba(124,92,255,.10); }

body.demo-mode .demo-spotlight {
  position: relative;
  z-index: 90;
  box-shadow: 0 0 0 4px rgba(0, 217, 255, 0.6), 0 0 80px 12px rgba(0, 217, 255, 0.30);
  border-radius: 8px;
  animation: demo-spotlight-pulse 2.4s ease-in-out infinite;
}
@keyframes demo-spotlight-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(0, 217, 255, 0.4), 0 0 60px 8px rgba(0, 217, 255, 0.20); }
  50%      { box-shadow: 0 0 0 5px rgba(0, 217, 255, 0.8), 0 0 100px 16px rgba(0, 217, 255, 0.45); }
}

#demo-overlay {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 420px;
  max-width: calc(100vw - 48px);
  background: var(--bg-elev);
  border: 1px solid rgba(0, 217, 255, 0.55);
  border-radius: 12px;
  padding: 18px 20px;
  z-index: 1000;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.50);
  font-family: 'Inter', system-ui, sans-serif;
}
.demo-progress { display: flex; gap: 4px; margin-bottom: 14px; }
.demo-progress-step {
  flex: 1; height: 4px; background: var(--bg-elev-2); border-radius: 2px;
  transition: background 200ms;
}
.demo-progress-step.active { background: var(--accent); box-shadow: 0 0 8px rgba(0,217,255,0.6); }
.demo-progress-step.done   { background: var(--green); }

.demo-title { margin: 0 0 8px; font-size: 14px; color: var(--accent); letter-spacing: .03em; }
.demo-body  { font-size: 13px; line-height: 1.55; color: var(--text); }
.demo-body p { margin: 0 0 8px; }
.demo-body strong { color: var(--accent); }
.demo-next-up { color: var(--text-muted) !important; font-style: italic; font-size: 12px; margin-top: 10px !important; }

.demo-controls {
  display: flex; align-items: center; gap: 8px; margin-top: 14px;
  border-top: 1px solid var(--border-soft); padding-top: 12px;
}
.demo-controls button {
  background: var(--bg-elev-2); border: 1px solid var(--border-soft);
  color: var(--text); padding: 5px 12px; border-radius: 4px;
  font-size: 12px; cursor: pointer; transition: border-color 120ms;
}
.demo-controls button:hover { border-color: var(--accent); color: var(--accent); }
.demo-controls .demo-step-label { flex: 1; text-align: center; font-size: 11px; color: var(--text-muted); }
.demo-controls .demo-exit { margin-left: auto; }
.demo-controls .demo-exit:hover { border-color: var(--red); color: var(--red); }

/* ──────────────────────────────────────────────────────────
   Patch 08 — ROI Calculator (in-hub)
   ────────────────────────────────────────────────────────── */
.pg-calc { display: flex; flex-direction: column; gap: 16px; }
.calc-layout { gap: 16px; }
.calc-block {
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: 8px; padding: 14px 16px;
}
.calc-block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.calc-block-head h3 { margin: 0; font-size: 13px; }
.calc-block-hint { font-size: 11px; color: var(--text-muted); }

.calc-inputs { display: flex; flex-direction: column; gap: 8px; }
.calc-input { display: grid; grid-template-columns: 180px 1fr; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px dashed var(--border-soft); }
.calc-input span { color: var(--text-muted); font-size: 12px; }
.calc-input input {
  background: var(--bg-elev-2); color: var(--text);
  border: 1px solid var(--border-soft); border-radius: 3px;
  padding: 5px 8px; font-size: 13px; width: 130px;
  text-align: right; font-variant-numeric: tabular-nums;
}

.calc-result { background: linear-gradient(180deg, rgba(63,185,80,0.05), rgba(0,0,0,0)); border-color: rgba(63,185,80,0.30); }
.calc-headline { text-align: center; padding: 12px 0; margin-bottom: 12px; border-bottom: 1px dashed var(--border-soft); }
.calc-headline-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; }
.calc-headline-value { font-size: 42px; font-weight: 800; font-family: 'JetBrains Mono', ui-monospace, monospace; color: var(--green); margin: 6px 0; letter-spacing: -.01em; }
.calc-headline-sub { font-size: 12px; color: var(--text-muted); }
.calc-headline-sub strong { color: var(--text); }

.calc-breakdown .num { text-align: right; font-variant-numeric: tabular-nums; }
.calc-recovered { color: var(--green); font-weight: 700; }

.calc-footer { margin-top: 12px; padding: 10px 12px; background: var(--bg-elev-2); border-radius: 4px; font-size: 13px; color: var(--text-muted); }
.calc-footer .calc-roi { color: var(--accent); font-size: 16px; }

/* ──────────────────────────────────────────────────────────
   Patch 10 — Filter breadcrumb ribbon
   ────────────────────────────────────────────────────────── */
.fb-root {
  position: sticky; top: 0; z-index: 25;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border-soft);
  padding: 6px 16px;
  display: flex; align-items: center; gap: 10px;
  font-size: 12px;
  flex-wrap: wrap;
}
.fb-label { color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; font-size: 10px; }
.fb-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; flex: 1; }
.fb-empty { color: var(--text-muted); font-style: italic; }
.fb-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--bg-elev-2); border: 1px solid var(--border-soft);
  border-radius: 12px; padding: 2px 4px 2px 10px; line-height: 1.4;
}
.fb-chip-key   { color: var(--text-muted); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }
.fb-chip-val   { color: var(--text); font-weight: 600; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-chip-x {
  background: transparent; border: 0; color: var(--text-muted); cursor: pointer;
  width: 18px; height: 18px; border-radius: 50%; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1; font-size: 14px; transition: background 120ms, color 120ms;
}
.fb-chip-x:hover { background: var(--red); color: white; }
.fb-reset {
  background: var(--bg-elev-2); border: 1px solid var(--border-soft);
  color: var(--text-muted); padding: 3px 10px; border-radius: 4px;
  font-size: 11px; cursor: pointer; margin-left: auto;
  transition: border-color 120ms, color 120ms;
}
.fb-reset:hover { border-color: var(--red); color: var(--red); }
.fb-root.fb-active .fb-reset { color: var(--text); border-color: var(--accent); }

/* ──────────────────────────────────────────────────────────
   Patch 10 — Metric tooltip + ? info icon
   ────────────────────────────────────────────────────────── */
.metric-info {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; padding: 0;
  background: var(--bg-elev-2); border: 1px solid var(--border-soft);
  border-radius: 50%; color: var(--text-muted); cursor: help;
  font-size: 9px; font-weight: 700; line-height: 1; vertical-align: middle;
  transition: background 120ms, color 120ms, border-color 120ms;
}
.metric-info:hover, .metric-info:focus {
  background: var(--accent); color: white; border-color: var(--accent);
  outline: none;
}
.metric-tooltip {
  position: fixed;
  z-index: 9999;
  width: 280px;
  background: var(--bg-elev); color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px 14px;
  font-size: 12px;
  line-height: 1.5;
  box-shadow: 0 10px 28px rgba(0,0,0,0.50);
  pointer-events: none;
}
.metric-tooltip .mt-title   { font-size: 13px; font-weight: 700; color: var(--accent); margin-bottom: 4px; }
.metric-tooltip .mt-formula { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; color: var(--text-muted); margin-bottom: 6px; }
.metric-tooltip .mt-formula code { background: var(--bg-elev-2); padding: 1px 5px; border-radius: 3px; }
.metric-tooltip .mt-explain { color: var(--text); margin-bottom: 4px; }
.metric-tooltip .mt-warn    { color: var(--amber); font-style: italic; margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--border-soft); }

/* ──────────────────────────────────────────────────────────
   Patch 10 — Side-scroll independence
   Wide-table wrappers handle their own horizontal scroll without dragging
   the entire page. Existing .table-frame already scrolls; touch-action keeps
   touch panning isolated to the table.
   ────────────────────────────────────────────────────────── */
.scrollable-table-wrapper,
.table-frame {
  overflow-x: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) var(--bg-elev-2);
}
.scrollable-table-wrapper::-webkit-scrollbar,
.table-frame::-webkit-scrollbar             { height: 8px; }
.scrollable-table-wrapper::-webkit-scrollbar-thumb,
.table-frame::-webkit-scrollbar-thumb       { background: var(--accent); border-radius: 4px; }
.scrollable-table-wrapper::-webkit-scrollbar-track,
.table-frame::-webkit-scrollbar-track       { background: var(--bg-elev-2); }

/* ──────────────────────────────────────────────────────────
   Patch 10 — Sum row alignment fix (Sales / Менеджери / legacy)
   The Day 25 generic tfoot rule covers .sum-row но some legacy tables had
   .num + non-num cells mixed — explicit override ensures alignment matches
   data rows column-by-column.
   ────────────────────────────────────────────────────────── */
.pg-table tfoot tr.sum-row td,
.pg-table tfoot tr.sum-row th {
  font-weight: 700;
  border-top: 2px solid var(--border);
  background: var(--bg-elev-2);
  vertical-align: middle;
}
.pg-table tfoot tr.sum-row td.num,
.pg-table tfoot tr.sum-row th.num,
.pg-table tfoot tr.sum-row td.bold {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.pg-table tfoot tr.sum-row td.label {
  text-align: left;
  color: var(--text-muted);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.06em;
}

/* ════════════════════════════════════════════════════════════════════
   PATCH 12 PART D — Claude Design skin layer
   Applied AFTER all existing rules. Overrides spacing/radius/typography
   per TOKENS_EXTRACTED.md §3-§4. Component-specific classes (.alert,
   .kpi.featured, .mode-pill, .filter-chip, .ai-card, .anom, .mgr-row,
   .nav-item) added for js/pages/*.js to opt into when ready.
   ════════════════════════════════════════════════════════════════════ */

/* ── Layout — sidebar 232px (was 240px), tighter content gap ── */
.app { grid-template-columns: 232px 1fr; }
.app-main > #app-status { padding: 16px 20px; }
#app-outlet {
  padding: 16px 20px 40px;
  display: flex; flex-direction: column;
  gap: 16px;
  max-width: 1600px;
}

/* ── Topbar tighter ── */
.tb-root { padding: 10px 20px; border-bottom: 1px solid var(--line-soft); }

/* ── Tighter card radii / padding (most existing components) ── */
.kpi-card,
.cfo-card, .cfo-priorities,
.lc-hero-card, .lc-block,
.mk-hero-card, .mk-block, .mk-outlier-card,
.cc-block, .sp-block, .calc-block,
.cpb-hero-card, .cpb-block, .cpb-sc-card,
.rltv-card, .rltv-block,
.rcm-card, .rcm-table-wrap,
.pnl-block, .pnl-block-collapsible,
.ga-block, .pp-block,
.meta-truth,
.leaks-tofu, .leak-card,
.hero-card, .hero-panel,
.table-frame {
  border-radius: 10px;
}
.kpi-card,
.cfo-card,
.lc-hero-card, .lc-block,
.mk-hero-card, .mk-block,
.mk-outlier-card,
.cc-block, .sp-block, .calc-block,
.cpb-hero-card, .cpb-block,
.rltv-card, .rltv-block,
.rcm-card,
.pnl-block,
.ga-block, .pp-block {
  padding: 14px 14px 12px;
}
.pg-grid, .pg-cols-2, .pg-cols-3 { gap: 10px; }

/* ── Sidebar refresh — Claude Design ── */
.sb-root { background: var(--bg-0); border-right: 1px solid var(--line-soft); padding: 14px 0 24px; font-size: 12.5px; }
.sb-brand { padding: 6px 16px 16px; border-bottom: 0; }
.sb-logo { font-weight: 700; font-size: 15px; color: var(--ink-0); letter-spacing: -0.01em; }
.sb-version { background: var(--bg-2); color: var(--ink-2); font-family: 'JetBrains Mono', monospace; font-size: 10px; padding: 2px 6px; border-radius: 4px; font-weight: 500; }
.sb-nav { padding: 8px 4px 16px; }
.sb-group { padding: 8px 12px 4px; }
.sb-group > summary { padding: 4px 6px; text-transform: uppercase; font-size: 10.5px; letter-spacing: 0.08em; color: var(--ink-3); font-weight: 600; }
.sb-group-count { background: var(--bg-2); color: var(--ink-2); font-family: 'JetBrains Mono', monospace; font-size: 10px; padding: 1px 5px; border-radius: 4px; font-weight: 500; }
.sb-item { padding: 6px 8px; border-radius: 6px; color: var(--ink-1); font-size: 12.5px; }
.sb-item:hover { background: var(--bg-1); text-decoration: none; }
.sb-item.active {
  background: linear-gradient(90deg, var(--brand-d) -10%, transparent 90%);
  color: var(--ink-0);
  box-shadow: inset 2px 0 0 var(--brand);
}
.sb-tag { font-size: 9px; padding: 1px 5px; border-radius: 3px; font-family: 'JetBrains Mono', monospace; letter-spacing: .03em; }
.sb-tag.live { background: color-mix(in oklch, var(--good) 14%, var(--bg-2)); color: var(--good); }
.sb-tag.soon { background: var(--bg-2); color: var(--ink-3); }

/* ── Topbar buttons restyled ── */
.tb-actions button,
.tb-mode, .tb-demo,
.btn, .lp-btn, .btn-ghost {
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  color: var(--ink-1);
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}
.tb-actions button:hover, .tb-mode:hover, .tb-demo:hover { border-color: var(--brand); color: var(--brand); }
.btn.primary { background: var(--ink-0); color: var(--bg-0); border-color: transparent; font-weight: 600; }
.btn.demo, .lp-btn-primary {
  background: linear-gradient(135deg, var(--brand) 0%, var(--info) 100%);
  color: var(--bg-0);
  border-color: transparent;
  font-weight: 600;
}

/* ── Mode pills (period_mode + metric_mode) ── */
.dp-mode {
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  color: var(--ink-2);
  padding: 3px 9px;
  border-radius: 14px;
  font-size: 11px;
}
.dp-mode.on,
.dp-mode[data-period-mode="expected"].on {
  background: color-mix(in oklch, var(--warn) 18%, var(--bg-1));
  border-color: color-mix(in oklch, var(--warn) 35%, var(--line));
  color: var(--warn);
}
.dp-mode[data-period-mode="real"].on {
  background: color-mix(in oklch, var(--good) 18%, var(--bg-1));
  border-color: color-mix(in oklch, var(--good) 35%, var(--line));
  color: var(--good);
}
.dp-mode[data-period-mode="total"].on {
  background: color-mix(in oklch, var(--info) 18%, var(--bg-1));
  border-color: color-mix(in oklch, var(--info) 35%, var(--line));
  color: var(--info);
}
.dp-mode[data-metric-mode="revenue"].on,
.dp-mode[data-metric-mode="profit"].on {
  background: color-mix(in oklch, var(--brand) 18%, var(--bg-1));
  border-color: color-mix(in oklch, var(--brand) 35%, var(--line));
  color: var(--brand);
}

/* ── Filter chips DASHED border (Claude Design signature) ── */
.fb-chip {
  background: var(--bg-2);
  border: 1px dashed var(--line);    /* DASHED */
  padding: 3px 8px 3px 10px;
  border-radius: 14px;
  color: var(--ink-1);
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
}
.fb-chip-key { color: var(--ink-3); }
.fb-chip-val { color: var(--ink-1); }
.fb-chip-x { color: var(--ink-3); }
.fb-reset {
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  padding: 3px 9px;
  border-radius: 14px;
  font-size: 11px;
  color: var(--ink-2);
}

/* ── Hero alert variants (.alert.bad / .warn / .muted) ── */
.alert {
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 14px 14px 12px;
  min-height: 168px;
  display: flex; flex-direction: column; gap: 8px;
  position: relative;
}
.alert.bad {
  border-color: color-mix(in oklch, var(--bad) 30%, var(--line));
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in oklch, var(--bad) 12%, transparent) 0%, transparent 60%),
    var(--bg-2);
}
.alert.warn {
  border-color: color-mix(in oklch, var(--warn) 25%, var(--line));
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in oklch, var(--warn) 10%, transparent) 0%, transparent 60%),
    var(--bg-2);
}
.alert.muted { background: var(--bg-2); }
.alert .big {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  font-size: 30px;
  letter-spacing: -0.02em;
}
.alert.bad .big  { color: var(--bad); }
.alert.warn .big { color: var(--warn); }
.alert.muted .big { color: var(--ink-1); }

/* ── KPI .featured (Revenue spotlight) ── */
.kpi.featured,
.kpi-card.kpi-card--revenue,
.kpi-card[data-type="revenue"] {
  background: linear-gradient(180deg, color-mix(in oklch, var(--brand) 8%, var(--bg-1)) 0%, var(--bg-1) 60%);
  border-color: color-mix(in oklch, var(--brand) 25%, var(--line));
}

/* ── KPI value + delta ── */
.kpi-value {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  font-size: 32px;
  letter-spacing: -0.025em;
}
.kpi-mode { color: var(--ink-3); font-size: 9.5px; }
.kpi-mode-tag,
.pnl-mode-tag {
  background: var(--bg-3);
  padding: 1px 6px; border-radius: 8px;
  font-size: 9.5px;
}

/* ── AI Insight banner ── */
.ai-card {
  background:
    radial-gradient(80% 200% at 100% 0%, color-mix(in oklch, var(--brand) 12%, transparent) 0%, transparent 60%),
    var(--bg-1);
  border: 1px solid color-mix(in oklch, var(--brand) 18%, var(--line));
  border-radius: 10px;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 14px;
  align-items: center;
}
.ai-card .ai-ico {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--brand) 0%, var(--info) 100%);
  color: var(--bg-0);
  display: grid; place-items: center;
  font-weight: 700; font-size: 14px;
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--brand) 18%, transparent);
}

/* ── Anomaly cards (.anom.bad / .good / default warn) ── */
.anom {
  display: grid; grid-template-columns: 28px 1fr auto;
  gap: 10px; padding: 10px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
}
.anom .ico {
  width: 28px; height: 28px;
  border-radius: 6px;
  background: color-mix(in oklch, var(--warn) 16%, var(--bg-2));
  color: var(--warn);
  display: grid; place-items: center;
}
.anom.bad .ico { background: color-mix(in oklch, var(--bad) 16%, var(--bg-2)); color: var(--bad); }
.anom.good .ico { background: color-mix(in oklch, var(--good) 16%, var(--bg-2)); color: var(--good); }

/* ── Manager rows pattern (.mgr-row .av .pbar) ── */
.mgr-row {
  display: grid; grid-template-columns: 28px 1fr auto;
  /* Patch 13-NIGHT-A Item 22 — tighter row gap (--space-sm = 8px), padding via tokens. */
  gap: var(--space-sm); align-items: center; padding: var(--space-xs) 0;
}
.mgr-row .av {
  width: 24px; height: 24px;   /* Item 22 — smaller avatar (matches scorecard-compound density) */
  border-radius: 50%;
  background: var(--bg-3); color: var(--ink-1);
  display: grid; place-items: center;
  font-size: 11px; font-weight: 600;
}
.mgr-row .pbar { height: 4px; background: var(--bg-3); border-radius: 2px; display: flex; }
.mgr-row .pbar .rev { background: var(--brand); }
.mgr-row .pbar .pro { background: var(--good); }

/* ── Donut grid pattern ── */
.donut-wrap {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 14px;
  align-items: center;
}
.donut { width: 160px; height: 160px; transform: rotate(-90deg); }

/* ── Top-N table з ranks + bar-cell inline progress ── */
table.tbl,
.pg-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
table.tbl th,
.pg-table thead th {
  text-align: left; font-weight: 500;
  color: var(--ink-3);
  text-transform: uppercase; letter-spacing: 0.06em;
  font-size: 10.5px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--line-soft);
}
table.tbl td,
.pg-table tbody td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink-1);
  font-size: 12px;
}
/* Patch 13-PRE-RELEASE-1 — bar style upgrade per Йолт image #35:
   thicker bar (8px), pill radius, cyan→good gradient fill (matches .top3-row canonical). */
.bar-cell { display: flex; align-items: center; gap: 8px; }
.bar-cell .bar { height: 8px; flex: 1; min-width: 60px; background: var(--bg-3); border-radius: 4px; overflow: hidden; }
.bar-cell .bar i {
  display: block; height: 100%;
  background: linear-gradient(90deg,
    color-mix(in oklch, var(--brand) 70%, transparent),
    color-mix(in oklch, var(--good) 80%, transparent));
  border-radius: 4px;
}
/* Patch 13-OV-CATS-CHAN-2 — bar-compare: prev-period faded layer + current overlay
   з brand→good gradient. Прев lives behind, cur on top — width difference shows growth/decline. */
.bar-cell-cmp .bar { height: 8px; border-radius: 3px; overflow: hidden; position: relative; }
.bar-cell-cmp .bar i { position: absolute; left: 0; top: 0; height: 100%; border-radius: 3px; }
.bar-cell-cmp .bar i.prev {
  background: color-mix(in oklch, var(--ink-3) 35%, transparent);
  z-index: 0;
}
.bar-cell-cmp .bar i.cur {
  background: linear-gradient(90deg, var(--brand), var(--good));
  z-index: 1;
}
/* 2-col side-by-side wrapper for Top категорії + Top канали (per Йолт). */
.ov2-row-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  align-items: stretch;
}
.ov2-row-2col > .card { display: flex; flex-direction: column; min-height: 0; }
.ov2-row-2col > .card > .tbl-scroll { flex: 1 1 auto; min-height: 0; max-height: 460px; overflow: auto; }
@media (max-width: 1100px) { .ov2-row-2col { grid-template-columns: 1fr; } }
.rank { color: var(--ink-3); font-family: 'JetBrains Mono', monospace; font-size: 11px; }
.sku-id { color: var(--ink-3); font-family: 'JetBrains Mono', monospace; font-size: 11px; }

/* ── Live status dot з pulse ── */
.live { display: inline-flex; align-items: center; gap: 6px; }
.live .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--good) 25%, transparent);
  animation: pulse 2s infinite ease-in-out;
}
@keyframes pulse { 50% { opacity: 0.4; } }

/* ── Stroke-based icons baseline ── */
.ic {
  width: 14px; height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Headings tightened ── */
.pg-head h1 {
  font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink-0);
  margin: 0;
}
.pg-sub { color: var(--ink-2); font-size: 12px; margin-top: 6px; }
.pp-block-head h3, .ga-block-head h3, .pnl-block-head h3, .cfo-block-head h3,
.lc-block-head h3, .mk-block-head h3, .cc-block-head h3, .sp-block-head h3,
.calc-block-head h3 {
  font-size: 14px; font-weight: 600; color: var(--ink-0); margin: 0;
}

/* ── Tabular nums on numeric columns ── */
.pg-table .num,
.pg-table tfoot td.num {
  font-family: 'JetBrains Mono', monospace;
  font-feature-settings: "tnum";
  text-align: right;
}

/* ── Hero panel layout (Overview) ── */
.hero-panel { padding: 16px 18px; }
.hero-card { padding: 12px 14px; border-radius: 10px; }
.hero-amount { font-size: 30px; letter-spacing: -0.02em; font-family: 'JetBrains Mono', monospace; }

/* ── Section help ? icon refresh ── */
.section-help {
  width: 13px; height: 13px;
  background: var(--bg-3); color: var(--ink-3);
  border: 0; font-size: 9px;
}
.section-help:hover { background: var(--brand); color: var(--bg-0); }

/* ── Sortable arrow updated colour ── */
.sortable-arrow { color: var(--brand); }

/* ── Locale toggle restyled ── */
.tb-locale [data-locale-lang] { background: var(--bg-1); border: 1px solid var(--line-soft); color: var(--ink-2); }
.tb-locale [data-locale-currency] { background: var(--bg-1); border: 1px solid var(--line-soft); color: var(--ink-1); }

/* ── PART D bridge: existing hero-panel uses .hero-card--lose/unused/waste.
       Map them to Claude Design .alert.bad / .good / .warn variants automatically. */
.hero-card--lose {
  border-color: color-mix(in oklch, var(--bad) 30%, var(--line));
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in oklch, var(--bad) 12%, transparent) 0%, transparent 60%),
    var(--bg-2);
}
.hero-card--lose .hero-amount { color: var(--bad); }
.hero-card--unused {
  border-color: color-mix(in oklch, var(--good) 30%, var(--line));
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in oklch, var(--good) 12%, transparent) 0%, transparent 60%),
    var(--bg-2);
}
.hero-card--unused .hero-amount { color: var(--good); }
.hero-card--waste {
  border-color: color-mix(in oklch, var(--warn) 25%, var(--line));
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in oklch, var(--warn) 10%, transparent) 0%, transparent 60%),
    var(--bg-2);
}
.hero-card--waste .hero-amount { color: var(--warn); }

/* ── Money Leaks TOFU red glow refreshed з oklch coral ── */
.leaks-tofu {
  border-color: color-mix(in oklch, var(--bad) 35%, var(--line));
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in oklch, var(--bad) 14%, transparent) 0%, transparent 60%),
    var(--bg-2);
}
.leaks-tofu-value { color: var(--bad); text-shadow: 0 0 16px color-mix(in oklch, var(--bad) 35%, transparent); }
.leaks-tofu-annual-value { color: var(--warn); }
.leaks-tofu-btn { background: var(--bad); color: var(--bg-0); }

/* ── Pill chips for status tags inherit oklch ── */
.lc-st-pill-green, .cpb-st-green, .cfo-st-green { background: color-mix(in oklch, var(--good) 16%, transparent); color: var(--good); }
.lc-st-pill-amber, .cpb-st-amber                { background: color-mix(in oklch, var(--warn) 16%, transparent); color: var(--warn); }
.lc-st-pill-red,   .cpb-st-red                  { background: color-mix(in oklch, var(--bad) 16%, transparent); color: var(--bad); }
.lc-st-pill-cyan                                { background: color-mix(in oklch, var(--brand) 16%, transparent); color: var(--brand); }

/* ── Generic .num coloring у tables (semantic) ── */
.pp-good, .pnl-good, .pnl-pos { color: var(--good); }
.pp-bad,  .pnl-bad           { color: var(--bad); }
.pnl-warn                    { color: var(--warn); }
.leak-total-bad, .pp-margin-low { color: var(--bad); font-weight: 600; }

/* ── ga-alert family inherits oklch ── */
.ga-alert-red,   .alerts-red    { background: color-mix(in oklch, var(--bad) 8%, transparent); border-left: 3px solid var(--bad); }
.ga-alert-amber, .alerts-amber  { background: color-mix(in oklch, var(--warn) 8%, transparent); border-left: 3px solid var(--warn); }
.ga-alert-green, .alerts-green  { background: color-mix(in oklch, var(--good) 8%, transparent); border-left: 3px solid var(--good); }
.ga-alert-info                  { background: var(--bg-2); color: var(--ink-2); }

/* ── Page tag pills (PlusUltra ⚡ / soon) ── */
.pg-tag--plus { background: color-mix(in oklch, var(--brand) 18%, var(--bg-2)); color: var(--brand); border-color: color-mix(in oklch, var(--brand) 35%, var(--line)); }
.pg-tag--soon { background: color-mix(in oklch, var(--info) 18%, var(--bg-2)); color: var(--info); border-color: color-mix(in oklch, var(--info) 35%, var(--line)); }

/* ════════════════════════════════════════════════════════════════════
   PATCH 12 PART D2 — Overview markup overhaul (Dashboard.html parity)
   Component classes that the rewritten js/pages/_demo.js renders. Match
   the reference Dashboard.html lines 850-1138 1-к-1.
   ════════════════════════════════════════════════════════════════════ */

/* Page wrapper */
.pg-overview-claude { display: flex; flex-direction: column; gap: 16px; }

/* ── Active filters strip ─────────────────────────────────────── */
.filters-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 11px; color: var(--ink-3);
  padding: 6px 0;
}
.filters-row .filter-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--bg-2);
  border: 1px dashed var(--line);
  border-radius: 14px;
  padding: 3px 8px 3px 10px;
  color: var(--ink-1);
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  cursor: pointer;
}
.filters-row .filter-chip:hover { border-color: var(--brand); color: var(--brand); }
.filters-row .filter-chip .x { color: var(--ink-3); margin-left: 2px; }
.filters-row .reset-all {
  color: var(--ink-3); font-size: 11px; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.filters-row .reset-all:hover { color: var(--brand); }
.filters-row .filters-empty { color: var(--ink-3); font-style: italic; }

/* ── Hero (greeting + 3 alerts + Net Profit footer) ─────────── */
.hero {
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: 16px 18px 14px;
  display: flex; flex-direction: column; gap: 12px;
}
.hero-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hero-h h2 {
  margin: 0; font-size: 17px; font-weight: 600; color: var(--ink-1);
  letter-spacing: -0.01em;
}
.hero-h .me { color: var(--brand); font-weight: 700; }
.hero .alerts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 1100px) { .hero .alerts { grid-template-columns: 1fr; } }

.alert .head {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--ink-1); font-weight: 500;
}
.alert .head .ico {
  width: 24px; height: 24px;
  border-radius: 6px;
  background: color-mix(in oklch, var(--bad) 16%, var(--bg-2));
  color: var(--bad);
  display: grid; place-items: center;
}
.alert.warn .head .ico {
  background: color-mix(in oklch, var(--warn) 16%, var(--bg-2));
  color: var(--warn);
}
.alert.muted .head .ico {
  background: var(--bg-3); color: var(--ink-3);
}
.alert .head .meta {
  margin-left: auto;
  font-size: 10px; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: 0.06em;
  font-family: 'JetBrains Mono', monospace;
}
.alert .spark { align-self: flex-start; }
.alert .desc {
  font-size: 11.5px; color: var(--ink-2); line-height: 1.4;
  flex: 1;
}
.alert .cta {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; color: var(--brand); font-weight: 500;
  cursor: pointer;
  margin-top: auto;
}
.alert .cta:hover { color: var(--ink-0); }

/* Hero footer — Net Profit comparison */
.hero-foot {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  border-top: 1px solid var(--line-soft);
  padding-top: 10px;
  font-size: 12px;
}
.hero-foot .lbl { color: var(--ink-3); }
.hero-foot .val {
  color: var(--ink-1); font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
  font-feature-settings: "tnum";
}
.hero-foot .val.good { color: var(--good); }
.hero-foot .arrow { color: var(--ink-3); }
.hero-foot .scroll-cta {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--ink-3); cursor: pointer;
  font-size: 11.5px;
}
.hero-foot .scroll-cta:hover { color: var(--brand); }

/* ── Section header (h1 + sub + conf pill) ──────────────────── */
.section-h {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.section-h h1 {
  margin: 0;
  font-size: 22px; font-weight: 700;
  color: var(--ink-0); letter-spacing: -0.02em;
}
.section-h .sub {
  color: var(--ink-3); font-size: 12px;
}
.section-h .sub b { color: var(--ink-1); font-feature-settings: "tnum"; }
.section-h .conf-pill {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  padding: 3px 10px;
  font-size: 11px; color: var(--ink-2);
}
.section-h .conf-pill .pct {
  font-family: 'JetBrains Mono', monospace;
  color: var(--good); font-weight: 600;
}

/* ── YoY strip ──────────────────────────────────────────────── */
.yoy-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 12px;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 10px 14px;
}
.yoy-row .lbl { color: var(--ink-3); }
.yoy-row .stat {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 0 10px;
  border-left: 1px solid var(--line-soft);
}
.yoy-row .stat .name { color: var(--ink-3); font-size: 11px; }
.yoy-row .stat .delta { font-weight: 600; }
.yoy-bars {
  margin-left: auto;
  display: inline-flex; align-items: flex-end; gap: 2px;
  height: 24px;
}
.yoy-bars i {
  display: inline-block;
  width: 6px;
  background: color-mix(in oklch, var(--ink-3) 30%, transparent);
  border-radius: 1px;
  min-height: 2px;
}
.yoy-bars i.b {
  background: var(--brand);
}

/* ── KPIs (Dashboard.html .kpi block — distinct from .kpi-card) ── */
.kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 1100px) { .kpis { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .kpis { grid-template-columns: 1fr; } }

.kpi {
  position: relative;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 14px 14px 12px;
  display: flex; flex-direction: column; gap: 8px;
  min-height: 168px;
}
.kpi.featured {
  background: linear-gradient(180deg, color-mix(in oklch, var(--brand) 8%, var(--bg-1)) 0%, var(--bg-1) 60%);
  border-color: color-mix(in oklch, var(--brand) 25%, var(--line));
}
.kpi .head {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--ink-2); font-weight: 500;
}
.kpi .head .q {
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--bg-3);
  color: var(--ink-3);
  display: inline-grid; place-items: center;
  font-size: 9px;
  cursor: help;
}
.kpi .head .mode-tag {
  margin-left: auto;
  background: var(--bg-3); color: var(--ink-3);
  font-size: 9.5px;
  padding: 1px 6px;
  border-radius: 8px;
}
.kpi .big.num {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  font-size: 28px;
  letter-spacing: -0.025em;
  color: var(--ink-0);
  line-height: 1.1;
}
.kpi .big .unit {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--ink-3);
  font-weight: 500;
  letter-spacing: 0;
}
.kpi .spark {
  position: absolute;
  right: 12px; top: 36px;
  opacity: 0.85;
}
.kpi .desc {
  font-size: 11px; color: var(--ink-3); line-height: 1.4;
}
.kpi .modes {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  background: var(--bg-2);
  border-radius: 6px;
  padding: 8px 10px;
}
.kpi .modes .m {
  display: flex; flex-direction: column; gap: 2px;
}
.kpi .modes .m .lbl {
  font-size: 9.5px; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.kpi .modes .m .v {
  font-family: 'JetBrains Mono', monospace;
  font-feature-settings: "tnum";
  font-size: 11.5px;
  color: var(--ink-1);
  font-weight: 500;
}
.kpi .modes .m .v.exp {
  color: var(--brand);
  font-weight: 600;
}

/* Delta indicators (KPIs + SKUs + YoY share these classes) */
.delta { font-size: 11px; font-family: 'JetBrains Mono', monospace; font-feature-settings: "tnum"; }
.delta.up   { color: var(--good); }
.delta.dn   { color: var(--bad); }
.delta.flat { color: var(--ink-3); }

/* ── Generic .card / .card-h shell ──────────────────────────── */
.charts-row,
.bottom-row {
  display: grid;
  gap: 12px;
}
.charts-row { grid-template-columns: 2fr 1fr; }
.bottom-row { grid-template-columns: 1.6fr 1fr 1fr; }
@media (max-width: 1100px) {
  .charts-row { grid-template-columns: 1fr; }
  .bottom-row { grid-template-columns: 1fr; }
}

.card {
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 14px 14px 12px;
  display: flex; flex-direction: column; gap: 10px;
}
.card-h {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.card-h h3 {
  margin: 0;
  font-size: 14px; font-weight: 600; color: var(--ink-0);
}
.card-h .hint {
  font-size: 11px; color: var(--ink-3);
}
.card-h .right {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 8px;
}
.card-h .legend {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 10.5px; color: var(--ink-3);
}
.card-h .legend i {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 4px;
  vertical-align: middle;
}
.card-h .legend i.rev    { background: var(--brand); }
.card-h .legend i.spend  { background: var(--bad); }
.card-h .legend i.profit { background: var(--good); }
.card-h .mode-chip {
  background: color-mix(in oklch, var(--brand) 14%, var(--bg-2));
  border: 1px solid color-mix(in oklch, var(--brand) 30%, var(--line));
  color: var(--brand);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  padding: 2px 8px;
  border-radius: 12px;
}

.btn.ghost {
  background: transparent;
  border: 1px solid var(--line-soft);
  color: var(--ink-2);
  padding: 4px 9px;
  border-radius: 6px;
  font-size: 11.5px;
  cursor: pointer;
}
.btn.ghost:hover { border-color: var(--brand); color: var(--brand); }

/* DailyChart / ChannelDonut hosts inside .card */
.chart-host { width: 100%; }
.chart-host > * { width: 100%; }
.donut-host { display: flex; flex-direction: column; gap: 10px; }

/* ── Channel list (donut sidebar) ────────────────────────────── */
.channel-list {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 11.5px;
}
.channel-row {
  display: grid;
  grid-template-columns: 10px 1fr auto auto;
  gap: 8px; align-items: center;
  padding: 4px 0;
  border-bottom: 1px solid var(--line-soft);
}
.channel-row:last-child { border-bottom: 0; }
.channel-row .sw {
  width: 10px; height: 10px;
  border-radius: 2px;
}
.channel-row .name { color: var(--ink-1); }
.channel-row .val {
  font-family: 'JetBrains Mono', monospace;
  font-feature-settings: "tnum";
  color: var(--ink-2);
}
.channel-row .pct { color: var(--ink-3); font-size: 10.5px; }

/* ── Top SKUs table tweaks (bar-cell + delta + sku-id already exist) ── */
table.tbl td.name b { color: var(--ink-0); font-weight: 500; }
table.tbl td.r { text-align: right; }
table.tbl td.r.v {
  font-family: 'JetBrains Mono', monospace;
  font-feature-settings: "tnum";
  color: var(--ink-1);
}
/* Patch 13-A.2 item 5 — clamp product name with ellipsis; full name on hover via title attr.
   sku-id under it gets its own ellipsis so long product_id codes don't blow out the column. */
table.tbl td.name {
  max-width: 180px;
}
table.tbl td.name .name-text,
table.tbl td.name b.name-text {
  display: block;
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
table.tbl td.name .sku-id {
  display: block;
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Manager rows extras ────────────────────────────────────── */
.mgr-list { display: flex; flex-direction: column; gap: 2px; }
.mgr-row .col {
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0;
}
.mgr-row .col .top {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  font-size: 11.5px;
}
.mgr-row .col .top .n { color: var(--ink-1); font-weight: 500; }
.mgr-row .col .top .o { color: var(--ink-3); font-size: 10.5px; }
.mgr-row > .v {
  font-family: 'JetBrains Mono', monospace;
  font-feature-settings: "tnum";
  color: var(--ink-1); font-weight: 500;
}

/* ── Anomalies list ─────────────────────────────────────────── */
.anom-list { display: flex; flex-direction: column; gap: 6px; }
.anom .body { min-width: 0; }
.anom .body .t {
  font-size: 12px; color: var(--ink-1); font-weight: 500;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
}
.anom .body .sub {
  font-size: 10.5px; color: var(--ink-3);
  margin-top: 2px;
}
.anom .right { text-align: right; }
.anom .right .v {
  font-family: 'JetBrains Mono', monospace;
  font-feature-settings: "tnum";
  font-size: 12px; font-weight: 600;
}
.anom.bad .right .v  { color: var(--bad); }
.anom.warn .right .v { color: var(--warn); }
.anom.good .right .v { color: var(--good); }
.anom .right .when {
  font-size: 10px; color: var(--ink-3); margin-top: 2px;
}
.anom.bad  { border-color: color-mix(in oklch, var(--bad) 25%, var(--line)); }
.anom.warn { border-color: color-mix(in oklch, var(--warn) 25%, var(--line)); }
.anom.good { border-color: color-mix(in oklch, var(--good) 25%, var(--line)); }

/* ── AI strip extras ────────────────────────────────────────── */
.ai-card .t { font-size: 13px; color: var(--ink-0); font-weight: 600; }
.ai-card .s { font-size: 11.5px; color: var(--ink-2); margin-top: 2px; line-height: 1.4; }

/* ── Sidebar brand-mark glyph — Patch 13-FINAL item 2 (real SVG glyph) ──── */
.sb-brand { display: flex; align-items: center; gap: 10px; padding: 6px 16px 16px; }
.brand-mark {
  width: 28px; height: 28px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 6px 14px color-mix(in oklch, var(--brand) 30%, transparent));
}
.brand-mark svg { width: 100%; height: 100%; display: block; }
.sb-brand .sb-version { margin-left: auto; }

/* ════════════════════════════════════════════════════════════════════
   PATCH 13-A — Topbar + period row Dashboard.html parity
   ════════════════════════════════════════════════════════════════════ */

/* TOPBAR row 1 */
/* Patch 13-DESIGN-INT.1 — Item 9: keep sticky from primary rule, frosted background.
   Patch 13-POLISH.1 — Item 1: sticky was ineffective because the host
   `#app-topbar` shrink-wrapped `.tb-root`, leaving the sticky element with
   zero room within its containing block. Promote `#app-topbar` so `.tb-root`
   becomes a direct flex item of `.app-main`, AND apply sticky to both so the
   ENTIRE wrapper (Row 1 dates+presets+actions + Row 2 period/metric/lang/cur
   + intensity toggle) stays pinned across all scrolling pages. */
#app-topbar {
  position: sticky; top: 0; z-index: 50;
  display: block;
}
.tb-root {
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--line-soft);
  background: color-mix(in oklch, var(--bg-0) 88%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  position: sticky; top: 0; z-index: 50;
}
/* Both rows share the sticky context — explicitly mark the secondary row so
   it never breaks out (e.g. via flex / overflow descendant hacks). */
.tb-root .topbar.tb-primary-row,
.tb-root .mode-row {
  position: relative;
}
.topbar.tb-primary-row {
  display: flex; align-items: center; gap: 8px;
  /* Patch 13-A.3 item 3 — keep all controls on one row; if the viewport is
     genuinely too narrow, scroll horizontally instead of wrapping the Demo
     button below. Demo / +PlusUltra MUST stay reachable. */
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: thin;
  scrollbar-color: var(--bg-3) transparent;
}
.topbar.tb-primary-row::-webkit-scrollbar { height: 6px; }
.topbar.tb-primary-row::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: 3px; }
.topbar.tb-primary-row::-webkit-scrollbar-track { background: transparent; }

/* Date pills (.date-input) — fixed-width so labels never wrap and the field
   never grows wider than needed for "DD.MM.YYYY". */
.date-input {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 5px 8px;
  font-size: 12px;
  color: var(--ink-1);
  cursor: pointer;
  position: relative;
  font-family: 'JetBrains Mono', monospace;
  font-feature-settings: "tnum";
  flex: 0 0 auto;
  min-width: 130px;
  white-space: nowrap;
}
.date-input:hover { border-color: var(--brand); }
.date-input .lbl {
  color: var(--ink-3);
  font-size: 10.5px;
  text-transform: uppercase; letter-spacing: 0.06em;
  font-family: 'Inter', sans-serif;
}
/* Patch 13-DATEPICKER-1 — native input приховано (custom .tb-cal renders дате picker).
   Залишається лише як value sink for filterContext. pointer-events:none робить click
   падає на .date-input label який триггерить openTbCal(). */
.date-input-native {
  position: absolute; inset: 0;
  width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
  border: none; background: transparent;
}
.date-input-native::-webkit-calendar-picker-indicator { display: none; }
.date-input { cursor: pointer; }
.date-input * { cursor: pointer; }

/* Patch 13-DATEPICKER-1 — custom calendar popup, dark theme per UI Kit. */
.tb-cal {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: var(--space-md);
  font-size: 12px;
  color: var(--ink-1);
  min-width: 264px;
  box-shadow: var(--shadow-mid, 0 8px 24px rgba(0, 0, 0, 0.45));
  user-select: none;
}
.tb-cal-h {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--space-xs);
  align-items: center;
  margin-bottom: var(--space-sm);
}
.tb-cal-title {
  font-weight: 600;
  color: var(--ink-0);
  font-size: 13px;
}
.tb-cal-nav {
  width: 26px; height: 26px;
  background: transparent;
  border: 1px solid var(--line-soft);
  color: var(--ink-1);
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tb-cal-nav:hover { border-color: var(--brand); color: var(--brand); }
.tb-cal-dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  font-size: 10.5px;
  color: var(--ink-3);
  text-align: center;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.tb-cal-dow span { padding: 4px 0; }
.tb-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-top: var(--space-xs);
}
.tb-cal-day {
  background: transparent;
  border: 1px solid transparent;
  color: var(--ink-1);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  padding: 7px 4px;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
  font-variant-numeric: tabular-nums;
  transition: background 100ms, border-color 100ms;
}
.tb-cal-day:hover { background: color-mix(in oklch, var(--brand) 14%, transparent); }
.tb-cal-day.muted { color: var(--ink-3); opacity: 0.45; }
.tb-cal-day.today { border-color: color-mix(in oklch, var(--brand) 60%, transparent); }
.tb-cal-day.sel {
  background: var(--brand);
  color: var(--bg-0);
  font-weight: 700;
  border-color: var(--brand);
}
.tb-cal-day.sel:hover { background: var(--accent-bright, var(--brand)); filter: brightness(1.1); }
.tb-cal-foot {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--line-soft);
}
.tb-cal-act {
  background: transparent;
  border: none;
  color: var(--ink-3);
  font-size: 11px;
  cursor: pointer;
  padding: 4px 8px;
  font-family: inherit;
  border-radius: 4px;
}
.tb-cal-act:hover { color: var(--brand); background: color-mix(in oklch, var(--brand) 8%, transparent); }
.tb-cal-act-primary { color: var(--brand); font-weight: 600; }

/* .seg (segmented control) */
.seg {
  display: inline-flex;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 2px;
  gap: 0;
}
.seg button {
  background: transparent;
  border: 0;
  color: var(--ink-2);
  font-size: 11.5px;
  padding: 4px 10px;
  cursor: pointer;
  border-radius: 6px;
  font-family: inherit;
}
.seg button:hover { color: var(--ink-0); }
.seg button.on {
  background: var(--bg-3);
  color: var(--ink-0);
  font-weight: 600;
}
.seg button.ai {
  color: var(--brand);
  font-family: 'Inter Tight', 'Inter', sans-serif;
}
.seg button.ai.on {
  background: color-mix(in oklch, var(--brand) 18%, var(--bg-2));
  color: var(--brand);
}

/* Pill selects (Менеджер / Channel group) wrap MultiSelect.
   Patch 13-A.2 item 1 — shrink so all topbar buttons fit in one row at 1440px:
   min-width 110px (was implicit ~140), padding 5/8, allow shrink via flex 0 1 auto. */
.pill-select {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 5px 8px;
  cursor: pointer;
  position: relative;
  min-width: 110px;
  flex: 0 1 auto;
}
.pill-select:hover { border-color: var(--brand); }
.pill-select > .ic { flex: none; }
.pill-select .ms-root { background: transparent; }
.pill-select .ms-toggle {
  background: transparent;
  border: 0;
  padding: 2px 4px;
  color: var(--ink-1);
  font-size: 12px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
}
.pill-select .ms-toggle:hover { background: transparent; }
.pill-select .ms-label { color: var(--ink-1); }
.pill-select .ms-count {
  background: color-mix(in oklch, var(--brand) 14%, var(--bg-2));
  color: var(--brand);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 4px;
}
.pill-select .ms-count:empty { display: none; }
.pill-select .ms-caret { color: var(--ink-3); font-size: 10px; }
.pill-select .ms-panel {
  position: absolute; top: calc(100% + 6px); left: 0;
  z-index: 100;
  min-width: 240px;
}
/* Patch 13-A.4 item 1 — make sure the topbar pill-select stays visually a
   dropdown pill (icon + label + chev). The MultiSelect's internal search
   input was bleeding through visually, making the pill look like a "Search…"
   text box. Hide it: managers + channel groups are short lists. */
.pill-select .ms-search { display: none; }
.pill-select .ms-panel  { padding: 6px 4px; }
.pill-select .ms-actions { padding: 2px 4px 6px; }

/* Topbar action buttons — Dashboard.html style */
.topbar-spacer { flex: 1 1 0; min-width: 8px; }

.topbar .btn,
.topbar .btn.ghost,
.topbar .btn.primary,
.topbar .btn.demo {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 11.5px;
  cursor: pointer;
  border: 1px solid var(--line-soft);
  background: var(--bg-1);
  color: var(--ink-1);
  white-space: nowrap;
  /* Patch 13-A.3 item 3 — actions never shrink so Demo / + PlusUltra never
     get clipped under topbar overflow. */
  flex: 0 0 auto;
}
.topbar .btn:hover { border-color: var(--brand); color: var(--brand); }
.topbar .btn.ghost {
  background: transparent;
  color: var(--ink-2);
}
.topbar .btn.ghost:hover { color: var(--brand); border-color: var(--brand); }

/* Patch 13-A.2 item 2 — Reset button stands out in red so it's not lost
   between the ghost siblings. */
.topbar .btn.ghost.reset {
  color: var(--bad);
  border-color: color-mix(in oklch, var(--bad) 24%, var(--line));
}
.topbar .btn.ghost.reset:hover {
  color: var(--bad);
  border-color: color-mix(in oklch, var(--bad) 50%, var(--line));
  background: color-mix(in oklch, var(--bad) 12%, transparent);
}
.topbar .btn.primary {
  background: color-mix(in oklch, var(--brand) 14%, var(--bg-1));
  color: var(--brand);
  border-color: color-mix(in oklch, var(--brand) 30%, var(--line));
  font-weight: 600;
}
.topbar .btn.primary:hover {
  background: color-mix(in oklch, var(--brand) 22%, var(--bg-1));
}
.topbar .btn.primary[aria-pressed="true"] {
  background: var(--brand);
  color: var(--bg-0);
  border-color: var(--brand);
}
.topbar .btn.demo {
  background: linear-gradient(135deg, var(--brand) 0%, var(--info) 100%);
  color: var(--bg-0);
  border-color: transparent;
  font-weight: 600;
}
.topbar .btn.demo:hover {
  filter: brightness(1.05);
}
.topbar .btn .tb-active {
  background: color-mix(in oklch, var(--brand) 18%, var(--bg-2));
  color: var(--brand);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  padding: 0 5px;
  border-radius: 4px;
  font-weight: 600;
}
.topbar .btn .tb-active:empty { display: none; }
.topbar .btn .ic.chev { transition: transform 0.15s ease; }
.topbar .btn[aria-expanded="true"] .ic.chev { transform: rotate(180deg); }

/* TOPBAR row 2 — period / metric / lang / currency */
.mode-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 4px 0;
  font-size: 12px;
  color: var(--ink-3);
}
.mode-row-label {
  font-size: 10.5px;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-3);
}
.mode-row-spacer { flex: 1; min-width: 16px; }

/* Patch 13-A.5 — More filters now opens a slide-in panel from the right.
   Legacy .tb-more-row inline accordion replaced with .filter-panel below. */
.tb-cascade-block { margin-bottom: 10px; }
.tb-block-label {
  font-size: 10.5px;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-3);
  margin-bottom: 6px;
}
.tb-block-label-grid { margin-top: 8px; }
.tb-cell-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
}

/* Patch 13-A — drill highlight glow (3s pulse on .leak-card / .anom / .rec-card) */
@keyframes patch13a-glow-pulse {
  0%   { box-shadow: 0 0 0 0   color-mix(in oklch, var(--bad) 70%, transparent); border-color: var(--bad); }
  20%  { box-shadow: 0 0 0 10px color-mix(in oklch, var(--bad) 30%, transparent); border-color: var(--bad); }
  60%  { box-shadow: 0 0 0 4px  color-mix(in oklch, var(--bad) 20%, transparent); border-color: var(--bad); }
  100% { box-shadow: 0 0 0 0   transparent; border-color: var(--line-soft); }
}
.is-highlighted {
  animation: patch13a-glow-pulse 3s ease-out 1;
  scroll-margin-top: 80px;
}

/* Patch 13-A — Top SKUs scroll + sum row */
.tbl-scroll {
  max-height: 320px;
  overflow-y: auto;
  border-radius: 6px;
}
.tbl-scroll::-webkit-scrollbar { width: 6px; }
.tbl-scroll::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: 3px; }
table.tbl thead { position: sticky; top: 0; background: var(--bg-1); z-index: 1; }
table.tbl tfoot { position: sticky; bottom: 0; background: var(--bg-1); z-index: 1; }
table.tbl tfoot tr.sum-row td {
  border-top: 1px solid var(--line);
  border-bottom: 0;
  padding: 8px 8px;
  white-space: nowrap;
  font-family: 'JetBrains Mono', monospace;
  font-feature-settings: "tnum";
  color: var(--ink-0);
  font-weight: 600;
  font-size: 11.5px;
}
table.tbl tfoot tr.sum-row td.r { text-align: right; }
table.tbl tfoot tr.sum-row td.v.sum:first-of-type {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  color: var(--ink-2);
  font-size: 11px;
  white-space: nowrap;
}

/* Patch 13-A — Managers scroll + sum row */
.mgr-scroll {
  max-height: 320px;
  overflow-y: auto;
}
.mgr-scroll::-webkit-scrollbar { width: 6px; }
.mgr-scroll::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: 3px; }
.mgr-foot { border-top: 1px solid var(--line-soft); margin-top: 6px; padding-top: 8px; }
.mgr-sum-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: center;
  font-size: 11.5px;
}
.mgr-sum-row .lbl { color: var(--ink-2); font-weight: 500; }
.mgr-sum-row .o {
  color: var(--ink-3);
  font-family: 'JetBrains Mono', monospace;
  font-feature-settings: "tnum";
  font-size: 10.5px;
}
.mgr-sum-row .v {
  color: var(--ink-0);
  font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
  font-feature-settings: "tnum";
}

/* ════════════════════════════════════════════════════════════════════
   PATCH 13-B — Money Leaks merged page (CEO + Leaks + risks)
   .scorecard-compound is the reusable base for any 4-6 row metric card;
   future Sales / Channels / Google / Meta sections can adopt it.
   ════════════════════════════════════════════════════════════════════ */

/* Merged page wrapper */
.pg-leaks-merged { display: flex; flex-direction: column; gap: 14px; }

/* ── 1. SCORECARD STRIP (3-card hero — reusable base) ─────── */
.scorecard-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (max-width: 1100px) { .scorecard-strip { grid-template-columns: 1fr; } }

.scorecard-compound {
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 14px 14px 12px;
  display: flex; flex-direction: column; gap: 10px;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
/* Patch 13-DESIGN-INT.1 — Item 7: UIKit `.featured` gradient variant for the
   leading hero card on Google / Meta cockpits. Style-only polish — no layout
   changes per parent spec Rule #2. */
.scorecard-compound.featured {
  background: linear-gradient(180deg,
    color-mix(in oklch, var(--brand) 8%, var(--bg-1)) 0%,
    var(--bg-1) 60%);
  border-color: color-mix(in oklch, var(--brand) 25%, var(--line));
}
.scorecard-compound.bad {
  background: linear-gradient(180deg,
    color-mix(in oklch, var(--bad) 6%, var(--bg-1)) 0%,
    var(--bg-1) 60%);
  border-color: color-mix(in oklch, var(--bad) 25%, var(--line));
}
.scorecard-compound:hover {
  border-color: color-mix(in oklch, var(--brand) 28%, var(--line));
}
.scorecard-compound .head {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--ink-2);
  letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600;
}
.scorecard-compound .head .label { flex: 1; }
.scorecard-compound .head .q {
  width: 13px; height: 13px;
  background: var(--bg-3); color: var(--ink-3);
  border-radius: 50%;
  display: inline-grid; place-items: center;
  font-size: 9px; cursor: help;
  font-weight: 500;
  text-transform: none; letter-spacing: 0;
}
.scorecard-compound .head .period-tag {
  background: var(--bg-3); color: var(--ink-3);
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  padding: 1px 6px;
  border-radius: 8px;
  font-weight: 500;
  text-transform: none; letter-spacing: 0;
}
.scorecard-compound .metrics-list {
  display: flex; flex-direction: column;
  gap: 6px;
  background: var(--bg-2);
  border-radius: 6px;
  padding: 10px 12px;
}
.scorecard-compound .metric-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px;
  font-size: 13px;
}
/* Patch 13-B.1 item 2 — scorecards readable at 3 seconds: bigger value,
   stronger label colour, prominent total row, bolder comparison delta. */
.scorecard-compound .metric-row .metric-name {
  color: var(--ink-1);
  font-weight: 500;
}
.scorecard-compound .metric-row .metric-value {
  color: var(--ink-0);
  font-weight: 600;
  font-size: 18px;
  font-feature-settings: "tnum";
  line-height: 1.1;
}
.scorecard-compound .metric-row .metric-value.mono {
  font-family: 'JetBrains Mono', monospace;
}
.scorecard-compound .metric-row.total {
  border-top: 1px solid var(--line);
  margin-top: 6px; padding-top: 8px;
}
.scorecard-compound .metric-row.total .metric-name {
  color: var(--ink-1); font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 11px;
}
.scorecard-compound .metric-row.total .metric-value {
  color: var(--ink-0); font-weight: 700;
  font-size: 20px;
}
.scorecard-compound .metric-row.muted .metric-name { color: var(--ink-3); }
.scorecard-compound .metric-row.muted .metric-value { color: var(--ink-3); font-weight: 500; font-size: 14px; }
.scorecard-compound .comparison-bar {
  border-top: 1px solid var(--line-soft);
  padding-top: 8px;
  font-size: 12.5px;
  /* Patch 13-B.2 item 1 — pin the comparison row to the bottom of every card so
     the three Δ-vs-prev lines align horizontally regardless of how many metrics
     each card has. The grid row already gives all three the same height; this
     makes the bar use the slack at the bottom. */
  margin-top: auto;
}
.scorecard-compound .comparison-bar .delta {
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  font-feature-settings: "tnum";
}

/* ── 2. AD CABINETS PULSE ──────────────────────────────────── */
.ad-cabinets {
  /* uses .card base */
}
.ad-cabinets-list {
  display: flex; flex-direction: column;
  gap: 6px;
}
.channel-pulse-row {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: 10px; align-items: center;
  padding: 6px 8px;
  border-radius: 6px;
  transition: background 0.15s ease;
}
.channel-pulse-row:hover { background: var(--bg-2); }
.channel-pulse-row .cp-label { font-weight: 500; color: var(--ink-1); font-size: 12.5px; }
.channel-pulse-row .cp-spark { display: block; }
.channel-pulse-row .cp-meta { text-align: right; min-width: 130px; }
.channel-pulse-row .cp-total {
  font-family: 'JetBrains Mono', monospace;
  font-feature-settings: "tnum";
  font-weight: 600;
  color: var(--ink-0);
  font-size: 12px;
}
.channel-pulse-row .delta { font-size: 10.5px; }
.pulse-empty {
  color: var(--ink-3); font-size: 12px; padding: 8px; font-style: italic;
}

/* ── 3. BIG LEAK NUMBER (TOFU) — Patch 13-B.1 item 5: 2-col grid ─────── */
.leak-hero {
  background:
    radial-gradient(120% 90% at 30% 0%, color-mix(in oklch, var(--bad) 14%, transparent) 0%, transparent 60%),
    var(--bg-1);
  border: 1px solid color-mix(in oklch, var(--bad) 35%, var(--line));
  border-radius: 12px;
  padding: 28px 24px;
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 24px;
  align-items: center;
}
@media (max-width: 900px) {
  .leak-hero { grid-template-columns: 1fr; padding: 22px 18px; }
}
.leak-hero .leak-hero-main {
  display: flex; flex-direction: column; gap: 8px;
}
.leak-hero .leak-hero-label {
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--ink-3);
  text-transform: uppercase;
  font-weight: 600;
}
.leak-hero .leak-hero-big {
  font-family: 'JetBrains Mono', monospace;
  font-size: 88px;
  font-weight: 700;
  color: var(--bad);
  letter-spacing: -0.025em;
  line-height: 1;
  text-shadow: 0 0 40px color-mix(in oklch, var(--bad) 60%, transparent);
}
/* Patch 13-B.2 item 3 — left column meta lines (annualized / % rev / 5y) +
   button now stack inside .leak-hero-main instead of the right aside; the
   right aside hosts the Ad Cabinets pulse. */
.leak-hero .leak-hero-main {
  display: flex; flex-direction: column; gap: 10px;
  align-items: flex-start;
}
.leak-hero .leak-hero-meta {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 13px;
  color: var(--ink-2);
  margin-top: 4px;
}
.leak-hero .leak-hero-meta .aside-row {
  display: flex; align-items: baseline; gap: 8px;
  line-height: 1.4;
}
.leak-hero .leak-hero-meta b.mono {
  font-family: 'JetBrains Mono', monospace;
  font-feature-settings: "tnum";
  color: var(--ink-0);
  font-weight: 700;
}
.leak-hero .leak-hero-meta b.mono.red { color: var(--bad); }
.leak-hero .btn.cyan {
  margin-top: 6px;
  background: linear-gradient(135deg, var(--brand) 0%, var(--info) 100%);
  color: var(--bg-0);
  border: 0;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  letter-spacing: 0.01em;
}
.leak-hero .btn.cyan:hover { filter: brightness(1.08); }

/* Right-side Ad Cabinets pulse aside */
.leak-hero .leak-hero-pulse {
  background: color-mix(in oklch, var(--bg-2) 80%, transparent);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px;
  align-self: stretch;
}
.leak-hero-pulse .leak-hero-aside-head {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  border-bottom: 1px solid var(--line-soft);
  padding-bottom: 6px;
  margin-bottom: 2px;
}
.leak-hero-pulse .leak-hero-aside-head h3 {
  margin: 0;
  font-size: 12px; font-weight: 600; color: var(--ink-1);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.leak-hero-pulse .leak-hero-aside-head .hint { font-size: 10.5px; color: var(--ink-3); }
.leak-hero-pulse .ad-cabinets-list { gap: 4px; }
/* Compact pulse rows inside the 380px aside */
.leak-hero-pulse .channel-pulse-row {
  grid-template-columns: 70px 1fr auto;
  gap: 8px;
  padding: 4px 6px;
}
.leak-hero-pulse .channel-pulse-row .cp-spark {
  width: 100%; height: 22px;
}
.leak-hero-pulse .channel-pulse-row .cp-meta { min-width: 80px; }
.leak-hero-pulse .channel-pulse-row .cp-total { font-size: 11px; }
.leak-hero-pulse .channel-pulse-row .delta { font-size: 9.5px; white-space: nowrap; }
.leak-hero-pulse .channel-pulse-row .cp-label { font-size: 11.5px; }

/* Patch 13-B.1 item 6 — collapsed leaks summary + always-visible controls row */
.leaks-controls-row {
  display: flex; align-items: center; gap: 14px;
  font-size: 12px;
  padding: 4px 0;
}
.leaks-controls-row .ch-toggle { color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; }
.leaks-controls-row .leaks-restore {
  background: transparent;
  border: 1px solid var(--line-soft);
  color: var(--ink-2);
  padding: 4px 9px;
  font-size: 11.5px;
  border-radius: 6px;
  cursor: pointer;
}
.leaks-controls-row .leaks-restore:hover { color: var(--brand); border-color: var(--brand); }
.leaks-headline-details {
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12px;
}
.leaks-headline-details .leaks-headline-summary {
  cursor: pointer;
  color: var(--ink-3);
  font-size: 11.5px;
  user-select: none;
  list-style: none;
}
.leaks-headline-details .leaks-headline-summary::-webkit-details-marker { display: none; }
.leaks-headline-details .leaks-headline-summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 6px;
  transition: transform 0.15s ease;
}
.leaks-headline-details[open] .leaks-headline-summary::before { transform: rotate(90deg); }
.leaks-headline-details[open] .leaks-headline-summary { color: var(--ink-2); margin-bottom: 6px; }
.leaks-headline-details .leaks-headline {
  display: flex; align-items: center; gap: 12px;
}

/* ════════════════════════════════════════════════════════════════════
   PATCH 13-F — Sales page rewrite
   ════════════════════════════════════════════════════════════════════ */

.pg-sales-v13f { display: flex; flex-direction: column; gap: 14px; }
.pg-sales-v13f .sales-hero { /* uses .kpis grid from Overview */ }

/* Status breakdown strip */
.sales-status-strip {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}
@media (max-width: 1100px) { .sales-status-strip { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 700px)  { .sales-status-strip { grid-template-columns: repeat(2, 1fr); } }
.status-pill {
  display: flex; flex-direction: column;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--line);
  border-radius: 6px;
  padding: 8px 12px;
  gap: 2px;
}
.status-pill-label {
  font-size: 10px; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: 0.05em;
  font-weight: 600;
}
.status-pill-value {
  font-family: 'JetBrains Mono', monospace;
  font-feature-settings: "tnum";
  font-size: 18px; font-weight: 700;
  color: var(--ink-0);
  line-height: 1.1;
}
.status-pill-pct {
  font-size: 10px; color: var(--ink-3);
  font-family: 'JetBrains Mono', monospace;
}
.status-pill-good  { border-left-color: var(--good); }
.status-pill-info  { border-left-color: var(--info); }
.status-pill-bad   { border-left-color: var(--bad); }
.status-pill-warn  { border-left-color: var(--warn); }
.status-pill-muted { border-left-color: var(--ink-3); }
.status-pill-total { border-left-color: var(--brand); background: color-mix(in oklch, var(--brand) 6%, var(--bg-2)); }
.status-pill-total .status-pill-value { color: var(--brand); }

/* Patch 13-F.1 item 1 — bespoke .sales-dwm-seg / .sales-chart-svg / .sales-chart-empty
   removed; Sales now mounts the shared DailyChart (Overview combo) and reuses .chart-host. */

/* Legacy legend swatches preserved for the chart legend (Revenue / Spend / Profit). */
.sales-chart-card .card-h .legend i.spend  { background: var(--bad); }
.sales-chart-card .card-h .legend i.profit { background: var(--good); }
.sales-chart-card .card-h .legend i.rev    { background: var(--brand); }

/* Heatmap */
.sales-heatmap-wrap { display: flex; flex-direction: column; gap: 10px; }
.sales-heatmap { display: flex; flex-direction: column; gap: 1px; }
.sales-heatmap .hm-row { display: flex; gap: 1px; }
.sales-heatmap .hm-cell {
  flex: 1; min-width: 18px;
  height: 18px;
  background: var(--bg-2);
  border-radius: 2px;
  font-size: 9px; color: var(--ink-3);
  display: flex; align-items: center; justify-content: center;
}
.sales-heatmap .hm-cell.hm-rowhead { flex: 0 0 36px; background: transparent; font-weight: 600; color: var(--ink-2); }
.sales-heatmap .hm-cell.hm-colhead { background: transparent; color: var(--ink-3); }
.sales-heatmap-insight {
  font-size: 12px; color: var(--ink-2);
  background: var(--bg-2);
  border-left: 3px solid var(--brand);
  padding: 8px 12px;
  border-radius: 4px;
}

/* Bottom rows / cancel-pay row use existing .bottom-row grid */
.sales-bottom-row { grid-template-columns: 2fr 1fr; }
.sales-cancel-pay-row { grid-template-columns: 1fr 1fr; }
.sales-newrepeat-row { grid-template-columns: 1fr 1fr; }
@media (max-width: 1100px) {
  .sales-bottom-row, .sales-cancel-pay-row, .sales-newrepeat-row { grid-template-columns: 1fr; }
}

/* Action tags (kill / review) */
.action-tag {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 12px;
  white-space: nowrap;
}
.action-tag.bad   { background: color-mix(in oklch, var(--bad) 14%, var(--bg-2));  color: var(--bad); }
.action-tag.warn  { background: color-mix(in oklch, var(--warn) 14%, var(--bg-2)); color: var(--warn); }
.action-tag.muted { background: var(--bg-3); color: var(--ink-3); }

/* Donut wrap (sales-specific) */
.sales-donut-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 14px;
  align-items: center;
}
@media (max-width: 700px) { .sales-donut-row { grid-template-columns: 1fr; } }
.donut-wrap-sales { display: flex; align-items: center; justify-content: center; }
.sales-donut { width: 160px; height: 160px; }
.sales-donut-empty {
  color: var(--ink-3); font-style: italic; font-size: 12px;
  padding: 24px; text-align: center;
}
.legend-list { display: flex; flex-direction: column; gap: 4px; }
.legend-row {
  display: grid;
  grid-template-columns: 12px 1fr auto auto;
  gap: 8px; align-items: center;
  font-size: 11.5px;
  padding: 3px 0;
  border-bottom: 1px solid var(--line-soft);
}
.legend-row:last-child { border-bottom: 0; }
/* Patch 13-F.1 item 3 — TOTAL row in donut legends */
.legend-row.legend-total {
  border-top: 2px solid var(--line);
  border-bottom: 0;
  padding-top: 6px;
  margin-top: 4px;
  font-weight: 700;
}
.legend-row.legend-total b { color: var(--ink-0); }
.legend-sw { width: 10px; height: 10px; border-radius: 2px; }
.legend-name { color: var(--ink-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.legend-val { color: var(--ink-1); font-feature-settings: "tnum"; }
.legend-pct { color: var(--ink-3); }

/* Payment success table */
.pay-success-tbl {
  margin-top: 12px;
  width: 100%;
  font-size: 12px;
}

/* Cross-tab payment × status */
.pay-cross-tbl th, .pay-cross-tbl td {
  white-space: nowrap;
  padding: 6px 8px;
  font-size: 11.5px;
}

/* Margin colour scale shared with action-tag heuristics */
.pp-good  { color: var(--good); }
.pp-warn  { color: var(--warn); }
.pp-bad   { color: var(--bad); }
.pp-margin-low { color: var(--bad); font-weight: 600; }

/* ════════════════════════════════════════════════════════════════════
   PATCH 13-F.2 — Sales Round 2 (math tooltip + cat L1/L2/L3 seg + ABC)
   ════════════════════════════════════════════════════════════════════ */

/* Math tooltip overlay (items 14+15) */
.math-tip {
  position: fixed;
  z-index: 9000;
  max-width: 360px;
  background: var(--bg-1);
  border: 1px solid color-mix(in oklch, var(--brand) 30%, var(--line));
  border-radius: 8px;
  padding: 10px 14px;
  box-shadow: 0 12px 36px color-mix(in oklch, var(--bg-0) 70%, transparent);
  font-size: 12px;
  color: var(--ink-1);
  line-height: 1.45;
  pointer-events: none;
  transition: opacity 0.12s ease;
}
.math-tip[hidden] { display: none; }
.math-tip-title {
  font-weight: 700;
  color: var(--ink-0);
  font-size: 12.5px;
  margin-bottom: 4px;
  letter-spacing: 0.01em;
}
.math-tip-body {
  white-space: pre-line;
  color: var(--ink-2);
  font-family: 'Inter', sans-serif;
}

/* Make any [data-tip] / [data-tip-title] hint that hover is interactive */
[data-tip], [data-tip-title] { cursor: help; }
.tbl thead [data-tip], .tbl thead [data-tip-title],
table.tbl thead th[data-tip], table.tbl thead th[data-tip-title] {
  position: relative;
}

/* Cat L1/L2/L3 seg (item 20) */
.cat-level-seg button { min-width: 28px; padding: 3px 9px; font-size: 10.5px; font-weight: 600; }

/* ABC class chip (item 18) */
.abc-tag {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  min-width: 22px;
  text-align: center;
  font-size: 10.5px;
  font-weight: 700;
}

/* Top SKUs page-more button + reset */
.tbl-skus + * .btn,
.card-h .right .btn.ghost { font-size: 11.5px; padding: 4px 10px; }
.card-h .right .btn.ghost[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ════════════════════════════════════════════════════════════════════
   PATCH 13-H — Funnel page rewrite
   ════════════════════════════════════════════════════════════════════ */

.pg-funnel-v13h { display: flex; flex-direction: column; gap: 14px; }

/* Source toggle */
.funnel-source-seg button { min-width: 56px; padding: 4px 12px; font-size: 11px; font-weight: 600; }

/* Funnel hero bars */
.funnel-bars { display: flex; flex-direction: column; gap: 6px; padding: 6px 0; }
.funnel-row {
  display: grid;
  grid-template-columns: 220px 1fr 220px;
  gap: 12px; align-items: center;
}
.funnel-row-label { color: var(--ink-1); font-weight: 500; font-size: 12.5px; }
.funnel-row-bar {
  height: 26px; background: var(--bg-2); border-radius: 4px; overflow: hidden;
  position: relative;
}
.funnel-bar-fill {
  display: block; height: 100%;
  background: linear-gradient(90deg,
    color-mix(in oklch, var(--brand) 80%, var(--info)) 0%,
    color-mix(in oklch, var(--info)  60%, var(--brand)) 100%);
  border-radius: 4px;
}
.funnel-row-meta {
  display: inline-flex; align-items: baseline; gap: 8px;
  font-size: 12px;
  justify-content: flex-end;
}
.funnel-row-count { color: var(--ink-0); font-weight: 600; }
.funnel-row-pct {
  background: var(--bg-3); color: var(--ink-2);
  padding: 2px 6px; border-radius: 10px;
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px;
}
.funnel-cr {
  color: var(--ink-3); font-size: 10.5px;
  font-family: 'JetBrains Mono', monospace;
}
.funnel-row-arrow {
  text-align: center; color: var(--ink-3); font-size: 10px;
  height: 14px; line-height: 14px;
}
.funnel-est-tag {
  display: inline-block; margin-left: 4px;
  background: var(--bg-3); color: var(--ink-3);
  font-size: 9px; padding: 1px 5px; border-radius: 4px;
}

/* $-loss cards */
.funnel-loss-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}
.funnel-loss-card {
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 6px;
}
.funnel-loss-card .loss-step {
  font-size: 10.5px; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600;
}
.funnel-loss-card .loss-amount {
  font-family: 'JetBrains Mono', monospace;
  font-feature-settings: "tnum";
  font-size: 22px; font-weight: 700;
  color: var(--ink-0);
  line-height: 1.1;
}
.funnel-loss-card .loss-meta { font-size: 11px; color: var(--ink-2); }
.funnel-loss-card .loss-action {
  font-size: 11.5px; color: var(--ink-2);
  border-top: 1px solid var(--line-soft);
  padding-top: 6px;
}
.funnel-loss-card.sev-red    { border-left-color: var(--bad);  background: color-mix(in oklch, var(--bad) 6%, var(--bg-2)); }
.funnel-loss-card.sev-red .loss-amount { color: var(--bad); }
.funnel-loss-card.sev-amber  { border-left-color: var(--warn); background: color-mix(in oklch, var(--warn) 6%, var(--bg-2)); }
.funnel-loss-card.sev-amber .loss-amount { color: var(--warn); }
.funnel-loss-card.sev-green  { border-left-color: var(--good); }
.funnel-loss-card.sev-green .loss-amount { color: var(--good); }

/* Patch 13-DESIGN-INT.1 — Item 11: pyramid LEFT (1.3) + daily chart RIGHT (1).
   Replaces .funnel-viz narrowing bars with a 2-column hero. Single accent
   tint (no rainbow) per Йолтмайстер 2026-05-07 feedback. */
/* Patch 13-POLISH.1 — Item 3: compact funnel grid.
   1.2fr / 1fr (slight rebalance from 1.3fr) + 24px gap + 500px max-height
   so the entire pyramid+chart block fits in one viewport. Hero scoreboards,
   $-loss block, GA4 sub-blocks (rendered outside this grid) untouched. */
/* Patch 13-FUNNEL-FIX-2 — horizontal bars mirror canonical .aud-deepest pattern.
   Count OUTSIDE bar (no min-width clamp), bar fill — pure proportional span.
   Both .funnel-grid children equal height via min-height: 0 + flex-fill. */
.funnel-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-lg);
  padding: 4px 0 2px 0;
  align-items: stretch;
  /* Patch 13-FUNNEL-FIX-2 — Йолт: equal height, align by smaller (pyramid).
     Pyramid 5 rows × ~26px + gaps + padding ~ 240px. Daily chart wrap stretch
     до тієї ж висоти (canvas flex-fill). */
  min-height: 260px;
}
@media (max-width: 1100px) {
  .funnel-grid { grid-template-columns: 1fr; min-height: 0; }
}

.funnel-pyramid {
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: var(--space-md) var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: stretch;
  min-height: 0;
  overflow: hidden;
}
.funnel-pyramid .fp-bars {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  width: 100%;
}

.fp-bar-row {
  display: grid;
  grid-template-columns: 220px 1fr 120px;
  align-items: center;
  gap: var(--space-md);
  cursor: pointer;
  transition: background 120ms ease;
  padding: 2px 4px;
  border-radius: 4px;
}
.fp-bar-row:hover { background: color-mix(in oklch, var(--brand) 4%, transparent); }
.fp-bar-row.is-active { background: color-mix(in oklch, var(--brand) 10%, transparent); }
.fp-bar-label {
  font-size: 12.5px;
  color: var(--ink-1);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fp-bar-track {
  position: relative;
  background: var(--bg-2);
  border-radius: 4px;
  height: 22px;
  overflow: hidden;
  border: 1px solid var(--line-soft);
}
.fp-bar-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg,
    color-mix(in oklch, var(--brand) 35%, transparent),
    color-mix(in oklch, var(--brand) 75%, transparent));
  border-radius: 3px 0 0 3px;
  transition: filter 120ms ease;
}
.fp-bar-row:hover .fp-bar-fill { filter: brightness(1.12); }
.fp-bar-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--ink-1);
  white-space: nowrap;
}
.fp-bar-line {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.fp-bar-count { color: var(--ink-0); font-weight: 600; }
.fp-bar-sep { color: var(--ink-3); }
.fp-bar-pct { color: var(--ink-1); }
.fp-bar-drop {
  color: var(--bad);
  font-size: 10.5px;
  font-weight: 500;
}
@media (max-width: 720px) {
  .fp-bar-row { grid-template-columns: 1fr; gap: var(--space-xs); }
  .fp-bar-meta { align-items: flex-start; flex-direction: row; gap: var(--space-sm); }
}
.funnel-pyramid .fp-step {
  cursor: pointer;
  transition: filter 120ms ease, fill-opacity 120ms ease;
}
.funnel-pyramid .fp-step:hover { filter: brightness(1.18); }
.funnel-pyramid .fp-step.is-active { stroke: var(--ink-0); stroke-width: 0.8; }
.funnel-pyramid .fp-name {
  font-size: 4.6px;
  font-weight: 600;
  fill: var(--ink-1);
}
.funnel-pyramid .fp-count {
  font-size: 6.8px;
  font-weight: 700;
  fill: var(--ink-0);
  font-family: 'JetBrains Mono', monospace;
}
.funnel-pyramid .fp-pct {
  font-size: 4.4px;
  fill: var(--bg-0);
  font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
  opacity: 0.85;
}
.funnel-pyramid .fp-drop {
  font-size: 4.2px;
  fill: var(--bad);
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
}
.funnel-pyramid .fp-drop-pct { fill: var(--ink-3); font-weight: 500; }

.funnel-daily-chart-wrap {
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 12px 14px 8px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* Patch 13-FUNNEL-FIX-2 — height aligned to pyramid content (Йолт ask:
     по меншому). Min-height: 0 щоб grid stretch працював; canvas grows to fill. */
  min-height: 0;
  overflow: hidden;
}
.funnel-daily-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 10.5px;
  color: var(--ink-2);
  border-bottom: 1px solid var(--line-soft);
  padding-bottom: 6px;
}
.funnel-daily-legend .fdc-leg {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'Inter Tight', system-ui, sans-serif;
}
.funnel-daily-legend .fdc-leg i {
  width: 9px; height: 9px;
  border-radius: 2px;
  display: inline-block;
}
.funnel-daily-chart {
  flex: 1 1 auto;
  /* Patch 13-FUNNEL-FIX-2 — min-height removed (was 280px). Canvas grows to fill
     parent .funnel-daily-chart-wrap, який stretch до висоти pyramid content. */
  position: relative;
  min-height: 0;
}
.funnel-daily-chart canvas {
  width: 100% !important;
  height: 100% !important;
}

/* Sources table tweaks */
.funnel-sources-tbl td.v { font-family: 'JetBrains Mono', monospace; font-feature-settings: "tnum"; }

/* Mobile vs Desktop funnel */
.funnel-device-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
@media (max-width: 900px) { .funnel-device-row { grid-template-columns: 1fr; } }
.device-funnel {
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.device-funnel.sev-red    { border-left-color: var(--bad); }
.device-funnel.sev-amber  { border-left-color: var(--warn); }
.device-funnel.sev-green  { border-left-color: var(--good); }
.device-funnel-head {
  display: flex; align-items: baseline; gap: 8px;
  border-bottom: 1px solid var(--line-soft);
  padding-bottom: 6px;
}
.device-funnel-head .device-icon { font-size: 18px; }
.device-funnel-head .device-name {
  font-weight: 600; color: var(--ink-0);
  text-transform: capitalize; flex: 1;
}
.device-funnel-head .device-cr {
  color: var(--ink-1);
  font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700;
}
.device-row {
  display: grid; grid-template-columns: 90px 1fr 110px;
  align-items: center; gap: 8px;
  font-size: 12px;
}
.device-row-lbl { color: var(--ink-3); font-size: 11px; }
.device-row-bar {
  height: 8px; background: var(--bg-3); border-radius: 2px; overflow: hidden;
}
.device-row-bar > span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--brand) 0%, var(--info) 100%);
}
.device-row-bar.device-row-bar-rev { background: color-mix(in oklch, var(--good) 28%, var(--bg-3)); }
.device-row-val {
  text-align: right; color: var(--ink-0); font-weight: 600;
  font-family: 'JetBrains Mono', monospace; font-feature-settings: "tnum";
}

/* Products block */
.funnel-products-row {
  display: grid; grid-template-columns: 320px 1fr; gap: 14px;
}
@media (max-width: 1000px) { .funnel-products-row { grid-template-columns: 1fr; } }
.funnel-products-donuts {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.funnel-products-donut {
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 8px 10px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.funnel-products-donut .lbl {
  font-size: 10px; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.funnel-products-donut .sales-donut { width: 140px; height: 140px; }
.funnel-products-tbl table.tbl { width: 100%; }

/* CRM truth grid (existing — tightened) */
.funnel-crm-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
}
@media (max-width: 800px) { .funnel-crm-grid { grid-template-columns: repeat(2, 1fr); } }
.funnel-crm-card {
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  padding: 10px 12px;
}
.funnel-crm-card .funnel-crm-label {
  font-size: 10px; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.funnel-crm-card .funnel-crm-num {
  font-family: 'JetBrains Mono', monospace;
  font-feature-settings: "tnum";
  color: var(--ink-0); font-weight: 700;
  font-size: 18px; line-height: 1.2; margin-top: 2px;
}

/* ════════════════════════════════════════════════════════════════════
   PATCH 13-I — Plan vs Fact rewrite
   ════════════════════════════════════════════════════════════════════ */

.pg-pvf-v13i { display: flex; flex-direction: column; gap: 14px; }
.pvf-month-row {
  display: flex; align-items: center; gap: 12px;
  margin-top: 6px;
  font-size: 12.5px;
}
.pvf-month-row label { color: var(--ink-3); font-weight: 500; }
.pvf-month-row select {
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  color: var(--ink-1);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 12px;
}
.pvf-elapsed { color: var(--ink-3); font-size: 11.5px; }

/* Hero scorecard strip → use existing .scorecard-strip with 4 cols */
.pvf-hero { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .pvf-hero { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { .pvf-hero { grid-template-columns: 1fr; } }

/* 12-month attainment chart */
.pvf-attainment-wrap { width: 100%; }
.pvf-attainment-svg { width: 100%; height: 240px; display: block; }
.pvf-attainment-legend {
  display: inline-flex; flex-wrap: wrap; gap: 12px;
  margin-top: 6px;
  font-size: 10.5px;
  color: var(--ink-3);
}
.pvf-attainment-legend .zone {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 8px; border-radius: 10px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
}
.pvf-attainment-legend .zone.red    { color: var(--bad);   border-color: color-mix(in oklch, var(--bad)  35%, var(--line)); }
.pvf-attainment-legend .zone.amber  { color: var(--warn);  border-color: color-mix(in oklch, var(--warn) 35%, var(--line)); }
.pvf-attainment-legend .zone.green  { color: var(--good);  border-color: color-mix(in oklch, var(--good) 35%, var(--line)); }
.pvf-attainment-legend .zone.glow   { color: var(--brand); border-color: color-mix(in oklch, var(--brand) 35%, var(--line)); }

/* Trend mini cards */
.pvf-trend-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (max-width: 1100px) { .pvf-trend-row { grid-template-columns: 1fr; } }
.pvf-trend-card {
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 8px 10px;
  display: flex; flex-direction: column; gap: 4px;
}
.pvf-trend-head {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 11.5px;
}
.pvf-trend-head .lbl {
  color: var(--ink-2); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
  font-size: 10px;
  flex: 1;
}
.pvf-trend-head .vals { display: inline-flex; gap: 8px; font-size: 10.5px; }
.pvf-trend-head .vals .plan { color: var(--brand); }
.pvf-trend-head .vals .actual { color: var(--good); }
.pvf-trend-svg { width: 100%; height: 130px; display: block; }

/* Manager table */
.pvf-managers-tbl td.r.v { font-family: 'JetBrains Mono', monospace; font-feature-settings: "tnum"; }
.pvf-managers-tbl td .muted { color: var(--ink-3); font-style: italic; font-size: 11px; }
.pvf-managers-tbl tfoot tr.sum-row td { background: color-mix(in oklch, var(--brand) 6%, var(--bg-2)); }

/* Patch 13-I.1 — Sites column + %/₴ toggle */
.pvf-sites-cell {
  font-size: 11px;
  white-space: normal;
  max-width: 240px;
}
.pvf-sites-cell .site-badge {
  display: inline-block;
  background: color-mix(in oklch, var(--info) 14%, var(--bg-3));
  color: var(--info);
  border: 1px solid color-mix(in oklch, var(--info) 30%, var(--line));
  border-radius: 10px;
  padding: 1px 7px;
  margin: 1px 2px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  white-space: nowrap;
}
.pvf-sites-cell .site-badge.muted {
  color: var(--ink-3);
  border-color: var(--line);
  background: var(--bg-3);
  font-style: italic;
}
.pvf-mode-seg button {
  min-width: 36px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
}

/* Heatmap (manager × month) */
.pvf-heatmap {
  display: flex; flex-direction: column; gap: 1px;
  overflow-x: auto;
}
.pvf-heatmap-row { display: flex; gap: 1px; }
.pvf-heatmap-cell {
  flex: 1 1 0;
  min-width: 44px; height: 28px;
  background: var(--bg-2);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--ink-1);
  display: flex; align-items: center; justify-content: center;
  border-radius: 2px;
}
.pvf-heatmap-cell.pvf-heatmap-rowhead {
  flex: 0 0 180px;
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  background: transparent;
  justify-content: flex-start;
  padding-left: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pvf-heatmap-cell.pvf-heatmap-colhead {
  background: transparent;
  color: var(--ink-3);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pvf-heatmap-row.pvf-heatmap-header { margin-bottom: 2px; }

/* ════════════════════════════════════════════════════════════════════
   PATCH 13-J — Канали page rewrite
   ════════════════════════════════════════════════════════════════════ */

.pg-channels-v13j { display: flex; flex-direction: column; gap: 14px; }
.pg-channels-v13j .ch-hero { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .pg-channels-v13j .ch-hero { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { .pg-channels-v13j .ch-hero { grid-template-columns: 1fr; } }

/* Ad spend scoreboard */
.ad-spend-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (max-width: 900px) { .ad-spend-grid { grid-template-columns: 1fr; } }
.ad-spend-card {
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 6px;
  position: relative;
}
.ad-spend-card.is-winner {
  border-color: color-mix(in oklch, var(--warn) 50%, var(--line));
  background:
    radial-gradient(120% 80% at 100% 0%, color-mix(in oklch, var(--warn) 14%, transparent) 0%, transparent 60%),
    var(--bg-2);
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--warn) 30%, transparent),
              0 0 16px -4px color-mix(in oklch, var(--warn) 40%, transparent);
}
.ad-spend-card .ad-spend-label {
  font-size: 11px; color: var(--ink-2);
  text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600;
  display: flex; align-items: center; gap: 6px;
}
.ad-spend-card .winner-tag {
  font-size: 10px; color: var(--warn); font-weight: 700;
  text-transform: none; letter-spacing: 0;
}
.ad-spend-card .ad-spend-stats {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px;
}
@media (max-width: 1200px) { .ad-spend-card .ad-spend-stats { grid-template-columns: repeat(3, 1fr); } }
.ad-spend-card .ad-spend-stats > div {
  display: flex; flex-direction: column; gap: 2px;
}
.ad-spend-card .ad-spend-stats .lbl {
  font-size: 10px; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.ad-spend-card .ad-spend-stats .val {
  font-family: 'JetBrains Mono', monospace;
  font-feature-settings: "tnum";
  color: var(--ink-0); font-weight: 600;
  font-size: 14px;
}
.ad-spend-card .ad-spend-stats .val.gold { color: var(--warn); }
.ad-spend-card .ad-spend-empty { color: var(--ink-3); font-style: italic; font-size: 12px; }

/* Google vs Meta compare */
.gm-compare {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
@media (max-width: 900px) { .gm-compare { grid-template-columns: 1fr; } }
.gm-side {
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.gm-google { border-left: 3px solid var(--good); }
.gm-meta   { border-left: 3px solid var(--info); }
.gm-head {
  font-weight: 600; color: var(--ink-0); font-size: 13px;
  border-bottom: 1px solid var(--line-soft); padding-bottom: 6px;
}
.gm-rows { display: flex; flex-direction: column; gap: 4px; }
.gm-row {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 4px 6px; border-radius: 4px;
  font-size: 12px;
}
.gm-row span { color: var(--ink-3); }
.gm-row b.mono { color: var(--ink-0); font-family: 'JetBrains Mono', monospace; font-feature-settings: "tnum"; font-weight: 600; }
.gm-row.is-winner {
  background: color-mix(in oklch, var(--warn) 12%, transparent);
}
.gm-row.is-winner b.mono { color: var(--warn); }
.gm-trend {
  display: flex; align-items: center; gap: 8px;
  border-top: 1px solid var(--line-soft); padding-top: 8px;
  font-size: 11px; color: var(--ink-2);
}
.gm-trend .delta { font-weight: 600; }
.gm-trend .delta.up { color: var(--good); }
.gm-trend .delta.dn { color: var(--bad); }

/* Dimension toggle */
.ch-dim-seg button { font-size: 10.5px; padding: 4px 9px; font-weight: 500; }

/* Detailed channels table */
.ch-table td.v {
  font-family: 'JetBrains Mono', monospace;
  font-feature-settings: "tnum";
}
.ch-table .ch-spark-cell {
  padding: 2px 6px;
  white-space: nowrap;
}
.ch-table tfoot tr.sum-row td {
  border-top: 2px solid var(--line);
  font-weight: 700;
  background: color-mix(in oklch, var(--brand) 6%, var(--bg-2));
}

/* Patch 13-DESIGN-INT — Item 3: Channels drill-down sub-tables.
   Bucket row becomes clickable; drill row appears as next sibling on click. */
.ch-table tbody tr.bucket-row { cursor: pointer; transition: background 120ms ease; }
.ch-table tbody tr.bucket-row:hover { background: color-mix(in oklch, var(--brand) 6%, transparent); }
.ch-table tbody tr.bucket-row.is-open {
  background: color-mix(in oklch, var(--brand) 10%, transparent);
}
.ch-table tbody tr.bucket-row.is-open td { border-bottom-color: transparent; }
.ch-table .bucket-twist {
  display: inline-block; width: 12px; color: var(--ink-3);
  font-size: 10px; transition: color 120ms ease;
}
.ch-table tbody tr.bucket-row.is-open .bucket-twist { color: var(--brand); }

.ch-table tbody tr.bucket-drill td {
  padding: 0 0 12px 0;
  background: color-mix(in oklch, var(--bg-elev) 70%, var(--bg));
  border-top: none;
}
.ch-table .drill-tabs {
  display: flex; gap: 6px; padding: 10px 16px 8px 32px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-elev);
}
.ch-table .drill-tabs button {
  font: inherit; font-size: 12px; line-height: 1; cursor: pointer;
  padding: 6px 12px; border-radius: 6px;
  background: transparent; color: var(--ink-2);
  border: 1px solid transparent;
}
.ch-table .drill-tabs button:hover { color: var(--ink-1); background: var(--bg-2); }
.ch-table .drill-tabs button.on {
  background: var(--bg);
  color: var(--brand);
  border-color: var(--line);
  font-weight: 600;
}
.ch-table .drill-content { padding: 12px 16px 6px 32px; }
.ch-table .drill-meta {
  font-size: 11px; color: var(--ink-3); margin-bottom: 8px;
  font-family: 'JetBrains Mono', monospace;
}
.ch-table .drill-tbl { width: 100%; font-size: 12px; }
.ch-table .drill-tbl th {
  text-align: left; padding: 6px 10px;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--ink-3); font-weight: 600;
  border-bottom: 1px solid var(--line);
}
.ch-table .drill-tbl th.r { text-align: right; }
.ch-table .drill-tbl td { padding: 5px 10px; border-bottom: 1px solid color-mix(in oklch, var(--line) 50%, transparent); }
.ch-table .drill-tbl td.r { text-align: right; }
.ch-table .drill-tbl td.muted { color: var(--ink-3); }
.ch-table .drill-tbl td.mono { font-family: 'JetBrains Mono', monospace; font-feature-settings: "tnum"; }
.ch-table .drill-pill {
  display: inline-block; padding: 2px 7px; border-radius: 999px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.02em;
  background: var(--bg-2); color: var(--ink-2);
  border: 1px solid var(--line);
}
.ch-table .drill-pill-won {
  background: color-mix(in oklch, var(--good) 15%, var(--bg-2));
  color: var(--good); border-color: color-mix(in oklch, var(--good) 30%, var(--line));
}
.ch-table .drill-pill-rejected,
.ch-table .drill-pill-not_lead {
  background: color-mix(in oklch, var(--bad) 12%, var(--bg-2));
  color: var(--bad); border-color: color-mix(in oklch, var(--bad) 25%, var(--line));
}
.ch-table .drill-pill-new,
.ch-table .drill-pill-transit {
  background: color-mix(in oklch, var(--warn, var(--brand)) 15%, var(--bg-2));
  color: var(--warn, var(--brand));
  border-color: color-mix(in oklch, var(--warn, var(--brand)) 25%, var(--line));
}
.ch-table .drill-trend-chart { display: flex; justify-content: center; padding: 8px 0; }
.ch-table .drill-trend-chart svg { width: 100%; max-width: 720px; height: auto; }
.ch-table .drill-trend-grid {
  display: flex; gap: 2px; align-items: flex-end;
  padding: 8px 0 4px 0; overflow-x: auto;
}
.ch-table .drill-trend-tick {
  flex: 1 1 18px; min-width: 18px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.ch-table .drill-trend-bar {
  width: 60%; min-height: 2px;
  background: var(--brand);
  border-radius: 2px 2px 0 0;
  transition: opacity 120ms ease;
}
.ch-table .drill-trend-tick:hover .drill-trend-bar { opacity: 0.7; }
.ch-table .drill-trend-day {
  font-size: 9px; font-family: 'JetBrains Mono', monospace;
  color: var(--ink-3);
  white-space: nowrap;
  transform: rotate(-45deg); transform-origin: center;
}

/* Channel trend chart */
.ch-trend-svg { width: 100%; height: 220px; display: block; }
.ch-trend-legend {
  display: flex; flex-wrap: wrap; gap: 12px;
  font-size: 11px; color: var(--ink-2);
  margin-top: 8px;
}
.ch-trend-legend-item {
  display: inline-flex; align-items: center; gap: 6px;
}
.ch-trend-legend-item i {
  width: 10px; height: 10px; border-radius: 2px; display: inline-block;
}

/* Patch 13-DESIGN-INT.1 — Item 2: NEW /ads comparison page ───────── */

.pg-ads { display: flex; flex-direction: column; gap: 14px; }

/* Hero scoreboard — 8 .ads-sc cards */
.ads-scoreboard {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 8px;
}
@media (max-width: 1400px) { .ads-scoreboard { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 700px)  { .ads-scoreboard { grid-template-columns: repeat(2, 1fr); } }
.ads-sc {
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 6px;
}
.ads-sc-g { border-top: 2px solid var(--brand); }
.ads-sc-m { border-top: 2px solid oklch(0.74 0.16 320); }
.ads-sc-head {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-3); font-weight: 600;
  display: flex; align-items: center; gap: 6px;
}
.ads-sc-big {
  font-family: 'JetBrains Mono', monospace;
  font-size: 22px; font-weight: 600;
  color: var(--ink-0); line-height: 1;
}
.ads-sc-foot {
  font-size: 10.5px; color: var(--ink-3);
  font-family: 'JetBrains Mono', monospace;
}

/* Platform tags */
.pl-tag {
  display: inline-grid; place-items: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  font-size: 10px; font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  color: var(--bg-0);
}
.pl-tag.g { background: var(--brand); }
.pl-tag.m { background: oklch(0.74 0.16 320); }

.ads-narrative { padding: 0; }

/* Cockpits */
.ads-cockpits {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 1100px) { .ads-cockpits { grid-template-columns: 1fr; } }
.ads-cockpit {
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  display: flex; flex-direction: column;
}
.ads-cockpit-g { border-top: 3px solid var(--brand); }
.ads-cockpit-m { border-top: 3px solid oklch(0.74 0.16 320); }
.ads-cockpit-h {
  background: var(--bg-2);
  border-bottom: 1px solid var(--line-soft);
  padding: 12px 16px;
  font-size: 14px;
  color: var(--ink-0); font-weight: 600;
  display: flex; align-items: center; gap: 8px;
  border-radius: 12px 12px 0 0;
}
.ads-cockpit-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 14px; }
.ads-cockpit-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.ads-kpi {
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 10px 12px;
}
.ads-kpi.is-winner { border-color: color-mix(in oklch, var(--good) 35%, var(--line)); background: color-mix(in oklch, var(--good) 5%, var(--bg-2)); }
.ads-kpi.is-loser  { border-color: color-mix(in oklch, var(--bad)  20%, var(--line)); }
.ads-kpi .l { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); margin-bottom: 4px; }
.ads-kpi .v { font-size: 16px; color: var(--ink-0); font-weight: 600; }
.ads-cockpit-top-h {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-3); font-weight: 600;
  margin-bottom: 8px;
}
.ads-camp-tbl { width: 100%; font-size: 12px; }
.ads-camp-tbl th {
  text-align: left; padding: 6px 8px;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-3); font-weight: 600;
  border-bottom: 1px solid var(--line-soft);
}
.ads-camp-tbl th.r { text-align: right; }
.ads-camp-tbl td {
  padding: 6px 8px;
  border-bottom: 1px solid color-mix(in oklch, var(--line) 50%, transparent);
}
.ads-camp-tbl td.r { text-align: right; }
.ads-camp-tbl .ads-camp-name {
  max-width: 280px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--ink-1);
}
.ads-camp-tbl .mono { font-family: 'JetBrains Mono', monospace; }

/* Cross-port */
.cross-port {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 1100px) { .cross-port { grid-template-columns: 1fr; } }
.cp-card {
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 14px 16px;
}
.cp-card-g { border-top: 2px solid var(--brand); }
.cp-card-m { border-top: 2px solid oklch(0.74 0.16 320); }
.cp-h {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--ink-1); font-weight: 600;
  margin-bottom: 10px;
}
.cp-rec {
  padding: 10px 0;
  border-bottom: 1px dashed var(--line);
}
.cp-rec:last-child { border-bottom: 0; }
.cp-rec-t {
  font-size: 13px; color: var(--ink-0); font-weight: 600;
  margin-bottom: 4px;
}
.cp-rec-d {
  font-size: 11.5px; color: var(--ink-2);
  line-height: 1.45; margin-bottom: 6px;
}
.cp-rec-impact {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  padding: 2px 8px; border-radius: 4px;
  background: color-mix(in oklch, var(--good) 12%, transparent);
  color: var(--good); font-weight: 600;
}

/* Bubble chart */
.bubble-zones {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 6px 0 10px 0;
}
.bubble-zones .zone {
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px;
  padding: 3px 8px; border-radius: 4px;
  font-weight: 600;
}
.bubble-zones .zone.scale       { color: var(--good); background: color-mix(in oklch, var(--good) 14%, transparent); }
.bubble-zones .zone.hold        { color: var(--info); background: color-mix(in oklch, var(--info) 14%, transparent); }
.bubble-zones .zone.investigate { color: var(--warn); background: color-mix(in oklch, var(--warn) 14%, transparent); }
.bubble-zones .zone.kill        { color: var(--bad);  background: color-mix(in oklch, var(--bad)  14%, transparent); }
.bubble-wrap {
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 12px;
}
.ads-bubble-svg {
  width: 100%; height: 380px;
  display: block;
}
.ads-bubble {
  transition: filter 120ms ease, fill-opacity 120ms ease;
}
.ads-bubble:hover { filter: brightness(1.18); fill-opacity: 0.7; }

/* Sparklines */
.ads-spark-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
@media (max-width: 1100px) { .ads-spark-row { grid-template-columns: repeat(2, 1fr); } }
.ads-spark-card {
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.ads-spark-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-3); font-weight: 600;
}
.ads-spark-svg svg { display: block; width: 100%; }
.ads-spark-meta {
  display: flex; justify-content: space-between; align-items: baseline;
}
.ads-spark-val { font-size: 18px; color: var(--ink-0); font-weight: 600; }
.ads-spark-delta {
  font-size: 11px; font-family: 'JetBrains Mono', monospace; font-weight: 600;
}

/* Drill modal */
.ads-modal-bg {
  position: fixed; inset: 0;
  background: oklch(0 0 0 / 0.55);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 20px; z-index: 230;
  overflow-y: auto;
  backdrop-filter: blur(4px);
}
.ads-modal-bg[hidden] { display: none; }
.ads-modal {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 14px;
  width: 100%; max-width: 980px;
  padding: 18px 20px;
  display: flex; flex-direction: column; gap: 14px;
  box-shadow: var(--shadow-high, 0 16px 32px -8px rgba(0,0,0,0.5));
}
.ads-modal-h {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
}
.ads-modal-h .pl-tag { width: 26px; height: 26px; font-size: 12px; }
.ads-modal-name {
  flex: 1;
  font-size: 17px; color: var(--ink-0); font-weight: 600;
}
.ads-modal-close {
  cursor: pointer;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  color: var(--ink-2);
  padding: 4px 10px; border-radius: 6px;
  font-size: 18px; line-height: 1;
}
.ads-modal-close:hover { color: var(--ink-0); background: var(--bg-3); }
.ads-modal-kpis {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
@media (max-width: 700px) { .ads-modal-kpis { grid-template-columns: repeat(2, 1fr); } }
.ads-modal-kpi {
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 10px 12px;
}
.ads-modal-kpi .l { font-size: 10px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px; }
.ads-modal-kpi .v { font-size: 18px; color: var(--ink-0); font-weight: 600; font-family: 'JetBrains Mono', monospace; }

/* Patch 13-DESIGN-INT.1 — Item 6: Managers borrow elements ───────── */

/* Trends panel 3-card row */
.trend-3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 8px 0;
}
@media (max-width: 1100px) { .trend-3col { grid-template-columns: 1fr; } }
.trend-card {
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 14px;
}
.trend-card.rising    { border-color: color-mix(in oklch, var(--good) 28%, var(--line)); }
.trend-card.declining { border-color: color-mix(in oklch, var(--bad)  28%, var(--line)); }
.trend-card.stable    { border-color: color-mix(in oklch, var(--ink-3) 18%, var(--line)); }
.trend-card .label {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: 600; margin-bottom: 8px;
}
.trend-card.rising    .label { color: var(--good); }
.trend-card.declining .label { color: var(--bad); }
.trend-card.stable    .label { color: var(--ink-2); }
.trend-card .trend-list { display: flex; flex-direction: column; gap: 5px; }
.trend-card .trend-empty {
  font-size: 11.5px; color: var(--ink-3); font-style: italic; padding: 4px 6px;
}
.trend-item {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 8px; align-items: center;
  padding: 5px 6px; border-radius: 6px;
  background: var(--bg-2);
}
.trend-item .av {
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 9px; font-weight: 700; color: var(--bg-0);
  font-family: 'JetBrains Mono', monospace;
}
.trend-item .nm { font-size: 12px; color: var(--ink-0); font-weight: 500; }
.trend-item .v {
  font-family: 'JetBrains Mono', monospace; font-size: 11.5px; font-weight: 600;
}
.trend-item .v.up   { color: var(--good); }
.trend-item .v.dn   { color: var(--bad); }
.trend-item .v.flat { color: var(--ink-3); }

/* Manager × Channel revenue heatmap */
.mgr-rev-wrap {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 10px; align-items: start;
  padding: 6px 0;
}
.mgr-rev-wrap .hm-row-labels {
  display: flex; flex-direction: column; gap: 3px; padding-top: 22px;
}
.mgr-rev-wrap .hm-row-label {
  height: 22px; font-size: 11px; color: var(--ink-2);
  display: flex; align-items: center; padding-left: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mgr-rev-cols-wrap {}
.mgr-rev-wrap .hm-col-labels {
  display: grid; gap: 3px;
  grid-template-columns: repeat(var(--cols, 8), 1fr);
  margin-bottom: 4px;
}
.mgr-rev-wrap .hm-col-label {
  font-size: 10px; color: var(--ink-3);
  text-align: center; text-transform: uppercase; letter-spacing: 0.06em;
  height: 18px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mgr-rev-wrap .hm-grid {
  display: grid; gap: 3px;
  grid-template-columns: repeat(var(--cols, 8), 1fr);
}
.mgr-rev-wrap .mgr-rev-cell {
  height: 22px; border-radius: 3px;
  display: grid; place-items: center;
  font-family: 'JetBrains Mono', monospace; font-size: 9.5px;
  cursor: default; transition: transform 120ms ease;
}
.mgr-rev-wrap .mgr-rev-cell:hover {
  transform: scale(1.08); outline: 1px solid var(--brand);
}

/* Manager modal trigger button (injected into name cell) */
.mgr-modal-trigger {
  background: transparent; border: 0;
  cursor: pointer; padding: 0 6px 0 0;
  font-size: 12px; opacity: 0.5;
  transition: opacity 120ms ease, transform 120ms ease;
}
.mgr-modal-trigger:hover { opacity: 1; transform: scale(1.18); }

/* Manager drill modal */
.mgr-modal-bg {
  position: fixed; inset: 0;
  background: oklch(0 0 0 / 0.55);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 20px; z-index: 220;
  overflow-y: auto;
  backdrop-filter: blur(4px);
}
.mgr-modal-bg[hidden] { display: none; }
.mgr-modal {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-high, 0 16px 32px -8px rgba(0,0,0,0.45));
  width: 100%; max-width: 1080px;
  padding: 18px;
  display: flex; flex-direction: column; gap: 14px;
}
.mgr-modal-h {
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
}
.mgr-modal-av {
  width: 42px; height: 42px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--bg-0);
  font-weight: 700; font-size: 14px;
  font-family: 'JetBrains Mono', monospace;
  flex: none;
}
.mgr-modal-info { flex: 1; min-width: 0; }
.mgr-modal-name {
  font-size: 18px; color: var(--ink-0); font-weight: 700;
  letter-spacing: -0.01em;
}
.mgr-modal-meta { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.mgr-modal-tabs {
  display: inline-flex;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  padding: 2px;
}
.mgr-modal-tabs button {
  background: transparent; border: 0;
  color: var(--ink-2);
  padding: 5px 14px; border-radius: 5px;
  cursor: pointer; font: inherit; font-size: 12px;
}
.mgr-modal-tabs button.on {
  background: var(--bg-3);
  color: var(--ink-0);
}
.mgr-modal-close {
  cursor: pointer; color: var(--ink-2);
  padding: 6px 10px; border-radius: 6px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  font-size: 18px; line-height: 1;
}
.mgr-modal-close:hover { color: var(--ink-0); background: var(--bg-3); }
.mgr-modal-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
@media (max-width: 700px) { .mgr-modal-grid-4 { grid-template-columns: repeat(2, 1fr); } }
.mgr-modal-mini {
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 10px 12px;
}
.mgr-modal-mini .l {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-3); margin-bottom: 4px;
}
.mgr-modal-mini .v {
  font-size: 18px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--ink-0); font-weight: 600;
}
.mgr-modal-section { margin-top: 14px; }
.mgr-modal-h2 {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-3); font-weight: 600; margin-bottom: 8px;
}
.mgr-modal-tbl { width: 100%; font-size: 12px; }
.mgr-modal-tbl th {
  text-align: left; padding: 6px 10px;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-3); font-weight: 600;
  border-bottom: 1px solid var(--line-soft);
}
.mgr-modal-tbl th.r { text-align: right; }
.mgr-modal-tbl td { padding: 5px 10px; border-bottom: 1px solid color-mix(in oklch, var(--line) 50%, transparent); }
.mgr-modal-tbl td.r { text-align: right; }
.mgr-modal-tbl td.muted { color: var(--ink-3); }
.mgr-modal-tbl td.mono { font-family: 'JetBrains Mono', monospace; }

/* Patch 13-DESIGN-INT.1 — Item 5: Channels borrow elements ───────── */

/* 3-donut row (Channel / Source / Medium split) */
.ch-donut-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding: 8px 0;
}
@media (max-width: 1100px) { .ch-donut-row { grid-template-columns: 1fr; } }
.ch-donut-card-inner {
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.ch-donut-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-3); font-weight: 600;
}
.ch-donut-wrap {
  display: grid; grid-template-columns: 132px 1fr;
  gap: 12px; align-items: center;
}
.ch-donut { width: 132px; height: 132px; }
.ch-donut-slice { transition: opacity 180ms ease, stroke-width 180ms ease; }
.ch-donut-list {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 11.5px;
}
.ch-donut-row-item {
  display: grid;
  grid-template-columns: 10px 1fr auto auto;
  gap: 8px; align-items: center;
  padding: 3px 5px; border-radius: 5px;
}
.ch-donut-row-item:hover { background: var(--bg-2); }
.ch-donut-row-item .sw { width: 8px; height: 8px; border-radius: 2px; }
.ch-donut-row-item .name {
  color: var(--ink-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}
.ch-donut-row-item .val {
  font-family: 'JetBrains Mono', monospace;
  color: var(--ink-0); font-weight: 500; font-size: 11px;
}
.ch-donut-row-item .pct {
  font-family: 'JetBrains Mono', monospace;
  color: var(--ink-3); width: 48px; text-align: right; font-size: 11px;
}

/* Channel × DOW heatmap */
.ch-dow-wrap {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 10px; align-items: start;
  padding: 6px 0;
}
.ch-dow-wrap .hm-row-labels {
  display: flex; flex-direction: column; gap: 3px;
  padding-top: 22px;   /* align with col headers */
}
.ch-dow-wrap .hm-row-label {
  height: 22px; font-size: 11px; color: var(--ink-2);
  display: flex; align-items: center; padding-left: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: transparent;
}
.ch-dow-wrap .hm-col-labels {
  display: grid; gap: 3px;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 4px;
}
.ch-dow-wrap .hm-col-label {
  font-size: 10px; color: var(--ink-3);
  text-align: center; text-transform: uppercase; letter-spacing: 0.06em;
  height: 18px;
}
.ch-dow-wrap .hm-grid {
  display: grid; gap: 3px;
  grid-template-columns: repeat(7, 1fr);
}
.ch-dow-wrap .ch-dow-cell {
  height: 22px; border-radius: 3px;
  display: grid; place-items: center;
  font-family: 'JetBrains Mono', monospace; font-size: 9.5px;
  cursor: default;
  transition: transform 120ms ease;
}
.ch-dow-wrap .ch-dow-cell:hover {
  transform: scale(1.08);
  outline: 1px solid var(--brand);
}

/* Channel × hour heatmap */
.ch-hour-heatmap { display: flex; flex-direction: column; gap: 1px; }
.ch-hour-heatmap .hm-row { display: flex; gap: 1px; }
.ch-hour-heatmap .hm-cell {
  flex: 1 1 0; min-width: 22px; height: 22px;
  background: var(--bg-2);
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  color: var(--ink-1);
  display: flex; align-items: center; justify-content: center;
  border-radius: 2px;
}
.ch-hour-heatmap .hm-cell.hm-rowhead {
  flex: 0 0 140px;
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 500;
  background: transparent;
  justify-content: flex-start;
  padding-left: 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ch-hour-heatmap .hm-cell.hm-colhead {
  background: transparent; color: var(--ink-3);
  font-weight: 600; font-size: 9px;
}
.ch-hour-heatmap .hm-row.hm-header { margin-bottom: 2px; }

/* Channel × device split */
.ch-device-row {
  display: flex; flex-direction: column; gap: 8px;
}
.ch-device-card {
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  padding: 8px 12px;
  display: grid;
  grid-template-columns: 160px 1fr 280px;
  gap: 12px; align-items: center;
}
@media (max-width: 900px) {
  .ch-device-card { grid-template-columns: 1fr; }
  .ch-device-card .ch-device-bar { width: 100%; }
}
.ch-device-name {
  font-weight: 600; color: var(--ink-1); font-size: 12.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ch-device-bar {
  height: 16px; display: flex; gap: 1px;
  background: var(--bg-3); border-radius: 3px; overflow: hidden;
}
.ch-device-bar .ch-device-mobile { background: var(--info); }
.ch-device-bar .ch-device-desktop { background: var(--good); }
.ch-device-vals {
  font-family: 'JetBrains Mono', monospace;
  font-feature-settings: "tnum";
  font-size: 11px; color: var(--ink-2);
  text-align: right;
  white-space: nowrap;
}

/* ════════════════════════════════════════════════════════════════════
   PATCH 13-H.1 — GA4 Engagement Detail block (Funnel page)
   ════════════════════════════════════════════════════════════════════ */
.ga4-engagement-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
@media (max-width: 1100px) { .ga4-engagement-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .ga4-engagement-grid { grid-template-columns: 1fr; } }
.ga4-eng-tile {
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 2px;
}
.ga4-eng-tile .lbl {
  font-size: 10px; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600;
}
.ga4-eng-tile .val {
  font-family: 'JetBrains Mono', monospace;
  font-feature-settings: "tnum";
  color: var(--ink-0); font-weight: 700;
  font-size: 18px; line-height: 1.2;
}
.ga4-eng-tile .sub { font-size: 10.5px; color: var(--ink-3); }
.ga4-eng-tile .sub .mono { color: var(--ink-1); font-weight: 600; }

/* Deepest funnel step distribution */
.ga4-engagement-extras {
  display: grid; grid-template-columns: 2fr 1fr; gap: 12px;
  margin-top: 10px;
}
@media (max-width: 1100px) { .ga4-engagement-extras { grid-template-columns: 1fr; } }
.ga4-eng-dfs {
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  padding: 10px 12px;
}
.ga4-eng-dfs-head {
  font-size: 11px; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600;
  margin-bottom: 8px;
}
.ga4-eng-dfs-row {
  display: grid; grid-template-columns: 140px 1fr 140px;
  align-items: center; gap: 8px;
  padding: 4px 0;
  font-size: 11.5px;
}
.ga4-eng-dfs-row .lbl { color: var(--ink-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ga4-eng-dfs-row .bar {
  height: 6px; background: var(--bg-3); border-radius: 2px; overflow: hidden;
}
.ga4-eng-dfs-row .bar i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--brand) 0%, var(--info) 100%);
}
.ga4-eng-dfs-row .val {
  font-family: 'JetBrains Mono', monospace;
  font-feature-settings: "tnum";
  text-align: right; color: var(--ink-1);
}
.ga4-eng-caveat {
  background: color-mix(in oklch, var(--info) 8%, var(--bg-2));
  border: 1px dashed color-mix(in oklch, var(--info) 30%, var(--line));
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 11.5px;
  color: var(--ink-2);
  line-height: 1.5;
}
.ga4-eng-caveat strong { color: var(--info); }
.ga4-eng-caveat code {
  background: var(--bg-3);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 11px;
}

/* ── 5. LEAK CARDS — close-loop status workflow ──────────── */
.leak-card.is-highlighted { /* already styled by patch 13-A glow */ }
.leak-card.leak-status-resolved {
  opacity: 0.55;
  border-color: color-mix(in oklch, var(--good) 30%, var(--line));
}
.leak-card.leak-status-dismissed {
  opacity: 0.4;
  border-color: var(--line-soft);
}
.leak-card.leak-status-in_progress {
  border-color: color-mix(in oklch, var(--warn) 40%, var(--line));
}

/* Patch 13-B.2 item 2 — inline status seg below the title (no popover) */
.leak-status-seg {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: 4px 0 2px;
}
.leak-status-seg .status-pill {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  color: var(--ink-2);
  border-radius: 12px;
  padding: 3px 8px;
  font-size: 10.5px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
}
.leak-status-seg .status-pill:hover { border-color: var(--brand); color: var(--ink-1); }
.leak-status-seg .status-pill .dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ink-3);
}
.leak-status-seg .status-pill.status-pill-bad   .dot { background: var(--bad); }
.leak-status-seg .status-pill.status-pill-warn  .dot { background: var(--warn); }
.leak-status-seg .status-pill.status-pill-good  .dot { background: var(--good); }
.leak-status-seg .status-pill.status-pill-muted .dot { background: var(--ink-3); }
.leak-status-seg .status-pill.on {
  background: color-mix(in oklch, var(--brand) 14%, var(--bg-1));
  border-color: color-mix(in oklch, var(--brand) 35%, var(--line));
  color: var(--brand);
  font-weight: 600;
}

.leak-status-wrap { position: relative; margin-left: auto; }
.leak-status-toggle {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  color: var(--ink-1);
  border-radius: 12px;
  padding: 3px 8px;
  font-size: 10.5px;
  cursor: pointer;
  font-weight: 500;
}
.leak-status-toggle:hover { border-color: var(--brand); }
.leak-status-toggle .dot,
.leak-status-opt .dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ink-3);
}
.leak-status-toggle.status-bad .dot,   .leak-status-opt.status-bad .dot   { background: var(--bad); }
.leak-status-toggle.status-warn .dot,  .leak-status-opt.status-warn .dot  { background: var(--warn); }
.leak-status-toggle.status-good .dot,  .leak-status-opt.status-good .dot  { background: var(--good); }
.leak-status-toggle.status-muted .dot, .leak-status-opt.status-muted .dot { background: var(--ink-3); }

.leak-status-menu {
  display: none;
  position: absolute;
  right: 0; top: calc(100% + 4px);
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 4px;
  z-index: 10;
  min-width: 140px;
  box-shadow: 0 8px 24px color-mix(in oklch, var(--bg-0) 70%, transparent);
}
.leak-status-menu.open { display: flex; flex-direction: column; gap: 2px; }
.leak-status-opt {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent;
  border: 0;
  padding: 5px 8px;
  font-size: 11.5px;
  color: var(--ink-1);
  cursor: pointer;
  border-radius: 4px;
  text-align: left;
}
.leak-status-opt:hover { background: var(--bg-2); }

/* ── 6. RISK BLOCKS (Concentration / Stockout / Pages / Talent / Geo) ── */
.risk-blocks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (max-width: 1100px) { .risk-blocks { grid-template-columns: 1fr; } }

.risk-block {
  /* uses .card base */
}
.risk-rows {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 4px;
}
.risk-row {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1.6fr;
  gap: 10px; align-items: center;
  padding: 6px 8px;
  border-left: 3px solid var(--line);
  background: var(--bg-2);
  border-radius: 4px;
  font-size: 11.5px;
}
.risk-row-name { color: var(--ink-1); }
.risk-row-name.small { font-size: 10.5px; }
.risk-row-name.mono  { font-family: 'JetBrains Mono', monospace; }
.risk-row-val {
  font-family: 'JetBrains Mono', monospace;
  font-feature-settings: "tnum";
  color: var(--ink-1);
  text-align: center;
}
.risk-row-val.mono { font-family: 'JetBrains Mono', monospace; }
.risk-row-meta { color: var(--ink-3); font-size: 11px; }
.risk-row-meta b { color: var(--ink-1); font-weight: 600; }

.risk-row-red    { border-left-color: var(--bad);  background: color-mix(in oklch, var(--bad)  6%, var(--bg-2)); }
.risk-row-amber,
.risk-row-warn   { border-left-color: var(--warn); background: color-mix(in oklch, var(--warn) 6%, var(--bg-2)); }
.risk-row-bad    { border-left-color: var(--bad);  background: color-mix(in oklch, var(--bad)  8%, var(--bg-2)); }
.risk-row-green,
.risk-row-good   { border-left-color: var(--good); }
.risk-row-info   { border-left-color: var(--info); background: color-mix(in oklch, var(--info) 6%, var(--bg-2)); }

.risk-row-h {
  font-size: 10.5px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 4px; margin-bottom: 2px;
  font-weight: 600;
}
.risk-summary {
  font-size: 11.5px;
  color: var(--ink-2);
  padding: 6px 8px;
  background: var(--bg-2);
  border-radius: 4px;
  margin-bottom: 4px;
}
.risk-empty {
  color: var(--ink-3); font-size: 11.5px; font-style: italic; padding: 8px;
}
.risk-cta { margin-top: 8px; }
.risk-cta .btn.ghost { font-size: 11.5px; }

/* Broken page row tweaks */
.broken-page-row .risk-row-name {
  font-size: 10.5px;
  word-break: break-all;
}

/* Patch 13-A.3 item 1 — .store-seg / .store-row CSS removed alongside the JS markup. */

/* ════════════════════════════════════════════════════════════════════
   PATCH 13-C — P&L layout overhaul (Result top / Input bottom collapsible /
   trend chart / smart auto-fill / sticky row names / Block C pivot).
   ════════════════════════════════════════════════════════════════════ */

.pg-pnl-v13c { display: flex; flex-direction: column; gap: 14px; }

/* Trend chart block */
.pnl-trend-block {
  /* uses .pnl-block base */
}
.pnl-trend-canvas-wrap { width: 100%; }
.pnl-trend-error { color: var(--bad); font-size: 12px; padding: 8px; }

/* Result block — sticky row names + view controls row */
.pnl-result-block .pnl-block-head {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.pnl-result-controls {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
}
.pnl-result-controls .btn.ghost {
  background: transparent;
  border: 1px solid var(--line-soft);
  color: var(--ink-2);
  padding: 4px 9px;
  font-size: 11.5px;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
}
.pnl-result-controls .btn.ghost:hover { color: var(--brand); border-color: var(--brand); }

/* Input block (collapsible) */
.pnl-input-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.pnl-input-head .pnl-actions { margin-left: auto; display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pnl-input-head .btn.ghost {
  background: transparent;
  border: 1px solid var(--line-soft);
  color: var(--ink-2);
  padding: 4px 10px;
  font-size: 11.5px;
  border-radius: 6px;
  cursor: pointer;
}
.pnl-input-head .btn.ghost:hover { color: var(--brand); border-color: var(--brand); }
.pnl-input-head .pnl-collapse-btn { font-weight: 500; }
.pnl-input-block .pnl-import-notice {
  background: color-mix(in oklch, var(--info) 8%, var(--bg-2));
  border: 1px dashed color-mix(in oklch, var(--info) 30%, var(--line));
  color: var(--ink-2);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 11.5px;
  margin: 8px 0;
}
.pnl-input-body[hidden] { display: none; }

/* Sticky row-name column for any P&L table.
   220 px guarantees room for "Marketing Margin (after ad spend)" without wrapping
   numeric cells; ellipsis kicks in only beyond that. */
.pnl-net th.pnl-name-col,
.pnl-net td.pnl-name-col,
.pnl-opex th.pnl-name-col,
.pnl-opex td.pnl-name-col,
.pnl-opex td.pnl-cat,
.pnl-pivot th.pnl-name-col,
.pnl-pivot td.pnl-name-col {
  position: sticky;
  left: 0;
  background: var(--bg-1);
  min-width: 220px;
  max-width: 320px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 1;
}
.pnl-net thead th.pnl-name-col,
.pnl-opex thead th.pnl-name-col,
.pnl-pivot thead th.pnl-name-col {
  z-index: 2;
  background: var(--bg-2);
}
/* Numeric columns never wrap — sum row stays single-line. */
.pnl-net td.num,
.pnl-net th,
.pnl-opex td.num,
.pnl-opex th,
.pnl-opex tfoot td,
.pnl-pivot td.num,
.pnl-pivot th {
  white-space: nowrap;
}

/* Smart-fill flash + user-edited indicator */
.pnl-cell-wrap {
  position: relative;
  padding: 0;
}
.pnl-cell-wrap.cell-flash {
  animation: pnl-cell-flash 600ms ease-out 1;
}
@keyframes pnl-cell-flash {
  0%   { background: color-mix(in oklch, var(--brand) 35%, transparent); }
  100% { background: transparent; }
}
.pnl-cell-wrap.is-user-edited input.pnl-cell {
  font-style: italic;
  color: var(--brand);
}
.pnl-cell-dot {
  position: absolute;
  top: 4px; right: 4px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--brand) 25%, transparent);
  pointer-events: auto;
  cursor: pointer;
}
.pnl-cell-wrap.is-first-col input.pnl-cell {
  background: color-mix(in oklch, var(--info) 4%, transparent);
}

/* Pivot block (Block C — restored) */
.pnl-pivot-controls {
  display: flex; align-items: center; gap: 14px; padding: 8px 0; flex-wrap: wrap;
  font-size: 12px;
}
.pnl-pivot-controls label { color: var(--ink-3); display: inline-flex; align-items: center; gap: 6px; }
.pnl-pivot-controls select {
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  color: var(--ink-1);
  padding: 3px 6px;
  border-radius: 4px;
  font-size: 12px;
}
.pnl-neg-cell { color: var(--bad); font-weight: 600; }

/* ════════════════════════════════════════════════════════════════════
   PATCH 13-C.1 — P&L hotfix UI (sparkline col / YoY row / forecast / drill modal)
   ════════════════════════════════════════════════════════════════════ */

/* Sparkline trend column */
.pnl-net th.pnl-trend-th { min-width: 110px; }
.pnl-net td.pnl-trend-cell {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 8px;
  white-space: nowrap;
}
.pnl-net td.pnl-trend-cell svg { display: block; flex: none; }
.pnl-trend-delta {
  font-family: 'JetBrains Mono', monospace;
  font-feature-settings: "tnum";
  font-size: 10.5px;
  font-weight: 600;
}
.pnl-trend-delta.up   { color: var(--good); }
.pnl-trend-delta.dn   { color: var(--bad); }
.pnl-trend-delta.flat { color: var(--ink-3); }

/* Drill row hover */
.pnl-net tr.pnl-drill-row {
  cursor: pointer;
  transition: background 0.12s ease;
}
.pnl-net tr.pnl-drill-row:hover td {
  background: color-mix(in oklch, var(--brand) 6%, transparent);
}

/* YoY sub-row */
.pnl-net tr.pnl-yoy-row td {
  background: color-mix(in oklch, var(--info) 4%, var(--bg-2));
  border-bottom: 1px solid var(--line-soft);
  font-size: 10.5px;
  padding: 3px 8px;
}
.pnl-net tr.pnl-yoy-row td.pnl-yoy-name {
  color: var(--ink-3);
  font-style: italic;
  padding-left: 28px;
  font-weight: 400;
}
.pnl-net tr.pnl-yoy-row td.pnl-yoy-cell {
  font-family: 'JetBrains Mono', monospace;
  font-feature-settings: "tnum";
}

/* Forecast columns */
.pnl-net th.pnl-forecast-th {
  background: color-mix(in oklch, var(--brand) 8%, var(--bg-2));
  border-left: 1px dashed color-mix(in oklch, var(--brand) 35%, var(--line));
  color: var(--brand);
}
.pnl-net th.pnl-forecast-th .pnl-forecast-tag {
  display: inline-block;
  margin-left: 4px;
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  background: color-mix(in oklch, var(--brand) 18%, transparent);
  padding: 1px 5px;
  border-radius: 4px;
  text-transform: lowercase;
  letter-spacing: 0;
}
.pnl-net td.pnl-forecast-cell {
  font-style: italic;
  color: var(--brand);
  background: color-mix(in oklch, var(--brand) 4%, transparent);
  border-left: 1px dashed color-mix(in oklch, var(--brand) 25%, var(--line));
}
/* Forecast button on-state */
.pnl-result-controls .btn.ghost.on,
.pnl-result-controls .btn.ghost[aria-pressed="true"] {
  background: color-mix(in oklch, var(--brand) 14%, var(--bg-1));
  border-color: color-mix(in oklch, var(--brand) 35%, var(--line));
  color: var(--brand);
}

/* ── Drill modal ───────────────────────────────────────── */
.pnl-drill-modal-backdrop {
  position: fixed; inset: 0;
  background: color-mix(in oklch, var(--bg-0) 60%, transparent);
  backdrop-filter: blur(2px);
  z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.pnl-drill-modal-backdrop[hidden] { display: none; }
.pnl-drill-modal {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px 22px;
  max-width: 720px; width: 100%;
  max-height: 86vh;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 14px;
  box-shadow: 0 16px 48px color-mix(in oklch, var(--bg-0) 70%, transparent);
}
.pnl-drill-head {
  display: flex; align-items: center; gap: 12px;
  border-bottom: 1px solid var(--line-soft);
  padding-bottom: 10px;
}
.pnl-drill-head h3 {
  margin: 0; font-size: 16px; color: var(--ink-0); font-weight: 600;
  flex: 1;
}
.pnl-drill-close {
  background: transparent;
  border: 1px solid var(--line-soft);
  color: var(--ink-2);
  width: 26px; height: 26px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}
.pnl-drill-close:hover { color: var(--brand); border-color: var(--brand); }
.pnl-drill-summary {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.pnl-drill-stat {
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  padding: 8px 12px;
}
.pnl-drill-stat .lbl {
  font-size: 10.5px; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.pnl-drill-stat .val {
  font-family: 'JetBrains Mono', monospace;
  font-feature-settings: "tnum";
  font-size: 18px; font-weight: 600;
  color: var(--ink-0);
  margin-top: 2px;
}
.pnl-drill-modal h4 {
  margin: 6px 0 4px;
  font-size: 12px; color: var(--ink-2);
  font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.pnl-drill-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.pnl-drill-tbl th, .pnl-drill-tbl td {
  padding: 5px 8px;
  border-bottom: 1px solid var(--line-soft);
  white-space: nowrap;
}
.pnl-drill-tbl th { color: var(--ink-3); font-weight: 500; text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; }
.pnl-drill-tbl td.r, .pnl-drill-tbl th.r { text-align: right; }
.pnl-drill-tbl td.mono, .pnl-drill-tbl th.mono { font-family: 'JetBrains Mono', monospace; font-feature-settings: "tnum"; }
.pnl-drill-daily { max-height: 260px; }
.pnl-drill-empty { color: var(--ink-3); font-style: italic; font-size: 12px; padding: 6px 0; }
.pnl-drill-rec {
  background: color-mix(in oklch, var(--brand) 8%, var(--bg-2));
  border: 1px solid color-mix(in oklch, var(--brand) 28%, var(--line));
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 12px;
  color: var(--ink-1);
  line-height: 1.45;
}
.pnl-drill-rec strong { color: var(--brand); margin-right: 6px; }

/* ════════════════════════════════════════════════════════════════════
   PATCH 13-A.5 — More filters panel + AI Recs beta tag
   ════════════════════════════════════════════════════════════════════ */

/* Bigger / bolder More filters button + total-count badge */
.topbar .btn.more-filters {
  padding: 8px 16px;
  font-weight: 600;
  font-size: 12.5px;
  background: var(--bg-1);
  border-color: var(--line-soft);
  color: var(--ink-1);
  display: inline-flex; align-items: center; gap: 8px;
}
.topbar .btn.more-filters:hover {
  border-color: var(--brand);
  color: var(--brand);
}
.topbar .btn.more-filters[aria-expanded="true"] {
  background: color-mix(in oklch, var(--brand) 14%, var(--bg-1));
  border-color: color-mix(in oklch, var(--brand) 35%, var(--line));
  color: var(--brand);
}
.topbar .btn.more-filters .ic { width: 14px; height: 14px; flex: none; }
.topbar .btn.more-filters .more-badge {
  display: none;
  background: var(--brand);
  color: var(--bg-0);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 8px;
  min-width: 18px;
  text-align: center;
  line-height: 1.4;
}
.topbar .btn.more-filters .more-badge.on { display: inline-block; }

/* Slide-in side panel + backdrop */
.filter-panel-backdrop {
  position: fixed; inset: 0;
  background: color-mix(in oklch, var(--bg-0) 60%, transparent);
  backdrop-filter: blur(2px);
  z-index: 199;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.filter-panel-backdrop.is-open { opacity: 1; }
.filter-panel-backdrop[hidden] { display: none; }

.filter-panel {
  position: fixed; right: 0; top: 0;
  height: 100vh; width: 360px;
  max-width: 92vw;
  background: var(--bg-1);
  border-left: 1px solid var(--line);
  z-index: 200;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.22s ease;
  box-shadow: -16px 0 48px color-mix(in oklch, var(--bg-0) 70%, transparent);
}
.filter-panel.is-open { transform: translateX(0); }
.filter-panel[hidden] { display: none; }

.filter-panel-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-soft);
}
.filter-panel-head h3 {
  margin: 0; flex: 1;
  font-size: 14px; font-weight: 600; color: var(--ink-0);
}
.filter-panel-reset,
.filter-panel-close {
  background: transparent;
  border: 1px solid var(--line-soft);
  color: var(--ink-2);
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  padding: 4px 10px;
}
.filter-panel-reset { color: var(--bad); border-color: color-mix(in oklch, var(--bad) 24%, var(--line)); }
.filter-panel-reset:hover { background: color-mix(in oklch, var(--bad) 12%, transparent); }
.filter-panel-close {
  width: 28px; height: 28px;
  padding: 0; font-size: 16px; line-height: 1;
  display: grid; place-items: center;
}
.filter-panel-close:hover { color: var(--brand); border-color: var(--brand); }

.filter-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 18px 80px;
}
.filter-panel-body .tb-cell-grid {
  display: flex; flex-direction: column; gap: 8px;
}
.filter-panel-body .tb-cell { width: 100%; }
.filter-panel-body .tb-cell .ms-root { width: 100%; }
.filter-panel-body .ms-toggle { width: 100%; }
.filter-panel-body .ms-panel {
  position: static;
  margin-top: 4px;
  width: 100%;
  min-width: 0;
  box-shadow: none;
}

.filter-panel-foot {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 12px 18px;
  border-top: 1px solid var(--line-soft);
  background: var(--bg-1);
  display: flex; justify-content: flex-end;
}
.filter-panel-apply {
  font-weight: 600;
  padding: 8px 18px;
}

/* Lock body scroll while panel is open */
body.filter-panel-locked { overflow: hidden; }

/* Sidebar beta tag */
.sb-tag.beta {
  background: color-mix(in oklch, var(--info) 16%, var(--bg-2));
  color: var(--info);
}

/* CEO redirect placeholder */
.pg-ceo-redirect { padding: 24px; }
.pg-ceo-redirect .redirect-card {
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 24px;
  max-width: 540px;
  text-align: center;
  margin: 40px auto;
}
.pg-ceo-redirect .redirect-card h2 { margin: 0 0 12px; color: var(--ink-0); }
.pg-ceo-redirect .redirect-card a { color: var(--brand); text-decoration: underline; }
/* Auto-scroll-into-view trigger via :target-like behaviour: on highlight, force scroll */
.leak-card.is-highlighted,
.anom.is-highlighted,
[data-rec-id].is-highlighted {
  position: relative;
  z-index: 1;
}

/* ─────────────────────────────────────────────────────────────────────────
   Patch 13-K item 12 — Gradient cell fill (heatmap-style table cells).
   Uniform behaviour across Google Ads + Meta Ads tables. Each cell sets
   --grad ∈ [0..1] inline; the colour mixes from transparent to the metric
   accent so high values glow stronger. Border-radius and padding reuse
   the existing .pg-table cell styling.
   ───────────────────────────────────────────────────────────────────────── */
.cell-grad-spend,
.cell-grad-rev,
.cell-grad-roas,
.cell-grad-conv {
  position: relative;
  background-clip: padding-box;
}
.cell-grad-spend  { background: color-mix(in oklch, var(--success) calc(var(--grad, 0) * 28%), transparent); }
.cell-grad-rev    { background: color-mix(in oklch, var(--success) calc(var(--grad, 0) * 28%), transparent); }
.cell-grad-roas   { background: color-mix(in oklch, var(--warning) calc(var(--grad, 0) * 32%), transparent); }
.cell-grad-conv   { background: color-mix(in oklch, var(--brand)   calc(var(--grad, 0) * 28%), transparent); }
body.mode-plusultra .cell-grad-spend,
body.mode-plusultra .cell-grad-rev   { background: color-mix(in oklch, var(--success) calc(var(--grad, 0) * 38%), transparent); }
body.mode-plusultra .cell-grad-roas  { background: color-mix(in oklch, var(--warning) calc(var(--grad, 0) * 42%), transparent); }
body.mode-plusultra .cell-grad-conv  { background: color-mix(in oklch, var(--brand)   calc(var(--grad, 0) * 38%), transparent); }

/* ─────────────────────────────────────────────────────────────────────────
   Patch 13-K.1 item 2 — MultiSelectSearchable: dropdown with search + chips.
   ───────────────────────────────────────────────────────────────────────── */
.mss-root { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 220px; }
.mss-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mss-chips:empty { display: none; }
.mss-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 4px 3px 8px;
  background: color-mix(in oklch, var(--brand) 22%, var(--bg-2));
  color: var(--ink-0);
  border: 1px solid color-mix(in oklch, var(--brand) 35%, transparent);
  border-radius: 999px;
  font-size: 12px; line-height: 1.2;
}
.mss-chip-label { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mss-chip-x {
  appearance: none; background: transparent; border: 0;
  color: var(--ink-2); cursor: pointer;
  font-size: 14px; line-height: 1; padding: 0 4px;
  border-radius: 50%;
}
.mss-chip-x:hover { background: color-mix(in oklch, var(--bad) 28%, transparent); color: var(--ink-0); }
.mss-toggle {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  background: var(--bg-1); color: var(--ink-0);
  border: 1px solid var(--line-soft); border-radius: 6px;
  font: inherit; cursor: pointer;
  min-height: 32px;
}
.mss-toggle:hover { border-color: var(--line); }
.mss-label { flex: 1 1 auto; text-align: left; font-size: 12px; color: var(--ink-1); }
.mss-count { font-size: 11px; padding: 1px 6px; border-radius: 999px; background: var(--bg-2); color: var(--ink-2); min-width: 18px; text-align: center; }
.mss-count.on { background: var(--brand); color: var(--bg-0); }
.mss-caret { font-size: 11px; color: var(--ink-3); }
.mss-panel {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--bg-1); border: 1px solid var(--line);
  border-radius: 6px;
  z-index: 60;
  padding: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.32);
  max-width: 380px;
}
.mss-search {
  width: 100%; padding: 6px 8px;
  background: var(--bg-0); color: var(--ink-0);
  border: 1px solid var(--line-soft); border-radius: 4px;
  font: inherit;
  margin-bottom: 6px;
}
.mss-search:focus { outline: none; border-color: var(--brand); }
.mss-actions { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.mss-link {
  appearance: none; background: transparent; border: 0;
  color: var(--brand); cursor: pointer;
  font-size: 11px; padding: 2px 4px;
}
.mss-link:hover { text-decoration: underline; }
.mss-shown { margin-left: auto; font-size: 10.5px; color: var(--ink-3); }
.mss-list {
  list-style: none; margin: 0; padding: 0;
  max-height: 240px; overflow-y: auto;
}
.mss-list li {
  padding: 0;
}
.mss-list label {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 6px;
  cursor: pointer;
  border-radius: 4px;
  font-size: 12px;
}
.mss-list label:hover { background: var(--bg-2); }
.mss-list input[type=checkbox] { accent-color: var(--brand); }
.mss-opt-label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mss-opt-count { font-size: 10.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.mss-empty { padding: 8px; color: var(--ink-3); font-size: 12px; text-align: center; }

body.mode-plusultra .mss-chip {
  background: color-mix(in oklch, var(--brand) 32%, var(--bg-2));
  border-color: color-mix(in oklch, var(--brand) 55%, transparent);
  box-shadow: 0 0 8px color-mix(in oklch, var(--brand) 28%, transparent);
}

/* ─────────────────────────────────────────────────────────────────────────
   Patch 13-K.1 item 3 — Hero scoreboards (big value + delta + sparkline +
   triple-period footer) on top of .scorecard-compound base.
   ───────────────────────────────────────────────────────────────────────── */
.scorecard-strip.scorecard-strip-6 {
  grid-template-columns: repeat(6, 1fr);
}
@media (max-width: 1400px) { .scorecard-strip.scorecard-strip-6 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 800px)  { .scorecard-strip.scorecard-strip-6 { grid-template-columns: repeat(2, 1fr); } }

.scorecard-compound .sc-hero {
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 12px;
  background: var(--bg-2);
  border-radius: 6px;
}
.scorecard-compound .sc-hero-row {
  display: flex; align-items: baseline; gap: 8px; justify-content: space-between;
}
.scorecard-compound .sc-hero-value {
  font-size: 24px; font-weight: 700;
  color: var(--ink-0);
  font-feature-settings: "tnum";
  line-height: 1.05;
}
.scorecard-compound .sc-hero-value.good { color: var(--good); }
.scorecard-compound .sc-hero-value.bad  { color: var(--bad); }
.scorecard-compound .sc-hero-value.warn { color: var(--warning, var(--brand)); }
.scorecard-compound .sc-hero-delta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  padding: 2px 6px; border-radius: 999px;
  font-weight: 700;
  white-space: nowrap;
}
.scorecard-compound .sc-hero-delta.up   { background: color-mix(in oklch, var(--good) 22%, var(--bg-2)); color: var(--good); }
.scorecard-compound .sc-hero-delta.dn   { background: color-mix(in oklch, var(--bad)  22%, var(--bg-2)); color: var(--bad); }
.scorecard-compound .sc-hero-delta.flat { background: var(--bg-3); color: var(--ink-3); }
.scorecard-compound .sc-hero-spark { display: flex; }
.scorecard-compound .sc-triple-period {
  display: flex; gap: 12px; flex-wrap: wrap;
  font-size: 10.5px; color: var(--ink-3);
  font-family: 'JetBrains Mono', monospace;
  font-feature-settings: "tnum";
  border-top: 1px dashed var(--line-soft);
  padding-top: 6px;
}
.scorecard-compound .sc-triple-period .sc-tp-item b {
  text-transform: uppercase; letter-spacing: 0.04em;
  font-weight: 600; color: var(--ink-2);
  margin-right: 4px;
}

/* Sparkline tones */
.sparkline { vertical-align: middle; }
.sparkline-brand { --spark-brand: var(--brand);    color: var(--brand); }
.sparkline-good  { --spark-good:  var(--good);     color: var(--good); }
.sparkline-bad   { --spark-bad:   var(--bad);      color: var(--bad); }
.sparkline-warn  { --spark-warn:  var(--warning, var(--brand)); color: var(--warning, var(--brand)); }
.sparkline-spend { --spark-spend: var(--bad);      color: var(--bad); }

/* ─────────────────────────────────────────────────────────────────────────
   Patch 13-K.1 item 14 — Auto-narrative drift banner.
   ───────────────────────────────────────────────────────────────────────── */
.campaign-drift-banner {
  border: 1px solid var(--line-soft);
  background: var(--bg-1);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
}
.campaign-drift-banner[data-tone="down"] {
  border-left: 4px solid var(--bad);
  background: color-mix(in oklch, var(--bad) 12%, var(--bg-1));
  color: var(--ink-0);
}
.campaign-drift-banner[data-tone="up"] {
  border-left: 4px solid var(--good);
  background: color-mix(in oklch, var(--good) 12%, var(--bg-1));
  color: var(--ink-0);
}
.campaign-drift-banner .cdb-head { font-weight: 700; margin-bottom: 4px; }
.campaign-drift-banner .cdb-list { margin: 4px 0; padding-left: 20px; font-size: 12.5px; }
.campaign-drift-banner .cdb-pct { color: var(--bad); font-weight: 600; }
.campaign-drift-banner .cdb-foot { color: var(--ink-2); font-size: 12px; margin-top: 4px; }

/* ─────────────────────────────────────────────────────────────────────────
   Patch 13-K.1 item 7 — Category L1/L2/L3 tabs.
   ───────────────────────────────────────────────────────────────────────── */
.cat-level-tabs {
  display: inline-flex; gap: 2px;
  background: var(--bg-2);
  border-radius: 6px;
  padding: 2px;
  margin-left: auto;
}
.cat-level-tabs button {
  appearance: none; border: 0;
  background: transparent;
  color: var(--ink-2);
  font: inherit; font-size: 11px; font-weight: 600;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  letter-spacing: 0.04em;
}
.cat-level-tabs button:hover { color: var(--ink-0); }
.cat-level-tabs button.on {
  background: var(--brand); color: var(--bg-0);
}

/* ─────────────────────────────────────────────────────────────────────────
   Patch 13-K.1 item 4 — UTM bubble scatter zone keys.
   ───────────────────────────────────────────────────────────────────────── */
.utm-zone-key {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 10px; font-weight: 700;
  margin: 0 2px;
  letter-spacing: 0.04em;
}
.utm-zone-key.kill  { background: color-mix(in oklch, var(--bad) 18%,  transparent); color: var(--bad); }
.utm-zone-key.scale { background: color-mix(in oklch, var(--good) 18%, transparent); color: var(--good); }

/* Mini funnel reuses .meta-funnel base; also expose it under .mini-funnel-* for clarity */
.mini-funnel-empty { padding: 10px; color: var(--ink-3); font-size: 12px; }

/* ─────────────────────────────────────────────────────────────────────────
   Patch 13-N item 12 — ФОП Tax-limit cards + Settings tab grid.
   ───────────────────────────────────────────────────────────────────────── */
.orgs-tax-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px;
}
.orgs-tax-card {
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 6px;
}
.orgs-tax-ok       { border-left: 4px solid var(--good); }
.orgs-tax-warn     { border-left: 4px solid var(--warning, #d29922); background: color-mix(in oklch, var(--warning, #d29922) 8%, var(--bg-2)); }
.orgs-tax-critical { border-left: 4px solid var(--bad);  background: color-mix(in oklch, var(--bad) 12%, var(--bg-2)); }
.orgs-tax-exceeded { border-left: 4px solid var(--bad);  background: color-mix(in oklch, var(--bad) 22%, var(--bg-2)); }
.orgs-tax-card .otc-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.orgs-tax-card .otc-name { font-weight: 600; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orgs-tax-card .otc-group { font-size: 10px; color: var(--ink-3); padding: 2px 6px; border-radius: 999px; background: var(--bg-3); }
.orgs-tax-card .otc-bar {
  position: relative; height: 8px; background: var(--bg-3); border-radius: 4px; overflow: visible;
}
.orgs-tax-card .otc-bar-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--good); border-radius: 4px;
}
.orgs-tax-card.orgs-tax-warn     .otc-bar-fill { background: var(--warning, #d29922); }
.orgs-tax-card.orgs-tax-critical .otc-bar-fill,
.orgs-tax-card.orgs-tax-exceeded .otc-bar-fill { background: var(--bad); }
.orgs-tax-card .otc-bar-proj {
  position: absolute; top: -3px; bottom: -3px; width: 2px;
  background: var(--ink-1);
  border-radius: 1px;
  pointer-events: none;
}
.orgs-tax-card .otc-stats { display: flex; justify-content: space-between; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--ink-1); }
.orgs-tax-card .otc-pct { font-weight: 700; }
.orgs-tax-card .otc-proj { font-size: 11px; color: var(--ink-3); font-family: 'JetBrains Mono', monospace; }
.orgs-tax-card .otc-level { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; }
.orgs-tax-card .otc-level .btn-ghost { padding: 3px 8px; font-size: 11px; border-radius: 4px; border: 1px solid var(--line-soft); background: transparent; color: var(--ink-1); cursor: pointer; }
.orgs-tax-card .otc-level .btn-ghost:hover { background: var(--bg-3); border-color: var(--line); }
.orgs-tax-foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; padding-top: 6px; border-top: 1px dashed var(--line-soft); font-size: 11px; }

.orgs-null-row td { color: var(--ink-3); }
.d-up { color: var(--good); font-weight: 600; }
.d-dn { color: var(--bad);  font-weight: 600; }
.d-flat { color: var(--ink-3); }

/* Settings → ФОП Limits tab grid */
.settings-fop-grid { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.settings-fop-grid .fop-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 0.8fr 1.2fr;
  gap: 8px; align-items: center;
  padding: 6px 8px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 12px;
}
.settings-fop-grid .fop-row.fop-head {
  font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em;
  font-size: 10.5px; color: var(--ink-2);
  border-bottom: 1px solid var(--line);
}
.settings-fop-grid .fop-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-fop-grid select,
.settings-fop-grid input[type=number] {
  padding: 4px 6px; background: var(--bg-1); color: var(--ink-0);
  border: 1px solid var(--line-soft); border-radius: 4px;
  font-size: 12px;
}

/* ─────────────────────────────────────────────────────────────────────────
   Patch 13-N item 7 — delivery × payment 4-metric cell.
   ───────────────────────────────────────────────────────────────────────── */
.delivery-pivot td.cohort-cell {
  vertical-align: top;
  padding: 6px 8px;
  font-family: 'JetBrains Mono', monospace;
}
.delivery-pivot .dpc-line { display: flex; justify-content: space-between; gap: 8px; font-size: 10.5px; }
.delivery-pivot .dpc-line .dpc-label { color: var(--ink-3); }
.delivery-pivot .dpc-line b { font-weight: 600; color: var(--ink-0); }

/* Geo battle / biti accent rows */
.pp-good { color: var(--good); }
.pp-warn { color: var(--warning, #d29922); }
.pp-bad  { color: var(--bad); }
.pg-table tr.is-drilled { background: color-mix(in oklch, var(--brand) 14%, transparent); }

/* ─────────────────────────────────────────────────────────────────────────
   Patch 13-L item 8 — stock-days-remaining color codes (per-SKU table).
   ───────────────────────────────────────────────────────────────────────── */
.products-table td.stock-urgent { color: var(--bad);  font-weight: 700; background: color-mix(in oklch, var(--bad)  16%, transparent); }
.products-table td.stock-warn   { color: var(--warning, #d29922); font-weight: 700; background: color-mix(in oklch, var(--warning, #d29922) 16%, transparent); }
.products-table td.stock-watch  { color: oklch(0.78 0.14 240); background: color-mix(in oklch, oklch(0.78 0.14 240) 12%, transparent); }
.products-table td.stock-ok     { color: var(--good); }
.products-toplists { gap: 12px; }
.products-toplists .card { min-width: 0; }

/* ─────────────────────────────────────────────────────────────────────────
   Patch 13-F.3 item 1 — Sales Traffic Sources: 3-donut + 3-table layout.
   Reference scrин: Йолтмайстер. Three permanent visible sub-blocks, no tabs.
   ───────────────────────────────────────────────────────────────────────── */
.traffic-sources .donuts-row,
.traffic-sources .tables-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 1100px) {
  .traffic-sources .donuts-row,
  .traffic-sources .tables-row { grid-template-columns: 1fr; }
}
.traffic-sources .donut-block,
.traffic-sources .table-block {
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 12px;
  display: flex; flex-direction: column;
  min-width: 0;
}
.traffic-sources h4 {
  margin: 0 0 8px;
  font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-2); font-weight: 600;
}
.traffic-sources .donut-wrap-sales { min-height: 180px; }
.traffic-sources .legend-list {
  margin-top: 8px;
  display: flex; flex-direction: column; gap: 2px;
  font-size: 11px;
}
.traffic-sources .legend-row {
  display: grid;
  grid-template-columns: 12px 1fr auto auto;
  gap: 6px; align-items: center;
}
.traffic-sources .legend-sw {
  width: 10px; height: 10px; border-radius: 2px; display: inline-block;
}
.traffic-sources .legend-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.traffic-sources .legend-val  { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; }
.traffic-sources .legend-pct  { color: var(--ink-3); font-size: 10.5px; min-width: 38px; text-align: right; }
.traffic-sources .traffic-tbl {
  width: 100%;
  font-size: 11.5px;
}
.traffic-sources .traffic-tbl th,
.traffic-sources .traffic-tbl td { padding: 4px 6px; }
.traffic-sources .traffic-tbl .name { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.traffic-sources .traffic-tbl tfoot tr.sum-row td {
  border-top: 2px solid var(--line);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ────────────────────────────────────────────────────────────
   Patch 13-G — Менеджери overhaul
   ──────────────────────────────────────────────────────────── */

/* Drill notice */
.mgr-drill-notice { margin-bottom: 14px; }
.mgr-drill-pill {
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(180deg, color-mix(in oklch, var(--brand) 12%, var(--bg-1)) 0%, var(--bg-1) 100%);
  border: 1px solid color-mix(in oklch, var(--brand) 35%, var(--line));
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
}
.mgr-drill-pill .mgr-drill-icon { font-size: 18px; }
.mgr-drill-pill button { margin-left: auto; }

/* Featured KPI golden glow (revenue + допродажі) */
.pg-managers-v13g .kpi.featured {
  background: linear-gradient(180deg, color-mix(in oklch, oklch(0.82 0.14 80) 14%, var(--bg-1)) 0%, var(--bg-1) 70%);
  border-color: color-mix(in oklch, oklch(0.82 0.14 80) 45%, var(--line));
  box-shadow: 0 0 0 1px color-mix(in oklch, oklch(0.82 0.14 80) 25%, transparent),
              0 4px 18px color-mix(in oklch, oklch(0.82 0.14 80) 12%, transparent);
}

/* Patch 2026-05-08 — Йолт: відступи між блоками на Managers page.
   .pg-managers default container не отримує G37 .page-grid > * + * rule, тому adjacent
   .card sections "налазили" один на одного. Цей rule додає section-to-section gap = --space-lg. */
.pg-managers > section + section,
.pg-managers > .card + .card,
.pg-managers > section + .card,
.pg-managers > .card + section { margin-top: var(--space-lg); }

/* Top/Worst rank grid */
.mgr-rank-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 1100px) { .mgr-rank-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .mgr-rank-grid { grid-template-columns: 1fr; } }
.mgr-rank-col-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 8px;
}
.mgr-rank-col-title { font-weight: 600; font-size: 13px; color: var(--ink-1); }
.mgr-rank-col-hint  { font-size: 10.5px; color: var(--ink-3); }
.mgr-rank-list { display: flex; flex-direction: column; gap: 8px; }
.mgr-rank-card {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "num   name  rev"
    "av    meta  meta"
    "av    delta delta";
  gap: 4px 10px;
  align-items: center;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 8px 12px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  transition: transform 80ms ease, border-color 120ms ease;
}
.mgr-rank-card:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}
.mgr-rank-card.mgr-rank-top { border-left: 3px solid var(--good, #3fb950); }
.mgr-rank-card.mgr-rank-bot { border-left: 3px solid var(--bad, #f85149); }
.mgr-rank-num   { grid-area: num;  font-size: 11px; font-weight: 700; color: var(--ink-3); }
.mgr-rank-av    { grid-area: av; }
.mgr-rank-name  { grid-area: name; font-weight: 600; font-size: 12.5px; color: var(--ink-0); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mgr-rank-rev   { grid-area: rev;  font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700; }
.mgr-rank-meta  { grid-area: meta; font-size: 10.5px; color: var(--ink-3); }
.mgr-rank-delta { grid-area: delta; }

/* Bubble chart */
.mgr-bubble-wrap { padding: 8px 0; }
.mgr-bubble-svg .mgr-bubble:hover { fill-opacity: 0.85; stroke-width: 2; }
.mgr-bubble-legend {
  display: flex; gap: 16px; flex-wrap: wrap;
  font-size: 11px; color: var(--ink-2);
  margin-top: 4px;
  padding: 0 12px;
}
.mgr-bubble-leg-item { display: inline-flex; align-items: center; gap: 6px; }
.mgr-bubble-leg-item .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

/* Допродажі block */
.mgr-up-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
@media (max-width: 900px) { .mgr-up-stats { grid-template-columns: repeat(2, 1fr); } }
.mgr-up-stat {
  background: var(--bg-2);
  border-radius: 8px;
  padding: 12px;
  border-left: 3px solid oklch(0.78 0.12 290);
}
.mgr-up-stat-lbl { font-size: 10.5px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.04em; }
.mgr-up-stat-val { font-family: 'JetBrains Mono', monospace; font-size: 22px; font-weight: 600; color: var(--ink-0); margin: 4px 0; }
.mgr-up-stat-hint { font-size: 10.5px; color: var(--ink-3); }
.mgr-up-tops {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin-bottom: 16px;
}
@media (max-width: 800px) { .mgr-up-tops { grid-template-columns: 1fr; } }
.mgr-up-top-col h4 { margin: 0 0 8px; font-size: 13px; color: var(--ink-1); }
.mgr-up-card {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  grid-template-rows: auto auto;
  grid-template-areas:
    "av  name rate"
    "av  meta meta";
  gap: 2px 8px;
  align-items: center;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 6px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  width: 100%;
}
.mgr-up-card:hover { border-color: var(--accent); }
.mgr-up-card-top { border-left: 3px solid oklch(0.78 0.12 290); }
.mgr-up-card-bot { border-left: 3px solid var(--bad, #f85149); }
.mgr-up-av   { grid-area: av; }
.mgr-up-name { grid-area: name; font-weight: 600; font-size: 12.5px; }
.mgr-up-rate { grid-area: rate; font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 700; color: oklch(0.78 0.12 290); }
.mgr-up-meta { grid-area: meta; font-size: 10.5px; color: var(--ink-3); }
.mgr-up-actions { display: flex; gap: 10px; }

/* Точки росту */
.mgr-points-body { display: flex; flex-direction: column; gap: 10px; }
.mgr-point-row {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  align-items: start;
  background: var(--bg-2);
  border-radius: 8px;
  padding: 12px 14px;
  border-left: 3px solid var(--ink-3);
}
.mgr-point-row.mgr-point-red   { border-left-color: var(--bad, #f85149); }
.mgr-point-row.mgr-point-amber { border-left-color: oklch(0.82 0.14 80); }
.mgr-point-icon { font-size: 18px; padding-top: 2px; }
.mgr-point-title { font-weight: 600; font-size: 13px; margin-bottom: 4px; }
.mgr-point-text  { font-size: 12px; color: var(--ink-2); margin-bottom: 4px; line-height: 1.4; }
.mgr-point-action { font-size: 11.5px; color: var(--ink-1); font-style: italic; }
.mgr-points-ok {
  text-align: center; padding: 24px;
  font-size: 13px; color: var(--ink-2);
  background: var(--bg-2); border-radius: 8px;
}

/* Hour heatmap */
.mgr-hh-grid { font-size: 10px; }
.mgr-hh-row { display: grid; grid-template-columns: 140px repeat(24, 1fr); gap: 1px; align-items: center; }
.mgr-hh-row.mgr-hh-head { font-weight: 700; color: var(--ink-3); font-size: 9.5px; }
.mgr-hh-cell { height: 18px; }
.mgr-hh-cell.mgr-hh-rowlbl {
  font-size: 11px; color: var(--ink-1); padding: 2px 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: transparent; height: auto;
}
.mgr-hh-cell.mgr-hh-collbl { text-align: center; background: transparent; color: var(--ink-3); }

/* Channel matrix */
.mgr-channel-matrix .mgr-mat-cell { padding: 4px 6px; }
.mgr-channel-matrix .mgr-mat-cell.mgr-mat-good { background: rgba(63,185,80,0.18); }
.mgr-channel-matrix .mgr-mat-cell.mgr-mat-ok   { background: rgba(255,255,255,0.04); }
.mgr-channel-matrix .mgr-mat-cell.mgr-mat-bad  { background: rgba(248,81,73,0.18); }
.mgr-channel-matrix .mgr-mat-cell.mgr-mat-empty { color: var(--ink-3); }
.mgr-channel-matrix .mgr-mat-rate { font-family: 'JetBrains Mono', monospace; font-weight: 700; }
.mgr-channel-matrix .mgr-mat-n    { font-size: 9.5px; color: var(--ink-3); margin-left: 6px; }
.mgr-channel-matrix button.link {
  background: none; border: none; color: var(--accent); cursor: pointer; padding: 0;
  font-family: inherit; font-size: 12px; text-align: left;
}
.mgr-channel-matrix button.link:hover { text-decoration: underline; }

/* Plan vs Fact */
.mgr-plan-tbl button.link {
  background: none; border: none; color: var(--accent); cursor: pointer; padding: 0;
  font-family: inherit; font-size: 12px;
}
.mgr-plan-tbl button.link:hover { text-decoration: underline; }
.mgr-plan-tbl td.good { color: var(--good, #3fb950); }
.mgr-plan-tbl td.warn { color: oklch(0.82 0.14 80); }
.mgr-plan-tbl td.bad  { color: var(--bad, #f85149); }

/* Time-to-close trend */
.mgr-ttc-trend-wrap { padding: 8px 0; }
.mgr-ttc-legend {
  display: flex; gap: 16px; flex-wrap: wrap;
  font-size: 11px; color: var(--ink-2);
  margin-top: 4px; padding: 0 12px;
}
.mgr-ttc-leg-item { display: inline-flex; align-items: center; gap: 6px; }
.mgr-ttc-leg-item .dot { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }

/* Table — clickable rows + drilled highlight */
.mgr-table tbody tr[data-mgr] { cursor: pointer; }
.mgr-table tbody tr[data-mgr]:hover td { background: rgba(88,166,255,0.06); }
.mgr-table tbody tr.mgr-row-active td {
  background: linear-gradient(90deg, rgba(88,166,255,0.16) 0%, rgba(88,166,255,0.04) 100%) !important;
  box-shadow: inset 3px 0 0 var(--accent, #58a6ff);
}
.mgr-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin: 0 2px;
}
.mgr-dot-top    { background: var(--good, #3fb950); }
.mgr-dot-bottom { background: var(--bad,  #f85149); }

/* ────────────────────────────────────────────────────────────
   Patch 13-M — RFM + Cohorts + Loyalty polish
   ──────────────────────────────────────────────────────────── */

/* RFM — cohort impact cell */
.rfm-cohort-impact { display: inline-block; line-height: 1.35; font-size: 11px; }
.rfm-cohort-impact strong { font-family: 'JetBrains Mono', monospace; }

/* Cohorts — info banner top of page */
.cohort-info-banner {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 12px;
  align-items: start;
  background: linear-gradient(180deg, color-mix(in oklch, var(--brand) 8%, var(--bg-1)) 0%, var(--bg-1) 100%);
  border: 1px solid color-mix(in oklch, var(--brand) 25%, var(--line));
  border-radius: 10px;
  padding: 12px 14px;
  margin: 8px 0 16px;
  font-size: 12.5px;
  line-height: 1.6;
}
.cohort-info-icon { font-size: 22px; line-height: 1; }
.cohort-info-body strong { color: var(--ink-0); }
.cohort-info-body code {
  background: var(--bg-2);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 11.5px;
}
.cohort-info-pill {
  display: inline-flex; align-items: center;
  gap: 4px;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 11px;
  margin: 0 2px;
}
.cohort-info-pill-good { background: rgba(63,185,80,0.18); color: var(--good, #3fb950); }
.cohort-info-pill-bad  { background: rgba(248,81,73,0.18); color: var(--bad,  #f85149); }
.cohort-info-pill-pred { background: rgba(124,92,255,0.18); color: oklch(0.78 0.12 290); border: 1px dashed oklch(0.78 0.12 290); }

/* Predicted cell variant */
.cohort-cell { cursor: pointer; transition: filter 100ms ease, transform 80ms ease; }
.cohort-cell:hover { filter: brightness(1.1); }
.cohort-cell-pred { font-style: italic; color: oklch(0.78 0.12 290); }
.cohort-age-badge {
  display: inline-block;
  font-size: 9.5px;
  padding: 1px 6px;
  border-radius: 8px;
  background: var(--bg-2);
  color: var(--ink-3);
  margin-left: 6px;
  vertical-align: middle;
}
.cohort-age-young { background: rgba(124,92,255,0.16); color: oklch(0.78 0.12 290); }

/* Cohort modal */
.cohort-modal {
  position: fixed; inset: 0;
  z-index: 200;
  display: flex; align-items: center; justify-content: center;
}
.cohort-modal[hidden] { display: none; }
.cohort-modal-overlay {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  cursor: pointer;
}
.cohort-modal-card {
  position: relative;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 12px;
  width: min(880px, 92vw);
  max-height: 88vh;
  overflow: auto;
  padding: 18px 22px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.55);
}
.cohort-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--line-soft);
  padding-bottom: 12px;
}
.cohort-modal-head h3 { margin: 0; font-size: 16px; }
.cohort-modal-head code { background: var(--bg-2); padding: 2px 8px; border-radius: 4px; }
.cohort-modal-x {
  background: none; border: none;
  font-size: 22px; line-height: 1;
  color: var(--ink-2); cursor: pointer;
  padding: 0 8px;
}
.cohort-modal-x:hover { color: var(--ink-0); }
.cohort-modal-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}
@media (max-width: 700px) { .cohort-modal-stats { grid-template-columns: repeat(2, 1fr); } }
.cohort-modal-stat {
  background: var(--bg-2);
  border-radius: 8px;
  padding: 10px 12px;
  border-left: 3px solid var(--accent, #58a6ff);
}
.cohort-modal-stat-lbl  { font-size: 10px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.05em; }
.cohort-modal-stat-val  { font-family: 'JetBrains Mono', monospace; font-size: 19px; font-weight: 600; color: var(--ink-0); margin: 4px 0; }
.cohort-modal-stat-hint { font-size: 10.5px; color: var(--ink-3); }
.cohort-modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 14px;
}
@media (max-width: 700px) { .cohort-modal-grid { grid-template-columns: 1fr; } }
.cohort-modal-grid h4 {
  margin: 0 0 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-1);
}
.cohort-modal-bar-row {
  display: grid;
  grid-template-columns: 130px 1fr 36px 32px;
  gap: 8px;
  align-items: center;
  margin-bottom: 4px;
  font-size: 11.5px;
}
.cohort-modal-bar-label {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--ink-1);
}
.cohort-modal-bar-track {
  background: var(--bg-2);
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
}
.cohort-modal-bar-fill { height: 100%; background: var(--accent, #58a6ff); }
.cohort-modal-bar-fill-l1 { background: oklch(0.78 0.12 290); }
.cohort-modal-bar-pct { font-family: 'JetBrains Mono', monospace; color: var(--ink-2); text-align: right; }
.cohort-modal-bar-n   { font-family: 'JetBrains Mono', monospace; color: var(--ink-3); text-align: right; font-size: 10.5px; }
.cohort-modal-cust {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 6px 10px;
  margin-bottom: 4px;
  background: var(--bg-2);
  border-radius: 6px;
  font-size: 12px;
}
.cohort-modal-cust.top { border-left: 3px solid var(--good, #3fb950); }
.cohort-modal-cust.bot { border-left: 3px solid var(--bad,  #f85149); }
.cohort-modal-cust-rank  { font-size: 11px; font-weight: 700; color: var(--ink-3); }
.cohort-modal-cust-phone { font-family: 'JetBrains Mono', monospace; }
.cohort-modal-cust-rev   { font-family: 'JetBrains Mono', monospace; font-weight: 700; }
.cohort-modal-empty { padding: 24px; text-align: center; color: var(--ink-2); }

/* Loyalty — 4-card scorecard hero strip */
.loyalty-hero.scorecard-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
@media (max-width: 1100px) { .loyalty-hero.scorecard-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .loyalty-hero.scorecard-strip { grid-template-columns: 1fr; } }
.loyalty-caveat-card {
  background: linear-gradient(180deg, color-mix(in oklch, oklch(0.82 0.14 80) 12%, var(--bg-1)) 0%, var(--bg-1) 100%);
  border: 1px solid color-mix(in oklch, oklch(0.82 0.14 80) 35%, var(--line));
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 14px;
  font-size: 12px;
  line-height: 1.55;
}
.loyalty-caveat-card code {
  background: var(--bg-2);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 11px;
}

/* ─────────────────────────────────────────────────────────────────────────
   Patch 13-GA — GA4 sections visual unify + enhancements.
   oklch tokens only · no hex.
   ───────────────────────────────────────────────────────────────────────── */

/* Cross-link footer (shared by all 6 GA4 pages) */
.ga4-cross-links { margin-top: 16px; padding: 12px 14px; background: var(--bg-2); border-left: 4px solid var(--brand); border-radius: 8px; }
.ga4-cross-head { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; font-weight: 600; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; }
.ga4-cross-head .hint { font-weight: 400; color: var(--ink-3); text-transform: none; letter-spacing: 0; font-size: 11px; }
.ga4-cross-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.ga4-cross-card { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--bg-1); border: 1px solid var(--line-soft); border-radius: 6px; text-decoration: none; color: var(--ink-0); transition: border-color 0.15s, transform 0.15s; }
.ga4-cross-card:hover { border-color: var(--brand); transform: translateY(-1px); }
.ga4-cross-emoji { font-size: 20px; }
.ga4-cross-text { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.ga4-cross-text strong { font-size: 13px; }
.ga4-cross-text small { font-size: 10.5px; color: var(--ink-3); }

/* GA4 Overview — CRM↔GA4 reconciliation panel */
.ga4-recon-card { padding: 14px 16px; }
.ga4-recon-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 10px; }
.ga4-recon-cell { padding: 10px 12px; background: var(--bg-2); border-radius: 6px; display: flex; flex-direction: column; gap: 4px; }
.ga4-recon-cell.ga4-recon-gap { background: color-mix(in oklch, var(--warning, oklch(0.74 0.14 80)) 12%, var(--bg-2)); border-left: 4px solid var(--warning, oklch(0.74 0.14 80)); }
.ga4-recon-label { font-size: 10.5px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.05em; }
.ga4-recon-value { font-size: 18px; font-weight: 700; }
.ga4-recon-sub { font-size: 11px; color: var(--ink-2); }

/* GA4 Overview — Channel Groups treemap (slice-and-dice) */
.ga4-treemap { display: flex; height: 180px; gap: 2px; border-radius: 6px; overflow: hidden; }
.ga4-treemap-cell { flex-grow: 1; flex-shrink: 1; min-width: 32px; padding: 8px; display: flex; flex-direction: column; justify-content: space-between; font-weight: 600; cursor: default; }
.ga4-tm-label { font-size: 11px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; }
.ga4-tm-val { font-family: 'JetBrains Mono', monospace; font-size: 13px; }

/* Pages — page-category compare bars */
.ga4-cat-bars { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; background: var(--bg-2); border-radius: 6px; margin-bottom: 8px; }
.ga4-cat-bar { display: grid; grid-template-columns: 110px 1fr 56px; gap: 10px; align-items: center; font-size: 12px; }
.ga4-cat-name { color: var(--ink-1); }
.ga4-cat-track { background: var(--bg-3); border-radius: 4px; height: 10px; overflow: hidden; }
.ga4-cat-fill { display: block; height: 100%; background: linear-gradient(to right, var(--good), color-mix(in oklch, var(--good) 70%, var(--brand))); }
.ga4-cat-pct { text-align: right; color: var(--ink-2); font-size: 11px; }

/* Pages — scatter heatmap */
.ga4-scatter { width: 100%; min-height: 320px; }
.ga4-scatter-svg { width: 100%; height: 320px; display: block; }

/* Audience — sankey-lite */
.ga4-sankey-row { display: flex; gap: 10px; align-items: stretch; padding: 14px 12px; }
.ga4-sankey-node { flex: 1 1 0; padding: 12px 10px; border-radius: 6px; color: oklch(0.16 0.02 200); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ga4-sankey-node-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.ga4-sankey-node-count { font-size: 18px; font-weight: 700; font-family: 'JetBrains Mono', monospace; }
.ga4-sankey-node-drop { font-size: 10.5px; opacity: 0.78; }
.ga4-sankey-arrow { display: flex; align-items: center; color: var(--ink-3); font-size: 14px; }
.ga4-sankey-leak { padding: 8px 12px; background: color-mix(in oklch, var(--bad) 12%, var(--bg-2)); border-left: 4px solid var(--bad); border-radius: 6px; font-size: 12px; color: var(--ink-1); }

/* Mobile — winner card */
.ga4-winner-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 10px 0; }
.ga4-winner-cell { padding: 10px 12px; background: color-mix(in oklch, var(--good) 12%, var(--bg-2)); border-radius: 6px; display: flex; flex-direction: column; gap: 4px; }
.ga4-winner-label { font-size: 10.5px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.04em; }
.ga4-winner-value { font-size: 18px; font-weight: 700; color: var(--good); }
.ga4-winner-rec { padding: 8px 12px; background: color-mix(in oklch, var(--good) 8%, var(--bg-2)); border-radius: 6px; font-size: 12px; color: var(--ink-1); }

/* Devices — heatmap */
.ga4-heatmap-host { overflow-x: auto; padding: 4px; }
.ga4-heatmap { display: inline-grid; gap: 2px; min-width: 100%; }
.ga4-heatmap-row { display: contents; }
.ga4-heatmap-cell { padding: 6px 8px; min-width: 80px; font-size: 11px; display: flex; flex-direction: column; gap: 2px; align-items: center; justify-content: center; border-radius: 3px; background: var(--bg-2); }
.ga4-heatmap-cell.empty { color: var(--ink-3); background: transparent; }
.ga4-heatmap-cell.ga4-heatmap-corner { background: transparent; }
.ga4-heatmap-cell.ga4-heatmap-col-head,
.ga4-heatmap-cell.ga4-heatmap-row-head { background: var(--bg-3); font-weight: 600; font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-1); }
.ga4-hm-cr { font-weight: 700; font-family: 'JetBrains Mono', monospace; }
.ga4-hm-rev { color: var(--ink-3); font-size: 10px; font-family: 'JetBrains Mono', monospace; }
.ga4-heatmap { grid-auto-flow: row; }
.ga4-heatmap-row { display: flex; gap: 2px; margin-bottom: 2px; }
.ga4-heatmap-row .ga4-heatmap-cell { flex: 1 1 0; }

/* Video — locked preview cards */
.scorecard-compound.locked { opacity: 0.85; border-style: dashed; }

/* ────────────────────────────────────────────────────────────
   Patch 13-MT — Multi-Touch Customer Journey
   ──────────────────────────────────────────────────────────── */

/* Caveat banner */
.mt-caveat-card {
  background: linear-gradient(180deg, color-mix(in oklch, oklch(0.82 0.14 80) 12%, var(--bg-1)) 0%, var(--bg-1) 100%);
  border: 1px solid color-mix(in oklch, oklch(0.82 0.14 80) 35%, var(--line));
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 14px;
  font-size: 12px;
  line-height: 1.55;
}
.mt-caveat-card code { background: var(--bg-2); padding: 1px 5px; border-radius: 3px; font-size: 11px; }

/* TIER 1 — hero scoreboard already uses .scorecard-strip-6 + .scorecard-compound */
.mt-hero { margin-bottom: 16px; }

/* TIER 2 — donuts already use .donuts-row from .traffic-sources */
.mt-sources .donut-block h4 { margin: 0 0 6px; font-size: 12.5px; color: var(--ink-1); }

/* Patch 13-NIGHT-B-PhaseA2 Item 34 — Apply Upsell .ups-donut sizing 132px to mt-sources.
   Sales-default .donut-wrap-sales svg = 88px (F19); upsell pattern = 132px з більш generous padding.
   Per Йолт spec: "Стиль брати з upsell". Single overide для namespace .mt-sources. */
.mt-sources .donut-wrap-sales { min-height: 160px; padding: 8px 0; }
.mt-sources .donut-wrap-sales svg { width: 132px; height: 132px; }
.mt-sources .donut-block { padding: 14px; background: var(--bg-1); border-radius: 8px; border: 1px solid var(--line-soft); }

/* TIER 4 — Sankey */
.mt-sankey-wrap { padding: 8px 0; overflow-x: auto; }
.mt-sankey-node:hover rect { filter: brightness(1.15); }

/* TIER 5 — Trend */
.mt-trend-wrap { padding: 8px 0; }
.mt-trend-legend {
  display: flex; gap: 16px; flex-wrap: wrap;
  font-size: 11px; color: var(--ink-2);
  margin-top: 4px; padding: 0 12px;
}
.mt-trend-legend .sw {
  width: 12px; height: 8px;
  display: inline-block;
  margin-right: 4px;
  vertical-align: middle;
  border: 1px solid transparent;
}

/* TIER 6 — Source × Device matrix */
.mt-matrix-tbl td.mt-mat-cell { padding: 4px 6px; min-width: 80px; }
.mt-matrix-tbl td.mt-mat-empty { color: var(--ink-3); }
.mt-mat-rate { font-family: 'JetBrains Mono', monospace; font-weight: 700; }
.mt-mat-n    { font-size: 10px; color: var(--ink-3); margin-left: 6px; }

/* Source pill (used in tables, user row, modal) */
.mt-src-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 6px;
  background: var(--bg-2);
  border-radius: 4px;
  font-size: 11px;
  white-space: nowrap;
}
.mt-src-pill.mt-src-first { border-left: 2px solid oklch(0.82 0.14 155); }
.mt-src-pill.mt-src-last  { border-left: 2px solid oklch(0.78 0.14 200); }
.mt-src-pill.mt-src-purchase {
  background: linear-gradient(90deg,
    color-mix(in oklch, oklch(0.82 0.14 80) 25%, var(--bg-1)),
    var(--bg-2));
  color: oklch(0.82 0.14 80);
  font-weight: 700;
}
.mt-src-arrow { color: var(--ink-3); margin: 0 4px; }

/* TIER 7 — User table */
.mt-toggles { display: inline-flex; gap: 4px; }
.mt-toggles button {
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 11px;
  color: var(--ink-2);
  cursor: pointer;
}
.mt-toggles button.on {
  background: color-mix(in oklch, var(--brand) 18%, var(--bg-2));
  border-color: var(--brand);
  color: var(--ink-0);
}
.mt-user-tbl tbody tr { cursor: pointer; }
.mt-user-tbl tbody tr:hover td { background: rgba(88, 166, 255, 0.06); }
.mt-user-tbl tbody tr.is-bot td { background: rgba(248, 81, 73, 0.05); }
.mt-user-mask { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; }
.mt-bot-pill {
  display: inline-block; font-size: 9.5px;
  background: rgba(248, 81, 73, 0.18);
  color: var(--bad, #f85149);
  padding: 1px 4px; border-radius: 3px;
}
.mt-matched-pill {
  display: inline-block; font-size: 9.5px;
  background: rgba(63, 185, 80, 0.18);
  color: var(--good, #3fb950);
  padding: 1px 6px; border-radius: 3px;
  font-weight: 700;
}
.mt-chain-mini {
  display: inline-flex; align-items: center; gap: 1px;
  font-size: 13px;
  white-space: nowrap;
}
.mt-chain-icon {
  display: inline-block;
  padding: 0 2px;
}
.mt-chain-more {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--ink-3);
  margin-left: 4px;
}

/* TIER 8 — Insight banners */
.mt-insights {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 1100px) { .mt-insights { grid-template-columns: 1fr; } }
.mt-insight {
  background: var(--bg-2);
  border-radius: 8px;
  padding: 12px 14px;
  border-left: 3px solid var(--ink-3);
}
.mt-insight.mt-insight-good { border-left-color: oklch(0.82 0.14 155); }
.mt-insight.mt-insight-warn { border-left-color: oklch(0.82 0.14 80); }
.mt-insight.mt-insight-info { border-left-color: oklch(0.78 0.14 200); }
.mt-insight.mt-insight-bad  { border-left-color: oklch(0.74 0.16 28); }
.mt-insight-title { font-size: 13px; font-weight: 600; color: var(--ink-0); margin-bottom: 4px; }
.mt-insight-body  { font-size: 12px; color: var(--ink-2); line-height: 1.45; }

/* Cross-link cards bottom */
.mt-cross-links {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 18px;
}
@media (max-width: 1100px) { .mt-cross-links { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .mt-cross-links { grid-template-columns: 1fr; } }
.cross-link-card {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 10px;
  align-items: center;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 12px 14px;
  text-decoration: none;
  color: inherit;
  transition: border-color 120ms, transform 100ms;
}
.cross-link-card:hover { border-color: var(--accent, #58a6ff); transform: translateY(-1px); }
.cross-link-icon { font-size: 22px; line-height: 1; }
.cross-link-title { font-weight: 600; font-size: 13px; color: var(--ink-0); }
.cross-link-text  { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }

/* Drill modal */
.mt-modal {
  position: fixed; inset: 0; z-index: 220;
  display: flex; align-items: center; justify-content: center;
}
.mt-modal[hidden] { display: none; }
.mt-modal-overlay {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(2px);
  cursor: pointer;
}
.mt-modal-card {
  position: relative;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 12px;
  width: min(820px, 92vw);
  max-height: 88vh;
  overflow: auto;
  padding: 18px 22px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
}
.mt-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
}
.mt-modal-head h3 { margin: 0; font-size: 15px; }
.mt-modal-head code { background: var(--bg-2); padding: 2px 8px; border-radius: 4px; font-size: 12px; }
.mt-modal-x {
  background: none; border: none;
  font-size: 22px; line-height: 1; padding: 0 8px;
  color: var(--ink-2); cursor: pointer;
}
.mt-modal-x:hover { color: var(--ink-0); }

.mt-modal-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin-bottom: 16px;
}
.mt-modal-stat {
  background: var(--bg-2); border-radius: 8px;
  padding: 10px 12px;
  border-left: 3px solid var(--accent, #58a6ff);
}
.mt-modal-stat-lbl  { font-size: 10px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.05em; }
.mt-modal-stat-val  { font-family: 'JetBrains Mono', monospace; font-size: 19px; font-weight: 600; color: var(--ink-0); margin: 4px 0; }
.mt-modal-stat-hint { font-size: 10.5px; color: var(--ink-3); }

.mt-modal-bot {
  background: rgba(248, 81, 73, 0.12);
  border: 1px solid rgba(248, 81, 73, 0.35);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 12px;
  color: oklch(0.74 0.16 28);
  margin-bottom: 14px;
}

.mt-modal-cta {
  display: inline-block;
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--accent, #58a6ff);
  text-decoration: none;
}
.mt-modal-cta:hover { text-decoration: underline; }

/* Vertical timeline */
.mt-timeline {
  display: flex; flex-direction: column; gap: 0;
  position: relative;
  padding-left: 6px;
}
.mt-timeline::before {
  content: '';
  position: absolute; left: 16px; top: 0; bottom: 0;
  width: 2px; background: var(--line-soft);
}
.mt-touch-card {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 12px;
  align-items: start;
  padding: 8px 0;
  position: relative;
}
.mt-touch-marker {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--bg-2);
  border: 2px solid var(--line);
  display: grid; place-items: center;
  font-size: 14px;
  z-index: 1;
}
.mt-touch-card.mt-touch-first .mt-touch-marker {
  border-color: oklch(0.82 0.14 155);
  background: color-mix(in oklch, oklch(0.82 0.14 155) 18%, var(--bg-1));
}
.mt-touch-card.mt-touch-last .mt-touch-marker {
  border-color: oklch(0.78 0.14 200);
  background: color-mix(in oklch, oklch(0.78 0.14 200) 18%, var(--bg-1));
}
.mt-touch-card.mt-touch-purchase .mt-touch-marker {
  border-color: oklch(0.82 0.14 80);
  background: color-mix(in oklch, oklch(0.82 0.14 80) 28%, var(--bg-1));
  box-shadow: 0 0 0 4px color-mix(in oklch, oklch(0.82 0.14 80) 18%, transparent);
}
.mt-touch-body {
  background: var(--bg-2);
  border-radius: 8px;
  padding: 8px 12px;
  border-left: 3px solid var(--ink-3);
  font-size: 12px;
}
.mt-touch-card.mt-touch-first .mt-touch-body { border-left-color: oklch(0.82 0.14 155); }
.mt-touch-card.mt-touch-last .mt-touch-body  { border-left-color: oklch(0.78 0.14 200); }
.mt-touch-card.mt-touch-purchase .mt-touch-body {
  border-left-color: oklch(0.82 0.14 80);
  background: linear-gradient(180deg,
    color-mix(in oklch, oklch(0.82 0.14 80) 12%, var(--bg-2)) 0%,
    var(--bg-2) 100%);
}
.mt-touch-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 4px;
}
.mt-touch-ts { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--ink-3); }
.mt-touch-tag { font-size: 9.5px; color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.05em; }
.mt-touch-src { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.mt-touch-medium { font-size: 11px; color: var(--ink-2); }
.mt-touch-camp   { font-size: 10.5px; color: var(--ink-3); font-style: italic; }
.mt-touch-page   { font-size: 10.5px; color: var(--ink-3); margin-top: 4px; word-break: break-all; }
.mt-touch-foot   {
  display: flex; gap: 12px;
  margin-top: 4px;
  font-size: 10.5px; color: var(--ink-3);
}

/* TIER 7 — User row styling override (toolbar text) */
.pg-multi-touch [data-mt-user-hint] { font-size: 11.5px; color: var(--ink-3); }


/* ─────────────────────────────────────────────────────────────────────────
   Patch 13-FINAL — pre-ship hotfix bundle.
   ───────────────────────────────────────────────────────────────────────── */

/* Item 6 — Top-3 row (Top SKUs / Channels / Leaks card-tables) */
.top3-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 14px 0;
}
@media (max-width: 1100px) { .top3-row { grid-template-columns: 1fr; } }
.top3-row .card { min-width: 0; }
.top3-row .traffic-tbl { font-size: 12px; }
.top3-row .bar-cell { display: flex; align-items: center; gap: 6px; }
.top3-row .bar-cell .bar { flex: 1; min-width: 40px; height: 6px; background: var(--bg-3); border-radius: 3px; overflow: hidden; }
.top3-row .bar-cell .bar i { display: block; height: 100%; background: linear-gradient(to right, var(--good), color-mix(in oklch, var(--good) 70%, var(--brand))); }
.top3-row .bar-cell .v { font-family: 'JetBrains Mono', monospace; min-width: 64px; text-align: right; }

/* Item 5 — ideas count typography */
.hero-ideas-count { font-size: 28px; font-weight: 700; font-family: 'JetBrains Mono', monospace; color: var(--good); }
.hero-ideas-label { font-size: 13px; color: var(--ink-2); margin-left: 4px; }

/* Item 7 — visual funnel viz */
.funnel-viz { display: flex; flex-direction: column; gap: 6px; padding: 12px; }
.funnel-viz .funnel-step {
  position: relative;
  width: var(--width, 100%);
  margin: 0 auto;
  padding: 12px 18px;
  background: var(--color, oklch(0.74 0.14 200));
  color: oklch(0.16 0.02 200);
  border-radius: 8px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  transition: filter 0.15s;
}
.funnel-viz .funnel-step:hover { filter: brightness(1.05); }
.funnel-viz .step-name { font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; }
.funnel-viz .step-value { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 16px; }
.funnel-viz .step-cr { font-family: 'JetBrains Mono', monospace; font-size: 12px; opacity: 0.78; }
.funnel-viz .step-drop { position: absolute; right: -12px; top: 50%; transform: translate(100%, -50%); white-space: nowrap; font-size: 11px; color: var(--bad); font-weight: 700; padding: 4px 8px; background: color-mix(in oklch, var(--bad) 12%, var(--bg-1)); border-radius: 4px; }

/* Item 8 — manager rows mini-charts */
.mgr-table-row { display: grid; grid-template-columns: 36px 200px 70px 100px 80px 80px 90px 90px 70px; gap: 8px; align-items: center; padding: 6px 8px; border-bottom: 1px solid var(--line-soft); font-size: 12px; }
.mgr-mini-donut svg { display: block; }
.mgr-mini-spark svg { display: block; }
.mgr-roi-zp { font-weight: 700; font-family: 'JetBrains Mono', monospace; }
.mgr-roi-zp.pp-good { color: var(--good); }
.mgr-roi-zp.pp-warn { color: var(--warning, oklch(0.74 0.14 80)); }
.mgr-roi-zp.pp-bad  { color: var(--bad); }

/* Item 9 — Geo region heatmap */
.geo-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; }
@media (max-width: 1000px) { .geo-grid { grid-template-columns: 1fr; } }
.geo-cells { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px; }
.geo-cells .region {
  appearance: none; border: 1px solid var(--line-soft);
  background: color-mix(in oklch, var(--good) calc(var(--intensity, 0) * 35%), var(--bg-2));
  color: var(--ink-0);
  padding: 12px 10px;
  border-radius: 6px;
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-size: 11.5px; font-weight: 600;
  cursor: pointer;
  text-align: left;
  display: flex; flex-direction: column; gap: 2px;
}
.geo-cells .region:hover { border-color: var(--brand); }
.geo-cells .region.selected { border-color: var(--brand); box-shadow: 0 0 0 2px color-mix(in oklch, var(--brand) 40%, transparent); }
.geo-cells .region-name { font-weight: 700; }
.geo-cells .region-val { font-family: 'JetBrains Mono', monospace; font-size: 11px; opacity: 0.85; }
.geo-detail { background: var(--bg-2); border-radius: 8px; padding: 14px; }
.geo-toggle { display: inline-flex; gap: 4px; background: var(--bg-2); padding: 4px; border-radius: 6px; margin-bottom: 10px; }
.geo-toggle button { appearance: none; border: 0; background: transparent; color: var(--ink-2); padding: 4px 10px; border-radius: 4px; font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; }
.geo-toggle button.on { background: var(--brand); color: var(--bg-0); }

/* Item 10 — RFM 5×5 heatmap */
.rfm-grid {
  display: grid;
  grid-template-columns: 56px repeat(5, 1fr);
  grid-template-rows: 28px repeat(5, 64px);
  gap: 4px;
  margin-bottom: 12px;
}
.rfm-grid .rfm-corner { background: transparent; }
.rfm-grid .rfm-axis-label { font-size: 10px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.04em; display: flex; align-items: center; justify-content: center; }
.rfm-grid .rfm-cell {
  background: color-mix(in oklch, var(--brand) calc(var(--intensity, 0) * 30%), var(--bg-2));
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 10.5px;
  cursor: pointer;
  display: flex; flex-direction: column;
  gap: 1px;
  border: 1px solid var(--line-soft);
  text-align: left;
}
.rfm-grid .rfm-cell:hover,
.rfm-grid .rfm-cell.selected { border-color: var(--brand); box-shadow: 0 0 0 2px color-mix(in oklch, var(--brand) 35%, transparent); }
.rfm-grid .rfm-cell .seg-name { font-weight: 700; line-height: 1.2; }
.rfm-grid .rfm-cell .count { font-family: 'JetBrains Mono', monospace; font-size: 13px; }
.rfm-grid .rfm-cell .action-mini { font-size: 9.5px; color: var(--ink-3); }
.rfm-segment-detail { background: var(--bg-2); padding: 12px 14px; border-radius: 8px; }
.rfm-segment-detail h4 { margin: 0 0 6px; }

/* ════════════════════════════════════════════════════════════════════
   PATCH 13-NEW-BLOCKS — Reports + CRM Kanban (append-only namespaced)
   All classes prefixed .reports-* / .crm-* — zero collision risk.
   oklch tokens only, NO hex.
   ════════════════════════════════════════════════════════════════════ */

/* === Reports page ============================================== */
.pg-reports { display: flex; flex-direction: column; gap: 14px; }

.reports-tabs {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 10px;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
}
.reports-tabs-spacer { flex: 1; }
.reports-tab {
  appearance: none; border: 1px solid var(--line);
  background: var(--bg-2); color: var(--ink-1);
  font: inherit; font-size: 13px; font-weight: 600;
  padding: 6px 14px; border-radius: 6px; cursor: pointer;
  transition: border-color 120ms, color 120ms, background 120ms;
}
.reports-tab:hover { border-color: var(--brand); color: var(--ink-0); }
.reports-tab.is-active {
  background: color-mix(in oklch, var(--brand) 18%, var(--bg-2));
  border-color: var(--brand); color: var(--brand);
}
.reports-anchor-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--ink-2);
}
.reports-anchor {
  background: var(--bg-2); border: 1px solid var(--line);
  color: var(--ink-0); border-radius: 6px;
  padding: 4px 8px; font: inherit; font-size: 12px;
}
.reports-export { display: inline-flex; gap: 6px; }
.reports-btn {
  appearance: none; border: 1px solid var(--line);
  background: var(--bg-2); color: var(--ink-1);
  font: inherit; font-size: 12px; font-weight: 600;
  padding: 5px 10px; border-radius: 6px; cursor: pointer;
}
.reports-btn:hover { border-color: var(--brand); color: var(--ink-0); }

.reports-narrative {
  background: linear-gradient(
    135deg,
    color-mix(in oklch, var(--brand) 14%, var(--bg-1)) 0%,
    color-mix(in oklch, var(--info) 8%, var(--bg-1)) 100%
  );
  border: 1px solid color-mix(in oklch, var(--brand) 30%, var(--line));
  border-radius: 12px;
  padding: 18px 22px;
  font-size: 16px; line-height: 1.55;
  color: var(--ink-0);
}
.reports-narrative-text strong { font-weight: 700; }
.reports-narrative-text code {
  background: color-mix(in oklch, var(--bg-2) 80%, transparent);
  padding: 1px 6px; border-radius: 4px;
  font-family: 'JetBrains Mono', monospace; font-size: 13px;
}
.reports-delta {
  font-family: 'JetBrains Mono', monospace;
  font-feature-settings: "tnum";
  font-weight: 700;
}
.reports-delta.up   { color: var(--good); }
.reports-delta.dn   { color: var(--bad); }
.reports-delta.flat { color: var(--ink-3); }
.reports-delta-prev { color: var(--ink-3); font-size: 11px; }

.reports-section { gap: 12px; }
/* Patch 2026-05-08 — Йолт Reports: section-to-section spacing на reports body. */
.reports-body > section + section,
.reports-body > .card + .card,
.reports-body > section + .card,
.reports-body > .card + section { margin-top: var(--space-lg); }

/* Patch 2026-05-08 — Breakdown toggle Site/Channel/Source. */
.reports-breakdown-toggle { display: inline-flex; gap: 4px; }
.reports-breakdown-toggle button {
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  color: var(--ink-2);
  padding: 4px var(--space-sm);
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: all 120ms ease;
}
.reports-breakdown-toggle button:hover { color: var(--ink-1); border-color: var(--accent); }
.reports-breakdown-toggle button.on {
  background: color-mix(in oklch, var(--accent) 18%, var(--bg-2));
  border-color: var(--accent);
  color: var(--ink-0);
}

/* Patch 2026-05-08 — Breakdown table alignment fix:
   header text-align matches cell text-align (left for label, right for numeric). */
.reports-breakdown-tbl th.reports-col-label,
.reports-breakdown-tbl td.reports-col-label { text-align: left; }
.reports-breakdown-tbl th.r,
.reports-breakdown-tbl th.num,
.reports-breakdown-tbl td.r,
.reports-breakdown-tbl td.num { text-align: right; font-variant-numeric: tabular-nums; }
.reports-breakdown-tbl th { padding: 8px var(--space-sm); }

/* Patch 2026-05-08 — Йолт: компактна Spend per-channel табличка. */
.reports-spend-section { max-width: 720px; }
.reports-spend-tbl th { padding: 6px var(--space-sm); font-size: 11px; }
.reports-spend-tbl td { padding: 6px var(--space-sm); }
.reports-spend-tbl .sum-row td {
  border-top: 1px solid var(--line-soft);
  background: color-mix(in oklch, var(--accent) 8%, transparent);
}

.reports-hero { /* uses .scorecard-strip-6 */ }
.reports-hero-card { min-height: 130px; }

.reports-tbl thead th { font-weight: 600; color: var(--ink-2); }
.reports-tbl tbody tr:hover { background: var(--bg-2); }

.reports-heatmap {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  gap: 4px;
}
.reports-heatmap-cell {
  aspect-ratio: 1.4 / 1;
  background: color-mix(
    in oklch,
    var(--brand) calc(var(--int, 0) * 65%),
    var(--bg-2)
  );
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  padding: 4px 2px;
  display: flex; flex-direction: column; align-items: center;
  justify-content: space-between;
  font-size: 10px;
}
.reports-heatmap-hour { color: var(--ink-3); font-weight: 600; }
.reports-heatmap-val {
  color: var(--ink-0); font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
}

.reports-top-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
@media (max-width: 1100px) { .reports-top-grid { grid-template-columns: repeat(2, 1fr); } }

/* Patch 2026-05-08 — Йолт: 5-card "Top by dimension" row (won + lost). */
.reports-top-grid-5 { grid-template-columns: repeat(5, 1fr); gap: var(--space-md); }
@media (max-width: 1100px) { .reports-top-grid-5 { grid-template-columns: repeat(2, 1fr); } }
.reports-top-card .reports-top-dim {
  font-size: 10px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  margin-bottom: 2px;
}
.reports-top-card.reports-top-empty .reports-top-empty-note {
  color: var(--ink-3);
  font-size: 11px;
  font-style: italic;
}
.reports-top-card {
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 4px;
}
.reports-top-won { border-left: 3px solid var(--good); }
.reports-top-lost { border-left: 3px solid var(--bad); }
.reports-top-amount {
  font-size: 18px; font-weight: 700; color: var(--ink-0);
}
.reports-top-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--ink-1); }
.reports-top-tag {
  font-size: 10px; color: var(--ink-3);
  background: var(--bg-3); padding: 1px 6px; border-radius: 4px;
}
.reports-top-mgr  { font-size: 11.5px; color: var(--ink-2); }
.reports-top-reason { font-size: 11px; color: var(--bad); margin-top: 4px; }

.reports-action-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (max-width: 900px) { .reports-action-grid { grid-template-columns: 1fr; } }
.reports-action-item {
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--ink-3);
  border-radius: 8px;
  padding: 12px 14px;
}
.reports-action-item.reports-sev-bad  { border-left-color: var(--bad);  background: color-mix(in oklch, var(--bad) 6%, var(--bg-2)); }
.reports-action-item.reports-sev-warn { border-left-color: var(--warn); background: color-mix(in oklch, var(--warn) 6%, var(--bg-2)); }
.reports-action-item.reports-sev-info { border-left-color: var(--info); background: color-mix(in oklch, var(--info) 6%, var(--bg-2)); }
.reports-action-item.reports-sev-good { border-left-color: var(--good); background: color-mix(in oklch, var(--good) 6%, var(--bg-2)); }
.reports-action-title { font-weight: 700; color: var(--ink-0); margin-bottom: 4px; }
.reports-action-body  { font-size: 12.5px; color: var(--ink-1); line-height: 1.45; }

.reports-empty {
  background: var(--bg-2);
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 14px;
  color: var(--ink-3);
  text-align: center;
  font-size: 12.5px;
}
.reports-loading {
  padding: 20px; color: var(--ink-3);
  text-align: center; font-size: 13px;
}
.reports-toast {
  position: fixed;
  bottom: 30px; right: 30px;
  background: var(--bg-1);
  border: 1px solid var(--brand);
  color: var(--ink-0);
  padding: 10px 16px; border-radius: 8px;
  font-size: 13px; font-weight: 600;
  box-shadow: 0 6px 24px rgba(0,0,0,0.4);
  z-index: 300;
}

/* === CRM Kanban page =========================================== */
.pg-crm { display: flex; flex-direction: column; gap: 12px; }

.crm-totals-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
@media (max-width: 900px) { .crm-totals-grid { grid-template-columns: repeat(2, 1fr); } }
.crm-totals-cell {
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 2px;
}
.crm-totals-lbl { font-size: 10.5px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
.crm-totals-val { font-size: 18px; font-weight: 700; color: var(--ink-0); }
.crm-totals-pct { font-size: 12px; color: var(--ink-3); font-weight: 500; }
.crm-red { color: var(--bad); }

.crm-filters { gap: 10px; }
.crm-quick-row {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.crm-quick-filter {
  appearance: none;
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--ink-1);
  font: inherit; font-size: 12px; font-weight: 600;
  padding: 5px 12px; border-radius: 999px;
  cursor: pointer; transition: border-color 120ms, background 120ms, color 120ms;
}
.crm-quick-filter:hover { border-color: var(--brand); color: var(--ink-0); }
.crm-quick-filter.is-active {
  background: color-mix(in oklch, var(--brand) 22%, var(--bg-2));
  border-color: var(--brand); color: var(--brand);
}

.crm-custom-row {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: end;
}
.crm-flt {
  display: flex; flex-direction: column; gap: 2px;
  font-size: 10.5px; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.crm-flt span { font-weight: 600; }
.crm-flt input, .crm-flt select {
  background: var(--bg-2); border: 1px solid var(--line);
  color: var(--ink-0); border-radius: 6px;
  padding: 5px 8px; font: inherit; font-size: 12px;
  text-transform: none; letter-spacing: 0;
  min-width: 110px;
}
.crm-flt input:focus, .crm-flt select:focus { border-color: var(--brand); outline: none; }
.crm-btn {
  appearance: none; border: 1px solid var(--line);
  background: var(--bg-2); color: var(--ink-1);
  font: inherit; font-size: 12px; font-weight: 600;
  padding: 6px 12px; border-radius: 6px; cursor: pointer;
}
.crm-btn:hover { border-color: var(--bad); color: var(--bad); }

.crm-stale-banner {
  background: color-mix(in oklch, var(--warn) 14%, var(--bg-1));
  border: 1px solid color-mix(in oklch, var(--warn) 38%, var(--line));
  border-radius: 8px;
  padding: 10px 14px;
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--ink-0);
}
.crm-stale-icon { font-size: 18px; }

.crm-kanban-wrap {
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 6px;
}
.crm-kanban {
  display: grid;
  grid-template-columns: repeat(8, 230px);
  gap: 8px;
  min-width: max-content;
}
@media (min-width: 2600px) {
  .crm-kanban { grid-template-columns: repeat(8, 260px); gap: 10px; }
}
.crm-column {
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  display: flex; flex-direction: column;
  max-height: 720px;
  overflow: hidden;
}
.crm-tone-good   { border-top: 3px solid var(--good); }
.crm-tone-info   { border-top: 3px solid var(--info); }
.crm-tone-warn   { border-top: 3px solid var(--warn); }
.crm-tone-bad    { border-top: 3px solid var(--bad); }

.crm-column-header {
  position: sticky; top: 0;
  background: var(--bg-1);
  border-bottom: 1px solid var(--line-soft);
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 4px;
  z-index: 2;
}
.crm-column-title {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700; color: var(--ink-0);
  letter-spacing: 0.05em;
}
.crm-column-icon { font-size: 16px; }
.crm-column-stats {
  display: flex; align-items: baseline; justify-content: space-between;
  font-size: 12px; color: var(--ink-2);
}
.crm-column-amount { font-weight: 700; color: var(--ink-1); font-size: 11.5px; }

.crm-column-body {
  overflow-y: auto;
  padding: 8px;
  display: flex; flex-direction: column; gap: 6px;
  flex: 1;
}
.crm-column-body::-webkit-scrollbar { width: 6px; }
.crm-column-body::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: 3px; }

/* Patch 13-CRM-FIX-1 — повернути card size як був (per Йолт image #14):
   більший padding, більший id+amount шрифт, чіткіший channel chip + manager.
   Patch 13-CRM-FIX-2 — width:100% (button default = content-width inline-block;
   raw <button> inside .crm-card-wrap не fill-ив column). */
.crm-card {
  appearance: none;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 12px 14px;
  text-align: left;
  cursor: pointer;
  display: flex; flex-direction: column; gap: 6px;
  font: inherit; color: var(--ink-1);
  transition: border-color 120ms, transform 100ms;
  width: 100%;
  box-sizing: border-box;
}
.crm-card:hover { border-color: var(--brand); transform: translateY(-1px); }
.crm-card-row1 {
  display: flex; align-items: baseline; justify-content: space-between;
}
.crm-card-id   { color: var(--ink-3); font-size: 12.5px; font-weight: 600; }
.crm-card-amt  { color: var(--ink-0); font-size: 16px; font-weight: 700; }
.crm-card-row2 {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px;
  font-size: 13px;
}
.crm-card-channel {
  background: var(--bg-3); color: var(--ink-2);
  padding: 2px 8px; border-radius: 4px;
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
}
.crm-card-mgr { color: var(--ink-1); font-weight: 500; font-size: 13px; }
.crm-card-row3 {
  display: flex; align-items: baseline; justify-content: space-between;
  font-size: 11.5px; color: var(--ink-3);
}
.crm-card-time { color: var(--ink-3); }
.crm-card-reason { color: var(--bad); font-style: italic; }

.crm-card-stale-warn {
  border-color: color-mix(in oklch, var(--warn) 70%, var(--line));
  background: color-mix(in oklch, var(--warn) 6%, var(--bg-2));
}
.crm-card-stale-bad {
  border-color: color-mix(in oklch, var(--bad) 70%, var(--line));
  background: color-mix(in oklch, var(--bad) 8%, var(--bg-2));
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--bad) 28%, transparent);
}

.crm-empty {
  font-size: 11px; color: var(--ink-3);
  text-align: center;
  padding: 14px 6px;
  font-style: italic;
}
.crm-more {
  font-size: 10.5px; color: var(--ink-3);
  text-align: center;
  padding: 6px;
  background: var(--bg-3); border-radius: 4px;
}

/* CRM modal */
.crm-modal {
  position: fixed; inset: 0; z-index: 220;
  display: flex; align-items: center; justify-content: center;
}
.crm-modal[hidden] { display: none; }
.crm-modal-overlay {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(2px);
  cursor: pointer;
}
.crm-modal-card {
  position: relative;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 12px;
  width: min(720px, 92vw);
  max-height: 88vh;
  overflow: auto;
  padding: 18px 22px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
}
.crm-modal-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 16px; padding-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
}
.crm-modal-head h3 { margin: 0; font-size: 15px; flex: 1; color: var(--ink-0); }
.crm-modal-pill {
  background: var(--bg-2); border: 1px solid var(--line);
  color: var(--ink-1); font-size: 11px; font-weight: 700;
  padding: 2px 10px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.crm-modal-pill[data-tone="won"]      { background: color-mix(in oklch, var(--good) 18%, var(--bg-2)); border-color: var(--good); color: var(--good); }
.crm-modal-pill[data-tone="rejected"] { background: color-mix(in oklch, var(--bad) 18%, var(--bg-2));  border-color: var(--bad);  color: var(--bad); }
.crm-modal-pill[data-tone="returned"] { background: color-mix(in oklch, var(--warn) 18%, var(--bg-2)); border-color: var(--warn); color: var(--warn); }
.crm-modal-pill[data-tone="new"]      { background: color-mix(in oklch, var(--info) 18%, var(--bg-2)); border-color: var(--info); color: var(--info); }
.crm-modal-x {
  background: none; border: none;
  font-size: 22px; line-height: 1; padding: 0 8px;
  color: var(--ink-2); cursor: pointer;
}
.crm-modal-x:hover { color: var(--ink-0); }

.crm-modal-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin-bottom: 14px;
}
.crm-modal-stat {
  background: var(--bg-2); border-radius: 8px;
  padding: 10px 12px;
  border-left: 3px solid var(--brand);
}
.crm-modal-stat-lbl { font-size: 10px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.05em; }
.crm-modal-stat-val { font-size: 18px; font-weight: 700; color: var(--ink-0); margin: 4px 0; }
.crm-modal-stat-hint { font-size: 10.5px; color: var(--ink-3); }

.crm-modal-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 12px;
  font-size: 12.5px; color: var(--ink-1);
  margin-bottom: 14px;
  background: var(--bg-2); border-radius: 8px;
  padding: 12px 14px;
}
.crm-modal-grid .crm-lbl {
  font-size: 10.5px; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: 0.04em;
  display: block; margin-bottom: 1px;
}
.crm-modal-grid strong { color: var(--ink-0); }

.crm-modal-items {
  background: var(--bg-2); border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 14px;
  font-size: 12.5px;
}
.crm-modal-items ul { margin: 4px 0 0; padding-left: 18px; color: var(--ink-1); }

.crm-modal-reject {
  background: color-mix(in oklch, var(--bad) 12%, var(--bg-2));
  border: 1px solid color-mix(in oklch, var(--bad) 35%, var(--line));
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 12.5px; color: var(--ink-0);
  margin-bottom: 14px;
}

.crm-modal-links {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
@media (max-width: 700px) { .crm-modal-links { grid-template-columns: 1fr; } }

.crm-toast {
  position: fixed;
  bottom: 30px; right: 30px;
  background: var(--bg-1);
  border: 1px solid var(--brand);
  color: var(--ink-0);
  padding: 10px 16px; border-radius: 8px;
  font-size: 13px; font-weight: 600;
  box-shadow: 0 6px 24px rgba(0,0,0,0.4);
  z-index: 300;
}

/* ════════════════════════════════════════════════════════════════════
   PATCH 13-DESIGN-INT.1 — Item 8: UIKit.html DELTA extract.
   Existing oklch token palette already matches UIKit.html exactly — NO
   color overrides applied here. Only NEW tokens (shadows) + missing utility
   classes (cross-card, note banners, loading skeleton/spinner/progress).
   ════════════════════════════════════════════════════════════════════ */
:root {
  --shadow-low:  0 1px 0 oklch(0 0 0 / 0.20), 0 1px 2px oklch(0 0 0 / 0.18);
  --shadow-mid:  0 4px 8px -2px oklch(0 0 0 / 0.32), 0 2px 4px -1px oklch(0 0 0 / 0.24);
  --shadow-high: 0 16px 32px -8px oklch(0 0 0 / 0.45), 0 4px 12px -2px oklch(0 0 0 / 0.30);
}

/* ── cross-link cards (used by Channels Item 5 + Ads Item 2) ── */
.cross-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 900px) { .cross-row { grid-template-columns: repeat(2, 1fr); } }
.cross-card {
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 14px;
  display: flex; flex-direction: column; gap: 8px;
  cursor: pointer;
  transition: border-color 160ms ease, transform 160ms ease;
  text-decoration: none; color: inherit;
}
.cross-card:hover {
  border-color: color-mix(in oklch, var(--brand) 35%, var(--line));
  transform: translateY(-1px); text-decoration: none;
}
.cross-card .ic-box {
  width: 30px; height: 30px; border-radius: 7px;
  background: color-mix(in oklch, var(--brand) 16%, var(--bg-2));
  color: var(--brand);
  display: grid; place-items: center;
}
.cross-card .ic-box svg { width: 16px; height: 16px; }
.cross-card .t { font-size: 13px; color: var(--ink-0); font-weight: 600; }
.cross-card .d { font-size: 11.5px; color: var(--ink-3); }
.cross-card .arr {
  margin-top: auto; color: var(--ink-3);
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  display: flex; align-items: center; gap: 4px;
}
.cross-card.tone-info .ic-box { background: color-mix(in oklch, var(--info) 16%, var(--bg-2)); color: var(--info); }
.cross-card.tone-good .ic-box { background: color-mix(in oklch, var(--good) 16%, var(--bg-2)); color: var(--good); }
.cross-card.tone-warn .ic-box { background: color-mix(in oklch, var(--warn) 16%, var(--bg-2)); color: var(--warn); }
.cross-card.tone-bad  .ic-box { background: color-mix(in oklch, var(--bad)  16%, var(--bg-2)); color: var(--bad);  }

/* ── note / banner system (4 semantic variants) ── */
.uk-note {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px; border-radius: 8px;
  background: var(--bg-2);
  border-left: 3px solid var(--line);
  font-size: 12.5px; color: var(--ink-1); line-height: 1.45;
}
.uk-note .uk-note-ic { flex: none; width: 18px; height: 18px; display: grid; place-items: center; font-size: 12px; }
.uk-note.info { border-left-color: var(--info); background: color-mix(in oklch, var(--info) 6%, var(--bg-2)); }
.uk-note.info .uk-note-ic { color: var(--info); }
.uk-note.warn { border-left-color: var(--warn); background: color-mix(in oklch, var(--warn) 7%, var(--bg-2)); }
.uk-note.warn .uk-note-ic { color: var(--warn); }
.uk-note.bad  { border-left-color: var(--bad);  background: color-mix(in oklch, var(--bad)  6%, var(--bg-2)); }
.uk-note.bad  .uk-note-ic { color: var(--bad); }
.uk-note.good { border-left-color: var(--good); background: color-mix(in oklch, var(--good) 6%, var(--bg-2)); }
.uk-note.good .uk-note-ic { color: var(--good); }

/* ── loading: skeleton shimmer / spinner / progress ── */
@keyframes uk-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.uk-skeleton {
  background: linear-gradient(90deg, var(--bg-2) 0%, color-mix(in oklch, var(--bg-3) 80%, var(--bg-2)) 50%, var(--bg-2) 100%);
  background-size: 200% 100%;
  animation: uk-shimmer 1.4s linear infinite;
  border-radius: 4px; height: 12px;
}
.uk-sk-card {
  background: var(--bg-1); border: 1px solid var(--line-soft);
  border-radius: 10px; padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
}
@keyframes uk-spin { to { transform: rotate(360deg); } }
.uk-spinner-lg {
  width: 28px; height: 28px;
  border: 3px solid color-mix(in oklch, var(--brand) 20%, transparent);
  border-top-color: var(--brand); border-radius: 50%;
  animation: uk-spin 0.9s linear infinite;
}
.uk-progress {
  position: relative; width: 100%; height: 6px;
  background: var(--bg-2); border-radius: 3px; overflow: hidden;
}
.uk-progress > i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--brand) 0%, color-mix(in oklch, var(--brand) 70%, var(--good)) 100%);
  border-radius: 3px; transition: width 220ms ease;
}

/* ════════════════════════════════════════════════════════════════════
   PATCH 13-UPSELL — Допродажі page (10-tier, oklch only)
   ════════════════════════════════════════════════════════════════════ */
.pg-upsell { display: flex; flex-direction: column; gap: 14px; }
.ups-hero {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px;
}
@media (max-width: 1400px) { .ups-hero { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 700px)  { .ups-hero { grid-template-columns: repeat(2, 1fr); } }
.ups-sc {
  background: var(--bg-1); border: 1px solid var(--line-soft);
  border-radius: 10px; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 6px;
  border-top: 2px solid var(--brand);
}
.ups-sc-head { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); font-weight: 600; }
.ups-sc-big {
  font-family: 'JetBrains Mono', monospace;
  font-size: 20px; font-weight: 600; color: var(--ink-0);
  line-height: 1.05; word-break: break-word;
}
.ups-sc-foot { font-size: 10.5px; color: var(--ink-3); }

.ups-profit-card .ups-profit { padding: 8px 0 16px 0; }
.ups-profit-stat {
  background: color-mix(in oklch, var(--good) 8%, var(--bg-2));
  border: 1px solid color-mix(in oklch, var(--good) 30%, var(--line));
  border-radius: 10px; padding: 14px 18px;
}
.ups-profit-big {
  font-family: 'JetBrains Mono', monospace;
  font-size: 26px; font-weight: 700; color: var(--good); line-height: 1.1;
}
.ups-profit-pct { font-size: 14px; color: var(--ink-2); font-weight: 500; margin-left: 8px; }
.ups-profit-meta { font-size: 12px; color: var(--ink-2); margin-top: 6px; }
.ups-site-tbl-wrap { overflow-x: auto; }
.ups-site-tbl, .ups-mgr-tbl, .ups-3col-tbl, .ups-sku-tbl, .ups-modal-tbl {
  width: 100%; font-size: 12px;
}
.ups-site-tbl th, .ups-mgr-tbl th, .ups-3col-tbl th, .ups-sku-tbl th, .ups-modal-tbl th {
  text-align: left; padding: 6px 10px;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-3); font-weight: 600;
  border-bottom: 1px solid var(--line-soft);
}
.ups-site-tbl th.r, .ups-mgr-tbl th.r, .ups-3col-tbl th.r,
.ups-sku-tbl th.r, .ups-modal-tbl th.r { text-align: right; }
.ups-site-tbl td, .ups-mgr-tbl td, .ups-3col-tbl td, .ups-sku-tbl td, .ups-modal-tbl td {
  padding: 6px 10px;
  border-bottom: 1px solid color-mix(in oklch, var(--line) 50%, transparent);
}
.ups-site-tbl td.r, .ups-mgr-tbl td.r, .ups-3col-tbl td.r,
.ups-sku-tbl td.r, .ups-modal-tbl td.r { text-align: right; }
.ups-site-tbl td.muted, .ups-mgr-tbl td.muted, .ups-modal-tbl td.muted { color: var(--ink-3); }
.ups-site-tbl .mono, .ups-mgr-tbl .mono, .ups-3col-tbl .mono,
.ups-sku-tbl .mono, .ups-modal-tbl .mono,
.ups-site-tbl td.mono, .ups-mgr-tbl td.mono, .ups-modal-tbl td.mono {
  font-family: 'JetBrains Mono', monospace;
}
.ups-site-tbl .sum-row td, .ups-mgr-tbl .sum-row td, .ups-3col-tbl .sum-row td {
  background: color-mix(in oklch, var(--brand) 6%, var(--bg-2));
  font-weight: 600; color: var(--ink-0);
  border-top: 1px solid var(--line);
}

.ups-mgr-row { cursor: pointer; transition: background 120ms ease; }
.ups-mgr-row:hover { background: color-mix(in oklch, var(--brand) 6%, transparent); }
.ups-mgr-spark svg { display: block; }

.ups-3col {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  padding: 8px 0;
}
@media (max-width: 1100px) { .ups-3col { grid-template-columns: 1fr; } }
.ups-3col-card {
  background: var(--bg-1); border: 1px solid var(--line-soft);
  border-radius: 10px; padding: 14px;
  display: flex; flex-direction: column; gap: 12px;
}
.ups-3col-h { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); font-weight: 600; }
.ups-donut { width: 132px; height: 132px; margin: 0 auto; }
.ups-donut-empty { color: var(--ink-3); padding: 18px; text-align: center; font-size: 11px; }
.ups-3col-tbl .sw {
  display: inline-block; width: 8px; height: 8px;
  border-radius: 2px; margin-right: 6px;
}

.ups-sku-grid {
  display: grid; grid-template-columns: 1.5fr 1fr; gap: 14px;
  align-items: start;
}
@media (max-width: 900px) { .ups-sku-grid { grid-template-columns: 1fr; } }
/* Patch 2026-05-08 — Йолт: limit SKU/Categories block висота — 12 rows visible, scroll for rest. */
.ups-sku-grid .ups-sku-side,
.ups-sku-grid .ups-cat-side {
  max-height: 440px;            /* ~12 rows × 32px + thead + padding */
  overflow-y: auto;
  scrollbar-width: thin;
}
.ups-sku-grid .ups-sku-side .ups-sku-tbl thead th,
.ups-sku-grid .ups-cat-side .ups-sku-tbl thead th {
  position: sticky; top: 0;
  background: var(--bg-1);
  z-index: 1;
}
.ups-sku-h {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-3); font-weight: 600; margin-bottom: 6px;
}
.ups-sku-cat { font-size: 10.5px; color: var(--ink-3); font-family: 'Inter Tight', system-ui, sans-serif; }

.ups-time-grid {
  display: grid; grid-template-columns: 1.2fr 1.5fr; gap: 14px;
}
@media (max-width: 1100px) { .ups-time-grid { grid-template-columns: 1fr; } }
/* Patch 2026-05-08 — Йолт: пропорційний + акуратний daily-trend visual.
   Тісніші bars (24px max-width), більший gap (6px), більший diapason висоти. */
.ups-daily-bars {
  display: flex; gap: 6px; align-items: flex-end;
  padding: 14px 4px 6px 4px; overflow-x: auto;
  min-height: 120px;
}
.ups-daily-tick {
  flex: 0 1 28px; min-width: 18px; max-width: 36px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.ups-daily-bar {
  width: 100%; min-height: 4px;
  background: linear-gradient(180deg,
    color-mix(in oklch, var(--brand) 95%, transparent) 0%,
    color-mix(in oklch, var(--brand) 65%, transparent) 100%);
  border-radius: 3px 3px 0 0;
  transition: opacity 120ms ease;
}
.ups-daily-tick:hover .ups-daily-bar { opacity: 0.7; }
.ups-daily-day {
  font-size: 9px; color: var(--ink-3);
  font-family: 'JetBrains Mono', monospace;
  white-space: nowrap; transform: rotate(-45deg); transform-origin: center;
}
.ups-daily-foot {
  font-size: 11px; color: var(--ink-3);
  font-family: 'JetBrains Mono', monospace;
  text-align: center; padding-top: 6px;
}
.ups-heat-wrap { display: flex; flex-direction: column; gap: 2px; padding: 4px 0; overflow-x: auto; }
.ups-heat-cols, .ups-heat-row { display: grid; grid-template-columns: 28px repeat(24, 1fr); gap: 2px; }
.ups-heat-corner { height: 16px; }
.ups-heat-colhead {
  height: 16px; font-size: 9px; color: var(--ink-3);
  text-align: center; font-family: 'JetBrains Mono', monospace;
}
.ups-heat-rowhead {
  font-size: 10px; color: var(--ink-2);
  display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace;
}
.ups-heat-cell {
  height: 18px; border-radius: 2px;
  display: grid; place-items: center;
  font-size: 8.5px; font-family: 'JetBrains Mono', monospace;
  color: var(--ink-2); cursor: default;
}
.ups-heat-cell:hover { outline: 1px solid var(--brand); }

.ups-forecast-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  padding: 8px 0;
}
@media (max-width: 900px) { .ups-forecast-grid { grid-template-columns: 1fr; } }
.ups-forecast-card {
  background: var(--bg-2); border: 1px solid var(--line-soft);
  border-radius: 10px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 6px;
}
.ups-forecast-card.ups-forecast-good {
  border-color: color-mix(in oklch, var(--good) 30%, var(--line));
  background: color-mix(in oklch, var(--good) 8%, var(--bg-2));
}
.ups-forecast-l { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); font-weight: 600; }
.ups-forecast-v {
  font-family: 'JetBrains Mono', monospace;
  font-size: 22px; font-weight: 700; color: var(--ink-0);
}
.ups-forecast-good .ups-forecast-v { color: var(--good); }
.ups-forecast-meta { font-size: 11px; color: var(--ink-3); font-family: 'JetBrains Mono', monospace; }

.ups-modal-bg {
  position: fixed; inset: 0;
  background: oklch(0 0 0 / 0.55);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 20px; z-index: 240;
  overflow-y: auto; backdrop-filter: blur(4px);
}
.ups-modal-bg[hidden] { display: none; }
.ups-modal {
  background: var(--bg-1); border: 1px solid var(--line);
  border-radius: 14px; width: 100%; max-width: 1080px;
  padding: 18px 20px;
  display: flex; flex-direction: column; gap: 14px;
  box-shadow: var(--shadow-high, 0 16px 32px -8px rgba(0,0,0,0.5));
}
.ups-modal-h {
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
}
.ups-modal-av {
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--bg-0); font-weight: 700; font-size: 14px;
  font-family: 'JetBrains Mono', monospace; flex: none;
}
.ups-modal-info { flex: 1; min-width: 0; }
.ups-modal-name {
  font-size: 18px; color: var(--ink-0); font-weight: 700;
  letter-spacing: -0.01em;
}
.ups-modal-meta { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.ups-modal-stats { display: flex; gap: 8px; }
.ups-modal-stat {
  background: var(--bg-2); border: 1px solid var(--line-soft);
  border-radius: 7px; padding: 6px 10px; min-width: 90px;
}
.ups-modal-stat .l {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-3); font-weight: 600;
}
.ups-modal-stat .v {
  font-size: 14px; color: var(--ink-0); font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
}
.ups-modal-close {
  cursor: pointer; color: var(--ink-2);
  padding: 6px 10px; border-radius: 6px;
  background: var(--bg-2); border: 1px solid var(--line-soft);
  font-size: 18px; line-height: 1;
}
.ups-modal-close:hover { color: var(--ink-0); background: var(--bg-3); }
.ups-amount-pill {
  display: inline-block;
  padding: 2px 8px; border-radius: 999px;
  background: color-mix(in oklch, var(--good) 18%, var(--bg-2));
  color: var(--good); font-weight: 600;
}
.ups-comment-cell {
  font-size: 11px; color: var(--ink-2);
  max-width: 320px;
  font-family: 'Inter Tight', system-ui, sans-serif;
}

.ups-insights { display: flex; flex-direction: column; gap: 8px; }

.pg-upsell .card-h .right { display: flex; align-items: center; gap: 8px; }
.pg-upsell .seg.ups-cat-seg button {
  background: transparent;
  border: 1px solid var(--line-soft);
  color: var(--ink-2);
  font-size: 11px; padding: 4px 10px; border-radius: 5px;
  cursor: pointer;
}
.pg-upsell .seg.ups-cat-seg button.on {
  background: var(--brand); color: var(--bg-0);
  border-color: var(--brand); font-weight: 600;
}

/* ════════════════════════════════════════════════════════════════════
   PATCH 13-GLOBAL-UX — Topbar UX cleanup + sidebar restructure
   ════════════════════════════════════════════════════════════════════ */

/* P0-1 — date pill click affordance (entire block clickable, native input
   covers it via absolute overlay; cursor pointer hint on the label). */
.date-input { cursor: pointer; }
.date-input:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--brand) 22%, transparent);
}

/* P0-2 — Apply duplicated at top of filter panel header */
.filter-panel-apply-top {
  margin-left: auto;
  padding: 4px 14px;
  font-size: 12px;
}

/* P0-4 — Lang / Currency lock */
.seg.lang-seg button.is-locked,
.seg.cur-seg button.is-locked,
.seg.lang-seg button[disabled],
.seg.cur-seg button[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: auto;   /* keep tooltip working на disabled */
  filter: grayscale(0.4);
}
.seg.lang-seg button.is-locked:hover,
.seg.cur-seg button.is-locked:hover {
  background: transparent;
  border-color: var(--line-soft);
}

/* P0-5/6/7 — Sidebar restructure (Pinned / Custom / Ultra / collapsible groups) */

/* Lineart icon defaults (Lucide-style 24×24 stroke 1.5 currentColor) */
.sb-ic { width: 18px; height: 18px; flex: none; display: block; }

/* Sb item layout: icon left, label right-aligned, status tag + star at end */
.sb-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border-radius: 6px;
  color: var(--text);
  text-decoration: none;
  transition: background 80ms ease, color 80ms ease;
  position: relative;
}
.sb-item-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  color: var(--ink-2);
}
.sb-item:hover .sb-item-icon,
.sb-item.active .sb-item-icon { color: var(--brand); }
.sb-item-label {
  flex: 1;
  text-align: right;
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Star button (pin) — appears on hover only, on-state always visible */
.sb-star {
  flex: none;
  background: transparent;
  border: 0;
  padding: 2px;
  border-radius: 4px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 120ms ease, color 120ms ease;
  color: var(--ink-3);
}
.sb-item:hover .sb-star { opacity: 0.8; }
.sb-star.is-on {
  opacity: 1;
  color: var(--warn);
}
.sb-star:hover { color: var(--brand); }

/* Sections (Pinned / Custom / Ultra / Group container) */
.sb-section {
  padding: 4px 4px;
  margin-bottom: 6px;
}
.sb-pinned { border-bottom: 1px dashed var(--line-soft); padding-bottom: 8px; }
.sb-pinned-label,
.sb-ultra-label,
.sb-custom-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 700;
  padding: 6px 8px 4px 8px;
}
.sb-pinned-label .sb-ic,
.sb-custom-label .sb-ic { width: 13px; height: 13px; }
.sb-pinned-count,
.sb-custom-count {
  margin-left: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  color: var(--ink-3);
  background: var(--bg-elev-2);
  padding: 1px 6px;
  border-radius: 8px;
  letter-spacing: 0;
  text-transform: none;
}
.sb-section ul { list-style: none; padding: 0; margin: 0; }

/* Ultra Top — slightly emphasized (pink-bright accent on PlusUltra Acid) */
.sb-ultra { border-bottom: 1px solid var(--line-soft); padding-bottom: 8px; }
.sb-ultra .sb-item-icon { color: var(--brand); }

/* Custom group head with delete button */
.sb-custom-head {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px 4px 8px;
}
.sb-custom-del {
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--ink-3);
  padding: 2px;
  border-radius: 4px;
}
.sb-custom-del:hover { color: var(--bad); }
.sb-custom-del .sb-ic { width: 12px; height: 12px; }
.sb-custom-empty {
  padding: 6px 12px;
  font-size: 11px;
  color: var(--ink-3);
  font-style: italic;
}
.sb-custom-add {
  padding: 4px 8px 2px;
}
.sb-custom-add-pick {
  width: 100%;
  background: var(--bg-elev-2);
  border: 1px solid var(--line-soft);
  border-radius: 5px;
  color: var(--ink-2);
  font-size: 11px;
  padding: 4px 6px;
  font-family: inherit;
}
.sb-custom-add-pick:hover { border-color: var(--brand); }

/* Collapsible groups (max 2 open per JS policy) */
details.sb-group {
  border-radius: 6px;
  overflow: hidden;
}
details.sb-group > summary {
  cursor: pointer;
  list-style: none;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  color: var(--ink-3);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  user-select: none;
  border-radius: 6px;
  transition: background 120ms ease, color 120ms ease;
}
details.sb-group > summary::-webkit-details-marker { display: none; }
details.sb-group > summary::marker { display: none; content: ''; }
details.sb-group > summary:hover {
  background: var(--bg-elev-2);
  color: var(--ink-1);
}
details.sb-group .sb-group-icon {
  display: inline-flex;
  flex: none;
  color: var(--ink-3);
}
details.sb-group:hover .sb-group-icon,
details.sb-group[open] .sb-group-icon { color: var(--brand); }
details.sb-group .sb-group-label { flex: 1; text-align: right; font-family: 'Inter Tight', system-ui, sans-serif; }
details.sb-group .sb-group-count {
  background: var(--bg-elev-2);
  color: var(--ink-3);
  font-size: 9.5px;
  padding: 1px 6px;
  border-radius: 8px;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 500;
  font-family: 'JetBrains Mono', monospace;
}
details.sb-group ul {
  padding: 2px 0 6px 0;
}
/* Collapse animation: native toggle (modern browsers respect transitions on
   ::details-content; fall back to instant on older). */
@supports (interpolate-size: allow-keywords) {
  details.sb-group {
    interpolate-size: allow-keywords;
  }
  details.sb-group::details-content {
    height: 0;
    overflow: hidden;
    transition: height 220ms ease, content-visibility 220ms allow-discrete;
  }
  details.sb-group[open]::details-content { height: auto; }
}

/* Create custom group button */
.sb-create-custom {
  display: flex; align-items: center; gap: 8px;
  width: calc(100% - 8px);
  margin: 6px 4px 4px;
  padding: 8px 10px;
  background: transparent;
  border: 1px dashed var(--line-soft);
  border-radius: 6px;
  color: var(--ink-3);
  cursor: pointer;
  font-family: inherit;
  font-size: 11.5px;
  transition: border-color 120ms ease, color 120ms ease;
}
.sb-create-custom:hover {
  border-color: var(--brand);
  color: var(--brand);
}
.sb-create-custom .sb-ic { width: 14px; height: 14px; }

/* Settings standalone (footer area) */
.sb-settings {
  margin: 6px 4px 0;
  padding: 8px 12px;
  border-top: 1px solid var(--line-soft);
  border-radius: 0;
}

/* Toast (pin / custom limits) */
.sb-toast {
  position: fixed;
  bottom: 28px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--bg-elev-2);
  border: 1px solid var(--brand);
  color: var(--ink-0);
  padding: 8px 14px; border-radius: 8px;
  font-size: 12px;
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
  box-shadow: 0 8px 24px color-mix(in oklch, var(--bg-0) 70%, transparent);
}
.sb-toast.is-on {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ════════════════════════════════════════════════════════════════════
   PATCH 13-OVERVIEW-V2 — Overview redesign + Demo flow update.
   Append-only. oklch only, NO hex. Namespaced .ov2-* / .demo-v2-*.
   ════════════════════════════════════════════════════════════════════ */

/* Patch 13-REV-SIZE-FIX-2 — Revenue card final (5-th + 6-th cycle).
   Border + glow KEPT (Йолт wanted highlight) but flipped від brand (cyan) → good (green)
   per Йолт UI. font-size override REMOVED — Revenue inherits canonical .kpi .big.num 28px,
   matching Spend visually (was 1.15em, made it different size). Combined з _demo.js
   markup change (FMT_M single-string render replacing fragmented digit + .unit wrapper). */
.kpi[data-primary="revenue"] {
  border: 1px solid color-mix(in oklch, var(--good) 50%, var(--line));
  background: linear-gradient(
    180deg,
    color-mix(in oklch, var(--good) 12%, var(--bg-1)) 0%,
    var(--bg-1) 70%
  );
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--good) 14%, transparent),
              0 0 24px color-mix(in oklch, var(--good) 18%, transparent);
}
.kpi[data-primary="revenue"] .big.num {
  color: var(--good);
  letter-spacing: -0.025em;
  text-shadow: 0 0 12px color-mix(in oklch, var(--good) 18%, transparent);
}
.kpi[data-primary="revenue"]:hover {
  border-color: color-mix(in oklch, var(--good) 65%, var(--line));
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--good) 22%, transparent),
              0 0 32px color-mix(in oklch, var(--good) 26%, transparent);
}

/* Hero `?` glyph next to alert head label (P0-1) — make it visible in red/amber alert */
.alert .head .q.hero-q {
  margin-left: 6px;
  background: color-mix(in oklch, var(--bg-3) 80%, transparent);
  color: var(--ink-2);
  width: 14px; height: 14px; font-size: 9.5px;
  display: inline-grid; place-items: center;
  border-radius: 50%; cursor: help;
  border: 0;
}
.alert .head .q.hero-q:hover {
  background: var(--ink-3);
  color: var(--ink-0);
}

/* P0-3 — Cross-link banner shown on /leaks /recommendations /geo when ?from=overview */
.ov2-from-overview-banner {
  background: linear-gradient(
    135deg,
    color-mix(in oklch, var(--brand) 14%, var(--bg-1)) 0%,
    color-mix(in oklch, var(--info) 8%, var(--bg-1)) 100%
  );
  border: 1px solid color-mix(in oklch, var(--brand) 30%, var(--line));
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 14px;
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 13px; line-height: 1.5;
  color: var(--ink-0);
}
.ov2-from-overview-banner .ov2-banner-ic {
  font-size: 18px; line-height: 1; flex: 0 0 auto;
}
.ov2-from-overview-banner .ov2-banner-body { flex: 1; }
.ov2-from-overview-banner .ov2-banner-title { font-weight: 700; margin-bottom: 2px; }
.ov2-from-overview-banner .ov2-banner-sub   { color: var(--ink-2); font-size: 12px; }
.ov2-from-overview-banner .ov2-banner-close {
  background: none; border: 0; color: var(--ink-3);
  font-size: 18px; line-height: 1; cursor: pointer;
  padding: 0 6px;
  align-self: flex-start;
}
.ov2-from-overview-banner .ov2-banner-close:hover { color: var(--ink-0); }

/* Highlighted items pulse (P0-3 visual feedback) */
.ov2-highlighted {
  position: relative;
  outline: 2px solid color-mix(in oklch, var(--brand) 65%, transparent);
  outline-offset: 2px;
  animation: ov2-pulse 2s ease-out 3;
  border-radius: 8px;
}
@keyframes ov2-pulse {
  0%, 100% { outline-color: color-mix(in oklch, var(--brand) 65%, transparent); }
  50%      { outline-color: color-mix(in oklch, var(--brand) 95%, transparent); }
}

/* P0-4 + P0-5 — segmented toggle + sum-row blocks */
.ov2-block {
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 14px 14px 12px;
  display: flex; flex-direction: column; gap: 10px;
}
.ov2-block-h {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.ov2-block-h h3 { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink-0); }
.ov2-block-h .hint { font-size: 11px; color: var(--ink-3); flex: 1; }

.ov2-seg {
  display: inline-flex;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  padding: 2px;
  gap: 0;
}
.ov2-seg button {
  appearance: none; background: transparent; border: 0;
  color: var(--ink-2);
  padding: 4px 10px;
  border-radius: 5px;
  font: inherit; font-size: 11.5px; font-weight: 600;
  cursor: pointer;
  transition: background 100ms, color 100ms;
}
.ov2-seg button:hover { color: var(--ink-0); }
.ov2-seg button.is-active {
  background: color-mix(in oklch, var(--brand) 22%, var(--bg-3));
  color: var(--brand);
}

.ov2-sum-row {
  background: var(--bg-2);
  border-top: 2px solid color-mix(in oklch, var(--brand) 30%, var(--line));
  font-weight: 700;
  position: sticky; bottom: 0;
}
.ov2-sum-row td {
  padding: 8px 10px;
  background: var(--bg-2);
}
.ov2-sum-row .v {
  font-family: 'JetBrains Mono', monospace;
  font-feature-settings: "tnum";
  color: var(--ink-0);
}

/* P1-6 — Demo flow v2 spotlight + tooltip */
body.demo-v2-active::before {
  content: '';
  position: fixed; inset: 0;
  background: oklch(0.10 0 0 / 0.72);
  z-index: 9000;
  pointer-events: none;
  transition: opacity 0.25s;
}
.demo-v2-spotlight {
  position: relative;
  z-index: 9001;
  outline: 3px solid color-mix(in oklch, var(--brand) 70%, transparent);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--brand) 30%, transparent),
              0 0 36px color-mix(in oklch, var(--brand) 35%, transparent);
  border-radius: 10px;
  background: var(--bg-1);
  transition: outline 0.2s, box-shadow 0.2s;
}
.demo-v2-tooltip {
  position: fixed;
  z-index: 9002;
  background: var(--bg-1);
  border: 1px solid color-mix(in oklch, var(--brand) 40%, var(--line));
  border-radius: 10px;
  padding: 14px 16px;
  width: min(380px, 92vw);
  box-shadow: 0 18px 48px rgba(0,0,0,0.55), 0 0 28px color-mix(in oklch, var(--brand) 20%, transparent);
  color: var(--ink-0);
  font-size: 13px; line-height: 1.5;
}
.demo-v2-tooltip[hidden] { display: none; }
.demo-v2-tooltip-step {
  font-size: 10.5px; color: var(--brand);
  text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700;
  margin-bottom: 4px;
}
.demo-v2-tooltip-title {
  font-size: 14.5px; font-weight: 700; color: var(--ink-0);
  margin-bottom: 6px;
}
.demo-v2-tooltip-body { color: var(--ink-1); }
.demo-v2-tooltip-controls {
  display: flex; align-items: center; gap: 8px;
  margin-top: 12px; padding-top: 10px;
  border-top: 1px solid var(--line-soft);
}
.demo-v2-tooltip-controls .demo-v2-progress {
  flex: 1; display: flex; gap: 3px;
}
.demo-v2-tooltip-controls .demo-v2-pip {
  width: 16px; height: 4px; border-radius: 2px;
  background: var(--bg-3);
}
.demo-v2-tooltip-controls .demo-v2-pip.active { background: var(--brand); }
.demo-v2-tooltip-controls .demo-v2-pip.done   { background: color-mix(in oklch, var(--brand) 70%, var(--bg-3)); }
.demo-v2-tooltip-btn {
  appearance: none; border: 1px solid var(--line);
  background: var(--bg-2); color: var(--ink-1);
  padding: 5px 12px; border-radius: 6px; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 600;
}
.demo-v2-tooltip-btn:hover { border-color: var(--brand); color: var(--ink-0); }
.demo-v2-tooltip-btn.primary {
  background: var(--brand); color: var(--bg-0); border-color: var(--brand);
}
.demo-v2-tooltip-btn.primary:hover { box-shadow: 0 0 12px color-mix(in oklch, var(--brand) 35%, transparent); }
.demo-v2-tooltip-btn[disabled] { opacity: 0.4; cursor: not-allowed; }

/* ════════════════════════════════════════════════════════════════════
   PATCH 13-GLOBAL-UX.1 — Sidebar layout polish (override block).
   P0-1 icons 18×18 stroke 1.75 · P0-2 font 11px · P0-3 labels LEFT-align ·
   P0-4 badges RIGHT-align · P0-5 pin star ×2 smaller (12px btn / 7px icon) ·
   P0-6 ULTRA no pin (handled у sidebar.js) · P0-7 PINNED→COCKPIT under ULTRA
   (handled у sidebar.js — render order swap).
   ════════════════════════════════════════════════════════════════════ */

/* P0-1 — Icons 18×18 stroke 1.75 (override base .sb-ic / .sb-item-icon defaults) */
.sb-root .sb-ic,
.sb-root .sb-item-icon svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.75;
}

/* P0-2 — Font 11px на label / section title / badge */
.sb-item-label,
.sb-section-title,
.sb-pinned-label,
.sb-cockpit-label,
.sb-ultra-label,
.sb-custom-label,
details.sb-group > summary,
.sb-item-badge {
  font-size: 11px;
  line-height: 1.4;
}
.sb-section-title,
.sb-pinned-label,
.sb-cockpit-label,
.sb-ultra-label,
.sb-custom-label,
details.sb-group > summary {
  letter-spacing: 0.06em;
  font-weight: 600;
}
details.sb-group > summary { font-weight: 700; }

/* P0-3 — Labels LEFT-align (correction from initial right-align). Badge auto-pushed
   right because flex:1 on label takes remaining row space; badge has no flex-grow. */
.sb-root .sb-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
}
.sb-root .sb-item-icon { flex: 0 0 auto; }
.sb-root .sb-item-label {
  flex: 1 1 auto;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Group + custom + section header LEFT alignment */
.sb-root details.sb-group > summary .sb-group-label,
.sb-root .sb-section-title,
.sb-root .sb-pinned-label,
.sb-root .sb-cockpit-label,
.sb-root .sb-ultra-label,
.sb-root .sb-custom-label {
  text-align: left;
  flex: 1 1 auto;
}

/* P0-4 — Badges (live / beta / soon) RIGHT-aligned, compact 9px text */
.sb-item-badge {
  flex: 0 0 auto;
  margin-left: auto;
  font-size: 9px;
  padding: 1px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  font-family: 'Inter Tight', system-ui, sans-serif;
  line-height: 1.3;
}
.sb-item-badge-live { background: color-mix(in oklch, var(--good) 15%, transparent); color: var(--good); }
.sb-item-badge-beta { background: color-mix(in oklch, var(--warn) 15%, transparent); color: var(--warn); }
.sb-item-badge-soon { background: color-mix(in oklch, var(--ink-3) 12%, transparent); color: var(--ink-3); }

/* P0-5 — Pin star ×2 smaller (12px button, 7px star icon) */
.sb-pin-toggle {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  opacity: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-3);
  transition: opacity 120ms ease, color 120ms ease;
}
.sb-pin-toggle svg { width: 7px; height: 7px; stroke-width: 2; }
.sb-item:hover .sb-pin-toggle { opacity: 0.45; }
.sb-pin-toggle.is-on,
.sb-pin-toggle.pinned {
  opacity: 1;
  color: var(--accent, var(--brand));
}
.sb-pin-toggle:hover { color: var(--brand); opacity: 1; }

/* P0-7 — COCKPIT section (renamed from Pinned) styling under ULTRA */
.sb-cockpit { border-bottom: 1px dashed var(--line-soft); padding-bottom: 8px; }
.sb-cockpit[hidden],
.sb-cockpit:empty { display: none; }
.sb-cockpit-label {
  display: flex;
  align-items: center;
  gap: 6px;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 6px 10px 4px;
}
.sb-cockpit-label .sb-ic { width: 12px; height: 12px; }
.sb-cockpit .sb-pinned-count {
  margin-left: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  background: var(--bg-elev-2);
  padding: 1px 6px;
  border-radius: 8px;
  color: var(--ink-3);
  letter-spacing: 0;
  text-transform: none;
  font-weight: 500;
}

/* P0-6 — ULTRA: no pin star renders (handled у sidebar.js renderer). Style stays. */

/* Group summary / custom / pinned counts compact (override 13-GLOBAL-UX defaults) */
.sb-root details.sb-group .sb-group-count,
.sb-root .sb-custom-count {
  font-size: 9px;
  padding: 1px 6px;
}

/* ════════════════════════════════════════════════════════════════════
   PATCH 13-FIX-2A — Global polish + Лампочки
   ════════════════════════════════════════════════════════════════════ */

/* P0-1 — Pin star ×2 ще менше: 8×8 button, 4×4 icon (was 12/7 у UX.1) */
.sb-root .sb-pin-toggle {
  width: 8px;
  height: 8px;
  opacity: 0.4;
}
.sb-root .sb-pin-toggle svg { width: 4px; height: 4px; stroke-width: 2; }
.sb-item:hover .sb-pin-toggle { opacity: 0.6; }
.sb-root .sb-pin-toggle.is-on,
.sb-root .sb-pin-toggle.pinned { opacity: 1; color: var(--accent, var(--brand)); }
.sb-root .sb-pin-toggle:hover { opacity: 1; color: var(--brand); }

/* P0-2 — Specific sidebar icons ×0.78 reduction (Channels + Multi-Touch) */
.sb-item[data-id="channels"] .sb-item-icon svg,
.sb-item[data-id="multi-touch"] .sb-item-icon svg {
  width: 14px;
  height: 14px;
}

/* P0-4 — Calendar dropdown styling (oklch border + hover + focus ring) */
/* Existing .date-input already handles cursor + click affordance via absolute
   overlay; refine focus + hover states + native indicator filter for dark UI. */
.tb-root .date-input {
  border-radius: 8px;
  transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
.tb-root .date-input:hover {
  background: color-mix(in oklch, var(--brand) 5%, var(--bg-1));
  border-color: var(--brand);
}
.tb-root .date-input:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--brand) 15%, transparent);
}
.tb-root .date-input-native::-webkit-calendar-picker-indicator {
  filter: invert(0.65);
  cursor: pointer;
}
/* Firefox / non-Webkit: keep native indicator visible (browser handles) */

/* P0-5 — Лампочки status pill (oklch tokens consistent з рестом hub) */
.lights-status,
.pg-lamps .lamp-status,
.pg-lamps .severity-pill {
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  font-family: 'Inter Tight', system-ui, sans-serif;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.lights-status[data-status="healthy"],
.pg-lamps .lamp-status[data-sev="green"],
.pg-lamps .severity-pill.sev-green {
  background: color-mix(in oklch, var(--good) 15%, transparent);
  color: var(--good);
}
.lights-status[data-status="watch"],
.pg-lamps .lamp-status[data-sev="yellow"],
.pg-lamps .severity-pill.sev-yellow {
  background: color-mix(in oklch, var(--warn) 15%, transparent);
  color: var(--warn);
}
.lights-status[data-status="critical"],
.pg-lamps .lamp-status[data-sev="red"],
.pg-lamps .severity-pill.sev-red {
  background: color-mix(in oklch, var(--bad) 15%, transparent);
  color: var(--bad);
}

/* P0-5 — Лампочки toolbar: reset button right-aligned via flex auto-margin.
   Apply-filter checkbox stays left, reset pushed to right. */
.pg-lamps .lamps-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}
.pg-lamps .lamps-controls [data-action="reset"] {
  margin-left: auto;
}

/* ════════════════════════════════════════════════════════════════════
   PATCH 13-FIX-2B — CRM Kanban hero/status strip + Ads tints + bonus
   Append-only · oklch only · namespaced .crm-* / .ads-* (existing) +
   .scorecard-compound[data-tint] additive.
   ════════════════════════════════════════════════════════════════════ */

/* CRM hero scoreboards (6 cards) */
.crm-hero-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}
@media (max-width: 1100px) { .crm-hero-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .crm-hero-row { grid-template-columns: repeat(2, 1fr); } }

.crm-hero-card {
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 12px 14px 10px;
  display: flex; flex-direction: column; gap: 4px;
  position: relative;
}
.crm-hero-card[data-active] {
  border-color: color-mix(in oklch, var(--brand) 50%, var(--line));
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--brand) 14%, transparent);
}
.crm-hero-card[data-tint="revenue"] {
  border-left: 3px solid color-mix(in oklch, var(--good) 60%, transparent);
  background: linear-gradient(135deg, color-mix(in oklch, var(--good) 6%, var(--bg-1)) 0%, var(--bg-1) 60%);
}
.crm-hero-card[data-tint="profit"] {
  border-left: 3px solid color-mix(in oklch, var(--brand) 60%, transparent);
  background: linear-gradient(135deg, color-mix(in oklch, var(--brand) 6%, var(--bg-1)) 0%, var(--bg-1) 60%);
}
.crm-hero-card[data-tint="orders"] {
  border-left: 3px solid color-mix(in oklch, var(--info) 50%, transparent);
}
.crm-hero-card[data-tint="margin"],
.crm-hero-card[data-tint="aov"] {
  border-left: 3px solid color-mix(in oklch, var(--ink-3) 60%, transparent);
}
.crm-hero-card[data-tint="roas-good"] { border-left: 3px solid color-mix(in oklch, var(--good) 60%, transparent); }
.crm-hero-card[data-tint="roas-warn"] { border-left: 3px solid color-mix(in oklch, var(--warn) 60%, transparent); }
.crm-hero-card[data-tint="roas-bad"]  { border-left: 3px solid color-mix(in oklch, var(--bad) 60%, transparent);  background: linear-gradient(135deg, color-mix(in oklch, var(--bad) 6%, var(--bg-1)) 0%, var(--bg-1) 60%); }

.crm-hero-lbl {
  font-size: 10.5px; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600;
}
.crm-hero-val {
  font-size: 22px; font-weight: 700; color: var(--ink-0);
  line-height: 1.1;
}
.crm-hero-foot { font-size: 10.5px; color: var(--ink-3); }

/* CRM status totals strip (8 cells) */
.crm-status-strip {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
  margin-bottom: 12px;
  font-size: 11px;
}
@media (max-width: 1400px) { .crm-status-strip { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 700px)  { .crm-status-strip { grid-template-columns: repeat(2, 1fr); } }

.crm-status-cell {
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 8px 10px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 8px;
  align-items: baseline;
}
.crm-status-cell.crm-tone-good { border-top: 2px solid var(--good); }
.crm-status-cell.crm-tone-info { border-top: 2px solid var(--info); }
.crm-status-cell.crm-tone-warn { border-top: 2px solid var(--warn); }
.crm-status-cell.crm-tone-bad  { border-top: 2px solid var(--bad);  }
.crm-status-icon { font-size: 14px; grid-row: span 2; }
.crm-status-name { font-weight: 700; font-size: 10.5px; color: var(--ink-0); letter-spacing: 0.04em; }
.crm-status-count { font-family: 'JetBrains Mono', monospace; font-weight: 600; color: var(--ink-1); font-size: 13px; grid-column: 2; }
.crm-status-amt   { grid-column: 2; font-size: 10.5px; color: var(--ink-3); font-family: 'JetBrains Mono', monospace; }

/* Manager chip cluster (P0-1.4 bonus) */
.crm-mgr-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.crm-mgr-chip {
  appearance: none;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  color: var(--ink-2);
  font: inherit; font-size: 11.5px; font-weight: 500;
  padding: 4px 10px; border-radius: 999px;
  cursor: pointer;
}
.crm-mgr-chip:hover  { border-color: var(--info); color: var(--ink-0); }
.crm-mgr-chip.is-active {
  background: color-mix(in oklch, var(--info) 22%, var(--bg-2));
  border-color: var(--info); color: var(--info);
}

/* Bulk-select strip (P0-1.4 bonus) */
.crm-bulk-strip {
  display: flex; align-items: center; gap: 10px;
  background: color-mix(in oklch, var(--brand) 8%, var(--bg-2));
  border: 1px solid color-mix(in oklch, var(--brand) 28%, var(--line));
  border-radius: 8px;
  padding: 8px 12px;
  margin-top: 8px;
  font-size: 12px; color: var(--ink-0); font-weight: 600;
}
.crm-bulk-strip[hidden] { display: none; }

/* Card wrapper + bulk checkbox + progress */
.crm-card-wrap { position: relative; width: 100%; }
.crm-card-wrap.is-bulk-sel .crm-card { box-shadow: inset 0 0 0 2px color-mix(in oklch, var(--brand) 60%, transparent); }
.crm-card-bulk {
  position: absolute; top: 6px; right: 6px;
  z-index: 2;
  width: 16px; height: 16px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.crm-card-bulk input[type="checkbox"] {
  margin: 0; cursor: pointer;
  accent-color: var(--brand);
}
.crm-card-progress {
  margin-top: 4px; height: 3px; border-radius: 2px;
  background: var(--bg-3); overflow: hidden;
}
.crm-card-progress-fill {
  height: 100%; background: var(--info);
  transition: width 200ms ease;
}
.crm-card-stale-warn .crm-card-progress-fill { background: var(--warn); }
.crm-card-stale-bad  .crm-card-progress-fill { background: var(--bad); }

/* Site multi-select sizing */
.crm-flt select[multiple] {
  min-width: 160px;
  padding: 4px 6px;
  height: auto;
}

/* ── Ads scoreboard tints (Patch 13-FIX-2B P0-3) ──────────────── */
/* Existing .ads-sc cards get tint via data-tint attribute. */
.ads-sc[data-tint="spend"] {
  background: linear-gradient(135deg, color-mix(in oklch, var(--bad) 8%, var(--bg-1)) 0%, var(--bg-1) 60%);
  border-left: 3px solid color-mix(in oklch, var(--bad) 60%, transparent);
}
.ads-sc[data-tint="revenue"] {
  background: linear-gradient(135deg, color-mix(in oklch, var(--good) 8%, var(--bg-1)) 0%, var(--bg-1) 60%);
  border-left: 3px solid color-mix(in oklch, var(--good) 60%, transparent);
}
.ads-sc[data-tint="profit"] {
  background: linear-gradient(135deg, color-mix(in oklch, var(--good) 12%, var(--bg-1)) 0%, var(--bg-1) 60%);
  border-left: 3px solid color-mix(in oklch, var(--good) 80%, transparent);
}
.ads-sc[data-tint="roas-good"] {
  background: linear-gradient(135deg, color-mix(in oklch, var(--good) 6%, var(--bg-1)) 0%, var(--bg-1) 60%);
  border-left: 3px solid color-mix(in oklch, var(--good) 60%, transparent);
}
.ads-sc[data-tint="roas-warn"] {
  background: linear-gradient(135deg, color-mix(in oklch, var(--warn) 6%, var(--bg-1)) 0%, var(--bg-1) 60%);
  border-left: 3px solid color-mix(in oklch, var(--warn) 60%, transparent);
}
.ads-sc[data-tint="roas-bad"] {
  background: linear-gradient(135deg, color-mix(in oklch, var(--bad) 6%, var(--bg-1)) 0%, var(--bg-1) 60%);
  border-left: 3px solid color-mix(in oklch, var(--bad) 60%, transparent);
}
.ads-sc[data-tint="info"] {
  border-left: 3px solid color-mix(in oklch, var(--info) 50%, transparent);
}

/* Ads anomaly callout banner (P0-5 bonus) */
.ads-anomaly-banner {
  display: flex; align-items: flex-start; gap: 10px;
  background: color-mix(in oklch, var(--warn) 10%, var(--bg-1));
  border: 1px solid color-mix(in oklch, var(--warn) 35%, var(--line));
  border-left: 3px solid var(--warn);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 10px;
  font-size: 12.5px; color: var(--ink-0);
}
.ads-anomaly-banner.is-bad {
  background: color-mix(in oklch, var(--bad) 10%, var(--bg-1));
  border-color: color-mix(in oklch, var(--bad) 35%, var(--line));
  border-left-color: var(--bad);
}
.ads-anomaly-banner-ic { font-size: 16px; line-height: 1; }
.ads-anomaly-banner-body { flex: 1; }
.ads-anomaly-banner-title { font-weight: 700; margin-bottom: 2px; }
.ads-anomaly-banner-sub   { color: var(--ink-2); font-size: 11.5px; }

/* ════════════════════════════════════════════════════════════════════
   PATCH 13-FIX-3A — F01-F12 sweep (oklch only)
   ════════════════════════════════════════════════════════════════════ */

/* F09 — Pin star → circle 10×10 */
.sb-root .sb-pin-toggle {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid var(--ink-3);
  cursor: pointer;
  opacity: 0.5;
  padding: 0;
  display: inline-block;
}
.sb-root .sb-pin-toggle svg { display: none; }
.sb-root .sb-pin-toggle:hover { opacity: 1; border-color: var(--brand); }
.sb-item:hover .sb-pin-toggle { opacity: 0.7; }
.sb-root .sb-pin-toggle.is-on,
.sb-root .sb-pin-toggle.pinned {
  background: var(--accent, var(--brand));
  border-color: var(--accent, var(--brand));
  opacity: 1;
}

/* Patch 13-REV-SIZE-FIX-2 — previous edit targeted .scorecard-compound[data-primary="revenue"]
   but Overview hero renders Revenue as <div class="kpi featured" data-primary="revenue">
   (not .scorecard-compound). The actual fix lives at lines 8710-8732 (.kpi[data-primary="revenue"]).
   Keeping these .scorecard-compound green-overrides as defensive — apply if Overview migrates
   до .scorecard-compound у future patches; harmless on current render. */
.scorecard-compound[data-primary="revenue"] .primary-value,
.scorecard-compound[data-primary="revenue"] .metric-row.total .metric-value {
  color: var(--good);
}
.scorecard-compound[data-primary="revenue"].featured,
.scorecard-compound[data-primary="revenue"] {
  border-color: color-mix(in oklch, var(--good) 35%, var(--line));
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--good) 14%, transparent),
              0 0 24px color-mix(in oklch, var(--good) 18%, transparent);
}
.scorecard-compound[data-primary="revenue"]:hover {
  border-color: color-mix(in oklch, var(--good) 55%, var(--line));
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--good) 22%, transparent),
              0 0 32px color-mix(in oklch, var(--good) 26%, transparent);
}

/* F12 — gradient fill consistency */
.bar-cell, .gradient-cell {
  overflow: hidden;
  position: relative;
}
.bar-cell {
  background: linear-gradient(90deg,
    color-mix(in oklch, var(--good) 25%, transparent) 0%,
    color-mix(in oklch, var(--good) 25%, transparent) calc(var(--pct, 0) * 1%),
    transparent calc(var(--pct, 0) * 1%));
}

/* F08 — Hide / show sidebar */
.sb-hide {
  position: absolute;
  bottom: 12px; right: 12px;
  width: 24px; height: 24px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  color: var(--ink-2);
  font-size: 14px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color 120ms ease, color 120ms ease;
  z-index: 5;
}
.sb-hide:hover { border-color: var(--brand); color: var(--brand); }
.sb-show {
  display: none;
  position: fixed;
  top: 12px; left: 12px;
  width: 28px; height: 28px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  color: var(--ink-2);
  font-size: 16px; line-height: 1;
  align-items: center; justify-content: center;
  z-index: 250;
  transition: border-color 120ms ease, color 120ms ease;
}
.sb-show:hover { border-color: var(--brand); color: var(--brand); }
/* Patch 13-SIDEBAR-RAIL — when "hide sidebar" pressed, sidebar collapses до
   thin 56px rail з лише іконками categories/items замість full hide. Floating
   .sb-show button toggles rail ↔ full. Tooltips (title attr) показуть label
   на hover у rail mode. */
body.sidebar-hidden .app { grid-template-columns: 56px 1fr; }
body.sidebar-hidden .sb-root {
  width: 56px; min-width: 56px; max-width: 56px;
  overflow: visible;
  padding: 8px 0;
}
body.sidebar-hidden .sb-show { display: none; }

/* Header: hide brand/version, keep brand-mark visible centered */
body.sidebar-hidden .sb-brand { padding: 6px 0; flex-direction: column; gap: 4px; align-items: center; justify-content: center; }
body.sidebar-hidden .sb-logo,
body.sidebar-hidden .sb-version { display: none; }
body.sidebar-hidden .sb-brand .brand-mark { margin: 0; }

/* Hide section text labels — keep section icons + counts visible at top */
body.sidebar-hidden .sb-pinned-label,
body.sidebar-hidden .sb-ultra-label,
body.sidebar-hidden .sb-custom-label {
  padding: 6px 0;
  justify-content: center;
}
body.sidebar-hidden .sb-pinned-label > *:not(.sb-ic),
body.sidebar-hidden .sb-ultra-label > *:not(.sb-ic),
body.sidebar-hidden .sb-custom-label > *:not(.sb-ic) { display: none; }

/* Group: collapse summary до single icon (hide label/count/marker) */
body.sidebar-hidden details.sb-group { padding: 4px 0; }
body.sidebar-hidden details.sb-group > summary {
  justify-content: center;
  padding: 6px 0;
  gap: 0;
}
body.sidebar-hidden .sb-group-label,
body.sidebar-hidden .sb-group-count { display: none; }
body.sidebar-hidden .sb-group-icon { font-size: 16px; }

/* Items: only icon, centered. Hide label / tags / star. */
body.sidebar-hidden .sb-item {
  justify-content: center;
  padding: 8px 0;
  gap: 0;
}
body.sidebar-hidden .sb-item-label,
body.sidebar-hidden .sb-item-badge,
body.sidebar-hidden .sb-item-tag,
body.sidebar-hidden .sb-pin-toggle,
body.sidebar-hidden .sb-star,
body.sidebar-hidden .sb-custom-del { display: none; }
body.sidebar-hidden .sb-item-icon { margin: 0; }

/* Settings + footer + create-custom — hide labels/text у rail mode */
body.sidebar-hidden .sb-settings { justify-content: center; padding: 8px 0; }
body.sidebar-hidden .sb-settings .sb-item-label { display: none; }
body.sidebar-hidden .sb-foot,
body.sidebar-hidden .sb-create-custom span { display: none; }
body.sidebar-hidden .sb-create-custom {
  justify-content: center; padding: 8px 0;
  width: 100%;
}

/* Hide button: flip glyph to › (expand) у rail mode */
body.sidebar-hidden .sb-hide { transform: rotate(180deg); }

/* F01 — Page help banner */
.page-help-banner {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 14px;
  margin: 12px 0;
  border-radius: 8px;
  background: color-mix(in oklch, var(--info, var(--brand)) 8%, var(--bg-2));
  border-left: 3px solid var(--info, var(--brand));
  font-size: 12.5px;
  color: var(--ink-1);
  line-height: 1.45;
  transition: opacity 200ms ease, transform 200ms ease;
}
.page-help-banner[data-fading="1"] { opacity: 0; transform: translateY(-4px); }
.page-help-banner .help-icon { font-size: 18px; flex: none; }
.page-help-banner .help-content { flex: 1; }
.page-help-banner .help-content h4 {
  margin: 0 0 2px 0;
  font-size: 12px; font-weight: 700; letter-spacing: 0.02em;
}
.page-help-banner .help-content p { margin: 0; }
.page-help-banner .help-close {
  flex: none;
  background: transparent;
  border: 0; cursor: pointer;
  color: var(--ink-3);
  font-size: 20px; line-height: 1;
  padding: 2px 6px; border-radius: 4px;
}
.page-help-banner .help-close:hover { color: var(--bad); background: var(--bg-elev); }

/* F02 — Topbar 💡 help toggle (3-state) */
.tb-help-toggle {
  background: transparent;
  border: 1px solid var(--line-soft);
  color: var(--ink-2);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
}
.tb-help-toggle:hover { border-color: var(--brand); color: var(--brand); }
.tb-help-toggle[data-help-state="always-on"] {
  background: color-mix(in oklch, var(--good) 14%, transparent);
  border-color: var(--good);
  color: var(--good);
}
.tb-help-toggle[data-help-state="always-off"] {
  opacity: 0.4;
  border-style: dashed;
}

/* F07 — Mini sticky nav */
.page-mini-nav {
  position: sticky;
  top: 56px;
  z-index: 40;
  display: none;
  align-items: center;
  gap: 14px;
  padding: 8px 16px;
  background: color-mix(in oklch, var(--bg-0) 92%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  font-size: 11.5px;
  overflow-x: auto;
}
.page-mini-nav[data-visible="true"] { display: flex; }
.page-mini-nav a {
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
  padding: 4px 8px;
  border-radius: 5px;
  transition: color 120ms ease, background 120ms ease;
}
.page-mini-nav a:hover { color: var(--brand); background: var(--bg-elev); }

/* F11 — Compact Top blocks */
.pg-demo .top3-row,
.pg-overview .top3-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (max-width: 900px) {
  .pg-demo .top3-row,
  .pg-overview .top3-row { grid-template-columns: 1fr; }
}
.top3-card.is-compact {
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 10px 12px;
}
.top3-card.is-compact .card-h {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 6px;
}
.top3-card.is-compact .card-h h3 {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.02em;
  font-weight: 600;
}
.top3-card.is-compact .seg-mini {
  margin-left: auto;
  display: inline-flex;
  gap: 2px;
}
.top3-card.is-compact .seg-mini button {
  font-size: 10px;
  padding: 3px 6px;
  border-radius: 4px;
  background: transparent;
  border: 1px solid var(--line-soft);
  color: var(--ink-2);
  cursor: pointer;
}
.top3-card.is-compact .seg-mini button.on {
  background: var(--brand);
  color: var(--bg-0);
  border-color: var(--brand);
}
.top3-card.is-compact table {
  width: 100%;
  font-size: 11.5px;
  border-collapse: collapse;
}
.top3-card.is-compact td {
  padding: 4px 6px;
  border-bottom: 1px solid color-mix(in oklch, var(--line) 50%, transparent);
}
.top3-card.is-compact td.r { text-align: right; font-family: 'JetBrains Mono', monospace; }
.top3-card.is-compact td.muted { color: var(--ink-3); width: 22px; }

/* F03 — Scoreboard style unify bridge: map non-canonical hero cards до canonical
   look. Reports / Multi-Touch / Channels / Leaks already use .scorecard-compound.
   CRM uses .crm-hero-card — bridge to match canonical surface (border / radius /
   padding / typography) without touching markup. */
.crm-hero-card {
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 14px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 160ms ease;
}
.crm-hero-card:hover { border-color: color-mix(in oklch, var(--brand) 28%, var(--line)); }
.crm-hero-card[data-active="true"] { border-color: color-mix(in oklch, var(--brand) 38%, var(--line)); }
.crm-hero-card .crm-hero-label,
.crm-hero-card .crm-hero-head {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  font-weight: 600;
}
.crm-hero-card .crm-hero-value,
.crm-hero-card .crm-hero-big {
  font-family: 'JetBrains Mono', monospace;
  font-size: 24px;
  font-weight: 700;
  color: var(--ink-0);
  line-height: 1.05;
}
.crm-hero-card .crm-hero-foot,
.crm-hero-card .crm-hero-sub {
  font-size: 11.5px;
  color: var(--ink-3);
}

/* ════════════════════════════════════════════════════════════════════
   PATCH 13-FIX-3B — Sales overhaul + P&L improvements (F13-F23)
   Append-only · oklch only · namespaced .sales-* / .pnl-*.
   ════════════════════════════════════════════════════════════════════ */

/* F14 — "Сума втрачено" block */
.sales-loss-block { gap: 12px; }
.sales-loss-total {
  font-family: 'JetBrains Mono', monospace;
  font-feature-settings: "tnum";
  color: var(--bad); font-weight: 700;
}
.sales-loss-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}
.sales-loss-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 14px;
  align-items: center;
  background: var(--bg-2);
  border-radius: 8px;
  padding: 10px 14px;
  border-left: 3px solid var(--bad);
}
.sales-loss-row[data-loss-row="duplicates"] { border-left-color: var(--warn); }
.sales-loss-row[data-loss-row="garbage"]    { border-left-color: var(--ink-3); }
.sales-loss-row-h {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--ink-0); font-weight: 600;
}
.sales-loss-row-ic { font-size: 18px; }
.sales-loss-row-amt {
  font-size: 15px; font-weight: 700; color: var(--ink-0);
  font-family: 'JetBrains Mono', monospace;
}
.sales-loss-row-cnt { font-size: 11px; color: var(--ink-3); }
.sales-loss-total-row {
  display: flex; justify-content: space-between;
  padding: 10px 14px;
  background: color-mix(in oklch, var(--bad) 10%, var(--bg-2));
  border: 1px solid color-mix(in oklch, var(--bad) 32%, var(--line));
  border-radius: 8px;
  font-weight: 700; color: var(--ink-0);
  margin-top: 4px;
}

/* F17 — REAL primary + caveat + status fallback secondary */
.sales-cancel-card { gap: 14px; }
.sales-cancel-real {
  background: linear-gradient(135deg, color-mix(in oklch, var(--brand) 6%, var(--bg-1)) 0%, var(--bg-1) 60%);
  border: 1px solid color-mix(in oklch, var(--brand) 30%, var(--line));
  border-radius: 10px;
  padding: 14px 16px;
}
.sales-cancel-real .sales-cancel-h {
  font-size: 15px; font-weight: 700; color: var(--ink-0);
  margin-bottom: 10px;
}
.sales-cancel-real .sales-cancel-h-pct {
  background: color-mix(in oklch, var(--brand) 22%, var(--bg-2));
  color: var(--brand);
  padding: 2px 10px; border-radius: 999px;
  font-size: 12px; font-family: 'JetBrains Mono', monospace;
  margin-left: 8px;
}
.sales-cancel-real-donut { gap: 16px; align-items: center; }

.sales-cancel-caveat-banner {
  background: color-mix(in oklch, var(--warn) 10%, var(--bg-1));
  border: 1px solid color-mix(in oklch, var(--warn) 38%, var(--line));
  border-left: 3px solid var(--warn);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 13px; line-height: 1.55; color: var(--ink-0);
}
.sales-cancel-caveat-h { margin-bottom: 8px; }
.sales-cancel-caveat-fix ol {
  margin: 6px 0 0 18px;
  padding: 0;
  font-size: 12.5px; color: var(--ink-1);
}
.sales-cancel-caveat-fix li { margin: 2px 0; }

.sales-cancel-fallback {
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 14px 16px;
  opacity: 0.75;       /* dim — secondary visual hierarchy per F17 spec */
  filter: saturate(0.8);
}
.sales-cancel-fallback .sales-cancel-h-dim {
  font-size: 13px; font-weight: 600; color: var(--ink-2);
  margin-bottom: 8px;
}
.sales-cancel-fallback .sales-cancel-h-pct {
  background: var(--bg-3); color: var(--ink-3);
  padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-family: 'JetBrains Mono', monospace;
  margin-left: 6px;
}
.sales-cancel-fallback .sales-cancel-h-note {
  display: block; font-size: 11px; color: var(--ink-3); font-weight: 400;
  margin-top: 4px;
}
.sales-cancel-fallback-tbl { font-size: 11.5px; }
.sales-cancel-fallback-donut { opacity: 0.85; }

/* F18-F19 — traffic-sources donut larger.
   Patch 13-SALES-FIX-1 — sales-donut-row grid auto/1fr.
   Patch 13-SALES-FIX-2 (Йолт ask) — donut 2× bigger (88→176px). Multi-touch
   протect-ed via .mt-sources override (line 7349 = 132px). */
.sales-donut-row { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; }
.traffic-sources .donut-block .donut-wrap-sales { display: flex; justify-content: center; padding: 4px 0 8px; }
@media (max-width: 700px) { .sales-donut-row { grid-template-columns: 1fr; } }
.donut-wrap-sales svg { width: 176px; height: 176px; }
.sales-donut-row .legend-list { width: 100%; }
.traffic-sources .legend-list { font-size: 10.5px; }
.traffic-sources .legend-name { color: var(--ink-2); }
.traffic-sources .legend-row { padding: 2px 0; }
.traffic-sources h4 { font-size: 12px; font-weight: 600; color: var(--ink-1); margin: 0 0 8px; }

/* F23 — P&L gradient cells (revenue green / margin amber / spend red / profit signed) */
.pnl-net td.gradient-revenue {
  background: linear-gradient(90deg,
    color-mix(in oklch, var(--good) 22%, transparent) 0%,
    color-mix(in oklch, var(--good) 22%, transparent) calc(var(--pct, 0) * 1%),
    transparent calc(var(--pct, 0) * 1%)
  );
}
.pnl-net td.gradient-margin {
  background: linear-gradient(90deg,
    color-mix(in oklch, var(--warn) 22%, transparent) 0%,
    color-mix(in oklch, var(--warn) 22%, transparent) calc(var(--pct, 0) * 1%),
    transparent calc(var(--pct, 0) * 1%)
  );
}
.pnl-net td.gradient-spend {
  background: linear-gradient(90deg,
    color-mix(in oklch, var(--bad) 22%, transparent) 0%,
    color-mix(in oklch, var(--bad) 22%, transparent) calc(var(--pct, 0) * 1%),
    transparent calc(var(--pct, 0) * 1%)
  );
}
.pnl-net td.gradient-profit-pos {
  background: linear-gradient(90deg,
    color-mix(in oklch, var(--good) 22%, transparent) 0%,
    color-mix(in oklch, var(--good) 22%, transparent) calc(var(--pct, 0) * 1%),
    transparent calc(var(--pct, 0) * 1%)
  );
  color: var(--good);
}
.pnl-net td.gradient-profit-neg {
  background: linear-gradient(90deg,
    color-mix(in oklch, var(--bad) 22%, transparent) 0%,
    color-mix(in oklch, var(--bad) 22%, transparent) calc(var(--pct, 0) * 1%),
    transparent calc(var(--pct, 0) * 1%)
  );
  color: var(--bad);
}

/* F23 — auto-applied gradient tints via existing renderer classes (no JS change). */
.pnl-net tr.pnl-row-income td.num {
  background: linear-gradient(90deg,
    color-mix(in oklch, var(--good) 14%, transparent) 0%,
    color-mix(in oklch, var(--good) 14%, transparent) 100%);
}
.pnl-net tr.pnl-row-cost td.num {
  background: linear-gradient(90deg,
    color-mix(in oklch, var(--bad) 12%, transparent) 0%,
    color-mix(in oklch, var(--bad) 12%, transparent) 100%);
}
.pnl-net tr.pnl-row-profit td.num.pnl-pos {
  background: color-mix(in oklch, var(--good) 18%, transparent);
}
.pnl-net tr.pnl-row-profit td.num.pnl-neg {
  background: color-mix(in oklch, var(--bad) 18%, transparent);
}
.pnl-net tr.pnl-row-profit td.num.bold {
  background: color-mix(in oklch, var(--good) 22%, transparent);
}
/* Margin % rows already get pnl-good/warn/bad text class — give them subtle bg. */
.pnl-net td.num.pnl-good { background: color-mix(in oklch, var(--good) 10%, transparent); }
.pnl-net td.num.pnl-warn { background: color-mix(in oklch, var(--warn) 10%, transparent); }
.pnl-net td.num.pnl-bad  { background: color-mix(in oklch, var(--bad) 10%, transparent); }

/* Patch 13-RBAC-ANTILEAK Item C — sticky client-mode banner.
   Patch 13-RBAC-FIX-1 — close button (per-session dismiss). */
.rbac-client-banner {
  position: sticky;
  top: 0;
  z-index: 9999;
  background: var(--bg-2);
  border-bottom: 1px solid var(--accent, var(--brand));
  color: var(--ink-1);
  font-size: 12.5px;
  font-weight: 500;
  padding: 8px 44px;
  text-align: center;
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.rbac-client-banner a {
  color: var(--accent, var(--brand));
  text-decoration: underline;
  text-underline-offset: 2px;
}
.rbac-client-banner a:hover { filter: brightness(1.15); }
.rbac-client-banner-close {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 1px solid var(--line-soft);
  color: var(--ink-3);
  width: 22px;
  height: 22px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: border-color 120ms, color 120ms;
}
.rbac-client-banner-close:hover {
  border-color: var(--accent, var(--brand));
  color: var(--ink-0);
}