/* ==========================================================================
   达播工作台 — table.css
   表格 / 单元格 / 骨架屏 / 空态·错误态 / 分页
   ========================================================================== */

/* ---- 表格 ---- */
.table-wrap {
  overflow-x: auto;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

/* 首 / 末列左右留白对齐卡片内的工具栏（2026-09-14 乐哥反馈「列表文字紧贴边框」）
   ⚠️ 数值依据（真实渲染实测）：`.table-toolbar` 水平 padding = --space-5(20px)，
      而 `.table` 单元格 = --space-3(12px) → **表格首列文字比工具栏标题左移 8px**，
      视觉上就像贴住卡片左边框（实测：工具栏文字距卡片左 21px、表格首列文字仅 13px）。
      这里把首/末列补齐到同一 20px，让「工具栏标题 ↔ 表格首列」「表格末列 ↔ 工具栏右侧」对齐。

   ⚠️ 2026-09-14 二次修正 —— 排除条件从 `.table--sub` 换成**真实结构判据**：
      上一版写 `.table:not(.table--sub)`，本意是排除"嵌在父表单元格里的子表"，
      但 `table--sub` 在本项目里**语义已漂移** —— 它既用在真嵌套子表上，也用在
      **面板里的顶层表**上（结算明细的「本期佣金构成」「业绩构成」两张就是）。
      结果这两张顶层表被误排除、首末列仍是 12px，而同层级的提成明细是 20px
      → 乐哥看到的「达人结算二级页和提成总览不一样」，主因就是这 8px。
      （实测：全站 18 张顶层表里只有结算明细那 2 张漏网；真嵌套子表实际 **0 张**。）
      改用结构判断：**在 `td` 里的**才是子表（跟随父表列宽，不能加内边距），
      其余顶层表一律补 20px。`:where()` 不参与优先级计算，本条权重维持不变。
   · 只改 padding 不改 width：`table-layout: fixed` 下宽度含 padding，不会撑破列宽预算。 */
.table:not(:where(td .table)) > thead > tr > th:first-child,
.table:not(:where(td .table)) > tbody > tr > td:first-child {
  padding-left: var(--space-5);
}
.table:not(:where(td .table)) > thead > tr > th:last-child,
.table:not(:where(td .table)) > tbody > tr > td:last-child {
  padding-right: var(--space-5);
}

.table thead th {
  background: var(--table-header-bg);
  color: var(--table-header-fg);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-xs);
  letter-spacing: 0.01em;
  /* 全列居中（乐哥 2026-09-14 定稿，方案B）：原为左对齐。
     配套改动见本文件「全列居中」区块（.is-num 同步改居中 + flex 子容器补偿）。 */
  text-align: center;
  height: 44px;
  padding: 0 var(--space-3);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}

.table thead th.is-num {
  /* 表头**保持居中**（乐哥 2026-09-15：「其他所有的位置都不变」）。
     即：正文数值靠右、表头居中 —— 这是"只动数字、别的一律不动"的忠实执行。
     若要改成表头也靠右（整列一条竖轴），把这里改成 right 即可，只此一处。 */
  text-align: center;
}

/* 表头排序（库存列表等）：所有可排列表头常驻箭头指示，hover/激活高亮 */
.table thead th.sortable {
  cursor: pointer;
  user-select: none;
}
.table thead th.sortable:hover {
  color: var(--color-accent-text);
}
.table thead th.sortable:hover .th-sort-ic {
  color: var(--color-accent-text);
}
.table thead th.is-sorted {
  color: var(--color-accent-text);
}
.table thead th .th-sort-ic {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  margin-left: 4px;
  color: var(--color-muted);
  line-height: 0;
}
.table thead th .th-sort-ic svg {
  display: block;
}
.table thead th .th-sort-ic svg + svg {
  margin-top: -4px;
}
.table thead th .th-sort-ic--on {
  color: var(--color-accent-text);
}

.table tbody td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--table-divider);
  color: var(--color-fg);
  vertical-align: middle;
}

.table tbody tr:last-child td {
  border-bottom: none;
}

.table tbody tr {
  transition: background-color var(--motion-fast) var(--motion-ease-standard);
}

.table tbody tr:hover {
  background: var(--table-row-hover);
}

/* ==========================================================================
   隔行底色（斑马纹）· **全站默认生效**（乐哥 2026-09-15）
   --------------------------------------------------------------------------
   改前：只有「售后分析」模块的 8 张表显式加了 `.table--zebra` → 全站 48 张表里
        40 张没有斑马纹，同一套行数据的读法在不同页面不一致。
   改后：**在统一层根治**（不逐个页面补类名，否则以后新表还得记得加）——
        所有 `.table` 默认带斑马纹，`.table--zebra` 因此变成冗余（保留不删，不影响）。

   ⚠️⚠️ 关键设计：**必须把斑马纹的特异性压到最低**，否则会盖掉页面自己的行样式。
        用 `:where()` 把伪类包裹起来 —— `:where()` 内选择器**特异性记 0**：
          `.table tbody tr:where(:nth-child(even))`  →  (0,1,2)
        而各页面/子表的行规则普遍是 (0,2,2) 及以上，**自动胜出**，例如：
          · `.table tbody tr:hover`                     (0,2,2)  ← hover 仍是最高优先
          · `.an-pnl-table tbody tr.an-pnl-total`       (0,2,2)  ← 达人经营合计行保色
          · `.table--sub tbody tr.so-subtotal`          (0,2,2)  ← 结算明细合计行保色
          · `.af-audit__main` / `.af-bd__total`         (0,2,2)  ← 售后特殊行保色
        ⇒ **不需要维护"特殊行清单"、也不依赖 CSS 加载顺序**。
          这正是不用 `.table--zebra tbody tr:nth-child(even)`（那写法与它们同权重、只能靠顺序分胜负，
          属本项目多次踩过的隐性依赖）的原因。
        （`.table tbody tr.is-sum > td` 本就是给 **td** 设底色的，td 优先级高于 tr，天然不受影响。）

   ⚠️ 展开子表（`.table--sub`）**不加**斑马纹：它嵌在父表的展开行里、通常只有 2~4 行，
      再加纹会与父表行底/展开区底叠成"三层底色"，反而更乱。全站实测 16 张子表。
   ========================================================================== */
.table tbody tr:where(:nth-child(even)) { background: var(--table-row-alt); }
/* 展开子表排除（紧跟上面一行、同为 (0,1,2) 特异性 → 由紧随其后胜出；
   ⚠️ 不要给它提高特异性去压特殊行 —— 子表的 .so-subtotal 等合计行是 (0,2,2)，本就稳赢这条） */
.table--sub tbody tr:where(:nth-child(even)) { background: transparent; }

