@import url('https://fonts.googleapis.com/css2?family=Baloo+Bhaijaan+2:wght@400;500;600;700;800&display=swap');
:root{--teal:#0E4F4C;--teal2:#14615D;--cream:#F6F1E7;--orange:#E8762B;--orange-t:#F7B27A;--dark:#15302E;--grey:#4F5D5B;--line:#E4DCCB;--rust:#B9551A;--ok:#145C34}
*{box-sizing:border-box}
body{margin:0;background:var(--cream);color:var(--dark);font-family:'Baloo Bhaijaan 2',system-ui,sans-serif;font-size:16px;line-height:1.5}
.wrap{max-width:520px;margin:0 auto;padding:16px}
.wide{max-width:960px}
.hero{background:var(--teal);color:var(--cream);padding:28px 20px 24px;border-radius:0 0 28px 28px}
.brand{display:flex;align-items:center;gap:10px;font-family:'Baloo Bhaijaan 2',sans-serif;font-size:28px;line-height:1}
.dot{width:34px;height:34px;border-radius:50%;background:var(--orange);display:inline-flex;align-items:center;justify-content:center;flex:none}
.dot::after{content:"";width:12px;height:12px;border-radius:50%;background:var(--cream)}
h1,h2,.display{font-family:'Baloo Bhaijaan 2',sans-serif;font-weight:800;margin:0}
h1{font-size:36px;line-height:1.15}
h2{font-size:24px;color:var(--teal)}
.muted{color:var(--grey);font-size:14px}
.hero .muted{color:#D6EAE7}
.card{background:#fff;border:1.5px solid var(--line);border-radius:18px;padding:16px;margin:14px 0}
.offer{background:#FDEBDD;border-color:#F6C9A3}
.offer b{color:var(--rust)}
label{display:block;font-weight:700;font-size:14px;margin:12px 0 6px;color:var(--grey)}
input,select,textarea{width:100%;height:48px;border:1.5px solid #CFC5B0;border-radius:12px;padding:0 12px;font:inherit;font-size:17px;background:#fff;color:var(--dark)}
textarea{height:80px;padding:10px 12px}
input:focus,select:focus,textarea:focus{outline:3px solid var(--orange-t);border-color:var(--teal)}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:52px;border:0;border-radius:14px;background:var(--teal);color:#fff;font:800 17px 'Baloo Bhaijaan 2',sans-serif;text-decoration:none;cursor:pointer;padding:0 16px}
.btn.orange{background:var(--orange);color:var(--dark)}
.btn.ghost{background:#fff;color:var(--teal);border:2px solid var(--teal)}
.btn.small{min-height:44px;font-size:15px;width:auto}
.btn:disabled{opacity:.55;cursor:wait}
.row{display:flex;gap:10px}
.row>*{flex:1}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.stat{background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:10px 12px}
.stat b{display:block;font-family:'Baloo Bhaijaan 2',sans-serif;font-size:28px;font-weight:800;line-height:1.2}
.big{font-family:'Baloo Bhaijaan 2',sans-serif;font-size:56px;line-height:1.1}
.pill{display:inline-block;border-radius:999px;padding:2px 10px;font-size:13px;font-weight:700;background:#DDEFEC;color:#0A3735}
.pill.wait{background:#FDEBDD;color:var(--rust)}
.pill.no{background:#ECE8E1;color:#3D4341}
.msg{border-radius:12px;padding:12px 14px;margin:12px 0;font-weight:600}
.msg.err{background:#FBE3DC;color:#8A2A0A}
.msg.ok{background:#DDEFEC;color:#0A3735}
.list>div{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 0;border-bottom:1px solid #EFE6D3}
.list>div:last-child{border-bottom:0}
.hidden{display:none!important}
.foot{text-align:center;color:var(--grey);font-size:13px;margin:24px 0}
a{color:var(--teal)}
code{direction:ltr;unicode-bidi:embed;background:#F4EDDE;border-radius:6px;padding:1px 6px}
.ltr{direction:ltr;unicode-bidi:embed}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:right;padding:8px;border-bottom:1px solid #EFE6D3;white-space:nowrap}
.scroll{overflow-x:auto}
/* customer page v2 */
.shophero{position:relative;overflow:hidden;background:var(--teal);color:var(--cream);padding:22px 20px 70px;border-radius:0 0 32px 32px}
.shophero::before{content:"";position:absolute;width:220px;height:220px;border-radius:50%;background:var(--teal2);left:-70px;bottom:-90px}
.shophero::after{content:"";position:absolute;width:12px;height:12px;border-radius:50%;background:var(--orange);right:32px;top:90px}
.shophero>*{position:relative}
.avatar{width:72px;height:72px;border-radius:22px;background:var(--cream);color:var(--teal);display:flex;align-items:center;justify-content:center;font-family:'Baloo Bhaijaan 2',sans-serif;font-size:36px;flex:none;box-shadow:0 0 0 4px var(--orange)}
.rewardchip{display:inline-flex;align-items:center;gap:6px;background:var(--orange);color:var(--dark);border-radius:999px;padding:6px 14px;font-weight:800;margin-top:12px}
.lift{margin-top:-52px}
.apps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 8px}
.app{display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;color:var(--dark);font-size:12px;font-weight:700;background:none;border:0;padding:0;font-family:inherit;cursor:pointer}
.app i,.app .ic{width:56px;height:56px;border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:26px;color:#fff;font-style:normal}
.ic-ig{background:#C13584}.ic-fb{background:#1877F2}.ic-tt{background:#111}.ic-wa{background:#1FA855}
.ic-pay{background:#5B2A86}.ic-map{background:#D93025}.ic-rev{background:#F4B400;color:#1B1F1E!important}.ic-share{background:var(--teal)}
.offer2{background:linear-gradient(0deg,#FDEBDD,#FDEBDD);border:0;border-radius:20px;padding:16px 18px;position:relative;overflow:hidden}
.offer2 .tag{font-size:12px;font-weight:800;color:var(--rust);letter-spacing:.02em}
.offer2 .t{font-family:'Baloo Bhaijaan 2',sans-serif;font-size:24px;line-height:1.25;margin-top:2px}
.sticky{position:sticky;bottom:0;padding:12px 0 calc(12px + env(safe-area-inset-bottom));background:linear-gradient(0deg,var(--cream) 70%,rgba(255,246,229,0))}
.tabs{display:flex;gap:6px;background:#F1E7D3;border-radius:14px;padding:4px;margin-top:14px;overflow-x:auto}
.tabs button{flex:1 0 auto;white-space:nowrap;padding:0 10px;min-height:44px;border:0;border-radius:10px;background:transparent;font:800 15px 'Baloo Bhaijaan 2',sans-serif;color:var(--grey);cursor:pointer}
.tabs button.on{background:#fff;color:var(--teal)}
.toggle{display:flex;align-items:center;justify-content:space-between;gap:10px;font-weight:700}
.toggle input{width:24px;height:24px;flex:none}
/* install chip + sheet */
.chip{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;border-radius:999px;border:1.5px solid rgba(255,246,229,.6);background:rgba(255,246,229,.12);color:var(--cream);font:700 13px 'Baloo Bhaijaan 2',sans-serif;cursor:pointer;text-decoration:none}
.sheet{position:fixed;inset:0;background:rgba(14,30,28,.55);display:flex;align-items:flex-end;justify-content:center;z-index:50}
.sheetcard{background:var(--cream);width:100%;max-width:520px;border-radius:24px 24px 0 0;padding:22px 20px calc(20px + env(safe-area-inset-bottom))}
.steps{margin:12px 0 16px;padding-inline-start:22px;font-weight:700;line-height:1.9}
/* pay */
.paygrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px}
.paybtn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:74px;border-radius:16px;border:2px solid var(--line);background:#fff;font:800 13px 'Baloo Bhaijaan 2',sans-serif;color:var(--dark);cursor:pointer;text-decoration:none}
.paybtn i{font-size:22px}
.paybtn.main{border-color:#5B2A86;color:#5B2A86}
.step{display:flex;align-items:center;gap:10px;margin-top:16px;font-weight:800;color:var(--teal)}
.step .n{width:28px;height:28px;border-radius:50%;background:var(--teal);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;flex:none}
.codebox{font-family:'Baloo Bhaijaan 2',sans-serif;font-size:84px;letter-spacing:.2em;text-align:center;color:var(--teal);line-height:1.1;direction:ltr}
.filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;align-items:end}
.filters label{margin:0 0 4px}
/* levels */
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px;margin-top:10px}
.tier{border-radius:16px;padding:12px;text-align:center;border:2px solid transparent}
.tier b{display:block;font-family:'Baloo Bhaijaan 2',sans-serif;font-weight:800;font-size:22px}
.tier .p{font-weight:800;font-size:18px}
.tier.t0{background:#ECEFF1;color:#37474F}.tier.t1{background:#FFF3C4;color:#7A5300}.tier.t2{background:#E7E1F5;color:#4527A0}.tier.t3,.tier.t4{background:#DDEFEC;color:#0A3735}
.tier.me{border-color:var(--orange);box-shadow:0 0 0 3px rgba(242,140,40,.25)}
.bar{height:10px;border-radius:5px;background:#EFE6D3;overflow:hidden;margin-top:8px}.bar>i{display:block;height:100%;background:var(--orange)}
.mystat{background:var(--teal);color:var(--cream);border:0}
.mystat .muted{color:#D6EAE7}

/* quick review */
.rq{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 0;border-bottom:1px solid #F1E7D3}
.rq:last-child{border-bottom:0}
.rq span{font-weight:800;min-width:64px}
.faces{display:flex;gap:4px}
.faces button{width:44px;height:44px;border-radius:12px;border:1.5px solid var(--line);background:#fff;font-size:22px;color:#9AA3A1;cursor:pointer;padding:0}
.faces button.on{border-color:var(--orange);background:#FDEBDD;color:var(--rust)}
/* ratings summary */
.rating{display:flex;gap:16px;align-items:center}
.rating .big{font-size:52px;color:var(--teal)}
.rbars{flex:1;display:grid;gap:6px}
.rbar{display:grid;grid-template-columns:64px 1fr 30px;gap:8px;align-items:center;font-size:13px;font-weight:700}
.rbar .bar{margin:0}
.paused{background:#ECE8E1;border-color:#CFC5B0;text-align:center}

/* plans */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin-top:10px}
.plan{text-align:right;border:2px solid var(--line);border-radius:18px;background:#fff;padding:14px;cursor:pointer;font:inherit;color:var(--dark)}
.plan.on{border-color:var(--orange);box-shadow:0 0 0 3px rgba(242,140,40,.25)}
.plan .pn{font-family:'Baloo Bhaijaan 2',sans-serif;font-size:24px;color:var(--teal)}
.plan .pp{font-weight:800;font-size:20px}
.plan ul{margin:8px 0 0;padding-inline-start:18px;font-size:13px;line-height:1.7}

/* ===================== v7 usability pass ===================== */
/* bigger, calmer type and touch targets */
body{font-size:17px}
.muted{font-size:15px}
.btn{min-height:56px;border-radius:16px;font-size:18px}
.btn.small{min-height:48px;font-size:16px;padding:0 18px;border-radius:14px}
.btn:focus-visible,.chip:focus-visible,.app:focus-visible,.paybtn:focus-visible,.faces button:focus-visible,.tabs button:focus-visible,.plan:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
input,select,textarea{height:52px;font-size:17px;border-radius:14px}
label{font-size:15px}
.card{border-radius:22px;padding:18px}
h2{font-size:26px}

/* form grids: one column on phones, several on wide screens */
.filters{grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:12px;align-items:end}

/* tabs never hide: they wrap into rows instead of scrolling */
.tabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:6px;overflow:visible}
.tabs button{min-height:52px;font-size:15px;padding:0 6px;white-space:normal;line-height:1.2}
.tabs button.on{box-shadow:0 1px 0 rgba(0,0,0,.06),0 0 0 2px var(--teal) inset}

/* headers: readable on the dark background */
.shophero .muted,.hero .muted{color:#D6EAE7}
.chip{min-height:42px;font-size:14px;padding:0 14px}

/* customer: app icons fit in one or two even rows */
.apps{grid-template-columns:repeat(auto-fit,minmax(54px,1fr));gap:14px 4px}
.app i,.app .ic{width:58px;height:58px;font-size:27px}
.app{font-size:13px}

/* quick review: big, easy faces */
.rq{padding:10px 0}
.rq span{font-size:16px}
.faces{gap:6px}
.faces button{width:48px;height:48px;font-size:24px}
@media (max-width:360px){.faces button{width:42px;height:42px;font-size:21px}.rq span{min-width:52px}}

/* pay buttons */
.paybtn{min-height:84px;font-size:14px;border-radius:18px}
.paybtn i{font-size:26px}

/* cashier: one big confirm button per request */
.reqs>div{flex-direction:column;align-items:stretch;gap:12px;padding:14px 0}
.reqs .acts{display:grid;grid-template-columns:2fr 1fr;gap:10px}
.reqs .acts .btn{min-height:60px;font-size:19px}

/* admin form sections */
.sec{display:flex;align-items:center;gap:10px;margin:26px 0 6px;font-size:19px;font-weight:800;color:var(--teal)}
.sec .n{width:32px;height:32px;border-radius:50%;background:var(--teal);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:15px;flex:none}
.sec+.muted{margin-top:-2px}
.wide .card{padding:22px}
table{font-size:15px}
th,td{padding:10px}
.list>div{gap:12px}

.brand{white-space:nowrap}
.chip{white-space:nowrap}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ===================== v8: tabbed screens ===================== */
:root{--sand:#F6F1E7;--sand2:#E7E0D1}
body.v8{background:var(--sand)}
.chead{background:var(--teal);color:#fff;padding:18px 18px 54px}
.chead .wrap{padding:0}
.chead .who{display:flex;align-items:center;gap:12px;margin-top:14px}
.chead .avatar{width:58px;height:58px;font-size:30px;border-radius:18px;box-shadow:none;background:var(--sand)}
.chead h1{font-size:30px;line-height:1.1}
.chead .muted{color:#D3E8E5}
.stars{color:#F4B740;letter-spacing:1px}
.mechip{display:inline-flex;align-items:center;gap:6px;margin-top:6px;padding:3px 12px;border-radius:999px;background:rgba(255,255,255,.14);font-size:14px;font-weight:700}
.topline{display:flex;justify-content:space-between;align-items:center;gap:8px}
.appsbar{background:#fff;border-radius:22px;padding:14px 8px 10px;margin-top:-40px;box-shadow:0 8px 22px rgba(14,79,76,.12);position:relative}
.appsbar .apps{grid-template-columns:repeat(auto-fit,minmax(52px,1fr));gap:10px 2px}
.appsbar .app i{width:50px;height:50px;font-size:25px;border-radius:15px}
.appsbar .app{font-size:12px}
.ic-ig{background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%)}
.ic-wa{background:#25D366}.ic-tt{background:#000}.ic-fb{background:#1877F2}
.ic-map{background:#fff;color:#EA4335!important;border:1.5px solid var(--sand2)}
.ic-pay{background:#5B2A86}.ic-wal{background:#E60000}.ic-bank{background:#1F3A93}
.seg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;background:var(--sand2);border-radius:18px;padding:4px;margin:14px 0 4px;position:sticky;top:0;z-index:5}
.seg.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.seg button{min-height:52px;border:0;border-radius:14px;background:transparent;font:800 15px 'Baloo Bhaijaan 2',sans-serif;color:#3E4C4A;cursor:pointer;padding:0 2px;line-height:1.2}
.seg button.on{background:#fff;color:var(--teal);box-shadow:0 1px 4px rgba(0,0,0,.08)}
.seg button:focus-visible{outline:3px solid var(--orange);outline-offset:1px}
body.v8 .card{border:0;border-radius:22px}
.cardh{display:flex;align-items:center;gap:8px;font-weight:800;font-size:17px;margin:0 0 10px}
.cardh .n{width:28px;height:28px;border-radius:50%;background:var(--teal);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:14px;flex:none}
.amt{display:flex;gap:10px;align-items:center}
.amt input{font-size:24px;font-weight:800;height:58px}
.amt .pill{flex:none;font-size:15px;padding:6px 12px;background:#FCE8D8;color:#8A3D0F;white-space:nowrap}
.qa{display:grid;grid-template-columns:64px repeat(4,minmax(0,1fr));gap:6px;align-items:center;margin:8px 0}
.qa>span{font-weight:800;font-size:15px}
.qa button{min-height:46px;border-radius:12px;border:1.5px solid #DDD5C5;background:#fff;font:700 14px 'Baloo Bhaijaan 2',sans-serif;color:#3E4C4A;cursor:pointer;padding:0}
.qa button.on{background:var(--teal);border-color:var(--teal);color:#fff}
.qa button:focus-visible{outline:3px solid var(--orange)}
@media (max-width:360px){.qa{grid-template-columns:54px repeat(4,minmax(0,1fr))}.qa button{font-size:13px}}
.balance{background:var(--teal);color:#fff;display:flex;justify-content:space-between;align-items:center;gap:10px}
.balance .muted{color:#D3E8E5}
.balance .big{font-size:46px;line-height:1}
.lvl{display:inline-block;border-radius:999px;padding:3px 12px;font-size:14px;font-weight:800;background:#E8ECEB;color:#3E4C4A}
.lvl.l1{background:#FFF0C7;color:#6B4A00}.lvl.l2{background:#E4E0F5;color:#3F2F86}.lvl.l3{background:#DDEFEC;color:#0A3735}
.track{display:flex;align-items:center;gap:4px;margin:12px 0 6px}
.track .d{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;flex:none;background:var(--sand2);color:var(--grey)}
.track .d.done{background:var(--teal);color:#fff}.track .d.me{background:#E8A317;color:#3A2A00}
.track .ln{flex:1;height:6px;border-radius:6px;background:var(--sand2);overflow:hidden}.track .ln i{display:block;height:100%;background:var(--orange)}
.tracklbl{display:flex;justify-content:space-between;font-size:13px;color:var(--grey);font-weight:700}
.stats3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.stats3>div{background:#fff;border-radius:18px;padding:10px 6px;text-align:center}
.stats3 b{display:block;font-family:'Baloo Bhaijaan 2',sans-serif;font-weight:800;font-size:26px;line-height:1.1}
.shopitem{display:block;text-decoration:none;color:var(--dark)}
.shopitem .top{display:flex;align-items:center;gap:12px}
.shopitem .avatar{width:50px;height:50px;font-size:26px;border-radius:15px;box-shadow:none;background:#E3F1EE}
.rowx{display:flex;align-items:center;gap:10px}
.grow{flex:1;min-width:0}
.hist{display:flex;align-items:center;gap:10px;background:#fff;border-radius:18px;padding:12px 14px;margin:8px 0}
.hist .pts{font-weight:800;font-size:18px}.hist .pts.plus{color:#145C34}.hist .pts.minus{color:#8A1C1C}
.empty{text-align:center;color:var(--grey);padding:28px 10px}
.done{text-align:center;padding:28px 18px}
.done .ring{width:88px;height:88px;border-radius:50%;background:#E3F1EE;color:var(--teal);display:flex;align-items:center;justify-content:center;font-size:40px;margin:0 auto 10px}
.done .ring.ok{background:#DDF1E6;color:#145C34}
.back{width:46px;height:46px;border-radius:14px;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:20px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:none;text-decoration:none}
/* welcome */
.welcome{background:var(--teal);color:#fff;text-align:center;padding:34px 20px 30px}
.welcome .avatar{margin:0 auto 10px;width:80px;height:80px;font-size:44px;border-radius:24px;box-shadow:none;background:var(--sand)}
.welcome h1{font-size:34px}
/* cashier bottom navigation */
body.has-bnav{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
.bnav{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid #E4DCCB;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:6px 6px calc(8px + env(safe-area-inset-bottom));z-index:20}
.bnav button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:60px;border:0;background:transparent;font:800 13px 'Baloo Bhaijaan 2',sans-serif;color:var(--grey);cursor:pointer}
.bnav button i{font-size:22px}
.bnav button.on{color:var(--teal)}
.bnav button.on::before{content:"";position:absolute;top:-7px;width:40px;height:4px;border-radius:4px;background:var(--teal)}
.bnav .bdg{position:absolute;top:2px;left:calc(50% - 26px);min-width:22px;height:22px;border-radius:11px;background:#B42318;color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center;padding:0 5px}
.shead{background:var(--teal);color:#fff;padding:16px 18px}
.shead .wrap{padding:0;display:flex;align-items:center;gap:12px}
.shead .avatar{width:46px;height:46px;font-size:24px;border-radius:14px;box-shadow:none;background:var(--sand)}
.shead h1{font-size:26px}
.shead .muted{color:#D3E8E5;font-size:14px}
.okbtn{background:#0E7A4F}
.rejbtn{background:#fff;color:#8A1C1C;border:1.5px solid #E4C4C4}
.redeemcard{background:#FCE8D8!important}
.menu a,.menu button{display:flex;align-items:center;gap:14px;width:100%;min-height:68px;padding:0 16px;background:#fff;border:0;border-radius:18px;margin:8px 0;text-decoration:none;color:var(--dark);font:800 17px 'Baloo Bhaijaan 2',sans-serif;cursor:pointer;text-align:right}
.menu .mi{width:44px;height:44px;border-radius:14px;background:#E3F1EE;color:var(--teal);display:flex;align-items:center;justify-content:center;font-size:20px;flex:none}
.menu small{display:block;font-weight:600;color:var(--grey);font-size:14px}
.switch{display:flex;align-items:center;justify-content:space-between;gap:10px}
/* admin v8 */
.atop{background:var(--teal);color:#fff}
.atop .in{max-width:1280px;margin:0 auto;padding:0 18px}
.atop .bar1{display:flex;align-items:center;gap:12px;min-height:70px;flex-wrap:wrap}
.anav{display:flex;gap:6px;flex-wrap:wrap;padding-bottom:12px}
.anav button{min-height:48px;padding:0 18px;border:0;border-radius:14px;background:rgba(255,255,255,.1);color:#fff;font:800 16px 'Baloo Bhaijaan 2',sans-serif;display:flex;align-items:center;gap:8px;cursor:pointer}
.anav button.on{background:#fff;color:var(--teal)}
.addbtn{margin-inline-start:auto;min-height:48px;padding:0 20px;border:0;border-radius:14px;background:var(--orange);color:#2A1300;font:800 16px 'Baloo Bhaijaan 2',sans-serif;display:flex;align-items:center;gap:8px;cursor:pointer}
.amain{max-width:1280px;margin:0 auto;padding:18px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:12px}
.kpi{background:#fff;border-radius:18px;padding:14px 16px}
.kpi b{display:block;font-family:'Baloo Bhaijaan 2',sans-serif;font-weight:800;font-size:32px;line-height:1.1}
.kpi span{font-size:14px;color:var(--grey);font-weight:700}
.kpi.warn{background:#FCE8D8}
.cols2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:16px;align-items:start}
@media (max-width:900px){.cols2{grid-template-columns:1fr}}
.alert{display:flex;align-items:center;gap:10px;padding:12px;border-radius:16px;background:var(--sand);margin:8px 0;flex-wrap:wrap}
.alert .btn{width:auto}
.wabtn{background:#25D366;color:#06301A}
.wsteps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin:6px 0 4px}
.wsteps button{display:flex;flex-direction:column;align-items:center;gap:6px;border:0;background:none;font:700 14px 'Baloo Bhaijaan 2',sans-serif;color:var(--grey);cursor:pointer;padding:4px 0;text-align:center;line-height:1.25}
.wsteps i{width:40px;height:40px;border-radius:50%;background:var(--sand2);color:#3E4C4A;display:flex;align-items:center;justify-content:center;font-style:normal;font-weight:800}
.wsteps button.done i{background:var(--teal);color:#fff}
.wsteps button.on{color:var(--dark)}.wsteps button.on i{background:var(--orange);color:#2A1300}
@media (max-width:560px){.wsteps button{font-size:12px}.wsteps i{width:34px;height:34px}}
.wnav{display:flex;justify-content:space-between;gap:10px;margin-top:18px;flex-wrap:wrap}
.wnav .btn{width:auto;min-width:140px}
.preview{background:#E3F1EE;border-radius:18px;padding:14px 16px}
.iconbtns{display:flex;gap:6px;flex-wrap:wrap}
.iconbtns .ib{width:44px;height:44px;border-radius:12px;border:1.5px solid #DDD5C5;background:#fff;color:var(--teal);display:inline-flex;align-items:center;justify-content:center;font-size:17px;cursor:pointer;text-decoration:none}
.st-ok{background:#DDF1E6;color:#145C34}.st-wt{background:#FCE8D8;color:#8A3D0F}.st-bad{background:#FBE1E1;color:#8A1C1C}.st-tr{background:#E4ECFB;color:#1E3F8A}
.segf{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0}
.segf button{min-height:44px;padding:0 14px;border:1.5px solid #DDD5C5;border-radius:12px;background:#fff;font:700 15px 'Baloo Bhaijaan 2',sans-serif;color:#3E4C4A;cursor:pointer}
.segf button.on{background:var(--teal);border-color:var(--teal);color:#fff}
@media (max-width:900px){.cols2{grid-template-columns:minmax(0,1fr)!important}}
td .iconbtns{flex-wrap:nowrap}
.amain{overflow-x:clip}
.hist .pts{direction:ltr;unicode-bidi:isolate}
.ic-ipay{background:#fff;border:1.5px solid var(--sand2)}

.logo{display:block;width:auto}
.brand img.logo{display:block}

/* ===================== Pointi v9 ===================== */
.plogo{display:inline-flex;align-items:center;justify-content:center;flex:none;border-radius:50%;color:#fff;font-weight:800;overflow:hidden;box-shadow:0 0 0 3px #fff,0 2px 8px rgba(0,0,0,.12)}
.plogo:has(img){background:#fff!important}
.plogo img{width:100%;height:100%;object-fit:contain;display:block;background:#fff;padding:13%;box-sizing:border-box}
.orow{display:flex;align-items:center;gap:12px;background:#fff;border-radius:18px;padding:10px 12px;margin:8px 0;text-decoration:none;color:var(--dark);min-height:64px}
.orow .grow{display:flex;flex-direction:column;min-width:0}
.orow .ot{font-size:16px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.obadge{flex:none;min-width:52px;text-align:center;background:var(--orange);color:#2A1300;font-weight:800;font-size:15px;padding:4px 8px;border-radius:10px;direction:ltr;unicode-bidi:isolate}
.obadge.big{font-size:20px;padding:4px 12px;border-radius:12px;box-shadow:0 4px 10px rgba(0,0,0,.18)}
.ocards{display:flex;gap:12px;overflow-x:auto;padding:4px 2px 10px;scroll-snap-type:x mandatory}
.ocard{flex:none;width:min(62vw,230px);scroll-snap-align:start;background:#fff;border-radius:20px;overflow:hidden;text-decoration:none;color:var(--dark);display:flex;flex-direction:column}
.ocard-top{height:72px;position:relative;display:block}
.ocard-top .obadge{position:absolute;top:10px;inset-inline-end:10px}
.ocard-body{display:flex;flex-direction:column;gap:2px;padding:0 12px 12px}
.ocard-body .plogo{margin-top:-24px;margin-bottom:4px;position:relative;z-index:1}
.ocard .ot{font-size:16px;line-height:1.3}
.secth{display:flex;align-items:center;justify-content:space-between;margin:16px 0 4px}
.secth b{font-size:18px}
.chips{display:flex;gap:8px;overflow-x:auto;padding:4px 0}
.chips button{flex:none;min-height:42px;padding:0 16px;border-radius:999px;border:1.5px solid var(--line);background:#fff;font:800 15px 'Baloo Bhaijaan 2',sans-serif;color:var(--dark);cursor:pointer}
.chips button.on{background:var(--teal);border-color:var(--teal);color:#fff}
.langbtn{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border-radius:999px;border:1.5px solid rgba(255,255,255,.5);background:transparent;color:#fff;font:800 14px 'Baloo Bhaijaan 2',sans-serif;cursor:pointer;text-decoration:none}
.pinrow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;direction:ltr}
.pinrow input{height:62px;text-align:center;font-size:28px;font-weight:800;padding:0}
.entry{min-height:100vh;min-height:100dvh;background:var(--teal);color:#fff;display:flex;flex-direction:column;align-items:center;padding:24px 20px calc(28px + env(safe-area-inset-bottom));gap:14px;box-sizing:border-box}
.entry .slogan{font-size:28px;font-weight:800;text-align:center;line-height:1.35}
.entry .btn{max-width:440px;min-height:60px;font-size:19px}
.steps3 .st{display:flex;align-items:center;gap:12px;margin:10px 0}
.steps3 .st i{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-style:normal;font-weight:800;flex:none;background:var(--sand2);color:var(--grey)}
.steps3 .st.done i{background:var(--teal);color:#fff}.steps3 .st.now i{background:var(--orange);color:#2A1300}
.pcard{background:var(--dark);color:#fff;border-radius:22px;padding:18px;display:flex;flex-direction:column;gap:10px}
.kinds{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.kinds button{min-height:46px;border-radius:12px;border:1.5px solid var(--line);background:#fff;font:800 14px 'Baloo Bhaijaan 2',sans-serif;color:var(--dark);cursor:pointer;padding:0 4px}
.kinds button.on{background:var(--teal);border-color:var(--teal);color:#fff}
@media (max-width:360px){.kinds{grid-template-columns:repeat(2,minmax(0,1fr))}}
.logopick{display:flex;align-items:center;gap:14px}
.colors{display:flex;gap:8px;flex-wrap:wrap}
.colors button{width:40px;height:40px;border-radius:12px;border:3px solid #fff;box-shadow:0 0 0 1.5px var(--line);cursor:pointer}
.colors button.on{box-shadow:0 0 0 3px var(--dark)}

/* ---- PC vs phone ---- */
/* app screens (customer app, QR page, shop screen) are phone-first: on a computer they sit in a centred phone-width column */
@media (min-width:700px){
  .bnav{max-width:520px;margin:0 auto;border:1px solid #E4DCCB;border-bottom:0;border-radius:22px 22px 0 0;box-shadow:0 -6px 24px rgba(0,0,0,.06)}
  .pcnote{display:flex!important}
}
.entry>div:first-child{max-width:440px;width:100%}
.pcnote{display:none;align-items:center;gap:12px;background:#E3F1EE;border-radius:18px;padding:12px 14px;margin:12px 0;color:var(--dark)}
.pcnote canvas,.pcnote img{width:84px;height:84px;flex:none;background:#fff;border-radius:10px;padding:4px}
.ot{unicode-bidi:plaintext;text-align:start}

/* ---- QR page: two ways to earn ---- */
.hi2{margin:14px 2px 10px}.hi2 b{font-size:24px;display:block;line-height:1.15}
.door{display:flex;flex-direction:column;gap:8px;width:100%;text-align:start;border-radius:24px;padding:16px;margin-bottom:12px;cursor:pointer;font:inherit;position:relative;overflow:hidden;transition:transform .12s}
.door:active{transform:scale(.98)}
.door .dic{width:54px;height:54px;border-radius:16px;display:flex;align-items:center;justify-content:center;flex:none;font-size:24px}
.door b.t{font-size:21px;display:block;line-height:1.15}
.door.rate{background:#FCE8D8;border:2px solid #F7B27A;color:#2A1300}
.door.rate .dic{background:var(--orange);color:#2A1300}
.door.rate small{font-size:14px;font-weight:700;color:#6B3A12}
.door.rate.used{background:#F1EDE4;border-color:#E4DCCB;color:#4F5D5B;cursor:default}
.door.rate.used .dic{background:#DDD5C5;color:#4F5D5B}
.door.rec{background:var(--teal);border:0;color:#fff}
.door.rec .dic{background:rgba(255,255,255,.14);color:#F7B27A}
.door.rec small{font-size:14px;font-weight:700;color:#D3E8E5}
.door .tags{display:flex;gap:6px;flex-wrap:wrap}
.door .tag{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;background:#fff;color:#6B3A12;font-size:13px;font-weight:800}
.door .lvl{color:#fff;background:rgba(255,255,255,.1);border-radius:14px;padding:8px 10px;font-size:14px;font-weight:700}
.door .lvl .tr{height:6px;border-radius:3px;background:rgba(255,255,255,.2);margin-top:6px}.door .lvl .tr i{display:block;height:100%;border-radius:3px;background:#F7B27A}
.coin{direction:ltr;display:inline-flex;align-items:center;justify-content:center;flex-direction:column;flex:none;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFD9A8,var(--orange) 70%);color:#2A1300;font-weight:800;line-height:1;box-shadow:0 6px 16px rgba(232,118,43,.35),inset 0 -4px 0 rgba(0,0,0,.12)}
.coin small{font-size:.42em;margin-top:2px}
.balrow{display:flex;align-items:center;gap:10px;background:#fff;border-radius:16px;padding:12px 14px;font-weight:800}
.balrow i{color:var(--orange);font-size:20px}
.qbar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin:14px 0 4px}.qbar i{height:6px;border-radius:3px;background:#E4DCCB;display:block}.qbar i.f{background:var(--orange)}
.qhead{display:flex;align-items:center;gap:10px;margin-top:14px}
.qtitle{text-align:center;font-size:30px;font-weight:800;line-height:1.2;margin:18px 0 16px}
.rfaces{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.rfaces button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 4px;border-radius:20px;background:#fff;border:2px solid #E4DCCB;font:800 17px 'Baloo Bhaijaan 2',sans-serif;color:#3E4C4A;cursor:pointer;transition:transform .12s}
.rfaces button i{font-size:46px}
.rfaces button.on{border-color:var(--orange);background:#FCE8D8;color:#6B3A12;transform:scale(1.03)}
.rfaces button:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.won{margin:14px -16px 0;padding:22px 16px 26px;background:var(--teal);color:#fff;text-align:center;border-radius:0 0 28px 28px;position:relative;overflow:hidden}
.won .coin{width:150px;height:150px;font-size:50px;margin:12px auto 8px;box-shadow:0 0 0 10px rgba(247,178,122,.25),0 14px 30px rgba(0,0,0,.25);animation:pop .5s ease-out}
@keyframes pop{0%{transform:scale(.3) rotate(-20deg);opacity:0}70%{transform:scale(1.08)}100%{transform:scale(1)}}
.won .cf{position:absolute;border-radius:3px}
@media (prefers-reduced-motion:reduce){.won .coin{animation:none}}

/* ---- QR page v2: one big button + visit card ---- */
.cta{display:flex;align-items:center;gap:12px;width:100%;border:0;border-radius:24px;padding:16px;background:var(--orange);color:#2A1300;box-shadow:0 10px 24px rgba(232,118,43,.35);font:inherit;text-align:start;cursor:pointer;margin-bottom:12px;transition:transform .12s}
.cta:active{transform:scale(.98)}
.cta b{font-size:22px;line-height:1.15;display:block}.cta small{font-size:14px;font-weight:700;color:#6B3A12;display:block}
.cta.used{background:#F1EDE4;color:#4F5D5B;box-shadow:none;cursor:default}.cta.used small{color:#4F5D5B}.cta.used .coin{filter:grayscale(1);opacity:.5}
.cta:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
.followrow{display:flex;align-items:center;gap:10px;width:100%;margin-top:12px;background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:10px 12px;font:inherit;text-align:start;cursor:pointer;color:var(--dark)}
.followrow>i{color:var(--orange);font-size:18px}.followrow b{display:block;font-size:15px}.followrow small{display:block;color:var(--grey);font-size:13px;font-weight:600}
.followrow .fchip{background:var(--teal);color:#fff;border-radius:999px;padding:4px 12px;font-weight:800;font-size:13px;flex:none}
.followrow.on .fchip{background:#E3F1EE;color:#0A3735}
.brchip{display:inline-flex;align-items:center;gap:5px;margin-top:4px;padding:3px 10px;border-radius:999px;background:var(--orange);color:#2A1300;font-weight:800;font-size:13px}
.brcard{background:#fff;border-radius:16px;padding:10px 12px;margin-top:8px;display:flex;flex-direction:column;gap:6px}
.mchip{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;color:#fff;font-weight:800;font-size:13px;text-decoration:none;min-height:30px}
.mchip.map{background:#2D6CDF}.mchip.wa{background:#1FA855}
.closedic{width:66px;height:66px;border-radius:50%;background:#FCE8D8;color:var(--orange);display:flex;align-items:center;justify-content:center;font-size:28px}
.sheetcard{gap:12px;margin-top:10px}
.vstep{display:flex;flex-direction:column;gap:8px}
.stp{display:flex;align-items:center;gap:8px;font-weight:800;font-size:16px}
.stp .n{width:26px;height:26px;border-radius:50%;background:var(--teal);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:14px;flex:none}
.cboxes{display:flex;gap:10px;justify-content:center}
.cboxes input{width:58px;height:64px;padding:0;text-align:center;font-size:30px;font-weight:800;border-radius:14px;border:2px solid #CFC6B4}
.cboxes input.f{border-color:var(--teal)}
.tot{display:flex;align-items:center;gap:10px;background:#E3F1EE;border-radius:14px;padding:10px 12px}
.tot b{font-size:16px}
.bchip{background:#FCE8D8;color:#8A3D0F;border-radius:999px;padding:3px 10px;font-size:13px;font-weight:800;direction:rtl}
.rr{display:flex;align-items:center;gap:6px;padding:2px 0}.rr b{flex:1;font-size:15px;min-width:0}
.rr button{width:42px;height:42px;border-radius:12px;border:2px solid transparent;background:#F6F1E7;color:#9AA3A1;font-size:22px;cursor:pointer;padding:0;flex:none}
.rr button.on{background:#FCE8D8;color:var(--orange);border-color:var(--orange)}
.rr button:focus-visible{outline:3px solid var(--orange);outline-offset:1px}
@media (max-width:360px){.rr button{width:38px;height:38px;font-size:20px}.cboxes input{width:52px}}
.btn.orange{background:var(--orange);color:#2A1300}
.scanbtn{border:2px dashed var(--teal);cursor:pointer}

/* ---- shop app: owner / manager / cashier screens ---- */
.codering{position:relative;width:210px;height:210px;display:flex;align-items:center;justify-content:center;margin:6px auto 0}
.codering svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.codering .trk{fill:#fff;stroke:#E4DCCB;stroke-width:10}
.codering .arc{fill:none;stroke:var(--orange);stroke-width:10;stroke-linecap:round;stroke-dasharray:565;stroke-dashoffset:0;transition:stroke-dashoffset .5s linear}
.codering>div{position:relative;text-align:center}
.codebig{font-size:60px;font-weight:800;color:var(--teal);letter-spacing:.06em;line-height:1}
.actgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:14px}
.actgrid button{background:#fff;border:0;border-radius:16px;padding:12px 6px;display:flex;flex-direction:column;align-items:center;gap:6px;font:800 13px 'Baloo Bhaijaan 2',sans-serif;color:var(--dark);cursor:pointer;min-height:84px}
.actgrid span{width:42px;height:42px;border-radius:12px;background:#E3F1EE;color:var(--teal);display:flex;align-items:center;justify-content:center;font-size:18px}
.urow{display:flex;align-items:center;gap:10px;background:#fff;border-radius:14px;padding:10px 12px;margin-top:8px}
.urow.col{flex-direction:column;align-items:stretch;gap:8px}.urow.off{opacity:.6}
.av{width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:800;color:#fff;flex:none;font-size:18px}
.role{padding:2px 10px;border-radius:999px;font-size:12px;font-weight:800;white-space:nowrap}
.r-owner{background:var(--teal);color:#fff}.r-manager{background:#FCE8D8;color:#8A3D0F}.r-cashier{background:#E3F1EE;color:#0A3735}
.grp{font-weight:800;font-size:14px;color:var(--grey);margin:14px 2px 0}
.radios{display:flex;flex-direction:column;gap:8px}
.radios button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:start;padding:10px 12px 10px 12px;padding-inline-start:40px;border-radius:14px;border:1.5px solid var(--line);background:#fff;font:inherit;cursor:pointer;position:relative;color:var(--dark)}
.radios button::before{content:'';position:absolute;inset-inline-start:12px;top:50%;margin-top:-10px;width:20px;height:20px;border-radius:50%;border:2px solid #9AA3A1;box-sizing:border-box}
.radios button.on{border-color:var(--teal);background:#E3F1EE}.radios button.on::before{border:6px solid var(--teal)}
.radios button b{font-size:15px}.radios button small{color:var(--grey);font-size:13px;font-weight:600}
.radios button:disabled{opacity:.5;cursor:not-allowed}
.pinshow{background:#E3F1EE;border:2px solid var(--teal)}
.pinbig{font-size:30px;font-weight:800;letter-spacing:.12em;color:var(--teal)}
.qgprev{background:#fff;border-radius:18px;padding:12px;margin-top:10px;display:flex;justify-content:center}
.qgprev canvas{max-width:100%;max-height:420px;width:auto;height:auto;border-radius:10px;box-shadow:0 6px 18px rgba(21,48,46,.15)}
.sizes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:10px}
.sizes button{border:2px solid var(--line);border-radius:14px;padding:8px 4px;background:#fff;font:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:center;color:var(--dark)}
.sizes button b{font-size:14px}.sizes button small{color:var(--grey);font-size:12px}
.sizes button.on{border-color:var(--teal);background:#E3F1EE}
.qsec{gap:10px}.qsec .cardh i{color:var(--orange);margin-inline-end:6px}
.dim{opacity:.45;pointer-events:none}
.sw{position:relative;display:inline-block;width:52px;height:30px;flex:none;margin:0}
.sw input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:1}
.sw span{position:absolute;inset:0;border-radius:15px;background:#CFC6B4;transition:background .15s}
.sw span::after{content:'';position:absolute;top:3px;inset-inline-start:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:inset-inline-start .15s}
.sw input:checked+span{background:#0E7A4F}.sw input:checked+span::after{inset-inline-start:25px}
.sw input:focus-visible+span{outline:3px solid var(--orange);outline-offset:2px}
.linkrow{display:grid;grid-template-columns:52px 76px minmax(0,1fr);align-items:center;gap:8px}
.linkrow input{height:44px;font-size:15px}
.tierrow{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,.8fr);gap:6px;align-items:end;margin-top:6px}
.tierrow label{font-size:12px;font-weight:700;color:var(--grey);margin:0}
.tierrow input{height:44px;font-size:15px}
.meter{height:10px;border-radius:5px;background:#EFE9DC;overflow:hidden;margin:6px 0}.meter i{display:block;height:100%;background:var(--orange);border-radius:5px}
.lin{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid #EFE9DC;font-weight:700}
.chips button:disabled{opacity:.45}
.bnav{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
.msg.wait{background:#FCE8D8;color:#8A3D0F}
.brcard .btn,.urow .btn{white-space:nowrap;padding:0 10px;font-size:14px;min-height:44px}
.bdgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:16px;align-items:start}
.bdgrid>div{display:flex;flex-direction:column;gap:0}
.comcard{border:2px solid #F7B27A}
.splitbar{display:flex;height:14px;border-radius:999px;overflow:hidden;margin-top:12px;background:#EFE9DC}
.splitbar span{flex-basis:0;min-width:6px}
#spCust{background:var(--teal)}#spPt{background:var(--orange)}
.splitlbl{display:flex;justify-content:space-between;font-weight:800;font-size:14px;margin-top:4px}
#spCustL{color:var(--teal)}#spPtL{color:var(--orange)}
/* how-it-works card (Model A) */
.hiw{background:linear-gradient(160deg,#FFF8EC,#F6F1E7);border:1.5px solid #EADFC9;border-radius:20px;padding:14px;margin-top:12px}
.hiw-bills{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.hiw-bills button{min-height:36px;padding:0 12px;border-radius:999px;border:1.5px solid var(--line);background:#fff;font:800 14px 'Baloo Bhaijaan 2',sans-serif;color:var(--dark);cursor:pointer}
.hiw-bills button.on{background:var(--dark,#0E4F4C);border-color:#0E4F4C;background:#0E4F4C;color:#fff}
.hiw-flow{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:stretch}
.hiw-step{background:#fff;border-radius:16px;padding:10px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:2px;box-shadow:0 2px 8px rgba(14,79,76,.06)}
.hiw-step i{font-size:22px;color:#0E4F4C}.hiw-step.gift i{color:#E8762B}
.hiw-step small,.hiw-cust small,.hiw-pt small{font-size:13px;font-weight:700;opacity:.85}
.hiw-step b{font-size:22px;line-height:1.2}.hiw-step em,.hiw-cust em{font-style:normal;font-weight:800;font-size:14px;opacity:.9}
.hiw-step.gift{background:#FCE8D8}
.hiw-arrow,.hiw-down{display:flex;align-items:center;justify-content:center;color:#E8762B;font-size:18px}
.hiw-down{margin:6px 0}
.hiw-split{display:flex;gap:4px;border-radius:16px;overflow:hidden}
.hiw-split>div{flex-basis:0;padding:10px 12px;display:flex;flex-direction:column;gap:2px;color:#fff}
.hiw-cust{background:#0E4F4C;min-width:120px}.hiw-pt{background:#E8762B;min-width:92px;text-align:center}
.hiw-split b{font-size:20px;line-height:1.2}
.hiw-foot{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;margin-top:12px}
.hiw-cost{background:#fff;border:2px dashed #0E4F4C;border-radius:16px;padding:8px 12px;text-align:center;display:flex;flex-direction:column}
.hiw-cost span{font-size:13px;font-weight:700}.hiw-cost b{font-size:22px;color:#0E4F4C}.hiw-cost small{font-size:12px;font-weight:700;color:#E8762B}
.hiw-foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;font-weight:700;font-size:14px}
.hiw-foot li i{color:#1F9D55}
.hiw-month{margin-top:10px;background:#DDEEEA;border-radius:12px;padding:8px 12px;font-weight:800;font-size:14px;color:#0A3735}
@media (max-width:480px){.hiw-foot{grid-template-columns:1fr}.hiw-step b{font-size:18px}}
/* customer: how much will I earn */
.earn{background:#fff;border:1.5px solid #F3D9BF;border-radius:20px;padding:12px;margin-bottom:12px}
.ehead{display:flex;flex-direction:column;margin-bottom:8px}.ehead b{font-size:17px}.ehead .muted{font-size:13px}
.erow{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:8px}
.etile{background:linear-gradient(170deg,#FFF4E8,#FCE8D8);border-radius:16px;padding:10px 6px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:0}
.etile small{font-size:12px;font-weight:700;color:#6B3A12}
.etile b{font-size:26px;line-height:1.1;color:#C2561A;direction:ltr}
.etile .ept{font-size:12px;font-weight:800;color:#6B3A12;margin-top:-2px}
.etile em{font-style:normal;margin-top:6px;background:#0E4F4C;color:#fff;border-radius:999px;padding:2px 8px;font-size:12.5px;font-weight:800;white-space:nowrap}
.enext{margin-top:8px;background:#FFF8E1;border-radius:12px;padding:6px 10px;font-size:13px;font-weight:800;color:#6B4E00}
.wonval{margin-top:6px;background:#FCE8D8;border-radius:12px;padding:8px 10px;font-weight:800;color:#6B3A12;text-align:center}
/* ===== round 2 (Nov 14): staff login, cashier confirm, customer page ===== */
.ehead{display:block;font-size:17px;margin-bottom:8px}
.earn{padding:12px 12px 10px}
.etile{padding:8px 4px}
.etile em{margin-top:4px}
/* staff login */
.login2{gap:10px}
.lgshop{display:flex;align-items:center;gap:12px;padding-bottom:10px;border-bottom:1.5px solid var(--line,#EFE7D8)}
.lgshop b{font-size:20px;display:block;line-height:1.2}.lgshop small{font-size:13px}
.people{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.person{display:flex;align-items:center;gap:12px;width:100%;min-height:62px;padding:8px 12px;border-radius:16px;border:1.5px solid #E6DCC9;background:#fff;cursor:pointer;font:inherit;color:var(--dark,#123);text-align:start}
.person:hover,.person:focus-visible{border-color:#0E4F4C;background:#F4FBF9}
.person .av{width:42px;height:42px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;flex:none}
.person b{display:block;font-size:17px}.person small{display:block;font-size:13px;color:#6A746F;font-weight:700}
.person>i{color:#9AA5A0}
.person.sel{background:#F4FBF9;border-color:#0E4F4C;margin-bottom:4px}.person.sel>i{color:#0E4F4C}
.pinin{text-align:center;font-size:30px;letter-spacing:.35em;font-weight:800}
.lgdev summary{cursor:pointer;min-height:40px;display:flex;align-items:center;font-size:14px}
.lgforgot{text-align:center;margin-top:10px;font-size:14px}
.lgjoin{display:block;text-align:center;margin-top:12px;font-weight:800;color:var(--teal,#0E4F4C);font-size:14px}
/* cashier: confirm with the amount */
.preq{gap:6px}
.pfields{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin-top:6px}
.pfield{display:flex;flex-direction:column;gap:4px;font-weight:800;font-size:14px;margin:0}
.amtwrap{position:relative;display:block}
.amtwrap input{width:100%;font-size:26px;font-weight:800;height:56px;padding-inline-end:52px}
.amtwrap em{position:absolute;inset-inline-end:14px;top:50%;transform:translateY(-50%);font-style:normal;font-weight:800;color:#6A746F}
@keyframes popin{0%{transform:scale(.85);opacity:.3}60%{transform:scale(1.06)}100%{transform:scale(1);opacity:1}}
.pop{animation:popin .45s ease}
#pinCopy.done{background:#E3F5EC;border-color:#1F9D55;color:#146C3B}
/* customer page: social row */
.appsbar.slim{padding:10px;margin-top:-34px;display:flex;flex-direction:column;gap:8px}
.apps2{display:flex;align-items:center;gap:8px}
.icorow{display:flex;gap:8px;flex:1;overflow-x:auto;scrollbar-width:none;padding:2px}
.icorow::-webkit-scrollbar{display:none}
.ico{width:44px;height:44px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:20px;color:#fff;flex:none;border:0;cursor:pointer;text-decoration:none}
.ico img{width:70%;height:70%;object-fit:contain}
.ico.ic-g{background:#fff;color:#4285F4;border:1.5px solid #E6DCC9}
.ico.ic-share{background:#EAF4F2;color:#0E4F4C}
.paypill{flex:none;height:44px;padding:0 14px;border-radius:999px;border:0;background:#0E4F4C;color:#fff;font:800 15px 'Baloo Bhaijaan 2',sans-serif;display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.paybox{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:6px;border-top:1.5px dashed #EFE7D8;padding-top:8px}
.payrow{display:flex;align-items:center;gap:8px;min-height:48px;padding:4px 8px;border-radius:14px;border:1.5px solid #EFE7D8;background:#fff;font:800 15px 'Baloo Bhaijaan 2',sans-serif;color:#123;cursor:pointer}
.payrow .ico{width:36px;height:36px;font-size:17px}
/* register */
.consent{display:flex;gap:10px;align-items:flex-start;font-weight:700;margin-top:16px;padding:10px 12px;border-radius:14px;background:#F7F2E8;cursor:pointer}
.consent input{width:22px;height:22px;flex:none;margin-top:2px;accent-color:#0E4F4C}
.consent a{color:#0E4F4C;text-decoration:underline}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.shake{animation:shake .3s ease 2;outline:2px solid #E8762B}
.forgot{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:8px;font-weight:800;font-size:14px;color:#1F9D55;min-height:44px}
/* rating after the visit */
.ratenudge{display:flex;align-items:center;gap:12px;width:100%;margin:0 0 12px;padding:10px 12px;border-radius:18px;border:1.5px solid #F3D9BF;background:#FFF8EF;cursor:pointer;font:inherit;text-align:start;color:#123}
.ratenudge .rn-ic{width:40px;height:40px;border-radius:50%;background:#F4B400;color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px;flex:none}
.ratenudge b{display:block;font-size:16px}.ratenudge small{display:block;font-size:13px;color:#6A746F;font-weight:700}
.ratecard{margin-top:14px;gap:8px;border:2px solid #F3D9BF}
.ratecard .btn{margin-top:4px}
.ratecard.sent{border-color:#BFE3CF;background:#F1FAF5}
.rated{font-weight:800;font-size:17px;color:#146C3B;text-align:center;padding:6px}
.toastlink{color:inherit;font-weight:800;text-decoration:underline;margin-inline-start:6px}
/* saved feedback */
@keyframes flashok{0%{box-shadow:0 0 0 0 rgba(31,157,85,.55)}100%{box-shadow:0 0 0 12px rgba(31,157,85,0)}}
.msg.flash{animation:flashok .7s ease-out}
.savedtoast{position:fixed;left:50%;top:18px;transform:translate(-50%,-80px);background:#146C3B;color:#fff;font-weight:800;padding:10px 18px;border-radius:999px;z-index:60;box-shadow:0 8px 24px rgba(0,0,0,.18);transition:transform .25s ease;display:flex;gap:8px;align-items:center}
.savedtoast.show{transform:translate(-50%,0)}
/* QR page settings, round 2 */
.qsx{padding-bottom:90px}
.qshead{margin:10px 0 8px}.qshead b{display:block;font-size:15px;margin-bottom:6px}
.scrollx{flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
.scrollx::-webkit-scrollbar{display:none}
.scrollx button{flex:none}
.qsec2{background:#fff;border-radius:20px;margin-top:10px;box-shadow:0 2px 10px rgba(14,79,76,.06);border:1.5px solid #EFE7D8;overflow:hidden}
.qsec2>summary{list-style:none;display:flex;align-items:center;gap:12px;padding:12px 14px;cursor:pointer;min-height:64px}
.qsec2>summary::-webkit-details-marker{display:none}
.qsec2>summary b{display:block;font-size:17px}.qsec2>summary small{display:block;font-size:13px;color:#6A746F;font-weight:700}
.qsec2 .qi{width:40px;height:40px;border-radius:12px;background:#EAF4F2;color:#0E4F4C;display:flex;align-items:center;justify-content:center;font-size:18px;flex:none}
.qsec2 .chev{color:#9AA5A0;transition:transform .2s}
.qsec2[open] .chev{transform:rotate(180deg)}
.qsec2[open]>summary{border-bottom:1.5px solid #F2ECE0}
.qbody{padding:12px 14px 14px;display:flex;flex-direction:column;gap:10px}
.qbody .radios{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.qbody .radios button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:start;padding:12px;min-height:110px}
.qbody .radios button>i{font-size:20px;color:#E8762B;margin-bottom:4px}
.qrow{display:flex;align-items:center;gap:10px;min-height:48px;font-weight:800}
.qrow small{display:block;font-size:13px;color:#6A746F;font-weight:700}
.numin{width:96px;height:46px;text-align:center;font-weight:800;font-size:18px}
.qsub{font-weight:800;font-size:15px;margin-top:6px;color:#0E4F4C}
.qgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.qgrid label{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:800;margin:0}
.qgrid .numin{width:100%}
.seg2{display:grid;grid-template-columns:1fr 1fr;background:#F2ECE0;border-radius:14px;padding:4px;gap:4px}
.seg2 button{min-height:44px;border:0;border-radius:11px;background:none;font:800 15px 'Baloo Bhaijaan 2',sans-serif;color:#4A5450;cursor:pointer}
.seg2 button.on{background:#fff;color:#0E4F4C;box-shadow:0 2px 6px rgba(0,0,0,.08)}
.linkrow>i{width:28px;text-align:center;font-size:20px;color:#0E4F4C}
.savebar{position:fixed;left:0;right:0;bottom:calc(68px + env(safe-area-inset-bottom));z-index:20;display:flex;gap:8px;padding:10px 16px;max-width:560px;margin:0 auto;background:linear-gradient(to top,#F6F1E7 70%,rgba(246,241,231,0))}
.savebar .btn{flex:1;margin:0}.savebar .btn.ghost{flex:none;width:56px;padding:0}
@media (max-width:380px){.qgrid{grid-template-columns:1fr 1fr}.qbody .radios{grid-template-columns:1fr}}
.qbody .radios button{padding:12px;padding-inline-start:40px}
.amtwrap input{padding-inline-end:14px;padding-right:56px;padding-left:14px;text-align:left}
.amtwrap em{inset-inline-end:auto;right:14px;left:auto}
.locbtns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.locbtns .btn{width:100%;margin:0}
.brmap{height:260px;border-radius:16px;margin-top:8px;border:1.5px solid #E6DCC9;z-index:0}
/* offer builder */
.okinds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.okinds button{display:flex;flex-direction:column;align-items:center;gap:4px;min-height:70px;padding:8px 4px;border-radius:16px;border:1.5px solid #E6DCC9;background:#fff;font:800 14px 'Baloo Bhaijaan 2',sans-serif;color:#2B3532;cursor:pointer}
.okinds button i{font-size:20px;color:#E8762B}
.okinds button.on{border-color:#0E4F4C;background:#EAF4F2;color:#0E4F4C;box-shadow:inset 0 0 0 1px #0E4F4C}
.ofields{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.of{display:flex;flex-direction:column;gap:4px;font-weight:800;margin:0}
.bxgy{flex-direction:row;align-items:center;gap:8px;flex-wrap:wrap;font-size:17px}
.bxgy input{width:72px;height:50px;text-align:center;font-size:22px;font-weight:800}
.oconds{margin-top:12px;border:1.5px dashed #E6DCC9;border-radius:16px;padding:0 12px}
.oconds summary{min-height:50px;display:flex;align-items:center;gap:8px;font-weight:800;cursor:pointer}
.oconds summary small{color:#6A746F;font-weight:700}
.oconds[open]{padding-bottom:12px}
.daychips{flex-wrap:wrap}
.daychips button{min-width:0;padding:0 10px}
.owhen{display:block;font-size:13px;font-weight:800;color:#B9551A;margin-top:2px}
.ocardx.later{opacity:.75}
/* install icon */
.instbtn{width:40px;height:40px;border-radius:50%;border:1.5px solid rgba(255,255,255,.45);background:rgba(255,255,255,.12);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:16px;cursor:pointer;flex:none;padding:0}
.instbtn:hover{background:rgba(255,255,255,.22)}
.instbtn.hidden{display:none}
.iostip{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:70;background:#123;color:#fff;border-radius:16px;padding:12px 16px;font-weight:700;font-size:15px;box-shadow:0 10px 30px rgba(0,0,0,.25);width:max-content;max-width:calc(100vw - 32px);text-align:center}
.iostip::after{content:'';position:absolute;bottom:-8px;left:50%;margin-left:-8px;border:8px solid transparent;border-bottom:0;border-top-color:#123}
.iostip i{color:#7FC8FF}
/* app: my places + around me */
.mine{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding:2px 2px 6px}
.mine::-webkit-scrollbar{display:none}
.minec{position:relative;flex:none;width:92px;display:flex;flex-direction:column;align-items:center;gap:2px;text-decoration:none;color:#123;background:#fff;border-radius:18px;padding:10px 6px;box-shadow:0 2px 8px rgba(14,79,76,.07)}
.minec b{font-size:13px;line-height:1.2;text-align:center;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.minec small{font-size:12px;color:#B9551A;font-weight:800}
.mdot{position:absolute;top:6px;inset-inline-end:8px;min-width:20px;height:20px;border-radius:10px;background:#E8762B;color:#fff;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;padding:0 5px}
a.ratenudge{text-decoration:none}
.nearbtn{flex:none;height:48px;padding:0 14px;border-radius:14px;border:0;background:#E8762B;color:#fff;font:800 15px 'Baloo Bhaijaan 2',sans-serif;display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.nearbtn.on{background:#fff;color:#0E4F4C}
.busy{opacity:.6;pointer-events:none}
.morebtn{display:flex;margin:10px auto;width:auto;min-width:200px}
.people{max-height:62vh;overflow:auto;padding:2px}
.oconds summary{flex-wrap:wrap;row-gap:0}.oconds summary small{flex-basis:100%;padding-inline-start:24px;margin-top:-6px;padding-bottom:6px}