/* ==========================================================================
   达播工作台 — pages-influencer.css
   达人列表 / 达人详情
   ========================================================================== */

/* ============================ 达人列表 ============================ */

.batch-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  margin-bottom: var(--space-4);
  background: var(--color-primary-50);
  border: 1px solid var(--color-primary-100);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
}

.batch-bar__count {
  font-weight: var(--font-weight-medium);
  color: var(--color-accent-text);
}

.platform-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  color: var(--color-fg-2);
  font-size: var(--font-size-xs);
  background: var(--color-surface);
}

.platform-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
}

/* 达人列表：平台+机构竖排列表（上下排列，机构彩色徽章） */
.cell-agency-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
}
.cell-agency-row {
  display: flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  min-width: 0;
  font-size: var(--font-size-xs);
  color: var(--color-fg-2);
}
.cell-agency-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c, var(--color-accent));
  flex-shrink: 0;
}
.cell-agency-platform {
  flex-shrink: 0;
  color: var(--color-fg-2);
}
/* 机构标签（统一 .tag 风格）在列表/详情行内超长截断 */
.cell-agency-row .tag,
.platform-detail-row .tag {
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* 展开卡片：平台账号/机构行 */
.platform-detail-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  min-width: 0;
}
.platform-detail-platform {
  color: var(--color-fg);
  font-weight: var(--font-weight-medium);
  flex-shrink: 0;
}
.platform-detail-account {
  color: var(--color-muted);
  font-size: var(--font-size-xs);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================ 达人详情 ============================ */

/* 达人详情内容区与编辑页统一：整体包在 .sf-shell 单卡片内，居中限宽 */
.detail-shell {
  max-width: var(--form-max-width);
  margin-left: auto;
  margin-right: auto;
}

/* 通用：外壳不再是一整张大白卡，改为「Tab 栏 + 一列模块卡」
   达人详情页用 .detail-shell--modules，达人表单页用 .sf-shell--modules，共用同一套规则 */
.detail-shell--modules,
.sf-shell--modules {
  background: transparent;
  border: none;
  box-shadow: none;
  overflow: visible;
}
/* ⚠️⚠️ `overflow: visible` 必须**单独写一条高特异性规则**（2026-09-19 修 bug）。
   ─────────────────────────────────────────────────────────────────────────────
   上面那条 `.sf-shell--modules { ... overflow: visible }` 特异性是 (0,1,0)，
   而文件后面（371 行）的 `.sf-shell { overflow: hidden }` **特异性相同、位置更靠后**
   ⇒ 后者胜出 ⇒ **`--modules` 的 `overflow: visible` 从来没有生效过**。
   实测证据（浏览器 computed）：`<div class="sf-shell sf-shell--modules">` 的
   `overflow-y` 是 `hidden` 而不是 `visible`。

   为什么这次必须修（不只是"洁癖"）：`overflow: hidden` 会**创建新的滚动容器**，
   于是 `position: sticky` 元素的"粘附参照"从视口变成那个容器 ⇒
   报销单新加的底部固定汇总条**完全粘不住**（实测：粘附目标算错，元素被推到视口下方）。
   ⇒ sticky 的祖先链上**一个 overflow != visible 的祖先都不能有**（`clip` 除外，它不建滚动容器）。

   为什么这样修是安全的：`.sf-shell--modules` 的整个意图就是"去掉外壳"
   （background/border/box-shadow 全清），**没有圆角、没有需要裁切的东西**；
   而真正需要 `hidden`（为了让内容跟随圆角裁切）的是**有边框圆角**的 `.sf-shell` 本身。
   受影响的是 3 个用该变体的表单页（达人表单 / 签约公司表单 / 报销单），
   均为「Tab 或分区卡」结构、内部无通栏宽表 ⇒ 已逐一验证无横向溢出。
   用 `.detail-shell--modules` 的两个详情页不受影响（`.detail-shell` 本就没设 overflow）。 */
.sf-shell.sf-shell--modules,
.detail-shell.detail-shell--modules {
  overflow: visible;
}
.detail-shell--modules .sf-body,
.sf-shell--modules .sf-body {
  background: transparent;
}
/* hero 与 Tab 栏、Tab 栏与内容之间也要留足呼吸（原来分别是 12px / 16px，显挤） */
.detail-shell--modules .detail-hero {
  margin-bottom: var(--space-5);
}
.detail-shell--modules .sf-body__content,
.sf-shell--modules .sf-body__content {
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
}

/* 详情页 hero：卡片内头部（白底、无独立圆角/边框，底部用留白与 Tab 区分） */
.detail-hero {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-6);
  background: transparent;
  border: none;
  border-radius: 0;
  margin-bottom: var(--space-3);
}

