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

   ── 卡片规则的去留（表格化改造后）───────────────────────────
   账号列表已从「按 provider 分组的卡片网格」改成「四家混排的一张表」
   （表格样式在 page-accounts-table.css），本文件里的**卡片骨架规则
   现已没有引用**，包括：
     .acct-grid
     .acct-group-title（含 page-accounts-providers.css 里的 .pgroup-*）
     .acct-card（含 .selected / .disabled 与窄卡片容器查询）
     .card-head / .pick / .who / .who-name / .who-meta / .card-state / .card-note
     .card-foot / .rank / .card-actions / .order-btns / .row-panels
   这些骨架规则继续保留，理由有两条：
     1. `.more-menu`、`.row-panel` 的形制仍被表格直接复用或在
        page-accounts-table.css 里按同等形制重写了一份，逐条甄别「哪条还活着」
        的成本（以及删错一条就得回滚的风险）高于留着它们的成本；
     2. 恢复卡片视图时不必重写一遍。
   **注意 `.order-btns` 是个例外**：表格那边原先按它的形制重写了一份，
   本次改造把优先级控件改成「↓ 数字 ↑」的合并控件（.prio-stepper），
   表格不再使用这个类名。它现在只为「第 2 条理由」（将来恢复卡片视图）留着，
   全站已无引用 —— 恢复卡片视图时若沿用新控件，这几条可以一并删掉。
   （设置页「账号列表两侧留白」开关已随功能移除，其 :root[data-content] 两档
   规则也已删除，.acct-grid 只保留下面的基础口径。）
   ───────────────────────────────────────────── */

/* ─── 页面限宽居中（超宽屏可读性）────────────────────────────
   表格是「固定列 + 账号列吃剩余宽度」的结构：内容区一宽，多出来的宽度全部灌进
   账号列，账号名与优先级之间隔着几百像素的空白，读起来像表格断成了两截。
   限宽 1400px 居中后，超宽部分的留白落在页面外沿（版心两侧），而不是表格中间。 */
.page[data-page="accounts"] {
  width: 100%;
  max-width: 1400px;
  margin-inline: auto;
}

/* 表格容器：外层定宽，内部统一滚动 */
.account-table {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.acct-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  /* 表格化：横向也允许滚动。表格有最小宽度（900px，见 page-accounts-table.css），
     更窄时按列宽原样横滚，而不是把列压窄 —— 压缩会把操作列里的按钮折成两行。
     卡片时代这里是 overflow-x: hidden（卡片网格自己会换行，不需要横滚）。 */
  overflow-x: auto;
  /* 常驻预留滚动条槽：有无滚动条时列表区宽度一致，列数不会跳变 */
  scrollbar-gutter: stable;
  /* 列表区与所在卡片同色（--table-bg）：表格不再自成一层暗底。
     区分行与行交给每行的 1px 分隔线（.acct-table td 的 --hairline），
     而不是靠列表底比承载面更深 —— 那会让内容区在深浅两套主题里都突然「掉下去」一截。
     横向滚动条槽仍由 scrollbar-gutter 常驻预留，背景不引起列宽跳动。 */
  background: var(--table-bg);
}

/* ─── 卡片网格 ───
   轨道宽度被夹在 340–353px，列数随可用宽度自适应。

   为什么不用 fr：fr 会让卡片随窗口等比变宽。窗口 1900px 时单卡能到 600px 以上，
   卡片内部「转发顺序 ↔ 操作按钮」又会被拉开一道空白 —— 那正是要修的毛病
   换到卡片内部重演。封顶 353px 才能保证卡片始终紧凑。

   353 这个上限是逆推的：默认窗口内容区 804px，按两侧 16px 内边距这一最紧的口径算，
   减网格左右内边距 32px 得 772px；两列需要 353×2 + 14 = 720px，排得下。
   取到 360 就要 734px 才够，仍是两列，但更宽窗口下会少排一列。

   340 是下限：最小窗口 820px 时轨道区约 680px，两列需要 694px，排不下 → 单列。
   这个下限同时决定卡片最窄宽度，底部操作区按它校验过（见文末容器查询）。 */
.acct-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 353px));
  gap: 14px;
  padding: 16px 16px 18px;
  justify-content: center;
  /* 卡片各按自身内容定高：默认的 stretch 会让同行卡片一起等高，
     某张卡展开积分明细后旁边两张被拉成一样高，中间空出一大块。 */
  align-items: start;
}

