/* ─────────────────────────────────────────────
   账号页：列表容器 / 批量栏 / 表脚
   默认窗口 1060px、最小 820px。侧栏 216/68px + 内边距后，
   列表区可用宽度约 700–1500px。

   ── 卡片时代的骨架规则已全部删除 ───────────────────────────
   账号列表从「按 provider 分组的卡片网格」改成「四家混排的一张表」之后，
   卡片骨架（.acct-grid / .acct-group-title / .acct-card 及其 .selected /
   .disabled 与窄卡片容器查询、.card-head / .who / .who-name / .who-meta /
   .card-state / .card-note / .card-foot / .rank / .card-actions / .order-btns /
   .row-panels）就再没有任何引用；表格化的这一轮里把整页迁成了 React 岛，
   ⋯ 菜单也换成了组件库的浮层，最后两个还有引用的旧壳（.more-menu、
   .row-panels）随之失效，于是整族一并删除。
   表格那边的样式在 page-accounts-table.css。

   （设置页「账号列表两侧留白」开关已随功能移除，其 :root[data-content]
   两档规则也已删除。）
   ───────────────────────────────────────────── */

/* ─── 页面宽度：跟随全站版心，账号页不再有自己的限宽 ──────────────
   这里曾有一条 `max-width: 1400px`（居中），用意是「表格多出来的宽度全灌进账号列，
   账号名与优先级之间隔着几百像素，读起来像断成两截；限宽后把留白挪到页面外沿」。
   但账号列当时被列宽层钉着 300px（现已改回弹性，见 accounts-columns.ts 的
   FLEX_COLUMNS）—— 那条限宽要防的事从未发生，代价却全付了：它比表格自身的下限
   （固定列 1193 + 弹性列 300 + 滚动槽 11 = 1504）还窄，于是横滚条常驻、最右的
   「操作 / ⋯」列被切掉一截；同时账号页比其它页窄一大截（2560 宽的窗口下
   1400 vs 2048），同一个界面里看着像两个版本。

   现在它跟着 layout.css 的 .content-inner（--content-max）走，与其它页同一基线；
   超宽屏上多出来的宽度由账号列吸收 —— 这正是「只有它该参与伸缩」的原意。 */
.page[data-page="accounts"] {
  width: 100%;
}

/* 表格容器：外层定宽，内部统一滚动 */
.account-table {
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* 这里只需要「按圆角裁掉子内容」，不是滚动：hidden 会把面板变成滚动容器，
     账号表整表重建（tbody.innerHTML 整体替换，见 accounts-view.js 的 render）时，
     浏览器的滚动补偿会把面板卷走一大截 —— 工具栏 / 批量栏 / 吸顶表头全被裁出
     视野，看起来像整页坍缩；hidden 没有滚动条、也没有代码复位它，用户滚不回来。
     layout.css 给 .panel 的 overflow: clip 在本元素上会被下面这条 hidden 覆盖
     （本文件排在 layout.css 之后），所以必须在这里自己补上 clip。
     clip 是纯裁剪、不可滚动；老内核不认识 clip 时回退到 hidden，行为同旧版。 */
  overflow: hidden;
  overflow: clip;
}

.acct-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  /* 表格化：横向也允许滚动。表格有最小宽度（900px，见 page-accounts-table.css），
     更窄时按列宽原样横滚，而不是把列压窄 —— 压缩会把操作列里的按钮折成两行。
     卡片时代这里是 overflow-x: hidden（卡片网格自己会换行，不需要横滚）。 */
  overflow-x: auto;
  /* 整表重建时不做滚动锚定补偿：overflow-anchor 不继承，
     .page.active 上的 none 管不到这个滚动容器自己（后代滚动容器会为自己的
     滚动盒重新开启锚定）—— 与 .page.active / .models-table-wrap 的处理对齐。
     这条只保列表自身的滚动位置；外层面板不跳靠的是 .account-table 的 clip，
     单靠这条防不住（面板会被整体卷走）。 */
  overflow-anchor: none;
  /* 常驻预留滚动条槽：有无滚动条时列表区宽度一致，列数不会跳变 */
  scrollbar-gutter: stable;
  /* 列表区与所在卡片同色（--table-bg）：表格不再自成一层暗底。
     区分行与行交给每行的 1px 分隔线（.acct-table td 的 --hairline），
     而不是靠列表底比承载面更深 —— 那会让内容区在深浅两套主题里都突然「掉下去」一截。
     横向滚动条槽仍由 scrollbar-gutter 常驻预留，背景不引起列宽跳动。 */
  background: var(--table-bg);
}
/* ─── 批量栏 ───
   夹在工具条与列表之间的一条状态带：通栏铺满面板，四角交给面板自身的圆角裁切。
   底色与面板同色（--surface），只用一条 --hairline 与上下分开 ——
   这一带不需要靠明度差自证存在，多一层色带反而会再把内容区切成几段。 */
