:root { --bg:#0f172a; --card:#1e293b; --fg:#e2e8f0; --muted:#94a3b8; --accent:#38bdf8; --danger:#f87171; --border:#334155; }
* { box-sizing:border-box; }
body { margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif; background:var(--bg); color:var(--fg); }
a { color:var(--accent); text-decoration:none; }
.container { max-width:960px; margin:0 auto; padding:24px; }
.card { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:24px; }
.center { max-width:420px; margin:8vh auto; }
h1,h2 { margin-top:0; }
label { display:block; margin:12px 0 4px; color:var(--muted); font-size:14px; }
input,select { width:100%; padding:10px; border-radius:8px; border:1px solid var(--border); background:#0b1220; color:var(--fg); }
button { margin-top:16px; padding:10px 16px; border:0; border-radius:8px; background:var(--accent); color:#04283a; font-weight:600; cursor:pointer; }
button.secondary { background:transparent; border:1px solid var(--border); color:var(--fg); }
.alert { padding:10px 12px; border-radius:8px; margin-bottom:12px; }
.alert-error { background:rgba(248,113,113,.15); border:1px solid var(--danger); color:#fecaca; }
.alert-ok { background:rgba(56,189,248,.12); border:1px solid var(--accent); color:#bae6fd; }
table { width:100%; border-collapse:collapse; margin-top:12px; }
th,td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--border); }
nav.top { display:flex; gap:16px; padding:12px 24px; background:var(--card); border-bottom:1px solid var(--border); align-items:center; }
nav.top .spacer { flex:1; }
.muted { color:var(--muted); }
.row { display:flex; gap:12px; align-items:center; }
code { background:#0b1220; padding:2px 6px; border-radius:6px; }