.table .is-num {
  font-feature-settings: "tnum", "lnum";
  font-variant-numeric: tabular-nums;
  font-weight: var(--font-weight-medium);
}
/* ══ 数值列靠右（乐哥 2026-09-15 定稿：数字靠右，其他位置一律不变）══════════════
   原话：「列表的文字，看下要不要数据，就是数字靠右，其他所有的位置都不变，和之前一样」

   背景：2026-09-14 曾把数字从右改**居中**（与表头共一条中线）。改回右对齐的实测理由：
     金额列居中后，同列里「¥6.9万 / ¥4,816.00 / ¥125.00」位数参差、看不出列边界；
     靠右后末位对齐，对账时逐位可比 —— 那是本系统最高频的用法。

   ⚠️⚠️ 下面这串选择器**不能简化**（这是本次最容易白改的一处）：
     本文件上方「全列居中」区块有一条
        `.table:not(:where(td .table)) > tbody > tr > td { text-align: center; }`
     特异性 (0,1,3)；而原来的 `.table .is-num` 只有 (0,2,0)，**压不过它**。
     ⇒ 只把 `center` 改成 `right` 会**静默不生效**（页面看起来"改了没反应"）。
     故显式写到 `tbody td` 层级拿 (0,2,2)，稳赢 (0,1,3)。
     （`.table--sub` 子表一并覆盖：它嵌在 td 里，会**继承**父 td 的居中，
       不显式声明就跟着居中 —— 全站 16 张子表。）

   ⚠️ 表头**保持居中不动** —— 乐哥明确「其他所有的位置都不变」。
      若日后想改成"表头也跟着靠右"（整列同一竖轴、更整齐），
      只需给下面 `thead th.is-num` 那块也加 `right`，一处即可切换。 */
.table tbody td.is-num,
.table tfoot td.is-num,
.table--sub tbody td.is-num,
.table--sub tfoot td.is-num {
  text-align: right;
}

/* ══ 表格列对齐规范（乐哥 2026-09-14 定稿）═════════════════════════════════════
   两条规则，一句话可背：
     ① **长文本列靠左** —— 货品名、达人名、套餐名、备注这种"长短不一的一句话"
     ② **其他全部居中** —— 表头 + 数字列 + 短文本列（状态/类型/编号/时间/人员/操作…）
   为什么这样分（可验证的理由，不是审美）：
     · 长文本靠左：长短不一的文本若居中，每行起点参差、扫读更难；左对齐有固定起始线。
     · 其余居中：这些列内容短且长度接近，居中后两侧留白均等；表头也居中 →
       表头与正文共用同一条中线，整列成一条竖轴 —— 比"贴左"和"贴右"都整齐。

   ▸ 实现分工（**默认居中 + 例外类**，这样新增列不用做任何事就是对的）：
     · 默认居中写在 `th` / `td` 层（下面 .table tbody td / tfoot td / thead th）
     · "长文本列"由 JS 在渲染后打 `.col-align-left`（判定逻辑见 app.js 的 `fixColAlign()`）
       为什么用 JS 判定而不是 CSS：CSS 无法知道某列内容是"一句话"还是"一个词"，
       只能靠**实测内容**判定；用 JS 判定还能自动覆盖将来新增的页面，不用逐页配。
   ▸ 与上一版（2026-09-14 上午「文字左 + 数字右」）的差异：
     数字从**右**改**居中**、表头从**左**改**居中**、短文本列从**左**改**居中**；
     仅"长文本列"维持靠左。
   ▸ 2026-09-15 微调（乐哥定稿）：**数字改回靠右**，其余（表头、文本列）一律不动。
     即最终形态 = 长文本左 / 其余居中 / **数值列靠右**。
   ⚠️ 回退方式：删掉 `.col-align-left` 的规则即可回到"全居中"；
      再把 `.is-num`/`.num` 那两块改回 `center` 即回到 9-14 版本。 */
.table:not(:where(td .table)) > thead > tr > th,
.table:not(:where(td .table)) > tbody > tr > td,
.table:not(:where(td .table)) > tfoot > tr > td {
  text-align: center;
}
/* 长文本列（JS 判定后打类）→ 靠左。子元素（.cell-main/.cell-sub 等）自动继承。 */
.table .col-align-left,
.table--sub .col-align-left {
  text-align: left;
}

/* ② 数字靠右：`.num` 是同义的另一种写法（base.css 里定义的等宽数字类），
   表格内必须与 `.is-num` **同规则**，否则会出现"同一列有的格靠右、有的格居中"
   （实测提成总览有 2 处只写了 `.num`）。
   特异性要求与 `.is-num` 完全相同，理由见上方那块的注释。 */
.table tbody td.num,
.table tfoot td.num,
.table--sub tbody td.num,
.table--sub tfoot td.num {
  text-align: right;
}

/* 盈亏正负颜色：盈利=红，亏损=绿（中式股市惯例，涨红跌绿） */
/* ⚠️ 盈亏正负色（**全站约定：盈利=红、亏损=绿**，国内红涨绿跌习惯）
   特异性必须 ≥ 0,2,1 —— 因为上面有 `.table tbody td { color: var(--color-fg) }`（0,2,1）。
   2026-09-13 修正：原来写成单类 `.num-pos`（0,1,0）**被它压过**，
   导致**全站表格里的盈亏正负色从来没生效过**（KPI 卡里的生效，表格里的不生效 —— 两处表现不一致）。
   故加上 `.table tbody td` 前缀，并同时覆盖 `.table--sub`。 */
.table tbody td.num-pos,
.table--sub tbody td.num-pos,
.num-pos { color: var(--color-danger); }
.table tbody td.num-neg,
.table--sub tbody td.num-neg,
.num-neg { color: var(--color-success); }

.cell-sub {
  display: block;
  margin-top: 2px;
  font-size: var(--font-size-xs);
  color: var(--color-muted);
}

/* ⚠️ 兜底：`td` 上误用 `.cell-sub`（2026-09-15 乐哥报「说明和分摊没有横线和斑马纹」，第 4 次踩到）
   ----------------------------------------------------------------------------
   `.cell-sub` 是「**格内第二行小字**」用的类，带 `display:block`。挂到 **td 自身**时，
   该格会**脱离表格单元格渲染** —— 浏览器为它包一层匿名单元格，后果：
     · 行高按内容算、不再撑满整行 → 横线（td 的 border-bottom）画在内容框底边，
       视觉上"断"在行的中间，看起来就是**没有横线**
     · 斑马纹设在 tr 上，而匿名框与 td 自身背景都透明 → 斑马纹在**这一列断开**
   项目此前已在 schedule-detail ×2 / fan-experience 踩过并逐个改成 `<span class="cell-sub">`；
   本次 profit-ledger 逐笔明细与 profit-settlement 校准弹窗又各出现一次，故加此兜底防复发。
   **正确写法**：`<td><span class="cell-sub">…</span></td>`（小字类只包内容，不挂单元格）。
   ⚠️ 只覆盖 display，font-size / color 仍沿用上方 `.cell-sub`（保留"小字"本意）。 */
.table td.cell-sub,
.table--sub td.cell-sub {
  display: table-cell;
}

/* 单元格内多信息 */
.cell-main {
  font-weight: var(--font-weight-medium);
  color: var(--color-fg);
}

