/* 蓝智GEO优化系统 界面样式：深色侧栏 + 浅色内容区，卡片化、大数字、分段控件。
   目标是不懂 GEO 的人也能看懂：每个页面顶部有「这一页是干嘛的 / 怎么做」。 */
:root{
  --side:#0f172a; --side2:#16304f; --side-txt:#c7d2e2; --side-dim:#7b8aa3;
  /* 品牌名专用：深色侧栏上白字；浅色侧栏必须是深字，否则白字白底直接消失（2026-11-02 客户报） */
  --side-nm:#fff;
  /* 侧栏内部语义色：浅色主题下这些值整体翻转（见 body.theme-light）。
     ★ 规则里**不许写死 rgba(255,255,255,x)**——写死一个，浅色侧栏上就瞎一个。 */
  --side-grp:#e6eefb; --side-grp-closed:#a9bdd8; --side-cur:#fff;
  --side-hov:rgba(255,255,255,.07); --side-hov2:rgba(255,255,255,.05);
  --side-on-bg:rgba(59,130,246,.20); --side-on-tx:#fff; --side-on-bd:#60a5fa;
  --side-chip-bg:rgba(255,255,255,.10); --side-chip-tx:#dbe6f5; --side-chip-bd:rgba(255,255,255,.14);
  --side-foot-bd:rgba(255,255,255,.10);
  --bg:#f4f6fa; --panel:#fff; --line:#e4e9f0; --line2:#eef2f7;
  --text:#16202e; --muted:#6a7a90; --muted2:#8a97a8;
  --brand:#2563eb; --brand2:#1d4ed8; --brand-soft:#eaf1ff;
  --ok:#16a34a; --ok-soft:#e8f7ee;
  --warn:#d97706; --warn-soft:#fdf4e6;
  --bad:#dc2626; --bad-soft:#fdeceb;
  --r:10px; --r-sm:7px;
  --shadow:0 1px 2px rgba(16,24,40,.04),0 6px 18px rgba(16,24,40,.05);
  --shadow-lg:0 10px 40px rgba(16,24,40,.12);
}
/* ---------- 浅色主题 ----------
 * 默认（深色侧栏）保持原样不动；body.theme-light 只翻转变量。
 * 侧栏变浅、内容区更白，其余规则一概不重复写——凡是没跟变量的地方都是浅色模式的漏洞。 */
body.theme-light{
  --side:#f6f8fb; --side2:#e9eff6; --side-txt:#3d4d63; --side-dim:#8494aa;
  --side-nm:#1f2d42;
  --side-grp:#243247; --side-grp-closed:#8494aa; --side-cur:#1d4ed8;
  --side-hov:rgba(37,99,235,.07); --side-hov2:rgba(37,99,235,.05);
  --side-on-bg:rgba(37,99,235,.13); --side-on-tx:#1d4ed8; --side-on-bd:#2563eb;
  --side-chip-bg:rgba(37,99,235,.08); --side-chip-tx:#1d4ed8; --side-chip-bd:rgba(37,99,235,.22);
  --side-foot-bd:#e4e9f0;
  --bg:#f7f9fc; --panel:#ffffff; --line:#e7ecf2; --line2:#eef2f7;
  --text:#1c2733; --muted:#5d6f85; --muted2:#8494aa;
  --shadow:0 1px 2px rgba(16,24,40,.03),0 6px 16px rgba(16,24,40,.04);
  --shadow-lg:0 10px 36px rgba(16,24,40,.10);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font:14px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;font-weight:650}
input,select,textarea,button{font-family:inherit;font-size:13.5px;color:inherit}
a{color:var(--brand);text-decoration:none}

/* ---------- 布局 ---------- */
/* ---------- 应用壳：侧边栏 + 正文 ----------
 * 菜单宽度是 --side-w（默认 236px）：分割线可拖动，客户按自己屏幕调。
 * 拖完记进 localStorage，下次打开还是自己调的那个宽度。 */
.app{display:grid;grid-template-columns:var(--side-w,236px) 5px minmax(0,1fr);min-height:100vh}
/* 分割线本体：平时只是 5px 的空隙，悬停/拖动时显出一条蓝线告诉人"这里能拖" */
.side-grip{cursor:col-resize;position:relative;touch-action:none}
.side-grip::before{content:'';position:absolute;left:2px;top:0;bottom:0;width:2px;
  background:transparent;transition:background .15s}
.side-grip:hover::before,.side-grip.is-drag::before{background:var(--brand)}
body.dragging-side{cursor:col-resize;user-select:none}
@media (max-width:820px){
  .app{grid-template-columns:var(--side-w,236px) 3px minmax(0,1fr)}
  .side-grip::before{width:1px;left:1px}
}
.sidebar{background:linear-gradient(180deg,var(--side) 0%,var(--side2) 100%);color:#fff;
  display:flex;flex-direction:column;padding:18px 12px;position:sticky;top:0;height:100vh;overflow:auto}
.brand{display:flex;align-items:center;gap:9px;padding:0 6px 4px}
/* 品牌区：logo 底是蓝紫渐变（两主题都不变），字永远白；名字必须跟主题变色——
   浅色侧栏上继承 #fff 就成了白字白底，字直接看不见（2026-11-02 客户报的就是这个）。 */
.brand .logo{width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,#3b82f6,#8b5cf6);
  color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;letter-spacing:-.5px}
.brand .nm{font-size:15.5px;font-weight:700;letter-spacing:.3px;color:var(--side-nm)}
.brand .sub{font-size:11px;color:var(--side-dim);margin-top:-2px}
.role-chip{margin:12px 6px 6px;padding:5px 10px;border-radius:99px;font-size:11.5px;display:inline-block;
  background:var(--side-chip-bg);color:var(--side-chip-tx);border:1px solid var(--side-chip-bd)}
.menu{margin-top:10px;flex:1}
/* 组标题：比菜单项**更大更粗**（项 13.5px / 组 15px 加粗），层级一眼分得开。
   2026-10-28 前一版是 11px 小灰字，同层级的组名和项名几乎一样重，扫读时找不到段落。 */
