/* Agent2API · 账号页「四家混排的一张表」（表格化改造新增的那一层）

   与 page-accounts.css / page-accounts-providers.css 的分工：
   行内明细面板 .row-panel、⋯ 菜单 .more-menu、.seg / .toolbar / .batch-bar
   仍复用原账号页样式；本文件只装表格独有的规则，排在两份共享样式之后引入。

   ── 列宽的分配原则（这些数字是逆推出来的，不是随手取的）──────
   固定宽的列全部写死像素，「账号」列吃掉剩余宽度。理由：表格的价值在于纵向对齐，
   让浏览器按内容自动分配会把同一列在不同行里挤出不同的宽（某一行的账号名一长，
   状态列就被推走）；而账号列是唯一内容长度不可控的（昵称 / uid / 邮箱），
   只有它该参与伸缩。

   预算：十个固定列合计 1115px
   （47 + 132 + 132 + 156 + 56 + 80 + 148 + 80 + 84 + 200，逐列见下方声明）。
   默认窗口 1060px 时列表可用宽度约 791px，也就是说**默认窗口下这张表横向滚动**，
   账号列拿到的是它的最小值而不是「剩余宽度」。这是有意的：
   表格**不压缩列宽**（见下），宁可横滚也不把行内按钮折成两行、
   把优先级控件挤到点不准。拉宽窗口或拖窄某几列之后，账号列才开始吃剩余空间。

   **本次新增了代理列（156px）**，min-width 同步从 900 提到 1056（= 900 + 156）：
   这个值是「表格不能再窄」的底线，而它必须随列数走 —— 不动它的话，多出来的一列
   会按比例从**所有**列（含操作列那四颗按钮）身上扣，正是上面那条「宁可横滚」要
   避免的事。想收回这 156px 的用户可以在列设置里把代理列关掉或拖窄
   （列的显隐与顺序都是用户可调的，见 table-col-settings.js）。

   **勾选列 26 → 47**（本轮）：26px 的列里居中的复选框只离表格左缘 5.5px，
   看起来是「贴边」而不是居中，还与批量栏那颗「全选」错开 10.5px。
   47 = 16 + 15 + 16 让它与批量栏全选落在同一条竖轴上，算式与理由见下方 .cell-pick。
   固定列合计随之 1094 → 1115，min-width 1056 → 1077（同一套「随列宽走」的口径）。

   固定列里最贵的是操作列 200px：那是「已签到 / 余额 / 设置 / ⋯」
   四颗按钮并排的最坏情况（按 11.5px 字号逐颗算出来的，算式见那条声明）。
   它排在最后一列、右侧没有别的列要抢位，宽度可以放心给 —— 省下来的都归账号列。
   **本次改造把它从 250 收到 200**：「设为首选」从行上搬进了 ⋯ 菜单
   （见 accounts-table.js 的 actionsCell 与 accounts-model.js 的 moreMenuHtml），
   行上的按钮从五颗变四颗，那 50px 就不必再占着 —— 表格的最小宽度随之少 50px。
   这个值同样要按最坏情况留足：同一家的账号**同时**满足「有余额概念 +
   今天已签到」是常态，而「已签到」是四颗里最宽的一颗（三个字），
   收窄到把它切掉，用户就看不到「今天没得签了」这条信息了。

   次贵的是优先级列 132px：序号 22 + 间距 3 + 合并控件 84 = 109，
   余量留给「改成五位数」这类极端值。这是把「改成具体数值」与「挪一位」
   两种操作都留在行上的代价。

   三处「宁可竖着放也不要横着挤」的取舍：
     · 状态列：开关一行、健康徽章一行。并排放不下（开关 36 + 徽章 ≥45 >
       内容盒 60），而两行的高度与相邻的账号列（名字 + 明细行）相当，
       整行不会有一列明显空着。
     · 提供商列：展示名与版本徽章同样竖排 —— 「WorkBuddy」（66px）
       后面再跟一枚「国内版」必然超宽，而这一列是整张表里唯一区分
       「换了一家」的线索，被省略号砍成「Work…」就失去意义了。
     · 余额列：只剩一行摘要（查询按钮已挪走），但摘要「可用 4300 积分」
       这类文案长度不可控，84px 下仍按省略号收口、完整值在 title 里 ——
       这一列现在没有任何可点控件，它的全部职责就是「一眼看出还剩多少」。

   最小窗口 820px 时（侧栏已收到 68px）可用宽度约 699px，按下面 1077px 的
   最小宽度横向滚动约 378px。

   注意：这份「预算说明」在历史上曾与 CSS 的实际数值漂移过（注释里写 92/106，
   CSS 里是 132/132）。改动任何一列的默认宽度时**同时**改三处：
   这里的说明、下面的 .cell-* 声明、以及 accounts-columns.js 的 DEFAULTS ——
   三处不一致时用户拖动一次列宽就会把差异暴露成「表格跳一下」。 */

