:root{
  --bg:#0b1220; --surface:#121a2a; --muted:#94a3b8; --text:#e5e7eb; --accent:#22d3ee; --accent-2:#4ade80;
  --card:#0f172a; --border:#1e293b;
}
*{box-sizing:border-box}
body.bg{margin:0;background:linear-gradient(180deg,#0b1220,#0a0f1a);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial}
.container{max-width:1100px;margin:0 auto;padding:24px}
.center{display:flex;min-height:100vh;align-items:center;justify-content:center}
.topbar{display:flex;align-items:center;justify-content:space-between;background:rgba(0,0,0,0.2);backdrop-filter:blur(8px);padding:12px 20px;border-bottom:1px solid var(--border);position:sticky;top:0}
.brand{font-weight:700}
.link{color:var(--text);text-decoration:none;opacity:.9}
.card{background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01));border:1px solid var(--border);border-radius:14px;padding:18px}
.title{margin:0 0 16px}
.form label{display:block;margin:8px 0 4px;color:var(--muted)}
.form input{width:100%;padding:10px;border-radius:10px;border:1px solid var(--border);background:#0b1220;color:var(--text)}
.btn{border:0;padding:10px 14px;border-radius:10px;background:var(--accent);color:#001018;font-weight:600;cursor:pointer}
.error{color:#f87171}
.room{margin:8px 0 18px;color:var(--muted);font-weight:600}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.kpi{display:flex;flex-direction:column;gap:4px}
.kpi.accent{border-color:#0b3940;background:linear-gradient(180deg,rgba(34,211,238,.08),rgba(34,211,238,.03))}
.kpi-label{color:var(--muted);font-size:14px}
.kpi-value{font-size:38px;font-weight:800}
.filters{display:flex;gap:10px;align-items:center;margin:18px 0}
.filters select{padding:8px;border-radius:10px;background:#0b1220;border:1px solid var(--border);color:var(--text)}
.charts .card{height:420px}
@media (max-width:900px){.cards{grid-template-columns:1fr}}