/* 详情页 Tab 栏：压在卡片内顶部分隔线上，与内容列左右对齐 */
.sf-shell .tabs {
  padding: 0 var(--space-6);
  background: transparent;
}

.detail-avatar {
  width: 64px;
  height: 64px;
  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-xl);
  font-weight: var(--font-weight-semibold);
  flex-shrink: 0;
  overflow: hidden;
}

.detail-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.detail-name {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-fg);
}

.detail-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

/* 所属商务（关联人员）头像列表 */
.detail-bd-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* 达人列表「所属商务」列：带头像 chip */
.bd-cell-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}
.bd-cell-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 1px var(--space-1) 1px 1px;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-pill);
  background: var(--color-surface-2);
  font-size: var(--font-size-xs);
  color: var(--color-fg);
}
.bd-cell-avatar {
  padding-top: 1px; /* 补偿中文字面偏上 */
  width: 20px;
  height: 20px;
  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-medium);
  flex-shrink: 0;
  overflow: hidden;
}
.bd-cell-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bd-cell-name {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.detail-bd-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 1px var(--space-1) 1px 1px;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-pill);
  background: var(--color-surface-2);
  font-size: var(--font-size-xs);
  color: var(--color-fg);
}
.detail-bd-avatar {
  width: 20px;
  height: 20px;
  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-medium);
  flex-shrink: 0;
  overflow: hidden;
}
.detail-bd-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 详情页字段：无线布局，靠字号、行间距、留白区分层级（label 上 + value 下） */
.info-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5) var(--space-4);
  padding: var(--space-2) 0;
}

.info-item {
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
}

.info-item__label {
  font-size: var(--font-size-xs);
  color: var(--color-muted);
  line-height: 1.4;
  margin-bottom: var(--space-1);
}

.info-item__value {
  font-size: var(--font-size-base);
  color: var(--color-fg);
  line-height: 1.5;
  word-break: break-all;
}

/* 详情页区块小标题（佣金配置 / 开票豁免 / 平台账号 等） */
.detail-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}

.detail-section__title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-fg);
  margin-bottom: var(--space-3);
}

.detail-section__head .detail-section__title {
  margin-bottom: 0;
}

/* 一级 Tab（全局通用）：下划线式 —— 文字主色选中 + 底部 2px 主色下划线，未选中灰字 */
.tabs {
  display: flex;
  align-items: center;
  gap: var(--space-6);              /* 24px 项间距 */
  border-bottom: 1px solid var(--color-border-soft);   /* 基线 */
  overflow-x: auto;
}

.tab {
  position: relative;
  height: 44px;                        /* 2026-09-18：40 → 44，配合 16px 字号 */
  padding: 0 2px;
  background: transparent;
  border: none;
  color: var(--color-muted);          /* 未选中 #5D6C7B */
  font-size: var(--font-size-lg);      /* ⚠️ 2026-09-18 乐哥：14 → 16（「字号大一点点」）
                                          参照微信小店：一级 tab 与正文有明显层级差，
                                          14px 与正文同号 → 看不出这是"切换器"而不是普通文字。
                                          16px = 项目的 --font-size-lg（卡片标题/强调档）。 */
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--motion-fast) var(--motion-ease-standard);
}

.tab::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  border-radius: 1px;
  background: transparent;
  transition: background var(--motion-fast) var(--motion-ease-standard);
}

.tab:hover {
  color: var(--color-fg);
}

.tab.is-active {
  color: var(--color-accent-text);   /* #0064E0 */
}

.tab.is-active::after {
  background: var(--color-accent);
}

