:root{
  --bg:#faf9f5; --fg:#141413; --muted:#6f6e69; --border:#e8e6de; --card:#ffffff;
  --orange:#d06a41; --blue:#4382c9; --purple:#7c5cbf; --green:#3f8f5f; --teal:#2f8f8f;
  --gold:#b8860b; --red:#c04a4a; --pink:#b55a8f; --gray:#8a8a85;
}
@media(prefers-color-scheme:dark){
  :root{ --bg:#141413; --fg:#faf9f5; --muted:#9a9992; --border:#2e2d2a; --card:#1d1c1a; }
}
*{box-sizing:border-box}
body{margin:0;display:flex;background:var(--bg);color:var(--fg);font:14px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.side{width:230px;flex:none;padding:24px 18px;border-right:1px solid var(--border);position:sticky;top:0;height:100vh;transition:width .25s ease, padding .25s ease;overflow:hidden;white-space:nowrap}
.side.collapsed{width:52px;padding:24px 10px}
.side .toggle-side{position:absolute;top:10px;right:8px;background:none;border:none;color:var(--muted);cursor:pointer;font-size:14px;padding:2px 4px;border-radius:4px;line-height:1}
.side .toggle-side:hover{color:var(--orange)}
.side.collapsed .toggle-side{position:static;display:block;margin:0 auto 12px}
.side.collapsed h1,.side.collapsed .stamp,.side.collapsed nav a span,.side.collapsed .lang,.side.collapsed .foot{display:none}
.side.collapsed nav a{text-align:center;padding:6px 0;font-size:16px}
.side h1{font-size:16px;margin:0 0 4px}
.side .stamp{color:var(--muted);font-size:11px;margin:0 0 20px}
.side nav a{display:block;margin:6px 0;padding:6px 10px;border-radius:6px;color:var(--blue);text-decoration:none}
.side nav a.active{color:var(--orange);font-weight:700;background:var(--card);border:1px solid var(--border)}
.side .foot{margin-top:28px;color:var(--muted);font-size:11px;line-height:1.5}
.lang{margin-top:16px;display:flex;gap:6px}
.lang button{background:none;border:1px solid var(--border);border-radius:6px;padding:3px 10px;color:var(--muted);font:11px ui-monospace,monospace;cursor:pointer}
.lang button.active{color:var(--orange);border-color:var(--orange);font-weight:700}
main{flex:1;padding:24px;max-width:1040px}
h2{margin:0 0 4px;font-size:18px}
.sub{color:var(--muted);font-size:12px;margin:0 0 18px}
.vhead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:4px}
.vhead>div{flex:1}
.refresh{background:var(--card);border:1px solid var(--border);border-radius:6px;padding:5px 12px;color:var(--muted);font:12px ui-monospace,monospace;cursor:pointer;white-space:nowrap;flex:none;margin-top:2px}
.refresh:hover{color:var(--orange);border-color:var(--orange)}
.refresh:disabled{opacity:.5;cursor:default;color:var(--muted);border-color:var(--border)}
.cards{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.card{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:12px 16px;min-width:150px}
.card .v{font-size:20px;font-weight:700}
.card .k{color:var(--muted);font-size:11px}
.chart{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:14px;margin-bottom:20px;overflow-x:auto}
.chart h3{margin:0 0 8px;font-size:13px;color:var(--muted);font-weight:400}
table{border-collapse:collapse;width:100%;font-size:12px}
th,td{text-align:right;padding:5px 10px;border-bottom:1px solid var(--border)}
th:first-child,td:first-child{text-align:left}
th{color:var(--muted);font-weight:400}
.loading{color:var(--muted);padding:40px 0}
.view{display:none}.view.active{display:block}
@media(max-width:760px){
  body{flex-direction:column}
  .side{width:auto;height:auto;position:static;border-right:0;border-bottom:1px solid var(--border)}
  .side nav a{display:inline-block;margin:2px 4px 2px 0}
}