/* ============================================================================
   UI 组件基线（P0-1）· 2026-10-01
   ----------------------------------------------------------------------------
   六个基础组件 + 两个版式件，全部**只提供 .ui- 前缀的类**，不动任何既有选择器：
     ① .ui-card    卡片（页面内容容器）
     ② .ui-titlebar 页面标题栏
     ③ .ui-toolbar  工具行（筛选 / 搜索 / 动作 / 计数，**一行**）
     ④ .ui-btn      按钮（primary / ghost / danger / sm）
     ⑤ .ui-input    输入框与下拉
     ⑥ .ui-pill     状态胶囊（ok / warn / danger / info / mute）
     ⑦ .ui-table    表格（行高、列头、空态）
     ⑧ .ui-empty    空态（一句话 + 一个主按钮）
   另含「样板页：产线执行作业台」一节（.pd3-wb 作用域），把已有作业台对齐到这套令牌，
   作为其它模块照抄的样板（只覆盖外观，不动 DOM 与业务）。
   ========================================================================== */

/* ① 卡片 */
.ui-card { background: var(--ui-bg-card); border: 1px solid var(--ui-line-200); border-radius: var(--ui-r-3); box-shadow: var(--ui-sh-1); }
.ui-card + .ui-card { margin-top: var(--ui-sp-5); }
.ui-card-h { display: flex; align-items: center; gap: var(--ui-sp-3); min-height: var(--ui-h-card-h); padding: 0 var(--ui-sp-6); border-bottom: 1px solid var(--ui-line-100); font-size: var(--ui-fs-14); font-weight: var(--ui-fw-8); color: var(--ui-ink-900); }
.ui-card-b { padding: var(--ui-sp-5) var(--ui-sp-6); }

/* ② 页面标题栏（标题 + 页面级动作） */
.ui-titlebar { display: flex; align-items: center; gap: var(--ui-sp-5); padding: var(--ui-sp-4) 0; }
.ui-titlebar h2 { margin: 0; font-size: var(--ui-fs-16); font-weight: var(--ui-fw-9); color: var(--ui-ink-900); }
.ui-titlebar .ui-actions { margin-left: auto; display: flex; gap: var(--ui-sp-3); align-items: center; }

/* ③ 工具行：一行装下筛选 + 搜索 + 动作 + 计数 */
.ui-toolbar { display: flex; align-items: center; gap: var(--ui-sp-3); flex-wrap: wrap; padding: var(--ui-sp-4) var(--ui-sp-5); border-bottom: 1px solid var(--ui-line-100); }
.ui-toolbar .ui-count { margin-left: auto; font-size: var(--ui-fs-12); color: var(--ui-ink-400); font-variant-numeric: tabular-nums; }

/* ④ 按钮 */
.ui-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--ui-sp-2); height: var(--ui-h-ctl); padding: 0 var(--ui-sp-5); border: 1px solid var(--ui-line-200); border-radius: var(--ui-r-2); background: var(--ui-bg-card); color: var(--ui-ink-700); font: inherit; font-size: var(--ui-fs-13); font-weight: var(--ui-fw-8); cursor: pointer; white-space: nowrap; transition: border-color var(--ui-dur), background var(--ui-dur), color var(--ui-dur); }
.ui-btn:hover { border-color: var(--ui-brand-600); color: var(--ui-brand-700); }
.ui-btn.is-primary { background: var(--ui-brand-600); border-color: var(--ui-brand-600); color: #fff; }
.ui-btn.is-primary:hover { background: var(--ui-brand-700); border-color: var(--ui-brand-700); color: #fff; }
.ui-btn.is-ghost { background: var(--ui-bg-soft); }
.ui-btn.is-danger { background: var(--ui-danger-solid); border-color: var(--ui-danger-solid); color: #fff; }
.ui-btn.is-danger:hover { background: var(--ui-danger-ink); border-color: var(--ui-danger-ink); color: #fff; }
.ui-btn.is-sm { height: 28px; padding: 0 var(--ui-sp-4); font-size: var(--ui-fs-12); }
.ui-btn.is-lg { height: var(--ui-h-ctl-lg); padding: 0 var(--ui-sp-6); }
.ui-btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ⑤ 输入框 / 下拉 */
.ui-input { height: var(--ui-h-ctl); padding: 0 var(--ui-sp-4); border: 1px solid var(--ui-line-200); border-radius: var(--ui-r-2); background: var(--ui-bg-card); color: var(--ui-ink-900); font: inherit; font-size: var(--ui-fs-13); outline: none; }
.ui-input::placeholder { color: var(--ui-ink-300); }
.ui-input:focus { border-color: var(--ui-brand-600); box-shadow: var(--ui-ring); }
.ui-input.is-lg { height: var(--ui-h-ctl-lg); }

/* ⑥ 状态胶囊：淡底 + 同色描边 + 同色字（参考平台的唯一状态语言） */
.ui-pill { display: inline-flex; align-items: center; gap: var(--ui-sp-1); height: 22px; padding: 0 var(--ui-sp-3); border: 1px solid var(--ui-mute-line); border-radius: 999px; background: var(--ui-mute-bg); color: var(--ui-mute-ink); font-size: var(--ui-fs-12); font-weight: var(--ui-fw-8); white-space: nowrap; }
.ui-pill.is-ok { background: var(--ui-ok-bg); border-color: var(--ui-ok-line); color: var(--ui-ok-ink); }
.ui-pill.is-warn { background: var(--ui-warn-bg); border-color: var(--ui-warn-line); color: var(--ui-warn-ink); }
.ui-pill.is-danger { background: var(--ui-danger-bg); border-color: var(--ui-danger-line); color: var(--ui-danger-ink); }
.ui-pill.is-info { background: var(--ui-info-bg); border-color: var(--ui-info-line); color: var(--ui-info-ink); }
.ui-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ui-mute-solid); flex: none; }
.ui-dot.is-ok { background: var(--ui-ok-solid); }
.ui-dot.is-warn { background: var(--ui-warn-solid); }
.ui-dot.is-danger { background: var(--ui-danger-solid); }
.ui-dot.is-info { background: var(--ui-info-solid); }

/* ⑦ 表格 */
.ui-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--ui-fs-13); color: var(--ui-ink-700); }
.ui-table thead th { position: sticky; top: 0; z-index: 2; height: 34px; padding: 0 var(--ui-sp-4); background: var(--ui-bg-soft); border-bottom: 1px solid var(--ui-line-200); color: var(--ui-ink-400); font-size: var(--ui-fs-12); font-weight: var(--ui-fw-8); text-align: left; white-space: nowrap; }
.ui-table tbody td { height: var(--ui-h-row); padding: 0 var(--ui-sp-4); border-bottom: 1px solid var(--ui-line-100); white-space: nowrap; }
.ui-table tbody tr:hover td { background: var(--ui-brand-050); }
.ui-table td.is-num, .ui-table th.is-num { text-align: right; font-variant-numeric: tabular-nums; }

/* ⑧ 空态 */
.ui-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--ui-sp-3); padding: 40px var(--ui-sp-6); color: var(--ui-ink-400); font-size: var(--ui-fs-13); text-align: center; }
.ui-empty b { font-size: var(--ui-fs-14); font-weight: var(--ui-fw-8); color: var(--ui-ink-500); }

/* 状态卡（关键数字卡，参考平台的 26px 大数字） */
.ui-kpi { display: flex; align-items: center; justify-content: space-between; gap: var(--ui-sp-5); min-width: 150px; height: 56px; padding: 0 var(--ui-sp-6); border: 1.5px solid var(--ui-info-line); border-radius: var(--ui-r-3); background: var(--ui-info-bg); cursor: pointer; }
.ui-kpi > span { font-size: var(--ui-fs-13); font-weight: var(--ui-fw-8); color: var(--ui-info-ink); }
.ui-kpi > b { font-size: var(--ui-fs-26); line-height: 30px; font-weight: var(--ui-fw-9); color: var(--ui-info-ink); font-variant-numeric: tabular-nums; }
.ui-kpi.is-ok { border-color: var(--ui-ok-line); background: var(--ui-ok-bg); }
.ui-kpi.is-ok > span, .ui-kpi.is-ok > b { color: var(--ui-ok-ink); }
.ui-kpi.is-warn { border-color: var(--ui-warn-line); background: var(--ui-warn-bg); }
.ui-kpi.is-warn > span, .ui-kpi.is-warn > b { color: var(--ui-warn-ink); }
.ui-kpi.is-danger { border-color: var(--ui-danger-line); background: var(--ui-danger-bg); }
.ui-kpi.is-danger > span, .ui-kpi.is-danger > b { color: var(--ui-danger-ink); }

/* ══════════════════════════════════════════════════════════════════════════
   样板页：产线执行 · 作业台（.pd3-wb）
   —— 把该页已有的观感对齐到上面的令牌与组件（只覆盖外观：颜色/圆角/阴影/行高/字号），
      DOM、id、业务逻辑一律不动。其它模块照这一节改。
   ══════════════════════════════════════════════════════════════════════════ */
