docs(design): 新增产品界面设计规范 v0.1、设计变量与组件预览

- design-system.md：原则、颜色与对比度实测、字体字阶、布局、17 个组件、交互模式、文案规范、无障碍与红线自查 - system/tokens.css：设计变量；system/components.html：用样本条款演示的组件预览 - 问题级别用实心 / 描边 / 无框区分（色弱模拟验证），红色只给致命问题 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-11-02 21:24:09 +08:00
parent 2e35c12a6f
commit cbd5c8d28d
4 changed files with 1090 additions and 1 deletions
--- a/docs/design/README.md
+++ b/docs/design/README.md
@@ -6,7 +6,9 @@
 | [brand-directions.html](brand-directions.html) | 三个视觉方向对比（A 校样 / B 卷宗 / C 检验单） | 已选 A |
 | [logo/](logo/) | Logo 正式资产、使用规范、构建脚本、历史版本 | v5.1 定稿 |
 | [vi/](vi/) | VI 视觉识别规范 PDF 与 HTML 源文件 | v1.1 |
-| design-system.md | 产品界面设计规范：组件、设计 token、问题级别配色 | 下一步 |
+| [design-system.md](design-system.md) | 产品界面设计规范：原则、颜色与对比度、字体字阶、布局、17 个组件、交互模式、文案规范 | v0.1（U1–U4 已确认） |
+| [system/tokens.css](system/tokens.css) | 设计变量（原型和前端直接引用） | v0.1 |
+| [system/components.html](system/components.html) | 组件预览页（用样本条款演示） | v0.1 |

 ## 速查

