/* ════════════════════════════════════════════════════════════
   ADV · Adventure Dealer View — Refined Command Center
   ════════════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

:root{
  /* ── Surface system ── */
  --bg:#080e1e;
  --bg2:#0a1224;
  --side:#0c1528;
  --card:#0f1a30;
  --card-hover:#121f38;
  --card2:#152240;
  --surface:#091018;

  /* ── Accent system ── */
  --accent:#38bdf8;
  --accent2:#7dd3fc;
  --accent-dim:rgba(56,189,248,0.10);
  --accent-glow:rgba(56,189,248,0.04);

  /* ── Text hierarchy ── */
  --text:#e4ecf7;
  --text2:#c5d3e8;
  --muted:#7b9bbf;
  --dim:#4a6480;
  --faint:#2d4460;

  /* ── Borders ── */
  --border:rgba(30,47,74,0.7);
  --border2:rgba(37,61,96,0.7);

  /* ── Semantic ── */
  --green:#2dd4bf;
  --green-dim:rgba(45,212,191,0.12);
  --red:#f87171;
  --red-dim:rgba(248,113,113,0.10);
  --blue:#60a5fa;
  --blue-dim:rgba(96,165,250,0.12);
  --teal:#22d3ee;
  --amber:#fbbf24;
  --amber-dim:rgba(251,191,36,0.12);
  --purple:#a78bfa;
  --purple-dim:rgba(167,139,250,0.12);

  /* ── Typography ── */
  --font-head:'DM Sans',system-ui,-apple-system,sans-serif;
  --font-body:'DM Sans',system-ui,-apple-system,sans-serif;
  --font-mono:'JetBrains Mono','SF Mono','Menlo',monospace;

  /* ── Spacing rhythm (8px base) ── */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-7:28px; --sp-8:32px; --sp-10:40px;

  /* ── Radii ── */
  --r-sm:6px; --r-md:10px; --r-lg:14px;

  /* ── Safe areas ── */
  --sat:env(safe-area-inset-top,0px);
  --sab:env(safe-area-inset-bottom,0px);
  --sal:env(safe-area-inset-left,0px);
  --sar:env(safe-area-inset-right,0px);
}

html{height:100%;-webkit-text-size-adjust:100%;}
body{
  min-height:100%;background:var(--bg);color:var(--text);
  font-family:var(--font-body);font-size:15px;line-height:1.5;
  display:flex;flex-direction:column;
  -webkit-font-smoothing:antialiased;
}

/* ── Smooth scrolling ── */
*{scroll-behavior:smooth;}
::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--faint);border-radius:3px;}
::-webkit-scrollbar-thumb:hover{background:var(--dim);}

/* ═══════════════════════════════════════════════
   STICKY HEADER WRAPPER
   ═══════════════════════════════════════════════ */
#sticky-header{
  position:sticky;top:0;z-index:100;
  flex-shrink:0;
  background:var(--bg);
  isolation:isolate;
}

/* ═══════════════════════════════════════════════
   TOPBAR
   ═══════════════════════════════════════════════ */
#topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--sp-7);height:52px;
  background:rgba(12,21,40,0.95);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
  flex-shrink:0;gap:var(--sp-4);
  padding-top:var(--sat);
}
.logo{
  font-family:var(--font-head);font-size:20px;font-weight:800;
  letter-spacing:3px;color:var(--accent);white-space:nowrap;
}
.logo span{color:var(--dim);font-weight:400;letter-spacing:0.5px;font-size:13px;}
#status{
  font-size:11px;color:var(--dim);white-space:nowrap;
  font-family:var(--font-mono);font-weight:500;letter-spacing:0.5px;
}

/* ═══════════════════════════════════════════════
   FILTER BAR
   ═══════════════════════════════════════════════ */
#filterbar{
  display:flex;align-items:center;justify-content:space-between;gap:8px 16px;
  padding:6px var(--sp-7);min-height:42px;
  background:rgba(8,14,30,0.98);border-bottom:1px solid var(--border);
  flex-shrink:0;flex-wrap:wrap;
  position:relative;
}
/* Disabled state for Segment/Inventory tabs (local slicers take over) */
#filterbar.global-filters-disabled select,
#filterbar.global-filters-disabled input[type=date],
#filterbar.global-filters-disabled .quick-btn,
#filterbar.global-filters-disabled label,
#filterbar.global-filters-disabled #clear-btn,
#filterbar.global-filters-disabled .filter-sep{
  opacity:0.35 !important;pointer-events:none !important;
}
/* Group toggle (ALL/LIGHTNING/THUNDER) must stay clickable even when disabled */
#filterbar.global-filters-disabled #group-toggle,
#filterbar.global-filters-disabled #group-toggle *,
#filterbar.global-filters-disabled .group-btn,
#filterbar.global-filters-disabled [onclick*="setGroupFilter"]{
  opacity:1 !important;pointer-events:auto !important;cursor:pointer !important;
}
#filterbar.global-filters-disabled::after{
  content:'Tab uses local filters below';
  position:absolute;right:var(--sp-7);bottom:-18px;
  font-size:10px;color:var(--dim);font-family:var(--font-head);
  letter-spacing:1px;text-transform:uppercase;
}
#filterbar::-webkit-scrollbar{display:none;}
#filterbar label{
  font-size:10px;letter-spacing:1.5px;color:var(--dim);
  font-family:var(--font-head);font-weight:700;
  white-space:nowrap;text-transform:uppercase;
}
#filterbar select{
  background:var(--surface);border:1px solid var(--border2);
  border-radius:var(--r-sm);color:var(--text2);font-size:13px;
  padding:4px 8px;font-family:var(--font-body);cursor:pointer;
  outline:none;-webkit-appearance:none;transition:border-color .15s;
}
#filterbar select:focus{border-color:var(--accent);}
.filter-sep{width:1px;height:20px;background:var(--border);flex-shrink:0;opacity:0.5;}
#clear-btn{
  font-size:11px;color:var(--red);background:var(--red-dim);
  border:none;cursor:pointer;font-family:var(--font-head);
  white-space:nowrap;padding:4px 10px;font-weight:700;
  letter-spacing:0.5px;border-radius:var(--r-sm);transition:all .15s;
}
#clear-btn:hover{background:rgba(248,113,113,0.2);}

/* ── Date inputs ── */
#filterbar input[type=date]{
  background:var(--surface);border:1px solid var(--border2);border-radius:var(--r-sm);
  color:var(--text2);font-size:13px;padding:4px 8px;font-family:var(--font-body);
  cursor:pointer;outline:none;color-scheme:dark;transition:border-color .15s;
}
#filterbar input[type=date]:focus{border-color:var(--accent);}

