:root,
html[data-theme="obsidian"] {
  --usage-success: #5ee6b1;
  --usage-warning: #f7c76d;
  --usage-error: #ff8096;
  --usage-info: #68d5ff;
  --usage-violet: #b5a2ff;
  --usage-grid: rgba(255, 255, 255, 0.07);
  --usage-surface: rgba(255, 255, 255, 0.035);
  --usage-surface-strong: rgba(255, 255, 255, 0.065);
  --usage-overlay: rgba(0, 0, 0, 0.68);
}

html[data-theme="pine-green"] {
  --usage-success: #047857;
  --usage-warning: #a16207;
  --usage-error: #be123c;
  --usage-info: #0369a1;
  --usage-violet: #6d28d9;
  --usage-grid: rgba(0, 0, 0, 0.08);
  --usage-surface: rgba(0, 0, 0, 0.025);
  --usage-surface-strong: rgba(0, 0, 0, 0.055);
  --usage-overlay: rgba(245, 245, 247, 0.72);
}

/* Explicit light-theme coverage for the usage workspace and its responsive
   record surfaces. The values still come from the shared semantic tokens. */
html[data-theme="pine-green"] .usage-records-page,
html[data-theme="pine-green"] .usage-stat-card,
html[data-theme="pine-green"] .usage-chart-panel,
html[data-theme="pine-green"] .usage-record-card,
html[data-theme="pine-green"] .usage-detail-drawer {
  color: var(--th-text);
  border-color: var(--th-border);
  background: var(--usage-surface);
}

html[data-theme="pine-green"] .usage-detail-drawer {
  background: var(--th-bg-2);
}

.usage-records-page { width: 100%; max-width: none; padding: 18px clamp(14px, 2.4vw, 34px) 40px; color: var(--th-text); }
.usage-records-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 0 0 16px; border-bottom: 1px solid var(--th-border); }
.usage-records-title,
.usage-toolbar-actions,
.usage-stat-heading,
.usage-panel-heading,
.usage-records-section-header,
.usage-filter-actions,
.usage-pagination,
.usage-pagination > div { display: flex; align-items: center; }
.usage-records-title { gap: 11px; min-width: 190px; }
.usage-records-title-icon { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid color-mix(in srgb, var(--th-accent) 34%, transparent); border-radius: 8px; background: color-mix(in srgb, var(--th-accent) 10%, transparent); color: var(--th-accent); }
.usage-records-title-icon svg { width: 18px; height: 18px; }
.usage-records-title h2 { font: 700 19px/1.2 'Outfit', sans-serif; letter-spacing: 0; }
.usage-records-title p { margin-top: 3px; color: var(--th-text-2); font-size: 12px; }
.usage-toolbar-actions { justify-content: flex-end; gap: 8px; flex-wrap: wrap; }

.usage-range-segment { display: inline-flex; align-items: center; min-height: 38px; padding: 3px; border: 1px solid var(--th-border); border-radius: 8px; background: var(--usage-surface); }
.usage-range-segment button { min-height: 30px; padding: 0 11px; border-radius: 5px; color: var(--th-text-2); font-size: 12px; white-space: nowrap; }
.usage-range-segment button:hover { color: var(--th-text); background: var(--usage-surface-strong); }
.usage-range-segment button.active { color: var(--th-text); background: var(--usage-surface-strong); box-shadow: inset 0 0 0 1px var(--th-border); }
.usage-date-control,
.usage-filter-control { display: grid; min-width: 0; gap: 5px; }
.usage-date-control span,
.usage-filter-control span { color: var(--th-text-2); font-size: 12px; line-height: 1; }
.usage-date-control { grid-template-columns: auto minmax(130px, 168px); align-items: center; gap: 7px; }
.usage-date-control .input-apple { height: 38px; padding: 0 9px; border-radius: 7px; font-size: 12px; color: var(--th-text); }
.usage-toolbar-actions .usage-icon-command { width: 38px; height: 38px; display: grid; place-items: center; padding: 0; border-radius: 6px; font-size: 12px; }
.usage-records-page .btn-glass, .usage-records-page .btn-solid { box-shadow: none; backdrop-filter: none; transform: none; letter-spacing: 0; }
.usage-icon-command svg { width: 14px; height: 14px; }
.usage-custom-range { min-width: 0; }
.usage-custom-range[open] { flex-basis: 100%; }
.usage-custom-range summary, .usage-record-filter-options summary { min-height: 38px; padding: 10px 0; color: var(--th-text-2); font-size: 12px; cursor: pointer; }
.usage-custom-range-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 8px 0; }
.usage-record-filter-options { margin-top: 6px; }
.usage-secondary-filter-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 8px 0; }
.usage-overview-status { margin: 8px 0; color: var(--th-text-2); font-size: 12px; }
.usage-overview-status[hidden] { display: none; }
.usage-overview-status[data-state="error"] { color: var(--usage-error); }

/* 统计卡: 图标色块 + 文字块 (与概览 KPI 卡、参考项目 UsageStatsCards 同一形态)。
   此前是"整块 + 竖分隔线"(gap:0 / border-right / 无圆角), 图标还被推到右上角,
   与其它页面的卡片语言不一致。现在改为独立卡片, 图标在左。 */