.acct-table {
  width: 100%;
  /* 「不能再窄」的底线：跟着固定列宽一起走（新增代理列 +156 时从 900 提到
     1056，本轮勾选列 +21 再提到 1077，见文件头的列宽预算）。
     低于它时表格横向滚动，而不是压缩各列 */
  min-width: 1077px;
  border-collapse: separate;
  /* 列间距归零：border-collapse: separate 是给行首竖条留出绘制空间的
     （border-collapse: collapse 下单元格的定位上下文会被合并掉） */
  border-spacing: 0;
  font-size: 12.5px;
  table-layout: fixed;
  box-sizing: border-box;
}

/* 表头：粘在滚动容器顶部。
   列表可能很长（十几家账号），滚下去以后「哪一列是什么」会看不见 ——
   账号表不像日志表有工具栏分组可以当参照，列头必须一直可读。
   底色取 --table-head-bg（比承载面亮一档的浅带），与表体同一块表面上的轻微分层，
   不再自成一条更暗的横带。 */
.acct-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 7px 8px;
  border-bottom: 1px solid var(--border);
  background: var(--table-head-bg);
  color: var(--text-3);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .05em;
  text-align: left;
  white-space: nowrap;
}

/* 表头文字：主标签 + 小注（优先级「全局队列」/ 限流「按模型」）。
   小注用同色弱化：它只解释口径，不该抢列名的注意力。 */
.acct-table thead th .th-label { display: inline-flex; align-items: center; gap: 4px; }
.acct-table thead th .th-hint { font-weight: 400; letter-spacing: 0; opacity: .7; }

/* 表头的「隐藏账号名」眼睛（只在账号列出现）：一颗纯图标小按钮，贴在列名后面。
   默认继承表头小字的灰色、不抢注意力；隐藏生效时常亮主色（.on）——
   「整列此刻是打码状态」不用悬停就能看出来。 */
.acct-table thead th .name-eye {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: none;
  color: inherit;
  cursor: pointer;
}
.acct-table thead th .name-eye:hover { background: var(--surface-3); color: var(--text-2); }
.acct-table thead th .name-eye.on,
.acct-table thead th .name-eye.on:hover { color: var(--primary); }

/* ─── 列宽拖动把手 ───
   把手本身的样式（.col-grip / body.col-resizing）已挪到 components.css ——
   模型管理、网关 Key、请求日志三张表共用同一枚把手，放在页面级文件里
   会让另外三张表依赖账号页的样式文件。这里只留定位的前提条件：
   th 是 position: sticky（本身就是定位元素），把手直接绝对定位在它内側右缘。 */

/* 单元格：上下内边距压到 7px，让一行落在一个接近 40px 的高度上 ——
   这是「能舒服点到里面的按钮」与「一屏多放几行」之间的折中
   （卡片时代单卡约 96px，同屏显然放不下几个账号）。
   左右只给 8px（卡片时代的 12px 是按卡片内边距定的）：八列一共省下 64px，
   这些宽度全部让给了账号列。 */
.acct-table td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--hairline);
  vertical-align: middle;
}