/* 表格内头像 + 文本 */
.cell-person {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

/* 人员列：「名字 + 岗位」同一行（2026-09-14 乐哥：「岗位和名字一行，不要分行」）
   ----------------------------------------------------------------------------
   改前：`<div>名字</div><div>岗位徽章</div>` 上下两行 → 行高被撑起来、扫读时要分两段看。
   改后：`.cell-person__line` 一个 flex 行内放名字与岗位徽章，超宽时整行换行（不会把名字截断）。
   ⚠️ 必须把 `.cm-pitem__roles` 的 `margin-top: 3px` 归零 —— 那个边距是给左栏人员列表
      （上下堆叠布局）用的，在表格行内会让徽章比文字低 3px、看着没对齐。 */
.cell-person__body {
  flex: 1;
  min-width: 0;
}
.cell-person__line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.cell-person__line .cm-pitem__roles {
  margin-top: 0;
}

/* 费用列表人员列：名字完整展示、不换行、不截断（区别于达人列表的省略号） */
.cell-person--full .cell-person__name {
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}

.cell-person__avatar {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-pill);
  background: var(--color-primary-100);
  color: var(--color-accent-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  flex-shrink: 0;
  overflow: hidden;
}

.cell-person__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cell-person__meta {
  min-width: 0;
}

.cell-person__name {
  font-weight: var(--font-weight-medium);
  color: var(--color-fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 达人姓名下的平台/机构标签行 */
.cell-person__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 3px;
}

/* 达人姓名下的所属商务小字 */
.cell-person__sub {
  margin-top: 2px;
  font-size: var(--font-size-xs);
  color: var(--color-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 达人一行展示（无头像）：姓名 + 平台/机构/类型标签 + 所属商务，默认单行，空间不足自动换行（不裁切） */
.cell-person-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  min-width: 0;
}
.cell-person-row__name {
  font-weight: var(--font-weight-medium);
  color: var(--color-fg);
  white-space: nowrap;
}
.cell-person-row__bd {
  font-size: var(--font-size-xs);
  color: var(--color-muted);
  white-space: nowrap;
}

/* ⚠️ 带视图 tab 的卡片：顶部补回呼吸空间（2026-09-14 实测修正）
   ----------------------------------------------------------------------------
   合并成一张卡时，为消除"卡外空容器"的灰缝，卡片被设了 `margin-top: -16px`。
   tab 行搬进卡内顶部后会被这个负 margin 顶到筛选行下面（实测重叠 -16px）。
   这里用 **padding-top** 补回来并多留 12px 呼吸（16 抵消 + 12 = 28px）。
   ⚠️ 必须用 padding：合并后卡片 `border-top: 0`，子元素的 margin-top 会穿透到卡片外
      （margin collapse），改不成效果。 */
.toolbar--join-target.card--has-tabs { padding-top: 28px; }

/* ── 表格「视图 tab」：下划线式（2026-09-14 乐哥：「tab 选择和其他工具栏混在一起了」）
   ════════════════════════════════════════════════════════════════════════════
   背景：表格视图切换（全部 88 / 待合作 47 / 已结束 24…）原本用的是**分段按钮**样式
     （`.pill-filter` / `.seg`：白底带框、选中实底块）。
     把它和「搜索框 / 下拉筛选」并到一排后，乐哥指出问题：
       「tab 选择和其他工具栏**混在一起**了」—— 对，因为两者都是"带框的控件"，
       读者分不清哪个是"切换视图"、哪个是"筛选条件"。

   解法：把视图切换改成**下划线式 tab**，并让它**独立成一行、紧贴表格**。
     · 视觉上与"带框下拉"天然区分（一排文字 + 底部指示条 vs 带边框的下拉）
     · 位置紧贴表格 = 语义上属"表格的一部分"（它切换的就是表格显示什么）
     · **完全复用**项目已有的 `.tabs` / `.tab` 语言（pages-influencer.css:321）：
       40px 高、24px 项间距、2px 主色指示条、未选中用 --color-muted
       → 不新造视觉语言，与订单明细页的「直播业绩/私域业绩/订单明细」同一套观感

   ⚠️ 覆盖的是 `.pill-filter__item` / `.seg__btn` 两个内部类（分段控件两套类名并存，
      本项目"同一件事两套名字"的老问题）—— 两个都写，否则有一半页面改不动。
   ⚠️ 必须把 .seg 外容器的白底/边框/内边距也清掉，否则下划线 tab 会被套在白色胶囊里。 */
.table-tabs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;                  /* 极窄屏时工具组可折行，不挤压 TAB */
  gap: var(--space-6);              /* 与 .tabs 一致的 24px 项间距 */
  margin: 0;
  padding: 0 var(--space-5);        /* 与表格 / .table-toolbar 同左边界（20px） */
  border: 0;
  border-bottom: 1px solid var(--color-border-soft);   /* 与 .tabs 相同的基线 */
  border-radius: 0;
  background: transparent;
  /* ⚠️ 必须是 overflow: visible，**不能**用 overflow-x: auto（2026-09-14 实测修正）
     原因：CSS 规范规定「当一个轴不是 visible 时，另一个轴的 visible 会计算为 auto」，
     所以 `overflow-x: auto` 会让 `overflow-y` 也变成 auto；
     而选中态的下划线用了 `bottom: -1px`（为了压住容器那 1px 底边框），
     内容高度 41px > 容器 40px → **纵向溢出 1px → 右侧出现一条纵向滚动条**
     （乐哥截图里红框圈出的那条竖杠）。
     现在行内用 flex-wrap 折行，不需要横向滚动，直接 visible 最干净。 */
  overflow: visible;
}

/* ── TAB 行内的「表格工具」（多选 / 共N条 / 每页）────────────────────────────
   乐哥 2026-09-14：「多选 / 共88位达人 / 20条每页 这个是不是也应该和
                     全部88 待合作47 … 同一行，然后相同的尺寸」
   → 对。它们和 TAB 同属"表格自己的事"（视图切换 + 批量操作 + 分页统计），
     都是表格头部工具条的一部分；而"搜索/下拉"才是页面级筛选，留在第 1 排。
   本段负责：靠右 + **尺寸统一**（这是乐哥特别强调的）。

   ⚠️ 为什么要统一尺寸：搬过来之前是三套尺寸混排 ——
      多选按钮 30px、共N条 18px（字号还小一号，12px）、每页下拉 28px，
      而 TAB 是 40px / 14px。三种高度并排会显得"东倒西歪"。
      现在：字号一律 14px（--font-size-sm），控件高度一律 30px。
   ⚠️ TAB 保持 40px 高不跟着改 30px：它的 40px 是行高 + 下划线基线（同 .tab），
      工具是"控件"，两者高度不必相同，靠 align-items:center 垂直居中即视觉齐平。 */
.table-tabs > .table-toolbar__right {
  margin-left: auto;                /* 推到最右，与 TAB 分列两端 */
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: none;
}
.table-tabs > .table-toolbar__right .btn,
.table-tabs > .table-toolbar__right .select {
  /* 34px：与筛选行的控件（`.toolbar--list` 那组）**统一为同一个高度**。
     ⚠️ 原来是 30px，但那样一页里会出现三种高度：
        筛选行控件 34px、TAB 行工具 30px、TAB 项 40px —— 看着仍然"不齐"。
        统一规格：**有框控件一律 34px**、**TAB 项一律 40px**（它是文字+下划线、无框，属"标签"）。
        这样全站只有两个数字，好记也好维护。 */
  height: 34px;
  min-height: 34px;
  font-size: var(--font-size-sm);
}
.table-tabs > .table-toolbar__right .table-toolbar__total {
  font-size: var(--font-size-sm);   /* 12px → 14px，与同行 TAB 字号一致 */
  color: var(--color-fg-2);
  white-space: nowrap;
}
.table-tabs .pill-filter__item,
.table-tabs .seg__btn {
  position: relative;
  height: 44px;                     /* 与 .tab 同高（2026-09-18：40 → 44，配合 16px 字号） */
  padding: 0 2px;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--color-muted);        /* 未选中（同 .tab） */
  /* ⚠️ 2026-09-18 乐哥：「字号大一点点」→ 14 → 16px（--font-size-lg）。
     ⚠️ 必须改**这里**，不能只改 `.tab` —— 本规则选择器是 `.table-tabs .seg__btn`（0,2,0），
        特异性**高于** `.tab`（0,1,0），会把 `.tab` 的 font-size 整个盖掉。
        实测踩过：只改 `.tab` → 13 个页面探测出来全是 14px，一度以为 CSS 没生效。
        （这类"改了一处被另一处盖掉"的坑，本项目已栽多次，见技能
          dabotai-ui-consistency-fix「语义色被更具体选择器盖过」一节。） */
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  transition: color var(--motion-fast) var(--motion-ease-standard);
}
.table-tabs .pill-filter__item:hover,
.table-tabs .seg__btn:hover { color: var(--color-accent-text); }
/* 选中：主色文字 + 2px 底部指示条（同 .tab::after 的观感） */
.table-tabs .pill-filter__item.is-active,
.table-tabs .seg__btn.is-active {
  background: transparent;
  color: var(--color-accent-text);
  font-weight: var(--font-weight-semibold);
}
.table-tabs .pill-filter__item.is-active::after,
.table-tabs .seg__btn.is-active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  border-radius: 1px;
  background: var(--color-accent);
}

