/* TokenShop 客户查询页样式
 * 由 templates/customer.html 的内联 <style> 块抽出（2026-10-30），
 * 目的是让 CSP style-src 'self' 能通过，不再依赖 inline style。
 */
    .meter-shell { max-width: 480px; margin: 0 auto; }
    .query-card { position: sticky; top: 0; z-index: 10; display: grid; gap: 10px; padding: 12px; }
    .query-card .query-row { display: flex; gap: 8px; align-items: flex-start; }
    .key-full-input { flex: 1; min-width: 0; word-break: break-all; white-space: pre-wrap; overflow-wrap: anywhere; font-family: Consolas, "Cascadia Mono", monospace; font-size: 13px; line-height: 1.4; resize: vertical; min-height: 40px; max-height: 120px; }
    .name-range-row { display: flex; justify-content: flex-end; align-items: center; gap: 8px; flex-wrap: nowrap; }
    .name-range-row .package-name { color: var(--ink); font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
    .model-line { color: var(--primary); font-size: 12px; font-weight: 600; margin-bottom: 8px; overflow: hidden; text-overflow: ellipsis; }
    .model-name-badge { display: inline-block; align-self: flex-start; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--primary); background: var(--surface-soft); border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; font-size: 11px; font-weight: 600; line-height: 16px; }
    .model-name-badge:empty { display: none; }
    .model-name-raw { display: none; }
    .meter-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
    .meter-head .meter-title { font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
    .meter-head-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
    #meter-summary { color: var(--muted); font-size: 11px; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; }
    .meter-total { color: var(--muted); font-size: 11px; line-height: 1.3; }
    .collapse-btn { border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 6px; min-height: 28px; padding: 4px 10px; font-size: 12px; cursor: pointer; white-space: nowrap; }
    .collapse-btn:hover { background: var(--surface-soft); }
    .stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
    .stat-cell { border: 1px solid var(--line); border-radius: 6px; background: var(--surface); padding: 8px 10px; }
    .stat-cell.stat-cell-wide { grid-column: 1 / -1; background: var(--surface-soft); border-color: var(--primary); }
    .stat-cell .stat-filter-label { display: inline; color: var(--primary); font-weight: 600; font-size: 11px; margin-left: 6px; white-space: nowrap; }
    .stat-cell .stat-value { display: inline; font-size: 18px; font-weight: 700; color: var(--ink); font-family: Consolas, monospace; }
    .stat-cell .stat-caption { display: none; }
    .records-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
    .records-head .records-title { font-weight: 700; font-size: 14px; }
    .records-actions { display: flex; gap: 6px; flex-wrap: wrap; }
    .num-col { text-align: right; }
    .usage-record-table { width: 100%; table-layout: fixed; }
    .usage-record-table { min-width: 0 !important; }
    .customer-records-desktop { overflow-x: visible; }
    .usage-record-table th.time-col, .usage-record-table td.time-col { width: 62px; }
    .usage-record-table th.usage-col, .usage-record-table td.usage-col { width: auto; }
    .usage-record-table th.usage-col { padding-left: 60px; text-align: left; }
    .usage-record-table th.cache-col, .usage-record-table td.cache-col { width: 96px; }
    .usage-record-table th.speed-col, .usage-record-table td.speed-col { width: 72px; }
    .usage-record-table th.cache-hit-col, .usage-record-table td.cache-hit-col { width: 62px; }
    .usage-record-table td.num-col, .usage-record-table th.num-col { text-align: right; }
    .usage-record-table th, .usage-record-table td { padding: 3px 4px; font-size: 12px; vertical-align: top; line-height: 1.2; }
    .usage-record-table .time-col { width: 62px; }
    .usage-record-table .usage-col { width: auto; }
    .usage-record-table .cache-col { width: 96px; }
    .usage-record-table .speed-col { width: 72px; }
    .usage-record-table .cache-hit-col { width: 62px; }
    .record-time-cell { white-space: nowrap; }
    .record-time-date { color: var(--ink); font-size: 11px; line-height: 1.15; }
    .record-time-hour { color: var(--muted); font-size: 10px; line-height: 1.15; }
    .token-stack { padding-left: 56px; text-align: left; font-family: Consolas, monospace; line-height: 1.2; }
    .token-stack .tk-label { color: var(--muted); font-size: 9px; }
    .token-stack .tk-val { color: var(--ink); font-size: 11px; }
    .usage-record-table th.cache-col, .usage-record-table td.cache-col { padding-right: 32px; }
    .usage-record-table th.speed-col, .usage-record-table td.speed-col { padding-right: 24px; }
    .record-status { margin-top: 3px; color: var(--muted); font-size: 9px; white-space: nowrap; }
    .record-status.bad { color: #a23425; }
    .speed-col, .cache-col, .cache-hit-col { font-family: Consolas, monospace; font-size: 11px; }
    .mobile-record-time .rec-date { color: var(--ink); }
    .mobile-record-time .rec-hour { color: var(--muted); font-size: 11px; }
    .mobile-token-row { display: flex; flex-direction: column; gap: 2px; font-family: Consolas, monospace; font-size: 12px; }
    .mobile-token-row .mtk-label { color: var(--muted); font-size: 10px; }
    .mobile-record-meta { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--muted); margin-top: 4px; flex-wrap: wrap; }
    .record-range-switch { display: flex; flex-wrap: nowrap; gap: 4px; }
    .record-range-switch button { min-height: 26px; padding: 3px 6px; font-size: 11px; white-space: nowrap; }
    .usage-records-panel { padding: 14px; }
    #query-card .status-banner.hidden { display: none; }
    @media (max-width: 560px) {
      .usage-record-table .time-col { width: 58px; }
    }
    .records-pager { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 10px; }
    .records-pager.hidden { display: none; }
    .pager-info { font-size: 12px; color: var(--muted); min-width: 86px; text-align: center; }
    .records-pager button { min-height: 26px; padding: 2px 10px; font-size: 11px; }