/* wild-work 管理面板 — 现代浅色风格，响应式，无外部依赖 */
:root {
  --bg: #f5f6f8;
  --card: #ffffff;
  --border: #e4e7ec;
  --text: #1f2329;
  --muted: #8a919f;
  --primary: #2563eb;
  --primary-hover: #1d4ed8;
  --danger: #dc2626;
  --ok: #16a34a;
  --warn: #d97706;
  /* —— 语义色：按「时间方向」统一，不按「严重程度」（2026-10-22 用户定，R132）——
     面板上两套表格（最近临期 / 今日情况）此前各用一套色轴：临期按紧迫度、平台表按资金流向，
     结果红在两处含义相反（临期=「还能救，马上动手」，平台表作废=「已经没了，救不了」），
     灰也在两处撞车（临期=「这行不用管了」，平台表=「没数据」）。
     统一后只用**一个轴：这件事还需不需要你行动**。 */
  --sem-act-now: #dc2626;   /* 红：未来时，现在还来得及但很快失效（今天到期） */
  --sem-act-soon: #d97706;  /* 黄：未来时，还有缓冲（明天到期） */
  /* 灰只一阶（R134）：消耗与作废同为「过去时、无需行动」，用同一个灰。
     两阶灰（R133）实测区分度不够、且多出一个色阶要与正文灰 #52525b 争层级；
     改回同灰，**代价差异交给删除线**表达（删除线=白白没了）。 */
  --sem-done: #a1a1aa;      /* 灰：过去时已成事实、不需要任何行动（已消耗 / 已作废 / 已用完） */
  --sem-gain: #16a34a;      /* 绿：新进账（唯一正向语义） */
  --radius: 10px;
  --shadow: 0 1px 3px rgba(0,0,0,.06);

  /* —— 渠道识别色：徽章 / 费率表头 / 按钮 / 折线图 series 四处共用同一变量，改这里一处全局生效 ——
     变量名 = CH_CLASS 短类名（app.js chColor() 按 --ch-<类名> 读取）；
     调色原则：① 贴合各大品牌官方标志色；② 色相环拉开距离消除重叠；③ 告别脏暗色，通透明朗。 */
  --ch-wb: #2563eb;          /* WorkBuddyCN 蓝（经典科技蓝） */
  --ch-wbai: #0f766e;        /* WorkBuddyAI 极光青绿（深邃清爽，与科技蓝呼应） */
  --ch-trae: #047857;        /* TRAE 智能翠绿（Trae 官方核心色 Intelligent Green） */
  --ch-qodercn: #c026d3;     /* QoderCN 极光品红 */
  --ch-qodercom: #7e22ce;    /* QoderCOM 紫罗兰（告别旧深棕） */
  --ch-qwenwork: #4f46e5;    /* 千问办公 通义紫（阿里通义千问官方极光紫，告别暗青蓝） */
  --ch-raccoon: #8e6bf2;     /* 小浣熊 浅紫罗兰（商汤小浣熊客户端品牌色） */
  --ch-lingxi: #c2410c;      /* WPS 灵犀 暖橙（WPS 品牌暖色；白字对比 5.18，与既有蓝/绿/品红/紫各拉开色相） */
  --ch-loomy: #be123c;       /* Loomy 讯飞桌面 Agent 玫瑰红（蓝/青系已被 WorkBuddy/灵犀占满，此处取色相环空档；白字对比 5.9） */
  --ch-custom: #6366f1;      /* 自定义渠道兜底色（走黄金角自适应色，见 chColor） */

  /* —— R228 主题扩展变量：亮色值 = 此前散落各处的硬编码色，暗色值整体见
     html[data-theme="dark"]。语义规则：--accent 只管文字/边框悬停态（暗色下提亮），
     按钮底色仍用 --primary；--*-tx 是「文字用」语义色（暗色下换成浅色变体），
     --danger/--ok/--warn 本体继续管按钮底色/色条/边框，两种主题同值。 */
  color-scheme: light;
  --text-2: #52525b;
  --text-3: #a1a1aa;
  --soft: #f0f2f5;
  --row-hover: #f7f8fa;
  --row-line: rgba(23, 23, 23, 0.07);
  --ghost: #c8ccd4;
  --off-tx: #cbd5e1;
  --switch-track: #d1d5db;
  --accent: #2563eb;
  --primary-soft: #eff6ff;
  --primary-soft-2: #dbeafe;
  --primary-bd: #c7d9ff;
  --info-tx: #1d4ed8;
  --ok-tx: #15803d;   --ok-bg: #dcfce7;   --ok-soft: #f0fdf4;   --ok-bd: #bbf7d0;
  --warn-tx: #d97706; --warn-bg: #fef3c7; --warn-soft: #fffbeb; --warn-bd: #fde68a;
  --orange-tx: #c2410c; --orange-bg: #ffedd5; --orange-bd: #fed7aa;
  --danger-tx: #dc2626; --danger-bg: #fee2e2; --danger-bd: #fecaca; --danger-bd2: #fca5a5;
  --asset-tx: #7c3aed;
  --risk-tx: #7c5b10;
}

/* ===== R228 暗色主题（html[data-theme="dark"]，app.js 切换、localStorage ww-theme 记忆、
   head 内联脚本首帧前定初值避免白闪）=====
   结构色整体压暗；文字用语义色（*-tx）提亮为暗底可读变体；--ch-* 渠道识别色不随主题变
   （品牌色在两种主题下同值，徽章/图表/按钮四处同源）；按钮底色 --primary/--danger 保持
   原值（白字对比不变）。 */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #17181c;
  --card: #232529;
  --border: #3a3d44;
  --text: #e6e8ec;
  --muted: #98a0ac;
  --text-2: #b6bbc4;
  --text-3: #7f8490;
  --soft: #2b2d33;
  --row-hover: #292b30;
  --row-line: rgba(255, 255, 255, 0.09);
  --ghost: #565b64;
  --off-tx: #565b64;
  --switch-track: #4a4e56;
  --accent: #60a5fa;
  --primary-soft: rgba(96, 165, 250, 0.14);
  --primary-soft-2: rgba(96, 165, 250, 0.24);
  --primary-bd: rgba(96, 165, 250, 0.38);
  --info-tx: #93c5fd;
  --ok-tx: #6ee7a8;   --ok-bg: rgba(74, 222, 128, 0.13);  --ok-soft: rgba(74, 222, 128, 0.08);  --ok-bd: rgba(74, 222, 128, 0.30);
  --warn-tx: #fbbf24; --warn-bg: rgba(251, 191, 36, 0.13); --warn-soft: rgba(251, 191, 36, 0.09); --warn-bd: rgba(251, 191, 36, 0.35);
  --orange-tx: #fb923c; --orange-bg: rgba(251, 146, 60, 0.13); --orange-bd: rgba(251, 146, 60, 0.32);
  --danger-tx: #f87171; --danger-bg: rgba(248, 113, 113, 0.13); --danger-bd: rgba(248, 113, 113, 0.32); --danger-bd2: rgba(248, 113, 113, 0.48);
  --asset-tx: #c4b5fd;
  --risk-tx: #cdb263;
  --sem-act-now: #f87171;
  --sem-act-soon: #fbbf24;
  --sem-done: #6f747e;
  --sem-gain: #4ade80;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
}

/* R227（手机端适配）：
   · text-size-adjust 锁住移动浏览器在横竖屏切换/页面缩放时对正文字号的自动膨胀；
   · 可点元素一律 touch-action: manipulation——去掉触屏浏览器对按钮的 300ms
     双击缩放判定（点按立即响应），只作用于按钮与图标，页面滚动手势不受影响。 */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
button, .icon-op, .icon-link { touch-action: manipulation; }

/* R216/R217：容器原来钉死 960px，宽屏上左右各留一大片空白，而列表里还在用省略号截文字。
   现在 1280px —— 业界常见的内容宽（Bootstrap 容器 lg 1140 / xl 1320；Tailwind max-w-7xl 1280），
   更窄的窗口仍是满宽；费率表 7 列的内容宽约 950px，得有这么宽才摆得下。 */
#app { max-width: 1280px; margin: 0 auto; padding: 20px 16px 60px; }

/* 顶部 */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 16px;
  gap: 12px;
}
.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.logo { width: 40px; height: 40px; border-radius: 8px; }
.brand-text .title { font-size: 18px; font-weight: 700; line-height: 1.2; }
.brand-text .ver { font-size: 11px; color: var(--muted); font-weight: 400; margin-left: 4px; }
.brand-text .sub { font-size: 11px; color: var(--muted); }

.top-info { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; flex: 1; max-width: 480px; }
.info-cell { display: flex; align-items: center; gap: 8px; }
.info-label { font-size: 11px; color: var(--muted); white-space: nowrap; }
.info-value {
  font-size: 12px; color: var(--muted); background: var(--soft); padding: 4px 10px;
  border-radius: 6px; font-family: ui-monospace, monospace; cursor: pointer;
  display: inline-flex; align-items: center; overflow: hidden; min-width: 0; flex: 1;
}
.info-value:hover { color: var(--accent); background: var(--primary-soft-2); }
.info-value .val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; flex-shrink: 1; }

.top-icons { display: flex; gap: 8px; flex-shrink: 0; }
.icon-link.gear { font-size: 18px; }
.icon-link {
  width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--muted);
  color: var(--muted); display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700; cursor: pointer; transition: all .15s;
}
.icon-link:hover { border-color: var(--accent); color: var(--accent); }

/* 面板区块 */
.panel { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 16px; box-shadow: var(--shadow); }
.panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; flex-wrap: wrap; gap: 8px; }
.panel-head h2 { font-size: 16px; font-weight: 600; }

/* 账号管理按钮区：外层 wrap 分三段 —— 左组(刷新/签到) + 弹性空白 + 右组(渠道三列 grid)。
   左组整体靠左、右组整体靠右，中间空白自动伸缩；左组窄时 wrap 换行不溢出。 */
.panel-actions-wrap { display: flex; align-items: center; flex: 1; min-width: 0; }
.pa-spacer { flex: 1; }
.pa-left { display: flex; flex-direction: column; gap: 8px; }
.pa-left .btn { white-space: nowrap; align-self: flex-start; }
.pa-right {
  display: grid;
  grid-template-columns: repeat(6, auto);
  gap: 8px 10px;
}
.pa-right .btn { justify-self: stretch; white-space: nowrap; }
/* 摆位与列配对由 DOM 顺序（行主序）决定：同列上下 = 同渠道的国内/国际版
   （WorkBuddyCN/WorkBuddyAI、QoderCN/QoderCOM）。
   行数随渠道数增长（当前 18 渠道 + 自定义 = 3 行满格），不做固定行数限制。
   列数/顺序断言见 scripts/ui-static-check.mjs 与 index.html 内注释。 */