.usage-stat-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 12px 0; padding: 0; border-bottom: 0; }
.usage-stat-card { display: flex; align-items: flex-start; gap: 11px; min-width: 0; min-height: 76px; padding: 12px 14px; border: 1px solid var(--th-border); border-radius: var(--radius-lg, .75rem); background: var(--th-surface-subtle, rgba(255,255,255,.03)); }
.usage-stat-icon { display: grid; place-items: center; flex: 0 0 auto; width: 32px; height: 32px; border-radius: var(--radius-md, .5rem); }
.usage-stat-icon svg { width: 16px; height: 16px; }
.usage-stat-icon.is-blue { color: var(--th-accent); background: color-mix(in srgb, var(--th-accent) 14%, transparent); }
.usage-stat-icon.is-purple { color: #a855f7; background: color-mix(in srgb, #a855f7 14%, transparent); }
.usage-stat-icon.is-emerald { color: var(--th-success); background: color-mix(in srgb, var(--th-success) 14%, transparent); }
.usage-stat-icon.is-amber { color: var(--th-warning); background: color-mix(in srgb, var(--th-warning) 14%, transparent); }
.usage-stat-icon.is-rose { color: var(--th-danger); background: color-mix(in srgb, var(--th-danger) 14%, transparent); }
.usage-stat-copy { display: grid; gap: 2px; min-width: 0; flex: 1 1 auto; }
.usage-stat-label { color: var(--th-text-2); font-size: 12px; }
.usage-stat-card strong { display: block; overflow: hidden; color: var(--th-text); font: 650 19px/1.15 'DM Mono', monospace; text-overflow: ellipsis; white-space: nowrap; }
.usage-stat-card p { margin: 0; overflow: hidden; color: var(--th-text-2); font: 12px/1.4 'DM Mono', monospace; text-overflow: ellipsis; white-space: nowrap; }
/* 主指标卡 (请求与成功率) 用强调色边框区分 */
.usage-stat-card--primary { border-color: color-mix(in srgb, var(--th-accent) 32%, var(--th-border)); background: color-mix(in srgb, var(--th-accent) 6%, var(--th-surface-subtle, rgba(255,255,255,.03))); }

.usage-record-tabs button:focus-visible,
.usage-detail-drawer button:focus-visible,
[data-usage-log-id]:focus-visible { outline: 2px solid var(--th-accent); outline-offset: 3px; }
.usage-detail-drawer[hidden],
.usage-detail-backdrop[hidden] { display: none; }
[data-usage-trend][hidden] { display: none; }

/* 布局由 ui-readability.css 的命名区域 (grid-template-areas) 接管;
   这里只保留默认两列, 避免未加载可读性样式时面板堆叠成单列。 */
.usage-chart-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 8px 24px; padding-top: 8px; align-items: start; }
.usage-section-intro { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.usage-section-intro h3 { color: var(--th-text); font: 650 16px/1.3 'Outfit', sans-serif; }
.usage-trend-selector { display: flex; align-items: center; gap: 8px; color: var(--th-text-2); font-size: 13px; }
.usage-trend-selector .input-apple, .usage-distribution-heading .input-apple { min-height: 36px; padding: 0 9px; border-radius: 6px; color: var(--th-text); font-size: 13px; }
.usage-chart-panel { min-width: 0; padding: 14px 0; border: 0; border-bottom: 1px solid var(--th-border); border-radius: 0; background: transparent; }
.usage-panel-heading { justify-content: space-between; gap: 12px; min-height: 36px; }
.usage-panel-heading h3 { color: var(--th-text); font: 650 14px/1.3 'Outfit', sans-serif; letter-spacing: 0; }
.usage-panel-heading p { margin-top: 4px; color: var(--th-text-2); font-size: 12px; }
.usage-panel-heading > span { color: var(--th-text-2); font: 12px 'DM Mono', monospace; }
.usage-chart-wrap { position: relative; width: 100%; height: 210px; margin-top: 9px; }
.usage-chart-wrap canvas { width: 100% !important; height: 100% !important; }
/* 用量分析默认两列面板网格 (ui-readability.css 在宽容器下补充高度约束)。
   每个面板 = 左侧环形图 + 右侧明细表, 对齐参考项目的分布卡结构。 */
.usage-distribution-grid { display: contents; }
.usage-donut-body { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 9px; align-items: center; }
.usage-donut-canvas { position: relative; height: 15rem; min-width: 0; }
.usage-donut-table-wrap { min-width: 0; max-height: 15.5rem; overflow: auto; }
.usage-donut-table { width: 100%; border-collapse: collapse; font: 12px 'DM Mono', monospace; }
.usage-donut-table th, .usage-donut-table td { padding: 2px 6px; text-align: right; white-space: nowrap; }
.usage-donut-table thead th { color: var(--th-text-2); font-weight: 400; border-bottom: 1px solid var(--th-border); }
.usage-donut-table thead th:first-child, .usage-donut-table tbody th { text-align: left; }
.usage-donut-table tbody tr + tr td, .usage-donut-table tbody tr + tr th { border-top: 1px solid color-mix(in srgb, var(--th-border) 55%, transparent); }
.usage-donut-name { display: inline-block; overflow: hidden; vertical-align: middle; max-width: 13rem; color: var(--th-text); text-overflow: ellipsis; white-space: nowrap; }
.usage-donut-dot { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; vertical-align: middle; }
.usage-donut-actual { color: var(--usage-success); }
.usage-donut-standard { color: var(--th-text-2); }
.usage-donut-cost { color: var(--usage-warning); }
.usage-donut-rest { color: var(--th-text-2); }
.usage-donut-user { display: inline-flex; max-width: 100%; align-items: center; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; }
.usage-donut-user:focus-visible { outline: 2px solid var(--th-accent); outline-offset: 2px; }
.usage-admin-distribution-heading { display: flex; min-width: 0; align-items: center; gap: 8px; }
.usage-admin-distribution-heading .input-apple { min-height: 32px; max-width: 11rem; padding: 0 8px; border-radius: 6px; color: var(--th-text); font-size: 12px; }
/* 主网格之外的可折叠维度区 (上游协议 / 入站端点 / 错误分类)。
   参考项目的用量页是标准 2x2, 额外维度收进折叠区可以保住"首屏看得见调用记录"。 */
.usage-extra-distributions { grid-column: 1 / -1; min-width: 0; }
.usage-extra-distributions > summary { cursor: pointer; color: var(--th-text-2); font-size: 12px; padding: 6px 0; }
.usage-distribution-grid--nested { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 24px; margin-top: 8px; }
/* 无数据的面板: 收起环形图占位, 不留空白空洞 (只显示一行"暂无分布数据")。 */
.usage-donut-panel[data-empty] .usage-donut-body { grid-template-columns: minmax(0, 1fr); }
.usage-donut-panel[data-empty] .usage-donut-canvas { display: none; }
.usage-donut-panel[data-empty] .usage-donut-table thead { display: none; }
/* 「按 Token / 按实际消费」切换: 与参考项目一致的两段式按钮。 */
.usage-metric-toggle { display: flex; flex-wrap: wrap; gap: 2px; padding: 2px; border: 1px solid var(--th-border); border-radius: 8px; }
.usage-metric-toggle button { padding: 3px 9px; border: 0; border-radius: 6px; background: transparent; color: var(--th-text-2); font-size: 12px; cursor: pointer; }
.usage-metric-toggle button.active { background: color-mix(in srgb, var(--th-accent) 16%, transparent); color: var(--th-text); }

.usage-trend-table { grid-column: 1 / -1; min-width: 0; }
.usage-trend-table .dashboard-data-scroll { max-height: 280px; overflow: auto; }
.usage-trend-table table { width: max-content; min-width: 100%; font-variant-numeric: tabular-nums; }
.usage-trend-table th, .usage-trend-table td { white-space: nowrap; }
.usage-records-section { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--th-border); }
.usage-records-intro { margin-bottom: 8px; }
#usage-records-panel:focus-visible { outline: 2px solid var(--th-accent); outline-offset: 3px; }
.usage-records-section-header { justify-content: space-between; gap: 12px; }
.usage-section-header-actions { display: flex; align-items: center; gap: 12px; }
.usage-scope-control { display: inline-grid; grid-template-columns: auto minmax(130px, 1fr); align-items: center; gap: 7px; color: var(--th-text-2); font-size: 12px; }
.usage-scope-control.hidden { display: none; }
.usage-scope-control .input-apple { height: 34px; min-width: 130px; padding: 0 8px; border-radius: 6px; color: var(--th-text); font-size: 12px; }
.usage-record-tabs { display: flex; gap: 4px; }
.usage-record-tabs button { min-height: 36px; padding: 0 13px; border-radius: 6px; color: var(--th-text-2); font-size: 12px; }
.usage-record-tabs button:hover { background: var(--usage-surface); color: var(--th-text); }
.usage-record-tabs button.active { background: var(--usage-surface-strong); color: var(--th-text); box-shadow: inset 0 -2px 0 var(--th-accent); }
.usage-record-count { color: var(--th-text-2); font: 12px 'DM Mono', monospace; }
.usage-filter-grid { display: grid; grid-template-columns: minmax(0, 320px) minmax(120px, 200px) minmax(120px, 180px) minmax(120px, 180px) auto; gap: 12px; align-items: end; margin-top: 16px; }
.usage-filter-control .input-apple { width: 100%; height: 38px; padding: 0 10px; border-radius: 7px; color: var(--th-text); font-size: 12px; }
.usage-filter-actions { gap: 6px; }
.usage-filter-actions .btn-glass,
.usage-filter-actions .btn-solid { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 11px; border-radius: 7px; font-size: 12px; white-space: nowrap; }
.usage-filter-actions svg { width: 14px; height: 14px; }
.usage-reset-button { width: 38px; padding: 0 !important; }
.usage-advanced-filters { display: grid; grid-template-columns: repeat(6, minmax(120px, 1fr)); gap: 9px; margin-top: 10px; padding: 12px; border: 1px solid var(--th-border); border-radius: 8px; background: var(--usage-surface); }
.usage-advanced-filters.hidden { display: none; }
.usage-admin-filters { display: contents; }
.usage-admin-filters.hidden { display: none; }

