.ai-usage-shell { display:grid; gap:16px; }
.ai-usage-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.ai-usage-heading h3, .ai-usage-heading p { margin:0; }
.ai-usage-heading p { margin-top:6px; color:var(--muted); }
.ai-usage-metrics { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.ai-usage-metric { min-width:0; padding:16px; border-inline-end:1px solid var(--line); }
.ai-usage-metric:last-child { border-inline-end:0; }
.ai-usage-metric span { display:block; color:var(--muted); font-size:13px; }
.ai-usage-metric strong { display:block; margin-top:8px; font-size:24px; overflow-wrap:anywhere; }
.ai-usage-notice { margin:0; padding-inline-start:12px; border-inline-start:3px solid var(--warning); color:var(--soft); }
.ai-usage-history { display:grid; gap:8px; }
.ai-usage-history h4 { margin:0 0 4px; }
.ai-usage-row { display:grid; grid-template-columns:minmax(0, 1fr) auto auto; gap:12px; align-items:center; padding:10px 0; border-bottom:1px solid var(--line); }
.ai-usage-row:last-child { border-bottom:0; }
.ai-usage-row span { color:var(--muted); overflow-wrap:anywhere; }
@media (max-width:520px) {
  .ai-usage-metrics { grid-template-columns:1fr; }
  .ai-usage-metric { border-inline-end:0; border-bottom:1px solid var(--line); }
  .ai-usage-metric:last-child { border-bottom:0; }
  .ai-usage-row { grid-template-columns:1fr auto; }
  .ai-usage-row time { grid-column:1 / -1; }
}