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

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

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

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

   表格的宽度下限（也就是「它什么时候开始横滚」）由 accounts-columns.ts 的
   tableMinWidth() 从当前可见列宽算出、写成表格的行内 min-width。**下面几轮改造
   记录里那些「min-width 从 X 提到 Y」写的是当时手写在 CSS 里的那个常数的沿革**，
   只作历史读：现在这个数不再手维护，加列或改默认列宽都不必再手算它
   （手写的那一版曾长期漂在真实需求之下 —— 表里写着 1155，而账号列被钉着 300px，
   表格真实需要 1493px，于是它没拦住任何东西）。

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

   **本轮代理列 156 → 186**（格子从一枚 chip 改成下拉，选择器本身有固定开销：
   触发器左右内边距 + 箭头 + 间隔 ≈ 41px，见下方「代理列」一节）：固定列合计
   1115 → 1145，min-width 1077 → 1107（同一套「随列宽走」的口径）。

   **本轮余额列 84 → 132**（格子从一行纯读数改成两行：套餐名 + 进度条与读数，
   见下方「余额列」一节）：固定列合计 1145 → 1193，min-width 1107 → 1155。

   **分组模式（2026-10）：优先级列 132 与提供商列 132 下线，新增顺序列 84** ——
   账号按家分组显示，家名与图标搬到分组带上（提供商列重复了这件事），顺序改由
   拖拽表达（组内序号 `#N` + 拖动把手，见下方「顺序列」）。固定列合计
   1193 → 1013，表格的横滚线随之从 1493 降到 1313（= 1013 + 弹性列下限 300）。

   **勾选列 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…」就失去意义了。
     · 余额列：改成了「主额度桶的两行形态」（套餐名一行、进度条 + 读数一行，
       见下方 .usage-pool），因此从 84 提到 132 —— 84px 会把
       「ZCode Trust Build」砍成「ZCode Tr…」，而用户问的第一句正是
       「这 1 亿是哪个套餐给的」。没有桶总额的家仍是那一行纯读数
       （「可用 4300 积分」这类文案长度不可控，按省略号收口、完整值在 title 里）。

   最小窗口 820px 时（侧栏已收到 68px）可用宽度约 699px，而表格的下限是
   1193 + 300（弹性列）= 1493px，于是横向滚动约 794px。

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

.acct-table {
  width: 100%;
  /* 「不能再窄」的底线**不在这里**：它由 accounts-columns.ts 的 tableMinWidth() 从
     当前可见列的宽度算出来、写成表格的 inline min-width（弹性列按 FLEX_MIN_WIDTH
     计）。原先这里是一条写死的 1155px，而弹性列同时被钉着 300px，于是表格真实需要
     1493px、1155 永远碰不到 —— 它既没拦住任何东西，也没让任何人看出账号页那条
     1400px 的限宽已经比表格的下限还窄。加列 / 改默认列宽时不必再手算这个数。 */
  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; }

/* 表头的「隐藏账号名」眼睛（只在账号列出现）：一颗纯图标小按钮，贴在列名后面。
   默认继承表头小字的灰色、不抢注意力；隐藏生效时常亮主色（.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; }
/* 顺序列（分组模式，替代原优先级列 132px）：拖动把手 20 + 组内序号（#12 这种
   两位数约 30）+ 间隔 6，84px 留有余量。它是这一家**组内**的位次，组的先后由
   分组带的顺位表达 —— 两者合起来才是真实的尝试顺序（见 accounts-domain 的
   accountGroups）。这一列同时是「行顺序」唯一的拖动起点（把手在格子里）。 */
.cell-order { width: 84px; }
/* 代理列：一格一个下拉（选中即保存，见 accounts-table.js 的 proxyCell）。
   宽度按「节点名 :端口」的常见形态给足（下拉开销：触发器左右内边距 + 箭头 +
   间隔 ≈ 41px，186px 的格子留给文本约 129px）；更长的名字由触发器省略号
   收口，完整值在展开的浮层里、也在触发器的 title 里。
   这个宽度与 accounts-columns.js 的 DEFAULTS.proxy 同步（没有拖过的列走
   这里，拖过或还原后以那份为准——改一处必须改另一处，见那个文件的说明）。 */