.usage-records-table { margin-top: 12px; overflow-x: auto; border: 1px solid var(--th-border); border-radius: 8px; }
/* 列宽按内容实测设定 (table-layout: fixed 下宽度就是硬约束, 给窄了内容会被截断/换行):
 *   tokens 现为「输入/输出 + 缓存读写」两行, performance 为「首字/耗时 + 条形图」两行,
 *   另有独立的「流」列; 三者都需要比原来更宽。min-width 同步上调, 让窄屏改为横向滚动
 *   而不是把每列都压扁。 */
.usage-records-table table { width: 100%; min-width: 1584px; table-layout: fixed; font-size: 13px; }
.usage-records-table table:has(th[data-usage-column="user"]) { min-width: 1680px; }
.usage-records-table th[data-usage-column="time"] { width: 172px; }
.usage-records-table th[data-usage-column="model"] { width: 152px; }
.usage-records-table th[data-usage-column="group"] { width: 112px; }
.usage-records-table th[data-usage-column="user"] { width: 96px; }
.usage-records-table th[data-usage-column="key"] { width: 112px; }
.usage-records-table th[data-usage-column="endpoints"] { width: 152px; }
.usage-records-table th[data-usage-column="tokens"] { width: 116px; }
.usage-records-table th[data-usage-column="performance"] { width: 126px; }
.usage-records-table th[data-usage-column="status"] { width: 108px; }
.usage-records-table th[data-usage-column="stream"] { width: 96px; }
/* table-layout:fixed 下, 未声明宽度的列会被压成 0 宽 (内容完全不可见)。
   新增的两列必须显式给宽, 并同步上调表的 min-width (见上), 否则总宽不足会横向溢出。 */
