body.usage{overflow:auto;height:auto}
.uhead{display:flex;align-items:center;gap:14px;padding:12px 22px;border-bottom:1px solid var(--border);background:var(--panel);position:sticky;top:0;z-index:10}
.uhead h1{font-size:16px;margin:0}
.back,.btn{color:var(--text);text-decoration:none;border:1px solid var(--border);background:var(--panel2);border-radius:8px;padding:5px 12px;font-size:12.5px;cursor:pointer}
.back:hover,.btn:hover{border-color:var(--accent)}
.spacer{flex:1}.dim{color:var(--dim)}.hidden{display:none!important}
.uwrap{max-width:1280px;margin:0 auto;padding:18px 22px 60px}
.controls{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.controls label{font-size:12px;color:var(--muted);display:flex;gap:6px;align-items:center}
.controls select,.filters select,.filters input{background:#0f1218;color:var(--text);border:1px solid var(--border);border-radius:7px;padding:5px 8px;font-size:12.5px}
.seg{display:flex;border:1px solid var(--border);border-radius:9px;overflow:hidden}
.seg button{background:var(--panel);color:var(--muted);border:0;border-right:1px solid var(--border);padding:6px 13px;font-size:12.5px;cursor:pointer}
.seg button:last-child{border-right:0}.seg button.on{background:var(--accent);color:#fff}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin-bottom:16px}
.kpi{background:var(--panel);border:1px solid var(--border);border-radius:11px;padding:11px 14px}
.kpi .v{font-size:22px;font-weight:600}.kpi .l{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--dim)}.kpi .s{font-size:11.5px;color:var(--muted);margin-top:2px}
.card{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:14px 16px;margin-bottom:16px}
.card h2{font-size:13.5px;margin:0 0 10px;font-weight:600}
.chart{position:relative;width:100%;overflow-x:auto}
.chart svg{display:block;min-width:640px}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:8px;font-size:12px}
.legend span{cursor:pointer;display:flex;align-items:center;gap:6px;color:var(--muted)}
.legend span.off{opacity:.35}.legend i{width:10px;height:10px;border-radius:2px;display:inline-block}
#tip{position:fixed;z-index:60;pointer-events:none;background:#0b0d12;border:1px solid var(--border);border-radius:8px;padding:8px 10px;font-size:12px;line-height:1.5;max-width:320px}
.tscroll{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:12.5px}
th,td{padding:6px 9px;border-bottom:1px solid var(--border);text-align:right;white-space:nowrap}
th:first-child,td:first-child,td.l,th.l{text-align:left}
th{color:var(--muted);font-weight:600;position:sticky;top:0;background:var(--panel)}
tr.click{cursor:pointer}tr.click:hover{background:var(--panel2)}
.err{color:#ff9b95}.ok{color:var(--ok)}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
#more{margin-top:10px}
#detail{position:fixed;right:0;top:0;bottom:0;width:min(860px,100vw);background:var(--panel);border-left:1px solid var(--border);z-index:40;display:flex;flex-direction:column;box-shadow:-8px 0 30px rgba(0,0,0,.55)}
.dhead{display:flex;gap:8px;align-items:center;padding:12px 14px;border-bottom:1px solid var(--border)}
.dhead h3{margin:0;font-size:14px}
.tabs{display:flex;border-bottom:1px solid var(--border)}
.tabs button{background:none;border:0;color:var(--muted);padding:9px 16px;font-size:12.5px;cursor:pointer;border-bottom:2px solid transparent}
.tabs button.on{color:var(--text);border-bottom-color:var(--accent)}
#d-body{overflow:auto;padding:14px;flex:1;font-size:12.5px}
.kv{display:grid;grid-template-columns:200px 1fr;gap:4px 14px}.kv div:nth-child(odd){color:var(--muted)}
.msgblk{border:1px solid var(--border);border-radius:9px;margin-bottom:9px;background:#12151d}
.msgblk>summary{cursor:pointer;padding:7px 11px;font-size:12px;color:var(--muted);list-style:none}
.msgblk>summary b{color:var(--accent2);margin-right:8px;text-transform:uppercase;font-size:11px}
.msgblk pre,.jpre{margin:0;padding:10px 12px;white-space:pre-wrap;word-break:break-word;font:11.5px/1.5 var(--mono);color:#c9d1e0;border-top:1px solid var(--border);max-height:520px;overflow:auto}
.jpre{border:1px solid var(--border);border-radius:9px;background:#0b0d12}
h4.sec{margin:16px 0 6px;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--accent2)}
#toast{position:fixed;left:50%;bottom:30px;transform:translateX(-50%);background:#1f2937;border:1px solid var(--border);border-radius:9px;padding:9px 16px;font-size:13px;z-index:99}
@media (max-width:700px){.uwrap{padding:12px}.kv{grid-template-columns:120px 1fr}}