*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
:root{
  --bg:#FAFAFA;--white:#fff;--cream:#FFF9F2;--green:#2D7A3A;--gl:#E8F5E9;--gm:#4CAF50;
  --orange:#F57C00;--ol:#FFF3E0;--red:#E53935;--rl:#FFEBEE;
  --amber:#F59E0B;--al:#FFFBEB;--blue:#1976D2;--bl:#E3F2FD;
  --purple:#7B1FA2;--pl:#F3E5F5;--teal:#00796B;--tl:#E0F2F1;
  --t1:#1A1A1A;--t2:#5f5f5f;--t3:#9e9e9e;--brd:#F0EAE0;
  --sh:0 2px 10px rgba(139,115,85,.08);--sh2:0 4px 16px rgba(139,115,85,.12);
  --r:16px;--rs:12px;--rx:8px;
  --card-purple:#F0EDFF;--card-mint:#E8F7F0;--card-peach:#FFF0E6;--card-yellow:#FFF8DC;
  --card-pink:#FFE8F0;--card-blue:#E6F2FF;--card-lav:#F5E6FF;
}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Thonburi,sans-serif;background:var(--bg);color:var(--t1);min-height:100vh;padding-bottom:84px;overflow-x:hidden;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;overscroll-behavior-y:contain}
/* Allow selection on inputs */
input,textarea,.log-nm,.log-det{-webkit-user-select:auto;user-select:auto}
/* NAV */
.bnav{position:fixed;bottom:0;left:0;right:0;background:var(--white);border-top:1px solid var(--brd);display:flex;z-index:100;padding:6px 0 calc(6px + env(safe-area-inset-bottom));box-shadow:0 -4px 20px rgba(0,0,0,.06)}
.nbtn{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;background:none;border:none;cursor:pointer;padding:4px 0;position:relative}
.nbtn-ico{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:19px;transition:all .2s;background:transparent}
.nbtn.on .nbtn-ico{background:var(--gl)}
.nbtn-lbl{font-size:9px;font-weight:600;color:var(--t3);transition:color .2s}
.nbtn.on .nbtn-lbl{color:var(--green)}
.ndot{position:absolute;top:2px;right:calc(50% - 24px);width:8px;height:8px;background:var(--red);border-radius:50%;border:2px solid var(--white);display:none}
.ndot.on{display:block}
/* HEADER */
.hdr{background:var(--white);padding:14px 16px 10px;box-shadow:0 2px 8px rgba(0,0,0,.04);position:sticky;top:0;z-index:50}
.hdr-r{display:flex;align-items:center;gap:10px}
.logo-wrap{display:flex;align-items:center;gap:8px;flex:1}
.logo-ico{font-size:26px}
.logo-t{display:flex;flex-direction:column}
.logo-th{font-size:15px;font-weight:800;color:var(--green);line-height:1.1}
.logo-en{font-size:10px;color:var(--t3);font-weight:500;letter-spacing:.5px}
.hbtn{width:36px;height:36px;border-radius:10px;border:none;background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:17px;cursor:pointer;position:relative}
.hdot{position:absolute;top:4px;right:4px;width:7px;height:7px;background:var(--red);border-radius:50%;border:1.5px solid var(--white);display:none}
.hdot.on{display:block}
.avatar{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--green),var(--teal));display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;color:var(--white)}
.hdr-sub{display:flex;align-items:center;gap:8px;margin-top:8px}
.loc-pill{display:flex;align-items:center;gap:4px;background:var(--gl);border-radius:20px;padding:4px 12px;font-size:12px;font-weight:700;color:var(--green)}
.date-t{font-size:12px;color:var(--t3)}
/* PAGES */
.page{display:none;padding:14px}.page.on{display:block}
/* CARDS */
.card{background:var(--white);border-radius:var(--r);box-shadow:var(--sh)}
.card-hd{padding:12px 14px;border-bottom:1px solid var(--brd);display:flex;align-items:center;justify-content:space-between}
.card-title{font-size:13px;font-weight:700}
.card-link{font-size:12px;color:var(--green);font-weight:600;cursor:pointer}
.card-body{padding:4px 0}
/* STOCK SUMMARY */
.sum-card{background:linear-gradient(135deg,#1B5E20,#2D7A3A);border-radius:var(--r);padding:16px;margin-bottom:14px;position:relative;overflow:hidden}
.sc-deco{position:absolute;right:-20px;top:-20px;width:90px;height:90px;border-radius:50%;background:rgba(255,255,255,.07)}
.sc-metrics{display:flex;gap:10px;margin-top:12px}
.sc-m{flex:1;background:rgba(255,255,255,.12);border-radius:10px;padding:10px}
.sc-ml{font-size:10px;color:rgba(255,255,255,.65);margin-bottom:3px;font-weight:500}
.sc-mv{font-size:17px;font-weight:800;color:var(--white)}
.sc-mv.org{color:#FFB74D}.sc-mv.red{color:#EF9A9A}
/* ALERT STRIP */
.al-strip{background:var(--white);border-radius:var(--r);padding:12px 14px;margin-bottom:14px;box-shadow:var(--sh)}
.al-hd{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.al-ico{width:30px;height:30px;border-radius:8px;background:var(--ol);display:flex;align-items:center;justify-content:center;font-size:14px}
.al-title{font-size:13px;font-weight:700;flex:1}
.al-cnt{font-size:11px;color:var(--white);background:var(--red);border-radius:20px;padding:2px 7px;font-weight:700}
.al-row{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--brd)}
.al-row:last-child{border-bottom:none}
.al-emt{font-size:20px;flex-shrink:0}
.al-name{flex:1;font-size:13px;font-weight:600}
.al-sub{font-size:11px;color:var(--t3);margin-top:1px}
.al-val{font-size:13px;font-weight:800;color:var(--red);flex-shrink:0}
.pbar{height:3px;background:var(--brd);border-radius:2px;margin-top:4px;overflow:hidden}
.pbar-fill{height:100%;border-radius:2px;background:var(--red)}
.pbar-fill.warn{background:var(--amber)}
/* STAFF GRID */
.sg{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.sc2{background:var(--white);border-radius:var(--r);padding:14px;box-shadow:var(--sh);cursor:pointer;transition:transform .15s;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.sc2:active{transform:scale(.97)}
.savatar{width:58px;height:58px;border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:28px}
.sa-fa{background:linear-gradient(135deg,#FFB300,#FF8F00)}
.sa-em{background:linear-gradient(135deg,#43A047,#2E7D32)}
.sa-ud{background:linear-gradient(135deg,#E53935,#B71C1C)}
.sa-som{background:linear-gradient(135deg,#8E24AA,#6A1B9A)}
.sa-kondo{background:linear-gradient(135deg,#0277BD,#01579B)}
.sa-pan{background:linear-gradient(135deg,#00796B,#004D40)}
.sname{font-size:14px;font-weight:800}
.sname-my{font-size:10px;color:var(--t3);margin-top:-4px}
/* ITEM ROW */
.irow{background:var(--white);border-radius:var(--rs);padding:11px 13px;margin-bottom:7px;display:flex;align-items:center;gap:10px;box-shadow:0 1px 5px rgba(0,0,0,.05);cursor:pointer;transition:transform .1s}
.irow:active{transform:scale(.98)}
.idot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.dok{background:#4CAF50}.dwarn{background:#FFC107}.dlow{background:#F44336}.dna{background:#BDBDBD}
.iname-w{flex:1;min-width:0}
.ith{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.imy{font-size:11px;color:var(--t3);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ival-w{text-align:right;flex-shrink:0}
.inum{font-size:15px;font-weight:800}
.nok{color:#2E7D32}.nwarn{color:#F57F17}.nlow{color:#C62828}.nna{color:var(--t3)}
.iunit{font-size:11px;color:var(--t3)}
/* TASK CARDS */
.tc{background:var(--white);border-radius:var(--r);padding:16px;box-shadow:var(--sh);cursor:pointer;display:flex;align-items:center;gap:14px;transition:transform .15s;margin-bottom:10px}
.tc:active{transform:scale(.98)}
.tc-ico{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:26px;flex-shrink:0}
.ti-g{background:linear-gradient(135deg,#E8F5E9,#C8E6C9)}
.ti-b{background:linear-gradient(135deg,#E3F2FD,#BBDEFB)}
.ti-o{background:linear-gradient(135deg,#FFF3E0,#FFE0B2)}
.ti-p{background:linear-gradient(135deg,#F3E5F5,#E1BEE7)}
.ti-t{background:linear-gradient(135deg,#E0F2F1,#B2DFDB)}
.ti-r{background:linear-gradient(135deg,#FFEBEE,#FFCDD2)}
.tc-info{flex:1}
.tc-title{font-size:15px;font-weight:700}
.tc-sub{font-size:12px;color:var(--t3);margin-top:3px}
/* SECTION */
.sec-t{font-size:13px;font-weight:700;color:var(--t2);margin-bottom:10px;display:flex;align-items:center;justify-content:space-between}
.sec-lnk{font-size:12px;color:var(--green);font-weight:600;cursor:pointer}
/* CAT */
.cat-hd{font-size:11px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.7px;padding:12px 0 5px;border-top:1px solid var(--brd)}
.cat-hd:first-child{border-top:none;padding-top:0}
.cat-my{display:block;font-size:10px;color:#c4b5a0;font-weight:400;letter-spacing:0;margin-top:1px}
/* BACK ROW */
.brow-nav{display:flex;align-items:center;gap:8px;margin-bottom:14px;cursor:pointer}
.brow-arr{width:34px;height:34px;border-radius:10px;background:var(--white);box-shadow:var(--sh);display:flex;align-items:center;justify-content:center;font-size:17px}
.brow-title{font-size:15px;font-weight:700}
/* CHIP */
.chip{display:inline-flex;align-items:center;gap:3px;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:700}
.ch-red{background:var(--rl);color:var(--red)}
.ch-amb{background:var(--al);color:var(--amber)}
.ch-grn{background:var(--gl);color:var(--green)}
.ch-blue{background:var(--bl);color:var(--blue)}
/* STAT ROW */
.stat-row{display:flex;gap:9px;margin-bottom:12px}
.stat-c{flex:1;background:var(--white);border-radius:var(--rs);padding:11px;box-shadow:0 1px 5px rgba(0,0,0,.06);text-align:center}
.stat-lb{font-size:10px;color:var(--t3);font-weight:500;margin-bottom:3px}
.stat-v{font-size:19px;font-weight:800}
.sv-g{color:var(--green)}.sv-r{color:var(--red)}.sv-a{color:var(--amber)}.sv-b{color:var(--blue)}.sv-p{color:var(--purple)}
/* SHEET */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:200;display:none}
.overlay.on{display:block}
.sheet{position:fixed;bottom:0;left:0;right:0;background:var(--white);border-radius:24px 24px 0 0;z-index:210;display:none;max-height:92vh;overflow-y:auto;padding-bottom:env(safe-area-inset-bottom)}
.sheet.on{display:block}
.si{padding:16px 20px 32px}
.handle{width:40px;height:4px;background:var(--brd);border-radius:2px;margin:0 auto 16px}
.sh-th{font-size:19px;font-weight:800;margin-bottom:2px}
.sh-my{font-size:12px;color:var(--t3);margin-bottom:4px}
.sh-cur{display:inline-flex;align-items:center;gap:5px;background:var(--bg);border-radius:20px;padding:4px 11px;font-size:13px;font-weight:600;color:var(--t2);margin-bottom:14px}
.mtabs{display:flex;gap:6px;margin-bottom:16px;background:var(--bg);border-radius:12px;padding:4px}
.mtab{flex:1;padding:8px;border-radius:10px;border:none;background:transparent;color:var(--t3);font-size:12px;font-weight:600;cursor:pointer;transition:all .2s;text-align:center}
.mtab.on{background:var(--white);color:var(--green);box-shadow:0 2px 8px rgba(0,0,0,.08)}
.mpanel{display:none}.mpanel.on{display:block}
.fl{font-size:11px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:7px;margin-top:14px}
.fl:first-of-type{margin-top:0}
.fnum{width:100%;padding:13px 15px;border:2px solid var(--brd);border-radius:var(--rs);background:var(--bg);font-size:23px;font-weight:800;outline:none;text-align:right;color:var(--t1);-webkit-appearance:none;transition:border-color .2s}
.fnum:focus{border-color:var(--green);background:var(--white)}
.ftxt{width:100%;padding:11px 13px;border:2px solid var(--brd);border-radius:var(--rs);background:var(--bg);font-size:14px;outline:none;color:var(--t1);transition:border-color .2s}
.ftxt:focus{border-color:var(--green);background:var(--white)}
.fsel{width:100%;padding:11px 13px;border:2px solid var(--brd);border-radius:var(--rs);background:var(--bg);font-size:14px;outline:none;color:var(--t1)}
.f2{display:flex;gap:10px}.f2>div{flex:1}
.cost-hint{background:var(--gl);border-radius:var(--rx);padding:9px 11px;margin-top:9px;font-size:13px;color:var(--green);font-weight:600;display:none}
.btnrow{display:flex;gap:10px;margin-top:18px}
.btn{flex:1;padding:14px;border-radius:var(--rs);border:2px solid var(--brd);background:var(--bg);font-size:15px;font-weight:700;cursor:pointer;color:var(--t1);transition:all .15s}
.btn:active{transform:scale(.97)}
.btnp{background:var(--green);color:var(--white);border-color:var(--green)}
.btn-o{background:var(--orange);color:var(--white);border-color:var(--orange)}
.btn-r{background:var(--red);color:var(--white);border-color:var(--red)}
.btn-b{background:var(--blue);color:var(--white);border-color:var(--blue)}
/* SEARCH */
.srch-wrap{position:relative;margin-bottom:12px}
.srch{width:100%;padding:10px 13px 10px 38px;border:2px solid var(--brd);border-radius:var(--rs);background:var(--white);font-size:14px;outline:none}
.srch:focus{border-color:var(--green)}
.srch-ico{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--t3);font-size:15px;pointer-events:none}
/* DATA/INFO */
.folder-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.folder-card{background:var(--white);border-radius:var(--r);padding:16px;box-shadow:var(--sh);cursor:pointer;transition:transform .15s;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.folder-card:active{transform:scale(.97)}
.folder-ico{width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:26px}
.fi-g{background:linear-gradient(135deg,#E8F5E9,#A5D6A7)}
.fi-b{background:linear-gradient(135deg,#E3F2FD,#90CAF9)}
.fi-o{background:linear-gradient(135deg,#FFF3E0,#FFCC80)}
.fi-p{background:linear-gradient(135deg,#F3E5F5,#CE93D8)}
.fi-t{background:linear-gradient(135deg,#E0F2F1,#80CBC4)}
.fi-r{background:linear-gradient(135deg,#FFEBEE,#EF9A9A)}
.folder-name{font-size:13px;font-weight:700}
.folder-sub{font-size:11px;color:var(--t3)}
/* DELIVERY */
.del-menu-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--brd)}
.del-menu-row:last-child{border-bottom:none}
.del-menu-name{flex:1;font-size:13px;font-weight:600}
.del-menu-unit{font-size:11px;color:var(--t3);min-width:36px;text-align:center}
.del-qty-in{width:70px;padding:6px 8px;border:2px solid var(--brd);border-radius:var(--rx);background:var(--bg);font-size:16px;font-weight:700;text-align:center;outline:none;-webkit-appearance:none}
.del-qty-in:focus{border-color:var(--green);background:var(--white)}
/* ADMIN */
.pin-screen{display:flex;flex-direction:column;align-items:center;padding:36px 20px}
.pin-ico{font-size:56px;margin-bottom:14px}
.pin-title{font-size:19px;font-weight:800;margin-bottom:5px}
.pin-sub{font-size:13px;color:var(--t3);margin-bottom:28px;text-align:center}
.pin-dots{display:flex;gap:14px;margin-bottom:28px}
.pin-dot{width:15px;height:15px;border-radius:50%;border:2px solid var(--brd);background:transparent;transition:all .2s}
.pin-dot.filled{background:var(--green);border-color:var(--green)}
.pin-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:240px}
.pin-key{height:60px;border-radius:var(--rs);border:2px solid var(--brd);background:var(--white);font-size:22px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.06);transition:all .15s;color:var(--t1)}
.pin-key:active{transform:scale(.93);background:var(--bg)}
.pin-key.del{font-size:17px;color:var(--red)}
.pin-err{color:var(--red);font-size:13px;font-weight:600;margin-top:-16px;margin-bottom:14px;display:none}
/* ADMIN ICONS */
.admin-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.admin-card{background:var(--white);border-radius:var(--r);padding:16px;box-shadow:var(--sh);cursor:pointer;transition:transform .15s;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.admin-card:active{transform:scale(.97)}
.admin-ico{width:54px;height:54px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:26px}
.admin-name{font-size:13px;font-weight:700}
/* TOGGLE */
.tgl-row{display:flex;align-items:center;gap:8px;padding:9px 0;border-bottom:1px solid var(--brd)}
.tgl-row:last-child{border-bottom:none}
.tgl-name{flex:1;font-size:13px;font-weight:600}
.tgl-unit{font-size:11px;color:var(--t3);min-width:32px;text-align:center}
.thr-in{width:58px;padding:4px 7px;border:2px solid var(--brd);border-radius:var(--rx);background:var(--bg);font-size:13px;text-align:center;outline:none;-webkit-appearance:none}
.thr-in:focus{border-color:var(--green)}
.tgl-sw{position:relative;width:42px;height:22px;flex-shrink:0}
.tgl-sw input{opacity:0;width:0;height:0}
.tgl-slider{position:absolute;inset:0;background:#ccc;border-radius:11px;cursor:pointer;transition:.3s}
.tgl-slider:before{content:'';position:absolute;height:16px;width:16px;left:3px;bottom:3px;background:var(--white);border-radius:50%;transition:.3s;box-shadow:0 1px 4px rgba(0,0,0,.2)}
input:checked+.tgl-slider{background:var(--green)}
input:checked+.tgl-slider:before{transform:translateX(20px)}
/* MANAGE LIST */
.manage-row{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--brd)}
.manage-row:last-child{border-bottom:none}
.manage-name{flex:1;font-size:13px;font-weight:600}
.manage-unit{font-size:11px;color:var(--t3);min-width:36px;text-align:center}
.manage-del{background:none;border:none;color:var(--brd);font-size:20px;cursor:pointer;padding:0 4px;line-height:1}
.manage-del:hover{color:var(--red)}
.manage-edit{background:none;border:none;color:var(--t3);font-size:16px;cursor:pointer;padding:0 4px;line-height:1}
/* ADD FORM */
.add-form{background:var(--white);border-radius:var(--r);border:1px solid var(--brd);padding:14px;margin-top:10px}
.add-in{width:100%;padding:9px 12px;border:2px solid var(--brd);border-radius:var(--rx);background:var(--bg);font-size:14px;margin-bottom:8px;outline:none;color:var(--t1)}
.add-in:focus{border-color:var(--green);background:var(--white)}
.add-row{display:flex;gap:8px;margin-bottom:8px}
.add-row .add-in{margin-bottom:0}
/* PREP */
.prep-row{background:var(--white);border-radius:var(--rs);padding:11px 13px;margin-bottom:7px;display:flex;align-items:center;gap:10px;box-shadow:0 1px 5px rgba(0,0,0,.05);cursor:pointer;transition:transform .1s}
.prep-row:active{transform:scale(.98)}
.prep-cols{display:flex;gap:8px;flex-shrink:0}
.prep-col{text-align:center;min-width:38px}
.prep-col-lb{font-size:9px;color:var(--t3);text-transform:uppercase}
.prep-col-v{font-size:14px;font-weight:800}
/* SALES/DELIVERY SECTION */
.brand-row{background:var(--white);border-radius:var(--r);padding:14px 16px;box-shadow:var(--sh);display:flex;align-items:center;gap:12px;cursor:pointer;transition:transform .15s;margin-bottom:10px}
.brand-row:active{transform:scale(.98)}
.brand-ico2{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
.bi-g{background:linear-gradient(135deg,var(--gl),#C8E6C9)}
.bi-p{background:linear-gradient(135deg,var(--pl),#CE93D8)}
.bi-t{background:linear-gradient(135deg,var(--tl),#80CBC4)}
.brand-info2{flex:1}
.brand-nm{font-size:14px;font-weight:700}
.brand-sub2{font-size:11px;color:var(--t3);margin-top:2px}
/* DATA MONTH */
.mcard{background:var(--white);border-radius:var(--r);padding:13px 15px;margin-bottom:9px;box-shadow:var(--sh);display:flex;align-items:center;gap:11px;cursor:pointer;transition:transform .15s}
.mcard:active{transform:scale(.98)}
.mcard-ico{width:42px;height:42px;border-radius:11px;background:var(--bl);display:flex;align-items:center;justify-content:center;font-size:19px;flex-shrink:0}
.mcard-info{flex:1}
.mcard-name{font-size:14px;font-weight:700}
.mcard-sub{font-size:11px;color:var(--t3);margin-top:2px}
/* LOG ROW */
.log-row{background:var(--white);border-radius:var(--rx);padding:9px 11px;margin-bottom:5px;display:flex;gap:9px;box-shadow:0 1px 4px rgba(0,0,0,.04)}
.log-ico{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0}
.li-c{background:#E3F2FD}.li-b{background:#E8F5E9}.li-w{background:#FFEBEE}.li-p{background:#FFF8E1}.li-s{background:#F3E5F5}
.log-info{flex:1;min-width:0}
.log-nm{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.log-det{font-size:11px;color:var(--t3);margin-top:1px}
.log-val{font-size:13px;font-weight:700;flex-shrink:0}
.lv-b{color:var(--green)}.lv-w{color:var(--red)}.lv-s{color:var(--purple)}
/* DATA FILTER */
.df{display:flex;gap:7px;margin-bottom:12px;overflow-x:auto;scrollbar-width:none}
.df::-webkit-scrollbar{display:none}
.dfbtn{flex-shrink:0;padding:5px 13px;border-radius:20px;border:2px solid var(--brd);background:var(--white);color:var(--t2);font-size:12px;font-weight:600;cursor:pointer}
.dfbtn.on{background:var(--green);color:var(--white);border-color:var(--green)}
/* MISC */
.empty{text-align:center;padding:42px 20px;color:var(--t3);font-size:14px;line-height:1.8}
.exp-btn{width:100%;padding:12px;border:2px dashed var(--brd);border-radius:var(--rs);background:transparent;color:var(--t3);font-size:13px;font-weight:600;cursor:pointer;margin-top:9px}
.exp-btn:hover{background:var(--bg)}
.toast{position:fixed;top:14px;left:50%;transform:translateX(-50%) translateY(-80px);background:#1A1A1A;color:var(--white);padding:9px 20px;border-radius:22px;font-size:13px;font-weight:600;z-index:999;transition:transform .3s cubic-bezier(.34,1.56,.64,1);white-space:nowrap;pointer-events:none;box-shadow:var(--sh2)}
.toast.on{transform:translateX(-50%) translateY(0)}
.info-box{border-radius:var(--rx);padding:9px 11px;font-size:12px;font-weight:600;margin-bottom:12px}
.ib-amber{background:var(--al);color:var(--orange)}
.ib-blue{background:var(--bl);color:var(--blue)}
.ib-green{background:var(--gl);color:var(--green)}

/* === HOME MOCKUP STYLES === */
.sec-h{font-size:15px;font-weight:700;color:var(--t1);margin:18px 0 10px;letter-spacing:-.2px}
.sec-h:first-child{margin-top:0}
.sec-h-row{display:flex;align-items:center;justify-content:space-between}
.km-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:10px;margin-bottom:8px}
.km-card{border-radius:16px;padding:12px 14px;position:relative;overflow:hidden}
.km-purple{background:linear-gradient(135deg,#E9E7FF,#DDE0FF);min-height:120px}
.km-yellow{background:linear-gradient(135deg,#FFF5C2,#FFE896);min-height:56px;position:relative}
.km-peach{background:linear-gradient(135deg,#FFE5D4,#FFD4B8);min-height:56px;position:relative}
.km-side{display:flex;flex-direction:column;gap:10px}
.km-label{font-size:11px;font-weight:600;color:#5A5578;margin-bottom:6px;line-height:1.3}
.km-card.km-yellow .km-label{color:#8B6F00}
.km-card.km-peach .km-label{color:#A65A1A}
.km-chart{width:100%;height:46px;display:block}
.km-axis{display:flex;justify-content:space-between;font-size:9px;color:#6B6B8C;margin-top:4px}
.km-val{font-size:22px;font-weight:800;color:#8B6F00;line-height:1}
.km-val-small{font-size:18px;font-weight:800;color:#A65A1A;line-height:1;margin-top:4px}
.km-trophy{position:absolute;right:10px;top:10px;font-size:22px}
.km-ytd{position:absolute;right:12px;top:12px;font-size:10px;font-weight:700;background:rgba(255,255,255,.5);padding:3px 7px;border-radius:10px;color:#A65A1A}
.qa-wrap{display:grid;grid-template-columns:1.2fr 1fr;gap:10px;margin-bottom:10px}
.qa-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.qa-card{background:var(--white);border-radius:14px;padding:10px;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;box-shadow:0 1px 6px rgba(139,115,85,.06);transition:transform .1s}
.qa-card:active{transform:scale(.96)}
.qa-ico{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:22px;position:relative}
.qa-lav{background:linear-gradient(135deg,#E8E0FF,#D4C8FF)}
.qa-check{position:absolute;right:-4px;bottom:-4px;background:#4CAF50;color:white;font-size:10px;width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid white}
.qa-trans{position:absolute;right:-4px;bottom:-4px;background:white;font-size:8px;padding:2px 4px;border-radius:6px;color:#7C83FD;font-weight:700;border:1px solid #D4C8FF}
.qa-label{font-size:11px;font-weight:600;text-align:center;line-height:1.2;color:var(--t1)}
.qa-sub{font-size:10px;font-weight:500;color:var(--t3)}
.qa-delivery{background:linear-gradient(135deg,#EDE5FF,#DDCFFF);border-radius:14px;padding:12px;cursor:pointer;display:flex;flex-direction:column;gap:8px;transition:transform .1s}
.qa-delivery:active{transform:scale(.97)}
.qa-del-head{display:flex;align-items:flex-start;justify-content:space-between}
.qa-del-title{font-size:12px;font-weight:700;color:#5A4890;line-height:1.3}
.qa-del-fields{display:flex;flex-direction:column;gap:5px}
.qa-del-field{background:rgba(255,255,255,.7);border-radius:6px;padding:6px 10px;font-size:11px;font-weight:500;color:#6B5B8E}
.inv-card{background:var(--white);border-radius:16px;padding:14px;box-shadow:var(--sh);margin-bottom:14px;position:relative}
.inv-title{font-size:13px;font-weight:700;color:var(--t1);margin-bottom:12px;text-align:center}
.inv-scroll{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;padding:4px 2px}
.inv-scroll::-webkit-scrollbar{display:none}
.inv-item{flex-shrink:0;text-align:center;min-width:60px}
.inv-emoji{font-size:32px;line-height:1;margin-bottom:4px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.1))}
.inv-name{font-size:11px;font-weight:600;color:var(--t2);margin-bottom:2px}
.inv-qty{font-size:13px;font-weight:800;color:var(--t1)}
.inv-kg-note{position:absolute;left:16px;bottom:10px;font-size:10px;color:var(--t3);font-weight:500}
.alert-card-new{background:linear-gradient(135deg,#FFE5E5,#FFD1D1);border-radius:16px;padding:12px 14px;margin-bottom:14px}
.alert-head-new{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.alert-title-new{font-size:13px;font-weight:700;flex:1;color:#8B1A1A}
.alert-count-new{font-size:11px;color:white;background:var(--red);border-radius:20px;padding:2px 8px;font-weight:700}
.alert-link-new{font-size:11px;color:#8B1A1A;font-weight:700;cursor:pointer;text-decoration:underline}
.alert-items-scroll{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.alert-items-scroll::-webkit-scrollbar{display:none}
.alert-mini{flex-shrink:0;background:rgba(255,255,255,.85);border-radius:12px;padding:8px;min-width:80px;text-align:center;cursor:pointer}
.alert-mini-bg{font-size:26px;margin-bottom:2px}
.alert-mini-name{font-size:10px;font-weight:600;color:var(--t1);margin-bottom:3px;line-height:1.1}
.alert-mini-badge{font-size:10px;font-weight:700;color:var(--red);background:white;border-radius:8px;padding:2px 6px;display:inline-block}
.team-grid-new{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:16px}
.team-card-new{background:var(--white);border-radius:14px;padding:10px 8px;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;box-shadow:0 1px 6px rgba(139,115,85,.06);transition:transform .1s;min-height:90px}
.team-card-new:active{transform:scale(.95)}
.team-initial{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;font-size:15px;font-weight:800}
.team-name-new{font-size:11px;font-weight:700;text-align:center;line-height:1.1}
.team-role-new{font-size:9px;font-weight:500;text-align:center;line-height:1.2}
@keyframes slideUp{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}

/* ── DISPLAY / DASHBOARD ── */
.disp-tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;margin-bottom:14px;background:var(--bg);border-radius:12px;padding:4px}
.disp-tabs::-webkit-scrollbar{display:none}
.dtab{flex-shrink:0;padding:8px 14px;border-radius:10px;border:none;background:transparent;color:var(--t3);font-size:12px;font-weight:600;cursor:pointer;transition:all .2s;white-space:nowrap}
.dtab.on{background:var(--white);color:var(--green);box-shadow:0 2px 8px rgba(0,0,0,.08)}
.disp-card{background:var(--white);border-radius:var(--r);padding:14px;box-shadow:var(--sh);margin-bottom:10px}
.disp-card-title{font-size:13px;font-weight:700;color:var(--t2);margin-bottom:10px}
.disp-row{display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-bottom:1px solid var(--brd);font-size:13px}
.disp-row:last-child{border-bottom:none}
.disp-val{font-size:14px;font-weight:700;color:var(--t1)}

/* ── HOME INV RANGE ── */
.inv-range{font-size:9px;color:var(--t3);margin-top:1px}

/* ── SALES CHART BAR ── */
.sales-hist-row{cursor:pointer}
.sales-hist-row:active{background:var(--bg)}

/* ── RECIPE ── */
.ing-row input{-webkit-user-select:auto;user-select:auto}

/* SEARCH BAR */
.global-srch-wrap{position:relative;margin-bottom:14px}
.global-srch{width:100%;padding:11px 14px 11px 42px;border:2px solid var(--brd);border-radius:var(--rs);background:var(--white);font-size:14px;outline:none;box-shadow:var(--sh);transition:border-color .2s}
.global-srch:focus{border-color:var(--green)}
.global-srch-ico{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:17px;pointer-events:none}
.srch-results{background:var(--white);border-radius:var(--rs);box-shadow:var(--sh);overflow:hidden;margin-bottom:12px}
.srch-result-row{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--brd);cursor:pointer;transition:background .1s}
.srch-result-row:last-child{border-bottom:none}
.srch-result-row:active{background:var(--bg)}
.srch-staff-badge{font-size:10px;padding:2px 7px;border-radius:10px;font-weight:700;flex-shrink:0}
/* IMAGE UPLOAD */
.img-upload-box{width:100%;aspect-ratio:1;border:2px dashed var(--brd);border-radius:var(--r);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;cursor:pointer;background:var(--bg);transition:all .2s;position:relative;overflow:hidden}
.img-upload-box:hover{border-color:var(--green);background:var(--gl)}
.img-upload-box img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;border-radius:calc(var(--r) - 2px)}
.img-upload-btn{position:absolute;bottom:8px;right:8px;background:rgba(0,0,0,.5);color:white;border:none;border-radius:8px;padding:5px 10px;font-size:12px;cursor:pointer;font-weight:600;backdrop-filter:blur(4px)}
/* COST FORM */
.cost-form-card{background:var(--white);border-radius:var(--r);padding:14px;box-shadow:var(--sh);margin-bottom:10px}
.cost-input-row{display:flex;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid var(--brd)}
.cost-input-row:last-child{border-bottom:none}
.cost-item-name{flex:1;font-size:13px;font-weight:600;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cost-price-in{width:80px;padding:6px 8px;border:2px solid var(--brd);border-radius:var(--rx);background:var(--bg);font-size:14px;font-weight:700;text-align:right;outline:none;-webkit-appearance:none}
.cost-price-in:focus{border-color:var(--green);background:var(--white)}
.cost-unit-lbl{font-size:10px;color:var(--t3);min-width:28px;text-align:left}
/* PREP MASTER */
.prep-master-card{background:var(--white);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden;margin-bottom:14px}
.prep-master-hd{padding:12px 14px;background:linear-gradient(135deg,#E8F5E9,#C8E6C9);display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--brd)}
.prep-master-title{font-size:14px;font-weight:700;color:#1B5E20;flex:1}
.prep-mrow{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--brd)}
.prep-mrow:last-child{border-bottom:none}
.prep-mname{flex:1;font-size:13px;font-weight:600}
.prep-munit{font-size:11px;color:var(--t3);min-width:32px;text-align:center}
.prep-m-in{width:70px;padding:5px 8px;border:2px solid var(--brd);border-radius:var(--rx);background:var(--bg);font-size:15px;font-weight:700;text-align:right;outline:none;-webkit-appearance:none}
.prep-m-in:focus{border-color:var(--green);background:var(--white)}
.prep-m-plan{color:var(--blue)}.prep-m-add{color:var(--green)}.prep-m-rem{color:var(--t1)}.prep-m-eod{color:var(--purple);font-weight:800}
/* UNIT EDIT */
.unit-in{width:70px;padding:5px 8px;border:2px solid transparent;border-radius:var(--rx);background:transparent;font-size:12px;color:var(--t3);text-align:center;outline:none;cursor:pointer}
.unit-in:focus{border-color:var(--green);background:var(--white);color:var(--t1)}

.cat-mgr{background:var(--white);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden;margin-bottom:8px}
.cat-mgr-hd{padding:11px 14px;display:flex;align-items:center;gap:8px;cursor:pointer;background:var(--white)}
.cat-mgr-hd:active{background:var(--bg)}
.cat-mgr-title{font-size:14px;font-weight:700;color:var(--t1);flex:1}
.cat-mgr-count{font-size:10px;padding:2px 8px;border-radius:20px;font-weight:700;background:var(--bg);color:var(--t2)}
.cat-mgr-arr{font-size:13px;color:var(--t3);transition:transform .2s}
.cat-mgr-arr.open{transform:rotate(90deg)}
.cat-mgr-body{border-top:1px solid var(--brd)}
.cat-row{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--brd);cursor:pointer}
.cat-row:last-child{border-bottom:none}
.cat-row:active{background:var(--bg)}
.cat-row-img{width:36px;height:36px;border-radius:8px;object-fit:cover;flex-shrink:0}
.cat-row-ico{width:36px;height:36px;border-radius:8px;background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.cat-row-name{flex:1;font-size:13px;font-weight:600}
.cat-row-sub{font-size:11px;color:var(--t3);margin-top:1px}
.cat-row-num{font-size:14px;font-weight:800;text-align:right}
.cat-row-unit{font-size:10px;color:var(--t3);text-align:right}
.staff-chip{display:inline-flex;align-items:center;padding:5px 11px;border-radius:20px;font-size:12px;font-weight:700;margin:3px;cursor:pointer;border:2px solid transparent;transition:all .15s}
.cat-sel-menu{background:var(--white);border:1.5px solid var(--green);border-radius:var(--rs);z-index:100;box-shadow:var(--sh2);max-height:220px;overflow-y:auto;margin-top:4px}
.cat-sel-opt{padding:10px 13px;font-size:13px;font-weight:600;cursor:pointer;border-bottom:1px solid var(--brd)}
.cat-sel-opt:last-child{border-bottom:none}
.cat-sel-opt:active{background:var(--gl)}