.usage-records-table th[data-usage-column="billingMode"] { width: 104px; }
.usage-records-table th[data-usage-column="reasoning"] { width: 96px; }
.usage-records-table th[data-usage-column="billing"] { width: 150px; }
.usage-endpoint-line { display: grid; gap: 2px; min-width: 0; }
.usage-endpoint-line + .usage-endpoint-line { margin-top: 6px; }
.usage-endpoint-line span { color: var(--th-text-2); font-size: 12px; }
.usage-endpoint-line code { color: var(--th-text); font: 12px/1.45 'DM Mono', monospace; white-space: normal; overflow-wrap: anywhere; }
.usage-records-table .usage-cell-primary, .usage-records-table .usage-cell-secondary { max-width: 100%; }
.usage-records-table th { padding: 10px 12px; border-bottom: 1px solid var(--th-border); color: var(--th-text-2); font-weight: 500; white-space: nowrap; }
.usage-records-table td { padding: 10px 8px; color: var(--th-text); vertical-align: middle; }
.usage-records-table th { padding-left: 8px; padding-right: 8px; }
.usage-records-table .usage-cell-primary { font-size: 13px; }
.usage-records-table tbody tr { border-bottom: 1px solid var(--th-border); cursor: pointer; transition: background 150ms ease; }
.usage-records-table tbody tr:last-child { border-bottom: 0; }
.usage-records-table tbody tr:hover { background: var(--usage-surface); }
.usage-cell-primary { display: block; max-width: 230px; overflow: hidden; color: var(--th-text); font: 12px 'DM Mono', monospace; text-overflow: ellipsis; white-space: nowrap; }
.usage-cell-secondary { display: block; max-width: 230px; margin-top: 4px; overflow: hidden; color: var(--th-text-2); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.usage-billing-cell { font-variant-numeric: tabular-nums; }
/* 实付列现在是最后一列 (原「详情」列已并入该格): 吸附到 right:0,
 * 否则会在右侧白留 52px 的旧详情列宽度。 */
.usage-records-table th[data-usage-column="billing"], .usage-records-table .usage-billing-cell {
  position: sticky; right: 0; background: var(--th-bg-2); box-shadow: -1px 0 0 var(--th-border);
}
.usage-fee-amount { white-space: nowrap; font-variant-numeric: tabular-nums; }
.usage-mobile-fee { grid-column: 1 / -1; border-top: 1px solid var(--th-border); padding-top: 10px; }
.usage-hover-cell { min-width: 0; }
.usage-metric-trigger { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 32px; padding: 0; color: var(--th-text); text-align: left; font-size: 13px; line-height: 1.4; font-variant-numeric: tabular-nums; white-space: nowrap; }
.usage-metric-trigger > svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--th-text-secondary); }
.usage-metric-trigger:hover > svg, .usage-metric-trigger[aria-expanded="true"] > svg { color: var(--th-accent); }
.usage-metric-trigger:focus-visible, .usage-detail-command:focus-visible { outline: 2px solid var(--th-accent); outline-offset: 3px; border-radius: 4px; }
.usage-compact-endpoint { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.usage-detail-command { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; color: var(--th-text-secondary); border-radius: 4px; }
.usage-detail-command:hover { background: var(--th-surface-muted); color: var(--th-accent); }
.usage-detail-command svg { width: 16px; height: 16px; }
.usage-hover-card { position: fixed; inset: auto; margin: 0; width: min(440px, calc(100vw - 24px)); max-height: min(580px, calc(100dvh - 24px)); padding: 16px; overflow: auto; overscroll-behavior: contain; border: 1px solid var(--th-border); border-radius: 8px; background: var(--th-bg-2); color: var(--th-text); box-shadow: 0 10px 32px rgb(0 0 0 / .22); letter-spacing: 0; }
.usage-hover-card h3 { margin: 0 0 14px; font-size: 14px; font-weight: 600; }
.usage-hover-card .usage-detail-field dt { color: var(--th-text-secondary); }
.usage-hover-card .usage-detail-field dd { font-size: 13px; }
.usage-hover-card::backdrop { background: transparent; pointer-events: none; }
.usage-record-card .usage-metric-trigger { min-height: 44px; }
.usage-inline-copy { display: inline-flex; align-items: center; gap: 5px; min-height: 24px; color: inherit; }
.usage-inline-copy svg { width: 12px; height: 12px; }
.usage-status-badge { display: inline-flex; align-items: center; gap: 5px; min-height: 23px; padding: 0 7px; border: 1px solid currentColor; border-radius: 5px; font: 12px 'DM Mono', monospace; }
.usage-status-badge.success { color: var(--usage-success); background: color-mix(in srgb, var(--usage-success) 9%, transparent); }
.usage-status-badge.error { color: var(--usage-error); background: color-mix(in srgb, var(--usage-error) 9%, transparent); }
/* 计费模式徽章: 计费单元不是状态 (没有好坏之分), 所以用中性/信息色而非红绿。
   按张/按条与按量用不同色相区分, 便于扫视时分辨。 */
.usage-mode-badge { display: inline-flex; align-items: center; min-height: 23px; padding: 0 7px; border: 1px solid color-mix(in srgb, var(--th-info) 35%, var(--th-border)); border-radius: 5px; color: var(--th-info); background: color-mix(in srgb, var(--th-info) 9%, transparent); font: 12px 'DM Mono', monospace; }
.usage-mode-badge[data-billing-mode="per_image"] { color: #c084fc; border-color: color-mix(in srgb, #c084fc 35%, var(--th-border)); background: color-mix(in srgb, #c084fc 9%, transparent); }
.usage-mode-badge[data-billing-mode="per_video"] { color: var(--th-warning); border-color: color-mix(in srgb, var(--th-warning) 35%, var(--th-border)); background: color-mix(in srgb, var(--th-warning) 9%, transparent); }
/* 订阅: 由自有账号的上游订阅额度承担, 平台不按量扣费 —— 用成功色与"按量"族区分开,
   便于一眼扫出哪些请求没有产生平台用量费。 */
.usage-mode-badge[data-billing-mode="subscription"] { color: var(--usage-success); border-color: color-mix(in srgb, var(--usage-success) 35%, var(--th-border)); background: color-mix(in srgb, var(--usage-success) 9%, transparent); }
/* 推理强度: 客户端请求的档位, 原样展示 (minimal/low/medium/high/xhigh/max)。 */
.usage-effort-badge { color: var(--th-text-secondary); font: 12px 'DM Mono', monospace; }
.usage-latency-good { color: var(--usage-success); }
.usage-latency-warning { color: var(--usage-warning); }
.usage-latency-error { color: var(--usage-error); }
.usage-records-mobile { display: none; }
.usage-pagination { justify-content: space-between; gap: 12px; min-height: 46px; color: var(--th-text-2); font: 12px 'DM Mono', monospace; }
.usage-pagination > div { gap: 6px; }
.usage-pagination button { min-height: 34px; display: inline-flex; align-items: center; gap: 4px; padding: 0 9px; border-radius: 6px; font-size: 12px; }
.usage-pagination svg { width: 13px; height: 13px; }
.usage-empty-state { grid-column: 1 / -1; display: grid; place-items: center; min-height: 96px; color: var(--th-text-2); font-size: 12px; text-align: center; }
.usage-loading-row td { height: 90px; color: var(--th-text-2); text-align: center; }
.usage-record-card { padding: 12px; border: 1px solid var(--th-border); border-radius: 8px; background: var(--usage-surface); }
.usage-record-card + .usage-record-card { margin-top: 8px; }
.usage-record-card header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.usage-record-card header > div { flex: 1; min-width: 0; }
.usage-record-card h3 { max-width: 100%; overflow: hidden; color: var(--th-text); font: 600 12px 'DM Mono', monospace; text-overflow: ellipsis; white-space: nowrap; }
.usage-record-card-subtitle { max-width: 100%; margin-top: 4px; overflow: hidden; color: var(--th-text-2); font: 12px/1.35 'DM Mono', monospace; text-overflow: ellipsis; white-space: nowrap; }
.usage-record-card dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 11px; }
.usage-record-card dt { color: var(--th-text-2); font-size: 12px; }
.usage-record-card dd { margin-top: 3px; overflow-wrap: anywhere; color: var(--th-text); font: 12px 'DM Mono', monospace; }

/* 请求详情改为居中弹窗 (原为右侧抽屉)。仍复用 #usage-detail-drawer 这个 id, 只是位置语义变了。 */
.usage-detail-backdrop { position: fixed; inset: 0; z-index: 118; visibility: hidden; opacity: 0; background: var(--usage-overlay); backdrop-filter: blur(6px); transition: opacity 180ms ease, visibility 180ms ease; }
.usage-detail-drawer { position: fixed; inset: 0; z-index: 119; display: grid; place-items: center; padding: 24px; visibility: hidden; }
.usage-detail-panel {
  width: min(760px, 100%); max-height: min(88dvh, 900px); display: flex; flex-direction: column;
  overflow: hidden; border: 1px solid var(--th-border); border-radius: 14px;
  background: var(--th-bg-2); color: var(--th-text); box-shadow: 0 28px 80px rgba(0, 0, 0, 0.48);
  transform: translateY(12px) scale(0.985); opacity: 0;
  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1), opacity 200ms ease;
}
.usage-detail-backdrop.open { visibility: visible; opacity: 1; }
.usage-detail-drawer.open { visibility: visible; }
.usage-detail-drawer.open .usage-detail-panel { transform: translateY(0) scale(1); opacity: 1; }
.usage-detail-panel > header { display: flex; align-items: center; justify-content: space-between; min-height: 64px; padding: 14px 18px; border-bottom: 1px solid var(--th-border); }
.usage-detail-panel > header span { color: var(--th-accent); font: 12px 'DM Mono', monospace; }
.usage-detail-panel > header h2 { margin-top: 3px; font: 650 16px 'Outfit', sans-serif; }
.usage-detail-panel > header button { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 7px; color: var(--th-text-2); }
.usage-detail-panel > header button:hover { color: var(--th-text); background: var(--usage-surface-strong); }
.usage-detail-panel > header svg { width: 18px; height: 18px; }
.usage-detail-content { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 18px 28px; }
.usage-detail-content:focus-visible { outline: 2px solid var(--th-accent); outline-offset: -3px; }
.usage-detail-section { padding: 14px 0; border-bottom: 1px solid var(--th-border); }
.usage-detail-section:first-child { padding-top: 0; }
.usage-detail-section:last-child { border-bottom: 0; }
.usage-detail-section h3 { margin-bottom: 10px; color: var(--th-text); font: 650 12px 'Outfit', sans-serif; }
.usage-detail-section:focus-visible { outline: 2px solid var(--th-accent); outline-offset: 4px; }
.usage-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
.usage-detail-field dt { color: var(--th-text-2); font-size: 12px; }
.usage-detail-field dd { margin-top: 4px; overflow-wrap: anywhere; color: var(--th-text); font: 12px/1.5 'DM Mono', monospace; }
.usage-detail-field.wide { grid-column: 1 / -1; }
body.usage-detail-open { overflow: hidden; }