/* ── Quick date buttons ── */
.quick-btn{
  background:var(--accent-dim);color:var(--accent);
  border:1px solid rgba(56,189,248,0.15);border-radius:var(--r-sm);
  padding:4px 10px;font-size:11px;font-family:var(--font-head);
  font-weight:700;letter-spacing:1.5px;cursor:pointer;white-space:nowrap;
  transition:all .15s;
}
.quick-btn:hover{background:rgba(56,189,248,0.18);}
.quick-btn.active{background:var(--accent);color:var(--bg);border-color:var(--accent);}

/* ═══════════════════════════════════════════════
   NAV TABS
   ═══════════════════════════════════════════════ */
#nav{
  display:flex;align-items:stretch;justify-content:space-evenly;padding:0 var(--sp-7);
  background:rgba(12,21,40,0.98);border-bottom:1px solid var(--border);
  flex-shrink:0;overflow-x:auto;scrollbar-width:none;
  scroll-snap-type:x proximity;
}
#nav::-webkit-scrollbar{display:none;}
.tab{
  font-family:var(--font-head);font-size:12px;font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;
  padding:12px var(--sp-5) 10px;
  border-bottom:2px solid transparent;cursor:pointer;
  color:var(--dim);transition:color .15s,border-color .15s;
  white-space:nowrap;flex-shrink:0;scroll-snap-align:start;
  position:relative;
}
.tab:hover{color:var(--muted);}
.tab.active{color:var(--accent);border-bottom-color:var(--accent);}

/* ═══════════════════════════════════════════════
   MAIN CONTENT
   ═══════════════════════════════════════════════ */
#main{
  flex:0 0 auto;min-width:0;
  padding:var(--sp-6) var(--sp-7);
  -webkit-overflow-scrolling:touch;
}

/* ── Panels with fade animation ── */
.panel{display:none;}
.panel.active{display:block;animation:fadeUp .25s ease-out;}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

/* ── Sub-tabs within panels ── */
.subtab-bar{display:flex;gap:0;margin-bottom:var(--sp-4);border-bottom:1px solid var(--border);overflow-x:auto;scrollbar-width:none;}
.subtab-bar::-webkit-scrollbar{display:none;}
.subtab{
  font-family:var(--font-head);font-size:11px;font-weight:700;
  letter-spacing:1.2px;text-transform:uppercase;
  padding:10px 16px 8px;border-bottom:2px solid transparent;cursor:pointer;
  color:var(--dim);transition:color .15s,border-color .15s;white-space:nowrap;
}
.subtab:hover{color:var(--muted);}
.subtab.active{color:var(--accent);border-bottom-color:var(--accent);}
.subpanel{display:none;}
.subpanel.active{display:block;}

/* ── Multi-select slicer dropdowns ── */
.ms-wrap{position:relative;display:inline-block;}
.ms-btn{
  background:var(--surface);border:1px solid var(--border2);border-radius:var(--r-sm);
  color:var(--text2);font-size:12px;padding:5px 24px 5px 10px;cursor:pointer;
  font-family:var(--font-body);white-space:nowrap;max-width:180px;overflow:hidden;text-overflow:ellipsis;
  position:relative;
}
.ms-btn::after{content:'▾';position:absolute;right:8px;top:50%;transform:translateY(-50%);color:var(--dim);font-size:10px;}
.ms-btn.has-sel{color:var(--accent);border-color:rgba(56,189,248,0.4);}
.ms-drop{
  display:none;position:absolute;top:100%;left:0;z-index:50;margin-top:2px;
  background:var(--card);border:1px solid var(--border);border-radius:var(--r-sm);
  min-width:180px;max-height:280px;overflow-y:auto;padding:4px 0;
  box-shadow:0 8px 24px rgba(0,0,0,0.4);
}
.ms-drop.open{display:block;}
.ms-drop label{
  display:flex;align-items:center;gap:6px;padding:4px 12px;cursor:pointer;
  font-size:12px;color:var(--text2);transition:background .1s;
}
.ms-drop label:hover{background:var(--surface);}
.ms-drop input[type=checkbox]{accent-color:var(--accent);margin:0;}
.ms-actions{display:flex;gap:8px;padding:4px 12px 6px;border-bottom:1px solid var(--border);font-size:11px;}
.ms-actions span{cursor:pointer;color:var(--accent);}
.ms-actions span:hover{text-decoration:underline;}
.slicer-bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:var(--sp-3);}

/* Accordion drill-down rows */
.acc-row{cursor:pointer;transition:background .1s;}
.acc-row:hover{background:rgba(56,189,248,0.04);}
.acc-row.leaf{cursor:default;}
.acc-row.leaf:hover{background:none;}
.acc-icon{display:inline-block;width:14px;font-size:10px;color:var(--dim);margin-right:4px;transition:transform .15s;}
.acc-row:hover .acc-icon{color:var(--accent);}
.acc-row.expanded .acc-icon{color:var(--accent);}
.acc-stock{background:rgba(8,14,30,0.5);font-size:11px;}
.acc-stock td:first-child{color:var(--muted);}

/* ═══════════════════════════════════════════════
   KPI CARDS
   ═══════════════════════════════════════════════ */
