/* Warehouse 3D view for the Pickup board and the DROP off carts.
   Additive only: it adds a view on top of the existing boards and never edits them. */
.p3-bar{display:none;flex-wrap:wrap;gap:8px;align-items:center;padding:8px 14px 0}
.dz-pick-sheet .p3-bar{display:flex}
.p3-seg{display:inline-flex;border:1px solid #d9d5e3;border-radius:999px;overflow:hidden;background:#fff}
.p3-seg button{border:0;background:transparent;height:30px;padding:0 12px;font-weight:800;font-size:12px;cursor:pointer;color:#17171d}
.p3-seg button.is-on{background:#111;color:#fff}
.p3-regions{display:inline-flex;gap:6px;flex-wrap:wrap}
.p3-regions button{border:1px solid #e0dce8;background:#fff;border-radius:999px;height:30px;padding:0 10px;font-size:12px;font-weight:700;cursor:pointer;color:#17171d;display:inline-flex;align-items:center;gap:6px}
.p3-regions button small{color:#6d6a78;font-weight:600}
.p3-regions button.is-on{background:#17171d;color:#fff;border-color:#17171d}
.p3-regions button.is-on small{color:#cfcbe0}
.p3-tools{display:inline-flex;gap:6px;margin-left:auto}
.p3-tools button{border:1px solid #e0dce8;background:#fff;border-radius:10px;height:30px;min-width:30px;padding:0 10px;font-size:12px;font-weight:800;cursor:pointer;color:#17171d}
.p3-live{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;color:#047857}
.p3-live i{width:8px;height:8px;border-radius:50%;background:#10b981;box-shadow:0 0 0 0 rgba(16,185,129,.6);animation:p3pulse 1.6s infinite}
@keyframes p3pulse{70%{box-shadow:0 0 0 7px rgba(16,185,129,0)}100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}}
.p3-legend{display:flex;gap:12px;flex-wrap:wrap;padding:6px 14px 0;font-size:11px;color:#4b4858;font-weight:700}
.p3-legend span{display:inline-flex;align-items:center;gap:6px}
.p3-legend i{width:14px;height:12px;border-radius:3px;display:inline-block;border:1px solid rgba(0,0,0,.25)}
.p3-legend .k-empty{background:transparent;border-style:dashed;border-color:#8a86a0}
.p3-legend .k-used{background:#c9a26a}
.p3-legend .k-need{background:#f59e0b;box-shadow:0 0 6px #f59e0b}
.p3-legend .k-going{background:#60a5fa}
.p3-legend .k-picked{background:#34d399}
.p3-stats{display:flex;gap:8px;flex-wrap:wrap;padding:6px 14px 0}
.p3-stats b{background:#fff;border:1px solid #e6e3ee;border-radius:10px;padding:4px 10px;font-size:12px}
.p3-stats b em{font-style:normal;color:#6d6a78;font-weight:600;margin-left:4px}
.p3-stats b.hot{background:#fff7ed;border-color:#fdba74;color:#9a3412}

/* hide the flat board while the 3D view is on (still in the page, still working) */
.dz-pick-sheet.p3-on .dz-pick-aisle{display:none}
.dz-pick-sheet:not(.p3-on) .p3-wrap{display:none}
.dz-pick-sheet.p3-on.p3-kind-drop .dz-pick-main{flex-direction:column;overflow:auto}
.dz-pick-sheet.p3-on.p3-kind-drop .dz-drop-list{flex:none;overflow:visible}
.dz-pick-sheet.p3-on.p3-kind-pickup .dz-pick-main{align-items:stretch}

.p3-wrap{position:relative;flex:1;min-width:0;min-height:340px;height:calc(100vh - 330px);max-height:900px;border-radius:14px;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 0%,#39425c 0%,#232a3d 55%,#161b29 100%);border:1px solid #2c3550;box-shadow:inset 0 0 80px rgba(0,0,0,.45)}
.p3-kind-drop .p3-wrap{flex:none;width:100%;height:min(56vh,520px);min-height:360px}
.p3-stage{position:absolute;inset:0;perspective:2200px;perspective-origin:50% 38%;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.p3-stage.is-drag{cursor:grabbing}
.p3-world{position:absolute;left:50%;top:50%;transform-style:preserve-3d;will-change:transform}
.p3-world *{box-sizing:border-box}
.p3-hint{position:absolute;left:12px;bottom:10px;font-size:11px;color:#aab3cf;background:rgba(10,14,25,.55);padding:5px 9px;border-radius:8px;pointer-events:none}
.p3-load[hidden]{display:none}
.p3-load{position:absolute;inset:0;display:grid;place-items:center;color:#cfd6ee;font-weight:700;font-size:13px;pointer-events:none}
.p3-tip{position:absolute;z-index:6;pointer-events:none;max-width:260px;background:#0e1222;color:#fff;border:1px solid #3a4468;border-radius:10px;padding:8px 10px;font-size:11px;line-height:1.4;box-shadow:0 8px 24px rgba(0,0,0,.45)}
.p3-tip b{display:block;font-size:12px;margin-bottom:2px}
.p3-tip em{font-style:normal;color:#fbbf24;font-weight:800}
.p3-tip small{color:#aab3cf;display:block}

/* solids */
.p3-cube{position:absolute;transform-style:preserve-3d}
.p3-cube>.f{position:absolute;overflow:hidden;backface-visibility:visible}
.p3-cube>.f.top{left:0;top:0;width:100%;height:100%}
.p3-cube>.f.front,.p3-cube>.f.back{left:0;transform-origin:50% 100%}
.p3-cube>.f.left,.p3-cube>.f.right{top:0;transform-origin:0 0}
.p3-vq,.p3-hq,.p3-sq{position:absolute;overflow:hidden}
.p3-vq{left:0;top:0;transform-origin:50% 100%}
.p3-sq{left:0;top:0;transform-origin:0 0}
.p3-hq{left:0;top:0}

/* floor */
.p3-floor{background:
  linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px) 0 0/60px 60px,
  linear-gradient(0deg,rgba(255,255,255,.05) 1px,transparent 1px) 0 0/60px 60px,
  linear-gradient(135deg,#8791a8,#9aa3b8 45%,#7f8aa3);border-radius:10px;box-shadow:0 0 0 6px #3c4560}
.p3-lane{background:repeating-linear-gradient(0deg,#f5c542 0 18px,transparent 18px 34px);opacity:.75}
.p3-zonelbl{display:flex;align-items:center;justify-content:center;font:900 22px/1 system-ui,sans-serif;letter-spacing:.3em;color:rgba(23,26,40,.35);text-transform:uppercase}
.p3-roomsign{display:flex;align-items:center;gap:10px;padding:0 14px;white-space:nowrap;background:linear-gradient(90deg,#17171d,#2b2f45);color:#fff;border-radius:8px;border-left:8px solid #f59e0b;font:800 17px/1.1 system-ui,sans-serif}
.p3-roomsign small{display:block;font:700 11px/1.2 system-ui,sans-serif;color:#c7ccdf;margin-top:2px}
.p3-roomsign .mv{margin-left:auto;display:flex;gap:4px}
.p3-roomsign .mv button{width:26px;height:26px;border-radius:6px;border:1px solid #4a5275;background:#20253a;color:#fff;font-weight:900;cursor:pointer;line-height:1;font-size:12px}
.p3-roomsign .mv button.is-on{background:#f59e0b;color:#111;border-color:#f59e0b}

/* rack (Amazon style: blue uprights, orange beams) */
.p3-shadow{background:rgba(10,12,25,.32);border-radius:6px;filter:blur(3px)}
.p3-post{background:linear-gradient(90deg,#1d4ed8,#2563eb 60%,#1e40af)}
.p3-frame{background:
  linear-gradient(135deg,transparent 46%,rgba(255,255,255,.35) 47% 53%,transparent 54%) 0 0/100% 33%,
  linear-gradient(#2563eb,#2563eb) 0 0/6px 100% no-repeat,linear-gradient(#2563eb,#2563eb) 100% 0/6px 100% no-repeat;opacity:.9}
.p3-beam{background:linear-gradient(#fb923c,#f97316 55%,#ea580c);border-top:1px solid rgba(255,255,255,.4)}
.p3-beam.top{background:linear-gradient(#fdba74,#fb923c)}
.p3-deck{background:repeating-linear-gradient(90deg,#d9dde7 0 7px,#cdd2de 7px 8px)}
.p3-plate{display:flex;align-items:center;justify-content:center;background:#fff;color:#111;border:1px solid #999;border-radius:3px;font:900 11px/1 system-ui,sans-serif;letter-spacing:.03em;cursor:pointer}
.p3-plate.s-used{background:#fff}
.p3-plate.s-empty{background:#e5e7ee;color:#6b7280}
.p3-plate.s-need{background:#fde68a;border-color:#d97706;color:#7c2d12}
.p3-plate.s-going{background:#bfdbfe;border-color:#2563eb;color:#1e3a8a}
.p3-plate.s-picked{background:#a7f3d0;border-color:#059669;color:#064e3b}
.p3-plate.is-sel,.p3-box.is-sel .f{outline:3px solid #22d3ee;outline-offset:-2px}
.p3-empty{display:flex;align-items:center;justify-content:center;border:2px dashed rgba(71,85,105,.7);border-radius:6px;color:#64748b;font:800 10px/1 system-ui,sans-serif;letter-spacing:.14em;cursor:pointer}
.p3-empty.is-sel{border-color:#22d3ee;color:#0891b2}
.p3-badge{display:flex;align-items:center;justify-content:center;gap:4px;border-radius:999px;font:900 11px/1 system-ui,sans-serif;color:#fff;white-space:nowrap;cursor:pointer}
.p3-badge.need{background:#ea580c;box-shadow:0 0 14px #f59e0b;animation:p3blink 1.3s ease-in-out infinite}
.p3-badge.going{background:#2563eb}
.p3-badge.picked{background:#059669}
@keyframes p3blink{50%{filter:brightness(1.35);box-shadow:0 0 22px #fbbf24}}

/* cardboard boxes */
.p3-box{cursor:pointer}
.p3-box .f{background:linear-gradient(135deg,#d6b27a,#c39a5c);border:1px solid rgba(90,60,20,.55)}
.p3-box .f.top{background:linear-gradient(135deg,#e2c28f,#d3ab70)}
.p3-box .f.left,.p3-box .f.right,.p3-box .f.back{background:linear-gradient(135deg,#b88b4e,#a67a40)}
.p3-box .f.top::after{content:"";position:absolute;left:44%;top:0;width:12%;height:100%;background:rgba(255,255,255,.35)}
.p3-box .f.front{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2px 3px}
.p3-box .f.front b{font:900 9px/1.1 system-ui,sans-serif;color:#3b2a12;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.p3-box .f.front small{font:800 9px/1 system-ui,sans-serif;color:#5a3d16}
.p3-box.s-need .f{border-color:#c2410c;box-shadow:0 0 0 1px #f59e0b}
.p3-box.s-need .f.top{background:linear-gradient(135deg,#fcd34d,#f59e0b)}
.p3-box.s-going .f{background:linear-gradient(135deg,#93c5fd,#60a5fa);border-color:#1d4ed8}
.p3-box.s-going .f.left,.p3-box.s-going .f.right,.p3-box.s-going .f.back{background:#3b82f6}
.p3-box.s-picked .f{background:linear-gradient(135deg,#6ee7b7,#34d399);border-color:#047857}
.p3-box.s-picked .f.left,.p3-box.s-picked .f.right,.p3-box.s-picked .f.back{background:#10b981}
.p3-box.s-going .f b,.p3-box.s-picked .f b{color:#062a1c}
.p3-box.s-going .f small,.p3-box.s-picked .f small{color:#0b3a28}
.p3-box.dim .f{opacity:.55}

/* DROP carts */
.p3-wheel{background:#111827}
.p3-cartfloor{border-radius:8px;border:2px solid rgba(255,255,255,.35)}
.p3-cartfloor.st-empty{background:rgba(148,163,184,.35)}
.p3-cartfloor.st-need{background:rgba(245,158,11,.55);animation:p3blink 1.4s ease-in-out infinite}
.p3-cartfloor.st-ready{background:rgba(16,185,129,.5)}
.p3-cartdeck{background:linear-gradient(135deg,#e5e7eb,#cbd5e1);border:2px solid #64748b;border-radius:4px}
.p3-wire{background:
  repeating-linear-gradient(90deg,rgba(255,255,255,.55) 0 1px,transparent 1px 9px),
  repeating-linear-gradient(0deg,rgba(255,255,255,.55) 0 1px,transparent 1px 9px),rgba(125,160,220,.12);border:2px solid #94a3b8}
.p3-handle{background:#475569;border-radius:3px}
.p3-cartsign{display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:10px;border:2px solid #fff;color:#fff;text-align:center;cursor:pointer;padding:3px 6px}
.p3-cartsign b{font:900 22px/1 system-ui,sans-serif;letter-spacing:.06em}
.p3-cartsign span{font:800 10px/1.15 system-ui,sans-serif;margin-top:3px}
.p3-cartsign.st-empty{background:#475569}
.p3-cartsign.st-need{background:#ea580c;animation:p3blink 1.2s ease-in-out infinite}
.p3-cartsign.st-ready{background:#059669}
.p3-cartsign.is-sel{outline:4px solid #22d3ee}
.p3-beacon .f{background:#f97316;box-shadow:0 0 18px #fb923c}
.p3-pallet .f{background:linear-gradient(135deg,#b08a56,#8f6b3a);border:1px solid #5b4222}
.p3-more{display:flex;align-items:center;justify-content:center;font:900 12px/1 system-ui,sans-serif;color:#fff;background:#334155;border-radius:999px}
.p3-flash{animation:p3flash 1.6s ease-out 1}
@keyframes p3flash{0%,60%{box-shadow:0 0 0 4px #22d3ee}100%{box-shadow:0 0 0 0 rgba(34,211,238,0)}}
.dz-pick-sheet.p3-on.p3-kind-drop .dz-drop-list{margin-top:10px}

@media(max-width:800px){
  .p3-wrap{height:62vh;min-height:320px}
  .p3-regions button small{display:none}
}
@media(prefers-reduced-motion:reduce){.p3-badge.need,.p3-cartsign.st-need,.p3-cartfloor.st-need,.p3-live i{animation:none}}

/* =================== v2 =================== */
/* classic detail aside is replaced by the 3D card while 3D is on */
.dz-pick-sheet.p3-on .dz-pick-detail{display:none}

/* ---- HUD (the controls that sit on top of the 3D view) ---- */
.p3-hud{position:absolute;left:8px;right:8px;top:8px;z-index:30;pointer-events:none}
.p3-hud-main{display:flex;flex-wrap:wrap;gap:6px;align-items:center;pointer-events:none}
.p3-hud-main>*{pointer-events:auto}
.p3-hud-full{display:flex;flex-wrap:wrap;gap:6px;align-items:center;flex:1;min-width:0;pointer-events:none}
.p3-hud-full>*{pointer-events:auto}
.p3-ib,.p3-grp button{border:1px solid rgba(255,255,255,.18);background:rgba(17,22,36,.78);color:#f1f5f9;border-radius:9px;height:28px;min-width:28px;padding:0 9px;font:800 11px/1 system-ui,sans-serif;cursor:pointer;backdrop-filter:blur(6px)}
.p3-ib:hover,.p3-grp button:hover{background:rgba(51,65,99,.9)}
.p3-ib.wide{padding:0 12px}
.p3-grp{display:inline-flex;gap:3px;background:rgba(17,22,36,.45);padding:2px;border-radius:11px}
.p3-grp button.is-on{background:#22d3ee;color:#06222b;border-color:#22d3ee}
.p3-search{height:28px;border-radius:9px;border:1px solid rgba(255,255,255,.2);background:rgba(17,22,36,.78);color:#f1f5f9;padding:0 10px;font:600 12px system-ui,sans-serif;width:190px;max-width:44vw}
.p3-search::placeholder{color:#94a3b8}
.p3-hits{font:800 11px system-ui,sans-serif;color:#e2e8f0;background:rgba(17,22,36,.6);border-radius:8px;padding:0 6px}
.p3-hits:empty{display:none}
.p3-hud [hidden]{display:none!important}

/* ---- collapse states: 1 = slim (only the HUD), 2 = minimal (just ☰ and ×) ---- */
.dz-pick-sheet.p3-ui1 .dz-pick-head,.dz-pick-sheet.p3-ui1 .dz-pick-setup,.dz-pick-sheet.p3-ui1 .dz-pick-meta,
.dz-pick-sheet.p3-ui1 .p3-bar,.dz-pick-sheet.p3-ui1 .p3-legend,.dz-pick-sheet.p3-ui1 .p3-stats,
.dz-pick-sheet.p3-ui2 .dz-pick-head,.dz-pick-sheet.p3-ui2 .dz-pick-setup,.dz-pick-sheet.p3-ui2 .dz-pick-meta,
.dz-pick-sheet.p3-ui2 .p3-bar,.dz-pick-sheet.p3-ui2 .p3-legend,.dz-pick-sheet.p3-ui2 .p3-stats{display:none!important}
.dz-pick-sheet.p3-ui1 .dz-pick-main,.dz-pick-sheet.p3-ui2 .dz-pick-main{padding:6px}
.dz-pick-sheet.p3-ui1.p3-on .p3-wrap,.dz-pick-sheet.p3-ui2.p3-on .p3-wrap{height:auto;max-height:none;min-height:0;align-self:stretch;flex:1;border-radius:10px}
.dz-pick-sheet.p3-ui1.p3-kind-drop.p3-on .p3-wrap,.dz-pick-sheet.p3-ui2.p3-kind-drop.p3-on .p3-wrap{height:calc(100vh - 20px);min-height:340px;flex:none}
.p3-ui2 .p3-hud-full{display:none}
.p3-ui2 .p3-hud-main{justify-content:space-between}

/* ---- alerts, banner, hint ---- */
.p3-alerts{position:absolute;left:8px;bottom:8px;z-index:25;display:flex;flex-wrap:wrap;gap:6px;max-width:70%}
.p3-alerts button{border:1px solid #fb923c;background:rgba(124,45,18,.9);color:#ffedd5;border-radius:999px;padding:5px 11px;font:800 11px system-ui,sans-serif;cursor:pointer}
.p3-alerts button:hover{background:#9a3412}
.p3-banner{position:absolute;left:50%;top:44px;transform:translateX(-50%);z-index:31;background:#0e7490;color:#ecfeff;border-radius:999px;padding:7px 14px;font:800 12px system-ui,sans-serif;display:flex;gap:10px;align-items:center;box-shadow:0 6px 20px rgba(0,0,0,.4)}
.p3-banner button{border:0;border-radius:999px;background:#fff;color:#0e7490;font:800 11px system-ui,sans-serif;padding:3px 10px;cursor:pointer}
.p3-hint{pointer-events:none}
.p3-ui2 .p3-hint{display:none}

/* ---- scenery: back wall, dock doors, lamps, receiving, pallet jack ---- */
.p3-wall{background:linear-gradient(#4b5675,#313a54);border-bottom:2px solid #1f2638}
.p3-wallband{background:#1f2638;color:#cbd5e1;font:900 14px/36px system-ui,sans-serif;letter-spacing:.5em;text-align:center}
.p3-door{background:repeating-linear-gradient(#94a3b8 0 9px,#7b8aa3 9px 11px);border:3px solid #263149;display:flex;align-items:flex-end;justify-content:center}
.p3-door b{font:900 12px system-ui,sans-serif;color:#fff;background:#b45309;padding:2px 8px;margin-bottom:6px;border-radius:3px}
.p3-wall-off .p3-wall,.wall-off .p3-wall,.wall-off .p3-door,.wall-off .p3-wallband{display:none}
.p3-lamp .f{background:#f8fafc;box-shadow:0 0 14px #fef9c3}
.p3-lampglow{background:radial-gradient(closest-side,rgba(254,249,195,.34),rgba(254,249,195,0));pointer-events:none}
.p3-recv{background:repeating-linear-gradient(45deg,rgba(250,204,21,.38) 0 14px,rgba(15,23,42,.35) 14px 28px);border:2px solid #facc15;color:#fef9c3;display:flex;align-items:center;justify-content:center;font:900 16px system-ui,sans-serif;letter-spacing:.3em;pointer-events:none}
.p3-jack .f{background:#f59e0b;border:1px solid #92400e}
.p3-jack.hdl .f{background:#374151}
.p3-boxshadow{background:rgba(0,0,0,.38);filter:blur(3px);pointer-events:none}
.p3-night .p3-wrap,.p3-wrap.p3-night{background:radial-gradient(120% 90% at 50% 0%,#141a2c 0%,#0b0f1b 60%,#05070d 100%)}
.p3-night .p3-floor{filter:brightness(.55)}
.p3-night .p3-wall{filter:brightness(.55)}
.p3-lampglow{opacity:.25}
.p3-night .p3-lampglow{opacity:1}

/* ---- photos on boxes ---- */
.p3-box .f.front{position:relative;overflow:hidden}
.p3-box .f.front u{position:absolute;inset:0;background-size:cover;background-position:center}
.p3-box .f.front b,.p3-box .f.front small{position:relative;z-index:1}
.p3-box .f.front u+b{background:rgba(255,255,255,.82);padding:0 3px;border-radius:2px}
.p3-box .f.front u~small{background:rgba(255,255,255,.82);padding:0 3px;border-radius:2px;margin-top:1px}
.no-photos .p3-box .f.front u{display:none}

/* ---- heat map ---- */
.p3-heat{display:none;pointer-events:none;border-radius:4px}
.heat-stock .p3-heat,.heat-act .p3-heat{display:block}
.heat-stock .p3-heat[data-hs="0"]{background:rgba(100,116,139,.5)}
.heat-stock .p3-heat[data-hs="1"]{background:rgba(239,68,68,.6)}
.heat-stock .p3-heat[data-hs="2"]{background:rgba(250,204,21,.55)}
.heat-stock .p3-heat[data-hs="3"]{background:rgba(34,197,94,.55)}
.heat-act .p3-heat[data-ha="0"]{background:rgba(100,116,139,.4)}
.heat-act .p3-heat[data-ha="1"]{background:rgba(59,130,246,.5)}
.heat-act .p3-heat[data-ha="2"]{background:rgba(250,204,21,.6)}
.heat-act .p3-heat[data-ha="3"]{background:rgba(239,68,68,.65)}

/* ---- low / short alerts ---- */
.p3-plate.low{box-shadow:0 0 0 2px #facc15;animation:p3blink 1.8s ease-in-out infinite}
.p3-plate.short{box-shadow:0 0 0 2px #ef4444;animation:p3blink 1s ease-in-out infinite}
.p3-badge.low{background:#ca8a04}
.p3-badge.short{background:#dc2626;animation:p3blink 1s ease-in-out infinite}
.p3-legend .k-low{background:#facc15}

/* ---- staff ---- */
.p3-person{pointer-events:none}
.p3-person i{position:absolute;display:block}
.p3-person .h{left:11px;top:0;width:10px;height:10px;border-radius:50%;background:#fbbf24;border:1px solid #92400e}
.p3-person .b{left:8px;top:11px;width:16px;height:22px;border-radius:5px;background:#2563eb;border:1px solid #1e3a8a}
.p3-person .l{left:9px;top:33px;width:14px;height:18px;background:#1e293b;border-radius:2px}
.p3-person span{position:absolute;left:50%;top:-16px;transform:translateX(-50%);background:#0f172a;color:#fff;font:800 9px system-ui,sans-serif;padding:1px 5px;border-radius:5px;white-space:nowrap}
.no-staff .p3-person{display:none}

/* ---- pick route ---- */
.p3-route,.p3-stop,.p3-routewrap{display:none}
.show-route .p3-routewrap{display:contents}
.show-route .p3-route,.show-route .p3-stop{display:block}
.p3-route{background:repeating-linear-gradient(90deg,#22d3ee 0 14px,#0891b2 14px 20px);box-shadow:0 0 10px #22d3ee;pointer-events:none;animation:p3flow 1s linear infinite;background-size:20px 100%}
.p3-route.v{background:repeating-linear-gradient(180deg,#22d3ee 0 14px,#0891b2 14px 20px)}
@keyframes p3flow{to{background-position:20px 0}}
.p3-stop{border-radius:50%;background:#22d3ee;color:#06222b;border:2px solid #fff;font:900 14px/24px system-ui,sans-serif;text-align:center;box-shadow:0 0 12px #22d3ee;pointer-events:none}

/* ---- search ---- */
.has-hit .p3-plate:not(.p3-hit){opacity:.35}
.p3-hit.p3-plate{box-shadow:0 0 0 3px #22d3ee,0 0 16px #22d3ee;opacity:1}
.p3-hit .f{outline:3px solid #22d3ee;outline-offset:-2px}
.p3-hit.p3-cartsign{box-shadow:0 0 0 3px #22d3ee,0 0 16px #22d3ee}

/* ---- move mode ---- */
.is-moving .p3-empty{border-color:#22d3ee;color:#22d3ee;background:rgba(34,211,238,.18);animation:p3blink 1s ease-in-out infinite}

/* ---- ready-to-ship lane ---- */
.p3-readylane{border-radius:8px}
.p3-readylane.st-empty{background:rgba(148,163,184,.14);border:2px dashed rgba(148,163,184,.5)}
.p3-readylane.st-ready{background:rgba(16,185,129,.28);border:2px solid #10b981}
.p3-roomsign.p3-ready{background:#047857}

/* ---- detail card ---- */
.p3-card{position:absolute;right:8px;top:46px;bottom:8px;width:min(330px,92%);z-index:40;background:#fff;color:#17171d;border-radius:14px;box-shadow:0 14px 40px rgba(0,0,0,.5);padding:12px;overflow:auto;font:500 13px system-ui,sans-serif}
.p3-card[hidden],.p3-modal[hidden],.p3-alerts[hidden],.p3-banner[hidden]{display:none}
.p3-ui2 .p3-card{top:40px}
.p3-cardx{position:absolute;right:8px;top:6px;border:0;background:#eee;border-radius:50%;width:26px;height:26px;font-size:16px;cursor:pointer}
.p3-cardhead h4{margin:0 30px 4px 0;font-size:17px}
.chip{display:inline-block;border-radius:999px;padding:2px 9px;font:800 11px system-ui,sans-serif;background:#e5e7eb;color:#374151;margin-right:4px}
.chip.s-need{background:#fde68a;color:#7c2d12}
.chip.s-going{background:#bfdbfe;color:#1e3a8a}
.chip.s-picked{background:#a7f3d0;color:#064e3b}
.chip.s-low{background:#fef08a;color:#713f12}
.chip.s-empty{background:#e5e7eb;color:#4b5563}
.p3-irow{display:flex;gap:8px;padding:8px 0;border-top:1px solid #eee;align-items:flex-start}
.p3-irow img,.p3-irow>i{width:46px;height:46px;border-radius:8px;object-fit:cover;background:#e5e7eb;flex:none;display:block}
.p3-irow b{display:block;font-size:13px}
.p3-irow small{color:#6b7280;display:block}
.p3-ia{display:flex;gap:5px;flex-wrap:wrap;margin-top:5px}
.p3-ia button,.p3-cardfoot button,.p3-mfoot button{border:1px solid #d6d3e0;background:#f8f7fb;border-radius:8px;padding:5px 9px;font:800 11px system-ui,sans-serif;cursor:pointer;color:#17171d}
.p3-ia button.pri,.p3-mfoot button.pri{background:#17171d;color:#fff;border-color:#17171d}
.p3-ia button:hover,.p3-cardfoot button:hover{background:#ece9f5}
.p3-note{color:#6b7280;margin:8px 0}
.p3-cardfoot{margin-top:10px;display:flex;gap:6px;flex-wrap:wrap}
.p3-order{border:1px solid #e6e3ee;border-radius:10px;padding:8px;margin:8px 0}
.p3-order header{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.p3-order header small{color:#6b7280;flex:1}
.p3-miss{margin:6px 0;padding-left:18px;color:#b91c1c;font-weight:700}

/* ---- modals ---- */
.p3-modal{position:absolute;inset:0;z-index:60;background:rgba(5,8,18,.6);display:flex;align-items:center;justify-content:center;padding:12px}
.p3-modal[hidden]{display:none}
.p3-mbox{background:#fff;color:#17171d;border-radius:14px;padding:16px;width:min(520px,100%);max-height:90%;overflow:auto;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.p3-mbox h4{margin:0 0 8px}
.p3-mfoot{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}
.p3-qty{display:block;font-weight:700;margin-top:8px}
.p3-qty input{width:90px;margin-left:8px;padding:4px 6px}
.p3-hist table{width:100%;border-collapse:collapse;font-size:12px}
.p3-hist th,.p3-hist td{text-align:left;padding:4px 6px;border-bottom:1px solid #eee}

.p3-stats b.route{background:#ecfeff;border-color:#67e8f9;color:#155e75}
@media(max-width:700px){
  .p3-search{width:130px}
  .p3-card{left:8px;right:8px;width:auto;top:auto;max-height:55%}
}
@media(prefers-reduced-motion:reduce){.p3-route,.p3-plate.low,.p3-plate.short,.p3-badge.short,.is-moving .p3-empty{animation:none}}
.p3-hud .p3-ib,.p3-hud .p3-grp button{width:auto;flex:none;margin:0}
.p3-hud-full>.p3-ib.wide{flex:none;width:auto}
.p3-hint{left:auto!important;right:8px;bottom:8px;transform:none!important;max-width:46%;text-align:right}
@media(max-width:700px){.p3-hint{display:none}}

/* ---- background refresh: the new board is built hidden, then swapped in ---- */
.dz-pick-sheet.p3-shadow{visibility:hidden!important;pointer-events:none!important}
/* quiet loading: a small pill instead of a full-screen message */
.p3-load{inset:auto!important;left:50%;top:56px;transform:translateX(-50%);display:block!important;background:rgba(17,22,36,.8);padding:5px 14px;border-radius:999px;font-size:12px;border:1px solid rgba(255,255,255,.15)}
.p3-load[hidden]{display:none!important}

/* ---- who put it here ---- */
.p3-who{margin-top:10px;border-top:1px solid #eee;padding-top:8px}
.p3-who h5{margin:0 0 6px;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:#6b7280}
.p3-whoin{background:#f0fdf4;border:1px solid #bbf7d0;border-radius:10px;padding:7px 9px;margin-bottom:6px;font-size:13px}
.p3-whoin small,.p3-wrow small{display:block;color:#6b7280;font-size:11px}
.p3-wholog summary{cursor:pointer;font:800 11px system-ui,sans-serif;color:#374151;margin:6px 0}
.p3-wrow{display:flex;gap:8px;padding:5px 0;border-top:1px solid #f1f1f5;font-size:12px}
.p3-wrow>span{width:14px;flex:none;font-size:10px;padding-top:2px}
.p3-wrow.in>span{color:#16a34a}.p3-wrow.out>span{color:#dc2626}

/* ---- slide left / right ---- */
.p3-slide{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);z-index:26;display:flex;align-items:center;gap:6px;background:rgba(17,22,36,.72);border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:4px 8px;backdrop-filter:blur(6px);width:min(420px,52%)}
.p3-slide button{border:0;background:rgba(255,255,255,.14);color:#f1f5f9;border-radius:50%;width:26px;height:26px;cursor:pointer;font-size:11px;flex:none}
.p3-slide button:hover{background:#22d3ee;color:#06222b}
.p3-slide input[type=range]{flex:1;min-width:0;height:4px;accent-color:#22d3ee;cursor:ew-resize;margin:0}
.p3-ui2 .p3-slide{opacity:.55}.p3-ui2 .p3-slide:hover{opacity:1}
@media(max-width:700px){.p3-slide{width:calc(100% - 20px);bottom:8px}.p3-alerts{bottom:46px;max-width:92%}}

/* ---- card: previous / next ---- */
.p3-cardnav{display:flex;align-items:center;gap:6px;margin:0 34px 8px 0;flex-wrap:wrap}
.p3-cardnav button{border:1px solid #d6d3e0;background:#f8f7fb;border-radius:8px;height:28px;min-width:30px;padding:0 8px;cursor:pointer;font:800 11px system-ui,sans-serif;color:#17171d}
.p3-cardnav button:hover{background:#17171d;color:#fff}
.p3-cardnav button.needb{background:#fff7ed;border-color:#fdba74;color:#9a3412}
.p3-cardnav span{font:800 11px system-ui,sans-serif;color:#6b7280;min-width:42px;text-align:center}
.p3-cardnav label{font:700 11px system-ui,sans-serif;color:#4b5563;display:inline-flex;gap:4px;align-items:center;cursor:pointer}
.p3-cardbody.slide-r{animation:p3sr .28s cubic-bezier(.2,.8,.2,1)}
.p3-cardbody.slide-l{animation:p3sl .28s cubic-bezier(.2,.8,.2,1)}
@keyframes p3sr{from{opacity:0;transform:translateX(46px)}to{opacity:1;transform:none}}
@keyframes p3sl{from{opacity:0;transform:translateX(-46px)}to{opacity:1;transform:none}}
.p3-card{touch-action:pan-y}
@media(prefers-reduced-motion:reduce){.p3-cardbody.slide-r,.p3-cardbody.slide-l{animation:none}}
.p3-hint{bottom:48px!important}

/* ---- find a product ---- */
.p3-findbtn{font-size:13px}
.p3-find{position:absolute;left:8px;top:46px;z-index:45;width:min(430px,calc(100% - 16px));max-height:calc(100% - 64px);display:flex;flex-direction:column;background:#fff;color:#17171d;border-radius:14px;box-shadow:0 14px 40px rgba(0,0,0,.5);padding:10px;font:500 13px system-ui,sans-serif}
.p3-find[hidden]{display:none}
.p3-findtop{display:flex;gap:6px}
.p3-findin{flex:1;height:34px;border:1px solid #d6d3e0;border-radius:9px;padding:0 10px;font:600 14px system-ui,sans-serif}
.p3-findtop button{border:0;background:#eee;border-radius:50%;width:30px;height:30px;font-size:16px;cursor:pointer}
.p3-findreg{display:flex;gap:4px;flex-wrap:wrap;margin:8px 0 6px}
.p3-findreg button{border:1px solid #e0dce8;background:#fff;border-radius:999px;height:26px;padding:0 9px;font:700 11px system-ui,sans-serif;cursor:pointer;color:#17171d}
.p3-findreg button small{color:#6b7280;font-weight:600}
.p3-findreg button.is-on{background:#17171d;color:#fff;border-color:#17171d}.p3-findreg button.is-on small{color:#cfcbe0}
.p3-findres{overflow:auto;min-height:60px}
.p3-fprod{display:flex;gap:9px;padding:9px 0;border-top:1px solid #eee}
.p3-fprod>img,.p3-fprod>i{width:48px;height:48px;border-radius:8px;object-fit:cover;background:#e5e7eb;flex:none}
.p3-fb{min-width:0;flex:1}.p3-fb>b{display:block;font-size:13px}.p3-fb>small{color:#6b7280;display:block}
.p3-freg{margin-top:6px;background:#f8f7fb;border-radius:9px;padding:6px 8px}
.p3-freg h6{margin:0 0 4px;font:800 11px system-ui,sans-serif;display:flex;gap:6px;align-items:center}
.p3-freg h6 em{font-style:normal;background:#e0e7ff;color:#3730a3;border-radius:999px;padding:1px 7px;font-size:10px}
.p3-fgo{display:flex;width:100%;align-items:center;gap:4px;text-align:left;border:1px solid #d6d3e0;background:#fff;border-radius:8px;padding:5px 8px;margin:3px 0;cursor:pointer;font:600 12px system-ui,sans-serif;color:#17171d}
.p3-fgo i{margin-left:auto;font-style:normal;font-weight:800;color:#0e7490}
.p3-fgo:hover{background:#ecfeff;border-color:#22d3ee}
.p3-fgo.cart{border-color:#fdba74}.p3-fgo.drop{border-color:#93c5fd}
.p3-ping.p3-plate,.p3-ping.p3-cartsign{box-shadow:0 0 0 4px #22d3ee,0 0 24px #22d3ee;animation:p3blink .8s ease-in-out infinite}
.p3-ping .f{outline:4px solid #22d3ee;outline-offset:-2px}
.p3-ui2 .p3-find{top:40px}

/* ---- tools drawer, scan, offline ---- */
.p3-offline{background:#b91c1c;color:#fff;border-radius:999px;padding:4px 10px;font:800 11px system-ui,sans-serif}
.p3-offline[hidden]{display:none}
.p3-drawer{position:absolute;left:8px;top:46px;z-index:45;width:min(400px,calc(100% - 16px));max-height:calc(100% - 64px);display:flex;flex-direction:column;background:#fff;color:#17171d;border-radius:14px;box-shadow:0 14px 40px rgba(0,0,0,.5);padding:10px;font:500 13px system-ui,sans-serif}
.p3-drawer[hidden]{display:none}
.p3-ui2 .p3-drawer{top:40px}
.p3-dtabs{display:flex;gap:4px;margin-bottom:8px}
.p3-dtabs button{border:1px solid #e0dce8;background:#fff;border-radius:999px;height:28px;padding:0 12px;font:800 11px system-ui,sans-serif;cursor:pointer;color:#17171d}
.p3-dtabs button.is-on{background:#17171d;color:#fff;border-color:#17171d}
.p3-dtabs button[data-p3-dx]{margin-left:auto;border:0;background:#eee;border-radius:50%;width:28px;padding:0;font-size:15px}
.p3-dbody{overflow:auto;min-height:60px}
.p3-prow{display:flex;gap:8px;align-items:flex-start;padding:8px 2px;border-top:1px solid #eee;cursor:pointer}
.p3-prow .n{flex:none;width:24px;height:24px;border-radius:50%;background:#22d3ee;color:#06222b;font:900 12px/24px system-ui,sans-serif;text-align:center}
.p3-prow small{display:block;color:#6b7280}
.p3-prow input:checked~div{opacity:.45;text-decoration:line-through}
.p3-arow{display:flex;gap:8px;padding:7px 2px;border-top:1px solid #eee}
.p3-arow.go{cursor:pointer}.p3-arow.go:hover{background:#f5f3ff}
.p3-arow>span{width:14px;flex:none;font-size:10px;padding-top:3px}.p3-arow .in{color:#16a34a}.p3-arow .out{color:#dc2626}
.p3-arow small{display:block;color:#6b7280;font-size:11px}
.p3-rrow{border-top:1px solid #eee;padding:8px 2px}
.p3-rrow>div{cursor:pointer}.p3-rrow em.bad{font-style:normal;background:#fee2e2;color:#991b1b;border-radius:999px;padding:1px 7px;font-size:10px;font-weight:800}
.p3-rrow button{border:1px solid #67e8f9;background:#ecfeff;border-radius:8px;padding:5px 9px;margin:5px 5px 0 0;font:800 11px system-ui,sans-serif;cursor:pointer;color:#155e75}
.p3-rrow button:hover{background:#22d3ee;color:#06222b}
.p3-scanbox{margin-top:8px}.p3-scanbox video{width:100%;border-radius:10px;background:#000;max-height:220px}
.p3-findtop button[data-p3-scan]{font-size:14px}

/* ---- v8: scanner bridge, open-in-3D, transfers on the way ---- */
.p3-scanloc{display:flex;flex-direction:column;gap:4px;margin:0 0 10px}
.p3-scanloc button{align-self:flex-start;border:0;border-radius:10px;background:#0e7490;color:#fff;font:800 13px system-ui,sans-serif;padding:9px 14px;cursor:pointer}
.p3-scanloc small{color:#6b7280;font-size:12px}
.p3-locatebar{position:fixed;left:50%;top:14px;transform:translateX(-50%);z-index:300000;display:flex;gap:10px;align-items:center;background:#0e7490;color:#fff;border-radius:999px;padding:9px 16px;font:800 13px system-ui,sans-serif;box-shadow:0 8px 28px rgba(0,0,0,.35)}
.p3-locatebar button{border:0;border-radius:999px;background:#fff;color:#0e7490;font:800 12px system-ui,sans-serif;padding:4px 12px;cursor:pointer}
.p3-open3d{margin-right:8px;background:#0e7490!important;color:#fff!important;border-color:#0e7490!important}
.p3-cammount{border-radius:10px;overflow:hidden;background:#000;min-height:40px}
.p3-linkbtn{border:0;background:none;color:#0e7490;font:700 12px system-ui,sans-serif;cursor:pointer;padding:0;text-decoration:underline}
.p3-transitmat{background:repeating-linear-gradient(45deg,rgba(59,130,246,.28) 0 14px,rgba(15,23,42,.3) 14px 28px);border:2px dashed #60a5fa;border-radius:6px;cursor:pointer}
.p3-transitsign{background:#1d4ed8}
.p3-incoming .f{background:linear-gradient(135deg,#bfdbfe,#60a5fa);border-color:#1d4ed8}
.p3-incoming .f.top{background:linear-gradient(135deg,#dbeafe,#93c5fd)}
.p3-tfocus{border-color:#22d3ee;box-shadow:0 0 0 2px #22d3ee}
.p3-order .p3-qty input[type=text]{width:130px}

/* professional icons replacing emoji */
.p3-i{width:16px;height:16px;flex:none;vertical-align:-3px;display:inline-block}
.p3-ib .p3-i{width:17px;height:17px;vertical-align:middle}
.p3-flag{font-style:normal;display:inline-block;min-width:22px;text-align:center;padding:1px 4px;border-radius:5px;background:rgba(100,116,139,.22);font:900 9px/1.5 system-ui,sans-serif;letter-spacing:.04em;margin-right:2px;vertical-align:1px}
.p3-alerts button .p3-i,[data-p3-alerts] button .p3-i{margin-right:2px}
.p3-wrow>span .p3-i,.p3-arow>span .p3-i{width:14px;height:14px}
.heat-cnt .p3-heat{display:block}
.heat-cnt .p3-heat[data-hc="0"]{background:rgba(239,68,68,.55)}
.heat-cnt .p3-heat[data-hc="1"]{background:rgba(249,115,22,.55)}
.heat-cnt .p3-heat[data-hc="2"]{background:rgba(250,204,21,.55)}
.heat-cnt .p3-heat[data-hc="3"]{background:rgba(34,197,94,.6)}

/* ===== dark mode (the app's theme switch adds .dark to <body>) ===== */
.dark .p3-card,.dark .p3-find,.dark .p3-drawer,.dark .p3-mbox{background:#151520;color:#ececf4;border:1px solid #2e2e3c;box-shadow:0 14px 40px rgba(0,0,0,.65)}
.dark .p3-note,.dark .p3-irow small,.dark .p3-order header small,.dark .p3-whoin small,.dark .p3-wrow small,.dark .p3-arow small,.dark .p3-prow small,.dark .p3-findreg button small,.dark .p3-cardnav span,.dark .p3-cardnav label{color:#a3a3b8}
.dark .p3-irow,.dark .p3-wrow,.dark .p3-arow,.dark .p3-prow,.dark .p3-rrow{border-color:#2b2b38}
.dark .p3-irow img,.dark .p3-irow>i{background:#262634}
.dark .p3-cardx,.dark .p3-findtop button,.dark .p3-dtabs button[data-p3-dx]{background:#262634;color:#e5e5f0}
.dark .p3-ia button,.dark .p3-cardfoot button,.dark .p3-mfoot button,.dark .p3-cardnav button,.dark .p3-dtabs button,.dark .p3-findreg button{background:#1f1f2c;color:#e8e8f2;border-color:#3a3a4a}
.dark .p3-ia button:hover,.dark .p3-cardfoot button:hover,.dark .p3-cardnav button:hover,.dark .p3-dtabs button:hover,.dark .p3-findreg button:hover{background:#2c2c3d;color:#fff}
.dark .p3-ia button.pri,.dark .p3-mfoot button.pri,.dark .p3-dtabs button.is-on,.dark .p3-findreg button.is-on{background:#8b5cf6;border-color:#8b5cf6;color:#fff}
.dark .p3-cardnav button.needb{background:#3a2412;border-color:#9a5a1f;color:#fdba74}
.dark .p3-order{border-color:#2e2e3c;background:#191924}
.dark .p3-whoin{background:#12301f;border-color:#1f5a38;color:#d1fae5}
.dark .p3-wholog summary{color:#c4b5fd}
.dark .p3-arow.go:hover{background:#232336}
.dark .p3-rrow button{background:#10303a;border-color:#1f6a7a;color:#a5f3fc}.dark .p3-rrow button:hover{background:#22d3ee;color:#06222b}
.dark .p3-rrow em.bad{background:#4c1d1d;color:#fecaca}
.dark .p3-findin,.dark .p3-qty input,.dark .p3-mbox input,.dark .p3-mbox select,.dark .p3-drawer input,.dark .p3-drawer select,.dark .p3-card input,.dark .p3-find input{background:#1b1b27;color:#ececf4;border:1px solid #3a3a4a;border-radius:8px}
.dark .p3-hist table,.dark .p3-hist td,.dark .p3-hist th{border-color:#2e2e3c;color:#ddd}
.dark .p3-hist th{background:#1c1c28}
.dark .chip{filter:none}
.dark .p3-fgo{background:#1b1b27;border-color:#343440;color:#e8e8f2}.dark .p3-freg h6{color:#a3a3b8}
.dark .p3-prow:hover{background:#1b1b27}
.dark .p3-prow .n{background:#22d3ee;color:#06222b}
.dark .p3-banner{background:#1b1b27;color:#e8e8f2;border-color:#3a3a4a}
.dark .p3-slide{background:rgba(21,21,32,.9)}
.dark .p3-hint{background:rgba(21,21,32,.82);color:#c9c9da}
/* dark mode: the top bar of the Pickup / Drop-off modal */
.dark .p3-seg{background:#1b1b27;border-color:#3a3a4a}
.dark .p3-seg button{color:#e8e8f2}.dark .p3-seg button.is-on{background:#8b5cf6;color:#fff}
.dark .p3-regions button{background:#1b1b27;border-color:#3a3a4a;color:#e8e8f2}
.dark .p3-regions button small{color:#a3a3b8}
.dark .p3-regions button.is-on{background:#8b5cf6;border-color:#8b5cf6;color:#fff}.dark .p3-regions button.is-on small{color:#ede9fe}
.dark .p3-legend{color:#c9c9da}
.dark .p3-legend i{border-color:rgba(255,255,255,.3)}
.dark .p3-stats b{background:#1b1b27;border-color:#343440;color:#ececf4}
.dark .p3-stats b em{color:#a3a3b8}
.dark .p3-stats b.hot{background:#3a2412;border-color:#9a5a1f;color:#fdba74}
.dark .p3-stats b.route{background:#0f2f38;border-color:#1f6a7a;color:#a5f3fc}
.dark .p3-live{color:#34d399}
.dark .p3-open3d,.dark .p3-locatebar{filter:none}
.p3-cardfoot .p3-clearbtn{border-color:#e3b4b4;background:#fdf1f1;color:#a12a2a}
.p3-cardfoot .p3-clearbtn:hover{background:#f9dcdc}
.p3-clearlist{margin:8px 0;padding-left:18px;font:600 12px system-ui,sans-serif;max-height:180px;overflow:auto}
.dz-stockops-all{margin-left:6px;border:1px solid #d6d3e0;background:#f8f7fb;border-radius:8px;padding:3px 8px;font:800 11px system-ui,sans-serif;cursor:pointer;color:#17171d}
.dark .p3-cardfoot .p3-clearbtn{background:#3a1f24;color:#ffb4b4;border-color:#6a3038}
.dark .p3-cardfoot .p3-clearbtn:hover{background:#4a2630}
.dark .dz-stockops-all{background:#1f1f2c;color:#e8e8f2;border-color:#3a3a4a}
.p3-histlist{margin:8px 0;max-height:260px;overflow:auto;font:600 12px system-ui,sans-serif}
.p3-histrow{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid #e6e3ee}
.p3-histrow small{display:block;font-weight:500;opacity:.65}
.p3-histrow em{font-size:11px;opacity:.6}
.p3-histrow button{border:1px solid #d6d3e0;background:#f8f7fb;border-radius:8px;padding:4px 9px;font:800 11px system-ui,sans-serif;cursor:pointer;color:#17171d}
.dark .p3-histrow{border-color:#3a3a4a}
.dark .p3-histrow button{background:#1f1f2c;color:#e8e8f2;border-color:#3a3a4a}
.p3-codes{margin:8px 0 6px}
.p3-codesbtn{display:flex;align-items:center;gap:6px;width:100%;border:1px solid #d6d3e0;background:#f8f7fb;border-radius:8px;padding:6px 10px;font:800 11px system-ui,sans-serif;cursor:pointer;color:#17171d;text-align:left}
.p3-codesbtn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2}
.p3-codesbtn span{margin-left:auto;opacity:.6;font-weight:700}
.p3-codesbox{display:grid;justify-items:center;gap:4px;margin-top:6px;padding:8px;border:1px dashed #d9ccf5;border-radius:10px;background:#fff}
.p3-codesbox[hidden],.dz-drop-cart .dz-shelf-codes[hidden]{display:none}
.p3-codesbox code{font-size:10px;word-break:break-all;color:#17171d}
.dz-cart-codes-btn{border:1px solid #d6d3e0;background:#f8f7fb;border-radius:8px;padding:4px 9px;font:800 11px system-ui,sans-serif;cursor:pointer;color:#17171d;margin-left:auto}
.dz-cart-codes-btn.is-open{background:#ece9f5}
.dark .p3-codesbtn,.dark .dz-cart-codes-btn{background:#1f1f2c;color:#e8e8f2;border-color:#3a3a4a}
.dark .dz-cart-codes-btn.is-open{background:#2c2c3d}

/* ---- DROP off: Dock 3 door that rolls up, trailer, conveyor from the ready-to-ship lane ---- */
.p3-dockhole{background:#0b0f19;border:3px solid #263149;overflow:hidden}
.p3-trailer{position:absolute;inset:0;background:linear-gradient(90deg,#0b0f19 0,#1b2438 18%,#263149 50%,#1b2438 82%,#0b0f19 100%)}
.p3-trailer i{position:absolute;top:0;bottom:0;width:2px;background:rgba(148,163,184,.25)}
.p3-trailer i:nth-child(1){left:25%}.p3-trailer i:nth-child(2){left:50%}.p3-trailer i:nth-child(3){left:75%}
.p3-trailer span{position:absolute;left:0;right:0;top:12px;text-align:center;font:900 11px system-ui,sans-serif;letter-spacing:.2em;color:#64748b}
.p3-trailer em{position:absolute;bottom:10px;left:14px;width:12px;height:12px;border-radius:50%;background:#ef4444;box-shadow:0 0 12px #ef4444}
.p3-trailer em.r{left:auto;right:14px}
.p3-door-roll{transition:clip-path 1.6s ease-in-out;clip-path:inset(0 0 0 0)}
.p3-door-roll.is-open{animation:p3doorup 1.8s ease-in-out forwards}
@keyframes p3doorup{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 0 88% 0)}}
.p3-door-roll.is-open b{display:none}
.p3-docksign{background:#1f2638;color:#fbbf24;font:900 12px/22px system-ui,sans-serif;letter-spacing:.18em;text-align:center;border-radius:3px}
.p3-docksign.is-open{background:#14532d;color:#bbf7d0}
.p3-leveler{background:repeating-linear-gradient(90deg,#64748b 0 6px,#94a3b8 6px 12px);border:1px solid #334155;opacity:.55}
.p3-leveler.is-open{opacity:1}
.p3-dockled .f{background:#7f1d1d;box-shadow:0 0 10px #7f1d1d}
.p3-dockled.is-open .f{background:#22c55e;box-shadow:0 0 14px #22c55e}
.p3-belt .f{background:#1f2937}
.p3-belt .f.top{background:repeating-linear-gradient(0deg,#374151 0 10px,#4b5563 10px 12px)}
.p3-belt.is-run .f.top{animation:p3beltroll .9s linear infinite}
@keyframes p3beltroll{from{background-position:0 0}to{background-position:0 -12px}}
.p3-beltrail .f{background:#f59e0b;border:1px solid #92400e}
.p3-beltlabel{display:flex;align-items:center;justify-content:center;font:900 11px/1 system-ui,sans-serif;letter-spacing:.14em;color:#fef3c7;background:#92400e;border-radius:3px}
.p3-belt-go{position:absolute;left:0;top:0;transform-style:preserve-3d;animation:p3beltgo 9.6s linear infinite}
@keyframes p3beltgo{0%{transform:translate3d(0,0,0);visibility:visible}88%{transform:translate3d(0,var(--p3d),0);visibility:visible}89%,100%{transform:translate3d(0,var(--p3d),0);visibility:hidden}}
@media (prefers-reduced-motion:reduce){.p3-belt-go{animation:none}.p3-belt.is-run .f.top{animation:none}.p3-door-roll.is-open{animation:none;clip-path:inset(0 0 88% 0)}}

/* DROP off: one Open / Close bar for the whole cart list (4 carts with their QR codes and barcodes), closed by default so the 3D gets the room */
.dz-drop-listbar{display:none}
.dz-pick-sheet.p3-on.p3-kind-drop .dz-drop-listbar{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;margin-top:10px;padding:9px 14px;border:1px solid #d6d3e0;border-radius:12px;background:#f8f7fb;color:#17171d;font:800 12px system-ui,sans-serif;cursor:pointer;flex:none}
.dz-drop-listbar span{border:1px solid #d6d3e0;border-radius:999px;padding:3px 12px;background:#fff;font-weight:900}
.dz-pick-sheet.p3-on.p3-kind-drop.dz-list-closed .dz-drop-list{display:none}
.dz-pick-sheet.p3-on.p3-kind-drop.dz-list-closed .p3-wrap{height:min(66vh,700px)}
.dark .dz-drop-listbar,body.dark .dz-drop-listbar{background:#1f1f2c;color:#e8e8f2;border-color:#3a3a4a}
.dark .dz-drop-listbar span{background:#2c2c3d;color:#fff;border-color:#3a3a4a}

/* real 3D trailer behind the open Dock 3 door */
.p3-tfloor{background:repeating-linear-gradient(90deg,#4b3a28 0 18px,#5a4630 18px 20px);box-shadow:inset 0 0 40px rgba(0,0,0,.6)}
.p3-twall{background:repeating-linear-gradient(90deg,#e5e7eb 0 22px,#cbd5e1 22px 24px);filter:brightness(.62)}
.p3-twall.r{filter:brightness(.5)}
.p3-tback{background:linear-gradient(#0b0f19,#1b2438);display:flex;align-items:center;justify-content:center}
.p3-tback span{font:900 11px system-ui,sans-serif;letter-spacing:.2em;color:#64748b}
.p3-troof{background:linear-gradient(90deg,#d1d5db,#e5e7eb);filter:brightness(.7);pointer-events:none}
.p3-trib{background:rgba(15,23,42,.35);pointer-events:none}
.p3-cargo .f{background:#b88a4a;border:1px solid #7c5a2b}
.p3-cargo .f.top{background:#d6a65f}
.p3-tbumper .f{background:#1f2937;border:1px solid #0b0f19}