.cell-proxy { width: 186px; }
/* 表头与单元格一起居中（下拉本身撑满整格，居中影响不到它的盒子；保留是为了
   表头文案与相邻读数列（有效期 / 余额）在同一条中轴上，扫读不忽左忽右） */
.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; }
/* 余额列：主额度桶的两行形态（套餐名 + 进度条与读数）需要比纯读数宽一档 ——
   84px 放不下「ZCode Trust Build」+「8800万 / 1亿 token」，套餐名会被省略成
   「ZCode Tr…」而失去意义。132 与优先级列同档，是「一行塞得下套餐名」的最小值。
   读数更长的家（可用 4300 积分）仍按省略号收口、完整值在 title 里。 */
.cell-usage { width: 132px; }
/* 操作列：四颗按钮的最坏情况（签到 / 已签到 / 余额 / 设置 / ⋯ 里同时出现的那四颗），
   本次改造从 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.ts 的 colgroup
   同样不给它写默认宽度（FLEX_COLUMNS）；用户拖过之后才由那份文件写 inline width 定宽，
   双击把手还原回弹性。曾经这里写着同一句话、而那份文件给账号列写了 300px，
   两套口径矛盾的结果就是表格被钉成常数宽度、横滚条常驻（见文件头）。 */

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

.acct-row .cell-account,
.acct-row .cell-order,
.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; }
/* ─── 勾选列 ─── */

.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;
  gap: 5px;
  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;
}

/* 收录过图标的家在名字前挂一枚 13px 小图（PROVIDER_ICONS，与卡片 / 模型管理页
   同一份）。图与名字同一行居中；圆角略收，自带透明底的图不至于显得比文字重 */
.pbadge .pbadge-ico {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  border-radius: 3px;
  object-fit: contain;
}
/* 名字段单独成盒才能吃到 ellipsis —— 裸文本节点在 flex 容器里只是匿名项，
   父级的 text-overflow 对它不生效（图标固定 13px 不参与截断） */
.pbadge .pbadge-txt {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.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); }

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

.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 的 accountCell）：可收缩 + 省略号。
   上面那条 `flex: 0 0 auto` 是为短徽标写的（不压缩），邮箱动辄二三十字符，
   照它来会直接溢出、被 .acct-sub 的 overflow: hidden 从中间裁断 ——
   长邮箱要的是「省略号收尾」，不是「无声截断」。 */
.acct-sub .acct-email {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ─── 代理列 ───
   一格一个下拉，**选中即保存**（处理在 accounts-view 的 applyProxyPick；
   选项组装在 accounts-table.js 的 proxyCell）。原生 select 当宽度锚、外壳
   撑满单元格 —— 与「获取模型」弹窗的模型来源列同一手法（不撑满的话
   inline-flex 会收缩到最长选项的自然宽，触发器比格子窄出箭头那一档，
   文本反而先被截断，见 page-gateway.css 的 select-shell 说明）。 */
.cell-proxy select { width: 100%; }
/* 健康说明（限流恢复时间 / 代理不可用）：只在异常时出现，正常行不留空行 */
.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); }

/* ─── 顺序列（`⠿ #N`：组内位次 + 拖动把手）───
   分组模式把「顺序」的两种表达合成了拖拽一种：组内的先后拖这一格的把手，
   整组的先后拖分组带的把手。数字（原优先级）不再出现在表里 —— 它由
   「组顺位 → 组内顺位」编译出来（后端整队重编号），界面上没有第二处口径。 */
.order-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

/* 拖动把手：行里唯一的拖动起点。整行可拖会让「点开关」变成「拖走一行」，
   所以只给这一小块；触摸 / 触控板上靠 touch-action: none 接管手势。 */
.order-grip,
.queue-grip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 18px;
  height: 20px;
  border-radius: var(--r-xs);
  color: var(--text-3);
  cursor: grab;
  touch-action: none;
}

