/* tokens */
:root{
  --background:#0b0b0d; --foreground:#ececee; --muted:#8a8a92; --cream:#f5efe3;
  --surface:#141417; --surface-hover:#1c1c20; --border:#26262b;
  --success:#4ade80; --warning:#fbbf24; --error:#f87171;
  --primary:#e89038; --primary-deep:#c57820;
  --radius:14px; --radius-sm:10px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --fs-display:26px; --fs-title:15px; --fs-body:14px; --fs-label:11px;
  --elev-1:0 1px 2px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.03);
  --elev-2:0 8px 24px rgba(0,0,0,.55);
  --focus:0 0 0 2px var(--background),0 0 0 4px var(--primary);
  --chart-1:#e89038; --chart-2:#4ade80; --chart-3:#60a5fa;
  --chart-4:#f472b6; --chart-5:#facc15; --chart-6:#a78bfa;
  --card-border:color-mix(in srgb, var(--border) 100%, white 6%);
  --card-top:color-mix(in srgb, var(--surface) 100%, white 4%);
}
*{box-sizing:border-box}
:where(a,button,input,select):focus-visible{outline:none;box-shadow:var(--focus);border-radius:var(--radius-sm)}
@media (prefers-reduced-motion: no-preference){
  .tab,.toggle a,.logout button,.range a,.stat-card{transition:background .15s ease,color .15s ease,border-color .15s ease,transform .15s ease}
}

/* base */
body{margin:0;background:
   radial-gradient(130% 70% at 50% -15%, color-mix(in srgb,var(--primary) 8%,transparent), transparent 55%),
   var(--background);
   color:var(--foreground);color-scheme:dark;
   font:var(--fs-body)/1.5 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;}

/* topbar+tabs */
.topbar{display:flex;align-items:center;gap:var(--s3);height:56px;padding:0 var(--s5);border-bottom:1px solid var(--border)}
.brand{display:flex;align-items:center;gap:var(--s2)}
.brand-mark{display:block}
.wordmark{font-weight:600;letter-spacing:-0.01em}
.env-tag{font-size:var(--fs-label);text-transform:uppercase;letter-spacing:.08em;color:var(--warning);
  border:1px solid var(--border);border-radius:999px;padding:2px 8px}
.logout{margin-left:var(--s3)}
.logout button{background:none;border:1px solid var(--border);color:var(--muted);
  border-radius:var(--radius-sm);padding:6px 12px;cursor:pointer}
.logout button:hover{color:var(--foreground);border-color:var(--primary)}
/* range control */
.range{margin-left:auto;display:flex;align-items:center;gap:var(--s2)}
.range a{padding:4px 10px;border-radius:999px;color:var(--muted);font-size:13px;cursor:pointer;border:1px solid transparent}
.range a:hover{color:var(--foreground)}
.range a.on{background:var(--primary);color:#fff}
.range-cap{color:var(--muted);font-size:12px;margin-left:var(--s2);min-width:96px}
.tabs{display:flex;gap:var(--s1);padding:var(--s3) var(--s5) 0}
.tab{padding:var(--s2) var(--s3);color:var(--muted);text-decoration:none;border-bottom:2px solid transparent;
  border-radius:var(--radius-sm) var(--radius-sm) 0 0}
.tab:hover{color:var(--foreground);background:var(--surface-hover)}
.tab.active{color:var(--foreground);border-bottom-color:var(--primary)}
#panel{padding:var(--s5);max-width:1100px}

/* cards+tiles */
.tile-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3)}
@media (max-width:900px){.tile-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.tile-grid{grid-template-columns:1fr}}
.stat-card,.panel-card{background:linear-gradient(180deg,var(--card-top),var(--surface));
  border:1px solid var(--card-border);border-radius:var(--radius);box-shadow:var(--elev-1);padding:var(--s4)}
