:root{--paper:#F6FFF8;--ink:#075B31;--stamp:#FFD21A;--sage:#25834B;--line:#CFE7D4;--white:#FFFFFF;--onstamp:#075B31;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:#082E1B;--ink:#F3FFF5;--stamp:#FFD21A;--sage:#7FD49A;--line:#24583A;--white:#0F3D25;--onstamp:#075B31;}}
:root[data-theme="dark"]{--paper:#082E1B;--ink:#F3FFF5;--stamp:#FFD21A;--sage:#7FD49A;--line:#24583A;--white:#0F3D25;--onstamp:#075B31;}
*{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:var(--onstamp);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:var(--onstamp);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:var(--onstamp);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:var(--onstamp);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,#delivery,#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:var(--onstamp);}
.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:var(--onstamp);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(255,210,26,.12);}
.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,#delivery,#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,#delivery,#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}

/* Order type + delivery */
#otype{display:flex;gap:6px;margin:8px 0;}
#otype .ot{flex:1;padding:8px 6px;border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:8px;cursor:pointer;font-size:.8rem;font-weight:600;}
#otype .ot.on{background:var(--stamp);border-color:var(--stamp);color:var(--onstamp);}
#delivbox{display:grid;gap:6px;margin-bottom:8px;}
#delivbox select,#delivbox input{width:100%;padding:8px;border:1px solid var(--line);border-radius:6px;background:var(--paper);color:var(--ink);}

/* 17. DELIVERY — responsive / all-device layout */
.delivery-page{gap:0;min-width:0;}
.delivery-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:2px;}
.delivery-page .panel{width:100%;max-width:none;margin:0 0 12px;padding:14px;}
.delivery-page .panel h3{margin:0 0 10px;font-size:.98rem;font-family:'Lora',serif;}
.delivery-add-row,.delivery-filter-row{margin-bottom:0;align-items:stretch;}
.delivery-add-row input,.delivery-filter-row input,.delivery-filter-row select{min-width:150px;}
.delivery-page .table-scroll{width:100%;max-width:100%;overflow-x:auto;overflow-y:hidden;border:1px solid var(--line);border-radius:6px;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;}
.delivery-page .table-scroll table{min-width:700px;margin:0;}
.delivery-page th,.delivery-page td{vertical-align:middle;}
.delivery-page td button{min-height:36px;padding:6px 10px;border:1px solid var(--line);border-radius:5px;background:var(--paper);font-size:.82rem;}
.delivery-summary{margin:10px 0 12px;}
.delivery-summary .card{min-width:0;}
@media (max-width:900px){
  .delivery-page .panel{padding:12px;}
  .delivery-add-row input,.delivery-filter-row input,.delivery-filter-row select{flex:1 1 180px;}
  .delivery-add-row button,.delivery-filter-row button{flex:1 1 150px;}
}
@media (max-width:640px){
  .delivery-page{padding:8px !important;}
  .delivery-page .panel{padding:10px;margin-bottom:9px;border-radius:7px;}
  .delivery-page .panel h3{font-size:.94rem;margin-bottom:8px;}
  .delivery-add-row,.delivery-filter-row{display:grid;grid-template-columns:1fr;gap:7px;}
  .delivery-add-row input,.delivery-filter-row input,.delivery-filter-row select,.delivery-add-row button,.delivery-filter-row button{width:100%;min-width:0;min-height:44px;}
  .delivery-summary{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:8px 0 10px;}
  .delivery-summary .card{padding:9px;min-height:70px;}
  .delivery-summary .big{font-size:1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .delivery-summary .lbl{font-size:.72rem;line-height:1.15;}
  .delivery-page .table-scroll{border-radius:5px;}
  .delivery-page .table-scroll table{min-width:680px;font-size:.76rem;}
  .delivery-page th,.delivery-page td{padding:7px 6px;white-space:nowrap;}
  .delivery-page td button{min-height:40px;}
}
@media (max-width:380px){
  .delivery-summary{grid-template-columns:1fr 1fr;}
  .delivery-page .panel{padding:8px;}
}


/* =========================================================
   BESTTAUP PRO POS — LOGIN UI THEME TEMPLATE
   Inspired by the supplied reference: clean card, warm paper,
   strong green/yellow primary action, responsive.
   ========================================================= */
#login{padding:20px;}
#login .loginbox{
  position:relative;
  width:min(520px,100%);
  max-width:520px;
  margin:0;
  padding:42px 54px 30px;
  background:var(--white);
  border:1px solid rgba(207,231,212,.95);
  border-radius:18px;
  box-shadow:0 10px 30px rgba(7,91,49,.10),0 2px 7px rgba(7,91,49,.07);
  overflow:hidden;
}
#login .loginbox::before{content:none!important;display:none!important;}
#login .loginbox h1{
  color:var(--ink);
  font-size:clamp(1.7rem,5vw,2.45rem);
  line-height:1.12;
  letter-spacing:.02em;
  margin:0 0 8px;
}
#login .loginbox p{
  color:var(--sage);
  font-size:1.05rem;
  font-weight:500;
  margin:0 0 24px;
}
#login .logintabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin:0 0 18px;
}
#login .logintabs button{
  min-height:58px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--paper);
  color:var(--ink);
  font-size:clamp(.86rem,2.8vw,1rem);
  font-weight:700;
  transition:.18s ease;
}
#login .logintabs button.on{
  background:var(--stamp);
  color:#fff;
  border-color:var(--stamp);
  box-shadow:0 5px 12px rgba(255,210,26,.20);
}
#login .loginpane{animation:loginFade .16s ease-out;}
@keyframes loginFade{from{opacity:.35;transform:translateY(3px)}to{opacity:1;transform:none}}
#login .loginpane input{
  min-height:54px;
  padding:13px 15px;
  margin-bottom:12px;
  border:1px solid var(--line);
  border-radius:9px;
  background:var(--paper);
  color:var(--ink);
  font-size:1rem;
  outline:none;
  transition:border-color .15s,box-shadow .15s;
}
#login .loginpane input:focus{
  border-color:var(--sage);
  box-shadow:0 0 0 3px rgba(37,131,75,.16);
}
#login .loginpane button{
  min-height:56px;
  padding:13px 16px;
  border-radius:9px;
  background:var(--stamp);
  color:#fff;
  font-size:1rem;
  font-weight:800;
  box-shadow:0 6px 14px rgba(255,210,26,.20);
  transition:transform .12s,filter .12s;
}
#login .loginpane button:hover{filter:brightness(.96);}
#login .loginpane button:active{transform:translateY(1px);}
#login .loginerr{min-height:22px;margin-top:12px;font-size:.88rem;font-weight:600;}
#login .copyright{margin-top:20px;font-size:.78rem;}
@media (max-width:640px){
  #login{padding:12px;}
  #login .loginbox{
    width:100%;
    padding:28px 18px 22px;
    border-radius:14px;
  }
  #login .loginbox::before{width:50px;height:50px;font-size:27px;}
  #login .loginbox h1{font-size:clamp(1.45rem,8vw,2rem);}
  #login .loginbox p{font-size:.94rem;margin-bottom:18px;}
  #login .logintabs{gap:7px;margin-bottom:13px;}
  #login .logintabs button{min-height:52px;padding:8px 6px;}
  #login .loginpane input{min-height:50px;font-size:16px;}
  #login .loginpane button{min-height:52px;font-size:.95rem;}
}
@media (max-width:360px){
  #login .loginbox{padding-left:13px;padding-right:13px;}
  #login .logintabs button{font-size:.78rem;}
}
.product-toolbar{display:flex;gap:10px;align-items:center;margin:0 0 12px;flex-wrap:wrap}.product-toolbar input{flex:1;min-width:220px;padding:9px 11px;border:1px solid var(--line);border-radius:4px;background:var(--white);color:var(--ink)}.muted{font-size:.78rem;color:var(--sage)}.product-actions{white-space:nowrap}.product-actions button{padding:5px 8px;border:1px solid var(--line);border-radius:3px;background:var(--white);color:var(--ink);margin-right:4px}.product-actions .edit-product{color:var(--stamp);font-weight:600}.modal-backdrop[hidden]{display:none!important}.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:100;display:none;align-items:center;justify-content:center;padding:16px}.modal-backdrop.open{display:flex}.modal-card{width:min(680px,100%);max-height:92vh;overflow-y:auto;background:var(--white);color:var(--ink);border:1px solid var(--line);border-radius:8px;box-shadow:0 18px 50px rgba(0,0,0,.22);padding:18px}.modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:14px}.modal-head h2{font-family:'Lora',serif;font-size:1.05rem;margin:0}.modal-close{width:36px;height:36px;border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:50%;font-size:1.4rem;cursor:pointer}.product-editor-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.product-editor-grid label{font-size:.78rem;color:var(--sage)}.product-editor-grid input,.product-editor-grid select{display:block;width:100%;margin-top:5px;padding:10px;border:1px solid var(--line);border-radius:4px;background:var(--paper);color:var(--ink)}.product-image-preview{margin-top:12px;min-height:70px;border:1px dashed var(--line);border-radius:5px;padding:8px;display:flex;align-items:center;gap:10px;color:var(--sage)}.product-image-preview img{width:72px;height:72px;object-fit:cover;border-radius:5px}.product-image-preview button{border:0;background:none;color:var(--stamp);cursor:pointer}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px;border-top:1px solid var(--line);padding-top:12px}.modal-actions button{padding:10px 15px;border:1px solid var(--line);border-radius:4px;background:var(--paper);color:var(--ink);cursor:pointer}.modal-actions .primary{background:var(--stamp);border-color:var(--stamp);color:var(--onstamp);font-weight:600}@media(max-width:600px){.product-editor-grid{grid-template-columns:1fr}.modal-backdrop{padding:8px}.modal-card{max-height:95vh;padding:14px}.product-toolbar input{min-width:100%;}.table-scroll{overflow-x:auto}.product-actions{min-width:150px}table{min-width:760px}}
.offline-badge{position:fixed;right:10px;bottom:10px;z-index:100;font:600 12px system-ui;padding:6px 10px;border-radius:999px;background:#0B6B3A;color:#FFD21A;box-shadow:0 3px 12px rgba(0,0,0,.15);display:none}.offline-badge.show{display:block}

/* Live login clock + Sri Lanka flag */
.login-livebar{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin:-8px 0 18px;padding:8px 12px;border:1px solid #C9DCCF;border-radius:999px;background:linear-gradient(90deg,#EAF4ED,#FFF9DF);color:#123B2A;font-size:.78rem;font-weight:700;}
.login-livebar .lk-flag{font-size:1.25rem;line-height:1;}
.login-livebar #login-date{font-variant-numeric:tabular-nums;}
.login-livebar #login-time{font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums;color:#2F7D57;}
.login-livebar .live-sep{color:#D9B23D;}
/* Dashboard top inventory stock levels */
.inventory-top{background:linear-gradient(135deg,#FFFFFF 0%,#F1F9F3 68%,#FFF9DF 100%);border:1px solid #C9DCCF;border-left:5px solid #F2C94C;border-radius:14px;padding:14px 16px;margin:2px 0 16px;box-shadow:0 8px 24px rgba(18,59,42,.07);}
.inventory-title{display:flex;align-items:center;gap:10px;color:#123B2A;margin-bottom:12px;}
.inventory-title>span{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:#F2C94C;font-size:1.2rem;}
.inventory-title strong{display:block;font-size:1rem;}
.inventory-title small{display:block;color:#2F7D57;margin-top:2px;font-size:.75rem;}
.inventory-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
.inventory-metric{background:#fff;border:1px solid #D9E7DD;border-radius:10px;padding:9px;text-align:center;}
.inventory-metric b{display:block;font-size:1.25rem;color:#2F7D57;font-variant-numeric:tabular-nums;}
.inventory-metric span{display:block;margin-top:2px;color:#557466;font-size:.7rem;}
.inventory-metric.warning b{color:#B88900;}
.inventory-metric.danger b{color:#2F7D57;}
.inventory-bar{height:7px;background:#E3EEE7;border-radius:99px;overflow:hidden;margin-top:10px;}
.inventory-bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,#2F7D57,#F2C94C);border-radius:99px;transition:width .25s ease;}
@media(max-width:600px){.login-livebar{font-size:.72rem;gap:6px;margin-bottom:14px}.inventory-top{padding:11px 12px}.inventory-metrics{gap:6px}.inventory-metric{padding:8px 5px}.inventory-metric b{font-size:1.05rem}.inventory-metric span{font-size:.65rem}}


/* =========================================================
   ALL-DEVICE FRIENDLY LAYER (phone / tablet / laptop / TV / landscape)
   Appended last so it safely overrides earlier rules.
   ========================================================= */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;height:100%;}
body{min-height:100vh;min-height:100dvh;height:100%;overflow-x:hidden;-webkit-tap-highlight-color:transparent;}
.wrap{height:100vh;height:100dvh;}
img,svg,canvas,video{max-width:100%;}
button,select,input,textarea{max-width:100%;touch-action:manipulation;}
header,nav,#mmenu{padding-left:max(0px,env(safe-area-inset-left));padding-right:max(0px,env(safe-area-inset-right));}
header{padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right));}

/* Login / setup cards fit any width */
.loginbox{width:min(360px,calc(100% - 24px));}
.setupbox{width:min(460px,calc(100% - 24px));}
#setup,#login{padding:max(12px,env(safe-area-inset-top)) 0 max(12px,env(safe-area-inset-bottom));align-items:flex-start;}
#setup>*,#login>*{margin-top:auto;margin-bottom:auto;}

/* Mobile slide menu width + overlay */
#mmenu{width:min(86vw,300px);}

/* Wide tables scroll sideways instead of breaking the page */
main table:not(.keep){max-width:100%;}
@media (max-width:900px){
  main :not(.table-scroll)>table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap;}
  .table-scroll table{display:table;}
  .appcopy{display:none;}
}

/* Tablet (641–1024): POS stays two-pane, nav becomes one scrollable row */
@media (min-width:641px) and (max-width:1024px){
  nav{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;padding-bottom:6px;}
  nav button{flex:0 0 auto;white-space:nowrap;min-height:40px;}
  #prodwrap{flex:1 1 55%;min-width:0;}
  #receipt{flex:1 1 45%;min-width:300px;max-width:440px;}
  #products{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));}
}
/* Tablet portrait: stack like phone so the bill is never squeezed */
@media (min-width:641px) and (max-width:820px) and (orientation:portrait){
  #sell{flex-direction:column;overflow-y:auto;}
  #prodwrap{flex:none;max-height:50vh;max-height:50dvh;}
  #receipt{flex:none;max-width:none;border-left:none;border-top:2px dashed var(--line);}
}

/* Phone */
@media (max-width:640px){
  main{min-height:0;}
  #sell{overflow-y:auto;-webkit-overflow-scrolling:touch;}
  #prodwrap{max-height:48vh;max-height:48dvh;}
  #products{grid-template-columns:repeat(auto-fill,minmax(105px,1fr));padding:10px;gap:8px;}
  #sbar{padding:10px 10px 0;}
  .custrow,#cartlist,#paybox,#totals{padding-left:12px;padding-right:12px;}
  #checkout{margin:10px 12px calc(14px + env(safe-area-inset-bottom));min-height:48px;}
  .citem{flex-wrap:wrap;}
  .citem .nm{flex:1 1 100%;}
  .receiptbox{max-width:100vw;width:100vw;border-radius:0;max-height:100dvh;}
  .receiptbox.wide{width:100vw;padding:12px;}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr));}
  .settings-block{max-width:none;}
  .modal-card{width:100%;}
}

/* Touch screens: bigger tap targets */
@media (hover:none) and (pointer:coarse){
  .qrow .qbtn{width:36px;height:36px;font-size:1.1rem;}
  .qrow .qn{width:46px;height:36px;}
  .qrow .qadd{min-height:36px;}
  .citem input{width:54px;min-height:36px;}
  .citem .rm{min-width:36px;min-height:36px;}
  #chips button{min-height:36px;padding:6px 14px;}
  #paybox button.pm,#otype .ot,.langtabs button,.logintabs button{min-height:44px;}
  #mmenu button{min-height:48px;}
  td button,.saleday .row button{min-height:36px;padding:6px 10px;}
}

/* Phone in landscape: keep two panes, compact header */
@media (max-height:480px) and (orientation:landscape){
  header{padding-top:4px;padding-bottom:4px;}
  header h1{font-size:.95rem;}
  #sell{flex-direction:row !important;overflow:hidden;}
  #prodwrap{flex:1 1 55% !important;max-height:none !important;}
  #receipt{flex:1 1 45% !important;max-width:none;border-left:2px dashed var(--line) !important;border-top:none !important;overflow-y:auto;}
  nav{display:flex !important;flex-wrap:nowrap;overflow-x:auto;}
  #menubtn{display:none !important;}
}

/* Laptop / desktop / large monitors / TV */
@media (min-width:1280px){
  #products{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));}
  #receipt{flex:0 0 clamp(380px,32vw,560px);}
  #prodwrap{flex:1 1 auto;min-width:0;}
}
@media (min-width:1700px){
  html{font-size:112.5%;}
  #manage,#customers,#sales,#settings,#home,#staff,#branches,#addprod,#report,#loans,#shifts,#invest,#delivery,#addbranch,#purchase,#returns,#analysis{padding:24px 32px;}
}
@media (min-width:2200px){html{font-size:125%;}}

/* Respect users who prefer less motion; keep print clean */
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important;scroll-behavior:auto !important;}}

/* BILLING: clock bar becomes a slim full-width top strip (no empty left column) */
#billing-livebar{flex:0 0 auto;margin:0;padding:6px 14px;border-radius:0;border-width:0 0 1px 0;justify-content:space-between;}
@media (min-width:641px){
  #sell.on{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(320px,1fr);grid-template-rows:auto minmax(0,1fr);}
  #billing-livebar{grid-column:1 / -1;}
  #prodwrap,#receipt{min-height:0;min-width:0;max-width:none;}
  #receipt{overflow-y:auto;}
}
@media (min-width:1280px){#sell.on{grid-template-columns:minmax(0,1fr) clamp(380px,32vw,560px);}}
@media (min-width:641px) and (max-width:820px) and (orientation:portrait){
  #sell.on{display:flex;flex-direction:column;overflow-y:auto;}
}
@media (max-width:640px){
  #billing-livebar{padding:5px 10px;font-size:.78rem;}
  #billing-livebar .bill-clock-group{width:auto;}
}