:root{
  --bg:#0b0f14; --fg:#eef2f7; --muted:#9aa4b2; --card:#121821; --accent:#6ee7ff;
  --btn:#1f2937; --ok:#22c55e; --warn:#f59e0b; --err:#ef4444;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu; background:var(--bg); color:var(--fg);}
a{color:var(--accent);text-decoration:none}
.wrap{max-width:1100px;margin:0 auto;padding:24px}
header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0}
h1{margin:0;font-size:clamp(1.4rem,2.2vw,2rem)}
.subtitle{color:var(--muted);font-size:.95rem}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:16px 0}
.card{background:var(--card);padding:16px;border-radius:16px;box-shadow:0 6px 24px rgba(0,0,0,.22)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 14px;border-radius:14px;background:var(--btn);border:1px solid #273244;cursor:pointer}
.btn:active{transform:translateY(1px)}
.row{display:flex;flex-wrap:wrap;gap:10px}
footer{margin-top:40px;padding:20px;border-top:1px solid #1f2937;color:var(--muted);font-size:.9rem}
.kpi{display:flex;gap:18px;flex-wrap:wrap}
.kpi .box{background:var(--card);padding:14px 16px;border-radius:14px;min-width:160px}
.controls{position:sticky;top:0;z-index:20;backdrop-filter:blur(6px);background:rgba(11,15,20,.75);border-bottom:1px solid #1f2937;padding:8px 12px}
.controls .row{gap:8px}
.tag{padding:4px 10px;border-radius:999px;border:1px solid #2a3446;color:var(--muted);font-size:.8rem}
.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:18px;align-items:center}
@media (max-width:900px){.hero{grid-template-columns:1fr}}
.contrast-on{--bg:#000;--fg:#fff;--muted:#d1d5db;--card:#000;--btn:#111;--accent:#fff}
.notice{background:#142032;border:1px dashed #273244;padding:10px;border-radius:12px}