/* 紧凑档：比标准按钮小两号（14px/8px14px → 12px/6px10px），
   PC 默认宽度下一行能放下 6 个渠道按钮（实测阈值见下方媒体查询注释）。 */
.panel-actions-wrap .btn { font-size: 12px; padding: 6px 10px; }

/* 按钮 */
.btn { border: 1px solid var(--border); background: var(--card); color: var(--text); padding: 8px 14px; border-radius: 8px; cursor: pointer; font-size: 14px; transition: all .15s; }
.btn:hover { background: var(--soft); }
.btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn.primary:hover { background: var(--primary-hover); }
/* 默认兜底色：中性石板灰。原先写死 #0891b2，与其它渠道色
   完全相同，导致「TRAE」「自定义模型」等未带修饰类的按钮和它们撞色。 */
.btn.primary.alt { background: var(--ch-custom); border-color: var(--ch-custom); }
/* 悬停效果对全部渠道按钮生效：逐渠道再写一遍 :hover 只会多出 22 条重复规则。 */
.btn.primary.alt:hover { filter: brightness(0.88); }
/* 渠道按钮配色：类名 = CH_CLASS 短类名，颜色一律取 --ch-*（与徽章/折线图同源）。
   集中在此处维护：原先散在文件各处（跟各渠道的媒体查询混在一起），漏改一处就会静默落在兜底色上。
   新增渠道时这里补一行即可。 */
.btn.primary.alt.wb { background: var(--ch-wb); border-color: var(--ch-wb); }
.btn.primary.alt.wbai { background: var(--ch-wbai); border-color: var(--ch-wbai); }
.btn.primary.alt.trae { background: var(--ch-trae); border-color: var(--ch-trae); }
.btn.primary.alt.qodercn { background: var(--ch-qodercn); border-color: var(--ch-qodercn); }
.btn.primary.alt.qodercom { background: var(--ch-qodercom); border-color: var(--ch-qodercom); }
.btn.primary.alt.qwenwork { background: var(--ch-qwenwork); border-color: var(--ch-qwenwork); }
.btn.primary.alt.raccoon { background: var(--ch-raccoon); border-color: var(--ch-raccoon); }
.btn.primary.alt.lingxi { background: var(--ch-lingxi); border-color: var(--ch-lingxi); }
.btn.primary.alt.loomy { background: var(--ch-loomy); border-color: var(--ch-loomy); }
.btn.primary.alt.custom { background: var(--ch-custom); border-color: var(--ch-custom); }

