:root{
  --green:#2e7d52; --green-d:#1f3d2b; --green-l:#3f9d6a;
  --ink:#15201a; --muted:#6b7670; --line:#e4e7e4; --bg:#f4f5f4; --card:#fff;
  --orange:#f2a01d; --orange-d:#d98a00; --red:#d8513f; --blue:#2f74d0;
  --soft:#fbfcfb; --soft2:#e9ece9; --pill:#eef1ee; --pill-ink:#3a4540; --thumb:#eef1ee;
  --track:#e3e7e3; --accent-soft:#f3f7f4; --topbar:rgba(244,245,244,.92);
  --warm-soft:#fffaf1; --green-soft:#f1f9f4; --red-soft:#fdecea; --garmin-soft:#fff7e8; --loc-soft:#e9e4fb; --loc-ink:#5b3fb0;
  --radius:16px; --shadow:0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.04);
}
/* Dark theme — when the OS prefers dark (and not forced light), or forced via data-theme="dark".
   Only VARIABLES are overridden here; every surface below reads them, so the whole UI recolors. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --green:#46a875; --green-l:#5cc18c; --ink:#e7ece8; --muted:#9aa39d;
    --line:#2b322e; --bg:#0f130e; --card:#1a1f1a; --shadow:0 1px 3px rgba(0,0,0,.5);
    --soft:#232a24; --soft2:#2b322c; --pill:#2b322c; --pill-ink:#cdd5cf; --thumb:#262d27;
    --track:#2b322e; --accent-soft:#1b231d; --topbar:rgba(16,20,15,.92);
    --warm-soft:#241c10; --green-soft:#13241a; --red-soft:#2a1512; --garmin-soft:#241c10; --loc-soft:#2e2747; --loc-ink:#c3b5f0;
  }
}
:root[data-theme="dark"]{
  --green:#46a875; --green-l:#5cc18c; --ink:#e7ece8; --muted:#9aa39d;
  --line:#2b322e; --bg:#0f130e; --card:#1a1f1a; --shadow:0 1px 3px rgba(0,0,0,.5);
  --soft:#232a24; --soft2:#2b322c; --pill:#2b322c; --pill-ink:#cdd5cf; --thumb:#262d27;
  --track:#2b322e; --accent-soft:#1b231d; --topbar:rgba(16,20,15,.92);
  --warm-soft:#241c10; --green-soft:#13241a; --red-soft:#2a1512; --garmin-soft:#241c10; --loc-soft:#2e2747; --loc-ink:#c3b5f0;
}
a.pcard-title, a.tf-title{text-decoration:none; color:inherit; display:block}
.garmin-note{border:1.5px solid var(--orange); background:var(--garmin-soft)}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  background:var(--bg); color:var(--ink); -webkit-tap-highlight-color:transparent;
  font-size:16px; line-height:1.35;
}
body.busy{cursor:progress}
#app{max-width:560px; margin:0 auto; min-height:100vh; display:flex; flex-direction:column}
.app-footer{margin-top:auto; text-align:center; padding:10px 8px calc(12px + env(safe-area-inset-bottom))}
.app-footer .link{color:var(--muted); font-size:.72rem; opacity:.8; text-decoration:none}
.screen{padding:12px 14px 120px}
.screen.center{display:flex; align-items:center; justify-content:center; flex:1; min-height:0}
.muted{color:var(--muted)}
.center{text-align:center}
.err{color:var(--red); font-size:.86rem; margin-top:6px}

/* top bar */
.topbar{
  position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:8px;
  padding:14px 14px calc(14px) ; background:var(--topbar); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.topbar h1{font-size:1.18rem; margin:0; letter-spacing:.3px}
.topbar p{margin:0; font-size:.78rem; color:var(--muted)}
.title-wrap{flex:1; text-align:center}
.top-actions{display:flex; gap:4px}
.icon-btn{
  width:40px; height:40px; border:none; border-radius:50%; background:var(--soft2); color:var(--ink);
  font-size:1.1rem; display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.icon-btn.ghost{background:transparent}
.icon-btn.light{background:rgba(255,255,255,.2); color:#fff}
.icon-btn:active{transform:scale(.94)}
/* Refresh spinner: the ⟳ button spins while metrics reload. */
.icon-btn.spin{animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* Orientation toggle: a phone icon, shown SIDEWAYS while we're forcing portrait
   (tap → landscape), upright while forcing landscape (tap → portrait). */
.orient-btn{transition:transform .15s}
html.force-portrait .orient-btn{transform:rotate(90deg)}
html.force-landscape .orient-btn{transform:none}

/* ---- In-app orientation lock for iOS (which ignores the manifest / JS lock). When the
   chosen mode and the device's physical orientation disagree, counter-rotate the whole page
   90° so it still reads upright. Gated to touch devices so desktop/preview is never rotated. */
@media screen and (orientation: landscape) and (pointer: coarse){
  html.force-portrait body{
    transform:rotate(-90deg);
    transform-origin:left top;
    width:100vh; height:100vw;
    overflow-x:hidden;
    position:absolute; top:100%; left:0;
  }
}
@media screen and (orientation: portrait) and (pointer: coarse){
  html.force-landscape body{
    transform:rotate(90deg);
    transform-origin:left top;
    width:100vh; height:100vw;
    overflow-x:hidden;
    position:absolute; top:0; left:100%;
  }
}
/* Landscape mode: the portrait 560px column would leave big blank side margins, so let the
   app fill the available width (with a little breathing room) instead of a narrow centre strip. */
html.force-landscape #app{max-width:none}
html.force-landscape .screen{padding-left:24px; padding-right:24px}

/* cards */
.card{background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px; margin:0 0 14px}
.card h2{font-size:.95rem; margin:0 0 10px; text-transform:uppercase; letter-spacing:.4px; color:var(--muted)}
.row{display:flex; gap:8px; align-items:center}
.dash{color:var(--muted)}
input,select,textarea{
  width:100%; padding:13px 14px; border:1.5px solid var(--line); border-radius:12px; font-size:1rem;
  background:var(--soft); color:var(--ink); font-family:inherit;
}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--green-l)}
textarea{resize:vertical}
.field{display:block; margin-bottom:12px}
.field>span{display:block; font-size:.74rem; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); margin-bottom:5px}

/* buttons */
.btn{
  border:none; border-radius:12px; padding:13px 16px; font-size:1rem; font-weight:600; cursor:pointer;
  background:var(--soft2); color:var(--ink);
}
.btn:active{transform:scale(.98)}
.btn.primary{background:var(--green); color:#fff}
.btn.ghost{background:transparent; color:var(--green); border:1.5px solid var(--line)}
.btn.danger{background:var(--card); color:var(--red); border:1.5px solid var(--red-soft)}
.btn.block{display:block; width:100%; margin-top:10px}
.btn.resume{background:var(--green-soft); color:var(--green); border:1.5px solid var(--line); margin-bottom:14px; font-weight:600}
.btn[disabled]{opacity:.5}

.chips{display:flex; flex-wrap:wrap; gap:8px}
/* Home Tools as a fixed 3-across tile grid (label centred, wraps to 2 lines if long). */
.tools-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.tools-grid .chip{display:flex; align-items:center; justify-content:center; text-align:center; padding:12px 8px; border-radius:14px; font-size:.82rem; line-height:1.2; min-height:60px}
.chip{border:1.5px solid var(--line); background:var(--soft); padding:10px 16px; border-radius:999px; font-weight:600; cursor:pointer}
.chip:active{background:#eef2ee}

/* login */
.login{width:min(92vw,400px); text-align:center; padding:28px 22px}
.brand{font-size:1.5rem; font-weight:800; letter-spacing:1px; margin-bottom:6px}
.brand span{color:var(--green); font-weight:700}
.login input{margin:14px 0 12px; text-align:center}

/* staff PIN sign-in */
.staff-btn{font-weight:700; font-size:1.05rem}

/* progress */
.progress-head{display:flex; justify-content:space-between; align-items:baseline; margin:4px 2px 8px; font-family:ui-monospace,Menlo,monospace}
.progress-head .count{font-weight:700}
.bar{height:6px; background:var(--track); border-radius:999px; overflow:hidden; margin-bottom:12px}
.bar span{display:block; height:100%; background:var(--green); transition:width .25s}
.search-row{margin-bottom:8px}
.toggle-line{display:flex; align-items:center; gap:9px; color:var(--muted); font-size:.92rem; margin:8px 2px}
.toggle-line input{width:auto}

/* pick card */
.list{display:flex; flex-direction:column; gap:12px}
.pcard{background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; border:2px solid transparent}
.pcard.done{opacity:.62}
.pcard.oos{border-color:var(--orange)}
.pcard.pushed{opacity:.8}
.pcard-main{display:flex; gap:12px; padding:13px 14px 8px}
.thumb{width:62px; height:62px; border-radius:12px; background:var(--pill); flex:0 0 auto; position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden}
.thumb img{width:100%; height:100%; object-fit:cover}
.thumb .ph{color:var(--muted); font-size:1.6rem}
.thumb.bundle{outline:3px solid var(--orange); outline-offset:-1px}
.thumb.sm{width:46px; height:46px}
.qty-badge{
  position:absolute; right:-6px; bottom:-6px; background:var(--green-d); color:#fff;
  font-weight:800; font-size:1.05rem; min-width:30px; height:30px; border-radius:9px;
  display:flex; align-items:center; justify-content:center; padding:0 6px; box-shadow:var(--shadow); border:2px solid #fff;
}
.pcard-body{flex:1; min-width:0}
.pcard-title{font-weight:700; font-size:1rem; line-height:1.25; display:flex; gap:6px; align-items:flex-start}
.bundle-dot{width:14px; height:14px; border-radius:50%; background:var(--orange); flex:0 0 auto; margin-top:3px; box-shadow:0 0 0 3px rgba(242,160,29,.25)}
.bundle-dot.big{width:16px; height:16px; display:inline-block; vertical-align:middle}
.sku{display:inline-block; font-family:ui-monospace,Menlo,monospace; font-size:.82rem; color:var(--ink); text-decoration:none; margin:3px 0; cursor:pointer}
.meta-row{display:flex; flex-wrap:wrap; gap:6px; margin:5px 0}
.pill{font-size:.74rem; padding:3px 9px; border-radius:999px; background:var(--pill); color:var(--pill-ink); font-weight:600}
.pill.loc{background:var(--loc-soft); color:var(--loc-ink)}   /* purple location chip */
.pill.note{background:var(--warm-soft); color:var(--orange-d)}
.pill.warn{background:var(--red-soft); color:var(--red)}
.pill.muted{background:var(--pill); color:var(--muted)}
.orders-row{display:flex; flex-wrap:wrap; gap:6px; margin-top:6px}
.ord-chip{font-size:.78rem; background:var(--pill); padding:4px 10px; border-radius:8px; color:var(--ink); text-decoration:none; font-weight:600; cursor:pointer}
.ord-chip.bundled{background:#fff1d9; color:var(--orange-d)}
.ord-chip.combined{background:#dceaff; color:#1b4f9c; box-shadow:inset 0 0 0 1.5px #1b4f9c}
/* Combined-order fulfil: blue card in the list + banner + "best label" tag on its screen. */
.ocard.combined-card{box-shadow:inset 0 0 0 2px #1b4f9c; background:#eef4ff}
.combined-banner{background:#dceaff; color:#1b4f9c; border-radius:10px; padding:10px 12px; margin-bottom:12px; font-size:.9rem; line-height:1.35}
.mini-tag.best{background:#1b4f9c; color:#fff; border-radius:6px; padding:1px 7px; font-size:.7rem; font-weight:700}
.persist-warn{background:#3a1714; color:#ffb9ad; border:1px solid #6b2a22; border-radius:10px; padding:10px 12px; margin-bottom:12px; font-size:.85rem; line-height:1.35}
.pcard-count{font-family:ui-monospace,Menlo,monospace; font-weight:800; color:var(--muted); align-self:center; min-width:42px; text-align:right}
.pcard-count.ok{color:var(--green)}
.pcard-count.multi{color:var(--orange); font-size:1.3rem}
.pcard.oos .pcard-count{color:var(--orange-d)}

.pcard-actions{display:flex; gap:8px; align-items:center; padding:8px 12px 12px}
.pcard-actions .spacer{flex:1}
.act{border:none; border-radius:11px; height:46px; min-width:52px; font-size:1.15rem; font-weight:700; cursor:pointer; background:var(--soft2); color:var(--ink); display:flex; align-items:center; justify-content:center}
.act:active{transform:scale(.95)}
.act.oos{background:var(--orange); color:#fff; min-width:74px; font-size:.82rem; font-weight:800; gap:4px}
.act.dark{background:#566; color:#fff}
.act.green{background:var(--green-d); color:#fff}
.act.tick{background:var(--green); color:#fff}

.sticky-bottom{position:fixed; left:50%; transform:translateX(-50%); bottom:14px; width:min(532px,calc(100vw - 28px)); z-index:15; box-shadow:0 6px 20px rgba(31,61,43,.35)}
.sticky-bottom:active{transform:translateX(-50%) scale(.99)}

/* fulfillment */
.fulfil-search-row{margin-bottom:10px}
.fulfil-search-row input{width:100%; box-sizing:border-box}
.tabs{display:flex; gap:8px; overflow-x:auto; padding:2px 0 12px; -webkit-overflow-scrolling:touch}
.tab{flex:0 0 auto; border:1.5px solid var(--line); background:var(--soft); border-radius:999px; padding:9px 15px; font-weight:600; cursor:pointer; display:flex; gap:6px; align-items:center}
.tab.active{background:var(--green-d); color:#fff; border-color:var(--green-d)}
.tab em{font-style:normal; opacity:.7; font-size:.82rem}
.ocard{background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:14px; cursor:pointer}
.ocard-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:4px}
.ocard-top strong{font-size:1.15rem}
.ocard-sub{color:var(--muted); font-size:.92rem; margin-bottom:8px}
.ocard-foot{display:flex; justify-content:space-between; color:var(--muted); font-size:.84rem; border-top:1px solid var(--line); padding-top:8px}
.badge{font-size:.72rem; font-weight:800; text-transform:uppercase; padding:4px 10px; border-radius:7px; letter-spacing:.4px}
.badge.express{background:#fbe6cf; color:var(--orange-d)}
.badge.standard{background:#d9e7fb; color:var(--blue)}
.badge.international{background:#e6e0fb; color:#5b3fb0}
.badge.other{background:var(--pill); color:var(--muted)}

/* pack detail */
.ship-to .label{font-size:.72rem; letter-spacing:.5px; color:var(--muted); font-weight:700}
.ship-name{font-size:1.5rem; font-weight:800; margin:2px 0 2px}
.link{color:var(--green); font-weight:600; text-decoration:none; display:inline-block; margin-top:8px; cursor:pointer}
.pack-item{display:flex; flex-direction:column; gap:6px; padding:9px 0; border-bottom:1px solid var(--line)}
.pack-item:last-child{border-bottom:none}
.pi-top{display:flex; gap:11px; align-items:flex-start}
.pi-body{flex:1; min-width:0}
.pi-actions{display:flex; flex-direction:column; align-items:flex-end; gap:6px; align-self:center; flex:0 0 auto}
.pi-btns{display:flex; gap:8px; justify-content:flex-end}
.pi-title{font-weight:700; font-size:.95rem; line-height:1.25; color:var(--ink); text-decoration:none; display:block}
.pi-scan{flex:0 0 auto; width:40px; height:40px; border:1.5px solid var(--line); border-radius:10px; background:var(--soft2); color:var(--ink); font-size:1rem; cursor:pointer}
.pi-scan:active{transform:scale(.95)}
.pi-count{flex:0 0 auto; min-width:42px; height:40px; border:1.5px solid var(--line); border-radius:10px; background:var(--card); color:var(--ink); font-family:ui-monospace,Menlo,monospace; font-weight:800; font-size:1rem; cursor:pointer}
.pi-count:active{transform:scale(.95)}
.pi-count.multi{color:var(--orange); border-color:var(--orange); font-size:1.4rem}
.pi-count.ok{background:var(--green); color:#fff; border-color:var(--green)}
.bundle-box{border:2px solid var(--orange); border-radius:13px; padding:6px 12px; margin:0 0 12px; background:var(--warm-soft)}
.bundle-head{font-size:.82rem; font-weight:800; color:var(--orange-d); padding:7px 0 3px; display:flex; gap:7px; align-items:center}
.bundle-head em{font-style:normal; font-weight:600; color:var(--muted); margin-left:auto; font-size:.74rem}

/* scanner */
.scan-modal{position:fixed; inset:0; background:#0b0f0c; z-index:100; display:none; flex-direction:column}
.scan-modal.open{display:flex}
.scan-head{display:flex; justify-content:space-between; align-items:center; padding:16px; color:#fff; font-weight:700}
.scan-head-actions{display:flex; gap:8px}
#scan-macro.on{background:var(--green); color:#fff}
#scan-ocr{font-size:.95rem; font-weight:800}
#scan-ocr.on{background:var(--green); color:#fff}
.scan-ocr-list{max-height:34vh; overflow-y:auto; margin:10px 14px 4px; display:flex; flex-direction:column; gap:6px; -webkit-overflow-scrolling:touch}
.scan-ocr-row{display:block; width:100%; text-align:left; padding:12px 14px; border:1.5px solid rgba(255,255,255,.18); border-radius:10px; background:rgba(255,255,255,.08); color:#fff; font-weight:800; font-size:1rem; letter-spacing:.3px; cursor:pointer}
.scan-ocr-row:active{transform:scale(.99)}
.scan-ocr-row.picked{background:var(--green); border-color:var(--green)}
.scan-ocr-row.picked::after{content:' ✓'}
.qr-region{flex:1; min-height:0}
#qr-reader-region video{object-fit:cover}
/* tap-to-focus ring */
.focus-ring{position:absolute; width:64px; height:64px; margin:-32px 0 0 -32px; border:2px solid #fff; border-radius:50%; box-shadow:0 0 0 1px rgba(0,0,0,.35); pointer-events:none; z-index:110; animation:focusPulse .7s ease-out forwards}
@keyframes focusPulse{0%{transform:scale(1.4);opacity:0} 30%{transform:scale(1);opacity:1} 100%{transform:scale(.85);opacity:0}}
/* Floating controls overlay — pinned to the bottom of the scanner so the photo button
   is ALWAYS visible regardless of how html5-qrcode sizes the video. */
.scan-foot{position:absolute; left:0; right:0; bottom:0; z-index:115; background:rgba(11,15,12,.92); padding-bottom:env(safe-area-inset-bottom)}
/* camera zoom slider (when the device exposes zoom) — sits in flow at the top of the foot */
.scan-zoom{display:block; width:calc(100% - 28px); margin:10px 14px 0; height:30px; accent-color:#fff; background:rgba(255,255,255,.12); border-radius:16px; -webkit-appearance:none; appearance:none}
.scan-zoom:focus{outline:none}
/* distance coach mark + native-camera fallback button in the scan modal */
.scan-hint{padding:7px 14px 0; text-align:center; color:#cfd6cf; font-size:.8rem; line-height:1.3}
.scan-photo-btn{display:block; width:calc(100% - 28px); margin:8px 14px; padding:13px; border:none; border-radius:12px; background:var(--green); color:#fff; font-weight:800; font-size:1rem; cursor:pointer}
.scan-photo-btn:active{transform:scale(.98)}
.scan-foot .scan-result{background:transparent}
.scan-result{padding:18px; text-align:center; color:#fff; font-weight:700; font-size:1.05rem; background:#11160f; min-height:64px}
.scan-result.ok{background:#1f3d2b; color:#bff0d2}
.scan-result.err{background:#3a1714; color:#ffb9ad}

/* edit-location pill button */
.pill.edit{background:#e7eef9; color:var(--blue); border:none; cursor:pointer; font:inherit; font-size:.74rem; font-weight:600; padding:3px 9px}

/* notes / gift */
.note-box{background:var(--warm-soft); border:1.5px solid #f0e3b8}
.note-text{margin:4px 0; font-weight:600}
.attr{margin:4px 0; font-size:.92rem}

/* pack photo */
.photo-box.req{border:2px solid var(--orange); background:var(--warm-soft)}
.photo-box.ok{border:2px solid var(--green); background:var(--green-soft)}
.photo-box h2 em{font-style:normal; color:var(--orange-d); font-weight:700; margin-left:6px}
.pack-photo{width:100%; max-height:240px; object-fit:cover; border-radius:12px; margin:8px 0}
.photo-btn{position:relative; text-align:center}

/* scan-to-pack */
.pack-item.scanned{background:var(--green-soft); border-radius:10px}
.pack-item.scanned .pi-qty{color:var(--green)}
.scan-progress{display:flex; justify-content:space-between; align-items:center; margin-top:10px; padding-top:10px; border-top:1px solid var(--line); font-weight:700}
.scan-progress.ok{color:var(--green)}
.small{font-size:.82rem}
.btn.small{padding:7px 12px; font-size:.85rem}
.muted.center.small{margin-top:8px}

/* receiving / cycle count */
.tool-result{margin-top:12px; padding:12px; border-radius:12px; background:var(--soft)}
.tool-result.err{background:var(--red-soft); color:var(--red)}
.tool-found .tf-title{font-weight:700}
.tool-found .row{margin-top:10px}
.tf-row{display:flex; gap:12px; align-items:flex-start}
.tf-info{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:3px}
.tf-info .sku{align-self:flex-start}
.tf-info .meta-row{display:flex; flex-wrap:wrap; gap:6px; margin:2px 0}
.photo-request{background:var(--warm-soft); border:1px solid var(--orange); color:var(--orange-d); border-radius:10px; padding:10px 12px; font-weight:700; margin:4px 0 10px}
.range-hints{display:flex; justify-content:space-between; gap:8px; margin-top:8px}
.range-hint{flex:1; background:var(--accent-soft); border:1px solid var(--line); color:var(--green); border-radius:8px; padding:7px 10px; font-size:.82rem; font-weight:600; cursor:pointer; text-align:center}
.range-hint:active{background:#dde9e2}
.pending-row{margin-top:10px}
.pending-row>span{display:block; margin-bottom:6px; font-size:.92rem}
.pending-row .pos{color:var(--green)}
.pending-row .neg{color:var(--red)}
.adjust-grid{display:flex; gap:6px; margin-top:12px}
.adj-btn{flex:1; padding:9px 0; border-radius:10px; border:1.5px solid var(--line); background:var(--soft); font-weight:700; font-size:.9rem; cursor:pointer}
.adj-btn:active{background:#eef2ee}
.adj-btn.neg{border-color:#f3c8c2; color:var(--red); background:var(--red-soft)}
/* attention chip — stale orders needing review: red + glow */
.chip.attention{border-color:var(--red); color:var(--red); background:var(--red-soft); animation:chip-glow 1.6s ease-in-out infinite}
@keyframes chip-glow{0%,100%{box-shadow:0 0 0 0 rgba(208,48,32,.0)}50%{box-shadow:0 0 0 5px rgba(208,48,32,.18)}}
.log-row{display:flex; justify-content:space-between; padding:7px 0; border-bottom:1px solid var(--line); font-size:.9rem}
.log-row:last-child{border-bottom:none}
.log-row .pos{color:var(--green); font-weight:700}
.log-row .neg{color:var(--red); font-weight:700}

/* modal */
#modal-root{position:fixed; inset:0; z-index:120; display:none}
#modal-root.open{display:block}
.modal-backdrop{position:absolute; inset:0; background:rgba(10,14,11,.55)}
.modal{position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:min(560px,100vw); background:var(--card);
  border-radius:18px 18px 0 0; padding:20px 18px calc(20px + env(safe-area-inset-bottom)); box-shadow:0 -8px 30px rgba(0,0,0,.3)}
.modal.centered{top:50%; bottom:auto; transform:translate(-50%,-50%); width:min(440px,calc(100vw - 32px)); border-radius:18px}
.modal h2{margin:0 0 14px; font-size:1.1rem}
.held-sku{font-family:ui-monospace,Menlo,monospace; font-size:.78rem; color:var(--blue)}
.modal .row{gap:8px}
.modal-actions{margin-top:8px}
.modal-actions .btn{flex:1}

/* live / active sessions */
.live-card h2{display:flex; align-items:center; gap:8px}
.live-dot{width:9px; height:9px; border-radius:50%; background:var(--green); box-shadow:0 0 0 4px rgba(46,125,82,.18); animation:pulse 1.8s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.live-row{display:flex; align-items:stretch; gap:8px; margin-bottom:8px}
.live-row:last-child{margin-bottom:0}
.live-row-main{flex:1; display:flex; justify-content:space-between; align-items:center; gap:12px; background:var(--accent-soft); border:none; border-radius:12px; padding:11px 13px; cursor:pointer; text-align:left; color:inherit}
.live-row-main:active{background:#e7efe9}
.lr-cancel{flex:0 0 auto; width:44px; border:none; border-radius:12px; background:var(--red-soft); color:var(--red); font-size:1rem; font-weight:700; cursor:pointer}
.lr-cancel:active{background:#f5d9d4}
.lr-main{display:flex; flex-direction:column; min-width:0}
.lr-main strong{font-size:.98rem}
.lr-prog{display:flex; align-items:center; gap:8px; font-size:.82rem; color:var(--muted); font-family:ui-monospace,Menlo,monospace; flex:0 0 auto}
.mini-bar{width:64px; height:6px; background:var(--track); border-radius:999px; overflow:hidden}
.join-loading-popup{position:fixed; inset:0; display:flex; align-items:center; justify-content:center; z-index:999; pointer-events:none}
.join-loading-badge{display:inline-block; padding:10px 20px; background:var(--green-d); color:#fff; border-radius:12px; font-size:.9rem; font-weight:700; letter-spacing:.01em; box-shadow:0 4px 20px rgba(0,0,0,.4)}
.fresh-age{color:var(--green-d)}
.stale-age{color:var(--red)}
.mini-bar span{display:block; height:100%; background:var(--green)}

/* dashboard */
.dash-total{font-size:2.2rem; font-weight:800; margin-bottom:12px}
.dash-total span{font-size:.9rem; font-weight:600; color:var(--muted)}
.dash-row{display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--line)}
.dash-row:last-child{border-bottom:none}
.dr-name{flex:0 0 92px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.dash-row .mini-bar{flex:1; height:10px}
.dr-count{flex:0 0 auto; font-weight:800; font-family:ui-monospace,Menlo,monospace}

/* offline banner */
.offline-banner{position:fixed; top:0; left:0; right:0; z-index:300; background:#8a5a08; color:#fff; text-align:center;
  font-size:.82rem; font-weight:600; padding:6px 12px; transform:translateY(-100%); transition:.25s; padding-top:calc(6px + env(safe-area-inset-top))}
.offline-banner.show{transform:translateY(0)}

/* ---- mobile / safe-area pass (iPhone notch + home indicator, Android) ---- */
html{-webkit-text-size-adjust:100%}
body{overscroll-behavior-y:contain}
.btn,.chip,.tab,.act,.icon-btn,.ord-chip,.pill.edit,.live-row,.pack-item,a{touch-action:manipulation}
.topbar{padding-top:calc(14px + env(safe-area-inset-top))}
.scan-head{padding-top:calc(16px + env(safe-area-inset-top))}
.scan-result{padding-bottom:calc(18px + env(safe-area-inset-bottom))}
.screen{padding-bottom:calc(120px + env(safe-area-inset-bottom))}
.sticky-bottom{bottom:calc(14px + env(safe-area-inset-bottom))}
@media (max-width:380px){
  body{font-size:15px}
  .act{min-width:46px; height:44px}
  .ship-name{font-size:1.3rem}
  .dr-name{flex-basis:78px}
}

/* landing metrics */
.metrics{padding:14px}
.metric.big{display:flex; flex-direction:column; gap:2px; padding-bottom:12px; border-bottom:1px solid var(--line); margin-bottom:12px}
.metric .m-num{font-size:2.4rem; font-weight:800; line-height:1}
.metric .m-lbl{color:var(--muted); font-size:.86rem}
.metric .m-lbl em{font-style:normal; color:var(--orange-d); font-weight:700}
.metric-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.metric-grid .metric{display:flex; flex-direction:column}
.metric-grid .m-num{font-size:1.5rem; font-weight:800}
.big-action{font-size:1.05rem; padding:16px; margin-bottom:10px}
.big-action.alt{background:var(--accent-soft); color:var(--green)}
.resume-card{background:var(--accent-soft); border:1.5px solid var(--line)}
.resume-card .row{margin-top:8px; gap:8px}
.resume-card .btn{flex:1}

/* tappable bits */
.tappable{cursor:pointer}
.pcard-title.tappable:active{opacity:.55}
.pill.loc{cursor:pointer; border:none; font-family:inherit}

/* picked (folded) section */
.picked-section{margin-top:6px; background:var(--card); border-radius:14px; box-shadow:var(--shadow); overflow:hidden}
.picked-section>summary{padding:13px 16px; font-weight:700; color:var(--muted); cursor:pointer; list-style:none}
.picked-section>summary::-webkit-details-marker{display:none}
.picked-section>summary::after{content:'▸'; float:right}
.picked-section[open]>summary::after{content:'▾'}
.picked-section .list{padding:0 10px 10px}

/* image zoom */
.img-zoom{display:flex; align-items:center; justify-content:center}
.img-zoom img{max-width:100%; max-height:70vh; border-radius:12px}

/* stock breakdown */
.stock-grid{display:flex; flex-direction:column; gap:0; margin:6px 0 10px}
.sg-row{display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--line)}
.sg-row.big strong{font-size:1.5rem; color:var(--green-d)}
.sg-sub{display:flex; justify-content:space-between; padding:5px 0 5px 14px; color:var(--muted); font-size:.9rem}

/* label note + tracking validity */
.label-note{background:var(--warm-soft); color:var(--orange-d); border-radius:12px; padding:11px 13px; font-weight:600; margin-bottom:12px}
.held-banner{background:var(--warm-soft); color:var(--orange-d); border:1px solid var(--orange); border-radius:10px; padding:9px 12px; margin-bottom:10px; font-size:.85rem; font-weight:600; line-height:1.35}
.field .bad{color:var(--red); font-style:normal; font-weight:600}
.trk-expected{margin-top:9px; display:flex; flex-direction:column; gap:3px; border-radius:10px; padding:9px 11px; font-size:.82rem; line-height:1.35}
.trk-expected.ok{background:var(--loc-soft); color:var(--loc-ink); border:1px solid var(--loc-ink)}
.trk-expected.bad{background:var(--red-soft); color:var(--red); border:1px solid var(--red)}
.trk-nolabel{margin:0 0 9px; background:var(--warm-soft); color:var(--orange-d); border:1px solid var(--orange); border-radius:10px; padding:10px 12px; font-size:.85rem; line-height:1.4; display:flex; flex-direction:column; gap:2px}
.trk-nolabel strong{font-size:.95rem}
.trk-nolabel span{opacity:.9}
.trk-expected .trk-exp-label{font-weight:600; opacity:.85}
.trk-expected strong{font-family:ui-monospace,Menlo,monospace; font-size:1rem; word-break:break-all}
.trk-expected .trk-warn{font-weight:600; margin-top:2px}

/* pick action buttons — consistent + ~30% bigger for easier tapping */
.pcard-actions{padding:7px 12px 11px; gap:7px}
.act{height:40px; min-width:44px; font-size:1.05rem; border-radius:10px}
.act.oos{min-width:62px; font-size:.78rem; gap:3px}
/* smaller metafield/location pills (~25% smaller) */
.pill{font-size:.6rem; padding:2px 7px; font-family:inherit}
.pcard-count{font-size:.82rem; min-width:36px}
.qty-badge{font-size:.9rem; min-width:26px; height:26px}

/* picked section polish */
.picked-section{border:1.5px solid var(--line)}
.picked-section>summary{background:var(--accent-soft); color:var(--muted); padding:12px 16px}
.picked-section[open]>summary{border-bottom:1px solid var(--line)}
.picked-section .pcard{opacity:.72; box-shadow:none; border:1px solid var(--line)}
.picked-section .pcard:active{opacity:1}

/* stale alert + tags */
.stale-alert{background:var(--red-soft); color:var(--red); border:1.5px solid #f3c7c0; font-weight:700; margin-bottom:10px}
.mini-tag{display:inline-block; background:var(--pill); color:var(--pill-ink); border-radius:6px; padding:2px 7px; font-size:.72rem; margin:2px 4px 0 0}
.mini-tag.warn{background:var(--red-soft); color:var(--red); font-weight:700}

/* partially-paid markers */
.ord-chip.owes{background:var(--red-soft); color:var(--red)}
.owes-tag{color:var(--red); font-weight:700}

/* team members editor */
.member-row{display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center; margin-bottom:10px; padding-bottom:10px; border-bottom:1px solid var(--line)}
.member-row .m-name{grid-column:1 / -1}
.member-row .m-rm{width:44px; color:var(--red); padding:10px 0}

/* stale select + actions */
.stale-row .sr-head{display:flex; align-items:center}
.stale-check{width:auto; margin-right:8px; transform:scale(1.25)}
.stale-actions{position:fixed; left:50%; transform:translateX(-50%); bottom:calc(14px + env(safe-area-inset-bottom)); width:min(532px,calc(100vw - 28px)); display:flex; gap:8px; z-index:15}
.stale-actions .btn{flex:1; box-shadow:0 6px 20px rgba(31,61,43,.3)}

/* toast */
.toast{position:fixed; left:50%; bottom:84px; transform:translate(-50%,20px); background:#15201a; color:#fff;
  padding:12px 18px; border-radius:12px; font-weight:600; font-size:.92rem; max-width:90vw; text-align:center;
  opacity:0; pointer-events:none; transition:.25s; z-index:200; box-shadow:0 8px 24px rgba(0,0,0,.3)}
.toast.show{opacity:1; transform:translate(-50%,0)}
.toast.err{background:#7a241a}
.toast.warn{background:#8a5a08}

/* orange (warning) button + tappable header title */
.btn.orange{background:var(--orange); color:#fff}
.h1-link{font-size:1.18rem; font-weight:800; color:var(--ink); text-decoration:none; letter-spacing:.3px; display:inline-block}

/* compact pack screen — fit the fulfil order on one screen */
.pack-screen .card{padding:11px 13px; margin-bottom:9px}
.pack-screen .card h2{margin-bottom:6px; font-size:.84rem}
.pack-screen .ship-name{font-size:1.1rem; margin:0 0 1px}
.pack-screen .ship-to .muted{font-size:.86rem; line-height:1.3}
.pack-screen .field{margin-bottom:8px}
.pack-screen .field>span{margin-bottom:3px}
.pack-screen input,.pack-screen select{padding:10px 12px}
.pack-screen .pack-item{padding:6px 0}
.pack-screen .pi-title{font-size:.9rem}
.pack-screen .thumb.sm{width:40px; height:40px}
.pack-screen .toggle-line{margin:6px 2px}
.pack-screen .photo-box{padding:11px 13px}
.pack-screen .photo-btn{padding:11px}
.pack-screen .scan-progress{margin-top:8px; padding-top:8px}
.pack-screen .garmin-note,.pack-screen .note-box{padding:8px 11px}
.pack-screen .garmin-note h2,.pack-screen .note-box h2{font-size:.74rem; margin-bottom:3px}
.pack-screen .garmin-note p,.pack-screen .note-text,.pack-screen .attr{margin:2px 0; font-size:.82rem}
.li-notes{display:flex; flex-direction:column; gap:1px; margin:2px 0}
.li-note{font-size:.76rem; color:var(--orange-d)}
.pi-body .pill.loc{white-space:nowrap}
.li-watch{font-size:.76rem; font-weight:600; color:var(--blue); background:var(--accent-soft); border-radius:6px; padding:2px 7px; margin:2px 0; display:inline-block}
/* compact create / fulfil-source pages */
.compact-create .card{padding:11px 13px; margin-bottom:9px}
.compact-create .card h2{font-size:.82rem; margin-bottom:7px}
.compact-create input,.compact-create select{padding:10px 12px}
.compact-create .big-action{font-size:1rem; padding:13px; margin-bottom:9px}
.compact-create .chips{gap:6px}
.compact-create .chip{padding:8px 13px}
.card-toggle{background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:11px 13px; margin:0 0 9px}
.version-line{text-align:center; color:var(--muted); font-size:.8rem; margin-top:14px}
.changelog{margin:0; padding-left:18px}
.changelog li{margin:5px 0; font-size:.9rem; line-height:1.35}

/* ================================================================ INVENTORY SECTION */
.inv-tabs{display:flex; gap:8px; padding:12px 14px 4px}
.inv-tab{flex:1; padding:10px; border-radius:10px; border:1.5px solid var(--line); background:var(--card); color:var(--ink); font-size:.9rem; cursor:pointer}
.inv-tab.active{background:var(--green); color:#fff; border-color:var(--green)}

.sub-tabs{display:flex; gap:6px; padding:8px 14px}
.sub-tab{flex:1; padding:8px 10px; border-radius:8px; border:1.5px solid var(--line); background:var(--card); color:var(--ink); font-size:.84rem; cursor:pointer}
.sub-tab.active{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.badge-red{display:inline-block; background:var(--red); color:#fff; border-radius:99px; font-size:.7rem; padding:1px 6px; margin-left:4px}

.supplier-pills{display:flex; flex-wrap:wrap; gap:6px; padding:4px 14px 8px}
.sup-pill{padding:5px 12px; border-radius:99px; border:1.5px solid var(--line); background:var(--card); color:var(--muted); font-size:.8rem; cursor:pointer}
.sup-pill.active{background:var(--green-soft); color:var(--green); border-color:var(--green); font-weight:600}

.search-row{padding:0 14px 10px}
.search-input{width:100%; padding:10px 12px; border-radius:10px; border:1.5px solid var(--line); background:var(--card); color:var(--ink); font-size:.95rem}
.search-input:focus{outline:none; border-color:var(--green)}

.prog-bar-label{display:flex; justify-content:space-between; font-size:.85rem; margin-bottom:6px}
.prog-bar-track{height:8px; border-radius:99px; background:var(--line); overflow:hidden}
.prog-bar-fill{height:100%; border-radius:99px; background:var(--green); transition:width .3s}

.restock-list{padding:0 14px; display:flex; flex-direction:column; gap:8px; margin-bottom:8px}
.restock-item{background:var(--card); border-radius:12px; padding:11px 13px; box-shadow:var(--shadow)}
.restock-item.exc{border-left:3px solid var(--red)}
.ri-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:2px}
.ri-sku{font-size:.78rem; font-weight:600; color:var(--green); font-family:monospace}
.ri-sup{font-size:.72rem; color:var(--muted); background:var(--soft2); padding:2px 7px; border-radius:99px}
.ri-name{font-size:.88rem; color:var(--ink); margin:2px 0 5px}
.ri-meta{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.ri-frac{font-size:.8rem; font-weight:600; color:var(--ink)}
.ri-rem{font-size:.78rem; color:var(--orange-d)}
.ri-avail{font-size:.78rem; color:var(--green); padding:2px 7px; background:var(--green-soft); border-radius:99px}
.ri-avail.zero{color:var(--red); background:var(--red-soft)}
.exc-var{font-size:.85rem; font-weight:700; padding:2px 8px; border-radius:99px}
.exc-var.under{color:var(--red); background:var(--red-soft)}
.exc-var.over{color:var(--green); background:var(--green-soft)}
.exc-under{color:var(--red)}
.exc-over{color:var(--green)}

.inv-lookup{padding:0}
.inv-search-row{display:flex; gap:8px; align-items:center}
.inv-search-row .search-input{flex:1}

.inv-img{width:100%; max-height:180px; object-fit:contain; border-radius:10px; margin-bottom:10px}
.inv-card-title{font-size:1rem; font-weight:600; margin-bottom:2px}
.inv-card-title a{color:var(--ink); text-decoration:none}
.inv-card-title a:hover{text-decoration:underline}

.stock-pills{display:flex; gap:8px; margin:10px 0}
.stock-pill{flex:1; text-align:center; background:var(--soft); border-radius:10px; padding:8px 6px}
.stock-pill.sp-avail{background:var(--green-soft); cursor:pointer}
.sp-label{display:block; font-size:.7rem; color:var(--muted); margin-bottom:2px}
.sp-val{display:block; font-size:1.2rem; font-weight:700; color:var(--ink)}
.stock-pill.sp-avail .sp-val{color:var(--green)}

.inv-set-row{display:flex; gap:6px; align-items:center; margin:6px 0 10px}
.inv-set-input{flex:1; padding:9px 12px; border-radius:8px; border:1.5px solid var(--green); font-size:1rem; background:var(--card); color:var(--ink)}
.inv-set-input:focus{outline:none}

.inv-adj-section{margin:4px 0 8px}
.adj-btns{display:flex; gap:6px; flex-wrap:wrap}
.adj-btn{padding:9px 14px; border-radius:8px; border:1.5px solid var(--line); background:var(--card); color:var(--ink); font-size:.9rem; cursor:pointer; font-weight:600; min-width:52px; text-align:center}
.adj-btn:active,.adj-btn:hover{background:var(--soft2)}
.adj-btn.dim{opacity:.5; pointer-events:none}
.adj-custom-row{display:flex; gap:6px; align-items:center; margin-top:8px}
.inv-adj-input{flex:1; padding:8px 11px; border-radius:8px; border:1.5px solid var(--line); background:var(--card); color:var(--ink); font-size:.9rem}
.inv-adj-input:focus{outline:none; border-color:var(--green)}

.inv-loc-section{margin-top:12px; border-top:1px solid var(--line); padding-top:12px}
.inv-loc-section h2{font-size:.9rem; margin-bottom:8px}
.loc-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.inv-loc-input{width:100%}

/* Recent order history on the inventory lookup card */
.inv-hist-list{display:flex; flex-direction:column; gap:4px}
.inv-hist-row{display:grid; grid-template-columns:auto auto 1fr auto; align-items:center; gap:8px;
  padding:7px 8px; background:var(--soft); border-radius:8px; text-decoration:none; color:var(--ink); font-size:.85rem}
.inv-hist-row:active{opacity:.7}
.inv-hist-row .ih-name{font-weight:600}
.inv-hist-row .ih-qty{color:var(--muted); font-variant-numeric:tabular-nums}
.inv-hist-row .ih-date{color:var(--muted); text-align:right}
.inv-hist-row .ih-status{font-size:.72rem; text-transform:uppercase; letter-spacing:.3px; color:var(--muted)}
.inv-hist-row .ih-status.ok{color:var(--green)}

.p16{padding:16px}

/* ================================================================ PRINT */
@media print{
  body > *:not(#inv-print-area){display:none !important}
  #inv-print-area{display:block !important; padding:24px; font-family:sans-serif}
  .inv-print-h1{font-size:1.2rem; margin:0 0 6px}
  .inv-print-sub{color:#555; margin:0 0 16px; font-size:.9rem}
  .inv-exc-table{width:100%; border-collapse:collapse; font-size:.85rem}
  .inv-exc-table th,.inv-exc-table td{border:1px solid #ccc; padding:5px 8px; text-align:left}
  .inv-exc-table th{background:#f0f0f0; font-weight:600}
  .exc-under{color:#d00}
  .exc-over{color:#090}
}

/* ---- label generation + manifest ---- */
.big-action.label-action{background:var(--warm-soft); color:var(--orange-d); border:1.5px solid var(--orange)}
.big-action.label-action em{font-weight:600; font-style:normal; opacity:.85; font-size:.85rem}
.cost-tag{color:var(--blue); font-weight:700; white-space:nowrap}
.btn.batch-pick{display:flex; flex-direction:column; align-items:flex-start; gap:2px; text-align:left; padding:10px 13px}
.batch-name{font-weight:700}
.batch-meta{font-size:.78rem; color:var(--muted); font-weight:500}
/* Per-item "+Garmin SB" pill — this line needs the specialised Garmin spring bars */
.pill.garmin-sb{background:var(--orange); color:#fff; font-weight:800; font-size:.72rem; align-self:flex-end; white-space:nowrap; padding:3px 9px}
.manifest-cta{border:1.5px solid var(--orange); background:var(--warm-soft)}
.manifest-cta p{margin:0 0 10px}
/* Fulfilled-but-not-manifested fee-risk card (more urgent than the orange CTA) */
.fee-risk{border:1.5px solid var(--red); background:var(--red-soft)}
.fee-risk p{margin:0 0 8px}
.fee-risk .ship-rows{margin:0 0 10px}
/* Per-order shipment rows in a pending batch card (delete a single generated label) */
.ship-rows{margin-top:8px; border-top:1px solid var(--line); padding-top:6px; display:flex; flex-direction:column; gap:4px}
.ship-row{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.ship-ord{font-weight:700; min-width:64px}
.ship-art{flex:1; word-break:break-all}
.ship-row .btn.danger.small{margin-left:auto}
.section-h{margin:14px 4px 6px; font-size:.95rem; color:var(--muted)}
#inv-print-area{display:none}