/* 瑞铠样品订单系统 H5 · 品牌 UI 单档 token（照 shared_memory/ui_design_system §1/§7）
   手机优先 375px 基准；1 主色 + 语义状态色，禁彩虹禁渐层，信息密度优先。 */

:root {
  --brand: #003c00;
  --brand-hover: #0a5c17;
  --brand-tint: rgba(0, 60, 0, 0.05);
  --gold: #b08d3e;

  --c-info: #1565c0;   --c-info-bg: #e3f2fd;
  --c-ok: #2e7d32;     --c-ok-bg: #e8f5e9;
  --c-warn: #e65100;   --c-warn-bg: #fff3e0;
  --c-danger: #c62828; --c-danger-bg: #ffebee;
  --c-muted: #546e7a;

  --surface-1: #fafafa;
  --surface-2: #f0f0f0;
  --text: #1a1a1a;
  --border: #e2e2e5;

  /* 2026-08-28 ⚖️Eddie 拍 B 案:原本这组只定义在 .sample-new/.build-bar 下,
     导致别页借用 .new-*、.icon-btn、.craft-* 时变量落空、样式静默失效(实撞 2 页)。
     现统一指向平台全局 token,一次收掉「两套绿」;新页面不必再问该用哪套。 */
  --new-brand: var(--brand);
  --new-tint: var(--brand-tint);
  --new-bg: var(--surface-1);
  --new-border: var(--border);
  --new-muted: var(--c-muted);
  --new-text: var(--text);
  --new-warn: var(--c-warn);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC",
    "Microsoft YaHei", "PingFang SC", sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--surface-1);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

/* 页面殼：手机 8pt grid，最大 720（桌面能看即可，超宽封顶置中） */
.page {
  max-width: 720px;
  margin: 0 auto;
  padding: 16px;
}

a { color: var(--brand); text-decoration: none; }

/* ---- 页头（logo + 品牌绿标题 + border-b-2 brand） ---- */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 2px solid var(--brand);
  padding-bottom: 12px;
  margin-bottom: 16px;
}
.app-header .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.app-header img.logo { width: 36px; height: 36px; object-fit: contain; flex: none; }
.app-header h1 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--brand);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-header .sub { font-size: 12px; color: var(--c-muted); margin-top: 1px; }
.app-header .actions { display: flex; gap: 8px; align-items: center; flex: none; }

/* ---- 按钮分层 ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  border-radius: 6px;
  padding: 8px 14px;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  min-height: 40px; /* 手机触控靶 */
}
.btn:hover { background: var(--surface-2); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-brand {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}
.btn-brand:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
.btn-warn { background: var(--c-warn); color: #fff; border-color: var(--c-warn); }
.btn-warn:hover { filter: brightness(1.08); }
.btn-danger { background: var(--c-danger); color: #fff; border-color: var(--c-danger); }
.btn-sm { padding: 5px 10px; min-height: 32px; font-size: 13px; }
.btn-block { width: 100%; }

/* ---- 状态 chip（唯一许可写法） ---- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 12px;
  line-height: 1.6;
  white-space: nowrap;
}
.chip-info { background: var(--c-info-bg); color: var(--c-info); }
.chip-ok { background: var(--c-ok-bg); color: var(--c-ok); }
.chip-warn { background: var(--c-warn-bg); color: var(--c-warn); }
.chip-danger { background: var(--c-danger-bg); color: var(--c-danger); }
.chip-neutral { background: var(--surface-2); color: var(--c-muted); }

/* 胶囊选择器(可点选项组)——品管异常单等表单的单选/多选选项。
   ⚖️Eddie 2026-08-27 拍 A:取代各页自造的 opt/seg 短名(画布自带样式的遗留)。 */
.pill-group { display: flex; flex-wrap: wrap; gap: 8px; }
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  line-height: 1.2;
  cursor: pointer;
  user-select: none;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.pill:hover { background: var(--brand-tint); }
.pill:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.pill--on { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 700; }
.pill--on:hover { background: var(--brand-hover); }
.pill:disabled, .pill[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }

/* 触控靶:原生勾选/单选框预设仅约 13px,手指按不准(体检第6维·⚖️Eddie 2026-09-01「做掉」)。
   桌面 16px 够用;手机段抬到 20px 并给外层 label 44px 命中区——放大控件本身超过 20px 会变形,
   故用「控件 20 + label 命中区 44」的组合,不靠拉大方块。 */
input[type="checkbox"], input[type="radio"] { accent-color: var(--brand); height: 16px; width: 16px; }
.kv-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px 16px; }

/* 成员头像与平铺列表行：供跨页成员清单复用。 */
.avatar { align-items: center; background: var(--brand); border-radius: 50%; color: #fff; display: inline-flex; flex: none; font-size: 13px; height: 32px; justify-content: center; width: 32px; }
.list-row { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--border); }
.list-row:last-child { border-bottom: 0; }

/* 建议值行:查回的建议值+采用钮(新建客户表单·⚖️Eddie 2026-09-01 批稿);候选清单卡用既有 .card+.list-row,不另立类 */
.suggest-row { align-items: center; border-bottom: 1px solid var(--surface-2); display: flex; gap: 10px; padding: 8px 2px; }
.suggest-row:last-child { border-bottom: 0; }
.suggest-label { color: var(--c-muted); flex: none; font-size: 12px; width: 88px; }


/* ---- 卡片 ---- */
.card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 12px;
}
.card-brand { border-color: rgba(0, 60, 0, 0.25); background: var(--brand-tint); }

/* 模块头（品牌绿平面块） */
.block-head {
  background: var(--brand);
  color: #fff;
  padding: 10px 14px;
  border-radius: 8px;
  margin: 4px 0 8px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.5px;
}

/* ---- 表单 ---- */
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13px; color: var(--c-muted); margin-bottom: 4px; }
.input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 16px; /* ≥16 防 iOS 聚焦缩放 */
  font-family: inherit;
  background: #fff;
  color: var(--text);
}
.input:focus { outline: 2px solid var(--brand); outline-offset: -1px; border-color: var(--brand); }

/* ---- 列表 ---- */
.toolbar { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.toolbar .input { flex: 1 1 140px; font-size: 15px; padding: 8px 10px; }
.toolbar select.input { flex: 0 0 auto; width: auto; }

.row-list { list-style: none; margin: 0; padding: 0; }
.row-item {
  display: block;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 10px;
  color: var(--text);
}
.row-item:active { background: var(--surface-2); }
.row-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.row-code { font-weight: 700; color: var(--brand); font-size: 15px; }
.row-name { margin-top: 4px; font-size: 15px; }
.row-meta { margin-top: 4px; font-size: 12px; color: var(--c-muted); display: flex; flex-wrap: wrap; gap: 4px 12px; }

/* ---- 详情：单头栏 ---- */
.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 14px; }
.kv dt { color: var(--c-muted); }
.kv dd { margin: 0; word-break: break-all; }

/* ---- 工序时间线（竖向） ---- */
.timeline { list-style: none; margin: 0; padding: 0; }
.tl-item {
  position: relative;
  padding: 0 0 14px 22px;
  border-left: 2px solid var(--border);
  margin-left: 6px;
}
.tl-item:last-child { border-left-color: transparent; }
.tl-dot {
  position: absolute;
  left: -8px;
  top: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: var(--c-muted);
}
.tl-dot.st-done { background: var(--c-ok); }
.tl-dot.st-doing { background: var(--c-info); }
.tl-dot.st-delayed { background: var(--c-warn); }
.tl-dot.st-blocked { background: var(--c-danger); }
.tl-dot.st-todo { background: var(--surface-2); border-color: var(--border); }
.tl-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tl-label { font-weight: 600; font-size: 15px; }
.tl-sub { font-size: 12px; color: var(--c-muted); margin-top: 3px; overflow-wrap: anywhere; word-break: break-word; }
.tl-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.tl-reports { margin-top: 6px; }
.tl-reports > summary { font-size: 12px; color: var(--c-info); cursor: pointer; }
.tl-reports ul { margin: 6px 0 0; padding-left: 16px; font-size: 12px; color: var(--c-muted); }

/* 部件矩阵格 */
.comp-block { border: 1px solid var(--border); border-radius: 8px; padding: 10px; margin-bottom: 10px; background: #fff; }
.comp-name { font-weight: 700; margin-bottom: 6px; }

/* ---- 照片墙 ---- */
.upload-zone { border: 1px dashed var(--brand); border-radius: 10px; padding: 14px; text-align: center; background: var(--brand-tint); }
.photo-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; margin-top: 12px; }
.photo-thumb { position: relative; }
.photo-thumb img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); display: block; }
.photo-thumb .chip { position: absolute; top: 4px; left: 4px; }
.upload-progress { font-size: 13px; color: var(--c-muted); margin-top: 8px; }
.upload-progress .fail { color: var(--c-danger); }

/* ---- toast ---- */
#toast-host {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(92vw, 420px);
}
.toast {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 14px;
  color: #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  word-break: break-word;
}
.toast.ok { background: var(--c-ok); }
.toast.err { background: var(--c-danger); }
.toast.info { background: var(--brand); }

.muted { color: var(--c-muted); }
.empty { text-align: center; color: var(--c-muted); padding: 32px 12px; }
.err-text { color: var(--c-danger); font-size: 13px; margin-top: 8px; }
.hidden { display: none !important; }

/* 客户硬性要求提示条(SP1b·黄色·建单页输入客户型号命中已建档规格时显形) */
.cs-req-banner { background: var(--c-warn-bg); color: var(--c-warn); border: 1px solid var(--c-warn); border-radius: 8px; padding: 8px 10px; font-size: 13px; margin: 4px 0 8px; }
.cs-req-banner .cs-req-title { font-weight: 700; margin-bottom: 4px; }
.cs-req-banner ul { margin: 0; padding-left: 18px; }
.cs-req-banner li { margin: 2px 0; }
.cs-req-banner li.cs-crit { font-weight: 700; }
.cs-req-banner .cs-crit-flag { color: var(--c-danger); }

