/* ============================================================
   OMNY modules — home · shops · send · rides · earn · myshop ·
   mitra · account
   ============================================================ */

/* ---------- HOME ---------- */
.home-hero{padding:22px 2px 6px}
.home-greet{color:var(--mut);font-size:.86rem}
.home-greet b{color:var(--ink)}
.home-title{font-size:1.65rem;font-weight:800;letter-spacing:-.03em;line-height:1.16;margin:8px 0 16px}
.home-title span{color:var(--primary)}

.mitra-bar{display:flex;align-items:center;gap:11px;width:100%;background:var(--card);
  border:1.5px solid transparent;border-radius:50px;padding:9px 10px;box-shadow:var(--shadow);
  background-image:linear-gradient(var(--card),var(--card)),var(--grad);
  background-origin:border-box;background-clip:padding-box,border-box;transition:transform .15s}
.mitra-bar:active{transform:scale(.98)}
.mitra-orb{width:38px;height:38px;border-radius:50%;background:var(--grad);display:flex;align-items:center;
  justify-content:center;font-size:1.1rem;flex-shrink:0;box-shadow:0 4px 12px rgba(26,86,50,.4)}
.mitra-orb.big{width:44px;height:44px;font-size:1.3rem}
.mitra-hint{flex:1;min-width:0;text-align:left;color:var(--mut);font-size:.82rem;font-style:italic;transition:opacity .25s;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mitra-go{font-size:.74rem;font-weight:800;color:var(--brand);white-space:nowrap;padding-right:6px}
[data-theme="dark"] .mitra-go{color:#67C48D}

.active-strip{display:flex;flex-direction:column;gap:8px;margin:14px 0 4px}
.live-card{display:flex;align-items:center;gap:11px;background:var(--card);border:1.5px solid var(--brand);
  border-radius:16px;padding:11px 14px;cursor:pointer;box-shadow:0 6px 18px rgba(26,86,50,.15)}
.live-emoji{font-size:1.3rem}
.live-info{flex:1;min-width:0}
.live-info b{font-size:.83rem;display:block}
.live-info small{color:var(--mut);font-size:.71rem}
.live-pulse{width:10px;height:10px;border-radius:50%;background:var(--ok);animation:blink 1.4s infinite}

.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0 6px}
.svc{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:15px 8px 13px;
  display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;
  transition:transform .15s,box-shadow .2s}
.svc:active{transform:scale(.95)}
.svc:hover{box-shadow:var(--shadow)}
.svc-ic{width:46px;height:46px;border-radius:16px;display:flex;align-items:center;justify-content:center;
  font-size:1.35rem;margin-bottom:5px}
.svc.t-com .svc-ic{background:var(--leaf-50);color:var(--leaf-500);border:1px solid var(--leaf-100)}
.svc.t-move .svc-ic{background:var(--haldi-50);color:var(--haldi-700);border:1px solid var(--haldi-100)}
.svc.t-life .svc-ic{background:var(--cream-100);color:var(--char-600);border:1px solid var(--cream-200)}
[data-theme="dark"] .svc.t-com .svc-ic{background:#0F3B21;color:#67C48D;border-color:#17402A}
[data-theme="dark"] .svc.t-move .svc-ic{background:#2E2410;color:#E8A020;border-color:#3A2E14}
[data-theme="dark"] .svc.t-life .svc-ic{background:#123420;color:#7FA18C;border-color:#17402A}
.svc b{font-size:.76rem;font-weight:700}
.svc small{font-size:.63rem;color:var(--mut)}

.promo-scroll{display:flex;gap:12px;overflow-x:auto;padding:12px 0 8px;scroll-snap-type:x mandatory;scrollbar-width:none}
.promo-scroll::-webkit-scrollbar{display:none}
.promo{flex:0 0 82%;scroll-snap-align:start;border-radius:var(--r);padding:20px;display:flex;
  align-items:center;justify-content:space-between;color:#fff;cursor:pointer;min-height:130px;
  box-shadow:var(--shadow);transition:transform .15s;position:relative;overflow:hidden}
.promo:active{transform:scale(.98)}
.promo::after{content:'';position:absolute;right:-30px;top:-30px;width:130px;height:130px;border-radius:50%;
  background:rgba(255,255,255,.12)}
.promo small{font-size:.62rem;font-weight:800;letter-spacing:.12em;opacity:.85}
.promo b{display:block;font-size:1.05rem;font-weight:800;letter-spacing:-.02em;line-height:1.25;margin:6px 0 10px}
.promo em{font-style:normal;font-size:.74rem;font-weight:700;background:rgba(255,255,255,.2);
  padding:6px 12px;border-radius:50px}
.promo>span{font-size:3rem;z-index:1;filter:drop-shadow(0 6px 12px rgba(0,0,0,.25))}
.promo.p1{background:var(--leaf-700)}
.promo.p2{background:var(--haldi-500)}
.promo.p2 small,.promo.p2 b{color:var(--haldi-900)}
.promo.p2 em{background:rgba(65,44,5,.16);color:var(--haldi-900)}
.promo.p3{background:var(--char-900)}
.promo.p4{background:var(--leaf-500)}
.promo.p5{background:var(--haldi-700)}

.how-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:8px}
.how{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.how span{font-size:1.5rem}
.how b{display:block;font-size:.84rem;margin:8px 0 5px;letter-spacing:-.01em}
.how p{font-size:.72rem;color:var(--mut);line-height:1.55}

/* ---------- SHOPS ---------- */
.shop-list{display:flex;flex-direction:column;gap:12px}
.shop-card{display:flex;gap:13px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:11px;cursor:pointer;transition:transform .15s,box-shadow .2s}
.shop-card:active{transform:scale(.985)}
.shop-card:hover{box-shadow:var(--shadow)}
.shop-card.closed{opacity:.62}
.shop-tile{width:104px;min-height:104px;border-radius:15px;display:flex;align-items:center;justify-content:center;
  font-size:2.4rem;flex-shrink:0;position:relative;overflow:hidden}
.shop-tile span{filter:drop-shadow(0 4px 8px rgba(0,0,0,.3))}
.shop-offer{position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,.55);color:#fff;font-size:.56rem;
  font-weight:700;font-style:normal;padding:4px 6px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;backdrop-filter:blur(4px)}
.shop-closed{position:absolute;top:6px;left:6px;background:var(--red);color:#fff;font-size:.56rem;
  font-weight:800;font-style:normal;padding:3px 8px;border-radius:50px}
.shop-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;padding:2px 0}
.shop-line1{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.shop-line1 b{font-size:.92rem;letter-spacing:-.01em;line-height:1.25}
.rate{background:var(--haldi-50);color:var(--haldi-700);font-size:.7rem;font-weight:800;padding:3px 8px;
  border-radius:8px;white-space:nowrap;flex-shrink:0}
.rate.big{text-align:center;padding:7px 12px;border-radius:12px;font-size:.9rem}
.rate.big small{display:block;font-size:.6rem;font-weight:600;opacity:.8;margin-top:1px}
.shop-line2{font-size:.72rem;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shop-line3{display:flex;gap:6px;font-size:.72rem;color:var(--mut);align-items:center}
.b2b-tag{background:var(--ambbg);color:#9C6A0F;font-weight:700;font-size:.62rem;padding:2px 7px;border-radius:6px}
.dbadge{font-size:.64rem;font-weight:700;padding:4px 9px;border-radius:8px;display:inline-block;
  margin-top:3px;width:fit-content}
.dbadge.self{background:var(--ambbg);color:#9C6A0F}
.dbadge.partner{background:rgba(26,86,50,.1);color:var(--brand)}
[data-theme="dark"] .dbadge.partner{color:#67C48D}
.dbadge.both{background:var(--okbg);color:var(--ok)}

/* shop page */
.shop-hero{height:150px;border-radius:0 0 28px 28px;margin:0 -16px;display:flex;align-items:center;
  justify-content:center;position:relative}
.shop-hero .back{position:absolute;top:14px;left:16px}
.shop-hero-emoji{font-size:3.6rem;filter:drop-shadow(0 8px 16px rgba(0,0,0,.35))}
.shop-sheet{background:var(--bg2);border-radius:24px;margin-top:-24px;position:relative;padding-top:18px}
.shop-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.shop-head h1{font-size:1.3rem;font-weight:800;letter-spacing:-.02em}
.shop-head small{color:var(--mut);font-size:.76rem}
.shop-meta{display:flex;gap:10px;flex-wrap:wrap;align-items:center;font-size:.76rem;color:var(--mut);margin:10px 0 4px}
.veg-toggle{display:flex;align-items:center;gap:8px;font-size:.8rem;font-weight:600;margin:10px 0;cursor:pointer}
.veg-toggle input{display:none}
.veg-toggle span{width:38px;height:22px;border-radius:50px;background:var(--line);position:relative;transition:background .2s}
.veg-toggle span::after{content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;
  background:#fff;transition:transform .2s;box-shadow:0 1px 4px rgba(0,0,0,.25)}
.veg-toggle input:checked+span{background:var(--ok)}
.veg-toggle input:checked+span::after{transform:translateX(16px)}

.item-row{display:flex;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:13px;margin-bottom:10px;align-items:flex-start}
.item-row.slim{align-items:center}
.item-emoji{width:58px;height:58px;border-radius:13px;background:var(--bg2);display:flex;align-items:center;
  justify-content:center;font-size:1.7rem;flex-shrink:0}
.item-info{flex:1;min-width:0}
.item-info b{font-size:.87rem;letter-spacing:-.01em}
.item-info small{display:block;color:var(--mut);font-size:.71rem;margin-top:1px}
.item-info p{font-size:.72rem;color:var(--mut);margin-top:4px;line-height:1.45}
.item-price{font-weight:800;font-size:.9rem;margin-top:6px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.item-price s{color:var(--mut);font-weight:400;font-size:.74rem}
.item-price em{font-style:normal;color:var(--ok);font-size:.68rem;font-weight:700}
.item-price em.moq{color:#9C6A0F}
.item-act{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex-shrink:0}
.bst{font-size:.6rem;font-weight:800;color:var(--amber);white-space:nowrap}
.veg-dot{width:13px;height:13px;border-radius:3px;border:1.5px solid;display:inline-flex;align-items:center;
  justify-content:center;margin-right:5px;vertical-align:-1px}
.veg-dot::after{content:'';width:6px;height:6px;border-radius:50%}
.veg-dot.v{border-color:var(--ok)}.veg-dot.v::after{background:var(--ok)}
.veg-dot.nv{border-color:#8F3220}.veg-dot.nv::after{background:#8F3220}
.shop-foot{text-align:center;color:var(--mut);font-size:.7rem;padding:16px 0 6px}

/* cart */
.cart-items{display:flex;flex-direction:column;gap:9px}
.cart-row{display:flex;align-items:center;gap:11px;background:var(--card);border:1px solid var(--line);
  border-radius:15px;padding:12px}
.cr-emoji{font-size:1.5rem}
.cr-info{flex:1;min-width:0}
.cr-info b{font-size:.84rem;display:block}
.cr-info small{color:var(--mut);font-size:.7rem}
.cr-amt{font-size:.86rem;min-width:58px;text-align:right}

/* ---------- track map ---------- */
.track-map,.ride-map{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;position:relative;margin-top:4px}
.track-map svg,.ride-map svg{width:100%;display:block}
.track-map .grid,.ride-map .grid{stroke:var(--line);stroke-width:.6;opacity:.7}
.route-bg{fill:none;stroke:var(--line);stroke-width:4;stroke-linecap:round;stroke-dasharray:2 8}
.route{fill:none;stroke:url(#rg);stroke-width:4.5;stroke-linecap:round;transition:stroke-dashoffset 1.8s ease}
.ride-map .route{stroke:var(--brand)}
.map-lbl{font-size:10px;fill:var(--mut);text-anchor:middle;font-weight:600}
.mover circle{filter:drop-shadow(0 3px 8px rgba(26,86,50,.55))}
.mover{transition:offset-distance 1.8s ease}
.eta-pill{position:absolute;top:12px;right:12px;background:var(--ink);color:var(--bg2);font-size:.7rem;
  font-weight:700;padding:6px 12px;border-radius:50px;box-shadow:var(--shadow)}
.cab-float{animation:cabF 3.4s ease-in-out infinite}
@keyframes cabF{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

.partner-card{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:14px;margin-top:14px}
.pc-ava{width:46px;height:46px;border-radius:50%;background:var(--grad);display:flex;align-items:center;
  justify-content:center;font-size:1.3rem;flex-shrink:0}
.pc-ava.big{width:52px;height:52px;font-size:1.5rem}
.pc-info{flex:1;min-width:0}
.pc-info b{font-size:.9rem;display:block}
.pc-info small{color:var(--mut);font-size:.71rem}
.pc-otp{text-align:center;background:var(--bg2);border:1.5px dashed var(--brand);border-radius:12px;
  padding:6px 12px;font-size:.58rem;font-weight:700;color:var(--mut);letter-spacing:.08em}
.pc-otp b{display:block;font-size:1rem;color:var(--ink);letter-spacing:.2em}
.pc-call{width:40px;height:40px;border-radius:50%;background:var(--okbg);font-size:1rem;flex-shrink:0}
.rate-block .rate-stars{display:flex;gap:6px;justify-content:center}
.rate-stars button{font-size:2rem;color:var(--amber);transition:transform .15s}
.rate-stars button:active{transform:scale(1.25)}

/* ---------- SEND / RIDE ---------- */
.ptype-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.ptype{background:var(--card);border:1.5px solid var(--line);border-radius:16px;padding:15px 12px;
  text-align:left;transition:all .18s;display:flex;flex-direction:column;gap:3px}
.ptype:active{transform:scale(.96)}
.ptype.on{border-color:var(--brand);background:linear-gradient(135deg,rgba(26,86,50,.08),rgba(232,160,32,.06));
  box-shadow:0 6px 16px rgba(26,86,50,.15)}
.ptype span{font-size:1.6rem}
.ptype b{font-size:.82rem;margin-top:4px}
.ptype small{font-size:.66rem;color:var(--mut);line-height:1.4}

.pin-box{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:6px 14px;margin:6px 0 12px}
.pin-row{display:flex;align-items:center;gap:13px;padding:13px 0;cursor:pointer}
.pin-row small{font-size:.6rem;font-weight:800;letter-spacing:.09em;color:var(--mut);display:block}
.pin-row b{font-size:.9rem;display:block;margin:1px 0}
.pin-row span{font-size:.71rem;color:var(--mut);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pin-row div{flex:1;min-width:0}
.pin-row em{font-style:normal;font-size:.72rem;font-weight:700;color:var(--brand)}
[data-theme="dark"] .pin-row em{color:#67C48D}
.pin{width:13px;height:13px;border-radius:50%;flex-shrink:0;display:inline-block}
.pin.g{background:var(--ok);box-shadow:0 0 0 4px rgba(26,86,50,.15)}
.pin.r{background:var(--red);box-shadow:0 0 0 4px rgba(239,68,68,.15)}
.pin-join{border-top:1px dashed var(--line);margin-left:26px;position:relative}
.swap{position:absolute;right:0;top:-16px;width:32px;height:32px;border-radius:50%;background:var(--bg2);
  border:1px solid var(--line);font-size:.9rem}
.seg-row{display:flex;gap:8px;margin:12px 0}
.seg{flex:1;background:var(--card);border:1.5px solid var(--line);border-radius:13px;padding:11px;
  font-size:.8rem;font-weight:700;transition:all .18s}
.seg.on{border-color:var(--brand);color:var(--brand);background:rgba(26,86,50,.07)}
[data-theme="dark"] .seg.on{color:#67C48D}

.veh-row{display:flex;align-items:center;gap:13px;width:100%;text-align:left;background:var(--card);
  border:1.5px solid var(--line);border-radius:16px;padding:13px 15px;margin-bottom:9px;transition:all .18s}
.veh-row:active{transform:scale(.98)}
.veh-row.on{border-color:var(--brand);background:linear-gradient(135deg,rgba(26,86,50,.07),rgba(232,160,32,.05));
  box-shadow:0 6px 16px rgba(26,86,50,.14)}
.veh-emoji{font-size:1.7rem;flex-shrink:0}
.veh-row div{flex:1;min-width:0}
.veh-row b{font-size:.88rem}
.veh-row b small{color:var(--mut);font-weight:500}
.veh-row div>small{display:block;color:var(--mut);font-size:.7rem;margin-top:1px}
.veh-row em{font-style:normal;font-weight:800;font-size:.95rem;white-space:nowrap}

/* ---------- EARN ---------- */
.earn-hero{text-align:center;padding:34px 10px 20px}
.earn-big{font-size:3.4rem;display:inline-block;margin-bottom:10px}
.spin-slow{animation:spinS 3s linear infinite}
@keyframes spinS{to{transform:rotate(360deg)}}
.earn-hero h1{font-size:1.55rem;font-weight:800;letter-spacing:-.03em;line-height:1.2;margin-bottom:10px}
.earn-hero h1 span{color:var(--primary)}
.earn-hero p{color:var(--mut);font-size:.85rem;line-height:1.6;max-width:340px;margin:0 auto 18px}
.earn-stats{display:flex;justify-content:center;gap:10px;margin-bottom:20px}
.earn-stats div{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:11px 14px;min-width:96px}
.earn-stats b{display:block;font-size:.95rem}
.earn-stats small{color:var(--mut);font-size:.62rem;line-height:1.3;display:block;margin-top:2px}
/* seller tier cards — clean, scannable, one highlighted */
.tier-list{display:flex;flex-direction:column;gap:8px;margin:4px 0 16px}
.tier-row{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--card);border:1px solid var(--line);border-radius:14px;transition:transform .12s ease}
.tier-row.pop{border-color:var(--primary);box-shadow:0 6px 20px rgba(26,86,50,.12)}
.tier-rank{width:26px;height:26px;border-radius:50%;background:var(--grad,var(--primary));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.8rem;flex-shrink:0}
.tier-info{flex:1;min-width:0}
.tier-info b{display:block;font-size:.92rem;display:flex;align-items:center;gap:6px}
.tier-info small{color:var(--mut);font-size:.76rem}
.tier-tag{font-style:normal;font-size:.6rem;font-weight:700;background:var(--primary);color:#fff;padding:1px 7px;border-radius:20px;text-transform:uppercase;letter-spacing:.4px}
.tier-price{font-weight:800;color:var(--primary);white-space:nowrap;font-size:.9rem}
.verify-bar{height:8px;background:var(--line);border-radius:8px;max-width:280px;margin:18px auto;overflow:hidden}
.verify-bar i{display:block;height:100%;width:40%;border-radius:8px;background:var(--grad);animation:vslide 1.2s ease-in-out infinite alternate}
@keyframes vslide{from{margin-left:0}to{margin-left:60%}}

.earn-top{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin-top:16px}
.earn-me{display:flex;align-items:center;gap:12px}
.earn-me div{flex:1;min-width:0}
.earn-me b{font-size:.95rem;display:block}
.earn-me small{color:var(--mut);font-size:.71rem}
.earn-tiles{display:flex;gap:9px;margin-top:14px}
.earn-tiles.wide3{margin:16px 0 4px}
.etile{flex:1;background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:12px;text-align:center;cursor:pointer}
.earn-tiles.wide3 .etile{background:var(--card)}
.etile b{font-size:1.02rem;display:block;letter-spacing:-.01em}
.etile small{color:var(--mut);font-size:.64rem}

.job-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:15px;margin-bottom:11px}
.job-card.active{border-color:var(--brand)}
.pulse-border{border-color:var(--brand);animation:pborder 1.6s infinite}
@keyframes pborder{0%,100%{box-shadow:0 0 0 0 rgba(26,86,50,.25)}50%{box-shadow:0 0 0 6px rgba(26,86,50,.06)}}
.job-top{display:flex;align-items:center;gap:11px;margin-bottom:10px}
.job-emoji{font-size:1.5rem}
.job-top div{flex:1;min-width:0}
.job-top b{font-size:.88rem;display:block}
.job-top small{color:var(--mut);font-size:.71rem}
.job-pay{font-style:normal;font-weight:800;color:var(--ok);font-size:1rem;white-space:nowrap}
.job-route{display:flex;align-items:center;gap:7px;font-size:.76rem;flex-wrap:wrap;color:var(--ink)}
.job-route b{color:var(--mut);font-weight:600}
.job-arrow{color:var(--mut)}
.job-note{background:var(--bg2);border-radius:11px;padding:9px 12px;font-size:.74rem;color:var(--mut);margin-top:9px}
.otp-strip{background:var(--ambbg);border:1px dashed rgba(245,158,11,.45);border-radius:12px;padding:11px 13px;
  font-size:.78rem;margin-top:10px;line-height:1.5}
.otp-strip b{letter-spacing:.15em}
.bars{display:flex;gap:8px;align-items:flex-end;height:110px;padding-top:8px}
.bar{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;height:100%;justify-content:flex-end}
.bar i{width:100%;max-width:30px;border-radius:7px 7px 3px 3px;background:var(--grad);min-height:3px;transition:height .5s ease}
.bar small{font-size:.62rem;color:var(--mut)}

/* ---------- MY SHOP ---------- */
.shopdash-head{display:flex;align-items:center;gap:13px;padding:18px 0 4px}
.shopdash-head div{flex:1;min-width:0}
.shopdash-head h1{font-size:1.2rem;font-weight:800;letter-spacing:-.02em}
.shopdash-head small{color:var(--mut);font-size:.71rem;display:block;margin-top:1px}
.switch{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:.62rem;font-weight:700;
  color:var(--mut);cursor:pointer}
.switch i{width:44px;height:25px;border-radius:50px;background:var(--line);position:relative;transition:background .2s}
.switch i::after{content:'';position:absolute;top:3px;left:3px;width:19px;height:19px;border-radius:50%;
  background:#fff;transition:transform .2s;box-shadow:0 1px 4px rgba(0,0,0,.3)}
.switch.on i{background:var(--ok)}
.switch.on i::after{transform:translateX(19px)}
.switch.on{color:var(--ok)}

/* ---------- MITRA ---------- */
.mitra-shell{display:flex;flex-direction:column;height:calc(100vh - 205px);min-height:420px}
.mitra-head{display:flex;align-items:center;gap:11px;padding:14px 0 12px;border-bottom:1px solid var(--line)}
.mitra-head div{flex:1}
.mitra-head h1{font-size:1.1rem;font-weight:800}
.mitra-head small{color:var(--mut);font-size:.7rem}
.mitra-msgs{flex:1;overflow-y:auto;padding:16px 2px;display:flex;flex-direction:column;gap:10px;scrollbar-width:thin}
.msg{max-width:86%;padding:12px 15px;border-radius:18px;font-size:.85rem;line-height:1.55;animation:msgIn .25s ease}
@keyframes msgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.msg.u{align-self:flex-end;background:var(--primary);color:var(--on-primary);border-bottom-right-radius:6px}
.msg.m{align-self:flex-start;background:var(--card);border:1px solid var(--line);border-bottom-left-radius:6px}
.msg.m.typing{display:flex;gap:4px;padding:14px 16px}
.tdot{width:7px;height:7px;border-radius:50%;background:var(--mut);animation:tb 1.1s infinite}
.tdot:nth-child(2){animation-delay:.18s}.tdot:nth-child(3){animation-delay:.36s}
@keyframes tb{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-5px);opacity:1}}
.mbtn{display:block;width:100%;background:var(--grad);color:#fff;font-weight:700;font-size:.8rem;
  padding:10px 14px;border-radius:12px;margin-top:9px;box-shadow:0 4px 12px rgba(26,86,50,.3)}
.mbtn.ghost{background:var(--bg2);color:var(--ink);border:1px solid var(--line);box-shadow:none}
.mprice{display:inline-block;background:var(--bg2);border-radius:10px;padding:6px 11px;margin-top:7px;font-size:.8rem}
.malt{display:block;color:var(--mut);font-size:.68rem;margin-top:8px}
.mitra-chips{display:flex;gap:8px;overflow-x:auto;padding:8px 0;scrollbar-width:none;flex-shrink:0}
.mitra-chips::-webkit-scrollbar{display:none}
.mitra-inrow{display:flex;gap:9px;align-items:center;padding:8px 0 4px;flex-shrink:0}
.mic{width:46px;height:46px;border-radius:50%;background:var(--card);border:1.5px solid var(--line);
  font-size:1.15rem;flex-shrink:0;transition:all .2s}
.mic.listening{background:var(--red);border-color:var(--red);animation:pulse 1.2s infinite}
.mitra-inrow input{flex:1;background:var(--card);border:1.5px solid var(--line);border-radius:50px;
  padding:13px 18px;font-size:.86rem;outline:none;min-width:0}
.mitra-inrow input:focus{border-color:var(--brand)}
.msend{width:46px;height:46px;border-radius:50%;background:var(--grad);color:#fff;font-size:1.05rem;
  flex-shrink:0;box-shadow:0 4px 14px rgba(26,86,50,.4)}

/* ---------- ACCOUNT / WALLET ---------- */
.wallet-card{background:var(--grad);border-radius:22px;padding:24px 22px;color:#fff;
  box-shadow:0 14px 34px rgba(26,86,50,.4);position:relative;overflow:hidden}
.wallet-card::after{content:'🧿';position:absolute;right:-8px;bottom:-16px;font-size:5.5rem;opacity:.18}
.wallet-card small{font-size:.62rem;font-weight:800;letter-spacing:.14em;opacity:.85}
.wallet-card b{display:block;font-size:2.2rem;font-weight:800;letter-spacing:-.03em;margin:6px 0 10px}
.wallet-card span{font-size:.74rem;opacity:.9}
.topup-row{display:flex;gap:9px}
.topup{flex:1;background:var(--card);border:1.5px solid var(--line);border-radius:13px;padding:13px 6px;
  font-weight:800;font-size:.84rem;transition:all .15s}
.topup:active{transform:scale(.94);border-color:var(--brand)}
.acct-head{display:flex;align-items:center;gap:14px;padding:22px 0 6px}
.acct-head div{flex:1;min-width:0}
.acct-head h1{font-size:1.3rem;font-weight:800;letter-spacing:-.02em}
.acct-head small{color:var(--mut);font-size:.74rem}
.acct-ava{width:56px;height:56px;border-radius:50%;background:var(--grad);color:#fff;display:flex;
  align-items:center;justify-content:center;font-size:1.5rem;font-weight:800;flex-shrink:0;
  box-shadow:0 8px 20px rgba(26,86,50,.35)}

@media(max-width:380px){
  .svc-grid{grid-template-columns:repeat(3,1fr);gap:7px}
  .how-grid{grid-template-columns:1fr}
  .ptype-grid{grid-template-columns:1fr 1fr}
}

/* ============================================================
   PRO COMPONENTS — photos · tickets · property · admin · misc
   ============================================================ */

/* photo tiles */
.shop-tile{position:relative;background:var(--leaf-900)!important}
.shop-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile-ic{color:rgba(255,255,255,.9);filter:drop-shadow(0 3px 6px rgba(0,0,0,.35))}
.shop-hero{position:relative;overflow:hidden;background:var(--leaf-900)!important}
.shop-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.shop-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.45),transparent 60%)}
.shop-hero .back,.shop-hero-ic,.movie-hero{position:relative;z-index:2}
.shop-hero .back{position:absolute;top:14px;left:16px}
.shop-hero-ic{color:#fff;filter:drop-shadow(0 6px 14px rgba(0,0,0,.4))}
.trust-row{display:flex;align-items:center;gap:7px;background:var(--okbg);color:var(--ok);
  border-radius:12px;padding:10px 13px;font-size:.74rem;font-weight:600;margin:10px 0;flex-wrap:wrap}
.cr-ic{width:38px;height:38px;border-radius:11px;background:var(--bg2);display:flex;align-items:center;
  justify-content:center;color:var(--mut);flex-shrink:0}
.gps-ic{width:36px;height:36px;border-radius:50%;background:rgba(26,86,50,.1);color:var(--brand);
  display:flex;align-items:center;justify-content:center}
.place-row.gps{border-color:var(--brand)}
.qty-line{display:flex;align-items:center;justify-content:space-between;padding:12px 2px}
.agree-row.slim{padding:11px 13px;margin:12px 0 0;font-size:.78rem}

/* mega directory */
.mega-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mega{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px;text-align:left;
  display:flex;flex-direction:column;gap:4px;transition:all .18s}
.mega:hover{box-shadow:var(--shadow)}
.mega:active{transform:scale(.97)}
.mega span{color:var(--brand)}
.mega b{font-size:.8rem;letter-spacing:-.01em}
.mega small{font-size:.64rem;color:var(--mut);line-height:1.45}
.dir-grid{display:grid;grid-template-columns:1fr;gap:12px}
.dir-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.dir-head{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.dir-head span{color:var(--brand)}
.dir-head b{font-size:.9rem}
.dir-subs{display:flex;flex-wrap:wrap;gap:7px}
.dir-sub{background:var(--bg2);border:1px solid var(--line);border-radius:50px;padding:6px 12px;
  font-size:.72rem;font-weight:500;color:var(--mut);transition:all .15s}
.dir-sub:hover{color:var(--brand);border-color:var(--brand)}

/* tickets — date strip · shows · legend */
.date-strip{display:flex;gap:8px;overflow-x:auto;padding:6px 0 10px;scrollbar-width:none}
.date-strip::-webkit-scrollbar{display:none}
.date-pill{min-width:56px;background:var(--card);border:1.5px solid var(--line);border-radius:14px;
  padding:8px 6px;text-align:center;transition:all .18s;flex-shrink:0}
.date-pill small{display:block;font-size:.6rem;font-weight:700;color:var(--mut);text-transform:uppercase}
.date-pill b{font-size:1.05rem}
.date-pill.on{background:var(--ink);border-color:var(--ink);color:var(--bg2)}
.date-pill.on small{color:var(--bg2);opacity:.7}
.legend{display:flex;gap:16px;justify-content:center;padding:10px 0;font-size:.68rem;color:var(--mut)}
.legend span{display:flex;align-items:center;gap:5px}
.lg{width:9px;height:9px;border-radius:50%;display:inline-block}
.lg.avail,.lg.savail{background:var(--ok)}
.lg.fill{background:var(--amber)}
.lg.full{background:var(--red)}
.lg.ssel{background:var(--brand)}
.lg.ssold{background:var(--line)}
.movie-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.movie-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  cursor:pointer;transition:transform .15s,box-shadow .2s}
.movie-card:hover{box-shadow:var(--shadow)}
.movie-card:active{transform:scale(.97)}
.poster{aspect-ratio:3/4;padding:14px;display:flex;flex-direction:column;justify-content:flex-end;
  gap:3px;position:relative;color:#FAF6EE;background:var(--leaf-700)!important}
.movie-card:nth-child(3n+2) .poster{background:var(--char-900)!important}
.movie-card:nth-child(3n) .poster{background:var(--haldi-700)!important}
.poster b{font-size:1.05rem;font-weight:800;letter-spacing:-.02em;line-height:1.15;text-shadow:0 2px 8px rgba(0,0,0,.4)}
.poster small{font-size:.64rem;opacity:.85;font-weight:600;letter-spacing:.06em}
.poster-rate{position:absolute;top:10px;right:10px;background:rgba(0,0,0,.5);backdrop-filter:blur(4px);
  border-radius:8px;padding:4px 8px;font-size:.7rem;font-weight:800}
.movie-body{padding:11px 13px}
.movie-body b{font-size:.85rem;display:block}
.movie-body small{display:block;color:var(--mut);font-size:.68rem;margin-top:2px}
.movie-hero{color:#fff;text-align:center;padding:0 20px}
.movie-hero b{font-size:1.5rem;font-weight:800;display:block;text-shadow:0 2px 10px rgba(0,0,0,.45)}
.movie-hero small{font-size:.75rem;opacity:.9}
.movie-about{font-size:.82rem;color:var(--mut);line-height:1.6;margin:8px 0}
.show-row{display:flex;gap:9px;flex-wrap:wrap;padding:4px 0}
.show-pill{border:1.5px solid var(--ok);color:var(--ok);border-radius:12px;padding:9px 14px;
  font-weight:700;font-size:.82rem;transition:all .15s;text-align:center}
.show-pill small{display:block;font-size:.56rem;font-weight:600;margin-top:2px;opacity:.8}
.show-pill:active{transform:scale(.95)}
.show-pill.fill{border-color:var(--amber);color:#9C6A0F}
.show-pill.full{border-color:var(--line);color:var(--mut);opacity:.7}

/* seat map */
.screen-arc{text-align:center;margin:6px 0 12px}
.screen-arc svg{width:min(300px,80%)}
.screen-arc small{display:block;font-size:.58rem;letter-spacing:.25em;color:var(--mut);font-weight:700}
.seat-map{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 10px;overflow-x:auto}
.tier-lbl{font-size:.62rem;font-weight:800;letter-spacing:.1em;color:var(--mut);text-transform:uppercase;
  padding:10px 0 6px;text-align:center;border-top:1px dashed var(--line);margin-top:6px}
.tier-lbl:first-child{border-top:none;margin-top:0}
.seat-row{display:flex;align-items:center;gap:4px;justify-content:center;margin-bottom:5px}
.seat-row>small{width:14px;font-size:.6rem;color:var(--mut);font-weight:700}
.aisle{width:12px}
.seat{width:24px;height:22px;border-radius:6px 6px 3px 3px;border:1.5px solid var(--ok);background:transparent;
  font-size:.52rem;font-weight:700;color:var(--ok);transition:all .12s;flex-shrink:0}
.seat:active{transform:scale(.9)}
.seat.sel{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 3px 8px rgba(26,86,50,.4)}
.seat.sold{background:var(--line);border-color:var(--line);color:transparent;cursor:not-allowed}
.seat-bar{position:sticky;bottom:86px;background:var(--card);border:1.5px solid var(--brand);border-radius:16px;
  padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px;
  box-shadow:var(--shadow-lg)}
.seat-bar b{font-size:.92rem}
.seat-bar small{color:var(--mut);font-size:.7rem;display:block}
.seat-bar .btn-main{margin:0}

/* digital ticket */
.ticket-card{background:var(--card);border:1px solid var(--line);border-radius:22px;overflow:hidden;
  max-width:420px;margin:0 auto 14px;box-shadow:var(--shadow)}
.ticket-top{padding:20px;color:#FAF6EE;background:var(--leaf-700)!important}
.ticket-top b{font-size:1.15rem;font-weight:800;display:block}
.ticket-top small{opacity:.9;font-size:.76rem}
.ticket-mid{display:flex;gap:16px;align-items:center;padding:18px 20px}
.qr{width:110px;height:110px;color:var(--ink);flex-shrink:0}
.ticket-meta b{font-size:1rem;letter-spacing:.05em;display:block}
.ticket-meta small{display:block;color:var(--mut);font-size:.72rem;margin-top:3px}
.ticket-rip{border-top:2px dashed var(--line);margin:0 14px;position:relative}
.ticket-rip::before,.ticket-rip::after{content:'';position:absolute;top:-9px;width:18px;height:18px;
  border-radius:50%;background:var(--bg2)}
.ticket-rip::before{left:-24px}.ticket-rip::after{right:-24px}
.ticket-foot{padding:12px 20px 16px;font-size:.68rem;color:var(--mut);display:flex;align-items:center;gap:6px}

/* events */
.event-list{display:flex;flex-direction:column;gap:12px}
.event-card{display:flex;gap:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;cursor:pointer;transition:box-shadow .2s}
.event-card:hover{box-shadow:var(--shadow)}
.event-img{width:120px;min-height:120px;position:relative;flex-shrink:0;background:var(--leaf-900)!important}
.event-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.event-img em{position:absolute;bottom:8px;left:8px;z-index:2;background:rgba(0,0,0,.55);color:#fff;
  font-size:.58rem;font-weight:700;font-style:normal;padding:3px 8px;border-radius:50px;backdrop-filter:blur(4px)}
.event-body{padding:13px 14px;flex:1;min-width:0}
.event-body>b{font-size:.9rem;display:block;margin-bottom:4px}
.event-body small{display:block;color:var(--mut);font-size:.71rem;margin-top:2px}
.event-foot{display:flex;align-items:baseline;gap:5px;margin-top:8px}
.event-foot b{font-size:.9rem}
.event-foot span{font-size:.66rem;color:var(--mut)}
.event-foot em{margin-left:auto;font-style:normal;color:var(--brand);font-weight:700;font-size:.74rem}

/* property & hotels */
.prop-list{display:flex;flex-direction:column;gap:14px}
.prop-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  transition:box-shadow .2s}
.prop-card:hover{box-shadow:var(--shadow)}
.prop-img{height:160px;position:relative;background:var(--leaf-900)!important}
.prop-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.prop-img .tile-ic{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.prop-verified{position:absolute;top:10px;left:10px;z-index:2;background:rgba(0,0,0,.55);color:#fff;
  font-size:.62rem;font-weight:700;font-style:normal;padding:5px 10px;border-radius:50px;backdrop-filter:blur(4px);
  display:flex;align-items:center;gap:4px}
.prop-body{padding:14px}
.prop-price{font-size:1.15rem;font-weight:800;letter-spacing:-.02em}
.prop-price small{font-size:.7rem;color:var(--mut);font-weight:500}
.prop-body>b{font-size:.88rem;display:block;margin:3px 0 2px}
.prop-body>small{display:block;color:var(--mut);font-size:.71rem}
.prop-meta{display:flex;gap:8px;margin:8px 0}
.prop-meta span{background:var(--bg2);border-radius:8px;padding:4px 10px;font-size:.68rem;font-weight:600}
.prop-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:4px}
.prop-tags i{font-style:normal;font-size:.64rem;color:var(--mut);background:var(--bg2);
  border-radius:6px;padding:3px 8px}

/* ---------- design voice: texture · rhythm · editorial ---------- */
.sec-head h2::before{content:'';width:16px;height:3px;border-radius:3px;background:var(--grad);flex-shrink:0}
.home-hero{position:relative;margin:0 -16px;padding:24px 16px 18px;border-radius:0 0 30px 30px;
  background:radial-gradient(420px 220px at 12% 0%,rgba(26,86,50,.14),transparent 70%),
             radial-gradient(380px 200px at 95% 15%,rgba(232,160,32,.12),transparent 65%),
             radial-gradient(300px 180px at 60% 100%,rgba(26,86,50,.07),transparent 70%),var(--card)}
.home-hero::after{content:'';position:absolute;inset:0;border-radius:0 0 30px 30px;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .04 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E")}
.home-hero>*{position:relative;z-index:1}
.home-title{font-weight:800;letter-spacing:-.035em}
.band-ink{display:block;margin:30px -16px 0;padding:8px 16px 30px;
  background:var(--leaf-900);border-radius:34px 34px 0 0}
.band-ink .sec-head h2{color:#FAF6EE}
.band-ink .how{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.1)}
.band-ink .how b{color:#FAF6EE}
.band-ink .how p{color:#7FA18C}
.band-ink .how span{color:#E8A020}
.band-ink+.foot-note{background:var(--leaf-900);margin:0 -16px;padding:18px 16px 26px;color:#7FA18C}
.band-ink+.foot-note .dim{color:#6b7090}
.rate.on-img{position:absolute;top:8px;right:8px;z-index:2;background:rgba(6,24,13,.8);color:#E8A020;
  backdrop-filter:blur(6px);border:1px solid rgba(232,160,32,.4)}
.shop-card .shop-line1 b{font-family:var(--disp);font-size:.98rem}
.shop-card{box-shadow:0 2px 10px rgba(19,20,43,.04)}
.shop-card:hover{transform:translateY(-2px);transition:all .22s}
.shop-card.featured{grid-column:1/-1}
.shop-card.featured .shop-tile{width:150px;min-height:150px}
.feat-tag{display:inline-flex;align-items:center;gap:5px;color:var(--brand);font-size:.62rem;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase}
[data-theme="dark"] .feat-tag{color:#67C48D}
.chip.locked{opacity:.45}
.chip.locked .ic{color:var(--mut)}
.chip .ic{color:var(--brand)}
[data-theme="dark"] .chip .ic{color:#67C48D}
.chip.on .ic{color:inherit}
.svc{box-shadow:0 2px 8px rgba(19,20,43,.03)}
.svc:hover{transform:translateY(-2px)}
/* hero art (purity seal) fills the desktop right column; hidden on mobile */
.hero-art{display:none}
@media(min-width:1024px){
  .home-hero{margin:0 -32px;padding:40px 40px 30px;display:grid;grid-template-columns:1.15fr .85fr;align-items:center;column-gap:32px}
  .hero-copy{min-width:0}
  .hero-art{display:flex;align-items:center;justify-content:center;color:var(--primary)}
  .hero-art svg{width:min(280px,24vw);height:auto;opacity:.9;filter:drop-shadow(0 10px 34px rgba(26,86,50,.18))}
  .band-ink{margin:34px -32px 0;padding:12px 32px 34px}
  .band-ink+.foot-note{margin:0 -32px;padding:20px 32px 30px}
  .shop-card.featured .shop-tile{width:280px;min-height:190px}
  .shop-card.featured .shop-line1 b{font-size:1.25rem}
}

/* usp + admin row */
.usp-strip{display:inline-flex;align-items:center;gap:7px;background:var(--okbg);color:var(--ok);
  border-radius:50px;padding:8px 15px;font-size:.72rem;font-weight:600;margin:2px 0 16px;flex-wrap:wrap;border:1px solid var(--leaf-100)}
.role-row.admin{border-color:var(--brand);background:linear-gradient(135deg,rgba(26,86,50,.06),rgba(232,160,32,.05))}
.role-row.admin>span{color:var(--brand)}

/* gamified earn */
.waiting-strip{background:var(--leaf-700);border-radius:16px;padding:14px 16px;
  color:#fff;margin-top:12px}
.waiting-amt small{font-size:.58rem;font-weight:800;letter-spacing:.14em;opacity:.8}
.waiting-amt b{display:block;font-size:1.7rem;font-weight:800;letter-spacing:-.02em}
.waiting-sub{font-size:.7rem;opacity:.85;margin-top:3px}

/* ============================================================
   DESKTOP GRIDS
   ============================================================ */
@media(min-width:1024px){
  .home-title{font-size:2.2rem}
  .mitra-bar{max-width:640px}
  .svc-grid{grid-template-columns:repeat(5,1fr)}
  .shop-list{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .how-grid{grid-template-columns:repeat(4,1fr)}
  .mega-grid{grid-template-columns:repeat(4,1fr)}
  .dir-grid{grid-template-columns:repeat(3,1fr)}
  .promo{flex:0 0 32%}
  .ptype-grid{grid-template-columns:repeat(4,1fr)}
  .movie-grid{grid-template-columns:repeat(4,1fr)}
  .prop-list{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .event-list{display:grid;grid-template-columns:1fr 1fr}
  .mitra-shell{max-width:780px;margin:0 auto;height:calc(100vh - 240px)}
  .earn-tiles,.earn-top,.waiting-strip{max-width:none}
  .seat{width:30px;height:26px;font-size:.6rem}
  .cart-items,.card-block,.pin-box,.timeline,.track-map,.ride-map{max-width:720px;margin-left:auto;margin-right:auto}
  .btn-main.wide,.warn-strip,.tip-strip,.offer-strip,.b2b-strip{max-width:720px;margin-left:auto;margin-right:auto;display:flex;align-items:center;justify-content:center;gap:8px}
  .job-card,.order-row,.place-row,.role-row,.doc-row,.veh-row,.radio-row,.agree-row,.item-row{max-width:720px;margin-left:auto;margin-right:auto}
  .wiz-dots,.wiz-q,.fld,.fld-pair,.search-row,.seat-bar,.ticket-card{max-width:720px;margin-left:auto;margin-right:auto}
  .earn-hero p{max-width:460px}
}

/* ---------- depth pass: levels · stock tags · cancel ---------- */
.lvl-bar{height:8px;background:var(--surface-2);border-radius:6px;overflow:hidden;margin:6px 0 8px}
.lvl-bar i{display:block;height:100%;background:var(--accent);border-radius:6px;transition:width .4s}
.out-tag{font-size:.6rem;font-weight:800;color:var(--chilli-700);background:var(--chilli-50);border-radius:5px;padding:2px 6px;margin-left:6px;font-style:normal}
[data-theme="dark"] .out-tag{background:#33150D;color:#E06A4F}
.btn-main.ghost.red{color:var(--red);border-color:var(--red)}
.lnk.red{color:var(--red)}


/* ---------- EARN pitch: conversion page ---------- */
.pitch-hero{position:relative;margin:8px -16px 0;padding:30px 20px 26px;background:var(--leaf-900);
  border-radius:0 0 30px 30px;color:#FAF6EE;overflow:hidden}
.pitch-hero::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.4;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E")}
.pitch-hero>*{position:relative;z-index:1}
.pitch-hero h1{font-family:var(--disp);font-size:1.8rem;font-weight:800;letter-spacing:-.03em;line-height:1.12;margin:12px 0 10px}
.pitch-hero h1 span{color:#E8A020}
.pitch-hero p{font-size:.84rem;line-height:1.65;color:#B9CDC0;max-width:480px}
.pitch-live{display:inline-flex;align-items:center;gap:7px;background:rgba(232,160,32,.14);color:#F6DFAE;
  border:1px solid rgba(232,160,32,.3);font-size:.68rem;font-weight:700;padding:6px 12px;border-radius:50px}
.pitch-live i{width:7px;height:7px;border-radius:50%;background:#E8A020;animation:blink 1.4s infinite}
.hero-cta{margin-top:16px}
.btn-cta{flex:1;background:#E8A020;color:#412C05;border:none;border-radius:14px;padding:13px 10px;
  font-size:.82rem;font-weight:800;font-family:inherit;transition:transform .15s;cursor:pointer}
.btn-cta:active{transform:scale(.97)}
.btn-cta.ghost{background:transparent;color:#FAF6EE;border:1.5px solid rgba(250,246,238,.35)}
.teaser-scroll{display:flex;gap:10px;overflow-x:auto;padding:2px 0 10px;scrollbar-width:none}
.teaser-scroll::-webkit-scrollbar{display:none}
.teaser-card{flex:0 0 168px;background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:13px;display:flex;flex-direction:column;gap:5px;cursor:pointer;transition:transform .15s,box-shadow .2s}
.teaser-card:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.teaser-card b{font-size:.76rem;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.teaser-card small{font-size:.63rem;color:var(--mut);display:flex;align-items:center;gap:3px;flex-wrap:wrap}
.tz-ic{width:32px;height:32px;border-radius:10px;background:var(--haldi-50);color:var(--haldi-700);
  display:flex;align-items:center;justify-content:center}
[data-theme="dark"] .tz-ic{background:#2E2410;color:#E8A020}
.tz-foot{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:6px;border-top:1px dashed var(--line)}
.tz-foot em{font-style:normal;font-family:var(--disp);font-weight:800;color:var(--haldi-700);font-size:.92rem}
[data-theme="dark"] .tz-foot em{color:#E8A020}
.tz-foot span{font-size:.63rem;color:var(--mut)}
.teaser-card.more{align-items:center;justify-content:center;text-align:center;background:var(--primary-tint);border-style:dashed}
.teaser-card.more b{color:var(--primary)}
.tz-arrow{color:var(--primary)}
.st-ic{width:28px;height:28px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;margin-bottom:6px}
.st-ic.t1{background:var(--leaf-50);color:var(--leaf-500)}
.st-ic.t2{background:var(--haldi-50);color:var(--haldi-700)}
.st-ic.t3{background:var(--cream-100);color:var(--char-600)}
[data-theme="dark"] .st-ic.t1{background:#0F3B21;color:#67C48D}
[data-theme="dark"] .st-ic.t2{background:#2E2410;color:#E8A020}
[data-theme="dark"] .st-ic.t3{background:#123420;color:#7FA18C}
.steps-strip{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:16px 14px;margin:14px 0}
.step{display:flex;align-items:center;gap:9px;flex:1;min-width:0}
.step i{width:26px;height:26px;border-radius:50%;background:var(--primary);color:var(--on-primary);
  font-style:normal;font-weight:800;font-size:.75rem;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.step b{font-size:.74rem;display:block}
.step small{font-size:.6rem;color:var(--mut);line-height:1.3;display:block}
.step-line{height:2px;flex:0 0 14px;background:var(--line);border-radius:2px}
.how-grid.tinted .how:nth-child(odd) span{color:var(--leaf-500)}
.how-grid.tinted .how:nth-child(even) span{color:var(--haldi-700)}
[data-theme="dark"] .how-grid.tinted .how:nth-child(odd) span{color:#67C48D}
[data-theme="dark"] .how-grid.tinted .how:nth-child(even) span{color:#E8A020}
.quote-strip{display:flex;gap:12px;align-items:flex-start;background:var(--accent-tint);border:1px solid var(--haldi-100);
  border-radius:var(--r);padding:16px;margin:4px 0 14px;font-size:.84rem;line-height:1.55;font-style:italic}
.quote-strip small{display:block;margin-top:6px;font-style:normal;font-size:.68rem;color:var(--mut);font-weight:600}
.q-ava{width:36px;height:36px;border-radius:50%;background:var(--card);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--haldi-700)}
[data-theme="dark"] .quote-strip{border-color:#3A2E14}
[data-theme="dark"] .q-ava{color:#E8A020}
@media(min-width:1024px){
  .pitch-hero{margin:8px -32px 0;padding:44px 32px 36px}
  .pitch-hero h1{font-size:2.5rem}
  .hero-cta{max-width:480px}
  .teaser-card{flex-basis:196px}
}


/* ---------- earner-type toggle (Earn section) ---------- */
.earn-seg{display:flex;gap:6px;background:var(--surface-2);border:1px solid var(--line);
  border-radius:16px;padding:5px;margin:6px 0 14px}
.earn-seg button{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;
  background:transparent;border:none;border-radius:12px;padding:10px 4px;cursor:pointer;
  color:var(--mut);font-family:inherit;font-size:.7rem;font-weight:700;transition:all .18s}
.earn-seg button .ic{color:var(--mut);transition:color .18s}
.earn-seg button.on{background:var(--card);color:var(--ink);box-shadow:var(--shadow)}
.earn-seg button.on .ic{color:var(--primary)}
[data-theme="dark"] .earn-seg button.on .ic{color:#67C48D}
.earn-seg button:active{transform:scale(.96)}

/* ---------- real route maps (Send / Rides) ---------- */
.route-live{position:relative;margin:12px 0 4px;border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}
.route-canvas{width:100%;height:180px;background:var(--surface-2)}
.route-canvas.full{height:200px}
.route-fig{position:absolute;left:10px;bottom:10px;background:var(--card);color:var(--ink);font-size:.74rem;
  font-weight:800;padding:6px 12px;border-radius:50px;box-shadow:var(--shadow);z-index:500}
.ride-map{position:relative;margin:6px 0 12px;border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}
.ride-map .eta-pill{z-index:500}
.leaflet-container{background:var(--surface-2)!important;font:inherit}

/* ---------- splash seal (video spec) ---------- */
#splash{position:fixed;inset:0;z-index:9999;background:var(--bg,#FAF6EE);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;transition:opacity .45s ease}
#splash.bye{opacity:0;pointer-events:none}
#splash .seal{animation:sealIn .7s cubic-bezier(.2,1.4,.4,1)}
#splash .splash-word{font-family:'Bricolage Grotesque',Inter,sans-serif;font-weight:800;font-size:2.1rem;
  color:#2B2B26;letter-spacing:-.5px}
#splash .splash-word b{color:#1A5632}
#splash .splash-line{font-size:.8rem;font-weight:600;color:#8A8578;letter-spacing:2px;text-transform:uppercase}
@keyframes sealIn{0%{transform:scale(.6) rotate(-14deg);opacity:0}100%{transform:scale(1) rotate(0);opacity:1}}

/* ---------- live tracking real map ---------- */
.track-map.real{position:relative;margin:4px 0 14px;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--shadow)}
.track-map.real .route-canvas{height:230px}
.track-map.real .eta-pill{z-index:500}

/* ---------- named-inspector line + VERIFIED badge (video spec) ---------- */
.inspector-line{display:flex;align-items:center;gap:7px;margin:8px 0 2px;padding:9px 12px;border-radius:12px;
  background:color-mix(in srgb,var(--primary) 7%,transparent);border:1px dashed color-mix(in srgb,var(--primary) 35%,transparent);
  font-size:.76rem;color:var(--ink)}
.inspector-line b{color:var(--primary)}
.inspector-line svg{color:var(--primary);flex:none}
.vbadge{display:inline-flex;align-items:center;gap:3px;margin-left:7px;padding:2px 7px;border-radius:50px;
  background:var(--primary);color:#fff;font-size:.55rem;font-weight:800;letter-spacing:.8px;vertical-align:2px}
.vbadge svg{width:8px;height:8px}

/* ---------- "Your usual" one-tap reorder strip ---------- */
.usual-strip{display:flex;gap:9px;overflow-x:auto;padding:2px 2px 6px;scrollbar-width:none;margin:0 0 6px}
.usual-strip::-webkit-scrollbar{display:none}
.usual{flex:none;display:flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:9px 13px;cursor:pointer;font-family:inherit;text-align:left;box-shadow:var(--shadow)}
.usual .u-ic{width:32px;height:32px;border-radius:10px;background:color-mix(in srgb,var(--primary) 10%,transparent);
  display:flex;align-items:center;justify-content:center;color:var(--primary);flex:none}
.usual b{display:block;font-size:.76rem;color:var(--ink);max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.usual small{font-size:.66rem;color:var(--mut);font-weight:600}
.usual em{font-style:normal;font-size:.68rem;font-weight:800;color:var(--primary);white-space:nowrap}

/* ---------- One promise, kept ---------- */
.promise-page{display:flex;flex-direction:column;align-items:center;text-align:center;padding:26px 18px 10px}
.promise-page .seal{margin-bottom:18px}
.promise-page h1{font-family:'Bricolage Grotesque',Inter,sans-serif;font-weight:800;font-size:1.7rem;color:var(--ink);margin:0 0 22px}
.promise-list{display:flex;flex-direction:column;gap:13px;width:100%;max-width:420px;margin:0 auto 22px;text-align:left}
.promise-row{display:flex;align-items:flex-start;gap:11px;background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:13px 15px;box-shadow:var(--shadow)}
.promise-row i{width:26px;height:26px;border-radius:50%;background:color-mix(in srgb,var(--haldi,#E8A020) 22%,transparent);
  color:#8a5c05;display:flex;align-items:center;justify-content:center;flex:none;font-style:normal}
[data-theme="dark"] .promise-row i{color:#E8A020}
.promise-row b{display:block;font-size:.86rem;color:var(--ink)}
.promise-row small{font-size:.74rem;color:var(--mut);line-height:1.45}
.promise-foot{font-size:.72rem;color:var(--mut);font-weight:700;letter-spacing:1.2px;text-transform:uppercase;margin:6px 0 14px}

/* ---------- partner online/offline (Go online) ---------- */
.online-bar{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:14px 16px;margin:2px 0 14px;box-shadow:var(--shadow)}
.online-bar .ob-dot{width:11px;height:11px;border-radius:50%;background:var(--mut);flex:none}
.online-bar.on .ob-dot{background:#1A9A50;box-shadow:0 0 0 4px color-mix(in srgb,#1A9A50 22%,transparent);animation:pulse 1.6s infinite}
.online-bar b{font-size:.95rem;color:var(--ink)}
.online-bar small{display:block;font-size:.72rem;color:var(--mut)}
.online-bar .ob-info{flex:1}
.ob-switch{position:relative;width:54px;height:30px;border-radius:50px;border:none;cursor:pointer;
  background:var(--surface-2);border:1px solid var(--line);transition:background .2s;flex:none}
.ob-switch::after{content:'';position:absolute;top:2px;left:2px;width:24px;height:24px;border-radius:50%;
  background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.25);transition:transform .2s}
.ob-switch.on{background:#1A5632}
.ob-switch.on::after{transform:translateX(24px)}

/* ---------- promise strip (home footer) ---------- */
.promise-strip{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;margin:16px 0 4px;
  padding:13px 16px;border-radius:var(--r);border:1px dashed color-mix(in srgb,var(--primary) 45%,transparent);
  background:color-mix(in srgb,var(--primary) 6%,transparent);color:var(--ink);font-family:inherit;
  font-size:.78rem;cursor:pointer;flex-wrap:wrap}
.promise-strip b{color:var(--primary)}
.promise-strip svg{color:var(--primary);flex:none}
.sec-head.slim{margin:10px 0 8px}
.sec-head.slim h2{font-size:.95rem}

/* ---------- cinema blocks (movie showtimes) ---------- */
.cinema-block{border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;margin:0 0 10px;background:var(--card)}
.cinema-head{display:flex;flex-direction:column;gap:2px;margin-bottom:9px}
.cinema-head b{font-size:.92rem;color:var(--ink)}
.cinema-head small{font-size:.72rem;color:var(--mut);display:flex;align-items:center;gap:4px}
.ticket-fnb{padding:9px 16px;font-size:.74rem;color:var(--mut);border-top:1px dashed var(--line)}

/* ---------- dining menu peek ---------- */
.dine-menu-peek{font-size:.72rem;color:var(--mut);margin:4px 0 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.menu-peek{background:var(--surface-2);border-radius:12px;padding:10px 12px;margin:8px 0 12px}
.menu-peek small.dim{display:block;margin-bottom:4px;font-weight:700}

/* ---------- ride now / schedule segment ---------- */
.when-seg{display:flex;gap:6px;background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:5px;margin:2px 0 10px}
.when-seg button{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;background:transparent;border:none;
  border-radius:10px;padding:9px 4px;cursor:pointer;color:var(--mut);font-family:inherit;font-size:.8rem;font-weight:700}
.when-seg button.on{background:var(--card);color:var(--ink);box-shadow:var(--shadow)}
.when-seg button.on svg{color:var(--primary)}

/* ---------- sort & filter bar (market-level) ---------- */
.sortbar{display:flex;align-items:center;gap:8px;margin:4px 0 10px;position:sticky;top:0;z-index:40}
.sortbtn{flex:none;display:inline-flex;align-items:center;gap:5px;background:var(--card);border:1px solid var(--line);
  border-radius:50px;padding:7px 13px;font-family:inherit;font-size:.76rem;font-weight:700;color:var(--ink);cursor:pointer}
.sortbtn.on{background:var(--primary);color:#fff;border-color:var(--primary)}
.sortbtn.on svg{color:#fff}
.sortscroll{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;flex:1}
.sortscroll::-webkit-scrollbar{display:none}
.sortchip{flex:none;background:var(--surface-2);border:1px solid var(--line);border-radius:50px;padding:7px 13px;
  font-family:inherit;font-size:.76rem;font-weight:600;color:var(--mut);cursor:pointer;white-space:nowrap}
.sortchip.on{background:color-mix(in srgb,var(--primary) 12%,transparent);color:var(--primary);border-color:color-mix(in srgb,var(--primary) 40%,transparent)}

/* ---------- papers & verification ---------- */
.accent-block{border-color:color-mix(in srgb,var(--primary) 30%,var(--line))}
.paperless-note{display:flex;gap:11px;align-items:flex-start;background:color-mix(in srgb,var(--primary) 7%,transparent);
  border:1px solid color-mix(in srgb,var(--primary) 25%,transparent);border-radius:14px;padding:13px 15px;margin:0 0 14px}
.paperless-note svg{color:var(--primary);flex:none;margin-top:1px}
.paperless-note b{display:block;font-size:.9rem;color:var(--ink)}
.paperless-note small{color:var(--mut);font-size:.78rem;line-height:1.45}
.verify-rows{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.verify-row{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line)}
.verify-row.ok{background:color-mix(in srgb,var(--primary) 8%,transparent);border-color:color-mix(in srgb,var(--primary) 25%,transparent)}
.verify-row>span{width:34px;height:34px;border-radius:10px;background:var(--card);display:flex;align-items:center;justify-content:center;color:var(--mut);flex:none}
.verify-row.ok>span{color:var(--primary)}
.verify-row>div{flex:1;min-width:0}
.verify-row b{display:block;font-size:.84rem;color:var(--ink)}
.verify-row small{font-size:.72rem;color:var(--mut)}
.doc-grid{display:grid;grid-template-columns:1fr;gap:12px}
.doc-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:15px 16px;box-shadow:var(--shadow);transition:transform .16s,box-shadow .16s}
.doc-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.doc-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.doc-top b{font-size:.98rem;color:var(--ink);font-family:var(--disp)}
.doc-top em{font-style:normal;font-weight:800;color:var(--primary);font-size:1.05rem;white-space:nowrap}
.doc-card p{font-size:.82rem;color:var(--mut);line-height:1.5;margin:6px 0 10px}
.doc-meta{display:flex;gap:12px;font-size:.72rem;color:var(--text-3);margin-bottom:6px;flex-wrap:wrap}
.doc-meta span{display:inline-flex;align-items:center;gap:4px}
.doc-need{font-size:.7rem;color:var(--text-3);background:var(--surface-2);border-radius:8px;padding:6px 9px;margin-bottom:11px}
.doc-req-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:8px}
.doc-req-head em{font-style:normal;font-size:.76rem;font-weight:700;color:var(--ok)}

/* ---------- legal & policy pages ---------- */
.legal{max-width:640px;margin:0 auto;padding:2px 2px 20px;line-height:1.6}
.legal h3{font-family:'Bricolage Grotesque',Inter,sans-serif;font-size:1rem;color:var(--ink);margin:20px 0 6px}
.legal p, .legal li{color:var(--ink);font-size:.9rem;margin:0 0 8px}
.legal ul, .legal ol{margin:0 0 10px;padding-left:20px}
.legal li{margin-bottom:5px}
.legal b{color:var(--ink)}
.legal a{color:var(--primary);cursor:pointer;text-decoration:underline}
.legal .card-block{margin:10px 0}
.legal-foot{margin-top:22px;padding-top:14px;border-top:1px solid var(--line);font-size:.76rem;color:var(--mut)}
.foot-note a{color:var(--primary);cursor:pointer}

/* ---------- first-run consent (DPDP) ---------- */
#consentGate{position:fixed;inset:0;z-index:9500;background:rgba(20,18,12,.55);display:flex;align-items:flex-end;justify-content:center;padding:0;backdrop-filter:blur(2px)}
.consent-card{background:var(--card);width:100%;max-width:460px;border-radius:22px 22px 0 0;padding:26px 22px 24px;text-align:center;box-shadow:0 -8px 40px rgba(0,0,0,.3);animation:sheetUp .3s ease}
.consent-card svg{margin-bottom:8px}
.consent-card h2{font-family:'Bricolage Grotesque',Inter,sans-serif;font-size:1.4rem;color:var(--ink);margin:0 0 8px}
.consent-card p{font-size:.86rem;color:var(--mut);line-height:1.55;margin:0 0 10px}
.consent-card b{color:var(--ink)}
.consent-links a{color:var(--primary);cursor:pointer;text-decoration:underline}
.consent-card .btn-main{margin-top:10px}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}}

/* ---------- maintenance screen ---------- */
#maintScreen{position:fixed;inset:0;z-index:9800;background:var(--bg,#FAF6EE);display:flex;align-items:center;justify-content:center;padding:24px}
.maint-box{text-align:center;max-width:360px}
.maint-box svg{margin-bottom:14px;animation:spin 8s linear infinite}
.maint-box h2{font-family:'Bricolage Grotesque',Inter,sans-serif;font-size:1.5rem;color:var(--ink);margin:0 0 8px}
.maint-box p{color:var(--mut);font-size:.9rem;line-height:1.55}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- ops banner ---------- */
.ops-banner{display:flex;align-items:center;gap:10px;justify-content:space-between;background:var(--haldi,#E8A020);color:#3a2600;padding:9px 14px;font-size:.82rem;font-weight:600}
.ops-banner button{background:transparent;border:none;color:#3a2600;font-size:1rem;cursor:pointer;padding:0 4px}

/* ---------- verified host line (stays) ---------- */
.host-line{display:flex;align-items:center;gap:5px;color:var(--mut);font-size:.72rem;margin:2px 0}
.host-line b{color:var(--ink)}
.host-line svg{color:var(--primary);flex:none}

/* ============================================================
   DESIGN POLISH v2 — premium type, tasteful depth, real motion
   Restrained on purpose: subtle lifts, soft layered shadows,
   crisp on-brand focus. Works on phone / tablet / laptop.
   ============================================================ */
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}

/* interactive lift — only where a real pointer exists (no mobile jank) */
@media(hover:hover){
  .svc,.shop-card,.doc-card,.mega,.promo,.movie-card,.event-card,.prop-card,.role-row,.cinema-block{
    transition:transform .18s cubic-bezier(.2,.8,.3,1),box-shadow .18s,border-color .18s}
  .svc:hover,.mega:hover,.movie-card:hover,.event-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--border-strong)}
  .shop-card:hover,.prop-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
  .role-row:hover{border-color:var(--border-strong);background:var(--surface-2)}
  .btn-main:hover{filter:brightness(1.05)}
  .btn-cta:hover{transform:translateY(-1px)}
  .chip:hover:not(.on){border-color:var(--border-strong)}
  .sortchip:hover:not(.on){border-color:var(--border-strong)}
}

/* crisp, on-brand focus (accessibility + finish) */
.txt:focus,input:focus,textarea:focus,select:focus{outline:none;border-color:var(--primary);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 16%,transparent)}
button:focus-visible,a:focus-visible{outline:2px solid var(--primary);outline-offset:2px}

/* premium display typography */
.home-title,.page-head h1,.sheet-title,.wiz-q,.doc-top b{font-family:var(--disp);font-feature-settings:"ss01"}
.home-greet{letter-spacing:.01em;font-weight:500}

/* soft layered depth on the core service tiles (subtle, not neumorphic-heavy) */
.svc{box-shadow:0 1px 2px rgba(43,43,38,.04),0 7px 18px rgba(43,43,38,.05)}
.svc-ic{box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}

/* DESKTOP: use the space, keep reading columns comfortable */
@media(min-width:1024px){
  .home-title{font-size:2.75rem;line-height:1.07;max-width:16ch}
  .home-greet{font-size:.96rem}
  .usp-strip{font-size:.82rem}
  .home-hero{padding-bottom:30px}
  /* single-column detail/reading views centre at a readable width */
  .shop-sheet,.legal,.promise-page{max-width:780px;margin-left:auto;margin-right:auto}
}

/* ============================================================
   RESPONSIVE GRIDS — placed last so they win source-order over
   the base single-column definitions above. Tablet & up fill
   the frame with columns instead of a lonely single column.
   ============================================================ */
@media(min-width:601px){
  .shop-list{display:grid;grid-template-columns:1fr 1fr;gap:13px}
  .prop-list{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .event-list{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .doc-grid{grid-template-columns:1fr 1fr}
  .mega-grid{grid-template-columns:repeat(3,1fr)}
  .movie-grid{grid-template-columns:repeat(3,1fr)}
  .how-grid{grid-template-columns:repeat(4,1fr)}
  .dir-grid{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:601px) and (max-width:800px){
  .svc-grid{grid-template-columns:repeat(3,1fr)}
  .mega-grid{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:1024px){
  .shop-list{grid-template-columns:1fr 1fr 1fr}
  .prop-list{grid-template-columns:1fr 1fr 1fr}
  .doc-grid{grid-template-columns:1fr 1fr 1fr}
  .movie-grid{grid-template-columns:repeat(4,1fr)}
  .event-list{grid-template-columns:1fr 1fr 1fr}
}
@media(min-width:601px){ .shop-list .shop-card.featured{grid-column:1/-1} }

/* ============================================================
   AUTH + CAMERA (self-hosted login, face lock, handover proof)
   ============================================================ */
.auth-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px 16px;margin-top:10px;box-shadow:var(--shadow)}
.auth-card .when-seg{margin-bottom:14px}
.role-row.highlight{border-color:color-mix(in srgb,var(--primary) 40%,transparent);background:color-mix(in srgb,var(--primary) 6%,transparent)}
.cam-wrap{position:relative;width:100%;max-width:300px;margin:6px auto 10px;aspect-ratio:1;border-radius:20px;overflow:hidden;background:#0d0d0d}
.cam-wrap video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.cam-ring{position:absolute;inset:14px;border:3px dashed rgba(255,255,255,.6);border-radius:50%;pointer-events:none}
.cam-fallback{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:8px;color:#fff;text-align:center;padding:20px}
.cam-fallback p{font-size:.82rem;opacity:.85;line-height:1.4}
.cam-fallback svg{color:rgba(255,255,255,.7)}
.face-preview{display:flex;align-items:center;gap:12px;margin:10px 0}
.face-preview img{width:64px;height:64px;border-radius:16px;object-fit:cover;border:2px solid var(--primary)}
.face-preview span{font-size:.8rem;font-weight:700;color:var(--ok);display:inline-flex;align-items:center;gap:5px}
.card-block.handover{border-color:color-mix(in srgb,var(--haldi,#E8A020) 35%,var(--line))}

/* ============================================================
   SHOP MENU: photos, bulk import, price moderation, go-live
   ============================================================ */
.item-emoji img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.item-photo-row{display:flex;align-items:center;gap:12px;margin:2px 0 12px}
.item-photo-thumb{width:66px;height:66px;border-radius:14px;background:var(--surface-2);display:flex;align-items:center;justify-content:center;color:var(--mut);overflow:hidden;flex:none;border:1px solid var(--line)}
.item-photo-thumb img{width:100%;height:100%;object-fit:cover}
.sec-tag{display:inline-block;font-style:normal;font-size:.6rem;font-weight:700;color:var(--primary);background:color-mix(in srgb,var(--primary) 10%,transparent);border-radius:6px;padding:1px 6px;margin-left:5px;vertical-align:1px}
.out-tag.amber{color:#8a5c05;background:color-mix(in srgb,var(--haldi,#E8A020) 20%,transparent)}
.price-hint{font-size:.74rem;margin:-4px 0 8px;min-height:16px}
.price-hint .ok{color:var(--ok);display:inline-flex;align-items:center;gap:4px}
.price-hint .amber{color:#8a5c05;display:inline-flex;align-items:center;gap:4px}
[data-theme="dark"] .price-hint .amber{color:#E8A020}
.price-hint .bad{color:var(--red);display:inline-flex;align-items:center;gap:4px}
.bulk-count{font-size:.82rem;font-weight:700;color:var(--ok);margin:10px 0 6px;display:flex;align-items:center;gap:5px}
.bulk-sec{margin-bottom:8px}
.bulk-sec>small{display:block;font-weight:700;color:var(--mut);text-transform:uppercase;letter-spacing:.5px;font-size:.66rem;margin:6px 0 3px}
.bulk-line{display:flex;justify-content:space-between;gap:10px;font-size:.82rem;padding:3px 0;border-bottom:1px solid var(--line)}
.bulk-line b{color:var(--primary);white-space:nowrap}
.shop-cover{margin:0 -16px 0;height:150px;overflow:hidden;background:var(--surface-2)}
.shop-cover img{width:100%;height:100%;object-fit:cover}
.golive{border-radius:var(--r);padding:13px 15px;margin:4px 0 12px;font-size:.84rem}
.golive.ok{background:color-mix(in srgb,var(--primary) 9%,transparent);border:1px solid color-mix(in srgb,var(--primary) 30%,transparent);color:var(--ink);display:flex;align-items:center;gap:8px}
.golive.ok svg{color:var(--primary);flex:none}
.golive.todo{background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow)}
.golive-steps{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.golive-steps span{display:flex;align-items:center;gap:7px;font-size:.8rem;color:var(--mut)}
.golive-steps span.done{color:var(--ink)}
.golive-steps span.done svg{color:var(--primary)}
.golive-steps .lnk{margin-left:auto}

/* ---------- install app banner ---------- */
.install-bar{position:fixed;left:12px;right:12px;bottom:78px;z-index:600;display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-lg);border-radius:14px;padding:10px 12px;font-size:.82rem;color:var(--ink);max-width:600px;margin:0 auto}
.install-bar b{color:var(--ink)} .install-bar svg{color:var(--primary);vertical-align:-2px}
.install-bar .ib-act{display:flex;align-items:center;gap:8px;flex:none}
.install-bar .inst-x{background:transparent;border:none;color:var(--mut);font-size:1rem;cursor:pointer;padding:0 2px}
@media(min-width:1024px){ .install-bar{bottom:24px;left:auto;right:24px;max-width:380px} }

/* ---------- delivery navigation + gamified job HUD ---------- */
.track-map.real{position:relative}
.nav-fab{position:absolute;right:12px;bottom:12px;z-index:600;display:inline-flex;align-items:center;gap:6px;
  background:var(--primary);color:#fff;font-weight:800;font-size:.82rem;padding:10px 15px;border-radius:50px;
  box-shadow:0 6px 18px rgba(26,86,50,.4);cursor:pointer}
.nav-fab:active{transform:scale(.96)}
.nav-fab svg{color:#fff}
.job-hud{display:flex;gap:9px;margin:10px 0}
.job-hud .hud-cell{flex:1;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:11px 8px;text-align:center;box-shadow:var(--shadow)}
.job-hud .hud-cell b{display:block;font-size:1.15rem;color:var(--ink);font-family:var(--disp)}
.job-hud .hud-cell:first-child b{color:var(--primary)}
.job-hud .hud-cell small{font-size:.66rem;color:var(--mut);text-transform:uppercase;letter-spacing:.4px}

/* ---------- delivery handover (OTP + real QR) ---------- */
.handover-card{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:14px 16px;margin:8px 0;box-shadow:var(--shadow)}
.ho-otp{flex:1;text-align:center}
.ho-otp small{display:block;font-size:.6rem;font-weight:800;letter-spacing:.6px;color:var(--mut)}
.ho-otp b{display:block;font-size:2.2rem;font-family:var(--disp);letter-spacing:6px;color:var(--primary);line-height:1.1}
.ho-otp span{font-size:.68rem;color:var(--mut)}
.ho-qr{width:92px;height:92px;flex:none;border-radius:12px;background:var(--surface-2);display:flex;align-items:center;justify-content:center;color:var(--mut);overflow:hidden;padding:6px}
.ho-qr img{width:100%;height:100%}
.pc-call{width:42px;height:42px;border-radius:50%;background:var(--primary);color:#fff;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none}
.pc-call svg{color:#fff}

/* ---------- invoice / bill ---------- */
.invoice{background:#fff;color:#1a1a1a;border:1px solid var(--line);border-radius:var(--r);padding:22px;margin:6px 0;max-width:640px}
.inv-head{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:2px solid #1A5632;padding-bottom:12px;margin-bottom:14px}
.inv-logo{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1.2rem;color:#1A5632;display:flex;align-items:center;gap:5px}
.inv-logo b{color:#1A5632}
.inv-head small{color:#666;font-size:.72rem}
.inv-meta{text-align:right}.inv-meta b{font-size:.9rem;color:#1a1a1a}.inv-meta small{display:block;color:#666;font-size:.72rem}
.inv-parties{display:flex;justify-content:space-between;gap:16px;margin-bottom:14px}
.inv-parties>div{flex:1}.inv-parties small{display:block;color:#888;font-size:.68rem;text-transform:uppercase;letter-spacing:.4px}
.inv-parties b{display:block;color:#1a1a1a;font-size:.9rem;margin:2px 0}
.inv-table{width:100%;border-collapse:collapse;margin-bottom:12px;font-size:.82rem}
.inv-table th{text-align:left;border-bottom:1px solid #ddd;padding:6px 4px;color:#666;font-size:.7rem;text-transform:uppercase}
.inv-table th:last-child,.inv-table td:last-child{text-align:right}
.inv-table th:nth-child(2),.inv-table td:nth-child(2),.inv-table th:nth-child(3),.inv-table td:nth-child(3){text-align:center}
.inv-table td{padding:7px 4px;border-bottom:1px solid #f0f0f0;color:#1a1a1a}
.inv-totals{border-top:1px solid #ddd;padding-top:8px}
.invoice .ck-line{color:#333}
.invoice .ck-line.grand{border-top:1px solid #1A5632;margin-top:6px;padding-top:8px;font-weight:800;color:#1A5632}
.inv-foot{margin-top:16px;padding-top:12px;border-top:1px dashed #ccc;color:#888;font-size:.7rem;line-height:1.7}
@media print{
  body *{visibility:hidden}
  #invoiceDoc,#invoiceDoc *{visibility:visible}
  #invoiceDoc{position:absolute;left:0;top:0;width:100%;border:none;margin:0}
  .noprint,.app-header,.bnav,.cart-bubble,.install-bar{display:none!important}
}

/* ---------- in-app order chat ---------- */
.chat-box{max-height:320px;min-height:160px;overflow-y:auto;display:flex;flex-direction:column;gap:7px;padding:8px 2px;margin:6px 0}
.chat-msg{max-width:80%;align-self:flex-start;background:var(--surface-2);border:1px solid var(--line);border-radius:14px 14px 14px 4px;padding:8px 12px}
.chat-msg.me{align-self:flex-end;background:var(--primary);color:#fff;border-radius:14px 14px 4px 14px;border-color:var(--primary)}
.chat-msg span{display:block;font-size:.86rem;line-height:1.4}
.chat-msg small{display:block;font-size:.6rem;opacity:.65;margin-top:2px;text-align:right}
.chat-input{display:flex;gap:8px;align-items:center}
.chat-input input{flex:1;background:var(--surface-2);border:1px solid var(--line);border-radius:50px;padding:11px 15px;font-family:inherit;font-size:.9rem;color:var(--ink)}
.chat-input .btn-main{border-radius:50%;width:42px;height:42px;padding:0;flex:none;display:flex;align-items:center;justify-content:center}

/* profile button: only on laptop/desktop (mobile & tablet use the bottom-nav 'You') */
.hd-profile{display:none}
@media(min-width:1024px){ .hd-profile{display:flex} }