/* ── 嵌在「页面级工具栏」里的 TAB 条（人员成本 / 兼职助播）────────────────────
   它们的 seg 直接放在 `.toolbar` 内（不在 .table-toolbar 里），由 JS 加了
   `.table-tabs` 复用下划线样式，并移到工具栏最前。
   本段让它**独占一行**，并去掉重复缩进。

   ⚠️ 行序：**TAB 在上、筛选在下**（2026-09-18 乐哥改版，参照微信小店）。
      这与 2026-09-14 那一版相反 —— 当时定的是"筛选在上、视图切换在下"，
      乐哥 2026-09-18 看到微信小店的形态后改主意：「那个 tab 栏，我看别的系统是
      放在工具栏上面的…我觉得这样更合理」。
      ⇒ 实现方式仍是 `flex-basis: 100%`（独占一行），但**行序由 DOM 顺序决定**：
        JS 改为 `insertBefore(seg, tb.firstChild)`（搬到最前），**不用 CSS order**
        —— order 会让键盘 Tab 焦点顺序与视觉顺序不一致（无障碍问题）。
   ⚠️ 必须清掉左右 padding：`.table-tabs` 自带 20px 左缩进，而父级工具栏**也有** 20px，
      不区分会变成 40px 双重缩进、与其它页面的 TAB 不对齐。 */
.toolbar--has-page-tabs > .table-tabs {
  flex-basis: 100%;
  padding: 0;
  /* TAB 行与下方筛选行的间距（改版后它在上面，需要与筛选拉开一点，读者才分得清两行）
     ⚠️ 与 `.toolbar` 的 `row-gap: var(--space-2)` 叠加 → 实际 8 + 8 = 16px。 */
  margin-bottom: var(--space-2);
}

/* ── 列表页筛选控件：全站统一高度（2026-09-14）────────────────────────────────
   由 app.js 的 fixPageTabs 给「含表格的页面」的工具栏打上 `.toolbar--list`。
   统一为 **34px**：搜索框 / 下拉 / 日期选择器 / 重置按钮 全部同高。

   ⚠️ 为什么需要「跨页统一」而不只是"同一行统一"（乐哥两次反馈逼出来的）：
     ① 第一次：同一行里三种高度（32/42/30px）→ 已修
     ② 第二次：「日期选择控件尺寸和其他的不对」→ 同一行里 44 vs 34 → 已修
     ③ 第三次（本门禁 `probe-toolbar-height.js` 抓出）：**跨页也不一致** ——
        订单业绩 / 业绩总表 的工具栏**本来就在卡内**、不参与合并，
        于是它们的筛选控件仍是 44px，而其它页已是 34px。
     只按"已合并的工具栏"写规则，就会漏掉这类页面。
     → 判据改成「这页有表格」即套用统一高度，跨页才真正一致。

   ⚠️ 覆盖 `.mp__trigger`（日期选择器）时必须用**后代选择器**：
      它的真实层级是 `span.mp-host > div.mp > button.mp__trigger`（是孙子不是儿子），
      写 `.toolbar--list > .mp__trigger` 会一条都匹配不上（实测踩过）。 */
.toolbar--list .select,
.toolbar--list .input,
.toolbar--list .input--search,
.toolbar--list .input--search > .input,
.toolbar--list .mp__trigger,
.toolbar--list .btn {
  height: 34px;
  min-height: 34px;
}

/* ══ 二级明细页：内容区统一为「白底卡片」（2026-09-14 乐哥：「有的有底色，有的没底色，统一下」）
   ══════════════════════════════════════════════════════════════════════════════
   实测三张明细页**三种底色**（逐页采样）：
     · 结算明细     `.st-drill`  → **#F5F6F8**（页面灰底）
     · 提成明细     `.co-expand` → **#FAFBFC**（surface-2）
     · 华大对账明细 `.hs-drill`  → **透明**（露出的其实是页面灰底）
   三种底、三张皮 → 乐哥说"乱七八糟"完全准确。

   根因是**类名复用**：`.st-drill`（pages.css:2507）/`.co-expand`（pages.css:2486）/
     `.hs-drill`（pages.css:3149）本来是**列表页「行内展开面板」**的样式
     （注释都写着"用底色把展开明细与主表分层"），被明细页拿去当"明细区容器"用了
     → 于是各自继承了一身不同的"展开面板皮"。

   ⚠️ 注意 `.hs-drill` 那条：今天早些时候已为它做过一次"去灰底"
      （pages.css:3158 `.detail-drill .hs-drill { background: transparent }`），
      当时的注释写「transparent 露出白卡片」——**但那时并没有白卡片**，
      所以实际露出的是页面灰底，等于只做了一半（灰底没了、卡片也没补上）。
      本次把这一半补完。

   解法：在**明细页容器 `#dt-body`** 作用域内，把三个内容容器统一成白卡
     （与列表页 `.card` 同规格：白底 + 1px 边框 + 12px 圆角）。
     → 全站只剩「灰底页面 + 白卡内容」一种层次，与列表页同构。

   ⚠️ 为什么用 `#dt-body`（ID 选择器）而不是 `.detail-drill`：
      ① `.detail-drill` 只被结算/华大两页使用，**提成明细用的是 `#dt-commission`**，
         用它做作用域会漏掉提成明细；
         而 `#dt-body` 是 detail.js 的 `setBody()` 统一注入点，**三页都经过它**，是可靠判据。
      ② 已有的 `.detail-drill .hs-drill` 规则特异性是 (0,2,0)，
         普通类选择器（如 `.detail-drill > *:not(...)`）压不过它 —— 第一版就这么输了，
         实测 `.hs-drill` 一直保持透明。ID 选择器 (1,0,0) 稳定胜出。
   ⚠️ 必须清掉 `position: sticky`：`.st-drill` 在 ≥1024px 有 sticky
      （pages.css:2526，给展开面板横向滚动钉左用），明细页没有横向滚动容器。 */
