:root{--primary:#1F7A3E;--primary-d:#145A2C;--accent:#F5A524;--ink:#1B2430;--muted:#5F6B7A;--bg:#F4F6F2;--surface:#fff;--line:#E2E6DE;
--danger:#C62828;--warn:#B26A00;--ok:#2E7D32;--warn-bg:#FFF4DC;--sel:#E3F2E6}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:17px;color:var(--ink);background:var(--bg);overflow:hidden}
[hidden]{display:none!important}
.scr{height:100vh}
.center{display:flex;align-items:center;justify-content:center;padding:16px;overflow:auto}
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:1.2rem 1.4rem;box-shadow:0 4px 18px rgba(0,0,0,.06)}
.box{width:100%;max-width:400px}
.brand{display:flex;align-items:center;gap:.5rem;font-weight:800;font-size:1.35rem;margin-bottom:.6rem}.brand img{width:40px;height:40px}
h2{margin:.2rem 0 .8rem}
label{display:block;font-size:.85rem;color:var(--muted);margin-bottom:.7rem}
input,select{display:block;width:100%;margin-top:.2rem;font:inherit;padding:.6rem .7rem;border:1px solid #C9D0C4;border-radius:8px;background:#fff;color:var(--ink);min-height:46px}
input:focus{outline:3px solid rgba(31,122,62,.35);border-color:var(--primary)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;border:0;border-radius:9px;background:var(--primary);color:#fff;font:inherit;font-weight:700;padding:.6rem 1rem;min-height:46px;cursor:pointer}
.btn:hover{background:var(--primary-d)}.btn.big{width:100%;font-size:1.1rem;margin-top:.3rem}.btn.ghost{background:transparent;color:var(--primary);border:1px solid var(--line);width:100%;margin-top:.5rem}
.btn.danger{background:var(--danger)}.btn.warn{background:var(--accent);color:#1B2430}
.err{color:var(--danger);min-height:1.2em;margin:.5rem 0 0;font-weight:600}
.muted{color:var(--muted)}.r{text-align:right}
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem;margin:-.2rem 0 .8rem}
.keypad button{font:inherit;font-size:1.3rem;font-weight:700;min-height:52px;border:1px solid var(--line);border-radius:9px;background:#fff;cursor:pointer}
.keypad button:active{background:var(--sel)}

/* layar kasir */
#scr-pos{display:flex;flex-direction:column}
.pos{flex:1;display:grid;grid-template-columns:1fr 340px;min-height:0}
.left{display:flex;flex-direction:column;min-height:0;padding:.7rem .7rem 0}
.scanrow input{font-size:1.2rem;min-height:54px;border:2px solid var(--primary);margin:0}
.lines-wrap{flex:1;overflow:auto;margin-top:.6rem;background:var(--surface);border:1px solid var(--line);border-radius:10px;position:relative}
.lines{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.lines th{position:sticky;top:0;background:#F8FAF6;text-align:left;font-size:.75rem;text-transform:uppercase;color:var(--muted);padding:.5rem;border-bottom:2px solid var(--line)}
.lines td{padding:.55rem .5rem;border-bottom:1px solid var(--line)}
.lines tr{cursor:pointer}.lines tr.sel td{background:var(--sel)}.lines tr.flash td{animation:fl .6s}
@keyframes fl{from{background:#C8F0D0}to{background:transparent}}
.lines .rule{display:block;font-size:.75rem;color:var(--ok);font-weight:700}
.lines td.n{color:var(--muted);width:2.2rem}
.empty{position:absolute;inset:3rem 0 auto;text-align:center;color:var(--muted)}
.right{display:flex;flex-direction:column;gap:.6rem;padding:.7rem;background:var(--surface);border-left:1px solid var(--line)}
.cust{display:block;width:100%;text-align:left;font:inherit;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:.6rem .8rem;cursor:pointer}
.cust span,.cust small{display:block;font-size:.8rem}.cust b{display:block;font-size:1.1rem}.cust.grosir{background:var(--warn-bg);border-color:var(--accent)}
.sums div{display:flex;justify-content:space-between;padding:.25rem 0;font-variant-numeric:tabular-nums}.sums .save{color:var(--ok)}
.total{margin-top:auto;background:var(--ink);color:#fff;border-radius:12px;padding:.8rem 1rem}
.total span{font-size:.85rem;letter-spacing:.1em;opacity:.8}.total b{display:block;font-size:2.6rem;line-height:1.1;font-variant-numeric:tabular-nums;text-align:right}
.btn.pay{font-size:1.4rem;min-height:68px;width:100%}
.fkeys{display:flex;gap:.3rem;padding:.4rem .7rem;background:var(--bg);overflow-x:auto}
.fkeys button{flex:1;white-space:nowrap;font:inherit;font-size:.82rem;font-weight:600;border:1px solid var(--line);background:#fff;border-radius:8px;padding:.5rem .4rem;cursor:pointer;min-height:42px}
.status{display:flex;gap:1rem;align-items:center;padding:.3rem .8rem;background:#E8ECE5;font-size:.82rem;white-space:nowrap;overflow:hidden}
.status .grow{flex:1}.status button{font:inherit;border:0;background:transparent;cursor:pointer;color:var(--ink);text-decoration:underline}
.dot{color:var(--ok);font-weight:700}.dot.off{color:var(--warn)}
body.offline .status{background:var(--warn-bg)}

/* modal */
.modal{position:fixed;inset:0;background:rgba(15,20,25,.55);display:flex;align-items:center;justify-content:center;padding:16px;z-index:50}
.mbox{background:#fff;border-radius:14px;width:100%;max-width:560px;max-height:92vh;overflow:auto;padding:1.2rem 1.4rem;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.mbox h2{display:flex;justify-content:space-between;align-items:center}.mbox h2 small{font-size:.8rem;color:var(--muted);font-weight:400}
.mbox .row{display:flex;gap:.5rem}.mbox .row>*{flex:1}
.list{max-height:50vh;overflow:auto;border:1px solid var(--line);border-radius:10px;margin-top:.4rem}
.list div{padding:.55rem .7rem;border-bottom:1px solid var(--line);cursor:pointer;display:flex;justify-content:space-between;gap:.5rem}
.list div.on{background:var(--sel)}.list small{color:var(--muted)}
.paytotal{font-size:2.4rem;font-weight:800;text-align:right;font-variant-numeric:tabular-nums}
.quick{display:flex;flex-wrap:wrap;gap:.4rem;margin:.2rem 0 .8rem}.quick button{flex:1;font:inherit;font-weight:700;border:1px solid var(--line);background:#fff;border-radius:8px;min-height:46px;cursor:pointer}
.change{display:flex;justify-content:space-between;align-items:center;font-size:1.3rem;padding:.6rem .8rem;border-radius:10px;background:var(--bg);margin:.4rem 0}
.change b{font-size:2rem}.change.ok{background:#E8F5E9}.change.bad{background:#FDECEC;color:var(--danger)}
.kv{display:flex;justify-content:space-between;padding:.2rem 0;border-bottom:1px dashed var(--line)}
.menu button{display:block;width:100%;text-align:left;font:inherit;padding:.75rem .8rem;border:1px solid var(--line);background:#fff;border-radius:9px;margin-bottom:.4rem;cursor:pointer}
.menu button:hover{background:var(--bg)}
.lock{position:fixed;inset:0;z-index:60;background:rgba(27,36,48,.92);display:flex;align-items:center;justify-content:center;padding:16px}
.toast{position:fixed;left:50%;bottom:70px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:.7rem 1.2rem;border-radius:10px;z-index:70;font-weight:600;max-width:90vw}
.toast.err{background:var(--danger)}.toast.ok{background:var(--ok)}
.receipt{display:none}

@media (max-width:820px){
  body{overflow:auto}.pos{grid-template-columns:1fr}.right{border-left:0;border-top:1px solid var(--line)}
  .total b{font-size:2rem}.status span:nth-child(n+5){display:none}#scr-pos{height:auto;min-height:100vh}
}

/* cetak struk thermal */
@media print{
  @page{margin:0}
  body{background:#fff;overflow:visible}
  #app,.modal,.lock,.toast{display:none!important}
  .receipt{display:block;font-family:"Courier New",ui-monospace,monospace;font-size:12px;line-height:1.3;color:#000;padding:2mm 3mm}
  .receipt.w80{width:76mm}.receipt.w58{width:54mm;font-size:10.5px}
  .receipt .c{text-align:center}.receipt .b{font-weight:700}.receipt hr{border:0;border-top:1px dashed #000;margin:4px 0}
  .receipt .l{display:flex;justify-content:space-between;gap:6px}.receipt .big{font-size:1.25em}
}