/* 达人表单/详情统一：外壳限宽 1120 居中（详情页 .detail-shell 与表单页 .sf-shell 同一宽度） */
.sf-shell {
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  box-shadow: none;
  overflow: hidden;
  max-width: var(--form-max-width);
  margin-left: auto;
  margin-right: auto;
}

/* 达人表单 Tab 栏：下划线式（与达人详情页 .tabs 统一）—— 文字主色选中 + 底部 2px 下划线 */
.sf-tabs {
  display: flex;
  align-items: center;
  padding: var(--space-3) var(--space-6);
  border-bottom: 1px solid var(--color-border-soft);
  background: var(--color-surface);
  overflow-x: auto;
}

.sf-tabs__inner {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0;
}

/* 透明 track：下划线式不需要灰底托盘 */
.sf-tabs__track {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
}

.sf-tab {
  position: relative;
  height: 40px;
  padding: 0 2px;
  border: none;
  background: transparent;
  color: var(--color-muted);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  line-height: 40px;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--motion-fast) var(--motion-ease-standard);
}

.sf-tab::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  border-radius: 1px;
  background: transparent;
  transition: background var(--motion-fast) var(--motion-ease-standard);
}

.sf-tab:hover {
  color: var(--color-fg);
}

.sf-tab.is-active {
  color: var(--color-accent-text);
}

.sf-tab.is-active::after {
  background: var(--color-accent);
}

/* 内容区 */
.sf-body {
  background: var(--color-surface);
}

/* 内容列统一限宽 1120px（含左右 24px padding），与 Tab 栏内层、底部操作区对齐 */
.sf-body__content {
  padding: var(--space-5) var(--space-6);
  max-width: 1120px;
  margin: 0 auto;
}

.sf-panel-body {
  width: 100%;
}

/* 达人表单 · 平台相关：一行一个平台 —— 左列「平台名 + 开通开关」，右列配置内容。
   左列平台名按 4 个中文字符预留宽度，长短不齐的平台名也能对齐。 */
.platform-group {
  border: 1.5px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-2);
}
.platform-group:last-child {
  margin-bottom: 0;
}
/* 第一行：平台名 + 开通开关 + 平台账号ID + 达人类型，**全部同一行**。
   踩坑（2026-09-10 乐哥反馈"UI 布局有问题"）：上一版把「平台名 + 开关」做成 132px 的
   独立左列且 align-items:center + align-self:stretch —— 它会在这块区域的整体高度里
   垂直居中，于是看着跟右边的「平台账号ID」不在同一行。现在改为第一行内联。 */
.platform-group__main {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 44px;
}
.platform-group__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  align-self: stretch;
  padding-right: var(--space-4);
  border-right: 1px solid var(--color-border-soft);
}
.platform-group__name {
  min-width: 56px;   /* 按 4 个中文字符预留 */
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-fg);
}
.platform-group__head .switch { margin: 0; flex-shrink: 0; }
/* 未开通：第一行右侧给一行灰提示，避免"右边空着"的错觉 */
.platform-group__off {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  font-size: var(--font-size-xs);
  color: var(--color-fg-3);
}
/* 字段行：标签在左、控件在右（标签定宽对齐），不再各占一行 */
.pg-field {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}
.pg-field__label {
  flex: 0 0 76px;
  font-size: var(--font-size-xs);
  color: var(--color-fg-2);
  text-align: right;
}
.pg-field__ctl { flex: 1; min-width: 0; }
/* 行内右侧的字段区：固定两列网格 —— 这样第一行「平台账号ID / 达人类型」与下面
   「签约机构」行的「机构名称 / 机构编码」列宽、起点完全一致（乐哥要求"输入框宽度和第一行对齐"）。
   列用 minmax(0, 1fr) 才能在内容过长时正常收缩。 */
.platform-group__fields {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3) var(--space-5);
  min-width: 0;
}
/* 区块内第二行起：上缘一条浅线分隔（第一行不带线） */
.platform-group__line {
  border-top: 1px solid var(--color-border-soft);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
}
/* 该行右侧没有内容的行（如「腾讯互选」）：不画右侧竖线，名称 + 开关仍与其他行左对齐 */
.platform-group__head--bare {
  padding-right: 0;
  border-right: none;
}
/* 「签约机构」开关打开后展开的字段区：JS 用这个类做显隐钩子（关闭时置 display:none），
   布局沿用 .platform-group__fields 的两列网格，这里给出"展开"时的默认 display */
