:root { --bg:#14110e; --surface:#1e1a16; --line:#3a322a; --text:#f3ece1; --muted:#b8ac9c; --accent:#d39a35; --warn:#e0a04a; --ok:#7ec98f; --danger:#e0736b; }
* { box-sizing:border-box; } body { margin:0; background:var(--bg); color:var(--text); font:15px/1.5 system-ui,sans-serif; }
header { display:flex; align-items:center; justify-content:space-between; padding:.8rem 1.2rem; border-bottom:1px solid var(--line); background:var(--surface); flex-wrap:wrap; gap:.5rem; }
header h1 { font-size:1.1rem; margin:0; font-weight:500; }
nav button { background:none; border:1px solid var(--line); color:var(--muted); padding:.35rem .7rem; border-radius:6px; cursor:pointer; margin-left:.4rem; }
nav button.active { color:var(--text); border-color:var(--accent); }
main { padding:1.2rem; max-width:1100px; margin:auto; }
.panel { display:none; } .panel.active { display:block; }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:.8rem; margin-bottom:1.2rem; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:.8rem 1rem; }
.card b { font-size:1.6rem; font-weight:500; display:block; } .card span { color:var(--muted); font-size:.8rem; }
.warn b { color:var(--warn); }
table { width:100%; border-collapse:collapse; font-size:.9rem; } th,td { text-align:left; padding:.45rem .6rem; border-bottom:1px solid var(--line); }
th { color:var(--muted); cursor:pointer; user-select:none; } tr:hover td { background:#241f1a; }
.badge { padding:.1rem .5rem; border-radius:999px; font-size:.75rem; } .b-ok { background:#1d3322; color:var(--ok); } .b-block { background:#3a1f1d; color:var(--danger); }
.bar { display:flex; align-items:center; gap:.6rem; margin:.3rem 0; font-size:.85rem; } .bar .t { width:160px; color:var(--muted); } .bar .fill { height:14px; border-radius:4px; background:var(--accent); }
.drawer { position:relative; background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:1rem; margin-top:1rem; }
.muted { color:var(--muted); } .thumb { max-width:220px; border-radius:8px; border:1px solid var(--line); }
button.act { background:var(--accent); color:#241a07; border:none; border-radius:6px; padding:.35rem .7rem; cursor:pointer; }
button.act[disabled] { opacity:.4; cursor:not-allowed; }
input, select, textarea { background:#241f1a; border:1px solid var(--line); color:var(--text); border-radius:6px; padding:.3rem .5rem; }
#login { max-width:340px; margin:4rem auto; text-align:center; } #login input { width:100%; margin:.4rem 0; }
.hidden { display:none !important; }