.batch-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 16px;
  border-bottom: 1px solid var(--hairline);
  background: var(--surface);
  color: var(--text-2);
  font-size: 11.5px;
}

.batch-bar.active { background: var(--primary-soft); border-bottom-color: var(--primary-bd); }

.batch-select-all { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; user-select: none; white-space: nowrap; }
.batch-select-all input { width: 14px; height: 14px; margin: 0; accent-color: var(--primary); cursor: pointer; }
.batch-select-all span { white-space: nowrap; }

.batch-count { color: var(--text-3); white-space: nowrap; }
.batch-count b { color: var(--text); font-variant-numeric: tabular-nums; }

.batch-hidden { color: var(--warn); font-size: 11px; }

.batch-actions { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }

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

/* ─── 页脚 ───
   账号页的页脚现在也用通用表格页脚（islands/table-shell.tsx 的 TableFooter →
   .panel-foot + .table-foot-ctl 一族，见 layout.css）：原先那一套 .table-foot
   专属样式（同底色 + 一条 --hairline 分隔线）随「五张表页脚一致」一并去掉。 */


/* ─── 账号设置弹窗：限制器段 ───
   每账号的限制规则列表（余额 / Token 两类，见 islands/accounts-dialog-limiter.tsx）：
   规则行是「开关 + 条件一句话 + 实时状态徽章 + 编辑/删除」的横排；编辑器是
   列表下方的内联卡片（不做嵌套弹层 —— 弹窗里再弹弹窗的焦点管理得不偿失）。
   徽章的样子交给组件库的 Badge，这里只管行布局与停用态的降权。 */
.limiter-rules {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  overflow: hidden;
}

.limiter-rule {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--hairline);
  background: var(--surface);
}
.limiter-rule:last-child { border-bottom: none; }

.limiter-rule-main { flex: 1; min-width: 0; }
.limiter-rule[data-off] .limiter-rule-main { opacity: .5; }

.limiter-rule-cond {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.limiter-rule-ops { display: flex; flex: none; }
.limiter-rule-ops button { height: 25px; padding: 0 8px; font-size: 11.5px; }

/* 编辑器实况提示（限制器二级弹层里）：与弹层字段的标签列对齐（76px + 间距 10px） */
.limiter-hint {
  margin-left: 86px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-xs);
  padding: 6px 10px;
}

/* ─── 账号设置弹窗：左侧分组导航 + 右侧内容区 ───
   单列长滚动换成分区结构（见 islands/accounts-dialogs.tsx 的五分组）：
   导航只承载「切」，内容区一屏一组；字段标签定宽右对齐，控件左边缘落同一条线。 */
.acct-dlg { display: flex; min-height: 460px; align-items: stretch; }

/* 弹窗内只补栏宽：容器（底色 / 分隔线 / 内边距）与条目的选中态、悬浮态、字重
   都是 .prov-rail + NavItem 组件自带的（与模型管理左栏同一形态，见 page-gateway.css） */
.acct-dlg-rail { flex: 0 0 148px; min-height: 0; }

.acct-dlg-main { flex: 1; min-width: 0; padding: 14px 20px 16px; }
.acct-dlg-pane-head h3 { font-size: 13.5px; font-weight: 600; }
.acct-dlg-pane-head p { font-size: 12px; color: var(--text-3); line-height: 1.7; margin-top: 2px; }
/* 内容区字段：标签定宽右对齐（原型网格的落点），跨弹窗分段共用。
   行距在内容区统一给（全局 .field-row 没有 margin —— 旧弹窗的行距是逐行手挂
   mt-2.5 撑出来的，分组结构下再逐行挂迟早漏一行，就长成「没有间距」的样子）。 */
.acct-dlg-main .field-row { margin: 10px 0; min-height: 30px; }
.acct-dlg-main .field-row > label { width: 76px; flex: none; text-align: right; }
.acct-dlg-main .field-row > label:empty { width: 76px; }
.acct-dlg-hint { margin-left: 86px; }

/* ─── 余额列：Token 限制器的第二行读数 ───
   「周期 Token 31 万 / 50 万 · 剩 23 分」：配了 Token 规则的账号才有这一行
   （见 islands/accounts-panels.tsx 的 prominentTokenLimit）。观感与 .lim-sub
   同一档小字，已触发的读数用 warn 色点出来。 */
.usage-token-sub {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.usage-token-sub .hit { color: var(--warn); font-weight: 600; }