/* 顶部标题栏 → 白卡 + 令牌圆角/阴影 */
.pd3-wb .pd3-headbar { border: 1px solid var(--ui-line-200); border-radius: var(--ui-r-3); box-shadow: var(--ui-sh-1); }
.pd3-wb .pt-title .pt-badge { background: var(--ui-brand-050); border: 1px solid var(--ui-info-line); color: var(--ui-brand-700); border-radius: var(--ui-r-1); font-weight: var(--ui-fw-9); }
.pd3-wb .pt-title b { font-size: var(--ui-fs-16); font-weight: var(--ui-fw-9); color: var(--ui-ink-900); }
.pd3-wb .pt-en { color: var(--ui-ink-300); font-size: var(--ui-fs-11); letter-spacing: .06em; }
/* 分段控件（待上机板池 / 全部台账）与模式页签 → 统一控件高与圆角 */
.pd3-wb .pt-seg { border: 1px solid var(--ui-line-200); border-radius: var(--ui-r-2); background: var(--ui-bg-soft); padding: 4px; }
.pd3-wb .pt-seg button { height: 30px; border-radius: var(--ui-r-1); font-size: var(--ui-fs-13); font-weight: var(--ui-fw-8); color: var(--ui-ink-500); }
.pd3-wb .pt-seg button.on { background: var(--ui-brand-600); color: #fff; }
.pd3-wb .pt-head .pt-right .pd2-mode-btn { border-radius: var(--ui-r-1); border-color: var(--ui-line-200); font-size: var(--ui-fs-12); }
.pd3-wb .pt-head .pt-right .pd2-mode-btn.on { background: var(--ui-brand-600); border-color: var(--ui-brand-600); box-shadow: none; }
/* 左栏（设备机台）→ 令牌卡片 */
.pd3-wb .pd3-md-left .pd3-rail-card { background: transparent; }
.pd3-wb .pd3-md-left .dv-band { border: 1px solid var(--ui-line-200); border-radius: var(--ui-r-3); box-shadow: var(--ui-sh-1); background: var(--ui-bg-card); }
.pd3-wb .pd3-md-left .dv-band .db-t { color: var(--ui-ink-900); }
.pd3-wb .pd3-md-left .dv-band .db-p { border-radius: var(--ui-r-1); }
/* 机台卡：统一到令牌（圆角/描边/状态色） */
.pd3-wb .pd3-md-left .pd3-dev.pd3-mc3 { border-color: var(--ui-line-200); border-radius: var(--ui-r-3); box-shadow: var(--ui-sh-1); }
.pd3-wb .pd3-md-left .pd3-dev.pd3-mc3.running { border-color: var(--ui-ok-line); background: var(--ui-ok-bg); }
.pd3-wb .pd3-md-left .pd3-dev.pd3-mc3.norec, .pd3-wb .pd3-md-left .pd3-dev.pd3-mc3.unknown { background: var(--ui-bg-soft); }
.pd3-wb .pd3-md-left .pd3-dev.pd3-mc3.sel { border-color: var(--ui-brand-600); box-shadow: var(--ui-ring); }
.pd3-wb .pd3-md-left .pd3-dev.pd3-mc3 .mc3-nums { border-top-color: var(--ui-line-100); }
.pd3-wb .pd3-md-left .pd3-dev.pd3-mc3 .mc3-n i { color: var(--ui-ink-400); font-size: var(--ui-fs-11); }
.pd3-wb .pd3-md-left .pd3-dev.pd3-mc3 .mc3-n b { color: var(--ui-ink-700); font-size: var(--ui-fs-20); }
.pd3-wb .pd3-md-left .pd3-dev.pd3-mc3.running .mc3-n b { color: var(--ui-brand-700); }
.pd3-wb .pd3-md-left .pd3-dev.pd3-mc3 .mc3-sub { color: var(--ui-ink-400); font-size: var(--ui-fs-12); }
.pd3-wb .pd3-md-left .pd3-dev.pd3-mc3 .mc3-st { font-size: var(--ui-fs-11); }
.pd3-wb .pd3-md-left .pd3-dev.pd3-mc3.idle .mc3-st { color: var(--ui-ok-ink); }
.pd3-wb .pd3-md-left .pd3-dev.pd3-mc3.running .mc3-st { color: var(--ui-ok-ink); }
.pd3-wb .pd3-md-left .pd3-dev.pd3-mc3 .mc3-cap { color: var(--ui-ink-300); font-size: var(--ui-fs-11); }
/* 机型筛选胶囊 → ui-pill 语言 */
.pd3-wb .pd3-md-left .dv-types .dv-type { border-color: var(--ui-line-200); border-radius: var(--ui-r-1); background: var(--ui-bg-card); color: var(--ui-ink-500); font-size: var(--ui-fs-12); }
.pd3-wb .pd3-md-left .dv-types .dv-type.on { background: var(--ui-brand-600); border-color: var(--ui-brand-600); color: #fff; }
/* 状态行 / 动作条 / 主区卡片 */
.pd3-wb .pt-acts { border: none; background: none; padding: 0; }
.pd3-wb .pd3-statusrow .pd3-kpirow .hv-kpi { height: 56px; border-radius: var(--ui-r-3); border-width: 1.5px; }
.pd3-wb .pd3-kpirow .hv-kpi span { font-size: var(--ui-fs-13); }
.pd3-wb .pd3-kpirow .hv-kpi b { font-size: var(--ui-fs-26); line-height: 30px; }
.pd3-wb .pd3-kpirow .pd3-kpi-reload { height: 56px; border-radius: var(--ui-r-3); border-color: var(--ui-line-200); }
.pd3-wb .pd3-maincol > .mp-split > .mp-tbl { border: 1px solid var(--ui-line-200); border-radius: var(--ui-r-3); box-shadow: var(--ui-sh-1); }
.pd3-wb .mp-tr { min-height: var(--ui-h-row); font-size: var(--ui-fs-13); color: var(--ui-ink-700); }
.pd3-wb .mp-tr.mp-th { background: var(--ui-bg-soft); color: var(--ui-ink-400); font-size: var(--ui-fs-12); }
.pd3-wb .mp-tbl-h { border-bottom-color: var(--ui-line-100); }
.pd3-wb .mp-tbl-h b { font-size: var(--ui-fs-14); color: var(--ui-ink-900); }
.pd3-wb .mp-scope { color: var(--ui-ink-300); font-size: var(--ui-fs-11); }
.pd3-wb .pd3-fold { border: 1px solid var(--ui-line-200); border-radius: var(--ui-r-3); box-shadow: var(--ui-sh-1); }
.pd3-wb .pd3-fold-h .ft-tab.on { background: var(--ui-info-bg); border-color: var(--ui-info-line); color: var(--ui-brand-700); }
.pd3-wb .pd3-sec-h .cnt { color: var(--ui-ink-400); font-size: var(--ui-fs-12); }
/* 表格（台账/机台明细） */
.pd3-wb .pd2-wtable { font-size: var(--ui-fs-13); color: var(--ui-ink-700); }
.pd3-wb .pd2-wtable thead th { height: 34px; background: var(--ui-bg-soft); color: var(--ui-ink-400); font-size: var(--ui-fs-12); font-weight: var(--ui-fw-8); border-bottom: 1px solid var(--ui-line-200); }
.pd3-wb .pd2-wtable tbody td { border-bottom: 1px solid var(--ui-line-100); }
.pd3-wb .pd2-wtable tbody tr:hover td { background: var(--ui-brand-050); }
/* 空态 */
.pd3-wb .pd3-pool-empty, .pd3-wb .pd2-w-empty { color: var(--ui-ink-400); font-size: var(--ui-fs-13); }
/* 按钮统一（作业台域内的既有按钮类） */
.pd3-wb .pd2-btn { height: var(--ui-h-ctl); border-radius: var(--ui-r-2); font-size: var(--ui-fs-13); font-weight: var(--ui-fw-8); }
.pd3-wb .pd2-btn-line { border-color: var(--ui-line-200); background: var(--ui-bg-card); color: var(--ui-ink-700); }
.pd3-wb .pd2-btn-pri { background: var(--ui-brand-600); border-color: var(--ui-brand-600); color: #fff; }
.pd3-wb .pd2-btn-green { background: var(--ui-ok-solid); border-color: var(--ui-ok-solid); color: #fff; }

/* ══════════════════════════════════════════════════════════════════════════
   样板页 2：订单中心（P0-2 + P0-3）
   —— 改前：深蓝 hero（3 数字）+ 6 张高饱和渐变卡（各带环形表与进度条）+ 2 行筛选 chips；
      改后：3 张状态卡 .ui-kpi + 1 行概览 chip + 1 张筛选卡（页签/搜索 + 交期/动作）。
   选择器用 `#view` 前缀提高优先级（app.css 在 ui.css 之后加载，同优先级会被它压过）。
   ══════════════════════════════════════════════════════════════════════════ */
#view .oc-kpi-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ui-sp-4); margin-top: var(--ui-sp-5); }
#view .oc-kpi-grid .ui-kpi { width: 100%; }
#view .oc-chips { display: flex; flex-wrap: wrap; gap: var(--ui-sp-3); margin-top: var(--ui-sp-4); }
#view .oc-chip { display: inline-flex; align-items: center; gap: var(--ui-sp-2); height: 30px; padding: 0 var(--ui-sp-5); border: 1px solid var(--ui-line-200); border-radius: var(--ui-r-1); background: var(--ui-bg-card); color: var(--ui-ink-500); font-size: var(--ui-fs-12); font-weight: var(--ui-fw-8); }
#view .oc-chip b { font-size: var(--ui-fs-14); font-weight: var(--ui-fw-9); color: var(--ui-ink-900); font-variant-numeric: tabular-nums; }
#view .oc-chip i { font-style: normal; font-size: var(--ui-fs-11); color: var(--ui-ink-300); font-variant-numeric: tabular-nums; }
#view .oc-chip.is-info { border-color: var(--ui-info-line); background: var(--ui-info-bg); color: var(--ui-info-ink); }
#view .oc-chip.is-info b { color: var(--ui-info-ink); }
#view .oc-chip.is-warn { border-color: var(--ui-warn-line); background: var(--ui-warn-bg); color: var(--ui-warn-ink); }
#view .oc-chip.is-warn b { color: var(--ui-warn-ink); }
#view .oc-chip.is-danger { border-color: var(--ui-danger-line); background: var(--ui-danger-bg); color: var(--ui-danger-ink); }
#view .oc-chip.is-danger b { color: var(--ui-danger-ink); }
/* 筛选卡：页签 + 搜索（第 1 行）／交期切片 + 动作（第 2 行）——同一张卡，不再是两条满宽横带 */
#view .oc-filtercard { margin-top: var(--ui-sp-5); background: var(--ui-bg-card); border: 1px solid var(--ui-line-200); border-radius: var(--ui-r-3); box-shadow: var(--ui-sh-1); padding: var(--ui-sp-4) var(--ui-sp-5) var(--ui-sp-5); }
#view .oc-filtercard .oc-tabs-row { margin-top: 0; }
#view .oc-filtercard #orderControls { margin-top: var(--ui-sp-3); }
#view .oc-tbl-wrap { margin-top: var(--ui-sp-5); border: 1px solid var(--ui-line-200); border-radius: var(--ui-r-3); box-shadow: var(--ui-sh-1); }
#view .oc-tabs .tab { border-radius: var(--ui-r-1); font-size: var(--ui-fs-13); }
#view .oc-tabs .tab.active { background: var(--ui-brand-600); border-color: var(--ui-brand-600); color: #fff; }
#view .oc-tabs .tab .n { font-variant-numeric: tabular-nums; }
#view .oc-filtercard .chip { border-radius: 999px; border-color: var(--ui-line-200); background: var(--ui-bg-soft); color: var(--ui-ink-500); font-size: var(--ui-fs-12); }
#view .oc-filtercard .chip.active { background: var(--ui-brand-600); border-color: var(--ui-brand-600); color: #fff; }
#view .oc-search { border: 1px solid var(--ui-line-200); border-radius: var(--ui-r-2); background: var(--ui-bg-card); }
#view .oc-search input { font-size: var(--ui-fs-13); }

/* ══════════════════════════════════════════════════════════════════════════
   样板页 3 / 4：中间质检 · 成品质检（去深色 hero + 彩色砖收敛）
   这两个模块的样式是运行时注入的，所以用 `#view` 前缀（id 级）压过它们。
   ══════════════════════════════════════════════════════════════════════════ */
#view .mqz-head, #view .fqc-hero { background: var(--ui-bg-card); border: 1px solid var(--ui-line-200); border-radius: var(--ui-r-3); box-shadow: var(--ui-sh-1); }
#view .mqz-head::before, #view .mqz-head::after { display: none; }   /* 关掉光斑与漂移动画 */
#view .mqz-brand-ic { background: var(--ui-brand-050); border: 1px solid var(--ui-info-line); color: var(--ui-brand-700); box-shadow: none; }
#view .mqz-brand h1 { color: var(--ui-ink-900); text-shadow: none; font-size: var(--ui-fs-16); }
#view .mqz-brand p { color: var(--ui-ink-400); font-size: var(--ui-fs-12); }
#view .mqz-head .mqz-btn { background: var(--ui-bg-card); border-color: var(--ui-line-200); color: var(--ui-ink-700); }
#view .mqz-head .mqz-btn:hover { background: var(--ui-bg-card); border-color: var(--ui-brand-600); color: var(--ui-brand-700); }
#view .mqz-status { background: var(--ui-ok-bg); border-color: var(--ui-ok-line); color: var(--ui-ok-ink); }
#view .mqz-status i { background: var(--ui-ok-solid); box-shadow: none; }
#view .mqz-tabs { background: var(--ui-bg-soft); border-color: var(--ui-line-200); box-shadow: none; }
#view .mqz-tab.on { background: var(--ui-brand-600); box-shadow: none; }
#view .mqz-card { border-color: var(--ui-line-200); border-radius: var(--ui-r-3); box-shadow: var(--ui-sh-1); }
#view .mqz-card-h { background: none; }
#view .mqz-tbl thead th { background: var(--ui-bg-soft); font-size: var(--ui-fs-12); }
#view .mqz-input, #view .mqz-select { border-color: var(--ui-line-200); border-radius: var(--ui-r-2); font-size: var(--ui-fs-13); }
/* 中间质检：三张彩色渐变 KPI → 参考平台同款语义卡 */
#view #mqMidRegKpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ui-sp-4); margin: var(--ui-sp-5) 0; }
#view .mq-kpi { background: var(--ui-info-bg); border: 1.5px solid var(--ui-info-line); border-radius: var(--ui-r-3); padding: 10px 16px; cursor: pointer; }
#view .mq-kpi .mq-kpi-l { color: var(--ui-info-ink); font-size: var(--ui-fs-13); font-weight: var(--ui-fw-8); }
#view .mq-kpi .mq-kpi-v { color: var(--ui-info-ink); font-size: var(--ui-fs-26); font-weight: var(--ui-fw-9); line-height: 30px; font-variant-numeric: tabular-nums; }
#view .mq-kpi.g-teal { background: var(--ui-ok-bg); border-color: var(--ui-ok-line); }
#view .mq-kpi.g-teal .mq-kpi-l, #view .mq-kpi.g-teal .mq-kpi-v { color: var(--ui-ok-ink); }
#view .mq-kpi.g-violet { background: var(--ui-bg-soft); border-color: var(--ui-line-200); }
#view .mq-kpi.g-violet .mq-kpi-l { color: var(--ui-ink-400); }
#view .mq-kpi.g-violet .mq-kpi-v { color: var(--ui-ink-900); }
#view .mq-hero-k b { color: var(--ui-ink-900); font-size: var(--ui-fs-26); }
#view .mq-hero-k span { color: var(--ui-ink-400); }
/* 中间质检「质检信息登记」那一条 hero（类名是 .mq-hero，不是 .mqz-head） */
#view .mq-hero { background: var(--ui-bg-card); border: 1px solid var(--ui-line-200); border-radius: var(--ui-r-3); box-shadow: var(--ui-sh-1); }
#view .mq-hero::before, #view .mq-hero::after { display: none; }
#view .mq-hero-t { color: var(--ui-ink-900); font-size: var(--ui-fs-16); font-weight: var(--ui-fw-9); }
#view .mq-hero-s { color: var(--ui-ink-400); font-size: var(--ui-fs-12); }
/* 成品质检：hero 文案由"白字压深底"改为深字压白卡 */
#view .fqc-hero-name b { color: var(--ui-ink-900); }
#view .fqc-hero-name span { color: var(--ui-ink-300); }
#view .fqc-hero-logo { background: var(--ui-brand-050); border: 1px solid var(--ui-info-line); color: var(--ui-brand-700); box-shadow: none; }
#view .fqc-hero-live { background: var(--ui-ok-bg); border-color: var(--ui-ok-line); color: var(--ui-ok-ink); }

/* ══════════════════════════════════════════════════════════════════════════
   P1-1 顶栏多标签页（外壳层，14 个模块共用）
   ══════════════════════════════════════════════════════════════════════════ */
.app-tabs { display: flex; align-items: center; gap: var(--ui-sp-2); flex-wrap: wrap; padding: var(--ui-sp-3) var(--ui-sp-5) 0; }
.app-tab { display: inline-flex; align-items: center; gap: var(--ui-sp-2); height: 30px; padding: 0 var(--ui-sp-4); border: 1px solid var(--ui-line-200); border-radius: var(--ui-r-1); background: var(--ui-bg-card); color: var(--ui-ink-500); font: inherit; font-size: var(--ui-fs-12); font-weight: var(--ui-fw-8); cursor: pointer; white-space: nowrap; }
.app-tab:hover { border-color: var(--ui-brand-600); color: var(--ui-brand-700); }
.app-tab.on { background: var(--ui-brand-050); border-color: var(--ui-info-line); color: var(--ui-brand-700); }
.app-tab .x { font-style: normal; display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; color: var(--ui-ink-300); font-size: var(--ui-fs-12); line-height: 1; }
.app-tab .x:hover { background: var(--ui-danger-bg); color: var(--ui-danger-ink); }

/* ══════════════════════════════════════════════════════════════════════════
   P1-4 表格与空态统一（14 个模块共用；只补"缺省外观"，不改变各表已有列宽/交互）
   说明：这里只挑**已知的旧表格类名**，用 `#view` 前缀压过后加载的模块内联样式，
   不去用 `#view table` 这种通配写法，避免误伤有专门设计的表。
   ══════════════════════════════════════════════════════════════════════════ */
#view .mqz-tbl thead th, #view .mqs-table thead th, #view .pd2-wtable thead th {
  height: 34px; padding: 0 var(--ui-sp-4);
  background: var(--ui-bg-soft); color: var(--ui-ink-400);
  font-size: var(--ui-fs-12); font-weight: var(--ui-fw-8);
  border-bottom: 1px solid var(--ui-line-200); white-space: nowrap;
}
#view .mqz-tbl tbody td, #view .mqs-table tbody td, #view .pd2-wtable tbody td {
  padding: 8px var(--ui-sp-4); border-bottom: 1px solid var(--ui-line-100); color: var(--ui-ink-700);
}
#view .mqz-tbl tbody tr:hover td, #view .mqs-table tbody tr:hover td, #view .pd2-wtable tbody tr:hover td { background: var(--ui-brand-050); }
#view .mqz-tbl tbody tr:nth-child(even), #view .mqs-table tbody tr:nth-child(even) { background: transparent; }
/* 行高：有 min-height 的用统一值，纯表格由 padding 决定 */
#view .mqz-tbl tbody tr, #view .mqs-table tbody tr, #view .pd2-wtable tbody tr { min-height: var(--ui-h-row); }
/* 空态统一：一句话、居中、灰字（各模块旧类名一并收口） */
#view .empty, #view td.empty, #view .mqs-empty, #view .mqz-empty,
#view .pd2-w-empty, #view .pd3-pool-empty, #view .mqx-empty {
  padding: 34px var(--ui-sp-6); text-align: center;
  color: var(--ui-ink-400); font-size: var(--ui-fs-13); font-style: normal;
}

/* ══════════════════════════════════════════════════════════════════════════
   P1-2 二级导航统一（同一套外观语言）
   —— 现状是**三套并存**：顶部页签（中间质检/数据生成）、分段控件（产线执行「板池/台账」）、
      左侧模式按钮（设备台账/CPG、分装子页）。本节只统一它们的**外观**：
      高度 30 · 圆角 8 · 13px/800 · 未选＝白底描边 · 选中＝实心品牌蓝 · 悬停＝品牌色描边。
      不改任何模块的导航结构（顶部/左侧/分段各自保留），所以交互与 DOM 零风险。
   ══════════════════════════════════════════════════════════════════════════ */
#view .mqz-tab, #view .mqs-tab, #view .tabs .tab, #view .cyc-tab,
#view .pd2-mode-btn, #view .pure-tab, #view .disp-tab {
  height: 30px; padding: 0 var(--ui-sp-5);
  border: 1px solid var(--ui-line-200); border-radius: var(--ui-r-1);
  background: var(--ui-bg-card); color: var(--ui-ink-500);
  font-size: var(--ui-fs-13); font-weight: var(--ui-fw-8);
  display: inline-flex; align-items: center; gap: var(--ui-sp-2);
  box-shadow: none; transition: border-color var(--ui-dur), background var(--ui-dur), color var(--ui-dur);
}
#view .mqz-tab:hover, #view .mqs-tab:hover, #view .tabs .tab:hover, #view .cyc-tab:hover,
#view .pd2-mode-btn:hover, #view .pure-tab:hover, #view .disp-tab:hover {
  border-color: var(--ui-brand-600); color: var(--ui-brand-700); background: var(--ui-bg-card);
}
#view .mqz-tab.on, #view .mqs-tab.on, #view .tabs .tab.active, #view .cyc-tab.active,
#view .pd2-mode-btn.on, #view .pure-tab.on, #view .disp-tab.on {
  background: var(--ui-brand-600); border-color: var(--ui-brand-600); color: #fff; box-shadow: none;
}
#view .mqz-tabs, #view .mqs-tabs, #view .tabs, #view .pure-tabs, #view .disp-tabs {
  background: transparent; border: none; box-shadow: none; padding: 0; gap: var(--ui-sp-2);
}
/* 计数徽标（页签里的数字）统一 */
#view .tabs .tab .n, #view .mqz-tab .n, #view .mqs-tab .n {
  font-variant-numeric: tabular-nums; font-weight: var(--ui-fw-8); opacity: .78;
}

