:root{
  --bg:#0d0f16; --ink:#0f172a; --card:#ffffff; --muted:#6b7280;
  --brand:#f59e0b; --accent:#7c3aed; --ok:#16a34a; --warn:#f59e0b; --bad:#dc2626;
  --shadow:0 6px 30px rgba(17,24,39,.12); --radius:18px;
}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,'Noto Sans',sans-serif;background:linear-gradient(140deg,#0d0f16,#111a2b 60%,#0d0f16);color:#0b1324}
.page{max-width:1120px;margin:32px auto;padding:0 18px}
.header{display:flex;align-items:center;justify-content:space-between;gap:16px;background:linear-gradient(180deg,rgba(124,58,237,.12),rgba(255,255,255,0));border:1px solid rgba(124,58,237,.18);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow);backdrop-filter:blur(6px)}
.brand{display:flex;align-items:center;gap:14px}
.logo{height:38px}
.title h1{font-size:22px;margin:0 0 2px;font-weight:800;letter-spacing:.2px}
.muted{color:var(--muted)}
.actions{display:flex;align-items:center;gap:10px}
.badge{padding:8px 12px;border-radius:999px;font-weight:600;font-size:12px;color:white}
.badge.green{background:linear-gradient(135deg,#10b981,#059669)}
.btn{background:linear-gradient(135deg,var(--accent),#9b5cfb);color:white;border:none;padding:10px 14px;border-radius:12px;font-weight:700;cursor:pointer;box-shadow:0 10px 24px rgba(124,58,237,.35)}
.card{background:var(--card);border:1px solid #e5e7eb;border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}
.summary h2{margin:0 0 8px}
.cols-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:18px 0}
.kpi{padding:14px}.kpi-label{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}.kpi-value{font-size:26px;font-weight:800}
.cards-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:18px 0}
h3{margin:0 0 10px}
table{width:100%;border-collapse:collapse;font-size:14px} th,td{border-bottom:1px solid #eef2f7;padding:10px 12px;text-align:left}
th{color:#374151;font-weight:700;background:#f8fafc}
.chart{height:260px;position:relative;border-radius:12px;border:1px dashed #e5e7eb;display:flex;align-items:center;justify-content:center}
.chart .grid{position:absolute;inset:0;background:repeating-linear-gradient(to right,#f3f4f6,#f3f4f6 1px,transparent 1px,transparent 60px),repeating-linear-gradient(to bottom,#f3f4f6,#f3f4f6 1px,transparent 1px,transparent 40px);border-radius:12px}
.chart .hint{position:absolute;bottom:6px;right:10px;color:#9ca3af;font-size:12px}
.chart-bars .bars{display:flex;align-items:flex-end;gap:20px;z-index:1}
.chart-bars .bars div{width:30px;background:#111827;border-radius:8px}
.review{border-bottom:1px dashed #e5e7eb;padding:10px 0}.review:last-child{border-bottom:none}
.row{display:flex;align-items:center;gap:8px}
.stars{color:#fbbf24;font-weight:700}.stars.bad{color:#fb7185}
.pill{display:inline-block;margin-top:6px;font-size:12px;padding:4px 8px;border-radius:999px;background:#eef2ff;color:#4f46e5}
.pill.ok{background:#ecfdf5;color:#065f46}.pill.warn{background:#fff7ed;color:#9a3412}
.footer{margin:22px 0;text-align:center}
@media (max-width:900px){.cols-2{grid-template-columns:1fr}.cards-2{grid-template-columns:1fr}.kpi-grid{grid-template-columns:1fr 1fr}}


/* --- Header readability tweaks --- */
.header{
  color:#fff;
  background: radial-gradient(1000px 240px at 20% -40%, rgba(124,58,237,.45), rgba(124,58,237,.15)) , linear-gradient(180deg, rgba(7,9,15,.9), rgba(7,9,15,.65));
  border:1px solid rgba(124,58,237,.25);
}
.header .title h1{ color:#fff; text-shadow: 0 1px 0 rgba(0,0,0,.25); }
.header .muted{ color: rgba(255,255,255,.8); }

.brand-chip{
  background:#fff; padding:6px 10px; border-radius:12px; box-shadow: 0 6px 20px rgba(0,0,0,.18);
  display:flex; align-items:center;
}
.logo{ height:32px } /* shrink a bit on the chip */


/* --- Icons --- */
.ico{ width:16px; height:16px; vertical-align:-2px; margin-right:6px; color: var(--accent); }
.header .ico{ color: #fff; opacity:.9; }
.kpi .ico{ color: var(--brand); }
.card h3 .ico{ color: var(--accent); }


/* --- Gradient borders & glow --- */
.card{ position: relative; overflow: hidden; }
.card::before{
  content:""; position:absolute; inset:0; border-radius: var(--radius);
  padding:1px; background: linear-gradient(135deg, color-mix(in oklab, var(--accent) 40%, transparent), color-mix(in oklab, var(--brand) 32%, transparent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events:none;
}
.card{ box-shadow: var(--shadow), 0 0 0 1px rgba(149, 156, 169, 0.12) inset; }

.btn{
  background: linear-gradient(135deg, color-mix(in oklab, var(--accent) 90%, #fff 10%), color-mix(in oklab, var(--accent) 70%, var(--brand) 30%));
  box-shadow: 0 10px 24px color-mix(in oklab, var(--accent) 35%, transparent), 0 2px 0 rgba(0,0,0,.1) inset;
}
.badge.green{ box-shadow: 0 8px 20px rgba(16,185,129,.35); }

/* KPI label icons */
.kpi .ico{ color: var(--brand); }


/* --- Glossy header upgrades --- */
.header{
  background:
    radial-gradient(1200px 360px at 20% -60%, color-mix(in oklab, var(--accent) 40%, transparent), transparent 60%),
    linear-gradient(180deg, rgba(7,9,15,.92), rgba(7,9,15,.7));
  border:1px solid color-mix(in oklab, var(--accent) 38%, transparent);
}
.brand-chip{ position: relative; }
.brand-chip::after{
  content:""; position:absolute; inset:-8px; border-radius:16px; filter: blur(14px);
  background: radial-gradient(120px 40px at 10% 50%, color-mix(in oklab, var(--brand) 55%, transparent), transparent 60%);
  pointer-events:none; z-index:-1;
}


/* --- Light mode --- */
body.light{
  background: linear-gradient(140deg, #f7f7fb, #eef2ff 60%, #f7f7fb);
  color:#0b1324;
}
body.light .header{
  background:
    radial-gradient(900px 320px at 25% -50%, color-mix(in oklab, var(--accent) 18%, transparent), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.9), rgba(248,250,252,.85));
  border:1px solid rgba(124,58,237,.18);
  color:#0b1324;
}
body.light .header .title h1{ color:#0b1324; text-shadow:none; }
body.light .header .muted{ color:#475569; }
body.light .card::before{
  background: linear-gradient(135deg, color-mix(in oklab, var(--accent) 26%, transparent), color-mix(in oklab, var(--brand) 24%, transparent));
}
body.light th{ background:#eef2ff }