.order-grip:hover,
.queue-grip:hover { background: color-mix(in srgb, var(--text) 10%, transparent); color: var(--text-2); }

.acct-row.dragging,
.grp-band.dragging { opacity: .45; }

/* 拖动中：整页光标切成抓取态，提示「现在松手就会落位」 */
body.queue-dragging,
body.queue-dragging * { cursor: grabbing !important; }

/* 落点提示：插在这一行的**上面 / 下面**。用 inset box-shadow 而不是 border ——
   加 border 会把这一行撑高 2px，拖动中整张表跟着跳，落点反而看不清。 */
.acct-row.drop-before > td,
.acct-row.drop-after > td,
.grp-band.drop-before > td,
.grp-band.drop-after > td { box-shadow: inset 0 2px 0 0 var(--primary); }

.acct-row.drop-after > td,
.grp-band.drop-after > td { box-shadow: inset 0 -2px 0 0 var(--primary); }

/* 组内序号：#N。与分组带的「第 N 顺位」是同一种读数的两个层级，
   都取中性灰 —— 顺序不是状态，不该有颜色。 */
.order-rank {
  min-width: 22px;
  text-align: center;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ─── 分组带（一家一段的横幅，占满一行的通栏格）───
   刻意保持**中性**：一家一色会让整页看着像调色板，而「这一段是哪一家」由家名
   与图标已经说清楚了。分组带只负责两件事：说清这是谁、以及可拖（顺位）。 */
.acct-group .grp-band > td {
  padding: 0;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}

.grp-band-inner {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 0 8px;
}

/* 组顺位：与 .order-rank 同色同一档字号 —— 组的先后与组内先后是同一类读数。
   title 里说清「拖动可改」，格子本身不放控件。 */
.grp-rank {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.grp-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}

.grp-logo img { width: 16px; height: 16px; border-radius: 3px; object-fit: contain; }

/* 没有图标的家（自定义提供商）：首字母方块，中性底 —— 不引人注目但能与文字区分 */
.grp-logo-txt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 3px;
  background: var(--surface-3);
  color: var(--text-2);
  font-size: 10px;
  font-weight: 700;
}

.grp-name { font-size: 12.5px; font-weight: 650; color: var(--text); white-space: nowrap; }

.grp-stat {
  color: var(--text-3);
  font-size: 11px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.grp-spacer { flex: 1 1 auto; }

.grp-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--r-xs);
  background: transparent;
  box-shadow: none;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}

.grp-iconbtn:hover { background: var(--nav-hover); color: var(--text); }
.grp-iconbtn svg { display: block; transition: transform .16s ease; }

/* 折叠态：箭头转成「指向右」，与展开态共用一个图标（少一枚图标，状态靠旋转表达） */
.acct-group.collapsed .grp-fold svg { transform: rotate(-90deg); }

/* 折叠时分组带的下边框仍然留着：它同时是与下一段的分隔线 */

/* ─── 连接数列 ───
   只在有连接时显示一个绿色数字（与 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-sub {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  color: var(--warn);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* ─── 有效期列 ─── */
.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` 一组规则统一给出（那一列里的按钮本来就是同一档），
   所以这里**没有它自己的声明** —— 它不再有「已展开」态（明细面板已取消，
   每次点击都是一次查询，见 accounts-table.js 的 actionsCell），
   也就没有 `.open` 高亮可写。 */

/* 结果摘要：单行省略，完整文案在 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); }
/* 余额只读到了一半（CodeArts 的两台网关里有一台没回话）：读数是可信的、
   但不完整。既不是失败（不用红），也不能是一片绿（会把「没读到」读成
   「额度用完了」）。warn 这一档在别处正是「值得看一眼但不必去查故障」，
   与 `#toast.warn` / `.badge.warn` 同一语义。 */
.usage-sum.warn { color: var(--warn); font-weight: 600; }