/* ---- 建单页 v2(方案 A)：顶部上下文条 + 可填字段区 ---- */
/* 上下文条：只读三项(PJ/客户/产品名)·浅色卡片·不是输入框 */
.ctx-bar {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px;
  background: var(--surface-2); border: 0.5px solid var(--border); border-radius: 10px;
  padding: 9px 12px; margin-bottom: 10px; font-size: 14px; line-height: 1.5;
}
.ctx-icon { flex: 0 0 auto; }
.ctx-pj { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; color: var(--text); }
.ctx-sep { color: var(--border); }
.ctx-client { color: var(--text); }
.ctx-code { font-size: 12px; color: var(--c-muted); margin-left: 4px; }
/* 产品名可能很长 → 允许换行·不截断 */
.ctx-product { color: var(--c-muted); overflow-wrap: anywhere; word-break: break-word; min-width: 0; }

/* 可填字段区：标签在字段上方·12px 次要色 */
.fv-card { display: flex; flex-direction: column; gap: 12px; }
.fv-row { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fv-label { font-size: 12px; color: var(--c-muted); }
.fv-in {
  width: 100%; border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 10px; font-size: 15px; font-family: inherit; background: #fff; color: var(--text);
}
.fv-in:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-tint); }
select.fv-in { appearance: auto; -webkit-appearance: menulist; }
textarea.fv-in { resize: vertical; min-height: 40px; line-height: 1.4; }
.fv-hint { font-size: 12px; color: var(--c-muted); }
/* 客户型号 + 主负责人 并排·窄屏自动堆叠 */
.fv-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
/* 型号输入 + 徽章 并排一行 */
.fv-inline { display: flex; align-items: center; gap: 8px; min-width: 0; }
.fv-inline .fv-in { flex: 1 1 auto; min-width: 0; }
/* 底部：左提示 + 右主按钮 */
.fv-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.fv-foot-note { font-size: 12px; color: var(--c-muted); }

/* 客户型号硬性要求·可点橙胶囊(点开式) */
.cs-badge { flex: 0 0 auto; display: inline-block; white-space: nowrap; font-size: 12px; font-weight: 600; color: var(--c-warn); background: var(--c-warn-bg); border: 1px solid var(--c-warn); border-radius: 999px; padding: 3px 10px; cursor: pointer; user-select: none; }
.cs-badge:hover { filter: brightness(0.97); }

/* 采购单预览(T5.1) */
.po-err { color: var(--c-danger); background: var(--c-danger-bg); border-radius: 8px; padding: 8px 10px; font-size: 13px; margin-top: 8px; }
.po-warn { color: var(--c-warn); background: var(--c-warn-bg); border-radius: 8px; padding: 8px 10px; font-size: 13px; margin-top: 8px; }
.po-card { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-top: 10px; background: var(--surface-1); }
.po-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.po-sup { font-weight: 700; color: var(--brand); }
.po-total { margin-left: auto; font-weight: 700; }
.po-table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 13px; }
.po-table th { text-align: left; color: var(--c-muted); font-weight: 600; border-bottom: 1px solid var(--border); padding: 4px 6px; }
.po-table td { padding: 5px 6px; border-bottom: 1px solid var(--surface-2); }
.po-table td.po-num, .po-table th:nth-child(n+2) { text-align: right; }
.po-grand { display: flex; align-items: center; margin-top: 12px; padding-top: 10px; border-top: 2px solid var(--brand); font-size: 13px; color: var(--c-muted); }
.po-grand-total { margin-left: auto; font-size: 15px; font-weight: 700; color: var(--brand); }
.po-toolbar { display: flex; gap: 8px; flex-wrap: wrap; }
.po-num { font-family: ui-monospace, monospace; font-weight: 700; }

/* 样品订单建单弹窗(T5.4) */
.modal-mask { position: fixed; inset: 0; background: rgba(0,0,0,0.45); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 50; }
.modal-card { background: #fff; border-radius: 14px; padding: 16px; width: 100%; max-width: 420px; max-height: 90vh; overflow-y: auto; box-shadow: 0 8px 32px rgba(0,0,0,0.24); }
.modal-head { font-size: 16px; font-weight: 700; color: var(--brand); margin-bottom: 12px; }
.fld { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; font-size: 13px; color: var(--c-muted); }
.required-mark { color: var(--c-danger); font-weight: 600; }
.fld input, .fld select { font-size: 15px; color: var(--text); padding: 9px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-1); }
.fld input:focus, .fld select:focus { outline: none; border-color: var(--brand); }
.so-total-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--c-muted); padding: 8px 0; border-top: 1px dashed var(--border); }
.so-total-row span { font-size: 17px; font-weight: 700; color: var(--brand); }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }

/* 材料及工艺编辑器(T3.4) */
.proc-row { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-top: 10px; background: var(--surface-1); }
.proc-row-top { display: flex; gap: 8px; align-items: center; }
.proc-row-top .input { flex: 1 1 auto; }
.proc-row-top .proc-semi { flex: 0 0 120px; font-weight: 600; }
.proc-del { flex: 0 0 auto; color: var(--c-muted); background: none; border: none; font-size: 18px; font-weight: 700; cursor: pointer; padding: 0 6px; }
.proc-del:hover { color: var(--c-danger); }
.proc-row .proc-proc { width: 100%; margin-top: 6px; resize: vertical; min-height: 34px; }
.proc-row .proc-note { width: 100%; margin-top: 6px; }
.proc-buy { margin-top: 8px; border-top: 1px dashed var(--border); padding-top: 8px; }
.proc-buy summary { cursor: pointer; font-size: 12px; font-weight: 600; color: var(--brand); user-select: none; }
.proc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 8px; }
.proc-grid label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--c-muted); }
.proc-grid label.col-2 { grid-column: span 2; }
.proc-grid .input { font-size: 14px; padding: 7px 9px; }
@media (min-width: 560px) { .proc-grid { grid-template-columns: repeat(4, 1fr); } }

/* 派工界面(T3.4) */
.rt-step { display: flex; align-items: center; gap: 8px; background: var(--surface-1); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; margin-bottom: 6px; }
.rt-step .rt-chk { width: 18px; height: 18px; flex: 0 0 auto; }
.rt-step .rt-label { flex: 1 1 auto; font-size: 14px; font-weight: 600; }
.rt-step .rt-exec { flex: 0 0 auto; max-width: 46%; }

