/* POS stylesheet. No web fonts, no CDN: works offline on the shop PC. */
:root{
  --ink:#231a5c;--ink2:#3d2090;--bg:#f3f2ff;--card:#fff;--line:#e5e2f7;--text:#201a3d;--muted:#6f6a93;
  --violet:#6c47ff;--coral:#ff5c7a;--amber:#ffb52e;--teal:#0fb5a3;--sky:#2f9bff;--lime:#7bcf3a;--pink:#f25cc0;
  --orange:#ff8a3d;--indigo:#4f5bd5;--green:#22b573;--red:#e5384f;--slate:#7a7f9c;
  --r:14px;--shadow:0 6px 22px rgba(60,40,140,.10);
  --font:"Segoe UI","Nirmala UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);font-size:15px;color:var(--text);background:var(--bg);line-height:1.45}
a{color:var(--violet);text-decoration:none}a:hover{text-decoration:underline}
h1{font-size:1.55rem;margin:0 0 .2rem;letter-spacing:-.01em}h3{margin:.2rem 0}
.muted{color:var(--muted)}.small{font-size:.85rem}.center{text-align:center}.sp{flex:1}.r{text-align:right}
.noprint{}
.big-code{font-size:4rem;margin:0;color:var(--coral)}

/* ---------- shell ---------- */
.shell{display:flex;min-height:100vh}
.side{width:250px;flex:0 0 250px;background:linear-gradient(175deg,var(--ink) 0%,var(--ink2) 60%,#5b2aa8 100%);color:#fff;
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto;z-index:30}
.brand{display:flex;align-items:center;gap:.7rem;padding:1.1rem 1rem;color:#fff;font-weight:700;font-size:1.05rem;border-bottom:1px solid rgba(255,255,255,.12)}
.brand:hover{text-decoration:none}
.brand img{height:40px;max-width:60px;object-fit:contain;background:#fff;border-radius:10px;padding:3px}
.brand .mark{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,var(--amber),var(--coral));display:grid;place-items:center;font-size:1.3rem}
.bname{overflow:hidden;text-overflow:ellipsis;line-height:1.15}
.side nav{padding:.6rem .55rem;flex:1}
.side nav a{display:flex;align-items:center;gap:.75rem;padding:.55rem .65rem;margin:2px 0;border-radius:12px;color:#fff;font-weight:600;font-size:.95rem}
.side nav a:hover{background:rgba(255,255,255,.09);text-decoration:none}
.side nav a.on{background:#fff;color:var(--ink);box-shadow:0 4px 14px rgba(0,0,0,.18)}
.chip{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;font-style:normal;font-size:1.05rem;flex:0 0 32px}
.c-violet{background:linear-gradient(135deg,#8f73ff,#6c47ff)}.c-coral{background:linear-gradient(135deg,#ff8aa0,#ff5c7a)}
.c-amber{background:linear-gradient(135deg,#ffd166,#ffb52e)}.c-sky{background:linear-gradient(135deg,#6dbbff,#2f9bff)}
.c-teal{background:linear-gradient(135deg,#43d8c7,#0fb5a3)}.c-lime{background:linear-gradient(135deg,#aee37a,#7bcf3a)}
.c-pink{background:linear-gradient(135deg,#ff9bdc,#f25cc0)}.c-orange{background:linear-gradient(135deg,#ffb27a,#ff8a3d)}
.c-indigo{background:linear-gradient(135deg,#8a94f0,#4f5bd5)}.c-green{background:linear-gradient(135deg,#59d99d,#22b573)}
.c-slate{background:rgba(255,255,255,.2)}.c-rose{background:linear-gradient(135deg,#ff9fb0,#e5436b)}
.grp{margin:1rem .7rem .35rem;font-size:.74rem;color:#e4defe;letter-spacing:.09em;text-transform:uppercase;font-weight:700;opacity:.85}
.side-foot{padding:.8rem 1rem;font-size:.8rem;color:#e4defe;border-top:1px solid rgba(255,255,255,.12)}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.top{display:flex;align-items:center;gap:.8rem;padding:.65rem 1.2rem;background:rgba(255,255,255,.85);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.crumb{font-weight:700;font-size:1.05rem}
.burger{display:none;border:0;background:var(--violet);color:#fff;border-radius:10px;width:40px;height:40px;font-size:1.2rem}
.content{padding:1.2rem;max-width:1400px;width:100%;margin:0 auto}
.avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--violet),var(--pink));color:#fff;display:inline-grid;place-items:center;font-weight:700}
.usermenu{position:relative}.usermenu summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.5rem;font-weight:600}
.usermenu summary::-webkit-details-marker{display:none}
.usermenu>div{position:absolute;right:0;top:130%;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);min-width:180px;padding:.3rem;z-index:40}
.usermenu>div a{display:block;padding:.55rem .8rem;border-radius:8px;color:var(--text)}.usermenu>div a:hover{background:var(--bg);text-decoration:none}
.sync-badge{display:inline-flex;align-items:center;gap:.45rem;border:1px solid var(--line);background:#fff;border-radius:99px;padding:.3rem .8rem;font-size:.85rem;font-weight:600;color:var(--muted);cursor:pointer}
.sync-badge i{width:10px;height:10px;border-radius:50%;background:var(--slate)}
.sync-badge.on{color:#117a4f;border-color:#bdebd5;background:#effcf6}.sync-badge.on i{background:var(--green)}
.sync-badge.wait{color:#9a6200;border-color:#ffe0a3;background:#fff8e8}.sync-badge.wait i{background:var(--amber)}
.sync-badge.off{color:#a3203a;border-color:#ffc6d0;background:#fff1f3}.sync-badge.off i{background:var(--red)}
.sync-badge.busy i{animation:pulse 1s infinite}@keyframes pulse{50%{opacity:.25}}

/* ---------- cards, buttons, forms ---------- */
.card{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:1rem 1.1rem;margin-bottom:1rem;border:1px solid #efecff}
.page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap;margin-bottom:.9rem}
.page-head p{margin:.1rem 0 0}
.btns{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;border:1px solid var(--line);background:#fff;color:var(--text);
  padding:.55rem .95rem;border-radius:11px;font:inherit;font-weight:600;cursor:pointer;text-decoration:none;min-height:40px}
.btn:hover{background:#f7f5ff;text-decoration:none}
.btn.primary{background:linear-gradient(135deg,var(--violet),#8a4dff);color:#fff;border-color:transparent;box-shadow:0 5px 14px rgba(108,71,255,.35)}
.btn.primary:hover{filter:brightness(1.07)}
.btn.good{background:linear-gradient(135deg,var(--green),var(--teal));color:#fff;border-color:transparent}
.btn.warn{background:linear-gradient(135deg,var(--amber),var(--orange));color:#3b2500;border-color:transparent}
.btn.danger{background:linear-gradient(135deg,var(--coral),var(--red));color:#fff;border-color:transparent}
.btn.ghost{background:transparent}.btn.sm{padding:.3rem .65rem;min-height:32px;font-size:.88rem}
.btn:disabled{opacity:.55;cursor:not-allowed}
.flash{padding:.7rem 1rem;border-radius:12px;margin-bottom:.8rem;font-weight:600}
.flash.ok{background:#e6f9f0;color:#0d6b43;border:1px solid #bdebd5}.flash.err{background:#fff0f2;color:#a3203a;border:1px solid #ffc6d0}
.form-card{max-width:900px}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem 1.2rem}
.form-grid .form-h,.form-grid .field:has(textarea){grid-column:1/-1}
.form-h{margin:.8rem 0 0;padding-bottom:.3rem;border-bottom:2px solid var(--line);color:var(--ink2);grid-column:1/-1}
.field{display:flex;flex-direction:column;gap:.25rem;min-width:0}
label{font-weight:600;font-size:.9rem}.req{color:var(--coral)}
input,select,textarea{font:inherit;color:var(--text);padding:.55rem .7rem;border:1.5px solid var(--line);border-radius:10px;background:#fff;width:100%;min-height:42px}
input:focus,select:focus,textarea:focus,.btn:focus-visible{outline:3px solid rgba(108,71,255,.28);border-color:var(--violet)}
input[type=checkbox]{width:auto;min-height:0;accent-color:var(--violet);transform:scale(1.2);margin-right:.4rem}
.chk{display:flex;align-items:center;font-weight:600;padding-top:.3rem}
.help{color:var(--muted);font-size:.8rem}
.field.locked input,.field.locked textarea,.field.locked select{background:#f3f2fa;color:#7a7596}
.field.locked label::after{content:" 🔒";font-size:.8rem}
.filters{display:flex;flex-wrap:wrap;gap:.7rem;align-items:flex-end}.filters .field{min-width:140px;flex:1 1 150px}

/* ---------- tables ---------- */
.scroll{overflow-x:auto}
table.t{width:100%;border-collapse:collapse}
.t th{background:linear-gradient(180deg,#f4f1ff,#ece8ff);color:var(--ink2);text-align:left;padding:.6rem .7rem;font-size:.85rem;white-space:nowrap;position:sticky;top:0}
.t th:first-child{border-radius:10px 0 0 10px}.t th:last-child{border-radius:0 10px 10px 0}
.t td{padding:.55rem .7rem;border-bottom:1px solid #f0eefb;vertical-align:middle}
.t tbody tr:hover{background:#faf9ff}.t td.r,.t th.r{text-align:right;font-variant-numeric:tabular-nums}
.t tfoot td{font-weight:800;background:#faf8ff;border-top:2px solid var(--line)}
.t td.empty{text-align:center;color:var(--muted);padding:2rem}
.t tr.bad{background:#fff1f3}
.badge{display:inline-block;padding:.15rem .6rem;border-radius:99px;font-size:.78rem;font-weight:700}
.badge.good{background:#e0f8ec;color:#0d6b43}.badge.bad{background:#ffe3e8;color:#a3203a}.badge.info{background:#e7efff;color:#2459b8}.badge.warn{background:#fff1d6;color:#8a5a00}
.details{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.6rem 1.2rem}.details span{display:block;color:var(--muted);font-size:.8rem}

/* ---------- dashboard ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-bottom:1rem}
.kpi{border-radius:var(--r);padding:1rem 1.1rem;color:#fff;box-shadow:var(--shadow);position:relative;overflow:hidden;min-height:112px}
.kpi small{opacity:.9;font-weight:600}.kpi b{display:block;font-size:1.7rem;margin-top:.2rem;font-variant-numeric:tabular-nums}
.kpi em{position:absolute;right:-6px;bottom:-14px;font-size:4.6rem;opacity:.22;font-style:normal}
.k1{background:linear-gradient(135deg,#7b5bff,#4f3bd8)}.k2{background:linear-gradient(135deg,#ff7a93,#ff4d6d)}
.k3{background:linear-gradient(135deg,#ffc247,#ff8a3d)}.k4{background:linear-gradient(135deg,#19c7b4,#0b8f9c)}
.cols2{display:grid;grid-template-columns:2fr 1fr;gap:1rem}
.bars{display:flex;align-items:flex-end;gap:.7rem;height:190px;padding-top:.5rem}
.bar{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:.3rem;font-size:.78rem;color:var(--muted)}
.bar div{width:100%;max-width:56px;border-radius:10px 10px 4px 4px;background:linear-gradient(180deg,var(--pink),var(--violet));min-height:4px}
.bar:nth-child(2n) div{background:linear-gradient(180deg,var(--amber),var(--coral))}
.bar b{color:var(--text);font-size:.74rem}
.rank{list-style:none;margin:0;padding:0}.rank li{display:flex;justify-content:space-between;gap:.6rem;padding:.45rem 0;border-bottom:1px dashed var(--line)}
.rank li:last-child{border:0}

/* ---------- POS ---------- */
.pos-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(300px,1fr);gap:1rem;align-items:start}
.scanrow{position:relative;margin-bottom:.5rem}
.scanrow input{font-size:1.1rem;padding:.8rem 1rem;border-color:var(--violet);background:#faf8ff}
.sug{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;border:1.5px solid var(--violet);border-radius:12px;z-index:25;box-shadow:var(--shadow);max-height:320px;overflow:auto}
.sug div{display:flex;justify-content:space-between;gap:.6rem;padding:.6rem .8rem;cursor:pointer;border-bottom:1px solid #f0eefb}
.sug div:hover,.sug div.on{background:#efeaff}
#msg{min-height:1.3rem;font-weight:600;margin:.2rem 0}#msg.ok{color:#0d6b43}#msg.err{color:#a3203a}
.quick{display:flex;gap:.5rem;overflow-x:auto;padding:.2rem 0 .6rem}
.tile{flex:0 0 auto;border:0;border-radius:12px;padding:.55rem .8rem;color:#fff;font:inherit;font-weight:700;text-align:left;cursor:pointer;min-width:120px;max-width:170px}
.tile small{display:block;font-weight:500;opacity:.92}
.tile:nth-child(6n+1){background:linear-gradient(135deg,#7b5bff,#4f3bd8)}.tile:nth-child(6n+2){background:linear-gradient(135deg,#ff7a93,#ff4d6d)}
.tile:nth-child(6n+3){background:linear-gradient(135deg,#ffc247,#ff8a3d)}.tile:nth-child(6n+4){background:linear-gradient(135deg,#19c7b4,#0b8f9c)}
.tile:nth-child(6n+5){background:linear-gradient(135deg,#59b6ff,#2f6bff)}.tile:nth-child(6n+6){background:linear-gradient(135deg,#f58bd6,#c04ee0)}
.side-pos{position:sticky;top:76px;background:linear-gradient(170deg,#fff,#f6f3ff)}
.row{display:flex;justify-content:space-between;align-items:center;gap:.6rem;padding:.4rem 0}
.row input,.row select{width:auto;max-width:130px;min-height:36px;padding:.3rem .5rem;text-align:right}
.row.big{font-size:1.5rem;font-weight:800;padding:.7rem .9rem;margin:.4rem 0;border-radius:12px;color:#fff;background:linear-gradient(135deg,var(--violet),var(--pink))}
.t input.n{width:80px;min-height:34px;padding:.2rem .4rem;text-align:right}.t select.dt{width:56px;min-height:34px;padding:.1rem}
.x{border:0;background:#ffe3e8;color:var(--red);border-radius:8px;width:30px;height:30px;font-weight:700;cursor:pointer}
.empty-cart{text-align:center;padding:2rem;color:var(--muted)}
.lock-box{max-width:520px;margin:3rem auto;text-align:center}

/* ---------- login ---------- */
.guest-main{min-height:100vh;display:grid;place-items:center;padding:1rem;background:radial-gradient(circle at 15% 10%,#ff9bdc55,transparent 40%),radial-gradient(circle at 85% 90%,#2f9bff55,transparent 45%),linear-gradient(160deg,#231a5c,#4a23a8)}
.login-card{background:#fff;border-radius:22px;padding:2rem;width:min(420px,100%);box-shadow:0 20px 60px rgba(0,0,0,.35)}
.login-card .logo{text-align:center;margin-bottom:1rem}.login-card .logo img{max-height:70px;max-width:70%}
.login-card h1{text-align:center}.login-card .field{margin-bottom:.8rem}.login-card .btn{width:100%;font-size:1.05rem}

/* ---------- misc ---------- */
.steps{counter-reset:s;list-style:none;padding:0}.steps li{counter-increment:s;padding:.4rem 0 .4rem 2.4rem;position:relative}
.steps li::before{content:counter(s);position:absolute;left:0;top:.3rem;width:1.8rem;height:1.8rem;border-radius:50%;background:var(--violet);color:#fff;display:grid;place-items:center;font-weight:700;font-size:.85rem}
.pill{display:inline-block;padding:.1rem .55rem;border-radius:99px;background:#efeaff;color:var(--ink2);font-weight:700;font-size:.8rem}
code{background:#f0edff;padding:.1rem .4rem;border-radius:6px}
.report-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1rem}
.rcard{display:block;color:var(--text);border-radius:var(--r);padding:1rem;background:#fff;box-shadow:var(--shadow);border-top:5px solid var(--violet)}
.rcard:hover{text-decoration:none;transform:translateY(-2px)}.rcard b{display:block;margin-bottom:.2rem}
.rcard:nth-child(5n+2){border-color:var(--coral)}.rcard:nth-child(5n+3){border-color:var(--amber)}.rcard:nth-child(5n+4){border-color:var(--teal)}.rcard:nth-child(5n+5){border-color:var(--sky)}
.ext-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.6rem}

/* ---------- responsive ---------- */
@media(max-width:980px){
  .side{position:fixed;left:0;top:0;bottom:0;transform:translateX(-102%);transition:transform .22s ease;box-shadow:10px 0 40px rgba(0,0,0,.35)}
  .side.open{transform:none}.burger{display:inline-block}.cols2,.pos-grid{grid-template-columns:1fr}.side-pos{position:static}
  .content{padding:.8rem}.uname{display:none}
}
@media(max-width:640px){
  .form-grid{grid-template-columns:1fr}
  table.resp thead{display:none}
  table.resp,table.resp tbody,table.resp tr,table.resp td,table.resp tfoot{display:block;width:100%}
  table.resp tr{border:1px solid var(--line);border-radius:12px;margin-bottom:.6rem;padding:.3rem .6rem;background:#fff}
  table.resp td{display:flex;justify-content:space-between;gap:1rem;border:0;padding:.3rem 0;text-align:right!important}
  table.resp td::before{content:attr(data-label);font-weight:700;color:var(--muted);text-align:left}
  table.resp td:empty{display:none}
  .page-head{flex-direction:column}.kpi b{font-size:1.4rem}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media print{.noprint,.side,.top{display:none!important}body{background:#fff}.content{padding:0;max-width:none}.card{box-shadow:none;border:0}.shell{display:block}
  table.resp thead{display:table-header-group}}

/* ================= v4 additions ================= */
.ic{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.chip{color:#fff}.chip .ic{width:18px;height:18px}
.side nav a.on .chip{box-shadow:0 2px 8px rgba(0,0,0,.2)}
.signout{margin-top:.6rem;border-top:1px solid rgba(255,255,255,.14);padding-top:.7rem!important;border-radius:0 0 12px 12px}
.burger{display:none;align-items:center;justify-content:center}.burger .ic{width:22px;height:22px}
.scrim{display:none}
.bnav{display:none}
.seg{display:inline-flex;border:1.5px solid var(--line);border-radius:11px;overflow:hidden;background:#fff}
.seg button,.seg a{border:0;background:transparent;font:inherit;font-weight:700;padding:.4rem .8rem;cursor:pointer;color:var(--muted)}
.seg .on{background:var(--violet);color:#fff}
.sp{flex:1}

/* ---------- POS v2 ---------- */
.pos2{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(380px,1fr);gap:1rem;align-items:start}
.pos-left{min-height:70vh}
.pos-right{position:sticky;top:70px;max-height:calc(100vh - 86px);overflow-y:auto;background:linear-gradient(170deg,#fff,#f6f3ff)}
.scanrow{display:flex;gap:.5rem;position:relative}.scanrow input{flex:1}
.scanrow .sug{top:100%}
.btn.cam{padding:.5rem .7rem}
.cats{display:flex;gap:.45rem;overflow-x:auto;padding:.5rem 0 .6rem;scrollbar-width:thin}
.cat{flex:0 0 auto;border:1.5px solid var(--line);background:#fff;border-radius:99px;padding:.4rem .9rem;font:inherit;font-weight:700;cursor:pointer;color:var(--text);white-space:nowrap}
.cat i{font-style:normal;background:#efeaff;color:var(--ink2);border-radius:99px;padding:0 .45rem;font-size:.78rem;margin-left:.2rem}
.cat.on{background:linear-gradient(135deg,var(--violet),var(--pink));color:#fff;border-color:transparent;box-shadow:0 4px 12px rgba(108,71,255,.3)}
.cat.on i{background:rgba(255,255,255,.3);color:#fff}
.grid-tools{display:flex;align-items:center;gap:.6rem;margin-bottom:.5rem}
.pgrid{display:grid;grid-template-columns:repeat(var(--cols,6),minmax(0,1fr));gap:.5rem}
.ptile{border:0;border-radius:14px;padding:.55rem .55rem .5rem;min-height:92px;display:flex;flex-direction:column;justify-content:space-between;text-align:left;color:#fff;cursor:pointer;font:inherit;box-shadow:0 4px 10px rgba(40,30,110,.16);transition:transform .08s}
.ptile:active{transform:scale(.96)}
.ptile .pn{font-weight:700;font-size:.84rem;line-height:1.2;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
.ptile .pp{font-weight:800;font-size:.95rem;margin-top:.2rem}
.ptile .ps{font-size:.72rem;opacity:.92}
.ptile.out{filter:grayscale(.55) brightness(.92);opacity:.8}
.c0{background:linear-gradient(135deg,#7b5bff,#4f3bd8)}.c1{background:linear-gradient(135deg,#ff7a93,#ff4d6d)}.c2{background:linear-gradient(135deg,#ffb23f,#ff7a2e)}
.c3{background:linear-gradient(135deg,#19c7b4,#0b8f9c)}.c4{background:linear-gradient(135deg,#59b6ff,#2f6bff)}.c5{background:linear-gradient(135deg,#f58bd6,#c04ee0)}
.c6{background:linear-gradient(135deg,#7bd35a,#2a9d57)}.c7{background:linear-gradient(135deg,#8f9bff,#5a4fd1)}
.pager{display:flex;justify-content:center;align-items:center;gap:1rem;margin-top:.8rem}
.cart-head{display:flex;align-items:center;gap:.5rem;margin-bottom:.4rem}
.cartscroll{max-height:34vh;overflow:auto;margin:0 -.2rem}
.cartt th{position:static;font-size:.78rem}.cartt td{padding:.4rem .35rem;font-size:.88rem}
.cartt input.n{width:58px}.cartt select.dt{width:48px}
.qtybox{display:inline-flex;align-items:center;gap:2px}.qtybox input.n{width:50px;text-align:center}
.qb{border:0;background:#efeaff;color:var(--ink2);border-radius:8px;width:28px;height:30px;font-weight:800;font-size:1.05rem;cursor:pointer}
.totals{margin-top:.4rem;border-top:1px dashed var(--line);padding-top:.3rem}
.custbox{margin-top:.5rem;display:grid;gap:.45rem}
.acwrap{position:relative}.acwrap .sug{top:100%}
.bigbtn{flex:1;font-size:1.1rem;padding:.85rem}
.heldbox{display:none;background:#fff8e8;border:1px solid #ffe0a3;border-radius:12px;padding:.6rem;margin-bottom:.5rem}
.held{display:flex;justify-content:space-between;gap:.5rem;align-items:center;padding:.3rem 0;border-bottom:1px dashed #ffe0a3;font-size:.88rem}
.cambox{display:none;position:fixed;inset:0;background:#000d;z-index:100;flex-direction:column;align-items:center;justify-content:center;gap:1rem}
.cambox video{width:min(92vw,520px);border-radius:16px;background:#000}
.mbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:40;background:linear-gradient(135deg,var(--ink),var(--ink2));color:#fff;padding:.6rem .9rem;align-items:center;justify-content:space-between;gap:.8rem}
.mbar span{display:flex;flex-direction:column;line-height:1.1}.mbar small{opacity:.8}.mbt{font-size:1.25rem}
.pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.5rem}
.pick{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:.6rem;align-items:center;border:1.5px solid var(--line);border-radius:12px;padding:.5rem .7rem;background:#fff;cursor:pointer}
.pick input[type=checkbox]{grid-row:1/3}.pk-n{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pk-s{font-size:.8rem;color:var(--muted)}
.pick:has(input:checked){border-color:var(--violet);background:#f4f0ff}
.held-label{font-weight:700}

/* ---------- phone / tablet ---------- */
@media(max-width:1180px){.pos2{grid-template-columns:minmax(0,1fr) minmax(340px,.9fr)}.gsz{display:none}}
@media(max-width:980px){
  .pos2{grid-template-columns:1fr}.pos-right{position:static;max-height:none}.cartscroll{max-height:none}
  .scrim.on{display:block;position:fixed;inset:0;background:#0007;z-index:25}
  .bnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:35;background:#fff;border-top:1px solid var(--line);padding:.25rem .3rem calc(.25rem + env(safe-area-inset-bottom));box-shadow:0 -6px 20px rgba(60,40,140,.12)}
  .bnav a,.bnav button{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:.35rem 0;border:0;background:transparent;color:var(--muted);font:inherit;font-size:.72rem;font-weight:700;text-decoration:none;border-radius:10px}
  .bnav .on{color:var(--violet);background:#f1edff}
  .content{padding-bottom:84px}
  .mbar.show,.mbar[style*="flex"]{bottom:58px}
  .side{width:min(300px,86vw);z-index:50}
  .side nav a{padding:.7rem .7rem}
}
@media(max-width:640px){
  body{font-size:15.5px}
  .top{padding:.5rem .7rem}.crumb{font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:42vw}
  .sync-badge span{max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  h1{font-size:1.3rem}.btn{min-height:44px}.btns .btn.sm{min-height:38px}
  input,select,textarea{min-height:46px;font-size:16px}          /* 16px stops iPhone zoom-in */
  .kpis{grid-template-columns:1fr 1fr;gap:.6rem}.kpi{min-height:98px;padding:.8rem}.kpi b{font-size:1.2rem}
  .pgrid .ptile{min-height:86px}
  /* cart rows become cards */
  .cartt thead{display:none}.cartt,.cartt tbody,.cartt tr,.cartt td{display:block;width:100%}
  .cartt tr{position:relative;border:1px solid var(--line);border-radius:12px;margin-bottom:.5rem;padding:.4rem .6rem;background:#fff}
  .cartt td{display:flex;justify-content:space-between;align-items:center;gap:.6rem;border:0;padding:.22rem 0;text-align:right!important}
  .cartt td::before{content:attr(data-label);font-weight:700;color:var(--muted);font-size:.8rem}
  .cartt td.rm{position:absolute;top:.3rem;right:.4rem;width:auto;padding:0}.cartt td.rm::before{content:none}
  .cartt td:first-child{display:block;text-align:left!important;padding-right:2.2rem}.cartt td:first-child::before{content:none}
  .cartt input.n{width:84px}.qtybox input.n{width:64px}.qb{width:38px;height:40px}
  .row input,.row select{max-width:150px}
  .pick-grid{grid-template-columns:1fr}
  .login-card{padding:1.4rem}
  .cambox video{width:96vw}
}
@media(max-width:380px){.kpis{grid-template-columns:1fr}.pgrid{--cols:2!important}}
@media print{.bnav,.mbar,.scrim{display:none!important}}

@media(min-width:981px){.mbar{display:none!important}}