--- a/docs/design/design-system.md
+++ b/docs/design/design-system.md
@@ -0,0 +1,509 @@
+# 标博士 · 产品界面设计规范（v0.1 · 2026-11-02）
+
+> 范围：MVP 的 Web 界面（读标 M2、查标 M3、项目工作台与额度 M6）和检查报告 PDF。
+> 依据：视觉方向 A「校样」（决策 B1）、VI 手册 v1.1、品牌策略的语气规则、`docs/analysis/03-functional-requirements.md`。
+> 配套文件：
+> - `system/tokens.css`：设计变量（颜色、字体、字阶、间距、圆角、尺寸），原型和前端都直接引用；
+> - `system/components.html`：组件预览页，用真实样本条款演示（起本地服务后打开，见第 13 节）。
+>
+> 第 12 节的 U1–U4 已于 2026-11-02 全部按建议确认（`docs/decisions.md`）。
+
+---
+
+## 1. 设计原则
+
+| 原则 | 意思 | 落到界面上 |
+|---|---|---|
+| **出处看得见** | 每条结论都能回到原文，这是产品原则（B5） | 出处是问题和清单项的固定组成部分，默认展开，不藏在「详情」里 |
+| **颜色说明谁说的** | 蓝铅笔 = 系统（AI）说的，墨 = 人确认过的，绿 = 确认署名 | AI 产出一律带蓝色标记；人确认后变成墨色正文 + 绿色署名 |
+| **红色只给致命问题** | 界面上看到红色，就意味着有可能导致投标无效的问题 | 表单错误、系统故障、额度用完、截止临近都**不用红**，用赭色 |
+| **沉着，不阻断** | 截止前不添乱；决定权在用户 | 不闪烁、不弹窗打断、不用惊叹号；致命问题没处理完也能导出 |
+| **密度优先** | 投标专员一次要过几十上百条 | 正文 14px，列表行紧凑，支持键盘逐条处理和批量处理 |
+
+---
+
+## 2. 调研依据（为什么这样定）
+
+| 问题 | 依据 | 结论 |
+|---|---|---|
+| 正文字号 | 国内 B 端设计体系的通行值：TDesign `font-body-medium` 14/22，Ant Design 主字号 14、行高 22，字阶控制在 3–5 种 | 正文 14/22；同一屏不超过 5 个字号 |
+| 中文成段阅读的行高 | 中文字面满格，行高比西文需要更大；招标原文引用是成段阅读 | 引用原文用 14/24（约 1.7 倍） |
+| 宋体能用多小 | 思源宋体横画细，Windows 下 ClearType 渲染小字号时横画发虚；投标人大多用 Windows | 宋体只用于 ≥20px 的标题，界面正文一律黑体 |
+| 字体从哪加载 | Google Fonts 在国内访问不稳定；数据不出境（T1）的要求也延伸到前端资源 | 字体全部**自托管**；中文宋体用 Fontsource 的 `@fontsource/noto-serif-sc`（OFL，按 unicode-range 切片，页面只下载用到的字）；正文黑体用系统字体，不下载 |
+| 数字对齐 | 实测 Barlow Semi Condensed 的数字**默认是比例宽度**（「1」宽 309、「0」宽 507 字体单位），字体带 `tnum` 特性 | 表格、金额、页码列必须开 `font-variant-numeric: tabular-nums` |
+| 对比度 | WCAG 2.x：正文 ≥ 4.5:1，大字（≥18px，或 ≥14px 粗体）≥ 3:1，控件边框等识别所需的图形 ≥ 3:1（1.4.11） | 见第 3.2 节的实测值。赭色 #A66300 在校样纸上只有 4.4:1，小字改用深一级的 #8A5200；装饰分隔线可以浅，输入框边框必须 ≥ 3:1 |
+| 色弱 | 用 Machado 2009 模型模拟后算色差（ΔE，CIELAB）：红色弱下「致命红 / 定稿绿」只差 11.4，绿色弱下「致命红 / 赭」只差 15.9，都接近分不出来 | **问题级别和确认状态不能只靠颜色区分**，必须同时用文字和形状（实心 / 描边 / 无框、✓ 符号），见 3.3 |
+| 打印 | 检查报告会被打印给主管或老板看，常常是黑白打印 | 报告里的级别标签在灰度下也要能分辨（同样靠形状和文字） |
+
+---
+
+## 3. 颜色
+
+### 3.1 色板
+
+| 名称 | 变量 | HEX | 用途 |
+|---|---|---|---|
+| 校样纸 | `--c-paper` | #F5F6F3 | 页面底色（冷灰白，不是米色） |
+| 白 | `--c-white` | #FFFFFF | 卡片、表格、输入框、原文页面 |
+| 凹陷灰 | `--c-sunken` | #ECEEEA | 表头、「提示」级底色、只读区 |
+| 墨 | `--c-ink` | #1D2733 | 正文、标题、主按钮、人工确认后的内容、焦点环 |
+| 辅助灰 | `--c-sub` | #5C6670 | 次要文字、说明、「提示」级 |
+| 禁用灰 | `--c-muted` | #7A838C | **只用于**禁用文字和控件边框 |
+| 分隔线 | `--c-rule` | #D9DDD8 | 装饰性分隔线 |
+| 蓝铅笔 | `--c-pencil` | #2F5BD3 | AI 标注、出处、跳转原文的链接 |
+| 蓝铅笔浅 | `--c-pencil-soft` | #E7EDFB | 原句高亮 |
+| 致命红 | `--c-fatal` | #C4122F | **只用于「致命」级问题** |
+| 赭 | `--c-ochre` | #A66300 | 「重要」级边框和图标、系统提醒、表单错误、截止临近 |
+| 赭（小字） | `--c-ochre-ink` | #8A5200 | 18px 以下的赭色文字 |
+| 定稿绿 | `--c-green` | #2E6B4F | 人工确认的署名和 ✓ |
+
+每个功能色都有一个浅色底（`-soft`），只用作背景，文字仍用对应的深色。
+
+**不进界面的颜色**：印章红 #D9291C 和藏青 #1C2554 只属于 logo（VI 手册第 03 章）。
+
+### 3.2 对比度实测
+
+| 文字色 | 校样纸 | 白 | 用法限制 |
+|---|---|---|---|
+| 墨 #1D2733 | 13.9 | 15.1 | 无 |
+| 辅助灰 #5C6670 | 5.4 | 5.9 | 无 |
+| 蓝铅笔 #2F5BD3 | 5.4 | 5.9 | 在高亮底 #E7EDFB 上 5.0，仍达标 |
+| 致命红 #C4122F | 5.6 | 6.0 | 白字压红底 6.0 |
+| 定稿绿 #2E6B4F | 5.8 | 6.3 | — |
+| 赭 #A66300 | **4.4** | 4.8 | 校样纸上只能用于 ≥18px 的字、边框、图标 |
+| 赭小字 #8A5200 | 5.9 | 6.4 | 18px 以下的赭色文字都用它 |
+| 禁用灰 #7A838C | 3.6 | 3.9 | 只用于禁用状态和控件边框，**不能用于正文和占位符**（占位符用辅助灰） |
+
+分隔线 #D9DDD8 只有 1.3:1，所以它只能做装饰性分隔；需要用户看清边界的控件（输入框、复选框、次按钮）用 `--border-control`（#7A838C，3.6:1）。
+
+### 3.3 不能只靠颜色
+
+| 要区分的东西 | 颜色 | 形状 / 文字（必须同时有） |
+|---|---|---|
+| 致命 | 致命红 | **实心**标签，白字「致命」 |
+| 重要 | 赭 | **描边**标签（1.5px），赭色字「重要」 |
+| 提示 | 辅助灰 | **无边框**，灰底灰字「提示」 |
+| AI 产出 | 蓝铅笔 | 「AI」小标签或「AI 摘要 / AI 初稿」字样，左侧虚线竖线 |
+| 人工确认 | 墨 + 定稿绿 | ✓ 符号 + 「王敏 11月2日 14:20 确认无误」署名行 |
+| 待确认区 | 蓝铅笔 | 虚线框 + 区块标题「待确认」 |
+
+### 3.4 颜色禁忌
+
+- 不用红色做按钮（包括删除按钮）、表单错误、系统错误、倒计时、额度用完提示。删除这类操作靠二次确认，不靠颜色吓人。
+- 不用定稿绿表示「通过 / 合格」。绿色只表示「有人确认过」，不表示结论好。
+- 不用蓝铅笔做普通导航链接、主按钮。蓝色只属于系统说的话和出处。普通链接用墨色加下划线。
+- 不用渐变、不用大面积彩色底。一屏之内彩色面积越少，致命红越显眼。
+
+---
+
+## 4. 字体
+
+### 4.1 字体栈与加载
+
+| 用途 | 变量 | 字体 | 加载方式 |
+|---|---|---|---|
+| 界面正文 | `--font-sans` | 苹方 → 微软雅黑 → 思源黑体（Noto Sans SC） | 系统字体，不下载 |
+| 标题 | `--font-serif` | 思源宋体 SemiBold（Noto Serif SC 600） | 自托管 `@fontsource/noto-serif-sc`，只引 600 字重 |
+| 数字 | `--font-figures` | Barlow Semi Condensed 500 / 600 | 自托管 `@fontsource/barlow-semi-condensed` |
+
+- 不用 Google Fonts 等境外 CDN；字体文件随前端一起部署。
+- 检查报告 PDF 在服务端生成，**嵌入**思源黑体和思源宋体，保证不同电脑打开效果一致。
+- 三套字体都是 SIL OFL 1.1，许可证文件在 `logo/licenses/`。
+
+### 4.2 字阶
+
+| 级别 | 字号 / 行高 | 字体与字重 | 用在 |
+|---|---|---|---|
+| H1 | 24 / 32 | 宋体 600 | 工作台标题、项目名、报告标题 |
+| H2 | 20 / 28 | 宋体 600 | 页面标题（「采购包 2 的检查结果」） |
+| Title | 16 / 24 | 黑体 600 | 问题标题、区块标题、对话框标题 |
+| Body | 14 / 22 | 黑体 400 | 界面正文、表格 |
+| Read | 14 / 24 | 黑体 400 | 招标原文、投标原文的引用 |
+| Caption | 12 / 20 | 黑体 400 | 时间戳、脚注、表单说明；**最小字号**，正文不用 |
+| Figure | 30 / 36 | Barlow 600 | 工作台统计数字、额度剩余 |
+
+- 字重只用 400 和 600 两档（黑体在 Windows 上 500 和 400 几乎看不出区别）。
+- 强调用加粗，不用斜体（中文没有真斜体）、不用彩色。
+
+### 4.3 数字与中英文混排
+
+- **独立出现的数字**用 Barlow：表格里的金额 / 参数值、页码「第 41 页」、倒计时、统计数字、额度。表格列加 `tabular-nums`，金额右对齐。
+- **句子里的数字**跟着正文黑体走，不换 Barlow，避免一句话里字形忽宽忽窄。
+- 中文与数字、英文之间加一个半角空格：「第 41 页」「≥ 512G」「采购包 2」。比较符号与数值之间也加空格。
+- 招标原文引用**照录原文**，不加空格、不改标点、不改 ★ ▲ 等符号。
+
+---
+
+## 5. 间距、圆角与布局
+
+### 5.1 基础
+
+- 间距以 4px 为基准：4 / 8 / 12 / 16 / 20 / 24 / 32 / 40 / 48 / 64（`--sp-*`）。
+- 组件内部用 4–12，组件之间 16–24，区块之间 32–48。
+- 圆角：控件和卡片 2px（纸张感，接近直角），对话框和浮层 4px。不用大圆角和胶囊形。
+- 层次靠分隔线和底色区分，不靠阴影。阴影只用于浮层（下拉、对话框、提示）。
+
+### 5.2 平台与尺寸
+
+- **MVP 只做桌面 Web**，设计基准宽度 1440，最小支持 1280（1366×768 笔记本在国内政企仍常见）。小于 1280 时页面横向滚动，不做手机适配（见 U2）。
+- 浏览器：Chrome、Edge 和国产双核浏览器的极速模式（Chromium 内核）。不支持 IE 和兼容模式，检测到时提示切换。
+- 不做暗色模式（U2）；变量按语义分层，以后加暗色只需重新赋值语义变量。
+
+### 5.3 页面框架
+
+```
+┌──────────┬──────────────────────────────────────────────┐
+│ 侧边栏    │ 顶栏：面包屑 · 项目名 · 截止倒计时 · 额度 · 账号 │
+│ 216px    ├──────────────────────────────────────────────┤
+│ 工作台    │                                              │
+│ 项目      │  页面内容（最大宽度 1200px，三种主布局见下）     │
+│ 资质库    │                                              │
+│ 额度      │                                              │
+└──────────┴──────────────────────────────────────────────┘
+```
+
+| 布局 | 页面 | 结构 |
+|---|---|---|
+| 列表 | 工作台、资质库、额度流水 | 筛选栏 + 表格，单栏 |
+| 对照 | 读标（清单）、查标（问题列表） | 左：分类导航 200px；中：列表；右：**原文查看器**，宽度可拖动（默认 45%） |
+| 批注 | 查标结果的默认视图 | 问题列表 + 右侧 280px 页边批注栏（出处）；窄于 1440 时批注收进问题下方 |
+
+点出处时，对照布局的右栏直接翻到对应页并高亮；批注布局下从右侧滑出原文查看器，不跳页面。
+
+---
+
+## 6. 图标
+
+- 用 **Lucide**（ISC 许可，可商用）线性图标，描边 1.5px，尺寸 16 / 20px，颜色跟随文字色。
+- 图标只做辅助，必须和文字一起出现；只有图标的按钮要有 `aria-label` 和悬停提示。
+- ★ ▲ 是招标文件里的标注符号，按文字显示，不换成图标。
+- 不用笑脸、奖杯、盾牌对勾这类暗示「保证」的图形。
+
+---
+
+## 7. 组件
+
+每个组件写明：用途、结构、状态、规则。示意见 `system/components.html`。
+
+### 7.1 按钮
+
+| 类型 | 样式 | 用于 |
+|---|---|---|
+| 主按钮 | 墨底白字 | 一屏只有一个：「发起检查」「导出报告」「确认清单」 |
+| 次按钮 | 白底墨字，控件边框 | 其他操作，包括问题处理三按钮 |
+| 文字按钮 | 墨字，无边框，悬停出底色 | 表格行内、次要操作 |
+
+- 高度 32（默认）/ 28（表格行内）/ 40（登录页、空状态）。左右内边距 12 / 8 / 16。
+- **没有红色的危险按钮**。删除项目、删除文件用次按钮 + 确认对话框；删除项目要输入项目名才能确认。
+- 会扣点的按钮，旁边直接写扣多少、还剩多少（见 8.3），不放在弹窗里才说。
+- 状态：悬停（主按钮变浅 8%，次按钮出 `--bg-hover`）、按下、禁用（禁用灰字、无边框底色）、加载中（文字换成「正在…」，按钮宽度不变）。
+- 按钮文字是动词短语，和结果状态用同一个词（品牌策略第 4 节）。
+
+### 7.2 问题级别标签
+
+```
+[致命]  实心，白字压致命红
+[重要]  1.5px 赭色描边，赭色小字
+[提示]  无边框，凹陷灰底，辅助灰字
+```
+
+- 字号 12，字重 600，高 20，左右内边距 6，圆角 2。
+- 级别由规则决定（FR-M3-03 的级别表），用户不能改级别；不同意可以「反馈：判断有误」。
+- 计数徽标也用同一套形状：「致命 2」实心、「重要 5」描边、「提示 11」无框。
+
+### 7.3 出处（页边批注）
+
+出处是标博士最重要的组件。
+
+```
+│ 招标文件 · 第 41 页                   ← 蓝铅笔，Barlow 页码，可点击
+│ ★ 2U 机架式服务器，CPU：配置≥2颗…      ← 原句照录，14/24，墨色字 + 蓝铅笔浅高亮
+│ 投标文件 技术册 · 第 12 页             ← 第二个出处（投标方）
+│ 内存：256G DDR4
+```
+
+- 左侧 2px 蓝铅笔竖线；在批注布局里，用一条虚线连到对应的问题。
+- 一条结论可以有多个出处，按「招标原文 → 投标原文」排序，最多默认展开 2 条，其余「另有 N 处」。
+- **「未找到」也是一种出处**：写明找过哪些分册、哪些章节，例如「已查找：商务册、技术册（全部章节）、资格证明册；未找到对应响应」。
+- 引用超过 3 行时截断，「展开原文」显示全句；原句必须完整可见，不能只给页码。
+- 出处无法定位的结果不进正式清单，进「待确认」区（FR-M2-06/07）；界面上**不出现没有出处的结论**。
+- 扫描件 OCR 识别出的原句，前面加「OCR」小字，提醒用户核对原图。
+
+### 7.4 问题行（查标）
+
+```
+[致命]  报价超过采购包 2 的最高限价                         新增
+开标一览表报价 133.60 万元，最高限价 132.00 万元，超出 1.60 万元。
+这一项会导致投标无效。请核对开标一览表的报价。
+[确认无误] [已修改] [忽略并注明原因]                判断有误？
+```
+
+- 结构：级别标签 → 标题（结论）→ 说明（事实 + 后果 + 改法）→ 处理按钮 → 出处（右侧或下方）。
+- 标题写结论，不写规则名：「报价超过采购包 2 的最高限价」，不写「报价限价规则命中」。
+- 复查标记放在标题行右侧：「新增」「沿用」「本次已解决」（FR-M3-08），用辅助灰小字，不用颜色。
+- 处理后：按钮收起，换成署名行「✓ 王敏 11月2日 14:20 已修改」（绿），可「撤销」。忽略的署名行带原因。
+- 「致命」行左侧加 3px 致命红竖线，方便在长列表里扫读；「重要」「提示」不加。
+- 已处理的问题默认折叠到列表底部「已处理（N）」，避免干扰。
+- 每行都有「判断有误？」文字链接，打开反馈表单（FR-M3-07 / J5）。
+- 「致命」级点「确认无误」时，展开一个必填的说明输入框（U4），说明同时作为误报反馈提交。
+
+**三个处理动作的含义**（按钮下方悬停提示要写清楚，避免误解）：
+
+| 按钮 | 含义 | 结果状态 |
+|---|---|---|
+| 确认无误 | 我核对过，投标文件这里没问题（例如响应写在别处） | 已确认无误 |
+| 已修改 | 我已经在投标文件里改了，复查时会再查 | 已修改 |
+| 忽略并注明原因 | 我知道这个问题，决定不处理（必须填原因） | 已忽略 |
+
+### 7.5 清单项（读标）
+
+- 一行：重要性符号（★ / ▲ / 空）→ 标题 → 类别标签（可多个，灰色描边小标签）→ 所属包 → 来源 → 出处。
+- 来源标注：「AI 提取」（蓝铅笔）、「人工添加」（墨）、「补遗 2」（墨）。
+- 被用户改过的条目显示「已修改 · 查看记录」，打开修改历史（谁、何时、改前、改后）。
+- 「已被补遗 N 更新」的旧值加删除线，新值旁边写来源，用户确认后去掉提示（FR-M2-10）。
+- 清单整体状态显示在页头：「草稿」（辅助灰描边）/「已确认 · 王敏 11月2日」（绿色署名）。
+
+### 7.6 待确认区
+
+- 虚线蓝铅笔边框的独立区块，标题「待确认（N）」，说明一句：「这些结果没有找到可靠出处，或系统把握不大。确认之前，不参与检查。」
+- 每条三个动作：「补上出处后采纳」「修改后采纳」「丢弃」。没有出处也要采纳时，标注「人工确认、无出处」。
+- 待确认区不和正式清单混排，放在清单顶部，有条目时默认展开。
+
+### 7.7 参数对照表
+
+技术参数的检查结果用表格（借鉴方向 C「检验单」的写法）：
+
+| 参数项 | 要求 | 投标响应 | 判断 | 出处 |
+|---|---|---|---|---|
+| ★ 内存 | ≥ 512G DDR4 | 256G DDR4 | **疑似不满足** | 第 41 页 ↔ 技术册 第 12 页 |
+
+- 要求和响应列用 Barlow + `tabular-nums`，数值左对齐（参数是「数 + 单位 + 说明」，右对齐反而难读）。
+- 「判断」列只用四个词：**满足 / 疑似不满足 / 未找到响应 / 需人工判断**。不用「合格 / 不合格 / 通过」。
+- 「疑似不满足」用所在行的问题级别标签颜色；「满足」用墨色普通字，不用绿色（绿色只表示人工确认）。
+- 表头凹陷灰底、2px 墨色底线；行间 1px 分隔线；行高 40。
+
+### 7.8 原文查看器
+
+- 白色页面，按规范化 PDF 显示（出处页码以它为准）。
+- 高亮：原句用蓝铅笔浅底 + 1px 蓝铅笔描边框；当前选中的出处描边加粗为 2px，并自动滚动到可见区域。
+- 顶部：文件名、文件类型（招标文件 / 补遗 N / 投标分册）、页码跳转「第 41 / 186 页」、上一处 / 下一处高亮。
+- OCR 页面显示「扫描页 · 文字由 OCR 识别」，高亮按 OCR 坐标。
+- 原文只读，不允许在查看器里改文字。
+
+### 7.9 项目行（工作台）
+
+| 列 | 内容 | 规则 |
+|---|---|---|
+| 项目 | 项目名（16/24 600）+ 采购人（辅助灰） | |
+| 所投包 | 「采购包 2」或「全部」 | |
+| 截止 | 倒计时 | 见下 |
+| 状态 | 跟进中 / 编制中 / 已检查 / 已递交 / 已归档 | 中性描边标签，不用彩色 |
+| 就绪 | 只在「已检查」显示 | 见下 |
+| 致命 | 待处理的致命问题数 | 实心标签「致命 2」；为 0 时显示「—」 |
+
+**倒计时**（以投标截止时间为准）：
+
+| 剩余时间 | 显示 | 颜色 |
+|---|---|---|
+| > 72 小时 | 「11月20日 09:30 · 剩 17 天」 | 墨 |
+| ≤ 72 小时 | 「剩 2 天 5 小时」 | 赭小字 |
+| ≤ 24 小时 | 「今天 09:30 截止」/「剩 6 小时」 | 赭小字，加粗 |
+| 已过 | 「已截止」 | 辅助灰 |
+
+**就绪状态**：「未就绪」（墨色普通字，致命数量看「致命」列）/「就绪」（墨色描边标签）。项目详情页的页头合在一起写：「未就绪 · 2 项致命问题待处理」。「就绪」悬停说明：「只表示致命问题都已处理，不代表投标文件没有问题。」
+
+### 7.10 额度
+
+- 顶栏常驻：「解析 37 · 检查 12」（Barlow），点开额度页。
+- 额度条：已用部分墨色，80% 起变赭色并出现一行提醒，100% 时提醒「本期检查额度已用完，续费或下期发放后可继续」。**不用红色**。
+- 流水表：时间、类型（发放 / 预扣 / 结算 / 退回 / 过期 / 人工调整）、数量（+ / −，Barlow 等宽）、关联项目和任务、原因。退回的记录和对应的预扣记录相邻显示。
+
+### 7.11 异步任务进度（解析 / 检查）
+
+- 分阶段列表：「识别文件格式 → 提取文字 → 识别分包 → 提取清单 → 核对出处」，当前阶段有进度，已完成的打 ✓。
+- 明确告诉用户可以离开：「可以离开本页，完成后会发站内通知。」
+- 失败时说清楚原因和扣点情况：「解析失败：文件已加密。已退回 1 次解析额度。」赭色提醒，不用红。
+
+### 7.12 提醒与通知
+
+| 类型 | 样式 | 例子 |
+|---|---|---|
+| 信息 | 白底，墨色左边线 | 「清单未确认，检查结果以当前清单为准。」 |
+| 提醒 | 赭浅底，赭色左边线，赭小字标题 | 额度 80%、截止 ≤ 72 小时、解析失败、上传文件超限 |
+| 完成 | 白底，绿色 ✓ | 「报告已导出」 |
+
+- 页内提醒（Alert）放在相关内容上方，不自动消失；轻提示（Toast）只用于操作结果，4 秒后消失，可悬停暂停。
+- 不用弹窗打断。只有不可撤销的操作（删除、标记已递交）才用确认对话框。
+
+### 7.13 表单
+
+- 标签在输入框上方，必填项在标签后写「（必填）」，不用红色星号。
+- 错误提示：输入框边框变赭色 + 下方赭小字说明 + 「!」图标。说明写清楚怎么改：「手机号应为 11 位数字」。
+- 校验时机：离开输入框时校验，提交时汇总。
+- 「忽略并注明原因」的原因输入框：至少 5 个字，给 3 个常用原因快捷选项（「招标文件允许」「已在其他分册响应」「与本项目无关」）。
+
+### 7.14 对话框
+
+- 宽 480（确认）/ 640（表单），圆角 4，浮层阴影。
+- 标题写要做的事：「删除项目「智慧规划资源 2025 标段三」？」；正文写后果；按钮「删除项目」「取消」，主操作在右。
+- 删除项目要输入项目名才能点删除；说明删除后 30 天内可在回收站恢复（以 G10 定稿为准）。
+
+### 7.15 空状态、加载与错误
+
+- 空状态写下一步做什么，带一个主按钮：「还没有招标文件。上传后，标博士会逐条提取要求。」
+- 加载用骨架屏，不用转圈占满屏。
+- 系统错误：「出了点问题，请稍后重试。本次操作未扣额度。」带错误编号，便于客服查询。
+
+### 7.16 AI 标识
+
+- 系统生成的文字（摘要、说明、初稿）前面加「AI 摘要」「AI 初稿」标签：蓝铅笔 1px 描边、蓝铅笔字。
+- 人修改或确认后，标签换成署名行，文字变为墨色。
+
+### 7.17 检查报告 PDF
+
+- A4 竖版，页边距 20mm，思源黑体正文 10.5pt / 行距 1.6，标题思源宋体。
+- 页眉：左侧小号横版 logo（干净版），右侧「投标文件辅助检查报告」。**logo 只出现在页眉**，不放在任何结论、汇总数字或签名旁边（红线：logo 不能当「通过」章）。
+- 首页：项目信息、投标文件版本、检查时间、规则版本、**检查覆盖范围**（查了什么 / 没查什么）、免责声明。
+- 问题明细的级别标签和界面一致（实心 / 描边 / 无框），黑白打印也能分辨。
+- 页脚：页码「3 / 12」+「本报告为辅助检查结果，不构成对投标结果的保证」。
+- 全文不出现「通过」「合格」「保证」。
+
+---
+
+## 8. 交互模式
+
+### 8.1 AI 产出 → 人工确认 → 留痕
+
+所有 AI 产出都走同一个流程，视觉上一以贯之：
+
+1. **AI 产出**：蓝铅笔标记（「AI 提取」「AI 摘要」、出处蓝色）。
+2. **人处理**：三个动作之一，忽略要填原因。
+3. **署名**：绿色 ✓ + 姓名 + 时间 + 动作，文字变墨色。
+4. **留痕**：每条都能打开「处理记录」，看到全部历史。
+
+### 8.2 键盘逐条处理
+
+问题列表和清单支持键盘，方便一次过几十条：
+
+| 键 | 动作 |
+|---|---|
+| J / K | 下一条 / 上一条 |
+| O 或 Enter | 在原文查看器里打开当前出处 |
+| 1 / 2 / 3 | 确认无误 / 已修改 / 忽略（3 会打开原因输入框） |
+| U | 撤销当前条的处理 |
+| ? | 显示快捷键说明 |
+
+批量处理只开放给「提示」级（FR-M3-07）：勾选后「批量确认无误」。
+
+### 8.3 扣点前先告知
+
+- 会扣点的按钮旁边写：「扣 1 次检查 · 剩 12 次」。24 小时内复查不扣点时写：「24 小时内复查，不扣额度」。
+- 失败、超时、取消的任务，在结果里写明「已退回」。
+- 额度不足时按钮仍可点，点击后说明不足并给续费入口，不提前把按钮置灰（用户需要知道原因）。
+
+### 8.4 不阻断
+
+- 致命问题没处理完时，「导出报告」仍可用；导出前在按钮旁提示「还有 2 项致命问题待处理，报告会如实列出」。
+- 「标记已递交」同理，只提示，不拦截。
+
+---
+
+## 9. 文案规范
+
+### 9.1 术语跟着法律体系和采购方式走
+
+| 概念 | 政府采购 · 公开招标 | 政府采购 · 竞争性磋商 / 谈判 | 招标投标体系 |
+|---|---|---|---|
+| 用户提交的文件 | 投标文件 | 响应文件 | 投标文件 |
+| 被判无效 | 投标无效 | 无效响应 | 否决投标 |
+| 招标方文件 | 招标文件 | 磋商文件 / 谈判文件 | 招标文件 |
+| 分组 | 采购包 | 采购包 | 标段 |
+
+界面文案用变量写（如 `{投标文件}`），按项目识别出的体系和采购方式替换，不在代码里写死。
+
+### 9.2 禁用词
+
+| 不用 | 原因 | 改为 |
+|---|---|---|
+| 保证、确保、零废标、100%、万无一失 | 产品红线 3 | 辅助检查、风险提示 |
+| 通过、合格、审核通过、检查通过 | 暗示结论担保 | 已处理、就绪（附说明）、满足（仅参数对比） |
+| 智能引擎、规则命中、要素、实体 | 不是投标人的话 | 用具体的业务词 |
+| 建议报价、报价区间、合理报价 | 产品红线 6 | （不出现） |
+| 真伪、伪造、有效印章 | 产品红线 7 | 「有无签章」「签章位置」 |
+| ！（惊叹号）、「请注意」「警告」开头 | 品牌性格「沉着」 | 直接写事实和后果 |
+
+### 9.3 格式
+
+| 内容 | 写法 |
+|---|---|
+| 页码 | 「第 41 页」；带文件时「招标文件 · 第 41 页」「技术册 · 第 12 页」 |
+| 金额 | 沿用招标文件的单位，保留两位小数：「132.00 万元」；不换算单位 |
+| 日期时间 | 界面：「11月2日 14:20」（跨年时带年份）；报告和留痕：「2026-11-02 14:20」 |
+| 数量 | 「致命 2 项」「共 186 页」 |
+| 标点 | 中文用全角标点，引用原文照录 |
+
+### 9.4 常用句式
+
+| 场景 | 写法 |
+|---|---|
+| 未找到响应 | 「未找到对 ★ 条款的响应。已查找：商务册、技术册、资格证明册。」 |
+| 疑似不满足 | 「技术偏离表第 12 行响应「内存 256G」，要求「≥512G」。」 |
+| 后果 | 「这一项会导致投标无效。」（体系为招标投标时：「这一项会导致投标被否决。」） |
+| 改法 | 「请在技术偏离表第 12 行补充响应。」 |
+| 签章 | 「投标函第 2 页的签章位置未发现盖章。本检查只看有无，不鉴定真伪。」 |
+
+---
+
+## 10. 无障碍检查清单
+
+- [ ] 文字对比度 ≥ 4.5:1（大字 ≥ 3:1），控件边框 ≥ 3:1 —— 见 3.2
+- [ ] 级别、状态不只靠颜色 —— 见 3.3
+- [ ] 所有操作可用键盘完成；焦点环 2px 墨色 + 2px 间隙，任何背景上都看得见
+- [ ] 只有图标的按钮有 `aria-label`
+- [ ] 原文高亮除颜色外还有描边框
+- [ ] 尊重「减少动态效果」系统设置；动效时长 120–200ms，不闪烁
+- [ ] 浏览器缩放到 200% 时内容不丢失（可以横向滚动）
+
+---
+
+## 11. 产品红线自查（对应 AGENTS.md）
+
+| 红线 | 本规范怎么落实 |
+|---|---|
+| 1 辅助定位四件套 | AI 标识（7.16）、清单（7.5）、处理按钮与署名（7.4、8.1）、处理记录（7.5、8.1） |
+| 2 可复核 | 出处组件是固定组成部分（7.3）；无出处进待确认区（7.6） |
+| 3 禁用绝对化表述 | 禁用词表（9.2）；报告首页覆盖范围与免责声明（7.17） |
+| 4 不阻断用户 | 8.4；就绪状态只提示（7.9） |
+| 5 不编造 | 资质只来自资质库；缺失时显示占位「待补录」，不生成 |
+| 6 不生成报价 | 参数表与报价检查只显示投标文件读出的数字；禁用词表 |
+| 7 签章只看有无 | 签章句式（9.4） |
+| 9 额度即货币 | 扣点前告知、退回可见（7.10、8.3） |
+| logo 不当「通过」章 | 报告 logo 只在页眉（7.17）；绿色不表示「通过」（3.4） |
+
+---
+
+## 12. 已确认的事项（U1–U4，2026-11-02）
+
+| 编号 | 事项 | 结论 | 理由 |
+|---|---|---|---|
+| U1 | 表单错误、系统错误、额度用完、截止临近都不用红色，统一用赭色 | 采纳 | 让红色只代表「可能导致投标无效」；色弱测试显示红 / 赭本来就靠形状区分，错误提示照样有文字和图标 |
+| U2 | MVP 只做桌面 Web（最小 1280 宽），不做手机适配和暗色模式 | 采纳 | 读标和查标需要原文并排，手机屏放不下；变量已按语义分层，以后可加 |
+| U3 | 图标用 Lucide（ISC 许可） | 采纳 | 线性风格和校样方向一致，图标全，可商用 |
+| U4 | 「致命」级问题点「确认无误」时，也要求写一句说明（目前需求只要求「忽略」填原因） | 采纳 | 对致命问题说「没问题」，等于认为系统判断错了：留下说明既便于审计，也是最有价值的误报反馈。会改动 FR-M3-07 |
+
+组件库（TDesign / Ant Design / Arco 等）由技术架构阶段选定；本规范的正文 14/22、4px 间距与这些组件库一致，选定后把 `tokens.css` 映射到它的主题配置即可。
+
+---
+
+## 13. 预览与维护
+
+- 预览组件页（字体从 `logo/.work/fonts` 加载，没有该目录时会退回系统字体）：
+
+  ```bash
+  cd docs/design && python3 -m http.server 8765
+  # 浏览器打开 http://127.0.0.1:8765/system/components.html
+  ```
+
+- 改颜色、字号、间距：只改 `system/tokens.css`，再同步本文的表格。
+- 新增组件：先在本文第 7 节写用途、结构、状态、规则，再加到预览页。
+- 本规范变化影响 VI 手册（颜色、字体）时，同步更新 `vi/vi-manual.html` 并重出 PDF。
--- a/docs/design/system/components.html
+++ b/docs/design/system/components.html
@@ -0,0 +1,473 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>标博士 组件预览</title>
+<link rel="stylesheet" href="tokens.css">
+<style>
+/* 本地预览用：字体从 logo/.work/fonts 加载（不进 git）；正式前端改用 @fontsource 自托管 */
+@font-face{font-family:"Noto Serif SC";src:url("../logo/.work/fonts/NotoSerifSC%5Bwght%5D.ttf") format("truetype");font-weight:200 900}
+@font-face{font-family:"Barlow Semi Condensed";src:url("../logo/.work/fonts/BarlowSemiCondensed-Medium.ttf") format("truetype");font-weight:500}
+@font-face{font-family:"Barlow Semi Condensed";src:url("../logo/.work/fonts/BarlowSemiCondensed-SemiBold.ttf") format("truetype");font-weight:600}
+
+*{box-sizing:border-box}
+body{margin:0;background:var(--bg-page);color:var(--text-primary);font:var(--fs-body)/var(--lh-body) var(--font-sans);-webkit-font-smoothing:antialiased}
+:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
+.page{max-width:1240px;margin:0 auto;padding:var(--sp-12) var(--sp-6) var(--sp-16)}
+h1{font:var(--fw-bold) 32px/40px var(--font-serif);margin:0 0 var(--sp-2)}
+.lede{color:var(--text-secondary);margin:0;max-width:52em}
+section{margin-top:var(--sp-12)}
+.sec-h{display:flex;align-items:baseline;gap:var(--sp-3);border-bottom:2px solid var(--border-strong);padding-bottom:var(--sp-2);margin-bottom:var(--sp-5)}
+.sec-h h2{font:var(--fw-bold) var(--fs-h2)/var(--lh-h2) var(--font-serif);margin:0}
+.sec-h .no{font:600 var(--fs-title)/1 var(--font-figures);color:var(--text-secondary)}
+.sec-h .ref{margin-left:auto;font-size:var(--fs-caption);color:var(--text-secondary)}
+.note{font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--text-secondary);margin:var(--sp-3) 0 0}
+.card{background:var(--bg-surface);border:var(--line) solid var(--border-subtle);border-radius:var(--radius-sm);padding:var(--sp-5) var(--sp-6)}
+.row{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center}
+.grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-6)}
+.fig{font-family:var(--font-figures);font-variant-numeric:tabular-nums;font-weight:600}
+
+/* ---- 色板 ---- */
+.swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-3)}
+.sw{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);overflow:hidden;font-size:var(--fs-caption);line-height:var(--lh-caption)}
+.sw i{display:block;height:56px;border-bottom:1px solid var(--border-subtle)}
+.sw div{padding:var(--sp-2) var(--sp-3)}
+.sw b{display:block;font-size:var(--fs-body)}
+.sw .fig{font-weight:500;color:var(--text-secondary)}
+
+/* ---- 字阶 ---- */
+.type td{padding:var(--sp-3) var(--sp-4) var(--sp-3) 0;border-bottom:1px solid var(--border-subtle);vertical-align:baseline}
+.type td:first-child{width:120px;color:var(--text-secondary);font-size:var(--fs-caption)}
+.type table{border-collapse:collapse;width:100%}
+
+/* ---- 级别标签 ---- */
+.sev{display:inline-flex;align-items:center;height:20px;padding:0 6px;border-radius:var(--radius-sm);font:var(--fw-bold) var(--fs-caption)/1 var(--font-sans);white-space:nowrap}
+.sev .fig{margin-left:4px;font-size:13px}
+.sev.fatal{background:var(--sev-fatal);color:var(--text-on-dark)}
+.sev.major{border:var(--line-sev) solid var(--sev-major);color:var(--sev-major-text)}
+.sev.hint{background:var(--sev-hint-soft);color:var(--sev-hint)}
+.tag{display:inline-flex;align-items:center;height:20px;padding:0 6px;border:1px solid var(--border-subtle);border-radius:var(--radius-sm);font-size:var(--fs-caption);color:var(--text-secondary);white-space:nowrap}
+.tag.status{border-color:var(--border-control);color:var(--text-primary)}
+.tag.ai{border-color:var(--ai);color:var(--ai)}
+.flag{font-size:var(--fs-caption);color:var(--text-secondary)}
+
+/* ---- 按钮 ---- */
+.btn{display:inline-flex;align-items:center;gap:6px;height:var(--control-h);padding:0 12px;border-radius:var(--radius-sm);border:1px solid var(--border-control);background:var(--bg-surface);color:var(--text-primary);font:var(--fs-body)/1 var(--font-sans);cursor:pointer;transition:background var(--dur-fast) var(--ease)}
+.btn:hover{background:var(--bg-hover)}
+.btn.primary{background:var(--c-ink);border-color:var(--c-ink);color:var(--text-on-dark)}
+.btn.primary:hover{background:#34404D}
+.btn.text{border-color:transparent;background:none}
+.btn.text:hover{background:var(--bg-hover)}
+.btn.sm{height:var(--control-h-sm);padding:0 8px}
+.btn.lg{height:var(--control-h-lg);padding:0 16px}
+.btn[disabled]{color:var(--text-disabled);background:var(--bg-sunken);border-color:var(--bg-sunken);cursor:not-allowed}
+.cost{font-size:var(--fs-caption);color:var(--text-secondary)}
+.cost .fig{font-weight:500;font-size:13px}
+a.plain{color:var(--text-primary);text-underline-offset:3px}
+
+/* ---- 问题行 + 页边批注 ---- */
+.results{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-sm)}
+.results-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sp-3);padding:var(--sp-5) var(--sp-6);border-bottom:1px solid var(--border-subtle)}
+.results-head h3{font:var(--fw-bold) var(--fs-h2)/var(--lh-h2) var(--font-serif);margin:0}
+.results-head .proj{color:var(--text-secondary)}
+.results-head .counts{margin-left:auto;display:flex;gap:var(--sp-2)}
+.finding{position:relative;display:grid;grid-template-columns:minmax(0,1fr) var(--margin-note-w);gap:var(--sp-8);padding:var(--sp-5) var(--sp-6);border-top:1px solid var(--border-subtle)}
+.finding:first-of-type{border-top:0}
+.finding.is-fatal::before{content:"";position:absolute;left:0;top:var(--sp-5);bottom:var(--sp-5);width:3px;background:var(--sev-fatal)}
+.f-head{display:flex;align-items:center;gap:var(--sp-2)}
+.f-title{font:var(--fw-bold) var(--fs-title)/var(--lh-title) var(--font-sans)}
+.f-head .flag{margin-left:var(--sp-1);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);padding:0 5px;line-height:18px}
+.f-text{margin:var(--sp-2) 0 0;color:var(--text-primary)}
+.f-text + .f-text{margin-top:0}
+.f-actions{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center;margin-top:var(--sp-3)}
+.f-actions .feedback{margin-left:auto;font-size:var(--fs-caption)}
+.sign{margin-top:var(--sp-3);font-size:var(--fs-body);color:var(--confirmed);display:flex;gap:var(--sp-2);align-items:baseline;flex-wrap:wrap}
+.sign b{font-weight:var(--fw-bold)}
+.sign .fig{font-weight:500}
+.sign .undo{color:var(--text-secondary);font-size:var(--fs-caption);margin-left:var(--sp-2)}
+.cite{position:relative;border-left:2px solid var(--ai);padding:2px 0 2px var(--sp-3)}
+.cite + .cite{margin-top:var(--sp-3)}
+.finding .cite:first-child::before{content:"";position:absolute;left:calc(-1 * var(--sp-8) - 2px);top:11px;width:calc(var(--sp-8) - 4px);border-top:1.5px dashed var(--ai)}
+.cite-src{display:block;color:var(--ai);font-size:var(--fs-caption);line-height:var(--lh-caption);text-decoration:none}
+.cite-src:hover{color:var(--ai-strong);text-decoration:underline;text-underline-offset:3px}
+.cite-src .fig{font-size:13px;font-weight:600}
+.cite q{display:block;quotes:none;margin-top:2px;line-height:var(--lh-read);color:var(--text-primary)}
+.cite q mark{background:var(--ai-soft);color:inherit;padding:0 1px}
+.cite.missing{border-left-style:dashed}
+.cite.missing p{margin:2px 0 0;color:var(--text-secondary);font-size:var(--fs-caption);line-height:var(--lh-caption)}
+.ocr{font:600 11px/1 var(--font-figures);color:var(--text-secondary);border:1px solid var(--border-subtle);padding:1px 3px;border-radius:2px;margin-left:4px;vertical-align:1px}
+.folded{padding:var(--sp-3) var(--sp-6);border-top:1px solid var(--border-subtle);background:var(--bg-sunken);color:var(--text-secondary);font-size:var(--fs-body)}
+
+/* ---- 清单与待确认 ---- */
+.pending{border:1.5px dashed var(--ai);border-radius:var(--radius-sm);background:var(--bg-surface);padding:var(--sp-4) var(--sp-5)}
+.pending h4{margin:0;font:var(--fw-bold) var(--fs-title)/var(--lh-title) var(--font-sans);color:var(--ai)}
+.pending > p{margin:var(--sp-1) 0 var(--sp-3);color:var(--text-secondary)}
+.item{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:var(--sp-3);padding:var(--sp-3) 0;border-top:1px solid var(--border-subtle);align-items:start}
+.item:first-of-type{border-top:0}
+.imp{font-size:var(--fs-title);line-height:var(--lh-body);text-align:center}
+.item .t{font-weight:var(--fw-bold)}
+.item .meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:4px}
+.item .side{text-align:right;font-size:var(--fs-caption);line-height:var(--lh-caption)}
+.src-ai{color:var(--ai)}
+.old{text-decoration:line-through;color:var(--text-secondary)}
+.list-head{display:flex;align-items:baseline;gap:var(--sp-3);margin-bottom:var(--sp-3)}
+.list-head h4{margin:0;font:var(--fw-bold) var(--fs-title)/var(--lh-title) var(--font-sans)}
+
+/* ---- 参数对照表 ---- */
+table.data{width:100%;border-collapse:collapse;background:var(--bg-surface);border:1px solid var(--border-subtle)}
+table.data th{background:var(--bg-sunken);text-align:left;font-weight:var(--fw-bold);font-size:var(--fs-caption);color:var(--text-secondary);padding:var(--sp-2) var(--sp-3);border-bottom:2px solid var(--border-strong);white-space:nowrap}
+table.data td:first-child{white-space:nowrap}
+table.data td{padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--border-subtle);vertical-align:top;height:40px}
+table.data tr:last-child td{border-bottom:0}
+table.data .num{font-family:var(--font-figures);font-variant-numeric:tabular-nums;font-weight:500;font-size:15px;white-space:nowrap}
+table.data .r{text-align:right}
+table.data a{color:var(--ai);text-decoration:none;font-size:var(--fs-caption);white-space:nowrap}
+table.data a .fig{font-size:13px}
+.verdict{font-weight:var(--fw-bold);white-space:nowrap}
+.verdict.fatal{color:var(--sev-fatal)}
+.verdict.major{color:var(--sev-major-text)}
+.verdict.manual{color:var(--text-secondary);font-weight:var(--fw-regular)}
+
+/* ---- 原文查看器 ---- */
+.viewer{background:var(--bg-sunken);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);display:flex;flex-direction:column}
+.viewer-bar{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-2) var(--sp-3);background:var(--bg-surface);border-bottom:1px solid var(--border-subtle);font-size:var(--fs-caption)}
+.viewer-bar b{font-size:var(--fs-body)}
+.viewer-bar .pager{margin-left:auto;display:flex;gap:var(--sp-2);align-items:center}
+.sheet{margin:var(--sp-4) auto;width:86%;background:#fff;box-shadow:0 1px 2px rgba(29,39,51,.12);padding:28px 32px;font:13px/1.9 "Songti SC","SimSun",var(--font-serif);color:#222}
+.sheet p{margin:0 0 6px}
+.sheet .hl{background:var(--ai-soft);outline:1px solid var(--ai);outline-offset:1px}
+.sheet .hl.on{outline-width:2px}
+.sheet .faint{color:#888}
+
+/* ---- 工作台 ---- */
+.proj-name{font-weight:var(--fw-bold);font-size:var(--fs-title);line-height:var(--lh-title)}
+.proj-sub{font-size:var(--fs-caption);color:var(--text-secondary)}
+.due-soon{color:var(--warn-text)}
+.due-today{color:var(--warn-text);font-weight:var(--fw-bold)}
+.due-past{color:var(--text-secondary)}
+.ready{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
+
+/* ---- 额度 ---- */
+.quota .big{font:600 var(--fs-figure)/var(--lh-figure) var(--font-figures);font-variant-numeric:tabular-nums}
+.quota .unit{color:var(--text-secondary);margin-left:4px}
+.bar{height:6px;background:var(--bg-sunken);border-radius:1px;overflow:hidden;margin:var(--sp-2) 0}
+.bar i{display:block;height:100%;background:var(--c-ink)}
+.bar.warn i{background:var(--warn)}
+.flow td.plus{color:var(--confirmed)}
+
+/* ---- 提醒 ---- */
+.alert{display:flex;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);border-left:3px solid var(--c-ink);background:var(--bg-surface);border-radius:0 var(--radius-sm) var(--radius-sm) 0}
+.alert + .alert{margin-top:var(--sp-3)}
+.alert.warn{border-left-color:var(--warn);background:var(--warn-soft)}
+.alert.warn b{color:var(--warn-text)}
+.alert.done{border-left-color:var(--confirmed)}
+.alert p{margin:0}
+.ico{flex:none;width:18px;height:18px;border-radius:50%;display:inline-grid;place-items:center;font:700 12px/1 var(--font-sans);margin-top:2px}
+.ico.i{border:1.5px solid var(--c-ink)}
+.ico.w{border:1.5px solid var(--warn);color:var(--warn-text)}
+.ico.ok{background:var(--confirmed);color:#fff}
+
+/* ---- 表单 ---- */
+.field{display:flex;flex-direction:column;gap:6px;max-width:360px}
+.field + .field{margin-top:var(--sp-4)}
+.field label{font-weight:var(--fw-bold)}
+.field label small{font-weight:var(--fw-regular);color:var(--text-secondary)}
+.input{height:var(--control-h);border:1px solid var(--border-control);border-radius:var(--radius-sm);padding:0 10px;font:var(--fs-body) var(--font-sans);color:var(--text-primary);background:var(--bg-surface)}
+.input::placeholder{color:var(--text-secondary)}
+.field.err .input{border-color:var(--warn);box-shadow:inset 0 0 0 1px var(--warn)}
+.field .msg{font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--text-secondary)}
+.field.err .msg{color:var(--warn-text);display:flex;gap:6px;align-items:center}
+.field.err .msg .ico{width:14px;height:14px;font-size:10px;margin:0}
+.chips{display:flex;gap:6px;flex-wrap:wrap}
+.chips .btn{height:24px;padding:0 8px;font-size:var(--fs-caption)}
+
+/* ---- 进度 ---- */
+.steps{list-style:none;margin:0;padding:0}
+.steps li{display:flex;gap:var(--sp-3);align-items:center;padding:6px 0}
+.steps .dot{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--border-control);flex:none;display:grid;place-items:center;font-size:11px}
+.steps .done .dot{background:var(--c-ink);border-color:var(--c-ink);color:#fff}
+.steps .now .dot{border-color:var(--c-ink);border-width:2px}
+.steps .now{font-weight:var(--fw-bold)}
+.steps .todo{color:var(--text-secondary)}
+
+/* ---- 报告页眉 ---- */
+.report{background:#fff;border:1px solid var(--border-subtle);max-width:620px;padding:28px 36px;font-size:13px;line-height:1.6}
+.report-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--c-ink);padding-bottom:10px}
+.report-head img{height:26px}
+.report-head span{font-size:11px;color:var(--text-secondary)}
+.report h3{font:600 22px/1.4 var(--font-serif);margin:22px 0 4px}
+.report dl{display:grid;grid-template-columns:96px 1fr;gap:4px 12px;margin:14px 0}
+.report dt{color:var(--text-secondary)}
+.report dd{margin:0}
+.scope{border:1px solid var(--border-subtle);padding:10px 14px;margin-top:10px}
+.scope b{display:block;margin-bottom:2px}
+.report-foot{margin-top:18px;padding-top:8px;border-top:1px solid var(--border-subtle);display:flex;justify-content:space-between;font-size:11px;color:var(--text-secondary)}
+
+@media (max-width:1100px){
+  .finding{grid-template-columns:1fr;gap:var(--sp-3)}
+  .finding .cite:first-child::before{display:none}
+  .grid2{grid-template-columns:1fr}
+}
+</style>
+</head>
+<body>
+<main class="page">
+  <h1>标博士 · 组件预览</h1>
+  <p class="lede">配合 <code>design-system.md</code> v0.1 阅读。条款原文取自苏采云样本 S02、S10；为了演示，S10 的分包限价和 S02 的设备参数放在了同一个示意项目里。页码、投标响应值、人名都是示意数据。</p>
+
+  <!-- 01 颜色 -->
+  <section>
+    <div class="sec-h"><span class="no">01</span><h2>颜色</h2><span class="ref">规范 §3</span></div>
+    <div class="swatches">
+      <div class="sw"><i style="background:var(--c-paper)"></i><div><b>校样纸</b><span class="fig">#F5F6F3</span><br>页面底色</div></div>
+      <div class="sw"><i style="background:var(--c-ink)"></i><div><b>墨</b><span class="fig">#1D2733</span><br>正文、人工确认</div></div>
+      <div class="sw"><i style="background:var(--c-sub)"></i><div><b>辅助灰</b><span class="fig">#5C6670</span><br>次要文字、提示级</div></div>
+      <div class="sw"><i style="background:var(--c-pencil)"></i><div><b>蓝铅笔</b><span class="fig">#2F5BD3</span><br>AI 标注、出处</div></div>
+      <div class="sw"><i style="background:var(--c-fatal)"></i><div><b>致命红</b><span class="fig">#C4122F</span><br>只用于致命问题</div></div>
+      <div class="sw"><i style="background:var(--c-ochre)"></i><div><b>赭</b><span class="fig">#A66300 / #8A5200</span><br>重要级、提醒、错误</div></div>
+      <div class="sw"><i style="background:var(--c-green)"></i><div><b>定稿绿</b><span class="fig">#2E6B4F</span><br>确认署名</div></div>
+      <div class="sw"><i style="background:var(--c-muted)"></i><div><b>禁用灰</b><span class="fig">#7A838C</span><br>禁用、控件边框</div></div>
+    </div>
+    <p class="note">印章红 #D9291C、藏青 #1C2554 只属于 logo，不出现在界面变量里。</p>
+  </section>
+
+  <!-- 02 字体 -->
+  <section class="type">
+    <div class="sec-h"><span class="no">02</span><h2>字体与字阶</h2><span class="ref">规范 §4</span></div>
+    <table>
+      <tr><td>H1 · 24/32 宋体</td><td style="font:600 24px/32px var(--font-serif)">智慧规划资源 2025 标段三</td></tr>
+      <tr><td>H2 · 20/28 宋体</td><td style="font:600 20px/28px var(--font-serif)">采购包 2 的检查结果</td></tr>
+      <tr><td>Title · 16/24</td><td style="font:600 16px/24px var(--font-sans)">报价超过采购包 2 的最高限价</td></tr>
+      <tr><td>Body · 14/22</td><td>开标一览表报价 133.60 万元，最高限价 132.00 万元，超出 1.60 万元。</td></tr>
+      <tr><td>Read · 14/24</td><td style="line-height:24px">★ 支持硬件BFD，最小报文发送间隔≤50ms，提供相关证明材料（包含但不限于产品官网公开参数截图证明等）。</td></tr>
+      <tr><td>Caption · 12/20</td><td style="font-size:12px;line-height:20px;color:var(--text-secondary)">王敏 11月2日 14:20 · 第 3 次检查</td></tr>
+      <tr><td>Figure · 30/36</td><td><span class="fig" style="font-size:30px;line-height:36px">132.00</span> <span class="fig" style="font-size:30px">第 41 页</span> <span class="fig" style="font-size:30px">≥ 512G</span></td></tr>
+    </table>
+  </section>
+
+  <!-- 03 标签与按钮 -->
+  <section>
+    <div class="sec-h"><span class="no">03</span><h2>级别标签与按钮</h2><span class="ref">规范 §7.1 · §7.2</span></div>
+    <div class="grid2">
+      <div class="card">
+        <div class="row"><span class="sev fatal">致命</span><span class="sev major">重要</span><span class="sev hint">提示</span></div>
+        <div class="row" style="margin-top:var(--sp-3)"><span class="sev fatal">致命<span class="fig">2</span></span><span class="sev major">重要<span class="fig">5</span></span><span class="sev hint">提示<span class="fig">11</span></span></div>
+        <div class="row" style="margin-top:var(--sp-3)"><span class="tag status">编制中</span><span class="tag status">已检查</span><span class="tag ai">AI 摘要</span><span class="tag">资格条件</span><span class="tag">无效条款</span></div>
+        <p class="note">级别靠「实心 / 描边 / 无框」区分，色弱和黑白打印也分得清。</p>
+      </div>
+      <div class="card">
+        <div class="row"><button class="btn primary">发起检查</button><span class="cost">扣 1 次检查 · 剩 <span class="fig">12</span> 次</span></div>
+        <div class="row" style="margin-top:var(--sp-3)"><button class="btn">导出报告</button><button class="btn text">查看处理记录</button><button class="btn" disabled>正在导出…</button></div>
+        <div class="row" style="margin-top:var(--sp-3)"><button class="btn sm">确认无误</button><button class="btn lg primary">上传招标文件</button><a class="plain" href="#">普通链接用墨色下划线</a></div>
+        <p class="note">没有红色危险按钮；删除靠确认对话框，不靠颜色。</p>
+      </div>
+    </div>
+  </section>
+
+  <!-- 04 问题列表 -->
+  <section>
+    <div class="sec-h"><span class="no">04</span><h2>问题行与出处批注</h2><span class="ref">规范 §7.3 · §7.4</span></div>
+    <div class="results">
+      <div class="results-head">
+        <h3>采购包 2 的检查结果</h3><span class="proj">智慧规划资源 2025 标段三 · 第 3 次检查</span>
+        <div class="counts"><span class="sev fatal">致命<span class="fig">2</span></span><span class="sev major">重要<span class="fig">1</span></span><span class="sev hint">提示<span class="fig">4</span></span></div>
+      </div>
+
+      <article class="finding is-fatal">
+        <div>
+          <div class="f-head"><span class="sev fatal">致命</span><span class="f-title">报价超过采购包 2 的最高限价</span><span class="flag">新增</span></div>
+          <p class="f-text">开标一览表报价 133.60 万元，最高限价 132.00 万元，超出 1.60 万元。</p>
+          <p class="f-text">这一项会导致投标无效。请核对开标一览表的报价。</p>
+          <div class="f-actions"><button class="btn">确认无误</button><button class="btn">已修改</button><button class="btn">忽略并注明原因</button><a class="plain feedback" href="#">判断有误？</a></div>
+        </div>
+        <aside>
+          <div class="cite"><a class="cite-src" href="#">招标文件 · <span class="fig">第 2 页</span></a><q><mark>最高限价：184万元（采购包1：14万元，采购包2：132万元，采购包3：38万元）</mark></q></div>
+          <div class="cite"><a class="cite-src" href="#">报价册 · 开标一览表 · <span class="fig">第 1 页</span></a><q><mark>投标总价（小写）：1336000.00 元</mark></q></div>
+        </aside>
+      </article>
+
+      <article class="finding is-fatal">
+        <div>
+          <div class="f-head"><span class="sev fatal">致命</span><span class="f-title">★ 条款疑似不满足：服务器内存</span><span class="flag">沿用</span></div>
+          <p class="f-text">技术偏离表第 12 行响应「内存 256G」，要求「≥512G」。</p>
+          <div class="sign"><span>✓</span><b>王敏</b><span class="fig">11月2日 14:20</span><span>已修改</span><a class="plain undo" href="#">撤销</a></div>
+        </div>
+        <aside>
+          <div class="cite"><a class="cite-src" href="#">招标文件 · <span class="fig">第 41 页</span></a><q>★ 2U机架式服务器，CPU：配置≥2颗海光架构32C 2.7GHz，<mark>内存: ≥512G DDR4</mark>，系统盘: 2块≥480G SSD…</q></div>
+        </aside>
+      </article>
+
+      <article class="finding">
+        <div>
+          <div class="f-head"><span class="sev major">重要</span><span class="f-title">缺少 ★ 参数的证明材料：硬件 BFD</span></div>
+          <p class="f-text">已响应「支持硬件 BFD」，但没有找到官网参数截图等证明材料。请在技术册补充证明材料。</p>
+          <div class="f-actions"><button class="btn">确认无误</button><button class="btn">已修改</button><button class="btn">忽略并注明原因</button><a class="plain feedback" href="#">判断有误？</a></div>
+        </div>
+        <aside>
+          <div class="cite"><a class="cite-src" href="#">招标文件 · <span class="fig">第 44 页</span></a><q>★ 支持硬件BFD，最小报文发送间隔≤50ms，<mark>提供相关证明材料（包含但不限于产品官网公开参数截图证明等）</mark>。</q></div>
+          <div class="cite missing"><span class="cite-src">投标文件 · 未找到证明材料</span><p>已查找：技术册（全部章节）、资格证明册</p></div>
+        </aside>
+      </article>
+
+      <article class="finding">
+        <div>
+          <div class="f-head"><span class="sev hint">提示</span><span class="f-title">投标函落款日期晚于投标截止日</span></div>
+          <p class="f-text">投标函落款「2026年11月25日」，投标截止时间是 2026年11月20日 09:30。</p>
+          <div class="f-actions"><button class="btn sm">确认无误</button><button class="btn sm">已修改</button><button class="btn sm">忽略并注明原因</button><a class="plain feedback" href="#">判断有误？</a></div>
+        </div>
+        <aside>
+          <div class="cite"><a class="cite-src" href="#">商务册 · 投标函 · <span class="fig">第 3 页</span><span class="ocr">OCR</span></a><q><mark>2026年11月25日</mark></q></div>
+        </aside>
+      </article>
+      <div class="folded">已处理（<span class="fig">9</span>）· 本次已解决（<span class="fig">3</span>）</div>
+    </div>
+  </section>
+
+  <!-- 05 清单 -->
+  <section>
+    <div class="sec-h"><span class="no">05</span><h2>清单项与待确认区</h2><span class="ref">规范 §7.5 · §7.6</span></div>
+    <div class="grid2">
+      <div class="pending">
+        <h4>待确认（<span class="fig">2</span>）</h4>
+        <p>这些结果没有找到可靠出处，或系统把握不大。确认之前，不参与检查。</p>
+        <div class="item">
+          <span class="imp"></span>
+          <div><div class="t">投标保证金：不收取</div><div class="meta"><span class="src-ai" style="font-size:12px">AI 提取 · 未找到出处</span></div>
+            <div class="f-actions"><button class="btn sm">补上出处后采纳</button><button class="btn sm">修改后采纳</button><button class="btn sm text">丢弃</button></div></div>
+          <span></span>
+        </div>
+        <div class="item">
+          <span class="imp">★</span>
+          <div><div class="t">核心产品需提供原厂授权</div><div class="meta"><span class="src-ai" style="font-size:12px">AI 提取 · 把握不大</span><a class="cite-src" href="#" style="display:inline">第 <span class="fig">38</span> 页</a></div>
+            <div class="f-actions"><button class="btn sm">采纳</button><button class="btn sm">修改后采纳</button><button class="btn sm text">丢弃</button></div></div>
+          <span></span>
+        </div>
+      </div>
+      <div class="card">
+        <div class="list-head"><h4>无效条款（<span class="fig">14</span>）</h4><span class="tag status">草稿</span></div>
+        <div class="item">
+          <span class="imp">★</span>
+          <div><div class="t">设备采用国产自主可控 CPU 芯片，提供国产化适配承诺函</div><div class="meta"><span class="tag">无效条款</span><span class="tag">技术参数</span><span class="tag">采购包 2</span></div></div>
+          <div class="side"><span class="src-ai">AI 提取</span><br><a class="cite-src" href="#">第 <span class="fig">43</span> 页</a></div>
+        </div>
+        <div class="item">
+          <span class="imp"></span>
+          <div><div class="t">提交投标文件截止时间：<span class="old">2026年11月20日 09:30</span> 2026年11月27日 09:30</div><div class="meta"><span class="tag">关键日期</span><span class="flag">已被补遗 1 更新 · 待确认</span></div></div>
+          <div class="side">补遗 1<br><a class="cite-src" href="#">第 <span class="fig">1</span> 页</a></div>
+        </div>
+        <div class="item">
+          <span class="imp"></span>
+          <div><div class="t">联合体各方须签订《联合体协议》并明确牵头单位</div><div class="meta"><span class="tag">资格条件</span><span class="flag">已修改 · <a class="plain" href="#">查看记录</a></span></div></div>
+          <div class="side">人工添加</div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- 06 参数表 + 原文 -->
+  <section>
+    <div class="sec-h"><span class="no">06</span><h2>参数对照表与原文查看器</h2><span class="ref">规范 §7.7 · §7.8</span></div>
+    <div class="grid2" style="grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)">
+      <div>
+        <table class="data">
+          <thead><tr><th>参数项</th><th>要求</th><th>投标响应</th><th>判断</th><th>出处</th></tr></thead>
+          <tbody>
+            <tr><td>★ 内存</td><td class="num">≥ 512G DDR4</td><td class="num">256G DDR4</td><td><span class="verdict fatal">疑似不满足</span></td><td><a href="#">第 <span class="fig">41</span> 页 ↔ 技术册 <span class="fig">12</span></a></td></tr>
+            <tr><td>★ CPU</td><td class="num">≥ 2 颗 32C 2.7GHz</td><td class="num">2 颗 32C 2.7GHz</td><td><span class="verdict">满足</span></td><td><a href="#">第 <span class="fig">41</span> 页 ↔ 技术册 <span class="fig">12</span></a></td></tr>
+            <tr><td>▲ 存储盘</td><td class="num">≥ 4 块 3.84T SSD</td><td class="num">—</td><td><span class="verdict major">未找到响应</span></td><td><a href="#">第 <span class="fig">41</span> 页</a></td></tr>
+            <tr><td>万兆光口</td><td class="num">≥ 4 个 10GbE</td><td class="num">4 个 10GbE（不含光模块）</td><td><span class="verdict manual">需人工判断</span></td><td><a href="#">第 <span class="fig">41</span> 页 ↔ 技术册 <span class="fig">13</span></a></td></tr>
+          </tbody>
+        </table>
+        <p class="note">判断只用四个词：满足 / 疑似不满足 / 未找到响应 / 需人工判断。「满足」用墨色，不用绿色。</p>
+      </div>
+      <div class="viewer">
+        <div class="viewer-bar"><b>招标文件</b><span>JSZC-320300-XZCG-G2026-0053</span><div class="pager"><button class="btn sm">上一处</button><span class="fig">第 41 / 186 页</span><button class="btn sm">下一处</button></div></div>
+        <div class="sheet">
+          <p class="faint">采购包 2：服务器设备</p>
+          <p class="hl on">★ 2U机架式服务器，CPU：配置≥2颗海光架构32C 2.7GHz，内存: ≥512G DDR4，系统盘: 2块≥480G SSD，存储盘: ≥2块8T SATA、≥4块3.84T SSD……</p>
+          <p class="faint">阵列卡：1块8204 2G，网络：配置≥4个1GbE 接口，≥4个10GbE 光接口（含光模块）……</p>
+          <p>备注：加★为核心技术参数；加▲为重要技术参数；其他为通用技术参数。</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- 07 工作台 -->
+  <section>
+    <div class="sec-h"><span class="no">07</span><h2>项目工作台</h2><span class="ref">规范 §7.9</span></div>
+    <table class="data">
+      <thead><tr><th>项目</th><th>所投包</th><th>截止</th><th>状态</th><th>就绪</th><th class="r">致命</th></tr></thead>
+      <tbody>
+        <tr><td><div class="proj-name">智慧规划资源 2025 标段三</div><div class="proj-sub">南京市规划和自然资源局</div></td><td>采购包 2</td><td class="due-today">今天 17:00 截止</td><td><span class="tag status">已检查</span></td><td>未就绪</td><td class="r"><span class="sev fatal">致命<span class="fig">2</span></span></td></tr>
+        <tr><td><div class="proj-name">2026 年信息化设备采购项目</div><div class="proj-sub">国家税务总局徐州市税务局</div></td><td>全部</td><td class="due-soon">剩 2 天 5 小时</td><td><span class="tag status">已检查</span></td><td><span class="tag status" title="只表示致命问题都已处理，不代表投标文件没有问题">就绪</span></td><td class="r num">—</td></tr>
+        <tr><td><div class="proj-name">数据中心运维服务项目</div><div class="proj-sub">某市大数据管理局</div></td><td>标段 1</td><td><span class="fig">11月20日 09:30</span> · 剩 <span class="fig">17</span> 天</td><td><span class="tag status">编制中</span></td><td>—</td><td class="r num">—</td></tr>
+        <tr><td><div class="proj-name">智慧校园一期</div><div class="proj-sub">某区教育局</div></td><td>全部</td><td class="due-past">已截止</td><td><span class="tag status">已递交</span></td><td>—</td><td class="r num">—</td></tr>
+      </tbody>
+    </table>
+    <p class="note">截止临近用赭色，不用红；「就绪」悬停说明：只表示致命问题都已处理，不代表投标文件没有问题。</p>
+  </section>
+
+  <!-- 08 额度、提醒、表单、进度 -->
+  <section>
+    <div class="sec-h"><span class="no">08</span><h2>额度、提醒、表单、进度</h2><span class="ref">规范 §7.10–7.13</span></div>
+    <div class="grid2">
+      <div>
+      <div class="card quota">
+        <div class="row" style="gap:var(--sp-8)">
+          <div><div class="proj-sub">解析剩余</div><span class="big">37</span><span class="unit">/ 50 次</span><div class="bar"><i style="width:26%"></i></div></div>
+          <div><div class="proj-sub">检查剩余</div><span class="big">4</span><span class="unit">/ 20 次</span><div class="bar warn"><i style="width:80%"></i></div></div>
+        </div>
+        <table class="data flow" style="margin-top:var(--sp-4)">
+          <thead><tr><th>时间</th><th>类型</th><th class="r">数量</th><th>关联</th></tr></thead>
+          <tbody>
+            <tr><td class="num">11-02 14:31</td><td>退回</td><td class="num r plus">+1</td><td>解析失败：文件已加密</td></tr>
+            <tr><td class="num">11-02 14:28</td><td>预扣</td><td class="num r">−1</td><td>解析 · 补遗 1</td></tr>
+            <tr><td class="num">11-02 10:05</td><td>结算</td><td class="num r">−1</td><td>检查 · 智慧规划资源 2025 标段三</td></tr>
+          </tbody>
+        </table>
+      </div>
+      <div class="card" style="margin-top:var(--sp-4)">
+          <div class="field"><label>手机号 <small>（必填）</small></label><input class="input" value="1381452198"><span class="msg"><span class="ico w">!</span>手机号应为 11 位数字</span></div>
+          <div class="field"><label>忽略原因 <small>（必填，至少 5 个字）</small></label><input class="input" placeholder="说明为什么不处理这一项"><div class="chips"><button class="btn">招标文件允许</button><button class="btn">已在其他分册响应</button><button class="btn">与本项目无关</button></div></div>
+        </div>
+      </div>
+      <div>
+        <div class="alert"><span class="ico i">i</span><p>清单未确认，检查结果以当前清单为准。</p></div>
+        <div class="alert warn"><span class="ico w">!</span><p><b>本期检查额度已用 80%。</b>剩 4 次，11月30日 发放下期额度。</p></div>
+        <div class="alert warn"><span class="ico w">!</span><p><b>解析失败：文件已加密。</b>已退回 1 次解析额度。请上传未加密的文件。</p></div>
+        <div class="alert done"><span class="ico ok">✓</span><p>报告已导出。</p></div>
+        <div class="card" style="margin-top:var(--sp-4)">
+          <ol class="steps">
+            <li class="done"><span class="dot">✓</span>识别文件格式</li>
+            <li class="done"><span class="dot">✓</span>提取文字</li>
+            <li class="now"><span class="dot"></span>识别分包（3 个采购包）</li>
+            <li class="todo"><span class="dot"></span>提取清单</li>
+            <li class="todo"><span class="dot"></span>核对出处</li>
+          </ol>
+          <p class="note">可以离开本页，完成后会发站内通知。</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- 09 报告 -->
+  <section>
+    <div class="sec-h"><span class="no">09</span><h2>检查报告首页</h2><span class="ref">规范 §7.17</span></div>
+    <div class="report">
+      <div class="report-head"><img src="../logo/svg/logo-horizontal.svg" alt="标博士"><span>投标文件辅助检查报告</span></div>
+      <h3>智慧规划资源 2025 标段三 · 采购包 2</h3>
+      <dl>
+        <dt>项目编号</dt><dd>JSZC-320100-JZCG-G2026-0369</dd>
+        <dt>投标文件</dt><dd>商务册 v3、技术册 v3、报价册 v2、资格证明册 v1</dd>
+        <dt>检查时间</dt><dd>2026-11-02 14:20 · 规则版本 2026.11</dd>
+        <dt>处理情况</dt><dd><span class="sev fatal">致命<span class="fig">2</span></span> <span class="sev major">重要<span class="fig">1</span></span> <span class="sev hint">提示<span class="fig">4</span></span>　其中待处理 1 项</dd>
+      </dl>
+      <div class="scope"><b>检查覆盖范围</b>查了：清单 86 条的响应完整性、形式要件（格式文件、签章位置有无、落款日期）、资质匹配、报价形式。<br>没查：份数、装订密封、CA 加密（见附录「需人工核对」）；签章真伪；报价是否合理。</div>
+      <div class="report-foot"><span>本报告为辅助检查结果，不构成对投标结果的保证</span><span class="fig">1 / 12</span></div>
+    </div>
+    <p class="note">logo 只在页眉，不靠近任何结论或汇总数字。</p>
+  </section>
+</main>
+</body>
+</html>
--- a/docs/design/system/tokens.css
+++ b/docs/design/system/tokens.css
@@ -0,0 +1,105 @@
+/* 标博士 · 界面设计变量（design tokens）v0.1
+ * 规范说明见 docs/design/design-system.md；预览见同目录 components.html。
+ * 只放变量，不放组件样式。技术架构选定组件库后，把这些值映射到组件库的主题配置。
+ * 对比度一律按 WCAG 2.x 公式计算，底色为校样纸 #F5F6F3（括号内为白底）。
+ */
+:root {
+  /* ---------- 基础色板：校样色系 ---------- */
+  --c-paper: #F5F6F3;        /* 校样纸：页面底色 */
+  --c-white: #FFFFFF;        /* 卡片、表格、输入框 */
+  --c-sunken: #ECEEEA;       /* 表头、代码、凹陷区 */
+  --c-hover: #EEF0EC;        /* 行悬停 */
+  --c-ink: #1D2733;          /* 墨：正文、人工确认、主按钮  13.9 (15.1) */
+  --c-sub: #5C6670;          /* 辅助灰：次要文字、「提示」级  5.4 (5.9) */
+  --c-muted: #7A838C;        /* 只用于禁用文字与控件边框  3.6 (3.9)，不能用于正文 */
+  --c-rule: #D9DDD8;         /* 装饰分隔线（不承担识别功能） */
+  --c-pencil: #2F5BD3;       /* 蓝铅笔：AI 标注、出处、原文链接  5.4 (5.9) */
+  --c-pencil-strong: #244AB0;/* 蓝铅笔悬停 / 按下 */
+  --c-pencil-soft: #E7EDFB;  /* 原句高亮底色 */
+  --c-fatal: #C4122F;        /* 致命红：只用于「致命」问题  5.6 (6.0) */
+  --c-fatal-soft: #FBE9EC;
+  --c-ochre: #A66300;        /* 赭：「重要」级的边框、图标、≥18px 文字  4.4 (4.8) */
+  --c-ochre-ink: #8A5200;    /* 赭色小字（<18px）  5.9 (6.4) */
+  --c-ochre-soft: #FBF0DC;
+  --c-green: #2E6B4F;        /* 定稿绿：人工确认署名  5.8 (6.3) */
+  --c-green-soft: #E5F0EA;
+  /* 印章红 #D9291C、藏青 #1C2554 只属于 logo，不进界面变量 */
+
+  /* ---------- 语义色 ---------- */
+  --bg-page: var(--c-paper);
+  --bg-surface: var(--c-white);
+  --bg-sunken: var(--c-sunken);
+  --bg-hover: var(--c-hover);
+  --text-primary: var(--c-ink);
+  --text-secondary: var(--c-sub);
+  --text-disabled: var(--c-muted);
+  --text-on-dark: var(--c-white);
+  --border-subtle: var(--c-rule);
+  --border-control: var(--c-muted);   /* 输入框等控件边框，≥3:1（WCAG 1.4.11） */
+  --border-strong: var(--c-ink);
+  --focus-ring: var(--c-ink);
+
+  --ai: var(--c-pencil);
+  --ai-strong: var(--c-pencil-strong);
+  --ai-soft: var(--c-pencil-soft);
+  --human: var(--c-ink);
+  --confirmed: var(--c-green);
+  --confirmed-soft: var(--c-green-soft);
+
+  --sev-fatal: var(--c-fatal);
+  --sev-fatal-soft: var(--c-fatal-soft);
+  --sev-major: var(--c-ochre);
+  --sev-major-text: var(--c-ochre-ink);
+  --sev-major-soft: var(--c-ochre-soft);
+  --sev-hint: var(--c-sub);
+  --sev-hint-soft: var(--c-sunken);
+
+  --warn: var(--c-ochre);             /* 系统提醒、表单错误、额度预警：不用红 */
+  --warn-text: var(--c-ochre-ink);
+  --warn-soft: var(--c-ochre-soft);
+
+  /* ---------- 字体 ---------- */
+  --font-sans: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC", "Source Han Sans SC", system-ui, sans-serif;
+  --font-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
+  --font-figures: "Barlow Semi Condensed", var(--font-sans);
+
+  /* 字阶：字号 / 行高（px）。正文 14/22 与 TDesign、Ant Design 一致 */
+  --fs-caption: 12px;  --lh-caption: 20px;   /* 时间戳、脚注；最小字号 */
+  --fs-body: 14px;     --lh-body: 22px;      /* 界面正文 */
+  --lh-read: 24px;                           /* 原文引用等成段阅读：14/24 */
+  --fs-title: 16px;    --lh-title: 24px;     /* 问题标题、卡片标题、区块标题 */
+  --fs-h2: 20px;       --lh-h2: 28px;        /* 页面标题（宋体） */
+  --fs-h1: 24px;       --lh-h1: 32px;        /* 工作台、报告标题（宋体） */
+  --fs-figure: 30px;   --lh-figure: 36px;    /* 统计数字（Barlow） */
+  --fw-regular: 400;
+  --fw-medium: 500;
+  --fw-bold: 600;
+
+  /* ---------- 间距：4px 基准 ---------- */
+  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
+  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px;
+
+  /* ---------- 圆角、线、阴影 ---------- */
+  --radius-sm: 2px;    /* 按钮、标签、输入框、卡片 */
+  --radius-md: 4px;    /* 对话框、浮层 */
+  --line: 1px;
+  --line-sev: 1.5px;   /* 「重要」标签描边 */
+  --shadow-overlay: 0 4px 16px rgba(29, 39, 51, .14), 0 1px 3px rgba(29, 39, 51, .10);
+
+  /* ---------- 尺寸 ---------- */
+  --control-h: 32px;       /* 默认按钮、输入框 */
+  --control-h-sm: 28px;    /* 表格行内 */
+  --control-h-lg: 40px;    /* 登录、空状态主操作 */
+  --sidebar-w: 216px;
+  --margin-note-w: 280px;  /* 页边批注栏 */
+  --content-max: 1200px;
+
+  /* ---------- 动效 ---------- */
+  --dur-fast: 120ms;
+  --dur-base: 200ms;
+  --ease: cubic-bezier(.2, 0, 0, 1);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root { --dur-fast: 0ms; --dur-base: 0ms; }
+}