/* 分组标题（国内 / 国际）横跨整行 */
.acct-group-title {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  color: var(--text-3);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.acct-group-title::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--border); }

/* ─── 卡片本体 ─── */
.acct-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 9px;
  min-width: 0;
  /* 命名容器：底部操作按钮的显隐按卡片自身宽度判断，而不是窗口宽度 */
  container-type: inline-size;
  container-name: card;
  padding: 12px 12px 11px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.acct-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-2); }

.acct-card.selected { border-color: var(--primary-bd); background: var(--primary-soft); }
.acct-card.selected:hover { border-color: var(--primary); }

/* 已禁用：整卡压暗，和可用账号区分开。
   底色仍是 --surface，不用 --surface-2：禁用卡只是「退后一档、仍是一张卡」，
   换底色会让它和正常卡变成两种材质；弱化交给文字压灰（见下面两条 --text-3）
   与既有描边表达。 */
.acct-card.disabled { background: var(--surface); }
.acct-card.disabled .who-name .name { color: var(--text-3); }
.acct-card.disabled .rank { color: var(--text-3); }

/* ─── ① 主体：勾选 / 账号 / 状态 ───
   每一层都要显式写 min-width: 0。flex 项默认 min-width: auto，
   会以「内容最小宽度」当底线 —— 而账号名是 white-space: nowrap 的长邮箱，
   最小宽度就是整串文字，于是这一行撑破卡片、状态徽章被挤出右边缘。

   这一行里只剩两个子项：勾选框与 .who（状态区已移入名字行内部，不再是第三列）。
   于是 .who 独占扣除勾选框后的全部宽度，明细行 .who-meta 随之变成通栏行 ——
   这正是本轮改动要的结果：此前状态区作为独立列白扣掉 119.5–159.4px
   （实测 353px 卡里带「正常」扣 119.5px、带「限流 +2」扣 136.3px、
   两枚 bad 徽章扣 159.4px），明细行的「代理」在那一列左边的空白处就被迫省略，
   而右侧看着还有一大片空。一行容不下时让位的仍是账号名
   （.name 自己收缩加省略号），不是徽章。
   代价是名字行的高度现在由状态区决定（常态 21.8px，比账号名行高 20px 多 1.8px），
   明细行与卡片因此各下移/增高约 1.8px —— 换来的通栏宽度远不止这个量级。 */
.card-head {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  min-width: 0;
}

/* 勾选框：做成与账号名同高的 20px 盒并居中，中线与账号名重合。
   不用 align-self: center —— 那会居中在「账号名 + 明细」整块上（偏低 10px），
   读起来像挂在明细行上；勾选框属于账号本身，应该贴着账号名。 */
.card-head .pick {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  height: 20px;
}

.card-head .pick input { width: 15px; height: 15px; margin: 0; accent-color: var(--primary); cursor: pointer; }

.who { flex: 1 1 auto; min-width: 0; }

/* 这里必须保持 flex，不能换回 block：账号名的省略号依赖「flex 项 + min-width: 0」
   这条链（.who → .who-name → .name 每层都要给 0 下限）。改成 block 后 .name
   退回行内元素，text-overflow: ellipsis 直接失效，长邮箱会撑破卡片。
   这条链同时也是状态区（.card-state）在本行内被约束的前提：
   .who 给了 0 下限，名字行才收得住，状态区才有右缘可贴。 */
.who-name { display: flex; align-items: center; min-width: 0; }

