:root { --bg:#0f1216; --card:#1a1f27; --ink:#e7ecf2; --muted:#94a3b8; --line:#2a3240; --accent:#3b82f6; --danger:#ef4444; --ok:#22c55e; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:15px/1.5 -apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
code { background:#0b0e12; padding:1px 5px; border-radius:4px; color:#cbd5e1; font-size:13px; }
.topbar { display:flex; justify-content:space-between; align-items:center; padding:14px 22px; background:#11151b; border-bottom:1px solid var(--line); }
.brand { font-weight:700; color:var(--ink); }
.who { color:var(--muted); font-size:14px; }
.wrap { max-width:980px; margin:24px auto; padding:0 18px; }
.foot { max-width:980px; margin:30px auto; padding:16px 18px; color:var(--muted); font-size:13px; border-top:1px solid var(--line); }
h1 { font-size:24px; margin:8px 0; }
h2 { font-size:18px; margin:0 0 12px; }
h3 { font-size:15px; margin:0 0 8px; }
.muted { color:var(--muted); }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:18px; margin:16px 0; }
.grid { width:100%; border-collapse:collapse; }
.grid th, .grid td { text-align:left; padding:9px 10px; border-bottom:1px solid var(--line); }
.grid th { color:var(--muted); font-weight:600; font-size:13px; }
.num { text-align:right; font-variant-numeric:tabular-nums; }
.btn, button { background:var(--accent); color:#fff; border:0; border-radius:7px; padding:7px 12px; font-size:14px; cursor:pointer; }
.btn:hover, button:hover { filter:brightness(1.08); text-decoration:none; }
button.danger { background:var(--danger); }
.inline { display:inline-block; margin:0 4px 4px 0; }
.actions form { display:inline-block; }
label { display:block; margin:10px 0; color:var(--muted); font-size:13px; }
label.check { display:flex; align-items:center; gap:8px; }
input[type=text], input[type=password], select { width:100%; max-width:340px; padding:8px 10px; background:#0b0e12; border:1px solid var(--line); border-radius:7px; color:var(--ink); }
.inline input[type=text], .inline select { width:auto; display:inline-block; }
.perms { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:4px 14px; margin:8px 0; }
.perms label.check { margin:2px 0; }
.rank { border-top:1px solid var(--line); padding:12px 0; }
.rank:first-of-type { border-top:0; }
.rank-actions { margin-top:8px; }
.tag { background:var(--ok); color:#04210f; font-size:11px; padding:1px 7px; border-radius:10px; vertical-align:middle; }
.status { font-size:12px; padding:2px 8px; border-radius:10px; text-transform:uppercase; }
.status.open { background:#1e3a8a; color:#bfdbfe; }
.status.paid { background:#064e3b; color:#a7f3d0; }
.status.void { background:#3f3f46; color:#d4d4d8; }
.alert { padding:11px 14px; border-radius:8px; margin:12px 0; }
.alert.ok { background:#06281a; color:#a7f3d0; border:1px solid #115e3a; }
.alert.err { background:#2a1212; color:#fecaca; border:1px solid #7f1d1d; }
/* login */
.login-body { display:flex; align-items:center; justify-content:center; min-height:100vh; }
.login-card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:28px; width:360px; max-width:92vw; }
.login-card h1 { font-size:20px; margin:0 0 4px; }
.login-card button { width:100%; margin-top:12px; padding:10px; }