/* ═════════════════════════════════════════════════════════════════════════
 * admin 设计系统（2026-10 重做）：紧凑数据后台风格，参考 Grafana / Linear。
 *   1. Token     颜色 / 间距 / 圆角 / 字号，:root 暗色，[data-theme="light"] 亮色
 *   2. Base      reset、排版、原生控件
 *   3. Shell     侧栏（窄屏抽屉）、主区、页面标题栏、工具栏、子页签
 *   4. 组件       panel / kpi / table / 表单 / 按钮 / 徽章 / 弹窗 / toast / 需要处理清单
 *   5. 页面     各页面组件覆盖不到的少量规则（按页分节）。
 * 图表调色板 --chart-1..8 与 js/helpers.js 的 PALETTE 保持一致（canvas 只吃具体色值）。
 * ═════════════════════════════════════════════════════════════════════════ */

/* ═══════ 1. Token ═══════ */
:root {
  color-scheme: dark;

  --bg-app: #0d0f13;
  --bg-surface: #14171c;
  --bg-raised: #1a1e25;
  --bg-inset: #101318;
  --bg-hover: rgba(255,255,255,0.045);
  --bg-active: rgba(255,255,255,0.08);

  --line: #232831;
  --line-strong: #323844;

  --fg: #e4e7ec;
  --fg-muted: #9ba3af;
  --fg-subtle: #6b7380;

  --accent: #4c8bf5;
  --accent-hover: #6a9ff7;
  --accent-soft: rgba(76,139,245,0.15);
  --accent-fg: #ffffff;

  --success: #3fb950;  --success-soft: rgba(63,185,80,0.14);
  --warning: #e0a43a;  --warning-soft: rgba(224,164,58,0.14);
  --danger:  #f0565b;  --danger-soft:  rgba(240,86,91,0.14);
  --info:    #3fb3d1;  --info-soft:    rgba(63,179,209,0.14);

  --chart-1: #4c8bf5; --chart-2: #3fb950; --chart-3: #e3a33b; --chart-4: #f0565b;
  --chart-5: #a371f7; --chart-6: #2fb5c8; --chart-7: #f0883e; --chart-8: #d861a6;
  --chart-grid: rgba(255,255,255,0.05);
  --chart-fill: rgba(255,255,255,0.05);

  --shadow-pop: 0 10px 30px rgba(0,0,0,0.5);
  --overlay: rgba(4,6,9,0.62);
  --scrollbar: rgba(255,255,255,0.12);

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --r-sm: 4px; --r-md: 6px; --r-lg: 8px;
  --fs-xs: 12px; --fs-sm: 13px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 20px; --fs-2xl: 24px;
  --lh: 1.45;
  --h-ctl: 30px; --h-ctl-sm: 24px; --h-row: 32px;
  --sidebar-w: 200px;

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --chevron: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%237d8592' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

}

[data-theme="light"] {
  color-scheme: light;

  --bg-app: #f4f5f7;
  --bg-surface: #ffffff;
  --bg-raised: #f8f9fb;
  --bg-inset: #ffffff;
  --bg-hover: rgba(15,23,42,0.04);
  --bg-active: rgba(15,23,42,0.075);

  --line: #e3e6eb;
  --line-strong: #cdd2da;

  --fg: #171a1f;
  --fg-muted: #4d5562;
  --fg-subtle: #7d8592;

  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --accent-soft: rgba(37,99,235,0.10);

  --success: #1a7f37;  --success-soft: rgba(26,127,55,0.10);
  --warning: #9a6700;  --warning-soft: rgba(191,135,0,0.12);
  --danger:  #cf222e;  --danger-soft:  rgba(207,34,46,0.09);
  --info:    #0e7490;  --info-soft:    rgba(14,116,144,0.10);

  --chart-grid: rgba(15,23,42,0.07);
  --chart-fill: rgba(15,23,42,0.04);

  --shadow-pop: 0 10px 30px rgba(15,23,42,0.14), 0 1px 3px rgba(15,23,42,0.08);
  --overlay: rgba(15,23,42,0.32);
  --scrollbar: rgba(15,23,42,0.18);
}

/* ═══════ 2. Base ═══════ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { font-size:15px; } /* 组件一律用 px；账单弹窗 / 工坊配置的 rem 按 15px 基准写 */
body {
  font-family:var(--font-sans);
  font-size:var(--fs-sm);
  line-height:var(--lh);
  background:var(--bg-app);
  color:var(--fg);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
button, input, select, textarea { font:inherit; color:inherit; }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
code, kbd, .mono { font-family:var(--font-mono); font-size:0.92em; }
[hidden] { display:none !important; }
:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
::selection { background:var(--accent-soft); }

::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--scrollbar); border-radius:8px; border:2px solid transparent; background-clip:padding-box; }
::-webkit-scrollbar-thumb:hover { background-color:var(--fg-subtle); }

/* 原生控件：统一高度 30px（.ctl-sm 24px），:where 让各页旧样式仍可覆盖 */
:where(input:not([type=checkbox],[type=radio],[type=hidden],[type=range],[type=file],[type=color],[type=submit],[type=button]), select, textarea) {
  height:var(--h-ctl);
  padding:0 var(--sp-2);
  background:var(--bg-inset);
  border:1px solid var(--line-strong);
  border-radius:var(--r-md);
  color:var(--fg);
  font-size:var(--fs-sm);
  outline:none;
  min-width:0;
  transition:border-color .12s, box-shadow .12s;
}
:where(textarea) { height:auto; min-height:72px; padding:6px var(--sp-2); line-height:var(--lh); resize:vertical; }
:where(select) { appearance:none; padding-right:26px; cursor:pointer; background-image:var(--chevron); background-repeat:no-repeat; background-position:right 9px center; }
:where(input, select, textarea):focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
:where(input, select, textarea):disabled { opacity:.55; cursor:not-allowed; }
:where(input[readonly]) { background:var(--bg-raised); }
::placeholder { color:var(--fg-subtle); opacity:1; }
input[type=checkbox], input[type=radio] { width:14px; height:14px; accent-color:var(--accent); cursor:pointer; vertical-align:middle; }
.ctl-sm { height:var(--h-ctl-sm) !important; font-size:var(--fs-xs) !important; }

