/* Public source: user-requested consistent readable UI, Web Awesome 3.12 design tokens.
   Legacy per-page CSS uses px/important. This final semantic layer owns typography. */
:root {
  --ui-text-scale: 1;
  --ui-density: 1;
  --ui-chart-height: 20rem;
  --ui-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --ui-small: calc(.875rem * var(--ui-text-scale));
  --ui-body: calc(1rem * var(--ui-text-scale));
  --ui-section: calc(1.125rem * var(--ui-text-scale));
  --ui-title: calc(1.5rem * var(--ui-text-scale));
  --ui-metric: calc(1.75rem * var(--ui-text-scale));
  --ui-space: calc(1rem * var(--ui-density));
  --ui-control: calc(2.5rem * var(--ui-density) + .5rem * (var(--ui-text-scale) - 1));
}
:is(#console-content > .page-container:not(#page-landing), #app-header-bar, .console-sider, .modal-apple, .after-sales-dialog, .display-settings-dialog, .usage-detail-drawer, .support-compose-dialog) {
  font-family: var(--ui-font-family) !important;
  font-size: var(--ui-body);
  line-height: 1.55;
  letter-spacing: normal;
  font-variant-numeric: tabular-nums;
}
:is(.console-page-v3, .usage-records-page, .support-page, #app-header-bar, .console-sider, .modal-apple, .after-sales-dialog, .usage-detail-drawer) :is(h1,h2,h3,h4,p,label,button,input,select,textarea,th,td,dt,dd,.font-title) {
  font-family: var(--ui-font-family) !important;
  letter-spacing: normal !important;
}
:is(#console-content > .page-container:not(#page-landing), .modal-apple, .after-sales-dialog, .usage-detail-drawer) :is(p,label,input,select,textarea) { font-size: var(--ui-body) !important; line-height:1.55 !important; }
:is(#console-content > .page-container:not(#page-landing),#app-header-bar,.console-sider,.modal-apple,.after-sales-dialog,.usage-detail-drawer) :is(button,small,th,td,dt,summary,.text-xs,.text-sm,.badge-apple) { font-size:var(--ui-small) !important; line-height:1.5 !important; }
:is(#console-content > .page-container:not(#page-landing),#app-header-bar,.console-sider,.modal-apple,.after-sales-dialog,.usage-detail-drawer) :is([class~="text-[8px]"],[class~="text-[9px]"],[class~="text-[10px]"],[class~="text-[10.5px]"],[class~="text-[11px]"],[class~="text-[11.5px]"],[class~="text-[12px]"],[class~="text-[12.5px]"],[class~="text-[13px]"]) { font-size:var(--ui-small) !important; line-height:1.5 !important; }
:is(#console-content > .page-container:not(#page-landing),.modal-apple,.after-sales-dialog) :is(h1,.console-page-heading h1,.usage-records-title h2) { font-size:var(--ui-title) !important; line-height:1.3 !important; font-weight:650; }
:is(#console-content > .page-container:not(#page-landing),.modal-apple,.after-sales-dialog) :is(h2,h3,h4) { font-size:var(--ui-section) !important; line-height:1.4 !important; }
:is(#console-content > .page-container:not(#page-landing),.modal-apple,.after-sales-dialog) :is(input:not([type=checkbox]):not([type=radio]),select,.btn-glass,.btn-solid) { height:auto !important; min-height:var(--ui-control); }
:is(#console-content > .page-container:not(#page-landing),.modal-apple,.after-sales-dialog) :is(table td,table th) { padding-block:calc(.75rem * var(--ui-density)); }
.console-sider .sider-nav-item { min-height:var(--ui-control); height:auto; }
#app-header-bar .theme-menu { width:min(22rem,calc(100vw - 1rem)); max-height:80dvh; overflow:auto; }
#app-header-bar :is(.theme-option,.display-settings-entry) { min-height:2.75rem; white-space:normal; }
#header-role-badge,#header-balance,#header-username { font-size:var(--ui-small) !important; }
/* 顶部用户胶囊必须撑不进 52px 的头部框: 它内部是"名称+徽章"与"余额"两行, 而字号层
   会强制 line-height:1.5, 两行叠加就超过头部高度, 表现为内容溢出顶部框。
   这里收紧行高并限制胶囊高度, 同时允许绝对定位的用户菜单显示在胶囊外。 */
#header-user-capsule { max-height:calc(var(--app-header-height) - 6px); overflow:visible; }
#header-user-capsule #header-username,
#header-user-capsule #header-balance,
#header-user-capsule #header-role-badge { line-height:1.15 !important; }
#header-user-capsule > div > div { flex-wrap:nowrap; min-width:0; }
#header-user-capsule #header-role-badge,
#header-user-capsule #header-tier-badge { flex-shrink:0; }
#header-user-capsule #header-balance { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.display-settings-entry { display:flex; align-items:center; gap:.75rem; width:100%; padding:.75rem; color:var(--th-text); border-bottom:1px solid var(--th-border); text-align:left; }
.display-settings-entry svg { width:1.125rem; height:1.125rem; flex-shrink:0; }

/* Same-rank labels and metrics, including legacy important declarations. */
html body #page-dashboard :is(.bento-label,.bento-sub,#dash-billing-scope,#dash-billing-summary dt,#dash-billing-summary p,.ds-health-rows > div,.ds-donut-label,.text-xs,small,[class*="text-[9"],[class*="text-[10"],[class*="text-[11"]) { font-size:var(--ui-small) !important; }
html body #page-dashboard .bento-value { font-family:var(--ui-font-family) !important; font-size:var(--ui-metric) !important; line-height:1.25; white-space:normal; overflow-wrap:anywhere; }
#page-dashboard #dash-status-text { font-size:var(--ui-section) !important; }
/* 指标区: 4 列等宽网格 (原先靠 tailwind 的 grid-cols-* 类, 与这里的列数定义重复)。 */
#page-dashboard .dashboard-metrics-v3 { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--ui-space); }
/* 指标卡 = 图标方块 + 文字块 (参考 sub2api 概览的统计卡): 图标给出类别, 数值是主角,
   累计/说明是附注。统一三行结构后四张卡高度自然一致。 */
#page-dashboard .bento-metric {
  display:flex; align-items:flex-start; gap:12px;
  padding:var(--ui-space) !important; border:1px solid var(--th-border);
  border-radius:var(--radius-lg, .75rem); background:var(--th-surface-subtle, rgba(255,255,255,.03)) !important; box-shadow:none;
}
#page-dashboard .bento-icon { display:grid; place-items:center; flex:0 0 auto; width:36px; height:36px; border-radius:var(--radius-md, .5rem); }
#page-dashboard .bento-icon svg { width:18px; height:18px; }
#page-dashboard .bento-icon.is-blue { color:var(--th-accent); background:color-mix(in srgb, var(--th-accent) 14%, transparent); }
#page-dashboard .bento-icon.is-purple { color:#a855f7; background:color-mix(in srgb, #a855f7 14%, transparent); }
#page-dashboard .bento-icon.is-emerald { color:var(--th-success); background:color-mix(in srgb, var(--th-success) 14%, transparent); }
#page-dashboard .bento-icon.is-amber { color:var(--th-warning); background:color-mix(in srgb, var(--th-warning) 14%, transparent); }
#page-dashboard .bento-copy { display:grid; gap:2px; min-width:0; flex:1 1 auto; }
#page-dashboard .bento-label { color:var(--th-text-secondary) !important; }
#page-dashboard .bento-value { margin:0 !important; }
#page-dashboard .bento-value.is-cost { color:var(--th-success) !important; }
#page-dashboard .bento-sub { color:var(--th-text-2); font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
#page-dashboard .bento-sub b { color:var(--th-text-secondary); font-weight:600; }
#page-dashboard .bento-metric--status { border-color:color-mix(in srgb, var(--th-accent) 35%, var(--th-border)); background:color-mix(in srgb, var(--th-accent) 8%, transparent) !important; }
#page-dashboard .bento-metric--status .bento-icon { background:color-mix(in srgb, var(--th-warning) 16%, transparent); }
/* 指标卡区保留上下留白; 费用条自带 border-block 与内边距, 不再叠加外边距
   (叠加会把它重新撑成一块高区, 与"单行紧凑条"的目标相悖)。 */
#page-dashboard .dashboard-metrics-v3 { margin-block:var(--ui-space); padding-bottom:var(--ui-space); }
/* 主图与状态卡配对后列宽改为约 1.35:1 —— 趋势图不再需要 1.6fr 的宽度,
   同时右侧状态卡需要足够宽度容纳环形图 + 三行指标。 */
/* align-items 用默认的 stretch 而非 start: start 会让同排两张卡各自只占内容高度,
   底边参差不齐 (实测 496/409、349/220、246/156), 每行下方留出一个空洞 —— 这正是
   "布局乱"的直接来源。stretch 让同一行的卡片等高、底边对齐。 */
#page-dashboard .dashboard-main-grid { grid-template-columns:minmax(0,1.35fr) minmax(19rem,1fr); gap:var(--ui-space) calc(var(--ui-space) * 2); }
/* 信息层级: 用命名区域把「主图 + 状态」配成对, 而不是让主图独占整行。
   独占整行时趋势图在 1440 视口被拉成 1145×320 (3.6:1), 折线几乎是一条水平带;
   参考 sub2api 概览「折线趋势 + 环形分布」的配对方式, 主图与状态卡并排 (约 2:1),
   后续区块也两两成对, 收尾不再出现半屏空行。
   范围筛选原本是网格之外的独立一行, 浮动在指标区与主图之间切断层级;
   现在作为网格首行整宽区域, 与卡片同处一个网格流。 */
#page-dashboard .dashboard-main-grid {
  grid-template-areas:
    "toolbar toolbar"
    "trend health"
    "recent performance"
    "actions announcements";
}
#page-dashboard .dashboard-main-grid > .dashboard-trend-toolbar { grid-area:toolbar; margin-bottom:calc(var(--ui-space) * -.5); }
#page-dashboard [data-dashboard-section="trend"] { grid-area:trend; }
#page-dashboard [data-dashboard-section="health"] { grid-area:health; }
#page-dashboard [data-dashboard-section="recent"] { grid-area:recent; }
#page-dashboard [data-dashboard-section="performance"] { grid-area:performance; }
#page-dashboard [data-dashboard-section="actions"] { grid-area:actions; }
#page-dashboard [data-dashboard-section="announcements"] { grid-area:announcements; }
/* 趋势卡表头原有一条 border-bottom 下划线, 但它只存在于这一个区块 —— 其余五个区块的表头
   都没有, 于是看起来像在标示什么特殊含义, 实际上什么都不代表。这里去掉, 六张卡保持一致;
   区块之间的分隔由每张卡自身的卡片边框承担。
   卡片内部用 flex 列布局: 表头贴顶, 正文吃掉剩余高度 (否则等高拉伸后内容顶在上方)。 */
#page-dashboard .dashboard-section { display:flex; flex-direction:column; padding-block:var(--ui-space); }
#page-dashboard .dashboard-section > :not(header) { flex:1 1 auto; min-height:0; }
#page-dashboard #dash-trend-chart { height:var(--ui-chart-height); min-height:var(--ui-chart-height); }
#page-dashboard .dashboard-health { align-content:center; }
/* 内容比同排另一张卡矮时 (如"性能监测"暂无数据、"系统公告"只有一条):
   用 auto 外边距在剩余空间里垂直居中, 内容填满时自动归零、不影响正常排布。
   列表类 (最近调用/趋势表) 保持顶部对齐 —— 列表居中会让人找不到第一条。 */
#page-dashboard [data-dashboard-section="health"] > :not(header),
#page-dashboard [data-dashboard-section="performance"] > :not(header),
#page-dashboard [data-dashboard-section="announcements"] > :not(header) { margin-block:auto; }
#page-dashboard .dashboard-health { min-height:var(--ui-chart-height); grid-template-columns:minmax(7rem,9rem) minmax(0,1fr); }
#page-dashboard .dashboard-section > header { min-height:var(--ui-control); margin-bottom:var(--ui-space); }
#page-dashboard .dashboard-section > header select { max-width:100%; }
/* 优先用内容高度 (dashboard-charts.js 写入 --chart-h), 没有时回退到统一图表高度。 */
#page-dashboard .dashboard-model-chart { height:var(--chart-h, var(--ui-chart-height)); }
#page-dashboard .dashboard-model-legend span { font-size:var(--ui-small); }
#page-dashboard .dashboard-quick-actions button { padding:.75rem; min-height:var(--ui-control); }

/* Chart containers respond to the available content width, including sidebars. */
#page-logs { container-type:inline-size; }
#page-logs :is(.usage-stat-heading,.usage-record-count,.usage-overview-status,.usage-date-control span,.usage-filter-control span,.usage-cell-secondary,.usage-cell-primary,.usage-distribution-value,.usage-distribution-label,.usage-panel-heading > span,.usage-endpoint-line span,.usage-endpoint-line code) { font-size:var(--ui-small) !important; line-height:1.5; }
#page-logs .usage-stat-card strong { font-family:var(--ui-font-family); font-size:var(--ui-section); line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#page-logs .usage-stat-card p { font-size:var(--ui-small) !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#page-logs .usage-stat-grid { grid-template-columns:repeat(auto-fit,minmax(11rem,1fr)); gap:var(--ui-space); padding-block:.5rem; }
/* 统计卡恢复卡片面 + 主指标高亮: 5 张同权透明卡让"请求/成功率"与"异常"看起来一样重要。 */
#page-logs .usage-stat-card { padding:.375rem .5rem; border:1px solid var(--th-border); border-radius:var(--radius-lg, .75rem); min-height:0; background:var(--th-surface-subtle, rgba(255,255,255,.03)); }
#page-logs .usage-stat-card--primary { border-color:color-mix(in srgb, var(--th-accent) 32%, var(--th-border)); }
/* 用量分析: 2 列面板网格, 每个面板 = 左侧环形图 + 右侧明细表 (对齐参考项目的分布卡)。
   趋势面板与分布面板同处这一网格 —— 隐藏的面板不占格, 所以切换「趋势指标」不会挤动布局。
   之前趋势图横跨整宽, 在 1100px+ 视口被拉成 ~3.5:1 的扁带, 折线看不出起伏。
   align-items 用默认 stretch: 同排两卡等高, 内部再用 auto 外边距让内容垂直居中。 */
#page-logs .usage-chart-grid { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--ui-space) calc(var(--ui-space) * 2); }
/* 分布面板容器不生成自己的盒子, 直接融入父网格 —— 这样所有面板共享同一条 2 列流,
   插入趋势面板时不需要为它单独占位或计算 grid-area。 */
#page-logs .usage-distribution-grid { display:contents; }
/* 折叠区里的维度网格需要自成盒子 (不能 display:contents), 否则它的面板会与主网格混排。 */
#page-logs .usage-distribution-grid--nested { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
#page-logs .usage-chart-panel { display:flex; flex-direction:column; }
/* 必须带 [hidden] 守卫: 上面的 id+class 选择器优先级 (1,1,0) 高于 usage-records.css 里
   原有的 [data-usage-trend][hidden] (0,2,0); 不补的话 display:flex 会把 4 个隐藏的趋势面板
   全部显示出来。这是 [hidden] 被 display 覆盖的经典坑。 */
#page-logs .usage-chart-panel[hidden] { display:none; }
/* 趋势图保持稳定高度; 移动端继续使用 usage-records.css 的单列尺寸。 */
#page-logs .usage-chart-panel > .usage-chart-wrap { margin-block:auto; }
#page-logs .usage-section-intro { grid-column:1 / -1; flex-wrap:wrap; min-height:0; padding-block:0; }
#page-logs .usage-trend-table { grid-column:1 / -1; }
/* 四列指标切换 (按 Token / 按实际消费) 收在标题右侧, 与参考项目一致。 */
#page-logs .usage-metric-toggle { display:flex; gap:2px; padding:2px; border:1px solid var(--th-border); border-radius:8px; flex-wrap:wrap; }
#page-logs .usage-metric-toggle button { padding:3px 9px; border:0; border-radius:6px; background:transparent; color:var(--th-text-2); font-size:12px; cursor:pointer; }
#page-logs .usage-metric-toggle button.active { background:color-mix(in srgb, var(--th-accent) 16%, transparent); color:var(--th-text); }
/* 环形图 + 表格并排; 表格可纵向滚动, 高度与环形图对齐。 */
#page-logs .usage-donut-body { display:grid; grid-template-columns:6.5rem minmax(0,1fr); gap:.6rem; align-items:center; flex:1; min-height:0; }
#page-logs .usage-donut-canvas { position:relative; height:15rem; min-width:0; }
#page-logs .usage-donut-table-wrap { min-width:0; max-height:15.5rem; overflow:auto; }
#page-logs .usage-donut-table { width:100%; border-collapse:collapse; font-size:12px; }
#page-logs .usage-donut-table th, #page-logs .usage-donut-table td { padding:.25rem .375rem; text-align:right; white-space:nowrap; }
#page-logs .usage-donut-table thead th { color:var(--th-text-2); font-weight:400; border-bottom:1px solid var(--th-border); }
#page-logs .usage-donut-table thead th:first-child, #page-logs .usage-donut-table tbody th { text-align:left; }
#page-logs .usage-donut-table tbody tr + tr td, #page-logs .usage-donut-table tbody tr + tr th { border-top:1px solid color-mix(in srgb, var(--th-border) 55%, transparent); }
#page-logs .usage-donut-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:13rem; display:inline-block; vertical-align:middle; color:var(--th-text); }
#page-logs .usage-donut-dot { display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:5px; vertical-align:middle; }
#page-logs .usage-donut-actual { color:var(--usage-success); }
#page-logs .usage-donut-standard { color:var(--th-text-2); }
#page-logs .usage-donut-cost { color:var(--usage-warning); }
#page-logs .usage-donut-rest { color:var(--th-text-2); }
#page-logs .usage-metric-toggle[hidden] { display:none; }
#page-logs .usage-panel-heading { align-items:flex-start; flex-wrap:wrap; }
#page-logs .usage-filter-grid { grid-template-columns:repeat(auto-fit,minmax(10rem,1fr)); }
#page-logs :is(.usage-records-header,.usage-records-section-header,.usage-section-header-actions,.usage-record-tabs,.usage-pagination) { flex-wrap:wrap; gap:.75rem; }
#page-logs .usage-record-tabs button { min-height:var(--ui-control); white-space:normal; }
#page-logs .usage-date-control { grid-template-columns:1fr; }
#page-logs .usage-distribution-heading .usage-range-segment { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.25rem; }
#page-logs .usage-trend-selector { flex-wrap:wrap; }
@container (min-width:58.001rem) {
  #page-logs .usage-chart-grid { align-items:stretch; }
  #page-logs .usage-panel-heading { min-height:1.5rem; align-content:center; }
  #page-logs .usage-chart-wrap { height:250px; }
  #page-logs .usage-chart-panel { padding-block:.25rem; }
}
@container (max-width: 58rem) {
  #page-logs .usage-chart-grid { grid-template-columns:minmax(0,1fr); }
  #page-logs .usage-distribution-grid--nested { grid-template-columns:minmax(0,1fr); }
  /* 单列时环形图 + 表格不再并排, 改为上下堆叠并居中。 */
  #page-logs .usage-donut-body { grid-template-columns:minmax(0,1fr); }
  #page-logs .usage-donut-canvas { height:15rem; }
}
html[data-ui-large-text="true"] #page-logs .usage-chart-grid { grid-template-columns:minmax(0,1fr); }
html[data-ui-large-text="true"] #page-logs .usage-donut-body { grid-template-columns:minmax(0,1fr); }
html[data-ui-large-text="true"] #page-dashboard .dashboard-main-grid { grid-template-columns:minmax(0,1fr); grid-template-areas:"toolbar" "trend" "health" "recent" "performance" "actions" "announcements"; }
html[data-ui-large-text="true"] #page-dashboard .dashboard-health { min-height:0; }
/* 窄屏折叠成单列: 必须同时改写 grid-template-areas, 否则两列的区域字符串
   会在单列网格里生成一个隐式的第二列, 内容被挤成半宽。 */
@media (max-width:1100px) {
  #page-dashboard .dashboard-main-grid { grid-template-columns:minmax(0,1fr); grid-template-areas:"toolbar" "trend" "health" "recent" "performance" "actions" "announcements"; }
  #page-dashboard .dashboard-health { min-height:0; }
  #page-dashboard .dashboard-metrics-v3 { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:600px) {
  #page-logs .usage-stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  /* 指标卡在窄屏必须落到单列: 两列时每张仅约 177px, 金额会被拆行成 "$12.48 / 06"
     (实测)。console.css 里虽有单列规则, 但它被本层同名的 #page-dashboard 规则盖过,
     因此断点要写在生效的这一层。 */
  #page-dashboard .dashboard-metrics-v3 { grid-template-columns:minmax(0,1fr); }
  #page-dashboard .dashboard-health { grid-template-columns:7rem minmax(0,1fr); }
  #app-header-bar { padding-inline:.625rem; }
  #app-header-bar .app-header-actions { gap:.375rem; }
}

/* 原「显示设置」独立对话框已并入主题定制面板; 这里只保留其入口行样式 (语言切换行仍复用)。 */
.display-settings-entry:focus-visible { outline:2px solid var(--th-accent); outline-offset:3px; }