/* 组标题＝**可收起的父级**（PM 2026-10-29 定，替换 10-28 那版「只做分隔」）：
   侧栏涨到 22 项，滚一列要滑两屏；把「做什么」的段落收成一行，找入口反而快。
   ★ 默认**全展开**：不点就看不见入口，等于把不想折叠的人一起罚了。
   ★ 当前所在的组常开（渲染层强制，见 public/app.js 的 grpOpen）：
     把自己的位置收起来，「我在哪」立刻没答案。 */
.menu .grp{font-size:15px;font-weight:700;color:var(--side-grp);padding:15px 10px 7px;letter-spacing:.5px;
  display:flex;align-items:center;gap:8px;cursor:pointer;border-radius:8px}
.menu .grp:hover{background:var(--side-hov2)}
/* 收起态的组：标题压暗一点、字号不变——看得见「这一组在这儿」，只是没铺开 */
.menu .grp.closed{color:var(--side-grp-closed);padding-bottom:8px}
.menu .grp .caret{margin-left:auto;font-size:10px;opacity:.7}
/* 当前所在的组：左侧一道短竖线，和「已选中项」的高亮呼应（不喧宾夺主） */
.menu .grp.cur{color:var(--side-cur)}
.menu .grp .dot{width:4px;height:4px;border-radius:50%;background:#60a5fa;opacity:0;flex:0 0 auto}
.menu .grp.cur .dot{opacity:1}
.menu .it{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;cursor:pointer;
  color:var(--side-txt);font-size:13.5px;border-left:2px solid transparent;margin-bottom:2px}
.menu .it:hover{background:var(--side-hov);color:var(--side-on-tx)}
.menu .it.on{background:var(--side-on-bg);color:var(--side-on-tx);border-left-color:var(--side-on-bd);font-weight:600}
.menu .it .ico{width:18px;text-align:center;opacity:.9;font-size:13px}
/* 右侧那个小数字（五步的「剩 N」）：一级项里唯一挂数字的地方，别的项没有计数可挂。
   2026-10-29 起五步直接是一级项，原来的二级缩进样式随子菜单一起删了。 */
.menu .it .cnt{margin-left:auto;font-size:11px;color:var(--side-dim)}
.theme-row{display:flex;align-items:center;gap:8px;padding:7px 10px;margin:6px 0 2px;border-radius:8px;
  cursor:pointer;font-size:12px;color:var(--side-txt);border:1px solid var(--side-foot-bd)}
.theme-row:hover{background:var(--side-hov)}
.side-foot{font-size:11px;color:var(--side-dim);padding:10px;line-height:1.6;
  border-top:1px solid var(--side-foot-bd);margin-top:8px}

.main{min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:5;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);padding:11px 20px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.topbar .proj{font-weight:650;font-size:15px}
.topbar .stage{font-size:12px;color:var(--muted)}
.spacer{flex:1}
.content{padding:20px 22px 60px;max-width:1240px;width:100%}

/* ---------- 视图头：这一页是干嘛的 ---------- */
.view-head{margin-bottom:16px}
.view-head h2{font-size:19px;letter-spacing:.2px}
.view-head .desc{color:var(--muted);font-size:13px;margin-top:3px}
.view-head .how{margin-top:9px;background:var(--brand-soft);border:1px solid #cfe0ff;color:#1e40af;
  border-radius:var(--r-sm);padding:8px 12px;font-size:12.5px;display:flex;gap:7px;align-items:flex-start}
/* 任务清单「只看某一步」时的范围条：先说清在看哪一步，再给回全部的按钮。
   没有它，任务少了一大半会被读成「任务丢了」。 */
.scope-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px;
  background:var(--brand-soft);border:1px solid #cfe0ff;color:#1e40af;
  border-radius:var(--r-sm);padding:8px 12px;font-size:13px}
.view-head .how b{font-weight:650}

