:root{--counter:#e4e7e4;--paper:#fcfcfa;--ink:#1a1d1a;--ink-soft:#5c625c;--rule:#c9cec9;--money:#0b6b45;--money-soft:#ddede4;--pending:#b26b00;--pending-soft:#f6e9d2;--danger:#b3261e;--t13:.8125rem;--t15:.9375rem;--t18:1.125rem;--t22:1.375rem;--t28:1.75rem;--t40:2.5rem;--t64:4rem;--t96:6rem;--font:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}*{box-sizing:border-box}html,body,#root{height:100%}body{background:var(--counter);color:var(--ink);font-family:var(--font);font-size:var(--t15);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;margin:0}button,input{font:inherit;font-variant-numeric:tabular-nums}.num{font-variant-numeric:tabular-nums}button{font:inherit;color:inherit;cursor:pointer;background:0 0;border:0}button:focus-visible,input:focus-visible{outline:3px solid var(--money);outline-offset:2px}.app{grid-template-rows:auto 1fr;height:100vh;display:grid;overflow:hidden}.bar{border-bottom:1px solid var(--rule);font-size:var(--t15);align-items:center;gap:1.5rem;padding:.6rem 1.25rem;display:flex}.bar .toko{font-weight:600}.bar .kasir{color:var(--ink-soft)}.bar .spacer{flex:1}.sync{color:var(--ink-soft);align-items:center;gap:.5rem;display:flex}.sync .dot{background:var(--money);border-radius:50%;width:.6rem;height:.6rem}.dot.pending{background:var(--pending)}.sync.pending{color:var(--pending);font-weight:500}.pita-sesihabis{background:var(--pending-soft);color:var(--pending);border-bottom:1px solid var(--rule);font-size:var(--t15);text-align:center;justify-content:center;align-items:center;gap:1rem;padding:.5rem 1.25rem;font-weight:500;display:flex}.pita-ditolak{background:var(--pending-soft);color:var(--pending);border-bottom:1px solid var(--rule);font-size:var(--t15);flex-direction:column;gap:.5rem;padding:.5rem 1.25rem;font-weight:500;display:flex}.pita-ditolak-judul{text-align:center;font-weight:600}.pita-ditolak-baris{text-align:center;flex-wrap:wrap;justify-content:center;align-items:center;gap:1rem;display:flex}.pita-sesihabis button,.pita-ditolak button{border:1px solid var(--pending);color:var(--pending);font-size:var(--t13);cursor:pointer;background:0 0;border-radius:4px;flex:none;padding:.25rem .75rem;font-weight:600}.main{grid-template-columns:minmax(520px,58fr) minmax(360px,42fr);gap:1.25rem;min-height:0;padding:1.25rem;display:grid}@media (width<=980px){.main{grid-template-rows:1fr auto;grid-template-columns:1fr}}.struk{background:var(--paper);border:1px solid var(--rule);grid-template-rows:1fr auto;min-height:0;display:grid}.lines{scroll-behavior:auto;padding:1rem 1.5rem .5rem;overflow-y:auto}.empty{color:var(--ink-soft);font-size:var(--t18);padding:2rem 0}.line{border-left:4px solid #0000;grid-template-columns:1fr auto;column-gap:1rem;margin:0 -.75rem;padding:.7rem .75rem .7rem .9rem;display:grid}.line.active{border-left-color:var(--money);background:var(--money-soft)}.line .nama{font-size:var(--t18);grid-column:1/-1;align-items:baseline;gap:.75rem;font-weight:500;display:flex}.line .nama .kode{font-size:var(--t13);color:var(--ink-soft);font-weight:400}.line .detail{color:var(--ink-soft);font-size:var(--t15);align-items:baseline;gap:.5rem;min-width:0;display:flex}.line .detail .satuan{color:var(--ink)}.line .detail .isi{font-size:var(--t13)}.line .detail .dots{border-bottom:1px dotted var(--rule);flex:1;min-width:1rem;transform:translateY(-.3em)}.line .harga{font-size:var(--t18);text-align:right;white-space:nowrap;font-weight:500}.line .harga .asli{font-size:var(--t13);color:var(--ink-soft);font-weight:400;text-decoration:line-through;display:block}.scanwrap{border-top:1px solid var(--rule);padding:1rem 1.5rem 1.25rem}.scanrow{align-items:center;gap:.75rem;display:flex}.scanrow .caret{background:var(--money);width:.7rem;height:1.5rem}#scan{font:inherit;font-size:var(--t22);color:var(--ink);background:0 0;border:0;flex:1;min-width:0;padding:.5rem 0}#scan::placeholder{color:var(--ink-soft);opacity:.7}.hint{min-height:1.4em;font-size:var(--t15);color:var(--ink-soft);margin-top:.5rem}.hint.warn{color:var(--pending);font-weight:500}.hint kbd{font:inherit;color:var(--ink);font-weight:600}.money{grid-template-rows:auto auto;align-content:start;gap:1.25rem;min-height:0;display:grid}.total{background:var(--paper);border:1px solid var(--rule);flex-direction:column;padding:1.5rem 1.75rem;display:flex}.total .label{font-size:var(--t18);color:var(--ink-soft)}.total .val{font-size:var(--t64);letter-spacing:-.02em;word-break:break-all;margin-top:.35rem;font-weight:700;line-height:1}.total .val small{color:var(--ink-soft);vertical-align:.35em;margin-right:.15em;font-size:.45em;font-weight:500}.total .meta{color:var(--ink-soft);font-size:var(--t18);margin-top:.6rem}.total .rule{border-top:3px double var(--ink);margin-bottom:1rem}.keys{gap:.6rem;display:grid}.key{background:var(--paper);border:1px solid var(--rule);text-align:left;min-height:48px;font-size:var(--t18);border-radius:4px;grid-template-columns:3.6rem 1fr;align-items:center;padding:0 .75rem 0 0;display:grid}.key kbd{font:inherit;font-weight:600;font-size:var(--t15);color:var(--ink-soft);justify-self:center}.key.primary{background:var(--ink);color:var(--paper);border-color:var(--ink);min-height:64px;font-weight:600;font-size:var(--t22)}.key.primary kbd{color:var(--paper);opacity:.75}.key[disabled]{opacity:.4;cursor:default}.keys .row2{grid-template-columns:1fr 1fr;gap:.6rem;display:grid}.pay{background:var(--paper);border:1px solid var(--rule);grid-template-rows:auto auto 1fr auto;gap:1rem;min-height:0;padding:1.5rem 1.75rem;display:grid}.pay .row{font-size:var(--t18);color:var(--ink-soft);justify-content:space-between;align-items:baseline;display:flex}.pay .row b{color:var(--ink);font-weight:600;font-size:var(--t22)}.pay .in{border-bottom:3px solid var(--ink);align-items:baseline;gap:.5rem;padding-bottom:.25rem;display:flex}.pay .in .rp{font-size:var(--t22);color:var(--ink-soft)}#bayar{font:inherit;font-size:var(--t40);color:var(--ink);background:0 0;border:0;flex:1;min-width:0;padding:0;font-weight:600}.quick{grid-template-columns:repeat(3,1fr);align-content:start;gap:.5rem;display:grid}.quick button{border:1px solid var(--rule);min-height:48px;font-size:var(--t18);border-radius:4px;font-weight:500}.quick button:hover{background:var(--counter)}.kembali{font-size:var(--t18);color:var(--ink-soft)}.kembali b{font-size:var(--t40);color:var(--ink);letter-spacing:-.02em;font-weight:700;display:block}.kembali.kurang b{color:var(--danger)}.done{background:var(--paper);border:1px solid var(--rule);flex-direction:column;justify-content:center;padding:1.75rem;display:flex}.done .label{font-size:var(--t22);color:var(--ink-soft)}.done .val{font-size:var(--t96);color:var(--money);letter-spacing:-.03em;margin:.25rem 0 1rem;font-weight:700;line-height:1}.done .val small{vertical-align:.5em;margin-right:.15em;font-size:.4em;font-weight:500}.done .sub{font-size:var(--t18);color:var(--ink-soft)}.done .sub b{color:var(--ink);font-weight:600}.search{background:#1a1d1a59;justify-content:center;align-items:flex-start;padding-top:12vh;display:none;position:fixed;inset:0}.search.open{display:flex}.search .box{background:var(--paper);border:1px solid var(--rule);grid-template-rows:auto 1fr;width:min(640px,92vw);max-height:70vh;display:grid}#q{font:inherit;font-size:var(--t22);border:0;border-bottom:1px solid var(--rule);color:var(--ink);background:0 0;padding:1rem 1.25rem}.results{overflow:auto}.res{font-size:var(--t18);border-left:4px solid #0000;grid-template-columns:1fr auto;gap:1rem;padding:.75rem 1.25rem;display:grid}.res.active{background:var(--money-soft);border-left-color:var(--money)}.res .kat{font-size:var(--t13);color:var(--ink-soft);display:block}.res .h{text-align:right;white-space:nowrap}.res .h small{font-size:var(--t13);color:var(--ink-soft);display:block}.nores{color:var(--ink-soft);padding:1.5rem 1.25rem}.overlay-harga{background:#1a1d1a59;justify-content:center;align-items:flex-start;padding-top:12vh;display:flex;position:fixed;inset:0}.overlay-harga .box{background:var(--paper);border:1px solid var(--rule);gap:1rem;width:min(420px,92vw);padding:1.5rem 1.75rem;display:grid}.overlay-harga .judul{font-size:var(--t18);font-weight:500}.overlay-harga .sub{font-size:var(--t15);color:var(--ink-soft)}.overlay-harga input{font:inherit;font-size:var(--t28);border:0;border-bottom:3px solid var(--ink);color:var(--ink);background:0 0;width:100%;padding:.25rem 0;font-weight:600}.overlay-harga .aksi{grid-template-columns:1fr 1fr;gap:.6rem;display:grid}.overlay-harga .galat,.pay .galat{color:var(--danger);font-size:var(--t15)}.gate{background:var(--counter);justify-content:center;align-items:center;min-height:100vh;padding:2rem;display:flex}.gate .box{background:var(--paper);border:1px solid var(--rule);gap:1rem;width:min(400px,92vw);padding:2rem 2rem 1.75rem;display:grid}.gate .judul{font-size:var(--t28);font-weight:600}.gate .sub{font-size:var(--t15);color:var(--ink-soft)}.gate label{font-size:var(--t15);color:var(--ink-soft);gap:.35rem;display:grid}.gate input{font:inherit;font-size:var(--t18);border:0;border-bottom:3px solid var(--ink);color:var(--ink);background:0 0;width:100%;padding:.4rem 0}.gate input::placeholder{color:var(--ink-soft);opacity:.7}.gate input:disabled{color:var(--ink-soft)}.gate .galat{color:var(--danger);font-size:var(--t15)}.gate .status{color:var(--ink-soft);font-size:var(--t15)}.gate .masuk{background:var(--ink);min-height:52px;color:var(--paper);border:1px solid var(--ink);font-weight:600;font-size:var(--t18);border-radius:4px}.gate .masuk:disabled{opacity:.5;cursor:default}.gate .keluar{color:var(--ink-soft);font-size:var(--t15);cursor:pointer;background:0 0;border:0;justify-self:start;padding:0;text-decoration:underline}.hidden{display:none!important}@media (prefers-reduced-motion:no-preference){.money{animation:.12s ease-out money-masuk}}@keyframes money-masuk{0%{opacity:0}to{opacity:1}}