/* 仓库提成 · 原生扫码计数页 (Paso 1) · BBVA 深蓝风格,复用 app.css 的 :root 变量 */

.scanwrap { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }

/* 模式切换 计数/验货 */
.modetabs { display: flex; gap: 8px; margin: 12px 16px 0; }
.modetabs button {
  flex: 1; border: 1.5px solid var(--line); background: #fff; color: var(--muted);
  border-radius: 13px; padding: 12px 0; font-size: 16px; font-weight: 800;
}
.modetabs button.on {
  border-color: transparent; color: #fff;
  background: linear-gradient(135deg, #004481, #1464A5);
  box-shadow: 0 4px 12px rgba(0,68,129,.28);
}

/* 采购单条 */
.lanebar.ord .lane-tx .k { font-size: 16px; font-weight: 800; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 采购单选择卡 */
.ordcard {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 14px; margin-bottom: 10px; display: flex; align-items: center; gap: 10px;
}
.ordcard .l { flex: 1; min-width: 0; }
.ordcard .d1 { font-size: 16px; font-weight: 800; }
.ordcard .d2 { font-size: 13px; color: var(--muted); margin-top: 2px; }
.ordcard .r { text-align: right; flex: none; }
.ordcard .okc { font-size: 20px; font-weight: 900; color: var(--navy); font-variant-numeric: tabular-nums; }
.ordcard .sm { font-size: 12px; color: var(--muted); }

/* 验货进度总条 */
.progsum { margin: 14px 16px 4px; }
.progsum .pnums { font-size: 15px; font-weight: 700; color: var(--ink); }
.progsum .pnums b { font-size: 22px; font-weight: 900; color: var(--navy); }
.progsum .pnums .kinds { float: right; font-size: 13px; color: var(--muted); font-weight: 700; margin-top: 6px; }
.progsum .pbar { margin-top: 8px; height: 9px; border-radius: 6px; background: #e3e9f2; overflow: hidden; }
.progsum .pbar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg,#1464A5,#2dce89); transition: width .3s; }

/* SKU 行 */
.skucard {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 12px 14px; margin-bottom: 9px; display: flex; align-items: center; gap: 10px;
  border-left: 5px solid var(--line);
}
.skucard.st-ok { border-left-color: var(--money); }
.skucard.st-partial { border-left-color: var(--warn); }
.skucard.st-over { border-left-color: var(--bad); }
.skucard.st-unscanned { border-left-color: #C6CFDB; }
.skucard .l { flex: 1; min-width: 0; }
.skucard .nm { font-size: 15.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.skucard .cd { font-size: 12.5px; color: var(--muted); margin-top: 2px; font-variant-numeric: tabular-nums; }
.skucard .r { text-align: right; flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.skucard .skq { font-size: 15px; color: var(--muted); font-variant-numeric: tabular-nums; }
.skucard .skq b { font-size: 20px; font-weight: 900; color: var(--navy); }

/* 验货待确认卡里的应到/已扫 */
.pending .vexp { margin-top: 8px; font-size: 15px; color: var(--muted); font-weight: 600; }
.pending .vexp b { color: var(--navy); font-size: 18px; }
.pending.err { border-color: var(--bad); box-shadow: 0 10px 26px rgba(197,48,48,.18); }
.pending.err .pname { color: var(--bad); }
.pending .lanes { display: grid; grid-template-columns: 1fr; gap: 8px; }
.pending .lane-opt { text-align: left; background: #f4f7fb; border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px; font-size: 15px; font-weight: 700; color: var(--navy); }
.pending .lane-opt small { font-weight: 600; color: var(--muted); font-size: 12.5px; }

/* 顶部道条 */
.lanebar {
  display: flex; align-items: center; gap: 10px;
  margin: 12px 16px 0; padding: 12px 14px;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 3px 12px rgba(10,37,64,.06);
}
.lanebar .lane-ic { font-size: 22px; }
.lanebar .lane-tx { flex: 1; min-width: 0; }
.lanebar .lane-tx .k { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.lanebar .lane-tx .v { font-size: 20px; font-weight: 800; color: var(--navy); margin-top: 1px; }
.lanebar .lane-chg {
  border: 1.5px solid var(--cobalt); color: var(--cobalt); background: #fff;
  border-radius: 999px; padding: 7px 14px; font-size: 14px; font-weight: 700; flex: none;
}

/* 扫码区 */
.scanbox { margin: 12px 16px 0; }
#camview {
  width: 100%; border-radius: 16px; overflow: hidden; background: #061a33;
  min-height: 0;
}
#camview video, #camview img { border-radius: 16px; }
.cam-placeholder {
  border-radius: 16px; background: linear-gradient(135deg,#04234a,#0a5aa8);
  color: #fff; text-align: center; padding: 30px 18px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.cam-placeholder .big { font-size: 46px; }
.cam-placeholder .tx { font-size: 15px; opacity: .85; line-height: 1.4; }
.cam-placeholder.err { background: linear-gradient(135deg,#7a1f1f,#b53535); }
.cam-placeholder.err .tx { opacity: 1; }
.cam-placeholder.err .tx b { font-size: 17px; }
.cambtn {
  width: 100%; margin-top: 12px; border: none; border-radius: 14px;
  padding: 15px; font-size: 17px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg,#004481,#1464A5);
  box-shadow: 0 6px 16px rgba(0,68,129,.28);
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.cambtn.off { background: #fff; color: var(--bad); border: 1.5px solid var(--bad); box-shadow: none; }

/* 手动 / 蓝牙枪 输入 */
.manualrow { display: flex; gap: 10px; margin: 12px 16px 0; }
.manualrow input {
  flex: 1; min-width: 0; border: 1.5px solid var(--line); border-radius: 13px;
  padding: 14px; font-size: 18px; font-weight: 700; letter-spacing: .5px;
  background: var(--card);
}
.manualrow button {
  border: none; border-radius: 13px; background: var(--btn); color: #fff;
  padding: 0 20px; font-size: 17px; font-weight: 800; flex: none;
}

/* 待入库卡 (扫到码后) */
.pending {
  margin: 14px 16px 0; background: var(--card); border: 2px solid var(--cobalt);
  border-radius: 18px; padding: 16px; box-shadow: 0 10px 26px rgba(20,100,165,.18);
}
.pending .pname { font-size: 20px; font-weight: 800; color: var(--ink); line-height: 1.25; }
.pending .pcode {
  font-size: 15px; color: var(--muted); font-weight: 700; margin-top: 4px;
  font-variant-numeric: tabular-nums; letter-spacing: 1px;
}
.pending .psup { font-size: 13px; color: var(--cobalt); font-weight: 700; margin-top: 3px; }

.qtytabs { display: flex; gap: 8px; margin-top: 14px; }
.qtytabs button {
  flex: 1; border: 1.5px solid var(--line); background: #fff; color: var(--muted);
  border-radius: 12px; padding: 11px 0; font-size: 15px; font-weight: 800;
}
.qtytabs button.on { border-color: var(--cobalt); background: #eaf2fb; color: var(--cobalt); }

.qtypane { margin-top: 14px; }

/* 总数量: 步进器 */
.stepper { display: flex; align-items: center; justify-content: center; gap: 14px; }
.stepper .sbtn {
  width: 56px; height: 56px; border-radius: 16px; border: none; flex: none;
  font-size: 30px; font-weight: 800; color: #fff; background: var(--cobalt);
  display: flex; align-items: center; justify-content: center;
}
.stepper .sbtn:active { transform: scale(.94); }
.stepper input {
  width: 110px; text-align: center; font-size: 40px; font-weight: 900; color: var(--navy);
  border: none; border-bottom: 3px solid var(--line); padding: 4px 0;
  font-variant-numeric: tabular-nums; background: transparent;
}

/* 每包 × 包数 */
.packrow { display: flex; align-items: flex-end; justify-content: center; gap: 10px; }
.packrow .pcell { text-align: center; }
.packrow .pcell .lb { font-size: 13px; color: var(--muted); font-weight: 700; margin-bottom: 5px; }
.packrow .pcell input {
  width: 92px; text-align: center; font-size: 30px; font-weight: 900; color: var(--navy);
  border: 1.5px solid var(--line); border-radius: 12px; padding: 8px 4px;
  font-variant-numeric: tabular-nums;
}
.packrow .op { font-size: 26px; font-weight: 800; color: var(--muted); padding-bottom: 10px; }
.packtotal {
  text-align: center; margin-top: 12px; font-size: 16px; color: var(--muted); font-weight: 700;
}
.packtotal b { font-size: 30px; color: var(--money); margin-left: 6px; }

.pending-actions { display: flex; gap: 10px; margin-top: 16px; }
.pending-actions .cancel {
  flex: none; border: 1.5px solid var(--line); background: #fff; color: var(--muted);
  border-radius: 14px; padding: 15px 20px; font-size: 17px; font-weight: 800;
}
.pending-actions .confirm {
  flex: 1; border: none; border-radius: 14px; padding: 15px; font-size: 18px; font-weight: 900;
  color: #fff; background: var(--money);
  box-shadow: 0 6px 16px rgba(31,157,85,.30);
}

/* 今日已扫 */
.today-h {
  display: flex; align-items: baseline; gap: 8px; padding: 20px 18px 6px;
}
.today-h .t { font-size: 17px; font-weight: 800; color: var(--ink); }
.today-h .sum { margin-left: auto; font-size: 14px; color: var(--muted); font-weight: 700; }
.today-h .sum b { color: var(--navy); font-size: 19px; }

.tcard {
  margin: 0 16px 10px; background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; overflow: hidden;
}
.tcard .thead { display: flex; align-items: center; gap: 10px; padding: 13px 14px; }
.tcard .thead .l { flex: 1; min-width: 0; }
.tcard .thead .nm {
  font-size: 16px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tcard .thead .cd {
  font-size: 13px; color: var(--muted); font-weight: 700; margin-top: 2px;
  font-variant-numeric: tabular-nums; letter-spacing: .5px;
}
.tcard .thead .qty { font-size: 24px; font-weight: 900; color: var(--navy); flex: none; }
.tcard .thead .qty small { font-size: 13px; color: var(--muted); font-weight: 700; margin-left: 3px; }
.tcard .thead .exp { font-size: 15px; color: #9AA7B8; flex: none; padding-left: 4px; }

.tdetail { border-top: 1px dashed var(--line); background: #fafbfe; }
.trec {
  display: flex; align-items: center; gap: 8px; padding: 11px 14px;
  border-bottom: 1px solid #eef1f6;
}
.trec:last-child { border-bottom: none; }
.trec .tm { font-size: 13px; color: var(--muted); font-weight: 700; width: 46px; flex: none;
  font-variant-numeric: tabular-nums; }
.trec .rq { font-size: 18px; font-weight: 800; color: var(--ink); flex: 1;
  font-variant-numeric: tabular-nums; }
.trec .rq .ed { color: var(--warn); font-size: 12px; font-weight: 700; margin-left: 6px; }
.trec .mini {
  width: 40px; height: 40px; border-radius: 11px; border: 1.5px solid var(--line);
  background: #fff; font-size: 20px; font-weight: 800; color: var(--cobalt); flex: none;
  display: flex; align-items: center; justify-content: center;
}
.trec .mini.del { color: var(--bad); border-color: #f3c9c9; }
.trec input.qedit {
  width: 76px; text-align: center; font-size: 20px; font-weight: 800; color: var(--navy);
  border: 1.5px solid var(--cobalt); border-radius: 10px; padding: 6px 2px;
  font-variant-numeric: tabular-nums;
}
.trec .mini.save { color: #fff; background: var(--money); border-color: var(--money); }

.scan-empty { text-align: center; color: #9AA7B8; padding: 30px 0; font-size: 15px; }

/* 道选择弹层 */
.lanepick-mask {
  position: fixed; inset: 0; z-index: 200; background: rgba(7,33,70,.55);
  display: flex; align-items: flex-end;
}
.lanepick {
  width: 100%; background: var(--bg1); border-radius: 22px 22px 0 0;
  padding: 20px 18px calc(20px + env(safe-area-inset-bottom));
  max-height: 82vh; overflow-y: auto;
}
.lanepick h3 { font-size: 20px; text-align: center; color: var(--ink); }
.lanepick .sub { font-size: 14px; color: var(--muted); text-align: center; margin: 6px 0 16px; }
.lanepick .lanes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lanepick .lane-opt {
  background: var(--card); border: 1.5px solid var(--line); border-radius: 16px;
  padding: 18px 10px; text-align: center; font-size: 18px; font-weight: 800; color: var(--navy);
}
.lanepick .lane-opt:active { border-color: var(--cobalt); background: #eaf2fb; }

/* 查价卡 */
.pricecard {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 13px 14px; margin: 0 16px 10px; display: flex; align-items: center; gap: 12px;
}
.pricecard.big {
  margin: 14px 16px 4px; border: 2px solid var(--money); padding: 18px 16px;
  box-shadow: 0 8px 22px rgba(31,157,85,.15);
}
.pricecard.big.err { border-color: var(--bad); box-shadow: none; }
.pricecard .l { flex: 1; min-width: 0; }
.pricecard .pnm { font-size: 16px; font-weight: 800; line-height: 1.25; }
.pricecard.big .pnm { font-size: 20px; }
.pricecard .pbc { font-size: 13px; color: var(--muted); font-weight: 700; margin-top: 3px; font-variant-numeric: tabular-nums; letter-spacing: .5px; }
.pricecard.big .pbc { font-size: 15px; }
.pricecard .psub2 { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.pricecard .pprice {
  flex: none; text-align: right; color: var(--money); font-weight: 900;
  font-size: 22px; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.pricecard.big .pprice { font-size: 34px; }
.pricecard.big.err .pprice { display: none; }

/* 拍照导入 */
.photo-newbtn {
  display: block; width: calc(100% - 32px); margin: 14px 16px 4px; border: none;
  border-radius: 15px; padding: 16px; font-size: 17px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg,#7c4dcc,#a06fe0); box-shadow: 0 6px 16px rgba(124,77,204,.28);
}
.pagesub { display: flex; align-items: center; gap: 8px; padding: 12px 16px 4px; font-size: 17px; font-weight: 800; color: var(--ink); }
.pagesub .bk2 { border: none; background: none; color: var(--cobalt); font-size: 16px; font-weight: 800; padding: 4px 6px 4px 0; }
.pagesub span { flex: 1; }
.photo-form { padding: 8px 16px 0; }
.photo-form input { width: 100%; border: 1.5px solid var(--line); border-radius: 12px; padding: 13px; font-size: 16px; background: var(--card); }
.photo-pick {
  display: flex; align-items: center; justify-content: center; margin: 12px 16px 0;
  border: 2px dashed #b7a3e0; border-radius: 16px; padding: 26px 16px; background: #f6f2fd;
  color: #6a3fbf; font-size: 17px; font-weight: 800; text-align: center;
}
.photo-pick input { display: none; }
.photo-thumbs { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px 0; }
.photo-thumbs img { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }
.photo-actions { padding: 10px 16px 0; }
.photo-actions2 { display: flex; gap: 10px; padding: 14px 16px; }
.photo-actions2 .confirm { flex: 1; border: none; border-radius: 14px; padding: 15px; font-size: 18px; font-weight: 900; color: #fff; background: var(--money); box-shadow: 0 6px 16px rgba(31,157,85,.3); }
.photo-actions2 .confirm:disabled { background: #B7C2D0; box-shadow: none; }
.photo-actions2 .cancel { flex: none; border: 1.5px solid var(--line); background: #fff; color: var(--muted); border-radius: 14px; padding: 15px 20px; font-size: 16px; font-weight: 800; }
.addbtn2 { width: 100%; border: 1.5px dashed var(--cobalt); background: #eef4fc; color: var(--cobalt); border-radius: 12px; padding: 12px; font-size: 15px; font-weight: 800; }
.photo-wait { text-align: center; padding: 60px 24px; }
.photo-wait .spin { width: 52px; height: 52px; margin: 0 auto 18px; border: 5px solid #e0e6f0; border-top-color: var(--cobalt); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.photo-wait .wt { font-size: 17px; font-weight: 800; color: var(--ink); }
.photo-wait .wsub { font-size: 13.5px; color: var(--muted); margin-top: 8px; }
.pi-row { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 11px 12px; margin: 0 16px 9px; }
.pi-row .pi-nm { width: 100%; border: 1.5px solid var(--line); border-radius: 10px; padding: 10px; font-size: 15.5px; font-weight: 700; margin-bottom: 7px; }
.pi-row .pi-b { display: flex; gap: 7px; }
.pi-row .pi-cd { flex: 1; min-width: 0; border: 1.5px solid var(--line); border-radius: 10px; padding: 9px 10px; font-size: 14px; font-variant-numeric: tabular-nums; }
.pi-row .pi-qt { width: 64px; text-align: center; border: 1.5px solid var(--line); border-radius: 10px; padding: 9px 4px; font-size: 16px; font-weight: 800; }
.pi-row .pi-warn { font-size: 12.5px; color: var(--warn); font-weight: 700; margin-top: 6px; }

/* 扫码成功闪一下 */
.flash-ok { animation: flashok .5s ease; }
@keyframes flashok { 0% { background: #d7f7e5; } 100% { background: transparent; } }