@media (max-width: 1180px) {
  .usage-filter-grid { grid-template-columns: minmax(0, 320px) minmax(0, 1fr) minmax(0, 1fr); }
  .usage-records-header { align-items: flex-start; flex-direction: column; }
  .usage-toolbar-actions { justify-content: flex-start; width: 100%; }
  .usage-secondary-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .usage-advanced-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .usage-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .usage-filter-grid > label:first-child, .usage-filter-actions { grid-column: 1 / -1; }
  .usage-filter-grid > label:first-child { max-width: 320px; }
  .usage-records-page { padding: 12px 10px 28px; }
  .usage-records-header { gap: 12px; }
  .usage-records-section-header { align-items: flex-start; flex-direction: column; }
  .usage-section-header-actions { justify-content: space-between; width: 100%; }
  .usage-scope-control { flex: 1; }
  .usage-toolbar-actions { display: grid; grid-template-columns: minmax(0, 1fr) 44px 44px; }
  .usage-range-segment { grid-column: 1 / -1; width: 100%; }
  .usage-range-segment button { flex: 1; min-height: 38px; }
  .usage-date-control { grid-template-columns: 1fr; }
  .usage-date-control .input-apple { min-height: 44px; }
  .usage-custom-range[open] { grid-column: 1 / -1; }
  .usage-custom-range summary, .usage-record-filter-options summary { min-height: 44px; padding: 12px 0; }
  .usage-custom-range-fields { grid-template-columns: 1fr; }
  .usage-toolbar-actions .usage-icon-command { width: 44px; height: 44px; }
  .usage-stat-grid { grid-template-columns: repeat(5, minmax(150px, 1fr)); gap: 0; overflow-x: auto; overscroll-behavior-x: contain; }
  .usage-stat-card { padding: 3px 12px; }
  .usage-stat-card strong { font-size: 17px; }
  .usage-chart-grid { grid-template-columns: 1fr; gap: 8px; }
  .usage-section-intro { gap: 8px; }
  .usage-trend-selector .input-apple, .usage-distribution-heading .input-apple { min-height: 44px; }
  .usage-chart-panel { padding: 12px 0; }
  .usage-chart-wrap { height: 220px; }
  .usage-distribution-panel { grid-column: auto; }
  .usage-distribution-heading { align-items: center; }
  .usage-distribution-heading .usage-range-segment { margin-top: 8px; }
  .usage-distribution-list { grid-template-columns: 1fr; }
  .usage-distribution-row { grid-template-columns: minmax(0, 1fr); }
  .usage-advanced-filters { grid-template-columns: 1fr; }
  .usage-filter-control .input-apple { min-height: 44px; font-size: 16px; }
  .usage-filter-actions { gap: 4px; }
  .usage-reset-button { width: 44px; }
  .usage-filter-actions .btn-glass,
  .usage-filter-actions .btn-solid { min-height: 44px; }
  .usage-records-table { display: none; }
  .usage-records-mobile { display: block; margin-top: 10px; }
  .usage-pagination button { min-height: 44px; }
  /* 弹窗在窄屏贴近满宽, 但保留外圈留白以便点击遮罩关闭。 */
  .usage-detail-drawer { padding: 12px; }
  .usage-detail-panel { width: 100%; max-height: calc(100dvh - 24px); }
}