.kpi-row{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));
  gap:var(--sp-3);margin-bottom:var(--sp-5);
}
.kpi-row>*{min-width:0;}
.kpi{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--r-md);padding:var(--sp-4) var(--sp-5);
  position:relative;overflow:hidden;
  transition:background .15s,border-color .15s;
  contain:content;
}
.kpi:hover{background:var(--card-hover);border-color:var(--border2);}
.kpi::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--accent),transparent 80%);opacity:0.7;
}
.kpi.green::before{background:linear-gradient(90deg,var(--green),transparent 80%);}
.kpi.blue::before{background:linear-gradient(90deg,var(--blue),transparent 80%);}
.kpi.purple::before{background:linear-gradient(90deg,var(--purple),transparent 80%);}
.kpi.amber::before{background:linear-gradient(90deg,var(--amber),transparent 80%);}
/* Benchmark state classes — applied when a KPI has a threshold attached. */
.kpi.bm-green{border-left:4px solid var(--green);padding-left:calc(var(--sp-5) - 4px);}
.kpi.bm-green .kpi-value{color:var(--green);}
.kpi.bm-amber{border-left:4px solid var(--amber);padding-left:calc(var(--sp-5) - 4px);}
.kpi.bm-amber .kpi-value{color:var(--amber);}
.kpi.bm-red{border-left:4px solid var(--red);padding-left:calc(var(--sp-5) - 4px);}
.kpi.bm-red .kpi-value{color:var(--red);}
.kpi-label{
  font-family:var(--font-head);font-size:10px;font-weight:700;
  letter-spacing:2px;color:var(--muted);text-transform:uppercase;
  margin-bottom:6px;
}
.kpi-value{
  font-family:var(--font-mono);font-size:26px;font-weight:600;
  color:#edf2fc;line-height:1;letter-spacing:-0.5px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.kpi-sub{font-size:12px;color:var(--dim);margin-top:5px;font-family:var(--font-body);line-height:1.4;}
.kpi-yoy{margin-top:4px;}

/* Target-list flag badges (small colored pills) */
.flag-pill{
  display:inline-block;padding:2px 6px;border-radius:10px;
  font-size:10px;font-weight:700;letter-spacing:0.5px;
  color:#fff;margin:0 2px 2px 0;white-space:nowrap;
  font-family:var(--font-mono);
}
.flag-pill.critical{background:#ef4444;}
.flag-pill.aging{background:#f59e0b;}
.flag-pill.watch{background:#eab308;color:#1a1a1a;}
.flag-pill.duplicate{background:#3b82f6;}
/* Row tints applied on td (not tr) so we win specificity over the default td
   styling and the tr:hover td rule. Hover state still lightens via its own
   rule; we don't need !important. */
tr.row-critical td{background-color:rgba(239,68,68,0.12);}
tr.row-duplicate td{background-color:rgba(59,130,246,0.10);}

/* Commentary panel */
.target-commentary{
  margin-top:var(--sp-5);background:var(--surface);
  border:1px solid var(--border);border-left:4px solid var(--accent);
  border-radius:var(--r-md);padding:var(--sp-4) var(--sp-5);
}
.target-commentary h3{
  font-family:var(--font-head);font-size:12px;font-weight:700;letter-spacing:2px;
  color:var(--accent);text-transform:uppercase;margin:0 0 var(--sp-3) 0;
}
.target-commentary h4{
  font-size:11px;font-weight:700;letter-spacing:1px;color:var(--muted);
  text-transform:uppercase;margin:var(--sp-3) 0 var(--sp-2) 0;
}
.target-commentary p{font-size:13px;color:var(--text2);margin:0 0 var(--sp-2) 0;line-height:1.55;}
.target-commentary p.theme{color:var(--text1,#edf2fc);font-weight:500;}
.target-commentary p.action{color:var(--amber);}
.target-commentary p.capital{color:var(--dim);font-family:var(--font-mono);font-size:12px;}
.target-commentary ul.dup-list{margin:0 0 var(--sp-2) 0;padding-left:var(--sp-4);font-size:12px;color:var(--text2);line-height:1.6;}
.target-commentary ul.dup-list li{margin-bottom:2px;}
.target-commentary .commentary-actions{display:flex;gap:8px;margin-top:var(--sp-3);flex-wrap:wrap;}
.target-commentary .commentary-actions button.outline{
  background:transparent;border:1px solid var(--border2);color:var(--text2);
  padding:6px 12px;border-radius:var(--r-sm);font-size:11px;font-weight:600;
  letter-spacing:1px;text-transform:uppercase;cursor:pointer;
}
.target-commentary .commentary-actions button.outline:hover{border-color:var(--accent);color:var(--accent);}
.target-commentary .commentary-actions button.filled{
  background:var(--accent);border:1px solid var(--accent);color:#0a1220;
  padding:6px 12px;border-radius:var(--r-sm);font-size:11px;font-weight:700;
  letter-spacing:1px;text-transform:uppercase;cursor:pointer;
}
.target-commentary .commentary-actions button.filled:hover{background:var(--accent2);border-color:var(--accent2);}

.yoy-up{color:var(--green);font-size:11px;font-family:var(--font-mono);font-weight:600;}
.yoy-dn{color:var(--red);font-size:11px;font-family:var(--font-mono);font-weight:600;}
.yoy-flat{color:var(--dim);font-size:11px;font-family:var(--font-mono);}

/* ═══════════════════════════════════════════════
   GRID LAYOUTS
   ═══════════════════════════════════════════════ */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4);margin-bottom:var(--sp-4);}
.grid-2>*{min-width:0;}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--sp-4);margin-bottom:var(--sp-4);}
.grid-3>*{min-width:0;}
@media(max-width:900px){.grid-2,.grid-3{grid-template-columns:1fr;}}

/* ═══════════════════════════════════════════════
   CARDS
   ═══════════════════════════════════════════════ */
.card{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--r-md);padding:var(--sp-5) var(--sp-6);
  transition:border-color .15s;
  min-width:0;overflow:hidden;
}
.card:hover{border-color:var(--border2);}
.card-title{
  font-family:var(--font-head);font-size:12px;font-weight:700;
  letter-spacing:2px;color:var(--muted);text-transform:uppercase;
  margin-bottom:var(--sp-4);padding-bottom:var(--sp-3);
  border-bottom:1px solid var(--border);
}
.card-title-row{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:var(--sp-4);padding-bottom:var(--sp-3);
  border-bottom:1px solid var(--border);
}
.card-title-row .card-title{margin-bottom:0;padding-bottom:0;border-bottom:none;}

/* ═══════════════════════════════════════════════
   TABLES
   ═══════════════════════════════════════════════ */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r-sm);max-width:100%;}
table{width:100%;border-collapse:collapse;font-size:13px;}
th{
  font-family:var(--font-head);font-size:10px;font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);
  padding:10px 12px;border-bottom:1px solid var(--border2);
  text-align:center;white-space:nowrap;
  background:rgba(8,14,30,0.5);position:sticky;top:0;
}
th:first-child{text-align:left;}
td{
  padding:9px 12px;border-bottom:1px solid rgba(30,47,74,0.4);
  color:var(--text2);font-family:var(--font-mono);font-size:13px;
  text-align:center;transition:background .1s;
}
.tbl-wrap td, .table-wrap td { white-space: nowrap; }
td:first-child{text-align:left;color:var(--text);font-family:var(--font-body);font-weight:600;}
tr:last-child td{border-bottom:none;}
tr:hover td{background:rgba(56,189,248,0.03);}
td.num{text-align:right;}
th.num{text-align:right;}