.btn.danger { background: var(--danger); border-color: var(--danger-tx); color: #fff; }
.btn.danger:hover { background: #b91c1c; }
.btn.small { padding: 5px 10px; font-size: 13px; }

/* 渠道积分汇总条（账号卡片上方，数据与卡片同源） */
.credit-summary {
  display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center;
  margin-bottom: 12px; padding: 10px 12px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
}
.cs-title { font-size: 12px; color: var(--muted); font-weight: 600; margin-right: 2px; }
.cs-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px 3px 4px; border-radius: 999px;
  background: var(--bg); border: 1px solid var(--border); font-size: 12px; white-space: nowrap;
}
.cs-chip .badge { font-size: 10px; }
.cs-n { color: var(--muted); font-size: 11px; }
.cs-num { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.cs-exp { color: var(--danger-tx); font-weight: 600; font-size: 11px; }
.cs-unu { color: var(--muted); font-size: 11px; }
.cs-stale { color: var(--warn-tx); font-size: 11px; }
.cs-total { background: var(--primary-soft); border-color: var(--primary-bd); }
.cs-total .cs-title { color: var(--accent); }
/* 渠道 chip 可点击筛选账号：整条作为按钮，选中态加边高亮 */
.cs-chip.clickable { cursor: pointer; }
.cs-chip.clickable:hover { border-color: var(--accent); }
.cs-chip.clickable:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.cs-chip.clickable.on { border-color: var(--accent); background: var(--primary-soft); }
.cs-chip.cs-all { padding: 3px 10px; }
.cs-chip.cs-all .cs-n { color: var(--accent); }
/* 「不适用」开关 chip：默认收起态用虚线边框与弱色，表明它是开关而不是一个渠道；
   展开后（.on）转实线 + 主题色，与渠道筛选选中态同源。 */
.cs-chip.cs-na { border-style: dashed; }
.cs-chip.cs-na .cs-n { color: var(--muted); }
.cs-chip.cs-na.on { border-style: solid; }
.cs-chip.cs-na.on .cs-n { color: var(--accent); }
/* 账号筛选后隐藏的卡片（applyAcctFilter 控制） */

/* 账号卡片网格（R195：两列 → 自适应多列 + 卡片压成两行）
   宽度按「24 个账号一屏能扫完」定：minmax(280px, 1fr) 在 1000px 视口出 3 列、
   1440px 出 4 列；再窄到 679px 由下面的窄屏规则退回单列。 */
/* R205：账号从「卡片网格」改成「单列列表」——每行一个账号（用户决议：改成列表的形式）。
   列表容器自己带边框圆角，行与行之间只留一条分隔线，行高 ~36px，一屏能看到二十多个账号。 */

/* 六个单元格（R209 扁平结构，取代 R205 的三块包装层）：徽章 · 名字 · 冷却类标签 ·
   签到状态 · 积分 · 操作图标。名字吃掉剩余宽度、过长省略号（min-width:0 才生效）；
   两列标签都靠右，与右侧的数字/图标形成一条直线，行内不再出现「宽度漂移」。 */

/* R214：列表数据列一律左对齐（原先冷却/签到/积分/倍率/数字列都是右对齐或居中，
   同一列内容贴着列右缘、与左侧名字之间留出一条突兀的空白）。操作图标那一列仍旧贴右——
   它是行尾的按钮组，不是数据列。 */

/* 可用/不可用/临期拆分：主数字黑色正常字号，不可用降级为次要色，临期红色醒目提示优先消耗。 */

/* 旧版 state 文件读入后余额口径不可信：显示待刷新而非旧值 */

@keyframes stale-pulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }

/* 卡片内的操作图标缩到 22px（R195 紧凑化）；全局 .icon-op 28px 是触控目标，别动 */

.badge { font-size: 10px; padding: 2px 7px; border-radius: 10px; color: #fff; white-space: nowrap; }
/* 渠道徽章配色：类名 = CH_CLASS 短类名，颜色一律取 --ch-*。
   这里只是「无 JS 兜底」：真正渲染走 app.js 的 chBadge()（内联 background = chColor()），
   自定义渠道的徽章底色由 chBadge 内联覆盖，故 .badge.custom 仅是兜底值。
   集中在此维护，新增渠道时这里补一行即可（散在各处时曾出现同一规则被写两遍、
   后一条 hex 静默覆盖变量版的情况）。 */
.badge.wb { background: var(--ch-wb); }
.badge.wbai { background: var(--ch-wbai); }
.badge.trae { background: var(--ch-trae); }
.badge.qodercn { background: var(--ch-qodercn); }
.badge.qodercom { background: var(--ch-qodercom); }
.badge.qwenwork { background: var(--ch-qwenwork); }
.badge.raccoon { background: var(--ch-raccoon); }
.badge.lingxi { background: var(--ch-lingxi); }
.badge.loomy { background: var(--ch-loomy); }
.badge.custom { background: var(--ch-custom); }

.tag { font-size: 10px; padding: 2px 7px; border-radius: 10px; white-space: nowrap; }
.tag.bad { background: var(--danger-bg); color: var(--danger-tx); }
.tag.ok { background: var(--ok-bg); color: var(--ok-tx); }
.tag.neutral { background: var(--soft); color: var(--muted); }

/* 图标操作按钮 */
.icon-op {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--card); color: var(--muted); cursor: pointer; font-size: 14px;
  transition: all .15s; margin: 0 1px;
}
.icon-op:hover { color: var(--accent); border-color: var(--accent); background: var(--primary-soft); }
.icon-op.danger:hover { color: var(--danger-tx); border-color: var(--danger-tx); background: var(--danger-bg); }
.icon-op.warn:hover { color: var(--warn-tx); border-color: var(--warn-tx); background: var(--warn-soft); }
.icon-op.off { cursor: not-allowed; color: var(--off-tx); opacity: .55; }
.icon-op.off:hover { color: var(--off-tx); border-color: var(--border); background: var(--card); }

/* 冷却标签 + 冷却卡片（账号被挑号跳过时给出可见提示，避免"积分很多却报错"的困惑） */
.tag.warn { background: var(--warn-bg); color: var(--warn-tx); }
/* R205：冷却/模型冷却的左侧色条改用 inset 阴影——border-left 会把这一行内容整体右移 3px，
   列表里与上下行错开很明显。 */

/* 模型级冷却：只有个别模型被跳过，账号本身仍可用 ⇒ 左侧标蓝（不是橙）。
   用橙色会让用户以为整个账号下线（R126）。 */

/* 弹层顶部风险告知 */
.warn-block {
  border: 1px solid var(--warn-bd);
  background: var(--warn-soft);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
}
.warn-block-title { font-size: 13px; font-weight: 700; color: var(--warn-tx); margin-bottom: 4px; }

.empty { color: var(--muted); text-align: center; padding: 24px 0; font-size: 14px; }
.hidden { display: none !important; }

/* 表单行 */
.row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.lbl { font-size: 13px; color: var(--muted); width: 44px; }
.input { border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; font-size: 14px; outline: none; }
.input:focus { border-color: var(--accent); }
.input.port { width: 80px; }
/* 通用弹性自适应容器与包装层 */
.grow { flex: 1 1 auto; min-width: 0; }
.row > .pk-wrap.grow { flex: 1 1 auto; min-width: 0; }

.input.grow { flex: 1; min-width: 120px; }
.select { border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; font-size: 14px; background: var(--card); outline: none; }

/* 下拉框统一自绘箭头（原生箭头在 Chrome 上是又小又贴边的灰色三角，和圆角边框不搭）。
   做法：appearance:none 去掉原生控件，再画一个 CSS 三角贴在右侧。
   为什么用 background-image 而不是 ::after：<select> 是替换元素，伪元素在多数
   浏览器里不渲染（Chrome 明确不支持）。三角用 border 拼，颜色走 currentColor
   的近似值（CSS 变量在 gradient 里可用，但三角需要 border，故直接写 muted 色）。 */
.select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted, #64748b) 50%),
                    linear-gradient(135deg, var(--muted, #64748b) 50%, transparent 50%);
  background-position: calc(100% - 16px) calc(50% + 2px), calc(100% - 11px) calc(50% + 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 28px;   /* 给箭头留位，避免长选项文字压到三角 */
  cursor: pointer;
}
/* Firefox 不认 background-image 定位三角时会退化成无箭头，补一条 border 兜底；
   同时禁用 IE 时代的 ::-ms-expand（虽然已无用户，成本为零）。 */
.select::-ms-expand { display: none; }
.muted { color: var(--muted); }
.hint { font-size: 12px; color: var(--muted); margin-top: 6px; }
.risk-tip { font-size: 12px; color: var(--warn-tx); background: var(--warn-soft); border: 1px solid var(--warn-bd); padding: 8px 10px; border-radius: 8px; margin-top: 8px; }

/* 必填标记（管理密码 label 后的红点）：监听非本机地址时显示 */
.req { color: var(--danger-tx); font-weight: 700; margin-left: 3px; }

/* 签到时间（设置弹层内） */
.times-wrap {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center; flex: 1; min-width: 0;
}
.times { display: contents; }
.time-chip {
  background: var(--card); border: 1px solid var(--border); color: var(--text);
  padding: 3px 8px; border-radius: 6px; font-size: 12px;
  font-family: ui-monospace, Consolas, monospace;
  cursor: pointer; display: inline-flex; align-items: center; gap: 4px;
  line-height: 1.4; transition: all .12s ease;
}
.time-chip:hover {
  background: var(--danger-bg); border-color: var(--danger-bd2); color: var(--danger-tx);
}
.time-add-btn {
  height: 25px; padding: 0 8px; font-size: 12px;
  border-radius: 6px; border: 1px dashed var(--border);
  background: var(--card); color: var(--muted);
  display: inline-flex; align-items: center; gap: 2px;
  cursor: pointer; transition: all .15s ease;
}
.time-add-btn:hover {
  color: var(--accent); border-color: var(--accent); background: var(--soft);
}
.icon-btn { border: 1px dashed var(--border); background: transparent; color: var(--muted); width: 30px; height: 30px; border-radius: 8px; cursor: pointer; font-size: 16px; }
.icon-btn:hover { color: var(--accent); border-color: var(--accent); }

/* 费率表 */
.fees { font-size: 13px; }

/* R207：单列列表——倍率列固定宽度、右对齐，模型单元格里的各项并排一行。 */
/* R214：倍率列左对齐后不再需要 96px（「x0.08」实测 45px），让出的 20px 给模型列，
   换来上下文列 (960k)/(256k)/(192k) 不再被截成 (96…）。 */

/* 渠道色在费率表上的落点是「渠道 tab」（.fees-tab）而非表头行：R82 改成 tab
   布局后，原先的 .fees .ch-header.x 表头规则已无渲染点，连同 23 条渠道色一起删除。 */
.fees .note { color: var(--muted); font-size: 12px; margin-bottom: 8px; }

/* 模型查找入口：标题行内的放大镜按钮（比默认 icon-btn 小一号，避免抬胀标题行） */
.panel-head h2 .search-btn {
  width: auto; height: 24px; font-size: 13px; border-radius: 6px;
  vertical-align: middle; margin-left: 4px; padding: 0 8px; line-height: 1;
  white-space: nowrap; /* 文字入口（🔍 查询模型）不换行叠字 */
}

/* 模型查找对话框：紧凑固定尺寸（对话框本身不随结果跳变/变高，避免位置困扰）。
   结果全量渲染，超出对话框高度的部分由 .ms-list 纵向滚动查看（不再截断）。 */
.modal.modal-search {
  width: 460px; max-width: 94vw;
  height: 460px; max-height: 86vh;
  display: flex; flex-direction: column;
}
.modal-search .modal-title {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modal-close-btn {
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 15px;
  padding: 2px 6px;
  border-radius: 4px;
  line-height: 1;
  transition: all .15s ease;
}
.modal-close-btn:hover {
  color: var(--text);
  background: var(--bg);
}
.modal-search #modelSearchInput { width: 100%; box-sizing: border-box; margin-bottom: 8px; flex: none; }
/* overflow-y:auto + min-height:0：flex 子项默认 min-height:auto 会撑破容器而不滚动，必须显式归零 */
.ms-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.ms-row {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px; border-radius: 6px; cursor: pointer;
  font-size: 13px; line-height: 1.5;
}
.ms-row:hover { background: var(--primary-soft); }
.ms-row:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.ms-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, Consolas, monospace; }
.ms-tags { flex: none; color: var(--muted); font-size: 11px; }
.ms-rate { flex: none; font-weight: 600; font-size: 12px; color: var(--accent); font-variant-numeric: tabular-nums; }
.ms-empty { color: var(--muted); font-size: 13px; padding: 14px 8px; text-align: center; }
.ms-foot { flex: none; margin-top: 6px; color: var(--muted); font-size: 12px; min-height: 18px; }

/* 渠道多标签：收束长费率表（每渠道一个 tab，panel 内双列布局不变） */
.fees-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
  padding-bottom: 6px;
}
.fees-tab {
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12.5px;
  cursor: pointer;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.fees-tab:hover { color: var(--accent); border-color: var(--accent); }
.fees-tab.active {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--primary-soft);
  font-weight: 600;
}
.fees-tab .fees-tab-n {
  font-size: 10.5px;
  color: var(--muted);
  background: var(--border);
  border-radius: 999px;
  padding: 0 5px;
  line-height: 15px;
}
.fees-tab.active .fees-tab-n { color: var(--accent); background: var(--primary-soft-2); }
/* 渠道积分余额角标：tab 内显示该渠道可用积分合计（与汇总条同源） */
.fees-tab .fees-tab-bal {
  font-size: 10.5px;
  color: var(--ok-tx);
  background: var(--ok-bg);
  border: 1px solid var(--ok-bd);
  border-radius: 999px;
  padding: 0 6px;
  line-height: 15px;
  font-variant-numeric: tabular-nums;
}
/* 模型名可点击复制（整段 code 作为按钮） */
.fees code.fee-model-copy {
  cursor: pointer;
  border-radius: 3px;
  padding: 0 2px;
}
.fees code.fee-model-copy:hover { background: var(--primary-soft); color: var(--accent); }
.fees code.fee-model-copy:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
/* 倍率显示：Free 高亮 / 已定价 / 未知（带 tooltip） */
.fees .rate-free {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  background: var(--ok-bg); color: var(--ok-tx); font-weight: 600; font-size: 12px;
  border: 1px solid var(--ok-bd); cursor: default;
}
.fees .rate-paid { font-variant-numeric: tabular-nums; }
.fees .rate-unknown {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  background: var(--soft); color: var(--text-3); font-size: 12px;
  border: 1px dashed var(--border); cursor: default;
}
.fees .rate-note { color: var(--warn-tx); font-size: 11px; }
/* R215：全站不再用「问号光标」样式 —— macOS 上那个光标是「箭头 + 问号气泡」，用户要求去掉
   （「悬浮的时候有一个问号」）。这些元素仍靠 title / .help-pop 给说明，只是光标保持普通箭头。 */
/* 能力图标：模型 ID 后的小标记，hover 显示文字说明（title） */
.fees .cap-icons { display: inline-flex; gap: 2px; margin-left: 2px; vertical-align: middle; }
.fees .cap-icon {
  display: inline-block; font-size: 11px; line-height: 1;
  opacity: .75; cursor: default; filter: saturate(.85);
}
.fees .cap-icon:hover { opacity: 1; }

/* 可用性：路由状态与历史成功证据分开写在 tooltip，不把目录声明冒充为已验证 */
/* 说明文字一律走 data-tip 悬浮卡片（见 bindAvailabilityTip），不用原生 title，
   所以光标保持默认箭头：cursor:help 会渲染成问号，看着像「这里没内容」而不是「这里有说明」。 */
.fees .availability {
  display: inline-block; margin-left: 4px; padding: 1px 5px; border-radius: 4px;
  font-size: 10px; line-height: 1.4; white-space: nowrap; cursor: default;
}
.fees .availability-available { color: var(--ok-tx); background: var(--ok-soft); border: 1px solid var(--ok-bd); }
.fees .availability-unavailable { color: var(--danger-tx); background: var(--danger-bg); border: 1px solid var(--danger-bd); }
.fees .availability-unknown { color: var(--muted); background: var(--soft); border: 1px dashed var(--border); }
.fees .availability:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

/* 可用性说明由 JS 渲染成 fixed 悬浮卡片：原生 title 不稳定，且固定定位不会被费率表格裁切。 */
.availability-tip {
  position: fixed; z-index: 9999; pointer-events: none;
  max-width: min(360px, calc(100vw - 16px)); padding: 8px 10px;
  border-radius: 7px; background: #111827; color: var(--soft);
  box-shadow: 0 8px 24px rgba(15, 23, 42, .25);
  font-size: 12px; line-height: 1.55; white-space: pre-line; text-align: left;
}

/* 上下文窗口标记：模型 ID 后的 (1M)/(180K) 小字标 */
.fees .ctx-tag {
  font-size: 11px; color: var(--muted); margin-left: 2px;
  font-variant-numeric: tabular-nums; cursor: default;
}
.fees code + .ctx-tag { vertical-align: baseline; }
/* 面板手填值（带 *）：用警示色区分，避免与上游官方声明混淆 */
.fees .ctx-tag.hand { color: var(--warn-tx); border-bottom: 1px dotted var(--warn); }

/* 思考档位标记（issue #96）：模型 ID 后的 [low·high·max] 小字标 */
.fees .effort-tag {
  font-size: 11px; color: var(--asset-tx); margin-left: 2px;
  font-family: ui-monospace, monospace; cursor: default;
}
.fees code + .effort-tag { vertical-align: baseline; }
/* 档位门槛标记（R176）：模型不在当前账号档位内，调用会被直接跳过。
   用橙黄警示色而非红：模型本身可用，只是这些免费号调不通，账号升级即恢复。 */
.fees .tier-tag {
  font-size: 10px; line-height: 1.4; margin-left: 4px; padding: 1px 5px;
  border-radius: 4px; color: var(--warn-tx); background: var(--warn-soft);
  border: 1px solid var(--warn-bd); cursor: default; white-space: nowrap;
}
/* 模型搜索框同款（复用紫色区分于上下文灰字） */
.ms-eff { color: var(--asset-tx); font-family: ui-monospace, monospace; cursor: default; }

/* 完整模型ID：费率表每行模型下方显示「渠道/模型」，点击即复制（客户端该填的模型名） */
/* R207：原来 mcell 是两行（模型名 / 完整 ID+上下文+徽章）——单列列表里横宽够，改成一行并排，
   读起来就是「模型 · 档位 · 完整 ID · 上下文 · 可用性 · 促销备注」一条流水。
   R211：并排时不能再用 flex 自动排布——模型名长短不同，后面的完整 ID / 上下文 / 徽章起点
   逐行漂移（用户：「这里也没对齐」）。改成固定 7 列网格，每行都用同一组列宽
   ⇒ 模型名 / 档位 / 图标 / 完整 ID / 上下文 / 可用性 / 备注 逐列对齐，与「最近临期」同一套路。
   R217：列宽改为**遍历全部 12 个渠道、逐列取实测最宽内容 + 6px 余量**（原先是拿单个渠道估的，
   切到 Loomy 就出现 [none·low·medium·high·xhig…] 与 (104…)：模型名 216 / 档位 186 /
   能力槽 84（👁🧠 档位外）/ 完整 ID 244 / 上下文 43（(1049k)）/ 可用性 76 / 备注 48。
   模型名列 `minmax(216px, 1fr)` 吃剩余宽度（长名仍有 .fee-model-copy 的 title 可看全名，
   点一下还能复制完整 ID）；窗口窄到放不下时按 @media 分档收紧（1155px / 959px 两档）。 */

/* 两段包装层只负责分组语义，不参与布局：把 .fc-* 七个格子直接交给上面的网格 */

/* 图标列很窄，档位外的「档位外」标签宁可溢出到相邻空列，也不截成省略号 */

.fees .full-id {
  display: inline-block; font-family: ui-monospace, monospace; font-size: 11px;
  color: var(--muted); background: var(--soft); padding: 1px 6px; border-radius: 4px;
  cursor: pointer; user-select: all; line-height: 1.5; white-space: nowrap;
}
.fees .full-id:hover { color: var(--accent); background: var(--primary-soft-2); }

/* 自定义渠道的「接入点 / api-key」行（R119）：费率页被当模型接入点总表用，
   每个自定义渠道在自己的模型表前占一行，两段都可点复制。
   key 常态只显脱敏串，明文由点下去那一刻另走接口取，不随费率批量下发。 */
.fee-access {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  margin: 2px 0 8px; padding: 6px 10px;
  background: var(--soft); border: 1px solid var(--border); border-radius: 8px;
}
.fee-access-k { font-size: 11px; color: var(--muted); flex: none; }
.fee-access-v {
  font-family: ui-monospace, Consolas, monospace; font-size: 11.5px; color: var(--text);
  background: var(--card); border: 1px solid var(--border); border-radius: 6px;
  padding: 1px 7px; cursor: pointer; line-height: 1.6;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fee-access-v:hover { color: var(--accent); border-color: var(--accent); background: var(--primary-soft-2); }
/* 「显示全部模型」开关（R122）：沿用全局 .switch 形状，在这一行里缩小一号免得撑高 */
.fee-all-wrap { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.fee-all-wrap .switch { width: 34px; height: 18px; flex: none; }
.fee-all-wrap .slider:before { width: 12px; height: 12px; left: 3px; bottom: 3px; }
.fee-all-wrap .switch input:checked + .slider:before { transform: translateX(16px); }
.fee-all-box { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 6px 0 2px; padding: 8px 10px; background: var(--soft); border: 1px solid var(--border); border-radius: 8px; }
.fee-all-item { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; }
.fee-all-item code { font-family: ui-monospace, Consolas, monospace; }
.fee-all-item.added { opacity: .75; }

/* 能力来源徽标（R119）：上游声明 / 面板手填 / 未探测 三态。
   复用于自定义模型列表、模型管理行、导入勾选行，颜色走项目设计令牌不在两处写死。 */
.cap-api { color: var(--ok-tx); font-weight: 600; }
.cap-user { color: var(--warn-tx); }
.cap-unknown { color: var(--muted); border-bottom: 1px dotted var(--muted); cursor: default; }

/* 配置说明 */
.docs { font-size: 13px; }
.docs p { margin-bottom: 8px; }
.docs code { background: var(--soft); padding: 2px 6px; border-radius: 4px; font-family: ui-monospace, monospace; font-size: 12px; }

/* 开关 */
.switch { position: relative; display: inline-block; width: 42px; height: 24px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; inset: 0; background: var(--switch-track); border-radius: 24px; transition: .2s; cursor: pointer; }
.slider:before { content: ""; position: absolute; width: 18px; height: 18px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: .2s; }
.switch input:checked + .slider { background: var(--primary); }
.switch input:checked + .slider:before { transform: translateX(18px); }

/* 弹层 */
/* R227：overlay 自身可滚（配下方 .modal 的 margin:auto 安全居中）——
   弹层比视口高时（手机上键盘弹出、设置弹层）原来上下两端都够不着，现在能从顶部滚到底。 */
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,.4); display: flex; align-items: center; justify-content: center; z-index: 100; overflow-y: auto; }
/* ===== 弹层宽度规范（R84）=====
   只有两档，别再造第三档：
     .modal            400px  单行输入类（改名/确认/关于/登录）
     .modal-wide       720px  表单类（添加账号/设置/自定义渠道/模型管理）
   两档宽度差已足够；曾经还有 1180px 的第三档（xwide），2026-10-24 渠道清理后
   已无任何弹层使用，连同其规则一并删除。 */
.modal { background: var(--card); border-radius: 12px; padding: 20px 22px; width: 400px; max-width: 92vw; box-shadow: 0 10px 30px rgba(0,0,0,.2); margin: auto; }
/* 宽弹层：统一设置 / 帮助（风险声明多，需宽松排版） */
.modal.modal-wide { width: 720px; max-width: 94vw; max-height: 86vh; display: flex; flex-direction: column; }
.modal-wide .modal-body { overflow-y: auto; min-height: 0; }
.modal-title { font-size: 16px; font-weight: 600; margin-bottom: 12px; }
.modal-body { font-size: 14px; color: var(--text); margin-bottom: 14px; word-break: break-all; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; }
.login-buttons { display: flex; gap: 8px; margin-top: 14px; }

/* 帮助问号角标与浮动说明气泡（R90 规范） */
.help-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 600;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--border);
  cursor: default;
  margin-left: 5px;
  vertical-align: middle;
  line-height: 1;
  user-select: none;
  position: relative;
  transition: all .15s ease;
}
.help-mark:hover,
.help-mark:focus-within {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--primary-soft);
}

