/* Stable public URL: Clarity replays must keep loading this across deployments. */
:root {
  /*
   * 2026-08-11/12 视觉升级（两轮合一）：
   * ① 中性色整族从纯灰挪到暖灰（色相 ~40°、饱和 3–6%，PR #248）。理由：这是
   *    全屋定制门店的工作台，现场语境是木色、白墙、黄铜五金；纯 #f3f3f3 的
   *    「原型灰」在这套内容里读着像没上色的线框稿。暖灰只换气质不换层级，
   *    语义色（--positive / --warning / --danger / --info 四族）单独校准。
   * ② 同日的「一代化」改版（PR #259）在暖灰基座上补层级与对比度（均为实算值）：
   *    文字三档 ink → ink-2 → muted，线三档 line → line-soft → line-dark，
   *    改版前审计的 13 种散灰 / 5 档文字灰 / 12 档圆角 / 22 档字号由此收编。
   */
  /*
   * ③ 2026-08-18 主色改版（本轮）：中性色整族从**暖灰**挪到**紫偏灰**，并把
   *    `--accent` 从近黑换成紫。
   *
   *    ⚠️ 这是**推翻**上面 ① 那条决定，不是补充。① 写的理由（「现场语境是木色、
   *    白墙、黄铜五金」）本身没错，改的原因是产品方按竞品《水流 AI 超级员工》
   *    定了新的界面方向：白底 + 单一主色 + 大圆角卡。暖灰基座上没有主色可放——
   *    旧 `--accent` 是近黑 #2a2621，它表达「重」，不表达「这是可点的/这是当前项」。
   *
   *    **中性色带紫偏（而不是换成纯灰）是硬约束**：中性色和主色同族，界面才像
   *    一套东西；纯灰配紫主色会读成「灰底上贴了个紫按钮」。这条和 ① 的手法一致，
   *    只是色相从 40° 挪到 265°。
   *
   *    **语义四族（positive/warning/danger/info）与黄铜族一个字没动**：它们表达
   *    的是状态，跟主色是两件事，参考里的做法也是分开的。新画布比旧的浅，
   *    这五族在新底上的对比度全部**不降反升**（实算：positive 4.64→4.84、
   *    warning 4.40→4.60、danger 5.11→5.34、info 4.75→4.96、brass 4.62→4.82）。
   *
   *    下面每档的比值都是实算的（sRGB 相对亮度，WCAG 2.x 公式），不是估的。
   */
  --ink: #1a1626; /* 白底 17.7:1 / canvas 15.95:1 */
  --ink-2: #443c5c; /* 次级正文：白底 10.26:1 / canvas 9.25:1（旧暖灰档是 9.3 / 8.5） */
  --muted: #6b6480; /* 白底 5.59:1 / canvas 5.03:1（旧档 5.2 白底），12px 小字仍过 AA */
  --canvas: #f4f2fa;
  --surface: #ffffff;
  --soft: #faf9fd;
  /*
   * 三档线，各管一件事，不许混用：
   *   --line      结构性边框（卡片/分区），装饰用途，刻意轻
   *   --line-soft 行内 hairline（表格行分割），比 --line 再轻一档
   *   --line-dark 交互件边框（按钮/输入框/选择器）。白底 3.56:1、画布 3.07:1——
   *               WCAG 1.4.11 要求非文字部件 ≥3:1；旧值 #bcb5a8 只有 ~2.1:1，
   *               视频区更早还为同一问题逐屏打过 #8f8f8f 补丁，根因在这一行，现已归一。
   */
  --line: #e0dbef;
  --line-soft: #ebe7f6;
  --line-dark: #8b83a6; /* 白底 3.56:1 / canvas 3.21:1 —— 与旧暖灰档同值，1.4.11 的 3:1 仍过 */
  /*
   * 主色（2026-08-18 由近黑 #2a2621 换成紫）。它只干三件事：**当前项、主按钮、
   * 进度填充**。全站 17 处 var(--accent) 里 14 处是当背景用、配 `color: #fff`，
   * 白字在它上面 6.65:1，AA 过（旧近黑是 15.03:1，换色后仍远高于 4.5 的线）。
   *
   * **别拿它当大面积底色**：参考里的紫也只出现在选中态和主按钮上，铺开会跟
   * --info 的蓝打架（两者色相只差 40°，大面积并置时读者分不出哪个是「可点」
   * 哪个是「提示」）。
   */
  --accent: #5b3fd9;
  --accent-soft: #f0ecfe;
  /*
   * 黄铜：本仓的身份色时刻（当前位置、品牌块、选中文字底色）。取自量房券金那族里
   * 最深的一档 #8a6420——它已经在券样式里用了 4 处，不是新发明的颜色；白底对比 5.9:1。
   * 只做点缀不做大面积：大面积金会跟 --warning 的琥珀打架。
   * --brass-line（一代化收编）：知识/证据类元素原有 25 处散落的 #e3c06b/#e8d19a
   * 边线，同族收进这一档；配套的浅黄底与 --warning-bg 肉眼同值，直接共用那一个。
   */
  --brass: #8a6420;
  --brass-bg: #f6ecd6;
  --brass-line: #e3c06b;
  /*
   * 「已实现 / 真实数据 / 做完了」这一族绿，唯一来源。取 Pantone 341 C（≈ #007a53）：
   * 偏冷、去饱和，在这套黑+中性灰+琥珀的界面里压得住，不会读成框架默认的「操作成功绿」。
   * 白底对比 5.4:1（旧的 #278557 只有 4.6:1），小号徽章文字也过 AA。
   * 全站绿都必须引这三个变量——本文件曾经有过 3 套各自为政的绿（--source-green /
   * --brick-green / --positive），同一个「已核验」概念三种颜色，店长只会以为是三种状态。
   *
   * 底色的明度取自终端 diff 的「新增行」绿（#e3fedf）那股透亮劲，但**色相强行拉回
   * 155°、饱和收掉一半**：直接照搬 #e3fedf（色相 112° 偏黄绿）会和上面 155° 的 ✓
   * 与文字分属两族，同一个色块里互相显脏。底色跟着前景走色相，是这三个值的硬约束。
   *
   * --positive-wash（一代化新增）：选中态的极浅绿底（旧散值 #f7faf8 一族归一），
   * 比 --positive-bg 再浅一档，前景 --positive 在其上 5.0:1。
   */
  --positive: #007a53;
  --positive-bg: #e7f8f1;
  --positive-line: #bde3d2;
  --positive-wash: #f2f9f6;
  --warning: #93651a;
  --warning-bg: #fff3d6;
  --danger: #b53636;
  --danger-bg: #fce8e8;
  --danger-line: #edcccc;
  /* info 蓝（一代化）由 #3973d6 加深：旧值在 --info-bg 上只有 4.19:1（AA 不过），
     新值 5.0:1、白底 5.5:1。色相未动。 */
  --info: #2f66c4;
  --info-bg: #eef6ff;
  /*
   * 企业大脑「积木」色族（2026-08-24 建族，2026-09-03 补齐档位并移进 :root）。
   *
   * 每个状态实际要**四档**，不是两档：
   *   -soft  砖块底色              -line  四周 1px 描边
   *   -edge  底边那条 4px 重边      -deep  底色上的文字
   * 建族时只有前缀色和 -soft 进了变量，另外三档以 59 处硬编码散在文件三个位置
   * （7891-7933 的企业墙六态 + 行业墙三态、14429- 起的四档统一段、7060-7320 的
   * 图例与详情页），于是同一档在三处各漂各的：绿的描边有 #a8d7ba / #98cfb2 /
   * #7fc8a1 三支，红的有 #e8b3b3 / #e5a6a6 / #e3a2a2 三支。文件开头那条
   * 「同一个概念三种颜色，店长只会以为是三种状态」说的就是这个，只是当时只收了底色。
   *
   * ⚠️ **这组必须留在 :root，别再挪回某一屏的作用域**（2026-09-03 实测）。
   * 原先它挂在 `.knowledge-panorama-page` 上，可引用它的规则有两类不在那棵子树里：
   *   ① 别的模块的 4 条：.source-file-badge.pdf（4.2.2 目录页）/ .activity-list
   *      .danger-link 与 .campaign-file-list button（沉默客户召回）/
   *      .customer-effect-review.needs-review（客户详情）/ .brain-metric.skeleton b（上传页）
   *   ② **整个积木详情页**：它是全景屏的兄弟页 .knowledge-brick-detail-page，
   *      于是 .knowledge-brick-detail 的 5px 左强调条和 .knowledge-brick-detail-kicker
   *      的文字色，**六种状态全都回落成近黑**——那一页根本没有状态色。
   * var() 取不到值时**整条声明作废**（不是回退到上一条 cascade 赢家，也不是默认色），
   * 所以这些地方线上一直是：pdf 角标没有底、骨架条整条不可见、详情页没有状态色，
   * 而且不报任何错、CI 全绿。
   * 实测证据：在 .real-brain-catalog-page 里量 var(--brick-red, rgb(1,2,3)) → rgb(1,2,3)；
   * 详情页 6 态的 border-left-color 改前一律 rgb(26,22,38)。
   */
  --brick-green: var(--positive);
  --brick-green-soft: var(--positive-bg);
  --brick-green-line: #a8d7ba;
  --brick-green-edge: #58a174;
  --brick-green-deep: #16563b;
  --brick-amber: #9a6411;
  --brick-amber-soft: #fff4d8;
  --brick-amber-line: #e3c681;
  --brick-amber-edge: #c89539;
  --brick-amber-deep: #583909;
  --brick-blue: #285ea8;
  --brick-blue-soft: #eaf2ff;
  --brick-blue-line: #abc6e9;
  --brick-blue-edge: #6995ce;
  --brick-blue-deep: #1e477d;
  --brick-gray: #7d858f;
  --brick-gray-soft: #f0f2f4;
  --brick-gray-line: #d1d5d9;
  --brick-gray-edge: #aeb4ba;
  /* 空态文字本来就写的 var(--muted)，这里只是把它收进族里，值没动 */
  --brick-gray-deep: var(--muted);
  --brick-purple: #7050a6;
  --brick-purple-soft: #f3edff;
  --brick-purple-line: #c9b6e3;
  --brick-purple-edge: #8969b7;
  --brick-purple-deep: #583c81;
  --brick-red: #a84343;
  --brick-red-soft: #feebeb;
  --brick-red-line: #e8b3b3;
  --brick-red-edge: #c85e5e;
  --brick-red-deep: #852f2f;
  /* teal 只给行业墙用：企业墙六态没占这个色相，避免同色异义（见 .knowledge-brick.industry.*）。
     faint 是「只有摘要」那一档，比 lit 整体再浅一级，四档自成一套、不与 lit 混用。 */
  --brick-teal: #1f7a70;
  --brick-teal-soft: #e4f4f1;
  --brick-teal-line: #9fd0ca;
  --brick-teal-edge: #3f9289;
  --brick-teal-deep: #14544d;
  --brick-teal-faint: #f1f9f8;
  --brick-teal-faint-line: #cbe6e2;
  --brick-teal-faint-edge: #8bbfb8;
  --brick-teal-faint-deep: #3d6f69;
  /* 圆角四档 + 胶囊：面板 12 / 卡片 10 / 控件 8 / 小件 6（改版前 12 档并存） */
  --radius: 12px;
  --radius-m: 10px;
  --radius-s: 8px;
  --radius-xs: 6px;
  /*
   * 海拔两档，投影带一点暖色底（跟 --ink 同源），不用纯黑：
   * shadow-1 = 桌面上的纸卡（卡片、激活的导航项）；shadow-2 = 浮在页面之上（toast、弹层）。
   * 分区从「1px 边框独扛」改成「边框 + 投影」两件套——白卡贴白墙那种糊成一片的问题就是这么来的。
   */
  /* 投影底色跟着 --ink 走（2026-08-18 同步从 rgb(33,30,25) 换成 rgb(26,22,38)）：
     暖投影落在紫偏的画布上会发黄，看起来像卡片脏了一块。 */
  --shadow-1: 0 1px 2px rgba(26, 22, 38, 0.05), 0 4px 14px rgba(26, 22, 38, 0.05);
  --shadow-2: 0 8px 20px rgba(26, 22, 38, 0.1), 0 18px 44px rgba(26, 22, 38, 0.14);
  /* 交互两速：--speed 状态反馈（hover/按下），--speed-slow 展开/位移。
     prefers-reduced-motion 时整体归零（见文件末尾） */
  --speed: 140ms;
  --speed-slow: 200ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.3, 1);
  /* 等宽栈给编号/计数/百分比/时间戳——这个产品满屏都是要上下对齐的数字 */
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  background: var(--canvas);
  color: var(--ink);
  /*
   * 系统栈唯一来源（2026-08-11 与视频区合一，此前 body 与
   * video-workbench.module.css 各持一份、Latin 字形不同代）。
   * 仍然零 web 字体——Google Fonts 国内不可达，见 app/layout.tsx。
   */
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  /* 全站表格数字：这个产品满屏「今日 N 条 / 已看 0/3」，60 秒一次的
     router.refresh() 会让比例数字来回抖宽度，等宽数字一次根治 */
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
  /* 整站数字等宽：这是个满屏金额/进度/计数的工作台，比例数字会让同列数值参差。
     .step-no 原来单独锁过 tabular-nums，提到 body 后那条成了显式重申，不冲突 */
  font-variant-numeric: tabular-nums;
}

/* 交互件统一过渡节奏。transform 也在列表里：按钮按压的 1px 下沉靠它回弹 */
button,
a,
summary,
input,
select,
textarea {
  transition:
    background-color var(--speed) ease,
    border-color var(--speed) ease,
    color var(--speed) ease,
    box-shadow var(--speed) ease,
    transform var(--speed) ease,
    opacity var(--speed) ease;
}

::selection {
  background: var(--brass-bg);
}

button,
input,
textarea,
select {
  color: inherit;
  font: inherit;
}

button {
  cursor: pointer;
  touch-action: manipulation;
  /* 覆盖上面那条全局过渡：按钮的过渡列表**刻意不含 transform**——
     按下沉 1px 要瞬时发生、抬手即回，演 140ms 过程反而显得迟钝 */
  transition: background-color var(--speed) var(--ease-out),
    border-color var(--speed) var(--ease-out), color var(--speed) var(--ease-out),
    box-shadow var(--speed) var(--ease-out);
}

button:disabled {
  cursor: not-allowed;
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--info);
  outline-offset: 2px;
}

.product-app {
  align-items: start;
  background: var(--canvas);
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  min-height: 100vh;
  overflow: visible;
}

.sidebar {
  /* 比画布再深半档的暖灰 + 右侧发丝线：侧栏是「墙」，画布是「桌面」，卡片是「纸」。
     原来三层全在 #f3f3f3±2 里，分区只能靠猜 */
  background: #e9e6df;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100vh;
  min-height: 760px;
  overflow-y: auto;
  padding: 22px 18px;
  position: sticky;
  top: 0;
}

.brand {
  align-items: center;
  /* 原来是 #fff：在有色侧栏里会变成一条突兀的白带，跟着底走 */
  background: transparent;
  display: flex;
  gap: 10px;
  height: 48px;
}

.brand > i {
  align-items: center;
  background: var(--accent);
  border-radius: var(--radius-s);
  /* 品牌块右下角一粒黄铜：全站身份色的锚点，跟量房券金同族 */
  box-shadow: inset -3px -3px 0 var(--brass);
  color: #fff;
  display: flex;
  flex: 0 0 auto;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  height: 40px;
  justify-content: center;
  letter-spacing: 0.04em;
  width: 40px;
}

.brand > div {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.brand b {
  font-size: 16px;
}

.brand span {
  color: var(--muted);
  font-size: 13px;
}

/* 分区小标：降一号、拉开字距，做成「系统栏目标签」而不是一行普通灰字 */
.nav-heading {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  margin: 0;
}

.module-nav,
.screen-nav {
  display: grid;
  gap: 2px;
}

.module-nav button,
.screen-nav button {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: var(--radius-s);
  display: flex;
  gap: 8px;
  min-height: 42px;
  padding: 6px 8px;
  text-align: left;
  width: 100%;
}

.screen-nav button.step-done:hover {
  background: color-mix(in srgb, var(--positive) 12%, #fff);
}

.module-nav button {
  font-size: 15px;
}

.module-nav button i {
  color: var(--muted);
  font-size: 14px;
  font-style: normal;
  width: 28px;
}

.module-nav button > span {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.module-nav button b {
  font-size: 15px;
  line-height: 1.4;
}

.module-nav button small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
}

/* hover 只给还没激活的项：激活项已经是白卡，再变底会闪 */
.module-nav button:hover:not(.active),
.screen-nav button:hover:not(.active):not(.step-done),
.setup-nav summary:hover,
details.daily-nav > summary:hover {
  background: rgba(255, 255, 255, 0.55);
}

.module-nav button.active {
  background: #fff;
  border-radius: var(--radius-s);
  box-shadow: var(--shadow-1);
  color: var(--ink);
  font-weight: 700;
}

.task-nav-groups {
  display: grid;
  gap: 16px;
}

/*
 * 子步骤挂在所属模块底下（2026-08-13）。
 *
 * 这一块原来是侧栏的最后一个兄弟节点，四个模块列完之后才出现——点开 2 号模块，
 * 「2.1 今天要做 / 2.1.1 …」显示在 4 号模块下面，编号说属于 2、位置说属于 4。
 * 搬进 .module-nav 之后位置自己就说清了从属关系，这里只补两件事：
 *   左侧发丝线 = 「下面这几步属于上面那一条」的从属标记；
 *   上下留白替代原来 .sidebar 那 14px flex gap（现在它是 grid 项，gap 只有 2px）。
 */
.module-nav > .task-nav-groups {
  border-left: 1px solid var(--line);
  margin: 8px 0 12px 2px;
  padding-left: 6px;
}

/*
 * 缩进吃掉的那点横向空间，从条目自己的内边距里补回来。
 * 不补的话侧栏收到 250px（≤1380px 断点）时「看今天企微接待效果」这类九字标题
 * 会多折一行——整列凭空长十几像素，而这一列正是靠「一眼扫完」在工作的。
 * 这组值实测与缩进前折行数逐条一致（9 个条目高度全等）。
 */
.module-nav > .task-nav-groups .screen-nav button {
  gap: 6px;
  padding-left: 2px;
}

.daily-nav {
  display: grid;
  gap: 4px;
}

/*
 * 「今天要做」收起来的那一版（2026-08-13）。
 *
 * 折叠骨架与「设置与工具」共用（下面那几条选择器都把两者列在一起），只在字号和
 * 颜色上分权重：今天要做是每天第一眼要看的，标题保持 14px 墨色、默认展开；
 * 设置与工具是低频区，13px 灰、默认收起。两边同一套 ⌄，不再是一个能收一个不能。
 *
 * `.daily-nav` 这个类还挂在另一处：销售号被挡住时那张「这一区只有管理者能进」的
 * section（它没有可折叠的内容，收起来只会藏掉那句解释）。所以这里一律限定
 * `details.daily-nav`，section 那份不受影响。
 */
details.daily-nav {
  display: block;
}

.task-nav-title {
  display: grid;
  gap: 1px;
  padding: 0 8px 3px;
}

.task-nav-title b {
  font-size: 14px;
}

/*
 * 三段式编号（2.1 分区 / 2.1.1 条目）。
 *
 * 条目号单独占一列而不是拼进标题字符串：标题会折行（「检查机器人与客户的
 * 聊天示例」在这个宽度必折），拼在一起的话第二行会顶到编号底下，左边界就散了。
 * 固定宽 + tabular-nums 让这一列上下严格对齐——比例数字下 "1" 比 "2" 窄，
 * 不锁等宽的话每行编号都差几像素，扫一列时看得出来。
 */
.step-no,
.section-no {
  color: var(--muted);
  /* 编号走等宽栈（2026-08-11）：三段号是这套界面的「系统坐标」，等宽让它
     读起来像刻度而不是普通文字，也顺便把上下两行的点对齐了 */
  font-family: var(--font-mono);
  font-style: normal;
  font-variant-numeric: tabular-nums;
  font-weight: 400;
}

.section-no {
  margin-right: 6px;
}

.screen-nav button .step-no {
  flex: none;
  /* 等宽字形略宽于原比例字形，11px 才稳进 38px 列宽 */
  font-size: 11px;
  width: 38px;
}

/* 标题列吃掉剩余宽度并独立折行，缩进自然对齐到编号右边 */
.screen-nav button > span {
  min-width: 0;
}

.screen-nav button.active .step-no,
.screen-nav button.step-done .step-no {
  color: inherit;
}

.task-nav-title small,
.setup-nav summary small,
details.daily-nav > summary small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
}

.setup-nav {
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.setup-nav summary,
details.daily-nav > summary {
  align-items: center;
  border-radius: var(--radius-s);
  color: var(--muted);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  list-style: none;
  min-height: 42px;
  padding: 4px 8px;
  transition: background-color var(--speed) var(--ease-out);
}

.setup-nav summary::-webkit-details-marker,
details.daily-nav > summary::-webkit-details-marker {
  display: none;
}

.setup-nav summary::after,
details.daily-nav > summary::after {
  content: "›";
  font-size: 20px;
  line-height: 1;
  transform: rotate(90deg);
}

.setup-nav[open] summary::after,
details.daily-nav[open] > summary::after {
  transform: rotate(-90deg);
}

/*
 * 模块按钮上的收放箭头（2026-08-24）。字形、字号、旋向都照上面那两条抄，
 * 不另起一套——侧栏这一列现在有三层可收放的东西（模块 / 今天要做 / 设置与工具），
 * 三层用三种箭头会让人以为它们是三种不同的控件。
 *
 * 靠 margin-left:auto 顶到行尾：模块按钮是 flex，标题那格 min-width:0 会吃掉
 * 剩余宽度，不顶的话箭头会紧贴在 caption 后面。
 */
.module-nav button .module-caret {
  color: var(--muted);
  flex: none;
  font-size: 20px;
  font-style: normal;
  line-height: 1;
  margin-left: auto;
  transform: rotate(90deg);
}

.module-nav button .module-caret.open {
  transform: rotate(-90deg);
}

/*
 * 「今天要做」与「设置与工具」的分权重：骨架共用（上面几条），这里只调轻重。
 * 今天要做是每天第一眼要看的——标题按原来的 14px 墨色，不跟着设置区变灰变小；
 * 高度也比设置区矮一档，因为它下面永远跟着一串条目，两个 42px 的头叠在一起
 * 会把整列顶下去。
 */
details.daily-nav > summary {
  color: var(--ink);
  min-height: 34px;
  padding: 0 8px 3px;
}

details.daily-nav > summary b {
  font-size: 14px;
}

details.daily-nav > .screen-nav {
  margin-top: 2px;
}

.setup-nav summary > span,
details.daily-nav > summary > span {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.setup-nav summary b {
  font-size: 13px;
}

.setup-nav .screen-nav {
  margin-top: 2px;
}

.setup-nav .screen-nav button {
  color: var(--muted);
  font-size: 13px;
  min-height: 36px;
}

.setup-nav .screen-nav button.active {
  color: var(--ink);
}

.screen-nav button {
  color: var(--ink-2);
  font-size: 14px;
  min-height: 40px;
}

/*
 * 状态记号（✓ 已上线 / ○ 还没上线）挪到行尾（2026-08-13）。
 *
 * 它原来钉在最左边一列，于是这一列的左边界是记号、编号被挤到第二列 —— 而店长
 * 找路用的是编号（运营在电话里说的是「去 2.2.1」，不是「去打勾那条」）。
 * 状态是读完标题之后才需要的信息，本来就该在行尾。
 *
 * ⚠️ 这一改**不省宽度**：不管记号在头还是在尾，它的 10px 加一个 6px flex gap
 * 照样要占掉 16px，标题列一个像素都没多。第一版曾在这里写「顺带把 16px 还给标题」
 * 并额外加了 padding-left:6px，结果是反向的 —— 实测标题列 139px → 133px，
 * 「看今天企微接待效果」从一行变两行。宽度问题的真正解法是缩短条目文案
 * （video 模块早就这么干了，见 workbench.tsx 的 VIDEO_*_NAV_LABELS），不是挪位置。
 * 所以这里只保留 margin-left:auto，宽度与改动前逐字节一致。
 */
.screen-nav button i {
  color: var(--line-dark);
  font-size: 12px;
  font-style: normal;
  /* 推到行尾。标题长短不一时记号仍靠右对齐成一条竖列，比跟着字尾跑好扫 */
  margin-left: auto;
  width: 10px;
}

.screen-nav button.active {
  background: var(--surface);
  color: var(--ink);
  font-weight: 700;
}

.screen-nav button.active i {
  color: var(--ink);
}

/* 本产品新增：做完的那一步整行点亮成绿块。沿用原型的 --positive 语义色，     */
/* 与屏顶「真实数据」徽章同一套绿，不另起一种绿让店长猜两者什么关系。         */
/* 写在 .active 之后，所以「当前屏且已完成」时绿块赢——见 stepButton 注释。   */
.screen-nav button.step-done,
.setup-nav .screen-nav button.step-done {
  background: var(--positive-bg);
  color: var(--positive);
}

.screen-nav button.step-done i,
.screen-nav button.step-done.active i {
  color: var(--positive);
}

/* 「这屏能用了，但你还没做完」——第三态，和 step-done 明确区分开：         */
/* 只给实心圆点上色，**整行不铺底色**。铺了底就跟绿块糊成一片，等于又回到  */
/* 「一个绿表达两件事」；不上色又跟「还没接通」的空心圈分不出来。          */
/* 颜色用中性墨色而不是第二种绿：绿在本产品里已经专门表示「做完了/已核验」。 */
/* 「当前屏」只用左侧竖杠 + 加粗表示，不再用实心圆点——圆点跟绿勾放一起容易被 */
/* 当成「也点亮了」。竖杠是位置指示，勾是完成指示，两个形状不会混。            */
.screen-nav button.active {
  /* 竖杠语义不变（位置指示），叠上纸卡投影让「你在这」从侧栏里浮出来 */
  box-shadow: inset 3px 0 0 var(--ink), var(--shadow-1);
}

.screen-nav button.step-done.active {
  box-shadow: inset 3px 0 0 var(--positive), var(--shadow-1);
}

/* 审核台入口的待审计数（原 workbench.tsx 行内样式收编）。等宽数字：
   它每 60 秒随 router.refresh() 变一次，比例字体会让整行左右抖 */
.nav-count {
  background: var(--warning-bg);
  border-radius: 999px;
  color: var(--warning);
  font-family: var(--font-mono);
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
  margin-left: 6px;
  padding: 1px 7px;
}

/* 「完成」二字：不靠颜色也读得懂，截图转黑白 / 色盲都不受影响 */
.step-flag {
  color: var(--positive);
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
  margin-left: auto;
  padding-left: 6px;
}

/* 本产品新增：屏 sales-03「这题为什么挑给你」*/
.rubric-why {
  background: var(--warning-bg);
  border-radius: 8px;
  display: grid;
  gap: 3px;
  margin-bottom: 10px;
  padding: 8px 11px;
}

.rubric-why b {
  color: var(--warning);
  font-size: 12px;
}

.rubric-why span {
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.5;
}

.mobile-step-picker {
  display: none;
}

/*
 * 账号区常驻侧栏底部（2026-08-13）。
 *
 * 它装着「今日新增线索 N · 待检查 N」和管理者的「成员管理」入口，原来只是 flex 的
 * 最后一项 —— 侧栏一超高就被顶出视口。实测 1440×900 打开屏 2.2.1：侧栏内容高
 * 1111px、账号区 top=1012（视口才 900）；1366×768 更狠，溢出 357px、top=1026。
 * 也就是说**管理者在大多数设置屏上根本看不到成员管理入口**，除非他自己想到
 * 侧栏还能往下滚 —— 而侧栏并没有任何「下面还有」的提示。
 *
 * 用 sticky 而不是给侧栏套一个独立滚动容器：后者要改 DOM 结构，而且 margin-top:auto
 * 那条「内容不满时也贴底」的行为还得另外补回来。sticky 让两件事同时成立。
 *   bottom 取负值抵掉 .sidebar 的 padding-bottom，才能真正贴到侧栏底边；
 *   横向负 margin 出血到侧栏两侧，于是滚动的内容是从它**背后**过去，不会露边。
 */
.account-summary {
  align-items: center;
  /* 底色必须实心：内容从背后滚过去，半透明会糊成上下两层字 */
  background: #e9e6df;
  border-top: 1px solid var(--line);
  bottom: -22px;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  /* top:auto 保留原来的贴底行为；左右 -18 / 下 -22 抵掉 .sidebar 的 padding */
  margin: auto -18px -22px;
  /* 横向 18(侧栏padding) + 8(原内缩) = 26，让它和上面的导航项左边界仍然对齐 */
  padding: 12px 26px 22px;
  position: sticky;
}

.account-summary > div {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.account-summary b {
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-summary span {
  color: var(--muted);
  font-size: 12px;
}

.account-summary button {
  background: transparent;
  border: 0;
  border-radius: var(--radius-xs);
  color: var(--muted);
  font-size: 12px;
  padding: 6px;
}

.account-summary button:hover {
  color: var(--ink);
}

.account-access {
  align-items: center;
  background: var(--canvas);
  display: flex;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
}

.account-access-panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  /* 登录卡是页面上唯一浮起的东西，用弹层档投影 */
  box-shadow: var(--shadow-2);
  display: grid;
  gap: 20px;
  max-width: 520px;
  padding: 32px;
  width: 100%;
}

.account-access-header {
  display: grid;
  gap: 5px;
}

.account-access-kicker {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.account-access-header h1,
.account-access-success h2 {
  font-size: 28px;
  margin: 0;
}

.account-access-header p,
.account-access-success p {
  color: var(--muted);
  margin: 0;
}

.account-access-tabs {
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 22px;
}

.account-access-tabs button {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-weight: 700;
  padding: 10px 0;
}

.account-access-tabs button.active {
  border-bottom-color: var(--ink);
  color: var(--ink);
}

.account-access-form,
.account-access-payment,
.account-access-success {
  display: grid;
  gap: 16px;
}

.account-access-field {
  display: grid;
  gap: 6px;
}

.account-access-field > span,
.account-access-payment-methods legend {
  font-size: 13px;
  font-weight: 700;
}

.account-access-field input {
  background: #fff;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-s);
  min-height: 46px;
  padding: 0 12px;
  transition: border-color var(--speed) var(--ease-out);
  width: 100%;
}

/*
 * 下拉跟输入框长一样。
 *
 * 在这之前 `<select>` 用的是浏览器默认样式——同一张表单里输入框是圆角、
 * 下拉是四四方方的直角，而且高度也对不上。原生控件不继承旁边的样式，
 * 加控件时很容易漏掉这一条。
 *
 * `appearance: none` 会把系统那个箭头一起去掉，所以自己画一个（两条渐变拼成的三角），
 * 并留出 34px 右内边距免得文字压到箭头上。
 */
.account-access-field select {
  appearance: none;
  -webkit-appearance: none;
  background-color: #fff;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 18px) 54%, calc(100% - 13px) 54%;
  background-repeat: no-repeat;
  background-size: 5px 5px, 5px 5px;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-s);
  color: inherit;
  cursor: pointer;
  font: inherit;
  min-height: 46px;
  padding: 0 34px 0 12px;
  transition: border-color var(--speed) var(--ease-out);
  width: 100%;
}

.account-access-field input:hover,
.account-access-field select:hover {
  border-color: var(--muted);
}

.account-access-field select:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}

.account-access-field small {
  color: var(--muted);
}

.account-access-error {
  color: var(--danger) !important;
  font-size: 12px;
  margin: 0;
}

/* 改密表单在登录页里就地出现时，需要一行小标题说明"为什么现在要改" */
.account-access-subhead {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
}

.account-access-primary,
.account-access-secondary {
  border-radius: var(--radius-s);
  font-weight: 700;
  min-height: 46px;
  padding: 0 16px;
}

.account-access-primary {
  background: var(--ink);
  border: 1px solid var(--ink);
  color: #fff;
}

.account-access-primary:hover:not(:disabled) {
  background: color-mix(in srgb, var(--ink) 84%, #fff);
  border-color: color-mix(in srgb, var(--ink) 84%, #fff);
}

.account-access-secondary:hover:not(:disabled) {
  background: var(--soft);
}

.account-access-primary:active:not(:disabled),
.account-access-secondary:active:not(:disabled) {
  transform: translateY(1px);
}

.account-access-primary:disabled {
  background: color-mix(in srgb, var(--ink) 34%, #fff);
  border-color: transparent;
}

.account-access-secondary {
  background: #fff;
  border: 1px solid var(--line-dark);
}

.account-access-secondary:hover:not(:disabled) {
  background: var(--soft);
  border-color: var(--muted);
}

.account-access-demo-hint,
.account-access-demo-warning,
.account-access-account-summary {
  background: var(--soft);
  border-radius: 8px;
  display: grid;
  font-size: 12px;
  gap: 3px;
  padding: 12px;
}

.account-access-demo-warning {
  background: var(--warning-bg);
  color: var(--warning);
}

.account-access-agreement,
.account-access-payment-methods label {
  align-items: flex-start;
  display: flex;
  font-size: 13px;
  gap: 8px;
}

.account-access-agreement input,
.account-access-payment-methods input {
  flex: 0 0 auto;
  margin-top: 3px;
}

.account-access-price {
  align-items: baseline;
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 2px;
  padding-bottom: 14px;
}

.account-access-price span,
.account-access-price small {
  color: var(--muted);
}

.account-access-price strong {
  font-size: 34px;
}

.account-access-payment-methods {
  border: 0;
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
}

.account-access-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.account-access-success {
  justify-items: center;
  text-align: center;
}

.account-access-success .account-access-account-summary {
  justify-items: start;
  text-align: left;
  width: 100%;
}

.account-access-success-mark {
  align-items: center;
  background: var(--positive-bg);
  border-radius: 50%;
  color: var(--positive);
  display: flex;
  font-size: 28px;
  font-weight: 800;
  height: 58px;
  justify-content: center;
  width: 58px;
}

.app-main {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-width: 0;
}

/*
 * 头部开放化（2026-08-11）：白条 + 底边框 + 126px 硬高度那一代退役。
 * 视频区（workHead）早已是「透明底 + 大标题直接排在画布上」，其余 40+ 屏
 * 还顶着一条工具栏——同一个侧栏切过去像换了个产品。现在四个模块同一种呼吸：
 * eyebrow 小字 → 大标题 → 摘要 → meta，整页回到一张纸上。
 */
.app-header {
  background: transparent;
  border-bottom: 0;
  padding: 30px 28px 0;
}

.app-header > div:first-child {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.app-header span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.03em;
}

/*
 * 详情屏眉栏里的「回上一级」（2026-08-13）。
 *
 * 做成眉栏内联、而不是在标题上方单开一行：详情屏都是从列表点进来的，返回是
 * 高频但**次要**的动作 —— 单开一行会把 h1 往下推，27 个详情屏每屏都少半行正文。
 * 而眉栏那句「模块 · 详细记录」里的后半截本来就是死字，换掉它净赚。
 *
 * 箭头走 ::before 而不是写进文案：写进文案时读屏会把「←」念成「向左箭头」
 * 或者整个跳过，两种都不好。伪元素对读屏隐形，念出来就是干净的
 * 「返回『上传本店资料』」。
 */
.crumb-up {
  background: transparent;
  border: 0;
  border-radius: var(--radius-xs);
  color: var(--ink-2);
  font-weight: 600;
  margin-left: 1px;
  padding: 2px 6px 2px 4px;
  text-decoration: underline;
  /* 常态下划线压到发丝级：它在眉栏里，不该比 h1 还先被看见 */
  text-decoration-color: var(--line-dark);
  text-underline-offset: 3px;
}

.crumb-up::before {
  content: '←';
  display: inline-block;
  margin-right: 4px;
  /* 方向就是这个控件的含义，hover 时让它照着那个方向挪一下 */
  transition: transform var(--speed) var(--ease-out);
}

.crumb-up:hover {
  background: rgba(255, 255, 255, 0.6);
  color: var(--ink);
  text-decoration-color: currentColor;
}

.crumb-up:hover::before {
  transform: translateX(-2px);
}

.app-header h1 {
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 0;
}

.app-header p {
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.6;
  margin: 2px 0 0;
  max-width: 760px;
}

.app-header small {
  color: var(--muted);
  font-size: 12px;
}

.content-layout {
  align-items: start;
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(660px, 1fr) 360px;
  padding: 20px 28px 48px;
}
.content-layout.detail-mode {
  grid-template-columns: minmax(0, 1fr);
}

/* 主区吃满整宽，「操作要点 / 本页演示」沉到正文下面并排放。
 * 用在主区本身就是多栏的屏（登记表在 app/wb/workbench.tsx 的 WIDE_MAIN_SCREEN_IDS）：
 * 屏 2.1.2 主区已经是「表格 + 逐句出处」两栏、左栏还钉死 520px，
 * 右边再挂 360px 的 help-column，出处那栏只剩三百来 px，积木按钮排不开。 */
.content-layout.wide-mode {
  grid-template-columns: minmax(0, 1fr);
}

.content-layout.wide-mode .help-column {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.workspace {
  background: transparent;
  border: 0;
  border-radius: 0;
  display: block;
  min-width: 0;
  overflow: visible;
  padding: 0;
}

/*
 * 数据来源条（2026-08-11 从「两行灰字」升级成系统状态条）：它是「页面说的话
 * 跟后台实际有的东西一致」这条产品要求的落点，视觉权重只许升不许降。
 * 白底细边一条，左边语义色圆点 + 标签，右边一句人话。
 */
.demo-notice {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-1);
  display: flex;
  flex: 0 0 auto;
  gap: 9px;
  margin: 0 0 14px;
  padding: 8px 12px;
}

.demo-notice b {
  color: var(--ink-2);
  flex: 0 0 auto;
  font-size: 12px;
}

.demo-notice span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.workspace-scroll {
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
  padding: 0;
}

.help-column {
  align-content: start;
  display: grid;
  gap: 12px;
  grid-auto-rows: max-content;
  grid-template-rows: none;
  overflow: visible;
}

.help-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-1);
  min-height: 0;
  overflow: visible;
  padding: 16px;
}

.help-card h3 {
  font-size: 17px;
  line-height: 23px;
  margin: 0 0 6px;
}

.help-card p,
.help-card li {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}

.help-card p {
  margin: 0;
}

.help-card ol,
.help-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.help-card ol,
.help-card ul {
  display: grid;
  gap: 10px;
}

.help-card li {
  align-items: start;
  display: grid;
  gap: 9px;
  grid-template-columns: 26px minmax(0, 1fr);
}

.help-card li i {
  align-items: center;
  background: var(--info-bg);
  border: 1px solid color-mix(in srgb, var(--info) 28%, white);
  border-radius: 50%;
  color: var(--info);
  display: flex;
  font-size: 12px;
  font-style: normal;
  font-weight: 750;
  height: 24px;
  justify-content: center;
  margin-top: 1px;
  width: 24px;
}

.completion-inline {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 4px;
  margin-top: 14px;
  padding-top: 12px;
}

.completion-inline b {
  font-size: 13px;
}

.completion-inline span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
}

.demo-video {
  align-items: center;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex;
  font-size: 14px;
  font-weight: 650;
  height: 88px;
  justify-content: center;
  margin-top: 8px;
  padding: 10px;
  text-align: center;
  width: 100%;
}

.demo-player {
  display: grid;
  gap: 7px;
  margin-top: 10px;
}

.demo-player video {
  aspect-ratio: 16 / 9;
  background: #161616;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  display: block;
  width: 100%;
}

.demo-player b {
  font-size: 14px;
  line-height: 1.5;
}

.demo-player span,
.related-copy {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
}

.toast {
  animation: toast-in var(--speed-slow) var(--ease-out);
  background: var(--ink);
  border: 0;
  border-radius: var(--radius-m);
  bottom: 24px;
  box-shadow: var(--shadow-2);
  color: #fff;
  font-size: 14px;
  left: 50%;
  padding: 12px 18px;
  position: fixed;
  transform: translateX(-50%);
  z-index: 20;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.visually-hidden {
  height: 1px;
  left: -9999px;
  overflow: hidden;
  position: absolute;
  width: 1px;
}

/*
 * 按钮四态（2026-08-11）：default / hover / active / disabled 全站同一套。
 * 边框从 #bdbdbd（1.88:1）换成 --line-dark（3.16:1）——白卡上白按钮，
 * 边框是唯一能看出「这是个按钮」的东西，必须过 WCAG 1.4.11 的 3:1。
 * 视频区当年为此逐屏打过 #8f8f8f 补丁，根因在这里，现已归一。
 */
.ui-button {
  align-items: center;
  background: #fff;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-s);
  display: inline-flex;
  font-size: 14px;
  font-weight: 650;
  justify-content: center;
  line-height: 1.4;
  min-height: 42px;
  padding: 7px 14px;
  text-decoration: none;
}

/* 按钮三段反馈：悬停变底、按下沉 1px、失效不参与。「按得动」要在碰到之前就看得出来 */
.ui-button:hover:not(:disabled) {
  background: color-mix(in srgb, var(--ink) 4%, #fff);
  border-color: var(--muted);
}

/* 按下沉 1px：反馈瞬时发生（transform 不在过渡列表里），抬手即回 */
.ui-button:active:not(:disabled) {
  transform: translateY(1px);
}

.ui-button-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.ui-button-primary:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent) 84%, #fff);
  border-color: color-mix(in srgb, var(--accent) 84%, #fff);
}

.ui-button-danger {
  border-color: var(--danger-line);
  color: var(--danger);
}

.ui-button-danger:hover:not(:disabled) {
  background: var(--danger-bg);
  border-color: color-mix(in srgb, var(--danger) 36%, #fff);
}

/* 完成态按钮（例：素材列表里的「已提」）。沿用 --positive 语义色 */
.ui-button-positive {
  background: var(--positive-bg);
  border-color: var(--positive-line);
  color: var(--positive);
}

/* 「已提」是终态陈述不是被禁用的操作，别再蒙一层半透明搞得像坏了 */
.ui-button-positive:disabled {
  opacity: 1;
}

.ui-button-ghost {
  background: transparent;
  border-color: transparent;
}

.ui-button-ghost:hover:not(:disabled) {
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  border-color: transparent;
}

.ui-button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

/* 徽章带 1px 同色系细边（color-mix 自动跟语义色走）：白卡上的纯色块会「糊」
   在底上，一圈 hairline 让它读成「系统打的标」而不是一抹颜色 */
.pill {
  align-items: center;
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
  border-radius: 999px;
  color: var(--ink-2);
  display: inline-flex;
  font-size: 12px;
  font-weight: 650;
  justify-content: center;
  line-height: 1.3;
  min-height: 26px;
  padding: 4px 9px;
  white-space: nowrap;
}

.pill-positive {
  background: var(--positive-bg);
  color: var(--positive);
}

.pill-warning {
  background: var(--warning-bg);
  color: var(--warning);
}

.pill-danger {
  background: var(--danger-bg);
  color: var(--danger);
}

.pill-info {
  background: var(--info-bg);
  color: var(--info);
}

/* 卡片：边框变轻（token 已换）+ 一层几乎不可见的贴地影。从「框出来的区块」
   变成「浮在画布上的面」——景深代替粗边框做分区 */
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-1);
  min-width: 0;
  padding: 16px;
}

/* 内容更宽敞的卡（审核台/机器状态页原来用行内 style 逐处打的 padding 补丁） */
.card-roomy {
  padding: 20px 22px;
}

.card-head {
  align-items: flex-start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 10px;
}

.card-head h3 {
  font-size: 15px;
  line-height: 1.5;
  margin: 0;
}

.card-head p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
  margin: 2px 0 0;
}

.stack {
  display: grid;
  gap: 10px;
}

.filter-bar {
  align-items: center;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  min-height: 64px;
  padding: 10px 12px;
}

.filter-bar > div:not(.segmented) {
  display: grid;
  gap: 3px;
}

.filter-bar b {
  font-size: 14px;
}

.filter-bar span {
  color: var(--muted);
  font-size: 13px;
}

.filter-bar input,
.filter-bar select {
  background: #fff;
  /* 输入控件的边框走交互档（3:1），跟结构性卡片边框分开 */
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-s);
  font-size: 13px;
  height: 42px;
  padding: 0 9px;
}

.progress-track {
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  border-radius: 99px;
  display: block;
  height: 7px;
  min-width: 70px;
  overflow: hidden;
}

/*
 * 0 值 = 空槽位，不是「进度条走到 0」（2026-08-13）。
 *
 * 满宽实心灰轨在视觉上等同于骨架屏。屏 2.2.1 八个类目全为 0 时，八条实心灰条摞成
 * 一片，读起来像页面还在加载 —— 而真相是「这里确实什么都没有，等你去传」。
 * 改成虚线空轨：一眼是待填的槽，不会被当成正在填的进度。
 */
.progress-track.is-empty {
  background: transparent;
  /* 全局 box-sizing:border-box，边框算在那 7px 里，高度不用另减 */
  border: 1px dashed var(--line);
}

.progress-track > span {
  background: var(--positive);
  border-radius: inherit;
  display: block;
  height: 100%;
  transition: width var(--speed-slow) var(--ease-out);
}

.chip-wrap,
.button-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.business-layout {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1.8fr) minmax(230px, 1fr);
}

.selection-group {
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  display: grid;
  gap: 8px;
  margin-bottom: 8px;
  padding: 10px;
}

.selection-title {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.selection-title b {
  font-size: 14px;
}

.selection-title span {
  color: var(--muted);
  font-size: 12px;
}

.check-grid {
  display: grid;
  gap: 5px 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.check-option {
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  display: flex;
  font-size: 13px;
  gap: 7px;
  min-height: 40px;
  padding: 6px 9px;
  text-align: left;
}

.check-option i {
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 11px;
  font-style: normal;
  height: 14px;
  text-align: center;
  width: 14px;
}

.check-option.selected {
  background: var(--positive-wash);
  border-color: var(--positive);
}

.check-option.selected i {
  background: var(--positive);
  border-color: var(--positive);
  color: #fff;
}

.summary-bar {
  align-items: center;
  background: var(--soft);
  border-radius: var(--radius-xs);
  display: flex;
  justify-content: space-between;
  padding: 8px 10px;
}

.summary-bar b {
  font-size: 13px;
}

.saved-card {
  align-content: start;
  display: grid;
  gap: 8px;
}

.identity-card {
  background: var(--soft);
  border-radius: var(--radius-s);
  display: grid;
  gap: 2px;
  padding: 9px;
}

.identity-card b,
.saved-block b {
  font-size: 13px;
}

.identity-card span,
.saved-block span {
  color: var(--muted);
  font-size: 12px;
}

.saved-block {
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  display: grid;
  gap: 7px;
  padding: 9px;
  position: relative;
}

.saved-block > div:first-child {
  display: flex;
  gap: 6px;
}

.link-actions {
  display: flex;
  gap: 8px;
  position: absolute;
  right: 8px;
  top: 8px;
}

.link-actions button,
.row-actions button,
.text-button,
.text-link,
.card-actions button {
  background: transparent;
  border: 0;
  border-radius: var(--radius-xs);
  color: var(--info);
  font-size: 12px;
  min-height: 32px;
  padding: 4px;
}

.link-actions button:last-child,
.row-actions button:last-child {
  color: var(--danger);
}

.media-cover {
  align-items: center;
  aspect-ratio: 16 / 9;
  background: #252525;
  border-radius: 6px;
  color: #fff;
  display: flex;
  justify-content: center;
  min-height: 50px;
  overflow: hidden;
  position: relative;
}

.media-cover.portrait {
  aspect-ratio: 9 / 16;
}

.media-cover > img {
  height: 100%;
  inset: 0;
  object-fit: cover;
  position: absolute;
  width: 100%;
}

.media-cover::after {
  background: linear-gradient(180deg, rgba(0,0,0,.03) 45%, rgba(0,0,0,.46));
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.media-cover > .media-cover-play {
  align-items: center;
  background: rgba(255,255,255,.86);
  border-radius: 50%;
  color: #222;
  display: flex;
  font-size: 12px;
  height: 27px;
  justify-content: center;
  position: relative;
  z-index: 1;
  width: 27px;
}

.media-cover > .media-cover-duration {
  background: rgba(0,0,0,.58);
  border-radius: 4px;
  bottom: 5px;
  font-family: var(--font-mono);
  font-size: 11px;
  left: 5px;
  padding: 3px 5px;
  position: absolute;
  z-index: 1;
}

.media-cover.preview-unavailable {
  background: #363636;
}

.media-cover.preview-unavailable::after {
  display: none;
}

.media-cover > .media-cover-error {
  color: rgba(255,255,255,.88);
  font-size: 11px;
  line-height: 1.45;
  max-width: 90%;
  padding: 7px;
  text-align: center;
}

/* 页面内直接播放抖音原片（官方内嵌播放器 iframe）。竖屏 9:16，跟竖版封面同一占位 */
.douyin-embed {
  aspect-ratio: 9 / 16;
  background: #000;
  border: 0;
  border-radius: 6px;
  display: block;
  width: 100%;
}

.douyin-embed-wrap {
  max-width: 320px;
  width: 100%;
}

/* 意向榜的行是「封面 | 文字 | 按钮」grid，播放器另起一行横跨整行，别挤坏原布局 */
.video-feed-row > .douyin-embed-wrap {
  grid-column: 1 / -1;
}

/* 意向榜每条左侧的封面缩略图，点击就地展开播放。视觉沿用 .media-cover 那套 */
.feed-cover {
  aspect-ratio: 9 / 16;
  background: #252525;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  display: block;
  overflow: hidden;
  padding: 0;
  position: relative;
  width: 64px;
}

.feed-cover > img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.feed-cover > .feed-cover-play {
  align-items: center;
  background: rgba(255,255,255,.86);
  border-radius: 50%;
  color: #222;
  display: flex;
  font-size: 10px;
  height: 22px;
  justify-content: center;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 22px;
}

.feed-cover:hover > .feed-cover-play {
  background: #fff;
}

/* 抠不出视频号的条目：占位保持三列对齐，但一眼看得出点不了 */
.feed-cover.feed-cover-empty {
  cursor: default;
  opacity: .35;
}

/* 每条右上角的「去抖音」小图标：跳原片看评论区。刻意做小做淡，主操作是「做这条」 */
.video-feed-actions > .feed-share {
  align-self: flex-end;
  color: var(--muted);
  display: inline-flex;
  padding: 5px;
}

.video-feed-actions > .feed-share:hover {
  color: var(--ink);
}

/* ── 推荐指数徽标（波二板块 1）────────────────────────────────────────
   摆在指标行最前面，是那一行里唯一一个「已经替你权衡完四项」的数。
   刻意做得比标题轻、比原始数字重：它是决策辅助，不是标题的一部分。
   ⚠️ 它只是信息层——DailyFeed 的顺序仍由上游 material-feed 定。 */
.reco-badge-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 8px;
  vertical-align: baseline;
}

.reco-badge {
  background: var(--info-bg);
  border-radius: 999px;
  color: var(--info);
  cursor: help;          /* 有 title 可看，鼠标形状先说出来 */
  font-size: 12px;
  font-weight: 700;
  padding: 2px 8px;
  white-space: nowrap;
}

/* 素材不齐（assets_fit=0）：指数照显不隐藏，但视觉上降一档，
   跟旁边那句「需补实拍素材」是同一件事的两种说法 */
.reco-badge-weak {
  background: var(--soft);
  color: var(--muted);
}

/* 降权标注。用 warning 而不是 danger：这条选题不是坏的，是【现在做不了】，
   店长补完素材它就能做——danger 会让人以为该躲开它 */
.reco-caveat {
  background: var(--warning-bg);
  border-radius: 999px;
  color: var(--warning);
  cursor: help;
  font-size: 12px;
  font-weight: 650;
  padding: 2px 7px;
  white-space: nowrap;
}

.asset-table {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}

.asset-table-head,
.asset-table-row {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: 95px minmax(130px, .9fr) 72px 70px minmax(180px, 1.2fr) 70px;
  min-height: 48px;
  padding: 9px;
}

.asset-table-head {
  background: var(--soft);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
}

.asset-table-row {
  border-top: 1px solid var(--line-soft);
  font-size: 12px;
}

.asset-table-row .media-cover {
  grid-row: span 2;
}

.asset-table-row > div:nth-child(2) {
  display: grid;
  gap: 3px;
}

.asset-table-row b {
  font-size: 13px;
}

.asset-table-row small,
.asset-table-row span {
  color: var(--muted);
}

.row-actions {
  display: grid;
  gap: 5px;
}

.spokesperson-layout {
  display: grid;
  gap: 10px;
  grid-template-columns: 210px minmax(0, 1fr);
}

.profile-card {
  align-content: start;
  display: grid;
  gap: 10px;
  grid-row: span 2;
}

.avatar-large {
  align-items: center;
  background: linear-gradient(135deg,#272a2d,#7d8b84);
  border-radius: 8px;
  color: #fff;
  display: flex;
  font-size: 34px;
  font-weight: 800;
  height: 190px;
  justify-content: center;
}

.profile-portrait {
  aspect-ratio: 3 / 4;
  border-radius: 8px;
  display: block;
  object-fit: cover;
  object-position: center 30%;
  width: 100%;
}

.profile-meta {
  display: grid;
  gap: 5px;
}

.profile-meta b { font-size: 14px; }
.profile-meta span { color: var(--muted); font-size: 12px; }

.spec-card {
  display: grid;
  gap: 7px;
}

.spec-row {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  display: grid;
  gap: 9px;
  grid-template-columns: 62px minmax(0,1fr) auto auto;
  min-height: 88px;
  padding: 8px;
}

.spec-row .media-cover { height: 74px; }
.spec-row > div:nth-child(2) { display: grid; gap: 3px; }
.spec-row b { font-size: 13px; }
.spec-row span,.spec-row small { color: var(--muted); font-size: 11px; }

.demo-card {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: 90px 1fr;
}

.demo-card .card-head { grid-column: 1/-1; }
.demo-card .media-cover { height: 115px; }
.demo-card p { color: var(--muted); font-size: 13px; line-height: 1.7; }

.segmented {
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  border-radius: var(--radius-s);
  display: flex;
  gap: 3px;
  padding: 3px;
}

.segmented button,
.version-tabs button {
  background: transparent;
  border: 0;
  border-radius: var(--radius-xs);
  color: var(--ink-2);
  font-size: 12px;
  min-height: 38px;
  padding: 0 9px;
}

.segmented button:hover:not(.active),
.version-tabs button:hover:not(.active) {
  color: var(--ink);
}

.segmented button.active,
.version-tabs button.active {
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow-1);
  color: var(--ink);
  font-weight: 700;
}

.top-video-grid {
  display: grid;
  gap: 9px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.top-video-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-1);
  display: grid;
  gap: 5px;
  padding: 9px;
  position: relative;
  transition: border-color var(--speed) var(--ease-out),
    box-shadow var(--speed) var(--ease-out);
}

.top-video-card:hover:not(.selected) {
  border-color: var(--line-dark);
}

.top-video-card.selected {
  border-color: var(--info);
  box-shadow: 0 0 0 2px var(--info-bg), var(--shadow-1);
}

.top-video-card > button {
  background: transparent;
  border: 0;
  padding: 0;
}

.top-video-card .media-cover { min-height: 150px; }
.top-video-card > b { font-size: 12px; line-height: 1.45; }
.top-video-card > span { color: var(--muted); font-size: 11px; }

.rank-badge {
  background: var(--ink);
  border-radius: var(--radius-xs);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11px;
  left: 11px;
  padding: 3px 5px;
  position: absolute;
  top: 11px;
}

.metric-row {
  display: grid;
  gap: 4px;
  grid-template-columns: repeat(2,1fr);
}

.metric-row small {
  color: var(--muted);
  font-size: 11px;
}

.card-actions {
  display: flex;
  gap: 8px;
}

.analysis-state {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: center;
  min-height: 500px;
  text-align: center;
}

.analysis-state h3 { margin: 0; }
.analysis-state p,.analysis-state span { color: var(--muted); font-size: 14px; }
.analysis-state .progress-track { width: 320px; }

.spinner {
  animation: spin 0.8s linear infinite;
  border: 2px solid var(--line);
  border-radius: 50%;
  border-top-color: var(--ink);
  height: 36px;
  width: 36px;
}

@keyframes spin { to { transform: rotate(360deg); } }

.report {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-1);
  display: grid;
  gap: 12px;
  padding: 16px;
}

.report-title {
  align-items: flex-start;
  display: flex;
  gap: 14px;
  justify-content: space-between;
}

.report-title h2 { font-size: 18px; margin: 8px 0 3px; }
.report-title p,.report-summary p { color: var(--muted); font-size: 13px; line-height: 1.7; margin: 0; }

.report-summary {
  background: var(--soft);
  border-left: 3px solid var(--ink);
  border-radius: var(--radius-xs);
  padding: 10px;
}

.report-summary strong { font-size: 14px; }

.report-table > div {
  display: grid;
  gap: 8px;
  grid-template-columns: 95px 80px 1.2fr 1fr;
  padding: 8px;
}

.report-table > div:first-child { background: var(--soft); color: var(--ink-2); font-size: 12px; }
.report-table > div + div { border-bottom: 1px solid var(--line-soft); font-size: 12px; }

.insight-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3,1fr);
}

.insight-grid p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
  margin: 0;
}

.task-progress {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: auto 1fr auto;
}

.task-progress b,.task-progress span { font-size: 13px; }
.task-progress span { color: var(--muted); }

.pipeline {
  display: grid;
  gap: 7px;
  grid-template-columns: repeat(6,1fr);
}

.pipeline > div {
  background: var(--soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-xs);
  display: grid;
  gap: 9px;
  min-height: 88px;
  padding: 10px;
}

.pipeline b { font-size: 13px; }

.log-table {
  display: grid;
}

.log-table > div {
  display: grid;
  font-size: 12px;
  gap: 8px;
  grid-template-columns: 65px 85px 1fr 60px;
  padding: 7px;
}

.log-table > div:first-child {
  background: var(--soft);
  border-radius: var(--radius-xs);
  color: var(--ink-2);
}

.log-table > div:not(:first-child) {
  border-bottom: 1px solid var(--line-soft);
}

/* 运行日志的时间列走等宽：一列时间戳上下不齐，日志就读不成「流水」 */
.log-table > div:not(:first-child) > span:first-child {
  font-family: var(--font-mono);
  font-size: 11px;
}

.status-完成 { color: var(--positive); }
.status-重试,.status-暂停 { color: var(--warning); }
.status-进行中 { color: var(--info); }

/*
 * 状态圆点（2026-08-11）：状态不再只靠字色。「进行中」的点带 2s 呼吸——
 * 这个 class 只会出现在真实运行中的任务行上（队列/流水线的真状态），
 * 动效不撒谎；prefers-reduced-motion 下由全局规则关停。
 */
.status-完成::before,
.status-重试::before,
.status-暂停::before,
.status-进行中::before {
  background: currentColor;
  border-radius: 50%;
  content: "";
  display: inline-block;
  height: 7px;
  margin-right: 5px;
  width: 7px;
}

.status-进行中::before {
  animation: status-pulse 2s var(--ease-out) infinite;
}

@keyframes status-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

.result-layout {
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0,1.25fr) minmax(240px,.75fr);
}

.result-player { grid-row: span 2; }
.result-player > video {
  aspect-ratio: 16 / 9;
  background: #161616;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-m);
  display: block;
  margin: 0 auto;
  max-width: 100%;
  width: 100%;
}
.result-player .media-cover { height: 430px; margin: 0 auto; max-width: 245px; width: 100%; }
.version-tabs { display: flex; gap: 5px; justify-content: center; margin-top: 8px; }

.qa-list { align-content: start; display: grid; gap: 6px; }
.qa-item { align-items: center; border-bottom: 1px solid var(--line-soft); display: flex; font-size: 12px; gap: 8px; justify-content: space-between; min-height: 38px; padding: 6px 0; }
.manual-check-note {
  background: var(--warning-bg);
  border: 1px solid var(--brass-line);
  border-radius: var(--radius-s);
  color: var(--warning);
  display: grid;
  gap: 4px;
  margin: 4px 0;
  padding: 10px;
}
.manual-check-note b { font-size: 13px; }
.manual-check-note span { font-size: 12px; line-height: 1.65; }
.manual-check-list { display: grid; gap: 5px; }
.manual-check-list label {
  align-items: center;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  display: flex;
  font-size: 12px;
  gap: 8px;
  min-height: 40px;
  padding: 8px 10px;
}
.publish-suggestion { display: grid; gap: 7px; }
.publish-suggestion strong { font-size: 17px; }
.publish-suggestion span { color: var(--muted); font-size: 12px; line-height: 1.6; }

.doc-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2,1fr);
}

.doc-card {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: 48px minmax(0,1fr) auto auto auto;
}

.doc-icon {
  align-items: center;
  background: var(--info-bg);
  border-radius: 6px;
  color: var(--info);
  display: flex;
  font-size: 12px;
  font-weight: 800;
  height: 48px;
  justify-content: center;
}

.doc-card > div:nth-child(2) { display: grid; gap: 3px; }
.doc-card b { font-size: 12px; }
.doc-card span { color: var(--muted); font-size: 11px; }
.doc-card > button { background: transparent; border: 0; color: var(--info); font-size: 11px; padding: 0; }
.doc-card > button:last-child { color: var(--danger); }

.coverage-grid,
.quality-bars {
  display: grid;
  gap: 7px;
}

.coverage-grid > div,
.quality-bars > div {
  align-items: center;
  display: grid;
  font-size: 12px;
  gap: 8px;
  grid-template-columns: 120px 45px 1fr;
}

.sample-table,
.faq-table,
.customer-table {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}

.sample-table > div,
.faq-table > div,
.customer-table > div,
.customer-table > button {
  align-items: center;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  display: grid;
  font-size: 12px;
  gap: 8px;
  min-height: 52px;
  padding: 9px 10px;
  text-align: left;
  width: 100%;
}

/* 整行可点的列表行：悬停先亮，告诉店长「这一整行都能按」 */
.customer-table > button:hover {
  background: var(--soft);
}

/*
 * 列序是：标题 / 句数 / 实际结果 / 标注结果 / 操作。
 *
 * 2026-08-06 修：原来写的是 `75px 1fr 75px 1.4fr 75px`，宽度和列对不上——
 * 标题（最长的那列）只分到 75px，于是标题被压成一字一行的竖条；而句数（永远
 * 只有「237 句」四个字）拿了 1fr，把中间撑出一大片空白。看着像页面坏了。
 *
 * minmax(0, …) 是必需的：grid 轨道默认 min-width:auto，长标题会把自己的列
 * 顶宽、把别的列挤没，加了才肯换行。
 */
.sample-table > div {
  grid-template-columns: minmax(0, 2.4fr) 62px 88px minmax(0, 1.6fr) 92px;
}

/* 标题不换行就会横向撑破整张表（案例标题动辄三四十字） */
.sample-table > div > span:first-child {
  line-height: 1.5;
  overflow-wrap: anywhere;
}
/*
 * 标准答案库：问题 / 提问次数 / 满意度 / 分类 / 状态 / 操作。
 * minmax(0,…) 是必需的：grid 轨道默认 min-width:auto，长问题会顶宽自己那列、
 * 把右边几列挤没，加了才肯换行。
 */
.faq-table > div { grid-template-columns: minmax(0, 1.5fr) 70px 70px 78px 92px 96px; }

/*
 * 分类（4）和状态（5）这两列装的是圆角标签，标签比列窄，靠左会甩出一段空白，
 * 一眼看过去像没对齐。表头连同内容一起居中，标签才落在列中间。
 * 数字列（提问次数/满意度）保持靠左 —— 数字靠左才好上下比大小。
 */
.faq-table > div > :nth-child(4),
.faq-table > div > :nth-child(5) {
  justify-self: center;
  text-align: center;
}

/* 问题下面那行小字（依据几份资料 · 客户原话） */
.faq-table > div > span > small {
  color: var(--muted);
  display: block;
  font-size: 11px;
  margin-top: 2px;
}

.customer-table > div,.customer-table > button { grid-template-columns: 80px 1fr 1fr 55px 1.8fr 85px; }

.faq-table .pill {
  line-height: 1.4;
  overflow-wrap: anywhere;
  text-align: center;
  white-space: normal;
}

.sample-table > div:first-child,
.faq-table > div:first-child,
.customer-table > div:first-child {
  background: var(--soft);
  font-size: 11px;
  min-height: 42px;
}

.sample-table button,
.faq-table button {
  background: transparent;
  border: 0;
  color: var(--info);
  font-size: 11px;
  min-height: 34px;
  padding: 4px;
}

.champion-default-note {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
  margin: -2px 2px 0;
}

.simulation-layout {
  align-items: start;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0,1fr) 210px;
}

.simulation-chat {
  container-type: inline-size;
  display: grid;
  gap: 8px;
}

.chat {
  border-radius: var(--radius-s);
  display: grid;
  gap: 4px;
  padding: 8px 10px;
}

.chat.customer { background: var(--canvas); }
.chat.robot { background: var(--info-bg); }
.chat b { color: var(--muted); font-size: 12px; }
.chat.robot b { color: var(--info); }
.chat p { font-size: 13px; line-height: 1.6; margin: 0; }

.champion-review-summary {
  align-items: center;
  background: var(--soft);
  border-radius: var(--radius-s);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 10px 12px;
}

.champion-review-summary > div {
  display: grid;
  gap: 2px;
}

.champion-review-summary b,
.champion-review-summary strong {
  font-size: 13px;
}

.champion-review-summary span {
  color: var(--muted);
  font-size: 12px;
}

.champion-review-summary strong {
  white-space: nowrap;
}

.champion-chat-head {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

.champion-chat-head span {
  color: var(--muted);
  font-size: 11px;
}

.champion-sales-line.not-borrowable {
  background: var(--danger-bg);
}

.line-review {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 5px;
}

.line-review button {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 12px;
  min-height: 42px;
  padding: 7px 10px;
}

.line-review button.active {
  background: var(--positive-bg);
  border-color: var(--positive);
  color: var(--positive);
  font-weight: 700;
}

.line-review button.active.exclude {
  background: #fff;
  border-color: var(--danger);
  color: var(--danger);
}

.line-review-status {
  color: var(--muted);
  font-size: 11px;
}

/* ── 屏 sales-02 逐句检查：AI 预标 ─────────────────────────────────────────── */

.champion-ai-bar {
  align-items: center;
  background: var(--info-bg);
  border-radius: var(--radius-s);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 10px 12px;
}

.champion-ai-bar > div {
  display: grid;
  gap: 2px;
}

.champion-ai-bar b { font-size: 13px; }
.champion-ai-bar span { color: var(--muted); font-size: 12px; }

/* 销售那句在回应的客户原话。压暗压小——它是上下文，不是要复核的东西 */
.champion-context {
  border-left: 2px solid var(--line);
  color: var(--muted);
  display: block;
  font-size: 11px;
  line-height: 1.5;
  margin-bottom: 2px;
  padding-left: 6px;
}

.champion-ai-reason,
.champion-ai-privacy {
  display: block;
  font-size: 11px;
  line-height: 1.5;
}

.champion-ai-reason { color: var(--muted); }
.champion-ai-privacy { color: var(--danger); font-weight: 700; }

.champion-privacy-clean {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
  margin: 0 2px;
}

.champion-excluded {
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  display: grid;
  gap: 8px;
  padding: 10px 12px;
}

.champion-excluded > button {
  background: none;
  border: 0;
  color: var(--info);
  font-size: 13px;
  font-weight: 700;
  justify-self: start;
  padding: 0;
}

.champion-excluded > small { color: var(--muted); font-size: 11px; }

@media (max-width: 640px) {
  .champion-ai-bar {
    align-items: stretch;
    flex-direction: column;
  }
}

.score-grid {
  display: grid;
  gap: 5px;
  grid-template-columns: repeat(2,1fr);
}

.score-grid label {
  align-items: center;
  background: var(--soft);
  border-radius: var(--radius-xs);
  display: flex;
  font-size: 12px;
  gap: 8px;
  justify-content: space-between;
  padding: 8px;
}

.score-grid label > span { flex: 0 0 auto; line-height: 1.5; white-space: nowrap; }
.score-grid label > div { display: flex; flex: 0 0 auto; gap: 4px; }
.score-grid button { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-xs); font-size: 11px; height: 34px; min-height: 34px; width: 34px; }
.score-grid button.active { background: var(--accent); border-color: var(--ink-2); color: #fff; }

@container (max-width: 760px) {
  .score-grid {
    grid-template-columns: 1fr;
  }
}

.score-legend {
  background: var(--info-bg);
  border: 1px solid color-mix(in srgb, var(--info) 25%, white);
  border-radius: var(--radius-s);
  display: grid;
  font-size: 13px;
  gap: 3px;
  padding: 9px 10px;
}

.score-legend span { color: var(--muted); line-height: 1.6; }

.rewrite-answer {
  display: grid;
  font-size: 13px;
  gap: 5px;
}

.rewrite-answer textarea {
  font-size: 13px;
  line-height: 1.7;
  width: 100%;
}

textarea {
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-s);
  min-height: 70px;
  padding: 8px;
  resize: vertical;
  transition: border-color var(--speed) var(--ease-out);
}

textarea:hover {
  border-color: var(--muted);
}

.simulation-progress { align-content: start; display: grid; gap: 10px; }
.simulation-progress > strong { font-size: 32px; }
.mini-stats { display: grid; gap: 6px; grid-template-columns: repeat(3,1fr); }
.mini-stats span { background: var(--soft); border-radius: var(--radius-xs); display: grid; font-size: 11px; gap: 2px; padding: 7px; text-align: center; }
.mini-stats b { font-size: 15px; }

.prompt-layout,
.plugin-config-layout,
.activities-layout,
.poster-layout,
.coupon-layout,
.cadence-layout,
.quality-layout {
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(210px,.72fr) minmax(0,1.28fr);
}

.prompt-layout { grid-template-columns: minmax(0,1.35fr) minmax(220px,.65fr); }

.prompt-editor textarea {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  line-height: 1.8;
  min-height: 390px;
  width: 100%;
}

.prompt-toolbar { align-items: center; display: flex; gap: 10px; margin-bottom: 8px; }
.prompt-toolbar span { color: var(--muted); font-size: 12px; }
.rule-checks { align-content: start; display: grid; gap: 7px; }
.rule-checks > div:not(.card-head) { background: var(--positive-wash); border-radius: var(--radius-xs); color: #335a48; font-size: 12px; padding: 8px; }
.rule-warning { background: var(--warning-bg) !important; color: var(--warning) !important; }
.rule-warning p { font-size: 12px; line-height: 1.5; margin: 3px 0 0; }

.wecom-cloud-card {
  overflow: hidden;
}

.wecom-cloud-card.needs-login {
  border-color: var(--brass-line);
}

.wecom-cloud-card.is-running {
  border-color: var(--positive-line);
}

.wecom-cloud-actions {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wecom-demo-switch {
  background: transparent;
  border: 0;
  color: var(--muted);
  font-size: 11px;
  padding: 2px 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.wecom-login-state {
  align-items: center;
  background: linear-gradient(90deg, var(--warning-bg), #fff);
  border-radius: var(--radius-s);
  display: grid;
  gap: 20px;
  grid-template-columns: 176px minmax(0, 1fr);
  padding: 16px;
}

.wecom-qr-wrap {
  align-items: center;
  display: grid;
  gap: 7px;
  justify-items: center;
}

.wecom-qr-wrap > small {
  color: var(--muted);
  font-size: 10px;
  text-align: center;
}

.wecom-qr-code {
  background-color: #fff;
  background-image:
    linear-gradient(90deg, #111 25%, transparent 25%, transparent 50%, #111 50%, #111 75%, transparent 75%),
    linear-gradient(#111 25%, transparent 25%, transparent 50%, #111 50%, #111 75%, transparent 75%);
  background-position: 0 0, 7px 7px;
  background-size: 14px 14px;
  border: 10px solid #fff;
  box-shadow: 0 0 0 1px #cfcfcf;
  height: 150px;
  position: relative;
  width: 150px;
}

.wecom-qr-finder {
  background: #fff;
  border: 6px solid #111;
  height: 38px;
  position: absolute;
  width: 38px;
}

.wecom-qr-finder::after {
  background: #111;
  content: "";
  inset: 7px;
  position: absolute;
}

.wecom-qr-finder.top-left { left: 4px; top: 4px; }
.wecom-qr-finder.top-right { right: 4px; top: 4px; }
.wecom-qr-finder.bottom-left { bottom: 4px; left: 4px; }

.wecom-login-copy {
  display: grid;
  gap: 12px;
}

.wecom-login-copy strong {
  font-size: 17px;
}

.wecom-login-copy p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
  margin: 3px 0 0;
}

.wecom-login-copy ol {
  display: grid;
  gap: 7px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.wecom-login-copy li {
  align-items: center;
  display: flex;
  font-size: 13px;
  gap: 8px;
}

.wecom-login-copy li b {
  align-items: center;
  background: var(--accent);
  border-radius: 50%;
  color: #fff;
  display: flex;
  flex: 0 0 auto;
  font-size: 11px;
  height: 22px;
  justify-content: center;
  width: 22px;
}

.wecom-login-copy .wecom-stale-note {
  background: var(--warning-bg);
  border-left: 3px solid var(--brass-line);
  color: #65522e;
  margin: 0;
  padding: 8px 10px;
}

.wecom-running-state {
  align-items: center;
  background: linear-gradient(90deg, var(--positive-wash), #fff);
  border-radius: var(--radius-s);
  display: grid;
  gap: 14px;
  grid-template-columns: auto minmax(220px, 1fr) minmax(0, 1.4fr);
  min-height: 82px;
  padding: 14px 16px;
}

.wecom-running-dot {
  background: var(--positive);
  border: 4px solid var(--positive-bg);
  border-radius: 50%;
  height: 22px;
  width: 22px;
}

.wecom-running-copy {
  display: grid;
  gap: 3px;
}

.wecom-running-copy strong {
  font-size: 15px;
}

.wecom-running-copy span {
  color: var(--muted);
  font-size: 12px;
}

.wecom-work-status {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(3, 1fr);
  margin: 0;
}

.wecom-work-status > div {
  border-left: 1px solid var(--positive-line);
  display: grid;
  gap: 3px;
  padding: 0 12px;
}

.wecom-work-status dt {
  color: var(--muted);
  font-size: 11px;
}

.wecom-work-status dd {
  font-size: 13px;
  font-weight: 700;
  margin: 0;
}

.metric-cards {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(5,1fr);
}

.metric-card {
  display: grid;
  gap: 5px;
}

.metric-card > span { color: var(--muted); font-size: 12px; }
.metric-card > strong { font-size: 20px; }
.metric-card > small { color: var(--positive); font-size: 11px; }

.action-alert {
  align-items: center;
  background: var(--warning-bg);
  border: 1px solid var(--brass-line);
  border-radius: var(--radius-m);
  display: flex;
  gap: 16px;
  justify-content: space-between;
  padding: 12px 14px;
}

.action-alert > div {
  display: grid;
  gap: 3px;
}

.action-alert b { color: var(--warning); font-size: 14px; }
.action-alert span { color: #65522e; font-size: 13px; line-height: 1.6; }

.dashboard-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2,1fr);
}

/* ── 漏斗 ──────────────────────────────────────────────────────────────────
 * 2026-08-07 改掉一个会说谎的画法。
 *
 * 原来是「整个方块的宽度 = 这一步的占比」，方块里塞着文字，所以必须给个
 * `min-width: 90px` 兜底不然字挤没。后果：**只要某一步的占比小于 min-width
 * 对应的比例，几步就画得一样长**。线上实测 61 → 13 → 5 → 0 那一屏，
 * 后面四步（13 / 5 / 0 / 「—」）渲染出来一模一样宽 —— 图在骗人，
 * 而这一屏的全部用处就是「一眼看出在哪一步掉得最多」。
 *
 * 现在：每行一条**定宽轨道**，值画在轨道里的填充条上。文字有自己的列，
 * 不再和长度抢地方，所以填充条可以老老实实按比例画、不需要任何下限；
 * 0 就是空轨道，没有记录点的那一步（实际到店）连轨道都不填。
 * ──────────────────────────────────────────────────────────────────────── */
.funnel {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.funnel-row {
  align-items: center;
  display: grid;
  font-size: 12px;
  gap: 10px;
  /* 标签列定宽：五个标签都是 4 个汉字，对齐了才好上下比长短 */
  grid-template-columns: 64px minmax(0, 1fr) 36px;
}

.funnel-track {
  background: var(--soft);
  border-radius: 4px;
  display: block;
  height: 22px;
  overflow: hidden;
}

/*
 * 实心 --info，**不要渐变**。
 *
 * 这里换过两版都太淡：先是 --info-bg(var(--info-bg)) 起手，后来提到 #c7dcfa→#e4effd。
 * 病因一样——渐变的尾巴总要淡到接近轨道色，而漏斗下面几步本来就短，
 * 整条几乎全是那截淡尾巴，看着像没填。**条越短越看不见**，恰好把最该看清的
 * 「掉得最狠的那几步」画没了。
 *
 * 实心色跟 .progress-track 用实心 --positive 是同一个做法；蓝取全站唯一那支
 * --info(#3973d6)，不新造颜色。对 var(--soft) 的轨道对比度 4.4:1，短条也认得出。
 */
.funnel-track > span {
  background: var(--info);
  display: block;
  height: 100%;
  transition: width 220ms ease;
}

.funnel-value {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* 左栏从 290px 放宽到 520px：里面从「一行一张小卡片」换成了五列表格
 * （编号/客户情况/到店意向/标注结果/操作），290px 塞不下会逐列换行成一坨。 */
.quality-layout { grid-template-columns: minmax(420px, 520px) minmax(0,1fr); }

/* ── 屏 sales-07 待检查表格 ────────────────────────────────────────────────
 * 参照屏 02（金牌案例）那张表：编号 / 客户情况 / 结果 / 标注结果 / 操作。
 * 整行可点（不是只有「逐句检查」那几个字），点哪一行右侧就展开哪一段 ——
 * 只让链接可点的话，店长十有八九会去点客户名然后以为页面没反应。
 * ──────────────────────────────────────────────────────────────────────── */
.conv-table-wrap { overflow-x: auto; }
.conv-table {
  border-collapse: collapse;
  font-size: 12px;
  width: 100%;
}
.conv-table th {
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  padding: 6px 8px;
  text-align: left;
  white-space: nowrap;
}
.conv-table td {
  border-bottom: 1px solid var(--soft);
  padding: 8px;
  vertical-align: top;
}
.conv-row { cursor: pointer; }
.conv-row:hover { background: var(--soft); }
.conv-row.selected { background: var(--info-bg); }
.conv-no { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.conv-table td b { display: block; font-size: 12px; }
.conv-situation {
  color: var(--muted);
  display: block;
  font-size: 11px;
  line-height: 1.5;
  margin-top: 1px;
}
.conv-verdict { display: block; font-size: 12px; }
.conv-verdict.danger { color: var(--danger); font-weight: 600; }
.conv-table-act { text-align: right; white-space: nowrap; }
.conv-open { color: var(--info); font-size: 12px; }

/* 到店意向：高绿 / 中灰 / 低更淡 / 未评分描边。颜色只是辅助，档位文字（高/中/低）
 * 才是主信息 —— 截图转黑白或色盲也读得懂。 */
.intent-pill {
  border-radius: 999px;
  display: inline-block;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  padding: 2px 8px;
  white-space: nowrap;
}
.intent-pill.high { background: var(--positive-bg); color: var(--positive); font-weight: 600; }
.intent-pill.mid { background: var(--canvas); color: var(--ink-2); }
.intent-pill.low { background: var(--canvas); color: var(--muted); }
.intent-pill.none { border: 1px dashed var(--line); color: var(--muted); }
/*
 * 左侧待检查列表：独立滚动，不把整页撑长。
 * 20 段全铺开时页面要滚一屏半才看得到右边的按钮，店长每检查一条都要来回滚。
 * 两栏各自滚、按钮始终在视野里，才是这一屏该有的操作节奏。
 */
.conversation-list {
  align-content: start;
  display: grid;
  gap: 6px;
  max-height: 560px;
  overflow-y: auto;
}
.conversation-item {
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  display: grid;
  gap: 3px;
  min-height: 66px;
  padding: 9px 10px;
  text-align: left;
}

.conversation-item.selected { background: var(--info-bg); border-color: #7fa8e8; }
.conversation-item > div { display: flex; justify-content: space-between; }
.conversation-item b { font-size: 12px; }
.conversation-item small,.conversation-item span { color: var(--muted); font-size: 11px; }
.conversation-item em { color: var(--info); font-size: 11px; font-style: normal; }

.quality-detail {
  align-content: start;
  display: grid;
  gap: 7px;
  /* 和左列同高：两栏对齐，按钮不会被聊天正文顶到屏幕外 */
  max-height: 560px;
  overflow-y: auto;
}
.review-box { background: var(--soft); border: 1px solid var(--line); border-radius: var(--radius-s); display: grid; gap: 7px; padding: 9px; }
.review-box b,.review-box span { font-size: 12px; }
.review-box textarea { font-size: 12px; min-height: 52px; }

/*
 * 屏 2.1.2：修改框跟着被选中的机器人回复原地展开。
 *
 * 旧版把唯一的修改框放在整段聊天最底部，而右栏本身又是 560px 的独立滚动区；
 * 点中上方一句后还得把右栏滑到底，原句与改法也无法同时看见。这里刻意不做浮层或
 * sticky：编辑器属于某一句，直接插在该句下面，滚动时语义关系不会丢。
 */
.quality-inline-editor {
  background: #fff;
  border: 1px solid #e8b4b0;
  border-radius: var(--radius-s);
  display: grid;
  gap: 8px;
  margin: 4px 0 2px;
  padding: 9px;
}

.quality-inline-editor .review-box {
  border: 0;
  padding: 0;
}

.quality-inline-editor-actions {
  align-items: center;
  margin: 0;
}

.quality-detail-actions {
  border-top: 1px solid var(--line-soft);
  margin-top: 4px;
  padding-top: 9px;
}

.plugin-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2,1fr);
}

.plugin-card {
  display: grid;
  gap: 8px;
  grid-template-columns: auto 1fr;
}

.plugin-card > h3,
.plugin-card > p,
.plugin-card > .plugin-stats,
.plugin-card > .button-row {
  grid-column: 1/-1;
}

.plugin-letter {
  align-items: center;
  background: var(--accent);
  border-radius: var(--radius-s);
  color: #fff;
  display: flex;
  font-size: 15px;
  font-weight: 800;
  height: 34px;
  justify-content: center;
  width: 34px;
}

.plugin-card > .pill { align-self: start; justify-self: end; }
.plugin-card h3 { font-size: 15px; margin: 2px 0 0; }
.plugin-card p { color: var(--muted); font-size: 12px; line-height: 1.6; margin: 0; }
.plugin-stats { align-items: center; background: var(--soft); border-radius: 6px; display: flex; justify-content: space-between; padding: 8px; }
.plugin-stats span { color: var(--muted); font-size: 11px; }
.plugin-stats strong { font-size: 16px; }

.plugin-picker {
  align-content: start;
  display: grid;
  gap: 7px;
}

.plugin-picker > button {
  align-items: center;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  display: flex;
  gap: 8px;
  min-height: 58px;
  padding: 8px;
  text-align: left;
}

.plugin-picker > button.active { background: var(--info-bg); border-color: var(--info); }
.plugin-picker i { align-items:center; background:var(--accent); border-radius:var(--radius-xs); color:#fff; display:flex; font-size: 12px; font-style:normal; height:28px; justify-content:center; width:28px; }
.plugin-picker span { display:grid; gap:2px; }
.plugin-picker b { font-size: 12px; }
.plugin-picker small { color:var(--muted); font-size: 11px; }

.config-form,
.activity-form,
.poster-layout .card,
.coupon-layout .card {
  align-content: start;
  display: grid;
  gap: 8px;
}

.condition-list {
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 10px 12px 12px;
}

.condition-list legend {
  font-size: 13px;
  font-weight: 700;
  padding: 0 5px;
}

.source-selects {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.test-results {
  background: var(--positive-bg);
  border: 1px solid var(--positive-line);
  border-radius: var(--radius-s);
  color: var(--positive);
  display: grid;
  font-size: 12px;
  gap: 6px;
  padding: 10px;
}
.test-results.has-failure {
  background: var(--danger-bg);
  border-color: var(--danger-line);
  color: #762626;
}

.form-hint {
  background: var(--warning-bg);
  border: 1px solid var(--brass-line);
  border-radius: var(--radius-s);
  color: var(--warning);
  font-size: 12px;
  line-height: 1.6;
  margin: 0;
  padding: 9px 10px;
}

.config-form label,
.activity-form label,
.poster-layout label,
.coupon-layout label,
.faq-editor label {
  display: grid;
  gap: 4px;
}

.config-form label > span,
.activity-form label > span,
.poster-layout label > span,
.coupon-layout label > span,
.faq-editor label > span {
  color: var(--muted);
  font-size: 12px;
}

.config-form input,
.config-form select,
.activity-form input,
.activity-form select,
.poster-layout input,
.poster-layout select,
.coupon-layout input,
.coupon-layout select,
.faq-editor input {
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 12px;
  height: 42px;
  padding: 0 8px;
}

.config-form textarea,.activity-form textarea,.faq-editor textarea { font-size: 12px; min-height:70px; }
.toggle-line { align-items:center; display:flex !important; font-size: 12px; gap:8px; grid-template-columns:auto 1fr; min-height:34px; }
.toggle-line input { height:18px; margin:0; width:18px; }
.poster-choice-list .toggle-line { border:1px solid transparent; border-radius:8px; padding:8px; }
.poster-choice-list .toggle-line:has(input:checked) { background:var(--positive-bg); border-color:#abd8bf; }
.poster-choice-list .toggle-line > span { display:grid; gap:3px; }
.poster-choice-list .toggle-line b { align-items:center; display:flex; font-size:12px; gap:7px; }
.poster-choice-list .toggle-line b em { background:var(--positive-bg); border-radius:99px; color:#147447; font-size:9px; font-style:normal; padding:3px 6px; }
.poster-choice-list .toggle-line small { color:var(--muted); font-size:10px; line-height:1.45; }

.activity-list { align-content:start; display:grid; gap:7px; }
.activity-list article { align-items:center; background:var(--soft); border:1px solid var(--line); border-radius:var(--radius-s); display:grid; gap:8px; grid-template-columns:1fr auto 48px minmax(78px,110px); padding:8px; }
.activity-list article > div { display:grid; gap:3px; }
.activity-list b { font-size: 13px; }
.activity-list span,.activity-list small { color:var(--muted); font-size: 11px; }
.activity-list article > .pill { line-height: 1.4; max-width: 180px; overflow-wrap: anywhere; white-space: normal; }
.activity-list article > strong { font-size: 12px; }
.activity-list button { background:transparent; border:0; color:var(--info); font-size: 11px; min-height:34px; padding:4px; }
.activity-list article > .activity-actions { align-items:flex-end; display:flex; flex-direction:column; gap:0; }

.upload-row {
  align-items: center;
  background: var(--soft);
  border: 1px dashed var(--line-dark);
  border-radius: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px;
}

.upload-row span {
  color: var(--muted);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.poster-mini {
  background: linear-gradient(145deg,#22392e,#63826f);
  border-radius:var(--radius-s);
  color:#fff;
  display:grid;
  gap:5px;
  padding:14px;
  text-align:center;
}

.poster-mini span,.poster-mini small { font-size: 11px; }
.poster-mini b { font-size: 17px; }

.touch-chart {
  align-items:end;
  display:grid;
  gap:8px;
  grid-template-columns:repeat(7,1fr);
  height:220px;
  padding-top:10px;
}

.touch-chart > button { align-items:center; background:transparent; border:0; border-radius:8px; cursor:pointer; display:flex; flex-direction:column; gap:4px; justify-content:end; padding:6px 2px; }
.touch-chart > button:hover,.touch-chart > button.active { background:var(--info-bg); }
.touch-chart > button > span { background:linear-gradient(#6797e9,#cfe0ff); border-radius:4px 4px 0 0; max-width:45px; width:70%; }
.touch-chart b,.touch-chart small { font-size: 11px; }
.touch-chart small { color:var(--muted); }

.content-ranking { display:grid; gap:7px; }
.content-ranking > button { align-items:center; background:#fff; border:0; border-bottom:1px solid var(--line-soft); cursor:pointer; display:grid; font-size:12px; gap:8px; grid-template-columns:22px 1fr 55px auto; padding:7px; text-align:left; }
.content-ranking > button:hover,.content-ranking > button.active { background:var(--positive-wash); }
.content-ranking span small { color:var(--muted); display:block; font-size:10px; margin-top:2px; }
.content-ranking i { align-items:center; background:var(--soft); border-radius:50%; display:flex; font-style:normal; height:22px; justify-content:center; width:22px; }

.effect-detail-summary { display:grid; gap:10px; grid-template-columns:repeat(3,minmax(0,1fr)); margin-bottom:12px; }
.effect-detail-summary > span { border:1px solid var(--line); border-radius:10px; display:grid; gap:5px; padding:12px; }
.effect-detail-summary small { color:var(--muted); }
.effect-detail-summary b { font-size:20px; }
.effect-sample-filters,.recall-effect-filters { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:12px; }
.recall-plan-filters { align-items:stretch; display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.recall-plan-filters label,.recall-plan-filters > button { background:#fff; border:1px solid var(--line); border-radius:10px; color:var(--ink); display:grid; gap:3px; min-width:170px; padding:9px 12px; text-align:left; }
.recall-plan-filters label { color:var(--muted); font-size:10px; }
.recall-plan-filters select { background:transparent; border:0; color:var(--ink); font:inherit; font-size:12px; outline:0; padding:0; }
.recall-plan-filters > button { cursor:pointer; font-weight:700; }
.recall-plan-filters > button span { color:var(--muted); font-size:10px; font-weight:400; }
.recall-plan-filters > button small { background:var(--soft); border-radius:10px; font-size:10px; justify-self:start; padding:1px 6px; }
.recall-plan-filters > button.active { background:var(--positive-wash); border-color:#78bd9b; color:var(--positive); }
.recall-plan-filters > button.personalized.active { background:var(--info-bg); border-color:#7ba6e8; color:var(--info); }
.recall-plan-filters > button.clear { align-content:center; color:var(--muted); min-width:auto; }
.effect-sample-filters button,.recall-effect-filters button { background:#fff; border:1px solid var(--line); border-radius:8px; cursor:pointer; padding:8px 11px; }
.effect-sample-filters button.active,.recall-effect-filters button.active { background:var(--ink); border-color:var(--ink); color:#fff; }
.recall-effect-filters small { background:var(--canvas); border-radius:10px; color:inherit; margin-left:3px; padding:1px 5px; }
.recall-effect-filters .priority-dot { display:inline-block; margin-right:6px; position:static; vertical-align:1px; }
.effect-detail-layout { display:grid; gap:14px; grid-template-columns:minmax(220px,.7fr) minmax(360px,1.3fr); }
.effect-customer-list { border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.effect-customer-list > button { background:#fff; border:0; border-bottom:1px solid var(--line); cursor:pointer; display:grid; gap:4px; padding:11px; text-align:left; width:100%; }
.effect-customer-list > button.active { background:var(--positive-wash); }
.effect-customer-list span { color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.effect-customer-list small { color:var(--positive); }
.effect-message-detail { border:1px solid var(--line); border-radius:10px; padding:14px; }
.effect-message-heading { align-items:start; display:flex; justify-content:space-between; }
.effect-message-heading > div { display:grid; gap:4px; }
.effect-message-heading span { color:var(--muted); font-size:11px; }
.effect-chat { background:var(--soft); border-radius:10px; display:grid; gap:9px; margin:13px 0; padding:12px; }
.effect-chat > span { border-radius:var(--radius-m); display:grid; gap:5px; line-height:1.55; max-width:88%; padding:10px 12px; }
.effect-chat .robot { background:var(--info-bg); }
.effect-chat .customer { background:var(--positive-bg); justify-self:end; }
.effect-chat .empty { background:var(--soft); color:var(--muted); justify-self:end; }
.effect-attribution,.effect-optimization { background:var(--warning-bg); border-left:4px solid #e5b64b; border-radius:8px; padding:10px 12px; }
.effect-attribution p,.effect-optimization p { line-height:1.6; margin:5px 0; }
.effect-optimization small { color:var(--muted); }

.customer-table > button { background:#fff; }
.customer-table > button.selected { background:var(--info-bg); }
.customer-effect-name { display:grid; gap:3px; position:relative; }
.priority-dot { border-radius:50%; height:10px; width:10px; }
.customer-effect-name > .priority-dot { left:-13px; position:absolute; top:5px; }
.priority-dot.high { background:#d8483e; }
.priority-dot.medium { background:#e58b27; }
.priority-dot.low { background:#4385d5; }
.priority-dot.normal { background:#a8afae; }
.customer-effect-name > small { color:var(--muted); font-size:10px; font-weight:700; }
.customer-effect-name > em { color:var(--muted); font-size:10px; font-style:normal; }
.personalized-check { align-items:center; background:#23885b; border-radius:50%; color:#fff; display:inline-flex; font-size:9px; font-style:normal; height:14px; justify-content:center; margin-right:5px; vertical-align:1px; width:14px; }
.customer-effect-cell { display:grid; gap:3px; }
.customer-effect-cell small { color:var(--muted); font-size:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.customer-effect-cell em { color:var(--warning); font-size:10px; font-style:normal; }
.customer-table > button.stopped-row { background:var(--soft); color:var(--muted); }
.customer-table strong.good { color:var(--positive); }
.customer-table strong.bad { color:var(--danger); }
.customer-table em { color:var(--info); display:grid; font-size: 11px; font-style:normal; gap:2px; }
.customer-table em small { font-size: 11px; }

.customer-effect-review { background:#fff; border:1px solid var(--line); border-radius:12px; padding:16px; }
.customer-effect-review.needs-review { background:var(--brick-amber-soft); border-color:#e4bc58; }
.customer-effect-review-heading { align-items:start; display:flex; justify-content:space-between; }
.customer-effect-review-heading > div { display:grid; gap:4px; }
.customer-effect-review-heading span { color:var(--muted); font-size:11px; }
.effect-priority,.effect-reviewed { border-radius:12px; font-size:11px; padding:5px 8px; }
.effect-priority { background:#f8e5b5; color:#865809; }
.effect-reviewed { background:var(--positive-bg); color:var(--positive); }
.customer-effect-messages { display:grid; gap:12px; grid-template-columns:1fr 1fr; margin-top:13px; }
.customer-effect-messages > div { background:var(--canvas); border-radius:var(--radius-m); padding:11px; }
.customer-effect-messages p { line-height:1.6; margin:6px 0; }
.customer-effect-messages small { color:var(--muted); }
.customer-effect-explanation { background:#fff; border-left:4px solid #e2ac35; border-radius:8px; margin-top:12px; padding:11px; }
.customer-effect-explanation p { line-height:1.6; margin:5px 0; }

.stopped-heading,
.empty-result {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
  margin: 0;
  padding: 14px 12px;
}

.stopped-heading {
  background: var(--canvas);
  border-bottom: 1px solid var(--line);
  font-weight: 700;
}

.empty-result {
  text-align: center;
}

.touch-list { align-content:start; display:grid; gap:6px; }
.touch-list > button { align-items:center; background:var(--soft); border:1px solid var(--line); border-radius:var(--radius-s); display:grid; gap:8px; grid-template-columns:34px 1fr auto; min-height:62px; padding:9px; text-align:left; }
.touch-list > button.active { background:var(--warning-bg); border-color:var(--brass-line); }
.touch-list > button > i { align-items:center; background:var(--accent); border-radius:50%; color:#fff; display:flex; font-size: 12px; font-style:normal; height:30px; justify-content:center; width:30px; }
.touch-list > button > div { display:grid; gap:3px; }
.touch-list b { font-size: 12px; }
.touch-list span { color:var(--muted); font-size: 11px; }
.touch-list .pill { justify-self:start; }

.touch-detail { align-content:start; display:grid; gap:9px; }
.cadence-interval {
  display: grid;
  font-size: 13px;
  gap: 5px;
}
.cadence-interval span { color:var(--muted); }
.cadence-interval select {
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-s);
  font-size:13px;
  height:42px;
  padding:0 9px;
}
.message-preview { background:var(--info-bg); border:1px solid #cbdcf6; border-radius:var(--radius-s); display:grid; gap:7px; padding:12px; }
.message-preview small,.message-preview span { color:var(--muted); font-size: 11px; }
.message-preview h3 { font-size: 16px; margin:0; }
.message-preview p { font-size: 13px; line-height:1.6; margin:0; }
.rule-box,.evidence-block { background:var(--soft); border-radius:var(--radius-s); padding:11px; }
.rule-box b,.evidence-block b { font-size: 12px; }
.rule-box p,.evidence-block p { color:var(--muted); font-size: 12px; line-height:1.5; margin:4px 0 0; }

.recall-plugin-cards { grid-template-columns:repeat(2,1fr); }

.subpage-back {
  align-items: center;
  display: flex;
  gap: 10px;
}

.knowledge-poster,
.coupon-card {
  background: linear-gradient(145deg,#162c23,#5c806e);
  border-radius:12px;
  box-shadow:0 12px 30px rgba(25,55,42,.24);
  color:#fff;
  display:flex;
  flex-direction:column;
  gap:10px;
  justify-content:center;
  min-height:430px;
  padding:28px;
}

.knowledge-poster {
  aspect-ratio:3/4;
  background-position:center;
  background-size:cover;
  justify-content:flex-start;
  min-height:640px;
  overflow:hidden;
  padding:26px;
  position:relative;
}
.knowledge-poster::after {
  border:1px solid rgba(255,255,255,.18);
  border-radius:8px;
  content:"";
  inset:12px;
  pointer-events:none;
  position:absolute;
}
.knowledge-poster-brand { align-items:center; display:grid; gap:9px; grid-template-columns:auto 1fr auto; position:relative; z-index:1; }
.knowledge-poster-brand > span { align-items:center; background:#0876f9; border-radius:8px; display:flex; font-size:26px; font-weight:900; height:48px; justify-content:center; width:48px; }
.knowledge-poster-brand > div { display:flex; flex-direction:column; gap:1px; }
.knowledge-poster-brand strong { font-size:18px; letter-spacing:.05em; }
.knowledge-poster-brand small { font-size:9px; letter-spacing:.12em; opacity:.72; }
.knowledge-poster-brand i { border:1px solid rgba(255,255,255,.32); border-radius:99px; font-size:9px; font-style:normal; padding:5px 8px; }
.knowledge-poster-hero { margin-top:42px; position:relative; z-index:1; }
.knowledge-poster-hero > small { color:#d7b792; font-size:11px; font-weight:800; letter-spacing:.22em; }
.knowledge-poster-hero h2 { font-size:34px; line-height:1.18; margin:9px 0 10px; max-width:12em; text-wrap:balance; }
.knowledge-poster-hero p { font-size:13px; line-height:1.65; margin:0; max-width:28em; opacity:.82; }
.knowledge-poster-points { background:rgba(6,21,15,.78); border:1px solid rgba(255,255,255,.14); border-radius:10px; display:grid; gap:0; margin-top:auto; padding:15px 16px 8px; position:relative; z-index:1; }
.knowledge-poster-points > small { color:#d7b792; font-size:10px; font-weight:800; letter-spacing:.14em; margin-bottom:4px; }
.knowledge-poster-points article { align-items:center; border-top:1px solid rgba(255,255,255,.14); display:grid; gap:11px; grid-template-columns:30px 1fr; padding:10px 0; }
.knowledge-poster-points article > b { color:#d7b792; font-size:12px; }
.knowledge-poster-points article > div { display:flex; flex-direction:column; gap:2px; }
.knowledge-poster-points article strong { font-size:13px; }
.knowledge-poster-points article span { font-size:10px; line-height:1.45; opacity:.72; }
.knowledge-poster-footer { display:flex; flex-direction:column; gap:10px; margin-top:8px; position:relative; z-index:1; }
.knowledge-poster-footer > span { font-size:9px; opacity:.68; }
.knowledge-poster-footer em { border-top:1px solid rgba(255,255,255,.3); display:flex; flex-direction:column; font-size:13px; font-style:normal; font-weight:800; gap:3px; padding-top:11px; text-align:center; }
.knowledge-poster-footer em small { font-size:10px; font-weight:400; opacity:.72; }

.knowledge-poster-is-evidence { aspect-ratio:9/16; min-height:1120px; }
.knowledge-poster-is-evidence .knowledge-poster-hero { margin-top:28px; }
.poster-evidence-details { display:grid; gap:12px; margin-top:28px; position:relative; z-index:1; }
.poster-evidence-details > header { background:rgba(6,21,15,.88); border:1px solid rgba(255,255,255,.18); border-radius:10px; display:grid; gap:5px; padding:14px 16px; }
.poster-evidence-details > header small { color:#d7b792; font-size:10px; font-weight:800; letter-spacing:.14em; }
.poster-evidence-details > header strong { font-size:17px; }
.poster-evidence-details > header p { font-size:10px; line-height:1.55; margin:0; opacity:.78; }
.poster-report-grid { display:grid; gap:8px; grid-template-columns:repeat(3,minmax(0,1fr)); }
.poster-report-grid > a { background:#f5f2eb; border:1px solid rgba(255,255,255,.4); border-radius:8px; color:var(--ink); display:flex; flex-direction:column; min-width:0; overflow:hidden; text-decoration:none; }
.poster-report-grid img { aspect-ratio:4/3; background:#fff; border-bottom:1px solid #d8d2c7; object-fit:cover; object-position:top; width:100%; }
.poster-report-grid a > div { display:grid; gap:3px; padding:8px; }
.poster-report-grid b { font-size:11px; }
.poster-report-grid span { font-size:8px; line-height:1.4; min-height:2.8em; }
.poster-report-grid small { font-size:7px; line-height:1.35; opacity:.7; }
.poster-report-grid em { color:#147447; font-size:8px; font-style:normal; font-weight:800; }
.poster-detail-block { background:rgba(6,21,15,.88); border:1px solid rgba(255,255,255,.16); border-radius:10px; padding:13px 16px; }
.poster-detail-block > b { color:#d7b792; font-size:11px; letter-spacing:.1em; }
.poster-detail-block ul { display:grid; gap:6px; list-style:none; margin:9px 0 0; padding:0; }
.poster-detail-block li { font-size:10px; line-height:1.5; padding-left:16px; position:relative; }
.poster-detail-block li::before { color:#62c995; content:"✓"; font-weight:900; left:0; position:absolute; }
.poster-evidence-source { font-size:8px; line-height:1.45; opacity:.65; }

.knowledge-poster-points article > div > small { color:#315043; font-size:8px; line-height:1.45; margin-top:2px; }
.knowledge-poster-is-evidence .knowledge-poster-points { background:#faf5eb; border-color:#e0c9a6; color:#17251f; margin-top:24px; }
.knowledge-poster-is-evidence .knowledge-poster-points > small { color:#a47b45; font-size:12px; text-align:center; }
.knowledge-poster-is-evidence .knowledge-poster-points article { border-top-color:#dfceb2; grid-template-columns:36px 1fr; padding:11px 0; }
.knowledge-poster-is-evidence .knowledge-poster-points article > b { align-items:center; background:#173b2e; border-radius:50%; color:#fff; display:flex; height:30px; justify-content:center; width:30px; }
.knowledge-poster-is-evidence .knowledge-poster-points article strong { font-size:14px; }
.knowledge-poster-is-evidence .knowledge-poster-points article span { color:#4f5c56; font-size:9px; opacity:1; }
.poster-evidence-strip { display:grid; gap:8px; position:relative; z-index:1; }
.poster-evidence-strip > b { color:#d9b47f; font-size:11px; letter-spacing:.08em; text-align:center; }
.poster-evidence-strip > div { display:grid; gap:7px; grid-template-columns:repeat(3,minmax(0,1fr)); }
.poster-evidence-strip a { background:#fff; border-radius:6px; color:#183229; display:grid; overflow:hidden; text-decoration:none; }
.poster-evidence-strip img { aspect-ratio:4/3; object-fit:cover; object-position:top; width:100%; }
.poster-evidence-strip a span { font-size:8px; font-weight:800; padding:5px; text-align:center; }
.poster-evidence-strip > small { font-size:7px; line-height:1.45; opacity:.68; text-align:center; }
.knowledge-poster-cta { align-items:center; background:linear-gradient(90deg,#dcc091,#f4e2bd); border-radius:8px; color:#17372b; display:grid; gap:9px; grid-template-columns:auto 1fr; padding:10px 13px; position:relative; z-index:1; }
.knowledge-poster-cta span { align-items:center; background:#17372b; border-radius:50%; color:#e8cf9f; display:flex; font-size:9px; height:25px; justify-content:center; letter-spacing:-1px; width:25px; }
.knowledge-poster-cta strong { font-size:11px; line-height:1.45; }
.knowledge-poster-is-evidence .knowledge-poster-footer { margin-top:0; }

.campaign-linkage-box { background:var(--positive-bg); border:1px solid #b9ddc8; border-radius:10px; display:grid; gap:12px; padding:16px; }
.campaign-linkage-box b { color:#116b43; font-size:15px; }
.campaign-linkage-box p { color:var(--muted); font-size:12px; line-height:1.6; margin:5px 0 0; }
.campaign-linkage-box > small { border-top:1px solid #cfe7d9; color:#5a675f; font-size:11px; line-height:1.5; padding-top:10px; }
/*
 * 活动库/首触设置的两列布局（2026-08-12 从 grid 改 flex-wrap）：
 * 旧写法 minmax(520px,…)+minmax(360px,…) 两列最小要 898px，而 1440px 视口下
 * 工作区列只有 ~734px——内容溢出滑到右侧「操作要点」帮助卡底下（叠着显示）。
 * 配套的 1050px 断点按**视口**收单列，可真正的约束是**容器**宽度（工作区列宽
 * = 视口 − 侧栏 − 帮助栏 − 内边距，1381–1603px 的视口全在重叠区）。
 * flex-wrap 让「放不下就换行」由容器自己决定，任何视口/侧栏组合都不再需要断点数学。
 */
.recall-activity-library { display:flex; flex-wrap:wrap; gap:18px; }
.recall-activity-editor { flex:1.55 1 520px; }
.recall-activity-preview-column { flex:0.85 1 360px; }
.activity-library-mode { background:#fff; border:1px solid var(--line); border-radius:10px; display:grid; gap:8px; grid-template-columns:repeat(2,minmax(0,1fr)); padding:8px; }
.activity-library-mode button { background:var(--canvas); border:1px solid transparent; border-radius:8px; cursor:pointer; display:grid; gap:3px; padding:11px 14px; text-align:left; }
.activity-library-mode button.active { background:var(--positive-wash); border-color:#9fcfb3; color:#126d45; }
.activity-library-mode b { font-size:13px; }
.activity-library-mode span { color:var(--muted); font-size:10px; }
.first-touch-settings { display:flex; flex-wrap:wrap; gap:18px; }
.first-touch-editor-column { flex:1.45 1 560px; }
.first-touch-preview-column { flex:0.85 1 360px; }
.first-touch-editor-column,.first-touch-preview-column { align-content:start; display:grid; gap:16px; min-width:0; }
.first-touch-current { align-items:center; background:var(--positive-wash); border:1px solid #b9ddc8; border-radius:8px; display:flex; justify-content:space-between; margin-bottom:14px; padding:10px 12px; }
.first-touch-current b { color:#126d45; font-size:12px; }
.first-touch-current span { color:var(--muted); font-size:10px; }
.first-touch-poster-upload { margin-top:14px; }
.first-touch-version-list { display:grid; gap:8px; }
.first-touch-version-list article { align-items:center; border:1px solid var(--line); border-radius:8px; display:flex; justify-content:space-between; padding:10px 12px; }
.first-touch-version-list article.current { background:var(--positive-wash); border-color:#9fcfb3; }
.first-touch-version-list article > div:first-child { display:grid; gap:3px; }
.first-touch-version-list b { font-size:12px; }
.first-touch-version-list span,.first-touch-version-list small { color:var(--muted); font-size:10px; }
.first-touch-version-list article > div:last-child { display:flex; gap:10px; }
.first-touch-version-list button { background:transparent; border:0; color:var(--info); cursor:pointer; font-size:10px; padding:0; }
.recall-activity-editor,.recall-activity-preview-column { align-content:start; display:grid; gap:16px; min-width:0; }
.campaign-upload-box { align-items:center; background:var(--positive-wash); border:1.5px dashed #9fcab1; border-radius:10px; cursor:pointer; display:grid!important; gap:7px; justify-items:center; margin-bottom:12px; padding:24px!important; text-align:center; }
.campaign-upload-box input { max-width:100%; }
.campaign-upload-box b { color:#176c47; font-size:14px; }
.campaign-upload-box span,.campaign-upload-box small { color:var(--muted); font-size:11px; }
.campaign-file-list { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 12px; }
.campaign-file-list span { align-items:center; background:var(--positive-bg); border-radius:999px; color:#38614b; display:flex; font-size:11px; gap:7px; padding:5px 9px; }
.campaign-file-list button { background:transparent; border:0; color:var(--brick-red); cursor:pointer; font-size:10px; padding:0; text-decoration:underline; }
.campaign-warning { background:var(--warning-bg); border:1px solid #ead79a; border-radius:8px; display:grid; gap:5px; margin:12px 0; padding:11px; }
.campaign-warning b { color:var(--brass); font-size:12px; }
.campaign-warning span { color:#745f30; font-size:11px; }
.wecom-campaign-preview { background:#edf4ec; border-radius:12px; display:grid; gap:10px; min-height:220px; padding:18px; }
.wecom-campaign-preview > small { color:#65756b; font-size:11px; }
.wecom-message-bubble { background:#fff; border-radius:4px 12px 12px 12px; box-shadow:0 1px 4px #183d2720; font-size:13px; line-height:1.7; max-width:88%; padding:13px; white-space:pre-wrap; }
.wecom-campaign-preview img { border-radius:8px; display:block; max-height:430px; max-width:88%; object-fit:contain; object-position:left top; }
.campaign-poster-empty { border:1px dashed #b9c9bd; border-radius:8px; color:#738078; font-size:11px; max-width:88%; padding:20px; text-align:center; }
.campaign-list-poster { border-radius:var(--radius-xs); float:left; height:62px; margin-right:9px; object-fit:cover; width:48px; }
/* flex-basis:100% = 原 grid-column:1/-1 的 flex 写法——步骤条独占一整行 */
.campaign-onboarding { align-items:center; background:#fff; border:1px solid var(--line); border-radius:10px; display:flex; flex-basis:100%; gap:9px; padding:12px 16px; }
.campaign-onboarding > small { color:var(--muted); font-size:10px; margin-left:auto; }
.campaign-onboarding > b { color:var(--muted); font-size:13px; }
.campaign-onboarding span { align-items:center; color:var(--muted); display:flex; font-size:12px; gap:7px; }
.campaign-onboarding i { align-items:center; background:var(--soft); border-radius:99px; display:flex; font-size:10px; font-style:normal; font-weight:800; height:22px; justify-content:center; width:22px; }
.campaign-onboarding .active { color:var(--warning); font-weight:700; }
.campaign-onboarding .active i { background:#fff0c5; color:var(--warning); }
.campaign-onboarding .ready { color:var(--positive); font-weight:700; }
.campaign-onboarding .ready i { background:var(--positive-bg); color:var(--positive); }
.campaign-editing { align-items:center; background:var(--info-bg); border:1px solid #b8d4f2; border-radius:8px; display:flex; justify-content:space-between; margin-bottom:12px; padding:9px 11px; }
.campaign-editing span { color:#36566f; font-size:12px; }
.campaign-editing button { background:transparent; border:0; color:var(--info); cursor:pointer; font-size:11px; }
.field-help,.field-missing { display:block; font-size:10px; line-height:1.45; margin-top:4px; }
.field-help { color:var(--muted); }
.field-missing { color:#a44932; }
.campaign-missing-summary { background:var(--warning-bg); border-radius:var(--radius-s); color:#795a17; font-size:11px; margin:8px 0 0; padding:9px 11px; }
.campaign-paste-field { background:var(--soft); border:1px solid var(--line); border-radius:var(--radius-m); margin:10px 0 12px; padding:12px; }
.campaign-batch-summary { background:var(--positive-bg); border-radius:var(--radius-s); color:#176c47; font-size:11px; margin:0 0 12px; padding:8px 10px; }
.campaign-auto-result { background:var(--positive-bg); border-left:3px solid #6fb58d; display:grid; gap:3px; margin:0 0 12px; padding:10px 12px; }
.campaign-auto-result b { color:#176c47; font-size:12px; }
.campaign-auto-result span { color:var(--muted); font-size:10px; }
.campaign-city-field { border:1px solid var(--line); border-radius:var(--radius-m); display:flex; flex-wrap:wrap; gap:10px 16px; margin:0 0 14px; padding:12px; }
.campaign-city-field legend { color:var(--muted); font-size:11px; padding:0 5px; }
.campaign-city-field label { align-items:center; display:flex; font-size:12px; gap:5px; }
.campaign-city-field > input { border:1px solid var(--line); border-radius:var(--radius-s); flex-basis:100%; min-height:38px; padding:0 10px; }
.campaign-city-field small { flex-basis:100%; }
.campaign-multi-confirm { align-items:flex-start; background:var(--warning-bg); border:1px solid #ead79a; border-radius:var(--radius-m); display:flex; gap:9px; margin:12px 0; padding:11px; }
.campaign-multi-confirm span { color:#745f30; display:grid; font-size:11px; gap:3px; }
.preview-step { color:#456554; font-size:11px; margin-top:3px; }
.activity-list .danger-link { color:var(--brick-red); }
.campaign-linkage-steps { display:grid; gap:7px; grid-template-columns:repeat(2,minmax(0,1fr)); }
.campaign-linkage-steps span { align-items:center; background:#fff; border:1px solid var(--line); border-radius:8px; color:var(--muted); display:flex; font-size:11px; gap:7px; padding:8px; }
.campaign-linkage-steps i { align-items:center; background:var(--soft); border-radius:99px; display:flex; font-size:10px; font-style:normal; font-weight:800; height:20px; justify-content:center; width:20px; }
.campaign-linkage-steps .ready { border-color:#9fd2b4; color:var(--positive); }
.campaign-linkage-steps .ready i { background:var(--positive-bg); color:var(--positive); }
.campaign-linkage-steps .optional { border-style:dashed; }

.coupon-card small { font-size: 12px; letter-spacing:.08em; }
.coupon-card h2 { font-size:27px; line-height:1.25; margin:0; }
.coupon-card p { font-size: 14px; margin:0; opacity:.8; }
.coupon-card em { border-top:1px solid rgba(255,255,255,.3); font-size: 13px; font-style:normal; margin-top:8px; padding-top:12px; text-align:center; }

.coupon-layout { grid-template-columns:minmax(0,1fr) minmax(240px,.7fr); }
.coupon-card { background:linear-gradient(145deg,#7b4b1e,#d09a48); }
.coupon-code { background:#fff; border-radius:8px; color:#7b4b1e; font-size: 15px; font-weight:800; padding:14px; text-align:center; }
.coupon-card > span { font-size: 13px; }

.chat.review-tip {
  background: var(--warning-bg);
  border-color: var(--brass-line);
}

.detail-layout {
  display:grid;
  gap:12px;
  grid-template-columns:minmax(0,1.35fr) minmax(250px,.65fr);
}

.detail-main,
.detail-side {
  align-content:start;
  display:grid;
  gap:10px;
}

.detail-main {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}

.detail-side {
  align-self: start;
  position: sticky;
  top: 0;
}

.detail-video-area {
  display:grid;
  gap:10px;
  grid-template-columns:210px minmax(0,1fr);
}

.detail-video-area > .media-cover { min-height:360px; }
.detail-facts { display:grid; gap:8px; align-content:start; }
.detail-facts h3 { font-size: 16px; margin:0; }
.detail-facts p { color:var(--muted); font-size: 12px; margin:0; }

.metric-cards.compact { grid-template-columns:repeat(3,1fr); }
.metric-cards.compact > span { background:var(--soft); border-radius:var(--radius-xs); display:grid; font-size: 11px; gap:2px; padding:7px; text-align:center; }
.metric-cards.compact b { font-size: 14px; }

.segment-list { display:grid; gap:5px; }
.segment-list button { align-items:center; background:var(--soft); border:1px solid var(--line); border-radius:var(--radius-xs); display:grid; font-size: 12px; gap:7px; grid-template-columns:28px 1fr auto; min-height:44px; padding:8px; text-align:left; }
.segment-list i { align-items:center; background:var(--accent); border-radius:50%; color:#fff; display:flex; font-style:normal; height:20px; justify-content:center; width:20px; }
.segment-list em { color:var(--info); font-style:normal; }

.detail-conversation { display:grid; gap:7px; }
.knowledge-cite { background:var(--warning-bg); border:1px solid var(--brass-line); border-radius:var(--radius-s); color:var(--warning); padding:8px; }
.knowledge-cite b { font-size: 12px; }
.knowledge-cite p { font-size: 12px; line-height:1.5; margin:4px 0 0; }

.recall-detail { display:grid; gap:10px; }
.customer-profile { align-items:center; background:var(--soft); border-radius:8px; display:grid; gap:10px; grid-template-columns:70px 1fr; padding:10px; }
.avatar-large { font-size:22px; height:70px; width:70px; }
.spokesperson-detail-avatar { border-radius:8px; height:70px; object-fit:cover; object-position:center 28%; width:70px; }
.customer-profile h3 { font-size: 15px; margin:0; }
.customer-profile p { color:var(--muted); font-size: 12px; }

.timeline-detail { display:grid; gap:5px; }
.timeline-detail > div { align-items:center; border-bottom:1px solid var(--line-soft); display:grid; font-size: 12px; gap:8px; grid-template-columns:30px 1fr auto; min-height:46px; padding:8px; }
.timeline-detail i { align-items:center; background:var(--accent); border-radius:50%; color:#fff; display:flex; font-style:normal; height:22px; justify-content:center; width:22px; }

.parsed-detail { display:grid; gap:6px; }
.parsed-detail h3 { font-size: 15px; margin:0 0 5px; }
.parsed-detail > div { align-items:center; background:var(--soft); border-radius:6px; display:grid; font-size: 12px; gap:8px; grid-template-columns:110px 1fr auto; min-height:44px; padding:9px; }

.faq-editor { display:grid; gap:8px; }
.faq-editor h3 { font-size: 17px; margin:0; }
.faq-editor > p { color:var(--muted); font-size: 12px; margin:0; }
.faq-editor textarea { min-height:130px; }

.detail-actions { display:flex; gap:8px; margin-top:5px; }
.audit-line { align-items:center; background:var(--positive-wash); border-radius:var(--radius-xs); display:flex; font-size: 12px; gap:7px; min-height:40px; padding:8px; }
.audit-line span { color:var(--positive); }
.detail-check-label { font-size: 12px; }

.brain-page {
  align-content: start;
  display: grid;
  gap: 12px;
}

.brain-overview {
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 360px);
}

.brain-overview > div {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 3px;
  padding: 14px;
}

.brain-overview span,
.brain-overview small {
  color: var(--muted);
  font-size: 12px;
}

.brain-overview strong {
  font-size: 24px;
}

.brain-task-list {
  display: grid;
  gap: 8px;
}

.brain-task {
  align-items: center;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  padding: 12px;
}

.brain-task-current {
  background: var(--warning-bg);
  border-color: var(--brass-line);
}

.brain-task-done {
  background: var(--positive-bg);
  color: #4e6758;
}

.brain-task-order {
  align-items: center;
  background: var(--ink);
  border-radius: 50%;
  color: #fff;
  display: flex;
  font-size: 13px;
  font-weight: 800;
  height: 30px;
  justify-content: center;
  width: 30px;
}

.brain-task-copy {
  display: grid;
  gap: 4px;
}

.brain-task-copy .chip-wrap span:not(.pill) {
  color: var(--muted);
  font-size: 12px;
}

.brain-task-copy h3,
.brain-gap-heading h2,
.brain-trace-heading h2 {
  margin: 0;
}

.brain-task-copy h3 {
  font-size: 15px;
}

.brain-task-copy p,
.brain-gap-heading p,
.brain-trace-heading p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
  margin: 0;
}

.brain-plain-note,
.brain-sync-note,
.brain-upload-result,
.brain-form-reminder {
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.65;
  padding: 11px 13px;
}

.brain-plain-note,
.brain-sync-note {
  align-items: start;
  display: grid;
  gap: 3px;
  grid-template-columns: max-content minmax(0, 1fr);
}

.brain-plain-note {
  background: var(--canvas);
}

.brain-sync-note {
  background: var(--info-bg);
  border: 1px solid #c8dcff;
}

.brain-plain-note span,
.brain-sync-note span {
  color: var(--muted);
}

.brain-upload-button {
  cursor: pointer;
}

.brain-upload-button input {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.brain-upload-button:has(input:focus-visible) {
  outline: 2px solid var(--info);
  outline-offset: 2px;
}

.brain-upload-result {
  align-items: center;
  background: var(--info-bg);
  color: var(--info);
  display: flex;
  gap: 10px;
  justify-content: space-between;
  margin-bottom: 8px;
}

.brain-document-list {
  display: grid;
  gap: 7px;
}

.brain-document-list > button {
  align-items: center;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  min-height: 58px;
  padding: 9px 11px;
  text-align: left;
  width: 100%;
}

.brain-document-list > button.active {
  background: var(--info-bg);
  border-color: #8eb2ed;
}

.brain-document-list > button > div {
  display: grid;
  gap: 2px;
}

.brain-document-list b {
  font-size: 13px;
}

.brain-document-list span:not(.pill) {
  color: var(--muted);
  font-size: 12px;
}

.brain-three-steps {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.brain-three-steps > div {
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  display: grid;
  gap: 3px;
  padding: 10px;
}

.brain-three-steps i {
  align-items: center;
  background: var(--line);
  border-radius: 50%;
  display: flex;
  font-size: 11px;
  font-style: normal;
  height: 22px;
  justify-content: center;
  width: 22px;
}

.brain-three-steps b {
  font-size: 13px;
}

.brain-three-steps span {
  color: var(--muted);
  font-size: 12px;
}

.brain-three-steps .done {
  background: var(--positive-bg);
  border-color: var(--positive-line);
}

.brain-three-steps .done i {
  background: var(--positive);
  color: #fff;
}

.brain-three-steps .current {
  background: var(--warning-bg);
  border-color: var(--brass-line);
}

.brain-three-steps .current i {
  background: var(--warning);
  color: #fff;
}

.brain-three-steps .waiting {
  color: var(--muted);
}

.brain-review-grid,
.brain-form-grid,
.brain-asset-review,
.brain-trace-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.brain-review-grid > section,
.brain-rule-grid > div,
.brain-rule-test,
.brain-answer-preview,
.brain-replace-file {
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  display: grid;
  gap: 7px;
  padding: 10px;
}

.brain-review-grid b,
.brain-replace-file b {
  font-size: 13px;
}

.brain-review-grid p,
.brain-replace-file p,
.brain-answer-preview p,
.brain-rule-grid p,
.brain-rule-test p {
  font-size: 13px;
  line-height: 1.65;
  margin: 0;
}

.brain-before {
  border-radius: var(--radius-xs);
  padding: 8px;
}

.brain-before {
  background: var(--danger-bg);
  color: var(--danger);
}

.brain-check-line {
  align-items: center;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: flex;
  font-size: 13px;
  gap: 7px;
  min-height: 44px;
  padding: 8px 0;
  text-align: left;
  width: 100%;
}

.brain-check-line:hover span:last-child,
.brain-check-line:focus-visible span:last-child {
  color: var(--info);
}

.brain-check-line:disabled {
  cursor: default;
  opacity: .72;
}

.brain-check-line-readonly {
  cursor: default;
}

.brain-check-line-readonly:hover span:last-child {
  color: inherit;
}

.brain-check-line-readonly .brain-check-box {
  background: var(--positive);
  border-color: var(--positive);
}

.brain-check-box {
  align-items: center;
  background: #fff;
  border: 1px solid var(--line-dark);
  border-radius: 4px;
  color: #fff;
  display: inline-flex;
  flex: 0 0 16px;
  font-size: 11px;
  height: 16px;
  justify-content: center;
  margin-top: 1px;
  width: 16px;
}

.brain-check-line[aria-pressed="true"] .brain-check-box {
  background: var(--info);
  border-color: var(--info);
}

.brain-replace-file {
  align-items: center;
  grid-template-columns: minmax(0, 1fr) auto;
}

.brain-field {
  display: grid;
  font-size: 13px;
  gap: 5px;
}

.brain-field > span {
  font-size: 12px;
  font-weight: 700;
}

.brain-field input,
.brain-field textarea {
  background: #fff;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-s);
  font-size: 13px;
  line-height: 1.65;
  padding: 9px;
  width: 100%;
}

.brain-field input {
  min-height: 42px;
}

.brain-field textarea {
  min-height: 92px;
  resize: vertical;
}

.brain-field-wide {
  grid-column: 1 / -1;
}

.brain-answer-preview {
  margin-top: 10px;
}

.brain-answer-preview b,
.brain-rule-grid b,
.brain-rule-test b {
  font-size: 13px;
}

.brain-answer-preview small {
  color: var(--muted);
  font-size: 12px;
}

.brain-save-row {
  justify-content: flex-end;
  margin-top: 10px;
}

.brain-history {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  padding: 10px 12px;
}

.brain-history summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
}

.brain-history p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.65;
  margin: 8px 0 0;
}

.brain-conversation {
  display: grid;
  gap: 8px;
}

.brain-conversation > div {
  border-radius: var(--radius-s);
  display: grid;
  gap: 3px;
  max-width: 92%;
  padding: 9px 10px;
}

.brain-conversation .customer {
  background: var(--soft);
}

.brain-conversation .assistant {
  background: var(--info-bg);
  justify-self: end;
}

.brain-conversation .result {
  background: var(--positive-bg);
  max-width: 100%;
}

.brain-conversation b {
  font-size: 11px;
}

.brain-conversation p {
  font-size: 13px;
  line-height: 1.65;
  margin: 0;
}

.brain-answer-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 10px 0;
}

.brain-test-pass {
  background: var(--positive-bg);
  border-radius: 6px;
  color: var(--positive);
  font-size: 12px;
  padding: 7px 9px;
}

.brain-answer-checks span {
  background: var(--soft);
  color: var(--ink-2);
  border-radius: 6px;
  font-size: 12px;
  padding: 7px 9px;
}

.brain-answer-checks .passed {
  background: var(--positive-bg);
  color: var(--positive);
}

.brain-answer-checks .failed {
  background: var(--warning-bg);
  color: var(--warning);
}

.brain-rule-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.brain-rule-test {
  margin-top: 10px;
}

.brain-rule-test .brain-test-pass {
  margin-top: 2px;
}

.brain-test-result {
  background: var(--info-bg);
  border-radius: var(--radius-s);
  display: grid;
  gap: 5px;
  margin-top: 3px;
  padding: 9px;
}

.brain-test-result p {
  margin: 0;
}

.brain-test-result span {
  color: var(--positive);
  font-size: 12px;
}

.brain-asset-grid {
  display: grid;
  gap: 9px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.brain-asset-grid > button {
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  padding: 0;
  text-align: left;
}

.brain-asset-grid > button.active {
  border-color: var(--info);
  box-shadow: 0 0 0 1px var(--info);
}

.brain-asset-grid img {
  aspect-ratio: 16 / 9;
  display: block;
  object-fit: cover;
  width: 100%;
}

.brain-asset-grid > button > div {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  padding: 9px;
}

.brain-asset-grid b {
  font-size: 12px;
}

.brain-condition-list {
  display: grid;
  gap: 7px;
  margin: 0 0 10px;
}

.brain-condition-list > div {
  background: var(--soft);
  border-radius: 6px;
  display: grid;
  gap: 3px;
  padding: 9px;
}

.brain-condition-list dt {
  font-size: 12px;
  font-weight: 700;
}

.brain-condition-list dd {
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.6;
  margin: 0;
}

.brain-asset-source {
  align-items: center;
  background: var(--soft);
  border-radius: var(--radius-s);
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  justify-content: space-between;
  margin-bottom: 10px;
  padding: 9px;
}

.brain-asset-source span {
  color: var(--muted);
  font-size: 12px;
}

.brain-chat-preview {
  display: grid;
  gap: 8px;
}

.brain-chat-preview p {
  background: var(--info-bg);
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.65;
  margin: 0;
  padding: 10px;
}

.brain-chat-preview img {
  border-radius: 8px;
  display: block;
  height: auto;
  object-fit: contain;
  width: 100%;
}

.brain-chat-preview small {
  color: var(--muted);
}

.brain-preview-empty {
  align-items: center;
  background: var(--soft);
  border: 1px dashed var(--line-dark);
  border-radius: 8px;
  color: var(--muted);
  display: flex;
  justify-content: center;
  min-height: 220px;
}

.brain-gap-heading,
.brain-trace-heading {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 6px;
  padding: 14px;
}

.brain-gap-heading > div,
.brain-trace-heading > div {
  align-items: center;
  display: flex;
  gap: 8px;
}

.brain-gap-heading > div > span,
.brain-trace-heading > div > span {
  color: var(--muted);
  font-size: 12px;
}

.brain-gap-heading h2,
.brain-trace-heading h2 {
  font-size: 20px;
}

.brain-form-reminder {
  background: var(--warning-bg);
  color: var(--warning);
  margin: 10px 0;
}

.brain-evidence-list {
  display: grid;
  gap: 7px;
}

.brain-evidence-list > div {
  background: var(--soft);
  border-radius: 6px;
  display: grid;
  gap: 2px;
  padding: 9px;
}

.brain-evidence-list b {
  font-size: 12px;
}

.brain-evidence-list span {
  color: var(--muted);
  font-size: 12px;
}

.brain-evidence-list small,
.brain-fact-provenance {
  color: var(--muted);
  display: block;
  font-size: 12px;
  line-height: 1.65;
  margin-top: 4px;
}

.brain-fact-provenance strong {
  color: #4c514d;
  font-weight: 650;
}

.brain-fact-provenance a,
.brain-kb-detail a {
  color: var(--positive);
  font-weight: 650;
  text-decoration: none;
}

.brain-fact-provenance a:hover,
.brain-kb-detail a:hover {
  text-decoration: underline;
}

.brain-evidence-list q {
  border-left: 2px solid var(--line-dark);
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.6;
  padding-left: 8px;
}

.brain-evidence-list + .brain-history {
  margin-top: 8px;
}

/* 公开原件 → 可定位证据 → 知识模块。这里的摘录保持短小，完整内容仍回到原件。 */
.brain-evidence-cards {
  display: grid;
  gap: 10px;
  /* 模块详情右侧常只有约 650px；两列才能让真实摘录和来源定位可读。 */
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.brain-evidence-cards > article {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 14px;
}

.brain-evidence-cards header,
.brain-evidence-cards footer,
.brain-evidence-cards footer > div {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

.brain-evidence-cards header > span {
  color: var(--muted);
  font-size: 11px;
  min-width: 0;
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brain-evidence-cards h4 {
  font-size: 14px;
  line-height: 1.45;
  margin: 0;
}

.brain-evidence-cards > article > p {
  color: var(--ink-2);
  display: -webkit-box;
  font-size: 12px;
  line-height: 1.7;
  margin: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
}

.brain-evidence-cards footer {
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.brain-evidence-cards footer > span {
  color: var(--muted);
  flex: 1 1 auto;
  font-size: 11px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brain-evidence-cards footer > span > b {
  color: var(--ink-2);
}

.brain-evidence-cards footer .ui-button {
  min-height: 30px;
  padding: 0 9px;
}

.brain-evidence-cards footer a,
.brain-evidence-detail-list a {
  color: var(--positive);
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.brain-evidence-cards footer a:hover,
.brain-evidence-detail-list a:hover {
  text-decoration: underline;
}

.brain-evidence-detail-grid {
  align-items: start;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr);
}

.brain-evidence-quote {
  background: var(--soft);
  border-left: 3px solid var(--positive);
  border-radius: 0 8px 8px 0;
  padding: 16px;
}

.brain-evidence-quote p {
  color: #303532;
  font-size: 14px;
  line-height: 1.8;
  margin: 0;
}

.brain-evidence-quote + .brain-source-tip {
  margin-top: 12px;
}

.brain-evidence-detail-list {
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  margin: 0;
  overflow: hidden;
}

.brain-evidence-detail-list > div {
  display: grid;
  font-size: 12px;
  grid-template-columns: 88px minmax(0, 1fr);
}

.brain-evidence-detail-list > div + div {
  border-top: 1px solid var(--line);
}

.brain-evidence-detail-list dt,
.brain-evidence-detail-list dd {
  margin: 0;
  padding: 11px 12px;
}

.brain-evidence-detail-list dt {
  background: var(--soft);
  color: var(--muted);
}

.brain-evidence-detail-list dd {
  line-height: 1.6;
  min-width: 0;
  overflow-wrap: anywhere;
}

.brain-decision-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.brain-problem-form {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
}

.brain-problem-form .ui-button {
  justify-self: start;
}

.brain-decision-row + .brain-test-pass,
.brain-problem-form + .brain-test-pass {
  margin-top: 10px;
}

/* Enterprise brain: full-width document-to-knowledge workspace */
.content-layout.brain-mode {
  grid-template-columns: minmax(0, 1fr);
}

.brain-page {
  display: grid;
  gap: 14px;
}

.brain-task-head {
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex;
  gap: 18px;
  justify-content: space-between;
  padding: 18px 20px;
}

.brain-task-head > div:first-child {
  min-width: 0;
}

.brain-task-head h2 {
  font-size: 22px;
  line-height: 1.35;
  margin: 0;
}

.brain-task-head p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
  margin: 5px 0 0;
}

.brain-task-head > button,
.brain-task-head > .pill,
.brain-task-head > .button-row {
  flex: 0 0 auto;
}

.brain-metric-grid,
.brain-decision-summary,
.brain-expansion-status,
.brain-release-metrics {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.brain-metric-grid.compact,
.brain-decision-summary,
.brain-expansion-status {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.brain-metric {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  display: grid;
  gap: 2px;
  min-height: 78px;
  padding: 14px 16px;
}

.brain-metric.soft {
  background: var(--warning-bg);
  border-color: var(--brass-line);
}

.brain-metric b {
  font-size: 23px;
  line-height: 1.25;
}

.brain-metric span {
  color: var(--muted);
  font-size: 12px;
}

.ai-reply-image-library {
  display: grid;
  gap: 14px;
}

.ai-reply-image-library input.sr-only {
  height: 1px;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  width: 1px;
}

.ai-reply-image-summary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ai-reply-image-filters {
  margin: 0;
}

.ai-reply-image-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ai-reply-image-grid > article {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  min-width: 0;
  overflow: hidden;
}

.ai-reply-image-grid > article.retired {
  background: #faf9f5;
}

.ai-reply-image-grid img,
.ai-reply-image-empty {
  aspect-ratio: 4 / 3;
  background: var(--soft);
  display: block;
  object-fit: cover;
  width: 100%;
}

.ai-reply-image-preview-trigger {
  appearance: none;
  background: var(--soft);
  border: 0;
  cursor: zoom-in;
  display: block;
  padding: 0;
  position: relative;
  width: 100%;
}

.ai-reply-image-preview-trigger img {
  transition: filter .15s ease, transform .15s ease;
}

.ai-reply-image-preview-trigger:hover img,
.ai-reply-image-preview-trigger:focus-visible img {
  filter: brightness(.82);
  transform: scale(1.015);
}

.ai-reply-image-preview-trigger span {
  background: rgba(22, 18, 35, .78);
  border-radius: 999px;
  bottom: 10px;
  color: #fff;
  font-size: 12px;
  left: 50%;
  opacity: 0;
  padding: 5px 10px;
  pointer-events: none;
  position: absolute;
  transform: translate(-50%, 4px);
  transition: opacity .15s ease, transform .15s ease;
  white-space: nowrap;
}

.ai-reply-image-preview-trigger:hover span,
.ai-reply-image-preview-trigger:focus-visible span {
  opacity: 1;
  transform: translate(-50%, 0);
}

.ai-reply-image-grid > article.retired img {
  filter: grayscale(1);
  opacity: .58;
}

.ai-reply-image-empty {
  align-items: center;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  font-size: 12px;
  gap: 5px;
  justify-content: center;
  padding: 18px;
  text-align: center;
}

.ai-reply-image-empty b {
  color: var(--ink-2, #443c5c);
  font-size: 13px;
}

.ai-reply-image-empty small {
  font-size: 11px;
  line-height: 1.45;
  max-width: 220px;
}

.ai-reply-image-card-body {
  display: grid;
  gap: 8px;
  padding: 12px;
}

.ai-reply-image-card-body > div {
  align-items: start;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.ai-reply-image-card-body h3 {
  font-size: 14px;
  line-height: 1.35;
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.ai-reply-image-card-body p,
.ai-reply-image-card-body small,
.ai-reply-image-card-body em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.6;
  margin: 0;
  overflow-wrap: anywhere;
}

.ai-reply-image-source {
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
  padding: 3px 8px;
  width: fit-content;
}

.ai-reply-image-actions {
  gap: 8px;
  justify-content: flex-start;
  margin: 2px 0 0;
}

.ai-reply-image-actions .ui-button {
  min-height: 34px;
  padding: 8px 12px;
}

.ai-reply-image-preview-backdrop {
  align-items: center;
  background: rgba(26, 22, 38, .58);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 24px;
  position: fixed;
  z-index: 70;
}

.ai-reply-image-preview-modal {
  background: #fff;
  border: 1px solid var(--line-dark, #8b83a6);
  border-radius: 8px;
  box-shadow: 0 24px 70px rgba(26, 22, 38, .24);
  max-height: calc(100vh - 48px);
  max-width: min(960px, 100%);
  overflow: hidden;
  width: min(960px, 100%);
}

.ai-reply-image-preview-modal > header {
  align-items: start;
  border-bottom: 1px solid var(--line-soft, #ebe7f6);
  display: flex;
  gap: 16px;
  justify-content: space-between;
  padding: 16px 18px;
}

.ai-reply-image-preview-modal > header > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.ai-reply-image-preview-modal h3 {
  font-size: 16px;
  line-height: 1.35;
  margin: 0;
  overflow-wrap: anywhere;
}

.ai-reply-image-preview-modal header span {
  color: var(--muted);
  font-size: 12px;
}

.ai-reply-image-preview-modal > img,
.ai-reply-image-preview-failed {
  background: var(--soft);
  display: block;
  max-height: calc(100vh - 150px);
  min-height: 180px;
  object-fit: contain;
  padding: 18px;
  width: 100%;
}

.ai-reply-image-preview-failed {
  align-items: center;
  color: var(--muted);
  display: flex;
  justify-content: center;
}

.ai-reply-upload-list {
  display: grid;
  gap: 8px;
}

.ai-reply-upload-list > div {
  align-items: center;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 10px 12px;
}

.ai-reply-upload-list span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.ai-reply-upload-list b {
  font-size: 13px;
  overflow-wrap: anywhere;
}

.ai-reply-upload-list small {
  color: var(--muted);
  font-size: 12px;
}

.ai-reply-image-draft {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  padding: 14px;
}

.ai-reply-image-draft label {
  display: grid;
  gap: 6px;
}

.ai-reply-image-draft span {
  color: var(--muted);
  font-size: 12px;
}

.ai-reply-image-draft input,
.ai-reply-image-draft textarea {
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  padding: 10px 11px;
  width: 100%;
}

.ai-reply-image-draft textarea {
  min-height: 78px;
  resize: vertical;
}

/*
 * 取数期间的骨架格。标签照常显示（那是固定文案，不需要等接口），只有数值位置
 * 画一条占位条 —— 这一屏刻意区分「不知道」和「是 0」，骨架里放个 0 或者放上
 * 一次的数都会把「还没查到」说成一个具体的数。
 *
 * 高度由 .brain-metric 的 min-height 保证，和真值态一致：数据回来时这一章不跳。
 */
.brain-metric.skeleton b {
  animation: brain-skeleton-pulse 1.4s ease-in-out infinite;
  background: linear-gradient(90deg, var(--brick-blue-soft), var(--info-bg), var(--brick-blue-soft));
  border-radius: 5px;
  display: block;
  /* 高度对齐真值态的 .brain-metric b（font-size 23px），换态时这一格不跳 */
  height: 23px;
  width: 62px;
}

.brain-metric.skeleton.soft b { background: linear-gradient(90deg, #f0e4cd, #f8f1e2, #f0e4cd); }

@keyframes brain-skeleton-pulse {
  0%, 100% { opacity: .55; }
  50% { opacity: 1; }
}

/* 动画只是「还在转」的提示，关掉不影响读懂页面 */
@media (prefers-reduced-motion: reduce) {
  .brain-metric.skeleton b { animation: none; }
}

.brain-dropzone {
  align-items: center;
  background: #fff;
  border: 1px dashed var(--line-dark);
  border-radius: var(--radius);
  display: grid;
  gap: 5px;
  justify-items: center;
  min-height: 184px;
  padding: 28px;
  text-align: center;
  width: 100%;
}

.brain-dropzone:hover {
  background: var(--soft);
  border-color: var(--ink);
}

.brain-dropzone > b {
  align-items: center;
  background: var(--ink);
  border-radius: 50%;
  color: #fff;
  display: flex;
  font-size: 24px;
  height: 46px;
  justify-content: center;
  line-height: 1;
  margin-bottom: 4px;
  width: 46px;
}

.brain-dropzone strong {
  font-size: 17px;
}

.brain-dropzone span {
  color: var(--muted);
  font-size: 13px;
}

.brain-file-list,
.brain-fact-list,
.brain-evidence-list,
.brain-source-list,
.brain-check-list,
.brain-change-list {
  display: grid;
  gap: 7px;
}

.brain-file-list > button {
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  grid-template-columns: 42px minmax(180px, 1fr) auto 150px 16px;
  min-height: 66px;
  padding: 10px 14px;
  text-align: left;
  width: 100%;
}

.brain-file-list > button:hover {
  border-color: var(--line-dark);
  transform: translateY(-1px);
}

.brain-file-list > button > span:nth-child(2),
.brain-source-list > div > span,
.brain-check-list > div > span,
.brain-change-list > div > span,
.brain-candidate-row > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.brain-file-list small,
.brain-source-list small,
.brain-check-list small,
.brain-change-list small,
.brain-candidate-row small {
  color: var(--muted);
  font-size: 12px;
}

.brain-file-list em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  text-align: right;
}

.brain-file-list i {
  color: var(--muted);
  font-size: 22px;
  font-style: normal;
}

.brain-file-icon {
  align-items: center;
  background: var(--accent-soft);
  border: 1px solid var(--line);
  border-radius: 6px;
  display: flex !important;
  font-size: 10px;
  font-weight: 800;
  height: 42px;
  justify-content: center;
  letter-spacing: .04em;
  width: 42px;
}

.brain-source-tip,
.brain-inline-action,
.brain-publish-footer {
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--ink);
  border-radius: 8px;
  display: flex;
  gap: 14px;
  justify-content: space-between;
  padding: 14px 16px;
}

.brain-source-tip > b {
  flex: 0 0 auto;
}

.brain-source-tip > span,
.brain-source-tip > small,
.brain-inline-action span,
.brain-publish-footer span {
  color: var(--muted);
  font-size: 12px;
}

.brain-source-tip > span {
  flex: 1 1 auto;
}

.brain-processing-progress {
  align-items: center;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.brain-processing-progress b {
  font-size: 13px;
}

.brain-pipeline {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  margin-top: 16px;
}

.brain-pipeline > div {
  align-items: center;
  color: var(--muted);
  display: grid;
  font-size: 12px;
  gap: 5px;
  justify-items: center;
  text-align: center;
}

.brain-pipeline i {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: flex;
  font-style: normal;
  height: 28px;
  justify-content: center;
  width: 28px;
}

.brain-pipeline .done,
.brain-pipeline .active {
  color: var(--ink);
  font-weight: 700;
}

.brain-pipeline .done i {
  background: var(--positive-bg);
  border-color: var(--positive);
  color: var(--positive);
}

.brain-pipeline .active i {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.brain-two-column,
.brain-conflict-layout,
.brain-release-grid {
  align-items: start;
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.brain-two-column.expansion {
  grid-template-columns: minmax(0, 1.35fr) minmax(340px, .65fr);
}

.brain-fact-list > div,
.brain-evidence-list > div,
.brain-source-list > div,
.brain-check-list > div,
.brain-change-list > div,
.brain-candidate-row {
  align-items: center;
  background: var(--soft);
  border-radius: var(--radius-s);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  min-height: 52px;
  padding: 10px 12px;
}

.brain-fact-list > div > span,
.brain-evidence-list > div {
  min-width: 0;
}

.brain-fact-list > div > span,
.brain-evidence-list > div {
  display: grid;
  gap: 2px;
}

.brain-fact-list small,
.brain-evidence-list span {
  color: var(--muted);
  font-size: 12px;
}

.brain-inline-action > div,
.brain-publish-footer > div {
  display: grid;
  gap: 2px;
}

.brain-filter-row {
  align-items: center;
  display: flex;
  gap: 16px;
  justify-content: space-between;
}

.brain-filter-row > div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.brain-filter-row > span {
  color: var(--muted);
  font-size: 12px;
}

.brain-category-grid {
  align-items: stretch;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.brain-category {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 16px;
}

.brain-category-head {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.brain-category h3,
.brain-expansion-strip h3 {
  font-size: 17px;
  margin: 0;
}

.brain-category > p,
.brain-expansion-strip p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
  margin: 5px 0 12px;
}

.brain-module-lines {
  display: grid;
  flex: 1 1 auto;
  gap: 0;
  margin-bottom: 14px;
}

.brain-module-lines > div {
  align-items: center;
  border-top: 1px solid var(--line-soft);
  display: flex;
  font-size: 12px;
  gap: 8px;
  justify-content: space-between;
  min-height: 34px;
  padding: 5px 0;
}

.brain-module-lines span {
  min-width: 0;
}

.brain-module-lines em {
  color: var(--muted);
  flex: 0 0 auto;
  font-size: 11px;
  font-style: normal;
}

.brain-expansion-strip {
  align-items: center;
  background: var(--accent);
  border-radius: var(--radius);
  color: #fff;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(210px, .8fr) minmax(420px, 1.7fr) minmax(170px, .5fr);
  padding: 18px;
}

.brain-expansion-strip p,
.brain-expansion-strip small {
  color: #bdbdbd;
}

.brain-expansion-strip > div:last-child {
  display: grid;
  gap: 10px;
  justify-items: stretch;
}

.brain-expansion-lines {
  display: grid;
  gap: 5px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 7px 0;
}

.brain-expansion-lines span {
  color: #ddd;
  font-size: 12px;
}

.brain-expansion-lines strong {
  color: #fff;
}

.brain-module-browser {
  align-items: start;
  display: grid;
  gap: 14px;
  grid-template-columns: 310px minmax(0, 1fr);
}

.brain-module-nav-card {
  position: sticky;
  top: 20px;
}

.brain-module-nav-card > div {
  display: grid;
  gap: 4px;
}

.brain-module-nav-card button {
  align-items: center;
  background: #fff;
  border: 1px solid transparent;
  border-radius: var(--radius-s);
  display: flex;
  gap: 8px;
  justify-content: space-between;
  min-height: 48px;
  padding: 8px 9px;
  text-align: left;
  width: 100%;
}

.brain-module-nav-card button:hover,
.brain-module-nav-card button.active {
  background: var(--soft);
  border-color: var(--line);
}

.brain-module-nav-card button.active {
  box-shadow: inset 3px 0 0 var(--ink);
}

.brain-module-nav-card button > span {
  align-items: center;
  display: flex;
  gap: 6px;
  min-width: 0;
}

.brain-module-nav-card button em {
  font-size: 12px;
  font-style: normal;
}

.brain-module-detail {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.brain-detail-title {
  align-items: start;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex;
  gap: 14px;
  justify-content: space-between;
  padding: 18px;
}

.brain-detail-title h2 {
  font-size: 22px;
  margin: 7px 0 3px;
}

.brain-detail-title p {
  color: var(--muted);
  font-size: 13px;
  margin: 0;
}

.brain-structured-facts {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.brain-structured-facts > div {
  display: grid;
  font-size: 13px;
  grid-template-columns: 180px minmax(0, 1fr);
  min-height: 48px;
}

.brain-structured-facts > div + div {
  border-top: 1px solid var(--line);
}

.brain-structured-facts b,
.brain-structured-facts span {
  align-items: center;
  display: flex;
  padding: 11px 13px;
}

.brain-structured-facts b {
  background: var(--soft);
}

.brain-source-list > div > i {
  align-items: center;
  background: var(--ink);
  border-radius: 50%;
  color: #fff;
  display: flex;
  flex: 0 0 auto;
  font-size: 11px;
  font-style: normal;
  height: 24px;
  justify-content: center;
  width: 24px;
}

.brain-source-list > div > span {
  flex: 1 1 auto;
}

.brain-decision-list {
  display: grid;
  gap: 9px;
}

.brain-decision-list article {
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  display: grid;
  gap: 14px;
  grid-template-columns: 42px minmax(0, 1fr) auto auto;
  padding: 14px;
}

.brain-decision-index {
  align-items: center;
  background: var(--ink);
  border-radius: var(--radius-s);
  color: #fff;
  display: flex;
  font-size: 13px;
  font-weight: 800;
  height: 42px;
  justify-content: center;
  width: 42px;
}

.brain-decision-list article > div {
  min-width: 0;
}

.brain-decision-list h3 {
  font-size: 15px;
  margin: 2px 0;
}

.brain-decision-list p,
.brain-decision-list small {
  color: var(--muted);
  font-size: 12px;
  margin: 0;
}

.brain-decision-list article > div > b {
  color: var(--warning);
  font-size: 12px;
}

.brain-question-banner {
  align-items: center;
  background: var(--warning-bg);
  border: 1px solid var(--brass-line);
  border-radius: var(--radius-m);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 14px 16px;
}

.brain-question-banner > div {
  display: grid;
  gap: 2px;
}

.brain-question-banner span {
  color: var(--warning);
  font-size: 12px;
}

.brain-conflict-layout {
  grid-template-columns: minmax(0, 1.3fr) minmax(320px, .7fr);
}

.brain-choice-list {
  display: grid;
  gap: 9px;
}

.brain-choice-list > label {
  align-items: start;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  cursor: pointer;
  display: grid;
  gap: 11px;
  grid-template-columns: 20px minmax(0, 1fr);
  padding: 14px;
}

.brain-choice-list > label.selected {
  border-color: var(--ink);
  box-shadow: inset 3px 0 0 var(--ink);
}

.brain-choice-list > label.unavailable { background: var(--soft); cursor: not-allowed; opacity: .78; }

.brain-choice-list input {
  margin: 4px 0 0;
}

.brain-choice-list label span {
  display: grid;
  gap: 4px;
}

.brain-choice-list p,
.brain-choice-list small {
  color: var(--muted);
  font-size: 12px;
  margin: 0;
}

.brain-conflict-source { background: var(--soft); border-radius: 8px; margin-top: 7px; padding: 9px 11px; }
.brain-conflict-source summary { color: #385e4b; cursor: pointer; font-size: 12px; font-weight: 750; }
.brain-conflict-source blockquote { border-left: 3px solid #98b7a6; color: #3f4944; font-size: 12px; line-height: 1.7; margin: 9px 0; max-height: 190px; overflow: auto; padding-left: 10px; }
.brain-conflict-source em,
.brain-conflict-source strong { color: var(--muted); display: block; font-size: 11px; font-style: normal; font-weight: 500; line-height: 1.5; }
.brain-conflict-source a { color: #285e45; display: inline-block; font-size: 12px; font-weight: 700; margin-top: 7px; }
.brain-conflict-source-warning { color: #a04432; font-size: 12px; margin-top: 4px; }

.brain-formal-preview,
.brain-ai-reason {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: 14px;
}

.brain-formal-preview > div {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.brain-formal-preview p,
.brain-ai-reason p,
.brain-card-copy {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

.brain-formal-preview button {
  width: 100%;
}

.brain-ai-reason {
  background: var(--info-bg);
  border-color: #b9d4f4;
  margin-top: 10px;
}

.brain-ai-reason p {
  margin: 5px 0 0;
}

.brain-card-copy {
  margin: 0;
}

.brain-live-stamp {
  align-items: center;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  display: inline-flex;
  font-size: 11px;
  gap: 7px;
  min-height: 34px;
  padding: 0 11px;
  white-space: nowrap;
}

.brain-live-stamp i {
  background: #9a9a9a;
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--line-soft);
  height: 7px;
  width: 7px;
}

.brain-live-stamp i.online {
  background: var(--positive);
  box-shadow: 0 0 0 3px var(--positive-bg);
}

.brain-kb-toolbar {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 10px;
}

.brain-kb-toolbar input {
  background: #fff;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-s);
  font: inherit;
  min-height: 40px;
  padding: 0 11px;
  width: min(420px, 70%);
}

.brain-kb-toolbar span {
  color: var(--muted);
  font-size: 11px;
}

.brain-kb-layout {
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  grid-template-columns: minmax(260px, .8fr) minmax(0, 1.2fr);
  min-height: 330px;
  overflow: hidden;
}

.brain-kb-list {
  background: var(--soft);
  border-right: 1px solid var(--line);
  max-height: 430px;
  overflow: auto;
  padding: 7px;
}

.brain-kb-list button {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  min-height: 56px;
  padding: 8px 9px;
  text-align: left;
  width: 100%;
}

.brain-kb-list button:hover,
.brain-kb-list button.active {
  background: #fff;
  border-color: var(--line);
}

.brain-kb-list button.active {
  box-shadow: inset 3px 0 0 var(--ink);
}

.brain-kb-list button span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.brain-kb-list button b {
  font-size: 12px;
}

.brain-kb-list button small,
.brain-kb-list > p {
  color: var(--muted);
  font-size: 11px;
}

.brain-kb-list button i {
  color: var(--muted);
  font-style: normal;
}

.brain-kb-detail {
  padding: 18px;
}

.brain-kb-detail h3 {
  font-size: 18px;
  margin: 10px 0 8px;
}

.brain-kb-detail > p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.75;
}

.brain-kb-detail dl {
  border-top: 1px solid var(--line);
  display: grid;
  margin: 18px 0 0;
}

.brain-kb-detail dl > div {
  border-bottom: 1px solid var(--line);
  display: grid;
  font-size: 12px;
  grid-template-columns: 88px minmax(0, 1fr);
  padding: 9px 0;
}

.source-catalog-page {
  /* 别名保留（下面几十处在用），值统一引根变量，不再自己配绿 */
  --source-green: var(--positive);
  --source-green-soft: var(--positive-bg);
}

.source-catalog-safety {
  background: var(--source-green-soft);
  border-color: var(--positive-line);
  border-left-color: var(--source-green);
}

.source-catalog-controls {
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(260px, 1fr) minmax(180px, 270px);
  margin-bottom: 10px;
}

.source-catalog-controls input,
.source-catalog-controls select {
  background: #fff;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  color: var(--ink);
  font: inherit;
  min-height: 42px;
  padding: 0 11px;
  width: 100%;
}

.source-catalog-filters {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  margin-bottom: 12px;
}

.source-catalog-filters > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.source-catalog-filters button {
  background: var(--canvas);
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--muted);
  cursor: pointer;
  font-size: 11px;
  min-height: 32px;
  padding: 0 12px;
}

.source-catalog-filters button.active {
  background: var(--ink);
  color: #fff;
}

.source-catalog-filters > div:last-child button.active {
  background: var(--source-green);
}

.source-catalog-list {
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  overflow: hidden;
}

.source-catalog-list > article {
  align-items: center;
  background: #fff;
  display: grid;
  gap: 12px;
  grid-template-columns: 40px minmax(0, 1fr) auto 88px;
  min-height: 76px;
  padding: 12px 14px;
}

.source-catalog-list > article + article {
  border-top: 1px solid var(--line);
}

.source-catalog-list > article:hover {
  background: var(--soft);
}

.source-file-badge {
  align-items: center;
  background: #3a3d3b;
  border-radius: var(--radius-s);
  color: #fff;
  display: inline-flex;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
  height: 38px;
  justify-content: center;
  letter-spacing: .04em;
  width: 40px;
}

.source-file-badge.pdf { background: var(--brick-red); }
.source-file-badge.doc,
.source-file-badge.docx { background: #3a6ca5; }
.source-file-badge.xls,
.source-file-badge.xlsx { background: #2d7c52; }
.source-file-badge.ppt,
.source-file-badge.pptx { background: #c87535; }

.source-catalog-list > article > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.source-catalog-list > article b,
.source-catalog-list > article small,
.source-catalog-list > article em {
  display: block;
  min-width: 0;
}

.source-catalog-list > article b {
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.source-catalog-list > article small {
  color: #505551;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.source-catalog-list > article em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.source-catalog-list > article > a {
  color: var(--source-green);
  font-size: 12px;
  font-weight: 700;
  text-align: right;
  text-decoration: none;
}

.source-catalog-list > article > a:hover {
  text-decoration: underline;
}

.source-catalog-empty {
  color: var(--muted);
  font-size: 13px;
  margin: 0;
  padding: 30px 16px;
  text-align: center;
}

.source-catalog-pagination {
  align-items: center;
  color: var(--muted);
  display: flex;
  font-size: 12px;
  justify-content: space-between;
  margin-top: 12px;
}

.source-catalog-pagination > div {
  display: flex;
  gap: 8px;
}

.source-provenance-samples {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.source-provenance-samples > article {
  align-items: start;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  display: grid;
  gap: 10px;
  grid-template-columns: 40px minmax(0, 1fr);
  padding: 13px;
}

.source-provenance-samples > article > div {
  min-width: 0;
}

.source-provenance-samples b {
  display: block;
  font-size: 12px;
  line-height: 1.45;
  margin-bottom: 7px;
}

.source-provenance-samples .pill {
  font-size: 10px;
}

.source-provenance-samples ul {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
  margin: 9px 0 0;
  padding-left: 16px;
}

.source-provenance-samples > article > a,
.source-provenance-samples > article > .ui-button {
  grid-column: 1 / -1;
  justify-content: center;
  text-decoration: none;
  width: 100%;
}

.brain-kb-detail dt {
  color: var(--muted);
}

.brain-kb-detail dd {
  margin: 0;
}

.brain-version-compare {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.brain-version-compare > section {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: 15px;
}

.brain-version-compare > section.draft {
  background: var(--warning-bg);
  border-color: var(--brass-line);
}

.brain-version-compare section > div {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.brain-version-compare p {
  font-size: 14px;
  font-weight: 700;
  margin: 10px 0 2px;
}

.brain-version-compare small {
  color: var(--muted);
}

.brain-check-list > div,
.brain-change-list > div {
  min-height: 58px;
}

.brain-publish-footer {
  background: var(--accent);
  border: 0;
  color: #fff;
}

.brain-publish-footer span {
  color: #c5c5c5;
}

@media (max-width: 1380px) {
  .product-app {
    grid-template-columns: 250px minmax(0, 1fr);
  }
  .content-layout {
    grid-template-columns: minmax(0, 1fr);
    overflow: visible;
  }
  .help-column {
    display: grid;
    grid-template-columns: repeat(2, minmax(280px, 1fr));
    grid-template-rows: none;
    overflow: visible;
  }
  .workspace {
    min-height: 0;
  }
  .top-video-grid {
    grid-template-columns: repeat(4,1fr);
  }
}

@media (max-width: 820px) {
  .product-app {
    display: block;
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }
  .sidebar {
    /* 窄屏下侧栏变横条：右分界换成下分界 */
    border-bottom: 1px solid var(--line);
    border-right: 0;
    height: auto;
    min-height: 0;
    padding: 14px 12px;
    position: relative;
  }
  .screen-nav,
  .task-nav-groups,
  .nav-heading {
    display: none;
  }
  .module-nav {
    gap: 7px;
    grid-template-columns: repeat(4,1fr);
  }
  .module-nav button {
    background: transparent;
    border: 0;
    border-radius: 0;
    gap: 0;
    justify-content: center;
    min-height: 48px;
    padding: 8px 5px;
    text-align: center;
  }
  .module-nav button i {
    display: none;
  }
  .module-nav button b {
    font-size: 14px;
  }
  .module-nav button small {
    display: none;
  }
  .module-nav button.active {
    background: transparent;
    box-shadow: inset 0 -2px 0 var(--ink);
  }
  .mobile-step-picker {
    background: transparent;
    border: 0;
    display: grid;
    font-size: 13px;
    gap: 5px;
    padding: 0;
  }
  .mobile-step-picker span {
    color: var(--muted);
  }
  .mobile-step-picker select {
    background: #fff;
    border: 1px solid var(--line-dark);
    border-radius: var(--radius-s);
    font-size: 16px;
    height: 46px;
    padding: 0 10px;
    width: 100%;
  }
  .account-summary {
    /* 窄屏下侧栏是顶部横条、不再滚动，贴底那套（sticky + 负 margin 出血）
       在这里没有对象可贴，全部还原成普通块，否则负 margin 会把它拽出横条 */
    background: transparent;
    bottom: auto;
    margin: 0;
    padding: 12px 8px 0;
    position: static;
  }
  .app-main {
    height: auto;
    min-height: 0;
  }
  .app-header {
    height: auto;
    min-height: 0;
    padding: 14px 16px;
  }
  .app-header h1 {
    font-size: 22px;
  }
  .content-layout {
    align-items: stretch;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
  }
  .workspace {
    min-height: 0;
    order: 0;
    padding: 0;
  }
  .demo-notice {
    display: flex;
  }
  .workspace-scroll {
    overflow: visible;
  }
  .help-column {
    display: contents;
  }
  .help-column > .help-card {
    order: 1;
  }
  .help-column > .page-demo-card {
    order: -1;
  }
  .help-card {
    padding: 16px;
  }
  .business-layout,
  .spokesperson-layout,
  .result-layout,
  .simulation-layout,
  .prompt-layout,
  .plugin-config-layout,
  .activities-layout,
  .poster-layout,
  .coupon-layout,
  .cadence-layout,
  .quality-layout,
  .detail-layout {
    grid-template-columns: 1fr;
  }
  .brain-overview,
  .brain-review-grid,
  .brain-form-grid,
  .brain-asset-review,
  .brain-trace-grid,
  .brain-rule-grid,
  .brain-three-steps {
    grid-template-columns: 1fr;
  }
  .brain-field-wide {
    grid-column: auto;
  }
  .brain-task {
    align-items: start;
    grid-template-columns: 30px minmax(0, 1fr);
  }
  .brain-task .ui-button {
    grid-column: 1 / -1;
    width: 100%;
  }
  .brain-plain-note,
  .brain-sync-note,
  .brain-replace-file {
    grid-template-columns: 1fr;
  }
  .brain-upload-result,
  .brain-asset-source {
    align-items: stretch;
    flex-direction: column;
  }
  .brain-asset-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .profile-card,
  .result-player {
    grid-row: auto;
  }
  .detail-side {
    grid-row: 1;
    position: static;
  }
  .detail-main {
    grid-row: 2;
  }
  .detail-main [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  .top-video-grid,
  .metric-cards {
    grid-template-columns: repeat(2,1fr);
  }
  .dashboard-grid,
  .plugin-grid,
  .doc-grid,
  .insight-grid {
    grid-template-columns: 1fr;
  }
  .effect-detail-layout,
  .customer-effect-messages {
    grid-template-columns: 1fr;
  }
  .asset-table,
  .sample-table,
  .faq-table,
  .customer-table,
  .report-table,
  .log-table {
    overflow-x: auto;
  }
  .asset-table-head,
  .asset-table-row {
    min-width: 720px;
  }
  .sample-table > div {
    min-width: 720px;
  }
  .faq-table > div {
    min-width: 760px;
  }
  .customer-table > div,
  .customer-table > button {
    min-width: 760px;
  }
  .report-table > div {
    min-width: 650px;
  }
  .log-table > div {
    min-width: 540px;
  }
  .filter-bar,
  .action-alert {
    align-items: stretch;
    flex-direction: column;
  }
  .wecom-login-state,
  .wecom-running-state {
    grid-template-columns: 1fr;
  }
  .wecom-running-dot {
    display: none;
  }
  .wecom-work-status {
    border-top: 1px solid var(--positive-line);
    padding-top: 10px;
  }
  .wecom-work-status > div:first-child {
    border-left: 0;
    padding-left: 0;
  }
  .wecom-qr-wrap {
    justify-self: center;
  }
  .filter-bar input,
  .filter-bar select,
  .filter-bar .ui-button,
  .action-alert .ui-button {
    width: 100%;
  }
  .source-selects,
  .score-grid,
  .check-grid {
    grid-template-columns: 1fr;
  }
  .pipeline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .task-progress {
    grid-template-columns: 1fr;
  }
  .task-progress .progress-track {
    width: 100%;
  }
  .detail-video-area {
    grid-template-columns: 1fr;
  }
  .detail-video-area > .media-cover {
    margin: 0 auto;
    max-width: 250px;
    width: 100%;
  }
  .activity-list article {
    align-items: start;
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .activity-list article > div {
    grid-column: 1 / -1;
  }
  .activity-list article > .pill {
    grid-column: 1 / -1;
    justify-self: start;
    max-width: 100%;
  }
  .score-grid label {
    align-items: flex-start;
    flex-direction: column;
  }
  .champion-review-summary {
    align-items: flex-start;
    flex-direction: column;
  }
  .score-grid label > div {
    justify-content: space-between;
    width: 100%;
  }
  .score-grid button {
    height: 40px;
    width: 40px;
  }
  .toast {
    bottom: 12px;
    left: 12px;
    max-width: calc(100vw - 24px);
    transform: none;
  }
  .report-title {
    flex-direction: column;
  }
  .report-title .ui-button {
    width: 100%;
  }
  .analysis-state .progress-track {
    max-width: 100%;
  }
  .card-actions button,
  .link-actions button,
  .row-actions button,
  .text-link,
  .activity-list button,
  .sample-table button,
  .faq-table button {
    min-height: 40px;
  }
}

@media (max-width: 520px) {
  .brain-asset-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .account-access {
    align-items: stretch;
    padding: 0;
  }
  .account-access-panel {
    border: 0;
    border-radius: 0;
    max-width: none;
    min-height: 100vh;
    padding: 24px 18px;
  }
  .account-access-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
}

@media (max-width: 440px) {
  .activity-list article > strong,
  .activity-list article > button {
    grid-column: 1 / -1;
    justify-self: stretch;
  }
  .activity-list article > button {
    text-align: left;
    width: 100%;
  }
  .module-nav button small {
    display: none;
  }
  .module-nav button { min-height: 48px; }
  .top-video-grid,
  .metric-cards {
    grid-template-columns: 1fr;
  }
  .wecom-cloud-card .card-head,
  .wecom-cloud-actions {
    align-items: flex-start;
    flex-direction: column;
  }
  .wecom-work-status {
    grid-template-columns: 1fr;
  }
  .wecom-work-status > div {
    border-left: 0;
    border-top: 1px solid var(--positive-line);
    padding: 8px 0;
  }
  .wecom-work-status > div:first-child {
    border-top: 0;
  }
  .pipeline {
    grid-template-columns: 1fr;
  }
  .knowledge-poster,
  .coupon-card {
    min-height: 360px;
    padding: 22px;
  }
  .spec-row {
    grid-template-columns: 62px minmax(0, 1fr);
  }
  .spec-row > .pill,
  .spec-row > .ui-button {
    grid-column: 2;
    justify-self: start;
  }
  .spec-row > .ui-button {
    width: 100%;
  }
  .doc-card {
    grid-template-columns: 48px minmax(0, 1fr);
  }
  .doc-card > .pill,
  .doc-card > button {
    grid-column: 2;
    justify-self: start;
  }
  .doc-card > button {
    min-height: 40px;
    padding: 6px 0;
    text-align: left;
    width: 100%;
  }
  .version-tabs {
    display: grid;
    grid-template-columns: 1fr;
  }
  .version-tabs button {
    min-height: 44px;
    white-space: normal;
    width: 100%;
  }
}

@media (max-width: 820px) {
  .brain-task-head,
  .brain-filter-row,
  .brain-source-tip,
  .brain-inline-action,
  .brain-publish-footer,
  .brain-detail-title {
    align-items: stretch;
    flex-direction: column;
  }

  .brain-two-column,
  .brain-two-column.expansion,
  .brain-conflict-layout,
  .brain-release-grid,
  .brain-evidence-detail-grid,
  .brain-version-compare,
  .brain-category-grid,
  .brain-module-browser,
  .brain-expansion-strip {
    grid-template-columns: 1fr;
  }

  .brain-metric-grid,
  .brain-metric-grid.compact,
  .brain-decision-summary,
  .brain-expansion-status,
  .brain-release-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .brain-file-list > button {
    grid-template-columns: 42px minmax(0, 1fr) auto 16px;
  }

  .brain-file-list > button > em {
    display: none;
  }

  .brain-pipeline {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .brain-expansion-lines {
    grid-template-columns: 1fr;
  }

  .brain-module-nav-card {
    position: static;
  }

  .brain-decision-list article {
    grid-template-columns: 42px minmax(0, 1fr) auto;
  }

  .brain-decision-list article > button {
    grid-column: 2 / -1;
  }

  .brain-structured-facts > div {
    grid-template-columns: 130px minmax(0, 1fr);
  }

  .brain-kb-layout {
    grid-template-columns: 1fr;
  }

  .brain-kb-list {
    border-bottom: 1px solid var(--line);
    border-right: 0;
    max-height: 300px;
  }

  .brain-kb-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .brain-kb-toolbar input {
    width: 100%;
  }

  .source-catalog-controls {
    grid-template-columns: 1fr;
  }

  .source-catalog-filters,
  .source-catalog-pagination {
    align-items: stretch;
    flex-direction: column;
  }

  .source-provenance-samples {
    grid-template-columns: 1fr;
  }

  .brain-evidence-cards {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 440px) {
  .brain-metric-grid,
  .brain-metric-grid.compact,
  .brain-decision-summary,
  .brain-expansion-status,
  .brain-release-metrics {
    grid-template-columns: 1fr;
  }

  .brain-file-list > button {
    grid-template-columns: 42px minmax(0, 1fr) 16px;
  }

  .brain-file-list > button > .pill {
    display: none;
  }

  .brain-structured-facts > div {
    grid-template-columns: 1fr;
  }

  .brain-structured-facts span {
    border-top: 1px solid var(--line);
  }

  .source-catalog-list > article {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .source-catalog-list > article > .pill,
  .source-catalog-list > article > a,
  .source-catalog-list > article > .ui-button {
    grid-column: 2;
    justify-self: start;
    text-align: left;
  }
}

/* ── 本产品新增：数据来源标记 + 无 token 落地页 ──────────────────────── */
/* 原型的 .demo-notice 只有一行灰字；真实产品必须一眼看出这屏是真数据还是示例， */
/* 所以在同一个插槽上做成小徽章，沿用原型的语义色，不另起一套视觉。 */

.demo-notice b {
  align-items: center;
  background: var(--warning-bg);
  border-radius: 999px;
  color: var(--warning);
  display: inline-flex;
  font-weight: 600;
  gap: 6px;
  padding: 2px 9px;
}

/* 状态圆点：跟着标签的语义色走（currentColor），不是装饰——
   绿点只出现在真的接了后台的屏上，黄点 = 示例/没接通 */
.demo-notice b::before {
  background: currentColor;
  border-radius: 50%;
  content: "";
  height: 7px;
  width: 7px;
}

.demo-notice.is-live b {
  background: var(--positive-bg);
  color: var(--positive);
}

/* 快照屏：既不是绿（不是此刻的状态），也不是黄（数据不是编的，原件都点得开）。
   走 info 蓝 —— 语义是「真的，但停在某一天」，日期写在右边那句话里。 */
.demo-notice.is-snapshot b {
  background: var(--info-bg);
  color: var(--info);
}

/* ── 无 token / 链接失效的落地页 ─────────────────────────────────────── */

.gate {
  align-items: center;
  background: var(--canvas);
  display: flex;
  justify-content: center;
  min-height: 100vh;
  padding: 40px 20px;
}

.gate-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  max-width: 520px;
  padding: 30px 28px;
  width: 100%;
}

.gate-card .brand {
  background: transparent;
  margin-bottom: 22px;
}

.gate-card h1 {
  font-size: 23px;
  line-height: 1.4;
  margin: 0 0 14px;
}

.gate-card p {
  color: var(--ink-2);
  font-size: 14.5;
  line-height: 1.8;
  margin: 0 0 10px;
}

.gate-muted {
  color: var(--muted) !important;
  font-size: 13px !important;
}

.gate-alert {
  background: var(--warning-bg);
  border-radius: 8px;
  display: grid;
  gap: 4px;
  margin-top: 22px;
  padding: 13px 15px;
}

.gate-alert b {
  color: var(--warning);
  font-size: 12.5px;
}

.gate-alert span {
  color: #6b4c12;
  font-size: 13px;
  line-height: 1.7;
}

.gate-alert code {
  background: rgba(0, 0, 0, 0.06);
  border-radius: 4px;
  font-size: 12.5px;
  padding: 1px 5px;
}

@media (max-width: 440px) {
  .gate {
    padding: 20px 14px;
  }

  .gate-card {
    padding: 22px 18px;
  }

  .gate-card h1 {
    font-size: 20px;
  }
}

/* 诚实缺口说明块：这一项后台确实没有数据时用它交代清楚，不留白也不编数字 */
.gap-note {
  background: var(--soft);
  border-left: 3px solid var(--line-dark);
  border-radius: 0 6px 6px 0;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.75;
  margin: 12px 0 0;
  padding: 11px 14px;
}

.gap-note b {
  color: var(--ink);
}

/* ── 本产品新增的表格变体 ────────────────────────────────────────────── */
/* 原型的 .log-table 是写死 4 列（时间/模块/事件/状态）；真实制作失败清单只有
   镜号和原因两列，直接复用会把原因挤进 85px。给它自己的列宽。 */
.error-table {
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  font-size: 12.5px;
  margin-top: 10px;
  overflow: hidden;
}

.error-table > div {
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 10px;
  grid-template-columns: 80px 1fr;
  padding: 8px 12px;
}

.error-table > div:last-child {
  border-bottom: 0;
}

.error-table > div:first-child {
  background: var(--soft);
  font-weight: 600;
}

.error-table span:last-child {
  color: var(--danger);
  line-height: 1.6;
}

/* 指标卡默认 5 列；召回效果屏只有 4 个真实指标 */
.metric-cards.four {
  grid-template-columns: repeat(4, 1fr);
}

.recall-date-range { align-items:end; display:flex; gap:8px; }
.recall-date-range label { color:var(--muted); display:grid; font-size:11px; gap:4px; }
.recall-date-range input { min-width:142px; }

@media (max-width: 820px) {
  .metric-cards.four {
    grid-template-columns: repeat(2, 1fr);
  }

  .error-table > div {
    grid-template-columns: 62px 1fr;
  }
}

/* 真实数据版的常问问题表：比原型少一列（去掉与首列重复的「分类」） */
.faq-table.live > div {
  grid-template-columns: 1.4fr 80px 70px 1.6fr 96px;
}

@media (max-width: 820px) {
  .faq-table.live > div {
    grid-template-columns: 1.2fr 60px 54px 1.4fr 84px;
  }
}

/* ── 表单块 ──────────────────────────────────────────────────────────────
   原型是纯展示稿，写接口接上之后才需要真正能填的表单（上传资料、说话规则、
   活动、量房券…）。这些类只在本产品里用，统一放在文件末尾，跟上游 diff 时
   一眼能分清哪些是原型的、哪些是我们加的。 */
.stacked-field {
  display: grid;
  gap: 5px;
  font-size: 13px;
  margin-top: 10px;
}

.stacked-field > span {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.6;
}

.stacked-field input,
.stacked-field select,
.stacked-field textarea {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  line-height: 1.7;
  min-height: 36px;
  padding: 7px 10px;
  width: 100%;
}

.stacked-field textarea {
  min-height: 96px;
  resize: vertical;
}

.stacked-field input:focus-visible,
.stacked-field select:focus-visible,
.stacked-field textarea:focus-visible {
  border-color: var(--info);
  outline: 2px solid rgba(57, 115, 214, .25);
  outline-offset: 1px;
}

.form-grid {
  display: grid;
  gap: 0 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 820px) {
  .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .form-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 试运行结果：逐题列出通过/没过和原因。门禁靠它，不能只显示一个总分 */
.trial-result {
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  font-size: 12.5px;
  margin-top: 10px;
  overflow: hidden;
}

.trial-result > div {
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 10px;
  grid-template-columns: 56px minmax(0, 1fr);
  padding: 9px 12px;
}

.trial-result > div:last-child {
  border-bottom: 0;
}

.trial-result b {
  font-weight: 600;
}

.trial-result .pass {
  color: var(--positive);
}

.trial-result .fail {
  color: var(--danger);
}

.trial-result span:last-child {
  color: var(--ink-2);
  line-height: 1.65;
}

/* 04-03 真实资料全景：所有统计、模块、证据与原件都可继续追溯。 */
.real-brain-overview-page,
.real-brain-module-page,
.real-brain-catalog-page,
.real-brain-processing-page,
.real-brain-source-detail-page,
.real-brain-enterprise-page {
  max-width: 1480px;
}

/* 积木族 token 原本定义在这里，2026-09-03 移到 :root —— 5 条在别的子树里引用它的
   规则一直取不到值。别再挪回来，理由见 :root 里那段注释。 */

.knowledge-panorama-head {
  background:
    radial-gradient(circle at 91% 17%, rgba(39, 122, 88, .09) 0 78px, transparent 79px),
    linear-gradient(135deg, #fff 0%, var(--positive-wash) 100%);
}

.knowledge-panorama-summary {
  align-items: stretch;
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  color: #fff;
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(280px, .85fr) minmax(520px, 1.7fr);
  padding: 22px;
}

.knowledge-panorama-progress {
  align-content: center;
  display: grid;
  gap: 10px;
}

.knowledge-panorama-progress > span {
  align-items: baseline;
  display: flex;
  font-size: 14px;
  gap: 7px;
}

.knowledge-panorama-progress > span b {
  font-size: clamp(30px, 3vw, 44px);
  letter-spacing: -.03em;
}

.knowledge-panorama-progress .progress-track {
  background: rgba(255, 255, 255, .14);
  border-radius: 999px;
  height: 8px;
  overflow: hidden;
}

.knowledge-panorama-progress .progress-track i {
  background: #5ed19c;
  border-radius: inherit;
  display: block;
  height: 100%;
}

.knowledge-panorama-progress small { color: rgba(255, 255, 255, .68); }

.knowledge-panorama-metrics {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.knowledge-panorama-metrics button {
  align-content: center;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 10px;
  color: #fff;
  display: grid;
  gap: 3px;
  min-height: 78px;
  padding: 12px;
  text-align: left;
  transition: background .16s ease, border-color .16s ease;
}

.knowledge-panorama-metrics button:hover {
  background: rgba(255, 255, 255, .13);
  border-color: rgba(255, 255, 255, .35);
}

.knowledge-panorama-metrics b { font-size: 24px; }
.knowledge-panorama-metrics span { color: rgba(255, 255, 255, .72); font-size: 11px; }

.knowledge-panorama-basis {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  overflow: hidden;
}

.knowledge-panorama-basis > span {
  border-right: 1px solid var(--line);
  color: var(--muted);
  display: grid;
  font-size: 11px;
  gap: 2px;
  padding: 13px 16px;
}

.knowledge-panorama-basis > span:last-child { border-right: 0; }
.knowledge-panorama-basis b { color: var(--ink); font-size: 14px; }

.knowledge-brick-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
}

.knowledge-brick-legend span {
  align-items: center;
  color: #58616c;
  display: inline-flex;
  font-size: 11px;
  gap: 6px;
  white-space: nowrap;
}

.knowledge-brick-legend span::before {
  background: var(--brick-gray-soft);
  border: 1px solid var(--brick-gray-line);
  border-radius: 4px;
  content: "";
  height: 10px;
  width: 10px;
}

.knowledge-brick-legend .multi::before { background: var(--brick-green-soft); border-color: var(--positive-line); }
.knowledge-brick-legend .single::before { background: var(--brick-amber-soft); border-color: var(--brass-line); }
.knowledge-brick-legend .case::before { background: var(--brick-blue-soft); border-color: var(--brick-blue-line); }
.knowledge-brick-legend .verified::before { background: var(--positive-bg); border-color: var(--brick-green-line); }
.knowledge-brick-legend .source-linked::before { background: var(--brick-blue-soft); border-color: var(--brick-blue-line); }
.knowledge-brick-legend .processing::before { background: var(--brick-amber-soft); border-color: var(--brass-line); }
.knowledge-brick-legend .material::before { background: var(--brick-purple-soft); border-color: var(--brick-purple-line); }
.knowledge-brick-legend .conflict::before { background: var(--brick-red-soft); border-color: var(--brick-red-line); }
.knowledge-brick-legend .empty::before { background: var(--brick-gray-soft); border-color: var(--brick-gray-line); }

.knowledge-panorama-toolbar {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(240px, 1fr) auto 170px;
}

.knowledge-panorama-toolbar input,
.knowledge-panorama-toolbar select {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  color: var(--ink);
  font: inherit;
  min-height: 42px;
  padding: 9px 12px;
}

.knowledge-panorama-toolbar input:focus,
.knowledge-panorama-toolbar select:focus {
  border-color: #5a776a;
  box-shadow: 0 0 0 3px rgba(0, 122, 83, .1);
  outline: 0;
}

.knowledge-panorama-toolbar > div {
  background: var(--canvas);
  border-radius: var(--radius-m);
  display: flex;
  padding: 3px;
}

.knowledge-panorama-toolbar button {
  background: transparent;
  border: 0;
  border-radius: var(--radius-s);
  color: #59616b;
  font-weight: 700;
  min-height: 36px;
  padding: 7px 12px;
}

.knowledge-panorama-toolbar button.active {
  background: #fff;
  box-shadow: 0 1px 4px rgba(24, 35, 52, .12);
  color: var(--ink);
}

.knowledge-brick-detail {
  background: #fff;
  border: 1px solid var(--brick-green-line);
  border-left: 5px solid var(--brick-green);
  border-radius: var(--radius);
  display: grid;
  gap: 18px;
  padding: 22px;
}

.knowledge-brick-detail.pending {
  border-color: var(--brick-gray-line);
  border-left-color: var(--brick-gray);
}

.knowledge-brick-detail > header {
  align-items: flex-start;
  display: flex;
  gap: 20px;
  justify-content: space-between;
}

.knowledge-brick-detail > header h3 {
  font-size: clamp(22px, 2.3vw, 30px);
  letter-spacing: -.02em;
  margin: 5px 0 4px;
}

.knowledge-brick-detail > header p {
  color: var(--muted);
  line-height: 1.7;
  margin: 0;
}

.knowledge-ai-overview {
  background: linear-gradient(135deg, #faf9fc 0%, var(--canvas) 100%);
  border: 1px solid var(--line);
  border-left: 4px solid var(--muted);
  border-radius: 12px;
  display: grid;
  gap: 14px;
  padding: 17px 18px 15px;
}

.knowledge-ai-overview > header {
  align-items: flex-start;
  display: flex;
  gap: 16px;
  justify-content: space-between;
}

.knowledge-ai-overview > header > div:first-child {
  display: grid;
  gap: 3px;
}

.knowledge-ai-overview > header > div:first-child span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.knowledge-ai-overview > header > div:first-child strong {
  color: #29252f;
  font-size: 17px;
}

.knowledge-ai-overview-badges {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  gap: 7px;
}

.knowledge-ai-overview-badges em,
.knowledge-ai-overview-badges small {
  border-radius: 999px;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  padding: 6px 10px;
}

.knowledge-ai-overview-badges em { background: var(--line-soft); color: #5d506d; }
.knowledge-ai-overview-badges small { background: var(--warning-bg); color: var(--warning); }

.knowledge-ai-overview-claims {
  color: #323038;
  display: grid;
  font-size: 15px;
  gap: 8px;
  line-height: 1.85;
}

.knowledge-ai-overview-claims p,
.knowledge-ai-overview-notice { margin: 0; }

/*
 * 机器格式（JSON）的资料摘录拆成「标签：值」之后的排版。
 * 见 lib/workbench/knowledge-claim.ts —— 原来这里是一整坨花括号直出。
 */
.knowledge-claim-record { display: grid; gap: 4px; }

.knowledge-claim-record-title {
  color: #5d506d;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
}

.knowledge-claim-field {
  align-items: baseline;
  display: grid;
  gap: 2px 10px;
  grid-template-columns: minmax(64px, max-content) 1fr;
  line-height: 1.7;
}

.knowledge-claim-field em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 750;
  white-space: nowrap;
}

.knowledge-claim-more { color: #857c90; font-size: 12px; }

@media (max-width: 640px) {
  .knowledge-claim-field { grid-template-columns: 1fr; }
}

.knowledge-ai-overview-references {
  display: inline-flex;
  gap: 2px;
  margin-left: 4px;
  vertical-align: super;
}

.knowledge-ai-overview-references button {
  background: transparent;
  border: 0;
  color: var(--brick-purple);
  cursor: pointer;
  font: inherit;
  font-size: 10px;
  font-weight: 850;
  line-height: 1;
  padding: 2px;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.knowledge-ai-overview-references button:hover,
.knowledge-ai-overview-references button:focus-visible { color: #372761; outline: none; }

.knowledge-ai-overview-notice {
  background: rgba(255, 255, 255, .62);
  border-radius: var(--radius-m);
  color: #55515c;
  line-height: 1.75;
  padding: 12px 14px;
}

.knowledge-ai-overview > footer {
  align-items: center;
  border-top: 1px solid rgba(117, 104, 135, .17);
  display: flex;
  gap: 14px;
  justify-content: space-between;
  padding-top: 11px;
}

.knowledge-ai-overview > footer span { color: #665e6d; font-size: 11px; font-weight: 750; }
.knowledge-ai-overview > footer small { color: #7a737f; font-size: 11px; }
.knowledge-ai-overview.status-conflict { background: #fff8f7; border-color: #e2bbb6; border-left-color: var(--brick-red); }
.knowledge-ai-overview.status-processing { background: #fffbf3; border-color: #e7cf9d; border-left-color: var(--brick-amber); }
.knowledge-ai-overview.status-material_only { background: #faf7fe; border-color: #d8c9e8; border-left-color: var(--brick-purple); }
.knowledge-ai-overview.status-empty { background: #f7f8f9; border-color: #d2d6da; border-left-color: var(--brick-gray); }

.knowledge-brick-detail-kicker {
  color: var(--brick-green);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
}

.knowledge-brick-detail.pending .knowledge-brick-detail-kicker { color: var(--brick-gray); }
.knowledge-brick-detail.enterprise.enterprise-state-verified { border-color: var(--brick-green-line); border-left-color: var(--brick-green); }
.knowledge-brick-detail.enterprise.enterprise-state-source_linked { border-color: var(--brick-blue-line); border-left-color: var(--brick-blue); }
.knowledge-brick-detail.enterprise.enterprise-state-processing { border-color: var(--brick-amber-line); border-left-color: var(--brick-amber); }
.knowledge-brick-detail.enterprise.enterprise-state-material { border-color: var(--brick-purple-line); border-left-color: var(--brick-purple); }
.knowledge-brick-detail.enterprise.enterprise-state-conflict { border-color: var(--brick-red-line); border-left-color: var(--brick-red); }
.knowledge-brick-detail.enterprise.enterprise-state-empty { border-color: var(--brick-gray-line); border-left-color: var(--brick-gray); }
.knowledge-brick-detail.enterprise.enterprise-state-verified .knowledge-brick-detail-kicker { color: var(--brick-green); }
.knowledge-brick-detail.enterprise.enterprise-state-source_linked .knowledge-brick-detail-kicker { color: var(--brick-blue); }
.knowledge-brick-detail.enterprise.enterprise-state-processing .knowledge-brick-detail-kicker { color: var(--brick-amber); }
.knowledge-brick-detail.enterprise.enterprise-state-material .knowledge-brick-detail-kicker { color: var(--brick-purple); }
.knowledge-brick-detail.enterprise.enterprise-state-conflict .knowledge-brick-detail-kicker { color: var(--brick-red); }
.knowledge-brick-detail.enterprise.enterprise-state-empty .knowledge-brick-detail-kicker { color: var(--brick-gray); }

.knowledge-brick-detail-metrics {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.knowledge-brick-detail-metrics > span {
  background: var(--soft);
  border-radius: var(--radius-m);
  display: grid;
  gap: 2px;
  padding: 12px;
}

.knowledge-brick-detail-metrics b { font-size: 18px; }
.knowledge-brick-detail-metrics small { color: var(--muted); }

.knowledge-brick-primary-source {
  background: var(--positive-wash);
  border: 1px solid #d6e6df;
  border-radius: var(--radius);
  display: grid;
  gap: 12px;
  padding: 16px;
}

.knowledge-brick-primary-source > div:first-child,
.knowledge-brick-primary-source footer,
.knowledge-brick-source-list article {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.knowledge-brick-primary-source > div:first-child span { color: var(--muted); font-size: 11px; }

.knowledge-brick-primary-source blockquote {
  border-left: 3px solid var(--brick-green);
  color: #344039;
  font-size: 14px;
  line-height: 1.8;
  margin: 0;
  padding: 2px 0 2px 14px;
}

.knowledge-brick-primary-source footer > span {
  display: grid;
  font-size: 12px;
  font-weight: 750;
  gap: 2px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.knowledge-brick-primary-source footer small { color: var(--muted); font-weight: 500; }
.knowledge-brick-primary-source footer > div { display: flex; flex: 0 0 auto; gap: 8px; }

.knowledge-brick-source-list {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 0;
  padding-top: 10px;
}

.knowledge-brick-source-list > b { font-size: 13px; padding: 4px 0 8px; }

.knowledge-brick-source-list article {
  border-top: 1px solid var(--line);
  padding: 10px 0;
}

.knowledge-brick-source-list article > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.knowledge-brick-source-list article strong { font-size: 12px; overflow-wrap: anywhere; }
.knowledge-brick-source-list article small { color: var(--muted); }
.knowledge-brick-source-list article > div { display: flex; flex: 0 0 auto; gap: 7px; }

/* 「这一格现在挂着的资料」——实时查库那一份，与上面 08-04 快照的清单并列。
 * 用一条左边框和淡底跟快照清单区分开：两份清单摆在一起，必须一眼看出哪份是现算的。 */
.knowledge-brick-live-sources {
  background: var(--soft);
  border-left: 3px solid var(--brick-green);
  border-radius: var(--radius-m);
  display: grid;
  gap: 8px;
  padding: 12px 14px;
}

.knowledge-brick-live-sources > header {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
}

.knowledge-brick-live-sources > header b { font-size: 13px; }
.knowledge-brick-live-sources > header small { color: var(--muted); flex: 1 1 auto; font-size: 11px; }

.knowledge-brick-live-sources ul {
  display: grid;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.knowledge-brick-live-sources li {
  align-items: baseline;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  padding: 8px 0;
}

.knowledge-brick-live-sources li > span { flex: 1 1 180px; font-size: 13px; min-width: 0; overflow-wrap: anywhere; }
.knowledge-brick-live-sources li > small { color: var(--muted); font-size: 11px; }

.knowledge-live-source-kind {
  background: var(--line-soft);
  border-radius: var(--radius-xs);
  color: #3c5680;
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 6px;
}

.knowledge-live-source-kind.conflict { background: var(--danger-bg); color: #9a3232; }
.knowledge-live-source-kind.knowledge { background: var(--positive-bg); color: #2f6340; }

.knowledge-content-options {
  background: var(--soft);
  border: 1px solid #bfd2ee;
  border-radius: 12px;
  display: grid;
  gap: 14px;
  padding: 16px;
}

.knowledge-content-options > header {
  align-items: flex-start;
  display: flex;
  gap: 16px;
  justify-content: space-between;
}

.knowledge-content-options > header > div { display: grid; gap: 4px; }
.knowledge-content-options > header b { font-size: 17px; }
.knowledge-content-options > header p { color: var(--muted); line-height: 1.6; margin: 0; }

.knowledge-current-selection {
  align-items: center;
  background: #fff;
  border: 1px solid var(--positive-line);
  border-left: 4px solid var(--brick-green);
  border-radius: 10px;
  display: grid;
  gap: 12px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: 12px 14px;
}

.knowledge-current-selection > span,
.knowledge-current-selection > em {
  border-radius: 999px;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  padding: 5px 9px;
}

.knowledge-current-selection > span { background: var(--positive-bg); color: var(--positive); }
.knowledge-current-selection > em { background: var(--info-bg); color: #4d5d70; }
.knowledge-current-selection > div { display: grid; gap: 2px; min-width: 0; }
.knowledge-current-selection > div b { overflow-wrap: anywhere; }
.knowledge-current-selection > div small { color: var(--muted); }
.knowledge-current-selection.pending { border-color: #e1cb98; border-left-color: var(--brick-amber); }
.knowledge-current-selection.pending > span { background: var(--warning-bg); color: var(--warning); }

.knowledge-content-option-list { display: grid; gap: 10px; }

.knowledge-content-option {
  background: #fff;
  border: 1px solid #d6dce4;
  border-radius: var(--radius);
  display: grid;
  gap: 12px;
  padding: 14px;
  transition: border-color .16s ease, box-shadow .16s ease;
}

.knowledge-content-option:focus {
  border-color: #7d6aa0;
  box-shadow: 0 0 0 3px rgba(103, 82, 160, .15);
  outline: none;
}

.knowledge-content-option.selected {
  border-color: #78b493;
  box-shadow: 0 0 0 2px rgba(41, 127, 83, .1);
}

/* 从别的屏（出处 / 上传历史）点进来落到的那一条。
 *
 * 一格挂着 30-90 份资料，滚过去之后不描边的话店长还是不知道该看哪一条。
 * 用蓝色而不是绿色：绿色在这一屏是「现在使用」的语义（.selected），
 * 借它来表示「你点进来的那一条」会读成「这份已被采用」——两件完全不同的事。 */
.knowledge-content-option.located {
  border-color: var(--info);
  box-shadow: 0 0 0 3px rgba(47, 102, 196, .14);
}

.knowledge-content-option-located {
  background: rgba(47, 102, 196, .08);
  border-radius: var(--radius-xs);
  color: #24509e;
  font-size: 12px;
  line-height: 1.6;
  margin: 0;
  padding: 8px 10px;
}

.knowledge-content-option.suggested:not(.selected) { border-color: #9bb9df; box-shadow: 0 0 0 2px rgba(40, 94, 168, .07); }

.knowledge-content-option.derived:not(.selected) { background: var(--soft); border-color: #cbd9ed; }

.knowledge-content-option > header,
.knowledge-content-option > header > div,
.knowledge-content-option > footer {
  align-items: center;
  display: flex;
  gap: 10px;
}

.knowledge-content-option > header { justify-content: space-between; }
.knowledge-content-option > header > div { min-width: 0; }
.knowledge-content-option > header i {
  align-items: center;
  background: var(--ink);
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  height: 28px;
  justify-content: center;
  width: 28px;
}

.knowledge-content-option > header span { display: grid; gap: 2px; min-width: 0; }
.knowledge-content-option > header span b { overflow-wrap: anywhere; }
.knowledge-content-option > header span small { color: var(--muted); }

.knowledge-content-option-body {
  background: var(--soft);
  border-radius: var(--radius-m);
  display: grid;
  gap: 7px;
  padding: 12px 14px;
}

.knowledge-content-option.selected .knowledge-content-option-body { background: var(--positive-wash); }
.knowledge-content-option-body > small { color: #65706a; font-weight: 750; }
.knowledge-content-option-body blockquote { color: #2f3934; font-size: 14px; line-height: 1.8; margin: 0; }

.knowledge-content-option-source {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.knowledge-content-option-source span { color: var(--muted); display: grid; font-size: 11px; gap: 3px; overflow-wrap: anywhere; }
.knowledge-content-option-source span b { color: #3f4743; font-size: 11px; }

.knowledge-content-option details { border-top: 1px solid var(--line); padding-top: 9px; }
.knowledge-content-option summary { color: #4f5b67; cursor: pointer; font-size: 12px; font-weight: 750; }
.knowledge-content-option details blockquote { border-left: 3px solid #a9b5c1; color: #59616b; font-size: 12px; line-height: 1.75; margin: 10px 0 0; padding-left: 12px; }
.knowledge-content-option > footer { flex-wrap: wrap; justify-content: flex-end; }
.knowledge-source-unavailable {
  align-items: center;
  background: var(--canvas);
  border: 1px solid #d7d7d2;
  border-radius: 10px;
  color: #686865;
  display: inline-flex;
  font-size: 14px;
  font-weight: 700;
  min-height: 44px;
  padding: 0 16px;
}

.knowledge-content-load-more {
  background: #fff;
  border: 1px solid #aebed2;
  border-radius: var(--radius-m);
  color: #315d94;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  min-height: 42px;
  padding: 9px 14px;
}

.knowledge-content-load-more:hover { background: var(--info-bg); border-color: #799bc7; }

.knowledge-content-empty {
  background: var(--canvas);
  border: 1px dashed #c8cdd2;
  border-radius: 10px;
  color: var(--muted);
  display: grid;
  gap: 5px;
  padding: 16px;
}

.knowledge-content-empty b { color: var(--ink); }

.knowledge-panorama-zone {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: grid;
  gap: 20px;
  padding: 22px;
}

/* 两面墙 2026-08-16 起是 <details>：summary 里包着原来的 header。
   折叠指示用 strong 后面的小箭头，收起时 header 底边线也一起收。 */
.knowledge-panorama-zone > summary { cursor: pointer; list-style: none; }
.knowledge-panorama-zone > summary::-webkit-details-marker { display: none; }

.knowledge-panorama-zone > summary > header {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 20px;
  justify-content: space-between;
  padding-bottom: 17px;
}

.knowledge-panorama-zone:not([open]) > summary > header { border-bottom: none; padding-bottom: 0; }

.knowledge-panorama-zone > summary > header > div {
  align-items: center;
  display: flex;
  gap: 13px;
}

.knowledge-panorama-zone > summary > header > div > span {
  align-items: center;
  background: #1d2d26;
  border-radius: var(--radius-m);
  color: #fff;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 17px;
  font-weight: 850;
  height: 42px;
  justify-content: center;
  width: 42px;
}

.knowledge-panorama-zone > summary > header h3 { font-size: 21px; margin: 0 0 3px; }
/* 说明文字降到 14px（2026-08-25 反馈「小一个字号」）。
   在此之前它没有 font-size、吃浏览器默认的 16px —— 比旁边那个计数（13px）
   还大一圈，一句辅助说明抢在了标题和数字前面。 */
.knowledge-panorama-zone > summary > header p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
}
.knowledge-panorama-zone > summary > header strong { color: var(--brick-green); flex: 0 0 auto; font-size: 13px; }
.knowledge-panorama-zone > summary > header strong::after { content: " ⌄"; display: inline-block; transition: transform 0.15s ease; }
.knowledge-panorama-zone[open] > summary > header strong::after { transform: rotate(180deg); }
.knowledge-panorama-zone.enterprise-zone > summary > header > div > span { background: var(--muted); }
.knowledge-panorama-zone.enterprise-zone > summary > header strong { color: #3f6f5b; }

.knowledge-zone-toolbar {
  align-items: center;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(220px, 1fr) 190px;
  padding: 10px;
}

.knowledge-zone-toolbar input,
.knowledge-zone-toolbar select {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  font: inherit;
  min-height: 40px;
  padding: 8px 11px;
}

.knowledge-zone-toolbar input:focus,
.knowledge-zone-toolbar select:focus {
  border-color: #5a776a;
  box-shadow: 0 0 0 3px rgba(0, 122, 83, .1);
  outline: 0;
}

.knowledge-zone-empty {
  align-items: flex-start;
  background: var(--soft);
  border: 1px dashed #cbd1ce;
  border-radius: 10px;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px;
}

.knowledge-zone-empty b { color: var(--ink); }
.knowledge-brick-detail-page { align-content: start; }

.knowledge-enterprise-state-summary {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.knowledge-enterprise-state-summary button {
  appearance: none;
  background: var(--canvas);
  border: 1px solid var(--line);
  border-bottom: 3px solid #b4bbc2;
  border-radius: var(--radius-m);
  color: #4e5660;
  display: grid;
  gap: 2px;
  min-height: 68px;
  padding: 9px 10px;
  text-align: left;
}

.knowledge-enterprise-state-summary button:hover { box-shadow: 0 4px 10px rgba(22, 31, 43, .08); transform: translateY(-1px); }
.knowledge-enterprise-state-summary button b { font-size: 19px; }
.knowledge-enterprise-state-summary button span { font-size: 10px; font-weight: 750; }
.knowledge-enterprise-state-summary .enterprise-state-verified { background: var(--brick-green-soft); border-color: #aad6bc; border-bottom-color: #5ba778; color: #176445; }
.knowledge-enterprise-state-summary .enterprise-state-source_linked { background: var(--brick-blue-soft); border-color: #b2cae8; border-bottom-color: #648fc8; color: #24548d; }
.knowledge-enterprise-state-summary .enterprise-state-processing { background: var(--brick-amber-soft); border-color: #e5cb91; border-bottom-color: #c18a31; color: #805510; }
.knowledge-enterprise-state-summary .enterprise-state-material { background: var(--brick-purple-soft); border-color: #cdbce4; border-bottom-color: #8d70bf; color: #63438d; }
.knowledge-enterprise-state-summary .enterprise-state-conflict { background: var(--brick-red-soft); border-color: #eab8b8; border-bottom-color: #c75f5f; color: #963838; }
.knowledge-enterprise-state-summary .enterprise-state-empty { background: var(--brick-gray-soft); border-color: #d3d7da; border-bottom-color: #aab1b8; color: var(--muted); }

.knowledge-section-index {
  display: grid;
  gap: 7px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.knowledge-section-index button {
  appearance: none;
  align-items: center;
  background: var(--soft);
  border: 1px solid #e1e6e3;
  border-radius: 8px;
  color: inherit;
  display: grid;
  gap: 6px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-width: 0;
  padding: 8px 9px;
  text-decoration: none;
}

.knowledge-section-index button:hover { border-color: #91ab9e; }
.knowledge-section-index b { color: var(--brick-green); font-size: 10px; }
.knowledge-section-index span { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.knowledge-section-index small { color: var(--muted); font-size: 9px; }
.enterprise-zone .knowledge-section-index b { color: var(--brick-gray); }

.knowledge-brick-sections { display: grid; gap: 26px; }

.knowledge-brick-section {
  scroll-margin-top: 16px;
}

.knowledge-brick-section > header {
  align-items: center;
  display: flex;
  gap: 18px;
  justify-content: space-between;
  margin-bottom: 10px;
}

.knowledge-brick-section > header > div {
  align-items: center;
  display: flex;
  gap: 10px;
}

.knowledge-brick-section > header i {
  align-items: center;
  background: var(--line-soft);
  border-radius: 6px;
  color: #345b49;
  display: inline-flex;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  height: 30px;
  justify-content: center;
  width: 40px;
}

.enterprise-zone .knowledge-brick-section > header i { background: var(--line-soft); color: var(--muted); }
.knowledge-brick-section > header span { display: grid; gap: 1px; }
.knowledge-brick-section > header b { font-size: 15px; }
.knowledge-brick-section > header small { color: var(--muted); font-size: 10px; }
.knowledge-brick-section > header em { color: var(--muted); font-size: 11px; font-style: normal; }

.knowledge-brick-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.knowledge-brick {
  appearance: none;
  background: var(--brick-green-soft);
  border: 1px solid var(--brick-green-line);
  border-bottom: 4px solid var(--brick-green-edge);
  border-radius: 8px;
  color: var(--brick-green-deep);
  display: grid;
  gap: 8px;
  min-height: 112px;
  min-width: 0;
  padding: 9px 10px 10px;
  position: relative;
  text-align: left;
  transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}

.knowledge-brick:hover {
  box-shadow: 0 7px 16px rgba(29, 50, 41, .1);
  transform: translateY(-2px);
}

.knowledge-brick.selected {
  box-shadow: 0 0 0 3px rgba(0, 122, 83, .18), 0 7px 16px rgba(29, 50, 41, .1);
  outline: 2px solid var(--brick-green);
  outline-offset: 1px;
}

.knowledge-brick.wide { grid-column: span 2; }
.knowledge-brick.single_source { background: var(--brick-amber-soft); border-color: var(--brick-amber-line); border-bottom-color: var(--brick-amber-edge); color: var(--brick-amber-deep); }
.knowledge-brick.case_source { background: var(--brick-blue-soft); border-color: var(--brick-blue-line); border-bottom-color: var(--brick-blue-edge); color: var(--brick-blue-deep); }
.knowledge-brick.pending { background: var(--brick-gray-soft); border-color: var(--brick-gray-line); border-bottom-color: var(--brick-gray-edge); color: var(--brick-gray-deep); }

/* ── 行业墙：按「能不能被检索到」的三档上色（2026-08-24）──────────────────
   在此之前这面墙按 evidence_level 上色（multi_source / single_source /
   case_source / summary_only / pending 五档），而筛选器和说明文案都按 state
   三档——按「只进了摘要」筛出来的砖，颜色却是按证据强度给的。而且 multi_source
   与 summary_only 两档**一条规则都没写**，实际只有三种可见色配着五个筛选档。

   同时这面墙原来借用了企业墙的琥珀（=处理中）和蓝（=挂了出处）来表示「单一来源」
   和「案例来源」——**同一个颜色在两面墙上是两个意思**。改成 teal 单色相的深浅两档：
   色相企业墙没用到，且「强/弱」用深浅表达比用不同色相更准（证据强度是有序的，
   企业的六态是并列的）。未进库沿用灰——两边都是「这里没内容」，语义相容。 */
.knowledge-brick.industry.lit { background: var(--brick-teal-soft); border-color: var(--brick-teal-line); border-bottom-color: var(--brick-teal-edge); color: var(--brick-teal-deep); }
.knowledge-brick.industry.summary_only { background: var(--brick-teal-faint); border-color: var(--brick-teal-faint-line); border-bottom-color: var(--brick-teal-faint-edge); color: var(--brick-teal-faint-deep); }
.knowledge-brick.industry.pending { background: var(--brick-gray-soft); border-color: var(--brick-gray-line); border-bottom-color: var(--brick-gray-edge); color: var(--brick-gray-deep); }
.knowledge-brick.industry.lit.selected { box-shadow: 0 0 0 3px rgba(31, 122, 112, .17); outline-color: var(--brick-teal); }
.knowledge-brick.industry.summary_only.selected { box-shadow: 0 0 0 3px rgba(139, 191, 184, .2); outline-color: var(--brick-teal-faint-edge); }

/* 行业墙图例：形状复用 .slot-state（与企业墙那排一致），配色走 teal 档 */
.industry-legend { margin-bottom: 10px; }
.slot-state.industry-lit { background: var(--brick-teal-soft); border-color: var(--brick-teal-line); }
.slot-state.industry-lit strong { color: var(--brick-teal-deep); }
.slot-state.industry-summary_only { background: var(--brick-teal-faint); border-color: var(--brick-teal-faint-line); }
.slot-state.industry-summary_only strong { color: var(--brick-teal-faint-deep); }
.slot-state.industry-pending { border-style: dashed; }
.slot-state.industry-pending strong { color: var(--muted); }

/* 「不是一套」这句必须显眼到不会被跳过——它是这两面墙唯一的防误读装置 */
.industry-legend-note {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
  margin: 0 0 12px;
}
.knowledge-brick.pending.selected { box-shadow: 0 0 0 3px rgba(89, 97, 107, .14); outline-color: #6c737b; }
.knowledge-brick.enterprise.enterprise-state-verified { background: var(--brick-green-soft); border-color: var(--brick-green-line); border-bottom-color: var(--brick-green-edge); color: var(--brick-green-deep); }
.knowledge-brick.enterprise.enterprise-state-source_linked { background: var(--brick-blue-soft); border-color: var(--brick-blue-line); border-bottom-color: var(--brick-blue-edge); color: var(--brick-blue-deep); }
.knowledge-brick.enterprise.enterprise-state-processing { background: var(--brick-amber-soft); border-color: var(--brick-amber-line); border-bottom-color: var(--brick-amber-edge); color: var(--brick-amber-deep); }
.knowledge-brick.enterprise.enterprise-state-material { background: var(--brick-purple-soft); border-color: var(--brick-purple-line); border-bottom-color: var(--brick-purple-edge); color: var(--brick-purple-deep); }
.knowledge-brick.enterprise.enterprise-state-conflict { background: var(--brick-red-soft); border-color: var(--brick-red-line); border-bottom-color: var(--brick-red-edge); color: var(--brick-red-deep); }
.knowledge-brick.enterprise.enterprise-state-empty { background: var(--brick-gray-soft); border-color: var(--brick-gray-line); border-bottom-color: var(--brick-gray-edge); color: var(--brick-gray-deep); }
.knowledge-brick.enterprise.enterprise-state-verified.selected { box-shadow: 0 0 0 3px rgba(0, 122, 83, .17), 0 7px 16px rgba(29, 50, 41, .1); outline-color: var(--brick-green); }
.knowledge-brick.enterprise.enterprise-state-source_linked.selected { box-shadow: 0 0 0 3px rgba(40, 94, 168, .17); outline-color: var(--brick-blue); }
.knowledge-brick.enterprise.enterprise-state-processing.selected { box-shadow: 0 0 0 3px rgba(154, 100, 17, .17); outline-color: var(--brick-amber); }
.knowledge-brick.enterprise.enterprise-state-material.selected { box-shadow: 0 0 0 3px rgba(112, 80, 166, .17); outline-color: var(--brick-purple); }
.knowledge-brick.enterprise.enterprise-state-conflict.selected { box-shadow: 0 0 0 3px rgba(168, 67, 67, .17); outline-color: var(--brick-red); }

.knowledge-brick-top,
.knowledge-brick-bottom {
  align-items: center;
  display: flex;
  gap: 7px;
  justify-content: space-between;
}

.knowledge-brick-top i {
  font-size: 9px;
  font-style: normal;
  font-weight: 850;
  opacity: .75;
}

.knowledge-brick-top em {
  background: currentColor;
  border-radius: 999px;
  box-shadow: -10px 0 0 currentColor;
  height: 5px;
  opacity: .26;
  width: 5px;
}

.knowledge-brick strong {
  align-self: start;
  display: -webkit-box;
  font-size: 12px;
  line-height: 1.45;
  overflow: hidden;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.knowledge-brick-bottom { align-self: end; }
.knowledge-brick-bottom small { font-size: 9px; font-weight: 750; }
.knowledge-brick-bottom b { font-size: 9px; font-weight: 650; opacity: .72; }

@media (max-width: 1180px) {
  .knowledge-panorama-summary { grid-template-columns: 1fr; }
  .knowledge-brick-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .knowledge-section-index { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .knowledge-enterprise-state-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .knowledge-panorama-metrics,
  .knowledge-panorama-basis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .knowledge-panorama-basis > span { border-bottom: 1px solid var(--line); }
  .knowledge-panorama-toolbar { grid-template-columns: 1fr; }
  .knowledge-panorama-toolbar > div { justify-content: stretch; }
  .knowledge-panorama-toolbar button { flex: 1 1 auto; }
  .knowledge-brick-detail-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .knowledge-section-index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .knowledge-brick-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .knowledge-zone-toolbar { grid-template-columns: 1fr; }
  .knowledge-enterprise-state-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .knowledge-panorama-zone > summary > header { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 600px) {
  .knowledge-panorama-summary,
  .knowledge-panorama-zone,
  .knowledge-brick-detail { padding: 16px; }
  .knowledge-panorama-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .knowledge-panorama-basis { grid-template-columns: 1fr; }
  .knowledge-panorama-basis > span { border-right: 0; }
  .knowledge-brick-detail > header,
  .knowledge-brick-primary-source > div:first-child,
  .knowledge-brick-primary-source footer,
  .knowledge-brick-source-list article { align-items: flex-start; flex-direction: column; }
  .knowledge-brick-primary-source footer > div,
  .knowledge-brick-source-list article > div { flex-wrap: wrap; }
  .knowledge-content-options > header,
  .knowledge-content-option > header { align-items: flex-start; flex-direction: column; }
  .knowledge-ai-overview > header,
  .knowledge-ai-overview > footer { align-items: flex-start; flex-direction: column; }
  .knowledge-ai-overview-badges { flex-wrap: wrap; }
  .knowledge-current-selection { align-items: flex-start; grid-template-columns: 1fr; }
  .knowledge-content-option-source { grid-template-columns: 1fr; }
  .knowledge-content-option > footer { justify-content: flex-start; }
  .knowledge-section-index { grid-template-columns: 1fr; }
  .knowledge-brick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .knowledge-enterprise-state-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .knowledge-brick.wide { grid-column: span 1; }
}

.real-brain-metric-button {
  appearance: none;
  color: inherit;
  text-align: left;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
  width: 100%;
}

.real-brain-metric-button:hover,
.real-brain-module-card:hover,
.real-brain-document-row:hover {
  border-color: #a8b7c8;
  box-shadow: 0 8px 22px rgba(24, 35, 52, .06);
  transform: translateY(-1px);
}

.real-brain-module-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.real-brain-module-card {
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 12px;
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 16px;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.real-brain-module-card > header {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.real-brain-module-title {
  align-items: center;
  background: transparent;
  border: 0;
  display: flex;
  flex: 1 1 auto;
  gap: 10px;
  justify-content: space-between;
  min-width: 0;
  padding: 0;
  text-align: left;
}

.real-brain-module-title > span {
  align-items: center;
  display: flex;
  gap: 8px;
  min-width: 0;
}

.real-brain-module-title b {
  align-items: center;
  background: var(--ink);
  border-radius: 6px;
  color: #fff;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 11px;
  height: 28px;
  justify-content: center;
  width: 40px;
}

.real-brain-module-title em {
  font-size: 16px;
  font-style: normal;
  font-weight: 750;
}

.real-brain-module-title i {
  color: var(--muted);
  font-size: 20px;
  font-style: normal;
}

.real-brain-module-card > p {
  color: #48515b;
  font-size: 13px;
  line-height: 1.7;
  margin: 0;
}

.real-brain-module-boundary {
  background: var(--info-bg);
  border-radius: 8px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.65;
  padding: 9px 10px;
}

.real-brain-module-counts {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.real-brain-module-counts button,
.real-brain-private-actions > button {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 1px;
  min-width: 0;
  padding: 9px 10px;
  text-align: left;
}

.real-brain-module-counts button:hover,
.real-brain-private-actions > button:hover {
  border-color: var(--ink);
}

.real-brain-module-counts b,
.real-brain-private-actions > button b {
  font-size: 16px;
}

.real-brain-module-counts span,
.real-brain-private-actions > button span {
  color: var(--muted);
  font-size: 11px;
}

.real-brain-module-actions,
.real-brain-private-actions > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.real-brain-count-button-list {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.real-brain-count-button-list > button {
  align-items: center;
  background: var(--soft);
  border: 1px solid transparent;
  border-radius: 8px;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  min-height: 46px;
  padding: 9px 11px;
  text-align: left;
}

.real-brain-count-button-list > button:hover,
.real-brain-count-button-list > button.active {
  background: #fff;
  border-color: var(--ink);
}

.real-brain-count-button-list span {
  font-size: 12px;
  min-width: 0;
}

.real-brain-count-button-list b {
  flex: 0 0 auto;
  font-size: 12px;
}

.real-brain-private-card {
  background: var(--surface);
  border-color: #ead6a7;
}

.real-brain-private-actions {
  display: grid;
  gap: 9px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.real-brain-private-actions > div {
  grid-column: 1 / -1;
}

.real-brain-public-copy-section {
  border-top: 1px solid #eadfca;
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
}

.real-brain-public-copy-section > div:first-child {
  display: grid;
  gap: 2px;
}

.real-brain-public-copy-section > div:first-child span {
  color: var(--muted);
  font-size: 12px;
}

.real-brain-public-copy-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.real-brain-public-copy-grid > a,
.real-brain-public-copy-grid > article {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: inherit;
  min-width: 0;
  overflow: hidden;
  text-decoration: none;
}

.real-brain-public-copy-grid > a {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
}

.real-brain-public-copy-grid > a > img {
  height: 100%;
  min-height: 92px;
  object-fit: cover;
  width: 104px;
}

.real-brain-public-copy-grid > a > span {
  align-content: center;
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 9px;
}

.real-brain-public-copy-grid > a small,
.real-brain-public-copy-grid > a em {
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.real-brain-module-switcher {
  display: grid;
  gap: 7px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.real-brain-module-switcher > button {
  align-items: center;
  background: var(--soft);
  border: 1px solid transparent;
  border-radius: 8px;
  display: grid;
  gap: 3px 8px;
  grid-template-columns: auto minmax(0, 1fr);
  min-height: 60px;
  padding: 9px;
  text-align: left;
}

.real-brain-module-switcher > button:hover,
.real-brain-module-switcher > button.active {
  background: #fff;
  border-color: var(--ink);
}

.real-brain-module-switcher > button > b {
  font-size: 11px;
}

.real-brain-module-switcher > button > span:not(.pill) {
  font-size: 12px;
}

.real-brain-module-switcher > button > .pill {
  grid-column: 1 / -1;
  justify-self: start;
}

.real-brain-evidence-title {
  background: transparent;
  border: 0;
  display: grid;
  gap: 2px;
  padding: 0;
  text-align: left;
}

.real-brain-evidence-title b {
  font-size: 15px;
  line-height: 1.5;
}

.real-brain-evidence-title small {
  color: var(--muted);
  font-size: 11px;
  overflow-wrap: anywhere;
}

.real-brain-evidence-card > p {
  display: -webkit-box;
  max-height: 7.2em;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.real-brain-document-list {
  display: grid;
  gap: 0;
}

.real-brain-document-row {
  align-items: center;
  background: #fff;
  border: 1px solid transparent;
  border-bottom-color: var(--line);
  display: grid;
  gap: 12px;
  grid-template-columns: 44px minmax(220px, 1fr) auto auto auto;
  min-width: 0;
  padding: 11px 8px;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.real-brain-document-main {
  background: transparent;
  border: 0;
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 0;
  text-align: left;
}

.real-brain-document-main b,
.real-brain-document-main small,
.real-brain-document-main em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.real-brain-document-main b { font-size: 13px; }
.real-brain-document-main small { color: #505963; font-size: 12px; }
.real-brain-document-main em { color: var(--muted); font-size: 11px; font-style: normal; }

.real-brain-document-row > a {
  text-decoration: none;
}

.real-brain-document-row.active {
  background: var(--positive-wash);
  border-color: var(--ink);
  border-radius: 8px;
  box-shadow: inset 4px 0 0 var(--ink);
}

.brain-pipeline .pending {
  color: #9aa2aa;
}

.brain-pipeline .pending i {
  background: var(--soft);
  border-color: var(--line);
  color: #9aa2aa;
}

.real-processing-block-list {
  display: grid;
  gap: 12px;
}

.real-processing-block-list > article {
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  display: grid;
  gap: 12px;
  padding: 15px;
}

.real-processing-block-list > article > header,
.real-processing-block-list > article > footer {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.real-processing-block-list > article > header > span {
  display: grid;
  gap: 2px;
}

.real-processing-block-list > article > header b {
  font-size: 13px;
}

.real-processing-block-list > article > header small,
.real-processing-block-list > article > footer > span {
  color: var(--muted);
  font-size: 11px;
}

.real-processing-block-list > article > p {
  border-left: 3px solid #b9c1c9;
  color: #333b43;
  font-size: 13px;
  line-height: 1.78;
  margin: 0;
  padding-left: 13px;
}

.real-processing-block-list > article > footer > a {
  flex: 0 0 auto;
  text-decoration: none;
}

.real-brain-reverse-module-list,
.real-brain-destination-list {
  display: grid;
  gap: 7px;
}

.real-brain-reverse-module-list > button,
.real-brain-destination-list > button {
  align-items: center;
  background: var(--soft);
  border: 1px solid transparent;
  border-radius: 8px;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto auto;
  min-height: 58px;
  padding: 10px 12px;
  text-align: left;
}

.real-brain-reverse-module-list > button:hover,
.real-brain-destination-list > button:hover {
  background: #fff;
  border-color: var(--ink);
}

.real-brain-reverse-module-list > button > span,
.real-brain-destination-list > button > span {
  display: grid;
  gap: 2px;
}

.real-brain-reverse-module-list em { font-size: 12px; font-style: normal; margin-left: 7px; }
.real-brain-reverse-module-list small,
.real-brain-destination-list small { color: var(--muted); font-size: 11px; }
.real-brain-reverse-module-list i,
.real-brain-destination-list i { color: var(--muted); font-style: normal; }

.real-brain-source-meta dd a {
  overflow-wrap: anywhere;
}

.real-brain-inline-link {
  background: transparent;
  border: 0;
  color: var(--accent);
  font-weight: 700;
  padding: 0;
  text-align: left;
}

.real-brain-inline-link:hover {
  text-decoration: underline;
}

.real-brain-enterprise-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.real-brain-private-boundary {
  border-color: #ead6a7;
}

.real-brain-copy-filters {
  margin-bottom: 14px;
}

.real-brain-public-copy-grid > article {
  display: grid;
  grid-template-rows: 176px minmax(0, 1fr) auto;
}

.real-brain-public-copy-preview {
  background: var(--canvas);
  display: block;
  overflow: hidden;
}

.real-brain-public-copy-preview img {
  height: 100%;
  object-fit: cover;
  transition: transform .2s ease;
  width: 100%;
}

.real-brain-public-copy-preview:hover img {
  transform: scale(1.02);
}

.real-brain-public-copy-grid > article > div {
  display: grid;
  gap: 5px;
  padding: 12px;
}

.real-brain-public-copy-grid > article h4,
.real-brain-public-copy-grid > article p {
  margin: 0;
}

.real-brain-public-copy-grid > article h4 { font-size: 14px; }
.real-brain-public-copy-grid > article p,
.real-brain-public-copy-grid > article small { color: var(--muted); font-size: 11px; }
.real-brain-public-copy-grid > article > .ui-button { border-radius: 0; justify-content: center; text-decoration: none; }

@media (min-width: 1500px) {
  .real-brain-module-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .real-brain-public-copy-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 1120px) {
  .real-brain-count-button-list,
  .real-brain-module-switcher { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .real-brain-public-copy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .real-brain-document-row { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .real-brain-document-row > .ui-button,
  .real-brain-document-row > a { grid-column: 2; justify-self: start; }
}

@media (max-width: 820px) {
  .real-brain-module-grid,
  .real-brain-enterprise-grid { grid-template-columns: minmax(0, 1fr); }
  .real-brain-private-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .real-brain-count-button-list,
  .real-brain-module-switcher,
  .real-brain-public-copy-grid { grid-template-columns: minmax(0, 1fr); }
  .real-brain-module-card > header { align-items: flex-start; flex-direction: column; }
  .real-brain-module-counts { grid-template-columns: minmax(0, 1fr); }
  .real-brain-private-actions { grid-template-columns: minmax(0, 1fr); }
  .real-brain-document-row { align-items: start; grid-template-columns: 42px minmax(0, 1fr); }
  .real-brain-document-row > .pill,
  .real-brain-document-row > .ui-button,
  .real-brain-document-row > a { grid-column: 2; justify-self: start; }
  .real-brain-public-copy-grid > a { grid-template-columns: 88px minmax(0, 1fr); }
  .real-brain-public-copy-grid > a > img { width: 88px; }
  .brain-pipeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .real-processing-block-list > article > header,
  .real-processing-block-list > article > footer { align-items: flex-start; flex-direction: column; }
}

/* ══════════ 制作队列（app/wb/video-queue.tsx）══════════
   沿用页面既有的卡片与间距体系，不引入新配色。 */
.queue-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 12px 0; border-top: 1px solid var(--line);
}
.queue-row:first-child { border-top: 0; }
.queue-row > div:first-child { min-width: 0; }
.queue-row b { display: block; }
.queue-row .gap-note { margin: 2px 0 0; }
.queue-check {
  display: grid; grid-template-columns: 18px 1fr; gap: 10px;
  align-items: start; padding: 9px 0; border-top: 1px solid var(--line); cursor: pointer;
}
.queue-check:first-child { border-top: 0; }
.queue-check input { margin-top: 3px; }
.queue-check .gap-note { display: block; margin: 2px 0 0; }

/* 血缘折叠：同一条片子的旧版收在当前版下面（app/wb/video-queue.tsx 的 QueueList）。
   缩进一格 + 左侧一道竖线，一眼看出「这几条是那条的旧版」，而不是并列的新任务 */
.queue-older > summary {
  color: var(--muted);
  cursor: pointer;
  font-size: 12.5px;
  padding: 4px 0 4px 14px;
}
.queue-older > .queue-row {
  border-left: 2px solid var(--line);
  border-top: 0;
  margin-left: 14px;
  padding-left: 12px;
}

/* 逐镜留言（app/wb/video-queue.tsx 的 ShotIssueRow）。屏 06 和屏 08 共用。
   行内展开而不是弹窗：客户要一边看这一镜讲了什么一边写，弹窗会把那行盖住 */
.shot-issue-list { display: grid; }
.shot-issue-row {
  border-top: 1px solid var(--line);
  padding: 9px 0;
}
.shot-issue-row:first-child { border-top: 0; }
.shot-issue-head {
  align-items: start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}
.shot-issue-head > span:first-child { min-width: 0; }
.shot-issue-head b { display: block; }
.shot-issue-head .gap-note { margin: 2px 0 0; }
.shot-issue-head .ui-button { flex: 0 0 auto; }
.shot-issue-row textarea { margin-top: 6px; }

/* 候选池多选（app/wb/video-queue.tsx 的 DailyFeed）。
   勾选框跟标题首行对齐——这一行右边还有两个按钮，居中会让它浮在中间没有归属。 */
.video-feed-check { width: 16px; height: 16px; margin: 3px 0 0; flex: 0 0 auto; align-self: start; }
/* 勾选框用 aria-disabled 而不是原生 disabled（见 video-queue.tsx 的注释），
   原生 disabled 自带的灰化随之消失，「锁着」的样子必须自己画 */
.video-feed-check[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }

/* 操作条只在勾了至少一条时渲染，粘在视口底部：列表十几条长，
   滚到一半要先滚回顶部找按钮的话，多选省下的步数又还回去了。 */
.video-feed-batchbar {
  position: sticky; bottom: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 14px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 -2px 12px rgb(0 0 0 / 8%);
}
.video-feed-batchbar > span { min-width: 0; margin: 0; }
.video-feed-batchbar .button-row { flex: 0 0 auto; margin: 0; }

@media (max-width: 620px) {
  .video-feed-batchbar { align-items: stretch; flex-direction: column; }
}
.ui-input {
  width: 100%; padding: 9px 12px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--surface); color: inherit;
  font: inherit; line-height: 1.5;
}
.ui-input:focus { outline: 2px solid var(--ink); outline-offset: -1px; }
textarea.ui-input { resize: vertical; }

/* 能力状态卡：绿=已接通，灰=还没接通。左侧一道色条，扫一眼就分得出 */
.card.cap-ready { border-left: 3px solid var(--ok, #2f8f5b); }
.card.cap-pending { border-left: 3px solid var(--line); }
.card.cap-pending > .card-head h3 { color: var(--muted); }

/* 复核列表里机器判的那几行：小圆点表示闸门三态，灰=还没跑 */
.gate-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 6px; display: block; }
.gate-pass { background: #2f8f5b; }
.gate-warn { background: #b8860b; }
.gate-fail { background: var(--danger); }
.gate-not_applicable { background: #8a8f98; }
.gate-none { background: transparent; border: 1px dashed var(--line); }


/* ── 资料处理流程图（2026-08-05 取代原来的三步任务条 .brain-task-flow）────
   主线四步横排，箭头用 ::after 画；底下两条结果车道：绿色直通、黄色绕回第 2 步。
   窄屏（≤1080px）主线转竖排，箭头跟着转 90 度，回环那句照样成立。 */
.material-flow {
  background: var(--info-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: grid;
  gap: 10px;
  padding: 10px;
}

/*
 * 主线 ①②③ 和分叉共用一个 grid：分叉占**第 3 列的第 2 行**，也就是正好挂在
 * 「判定有没有问题」底下，靠一条肘形线接上去。
 *
 * 2026-08-06 之前分叉是主线下面另起的一整条横幅，读起来像和四个步骤同级的
 * 第二段内容（PM 原话：「应该跟在 3 判定后面，而不是另起一行」）。
 * 放进同一个 grid 之后，「它是从第 3 步出来的」由布局本身说清楚。
 *
 * 第 3 列给 1.5fr：分叉里有 5 个节点要排，跟前两列一样宽会挤成一团。
 */
.material-flow-body {
  /* 行间距同时也是「判定 → 岔路」那截竖线的长度，所以拎出来当变量：
     改 gap 不改竖线的话，线会悬在半空或者穿过去。 */
  --mf-row-gap: 22px;
  display: grid;
  gap: var(--mf-row-gap);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.5fr);
}

.material-flow-body .mf-step { align-self: start; }

.material-flow-body .mf-step { position: relative; }

/*
 * 步骤之间的箭头。
 *
 * ⚠️ 2026-08-14 修：原来的选择器是 `:not(:last-child)`，意思是「最后一步后面
 * 不画」。但 `.material-flow-body` 的最后一个孩子是 `.mf-fork`（岔路块），
 * 不是第 3 步 —— 于是「判定有没有问题」后面**照样画了一个 →**，而它右边
 * 没有第 4 个步骤框，箭头就悬在卡片右边缘指着空气（截图上最右那个 →）。
 *
 * 判据换成「不是判定那一步」：判定后面接的是下面两条岔路，不是同级的下一步。
 */
.material-flow-body .mf-step:not(.decision)::after {
  color: #a8b0b8;
  content: "→";
  font-size: 16px;
  position: absolute;
  right: -17px;
  top: 50%;
  transform: translateY(-50%);
}

/*
 * 判定 → 岔路的那截竖线。**挂在判定框上**，不挂在岔路块上：这样它的横坐标
 * 自动跟着第 3 列走，不用把 `1fr 1fr 1.5fr` 换算成 calc（换算式会在有人改列宽
 * 那天静默错位）。长度取行间距，正好落在岔路块顶上那条汇流线的起点。
 */
.material-flow-body .mf-step.decision::after {
  border-left: 1px solid #c4ccd4;
  content: "";
  height: var(--mf-row-gap);
  position: absolute;
  right: 24px;
  top: 100%;
}

.material-flow-body .mf-step > button,
.material-flow-body .mf-step > span {
  align-items: start;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: #505861;
  display: grid;
  gap: 2px 10px;
  grid-template-columns: auto minmax(0, 1fr);
  min-height: 64px;
  padding: 10px 12px;
  text-align: left;
  width: 100%;
}

.material-flow-body .mf-step > button { cursor: pointer; }
.material-flow-body .mf-step > button:hover { border-color: #b7c4bd; }

/* 系统自动做的两步：底色留灰、不可点，一眼区分「我要做的」和「它自己会做的」 */
.material-flow-body .mf-step.auto > span { background: var(--info-bg); border-style: dashed; }

.material-flow-body .mf-step.active > button {
  border-color: #9eb5aa;
  box-shadow: 0 2px 8px rgba(35, 53, 45, .08);
  color: var(--ink);
}

.material-flow-body .mf-step.goal > button { border-color: var(--positive-line); background: var(--positive-bg); }

.material-flow-body .mf-step i {
  align-items: center;
  background: var(--line-soft);
  border-radius: 50%;
  color: #505861;
  display: flex;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  grid-row: span 2;
  height: 20px;
  justify-content: center;
  width: 20px;
}

.material-flow-body .mf-step.active i { background: var(--positive); color: #fff; }
.material-flow-main b { font-size: 13px; }
.material-flow-main small { color: var(--muted); font-size: 11px; line-height: 1.45; }

/* ── 判定之后的两条岔路 ──────────────────────────────────────────────
   左侧一条竖轨把两条路接回第 3 步；每条路自己走到底（一条进大脑、一条绕回②）。
   岔路上的节点刻意比主线的步骤框小、无阴影——「步骤」和「走向」要能一眼分开。 */
/*
 * 分叉块：第 2 行**整行**，头上一条汇流线接回「判定有没有问题」那一格。
 *
 * ## 2026-08-14：从「只占第 3 列」改成占满整行
 *
 * 原来是 `grid-column: 3`，让肘形线的 x 自动对齐第 3 步。代价是**第 1、2 列的
 * 第 2 行是纯空白**——实测截图里那是一块约 700×400 的空框，占了这张卡片六成
 * 宽度；而右边那 40% 里挤着 5 个节点，「有问题」那条链被压得换行。
 *
 * 现在整行都给岔路，节点排得开；「它是从第 3 步出来的」改由两段线表达：
 *   · 竖线挂在判定框上（`.mf-step.decision::after`），x 自动跟着第 3 列
 *   · 这里画横向汇流线，右端和那条竖线同为 `right: 24px`，左端折下去进两条路
 * 两处都用 `right: 24px`，一个是相对判定框、一个是相对整行，而判定框是最后一列
 * ——右边缘同一条，所以两段线必然对得上，不需要 calc 换算列宽。
 *
 * 左边留 24px padding：岔路上那两个 ├ 形接口（`.fork-path::before`）挂在
 * `left: -14px`，没有这个 padding 它们会戳到卡片外面去。
 */
.mf-fork {
  grid-column: 1 / -1;
  grid-row: 2;
  display: grid;
  gap: 8px;
  padding: 14px 0 0 24px;
  position: relative;
}

/* 横向汇流线 + 左端折下去的那个角。右端接判定框垂下来的竖线 */
.mf-fork::before {
  border-left: 1px solid #c4ccd4;
  border-top: 1px solid #c4ccd4;
  border-top-left-radius: 8px;
  content: "";
  height: 12px;
  left: 10px;
  position: absolute;
  right: 24px;
  top: 0;
}

.material-flow .fork-path {
  align-items: center;
  border-radius: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 6px 10px 6px 0;
  position: relative;
}

/* 竖轨到这条路的横向接口（├ / └ 的那一横） */
.material-flow .fork-path::before {
  border-top: 2px solid #ccd4da;
  content: "";
  left: -14px;
  position: absolute;
  top: 50%;
  width: 14px;
}

.material-flow .fork-tag {
  border-radius: 6px;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  padding: 3px 8px;
}

.material-flow .fork-path.pass .fork-tag { background: var(--positive-bg); color: var(--positive); }
.material-flow .fork-path.fix .fork-tag { background: var(--warning-bg); color: var(--brass); }
.material-flow .fork-path.fix.active { background: var(--brick-red-soft); }

.material-flow .fork-arrow { color: #a8b0b8; font-size: 13px; }

.material-flow .fork-node {
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: #505861;
  display: inline-flex;
  font-size: 12px;
  gap: 6px;
  padding: 5px 10px;
}

.material-flow button.fork-node { cursor: pointer; }
.material-flow button.fork-node:hover { border-color: #b7c4bd; }
.material-flow .fork-node.goal { background: var(--positive-bg); border-color: var(--positive-line); font-weight: 600; }
.material-flow .fork-node.goal i { background: var(--positive); color: #fff; }
.material-flow .fork-node.loop { background: transparent; border-style: dashed; color: var(--brass); }
.material-flow button.fork-node.active { background: var(--brass); border-color: var(--brass); color: #fff; }
.material-flow button.fork-node.active > em { opacity: .8; }
.material-flow .fork-node > i {
  align-items: center;
  background: var(--line-soft);
  border-radius: 50%;
  display: flex;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  height: 17px;
  justify-content: center;
  width: 17px;
}
.material-flow .fork-node > em { font-style: normal; opacity: .7; }

/* 这条路的一句话说明。占满整行，不跟节点抢横向空间 */
.material-flow .fork-note {
  color: var(--muted);
  flex-basis: 100%;
  font-size: 11px;
}

/* 章节标题：上传资料屏按「上传 / 现状 / 上传记录」分章，参考资料折在最底下 */
.brain-section-title {
  border-left: 3px solid var(--positive);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  margin: 6px 0 -2px;
  padding-left: 8px;
}

/* 章节标题右边挂一个动作（例：上传记录 → 查看历史文件）。
   标题的负 margin-bottom 要在这一行上重新给回来，否则按钮会贴到下面那张卡片。 */
.brain-section-title-row {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: -2px;
}

.brain-section-title-row .brain-section-title { margin-bottom: 0; }

/*
 * 折叠起来的参考资料（流程图 + 解析判据）。
 *
 * 它是「第一次来读一遍」的东西，摊开会把每天要用的拖拽框挤出首屏。折叠之后
 * 收起态只占一行，展开态和原来一模一样。
 */
.brain-reference-fold {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-top: 6px;
}

.brain-reference-fold > summary {
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  list-style: none;
  padding: 12px 16px;
  user-select: none;
}

.brain-reference-fold > summary:hover { color: var(--ink); }
.brain-reference-fold > summary::-webkit-details-marker { display: none; }

/* 2026-08-24：这颗箭头原来是个裸的小 ▾，而同屏另外三块折叠（企业大脑现在什么样、
   A 墙、B 墙）用的都是「带框的 ⌃」。同一个动作在一屏里两种长相，要人多认一次。
   形状对齐 .knowledge-panorama-zone / .brain-live-bar。 */
.brain-reference-fold > summary {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.brain-reference-fold > summary::after {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  content: "\2303";
  display: inline-flex;
  flex: none;
  height: 26px;
  justify-content: center;
  margin-left: 10px;
  /* \2303 字形偏上，压 1px 才在框里居中（同另外三处） */
  padding-bottom: 1px;
  transform: rotate(180deg);
  transition: transform .15s ease;
  width: 30px;
}

.brain-reference-fold[open] > summary::after { transform: none; }

.brain-reference-fold > summary:hover::after {
  border-color: var(--ink);
  color: var(--ink);
}
.brain-reference-fold[open] > summary { border-bottom: 1px solid var(--line); }

.brain-reference-fold-body {
  display: grid;
  gap: 14px;
  padding: 14px 16px 16px;
}

/* 解析说明整体收一档字号：参考资料，不跟操作区抢视觉权重 */
.parse-policy-zone { font-size: 92%; }
.parse-policy-zone .parse-policy li,
.parse-policy-zone .parse-policy p { font-size: 12px; }
.parse-policy-zone .parse-policy h4 { font-size: 13px; }
.parse-policy-zone .parse-policy-metrics strong { font-size: 18px; }

.brain-upload-input { display: none; }

.brain-prototype-notice {
  align-items: start;
  background: var(--brick-amber-soft);
  border: 1px solid #ebd49d;
  border-radius: var(--radius);
  display: grid;
  gap: 4px;
  padding: 13px 16px;
}

.brain-prototype-notice b { color: #825b13; }
.brain-prototype-notice span { color: #695936; line-height: 1.6; }

.brain-upload-dropzone {
  align-items: center;
  background: var(--soft);
  border: 2px dashed #aebcb5;
  border-radius: var(--radius);
  display: grid;
  gap: 8px;
  justify-items: center;
  min-height: 210px;
  padding: 28px;
  text-align: center;
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}

.brain-upload-dropzone.dragging { background: var(--positive-bg); border-color: var(--positive); transform: translateY(-2px); }
.brain-upload-dropzone > b { align-items: center; background: var(--canvas); border-radius: 999px; display: flex; font-size: 25px; height: 52px; justify-content: center; width: 52px; }
.brain-upload-dropzone > strong { font-size: 18px; }
.brain-upload-dropzone > span { color: var(--muted); line-height: 1.65; max-width: 620px; }
.brain-upload-snapshot-label { align-items: baseline; display: flex; gap: 10px; margin-bottom: -10px; }
.brain-upload-snapshot-label span { color: var(--muted); font-size: 12px; }
.brain-upload-summary { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.brain-upload-empty {
  align-items: center;
  background: var(--soft);
  border-radius: 10px;
  color: var(--muted);
  display: grid;
  gap: 5px;
  justify-items: center;
  min-height: 120px;
  padding: 24px;
  text-align: center;
}

.brain-upload-empty b { color: var(--ink); }
.brain-upload-list { display: grid; gap: 0; }

.brain-upload-list > article {
  align-items: center;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 12px;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  padding: 13px 0;
}

.brain-upload-list > article:first-child { border-top: 0; }
.brain-upload-list > article.upload-error { background: #fff8f7; margin-inline: -12px; padding-inline: 12px; }
.brain-upload-list > article > div { display: grid; gap: 3px; min-width: 0; }
.brain-upload-list > article > div b { overflow-wrap: anywhere; }
.brain-upload-list > article > div small { color: var(--muted); line-height: 1.5; }
.brain-upload-file-icon { align-items: center; background: var(--info-bg); border-radius: 8px; color: #455566; display: flex; font-size: 10px; font-weight: 850; height: 38px; justify-content: center; width: 38px; }
.brain-upload-actions { align-items: center; display: flex !important; gap: 4px !important; }
.brain-upload-actions .ui-button { min-height: 44px; white-space: nowrap; }

.brain-upload-next {
  align-items: center;
  background: var(--positive-wash);
  border: 1px solid var(--positive-line);
  border-radius: 12px;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  padding: 15px 16px;
}

.brain-upload-next > div:first-child { display: grid; gap: 4px; }
.brain-upload-next > div:first-child span { color: #4d5d55; line-height: 1.55; }
.brain-upload-next > div:last-child { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.brain-simple-workflow-page .ui-button,
.knowledge-brick-detail-page .ui-button { min-height: 44px; }

.brain-simple-note {
  background: var(--positive-wash);
  border: 1px solid var(--positive-line);
  border-radius: var(--radius);
  display: grid;
  gap: 4px;
  padding: 14px 16px;
}

.brain-simple-note span { color: #526059; line-height: 1.6; }

.brain-choice-summary {
  align-items: stretch;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 12px;
  display: grid;
  gap: 10px;
  grid-template-columns: 130px 130px minmax(0, 1fr);
  padding: 12px;
}

.brain-choice-summary > span { background: #fff; border-radius: var(--radius-m); display: grid; gap: 2px; padding: 12px; }
.brain-choice-summary > span b { font-size: 22px; }
.brain-choice-summary > span small { color: var(--muted); }
.brain-choice-summary > p { align-self: center; color: var(--muted); line-height: 1.65; margin: 0; padding: 0 10px; }
.brain-choice-filters { justify-self: start; }
.brain-review-list { display: grid; gap: 10px; }

.brain-review-list > article {
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  display: grid;
  gap: 14px;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  padding: 16px;
}

.brain-review-list > article > i { align-items: center; background: var(--canvas); border-radius: 999px; color: #6c747c; display: flex; font-size: 11px; font-style: normal; font-weight: 800; height: 34px; justify-content: center; width: 34px; }
.brain-review-list > article > div { min-width: 0; }
.brain-review-list > article > div > small,
.brain-review-list > article > div > span { color: var(--muted); font-size: 11px; }
.brain-review-list > article h3 { font-size: 16px; margin: 4px 0 5px; }
.brain-review-list > article p { color: #4d555d; display: -webkit-box; line-height: 1.65; margin: 0 0 7px; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

.brain-choice-list > label.recommended { background: var(--info-bg); border-color: #b9cfea; }
.brain-formal-preview .button-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 12px; }
.brain-conflict-blocker,
.brain-conflict-confirm { border-radius: 8px; font-size: 12px !important; font-weight: 700; margin: 10px 0 0 !important; padding: 10px 12px; }
.brain-conflict-blocker { background: var(--danger-bg); color: #a33f2e !important; }
.brain-conflict-confirm { background: var(--warning-bg); color: #7d5712 !important; }

.knowledge-choice-intro {
  align-items: center;
  background: var(--warning-bg);
  border: 1px solid #e7cf9d;
  border-radius: 10px;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  padding: 12px 14px;
}

.knowledge-choice-intro > div { display: grid; gap: 3px; }
.knowledge-choice-intro p { color: var(--muted); line-height: 1.6; margin: 0; }
.knowledge-choice-intro.conflict { background: var(--brick-red-soft); border-color: #e0b4ae; }

.knowledge-fusion-choice {
  align-items: start;
  background: var(--canvas);
  border: 1px solid #c8b9e3;
  border-radius: var(--radius);
  cursor: pointer;
  display: grid;
  gap: 12px;
  grid-template-columns: 20px minmax(0, 1fr);
  padding: 14px;
}

.knowledge-fusion-choice.selected { border-color: #675296; box-shadow: inset 3px 0 0 #675296; }
.knowledge-fusion-choice > input { margin-top: 5px; }
.knowledge-fusion-choice > span { display: grid; gap: 5px; }
.knowledge-fusion-choice small,
.knowledge-fusion-choice em { color: var(--muted); font-size: 11px; font-style: normal; }
.knowledge-fusion-choice b { font-size: 15px; }
.knowledge-fusion-choice p { color: #3f384a; line-height: 1.7; margin: 0; }
/*
 * 「都不合适？自己写一版」——版本列表末尾的手写卡片。
 *
 * 用黄铜族（--brass-*，本仓知识/证据类元素的身份色），和上面紫底的「AI 融合版」
 * 拉开：那一张是机器给的建议，这一张是人自己写的口径，两者不该长得一样。
 * 未选中时虚线边，读作「还空着的位置」；选中后变实线 + 左侧色条，与
 * .knowledge-fusion-choice.selected 的手法一致。
 *
 * textarea 的边框走 --line-dark（交互件那一档，1.4.11 要求 ≥3:1），
 * 不用 --line：后者是装饰性结构线，落在输入框上对比度不够。
 */
.knowledge-handwritten-choice {
  background: var(--soft);
  border: 1px dashed var(--brass-line);
  border-radius: var(--radius-m);
  display: grid;
  gap: 10px;
  padding: 14px;
}

.knowledge-handwritten-choice.selected { background: var(--brass-bg); border-style: solid; box-shadow: inset 3px 0 0 var(--brass); }
.knowledge-handwritten-choice > header { align-items: start; display: flex; gap: 12px; justify-content: space-between; }
.knowledge-handwritten-choice > header label { align-items: start; cursor: pointer; display: grid; gap: 12px; grid-template-columns: 20px minmax(0, 1fr); }
.knowledge-handwritten-choice > header input { margin-top: 5px; }
.knowledge-handwritten-choice > header span { display: grid; gap: 5px; }
.knowledge-handwritten-choice b { font-size: 15px; }
.knowledge-handwritten-choice small { color: var(--muted); line-height: 1.6; }

.knowledge-handwritten-choice textarea {
  background: var(--surface);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-s);
  color: var(--ink);
  font: inherit;
  line-height: 1.7;
  padding: 10px 12px;
  resize: vertical;
  width: 100%;
}

.knowledge-handwritten-choice textarea:focus-visible { border-color: var(--brass); outline: 2px solid var(--brass); outline-offset: 1px; }
.knowledge-handwritten-choice > footer { align-items: baseline; display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: space-between; }
.knowledge-handwritten-choice > footer span { color: var(--ink-2); font-size: 12px; }

.knowledge-content-option.draft { border-color: #789fca; box-shadow: 0 0 0 2px rgba(49, 93, 148, .09); }
.knowledge-content-option.selectable > header input { flex: 0 0 auto; margin: 0; }

.knowledge-decision-actions {
  align-items: center;
  background: #fff;
  border: 1px solid var(--positive-line);
  border-radius: 10px;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) auto auto;
  padding: 12px 14px;
  position: sticky;
  bottom: 12px;
  z-index: 2;
}

.knowledge-decision-actions > div { display: grid; gap: 3px; }
.knowledge-decision-actions small { color: var(--muted); }

/* 企业资料：历史文件 → 单文件引用 → 相关知识积木 */
.enterprise-history-toolbar {
  grid-template-columns: minmax(280px, 1fr) minmax(180px, 240px) minmax(180px, 240px);
}

.enterprise-history-row {
  grid-template-columns: 52px minmax(260px, 1fr) auto auto auto;
  padding-block: 14px;
}

.enterprise-file-badge {
  align-items: center;
  background: var(--info-bg);
  border: 1px solid #cad8e8;
  border-radius: var(--radius-m);
  color: #315b89;
  display: flex;
  font-size: 10px;
  font-weight: 850;
  height: 44px;
  justify-content: center;
  overflow: hidden;
  padding: 0 5px;
  text-align: center;
  width: 52px;
}

.enterprise-file-unavailable {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
  max-width: 150px;
  text-align: center;
}

.enterprise-file-unavailable.large {
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: 10px;
  max-width: 260px;
  padding: 11px 14px;
}

.enterprise-file-detail-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.enterprise-file-meta-grid {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  overflow: hidden;
}

.enterprise-file-meta-grid > div {
  background: #f7f8f9;
  display: grid;
  gap: 5px;
  min-height: 86px;
  padding: 14px;
}

.enterprise-file-meta-grid dt {
  color: var(--muted);
  font-size: 11px;
}

.enterprise-file-meta-grid dd {
  font-size: 13px;
  line-height: 1.55;
  margin: 0;
  overflow-wrap: anywhere;
}

.enterprise-file-citation-card {
  background: var(--soft);
  border: 1px solid #c5d8ef;
  border-radius: 12px;
  display: grid;
  gap: 14px;
  padding: 16px;
}

.enterprise-file-citation-card > header,
.enterprise-file-citation-card > footer {
  align-items: center;
  display: flex;
  gap: 14px;
  justify-content: space-between;
}

.enterprise-file-citation-card > header > span {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.enterprise-file-citation-card > header small,
.enterprise-file-citation-card > footer > span {
  color: var(--muted);
  font-size: 11px;
  overflow-wrap: anywhere;
}

.enterprise-file-citation-card blockquote {
  background: #fff;
  border-left: 4px solid #2e7c59;
  border-radius: 0 9px 9px 0;
  color: #39444d;
  line-height: 1.8;
  margin: 0;
  max-height: 360px;
  overflow: auto;
  padding: 14px 16px;
  white-space: pre-wrap;
}

.enterprise-file-brick-list {
  display: grid;
  gap: 9px;
}

.enterprise-file-brick-row {
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 12px;
}

.enterprise-file-brick-row > button:first-child {
  align-items: center;
  background: transparent;
  border: 0;
  color: inherit;
  display: flex;
  gap: 14px;
  justify-content: space-between;
  min-width: 0;
  padding: 0;
  text-align: left;
}

.enterprise-file-brick-row > button:first-child > span:first-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.enterprise-file-brick-row small,
.enterprise-file-brick-row em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
}

.enterprise-file-brick-row b {
  font-size: 14px;
}

@media (max-width: 900px) {
  .brain-upload-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .brain-review-list > article { grid-template-columns: auto minmax(0, 1fr) auto; }
  .brain-review-list > article > .ui-button { grid-column: 2 / -1; justify-self: start; }
  .enterprise-history-toolbar { grid-template-columns: 1fr; }
  .enterprise-history-row { grid-template-columns: 52px minmax(0, 1fr) auto; }
  .enterprise-history-row > .ui-button,
  .enterprise-history-row > a,
  .enterprise-history-row > .enterprise-file-unavailable { grid-column: 2; justify-self: start; }
  .enterprise-file-meta-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 主线横排到 1080px 为止；再窄就转竖排，箭头跟着转 90 度（否则四步挤成一坨） */
@media (max-width: 1080px) {
  .material-flow-main { gap: 20px; grid-template-columns: 1fr; }
  .material-flow-main > li:not(:last-child)::after {
    bottom: -19px;
    content: "↓";
    left: 22px;
    right: auto;
    top: auto;
    transform: none;
  }
}

@media (max-width: 640px) {
  .brain-upload-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brain-upload-list > article { align-items: start; grid-template-columns: auto minmax(0, 1fr); }
  .brain-upload-list > article > .pill,
  .brain-upload-list > article > .ui-button { grid-column: 2; justify-self: start; }
  .brain-upload-actions { flex-wrap: wrap; grid-column: 2; justify-self: start; }
  .brain-upload-next { align-items: stretch; flex-direction: column; }
  .brain-upload-next > div:last-child { display: grid; justify-content: stretch; }
  .brain-upload-snapshot-label { align-items: flex-start; flex-direction: column; gap: 3px; }
  .brain-choice-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brain-choice-summary > p { grid-column: 1 / -1; padding: 4px; }
  .brain-review-list > article { align-items: start; grid-template-columns: auto minmax(0, 1fr); }
  .brain-review-list > article > .pill,
  .brain-review-list > article > .ui-button { grid-column: 2; justify-self: start; }
  .brain-formal-preview .button-row { grid-template-columns: 1fr; }
  .knowledge-choice-intro { align-items: flex-start; flex-direction: column; }
  .knowledge-decision-actions { grid-template-columns: 1fr; position: static; }
  .knowledge-decision-actions > .ui-button { justify-self: stretch; }
  .enterprise-file-detail-metrics,
  .enterprise-file-meta-grid { grid-template-columns: 1fr; }
  .enterprise-file-citation-card > header,
  .enterprise-file-citation-card > footer { align-items: flex-start; flex-direction: column; }
  .enterprise-file-brick-row { align-items: stretch; grid-template-columns: 1fr; }
  .enterprise-file-brick-row > button:first-child { align-items: flex-start; }
  .enterprise-file-brick-row > .ui-button { justify-self: start; }
}

/* 屏 sales-01「重复登记」行：一件事登记了几遍，一行一组 */
.dup-row {
  border: 1px solid var(--line);
  border-radius: 10px;
  display: grid;
  gap: 3px;
  padding: 11px 14px;
}

.dup-row b {
  font-size: 14px;
}

.dup-row span {
  color: var(--ink-2);
  font-size: 12.5px;
}

.dup-row em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

/* 屏 sales-01「等你确认」行：一份资料一行，右侧两个动作 */
.pending-row {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 12px 14px;
}

.pending-row > div:first-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.pending-row b {
  font-size: 14px;
}

.pending-row span {
  color: var(--muted);
  font-size: 12.5px;
}

/* 屏 sales-02「从案例库里挑」的候选行 */
.chat-candidate {
  align-items: flex-start;
  border: 1px solid var(--line);
  border-radius: 10px;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 12px 14px;
}

.chat-candidate > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.chat-candidate b {
  font-size: 14px;
}

.chat-candidate span {
  color: var(--muted);
  font-size: 12.5px;
}

.chat-candidate ul {
  display: grid;
  gap: 2px;
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
}

.chat-candidate li {
  color: var(--ink-2);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── 原件查看页 /t/<token>/view ────────────────────────────────────────────
 * 独立页面，不在工作台的 46 屏框架里：它是从各处「打开原件」新标签页跳来的，
 * 带侧边栏反而干扰阅读。用同一套 token，视觉上仍是一家。
 * ------------------------------------------------------------------------ */
.doc-view {
  margin: 0 auto;
  max-width: 900px;
  padding: 24px 20px 64px;
}

.doc-view-head {
  align-items: flex-start;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 16px;
  justify-content: space-between;
  padding-bottom: 16px;
}

.doc-view-crumb {
  align-items: center;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 12px;
  gap: 10px;
  margin: 0 0 8px;
}

.doc-view-crumb a {
  color: var(--muted);
}

.doc-view-crumb span::before {
  color: var(--line-dark);
  content: "· ";
}

.doc-view-head h1 {
  font-size: 20px;
  line-height: 1.4;
  margin: 0;
  word-break: break-word;
}

.doc-view-file {
  color: var(--muted);
  font-size: 12px;
  margin: 6px 0 0;
  word-break: break-all;
}

.doc-view-actions {
  flex-shrink: 0;
}

.doc-btn {
  align-items: center;
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: var(--radius-s);
  color: #fff;
  display: inline-flex;
  font-size: 13px;
  justify-content: center;
  /* 40px 触控底线：原来 padding 撑出来只有 ~33px（2026-08-11 五族按钮归一） */
  min-height: 40px;
  padding: 8px 14px;
  text-decoration: none;
  transition: background-color var(--speed) var(--ease-out);
  white-space: nowrap;
}

.doc-btn:hover {
  background: color-mix(in srgb, var(--ink) 84%, #fff);
  border-color: color-mix(in srgb, var(--ink) 84%, #fff);
}

/* 预览容器：图片按原比例，PDF 给一个足够读的高度且自己滚动，页面本身不横滚 */
.doc-view-frame {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-top: 20px;
  overflow: hidden;
}

.doc-view-frame img {
  display: block;
  height: auto;
  max-width: 100%;
}

.doc-view-frame iframe {
  border: 0;
  display: block;
  height: 78vh;
  min-height: 420px;
  width: 100%;
}

.doc-view-note,
.doc-view-warn,
.doc-view-summary {
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 20px;
  padding: 14px 16px;
}

.doc-view-note {
  background: var(--info-bg);
  border: 1px solid #cfe1fb;
}

.doc-view-note b {
  color: var(--info);
  font-size: 14px;
}

/* 「故意只存一句话」那条警告用琥珀而不是红：它不是故障，是设计决定。
   红色会让人以为要去修，而要修的恰恰是不该修的那件事。 */
.doc-view-warn {
  background: var(--warning-bg);
  border: 1px solid var(--brass-line);
}

.doc-view-warn b {
  color: var(--warning);
  font-size: 14px;
}

.doc-view-warn small {
  color: var(--warning);
  font-size: 12px;
}

.doc-view-note span,
.doc-view-warn span {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.7;
}

.doc-view-summary {
  background: var(--soft);
  border: 1px solid var(--line);
}

.doc-view-summary h2 {
  font-size: 13px;
  margin: 0;
}

.doc-view-summary p {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.8;
  margin: 0;
}

.doc-view-blocks {
  margin-top: 28px;
}

.doc-view-blocks h2 {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
  gap: 10px;
  margin: 0 0 12px;
}

.doc-view-blocks h2 small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
}

.doc-view-blocks article {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 12px;
  overflow: hidden;
}

.doc-view-blocks header {
  background: var(--soft);
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  padding: 8px 14px;
}

.doc-view-blocks p {
  font-size: 14px;
  line-height: 1.9;
  margin: 0;
  padding: 14px;
  /* 解析出来的正文里有表格转成的长行，让它自己滚，别把页面撑横 */
  overflow-wrap: break-word;
  white-space: pre-wrap;
}

/* ── 来源原件页（2026-08-07）────────────────────────────────────────────────
 * 企业侧四类来源共用的查看页（`/t/<token>/view?src=`）。和上面 `?doc=` 那套
 * 复用 .doc-view* 骨架，只补三块它没有的：库里那一行的全文、血缘、台账。
 * ------------------------------------------------------------------------ */
.doc-view-record,
.doc-view-lineage,
.doc-view-meta {
  margin-top: 28px;
}

.doc-view-record h2,
.doc-view-lineage h2,
.doc-view-meta h2 {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
  gap: 10px;
  margin: 0 0 12px;
}

.doc-view-record h2 small,
.doc-view-lineage h2 small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
  word-break: break-all;
}

/* JSONB 全文会很长很宽。让它自己纵向滚、横向也自己滚，页面本身不横滚 */
.doc-view-record pre {
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 12.5px;
  line-height: 1.8;
  margin: 0;
  max-height: 70vh;
  overflow: auto;
  padding: 14px;
  white-space: pre-wrap;
  word-break: break-word;
}

.doc-view-lineage a {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
  padding: 10px 14px;
  text-decoration: none;
}

.doc-view-lineage a b {
  color: var(--ink);
  font-size: 13px;
}

.doc-view-lineage a span {
  color: var(--muted);
  font-size: 12px;
  word-break: break-all;
}

.doc-view-meta dl {
  display: grid;
  gap: 1px;
  margin: 0;
}

.doc-view-meta dl > div {
  background: var(--surface);
  border: 1px solid var(--line);
  display: grid;
  gap: 4px;
  grid-template-columns: 120px 1fr;
  padding: 8px 14px;
}

.doc-view-meta dt {
  color: var(--muted);
  font-size: 12px;
}

.doc-view-meta dd {
  font-size: 12px;
  margin: 0;
  word-break: break-all;
}

@media (max-width: 560px) {
  .doc-view-meta dl > div {
    grid-template-columns: 1fr;
  }
}

/* ── 全景页实时区（2026-08-05）──────────────────────────────────────────────
 * 这一屏原来 100% 读 08-03 的 JSON 快照。下面这几块是实时查库的部分，
 * 视觉上必须和快照区分得开——否则「实时」两个字就只是句话。
 * ------------------------------------------------------------------------ */
.brain-live-bar {
  background: var(--surface);
  border: 1px solid var(--positive-line);
  border-radius: var(--radius);
  margin-bottom: 20px;
  padding: 16px;
}

.brain-live-bar.loading,
.brain-live-bar.failed {
  align-items: center;
  color: var(--muted);
  display: flex;
  font-size: 13px;
  gap: 12px;
  justify-content: space-between;
}

/* 取数失败用红：这时候页面上其余数字全是快照的旧值，必须让人一眼看出
   「你现在看到的不是实时的」，而不是安静地降级。 */
.brain-live-bar.failed {
  background: var(--danger-bg);
  border-color: var(--danger-line);
}

.brain-live-bar.failed b {
  color: var(--danger);
  display: block;
  font-size: 14px;
}

/* 2026-08-24：整块改成 <details>，header 下沉到 summary 里。形状照抄下方
   A/B 两面墙（.knowledge-panorama-zone），同一个动作在一屏里别有两种长相。 */
.brain-live-bar > summary { cursor: pointer; list-style: none; }
.brain-live-bar > summary::-webkit-details-marker { display: none; }

.brain-live-bar > summary > header {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  margin-bottom: 14px;
}

/* 折起来时下边距要收掉，否则空一截看着像内容没加载出来 */
.brain-live-bar:not([open]) > summary > header { margin-bottom: 0; }

.brain-live-bar > summary > header > div {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.brain-live-bar > summary > header b {
  font-size: 14px;
}

.brain-live-bar > summary > header small {
  color: var(--muted);
  font-size: 12px;
}

/* 折叠后唯一还看得见的信息：还剩几件要你动手。箭头挂在它后面（同 panorama 墙）。 */
.brain-live-bar > summary > header strong {
  align-items: center;
  color: var(--muted);
  display: inline-flex;
  font-size: 13px;
  font-weight: 750;
}

.brain-live-bar > summary > header strong::after {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  content: "\2303";
  display: inline-flex;
  height: 26px;
  justify-content: center;
  margin-left: 10px;
  /* \2303 字形偏上，压 1px 才在框里居中（同 panorama 墙的处理） */
  padding-bottom: 1px;
  transform: rotate(180deg);
  vertical-align: middle;
  width: 30px;
}

.brain-live-bar[open] > summary > header strong::after { transform: none; }

/* 展开时藏掉计数文字——下面 .brain-todo-bar 的标题旁写着同一个数（2026-08-25 反馈）。
   ⚠️ 藏的是里面那个 <span>，不是 strong 本身：折叠箭头是 strong::after，
   连 strong 一起藏会把收起/展开的唯一控件干掉。 */
.brain-live-bar[open] > summary > header strong > span { display: none; }

.brain-live-bar > summary:hover > header strong::after {
  border-color: var(--ink);
  color: var(--ink);
}

/* 行业说明那段：「其中 / 其余 / 下方」三句各自成行。三句都以数字开头又各讲一件事，
   连排时读者得数着分号找边界。 */
.brain-caption-line { display: block; }

.brain-live-metrics {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

/*
 * 卡片默认中性（2026-08-13）。
 *
 * 原来是绿底绿边，理由就是上面那段注释：实时区要和快照区分得开。但绿铺满每一张
 * 卡之后，同一种绿在一屏里同时表达两件事——「这是实时查库的」和「这项没问题」。
 * 于是「5 份已退回」和「全部都有链接」同色，得读到第三行 11px 小字才分得出
 * 哪张要动手。
 *
 * 现在颜色只表达一件事：**要不要你动手**（中性 → 琥珀 → 红）。
 * 「这块是实时的」交给外框 .brain-live-bar 那圈绿边和顶上的「实时」标——
 * 那本来就是区域级属性，不该由每张卡各喊一遍。要改回绿底先想清楚这一条。
 */
.brain-live-metrics > div {
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: 10px 12px;
}

/* 还没坏，但拖下去会坏 */
.brain-live-metrics > div.warn {
  background: var(--warning-bg);
  border-color: var(--brass-line);
}

/* 此刻线上就不对：规则被静默丢掉、转真人条件没生效。琥珀撑不住这两件事的分量 */
.brain-live-metrics > div.alert {
  background: var(--danger-bg);
  border-color: var(--danger-line);
}

.brain-live-metrics > div.alert strong {
  color: var(--danger);
}

/* 「配了但故意不发出去」的那一类。虚线 = 这条链路本来就没接，不是坏了 */
.brain-live-metrics > div.idle {
  background: transparent;
  border-style: dashed;
}

.brain-live-metrics > div.idle strong {
  color: var(--muted);
}

.brain-live-metrics strong {
  display: block;
  font-size: 22px;
  line-height: 1.2;
}

.brain-live-metrics span {
  color: var(--ink);
  display: block;
  font-size: 12px;
  margin-top: 2px;
}

.brain-live-metrics small {
  color: var(--muted);
  display: block;
  font-size: 11px;
  line-height: 1.5;
  margin-top: 4px;
}

/*
 * 阶段分布那一格放的是「破冰 6 · 培育 15 · 决策 13」一串字而不是一个数，
 * 22px 会撑破格子，所以单独压小。
 *
 * 2026-08-13 之前这件事是反着写的：先把整个话术组的 strong 压到 15px，
 * 再用 `:first-child / :nth-child(2)` 把前两张扳回 22px。副作用是第三组
 * （你配的东西）也吃到了同一条规则——后三张卡的数字被一起压小，没有任何理由，
 * 而且往组里加一张卡或换个顺序，大小就会错位。现在由卡片自己带 .text 标出来。
 */
.brain-live-metrics > div.text strong {
  font-size: 15px;
  line-height: 1.4;
}

/*
 * 三组之间的层级（2026-08-13 加重）。
 *
 * 改之前 h4 是 13px、卡里的数字 22px：结构信息比它管的内容小一半，扫一眼只看得见
 * 数字，看不见「① 资料 / ② 话术 / ③ 你配的」这三层分界——而这三层就是这一屏
 * 要讲的体系本身。虚线也换成实线：它分的是三件并列的事，不是补充说明。
 */
.brain-live-group {
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
}

.brain-live-group > h4 {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  font-size: 15px;
  font-weight: 700;
  gap: 8px;
  margin: 0;
}

/* 编号用黄铜等宽体：和上面链路图里的 ①②③ 是同一套编号，读者要能对上 */
.brain-live-group > h4 > i {
  color: var(--brass);
  font-family: var(--font-mono);
  font-size: 15px;
  font-style: normal;
}

.brain-live-group > h4 small {
  color: var(--muted);
  flex-basis: 100%;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.55;
}

/* ── 需要你处理（2026-08-13）──────────────────────────────────────────────
 * 判定规则全在 lib/workbench/brain-todos.ts（带单测），这里只管画。
 * 位置在链路图之前：先回答「有几件事要我动手」，再回答「这套系统长什么样」。
 * 每条待办下面仍保留原来那段长解释——顶上说有几件、在哪，下面说为什么、
 * 不处理会怎样，两者不是重复。
 * ------------------------------------------------------------------------ */
.brain-todo-bar {
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  margin: 0 0 14px;
  padding: 12px 14px;
}

/* 「今天没事」和「有几块没取到、判断不了」都必须说话：什么都不显示的话，
   店长分不清这两件事，而后者绝不能读成前者。 */
.brain-todo-bar.clear,
.brain-todo-bar.partial {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
}

.brain-todo-bar.clear b {
  color: var(--positive);
  font-size: 13px;
}

.brain-todo-bar.partial {
  background: var(--warning-bg);
  border-color: var(--brass-line);
}

.brain-todo-bar.partial b {
  color: var(--warning);
  font-size: 13px;
}

.brain-todo-bar.clear span,
.brain-todo-bar.partial span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.brain-todo-bar > header {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.brain-todo-bar > header b {
  font-size: 14px;
}

.brain-todo-bar > header em {
  background: var(--danger);
  border-radius: 999px;
  color: #fff;
  font-family: var(--font-mono);
  font-size: 12px;
  font-style: normal;
  line-height: 1;
  padding: 4px 8px;
}

/* 取数失败的块不进清单，所以这个 N 可能偏小——这句必须挨着 N 说 */
.brain-todo-bar > header small {
  color: var(--warning);
  font-size: 12px;
}

.brain-todo-bar > ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.brain-todo-bar > ul > li {
  align-items: center;
  background: var(--soft);
  border-left: 3px solid var(--line-dark);
  border-radius: var(--radius-xs);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  justify-content: space-between;
  padding: 8px 12px;
}

.brain-todo-bar > ul > li.alert {
  background: var(--danger-bg);
  border-left-color: var(--danger);
}

.brain-todo-bar > ul > li.warn {
  background: var(--warning-bg);
  border-left-color: var(--brass);
}

.brain-todo-bar > ul > li > div {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 240px;
}

.brain-todo-bar > ul > li b {
  font-size: 13px;
}

.brain-todo-bar > ul > li.alert b {
  color: var(--danger);
}

.brain-todo-bar > ul > li.warn b {
  color: var(--warning);
}

.brain-todo-bar > ul > li span {
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.6;
}

/* ── 企业大脑由什么组成（2026-08-13）──────────────────────────────────────
 * 三段链路：资料进来 → 存进大脑 → 每轮带出去。三列里的数字都是下面三组卡片里的
 * 同一批值，这张图只负责把它们摆到各自的环节上（见 BrainChainMap 头注）。
 *
 * 列间箭头用 ::before 画，不进 DOM：它表达的是布局关系不是内容，读屏软件念一串
 * 「→」没有意义。窄屏改成竖排，箭头跟着转成 ↓。
 * ------------------------------------------------------------------------ */
.brain-chain-map {
  margin-bottom: 4px;
}

.brain-chain-map > ol {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, 1fr);
  list-style: none;
  margin: 0;
  padding: 0;
}

.brain-chain-map .chain-stage {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: 12px 14px;
  position: relative;
}

/* 最后一段是「客户真正听到的」，比前两段重一档边框——不另起一族颜色 */
.brain-chain-map .chain-stage:last-child {
  border-color: var(--line-dark);
}

.brain-chain-map .chain-stage + .chain-stage::before {
  color: var(--line-dark);
  content: "→";
  font-size: 14px;
  left: -16px;
  position: absolute;
  text-align: center;
  top: 14px;
  width: 14px;
}

.brain-chain-map .chain-stage > header {
  align-items: baseline;
  display: flex;
  gap: 8px;
}

.brain-chain-map .chain-stage > header > i {
  color: var(--brass);
  font-family: var(--font-mono);
  font-style: normal;
}

.brain-chain-map .chain-stage > header > b {
  font-size: 14px;
}

.brain-chain-map .chain-stage > p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
  margin: 4px 0 10px;
}

.brain-chain-map .chain-stage > ul {
  display: flex;
  flex-direction: column;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.brain-chain-map .chain-stage > ul > li {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.brain-chain-map .chain-stage > ul > li > b {
  font-family: var(--font-mono);
  font-size: 16px;
}

.brain-chain-map .chain-stage > ul > li > span {
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.5;
}

.brain-chain-map .chain-stage > ul > li.warn > b {
  color: var(--warning);
}

.brain-chain-map .chain-foot {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
  margin: 10px 0 0;
}

@media (max-width: 900px) {
  .brain-chain-map > ol {
    grid-template-columns: 1fr;
  }

  .brain-chain-map .chain-stage + .chain-stage::before {
    content: "↓";
    left: 14px;
    top: -16px;
  }
}

.brain-live-alert,
.brain-live-note,
.brain-live-slot-tip {
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 12px 0 0;
  padding: 10px 12px;
}

.brain-live-alert {
  background: var(--danger-bg);
  border: 1px solid var(--danger-line);
}

.brain-live-alert b {
  color: var(--danger);
  font-size: 13px;
}

/* 「故意只存简介」用琥珀不用红：它不是故障，是安全设计。
   标红会让下一个人跑去「修」它，而要修的恰恰是不该修的那件事。 */
.brain-live-note,
.brain-live-slot-tip {
  background: var(--warning-bg);
  border: 1px solid var(--brass-line);
}

.brain-live-note b,
.brain-live-slot-tip b {
  color: var(--warning);
  font-size: 13px;
}

.brain-live-alert span,
.brain-live-note span,
.brain-live-slot-tip span {
  font-size: 12px;
  line-height: 1.7;
}

.brain-live-slots {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 16px;
  padding: 14px;
}

.brain-live-slots > header {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.brain-live-slots > header > span {
  font-size: 13px;
  font-weight: 600;
}

.brain-live-slots > header small {
  color: var(--muted);
  display: block;
  font-size: 11px;
  font-weight: 400;
  margin-top: 2px;
}

/* 每格多了一句判据，96px 装不下（会挤成一字一行），下限抬到 150px */
.brain-live-slot-row {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

/* 三面墙里，四格色块和下面那堆积木之间要留一口气（2026-08-25 反馈「距离过于紧密」）。
   这两排都是彩色块，贴在一起会读成同一组——上面那排是「这面墙的总账」，
   下面是「一块块的砖」，是两层东西。
   只在墙里加：页首那块 .brain-live-slots 的四格后面本来就有间距，
   在那儿再加一次会空出一大截。 */
.knowledge-panorama-zone .brain-live-slot-row {
  margin-bottom: 16px;
}

.slot-state {
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 10px;
  text-align: center;
}

.slot-state strong {
  display: block;
  font-size: 20px;
}

.slot-state span {
  color: var(--muted);
  font-size: 11px;
}

/* 判据那句：比状态名再弱一档，别抢走数字的视觉焦点 */
.slot-state small {
  border-top: 1px solid rgba(0, 0, 0, .06);
  color: var(--muted);
  display: block;
  font-size: 10px;
  line-height: 1.45;
  margin-top: 6px;
  padding-top: 6px;
  text-align: left;
}

.slot-state.verified {
  background: var(--positive-bg);
  border-color: var(--positive-line);
}

.slot-state.verified strong {
  color: var(--positive);
}

.slot-state.conflict {
  background: var(--danger-bg);
  border-color: var(--danger-line);
}

.slot-state.conflict strong {
  color: var(--danger);
}

/* 空槽位刻意留灰：这一格什么都没有，不该看起来像有内容 */
.slot-state.empty {
  border-style: dashed;
}

.slot-state.empty strong {
  color: var(--muted);
}

/* ── 上传资料屏：解析说明 / 上传记录 / 冲突点名（2026-08-05）───────────── */
.parse-policy {
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
}

@media (max-width: 900px) {
  .parse-policy {
    grid-template-columns: 1fr;
  }
}

.parse-policy h4 {
  font-size: 13px;
  margin: 0 0 8px;
}

.parse-policy ul {
  margin: 0;
  padding-left: 18px;
}

.parse-policy li {
  font-size: 13px;
  line-height: 1.8;
  margin-bottom: 6px;
}

.parse-policy em {
  font-style: normal;
  font-weight: 600;
}

/* 「已知的漏」用琥珀：它是我们自己承认的缺口，不是故障。
   不标出来的话，店长会以为「冲突 0 条」等于「没有冲突」。 */
.parse-policy-gap {
  background: var(--warning-bg);
  border: 1px solid var(--brass-line);
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.7;
  margin: 10px 0 0;
  padding: 10px 12px;
}

.parse-policy-metrics {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.parse-policy-metrics > div {
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
}

.parse-policy-metrics strong {
  display: block;
  font-size: 18px;
}

.parse-policy-metrics span {
  display: block;
  font-size: 12px;
}

.parse-policy-metrics small {
  color: var(--muted);
  display: block;
  font-size: 11px;
  line-height: 1.5;
  margin-top: 4px;
}

.parse-policy-note,
.upload-records-note {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
  margin: 10px 0 0;
}

/* 冲突点名：红牌，因为它阻塞机器人对外说话 */
.upload-conflict-notice {
  align-items: flex-start;
  background: var(--danger-bg);
  border: 1px solid var(--danger-line);
  border-radius: var(--radius);
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin-bottom: 14px;
  padding: 12px 14px;
}

.upload-conflict-notice b {
  color: var(--danger);
  display: block;
  font-size: 14px;
}

.upload-conflict-notice span {
  display: block;
  font-size: 13px;
  line-height: 1.7;
  margin-top: 4px;
}

/* 「还没有通知通道」那句用中性灰而不是红：它是能力边界的说明，
   跟上面那条真待办不是一回事，同色会让人分不清哪句要行动。 */
.upload-conflict-notice small {
  color: var(--muted);
  display: block;
  font-size: 11px;
  line-height: 1.6;
  margin-top: 6px;
}

/*
 * 上传前要填的三样：归哪一类、你是谁、什么角色。
 *
 * ⚠️ 2026-08-14 补：这个类名在 JSX 里从一开始就有，**样式却一行都没写过**。
 * 三个 label 是块级默认流，标签和输入框首尾相接连成一长串，读起来像一句话
 * 而不是三个字段。以前它排在页面中段、拖拽区下面，没人看到；这轮把上传区
 * 提到首屏之后它成了最显眼的一块，必须补上。
 *
 * 用 auto-fit 而不是写死三列：窄屏（云电脑常见的 1280 分屏）自动折成两列或一列，
 * 不会把「填名字」那个输入框压到只剩十几个像素。
 */
.upload-intake-form {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: grid;
  gap: 12px 16px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin-bottom: 12px;
  padding: 14px 16px;
}

.upload-intake-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.upload-intake-form label > span {
  color: var(--muted);
  font-size: 11px;
}

.upload-intake-form input,
.upload-intake-form select {
  background: #fff;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  font-size: 13px;
  padding: 7px 9px;
  width: 100%;
}

/* 末尾那句「分类决定填到哪几格」是对三个字段的整体说明，占满整行 */
.upload-intake-form > p {
  color: var(--muted);
  font-size: 11.5px;
  grid-column: 1 / -1;
  line-height: 1.55;
  margin: 0;
}

/*
 * 「这份资料传到哪」两张单选卡。落点和生效方式都写在卡面上（spec §7.3 的要求），
 * 选中的那张亮边框——两条路的差别是这屏最重要的一个决定，不能藏在一个小圆点里。
 */
.upload-destination {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-bottom: 12px;
}

.upload-destination label {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  display: grid;
  gap: 4px;
  grid-template-columns: auto 1fr;
  padding: 12px 14px;
}

.upload-destination label.active {
  border-color: var(--ink);
  box-shadow: 0 0 0 1px var(--ink) inset;
}

.upload-destination input {
  margin-top: 2px;
}

.upload-destination b {
  font-size: 13px;
}

.upload-destination span {
  color: var(--muted);
  font-size: 11.5px;
  grid-column: 2;
  line-height: 1.55;
}

/*
 * 2026-08-24：这一排从两张卡变成**三张，就是企业大脑全景那三面墙**（A/B/C）。
 * 字母徽标沿用全景上那个方块的形状，人扫一眼就知道两屏说的是同一件事。
 * C 那张（行业积木）门店端不上传，压暗但**仍然可选**——选中后给出口，
 * 而不是禁用一个说不清为什么点不动的卡。
 */
.upload-zone-picker {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.upload-zone-picker label b {
  align-items: center;
  display: flex;
  gap: 7px;
}

.upload-zone-badge {
  align-items: center;
  background: var(--ink);
  border-radius: 5px;
  color: #fff;
  display: inline-flex;
  flex: none;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  height: 18px;
  justify-content: center;
  width: 18px;
}

/* C 那张卡（`intakeMode: "receive"`）：**能传，但传完只是收下、不进本店的库**。
   徽标换个颜色是让人扫一眼就看出它和 A/B 不是一回事——差别的正文写在卡面
   和回执里，不靠禁用来表达（禁用只会让人问「为什么点不动」）。 */
.upload-zone-picker label.receive .upload-zone-badge {
  background: var(--muted);
}

/* 「待确认的积木选项」：按积木格分组的草稿清单 */
.draft-brick-groups {
  display: grid;
  gap: 14px;
}

.draft-brick-groups section > h4 {
  align-items: baseline;
  display: flex;
  font-size: 12px;
  gap: 8px;
  margin: 0 0 6px;
}

.draft-brick-groups section > h4 > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
}

.draft-brick-groups article {
  align-items: flex-start;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 10px;
  justify-content: space-between;
  padding: 8px 0;
}

.draft-brick-groups article b {
  display: block;
  font-size: 12.5px;
}

.draft-brick-groups article small {
  color: var(--muted);
  display: block;
  font-size: 11.5px;
  line-height: 1.55;
  margin-top: 2px;
}

.draft-brick-groups article blockquote {
  border-left: 2px solid var(--line-dark);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
  margin: 6px 0 0;
  padding-left: 8px;
}

/* 从上传行的「拆进了：E01-04 …」chips 滚过来时，别让分组标题贴着视口顶 */
.draft-brick-groups section { scroll-margin-top: 16px; }

/* 每组标题右侧的「去看这一格 →」——沿用 h4 的基线排布，字号跟组标题一档 */
.draft-brick-groups section > h4 > .ui-button { font-size: 11px; margin-left: auto; padding: 2px 8px; }

/* 冲突条目下那句「和谁打架」 */
.draft-brick-conflict-note { color: var(--warning); }

/* 已定的格：整段压低存在感——它不是待办，不该和「等你定」的格抢眼睛 */
.draft-brick-groups section.draft-brick-decided > h4 { color: var(--muted); }

/* 「这一格已用：〈某条〉」——已定格的抬头，备选收在它下面 */
.draft-brick-groups .draft-brick-current {
  background: var(--soft);
  border-left: 3px solid var(--line-dark);
  border-radius: 0 6px 6px 0;
  padding: 8px 10px;
}

.draft-brick-groups .draft-brick-current > b {
  display: block;
  font-size: 12.5px;
}

.draft-brick-groups .draft-brick-current > small {
  color: var(--muted);
  display: block;
  font-size: 11.5px;
  line-height: 1.55;
  margin-top: 2px;
}

.draft-brick-groups .draft-brick-current > .ui-button {
  font-size: 11px;
  margin-top: 6px;
  padding: 2px 8px;
}

/* 「在用口径」那一半没读到时的警告条。**不是**装饰：这个状态下分不出备选和待办 */
.draft-brick-enabled-warn {
  background: var(--warning-bg);
  border: 1px solid #e6d5a8;
  border-radius: 6px;
  color: #7a5a12;
  font-size: 11.5px;
  line-height: 1.6;
  margin-bottom: 10px;
  padding: 8px 10px;
}

/* 右侧：状态 Pill 在上、「对照这一格」在下 */
.draft-brick-entry-side {
  align-items: flex-end;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 6px;
}

/* 上传行下面那排「拆进了哪些格」的入口 chips */
.upload-brick-chips {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.upload-brick-chips > em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
}

.upload-brick-chips > button {
  background: var(--soft);
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  color: var(--ink);
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
  padding: 5px 10px;
}

.upload-brick-chips > button:hover { border-color: var(--ink); }

/* 全景页数字明细折叠区：读不到时的那句说明 */
.brain-live-detail-empty { color: var(--muted); font-size: 12.5px; margin: 0; }

/* 待确认清单整块的锚点（chips 没有格码可跳时落这里） */
#draft-brick-options { scroll-margin-top: 16px; }

.upload-records-toolbar {
  align-items: flex-end;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
}

.upload-records-toolbar label {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.upload-records-toolbar label span {
  color: var(--muted);
  font-size: 11px;
}

.upload-records-toolbar select {
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  font-size: 13px;
  padding: 6px 8px;
}

.upload-records-toolbar .button-row {
  margin-left: auto;
}

.upload-records-list article {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  display: flex;
  gap: 12px;
  margin-bottom: 8px;
  padding: 10px 12px;
}

.upload-records-list article.conflicted {
  background: var(--danger-bg);
  border-color: var(--danger-line);
}

.upload-record-main {
  flex: 1;
  min-width: 0;
}

.upload-record-main b {
  display: block;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.upload-record-main span {
  align-items: center;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 12px;
  gap: 6px;
  margin-top: 3px;
}

.upload-record-main em {
  color: var(--ink);
  font-style: normal;
  font-weight: 600;
}

/* 角色做成小标签：一眼能区分销售传的和运营传的 */
.upload-record-main i {
  background: var(--accent-soft);
  border-radius: 4px;
  color: var(--ink);
  font-size: 11px;
  font-style: normal;
  padding: 1px 6px;
}

.upload-record-main small {
  color: var(--muted);
  display: block;
  font-size: 11px;
  line-height: 1.6;
  margin-top: 3px;
}

/* ── 企业大脑：反馈 / 新增 / 停用 三个动作的入口（2026-09-22）──────────────
   甲方销售反馈「反馈入口很难找、删除新增不够明显」。四处入口共用这一段样式：
   全景页首「我要…」、积木详情顶上「这一格说得不对？」、上传记录每行的操作、
   待复核的一行态。 */
.upload-records-list article { flex-wrap: wrap; }
/* 每行多了一组按钮：标题列给个底宽，窄一点的桌面宽度下让按钮换行，而不是把标题挤成一个字 */
.upload-records-list .upload-record-main { flex: 1 1 240px; }
.upload-records-list article.retired { background: var(--soft); }
.upload-records-list article.retired .upload-record-main b { color: var(--muted); text-decoration: line-through; }

.upload-record-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 6px; }

.upload-record-confirm {
  align-items: center;
  background: var(--danger-bg);
  border: 1px solid var(--danger-line);
  border-radius: 8px;
  display: flex;
  flex: 1 0 100%;
  flex-wrap: wrap;
  gap: 8px 14px;
  justify-content: space-between;
  padding: 10px 12px;
}

.upload-record-confirm > span { color: var(--ink); font-size: 13px; line-height: 1.6; }

.brain-quick-actions,
.brick-fix-bar {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  justify-content: space-between;
  padding: 12px 16px;
}

.brain-quick-actions > b { font-size: 14px; }

.brick-fix-bar {
  background: var(--accent-soft);
  border-color: #d6ccfb;
  margin: 12px 0 4px;
}

.brick-fix-bar > div:first-child { display: grid; gap: 3px; min-width: 0; flex: 1 1 320px; }
.brick-fix-bar > div:first-child b { font-size: 14px; }
.brick-fix-bar > div:first-child span { color: var(--ink); font-size: 13px; line-height: 1.6; }

.brain-fix-hint {
  background: var(--accent-soft);
  border-radius: 8px;
  color: var(--ink);
  font-size: 13px;
  margin: 0 0 8px;
  padding: 8px 12px;
}

.brain-needs-review-line {
  align-items: baseline;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex;
  flex-wrap: wrap;
  font-size: 13px;
  gap: 4px 10px;
  margin: 0;
  padding: 10px 16px;
}

.brain-needs-review-line span { color: var(--muted); }
.brain-needs-review-line.done { background: var(--positive-wash); border-color: var(--positive-line); }
.brain-needs-review-role { color: var(--muted); font-size: 12px; }

@media (max-width: 760px) {
  .brain-quick-actions .button-row,
  .brick-fix-bar .button-row { width: 100%; }
  .brain-quick-actions .ui-button,
  .brick-fix-bar .ui-button { flex: 1 1 auto; }
  .upload-record-actions { flex: 1 0 100%; }
}

/* ── 原件目录：批量选择与打包（2026-08-05）───────────────────────────────── */
.catalog-bulk-bar {
  align-items: center;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 8px;
  padding: 8px 12px;
}

.catalog-bulk-bar span {
  font-size: 13px;
}

.catalog-bulk-note {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
  margin: 0 0 12px;
}

/* 打包结果回执用信息蓝：它多数时候是「都打进去了」的确认，不是错误。
   真有东西没打进去时，句子本身会说清是哪几份、为什么。 */
.catalog-bulk-report {
  background: var(--info-bg);
  border: 1px solid #cfe1fb;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.7;
  margin: 0 0 12px;
  padding: 8px 10px;
}

.catalog-row {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  display: flex;
  gap: 12px;
  margin-bottom: 8px;
  padding: 10px 12px;
}

.catalog-row-main {
  flex: 1;
  min-width: 0;
}

.catalog-row-main b {
  display: block;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalog-row-main small,
.catalog-row-main em {
  color: var(--muted);
  display: block;
  font-size: 11px;
  font-style: normal;
  line-height: 1.6;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 屏 sales-03「已打过的题」——收起看结论，点开改分/采用 */
.simulation-reviewed { grid-column: 1 / -1; }
.reviewed-rubric {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.reviewed-rubric.is-open { border-color: var(--accent); }
.reviewed-rubric-head {
  align-items: center;
  background: none;
  border: 0;
  cursor: pointer;
  display: flex;
  gap: 12px;
  padding: 10px 12px;
  text-align: left;
  width: 100%;
}
.reviewed-rubric-head:hover { background: var(--soft); }
.reviewed-rubric-idx {
  color: var(--muted);
  flex: none;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.reviewed-rubric-q {
  flex: 1;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.reviewed-rubric-scores { display: flex; flex: none; gap: 4px; }
.reviewed-rubric-scores em {
  background: var(--soft);
  border-radius: 4px;
  font-size: 11px;
  font-style: normal;
  font-variant-numeric: tabular-nums;
  min-width: 18px;
  padding: 1px 4px;
  text-align: center;
}
.reviewed-rubric-body {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 12px;
  padding: 12px;
}
@media (max-width: 720px) {
  .reviewed-rubric-q { white-space: normal; }
  .reviewed-rubric-head { flex-wrap: wrap; }
}

/* ── 处理冲突页：「该找谁」（2026-08-05）─────────────────────────────────
 * 这条信息原来只长在上传资料屏的「上传记录」里，而那一屏在页尾。裁完一条
 * 想问「这个数哪来的」得跳回去拉到最底下。摆到裁决之前，省掉那一趟。
 * 用中性底不用红：它是**线索**不是新的告警，红色会和上面真正的待办抢注意力。
 * ---------------------------------------------------------------------- */
.conflict-who {
  background: var(--soft);
  border: 1px solid var(--line);
  border-left: 3px solid var(--ink);
  border-radius: 10px;
  margin-bottom: 14px;
  padding: 10px 14px;
}

.conflict-who b {
  display: block;
  font-size: 13px;
}

.conflict-who span {
  color: var(--muted);
  display: block;
  font-size: 12px;
  line-height: 1.7;
  margin-top: 3px;
}

/* ── 成员管理（/wb/members） ─────────────────────────────────────────── */
.account-summary-link {
  display: inline-block;
  margin-top: 6px;
  font-size: 12px;
  text-decoration: underline;
  opacity: 0.8;
}
/* 成员管理这一屏比登录卡宽得多：它是一张表，不是一个表单。
   原来沿用 520px 的登录卡宽度（外加内联 860），8 列挤到「管理者」三个字竖排成一列。 */
.members-panel {
  max-width: 1140px;
}

.members-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin: 16px 0 8px;
  table-layout: auto;
}

.members-table th,
.members-table td {
  border-bottom: 1px solid var(--line);
  padding: 11px 12px;
  text-align: left;
  vertical-align: middle;
}

.members-table th {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .04em;
  white-space: nowrap;
}

.members-table tbody tr:hover { background: var(--soft); }
.members-table tbody tr:last-child td { border-bottom: 0; }

/* 名字、手机号、角色这几列不该折行——折了就是截图里那种竖排 */
.members-table td:nth-child(1),
.members-table td:nth-child(2),
.members-table td:nth-child(3) { white-space: nowrap; }

.members-table td:nth-child(2) { font-variant-numeric: tabular-nums; }

/* 角色 */
.members-role {
  border-radius: 5px;
  display: inline-block;
  font-size: 11.5px;
  font-weight: 600;
  padding: 2px 8px;
  white-space: nowrap;
}
.members-role.manager { background: var(--accent-soft, var(--line-soft)); color: var(--accent, #5b45c9); }
.members-role.sales { background: var(--soft); color: var(--muted); }
/* 我方运营：和「管理者」区分开——同一张表里两拨人（我方 / 客户）要一眼看得出来 */
.members-role.ops { background: var(--warning-bg, var(--warning-bg)); color: var(--warning, var(--brass)); }

/* 角色可以就地改：徽章本身就是那个下拉。做成「看着像标签、点开是选择」，
   而不是标签旁边再挂一个「编辑」按钮——这一列一共三个值，多一次点击不值得。 */
.members-role-select {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
  padding-right: 20px;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 10px) 52%, calc(100% - 6px) 52%;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}
.members-role-select:hover:not(:disabled) { border-color: currentColor; }
.members-role-select:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* 自己那一行改不了——不给手型也不给箭头，别让人以为点了没反应 */
.members-role-select:disabled { background-image: none; cursor: default; padding-right: 8px; }
.members-role-select option { background: #fff; color: var(--ink); }

/* 状态：徽章 + 最近登录并成一格 */
.members-state { line-height: 1.5; }
.members-state small { color: var(--muted); display: block; font-size: 11.5px; margin-top: 3px; white-space: nowrap; }

.members-badge {
  border-radius: 5px;
  display: inline-block;
  font-size: 11.5px;
  font-weight: 600;
  margin-right: 4px;
  padding: 2px 7px;
  white-space: nowrap;
}
.members-badge.on { background: var(--positive-bg, var(--positive-bg)); color: var(--positive, #2e6b4c); }
.members-badge.off { background: var(--soft); color: var(--muted); }
.members-badge.warn { background: var(--warning-bg, var(--warning-bg)); color: var(--warning, var(--brass)); }
.members-badge.stop { background: var(--danger-bg, var(--danger-bg)); color: var(--danger, #93321f); }

/* 操作：横排、不换行。原来三个按钮各占一行，一个人的操作区有 90px 高 */
.members-actions { display: flex; flex-wrap: nowrap; gap: 6px; }

.members-table td button {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  padding: 4px 9px;
  white-space: nowrap;
}
.members-table td button:hover:not(:disabled) { border-color: var(--ink); }
.members-table td button:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.members-table td button:disabled { cursor: not-allowed; opacity: 0.4; }

/* 接待号那一格里的输入框 + 按钮也要横着 */
.members-table td input {
  border: 1px solid var(--line);
  border-radius: 6px;
  font: inherit;
  font-size: 12px;
  max-width: 130px;
  padding: 4px 8px;
}

/* 角色选项下面那段「现在还切不到本店」——是当前真实行为，不是免责声明，
   所以用琥珀底而不是灰色小字：灰色会被当成可以跳过的说明。 */
.members-role-caveat {
  background: var(--warning-bg, var(--warning-bg));
  border-radius: 7px;
  display: block;
  line-height: 1.75;
  margin-top: 6px;
  padding: 9px 12px;
}

.members-foot-note {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.7;
  margin: 0 0 16px;
}

/*
 * 登录链接块。**排在正常文档流里，不浮在表格上**——原来那版覆盖在第一行上，
 * 正好挡住「名字 / 手机号 / 角色」三列，人得先关掉它才看得见自己在改谁。
 */
.members-fresh-link {
  background: var(--warning-bg, var(--warning-bg));
  border: 1px solid var(--brass-line, #e6d3a8);
  border-radius: var(--radius);
  display: grid;
  gap: 8px;
  padding: 16px 18px;
}

.members-fresh-link-head { align-items: baseline; display: flex; flex-wrap: wrap; gap: 4px 10px; }
.members-fresh-link-head b { font-size: 14px; }
.members-fresh-link-head em {
  color: var(--warning, var(--brass));
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
}

.members-fresh-link-url {
  background: rgba(255, 255, 255, .7);
  border: 1px solid var(--brass-line, #e6d3a8);
  border-radius: 6px;
  display: block;
  font-size: 12.5px;
  overflow-wrap: anywhere;
  padding: 8px 10px;
}

.members-fresh-link p { color: var(--muted); font-size: 12.5px; margin: 0; }

.members-fresh-link-actions { display: flex; gap: 8px; }
.members-fresh-link-actions button {
  background: #fff;
  border: 1px solid var(--brass-line, #e6d3a8);
  border-radius: 6px;
  cursor: pointer;
  font: inherit;
  font-size: 12.5px;
  padding: 5px 12px;
}
.members-fresh-link-actions button.primary {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

@media (max-width: 900px) {
  .members-table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* 屏 sales-07 的聊天正文：店长要看着对话判断机器人答得对不对 */
.chat-transcript {
  display: grid;
  gap: 8px;
  margin-bottom: 6px;
}

.chat-line {
  border-radius: 10px;
  display: grid;
  gap: 2px;
  padding: 8px 11px;
}

.chat-line.customer {
  background: var(--canvas);
}

.chat-line.bot {
  background: var(--info-bg);
}

.chat-line b {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.chat-line span {
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-wrap;
}

/*
 * 机器人那几句是可点的按钮：点中标红，下面的修改意见就写给这一句。
 * 按钮自带的居中、系统字体、灰边框会把气泡毁掉，这里全清掉。
 */
button.chat-line {
  appearance: none;
  border: 1px solid transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
  width: 100%;
}

button.chat-line:hover {
  border-color: #7fa8e8;
}

.chat-line.bot.picked {
  background: var(--danger-bg);
  border-color: #d93636;
}

.chat-line.bot.picked b,
.chat-line.bot.picked span {
  color: #b3261e;
}

/* ── 每句机器人回复下面的「出处」（app/wb/reply-sources.tsx）────────────────
 *
 * 设计意图只有一条：**默认不抢戏**。店长第一遍是通读对话判断答得对不对，
 * 出处是他起疑之后才要查的东西。所以收起态压成一行小字、不占背景色；
 * 展开态才给底色和缩进，视觉上明确「这是挂在上面那句话下面的」。
 * 实测一句回复调取 3-7 条出处、一段对话 4-8 句，全展开会把正文彻底淹掉。
 */
.chat-line-group {
  display: grid;
  gap: 2px;
}

.reply-source-row {
  font-size: 12px;
  line-height: 1.6;
  margin: 0;
  padding: 2px 11px 0;
}

.reply-source-row.muted { color: var(--muted); }
.reply-source-row.failed { color: var(--danger); }

.reply-source-toggle {
  align-items: center;
  background: none;
  border: 0;
  color: var(--info);
  cursor: pointer;
  display: inline-flex;
  font-size: 12px;
  gap: 4px;
  padding: 2px 0;
  text-align: left;
}

.reply-source-toggle:hover { text-decoration: underline; }
.reply-source-toggle i { font-style: normal; }

.reply-source-list {
  border-left: 2px solid var(--line);
  display: grid;
  gap: 8px;
  list-style: none;
  margin: 4px 0 6px;
  padding: 6px 0 6px 10px;
}

.reply-source-empty {
  color: var(--muted);
  margin: 4px 0 6px;
}

.reply-source-head {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.reply-source-head small { color: var(--muted); font-size: 11px; }

/* 种类标签：四种来源改起来去的是四个不同的地方，颜色区分是为了让人一眼分流 */
.reply-source-kind {
  border-radius: 4px;
  flex: none;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 5px;
}

.reply-source-kind.knowledge { background: var(--info-bg); color: var(--info); }
.reply-source-kind.store_fact { background: var(--positive-bg); color: var(--positive); }
.reply-source-kind.example { background: var(--brass-bg); color: var(--brass); }
.reply-source-kind.brand { background: var(--accent-soft); color: var(--ink-2); }
.reply-source-kind.missing { background: var(--danger-bg); color: var(--danger); }

.reply-source-title { color: var(--ink-2); font-weight: 600; }

.reply-source-excerpt {
  color: var(--muted);
  margin: 2px 0 0;
}

/* ── 整条回复的积木引用（去重后汇总一次，见 BrickDigest）─────────────────
 *
 * ⚠️ **这一栏很窄，别再给它排两列。** 屏 2.1.2 的右栏宽度由
 * `.quality-layout { grid-template-columns: minmax(420px, 520px) minmax(0,1fr) }`
 * 决定（2026-08-06 为了左边那张五列表格加的），窗口不宽时右栏只剩两三百 px。
 *
 * 2026-08-12 实机截图就是被这个坑到的：上一版给板块名预留了 96px 的标签列
 * （`grid-template-columns: minmax(96px,auto) minmax(0,1fr)`）、又把分支按钮设成
 * `flex-direction: column`，于是每个按钮只剩百来 px、文字逐字换行，整栏排版塌掉。
 *
 * 现在：板块名**单独一行**在上，分支按钮**流式换行**在下。任何宽度都排得开。
 */
.reply-source-digest {
  border-top: 1px solid var(--line-soft);
  display: grid;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
}

.reply-source-digest > b {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 600;
}

/* 摆出来的那几块积木，**一块一行**。
 *
 * 2026-08-13 之前这里是横向流式（display:flex; flex-wrap:wrap），因为那时候
 * 一个入口就是一个光秃秃的按钮。现在每个入口下面可能跟一到两句说明
 * （「另有 N 格挂的是同一批资料」「这条对应关系是现归的」），横排会把说明
 * 挤到按钮中间，读起来不知道哪句管哪块。 */
.reply-source-brick-branches {
  display: grid;
  gap: 8px;
}

/* 一个入口：按钮 + 它自己的说明，说明另起一行、缩进对齐按钮 */
.reply-source-brick-group {
  display: grid;
  gap: 3px;
  justify-items: start;
}

/* 积木分支按钮。
 *
 * ⚠️ **这一条 2026-08-12 被误删过一次**：改分组布局时整块替换 CSS 区间，
 * 把它一并删掉了，而补 `white-space` 的那次 `replace` 因为目标已不存在
 * 静默失败（那行没写断言）。表现是按钮从蓝底白字退化成浏览器默认的灰按钮，
 * 用户当场看出来了。改这一段时先确认它还在。
 *
 * 实心不描边：描边版在浅蓝底的机器人气泡上几乎看不见（更早一次反馈）。
 * 白字压 --info(#2f66c4) 对比度 ~5.3:1，过 AA。 */
.reply-source-brick {
  background: var(--info);
  border: 1px solid var(--info);
  border-radius: var(--radius-xs);
  color: #fff;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  text-align: left;
  /* 整块换行、不逐字断 —— 窄栏里「上门量尺条件」被拆成三行是踩过的样子。
     现在每块积木独占一行，超长标题允许折行，但仍不逐字断。 */
  overflow-wrap: break-word;
  word-break: keep-all;
}

.reply-source-brick:hover { background: #24509e; border-color: #24509e; }

/* 「6 格内容相同」——挂在按钮里的小标，替掉原来那句摊在下面两行的
 * 「另有 5 格挂的是同一批资料，点进去内容相同：…」（实机反馈：右栏被撑爆，
 * 而那串格子名点进去是同一个页面、对店长没有下一步）。具体是哪几格在 title 里。 */
.reply-source-brick-slots {
  background: rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  font-size: 10px;
  font-style: normal;
  font-weight: 500;
  margin-left: 6px;
  padding: 1px 6px;
  white-space: nowrap;
}

/* 「展开另外 N 份相关度低的资料」。
 * ⚠️ 文案只能说「相关度低」，不能说「没用上」——喂料侧只用相关度排序、没有门槛，
 * 这几份**确实进了 prompt**。做成低调的文字按钮：它们是噪音，但不是错误。 */
.reply-source-lowrel-toggle {
  align-items: center;
  background: none;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  font-size: 11px;
  gap: 4px;
  padding: 4px 0;
}

.reply-source-lowrel-toggle:hover { color: var(--info); text-decoration: underline; }
.reply-source-lowrel-toggle i { font-style: normal; }

.reply-source-lowrel-note {
  background: var(--soft);
  border-radius: var(--radius-xs);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
  margin: 0 0 6px;
  padding: 6px 8px;
}

/* 「这几支挂的是同一批资料」——诚实由这句话承担，不靠少给入口 */
.reply-source-brick-merged {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  line-height: 1.5;
}

/* 「还被另外 N 块积木引用着」：一份大文档常被十几块砖引用，只摆前两块，
 * 剩下的说清楚有多少 —— 不说的话店长会以为改这一块就完了。 */
.reply-source-brick-rest {
  align-self: center;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
}

/* 底部汇总按钮里的槽位码徽章。深蓝底上要反过来用半透明白 */
.reply-source-brick i {
  background: rgb(255 255 255 / 22%);
  border-radius: 3px;
  color: #fff;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-right: 6px;
  padding: 1px 4px;
}

/* 点不进积木的那些照实说原因。**刻意长得不像按钮**——做成按钮样子就等于
 * 又造了一个点下去什么都不会发生的东西。 */
.reply-source-nobrick {
  color: var(--muted);
  display: block;
  font-size: 11px;
  margin-top: 3px;
}

.reply-source-legend {
  background: var(--soft);
  border-radius: var(--radius-xs);
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.7;
  margin: 0 0 8px;
  padding: 7px 10px;
}

.reply-source-legend em { color: var(--muted); font-style: normal; }

/* ── 「这份不对，停用它」（app/wb/reply-sources.tsx）─────────────────────
 * 停用是 org 级的破坏性操作（全公司所有接待号都不再引这份），所以：
 * 收起态做成低调的文字按钮不抢戏，确认态才给红色；确认按钮在写够理由之前是灰的。
 */
.reply-source-retire {
  display: block;
  margin-top: 4px;
}

.reply-source-retire.open {
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
  display: grid;
  gap: 6px;
  padding: 8px;
}

.reply-source-retire textarea {
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
  font-size: 12px;
  line-height: 1.6;
  min-height: 52px;
  padding: 6px 8px;
  resize: vertical;
  width: 100%;
}

.reply-source-retire-btn {
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
  color: var(--ink-2);
  cursor: pointer;
  font-size: 11px;
  padding: 3px 8px;
}

.reply-source-retire-btn:hover { background: var(--surface); }

.reply-source-retire-btn.danger {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
  font-weight: 600;
}

.reply-source-retire-btn.danger:disabled {
  background: var(--soft);
  border-color: var(--line);
  color: var(--muted);
  cursor: not-allowed;
}

.reply-source-retire-btn.restore {
  border-color: var(--positive-line);
  color: var(--positive);
}

.reply-source-retire-actions { display: flex; gap: 6px; }

/* 后果写在按钮旁边：不写出来，店长会以为只影响自己这一段对话 */
.reply-source-retire-warn {
  color: var(--warning);
  font-size: 11px;
  font-style: normal;
  line-height: 1.6;
}

.reply-source-retire-err {
  color: var(--danger);
  font-size: 11px;
  font-style: normal;
}

/* 已停用的资料标题划掉：机器人不再引它，但历史出处里它还在 */
.reply-source-title.retired {
  color: var(--muted);
  text-decoration: line-through;
}

/* 没选中机器人回复时，输入框是灰的——先挑句子，再写改法 */
.review-box textarea:disabled {
  background: var(--soft);
  color: var(--muted);
  cursor: not-allowed;
}

/* 触发条件提示：告诉店长「客户说什么的时候会用上你写的这句」。
 * 不摆出来他就是闭着眼睛写 —— 客户那句要是「好的」「暂时没有」这种泛话，
 * 以后任何人说同样的话都会命中他写的这一句。 */
.trigger-hint {
  background: var(--warning-bg);
  border-left: 3px solid #e0a800;
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.6;
  margin: 0;
  padding: 6px 9px;
}
.trigger-hint b { font-weight: 600; }
.trigger-hint em { color: #a06a00; font-style: normal; }
/* 前面压根没有客户发言 —— 这种位置后端会直接拒绝上线，用红色说清 */
.trigger-hint.none {
  background: var(--danger-bg);
  border-left-color: var(--danger);
  color: var(--danger);
}

/* 设置与工具那组下面的记号图例。三种记号靠形状区分，不靠颜色——截图转黑白 */
/* 或色盲都读得懂（✓ 勾 / ● 实心 / ○ 空心）。 */
/* ── 实时时间戳 + 刷新（2026-08-06）────────────────────────────────────────
 * 五个实时区块原来各手写一套时间格式（「10:36 实时）」「10:36 实时查库；」…），
 * 用户截图逐个圈出来才发现。收成 <LiveStamp> 之后格式只有一份，
 * 这段样式也只有一份——新加区块直接用，想不一致都难。
 * ------------------------------------------------------------------------ */
.live-stamp {
  align-items: baseline;
  color: var(--muted);
  display: inline-flex;
  flex-wrap: wrap;
  font-size: 12px;
  font-weight: 400;
  gap: 6px;
}

.live-stamp-time {
  white-space: nowrap;
}

.live-stamp-suffix {
  color: var(--muted);
}

/* 刷新做成朴素文字按钮，不做成主按钮：它是随手可点的辅助动作，
   做成实心按钮会跟页面上真正要做的事（去处理冲突、去上传）抢注意力。 */
.live-stamp-refresh {
  background: none;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  cursor: pointer;
  font-size: 11px;
  line-height: 1.6;
  padding: 1px 8px;
  white-space: nowrap;
}

.live-stamp-refresh:hover:not(:disabled) {
  background: var(--accent-soft);
  border-color: var(--line-dark);
}

.live-stamp-refresh:disabled {
  color: var(--muted);
  cursor: default;
}

/* ── 分叉内部：两条路各自竖排（2026-08-06）──────────────────────────────
 * 挪进第 3 列之后横向空间只有原来的三分之一，5 个节点排一行必挤。
 * 改成「标签在上、节点链在下」竖排，节点自己换行。
 * ------------------------------------------------------------------ */
.mf-fork .fork-path {
  align-items: flex-start;
  display: grid;
  gap: 6px;
  justify-items: start;
}

.mf-fork .fork-chain {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* 竖排之后原来那条左侧竖轨没有意义了（每条路自己一块），去掉 */
.mf-fork .fork-path::before {
  content: none;
}

/* ── 冲突的三个出口（2026-08-06）─────────────────────────────────────────
 * 每个按钮下面写清后果。不写的话「先放着」和「两条都停用」看起来像同一件事——
 * 前者是留着待办，后者是把内容撤下来、待办也清掉，差别很大。
 * -------------------------------------------------------------------- */
.conflict-actions {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

/*
 * 一行一个出口：按钮在上、后果在下，说明占整行。
 *
 * 原来写的是两列 grid（按钮 | 说明），第一列 minmax(150px, auto) 的 auto 会长到
 * max-content，把 1fr 那列挤到只剩一个字宽——截图上说明文字竖着排成一条。
 * 这里横向空间本来就只有半屏（右边还有「原始资料与位置」），
 * 不值得为并排省那两行高度。
 */
.conflict-action {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
}

.conflict-action small {
  color: var(--muted);
  display: block;
  font-size: 12px;
  line-height: 1.7;
  margin-top: 6px;
}
/* ── 企业微信登录按钮（首页）───────────────────────────────────────────── */
.gate-primary {
  align-items: center;
  background: var(--ink);
  border-radius: var(--radius-s);
  color: var(--paper, #fff);
  display: inline-flex;
  font-size: 15px;
  font-weight: 600;
  justify-content: center;
  min-height: 44px;
  padding: 11px 22px;
  text-decoration: none;
  transition: background-color var(--speed) var(--ease-out);
}
/* 悬停变色不变透明度：opacity 会把按钮上的字一起洗淡 */
.gate-primary:hover { background: color-mix(in srgb, var(--ink) 84%, #fff); }

/* 屏 05「看客户会收到什么」里的示例图 */
.preview-gallery {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
}
.preview-gallery > small {
  color: var(--muted);
  font-size: 12px;
}
.preview-gallery-row {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.preview-gallery figure {
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}
.preview-gallery img {
  aspect-ratio: 4 / 3;
  display: block;
  object-fit: cover;
  width: 100%;
  background: var(--soft);
}
.preview-gallery figcaption {
  color: var(--muted);
  font-size: 11px;
  padding: 5px 7px;
}
.preview-gallery-note {
  color: var(--muted);
  font-size: 11px;
}

/* 屏 sales-08：「机器人现在会怎么答」的提示条 */
.ai-draft-note {
  background: var(--info-bg);
  border: 1px solid #d6e4fb;
  border-radius: 10px;
  display: grid;
  gap: 3px;
  margin-bottom: 10px;
  padding: 10px 13px;
}

.ai-draft-note b {
  font-size: 13px;
}

.ai-draft-note span {
  color: var(--ink-2);
  font-size: 12.5px;
  line-height: 1.6;
}

/* 屏 05 设置表里的「做完之后它会怎么表现」——配置完照着核对一遍 */
.expected-behaviors {
  background: var(--positive-bg);
  border-radius: 8px;
  display: grid;
  gap: 6px;
  padding: 12px 14px;
}
.expected-behaviors span {
  color: var(--positive);
  font-size: 13px;
  line-height: 1.6;
}
.expected-behaviors i {
  font-style: normal;
  margin-right: 6px;
}

/* ── 门店企微接待开通（spec 2026-08-06）─────────────────────────────────
 *
 * 「还没接通」是数据来源的**第三种**状态，不复用「示例数据」那个黄标：
 * 「有示例可看」和「本该有你的客户但还没接进来」对店长是两件事。
 * 所以顶标另起一个 .is-gated，面板本身用琥珀底（等你动手）/ 蓝底（在推进中）
 * / 红底（停了）三种，绿的那种不会出现——绿了这块面板就整个不渲染了。
 */
.demo-notice.is-gated b {
  background: var(--warning-bg);
  color: var(--warning);
}

.wecom-gate {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--muted);
  border-radius: var(--radius);
  display: grid;
  gap: 10px;
  margin: 0 2px 14px;
  padding: 16px 18px;
}
.wecom-gate.tone-none,
.wecom-gate.tone-scan {
  background: var(--warning-bg);
  border-color: #ecd9a8;
  border-left-color: var(--warning);
}
.wecom-gate.tone-progress {
  background: var(--info-bg);
  border-color: #cfe1fa;
  border-left-color: var(--info);
}
.wecom-gate.tone-failed {
  background: var(--danger-bg);
  border-color: var(--danger-line);
  border-left-color: var(--danger);
}

.wecom-gate header {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.wecom-gate header b {
  background: rgba(255, 255, 255, 0.75);
  border-radius: 999px;
  color: var(--ink);
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 9px;
}
.wecom-gate h3 {
  font-size: 15px;
  font-weight: 700;
  margin: 0;
}
.wecom-gate p {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.7;
  margin: 0;
}
.wecom-gate .wecom-waiting {
  color: var(--muted);
  font-size: 12.5px;
}
.wecom-gate .wecom-waiting b {
  color: var(--ink);
}
.wecom-gate .wecom-hint {
  color: var(--muted);
  font-size: 12.5px;
}

/* 五步进度：只说到了第几步，不假装每一步有百分比 */
.wecom-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.wecom-steps li {
  align-items: center;
  color: var(--muted);
  display: flex;
  font-size: 12px;
  gap: 5px;
}
.wecom-steps li i {
  align-items: center;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  display: inline-flex;
  font-size: 10.5px;
  font-style: normal;
  height: 18px;
  justify-content: center;
  width: 18px;
}
.wecom-steps li.done {
  color: var(--positive);
}
.wecom-steps li.done i {
  background: var(--positive-bg);
  border-color: var(--positive-line);
  color: var(--positive);
}
.wecom-steps li.current {
  color: var(--ink);
  font-weight: 700;
}
.wecom-steps li.current i {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.wecom-actions {
  display: grid;
  gap: 10px;
  justify-items: start;
}
.wecom-actions label {
  display: grid;
  gap: 4px;
  max-width: 420px;
  width: 100%;
}
.wecom-actions label span {
  color: var(--muted);
  font-size: 12px;
}
.wecom-actions input {
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  font: inherit;
  font-size: 13px;
  padding: 7px 10px;
  width: 100%;
}
.wecom-actions button {
  background: var(--ink);
  border: 0;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
}
.wecom-actions button:disabled {
  cursor: default;
  opacity: 0.5;
}

/* 二维码：白底方块，别让面板的琥珀底压在码上影响识别率 */
.wecom-qr {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  display: grid;
  gap: 6px;
  justify-items: center;
  padding: 14px;
}
.wecom-qr img {
  height: auto;
  image-rendering: pixelated;
  max-width: 220px;
  width: 100%;
}
.wecom-qr b {
  font-size: 13px;
}
.wecom-qr span {
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

/* ── 运营开通后台 /ops/<key>（spec P3）───────────────────────────────────
 * 只有运营看，所以不追求门店面那套克制的排版：一屏能扫完、每条能直接动手。
 */
.ops-page {
  margin: 0 auto;
  max-width: 980px;
  padding: 28px 20px 60px;
}
.ops-head {
  align-items: start;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin-bottom: 18px;
  padding-bottom: 14px;
}
.ops-head h1 {
  font-size: 19px;
  margin: 0 0 6px;
}
.ops-head p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
  margin: 0;
  max-width: 62ch;
}
.ops-head button,
.ops-actions button {
  align-items: center;
  background: var(--ink);
  border: 0;
  border-radius: var(--radius-s);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  justify-content: center;
  /* 42px 触控底线（2026-08-11 五族按钮归一）：这排按钮里有「停用」这类
     破坏性操作，原来 ~32px 高还六颗并排，误触成本太高 */
  min-height: 42px;
  padding: 7px 14px;
}
.ops-head button:hover:not(:disabled),
.ops-actions button:hover:not(:disabled) {
  background: color-mix(in srgb, var(--ink) 84%, #fff);
}
.ops-actions button:disabled {
  cursor: default;
  opacity: 0.45;
}
.ops-actions button.ops-danger {
  background: var(--danger-bg);
  color: var(--danger);
}
.ops-actions button.ops-danger:hover:not(:disabled) {
  background: color-mix(in srgb, var(--danger) 16%, #fff);
}
.ops-message {
  background: var(--info-bg);
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.7;
  margin: 0 0 14px;
  padding: 10px 14px;
}
.ops-empty {
  color: var(--muted);
  font-size: 13px;
}
.ops-rows {
  display: grid;
  gap: 14px;
}
.ops-row {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-dark);
  border-radius: var(--radius);
  display: grid;
  gap: 10px;
  padding: 14px 16px;
}
.ops-row.status-awaiting_scan { border-left-color: var(--warning); }
.ops-row.status-verifying { border-left-color: var(--info); }
.ops-row.status-live { border-left-color: var(--positive); }
.ops-row.status-failed { border-left-color: var(--danger); }
.ops-row header {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ops-row header b { font-size: 14px; }
.ops-row header small { color: var(--muted); font-size: 12px; }
.ops-badge {
  background: var(--accent-soft);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 9px;
}
.ops-meta { color: var(--muted); font-size: 12.5px; margin: 0; }
.ops-fields {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.ops-fields .ops-note { grid-column: 1 / -1; }
.ops-fields label { display: grid; gap: 4px; }
.ops-fields label span { color: var(--muted); font-size: 12px; line-height: 1.5; }
.ops-fields input,
.ops-fields select {
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  font: inherit;
  font-size: 13px;
  padding: 6px 9px;
  width: 100%;
}
.ops-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.ops-qr {
  background: var(--soft);
  border: 1px dashed var(--line-dark);
  border-radius: 10px;
  display: grid;
  gap: 8px;
  padding: 12px 14px;
}
.ops-qr:focus-visible { outline: 2px solid var(--info); }
.ops-qr b { font-size: 13px; }
.ops-qr p { color: var(--muted); font-size: 12.5px; line-height: 1.7; margin: 0; }
.ops-qr-preview { align-items: center; display: flex; flex-wrap: wrap; gap: 12px; }
.ops-qr-preview img {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  height: auto;
  max-width: 160px;
  padding: 6px;
}
.ops-qr-preview button {
  background: var(--ink);
  border: 0;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 14px;
}

/* ── 运营开店后台 /ops/<key>/stores（板块 E · 自助开户）──────────────────
 * 与上面那套开通后台共用 .ops-* 的骨架，这里只补它没有的三样：
 * 顶部两个后台之间的跳转、「只显示一次」的链接卡、以及建店表单。
 */
.ops-head-actions {
  align-items: center;
  display: flex;
  flex-shrink: 0;
  gap: 12px;
}
.ops-head-actions a {
  color: var(--muted);
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.ops-actions button.ops-secondary {
  background: transparent;
  border: 1px solid var(--line-dark);
  color: var(--ink);
}
.ops-actions button.ops-secondary:hover:not(:disabled) {
  background: var(--soft);
  border-color: var(--muted);
}

/*
 * 刚生成的链接。**刻意做成整页最重的一块**：它是全系统唯一一次能看到明文 token 的
 * 地方，关掉就再也拿不回来。低调的提示配上「只显示一次」的密钥，是一对必然出事的组合。
 */
.ops-freshlink {
  background: var(--warning-bg);
  border: 2px solid var(--warning);
  border-radius: var(--radius);
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
  padding: 16px 18px;
}
.ops-freshlink b { font-size: 14px; }
.ops-freshlink p { font-size: 12.5px; line-height: 1.7; margin: 0; }
.ops-freshlink code {
  background: var(--surface);
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  display: block;
  font-size: 13px;
  /* 链接不换行会横向撑破页面，运营也就没法整条选中复制 */
  overflow-wrap: anywhere;
  padding: 10px 12px;
  user-select: all;
}

.ops-create { margin-bottom: 18px; }
.ops-create header b { font-size: 14px; }

.ops-row.status-active { border-left-color: var(--positive); }
.ops-row.status-expired { border-left-color: var(--warning); }
.ops-row.status-revoked {
  border-left-color: var(--line-dark);
  /* 撤销的行留在列表里当账本，但不该跟在用的抢注意力 */
  opacity: 0.62;
}

/*
 * 每日素材条目上的「不合适」。次要动作：它只把一条选片信号记进后台，
 * 不产出任何东西，所以给文字按钮的重量，不跟旁边的「做这条」抢。
 */
.feed-dismiss {
  padding: 2px 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.feed-dismiss:hover:not(:disabled) {
  color: var(--ink);
}

.feed-dismiss:disabled {
  color: var(--muted);
  text-decoration: none;
}

/* ── 「本页设置到不到线上」提示条（屏 04 / 05）───────────────────────── */
/*
 * 与 .demo-notice 回答的是两个不同的问题，所以是两条：
 *   .demo-notice  —— 这一屏的数字是不是真的
 *   .bridge-notice —— 我在这一屏改的东西，会不会真的到客户那儿
 * 沿用同一套语义色，不另起一套视觉。
 */
.bridge-notice {
  align-items: baseline;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 0 2px 12px;
  padding: 9px 12px;
}

.bridge-notice strong {
  flex: 0 0 auto;
  font-size: 12.5px;
  font-weight: 600;
}

.bridge-notice span {
  color: var(--ink-2);
  flex: 1 1 240px;
  font-size: 12.5px;
  line-height: 1.65;
}

/* 开着 = 改动会真的影响客户。用告警色而不是成功色：这里要的是「下手前先想一下」，
   不是「一切正常，放心改」—— 绿色会读成后者。 */
.bridge-notice.is-on {
  background: var(--warning-bg);
  border-color: transparent;
}
.bridge-notice.is-on strong { color: var(--warning); }

/* 关着 = 白改。这是「还没接通」，与 .demo-notice.is-gated 同一档语义。 */
.bridge-notice.is-off {
  background: var(--info-bg);
  border-color: transparent;
}
.bridge-notice.is-off strong { color: var(--info); }

/* 整条桥开着、但屏 05 那段单独关着。 */
.bridge-notice.is-partial {
  background: var(--info-bg);
  border-color: transparent;
}
.bridge-notice.is-partial strong { color: var(--info); }

/* 查不到 —— 不猜，也不用红色吓人：它不是故障，是「此刻说不准」。 */
.bridge-notice.is-unknown {
  background: var(--surface);
}
.bridge-notice.is-unknown strong { color: var(--muted); }

/* 代登录横幅：钉在每一屏顶部。刺眼是刻意的——运营用别人的身份看屏，
   看着看着就忘了自己是谁，而这条是"别在客户数据上手滑"的第一道提醒 */
.impersonation-banner {
  align-items: center;
  background: var(--warning-bg);
  border-bottom: 2px solid var(--brass-line);
  color: var(--warning);
  display: flex;
  flex-wrap: wrap;
  font-size: 13px;
  gap: 12px;
  padding: 10px 16px;
  position: sticky;
  top: 0;
  z-index: 100;
}

.impersonation-banner button {
  background: var(--warning);
  border: 0;
  border-radius: var(--radius-xs);
  color: #fff;
  cursor: pointer;
  font-size: 12px;
  min-height: 32px;
  padding: 6px 10px;
}

/* ============================================================================
 * 2026-08-11 交互反馈补层。只补「状态」，不改任何布局/尺寸/语义——
 * 这些选择器在上文都有本体，写在文件末尾是为了不跟原规则的注释与上下文搅在一起。
 * ========================================================================== */

/* 文字链接族：悬停给下划线。颜色不变，靠形状表达「点得动」，色弱也读得到 */
.link-actions button:hover,
.row-actions button:hover,
.text-button:hover,
.text-link:hover,
.card-actions button:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 折叠箭头跟着开合转，节奏与全站一致 */
.setup-nav summary::after {
  transition: transform var(--speed) ease;
}

/* 登录页 tab：悬停先给一半深度，暗示可切换 */
.account-access-tabs button:hover:not(.active) {
  border-bottom-color: var(--line-dark);
  color: var(--ink);
}

/* 勾选块：悬停描边加深，选中态规则在上文、优先级更高不受影响 */
.check-option:hover {
  border-color: var(--line-dark);
}

/* 系统开着「减少动态效果」时，全部过渡与动画归零。
   进度条宽度、折叠箭头这类状态变化仍然发生，只是不再演过程 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/*
 * 企微只读投屏（app/wb/wecom-cast.tsx）的画面 iframe。
 *
 * #wecom-cast-frame **本身就是那个 <iframe>**（无影 `iframeId` 指向它，SDK 把
 * container.html 设成它的 src）——不是一个装 iframe 的 div。所以尺寸直接给到它。
 *
 * 必须有明确宽高（官方「容器必须有可见宽高」）：iframe 是 replaced element，
 * 不给尺寸会塌成 300×150，而 SDK 会拿这个尺寸去协商**远端云电脑的显示分辨率**——
 * 每连一次就把那台机屏幕改小、按坐标工作的自动接待全废（2026-08-11 事故，spec §12）。
 * 铺满是「画面清晰」这一半；「不改远端分辨率」那一半由连接参数
 * resolutionAdaptive:false + fixedResolution + onConnected 的 setResolution 兜底。
 */
#wecom-cast-frame {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  display: block;
  background: #000;
}

.impersonation-banner button:hover {
  background: color-mix(in srgb, var(--warning) 84%, #000);
}

/* ── 统一审核台（2026-08-11 从 review-screen.tsx 的行内样式收编）──────────
 * 它是跨模块、每天要用的一屏，却曾是全站最不受 CSS 管的一屏（23 处 inline
 * style、两处硬编码 #7a2b2b、13.5/15.5px 漂移字号）。收进来之后跟全站同一套
 * token 同涨同跌。类名前缀 review-，只许这一屏用。 */

.review-row-head {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.review-row-time {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  margin-left: auto;
}

.review-row-title {
  font-size: 15px;
  font-weight: 650;
  margin: 10px 0 4px;
}

.review-row-target {
  color: var(--muted);
  font-size: 13px;
  margin: 0 0 6px;
}

.review-row-body {
  background: var(--soft);
  border-radius: var(--radius-s);
  font-size: 13px;
  line-height: 1.75;
  margin: 8px 0 0;
  padding: 11px 13px;
  white-space: pre-wrap;
}

.review-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.review-input {
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-s);
  flex: 1 1 180px;
  font-size: 13px;
  min-height: 40px;
  min-width: 140px;
  padding: 0 10px;
  transition: border-color var(--speed) var(--ease-out);
}

.review-input:hover {
  border-color: var(--muted);
}

.review-blocked {
  background: var(--danger-bg);
  border-radius: var(--radius-s);
  margin-top: 12px;
  padding: 13px 15px;
}

.review-blocked > b {
  color: var(--danger);
  font-size: 13px;
}

.review-blocked p {
  color: var(--danger);
  font-size: 13px;
  line-height: 1.75;
  margin: 6px 0 10px;
}

.review-blocked p + p {
  font-size: 12px;
  line-height: 1.7;
  margin: 0 0 8px;
}

.review-blocked .review-input {
  background: #fff;
  border-color: color-mix(in srgb, var(--danger) 30%, #fff);
  flex-basis: 220px;
  min-width: 160px;
}

.review-empty-title {
  font-size: 16px;
  margin: 0 0 8px;
}

.review-muted-copy {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.8;
  margin: 0;
}

/* 审核台的闸明细表比通用 .error-table 多一列（闸名）。单独一个修饰类而不是
   改 .error-table 本身 —— 那个类还被原型两屏和视频队列用着，改基类会连坐。 */
.review-gate-table > div {
  grid-template-columns: 88px 56px 1fr;
}

@media (max-width: 820px) {
  .review-gate-table > div {
    grid-template-columns: 76px 48px 1fr;
  }
}

/* 通用 .error-table 有一条 `span:last-child { color: var(--danger) }` ——
   那张表原本只用来列错误，最后一列一律标红是对的。闸明细表不是：六行里通常
   五行是「通过」，把它们的说明也印成告警红，等于在一屏「为什么能发/为什么被拦」
   上给通过的项打上出事的颜色。这里按列把颜色收回来（选择器权重压过基类那条）。 */
.review-gate-table span.review-gate-name,
.review-gate-table span.review-gate-detail {
  color: var(--ink-2);
}

.review-gate-table > div:first-child span {
  color: var(--ink);
}

.review-gate-pass {
  color: var(--positive);
}

.review-gate-fail {
  color: var(--danger);
}

.review-gate-detail {
  color: var(--ink-2);
}

.recall-message-traces {
  display: grid;
  gap: 0;
  margin-top: 10px;
}

.recall-message-trace {
  border-bottom: 1px solid var(--line);
  padding: 12px 0;
}

.recall-message-trace:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.recall-message-trace > p {
  color: var(--ink);
  line-height: 1.75;
  margin: 0 0 7px;
  white-space: pre-wrap;
}

.recall-message-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
}

.recall-message-sources button {
  align-items: center;
  background: transparent;
  border: 0;
  color: #2563eb;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 12px;
  gap: 6px;
  padding: 2px 0;
  text-align: left;
}

.recall-message-sources button span {
  color: var(--positive);
  font-size: 8px;
}

.recall-message-sources button:disabled {
  color: var(--muted);
  cursor: default;
}

.recall-message-sources button:disabled span {
  color: var(--muted);
}

.recall-plan-layout {
  align-items: start;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(240px, 0.72fr) minmax(0, 1.65fr);
  min-width: 0;
}

.recall-plan-layout > * { min-width: 0; }
.recall-customer-operation-guide {
  margin-top: 18px;
}

.recall-customer-operation-guide ol {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.recall-customer-operation-guide .completion-inline {
  margin-top: 4px;
}
.recall-plan-message-preview {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  color: var(--ink-2);
  display: -webkit-box;
  font-size: 13px;
  line-height: 1.6;
  margin: 10px 0 0;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.recall-plan-message-preview span {
  background: var(--positive-bg);
  border-radius: 999px;
  color: var(--positive);
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  margin-right: 7px;
  padding: 2px 7px;
}

.recall-plan-message-preview.is-empty { color: var(--muted); }
.recall-plan-card-assets { align-items: center; display: flex; gap: 9px; margin-top: 10px; }
.recall-plan-card-assets small { color: var(--muted); font-size: 11px; }
.recall-plan-card-thumbnails { display: flex; }
.recall-plan-card-thumbnails img {
  background: var(--soft);
  border: 2px solid #fff;
  border-radius: 7px;
  height: 44px;
  object-fit: cover;
  width: 44px;
}
.recall-plan-card-thumbnails img + img { margin-left: -9px; }
.recall-plan-detail {
  min-width: 0;
  overflow: visible;
  position: static;
}
.recall-message-panel {
  max-width: 100%;
  min-width: 0;
  overflow: visible;
}

.recall-plan-detail p,
.recall-plan-detail small,
.recall-message-panel,
.recall-message-panel * {
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: normal;
  word-break: break-word;
}

@media (max-width: 1500px) {
  .detail-layout.recall-customer-detail-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .detail-layout.recall-customer-detail-layout > .detail-side {
    order: -1;
    position: static;
  }
}

@media (max-width: 1100px) {
  .recall-plan-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

.recall-topic-summary {
  align-items: baseline;
  background: var(--positive-wash);
  border: 1px solid var(--positive-line);
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-bottom: 10px;
  padding: 12px 14px;
}

.recall-topic-summary span,
.recall-topic-summary small { color: var(--muted); font-size: 12px; }
.recall-topic-summary b { color: var(--ink); font-size: 16px; overflow-wrap: anywhere; }

.recall-message-trace > p,
.recall-source-card,
.recall-source-card b,
.recall-source-card blockquote {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.recall-message-sources {
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
}

.recall-source-card {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid #a8a29e;
  border-radius: 9px;
  display: grid;
  gap: 8px;
  padding: 11px 12px;
}

.recall-source-card.is-fact { border-left-color: #2563eb; }
.recall-source-card.is-customer_reply { border-left-color: var(--positive); }
.recall-source-card.is-campaign { border-left-color: #d49a24; }
.recall-source-card.is-recall_plan { background: var(--soft); border-left-color: #64748b; }
.recall-source-card header { align-items: baseline; display: flex; flex-wrap: wrap; gap: 6px 10px; }
.recall-source-card header span { color: var(--muted); font-size: 12px; }
.recall-source-card header b { color: var(--ink); font-size: 13px; }
.recall-source-card small { color: var(--muted); line-height: 1.65; }
.recall-source-card blockquote { border-left: 2px solid var(--line-dark); color: var(--ink-2); margin: 0; padding-left: 10px; }
.recall-source-bricks { display: flex; flex-wrap: wrap; gap: 8px; }
.recall-source-bricks button,
.recall-source-link {
  background: var(--info) !important;
  border: 0 !important;
  border-radius: 8px;
  color: #fff !important;
  cursor: pointer;
  font-size: 12px !important;
  font-weight: 650;
  padding: 8px 12px !important;
  width: fit-content;
}

.recall-source-bricks button::before {
  content: "▦";
  display: inline-block;
  font-size: 13px;
  margin-right: 6px;
}

.recall-plan-provenance,
.recall-plan-assets {
  background: var(--info-bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding: 13px 14px;
}
.recall-plan-provenance header,
.recall-plan-assets header { display: grid; gap: 3px; }
.recall-plan-provenance header small,
.recall-plan-assets header small,
.recall-plan-provenance > p { color: var(--muted); font-size: 12px; margin: 0; }
.recall-plan-asset-grid { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.recall-plan-asset-grid a {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--ink-2);
  display: grid;
  font-size: 11px;
  gap: 5px;
  overflow: hidden;
  padding: 5px;
  text-align: center;
  text-decoration: none;
}
.recall-plan-asset-grid img { aspect-ratio: 4 / 3; border-radius: 6px; object-fit: cover; width: 100%; }

@media (max-width: 620px) {
  .recall-plan-asset-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .recall-plan-layout { grid-template-columns: minmax(0, 1fr); }
  .recall-plan-layout > div:first-child { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .recall-customer-operation-guide ol { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 620px) {
  .recall-plan-layout > div:first-child { grid-template-columns: minmax(0, 1fr); }
}

/* ── 出处面板：以积木为主（BrickFirstSources）─────────────────────────────
 *
 * 2026-08-16 第二版视觉。第一版全是白底细边框、「去改」是浅蓝文字，
 * 实机反馈「太丑了，不明显」——五张卡片长得一模一样，扫一眼分不出主次，
 * 而「另有 N 格挂的是同一批资料…」那句长文本占满整行，比积木标题还抢眼。
 *
 * 这一版的三个判断：
 *   ① **槽位码当锚点**：E08-01 这种编号是唯一能快速扫读的东西，给它实心底色
 *      和等宽字体，让眼睛沿着左边一列往下跳。
 *   ② **「去改」是主动作**，做成实心按钮；它是这一屏唯一能改到机器人的出口，
 *      跟旁边的展开箭头不是一个量级。
 *   ③ **「另有 N 格」降级成小字附注**，跟标题拉开字号和颜色差——它是解释，
 *      不是内容。
 *
 * ⚠️ 右栏很窄（`.quality-layout` 左栏钉死 520px），别排两列、别给按钮设固定宽度。
 */
.reply-source-body { display: grid; gap: 10px; margin-top: 8px; }

.reply-brick-list { display: grid; gap: 6px; }

.reply-brick-row {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  overflow: hidden;
  transition: border-color 0.12s ease;
}

.reply-brick-row:hover { border-color: var(--line-dark); }
.reply-brick-row.open { border-color: var(--info); }

.reply-brick-head { align-items: stretch; display: flex; gap: 0; }

.reply-brick-toggle {
  align-items: center;
  background: none;
  border: 0;
  cursor: pointer;
  display: flex;
  flex: 1 1 auto;
  gap: 8px;
  min-width: 0;
  padding: 9px 10px;
  text-align: left;
}

.reply-brick-toggle:hover { background: var(--soft); }

/* ① 槽位码：实心深色徽章，等宽字体。它是扫读的锚，不是装饰 */
.reply-brick-code {
  background: var(--accent);
  border-radius: 4px;
  color: #fff;
  flex: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 3px 6px;
}

.reply-brick-toggle b {
  color: var(--ink);
  flex: 1 1 auto;
  font-size: 13.5px;
  font-weight: 600;
  min-width: 0;
  overflow-wrap: break-word;
}

.reply-brick-toggle small {
  color: var(--muted);
  flex: none;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}

.reply-brick-toggle em { color: var(--muted); flex: none; font-style: normal; }

/* ② 「去改」是这一屏唯一能改到机器人的出口，做成实心主按钮 */
.reply-brick-open {
  background: var(--info);
  border: 0;
  color: #fff;
  cursor: pointer;
  flex: none;
  font-size: 12.5px;
  font-weight: 600;
  padding: 0 14px;
  white-space: nowrap;
}

.reply-brick-open:hover { background: #24509e; }

/* ③ 「另有 N 格」是解释不是内容，降级成小字附注 */
.reply-brick-alias {
  border-top: 1px dashed var(--line-soft);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
  margin: 0;
  padding: 6px 10px;
}

/* 展开后的依据资料：换个底色，一眼看出是挂在上面那格下面的 */
.reply-brick-deps {
  background: var(--soft);
  border-top: 1px solid var(--line-soft);
  display: grid;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 10px;
}

.reply-source-orphans { display: grid; gap: 4px; }

/* 质检屏：「同时更正知识积木」勾选。
   默认不勾（语气类修正写进知识库是污染），所以样式要克制——
   它是一个附加选项，不能抢「回复可能有错」那个主按钮的注意力。 */
.quality-also-fix-brick {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 10px 12px;
  margin: 4px 0 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1.5;
}
.quality-also-fix-brick input { margin-top: 3px; flex: none; }
.quality-also-fix-brick small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

/* 出处面板：「还有 N 个积木」展开入口。
   摆 3 个是取舍，剩下的必须能看见——不是装饰，是 brick-digest 的契约要求。 */
.reply-brick-more {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 8px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: none;
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
}
.reply-brick-more:hover { color: var(--info); border-color: var(--info); }

/* 出处面板：整轮都没有相关资料时的提示。
   出处记的是「喂了什么」不是「用了什么」，低分资料是凑篇幅进去的——
   不说明白，店长会以为是归属算错了，然后去改一个根本没被用到的积木。 */
.reply-brick-weak {
  margin: 0 0 8px;
  padding: 10px 12px;
  border-left: 3px solid var(--warning);
  border-radius: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

/* 「改成这句，立即上线」点不了时的原因。
   四个禁用条件里有一个（客户在这句之前没说过话）用户完全看不见，
   不说清楚他会反复点一个永远不会亮的按钮，然后以为功能坏了。 */
.quality-flag-blocked {
  align-self: center;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  max-width: 32ch;
}

/* 出处面板：这一轮没有相关度记录时的说明。
   没分数就排不出主次，摆三个排不出主次的东西比不摆更糟——它假装自己是个结论。 */
.reply-brick-unscored {
  padding: 12px 14px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: var(--surface);
}
.reply-brick-unscored p {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}
.reply-brick-unscored b { color: var(--ink); }
.reply-brick-unscored button {
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: none;
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
}
.reply-brick-unscored button:hover { color: var(--info); border-color: var(--info); }

/* 出处面板：相关度是事后补算的那一态。
   真账（模型当时就按这个排的）和补算（事后重算、模型当时没按它排）
   必须是两句话——混成一句就是把推测说成事实。 */
.reply-brick-backfilled {
  margin: 0 0 8px;
  padding: 10px 12px;
  border-left: 3px solid var(--line);
  border-radius: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}
.reply-brick-backfilled b { color: var(--ink); }

/* 出处面板：回复里能逐字对上原文的那几份（T5-5）。摆在积木列表上面、用实线，
   与「调取了」的那一堆在视觉上分开——店长先看到的应当是这句话真正依据的东西。 */
.reply-source-cited {
  margin: 0 0 10px;
  padding: 10px 12px;
  border-left: 3px solid var(--info);
  border-radius: 4px;
  background: var(--surface);
}
.reply-source-cited > p {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}
.reply-source-cited > p b { color: var(--ink); }
.reply-source-cited-none {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}
.reply-source-cited-none b { color: var(--ink); }

/* ══════════════════════════════════════════════════════════════════════
 * 今日总览（app/wb/overview-screen.tsx）
 *
 * 布局照《水流 AI 超级员工》与那两张数据分析参考图：白底卡、大留白、
 * 数字比标签大一档。**全部走 token**，一个硬编码颜色都不留——这一屏是
 * 2026-08-18 紫色改版的样板间，它自己带硬编码色就没法当基准了。
 * ═════════════════════════════════════════════════════════════════════ */

.ov { display: flex; flex-direction: column; gap: 16px; }

.ov-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.ov-hi { margin: 0 0 4px; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.ov-sub { margin: 0; font-size: 13px; color: var(--muted); }

/* 三档时间切换器。用 button 不用 tab role：它切的是同一块内容的口径，
   不是切换视图，读屏用 aria-pressed 表达「按下了哪一档」就够。 */
.ov-seg {
  display: flex;
  gap: 2px;
  padding: 2px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
}
.ov-seg button {
  border: 0;
  background: none;
  padding: 5px 13px;
  border-radius: var(--radius-xs);
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  transition: background var(--speed) var(--ease-out), color var(--speed) var(--ease-out);
}
.ov-seg button:hover { color: var(--ink); }
.ov-seg button.on { background: var(--accent); color: #fff; font-weight: 600; }

.ov-row { display: grid; gap: 14px; }
.ov-row-3 { grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); }
.ov-row-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.ov-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow-1);
  min-width: 0;
}
.ov-card h3 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 3px;
  font-size: 15px;
  font-weight: 650;
  color: var(--ink);
}
.ov-cap { margin: 0 0 14px; font-size: 12px; color: var(--muted); line-height: 1.6; }
/* 卡底的口径说明。**不是装饰**：它解释「为什么这一格是 —」「为什么这里没有
   播放量」，删掉它这一屏就从「照实说」退回「看起来缺了点什么」。 */
.ov-foot {
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.6;
}
.ov-more {
  border: 0;
  background: none;
  padding: 0;
  font-size: 12px;
  color: var(--accent);
  cursor: pointer;
  white-space: nowrap;
}
.ov-more:hover { text-decoration: underline; }

.ov-empty { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.7; }
.ov-bad { color: var(--danger); }
.ov-linkish {
  border: 0; background: none; padding: 0 0 0 4px;
  font-size: 13px; color: var(--accent); cursor: pointer; text-decoration: underline;
}

/* ── 漏斗 ─────────────────────────────────────────────────────────── */
.ov-funnel { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.ov-funnel li {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) 52px;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
}
.ov-f-label { color: var(--ink-2); }
.ov-f-bar { display: block; height: 7px; border-radius: 20px; background: var(--accent-soft); overflow: hidden; }
.ov-f-bar i { display: block; height: 100%; border-radius: 20px; background: var(--accent); }
.ov-f-num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 13px; color: var(--ink); }
/* 查不到的那一级：条整个不画，数字灰掉。**保留这一行不删** ——
   删掉它漏斗就只剩四级，而店长会以为「约了到店」就是终点。 */
.ov-funnel li.off .ov-f-label,
.ov-funnel li.off .ov-f-num { color: var(--muted); }
.ov-funnel li.off .ov-f-bar { background: var(--line-soft); }

/* ── 私信触达 ─────────────────────────────────────────────────────── */
.ov-touch { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ov-touch li { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; }
.ov-t-name { color: var(--ink); font-weight: 600; }
.ov-t-nums { color: var(--muted); display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
.ov-t-nums b { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 13.5px; color: var(--ink); font-weight: 600; }
.ov-t-sep { color: var(--line-dark); }
.ov-t-rate {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 20px;
  background: var(--positive-bg);
  color: var(--positive);
  font-weight: 600;
  margin-left: 4px;
}
.ov-t-skip { font-size: 11.5px; color: var(--muted); }

/* ── 回复质量五维 ─────────────────────────────────────────────────── */
.ov-dims { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.ov-dims li {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
}
.ov-d-label { color: var(--ink-2); }
.ov-d-bar { display: block; height: 7px; border-radius: 20px; background: var(--positive-wash); overflow: hidden; }
.ov-d-bar i { display: block; height: 100%; border-radius: 20px; background: var(--positive); }
.ov-d-num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 13px; color: var(--ink); }

/* ── 需要你处理 ───────────────────────────────────────────────────── */
.ov-todo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.ov-t {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-radius: var(--radius-s);
  background: var(--soft);
  border: 1px solid var(--line-soft);
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.5;
}
.ov-t > span { min-width: 0; }
.ov-t b { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink); font-size: 13.5px; }
.ov-t-tag {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 10.5px;
  padding: 2px 7px;
  border-radius: var(--radius-xs);
  font-weight: 600;
  flex: 0 0 auto;
}
.ov-t-tag.hi { background: var(--danger-bg); color: var(--danger); }
.ov-t-tag.md { background: var(--warning-bg); color: var(--warning); }
.ov-t-tag.lo { background: var(--positive-bg); color: var(--positive); }
.ov-t > button {
  margin-left: auto;
  flex: 0 0 auto;
  border: 0;
  background: none;
  padding: 0;
  font-size: 12px;
  color: var(--accent);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.ov-t > button:hover { text-decoration: underline; }

/* ── 视频产出三格 ─────────────────────────────────────────────────── */
.ov-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ov-stats > div {
  background: var(--soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-s);
  padding: 11px 12px;
  min-width: 0;
}
.ov-stats b {
  display: block;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  line-height: 1.2;
}
.ov-stats span { display: block; margin-top: 2px; font-size: 11.5px; color: var(--muted); }

@media (max-width: 640px) {
  .ov-head { align-items: flex-start; }
  .ov-stats { grid-template-columns: 1fr; }
}

/* ============================================================================
 * Windows 客户端签到（app/wb/client-checkin.tsx）。
 * 只有在客户端壳里才会渲染出来，浏览器里这几个选择器一个都不会命中。
 * ========================================================================== */

.client-banner {
  border-bottom: 1px solid var(--brass-line);
  font-size: 13px;
  padding: 10px 16px;
  position: sticky;
  top: 0;
  z-index: 99; /* 比代登录黄条低一档：那条说的是「你不是你」，更该压在最上面 */
}

.client-banner-info {
  background: var(--info-bg);
  color: var(--info);
}

.client-banner-warn {
  background: var(--warning-bg);
  color: var(--warning);
}

/* 停用是终态：整屏挡住。此时会话已经被登出，后面那些屏本来也取不到数了 */
.client-blocked {
  align-items: center;
  background: var(--canvas);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 24px;
  position: fixed;
  z-index: 1000;
}

.client-blocked-card {
  background: #fff;
  border: 1px solid var(--brass-line);
  border-radius: var(--radius-md, 12px);
  box-shadow: var(--shadow-2);
  max-width: 460px;
  padding: 28px;
}

.client-blocked-card h1 {
  color: var(--ink);
  font-size: 20px;
  margin: 0 0 12px;
}

.client-blocked-card p {
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.7;
  margin: 0 0 10px;
}

.client-blocked-hint {
  color: var(--muted);
  font-size: 13px;
}

/* 屏 2.1.1：漏斗五格全 0 时的解释，摆在零的**正上方**。
   同样的话原本写在右边那张卡的 .gap-note 里，离得太远没人看——
   2026-08-19 夏伟因此以为数据没同步（实际是机器人发了 46 条、客户零回复）。 */
.funnel-zero-note {
  margin: 0 0 12px;
  padding: 11px 14px;
  border-left: 3px solid var(--info);
  border-radius: 6px;
  background: var(--info-bg);
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.65;
}
.funnel-zero-note b { color: var(--ink); }
/* 一条都没发出 = 该怀疑掉登录了，用告警色跟「发了没人理」区分开 */
.funnel-zero-note.alarm {
  border-left-color: var(--warning);
  background: var(--warning-bg);
}

/* ── 页头冻结（2026-08-21 企业大脑，08-25 推全站）────────────────────────────────
 * 全景是本产品最长的一屏（待办 + 两面积木墙 + 折叠明细）。滚到墙中间时，
 * 「我在哪一屏、这些数是什么时候取的」全都看不见了；而取数时点原来在屏内
 * **三处**各渲染一遍，报的还是同一个值——同一件事说很多遍，滚下去一遍也看不见。
 *
 * 现在：页头连同取数时点一起钉在顶上，滚到哪儿都在；屏内第一处重复撤掉，
 * 积木上逐块的「N 天没更新」也撤掉（太琐碎，反馈原话）。
 *
 * 2026-08-25 反馈「所有页面都要参考企业大脑」，改成全屏都钉。当初只给
 * .module-brain 是怕爆炸半径（这个 header 是 46 屏共用的外壳），现在的判据是：
 * 视频那几屏走 VideoWorkbenchShell 那一支、自带 workHead，压根渲染不到这个
 * header，所以钉住它影响不到视频屏的排版。
 *
 * 背景必须实心：页头默认 transparent，钉住之后底下的积木会从它身后穿过去。 */
.app-header.sticky-head {
  background: var(--canvas);
  box-shadow: 0 6px 14px -12px rgba(23, 20, 15, .55);
  padding-bottom: 14px;
  position: sticky;
  top: 0;
  z-index: 30;
}

/* 时点与刷新：跟「预计用时」同一档小字，但用等宽数字——它每次刷新都在变，
   比例字体会让整行左右抖（同 .nav-count 的理由）。 */
.app-header-stamp {
  display: block;
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
}

/* ── 页头折叠（2026-08-21 反馈「上面的内容太多」）────────────────────────
 * 形状照飞书表格右上角那颗「折叠工具栏」。
 *
 * **收起后留什么**：面包屑 + 大标题 + 取数时点。这三样回答的是
 * 「我在哪一屏、数据什么时候取的」——滚到哪儿都得看得见。
 * **收起什么**：说明段和「预计用时 / 本页记录」，读一次就够的东西。
 *
 * 四个模块都有。冻结（sticky-head）2026-08-25 起也是全屏都开，但两件事仍互相
 * 独立：折叠省的是纵向空间，冻结解的是滚下去看不见。
 */
.app-header {
  position: relative;
}

.head-fold {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  height: 26px;
  justify-content: center;
  /* 贴右上角，和大标题第一行齐平；absolute 是为了不参与 grid、不撑高页头 */
  position: absolute;
  right: 28px;
  top: 30px;
  width: 30px;
}

.head-fold:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.head-fold span {
  display: block;
  font-size: 13px;
  line-height: 1;
  /* ⌃ 这个字形本身偏上，往下压 1px 才在框里居中 */
  transform: translateY(1px);
  transition: transform 140ms ease;
}

/* 收起时箭头翻下来——方向即语义：朝下＝点了会展开 */
.app-header.head-collapsed .head-fold span {
  transform: translateY(-1px) rotate(180deg);
}

/* 收起的两块。用 display:none 而不是高度动画：页头是 sticky 的，
   动画期间高度在变会让底下的正文跟着抖，比没有过渡难看得多。 */
.app-header.head-collapsed > div > p,
.app-header.head-collapsed > div > small {
  display: none;
}

/* 收起后页头矮了一截，底部留白跟着收，否则标题和正文之间空一大块 */
.app-header.head-collapsed {
  padding-bottom: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .head-fold span {
    transition: none;
  }
}

/* ── 接待聚合台（app/wb/reception-console.tsx）────────────────────────────────
 *
 * 三栏：左会话 / 中对话原文 / 右 AI 面板。形状抄自门店工作台 V6 原型的 2.1.0，
 * 但**四个评分格里有两个是空的**——库里没有成交概率和紧急程度那两列，
 * 判定写在 lib/workbench/reception-panel.ts，那里逐列核对过。
 *
 * 复用已有的 .conversation-list / .conversation-item / .chat-transcript / .chat-line，
 * 不另起一套气泡样式：屏 2.1.2 已经用它们渲染同一种东西，两套样式会当场分叉。
 */
.agg-console {
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr) 240px;
  overflow: hidden;
  /*
   * 整块给一个固定高度，三栏各自在里面滚（2026-08-24 反馈：
   * 「聊天记录可以上下滑动，滑动时左侧的人员列表和右侧分析不要动」）。
   *
   * 在这之前只有左栏列表有自己的 max-height，中栏对话是**跟着整页滚**的：
   * 往下读一段长对话，左边的人员列表和右边的分析一起滚出视野——而那两栏正是
   * 「我在看谁 / 这段该怎么判」的锚点，读到一半失去锚点就得往回滚一次。
   *
   * 高度用 vh 而不是写死 px：这一屏上面还有面包屑、页头、banner 和操作要点，
   * 写死高度会在小屏笔记本上把整块顶到屏幕外面。72vh 是「上面那堆还看得见、
   * 下面这块又够读十来轮」的折中；760px 上限防超宽屏上一栏拉到两米高。
   */
  height: min(72vh, 760px);
}

@media (max-width: 1060px) {
  /* ⚠️ 必须 !important：栏宽由 style 属性内联（可拖拽，见 use-pane-width.ts），
     内联优先级高于这里，不加就会在窄屏上仍按四列排、整个错位。 */
  .agg-console { grid-template-columns: 1fr !important; }
  /* 窄屏三栏变竖排，此时**不能**再限高：三栏叠起来塞进 72vh，每栏只剩两百来 px，
     还不如整页滚（手机上本来就是整页滚的读法）。 */
  .agg-console { height: auto; }
}

/* 每栏 = 固定的头 + 自己滚的身子。min-height:0 是关键：
   grid/flex 子项默认 min-height:auto，不置 0 的话内容会把栏撑高、
   撑破外面那个 height，滚动条又回到整页上去。 */
.agg-col {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}
.agg-col + .agg-col { border-left: 1px solid var(--line); }

@media (max-width: 1060px) {
  .agg-col + .agg-col { border-left: 0; border-top: 1px solid var(--line); }
}

.agg-col-head {
  align-items: center;
  background: var(--soft);
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  display: flex;
  font-size: 11.5px;
  font-weight: 600;
  gap: 6px;
  padding: 7px 10px;
}

.agg-col-head .spacer { flex: 1; }

/* 三栏的身子各自滚。overscroll-behavior: contain —— 中栏读到底之后
   继续滚不要把整页带着往下窜（那会让人以为自己点错了地方）。 */
.agg-col-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 9px;
}

@media (max-width: 1060px) {
  /* 竖排时交回整页滚，见上面 .agg-console 那段 */
  .agg-col-body { overflow-y: visible; }
}

/*
 * 左栏列表交给外面那层（.agg-col-body）滚，自己不再限高。
 *
 * 两层都能滚会出「滚到列表底 → 再滚才带动外层」的双层滚动条，
 * 而店长感觉是「卡了一下」。窄屏（竖排）下外层不滚，这里的 460px 兜底仍要留着。
 */
.agg-console .conversation-list { max-height: none; overflow-y: visible; }

@media (max-width: 1060px) {
  .agg-console .conversation-list { max-height: 460px; overflow-y: auto; }
}

/*
 * AI 面板的格子。空格子**必须**显示原因（--muted 那行 small），
 * 只留个灰格子不说为什么，跟摆假数字一样坏：看的人分不清是"今天恰好没有"
 * 还是"这东西根本没有"。理由写在 lib/workbench/reception-panel.ts 头注。
 */
.ai-cells {
  display: grid;
  gap: 7px;
  grid-template-columns: 1fr 1fr;
}

.ai-cell {
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
  display: grid;
  gap: 2px;
  padding: 7px 8px;
}

.ai-cell dt { color: var(--muted); font-size: 10.5px; }
.ai-cell dd { font-size: 13px; font-weight: 650; margin: 0; }
.ai-cell small { color: var(--muted); font-size: 10.5px; line-height: 1.45; }

.ai-cell.empty { background: transparent; border-style: dashed; }
.ai-cell.empty dd { color: var(--muted); font-weight: 500; }

.stage-nodes { display: grid; gap: 5px; margin-top: 10px; }

.stage-node {
  align-items: center;
  color: var(--muted);
  display: flex;
  font-size: 12px;
  gap: 7px;
}

.stage-node i {
  border: 1.5px solid var(--line-dark);
  border-radius: 50%;
  flex: none;
  height: 8px;
  width: 8px;
}

.stage-node.done { color: var(--ink-2); }
.stage-node.done i { background: var(--positive); border-color: var(--positive); }
.stage-node.now { color: var(--accent); font-weight: 600; }
.stage-node.now i { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/*
 * 演练对话那一屏顶上的横幅。**刻意用 warning 而不是 info**：
 * 这块内容最大的风险不是没人看，是被当成真客户拿去改对客话术
 * （2026-08-05 就为「陪练混进真客户列表」修过一次）。横幅要拦得住手。
 */
.drill-banner {
  background: var(--warning-bg);
  border: 1px solid var(--brass-line);
  border-radius: var(--radius-s);
  color: var(--ink-2);
  display: grid;
  font-size: 12.5px;
  gap: 3px;
  line-height: 1.6;
  padding: 10px 12px;
}

.drill-banner b { color: var(--warning); font-size: 13px; }

/* 结构性空态：说清"为什么是空的"，不是白屏 */
.empty-reason {
  background: var(--soft);
  border: 1px dashed var(--line-dark);
  border-radius: var(--radius-s);
  display: grid;
  gap: 4px;
  padding: 14px;
}

.empty-reason b { font-size: 13.5px; }
.empty-reason span { color: var(--muted); font-size: 12.5px; line-height: 1.65; }

/* ══ 2026-08-21 界面反馈四处 ══════════════════════════════════════════ */

/* ── ① 两面墙的折叠箭头（反馈：「不明显」）────────────────────────────
 * 原来是往绿字后面挂一个裸的 " ⌄" 字符，小、无边框、跟旁边的数字糊在一起。
 * 页头那颗折叠按钮已经是「带框的箭头」，这里对齐同一形状——同一个动作
 * 在一屏里有两种长相，本身就是要人多认一次。 */
.knowledge-panorama-zone > summary > header strong::after {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  content: "⌃";
  display: inline-flex;
  height: 26px;
  justify-content: center;
  /* 与绿字拉开，别贴着数字 */
  margin-left: 10px;
  /* ⌃ 字形偏上，压 1px 才在框里居中 */
  padding-bottom: 1px;
  transform: rotate(180deg);
  vertical-align: middle;
  width: 30px;
}

.knowledge-panorama-zone[open] > summary > header strong::after {
  transform: none;
}

.knowledge-panorama-zone > summary:hover > header strong::after {
  border-color: var(--ink);
  color: var(--ink);
}

/* ── ② 指标详情里那个 <dl>（反馈：「展现形式不好看」）──────────────────
 * 这两个类名一直写着、但**从来没有对应的 CSS**，浏览器就按默认的
 * definition list 渲染：dd 带 40px 缩进、dt/dd 各占一行、字号一样大。
 * 改成两列键值：标签小字灰色、值正常字号，同 .kv 那套的观感。 */
.source-detail-list {
  display: grid;
  gap: 10px 24px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin: 12px 0 0;
}

.source-detail-list > div {
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  padding: 9px 12px;
}

.source-detail-list dt {
  color: var(--muted);
  font-size: 11.5px;
  letter-spacing: .02em;
  margin: 0 0 3px;
}

.source-detail-list dd {
  /* 默认 dd 有 40px 左缩进，正是截图里那个歪掉的对齐 */
  font-size: 14px;
  font-weight: 600;
  margin: 0;
}

/* ── ③ 原件目录的筛选区（反馈：「和整体界面都不搭」）────────────────────
 * 同样是「类名写了、样式没写」：搜索框和两个 select 是浏览器原生控件，
 * 高度、圆角、边框跟本产品其它输入框全不一样，还挤在一行里换行乱折。 */
.source-catalog-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.source-catalog-toolbar input {
  flex: 1 1 260px;
  min-width: 0;
}

.source-catalog-toolbar input,
.source-catalog-toolbar select,
.source-catalog-filter-row select {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  height: 34px;
  padding: 0 11px;
}

.source-catalog-toolbar input:focus-visible,
.source-catalog-toolbar select:focus-visible,
.source-catalog-filter-row select:focus-visible {
  border-color: var(--ink);
  outline: none;
}

.source-catalog-filter-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

/* 格式那一排做成一组分段按钮：它们是互斥的单选，不该长得像 8 个独立按钮 */
.source-format-tabs {
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: 999px;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
}

.source-format-tabs button {
  background: none;
  border: 0;
  border-radius: 999px;
  color: var(--muted);
  cursor: pointer;
  font-size: 12.5px;
  padding: 4px 11px;
}

.source-format-tabs button:hover {
  color: var(--ink);
}

.source-format-tabs button.active {
  background: var(--ink);
  color: #fff;
  font-weight: 600;
}

/* ── ④ 屏说明按分句断行（反馈：一句话被劈成两半）──────────────────────
 * 每个分句各占一行。不含分号的说明只有一个 span，表现与改前一致。 */
.app-header .summary-clause {
  display: block;
}

/* ── 月度实战手册（4.1.7）──────────────────────────────────────────────
 * 这一屏当前的产出物是**一张缺口清单**，不是一份册子——判据见
 * prototype-brain.tsx 的 BrainPlaybookScreen 头注。所以视觉重心放在
 * 「哪几节缺料」上：缺料那几张左侧留一道红杠，扫一眼就知道要盯哪几个。 */
.brain-playbook-why {
  color: var(--ink-2, inherit);
  line-height: 1.7;
  margin: 8px 0 0;
  max-width: 70ch;
}

.playbook-sections {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  margin-top: 12px;
}

.playbook-section {
  background: var(--canvas);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-dark, var(--line));
  border-radius: var(--radius-s);
  padding: 13px 15px;
}

/* 状态即颜色：缺料的那几张要能一眼挑出来，不必读完标签 */
.playbook-section.state-ready { border-left-color: var(--positive); }
.playbook-section.state-thin { border-left-color: var(--warning); }
.playbook-section.state-blocked { border-left-color: var(--danger); }

.playbook-section > header {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.playbook-section > header b { font-size: 15px; }

.playbook-what {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
  margin: 6px 0 10px;
}

.playbook-section dl {
  display: grid;
  gap: 8px;
  margin: 0;
}

.playbook-section dt {
  color: var(--muted);
  font-size: 11.5px;
  margin-bottom: 2px;
}

.playbook-section dd {
  /* 默认 dd 有 40px 缩进 */
  font-size: 13px;
  line-height: 1.6;
  margin: 0;
}

.playbook-split {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  margin-top: 12px;
}

.playbook-split > div {
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  padding: 13px 15px;
}

.playbook-split b { display: block; font-size: 14px; margin-bottom: 4px; }
.playbook-split span { color: var(--muted); font-size: 13px; line-height: 1.6; }

/* 手册每节里那条示意：要一眼看出是**举例**，不是本店真实数据。
   浅底 + 左侧竖线 + 一个「示意」小标，同引文的读法。 */
.playbook-sample {
  background: var(--surface);
  border-left: 2px solid var(--line-dark, var(--line));
  border-radius: 0 var(--radius-xs, 6px) var(--radius-xs, 6px) 0;
  margin: 8px 0 10px;
  padding: 9px 12px;
}

.playbook-sample-tag {
  color: var(--muted);
  display: inline-block;
  font-size: 10.5px;
  letter-spacing: .06em;
  margin-bottom: 4px;
}

.playbook-sample p {
  color: var(--ink-2, inherit);
  font-size: 13px;
  line-height: 1.65;
  margin: 0;
}

/* 聚合台右栏的两个页签（app/wb/reception-console.tsx）
 *
 * 「这段怎么看」/「客户档案」是**同一个位置切换**，不是上下并列——抄自亿销云
 * 聚合聊天右栏（AI 智能回复 ↔ 好友信息）。理由在窄栏里很实在：240px 塞两组内容，
 * 两组都读不下去。默认落在「这段怎么看」，因为打开这一屏的人要回答的是
 * 「答得对不对」，档案是他起疑之后才查的。 */
.pane-tab {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  padding: 0 0 4px;
}

.pane-tab + .pane-tab { margin-left: 12px; }
.pane-tab:hover { color: var(--ink); }
.pane-tab.on { border-bottom-color: var(--accent); color: var(--accent); }

/* ══ 微信原生风格的聊天正文（app/wb/reception-console.tsx）══════════════
 *
 * 对方在左（白气泡）、我方在右（微信绿），各带头像，灰底。
 *
 * ⚠️ 绿色写死 #95ec69（微信气泡色），**不走 --accent**：这一块的全部意义就是
 * "看起来跟微信一样"，套上设计系统的紫色主色就不像了。这是本仓唯一一处
 * 允许绕开主色的地方，理由写在这儿，别顺手"统一"掉。
 *
 * 与屏 2.1.2 的 `.chat-line` 并存是有意的：那一套上下堆叠、全部左对齐，
 * 因为它要让人逐句点选去改话术，左右分列会让点选区忽左忽右。
 */
.wx-thread {
  background: #ededed;
  border-radius: var(--radius-s);
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px 12px;
}

.wx-row { display: flex; gap: 8px; align-items: flex-start; }
.wx-row.us { flex-direction: row-reverse; }

.wx-avatar {
  background: var(--line-dark);
  border-radius: 4px;
  color: #fff;
  display: grid;
  flex: none;
  font-size: 12px;
  font-style: normal;
  height: 32px;
  place-items: center;
  width: 32px;
}
.wx-row.us .wx-avatar { background: var(--accent); }

.wx-bubble {
  border-radius: 5px;
  font-size: 13.5px;
  line-height: 1.6;
  max-width: 74%;
  padding: 9px 12px;
  position: relative;
  white-space: pre-wrap;
  word-break: break-word;
}

/* 气泡尖角。用边框三角而不是伪元素旋转方块——旋转在缩放时会露出半像素缝 */
.wx-bubble::before {
  border: 6px solid transparent;
  content: "";
  position: absolute;
  top: 10px;
}

.wx-row.them .wx-bubble { background: #fff; color: #1a1a1a; }
.wx-row.them .wx-bubble::before { border-right-color: #fff; left: -12px; }

.wx-row.us .wx-bubble { background: #95ec69; color: #1a1a1a; }
.wx-row.us .wx-bubble::before { border-left-color: #95ec69; right: -12px; }

/* 谁在说话，视觉上靠左右分列表达；这一句只给屏幕阅读器，不占版面 */
.wx-sr {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* 暗色下微信自己也是深灰底 + 深灰气泡，绿气泡保持绿 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .wx-thread { background: #1b1b1b; }
  :root:not([data-theme="light"]) .wx-row.them .wx-bubble { background: #2c2c2c; color: #e6e6e6; }
  :root:not([data-theme="light"]) .wx-row.them .wx-bubble::before { border-right-color: #2c2c2c; }
}
:root[data-theme="dark"] .wx-thread { background: #1b1b1b; }
:root[data-theme="dark"] .wx-row.them .wx-bubble { background: #2c2c2c; color: #e6e6e6; }
:root[data-theme="dark"] .wx-row.them .wx-bubble::before { border-right-color: #2c2c2c; }

/* ══ 右栏：四维卡 + 横向阶段条（形状抄自亿销云）════════════════════════ */
.ai-cells { grid-template-columns: 1fr 1fr; }

.ai-cell {
  border-top: 3px solid var(--accent);
  gap: 3px;
  padding: 9px 10px 10px;
  text-align: center;
}
.ai-cell dt { font-size: 11px; }
.ai-cell dd { font-size: 17px; letter-spacing: -0.01em; line-height: 1.25; }
.ai-cell small { font-size: 10.5px; }

/* 算不出的那几格：虚线 + 灰顶条。颜色由「算不算得出来」决定，不由好坏决定 */
.ai-cell.empty { border-top-color: var(--line-dark); border-top-style: dashed; }
.ai-cell.empty dd { font-size: 14px; }

/*
 * 「旅程位置」六步竖向时间线（2026-08-24 换掉原来那条 .stage-track 四节点横条，
 * 那套连同 reception-panel.ts 的 STAGE_NODES 一起删了——没人用的样式留着，
 * 下一个人会以为还有一处在用它）。
 *
 * 换竖排的理由：每一步现在要带**日期时间 + 凭哪句话判的**，两行字。
 * 240px 宽摆六格横排，每格只剩 36px，塞不进。竖排一行一步正好。
 */
.journey-track { margin-top: 12px; }
.journey-h { color: var(--muted); font-size: 11.5px; font-weight: 600; }

.journey-track ol {
  display: grid;
  gap: 0;
  margin-top: 8px;
}

/* 一行 = 左边一颗点 + 右边两行字。点那一列固定 14px，
   竖线画在点的下面（最后一步不画）。 */
.journey-track li {
  display: grid;
  gap: 8px;
  grid-template-columns: 14px minmax(0, 1fr);
  padding-bottom: 10px;
  position: relative;
}
.journey-track li:last-child { padding-bottom: 0; }

.journey-track li:not(:last-child)::before {
  background: var(--line);
  content: "";
  left: 6px;
  position: absolute;
  top: 12px;
  bottom: 0;
  width: 2px;
}
/* 走过的那几段连线跟着变绿：一眼看出走到哪儿断的 */
.journey-track li.done:not(:last-child)::before { background: var(--positive); }

.journey-track li i {
  background: var(--surface);
  border: 2px solid var(--line-dark);
  border-radius: 50%;
  height: 10px;
  margin-top: 4px;
  position: relative;
  width: 10px;
  z-index: 1;
}
.journey-track li b {
  align-items: baseline;
  display: flex;
  font-size: 12.5px;
  font-weight: 650;
  gap: 6px;
}
.journey-track li small {
  color: var(--muted);
  display: block;
  font-size: 11px;
  line-height: 1.5;
}

.journey-track li.done i { background: var(--positive); border-color: var(--positive); }
.journey-track li.done b { color: var(--ink-2); }
.journey-track li.now i { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.journey-track li.now b { color: var(--accent); }
.journey-track li.todo b { color: var(--muted); font-weight: 600; }

.journey-now {
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  color: var(--accent);
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
  padding: 0 5px;
}

/*
 * 「已到店」那一格：库里压根不记这件事（nodata），跟「还没走到」（todo）
 * **必须**长得不一样——画成同一个空心点，店长会一直等一个永远不会亮的点。
 * 虚线边框沿用 .ai-cell.empty 那条既有约定：虚线 = 这东西没有数据源。
 */
.journey-track li.nodata i {
  background: transparent;
  border-color: var(--line-dark);
  border-style: dashed;
}
.journey-track li.nodata b { color: var(--muted); font-weight: 600; }
.journey-gap { color: var(--muted); }

/* ── 回复速度 / 引用到的知识点 ─────────────────────────────────────── */

.latency-block { margin-top: 14px; }
.latency-block .ai-cells { margin-top: 8px; }

.cited-list {
  display: grid;
  gap: 6px;
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}
.cited-list li {
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
  display: grid;
  gap: 2px;
  padding: 7px 8px;
}
.cited-list li b { font-size: 12px; font-weight: 650; }
.cited-list li span { color: var(--muted); font-size: 10.5px; }
.cited-list li em {
  color: var(--accent);
  font-size: 10.5px;
  font-style: normal;
  font-weight: 600;
}

/* ══ 屏正文顶上的可折叠「操作要点」（app/wb/screen-guide.tsx）════════════ */
.screen-guide {
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  margin-bottom: 12px;
  padding: 0;
}

.screen-guide > summary {
  align-items: center;
  color: var(--ink-2);
  cursor: pointer;
  display: flex;
  font-size: 13px;
  font-weight: 650;
  gap: 8px;
  list-style: none;
  padding: 10px 13px;
}
.screen-guide > summary::-webkit-details-marker { display: none; }

/* 折叠指示：收起 ▸ / 展开 ▾。不用图标字体，避免多一份资源 */
.screen-guide > summary::before {
  color: var(--line-dark);
  content: "▸";
  font-size: 10px;
  transition: transform 140ms;
}
.screen-guide[open] > summary::before { transform: rotate(90deg); }
.screen-guide > summary span { color: var(--muted); font-size: 11.5px; font-weight: 500; }

.screen-guide ol {
  display: grid;
  gap: 7px;
  padding: 2px 14px 12px 14px;
}
.screen-guide ol li { align-items: baseline; display: flex; gap: 8px; }
.screen-guide ol li i {
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: 50%;
  color: var(--accent);
  display: grid;
  flex: none;
  font-size: 10.5px;
  font-style: normal;
  height: 17px;
  place-items: center;
  width: 17px;
}
.screen-guide ol li span { color: var(--ink-2); font-size: 12.5px; line-height: 1.55; }

.screen-guide-done {
  border-top: 1px solid var(--line-soft);
  display: grid;
  gap: 3px;
  padding: 9px 14px 11px;
}
.screen-guide-done b { color: var(--muted); font-size: 11.5px; }
.screen-guide-done span { color: var(--ink-2); font-size: 12px; line-height: 1.55; }

/* 微信的时间分隔：居中一行灰字，不给每条消息都标时间。
 * 规则（第一条 / 跨天 / 隔 5 分钟以上）在 lib/workbench/chat-time.ts。 */
.wx-group { display: grid; gap: 10px; }
.wx-time {
  color: var(--muted);
  font-size: 11.5px;
  margin: 2px 0;
  text-align: center;
}

/* 被错记成客户消息的系统内容。灰掉 + 斜体，一眼看出「这不是人说的话」。
 * 原文不渲染（见 lib/workbench/system-leak.ts）——渲染出来就是泄漏本身。 */
.wx-bubble.leaked {
  background: transparent;
  border: 1px dashed var(--line-dark);
  color: var(--muted);
  font-size: 12px;
  font-style: italic;
}
.wx-bubble.leaked::before { display: none; }

/* 聚合台右栏的拖拽条（app/wb/use-pane-width.ts）。
 * 常态几乎看不见，指上去才显出主色——它是调节件不是分隔线，
 * 常显一道竖杠会把三栏读成四栏。 */
/*
 * 栏间拖拽条。2026-08-24 起**每两栏之间都有一根**（此前只有最右那一根），
 * 所以它同时承担了「分隔线」这个职责——`.agg-col + .agg-col` 那条 border 规则
 * 现在一次都不命中了（栏与栏之间隔着这根条，不再相邻）。
 *
 * 静止时只画中间 1px，跟原来的分隔线一样细；6px 是**热区**不是视觉宽度。
 * 直接把 6px 全铺成 --line 的话，一屏里三根 6px 灰带比内容还抢眼。
 */
.agg-resizer {
  cursor: col-resize;
  position: relative;
  touch-action: none;
}
.agg-resizer::before {
  background: var(--line);
  content: "";
  inset: 0 auto 0 50%;
  position: absolute;
  transition: background 120ms, width 120ms;
  transform: translateX(-50%);
  width: 1px;
}
.agg-resizer:hover::before,
.agg-resizer:focus-visible::before {
  background: var(--accent);
  width: 3px;
}

/* 拖拽热区比视觉宽度再大一圈：6px 的条鼠标很难对准 */
.agg-resizer::after {
  content: "";
  inset: 0 -5px;
  position: absolute;
}

@media (max-width: 1060px) {
  /* 单列布局下拖拽没有意义，藏掉 */
  .agg-resizer { display: none; }
}

/* ══ 三面积木墙统一的四档色块（2026-08-24）══════════════════════════════
 *
 * 产品要求「每块积木的状态和色块要统一」。在这之前：总店墙六态六色
 * （绿/蓝/琥珀/紫/红/灰），行业墙三态两色系（teal 深/浅 + 灰），而且专门写了
 * 一句「这三档与上面六种颜色不是一套」——那句话诚实，但它承认的正是问题本身：
 * 店长在一屏里连着看，同一块绿在上面是「已核实」、在下面是「有正文」，
 * 颜色就不再是能扫的信号，得逐墙回去读图例。
 *
 * 现在四档，问的是同一个问题「这一格现在能不能用」：
 *   绿 ready / 琥珀 partial / 红 conflict / 灰 empty
 * 映射与「为什么状态名统不了、只统色块」写在 lib/workbench/brick-status.ts 头注。
 *
 * ⚠️ **每条选择器必须带上 kind（enterprise / industry / branch），不能只写
 * `.knowledge-brick.brick-status-*`。**
 *
 * 2026-08-24 第一版就是只写两个类，实机一看砖全是老颜色：上面各墙自己的规则是
 * `.knowledge-brick.enterprise.enterprise-state-source_linked`（三个类，特异度 0-3-0），
 * 而两个类只有 0-2-0——**特异度高的赢，跟写在文件哪一行无关**。
 * 当时注释里写的「特异度相同，靠后来居上」是没验证就下的断言，是错的。
 * 症状很隐蔽：绿和灰碰巧两边同色，只有「挂了出处」的蓝和「有素材」的紫露馅。
 *
 * 带上 kind 之后两边同为 0-3-0，此时**位置才起作用**，所以这一段仍要留在文件最后。
 */

.knowledge-brick.enterprise.brick-status-ready,
.knowledge-brick.industry.brick-status-ready,
.knowledge-brick.branch.brick-status-ready {
  background: var(--brick-green-soft);
  border-color: var(--brick-green-line);
  border-bottom-color: var(--brick-green-edge);
  color: var(--brick-green-deep);
}
.knowledge-brick.enterprise.brick-status-partial,
.knowledge-brick.industry.brick-status-partial,
.knowledge-brick.branch.brick-status-partial {
  background: var(--brick-amber-soft);
  border-color: var(--brick-amber-line);
  border-bottom-color: var(--brick-amber-edge);
  color: var(--brick-amber-deep);
}
.knowledge-brick.enterprise.brick-status-conflict,
.knowledge-brick.industry.brick-status-conflict,
.knowledge-brick.branch.brick-status-conflict {
  background: var(--brick-red-soft);
  border-color: var(--brick-red-line);
  border-bottom-color: var(--brick-red-edge);
  color: var(--brick-red-deep);
}
.knowledge-brick.enterprise.brick-status-empty,
.knowledge-brick.industry.brick-status-empty,
.knowledge-brick.branch.brick-status-empty {
  background: var(--brick-gray-soft);
  border-color: var(--brick-gray-line);
  border-bottom-color: var(--brick-gray-edge);
  color: var(--brick-gray-deep);
}

/* 详情页顶上那条边跟着同一套。同理要带 kind——原规则是
   `.knowledge-brick-detail.enterprise.enterprise-state-*`，也是 0-3-0。 */
.knowledge-brick-detail.enterprise.brick-status-ready,
.knowledge-brick-detail.industry.brick-status-ready { border-color: var(--brick-green-line); border-left-color: var(--brick-green); }
.knowledge-brick-detail.enterprise.brick-status-partial,
.knowledge-brick-detail.industry.brick-status-partial { border-color: var(--brick-amber-line); border-left-color: var(--brick-amber); }
.knowledge-brick-detail.enterprise.brick-status-conflict,
.knowledge-brick-detail.industry.brick-status-conflict { border-color: var(--brick-red-line); border-left-color: var(--brick-red); }
.knowledge-brick-detail.enterprise.brick-status-empty,
.knowledge-brick-detail.industry.brick-status-empty { border-color: var(--brick-gray-line); border-left-color: var(--brick-gray); }

/*
 * kicker 的颜色跟着同一套四档（2026-09-03）。
 *
 * 上面那条 border-left 读的是四档（brick-status-*，在文件最后），而 kicker 的
 * 原规则读的是企业墙六态（`.enterprise.enterprise-state-*`，在 7300 行附近），
 * 两条都是 0-4-0 —— 位置靠后的赢，也就是各说各的：一块「有素材」的砖，
 * 左边框会是琥珀（partial），kicker 却是紫（material）。
 *
 * 之所以之前没人看见：积木 token 那时挂在 .knowledge-panorama-page 上，而详情页
 * 是它的**兄弟页**（.knowledge-brick-detail-page），两条 var() 都取不到值、
 * 一起回落成近黑，于是整页没有状态色，也就看不出它们不一致。token 移进 :root
 * 之后两条同时亮起来，必须先对齐再放出去。
 *
 * branch 那一档不在这里：它的详情页本来就是「一律绿」，自洽，另做别的判断。
 */
.knowledge-brick-detail.enterprise.brick-status-ready .knowledge-brick-detail-kicker,
.knowledge-brick-detail.industry.brick-status-ready .knowledge-brick-detail-kicker { color: var(--brick-green); }
.knowledge-brick-detail.enterprise.brick-status-partial .knowledge-brick-detail-kicker,
.knowledge-brick-detail.industry.brick-status-partial .knowledge-brick-detail-kicker { color: var(--brick-amber); }
.knowledge-brick-detail.enterprise.brick-status-conflict .knowledge-brick-detail-kicker,
.knowledge-brick-detail.industry.brick-status-conflict .knowledge-brick-detail-kicker { color: var(--brick-red); }
.knowledge-brick-detail.enterprise.brick-status-empty .knowledge-brick-detail-kicker,
.knowledge-brick-detail.industry.brick-status-empty .knowledge-brick-detail-kicker { color: var(--brick-gray); }

/*
 * 图例格子 —— **整块填色，不是只描一条边**（2026-08-24 第二批反馈）。
 *
 * 第一版只写了 `border-left-color`，而 `.slot-state` 的底样式是四边
 * `1px solid var(--line)`，于是只换了左边那一条的颜色，屏上几乎看不出来。
 * 图例的作用是「让人把这个颜色和下面墙上的砖对上」，描边对不上——
 * 砖是实心的，图例必须也是实心的，而且用**同一组色值**（不是相近的另一组）。
 */
.slot-state.brick-status-ready {
  background: var(--brick-green-soft);
  border-color: var(--brick-green-line);
  color: var(--brick-green-deep);
}
.slot-state.brick-status-partial {
  background: var(--brick-amber-soft);
  border-color: var(--brick-amber-line);
  color: var(--brick-amber-deep);
}
.slot-state.brick-status-conflict {
  background: var(--brick-red-soft);
  border-color: var(--brick-red-line);
  color: var(--brick-red-deep);
}
.slot-state.brick-status-empty {
  background: var(--brick-gray-soft);
  border-color: var(--brick-gray-line);
  color: var(--brick-gray-deep);
}
/* 数字与说明跟着走：底色变了还留着灰字，对比度会掉到读不清 */
.slot-state.brick-status-ready strong,
.slot-state.brick-status-partial strong,
.slot-state.brick-status-conflict strong,
.slot-state.brick-status-empty strong { color: inherit; }
.slot-state.brick-status-ready span,
.slot-state.brick-status-partial span,
.slot-state.brick-status-conflict span,
.slot-state.brick-status-empty span { color: inherit; opacity: .82; }
.slot-state.brick-status-ready small,
.slot-state.brick-status-partial small,
.slot-state.brick-status-conflict small,
.slot-state.brick-status-empty small {
  border-top-color: rgba(0, 0, 0, .12);
  color: inherit;
  opacity: .72;
}

/* 细分/隐患挂在色块**里面**（`extra`），不再单起一排。
   起一排的问题不是占地方，是四档里三档的细分就是它自己，
   于是同一个数在一屏里被说两遍（见 UnifiedStatusLegend 的头注）。 */
.slot-state-extra {
  border-top: 1px solid rgba(0, 0, 0, .06);
  color: var(--muted);
  display: block;
  font-size: 10px;
  font-style: normal;
  line-height: 1.45;
  margin-top: 5px;
  padding-top: 5px;
  text-align: left;
}

/* 数字比周围那句判据重一点，扫的时候先看见数 */
.slot-state-extra b {
  color: inherit;
  font-weight: 600;
}

/* 空的那格已经把 small 调成 inherit/0.72，extra 跟着走一致的对比度 */
.slot-state.brick-status-empty .slot-state-extra {
  border-top-color: rgba(0, 0, 0, .12);
  color: inherit;
  opacity: .72;
}

/* ── 分店墙 ────────────────────────────────────────────────────────── */

/* 分店砖不可点（还没有分店详情页），所以不给手型；其余排布交给
   .knowledge-brick-grid（与另外两面墙同一个容器，三面墙的砖才一样大）。 */
.knowledge-panorama-zone.branch-zone .knowledge-brick.branch {
  cursor: default;
  text-align: left;
}
.knowledge-brick.branch .knowledge-brick-label {
  font-size: 11px;
  line-height: 1.5;
  opacity: 0.85;
}
/* 「除地址外还没有本店独有资料」——不写的话 17 块绿砖会被读成资料都齐了 */
.knowledge-brick.branch .knowledge-brick-gap {
  font-size: 10.5px;
  opacity: 0.7;
}

/* ── 业务速览（今日总览上那一节，2026-08-24 从月度实战手册搬来）────────── */

.ov-card.ov-brief .ov-brief-sample {
  align-items: flex-start;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  display: flex;
  gap: 8px;
  margin-top: 8px;
  padding: 9px 10px;
}
.ov-card.ov-brief .ov-brief-sample p {
  font-size: 12.5px;
  line-height: 1.6;
  margin: 0;
}

/* 常见问题屏底部那五节的小标题 */
.faq-playbook-h {
  font-size: 14px;
  font-weight: 650;
  margin: 22px 0 4px;
}

/* ── 聚合台最左边那一列「销售」（2026-08-24 的第四栏）────────────────── */

.conversation-item.sales-item > div {
  align-items: baseline;
  display: flex;
  gap: 6px;
  justify-content: space-between;
}
.conversation-item.sales-item > div small {
  color: var(--muted);
  flex: none;
  font-size: 11px;
}
/* 「未登记的号」不是错误提示，是一个能去做的动作（去成员管理把接待号填上），
   所以用中性的 info 色，不用红。 */
.conversation-item.sales-item em {
  color: var(--info);
  font-size: 10.5px;
  font-style: normal;
}

/* 右栏「资料阅读」明细：一条链接一块，一天一行（没打开的那天也占一行、压灰）。 */
.share-reads { margin-top: 14px; }
.share-read-link { margin-top: 8px; border-left: 2px solid var(--line, #e6e4df); padding-left: 10px; }
.share-read-head { font-size: 13px; font-weight: 600; }
.share-read-head small { display: block; font-weight: 400; color: var(--muted, #8b8781); font-size: 11px; margin-top: 2px; }
.share-read-days { list-style: none; margin: 6px 0 0; padding: 0; }
.share-read-days li { display: flex; gap: 8px; font-size: 12px; line-height: 1.9; }
.share-read-days li span { color: var(--muted, #8b8781); min-width: 42px; }
.share-read-days li b { font-weight: 500; }
/* 没打开的那天压灰但**不隐藏** —— 它正是「当天没点、隔天才看」这个信号的载体 */
.share-read-days li.off b { color: var(--muted, #8b8781); font-weight: 400; }
/* ── 聊天气泡里的媒体（2026-08-24）────────────────────────────────────
 *
 * 此前 `[图片:xgt:style-14:0141]` 是**原样当文字渲染**的，屏上就是那串协议。
 * 现在能算出地址的渲染成图，算不出的渲染成一枚带名字的小块。
 * 判据在 lib/workbench/chat-media.ts。
 */

.wx-bubble .wx-media-img {
  border-radius: 6px;
  display: block;
  /* 图不撑破气泡：气泡本身有 max-width，这里只保证图跟着它走 */
  height: auto;
  margin-top: 6px;
  max-width: 100%;
  /* 没加载出来之前不塌成 0 高，免得气泡整体跳一下 */
  min-height: 40px;
  object-fit: cover;
}

/* 取不到文件的那类：一眼看出「这儿发了个什么」，而不是一串协议 */
.wx-bubble .wx-media-chip {
  align-items: center;
  background: rgba(0, 0, 0, .06);
  border-radius: 6px;
  display: inline-flex;
  font-size: 11.5px;
  gap: 4px;
  margin-top: 6px;
  opacity: .9;
  padding: 3px 7px;
}

/* ── 实战手册几节里那些「真句子」（2026-08-24）─────────────────────
 * 原来这里是一条写死的「示意」；现在是从红蓝对抗里挖出来的原话，
 * 所以要能区分「客户说的」和「机器人说的」——两者混排读起来分不清谁在说话。
 */
.playbook-section header .playbook-count {
  background: var(--accent-soft);
  border-radius: 999px;
  color: var(--accent);
  font-size: 10.5px;
  font-style: normal;
  margin-left: 6px;
  padding: 1px 6px;
}

.playbook-real {
  display: grid;
  gap: 8px;
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}
.playbook-real li {
  background: var(--soft);
  border-left: 2px solid var(--accent-line);
  border-radius: var(--radius-xs);
  display: grid;
  gap: 3px;
  padding: 7px 9px;
}
.playbook-real .playbook-ask {
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.55;
}
/* 机器人那句是这一节真正要人学的东西，字更实、颜色更深 */
.playbook-real .playbook-reply {
  color: var(--ink);
  font-size: 12px;
  line-height: 1.6;
}

/* 常见问题那一屏的可折叠主块（2026-08-24 第二批反馈） */
.faq-fold > summary {
  align-items: baseline;
  cursor: pointer;
  display: flex;
  gap: 8px;
  list-style: none;
  padding: 6px 0;
}
.faq-fold > summary::-webkit-details-marker { display: none; }
.faq-fold > summary::after {
  content: "\203A";
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
  margin-left: auto;
  transform: rotate(90deg);
}
.faq-fold[open] > summary::after { transform: rotate(-90deg); }
.faq-fold > summary b { font-size: 14px; }
.faq-fold > summary small { color: var(--muted); font-size: 11.5px; }

/* ── 今日总览「业务速览」那一格（2026-08-24 改成读知识库）───────────
 * 原来是一条写死的示意，一段话就完事；现在是 5 条真口径，
 * 默认 dl 的缩进读起来像目录，得自己排。
 */
.ov-card.ov-brief .ov-brief-list {
  display: grid;
  gap: 8px;
  margin: 10px 0 0;
}
.ov-card.ov-brief .ov-brief-list > div {
  border-left: 2px solid var(--accent-line);
  display: grid;
  gap: 2px;
  padding-left: 9px;
}
.ov-card.ov-brief .ov-brief-list dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}
.ov-card.ov-brief .ov-brief-list dd {
  font-size: 12.5px;
  line-height: 1.6;
  margin: 0;
}
/* 还没确认的那一格：灰掉 + 一个能点的下一步，别让它看起来像内容 */
.ov-card.ov-brief .ov-brief-gap {
  align-items: baseline;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 11.5px;
  gap: 6px;
}
.ov-card.ov-brief .ov-brief-gap button {
  background: none;
  border: 0;
  color: var(--accent);
  cursor: pointer;
  font: inherit;
  padding: 0;
}

/* 「这一格取自哪一条口径」——常显，不藏在 title 里（理由见 overview-screen.tsx） */
.ov-card.ov-brief .ov-brief-src {
  color: var(--muted);
  display: block;
  font-size: 10.5px;
  font-style: normal;
  margin-top: 3px;
}

/* ── 在聚合聊天里直接改话术（2026-08-24）────────────────────────────
 *
 * 编辑器**只有一个**，跟着「当前选中的那条机器人回复」走。位置从旧版的
 * 「气泡正下方」挪到了右栏：这一屏中栏是定高滚动的对话流，在流里插一块
 * 四行高的编辑器会把上下文顶走，而右栏本来就是「对这段怎么判」的地方。
 */
.fix-block { margin-top: 14px; }

/* 可点的机器人气泡：光标 + hover 有反馈，否则没人知道它能点 */
.wx-bubble.pickable { cursor: pointer; }
.wx-bubble.pickable:hover { outline: 2px solid var(--accent-line); outline-offset: 1px; }
.wx-bubble.picked { outline: 2px solid var(--accent); outline-offset: 1px; }

.fix-origin {
  background: var(--soft);
  border-left: 2px solid var(--accent);
  border-radius: var(--radius-xs);
  color: var(--ink-2);
  font-size: 11.5px;
  line-height: 1.55;
  margin: 8px 0;
  max-height: 90px;
  overflow-y: auto;
  padding: 7px 9px;
}

.fix-input {
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  font: inherit;
  font-size: 12.5px;
  line-height: 1.6;
  padding: 8px 9px;
  resize: vertical;
  width: 100%;
}
.fix-input:focus-visible { border-color: var(--accent); outline: none; }

.fix-mode { border: 0; display: grid; gap: 8px; margin: 12px 0 0; padding: 0; }
.fix-mode legend { color: var(--muted); font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.fix-mode label { align-items: flex-start; cursor: pointer; display: flex; gap: 8px; }
.fix-mode input { margin-top: 3px; }
.fix-mode span { display: grid; gap: 2px; }
.fix-mode b { color: var(--ink); font-size: 14px; }
.fix-mode small { color: var(--muted); font-size: 12px; line-height: 1.45; }
.fix-diff { align-items: center; background: var(--soft); border-radius: 8px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 0 0; padding: 8px 10px; }
.fix-diff del { color: var(--danger); }
.fix-diff ins { color: var(--positive); font-weight: 600; text-decoration: none; }
.fix-number-warning { color: var(--danger); font-size: 13px; margin: 9px 0 0; }

/* 结果那一句：成功失败都要有话说，不能默默无声 */
.fix-msg {
  background: var(--accent-soft);
  border-radius: var(--radius-xs);
  color: var(--accent);
  font-size: 11.5px;
  line-height: 1.55;
  margin-top: 8px;
  padding: 7px 9px;
}

/* 右栏「发一份资料给他」：建一条专属链接（不是替他发出去，所以按钮写「复制」）。 */
.send-material { margin-top: 14px; }
.send-material-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.send-material-btn {
  background: var(--accent, #4f46e5); border: 0; border-radius: 6px; color: #fff;
  cursor: pointer; font-size: 12px; padding: 5px 10px;
}
.send-material-btn:disabled { opacity: .55; cursor: default; }
.send-material-out { margin-top: 8px; }
.send-material-out code {
  background: rgba(0, 0, 0, .05); border-radius: 4px; display: block;
  font-size: 11px; overflow-x: auto; padding: 5px 7px; white-space: nowrap;
}
.send-material-copy {
  background: none; border: 1px solid var(--line, #e6e4df); border-radius: 6px;
  cursor: pointer; font-size: 12px; margin-top: 6px; padding: 4px 10px;
}

/* ── 实战手册四节：形态与「近 N 天客户常问问题」对齐（2026-08-25）────────
   原来是四张 `.playbook-section` 卡片，和同一屏上面那张表两套排版。
   现在共用 `.faq-fold` 的折叠壳和 `.faq-table` 的表格行，只覆盖列宽。 */
.playbook-fold {
  margin-top: 10px;
}

.playbook-fold > summary small {
  color: var(--muted);
  font-size: 11.5px;
}

/* 三列：客户那一句 / 机器人怎么接 / 什么时候。
   两句话都可能很长，所以给它们各占一半，日期固定窄列。 */
.faq-table.playbook-table > div {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) 72px;
}

.playbook-ask,
.playbook-reply {
  font-size: 12px;
  line-height: 1.65;
}

/* 机器人那句是这一节的主角（要学的是怎么接），客户那句是引子 */
.playbook-ask { color: var(--muted); }

.playbook-at {
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}

/* 屏顶那条日期区间：它管全屏，所以比下面各块的过滤条更靠上也更显眼一点 */
.faq-window-bar {
  align-items: center;
  margin-bottom: 12px;
}

/* 「发一份资料给他」下面的推荐理由：一份一行，说清为什么排在前面。
   一条都没命中时这块不出现，改显示 .gap-note 那句「按最近发布排」——
   这一格写「因为他问过 X」，那句必须是真的，没依据时就不写。 */
.reco-why { list-style: none; margin: 6px 0 0; padding: 0; }
.reco-why li { font-size: 11.5px; line-height: 1.8; color: var(--muted, #8b8781); }
.reco-why li b { font-weight: 600; color: inherit; }

/*
 * 成员管理里那条一次性登录链接。
 *
 * 它必须钉在视口上，不能待在文档流里：触发它的「重置密码」按钮在成员表格的行内，
 * 人一多那一行就滚到屏幕下半部分，而框原先渲染在表格上方——点完看不到任何东西，
 * 运营会以为没生成而再点一次，新 token 覆盖旧的，那个人反而被锁在门外。
 * shadow-2 是本仓「浮在页面之上」那一档（toast/弹层），跟它的角色一致。
 */
.members-fresh-link {
  left: 50%;
  position: fixed;
  top: 16px;
  transform: translateX(-50%);
  width: min(680px, calc(100vw - 32px));
  z-index: 50;
}

.members-fresh-link-box {
  background: var(--warning-bg);
  border-radius: 8px;
  box-shadow: var(--shadow-2);
  color: var(--warning);
  display: grid;
  font-size: 12px;
  gap: 6px;
  padding: 14px 16px;
}

/* 等宽字体：这串东西可能要人眼核对，比例字体下 l/1、O/0 分不开 */
.members-fresh-link-url {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  word-break: break-all;
}

.members-fresh-link-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}


/* 侧边栏账号区的「切换账号 / 退出登录」。
   两个按钮平铺、同宽：它们是同一类动作（离开当前身份），
   分主次会让人以为其中一个更"正常"。 */
.account-actions {
  display: grid;
  gap: 6px;
  grid-template-columns: 1fr 1fr;
  margin-top: 10px;
}

.account-actions button {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  padding: 5px 8px;
  transition: color .12s, border-color .12s;
}

.account-actions button:hover:not(:disabled) {
  border-color: var(--ink);
  color: var(--ink);
}

.account-actions button:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.account-actions button:disabled { cursor: default; opacity: .55; }

/* 审核台里「发资料」批准后那条专属链接。系统不替你发，所以按钮写「复制」。 */
.material-link { flex-basis: 100%; margin-top: 6px; }
.material-link code {
  background: rgba(0, 0, 0, .05); border-radius: 4px; display: block;
  font-size: 11.5px; overflow-x: auto; padding: 6px 8px; white-space: nowrap;
}
.material-link .ui-button { margin-top: 6px; }
/* ── 企业大脑页首三张指标卡（2026-08-25 反馈：内容板块要真实有效）──────────
 * 摆在「需要你处理」上面、同一张大卡里：上层回答「现在什么样」，下层是「要动手的」。
 *
 * 三张等宽自适应：窄屏掉成一列。**不用固定三列**——卡的张数是按需要定的
 * （用户原话「如果我们的实际需求是需要 4 张甚至 5 张，也是可以的」），
 * 写死 3 会让加第四张时排版整个塌掉。
 *
 * 颜色只有两档半：默认（中性）· warn（琥珀，有活但不急）· alarm（红，机器人正被卡住）。
 * 与三面积木墙同一套语义色，别在这儿引入第四种红。
 */
.brain-headline-cards {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
  margin: 0 0 4px;
}

/*
 * 形状照 V6 设计稿 4.1.5 那三张卡（2026-08-26 用户指定「风格参考这个」）：
 * **白底 + 细边**，语义色只走边框，不整块填充。
 *
 * 为什么不用填充色：四张卡里通常有两三张都有活，整块琥珀铺开之后一屏全是黄的，
 * 「哪张最急」反而看不出来。边框着色 + 超大数字，急不急靠数字和边框颜色说话。
 */
.brain-headline-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
}

.brain-headline-card.warn { border-color: #e2c98f; }
.brain-headline-card.alarm { border-color: #e8b5ae; }

.brain-headline-card > b {
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 700;
}

/* 超大数字是这张卡的主角。等宽数字：这几个数每次刷新都在变，
   比例字体会让整行左右抖（同 .app-header-stamp 的理由）。 */
.brain-headline-card > strong {
  color: var(--ink);
  font-size: 38px;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1.05;
  margin-top: 2px;
}

.brain-headline-card.alarm > strong { color: var(--danger); }
.brain-headline-card > strong.muted { color: var(--muted); font-size: 24px; }

/* 单位跟在数字后面，小一号、不抢焦点 */
.brain-headline-card > strong > em {
  color: var(--muted);
  font-size: 13px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0;
  margin-left: 6px;
}

.brain-headline-card > span {
  color: var(--ink-2);
  font-size: 12.5px;
  line-height: 1.6;
}

/* 紫色实心按钮，照设计稿那颗「去 4.1.3 处理冲突」 */
.brain-headline-card > button {
  align-self: flex-start;
  background: var(--accent);
  border: 0;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  margin-top: 6px;
  padding: 8px 14px;
}

.brain-headline-card > button:hover { opacity: .9; }

/* 底部灰色脚注：口径注（「这是喂进提示词的次数…」）和「该找谁」那句。
   比正文再弱一档，但**不许弱到看不见**——它是这个数唯一的免责说明。 */
.brain-headline-card > small {
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.55;
  margin-top: auto;
  padding-top: 8px;
}

.brain-headline-card > small.card-hint { color: var(--ink-2); }

.brain-cards-note {
  color: var(--muted);
  font-size: 12.5px;
  margin: 10px 0 0;
}

/* ── 企业大脑：用积木生成一份资料 ─────────────────────────────
   放在三面墙之前，所以留白按「一段独立的事」给，不跟墙的卡片同规。 */
.gen-material-card { border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; margin: 12px 0 18px; background: var(--surface); }
.gen-material-card > header { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; }
.gen-material-card h3 { margin: 0 0 4px; font-size: 15px; }
.gen-material-card > header p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--muted); max-width: 62ch; }
.gen-material-btn { border: 1px solid var(--line); border-radius: 8px; padding: 7px 14px; font-size: 13px; cursor: pointer; background: var(--accent-soft); color: var(--ink); white-space: nowrap; }
.gen-material-btn:disabled { opacity: .55; cursor: default; }
.gen-material-btn.ghost { background: transparent; }
.gen-material-wait { margin-top: 12px; font-size: 13px; color: var(--muted); }
.gen-material-err { margin-top: 12px; font-size: 13px; line-height: 1.6; padding: 10px 12px; border-radius: 8px; background: var(--danger-bg); color: var(--danger); }
.gen-material-draft { margin-top: 14px; }
.gen-material-draft-head { display: flex; gap: 10px; align-items: baseline; font-size: 13px; margin-bottom: 8px; }
.gen-material-draft-head span { color: var(--muted); }
.gen-material-items { margin: 0; padding-left: 20px; display: grid; gap: 10px; }
.gen-material-items li p { margin: 0; font-size: 13px; line-height: 1.6; }
/* 出处压一档：它是判断依据，但不该跟条目正文抢注意力 */
.gen-material-items li small { display: block; margin-top: 3px; font-size: 12px; color: var(--muted); }
.gen-material-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 14px; }
.gen-material-actions small { font-size: 12px; color: var(--muted); }
.gen-material-done { margin-top: 12px; font-size: 13px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
/* 会话右栏那句「去哪造」 */
.send-material-more { margin: 0 0 10px; font-size: 12px; line-height: 1.6; color: var(--muted); }

/* ── 会话右栏「资料」页：现造一份 ───────────────────────────── */
.gen-material { border: 1px dashed var(--line); border-radius: 10px; padding: 12px 13px; margin: 0 0 12px; }
.gen-material > b { display: block; font-size: 13px; margin-bottom: 6px; }
.gen-material-said { margin: 0 0 6px; font-size: 12px; line-height: 1.6; color: var(--ink); }
.gen-material-hint { margin: 0 0 10px; font-size: 12px; line-height: 1.6; color: var(--muted); }
.gen-material-btn { border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px; font-size: 12px; cursor: pointer; background: var(--accent-soft); color: var(--ink); }
.gen-material-btn:disabled { opacity: .55; cursor: default; }
.gen-material-btn.ghost { background: transparent; }
/* 「已等多久」条，不是完成度——见组件头注。所以不做条纹动画那种"正在推进"的暗示。 */
.gen-material-bar { height: 4px; border-radius: 3px; background: var(--line); overflow: hidden; margin: 8px 0; }
.gen-material-bar > i { display: block; height: 100%; background: var(--accent); transition: width .5s linear; }
.gen-material-err { margin: 8px 0 0; font-size: 12px; line-height: 1.6; padding: 8px 10px; border-radius: 8px; background: var(--danger-bg); color: var(--danger); }
.gen-material-items { margin: 0 0 10px; padding-left: 18px; display: grid; gap: 8px; }
.gen-material-items li p { margin: 0; font-size: 12px; line-height: 1.6; }
.gen-material-items li small { display: block; margin-top: 2px; font-size: 11px; color: var(--muted); }
.gen-material-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── 审核台里的「其它要处理的事」 ─────────────────────────────
   它是**指路**不是队列，所以做得比上面那本账轻：没有边框重的卡片行，
   只有一行字加一个箭头。做重了会跟真正要审的东西抢注意力。 */
.other-todos { margin-top: 14px; }
.other-todos h3 { margin: 0 0 4px; }
.ot-group { margin-top: 12px; }
.ot-group h4 { margin: 0 0 6px; font-size: 11px; font-weight: 600; color: var(--muted); letter-spacing: .04em; }
.ot-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.ot-group li button { width: 100%; text-align: left; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 9px; background: transparent; cursor: pointer; }
.ot-group li button:hover { border-color: var(--ink); }
/* 「全店停摆 / 客户在等」这类才标红。全都标红等于都不红。 */
.ot-group li button.hot { border-left: 3px solid var(--danger); }
.ot-group li span { font-size: 13px; line-height: 1.6; color: var(--ink); }
.ot-group li small { flex: none; font-size: 11px; color: var(--muted); }

/* ── 门店（成员管理页顶部那一块）────────────────────────────────────────── */

.members-store-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}

.members-store-list li {
  align-items: baseline;
  background: var(--surface-2, var(--canvas));
  border: 1px solid var(--line, var(--line));
  border-radius: var(--radius-s, 8px);
  display: flex;
  gap: 8px;
  padding: 8px 12px;
}

.members-store-list em {
  color: var(--muted, var(--line-dark));
  font-size: 12px;
  font-style: normal;
}

/* 建店表单横排：两个短输入 + 一个按钮，竖排会把这一块拉得比清单还高 */
.members-store-form {
  align-items: end;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.members-store-form .account-access-field {
  flex: 1 1 180px;
  margin: 0;
}

.members-store-form button {
  /* 和输入框同高，免得基线错开 */
  min-height: 46px;
  white-space: nowrap;
}

/*
 * 成员管理这一屏有两块面板（门店 + 成员），而 .account-access 是居中的 flex 行、
 * 本来只装一张登录卡。不加这一层，两块会被排成两列各自缩窄。
 */
.members-stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 1140px;
  width: 100%;
}

/* ── 门店：状态徽章 / 行内编辑 / 确认弹窗 ───────────────────────────────── */

.pill-status {
  border-radius: 5px;
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 9px;
  white-space: nowrap;
}
.pill-status.on { background: var(--positive-bg); color: #1f7a4d; }
/* 停用是「暂时不用」不是「出事了」，所以用灰不用红 */
.pill-status.off { background: var(--line-soft); color: var(--muted); }

.stores-edit-input {
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-s);
  font: inherit;
  min-height: 34px;
  padding: 0 10px;
  width: 100%;
}

/*
 * 确认弹窗。刻意不用 window.confirm —— 它会阻塞整个页面，
 * 而且文案由浏览器定，写不进「停用漳州龙文店」这种具体的话。
 */
.confirm-mask {
  align-items: center;
  background: rgba(24, 20, 40, 0.42);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 24px;
  position: fixed;
  z-index: 50;
}

.confirm-box {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  display: grid;
  gap: 12px;
  max-width: 440px;
  padding: 24px;
  width: 100%;
}

.confirm-box b { font-size: 16px; }
.confirm-box p { color: var(--muted); font-size: 13px; line-height: 1.6; margin: 0; }

.confirm-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.confirm-actions button {
  background: #fff;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-s);
  cursor: pointer;
  font: inherit;
  min-height: 38px;
  padding: 0 18px;
}
.confirm-actions button:disabled { cursor: default; opacity: 0.55; }
.confirm-actions .confirm-primary { background: var(--accent, var(--accent)); border-color: transparent; color: #fff; }
/* 停用用深灰不用红：它不删数据，红色会让人以为是不可逆操作 */
.confirm-actions .confirm-danger { background: var(--ink-2); border-color: transparent; color: #fff; }

/* 「资料」页顶上那条：客户此刻在要资料 + 他的原话。
   有对得上的用中性色，没有的用警示色——后者要多花一分钟现造，值得先看见。 */
.mat-ask { border-radius: 10px; padding: 10px 12px; margin: 0 0 12px; background: var(--accent-soft); border-left: 3px solid var(--accent); }
.mat-ask.no-match { background: var(--warning-bg); border-left-color: var(--warning); }
.mat-ask > b { display: block; font-size: 13px; margin-bottom: 4px; }
.mat-ask p { margin: 0 0 4px; font-size: 12px; line-height: 1.6; color: var(--ink); }
.mat-ask small { font-size: 11px; color: var(--muted); line-height: 1.6; }

/* ── 聚合聊天：「销售」栏顶上的门店筛选 ─────────────────────────────────── */

.agg-col-filter {
  border-bottom: 1px solid var(--line);
  padding: 8px 10px;
}

.agg-store-filter {
  display: grid;
  gap: 4px;
}

.agg-store-filter > span {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.04em;
}

.agg-store-filter select {
  /* 和成员管理那边的下拉同款：默认 appearance 在 macOS 上是圆角、Windows 上是直角 */
  appearance: none;
  -webkit-appearance: none;
  background-color: #fff;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 14px) 55%, calc(100% - 10px) 55%;
  background-repeat: no-repeat;
  background-size: 4px 4px, 4px 4px;
  border: 1px solid var(--line-dark);
  border-radius: 6px;
  font: inherit;
  font-size: 12px;
  min-height: 30px;
  padding: 0 26px 0 8px;
  width: 100%;
}

/* ── 待复核审阅台（brain-needs-review.tsx）2026-08-31 ─────────────────── */
.brain-needs-review-list { display: flex; flex-direction: column; }
.brain-review-item { padding: 14px 0; border-top: 1px solid #ece9e4; }
.brain-review-item:first-child { border-top: none; }
.brain-review-item > header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.brain-review-item > header .brick { font: 12px ui-monospace, monospace; color: #78716c; background: var(--canvas); padding: 1px 6px; border-radius: 4px; }
.brain-review-item .reason { color: #b45309; font-size: 13px; margin: 4px 0 8px; }
.brain-review-item .body-edit { display: block; }
.brain-review-item .body-edit > span { display: block; font-size: 12px; color: #a8a29e; margin-bottom: 4px; }
.brain-review-item .body-edit textarea { width: 100%; box-sizing: border-box; border: 1px solid #d6d3d1; border-radius: 8px; padding: 8px 10px; font: inherit; line-height: 1.55; resize: vertical; }
.brain-review-item .body-edit textarea:focus { outline: none; border-color: #f59e0b; }
.brain-review-item details { margin-top: 6px; }
.brain-review-item details summary { cursor: pointer; color: #78716c; font-size: 12px; }
.brain-review-item .ex { background: var(--canvas); border-radius: 6px; padding: 8px; margin-top: 4px; font-size: 13px; color: #57534e; }
.brain-review-item > footer { margin-top: 10px; gap: 8px; }

/* 弃用理由框（2026-09-16）：销售反馈「要弃用这句，没地方填说明原因」。
   后端一直要理由，界面却只有一颗直接提交的按钮——点下去必然吃一句报错。
   现在点「弃用」先展开这一块，填够字数才点得动「确认弃用」。 */
.brain-review-item .retire-why { margin-top: 10px; padding: 12px; border: 1px solid #fecaca; border-radius: 10px; background: #fef8f7; }
.brain-review-item .retire-why-ask { display: block; font-size: 13px; color: #7f1d1d; margin-bottom: 8px; }
.brain-review-item .retire-why-ask em { font-style: normal; color: #a8a29e; margin-left: 6px; font-size: 12px; }
.brain-review-item .retire-why-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.brain-review-item .retire-why-presets button { border: 1px solid #e7e5e4; background: #fff; color: #57534e; border-radius: 999px; padding: 4px 10px; font: inherit; font-size: 12px; cursor: pointer; }
.brain-review-item .retire-why-presets button:hover:not(:disabled) { border-color: #f59e0b; color: #b45309; }
.brain-review-item .retire-why-presets button.on { border-color: #dc2626; background: #fee2e2; color: #991b1b; }
.brain-review-item .retire-why-presets button:disabled { opacity: .55; cursor: default; }
.brain-review-item .retire-why textarea { width: 100%; box-sizing: border-box; border: 1px solid #d6d3d1; border-radius: 8px; padding: 8px 10px; font: inherit; line-height: 1.55; resize: vertical; }
.brain-review-item .retire-why textarea:focus { outline: none; border-color: #dc2626; }
.brain-review-item .retire-why .button-row { margin-top: 8px; gap: 8px; align-items: center; }
.brain-review-item .retire-why-hint { font-size: 12px; color: #a8a29e; }

/* 屏 sales-02：从截图认出来的案例，在详情页把原始截图竖着摞回完整一段。
   不做成一排小缩略图——要核「这句是谁说的」，就得看得见气泡在左边还是右边，
   96 像素宽的缩略图这件事看不出来。给个固定高度的滚动容器，免得十几片图
   把下面真正要复核的逐句列表推到几屏之外。 */
.champion-shot-roll {
  max-height: 460px;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 8px 0 2px;
  padding: 6px;
  background: var(--surface-2, #f4f4f4);
  border: 1px solid var(--line, #d8d8d8);
  border-radius: 8px;
}
.champion-shot-roll a {
  display: block;
  text-decoration: none;
}
.champion-shot-roll img {
  display: block;
  width: 100%;
  max-width: 380px;
  height: auto;
  margin: 0 auto;
  background: #fff;
}
/* 片与片之间不留缝：上传时长图被切开，这里摞回去要像原来那一整段 */
.champion-shot-roll a + a img {
  margin-top: 0;
}
.champion-shot-roll span {
  display: block;
  padding: 8px;
  font-size: 12px;
  color: var(--muted, #767676);
}
.content-board { display: grid; gap: 18px; }
.content-board-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border: 1px solid var(--line, #dedbd4); border-radius: 12px; background: #fffdf8; }
.content-board-toolbar div { display: grid; gap: 3px; }
.content-board-toolbar span, .content-editor-meta span, .content-ai-note { color: #77736b; font-size: 13px; }
.content-channel-note { color: #2e6f63 !important; font-size: 13px; }
.content-board-toolbar-actions { display: flex; align-items: center; gap: 12px; }
.content-board-toolbar-actions .primary-button { min-height: 38px; padding: 0 16px; }
.content-success-note { display: flex; gap: 8px; align-items: baseline; padding: 12px 14px; border: 1px solid #b7d6c3; border-radius: 10px; background: #f2fbf5; color: #246342; font-size: 13px; }
.content-topic-modal-backdrop { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 24px; background: rgba(26, 22, 38, .34); }
.content-topic-modal { display: grid; grid-template-rows: auto auto auto minmax(0, 1fr) auto; width: min(760px, 100%); max-height: min(760px, calc(100vh - 48px)); overflow: hidden; border: 1px solid var(--line-dark, #8b83a6); border-radius: 14px; background: #fff; box-shadow: 0 24px 70px rgba(26, 22, 38, .24); }
.content-topic-modal-head { display: flex; justify-content: space-between; gap: 16px; padding: 22px 24px 16px; border-bottom: 1px solid var(--line-soft, #ebe7f6); }
.content-topic-modal-head > div { display: grid; gap: 4px; }
.content-topic-modal-head span, .content-topic-modal-head p, .content-topic-source span, .content-topic-toolbar, .content-topic-modal-foot span { color: var(--muted, #6b6480); font-size: 12px; }
.content-topic-modal-head h2 { margin: 0; color: var(--ink, #1a1626); font-size: 24px; font-weight: 600; }
.content-topic-modal-head p { margin: 2px 0 0; }
.content-topic-modal-head > button { align-self: start; border: 0; background: transparent; color: var(--muted, #6b6480); cursor: pointer; font-size: 26px; line-height: 1; }
.content-topic-source { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 13px 24px; background: var(--soft, #faf9fd); }
.content-topic-source b { color: var(--ink-2, #443c5c); font-size: 13px; }
.content-topic-list { min-height: 0; overflow: auto; padding: 8px 24px; }
.content-topic-row { display: grid; grid-template-columns: 20px 36px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 13px 8px; border-bottom: 1px solid var(--line-soft, #ebe7f6); cursor: pointer; }
.content-topic-row.selected { margin: 0 -8px; border-radius: 8px; background: #f4f2fa; }
.content-topic-row input { accent-color: #66559a; }
.content-topic-index { color: var(--muted, #6b6480); font-family: var(--font-mono, ui-monospace); font-size: 12px; }
.content-topic-copy { display: grid; gap: 4px; min-width: 0; }
.content-topic-copy strong { overflow: hidden; color: var(--ink, #1a1626); font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.content-topic-copy small { overflow: hidden; color: var(--muted, #6b6480); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.content-topic-row i { color: var(--muted, #6b6480); font-size: 11px; font-style: normal; }
.content-topic-row.selected i { color: #66559a; font-weight: 600; }
.content-topic-toolbar { display: flex; justify-content: space-between; gap: 12px; padding: 12px 24px 4px; }
.content-topic-toolbar b { color: var(--ink-2, #443c5c); font-weight: 600; }
.content-topic-modal-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 24px; border-top: 1px solid var(--line-soft, #ebe7f6); }
.content-topic-modal-foot > div { display: flex; gap: 8px; }
.content-topic-modal-foot button { min-height: 36px; padding: 0 13px; border: 1px solid var(--line-dark, #8b83a6); border-radius: 8px; background: #fff; color: var(--ink-2, #443c5c); cursor: pointer; }
.content-topic-modal-foot button:disabled { cursor: wait; opacity: .55; }
.content-board-grid { display: grid; grid-template-columns: minmax(250px, 0.8fr) minmax(420px, 1.4fr); gap: 16px; align-items: start; }
.content-post-list { display: grid; gap: 8px; }
.content-post-card { display: grid; gap: 7px; padding: 14px; text-align: left; border: 1px solid var(--line, #dedbd4); border-radius: 10px; background: #fff; cursor: pointer; }
.content-post-card.active { border-color: #2e6f63; box-shadow: 0 0 0 2px rgba(46,111,99,.12); }
.content-post-card-top { display: flex; justify-content: space-between; color: #2e6f63; font-size: 12px; }
.content-post-card-top i { color: #8b6b29; font-style: normal; }
.content-post-card strong { color: #25231f; font-size: 15px; }
.content-post-card small { color: #77736b; }
.content-editor { display: grid; gap: 12px; padding: 18px; border: 1px solid var(--line, #dedbd4); border-radius: 12px; background: #fff; }
.content-editor-meta { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: baseline; }
.content-publish-steps { display: grid; gap: 4px; padding: 11px 12px; border-radius: 8px; background: #f4f1e9; color: #514d45; font-size: 13px; }
.content-publish-steps span { color: #77736b; }
.content-editor label { display: grid; gap: 5px; color: #514d45; font-size: 13px; }
.content-editor input, .content-editor textarea { width: 100%; padding: 9px 10px; border: 1px solid #d9d5cc; border-radius: 8px; font: inherit; background: #fffdf8; }
.content-copy-field { display: flex; gap: 8px; align-items: flex-start; }
.content-copy-field input, .content-copy-field textarea { flex: 1; min-width: 0; }
.content-copy-field textarea { resize: vertical; }
.content-copy-field button { flex: 0 0 auto; padding: 9px 11px; border: 1px solid #d9d5cc; border-radius: 8px; background: #fffdf8; color: #514d45; cursor: pointer; white-space: nowrap; }
.content-copy-field button:hover { border-color: #2e6f63; color: #2e6f63; }
.content-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.content-media-grid figure { margin: 0; overflow: hidden; border: 1px solid #e1ddd4; border-radius: 8px; background: #f7f5ef; }
.content-media-grid img, .media-placeholder { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.media-placeholder { display: grid; place-items: center; color: #8c887e; font-size: 12px; }
.content-media-grid figcaption { padding: 6px 7px; color: #68645d; font-size: 11px; }
.content-ai-note { line-height: 1.5; }
.content-editor-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.content-editor-actions button { padding: 8px 12px; border: 1px solid #d9d5cc; border-radius: 8px; background: #fffdf8; cursor: pointer; }
.content-editor-actions button:disabled { cursor: wait; opacity: .6; }
@media (max-width: 900px) { .content-board-grid { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .content-board-toolbar, .content-board-toolbar-actions, .content-topic-modal-foot { align-items: stretch; flex-direction: column; } .content-topic-modal-backdrop { padding: 10px; } .content-topic-modal-head, .content-topic-source, .content-topic-list, .content-topic-toolbar, .content-topic-modal-foot { padding-left: 16px; padding-right: 16px; } .content-topic-source { align-items: flex-start; flex-direction: column; } .content-topic-modal-foot > div { justify-content: stretch; } .content-topic-modal-foot button { flex: 1; } }

/* T7-1：人审 / 机器启用分账那一行。中性底色——它是事实陈述，不是告警；
   价格 / 交付类里有机器启用的那句才换成琥珀的 .brain-live-note。 */
.brain-live-review-counts {
  font-size: 13px;
  line-height: 1.7;
  margin: 12px 0 0;
}

.brain-live-review-counts b {
  font-variant-numeric: tabular-nums;
}

/* 积木详情里那一行是 section，两句各占一行 */
section.brain-live-review-counts {
  display: flex;
  flex-direction: column;
  gap: 4px;
}