:root{--bg:#0b1020;--panel:#121a33;--panel2:#172347;--txt:#e9efff;--muted:#9fb0d9;--accent:#5eead4;--pink:#f472b6;--blue:#60a5fa;--orange:#f59e0b}
*{box-sizing:border-box}body{margin:0;font-family:Inter,Segoe UI,Arial;background:radial-gradient(circle at 20% 10%,#1d2b53,#0b1020 45%);color:var(--txt)}
nav{display:flex;gap:10px;padding:16px 24px;background:rgba(10,14,30,.7);backdrop-filter: blur(8px);position:sticky;top:0;z-index:10}
nav a{color:#c7d2fe;text-decoration:none;padding:8px 14px;border-radius:12px;background:#1f2a4d;transition:.25s}nav a:hover{transform:translateY(-1px)}nav a.active{background:linear-gradient(90deg,#2563eb,#7c3aed);color:#fff}
.wrap{max-width:1250px;margin:auto;padding:18px}.hero{padding:24px;border-radius:20px;background:linear-gradient(120deg,#1e3a8a,#7c3aed 60%,#ec4899);box-shadow:0 14px 35px rgba(0,0,0,.28);margin-bottom:16px;animation:fadeUp .8s ease}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}.card{background:linear-gradient(160deg,var(--panel),var(--panel2));border:1px solid #273669;border-radius:16px;padding:16px;box-shadow:0 10px 30px rgba(0,0,0,.25);animation:fadeUp .6s ease}
.kpi{grid-column:span 3}.kpi h4{margin:0;color:var(--muted)}.kpi .v{font-size:34px;font-weight:700;margin-top:6px;transition:.25s}.kpi:hover .v{transform:scale(1.03)}
.w8{grid-column:span 8}.w4{grid-column:span 4}.w6{grid-column:span 6}.w12{grid-column:span 12}
h1,h2,h3{margin:0 0 10px}.sub{color:var(--muted);font-size:13px}
canvas{width:100%;height:320px}.pill{display:inline-block;padding:5px 10px;border-radius:999px;background:#21315e;color:#a5b4fc;font-size:12px;margin-right:6px}
li{margin:6px 0}.chips{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 0}.chip{border:1px solid #37508f;background:#1b2a53;color:#c7d2fe;padding:7px 12px;border-radius:999px;cursor:pointer}.chip.active{background:linear-gradient(90deg,#0ea5e9,#22c55e);color:#001d2f;border:none}
.chart-tip{position:absolute;display:none;background:#0f172a;color:#fff;border:1px solid #334155;padding:8px 10px;border-radius:8px;font-size:12px;pointer-events:none;z-index:999}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:980px){.kpi,.w8,.w4,.w6,.w12{grid-column:span 12}}