:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;--bg:#f6f7f9;--surface:#fff;--surface-2:#eef1f5;--text:#0f172a;--muted:#475569;--line:#e2e8f0;--field:#64748b;--c:#047857;--c-ink:#fff;--c-soft:#e7f6ef;--c-text:#065f46;--pp:#1e3a8a;--pp-ink:#fff;--danger:#b91c1c;--danger-ink:#fff;--danger-soft:#fdecec;--warn:#92400e;--warn-soft:#fff7e6;--focus:#2563eb;--shadow:0 1px 2px #0f172a0f, 0 4px 12px #0f172a0f;--r:12px;--r-sm:8px;--tap:48px;--font:"Noto Sans Thai", "IBM Plex Sans Thai", "Sukhumvit Set", Thonburi, "Leelawadee UI", system-ui, -apple-system, "Segoe UI", sans-serif;--z-bar:20;--z-banner:30;font-family:var(--font);-webkit-text-size-adjust:100%;font-size:16px;line-height:1.65}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--bg:#0b1220;--surface:#131c2e;--surface-2:#1b2639;--text:#e5e9f0;--muted:#9aa6b8;--line:#26324a;--field:#64748b;--c:#34d399;--c-ink:#04241a;--c-soft:#0f2f26;--c-text:#6ee7b7;--pp:#93b4ff;--pp-ink:#0b1a3d;--danger:#f87171;--danger-ink:#2a0707;--danger-soft:#3a1414;--warn:#fcd34d;--warn-soft:#2a2210;--focus:#7db3ff;--shadow:0 1px 2px #0006}}*,:before,:after{box-sizing:border-box}body{background:var(--bg);color:var(--text);margin:0}main{max-width:600px;margin:0 auto;padding:16px}h1,h2,h3{margin:0 0 8px;font-weight:700;line-height:1.35}h1{font-size:1.375rem}h2{margin-top:20px;font-size:1.0625rem}h2:first-child{margin-top:0}p{margin:8px 0}a{color:var(--c-text);text-underline-offset:3px}@media (prefers-color-scheme:dark){a{color:var(--c)}}:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px}svg.i{vertical-align:-.25em;flex:none;width:1.25em;height:1.25em}.num{font-variant-numeric:tabular-nums;white-space:nowrap}.sr{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}button,.btn{font:inherit;border-radius:var(--r-sm);background:var(--c);min-height:44px;color:var(--c-ink);cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;border:1px solid #0000;justify-content:center;align-items:center;gap:8px;padding:10px 16px;font-weight:600;line-height:1.4;text-decoration:none;transition:transform .15s,opacity .15s;display:inline-flex}button:active:not(:disabled),.btn:active{transform:scale(.97)}button:disabled{opacity:.45;cursor:not-allowed}button.ghost,.btn.ghost{background:var(--surface);color:var(--c-text);border-color:var(--line)}@media (prefers-color-scheme:dark){button.ghost,.btn.ghost{color:var(--c)}}button.danger{background:var(--danger);color:var(--danger-ink)}button.danger-ghost{color:var(--danger);background:0 0;border-color:currentColor}button.pp{background:var(--pp);color:var(--pp-ink)}button.link{color:inherit;text-underline-offset:4px;background:0 0;min-height:44px;padding:0 4px;font-weight:500;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}button.icon{width:var(--tap);min-height:var(--tap);padding:0}.block{width:100%}.xl{min-height:56px;font-size:1.125rem}label{font-size:.9375rem;font-weight:500;display:block}label>input,label>select{margin-top:4px}input,select{font:inherit;width:100%;min-height:44px;color:var(--text);background:var(--surface);border:1px solid var(--field);border-radius:var(--r-sm);padding:8px 12px;line-height:1.5}input[type=checkbox]{width:22px;height:22px;min-height:0;accent-color:var(--c);vertical-align:middle;margin:0 8px 0 0}input[type=file]{padding:8px;font-size:.9375rem}.check{align-items:center;min-height:44px;display:flex}.stack>*+*{margin-top:12px}.fields{grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));align-items:end;gap:12px;display:grid}.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);margin:12px 0;padding:16px}.row{justify-content:space-between;align-items:center;gap:8px;padding:4px 0;display:flex}.row>:first-child{flex:1;min-width:0}.total{font-size:1.5rem;font-weight:700}.muted{color:var(--muted);font-size:.875rem}.note,.warn,.err,.ok{border-radius:var(--r-sm);align-items:flex-start;gap:8px;margin:8px 0;padding:10px 12px;font-size:.9375rem;display:flex}.warn{background:var(--warn-soft);color:var(--warn)}.err{background:var(--danger-soft);color:var(--danger)}.ok{background:var(--c-soft);color:var(--c-text)}.note{background:var(--surface-2);color:var(--muted)}.chip{background:var(--surface-2);color:var(--muted);border-radius:999px;align-items:center;gap:4px;padding:2px 10px;font-size:.8125rem;font-weight:600;display:inline-flex}.chip.ok,.chip.warn,.chip.err{margin:0;padding:2px 10px;font-size:.8125rem;display:inline-flex}.chip.ok{background:var(--c-soft);color:var(--c-text)}.chip.warn{background:var(--warn-soft);color:var(--warn)}.chip.err{background:var(--danger-soft);color:var(--danger)}.offline{z-index:var(--z-banner);border-radius:0;justify-content:center;margin:0;position:sticky;top:0}.top{align-items:center;gap:12px;margin-bottom:12px;display:flex}.top h1{overflow-wrap:anywhere;flex:1;min-width:0;margin:0}.top .sub{color:var(--muted);font-size:.8125rem;font-weight:500;display:block}.logo{background:var(--c);width:40px;height:40px;color:var(--c-ink);border-radius:10px;flex:none;place-items:center;display:grid}.sk{background:var(--surface-2);border-radius:var(--r-sm);animation:1.2s ease-in-out infinite pulse}@keyframes pulse{50%{opacity:.5}}.tw{margin:0 -4px;overflow-x:auto}table{border-collapse:collapse;width:100%;font-size:.9375rem}td,th{text-align:left;border-bottom:1px solid var(--line);vertical-align:middle;padding:10px 6px}th{color:var(--muted);font-size:.8125rem;font-weight:600}tfoot th,tr.sum th{color:var(--text);font-size:.9375rem}td.n,th.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}.tabs{background:var(--surface-2);border-radius:var(--r);grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:4px;margin:0 0 12px;padding:4px;display:grid;overflow-x:auto}.tabs button{color:var(--muted);background:0 0;min-height:44px}.tabs button[aria-selected=true]{background:var(--surface);color:var(--text);box-shadow:var(--shadow)}dialog{border-radius:var(--r);background:var(--surface);width:min(92vw,400px);color:var(--text);border:0;padding:20px;box-shadow:0 20px 50px #0000004d}dialog::backdrop{background:#0f172a8c}dialog[open]{animation:.2s ease-out pop}dialog .acts{gap:8px;margin-top:16px;display:flex}dialog .acts>*{min-height:var(--tap);flex:1}@keyframes pop{0%{opacity:0;transform:scale(.96)}}.pos{max-width:1200px;padding-bottom:120px}.grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;display:grid}.tile{text-align:left;background:var(--surface);min-height:104px;color:var(--text);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);flex-direction:column;justify-content:space-between;align-items:flex-start;gap:6px;padding:12px;font-weight:500;display:flex;position:relative}.tile .nm{overflow-wrap:anywhere;-webkit-line-clamp:2;-webkit-box-orient:vertical;padding-block:2px;line-height:1.5;display:-webkit-box;overflow:hidden}.tile .pr{color:var(--c-text);font-size:1.125rem;font-weight:700}@media (prefers-color-scheme:dark){.tile .pr{color:var(--c)}}.tile.in{border-color:var(--c);box-shadow:inset 0 0 0 1px var(--c)}.tile .badge{background:var(--c);min-width:28px;height:28px;color:var(--c-ink);border-radius:999px;place-items:center;padding:0 8px;font-size:.875rem;display:grid;position:absolute;top:-8px;right:-8px}.tile .st{color:var(--muted);font-size:.8125rem;font-weight:500}.tile:disabled .st{color:var(--danger);font-weight:600}.line{border-bottom:1px solid var(--line);grid-template-columns:1fr auto;gap:6px 12px;padding:12px 0;display:grid}.line .ctl{grid-column:1/-1;align-items:center;gap:8px;display:flex}.step{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);align-items:center;display:inline-flex}.step button{width:var(--tap);min-height:var(--tap);color:var(--text);background:0 0;padding:0}.step output{text-align:center;font-variant-numeric:tabular-nums;min-width:36px;font-weight:700}.pct{width:96px;color:var(--muted);flex:none;align-items:center;gap:4px;font-size:.875rem;display:flex}.pct input{min-height:var(--tap);text-align:right;padding:8px}.sum .row{font-variant-numeric:tabular-nums}.sum .grand{border-top:1px dashed var(--line);margin-top:6px;padding-top:10px;font-size:1.25rem;font-weight:700}.sum .grand .num{font-size:1.75rem}details>summary{cursor:pointer;min-height:44px;color:var(--muted);align-items:center;font-size:.9375rem;display:flex}.paybar{z-index:var(--z-bar);background:var(--surface);border-top:1px solid var(--line);padding:10px 16px calc(10px + env(safe-area-inset-bottom));align-items:center;gap:12px;display:flex;position:fixed;inset:auto 0 0;box-shadow:0 -4px 16px #0f172a14}.paybar .amt{flex:1;min-width:0;line-height:1.3}.paybar .amt b{font-variant-numeric:tabular-nums;font-size:1.75rem;display:block}.paybar button{min-height:56px;padding:0 22px;font-size:1.125rem}@media (min-width:720px){.split{grid-template-columns:1fr minmax(320px,380px);align-items:start;gap:20px;display:grid}.split .cart{max-height:calc(100vh - 32px);margin-top:0;position:sticky;top:16px;overflow:auto}.paybar{display:none}.pos{padding-bottom:24px}}@media (max-width:719px){.cart .desk{display:none}}.amount{font-variant-numeric:tabular-nums;text-align:center;margin:8px 0;font-size:2.5rem;font-weight:700;line-height:1.2}.center{text-align:center}.methods{gap:12px;display:grid}@media (min-width:640px){.methods{grid-template-columns:1fr 1fr}}.methods .card{flex-direction:column;gap:10px;margin:0;display:flex}.chips{flex-wrap:wrap;gap:8px;display:flex}.chips button{min-height:var(--tap);flex:1 0 auto}.qr{border-radius:var(--r);border:1px solid var(--line);background:#fff;width:min(100%,320px);margin:8px auto;padding:12px}.qr svg{aspect-ratio:1;width:100%;height:auto;display:block}.qr.dead{opacity:.25}.ppbrand{color:var(--pp);justify-content:center;align-items:center;gap:8px;font-weight:700;display:flex}.meta{text-align:left;grid-template-columns:auto 1fr;gap:4px 12px;font-size:.9375rem;display:grid}.meta dt{color:var(--muted)}.meta dd{text-align:right;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;margin:0}.done-ic{background:var(--c-soft);width:72px;height:72px;color:var(--c-text);border-radius:50%;place-items:center;margin:8px auto;animation:.25s ease-out pop;display:grid}.done-ic svg{width:40px;height:40px}.code{letter-spacing:.06em;font-variant-numeric:tabular-nums;font-size:1.5rem;font-weight:700}.wide{max-width:1120px}.kpis{grid-template-columns:repeat(2,1fr);gap:10px;margin:12px 0;display:grid}@media (min-width:900px){.kpis{grid-template-columns:repeat(4,1fr)}}.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px}.kpi span{color:var(--muted);font-size:.8125rem;display:block}.kpi b{font-variant-numeric:tabular-nums;overflow-wrap:anywhere;font-size:1.375rem;line-height:1.4;display:block}.panels{gap:12px;display:grid}@media (min-width:900px){.panels{grid-template-columns:1fr 1fr}.panels>.full{grid-column:1/-1}}.panels>.card{margin:0}.cols{border-bottom:1px solid var(--line);align-items:flex-end;gap:4px;height:160px;padding-top:8px;display:flex}.cols div{background:var(--c);transform-origin:bottom;border-radius:4px 4px 0 0;flex:1;min-width:4px;max-width:48px;animation:.3s ease-out grow}@keyframes grow{0%{transform:scaleY(0)}}.bar{background:var(--surface-2);border-radius:4px;min-width:60px;height:8px;overflow:hidden}.bar i{background:var(--c);border-radius:4px;height:100%;display:block}.split-bar{background:var(--surface-2);border-radius:8px;height:16px;margin:8px 0;display:flex;overflow:hidden}.split-bar i{height:100%;display:block}.dot{vertical-align:0;border-radius:3px;width:10px;height:10px;margin-right:6px;display:inline-block}.empty{text-align:center;color:var(--muted);padding:24px 8px}.empty svg{opacity:.6;width:40px;height:40px;margin:0 auto 8px;display:block}.foot{flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;display:flex}.rcpt{max-width:420px}.rcpt .card{padding:24px 20px}.rcpt hr{border:0;border-top:1px dashed var(--field);margin:12px 0}.rcpt td,.rcpt th{border:0;padding:6px 0}.rcpt .grand th{color:var(--text);padding-top:10px;font-size:1.125rem}.rcpt .grand .n{font-size:1.5rem}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}@media print{body{color:#000;background:#fff}.card{box-shadow:none;border:0}.noprint{display:none!important}}