:root { --bg:#f6f7f9; --card:#fff; --ink:#1d2330; --muted:#6b7385; --line:#e3e6ec; --good:#1a7f4b; --bad:#b42318; --accent:#2c5cc5; }
* { box-sizing: border-box; }
body { margin:0; font:14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color:var(--ink); background:var(--bg); }
header { display:flex; flex-wrap:wrap; gap:12px 20px; align-items:center; padding:12px 20px; background:var(--card); border-bottom:1px solid var(--line); }
header h1 { font-size:18px; margin:0 12px 0 0; }
header form { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
nav { display:flex; flex-wrap:wrap; gap:4px; padding:8px 20px 0; }
nav button { border:1px solid var(--line); border-bottom:none; background:#eef0f4; padding:7px 12px; border-radius:6px 6px 0 0; cursor:pointer; font:inherit; }
nav button.on { background:var(--card); font-weight:600; }
main { padding:0 20px 24px; }
.tab { display:none; } .tab.on { display:block; }
.panel { background:var(--card); border:1px solid var(--line); border-radius:0 8px 8px 8px; padding:14px 16px; margin-top:12px; overflow-x:auto; }
.panel h2 { font-size:14px; margin:4px 0 10px; }
.tiles { display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:10px; margin-top:12px; }
.tile { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:10px 12px; }
.tile .k { color:var(--muted); font-size:12px; } .tile .v { font-size:20px; font-weight:600; font-variant-numeric:tabular-nums; }
table { border-collapse:collapse; width:100%; font-variant-numeric:tabular-nums; }
th, td { padding:5px 8px; border-bottom:1px solid var(--line); text-align:right; white-space:nowrap; }
th:first-child, td:first-child { text-align:left; }
th { color:var(--muted); font-weight:600; font-size:12px; }
.neg { color:var(--bad); } .ok { color:var(--good); } .muted { color:var(--muted); }
input, select, button { font:inherit; padding:5px 8px; border:1px solid var(--line); border-radius:6px; background:#fff; }
button[type=submit] { background:var(--accent); color:#fff; border-color:var(--accent); cursor:pointer; }
body.login { display:grid; place-items:center; min-height:100vh; padding:16px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:24px; width:min(360px, 100%); display:grid; gap:12px; }
.card label { display:grid; gap:4px; } .error { color:var(--bad); margin:0; }