/* 开关：<input type="checkbox" class="switch"> */
input.switch { appearance:none; width:28px; height:16px; border-radius:999px; background:var(--line-strong); position:relative; cursor:pointer; flex:none; transition:background .15s; }
input.switch::before { content:''; position:absolute; top:2px; left:2px; width:12px; height:12px; border-radius:50%; background:#fff; transition:transform .15s; box-shadow:0 1px 2px rgba(0,0,0,.3); }
input.switch:checked { background:var(--accent); }
input.switch:checked::before { transform:translateX(12px); }

/* 进度条（顶部） */
.loading-bar { position:fixed; top:0; left:0; width:0; height:2px; background:var(--accent); z-index:9999; }
.loading-bar.active { animation:loadProgress 1.2s ease-in-out infinite; }
@keyframes loadProgress { 0%{width:0;left:0} 50%{width:60%;left:20%} 100%{width:0;left:100%} }

/* ═══════ 3. Shell ═══════ */
/* 登录 */
#loginPage { display:flex; align-items:center; justify-content:center; min-height:100vh; padding:var(--sp-5); }
.login-card {
  width:100%; max-width:340px;
  padding:var(--sp-5);
  background:var(--bg-surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-pop);
}
.login-card h2 { font-size:var(--fs-xl); font-weight:600; }
.login-card .subtitle { color:var(--fg-subtle); font-size:var(--fs-xs); margin:2px 0 var(--sp-4); }
.login-card form { display:flex; flex-direction:column; gap:var(--sp-2); }
.login-card input { width:100%; height:34px; }
.login-card .btn-block { height:34px; margin-top:var(--sp-1); }
.login-error { display:none; margin-bottom:var(--sp-3); padding:var(--sp-2) var(--sp-3); border-radius:var(--r-md); background:var(--danger-soft); color:var(--danger); font-size:var(--fs-xs); }
.github-btn { display:flex; align-items:center; justify-content:center; gap:var(--sp-2); height:34px; border:1px solid var(--line-strong); border-radius:var(--r-md); background:var(--bg-raised); color:var(--fg); font-weight:500; }
.github-btn:hover { background:var(--bg-hover); text-decoration:none; }
.github-btn svg { width:16px; height:16px; }

#dashboard { display:none; min-height:100vh; }

/* 侧栏 */
.sidebar {
  position:fixed; top:0; left:0; bottom:0; z-index:60;
  width:var(--sidebar-w);
  display:flex; flex-direction:column;
  background:var(--bg-surface);
  border-right:1px solid var(--line);
}
.sidebar-brand { display:flex; align-items:center; gap:var(--sp-2); height:48px; padding:0 var(--sp-3); border-bottom:1px solid var(--line); flex:none; }
.brand-mark { width:24px; height:24px; display:grid; place-items:center; border-radius:var(--r-md); background:var(--accent); color:var(--accent-fg); font-size:11px; font-weight:700; letter-spacing:-0.02em; flex:none; }
.brand-text { display:flex; flex-direction:column; min-width:0; line-height:1.2; }
.brand-text strong { font-size:var(--fs-sm); font-weight:600; }
.brand-text span { font-size:11px; color:var(--fg-subtle); }
.sidebar-nav { flex:1; overflow-y:auto; padding:var(--sp-2); display:flex; flex-direction:column; gap:1px; }
.nav-section { padding:var(--sp-3) var(--sp-2) var(--sp-1); font-size:11px; color:var(--fg-subtle); user-select:none; }
.nav-section:first-child { padding-top:var(--sp-1); }
.nav-item {
  display:flex; align-items:center; gap:var(--sp-2);
  width:100%; height:30px; padding:0 var(--sp-2);
  border:0; border-radius:var(--r-md);
  background:transparent; color:var(--fg-muted);
  font-size:var(--fs-sm); text-align:left; white-space:nowrap; cursor:pointer;
}
.nav-item svg { width:16px; height:16px; flex:none; opacity:.75; }
.nav-item:hover { background:var(--bg-hover); color:var(--fg); }
.nav-item.active { background:var(--bg-active); color:var(--fg); font-weight:500; }
.nav-item.active svg { opacity:1; color:var(--accent); }
.sidebar-footer { flex:none; padding:var(--sp-2); border-top:1px solid var(--line); display:flex; flex-direction:column; gap:1px; }
.sidebar-footer .nav-item.is-danger:hover { color:var(--danger); background:var(--danger-soft); }
.icon-sun { display:none; }
[data-theme="light"] .icon-sun { display:inline; }
[data-theme="light"] .icon-moon { display:none; }

/* 窄屏顶栏 + 抽屉 */
.mobile-bar { display:none; }
.nav-backdrop { display:none; }

/* 主区 */
.main-content { flex:1; margin-left:var(--sidebar-w); min-height:100vh; min-width:0; }
.container { max-width:1560px; margin:0 auto; padding:var(--sp-4) var(--sp-5) var(--sp-5); }
.tab-content { display:none; }
.tab-content.active { display:block; }
.page.active { display:flex; flex-direction:column; gap:var(--sp-3); }
.page > * { margin-top:0; margin-bottom:0; }

/* 页面标题栏 */
.page-head { display:flex; align-items:center; gap:var(--sp-3); min-height:36px; flex-wrap:wrap; }
.page-title { font-size:var(--fs-xl); font-weight:600; line-height:1.2; letter-spacing:-0.01em; }
.page-sub { color:var(--fg-subtle); font-size:var(--fs-sm); }
.page-actions { margin-left:auto; display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; }

/* 工具栏：筛选 / 范围 / 刷新，贴在页面标题下，滚动时吸顶 */
.toolbar {
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap;
  padding:var(--sp-2) 0;
  background:var(--bg-app);
}
.toolbar .sep { color:var(--fg-subtle); }
.toolbar .spacer { flex:1; }
.toolbar-static { position:static; padding:0; background:none; }

/* 子页签：下划线样式 */
.subtab-bar { display:flex; gap:var(--sp-4); border-bottom:1px solid var(--line); margin-bottom:var(--sp-3); overflow-x:auto; }
.page .subtab-bar { margin-bottom:0; }
.subtab-btn {
  position:relative; height:34px; padding:0 2px;
  border:0; background:transparent; color:var(--fg-muted);
  font-size:var(--fs-sm); font-weight:500; white-space:nowrap; cursor:pointer;
}
.subtab-btn:hover { color:var(--fg); }
.subtab-btn.active { color:var(--fg); }
.subtab-btn.active::after { content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--accent); border-radius:2px 2px 0 0; }
.subtab-btn .count { margin-left:var(--sp-1); color:var(--fg-subtle); font-size:var(--fs-xs); font-weight:400; }
.subtab-pane { display:none; }
.subtab-pane.active { display:block; }
.subtab-pane.page-pane.active { display:flex; flex-direction:column; gap:var(--sp-3); }

/* ═══════ 4. 组件 ═══════ */
/* 面板：带标题栏的卡片 */
.panel { background:var(--bg-surface); border:1px solid var(--line); border-radius:var(--r-lg); min-width:0; }
.panel-head { display:flex; align-items:center; gap:var(--sp-2); min-height:40px; padding:var(--sp-2) var(--sp-3); border-bottom:1px solid var(--line); flex-wrap:wrap; }
.panel-head:last-child { border-bottom:0; }
.panel-title { font-size:var(--fs-md); font-weight:600; line-height:1.3; }
.panel-sub { color:var(--fg-subtle); font-size:var(--fs-xs); }
.panel-head .panel-sub { margin-left:var(--sp-1); }
.panel-actions { margin-left:auto; display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; }
.panel-body { padding:var(--sp-3); }
.panel-body.flush { padding:0; }
.panel > .table-wrap { border:0; border-radius:0 0 var(--r-lg) var(--r-lg); }
.panel-foot { display:flex; align-items:center; gap:var(--sp-2); padding:var(--sp-2) var(--sp-3); border-top:1px solid var(--line); color:var(--fg-subtle); font-size:var(--fs-xs); }
.grid-2 { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--sp-3); }
.grid-3 { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--sp-3); }