/* 列宽（与 accounts-table.js 的 COLUMNS 键一一对应）。
   勾选列 47px：左右各留 16px，让居中的 15px 复选框落在离表格左缘 16px 处 ——
   与批量栏「全选当前筛选结果」那颗同一竖轴（.batch-bar 的 padding: 10px 16px
   把它的复选框定在 16px；表格与批量栏同以卡片内容盒左缘为起点）。
   47 = 16 + 15 + 16 就是这条对齐关系的算式，改其中任一项都要重算。
   曾经是 26px（想让选择框离账号名近一点），但 26px 里居中的复选框只离左缘
   5.5px，读起来是「贴着左边」而不是居中，还与上方那颗全选错开 10.5px。 */
.cell-pick { width: 47px; }
.acct-table th.cell-pick,
.acct-table td.cell-pick { padding-inline: 0; text-align: center; }
.cell-priority { width: 132px; }
.cell-provider { width: 132px; }
/* 代理列（本次新增）：要放得下「http://127.0.0.1:7890」（约 137px）这类
   自定义代理的展示名 —— 它比 Clash 那两种（「Clash 混合端口 7890」约 98px、
   「节点名（:7890）」约 102px）都长，而三者的信息价值一样（都要能一眼读全）。
   156px 的内容盒是 140px，刚好容得下上面那串最常见的形态；
   更长的节点名由省略号收口、完整值进 title（与账号列同一手法）。 */
.cell-proxy { width: 156px; }
/* 表头与单元格一起居中：整格是一颗按钮，居中之后与相邻的读数列（有效期 / 余额）
   在同一条中轴上，扫读时不会忽左忽右 */
.acct-table th.cell-proxy,
.acct-table td.cell-proxy { text-align: center; }
.cell-connections { width: 56px; }
/* 表头与单元格一起居中：数字居中而标题左对齐时，视线要从标题左端跳到格子中央 */
.acct-table th.cell-connections,
.acct-table td.cell-connections { text-align: center; }
.cell-status { width: 80px; }
.cell-limits { width: 148px; }
.cell-expiry { width: 80px; }
/* 余额列只剩一行摘要（查询按钮已挪到操作列，见 accounts-table.js 的 usageCell） */
.cell-usage { width: 84px; }
/* 操作列：四颗按钮的最坏情况（签到 / 已签到 / 余额 / 设置 / ⋯ 里同时出现的那四颗），
   本次改造从 250 收到 200 —— 理由见文件头的列宽预算。
   这个值是**量出来的**，不是估的：按 11.5px 字号、每颗按钮左右各 8px 内边距、
   按钮间距 4px、单元格左右各 8px 内边距算，
   「已签到(46+16) + 余额(23+16) + 设置(23+16) + ⋯(12+16)
   + 3×4 间距 + 16 单元格内边距 ≈ 200」。改按钮文案或增删按钮时**重算一遍**
   （改小会让「已签到」被省略号切掉，改大则白占账号列的宽度）。 */
.cell-actions { width: 200px; }
/* .cell-account 不写宽度：table-layout: fixed 下它会自动吃掉剩下的全部。
   用户拖过的列由 accounts-columns.js 生成的 colgroup inline style 覆盖这里的默认值。 */

/* ─── 行状态 ─── */

.acct-row .cell-account,
.acct-row .cell-priority,
.acct-row .cell-proxy,
.acct-row .cell-usage,
.acct-row .cell-actions { min-width: 0; }

.acct-row:hover { background: var(--row-hover); }

/* 勾选中的行：与批量栏的 .active 同一套主色柔底，视觉上呼应 */
.acct-row.selected,
.acct-row.selected:hover { background: var(--primary-soft); }

/* 已禁用：整行压灰。不做成整行半透明 —— 那一行里的开关与菜单还要能点、要能看清 */
.acct-row.disabled .acct-name .name { color: var(--text-3); }
.acct-row.disabled .acct-sub { opacity: .75; }

/* 组首行（换了一家）：上边框重一档，把「这一段的提供商变了」显出来。
   不打组头行 —— 那会把一张表重新切回四块（见 accounts-view.js 的说明）。 */
.acct-row.pgroup-start > td { border-top: 1px solid var(--border); }

/* ─── 勾选列 ─── */