/* ---------- 卡片 ---------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;
  box-shadow:var(--shadow);margin-bottom:14px}
.card>h3{font-size:14.5px;margin-bottom:10px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.card>h3 .sub{font-weight:400;font-size:12px;color:var(--muted)}
/* 默认单列也必须写 minmax(0,1fr)：否则宽表（min-width:540）会把栅格列撑开，整页横向溢出 */
.grid{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
/* 栅格子项与卡片同样要 min-width:0，否则子项会按 min-content 撑破轨道 */
.grid>*{min-width:0}
.card{min-width:0}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
/* 5 列（企业档案页：已填 / 完整度 / 必填缺失 / NAP 一致性 / 客户填写·待核） */
.g5{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1080px){.g4,.g5{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:820px){.g2,.g3{grid-template-columns:1fr}}

/* ---------- 指标卡 ---------- */
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;box-shadow:var(--shadow)}
.kpi .lab{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px}
.kpi .num{font-size:27px;font-weight:750;line-height:1.25;letter-spacing:-.5px;margin-top:2px}
.kpi .num small{font-size:13px;font-weight:500;color:var(--muted);letter-spacing:0}
.kpi .foot{font-size:11.5px;color:var(--muted2);margin-top:2px}

/* ---------- 进度环 ---------- */
.ring{display:flex;align-items:center;gap:18px}
.ring svg{display:block}
.ring .rn{font-size:26px;font-weight:750}
.ring .rl{font-size:12px;color:var(--muted)}

/* ---------- 下一步建议 ---------- */
.steps{display:flex;flex-direction:column;gap:10px}
.step{display:flex;gap:12px;align-items:flex-start}
.step .no{width:22px;height:22px;border-radius:50%;background:var(--brand);color:#fff;font-size:12px;
  display:flex;align-items:center;justify-content:center;flex:0 0 22px;margin-top:1px;font-weight:650}
.step .bd{min-width:0}
.step .t{font-weight:650;font-size:14px}
.step .w{color:var(--muted);font-size:12.5px}
.step .h{color:var(--brand);font-size:12.5px;margin-top:2px}

/* ---------- 控件 ---------- */
.btn{border:1px solid var(--line);background:#fff;color:var(--text);padding:6px 13px;border-radius:var(--r-sm);
  cursor:pointer;font-size:13px;transition:.15s;white-space:nowrap}
.btn:hover{border-color:#c9d4e4;background:#fbfcfe}
.btn.pri{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.pri:hover{background:var(--brand2)}
.btn.sm{padding:4px 9px;font-size:12px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.seg{display:inline-flex;background:#f1f4f9;border:1px solid var(--line);border-radius:var(--r-sm);padding:2px;gap:2px}
.seg button{border:0;background:transparent;padding:4px 11px;border-radius:5px;cursor:pointer;
  color:var(--muted);font-size:12.5px;white-space:nowrap}
.seg button.on{background:#fff;color:var(--text);font-weight:600;box-shadow:0 1px 2px rgba(16,24,40,.08)}
.seg button.on.s-none{color:var(--warn)}
.seg button.on.s-done{color:var(--ok)}
input[type=text],input[type=date],input[type=number],input[type=password],select,textarea{
  width:100%;padding:7px 10px;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;transition:.15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(37,99,235,.12)}
textarea{min-height:64px;resize:vertical;line-height:1.6}
select{cursor:pointer}
input:disabled,textarea:disabled{background:#f6f8fb;color:var(--muted2)}

/* ---------- 药丸 / 条 ---------- */
.pill{display:inline-block;font-size:11.5px;padding:2px 9px;border-radius:99px;background:#f1f4f9;color:var(--muted);
  border:1px solid var(--line2);white-space:nowrap;line-height:1.5}
.pill.ok{background:var(--ok-soft);color:var(--ok);border-color:transparent}
.pill.warn{background:var(--warn-soft);color:var(--warn);border-color:transparent}
.pill.bad{background:var(--bad-soft);color:var(--bad);border-color:transparent}
.pill.brand{background:var(--brand-soft);color:var(--brand2);border-color:transparent}
.pill.info{background:#eef4fd;border-color:transparent;color:#2563eb}
.bar{height:7px;border-radius:99px;background:#eef2f7;overflow:hidden;min-width:60px}
.bar>i{display:block;height:100%;background:var(--brand);border-radius:99px;transition:width .4s}
.bar>i.ok{background:var(--ok)} .bar>i.warn{background:var(--warn)} .bar>i.bad{background:var(--bad)}
.muted{color:var(--muted)}
.small{font-size:12px}
/* 提示条。**必须是 block，不能是 flex**：提示条里全是「正文 + <b>重点</b> + 正文」这种行内结构，
   一旦做成 flex 容器，每个 <b> 都会变成一个独立的 flex item 并排显示 —— 一句话被拆成好几列并排，
   读起来像坏掉了。flex 的那套 gap/align-items 在这里本来也没用。 */
.notice{background:var(--warn-soft);border:1px solid #f2ddb8;color:#8a5a00;border-radius:var(--r-sm);
  padding:9px 13px;font-size:13px;margin-bottom:12px;line-height:1.7}
.notice.bad{background:var(--bad-soft);border-color:#f6cfcd;color:#9b1c1c}
.notice.ok{background:var(--ok-soft);border-color:#c9ecd7;color:#146c3a}

/* ---------- 出稿 ---------- */
/* 橙色标签：骨架 / 回传稿都没补齐，一眼就该看出「这不是能发出去的稿子」 */
.draft-tag{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:99px;font-size:11px;
  font-weight:600;color:#8a4b00;background:#fff2e0;border:1px solid #f6c98a;white-space:nowrap;vertical-align:middle}
.draft-zone{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px;margin-bottom:4px}
.draft-zone .dz{border:1px solid var(--line2);border-radius:var(--r-sm);padding:12px;background:#fafbfd;min-width:0}
.draft-zone .dz-t{font-size:13.5px;font-weight:600;margin-bottom:6px}
.draft-zone .dz-k{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:99px;font-size:11px;
  font-weight:500;color:var(--muted);background:#eef1f6;border:1px solid var(--line2)}
.draft-zone .dz-b{font-size:12.5px;color:var(--muted);line-height:1.7;margin-bottom:9px}
/* 出稿两个文本框方向相反（一个发出去、一个收回来），长得又一样，
   光靠 placeholder 分不清——给一个带方向箭头的标签贴在各自主框上方 */
.draft-zone .dz-io{font-size:11.5px;line-height:1.6;margin:8px 0 4px;padding:4px 7px;border-radius:6px}
.draft-zone .dz-io.out{color:#1d4ed8;background:#eff4ff;border:1px solid #c7d7fe}
.draft-zone .dz-io.in{color:#0f766e;background:#effaf7;border:1px solid #b7e3da}
@media (max-width:820px){.draft-zone{grid-template-columns:minmax(0,1fr)}}

/* ---------- 档案字段行 ---------- */
.frow{display:grid;grid-template-columns:180px 1fr 168px 190px;gap:12px;align-items:start;
  padding:9px 0;border-bottom:1px dashed var(--line2)}
.frow:last-child{border-bottom:0}
.frow .nm{font-size:13.5px;font-weight:550}
.frow .nm small{display:block;color:var(--muted2);font-size:11.5px;font-weight:400;margin-top:1px}
/* 来源标记那一层（胶囊 + 小字 + 两个动作按钮）：**正交于**三态选择，不许合并成一个按钮 */
.fmeta .pill{margin-bottom:2px}
.fmeta>small{display:block;color:var(--muted2);font-size:11.5px}
@media (max-width:820px){.frow{grid-template-columns:1fr;gap:6px}}

/* ---------- 台账打印容器（屏幕态不占位）---------- */
#print-root{display:none}

/* ---------- 任务 ---------- */
.task-group{margin-bottom:6px}
.task-h{display:flex;align-items:center;gap:10px;padding:9px 0 8px;flex-wrap:wrap}
.task-h .th-l{display:flex;align-items:center;gap:9px;min-width:0}
.task-h .th-r{flex:0 0 auto}
.task-h .tn{font-weight:650;font-size:14px}
/* 阶段进度条：让「做到哪了」一眼可见，不再靠数数 */
.task-bar{height:4px;border-radius:99px;background:#eef2f7;overflow:hidden;margin:0 0 8px}
.task-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#3b82f6,#22c55e);transition:width .25s}
.gate-tip{font-size:12px;color:var(--muted);background:var(--bad-soft);border-radius:var(--r-sm);
  padding:7px 10px;margin:2px 0 10px;line-height:1.7}
.gate-tip .k{color:var(--bad);font-weight:600}

/* 任务行：左侧状态固定宽度，右侧内容区独立成块，标签与正文左对齐成列 */
.task{display:grid;grid-template-columns:196px minmax(0,1fr);gap:16px;align-items:start;
  padding:13px 2px;border-bottom:1px solid var(--line2)}
.task:last-child{border-bottom:0}
.task.is-done .t-title{color:var(--muted)}
.task .t-side{display:flex;flex-direction:column;gap:6px}
.task .t-side .seg{flex-wrap:wrap}
.task .seg button{font-size:12.5px;padding:4px 8px}
/* 状态切换改成「当前状态是彩色药丸、其余是淡文字」，去掉灰底轨道，26 行不再显得嘈杂 */
.seg.plain{background:transparent;border:0;padding:0;gap:4px}
.seg.plain button{padding:3px 9px;border-radius:99px;color:var(--muted2);background:transparent}
.seg.plain button:hover{background:#eef2f7;color:var(--text)}
.seg.plain button.on{font-weight:600;color:#fff}
.seg.plain button.on.s-todo{background:#64748b}
.seg.plain button.on.s-doing{background:var(--brand)}
.seg.plain button.on.s-done{background:var(--ok)}
.seg.plain button.on.s-blocked{background:var(--warn)}
.task .t-owner{font-size:11.5px;color:var(--muted2);padding-left:2px}
.task .t-main{min-width:0}
.task .t-title{font-size:13.5px;font-weight:600;display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:6px}
.task .t-lines{display:flex;flex-direction:column;gap:3px}
.task .t-line{display:grid;grid-template-columns:46px minmax(0,1fr);gap:10px;font-size:12px;line-height:1.65}
.task .t-line .k{color:var(--muted2);white-space:nowrap}
.task .t-line .v{color:var(--muted);overflow-wrap:anywhere}
.task .t-line.rl .k,.task .t-line.rl .v{color:var(--bad)}
@media (max-width:820px){
  .task{grid-template-columns:1fr;gap:8px}
  .task .t-side{flex-direction:row;align-items:center;gap:10px;flex-wrap:wrap}
}

/* ---------- 「怎么做」作业指引：任务的四要素 / 平台的去哪核对 ---------- */
/* 折叠态也看得见「去哪做」——把它折起来等于没做，这是这一块唯一不能省的一行 */
.task .t-line.is-where .v{color:#1e40af;font-weight:600;overflow-wrap:anywhere;
  display:flex;gap:8px;align-items:flex-start;flex-wrap:wrap;min-width:0}
.task .t-line.is-where .k{color:var(--brand)}
.task .t-line .btn.sm.jump{padding:2px 8px;min-height:24px;font-size:11.5px;line-height:1.5;
  background:var(--brand-soft);border-color:#cfe0ff;color:#1e40af;flex:0 0 auto}
.how-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px}
.how-bar .btn.sm{padding:4px 10px;min-height:28px;font-size:12px}
.how-box{margin-top:8px;border:1px solid var(--line2);border-left:3px solid var(--brand);
  border-radius:var(--r-sm);background:#fafbfd;padding:10px 12px;min-width:0}
.how-box .how-row{display:grid;grid-template-columns:60px minmax(0,1fr);gap:10px;
  font-size:12.5px;line-height:1.75;padding:3px 0}
.how-box .how-row+.how-row{border-top:1px dashed var(--line2)}
.how-box .how-row .k{color:var(--muted2);white-space:nowrap}
.how-box .how-row .v{color:var(--muted);overflow-wrap:anywhere;min-width:0;
  display:flex;gap:8px;align-items:flex-start;flex-wrap:wrap}
.how-box .how-row.is-note .v,.how-box .how-row.is-note .k{color:var(--warn)}
.how-box .how-row.is-reg .v{color:#1e40af}
.how-box .how-row.is-url .v{align-items:center}
.how-box .how-row .btn.sm{padding:3px 9px;min-height:26px;font-size:11.5px;flex:0 0 auto}
/* 步骤列表：编号 + 竖线，窄屏也不横向溢出 */
.how-steps{margin:0;padding-left:20px;overflow-wrap:anywhere}
.how-steps li{margin:2px 0}
/* 平台行：文字路径 + 外链 */
.how-cell{min-width:0}
.how-cell .how-path{font-size:12px;color:var(--muted);line-height:1.6;overflow-wrap:anywhere;min-width:0}
.how-cell .how-link{margin-top:3px;font-size:12px;overflow-wrap:anywhere;min-width:0}
.plat-how>td{background:#fbfcfe;padding:0 12px 12px!important}
.plat-how .how-box{margin-top:6px}
/* 外链：新窗口打开的那个小图标；已标 NAP 一致的弱化成一个灰色小图标（做完就不用再点） */
.plink{display:inline-flex;align-items:center;gap:3px;font-size:12px;color:var(--brand);
  border:1px solid #cfe0ff;background:var(--brand-soft);border-radius:99px;padding:1px 9px;
  white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.plink:hover{background:#dce9ff}
a.plink.done,a.plink.done:hover{color:var(--muted2);background:#f2f4f7;border-color:var(--line);font-size:11px;padding:0 7px}
.btn.sm.linklike{padding:2px 7px;min-height:22px;font-size:12px;line-height:1.2;margin-left:4px;background:#f2f4f7}
.plat-top{margin-bottom:10px;gap:10px}
@media (max-width:560px){
  .how-box .how-row{grid-template-columns:minmax(0,1fr);gap:2px}
  .how-box .how-row .k{font-weight:600;color:var(--brand)}
}

/* ---------- 发布前体检：逐项三态 ---------- */
.qc-item{border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;margin-bottom:10px;
  background:#fff;min-width:0}
.qc-item:last-child{margin-bottom:0}
.qc-h{display:grid;grid-template-columns:26px minmax(0,1fr);gap:10px;align-items:start}
.qc-no{width:24px;height:24px;border-radius:50%;background:var(--brand);color:#fff;font-size:12px;font-weight:650;
  display:flex;align-items:center;justify-content:center;margin-top:1px;flex:0 0 24px}
.qc-t{font-size:13.5px;font-weight:600;display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.qc-why{display:grid;grid-template-columns:50px minmax(0,1fr);gap:9px;font-size:12px;color:var(--muted);
  line-height:1.75;margin-top:4px}
.qc-why .k{color:var(--muted2);white-space:nowrap}
.qc-why>span:last-child{overflow-wrap:anywhere}
.qc-note{margin-top:8px;font-size:12.5px}
.qc-ev{margin-top:10px;border:1px solid var(--line2);border-radius:var(--r-sm);background:#fafbfd;
  padding:10px 12px;min-width:0}
.qc-ev .ev-h{font-size:12.5px;margin-bottom:8px}
.qc-ev.ok{background:var(--ok-soft);border-color:#c9ecd7}
.qc-ev.bad{background:var(--bad-soft);border-color:#f6cfcd}
.qc-ev.warn{background:var(--warn-soft);border-color:#f2ddb8}
/* 三态分段按钮：通过绿 / 不通过红 / 不适用橙，不让人只看得到一个「勾」 */
.seg button.on.s-fail{color:var(--bad)}
.seg button.on.s-na{color:var(--warn)}
@media (max-width:560px){
  .qc-h{grid-template-columns:22px minmax(0,1fr);gap:8px}
  .qc-why{grid-template-columns:minmax(0,1fr);gap:0}
}

/* ---------- 同步页 ---------- */
.sync-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.sync-facts>div{min-width:0;padding:10px 12px;border:1px solid var(--line2);border-radius:var(--r-sm);background:#fafbfd}
.sync-facts .k{font-size:12px;color:var(--muted);margin-bottom:4px}
.sync-facts .v{font-size:14px;font-weight:600;overflow-wrap:anywhere}
.sync-facts .v .sub{font-weight:400;font-size:11.5px;margin-left:4px}
/* 冲突块：左右两栏对照，三选一。每格 min-width:0，窄屏不撑破 */
.conflict{border:1px solid var(--line2);border-radius:var(--r-sm);padding:12px;margin-bottom:12px;min-width:0}
.conflict:last-child{margin-bottom:0}
.cf-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.cf-local{background:var(--warn-soft)}
.cf-remote{background:var(--ok-soft)}
@media (max-width:560px){
  .sync-facts{grid-template-columns:1fr}
  .conflict{padding:10px}
  .conflict .rowflex{flex-wrap:wrap}
}

/* ---------- 监测页：自动采集卡 + 引导卡 + 离线条 ---------- */
/* 采集卡：未采集时整卡走橙色（.cc-nc），值的位置也只写「未采集」三个字，一个数都不出现 */
.cc{border:1px solid var(--line2);border-radius:var(--r-sm);padding:12px 13px;background:#fafbfd;min-width:0}
.cc-nc{background:var(--warn-soft);border-color:#f2ddb8}
.cc-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.cc-t{font-weight:600;font-size:13.5px}
.cc-v{font-size:13px;line-height:1.6;overflow-wrap:anywhere}
.cc-nc .cc-v{color:#8a5a00;font-weight:600}
.cc-m{font-size:12px;color:var(--muted2);margin-top:6px;line-height:1.6;overflow-wrap:anywhere}
.cc-f{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:9px}
/* 引导卡：四段式，一段都不能少 */
.gd-grp{margin-top:14px}
.gd-gt{font-size:12.5px;font-weight:600;color:var(--muted);margin-bottom:8px}
.gd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.gd-grid>*{min-width:0}
.gd{border:1px solid var(--line2);border-radius:var(--r-sm);padding:12px 13px;background:var(--panel);min-width:0}
.gd-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.gd-l{display:flex;gap:7px;font-size:12px;line-height:1.65;margin-bottom:5px}
.gd-l>i{flex:0 0 auto;width:16px;height:16px;border-radius:4px;background:#eef2f7;color:var(--muted);
  font-style:normal;font-size:11px;display:flex;align-items:center;justify-content:center;margin-top:2px}
.gd-l>span{min-width:0;overflow-wrap:anywhere;color:var(--muted2)}
.gd .btn{margin-top:6px}
/* 弹窗里的证据三件套与引导卡四段 */
.ev-row,.gd-row{margin-bottom:10px}
/* 凭证上传：任务行里的「上传按钮 + 📎 N/M 徽标」一行（不达标橙、达标绿） */
.ev-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* 凭证库：缩略图 / 文件类型图标 / 「忽略 N 份」那一行 */
.att-thumb{width:44px;height:44px;object-fit:cover;border-radius:6px;background:#eef2f7;display:block}
.att-thumb.is-broken{object-fit:contain;font-size:10px;color:var(--muted);text-align:center}
.att-ico{display:inline-block;width:44px;height:44px;line-height:44px;text-align:center;font-size:20px;background:#eef2f7;border-radius:6px}
.att-ignored{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;
  padding-top:10px;border-top:1px dashed var(--line2)}
.ev-k,.gd-k{font-size:12px;color:var(--muted);margin-bottom:3px;font-weight:600}
.ev-v,.gd-v{font-size:13px;line-height:1.7;overflow-wrap:anywhere}
.ev-pre{max-height:260px;overflow:auto;white-space:pre-wrap;word-break:break-all;background:#f7f9fc;
  border:1px solid var(--line2);border-radius:var(--r-sm);padding:10px;margin:0;font-size:12px;line-height:1.6;
  font-family:ui-monospace,Menlo,Consolas,monospace}
/* 离线状态条：ready 绿色（只承诺能打开/能看/能填能存），unsupported / failed 一律橙色且写清原因 */
.off-bar{display:flex;align-items:flex-start;gap:10px;padding:9px 14px;font-size:12.5px;line-height:1.75;
  border-bottom:1px solid var(--line2);flex-wrap:wrap}
.off-bar>div{flex:1;min-width:240px}
.off-bar .off-i{flex:0 0 auto;margin-top:3px}
.off-bar.ok{background:var(--ok-soft);color:#146c3a;border-bottom-color:#c9ecd7}
.off-bar.warn{background:var(--warn-soft);color:#8a5a00;border-bottom-color:#f2ddb8}
.off-bar code{background:rgba(0,0,0,.06);padding:1px 5px;border-radius:4px;font-size:12px}
@media (max-width:560px){
  .gd-grid{grid-template-columns:minmax(0,1fr)}
  .off-bar{padding:9px 12px}
}

/* ---------- 表格 ---------- */
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-weight:600;color:var(--muted);font-size:12px;padding:8px 10px;border-bottom:1px solid var(--line)}
td{padding:9px 10px;border-bottom:1px solid var(--line2);vertical-align:middle}
tbody tr:hover{background:#fafbfd}
.tbl-sm td,.tbl-sm th{padding:6px 8px}

/* ---------- 时间线（客户报告）---------- */
.tl{position:relative;padding-left:22px}
.tl:before{content:'';position:absolute;left:6px;top:4px;bottom:4px;width:2px;background:var(--line)}
.tl .it{position:relative;padding:0 0 16px}
.tl .it:before{content:'';position:absolute;left:-20px;top:5px;width:10px;height:10px;border-radius:50%;
  background:#fff;border:2px solid var(--line)}
.tl .it.done:before{background:var(--ok);border-color:var(--ok)}
.tl .it.cur:before{background:var(--brand);border-color:var(--brand);box-shadow:0 0 0 4px rgba(37,99,235,.15)}
.tl .t{font-weight:600;font-size:13.5px}
.tl .d{font-size:12px;color:var(--muted)}

/* ---------- 登录 ---------- */
/* 分栏卡片（仿参考图商家版，绿色系）：左侧品牌区 + 右侧身份/表单区。
 * ★ 行为不动：身份选择、单机/协作分支、企微免密全都保留，这里只换壳。 */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
  background:linear-gradient(150deg,#ecfdf5 0%,#d6f5e7 45%,#eefdf6 100%)}
.login{width:100%;max-width:430px;background:#fff;border-radius:16px;box-shadow:var(--shadow-lg);padding:26px 26px 22px}
.login2{width:100%;max-width:880px;display:flex;background:#fff;border-radius:18px;overflow:hidden;
  box-shadow:0 24px 60px rgba(4,120,87,.16)}
.l2-brand{flex:0 0 340px;color:#fff;padding:44px 34px 34px;display:flex;flex-direction:column;position:relative;overflow:hidden;
  background:linear-gradient(155deg,#34d399 0%,#10b981 42%,#059669 76%,#047857 100%)}
.l2-brand::before{content:'';position:absolute;width:280px;height:280px;border-radius:50%;
  background:rgba(255,255,255,.09);top:-90px;right:-90px}
.l2-brand::after{content:'';position:absolute;width:190px;height:190px;border-radius:50%;
  background:rgba(255,255,255,.07);bottom:-70px;left:-60px}
.l2-brand>*{position:relative;z-index:1}
.l2-brand .bicon{width:46px;height:46px;border-radius:12px;background:rgba(255,255,255,.2);
  display:flex;align-items:center;justify-content:center;font-size:22px}
.l2-brand h2{font-size:20px;margin:26px 0 4px;letter-spacing:.5px}
.l2-brand .bsub{font-size:11px;letter-spacing:3px;opacity:.88}
.l2-brand .bdesc{font-size:12.5px;opacity:.94;margin:16px 0 22px;line-height:1.8}
.l2-brand .bfeat{display:flex;align-items:center;gap:10px;font-size:12.5px;opacity:.95;margin:10px 0}
.l2-brand .bfeat .fi{width:24px;height:24px;border-radius:7px;background:rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;font-size:12px;flex:0 0 24px}
.l2-brand .bspacer{flex:1}
.l2-brand .bfoot{font-size:11px;opacity:.7}
.l2-form{flex:1;min-width:0;padding:42px 38px 32px}
.l2-form .l2ti{font-size:19px;font-weight:700;margin:0}
.l2-form .l2sb{color:var(--muted);font-size:12.5px;margin:4px 0 16px}
.l2-form .fld{margin-bottom:11px}
.l2-form .fld label{display:block;font-size:12.5px;color:var(--muted);margin-bottom:4px}
.l2-form .tip{font-size:11.5px;color:var(--muted2);margin-top:12px;line-height:1.7}
.l2-form .btn.pri{background:linear-gradient(135deg,#10b981,#059669);border-color:#059669;
  border-radius:999px;padding:11px;letter-spacing:6px;font-size:14px}
.l2-form .roles button.on{border-color:#10b981;background:#ecfdf5;color:#047857}
@media(max-width:780px){.l2-brand{display:none}.l2-form{padding:30px 24px}}
.login .hd{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.login .hd .logo{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,#3b82f6,#8b5cf6);
  color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800}
.login .ti{font-size:18px;font-weight:700}
.login .sb{color:var(--muted);font-size:12.5px;margin-bottom:16px}
.roles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px}
.roles button{border:1px solid var(--line);background:#fff;border-radius:var(--r-sm);padding:10px 6px;cursor:pointer;
  font-size:12.5px;color:var(--muted);line-height:1.3}
.roles button .ic{display:block;font-size:17px;margin-bottom:3px}
.roles button.on{border-color:var(--brand);background:var(--brand-soft);color:var(--brand2);font-weight:650}
.login .fld{margin-bottom:11px}
.login .fld label{display:block;font-size:12.5px;color:var(--muted);margin-bottom:4px}
.login .tip{font-size:11.5px;color:var(--muted2);margin-top:12px;line-height:1.7}
.err{background:var(--bad-soft);color:#9b1c1c;border:1px solid #f6cfcd;border-radius:var(--r-sm);
  padding:7px 11px;font-size:12.5px;margin-bottom:11px}

/* ---------- 提示条 ---------- */
#toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:#16202e;color:#fff;
  padding:9px 18px;border-radius:8px;font-size:13px;display:none;z-index:99;box-shadow:var(--shadow-lg);max-width:84vw}
#toast.bad{background:#b91c1c} #toast.ok{background:#15803d}

.empty{color:var(--muted2);font-size:13px;padding:14px;text-align:center;background:#fafbfd;
  border:1px dashed var(--line);border-radius:var(--r-sm)}
.hint{font-size:12px;color:var(--muted2);margin-top:6px;line-height:1.7}
.hr{height:1px;background:var(--line2);margin:14px 0}
.rowflex{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.kv-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 18px}
@media (max-width:820px){.kv-grid{grid-template-columns:1fr}}
.kv-grid .k{font-size:12px;color:var(--muted)}
.kv-grid .v{font-size:13.5px;font-weight:550}

/* 通用表单字段（设置页等处复用）。登录页另有 .login .fld 的微调，不受这条影响。 */
.fld{margin-bottom:11px}
.fld label{display:block;font-size:12.5px;color:var(--muted);margin-bottom:4px}

/* 口令框的「小眼睛」：绝对定位挂在输入框右内侧，输入框因此要留出右侧内边距，
   否则长口令的最后几位会被眼睛盖住（盖住的部分点不开、也看不清）。 */
.pwd-wrap{position:relative;display:block}
.pwd-wrap input{width:100%;padding-right:38px}
.pwd-eye{position:absolute;right:4px;top:50%;transform:translateY(-50%);
  width:28px;height:28px;padding:0;line-height:28px;text-align:center;
  background:transparent;border:0;border-radius:6px;cursor:pointer;
  font-size:14px;color:var(--muted2);user-select:none}
.pwd-eye:hover{background:#eef2f7;color:#31415a}
.pwd-eye:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.pwd-eye.on{color:var(--brand)}
/* 弹窗里的输入框自带 padding（选择器权重更高），这里要同样权重再盖一次，
   否则弹窗里那条口令的最后几位会被眼睛压住。 */
.dlg-f .pwd-wrap input{padding-right:38px}

/* 使用指南页：左边目录（跟随滚动），右边正文。
   正文自己的排版样式来自 tools/md2html.js 的 DOC_CSS（带 .guide-body 作用域），
   **这里不再另写一份指南样式** —— 两处写 = 改一处另一处不动。 */
.guide-page{display:grid;grid-template-columns:248px minmax(0,1fr);gap:14px;align-items:start}
@media (max-width:900px){.guide-page{grid-template-columns:minmax(0,1fr)}}
.guide-toc{position:sticky;top:12px;max-height:calc(100vh - 150px);overflow:auto}
.guide-toc-list{margin:0;padding-left:20px;font-size:12.5px;line-height:1.95}
.guide-toc-list a{color:var(--brand);text-decoration:none}
.guide-toc-list a:hover{text-decoration:underline}
.guide-doc h2{scroll-margin-top:12px}
.guide-doc h3{scroll-margin-top:12px}

/* 表格在窄屏内自行横向滚动，不把整页撑破 */
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tbl-scroll table{min-width:540px}

@media (max-width:900px){
  /* 关键：必须用 minmax(0,1fr)。写 1fr 时侧栏那排 nowrap 菜单会把网格列撑到 min-content，
     导致整页横向溢出（实测内容要 582px、可用 485px）。 */
  .app{grid-template-columns:minmax(0,1fr)}
  .sidebar{min-width:0;position:static;height:auto;flex-direction:row;align-items:center;gap:10px;overflow-x:auto;padding:10px 12px}
  .sidebar .menu{display:flex;gap:6px;margin:0;flex:1}
  .sidebar .menu .grp,.side-foot{display:none}
  /* 关键：菜单项必须不换行且不被压缩，否则会挤成竖排单字 */
  .sidebar .menu .it{border-left:0;margin:0;flex:0 0 auto;white-space:nowrap;padding:7px 12px}
  /* 手机：五步（执行清单那五项）**不能**再藏起来。
     以前藏的是「任务清单」的二级项——父项还在，藏了也进得去；
     2026-10-29 五步升成一级项之后，藏掉它们等于手机上根本进不了任务页。
     顶部这一排本来就能横向滑，多五格是滑动距离的问题，不是进不去的问题。 */
  .sidebar .brand{flex:0 0 auto}
  .sidebar .brand .sub{display:none}
  .sidebar .brand .nm{font-size:14px;white-space:nowrap}
  .role-chip{margin:0;flex:0 0 auto;white-space:nowrap}
  .content{padding:14px 12px 46px}
  .topbar{padding:10px 12px;gap:8px}
  .card{padding:14px 14px}
}
@media (max-width:560px){
  .g2,.g3,.g4{grid-template-columns:1fr}
  .login{padding:20px 18px}
  .login .ti{font-size:16.5px}
}
/* 触屏：按钮与状态切换的点击区域放大到手指够得着（≥36px） */
@media (max-width:900px){
  .btn{padding:8px 14px}
  .btn.sm{padding:7px 12px;min-height:34px;font-size:12.5px}
  .seg button{padding:5px 11px;min-height:32px}
  .seg.plain button{padding:5px 11px;min-height:32px}
}
/* 极窄屏（≤400px，如 iPhone SE 一代）：行内 flex 一律允许换行，避免并排元素撑破页面 */
@media (max-width:400px){
  [style*="display:flex"]{flex-wrap:wrap}
  .grid,.g2,.g3,.g4,.kv-grid{grid-template-columns:minmax(0,1fr)}
  .content{padding:12px 10px 40px}
  .card{padding:12px}
  #sel-project{min-width:0!important;width:100%!important}
}
/* ---------- 应用内弹窗（替代被禁用的 prompt/confirm/alert） ---------- */
.dlg-mask{position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:9000;
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.dlg{position:fixed;z-index:9001;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(560px,92vw);max-height:86vh;display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg);overflow:hidden}
.dlg-h{display:flex;align-items:flex-start;gap:12px;padding:16px 18px 12px;border-bottom:1px solid var(--line2)}
.dlg-t{font-size:16px;font-weight:700;letter-spacing:.2px}
.dlg-s{font-size:12.5px;color:var(--muted);margin-top:3px}
.dlg-x{margin-left:auto;background:none;border:0;font-size:22px;line-height:1;color:var(--muted2);
  cursor:pointer;padding:0 4px;border-radius:6px}
.dlg-x:hover{color:var(--text);background:var(--line2)}
.dlg-b{padding:14px 18px;overflow:auto;flex:1;-webkit-overflow-scrolling:touch}
.dlg-f{display:block;margin-bottom:12px}
.dlg-f>span{display:block;font-size:12.5px;font-weight:600;margin-bottom:5px;color:#31415a}
.dlg-f .req{color:var(--bad)}
/* 勾选项（Q3「我看过营业执照原件」）：文字在前、勾选框在后，**不预勾** */
.dlg-check{display:flex;align-items:center;gap:8px;font-size:13.5px;cursor:pointer;margin-bottom:8px}
.dlg-check input{width:auto;flex:0 0 auto}
/* 导入面板：差异表 + 可复制给客户的那段话 */
.ct-diff{width:100%;border-collapse:collapse;font-size:12.5px;margin:8px 0}
.ct-diff td{border-bottom:1px solid var(--line2);padding:7px 6px;vertical-align:top}
.ct-copy{width:100%;min-height:64px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;
  font:inherit;font-size:12.5px;color:#31415a;background:#fafbfd;box-sizing:border-box}
/* ★ 勾选项**排除在 width:100% 之外**：它排在 .dlg-check 前面，两条规则优先级相同、
   后写的胜 → 复选框被拉满整行，把后面的说明文字挤成竖排一列字。
   这里用 :not() 从根上排除，不靠「再写一条覆盖」——顺序一变就会翻车。 */
.dlg-f input:not([type="checkbox"]),.dlg-f textarea{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:8px;
  background:#fbfcfe;font-size:13.5px}
.dlg-f input:focus,.dlg-f textarea:focus{outline:0;border-color:var(--brand);background:#fff;
  box-shadow:0 0 0 3px rgba(37,99,235,.12)}
/* 勾选项单独一行：上方不再另起一个标题（同一句话写两遍看着像两条要求） */
.dlg-f-check{margin-bottom:12px}
.dlg-f-check .dlg-check{margin-bottom:0;align-items:flex-start}
.dlg-f-check .dlg-check span{flex:1 1 auto;line-height:1.6}
.dlg-f em{display:block;font-style:normal;font-size:11.5px;color:var(--muted2);margin-top:4px;line-height:1.5}
.dlg-ft{display:flex;gap:10px;justify-content:flex-end;padding:12px 18px;border-top:1px solid var(--line2);background:#fafbfd}
.dlg-ft .btn{min-width:96px}
@media (max-width:560px){
  .dlg{width:94vw;max-height:90vh}
  .dlg-ft{flex-direction:column-reverse}
  .dlg-ft .btn{width:100%}
  .dlg-f input,.dlg-f textarea{padding:10px 11px}
}
/* ---------- 项级 NAP 四态（1b）：核对弹窗与平台表格的窄屏降级 ----------
 * 规矩：**允许折行，不许截断**。逐字文案是 PM 定的，砍掉半句比换行难看得多——
 * 尤其是「不一致」那句提示，截断会只剩「你错了」，丢掉「去平台上改」这个动作。
 * 所以降级一律做成「宽屏长写法 / 窄屏短写法**两套都在 DOM 里**，用媒体查询切显示」，
 * 完整句始终留在 title（悬停可见）或 placeholder 里，任何一个宽度下都不消失。 */
.nap-item{padding:10px 0;border-top:1px solid var(--line2)}
.nap-item:first-child{border-top:0;padding-top:0}
.nap-k{font-size:12.5px;font-weight:600;color:#31415a;margin-bottom:6px}
.nap-item .seg{flex-wrap:wrap}
.nap-diff{display:block;margin-top:6px}
.nap-diff>span{display:block;font-size:12.5px;font-weight:600;margin-bottom:5px;color:#31415a}
.nap-diff .req{color:var(--bad)}
.nap-diff textarea,.nap-item textarea{width:100%;padding:9px 11px;border:1px solid var(--line);
  border-radius:8px;background:#fbfcfe;font-size:13.5px;box-sizing:border-box}
/* 客户可见端：只给状态文字，不给按钮（核对是内部作业动作） */
.nap-view{display:inline-block;font-size:13px;padding:3px 0}
.nap-view.s-done{color:var(--ok);font-weight:600}
.nap-view.s-none{color:var(--warn);font-weight:600}
/* 宽屏 = 逐字原文；窄屏 = 短写法（⚠️ / ✅ 图标保留，省了就退回两态） */
.nap-full,.t-wide,.nap-dl-full{display:inline}
.nap-short,.t-narrow,.nap-dl-short{display:none}
/* 弹窗标题那句「不一致」提示：宽屏整句连排，窄屏两句各自一行 */
.nap-br{display:none}
@media (max-width:390px){
  .nap-full,.t-wide,.nap-dl-full{display:none}
  .nap-short,.t-narrow,.nap-dl-short{display:inline}
  .nap-br{display:inline}
}
@media print{
  #dlg-host{display:none!important}
  /* 离线条是运行态提示，不属于要交给客户的那张纸 */
  .sidebar,.topbar,.noprint,.off-bar{display:none!important}
  .app{grid-template-columns:1fr}
  body{background:#fff}
  .card{box-shadow:none;border-color:#ddd}

  /* ---------- 台账打印件（架构 §8.4 的 P2–P7）---------- */
  /* P2：打印时只显示**装进去的那一档**（屏幕态的 display:none 写在媒体查询外面 → 屏幕不占位） */
  #print-root{display:block!important}
  /* P3：打印台账时把主界面整个藏掉（否则页眉页脚之外还有半个界面） */
  body.printing-ledger #app,body.printing-ledger .sidebar,body.printing-ledger .topbar{display:none!important}
  /* P4：表头每页重复、行不跨页断开 */
  #print-root thead{display:table-header-group}
  #print-root tr{page-break-inside:avoid}
  /* P5：页面尺寸与页边距 */
  @page{size:A4 portrait;margin:12mm 10mm}
  /* 打印时解除宽表的 min-width —— 屏幕上是 540px 起（为了横向滚动），
     打印时那 540px 会让 4 列的对外档被撑成半页空白 */
  .tbl-scroll table{min-width:0!important}
  .tbl-scroll{overflow:visible!important}
  /* 字号下限：再小就看不清了（老板口径：打印件要能直接看） */
  #print-root{font-size:12px;line-height:1.5;color:#16202e}
  #print-root h1{font-size:17px;margin:0 0 6px}
  #print-root .print-sub{font-size:11px;color:#333;margin:0 0 8px}
  #print-root .print-note{font-size:10px;color:#555;margin:8px 0 0}
  #print-root .print-foot{font-size:10px;color:#333;margin-top:10px;
    border-top:1px solid #bbb;padding-top:6px}
  #print-root table{width:100%;border-collapse:collapse;font-size:11px;table-layout:fixed}
  #print-root th,#print-root td{border:1px solid #bbb;padding:4px 5px;vertical-align:top;
    word-break:break-word;overflow-wrap:anywhere}
  #print-root th{background:#f0f2f5;font-weight:600}
}