.platform-agency-box {
  display: grid;
}

/* 窄屏（手机）：第一行改上下堆叠、平台名与开关占满整行，
   字段区收成一列，否则同一行里塞不下 */
@media (max-width: 768px) {
  .platform-group__main {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }
  .platform-group__head {
    align-self: auto;
    padding-right: 0;
    padding-bottom: var(--space-3);
    border-right: none;
    border-bottom: 1px solid var(--color-border-soft);
  }
  .platform-group__head--bare {
    padding-bottom: 0;
    border-bottom: none;
  }
  .platform-group__fields { grid-template-columns: 1fr; }
  .pg-field__label { flex: 0 0 64px; }
}

/* 二级胶囊筛选已收敛为全局通用组件 .pill-filter（见 components.css），达人表单不再使用 */

/* 底部操作区：外层整宽（分隔线贯穿），内层限宽、按钮右对齐到内容列右边缘 */
.sf-shell > .form-actions {
  display: block;
  padding: 0;
  border-top: 1px solid var(--color-border-soft);
  background: var(--color-surface);
}

.sf-shell > .form-actions .form-actions__inner {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--space-4) var(--space-6);
}

@media (max-width: 1024px) {
  .sf-tabs__inner {
    padding: 0 var(--space-4);
  }
  .sf-tab {
    margin-right: var(--space-4);
  }
  .sf-body__content {
    padding: var(--space-4);
  }
  .sf-shell > .form-actions .form-actions__inner {
    padding: var(--space-4);
  }
}

@media (max-width: 1024px) {
  .info-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 佣金配置：渠道分组（白底 + 渠道色边框，视频号绿框 / 抖音蓝框）+ 场景开关 */
.comm-channel {
  margin-bottom: var(--space-4);
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1.5px solid var(--color-success);
}
.comm-channel--dy {
  border-color: var(--color-info);
}
.comm-channel:last-child { margin-bottom: 0; }
.comm-channel-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-fg);
  margin-bottom: var(--space-2);
}
.comm-channel-title::before {
  content: '';
  width: 4px;
  height: 14px;
  border-radius: 2px;
  background: var(--color-success);
  flex-shrink: 0;
}
.comm-channel-title--dy {
  color: var(--color-info);
}
.comm-channel-title--dy::before {
  background: var(--color-info);
}
.comm-channel-warn {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: 1.4;
  color: var(--color-warning);
  background: var(--color-warning-bg);
  border-radius: var(--radius-pill);
  vertical-align: middle;
}
/* 混播/私域开关关闭时，整行置灰禁用 */
.comm-off {
  opacity: 0.5;
}

/* 佣金配置卡片式：场景块（白底，与渠道淡底区分）+ 附加佣金（摘要常显 + 展开编辑） */
.comm-scene {
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin-bottom: var(--space-2);
  background: var(--color-surface);
}
.comm-scene:last-child { margin-bottom: 0; }
.comm-scene-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}
.comm-scene-name { font-weight: var(--font-weight-medium); font-size: var(--font-size-sm); }
.comm-scene-period {
  font-size: var(--font-size-xs);
  color: var(--color-muted);
  margin-left: 6px;
}
/* 当前生效佣金一行蓝色字（时间段 + 佣金内容），放在场次下方 */
.comm-current {
  margin-top: var(--space-2);
  font-size: var(--font-size-xs);
  line-height: 1.5;
  color: var(--color-info);
}
/* 开票与税点：豁免标记（橙色标签） */
.comm-exempt-tag {
  display: inline-block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-warning);
  background: var(--color-warning-bg);
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  line-height: 1.4;
}
/* 「开票与税点」卡内的两个板块（① 佣金开票豁免 / ② 佣金税点）：
   板块标题行（名称靠左、新增按钮靠右）+ 说明文字 + 各自的表格
   —— 概念优先：渠道降级成表格里的一列，不再拿渠道当外框（那样会把两件事挤在一起） */
