:root{--paper:#F7F4EC;--ink:#1B2A2F;--stamp:#C0392B;--sage:#8FA998;--line:#D8D2C2;--white:#FFFFFF;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--paper:#1B2320;--ink:#EDEAE0;--stamp:#E07A63;--sage:#5F7A6A;--line:#3A4038;--white:#232B27;}}
:root[data-theme="dark"]{--paper:#1B2320;--ink:#EDEAE0;--stamp:#E07A63;--sage:#5F7A6A;--line:#3A4038;--white:#232B27;}
*{box-sizing:border-box;}
html{scroll-padding-top:env(safe-area-inset-top,0px);height:100%;}
body{margin:0;height:100%;background:var(--paper);color:var(--ink);font-family:'Inter',sans-serif;}
.wrap{display:flex;flex-direction:column;height:100%;}
header{padding:14px 18px;border-bottom:2px solid var(--ink);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;}
header .brand{display:flex;align-items:center;gap:10px;}
header .brand img{height:32px;width:32px;object-fit:cover;border-radius:5px;}
header h1{font-family:'Lora',serif;font-size:1.25rem;margin:0;font-weight:600;}
header .who{font-size:0.8rem;color:var(--sage);display:flex;gap:10px;align-items:center;}
header select{border:1px solid var(--line);background:var(--white);color:var(--ink);border-radius:3px;padding:4px 8px;font-size:0.8rem;}
header .who button{background:none;border:1px solid var(--line);color:var(--ink);border-radius:3px;padding:4px 10px;cursor:pointer;font-size:0.78rem;}
nav{display:flex;gap:6px;flex-wrap:wrap;padding:0 4px;}
nav button{background:none;border:1px solid var(--line);color:var(--ink);padding:6px 12px;border-radius:3px;font-size:0.85rem;cursor:pointer;}
nav button.on{background:var(--ink);color:var(--paper);border-color:var(--ink);}
nav button.hidden{display:none;}
main{flex:1;overflow:hidden;display:none;}
main.on{display:flex;}
#setup,#login{position:fixed;inset:0;background:var(--paper);z-index:50;display:none;align-items:center;justify-content:center;overflow-y:auto;}
#setup.on,#login.on{display:flex;}
.loginbox{background:var(--white);border:1px solid var(--line);border-radius:6px;padding:32px;width:280px;text-align:center;margin:20px;}
.setupbox{background:var(--white);border:1px solid var(--line);border-radius:6px;padding:32px;width:360px;text-align:left;margin:20px;}
.loginbox h1,.setupbox h1{font-family:'Lora',serif;margin:0 0 4px;text-align:center;}
.loginbox p,.setupbox p{color:var(--sage);font-size:0.82rem;margin:0 0 18px;text-align:center;}
.loginbox input,.setupbox input,.setupbox select{width:100%;padding:10px;margin-bottom:10px;border:1px solid var(--line);border-radius:3px;background:var(--paper);color:var(--ink);}
.setupbox label{font-size:0.78rem;color:var(--sage);display:block;margin-bottom:2px;}
.setupbox .row2{display:flex;gap:8px;}
.setupbox .row2>div{flex:1;}
.loginbox button,.setupbox button{width:100%;padding:10px;background:var(--stamp);color:#fff;border:none;border-radius:3px;font-weight:600;cursor:pointer;}
.loginerr{color:var(--stamp);font-size:0.78rem;min-height:16px;margin-top:6px;}
.logopreview{width:56px;height:56px;object-fit:cover;border-radius:6px;border:1px solid var(--line);margin-bottom:8px;}
#sell{gap:0;}
#prodwrap{flex:1.3;display:flex;flex-direction:column;overflow:hidden;}
#sbar{padding:12px 16px 0;}
#sbar input{width:100%;padding:10px;border:1px solid var(--line);border-radius:4px;background:var(--white);color:var(--ink);font-size:0.95rem;}
#chips{display:flex;gap:6px;overflow-x:auto;padding:8px 0 2px;}
#chips button{white-space:nowrap;background:var(--white);border:1px solid var(--line);color:var(--ink);border-radius:14px;padding:4px 12px;font-size:0.78rem;cursor:pointer;}
#chips button.on{background:var(--stamp);color:#fff;border-color:var(--stamp);}
#products{flex:1;overflow-y:auto;padding:12px 16px 16px;display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;align-content:start;}
.pcard{background:var(--white);border:1px solid var(--line);border-radius:4px;padding:10px;cursor:pointer;}
.pcard .nm{font-size:0.88rem;font-weight:600;line-height:1.25;}
.pcard .pr{font-family:'JetBrains Mono',monospace;color:var(--stamp);margin-top:6px;font-size:0.9rem;}
.pcard .st{font-size:0.72rem;color:var(--sage);margin-top:2px;}
.pcard img{width:100%;height:70px;object-fit:cover;border-radius:3px;margin-bottom:6px;}
.qrow{display:flex;align-items:center;gap:4px;margin-top:8px;}
.qrow .qbtn{width:22px;height:22px;border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:3px;cursor:pointer;font-size:0.9rem;line-height:1;padding:0;}
.qrow .qn{width:34px;text-align:center;border:1px solid var(--line);border-radius:3px;background:var(--paper);color:var(--ink);padding:2px;font-family:'JetBrains Mono',monospace;font-size:0.8rem;}
.qrow .qadd{flex:1;background:var(--stamp);color:#fff;border:none;border-radius:3px;padding:4px 6px;font-size:0.75rem;cursor:pointer;font-weight:600;}
.qrow .qadd:disabled{opacity:0.4;cursor:default;}
#receipt{flex:1;border-left:2px dashed var(--line);display:flex;flex-direction:column;background:var(--white);}
#receipt h2{font-family:'Lora',serif;padding:14px 16px 0;margin:0;font-size:1.05rem;}
.custrow{padding:8px 16px 0;display:flex;gap:6px;}
.custrow select{flex:1;padding:6px;border:1px solid var(--line);border-radius:3px;background:var(--paper);color:var(--ink);}
#cartlist{flex:1;overflow-y:auto;padding:10px 16px;}
.citem{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--line);font-size:0.85rem;}
.citem .nm{flex:1;}
.citem input{width:42px;text-align:center;font-family:'JetBrains Mono';border:1px solid var(--line);border-radius:3px;background:var(--paper);color:var(--ink);padding:3px;}
.citem .lt{width:64px;text-align:right;font-family:'JetBrains Mono';font-size:0.85rem;}
.citem .rm{background:none;border:none;color:var(--stamp);cursor:pointer;font-size:1.1rem;line-height:1;}
#paybox{padding:10px 16px;border-top:1px solid var(--line);}
#paybox .prow{display:flex;gap:6px;margin-bottom:8px;}
#paybox button.pm{flex:1;padding:8px;border:1px solid var(--line);background:var(--white);color:var(--ink);border-radius:3px;cursor:pointer;font-size:0.82rem;}
#paybox button.pm.on{background:var(--sage);color:#fff;border-color:var(--sage);}
#paybox input{width:100%;padding:8px;border:1px solid var(--line);border-radius:3px;background:var(--paper);color:var(--ink);margin-bottom:6px;}
#changeline{font-family:'JetBrains Mono';font-size:0.9rem;display:none;justify-content:space-between;padding:4px 0;}
#totals{padding:10px 16px;border-top:2px solid var(--ink);}
.trow{display:flex;justify-content:space-between;font-family:'JetBrains Mono';margin:3px 0;}
.trow.grand{font-size:1.25rem;font-weight:700;color:var(--stamp);}
#checkout{margin:10px 16px 16px;padding:12px;background:var(--stamp);color:#fff;border:none;border-radius:4px;font-weight:600;font-size:1rem;cursor:pointer;}
#checkout:disabled{opacity:0.4;}
#manage,#customers,#sales,#settings,#home,#staff,#branches,#addprod,#report,#loans,#shifts,#invest,#addbranch,#purchase,#returns,#analysis{flex-direction:column;padding:16px;overflow-y:auto;width:100%;}
h2.vt{font-family:'Lora',serif;margin:0 0 12px;font-size:1.1rem;}
#menubtn{display:none;background:var(--ink);color:var(--paper);border:none;border-radius:3px;padding:6px 12px;font-size:0.85rem;cursor:pointer;}
#mmenu{display:none;position:fixed;top:0;left:0;bottom:0;width:250px;background:var(--white);border-right:2px solid var(--ink);z-index:40;padding:16px 0;overflow-y:auto;}
#mmenu.open{display:block;}
#mmenu button{display:block;width:100%;text-align:left;background:none;border:none;border-bottom:1px solid var(--line);color:var(--ink);padding:12px 18px;font-size:0.95rem;cursor:pointer;}
#mmenu button.on{background:var(--paper);font-weight:600;color:var(--stamp);}
#mmenu button.hidden{display:none;}
#mback{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:39;}
#mback.open{display:block;}
.rcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin:12px 0;}
.form-row{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap;}
.form-row input,.form-row select{padding:8px;border:1px solid var(--line);border-radius:3px;background:var(--white);color:var(--ink);flex:1;min-width:100px;}
.form-row button{padding:8px 16px;background:var(--ink);color:var(--paper);border:none;border-radius:3px;cursor:pointer;font-weight:600;}
table{width:100%;border-collapse:collapse;font-size:0.88rem;}
th,td{text-align:left;padding:8px 6px;border-bottom:1px solid var(--line);}
th{font-family:'Lora',serif;font-weight:600;}
td.num{font-family:'JetBrains Mono';text-align:right;}
td button{background:none;border:none;color:var(--stamp);cursor:pointer;}
.saleday{margin-bottom:18px;}
.saleday h3{font-family:'Lora',serif;margin:0 0 6px;font-size:1rem;display:flex;justify-content:space-between;}
.saleday .row{display:flex;justify-content:space-between;font-size:0.85rem;padding:4px 0;border-bottom:1px dotted var(--line);font-family:'JetBrains Mono';align-items:center;}
.saleday .row button{background:none;border:1px solid var(--line);border-radius:3px;color:var(--ink);cursor:pointer;font-size:0.72rem;padding:2px 6px;}
.tag{font-size:0.68rem;background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:1px 6px;margin-left:4px;}
.empty{color:var(--sage);font-style:italic;padding:20px;text-align:center;}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:20px;}
.card{background:var(--white);border:1px solid var(--line);border-radius:6px;padding:16px;}
.card .big{font-family:'JetBrains Mono';font-size:1.5rem;font-weight:700;color:var(--stamp);}
.card .lbl{font-size:0.8rem;color:var(--sage);margin-top:4px;}
.settings-block{background:var(--white);border:1px solid var(--line);border-radius:6px;padding:16px;margin-bottom:16px;max-width:380px;}
.settings-block h3{font-family:'Lora',serif;margin-top:0;font-size:1rem;}
#printarea{display:none;}
#printarea.show{display:flex;position:fixed;inset:0;background:rgba(0,0,0,.45);align-items:center;justify-content:center;z-index:60;}
.receiptbox{background:#fff;color:#000;padding:12px 10px;width:var(--rw,340px);max-width:95vw;font-family:'Courier New',monospace;font-size:var(--rf,12.5px);border-radius:4px;max-height:85vh;overflow-y:auto;}
.receiptbox hr{border:none;border-top:1px dashed #000;}
.receiptbox .c{text-align:center;}
.receiptbox .btns{display:flex;gap:8px;margin-top:14px;}
.receiptbox .btns button{flex:1;padding:10px;border:none;border-radius:3px;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif;}
.receiptbox .btns .pbtn{background:var(--stamp);color:#fff;}
.receiptbox .btns .cbtn{background:#eee;color:#000;}
@media print{
  body *{visibility:hidden;}
  #printarea,#printarea *{visibility:visible;}
  #printarea{display:block !important;position:absolute;top:0;left:0;width:100%;background:#fff;}
  .receiptbox{width:100%;max-width:100%;box-shadow:none;}
  .no-print{display:none !important;}
}
::-webkit-scrollbar{width:8px;}::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px;}
@media (max-width:640px){#sell{flex-direction:column;overflow-y:auto;}#prodwrap{flex:none;max-height:45vh;}#receipt{border-left:none;border-top:2px dashed var(--line);flex:none;}nav{display:none;}#menubtn{display:block;}}
.receiptbox.wide{width:680px;font-family:'Inter',sans-serif;font-size:13px;padding:20px;}
.ctile{flex:0 0 auto;width:96px;background:var(--white);border:1px solid var(--line);border-radius:6px;cursor:pointer;text-align:center;overflow:hidden;color:var(--ink);}
.ctile.on{border-color:var(--stamp);box-shadow:0 0 0 2px var(--stamp);}
.ctile img,.ctile .noimg{width:96px;height:96px;object-fit:cover;display:block;background:var(--paper);}
.ctile .noimg{display:flex;align-items:center;justify-content:center;font-size:1.6rem;color:var(--sage);}
.ctile .cn{font-size:.74rem;font-weight:600;padding:4px 4px 0;line-height:1.2;}
.ctile .cc{font-size:.72rem;color:var(--stamp);font-family:'JetBrains Mono',monospace;padding-bottom:5px;}
.catlist{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px;}
.catcard{background:var(--white);border:1px solid var(--line);border-radius:6px;padding:8px;width:130px;text-align:center;font-size:.8rem;}
.catcard img,.catcard .noimg{width:80px;height:80px;object-fit:cover;border-radius:4px;background:var(--paper);display:flex;align-items:center;justify-content:center;margin:0 auto 4px;font-size:1.5rem;}
.catcard label{display:block;margin-top:4px;color:var(--sage);cursor:pointer;text-decoration:underline;font-size:.72rem;}
.catcard input{display:none;}
.panel{background:var(--white);border:1px solid var(--line);border-radius:6px;padding:14px;margin:12px 0;}
.copyright{font-size:0.7rem;color:var(--sage);text-align:center;margin-top:14px;letter-spacing:.03em;}
.appcopy{position:fixed;bottom:4px;right:8px;margin:0;opacity:0.55;pointer-events:none;z-index:5;}

.pdot{width:11px;height:11px;border-radius:50%;display:inline-block;cursor:pointer;border:1px solid rgba(0,0,0,.15);}
.pdot.off{background:#9aa19a;}
.pdot.on{background:#2ecc71;box-shadow:0 0 5px #2ecc71;}
.langtabs,.logintabs{display:flex;gap:6px;margin-bottom:14px;}
.langtabs button,.logintabs button{flex:1;padding:8px;border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:3px;cursor:pointer;font-size:0.82rem;}
.langtabs button.on,.logintabs button.on{background:var(--stamp);color:#fff;border-color:var(--stamp);}
.loginpane{display:none;}
.loginpane.show{display:block;}
.xlrow{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap;}
.xlrow button,.xlrow label{padding:8px 14px;background:var(--ink);color:var(--paper);border:none;border-radius:3px;cursor:pointer;font-weight:600;font-size:0.85rem;}
.xlrow input[type=file]{display:none;}

/* Responsive POS additions */
.panel{background:var(--white);border:1px solid var(--line);border-radius:6px;padding:12px;margin-bottom:12px;}
.section-note{font-weight:700;margin-bottom:8px;color:var(--ink);}
.table-scroll{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.table-scroll table{min-width:680px;}
.purchase-panel .form-row,.staff-holiday-panel .form-row{align-items:center;}
.holiday-row td{background:rgba(192,57,43,.07);}
.form-row input,.form-row select,.form-row button{min-height:40px;}
@media (max-width:900px){
  #manage,#customers,#sales,#settings,#home,#staff,#branches,#addprod,#report,#loans,#shifts,#invest,#addbranch,#purchase,#returns,#analysis{padding:12px;}
  .form-row{gap:7px;}
  .form-row input,.form-row select{flex:1 1 180px;}
  .form-row button{flex:1 1 auto;}
  header{padding:10px 12px;}
}
@media (max-width:640px){
  body{font-size:14px;}
  .setupbox,.loginbox{width:calc(100% - 24px);padding:22px;margin:12px;}
  header .who{width:100%;justify-content:flex-end;flex-wrap:wrap;}
  header .brand{min-width:0;}
  header h1{font-size:1rem;max-width:62vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  #manage,#customers,#sales,#settings,#home,#staff,#branches,#addprod,#report,#loans,#shifts,#invest,#addbranch,#purchase,#returns,#analysis{padding:10px;}
  h2.vt{font-size:1rem;}
  .form-row{display:grid;grid-template-columns:1fr;gap:8px;}
  .form-row input,.form-row select,.form-row button{width:100%;min-width:0;flex:unset;}
  .rcards{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;}
  .rcards .card{padding:9px;}
  .rcards .big{font-size:1rem;}
  table{font-size:.78rem;}
  th,td{padding:7px 5px;white-space:nowrap;}
  .purchase-panel .form-row,.staff-holiday-panel .form-row{display:grid;}
  #paybox .prow{flex-wrap:wrap;}
  #paybox button.pm{min-width:90px;}
}
@media (min-width:641px) and (max-width:1100px){
  .form-row input,.form-row select{flex:1 1 160px;}
}
@media (hover:none){
  button,input,select{font-size:16px;}
}
.barcode-preview{min-height:72px;display:flex;align-items:center;justify-content:center;padding:8px;border:1px dashed var(--line);border-radius:6px;margin:6px 0;overflow:auto;background:#fff}.barcode-preview svg{max-width:100%;height:64px}.branchprofile{font-size:.72rem;color:var(--sage);margin-left:6px}.barcode-cell{font-family:'JetBrains Mono',monospace;font-size:.78rem;white-space:nowrap}