@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&display=swap');
* { box-sizing: border-box; }
body { font-family: 'Inter', sans-serif; background-color: #f8fafc; color: #1e293b; margin: 0; padding: 0; }

/* ── Shared ── */
.kpi-card { background: white; border-radius: 16px; padding: 20px; border: 1px solid #f1f5f9; position: relative; box-shadow: 0 1px 3px rgba(0,0,0,0.02); transition: all 0.2s; }
.kpi-card:hover { transform: translateY(-2px); box-shadow: 0 10px 15px -3px rgba(0,0,0,0.05); }
.up-good   { color: #ef4444; }
.down-bad  { color: #22c55e; }
.up-bad    { color: #22c55e; }
.down-good { color: #ef4444; }

/* ── Tabs ── */
.tab-nav { display: flex; gap: 2px; background: #f1f5f9; border-radius: 10px; padding: 4px; width: fit-content; margin-bottom: 24px; }
.tab-btn { padding: 6px 18px; border-radius: 7px; font-size: 12px; font-weight: 700; cursor: pointer; border: none; background: transparent; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.05em; transition: all 0.15s; }
.tab-btn.active { background: white; color: #1e293b; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }

.tab-page { display: none; }
.tab-page.active { display: block; }

/* ── Overview page ── */
.badge { font-size: 11px; font-weight: 900; }

/* ── Product page ── */
.kpi-label { font-size: 10px; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; }
.kpi-val   { font-size: 26px; font-weight: 900; color: #1e293b; }
.p-card    { background: white; border-radius: 16px; padding: 18px; border: 1px solid #f1f5f9; }

.funnel-row      { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.funnel-label    { font-size: 11px; font-weight: 700; color: #64748b; width: 72px; text-align: right; flex-shrink: 0; }
.funnel-bar-wrap { flex: 1; display: flex; align-items: center; height: 34px; position: relative; }
.funnel-bar      { height: 100%; border-radius: 0 4px 4px 0; display: flex; align-items: center; justify-content: flex-end; padding-right: 10px; }
.funnel-val      { font-size: 12px; font-weight: 900; color: white; white-space: nowrap; }
.funnel-rate     { font-size: 10px; color: #94a3b8; font-weight: 700; margin-left: 4px; }
.funnel-delta    { width: 56px; font-size: 10px; font-weight: 900; text-align: right; flex-shrink: 0; }

.product-row { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 8px; cursor: pointer; margin-bottom: 2px; transition: background 0.1s; }
.product-row:hover    { background: #f8fafc; }
.product-row.selected { background: #fef2f2; }
.product-dot  { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.product-info { flex: 1; min-width: 0; }
.product-name { font-size: 11px; font-weight: 700; color: #475569; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.product-name.active { color: #ef4444; }
.product-rev  { font-size: 10px; font-weight: 900; color: #94a3b8; font-family: monospace; }