:root {
  --ink: #1B2A4A;
  --ink-2: #2C3E63;
  --hi: #FFD43B;
  --on-hi: #111;
  --navy: var(--ink);
  --accent: var(--hi);
  --accent-press: #E0BC22;
  --bg: #F3F4F8;
  --card: #FFFFFF;
  --label: var(--ink);
  --secondary: #5B6478;
  --tertiary: #7A8499;
  --success: var(--ink);
  --danger: #C62828;
  --packed: var(--ink-2);
  --line: #C5CAD6;
  --fill: #EEF0F5;
  --late: #C62828;
  --late-bg: #FFF1F0;
  --soon: var(--ink-2);
  --wood: var(--ink);
  --paint: var(--ink-2);
  --out: #5B6478;
  --check: #6D7890;
  --ship: #8D98AB;
  --stage-wood: var(--ink);
  --stage-paint: var(--ink-2);
  --stage-out: #5B6478;
  --stage-check: #6D7890;
  --stage-ship: #8D98AB;
  --white: #FFFFFF;
  --muted-fill: #EEEDE8;
  --page-x: 16px;
  --app-max: 1200px;
  --tap: 44px;
  --tap-lg: 56px;
  --radius: 8px;
  --bw: 2px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --tabbar: 64px;
  --top-bar: 68px;
  --fs-caption: 13px;
  --fs-footnote: 13px;
  --fs-subhead: 15px;
  --fs-body: 17px;
  --fs-title: 20px;
  --fs-display: 22px;
  --fs-stat: 26px;
  --fs-hero: 28px;
  --fs-giant: 52px;
}


* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  min-height: 100%;
  overflow-x: clip;
  background: var(--bg);
  color: var(--label);
  font-family: var(--font-sans, "Inter"), "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans SC", ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: var(--fs-body);
  line-height: 1.35;
  font-feature-settings: "tnum" 1;
  -webkit-font-smoothing: antialiased;
}
#app {
  min-height: 100dvh;
  max-width: var(--app-max);
  margin: 0 auto;
  background: var(--bg);
  position: relative;
}
button, input, select, textarea {
  font: inherit;
  color: inherit;
}
button { background: none; border: 0; }
a { color: var(--packed); text-decoration: none; }

.screen {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
.top {
  background: var(--navy);
  color: #fff;
  height: calc(var(--top-bar) + env(safe-area-inset-top, 0px));
  min-height: calc(var(--top-bar) + env(safe-area-inset-top, 0px));
  padding: 12px 16px;
  padding-top: calc(12px + env(safe-area-inset-top, 0px));
  display: flex;
  align-items: center;
  gap: 10px;
  position: sticky;
  top: 0;
  z-index: 5;
}
.top .back {
  width: 44px; height: 44px; margin: -8px 0 -8px -8px;
  display: grid; place-items: center;
  font-size: var(--fs-display); font-weight: 500;
}
.top .title { font-size: var(--fs-body); font-weight: 600; flex: 1; }
.top .sub { font-size: var(--fs-footnote); opacity: .72; font-weight: 400; }
.top .meta { min-width: 0; max-width: 38%; margin-left: auto; text-align: right; font-size: var(--fs-footnote); opacity: .9; overflow-wrap: anywhere; }
.body {
  flex: 1;
  padding: 12px 16px calc(24px + var(--tabbar) + var(--safe-bottom));
}
.body.no-tab { padding-bottom: 24px; }
.tabbar {
  position: fixed; left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--app-max);
  height: calc(var(--tabbar) + var(--safe-bottom));
  padding: 6px 8px var(--safe-bottom);
  background: var(--card);
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  z-index: 30;
}
html:has(.wsheet), body:has(.wsheet), .screen:has(.wsheet) { overflow: hidden; }
.screen:has(.wsheet) .tabbar { display: none; }
.tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; min-height: 44px; color: var(--tertiary); font-size: var(--fs-footnote);
}
.tab.on { color: var(--label); font-weight: 600; }
.tab svg { width: 22px; height: 22px; }

