.usage-dashboard { --usage-blue:#2165d6; --usage-muted:#718097; color:var(--ink-900,#182b49); display:grid; gap:18px; min-width:0; }
.usage-hero { padding:25px 28px; color:#fff; background:linear-gradient(115deg,#143e80,#266bce); border-radius:18px; }
.usage-hero > span { font-size:10px; letter-spacing:1.8px; opacity:.75; font-weight:800; }
.usage-hero h2 { font-size:27px; margin:8px 0; letter-spacing:-.8px; }
.usage-hero p { color:#d7e5fa; margin:0; font-size:13px; }
.usage-toolbar,.usage-period { display:flex; align-items:center; flex-wrap:wrap; gap:12px; }
.usage-toolbar { justify-content:space-between; }
.usage-toolbar label,.usage-period label { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--usage-muted); }
.usage-dashboard select,.usage-dashboard input { border:1px solid #dce4ef; background:#fff; padding:9px; border-radius:8px; font:inherit; color:#243953; min-width:0; }
.usage-tabs { display:flex; padding:4px; background:#e9eff8; border-radius:11px; }
.usage-tabs button,.usage-presets button { border:0; background:transparent; color:#586c88; border-radius:8px; padding:10px 17px; cursor:pointer; font:750 12px Manrope,sans-serif; }
.usage-tabs button.is-active { background:#fff; color:var(--usage-blue); box-shadow:0 2px 7px #143e8014; }
.usage-presets { display:flex; border:1px solid #dce4ef; border-radius:9px; }
.usage-presets button { padding:8px 10px; }
.usage-presets button:hover { background:#e9eff8; }
.usage-dashboard button:focus-visible,.usage-dashboard input:focus-visible,.usage-dashboard select:focus-visible,.usage-method summary:focus-visible { outline:2px solid var(--usage-blue); outline-offset:3px; }
.usage-coverage { font-size:12px; color:var(--usage-muted); margin:0 0 16px; line-height:1.7; }
.usage-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:13px; margin-bottom:18px; }
.usage-metric,.usage-panel { background:#fff; border:1px solid #e0e7f0; border-radius:14px; padding:20px; }
.usage-metric { display:flex; flex-direction:column; gap:9px; }
.usage-metric > span { font-weight:750; font-size:12px; }
.usage-metric strong { font-size:34px; letter-spacing:-1.5px; color:var(--usage-blue); line-height:1.2; }
.usage-metric small { color:var(--usage-muted); font-size:11px; line-height:1.6; }
.usage-columns { display:grid; grid-template-columns:minmax(250px,.85fr) minmax(0,1.4fr); gap:18px; margin-bottom:18px; }
.usage-panel { min-width:0; margin-bottom:18px; }
.usage-columns .usage-panel { margin-bottom:0; }
.usage-panel h3 { margin:0; font-size:15px; }
.usage-panel p { font-size:11px; color:var(--usage-muted); line-height:1.7; margin:7px 0 16px; }
.usage-frequency { display:grid; gap:16px; margin:23px 0; }
.usage-frequency > div { display:grid; grid-template-columns:65px 1fr 35px; gap:12px; align-items:center; font-size:12px; }
.usage-frequency i { display:block; height:12px; background:#edf2fa; border-radius:4px; overflow:hidden; }
.usage-frequency b { display:block; height:100%; background:var(--usage-blue); border-radius:4px; }
.usage-frequency strong { text-align:right; }
.usage-chart-scroll { overflow-x:auto; }
.usage-dashboard svg.usage-chart { display:block; min-width:100%; max-width:none; height:195px; }
.usage-chart text { fill:var(--usage-muted); stroke:none; font:10px Manrope,sans-serif; }
.usage-chart line { stroke:#e8edf4; stroke-width:1; }
.usage-chart rect { fill:var(--usage-blue); stroke:none; rx:2; }
.usage-chart rect.is-unknown { fill:#bdc8d7; }
.usage-table-wrap { overflow-x:auto; }
.usage-dashboard table.usage-table { width:100%; border-collapse:collapse; table-layout:auto; font-size:12px; }
.usage-dashboard .usage-table tr { display:table-row; }
.usage-dashboard .usage-table th,.usage-dashboard .usage-table td { display:table-cell; border-bottom:1px solid #edf1f6; padding:13px 8px; text-align:right; }
.usage-dashboard .usage-table th { font-size:10px; font-weight:700; color:var(--usage-muted); }
.usage-dashboard .usage-table th:first-child,.usage-dashboard .usage-table td:first-child { text-align:left; }
.usage-dashboard .usage-table tr:last-child td { border-bottom:0; }
.usage-method summary { cursor:pointer; font-size:12px; font-weight:750; }
.usage-method p:last-child { margin-bottom:0; }
.usage-empty { padding:30px; text-align:center; background:#fff; border:1px solid #e0e7f0; border-radius:14px; font-size:13px; color:var(--usage-muted); }
@media(max-width:900px) { .usage-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); } .usage-columns { grid-template-columns:minmax(0,1fr); } }
@media(max-width:500px) { .usage-hero { padding:20px; } .usage-hero h2 { font-size:23px; } .usage-metric,.usage-panel { padding:16px; } .usage-metric strong { font-size:29px; } .usage-toolbar { align-items:stretch; } .usage-period { gap:9px; } .usage-period label { flex:1; } .usage-period input { width:100%; } .usage-presets { width:100%; justify-content:space-around; } }