#dt-body .st-drill,
#dt-body .hs-drill,
#dt-body .co-expand {
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-top: 1px solid var(--color-border-soft);   /* 覆盖展开面板那条 2px 上边界 */
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  position: static;
}
/* 白卡内的表格不再重复铺底（含已被旧规则设过灰底的 `.hs-drill .table--sub`） */
#dt-body .table-wrap,
#dt-body .hs-drill .table--sub {
  background: transparent;
}

/* ══ 二级明细页的表格：用「正文规格」而不是「子表规格」（2026-09-14）
   ══════════════════════════════════════════════════════════════════════════════
   乐哥：「达人结算里的结算明细，二级页面和其他地方的二级页面表格界面不一样，看下怎么处理」

   实测（12 页普查 · probe-table-density.js）：**全站正文基准 = 14px / 上下内边距 12px**，
     · 主列表页 6 页**全部一致**（达人列表/货品/库存/订单/排期/达人售后）
     · 结算明细 14px ✓ 12px ✓   提成明细 14px ✓ 12px ✓   ← 两者本就合规
     · **华大对账明细 12px ✗ 8px ✗**                       ← 唯一不合规的
   → 所以「不一样」的是**华大对账明细**，不是结算明细（此处先前的判断方向相反，已更正）。

   根因仍是**类名复用**：`.table--sub` 的规格（components.css:1308）本是给
     **「嵌套在主表里的子表」**用的 —— 8px 内边距 + 12px 字号（子表该比主表小一号）。
     华大对账明细把它拿来当**主表**（huada-settlement.js:484/492），于是整表偏小偏紧。

   解法：只在**二级明细页作用域**（`#dt-body`）内，把 `.table--sub` 提回正文规格：
     表格字号 12→14px、**数据行**上下内边距 8→12px。
     ⚠️ **表头完全不动**（字号仍 12px、上下内边距仍 8px）——
        全站表头标准就是「12px 字 + 44px 高」，这是一条独立的标准线。
        第一版顺手给 th 也加了 12px 上下内边距，实测把表头从 **44px 撑到 59px**
        → 被 `probe-table-standard.js` 的 ① 抓出（"表头 59px ≠ 44px"）。
     ⚠️ **副文本（.cell-sub 等）不动**（保持 12px）—— 它们是显式声明，属"主 14 + 副 12"的正常层级。
     ⚠️ 列表页展开区的 `.table--sub` **不受影响** —— 那里它就是子表，8px/12px 是对的。
        这就是限定 `#dt-body` 作用域的原因。 */
#dt-body .table--sub {
  font-size: var(--font-size-sm);
}
/* ⚠️ 必须显式把表头字号钉回 12px：上一条 (1,0,1) 的特异性高于
   `.table--sub th` (0,1,1)，不钉会被一起改成 14px、破坏表头标准。 */
#dt-body .table--sub > thead > tr > th {
  font-size: var(--font-size-xs);
}
/* 只提**数据行**的上下内边距（表头保持原 8px，见上） */
#dt-body .table--sub > tbody > tr > td {
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
  font-size: var(--font-size-sm);
}

/* ── 「轻量形态」：只有单一月份控件的页面（2026-09-14 乐哥选 B 方案）──────────────
   乐哥选 **B（按需）**：「有筛选就套标准工具栏；**只有"月份"这种单一控件的，
   就让它和白卡贴合、控件 34px，不再包一层工具栏**」。

   覆盖：华大对账 / 成本总览（只有月份选择器）、我的提成（月份 + 重置）。
   做法：**不铺白底、不描边** —— 就是内容上方一行轻量控件，
        避免"为了统一而多出一层空壳"（那样反而更乱）。
   ⚠️ 与 `.toolbar--join-card`（铺白底 + 上圆角、与下方卡片拼成一体）是**两种形态**，
      由 JS 按"筛选控件是否只有一个且为月份"自动判定，不手工指定。
   ⚠️ 必须自己带 34px 规则：我的提成页**没有表格**（不满足 `.toolbar--list` 的前置条件），
      不声明的话它的月份选择器仍是 44px（实测跨页不一致）。 */
