.token-usage-card { border:1px solid var(--line); border-top:3px solid #e2b72f; background:#fff9e8; margin:0 0 14px; padding:17px 18px 14px; }
.token-usage-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; padding-bottom:12px; border-bottom:1px solid #e3d59f; }
.token-usage-heading h4 { margin:5px 0 0; font-size:14px; }
.token-usage-note { color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.08em; }
.token-usage-table { display:grid; gap:0; }
.token-usage-row { display:grid; grid-template-columns:minmax(150px,1.5fr) repeat(3,minmax(86px,1fr)); gap:12px; align-items:center; padding:10px 0; border-bottom:1px solid rgba(227,213,159,.7); }
.token-usage-row.subtotal { border-bottom:0; padding-bottom:2px; font-weight:700; }
.token-usage-label { font-size:12px; color:var(--ink); }
.token-usage-cell { display:grid; gap:2px; text-align:right; }
.token-usage-cell small { color:var(--muted); font:9px/1 'IBM Plex Mono',ui-monospace,monospace; text-transform:uppercase; letter-spacing:.08em; }
.token-usage-cell strong { font:600 12px/1.2 'IBM Plex Mono',ui-monospace,monospace; color:var(--ink); }
.token-usage-footnote { margin:11px 0 0; color:#735c2d; font-size:10px; line-height:1.45; }
.token-usage-card[hidden] { display:none; }
@media (max-width:620px) { .token-usage-row { grid-template-columns:1fr repeat(3,minmax(54px,1fr)); gap:7px; }.token-usage-note { display:none; }.token-usage-cell strong { font-size:10px; } }