* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; background: #f4f5f7; color: #222; font-size: 14px; }
header { display: flex; align-items: center; gap: 16px; background: #14532d; color: #fff; padding: 8px 16px; flex-wrap: wrap; }
.brand { font-weight: 700; font-size: 16px; }
nav { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
nav button { background: transparent; border: 0; color: #cfd8e3; padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 14px; }
nav button.active { background: #fff; color: #14532d; font-weight: 600; }
.userbox { display: flex; gap: 8px; align-items: center; }
.userbox button { background: #2c4f7c; color: #fff; border: 0; padding: 6px 10px; border-radius: 6px; cursor: pointer; }
.badge { background: #d92d20; color: #fff; border-radius: 10px; padding: 0 7px; font-size: 12px; }
main { padding: 16px; max-width: 1280px; margin: 0 auto; }
.view { display: none; }
.view.active { display: block; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 16px; }
.card { background: #fff; border-radius: 10px; padding: 14px; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.card .num { font-size: 22px; font-weight: 700; margin-top: 4px; }
.card .lbl { color: #667; }
table { border-collapse: collapse; width: 100%; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
th, td { border-bottom: 1px solid #eee; padding: 7px 9px; text-align: left; vertical-align: top; }
th { background: #f0f2f5; font-weight: 600; }
tr.low td { background: #fff4f2; }
.short { color: #d92d20; font-weight: 700; }
.ok { color: #12805c; }
button.btn { background: #166534; color: #fff; border: 0; padding: 6px 12px; border-radius: 6px; cursor: pointer; }
button.btn.secondary { background: #e8ecf1; color: #234; }
button.btn.danger { background: #d92d20; }
button.btn.small { padding: 3px 8px; font-size: 12px; }
.toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 12px 0; }
input, select, textarea { padding: 6px 8px; border: 1px solid #c9d1d9; border-radius: 6px; font-size: 14px; }
textarea { width: 100%; min-height: 110px; }
.error { color: #d92d20; }
.login-wrap { display: flex; justify-content: center; align-items: center; min-height: 100vh; }
.login-card { background: #fff; padding: 28px; border-radius: 12px; width: 320px; box-shadow: 0 4px 24px rgba(0,0,0,.12); display: flex; flex-direction: column; gap: 12px; }
.login-card label { display: flex; flex-direction: column; gap: 4px; }
.login-card button { background: #166534; color: #fff; border: 0; padding: 9px; border-radius: 6px; cursor: pointer; font-size: 15px; }
.modal-mask { position: fixed; inset: 0; height: 100dvh; background: rgba(0,0,0,.45); display: flex; justify-content: center; align-items: flex-start; padding: 30px 12px; z-index: 70; overflow: auto; }
.modal { background: #fff; border-radius: 12px; padding: 18px; width: 760px; max-width: 96vw; position: relative; }
.modal h3 { margin-top: 0; padding-right: 38px; }
.modal-x { position: absolute; top: 8px; right: 8px; width: 38px; height: 38px; border: none; background: transparent; color: #888; font-size: 24px; line-height: 1; cursor: pointer; z-index: 5; border-radius: 8px; }
.modal-x:active { background: #f0f0f0; color: #333; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-bottom: 10px; }
.form-grid label { display: flex; flex-direction: column; gap: 4px; }
.subtabs { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
/* Structured list cards (orders / work orders / repairs): a head row with
   title + badges, a wrapping meta row of label/value pairs, and an actions
   row. Replaces the old one-line text run with float:right buttons, which
   overflowed the card whenever the summary text filled the line. */
.ic-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-bottom: 4px; }
.ic-title { font-size: 15px; font-weight: 700; }
.ic-qty { font-size: 16px; font-weight: 700; color: #1a56db; }
.ic-meta { display: flex; flex-wrap: wrap; gap: 3px 14px; color: #667; font-size: 13px; margin-top: 2px; }
.ic-meta b { color: #223; font-weight: 600; }
.ic-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.short-rows { margin-top: 8px; }
.short-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 6px 0; border-top: 1px solid #eef0f2; }
.short-row .sr-name { min-width: 0; }
.short-row .sr-nums { white-space: nowrap; }
.warn { color: #b54708; font-weight: 600; }
button { -webkit-tap-highlight-color: transparent; }
button:active { opacity: .75; }
.subtabs button { background: #e8ecf1; border: 0; padding: 6px 12px; border-radius: 6px; cursor: pointer; }
.subtabs button.active { background: #166534; color: #fff; }
.group-head td { background: #eef3f9; font-weight: 700; }
.muted { color: #626d78; font-size: 12px; }
#print-area { display: none; }
@media print {
  /* Only #print-area may lay out. The old visibility trick hid the app
     visually but kept its full height in the layout, so Chrome paginated
     the (invisible) app into dozens of blank sheets — 10 QR labels on
     100x180mm paper came out as 26 pages (found live, 2026-11-11). */
  body > *:not(#print-area) { display: none !important; }
  #print-area { display: block; position: static; }
}
.label-sheet { display: flex; flex-wrap: wrap; gap: 2mm; }
.label { border: 1px solid #999; padding: 1.5mm 2mm; overflow: hidden; page-break-inside: avoid; display: flex; flex-direction: column; justify-content: space-between; }
.label .code { font-weight: 700; font-size: 11pt; }
.label .name { font-size: 8pt; }
.label .spec { font-size: 7pt; color: #333; }
.label svg { width: 100%; height: 12mm; }
.label .bc-text { font-size: 7pt; text-align: center; letter-spacing: 1px; }
/* FBA label: the user's BarTender layout at its native 57.5x40mm size. */
/* ㉞ 70×40 label stock: FBA layout keeps 57.5×40 and is centred */
.fba-label { width: 70mm; height: 40mm; overflow: hidden; page-break-after: always; color: #000; font-family: 'Arial Unicode MS', Arial, 'Microsoft YaHei', sans-serif; }
.fba-inner { position: relative; width: 57.5mm; height: 40mm; margin: 0 auto; }
.fba-top { position: absolute; top: 1.1mm; left: 2.2mm; right: 2.2mm; display: flex; justify-content: space-between; white-space: nowrap; font-weight: 700; }
.fba-made { font-weight: 700; }
.fba-barcode { position: absolute; top: 6.1mm; left: 50%; transform: translateX(-50%); width: 36.5mm; height: 21.3mm; }
.fba-barcode svg { width: 100%; height: 100%; display: block; }
.fba-code { position: absolute; top: 27.3mm; left: 0; width: 100%; text-align: center; font-weight: 700; font-size: 11.5pt; }
.fba-title { position: absolute; top: 31.6mm; left: 5mm; right: 3mm; font-size: 8pt; font-weight: 700; line-height: 1.3; }
/* Fill mode (owner's real-paper verdict, 2026-11-12: the native 57.5mm
   content looked too small on the 70x40 stock): content widens to 66mm,
   every element scales up, still centred with ~2mm side margins. */
.fba-label.fill .fba-inner { width: 66mm; }
.fba-label.fill .fba-top { top: 1.2mm; left: 1.5mm; right: 1.5mm; }
.fba-label.fill .fba-barcode { top: 5.9mm; width: 42mm; height: 22.3mm; }
.fba-label.fill .fba-code { top: 28.4mm; font-size: 13pt; }
.fba-label.fill .fba-title { top: 32.7mm; left: 3mm; right: 2mm; font-size: 8.5pt; line-height: 1.2; }
/* Phones: compress the header (brand + nav + user box) so the wrapped
   navigation rows take much less vertical space. Desktop is untouched. */
#mobile-tabs { display: none; }
@media (max-width: 640px) {
  /* Bottom tab bar: primary navigation lives under the thumb on phones. */
  #mobile-tabs {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: #0c2d1b; padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    gap: 2px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  #mobile-tabs button {
    flex: 1 0 auto; background: transparent; color: #cfdce8; border: 0;
    padding: 9px 10px; font-size: 13.5px; border-radius: 8px; min-height: 42px;
  }
  #mobile-tabs button.active { background: #2c5f8a; color: #fff; font-weight: 600; }
  main { padding-bottom: 76px; }
  /* On phones the header keeps only brand + user actions; page navigation
     lives in the bottom thumb bar (duplicating it up top ate half the
     first screen now that there are ten tabs). */
  header { gap: 6px 10px; padding: 8px 10px; flex-wrap: nowrap; }
  header nav { display: none; }
  .brand { font-size: 14px; white-space: nowrap; }
  .userbox { gap: 6px; font-size: 12px; margin-left: auto; }
  .userbox button { padding: 6px 9px; font-size: 12.5px; min-height: 34px; }
  #mobile-tabs { scrollbar-width: none; box-shadow: 0 -2px 10px rgba(0,0,0,.25); }
  #mobile-tabs::-webkit-scrollbar { display: none; }
  #mobile-tabs button { white-space: nowrap; }
  /* Subtabs become one scrollable chip row instead of wrapping to 3 rows. */
  .subtabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; }
  .subtabs::-webkit-scrollbar { display: none; }
  .subtabs button { flex: 0 0 auto; padding: 8px 13px; min-height: 38px; }
  /* Modal action bar sticks to the bottom of the sheet: 保存/取消 are
     always reachable on long forms without scrolling to the very end. */
  .modal { width: 100%; border-radius: 10px; }
  .form-actions {
    position: sticky; bottom: -14px; background: #fff; z-index: 5;
    padding: 10px 0 2px; margin-top: 10px; border-top: 1px solid #e5e9ee;
  }
  .form-actions .btn { flex: 1; min-height: 44px; font-size: 15px; }
  /* Toolbar fields share rows evenly instead of overflowing. */
  .toolbar > input, .toolbar > select { flex: 1 1 140px; min-height: 40px; }
  .toolbar > .btn { flex: 0 0 auto; }
  /* Wide tables: keep the first column (usually the name) in view. */
  .view table th:first-child, .view table td:first-child {
    position: sticky; left: 0; background: #fff; z-index: 2;
  }
  .view table th:first-child { background: #f0f2f5; }
  .view table tr.group-head td:first-child { background: #eef3f9; }
  .view table tr.low td:first-child { background: #fff4f2; }
  /* Card action buttons: full-width rows of big tap targets. */
  .ic-actions .btn { flex: 1 1 auto; min-height: 38px; }
  .card { padding: 11px; }
  .login-card { width: min(320px, 92vw); }
  td input[type="number"], td select { min-height: 38px; }
  main { padding: 10px; padding-bottom: 76px; }
  th, td { padding: 5px 6px; }
  /* Wide tables scroll sideways instead of crushing columns. */
  .view table, .modal table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* 16px inputs stop iOS auto-zoom on focus; bigger tap targets. */
  input, select, textarea { font-size: 16px; }
  .btn { min-height: 40px; padding: 8px 14px; }
  .btn.small { min-height: 34px; }
  .toolbar { flex-wrap: wrap; gap: 8px; }
  .form-grid { grid-template-columns: 1fr; }
  .modal-mask { padding: 10px 6px; }
  .modal { padding: 14px; }
  .cards { grid-template-columns: 1fr 1fr; }
}
.badge-ok { background: #e3f4e5; color: #1c6b2a; border-radius: 6px; padding: 1px 8px; font-size: 12px; font-weight: 600; }
.badge-bad { background: #fde8e8; color: #b3261e; border-radius: 6px; padding: 1px 8px; font-size: 12px; font-weight: 600; }
.badge-mut { background: #eceff1; color: #546e7a; border-radius: 6px; padding: 1px 8px; font-size: 12px; font-weight: 600; }

/* printed documents （送货单/采购单） */
.doc { color: #000; font-size: 14px; }
.doc h2 { text-align: center; margin: 0 0 14px; }
.doc table { width: 100%; border-collapse: collapse; margin-bottom: 10px; }
.doc-meta td { padding: 3px 6px; }
.doc-lines th, .doc-lines td { border: 1px solid #333; padding: 5px 8px; text-align: left; }
.doc-sign { display: flex; justify-content: space-between; margin-top: 28px; }
#stack-root .modal-mask { z-index: 80; }

.doc-contact { color: #333; font-size: 12.5px; margin: 4px 0; }

/* UX batch 2026-11-07: loading bar, toasts, busy buttons */
#busy-bar { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 9999; opacity: 0; transition: opacity .25s; pointer-events: none;
  background: linear-gradient(90deg, #166534, #22c55e, #166534); background-size: 200% 100%; animation: busy-slide 1.1s linear infinite; }
@keyframes busy-slide { from { background-position: 0 0; } to { background-position: -200% 0; } }
#toast-root { position: fixed; left: 50%; transform: translateX(-50%); bottom: 88px; z-index: 10000; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; width: max-content; max-width: 92vw; }
@media (min-width: 861px) { #toast-root { bottom: 28px; } }
.toast { background: #14532d; color: #fff; padding: 10px 18px; border-radius: 999px; font-size: 15px; box-shadow: 0 4px 18px rgba(0,0,0,.25);
  opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .3s; max-width: 92vw; text-align: center; }
.toast.err { background: #b91c1c; }
.toast.show { opacity: 1; transform: translateY(0); }
.btn-busy { opacity: .55; pointer-events: none; }

/* Inventory renders ~650 products in grouped tables; content-visibility
   lets the browser skip layout/paint for off-screen groups (progressive
   enhancement — ignored where unsupported). */
.inv-group { content-visibility: auto; contain-intrinsic-size: auto 600px; }

.view { position: relative; }
.combo { position: relative; }
.combo-list { position: absolute; z-index: 120; background: #fff; border: 1px solid #c9d1d9; border-radius: 8px; width: min(86vw, 460px); max-height: 300px; overflow-y: auto; box-shadow: 0 10px 26px rgba(0,0,0,.18); }
.combo-it { padding: 11px 12px; border-bottom: 1px solid #eef1f4; cursor: pointer; display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.combo-it > span:first-child { min-width: 0; }
.combo-it > span:last-child { white-space: nowrap; flex-shrink: 0; }
.combo-it:last-child { border-bottom: 0; }
.combo-it:active { background: #e9f5ec; }
.ic-actions:not(.expanded) .ord-extra { display: none !important; }
/* Reason picker (round-4 review): one tap per defective/scrapped unit. */
.reason-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.reason-chips .chip { border: 1px solid #c9d3cc; background: #fff; color: #263238; border-radius: 16px; padding: 7px 12px; font-size: 14px; cursor: pointer; min-height: 36px; }
.reason-chips .chip.on { background: #fde8e8; border-color: #e3a19b; color: #b3261e; }
.reason-chips .chip b { margin-left: 2px; }
.reason-picked { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-top: 8px; }
.reason-picked .rp-row { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; }
.reason-picked .rp-qty { width: 64px; }
/* ㉘-2 完工弹窗模式切换 + 摘要行；㉗ 有码待返工行 */
.mode-tabs { display: flex; gap: 8px; margin: 4px 0 10px; }
.mode-tab { flex: 1; min-height: 44px; border: 1px solid #c9d3cc; background: #fff; border-radius: 10px; font-size: 15px; font-weight: 600; color: #263238; cursor: pointer; }
.mode-tab.on { background: #166534; border-color: #166534; color: #fff; }
.mode-tab:disabled { opacity: .45; cursor: not-allowed; }
.cf-summary { position: sticky; bottom: 0; background: #f1f8f3; border: 1px solid #cfe5d6; border-radius: 8px; padding: 8px 10px; margin: 12px 0 8px; font-size: 14px; font-weight: 600; color: #14532d; }
.coded-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid #eef1ef; font-size: 14px; flex-wrap: wrap; }
.reason-chips .chip.ok, .coded-row .chip.ok { background: #e3f4e5; border-color: #8cc79a; color: #1c6b2a; }
.coded-row .chip { border: 1px solid #c9d3cc; background: #fff; color: #263238; border-radius: 16px; padding: 6px 12px; font-size: 14px; cursor: pointer; min-height: 34px; }
.coded-row .chip.on { background: #fde8e8; border-color: #e3a19b; color: #b3261e; }
.wo-more { display: inline-block; }
.wo-more > summary { list-style: none; display: inline-block; cursor: pointer; padding: 4px 12px; border: 1px solid #c9d3cc; border-radius: 6px; font-size: 13px; background: #fff; }
.wo-more > summary::-webkit-details-marker { display: none; }
.wo-more[open] > summary { background: #eceff1; }
.wo-more-body { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.qc-pass { padding: 7px 2px; font-weight: 700; font-size: 16px; }
/* ㉞ 橙联小标签 70×40 */
.oc-label { width: 70mm; height: 40mm; overflow: hidden; page-break-after: always; color: #000; font-family: Arial, Helvetica, sans-serif;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; box-sizing: border-box; padding: 1.5mm 3mm; }
.oc-line { font-weight: 700; line-height: 1.15; white-space: nowrap; }
.oc-barcode { width: 58mm; height: 12mm; margin: 0.8mm 0 0.3mm; }
.oc-barcode svg { width: 100%; height: 100%; display: block; }
.oc-code { font-size: 9.5pt; font-weight: 700; line-height: 1.1; letter-spacing: 0.2px; }
.oc-tail { font-size: 13pt; }
.oc-origin { font-size: 9pt; font-weight: 700; line-height: 1.15; }
/* ㊶ 坏片去向卡片 */
.dp-card { border: 1px solid #eadfdc; background: #fffaf9; border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; }
/* ㊹ 本颜色 BOM 提示 */
.bom-note { border: 1px solid #f0d9a8; background: #fffaf0; border-radius: 8px; padding: 8px 10px; margin: 6px 0 10px; font-size: 14px; }
/* New-version banner (2026-11-11h): shown when the server runs newer code than this page. */
#update-banner { position: fixed; left: 50%; transform: translateX(-50%); top: calc(env(safe-area-inset-top, 0px) + 8px); z-index: 10001; max-width: 92vw;
  border: 0; border-radius: 999px; padding: 10px 18px; background: #166534; color: #fff; font-size: 14px; line-height: 1.4; box-shadow: 0 4px 14px rgba(0,0,0,.25); cursor: pointer; }
/* ㊽ 批量扫码 */
#cam-batch { margin: 8px 0; }
.batch-flash { border-radius: 10px; padding: 12px 10px; text-align: center; font-size: 26px; font-weight: 800; line-height: 1.2; }
.batch-flash.idle { background: #eef1ef; color: #4b5b52; font-size: 18px; font-weight: 600; }
.batch-flash.ok { background: #16a34a; color: #fff; }
.batch-flash.bad { background: #dc2626; color: #fff; }
.batch-flash.dup { background: #f59e0b; color: #fff; font-size: 20px; }
.batch-sub { font-size: 14px; font-weight: 600; margin-top: 4px; word-break: break-all; }
.batch-count { text-align: center; margin-top: 6px; font-size: 14px; }
/* (52) 扫码枪模式 */
.scan-mode { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; font-size: 14px; margin: -2px 0 6px; color: #4b5b52; }
.scan-mode label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.gun-in { width: 100%; box-sizing: border-box; font-size: 18px; padding: 10px 12px; border: 2px dashed #16a34a; border-radius: 10px; margin: 4px 0 8px; }
.gun-in:focus { outline: none; border-style: solid; background: #f3fbf5; }
/* (54) 待办任务 */
.task-card { margin-bottom: 14px; border-left: 4px solid #e2b13c; }
.task-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.task-count { display: inline-block; min-width: 22px; padding: 0 7px; border-radius: 11px; background: #dc2626; color: #fff; font-size: 14px; text-align: center; vertical-align: middle; }
.task-count.zero { background: #16a34a; }
.task-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 9px 0; border-bottom: 1px solid #eef1ef; flex-wrap: wrap; }
.task-main { flex: 1; min-width: 200px; }
.task-act { display: flex; gap: 6px; }
.task-lines { font-size: 13px; margin-top: 3px; color: #374151; }
.task-tag { display: inline-block; font-size: 12px; padding: 1px 7px; border-radius: 6px; color: #fff; }
.task-tag-short { background: #d97706; }
.task-tag-order { background: #2563eb; }
/* (55) 可点的缺货徽标 */
.badge-btn { border: 0; cursor: pointer; font: inherit; font-size: 12px; }
.badge-btn:active { opacity: .7; }

/* (56) 原因自定义输入 */
.rp-custom-row { display: flex; gap: 6px; margin-top: 8px; }
.rp-custom-row .rp-custom { flex: 1; min-width: 0; }
/* (56) 谷仓标签 70×40（外框沿用 .oc-label 的尺寸与旋转、整版设置） */
.oc-label.gc-label { display: block; padding: 0; }
.gc-inner { width: 100%; height: 100%; box-sizing: border-box; padding: 1.6mm 3mm 1.2mm; display: flex; flex-direction: column; font-family: Arial, Helvetica, sans-serif; color: #000; text-align: left; }
.gc-code { line-height: 1.05; white-space: nowrap; }
.gc-tail { font-weight: 700; font-size: 1.35em; }
.gc-barcode { height: 12mm; margin: 0.4mm 0 0.8mm; }
.gc-barcode svg { width: 100%; height: 100%; display: block; }
.gc-bottom { flex: 1; display: flex; justify-content: space-between; align-items: flex-start; gap: 2mm; min-height: 0; }
.gc-text { flex: 1; min-width: 0; }
.gc-sku { font-weight: 700; white-space: nowrap; line-height: 1.2; }
.gc-name { white-space: nowrap; line-height: 1.25; overflow: hidden; }
.gc-qr { width: 13mm; height: 13mm; flex: none; align-self: flex-end; }
.gc-qr svg { width: 100%; height: 100%; display: block; }
/* (58) 工作台 */
.wb { margin-bottom: 14px; }
.wb-title { font-weight: 700; font-size: 15px; margin: 0 2px 6px; color: #1f3d2c; }
.wb-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.wb-tile { text-align: left; border: 1px solid #e3e8e5; border-left-width: 5px; background: #fff; border-radius: 10px; padding: 10px 12px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; font: inherit; color: inherit; min-height: 78px; }
.wb-tile:active { transform: scale(.985); }
.wb-val { font-size: 24px; font-weight: 800; line-height: 1.1; }
.wb-lbl { font-size: 14px; font-weight: 600; }
.wb-hint { font-size: 12px; color: #6b7a72; line-height: 1.3; }
.wb-todo { border-left-color: #dc2626; } .wb-todo .wb-val { color: #dc2626; }
.wb-warn { border-left-color: #d97706; } .wb-warn .wb-val { color: #b45309; }
.wb-ok { border-left-color: #16a34a; } .wb-ok .wb-val { color: #15803d; }
.wb-info { border-left-color: #2563eb; }
.wb-quick { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.wb-quick .btn { flex: 1 1 140px; min-height: 46px; font-size: 16px; }
@media (max-width: 480px) { .wb-tiles { grid-template-columns: 1fr 1fr; } }
/* (59) 标红计件行 */
.pc-flag-row td { background: #fff1f0; }
/* (59) 筛选标签、工作台重试与紧凑条 */
.filter-chip { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: #eef6ff; border: 1px solid #bfdbfe; border-radius: 8px; padding: 6px 10px; margin: 6px 0 10px; font-size: 14px; }
.wb-retry { width: 100%; padding: 12px; border: 1px dashed #d97706; background: #fffbeb; color: #92400e; border-radius: 10px; font: inherit; cursor: pointer; }
.wb-compact summary { cursor: pointer; padding: 8px 10px; background: #fff; border: 1px solid #e3e8e5; border-radius: 10px; font-size: 14px; list-style: none; }
.wb-compact[open] summary { margin-bottom: 8px; }

/* (60) batch 2 */
.subtabs-more { margin-top: -6px; padding: 8px; background: #f4f6f8; border-radius: 8px; }
.subtabs-more[hidden] { display: none; }
.subtabs .sub-more { background: #fff; border: 1px dashed #9aa8b5; color: #455a64; }
.subtabs-line button { font-size: 15px; font-weight: 600; }
.q-wrap { position: relative; display: inline-flex; flex: 1 1 160px; max-width: 260px; }
.q-wrap input { width: 100%; padding-right: 28px; }
.q-clear { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; font-size: 20px; color: #78909c; width: 28px; height: 32px; cursor: pointer; }
.q-clear[hidden] { display: none; }
.oi-fix { position: sticky; top: -14px; z-index: 6; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; background: #fff7e6; border: 1px solid #f3d19c; border-radius: 8px; padding: 6px 10px; margin: 6px 0; }
.oi-fix[hidden] { display: none; }
.oi-only { font-size: 14px; }
tr.oi-bad td { background: #fff4f2; }
@keyframes oiflash { from { box-shadow: inset 0 0 0 3px #e0a100; } to { box-shadow: none; } }
tr.oi-flash td { animation: oiflash 1.6s ease-out; }
.of-store-row { display: block; margin: 8px 0; }
.of-store-row select { display: block; width: 100%; max-width: 360px; margin-top: 4px; }
.of-bc-tip { font-size: 12px; margin-top: 2px; }
.pc-sum { background: #f1f8f3; border: 1px solid #cfe5d6; border-radius: 8px; padding: 7px 10px; margin: 8px 0; font-size: 14px; }
.tf-card { margin-bottom: 10px; }
.tf-card.tf-open { border-left: 4px solid #d97706; }
.tf-lines-list { margin: 6px 0; line-height: 1.7; }
.tf-new-box summary { cursor: pointer; padding: 4px 0; list-style-position: inside; }
.pt-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.pt-card { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; border: 1px solid #dde3ea; background: #fff; border-radius: 10px; padding: 10px 12px; cursor: pointer; font: inherit; min-height: 64px; }
.pt-card.on { border-color: #166534; box-shadow: 0 0 0 2px #16653433; }
.pt-name { font-weight: 600; }
.pt-bal { font-weight: 700; font-size: 16px; }
.pt-detail { margin: 10px 0; border-left: 4px solid #166534; }
.pay-list { display: flex; flex-direction: column; gap: 6px; }
.pay-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; border: 1px solid #e5e9ee; border-radius: 8px; padding: 8px 10px; background: #fff; }
.pay-row .pay-acts { grid-row: 1 / span 2; grid-column: 2; display: flex; gap: 6px; align-items: center; }
.foot-sum { font-size: 14px; color: #14532d; font-weight: 600; margin: 8px 0 0; }
.form-foot .cf-summary { position: static; margin: 8px 0 0; }
@media (max-width: 640px) {
  .form-foot { position: sticky; bottom: -14px; background: #fff; z-index: 5; border-top: 1px solid #e5e9ee; padding-bottom: 2px; }
  .form-foot .form-actions { position: static; border-top: 0; margin-top: 6px; padding-top: 6px; }
  /* bigger thumb targets on the high-frequency actions */
  .ic-actions .btn, .reason-chips .chip, .coded-row .chip, .pc-ok, .pc-del, .wb-q { min-height: 44px; }
  .ic-actions { gap: 8px; }
  .ic-actions .btn.danger { margin-left: 6px; }
  .btn.small { min-height: 38px; }
  .pt-cards { grid-template-columns: 1fr; }
  .q-wrap { max-width: none; }
  .oi-fix { top: -14px; }
}
/* phone held sideways: keep the phone layout (bottom bar) instead of
   flipping to the desktop navigation, and let short sheets scroll */
@media (max-height: 500px) and (orientation: landscape) and (pointer: coarse) {
  header nav { display: none; }
  #mobile-tabs { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: #0c2d1b; padding: 4px; gap: 2px; overflow-x: auto; }
  #mobile-tabs button { flex: 1 0 auto; background: transparent; color: #cfdce8; border: 0; padding: 6px 10px; border-radius: 8px; white-space: nowrap; }
  #mobile-tabs button.active { background: #2c5f8a; color: #fff; }
  main { padding-bottom: 60px; }
  .modal-mask { padding: 6px; }
  .form-foot, .form-actions { position: sticky; bottom: -14px; background: #fff; z-index: 5; }
}
.pt-detail .ic-actions .btn.danger { flex: 0 0 auto; }