/* ══════════════════════════════════════════════════════════════════════════
   P1-3 口径说明收敛
   现状（实测）：生产概览/交期预警早就有一个 `foot1(brief, full)` 助手，输出的正是
     `<span class="ov-foot-1" title="完整原文">短句 <i class="ov-foot-i">口径详情</i></span>`
   —— 也就是「页面上只留一句短的，完整口径进 title」这件事**机制已经在**，
   本轮只做两件收尾：① 把这类脚注统一成 11px 弱化灰；② 让「口径详情」标记变成克制的品牌色小字
   （原来各页自己写样式，深浅不一）。不改任何文案内容。
   ══════════════════════════════════════════════════════════════════════════ */
#view .ov-foot-1, #view .dg-foot-1, #view .ovz-note, #view .pd-why-tg {
  font-size: var(--ui-fs-11); color: var(--ui-ink-300); font-weight: var(--ui-fw-6);
}
#view .ov-foot-i, #view .dg-foot-i {
  font-style: normal; font-weight: var(--ui-fw-8); color: var(--ui-brand-600);
  cursor: help; margin-left: var(--ui-sp-1);
}
#view .ov-foot-1:hover .ov-foot-i, #view .dg-foot-1:hover .dg-foot-i { color: var(--ui-brand-700); }

