.usage-analytics-period{min-width:9rem}
.usage-analytics-charts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-top:1rem;align-items:start}
.usage-analytics-charts[hidden]{display:none}
.usage-analytics-card{min-width:0;display:flex;flex-direction:column;gap:.7rem}
.usage-analytics-card h3,.usage-analytics-card h4{margin:0}
.usage-analytics-card p{margin:.1rem 0;line-height:1.5}
.usage-analytics-state{grid-column:1/-1}
.usage-indicator{align-self:flex-start;display:inline-flex;align-items:center;gap:.5rem;padding:.4rem .7rem;border:1px solid #6d7669;border-radius:.5rem;color:#e3e8de;background:#ffffff08;font-size:.85rem;font-weight:600;line-height:1.4}
.usage-indicator::before{content:"";width:.55rem;height:.55rem;flex:0 0 .55rem;border-radius:50%;background:#b1baa9}
.usage-indicator-warn{border-color:#a78442;color:#f6d99c;background:#f4bd4510}
.usage-indicator-warn::before{background:#f0c569}
.usage-indicator-good{border-color:#728b42;color:#d5eea8;background:#c2fb4a0a}
.usage-indicator-good::before{background:#c2fb4a}
.usage-summary-metric{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding:.35rem 0;border-bottom:1px solid #ffffff12;font-size:.92rem}
.usage-summary-metric strong{text-align:right;font-size:1rem;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.usage-analytics-details{min-width:0;border-top:1px solid #ffffff20;padding-top:.8rem;margin-top:.3rem}
.usage-analytics-details summary{cursor:pointer;font-weight:600;line-height:1.5;color:#d8eac2}
.usage-analytics-details summary:focus-visible{outline:2px solid #c2fb4a;outline-offset:5px;border-radius:2px}
.usage-analytics-details[open]>summary{margin-bottom:.8rem}
.usage-analytics-details p,.usage-analytics-details .usage-summary-metric{margin:.65rem 0}
.usage-analytics-card svg{display:block;width:100%;height:auto;max-height:12rem;margin:.8rem 0;overflow:visible}
.usage-axis{fill:#b6baaf;font:400 12px Barlow,Arial,sans-serif}
.usage-line{fill:none;stroke:#c2fb4a;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.usage-dot{fill:#c2fb4a}
.usage-histogram{margin:.3rem 0;min-width:0}
.usage-histogram figcaption{font-size:.82rem;color:#b6baaf;line-height:1.4;margin-bottom:.6rem}
.usage-histogram ul{display:grid;gap:.55rem;list-style:none;margin:0;padding:0}
.usage-histogram-row{display:grid;grid-template-columns:minmax(6rem,1fr) minmax(3rem,2fr) minmax(2.5rem,1fr);gap:.6rem;align-items:center;font-size:.82rem}
.usage-histogram-track{display:block;height:.65rem;background:#ffffff0c;border-radius:3px;overflow:hidden}
.usage-histogram-fill{display:block;height:100%;background:#c2fb4a;border-radius:3px}
.usage-histogram-count{text-align:right;font-variant-numeric:tabular-nums;font-size:.8rem;overflow-wrap:anywhere}
.usage-analytics-table-wrap{max-width:100%;max-height:18rem;overflow:auto;margin:.8rem 0}
.usage-analytics-table-wrap .data-table{min-width:19rem;font-size:.85rem}
.usage-analytics-table-wrap th,.usage-analytics-table-wrap td{white-space:normal;overflow-wrap:anywhere}
.usage-speed-detail{padding:.8rem 0;border-top:1px solid #ffffff18}
.usage-speed-detail .usage-indicator{margin-top:.6rem}
.usage-priorities{padding-left:1.35rem;margin:.1rem 0;line-height:1.6}
.usage-priorities li+li{margin-top:.85rem}
@media(max-width:900px){.usage-analytics-charts{grid-template-columns:minmax(0,1fr)}.usage-summary-metric{flex-wrap:wrap;gap:.3rem}.usage-summary-metric strong{text-align:left}}