.it-blk-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.it-blk-head__name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-fg);
}
.it-blk-head .btn {
  margin-left: auto;
}
.it-blk-desc {
  margin-top: var(--space-2);
  font-size: var(--font-size-xs);
  line-height: 1.7;
  color: var(--color-fg-2);
}
.it-blk-desc b {
  font-weight: var(--font-weight-semibold);
  color: var(--color-fg);
}
/* 专场单独维护：一致/不一致状态标签 + 差异数字标红 */
.lock-ok, .lock-diff {
  display: inline-block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  line-height: 1.4;
}
.lock-ok { color: var(--color-success); background: var(--color-success-bg); }
.lock-diff { color: var(--color-warning); background: var(--color-warning-bg); }
.lock-diff-num { color: var(--color-danger); font-weight: var(--font-weight-medium); }
.comm-scene-tag {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-accent-text);
  background: var(--color-primary-100);
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  line-height: 1.4;
}
.comm-follow {
  font-size: var(--font-size-xs);
  color: var(--color-success);
  margin-left: auto;
  background: var(--color-success-bg);
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  line-height: 1.4;
}
.comm-channel--dy .comm-follow {
  color: var(--color-info);
  background: var(--color-info-bg);
}
.comm-scene-fields {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.comm-scene-body {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--color-border);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.comm-field {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.comm-field-label { font-size: var(--font-size-xs); color: var(--color-fg-2); }
.comm-input-suffix {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.comm-input-suffix input { width: 80px; }
.comm-unit { font-size: var(--font-size-xs); color: var(--color-fg-2); }
.comm-more-wrap {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.comm-extra-summary {
  font-size: var(--font-size-xs);
  color: var(--color-success);
  line-height: 1.6;
  background: var(--color-success-bg);
  padding: 2px 10px;
  border-radius: var(--radius-pill);
}
.comm-channel--dy .comm-extra-summary {
  color: var(--color-info);
  background: var(--color-info-bg);
}
.comm-extra {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--color-border);
  width: 100%;
}
.comm-extra-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-3);
}
.comm-extra-item { display: flex; flex-direction: column; gap: 6px; }
.comm-extra-item > label { font-size: var(--font-size-xs); color: var(--color-fg-2); }
.comm-extra-item .comm-input-suffix { width: 100%; }
.comm-extra-item .comm-input-suffix input { flex: 1; width: auto; }
.comm-extra-hint { margin-top: var(--space-2); }

/* 下游佣金：达人列表（表头按场景分列：专场/混播/私域，场景列内按渠道分行） */
.dc-table {
  table-layout: fixed;
}
.dc-table thead th.dc-th-scene {
  position: relative;
  border-left: 1px solid var(--color-border-soft);
}
.dc-scene-cell {
  padding: var(--space-2) var(--space-3);
  border-left: 1px solid var(--color-border-soft);
}
.dc-cell-line {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0;
  min-height: 24px;
}
.dc-cell-line--off { opacity: 0.55; }
.dc-cell-text {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: var(--font-size-sm);
}
/* 达人佣金：线上 / 线下 / 年框 三行分色（仅数字用彩色，标签/日期用默认灰） */
.dc-rates {
  display: flex;
  /* ⚠️ 原来是 `flex-direction: column` —— 同一平台的多个费率项（线上 + 返点 + 年框…）
     会**逐项堆叠**，一个达人配 3 项就把该格撑到 147px（乐哥 2026-09-13 排查「明显高行」）。
     改为横向排列 + 自动换行：列宽放得下就并排（省一半高度），放不下自动折行——
     最坏情况与原来一致，不会更差。 */
  flex-direction: row;
  flex-wrap: wrap;
  gap: 3px 10px;
  min-width: 0;
  flex: 1;
}
.dc-rate-row {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: nowrap;      /* 一个费率项内部不再折行（外层 .dc-rates 负责换行） */
  font-size: var(--font-size-sm);
  line-height: 1.35;      /* 1.5 → 1.35：密集表格里的多行费率，行距略收更耐看 */
}
/* 分色：线上=主色钴蓝 / 线下=橙 / 年框=绿 / 返点=紫 / 激励=红 */
.dc-rate--online { color: var(--color-accent-text); }
.dc-rate--offline { color: var(--color-warning); }
.dc-rate--yearly { color: var(--color-success); }
.dc-rate--rebate { color: var(--color-chart-7); }
.dc-rate--incentive { color: var(--color-danger); }
.dc-rate-row .dc-rate-label {
  font-size: var(--font-size-xs);
  color: var(--color-fg-2);
  white-space: nowrap;
}
.dc-rate-row .dc-rate-num {
  font-weight: var(--font-weight-semibold);
  color: inherit;
  font-variant-numeric: tabular-nums;
}
.dc-rate-row .dc-rate-period {
  font-size: var(--font-size-xs);
  color: var(--color-fg-2);
  white-space: nowrap;    /* 「2026-09-10 起」不能被拆成两行 */
}
.dc-extra-chips {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.dc-extra-chip {
  font-size: var(--font-size-xs);
  color: var(--color-fg-2);
  background: var(--color-gray-100);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  line-height: 1.4;
}
.dc-chip-tag {
  display: inline-block;
  font-weight: var(--font-weight-medium);
  color: var(--color-success);
  background: var(--color-success-bg);
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
  font-size: var(--font-size-xs);
  line-height: 1.5;
  white-space: nowrap;
}
.dc-chip-tag--dy {
  color: var(--color-info);
  background: var(--color-info-bg);
}
.dc-follow {
  font-size: var(--font-size-xs);
  color: var(--color-fg-2);
  background: var(--color-gray-100);
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
/* 上游佣金：卡片网格（货架式），按单品/套餐分两块，佣金率大字突出 */
.up-grid { display: flex; flex-direction: column; gap: var(--space-4); }
.up-section-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-fg);
  margin-bottom: var(--space-2);
}
.up-section-count {
  font-size: var(--font-size-xs);
  color: var(--color-fg-2);
}
.up-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-2);
}
.up-card {
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  padding: var(--space-3);
}
.up-card-top {
  display: flex;
  align-items: center;
  gap: 10px;
}
.up-card-img {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  object-fit: cover;
  flex-shrink: 0;
  background: var(--color-gray-100);
}
.up-card-img--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-fg-2);
}
.up-card-name {
  flex: 1;
  min-width: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.up-card-rate {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-accent-text);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.up-card-bottom {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--space-2);
}
.up-card-type {
  font-size: var(--font-size-xs);
  color: var(--color-fg-2);
}
.up-card-actions {
  margin-left: auto;
  display: flex;
  gap: 2px;
}

