:root{
  --bg:#0b0906; --bg2:#120d08; --surface:#171009; --surface2:#1e1509;
  --gold:#d8a441; --gold-l:#ffd982; --gold-d:#8a5c16;
  --text:#f6e8c8; --text2:#c6b48b; --muted:#82745a;
  --border:#4b351a; --danger:#ff4d4d; --ok:#48c774; --online:#35d07f;
}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:radial-gradient(1200px 600px at 20% -10%,#2a1c0d,#0b0906 60%);color:var(--text);min-height:100vh}
a{color:var(--gold-l);text-decoration:none}
a:hover{text-decoration:underline}
code{background:#0006;padding:1px 6px;border-radius:6px;color:var(--gold-l);font-size:.85em}

/* Top bar */
.topbar{display:flex;align-items:center;gap:24px;padding:14px 22px;
  background:#0f0b07cc;border-bottom:1px solid var(--gold-d);position:sticky;top:0;z-index:10;backdrop-filter:blur(6px)}
.brand{font-weight:900;font-size:20px;color:var(--gold-l)}
.brand span{color:var(--text2);font-weight:700}
.brand.big{font-size:26px;margin-bottom:18px;text-align:center}
.topbar nav{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap}
.topbar nav a{padding:8px 14px;border-radius:10px;color:var(--text);font-weight:700}
.topbar nav a.active{background:#d8a4412a;color:var(--gold-l);border:1px solid var(--gold-d)}
.topbar nav a.logout{color:var(--danger)}

.wrap{max-width:1180px;margin:26px auto;padding:0 20px}
h1{font-size:26px;margin:0 0 18px}
h2{font-size:17px;margin:0 0 14px;color:var(--gold-l)}

/* Cards */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:24px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:18px}
.card .num{font-size:34px;font-weight:900;color:var(--gold-l)}
.card .lbl{color:var(--text2);font-weight:700;margin:4px 0 8px}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.panel{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:18px;margin-bottom:18px}

/* Tables */
table{width:100%;border-collapse:collapse;font-size:14px}
table.wide{font-size:13px}
th{text-align:left;color:var(--text2);font-weight:800;padding:8px 6px;border-bottom:1px solid var(--border)}
td{padding:6px;border-bottom:1px solid #2a1e10;vertical-align:middle}
td.center{text-align:center}
.muted{color:var(--muted)}
.small{font-size:12px}
tr form{display:contents}

/* Inputs */
input,select{background:var(--surface2);border:1px solid var(--border);color:var(--text);
  border-radius:9px;padding:8px 10px;font-size:14px;font-weight:700;font-family:inherit}
input:focus,select:focus{outline:none;border-color:var(--gold)}
label.chk{display:inline-flex;align-items:center;gap:6px;color:var(--text2);font-weight:700}
button{background:#d8a4412a;border:1px solid var(--gold);color:var(--gold-l);font-weight:900;
  padding:9px 16px;border-radius:10px;cursor:pointer;font-family:inherit}
button:hover{background:#d8a44145}
button.mini{padding:5px 10px;font-size:12px}
button.danger{border-color:var(--danger);color:var(--danger);background:#ff4d4d1a}
.actions{white-space:nowrap;display:flex;gap:6px;align-items:center}

.rowform{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.search{display:flex;gap:8px;margin-bottom:16px}
.toolbar{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.toolbar form{display:inline}
.clear{align-self:center;color:var(--muted)}

.rowbanned{background:#ff4d4d12}
.rowbanned input{border-color:#ff4d4d55}
.rowflagged{background:#ffc85712}

.pill{padding:2px 10px;border-radius:999px;font-size:12px;font-weight:800;border:1px solid var(--border)}
.pill.waiting{color:var(--gold-l);border-color:var(--gold-d)}
.pill.playing{color:var(--online);border-color:var(--online)}
.pill.finished{color:var(--muted)}

.flash{background:#d8a4411a;border:1px solid var(--gold-d);color:var(--gold-l);
  padding:12px 14px;border-radius:12px;margin-bottom:16px;font-weight:700}
.flash.err{background:#ff4d4d1a;border-color:var(--danger);color:#ff9a9a}

.foot{text-align:center;color:var(--muted);padding:30px;font-size:13px}

/* Login */
.login-body{display:flex;align-items:center;justify-content:center;min-height:100vh}
.login-card{background:var(--surface);border:1px solid var(--gold-d);border-radius:22px;
  padding:34px;width:360px;display:flex;flex-direction:column;gap:12px;box-shadow:0 20px 60px #000a}
.login-card label{color:var(--text2);font-weight:800}
.login-card input{padding:12px}
.login-card button{padding:13px;font-size:16px}
.login-card .hint{color:var(--muted);font-size:12px;text-align:center;margin:4px 0 0}

@media(max-width:900px){.cards{grid-template-columns:repeat(2,1fr)}.grid2{grid-template-columns:1fr}}