.usage-dashboard{margin-top:18px;min-width:0}
.usage-periods{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;padding:5px;background:var(--s1);border:1px solid var(--bd);border-radius:14px}
.usage-periods button,.usage-calendar button,.usage-range button{min-height:44px;border:0;border-radius:10px;background:transparent;color:var(--mt);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.usage-periods button[aria-pressed=true]{background:var(--ac);color:#fff;box-shadow:0 3px 12px rgba(139,92,246,.22)}
.usage-dashboard button:focus-visible,.usage-dashboard input:focus-visible,.usage-total summary:focus-visible{outline:2px solid var(--ac);outline-offset:3px}
.usage-calendar{display:grid;grid-template-columns:44px minmax(0,1fr) 44px auto;align-items:end;gap:8px;margin-top:14px}
.usage-calendar[hidden],.usage-range[hidden]{display:none!important}
.usage-calendar button{background:var(--s1);border:1px solid var(--bd);color:var(--tx);font-size:24px}
.usage-calendar .usage-current{font-size:13px;padding:0 12px}
.usage-calendar button:disabled{opacity:.35;cursor:default}
.usage-calendar label,.usage-range label{display:flex;flex-direction:column;gap:6px;min-width:0;color:var(--mt);font-size:12px;font-weight:600}
.usage-dashboard input{display:block;box-sizing:border-box;width:100%;max-width:100%;min-width:0;min-inline-size:0;min-height:44px;padding:9px 10px;background:var(--s1);border:1px solid var(--bd);border-radius:10px;color:var(--tx);font:inherit;font-size:16px;color-scheme:dark;appearance:none;-webkit-appearance:none}
body.light .usage-dashboard input{color-scheme:light}
.usage-range{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;align-items:end;gap:10px;margin-top:14px}
.usage-range button{background:var(--ac);color:white;padding:0 16px}
.usage-field-error{grid-column:1/-1;color:var(--dg);font-size:13px;margin:0!important}
.usage-applied{display:flex;flex-direction:column;gap:5px;margin-top:18px}
.usage-applied strong{font-size:17px;color:var(--tx)}
.usage-applied span{color:var(--mt);font-size:13px;overflow-wrap:anywhere}
.usage-status{min-height:20px;font-size:12px!important;color:var(--mt);margin:8px 0 12px!important}
.usage-status.is-error{color:var(--dg)}
.usage-result[aria-busy=true]{opacity:.6}
.usage-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.usage-metric{min-width:0;padding:15px;border:1px solid var(--bd);border-radius:14px;background:var(--s1)}
.usage-metric-label{display:block;font-size:12px;font-weight:600;color:var(--mt)}
.usage-metric strong{display:block;margin:9px 0 7px;color:var(--ac);font-size:23px;line-height:1.25;font-weight:700;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.usage-metric small{display:block;color:var(--mt);font-size:11px;line-height:1.45}
.usage-note,.usage-empty{font-size:12px!important;color:var(--mt);line-height:1.5;margin:14px 0!important}
.usage-total{border-top:1px solid var(--bd);padding-top:14px;margin-top:16px}
.usage-total summary{cursor:pointer;color:var(--tx);font-size:14px;font-weight:600;min-height:44px}
.usage-total .usage-metrics{margin-top:10px}
@media(max-width:700px){.usage-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.usage-metric{padding:12px}.usage-metric strong{font-size:21px}.usage-range{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.usage-range button{grid-column:1/-1}.usage-calendar{grid-template-columns:44px minmax(0,1fr) 44px}.usage-current{grid-column:1/-1;font-size:13px!important}.usage-periods button{font-size:12px;padding:4px 2px}}
@media(max-width:359px){.usage-metrics,.usage-range{grid-template-columns:minmax(0,1fr)}.usage-periods{grid-template-columns:repeat(3,minmax(0,1fr))}.usage-periods button:last-child{grid-column:span 2}}