:root{--g:#0a8f4a;--gd:#066b37;--bg:#f2f4f3;--card:#fff;--t:#1b2420;--m:#6b7570;--r:#c62828;--a:#f59e0b}
*{box-sizing:border-box}body{margin:0;font-family:system-ui,Roboto,sans-serif;background:var(--bg);color:var(--t);font-size:15px}
header{position:sticky;top:0;z-index:5;background:var(--g);color:#fff;display:flex;gap:6px;align-items:center;padding:8px 10px}header>div{flex:1}header select{max-width:46%;background:#fff;color:var(--t)}
nav{position:fixed;bottom:0;left:0;right:0;display:flex;flex-wrap:wrap;background:#fff;border-top:1px solid #ddd;z-index:5;max-height:45vh;overflow-y:auto}nav button{flex:1 0 19%;min-width:58px;background:none;color:var(--m);border-radius:0;padding:8px 2px;font-size:12px}nav button.on{color:var(--g);font-weight:700;border-top:3px solid var(--g)}
main{padding:10px 10px 80px}.card{background:var(--card);border-radius:12px;padding:12px;margin-bottom:10px;box-shadow:0 1px 3px #0001}
input,select,textarea{font:inherit;padding:9px;border:1px solid #ccd;border-radius:8px;width:100%;margin:3px 0;background:#fff}
button{font:inherit;padding:9px 14px;border:0;border-radius:8px;background:var(--g);color:#fff;margin:3px 2px;cursor:pointer}button.ghost{background:#e8ece9;color:var(--t)}button.red{background:var(--r)}button.sm{padding:5px 9px;font-size:13px}
.row{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.row>*{flex:1}.row.end{justify-content:flex-end}.row.end>*{flex:0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}.tile{background:#fff;border-radius:10px;padding:10px;border:1px solid #e3e7e5;min-height:76px}.tile b{display:block;font-size:14px}.tile .pr{color:var(--g);font-weight:700}.tile.low{border-color:var(--a)}.tile.out{opacity:.45}
table{width:100%;border-collapse:collapse}td,th{padding:6px 4px;border-bottom:1px solid #eee;text-align:left;font-size:14px}th{color:var(--m);font-weight:600}.num{text-align:right}
.chips{display:flex;gap:6px;overflow-x:auto;margin:6px 0}.chip{background:#e8ece9;color:var(--t);white-space:nowrap;padding:6px 12px;border-radius:20px}.chip.on{background:var(--g);color:#fff}
.big{font-size:24px;font-weight:800}.muted{color:var(--m);font-size:13px}.err{color:var(--r)}.kpi{display:grid;grid-template-columns:1fr 1fr;gap:8px}.kpi div{background:#fff;border-radius:10px;padding:10px}.kpi b{display:block;font-size:18px}
pre{background:#fafafa;border:1px dashed #bbb;padding:8px;font-size:11.5px;overflow:auto;white-space:pre}
#modal{position:fixed;inset:0;background:#0006;z-index:20;display:flex;align-items:flex-end}.sheet{background:#fff;width:100%;max-height:90vh;overflow:auto;border-radius:16px 16px 0 0;padding:14px}
#toast{pointer-events:none;position:fixed;bottom:70px;left:50%;transform:translateX(-50%);background:#222;color:#fff;padding:10px 16px;border-radius:20px;z-index:30;max-width:90%}
#alerts .warn{background:#fff4e0;color:#8a5300;padding:8px 12px;font-size:13px}.login{max-width:360px;margin:12vh auto;text-align:center}.logo{width:64px;height:64px;border-radius:50%;background:var(--g);color:#fff;font-size:36px;font-weight:800;line-height:64px;margin:auto}
.cartbar{position:sticky;bottom:60px;background:var(--gd);color:#fff;border-radius:12px;padding:10px 14px;display:flex;align-items:center;gap:8px}.cartbar .big{flex:1;font-size:20px}
video{width:100%;border-radius:10px;background:#000}

html{-webkit-text-size-adjust:100%}body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);-webkit-tap-highlight-color:transparent}
input,select,textarea{font-size:16px!important}
header{padding-top:calc(8px + env(safe-area-inset-top))}
nav{padding-bottom:env(safe-area-inset-bottom);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
main{padding-bottom:calc(80px + env(safe-area-inset-bottom))}
#login{padding-top:env(safe-area-inset-top)}#modal .sheet{padding-bottom:calc(12px + env(safe-area-inset-bottom));max-height:calc(100vh - env(safe-area-inset-top));overflow:auto}
#printArea{display:none}@media print{body>*:not(#printArea){display:none!important}#printArea{display:block!important}}

[hidden]{display:none!important}
#bootErr{position:fixed;left:0;right:0;top:0;z-index:99;background:#c62828;color:#fff;padding:calc(10px + env(safe-area-inset-top)) 12px 10px;font:14px/1.4 system-ui;white-space:pre-wrap;word-break:break-word}
[data-add],[data-sale],[data-cust],[data-prod],[data-z],[data-act],button,.tile{cursor:pointer;touch-action:manipulation}

main{padding-bottom:calc(150px + env(safe-area-inset-bottom))!important}#upd{position:fixed;top:calc(4px + env(safe-area-inset-top));left:8px;right:8px;z-index:50;background:#f59e0b;color:#111;font-weight:700;padding:12px;border-radius:10px;text-align:center;box-shadow:0 2px 8px #0004;cursor:pointer}#hver,#lver{opacity:.85}
/* ---- v2.2.1 desktop layout (PC browser, installed PWA, Windows desktop app) ---- */
@media (min-width:900px){
 body{font-size:15px}
 nav{top:52px;bottom:0;left:0;right:auto;width:118px;flex-direction:column;flex-wrap:nowrap;max-height:none;overflow-y:auto;border-top:0;border-right:1px solid #ddd;padding:6px 0}
 nav button{flex:0 0 auto;width:100%;min-width:0;padding:10px 4px;font-size:13px;border-top:0!important;border-left:4px solid transparent}
 nav button.on{border-left-color:var(--g);background:#eef7f1}
 main{margin-left:118px;padding:16px 22px 30px!important;max-width:1500px}
 #alerts{margin-left:118px}
 header{padding:10px 18px}header select{max-width:300px}
 .grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
 .cartbar{bottom:12px}
 #modal{align-items:center}
 #modal .sheet{width:100%;max-width:720px;margin:0 auto;border-radius:14px;max-height:88vh}
 #login .card.login{max-width:420px;margin:10vh auto}
 .kpi{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))!important}
 table{font-size:14px}
 button,[data-add],tr[data-sale],tr[data-cust],tr[data-prj],tr[data-prod]{cursor:pointer}
 .tile:hover{box-shadow:0 2px 8px #0002}
}
@media (min-width:1300px){.grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}}

/* v2.3.0 customer insights */
.icard{background:#fff;border-radius:12px;padding:10px 12px;margin:8px 0;border-left:5px solid #c0392b;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.icard.opportunity{border-left-color:#0a8a4a}.icard.ihid{opacity:.6}.icard p{margin:6px 0}
.ihead{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}.ival{font-weight:700;font-size:.9em;color:#c0392b}.opportunity .ival{color:#0a8a4a}
.iline{font-size:.9em;padding:6px 8px;margin:4px 0;border-left:3px solid #c0392b;background:#fdf3f2;border-radius:6px}.iline.opportunity{border-left-color:#0a8a4a;background:#eef8f2}
.ibadge{display:inline-block;background:#c0392b;color:#fff;border-radius:9px;padding:0 6px;font-size:.75em}
.ichart{width:100%;max-width:520px;height:auto;display:block;margin:6px 0}.ichart rect{fill:#0a8a4a}.ichart text{font-size:9px;fill:#666}
@media (min-width:900px) and (max-height:860px){nav button{padding:5px 4px;font-size:12px;line-height:1.25}}

/* v2.4.0 shifts */
.roster table{font-size:.85em}.roster td{vertical-align:top;min-width:84px}.rs{background:#f4f6f5;border-radius:6px;padding:3px 5px;margin:2px 0}.rs a{color:#c0392b;text-decoration:none;font-weight:700}
.rs.ok{background:#eef8f2}.rs.warnc{background:#fff6e5}.rs.err{background:#fdf3f2}.warnc{color:#b26a00}.ok{color:#0a8a4a}
label.chk{display:inline-flex;align-items:center;gap:6px;margin:4px 12px 4px 0}label.chk input{width:auto}

/* v2.4.2 receipt status + transactions panel */
.stbadge{display:inline-block;font-weight:700;padding:4px 10px;border-radius:8px;margin-bottom:6px;background:#eef8f2;color:#0a8a4a}.stbadge.credit{background:#fff6e5;color:#b26a00}.stbadge.unsettled{background:#fdf3f2;color:#c0392b}
.txp table{font-size:.85em}.txp tr.tx{cursor:pointer}.txp tr.tx:hover{background:#f4f6f5}.txp .st{font-weight:700;font-size:.85em}.st.paid{color:#0a8a4a}.st.credit{color:#b26a00}.st.refunded,.st.voided{color:#c0392b}.st.parked,.st.recalled,.st.sold{color:#555}
.stkalert{border-left:4px solid #d97706;background:#fff7ed}
input.qn{width:64px}
.syncb{font-size:12px;padding:3px 8px;border-radius:12px;border:0;margin-left:6px}.syncb.on{background:#dcfce7;color:#166534}.syncb.off{background:#e5e7eb;color:#374151}.syncb.err{background:#fef3c7;color:#92400e}.syncb.rev{background:#fee2e2;color:#991b1b}
.dlg{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:10000;display:flex;align-items:center;justify-content:center;padding:16px}.dlg[hidden]{display:none!important}.dlgbox{background:#fff;border-radius:12px;padding:16px;max-width:420px;width:100%;box-shadow:0 8px 30px rgba(0,0,0,.25)}.dlgbox p{margin:0 0 12px;white-space:pre-wrap}.dlgbox input{width:100%;margin-bottom:10px}
/* v2.6.1 show/hide eye on every password / PIN field */
.pww{position:relative;display:block;flex:1;min-width:0}.pww>input{width:100%;padding-right:46px!important;box-sizing:border-box}
.pweye{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:40px;height:36px;min-height:0;margin:0;padding:0;border:0;background:transparent;color:#555;font-size:18px;line-height:1;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;z-index:2}
.pweye[aria-pressed="true"]{color:#0a8f4a}

.pinf{-webkit-text-security:disc;text-security:disc;font-family:text-security-disc,system-ui,sans-serif}