.who-name .name {
  /* 同样要给 0 下限：默认 auto 会让省略号失效。
     行高写死 20px，与 .pick 的高度共用同一个常量 —— 用 1.4 这类倍率的话，
     字号一改这里的对齐又会悄悄偏掉。 */
  flex: 0 1 auto;
  min-width: 0;
  /* 顶对齐，不能被父行的 align-items: center 居中：
     状态区（.card-state）现在住在本行里，它是本行最高的一项（常态 21.8px，
     两枚徽章换行时 44.9px）。若让 .name 跟着居中，它就落到这一行的垂直中点
     —— 勾选框（.pick 20px，随 .card-head 的 flex-start 贴顶）与账号名的中线
     会拉开，两行徽章时实测偏 12.4px，看起来像勾选框脱离了账号名。
     顶对齐后 .name 的 20px 盒与 .pick 的 20px 盒同顶，中线差回到 0，
     与状态区移入之前的表现完全一致。 */
  align-self: flex-start;
  font-size: 14.5px;
  font-weight: 650;
  letter-spacing: -.1px;
  line-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 注：这里原有一条「.who-name .badge」的兜底（防止版本徽章被 flex 压缩），
   版本徽章移入 .card-state 后 who-name 里不再有徽章，故随之删除。
   现在 .card-state 自己也住进了 .who-name，徽章在 DOM 上又成了它的后代 ——
   但那条兜底仍然不需要恢复：徽章的抗压缩由 .card-state 这一层负责
   （flex: 0 0 auto 不参与收缩 + wrap 兜底 + 自身的 max-width），
   而 .who-name 里真正需要收缩的只有账号名，多写一条宽泛的 .badge 规则
   反而会和 .card-state 的换行策略打架。 */

.who-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
  color: var(--text-3);
  font-size: 11px;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
}

/* 明细行的三项（额度类型 · 有效期 · 代理）挤不进一行时怎么收场。
   原来只有容器上的 overflow: hidden —— 超出部分被硬裁，末尾半个字突然消失，
   既不提示「还有内容」，也看不出是数据缺失还是排版截断。

   这一行现在是通栏的：状态区已移入名字行（见 .card-state），.who-meta 的可用宽度
   不再被卡片右缘那一列扣掉 119.5–159.4px —— 改动前 353px 卡里只有 143.6–183.5px，
   代理名（「代理 Clash 混合端口 7890」实测 124.7px）在徽章左边的空白处就被迫省略，
   而卡片右下方看着还有一大片空；现在同一张卡里它宽 303px，常态组合整条放得下。
   下面的收缩策略仍然保留 —— 通栏只是把「什么时候收」推后，代理名本身长度不可控，
   极端窄卡（如轨道收到 300px，明细行仅 250px）下照样会越线。

   改法是让**可预期的长项**自己收，其余项保持原宽：
   代理名是用户在设置里自由填的（可能是一长串 Clash 节点名），长度不可控，
   所以把收缩与省略号落在它身上；额度类型只有「个人 / 旗舰 / 企业」两字、
   有效期是「30 天后过期」这类定长文案，宽度可控，不需要参与收缩
   （收缩它们会让定长字段平白变短，读起来更费劲）。

   为什么规则必须落在 flex 子项上：.who-meta 是 flex 容器，flex 子项的
   text-overflow 只对它自己盒内的文本生效；写在容器上时容器既不裁子项、也无法
   给子项加省略号（容器上的 overflow: hidden 只会把超出的子项整体切掉）。
   子项还要 min-width: 0 —— flex 项默认 min-width: auto 会以「内容最小宽度」为底线，
   nowrap 下这个底线就是整串文字，省略号永远没机会出现。

   末项兜底（> span:last-child）：没配代理时最后一项是有效期，同样可能被挤到，
   于是把「可收缩」的角色交给当前排在最后的那一项 —— 有代理时它命中 .proxy、
   与上面的规则重合，没有时兜住有效期。前面的项（含 .sep 分隔点）一律 flex: 0 0 auto，
   不允许被压窄。

   容器上原有的 overflow: hidden 保留：子项各自收好之后它已裁不到内容，
   但作为最后一道保险仍然留着（将来若有新的明细项忘了加收缩规则，宁可裁掉也不要
   撑破卡片 —— .who-meta 的父链 .who / .card-head 都写了 min-width: 0，
   一旦这里溢出，账号名那一行也会被连带推歪）。 */
.who-meta > span { flex: 0 0 auto; }