.toolbar--plain {
  margin: 0 0 var(--space-3);      /* 与下方内容贴合（不是飘着的独立工具栏） */
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.toolbar--plain .select,
.toolbar--plain .input,
.toolbar--plain .mp__trigger,
.toolbar--plain > .input--search > .input,
.toolbar--plain .btn {
  height: 34px;
  min-height: 34px;
}

/* ── 售后页「口径说明行」里的筛选下拉也要 34px（2026-09-14）──────────────────────
   达人售后 / 商品售后 的月份与店铺下拉长在 `.an-flex-between`（口径说明行）里，
   用的是原生 select + `.input` 类，**不在任何 `.toolbar` 内**，
   所以 `.toolbar--list` 那条规则覆盖不到 → 实测它们一直是 44px。
   ⚠️ 只改高度、不动位置 —— 「筛选控件与口径说明混排」是另一个话题
      （要动 DOM 结构，风险更高），本轮的诉求是"标准统一"，先把尺寸对齐。 */
.an-flex-between select.input,
.an-flex-between .input {
  height: 34px;
  min-height: 34px;
}

/* ── 订单明细主表：把宽度让给「商品」列（2026-09-14 乐哥：「列表超出了页面的边界，需要左右拖动」）
   ─────────────────────────────────────────────────────────────────────────────
   问题：`table-layout: auto` 下所有列都参与"分配剩余宽度"，商品名列虽是弹性列却没优先权，
        实测「达人」列被压到 **48px**（"坚强的糖豆" 折成 3 行）、商品列只剩 89px（长名折 4~5 行），
        而整表仍溢出容器 25~209px（要横向拖）。
   修法（与 `.sdo-sumtbl` 同一套，见 pages.css）：
        **除「商品」列以外的所有列锁死单行**（`nowrap`）→ 它们的 min-content == max-content，
        浏览器压不动它们，只能把富余宽度全部让给唯一还能换行的商品列。
   ⚠️ 用 `:not(:nth-child(4))` 定位商品列 —— 列序：①勾选 ②订单号 ③达人 **④商品**
       ⑤收款 ⑥退款 ⑦净额 ⑧归属 ⑨备注 ⑩操作。
       ⚠️ 勾选列在多选模式下才出现，但它固定在**第一位**，商品列始终是第 4 个 → 定位稳定。
   ⚠️ 表头不用管：全站 `.table thead th` 本来就是 `nowrap`（本文件 27 行）。
   ⚠️ 新开作用域类、**不动** `.is-num` / `.num` 等公共类 —— 它们全站几十张表在用。 */
.so-detail-tbl tbody td:not(:nth-child(4)) {
  white-space: nowrap;
}
/* 商品列是唯一可换行列 → 限宽 + 裁剪，超长名折 2 行内 */
.so-detail-tbl tbody td:nth-child(4) {
  max-width: 320px;
  overflow: hidden;
}

/* 展开行内的子表（达人明细），更轻盈：字体小一号 */
.table--sub {
  font-size: var(--font-size-xs);
  table-layout: fixed;
}
/* ⚠️ 2026-09-14 乐哥拍板「所有列表统一标准」：子表表头**不再单独一套皮**。
   改前 `.table--sub thead th` 是 `transparent 底 + 28px 高 + muted 字`，
   而主表 `.table thead th` 是 `浅灰底 + 44px 高 + 12px 字` —— 两套皮并存，
   表现为「二级明细页（华大/结算）的表头比一级列表矮一截、还没有底色」，
   乐哥反馈「列头的高度和颜色，很多表格都不一致」说的就是它。
   （`table--sub` 在本项目既用在真嵌套子表、也用在二级页的顶层表上，语义已漂移 ——
    这是同一个坑的第三张脸，前两张分别是首末列留白与灰色底。）
   现改为**只保留 position: static**（子表在自己的容器内，不需要 sticky 表头），
   背景/高度/字色/字号全部继承主表 → 全站表头收敛为一种。 */
.table--sub thead th {
  position: static;
}
/* ── 列间竖线：**只在大类边界**（2026-09-14 乐哥二次修正 + 参考微信小店）
   ─────────────────────────────────────────────────────────────────────────
   乐哥原话：「也不用所有表格都加竖线，我觉得微信小店这种，大类加竖线的就很好」

   改前（v1，同一天早先版本）：`td + td` 给**每一列之间**都加线 —— 太密。
   微信小店实测（像素级分析三张参考图）：
     · 订单表只有 **2 条**竖线，位置是把「实收款/优惠信息」这个独立信息组夹在中间；
     · 商品表 / 带货者表是 **0 条**（那些表没有需要分隔的信息组）；
     · 线色 rgb(229,229,229)=#E5E5E5，1px，**贯穿表头 + 全部数据行**。
   → 结论：竖线是**大类分隔**，不是列分隔。

   现行规则（由 app.js 的 `UI.markColumnGroups()` 打标，CSS 只负责画）：
     只在「第一个数值列之前」和「最后一个数值列之后」各画一条，**每表最多 2 条**。
     数值列用既有的 `.is-num` 判定（该类的含义就是"数值列"，全站 13/14 张表覆盖一致）。
   好处：
     · 一张表内最多 2 条 → 不会变密；
     · 没有数值列的表（如达人列表）自动 0 条 → 与微信小店的商品表同理；
     · 复用 is-num，不新增维护点（新增列时只要正常标 is-num 就自动获得正确分组）。

   ⚠️ 为什么用 **box-shadow: inset** 而不用 `border-left`：
      项目已有若干**语义竖线** —— `st-col-fcast`（提成总览「应发星盟」分组线）、
      `st-drill-pendrow`（未满 35 天行左侧虚线）、`st-col-payable/fcasthead` 等。
      `border-left` 与它们是**同一个属性**，本类优先级更高会把语义线整条覆盖掉 ——
      线还在、但含义变了，极难排查。box-shadow 与 border 是两个独立属性，可叠加共存。
      另外 inset 阴影**不占布局宽度**：用 border 的话 12 列表会多 12px，
      而结算明细 10 列本就贴着容器下限（再窄 53px 就横滚）。 */
.table .col-sep,
.table--sub .col-sep {
  box-shadow: inset 1px 0 0 var(--color-border-soft);
}
/* 订单业绩天维度：主表固定布局 + colgroup 固定数字列宽，与展开子表精确对齐 */
.so-table--fixed {
  table-layout: fixed;
}
/* 展开子表所在的单元格去掉内边距，让子表左边界与主表对齐（上下间距由 .so-expand 提供） */
.table tbody td.so-expand-cell {
  padding: 0;
}
/* ⚠️ 2026-09-14 删除：此处原有 `.table--sub thead th { background: transparent;
   color: muted; height: 28px; ... }` —— 与 `.table thead th`（浅灰底/44px）并存的第二套皮，
   就是「二级页表头矮一截、没底色」的根源。已并入上方统一规则（只留 position: static）。 */
.table--sub tbody tr:hover {
  background: transparent;
}
.table--sub tbody td {
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
}
/* 子表数字不加粗（与主表数字列视觉一致） */
.table--sub .is-num {
  font-weight: normal;
}
/* 子表达人列自适应宽度（数字列用 colgroup 固定宽度与主表对齐，达人列吃剩余空间） */
.table--sub .sub-influencer {
  min-width: 0;
  overflow: hidden;
}
/* 天维度展开子表：未匹配达人整行标灰 */
.table--sub tbody tr.so-unmatched {
  background: var(--color-gray-50);
}
.table--sub tbody tr.so-unmatched:hover {
  background: var(--color-gray-50);
}
/* 天维度展开子表：底部当日小计行 */
.table--sub tbody tr.so-subtotal {
  border-top: 1px solid var(--table-divider);
  background: var(--color-surface);
  font-weight: var(--font-weight-medium);
}
.table--sub tbody tr.so-subtotal td {
  font-weight: var(--font-weight-medium);
  color: var(--color-fg);
}

/* ---- 骨架屏 ---- */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-surface-2) 25%,
    var(--color-border-soft) 50%,
    var(--color-surface-2) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease infinite;
  border-radius: var(--radius-sm);
}

@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton-table-row {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-3);
  border-bottom: 1px solid var(--table-divider);
  align-items: center;
}

.skeleton-line {
  height: 14px;
  border-radius: var(--radius-sm);
}

/* 「保留表头的加载态」（2026-09-18，乐哥「切 tab 向右移动然后闪一下」）
   --------------------------------------------------------------------------
   切 tab 时不再把整张表换成灰条，而是保留表头、只把表体换成这些 `.is-loading-row` 行
   （实现见 ui.js 的 skeletonInto）。
   ⇒ 表头不消失、列宽不重算 → 切换瞬间页面结构与位置完全不变，看不到"闪"与错位。
   这些行不可交互（不是真实数据），所以去掉 hover 高亮与手型光标。 */
.table tbody tr.is-loading-row,
.table--sub tbody tr.is-loading-row {
  cursor: default;
}
.table tbody tr.is-loading-row:hover,
.table--sub tbody tr.is-loading-row:hover {
  background: transparent;
}
.table tbody tr.is-loading-row > td {
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}
/* 灰线放在单元格内：垂直居中，横向留出一点边距（避免贴住列线） */
.table tbody tr.is-loading-row .skeleton-line {
  margin: 0 auto;
  max-width: 88%;
}

/* ---- 空态 / 错误态 ---- */
.state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-12) var(--space-6);
  gap: var(--space-3);
}

.state__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  background: var(--color-surface-2);
  color: var(--color-muted);
  display: flex;
  align-items: center;
  justify-content: center;
}

.state__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  color: var(--color-fg);
}

.state__desc {
  font-size: var(--font-size-sm);
  color: var(--color-muted);
  max-width: 42ch;
}

/* 空状态下"换个范围就有结果"的出口（如：当前月份没有，但全部月份有 N 条） */
.state__hint {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px dashed var(--color-border);
  font-size: var(--font-size-sm);
  color: var(--color-fg-2);
}
.state__hint-link {
  color: var(--color-accent);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
}
.state__hint-link:hover { text-decoration: underline; }