/* 结算单：达人单元格多渠道标签（视频号/抖音 + 应付小计，点标签切渠道） */
.st-ch-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.st-ch-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  background: var(--color-success-bg);
  color: var(--color-success);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: color var(--motion-fast) var(--motion-ease-standard),
    background-color var(--motion-fast) var(--motion-ease-standard),
    border-color var(--motion-fast) var(--motion-ease-standard);
}
.st-ch-tag--dy {
  background: var(--color-info-bg);
  color: var(--color-info);
}
.st-ch-tag:hover {
  border-color: var(--color-border);
}
.st-ch-tag.is-active {
  background: var(--color-primary-50);
  border-color: var(--color-primary-200);
  color: var(--color-accent-text);
  font-weight: var(--font-weight-medium);
}
.st-ch-tag__amt {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum", "lnum";
}

/* 静态渠道标签（单渠道行，乐哥 2026-09-15：渠道从独立列挪到达人名下）
   ⚠️ 与可点标签用同一个 .st-ch-tag 基类（保证 pill 外观/配色一致），
      只覆盖"可交互"的三处视觉暗示 —— 否则单渠道标签看着能点、点了却没反应。
      它**不带 data-ch**，绑定侧也据此跳过（见 influencer-settlement.js 的渠道标签事件）。 */
.st-ch-tag--static {
  cursor: default;
}
.st-ch-tag--static:hover {
  border-color: transparent;   /* 去掉"悬停高亮"这个可点暗示 */
}

