/* ════════════════════════════════════════════════════════════════════════════════
   质量轮 · 全站共享样式（单真相源）
   ════════════════════════════════════════════════════════════════════════════════

   这是**唯一**写样式的地方。页面里不许再写 <style> 内容、不许内联 style="…"、
   不许在 JS 里写 element.style.xxx = …（三道都由 tests/check_style_single_source.py 守着）。

   谁会引这份文件
   ──────────────
   电脑页（宽屏，走 base.html 继承）：
     总览 overview / 查询 query / 归并评审 merge / 模板·规则·意见 template /
     收集箱 collect_box / 评审 collect_review / 评审记录 reviews / 导出 export /
     成员 members / 抽检 spotcheck / 清洗链 page2a~page7 …
   手机页（独立 HTML，**不**走 base.html，各自 <link> 这一份）：
     现场填报 field_form / 现场核对 field_check / 链接失效 field_invalid /
     现场收集 collect

   分区怎么读
   ──────────
   ① 全站共用    —— 电脑页和手机页**都**要用：基础排版、表格、按钮、卡片、语义色、间距/宽度 token
   ② 电脑页专用  —— 宽屏才有意义：顶栏、分组导航、页签、步骤带、图表、驾驶舱指标、
                    以及清洗链/查询/模板这些表格密集型页面
   ③ 手机页专用  —— 手机页才有意义：.m-wrap（窄栏 + 大字号防 iOS 自动放大）、.box、.why
   ⚠️ 一个类的名字如果在 ③ 里出现，说明它**只在手机页**用；电脑页引了也无害（没那个 DOM）。

   复用到别的项目
   ──────────────
   这份文件是**纯 CSS**（没有 Jinja、没有相对路径、没有 @import）→ 整个文件复制即可用。
   只要 ①（或 ①+②）就能撑起一个管理后台；只做手机表单页的话，取 ① 的排版/表单/token + ③ 即可。
   色板集中在 ①（见「颜色 token」和「状态色」两节），换项目时先换色板。

   体检脚本
   ────────
   tests/check_style_single_source.py （单真相源 + 页面零 CSS + 脚本零写死样式）
   tests/check_typography.py          （字号比例尺只在这里定）
   tests/check_color_convention.py    （色值只用这里的色板）
   ════════════════════════════════════════════════════════════════════════════════ */


/* ╔══════════════════════════════════════════════════════════════════════════════╗
   ║ ① 全站共用 —— 电脑页 + 手机页都要引                                            ║
   ╚══════════════════════════════════════════════════════════════════════════════╝ */

