/* =========================================================================
   OKK-Eduson — senior design layer (iteration 1).
   Sits on top of static/style.css and refines typography, color,
   spacing, shadows, and adds chart-container primitives.
   ========================================================================= */

:root {
  /* Overridden palette — more sophisticated neutrals + modern indigo accent. */
  --accent: #4f46e5;                 /* indigo-600 */
  --accent-600: #4338ca;             /* indigo-700 */
  --accent-50: #eef2ff;
  --accent-tint: #eef2ff;

  --critical: #dc2626;               /* red-600 */
  --critical-bg: #fee2e2;            /* red-100 */
  --warning: #d97706;                /* amber-600 */
  --warning-bg: #fef3c7;             /* amber-100 */
  --success: #15803d;                /* green-700 */
  --success-bg: #dcfce7;             /* green-100 */
  --info: #0369a1;                   /* sky-700 */
  --info-bg: #e0f2fe;                /* sky-100 */

  --bg-dark: #0f172a;                /* slate-900 */
  --bg-darker: #020617;              /* slate-950 */
  --bg: #f8fafc;                     /* slate-50 */
  --bg-subtle: #f1f5f9;              /* slate-100 */
  --surface: #ffffff;
  --surface-2: #fbfcfe;

  --ink: #0f172a;                    /* slate-900 */
  --ink-2: #1e293b;                  /* slate-800 */
  --muted: #64748b;                  /* slate-500 */
  --muted-2: #94a3b8;                /* slate-400 */

  --border: #e2e8f0;                 /* slate-200 */
  --border-strong: #cbd5e1;          /* slate-300 */

  --shadow-xs: 0 1px 2px rgba(15,23,42,0.04);
  --shadow-sm: 0 1px 3px rgba(15,23,42,0.05), 0 1px 2px rgba(15,23,42,0.03);
  --shadow-md: 0 4px 6px -1px rgba(15,23,42,0.06), 0 2px 4px -2px rgba(15,23,42,0.04);
  --shadow-lg: 0 10px 15px -3px rgba(15,23,42,0.07), 0 4px 6px -4px rgba(15,23,42,0.04);

  --radius: 12px;
  --radius-sm: 8px;
  --radius-xs: 4px;
  --radius-lg: 16px;

  /* KD palette — matches Oneboost legends: agreed/callback/info/none. */
  --kd-agreed:    #10b981;           /* emerald-500 */
  --kd-callback:  #f59e0b;           /* amber-500 */
  --kd-info:      #38bdf8;           /* sky-400 */
  --kd-none:      #f43f5e;           /* rose-500 */

  /* Lead-category palette (AAA/BBB/CCC/doubts). */
  --lc-aaa: #059669;
  --lc-bbb: #0ea5e9;
  --lc-ccc: #f59e0b;
  --lc-doubts: #6366f1;

  --chart-grid: #e2e8f0;
  --chart-axis: #94a3b8;
}

/* ---------- typography ---------- */

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  color: var(--ink);
  background: var(--bg);
  letter-spacing: -0.005em;
}

.mono, pre, code {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
               "Liberation Mono", monospace;
  font-feature-settings: "zero", "ss01";
}

h1 { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink-2); }
h3 { font-size: 13px; font-weight: 600; letter-spacing: -0.005em; color: var(--ink-2);
     text-transform: uppercase; }

.small { font-size: 11.5px; }

/* ---------- layout tweaks ---------- */

.main { max-width: 1720px; padding: 28px 36px 80px; }

.sidebar {
  width: 236px;
  background: linear-gradient(180deg, var(--bg-dark) 0%, var(--bg-darker) 100%);
  padding: 22px 14px 18px;
  box-shadow: 1px 0 0 rgba(255,255,255,0.04), 4px 0 20px rgba(0,0,0,0.08);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.2) transparent;
}
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.14);
  border-radius: 999px;
}
.sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.28); }
.sidebar .brand { padding: 2px 10px 20px; }
.sidebar .logo {
  font-size: 22px; font-weight: 700; letter-spacing: -0.02em;
  background: linear-gradient(135deg, #e2e8f0 0%, #94a3b8 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.sidebar .brand-sub { color: #94a3b8; font-size: 10.5px; letter-spacing: 0.02em; }
.sidebar nav a {
  color: #cbd5e1; padding: 9px 12px; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 500; letter-spacing: -0.005em;
}
.sidebar nav a:hover {
  background: rgba(255,255,255,0.06);
  color: #fff;
}
.sidebar nav a.active {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-600) 100%);
  color: #fff;
  box-shadow: 0 1px 8px rgba(79, 70, 229, 0.4);
}
.sidebar nav a.nav-cta {
  margin-top: 14px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.03);
  font-weight: 600;
  color: #e2e8f0;
}
.sidebar nav a.nav-cta:hover {
  background: rgba(79, 70, 229, 0.15);
  border-color: var(--accent);
  color: #fff;
}

