:root { --bg:#0A0F1A; --card:#121A2B; --line:#22304A; --text:#E8EDF7; --muted:#8FA0BC; --gold:#D4AF55; --blue:#3B6FE0; --bad:#E5645F; --ok:#4FBF86; }
@media (prefers-color-scheme: light) { :root { --bg:#F4F6FA; --card:#FFFFFF; --line:#DDE3EE; --text:#14213A; --muted:#5B6A85; --gold:#9A7416; --blue:#245BD6; --bad:#C0392B; --ok:#1E8E5A; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:15px/1.5 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
header { display:flex; align-items:center; gap:14px; padding:14px 22px; border-bottom:1px solid var(--line); background:var(--card); position:sticky; top:0; z-index:5; }
header h1 { font-size:16px; letter-spacing:.18em; margin:0; color:var(--gold); }
header .who { margin-left:auto; color:var(--muted); font-size:13px; }
nav { display:flex; gap:4px; padding:0 22px; border-bottom:1px solid var(--line); background:var(--card); overflow-x:auto; }
nav button { background:none; border:0; color:var(--muted); padding:12px 14px; cursor:pointer; font:inherit; border-bottom:2px solid transparent; white-space:nowrap; }
nav button.on { color:var(--text); border-color:var(--gold); }
main { max-width:1100px; margin:0 auto; padding:22px; }
h2 { font-size:18px; margin:0 0 14px; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; margin-bottom:22px; }
.stat, .card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px 16px; }
.stat b { display:block; font-size:26px; }
.stat span { color:var(--muted); font-size:13px; }
.card { margin-bottom:14px; }
table { width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden; font-size:14px; }
th, td { text-align:left; padding:9px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
th { color:var(--muted); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.06em; }
tr:last-child td { border-bottom:0; }
tr.click { cursor:pointer; }
tr.click:hover td { background:rgba(128,128,128,.08); }
.wrap { overflow-x:auto; }
input, textarea, select { width:100%; background:var(--bg); color:var(--text); border:1px solid var(--line); border-radius:8px; padding:10px 12px; font:inherit; }
textarea { min-height:90px; resize:vertical; }
label { display:block; color:var(--muted); font-size:13px; margin:12px 0 5px; }
button.btn { background:var(--blue); color:#fff; border:0; border-radius:8px; padding:10px 16px; font:inherit; cursor:pointer; }
button.btn.quiet { background:transparent; color:var(--text); border:1px solid var(--line); }
button.btn.bad { background:var(--bad); }
button.btn.gold { background:var(--gold); color:#14213A; }
button.btn:disabled { opacity:.5; cursor:default; }
.row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.pill { display:inline-block; padding:1px 9px; border-radius:99px; font-size:12px; border:1px solid var(--line); color:var(--muted); }
.pill.ok { color:var(--ok); border-color:var(--ok); } .pill.gold { color:var(--gold); border-color:var(--gold); }
.muted { color:var(--muted); }
.msg { margin:10px 0; padding:10px 12px; border-radius:8px; background:rgba(128,128,128,.12); }
.msg.bad { color:var(--bad); } .msg.ok { color:var(--ok); }
.login { max-width:380px; margin:12vh auto; padding:22px; }
.login h1 { text-align:center; letter-spacing:.2em; color:var(--gold); font-size:22px; margin:0 0 4px; }
.login p { text-align:center; color:var(--muted); margin:0 0 22px; }
.login .btn { width:100%; margin-top:10px; }
.sheet { position:fixed; inset:0; background:rgba(0,0,0,.55); display:flex; justify-content:flex-end; z-index:20; }
.sheet > div { width:min(460px,100%); height:100%; overflow:auto; background:var(--bg); border-left:1px solid var(--line); padding:20px; }
.kv { display:grid; grid-template-columns:130px 1fr; gap:6px 12px; font-size:14px; margin:12px 0; }
.kv span:nth-child(odd) { color:var(--muted); }