/* ── Rank badges ── */
.rank{
  font-family:var(--font-head);font-size:13px;font-weight:800;
  color:var(--dim);width:28px;text-align:center;
}
.rank.r1{color:var(--amber);}
.rank.r2{color:#9ca3af;}
.rank.r3{color:#b87333;}

/* ── Status badges ── */
.badge{
  display:inline-block;padding:3px 8px;border-radius:4px;
  font-family:var(--font-mono);font-size:11px;font-weight:600;
  letter-spacing:0.3px;
}
#be-closed-badge{display:none;}
#be-closed-badge.is-visible{display:inline-block;}
.badge-green{background:var(--green-dim);color:var(--green);}
.badge-amber{background:var(--amber-dim);color:var(--amber);}
.badge-blue{background:var(--blue-dim);color:var(--accent);}
.badge-red{background:var(--red-dim);color:#fca5a5;}

/* ── Drillable rows ── */
.drillable{cursor:pointer;}
.drillable:hover td{background:rgba(56,189,248,0.06) !important;}
.drillable td:first-child::after{content:' \2197';font-size:9px;color:var(--dim);opacity:0.6;}

/* ═══════════════════════════════════════════════
   PENETRATION BARS
   ═══════════════════════════════════════════════ */
.pen-item{margin-bottom:var(--sp-4);}
.pen-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;}
.pen-name{font-family:var(--font-head);font-size:13px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--text2);}
.pen-pct{font-family:var(--font-mono);font-size:14px;font-weight:600;color:var(--accent);}
.pen-track{height:6px;background:rgba(30,47,74,0.5);border-radius:3px;overflow:hidden;}
.pen-fill{height:100%;border-radius:3px;transition:width .6s ease;}
.pen-sub{font-size:11px;color:var(--dim);margin-top:3px;font-family:var(--font-body);}

/* ═══════════════════════════════════════════════
   CHART CONTAINERS
   ═══════════════════════════════════════════════ */
.chart-wrap{position:relative;width:100%;contain:layout style;}

/* ═══════════════════════════════════════════════
   EMPTY STATE
   ═══════════════════════════════════════════════ */
#empty{
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;min-height:45vh;color:var(--dim);gap:var(--sp-5);
  padding:var(--sp-10) var(--sp-6);
}
#empty h2{
  font-family:var(--font-head);font-size:32px;font-weight:800;
  letter-spacing:6px;color:var(--faint);
  animation:emptyPulse 3s ease-in-out infinite;
}
@keyframes emptyPulse{0%,100%{opacity:0.4;}50%{opacity:0.8;}}
#empty p{font-size:14px;text-align:center;max-width:420px;line-height:1.7;color:var(--muted);}
.demo-steps{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--r-md);padding:var(--sp-6) var(--sp-7);
  max-width:520px;margin-top:var(--sp-2);
}
.step{display:flex;align-items:flex-start;gap:var(--sp-3);margin-bottom:var(--sp-3);font-size:14px;color:var(--muted);line-height:1.6;}
.step:last-child{margin-bottom:0;}
.step-num{font-family:var(--font-head);font-size:16px;font-weight:800;color:var(--accent);min-width:20px;}
code{font-family:var(--font-mono);font-size:11px;background:var(--surface);padding:2px 6px;border-radius:3px;color:var(--accent);}

/* ═══════════════════════════════════════════════
   DRILL-DOWN MODAL
   ═══════════════════════════════════════════════ */
#drill-overlay{
  position:fixed;top:0;left:0;right:0;bottom:0;
  background:rgba(0,0,0,0.75);backdrop-filter:blur(4px);
  z-index:1000;display:none;flex-direction:column;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
}
#drill-overlay.open{display:flex;}
#drill-box{
  background:var(--card);border:1px solid var(--border2);
  border-radius:var(--r-lg);width:100%;max-width:1400px;
  padding:var(--sp-7);position:relative;
  margin:var(--sp-6) auto;
  animation:modalIn .2s ease-out;
}
@keyframes modalIn{from{opacity:0;transform:scale(0.97) translateY(8px);}to{opacity:1;transform:none;}}
#drill-close{
  position:absolute;top:var(--sp-4);right:var(--sp-5);
  background:var(--surface);border:1px solid var(--border);
  color:var(--muted);font-size:18px;cursor:pointer;line-height:1;
  width:32px;height:32px;border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;
  transition:all .15s;z-index:10;
}
#drill-close:hover{color:var(--text);background:var(--card2);border-color:var(--border2);}
/* Mobile close bar — fixed at bottom on mobile */
#drill-close-bar{
  display:none;position:fixed;bottom:0;left:0;right:0;
  padding:var(--sp-4);background:rgba(8,14,30,0.98);
  border-top:1px solid var(--border);text-align:center;
  z-index:1001;
}
#drill-close-bar button{
  background:var(--accent);color:var(--bg);border:none;border-radius:var(--r-sm);
  padding:12px 48px;font-family:var(--font-head);font-size:15px;font-weight:700;
  letter-spacing:1px;cursor:pointer;touch-action:manipulation;
  width:100%;max-width:300px;
}
#drill-title{
  font-family:var(--font-head);font-size:17px;font-weight:700;
  letter-spacing:0.5px;color:var(--text);margin-bottom:var(--sp-4);
  padding-right:40px;
}

/* ═══════════════════════════════════════════════
   COMPARE TAB
   ═══════════════════════════════════════════════ */
.compare-select-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4);margin-bottom:var(--sp-5);}
.compare-store-sel{
  background:var(--surface);border:1px solid var(--border2);border-radius:var(--r-sm);
  color:var(--text);font-size:14px;padding:8px 12px;font-family:var(--font-body);
  cursor:pointer;outline:none;width:100%;transition:border-color .15s;
}
.compare-store-sel:focus{border-color:var(--accent);}
.compare-metric{display:grid;grid-template-columns:1fr 140px 140px;gap:8px;align-items:center;padding:10px 0;border-bottom:1px solid rgba(30,47,74,0.4);}
.compare-metric:last-child{border-bottom:none;}
.compare-label{font-size:13px;color:var(--muted);font-family:var(--font-body);padding:4px 0;}
.compare-val{font-family:var(--font-mono);font-size:13px;text-align:center;font-weight:600;}
.compare-bar-wrap{margin-top:3px;height:4px;background:rgba(30,47,74,0.5);border-radius:2px;overflow:hidden;}
.compare-bar{height:100%;border-radius:2px;transition:width .4s ease;}
.compare-win{color:var(--accent);}
.compare-lose{color:var(--dim);}
.compare-header-row{display:grid;grid-template-columns:1fr 140px 140px;gap:8px;padding-bottom:10px;border-bottom:1px solid var(--border2);margin-bottom:4px;}
.compare-store-name{font-family:var(--font-head);font-size:13px;font-weight:700;letter-spacing:1px;text-align:center;color:var(--accent);}