/* Upload / test CTAs — solid gradient blocks that stand out in the sidebar. */
.sidebar nav a.nav-upload {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.35) 0%, rgba(129, 140, 248, 0.25) 100%);
  border: 1px solid rgba(129, 140, 248, 0.35);
  color: #e0e7ff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  transition: all 0.12s ease;
}
.sidebar nav a.nav-upload:hover {
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.55) 0%, rgba(129, 140, 248, 0.4) 100%);
  border-color: rgba(167, 139, 250, 0.6);
  color: #fff;
  transform: translateX(1px);
}
.sidebar nav a.nav-upload.active {
  background: linear-gradient(135deg, #4f46e5 0%, #a78bfa 100%);
  border-color: #c7d2fe;
  color: #fff;
  box-shadow: 0 2px 10px rgba(79, 70, 229, 0.45);
}
.sidebar nav a.nav-upload-test {
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.25) 0%, rgba(167, 139, 250, 0.18) 100%);
  border-color: rgba(236, 72, 153, 0.3);
}
.sidebar nav a.nav-upload-test:hover {
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.4) 0%, rgba(167, 139, 250, 0.3) 100%);
  border-color: rgba(244, 114, 182, 0.5);
}
.sidebar nav a.nav-upload-test.active {
  background: linear-gradient(135deg, #ec4899 0%, #a78bfa 100%);
  border-color: #fbcfe8;
  color: #fff;
  box-shadow: 0 2px 10px rgba(236, 72, 153, 0.45);
}

/* Nav section divider & group headers. */
.sidebar nav .nav-group {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: #64748b; padding: 14px 12px 6px; pointer-events: none;
}
.sidebar nav .nav-group:first-child { padding-top: 4px; }

/* ---------- topbar ---------- */

.topbar { margin-bottom: 22px; }
.topbar h1 { margin-bottom: 4px; }
.topbar-sub { font-size: 12.5px; color: var(--muted); }

.page-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 16px; margin-bottom: 22px; flex-wrap: wrap;
}
.page-head > :first-child { flex: 1; min-width: 280px; }
.page-head h1 { margin-bottom: 4px; }

/* ---------- cards ---------- */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 18px;
  transition: box-shadow 0.15s ease;
}
.card:hover { box-shadow: var(--shadow-md); }

.card h2 { margin-bottom: 14px; }
.card > .muted.small:first-of-type { margin-top: -10px; margin-bottom: 12px; }

.card-subtle {
  background: var(--surface-2);
  border-color: var(--border);
  box-shadow: none;
}

.card-compact { padding: 14px 16px; }

/* ---------- grids ---------- */

.grid-4 { display: grid; gap: 14px; grid-template-columns: repeat(4, 1fr); margin-bottom: 16px; }
.grid-3 { gap: 14px; }
.grid-2 { gap: 16px; }

@media (max-width: 1300px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px)  { .grid-4 { grid-template-columns: 1fr; } }

/* ---------- KPI tiles (senior version) ---------- */

.kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
  gap: 6px;
  position: relative;
  overflow: hidden;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.kpi:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }

.kpi-label {
  font-size: 11px; font-weight: 600;
  color: var(--muted); text-transform: uppercase;
  letter-spacing: 0.06em;
}
.kpi-val {
  font-size: 32px; font-weight: 700;
  letter-spacing: -0.025em; color: var(--ink);
  line-height: 1.05;
  font-feature-settings: "tnum";
}
.kpi-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.kpi-delta {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 600;
  padding: 2px 8px; border-radius: 999px;
  margin-top: 4px;
}
.kpi-delta.up   { background: var(--success-bg); color: var(--success); }
.kpi-delta.down { background: var(--critical-bg); color: var(--critical); }
.kpi-delta.flat { background: var(--bg-subtle); color: var(--muted); }