.stat-card:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--primary) 30%,var(--card-border))}
.stat-label{font-size:var(--fs-label);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.stat-value{font-size:var(--fs-display);font-weight:600;line-height:1.1;font-variant-numeric:tabular-nums;margin-top:var(--s1)}
.delta{font-size:.78rem;font-weight:600;margin-top:var(--s1)}
.delta.up{color:var(--success)} .delta.down{color:var(--error)} .delta.new{color:var(--muted)}
.panel-card{margin-top:var(--s4)}
.section-title{font-size:var(--fs-title);font-weight:600;letter-spacing:-0.01em;margin:0 0 var(--s3)}

/* sparkline */
.spark-row{margin-top:var(--s2);height:24px}
.spark{width:100%;height:24px;display:block;opacity:.85}

/* toggles */
.toggle{display:inline-flex;gap:2px;background:var(--surface-hover);border-radius:999px;padding:3px;margin-bottom:var(--s3)}
.toggle a{padding:4px 12px;border-radius:999px;color:var(--muted);text-decoration:none;font-size:13px;cursor:pointer}
.toggle a:hover{color:var(--foreground)}
.toggle a.on{background:var(--primary);color:#fff}
.toggle-label{color:var(--muted);font-size:12px;align-self:center;padding:0 6px}

/* bars+funnel */
.bar-row{display:grid;grid-template-columns:140px 1fr 56px;align-items:center;gap:var(--s2);margin:6px 0}
.bar-label{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar-track{background:var(--surface-hover);border-radius:999px;height:10px;overflow:hidden}
.bar-fill{display:block;height:10px;background:var(--primary)}
.bar-value{text-align:right;font-variant-numeric:tabular-nums}
.funnel{display:flex;flex-direction:column;gap:var(--s3);padding:var(--s3) 0;max-width:560px;margin:0 auto}
.funnel-step{display:flex;flex-direction:column;align-items:center;gap:4px}
.funnel-meta{display:flex;justify-content:space-between;width:100%;font-variant-numeric:tabular-nums;font-size:13px}
.funnel-meta .funnel-label{font-weight:600}
.funnel-meta .muted{color:var(--muted)}
.funnel-bar{height:30px;align-self:center;min-width:8px;border-radius:var(--radius-sm);
  background:linear-gradient(180deg,var(--primary),var(--primary-deep))}
.funnel-drop{color:var(--muted);font-size:12px}

/* tables+heatmap */
table.data{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
table.data th,table.data td{padding:8px var(--s3);text-align:right;border-bottom:1px solid var(--border)}
table.data th{color:var(--muted);font-weight:500;font-size:var(--fs-label);text-transform:uppercase;letter-spacing:.05em}
table.data th.l,table.data td.l{text-align:left}
.rate-chip{display:inline-block;min-width:44px;padding:2px 8px;border-radius:999px;
  background:color-mix(in srgb,var(--primary) 18%,transparent);color:var(--primary);font-weight:600}
table.heatmap{border-collapse:separate;border-spacing:0;font-variant-numeric:tabular-nums}
table.heatmap th,table.heatmap td{padding:6px 10px;text-align:center;font-size:13px}
table.heatmap thead th{position:sticky;top:0;background:var(--surface);color:var(--muted);font-weight:500;z-index:2}
table.heatmap tbody td:first-child{position:sticky;left:0;background:var(--surface);text-align:left;z-index:1}
td.heat{border-radius:6px}
.heat-legend{display:flex;align-items:center;gap:4px;color:var(--muted);font-size:12px;margin-bottom:var(--s3)}
.heat-swatch{width:22px;height:12px;border-radius:3px;display:inline-block}

/* charts */
.chart-host{position:relative;width:100%}
.chart-legend{display:flex;flex-wrap:wrap;gap:var(--s3);margin-bottom:var(--s2);font-size:12px;color:var(--muted)}
.chart-legend .lg{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.chart-legend .lg:hover{color:var(--foreground)}
.chart-legend i,.chart-tip i{width:10px;height:10px;border-radius:2px;display:inline-block}
.chart-tip{position:absolute;z-index:5;pointer-events:none;background:var(--surface);
  border:1px solid var(--card-border);border-radius:var(--radius-sm);box-shadow:var(--elev-2);
  padding:var(--s2) var(--s3);font-size:12px;font-variant-numeric:tabular-nums}
.chart-tip .t-date{color:var(--muted);margin-bottom:4px}
.chart-tip div{display:flex;align-items:center;gap:6px}

/* states */
.panel-empty{color:var(--muted);padding:var(--s6);text-align:center}
.panel-empty .brand-mark{opacity:.4;margin-bottom:var(--s2)}
.panel-error{color:var(--error);padding:var(--s4);border:1px solid color-mix(in srgb,var(--error) 30%,transparent);border-radius:var(--radius-sm)}
.panel-loading{height:2px;opacity:0;transition:opacity .12s ease;
  background:linear-gradient(90deg,transparent,var(--primary),transparent);background-size:200% 100%}
.od-loading .panel-loading{opacity:1;animation:od-load 1s linear infinite}
@keyframes od-load{from{background-position:200% 0}to{background-position:-200% 0}}

/* login */
.login-wrap{max-width:320px;margin:80px auto;padding:var(--s5)}
.login-wrap input{width:100%;margin:6px 0;padding:10px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--foreground)}
.login-wrap button{width:100%;margin-top:10px;padding:10px;background:var(--primary);
  color:#fff;border:none;border-radius:var(--radius-sm);cursor:pointer}
.login-err{color:var(--error);font-size:13px}