/* ══════════════════════════════════════════════════════════════════════════
   ★★ 2026-10-02 作业台「三步操作引导条」（五工序共用）
   用户原话：「五大工序这种乱七八糟的页面让用户如何使用 … 必须进行彻底优化」。
   参考平台靠版面暗示流程；这一屏按钮太多，新用户看不出第一步该干什么，
   所以在标题栏下面固定一条三步引导（选机台 → 勾板 → 上机）+ 唯一主按钮。
   用 `#view` 前缀是为了压过运行时注入的 workbench.css（它比本文件后加载）。
   ══════════════════════════════════════════════════════════════════════════ */
#view .pd3-guide {
  display: flex; align-items: center; gap: var(--ui-sp-4); flex-wrap: wrap;
  margin: 0 0 var(--ui-sp-4); padding: 10px var(--ui-sp-5);
  background: var(--ui-bg-card); border: 1px solid var(--ui-line-200);
  border-radius: var(--ui-r-3); box-shadow: var(--ui-sh-1);
}
#view .pd3g-step {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--ui-fs-13); color: var(--ui-ink-400);
}
#view .pd3g-step > i {
  width: 20px; height: 20px; flex: none; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-style: normal; font-size: 11px; font-weight: 900;
  background: var(--ui-mute-bg); color: var(--ui-mute-ink); border: 1px solid var(--ui-mute-line);
}
#view .pd3g-step > b { font-weight: var(--ui-fw-8); color: var(--ui-ink-500); }
#view .pd3g-step > em { font-style: normal; font-size: var(--ui-fs-11); color: var(--ui-ink-300); }
#view .pd3g-step.is-cur > i { background: var(--ui-brand-600); border-color: var(--ui-brand-600); color: #fff; }
#view .pd3g-step.is-cur > b { color: var(--ui-ink-900); }
#view .pd3g-step.is-cur > em { color: var(--ui-brand-700); font-weight: var(--ui-fw-7); }
#view .pd3g-step.is-done > i { background: var(--ui-ok-bg); border-color: var(--ui-ok-line); color: var(--ui-ok-ink); }
#view .pd3g-step.is-done > b { color: var(--ui-ink-700); }
#view .pd3g-arw { color: var(--ui-ink-300); font-size: var(--ui-fs-12); }
#view .pd3g-sp { flex: 1; min-width: 8px; }
#view .pd3g-sel { font-size: var(--ui-fs-12); color: var(--ui-ink-400); font-variant-numeric: tabular-nums; }
#view .pd3g-cta {
  height: var(--ui-h-ctl); padding: 0 var(--ui-sp-6); border-radius: var(--ui-r-2);
  border: 1px solid var(--ui-line-200); background: var(--ui-bg-soft); color: var(--ui-ink-500);
  font: inherit; font-size: var(--ui-fs-13); font-weight: var(--ui-fw-8); cursor: pointer;
}
#view .pd3g-cta:hover { border-color: var(--ui-brand-600); color: var(--ui-brand-700); }
#view .pd3g-cta.is-go {
  background: var(--ui-ok-solid); border-color: var(--ui-ok-solid); color: #fff;
}
#view .pd3g-cta.is-go:hover { filter: brightness(1.06); color: #fff; }
/* 引导条点「先点左栏机台卡」时给左栏一个短促高亮（1.4s 后由 JS 移除） */
/* ★ 2026-10-09 性能收口：原来直接动 box-shadow（非合成）。
   改成静态高亮环 + ::after 的 opacity 淡出（class 由 production.js 1.4s 后摘掉）。 */
