:root{--bg:#f4f4f5;--paper:#fff;--ink:#1f2328;--mute:#6b7280;--line:#d4d7dc;--soft:#e9eaee;--dark:#2b2f36;--ok:#2f855a;--okbg:#e9f7ef;--warn:#b7791f;--warnbg:#fff7e6;--bad:#c53030}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--ink);font-family:Segoe UI,Tahoma,Noto Sans Thai,sans-serif;font-size:16px}button{font:inherit;cursor:pointer}input{font:inherit}.muted{color:var(--mute)}.small{font-size:13px}.strike{color:var(--mute);text-decoration:line-through}.tag{border:1px solid var(--ok);color:var(--ok);background:var(--okbg);border-radius:999px;padding:0 8px;font-size:12px;display:inline-block}.center{justify-content:center;align-items:center;height:100%;display:flex}.error{color:var(--bad);background:#fff5f5;border:1px solid #fed7d7;border-radius:8px;padding:8px 12px}.shell{flex-direction:column;height:100%;display:flex}.top{background:var(--soft);border-bottom:1px solid var(--line);flex:none;align-items:center;gap:10px;height:48px;padding:0 12px;font-size:14px;display:flex}.top .sp{flex:1}.chip{border:1px solid var(--line);background:#fff;border-radius:6px;padding:3px 8px}.chip.ok .dot{background:#38a169}.chip.warn{background:var(--warnbg);border-color:var(--warn)}.chip.warn .dot{background:#d69e2e}.dot{border-radius:50%;width:9px;height:9px;display:inline-block}.ghost{border:1px solid var(--line);background:#fff;border-radius:6px;padding:6px 10px}.pos{flex:1;min-height:0;display:flex;position:relative}.cart-pane{border-right:1px solid var(--line);background:var(--paper);flex-direction:column;width:40%;min-height:0;display:flex}.product-pane{flex-direction:column;flex:1;min-height:0;display:flex}.cart-head{border-bottom:1px solid var(--line);background:#fafafa;padding:10px 12px}.lines{flex:1;overflow:auto}.empty{text-align:center;color:var(--mute);padding:40px 16px}.line{border-bottom:1px solid #eee;grid-template-columns:1fr auto 80px 32px;align-items:center;gap:8px;padding:10px 12px;display:grid}.line-name{font-size:15px}.qty{border:1px solid var(--line);border-radius:6px;align-items:center;display:inline-flex;overflow:hidden}.qty button{background:var(--soft);border:0;width:34px;height:34px;font-weight:700}.qty span{text-align:center;width:34px}.amt{text-align:right;font-weight:600}.remove{color:var(--mute);background:0 0;border:0}.sum{border-top:1px solid var(--line);padding:8px 12px;font-size:14px}.sum .row{justify-content:space-between;padding:2px 0;display:flex}.sum .total{padding-top:6px;font-size:26px;font-weight:800}.acts{grid-template-columns:1fr 1fr;gap:6px;padding:0 12px 8px;display:grid}.acts-row{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}.acts-row button{height:auto;min-height:44px}.acts button{border:1px solid var(--dark);background:#fff;border-radius:6px;height:38px}.acts button:disabled,.pay:disabled{opacity:.45;cursor:default}.pay{background:var(--dark);color:#fff;border:0;border-radius:8px;height:52px;margin:0 12px 12px;font-size:18px;font-weight:700}.pay-modal .pay{width:calc(100% - 32px);margin:12px 16px 16px}.search{border-bottom:1px solid var(--line);background:var(--paper);padding:10px 12px}.search input{border:2px solid var(--dark);border-radius:8px;width:100%;height:44px;padding:0 12px}.grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));align-content:start;gap:10px;padding:12px;display:grid;overflow:auto}.card{text-align:left;border:1px solid var(--line);background:#fff;border-radius:8px;flex-direction:column;gap:6px;min-height:96px;padding:10px;display:flex}.card.out{opacity:.55}.card-name{min-height:36px;font-size:14px;line-height:1.25}.card-price{justify-content:space-between;align-items:baseline;font-weight:700;display:flex}.card-price small{color:var(--mute);font-weight:400}.card-var{color:var(--mute);border-top:1px dashed var(--line);padding-top:4px;font-size:12px}.float-bar{display:none}.modal-backdrop{z-index:20;background:#00000059;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal{background:#fff;border-radius:12px;flex-direction:column;width:min(680px,100% - 24px);max-height:calc(100% - 24px);display:flex;overflow:auto}.modal-head{border-bottom:1px solid var(--line);align-items:center;gap:12px;padding:14px 16px;display:flex}.modal-head h3,.modal-head h2{margin:0}.modal-head .icon{border:1px solid var(--line);background:#fff;border-radius:8px;width:36px;height:36px;margin-left:auto}.matrix-wrap{padding:8px;overflow:auto}table.matrix{border-collapse:separate;border-spacing:6px}table.matrix th{color:var(--mute);padding:4px;font-size:13px;font-weight:600}table.matrix th.rowh{text-align:left;color:var(--ink);white-space:nowrap}table.matrix td{padding:0}table.matrix td button{border:1px solid var(--line);background:#fff;border-radius:8px;flex-direction:column;justify-content:center;align-items:center;width:84px;height:60px;display:flex}table.matrix td.zero button{color:#b5b8bf}table.matrix td.na{text-align:center;color:#b5b8bf;width:84px;height:60px}table.matrix .q{font-size:18px;font-weight:700}table.matrix .d{color:var(--mute);font-size:11px}.sw{vertical-align:-2px;border:1px solid #999;border-radius:3px;width:14px;height:14px;margin-right:6px;display:inline-block}.tenders{gap:8px;padding:12px 16px 0;display:flex}.tenders button{border:1px solid var(--dark);background:#fff;border-radius:8px;flex:1;height:44px;font-weight:600}.tenders button.on{background:var(--dark);color:#fff}.cash{flex-direction:column;gap:10px;padding:12px 16px 0;display:flex}.quick{grid-template-columns:repeat(4,1fr);gap:8px;display:grid}.quick button{border:1px solid var(--dark);background:#fff;border-radius:8px;height:44px}.cash label{color:var(--mute);flex-direction:column;gap:4px;font-size:14px;display:flex}.cash input{text-align:right;border:1px solid var(--line);border-radius:8px;height:48px;padding:0 12px;font-size:22px}.row.big{justify-content:space-between;align-items:center;font-size:18px;display:flex}.settings{border:1px solid var(--line);background:#fff;border-radius:12px;flex-direction:column;gap:14px;max-width:520px;margin:40px auto;padding:24px;display:flex}.settings h1{margin:0;font-size:22px}.settings label{flex-direction:column;gap:6px;font-size:14px;display:flex}.settings input{border:1px solid var(--line);border-radius:8px;height:44px;padding:0 12px}.settings .pay{margin:0}.toast{background:var(--dark);color:#fff;z-index:30;border-radius:8px;padding:10px 16px;position:fixed;bottom:24px;left:50%;transform:translate(-50%)}@media (width<=1023px){.cart-pane{width:45%}.grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}}@media (width<=767px){.pos{flex-direction:column}.cart-pane,.product-pane{border-right:0;flex:1;width:100%}.pos.products .cart-pane,.pos.cart .product-pane{display:none}.pos.products .product-pane .grid{padding-bottom:80px}.float-bar{background:var(--dark);color:#fff;border-radius:10px;justify-content:space-between;align-items:center;height:52px;padding:0 14px;font-weight:700;display:flex;position:absolute;bottom:12px;left:12px;right:12px}.float-bar button{color:#fff;background:0 0;border:0;font-weight:700}.pos.cart .float-bar,.top .small{display:none}}.pin-screen{justify-content:center;align-items:center;min-height:100%;padding:16px;display:flex}.pin-card{border:1px solid var(--line);background:#fff;border-radius:14px;flex-direction:column;gap:14px;width:min(520px,100%);padding:20px;display:flex}.pin-head{justify-content:space-between;align-items:center;gap:10px;display:flex}.pin-head h2{margin:2px 0 0;font-size:22px}.user-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;display:grid}.user-btn{border:1px solid var(--line);background:#fff;border-radius:10px;flex-direction:column;align-items:center;gap:6px;min-height:110px;padding:14px 10px;display:flex}.user-btn .avatar{background:var(--dark);color:#fff;border-radius:50%;justify-content:center;align-items:center;width:44px;height:44px;font-size:18px;font-weight:700;display:flex}.pin-dots{justify-content:center;gap:14px;padding:8px 0;display:flex}.pin-dots i{border:2px solid var(--dark);border-radius:50%;width:16px;height:16px;display:inline-block}.pin-dots i.on{background:var(--dark)}.numpad{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.numpad button{border:1px solid var(--line);background:#fff;border-radius:10px;height:56px;font-size:22px;font-weight:600}.pin-foot{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;display:flex}.top .user{text-overflow:ellipsis;white-space:nowrap;max-width:260px;overflow:hidden}.money-field{color:var(--mute);flex-direction:column;gap:4px;font-size:14px;display:flex}.money-field input,.money-field select{border:1px solid var(--line);height:44px;color:var(--ink);background:#fff;border-radius:8px;padding:0 12px;font-size:16px}.shift-summary{padding:12px 16px 0;font-size:14px}.shift-summary .row{justify-content:space-between;padding:3px 0;display:flex}.shift-summary .total{padding-top:6px;font-size:20px;font-weight:800}.shift-summary hr{border:0;border-top:1px dashed var(--line);margin:6px 0}.row.big.over strong{color:var(--ok)}.row.big.short strong,.total.short{color:var(--bad)}.settings h2{margin:8px 0 0;font-size:16px}.settings select{border:1px solid var(--line);background:#fff;border-radius:8px;height:44px;padding:0 12px}.settings .check{flex-direction:row;align-items:center;gap:8px}.qr-box{flex-direction:column;align-items:center;gap:6px;display:flex}.qr-box img{width:240px;height:240px;image-rendering:pixelated}.receipt-modal{width:min(420px,100% - 24px)}.receipt-paper{border:1px dashed var(--line);background:#fff;margin:12px auto;padding:10px;font-family:Courier New,monospace}.receipt-paper.w58{width:300px}.receipt-paper.w80{width:420px}.receipt-paper pre{white-space:pre;margin:0;font:12px/1.45 Courier New,monospace;overflow-x:auto}.receipt-qr{text-align:center;margin-top:8px;font-size:12px}.receipt-qr img{width:180px;height:180px}.acts .primary{background:var(--dark);color:#fff}@media print{body *{visibility:hidden}#receipt-print-area,#receipt-print-area *,#shift-report,#shift-report *{visibility:visible}#receipt-print-area,#shift-report{border:0;width:auto;margin:0;position:fixed;top:0;left:0}.no-print{display:none!important}@page{margin:4mm}}.cart-head{justify-content:space-between;align-items:center;gap:8px;display:flex}.cart-head .cust-btn{border:1px solid var(--line);white-space:nowrap;background:#fff;border-radius:8px;height:36px;padding:0 12px}.customer-modal{width:min(480px,100% - 24px)}.customer-body{flex-direction:column;gap:10px;padding:12px 16px 16px;display:flex}.customer-body input{border:1px solid var(--line);border-radius:8px;width:100%;height:44px;padding:0 12px}.customer-body label{color:var(--mute);flex-direction:column;gap:4px;font-size:13px;display:flex}.customer-body label.check{flex-direction:row;align-items:center;gap:8px}.customer-body label.check input{width:auto;height:auto}.customer-body .acts{padding:0}.customer-body .wide{border:1px solid var(--dark);background:var(--dark);color:#fff;border-radius:8px;height:44px}.customer-list{border:1px solid var(--line);border-radius:8px;max-height:50vh;overflow:auto}.customer-row{text-align:left;border:0;border-bottom:1px solid var(--line);background:#fff;align-items:center;gap:10px;width:100%;padding:10px 12px;display:flex}.customer-row:last-child{border-bottom:0}.customer-row.on{background:#eef6ff}.customer-row.clear{color:var(--mute)}.customer-row .cname{flex:1;font-weight:600}.a4-modal{width:min(900px,100% - 24px);height:calc(100% - 24px)}.a4-frame{background:#e5e7eb;border:0;flex:1;width:100%;min-height:60vh}.doc-banner{background:#fff7e6;border-bottom:1px solid #f5d79a;align-items:center;gap:8px;padding:8px 12px;font-size:13px;display:flex}.doc-banner strong{color:#8a5a00}.doc-banner button{background:#fff;border:1px solid #d9b56a;border-radius:6px;height:30px;margin-left:auto;padding:0 10px}.tag.dn{color:#8a5a00;background:#fff7e6;border-color:#b7791f}.two{grid-template-columns:1fr 1fr;gap:10px;display:grid}.customer-body textarea{border:1px solid var(--line);width:100%;font:inherit;border-radius:8px;padding:8px 12px}.customer-body .primary{background:var(--dark);color:#fff}.return-modal{width:min(620px,100% - 24px)}.return-line{border-bottom:1px solid var(--line);grid-template-columns:1fr auto 110px;align-items:center;gap:8px;padding:8px 12px;display:grid}.return-line:last-child{border-bottom:0}.return-line select{border:1px solid var(--line);height:36px;font:inherit;border-radius:8px;padding:0 8px}.customer-body select{border:1px solid var(--line);height:44px;font:inherit;border-radius:8px;width:100%;padding:0 10px}.paid-list{flex-direction:column;gap:4px;padding:8px 16px 0;display:flex}.paid-row{background:#f3f7f3;border-radius:6px;align-items:center;gap:10px;padding:6px 10px;display:flex}.paid-row span{flex:1}.paid-row button{border:1px solid var(--line);background:#fff;border-radius:6px;width:36px;height:36px}.tender-error{color:var(--bad);font-size:14px}.quick-keys{flex-wrap:wrap;gap:8px;padding:10px 12px 0;display:flex}.quick-key{border:1px solid var(--dark);background:#fff;border-radius:8px;flex-direction:column;justify-content:center;align-items:center;min-width:96px;min-height:48px;padding:6px 12px;font-weight:600;display:flex}.quick-key small{color:var(--mute);font-weight:400}.quick-key.open{background:var(--dark);color:#fff}.quick-key:disabled{opacity:.45;cursor:default}.not-found{flex-wrap:wrap;align-items:center;gap:10px;padding:12px;display:flex}.not-found button{border:1px solid var(--dark);background:#fff;border-radius:8px;height:44px;padding:0 14px;font-weight:600}.small-modal{width:min(420px,100% - 24px)}.small-modal .pay{width:calc(100% - 32px);margin:12px 16px 16px}.form-body{padding-bottom:4px}.check-row{align-items:center;color:var(--ink)!important;flex-direction:row!important;gap:8px!important}.check-row input{width:20px;height:20px}.held-list{flex-direction:column;gap:8px;padding:8px 16px 16px;display:flex}.held-row{border:1px solid var(--line);border-radius:8px;flex-wrap:wrap;align-items:center;gap:10px;padding:10px 12px;display:flex}.held-info{flex:1;min-width:180px}.held-total{font-size:18px}.held-row button{border:1px solid var(--dark);background:#fff;border-radius:8px;height:44px;padding:0 14px}.held-row .held-resume{background:var(--dark);color:#fff;font-weight:600}.held-error{padding:10px 16px 0}.line.sel{box-shadow:inset 3px 0 0 var(--dark);background:#f3f5f9}button.line-main{all:unset;cursor:pointer;min-width:0;display:block}button.line-main:focus-visible{outline:2px solid var(--dark);outline-offset:2px}.over-limit{color:var(--bad);font-weight:600}.tenders.inline{padding:0}.dialog-actions{gap:8px;padding:12px 16px 16px;display:flex}.dialog-actions button{border:1px solid var(--dark);background:#fff;border-radius:8px;flex:1;min-height:48px;font-weight:600}.dialog-actions button:disabled{opacity:.45;cursor:default}.dialog-actions .primary{background:var(--dark);color:#fff}.dialog-actions .danger{color:var(--bad);border-color:var(--bad)}.search{gap:8px;display:flex}.search input{flex:1;min-width:0}.camera-btn{border:2px solid var(--dark);background:#fff;border-radius:8px;flex:none;width:48px;font-size:20px}.camera-view{background:#000;width:100%;max-height:50vh;display:block}.camera-hint{margin:0;padding:8px 16px 14px}.device-row{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:12px;padding:8px 0;display:flex}.device-row button{border:1px solid var(--dark);background:#fff;border-radius:8px;flex:none;min-height:44px;padding:0 16px}.device-row button:disabled{opacity:.45;cursor:default}.device-ok{color:var(--ok);background:var(--okbg);border-radius:8px;padding:8px 12px;font-size:14px}.device-print{margin:12px 16px 16px}@media (width<=767px){.top{flex-wrap:wrap;gap:6px;height:auto;padding:6px 8px;font-size:13px}.top>strong{white-space:nowrap;text-overflow:ellipsis;width:100%;overflow:hidden}.top .sp{display:none}.top .chip,.top .ghost{white-space:nowrap}.top .ghost{min-height:36px}.top .user{text-overflow:ellipsis;max-width:100%;overflow:hidden}.shell{min-width:0}.line{grid-template-columns:minmax(0,1fr) auto 64px 28px;gap:6px;padding:8px}}.tenders{flex-wrap:wrap}.tenders button{min-width:96px}