:root { --bg:#0f1419; --card:#1a212b; --line:#2a3340; --fg:#e6edf3; --muted:#8b98a5; --accent:#3b82f6; --danger:#ef4444; }
* { box-sizing: border-box; }
body { margin:0; font:14px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif; background:var(--bg); color:var(--fg); }

.topbar { display:flex; align-items:center; gap:.5rem; padding:.6rem 1rem; background:var(--card); border-bottom:1px solid var(--line); position:sticky; top:0; }
.brand { font-weight:700; }
.spacer { flex:1; }
.user { color:var(--muted); }
.topbar select, .topbar button, .btn { background:#222c38; color:var(--fg); border:1px solid var(--line); border-radius:6px; padding:.35rem .6rem; text-decoration:none; cursor:pointer; }

main { padding:1rem; max-width:1100px; margin:0 auto; display:flex; flex-direction:column; gap:1rem; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:1rem; }
.card h3 { margin:0 0 .6rem; font-size:.95rem; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.charts { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.charts canvas { max-height:240px; }
@media (max-width:760px){ .charts { grid-template-columns:1fr; } }

table { width:100%; border-collapse:collapse; }
th, td { text-align:left; padding:.4rem .5rem; border-bottom:1px solid var(--line); font-variant-numeric:tabular-nums; }
th { color:var(--muted); font-weight:600; }

.tag { display:inline-block; background:#222c38; border:1px solid var(--line); border-radius:4px; padding:0 .4rem; margin:0 .2rem .2rem 0; font-size:.85em; }
.muted { color:var(--muted); }
.danger { border-color:var(--danger); color:var(--danger); }
.danger[disabled]{ opacity:.4; cursor:not-allowed; }

.login-page { display:grid; place-items:center; min-height:100vh; }
.login-card { width:320px; display:flex; flex-direction:column; gap:.6rem; }
.login-card h1 { margin:0; font-size:1.3rem; }
.login-card label, .form-grid label { display:flex; flex-direction:column; gap:.25rem; font-size:.85rem; color:var(--muted); }
.login-card input, .form-grid input, .form-grid select { background:#222c38; color:var(--fg); border:1px solid var(--line); border-radius:6px; padding:.45rem; }
button[type=submit] { background:var(--accent); color:#fff; border:none; border-radius:6px; padding:.55rem; cursor:pointer; font-weight:600; }
.error { background:#3a1d1d; border:1px solid var(--danger); color:#fca5a5; padding:.5rem; border-radius:6px; }
.success { background:#14321f; border:1px solid #22c55e; color:#86efac; padding:.5rem; border-radius:6px; }
.form-grid { display:flex; flex-direction:column; gap:.7rem; max-width:480px; }
.nsctl { display:flex; align-items:center; gap:.6rem; }
.nsctl button { background:#222c38; color:var(--fg); border:1px solid var(--line); border-radius:6px; padding:.35rem .8rem; cursor:pointer; }
.nsctl button.danger { border-color:var(--danger); color:var(--danger); }
.inline-form { display:flex; gap:.3rem; align-items:center; }
.inline-form input { background:#222c38; color:var(--fg); border:1px solid var(--line); border-radius:6px; padding:.3rem .4rem; width:130px; }
table button { background:#222c38; color:var(--fg); border:1px solid var(--line); border-radius:6px; padding:.3rem .6rem; cursor:pointer; }
table button.danger { border-color:var(--danger); color:var(--danger); }