/* ---- 搜索范围提示：有月份筛选时，在搜索框下方说明"搜索被限制在哪个月" ----
   ⚠️ 2026-09-14 乐哥：「这些页面我选了月份后，工具栏和下面的内容栏隔开了」
   ────────────────────────────────────────────────────────────────────────
   根因（两层叠加，缺一不可）：
     ① 本类原先 `margin: -8px 0 **12px**` —— 下边距 12px 直接把"工具栏 → 内容"顶开；
     ② app.js 的 `markToolbarJoin` 用**几何判据**决定"工具栏是否与卡片拼成一体"：
        `gap = card.top - toolbar.bottom; if (gap > 24) 不合并`。
        而本提示行隐藏时高 0px（不在判据里），**显示后高 19px + 12px 下边距 = 31px**
        → 恰好越过 24px 阈值 → 工具栏与卡片**不再拼成一体**，视觉上断开一道缝。
   修法：**让提示行在视觉上归属工具栏**（成为它的"第二行"），而不是独立夹在中间：
     · 下边距 12px → 0（不再顶开内容）
     · 补上工具栏的白底 + 左右边框（上边不加，与工具栏相接；下边不加，与卡片相接）
       → 工具栏(白·上圆角) + 提示行(白·左右边框) + 卡片(白·下圆角) 三者连成一体，缝消失
     · 左右内边距对齐工具栏的 --space-5（20px），文字与上面控件左对齐
   ⚠️ 只在「紧跟已合并工具栏」时套这套皮（`.toolbar--join-card + .kw-scope`）——
      其余页面（工具栏没参与合并的）保持原来的轻量样式，避免无谓改动。 */
.kw-scope {
  margin: calc(var(--space-2) * -1) 0 var(--space-3);
  font-size: var(--font-size-xs);
  color: var(--color-fg-2);
  line-height: 1.6;
}
.kw-scope:empty { display: none; }
/* 提示行现在插在工具栏**上方**（见 ui.js 的 ensureTip）→ 上边距收一点与工具栏贴合，
   下边距 0（紧接工具栏，不再顶开下面的内容）。 */
.toolbar + .kw-scope, .kw-scope + .toolbar { margin: 0; }
.kw-scope {
  padding: 0 var(--space-5) var(--space-2);
}
.kw-scope b { color: var(--color-accent); font-weight: var(--font-weight-semibold); }
.kw-scope__sep { margin: 0 6px; color: var(--color-fg-3); }
.kw-scope__link { color: var(--color-accent); cursor: pointer; }
.kw-scope__link:hover { text-decoration: underline; }

/* ---- 表格卡片顶部筛选条（左：二级 tab / 右：总数 + 每页条数） ---- */
.table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--color-border-soft);
}

.table-toolbar__right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-left: auto;
}

.table-toolbar__total {
  font-size: var(--font-size-xs);
  color: var(--color-meta);
  white-space: nowrap;
  /* 定最小宽度 + 靠右（2026-09-18，乐哥「切 tab 工具组会跳」）
     ------------------------------------------------------------------
     它是工具组里最靠左的一项，而工具组**右对齐** → 本行文字一变长/变短，
     整组的左边缘就跟着移动。实测切 tab 时的位移：
       样品发放「共 40 条发放记录」→「共 32 位达人」：91→67px（组左移 **24px**）
       订单明细「共 6,375 条订单」→「共 0 条订单」  ：83→60px（**23px**）
       业绩总表 78→70px（8px） / 达人列表 73→67px（6px）
     给定最小宽度后，短文案不再让整组回缩；文字靠右贴住右侧下拉，观感不变。 */
  min-width: 100px;
  text-align: right;
}

/* ---- 分页（左：范围统计 / 右：页码分页器） ---- */
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--color-border-soft);
  font-size: var(--font-size-sm);
  color: var(--color-muted);
}

.pagination__info {
  font-feature-settings: "tnum", "lnum";
  font-variant-numeric: tabular-nums;
  font-size: var(--font-size-xs);
  color: var(--color-meta);
}

.pagination__controls {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.pagination__page {
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-fg-2);
  font-size: var(--font-size-sm);
  font-feature-settings: "tnum", "lnum";
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background var(--motion-fast) var(--motion-ease-standard),
    color var(--motion-fast) var(--motion-ease-standard);
}
.pagination__page:hover {
  background: var(--color-surface-2);
}
.pagination__page.is-current {
  background: var(--color-accent);       /* 当前页主色实底 */
  color: var(--color-accent-on);
  font-weight: var(--font-weight-medium);
}

.pagination__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-fg-2);
  cursor: pointer;
  transition: color var(--motion-fast) var(--motion-ease-standard),
    border-color var(--motion-fast) var(--motion-ease-standard);
}
.pagination__nav:hover:not(:disabled) {
  color: var(--color-accent-text);
  border-color: var(--color-accent);
}
.pagination__nav:disabled {
  color: var(--color-disabled);
  cursor: not-allowed;
}

.pagination__ellipsis {
  min-width: 20px;
  text-align: center;
  color: var(--color-meta);
}

.pagination__size {
  width: auto;
  height: 28px;
  padding: 0 26px 0 10px;
  margin-right: var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-fg-2);
  border-radius: var(--radius-md);
  background-position: right 8px center;
}

/* 页码跳转输入：与页码按钮同高、描边一致 */
.pagination__jump {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-muted);
  white-space: nowrap;
}

.pagination__input {
  width: 48px;
  height: 28px;
  padding: 0 6px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-fg);
  font-size: var(--font-size-sm);
  font-family: inherit;
  text-align: center;
  outline: none;
  transition: border-color var(--motion-fast) var(--motion-ease-standard);
}
.pagination__input:focus {
  border-color: var(--color-accent);
}
.pagination__input::-webkit-outer-spin-button,
.pagination__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ---- 移动端：表格触控滚动 + 分页简化 ---- */
@media (max-width: 768px) {
  .table-wrap {
    -webkit-overflow-scrolling: touch;   /* iOS 惯性滚动 */
    overscroll-behavior-x: contain;
  }
  .pagination {
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
  }
  .pagination__info {
    order: 2;                            /* 统计文案换到操作下方 */
    flex-basis: 100%;
    font-size: var(--font-size-xs);
    color: var(--color-meta);
  }
  .pagination__controls {
    flex-wrap: wrap;
    row-gap: var(--space-2);
  }
}

/* ==========================================================================
   可跳转单元格链接（.cell-link）—— 2026-09-13 补齐
   ---------------------------------------------------------------------------
   ⚠️ 原来**全站没有定义** .cell-link，而 base.css 里有 `a { color: inherit }`
      → 排期编号/场次编号这类可跳转内容显示为**普通深色文字**，
      用户完全看不出能点（乐哥 2026-09-13 反馈）。
   统一为主色蓝：一眼可辨"这里能跳"，hover 加下划线强化可点感。
   ========================================================================== */
.cell-link {
  color: var(--color-primary-500);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--motion-fast) var(--motion-ease-standard);
}
.cell-link:hover {
  color: var(--color-primary-600);
  text-decoration: underline;
}
.cell-link:active { color: var(--color-primary-700); }