/* 达人佣金：历史生效版本（对应佣金下一条条展示） */
.comm-history {
  margin-top: var(--space-2);
}
.comm-history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-xs);
}
.comm-history-table td {
  padding: 4px 8px;
  border-bottom: 1px solid var(--color-border-soft);
  vertical-align: top;
  color: var(--color-fg-2);
}
/* 最新 3 段：整行蓝色 */
.comm-history-row--cur td {
  color: var(--color-info);
  font-weight: var(--font-weight-medium);
}
.comm-history-period {
  width: 38%;
  white-space: nowrap;
  color: var(--color-muted);
}
.comm-history-row--cur .comm-history-period {
  color: var(--color-info);
}
.comm-history-toggle {
  margin-top: 6px;
  padding: 0;
  color: var(--color-fg-2);
}
.comm-history-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* 特殊结算佣金（达人 × 渠道×场景 × 商品/套餐） */
.spc-section .spc-group { margin-bottom: var(--space-3); }
.spc-group__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-fg);
  margin-bottom: var(--space-2);
}
.spc-group__head::before {
  content: '';
  width: 3px;
  height: 14px;
  border-radius: 2px;
  background: var(--color-accent);
}
.spc-table { margin: 0; }
.spc-lock-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
  color: var(--color-fg-2);
  font-size: var(--font-size-xs);
}
.spc-toggle { gap: 6px; }

/* 排期佣金覆盖确认：排期编号链接 + 时间 */
.spc-sched-row { display: flex; align-items: center; gap: var(--space-3); }
.spc-sched-link { color: var(--color-info); font-weight: var(--font-weight-medium); text-decoration: none; cursor: pointer; }
.spc-sched-link:hover { text-decoration: underline; }
.spc-sched-time { color: var(--color-fg-2); }

/* 排期佣金覆盖确认：佣金对比（当前 → 覆盖后） */
.spc-sched-card { padding: var(--space-1) 0 var(--space-2); }
.spc-sched-card + .spc-sched-card { border-top: 1px solid var(--color-border-soft); }
.spc-sched-comm { display: flex; gap: var(--space-2); align-items: baseline; color: var(--color-fg-2); margin-top: 2px; }
.spc-sched-comm-label { color: var(--color-muted); font-size: var(--font-size-xs); flex-shrink: 0; }

/* 覆盖确认弹窗：前后佣金差异红色高亮 */
.spc-comm-diff { color: var(--color-danger); font-weight: var(--font-weight-semibold); }

/* 佣金配置板块卡片：板块之间清晰分隔（佣金配置 / 开票与税点 / 特殊佣金） */
.commission-section {
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  background: var(--color-surface);
}
.commission-section:last-child { margin-bottom: 0; }
.commission-section__sub {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-soft);
}

/* ==========================================================================
   达人经营 · 明细表：数值单元格禁止断行（2026-09-17）
   --------------------------------------------------------------------------
   问题：`-¥15,280.55` 会在负号后断成两行 —— 第一行只有 "-"、第二行是 "¥15,280.55"。
        视觉上像两个内容，且**负号与数字分离有误读成正数的风险**（老板要念数出去）。
   实测（1900px）：成本类目列与「利润（预估）」列都有此现象。
   修法：数值单元格禁止换行 + 同步加宽列（见 influencer-profit.js 的 W_MONEY/W_CAT）。
   ⚠️ 只作用于本页明细表（`#ip-body table`），不动全站 .table ——
      其他表列宽预算不同，全局 nowrap 会让那些表的内容溢出单元格。
   ========================================================================== */
#ip-body table.table tbody td.is-num {
  white-space: nowrap;
}

/* 达人明细表：窄屏**不压缩列宽**，改为整体横向滚动（2026-09-17）
   --------------------------------------------------------------------------
   本表是 13 列的数据密集表，宽度由「金额列要放得下六位数」决定（见 W_MONEY）。
   不加 min-width 时，窄屏会把**唯一的弹性列（达人/明细项）**压到 101px，
   达人名 + 编号 + 场次 + 「其中未满 35 天 GSV ¥169,930.04」折成 7~8 行
   （实测 1600px 屏平均 7.1 行）—— 比横向滚动难读得多。
   1560px = 固定列合计（箭头 32 + 金额 4×118 + 类目 5×110 + 利润率 86 + 状态 96）
            + 达人列最小可读宽 ≈ 260px。
   1920px 屏不受影响（实测表格自然宽 1614px > 1560）。
   ========================================================================== */
#ip-body table.table { min-width: 1560px; }