/* ═══════════════════════════════════════════════
   GOALS TAB
   ═══════════════════════════════════════════════ */
.goals-store-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-md);padding:var(--sp-5) var(--sp-6);margin-bottom:var(--sp-4);}
.goals-store-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp-4);padding-bottom:var(--sp-3);border-bottom:1px solid var(--border);}
.goals-store-name{font-family:var(--font-head);font-size:16px;font-weight:800;letter-spacing:1.5px;color:var(--accent);}
.goals-body{display:block;}
.goals-section-title{font-family:var(--font-head);font-size:10px;font-weight:700;letter-spacing:2px;color:var(--dim);text-transform:uppercase;margin-bottom:var(--sp-3);margin-top:var(--sp-1);}
.goals-metrics-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3);margin-bottom:var(--sp-3);}
.goals-metric-block{background:var(--surface);border-radius:var(--r-sm);padding:var(--sp-3);}
.goals-metric-label{font-family:var(--font-head);font-size:9px;font-weight:700;letter-spacing:1.5px;color:var(--muted);text-transform:uppercase;margin-bottom:6px;}
.goals-metric-actual{font-family:var(--font-mono);font-size:17px;font-weight:600;color:var(--text);margin-bottom:3px;}
.goals-metric-row{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;}
.goals-compare-badge{display:inline-block;font-family:var(--font-mono);font-size:10px;font-weight:600;padding:2px 7px;border-radius:3px;margin-left:2px;}
.goals-ahead{color:var(--green);background:var(--green-dim);}
.goals-behind{color:var(--red);background:var(--red-dim);}
.goals-flat{color:var(--dim);background:rgba(74,100,128,0.12);}
.goals-prev-row{display:flex;align-items:center;gap:5px;margin-top:3px;margin-bottom:3px;}
.goals-prev-label{font-family:var(--font-head);font-size:9px;font-weight:700;letter-spacing:1px;color:var(--dim);text-transform:uppercase;}
.goals-pct-bar{height:4px;background:rgba(30,47,74,0.5);border-radius:2px;overflow:hidden;margin-bottom:2px;}
.goals-pct-fill{height:100%;border-radius:2px;transition:width .5s;}
.goals-brands-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:var(--sp-3);padding-top:var(--sp-3);border-top:1px solid var(--border);}
.goals-brand-block{background:var(--surface);border-radius:5px;padding:8px 10px;}
.goals-brand-name{font-family:var(--font-head);font-size:10px;font-weight:700;letter-spacing:1px;color:var(--muted);text-transform:uppercase;margin-bottom:5px;}
.goals-brand-actual{font-family:var(--font-mono);font-size:15px;font-weight:600;color:var(--text);margin-bottom:2px;}
.goals-brand-row{display:flex;align-items:baseline;gap:5px;flex-wrap:wrap;}
.goals-brand-of{font-family:var(--font-mono);font-size:10px;color:var(--dim);}
.goals-brand-pct-bar{height:3px;background:rgba(30,47,74,0.5);border-radius:2px;overflow:hidden;margin-top:3px;}
.goals-brand-pct-fill{height:100%;border-radius:2px;transition:width .5s;}
.goals-brand-input,.goals-year-input,.goals-save-btn,.goals-save-bar,.goals-saved-msg,.goals-pct-label,.goal-row,.goal-name,.goal-input,.goal-progress-wrap,.goal-track,.goal-fill,.goal-pct,.goal-actual{/* legacy compat */}

/* ═══════════════════════════════════════════════
   THRESHOLDS / SETTINGS
   ═══════════════════════════════════════════════ */
/* ── Admin panel ── */
.admin-tabs{display:flex;gap:4px;margin-bottom:var(--sp-4);}
.admin-tabs .tab{padding:8px 18px;font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;border-radius:var(--r-sm);cursor:pointer;color:var(--muted);background:transparent;transition:all .15s;border:1px solid transparent;}
.admin-tabs .tab.active{color:var(--accent);background:var(--accent-dim);border-color:rgba(56,189,248,0.2);}
.admin-tabs .tab:hover:not(.active){color:var(--text2);background:rgba(56,189,248,0.04);}
.admin-sub{display:none;}
.admin-sub.active{display:block;}
.admin-form{background:var(--card2);border:1px solid var(--border2);border-radius:var(--r-md);padding:var(--sp-5);margin-top:var(--sp-4);display:none;}
.admin-form.show{display:block;}
.admin-form label{display:block;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin-bottom:4px;margin-top:var(--sp-3);}
.admin-form label:first-child{margin-top:0;}
.admin-form input[type="text"],.admin-form input[type="email"],.admin-form input[type="password"],.admin-form select{
  width:100%;background:var(--surface);border:1px solid var(--border2);border-radius:var(--r-sm);
  color:var(--text);font-size:13px;padding:8px 10px;font-family:var(--font-body);outline:none;transition:border-color .15s;
}
.admin-form input:focus,.admin-form select:focus{border-color:var(--accent);}
.admin-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);}
.admin-btn{background:var(--accent);color:var(--bg);border:none;border-radius:var(--r-sm);padding:8px 20px;font-family:var(--font-head);font-size:12px;font-weight:700;letter-spacing:1px;cursor:pointer;transition:background .15s;}
.admin-btn:hover{background:var(--accent2);}
.admin-btn-outline{background:transparent;color:var(--muted);border:1px solid var(--border2);border-radius:var(--r-sm);padding:8px 16px;font-family:var(--font-head);font-size:12px;font-weight:700;letter-spacing:1px;cursor:pointer;transition:all .15s;}
.admin-btn-outline:hover{color:var(--text);border-color:var(--accent);}
.admin-btn-sm{font-size:11px;padding:5px 12px;}
.toggle-expand{background:transparent;border:1px solid var(--border2);color:var(--text2);padding:5px 12px;border-radius:var(--r-sm);font-size:11px;font-family:var(--font-head);font-weight:700;letter-spacing:0.5px;cursor:pointer;white-space:nowrap;transition:all .15s;}
.toggle-expand:hover{border-color:var(--accent);color:var(--accent);}
.admin-actions{display:flex;gap:8px;margin-top:var(--sp-4);}
.toggle{position:relative;display:inline-block;width:40px;height:22px;vertical-align:middle;}
.toggle input{opacity:0;width:0;height:0;}
.toggle .slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:var(--dim);border-radius:11px;transition:.2s;}
.toggle .slider:before{content:'';position:absolute;height:16px;width:16px;left:3px;bottom:3px;background:var(--text);border-radius:50%;transition:.2s;}
.toggle input:checked+.slider{background:var(--accent);}
.toggle input:checked+.slider:before{transform:translateX(18px);}
.badge{display:inline-block;font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:3px 8px;border-radius:10px;}
.badge-active{background:var(--green-dim);color:var(--green);}
.badge-inactive{background:var(--red-dim);color:var(--red);}
.badge-group{background:var(--accent-dim);color:var(--accent);font-size:10px;}
.oem-grid{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;}
.oem-chip{display:flex;align-items:center;gap:4px;padding:4px 10px;border-radius:var(--r-sm);font-size:12px;font-weight:600;cursor:pointer;border:1px solid var(--border2);color:var(--muted);background:transparent;transition:all .15s;user-select:none;}
.oem-chip.selected{background:var(--accent-dim);color:var(--accent);border-color:rgba(56,189,248,0.3);}
.oem-chip:hover{border-color:var(--accent);}
.admin-msg{padding:8px 12px;border-radius:var(--r-sm);font-size:12px;margin-top:var(--sp-3);display:none;}
.admin-msg.success{display:block;background:var(--green-dim);color:var(--green);}
.admin-msg.error{display:block;background:var(--red-dim);color:var(--red);}
@keyframes sync-pulse{0%,100%{width:30%;}50%{width:70%;}}
.threshold-row{display:grid;grid-template-columns:1fr auto auto auto;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid rgba(30,47,74,0.4);}
.threshold-row:last-child{border-bottom:none;}
.threshold-label{font-size:13px;color:var(--text2);}
.threshold-input{background:var(--surface);border:1px solid var(--border2);border-radius:var(--r-sm);color:var(--text);font-size:13px;padding:5px 8px;width:72px;font-family:var(--font-mono);text-align:right;outline:none;transition:border-color .15s;}
.threshold-input:focus{border-color:var(--accent);}
.threshold-tag{font-size:10px;font-family:var(--font-head);font-weight:700;letter-spacing:1px;color:var(--dim);}

