.usage-panel { padding:24px; margin-block:18px; border-left:5px solid var(--profile-accent, #9b604c); background:var(--card-bg, var(--surface, transparent)); }
.usage-panel h2 { margin:0 0 8px; }
.usage-filters { display:flex; flex-wrap:wrap; gap:12px; align-items:end; margin-block:18px; }
.usage-filters label { display:grid; gap:5px; font-size:.85rem; flex:1 1 150px; min-width:0; }
.usage-filters input,.usage-filters select,.usage-filters button { min-height:44px; padding:9px; max-width:100%; box-sizing:border-box; background:transparent; color:inherit; border:1px solid #8886; }
.usage-filters button { cursor:pointer; }
.usage-filters option { background:var(--sys-surface,var(--admin-surface,#fff)); color:var(--sys-text,var(--admin-text,#17212b)); }
.usage-filters button:disabled { opacity:.6; cursor:wait; }
.usage-metrics { display:flex; gap:20px; flex-wrap:wrap; }
.usage-metrics p { display:grid; gap:4px; margin-block:8px 20px; }
.usage-metrics strong { font-size:1.65rem; }
.usage-metrics span { font-size:.85rem; }
.usage-panel details { margin-block:12px; }
.usage-panel summary { cursor:pointer; padding-block:8px; font-weight:600; }
.usage-table-wrap { max-height:350px; overflow:auto; margin-block:10px; }
.usage-table-wrap table { width:100%; border-collapse:collapse; font-size:.85rem; }
.usage-table-wrap th,.usage-table-wrap td { padding:12px; text-align:left; border-bottom:1px solid #8883; white-space:nowrap; }
.usage-test-label { color:var(--profile-accent, #9b604c); }
.usage-explanation { font-size:.8rem; line-height:1.6; }
@media(max-width:600px) { .usage-panel { padding:16px; } .usage-filters { gap:10px; } .usage-filters button { width:100%; } }