.btn {
  display: flex; align-items: center; justify-content: center;
  min-height: 48px; font-size: var(--fs-body); font-weight: 600;
  width: 100%;
}
.btn:disabled { opacity: .45; }
.btn.is-submitting { cursor: wait; opacity: .78; }
.spinner { width: 16px; height: 16px; margin-right: 8px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.btn-primary { background: var(--hi); color: var(--on-hi); }
.btn-primary:active {
  background: var(--accent-press);
  transform: scale(0.98);
}
.btn-ghost { background: var(--card); color: var(--navy); border: 1px solid var(--line); }
.btn-ghost:active {
  background: var(--fill);
}
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:active {
  background: var(--ink-2);
}
.btn-sm { min-height: 44px; font-size: var(--fs-subhead); padding: 0 12px; width: auto; }
/* 车间里戴手套、手上有灰，主提交按钮要够大够好按。 */
.btn-lg {
  min-height: 64px;
  font-size: var(--fs-title);
  font-weight: 700;
  margin-top: 4px;
}
.btn-lg:active {
  transform: scale(0.98);
}
.card { background: var(--card); border: 1px solid var(--line); padding: 14px; }
.tiny { color: var(--tertiary); font-size: var(--fs-footnote); }
.tag {
  display: inline-flex; align-items: center; height: 28px; padding: 0 10px;
  border: 0; border-radius: 4px;
  font-size: 15px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; color: var(--white);
}
.tag-red { background: var(--late); color: var(--white); }
.tag-blue { background: var(--ink-2); color: var(--white); }
.tag-neutral { background: var(--fill); color: var(--ink); border: 1px solid var(--line); }
.ocard-tags { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; flex-shrink: 0; }
.num { font-variant-numeric: tabular-nums; font-weight: 700; }

.pick-hero { padding: 28px 8px 18px; }
.pick-hero h1 { font-size: var(--fs-hero); font-weight: 700; color: var(--navy); }
.pick-hero p { margin-top: 6px; font-size: var(--fs-body); color: var(--secondary); }
.avatar {
  width: 44px; height: 44px; border-radius: 22px;
  background: var(--fill); color: var(--navy);
  display: grid; place-items: center; font-weight: 700; font-size: var(--fs-body);
  flex-shrink: 0;
}
.avatar.admin { background: #F8E4C4; color: #8A5A12; }


.dashboard-body { padding-top: 20px; }
.dashboard-head { padding: 6px 4px 16px; }
.eyebrow { color: var(--secondary); font-size: var(--fs-caption); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.dashboard-head h1 { margin-top: 5px; color: var(--navy); font-size: var(--fs-hero); line-height: 1.15; }
.priority-board { margin: 0 0 20px; padding: 14px; background: var(--card); border: var(--bw) solid var(--ink); border-radius: var(--radius); }
.priority-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.priority-head h2 { margin-top: 3px; color: var(--navy); font-size: var(--fs-title); }
.priority-head > span { color: var(--secondary); font-size: var(--fs-caption); white-space: nowrap; }
.priority-alerts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 10px; }
.priority-alert, .priority-top, .priority-cell { text-decoration: none; }
.priority-alert { min-height: 62px; padding: 8px 10px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; border: 1px solid var(--line); }
.priority-alert b { font-size: 28px; line-height: 1; }
.priority-alert span { font-size: var(--fs-footnote); font-weight: 700; }
.priority-alert i, .priority-top i { font-size: 24px; font-style: normal; }
.priority-alert.late { color: #fff; background: var(--late); }
.priority-alert.soon { color: #fff; background: var(--soon); }
.priority-top { min-height: 58px; margin-top: 8px; padding: 9px 10px; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 8px; color: var(--navy); background: var(--fill); border: 1px solid var(--line); }
.priority-top span { color: var(--secondary); font-size: var(--fs-caption); }
.priority-top b { font-size: var(--fs-body); }
.priority-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 6px; margin-top: 8px; }
.priority-cell { min-width: 0; min-height: 74px; padding: 8px 6px; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid var(--line); background: var(--fill); }
.priority-cell span { color: var(--secondary); font-size: var(--fs-caption); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.priority-cell b { color: var(--ink); font-size: 26px; line-height: 1; }
.priority-cell small { color: var(--tertiary); font-size: var(--fs-caption); }
.tone-paint, .tone-out, .tone-check, .tone-ship { --tone: var(--ink); }
.priority-top.tone-wood, .priority-cell.tone-wood,
.priority-top.tone-paint, .priority-cell.tone-paint,
.priority-top.tone-out, .priority-cell.tone-out,
.priority-top.tone-check, .priority-cell.tone-check,
.priority-top.tone-ship, .priority-cell.tone-ship { border-color: var(--ink); background: #fff; }
.dashboard-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.dash-metric { min-width: 0; min-height: 112px; padding: 14px; background: var(--card); border: var(--bw) solid var(--ink); border-radius: var(--radius); display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.dash-metric span { color: var(--secondary); font-size: var(--fs-footnote); font-weight: 600; }
.dash-metric strong { min-width: 0; max-width: 100%; color: var(--ink); font-size: clamp(22px, 8vw, var(--fs-giant)); line-height: 1.05; font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; overflow: hidden; overflow-wrap: anywhere; text-overflow: ellipsis; }
.dash-metric strong[data-digits="6"], .dash-metric strong[data-digits="7"], .dash-metric strong[data-digits="8"], .dash-metric strong[data-digits="9"] { font-size: clamp(18px, 6vw, 34px); }
.dash-metric small { color: var(--tertiary); font-size: var(--fs-caption); }
.dash-metric.dash-primary { border-color: var(--ink); background: var(--ink); }
.dash-metric.dash-primary span, .dash-metric.dash-primary strong, .dash-metric.dash-primary small { color: #fff; }
button.dash-metric {
  width: 100%; text-align: left; cursor: pointer; font: inherit;
}
button.dash-metric:active { opacity: .88; }
.dashboard-section { margin-top: 24px; }
.dashboard-actions { display: grid; gap: 8px; margin-top: 9px; }
.dash-action { min-height: var(--tap-lg); padding: 10px 12px; border: 2px solid var(--ink); background: #fff; color: var(--ink); text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
.dash-action b { color: var(--ink); font-size: var(--fs-body); }
.dash-action span { min-width: 0; color: var(--secondary); font-size: var(--fs-footnote); overflow-wrap: anywhere; }
.dash-action i { color: var(--hi); font-size: 22px; font-style: normal; font-weight: 700; }
.inventory-section h2 { font-size: var(--fs-subhead); font-weight: 700; }
.inventory-count { color: var(--secondary); font-size: var(--fs-footnote); font-weight: 500; }
.inventory-list { border-top: 1px solid var(--line); margin-top: 8px; }
.inventory-row { display:flex; justify-content:space-between; gap:12px; align-items:center; padding:10px 0; border-bottom:1px solid var(--line); }
.inventory-row strong { display:block; font-size: var(--fs-body); }
.inventory-row small { display:block; color:var(--secondary); font-size:var(--fs-footnote); margin-top:2px; }
.inventory-row b { white-space:nowrap; color:var(--danger); font-size:var(--fs-title); }
.inventory-edit { margin-top:12px; border-top:1px solid var(--line); padding-top:10px; }
.inventory-edit summary { cursor:pointer; color:var(--packed); font-size:var(--fs-footnote); font-weight:600; }

.inventory-hint { color: var(--secondary); font-size: var(--fs-footnote); margin-top: 5px; }
.inventory-hint-live { color: var(--danger); font-weight: 700; }

.dashboard-note { margin-top: 18px; padding: 10px 12px; background: var(--fill); color: var(--secondary); font-size: var(--fs-footnote); border: 1px solid var(--line); }

.outsource-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.outsource-summary > div { min-height: 82px; padding: 10px; background: var(--card); border: 1px solid var(--line); display: flex; flex-direction: column; justify-content: space-between; }
.outsource-summary strong { color: var(--navy); font-size: var(--fs-stat); line-height: 1; font-variant-numeric: tabular-nums; }
.outsource-summary strong small { margin-left: 3px; font-size: var(--fs-caption); font-weight: 600; }
.outsource-summary span { color: var(--secondary); font-size: var(--fs-caption); }
.outsource-report-list { display: grid; gap: 10px; }
.outsource-report-card { background: var(--card); border: 1px solid var(--line); padding: 12px; }
.outsource-report-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.outsource-report-head > div { min-width: 0; }
.outsource-report-head strong { display: block; color: var(--label); font-size: var(--fs-body); overflow-wrap: anywhere; }
.outsource-report-head span:not(.tag) { display: block; margin-top: 3px; color: var(--secondary); font-size: var(--fs-footnote); }
.outsource-report-meta { margin-top: 9px; padding-bottom: 9px; color: var(--secondary); font-size: var(--fs-footnote); border-bottom: 1px solid var(--line); }
.outsource-event { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; padding: 10px 0 2px 14px; border-left: 2px solid var(--accent); }
.outsource-event.emit { border-left-color: var(--navy); }
.outsource-event b { font-size: var(--fs-footnote); }
.outsource-event span, .outsource-event small { color: var(--secondary); font-size: var(--fs-caption); }
.outsource-event small { grid-column: 2; }
.outsource-empty-event { padding: 12px 0 8px 14px; color: var(--tertiary); font-size: var(--fs-footnote); border-left: 2px solid var(--line); }
.outsource-report-card .btn { margin-top: 10px; }

/* 全页卡片跟工作台同一套：暖白底、1px 硬边、无圆角、无阴影。 */

.cta { margin: 4px 0 12px; }
.stats {
  display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 16px;
  color: var(--secondary); font-size: var(--fs-footnote);
}
.stats b { color: var(--label); font-size: var(--fs-body); font-variant-numeric: tabular-nums; }
.sec-h {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 4px 0 8px;
}
.sec-h h3 { font-size: var(--fs-subhead); font-weight: 600; }
.code { font-size: var(--fs-footnote); color: var(--secondary); }

/* ── 订单卡片 ───────────────────────────────────────────────
   工人认货靠物料号和颜色，所以这两项是卡片上最大的字；
   单号降到底部只作核对；厂内/在途/已打包移到详情页。      */
/* 订单列表使用详情行，减少视觉切割，提高一屏信息密度。 */
.orders-list { display: grid; gap: 10px; min-width: 0; }
@media (min-width: 1024px) {
  .orders-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ocard {
  position: relative;
  background: var(--card);
  border: var(--bw) solid var(--ink);
  border-radius: var(--radius);
  padding: 14px;
  margin: 0 0 10px 0;
}
.process-filter {
  display: flex; gap: 7px; overflow-x: auto; margin: 0 -2px 12px;
  padding: 2px 2px 8px; scrollbar-width: thin;
}
.process-filter-item {
  flex: 0 0 auto; min-height: 38px; padding: 0 10px;
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--ink);
  background: var(--card); color: var(--ink);
  font-size: var(--fs-footnote); font-weight: 700; white-space: nowrap;
}
.process-filter-item b {
  min-width: 18px; padding: 1px 5px;
  background: var(--fill); color: var(--secondary); text-align: center; font-size: var(--fs-caption);
}
.process-filter-item.on { border-color: var(--ink); background: var(--hi); color: var(--on-hi); }
.process-filter-item.on b { background: var(--ink); color: #fff; }
.list-summary { margin: 0 0 8px; color: var(--secondary); font-size: var(--fs-footnote); font-weight: 700; }

.ocard-stage {
  margin-top: 10px; padding: 9px 10px 8px;
  background: var(--fill); border: 1px solid var(--line);
}
.ocard-stage-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ocard-stage-head strong { color: var(--navy); font-size: var(--fs-body); }
.ocard-stage-head span { color: var(--secondary); font-size: var(--fs-caption); text-align: right; }
.ocard-stage-track { position: relative; height: 12px; margin: 9px 1px 3px; }
.ocard-stage-track::before {
  content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 3px;
  background: var(--line); border-radius: 2px;
}
.ocard-stage-fill { position: absolute; left: 0; top: 5px; height: 3px; background: var(--navy); border-radius: 2px; }
.ocard-stage-dots { position: absolute; inset: 0; display: flex; justify-content: space-between; align-items: center; }
.ocard-stage-dot { width: 9px; height: 9px; border: 2px solid var(--line); border-radius: 50%; background: var(--card); }
.ocard-stage-dot.done { border-color: var(--navy); background: var(--navy); }
.ocard-stage-dot.now { width: 13px; height: 13px; border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 2px var(--card); }
.ocard-stage-foot { display: flex; justify-content: space-between; color: var(--tertiary); font-size: var(--fs-caption); }

.ocard.is-late, .dhero.is-late { border-color: var(--late); background: var(--late-bg); }
.ocard.is-soon, .dhero.is-soon { border-color: var(--soon); }
.ocard.is-late, .ocard.is-soon, .dhero.is-late, .dhero.is-soon { padding-top: 28px; }
.dhero { position: relative; }
.ocard.is-done { border-color: var(--ink); opacity: .82; }
.ocard-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.ocard-sku {
  font-size: var(--fs-title); font-weight: 700; line-height: 1.25;
  overflow-wrap: anywhere; min-width: 0;
}
.ocard-customer { color: var(--label); }
.ocard-sep { color: var(--secondary); font-weight: 400; }
.due-soon { color: var(--soon); font-weight: 700; }
.due-late { color: var(--late); font-weight: 700; }
.order-qty { color: var(--late); font-weight: 700; font-size: var(--fs-title); }
.orange-text { color: var(--soon) !important; }
.blue-text { color: var(--packed) !important; }
.ocard-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px; margin-top: 8px;
}
.ocard-grid > div { min-width: 0; }
.ocard-k { display: block; color: var(--secondary); font-size: var(--fs-footnote); }
.ocard-grid strong {
  display: block; margin-top: 1px; font-size: var(--fs-body);
  line-height: 1.2; overflow-wrap: anywhere;
}
.ocard-grid-main strong { font-weight: 700; }
.ocard-grid-kpi { border-top: 1px solid var(--line); padding-top: 7px; margin-top: 7px; }
.ocard-grid-kpi strong { font-size: var(--fs-title); }

.note { margin-top: 7px; padding: 6px 8px; font-size: var(--fs-footnote); font-weight: 600; border: 1px solid var(--line); }
.note-warn { background: #FFF7EA; color: #8A5A12; }
.note-transit { background: var(--fill); color: var(--ink); }

.ocard-acts { margin-top: 8px; }
/* 操作保留按钮感，但不再把整张订单包成卡片。 */
.ocard-go {
  width: 100%; min-height: 52px;
  background: var(--hi); color: var(--on-hi);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 14px; font-weight: 700; text-align: left;
}
.ocard-go:active {
  background: var(--accent-press);
  transform: scale(0.98);
}
.ocard-go-do { font-size: var(--fs-body); }
.ocard-go-num { font-size: var(--fs-footnote); font-weight: 600; opacity: .82; }
.ocard-detail {
  width: 100%; min-height: 36px; display: flex; align-items: center;
  justify-content: space-between; border-top: 1px solid var(--line);
  margin-top: 7px; font-size: var(--fs-footnote); color: var(--tertiary);
}
.ocard-code { font-variant-numeric: tabular-nums; }
.ocard-more { color: var(--packed); font-weight: 600; }
.ocard-go:focus-visible,
.ocard-detail:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }

/* ── 订单详情页头 ───────────────────────────────────────── */
.dhero { background: var(--card); border: var(--bw) solid var(--ink); border-radius: var(--radius); padding: 14px; }
.dhero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.dhero-sku { min-width: 0; font-size: var(--fs-hero); font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.dhero-color {
  display: inline-block; margin-top: 8px;
  font-size: var(--fs-display); font-weight: 700; color: var(--navy);
  background: var(--fill); border: 1px solid var(--line); padding: 4px 12px;
}

.dhero-sub {
  margin-top: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-size: var(--fs-body); color: var(--secondary);
}
.dhero-sub .dot { color: var(--line); }
.dhero-remark {
  margin-top: 10px; padding: 8px 10px;
  background: var(--fill); border: 1px solid var(--line); font-size: var(--fs-subhead);
}
.dhero-top .tag { max-width: 45%; height: auto; min-height: 28px; white-space: normal; overflow-wrap: anywhere; }
.ptable {
  width: 100%; margin-top: 10px; border: var(--bw) solid var(--ink);
  overflow: hidden; background: var(--card);
}
.ptable .pr {
  display: grid; grid-template-columns: 4.8em minmax(0, 1fr);
  min-height: 40px; border-bottom: 1px solid var(--line);
}
.ptable .pr:last-child { border-bottom: 0; }
.ptable .k {
  display: flex; align-items: center; padding: 6px 10px;
  background: #fff; color: var(--ink); font-size: var(--fs-footnote); font-weight: 700;
  border-right: 1px solid var(--ink);
}
.ptable .v {
  display: flex; align-items: center; min-width: 0; padding: 6px 10px;
  overflow-wrap: anywhere; font-weight: 600; font-size: var(--fs-body);
}
.ptable .pr.qty, .ptable .pr.uncut { min-height: 48px; }
.admin-line {
  margin-top: 8px; padding: 8px 10px;
  background: var(--fill); border: 1px solid var(--line); color: var(--secondary); font-size: var(--fs-footnote);
}

.piles { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin: 12px 0; }
.pile {
  background: var(--card); border: 1px solid var(--line); padding: 10px 8px 12px; text-align: center;
}
.pile .v { font-size: var(--fs-stat); font-weight: 700; line-height: 1.15; }
.pile .v small { margin-left: 2px; font-size: var(--fs-caption); font-weight: 600; }
.pile .l { font-size: var(--fs-footnote); color: var(--secondary); margin-top: 2px; }
.pile.ww .v { color: var(--accent); }
.pile.pk .v { color: var(--packed); }

/* ── 详情页十道工序进度 ─────────────────────────────────────
   每行带序号（防止一底/二底、底磨/二磨看错）、已完成/未完成、
   本道上限和进度条。原来算了 cap 却从不显示。              */
.plist { background: var(--card); border: 1px solid var(--line); overflow: hidden; }
.prow {
  display: flex; align-items: center; gap: 10px; min-height: 52px;
  padding: 8px 12px; font-size: var(--fs-body); width: 100%;
  background: transparent; text-align: left;
}
.prow-no {
  width: 24px; height: 24px; flex-shrink: 0; border-radius: 12px;
  background: var(--fill); color: var(--secondary);
  display: grid; place-items: center;
  font-size: var(--fs-caption); font-weight: 700; font-variant-numeric: tabular-nums;
}
.prow-nm { flex: 1; min-width: 0; font-weight: 600; }
.prow-flag {
  margin-left: 6px; padding: 2px 8px; border-radius: 4px;
  background: var(--hi); color: var(--on-hi);
  font-size: var(--fs-caption); font-weight: 700; font-style: normal;
}
.prow-nums { text-align: right; flex-shrink: 0; }
.prow-nums b {
  display: block; font-variant-numeric: tabular-nums;
  font-size: var(--fs-subhead); font-weight: 700; color: var(--secondary);
}
.prow-nums b.uncut { color: var(--danger); }
.prow-nums i {
  display: block; margin-top: 1px; font-style: normal;
  font-size: var(--fs-caption); color: var(--tertiary);
}
.prow-bar { height: 4px; margin: 0 12px; background: var(--fill); border-radius: 2px; overflow: hidden; }
.prow-bar > i { display: block; height: 100%; background: var(--navy); border-radius: 2px; }
.pblock { border-bottom: 1px solid var(--line); }
.pblock:last-child { border-bottom: none; }
.pblock.now { background: #FFF8DC; }
.pblock.now .prow-no { background: var(--hi); color: var(--on-hi); }
.pblock.done .prow-nums b { color: var(--ink); }
.pblock.done .prow-bar > i { background: var(--ink); }
/* 还没轮到的工序压暗并收窄，让有活的那几道跳出来 */
.pblock.idle .prow { min-height: 42px; }
.pblock.idle .prow-nm,
.pblock.idle .prow-nums { opacity: .4; }
.pblock.idle .prow-bar { display: none; }
.scrap-link {
  display: flex; align-items: center; min-height: 44px;
  padding: 0 12px 8px; color: var(--danger); font-size: var(--fs-subhead); font-weight: 600;
  width: 100%; text-align: left; background: transparent;
}
.scrap-line { padding: 0 12px 8px; color: var(--danger); font-size: var(--fs-footnote); }
.report-line { padding: 0 12px 8px; color: var(--secondary); font-size: var(--fs-footnote); }
.rlist { background: var(--card); border: 1px solid var(--line); }
.rrow {
  display: grid; grid-template-columns: 56px 1fr; gap: 10px;
  padding: 10px 12px; border-bottom: 1px solid var(--line);
  min-height: 56px; align-items: center;
}
.rrow:last-child { border-bottom: none; }
.rthumb { width: 56px; height: 56px; object-fit: cover; background: var(--fill); border: 1px solid var(--line); }
.rbody b { display: block; font-size: var(--fs-body); }
.rbody span { display: block; margin-top: 2px; font-size: var(--fs-footnote); color: var(--secondary); }
.home-report { color: inherit; text-decoration: none; grid-template-columns: 56px minmax(0, 1fr); }
.home-report .rbody { min-width: 0; overflow-wrap: anywhere; }
.home-report:focus-visible { outline: 2px solid var(--navy); outline-offset: -2px; }
.stage-progress { border: var(--bw) solid var(--ink); border-radius: var(--radius); margin: 12px 0; background: #fff; overflow: hidden; }
.stage-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.stage-row:last-child { border-bottom: 0; }
.stage-row > span { flex: 1; min-width: 0; font-size: var(--fs-body); color: var(--ink); overflow-wrap: anywhere; }
.stage-row > b { font-size: var(--fs-title); color: var(--ink); }
.stage-row > button { max-width: 100%; min-height: 44px; padding: 8px 10px; background: var(--ink); color: #fff; border: 1px solid var(--ink); font-size: var(--fs-subhead); overflow-wrap: anywhere; }

.fork {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  padding: 8px 12px; background: var(--fill); border-bottom: 1px solid var(--line);
}
.lot { background: var(--card); border: 1px solid var(--line); padding: 12px; margin-top: 10px; }
.lot h4 { font-size: var(--fs-subhead); margin-bottom: 6px; }
.lot-qty { margin-top: 6px; font-size: var(--fs-subhead); }
.lotbar {
  display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 0;
  padding: 10px 12px; background: var(--fill); border: 1px solid var(--line);
  font-size: var(--fs-subhead); color: var(--secondary);
}
.lotbar b { color: var(--label); font-variant-numeric: tabular-nums; }
.sticky-cta { margin-top: 16px; }

/* ── 报工页：正在报哪笔订单 ─────────────────────────────── */
.lock {
  background: var(--card); border: 1px solid var(--line); padding: 12px 14px;
  display: flex; align-items: center; gap: 8px; min-height: 60px; width: 100%;
}
.lock-main { min-width: 0; flex: 1; }
.lock-sku { font-size: var(--fs-title); font-weight: 700; overflow-wrap: anywhere; }
.lock-meta { margin-top: 3px; font-size: var(--fs-footnote); color: var(--secondary); }
.lock-meta b { color: var(--label); }
.lock .chg {
  flex-shrink: 0; color: var(--packed); font-size: var(--fs-subhead); font-weight: 600;
  min-height: 44px; min-width: 56px; display: grid; place-items: center;
}

/* ── 报工页：工序选择 ───────────────────────────────────────
   原来 10 个按钮外观完全相同，工人只能靠记忆判断该点哪个，
   而「一底/二底」「底磨/二磨」两两相似，最容易点错。
   现在每格有：工序序号、名称、该道剩余片数；任意工序可直接报。 */
.sec-label {
  margin: 16px 0 8px; font-size: var(--fs-subhead);
  font-weight: 700; color: var(--ink);
}
.pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.pcell {
  position: relative; min-height: 72px;
  background: var(--card); border: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 8px 4px;
}
.pcell:active {
  transform: scale(0.96);
}
.pcell-no {
  position: absolute; top: 3px; left: 5px;
  font-size: var(--fs-caption); font-weight: 700; color: var(--tertiary);
  font-variant-numeric: tabular-nums;
}
.pcell-nm { font-size: var(--fs-subhead); font-weight: 700; }
.pcell-ft {
  font-size: var(--fs-caption); color: var(--secondary);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* 当前该做的那道：系统判定的下一步，描边提示但不抢选中态的色 */
.pcell.next {
  border-color: var(--accent);
  border-width: 2px;
}
.pcell.next .pcell-ft { color: #8A5A12; font-weight: 700; }
/* 正在报的那道 */
.pcell.on {
  background: var(--hi);
  border-color: var(--hi);
  color: var(--on-hi);
}
.pcell.on .pcell-no,
.pcell.on .pcell-ft { color: #4A3A10; }
/* 已经报满的工序：明显后退，避免重复报 */
.pcell.full { background: var(--fill); }
.pcell.full .pcell-nm { color: var(--tertiary); }
.pcell.full .pcell-ft { color: var(--ink); font-weight: 700; }
.pcell.full.on .pcell-nm { color: var(--on-hi); }
.process-aux { margin-top: 8px; }
.process-outsource { width: 100%; min-height: 58px; padding: 9px 12px; border: 1px solid #B5792B; background: #FFF7E8; color: #7A4D0A; display: flex; align-items: center; justify-content: space-between; text-align: left; }
.process-outsource span { font-size: var(--fs-body); font-weight: 700; }
.process-outsource small { font-size: var(--fs-footnote); }
.pcell:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }

/* ── 数量输入 ───────────────────────────────────────────────
   工人报的是数出来的准确数，所以输入框是主角：点一下调出
   数字键盘、能整段重打；加减号退为微调。上限必须显示。    */
.qtybox { background: var(--card); border: 1px solid var(--line); padding: 12px; margin: 10px 0; }
.qtybox-label { display: block; font-size: var(--fs-subhead); font-weight: 600; margin-bottom: 10px; }
.qtyrow { display: flex; align-items: center; gap: 10px; }
.qbtn {
  width: 56px; height: 64px; flex-shrink: 0; background: var(--fill);
  display: grid; place-items: center; font-size: var(--fs-hero); font-weight: 600;
  border: 1px solid var(--line);
  transition: all 0.15s ease;
}
.qbtn:active {
  background: var(--line);
  border-color: var(--navy);
  transform: scale(0.94);
}
.qtyfield {
  flex: 1; min-width: 0; height: 64px; border: 2px solid var(--navy);
  display: flex; align-items: center; justify-content: center; gap: 4px;
  background: #fff;
}
.qtyfield:focus-within {
  border-color: var(--accent);
}
.qtyunit { font-size: var(--fs-subhead); color: var(--secondary); }
.qtyhint { margin-top: 10px; font-size: var(--fs-footnote); color: var(--secondary); }
.qtyhint b { color: var(--label); font-size: var(--fs-subhead); }
.qtyerr {
  margin-top: 8px; padding: 7px 10px;
  background: #F8D7D4; color: #8E261C; font-size: var(--fs-footnote); font-weight: 700;
}
.qval.is-bad { color: var(--danger); }
[hidden] { display: none !important; }
.qval {
  font-size: var(--fs-giant); font-weight: 700; min-width: 72px; text-align: center;
  background: transparent; border: 0; width: 96px;
}
/* 拍照是每笔报工的硬要求，所以入口要足够大、状态要一眼可见。 */
.cam {
  background: var(--card); min-height: 104px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; border: 1px dashed var(--line); color: var(--secondary); margin: 12px 0;
  width: 100%; position: relative; overflow: hidden;
}
.cam b { color: var(--label); font-size: var(--fs-title); }
.cam input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.cam img { width: 100%; height: 150px; object-fit: cover; display: block; }
.cam:focus-within { border-color: var(--accent); }
.hint { font-size: var(--fs-subhead); color: #8A5A12; background: #FFF7EA; border: 1px solid var(--line); padding: 10px 12px; margin-bottom: 10px; }
.surplus-note { margin: 10px 0; padding: 9px 10px; background: #FFF7EA; border: 1px solid var(--line); color: #8A5A12; font-size: var(--fs-footnote); font-weight: 600; }
.warn { color: var(--danger); font-size: var(--fs-footnote); margin-top: 6px; }

/* 空状态和错误页：都要说清楚下一步做什么，不能只留一行字。 */
.empty {
  padding: 32px 16px; text-align: center;
  color: var(--secondary); font-size: var(--fs-subhead);
}
.err-box {
  background: var(--card); padding: 20px 16px; text-align: center;
  border: 1px solid var(--danger);
}
.err-title { font-size: var(--fs-title); font-weight: 700; }
.err-msg { margin-top: 8px; color: var(--secondary); font-size: var(--fs-subhead); }

.toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(80px + var(--safe-bottom));
  width: calc(100% - 32px); max-width: 398px;
  background: var(--navy); color: #fff; padding: 12px 14px;
  font-size: var(--fs-body); z-index: 20; text-align: center;
}
.field { margin-top: 12px; }
.field label { display: block; font-size: var(--fs-subhead); font-weight: 600; margin-bottom: 6px; }
.input, .select {
  width: 100%; min-height: 48px; border: 1px solid var(--line);
  background: var(--card); padding: 10px 12px; font-size: var(--fs-body); color: var(--label);
}
.input:focus, .select:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
.choice-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.choice {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 48px; border: 1px solid var(--line);
  background: var(--card); font-size: var(--fs-body); font-weight: 700;
}
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice:has(input:checked) {
  border-color: var(--navy);
  outline: 2px solid var(--navy);
  outline-offset: -2px;
}
.choice-hint { margin-top: 6px; font-size: var(--fs-footnote); color: var(--secondary); }
.search {
  min-height: 48px; background: var(--card);
  display: flex; align-items: center; padding: 0 12px; margin-bottom: 12px;
  border: 1px solid var(--line);
}
.search input { border: 0; background: transparent; width: 100%; min-height: 48px; outline: none; }

/* 报工页「更换订单」的选单列表：同样按物料号+颜色认货。 */
.pickrow {
  display: block; width: 100%; text-align: left;
  background: var(--card); padding: 12px;
  margin-bottom: 8px; border: 1px solid var(--line);
}
.pickrow-sku { display: block; font-size: var(--fs-title); font-weight: 700; }
.pickrow-color { display: block; margin-top: 2px; font-size: var(--fs-body); font-weight: 700; color: var(--navy); }

.pickrow-meta { display: block; margin-top: 4px; font-size: var(--fs-footnote); color: var(--secondary); }
.pickrow-meta i { font-style: normal; }
.pickrow-next {
  display: block; margin-top: 8px; padding: 6px 10px;
  background: var(--fill); border: 1px solid var(--line); font-size: var(--fs-footnote); font-weight: 600;
}
.pickrow:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.me-name { font-weight: 700; font-size: var(--fs-title); }
.hidden { display: none !important; }
.photo-thumb { width: 100%; margin-top: 8px; }
.me-row {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 48px; background: var(--card); border: 1px solid var(--line); padding: 0 14px; margin-bottom: 8px;
  width: 100%; text-align: left;
}

@media (min-width: 1024px) {
  :root { --page-x: 32px; }
  #app { padding: 0 var(--page-x); }
  .body { padding-left: 0; padding-right: 0; }
  .wcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .screen > .body > .ocard { min-width: 0; }
  .umodal { width: min(calc(100% - 24px), 560px); left: 50%; right: auto; transform: translate(-50%, -50%); border: var(--bw) solid var(--ink); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* 委外收回：合格 / 返修回喷漆 / 不合格待处理 */
.recv-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 4px 0 12px; }
.recv-quick .btn { width: 100%; }
.recv-split { margin: 4px 0 14px; padding: 10px 12px; border: 1px solid var(--line); background: var(--card); font-size: var(--fs-subhead); line-height: 1.5; }
.recv-split small { display: block; color: #8A5A12; font-size: var(--fs-footnote); }
.recv-split .bad, .lot-split .bad { color: var(--danger); font-weight: 700; }
.lot-split { color: var(--secondary); }
.qc-pending-note { border-color: var(--danger); color: var(--danger); }

/* 下料与木磨沿用原木作色，其余阶段保留现有视觉。 */
.jam { margin: 0 0 12px; }
.jam-head { background: var(--card); border-left: 6px solid var(--late); border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; }
.jam-head b { font-size: 20px; color: var(--late); }
.jam-head p { margin: 4px 0 0; font-size: 13px; color: #555; line-height: 1.5; }
.jam-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(44px, 1fr)); gap: 6px; }
.jam-cell { border-radius: 8px; padding: 8px 2px; text-align: center; color: #fff; font-size: 13px; text-decoration: none; display: block; }
.jam-cell b { display: block; font-size: 18px; line-height: 1.3; }
.jam-cell small { font-size: var(--fs-caption); opacity: .9; }
.jam-cell.tone-wood { background: var(--wood); } .jam-cell.tone-paint { background: var(--paint); }
.jam-cell.tone-out { background: var(--out); } .jam-cell.tone-check { background: var(--check); } .jam-cell.tone-ship { background: var(--ship); }
.jam-cell.hot { outline: 3px solid var(--late); outline-offset: 1px; }
.jam-risk { display: flex; gap: 6px; margin-top: 8px; }
.jam-risk div { flex: 1; background: var(--card); border-radius: 8px; padding: 8px; text-align: center; font-size: var(--fs-caption); }
.jam-risk b { display: block; font-size: 18px; }
.tag-jam { background: var(--ink) !important; color: #fff !important; }
.tag-jam.tone-wood { background: var(--wood); } .tag-jam.tone-paint { background: var(--paint); }
.tag-jam.tone-out { background: var(--out); } .tag-jam.tone-check { background: var(--check); } .tag-jam.tone-ship { background: var(--ship); }
.stage-row.tone-wood, .stage-row.tone-paint, .stage-row.tone-out,
.stage-row.tone-check, .stage-row.tone-ship { background: #fff; }
.stage-row.tone-wood > b, .stage-row.tone-wood > span,
.stage-row.tone-paint > b, .stage-row.tone-paint > span,
.stage-row.tone-out > b, .stage-row.tone-out > span,
.stage-row.tone-check > b, .stage-row.tone-check > span,
.stage-row.tone-ship > b, .stage-row.tone-ship > span { color: var(--ink); }
.stage-row.tone-bad > b, .stage-row.tone-bad > span { color: var(--ink); }
.stage-row > b { font-size: 20px; }
.stage-row.tone-wood > button, .stage-row.tone-paint > button,
.stage-row.tone-out > button, .stage-row.tone-check > button,
.stage-row.tone-ship > button { background: var(--ink); color: #fff; border-color: var(--ink); }
.stage-bar { display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: #eee; margin: -4px 0 12px; }
.stage-bar i { display: block; height: 100%; }
.stage-bar .tone-wood { background: var(--wood); } .stage-bar .tone-paint { background: var(--paint); }
.stage-bar .tone-out { background: var(--out); } .stage-bar .tone-check { background: var(--check); }
.stage-bar .tone-ship { background: var(--ship); } .stage-bar .tone-done { background: #9aa5b1; }

/* P0：标题栏小按钮、客户标签、一行阶段条、工序分段控件、全部按钮 */
.top .top-act { margin-left: auto; background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.7); border-radius: 6px; padding: 5px 10px; font-size: 13px; font-weight: 600; min-height: 44px; }
.cust-chips { display: flex; gap: 6px; overflow-x: auto; margin: 0 0 10px; padding-bottom: 2px; scrollbar-width: none; }
.cust-chip { flex: none; padding: 6px 12px; border: 1px solid var(--ink); border-radius: 16px; background: #fff; color: var(--ink); text-decoration: none; font-size: 13px; white-space: nowrap; }
.cust-chip b { font-weight: 600; opacity: .7; margin-left: 2px; }
.cust-chip.on { background: var(--hi); border-color: var(--ink); color: var(--on-hi); }
.sstrip { display: flex; gap: 4px; margin: 0 0 6px; overflow-x: auto; padding: 2px; }
.sstrip-cell { flex: 1 0 48px; min-width: 48px; white-space: nowrap; text-align: center; text-decoration: none; color: var(--ink); background: #fff; border: 1px solid var(--ink); border-top: 4px solid var(--ink); border-radius: 6px; padding: 4px 0; font-size: 13px; line-height: 1.3; overflow: hidden; }
.sstrip-cell b { display: block; font-size: 17px; }
.sstrip-cell i { font-style: normal; color: var(--ink); font-weight: 700; margin-left: 1px; }
.sstrip-cell.tone-wood, .sstrip-cell.tone-paint, .sstrip-cell.tone-out,
.sstrip-cell.tone-check, .sstrip-cell.tone-done { border-top-color: var(--ink); }
.sstrip-cell.tone-wood b, .sstrip-cell.tone-paint b, .sstrip-cell.tone-out b,
.sstrip-cell.tone-check b, .sstrip-cell.tone-done b { color: var(--ink); }
.sstrip-cell.hot { outline: 2px solid var(--ink); outline-offset: -1px; }
.sstrip-cell.on, .sstrip-tag.on { background: var(--hi); color: var(--on-hi); box-shadow: none; }
.sstrip-tags { display: flex; gap: 6px; align-items: center; margin: 0 0 10px; font-size: 13px; flex-wrap: wrap; }
.sstrip-unit { color: #777; margin-right: auto; }
.sstrip-tag { text-decoration: none; color: var(--ink); border: 1px solid var(--ink); background: #fff; border-radius: 14px; padding: 3px 9px; white-space: nowrap; }
.sstrip-tag b { font-size: 15px; }
.sstrip-tag.tone-late b { color: var(--late); } .sstrip-tag.tone-soon b { color: var(--ink); }
.stage-row.focus { outline: 3px solid var(--navy); outline-offset: -3px; }
.detail-report { width: 100%; margin: 8px 0 4px; }
.req { color: var(--late); }
#inspectionReasonBox label { color: var(--late); }
.pseg { display: flex; gap: 0; border: 1px solid var(--navy); border-radius: 8px; overflow: hidden; margin: 0 0 10px; }
.pseg-item { flex: 1 1 0; background: #fff; border: 0; border-left: 1px solid var(--line); padding: 8px 2px; font-size: 15px; font-weight: 600; color: var(--navy); line-height: 1.2; }
.pseg-item:first-child { border-left: 0; }
.pseg-item small { display: block; font-size: var(--fs-caption); font-weight: 400; opacity: .75; }
.pseg-item.on { background: var(--navy); color: #fff; }
.pseg-item.off { flex: .6 1 0; background: #EEEDE8; color: #9A9A94; font-size: var(--fs-caption); }
.qtybox-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.qtybox-head .qtybox-label { margin-bottom: 0; }
.qty-all { border: 1px solid var(--navy); background: #fff; color: var(--navy); border-radius: 6px; padding: 4px 10px; font-size: 13px; font-weight: 600; }
.sstrip.filtering .sstrip-cell.hot:not(.on) { outline: 1px dashed rgba(27, 42, 74, .45); }
#lots { scroll-margin-top: calc(84px + env(safe-area-inset-top, 0px)); }
.detail-report-secondary { background: transparent; color: var(--navy); border: 1.5px solid var(--navy); }
.detail-report-note { margin: 2px 0 10px; font-size: 13px; color: #6b6b66; text-align: center; }

/* ===== 工人大卡片报数 + 进度表 ===== */
.work-screen .wtabs { position: sticky; top: calc(var(--top-bar) + env(safe-area-inset-top, 0px)); z-index: 5; display: grid; grid-template-columns: repeat(var(--work-tabs, 6), minmax(44px, 1fr)); gap: 4px; padding: 6px 8px; background: var(--ink); overflow-x: auto; }
.wtab { min-height: 60px; border: 0; border-radius: 6px; background: var(--ink-2); color: #fff; font-size: 17px; font-weight: 800; line-height: 1.15; padding: 4px 2px; }
.wtab small { display: block; font-size: 13px; font-weight: 600; opacity: .8; margin-top: 2px; }
.wtab.on { background: var(--hi); color: #111; }
.work-body { padding: 10px 10px calc(24px + var(--tabbar) + var(--safe-bottom)); }
.wcards { display: grid; gap: 10px; min-width: 0; }
.wcard { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; min-height: 112px; padding: 14px; border: var(--bw) solid var(--ink); border-radius: 8px; background: var(--white); text-align: left; color: var(--on-hi); }
.wcard.is-late { border-color: var(--late); background: var(--late-bg); }
.wcard.is-soon { border-color: var(--soon); }
.wcard-main { flex: 1; min-width: 0; }
.wcard-style { min-width: 0; font-size: 30px; font-weight: 800; line-height: 1.1; overflow-wrap: anywhere; }
.wcard-cust { font-size: 17px; color: #333; margin-top: 4px; }
.wcard-color { display: flex; align-items: center; gap: 6px; font-size: 17px; font-weight: 700; margin-top: 6px; }
.wcard-orders { margin-top: 5px; color: #555; font-size: 14px; font-weight: 700; }
.wcard-due-text { margin-left: 8px; color: #8A5A12; }
.wcard-color i, .pg small i { display: inline-block; width: 22px; height: 22px; border: 2px solid #333; border-radius: 4px; vertical-align: middle; }
.pg small i { width: 12px; height: 12px; border-width: 1px; margin: 0 2px; }
.wcard-num { flex: 0 0 auto; max-width: 42%; padding-top: 24px; padding-bottom: 28px; text-align: right; }
.wcard-num strong { display: block; max-width: 100%; font-size: clamp(34px, 12vw, 52px); font-weight: 800; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wcard-num span { font-size: 15px; color: var(--secondary); white-space: nowrap; }
.wcard-due { position: absolute; top: -1px; right: -1px; padding: 3px 10px; border-radius: 0 6px 0 8px; background: var(--soon); color: #fff; font-size: 15px; font-weight: 800; }
.wcard.is-late .wcard-due { background: var(--late); }
.wcard.is-late .wcard-num strong { color: var(--late); }
.wempty { padding: 48px 10px; text-align: center; font-size: 20px; color: #555; }
.wsheet-mask { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 40; }
.wsheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 41; width: 100%; max-height: min(92vh, 100dvh); display: flex; flex-direction: column; padding: 14px 14px 0; background: var(--white); border-radius: 12px 12px 0 0; }
@media (min-width: 1024px) {
  .wsheet { left: 50%; right: auto; bottom: 24px; width: min(720px, calc(100vw - 48px)); transform: translateX(-50%); max-height: calc(100dvh - 48px); border: var(--bw) solid var(--ink); border-radius: 12px; }
}
.wsheet-scroll { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding-bottom: 10px; }
.wsheet-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.wsheet-head > div { min-width: 0; overflow-wrap: anywhere; }
.wsheet-head b { display: block; font-size: 28px; font-weight: 800; }
.wsheet-head span { font-size: 17px; color: #333; }
.wsheet-x { width: 56px; height: 56px; border: 0; background: #EEE; border-radius: 8px; font-size: 32px; }
.wsheet-remain { margin: 8px 0; font-size: 20px; }
.wsheet-remain strong { font-size: 26px; }
.wsheet-label { font-size: 17px; font-weight: 700; }
.wsheet-input { width: 100%; height: 76px; margin-top: 4px; border: 3px solid var(--ink); border-radius: 8px; font-size: 48px; font-weight: 800; text-align: center; }
.wsheet-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; }
.wbtn { min-height: 64px; border: var(--bw) solid var(--ink); border-radius: 8px; background: #fff; font-size: 24px; font-weight: 800; color: #111; }
.wbtn-all { background: var(--ink); color: #fff; font-size: 20px; }
.wbtn-clear { font-size: 18px; font-weight: 700; color: #555; border-color: #999; }
.wsheet-pallet { display: grid; grid-template-columns: 2fr 1fr; gap: 8px; margin-bottom: 10px; }
.wsheet-pallet input { min-width: 0; min-height: 56px; border: var(--bw) solid var(--ink); border-radius: 8px; font-size: 17px; padding: 0 10px; }
.wsheet .cam { min-height: 72px; }
.wsheet-foot { flex: none; padding: 10px 0 calc(12px + var(--safe-bottom)); background: var(--white); border-top: 1px solid var(--line); }
.wconfirm { width: 100%; min-height: 68px; margin-top: 0; border: 0; border-radius: 8px; background: var(--success); color: #fff; font-size: 26px; font-weight: 800; }
.wsheet-tip { margin-top: 8px; font-size: 15px; color: #444; text-align: center; }
.pg-sum { display: flex; gap: 14px; font-size: 17px; margin: 2px 2px 8px; }
.pg-sum b { font-size: 20px; }
.pg-sum .bad { color: var(--late); font-weight: 700; }
.pg-wrap { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
.pg { width: 100%; min-width: 720px; border-collapse: collapse; background: var(--white); font-size: 15px; }
.pg th, .pg td { border: 1px solid #C8C2B6; padding: 5px 4px; }
.pg thead th { background: var(--ink); color: #fff; font-size: 13px; }
.pg td { text-align: right; font-weight: 700; }
.pg td.zero { color: var(--secondary); font-weight: 400; }
.pg td.open { color: var(--late); }
.pg tbody th { text-align: left; font-weight: 400; }
.pg tbody th b { display: block; font-size: 17px; }
.pg tbody th small { font-size: var(--fs-caption); color: var(--secondary); }
.pg tbody th em { display: block; font-style: normal; font-size: var(--fs-caption); font-weight: 700; color: var(--soon); }
.pg tr.late { background: var(--late-bg); }
.pg tr.late th em { color: var(--late); }
.pg tfoot th, .pg tfoot td { background: var(--fill); font-weight: 700; border-top: var(--bw) solid var(--ink); }
.pg-note { font-size: 13px; color: #555; margin-top: 6px; }

/* ===== 复审 r2 ===== */
.wcard { padding-bottom: 34px; }
.wcard-main { padding-right: 4px; }
.wcard-style { font-size: 26px; line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 14px; }
.wcard-due { background: var(--soon); font-size: 17px; padding: 4px 10px; }
.wcard-go { position: absolute; right: 12px; bottom: 8px; font-size: 17px; font-weight: 800; color: var(--ink); }
.wcard-color i, .pg small i { display: none; }
.wcard-color .sw { display: inline-block; width: 22px; height: 22px; border: 2px solid #333; border-radius: 4px; }
.pg small .sw { display: inline-block; width: 13px; height: 13px; border: 1px solid #333; border-radius: 3px; margin: 0 2px; vertical-align: middle; }
.wsheet-inwrap { position: relative; }
.wsheet-inwrap .wsheet-input { padding: 0 56px; }
.wsheet-clr { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); margin-top: 2px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: #DDD; color: #333; font-size: 24px; line-height: 1; }
.wsheet-btns { grid-template-columns: repeat(4, 1fr); }
.wbtn { font-size: 22px; }
.wbtn-minus { background: #F3EFE6; }
.wbtn-all { display: block; width: 100%; margin-bottom: 10px; }
.wcam { border: var(--bw) solid var(--ink) !important; background: #F7F5F0; }
.wcam-ico { font-size: 30px; line-height: 1; }
.wcam-req { font-style: normal; font-size: 14px; background: #C62828; color: #fff; border-radius: 4px; padding: 1px 6px; margin-left: 4px; vertical-align: middle; }
.wcam.has-photo { padding: 0; }
.wcam.has-photo img { height: 120px; }
.wcam.has-photo b { padding: 6px; font-size: 16px; }
.wprev { margin-top: 10px; padding: 10px 12px; border: 2px solid var(--ink); border-radius: 8px; background: var(--fill); font-size: 16px; }
.wprev-title { font-weight: 800; margin-bottom: 4px; }
.wprev-row { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; border-top: 1px dashed var(--line); }
.wprev-row small { margin-left: 8px; color: #555; font-size: 14px; }
.wprev-row b { font-size: 20px; }
.wprev-empty { color: #555; text-align: center; }
.wconfirm:disabled { background: #B9B9B9; color: #fff; }
.wrework { display: block; width: 100%; min-height: 52px; margin-top: 8px; border: 2px solid #C62828; border-radius: 8px; background: #fff; color: #C62828; font-size: 19px; font-weight: 800; }
.wnotice { position: sticky; top: 72px; z-index: 6; display: flex; align-items: flex-start; gap: 8px; margin: 8px 10px 0; padding: 10px 12px; border-radius: 8px; background: var(--ink); color: #fff; font-size: 15px; }
.wnotice div { flex: 1; display: flex; flex-wrap: wrap; gap: 4px 12px; }
.wnotice b { width: 100%; font-size: 18px; }
.wnotice-x { border: 0; background: transparent; color: #fff; font-size: 24px; }
.pg-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 6px; }
.pg-kpi { border: 3px solid transparent; border-radius: 8px; padding: 8px 4px; color: #fff; font-size: 15px; font-weight: 700; display: flex; flex-direction: column; align-items: center; line-height: 1.15; }
.pg-kpi b { font-size: 30px; font-weight: 700; }
.pg-kpi.k-late { background: var(--late); }
.pg-kpi.k-soon { background: var(--soon); }
.pg-kpi.k-open { background: var(--ink); }
.pg-kpi.on { border-color: var(--hi); box-shadow: 0 0 0 2px #111; }
.pg-sub { font-size: 13px; color: #555; margin: 0 2px 8px; }
.pg { font-size: 15px; }
.pg thead th { font-size: 14px; }
.pg tbody th small, .pg tbody th em { font-size: 13px; }
.pg tr.soon th em { color: #B35A00; }
.pg-more { display: block; width: 100%; min-height: 48px; margin-top: 8px; border: var(--bw) solid var(--ink); border-radius: 8px; background: #fff; font-size: 17px; font-weight: 800; }

/* ===== r3 撤销 / 我今天的报工 ===== */
.wnotice-undo { align-self: center; min-height: 44px; padding: 0 14px; border: 2px solid #fff; border-radius: 8px; background: transparent; color: #fff; font-size: 17px; font-weight: 800; }
.wtoday { display: block; margin: 8px 10px 0; width: calc(100% - 20px); min-height: 44px; border: var(--bw) solid var(--ink); border-radius: 8px; background: #fff; color: var(--ink); font-size: 17px; font-weight: 800; text-align: right; padding: 0 14px; }
.umodal { position: fixed; left: 12px; right: 12px; top: 50%; transform: translateY(-50%); z-index: 41; padding: 14px; background: #fff; border-radius: 12px; }
.umodal-head { display: flex; justify-content: space-between; align-items: center; }
.umodal-head b { font-size: 24px; font-weight: 800; }
.umodal-what { margin: 6px 0 10px; font-size: 17px; color: #333; }
.ureasons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 6px 0 8px; }
.ureason { min-height: 52px; border: var(--bw) solid var(--ink); border-radius: 8px; background: #fff; font-size: 18px; font-weight: 800; color: #111; }
.ureason.on { background: var(--ink); color: #fff; }
.ureason-input { width: 100%; min-height: 64px; border: 2px solid #999; border-radius: 8px; font-size: 17px; padding: 8px; box-sizing: border-box; }
.uerr { color: #C62828; font-size: 15px; font-weight: 700; margin-top: 6px; }
.uconfirm { background: #C62828; }
.tday { position: relative; margin-bottom: 10px; padding: 12px; border: var(--bw) solid var(--ink); border-radius: 8px; background: #fff; }
.tday-top { display: flex; justify-content: space-between; align-items: baseline; padding-right: 0; }
.tday-top b { font-size: 22px; font-weight: 800; }
.tday-top span { font-size: 15px; color: #555; }
.tday-parts { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 6px 0; font-size: 16px; color: #333; padding-right: 84px; }
.tday-undo { position: absolute; right: 12px; bottom: 10px; min-height: 44px; padding: 0 16px; border: 2px solid #C62828; border-radius: 8px; background: #fff; color: #C62828; font-size: 17px; font-weight: 800; }
.tday.is-void { opacity: .6; border-style: dashed; }
.tday.is-void b { text-decoration: line-through; }
.tday-void { font-size: 15px; color: #C62828; font-weight: 700; }

/* Persistent draft/result status uses the existing restrained workshop palette. */
.reliability-panel { margin: 12px 0; padding: 12px; border: 1px solid var(--line, #cbd5cd); background: var(--card, #fff); color: var(--ink, #172820); overflow-wrap: anywhere; }
.reliability-panel p { margin: 6px 0; font-size: 14px; line-height: 1.5; }
.reliability-panel .btn { min-height: 44px; margin: 6px 8px 0 0; }
.reliability-error { color: #a52d25; }
.draft-resume { display: block; padding: 10px 0; color: inherit; text-decoration: underline; min-height: 44px; box-sizing: border-box; }
.saved-receipt { margin-top: 8px; }

/* Process Todos Overview */
.process-todos-section { margin: 20px 0; }
.process-todos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-top: 12px; }
.process-todo-card { display: flex; flex-direction: column; align-items: center; padding: 20px 12px; background: var(--card); border: 2px solid var(--line); border-radius: 12px; text-decoration: none; transition: all 0.2s; position: relative; }
.process-todo-card:hover { border-color: var(--ink); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(27,42,74,0.08); }
.process-todo-card.is-max { border-color: var(--accent); background: linear-gradient(135deg, #FFFBF0 0%, #FFF9E6 100%); }
.process-todo-card.is-max:hover { border-color: var(--accent-press); }
.process-name { font-size: 15px; color: var(--secondary); font-weight: 600; margin-bottom: 8px; }
.process-qty { font-size: 36px; font-weight: 800; color: var(--ink); line-height: 1; margin: 4px 0; }
.process-todo-card small { font-size: 13px; color: var(--tertiary); margin-top: 4px; }
.hot-badge { position: absolute; top: 8px; right: 8px; background: var(--accent); color: var(--on-hi); font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 4px; font-style: normal; }
.tone-wood .process-qty { color: var(--wood); }
.tone-paint .process-qty { color: var(--paint); }
.tone-check .process-qty { color: var(--check); }
.tone-ship .process-qty { color: var(--ship); }

/* My Todos page */
.todo-progress { margin-top: 12px; padding: 12px; background: var(--fill); border-radius: 6px; display: flex; justify-content: space-between; align-items: center; }
.todo-label { font-size: 15px; color: var(--secondary); font-weight: 500; }
.todo-qty { text-align: right; }
.todo-qty strong { font-size: 28px; font-weight: 800; color: var(--ink); display: block; line-height: 1; }
.todo-qty .tiny { font-size: 13px; color: var(--tertiary); margin-top: 4px; display: block; }
.order-badge { padding: 4px 8px; border-radius: 4px; font-size: 13px; font-weight: 600; }
.order-badge.overdue { background: var(--late-bg); color: var(--late); }
.order-badge.due-soon { background: var(--fill); color: var(--soon); }
.is-overdue { border-left: 4px solid var(--late) !important; }
.is-due-soon { border-left: 4px solid var(--soon) !important; }