.acct-table input[type="checkbox"] {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--primary);
  cursor: pointer;
}

/* ─── 提供商标签 ───
   四家各一色，未登记的家落中性兜底（GENERIC）。为什么不给四家都用中性款：
   这是整张表里唯一区分「换了一家」的视觉线索（组头行已随卡片网格下线），
   全部同色时连续十行「小浣熊」与「WorkBuddy」读起来是一条。
   色板刻意都取「浅底 + 深字」的同一强度 —— 不能一家浓一家淡，
   那会读成「这家有告警」。 */
.pbadge {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 1px 8px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface-3);
  color: var(--text-2);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pbadge.p-workbuddy { background: var(--primary-soft); border-color: var(--primary-bd); color: var(--primary-fg); }
.pbadge.p-raccoon { background: var(--cn-soft); border-color: var(--cn-bd); color: var(--cn); }
.pbadge.p-catpaw { background: var(--warn-soft); border-color: var(--warn-bd); color: var(--warn); }
.pbadge.p-autoclaw { background: var(--intl-soft); border-color: var(--intl-bd); color: var(--intl); }

/* 提供商列：一枚徽章（「WorkBuddy 国际版」这类名字 + 版本拼在一枚里）。
   .pv 仍保留 flex-wrap：自定义提供商的名字长度不可控，列宽放不下时整块折行，
   徽章内文字不会被截断（徽章自身另有 ellipsis 兜底，单枚比整列还宽才触发）。 */
.cell-provider .pv { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 4px; }

/* ─── 账号列 ─── */