#view .pd3-rack-flash { position: relative; }
#view .pd3-rack-flash::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 6px rgba(115,115,115, .22);
  opacity: 0; will-change: opacity; animation: pd3RackFlash 1.4s ease-out 1;
}
@keyframes pd3RackFlash {
  0% { opacity: 1; }
  100% { opacity: 0; }
}
/* 窄屏：引导条只留步骤与主按钮，副说明收起 */
@media (max-width: 1100px) {
  #view .pd3g-step > em, #view .pd3g-sel { display: none; }
}
/* ════════════════════════════════════════════════════════════════════════════
   ★★★ 2026-10-02：**关掉登录页的高开销动效**（用户实测："不打开 Edge 不卡，
       一打开就卡的动不了" ⇒ 问题就在这个页面上）

   实测证据（不是猜的）：
     · 用户的 Edge：**GPU 进程持续 40%** + 一个 renderer 14%，两次采样都稳定；
     · 11 个 msedge 进程里 **0 个**带 `--headless` ⇒ **不是我的无头残留**；
     · 症状是"一打开就卡" ⇒ 卡在**登录页**上，而不是登录后的作业页。

   登录页（index.html 内联 `<style>`）里叠了一整套整屏级动效，单独看都好看，
   叠在一起就是 GPU 噩梦：
     ① `.auth-left-bg img` —— **整屏背景图的 Ken Burns 动画**（28s 无限往复，
        每帧都要对一张 1920×1080 的图做 scale/translate/rotate 再重新合成）；
     ② `.auth-top-badge` / `.auth-top-mark` 上的 **`backdrop-filter: blur(14px)`** ——
        背景在动的时候，这个模糊每帧都要重算（GPU 里最贵的组合之一）；
     ③ 粒子 canvas（`#particles`）—— 每帧 clearRect 整屏 + 60 个粒子 + O(n²) 连线；
     ④ 一串无限循环装饰：`markFloat / markGlow / markPulse / onlinePulse / dnPulse /
        textShimmer / lineShine / fsShine`。

   本段把这些**全部关掉，但保留视觉设计**（背景图还在、卡片还在、按钮还在，
   只是不再动）。登录页不需要动效也能用；机器卡到动不了的时候，好看排在能用后面。

   想恢复动效：删掉本段即可（`ui.css` 末尾这一块），不必动 index.html。
   ════════════════════════════════════════════════════════════════════════════ */
/* ① 整屏背景图：去掉 Ken Burns 动画与 transform */
.auth-left-bg img,
.auth-left-bg::after {
  animation: none !important;
  transform: none !important;
}
/* ② 毛玻璃：换成实色半透明底（视觉几乎一样，GPU 成本归零） */
.auth-top-badge,
.auth-top-mark {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(28,28,28, .72) !important;
}
/* ③ 粒子 canvas：整块关掉（它在登录页是纯装饰，且是本项目历史上 CPU 100% 的元凶之一） */
#particles,
.auth-particles {
  display: none !important;
}
/* ④ 其余无限循环装饰：改成静态 */
.auth-left-mark,
.auth-left-mark .dn,
.auth-top-badge i,
.auth-left-name::after,
.auth-left-line::after,
.auth-btn::after,
.glow-orb,
.orbit-ring {
  animation: none !important;
}
/* 脉冲光环是一次性扩散动画，关掉后留在原地会是一圈实线 ⇒ 直接隐藏 */
.mark-pulse-ring { display: none !important; }
/* 文字流光关掉后是透明文字，会看不见 —— 恢复成正常颜色 */
.auth-left-name::after { display: none !important; }

/* ════════════════════════════════════════════════════════════════════════════
   ★★ 2026-10-02：登记表「底纹网格线」（用户："登记表之类的页面最好都带上底纹网格线，
   这样显得更工整"）

   两处，都刻意做得**克制**（浅灰底纹 + 细分割线），目的是"看着像一张表"，
   而不是把界面画成 Excel：
     ① `.line-form / .lf-grid` —— 线边物料的领用登记表单：标签格浅底纹、格间细线，
        字段像纸上登记表一样对齐（这是用户截图里最不满意的一块：两行 flex 挤在一起）；
     ② `.pd-table` —— 登记类台账表格：表头底纹 + 行间横向细线 + 隔行浅底纹（斑马纹）。
   ②会影响所有用 .pd-table 的页面，但只加"线"和"底纹"，不改颜色语义、不动任何交互，
   属于用户明确要求的统一观感。不想要斑马纹就把 nth-child 那条删掉即可。
   ════════════════════════════════════════════════════════════════════════════ */
.line-form {
  border: 1px solid var(--line-strong, var(--ui-line-200)); border-radius: 12px;
  margin: 0 0 14px; background: var(--panel-solid, #fff); overflow: hidden;
}
.line-form .lf-h {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; font-size:13px; font-weight: 800; color: var(--txt);
  background: linear-gradient(180deg, var(--ui-brand-100), var(--ui-brand-100));
  border-bottom: 1px solid var(--line-strong, var(--ui-line-200));
}
.line-form .lf-h span { font-size:11px; font-weight: 600; color: var(--txt-3); }
/* 4 列（不是 6 列）：11 个字段刚好排 3 行、末行不剩半截 —— 原来 6 列时
   型号/级别、单位这些短字段各占一整格，看着稀疏又空。 */
.line-form .lf-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
}
.line-form .lf-l {
  padding: 10px 10px; font-size: 12px; font-weight: 700; color: var(--txt-2);
  background: var(--ui-bg-soft); border-right: 1px solid var(--line, var(--ui-line-200));
  border-bottom: 1px solid var(--line, var(--ui-line-200));
  display: flex; align-items: center;
}
.line-form .lf-v {
  padding: 6px 10px; border-right: 1px solid var(--line, var(--ui-line-200));
  border-bottom: 1px solid var(--line, var(--ui-line-200));
  display: flex; align-items: center; gap: 6px; min-width: 0;
}
.line-form .lf-v select,
.line-form .lf-v input {
  width: 100%; min-width: 0; height: 30px; border: 1px solid var(--line, var(--ui-line-200));
  border-radius:6px; padding: 0 8px; font-size:12px; font-family: inherit;
  background: var(--ui-bg-card); color: var(--txt);
}
.line-form .lf-v .lf-t { font-size: 13px; font-weight: 700; color: var(--txt); }
/* 登记步骤序号 + "下一步点这里" 高亮（用户："用户点击哪几个选择框想办法标记提示一下"） */
/* 序号徽标做大做亮（用户："这样标记还是不够明显"） */
.line-form .lf-step {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; margin-right: 8px; border-radius: 50%;
  font-style: normal; font-size: 12px; font-weight: 900; line-height: 1;
  background: var(--ui-brand-500); color: #fff; flex: none;
  box-shadow: 0 0 0 3px rgba(134,134,134, .16);
}
.line-form .lf-step.done { background: var(--ui-ok-solid); box-shadow: 0 0 0 3px rgba(10,112,67,.16); }
/* "下一步"整格强高亮：橙底 + 粗左边条 + 格内控件也描橙边，扫一眼就知道点哪 */
.line-form .lf-l.lf-next {
  background: var(--ui-warn-bg); color: var(--ui-warn-ink); font-size:12px;
  box-shadow: inset 5px 0 0 var(--ui-warn-solid);
}
.line-form .lf-l.lf-next::after {
  content: '下一步'; margin-left: auto; font-size:11px; font-weight: 800;
  color: #fff; background: var(--ui-warn-solid); border-radius: 999px; padding: 2px 8px; white-space: nowrap;
}
.line-form .lf-l.lf-next + .lf-v { background: var(--ui-warn-bg); }
.line-form .lf-l.lf-next + .lf-v select,
.line-form .lf-l.lf-next + .lf-v input {
  border: 2px solid var(--ui-warn-solid); background: var(--ui-warn-bg);
  box-shadow: 0 0 0 3px rgba(217,119,6,.16);
}
/* ★ 2026-10-02：物料出库页的步骤徽标与"下一步"高亮（用户："这玩意要怎么用"） */
.mo-step {
  display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; margin-right: 6px; border-radius: 50%;
  font-style: normal; font-size:11px; font-weight: 900; line-height: 1;
  background: var(--ui-brand-500); color: #fff; flex: none; vertical-align: middle;
  box-shadow: 0 0 0 2px rgba(134,134,134, .18);
}
.mo-step.done { background: var(--ui-ok-solid); box-shadow: 0 0 0 2px rgba(10,112,67,.18); }
.mo-field.mo-step-next, .mo-cart-title.mo-step-next {
  border-left: 4px solid var(--ui-warn-solid); padding-left: 8px;
  background: rgba(217,119,6,.09); border-radius: 0 8px 8px 0;
}
.mo-field.mo-step-next label, .mo-cart-title.mo-step-next { color: var(--ui-warn-ink); }
.mo-field.mo-step-next input, .mo-field.mo-step-next select {
  border-color: var(--ui-warn-solid) !important; box-shadow: 0 0 0 3px rgba(217,119,6,.14);
}
.mo-cart-title em { font-style: normal; margin-left: 8px; }