.who-meta .proxy,
.who-meta > span:last-child {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.who-meta .sep { opacity: .5; }
.who-meta .proxy { color: var(--info); }

/* ─── 状态区：名字行末尾的一行「版本 + 状态」 ───
   它现在是「名字行」.who-name 里的末项（此前是 .card-head 的独立一列），
   靠 margin-left: auto 贴住名字行右缘 —— 视觉位置没变，仍在卡片右上角，
   但 .card-head 那行只剩「勾选框 + .who」两项，.who 因此独占剩余宽度，
   下面的明细行 .who-meta 拿到通栏宽度可用（本轮改动的目的）。
   为什么必须是 auto margin 而不是让父行 justify-content: flex-end：
   .who-name 里还排着账号名，父行一旦改成 flex-end，账号名也会被推到右边；
   而 auto margin 只把自己的外侧撑开，账号名照旧贴左。
   （.card-state 自己的 justify-content: flex-end 管的是它内部两枚徽章
   在换行后如何贴右缘，与它在父行里的位置是两回事。）

   版本徽章（国内版 / 国际版）与状态徽章（正常 / 限流 / 已禁用…）合起来回答的是
   同一个问题 ——「这是什么账号、现在能不能用」，所以并排收在卡片右缘，
   而不是一枚挂在账号名后面、另一枚贴在右下角。

   横排（row）而不是原来的竖排：这两枚本就是一次扫读里的两段信息，
   竖排会让状态区高度翻倍，在「正常」这种只占一行的常态下平白多出半行空白。
   justify-content 取 flex-end —— wrap 兜底触发换行时，第二行也要贴着右缘，
   否则会左对齐、与卡片右侧的视觉基线断开。
   align-items: center 负责版本徽章与状态徽章的高度对齐：前者的类目是 .badge
   （min-height 21px + 1px 上下内边距），后者是 .badge.tag（min-height 19px），
   两者天然差约 2.8px；居中后视觉中线重合即可，不必去改徽章自身的形制。
   顺带地，这个 center 也让状态区与账号名在同一行里中线对齐（见下面 max-width 一节）。

   flex-wrap: wrap 是并排后的兜底（以下数字均为真实 Chromium 实测）：
   常态两枚「国际版 + 正常」110.5px，在 353px 卡的名字行（实测 303px）里只占 36%，
   离 46% 那条线很远；但窄卡片（如轨道收到 300px，名字行仅 250px，
   46% 即 115px）遇上「国际版 + 限流 +2」（实测 127.3px）就已经越线 ——
   实测它在该宽度下 max-width 生效、状态区变成 115x44.86 的两行，两枚徽章都完整可读。
   此时宁可叠成两行，也不能让 max-width 压缩徽章：被裁掉的正是这一区要读的那几个字，
   两行相比「从来看不全」是划算的。两行间距由上面的 4px 行间距给出。

   max-width 仍取 46%，口径从 .card-head 换成了 .who-name：
   百分比对 flex 子项而言解析的是「父 flex 容器的内容盒」，
   改动前父容器是 .card-head（353px 卡的内容盒 327px → 上限 150px），
   现在父容器是 .who-name（同一张卡里 303px → 上限 139.4px）。
   两条线相差约 11px，而这一区的实际用宽由内容决定（常态仅 110.5px），
   所以 46% 在新口径下依然不构成挤压 —— 实测 353/340px 卡里
   「国际版 + 限流 +2」（127.3px）仍是单行、两枚都未被裁，账号名还留着 163–175px；
   仅 300px 卡（上限 115px）会按设计叠行。
   结论：数值不动，只把它现在相对谁计算写清楚：
     · 353px 卡：上限 139.4px，两枚常态徽章 110.5px 只占 79%，账号名还剩 174.6px；
     · 340px 卡：上限 133.4px，常态两枚装得下，账号名仍保 162.7px（限流 +2 时）；
     · 300px 卡：上限 115px，常态两枚（110.5px）刚好单行，越线则按 wrap 叠行。
   这条线的语义没变，仍是「状态区最多能占多宽、剩余全给账号名」的分界。
   抬上限会直接吃掉账号名的宽度，让本就长的邮箱更早出现省略号；
   何况越线时已有换行兜底，不需要靠放宽上限来腾地方。 */
.card-state {
  flex: 0 0 auto;
  /* 名字行里的末项，靠 auto margin 贴右缘（父行不能改成 flex-end，
     否则账号名也会被推到右边去） */
  margin-left: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  /* 行间距沿用原竖排的 4px；列间距 5px 与 .who-meta、徽章内圆点同一档 */
  gap: 4px 5px;
  max-width: 46%;
}

.card-state .badge { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* 「正常」是绝大多数，用语义色三件套做成一枚安静的淡底绿徽章：
   底色与描边都取 soft/bd 档，强度落在「有存在感但不抢眼」之间；
   429 / 代理异常继续用暖色与红色徽章，一眼跳出来 ——
   这一区要回答的是「哪个账号有问题」，而不是「哪些账号正常」。 */
.card-state .badge.tag.ok {
  gap: 5px;
  background: var(--ok-soft);
  border-color: var(--ok-bd);
  color: var(--ok);
  font-weight: 500;
}

/* 徽章前的状态圆点：颜色跟随徽章文字色，两套主题下都不必单独指定。
   「正常」与「限流」共用这一段 —— 两枚都是「账号当下的可用性」这类可自愈的状态，
   圆点让它们在扫读时与文字标签区分开；已禁用 / 代理异常（.bad）语义是故障、
   要的是更强的告警形制，不需要这层区分，故不纳入。
   圆点与文字的间距来自 components.css 的 .badge { gap: 5px }：
   伪元素同样是 flex 项，gap 一并作用于它，两类徽章自动一致，无需在此重复声明。 */
.card-state .badge.tag.ok::before,
.card-state .badge.tag.warn::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: var(--r-pill);
  background: currentColor;
}

/* 禁用账号的徽章统一退成中性档：保留淡底 + 描边的徽章形制，
   只把语义色换成灰阶，避免已经停用的账号还在整片卡片里发红抢注意力。

   注意这条规则现在也会命中版本徽章 —— 版本徽章从 who-name 移入 card-state 后
   就落进了这里的选择器范围（更早之前它在 who-name 里，不受影响）。
   本轮 card-state 整体搬进 who-name，选择器走的是类名不受 DOM 位置影响，
   命中情况与之前完全一致，无需改动。
   这是有意保留的：整张禁用卡从账号名到状态区一致压灰，读起来才是一块「已停用」
   的整体；要单独放过版本徽章，把选择器收窄成 .card-state .badge.tag 即可。 */
.acct-card.disabled .card-state .badge {
  background: var(--surface-3);
  border-color: var(--border);
  color: var(--text-3);
  font-weight: 500;
}

/* ─── ② 异常提示条 ───
   状态徽章只说「是什么」，这一行补「怎么办」。
   只在异常时渲染，正常卡片不占这行高度。 */
.card-note {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 7px 10px;
  border-radius: var(--r-md);
  font-size: 11px;
  line-height: 1.5;
}

.card-note .ico { flex: 0 0 auto; }
.card-note.warn { border: 1px solid var(--warn-bd); background: var(--warn-soft); color: var(--warn); }
.card-note.bad { border: 1px solid var(--danger-bd); background: var(--danger-soft); color: var(--danger); }

/* ─── ③ 底部：转发顺序 + 操作 ─── */
.card-foot {
  /* 定位祖先：⋯ 菜单挂在它下面，从按钮下方展开 */
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--hairline);
}

