*{box-sizing:border-box}
:root{color-scheme:dark}
body{margin:0;background:#0b0b0c;color:#f4f4f5;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}
.app{max-width:760px;margin:auto;padding:0 22px 38px}
.topbar{height:72px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #242426}
.brand{font-size:17px;font-weight:600;letter-spacing:-.2px}
.right{display:flex;align-items:center;gap:12px}
.status{font-size:12px;color:#8f8f94}
.status.live{color:#8bd69a}
.status.err{color:#e98d8d}
.icon-btn{width:34px;height:34px;border:1px solid #2b2b2e;border-radius:8px;background:#121214;color:#ddd;font-size:21px;cursor:pointer}
main{padding-top:44px}
.summary{padding-bottom:38px;border-bottom:1px solid #242426}
.label{font-size:13px;color:#929297}
.big{font-size:clamp(48px,12vw,78px);font-weight:600;letter-spacing:-3px;line-height:1.05;margin:12px 0}
.muted{font-size:12px;color:#727278}
.stats{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid #242426}
.stat{padding:25px 20px 25px 0}
.stat+ .stat{border-left:1px solid #242426;padding-left:20px}
.value{font-size:25px;font-weight:500;margin:10px 0 4px;letter-spacing:-.5px}
.usage{padding:28px 0;border-bottom:1px solid #242426}
.row{display:flex;justify-content:space-between;gap:15px;font-size:13px;color:#a5a5aa}
.bar{height:5px;background:#242427;border-radius:99px;margin-top:13px;overflow:hidden}
#bar{height:100%;width:0;background:#f1f1f1;border-radius:99px;transition:width .4s ease}
.details{padding:24px 0}
details{margin-top:25px;border-top:1px solid #242426;padding-top:18px}
summary{cursor:pointer;color:#a5a5aa;font-size:13px}
pre{margin-top:14px;padding:15px;background:#111113;border:1px solid #242426;border-radius:8px;color:#bdbdc2;font-size:11px;overflow:auto;white-space:pre-wrap;word-break:break-word}
footer{font-size:11px;color:#5f5f64;padding-top:10px}
@media(max-width:560px){.app{padding:0 17px 30px}.stats{grid-template-columns:1fr}.stat{padding:20px 0;border-bottom:1px solid #242426}.stat+.stat{border-left:0;padding-left:0}.stat:last-child{border-bottom:0}.big{letter-spacing:-2px}}

.chart-section{padding:30px 0 24px;border-bottom:1px solid #242426}
.chart-title{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:18px}
.chart-current{font-size:24px;font-weight:600;letter-spacing:-.6px;margin-top:6px}
.chart-range{font-size:10px;letter-spacing:1.2px;color:#77777d}
.chart-wrap{height:300px;border:1px solid #242426;border-radius:12px;background:#0e0e10;overflow:hidden}
#usageChart{width:100%;height:100%;display:block}
.chart-grid{stroke:#202023;stroke-width:1}
.chart-line{fill:none;stroke:#f1f1f1;stroke-width:2.2;vector-effect:non-scaling-stroke}
.chart-area{fill:#f1f1f1;opacity:.055}
.chart-point{fill:#f1f1f1}
.chart-label{fill:#66666c;font-size:11px;font-family:inherit}
.chart-footer{display:flex;justify-content:space-between;margin-top:10px;font-size:11px;color:#5f5f64}