:root{
  /* Degen Bros — colour tokens taken from the Vikinger template's own SASS
     (sass/_color.scss): violet #615dfa primary, cyan #23d2e2 secondary, ink #3e3f5e.
     Vikinger's layout is desktop-social; this app stays phone-first because it gets
     used standing over a box of cards. So we take its palette, radii and soft
     shadows, not its grid.

     The --pink-* variable NAMES are inherited from the stylesheet this was forked
     from and appear in ~700 lines below; only their VALUES changed. Read them as
     "the accent colour" — renaming would be a large diff for no visual gain. */
  --brand:#615dfa;           /* Vikinger $violet — tints and the gradient */
  --pink:#615dfa;            /* accent: buttons, active tabs */
  --pink-ink:#ffffff;
  --pink-soft:#9a97fc;
  --pink-tint:#eeedff;       /* light violet surface */
  --cyan:#23d2e2;            /* Vikinger $cyan — secondary highlights */
  --yellow:#ffe00d;
  --grad:linear-gradient(125deg,#615dfa 0%,#7b5dfa 40%,#23d2e2 100%);

  /* neutrals — Vikinger $black / $gray / $white families */
  --ink:#3e3f5e; --muted:#8f91ac; --faint:#adafca;
  --line:#eaeaf5; --bg:#f5f5fa; --card:#ffffff;
  --ok:#1db954; --err:#f9515c;
  --radius:12px; --radius-sm:10px;
  --shadow:0 4px 12px 0 rgba(62,63,94,.08);
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);color:var(--ink);-webkit-text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent;
}
a{color:inherit;text-decoration:none}

/* ---------- App shell (mobile-first) ---------- */
.app{min-height:100vh;padding-bottom:78px}      /* room for bottom nav */
.sidebar{display:none}