body { font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; max-width: 860px; margin: 0 auto; padding: 24px 16px; color: #1f2937; line-height: 1.6; }
h1 { font-size: 18px; margin: 0; }
h2 { font-size: 15px; margin: 20px 0 12px; }
/* ── 排版比例尺（单真相源 · 她 9.17 #29/#32 + 她 9.21「只三档 12/13/15、禁 14/16」）：
   页标题 > 卡内分区标题 > 正文 > 列表行。浏览器默认 h3 是 1.17em（≈18.7px）→ 比页标题还大，
   「某个区块整体大一号」的观感就是这么来的 → h3/h4 的尺寸只在这里写一处。
   取值全部落在她定的三档里（h1 18 是她点名的特例）：
     h1 18（品牌）> h2 15（页标题）> h3 13（分区标题）> h4 12（小区块标题）/ 正文 13 / 注释 12
   ⚠️ 样板的卡片标题栏（`.card > h3:first-child`、`.step-title`）是**另一条更具体的规则**，仍是 15px，
      和「管理-标准」的 step-head 对齐，不受这里的 h3 尺寸影响。
   各页不再自己写 font-size（要更小/更大就用 .muted/.hint/.num 这类语义类）。 ── */
h3 { font-size: 13px; margin: 14px 0 6px; }
h4 { font-size: 12px; margin: 12px 0 4px; }
table { border-collapse: collapse; width: 100%; margin: 8px 0; }
.table td, .table th { border: 1px solid #e5e7eb; padding: 6px 10px; font-size: 13px; text-align: left; }
.table th { background: #f9fafb; }
.btn { display: inline-block; padding: 8px 22px; background: #2563eb; color: #fff; text-decoration: none; border-radius: 6px; border: none; cursor: pointer; font-size: 13px; }
.btn:hover { background: #1d4ed8; }
.btn-gray { background: #6b7280; } .btn-gray:hover { background: #4b5563; }
.btn-green { background: #15803d; } .btn-green:hover { background: #15803d; }
/* 禁用态（演示态那些"点了没反应"的按钮）：功能上 disabled 了、样子还是可点的蓝色
   = 访客照样点、照样没反应 —— v3-185 用真浏览器一眼抓到的就是这个。
   统一给禁用按钮一个看得出来的样子（色值 #9ca3af 在本站色板内）。 */
.btn:disabled, .btn[disabled] { background: #9ca3af; cursor: not-allowed; }
.btn:disabled:hover, .btn[disabled]:hover { background: #9ca3af; }
.btn-sm { padding: 4px 14px; font-size: 12px; }
.bulk-bar { margin: 4px 0 8px; }
input[type=text], input[type=number], select, input[type=file] { padding: 7px 10px; border: 1px solid #d1d5db; border-radius: 5px; font-size: 13px; }
.card { border: 1px solid #e5e7eb; border-radius: 10px; padding: 16px; margin: 14px 0; background: #fff;
        font-size: 13px; }
/* 卡片的 h3 当「标题栏」（和 .step-card 的 .step-head 同一套视觉，单真相源）：
   总览/抽检那些「.card + h3」的页面不用改 HTML，自动有层级字号（标题 > 正文 > 注释）。 */
.card > h3:first-child { margin: -16px -16px 12px; padding: 9px 16px; background: #f9fafb;
                         border-bottom: 1px solid #e5e7eb; border-radius: 10px 10px 0 0;
                         font-size: 15px; font-weight: 600; color: #1f2937; }
/* 折叠卡片（.card > summary）也给同样的标题栏视觉，全站和管理-标准的 step-head 对齐 */
.card > summary:first-child { display: block; margin: -16px -16px 12px; padding: 9px 16px;
                              background: #f9fafb; border-bottom: 1px solid #e5e7eb;
                              border-radius: 10px 10px 0 0; font-size: 15px; font-weight: 600;
                              color: #1f2937; cursor: pointer; list-style: none; }
.card > summary:first-child::-webkit-details-marker { display: none; }
.muted { color: #6b7280; font-size: 13px; }
.hint { color: #6b7280; font-size: 12px; }
.step { display: inline-block; background: #eff6ff; color: #2563eb; padding: 2px 10px; border-radius: 12px; font-size: 12px; margin-right: 8px; }
/* ── 卡片「字段: 值」小片（人脸展示：有多少显示多少，不画空占位符）
      9.16 从 merge.html 提到这里：卡片明细搬去查询页后，两页都要用（单真相源） ── */
.kv { display: inline-block; margin: 2px 10px 2px 0; }
/* 封面那类「一格一个」的字段（生成初版页的表头信息）：宽屏两列排，别一个字段占一整行占掉半屏 */
.fieldgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; align-items: end; }
@media (max-width: 560px) { .fieldgrid { grid-template-columns: 1fr; } }
.kv-i { display: inline-block; background: #f3f4f6; border-radius: 6px; padding: 1px 6px;
        margin: 1px 3px; font-size: 13px; color: #374151; }
.head-block { margin: 4px 0 6px; }
.head-block summary { cursor: pointer; font-size: 13px; color: #6b7280; }
.fact { border-bottom: 1px dashed #e5e7eb; padding: 8px 0; }
.fact:last-child { border-bottom: none; }
/* 候选组「已裁决」的标记（2026-09-21 收进单真相源）：
   原来是 merge.html 的 JS 里写死的 `card.style.border = '2px solid #15803d'`
   —— 色值和边框宽度散在 JS 里，改样式时翻 CSS 改不到它。
   现在 JS 只加/减这个类（card.classList.add('cand-decided')），样式仍只写这一处。 */
.cand-decided { border: 2px solid #15803d; }
.src { color: #6b7280; font-size: 12px; }
/* ── 顶部三行固定（她 9.16 #42）：往下滚时标题行/邀请码行/导航行不跟着滚走 ── */
.stickyhead { position: sticky; top: 0; z-index: 60; background: #fff;
              padding-top: 4px; border-bottom: 1px solid #e5e7eb; }
/* 顶栏：标题靠左，账号块靠右上角 */
.topbar { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.topbar h1 .brandlogo { height: 28px; width: 28px; vertical-align: -7px; margin-right: 7px; }
.topbar h1 .sub { font-size: 12px; font-weight: normal; color: #6b7280; margin-left: 6px; }
.userbox { text-align: right; font-size: 12px; color: #6b7280; line-height: 1.6; }
.userbox a { color: #2563eb; }
.invite { margin-top: 2px; }
.invite > summary { cursor: pointer; color: #6b7280; font-size: 12px; }
.invite-body { text-align: left; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 6px; padding: 8px 10px; margin-top: 6px; max-width: 250px; }
.invite-body code { font-size: 13px; color: #111827; word-break: break-all; }
/* 重置邀请码的按钮单独占一行（9.15 #3）：原来是 display:inline，挤在邀请码同一行。
   ⚠️ 注释里别抄按钮文字——注释会随 HTML 渲染出去，会撞「员工看不到该入口」这类裸字符串断言（踩过）。 */
.invite-body form { display: block; margin-top: 8px; }
.invite-body .btn-sm { margin: 0 6px 4px 0; }
.nav { margin-bottom: 12px; font-size: 13px; }
/* 意见反馈那一栏用（原来写在 template.html 页内，2026-09-20 收进这里 = CSS 单真相源） */
.msg-fold { margin: 6px 0 12px; font-size: 13px; }
.msg-fold > summary { cursor: pointer; color: #2563eb; font-size: 13px; }
details.msg-fold[data-pending] > summary { display: inline-block; background: #fef9c3;
  border: 1px solid #fcd34d; border-radius: 6px; padding: 3px 8px; }
.msg-fold table { margin-top: 6px; }
/* ── 顶部横排（页签，她 2026-09-20「顶部横排…很清爽」）──
   一个区域几块内容时用它切：规则（模板 / 规则沉淀）· 意见反馈（意见箱 / 历史）。
   样式只写在这一处（CSS 单真相源，三块共用）；色值只用统一色板（颜色门禁守着）。
   ⚠️ CSS 注释也会随页面渲染出去 → 这里不许出现成对的星号（check_literal_markdown 会抓）。 */
.toptabs { display: flex; gap: 4px; flex-wrap: wrap; margin: 2px 0 0;
           border-bottom: 1px solid #e5e7eb; }
.toptab { display: inline-block; padding: 6px 14px; font-size: 13px; color: #374151;
          text-decoration: none; border: 1px solid transparent; border-bottom: 0;
          border-radius: 8px 8px 0 0; margin-bottom: -1px; }
.toptab:hover { background: #eff6ff; color: #2563eb; }
.toptab.on { color: #2563eb; font-weight: 600; background: #ffffff;
             border-color: #e5e7eb; }
/* 导航合并归类（她 2026-09-16 晚：分栏太多，合并成几类，像公司网站那样）
   一级 = 4 个分组，二级 = 组内页面；hover 或点一下（focus）都能展开；
   当前页所在的那一组会高亮（位置感，跟 #20 一个目的）。 */
.navgrp { display: inline-block; position: relative; margin-right: 18px; }
.navgrp-name { font: inherit; color: #374151; background: none; border: 0;
               padding: 2px 0; cursor: pointer; }
.navgrp-name:hover { color: #1d4ed8; }
.navgrp.on .navgrp-name { font-weight: 600; color: #1d4ed8;
                          border-bottom: 2px solid #1d4ed8; }
.navgrp-menu { display: none; position: absolute; top: 100%; left: 0; z-index: 70;
               min-width: 132px; background: #fff; border: 1px solid #e5e7eb;
               border-radius: 8px; padding: 6px 0; box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.navgrp:hover .navgrp-menu, .navgrp:focus-within .navgrp-menu { display: block; }
.navgrp-menu a { display: block; padding: 6px 14px; color: #374151; text-decoration: none;
                 white-space: nowrap; }
.navgrp-menu a:hover { background: #f3f4f6; }
/* 当前页高亮（9.15 #20）：位置感——一眼知道自己在哪 */
.nav a.nav-active { font-weight: 600; color: #1d4ed8; border-bottom: 2px solid #1d4ed8; }
/* ── 待人工确认的配色约定（林霏定 9.13）──
   浅黄底 = 需要你点选/确认的地方；确认完 → 颜色消失，或变浅绿（已确认/已沉淀）。 */
.todo, tr.todo > td { background: #fef9c3; }        /* 浅黄：等你点 */
.done, tr.done > td { background: #dcfce7; }        /* 浅绿：已确认 */
.card.todo { border-color: #fcd34d; }
.card.done { border-color: #86efac; }
.legend { font-size: 12px; color: #6b7280; margin: 6px 0; }
.legend .sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px;
              vertical-align: -2px; margin-right: 3px; }
.sw-todo { background: #fef9c3; } .sw-done { background: #dcfce7; }
/* 两种状态的文字/底色，供各页复用（模板里别再写死色值） */
.txt-todo { color: #b45309; }
.txt-done { color: #15803d; }
.tint-todo { background: #fef9c3; border: 1px solid #fcd34d; border-radius: 6px;
             padding: 8px 12px; margin: 8px 0; }
.tint-done { background: #dcfce7; border: 1px solid #86efac; border-radius: 6px;
             padding: 8px 12px; margin: 8px 0; }
/* ── 汇总图：纯 CSS 横条（她 9-17 要「汇总做成图表」；9.17 #32 要求「CSS 放公共、各页按需调用」）。
     口径三条约死：① 图上的数字跟同页的表逐条一致 ② 最高那条满格、其次按比例
     ③ 0 就是 0 宽（空值画一段 = 谎报）；一条数据都没有时整块不画（空图 = 假信息）。 ── */
.chartwrap { display: flex; flex-wrap: wrap; gap: 26px; }
.chartbox { flex: 1 1 300px; min-width: 280px; }
.chart-title { font-size: 13px; color: #374151; margin-bottom: 8px; }
.bar-row { display: flex; align-items: center; gap: 8px; font-size: 13px; margin: 5px 0; }
.bar-name { flex: 0 0 92px; color: #4b5563; text-align: right; }
.bar-track { flex: 1; height: 14px; background: #f3f4f6; border-radius: 3px; overflow: hidden; }
.bar-fill { display: block; height: 14px; background: #2563eb; border-radius: 3px; }
.bar-n { flex: 0 0 26px; color: #374151; text-align: right; }
/* ── 字号 token（她 9-18：各页一页页调太累 → 只在这里定，页面里不许再写内联 font-size）── */
.fs-11 { font-size: 12px; } .fs-12 { font-size: 12px; } .fs-13 { font-size: 13px; }
.fs-14 { font-size: 13px; } .fs-16 { font-size: 15px; }
/* ── 颜色 token（同理：共享的就这几个；状态色走 .ok/.warn/.txt-done/.txt-todo）── */
.ok { color: #15803d; } .warn { color: #b45309; } .bad { color: #b45309; }
.txt-body { color: #374151; }
/* ── 全程步骤带（方案 §2③ C · 她 9-18 晚「要体现流程设计的能力」）──
   每个流程页顶部一条，三态：已完成（浅绿）/ 当前（主色蓝）/ 未到（中性灰）。
   口径「只显示不跳转」：里面没有链接，样式也不该诱使人以为能点；步骤名在 app/steps.py 一处。
   色值全用同一套全站语言，不新增颜色（tests/check_color_convention.py 守着）。
   注：这个文件是纯 CSS 片段、会被当"渲染区"扫，注释里别写 Markdown 的星号加粗
   （tests/check_literal_markdown.py 会拦）。 ── */
.sband { display: flex; flex-wrap: wrap; align-items: center; margin: 2px 0 10px;
         border-bottom: 1px solid #e5e7eb; }
.sband-i { display: inline-block; padding: 6px 14px; border: 1px solid transparent;
           border-bottom: 0; border-radius: 8px 8px 0 0; font-size: 13px;
           color: #374151; background: #fff; margin-bottom: -1px; }
/* 演示态：步骤带那几格是「链接」（只读访客点着翻整条流程；普通态仍然是纯文字 span）。
   两行都用同色板里的色，不新增颜色；只去掉下划线、悬停给个"能点"的暗示。 */
a.sband-i { text-decoration: none; }
a.sband-i:hover { border-color: #2563eb; color: #2563eb; }
.sband-sep { color: #d1d5db; font-size: 12px; margin: 0 5px; }
.sband-n { display: inline-block; min-width: 15px; height: 15px; line-height: 15px;
           text-align: center; border-radius: 50%; background: #f3f4f6; color: #6b7280;
           font-size: 12px; margin-right: 5px; }
.sband-done { color: #15803d; border-color: #86efac; background: #dcfce7; }
.sband-done .sband-n { background: #86efac; color: #15803d; }
.sband-on { color: #2563eb; border-color: #e5e7eb; background: #ffffff; font-weight: 600; }
.sband-on .sband-n { background: #2563eb; color: #fff; }
/* ── 演示态横幅（她 9-18：访客一进来就知道「这是演示数据，不能修改」）──
   蓝色 = 说明性信息（浅黄留给「等你确认」、浅绿留给「已确认」，两套语义都不该被借用）。 ── */
.demobar { background: #eff6ff; border: 1px solid #bae6fd; color: #075985;
           border-radius: 6px; padding: 6px 12px; margin: 0 0 8px; font-size: 12px; }
.demobar a { color: #075985; }
/* ── 步骤卡片（她 2026-09-20：每个步骤一个独立窗口，几个步骤几个窗口一目了然；
      卡内标题 > 正文 > 注释逐级变小。全站有「1.1 / 1.2 …」步骤的地方共用这一套。 ── */
.step-card { border: 1px solid #e5e7eb; border-radius: 10px; margin: 14px 0;
             background: #fff; overflow: hidden; }
.step-card .step-head { padding: 9px 16px; background: #f9fafb; border-bottom: 1px solid #e5e7eb; }
.step-card .step-title { font-size: 15px; font-weight: 600; color: #1f2937; }
.step-card .step-body { padding: 12px 16px; font-size: 13px; color: #374151; }
.step-card .step-body .muted, .step-card .step-body .hint,
.step-card .step-body .src { font-size: 12px; }
/* ── 间距 token（她 2026-09-21：全站收口，内联 margin 一律用这几个 class）── */
.mt4 { margin-top: 4px; } .mt6 { margin-top: 6px; } .mt8 { margin-top: 8px; }
.mt10 { margin-top: 10px; } .mt12 { margin-top: 12px; }
.mt0 { margin-top: 0; } .mt3 { margin-top: 3px; }
.ml6 { margin-left: 6px; } .ml8 { margin-left: 8px; } .ml10 { margin-left: 10px; }
.ml12 { margin-left: 12px; } .ml14 { margin-left: 14px; }
.mb6 { margin-bottom: 6px; } .mb8 { margin-bottom: 8px; } .mb12 { margin-bottom: 12px; }
.mb16 { margin-bottom: 16px; }
.mr14 { margin-right: 14px; }
.m0 { margin: 0; }
.my4 { margin-top: 4px; margin-bottom: 4px; } .my6 { margin-top: 6px; margin-bottom: 6px; }
.my8 { margin-top: 8px; margin-bottom: 8px; } .my10 { margin-top: 10px; margin-bottom: 10px; }
/* ── 宽度 token ── */
.w100 { width: 100%; }
/* ── 行内表单（内联 display:flex/inline-flex + gap + 对齐，全站统一）── */
.inline-form { display: inline-flex; gap: 6px; align-items: center; }
.flex-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* ── 显示方式 + 可点（cursor）token ── */
.clickable { cursor: pointer; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }
.d-block { display: block; }
.d-none { display: none; }
/* 离屏元素（复制链接的兜底 textarea 用）：原来写在 base.html 的 JS 里（position + opacity），
   2026-09-21 收进 token，门禁对脚本里写死样式这件事就零例外了。
   注：这条注释里别出现字面的「脚本标签」字样 —— 共享样式是内联进页面的，抽取器会认错。 */
.offscreen { position: fixed; opacity: 0; }
/* 特定宽度/对齐/字重等（2026-09-21 收口：内联样式全收成 class） */
.fw400 { font-weight: 400; }
.fw600 { font-weight: 600; }
.h72 { height: 72px; }
.maxw100p { max-width: 100%; }
.maxw620 { max-width: 620px; }
.minh60 { min-height: 60px; }
.minh90 { min-height: 90px; }
.minw220 { min-width: 220px; }
.noline { text-decoration: none; }
.tac { text-align: center; }
.tar { text-align: right; }
.w110 { width: 110px; }
.w130 { width: 130px; }
.w18p { width: 18%; }
.w20p { width: 20%; }
.w230 { width: 230px; }
.w24p { width: 24%; }
.w26p { width: 26%; }
.w280 { width: 280px; }
.w28p { width: 28%; }
.w30p { width: 30%; }
.w34p { width: 34%; }
.w38p { width: 38%; }
.w40p { width: 40%; }
.w52 { width: 52px; }
.w52p { width: 52%; }
.w56 { width: 56px; }
.w58p { width: 58%; }
.w75p { width: 75%; }   /* 她 2026-09-21：原来写在 page2b_header.html 的 JS 里（inp.style.width='75%'），收进 token */
.w64 { width: 64px; }
.w70 { width: 70px; }
.w74 { width: 74px; }
.w90 { width: 90px; }
.w96 { width: 96px; }
/* padding/margin 散值 token（2026-09-21 彻底收口） */
.mb10 { margin-bottom: 10px; }
.mb14 { margin-bottom: 14px; }
.mb2 { margin-bottom: 2px; }
.mb4 { margin-bottom: 4px; }
.mb6 { margin-bottom: 6px; }
.ml18 { margin-left: 18px; }
.mt18 { margin-top: 18px; }
.mt2 { margin-top: 2px; }
.mt4 { margin-top: 4px; }
.mt6 { margin-top: 6px; }
.mt8 { margin-top: 8px; }
.p7 { padding: 7px; }
.px12 { padding-left: 12px; padding-right: 12px; }
.px14 { padding-left: 14px; padding-right: 14px; }
.px6 { padding-left: 6px; padding-right: 6px; }
.py4 { padding-top: 4px; padding-bottom: 4px; }
.py8 { padding-top: 8px; padding-bottom: 8px; }


/* ╔══════════════════════════════════════════════════════════════════════════════╗
   ║ ② 电脑页专用 —— 宽屏布局 / 密集表格页                                          ║
   ╚══════════════════════════════════════════════════════════════════════════════╝ */
/* ═══ 各页面收上来的页内样式（2026-09-21 单真相源：原在各页 <style>，现统一收这里） ═══ */
/* --- _reconcile_section.html --- */
/* 颜色统一（9.13 林霏：所有页面一致）——状态色只用 base.html 那套：
     待人工处理 = **补全按钮浅黄**（她 9-17 晚 3.9：黄色只标在待办的那个字段上，不整块窗口黄），已确认正常 = 浅绿(tint-done/txt-done)；
     严重度用 ❌/⚠️ 符号表达，不再用第三种颜色。 */
  .fix-box { background: #f9fafb; border: 1px dashed #d1d5db; border-radius: 6px; padding: 10px; margin: 6px 0; }
  .fix-box label { display: inline-block; min-width: 90px; font-size: 13px; }
  .fix-box input { margin: 4px 0; width: 220px; }
  /* 她 3.9：**黄色只标在待办的字段/按钮上**（原来是一整块窗口黄）—— 补全按钮 = 待办标记 */
  .recon-grp { border: 1px solid #e5e7eb; border-radius: 6px; padding: 8px 10px; margin: 8px 0; }
  .btn-fix { background: #fef9c3; color: #92400e; border: 1px solid #fcd34d; padding: 4px 12px;
             border-radius: 4px; cursor: pointer; font-size: 12px; }

  .lv1 { font-size: 15px; font-weight: bold; margin: 10px 0 4px; color: #374151; }
  .lv2 { font-size: 13px; color: #6b7280; margin: 0 0 4px 14px; }

/* --- overview.html --- */
.metric-grid { display: flex; gap: 12px; flex-wrap: wrap; }
  .metric { flex: 1; min-width: 110px; border: 1px solid #e5e7eb; border-radius: 8px; padding: 14px 8px; text-align: center; }
  .metric .num { font-size: 28px; font-weight: bold; line-height: 1.2; }
  .metric .label { font-size: 12px; color: #6b7280; margin-top: 4px; }

/* --- page2b_header.html --- */
.error { background: #fef9c3; color: #b45309; border: 1px solid #fcd34d; border-radius: 6px; padding: 8px 12px; font-size: 13px; }
    /* 「上面那行像父表头」提示：底色走 .todo（浅黄 = 等你点选/确认），这里只做排版 */
    .parent-hint { color: #b45309; border: 1px solid #fcd34d; border-radius: 6px; padding: 8px 12px; font-size: 13px; margin: 6px 0; }
    .preview-scroll { overflow-x: auto; border: 1px solid #e5e7eb; border-radius: 6px; max-height: 480px; overflow-y: auto; }
    #preview { border-collapse: collapse; min-width: 100%; }
    #preview td { border: 1px solid #e5e7eb; padding: 4px 8px; font-size: 12px; white-space: pre-wrap; word-break: break-all; max-width: 220px; vertical-align: top; }
    #preview tr { cursor: pointer; }
    #preview td.rownum { background: #f9fafb; color: #6b7280; text-align: center; font-size: 12px; min-width: 30px; position: sticky; left: 0; font-weight: normal; }
    #preview tr.header-row td { background: #fef9c3; }
    #preview tr.header-row td.rownum { background: #fcd34d; color: #92400e; font-weight: bold; }
    #preview tr:not(.header-row):hover td { background: #f3f4f6; }
    #preview tr.header-row:hover td { background: #fcd34d; }

/* --- query.html --- */
.filters { margin: 10px 0; font-size: 13px; }
  .filters label { margin-right: 14px; }
  .filters input[type=text], .filters select { padding: 4px 6px; font-size: 13px; }
  mark.kw { background: #e0f2fe; color: #075985; padding: 0 2px; border-radius: 2px; }

  /* 她 9-17 #17：「来源」点开是**弹窗**看原始记录（不再展开到页面下方）—— 纯 CSS :target，零 JS */
  .modal { display: none; }
  .modal:target { display: block; position: fixed; inset: 0; z-index: 60; overflow: auto;
                  background: rgba(15, 23, 42, .45); padding: 32px 16px; }
  .q-modal-box { max-width: 880px; margin: 0 auto; background: #fff; border-radius: 10px;
               padding: 14px 18px; box-shadow: 0 10px 30px rgba(0, 0, 0, .2); }

  /* 她 #24：弹窗里的原始记录**按行「键值对」**排（不挤在一行里） */
  .kv-table { width: 100%; border-collapse: collapse; margin: 4px 0 10px 0; font-size: 13px; }
  .kv-table td { border: 1px solid #e5e7eb; padding: 4px 8px; vertical-align: top; }
  .kv-table td.kv-k { width: 190px; color: #4b5563; background: #f9fafb; }
  .fld { font-size: 13px; margin: 4px 0 10px 0; }
  .fld label { margin-right: 16px; display: inline-block; }
  .fld-title { font-weight: bold; margin-top: 10px; }

/* --- template.html --- */
.cfg-box { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 6px; padding: 12px; margin: 10px 0; }
  .sec-title { font-size: 15px; font-weight: bold; margin: 16px 0 8px; color: #374151; }
  .ver { border-bottom: 1px dashed #e5e7eb; padding: 7px 0; }
  .ver:last-child { border-bottom: none; }
  /* 履历行统一 13px（原来是继承正文 16px，比页面别处大一号）；按电脑屏幕设计：一行放完 */
  .ver-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: 13px; }
  .ver-head .rollback-btn { margin-left: auto; }  /* 回退放在版本这一行的尾部 */
  /* 「变化详情」与本行信息同一行；展开时内容独占整行 */
  .ver-head details.inline { display: inline-block; }
  .ver-head details.inline > summary { display: inline; cursor: pointer; color: #2563eb; font-size: 12px; }
  .ver-head details.inline[open] { flex-basis: 100%; }
  .sum-title { color: #b45309; font-size: 13px; font-weight: bold; margin: 3px 0 1px; }
  .sum-line { color: #b45309; font-size: 13px; margin: 1px 0 1px 16px; }
  .meta { color: #6b7280; font-size: 12px; }
  .who { color: #2563eb; font-size: 12px; }
  details { margin-top: 3px; }
  details > summary { cursor: pointer; color: #2563eb; font-size: 12px; }
  .detail-line { color: #6b7280; font-size: 12px; margin: 2px 0 2px 14px; }
  .modal-mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, .35); z-index: 99; }
  .t-modal-box { background: #fff; border-radius: 8px; padding: 16px; max-width: 420px; margin: 80px auto; }
  /* 弹窗标题走公共比例尺（她 #32：字号只在 base.html 定义一处），这里只调间距 */
  .t-modal-box h4 { margin: 0 0 8px; }
  .err { color: #b45309; font-size: 12px; margin: 4px 0; }
  /* .msg-fold（意见箱那块）2026-09-20 已收进 _base_css.html —— 样式只留那一处 */


/* ╔══════════════════════════════════════════════════════════════════════════════╗
   ║ ③ 手机页专用 —— 现场填报 / 现场核对 / 链接失效 / 现场收集                       ║
   ║   手机优先：内容窄、字号大（≥16px 防 iOS 自动放大）、一行一个字段、按钮大        ║
   ╚══════════════════════════════════════════════════════════════════════════════╝ */
/* --- collect.html --- */
/* 现场收集是**手机优先**的页面（本系统第一个）：一线在车间用手机填。
     所以：内容窄、字号大（≥16px 防 iOS 自动放大）、一行一个字段、按钮大。 */
  .m-wrap { max-width: 520px; }
  .m-wrap label { display: block; font-size: 13px; color: #6b7280; margin: 12px 0 4px; }
  .m-wrap input[type=text], .m-wrap select, .m-wrap textarea {
      width: 100%; font-size: 16px; padding: 10px; border: 1px solid #e5e7eb; border-radius: 8px;
      box-sizing: border-box; background: #fff; }
  .m-wrap textarea { min-height: 96px; }
  .m-wrap button { width: 100%; font-size: 18px; padding: 14px; margin-top: 18px; }
  .m-note { font-size: 13px; color: #6b7280; margin-top: 6px; }

/* --- field_check.html / field_form.html（同一个 .box，两个手机页共用）--- */
.box { max-width: 560px; margin: 0 auto; }

/* --- field_invalid.html --- */
.why { background: #fef9c3; border: 1px solid #fcd34d; border-radius: 6px; padding: 10px 12px; }