/* ─── 余额列：主额度桶的两行形态 ───
   第一行套餐名（用户问得最多的那句「这 1 亿是哪个活动给的」），第二行进度条 +
   「剩余 / 总量」。只有在后端给出了**桶的总额**时才用这套（ZCode 的套餐额度），
   其余各家仍是上面那条纯读数 —— 判据在 islands 的 `usagePool`，这里只管样子。

   进度条画的是**剩余**比例：与紧挨着的读数同一方向。轨道/条体的观感由组件库的
   Progress 自带（6px 胶囊、主色条体），这里只给它一个固定宽度（弹性布局下
   `w-full` 的根节点会随文字挤压，固定 40px 让同一列里每行的条都一样长）。 */
.usage-pool {
  display: block;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.usage-pool-name {
  display: block;
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.usage-pool-line {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.usage-pool-bar { flex: 0 0 40px; }

.usage-pool-view {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.usage-pool-view.ok { color: var(--ok); font-weight: 600; }
.usage-pool-view.warn { color: var(--warn); font-weight: 600; }

/* ─── 余额列：套餐徽标 + 明细弹层的两行形态（usageDetail 能力位，CodeArts）───
   第一行是套餐徽标（试用版 / 免费版 —— 两个权益不同的账号第一眼就能分开），
   第二行「可用 N 积分」可点击，点开逐项读数（样式在下面的 .usage-pop 一组）。
   交互对齐 ⋯ 菜单：点开、点外关闭、Esc 收起（组件库 Popover 负责）。
   悬停提示仍是 summary.title 那份单行摘要，弹层是「要看构成」时的入口。 */
.usage-cell { display: block; min-width: 0; font-variant-numeric: tabular-nums; }

.usage-plan {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  min-width: 0;
}

.plan-chip {
  flex: none;
  font-size: 10.5px;
  line-height: 1;
  font-weight: 600;
  padding: 3px 7px;
  border-radius: 999px;
  border: 1px solid var(--primary-bd);
  background: var(--primary-soft);
  color: var(--primary-fg);
  white-space: nowrap;
}

/* 免费版没有付费套餐，徽标走中性灰 —— 不让它看起来像一份「更好的套餐」 */
.plan-chip.free {
  border-color: var(--border-strong);
  background: var(--control-bg);
  color: var(--text-2);
  font-weight: 500;
}

.plan-sub {
  font-size: 10.5px;
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 读数按钮：整行可点（那格本来就是「一眼看出还剩多少」，加一个点击态不换语义），
   字号同 .usage-sum，另加一个 caret 提示「点开还有明细」。
   读数**居中**：本形态只有 CodeArts 一家用，两个权益档的读数（「可用 —积分」/
   「可用 11000 积分」）在同一列里居中后不再贴着左边的套餐徽标；caret 改绝对
   定位、不占布局宽度 —— 留在流里的话读数会被它的宽度挤得偏左，「居中」名不
   副实。两侧对称留白因此由 .val 的 padding 承担，且长读数不会与 caret 叠字。

   ── 静息态**要有底色与描边**（2026-10 修）─────────────────────
   这一枚原来在原处写的是 `border: 1px solid transparent; background: none`：
   浅色主题下像一句读数旁边挂个 caret，还能认；深色主题里底色本身就是黑的，
   "透明"等于"看不见" —— 用户的原话是「它的背景是黑的，然后你这个按钮也是黑的，
   都看不到，除非我鼠标移到上面」。悬停那一块底色其实也不是下面那条规则给的：
   通用 `button:hover:not(:disabled)` 的特异性 (0,2,1) 比 `.usage-toggle:hover`
   (0,2,0) 高，一直是它在生效 —— 于是"静息全透明、一动鼠标才冒出一块"，正好是
   最难用的那种组合。现在静息/悬停都直接取全站按钮那一套 `--control-*`，与同一
   行的「余额 / 设置」同族；几何（宽度出血 / 内边距 / 圆角 / 字号）保持原样，
   `.usage-toggle` 没声明的 `height: 30px`、`box-shadow` 仍按通用 button 来。 */
.usage-toggle {
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px;
  width: calc(100% + 16px);
  margin: 0 -8px;
  padding: 4px 8px;
  border: 1px solid var(--control-border);
  border-radius: var(--r-xs);
  background: var(--control-bg);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
/* 悬停沿用全站按钮那套：与上面那条通用 `button:hover:not(:disabled)` 同色，但必须
   自己写一遍并带上 `:not(:disabled)` —— 否则以后有人调通用悬停色，这一枚的静息态
   与悬停态会各走各的（这正是上一版"两种底色"的来源） */
.usage-toggle:hover:not(:disabled) {
  background: var(--control-hover);
  border-color: var(--control-border-hover);
}
.usage-toggle .val {
  flex: 1;
  text-align: center;
  /* 与 caret 的占位对称（caret 在右 8px 处、宽约 6px）：读数再长也不叠字 */
  padding: 0 14px;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.usage-toggle .caret {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-3);
  font-size: 9px;
  line-height: 1;
  transition: transform 0.15s;
}
.usage-toggle.ok .val { color: var(--ok); font-weight: 600; }
.usage-toggle.warn .val { color: var(--warn); font-weight: 600; }
.usage-toggle.bad .val { color: var(--danger); }
.usage-toggle.muted .val { color: var(--text-3); }
.usage-cell.open .usage-toggle { background: var(--primary-soft); border-color: var(--primary-bd); }
.usage-cell.open .usage-toggle .caret { transform: translateY(-50%) rotate(180deg); }
/* 展开态按 aria-expanded 认（触发器自己会给）：入口不只有 `.usage-cell` 那一处
   —— 积分明细那个入口（下面）没有那层包裹，按状态类写的规则到它身上就不生效了 */
.usage-toggle[aria-expanded="true"] { background: var(--primary-soft); border-color: var(--primary-bd); }
.usage-toggle[aria-expanded="true"] .caret { transform: translateY(-50%) rotate(180deg); }

/* ── token 组的平铺行（对话 token / 福利模型日额度）───
   这两行是「这账号现在能不能跑」的直接标志，直接住在余额格里不折叠；
   积分类的构成才进弹层。标签短名（福利模型日额度 → 福利日额度），
   读数万/亿缩写（3541691 → 354 万），原值都在悬停 title。
   条与积分明细同款：6px 胶囊、画**剩余**比例、超额整条走红 ——
   但只在**真总量**（allowance > 1）时画，无上限 / 占位包不画。 */
.usage-flat-line {
  display: block;
  margin-top: 4px;
  min-width: 0;
}

.usage-flat-head {
  display: flex;
  align-items: baseline;
  gap: 5px;
  min-width: 0;
}

.usage-flat-name {
  flex: none;
  font-size: 10.5px;
  color: var(--text-3);
  white-space: nowrap;
}

.usage-flat-view {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.usage-flat-view.ok { color: var(--ok); font-weight: 600; }
.usage-flat-view.warn { color: var(--warn); font-weight: 600; }
.usage-flat-view.bad { color: var(--danger); font-weight: 600; }
.usage-flat-view.muted { color: var(--text-3); }

.usage-flat-track {
  display: block;
  height: 5px;
  margin-top: 3px;
  border-radius: 999px;
  background: var(--surface-inset);
  overflow: hidden;
}
.usage-flat-track i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--primary);
}
.usage-flat-track.over i { background: var(--danger); }

/* ─── 余额明细弹层的内容（portal 渲染，样式挂在 PopoverContent 上）───
   结构照原型 prototype/codearts-balance.html：两组（积分 / token 额度）、
   每行「名称 + 读数 (+ 剩余进度条)」、可选合计行。长解释只在悬停 title，
   界面上不放句子 —— 弹层本来就是扫一眼的。 */
.usage-pop { padding: 10px 14px 12px; gap: 0; }

.usage-pop-missing {
  margin: 0 0 8px;
  padding: 6px 9px;
  border-radius: var(--r-xs);
  background: var(--warn-soft);
  border: 1px solid var(--warn-bd);
  color: var(--warn);
  font-size: 11px;
  line-height: 1.6;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 弹层的兜底行：没有积分类读数的账号（免费版额度全在福利 token 池）——
   一句中性说明，别渲染成一个空框让人怀疑是故障 */
.usage-pop-empty {
  padding: 8px 0 2px;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--text-3);
}

.usage-pop-group {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 2px;
  font-size: 11px;
  color: var(--text-3);
}
.usage-pop-group::after { content: ""; flex: 1; height: 1px; background: var(--hairline); }
.usage-pop-group:first-child { margin-top: 0; }

.usage-pop-row { padding: 7px 0; }
.usage-pop-row + .usage-pop-row { border-top: 1px dashed var(--hairline); }

.usage-pop-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.usage-pop-name {
  font-size: 12px;
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.usage-pop-view {
  margin-left: auto;
  flex: none;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.usage-pop-view.ok { color: var(--ok); }
.usage-pop-view.warn { color: var(--warn); }
.usage-pop-view.bad { color: var(--danger); }
.usage-pop-view.muted { color: var(--text-3); font-weight: 500; }

/* 剩余进度条：6px 胶囊、轨道 surface-inset；画的是**剩余**比例（与 usage-pool 同向）。
   超额整条走红 —— 画不满的「剩余 0%」读起来像「没用过」，与事实相反。 */
.usage-pop-track {
  display: block;
  height: 6px;
  margin-top: 6px;
  border-radius: 999px;
  background: var(--surface-inset);
  overflow: hidden;
}
.usage-pop-track i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--primary);
}
.usage-pop-track.over i { background: var(--danger); }

.usage-pop-total {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 11px;
  border-radius: var(--r-xs);
  background: var(--surface-inset);
}
.usage-pop-total .k { font-size: 11.5px; color: var(--text-3); }
.usage-pop-total .v {
  margin-left: auto;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ok);
  font-variant-numeric: tabular-nums;
}
.usage-pop-total .v small { font-size: 11px; font-weight: 500; color: var(--text-3); }

/* ─── 余额格上的「积分明细」入口（creditDetail 能力位：WorkBuddy 两家与 Trae）───
   入口就是**读数本体**，用的正是上面那套 `.usage-toggle`（整行可点、悬停有底色、
   caret 绝对定位、展开态走 aria-expanded）—— 不做「读数 + 一个小箭头按钮」那种
   两件式：箭头十来个像素，是这一列里最难点中的东西。两种格形态各配一个变体：

     · 单行读数（WorkBuddy）→ 直接 `.usage-toggle`，`.val` 居中，与 CodeArts 同款；
     · 主额度桶（Trae）→ 同一个 `.usage-toggle` 加 `.usage-pool-line` 把间距与
       对齐改回桶那套（进度条与读数一起住在按钮里，左对齐 —— 左边有进度条，
       居中会让条与读数分家）。

   逐份明细的长度由上游说了算（每日签到发的包能堆到几十份），所以弹层给一个
   最大高度 + 滚动：明细本来就是要翻的东西，但把整页顶下去不是。 */
.usage-toggle.usage-pool-line {
  gap: 6px;
  /* 上下留白比单行那款更紧：这一行上面还有套餐名，桶形态本来就矮一号 */
  padding: 2px 8px;
  margin: 4px -8px 0;
}
/* 桶形态的读数占满剩余宽度并自己省略（与它在 .usage-pool-line 里时一致）；
   右侧给绝对定位的 caret 留位 —— caret 不占布局宽度，不留位就会与长读数叠字 */
.usage-toggle.usage-pool-line .usage-pool-view {
  flex: 1;
  padding-right: 12px;
}

/* 明细弹层：比 CodeArts 那份（288px）宽一点 —— 每行要多放「领取 → 到期」一行。
   高度与滚动都写在**这一层**（`PopoverContent` 的直接子元素）上，而不是弹层自己：
   弹层带着组件库编译出的 `overflow-hidden !important` 与
   `max-h-[min(70vh,560px)] !important`，在它身上写 max-height / overflow 一律被
   压掉 —— 明细一多，既滚不动（overflow 还是 hidden）又会被裁掉。滚动容器落在里层
   就没有这个对手，也不必往自家样式里撒 !important。
   内边距因此也归这一层（调用方不再给弹层挂 .usage-pop）。

   高度：常规窗口 408px（约 7 份明细，再多就滚）；**60vh 是护栏** —— 窗口特别矮时
   跟着缩，免得这一层比弹层自己的 70vh 上限还高，多出来的部分被弹层的
   overflow:hidden 裁掉（那种情况下底部几行既看不见也滚不到）。 */
.usage-pop-credit {
  padding: 10px 14px 12px;
  max-height: min(408px, 60vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  /* 这一层是弹层的初始焦点（见 accounts-credit-detail.tsx 的 initialFocus）：
     聚焦它只是为了"别让焦点落到末尾那个组表头上、把列表拽到底部"，
     不是要给用户一个可操作的目标 —— 所以不画焦点框。 */
  outline: none;
}

/* ─── 末尾那组「已用完 / 已过期」（默认折叠）────────────────────
   花不出去的明细收在这里，表头即开关。它是这一组的**页脚条**：铺满弹层宽度
   （向两侧出血到内边距之外）、方角、无描边，靠一整条底色与上面那串记录分开 ——
   比"飘在列表中间的小按钮"更像个收尾。

   底色一开始写的是 `background: none`（当时按"分隔线"的思路做的），深色主题下
   等于没有 —— 用户报的就是这个：「底部'已用完'的那个……也一样有这个问题」。
   现在静息态取全站按钮那套 `--control-bg`，悬停 `--control-hover`（同样要带
   `:not(:disabled)`，理由见 .usage-toggle 那段）。

   三角的方向与 `.usage-toggle` 那个（朝下=点开一层，点开后翻上去）**相反**是有意的：
   这一处收起时朝右（还有一段没收进来），展开后转向下 —— 说的事不一样。 */
.usage-pop-spent {
  margin-top: 8px;
  border-top: 1px solid var(--hairline);
}

.usage-pop-spent-head {
  display: flex;
  align-items: center;
  gap: 6px;
  /* 100% + 两侧内边距（容器 padding 是 10px 14px 12px），配负外边距铺到弹层边缘 */
  width: calc(100% + 28px);
  margin: 8px -14px 0;
  padding: 6px 14px;
  border: 0;
  border-radius: 0;
  background: var(--control-bg);
  font: inherit;
  font-size: 11px;
  color: var(--text-2);
  text-align: left;
  cursor: pointer;
}
.usage-pop-spent-head:hover:not(:disabled) { background: var(--control-hover); }
/* 展开态与 .usage-toggle 的展开态同一语言（主色浅底），一眼看出这一组是开着的 */
.usage-pop-spent-head[aria-expanded="true"] { background: var(--primary-soft); }
/* 三角用 CSS 画（border 那套），不用 ▾ 这个字形：同一串 ▾ 在 9~10px 下各家字体的
   墨迹差得远（这份界面里它已经缩成像个小点），而这一行整行就靠它表明"能点"。
   尺寸写死 5×8px，旋转只负责方向：收起朝右（▸），展开转 90° 朝下（▾）。 */
.usage-pop-spent-head .caret {
  flex: none;
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 5px solid currentColor;
  transition: transform 0.15s;
}
.usage-pop-spent-head[aria-expanded="true"] .caret { transform: rotate(90deg); }
/* 份数靠右，与每一行右侧的读数对齐成一列 */
.usage-pop-spent-head .n { margin-left: auto; font-variant-numeric: tabular-nums; }

/* 弹层头部：套餐 / 状态 / 到期 / 余量（措辞与悬停提示同源，见 subscriptionText） */
.usage-pop-sub {
  padding-bottom: 8px;
  margin-bottom: 2px;
  border-bottom: 1px solid var(--hairline);
  font-size: 11px;
  line-height: 1.6;
  color: var(--text-3);
}

/* 行里的第二行：领取时间 → 到期时间（+ 来源 / 每日重置） */
.usage-pop-window {
  margin-top: 3px;
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

/* 定位祖先：⋯ 菜单挂在它下面（菜单仍是「点击才插入 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);
}

/* ─── 展开的明细行（限流 / 签到）───
   整宽一行，内容由 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;
}

/* 「收起」按钮固定到右上角（面板是 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 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; }