:root{
  --bg:#f4f6f9; --card:#fff; --ink:#1a2233; --muted:#6b7688; --line:#e3e8ef;
  --brand:#1f6feb; --brand-soft:#e8f0fe; --ok:#1a7f37; --ok-soft:#e6f4ea;
  --warn:#b45309; --warn-soft:#fef3e2; --bad:#c02626; --bad-soft:#fdecec;
  --in:#0e7490; --in-soft:#e0f2fe; --out:#9333ea; --out-soft:#f3e8ff;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{margin:0;font-family:'Segoe UI',Tahoma,'Leelawadee UI',sans-serif;background:var(--bg);color:var(--ink);font-size:15px}
.center{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.muted{color:var(--muted)} .small{font-size:12.5px} .row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.grow{flex:1} .right{margin-left:auto}
/* auth */
.auth{max-width:400px;margin:8vh auto;padding:26px;background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:0 6px 30px rgba(20,30,50,.06)}
.auth h1{font-size:20px;margin:0 0 4px} .auth .sub{color:var(--muted);font-size:13.5px;margin-bottom:18px}
.fld{margin-bottom:12px} .fld label{display:block;font-size:12px;color:var(--muted);margin-bottom:4px}
.fld input,.fld select{width:100%;padding:11px 12px;font-size:15px;border:1.5px solid var(--line);border-radius:10px;font-family:inherit;outline:none}
.fld input:focus,.fld select:focus{border-color:var(--brand)}
.btn{border:none;border-radius:10px;padding:11px 16px;font-size:14.5px;font-weight:600;cursor:pointer;background:var(--brand-soft);color:var(--brand);font-family:inherit}
.btn.primary{background:var(--brand);color:#fff} .btn.ghost{background:var(--bg);border:1.5px solid var(--line);color:var(--ink)}
.btn.block{width:100%} .btn:disabled{opacity:.5;cursor:not-allowed} .btn.sm{padding:6px 11px;font-size:12.5px}
.linkbtn{background:none;border:none;color:var(--brand);cursor:pointer;font-size:13.5px;font-family:inherit}
.err{background:var(--bad-soft);color:var(--bad);border-radius:8px;padding:9px 12px;font-size:13px;margin-bottom:12px}
.ok{background:var(--ok-soft);color:var(--ok);border-radius:8px;padding:9px 12px;font-size:13px;margin-bottom:12px}
/* shell */
header{position:sticky;top:0;z-index:10;background:var(--card);border-bottom:1px solid var(--line);padding:9px 14px;display:flex;align-items:center;gap:10px}
header .brand{font-weight:700;font-size:16px} header .sp{margin-left:auto}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block} .dot.on{background:var(--ok)} .dot.off{background:var(--bad)}
.chip{background:var(--bg);border:1px solid var(--line);border-radius:20px;padding:4px 10px;font-size:12.5px;color:var(--muted)}
.chip.q{background:var(--warn-soft);color:var(--warn);border-color:#f0d9b0}
main{max-width:900px;margin:0 auto;padding:16px}
.sec{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:14px}
.sec h2{font-size:16px;margin:0 0 12px}
.projcard{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid var(--line);border-radius:12px;margin-bottom:8px;cursor:pointer;background:var(--card)}
.projcard:hover{border-color:var(--brand);background:var(--brand-soft)}
.projcard .pi{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;background:var(--brand-soft)}
.projcard .pn{font-weight:600} .projcard .pm{font-size:12.5px;color:var(--muted)}
.badge{font-size:11px;font-weight:700;padding:2px 8px;border-radius:9px}
.badge.copacker{background:var(--in-soft);color:var(--in)} .badge.retail{background:var(--out-soft);color:var(--out)}
table{width:100%;border-collapse:collapse;font-size:13px} th,td{padding:7px 9px;border-bottom:1px solid var(--line);text-align:left}
th{background:var(--bg);font-size:11.5px;color:var(--muted);position:sticky;top:0} td.num,th.num{text-align:right}
.tblwrap{overflow-x:auto;max-height:52vh;overflow-y:auto}
.seg{display:flex;gap:6px;margin-bottom:10px} .seg button{flex:1;border:1.5px solid var(--line);background:var(--card);border-radius:10px;padding:9px;font-weight:600;cursor:pointer;color:var(--muted);font-family:inherit}
.seg button.on-in{background:var(--in);border-color:var(--in);color:#fff} .seg button.on-out{background:var(--out);border-color:var(--out);color:#fff}
.live{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ok);margin-right:5px;animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
dialog{border:none;border-radius:16px;padding:22px;width:min(94vw,440px);box-shadow:0 10px 40px rgba(0,0,0,.25)}
dialog::backdrop{background:rgba(10,20,40,.45)} dialog h2{margin:0 0 12px;font-size:18px}
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:11px 20px;border-radius:24px;font-size:14px;opacity:0;pointer-events:none;transition:opacity .25s;z-index:60;max-width:92vw;text-align:center}
#toast.show{opacity:.96} #toast.err{background:var(--bad)} #toast.ok{background:var(--ok)}
.empty{text-align:center;color:var(--muted);padding:34px 16px}
/* ---- co-packer engine ---- */
.cptabs{display:flex;gap:4px;align-items:center;padding:8px 12px;background:var(--card);border-bottom:1px solid var(--line);overflow-x:auto;position:sticky;top:47px;z-index:8}
.cptab{flex:0 0 auto;border:none;background:transparent;padding:7px 10px;font-size:13px;font-weight:600;color:var(--muted);border-radius:8px;cursor:pointer;white-space:nowrap;font-family:inherit}
.cptab.on{background:var(--brand);color:#fff}
.cpspacer{flex:1}
.cptabs .chip input{border:none;background:transparent;font-family:inherit;font-size:12.5px;color:var(--brand);font-weight:600;outline:none}
.cpcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px;margin-bottom:12px}
.cpc{background:var(--bg);border-radius:10px;padding:9px 11px}
.cpc .v{font-size:19px;font-weight:700} .cpc .l{font-size:11px;color:var(--muted)}
.cpc.ok .v{color:var(--ok)} .cpc.bad .v{color:var(--bad)} .cpc.warn .v{color:var(--warn)}
table .tot td{border-top:2px solid var(--ink);font-weight:700}
.num{text-align:right} td.num,th.num{text-align:right} .neg{color:var(--bad);font-weight:700} .gapv{color:var(--warn);font-weight:700}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;vertical-align:middle}
.d-EXPIRED,.d-CRITICAL{background:var(--bad)} .d-SOON{background:var(--warn)} .d-OK{background:var(--ok)} .d-NO_SL_INFO{background:#9aa5b5}
.tag{font-size:11px;font-weight:700;padding:2px 7px;border-radius:8px}
.tag.excl{background:var(--warn-soft);color:var(--warn)} .tag.exp{background:var(--bad-soft);color:var(--bad)} .tag.soon{background:var(--warn-soft);color:var(--warn)} .tag.nosl{background:#eef1f5;color:var(--muted)}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:8px;margin-bottom:6px}
.pbtn{border:1.5px solid var(--line);background:var(--card);border-radius:12px;padding:10px;font-size:13px;font-weight:600;cursor:pointer;text-align:left;font-family:inherit;line-height:1.3}
.pbtn .mvt{font-size:11px;color:var(--muted);font-weight:400}
.pbtn.receive{border-left:5px solid var(--in)} .pbtn.issue{border-left:5px solid var(--out)}
.pbtn.on{background:var(--brand);color:#fff;border-color:var(--brand)} .pbtn.on .mvt{color:#e0e9ff}
.conseq{border-radius:10px;padding:9px 12px;font-size:13.5px;font-weight:600;margin-bottom:10px}
.conseq.in{background:var(--in-soft);color:var(--in)} .conseq.out{background:var(--out-soft);color:var(--out)} .conseq.excl{border-left:6px solid var(--warn)}
.warnbox{background:var(--bad-soft);color:var(--bad);border:1px solid #f3b7b7;border-radius:10px;padding:9px 12px;font-size:13px;margin-bottom:10px}
.infobox{background:var(--brand-soft);color:var(--brand);border-radius:10px;padding:9px 12px;font-size:13px;margin-bottom:10px}
.okbox{background:var(--ok-soft);color:var(--ok);border-radius:10px;padding:9px 12px;font-size:13px;margin-bottom:10px}
.btn.block{width:100%}
/* ---- retail counting ---- */
.sitebar{display:flex;gap:6px;padding:8px 12px;background:var(--card);border-bottom:1px solid var(--line);overflow-x:auto}
.sitebtn{flex:0 0 auto;border:1.5px solid var(--line);background:var(--card);border-radius:9px;padding:6px 14px;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;font-family:inherit}
.sitebtn.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.seg2{display:flex;gap:4px} .seg2 button{border:1px solid var(--line);background:var(--card);border-radius:16px;padding:5px 11px;font-size:12.5px;color:var(--muted);cursor:pointer;white-space:nowrap;font-family:inherit}
.seg2 button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.pbar{height:8px;background:var(--line);border-radius:4px;overflow:hidden;margin:4px 0} .pbar>div{height:100%;background:var(--ok);transition:width .3s}
input.cinp{width:88px;height:44px;text-align:center;font-size:17px;font-weight:700;border:1.5px solid var(--line);border-radius:10px;outline:none;font-family:inherit} input.cinp:focus{border-color:var(--brand);background:var(--brand-soft)}
.scanbox{padding:12px 14px;font-size:16px;border:1.5px solid var(--line);border-radius:12px;outline:none;font-family:inherit;min-width:0} .scanbox:focus{border-color:var(--brand)}
.iconbtn{border:1.5px solid var(--line);background:var(--card);border-radius:12px;padding:0 15px;font-size:20px;cursor:pointer;height:46px} .iconbtn.on{background:var(--brand);color:#fff;border-color:var(--brand)}
.citem{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin-bottom:10px}
.ciname{font-weight:600;font-size:15.5px;line-height:1.35} .cimeta{font-size:12.5px;color:var(--muted);margin-top:3px}
.cirow{display:flex;align-items:center;gap:10px;margin-top:10px}
.cisys{font-size:12.5px;color:var(--muted);min-width:78px} .cisys b{display:block;font-size:17px;color:var(--ink)}
.ciqty{display:flex;align-items:center;gap:6px;margin-left:auto}
.qb{width:44px;height:44px;border-radius:12px;border:1.5px solid var(--line);background:var(--card);font-size:22px;cursor:pointer;color:var(--ink)} .qb:active{background:var(--brand-soft)}
.badge2{font-size:12.5px;font-weight:700;padding:3px 10px;border-radius:12px} .badge2.wait{background:var(--warn-soft);color:var(--warn)} .badge2.ok{background:var(--ok-soft);color:var(--ok)} .badge2.bad{background:var(--bad-soft);color:var(--bad)}
.camwrap{position:fixed;inset:0;background:#000;z-index:80;display:none;flex-direction:column} .camwrap video{flex:1;object-fit:cover;width:100%}
.camclose{position:absolute;top:14px;right:14px;width:46px;height:46px;border-radius:50%;border:none;background:rgba(255,255,255,.9);font-size:20px;cursor:pointer}
.camhint{position:absolute;bottom:30px;left:0;right:0;text-align:center;color:#fff;font-size:14px;text-shadow:0 1px 4px #000}
/* ---- print count sheet ---- */
#rt-print{display:none}
@media print{
  @page{margin:12mm 10mm}
  body>*{display:none !important}
  #rt-print{display:block !important}
  #rt-print h2{font-size:16px}
  table.psheet{width:100%;border-collapse:collapse;font-size:11px}
  table.psheet th,table.psheet td{border:1px solid #333;padding:5px 6px;text-align:left;vertical-align:middle}
  table.psheet th{background:#e8e8e8;font-size:10.5px}
  table.psheet tbody tr{page-break-inside:avoid;height:26px}
  table.psheet thead{display:table-header-group}
}