
:root { --bg:#0f1219; --card:#171b26; --line:#2a3142; --text:#e8e4da; --dim:#9a968b; --gold:#e8c478; --red:#e4685a; --green:#58d68d; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:16px/1.5 "Segoe UI",system-ui,sans-serif; }
a { color:var(--gold); }
header { display:flex; flex-wrap:wrap; gap:6px 18px; align-items:center; padding:12px 20px; border-bottom:1px solid var(--line); background:var(--card); }
header b { color:var(--gold); margin-right:10px; }
header a { text-decoration:none; color:var(--text); }
header a.on { color:var(--gold); }
header form { margin-left:auto; }
main { max-width:1180px; margin:0 auto; padding:22px 16px 60px; }
h1 { font-size:24px; margin:0 0 16px; }
h2 { font-size:18px; margin:26px 0 10px; color:var(--gold); }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:14px 16px; }
.card b { display:block; font-size:24px; color:var(--gold); }
.card small { color:var(--dim); }
.wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; background:var(--card); border-radius:10px; }
th { text-align:left; color:var(--dim); font-size:13px; }
th,td { padding:8px 10px; border-bottom:1px solid var(--line); vertical-align:top; }
input,select,textarea { background:#0b0e14; color:var(--text); border:1px solid var(--line); border-radius:6px; padding:7px 9px; font:inherit; max-width:100%; }
label { display:block; margin:10px 0 3px; color:var(--dim); font-size:14px; }
.row { display:flex; flex-wrap:wrap; gap:12px; align-items:end; }
.row label { margin-top:0; }
button { background:var(--gold); color:#1b1408; border:0; border-radius:6px; padding:8px 14px; font:600 15px inherit; cursor:pointer; }
button.ghost { background:none; color:var(--gold); border:1px solid var(--gold); }
button.bad { background:var(--red); color:#fff; }
form.inline { display:inline; }
.msg { padding:10px 14px; border-radius:8px; background:#1d2a20; border:1px solid var(--green); margin-bottom:14px; }
.msg.err { background:#2c1b1a; border-color:var(--red); }
.dim { color:var(--dim); }
.tag { font-size:13px; border:1px solid var(--line); border-radius:99px; padding:1px 9px; white-space:nowrap; }
.tag.on { color:var(--green); border-color:var(--green); }
.tag.bad { color:var(--red); border-color:var(--red); }
.login { max-width:340px; margin:12vh auto; }
.login input { width:100%; }
.login button { width:100%; margin-top:14px; }