.rank {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--text-2);
}

.rank .p { color: var(--text-3); font-weight: 500; }

.card-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  /* 不允许折行：按钮换行会把卡片撑高，破坏「一张卡一个账号」的扫读节奏 */
  flex-wrap: nowrap;
  min-width: 0;
}

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

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

/* ↑/↓ 拼成一组 */
.order-btns { display: inline-flex; flex: 0 0 auto; }

.order-btns button {
  width: 24px;
  padding: 0;
  border-radius: 0;
  color: var(--text-2);
  font-size: 10.5px;
  line-height: 1;
}

.order-btns button:first-child { border-radius: var(--r-sm) 0 0 var(--r-sm); }
.order-btns button:last-child { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.order-btns button + button { margin-left: -1px; }
.order-btns button:hover:not(:disabled) { position: relative; z-index: 1; }
.order-btns button:disabled { opacity: .3; }

/* ⋯ 更多菜单：点击才插入 DOM。绝对定位相对 .card-foot（见上面的 position: relative），
   于是它从按钮下方展开，并随卡片一起滚动，不会浮在别的卡上。

   宽度取整后 122px（原 152px 的 80%，用户要求「窄一点」）。
   这里只给 min-width，不写死 width —— 绝对定位 + 只锚 right 时宽度走 shrink-to-fit，
   内容更长时会被自动撑开，不会把文字挤出去；基类 button 带 white-space: nowrap，
   文字本身也不会折行（下面核算证明当前宽度下不会触发任何收缩）。
   宽度核算（12px 字号；菜单实际宽度 = 最长项的内容盒 + 容器内边距 5×2 + 边框 1×2）：
     「刷新 Token」（最长项）：中文 2×12 = 24 + 空格 ≈ 3 + 西文 Token ≈ 34 → 文字 ≈ 61px
       加按钮左右内边距 10×2 = 20 → 内容盒 ≈ 81px
       加容器内边距 10 与边框 2 → 菜单实际占 ≈ 93px
     余量 122 − 93 = 29px，既不换行也不溢出，所以取整后的 122px 直接可用，不必上调。
     其余各项更短：「删除账号」4 字 → 48 + 20 + 12 ≈ 80px；
     「签到 / 启用 / 禁用」2 字 → 24 + 20 + 12 ≈ 56px。 */
.more-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 4;
  min-width: 122px;
  padding: 5px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  background: var(--surface-raised);
  box-shadow: var(--shadow-3);
}