.help-pop {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 250;
  width: max-content;
  max-width: min(400px, 80vw);
  min-width: 200px;
  box-sizing: border-box;
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.05);
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.6;
  text-align: left;
  white-space: normal;
  word-break: break-word;
  pointer-events: auto;
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
  transform: translateY(4px);
}
.help-pop::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 8px;
}
.help-mark:hover .help-pop,
.help-mark:focus-within .help-pop {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.help-pop code {
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 11px;
  font-family: ui-monospace, Consolas, monospace;
  color: var(--text);
}
.help-pop b {
  color: var(--text);
  font-weight: 600;
}

/* 统一设置弹层内部分区 */
.settings-body {
  word-break: normal;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
  padding-right: 4px;
}
.settings-body::-webkit-scrollbar { width: 6px; }
.settings-body::-webkit-scrollbar-track { background: transparent; }
.settings-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.settings-body::-webkit-scrollbar-thumb:hover { background: var(--muted); }

.cfg-section { padding: 14px 0 6px; border-top: 1px solid var(--border); }
.cfg-section:first-child { border-top: none; padding-top: 0; }
.cfg-heading {
  font-size: 13px; font-weight: 600; color: var(--text);
  margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between;
}
.lbl.wide { width: 90px; flex-shrink: 0; white-space: nowrap; }

/* 设置弹层表单行与开关行规整 */
.settings-body .row {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}
.settings-body .row-sub {
  margin-left: 98px; margin-top: -2px; margin-bottom: 8px;
}
.settings-body .row-switch {
  display: flex; align-items: center; gap: 10px; margin-top: 8px; min-height: 28px;
}
.settings-body .row-switch .hint {
  margin: 0; font-size: 12px; color: var(--muted);
}

/* 配置行列表（模型降级链 / 思考强度共用） */
.proxy-list { display: flex; flex-direction: column; gap: 6px; }

/* ===== 自定义模型弹层（R85/R87/R88 规范优化）=====
   结构：每个 Provider 一个 .cm-provider 区块；
   .cm-provider-row = Provider 自己一行；.cm-model-row = 它下面每个模型各一行。
   两类行都是 white-space:nowrap + 内部横向滚动，**绝不折行**。 */
.cm-list { display: flex; flex-direction: column; gap: 8px; }

/* 按钮右对齐（R87 定稿）：行是 flex，信息区 flex:1 吃掉剩余宽度，按钮组 margin-left:auto 顶到最右。
   两类行容器内宽严格一致，使上一行与下一行按钮的右边缘在同一条垂直竖线上。 */
.cm-provider-row, .cm-model-row {
  display: flex; align-items: center; gap: 6px;
  white-space: nowrap;   /* 每行是一个整体，绝不折行 */
}
.cm-info {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: 8px;
  white-space: nowrap; overflow: hidden;
}
/* 按钮组首项靠右，整组推到最右 */
.cm-btn-edit { margin-left: auto; }

/* 卡片容器：遵循项目原生卡片风格（var(--border), var(--bg), var(--card)） */
.cm-provider {
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg); overflow: hidden;
}
.cm-provider-row {
  padding: 8px 10px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
}
.cm-provider-row .badge { flex-shrink: 0; }
.cm-url {
  flex: 1 1 auto; min-width: 160px;
  font-family: ui-monospace, Consolas, monospace; font-size: 12px; font-weight: 600;
  color: var(--text);
  overflow: hidden; text-overflow: ellipsis;
}
.cm-key {
  flex-shrink: 0; margin: 0;
  font-family: ui-monospace, Consolas, monospace; font-size: 11px;
}
.cm-meta {
  flex-shrink: 0; font-size: 11px; color: var(--muted);
}
.cm-effort {
  color: var(--asset-tx); font-weight: 600; font-family: ui-monospace, Consolas, monospace;
}

/* 按钮微体系：统一步长、圆角与精致悬浮，与项目 .btn.small 完全对齐 */
.cm-provider-row .btn, .cm-model-row .btn {
  flex-shrink: 0;
  font-size: 12px; padding: 4px 8px;
  border-radius: 6px; line-height: 1.4;
}

/* 危险删除按钮：与项目质感统一，平时柔和浅边红字，悬停实心红，消除满屏刺眼色块 */
.cm-provider-row .btn.danger, .cm-model-row .btn.danger {
  background: var(--card);
  border-color: var(--danger-bd2);
  color: var(--danger-tx);
}
.cm-provider-row .btn.danger:hover, .cm-model-row .btn.danger:hover {
  background: var(--danger);
  border-color: var(--danger-tx);
  color: #fff;
}

/* 模型行：从属于 Provider，左侧标准 2px 竖线缩进 */
/* 右侧不留 margin：模型行按钮与 Provider 行按钮严格落在同一条右边缘（10px） */
.cm-models {
  padding: 4px 0 4px 12px;
  background: var(--bg);
  border-left: 2px solid var(--border);
  margin-left: 10px;
}
.cm-model-row {
  padding: 5px 10px; margin: 2px 0;
  border-radius: 6px;
  background: var(--bg);
  transition: background .12s ease;
}
.cm-model-row:hover { background: var(--card); }
.cm-model-row.cm-empty-row {
  background: transparent; color: var(--muted);
}
.cm-model-id {
  flex: 1 1 auto; min-width: 120px;
  font-family: ui-monospace, Consolas, monospace; font-size: 12px; font-weight: 600;
  color: var(--text);
  overflow: hidden; text-overflow: ellipsis;
}