/* ==========================================================================
   密集表（列很多的宽表）：**减小水平内边距**，把宽度让给内容
   --------------------------------------------------------------------------
   背景（乐哥 2026-09-13「整体排查表格 ui 问题」）：全站巡检发现两张表超出容器、
   需要左右拖才能看到右侧列（「操作」「预估应结」被推出可视区）：
     · 人员成本  1633px > 容器 1374px（需横滚 259px）
     · 达人结算  1642px > 容器 1374px（需横滚 268px）
   这两张表都是 **16 列**，而列宽下限由「表头文字（nowrap 不可折）」与「内容宽度」共同决定
   （实测：达人结算各金额列内容最宽仅 81px，但表头「截止目前应结」就要 84px）。
   在不动信息、不缩字号、不折行的前提下，唯一可榨的空间就是**列内边距**：
   默认 `0 var(--space-3)` = 左右各 12px，16 列共占 384px；收到 4px 可省 256px
   （实测：5px 时「达人结算」自然宽度 1384px，仍比容器 1374px 多 10px；4px 后 1352px 达标）。

   ⚠️ 为什么新开一个类、而不是改 `.table thead th` 的默认 padding：
   那是全站 33 张表共用的基础规则（本项目铁律：改公共样式前先查复用范围）。
   这里只给「确实需要省宽度」的宽表加类，其余表保持原有舒适间距。
   ========================================================================== */
.table--dense thead th,
.table--dense tbody td {
  padding-left: 4px;
  padding-right: 4px;
}
/* 密集表里「操作」列的按钮组本来靠 gap 撑开，同步收一点，避免按钮贴边 */
.table--dense tbody td .toolbar { gap: 2px; }

/* ══ tfoot 单元格的 padding 必须**独立声明**（2026-09-14 乐哥：「下面求和这个，行高好窄」）
   ──────────────────────────────────────────────────────────────────────────────────
   根因：本项目表格单元格的 padding 只有一条规则 —— `.table tbody td { padding: 12px }`（本文件 93 行），
       它**只作用于 tbody**。而 `tfoot` 是**独立的行组**，thead/tbody 的规则一律覆盖不到它
       （pages.css:3167 的注释早已点明这一点）。
   实测后果（修复前）：
     · 普通表 tfoot  → padding **0px**、行高 **22px**（数据行 68~130px、表头 44px）→ 一条被压扁的窄条
     · `.table--sub` tfoot → padding 8px，而它的 tbody 是 12px → 同表内也不一致
   影响面：全站 **7 个页面**的 tfoot 合计行（华大对账 `.cm-foot-row`、提成总览、排期明细、
          订单明细、费用类、粉丝体验装…），都是这个毛病 —— 不是单个页面的问题。
   做法：在 tfoot 层**统一**补齐，规格与 tbody 完全对齐（12px 基础 + 首末列 20px）。
        这样无论合计行叫什么类名（`.is-sum` / `.cm-foot-row` / `.hs-drill__sum-row`）都自动生效，
        新增合计行也不会再漏。
   ⚠️ 排除密集表 `.table--dense`（它的 thead/tbody 左右只有 4px，单独给它一条规则），
      排除嵌套在单元格里的子表（`:where(td .table)`）。
   ⚠️ 不要用 `.table tbody td, .table tfoot td` 合并写法 —— 那会把 `border-bottom` /
      `vertical-align` 等 tbody 专有属性也带给 tfoot，影响合计行的既有视觉。只补 padding。 */
.table:not(.table--dense):not(:where(td .table)) > tfoot > tr > td {
  padding: var(--space-3);
}
.table:not(.table--dense):not(:where(td .table)) > tfoot > tr > td:first-child {
  padding-left: var(--space-5);
}
.table:not(.table--dense):not(:where(td .table)) > tfoot > tr > td:last-child {
  padding-right: var(--space-5);
}
/* 密集表：左右收窄到 4px，与它的 thead/tbody 一致（上下仍是 12px） */
.table--dense:not(:where(td .table)) > tfoot > tr > td {
  padding: var(--space-3) 4px;
}

/* ══ 表格「合计行」通用样式（2026-09-14 乐哥：「所有涉及费用的，表格上应该有一个
   地方能显示汇总，不然我们筛选出来都看不到总数」）══════════════════════════════════
   用法：`<tfoot><tr class="is-sum"><td>…</td></tr></tfoot>`
   口径 = **当前筛选条件下的全部匹配行**（不是当前页）——
     订单明细共 6,367 单而每页只显示 20 行，只算当前页的数字没有意义。
   ⚠️ 用 tfoot 而不是 tbody 尾行：tfoot 在语义上就是"表尾合计"，
      且不会被"全选/行展开"等交互误当作数据行处理。
   （内边距由上面那条 tfoot 统一规则提供，此处只管视觉区分） */
.table tfoot tr.is-sum > td,
.table tbody tr.is-sum > td {
  background: var(--color-surface-2);
  font-weight: var(--font-weight-semibold);
  color: var(--color-fg);
  border-top: 1px solid var(--color-border);
}
/* 合计行里的金额用等宽感更强的排版，方便与明细逐位核对；不换行避免金额被折行 */
.table tfoot tr.is-sum > td,
.table tbody tr.is-sum > td {
  white-space: nowrap;
}
.table tfoot tr.is-sum > td.num,
.table tbody tr.is-sum > td.num {
  font-variant-numeric: tabular-nums;
}
/* ⭐ 合计行里的盈亏格**必须保留红/绿**（2026-09-17 乐哥去掉全站金额的 `+` `-` 后暴露）
   ----------------------------------------------------------------------------
   上面的 `.table tfoot tr.is-sum > td { color: var(--color-fg) }` 特异性 (0,2,2)，
   **压过了** `.num-pos` / `.num-neg`（0,1,0）→ 合计行的盈亏一直是黑字。
   在"带 `+` 号"的年代这没问题（正负看符号），但符号去掉后：
   合计行的盈亏**既没符号也没颜色** → 看不出是赚还是亏（而它是全表最该看清的一格）。
   ⚠️ 这是本项目第 4 次被"高特异性规则盖掉语义色"咬到（pages.css 里已记过 3 次）——
      凡是用语义色表达的类，都要检查有没有被**页内更具体的选择器**压过。
   ⚠️ 只加 `td.num-pos` / `td.num-neg` 两条，**不动**其它合计行样式（底色/字重/nowrap 保持）。 */
.table tfoot tr.is-sum > td.num-pos,
.table tbody tr.is-sum > td.num-pos { color: var(--color-danger); }    /* 盈利 = 红 */
.table tfoot tr.is-sum > td.num-neg,
.table tbody tr.is-sum > td.num-neg { color: var(--color-success); }   /* 亏损 = 绿 */

/* 表格行「已单独校准」标记（2026-09-15）：暖底提示这是一行被人为改过的值。
   用途：项目团队成本「按月校准」弹窗 —— 填了金额的月份标出来，一眼看出哪几个月不是默认值。
   特异性 (0,2,2) 高于斑马纹的 (0,1,2)（后者用 :where() 压过），能稳定覆盖它。
   ⚠️ 底色只用最浅的暖色：这是"提示"不是"告警"，过重的底色会让人以为数据出错了。 */
.table tbody tr.is-custom > td {
  background: var(--color-head-on-bg);
}