.kpi-hero {
  border-left: none;
  background: linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%);
  padding: 22px 24px;
}
.kpi-hero::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 4px;
  background: var(--muted);
}
.kpi-hero.zone-success::before  { background: linear-gradient(180deg, var(--success) 0%, #22c55e 100%); }
.kpi-hero.zone-warning::before  { background: linear-gradient(180deg, var(--warning) 0%, #f59e0b 100%); }
.kpi-hero.zone-critical::before { background: linear-gradient(180deg, var(--critical) 0%, #ef4444 100%); }
.kpi-hero.zone-muted::before    { background: var(--border-strong); }
.kpi-hero .kpi-val { font-size: 44px; }

/* KD-accent KPIs (used on the Oneboost-style overview row). */
.kpi-accent-agreed   { background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%); border-color: #bbf7d0; }
.kpi-accent-agreed   .kpi-val { color: #047857; }
.kpi-accent-agreed   .kpi-label { color: #059669; }
.kpi-accent-none     { background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%); border-color: #fecaca; }
.kpi-accent-none     .kpi-val { color: #b91c1c; }
.kpi-accent-none     .kpi-label { color: #dc2626; }
.kpi-accent-callback { background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%); border-color: #fde68a; }
.kpi-accent-callback .kpi-val { color: #b45309; }

/* ---------- chart containers ---------- */

.chart-wrap {
  margin: 6px -6px 2px;
  padding: 8px 6px 4px;
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.chart-wrap.chart-bordered {
  border: 1px solid var(--border);
  padding: 14px;
}
.chart-title {
  font-size: 13px; font-weight: 600; color: var(--ink-2);
  margin-bottom: 4px; letter-spacing: -0.005em;
}
.chart-sub { font-size: 11.5px; color: var(--muted); margin-bottom: 8px; }

.vega-chart {
  min-height: 180px;
  width: 100%;
}
.vega-chart > .vega-embed { width: 100%; }
.vega-chart canvas, .vega-chart svg { max-width: 100% !important; height: auto !important; }

/* Dashboard row of small charts. */
.chart-row { display: grid; gap: 16px; margin-bottom: 18px; }
.chart-row.cols-2 { grid-template-columns: repeat(2, 1fr); }
.chart-row.cols-3 { grid-template-columns: repeat(3, 1fr); }
.chart-row.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1200px) { .chart-row.cols-3, .chart-row.cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px)  { .chart-row.cols-2, .chart-row.cols-3, .chart-row.cols-4 { grid-template-columns: 1fr; } }

/* ---------- tables (refinement) ---------- */

.tbl {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.tbl thead th {
  background: var(--bg-subtle);
  color: var(--muted);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  font-weight: 700;
  border-bottom: 1px solid var(--border-strong);
  padding: 10px 12px;
}
.tbl tbody td { padding: 10px 12px; font-size: 13px; border-bottom: 1px solid var(--border); }
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl tbody tr:nth-child(even) { background: var(--surface-2); }
.tbl tbody tr:hover { background: var(--accent-50); }

/* ---------- badges (refinement) ---------- */

.badge {
  font-size: 10.5px;
  padding: 3px 9px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: none;
  background: var(--bg-subtle);
  color: var(--ink-2);
}

.badge-success  { background: var(--success-bg); color: #166534; }
.badge-warning  { background: var(--warning-bg); color: #9a3412; }
.badge-critical { background: var(--critical-bg); color: #991b1b; }
.badge-info     { background: var(--info-bg);    color: #075985; }

/* ---------- buttons ---------- */

.btn {
  font-weight: 500; padding: 8px 14px; border-radius: var(--radius-sm);
  transition: all 0.12s ease;
}
.btn-primary {
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-600) 100%);
  color: #fff; border: none;
  box-shadow: 0 1px 2px rgba(79, 70, 229, 0.25);
}
.btn-primary:hover {
  box-shadow: 0 4px 8px rgba(79, 70, 229, 0.3);
  transform: translateY(-0.5px);
}

/* ---------- filter bar ---------- */

.filter-bar, .filters {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow-xs);
  margin-bottom: 18px;
}

/* ---------- checklist block visuals (compliance/overview) ---------- */

.cl-block {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 12px;
  background: var(--surface);
}
.cl-block-head { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.cl-block-letter {
  font-weight: 700; color: var(--accent);
  background: var(--accent-50); padding: 2px 8px;
  border-radius: var(--radius-xs); font-size: 12px; letter-spacing: -0.01em;
}
.cl-block-name { font-weight: 600; color: var(--ink-2); font-size: 14px; }
.cl-stack {
  display: inline-flex; height: 8px; width: 180px;
  border-radius: 999px; overflow: hidden; background: var(--bg-subtle);
  box-shadow: inset 0 0 0 1px var(--border);
}
.cl-stack .seg { display: block; height: 100%; }
.cl-stack .seg-pass { background: linear-gradient(180deg, #22c55e 0%, var(--success) 100%); }
.cl-stack .seg-fail { background: linear-gradient(180deg, #ef4444 0%, var(--critical) 100%); }
.cl-stack .seg-na   { background: var(--border-strong); }

/* ---------- progress rings (KPI with progress) ---------- */

.ring-kpi {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 14px; align-items: center;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

/* ---------- accordion (product page) ---------- */

details.accordion {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0;
  margin-bottom: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}
details.accordion > summary {
  cursor: pointer;
  padding: 16px 22px;
  list-style: none;
  display: flex; align-items: center; gap: 12px;
  background: var(--surface);
  transition: background 0.12s ease;
}
details.accordion > summary::-webkit-details-marker { display: none; }
details.accordion > summary::after {
  content: "▾";
  margin-left: auto;
  color: var(--muted);
  transition: transform 0.2s ease;
}
details.accordion[open] > summary::after { transform: rotate(180deg); }
details.accordion > summary:hover { background: var(--bg-subtle); }
details.accordion > summary h2 { margin: 0; font-size: 14px; }
details.accordion > *:not(summary) { padding: 0 22px 20px; }

/* ---------- stat pill ---------- */

.stat-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  background: var(--bg-subtle); font-size: 12px;
  color: var(--ink-2); font-weight: 500;
}

/* ---------- misc polish ---------- */

hr.sep { border: none; border-top: 1px solid var(--border); margin: 18px 0; }

.muted-subtle { color: var(--muted-2); }

.link {
  color: var(--accent); font-weight: 500;
  text-decoration-line: underline; text-decoration-color: transparent;
  text-underline-offset: 2px; transition: text-decoration-color 0.15s ease;
}
.link:hover { text-decoration-color: currentColor; }

/* ---------- Oneboost-style filter bar ---------- */

.ob-filters {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 14px; margin-bottom: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
}
.ob-filter-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 6px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  font-size: 12px; color: var(--ink-2);
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.1s ease;
}
.ob-filter-pill:hover { background: var(--surface); border-color: var(--border-strong); }
.ob-filter-pill b { font-weight: 600; color: var(--ink); }
.ob-filter-pill.ob-filter-active {
  background: #eff6ff; border-color: #3b82f6; color: #1d4ed8;
}
.ob-filter-pill.ob-filter-active b { color: #1d4ed8; }
.ob-filter-pill.ob-filter-open {
  background: var(--surface); border-color: var(--border-strong);
  box-shadow: 0 0 0 2px rgba(59,130,246,0.2);
}

/* ---------- Filter dropdown ---------- */
.ob-filter-dropdown {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.13), 0 2px 8px rgba(0,0,0,0.07);
  min-width: 210px;
  max-width: 340px;
  overflow: hidden;
}
.ob-filter-options {
  max-height: 260px;
  overflow-y: auto;
  padding: 6px 0;
}
.ob-filter-option {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 14px;
  font-size: 13px; color: var(--ink);
  cursor: pointer;
  user-select: none;
  transition: background 0.08s;
}
.ob-filter-option:hover { background: var(--bg-subtle); }
.ob-filter-option input { cursor: pointer; accent-color: #3b82f6; }
.ob-filter-dd-actions {
  display: flex; gap: 8px; align-items: center;
  padding: 8px 12px;
  border-top: 1px solid var(--border);
  background: var(--bg-subtle);
}
.ob-filter-apply {
  padding: 5px 14px; border-radius: 6px; font-size: 12px; font-weight: 600;
  background: #3b82f6; color: #fff; border: none; cursor: pointer;
  transition: background 0.12s;
}
.ob-filter-apply:hover { background: #2563eb; }
.ob-filter-reset {
  padding: 5px 10px; border-radius: 6px; font-size: 12px;
  background: none; color: var(--ink-2); border: 1px solid var(--border);
  cursor: pointer; transition: border-color 0.12s;
}
.ob-filter-reset:hover { border-color: var(--border-strong); color: var(--ink); }

/* ---------- Oneboost-style KPI row ---------- */

.ob-kpi-row {
  display: grid; gap: 14px; margin-bottom: 18px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.ob-kpi {
  padding: 22px 24px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  border: 1px solid transparent;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.ob-kpi:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.ob-kpi-label {
  font-size: 13.5px;
  color: var(--ink-2);
  font-weight: 500;
  margin-bottom: 6px;
}
.ob-kpi-val {
  font-size: 40px; font-weight: 700; letter-spacing: -0.025em;
  color: var(--ink); line-height: 1; font-feature-settings: "tnum";
}

.ob-kpi-neutral {
  background: var(--surface);
  border-color: var(--border);
}
.ob-kpi-agreed {
  background: #f0fdf4;                         /* green-50 */
  border-color: #bbf7d0;                       /* green-200 */
}
.ob-kpi-agreed .ob-kpi-val { color: #15803d; }
.ob-kpi-none {
  background: #fef2f2;                         /* red-50 */
  border-color: #fecaca;                       /* red-200 */
}
.ob-kpi-none .ob-kpi-val { color: #b91c1c; }
.ob-kpi-minutes {
  background: #fff7ed;                         /* orange-50 */
  border-color: #fed7aa;                       /* orange-200 */
}
.ob-kpi-minutes .ob-kpi-val { color: #c2410c; }

/* Statistics block — soft grey panel. */
.ob-stat-card {
  background: var(--bg-subtle);
  border: 1px solid var(--border);
}
.ob-stat-period {
  display: inline-block; padding: 6px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
}

/* ---------- 12-block KPI grid (Oneboost "Оценка чеклиста") ---------- */

.ob-block-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}
@media (max-width: 1200px) { .ob-block-kpis { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .ob-block-kpis { grid-template-columns: repeat(2, 1fr); } }

.ob-block-kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  box-shadow: var(--shadow-xs);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.ob-block-kpi:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.ob-block-kpi-label {
  font-size: 11.5px; color: var(--muted);
  font-weight: 500; margin-bottom: 6px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 28px;
}
.ob-block-kpi-val {
  font-size: 24px; font-weight: 700; letter-spacing: -0.02em;
  color: var(--ink); line-height: 1;
  margin-bottom: 8px;
}
.ob-block-kpi-bar {
  height: 4px; border-radius: 2px; background: var(--bg-subtle);
  overflow: hidden;
}
.ob-block-kpi-bar span { display: block; height: 100%; border-radius: 2px; background: var(--muted); }
.ob-block-kpi.zone-success .ob-block-kpi-val { color: var(--success); }
.ob-block-kpi.zone-success .ob-block-kpi-bar span { background: var(--success); }
.ob-block-kpi.zone-warning .ob-block-kpi-val { color: var(--warning); }
.ob-block-kpi.zone-warning .ob-block-kpi-bar span { background: var(--warning); }
.ob-block-kpi.zone-critical .ob-block-kpi-val { color: var(--critical); }
.ob-block-kpi.zone-critical .ob-block-kpi-bar span { background: var(--critical); }

/* ---------- Objection handling bars ---------- */

.ob-obj-bar {
  position: relative;
  height: 22px; width: 100%;
  background: var(--bg-subtle);
  border-radius: 4px; overflow: hidden;
}
.ob-obj-bar-fill { display: block; height: 100%; border-radius: 4px 0 0 4px; }
.ob-obj-bar-success  { background: linear-gradient(90deg, #22c55e 0%, #15803d 100%); }
.ob-obj-bar-warning  { background: linear-gradient(90deg, #f59e0b 0%, #d97706 100%); }
.ob-obj-bar-critical { background: linear-gradient(90deg, #ef4444 0%, #dc2626 100%); }
.ob-obj-bar-label {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font-size: 11.5px; font-weight: 600; color: var(--ink);
  mix-blend-mode: difference; color: #fff;
}

/* ---------- Portrait triad (3 charts side by side per attribute) ---------- */

.triad-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 16px;
}
@media (max-width: 1100px) { .triad-row { grid-template-columns: 1fr; } }
.triad-row .card { margin-bottom: 0; }

.triad-head {
  font-size: 16px; font-weight: 600; color: var(--ink);
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--accent-50);
}

/* =========================================================================
   AI Workbench — /product/tools WOW redesign
   ========================================================================= */

@keyframes ai-shine {
  0%   { background-position: -200% 50%; }
  100% { background-position:  200% 50%; }
}
@keyframes ai-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(129, 140, 248, 0.4); }
  50%      { box-shadow: 0 0 0 12px rgba(129, 140, 248, 0); }
}

.ai-hero {
  position: relative;
  border-radius: 20px;
  padding: 32px 40px;
  margin-bottom: 22px;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 0%, rgba(167, 139, 250, 0.25), transparent 55%),
    radial-gradient(circle at 80% 120%, rgba(56, 189, 248, 0.18), transparent 55%),
    linear-gradient(135deg, #0f172a 0%, #1e1b4b 55%, #0c4a6e 100%);
  color: #f1f5f9;
  box-shadow: 0 10px 40px -12px rgba(79, 70, 229, 0.5);
}
.ai-hero::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.08) 50%, transparent 70%);
  background-size: 200% 100%;
  animation: ai-shine 6s ease-in-out infinite;
  pointer-events: none;
}
.ai-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(8px);
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 600; color: #c7d2fe;
  margin-bottom: 16px;
}
.ai-hero-eyebrow::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: radial-gradient(circle, #a5b4fc 0%, #818cf8 50%, #4f46e5 100%);
  animation: ai-pulse 2s infinite;
}
.ai-hero h1 {
  font-size: 38px; font-weight: 700; letter-spacing: -0.03em;
  line-height: 1.05; margin: 0 0 10px;
  background: linear-gradient(120deg, #ffffff 0%, #c7d2fe 45%, #fda4af 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.ai-hero-sub {
  font-size: 15px; color: #cbd5e1; max-width: 640px;
  line-height: 1.55; margin: 0;
}
.ai-hero-side {
  position: absolute; right: 40px; top: 32px;
  display: flex; align-items: center; gap: 16px;
  font-size: 12px; color: #94a3b8;
}
.ai-hero-side a {
  padding: 8px 14px; border-radius: 8px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  color: #e0e7ff;
  transition: all 0.15s ease;
}
.ai-hero-side a:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.3);
  color: #fff;
}

/* ---------- Filter panel (workbench) ---------- */

.wb-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px 22px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
  position: relative;
}
.wb-panel-title {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 600; color: var(--ink-2);
  letter-spacing: -0.005em;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.wb-panel-title::before {
  content: ""; width: 4px; height: 14px; border-radius: 2px;
  background: linear-gradient(180deg, var(--accent) 0%, #a78bfa 100%);
}
.wb-panel-count {
  margin-left: auto; font-weight: 500; color: var(--muted); font-size: 12px;
}

.wb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px 16px;
}

.wb-field {
  display: flex; flex-direction: column; gap: 6px;
}
.wb-field-label {
  font-size: 11px; font-weight: 600;
  color: var(--muted); text-transform: uppercase;
  letter-spacing: 0.06em;
}
.wb-field input[type=text],
.wb-field input[type=number],
.wb-field input[type=date],
.wb-field select,
.wb-field textarea {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  transition: border-color 0.1s ease, box-shadow 0.1s ease;
}
.wb-field input:focus,
.wb-field select:focus,
.wb-field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
}
.wb-field textarea { min-height: 80px; resize: vertical; }

/* ---------- Segmented control ---------- */

.wb-seg {
  display: inline-flex;
  padding: 3px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 10px;
  gap: 2px;
}
.wb-seg input[type=radio] { display: none; }
.wb-seg label {
  padding: 6px 12px; border-radius: 7px;
  font-size: 12px; font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.12s ease;
  user-select: none;
}
.wb-seg input[type=radio]:checked + label {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-xs);
}
.wb-seg.wb-seg-color input[type=radio]:checked + label[data-k=hot]  { color: #dc2626; }
.wb-seg.wb-seg-color input[type=radio]:checked + label[data-k=warm] { color: #d97706; }
.wb-seg.wb-seg-color input[type=radio]:checked + label[data-k=cold] { color: #0369a1; }

/* ---------- Chip (multi-select, checkbox-driven) ---------- */

.wb-chip-group {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.wb-chip-group input[type=checkbox] { display: none; }
.wb-chip-group label {
  padding: 6px 12px; border-radius: 999px;
  background: var(--bg-subtle);
  border: 1px solid transparent;
  font-size: 12px; font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
  transition: all 0.12s ease;
  user-select: none;
}
.wb-chip-group label:hover { background: var(--accent-50); color: var(--accent); }
.wb-chip-group input[type=checkbox]:checked + label {
  background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
  border-color: var(--accent);
  color: var(--accent-600);
  font-weight: 600;
}

/* ---------- Toggle switch ---------- */

.wb-toggle { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.wb-toggle input { display: none; }
.wb-toggle-slider {
  position: relative; display: inline-block;
  width: 38px; height: 22px;
  background: var(--border);
  border-radius: 999px;
  transition: background 0.15s ease;
}
.wb-toggle-slider::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow-xs);
  transition: transform 0.15s ease;
}
.wb-toggle input:checked + .wb-toggle-slider {
  background: linear-gradient(135deg, var(--accent) 0%, #818cf8 100%);
}
.wb-toggle input:checked + .wb-toggle-slider::after { transform: translateX(16px); }

/* ---------- Accordion (advanced filters) ---------- */

details.wb-adv {
  border: 1px dashed var(--border);
  border-radius: 10px;
  padding: 0;
  margin-top: 12px;
  background: var(--bg-subtle);
}
details.wb-adv > summary {
  padding: 10px 16px; font-size: 12px; font-weight: 600; color: var(--muted);
  cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: 8px;
}
details.wb-adv > summary::-webkit-details-marker { display: none; }
details.wb-adv > summary::before {
  content: "▸"; color: var(--muted); transition: transform 0.15s ease;
}
details.wb-adv[open] > summary::before { transform: rotate(90deg); }
details.wb-adv > .wb-adv-body { padding: 16px; border-top: 1px dashed var(--border); }

/* ---------- Model cards ---------- */

.model-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.model-card {
  position: relative;
  padding: 16px;
  border: 2px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex; flex-direction: column; gap: 6px;
}
.model-card input[type=radio] { display: none; }
.model-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.model-card input[type=radio]:checked ~ .model-card-head,
.model-card.checked {
  /* CSS :has() would be cleaner but not universally supported. */
}
.model-card:has(input:checked) {
  border-color: var(--accent);
  box-shadow:
    0 0 0 3px rgba(79, 70, 229, 0.1),
    0 10px 25px -8px rgba(79, 70, 229, 0.35);
  background: linear-gradient(135deg, #ffffff 0%, #f5f3ff 100%);
}
.model-card:has(input:checked)::after {
  content: "✓"; position: absolute; top: 12px; right: 12px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.4);
}
.model-tier {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 6px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase;
  width: fit-content;
}
.model-tier-flagship  { background: linear-gradient(135deg, #fecaca 0%, #fed7aa 100%); color: #9a3412; }
.model-tier-balanced  { background: linear-gradient(135deg, #e0e7ff 0%, #ddd6fe 100%); color: #4338ca; }
.model-tier-economy   { background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%); color: #065f46; }
.model-tier-free      { background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%); color: var(--muted); }

.model-label { font-size: 14px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.model-tagline { font-size: 12px; color: var(--muted); line-height: 1.4; min-height: 32px; }
.model-pricing {
  display: flex; gap: 8px; margin-top: 4px;
  font-size: 11px; color: var(--muted);
  font-family: "JetBrains Mono", monospace;
}
.model-pricing b { color: var(--ink-2); font-weight: 600; }
.model-context { font-size: 10.5px; color: var(--accent); font-weight: 500; }

/* ---------- Preset cards ---------- */

.preset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.preset-card {
  position: relative;
  padding: 18px;
  border: 2px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  cursor: pointer;
  overflow: hidden;
  transition: all 0.15s ease;
}
.preset-card input[type=radio] { display: none; }
.preset-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, #4f46e5 0%, #a78bfa 50%, #f472b6 100%);
  opacity: 0; transition: opacity 0.15s ease;
}
.preset-card:has(input:checked)::before { opacity: 1; }
.preset-card:has(input:checked) {
  border-color: var(--accent);
  box-shadow:
    0 0 0 3px rgba(79, 70, 229, 0.1),
    0 12px 30px -10px rgba(79, 70, 229, 0.3);
  background: linear-gradient(160deg, #ffffff 0%, #faf5ff 100%);
}
.preset-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.preset-icon {
  width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; margin-bottom: 10px;
  background: linear-gradient(135deg, var(--accent-50) 0%, #ede9fe 100%);
  color: var(--accent);
}
.preset-title { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.preset-desc  { font-size: 12px; color: var(--muted); line-height: 1.45; }
.preset-meta {
  display: flex; gap: 8px; margin-top: 10px;
  font-size: 10.5px; color: var(--muted);
  font-family: "JetBrains Mono", monospace;
}
.preset-meta .dot { color: var(--border-strong); }

/* ---------- AI CTA button ---------- */

.ai-cta-wrap {
  margin-top: 22px; display: flex; align-items: center; gap: 16px;
  padding: 18px 22px;
  background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);
  border-radius: 14px;
  color: #e0e7ff;
}
.ai-cta-wrap .left { flex: 1; }
.ai-cta-wrap .cta-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: #a5b4fc; margin-bottom: 4px; }
.ai-cta-wrap .cta-desc { font-size: 12.5px; color: #cbd5e1; }
.ai-cta {
  padding: 14px 28px;
  border: none; border-radius: 12px;
  background: linear-gradient(135deg, #4f46e5 0%, #a78bfa 100%);
  color: #fff; font-size: 14px; font-weight: 600;
  cursor: pointer;
  box-shadow:
    0 10px 25px -8px rgba(79, 70, 229, 0.6),
    inset 0 1px 0 rgba(255,255,255,0.2);
  transition: all 0.15s ease;
  letter-spacing: -0.005em;
}
.ai-cta:hover {
  transform: translateY(-1px);
  box-shadow:
    0 14px 30px -8px rgba(79, 70, 229, 0.7),
    inset 0 1px 0 rgba(255,255,255,0.3);
}
.ai-cta:active { transform: translateY(0); }
.ai-cta::before { content: "✨ "; }

.ai-cta-secondary {
  padding: 12px 18px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 12px;
  background: rgba(255,255,255,0.06);
  color: #e0e7ff;
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  backdrop-filter: blur(6px);
  letter-spacing: -0.005em;
}
.ai-cta-secondary:hover {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.32);
  color: #fff;
}

/* ---------- Drill-down modal ---------- */

.vega-drillable { cursor: pointer; }
.vega-drillable canvas,
.vega-drillable svg { cursor: pointer; }
.vega-drillable::after {
  content: "↗ клик — открыть звонки";
  position: absolute;
  margin-top: -4px;
  right: 14px;
  top: 10px;
  font-size: 10.5px;
  color: var(--muted);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.card:hover .vega-drillable::after,
.vega-drillable:hover::after { opacity: 1; }
.vega-drillable { position: relative; }

.drill-modal {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(4px);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 60px 20px 20px;
  z-index: 100;
  overflow-y: auto;
}
.drill-modal.open { display: flex; }
.drill-modal-card {
  background: var(--surface);
  border-radius: 16px;
  width: 100%;
  max-width: 1280px;
  box-shadow: 0 25px 70px -10px rgba(15, 23, 42, 0.4);
  overflow: hidden;
  animation: drill-pop 0.18s ease;
}
@keyframes drill-pop {
  0%   { transform: translateY(10px); opacity: 0; }
  100% { transform: translateY(0);    opacity: 1; }
}
.drill-modal-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 20px 24px 14px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(135deg, #fafbff 0%, #f5f3ff 100%);
}
.drill-modal-eyebrow {
  font-size: 10.5px; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--accent);
  font-weight: 700; margin-bottom: 4px;
}
.drill-modal-title {
  font-size: 22px; font-weight: 700;
  letter-spacing: -0.02em; color: var(--ink);
  margin: 0 0 4px;
}
.drill-modal-sub { max-width: 640px; }
.drill-modal-close {
  background: transparent; border: none;
  font-size: 28px; line-height: 1;
  color: var(--muted); cursor: pointer;
  padding: 4px 10px; border-radius: 8px;
  transition: all 0.12s ease;
}
.drill-modal-close:hover { background: var(--bg-subtle); color: var(--ink); }
.drill-modal-body { padding: 14px 24px 24px; max-height: 65vh; overflow-y: auto; }
.drill-modal-body .tbl { font-size: 12.5px; }
.drill-empty, .drill-loading, .drill-error {
  text-align: center; padding: 40px 20px; color: var(--muted);
}
.drill-error { color: var(--critical); }

/* ---------- Shared filter bar actions + active chips ---------- */

.wb-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.wb-active-chips {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  padding: 10px 14px;
  background: linear-gradient(135deg, #eef2ff 0%, #fdf4ff 100%);
  border: 1px solid #ddd6fe;
  border-radius: 10px;
  margin-bottom: 14px;
}
.wb-active-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12px;
  color: var(--ink-2);
}
.wb-active-chip b { color: var(--accent-600); font-weight: 600; }
.wb-active-chip a {
  color: var(--muted);
  font-weight: 700;
  text-decoration: none;
  line-height: 1;
  padding: 0 4px;
  border-radius: 50%;
  transition: all 0.1s ease;
}
.wb-active-chip a:hover { background: var(--critical-bg); color: var(--critical); }

/* ---------- List-page header (filter count + export + actions) ---------- */

.list-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  flex-wrap: wrap; gap: 14px; margin-bottom: 14px;
}
.list-head-stats {
  display: flex; gap: 12px; align-items: center;
  font-size: 13px; color: var(--muted);
}
.list-head-stats b { color: var(--ink); font-weight: 700; font-size: 15px; }

/* ---------- Status badges (big-ticket) ---------- */

.status-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
}
.status-pill::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}
.status-pill-pending    { background: #f1f5f9; color: #475569; border-color: #e2e8f0; }
.status-pill-in_review  { background: #dbeafe; color: #1e40af; border-color: #bfdbfe; }
.status-pill-open       { background: #fee2e2; color: #991b1b; border-color: #fecaca; }
.status-pill-done       { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.status-pill-skipped    { background: #f3e8ff; color: #6b21a8; border-color: #e9d5ff; }
.status-pill-resolved   { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.status-pill-acknowledged { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.status-pill-critical, .status-pill-high { background: #fee2e2; color: #991b1b; border-color: #fecaca; }
.status-pill-medium     { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.status-pill-low        { background: #dcfce7; color: #166534; border-color: #bbf7d0; }

/* ---------- Row tile (for alert / queue rows rendered as cards) ---------- */

.row-tile {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) 2.5fr auto;
  gap: 14px;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 8px;
  align-items: center;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.row-tile:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
}
.row-tile-title {
  font-size: 14px; font-weight: 600; color: var(--ink);
  margin-bottom: 2px;
}
.row-tile-meta {
  font-size: 11.5px; color: var(--muted);
  display: flex; gap: 10px; flex-wrap: wrap;
}
.row-tile-meta > span { display: inline-flex; gap: 4px; align-items: center; }
.row-tile-actions { display: flex; gap: 8px; align-items: center; }

/* Severity dot bar on the left. */
.row-tile.sev-critical { border-left: 4px solid var(--critical); }
.row-tile.sev-high     { border-left: 4px solid var(--warning); }
.row-tile.sev-medium   { border-left: 4px solid var(--info); }
.row-tile.sev-low      { border-left: 4px solid var(--success); }

/* =========================================================================
   /compare — cohort comparison page
   ========================================================================= */

.compare-axes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
.compare-axis-card {
  display: block;
  padding: 20px;
  border: 2px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  color: inherit; text-decoration: none;
  transition: all 0.15s ease;
}
.compare-axis-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow:
    0 0 0 3px rgba(79, 70, 229, 0.08),
    0 10px 22px -8px rgba(79, 70, 229, 0.28);
  background: linear-gradient(135deg, #ffffff 0%, #faf5ff 100%);
}
.compare-axis-icon {
  font-size: 26px; margin-bottom: 10px;
  width: 48px; height: 48px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--accent-50) 0%, #ede9fe 100%);
}
.compare-axis-title { font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.compare-axis-desc { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.compare-axis-hint {
  margin-top: 10px;
  font-size: 11.5px; color: var(--accent);
  padding-top: 10px; border-top: 1px solid var(--border);
}

/* A vs B value-picker — two-column card. */

.compare-ab-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items: center;
  margin: 16px 0;
}
.compare-ab-grid::after {
  content: ""; position: absolute;
}
.compare-ab-grid > .compare-side:first-child::after {
  content: "⇌"; display: block; text-align: center;
  font-size: 24px; color: var(--accent); margin: 10px 0;
}
@media (max-width: 760px) { .compare-ab-grid { grid-template-columns: 1fr; } }

.compare-side {
  padding: 18px;
  border: 2px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}
.compare-side-label {
  font-size: 12px; color: var(--muted);
  margin-bottom: 10px;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.compare-side-label b { color: var(--accent); font-weight: 700; font-size: 16px; margin-right: 4px; }
.compare-side-a { border-color: #c7d2fe; background: linear-gradient(135deg, #ffffff 0%, #eef2ff 100%); }
.compare-side-b { border-color: #fbcfe8; background: linear-gradient(135deg, #ffffff 0%, #fdf2f8 100%); }

/* Hero banner for the result view. */

.compare-hero {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items: center;
  padding: 28px 32px;
  border-radius: 18px;
  background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 60%, #581c87 100%);
  color: #f1f5f9;
  margin-bottom: 22px;
  box-shadow: 0 12px 35px -12px rgba(79, 70, 229, 0.5);
}
.compare-hero-side {
  padding: 18px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  backdrop-filter: blur(4px);
}
.compare-hero-label {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  background: rgba(255,255,255,0.15);
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
  margin-bottom: 8px;
}
.compare-hero-a .compare-hero-label { background: #4f46e5; color: #fff; }
.compare-hero-b .compare-hero-label { background: #ec4899; color: #fff; }
.compare-hero-name { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.compare-hero-calls { font-size: 12.5px; color: #cbd5e1; margin-top: 4px; }
.compare-hero-vs {
  font-size: 28px; font-weight: 800; letter-spacing: 0.08em;
  color: #fff; text-align: center;
  background: linear-gradient(135deg, #c7d2fe 0%, #fbcfe8 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
@media (max-width: 760px) { .compare-hero { grid-template-columns: 1fr; } }

/* Metric comparison cards. */

.compare-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}
.compare-metric {
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-xs);
  transition: box-shadow 0.12s ease;
}
.compare-metric:hover { box-shadow: var(--shadow-md); }
.compare-metric-label {
  font-size: 11.5px; color: var(--muted);
  letter-spacing: 0.06em; text-transform: uppercase;
  font-weight: 600; margin-bottom: 10px;
}
.compare-metric-sides {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px; align-items: center;
}
.compare-metric-side {
  padding: 10px 12px;
  background: var(--bg-subtle);
  border-radius: 10px;
  text-align: center;
  position: relative;
}
.compare-metric-side.is-winner {
  background: linear-gradient(135deg, #d1fae5 0%, #ecfdf5 100%);
  box-shadow: inset 0 0 0 2px #6ee7b7;
}
.compare-metric-side.is-winner::after {
  content: "✓";
  position: absolute; top: 6px; right: 8px;
  font-size: 10px; font-weight: 700; color: var(--success);
}
.compare-metric-val {
  font-family: "JetBrains Mono", monospace;
  font-size: 22px; font-weight: 700; color: var(--ink);
  letter-spacing: -0.01em;
}
.compare-metric-tag {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em;
  color: var(--muted);
}
.compare-metric-delta {
  font-size: 12.5px; font-weight: 600;
  padding: 6px 10px; border-radius: 8px;
  text-align: center;
  white-space: nowrap;
  font-family: "JetBrains Mono", monospace;
}
.compare-metric-delta.delta-good  { background: var(--success-bg); color: #166534; }
.compare-metric-delta.delta-bad   { background: var(--critical-bg); color: #991b1b; }
.compare-metric-delta.delta-flat  { background: var(--bg-subtle); color: var(--muted); }
.compare-delta-rel {
  display: block; font-size: 10px; font-weight: 500; margin-top: 2px;
  opacity: 0.8;
}

/* Checklist block double-bar. */

.compare-blocks-tbl td { vertical-align: middle; }
.compare-block-bar {
  display: flex; height: 14px; gap: 2px;
  background: var(--bg-subtle);
  border-radius: 6px; overflow: hidden;
  align-items: center;
  padding: 2px;
}
.compare-bar-a { display: block; height: 100%; background: linear-gradient(90deg, #818cf8 0%, #4f46e5 100%); border-radius: 4px; }
.compare-bar-b { display: block; height: 100%; background: linear-gradient(90deg, #f9a8d4 0%, #ec4899 100%); border-radius: 4px; }

/* ---------- Cost widget ---------- */

.cost-widget {
  display: flex; gap: 14px; align-items: center;
  padding: 14px 18px; margin-top: 14px;
  background: linear-gradient(135deg, #fef3c7 0%, #fee2e2 100%);
  border: 1px solid #fde68a;
  border-radius: 12px;
}
.cost-widget-ok {
  background: linear-gradient(135deg, #d1fae5 0%, #e0f2fe 100%);
  border-color: #6ee7b7;
}
.cost-widget-icon { font-size: 22px; }
.cost-widget-val {
  font-family: "JetBrains Mono", monospace;
  font-size: 22px; font-weight: 700; color: var(--ink);
}
.cost-widget-desc { font-size: 12px; color: var(--muted); }

/* ---------- Preview (selected calls) ---------- */

.preview-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 22px; margin-bottom: 12px;
  padding: 12px 18px;
  background: linear-gradient(135deg, #eef2ff 0%, #fdf4ff 100%);
  border-radius: 10px;
}
.preview-head-count { font-size: 22px; font-weight: 700; color: var(--accent-600); }

/* ============================================================ */
/* Workspace switcher (sidebar tabs: Oneboost / Продуктовый пингвин) */
/* ============================================================ */

.ws-switcher {
  display: flex;
  gap: 4px;
  padding: 8px 10px 6px;
  border-bottom: 1px solid var(--border, #e5e7eb);
  background: #fafafa;
}
.ws-tab {
  flex: 1 1 0;
  min-width: 0;
  padding: 7px 8px;
  font-size: 11.5px;
  font-weight: 600;
  color: #6b7280;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.15s ease;
  letter-spacing: -0.01em;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}
.ws-tab:hover {
  background: #f3f4f6;
  color: #1f2937;
}
.ws-tab-active {
  background: #4f46e5;
  color: #fff;
  border-color: #4f46e5;
  box-shadow: 0 1px 2px rgba(79,70,229,0.25);
}
.ws-tab-active:hover {
  background: #4338ca;
  color: #fff;
}

.ws-nav-hidden {
  display: none !important;
}

/* Pingvin landing link — slightly visually elevated since it's the workspace home */
.ws-pingvin-home {
  background: linear-gradient(135deg, #ecfdf5 0%, #f0f9ff 100%);
  border-left: 3px solid #10b981;
  font-weight: 600;
  margin-bottom: 8px;
}
.ws-pingvin-home.active {
  background: linear-gradient(135deg, #d1fae5 0%, #dbeafe 100%);
}