/* 弹层内的「标签 + 输入框」一行（新增/编辑弹窗用） */
.cfg-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.cfg-label { flex-shrink: 0; width: 76px; font-size: 13px; color: var(--muted, #64748b); }

/* 模型导入弹层（R81）：勾选列表。max-height 让长列表自己滚，弹层高度不失控。 */
.import-list { max-height: 320px; overflow-y: auto; border: 1px solid var(--line, #e2e8f0); border-radius: 6px; padding: 4px 6px; background: var(--card, #fff); }
.import-row { display: flex; align-items: center; gap: 8px; padding: 4px 4px; font-size: 12px; cursor: pointer; border-radius: 4px; }
.import-row:hover { background: var(--bg, var(--soft)); }
/* R122：行尾改成 ＋/− 按钮，行不再可点（label 没包 input，点看无效） */
.import-name { flex: 1; min-width: 0; cursor: default; }
.import-row.picked { background: var(--ok-soft); }
.import-row code { font-family: ui-monospace, Consolas, monospace; font-size: 12px; overflow: hidden; text-overflow: ellipsis; }

/* 账号名可点击编辑 */
.acct-name.editable { cursor: pointer; border-bottom: 1px dashed transparent; }
.acct-name.editable:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* 帮助弹层风险警告块 */
.risk-block {
  margin-top: 12px; padding: 10px 14px; border: 1px solid var(--warn-bd);
  background: var(--warn-soft); border-radius: 8px; word-break: normal;
}
.risk-title { font-weight: 700; color: var(--warn-tx); margin-bottom: 6px; font-size: 13px; }
.risk-list { padding-left: 18px; font-size: 12px; color: #7c5b10; }
.risk-list li { margin-bottom: 4px; }

/* toast */
.toast { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%); background: rgba(31,35,41,.92); color: #fff; padding: 10px 18px; border-radius: 8px; font-size: 14px; z-index: 200; box-shadow: 0 4px 16px rgba(0,0,0,.2); max-width: 80vw; }

/* 积分明细浮层：点击积分标签打开，✕ / 点击浮层外 / Esc 关闭（桌面与触屏同一套交互）。
   为什么不再用 hover：① 浮窗开着时后台 loadState() 会重建卡片 DOM，被替换的元素不再派发
   mouseleave ⇒ 浮窗残留关不掉；② 触屏没有 mouseenter/mouseleave，手机上根本关不掉。
   位置固定（水平居中、距顶 12vh）而不贴被点卡片：重渲染/滚动都不会飘走。 */
.credit-tip {
  position: fixed; display: none; z-index: 150;
  left: 50%; top: 12vh; transform: translateX(-50%);
  /* 宽度：明细表有 5 列（套餐/总额/已用/剩余/有效期），其中「时刻」要整串
     `YYYY-MM-DD HH:mm:ss` 不被截。旧值 420px 装不下 ⇒ 表格撑出横向滚动条、
     套餐与有效期双被省略号截（2026-10-24 用户截图，R154）。620px 是 5 列的真实
     内容宽度，再宽就只剩空白。窄屏仍靠 calc 退回视口宽。 */
  width: min(620px, calc(100vw - 24px));
  max-height: 72vh; overflow-y: auto;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,.15); font-size: 12px;
  box-sizing: border-box;
}
.credit-tip .detail-head {
  display: grid; grid-template-columns: 1fr auto 1fr auto; align-items: center;
  gap: 6px; margin-bottom: 6px;
}
.credit-tip .detail-title { font-weight: 600; text-align: left; }
.credit-tip .detail-count { font-weight: 400; color: var(--muted); font-size: 11px; }
/* 关闭按钮：固定最右一列，与顶部翻页器互不干扰 */
.credit-tip .detail-close {
  width: 24px; height: 24px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--card); color: var(--muted); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; line-height: 1; padding: 0;
}
.credit-tip .detail-close:hover { color: var(--danger-tx); border-color: var(--danger-tx); background: var(--danger-bg); }
/* 空明细 / 接口失败时的可见提示：替代「点了完全没反应」的静默失败。
   必须留在浮窗里（贴用户刚点的位置），不依赖会自己消失的 toast。 */
.credit-tip .detail-empty {
  color: var(--muted); line-height: 1.6; padding: 6px 2px 10px;
  word-break: break-word;
}
/* 积分标签变成点击入口：给出可点暗示 */

/* 翻页器在浮窗顶部居中：鼠标从卡片过来路径最短，不跨出浮窗 */
.detail-pager { display: inline-flex; align-items: center; gap: 6px; user-select: none; }
.detail-pg {
  cursor: pointer; padding: 0 8px; border: 1px solid var(--border);
  border-radius: 5px; color: var(--text); line-height: 1.5; font-size: 13px;
}
.detail-pg:hover { background: var(--soft); }
.detail-pg.off { opacity: .35; cursor: default; }
.detail-pg.off:hover { background: transparent; }
.detail-pg-info { color: var(--muted); font-size: 11px; }
.detail-table { width: 100%; border-collapse: collapse; }
.detail-table th, .detail-table td { text-align: left; padding: 3px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.detail-table th { color: var(--muted); font-weight: 500; font-size: 11px; }
/* 列宽不能挂在 :last-child 上：有/无「有效期」列时它指的是不同格子，列宽会跟着漂
   （没到期时间时是「剩余」、有时是「有效期」）⇒ 用专属 class 钉住（R154）。 */
.detail-table td.detail-remain, .detail-table th.detail-remain { font-weight: 600; min-width: 104px; }
/* 有效期列：标准时刻「2026-10-24 23:59:59」约 125px，再加临期红章约 175px。
   原来共用的 max-width:150px 把秒与时区截成 `2026-10-24T23:59:59+...`。 */
.detail-table td.detail-exp-at, .detail-table th.detail-exp-at {
  min-width: 152px; max-width: 210px; font-variant-numeric: tabular-nums;
}
/* 套餐名列放宽：留空间给「GLM-5.3-Flash（tokens）」这类带单位后缀的长名 */
.detail-table td:first-child { max-width: 190px; }
/* 不可用额度整行淡显 + 角标 */
.detail-table tr.detail-unusable { color: var(--muted); }
.detail-tag {
  font-size: 10px; padding: 1px 5px; margin-left: 5px; border-radius: 8px;
  background: var(--soft); color: var(--muted);
}
/* 临期额度（阈值内到期，与汇总条/卡片临期同口径同色系）：整行淡红底 + 到期日红字 + 临期红章 */
.detail-table tr.detail-exp-row { background: var(--danger-bg); }
.detail-table td.detail-exp { color: var(--danger-tx); }
.detail-exp-tag {
  font-size: 10px; padding: 1px 5px; margin-left: 5px; border-radius: 8px;
  background: var(--danger); color: #fff; font-weight: 600;
}
.detail-sum {
  display: flex; gap: 14px; margin-top: 7px; padding-top: 6px;
  border-top: 1px solid var(--border); color: var(--muted);
}
.detail-sum b { color: var(--text); font-weight: 600; }
.detail-sum-unusable b { color: var(--muted); }

/* credit-na 积分「不适用」文案（匿名通道无积分） */
.credit-na { color: var(--muted, var(--text-3)); font-style: italic; }

/* ---------- 用量与流水面板 ---------- */
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.seg-btn { border: 0; background: var(--card); padding: 5px 14px; font-size: 12px; cursor: pointer; color: var(--muted); }
.seg-btn + .seg-btn { border-left: 1px solid var(--border); }
.seg-btn.active { background: var(--primary); color: #fff; }

/* 积分 tab 只有两张卡（消耗/入项）：铺满整屏会让 20px 的数字孤零零挂在半个屏幕上，
   限宽成两列紧凑卡（R184）。 */

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 10px; }
.tab { border: 0; background: transparent; padding: 8px 14px; font-size: 13px; cursor: pointer; color: var(--muted); border-bottom: 2px solid transparent; }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }

.chart-box { width: 100%; height: 260px; margin-bottom: 12px; color: var(--muted); font-size: 12px; }

/* R224：区间合计（请求数/Token/缓存利用率）贴在折线图标题行——原模型表合计行与两张
   渠道占比饼图都已退役，这里是这组数唯一的展示点。标题在左、合计在右，窄屏自动换行。 */
.usage-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.usage-head-title { font-size: 13px; font-weight: 600; color: var(--text-2); }
.usage-head-sum { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
/* 主面板双 Tab（账号管理 / 用量与流水）——R227 起 tab 栏横向可滚：
   手机上 6 个页签放不下时整条左右滑（页签不收缩、不换行）；桌面上放得下，行为不变。
   滚动条隐藏：tab 栏自带的 border-bottom 已经是这条栏的视觉底线，多一条滚动条反而脏。 */
.main-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 14px; overflow-x: auto; scrollbar-width: none; }
.main-tabs::-webkit-scrollbar { display: none; }
.mtab { border: 0; background: transparent; padding: 10px 18px; font-size: 15px; font-weight: 600; cursor: pointer; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; flex: 0 0 auto; white-space: nowrap; }
.mtab.active { color: var(--accent); border-bottom-color: var(--accent); }

/* R206：积分流水一次全量渲染进容器滚动窗口（无页码、无按钮、无分批提示）。 */

/* R206：类型列删掉后 7 列——# / 时间 / 积分 / 平台 / 账号 / 说明 / 余额。
   平台列 96 → 124px（WorkBuddyCN / WorkBuddyAI 这类长徽章要放得下）。
   R223：列表最前面的序号列已删除，不再保留序号专用列宽。
   R219：时间 132→112（实测 91）、积分 96→92（64）、平台 124→120（105）、余额 96→92（62）
   都把富余让给「账号」与「说明」——960px 视口下说明列只剩 160px，15 字的长备注会被截。 */

/* ---------- 统计类面板（R184：积分 / 选号 / 日志三个主 tab 共用 .stats-scope；
   数据来自 /api/stats + /api/stats/logs + /api/logs） ---------- */
.stats-scope { font-size: 13px; line-height: 1.6; color: var(--text); }

/* 区块卡片：白色圆角卡（观感对齐 .panel，边距收窄适配多区块纵排） */
.stats-scope .st-panel,
.stats-scope .st-block {
  margin-top: 10px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
}
/* R201：选号页顶部的「上次更新 … · 本页不自动刷新」角标行；它占了首个子节点的位置，
   紧跟着的聚合区块不能再吃 first-child 的零上边距，否则中间会多出一段空隙。 */
.st-updated-line { display: flex; justify-content: flex-end; align-items: center; min-height: 16px; }
.stats-scope > .st-updated-line + .st-block { margin-top: 0; }

.stats-scope > .st-panel:first-child,
.stats-scope > .st-block:first-child,
.stats-scope > .st-rotation:first-child,
.stats-scope > .st-expiry:first-child,
.stats-scope > .st-abnormal:first-child { margin-top: 0; }
.stats-scope .st-sec-head {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
}
/* 标题里的 ? 角标：span 自身改成 inline-flex + center，让圆圈与中文按**中心**对齐。
   为什么不能只靠 .help-mark 的 vertical-align: middle：那是按 x-height 中线对齐，
   而中文是满格方块（字形盒顶到 baseline 上方一整个 em），两者中心差约 1.5px，
   截图里圆圈明显偏下（2026-10-19 用户指出「那个问号没有居中」）。
   也不用固定像素微调（如 top:-1.5px）：实测偏差随字号变（11px→1.06px、16px→1.73px），
   写死某个值只在 13px 准。flex 居中与字号无关，11~28px 实测偏差 ≤0.45px（亚像素）。
   只作用于标题这一处，其余 .help-mark 都在 align-items:center 的 flex 行里，本来就居中。 */
.stats-scope .st-sec-head > span:first-child {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.stats-scope .st-sec-info {
  /* 更新时间靠右（标题与它之间的内容用 margin-left:auto 推右） */
  margin-left: auto;
  padding-left: 12px;
  font-size: 11px;
  font-weight: 400;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 区块标题右侧的区间选择器/刷新按钮（R184：积分 tab 的积分流水自有区间）。
   .st-sec-head 是 baseline 对齐的 flex，控件按 center 对齐才不会跟文字错行。 */
/* 更新角标贴标题右侧（auto 由 .st-sec-info 吸收，角标本身不吃剩余空间） */
.stats-scope #stUpdated,
.stats-scope #stUpdatedRoute { margin-left: 0; padding-left: 8px; }
/* 拉取失败：数据停止更新的可见警示（陈旧数据无感知是运营面板大忌）。
   积分页与选号页各有一颗角标，stMarkStale() 会同时给两颗打 st-stale。 */
.stats-scope #stUpdated.st-stale,
.stats-scope #stUpdatedRoute.st-stale { color: var(--danger-tx); font-weight: 600; }
/* 标题行保持 flex：其余两个区块（使用中/接棒、最近临期）仍在标题右侧挂 .st-hint
   说明文案，flex 下 margin-left:auto / 8px 才有意义；异常账号的标题现在只有文字
   （汇总徽章已删），flex 对它无副作用。 */
.stats-scope .st-block-title { display: flex; align-items: center; font-size: 13px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; }
/* R229：区块标题文本是 flex 匿名项，CJK 会按字断行（积分/流水、聚合模/型）——
   生成端统一包进 .st-bt/.lt-bt 后锁 nowrap，hint 照常换行。 */
.st-bt, .lt-bt { white-space: nowrap; flex: 0 0 auto; }
.stats-scope .st-hint { font-weight: 400; color: var(--text-3); margin-left: 8px; }

/* 数值列等宽数字（纵向按位对齐，跨行可比） */

/* （旧汇总横条 st-sum 已删：与合计行重复。合计行承接全部信息量：
   当前积分 = 资产紫。） */

/* 平台表由 renderList 输出；这里只保留与 st-panel 的间距，列宽不在 CSS 写死。 */
.stats-scope .st-plat { margin-top: 8px; }

/* —— 平台表配色：与「最近临期」同一套语义色（R132）——
   轴 = 「还需不需要你行动」，不是「金额大小 / 严重程度」。
   · 今日收入 → 绿：唯一正向（钱进来了）
   · 今日消耗 → 灰（--sem-done）：**过去时已成事实**，中性（花掉但换到了东西）
   · 今日作废 → **同灰 + 删除线**：行动需求相同（都无需行动），代价不同
     （纯损失）——用删除线而不是第二档灰：删除线是「没了」的通用视觉隐喻，
     不引入新色阶、不与正文灰抢层级。
   · 今日到期 → 红：**未来时**，今天就会没，现在动手还来得及（与临期行「今天到期=红」同义）
   · 明日到期 → 黄：还有一天缓冲
   · 7 日内到期 → 不上色：太远，不需要警示 */

/* 今日到期 / 明日到期按紧迫度上色（类由 JS 的 platExpHtml 打，见 renderPlatformTable）。
   用独立的 .st-due-today / .st-due-tomorrow 而不是复用 .lt-risk——避免改一处影响另一处。 */

/* Token 多天横条已删（R184）：与「流量」tab 的三张卡片 100% 同源，不再重复展示。 */

/* 运行日志容器（高度随「日志」tab，倒序时最新行在顶） */
.stats-scope .st-logbox {
  margin-top: 8px;
  /* R184：独占「日志」tab 后不必再挤在 88px（4 行）里，按视口给高度 */
  height: 36vh;
  min-height: 180px;
  overflow-y: auto;
  scrollbar-gutter: stable;
  background: var(--row-hover);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 9px;
  font-size: 11px;
  line-height: 1.5;
  user-select: text;
  cursor: text;
}
.stats-scope .st-logline { margin-bottom: 2px; word-break: break-all; }
.stats-scope .st-log-time { color: var(--text-3); margin-right: 6px; }
.stats-scope .st-log-info { color: var(--text); }
.stats-scope .st-log-warn { color: var(--warn-tx); }
.stats-scope .st-log-err { color: var(--danger-tx); }

/* 列表/表格通用 */

/* 请求日志限高：表头 + 若干行，靠滚动看全量 */
/* 请求日志可视窗口：「日志」tab 独占一页后不再只露 4 行，按视口高度给（R184） */
/* R192：请求日志窗口固定 10 行（表头 + 10×28px = 308px），不再用 52vh——
   1080p 下 52vh 能塞 18 行，看起来像「全铺开、没有滑动窗口」。 */

/* 最近临期限高（R139 固定 10 行）：行高 ≈ 12px×1.5 + 5px×2 + 1px = 29px，
   表头（11.5px 字号 + 4px×2 内边距 ≈ 26px）+ 10 × 29 ≈ 316px。 */
/* R191：最近临期只留未来 7 天且不限高（原 max-height:316px 的 10 行窗口退役）。 */

.stats-scope .st-mono { font-size: 11.5px; }

.stats-scope .st-bad { color: var(--danger-tx); font-weight: 600; }

/* 最近临期（块级单元格 + 满高右边框竖线，末列弹性左对齐） */

/* 最近临期配色（R132 统一语义色，与平台表同一套）：
   轴 = 「还需不需要你行动」。
   · 今天到期 = 红（--sem-act-now）：来不及了，现在就得处理
   · 明天到期 = 黄（--sem-act-soon）：还有一天
   · 更远 = 不上色
   R172 起无置灰档（随「已耗」列一起删除）：额度用完的行直接
   从列表退场，不存在「需要置灰提示」的形态。
   此前按 risk（会不会作废）上色，7 天内的行全红——135 小时后到期的也红，
   一片警示等于没有警示。 */

/* 剩余额度列永远灰（R132 沿用）：剩余是静态数字不是告警信号，
   红/黄行不把数字染色，注意力留给时刻与剩余时长。 */

/* 渠道 / 接棒顺序（R173，R174）
   R173：一个 provider 一行展示，不再折为两行。
   R174：去掉「首选」二字，口径模型前置（不写「按」），最多三个账号横向三等分——
   原先四个账号塞在一行，等分格子互相挤压导致长账号被截断。 */
.stats-scope .st-rot-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  /* R220：行高与全站列表对齐到 28px（原来 5px 上下内边距 + 12px 字号凑出 29px） */
  min-height: 28px;
  padding: 0 2px;
  font-size: 12px;
  border-bottom: 1px solid var(--row-line);
  white-space: nowrap;
  overflow-x: auto;
}
.stats-scope .st-rot-badge-col {
  flex: 0 0 88px;
  display: inline-flex;
  align-items: center;
}
/* 口径模型前置：定宽让各渠道的三等分格子在同一铅垂线起排。
   160px = 实测最长口径模型（sn-deepseek-v4-1-flash-1017，156px）再留 4px 余量；
   旧值 176px 多占的宽度全部让给账号格，长邮箱账号少截一截。
   低调灰、小于行文——口径说明不是状态，蓝色归「模型冷却」（R127）不在此复用。 */
.stats-scope .st-rot-model {
  flex: 0 0 160px;
  min-width: 0;
  color: var(--text-3);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stats-scope .st-rot-none { color: var(--text-3); }
/* 最多三个账号横向三等分，每格内左对齐、单行截断不折散 */
.stats-scope .st-rot-nexts {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  color: var(--text-3);
  white-space: nowrap;
}
.stats-scope .st-rot-next {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.stats-scope .st-rot-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.stats-scope .st-rot-name b { color: var(--text); }
/* 首选加粗保留「正在用它」的权重，不再另写「首选」二字 */
.stats-scope .st-rot-next:first-child .st-rot-name { font-weight: 700; color: var(--text); }
.stats-scope .st-rot-bal { flex: 0 0 auto; margin-left: 2px; }

/* 聚合模型接棒：与普通接棒风格对齐，各候选项保持整块不撕裂折行 */
.stats-scope .st-agg-group { display: block; padding: 7px 2px; white-space: normal; }
.stats-scope .st-agg-group:last-child { border-bottom: none; padding-bottom: 2px; }
.stats-scope .st-agg-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 5px; }
.stats-scope .st-agg-model { font-size: 13px; font-weight: 650; color: var(--text); }
.stats-scope .st-agg-hyst { color: var(--text-2); font-size: 11.5px; }
/* 全部候选平铺进一个纵向滚动列表：容器高度恒为 5 行（5×行高 + 4×间距），第 6 名起滚出来（R187）。
   行高固定、行不收缩，才轮到「恰好露出 5 行」而不是随内容高度漂移。 */
.stats-scope .st-agg-list {
  --agg-row-h: 28px;
  --agg-row-gap: 4px;
  display: flex;
  flex-direction: column;
  gap: var(--agg-row-gap);
  max-height: calc(5 * var(--agg-row-h) + 4 * var(--agg-row-gap));
  overflow-y: auto;
  overscroll-behavior: contain;
}
.stats-scope .st-agg-row {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: var(--agg-row-h);
  width: 100%;
  white-space: nowrap;
}
/* 组内候选也保留行分隔线；最后一行不再画，与统一表格一致。 */
.stats-scope .st-agg-row:not(:last-child) { border-bottom: 1px solid var(--row-line); }
/* 聚合候选四等分网格：将 provider、账号和余额、按模型、免费与倍率独立拆为四列左对齐 */
.stats-scope .st-agg-account {
  flex: 1 1 0;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(88px, 1fr) minmax(180px, 2fr) minmax(150px, 1.6fr) minmax(70px, 0.8fr);
  gap: 8px 12px;
  align-items: center;
  font-size: 12px;
  white-space: nowrap;
}
.stats-scope .st-agg-cell {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stats-scope .st-agg-cell-provider { justify-content: flex-start; }
.stats-scope .st-agg-cell-user { justify-content: flex-start; }
.stats-scope .st-agg-cell-model { justify-content: flex-start; }
.stats-scope .st-agg-cell-rate { justify-content: flex-start; }
.stats-scope .st-agg-account .badge { margin-right: 7px; vertical-align: middle; }
.stats-scope .st-agg-name { font-weight: 500; color: var(--text); }
.stats-scope .st-agg-bal { margin-left: 2px; color: var(--text-2); }
/* 聚合候选里的模型标注落在自己的网格列内：不能继承渠道行那 176px 定宽，
   否则列宽 minmax(150px,1.6fr) 会被撑破。 */
.stats-scope .st-agg-account .st-rot-model { flex: 1 1 auto; margin-left: 0; }
.stats-scope .st-agg-free-tag { display: inline-block; padding: 0 5px; border-radius: 4px; font-size: 10.5px; font-weight: 600; line-height: 1.5; color: var(--ok-tx); background: var(--ok-bg); border: 1px solid var(--ok-bd); }
.stats-scope .st-agg-rate {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-2);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.stats-scope .st-agg-rate-none {
  color: var(--text-3);
}

/* 异常账号：内容由 renderList 生成（R220 起与其它列表同构），这里只留四级状态徽章配色。
   标题行不再有「模型冷却 N」汇总徽章（2026-10-22 用户裁定：行数与各级数量在表格里一眼可见，
   汇总只是把同一信息说第二遍），别再加回来。
   R187：异常账号不设可视窗口——有多少行显示多少行（异常多时整块变长，而不是在格子里滚）。 */

.stats-scope .st-ab-tag {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.6;
  border: 1px solid transparent;
}

/* 四级配色：停用=红（需人工）· 整号冷却=橙 · 模型级冷却=蓝（仅该模型不可用，账号仍活）· 错误累计=灰黄（预警） */
.stats-scope .st-ab-disabled .st-ab-tag { color: var(--danger-tx); background: var(--danger-bg); border-color: var(--danger-bd); }

.stats-scope .st-ab-cool .st-ab-tag { color: var(--orange-tx); background: var(--orange-bg); border-color: var(--orange-bd); }

/* 模型级冷却用蓝而不是橙：橙（整号）意味着「这个号现在别指望它」，蓝意味着
   「只有这个档位不行，换其他档位照用」——配色本身就是可行动结论的区分。 */
.stats-scope .st-ab-model .st-ab-tag { color: var(--info-tx); background: var(--primary-soft-2); border-color: var(--primary-bd); }

.stats-scope .st-ab-err .st-ab-tag { color: var(--warn-tx); background: var(--warn-bg); border-color: var(--warn-bd); }

/* 7) 触控目标：图标按钮 28×28、图标链 32×32 都低于 44px 的触控建议值。
   只在「无 hover + 粗指针」设备放大，桌面鼠标设备不受影响。 */
@media (hover: none) and (pointer: coarse) {
  .icon-op { width: 34px; height: 34px; font-size: 15px; }
  .icon-link { width: 38px; height: 38px; }
  .fees-tab { padding: 7px 12px; }
  .credit-tip .detail-close { width: 30px; height: 30px; }
}

/* 缓存利用率单元格（用量与流水 / 运行统计）：三态渲染见 app.js 的 cacheCell。
   有样本 → 等宽数字便于纵向比对；无样本 → 沿用 .muted 的「—」低对比显示。 */
.cache-pct { font-variant-numeric: tabular-nums; }

/* ---------- 设置弹层内的模型查找入口（模型降级链 / 思考强度标题右侧） ----------
   与首页 .panel-head h2 .search-btn 视觉同源（同高 24px、同圆角 6px），但带「查询模型」
   文字，故宽度自适应；点击复用同一 #modelSearchOverlay 弹层（见 app.js 的 openModelSearch）。
   width: auto 必须显式写：本按钮同时带 .icon-btn 类，而该类是 width: 30px 的纯图标尺寸，
   不覆盖则文字标签会挣出 30px 的边框盒（overflow 默认 visible ⇒ 压到相邻内容上）。 */
.cfg-heading > span:first-child { order: 1; }
.cfg-heading > .help-mark { order: 2; margin-left: 6px; }
.cfg-heading > .cfg-search-btn { order: 3; margin-left: auto; }

.cfg-heading .cfg-search-btn {
  width: auto; height: 25px; font-size: 12px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--card); color: var(--text);
  padding: 0 9px; line-height: 1;
  white-space: nowrap; font-family: inherit; font-weight: 500;
  display: inline-flex; align-items: center; gap: 4px;
  cursor: pointer; transition: all .15s ease;
}
.cfg-heading .cfg-search-btn:hover {
  border-color: var(--accent); color: var(--accent); background: var(--primary-soft);
}

/* 规则/映射卡片区块（custom-ch-card 同款，聚合编辑区复用）：
   - .pk-wrap：输入框定位容器（下拉锚点，input 直接子元素）。
   - .pk-menu：下拉面板（渠道徽标 + 完整 ID + 价格两行富信息，字段与「查找模型」弹层同源）。
   - .fb-rule-card：映射卡片区块（custom-ch-card 同款设计语言）。 */

/* combobox 包装容器：position:relative 作下拉锚点 */
.pk-wrap { position: relative; display: flex; min-width: 0; }
.pk-wrap > input { min-width: 0; }

/* 下拉面板：绝对定位贴输入框下沿，全局同时只开一个（pkOpenMenu 管理闭菜单）。
   display:none / .open 才显示——渲染与显隐解耦，避免空菜单占位。 */
.pk-menu {
  display: none; position: absolute; top: calc(100% + 2px); left: 0; right: 0; z-index: 100;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.14);
  max-height: 280px; overflow-y: auto; overflow-x: hidden;
  font-size: 12.5px; padding: 4px;
}
.pk-menu.open { display: block; }
.pk-item { padding: 5px 8px; border-radius: 6px; cursor: pointer; line-height: 1.45; }
.pk-item:hover, .pk-item.pk-hl { background: var(--primary-soft); }
.pk-item .pk-line1 { display: flex; align-items: center; gap: 6px; min-width: 0; }
.pk-item .pk-line1 .id {
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: ui-monospace, Consolas, monospace; font-size: 12px;
}
.pk-item .pk-line1 .rate { flex: none; font-weight: 600; font-size: 12px; color: var(--accent); font-variant-numeric: tabular-nums; }
.pk-item .pk-line2 { color: var(--muted); font-size: 11px; margin-top: 1px; display: flex; gap: 6px; flex-wrap: wrap; }
.pk-menu mark { background: var(--warn-bd); border-radius: 2px; padding: 0 1px; color: inherit; }
.pk-empty { color: var(--muted); font-size: 12px; padding: 10px 8px; text-align: center; }

/* 规则/映射卡片区块（custom-ch-card 同款） */
.fb-rule-card {
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px;
}
.fb-rule-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fb-rule-badge {
  flex: none; font-size: 11px; font-weight: 600; color: var(--accent);
  background: var(--primary-soft-2); border-radius: 999px; padding: 1px 8px; white-space: nowrap;
}
.fb-rule-head .pk-wrap { flex: 1 1 320px; }
.fb-rule-head .pk-wrap > input { width: 100%; box-sizing: border-box; }
/* 空态占位卡片 */
.fb-empty {
  background: var(--bg);
  border: 1px dashed var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
  margin-bottom: 8px;
  line-height: 1.5;
}

/* 聚合模型编辑区（R169 结构化）：名称/滞回输入、成员行下拉 */
.agg-name { width: 100%; box-sizing: border-box; font-family: ui-monospace, Consolas, monospace; font-size: 12px; }
.agg-hyst { width: 84px; flex: none; font-size: 12px; }
.agg-cat-lbl { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); white-space: nowrap; cursor: pointer; }
.agg-member-wrap { flex: 1 1 320px; min-width: 0; }
.agg-member-wrap > input { width: 100%; box-sizing: border-box; font-family: ui-monospace, Consolas, monospace; font-size: 12px; }

/* 就地时间选择器（点「＋」展开；选完确定才写盘，取消/空白不发请求） */
.time-editor { display: inline-flex; align-items: center; gap: 6px; }
.time-editor[hidden] { display: none; }
.time-pick { width: 116px; padding: 5px 8px; font-size: 13px; }

/* ==========================================================================
   R220：全站列表 = 一个渲染器（app.js 的 renderList）+ 一套原子类（.lt-*）

   改动列表前的宪法（四条，违反其一就等于退回 R220 之前的状态）：
   1) 数据表一律原生 <table class="lt">。列宽只有两种：固定 px、以及**唯一一个** flex 列
      （吃剩余宽度并带 min 下界，表达式在 renderList 里算成 table 的 min-width）。
      不再有「每行一个 grid、列宽按行内容自算」的写法——徽章宽一点整列就会漂（R209 的坑）。
   2) 行高只有一档 28px（LT_ROW_H）。紧凑是唯一档位，不再按视口或列表分档。
   3) 可视窗口 10 行（windowRows），由容器 max-height 表达；行少时不留空白。
   4) 合计行永远在窗口外的第二张表里（同一套 colgroup），绝不 sticky 吸在滚动容器内（R210）。
   5) 所有数据列左对齐（R214）；只有行尾操作图标组贴右。
   6) 窄屏不重排列：整表横向滚动（列宽由内容决定），不再逐列表写媒体查询重排。
   7) 列宽按内容实测（R221）：渲染后临时切自动布局量一次 max-content，余量按各列内容宽比例摊回。
   ========================================================================== */
.lt-win { overflow: auto; scrollbar-gutter: stable; }
/* 所有页面内滚动块共用一套 6px 细滚动条：统一表格、合计横滚、聚合候选与运行日志
   不再一边用浏览器默认宽条、一边用局部自定义细条（用户实测截图中宽度不一）。 */
.lt-win,
.lt-sum-win,
.stats-scope .st-agg-list,
.stats-scope .st-logbox,
.stats-scope .st-rot-row { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.lt-win::-webkit-scrollbar,
.lt-sum-win::-webkit-scrollbar,
.stats-scope .st-agg-list::-webkit-scrollbar,
.stats-scope .st-logbox::-webkit-scrollbar,
.stats-scope .st-rot-row::-webkit-scrollbar { width: 6px; height: 6px; }
.lt-win::-webkit-scrollbar-track,
.lt-sum-win::-webkit-scrollbar-track,
.stats-scope .st-agg-list::-webkit-scrollbar-track,
.stats-scope .st-logbox::-webkit-scrollbar-track,
.stats-scope .st-rot-row::-webkit-scrollbar-track { background: transparent; }
.lt-win::-webkit-scrollbar-thumb,
.lt-sum-win::-webkit-scrollbar-thumb,
.stats-scope .st-agg-list::-webkit-scrollbar-thumb,
.stats-scope .st-logbox::-webkit-scrollbar-thumb,
.stats-scope .st-rot-row::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.lt-win::-webkit-scrollbar-thumb:hover,
.lt-sum-win::-webkit-scrollbar-thumb:hover,
.stats-scope .st-agg-list::-webkit-scrollbar-thumb:hover,
.stats-scope .st-logbox::-webkit-scrollbar-thumb:hover,
.stats-scope .st-rot-row::-webkit-scrollbar-thumb:hover { background: var(--muted); }
table.lt { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: 13px; }
/* 测量态（R221）：fitListCols 渲染完临时套上，让浏览器按 max-content 排一遍，量到列宽就摘掉 */
table.lt.lt-auto { table-layout: auto; width: max-content; }
table.lt th,
table.lt td {
  height: 28px; padding: 0 8px; text-align: left; vertical-align: middle;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  border-bottom: 1px solid var(--row-line);
}
table.lt thead th { position: sticky; top: 0; z-index: 1; background: var(--card); color: var(--text-3); font-weight: 500; font-size: 11.5px; }
table.lt tbody tr:last-child td { border-bottom: none; }
table.lt tbody tr:hover td { background: var(--row-hover); }
table.lt tbody tr.hidden { display: none; }
table.lt td.lt-empty { height: auto; padding: 10px 8px; text-align: center; color: var(--text-3); }
table.lt .lt-num { font-variant-numeric: tabular-nums; }
table.lt th.lt-sortable { cursor: pointer; user-select: none; }
table.lt th.lt-sortable:hover { color: var(--text); }
table.lt th.usage-sorted-asc::after { content: " ▲"; font-size: 9px; color: var(--accent); }
table.lt th.usage-sorted-desc::after { content: " ▼"; font-size: 9px; color: var(--accent); }
.lt-title { display: flex; align-items: center; font-size: 13px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; }
.lt-hint { font-weight: 400; color: var(--text-3); margin-left: 8px; }
.lt-sum-win { overflow-x: auto; border-top: 1px solid var(--border); }
table.lt.lt-sum td { font-weight: 600; color: var(--text-2); border-bottom: none; }

/* ---------- 账号列表（六列：平台 / 账号 / 状态 / 签到 / 积分 / 操作） ---------- */
.acct-list .lt-win { border: 1px solid var(--border); border-radius: 8px; }
.acct-row .acct-name { display: block; font-weight: 600; font-size: 13px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-row .acct-cool,
.acct-row .acct-checkin { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; }
.acct-row .acct-cool > .tag,
.acct-row .acct-checkin > .tag { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-row .acct-credits { display: block; font-size: 15px; line-height: 20px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.acct-row .acct-credits span { font-size: 11px; color: var(--muted); font-weight: 400; margin-left: 2px; }
.acct-row .acct-credits .credit-num { font-size: 16px; font-weight: 700; color: var(--text); margin-left: 0; }
.acct-row .acct-credits .credit-unusable { font-size: 13px; font-weight: 600; color: var(--muted); }
.acct-row .acct-credits .credit-expiring { font-size: 13px; font-weight: 600; color: var(--danger-tx); }
.acct-row .acct-credits .credit-stale { font-size: 13px; font-weight: 600; color: var(--warn-tx); }
.acct-row .acct-credits.clickable:hover { text-decoration: underline dotted; text-underline-offset: 3px; }
.acct-row .acct-credits.clickable:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.acct-row .acct-ops { display: flex; gap: 2px; justify-content: flex-end; flex-wrap: nowrap; }
.acct-row .icon-op { width: 22px; height: 22px; font-size: 12px; border-radius: 5px; margin: 0; }
.acct-row.disabled { opacity: 0.5; background: var(--soft); }
/* 冷却色条用 inset 阴影而不是 border-left：border 会把这一行内容整体右移 3px，列表里与上行错位。 */
.acct-row.cooling td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
/* 模型级冷却只有个别模型被跳过、账号本身仍可用 ⇒ 标蓝（橙色会让人以为整号下线，R126）。 */
.acct-row.model-cooling td:first-child { box-shadow: inset 3px 0 0 #3b82f6; }

/* ---------- 今日情况（平台表）：语义色与「最近临期」同一套（R132） ---------- */
.lt td.st-plat-credits { color: var(--text); font-size: 12px; font-weight: 600; }
.lt td.st-plat-in { color: var(--sem-gain); }
.lt td.st-plat-out { color: var(--sem-done); }
.lt td.st-plat-expd { color: var(--sem-done); }
/* 作废靠「形态」表达「没花就没了」：删除线只加在数值 span 上，零值的「—」不划（R134）。 */
.lt .st-expd-val { text-decoration: line-through; }
.lt td.st-plat-exp { color: var(--text-2); }
.lt .st-due-today { color: var(--sem-act-now); font-weight: 600; }
.lt .st-due-tomorrow { color: var(--sem-act-soon); font-weight: 600; }
.lt .st-plat-zero { color: var(--ghost); font-weight: 400; }
.lt tr.st-plat-sum-row td.st-plat-credits { color: var(--asset-tx); }

/* ---------- 最近临期：今天红 / 明天黄 / 更远不上色（2026-10-19 口径） ---------- */
.lt tr.lt-risk > td { color: var(--sem-act-now); font-weight: 600; }
.lt tr.lt-warn > td { color: var(--sem-act-soon); font-weight: 600; }
/* 剩余额度列永远灰（R132）：剩余是静态数字不是告警信号，红/黄行不把数字染色，注意力留给时刻与时长。 */
.lt td.st-ex-amt { color: var(--sem-done); }

/* ---------- 积分流水：入项绿 / 消耗橙 / 过期红（类型列删掉后靠颜色分辨，R206） ---------- */
.lt td.st-fl-amt { color: var(--text-2); }
.lt tr.fl-earn td.st-fl-amt { color: var(--ok-tx); font-weight: 600; }
.lt tr.fl-spend td.st-fl-amt { color: var(--warn-tx); font-weight: 600; }
.lt tr.fl-expire td.st-fl-amt { color: var(--danger-tx); font-weight: 600; }
.lt td.st-fl-bal { color: var(--sem-done); }
.lt td.st-fl-note { color: var(--text-3); }

/* ===== 响应式（R220 只保留列表以外的部分） =====
   数据表本身靠 .lt-win 横向滚动，不再逐区块重排列宽；这里只剩顶栏/按钮区
   与「聚合」「接棒」这两块非表格街区。 */
@media (max-width: 779px) {
  .topbar { flex-wrap: wrap; row-gap: 8px; }
  .brand { order: 1; }
  .top-icons { order: 2; margin-left: auto; }
  .top-info { order: 3; flex: none; width: 100%; }
  .panel-actions-wrap { flex-direction: column; align-items: stretch; gap: 8px; }
  .pa-spacer { display: none; }
  .pa-left { flex-direction: row; flex-wrap: wrap; }
  .pa-right { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); width: 100%; }
  .pa-right .btn { justify-self: stretch; padding: 8px 10px; }
}

/* ≤479px：两列时 1fr 的 min-content 下界仍会撑破（接口地址/API-Key 文本不收缩），
   minmax(0,1fr) 解除后单元格可收缩、长文本走 ellipsis。 */
@media (max-width: 479px) {
  .top-info { grid-template-columns: minmax(0, 1fr); }
}

/* 接棒行：760px 视口下三个账号槽各 132px，而「①192（126分·临期100分）」要 134px，
   缩到 11px 字号（≈123px）就不会再被省略号切掉余额。 */
@media (max-width: 899px) {
  .stats-scope .st-rot-row { font-size: 11px; }
}

/* 接棒三个账号槽定宽，装不下时由 .st-rot-row 横向滚动，不切余额。 */
@media (max-width: 719px) {
  .stats-scope .st-rot-nexts { flex: 0 0 auto; grid-template-columns: repeat(3, 124px); }
}

/* 聚合候选/接棒在 640 视口：降字号 + 横向滚动，不把账号名压成省略号。 */
@media (max-width: 640px) {
  .stats-scope .st-rot-nexts { grid-template-columns: repeat(3, 136px); }
  .stats-scope .st-agg-row { font-size: 11px; min-width: 560px; }
  .stats-scope .st-agg-list { overflow-x: auto; }
}

/* ===== R227 手机端适配（≤600px）=====
   列表仍按 R220 宪法第 6 条整表横向滚动，不在这里重排列；这里只收拾表格之外的壳：
   外层留白收紧（给表格多让一点可视宽度）、弹层贴顶可滚、主 tab 栏吸顶——
   手机上页面很长（账号/费率列表全量渲染），随时能切页签比滚回顶部更重要。 */
@media (max-width: 600px) {
  #app { padding: 12px 10px 40px; }
  .panel { padding: 12px; }
  .topbar { padding: 12px 14px; }
  .modal { padding: 16px; }
  .mtab { padding: 10px 12px; font-size: 14px; }
  .main-tabs { position: sticky; top: 0; z-index: 20; background: var(--card); margin-bottom: 10px; }
}

/* ===== R227 触屏补强（hover:none + 粗指针）=====
   放在文件末尾：要压过同特异度但写得更靠后的桌面规则（.acct-row .icon-op 的行内紧凑 22px）。
   · 账号行操作图标触屏提到 26px（行高 28px，仍在行内；桌面 22px 不变）；
   · 输入类控件字号提到 16px：iOS Safari 聚焦 <16px 的输入框会强制整页放大且松手不复位；
   · 分段按钮/弹层小按钮/汇总 chip/模型查找行加高，触控目标提到 ≥32px。 */
@media (hover: none) and (pointer: coarse) {
  .acct-row .icon-op { width: 26px; height: 26px; font-size: 13px; }
  .input, .select { font-size: 16px; }
  .seg-btn { padding: 7px 14px; }
  .btn.small { padding: 7px 12px; }
  .cs-chip.clickable { padding: 5px 12px 5px 6px; }
  .ms-row { padding: 9px 8px; }
}

/* R227 补充（手机端说明气泡）：绝对定位的隐藏气泡仍占布局、会把页面撑出横向滚动
   （实测积分 tab 423/412）——fixed 元素不参与文档滚动；贴底全宽在手机上也更好读。
   桌面（>600px）维持原「贴着问号下方展开」不动。 */
@media (max-width: 600px) {
  .help-pop {
    position: fixed; left: 12px; right: 12px; top: auto; bottom: 12px;
    width: auto; max-width: none; transform: none;
  }
  .help-pop::before { display: none; }
  /* 自定义模型弹层：窄屏放开「绝不折行」，让信息占满整行、按钮落到第二行——
     否则 URL 被三颗按钮挤成十来个字符、模型行元数据全被省略号吞掉。 */
  .cm-provider-row, .cm-model-row { flex-wrap: wrap; white-space: normal; }
  .cm-provider-row .cm-info, .cm-model-row .cm-info { flex-wrap: wrap; white-space: normal; }
  .cm-url, .cm-model-id { min-width: 140px; }
}