:root{
  --bg:#E9EDF4; --surface:#FFFFFF; --ink:#1F2A5A; --text:#1C2233; --muted:#5D6680;
  --line:#CDD4E2; --rule:#DCE3F0; --accent:#E3A21A; --accent-ink:#2A1E00;
  --point:#2F6FDB; --batch:#1F9A6B; --danger:#C0392B; --chip:#EEF2F9;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#11162A; --surface:#1A2140; --ink:#C9D3FF; --text:#E6E9F2; --muted:#9AA3C0;
    --line:#2E3760; --rule:#262E52; --accent:#F0B53A; --accent-ink:#2A1E00;
    --point:#6E9FF5; --batch:#4FCB9B; --danger:#F06A5B; --chip:#232B50;
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --bg:#11162A; --surface:#1A2140; --ink:#C9D3FF; --text:#E6E9F2; --muted:#9AA3C0;
  --line:#2E3760; --rule:#262E52; --accent:#F0B53A; --accent-ink:#2A1E00;
  --point:#6E9FF5; --batch:#4FCB9B; --danger:#F06A5B; --chip:#232B50;
  color-scheme: dark;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:"Mukta",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:16px;line-height:1.45;padding-bottom:env(safe-area-inset-bottom,0px)}
header{position:sticky;top:0;z-index:5;background:#1F2A5A;color:#fff;padding-top:env(safe-area-inset-top,0px)}
.bar{max-width:960px;margin:0 auto;padding:10px 14px;display:flex;align-items:center;gap:12px}
.brand{font-weight:800;font-size:22px;letter-spacing:.5px;display:flex;align-items:center;gap:8px}
.brand span.dot{width:14px;height:14px;border-radius:3px;background:#E3A21A;display:inline-block;transform:rotate(45deg)}
.who{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:14px;min-width:0}
.who span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46vw}
.who .lo{border:1px solid rgba(255,255,255,.4);background:transparent;color:#fff;font:inherit;font-size:13px;border-radius:14px;padding:2px 10px;cursor:pointer}
nav{max-width:960px;margin:0 auto;display:flex;gap:2px;padding:0 8px;overflow-x:auto}
nav button{border:0;background:transparent;color:rgba(255,255,255,.75);font:inherit;font-weight:600;padding:8px 12px 10px;cursor:pointer;border-bottom:3px solid transparent;white-space:nowrap}
nav button.on{color:#fff;border-bottom-color:#E3A21A}
main{max-width:960px;margin:0 auto;padding:14px}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:14px;margin-bottom:14px}
.login{max-width:380px;margin:30px auto;display:grid;gap:12px}
.err{color:var(--danger);margin:0;min-height:1.2em;font-weight:600}
h2{font-size:19px;margin:0 0 10px;color:var(--ink)}
h3{font-size:16px;margin:0 0 8px;color:var(--ink)}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.field{display:flex;flex-direction:column;gap:3px;flex:1 1 140px;min-width:0}
.field label{font-size:13px;color:var(--muted);font-weight:600}
input,select{font:inherit;font-size:16px;color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:7px;padding:7px 9px;width:100%;min-width:0}
input:focus,select:focus,button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.btn{font:inherit;font-weight:700;border:1px solid var(--ink);background:var(--ink);color:var(--surface);border-radius:8px;padding:8px 14px;cursor:pointer;text-decoration:none;display:inline-block;text-align:center}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.gold{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.small{padding:4px 10px;font-size:14px}
.btn.danger{background:transparent;border-color:var(--danger);color:var(--danger)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:15px}
th{text-align:left;font-size:13px;color:var(--muted);font-weight:700;padding:6px 8px;border-bottom:2px solid var(--line);white-space:nowrap}
td{padding:6px 8px;border-bottom:1px solid var(--rule);vertical-align:middle}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.grid td{padding:4px 3px}
.grid .seg button{padding:6px 8px}
.grid input{padding:6px 7px}
.grid .sn{width:30px;color:var(--muted);text-align:center;font-size:13px}
.vbtn{font:inherit;font-size:15px;color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:7px;padding:6px 8px;width:100%;min-width:120px;text-align:left;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vbtn.empty{color:var(--muted)}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:7px;overflow:hidden}
.seg button{border:0;background:var(--surface);color:var(--muted);font:inherit;font-size:14px;font-weight:700;padding:6px 10px;cursor:pointer}
.seg button.p.on{background:var(--point);color:#fff}
.seg button.b.on{background:var(--batch);color:#fff}
.tag{display:inline-block;font-size:12px;font-weight:700;padding:1px 8px;border-radius:10px;background:var(--chip);color:var(--ink)}
.tag.p{color:var(--point)} .tag.b{color:var(--batch)}
.folio{font-size:28px;font-weight:800;color:var(--ink);line-height:1}
.pagehead{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap;border-bottom:2px dashed var(--line);padding-bottom:10px;margin-bottom:10px}
.totals{display:flex;gap:18px;flex-wrap:wrap;margin-top:10px;font-weight:700}
.totals .p{color:var(--point)} .totals .b{color:var(--batch)}
.muted{color:var(--muted);font-size:14px}
.list-item{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--rule);flex-wrap:wrap}
.list-item:last-child{border-bottom:0}
.list-item .grow{flex:1;min-width:0}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:var(--chip);color:var(--text);border-radius:16px;padding:3px 12px;font:inherit;font-size:14px;cursor:pointer}
.chip.on{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.chip .x{border:0;background:transparent;color:var(--danger);font:inherit;font-weight:700;padding:0 0 0 6px;cursor:pointer}
.toast{position:fixed;left:50%;bottom:calc(40px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--surface);padding:8px 16px;border-radius:20px;font-weight:600;z-index:40;opacity:0;transition:opacity .2s;pointer-events:none;max-width:90vw;text-align:center}
.toast.show{opacity:1}
.hidden{display:none!important}
.modal{position:fixed;inset:0;background:rgba(10,14,30,.55);display:flex;align-items:center;justify-content:center;z-index:30;padding:20px}
.mbox{background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:12px;padding:18px;max-width:380px;width:100%;display:grid;gap:10px;max-height:90vh;overflow:auto}
.mbox p{margin:0;font-weight:600}
.mbox .row{justify-content:flex-end;margin-top:4px}
.ck{display:flex;gap:8px;align-items:center;font-size:15px}
.ck input{width:auto}
.vpick{max-height:80vh;grid-template-rows:auto 1fr auto}
#vpList{overflow:auto;max-height:55vh;border:1px solid var(--rule);border-radius:8px}
#vpList .grp{font-size:12px;font-weight:700;color:var(--muted);padding:6px 10px 2px;background:var(--chip);position:sticky;top:0}
#vpList button{display:block;width:100%;text-align:left;border:0;border-bottom:1px solid var(--rule);background:var(--surface);color:var(--text);font:inherit;padding:9px 12px;cursor:pointer}
#vpList button.sel{font-weight:700;color:var(--point)}
#vpList .none{padding:12px;color:var(--muted)}
.sumcard{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.sumcard div{border:1px solid var(--line);border-radius:8px;padding:8px 10px;min-width:0}
.sumcard b{display:block;font-size:22px;color:var(--ink);overflow-wrap:anywhere}
.sumcard .p b{color:var(--point)} .sumcard .b b{color:var(--batch)}
.lock{font-size:13px;color:var(--muted);font-style:italic}
.warn{color:var(--danger);font-weight:600}
.adm.hidden{display:none}
@media (prefers-reduced-motion: reduce){.toast{transition:none}}
/* phone: each entry row on two lines (vendor + remove, then type + amount + remark) */
@media (max-width:640px){
  .grid thead{display:none}
  .grid,.grid tbody{display:block}
  .grid tr{display:grid;grid-template-columns:22px auto 78px minmax(0,1fr) 34px;grid-template-areas:"sn v v v del" ". seg amt rem rem";gap:6px 6px;padding:8px 0;border-bottom:1px solid var(--rule);align-items:center}
  .grid td{display:block;padding:0!important;border:0;min-width:0!important;width:auto!important}
  .grid td:nth-child(1){grid-area:sn} .grid td:nth-child(2){grid-area:v} .grid td:nth-child(3){grid-area:seg}
  .grid td:nth-child(4){grid-area:amt} .grid td:nth-child(5){grid-area:rem} .grid td:nth-child(6){grid-area:del}
  .grid .vbtn{min-width:0}
  #rTable td,#rTable th{padding:6px 5px}
}
.ckc{width:34px;text-align:center}
.ckc input{width:20px;height:20px;margin:0;cursor:pointer;accent-color:var(--danger)}
tr.picked td{background:color-mix(in srgb,var(--danger) 9%,transparent)}
.selbar{position:sticky;top:calc(env(safe-area-inset-top,0px) + 96px);z-index:3;display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:var(--surface);border:1px solid var(--danger);border-radius:8px;padding:8px 10px;margin:4px 0 8px;font-weight:700}
.selbar #selCount{margin-right:auto}
#pagesBody td{white-space:nowrap}
#pagesBody tr.pgs td{border-top:2px solid var(--line)}
#pagesBody td.rm{white-space:normal;min-width:110px;max-width:260px;font-size:14px}
#pagesBody tr.tot td{border-top:2px solid var(--line)}