:root{--bg:#0b0f19;--panel:#121826;--muted:#8aa0b5;--text:#e6eef8;--brand:#4f8cff;--accent1:#00d2ff;--accent2:#3346d3;--accent3:#f94f58;--accent4:#f99c4e}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:'Outfit',system-ui,-apple-system,Segoe UI,Roboto}
.topbar{display:flex;align-items:center;justify-content:space-between;background:var(--panel);padding:14px 18px;border-bottom:1px solid #1e2535;position:sticky;top:0;z-index:20}
.topbar .brand a{color:var(--text);text-decoration:none;font-weight:700}
.btn{background:#1c2333;color:var(--text);padding:8px 14px;border-radius:12px;text-decoration:none;border:1px solid #2a354d}
.container{padding:22px}
.grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:16px}
.card{background:var(--panel);border:1px solid #1e2535;border-radius:16px;padding:16px}
.card.tall{grid-row:span 2}
.card-header h3{margin:0 0 8px 0;font-weight:600}
#chart-polar,#chart-donut,#chart-pie{min-height:360px}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:18px}
.kpi{background:var(--panel);border:1px solid #1e2535;border-radius:16px;padding:16px}
.kpi .title{color:var(--muted);font-size:12px;margin-bottom:6px}
.kpi .value{font-size:22px;font-weight:700}
.login-wrap{display:grid;place-items:center;min-height:70vh}
.login-card{background:var(--panel);border:1px solid #1e2535;border-radius:16px;padding:22px;min-width:320px;max-width:360px}
.login-card h2{margin:0 0 12px 0}
.login-card input{width:100%;padding:10px;border-radius:10px;border:1px solid #24304a;background:#0e1422;color:var(--text);margin-bottom:10px}
.login-card .alert{background:#291a1c;border:1px solid #4c2a2e;color:#ffb2b7;border-radius:10px;padding:10px;margin-bottom:10px}
.footer{color:#5f728a;text-align:center;padding:20px}
@media(max-width:1200px){.grid{grid-template-columns:1fr}.card.tall{grid-row:auto} .kpis{grid-template-columns:repeat(2,1fr)}}