.topbar{
  position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;
  background:var(--card);border-bottom:1px solid var(--line);padding:12px 16px;
}
.topbar .logo{display:flex;align-items:center}
.topbar .logo img{height:24px;width:auto;display:block}
.topbar .ptitle{font-size:18px;font-weight:700;margin:0;flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar .who{font-size:12px;color:var(--muted);flex:0 0 auto;margin-left:10px}
/* Back chevron: generous tap target, sits left of the page title. */
.topbar.has-back{gap:6px}
.topbar .back{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;margin:-6px 0 -6px -10px;font-size:30px;line-height:1;
  color:var(--pink);text-decoration:none;border-radius:50%}
.topbar .back:active{background:var(--pink-tint)}

/* ---------- Pull to refresh (standalone only; see assets/app.js) ---------- */
.ptr{position:fixed;left:0;right:0;top:0;z-index:60;display:flex;align-items:flex-end;
  justify-content:center;height:0;overflow:hidden;pointer-events:none;
  background:linear-gradient(var(--pink-tint),transparent)}
.ptr i{display:block;width:22px;height:22px;margin-bottom:8px;border-radius:50%;
  border:2.5px solid var(--pink-soft);border-top-color:var(--pink);
  transform:rotate(0deg)}
.ptr.spin i{animation:ptrspin .7s linear infinite}
@keyframes ptrspin{to{transform:rotate(360deg)}}

.wrap{max-width:680px;margin:0 auto;padding:16px}

/* ---------- Bottom nav (mobile) ---------- */
.bottomnav{
  position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;
  background:var(--card);border-top:1px solid var(--line);
  padding:6px 4px env(safe-area-inset-bottom,6px);
}
.bottomnav a{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
  color:var(--muted);font-size:11px;padding:6px 2px;
}
.bottomnav a .ic{font-size:22px;line-height:1}
.bottomnav a.active{color:var(--pink)}
.bottomnav a.center .ic{
  width:48px;height:48px;border-radius:50%;background:var(--pink);color:#fff;
  display:flex;align-items:center;justify-content:center;margin-top:-22px;
  box-shadow:0 4px 12px rgba(214,51,127,.4);font-size:26px;
}
.bottomnav a.center.active{color:var(--pink)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font-size:15px;font-weight:600;padding:11px 16px;border-radius:12px;
  border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer}
.btn.primary{background:var(--pink);border-color:var(--pink);color:var(--pink-ink)}
.btn.ghost{background:transparent}
.btn.danger{background:#fff;border-color:var(--err);color:var(--err)}
.btn.danger:hover{background:var(--err);color:#fff}
.btn.arming{background:var(--err);color:#fff;border-color:var(--err)}
.btn.big{width:100%;padding:15px;font-size:17px}
.btn:active{transform:scale(.985)}

/* ---------- Stat bar (Folders / Items / Total qty) ---------- */
.statbar{display:flex;gap:18px;overflow-x:auto;background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;margin-bottom:14px}
.statbar .s{flex:0 0 auto}
.statbar .s small{display:block;color:var(--muted);font-size:13px;margin-bottom:2px}
.statbar .s b{font-size:22px;font-weight:700}
.statbar .s b span{font-size:13px;font-weight:500;color:var(--muted)}

/* ---------- Item rows (Sortly list) ---------- */
.list{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.itemrow{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--line)}
.itemrow:last-child{border-bottom:none}
.itemrow .thumb{width:54px;height:54px;border-radius:12px;background:var(--pink-tint) center/cover no-repeat;
  display:flex;align-items:center;justify-content:center;color:var(--pink);font-size:24px;flex:0 0 auto}
.itemrow .meta{flex:1;min-width:0}
.itemrow .sku{font-size:12px;color:var(--faint);font-family:monospace}
.itemrow .nm{font-size:16px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.itemrow .sub{font-size:13px;color:var(--muted);margin-top:1px}
.itemrow .sub .low{color:var(--err);font-weight:600}
.itemrow .go{color:var(--faint);font-size:20px}
.itemrow.off{opacity:.5}

/* ---------- Floating add button ---------- */
.fab{position:fixed;right:18px;bottom:92px;z-index:35;width:58px;height:58px;border-radius:50%;
  background:var(--pink);color:#fff;font-size:30px;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(214,51,127,.4)}

/* ---------- Dashboard summary ---------- */
.summary{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:18px}
.scard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px}
.scard .ic{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  font-size:18px;background:var(--pink-tint);color:var(--pink);margin-bottom:10px}
.scard b{display:block;font-size:24px;font-weight:700;line-height:1.1}
.scard small{color:var(--muted);font-size:13px}
.scard.warn .ic{background:#fff7e6;color:#b7791f}

.section-h{display:flex;align-items:center;justify-content:space-between;margin:18px 0 10px}
.section-h h2{font-size:16px;margin:0}
.section-h a{font-size:13px;color:var(--pink);font-weight:600}

.activity{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.activity .row{display:flex;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line);font-size:14px}
.activity .row:last-child{border-bottom:none}
.activity .row .dot{flex:0 0 auto;width:30px;height:30px;border-radius:8px;display:flex;align-items:center;
  justify-content:center;background:var(--pink-tint);color:var(--pink);font-size:14px}
.activity .row .t{flex:1;min-width:0}
.activity .row .t small{display:block;color:var(--faint);font-size:12px;margin-top:1px}
.activity .row .amt{font-weight:700}
.activity .row .amt.neg{color:var(--err)} .activity .row .amt.pos{color:var(--ok)}

/* ---------- Home tiles (quick actions) ---------- */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px}
.tile{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;
  display:flex;flex-direction:column;gap:4px;min-height:104px}
.tile .ic{font-size:26px;color:var(--pink)}
.tile b{font-size:15px}
.tile small{color:var(--muted)}
.tile.accent{background:var(--grad);border:none}
.tile.accent .ic,.tile.accent b{color:#7a1f4d}
.tile.accent small{color:#9c3a68}

/* Clickable vs read-only. Stat cards stay as flat info panels — a muted, borderless
   tint so they read as "just numbers" but don't dissolve into the grey page. Tiles
   are the tappable things: white raised card, a › marker, pointer + hover lift. */
.scard{background:var(--pink-tint);border:none;box-shadow:none}
.scard b{color:var(--ink)}
.scard small{color:var(--muted)}
.scard.warn{background:#fff7e6}
.tiles a.tile{cursor:pointer}
.tile{position:relative;background:var(--card);border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(31,36,48,.05);transition:transform .12s ease,box-shadow .12s ease}
.tile::after{content:'›';position:absolute;top:12px;right:14px;font-size:20px;font-weight:700;color:var(--pink);opacity:.5}
.tile.accent::after{color:#7a1f4d;opacity:.8}
@media (hover:hover){
  .tile:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(214,51,127,.16)}
}
.tile:active{transform:scale(.985)}

/* ---------- Cards / forms ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin-bottom:14px}
.card h1{margin:0 0 14px;font-size:20px}
label{display:block;font-size:13px;color:var(--muted);margin-bottom:12px}
input,select{width:100%;font-size:16px;padding:11px 12px;border:1px solid var(--line);
  border-radius:12px;margin-top:5px;background:#fff;color:var(--ink)}
input:focus,select:focus{outline:none;border-color:var(--pink-soft);box-shadow:0 0 0 3px var(--pink-tint)}
.row{display:flex;gap:10px}.row label{flex:1}.row.end{justify-content:flex-end}
.check{display:flex;align-items:center;gap:8px}.check input{width:auto;margin:0}
.adj-toggle{display:flex;gap:10px;margin:6px 0 14px}
.adj-btn{flex:1;padding:12px;border-radius:12px;border:1.5px solid var(--line);background:#fff;
  font-weight:600;font-size:15px;cursor:pointer;color:var(--muted)}
.adj-btn.add.sel{background:#e9f8ef;border-color:var(--ok);color:var(--ok)}
.adj-btn.remove.sel{background:#fdecec;border-color:var(--err);color:var(--err)}
.photo-edit{display:flex;gap:14px;align-items:flex-start;margin-top:5px}
.photo-prev{width:74px;height:74px;border-radius:12px;flex:0 0 auto;border:1px solid var(--line);
  background:var(--pink-tint) center/cover no-repeat;display:flex;align-items:center;justify-content:center;
  color:var(--pink);font-size:30px}
.err{color:var(--err);font-size:14px;margin:0 0 10px}
.note{color:var(--muted);font-size:13px}

/* ---------- Login (branded gradient) ---------- */
.login-screen{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:var(--grad);padding:24px}
.login{width:100%;max-width:340px;margin:0;box-shadow:0 12px 40px rgba(120,30,80,.18);text-align:center}
.login .brand-img{height:42px;width:auto;margin:4px auto 18px;display:block}
.login h1,.login label,.login .err{text-align:left}

/* ---------- Scan page ---------- */
.scanapp{max-width:440px;margin:0 auto}
.scan-mode{text-align:center;font-size:17px;font-weight:700;margin:2px 0 12px;padding:9px;border-radius:12px}
.scan-mode.pick{color:var(--pink);background:var(--pink-tint)}
.scan-mode.check{color:#0f766e;background:#e6f6f2}
.reader{width:100%;border-radius:var(--radius);overflow:hidden;background:#000;min-height:60px}
.hint{text-align:center;color:var(--muted);margin:12px 0}
.hidden{display:none}
.pickcard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.pc-img{width:100%;max-height:180px;object-fit:cover;border-radius:12px;margin-bottom:12px;display:block}
.pc-cat{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.pc-name{font-size:19px;font-weight:700;margin:2px 0}
.pc-loc{font-size:13px;color:var(--muted)}
.pc-sub{text-align:center;color:var(--muted);margin:14px 0}.pc-sub strong{color:var(--ink);font-size:16px}
.big-avail{font-size:16px}.big-avail strong{font-size:36px;color:var(--pink)}
.stepper{display:flex;align-items:center;justify-content:center;gap:26px;margin:6px 0 14px}
.round{width:60px;height:60px;border-radius:50%;border:2px solid var(--line);background:#fff;
  font-size:28px;cursor:pointer;color:var(--ink)}
.round:active{transform:scale(.95);border-color:var(--pink-soft)}
.qtybig{font-size:48px;font-weight:800;min-width:74px;text-align:center}
.presets{display:flex;gap:8px;justify-content:center;margin-bottom:14px;flex-wrap:wrap}
.preset{flex:1;min-width:54px;padding:12px;border:1px solid var(--line);border-radius:12px;
  background:var(--pink-tint);color:var(--pink);font-size:16px;font-weight:600;cursor:pointer}
.preset:active{background:var(--pink-soft);color:#fff}
.result{text-align:center;min-height:20px;margin-top:10px;font-size:14px}
.result.ok{color:var(--ok)}.result.err{color:var(--err)}

/* Pick source buttons */
.src-label{font-size:13px;color:var(--muted);font-weight:600;margin:6px 0 8px}
.req{color:var(--err)}
.sources{display:flex;flex-direction:column;gap:8px;margin-bottom:8px}
.src-btn{display:flex;align-items:center;gap:10px;width:100%;padding:11px 12px;border-radius:10px;
  border:1.5px solid var(--line);background:#fff;color:var(--src);font-weight:600;font-size:15px;cursor:pointer;text-align:left}
.src-btn img{width:22px;height:22px;object-fit:contain;border-radius:5px;flex:0 0 auto}
.src-btn.sel{background:var(--src);color:#fff;border-color:var(--src)}
.sources.err .src-btn{border-color:var(--err)}
.src-note{margin-bottom:6px}
@keyframes shake{10%,90%{transform:translateX(-2px)}30%,70%{transform:translateX(4px)}50%{transform:translateX(-6px)}}
.sources.err{animation:shake .4s}

#trackBody{padding:6px 0}
#trackBody .pc-name{margin-bottom:4px}
.track-input{width:100%;margin:8px 0;text-align:center;font-size:16px}
#trackBody .btn{margin-top:8px}

.pc-done{text-align:center;padding:10px 0}
.done-check{width:68px;height:68px;border-radius:50%;background:#e9f8ef;color:var(--ok);
  display:flex;align-items:center;justify-content:center;font-size:38px;margin:6px auto 16px}
.done-msg{font-size:17px;font-weight:600;line-height:1.45;margin-bottom:20px}
.done-msg span{display:inline-block;font-weight:400;color:var(--muted);font-size:14px;margin-top:4px}
.pc-done .btn{margin-bottom:10px}

/* ---------- Orders: entry + session list ---------- */
.entry .entry-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.entry .entry-h h2{font-size:17px;margin:0}
.bin-badge{display:inline-flex;align-items:center;justify-content:center;min-width:62px;padding:5px 10px;
  border-radius:20px;background:var(--pink-tint);color:var(--pink);font-weight:700;font-size:14px}
.bin-badge.flash{background:var(--pink);color:#fff;animation:binpop .5s}
@keyframes binpop{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}

/* Tap a tile to add one; the − corner takes one back off. */
.itemgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.itile{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 6px;
  border:1.5px solid var(--line);border-radius:12px;background:#fff;cursor:pointer;text-align:center;color:var(--ink)}
.itile img{width:44px;height:44px;object-fit:cover;border-radius:9px}
.itile .ph{width:44px;height:44px;border-radius:9px;background:var(--pink-tint);color:var(--pink);
  display:flex;align-items:center;justify-content:center;font-size:20px}
.itile b{font-size:12.5px;line-height:1.2;font-weight:600}
.itile small{font-size:10.5px;color:var(--muted)}
.itile.on{border-color:var(--pink);background:var(--pink-tint)}
.itile .qbadge{position:absolute;top:-6px;right:-6px;min-width:24px;height:24px;border-radius:12px;
  background:var(--pink);color:#fff;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center}
.itile .minus{position:absolute;top:-6px;left:-6px;width:24px;height:24px;border-radius:12px;
  background:#fff;border:1.5px solid var(--pink);color:var(--pink);font-size:16px;font-weight:700;
  display:flex;align-items:center;justify-content:center;line-height:1}
/* These two set display:flex, so .hidden needs the matching specificity to win. */
.itile .qbadge.hidden,.itile .minus.hidden{display:none}

.orderlist{display:flex;flex-direction:column;gap:10px}
.ocard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:13px 14px}
.ocard.packed{opacity:.62}
.ocard.cancelled{opacity:.45;text-decoration:line-through}
.ohead{display:flex;align-items:center;gap:8px;margin-bottom:7px;flex-wrap:wrap}
.ostatus{font-size:11px;padding:2px 9px;border-radius:20px;background:var(--line);color:var(--muted);font-weight:600}
.ostatus.packing{background:#fff7e6;color:#b7791f}
.ostatus.packed{background:#e9f8ef;color:var(--ok)}
.ostatus.cancelled{background:#fdecec;color:var(--err)}
.osrc{font-size:12px;color:var(--muted);margin-left:auto}
.olines{font-size:15px;font-weight:600;line-height:1.4}
.otrack,.onote,.oprog{font-size:12.5px;color:var(--muted);margin-top:3px}
.oprog{color:#b7791f;font-weight:600}
.oacts{display:flex;gap:8px;margin-top:10px}
.oacts .btn{flex:1;padding:8px;font-size:13px}

/* ---------- Pick list ---------- */
.picklist{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.pl-row{display:flex;align-items:center;gap:14px;padding:14px;border-bottom:1px solid var(--line)}
.pl-row:last-child{border-bottom:none}
.pl-row.short{background:#fdecec}
.pl-qty{flex:0 0 auto;min-width:52px;height:52px;border-radius:13px;background:var(--pink-tint);color:var(--pink);
  display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:800}
.pl-row.short .pl-qty{background:#fff;color:var(--err)}
.pl-name{font-size:19px;font-weight:700;line-height:1.2}
.pl-loc{font-size:14px;color:var(--muted);margin-top:2px}
.pl-short{color:var(--err)}
.pl-have{color:var(--faint)}
.binlist{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.bl-row{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line);font-size:14px}
.bl-row:last-child{border-bottom:none}
.bl-lines{flex:1;min-width:0}

/* ---------- Pack: bin picker + scan-to-verify ---------- */
.packapp{max-width:440px;margin:0 auto}
.binstrip{display:flex;flex-direction:column;gap:9px;margin-bottom:14px}
.bincard{display:flex;flex-direction:column;align-items:flex-start;gap:3px;width:100%;padding:12px 14px;
  border:1.5px solid var(--line);border-radius:var(--radius);background:#fff;cursor:pointer;text-align:left;color:var(--ink)}
.bincard.packing{border-color:#f0c674;background:#fffdf5}
.bincard b{font-size:14px;color:var(--muted);font-weight:600}
.bincard small{font-size:14px;font-weight:600;color:var(--ink);line-height:1.35}
.vhead{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.vhead .osrc{margin-left:0;flex:1}
.vhead .btn{padding:7px 14px;font-size:13px}
.vlines{margin:12px 0 4px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--card)}
.vlines.all-done{border-color:var(--ok)}
.vline{display:flex;align-items:center;gap:11px;padding:13px 14px;border-bottom:1px solid var(--line);font-size:17px}
.vline:last-child{border-bottom:none}
.vline .vmark{width:26px;height:26px;border-radius:50%;background:var(--line);color:var(--muted);
  display:flex;align-items:center;justify-content:center;font-size:15px;flex:0 0 auto}
.vline .vname{flex:1;font-weight:600}
.vline .vcount{font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.vline.done{background:#f2fbf5}
.vline.done .vmark{background:var(--ok);color:#fff}
.vline.done .vcount{color:var(--ok)}
#resetPack{margin-top:8px}

/* Wrong scent in hand: impossible to miss, and it holds the camera off briefly. */
.wrong-flash{position:fixed;inset:0;z-index:60;background:rgba(220,38,38,.96);color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:26px;text-align:center}
/* Same single-class specificity as .hidden but declared later, so it must opt out itself. */
.wrong-flash.hidden{display:none}
.wrong-flash .wf-x{font-size:88px;font-weight:800;line-height:1}
.wrong-flash .wf-msg{font-size:23px;font-weight:700;line-height:1.35}

/* Same bottles queued in an order — warn before they get deducted twice. */
.open-warn{background:#fff7e6;color:#8a5a00;border:1px solid #f0d9a8;border-radius:10px;
  padding:9px 11px;font-size:13px;margin:0 0 12px;text-align:center}

/* ---------- Tables (admin) ---------- */
.bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.bar h1{font-size:20px;margin:0}
/* On mobile the topbar already names the page, so the in-page heading would say it
   twice. Drop the duplicate title (and the whole row when the title was all it held)
   and let the actions sit right. The sidebar has no title, so desktop keeps its h1. */
@media (max-width:859px){
  .topbar.has-back + .wrap .bar:has(> h1:only-child){display:none}
  .topbar.has-back + .wrap .bar > h1{display:none}
  .topbar.has-back + .wrap .bar{justify-content:flex-end}
}
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px}
.filters input,.filters select{margin:0;height:36px;font-size:14px;padding:6px 10px}
.filters input[type=search]{flex:1 1 200px;min-width:150px;max-width:300px}
.filters select{flex:0 0 auto;width:150px}
.filters .fdate{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--muted);margin:0}
.filters .fdate input{width:140px}
.filters .btn{height:36px;padding:6px 16px}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radius)}
.grid{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden}
.grid th,.grid td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);font-size:14px;vertical-align:top}
.grid th{background:#fafbfc;color:var(--muted);font-weight:600}
.grid tr:last-child td{border-bottom:none}
.grid .mono{font-family:monospace}.grid .small{font-size:12px;color:var(--muted)}
.grid .low{color:var(--err);font-weight:600}.grid .ok-t{color:var(--ok)}.grid .muted{opacity:.5}
.grid .actions a{margin-right:10px;color:var(--pink);font-size:13px;font-weight:600}
.tag{display:inline-block;font-size:11px;padding:2px 8px;border-radius:20px;background:var(--pink-tint);color:var(--pink)}
.tag.admin{background:#eef2ff;color:#4f46e5}

/* ---------- Stock by location ---------- */
.loclist{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.locrow{padding:12px 14px;border-bottom:1px solid var(--line)}
.locrow:last-child{border-bottom:none}
.locrow.bay{background:var(--pink-tint)}
.loc-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.loc-name{font-size:15px;font-weight:600;min-width:0;word-break:break-word}
.loc-tag{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  color:var(--pink);background:#fff;border:1px solid var(--pink-soft);border-radius:20px;padding:1px 7px;margin-left:5px}
.loc-qty{font-size:19px;font-weight:800;font-variant-numeric:tabular-nums;flex:0 0 auto}
/* Bar is relative to the fullest location, so the split is readable at a glance. */
.loc-bar{height:6px;border-radius:4px;background:var(--line);margin:7px 0 5px;overflow:hidden}
.loc-bar i{display:block;height:100%;border-radius:4px;background:var(--pink)}
.locrow.bay .loc-bar{background:#fff}
.loc-sub{font-size:12px;color:var(--muted)}

/* Per-SKU split across its locations, on the inventory rows. */
.locchips{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.locchips .chip{font-size:11.5px;padding:2px 8px;border-radius:20px;background:var(--bg);
  border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.locchips .chip b{color:var(--ink);font-weight:700}
.locchips .chip.zero{opacity:.5}
.locchips .chip.bay{background:var(--pink-tint);border-color:var(--pink-soft);color:var(--pink)}
.locchips .chip.bay b{color:var(--pink)}

/* Inline view controls in a section header (sort / compact). Small and unobtrusive. */
.viewctl{display:flex;gap:6px;align-items:center;margin:0}
.viewctl select{width:auto;min-width:0;padding:5px 8px;font-size:13px;font-weight:600;
  border-radius:9px;border:1.5px solid var(--line);background:#fff;color:var(--muted);margin:0}
.viewctl select:focus{border-color:var(--pink);color:var(--ink);outline:none}

/* A pinned location leads the list; the star explains why it's out of sort order. */
.locrow.pinned{border-color:var(--pink);}
.pin-mark{color:var(--pink);font-size:13px}

/* Shelf floors, collapsed by default — the shelf total is the headline. */
.loc-kids{margin-top:8px}
.loc-kids summary{cursor:pointer;font-size:12px;font-weight:700;color:var(--muted);
  list-style:none;padding:3px 0}
.loc-kids summary::-webkit-details-marker{display:none}
.loc-kids summary::before{content:'▸ ';display:inline-block;transition:transform .15s}
.loc-kids[open] summary::before{content:'▾ '}
.loc-kids .kidrow{display:flex;justify-content:space-between;gap:10px;padding:5px 0 5px 14px;
  font-size:13px;border-top:1px solid var(--line)}
.loc-kids .kidrow b{font-variant-numeric:tabular-nums}

/* Hidden locations still hold stock — say so, so totals never look wrong. */
.lochidden{display:flex;justify-content:space-between;gap:10px;align-items:center;
  padding:10px 12px;border:1px dashed var(--line);border-radius:12px;
  color:var(--muted);font-size:13px;font-weight:600}
.lochidden a{font-size:13px}

/* Settings: one row per location (pin/show/hide, or shelf name). */
.locsettings{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.locset{display:flex;align-items:center;gap:8px;padding:8px 10px;
  border:1.5px solid var(--line);border-radius:12px;background:#fff}
.locset .nm{flex:1;font-weight:600;font-size:14px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.locset select,.locset .shelf-in{width:auto;min-width:112px;margin:0;padding:7px 8px;font-size:13px}
.locset .mv{display:flex;gap:3px;flex:0 0 auto}
.btn.tiny{padding:4px 8px;font-size:12px;line-height:1.1;min-width:0}
.btnrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tagline{font-size:12px;font-weight:600;color:var(--muted)}

/* Shelf (mother) QR result in Scan to Check. */
.gc-floors{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.gc-floor{display:flex;gap:6px;align-items:baseline;padding:5px 9px;border-radius:9px;
  background:var(--pink-tint);color:var(--pink);font-size:13px;font-weight:700}
.gc-items{display:flex;flex-direction:column;margin-top:6px;text-align:left}
.gc-item{display:flex;flex-wrap:wrap;gap:6px;align-items:baseline;
  padding:9px 2px;border-top:1px solid var(--line)}
.gc-item.zero{opacity:.5}
.gc-item .gi-name{flex:1;font-weight:600;font-size:14px}
.gc-item .gi-qty{font-weight:800;font-variant-numeric:tabular-nums}
.gc-item .gi-where{flex:0 0 100%;display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
/* Same pill as the inventory chips — .chip is scoped to .locchips there. */
.gc-item .gi-where .chip{font-size:11.5px;padding:2px 8px;border-radius:20px;
  background:var(--bg);border:1px solid var(--line);color:var(--muted)}
.gc-item .gi-where .chip b{color:var(--ink);font-weight:700}

/* ---------- Multi-Pack ---------- */
/* A thin always-there strip: which parcel you're on, and how many are queued. */
.mp-strip{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;
  padding:9px 12px;margin-bottom:12px;border-radius:12px;background:var(--pink-tint);
  border:1.5px solid transparent;color:var(--pink);font-size:13px;font-weight:700;
  font-family:inherit;text-align:left;cursor:pointer}
/* Outlined only when something is actually waiting, so it reads as "tap me". */
.mp-strip.has-pending{border-color:var(--pink-soft)}
.mp-strip:active{background:var(--pink-soft)}
.mp-waiting{font-weight:700;opacity:.9}
.mp-step{display:block}
.mp-step.hidden{display:none}

.mp-alt{display:flex;gap:8px;align-items:center;margin-top:10px}
.mp-alt input{margin:0;flex:1;min-width:0}
.mp-photo{display:block;text-align:center;margin-top:8px;cursor:pointer}
.mp-track{margin-bottom:12px}
.mp-chip{display:inline-block;padding:4px 10px;border-radius:20px;background:var(--pink-tint);
  color:var(--pink);font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums}

/* The ask: big enough to read at arm's length while holding a bottle. */
.mp-target{text-align:center;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:16px 14px;margin-bottom:12px}
.mp-count{font-size:13px;font-weight:700;color:var(--muted);letter-spacing:.3px}
.mp-img{max-height:120px;width:auto;margin:8px auto 4px;display:block;border-radius:10px}
.mp-name{font-size:24px;font-weight:800;line-height:1.15;margin-top:4px}
.mp-progress{margin-top:8px;font-size:15px;color:var(--muted)}
.mp-progress b{font-size:22px;color:var(--pink);font-variant-numeric:tabular-nums}

.mp-lines{display:flex;flex-direction:column;margin:12px 0}
.mp-line{display:flex;justify-content:space-between;gap:10px;padding:9px 12px;
  border:1px solid var(--line);border-top-width:0;font-size:14px;background:var(--card)}
.mp-line:first-child{border-top-width:1px;border-radius:12px 12px 0 0}
.mp-line:last-child{border-radius:0 0 12px 12px}
.mp-line:only-child{border-radius:12px}
.mp-line b{font-variant-numeric:tabular-nums}
.mp-line.done{color:var(--muted)}
.mp-line.done b{color:#1c7a3a}
.mp-line.cur{background:var(--pink-tint);border-color:var(--pink-soft);font-weight:700}

.mp-order{border:1px solid var(--line);border-radius:var(--radius);background:var(--card);
  padding:12px;margin-bottom:10px}
.mp-order.warn{border-color:#f0d9ab;background:#fffaf0}
.mp-order-h{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px}
.mp-order .mp-line{border-left:0;border-right:0;border-radius:0}
.mp-order .mp-line:first-child{border-top-width:1px}
.mp-order .btn{margin-top:8px}

.ordapp .orderlist{display:flex;flex-direction:column;gap:10px}
.ord-meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:8px}
.ord-when{font-size:12px;color:var(--muted);margin-left:auto;font-variant-numeric:tabular-nums}
.ordapp .mp-order .btnrow{margin-top:10px}
.ordapp .btn.tiny{padding:6px 11px;font-size:12.5px}

/* ---------- Analytics dashboard ---------- */
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.chip-btn{display:inline-block;padding:7px 13px;border-radius:20px;border:1.5px solid var(--line);
  background:#fff;color:var(--muted);font-size:13px;font-weight:700;text-decoration:none}
.chip-btn.on{border-color:var(--pink);background:var(--pink-tint);color:var(--pink)}
.an-range{margin-bottom:16px}
.an-custom{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.an-custom input,.an-custom select{margin:0;height:34px;padding:4px 8px;font-size:13px;width:auto;min-width:0;flex:1 1 auto}
.an-custom span{color:var(--muted);font-size:13px}

.chartbox{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:12px;position:relative;height:260px}
.chartbox canvas{max-width:100%}
/* Wide tables scroll inside their own box — the page itself must never scroll sideways. */
.scrollx{overflow-x:auto;-webkit-overflow-scrolling:touch;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius)}

.an-table{width:100%;border-collapse:collapse;background:var(--card);font-size:13px}
.scrollx .an-table{border:0;min-width:100%;width:auto}
.an-table th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.4px;
  color:var(--muted);padding:9px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.an-table td{padding:9px 10px;border-bottom:1px solid var(--line)}
.an-table tr:last-child td{border-bottom:0}
.an-table .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.an-table .nm{font-weight:600}
.an-table tr.warn{background:#fffaf0}
.an-table .low{color:#c2410c}
.an-table .tot{font-weight:700}
.an-table.heat td.heatcell{text-align:center;padding:8px 6px;font-weight:700;min-width:38px}
.an-table.heat th{text-align:center}
.an-table.heat th:first-child,.an-table.heat td:first-child{text-align:left;position:sticky;left:0;
  background:var(--card);z-index:1;min-width:118px}

.an-up{color:#1c7a3a;font-weight:700}
.an-down{color:#c2410c;font-weight:700}
.an-flat{color:var(--muted)}
.an-plus{color:var(--pink);font-weight:700}
/* The one box that tells you what to physically go and do. */
.an-action{margin-top:10px;padding:12px 14px;border-radius:12px;background:var(--pink-tint);
  border:1px solid var(--pink-soft);font-size:13px;line-height:1.5}
.an-action b{display:block;color:var(--pink);margin-bottom:3px}
.an-dead{margin-top:8px;padding:10px 12px;border-radius:12px;border:1px dashed var(--line);
  color:var(--muted);font-size:12.5px;line-height:1.5}
.an-foot{margin-top:20px;font-size:12px;line-height:1.6}

/* ---------- Insights (data explorer) ---------- */
/* The hidden attribute must win. Several component classes here set a display value,
   which otherwise beats the browser's default [hidden]{display:none} on specificity
   and leaves "hidden" elements on screen. */
[hidden]{display:none !important}

/* Upload progress for the warehouse file. Long uploads need a real bar, not a spinner. */
.wh-mode{display:flex;flex-direction:column;gap:8px;margin:14px 0}
.wh-mode .pcheck{align-items:flex-start;font-weight:400}
.wh-mode .pcheck b{font-weight:700}
.wh-mode .pcheck small{display:block;margin-top:2px;line-height:1.5}
.wh-bar{height:8px;border-radius:20px;background:var(--line);overflow:hidden;margin:12px 0 8px}
.wh-fill{height:100%;width:0;background:var(--pink);transition:width .2s ease}

/* Ready-made views. The first thing on the page, because picking one is what most
   visits are actually for — the builder below is for when none of them fits. */
.ex-starters{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:8px;margin-bottom:16px}
.ex-start{display:flex;flex-direction:column;gap:2px;text-align:left;padding:10px 12px;
  border:1.5px solid var(--line);border-radius:12px;background:#fff;cursor:pointer;
  font:inherit;color:var(--ink);width:100%}
.ex-start b{font-size:13.5px}
.ex-start small{color:var(--muted);font-size:11.5px;line-height:1.35}
.ex-start:hover{border-color:var(--pink-soft)}
.ex-start.on{border-color:var(--pink);background:var(--pink-tint)}
.ex-start.on b{color:var(--pink)}

/* The picker row: dataset, breakdown, metrics. Wraps to one column on a phone. */
.ex-build{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;margin-bottom:12px}
.ex-field{display:flex;flex-direction:column;gap:4px;flex:1 1 150px;min-width:0}
/* A flex display would otherwise beat the [hidden] attribute and show the control anyway. */
.ex-field[hidden],.ex-build [hidden]{display:none}
.ex-field label{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);font-weight:700}
.ex-field select,.ex-field input{margin:0;height:36px;padding:4px 8px;font-size:13px;width:100%}
/* Metrics are multi-select: chips you toggle, not a control you have to cmd-click. */
.ex-metrics{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.ex-m{padding:6px 12px;border-radius:20px;border:1.5px solid var(--line);background:#fff;
  color:var(--muted);font-size:12.5px;font-weight:700;cursor:pointer;user-select:none}
.ex-m.on{border-color:var(--pink);background:var(--pink-tint);color:var(--pink)}

/* The vs-previous line sits under the metric name, not beside it. */
.scard .ex-delta{display:block;margin-top:2px;font-size:11.5px}

/* Saved views: the two or three questions you ask every week. */
.ex-saved{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:12px}
.ex-saved .ex-m{cursor:pointer}

/* Caveats about the data on screen. Deliberately loud enough to read, quiet enough to ignore. */
.ex-notes{margin:10px 0;padding:10px 12px;border-radius:12px;border:1px dashed var(--line);
  background:var(--bg);font-size:12.5px;line-height:1.6;color:var(--muted)}
.ex-notes b{color:var(--ink);display:block;margin-bottom:3px}
.ex-notes ul{margin:0;padding-left:18px}

/* Ask box — plain-language question in, a built view out. */
.ex-ask{display:flex;gap:6px;margin-bottom:12px}
.ex-ask input{margin:0;height:40px;flex:1 1 auto;min-width:0;font-size:14px}
.ex-ai{margin:12px 0;padding:14px 16px;border-radius:var(--radius);background:var(--card);
  border:1px solid var(--line);font-size:13.5px;line-height:1.65}
.ex-ai h4{margin:0 0 6px;font-size:13px;color:var(--pink);text-transform:uppercase;letter-spacing:.4px}
.ex-ai p{margin:0 0 8px}
.ex-ai p:last-child{margin-bottom:0}
.ex-ai ul{margin:0 0 8px;padding-left:18px}
.ex-ai.thinking{color:var(--muted);font-style:italic}
/* What the AI decided to look at, shown before you trust the answer. */
.ex-spec{font-size:12px;color:var(--muted);margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
.ex-stale{font-size:12.5px;color:#c2410c;font-weight:600}

/* Shelves: live parent → children preview, so the grouping is visible before saving. */
.shelftree{margin:12px 0;padding:12px;border:1px dashed var(--line);border-radius:12px;background:var(--bg)}
.st-shelf{margin-bottom:10px}
.st-shelf b{font-size:14px}
.st-count{margin-left:8px;font-size:11.5px;font-weight:700;color:var(--pink);
  background:var(--pink-tint);padding:2px 7px;border-radius:20px}
.st-kid{margin:3px 0 0 12px;font-size:13px;color:var(--muted);font-family:var(--mono,monospace)}
.st-loose{font-size:12.5px;color:var(--muted)}
.locset .shelf-pick{min-width:150px}

/* Order panel on a history record (cancel without deleting). */
.ostatus{font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;
  padding:3px 9px;border-radius:20px;margin-left:8px;vertical-align:middle;
  background:var(--bg);color:var(--muted);border:1px solid var(--line)}
.ostatus.packed,.ostatus.delivered{background:#e8f6ec;color:#1c7a3a;border-color:#bfe4cb}
.ostatus.packing,.ostatus.awaiting_shipment{background:#fff4e0;color:#9a6200;border-color:#f0d9ab}
.ostatus.cancelled{background:#fdeaea;color:#a32222;border-color:#f0c2c2}
/* Courier lifecycle: collection is ours, transit is theirs, failure shouts. */
.ostatus.awaiting_collection{background:var(--pink-tint);color:var(--pink);border-color:var(--pink-soft)}
.ostatus.in_transit{background:#e8f0fb;color:#1d4ed8;border-color:#c3d6f5}
.ostatus.failed_delivery{background:#fdeaea;color:#a32222;border-color:#f0c2c2}
.ostatus.returned{background:#eef0f4;color:#4b5563;border-color:#d7dbe2}

/* Last courier event, and the full timeline behind a disclosure. */
.ord-event{display:flex;flex-wrap:wrap;gap:6px;align-items:baseline;margin:8px 0;
  padding:8px 10px;border-radius:10px;background:var(--bg);font-size:12.5px;color:var(--ink)}
.ord-timeline{margin-bottom:8px}
.ord-timeline summary{cursor:pointer;font-size:12px;font-weight:700;color:var(--muted);padding:4px 0}
.tl-row{display:flex;gap:8px;padding:5px 0 5px 10px;font-size:12.5px;border-top:1px solid var(--line)}
.tl-when{flex:0 0 auto;color:var(--muted);font-variant-numeric:tabular-nums}

/* Returns: condition then destination, inline on the card. */
.ret-box{margin-top:10px;padding:12px;border-radius:12px;border:1px solid var(--pink-soft);
  background:var(--pink-tint)}
.ret-box.hidden{display:none}
.ret-box label{display:block;margin-top:8px;font-size:13px;font-weight:600}
.ret-box select{margin-top:4px}
.ret-box .chip-btn.on{border-color:var(--pink);background:#fff;color:var(--pink)}
.ret-box .note{margin-top:6px}

/* Setting a courier status by hand, per parcel. */
.st-set{display:flex;align-items:center;gap:8px;margin-top:8px}
.st-set label{margin:0;flex:0 0 auto}
.st-set select{margin:0;height:32px;padding:3px 8px;font-size:12.5px;width:auto;flex:1;min-width:0}

/* Bulk status tool: deliberately looks like a tool, not a list item. */
.bulk-status{border-color:var(--pink-soft);background:var(--pink-tint);margin-bottom:12px}
/* A quiet line, not a call to action — most of Waiting has nothing to confirm. */
.ready-strip{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;padding:10px 12px;margin-bottom:12px;border-radius:10px;
  border:1px solid var(--pink-soft);background:var(--pink-tint);font-size:14px}
.ready-strip .btn{flex:0 0 auto;margin:0}
.pill{display:inline-block;min-width:18px;padding:0 5px;margin-left:4px;border-radius:9px;
  background:var(--pink);color:#fff;font-size:11px;line-height:17px;text-align:center;
  font-variant-numeric:tabular-nums}
/* Pressed state for the panel toggle — also what gives the white pill contrast. */
.btn.ghost.on{background:var(--pink);color:#fff;border-color:var(--pink)}
.btn.ghost.on .pill{background:#fff;color:var(--pink)}
.bulk-status b{display:block;font-size:14px;margin-bottom:4px}
.bulk-status .an-custom{margin-top:10px}
.bulk-status input[type=number],.bulk-status select{margin:0;height:34px;font-size:13px}

/* The card you arrived at by scanning its label. */
.mp-order.focused{border-color:var(--pink);box-shadow:0 0 0 3px var(--pink-tint)}
.olines{margin:10px 0}
.oline{display:flex;justify-content:space-between;gap:10px;padding:7px 0;
  border-top:1px solid var(--line);font-size:14px}
.oline b{font-variant-numeric:tabular-nums}

/* Tick-list of locations (Settings → packing bay). Whole row is the tap target. */
.picklist-check{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.pcheck{display:flex;align-items:center;gap:10px;padding:11px 12px;margin:0;
  border:1.5px solid var(--line);border-radius:12px;background:#fff;cursor:pointer;font-weight:600}
.pcheck input{width:20px;height:20px;margin:0;flex:0 0 auto;accent-color:var(--pink)}
.pcheck:has(input:checked){border-color:var(--pink);background:var(--pink-tint);color:var(--pink)}

/* the one clickable stat card: prompts an admin to choose a packing bay */
.scard.set-bay{display:block;border:1px dashed var(--pink-soft)}
.scard.set-bay b{color:var(--faint)}
.scard.set-bay small{color:var(--pink);font-weight:600}

/* pager (stock history) */
.pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-top:12px}
.pager .pinfo{color:var(--muted);font-size:13px}
.pager .pnav{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.pager .pnav .btn{padding:7px 12px;font-size:13px}
.pager .ppos{font-size:13px;font-weight:600;padding:0 4px}

/* menu list */
.menu{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.menu a{display:flex;align-items:center;gap:12px;padding:15px 16px;border-bottom:1px solid var(--line);font-size:16px}
.menu a:last-child{border-bottom:none}
.menu a .ic{font-size:20px;color:var(--pink);width:24px;text-align:center}
.menu a .go{margin-left:auto;color:var(--faint)}

/* ---------- Desktop: sidebar + wider content ---------- */
@media (min-width:860px){
  .app{display:grid;grid-template-columns:240px 1fr;padding-bottom:0;min-height:100vh}
  .topbar{display:none}
  .bottomnav,.fab{display:none}
  .sidebar{display:flex;flex-direction:column;background:#fff;border-right:1px solid var(--line);
    padding:22px 14px;position:sticky;top:0;height:100vh}
  .sidebar .logo{margin:6px 8px 24px}
  .sidebar .logo img{height:28px;width:auto;display:block}
  .sidebar nav{display:flex;flex-direction:column;gap:4px}
  .sidebar nav a{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:12px;
    color:var(--ink);font-weight:600;font-size:15px}
  .sidebar nav a .ic{font-size:20px;color:var(--muted)}
  .sidebar nav a.active{background:var(--pink-tint);color:var(--pink)}
  .sidebar nav a.active .ic{color:var(--pink)}
  .sidebar nav a:hover{background:var(--bg)}
  .sidebar .foot{margin-top:auto;color:var(--muted);font-size:13px;padding:10px 14px;line-height:1.8}
  .sidebar .foot a{color:var(--pink);font-weight:600}
  .sidebar .foot .ver{display:block;margin-top:6px}
  .sidebar .foot .ver a{color:var(--muted);font-weight:400;font-size:12px}
  .wrap{max-width:900px;padding:28px 32px}
  .summary{grid-template-columns:repeat(4,1fr)}
  .tiles{grid-template-columns:repeat(4,1fr)}
  .itemgrid{grid-template-columns:repeat(5,1fr)}
  .orderlist{display:grid;grid-template-columns:1fr 1fr;gap:12px}
}

/* ==========================================================================
   Degen Bros components
   Everything below is new for this app — card tiles, the pack table, the split
   preview and the settle-up list. The shell, buttons, cards, chips and stat bar
   above are inherited and unchanged.
   ========================================================================== */

/* --- layout helpers --- */
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.two > label{margin:0}
@media (max-width:420px){.two{grid-template-columns:1fr}}
.btn.block{display:block;width:100%;text-align:center;margin:0 0 14px}
.btnrow.sticky{position:sticky;bottom:78px;z-index:20;display:flex;gap:8px;
  padding:10px;margin:14px -4px 0;background:rgba(245,245,250,.94);
  backdrop-filter:blur(8px);border-radius:var(--radius)}
@media (min-width:900px){.btnrow.sticky{bottom:12px}}
.center{text-align:center}

/* --- notices --- */
.notice{border-left:4px solid var(--pink)}
.notice.ok{border-left-color:var(--ok)}
.notice.err{border-left-color:var(--err)}
.notice strong{display:block;margin-bottom:4px}

/* --- plain lists (balances, recent, history) --- */
ul.plain{list-style:none;margin:0;padding:0}
ul.plain li{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 0;border-bottom:1px solid var(--line)}
ul.plain li:last-child{border-bottom:0}
ul.plain .amt{flex:0 0 auto;font-variant-numeric:tabular-nums;text-align:right;color:var(--ink)}
ul.plain .amt.pos{color:var(--ok)}
ul.plain .amt.neg{color:var(--err)}
.kind{display:inline-block;margin-left:6px;font-size:11px;font-style:normal;
  color:var(--muted);text-transform:lowercase}
.split li{font-weight:600}
.settleplan li{flex-wrap:wrap}
.settleplan form.inline{margin:0}
.hist li{align-items:flex-start}
.hist small{display:block;color:var(--muted);font-size:12px}

/* --- stock list --- */
.stocklist{display:flex;flex-direction:column;gap:8px}
.card.stockrow{display:flex;align-items:center;gap:12px;padding:10px 12px}
.sr-body{flex:1;min-width:0}
.sr-body strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sr-body small{display:block;color:var(--muted);font-size:12px}
.sr-right{flex:0 0 auto;text-align:right}
.sr-right b{display:block;font-variant-numeric:tabular-nums}
.qty{font-size:12px;color:var(--muted)}
.qty.zero{color:var(--err)}
.where{color:var(--muted)}
.cardimg{flex:0 0 auto;width:42px;height:58px;object-fit:cover;border-radius:6px;
  background:var(--pink-tint)}

/* --- catalogue grid --- */
.cardgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
.cardtile{background:var(--card);border-radius:var(--radius);padding:10px;
  box-shadow:var(--shadow);display:flex;flex-direction:column;gap:4px}
.cardtile img{width:100%;aspect-ratio:5/7;object-fit:cover;border-radius:8px}
.cardtile .noimg{width:100%;aspect-ratio:5/7;border-radius:8px;background:var(--pink-tint);
  display:flex;align-items:center;justify-content:center;color:var(--pink-soft);font-size:28px}
.cardtile strong{font-size:13px;line-height:1.25}
.cardtile small{color:var(--muted);font-size:11px}
.pill.have{background:var(--ok);color:#fff}

/* --- order builder --- */
.results{max-height:320px;overflow:auto;margin:-4px 0 12px}
.result{display:flex;align-items:center;gap:10px;width:100%;padding:8px;
  background:none;border:0;border-bottom:1px solid var(--line);text-align:left;cursor:pointer}
.result:hover,.result:focus{background:var(--pink-tint)}
.result img{width:34px;height:47px;object-fit:cover;border-radius:4px}
.result span{flex:1;min-width:0}
.result strong{display:block;font-size:14px}
.result small{display:block;color:var(--muted);font-size:11px}
.result b{font-variant-numeric:tabular-nums;font-size:13px}

table.lines{width:100%;border-collapse:collapse;font-size:13px}
table.lines th{text-align:left;font-size:11px;color:var(--muted);font-weight:600;
  padding:6px 4px;border-bottom:1px solid var(--line)}
table.lines td{padding:8px 4px;border-bottom:1px solid var(--line);vertical-align:top}
table.lines small{display:block;color:var(--muted);font-size:11px;line-height:1.4}
table.lines tr.short td{background:rgba(249,81,92,.06)}
input.mini{width:100%;min-width:56px;padding:6px;font-size:13px}
.linkbtn{background:none;border:0;color:var(--pink);font-size:11px;cursor:pointer;padding:2px 0}
.linkbtn.del{color:var(--err);font-size:16px}

/* --- pack table --- */
.packlist{display:flex;flex-direction:column;gap:8px}
.card.packline{display:flex;align-items:center;gap:12px;padding:10px 12px;transition:opacity .15s}
.card.packline.ticked{opacity:.5}
.card.packline.ticked .tick{background:var(--ok);color:#fff;border-color:var(--ok)}
.pl-body{flex:1;min-width:0}
.pl-body strong{display:block}
.pl-body small{display:block;color:var(--muted);font-size:12px}
.tick{flex:0 0 auto;width:58px;height:58px;border-radius:50%;border:2px solid var(--line);
  background:var(--card);cursor:pointer;font-variant-numeric:tabular-nums;font-weight:700}
.tick:active{transform:scale(.94)}
.bar{height:6px;border-radius:3px;background:var(--line);overflow:hidden;margin-top:8px}
.bar i{display:block;height:100%;background:var(--grad);transition:width .2s}

/* --- misc --- */
.chosen{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.chosen small{display:block;color:var(--muted);font-size:12px}
.menulist{display:flex;flex-direction:column}
.menulist a{display:flex;align-items:center;gap:12px;padding:14px 4px;
  border-bottom:1px solid var(--line)}
.menulist a:last-child{border-bottom:0}
.menulist .ic{width:24px;text-align:center;color:var(--pink)}
label.check{display:flex;align-items:center;gap:8px;font-weight:400;margin:10px 0}
label.check input{width:auto;margin:0}
label small{font-weight:400;color:var(--muted);font-size:11px}

/* card headers, "see all" links, and the tile row on Home */
.card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.card-head h2{font-size:16px;margin:0}
.more{font-size:13px;color:var(--pink);font-weight:600}
.card.order .card-head h2 a{color:var(--pink)}
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:14px}
.tile{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:14px;display:flex;flex-direction:column;gap:2px}
.tile .n{font-size:22px;font-weight:700;line-height:1.15}
.tile .l{font-size:12px;color:var(--muted)}
.tile.warn .n{color:var(--err)}

/* ==========================================================================
   POS — the till
   Desktop puts the cart beside the cards; phones stack them, cards first,
   because that is the order you touch them in.
   ========================================================================== */
.pos-grid{display:grid;grid-template-columns:1fr;gap:14px}
@media (min-width:980px){
  .pos-grid{grid-template-columns:1fr 360px;align-items:start}
  .pos-cart{position:sticky;top:70px}
}
.pos-search{display:flex;gap:8px;margin-bottom:10px}
.pos-search input{flex:1;margin:0}
.pos-tiles{grid-template-columns:repeat(auto-fill,minmax(116px,1fr))}
.cardtile.postile{cursor:pointer;text-align:left;border:2px solid transparent;
  font:inherit;color:inherit}
.cardtile.postile:active{transform:scale(.97)}
/* A four-figure card should look different from a ฿30 one before you tap it. */
.cardtile.postile.bigmoney{border-color:var(--yellow);
  box-shadow:0 0 0 3px rgba(255,224,13,.25),var(--shadow)}
.cardtile b{display:flex;justify-content:space-between;align-items:baseline;
  font-variant-numeric:tabular-nums}
.cardtile .who{font-size:10px;color:var(--muted)}
.vbadge{display:inline-block;background:var(--yellow);color:#3e3f5e;font-style:normal;
  font-size:9px;font-weight:800;padding:1px 5px;border-radius:4px;letter-spacing:.3px;
  text-transform:uppercase}
.vbadge.sm{font-size:8px}

.cartline{display:grid;grid-template-columns:1fr 48px 62px 48px 22px;gap:5px;
  align-items:center;padding:7px 0;border-bottom:1px solid var(--line)}
.cartline .cl-body{min-width:0}
.cartline strong{display:block;font-size:13px;line-height:1.2}
.cartline small{display:block;font-size:10px;color:var(--muted)}
.cartline input{margin:0}

.newbuyer{margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.newbuyer textarea{width:100%;font:inherit;padding:10px;border:1px solid var(--line);
  border-radius:var(--radius-sm);background:var(--card);color:var(--ink)}
.parsed{margin-top:10px;padding:10px;background:var(--pink-tint);border-radius:var(--radius-sm)}

.feechips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.feechip{cursor:pointer;border:1px solid var(--line);background:var(--card)}
.feeline{display:grid;grid-template-columns:1fr 74px 22px;gap:6px;align-items:center;
  padding:5px 0;border-bottom:1px solid var(--line);font-size:13px}

/* --- order queue selection --- */
.selbox{display:inline-flex;align-items:center;margin-right:8px}
.selbox input{width:20px;height:20px;margin:0}
.selbar{position:fixed;left:0;right:0;bottom:78px;z-index:45;display:flex;
  align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding:10px 14px;background:var(--card);border-top:1px solid var(--line);
  box-shadow:0 -4px 16px rgba(62,63,94,.10)}
@media (min-width:900px){.selbar{bottom:0}}

/* --- courier picker --- */
.couriers{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
label.courier{display:flex;align-items:center;gap:10px;padding:9px 11px;
  border:1px solid var(--line);border-radius:var(--radius-sm);cursor:pointer;margin:0}
label.courier:has(input:checked){border-color:var(--pink);background:var(--pink-tint)}
label.courier img{height:22px;width:auto}
label.courier span{flex:1;font-size:14px}
label.courier b{font-variant-numeric:tabular-nums}
.dims{display:flex;gap:5px}
.dims input{margin:0;text-align:center}

/* --- spreadsheet import preview --- */
.imp-order{margin:14px 0;padding:10px;border:1px solid var(--line);border-radius:var(--radius-sm)}
.imp-order h3{margin:0 0 8px;font-size:14px}
.imp-order h3 small{font-weight:400;color:var(--muted)}
.imp-line{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:center;
  padding:6px 0;border-bottom:1px solid var(--line)}
.imp-line:last-child{border-bottom:0}
.imp-line strong{display:block;font-size:13px}
.imp-line small{display:block;font-size:11px;color:var(--muted)}
.imp-line select{margin:0;font-size:12px}
/* Anything we could not confidently match gets flagged rather than guessed. */
.imp-line.unmatched{background:rgba(249,81,92,.07)}
@media (max-width:560px){.imp-line{grid-template-columns:1fr}}