body.usage-dashboard-open { overflow: hidden; }
.usage-tool-detail[hidden] { display:none !important; }
.usage-tool-table { min-width:1120px; }
.usage-tool-detail { position:fixed; inset:0; z-index:2; padding:clamp(10px,3vw,36px); background:rgba(0,0,0,.4); overflow:auto; }
.usage-tool-detail-card { box-sizing:border-box; width:min(100%,1100px); margin:auto; padding:clamp(14px,3vw,28px); border-radius:14px; background:var(--bg-secondary); overflow-wrap:anywhere; }
.usage-tool-detail-card .usage-header { gap:12px; }
.usage-tool-detail-card h2 { margin:0; font-size:20px; }
.usage-tool-detail pre { white-space:pre-wrap; overflow-wrap:anywhere; max-height:55vh; overflow:auto; padding:14px; border:1px solid var(--border-primary); border-radius:8px; background:var(--bg-primary); font-size:12px; line-height:1.6; }
.usage-tool-note { color:var(--text-secondary); font-size:12px; }
.usage-request-tools { margin-top:4px; padding:4px 8px; font-size:12px; }
.usage-dashboard[hidden], .usage-pane[hidden] { display: none !important; }
.usage-dashboard {
  position: fixed; z-index: 1200; inset: 0; display: flex; flex-direction: column; min-width: 0; overflow: auto;
  padding: max(22px, env(safe-area-inset-top)) max(28px, env(safe-area-inset-right)) max(26px, env(safe-area-inset-bottom)) max(28px, env(safe-area-inset-left));
  color: var(--text-primary); background: var(--bg-secondary);
}
.usage-header { display:flex; align-items:center; justify-content:space-between; gap:20px; width:min(1500px,100%); margin:0 auto 18px; }
.usage-header h1 { margin:3px 0 4px; font-size:27px; }
.usage-header p { margin:0; color:var(--text-secondary); font-size:13px; }
.usage-eyebrow, .usage-section-heading > div > span { color:var(--color-primary); font-size:10px; font-weight:750; letter-spacing:.12em; }
.usage-tabs { display:flex; gap:5px; width:min(1500px,100%); margin:0 auto; border-bottom:1px solid var(--border-primary); }
.usage-tab { padding:11px 16px; border:0; border-bottom:2px solid transparent; color:var(--text-secondary); background:transparent; font:inherit; cursor:pointer; }
.usage-tab.is-active { border-bottom-color:var(--color-primary); color:var(--color-primary); font-weight:650; }
.usage-content { width:min(1500px,100%); margin:0 auto; padding:18px 0 42px; }
.usage-filters { display:grid; grid-template-columns:repeat(4,minmax(150px,1fr)); gap:11px; align-items:end; padding:15px; border:1px solid var(--border-primary); border-radius:10px; background:var(--bg-primary); }
.usage-filters label, .usage-price-group-fields label, .usage-price-model-heading label, .usage-model-card label, .usage-tier-row label { display:grid; gap:5px; color:var(--text-secondary); font-size:12px; }
.usage-filters input, .usage-filters select, .usage-dashboard input, .usage-dashboard select { min-width:0; min-height:36px; padding:6px 9px; border:1px solid var(--border-secondary); border-radius:6px; color:var(--text-primary); background:var(--bg-primary); font:inherit; }
.usage-filters .btn { min-height:36px; }
.usage-error:not([hidden]) { margin:12px 0; padding:12px; border:1px solid color-mix(in srgb,var(--color-error) 35%,transparent); border-radius:8px; color:var(--color-error); background:color-mix(in srgb,var(--color-error) 7%,var(--bg-primary)); }
.usage-metrics, .usage-tool-metrics { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:10px; margin:15px 0 24px; }
.show-response-size .usage-metrics { grid-template-columns:repeat(9,minmax(0,1fr)); }
.usage-tool-metrics { grid-template-columns:repeat(3,minmax(0,1fr)); }
.usage-dashboard:not(.show-response-size) [data-response-size] { display:none; }
.usage-display-option { display:flex; justify-content:flex-end; align-items:center; gap:6px; margin-top:10px; color:var(--text-secondary); font-size:12px; }
.usage-token-values { display:grid; grid-template-columns:repeat(2,max-content); gap:5px 14px; font-variant-numeric:tabular-nums; }
.usage-token-values > span > span { display:inline-block; width:14px; color:var(--text-secondary); }
.usage-token-values b { font-weight:500; }
.usage-trends { min-width:0; margin-bottom:28px; }
.usage-trend-heading { flex-wrap:wrap; gap:12px; }
.usage-trend-controls { display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px; }
.usage-trend-controls label { display:grid; gap:5px; font-size:12px; color:var(--text-secondary); }
.usage-trends [data-trend-status] { color:var(--text-secondary); font-size:12px; }
.usage-trend-card { min-width:0; margin:12px 0; padding:16px; border:1px solid var(--border-primary); border-radius:9px; background:var(--bg-primary); }
.usage-trend-card-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; }
.usage-trend-card-heading h3 { margin:0; font-size:14px; }
.usage-trend-card-heading > span, .usage-trend-card p { font-size:12px; color:var(--text-secondary); }
.usage-chart-scroll { overflow-x:auto; overscroll-behavior-x:contain; margin-top:12px; }
.usage-chart-scroll svg { display:block; width:100%; }
.usage-chart-scroll text { font-size:11px; fill:var(--text-secondary); }
.usage-chart-grid { stroke:var(--border-primary); stroke-width:1; }
.usage-chart-scroll [data-chart-index]:hover, .usage-chart-scroll [data-chart-index]:focus { fill:color-mix(in srgb,var(--text-primary) 7%,transparent); outline:none; stroke:var(--color-primary); stroke-width:1; }
.usage-chart-legend { display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:8px; color:var(--text-secondary); font-size:12px; }
.usage-chart-legend > span { display:flex; align-items:center; gap:5px; }
.usage-chart-legend i, .usage-trend-tooltip i { display:inline-block; width:9px; height:9px; margin-right:4px; border-radius:2px; }
.usage-trend-tooltip { position:fixed; z-index:1200; max-width:min(460px,calc(100vw - 24px)); max-height:70vh; overflow:auto; padding:12px; border:1px solid var(--border-secondary); border-radius:8px; color:var(--text-primary); background:var(--bg-primary); box-shadow:0 8px 24px #0003; font-size:12px; line-height:1.7; overflow-wrap:anywhere; }
.usage-trend-tooltip[hidden] { display:none; }
.usage-metric { display:grid; gap:9px; min-width:0; padding:13px; border:1px solid var(--border-primary); border-radius:9px; background:var(--bg-primary); }
.usage-metric span { color:var(--text-secondary); font-size:11px; }
.usage-metric strong { overflow:hidden; font-size:19px; text-overflow:ellipsis; white-space:nowrap; }
.usage-section-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:20px 0 10px; }
.usage-section-heading h2 { margin:2px 0; font-size:17px; }
.usage-section-heading p { margin:4px 0; color:var(--text-secondary); font-size:12px; }
.usage-section-heading small { color:var(--text-secondary); }
.usage-table-wrap { width:100%; margin-bottom:20px; overflow:auto; border:1px solid var(--border-primary); border-radius:9px; background:var(--bg-primary); }
.usage-table { width:100%; border-collapse:collapse; font-size:12px; white-space:nowrap; }
.usage-table th, .usage-table td { padding:10px 11px; border-bottom:1px solid var(--border-primary); text-align:left; }
.usage-table th { position:sticky; top:0; z-index:1; color:var(--text-secondary); background:var(--bg-tertiary); font-size:11px; }
.usage-table tbody tr:last-child td { border-bottom:0; }
.usage-request-table td:nth-child(3) { min-width:150px; white-space:normal; }
.usage-request-table td:nth-child(3) small { display:block; color:var(--text-tertiary); }
.usage-status { display:inline-block; padding:3px 7px; border:1px solid transparent; border-radius:99px; color:var(--text-secondary); background:var(--bg-tertiary); font:inherit; cursor:pointer; }
.usage-status-success { color:#166534; background:#dcfce7; }
.usage-status-info { color:#1e40af; background:#dbeafe; }
.usage-status-error { color:#991b1b; background:#fee2e2; }
.usage-status-warning { color:#92400e; background:#fef3c7; }
.usage-status-incomplete { color:#6b21a8; background:#f3e8ff; }
.usage-status[aria-pressed="true"] { border-color:currentColor; }
.usage-status:focus-visible { outline:2px solid var(--color-primary); outline-offset:2px; }
.usage-status:disabled { cursor:default; }
.usage-request-error { margin-top:6px; }
.usage-request-error summary { width:max-content; color:var(--color-error); cursor:pointer; }
.usage-request-error summary:focus-visible { outline:2px solid var(--color-primary); outline-offset:2px; }
.usage-request-error > div { box-sizing:border-box; width:min(340px,calc(100vw - 64px)); max-height:360px; overflow:auto; padding:10px; margin-top:7px; border:1px solid var(--border-primary); border-radius:6px; background:var(--bg-secondary); white-space:normal; overflow-wrap:anywhere; }
.usage-request-error p { margin:0 0 8px; white-space:pre-wrap; }
.usage-request-error dl { display:grid; gap:4px; margin:0; }
.usage-request-error dt { color:var(--text-secondary); font-size:10px; }
.usage-request-error dd { margin:0 0 5px; white-space:pre-wrap; }
.usage-cost-note { display:block; margin-top:3px; color:var(--text-secondary); font-size:10px; }
.usage-current-price { display:block; border:0; padding:4px 0; background:transparent; color:var(--color-primary); font-size:11px; cursor:pointer; text-decoration:underline; }
.usage-pricing-hint { color:var(--text-secondary); font-size:12px; line-height:1.6; overflow-wrap:anywhere; }
[data-theme="dark"] .usage-status-success { color:#86efac; background:#14532d; }
[data-theme="dark"] .usage-status-info { color:#93c5fd; background:#1e3a8a; }
[data-theme="dark"] .usage-status-error { color:#fca5a5; background:#7f1d1d; }
[data-theme="dark"] .usage-status-warning { color:#fcd34d; background:#78350f; }
[data-theme="dark"] .usage-status-incomplete { color:#d8b4fe; background:#581c87; }
.usage-empty { padding:20px !important; color:var(--text-tertiary); text-align:center !important; }
.usage-pagination { display:flex; align-items:center; justify-content:center; gap:13px; margin:14px 0; }
.usage-pagination span { color:var(--text-secondary); font-size:12px; }
.usage-pricing-layout { display:grid; grid-template-columns:minmax(180px,230px) minmax(0,1fr); gap:16px; }
.usage-price-group-list, .usage-price-editor, .usage-price-mappings { min-width:0; padding:15px; border:1px solid var(--border-primary); border-radius:10px; background:var(--bg-primary); }
.usage-price-group-list { display:grid; align-content:start; gap:7px; }
.usage-price-group { display:grid; gap:4px; padding:10px; border:1px solid var(--border-primary); border-radius:7px; color:var(--text-primary); background:var(--bg-primary); text-align:left; cursor:pointer; }
.usage-price-group.is-active { border-color:var(--color-primary); background:color-mix(in srgb,var(--color-primary) 7%,var(--bg-primary)); }
.usage-price-group small { color:var(--text-secondary); }
.usage-price-group-fields { display:flex; align-items:end; gap:12px; margin-bottom:16px; }
.usage-price-group-fields label { flex:1; }
.usage-price-group-fields button { color:var(--color-error); }
.usage-price-model-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:10px 0; }
.usage-price-model-heading h3 { margin:0; font-size:15px; }
.usage-price-models { display:grid; gap:12px; }
.usage-model-card { min-width:0; padding:13px; border:1px solid var(--border-primary); border-radius:8px; background:var(--bg-secondary); }
.usage-model-card > header { display:flex; align-items:end; justify-content:space-between; gap:10px; margin-bottom:13px; }
.usage-model-card > header label { flex:1; }
.usage-model-card > header select { width:100%; max-width:100%; }
.usage-price-table { min-width:670px; margin-bottom:10px; }
.usage-price-table input { box-sizing:border-box; width:100%; min-width:90px; }
.usage-price-table td:first-child { min-width:160px; }
.usage-price-table td:last-child { width:40px; }
.usage-price-table button { color:var(--color-error); }
.usage-price-mappings { margin-top:16px; }
.usage-price-mappings .usage-section-heading { margin-top:0; }
.usage-pricing-footer { display:flex; justify-content:flex-end; align-items:center; gap:14px; margin-top:14px; }
.usage-pricing-footer [role=status] { color:var(--text-secondary); font-size:12px; }
[data-theme="dark"] .usage-price-group.is-active { background:color-mix(in srgb,var(--color-primary) 16%,var(--bg-primary)); }
@media (max-width:980px) {
  .usage-metrics, .usage-tool-metrics { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .show-response-size .usage-metrics { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .usage-filters { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:640px) {
  .usage-dashboard { padding:12px max(12px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); }
  .usage-header { align-items:flex-start; }
  .usage-header h1 { font-size:22px; }
  .usage-header p { max-width:260px; font-size:11px; }
  .usage-header > button { flex:0 0 auto; padding:8px; font-size:11px; }
  .usage-content { padding-top:12px; }
  .usage-filters { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; padding:10px; }
  .usage-filters label { font-size:10px; }
  .usage-filters input, .usage-filters select { font-size:11px; }
  .usage-filters .btn { grid-column:1/-1; }
  .usage-metrics, .usage-tool-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin:10px 0 18px; }
  .show-response-size .usage-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .usage-metric { padding:10px; }
  .usage-metric strong { font-size:16px; }
  .usage-pricing-layout { grid-template-columns:1fr; }
  .usage-price-group-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .usage-price-group-fields { flex-wrap:wrap; }
  .usage-price-group-fields label { min-width:110px; }
  .usage-section-heading h2 { font-size:15px; }
}

.usage-metric small, .usage-table td > small { display:block; color:var(--text-secondary); font-size:10px; white-space:normal; }
.usage-request-table th > button { border:0; padding:0; background:transparent; color:inherit; font:inherit; cursor:pointer; }
.usage-request-table th > button.is-filtered { color:var(--color-primary); }
.usage-request-table th > button.is-filtered span { display:inline-block; border-radius:50%; background:var(--color-primary); color:var(--bg-primary); }
.usage-column-filter { position:fixed; z-index:1210; box-sizing:border-box; width:320px; max-width:calc(100vw - 16px); max-height:calc(100dvh - 16px); overflow:auto; padding:14px; border:1px solid var(--border-primary); border-radius:10px; background:var(--bg-primary); color:var(--text-primary); box-shadow:0 12px 40px #0003; }
.usage-column-filter strong { display:block; margin-bottom:12px; font-size:13px; }
.usage-column-filter [data-filter-fields] { display:grid; gap:10px; }
.usage-column-filter label { display:grid; gap:4px; font-size:12px; color:var(--text-secondary); }
.usage-column-filter footer { display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; }
.usage-activity { display:inline-block; margin:4px 0; padding:3px 7px; border-radius:5px; font-size:11px; cursor:help; }
.usage-activity-response { color:#166534; background:#dcfce7; }
.usage-activity-retry { color:#92400e; background:#fef3c7; }
.usage-activity-compression { color:#6b21a8; background:#f3e8ff; }
.usage-activity-summary { color:#1e40af; background:#dbeafe; }
.usage-activity-parsing { color:#6b21a8; background:#f3e8ff; }
.usage-activity-other { color:var(--text-secondary); background:var(--bg-tertiary); }
[data-theme="dark"] .usage-activity-response { color:#86efac; background:#14532d; }
[data-theme="dark"] .usage-activity-retry { color:#fcd34d; background:#78350f; }
[data-theme="dark"] .usage-activity-compression { color:#d8b4fe; background:#581c87; }
[data-theme="dark"] .usage-activity-summary { color:#93c5fd; background:#1e3a8a; }
[data-theme="dark"] .usage-activity-parsing { color:#d8b4fe; background:#581c87; }