/* ════════════════════════════════════════════════════════════════════════════
   ★★★ 2026-10-02（用户："页面需要大改，尤其是左侧这个机台有的字我都看不清"）

   原因是我自己造成的：上面那套 `.mo-step-next` 高亮（深橙字 #92400e + 淡橙底）
   是按「领用登记」的白底表格设计的，可我把它套用到了**物料出库页的左栏** ——
   而那一栏是**深蓝渐变底**（#3d3d3d → #4e4e4e），深橙字压深蓝 = 基本看不清。

   这段按"深底"重做该页的醒目度：
     · 「下一步」改成**亮琥珀字 + 半透明白底 + 琥珀左边条**（在深蓝上对比度足够）；
     · 左栏的字段标签统一提亮提亮到 92% 白、字号 12.5→13；
     · 待出库清单的表头与空态文字也一起提亮（原来 60~75% 白，太灰）。
   只调颜色/字号，不动任何结构与逻辑。
   ════════════════════════════════════════════════════════════════════════════ */
/* 「下一步」在深蓝底上的正确画法 */
.mo-form .mo-field.mo-step-next,
.mo-form .mo-cart-title.mo-step-next {
  background: rgba(255, 255, 255, .13);
  border-left: 4px solid var(--ui-warn-line);
  border-radius: 0 10px 10px 0;
  padding-left: 10px;
  box-shadow: 0 0 0 1px rgba(247,220,176, .35) inset;
}
.mo-form .mo-field.mo-step-next label,
.mo-form .mo-cart-title.mo-step-next { color: var(--ui-warn-line) !important; }
.mo-form .mo-field.mo-step-next input,
.mo-form .mo-field.mo-step-next select { box-shadow: 0 0 0 2px var(--ui-warn-line); }
/* 左栏字段标签：提亮 + 放大一档（原来 75% 白 / 12.5px，深蓝上偏灰） */
.mo-form .mo-field label { color: rgba(255, 255, 255, .94); font-size: 13px; }
.mo-form .mo-cart-title { color: #fff; font-size:13px; }
.mo-form .mo-cart-title span { color: var(--ui-brand-100); }
.mo-note { color: rgba(255, 255, 255, .82); font-size:12px; }
/* 待出库清单的表头与空态：原来太灰 */
.mo-form .mo-cart-table th,
.mo-form .mo-cart-table thead td { color: rgba(255, 255, 255, .88) !important; font-size:11px; }
.mo-form .mo-cart-empty { color: rgba(255, 255, 255, .78) !important; font-size: 12px; }
.mo-form .mo-info-strip .mi .k { color: rgba(255, 255, 255, .82); font-size: 11px; }
.mo-form .mo-info-strip .mi .v { color: #fff; font-weight: 800; }

/* ════════════════════════════════════════════════════════════════════════════
   ★★★ 2026-10-02（用户："机台重新进行设计一下吧，真的太丑了"）

   实拍现状（`_qctest/v85-synthesis.png`）：机台砖是 **149×147 的"方块"，但内容只占
   顶部两条（机台号 + 型号）和底部一条（状态｜读数），中间空出约 60px** ——
   看起来就是一个被拉长的空盒子，这是"丑"的真正来源。
   根因：`.pd3-rack` 用 `grid-auto-rows: minmax(0,1fr)` 把砖**撑满左栏高度**，
   5 台机 3 行就被拉成了高瘦形。

   重做要点（只改样式）：
     ① 行高改 auto + 顶部对齐 ⇒ 砖**不再被拉伸**，固定 122px（与 149px 宽接近正方）；
     ② 内部改纵向 flex，三段各就各位：上=机台号+状态点 / 中=型号 / 下=状态+读数；
     ③ 底部读数条做成"浅灰底的分区条"（机台号区白底、读数区灰底），读数加大到 15px —— 
        这样一块砖里三段都有内容，不再有空档；
     ④ 状态色沿用原有 class（running/is-busy/norec），只调边框与底色，语义没动。
   ════════════════════════════════════════════════════════════════════════════ */
.pd3-wb .pd3-md-left .pd3-rack { grid-auto-rows: auto; align-content: start; }
.pd3-wb .pd3-md-left .pd3-dev.pd3-mc4 {
  height: 122px; min-height: 0;
  display: flex; flex-direction: column;
  border: 1.5px solid rgba(28,28,28, .10);
  border-radius: 14px;
  background: var(--ui-bg-card);
  box-shadow: 0 1px 2px rgba(28,28,28, .05);
  overflow: hidden;
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
.pd3-wb .pd3-md-left .pd3-dev.pd3-mc4:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(68,68,68, .13);
}
.pd3-wb .pd3-md-left .pd3-mc4 .mc4-top {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 12px 0;
}
.pd3-wb .pd3-md-left .pd3-mc4 .mc4-code {
  font-size:18px; line-height: 22px; font-weight: 900; letter-spacing: .2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pd3-wb .pd3-md-left .pd3-mc4 .mc4-sub {
  padding: 4px 12px 0;
  font-size: 11px; line-height: 14px; color: var(--ui-ink-400);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 底部读数条：与上半部分用浅灰底分区，读数加大 */
.pd3-wb .pd3-md-left .pd3-mc4 .mc4-foot {
  margin-top: auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 6px;
  padding: 8px 12px 8px;
  min-height: 30px;
  border-top: 1px solid rgba(28,28,28, .07);
  background: var(--ui-bg-soft);
}
.pd3-wb .pd3-md-left .pd3-mc4 .mc4-foot em {
  font-style: normal; font-size:11px; font-weight: 800;
  white-space: nowrap;
}
.pd3-wb .pd3-md-left .pd3-mc4 .mc4-foot b {
  font-size:14px; line-height: 16px; font-weight: 900;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* 在机 / 今日有活 两种状态的分区条跟着状态色走（原来只有文字变色） */
.pd3-wb .pd3-md-left .pd3-mc4.running .mc4-foot { background: rgba(10,112,67, .10); border-top-color: rgba(10,112,67, .22); }
.pd3-wb .pd3-md-left .pd3-mc4.is-busy .mc4-foot { background: rgba(217,119,6, .12); border-top-color: rgba(217,119,6, .26); }
.pd3-wb .pd3-md-left .pd3-mc4.norec .mc4-foot,
.pd3-wb .pd3-md-left .pd3-mc4.unknown .mc4-foot { background: var(--ui-bg-page); }

/* ════════════════════════════════════════════════════════════════════════════
   ★★★ 2026-10-02（用户："我让你动的就是出库作业台"）

   实拍诊断（`_shots/v86-mach-before` 那份截图里的左栏）：这块「物料出库」作业台
   **深蓝渐变底 + 琥珀高亮块 + 发暗的金黄主按钮**，三种重色撞在一起 ⇒ 显廉价、字还看不清。
   全站其它页面都是白卡 + 品牌蓝，唯独这块是深蓝，本身就不协调。

   重做（纯样式，结构与逻辑不动）：
     ① 深蓝渐变 → **白卡**（与全站一致），去掉右上角的装饰光斑；
     ② 主按钮「确认出库」从发暗的金黄 → **品牌蓝渐变**（和全站主按钮同款）；
     ③ 「下一步」高亮从"一大块黄底"→ **细琥珀左边条 + 极浅底**，不抢眼但看得见；
     ④ 字段标签/信息条/表头/空态的文字颜色全部换回白卡上的标准灰阶（对比度够）。
   ════════════════════════════════════════════════════════════════════════════ */
.mo-form {
  background: var(--ui-bg-card) !important;
  color: var(--txt) !important;
  border: 1px solid var(--line, var(--ui-line-200)) !important;
  box-shadow: 0 1px 3px rgba(28,28,28, .06) !important;
}
.mo-form::before { display: none !important; }
.mo-form-head .ic {
  background: linear-gradient(160deg, var(--ui-brand-050), var(--ui-brand-100)) !important;
  border: 1px solid var(--ui-brand-100) !important; color: var(--ui-brand-700) !important;
}
.mo-form-head .tt { color: var(--txt) !important; }
.mo-form-head .sub { color: var(--ui-ink-400, var(--ui-ink-400)) !important; }
/* 字段 */
.mo-form .mo-field label { color: var(--txt-2, var(--ui-ink-700)) !important; font-size:12px !important; font-weight: 800; }
.mo-form .mo-field input,
.mo-form .mo-field select {
  background: var(--panel-solid, #fff) !important;
  border: 1px solid var(--line, var(--ui-line-200)) !important;
  color: var(--txt) !important;
}
.mo-form .mo-field input:focus,
.mo-form .mo-field select:focus { box-shadow: 0 0 0 3px rgba(115,115,115, .16) !important; border-color: var(--ui-brand-600, var(--ui-brand-600)) !important; }
/* 物料信息条 */
.mo-form .mo-info-strip { background: var(--ui-bg-soft) !important; border: 1px solid var(--line, var(--ui-line-200)) !important; }
.mo-form .mo-info-strip .mi .k { color: var(--ui-ink-400, var(--ui-ink-400)) !important; }
.mo-form .mo-info-strip .mi .v { color: var(--txt) !important; }
/* 清单区 */
.mo-form .mo-cart-title { color: var(--txt) !important; }
.mo-form .mo-cart-title span { color: var(--ui-ink-400, var(--ui-ink-400)) !important; }
.mo-form .mo-cart-title em { color: var(--ui-ink-400, var(--ui-ink-400)) !important; }
.mo-form .mo-cart-table th,
.mo-form .mo-cart-table thead td { color: var(--ui-ink-400, var(--ui-ink-400)) !important; background: var(--ui-bg-soft) !important; }
.mo-form .mo-cart-empty { color: var(--ui-ink-400, var(--ui-ink-400)) !important; }
.mo-form .mo-note { color: var(--txt-3, var(--ui-ink-400)) !important; }
/* 主按钮：发暗的金黄 → 品牌蓝 */
.mo-submit {
  background: linear-gradient(180deg, var(--ui-brand-500), var(--ui-brand-600)) !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(115,115,115, .26) !important;
  border: none !important;
}
.mo-submit:not([disabled]):hover { filter: brightness(1.06); }
.mo-submit[disabled] { background: var(--ui-line-100) !important; color: var(--ui-ink-300) !important; box-shadow: none !important; }
/* 下一步：细琥珀条，不再是一大块黄 */
.mo-form .mo-field.mo-step-next,
.mo-form .mo-cart-title.mo-step-next {
  background: var(--ui-warn-bg) !important;
  border-left: 3px solid var(--ui-warn-solid) !important;
  box-shadow: none !important;
  padding-left: 10px;
}
.mo-form .mo-field.mo-step-next label,
.mo-form .mo-cart-title.mo-step-next { color: var(--ui-warn-ink) !important; }
.mo-form .mo-field.mo-step-next input,
.mo-form .mo-field.mo-step-next select { border-color: var(--ui-warn-line) !important; box-shadow: 0 0 0 3px rgba(217,119,6, .12) !important; }

/* ════════════════════════════════════════════════════════════════════════════
   ★★★ 2026-10-02：「待出库清单」从 6 列表格改成**一行一卡**

   改前：编码/名称/单位/批次·规格/数量/操作 六列塞在 ~310px 窄栏里 —— 又挤，
        而且我两次"加列只改行、没同步表头"都造成整行错位。表格在这个宽度本身就是错的选择。
   改后：每块料一张小卡，三行说清（编码+名称+删除 ／ 批次下拉+该批结存 ／ 规格+数量+单位），
        不再依赖列宽，结构上不会再错位。
   ════════════════════════════════════════════════════════════════════════════ */
.mo-cart-wrap { display: block; }
.mo-cartitem {
  border: 1px solid var(--line, var(--ui-line-200)); border-radius: 10px;
  background: var(--ui-bg-card); padding: 8px 10px; margin-bottom: 8px;
}
.mo-cartitem.over { border-color: var(--ui-danger-line); background: var(--ui-danger-bg); }
.mo-cartitem .ci-l1 { display: flex; align-items: center; gap: 6px; }
.mo-cartitem .ci-code { font-family: Consolas, Menlo, monospace; font-size: 13px; font-weight: 900; color: var(--txt); flex: none; }
.mo-cartitem .ci-name { flex: 1 1 auto; min-width: 0; font-size: 12px; color: var(--txt-2, var(--ui-ink-700)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mo-cartitem .mo-cart-del {
  flex: none; width: 20px; height: 20px; line-height: 1; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--line, var(--ui-line-200)); background: var(--ui-bg-card); color: var(--ui-danger-ink); font-size: 13px;
}
.mo-cartitem .mo-cart-del:hover { background: var(--ui-danger-bg); border-color: var(--ui-danger-line); }
.mo-cartitem .ci-l2, .mo-cartitem .ci-l3 { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.mo-cartitem .ci-k { flex: none; font-size: 11px; color: var(--ui-ink-400, var(--ui-ink-400)); }
.mo-cartitem .ci-spec { flex: 1 1 auto; min-width: 0; font-style: normal; font-size:11px; color: var(--txt-2, var(--ui-ink-700)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mo-cartitem .ci-l2 select { flex: 1 1 auto; min-width: 0; height: 26px; font-size:11px; border: 1px solid var(--line, var(--ui-line-200)); border-radius:6px; background: var(--ui-bg-card); }
.mo-cartitem .ci-stock { flex: none; font-size:11px; color: var(--ui-ink-400, var(--ui-ink-400)); }
.mo-cartitem .ci-l3 input { width: 74px; height: 26px; text-align: right; border: 1px solid var(--line, var(--ui-line-200)); border-radius:6px; padding: 0 8px; font-size:12px; font-weight: 800; }
.mo-cartitem .ci-unit { font-style: normal; font-size:11px; color: var(--txt-2, var(--ui-ink-700)); }

/* ════════════════════════════════════════════════════════════════════════════
   ★★★ 2026-10-02（用户："把这个作业台再好好美化一下"）—— 收口打磨

   白卡底已经定下来了，这一轮只做"精致度"：
     ① 卡片头部做成一条**淡蓝渐变的标题带**（原来是纯白，缺层次）；
     ② 四个步骤之间加**细分隔线**，让"扫码 / 选料 / 清单 / 去向"四段有节奏，
        而不是一堆等重的块堆在一起；
     ③ 「待出库清单」的标题条做成**浅灰底小标题**，与上面的输入区区分开；
     ④ 物料信息条（编码/名称/类别/库存）改成**卡片式小格**，标签在上、值在下加大；
     ⑤ 「确认出库」按钮加高到 42px、字号 15px，一眼就是主操作；
     ⑥ 统一的圆角/间距（8/10/12 的节奏），不再各处不同。
   ════════════════════════════════════════════════════════════════════════════ */
/* ① 标题带 */
.mo-form { padding: 0 0 16px !important; }
.mo-form-head {
  padding: 14px 16px;
  margin: 0 0 14px;
  background: linear-gradient(180deg, var(--ui-brand-050), var(--ui-brand-100));
  border-bottom: 1px solid var(--line, var(--ui-line-200));
  border-radius: 16px 16px 0 0;
}
.mo-form > .mo-field, .mo-form > .mo-cart-title, .mo-form > .mo-cart-wrap,
.mo-form > .mo-info-strip, .mo-form > .mo-dirsw, .mo-form > .mo-submit,
.mo-form > .mo-note { margin-left: 16px; margin-right: 16px; }
/* ② 段落分隔线 */
.mo-form > .mo-field + .mo-field,
.mo-form > .mo-cart-wrap + .mo-field { border-top: 1px dashed var(--line, var(--ui-line-200)); padding-top: 14px; }
/* ③ 清单标题条 */
.mo-cart-title {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; margin-top: 14px;
  background: var(--ui-bg-soft); border: 1px solid var(--line, var(--ui-line-200)); border-radius:8px;
  font-size: 13px; font-weight: 800;
}
.mo-cart-title em { margin-left: auto !important; }
/* ④ 物料信息条：小卡片格 */
.mo-info-strip { gap: 6px !important; padding: 8px !important; background: var(--ui-brand-050) !important; }
.mo-info-strip .mi {
  background: var(--ui-bg-card); border: 1px solid var(--line, var(--ui-line-200)); border-radius:8px;
  padding: 6px 8px; min-width: 0;
}
.mo-info-strip .mi .k { font-size:11px !important; }
.mo-info-strip .mi .v { font-size:13px !important; font-weight: 900 !important; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ⑤ 主按钮加高 */
.mo-submit { height: 42px !important; font-size:14px !important; letter-spacing: 2px; margin-top: 14px !important; }
/* ⑥ 统一输入高度与圆角 */
.mo-form .mo-field input,
.mo-form .mo-field select { height: 36px !important; border-radius:8px !important; }
.mo-scan-row .mo-scan-add { height: 36px !important; border-radius:8px !important; }
/* 步骤徽标再小一号，别喧宾夺主 */
.mo-step { width: 16px !important; height: 16px !important; font-size: 11px !important; margin-right: 6px !important; }
.line-form .lf-foot {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; background: var(--ui-bg-card);
}
.line-form .lf-foot .lf-tip { font-size:11px; color: var(--txt-3); }
@media (max-width: 1500px) {
  .line-form .lf-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .line-form .lf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 登记类台账表格：表头浅底纹 + 行间横线 + 隔行浅底纹 */
.pd-table-wrap .pd-table { border-collapse: collapse; }
.pd-table-wrap .pd-table thead th {
  background: var(--ui-brand-100) !important;
  border-bottom: 1px solid var(--line-strong, var(--ui-line-200)) !important;
}
.pd-table-wrap .pd-table tbody td {
  border-bottom: 1px solid var(--line-100, var(--ui-line-100)) !important;
}
.pd-table-wrap .pd-table tbody tr:nth-child(even) > td {
  background: rgba(242,242,242, .5);
}
.pd-table-wrap .pd-table tbody tr:hover > td { background: var(--ui-brand-050); }

/* ★ 2026-10-02：出入库台账的「出库 / 入库」小标压一档内边距。
   默认 .pd-tag 是 2px 9px / 12.5px，放在这张 10 列的宽表里会把表格撑过卡片宽度，
   最后两列（时间 / 备注）就被挤到视野外。 */
.mo-layout .pd-table .pd-tag { padding: 2px 6px !important; font-size: 11px !important; border-radius: 6px !important; }

/* ════════════════════════════════════════════════════════════════════════════
   ★★★ 2026-10-03（用户："作业台的信息框高度有点低，有的信息显示不全"）

   实拍（纯化页签）：4 个信息格被 grid 平铺在一条 ~310px 的窄栏里（每格 ~70px）——
   「名称」被省略号截成 "CAP B…"，什么都看不全。
   改：① 一行 4 格 → **两列（96px + 剩余）**，编码格窄、名称格宽；
       ② 值不再单行截断，允许**折行最多 2 行**；
       ③ 卡片加高到 52px，两行高度一致，不再"高度有点低"。
   ════════════════════════════════════════════════════════════════════════════ */
.mo-info-strip {
  display: grid !important;
  grid-template-columns: 96px minmax(0, 1fr) !important;
  gap: 6px !important;
}
.mo-info-strip .mi { padding: 8px 10px !important; min-height: 52px; }
.mo-info-strip .mi .v {
  white-space: normal !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  word-break: break-word;
  line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

/* ★ 2026-10-03（用户："还有信息是显示不全的"）：找到真凶 ——
   workbench.css 里 `.mo-submit{width:100%}`，而上面这套 `.mo-form > *` 又给了它
   margin-left/right:16px；width:100% 不含 margin ⇒ 按钮比同栏其它块**宽 32px**，
   `.mo-form{overflow:hidden}` 就把它的右边**切掉了**（实测：其它块距右 17px，
   按钮距右 -15px，即伸出卡片 15px）。改成按内容宽度算，右边也跟着对齐 16px。 */
.mo-form > .mo-submit { width: calc(100% - 32px) !important; }
/* 待出库清单卡里的物料名：长名字（如 Cyanine 7 NHS ester(脂溶性CY7)）允许折 2 行，不再省略号截断 */
.mo-cartitem .ci-name {
  white-space: normal !important;
  line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ════════════════════════════════════════════════════════════════════════════
   ★★★ 2026-10-03（用户："我想要的是和参考平台那样一样干净清爽的界面"）

   工段作业台的「动作条」（下机 / 撤回上机 …）原来**永远整排显示**，没勾选时就是一行灰按钮
   ＋「未选中引物，动作条已禁用（先在下方列表勾选）」的提示 —— 白占一整行，纯噪音。
   参考平台那条批量操作条（#stageSelectBar）默认是 `hidden`。
   现在：没勾选 → 整条瘦身，只留右侧「候选引物登记 / 更多操作 ▾」；勾选后才整条出现。
   ════════════════════════════════════════════════════════════════════════════ */
.pd3-wb .pt-acts.is-slim { padding: 4px 16px; border-top: none; background: none; min-height: 0; }
.pd3-wb .pt-acts.is-slim .pt-main:empty { display: none; }
.pd3-wb .pd3-md-right .pt-acts.is-slim { padding: 0; }

/* ★ 2026-10-03（用户："你看手动选择物料加入和去向这两个信息框高度不够把信息显示全"）
   病根：workbench.css 给这些框设的是 `padding:10px 12px`（上下各 10px），
   我上一轮又把高度钉成 36px ⇒ 内容区只剩 36-20 = **16px**，而 13px 的中文（含全角括号
   「（）」）实际行盒要 ~18px ⇒ 文字被挤在框里、贴底、上下被切一截。
   改法：高度提到 40px，把**上下 padding 归零**（左右保留 12px），
   让浏览器把单行文字在框内**垂直居中** —— 既够高又不会挤。
   扫码框、加入按钮同步到 40px，一行里的几个控件高度保持一致。 */
.mo-form .mo-field input,
.mo-form .mo-field select,
.mo-form .mo-scan-row input {
  height: 40px !important;
  padding: 0 12px !important;
}
.mo-form .mo-field select.mo-select-material { padding-right: 30px !important; }
.mo-form .mo-scan-row .mo-scan-add { height: 40px !important; }


/* ════════════════════════════════════════════════════════════════════════════
   ★★★ 2026-10-14 机台砖字号/内边距重配（用户：「机台这里的字体大小重新设计一下，
   有的显示不全」）

   实测（1920 与 1366 两个宽度结果一致：机台栏 219px、砖 105×110px）：
     · .mc4-code 18px，可用区只有 46px —— 卡内 padding 10px 与 .mc4-top 的 12px **叠了两层**，
       105px 的砖白吃 44px；「YB192」需 50px、「L1-384」需 61px ⇒ 截断；
     · .mc4-sub 11px，可用 86px，「合成仪 (LK192)」需 103px ⇒ 截断；
     · 底条 em 11px / b 14px 能放下，但「记录 50」(49px) 在 49px 里零余量。

   这一版只重配字号与内边距，一个字段都不删：
     ① 内边距只留一层（卡片 10px，.mc4-top 不再叠内边距）→ 编号可用区 46px → 72px；
     ② 编号 18px → 16.5px 等宽（6 字符「L1-384」实测 61px → 56px，稳进 72px）；
     ③ 机型改**可换行**（10.5px / 13px 行高，最多 2 行，超出才省略）——
        「合成仪 (LK192)」拆两行放得下；完整文本仍在 title 里，信息不丢；
     ④ 底条 em 10.5px、b 13px，内边距 8px 12px → 6px 8px，长读数（「记录 50」）留出余量。

   ⚠ 选择器**多加一个 .pd3-dev 类**提高特异性，压过 ui.css(.pd3-mc4 .mc4-*) 与
     workbench.css(.pd3-mc4 .mc4-*) 里那两份互相打架的老定义（不删它们，避免动到各自的其它规则）。
   ════════════════════════════════════════════════════════════════════════════ */
.pd3-wb .pd3-md-left .pd3-dev.pd3-mc4 .mc4-top { padding: 0; gap: 5px; }
.pd3-wb .pd3-md-left .pd3-dev.pd3-mc4 .mc4-code {
  font-size: 16.5px; line-height: 19px; letter-spacing: 0;
}
.pd3-wb .pd3-md-left .pd3-dev.pd3-mc4 .mc4-sub {
  padding: 0; margin-top: 3px;
  font-style: normal; font-size: 10.5px; line-height: 13px; font-weight: 600;
  white-space: normal; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; max-height: 26px;
}
.pd3-wb .pd3-md-left .pd3-dev.pd3-mc4 .mc4-foot { padding: 6px 8px; gap: 5px; }
.pd3-wb .pd3-md-left .pd3-dev.pd3-mc4 .mc4-foot em { font-size: 10.5px; }
.pd3-wb .pd3-md-left .pd3-dev.pd3-mc4 .mc4-foot b { font-size: 13px; line-height: 15px; }