:root {
  --bg:#0b0c10; --fg:#e9ecf1; --muted:#8a93a6; --border:#1f2330;
  --card:#11141c; --primary:#ffd400; --primary-fg:#0b0c10; --danger:#ef4444;
  --font-display: ui-sans-serif, system-ui, -apple-system, Segoe UI, Inter, sans-serif;
}
* { box-sizing:border-box }
html,body { margin:0; background:var(--bg); color:var(--fg); font-family:var(--font-display); }
a { color:var(--primary); text-decoration:none }
.muted { color:var(--muted); font-size:.9rem }
.container { max-width: 1080px; margin: 24px auto; padding: 0 16px; display:grid; gap:16px }

.topbar { display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--border); background:var(--card) }
.brand { font-weight:800; letter-spacing:.5px; color:var(--primary) }
.spacer { flex:1 }
.btn-sm, button { background:var(--primary); color:var(--primary-fg); border:0; padding:6px 12px; border-radius:6px; font-weight:600; cursor:pointer }
.btn-sm { background:transparent; color:var(--fg); border:1px solid var(--border) }

.card { background:var(--card); border:1px solid var(--border); border-radius:10px; padding:16px }
.card h1, .card h2 { margin: 0 0 12px }
.card label { display:block; margin: 8px 0; font-size:.85rem; color:var(--muted) }
.card input, .card select { width:100%; padding:8px 10px; background:#0b0c10; color:var(--fg); border:1px solid var(--border); border-radius:6px; font-size:14px }
.row { display:flex; gap:8px; align-items:center }
.row input { flex:1 }
.grid { display:grid; grid-template-columns: 2fr 1.5fr 1.5fr 1fr auto; gap:8px }
.err { background:#3b1112; color:#ffd5d5; padding:8px 10px; border-radius:6px; margin-bottom:8px; font-size:.9rem }
.flash { background:#0e2a14; color:#c8f0c8; padding:10px 12px; border-radius:6px; border:1px solid #1e4a28 }

body.auth { display:flex; min-height:100vh; align-items:center; justify-content:center }
body.auth .card { width: 360px }

table.users { width:100%; border-collapse:collapse; font-size:14px }
table.users th, table.users td { padding:8px; border-bottom:1px solid var(--border); text-align:left }
.badge { padding:2px 8px; border-radius:999px; font-size:.75rem; background:#222 }
.badge.role-superadmin { background:#5a1; color:#012 }
.badge.role-admin { background:#37f; color:#fff }