/* ═══════════════════════════════════════════════
   LIVE CONNECT
   ═══════════════════════════════════════════════ */
#load-bar{display:flex;align-items:center;gap:8px;flex:1;max-width:740px;}
#live-connect{display:flex;align-items:center;gap:5px;flex:1;}
#bridge-url{
  flex:1;background:var(--surface);border:1px solid var(--border2);
  border-radius:var(--r-sm);padding:6px 10px;color:var(--text2);
  font-family:var(--font-mono);font-size:11px;outline:none;min-width:0;
  transition:border-color .15s;
}
#bridge-url:focus{border-color:var(--accent);}
#bridge-url::placeholder{color:var(--dim);font-size:10px;}
#live-btn{
  background:var(--green-dim);color:var(--green);
  border:1px solid rgba(45,212,191,0.25);border-radius:var(--r-sm);
  padding:6px 12px;font-family:var(--font-head);font-size:11px;
  font-weight:700;letter-spacing:1.5px;cursor:pointer;white-space:nowrap;
  transition:all .15s;
}
#live-btn:hover{background:rgba(45,212,191,0.18);border-color:var(--green);}
#live-btn.loading{color:var(--muted);border-color:var(--border2);background:transparent;}
.live-indicator{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--green);margin-right:5px;animation:pulse 2s infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.3;}}

/* ═══════════════════════════════════════════════
   EXPORT BUTTON
   ═══════════════════════════════════════════════ */
.export-btn{
  background:var(--accent-dim);color:var(--accent);
  border:1px solid rgba(56,189,248,0.2);border-radius:var(--r-sm);
  padding:6px 12px;font-family:var(--font-head);font-size:11px;
  font-weight:700;letter-spacing:1px;cursor:pointer;white-space:nowrap;
  transition:all .15s;flex-shrink:0;min-height:32px;
  display:inline-flex;align-items:center;
  -webkit-tap-highlight-color:rgba(56,189,248,0.2);
  touch-action:manipulation;
}
.export-btn:hover,.export-btn:active{background:rgba(56,189,248,0.22);border-color:var(--accent);}

/* misc */
.up{color:var(--green);}.dn{color:var(--red);}

/* ═══════════════════════════════════════════════
   TOAST NOTIFICATIONS
   ═══════════════════════════════════════════════ */
#toast{
  position:fixed;bottom:var(--sp-6);left:50%;transform:translateX(-50%) translateY(100px);
  background:var(--card2);border:1px solid var(--border2);
  color:var(--text);font-family:var(--font-body);font-size:13px;
  padding:10px 20px;border-radius:var(--r-md);z-index:2000;
  opacity:0;transition:all .3s cubic-bezier(0.16,1,0.3,1);
  pointer-events:none;box-shadow:0 8px 32px rgba(0,0,0,0.4);
  backdrop-filter:blur(8px);
}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto;}

/* ═══════════════════════════════════════════════
   MOBILE FILTER DRAWER  (< 768px only)
   ═══════════════════════════════════════════════ */
#filterbar-mobile{display:none;}
@media(max-width:767.98px){
  #filterbar-mobile{
    display:flex;align-items:center;justify-content:space-between;gap:8px;
    padding:8px var(--sp-3);background:rgba(8,14,30,0.98);
    border-bottom:1px solid var(--border);flex-shrink:0;
  }
  #filterbar-mobile .fm-label{
    font-family:var(--font-mono);font-size:12px;color:var(--text2);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;
  }
  #filterbar-mobile .fm-btn{
    background:var(--accent-dim);color:var(--accent);
    border:1px solid rgba(56,189,248,0.25);border-radius:var(--r-sm);
    padding:6px 12px;font-family:var(--font-head);font-size:11px;font-weight:700;
    letter-spacing:1.2px;cursor:pointer;white-space:nowrap;
  }
  #filterbar-mobile .fm-btn .fm-count{
    display:inline-block;background:var(--accent);color:var(--bg);
    border-radius:9px;padding:0 6px;margin-left:6px;font-size:10px;
    min-width:16px;text-align:center;
  }
  #filter-drawer #filterbar{display:none !important;}
  #filter-drawer.open #filterbar{
    display:flex !important;flex-direction:column;align-items:stretch;
    gap:10px;padding:var(--sp-4);background:var(--card);
    border-bottom:1px solid var(--border);flex-wrap:nowrap;height:auto;
  }
  #filter-drawer.open #filterbar label{
    font-size:10px;color:var(--dim);margin-top:6px;
  }
  #filter-drawer.open #filterbar select,
  #filter-drawer.open #filterbar input[type=date]{
    width:100%;max-width:none;font-size:14px;padding:10px 12px;
  }
  #filter-drawer.open #filterbar .filter-sep{display:none;}
  #filter-drawer.open #filterbar .quick-btn{
    flex:1;font-size:12px;padding:10px;letter-spacing:1px;
  }
  #filter-drawer .drawer-quick-row{
    display:flex;gap:6px;
  }
  #filter-drawer.open #clear-btn{
    margin-top:8px;padding:12px;font-size:13px;
  }
}
/* Drawer collapse behavior only on mobile; on desktop the wrapper is transparent. */
@media(max-width:767.98px){
  #filter-drawer{
    overflow:hidden;max-height:0;
    transition:max-height .22s ease-out;
  }
  #filter-drawer.open{max-height:85vh;overflow-y:auto;}
}