/* 翻转态：改成从按钮上方弹出。
   列表底部那几张卡片下面没有空间，菜单会超出 .acct-scroll 的可视区被裁掉，
   用户既看不到也点不到。由 JS（accounts-view.js 的 toggleMoreMenu）量出
   下方空间不足时加上这个类，只换 top/bottom 两个方向值 ——
   依旧绝对定位跟着 .card-foot，「随卡片滚动」的既有特性不变。 */
.more-menu.flip {
  top: auto;
  bottom: calc(100% + 4px);
}

.more-menu button {
  display: flex;
  align-items: center;
  width: 100%;
  height: auto;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  box-shadow: none;
  color: var(--text-2);
  font-size: 12px;
  text-align: left;
}

.more-menu button:hover { background: var(--surface-3); border-color: transparent; color: var(--text); }
.more-menu button.danger { color: var(--danger); }
.more-menu button.danger:hover { background: var(--danger-soft); }
.more-menu hr { margin: 4px 6px; border: 0; border-top: 1px solid var(--hairline); }

/* ─── 卡片内的明细面板（积分 / 签到） ───
   追加在卡片末尾（卡片本身是 flex 列），随卡片一起增高，
   同行其他卡片不受影响。 */
.row-panels { display: contents; }

.acct-card .row-panel {
  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;
  /* 横向排列 + 换行：面板内容本来就是「总剩余 / 套餐 / 奖励」这类短字段，
     排成一行最紧凑（353px 卡片里约两行）。改成纵向的话每个字段独占一行，
     面板高度从 ~46px 涨到 ~130px，卡片被撑得很空。 */
  display: flex;
  align-items: baseline;
  gap: 4px 12px;
  flex-wrap: wrap;
  position: relative;
}

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

/* 「收起」按钮固定到右上角。
   面板是 flex 容器，让按钮跟在内容后面自然排布的话，
   它会被当成最后一个 flex 项、挤在文字后面（窄卡片里还会换行独占一行）。 */
.acct-card .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-card .row-panel .panel-close:hover { background: var(--surface-3); border-color: transparent; color: var(--text); }

.acct-card .row-panel-head { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }

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

.acct-card .row-panel .panel-label { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.acct-card .row-panel .row { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }

/* ─── 批量栏 ───
   夹在工具条与列表之间的一条状态带：通栏铺满面板，四角交给面板自身的圆角裁切。
   底色与面板同色（--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;
}

/* ─── 页脚 ───
   与批量栏同一处理：同底色 + 一条 --hairline 分隔线，不再自成一条灰带。 */
.table-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-top: 1px solid var(--hairline);
  background: var(--surface);
  color: var(--text-3);
  font-size: 11px;
  flex-wrap: wrap;
}

.table-foot .spacer { flex: 1 1 auto; }

/* ─── 卡片过窄时收起「设为首选」 ───
   卡片宽度由网格固定在 340–353px，与窗口宽度无关，
   所以这里必须按卡片自身宽度判断（容器查询），不能用 media query：
   窗口 900px 时窗口很窄、卡片却仍是 353px 宽，按窗口收会白收一通。

   阈值按**内容盒**算：container-type: inline-size 量的是内容盒
   （353 − 左右内边距 24 = 329px）。底部操作区在队首卡上需要 328px
   （P 值 41 + 间距 7 + 按钮组 280），所以 325px 以下才需要收起。
   「设为首选」在「⋯」菜单与账号设置里都能完成，收起不影响可达性。 */
@container card (max-width: 325px) {
  .card-actions button.wide { display: none; }
}