refactor(design): 组件样式抽成共用的 components.css

- 预览页的组件样式移到 system/components.css，本地字体加载移到 system/fonts-local.css，供预览页和原型共用
- 出处引用限 4 行、选中态加粗；链接按钮去下划线；hidden 属性优先于组件样式
- 规范补充：「已忽略」署名用辅助灰和「–」，不用确认绿

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

docs/design/README.md

@@ -8,6 +8,7 @@
 | [vi/](vi/) | VI 视觉识别规范 PDF 与 HTML 源文件 | v1.1 |
 | [design-system.md](design-system.md) | 产品界面设计规范：原则、颜色与对比度、字体字阶、布局、17 个组件、交互模式、文案规范 | v0.1（U1–U4 已确认） |
 | [system/tokens.css](system/tokens.css) | 设计变量（原型和前端直接引用） | v0.1 |
+| [system/components.css](system/components.css) | 组件样式参考实现（预览页和原型共用） | v0.1 |
 | [system/components.html](system/components.html) | 组件预览页（用样本条款演示） | v0.1 |
 
 ## 速查

docs/design/design-system.md

@@ -4,6 +4,8 @@
 > 依据：视觉方向 A「校样」（决策 B1）、VI 手册 v1.1、品牌策略的语气规则、`docs/analysis/03-functional-requirements.md`。
 > 配套文件：
 > - `system/tokens.css`：设计变量（颜色、字体、字阶、间距、圆角、尺寸），原型和前端都直接引用；
+> - `system/components.css`：组件样式的参考实现，预览页和原型（`docs/prototype/`）共用；
+> - `system/fonts-local.css`：本地预览用的字体加载（从 `logo/.work/fonts` 读，不进 git）；
 > - `system/components.html`：组件预览页，用真实样本条款演示（起本地服务后打开，见第 13 节）。
 >
 > 第 12 节的 U1–U4 已于 2026-11-02 全部按建议确认（`docs/decisions.md`）。
@@ -241,7 +243,7 @@
 - 结构：级别标签 → 标题（结论）→ 说明（事实 + 后果 + 改法）→ 处理按钮 → 出处（右侧或下方）。
 - 标题写结论，不写规则名：「报价超过采购包 2 的最高限价」，不写「报价限价规则命中」。
 - 复查标记放在标题行右侧：「新增」「沿用」「本次已解决」（FR-M3-08），用辅助灰小字，不用颜色。
-- 处理后：按钮收起，换成署名行「✓ 王敏 11月2日 14:20 已修改」（绿），可「撤销」。忽略的署名行带原因。
+- 处理后：按钮收起，换成署名行「✓ 王敏 11月2日 14:20 已修改」（绿），可「撤销」。「已忽略」不是确认，署名行用辅助灰和「–」，后面带原因。
 - 「致命」行左侧加 3px 致命红竖线，方便在长列表里扫读；「重要」「提示」不加。
 - 已处理的问题默认折叠到列表底部「已处理（N）」，避免干扰。
 - 每行都有「判断有误？」文字链接，打开反馈表单（FR-M3-07 / J5）。
@@ -505,5 +507,6 @@
   ```
 
 - 改颜色、字号、间距：只改 `system/tokens.css`，再同步本文的表格。
-- 新增组件：先在本文第 7 节写用途、结构、状态、规则，再加到预览页。
+- 改组件样式：改 `system/components.css`，预览页和原型会一起变。
+- 新增组件：先在本文第 7 节写用途、结构、状态、规则，再加到 `components.css` 和预览页。
 - 本规范变化影响 VI 手册（颜色、字体）时，同步更新 `vi/vi-manual.html` 并重出 PDF。

docs/design/system/components.css

@@ -0,0 +1,186 @@
+/* 标博士 · 组件样式 v0.1
+ * 依赖 tokens.css。规范见 docs/design/design-system.md §7；组件预览 components.html 和原型 docs/prototype/ 共用本文件。
+ * 原型阶段的参考实现：技术架构选定组件库后，按这里的视觉去配置组件库主题，不必照搬选择器。 */
+
+/* ---- 基础 ---- */
+*{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}
+.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}
+.note{font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--text-secondary);margin:var(--sp-3) 0 0}
+
+
+/* ---- 级别标签 ---- */
+.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)}
+a.btn{text-decoration:none}
+[hidden]{display:none!important}
+.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:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden;quotes:none;margin-top:2px;line-height:var(--lh-read);color:var(--text-primary)}
+.cite.on{border-left-width:4px;padding-left:calc(var(--sp-3) - 2px)}
+.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}
+}

docs/design/system/components.html

@@ -4,16 +4,12 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>标博士 组件预览</title>
+<link rel="icon" href="../logo/favicon.svg">
 <link rel="stylesheet" href="tokens.css">
+<link rel="stylesheet" href="fonts-local.css">
+<link rel="stylesheet" href="components.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}
@@ -22,12 +18,6 @@ section{margin-top:var(--sp-12)}
 .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)}
@@ -41,174 +31,7 @@ section{margin-top:var(--sp-12)}
 .type td:first-child{width:120px;color:var(--text-secondary);font-size:var(--fs-caption)}
 .type table{border-collapse:collapse;width:100%}
 
-/* ---- 级别标签 ---- */
+@media (max-width:1100px){.grid2{grid-template-columns:1fr}}
-.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>

docs/design/system/fonts-local.css

@@ -0,0 +1,5 @@
+/* 本地预览用字体：从 logo/.work/fonts 加载（不进 git，搭建方法见 logo/logo-spec.md 第 6 节）。
+ * 没有该目录时自动退回系统字体。正式前端改用 @fontsource 自托管（design-system.md §4.1）。 */
+@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}