/* 客户 picker(T3.5·建单页) */
.client-picker { position: relative; }
.picker-dropdown {
  position: absolute; left: 0; right: 0; top: calc(100% + 2px); z-index: 30;
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12); max-height: 260px; overflow-y: auto;
}
.picker-item { padding: 8px 10px; cursor: pointer; font-size: 14px; border-bottom: 1px solid var(--surface-2); }
.picker-item:last-child { border-bottom: none; }
.picker-item:hover { background: var(--brand-tint); }
.picker-code { font-weight: 700; color: var(--brand); }
.picker-name { font-weight: 600; }
.picker-full { font-size: 12px; }
.picker-empty { padding: 8px 10px; font-size: 13px; }
.craft-picker-dropdown {
  position: absolute; left: 0; right: 0; top: calc(100% + 2px); z-index: 35;
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12); max-height: 260px; overflow-y: auto;
}
.craft-picker-group { padding: 6px 10px; background:var(--new-bg); border-bottom:1px solid #eef2ee; color:var(--new-muted); font-size:11px; }
.craft-picker-item { display:flex; align-items:center; width:100%; padding:8px 10px; border:0; border-bottom:1px solid var(--surface-2); background:#fff; color:var(--new-text); font:inherit; text-align:left; cursor:pointer; }
.craft-picker-item:last-child { border-bottom:none; }
.craft-picker-item:hover { background:var(--brand-tint); }
.craft-picker-item.is-keyboard-active { background:var(--new-tint); }
.craft-picker-preps { margin-left:8px; color:var(--new-muted); font-size:12px; }
.craft-custom-option { width:100%; padding:8px 10px; border:0; background:#fff; color:var(--new-brand); font:inherit; text-align:left; cursor:pointer; }
.mk { background:#ffe9b8; border-radius:2px; padding:0 1px; }
/* 简称碰撞防呆(2026-08-07·照 .cs-badge 橙胶囊风格) */
.dup-warn { display: inline-block; margin-left: 6px; white-space: nowrap; font-size: 12px; font-weight: 600; color: var(--c-warn); background: var(--c-warn-bg); border: 1px solid var(--c-warn); border-radius: 999px; padding: 1px 8px; }
.dup-use { display: inline-block; margin-left: 6px; font-size: 12px; color: var(--c-muted); }

/* ============================================================
   T1 统一壳（只增不删·加档尾）
   顶栏（登录后全页）+ 容器宽分级 + 页头 h1 字号响应式(C1)
   ============================================================ */

/* ---- 容器宽分级（.page 默认 720 不动；<max-width 视口自动流体=零回归） ---- */
.page--wide { max-width: none; }
.page--form { max-width: 960px; }
.page--auth { max-width: 400px; }
.page--board { max-width: none; } /* 审批台/看板型清单页(销售订单线在用·此前未定义回退720) */
.page--mfg { max-width: none; }
/* 覆盖 mfg_oos.html:21 的 .page--mfg 1600px 上限；不改模板，保留既有内边距。 */
.app-main > .page.page--mfg { max-width: none; }

/* ---- 样品单一页化建单页（批2：画布 Main/Tablet/Mobile） ---------------- */
.page.sample-new-page { max-width: none; padding: 16px 24px 94px; background: var(--surface-1); color: var(--text); }
.new-page-title { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:12px; }
.new-kicker { color:var(--new-muted); font-size:12px; line-height:1.2; }
.new-page-title h1 { margin:2px 0 0; font-size:23px; line-height:1.25; color:var(--new-text); }
.new-page-note { display:block; margin-top:4px; color:var(--new-muted); font-size:12px; line-height:1.2; }
.required-status { color:var(--new-brand); font-size:13px; white-space:nowrap; }
.required-status::before { content:'●'; margin-right:6px; font-size:10px; }
.required-status.is-missing { color:var(--new-warn); }
.new-card, .part-list-card, .craft-card { background:#fff; border:1px solid var(--new-border); border-radius:10px; }
.new-card { padding:16px 20px 12px; }
.new-card-head, .part-list-head, .craft-card-head, .craft-title-row { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.new-card h2, .part-list-card h2, .craft-card h2 { margin:0; font-size:16px; color:var(--new-text); }
.text-btn, .icon-btn { appearance:none; background:none; border:0; color:var(--new-muted); cursor:pointer; font:inherit; }
.text-btn { font-size:13px; }
.order-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px 16px; }
.span-2 { grid-column:span 2; }
.new-field { display:flex; flex-direction:column; gap:4px; position:relative; min-width:0; color:var(--new-muted); font-size:12px; }
.field-label { display:flex; align-items:center; gap:4px; }
.new-field b { color:var(--new-warn); }
.new-input { height:38px; width:100%; border:1px solid var(--new-border); border-radius:8px; padding:0 10px; color:var(--new-text); background:#fff; font:400 14px var(--font); }
textarea.new-input { height:auto; min-height:38px; padding:8px 10px; resize:vertical; }
.new-input:focus { outline:0; border:2px solid var(--new-brand); padding-left:9px; }
.quantity-date { display:flex; gap:8px; min-width:0; }
.quantity-date .new-field:first-child { flex:1; }.quantity-date .new-field:last-child { flex:1.6; }
.field-hint,.field-error { margin-top:2px; font-size:12px; }.field-error { color:#c0392b; }.new-input.is-error { border-color:#c0392b; }
.customer-field .picker-dropdown { top:calc(100% + 2px); }
.cs-badge { position:absolute; top:0; right:0; border:0; padding:0; background:transparent; font-size:12px; font-weight:500; color:var(--new-warn); }
.cs-req-banner { grid-column:1 / -1; margin:0; }
.order-summary { color:var(--new-muted); font-size:13px; padding-bottom:4px; }
.quote-summary { display:flex; align-items:center; gap:12px; border-top:1px solid #e7ede8; margin-top:14px; padding-top:12px; font-size:13px; }
.quote-summary b { font-size:14px; color:var(--new-text); }.quote-summary span { color:var(--new-muted); }.quote-summary .outline-btn { margin-left:auto; }
.quote-spec-view:not(.hidden) { margin-top:10px; }
.outline-btn { min-height:32px; border:1px solid var(--new-border); border-radius:8px; padding:5px 14px; background:#fff; color:var(--new-brand); font:500 13px var(--font); cursor:pointer; white-space:nowrap; }
.parts-workspace { display:flex; align-items:stretch; gap:16px; margin-top:16px; min-height:360px; }
.part-list-card { width:260px; min-width:250px; padding:14px; display:flex; flex-direction:column; gap:6px; }.part-list-head h2 span { color:var(--new-muted); font-weight:400; }
.icon-btn { display:grid; place-items:center; width:30px; height:30px; border:1px solid var(--new-border); border-radius:8px; font-size:18px; color:var(--new-brand); }
.part-list { display:flex; flex:1; flex-direction:column; gap:4px; overflow-y:auto; max-height:440px; }
.part-item { width:100%; border:1px solid transparent; border-radius:8px; padding:9px 10px; background:#fff; color:var(--new-text); text-align:left; cursor:pointer; font:inherit; }.part-item:hover{background:#f0f4f1}.part-item.is-active{border-color:var(--new-brand);background:var(--new-tint);color:var(--new-brand)}
.part-item-top { display:flex; justify-content:space-between; gap:8px; font-size:14px; }.part-item-top b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.part-item-top span,.part-item-sub{color:var(--new-muted);font-size:12px}.part-item.is-active .part-item-top span{color:var(--new-brand)}.part-item-sub{margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.add-part{width:100%;margin-top:4px;color:var(--new-text)}
.craft-card { position:relative; flex:1; min-width:0; padding:16px 20px; }.craft-card-head{align-items:flex-start;margin-bottom:12px}.craft-card-head h2{font-size:18px;margin-top:2px}.more-menu{position:absolute;right:20px;top:52px;z-index:5;background:#fff;border:1px solid var(--new-border);border-radius:8px;padding:4px;box-shadow:0 5px 14px rgba(23,49,31,.12)}.more-menu button{border:0;background:#fff;color:#c0392b;padding:7px 10px;font:13px var(--font);cursor:pointer}
.part-fields{display:flex;gap:16px;margin-bottom:16px}.part-fields .new-field:first-child{width:240px}.part-fields .new-field:last-child{flex:1}.craft-title-row{margin-bottom:6px}.craft-title-row>div{display:flex;align-items:baseline;gap:8px}.craft-title-row h2{font-size:15px}.craft-title-row span{font-size:12px;color:var(--new-muted)}
.craft-table{max-height:470px;overflow:auto}.craft-table:has(.craft-picker-dropdown){overflow:visible}.craft-table.is-picking{overflow:visible}.craft-table-head,.craft-row{display:grid;grid-template-columns:44px 1.1fr 1.9fr 1.1fr 140px 36px;gap:0 12px;align-items:center;min-width:720px}.craft-table-head{position:sticky;top:0;z-index:1;padding:8px 4px;background:#fff;border-bottom:1px solid #e7ede8;color:var(--new-muted);font-size:12px}.craft-row{min-height:54px;border-bottom:1px solid #f0f4f1}.craft-row .new-input{height:34px;font-size:13px}.craft-row .craft-name{position:relative;font-weight:700;color:var(--new-text)}.craft-picker-selected{width:100%;min-height:34px;border:0;padding:0 2px;background:transparent;color:var(--new-text);font:700 13px var(--font);text-align:left;cursor:text}.craft-picker-selected:focus-visible{outline:2px solid var(--new-brand);outline-offset:2px;border-radius:4px}.craft-name .picker-dropdown{z-index:35}.seq-dot{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#f0f4f1;color:var(--new-muted);font-size:12px}.prep-badge{display:inline-flex;align-items:center;gap:5px;width:max-content;max-width:100%;padding:4px 6px 4px 10px;border:1px solid #bcd6c2;border-radius:8px;background:var(--new-tint);color:var(--new-brand);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.prep-cancel{display:grid;place-items:center;width:16px;height:16px;padding:0;border:0;border-radius:4px;background:#d4e6d9;color:var(--new-brand);font:14px/1 var(--font);opacity:0;cursor:pointer}.prep-badge:hover .prep-cancel{opacity:1}.prep-cancelled{border-style:dashed;background:#fff;color:var(--new-muted)}.prep-cancelled b{text-decoration:line-through}.prep-restore,.prep-add{border:0;background:none;padding:0;color:var(--new-brand);font:12px var(--font);text-decoration:underline;cursor:pointer}.prep-none{color:var(--new-muted);padding-left:2px}.prep-add{display:none;margin-left:7px}.prep-owner:hover .prep-add{display:inline}.prep-panel{grid-column:2 / 7;display:grid;grid-template-columns:1fr 150px;gap:8px;margin:8px 0 12px;padding:12px;border:1px solid var(--new-border);border-radius:10px;background:#fbfdfb}.prep-panel-title{grid-column:1 / 3;color:var(--new-muted);font-size:12px}.prep-panel-actions{grid-column:1 / 3;display:flex;align-items:center;gap:10px;justify-content:flex-end;font-size:12px;color:var(--new-muted)}.prep-panel-actions label{margin-right:auto}.craft-empty{padding:24px 12px;text-align:center;color:var(--new-muted);font-size:13px}.craft-custom{display:flex;gap:5px;align-items:center}.craft-custom .new-input{min-width:0}.changed-note{font-size:12px;color:var(--new-warn);margin-top:3px}.restore-owner{border:0;background:none;padding:0;color:var(--new-warn);font:12px var(--font);cursor:pointer;text-decoration:underline}.craft-help{margin-top:10px;border-radius:8px;background:var(--new-bg);padding:9px 12px;color:var(--new-muted);font-size:12px}
.mobile-owner { display:none; }
.craft-preps-card{padding:18px}.craft-preps-intro{margin-bottom:14px;border-radius:8px;background:var(--new-bg);padding:10px 12px;color:var(--new-muted);font-size:12px}.craft-preps-table{width:100%;border-collapse:collapse}.craft-preps-table th,.craft-preps-table td{padding:9px 10px;vertical-align:middle}.craft-prep-kinds{display:flex;flex-wrap:wrap;gap:6px}.craft-prep-kind{border:1px solid var(--new-border);border-radius:7px;padding:4px 7px;font-size:12px;white-space:nowrap}.craft-prep-source{color:var(--new-muted);font-size:12px}.craft-prep-source.is-manual{color:var(--new-brand);font-weight:700}
.purchase-unavailable{display:flex;align-items:center;gap:12px;margin-top:16px;border:1px dashed var(--new-border);border-radius:10px;padding:10px 16px;color:var(--new-muted);font-size:13px}.purchase-unavailable b{color:var(--new-text)}.purchase-unavailable span:last-child{margin-left:auto}.build-error{margin-top:12px;border:1px solid #e4b7b2;border-radius:8px;background:#fbf1f0;color:var(--new-text);padding:12px 14px;font-size:13px}.build-error b{color:#c0392b}
.build-bar{position:fixed;z-index:10;bottom:0;left:var(--sidebar-width,0px);right:0;display:flex;align-items:center;gap:16px;padding:12px 24px;background:#fff;border-top:1px solid var(--new-border)}.sidebar-collapsed .build-bar{left:0}.build-bar>div{display:flex;flex-direction:column}.build-bar b{font-size:15px;color:var(--new-text)}.build-bar span{margin-top:2px;color:var(--new-muted);font-size:12px}.build-btn{min-height:42px;margin-left:auto;border:1px solid var(--new-brand);border-radius:8px;padding:9px 28px;background:var(--new-brand);color:#fff;font:700 15px var(--font);cursor:pointer}.build-btn:disabled{background:#c9d6cd;border-color:#c9d6cd;cursor:not-allowed}
.detail-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}.detail-void{color:#b42318}.detail-tracking-note{margin:14px 0 92px;border-radius:10px;background:var(--new-bg);padding:10px 14px;color:var(--new-muted);font-size:13px}.detail-tracking-note a{color:var(--new-brand);font-weight:700}.legacy-notice{margin:0 0 12px;border:1px solid #ead9a4;border-radius:8px;background:#fffbed;padding:10px 12px;color:#725b08;font-size:13px}.legacy-notice b{margin-right:6px}.locked-craft{display:inline-block;padding:7px 2px;color:var(--new-muted);font-weight:700}.craft-row.is-locked{background:#f7f8f7}.craft-row.is-locked .new-input,.craft-row.is-locked select{background:#f1f3f1;color:var(--new-muted)}.locked-note{margin-top:3px;color:#8b6b00;font-size:12px}.sample-detail-page .parts-workspace{margin-top:16px}
@media (max-width:1023px){.page.sample-new-page{padding:14px 16px 90px}.parts-workspace{gap:12px}.part-list-card{width:30%;min-width:0}.craft-card{width:70%;padding:14px 16px}.part-fields{gap:12px}.part-fields .new-field:first-child{width:180px}.craft-table-head,.craft-row{grid-template-columns:34px 1fr 1.5fr 1fr 110px 32px;gap:0 8px;min-width:620px}.craft-row{min-height:50px}.craft-row .new-input{height:32px}.build-bar{left:0;padding:10px 16px}}
@media (max-width:767px){.page.sample-new-page{padding:12px 14px 118px}.new-page-title h1{font-size:19px}.order-card{padding:12px 14px}.order-grid{grid-template-columns:1fr;gap:10px}.span-2{grid-column:auto}.cs-req-banner{grid-column:auto}.parts-workspace{display:block;margin-top:12px}.part-list-card{width:auto;border:0;background:transparent;padding:0;margin-bottom:10px}.part-list-head{margin-bottom:6px}.part-list{display:flex;flex-direction:row;overflow-x:auto;max-height:none;padding-bottom:2px}.part-item{width:auto;flex:0 0 auto;padding:8px 12px;border-color:var(--new-border);white-space:nowrap}.part-item-sub,.part-item-top span{display:none}.add-part{display:none}.craft-card{width:auto;padding:12px 14px}.craft-card-head h2{font-size:16px}.part-fields{flex-direction:column;gap:10px;margin-bottom:12px}.part-fields .new-field:first-child{width:auto}.craft-title-row>div span{display:none}.craft-table{max-height:none;overflow:visible}.craft-table-head{display:none}.craft-row{display:block;min-width:0;min-height:0;margin-bottom:8px;padding:10px 12px;border:1px solid #e7ede8;border-radius:8px}.craft-row>div:first-child{display:flex;align-items:center;gap:8px}.craft-row .craft-name{margin-left:30px;margin-top:-22px}.craft-row .craft-more{position:relative;float:right;margin-top:-22px}.craft-row .new-input{height:40px;margin-top:8px}.craft-row .craft-note-cell{display:block}.craft-row .prep-owner{display:flex;align-items:center;gap:8px;margin-top:8px}.craft-row .prep-owner .new-input{width:130px;margin:0 0 0 auto}.craft-row .desktop-owner{display:none}.craft-row .mobile-owner{display:block;margin-left:auto}.changed-note{margin-top:2px}.craft-help{display:none}.purchase-unavailable{margin-top:12px;padding:9px 12px;font-size:12px}.purchase-unavailable span:nth-child(2){display:none}.purchase-unavailable span:last-child{margin-left:0}.build-bar{display:block;padding:10px 14px 14px}.build-bar b{display:none}.build-bar span{display:block;margin:0 0 8px}.build-btn{width:100%;margin:0;border-radius:10px;min-height:48px;font-size:16px}.quote-summary{gap:8px}.quote-summary span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.required-status{font-size:12px}}

/* 专⑤样品详情：手机页头先显示样品标题，再显示原有全部入口；桌面不变。 */
@media (max-width: 767px) {
  #detail-root .new-page-title { align-items: stretch; flex-direction: column; gap: 8px; }
  #detail-root .detail-actions { justify-content: flex-start; }
}

/* ---- 页头 h1 字号响应式（C1）：桌面放大，手机维持 18px ---- */
@media (min-width: 1024px) {
  .app-header h1 { font-size: 23px; }
}

/* ============================================================
   T2 列表桌面表格 + Peek 侧滑速览面板（只增·加档尾）
   ≥1024 表格；<1024 维持手机卡片(现状零改动)。面板=浮层(box-shadow 豁免)。
   ============================================================ */

/* ---- 桌面表格（.row-list.as-table 作纯容器·卡片样式让位） ---- */
.row-list.as-table { margin: 0; padding: 0; }
.sample-table-wrap { overflow-x: auto; }
.sample-table--wide { min-width: 560px; } /* 窄屏下让多列表格横滚而非挤压(④ 09-05 立·首用=检讨会行动项表) */
.sample-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.sample-table thead th {
  text-align: left;
  color: var(--c-muted);
  font-weight: 600;
  font-size: 13px;
  padding: 10px 12px;
  border-bottom: 2px solid var(--brand);
  white-space: nowrap;
}
.sample-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--surface-2);
  vertical-align: middle;
}
.sample-table tbody tr:last-child td { border-bottom: none; }
.sample-row { cursor: pointer; transition: background 0.1s; }
.sample-row:hover { background: var(--brand-tint); }
.sample-row.is-active { background: var(--brand-tint); box-shadow: inset 3px 0 0 var(--brand); }
.sample-table .col-code a.so-link { font-weight: 700; color: var(--brand); font-family: ui-monospace, monospace; }
.sample-table .col-code a.so-link:hover { text-decoration: underline; }
.sample-table .col-step { white-space: nowrap; }
.sample-table .col-step .cell-step { margin-right: 4px; }
.sample-table .col-date { color: var(--c-muted); white-space: nowrap; }

/* ---- Peek 面板 ---- */
.peek-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 640px;
  max-width: 90vw;
  height: 100vh;
  background: #fff;
  border-left: 1px solid var(--border);
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.16);   /* 浮层豁免(铁律2) */
  transform: translateX(100%);
  transition: transform 0.18s ease;
  z-index: 60;
  display: flex;
  flex-direction: column;
}
.peek-panel.open { transform: translateX(0); }
.peek-inner { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.peek-loading { padding: 24px; color: var(--c-muted); }

.peek-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 2px solid var(--brand);
  flex: none;
}
.peek-head-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
.peek-code { font-weight: 700; font-size: 18px; color: var(--brand); font-family: ui-monospace, monospace; }
.peek-head-act { display: flex; align-items: center; gap: 12px; flex: none; }
.peek-open { font-size: 13px; color: var(--c-info); white-space: nowrap; }
.peek-open:hover { text-decoration: underline; }
.peek-close {
  border: none; background: none; cursor: pointer;
  font-size: 20px; line-height: 1; color: var(--c-muted); padding: 2px 6px;
}
.peek-close:hover { color: var(--text); }

.peek-body { padding: 16px 18px; overflow-y: auto; flex: 1 1 auto; }
.peek-sec-title { font-weight: 700; font-size: 14px; color: var(--brand); margin: 18px 0 8px; }
.peek-kv { margin-bottom: 4px; }

/* stepper（横向单链） */
.peek-stepper { display: flex; align-items: flex-start; gap: 0; }
.peek-node { flex: 1 1 0; text-align: center; position: relative; padding: 0 4px; min-width: 0; }
.peek-node::before {
  content: ""; position: absolute; top: 7px; left: -50%; width: 100%;
  height: 2px; background: var(--border); z-index: 0;
}
.peek-node:first-child::before { display: none; }
.peek-dot {
  position: relative; z-index: 1; display: block; width: 16px; height: 16px;
  border-radius: 50%; margin: 0 auto 6px; border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--border); background: var(--c-muted);
}
.peek-dot.st-done { background: var(--c-ok); }
.peek-dot.st-doing { background: var(--c-info); }
.peek-dot.st-delayed { background: var(--c-warn); }
.peek-dot.st-blocked { background: var(--c-danger); }
.peek-dot.st-todo { background: var(--surface-2); }
.peek-node-label { font-size: 12px; font-weight: 600; line-height: 1.3; }
.peek-node-sub { font-size: 11px; color: var(--c-muted); margin-top: 2px; }

/* stepper（矩阵退化·纵向简表） */
.peek-matrix { display: flex; flex-direction: column; gap: 6px; }
.peek-mrow { display: flex; align-items: center; gap: 8px; }
.peek-mrow .peek-dot { margin: 0; flex: none; }
.peek-mrow-label { flex: 1 1 auto; font-size: 13px; font-weight: 600; min-width: 0; }

/* 数字卡 ×3（中性·不抢强调框） */
.peek-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
.peek-num { border: 1px solid var(--border); border-radius: 10px; padding: 12px; text-align: center; background: var(--surface-1); }
.peek-num-val { font-size: 20px; font-weight: 700; color: var(--brand); }
.peek-num-lbl { font-size: 12px; color: var(--c-muted); margin-top: 2px; }

/* 快速报工 */
.peek-report { margin-top: 16px; border: 1px solid var(--border); border-radius: 10px; padding: 12px; background: var(--brand-tint); }
.peek-report-cur { font-size: 13px; margin-bottom: 8px; }
.peek-report-btns { display: flex; gap: 8px; flex-wrap: wrap; }

/* 最近动态 */
.peek-activity { list-style: none; margin: 0; padding: 0; font-size: 12px; color: var(--c-muted); }
.peek-activity li { padding: 6px 0; border-bottom: 1px solid var(--surface-2); word-break: break-word; }
.peek-activity li:last-child { border-bottom: none; }
.peek-empty { font-size: 13px; color: var(--c-muted); padding: 8px 0; }

/* ============================================================
   T3 详情页桌面两栏（只增·加档尾）
   模板把各区拆进 .detail-col--left / --right 两个物理列（列内独立堆叠·无
   grid 行耦合空隙）。<1024=手机：两列 display:contents 溶解，全部区成为
   #detail-root 的 flex 子项，凭 order 恢复现状竖排顺序（视觉零回归）；
   ≥1024=桌面：#detail-root 变 grid「460 固定 | 弹性」，两列各自 flex 竖排。
   ============================================================ */

/* ---- 手机（默认/基线）：溶解两列 + order 复原现状顺序 ---- */
.detail-grid { display: flex; flex-direction: column; }
.detail-col { display: contents; }
/* 现状竖排：单头→时间线→派工→完工结案→材料工艺→采购单→样品订单→拍照上传。
   桌面各列内也是同源顺序，order 升序不改列内序，故无需分视口。 */
#head-box       { order: 1; }
.sec-timeline   { order: 2; }
.sec-dispatch   { order: 3; }
#completion-box { order: 4; }
.sec-material   { order: 5; }
.sec-po         { order: 6; }
.sec-so         { order: 7; }
.sec-upload     { order: 8; }
/* section 包裹层不引入额外间距（内部 block-head/card 自带 margin） */
.detail-sec { margin: 0; }

/* ---- 桌面 ≥1024：两栏 grid ---- */
@media (min-width: 1024px) {
  .detail-grid {
    display: grid;
    grid-template-columns: 460px minmax(0, 1fr);
    gap: 0 20px;
    align-items: start;
  }
  /* 表单版：宽栏在前（表单），窄栏在后（照片/说明/送出）——与详情页的 460+1fr 相反。
     2026-08-27 UI④：品管开单页实测，若靠对调 detail-col 归属来加宽表单，
     旁栏会因「网格游标只前进」被挤到最后一行，故改由栅格本身定义栏宽。 */
  .detail-grid--form { grid-template-columns: minmax(0, 1fr) 460px; }
  /* --nav = 左侧窄导航栏 + 右侧内容;与 --form(内容在前 460 在后)、预设(460 在前)并列为第三种栏型。 */
  .detail-grid--nav { grid-template-columns: 300px minmax(0, 1fr); }
  .detail-col { display: flex; flex-direction: column; }
  .detail-col--left  { grid-column: 1; }
  .detail-col--right { grid-column: 2; }
  /* 单头 kv 桌面多列横排（2 组标签/值一行）更好扫读 */
  #head-box .kv { grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr); }
}

/* ---- 右栏材料及工艺：≥1400 视口放宽到 6 列（560 断点 4 列不动·建单页不受影响） ---- */
@media (min-width: 1400px) {
  .detail-col--right .proc-grid { grid-template-columns: repeat(6, 1fr); }
}

/* 详情页两栏并排壳(④ 09-05 立·首用=异常单检讨会) */
.detail-two-col { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; align-items:start; }
.detail-two-col > :only-child { grid-column: 1 / -1; } /* 只剩一张卡(如非业务主管看不到主管意见)时撑满,不留空半格 */
/* 巢状 grid 子项 min-width:auto 会撑宽父格，一律清零(④授权·客户档案页 v1 09-05 补：
   主档三栏是巢状 grid，会把 min-content 撑给上层 detail-two-col，390 宽度下整页
   横向捲动即此病) */
.detail-two-col > * { min-width: 0; }
@media (max-width:768px){ .detail-two-col{ grid-template-columns:1fr; } }

/* 专⑤工程完工／业务确认：定稿桌面主图 520px，手机按卡片可用宽度缩放且保留实拍比例。 */
#engineering-completion-root #completion-main-photo,
#business-closeout-root #closeout-main-photo {
  display: block;
  width: 520px;
  max-width: 100%;
  height: auto;
}

/* wb-shell */
.wb-shell-heading, .wb-workbench { max-width: none; margin: 0 auto; padding: 0; }
.wb-shell-heading { align-items: flex-start; display: flex; gap: 16px; justify-content: space-between; }
.wb-shell-heading h1 { margin: 0; color: var(--brand, #003C00); font-size: 26px; }
.wb-shell-heading p { margin: 4px 0 0; color: var(--c-muted); }
.wb-page-actions { align-items: center; display: flex; flex: 0 0 auto; gap: 8px; justify-content: flex-end; }
.wb-page-actions:empty { display: none; }
.wb-primary-action { align-items: center; background: var(--brand, #003C00); border-radius: 8px; color: #fff; display: inline-flex; font-weight: 700; min-height: 40px; padding: 0 14px; text-decoration: none; }
.wb-primary-action:hover { color: #fff; opacity: .9; }
.wb-section { margin: 0 0 16px; }
.wb-section h2 { margin: 0 0 8px; color: var(--brand, #003C00); font-size: 1rem; }
.wb-kpi-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.wb-card { background: var(--surface-1, #fff); border: 1px solid var(--border, #d8ead8); border-radius: 12px; box-sizing: border-box; min-height: 72px; padding: 12px; }
.wb-card--pending { background: #f3f5f3; color: var(--c-muted); opacity: .72; }
.wb-card-label, .wb-card .label { color: var(--c-muted); font-size: .9rem; }
.wb-card-value, .wb-card .value { color: var(--brand, #003C00); font-size: 1.4rem; font-weight: 700; }
.wb-card-status { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.wb-status-chip { background: var(--brand-tint, #e7f2e7); border-radius: 999px; color: var(--brand, #003C00); font-size: .78rem; padding: 3px 7px; }
.wb-status-chip--warning { background: #fff1dd; color: #9a5700; }
.wb-task-list { display: grid; gap: 8px; margin-top: 10px; }
.wb-task-row { align-items: center; border: 1px solid var(--border, #d8ead8); border-radius: 10px; display: grid; gap: 6px; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.5fr) minmax(5rem, .7fr) auto; padding: 10px 12px; }
/* 四栏是为「标题/说明/日期/状态」四个子元素设计；只有一个子元素时应占满整行，否则会被压进 1.2fr。 */
.wb-task-row > :only-child { grid-column: 1 / -1; }
/* 待办卡的行不是项目符号清单；移除 ul 的默认缩进，把可用宽度留给任务内容。 */
.wb-section ul:has(> .wb-task-row) { list-style: none; margin: 0; padding-left: 0; }
.wb-task-title { font-weight: 700; }
.wb-task-note, .wb-task-deadline { color: var(--c-muted); font-size: .9rem; }
.wb-task-action { color: var(--brand, #003C00); font-size: .9rem; font-weight: 700; }
.wb-more-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.wb-action { align-items: center; background: #fff; border: 1px solid #b6d6b6; border-radius: 10px; box-sizing: border-box; color: #003C00; display: flex; justify-content: center; min-height: 44px; padding: 8px 10px; text-align: center; text-decoration: none; }
.wb-more { border-top: 1px solid var(--border, #d8ead8); padding-top: 10px; }
.wb-more summary { color: var(--brand, #003C00); cursor: pointer; font-weight: 600; }
.wb-more-content { padding-top: 10px; }
.wb-more-group + .wb-more-group { margin-top: 12px; }
.wb-more-group h3 { font-size: .9rem; margin: 0 0 6px; color: var(--c-muted); }
@media (min-width: 768px) {
  .wb-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wb-more-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* sidebar-shell */
.app-shell { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh; transition: grid-template-columns 220ms ease; }
.app-shell.no-sidebar { display: block; }
.nav-mask, .sidebar-expand { display: none; }
.app-shell.no-sidebar .sidebar-expand { display: none; }
.sidebar { background: #fff; border-right: 1px solid var(--border); height: 100vh; overflow-y: auto; position: sticky; top: 0; }
.sidebar-inner { display: flex; flex-direction: column; gap: 20px; min-height: 100%; padding: 20px 14px; }
.sidebar-brand-row { align-items: center; display: flex; gap: 8px; justify-content: space-between; }
.sidebar-brand { color: var(--brand); display: block; font-size: 18px; font-weight: 700; }
.sidebar-collapse, .sidebar-expand { align-items: center; background: #fff; border: 1px solid var(--border); border-radius: 8px; color: var(--brand); cursor: pointer; font: inherit; height: 32px; justify-content: center; width: 32px; }
.sidebar-collapse:hover, .sidebar-expand:hover { background: var(--brand-tint); }
.sidebar h2 { color: var(--c-muted); font-size: 12px; letter-spacing: .04em; margin: 0 0 6px; }
.sidebar nav { display: grid; gap: 3px; }
.sidebar nav a { border-radius: 7px; color: var(--text); cursor: pointer; padding: 8px 10px; }
.sidebar nav a:hover, .sidebar nav a[aria-current="page"] { background: var(--brand-tint); color: var(--brand); font-weight: 700; }
.sidebar-todo a { border-left: 3px solid var(--brand); display: block; font-weight: 700; }
.sidebar-workbenches { border-top: 1px solid var(--border); padding-top: 14px; }
.sidebar-workbench-cards { display: grid; gap: 8px; padding: 0 2px; }
.sidebar-workbench-card { border: 1px solid var(--border); border-radius: 8px; color: var(--text); display: grid; gap: 3px; padding: 10px 12px; text-decoration: none; }
.sidebar-workbench-card:hover { border-color: var(--brand); color: var(--brand); }
.is-current.sidebar-workbench-card { background: var(--brand-tint); border-color: rgba(0, 60, 0, 0.25); }
.sidebar-workbench-head { align-items: center; display: flex; gap: 8px; justify-content: space-between; }
.sidebar-workbench-title { font-size: 14px; font-weight: 600; }
.is-current.sidebar-workbench-card .sidebar-workbench-title { color: var(--brand); font-weight: 700; }
.sidebar-workbench-sub { color: var(--c-muted); font-size: 12px; line-height: 1.35; }
.sidebar-workbench-badge { background: var(--brand); border-radius: 999px; color: #fff; flex: 0 0 auto; font-size: 11px; padding: 1px 8px; }
.sidebar-all-workbenches { display: grid; gap: 3px; margin-top: 8px; }
.sidebar-all-workbenches summary { border-radius: 7px; color: var(--c-muted); cursor: pointer; font-size: 13px; padding: 8px 10px; }
.sidebar-all-workbenches a { border-radius: 7px; color: var(--text); display: block; font-size: 13px; margin-left: 8px; padding: 7px 10px; }
.sidebar-all-workbenches a:hover { background: var(--brand-tint); color: var(--brand); }
.todo-aggregate { background: #fff; border: 1px solid var(--border); border-radius: 10px; margin: 0 0 16px; padding: 16px; }
.todo-aggregate h2 { color: var(--brand); font-size: 17px; margin: 0; }
.todo-aggregate > p { color: var(--c-muted); font-size: 13px; margin: 4px 0 12px; }
.todo-aggregate > .todo-aggregate-status { font-size: 12px; }
.todo-aggregate > .todo-aggregate-warning { color: var(--c-warn); }
.todo-aggregate-row { align-items: flex-start; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 0; }
.todo-aggregate-row > div:first-child { flex: 1 1 280px; min-width: 0; }
.todo-aggregate-row > .pill-group { flex: 0 1 auto; justify-content: flex-end; margin-left: auto; max-width: 100%; }
.todo-aggregate-row .btn { line-height: 30px; white-space: nowrap; }
.todo-aggregate-row .form-error { flex-basis: 100%; margin: 0; }
.todo-aggregate-row b { color: var(--brand); }
.todo-aggregate-row small { color: var(--c-muted); display: block; font-size: 12px; margin-top: 3px; }
.todo-aggregate > .todo-aggregate-empty { margin-bottom: 0; }
.todo-aggregate-fields { align-items: end; gap: 8px; }
.todo-aggregate-fields .field { flex: 1 1 0; min-width: 0; }
.todo-aggregate-fields .btn { flex: 0 0 auto; line-height: 30px; white-space: nowrap; }
.sidebar-detail-group { color: var(--c-muted); font-size: 12px; font-weight: 700; letter-spacing: .04em; margin: 10px 10px 2px; }
.sidebar-detail a.sidebar-detail-group-item { margin-left: 10px; }
.sidebar-detail .sidebar-detail-pending { color: var(--c-muted); cursor: not-allowed; display: block; margin: 0 10px; opacity: .72; padding: 7px 0; }
.sidebar-detail .sidebar-detail-pending.sidebar-detail-group-item { margin-left: 20px; }
.sidebar-account-menu { border-top: 1px solid var(--border); margin-top: auto; padding-top: 14px; position: relative; }
.app-main { min-width: 0; position: relative; }
.account-menu { position: relative; }
.account-menu summary { align-items: center; cursor: pointer; display: flex; gap: 8px; list-style: none; }
.account-menu summary::-webkit-details-marker { display: none; }
.account-avatar { align-items: center; background: var(--brand); border-radius: 50%; color: #fff; display: inline-flex; height: 30px; justify-content: center; width: 30px; }
.account-user { display: grid; min-width: 0; }
.account-name { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-role { color: var(--c-muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-menu-panel { background: #fff; border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 4px 14px rgba(0, 60, 0, .14); display: grid; gap: 2px; min-width: 170px; padding: 4px; position: absolute; left: 0; top: auto; bottom: calc(100% + 8px); z-index: 40; }
.account-menu-panel a, .account-menu-panel button { background: none; border: 0; color: var(--text); cursor: pointer; font: inherit; padding: 8px 10px; text-align: left; }
.account-menu-panel button { color: var(--c-danger); }
.app-main > .page.page--wb { max-width: 1360px; padding: 30px 32px; }
.app-main > .page.page--wb .wb-shell-heading, .app-main > .page.page--wb .wb-workbench { max-width: 1360px; padding-left: 0; padding-right: 0; }
.account-page { max-width: 680px; }
.account-page dl { display: grid; grid-template-columns: 130px 1fr; gap: 8px 16px; }
.account-page dt { color: var(--c-muted); }
.account-page dd { margin: 0; }
@media (min-width: 768px) {
  .app-shell.sidebar-collapsed { grid-template-columns: 0px minmax(0, 1fr); }
  .sidebar-collapsed .sidebar { border-right: 0; overflow: hidden; pointer-events: none; visibility: hidden; }
  .sidebar-collapsed .sidebar-expand { display: flex; left: 16px; position: absolute; top: 12px; z-index: 20; }
  .sidebar-collapsed .app-main > .page > .return-back { display: inline-block; margin: 0 0 12px 72px; }
  .sidebar-collapsed .app-main > .page > .account-page:first-child { padding-left: 72px; }
  .sidebar-collapsed .app-main .wb-shell-heading, .sidebar-collapsed .app-main .page > header:first-child { padding-left: 72px; }
}
@media (min-width: 1024px) {
  /* 工作台卡片以最小轨决定栏数；grid 自己封顶，避免超宽屏无限拉大卡片。 */
  .wb-kpi-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); max-width: 1560px; }
  .wb-kpi-grid--5 { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); max-width: 1560px; }
  .wb-more-tiles { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); max-width: 1560px; }
  .app-main > .page.page--wb.page--wb-fluid,
  .app-main > .page.page--wb.page--wb-fluid .wb-shell-heading,
  .app-main > .page.page--wb.page--wb-fluid .wb-workbench { max-width: none; }
}
/* 厂长台三项生产概览在桌面端等宽铺满，避免通用 auto-fill 留出右侧空白。 */
@media (min-width: 768px) {
  .page--wb-factory .wb-kpi-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); max-width: none; }
}
.page--wb-factory .wb-quick-search .btn { flex: 0 0 auto; white-space: nowrap; }
@media (min-width: 768px) and (max-width: 1023px) {
  .app-shell { grid-template-columns: 200px minmax(0, 1fr); }
  .app-main > .page.page--wb { max-width: 100%; padding: 20px; }
  .wb-kpi-grid, .wb-more-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .pill { min-height: 44px; }
  .btn, .btn-sm, .o-filter-chip { min-height: 44px; }
  .input, input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea { min-height: 44px; }
  input[type="checkbox"], input[type="radio"] { height: 20px; width: 20px; }
  label:has(> input[type="checkbox"]), label:has(> input[type="radio"]) { align-items: center; display: inline-flex; gap: 8px; min-height: 44px; }
  .app-header .actions { flex: 0 1 auto; flex-wrap: wrap; gap: 8px; }
  .todo-aggregate-row > div:first-child, .todo-aggregate-row > .pill-group { flex-basis: 100%; }
  .todo-aggregate-row > .pill-group { justify-content: flex-start; margin-left: 0; }
  .todo-aggregate-fields { align-items: stretch; flex-direction: column; }
  .todo-aggregate-fields .field, .todo-aggregate-fields .btn { flex: 0 0 auto; width: 100%; }
  .todo-aggregate-fields .btn { min-height: 44px; white-space: nowrap; }

  .app-shell { display: block; }
  .app-shell.sidebar-collapsed { display: block; }
  .app-shell.no-sidebar .nav-mask { display: none; }
  .sidebar-collapse { display: none; }
  /* ④ 09-05 立·手机触控靶 */
  .sidebar-expand { align-items: center; display: flex; height: 44px; left: 16px; position: absolute; top: 12px; width: 44px; z-index: 32; }
  .nav-mask { background: rgba(0, 0, 0, .35); inset: 0; position: fixed; z-index: 29; }
  .sidebar { display: none; max-width: 85vw; position: fixed; width: 280px; z-index: 30; }
  #nav-toggle:checked ~ .sidebar { display: block; }
  #nav-toggle:checked ~ .nav-mask { display: block; }
  #nav-toggle:checked ~ .app-main .sidebar-expand { visibility: hidden; }
  .app-main > .page.page--wb { max-width: 100%; padding: 16px; }
  .app-main > .page.page--wb .wb-shell-heading, .app-main > .page.page--wb .wb-workbench { padding-left: 0; padding-right: 0; }
  .app-main > .page.page--wb .wb-shell-heading,
  .app-main > .page > header:first-child,
  .app-main > .page > #direct-customer-header,
  .app-main > .page > #supplier-new-header,
  .app-main > .page.lp .lp-head,
  .app-main > .page.sample-new-page .new-page-title { padding-left: 72px; }
  .app-main > .page > .return-back { display: inline-block; margin: 0 0 24px 72px; max-width: calc(100% - 88px); overflow-wrap: anywhere; }
  .app-main > .page > .account-page:first-child { padding-top: 40px; }
  .wb-shell-heading { flex-direction: column; align-items: stretch; gap: 10px; }
  .wb-page-actions { flex-wrap: wrap; justify-content: flex-start; }
  .wb-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wb-more-tiles { grid-template-columns: 1fr; }
  .wb-task-row { grid-template-columns: 1fr; }
}
@media (max-width: 419px) { .wb-kpi-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .app-shell { transition: none; }
}

/* ADR-0003 批B：人员与身份。 */
.admin-people-toolbar { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.admin-people-toolbar .input { flex: 1 1 220px; max-width: 360px; }
.admin-people-chips { display: flex; flex: 1 1 280px; flex-wrap: wrap; gap: 6px; }
.admin-people-table select { min-width: 118px; }
.admin-people-table .pending-row { background: #fff6df; }
.admin-people-table .disabled-row { color: var(--c-muted); opacity: .62; }
.role-lock { display: block; color: var(--c-muted); font-size: 12px; margin-top: 3px; }
.admin-people-exception { color: var(--c-muted); font-size: 12px; margin: 14px 0 0; }

/* 样品单一页化批 3：追踪台/我的任务/全员负荷。 */
.sample-board-page { padding-bottom: 32px; }
.board-toolbar { display:flex; align-items:center; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.board-toolbar .input { flex:1 1 240px; max-width:420px; }
.board-filters { display:flex; gap:6px; flex-wrap:wrap; }
.board-filters button { border:1px solid var(--border); background:#fff; border-radius:999px; padding:6px 10px; cursor:pointer; font:13px var(--font); }
.board-filters button.is-active { color:#fff; background:var(--brand); border-color:var(--brand); }
.board-duo { display:grid; grid-template-columns:minmax(300px, .8fr) minmax(0, 1.7fr); gap:16px; align-items:start; }
.board-list { display:flex; flex-direction:column; gap:7px; }
.board-order { display:grid; gap:4px; width:100%; text-align:left; padding:10px 12px; border:1px solid var(--border); border-radius:9px; background:#fff; color:var(--text); cursor:pointer; font:inherit; }
.board-order:hover,.board-order.is-active { border-color:var(--brand); background:var(--brand-tint); }
.board-order.is-stuck { border-left:4px solid var(--c-danger); }
.board-order-top,.board-detail-head,.track-step-head { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.board-order small,.track-step-sub,.track-material h2 small { color:var(--c-muted); font-size:12px; }
.board-detail { min-height:320px; background:#fff; border:1px solid var(--border); border-radius:10px; padding:14px; }
.board-detail-head { padding:0 0 10px; border-bottom:2px solid var(--brand); margin-bottom:12px; }
.board-detail-head b { color:var(--brand); font-family:ui-monospace,monospace; }
.board-detail-head .btn { margin-left:auto; }
.track-material { border:1px solid var(--border); border-radius:9px; margin:0 0 10px; padding:10px 12px; }
.track-material h2 { margin:0 0 8px; font-size:15px; }
.track-material h2 small { font-weight:400; margin-left:8px; }
.track-step { border-top:1px solid var(--surface-2); padding:8px 0; }
.track-step:first-of-type { border-top:0; }
.track-step-head b { flex:1 1 160px; font-size:14px; }
.track-step-sub { margin:3px 0 6px 24px; }
.track-actions { display:flex; gap:6px; flex-wrap:wrap; margin-left:24px; }
.track-complete { border:1px dashed var(--brand); background:var(--brand-tint); padding:12px; border-radius:9px; }
.track-complete p,.track-next { color:var(--c-muted); font-size:13px; margin:5px 0 8px; }
.task-group + .task-group { margin-top:14px; }
.task-group h2 { color:var(--c-muted); font-size:13px; margin:0 0 6px; }
@media (max-width: 767px) { .board-duo { grid-template-columns:1fr; } .board-detail { min-height:auto; } }

/* 仅供 role_gate 403 页。 */
.topbar { background: #fff; border-bottom: 1px solid var(--border); height: 56px; }
.topbar-inner { align-items: center; display: flex; height: 100%; margin: 0 auto; max-width: 1200px; }

/* === 组件:数字框+明细·④ 2026-09-25 === */
[data-filterbox] > .wb-kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; max-width: none; }
[data-filterbox]:not([data-filterbox-variant="home"]) > .wb-kpi-grid { margin-bottom: 16px; }
[data-filterbox] > .wb-kpi-grid > .wb-card {
  align-items: flex-start;
  background: var(--surface-1, #fff);
  border: 1px solid var(--border, #d8ead8);
  border-radius: 12px;
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: inherit;
  min-height: 104px;
  padding: 14px 16px;
  text-align: left;
}
[data-filterbox] > .wb-kpi-grid > .wb-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
[data-filterbox] > .wb-kpi-grid > .wb-card .wb-card-label { color: var(--text); display: block; font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-filterbox] > .wb-kpi-grid > .wb-card .wb-card-value { color: var(--text); font-size: 30px; font-weight: 700; line-height: 1.1; white-space: nowrap; }
[data-filterbox] > .wb-kpi-grid > .wb-card .wb-card-value small { color: var(--c-muted); font-size: 13px; font-weight: 400; }
[data-filterbox] > .wb-kpi-grid > .wb-card .wb-card-status { color: var(--c-muted); display: block; font-size: 12px; margin-top: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-filterbox] > .wb-kpi-grid > .wb-card[data-filterbox-tone="brand"] .wb-card-value { color: var(--brand); }
[data-filterbox] > .wb-kpi-grid > .wb-card[data-filterbox-tone="risk"] .wb-card-value { color: var(--c-danger); }
[data-filterbox] > .wb-kpi-grid > .wb-card[aria-pressed="true"] { background: var(--brand-tint, #eef3ee); border: 2px solid var(--brand); }
[data-filterbox] > [data-filterbox-scope] { color: var(--c-muted); font-size: 13px; margin: 0 0 10px; }
[data-filterbox] > [data-filterbox-panel] > header { align-items: baseline; display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; }
[data-filterbox] > [data-filterbox-panel] > header > p { color: var(--c-muted); font-size: 12px; margin: 0; }
[data-filterbox]:not([data-filterbox-variant="home"]) { container-type: inline-size; }
[data-filterbox][data-filterbox-variant="home"] > .wb-kpi-grid > .wb-card { min-height: 96px; padding: 14px 16px; }
[data-filterbox][data-filterbox-variant="home"] > .wb-kpi-grid > .wb-card .wb-card-label { overflow: visible; text-overflow: clip; white-space: normal; }
[data-filterbox][data-filterbox-variant="home"] > .wb-kpi-grid > .wb-card .wb-card-value { white-space: normal; }
[data-filterbox][data-filterbox-variant="home"] > .wb-kpi-grid > .wb-card .wb-card-status { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 0; overflow: visible; text-overflow: clip; white-space: normal; }
[data-filterbox]:not([data-filterbox-variant="home"]) [data-filterbox-panel] > .todo-aggregate-row {
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns: 140px minmax(260px, 1fr) 280px 160px 110px;
  padding: 13px 0;
}
[data-filterbox]:not([data-filterbox-variant="home"]) [data-filterbox-panel] > .todo-aggregate-row > :nth-child(1),
[data-filterbox]:not([data-filterbox-variant="home"]) [data-filterbox-panel] > .todo-aggregate-row > :nth-child(2),
[data-filterbox]:not([data-filterbox-variant="home"]) [data-filterbox-panel] > .todo-aggregate-row > :nth-child(3),
[data-filterbox]:not([data-filterbox-variant="home"]) [data-filterbox-panel] > .todo-aggregate-row > :nth-child(4) { min-width: 0; overflow-wrap: anywhere; }
[data-filterbox]:not([data-filterbox-variant="home"]) [data-filterbox-panel] > .todo-aggregate-row > :nth-child(3),
[data-filterbox]:not([data-filterbox-variant="home"]) [data-filterbox-panel] > .todo-aggregate-row > :nth-child(4) { font-size: 12px; line-height: 1.5; }
[data-filterbox]:not([data-filterbox-variant="home"]) [data-filterbox-panel] > .todo-aggregate-row > :last-child { justify-self: end; }
[data-filterbox]:not([data-filterbox-variant="home"]) [data-filterbox-panel] > .todo-aggregate-row > :last-child[href] { color: var(--brand); font-size: 12px; font-weight: 700; text-decoration: none; white-space: nowrap; }
[data-filterbox]:not([data-filterbox-variant="home"]) [data-filterbox-panel] > .todo-aggregate-row > :last-child[href]:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
[data-filterbox]:not([data-filterbox-variant="home"]) [data-filterbox-panel] > .todo-aggregate-empty {
  display: grid;
  min-height: 112px;
  margin: 0;
  padding: 34px 12px;
  place-items: center;
  text-align: center;
}
@media (max-width: 1099px) {
  [data-filterbox] > .wb-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  [data-filterbox] > .wb-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-filterbox]:not([data-filterbox-variant="home"]) > .wb-kpi-grid > .wb-card { min-height: 112px; }
}
@container (max-width: 1099px) {
  [data-filterbox]:not([data-filterbox-variant="home"]) [data-filterbox-panel] > .todo-aggregate-row {
    gap: 8px;
    grid-template-columns: minmax(100px, 120px) minmax(160px, 1fr) minmax(120px, 180px) minmax(90px, 130px) max-content;
  }
}
@container (max-width: 767px) {
  [data-filterbox]:not([data-filterbox-variant="home"]) [data-filterbox-panel] > .todo-aggregate-row {
    align-items: stretch;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  [data-filterbox]:not([data-filterbox-variant="home"]) [data-filterbox-panel] > .todo-aggregate-row > :last-child { align-self: flex-start; justify-self: auto; }
}

/* === 组件:数字框+明细·明细表格窄屏转卡片(data-filterbox-table="cards")·④ 2026-09-26(独立审查返修) === */
@container (max-width: 767px) {
  [data-filterbox]:not([data-filterbox-variant="home"]) [data-filterbox-panel] table[data-filterbox-table="cards"],
  [data-filterbox]:not([data-filterbox-variant="home"]) [data-filterbox-panel] table[data-filterbox-table="cards"] tbody,
  [data-filterbox]:not([data-filterbox-variant="home"]) [data-filterbox-panel] table[data-filterbox-table="cards"] tr,
  [data-filterbox]:not([data-filterbox-variant="home"]) [data-filterbox-panel] table[data-filterbox-table="cards"] td {
    display: block;
    width: 100%;
  }
  [data-filterbox]:not([data-filterbox-variant="home"]) [data-filterbox-panel] table[data-filterbox-table="cards"] {
    background: transparent;
    border: 0;
    border-radius: 0;
    min-width: 0;
  }
  [data-filterbox]:not([data-filterbox-variant="home"]) [data-filterbox-panel] table[data-filterbox-table="cards"] thead {
    border: 0;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }
  [data-filterbox]:not([data-filterbox-variant="home"]) [data-filterbox-panel] table[data-filterbox-table="cards"] tr {
    background: var(--surface-1, #fff);
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 10px;
    padding: 4px 14px;
  }
  [data-filterbox]:not([data-filterbox-variant="home"]) [data-filterbox-panel] table[data-filterbox-table="cards"] tr:last-child { margin-bottom: 0; }
  [data-filterbox]:not([data-filterbox-variant="home"]) [data-filterbox-panel] table[data-filterbox-table="cards"] td {
    border: none;
    min-width: 0;
    overflow-wrap: anywhere;
    padding: 8px 0;
    text-align: right;
  }
  [data-filterbox]:not([data-filterbox-variant="home"]) [data-filterbox-panel] table[data-filterbox-table="cards"] td + td { border-top: 1px solid var(--border); }
  [data-filterbox]:not([data-filterbox-variant="home"]) [data-filterbox-panel] table[data-filterbox-table="cards"] td[data-label]::before {
    color: var(--c-muted);
    content: attr(data-label) "：";
    float: left;
    font-weight: 700;
    margin-right: 8px;
  }
  [data-filterbox]:not([data-filterbox-variant="home"]) [data-filterbox-panel] table[data-filterbox-table="cards"] .col-step,
  [data-filterbox]:not([data-filterbox-variant="home"]) [data-filterbox-panel] table[data-filterbox-table="cards"] .col-date {
    white-space: normal;
  }
}

/* === 组件:数字框+明细·窄屏三件补强(说明行溢出/筛选收起/范围行操作槽)·④ 2026-09-26(专21 缺口回填·独立审查返修) === */
/* A·说明行窄屏溢出:卡片纵排 flex 默认按内容宽度对齐，长文字挤出卡片右缘；
   非 home 变体的说明行改为撑满卡片宽度并允许收缩到 0，配合既有 ellipsis/wrap 规则收进卡片内。
   顺手同样处理 .wb-card-label，避免长标题遇到同一种挤出。 */
[data-filterbox]:not([data-filterbox-variant="home"]) > .wb-kpi-grid > .wb-card .wb-card-status {
  align-self: stretch;
  max-width: 100%;
  min-width: 0;
}
[data-filterbox]:not([data-filterbox-variant="home"]) > .wb-kpi-grid > .wb-card .wb-card-label {
  max-width: 100%;
}

/* C·范围行右侧操作槽:目前范围文字与「更多条件」之类的操作两端对齐。
   独立审查返修(2026-09-26):专21 三页的 [data-filterbox-scope] 原文里直接混排
   <b>/<a>(如「<b>目前范围</b> {{ scope_text }}」),不放操作槽时若整个改 flex，
   这些内联元素会各自变成 flex 项被 space-between 拆到两端、原句被撑散。改用
   `:has(> [data-filterbox-scope-actions])`，只在真的放了操作槽时才生效——
   要放操作槽的页面需把范围说明文字整段包进一个 span，和操作槽同为
   [data-filterbox-scope] 的两个直接子元素，两端对齐才对得上「说明 vs 操作」，
   不会把说明本身的内联标签拆开。 */
[data-filterbox]:not([data-filterbox-variant="home"]) > [data-filterbox-scope]:has(> [data-filterbox-scope-actions]) {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  justify-content: space-between;
}
[data-filterbox]:not([data-filterbox-variant="home"]) > [data-filterbox-scope] > [data-filterbox-scope-actions] {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* B·筛选区窄屏收起、宽屏常开:用原生 <details data-filterbox-filters> 承载筛选控件，
   summary 是收起态的触发条；宽屏时展开态视觉上隐藏 summary、外框去掉，`open` 属性由
   wb_filterbox.js 按容器宽度跨断点才切换(见其注释)，不用纯 CSS 强制展开
   （`<details>` 的 open 是 HTML 属性，CSS 无法单向强制它为「展开」）。独立审查返修
   (2026-09-26):脚本还没跑到、宽屏 details 还没被设 open 的那一刻不能把触发条也
   藏起来——否则用户点不到任何东西，连手动展开的退路都没有；改成只在真正
   open 了才隐藏 summary，脚本没跑到时宽屏收着但 summary 仍在、仍可点开。 */
[data-filterbox] [data-filterbox-filters] {
  background: var(--surface-1, #fff);
  border: 1px solid var(--border, #d8ead8);
  border-radius: 8px;
  margin: 0 0 12px;
}
[data-filterbox] [data-filterbox-filters] > summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  font-size: 14px;
  gap: 6px;
  justify-content: space-between;
  list-style: none;
  min-height: 44px;
  padding: 0 14px;
}
[data-filterbox] [data-filterbox-filters] > summary::-webkit-details-marker { display: none; }
[data-filterbox] [data-filterbox-filters] > summary::marker { content: ""; }
[data-filterbox] [data-filterbox-filters] > summary::after { color: var(--c-muted); content: "▾"; }
[data-filterbox] [data-filterbox-filters][open] > summary::after { content: ""; }
[data-filterbox] [data-filterbox-filters] > summary + * { padding: 0 14px 14px; }

@container (min-width: 768px) {
  [data-filterbox]:not([data-filterbox-variant="home"]) [data-filterbox-filters] {
    background: none;
    border: 0;
    border-radius: 0;
    margin: 0 0 12px;
  }
  [data-filterbox]:not([data-filterbox-variant="home"]) [data-filterbox-filters][open] > summary { display: none; }
  [data-filterbox]:not([data-filterbox-variant="home"]) [data-filterbox-filters][open] > summary + * { padding: 0; }
}
@container (max-width: 767px) {
  [data-filterbox]:not([data-filterbox-variant="home"]) > [data-filterbox-scope]:has(> [data-filterbox-scope-actions]) > [data-filterbox-scope-actions] {
    justify-content: flex-end;
    width: 100%;
  }
}

/* 2026-10-06 ④/专12：已确认整天月历与休假/补班共享组件。
   只定义 holiday-* 宿主；半天与待确认状态未纳入。
   原稿中性白/黑细节提供兼容 fallback；语义状态沿既有 token。 */
.holiday-month-bar { align-items:center; display:flex; justify-content:space-between; gap:8px; margin:10px 0 14px; }
.holiday-month-bar strong { color:var(--brand); font-size:18px; text-align:center; }
.holiday-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:5px; }
.holiday-weekday { color:var(--c-muted); font-size:12px; font-weight:700; padding:5px 0; text-align:center; }
.holiday-day { background:#fff;  border:1px solid var(--border); border-radius:8px; color:var(--text); cursor:pointer; font:inherit; min-height:88px; min-width:0; padding:7px; position:relative; text-align:left; }
.holiday-day:hover { border-color:var(--brand); }
.holiday-day:focus-visible, .holiday-magnet-pick:focus-visible { outline:2px solid var(--brand); outline-offset:1px; }
.is-weekend.holiday-day { background:var(--surface-1); }
.is-selected.holiday-day { border:2px solid var(--brand); background:var(--brand-tint); padding:6px; }
/* Inset border replaces original inset box-shadow; focus outline remains independent. */
.is-different.holiday-day::before { content:""; position:absolute; inset:0; border:2px solid var(--c-danger); border-radius:6px; pointer-events:none; }
.holiday-day-number { display:block; font-size:14px; font-weight:700; }
.holiday-day-status { display:block; width:max-content; max-width:100%; font-size:11px; line-height:1.3; margin-top:3px; padding:2px 5px; border-radius:4px; }
.is-national.holiday-day-status { background:var(--c-info-bg); color:var(--c-info); }
.is-diff.holiday-day-status { background:var(--c-danger-bg); color:var(--c-danger); font-weight:700; }
.holiday-day-empty { min-height:88px; }
.holiday-magnet { align-items:center; border:1px solid transparent; border-bottom:3px solid rgba(0,0,0,.24);  border-radius:7px; box-sizing:border-box; color:#fff;  display:inline-flex; font-size:11px; font-weight:800; justify-content:center; letter-spacing:.04em; line-height:1; min-height:24px; min-width:36px; padding:4px 5px 2px; position:relative; white-space:nowrap; }
.holiday-magnet::after { background:rgba(255,255,255,.8);  border-radius:50%; content:""; height:3px; position:absolute; right:3px; top:3px; width:3px; }
.is-holiday.holiday-magnet { background:var(--c-ok); transform:rotate(-3deg); }
.is-workday.holiday-magnet { background:var(--c-warn); transform:rotate(3deg); }
.holiday-day .holiday-magnet { margin-top:5px; }
.just-snapped.holiday-day .holiday-magnet { animation:holiday-magnet-snap 220ms ease-out both; }
@keyframes holiday-magnet-snap { 0% { opacity:.45; scale:1.5; } 70% { opacity:1; scale:.92; } 100% { scale:1; } }
.holiday-magnet-picker { align-items:stretch; display:flex; flex-wrap:wrap; gap:8px; }
.holiday-magnet-pick { align-items:center; background:#fff;  border:1px solid var(--border); border-radius:9px; color:var(--text); cursor:pointer; display:inline-flex; font:inherit; gap:8px; min-height:52px; padding:8px 12px; }
.holiday-magnet-pick[aria-pressed="true"] { background:var(--brand-tint); border:2px solid var(--brand); padding:7px 11px; }
.holiday-magnet-pick .holiday-magnet { font-size:13px; min-height:29px; min-width:48px; }
.holiday-magnet-caption { color:var(--c-muted); font-size:12px; }
.holiday-legend { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:10px 0; }
.holiday-legend .holiday-day-status { margin-top:0; }
.holiday-legend .holiday-magnet { margin:2px 3px; }
.holiday-source { overflow-wrap:anywhere; }
.holiday-selection-summary { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.holiday-selection-summary > section { min-width:0; }
.holiday-selection-summary p { overflow-wrap:anywhere; }
/* Existing component breakpoint, copied from approved specimen. No shell rules. */
@media (max-width:767px) {
  .holiday-grid { gap:3px; }
  .holiday-day, .holiday-day-empty { min-height:84px; }
  .holiday-day { padding:4px 2px; text-align:center; }
  .is-selected.holiday-day { padding:3px 1px; }
  .holiday-day-number { font-size:13px; }
  .holiday-day-status { font-size:9px; margin-top:3px; padding:1px 2px; }
  .holiday-day .holiday-magnet { font-size:10px; min-height:20px; min-width:31px; padding:3px 2px 1px; }
  .holiday-magnet-pick { gap:5px; padding:6px 7px; }
  .holiday-magnet-pick[aria-pressed="true"] { padding:5px 6px; }
  .holiday-magnet-caption { font-size:10px; }
  .holiday-selection-summary { grid-template-columns:1fr; }
  .holiday-month-bar .btn { font-size:12px; padding:7px 8px; }
  .holiday-month-bar strong { font-size:15px; }
}
@media (prefers-reduced-motion:reduce) { .just-snapped.holiday-day .holiday-magnet { animation:none; } }

/* 2026-10-06 ④/专12 HALF增补：具体两稿获ROOT relay-grade核收。
   半天复用整天组件全部几何、手机与动态效果；只补已确认配色和反光。 */
.is-holiday-half.holiday-magnet { background:var(--c-ok-bg); border-color:var(--c-ok); color:var(--c-ok); transform:rotate(-3deg); }
.is-workday-half.holiday-magnet { background:var(--c-warn-bg); border-color:var(--c-warn); color:var(--c-warn); transform:rotate(3deg); }
.is-holiday-half.holiday-magnet::after, .is-workday-half.holiday-magnet::after { background:rgba(0,0,0,.18); }