@media (max-width: 420px) {
  .usage-detail-grid { grid-template-columns: 1fr; }
  .usage-detail-field.wide { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .usage-detail-backdrop,
  .usage-detail-drawer,
  .usage-records-table tbody tr { transition: none; }
}
/* Immutable group IDs must wrap without widening the usage table or drawer. */
.usage-group-failover {
  max-width: 240px;
  overflow-wrap: anywhere;
  white-space: normal;
}

.usage-ranking-panel { margin-top: 16px; padding: 16px 0 4px; border-top: 1px solid var(--th-border); }
.usage-ranking-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.usage-ranking-heading h3 { color: var(--th-text); font: 650 16px/1.3 'Outfit', sans-serif; }
.usage-ranking-heading p { margin-top: 4px; color: var(--th-text-2); font-size: 12px; }
.usage-ranking-table-wrap { overflow-x: auto; border: 1px solid var(--th-border); border-radius: 8px; }
.usage-ranking-table-wrap table { min-width: 620px; }
.usage-ranking-table-wrap th, .usage-ranking-table-wrap td { padding: 10px 12px; border-bottom: 1px solid var(--th-border); white-space: nowrap; }
.usage-ranking-table-wrap tr:last-child td { border-bottom: 0; }
.usage-ranking-table-wrap td strong, .usage-ranking-table-wrap td small { display: block; }
.usage-ranking-table-wrap td small { margin-top: 3px; color: var(--th-text-2); font-size: 11px; }
.usage-ranking-mobile { display: none; }
.usage-ranking-card { padding: 12px; border: 1px solid var(--th-border); border-radius: 8px; background: var(--usage-surface); }
.usage-ranking-card + .usage-ranking-card { margin-top: 8px; }
.usage-ranking-card header { display: flex; justify-content: space-between; gap: 8px; color: var(--th-text); font: 600 12px 'DM Mono', monospace; }
.usage-ranking-card header span { color: var(--usage-success); }
.usage-ranking-card dl { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 10px; }
.usage-ranking-card dt { color: var(--th-text-2); font-size: 11px; }
.usage-ranking-card dd { margin-top: 3px; color: var(--th-text); font: 12px 'DM Mono', monospace; }
@media (max-width: 700px) { .usage-ranking-table-wrap { display: none; } .usage-ranking-mobile { display: block; } .usage-ranking-heading { align-items: flex-start; flex-direction: column; } }

/* ============ 顶格「模型排行」页 (所有登录用户) ============ */
/* 参考 new-api 排行榜: 热门模型堆叠图 + 双列榜单 + 厂商份额。 */
.ranking-section { padding: 16px; }
.ranking-total { color: var(--th-text); font: 600 20px 'DM Mono', monospace; }
.ranking-trend-wrap { height: 320px; }
.ranking-columns { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; }
@media (max-width: 1100px) { .ranking-columns { grid-template-columns: minmax(0, 1fr); } }

/* 双列榜单: 桌面端两列排布, 序号连续 (1-10 左, 11-20 右), 与 new-api 的 LLM 排行榜一致。 */
.ranking-board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 28px; margin: 0; padding: 0; list-style: none; counter-reset: ranking; }
.ranking-board-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 6px; border-bottom: 1px solid var(--th-border); }
.ranking-board-identity { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ranking-board-identity strong { color: var(--th-text); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranking-board-vendor { color: var(--th-text-2); font-size: 11px; font-style: italic; }
.ranking-board-metric { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.ranking-board-metric strong { color: var(--th-text); font: 600 13px 'DM Mono', monospace; white-space: nowrap; }
.ranking-board-unit { color: var(--th-text-2); font-size: 10px; font-weight: 400; }
.usage-rank-delta { font: 11px 'DM Mono', monospace; white-space: nowrap; }
.usage-rank-delta-up { color: var(--usage-success); }
.usage-rank-delta-down { color: var(--usage-error); }
.usage-rank-delta-flat { color: var(--th-text-2); }
.usage-rank-delta-new { color: var(--usage-info); }

/* 排名徽标: 前三名用金银铜区分 (与消费天梯榜同一套观感)。 */
.usage-rank-position { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; padding: 2px 6px; border-radius: 6px; color: var(--th-text-2); font: 600 12px 'DM Mono', monospace; }
.usage-rank-medal-gold { color: #e8b339; background: rgba(232, 179, 57, 0.12); box-shadow: inset 0 0 0 1px rgba(232, 179, 57, 0.3); }
.usage-rank-medal-silver { color: #b9c4d0; background: rgba(185, 196, 208, 0.12); box-shadow: inset 0 0 0 1px rgba(185, 196, 208, 0.28); }
.usage-rank-medal-bronze { color: #cd9268; background: rgba(205, 146, 104, 0.12); box-shadow: inset 0 0 0 1px rgba(205, 146, 104, 0.28); }

/* 复用使用分布的横条样式, 但排行榜的条更粗、留白更大。 */
.usage-rank-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.usage-rank-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; }
.usage-rank-body { display: grid; gap: 5px; min-width: 0; }
.usage-rank-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.usage-rank-model { color: var(--th-text); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usage-rank-value { color: var(--th-text); font: 600 12px 'DM Mono', monospace; white-space: nowrap; }
.usage-rank-track { height: 6px; overflow: hidden; border-radius: 3px; background: var(--usage-grid); }
.usage-rank-bar { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--usage-info), var(--usage-violet)); }
.usage-rank-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--th-text-2); font-size: 11px; }
.ranking-mini-stats { margin-bottom: 14px; }
@media (max-width: 700px) {
  .ranking-board { grid-template-columns: minmax(0, 1fr); }
  .ranking-trend-wrap { height: 240px; }
  .ranking-board-metric strong { font-size: 12px; }
}

/* ============ 调用日志列重做 (参考 new-api usage-logs) ============ */

/* --- Token 列: 主行 输入/输出, 副行 缓存读写 --- */
/* 触发按钮在表格里必须允许换行: .usage-metric-trigger 全局是 nowrap, 密排时会把
 * 「输入/输出 + 缓存读写」撑成一行而溢出列宽。这里在表格语境下改为可换行。 */
.usage-records-table .usage-metric-trigger { white-space: normal; flex-wrap: wrap; align-items: flex-start; }
/* 信息图标在换行后不应单独占一行: 与主行对齐 */
.usage-records-table .usage-metric-trigger > svg { align-self: center; }
.usage-token-pair { display: inline-flex; align-items: baseline; gap: 3px; font: 600 12.5px 'DM Mono', monospace; color: var(--th-text); }
.usage-token-sep { color: var(--th-text-2); font-weight: 400; }
.usage-token-cache { display: flex; flex-direction: column; gap: 1px; margin-top: 3px; color: var(--th-text-2); font: 10.5px 'DM Mono', monospace; }
.usage-token-cache span { display: block; white-space: nowrap; }

/* --- 模型 / 分组徽章 --- */
.usage-model-badge, .usage-group-badge {
  display: inline-flex; align-items: center; gap: 5px; max-width: 100%;
  padding: 2px 7px; border: 1px solid transparent; border-radius: var(--ui-radius-sm);
  font: 600 11px/1.5 'DM Mono', monospace;
}
.usage-model-badge svg, .usage-group-badge svg { width: 12px; height: 12px; flex-shrink: 0; }
.usage-model-badge-name, .usage-group-badge-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usage-group-badge { margin-bottom: 2px; }

/* --- 流列 --- */
.usage-stream { display: flex; flex-direction: column; gap: 2px; }
.usage-stream-kind { font-size: 12px; font-weight: 600; color: var(--th-text-2); }
.usage-stream[data-stream='true'] .usage-stream-kind { color: var(--usage-info); }
.usage-stream .usage-cell-secondary { margin-top: 0; font: 10.5px 'DM Mono', monospace; white-space: nowrap; }

/* --- 性能列: 首字 / 耗时 两行 + 状态条形图 --- */
/* 条形为两段竖条: 上段=首字状态, 下段=总耗时状态 (非流式只有一段)。
 * 颜色语义与参考实现一致: 首字 <5s / <10s / 其余; 总耗时优先按吞吐判定。 */
.usage-timing { display: inline-flex; align-items: stretch; gap: 7px; }
.usage-timing-bar { display: flex; flex-direction: column; width: 3px; min-height: 26px; overflow: hidden; border-radius: 2px; background: var(--usage-grid); flex-shrink: 0; }
.usage-timing-seg { flex: 1; }
.usage-timing-seg[data-variant='success'] { background: var(--usage-success); }
.usage-timing-seg[data-variant='warning'] { background: var(--usage-warning); }
.usage-timing-seg[data-variant='danger'] { background: var(--usage-error); }
.usage-timing-seg[data-variant='neutral'] { background: var(--th-text-2); opacity: .45; }
.usage-timing-rows { display: flex; flex-direction: column; justify-content: center; gap: 1px; }
.usage-timing-row { display: flex; align-items: baseline; gap: 6px; font-size: 11.5px; line-height: 1.35; }
.usage-timing-label { color: var(--th-text-2); flex-shrink: 0; }
.usage-timing-value { font: 600 11.5px 'DM Mono', monospace; font-variant-numeric: tabular-nums; color: var(--th-text); }
.usage-timing-value[data-variant='success'] { color: var(--usage-success); }
.usage-timing-value[data-variant='warning'] { color: var(--usage-warning); }
.usage-timing-value[data-variant='danger'] { color: var(--usage-error); }
.usage-timing-value[data-variant='neutral'] { color: var(--th-text-2); }

/* --- 实付列: 金额 + 收费基准预览 (整行可点进详情) --- */
.usage-billing-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.usage-billing-basis {
  display: inline-flex; align-items: center; gap: 3px; max-width: 100%;
  padding: 1px 4px; border: 1px solid transparent; border-radius: var(--ui-radius-sm);
  background: transparent; color: var(--th-text-2); font: 10.5px 'DM Mono', monospace;
}
.usage-billing-basis span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usage-billing-basis svg { width: 11px; height: 11px; flex-shrink: 0; }
.usage-billing-basis:hover { color: var(--th-text); background: var(--th-surface-muted); border-color: var(--th-border); }
.usage-billing-basis:focus-visible { outline: 2px solid var(--th-accent); outline-offset: 2px; }

/* 移动卡片: 徽章行与性能行在窄屏下换行 */
@media (max-width: 900px) {
  .usage-record-card header > div { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
  .usage-timing-bar { min-height: 22px; }
}