.acct-name {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

/* 名称：单行省略。min-width: 0 是必须的 —— flex 项默认 min-width: auto
   会以「内容最小宽度」为底线，长邮箱会把它撑破、把后面的一切挤出去 */
.acct-name .name {
  flex: 0 1 auto;
  min-width: 0;
  font-weight: 650;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.acct-sub {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 1px;
  min-width: 0;
  color: var(--text-3);
  font-size: 11px;
  line-height: 1.45;
  overflow: hidden;
  white-space: nowrap;
}

.acct-sub > span { flex: 0 0 auto; }

/* ─── 代理列（本次新增）───
   整格是一颗按钮（点击打开账号设置里的代理表单，见 accounts-table.js 的 proxyCell）。
   做成「chip」而不是实心按钮：这一列绝大多数时候是**读数**（走哪个出口），
   只有想改的时候才点 —— 做成实心按钮会让整列看起来全是主操作，
   与相邻的读数列（有效期 / 余额 / 连接数）格格不入。
   边框默认透明、悬停才显形：静态时它读起来就是一段文本，指上去才提示「这里能点」。 */
.proxy-cell {
  display: inline-block;
  vertical-align: middle;
  max-width: 100%;
  padding: 1px 6px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: none;
  font: inherit;
  font-size: 11.5px;
  color: var(--text-2);
  cursor: pointer;
  /* 省略号三件套：display 必须是 inline-block（button 的默认值就是，显式写出来
     是因为文本溢出只在块级 / inline-block 的盒上生效，将来有人改成 flex 布局
     会让省略号静默失效） */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 悬停用 surface-3 而不是 --row-hover：整行悬停时行底色就是 --row-hover
   （= surface-2），chip 再用同一个值等于没有任何反馈 */
.proxy-cell:hover { border-color: var(--border); background: var(--surface-3); }
/* 直连：中性色（它不是异常，只是没有配置） */
.proxy-cell.none { color: var(--text-3); }
/* 已配置：info 色 —— 与账号列原先那句「代理 xxx」同色，换列不换语义 */
.proxy-cell.on { color: var(--info); }
/* 解析失败：红字。转发会回退直连，属于要留意但不阻断的情况（账号列的
   异常说明里还有一份带原因的，两处都指向同一个修复入口） */
.proxy-cell.bad { color: var(--danger); }

/* 健康说明（限流恢复时间 / 代理不可用）：只在异常时出现，正常行不留空行 */
.acct-note {
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.acct-note.warn { color: var(--warn); }
.acct-note.bad { color: var(--danger); }

/* ─── 优先级列（全局队列：序号 + 「↓ 数字 ↑」合并控件）─── */

.prio { display: flex; align-items: center; gap: 3px; }

/* 全局序号：#N 是队列位置（与后端选路同构），控件里的数字是队列值。
   两个都要 —— 序号便于扫读「我的账号在第几位」，数值便于精确定位与跨行对齐。 */
.prio .seat {
  flex: 0 0 auto;
  min-width: 22px;
  color: var(--text-3);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* ── 合并控件：下箭头 / 数字 / 上箭头共享一个外框 ──
   改造前是三块独立控件（数字框 + 一组 order-btns，中间留 3px 缝），
   看上去像「一个输入框 + 两个无关按钮」；而它们其实是同一个动作的
   两种输入方式（增量 / 绝对值），所以合成一个整体。

   宽度预算：两枚箭头各 20 + 输入框 42 = 82，加上外框描边 2 = 84，
   再加上序号 22 与间距 3 ≈ 109，落在 132px 的列里（内容盒 116）还有余量。
   输入框从 44 收到 42：合并后两侧的箭头各让出 1px 给描边，
   而 0–9999 四位数字在 11.5px 等宽字体下约 31px，42 仍有充足余量。

   ── 圆角与描边怎么分 ──
   外框统一给圆角与描边（.prio-stepper 自己带 border + overflow: hidden），
   内部三块各自**不带**边框与圆角，只用一条内部分隔线断开（相邻处 border-left）。
   这样做的理由与 .seg / .seg-item 那一对完全相同（见 components.css）：
   若让每一块各自带圆角与描边，三个圆角会在接缝处叠成一道毛边，而且
   边框会变成 2 条相邻的线（1+1px），比一条分隔线显粗。
   overflow: hidden 是必需的：输入框在聚焦态不换边框（见下），
   但内部元素的方角要靠它被外框裁掉。 */
.prio-stepper {
  display: inline-flex;
  align-items: stretch;
  flex: 0 0 auto;
  height: 24px;
  overflow: hidden;
  border: 1px solid var(--control-border);
  border-radius: var(--r-sm);
  background: var(--control-bg);
  transition: border-color .15s ease;
}

/* 整组悬停 / 聚焦：边框高亮提到外框上（而不是各块自己变），
   于是「这是一个控件」的观感在交互态也成立 */
.prio-stepper:hover { border-color: var(--control-border-hover); }
.prio-stepper:focus-within { border-color: var(--primary); }

/* 两枚箭头：无边框、贴满可用高度，颜色比正文淡一档（次要动作）。
   它们是 `button` 的默认样式被清掉后的形态，尺寸靠 flex 撑满。

   ── 为什么必须显式写 height（本次修复）──────────────────────
   改造前这里只声明了 `width: 20px`、**没写 height**，于是全局
   `button { height: 30px }`（components.css）直接生效 —— 它与特异性无关，
   纯粹是这里没人声明过高度。
   后果：按钮实际高 30px，而外框 `.prio-stepper` 只有 24px，
   `overflow: hidden` 把它裁到 24px。按钮自己的垂直中心落在 15px（30/2），
   而外框中心是 12px（24/2）—— 箭头整体**向下偏 3px**、底部还被裁掉一截。
   补上 `height: 100%` 之后，两枚箭头与中间的输入框（也写着 height:100%）
   共用同一套高度基准，三者对齐。

   `flex: 0 0 auto` 同理：箭头是固定 20px 的两枚按钮，不该参与伸缩
   （与输入框那条一致）。

   选择器带 `.prio-stepper` 前缀是让这几条覆盖不依赖「本文件排在
   components.css 之后」这个隐含前提 —— 与下面 `.prio-input` 同一手法。 */
.prio-stepper .prio-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--text-2);
  font-size: 10.5px;
  line-height: 1;
  flex: 0 0 auto;
}

.prio-arrow:hover:not(:disabled) { background: var(--nav-hover); color: var(--text); }
.prio-arrow:disabled { opacity: .3; cursor: not-allowed; }

/* 箭头图标本体（icons.js 的 arrowDown / arrowUp，内联 SVG）。
   `display: block` 是必需的：SVG 默认是行内元素，会落在**基线上**、
   下方留出 descender 的空隙（约 2–3px），于是图标看着偏上、按钮的
   点击热区也跟着歪。改成块级之后它就是一个纯几何盒子，
   由 .prio-arrow 的 flex 居中精确对位。
   这一步与「不用字符箭头」是同一个目的的两半：先把会飘的字形换掉，
   再把新元素放平 —— 少任何一半都还会偏。 */
.prio-arrow svg { display: block; }

/* 输入框：占中间一格，自己不带描边与圆角（那些归外框）。
   高度用 100% 而不是 24px —— 外框有 1px 描边，写死 24 会顶出去。
   两条分隔线：输入框自带左边一条（断在「下箭头 | 数字」之间），
   右边那条由 `+` 相邻选择器给上箭头（见下）—— 输入框自身不加右边框，
   它聚焦时不换任何边框，两条线不会跟着交互态变，视觉上更稳。

   ── 选择器为什么要写成 `.prio-stepper .prio-input`（不是 `.prio-input`）──
   components.css 的全局表单规则是 `input[type="number"]`（特异性 0,1,1），
   比单个类（0,1,0）**高**，所以下面这些声明必须靠**再加一个类**压过去，
   否则全局那条会赢、数字周围会多出一个圆角描边框，与外框叠成两层：
     · `border-radius: var(--r-md)` —— 数字被裹成一个胶囊（本次修的就是它）；
     · `border: 1px solid` —— 多出一圈框；
     · `height: 30px` —— 比外框的 24px 还高，撑破合并控件；
     · `padding: 0 10px` —— 数字被挤偏；
     · `flex: 1 1 auto` —— 输入框会吃掉箭头的位置。
   与 page-settings.css 的 `.retention-input input[type="number"]` 同一手法
   （那里也是嵌在自定义外壳里的数字框，注释写着同样的理由）。 */
.prio-stepper .prio-input {
  width: 42px;
  height: 100%;
  padding: 0 4px;
  border: 0;
  border-left: 1px solid var(--control-border);
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  text-align: center;
  /* 数字框的上下箭头在 24px 高里会把数字挤成半截，去掉；
     改值用键盘或两侧的箭头按钮（后者是本控件的主要改值方式） */
  appearance: textfield;
  -moz-appearance: textfield;
  /* flex 归零：箭头是固定 20px 的两枚按钮，输入框不许参与伸缩
     （全局 `input[type=number]{flex:1 1 auto}` 会把它们挤没） */
  flex: 0 0 auto;
}

.prio-stepper .prio-input::-webkit-outer-spin-button,
.prio-stepper .prio-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* 聚焦时整组高亮（见 .prio-stepper:focus-within），输入框自身不加描边与光晕。
   box-shadow 也要清：全局 `input:focus` 会画一圈 --ring，
   在 24px 高的合并控件里会糊成一团。 */
.prio-stepper .prio-input:focus { outline: none; box-shadow: none; }

/* 悬停同理：全局 `input:hover` 会把边框改成高亮色，而这里的边框是 0，
   改的是「看不见的边框」—— 它会让输入框那一格与外框的描边色不一致，
   所以显式压掉，让整组的悬停高亮只由 .prio-stepper:hover 一处负责。 */
.prio-stepper .prio-input:hover:not(:disabled) { border-color: transparent; }

.prio-stepper .prio-input:disabled { opacity: .5; }

/* 上箭头的左侧分隔线（把「数字 | 上箭头」断开，与输入框那条呼应） */
.prio-input + .prio-arrow { border-left: 1px solid var(--control-border); }

/* ─── 连接数列 ───
   只在有连接时显示一个绿色数字（与 OmniProxy 上游管理页的「连接」列同款观感），
   为 0 时整格留空 —— 见 accounts-table.js 的 connectionsHtml。
   对齐在列宽那一节统一声明（表头与单元格一起居中）：数字居中而标题左对齐时，
   视线要从标题左端跳到格子中央。
   不给边框与底色：整张表里已经有开关、徽章、按钮三种带框元素，再加一种
   会让账号页显得更碎；而这一列的用途恰恰是「扫一眼看见谁在动」。 */
.cell-connections .conn-count {
  color: var(--ok);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ─── 状态列 ───
   本级默认只有一枚开关（启用 / 禁用由轨道位置与滑块表达）；
   需要留意时（代理异常 / 不可用 / 仅账号管理）在下面补一行健康徽章。
   两行竖排而不是并排：开关轨道 36px + 徽章约 40px 相加 76px，
   正好吃掉整列（内容盒只有 60px）。
   开关沿用 components.css 的既有形制（36×21 轨道 + 近白滑块），不改尺寸。 */
.cell-status .status-tags { margin-top: 3px; display: flex; flex-wrap: wrap; gap: 3px; }
.cell-status .badge {
  font-size: 10.5px;
  padding-inline: 6px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 已禁用行的徽章退成中性档（保留徽章形制，只把语义色换灰） */
.acct-row.disabled .cell-status .badge {
  background: var(--surface-3);
  border-color: var(--border);
  color: var(--text-3);
  font-weight: 500;
}

/* ─── 限流列 ───
   限额按「账号 × 模型」记（四家通用）。「正常」是绿点静态文本；
   有限流时是一枚可点的黄色徽章（点开行下的明细面板），下面一行小字给
   「最早恢复」。竖排的理由与余额列相同：徽章与恢复文案横排必然超出列宽。 */
.cell-limits { white-space: nowrap; }

.lim {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 8px;
  border: 1px solid var(--warn-bd);
  border-radius: var(--r-sm);
  background: var(--warn-soft);
  color: var(--warn);
  font-size: 11.5px;
  font-weight: 600;
}

.lim:hover:not(:disabled) { border-color: var(--warn); background: var(--warn-soft); color: var(--warn); }
.lim.open { border-color: var(--warn); box-shadow: 0 0 0 2px var(--warn-soft); }
.lim .caret { font-size: 9px; opacity: .7; }

.lim-sub {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  color: var(--warn);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lim-none { display: inline-flex; align-items: center; gap: 5px; color: var(--ok); font-size: 11.5px; }
.lim-none i { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }

/* ─── 有效期列 ─── */
.cell-expiry { color: var(--text-2); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.cell-expiry .muted { color: var(--text-3); }

/* ─── 余额列 ───
   只放**摘要读数**（不可点）—— 查询按钮已移到操作列（本次改造），
   所以这里不再有「这一列唯一可点的控件」那层结构。
   摘要独占整列宽度，因此不必横排（见文件头的列宽预算：横排放不下
   「可用 4300 积分」这类长度不可控的文案）。

   注意：这一格**不能**写成 display: flex。给 <td> 改 display 会让它不再是
   table-cell，浏览器只能把它包进匿名单元格里 —— table-layout: fixed 的列宽
   与 vertical-align 都会跟着失效（不同内核表现还不完全一致）。
   摘要靠自己的 display: block 占满这一格。 */
.cell-usage { white-space: nowrap; }

/* 查询余额按钮（现在住在操作列里）：尺寸与悬停强调全部由下面的
   `.acct-actions button` 一组规则统一给出（那一列里的按钮本来就是同一档），
   所以这里只留它独有的**「已展开」态** —— 与展开的面板呼应，
   一眼看出再点一下是收起。
   改造前这几条声明在余额列里，那时它必须自带尺寸；挪到操作列后
   再写一遍就是重复定义，会把 .acct-actions 那组规则覆盖得各说各话。 */
.usage-btn.open { border-color: var(--primary-bd); background: var(--primary-soft); color: var(--primary-fg); }

/* 结果摘要：单行省略，完整文案在 title 里（余额数字长度不可控）。
   余额列现在只有它一个元素，不再需要 margin-top 让位给按钮 ——
   留 0 让文字在行内垂直居中，与相邻几列（有效期、状态）的读数对齐。 */
.usage-sum {
  display: block;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.usage-sum.ok { color: var(--ok); font-weight: 600; }
.usage-sum.bad { color: var(--danger); }
.usage-sum.muted { color: var(--text-3); }

/* ─── 操作列 ─── */

/* 定位祖先：⋯ 菜单挂在它下面（菜单仍是「点击才插入 DOM」，见 accounts-view.js） */
.cell-actions { position: relative; }

.acct-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

.acct-actions button {
  height: 25px;
  padding: 0 8px;
  border-radius: var(--r-sm);
  font-size: 11.5px;
}

.acct-actions button:hover:not(:disabled) {
  border-color: var(--primary-bd);
  background: var(--primary-soft);
  color: var(--primary-fg);
}

/* ─── 展开的明细行（积分 / 签到）───
   整宽一行，内容由 usage-panel.js / accounts-model.js 生成（.row-panel）。
   明细行自带浅凹底：它是「附属于上一行」的补充信息，不该与账号行同权重。

   面板自身的外观在 page-accounts.css 里**是按 .acct-card 限定**的
   （`.acct-card .row-panel { … }`），那份选择器在表格里不命中 ——
   这里补一套同等形制的规则（含右上角的「收起」按钮），而不是去改那个文件里
   仍然服务于卡片视图的选择器：两处各写一份，改卡片那边不会悄悄改到表格。 */
.acct-panels > td {
  padding: 0 10px 8px;
  border-bottom: 1px solid var(--hairline);
  background: var(--table-bg);
}

.acct-panels .row-panel {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
  position: relative;
  margin: 0;
  /* 右侧多留 30px 给绝对定位的「收起」按钮，内容不会压到它下面 */
  padding: 10px 30px 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-inset);
  color: var(--text-2);
  font-size: 11.5px;
}

.acct-panels .row-panel.error { border-color: var(--danger-bd); background: var(--danger-soft); color: var(--danger); }

/* 「收起」按钮固定到右上角（面板是 flex 容器，跟着内容排会被挤到文字后面） */
.acct-panels .row-panel .panel-close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  padding: 0;
  border-color: transparent;
  border-radius: var(--r-xs);
  background: transparent;
  box-shadow: none;
  color: var(--text-3);
  font-size: 11px;
}

.acct-panels .row-panel .panel-close:hover { background: var(--surface-3); border-color: transparent; color: var(--text); }

.acct-panels .row-panel .big { color: var(--ok); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.acct-panels .row-panel b { color: var(--text); font-variant-numeric: tabular-nums; }

/* ─── 限流明细面板 ───
   与余额 / 签到的 .row-panel 同形制；这里要的是块状逐行布局，覆盖它的 flex 换行。 */
.acct-panels .row-panel.limit-panel { display: block; padding-right: 34px; }

.limit-panel .lp-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.limit-panel .lp-head .muted { color: var(--text-3); font-weight: 400; }
.limit-panel .lp-head button { margin-left: auto; height: 24px; font-size: 11.5px; }

.limit-panel .lp-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  border-top: 1px solid var(--hairline);
  font-size: 11.5px;
}

.limit-panel .lp-model {
  flex: 0 1 auto;
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
}

.limit-panel .lp-reset { flex: 0 0 auto; color: var(--text-2); font-variant-numeric: tabular-nums; }
.limit-panel .lp-reason {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-3);
}
.limit-panel .lp-row button { flex: 0 0 auto; height: 22px; padding: 0 7px; font-size: 11px; }

/* ─── 窄窗口 ───
   表格有最小宽度（900px），更窄时按列宽原样横滚 —— 滚动行为本身在
   page-accounts.css 的 .acct-scroll 上（那里已改成 overflow-x: auto）。 */

/* 滚动条常驻槽在横滚时会让表头右端与行右端差一像素，这里让表格自己吃掉这个盒子 */
.acct-table { box-sizing: border-box; }

/* ─── 批量栏与表脚：随表格化一并微调 ───
   批量栏沿用 page-accounts.css 的骨架，这里只补一条：表格化之后
   「全选」有两个入口（批量栏 + 表头），表头的那个需要一点可点区域 */
#acct-select-all { cursor: pointer; }