/* ═══════════════════════════════════════════════
   NAV TAB FADE HINT + FROZEN COLS HELPERS
   ═══════════════════════════════════════════════ */
.nav-wrap{position:relative;}
.nav-wrap::after{
  content:'';position:absolute;top:0;right:0;bottom:0;width:28px;
  background:linear-gradient(to right,rgba(12,21,40,0) 0%,rgba(12,21,40,0.98) 90%);
  pointer-events:none;opacity:0;transition:opacity .2s;
}
@media(max-width:768px){
  .nav-wrap::after{opacity:1;}
}

/* ═══════════════════════════════════════════════
   MOBILE  (≤ 768px)
   ═══════════════════════════════════════════════ */
@media(max-width:768px){
  html{overscroll-behavior-y:auto;-webkit-overflow-scrolling:touch;}
  body{overflow:visible;}
  #main{padding:var(--sp-4) var(--sp-3);}

  /* Topbar compact */
  #topbar{
    flex-wrap:wrap;height:auto;padding:8px var(--sp-3) 8px;
    gap:6px;
  }
  .logo{font-size:17px;letter-spacing:2px;}
  .logo span{display:none;}
  #status{font-size:10px;width:100%;order:3;text-align:center;}

  /* Filter bar compact */
  #filterbar{
    height:auto;padding:6px var(--sp-3);gap:6px;
    overflow-x:auto;flex-wrap:nowrap;
  }
  #filterbar label{font-size:9px;letter-spacing:1px;}
  #filterbar select{font-size:12px;padding:4px 6px;max-width:100px;}
  #filterbar input[type=date]{font-size:12px;padding:4px 6px;}
  .filter-sep{display:none;}
  .quick-btn{font-size:10px;padding:4px 8px;letter-spacing:1px;}

  /* Top nav — scrollable, prominent */
  #nav{
    padding:0 var(--sp-2);gap:0;
    background:rgba(12,21,40,0.98);
    border-bottom:1px solid var(--border);
    overflow-x:auto;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
  }
  #nav::-webkit-scrollbar{display:none;}
  .tab{
    font-size:11px;padding:11px 12px 9px;letter-spacing:1px;
    flex:0 0 auto;min-width:0;scroll-snap-align:start;
    text-align:center;
  }
  .tab.active{border-bottom:2px solid var(--accent);}

  /* Grids single column */
  .grid-2,.grid-3{grid-template-columns:1fr !important;}

  /* KPIs 2-up */
  .kpi-row{grid-template-columns:1fr 1fr;gap:6px;}
  .kpi{padding:10px 12px;border-radius:var(--r-sm);}
  .kpi-value{font-size:18px;}
  .kpi-label{font-size:9px;letter-spacing:1px;margin-bottom:4px;}
  .kpi-sub{font-size:10px;margin-top:3px;}

  /* Cards */
  .card{padding:var(--sp-3) var(--sp-4);border-radius:var(--r-sm);}
  .card-title{font-size:10px;letter-spacing:1.5px;margin-bottom:10px;padding-bottom:8px;}

  /* Tables — horizontal scroll with frozen first column */
  .tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .tbl-wrap table{min-width:560px;}
  .tbl-wrap th:first-child,
  .tbl-wrap td:first-child{
    position:sticky;left:0;z-index:2;
    background:var(--card);
    box-shadow:2px 0 4px -2px rgba(0,0,0,0.35);
  }
  .tbl-wrap thead th:first-child{z-index:3;background:rgba(8,14,30,0.98);}
  table{font-size:11px;}
  th{font-size:9px;padding:7px 6px;letter-spacing:0.5px;}
  td{padding:7px 6px;font-size:11px;}
  .rank{width:20px;font-size:11px;}
  .badge{font-size:9px;padding:2px 5px;}

  /* Charts — responsive heights via classes */
  .chart-wrap.ch-sm{height:140px !important;}   /* was 200px */
  .chart-wrap.ch-md{height:160px !important;}   /* was 220–260px */
  .chart-wrap.ch-lg{height:180px !important;}   /* was 280–320px */

  /* Pen bars */
  .pen-name{font-size:11px;}
  .pen-pct{font-size:12px;}

  /* Empty state */
  #empty h2{font-size:22px;letter-spacing:4px;}
  #empty p{font-size:13px;}
  .demo-steps{padding:var(--sp-4);}
  .step{font-size:12px;}

  /* Drill modal — full screen on mobile */
  #drill-overlay{padding:0;overflow-y:auto;-webkit-overflow-scrolling:touch;}
  #drill-box{border-radius:0;min-height:100vh;margin:0;padding:var(--sp-5) var(--sp-4) 80px;}
  #drill-title{font-size:15px;}
  #drill-close-bar{display:block;}

  /* Compare */
  .compare-select-row{grid-template-columns:1fr;}
  .compare-metric{grid-template-columns:1fr 90px 90px;gap:6px;}
  .compare-val{font-size:11px;}
  .compare-header-row{grid-template-columns:1fr 90px 90px;}

  /* Goals */
  .goals-metrics-grid{grid-template-columns:1fr 1fr;}
  .goals-brands-grid{grid-template-columns:repeat(2,1fr);}
  .goals-store-header{flex-direction:column;align-items:flex-start;gap:6px;}
  .goals-store-name{font-size:14px;}

  /* Live connect */
  #load-bar{flex-direction:column;width:100%;gap:4px;}
  #live-connect{width:100%;}

  /* Toast */
  #toast{bottom:var(--sp-5);}
}

