:root { --bg:#f4f5f7; --ink:#17202a; --muted:#65717e; --card:#fff; --line:#dfe3e8; --brand:#165dff; --danger:#b42318; --ok:#067647; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",sans-serif; }
header { background:#111827; color:#fff; padding:12px 24px; display:flex; gap:22px; align-items:center; position:sticky; top:0; z-index:3; }
header strong { font-size:17px; margin-right:10px; }
nav { display:flex; flex-wrap:wrap; gap:4px 14px; flex:1; }
nav a { color:#d8e2f0; text-decoration:none; }
main { max-width:1400px; margin:24px auto; padding:0 20px 50px; }
h1 { font-size:26px; margin:0 0 18px; } h2 { font-size:18px; margin:24px 0 10px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:18px; margin:14px 0; box-shadow:0 1px 2px #0000000a; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px; }
.scroll { overflow:auto; }
table { width:100%; border-collapse:collapse; white-space:nowrap; }
th,td { padding:9px 10px; border-bottom:1px solid var(--line); text-align:left; }
th { background:#f8fafc; color:#45515d; font-size:13px; }
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; }
label { display:block; color:#46515d; font-size:13px; margin:7px 0 3px; }
input,select,textarea,button { font:inherit; }
input,select,textarea { width:100%; border:1px solid #cbd2d9; border-radius:6px; padding:8px 9px; background:white; }
textarea { min-height:120px; }
button,.button { border:0; border-radius:6px; padding:8px 14px; background:var(--brand); color:white; cursor:pointer; text-decoration:none; display:inline-block; }
button.secondary,.button.secondary { background:#e8edf4; color:#243244; }
.inline { display:flex; gap:9px; align-items:end; flex-wrap:wrap; }.inline > * { flex:1; min-width:130px; }
output.line-charged { display:block; padding:8px 9px; border:1px dashed #cbd2d9; border-radius:6px; background:#f8fafc; font-variant-numeric:tabular-nums; }
.muted { color:var(--muted); font-size:13px; }.danger { color:var(--danger)!important; font-weight:600; }.ok { color:var(--ok); }
.alert { border-radius:7px; padding:10px 13px; margin:10px 0; background:#fff4e5; color:#8a4b08; }
.alert.error { background:#fef3f2; color:var(--danger); }.alert.success { background:#ecfdf3; color:var(--ok); }
details { border:1px solid var(--line); border-radius:7px; padding:8px 10px; margin:7px 0; } summary { cursor:pointer; font-weight:600; }
.metric { font-size:24px; font-weight:650; font-variant-numeric:tabular-nums; }.login { max-width:380px; margin:10vh auto; }
@media(max-width:760px){ header{position:static;padding:12px} main{padding:0 10px}.hide-mobile{display:none} }