:root { --bg:#0b0c10; --card:#121318; --muted:#1b1d25; --text:#e6e6e6; --acc:#58a6ff; }
* { box-sizing: border-box; }
html,body { margin:0; padding:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; background: var(--bg); color: var(--text); }
a { color: var(--acc); text-decoration: none; }
header, footer { background: var(--card); padding: 12px 16px; display:flex; align-items:center; justify-content:space-between; }
.brand { font-weight:700; }
main { padding: 16px; }
.card { background: var(--card); padding:16px; border-radius:12px; box-shadow:0 2px 12px rgba(0,0,0,.25); margin-bottom: 16px; }
.grid { display:grid; gap:16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
input, select, textarea, button { width:100%; padding:10px; border-radius:8px; border:1px solid var(--muted); background:#0f1116; color:var(--text); }
button { cursor:pointer; }
.flash { padding:10px; border-radius:8px; margin:12px 0; }
.flash.info { background:#0f2a42; }
.flash.success { background:#143d2a; }
.flash.error { background:#421616; }
.table { width:100%; border-collapse: collapse; }
.table th, .table td { border-bottom:1px solid var(--muted); padding:8px; text-align:left; }
.badge { display:inline-block; padding:2px 8px; border-radius:999px; background: var(--muted); font-size:12px; }
form.inline { display:flex; gap:8px; align-items:center; }
.small { font-size:12px; opacity:.8; }
.center { text-align:center; }