/* ═══════════════════════════════════════════════
   SMALL PHONES  (≤ 480px) — 2-up KPI grid
   ═══════════════════════════════════════════════ */
@media(max-width:480px){
  .kpi-row{grid-template-columns:1fr 1fr !important;gap:8px;}
  .kpi{padding:12px 14px;}
  .kpi-value{font-size:20px;}
  .kpi-label{font-size:10px;}
  .goals-metrics-grid{grid-template-columns:1fr 1fr;}
  .goals-brands-grid{grid-template-columns:1fr 1fr;}
}

/* Bigger phones / small tablets  (481 – 768px) — 3-up KPI grid */
@media(min-width:481px) and (max-width:768px){
  .kpi-row{grid-template-columns:repeat(3,1fr) !important;gap:10px;}
}

/* ═══════════════════════════════════════════════
   LANDSCAPE PHONES (short + wide)
   ═══════════════════════════════════════════════ */
@media(max-height:500px) and (orientation:landscape){
  #topbar{height:40px;padding-top:0;}
  #filterbar{height:auto;min-height:34px;padding-top:4px;padding-bottom:4px;}
  #nav .tab{padding:8px 12px 6px;font-size:10px;}
  #main{padding:var(--sp-3) var(--sp-4);}
  .kpi-row{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:6px;}
  .kpi{padding:8px 10px;}
  .kpi-value{font-size:18px;}
  .kpi-label{font-size:8px;margin-bottom:3px;}
  .kpi-sub{font-size:10px;margin-top:2px;}
  .chart-wrap.ch-sm{height:130px !important;}
  .chart-wrap.ch-md{height:150px !important;}
  .chart-wrap.ch-lg{height:170px !important;}
  .card{padding:var(--sp-3) var(--sp-4);}
  .grid-2,.grid-3{gap:var(--sp-3);}
}

/* ═══════════════════════════════════════════════
   TABLETS  (769–1024px)
   ═══════════════════════════════════════════════ */
@media(min-width:769px) and (max-width:1024px){
  .kpi-row{grid-template-columns:repeat(3,1fr);}
  .grid-2{grid-template-columns:1fr;}
  #main{padding:var(--sp-4) var(--sp-5);}
}

/* ═══════════════════════════════════════════════
   LAPTOP SCREENS  (≤ 1400px)
   ═══════════════════════════════════════════════ */
@media(max-width:1400px){
  .tab{font-size:11px;padding:10px 12px 8px;letter-spacing:1px;}
  .filter-sep{display:none;}
}

/* ═══════════════════════════════════════════════
   WIDE SCREENS  (≥ 1600px)
   ═══════════════════════════════════════════════ */
@media(min-width:1600px){
  #main{padding:var(--sp-7) var(--sp-8);}
  .kpi-row{grid-template-columns:repeat(6,1fr);}
}

/* ═══════════════════════════════════════════════
   MONTH-END PACE
   ═══════════════════════════════════════════════ */
.pace-header{
  font-family:var(--font-head);font-size:11px;font-weight:800;
  letter-spacing:2.5px;color:var(--amber);text-transform:uppercase;
  display:flex;align-items:center;gap:8px;
  padding:var(--sp-3) var(--sp-2) var(--sp-1);
}
.pace-icon{font-size:14px;color:var(--amber);animation:pulsePace 2s ease-in-out infinite;}
.pace-days{
  font-family:var(--font-mono);font-size:10px;font-weight:600;
  color:var(--muted);letter-spacing:1px;margin-left:auto;
}
@keyframes pulsePace{0%,100%{opacity:0.7;}50%{opacity:1;}}
#kpi-row-pace .kpi{border-top:2px solid var(--amber-dim);}

/* ═══════════════════════════════════════════════
   PIPELINE STAGES
   ═══════════════════════════════════════════════ */
.pipe-stage{
  background:var(--card);border:1px solid var(--border);border-radius:var(--r-md);
  padding:var(--sp-4) var(--sp-5);cursor:pointer;transition:all .15s;
  display:grid;grid-template-columns:auto 1fr auto;gap:var(--sp-3);align-items:center;
  touch-action:manipulation;-webkit-tap-highlight-color:rgba(56,189,248,0.15);
}
.pipe-stage:hover,.pipe-stage:active{background:var(--card-hover);border-color:var(--border2);}
.pipe-stage-icon{font-size:22px;line-height:1;}
.pipe-stage-info{min-width:0;}
.pipe-stage-name{font-family:var(--font-head);font-size:13px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--text);margin-bottom:2px;}
.pipe-stage-sub{font-family:var(--font-mono);font-size:11px;color:var(--dim);}
.pipe-stage-count{font-family:var(--font-mono);font-size:24px;font-weight:700;color:var(--accent);text-align:right;}
.pipe-stage-rev{font-family:var(--font-mono);font-size:11px;color:var(--dim);text-align:right;}
@media(max-width:768px){
  .pipe-stage{padding:var(--sp-3) var(--sp-4);}
  .pipe-stage-count{font-size:20px;}
  .pipe-stage-name{font-size:11px;}
}

/* ═══ KPI Info Modal ═══ */
.info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid var(--muted);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  font-style: normal;
  font-family: var(--font-body);
  cursor: pointer;
  margin-left: 6px;
  vertical-align: middle;
  opacity: 0.6;
  transition: opacity 0.15s;
}
.info-icon:hover {
  opacity: 1;
  border-color: var(--accent);
  color: var(--accent);
}
.info-modal-title {
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 12px;
  letter-spacing: 0.5px;
}
.info-modal-formula {
  font-family: var(--font-mono);
  font-size: 13px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 14px;
  margin: 10px 0 14px;
  color: var(--accent);
  word-break: break-word;
}
.info-modal-text {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text2);
  margin-bottom: 12px;
}
.info-modal-benchmarks {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.info-bench {
  flex: 1;
  min-width: 80px;
  text-align: center;
  padding: 8px 6px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
}
.info-bench.green { background: rgba(34,197,94,0.12); color: #22c55e; border: 1px solid rgba(34,197,94,0.25); }
.info-bench.amber { background: rgba(245,158,11,0.12); color: #f59e0b; border: 1px solid rgba(245,158,11,0.25); }
.info-bench.red { background: rgba(239,68,68,0.12); color: #ef4444; border: 1px solid rgba(239,68,68,0.25); }
.info-bench-label { font-size: 10px; display: block; margin-top: 3px; opacity: 0.8; font-family: var(--font-body); }