/* 数字卡片 */
.kpi-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:var(--sp-2); }
.kpi { min-width:0; padding:10px var(--sp-3); background:var(--bg-surface); border:1px solid var(--line); border-radius:var(--r-lg); display:flex; flex-direction:column; gap:2px; }
.kpi-label { display:flex; align-items:center; gap:6px; color:var(--fg-muted); font-size:var(--fs-xs); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kpi-value { font-size:var(--fs-xl); font-weight:600; line-height:1.25; font-variant-numeric:tabular-nums; letter-spacing:-0.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kpi-unit { margin-left:2px; color:var(--fg-subtle); font-size:var(--fs-sm); font-weight:400; }
.kpi-sub { color:var(--fg-subtle); font-size:var(--fs-xs); font-variant-numeric:tabular-nums; min-height:1.45em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kpi-sub .up, .delta-up { color:var(--success); }
.kpi-sub .down, .delta-down { color:var(--danger); }
.kpi.tone-success .kpi-value { color:var(--success); }
.kpi.tone-warning .kpi-value { color:var(--warning); }
.kpi.tone-danger .kpi-value { color:var(--danger); }
.kpi.tone-accent .kpi-value { color:var(--accent); }
/* 一行内联小数字（工具栏 / 面板头里的统计） */
.stat-inline { display:flex; flex-wrap:wrap; gap:var(--sp-1) var(--sp-4); font-size:var(--fs-xs); color:var(--fg-subtle); }
.stat-inline b { margin-left:var(--sp-1); color:var(--fg); font-size:var(--fs-sm); font-weight:600; font-variant-numeric:tabular-nums; }

/* 表格 */
.table-wrap { overflow:auto; background:var(--bg-surface); border:1px solid var(--line); border-radius:var(--r-lg); position:relative; }
.table-wrap.is-scroll { max-height:calc(100vh - 220px); }
table, .table { width:100%; border-collapse:separate; border-spacing:0; font-size:var(--fs-sm); font-variant-numeric:tabular-nums; }
th {
  position:sticky; top:0; z-index:1;
  height:var(--h-row); padding:0 var(--sp-3);
  background:var(--bg-raised); color:var(--fg-muted);
  font-size:var(--fs-xs); font-weight:500; text-align:left; white-space:nowrap;
  border-bottom:1px solid var(--line);
}
td { height:var(--h-row); padding:4px var(--sp-3); border-bottom:1px solid var(--line); color:var(--fg); vertical-align:middle; }
tbody tr:last-child td { border-bottom:0; }
tbody tr:hover td { background:var(--bg-hover); }
th.num, td.num, .num { text-align:right; font-variant-numeric:tabular-nums; }
td.num { white-space:nowrap; }
td.mono { font-family:var(--font-mono); font-size:var(--fs-xs); }
td.muted { color:var(--fg-subtle); }
td.actions, th.actions { width:1%; white-space:nowrap; text-align:right; }
.cell-truncate { display:block; max-width:var(--cell-w, 240px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
td.cell-truncate { display:table-cell; }
.cell-sub { display:block; color:var(--fg-subtle); font-size:var(--fs-xs); }
td:has(> .cell-sub) { white-space:nowrap; }
.th-sort, .ua-sort { cursor:pointer; user-select:none; }
.th-sort:hover, .ua-sort:hover { color:var(--fg); }
.th-sort::after, .ua-sort::after { content:'↕'; margin-left:4px; opacity:.35; font-size:11px; }
.th-sort.sort-asc::after, .ua-sort.sort-asc::after { content:'↑'; opacity:1; color:var(--accent); }
.th-sort.sort-desc::after, .ua-sort.sort-desc::after { content:'↓'; opacity:1; color:var(--accent); }
.th-sort.active, .ua-sort.active { color:var(--fg); }
.table-empty, td.table-empty { height:auto; padding:var(--sp-5) var(--sp-3) !important; text-align:center !important; color:var(--fg-subtle); }
.table-empty.error { color:var(--danger); }
.invoice-time { white-space:nowrap; }
.invoice-company { min-width:140px; max-width:320px; white-space:normal; overflow-wrap:anywhere; }
.invoice-pagination { flex-wrap:wrap; }
[data-subpane="invoices"] > .row { flex-wrap:wrap; }
#analyticsRangeBtns { flex-wrap:wrap; max-width:100%; }
#invoiceExcluded[hidden] { display:none; }
.table-wrap.is-loading::after { content:''; position:absolute; left:0; right:0; top:0; height:2px; background:linear-gradient(90deg, transparent, var(--accent), transparent); background-size:50% 100%; background-repeat:no-repeat; animation:tableLoad 1s linear infinite; }
@keyframes tableLoad { from{background-position:-50% 0} to{background-position:150% 0} }
.inline-bar { display:block; height:3px; border-radius:2px; margin-top:3px; }
.pager { display:flex; align-items:center; justify-content:flex-end; gap:var(--sp-2); padding:var(--sp-2) 0; font-size:var(--fs-xs); color:var(--fg-subtle); }

/* 表单字段 */
.field { display:flex; flex-direction:column; gap:var(--sp-1); min-width:0; }
.field-label { color:var(--fg-muted); font-size:var(--fs-xs); font-weight:500; }
.field-hint { color:var(--fg-subtle); font-size:var(--fs-xs); }
.field input:not([type=checkbox],[type=radio]), .field select, .field textarea { width:100%; }
.field-row { display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:var(--sp-3); }
.field-inline { display:flex; align-items:center; gap:var(--sp-2); font-size:var(--fs-sm); color:var(--fg); cursor:pointer; }
.form-stack { display:flex; flex-direction:column; gap:var(--sp-3); }

/* 按钮：default / primary / ghost / danger × md(30) / sm(24) */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:var(--h-ctl); padding:0 var(--sp-3);
  border:1px solid var(--line-strong); border-radius:var(--r-md);
  background:var(--bg-raised); color:var(--fg);
  font-size:var(--fs-sm); font-weight:500; line-height:1; white-space:nowrap;
  cursor:pointer; user-select:none;
  transition:background .12s, border-color .12s, color .12s;
}
.btn:hover { background:var(--bg-active); }
.btn svg { width:14px; height:14px; flex:none; }
.btn-sm { height:var(--h-ctl-sm); padding:0 var(--sp-2); font-size:var(--fs-xs); border-radius:var(--r-sm); gap:4px; }
.btn-primary { background:var(--accent); border-color:var(--accent); color:var(--accent-fg); }
.btn-primary:hover { background:var(--accent-hover); border-color:var(--accent-hover); }
.btn-ghost { background:transparent; border-color:transparent; color:var(--fg-muted); }
.btn-ghost:hover { background:var(--bg-hover); color:var(--fg); }
/* 危险：列表里是浅底红字，弹窗底部的确认按钮才用实心 */
.btn-danger { background:var(--danger-soft); border-color:transparent; color:var(--danger); }
.btn-danger:hover, .modal-footer .btn-danger { background:var(--danger); border-color:var(--danger); color:#fff; }
.modal-footer .btn-danger:hover { filter:brightness(1.08); }
.btn-ghost.is-danger, .btn.is-danger:not(.btn-danger) { color:var(--danger); }
.btn-ghost.is-danger:hover, .btn.is-danger:not(.btn-danger):hover { background:var(--danger-soft); }
.btn-icon { width:var(--h-ctl); padding:0; }
.btn-icon.btn-sm { width:var(--h-ctl-sm); }
.btn.active, .btn[aria-pressed="true"] { background:var(--accent-soft); border-color:var(--accent); color:var(--accent); }
.btn:disabled, .btn[disabled] { opacity:.45; cursor:not-allowed; pointer-events:none; }
.btn-block { width:100%; }
.btn-group { display:inline-flex; gap:var(--sp-2); flex-wrap:wrap; align-items:center; }

/* 分段选择（时间范围、指标切换） */
.seg { display:inline-flex; flex-shrink:0; padding:2px; gap:2px; background:var(--bg-raised); border:1px solid var(--line); border-radius:var(--r-md); }
.seg button { height:24px; padding:0 10px; border:0; border-radius:var(--r-sm); background:transparent; color:var(--fg-muted); font-size:var(--fs-xs); font-weight:500; white-space:nowrap; cursor:pointer; }
.seg button:hover { color:var(--fg); }
.seg button.active { background:var(--bg-surface); color:var(--fg); box-shadow:0 0 0 1px var(--line-strong); }

/* 徽章：中性 + 四种语义色 */
.badge {
  display:inline-flex; align-items:center; gap:4px;
  height:20px; padding:0 6px;
  border-radius:var(--r-sm);
  background:var(--bg-active); color:var(--fg-muted);
  font-size:var(--fs-xs); font-weight:500; line-height:1; white-space:nowrap; vertical-align:middle;
}
.badge-success { background:var(--success-soft); color:var(--success); }
.badge-warning { background:var(--warning-soft); color:var(--warning); }
.badge-danger  { background:var(--danger-soft);  color:var(--danger); }
.badge-info    { background:var(--info-soft);    color:var(--info); }
.badge-accent  { background:var(--accent-soft);  color:var(--accent); }
.badge-dot::before { content:''; width:6px; height:6px; border-radius:50%; background:currentColor; }
.badge.mono { font-family:var(--font-mono); }
.dot-status { display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--fg-subtle); vertical-align:middle; }
.dot-status.ok { background:var(--success); } .dot-status.warn { background:var(--warning); } .dot-status.error { background:var(--danger); }

/* 提示条 */
.alert { display:flex; align-items:flex-start; gap:var(--sp-2); padding:var(--sp-2) var(--sp-3); border:1px solid var(--line); border-radius:var(--r-md); background:var(--bg-raised); color:var(--fg-muted); font-size:var(--fs-sm); }
.alert-success { background:var(--success-soft); border-color:transparent; color:var(--success); }
.alert-warning { background:var(--warning-soft); border-color:transparent; color:var(--warning); }
.alert-danger  { background:var(--danger-soft);  border-color:transparent; color:var(--danger); }
.alert-info    { background:var(--info-soft);    border-color:transparent; color:var(--info); }

/* 空状态 */
.empty { padding:var(--sp-5) var(--sp-3); text-align:center; color:var(--fg-subtle); font-size:var(--fs-sm); }
.empty .btn { margin-top:var(--sp-3); }

/* 弹窗：sm 360 / md 480（默认）/ lg 720，头 / 体 / 脚 */
.modal-overlay { display:none; position:fixed; inset:0; z-index:200; padding:var(--sp-4); background:var(--overlay); align-items:center; justify-content:center; }
.modal-overlay.active { display:flex; }
.modal {
  width:480px; max-width:100%; max-height:calc(100vh - 32px);
  display:flex; flex-direction:column;
  background:var(--bg-surface); border:1px solid var(--line-strong); border-radius:var(--r-lg);
  box-shadow:var(--shadow-pop);
  overflow:hidden;
  animation:modalIn .14s ease-out;
}
@keyframes modalIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }
/* 内含下拉选择器的弹窗不裁剪，让下拉面板能伸出弹窗 */
.modal:has(.user-dropdown), .modal:has(.user-dropdown) .modal-body { overflow:visible; }
.modal.modal-sm { width:360px; }
.modal.modal-md { width:480px; }
.modal.modal-lg { width:720px; }
.modal-header { display:flex; align-items:center; gap:var(--sp-2); min-height:44px; padding:var(--sp-2) var(--sp-4); border-bottom:1px solid var(--line); flex:none; }
.modal-header h3 { font-size:var(--fs-lg); font-weight:600; }
.modal-body { padding:var(--sp-4); overflow:auto; flex:1; display:flex; flex-direction:column; gap:var(--sp-3); }
.modal-footer { display:flex; align-items:center; justify-content:flex-end; gap:var(--sp-2); padding:var(--sp-3) var(--sp-4); border-top:1px solid var(--line); background:var(--bg-raised); flex:none; }

/* 下拉面板（用户选择器等） */
.popover { position:absolute; z-index:200; background:var(--bg-surface); border:1px solid var(--line-strong); border-radius:var(--r-lg); box-shadow:var(--shadow-pop); overflow:hidden; }
.user-dropdown { position:relative; }
.user-dropdown-trigger {
  display:inline-flex; align-items:center; gap:6px; height:var(--h-ctl); padding:0 26px 0 var(--sp-2); max-width:240px;
  background:var(--bg-inset) var(--chevron) no-repeat right 9px center; border:1px solid var(--line-strong); border-radius:var(--r-md);
  color:var(--fg); font-size:var(--fs-sm); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer;
}
.user-dropdown-trigger.open { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.user-dropdown-panel { display:none; position:absolute; top:calc(100% + 4px); left:0; width:280px; z-index:200; background:var(--bg-surface); border:1px solid var(--line-strong); border-radius:var(--r-lg); box-shadow:var(--shadow-pop); overflow:hidden; }
.user-dropdown-panel.open { display:block; }
.user-dropdown .user-search { width:100%; height:34px; border:0; border-bottom:1px solid var(--line); border-radius:0; background:transparent; box-shadow:none; padding:0 var(--sp-3); }
.user-list { max-height:320px; overflow-y:auto; padding:var(--sp-1); }
.user-group-header { padding:var(--sp-2) var(--sp-2) 2px; font-size:11px; color:var(--fg-subtle); position:sticky; top:0; background:var(--bg-surface); }
.user-option { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2); height:28px; padding:0 var(--sp-2); border-radius:var(--r-sm); color:var(--fg-muted); cursor:pointer; white-space:nowrap; overflow:hidden; }
.user-option:hover { background:var(--bg-hover); color:var(--fg); }
.user-option.selected { color:var(--accent); }
.user-option .user-id { color:var(--fg-subtle); font-family:var(--font-mono); font-size:11px; }
.user-option.all-users { font-weight:500; }

/* Toast */
.toast-host { position:fixed; right:var(--sp-4); bottom:var(--sp-4); z-index:400; display:flex; flex-direction:column; gap:var(--sp-2); max-width:min(400px, calc(100vw - 32px)); pointer-events:none; }
.toast { pointer-events:auto; cursor:pointer; padding:var(--sp-2) var(--sp-3); border-radius:var(--r-md); background:var(--bg-surface); color:var(--fg); border:1px solid var(--line-strong); border-left:3px solid var(--accent); box-shadow:var(--shadow-pop); font-size:var(--fs-sm); white-space:pre-line; word-break:break-word; animation:toastIn .15s ease-out; transition:opacity .2s, transform .2s; }
.toast-success { border-left-color:var(--success); }
.toast-warn { border-left-color:var(--warning); }
.toast-error { border-left-color:var(--danger); }
.toast-out { opacity:0; transform:translateY(4px); }
@keyframes toastIn { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:none} }

/* 需要处理清单（总览） */
.ov-attention-list { display:flex; flex-direction:column; }
.ov-attention-ok { padding:var(--sp-3); color:var(--success); font-size:var(--fs-sm); }
.ov-attention-item { display:flex; align-items:center; gap:var(--sp-2); width:100%; min-height:var(--h-row); padding:6px var(--sp-3); border:0; border-bottom:1px solid var(--line); background:transparent; color:var(--fg); text-align:left; font:inherit; }
.ov-attention-item:last-child { border-bottom:0; }
button.ov-attention-item { cursor:pointer; }
button.ov-attention-item:hover { background:var(--bg-hover); }
.ov-attention-icon { flex:none; width:8px; height:8px; border-radius:50%; background:var(--fg-subtle); font-size:0; }
.ov-attention-body { flex:1; min-width:0; display:flex; align-items:baseline; gap:var(--sp-2); flex-wrap:wrap; }
.ov-attention-title { font-size:var(--fs-sm); font-weight:500; }
.ov-attention-detail { font-size:var(--fs-xs); color:var(--fg-subtle); word-break:break-word; }
.ov-attention-go { flex:none; font-size:var(--fs-xs); color:var(--fg-subtle); }
button.ov-attention-item:hover .ov-attention-go { color:var(--accent); }
.ov-attention-item.level-error .ov-attention-icon { background:var(--danger); }
.ov-attention-item.level-warn .ov-attention-icon { background:var(--warning); }
.ov-attention-item.level-info .ov-attention-icon { background:var(--info); }

/* 小工具 */
.u-hidden { display:none !important; }
.row { display:flex; align-items:center; gap:var(--sp-2); }
.stack { display:flex; flex-direction:column; gap:var(--sp-3); }
.spacer { flex:1; }
.text-muted { color:var(--fg-subtle); }
.text-success { color:var(--success); } .text-warning { color:var(--warning); } .text-danger { color:var(--danger); } .text-accent { color:var(--accent); }
.tabular { font-variant-numeric:tabular-nums; }
.truncate { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nowrap { white-space:nowrap; }

/* 窄屏：侧栏变抽屉 */
@media (max-width: 900px) {
  #dashboard { flex-direction:column; }
  .main-content { margin-left:0; }
  .container { padding:var(--sp-3) var(--sp-3) var(--sp-5); }
  .sidebar { transform:translateX(-100%); transition:transform .18s ease; box-shadow:none; }
  body.nav-open .sidebar { transform:none; box-shadow:var(--shadow-pop); }
  body.nav-open .nav-backdrop { display:block; position:fixed; inset:0; z-index:55; background:var(--overlay); }
  .mobile-bar {
    display:flex; align-items:center; gap:var(--sp-2);
    position:sticky; top:0; z-index:50;
    height:44px; padding:0 var(--sp-2);
    background:var(--bg-surface); border-bottom:1px solid var(--line);
  }
  .mobile-bar-title { font-weight:600; font-size:var(--fs-md); }
  .mobile-bar .btn-icon:last-child { margin-left:auto; }
  .toolbar { position:static; }
  .grid-2, .grid-3 { grid-template-columns:1fr; }
}
@media (max-width: 520px) {
  .kpi-grid { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .page-actions { margin-left:0; }
  .modal-overlay { padding:var(--sp-2); align-items:flex-end; }
  .modal, .modal.modal-sm, .modal.modal-md, .modal.modal-lg { width:100%; }
}

/* ═══════ 5. 页面（只放组件覆盖不到的少量规则） ═══════ */
/* 总览 */
.ov-grid { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:var(--sp-3); }
.ov-chart-panel { display:flex; flex-direction:column; }
.ov-chart-panel .panel-body { flex:1; position:relative; min-height:240px; }
.ov-chart { position:absolute; inset:var(--sp-3); }
@media (max-width: 1100px) { .ov-grid { grid-template-columns:1fr; } }
@media (max-width: 700px) { .ov-audit th:nth-child(4), .ov-audit td:nth-child(4) { display:none; } }

/* 用户 */
.users-table .cell-truncate { --cell-w:220px; }
.users-table .users-name { display:inline-block; max-width:170px; margin-right:6px; vertical-align:middle; }
.users-table tr.is-disabled td { color:var(--fg-subtle); }
.users-pager:empty { display:none; }
.users-pager > span:first-child { margin-right:auto; }

/* 充值记录 */
.topup-table .cell-truncate { --cell-w:220px; }
.topup-table .topup-trade { --cell-w:260px; }
.at-user-trigger { width:100%; max-width:none; }
#atUserDropdown .user-dropdown-panel { width:100%; }

/* 余额 */
.bal-table .bal-name { display:flex; align-items:center; gap:6px; min-width:0; }
.bal-table .bal-name .cell-truncate { --cell-w:260px; font-weight:500; }
.bal-table .bal-value { font-weight:600; }
.bal-table .bal-detail { --cell-w:520px; color:var(--fg-muted); font-size:var(--fs-xs); }
.bal-table tbody tr { cursor:pointer; }
.bal-table tr.is-selected td { background:var(--accent-soft); }
.bal-table tr.is-selected td:first-child { box-shadow:inset 2px 0 0 var(--accent); }
tr.is-disabled td { color:var(--fg-subtle); }
tr.is-disabled td .text-success, tr.is-disabled td .text-accent { color:var(--fg-subtle); }
.vendor-table .cell-truncate { --cell-w:240px; font-weight:500; }
.vendor-table .vendor-status .cell-truncate { --cell-w:320px; font-weight:400; }
.bal-grid { display:grid; grid-template-columns:minmax(0,2fr) minmax(260px,1fr); gap:var(--sp-3); }
.balance-trend-canvas { position:relative; height:280px; }
.balance-trend-canvas.is-loading { opacity:.4; transition:opacity .15s; }
@media (max-width: 1100px) { .bal-grid { grid-template-columns:1fr; } }

/* 百炼 */
.bk-kpis { grid-template-columns:repeat(7, minmax(0,1fr)); }
.bk-table .cell-sub .mono { font-size:11px; }
.bk-table .bk-reason { --cell-w:260px; }
.bk-table td.actions .btn { padding:0 6px; }
.bk-targets .cell-truncate { --cell-w:280px; }
.bk-targets tr.is-selected td:first-child { box-shadow:inset 2px 0 0 var(--accent); }
.seg .seg-count { margin-left:2px; color:var(--fg-subtle); font-variant-numeric:tabular-nums; }
.row.wrap { flex-wrap:wrap; gap:var(--sp-2) var(--sp-4); }
.input-narrow { width:80px; }
.input-narrow-lg { width:120px; }
.code-textarea { width:100%; min-height:220px; font-family:var(--font-mono); font-size:var(--fs-xs); }
.sync-lines { display:flex; flex-direction:column; gap:2px; }
.sync-line { display:grid; grid-template-columns:8px minmax(0,1fr) minmax(0,1.4fr); align-items:center; gap:var(--sp-2); font-size:var(--fs-xs); }
.sync-sub { padding-left:var(--sp-4); }
.task-badge { min-width:56px; justify-content:center; }
.task-progress { height:8px; border-radius:999px; overflow:hidden; background:var(--bg-active); }
.task-progress-bar { height:100%; width:0; border-radius:999px; background:var(--accent); transition:width .35s ease; }
.task-progress-bar.running { background-image:linear-gradient(90deg, transparent 0, rgba(255,255,255,.25) 50%, transparent 100%); background-size:200% 100%; animation:taskFlow 1.4s linear infinite; }
@keyframes taskFlow { from { background-position:200% 0; } to { background-position:-200% 0; } }
.task-progress-meta { margin-top:4px; font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--fg-subtle); }
.task-kpis { grid-template-columns:repeat(4, minmax(0,1fr)); }
.task-kpis .kpi-value { font-size:var(--fs-md); }
.exp-option { display:flex; align-items:flex-start; gap:var(--sp-2); cursor:pointer; }
.exp-option input { margin-top:3px; }
.exp-option .exp-label { font-weight:500; }
.exp-option .exp-hint { display:block; color:var(--fg-subtle); font-size:var(--fs-xs); }
@media (max-width: 1280px) { .bk-kpis { grid-template-columns:repeat(4, minmax(0,1fr)); } }
@media (max-width: 520px) { .bk-kpis, .task-kpis { grid-template-columns:repeat(2, minmax(0,1fr)); } }

/* 百炼 · 渠道调度器（bailian2.js） */
.b2-channel-select { width:auto; min-width:260px; max-width:380px; }
.b2-kpis { grid-template-columns:repeat(7, minmax(0,1fr)); }
.b2-bar { height:8px; border-radius:999px; background:var(--bg-active); overflow:hidden; }
.b2-bar-sm { height:3px; }
.b2-bar-mini { width:64px; flex:none; }
.b2-bar-fill { height:100%; border-radius:999px; background:var(--success); transition:width .3s; }
.b2-bar-fill.warn { background:var(--warning); }
.b2-bar-fill.danger { background:var(--danger); }
.b2-tabs-head { padding-top:0; padding-bottom:0; }
.b2-tabs { margin-bottom:-9px; border-bottom:0; }
.b2-banner { align-items:center; }
.b2-section { display:flex; align-items:baseline; gap:var(--sp-2); flex-wrap:wrap; }
.b2-section .panel-actions { align-self:center; }
.b2-legend { line-height:1.7; }
.b2-matrix-wrap { max-height:calc(100vh - 260px); }
.b2-matrix td:nth-child(2) { white-space:nowrap; }
.b2-pool-head .seg, .panel-head > .seg { max-width:100%; overflow-x:auto; }
.b2-matrix th.b2-model-col { min-width:118px; }
.b2-matrix td.b2-cell { min-width:118px; padding-top:3px; padding-bottom:3px; font-size:var(--fs-xs); font-variant-numeric:tabular-nums; }
.b2-matrix td.b2-cell.is-idle, .b2-matrix td.b2-cell.is-quiet { color:var(--fg-subtle); }
.b2-matrix tbody tr td.b2-cell.is-cool { background:var(--danger-soft); }
.b2-matrix tbody tr td.b2-cell.is-busy { background:var(--warning-soft); }
.b2-cell-top { display:flex; justify-content:space-between; gap:4px; margin-bottom:2px; white-space:nowrap; }
.b2-cell-sub { margin-top:2px; color:var(--fg-subtle); font-size:11px; white-space:nowrap; }
.b2-policy-grid { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--sp-2); }
.b2-policy { gap:6px; }
.b2-policy-val { font-size:var(--fs-md); font-weight:600; }
.b2-policy-val small { color:var(--fg-subtle); font-size:var(--fs-xs); font-weight:400; }
.b2-policy .row > select, .b2-policy .row > input { flex:1; min-width:0; }
.b2-policy-actions { margin-top:auto; }
.b2-num { text-align:right; font-family:var(--font-mono); }
.b2-num-input { width:100%; max-width:110px; height:var(--h-ctl-sm); text-align:right; font-family:var(--font-mono); font-size:var(--fs-xs); }
.b2-num-input.is-dirty { border-color:var(--warning); background:var(--warning-soft); }
.b2-quota tr.is-expanded td { background:var(--bg-hover); }
.b2-expand-row td { background:var(--bg-inset); padding:var(--sp-3) var(--sp-4); }
.b2-override-panel { display:grid; grid-template-columns:220px minmax(0,1fr); gap:var(--sp-4); }
.b2-override-side { color:var(--fg-subtle); font-size:var(--fs-xs); line-height:1.7; }
.b2-override-side h4 { margin-bottom:4px; color:var(--fg); font-size:var(--fs-sm); }
.b2-override-table { border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; }
.b2-savebar { position:sticky; bottom:var(--sp-2); z-index:5; display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; padding:var(--sp-2) var(--sp-3); background:var(--bg-surface); border:1px solid var(--warning); border-radius:var(--r-md); box-shadow:var(--shadow-pop); }
.b2-savebar-info { flex:1; min-width:240px; color:var(--fg-subtle); font-size:var(--fs-xs); }
.b2-savebar-info b { color:var(--warning); }
.b2-savebar-actions { display:flex; gap:var(--sp-2); }
.b2-alerts-list { margin:4px 0 0; padding-left:18px; }
.b2-audit tr.is-fail td { background:var(--danger-soft); }
.b2-audit .b2-audit-detail { --cell-w:420px; }
@media (max-width: 1280px) { .b2-kpis { grid-template-columns:repeat(4, minmax(0,1fr)); } }
@media (max-width: 1100px) { .b2-policy-grid { grid-template-columns:repeat(2, minmax(0,1fr)); } .b2-override-panel { grid-template-columns:1fr; } }
@media (max-width: 520px) { .b2-kpis { grid-template-columns:repeat(2, minmax(0,1fr)); } .b2-channel-select { min-width:0; width:100%; } }

/* 发件归档 */
.archive-row { cursor:pointer; }
.archive-row.is-unread td { font-weight:600; }
.archive-table .archive-subject-cell { width:100%; max-width:0; }
.archive-table .archive-subject-cell .cell-truncate { max-width:100%; }
.archive-modal { width:900px; }
.archive-body { overflow:auto; }
.archive-meta { padding:var(--sp-3) var(--sp-4); border-bottom:1px solid var(--line); font-size:var(--fs-sm); line-height:1.7; }
.archive-subject { margin-bottom:var(--sp-1); font-size:var(--fs-lg); font-weight:600; }
.archive-frame { display:block; width:100%; height:60vh; border:0; background:#fff; }

/* 供应商结算（原 settlement.css 并入） */
.st-ledger { display:grid; grid-template-columns:240px minmax(0,1fr); gap:var(--sp-3); align-items:start; }
.st-kpis { grid-template-columns:repeat(4, minmax(0,1fr)); }
.st-issues { margin-top:var(--sp-3); }
.st-search { width:min(280px, 40vw); }
.st-table-wrap { border:0; border-top:1px solid var(--line); border-radius:0 0 var(--r-lg) var(--r-lg); }
.settlement-supplier-list { padding:var(--sp-1); display:flex; flex-direction:column; gap:2px; }
.settlement-supplier-btn { width:100%; padding:var(--sp-2); border:0; border-radius:var(--r-md); background:transparent; color:var(--fg); text-align:left; cursor:pointer; display:flex; flex-direction:column; gap:2px; }
.settlement-supplier-btn:hover { background:var(--bg-hover); }
.settlement-supplier-btn.active { background:var(--accent-soft); box-shadow:inset 2px 0 var(--accent); }
.settlement-supplier-top { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2); }
.settlement-supplier-name { overflow:hidden; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
.settlement-supplier-amount { font-weight:600; font-variant-numeric:tabular-nums; }
.settlement-supplier-meta { color:var(--fg-subtle); font-size:var(--fs-xs); }
.settlement-table { min-width:1000px; }
.settlement-table td { font-size:var(--fs-xs); vertical-align:top; padding-top:6px; padding-bottom:6px; }
.settlement-table td.num { white-space:nowrap; }
.settlement-usage-cell { min-width:330px; }
.settlement-usage-breakdown { display:grid; gap:3px; }
.settlement-usage-component { display:grid; grid-template-columns:58px minmax(78px,1fr) minmax(112px,1.15fr) 68px; align-items:center; gap:var(--sp-2); padding:2px 6px; border-radius:var(--r-sm); background:var(--bg-raised); font-size:11px; font-variant-numeric:tabular-nums; }
.settlement-usage-label { color:var(--fg-muted); font-weight:600; }
.settlement-usage-component strong { white-space:nowrap; }
.settlement-usage-component > span:nth-child(3) { color:var(--fg-subtle); white-space:nowrap; }
.settlement-usage-component b { color:var(--warning); text-align:right; white-space:nowrap; }
.settlement-usage-fallback { color:var(--fg-muted); text-align:right; white-space:nowrap; }
.settlement-model strong, .settlement-model span, .settlement-billing-mode strong, .settlement-billing-mode span { display:block; }
.settlement-model span, .settlement-billing-mode span { margin-top:2px; color:var(--fg-subtle); font-size:11px; white-space:nowrap; }
.settlement-payment { display:flex; align-items:center; gap:var(--sp-2); }
.settlement-payment input { width:170px; }
.settlement-effective { color:var(--fg-subtle); font-size:var(--fs-xs); white-space:nowrap; }
.settlement-rule-list { display:grid; gap:var(--sp-2); padding:var(--sp-3); }
.settlement-channel-card { overflow:hidden; border:1px solid var(--line); border-radius:var(--r-md); background:var(--bg-inset); }
.settlement-channel-head { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); padding:var(--sp-2) var(--sp-3); border-bottom:1px solid var(--line); background:var(--bg-raised); }
.settlement-channel-card.collapsed .settlement-channel-head { border-bottom:0; }
.settlement-channel-card.collapsed .settlement-rate-list, .settlement-channel-card.collapsed .settlement-channel-controls { display:none; }
.settlement-channel-toggle { min-width:0; display:flex; align-items:center; gap:var(--sp-2); padding:2px; border:0; background:transparent; color:inherit; text-align:left; cursor:pointer; }
.settlement-channel-chevron { flex:none; width:7px; height:7px; border-right:1.5px solid var(--fg-subtle); border-bottom:1.5px solid var(--fg-subtle); transform:rotate(45deg) translate(-2px,-2px); transition:transform .15s; }
.settlement-channel-card.collapsed .settlement-channel-chevron { transform:rotate(-45deg); }
.settlement-channel-identity { display:block; min-width:0; }
.settlement-channel-identity strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.settlement-channel-identity span { display:block; margin-top:2px; color:var(--fg-subtle); font-size:11px; }
.settlement-channel-controls { display:grid; grid-template-columns:120px minmax(140px,190px) 150px auto; gap:var(--sp-2); align-items:end; }
.settlement-channel-controls input, .settlement-channel-controls select { height:var(--h-ctl-sm); font-size:var(--fs-xs); }
.settlement-multiplier-field { display:grid; gap:2px; min-width:0; color:var(--fg-subtle); font-size:11px; }
.settlement-multiplier-input { position:relative; display:block; }
.settlement-multiplier-input b { position:absolute; left:8px; top:50%; transform:translateY(-50%); color:var(--fg-subtle); font-size:var(--fs-xs); }
.settlement-multiplier-input input { width:100%; padding-left:22px; font-family:var(--font-mono); }
.settlement-rate-list { display:grid; }
.settlement-rate-row { display:grid; grid-template-columns:minmax(165px,.8fr) 140px minmax(450px,2fr) 108px; gap:var(--sp-2); align-items:center; padding:var(--sp-2) var(--sp-3); border-bottom:1px solid var(--line); }
.settlement-rate-row:last-child { border-bottom:0; }
.settlement-rate-row > select { height:var(--h-ctl-sm); font-size:var(--fs-xs); }
.settlement-rate-row.pricing-disabled .settlement-rate-fields, .settlement-rate-row.pricing-disabled > select { opacity:.45; }
.settlement-rate-row.invalid { background:var(--danger-soft); box-shadow:inset 2px 0 var(--danger); }
.settlement-rate-row [aria-invalid="true"] { color:var(--danger); }
.settlement-rate-model { min-width:0; }
.settlement-rate-model strong, .settlement-rate-model span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.settlement-rate-model span { margin-top:2px; color:var(--fg-subtle); font-size:11px; }
.settlement-rate-fields { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--sp-2); }
.settlement-rate-fields.omni { grid-template-columns:repeat(4, minmax(88px,1fr)); }
.settlement-rate-field { min-width:0; display:grid; gap:2px; }
.settlement-rate-label { display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-2); color:var(--fg-muted); font-size:11px; }
.settlement-rate-label small { color:var(--fg-subtle); font-size:10px; }
.settlement-rate-input { min-width:0; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; height:var(--h-ctl-sm); border:1px solid var(--line-strong); border-radius:var(--r-md); background:var(--bg-inset); }
.settlement-rate-input:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.settlement-rate-input b { padding-left:6px; color:var(--fg-subtle); font-size:11px; }
.settlement-rate-input input { width:100%; height:100%; padding:0 4px; border:0; background:transparent; box-shadow:none; font-family:var(--font-mono); font-size:var(--fs-xs); }
.settlement-rate-input input:focus { box-shadow:none; }
.settlement-rate-input span { padding-right:6px; color:var(--fg-subtle); font-size:10px; white-space:nowrap; }
.settlement-computed-rate { overflow:hidden; color:var(--warning); font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width: 1500px) {
  .st-ledger { grid-template-columns:1fr; }
  .settlement-supplier-list { flex-direction:row; overflow-x:auto; }
  .settlement-supplier-btn { flex:0 0 220px; }
}
@media (max-width: 1100px) {
  .settlement-rate-row { grid-template-columns:minmax(180px,1fr) 160px; }
  .settlement-rate-fields { grid-column:1/-1; grid-row:2; }
  .settlement-rate-row .settlement-effective { grid-column:1/-1; grid-row:3; }
  .settlement-rate-fields.omni { grid-template-columns:repeat(2, minmax(100px,1fr)); }
  .st-kpis { grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .settlement-channel-head { align-items:stretch; flex-direction:column; }
  .settlement-channel-controls { grid-template-columns:1fr 1fr; }
  .settlement-rate-row { grid-template-columns:1fr; }
  .settlement-rate-fields, .settlement-rate-row .settlement-effective { grid-column:auto; grid-row:auto; }
  .settlement-payment { width:100%; }
  .settlement-payment input { flex:1; min-width:0; }
  .st-search { width:100%; }
}
@media (max-width: 480px) {
  .settlement-channel-controls { grid-template-columns:1fr; }
  .settlement-rate-fields, .settlement-rate-fields.omni { grid-template-columns:1fr; }
}

/* 分析 */
.an-kpis { grid-template-columns:repeat(8, minmax(0,1fr)); }
.an-kpis .kpi-sub { white-space:normal; }
td.num .inline-bar { margin-left:auto; }
.an-chart { position:relative; height:260px; }
.an-chart-donut { height:300px; }
.an-table { max-height:440px; }
.share-bar { height:4px; border-radius:2px; background:var(--bg-active); overflow:hidden; }
.share-bar > div { height:100%; border-radius:2px; background:var(--accent); }
.mlb-dot { display:inline-block; width:8px; height:8px; margin-right:8px; border-radius:2px; vertical-align:middle; }
@media (max-width: 1280px) { .an-kpis { grid-template-columns:repeat(4, minmax(0,1fr)); } }
@media (max-width: 520px) { .an-kpis { grid-template-columns:repeat(2, minmax(0,1fr)); } }
.ov-audit td:nth-child(3) { width:100%; max-width:0; }
.ov-audit .ov-audit-detail { max-width:100%; color:var(--fg-muted); }


/* 百炼单 Key 月账单 */
.bailian-bill-modal {
  width:min(960px, calc(100vw - 32px));
  overflow:hidden;
}
.bill-modal-head {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
}
.bill-key-preview {
  margin-top:6px;
  color:var(--fg-subtle);
  font-family:var(--font-mono);
  font-size:0.72rem;
}
.bill-cycle-control {
  display:flex;
  align-items:center;
  gap:8px;
}
.bill-cycle-control label {
  color:var(--fg-subtle);
  font-size:0.7rem;
  font-weight:600;
}
.bill-cycle-control input[type="month"] {
  width:148px;
  height:32px;
  padding:5px 9px;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--bg-app);
  color:var(--fg);
  font-family:var(--font-mono);
  font-size:0.76rem;
  outline:none;
}
.bill-cycle-control input[type="month"]:focus {
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);
}
.bill-modal-body { padding-bottom:10px; }
.bill-status {
  min-height:0;
  color:var(--fg-muted);
  font-size:0.78rem;
}
.bill-status.error {
  margin-bottom:12px;
  padding:9px 12px;
  border-left:3px solid var(--danger);
  background:var(--danger-soft);
  color:var(--danger);
}
.bill-summary {
  display:grid;
  grid-template-columns:repeat(6, minmax(0, 1fr));
  margin-bottom:14px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.bill-summary:empty { display:none; }
.bill-metric {
  min-width:0;
  padding:12px 14px;
  border-right:1px solid var(--line);
}
.bill-metric:last-child { border-right:0; }
.bill-metric span {
  display:block;
  margin-bottom:5px;
  color:var(--fg-subtle);
  font-size:0.65rem;
}
.bill-metric strong {
  display:block;
  overflow:hidden;
  color:var(--fg);
  font-family:var(--font-mono);
  font-size:0.88rem;
  font-variant-numeric:tabular-nums;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.bill-metric.primary strong { color:var(--success); }
.bill-metric.danger strong { color:var(--danger); }
.bill-table-scroll {
  max-height:46vh;
  overflow:auto;
  border:1px solid var(--line);
  border-radius:var(--r-md);
}
.bill-table {
  width:100%;
  min-width:820px;
  border-collapse:collapse;
  font-size:0.72rem;
}
.bill-table th,
.bill-table td {
  padding:9px 10px;
  border-bottom:1px solid var(--line);
  text-align:left;
  vertical-align:middle;
}
.bill-table thead th {
  position:sticky;
  top:0;
  z-index:1;
  background:var(--bg-raised);
  color:var(--fg-subtle);
  font-size:0.64rem;
  font-weight:600;
  white-space:nowrap;
}
.bill-table tbody tr:last-child td { border-bottom:0; }
.bill-table tbody tr:hover { background:var(--bg-hover); }
.bill-table .num {
  text-align:right;
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.bill-table .bill-payable { color:var(--success); font-weight:700; }
.bill-product { max-width:260px; }
.bill-product strong,
.bill-product span {
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.bill-product strong { color:var(--fg); font-size:0.75rem; }
.bill-product span { margin-top:3px; color:var(--fg-subtle); font-family:var(--font-mono); font-size:0.62rem; }
.bill-type {
  color:var(--fg-muted);
  font-size:0.68rem;
  white-space:nowrap;
}
.bill-empty {
  height:108px;
  color:var(--fg-subtle);
  text-align:center !important;
}
.bill-table-foot {
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:34px;
  gap:12px;
  padding-top:8px;
  color:var(--fg-subtle);
  font-family:var(--font-mono);
  font-size:0.65rem;
}
.bill-pager {
  display:flex;
  align-items:center;
  gap:8px;
  min-width:102px;
  justify-content:flex-end;
}
.bill-page-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  padding:0;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--bg-raised);
  color:var(--fg);
  cursor:pointer;
  font-size:1rem;
}
.bill-page-btn:hover:not(:disabled) { border-color:var(--accent); color:var(--accent); }
.bill-page-btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.bill-page-btn:disabled { opacity:0.35; cursor:default; }
@media(max-width:680px) {
  .bailian-bill-modal { width:calc(100vw - 20px); }
  .bill-modal-head { align-items:stretch; flex-direction:column; gap:12px; }
  .bill-cycle-control { width:100%; }
  .bill-cycle-control input[type="month"] { flex:1; min-width:0; }
  .bill-summary { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .bill-metric { border-bottom:1px solid var(--line); }
  .bill-metric:nth-child(2n) { border-right:0; }
  .bill-metric:last-child { border-bottom:0; }
  .bill-table-foot { align-items:flex-start; flex-direction:column; }
  .bill-pager { justify-content:flex-start; }
}

/* ═══════ 工坊配置 ═══════ */
.workshop-revision{font:0.72rem var(--font-mono);color:var(--fg-subtle)}
.workshop-revision.dirty{color:var(--warning)}
.workshop-tabs{display:flex;gap:2px;overflow-x:auto;padding:2px;background:var(--bg-raised);border:1px solid var(--line);border-radius:var(--r-md);width:fit-content;max-width:100%}
.workshop-tabs button{height:26px;padding:0 10px;border:0;border-radius:var(--r-sm);background:transparent;color:var(--fg-muted);display:flex;align-items:center;gap:6px;white-space:nowrap;cursor:pointer;font-size:var(--fs-xs)}
.workshop-tabs button:hover{color:var(--fg)}
.workshop-tabs button.active{background:var(--bg-surface);color:var(--fg);box-shadow:0 0 0 1px var(--line-strong)}
.workshop-tabs small{font:10px var(--font-mono);color:var(--fg-subtle)}
.workshop-routing{display:grid;grid-template-columns:minmax(240px,1fr) auto minmax(170px,240px) minmax(190px,260px);align-items:end;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg-surface)}
.workshop-routing-copy{align-self:center;display:flex;flex-direction:column;gap:4px}
.workshop-routing-copy strong{font-size:.84rem}.workshop-routing-copy small{max-width:620px;color:var(--fg-subtle);font-size:.68rem;line-height:1.5}
.workshop-route-field{display:flex;flex-direction:column;gap:5px}.workshop-route-field span{color:var(--fg-subtle);font-size:.66rem}.workshop-route-field select{height:var(--h-ctl);min-width:0;padding:0 9px;border:1px solid var(--line-strong);border-radius:var(--r-md);background-color:var(--bg-inset);color:var(--fg)}
.workshop-shell{display:grid;grid-template-columns:minmax(0,1fr) 360px;min-height:560px;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--bg-surface)}
.workshop-list-pane{min-width:0;border-right:1px solid var(--line)}
.workshop-list-toolbar{min-height:56px;padding:10px 12px;display:grid;grid-template-columns:auto minmax(160px,260px) auto;align-items:center;justify-content:end;gap:9px;border-bottom:1px solid var(--line)}
.workshop-list-toolbar strong{margin-right:auto;font-size:.86rem}
.workshop-list-toolbar input{height:var(--h-ctl);padding:0 10px;border:1px solid var(--line-strong);border-radius:var(--r-md);background-color:var(--bg-inset);color:var(--fg)}
.workshop-table{min-width:680px}
.workshop-table-wrap{border:0;border-radius:0;background:transparent}
.workshop-table tbody tr{cursor:pointer}
.workshop-table tbody tr.selected{background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--accent)}
.workshop-table td:first-child strong,.workshop-table td:first-child small{display:block}
.workshop-table td:first-child small{margin-top:4px;color:var(--fg-subtle);font:10px var(--font-mono)}
.workshop-model-chips{display:flex;flex-wrap:wrap;gap:4px}
.workshop-model-chips span{max-width:180px;overflow:hidden;text-overflow:ellipsis;padding:3px 6px;border:1px solid var(--line-strong);border-radius:4px;color:var(--fg-muted);font:10px var(--font-mono);white-space:nowrap}
.workshop-empty-row{text-align:center;color:var(--fg-subtle);padding:32px!important}
.workshop-editor{display:flex;flex-direction:column;min-width:0;background:var(--bg-inset)}
.workshop-editor-head{min-height:70px;padding:14px 16px;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line)}
.workshop-editor-head h3{margin-top:5px;font-size:1rem}
.workshop-delete{color:var(--danger)!important}
.workshop-editor-empty{padding:40px 20px;color:var(--fg-subtle);font-size:.82rem;text-align:center}
#workshopEditorForm{padding:16px;overflow-y:auto}
.workshop-field{display:block;margin-bottom:17px;border:0}
.workshop-field>span,.workshop-field legend{display:block;margin-bottom:7px;color:var(--fg-muted);font-size:.75rem}
.workshop-field>span:has(.workshop-step),.workshop-field legend:has(.workshop-step){display:flex;align-items:center;gap:7px}
.workshop-step{display:inline-grid;place-items:center;width:19px;height:19px;border:1px solid var(--accent);border-radius:50%;color:var(--accent);font:600 10px var(--font-mono)}
.workshop-field input[type=text],.workshop-field select{width:100%;height:var(--h-ctl);padding:0 10px;border:1px solid var(--line-strong);border-radius:var(--r-md);background-color:var(--bg-surface);color:var(--fg)}
.workshop-field small{display:block;margin-top:6px;color:var(--fg-subtle);font-size:.68rem;line-height:1.5}
.workshop-model-options{display:grid;gap:5px;max-height:190px;overflow:auto;padding:7px;border:1px solid var(--line-strong);border-radius:var(--r-md);background:var(--bg-surface)}
.workshop-model-options label{display:flex;align-items:center;gap:8px;padding:7px;border-radius:4px;color:var(--fg-muted);font:11px var(--font-mono);cursor:pointer}
.workshop-model-options label:hover{background:var(--bg-hover);color:var(--fg)}
.workshop-model-options p{padding:10px;color:var(--fg-subtle);font-size:.75rem}
.workshop-model-capabilities{display:grid;gap:6px}
.workshop-capability-row{display:grid;grid-template-columns:minmax(0,1fr) repeat(3,auto);gap:7px;align-items:center;padding:8px;border:1px solid var(--line-strong);border-radius:var(--r-md);background:var(--bg-surface)}
.workshop-capability-row code{overflow:hidden;text-overflow:ellipsis;color:var(--fg-muted);font-size:10px;white-space:nowrap}
.workshop-capability-row label{display:flex;align-items:center;gap:4px;color:var(--fg-subtle);font-size:10px}.workshop-capability-row input{accent-color:var(--accent)}
.workshop-capability-stream{grid-column:1/-1;display:grid!important;grid-template-columns:auto 1fr auto auto;gap:6px!important;padding-top:6px;border-top:1px solid var(--line)}
.workshop-capability-stream select{height:var(--h-ctl-sm);padding:0 22px 0 6px;border:1px solid var(--line-strong);border-radius:var(--r-sm);background-color:var(--bg-inset);color:var(--fg)}
.workshop-capability-empty{padding:9px;color:var(--fg-subtle);font-size:.72rem}
.workshop-enabled{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.workshop-enabled span{display:flex;flex-direction:column;gap:4px}
.workshop-enabled strong{font-size:.78rem}.workshop-enabled small{color:var(--fg-subtle);font-size:.66rem}
.workshop-enabled input{width:18px;height:18px;accent-color:var(--accent)}
.workshop-editor-actions{display:flex;justify-content:flex-end;padding-top:16px}
@media(max-width:1050px){.workshop-routing{grid-template-columns:1fr auto}.workshop-routing-copy{grid-column:1/-1}.workshop-route-field{min-width:0}.workshop-shell{grid-template-columns:minmax(0,1fr) 330px}.workshop-list-toolbar{grid-template-columns:1fr auto}.workshop-list-toolbar strong{grid-column:1/-1}.workshop-list-toolbar input{min-width:0}}
@media(max-width:760px){.workshop-routing{grid-template-columns:1fr}.workshop-routing-copy{grid-column:auto}.workshop-shell{display:block;overflow:visible}.workshop-list-pane{border-right:0}.workshop-editor{margin-top:12px;border:1px solid var(--line-strong);border-radius:8px}.workshop-list-toolbar{grid-template-columns:minmax(0,1fr) auto}.workshop-list-toolbar strong{display:none}}

/* ═══════ Utilities（替代 index.html 里的内联样式） ═══════ */
.mt-10 { margin-top:10px; }
.mt-16 { margin-top:16px; }
.chart-box { position:relative; width:100%; }
.col-rank { width:50px; }
.col-share { width:120px; }

.table-empty-xs { font-size:0.75rem; }


/* 账单弹窗表格（bailian.js 渲染） */
.bill-table-scroll { overflow:auto; background:var(--bg-surface); border:1px solid var(--line); border-radius:var(--r-lg); }
.bill-table thead th { height:var(--h-row); padding:0 var(--sp-3); background:var(--bg-raised); color:var(--fg-muted); font-size:var(--fs-xs); font-weight:500; }
.bill-table td { padding:4px var(--sp-3); }
@media (max-width: 768px) { .user-dropdown-panel { width:100%; min-width:240px; } }