:root{
  --bg:#03060e;--s1:#060d1a;--s2:#0a1426;--s3:#0f1c34;--s4:#162440;--s5:#1d2e4e;
  --lime:#b8ff57;--lime2:#d4ff8a;--teal:#00d9b8;--blue:#3d7fff;
  --purple:#9f6eff;--orange:#ff7a2f;--pink:#ff4fa3;--red:#ff4545;
  --gold:#ffb830;--green:#2dce89;--cyan:#00e5ff;
  --t1:#edf2ff;--t2:#7a94c0;--t3:#3d5275;
  --border:rgba(255,255,255,0.065);--border2:rgba(255,255,255,0.13);
  --glow:0 0 40px rgba(184,255,87,0.15);
  --r:14px;--r2:10px;--r3:20px;--r4:24px;
  --ff:'Plus Jakarta Sans',sans-serif;
  --fd:'Unbounded',sans-serif;
  --fm:'JetBrains Mono',monospace;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;overflow-x:hidden;scroll-padding-bottom:120px;
  /* Fill the physical area behind iOS Safari's floating toolbar (viewport-fit=cover).
     Without this, scrolled page content bleeds through the transparent toolbar. */
  background:var(--bg);}
body{background:var(--bg);color:var(--t1);font-family:var(--ff);min-height:100vh;min-height:100dvh;overflow-x:hidden;}
@media(max-width:900px){body{cursor:auto;}canvas#cc{display:none;}}
/* Remove grey tap flash on iOS for all interactive elements */
a,button,input,select,textarea,label,[role="button"]{-webkit-tap-highlight-color:transparent;}
/* Prevent 300ms tap delay; allow scroll on scrollable children */
button,a,.btn,.svc-card,.pkg-tile,.cat-tab,.lp-svc-card,.rdrawer-row,.faq-q,.help-row-hd,.qa-tile,.lp-feat,.lp-step,.qc,.fol-card,.flash-card{touch-action:manipulation;}
canvas#cc{position:fixed;inset:0;pointer-events:none;z-index:9990;}
.bg-mesh{position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 80% 60% at 10% 20%,rgba(184,255,87,.04),transparent 60%),radial-gradient(ellipse 60% 70% at 90% 80%,rgba(0,217,184,.05),transparent 60%),radial-gradient(ellipse 50% 50% at 50% 50%,rgba(159,110,255,.03),transparent 70%);}
.bg-grid{position:fixed;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(rgba(184,255,87,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(184,255,87,.02) 1px,transparent 1px);background-size:56px 56px;}

/* NAV */
.nav{position:fixed;top:0;left:0;right:0;z-index:300;height:62px;display:flex;align-items:center;justify-content:space-between;padding:0 22px;background:rgba(3,6,14,.9);backdrop-filter:blur(28px);border-bottom:1px solid var(--border);}
.nav-logo{display:flex;align-items:center;gap:10px;cursor:pointer;}
.nl-mark{width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,var(--lime),var(--teal));display:flex;align-items:center;justify-content:center;font-size:19px;box-shadow:0 0 18px rgba(184,255,87,.3);flex-shrink:0;}
.nl-t{font-family:var(--fd);font-size:13px;font-weight:700;color:var(--t1);}
.nl-s{font-size:9px;color:var(--lime);font-weight:600;letter-spacing:.14em;text-transform:uppercase;margin-top:2px;}
.nav-links{display:flex;gap:2px;}
.nl{padding:7px 13px;border-radius:8px;font-size:12px;font-weight:600;color:var(--t2);cursor:pointer;border:none;background:transparent;font-family:var(--ff);transition:all .2s;}
.nl:hover{color:var(--t1);background:rgba(255,255,255,.05);}
.nl.on{color:var(--lime);background:rgba(184,255,87,.07);}
.nav-r{display:flex;align-items:center;gap:8px;}
.nb{padding:7px 14px;border-radius:8px;font-size:12px;font-weight:700;cursor:pointer;border:none;font-family:var(--ff);transition:all .2s;}
.nb-g{background:transparent;color:var(--t2);}
.nb-g:hover{color:var(--t1);}
.nb-o{background:transparent;color:var(--lime);border:1.5px solid rgba(184,255,87,.3);}
.nb-o:hover{background:rgba(184,255,87,.08);}
.nb-s{background:var(--lime);color:var(--bg);font-weight:800;}
.nb-s:hover{background:var(--lime2);transform:translateY(-1px);}
.nb-chat{background:var(--purple);color:white;font-weight:700;}
.nb-chat:hover{background:#7c3aed;transform:translateY(-1px);}
.upill{display:flex;align-items:center;gap:8px;padding:4px 12px 4px 4px;border-radius:100px;background:var(--s2);border:1px solid var(--border2);cursor:pointer;transition:all .2s;}
.upill:hover{border-color:rgba(184,255,87,.3);}
.uav{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--purple),var(--lime));display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;}
.unm{font-size:12px;font-weight:700;}
.url{font-size:9px;color:var(--lime);font-weight:600;text-transform:uppercase;letter-spacing:.05em;}
.notif-ico{width:34px;height:34px;border-radius:8px;background:var(--s2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;font-size:15px;transition:all .2s;}
.notif-ico:hover{border-color:var(--border2);}
.npip{position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--red);border:2px solid var(--bg);font-size:9px;font-weight:800;color:#fff;display:none;align-items:center;justify-content:center;line-height:1;}
.npip.vis{display:flex;}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.4}}

/* PAGES */
/* overflow-x:clip clips content without creating a scroll container.
   overflow-x:hidden would implicitly set overflow-y:auto, breaking position:sticky on the sidebar. */
.page{display:none;padding-top:62px;min-height:100vh;min-height:100dvh;position:relative;overflow-x:hidden;overflow-x:clip;}
.page.on{display:block;}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:7px;padding:11px 22px;border-radius:var(--r);border:none;cursor:pointer;font-family:var(--ff);font-size:13px;font-weight:700;transition:all .22s;white-space:nowrap;position:relative;overflow:hidden;}
.btn::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,transparent,rgba(255,255,255,.07));opacity:0;transition:.2s;}
.btn:hover::after{opacity:1;}
.btn-xs{padding:5px 11px;font-size:11px;border-radius:7px;}
.btn-sm{padding:8px 15px;font-size:12px;border-radius:9px;}
.btn-lg{padding:15px 30px;font-size:15px;border-radius:14px;}
.btn-xl{padding:17px 36px;font-size:16px;border-radius:16px;font-weight:800;}
.btn-lime{background:var(--lime);color:var(--bg);font-weight:800;}
.btn-lime:hover{background:var(--lime2);transform:translateY(-2px);box-shadow:0 8px 28px rgba(184,255,87,.35);}
.btn-teal{background:var(--teal);color:var(--bg);font-weight:800;}
.btn-teal:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(0,217,184,.35);}
.btn-blue{background:var(--blue);color:#fff;font-weight:800;}
.btn-blue:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(61,127,255,.35);}
.btn-purple{background:rgba(159,110,255,.15);color:var(--purple);border:1px solid rgba(159,110,255,.3);}
.btn-purple:hover{background:rgba(159,110,255,.25);}
.btn-dark{background:var(--s3);color:var(--t1);border:1px solid var(--border2);}
.btn-dark:hover{background:var(--s4);border-color:rgba(184,255,87,.25);}
.btn-ghost{background:transparent;color:var(--t1);border:1.5px solid rgba(255,255,255,0.32);}
.btn-ghost:hover{background:rgba(255,255,255,.05);border-color:rgba(184,255,87,.5);color:var(--lime);}
.btn-danger{background:rgba(255,69,69,.12);color:var(--red);border:1px solid rgba(255,69,69,.28);}
.btn-danger:hover{background:rgba(255,69,69,.22);}
.btn-success{background:rgba(45,206,137,.12);color:var(--green);border:1px solid rgba(45,206,137,.28);}
.btn-success:hover{background:rgba(45,206,137,.22);}
.btn-gold{background:rgba(255,184,48,.12);color:var(--gold);border:1px solid rgba(255,184,48,.28);}
.btn-gold:hover{background:rgba(255,184,48,.22);}
.btn-pink{background:rgba(255,79,163,.12);color:var(--pink);border:1px solid rgba(255,79,163,.28);}
.btn-pink:hover{background:rgba(255,79,163,.22);}
.btn-orange{background:rgba(255,122,47,.12);color:var(--orange);border:1px solid rgba(255,122,47,.28);}
.btn-orange:hover{background:rgba(255,122,47,.22);}
.btn-w{width:100%;justify-content:center;}

/* INPUTS */
.ig{margin-bottom:15px;}
.il{display:block;font-size:10px;font-weight:700;color:var(--t2);text-transform:uppercase;letter-spacing:.12em;margin-bottom:6px;}
.inp{width:100%;padding:11px 13px;min-height:44px;border-radius:var(--r2);background:var(--s2);border:1.5px solid var(--border);color:var(--t1);font-family:var(--ff);font-size:13px;outline:none;transition:all .2s;}
.inp:focus{border-color:rgba(184,255,87,.4);box-shadow:0 0 0 4px rgba(184,255,87,.06);}
.inp::placeholder{color:var(--t3);}
.inp-pfx{display:flex;align-items:stretch;background:var(--s2);border:1.5px solid var(--border);border-radius:var(--r2);overflow:hidden;transition:all .2s;}
.inp-pfx:focus-within{border-color:rgba(184,255,87,.4);}
.inp-pfx-tag{padding:11px 12px;font-size:12px;font-weight:700;color:var(--t3);border-right:1px solid var(--border);display:flex;align-items:center;flex-shrink:0;background:var(--s3);}
.inp-pfx .inp{border:none;border-radius:0;background:transparent;}
.inp-pfx .inp:focus{box-shadow:none;}
.inp-sel{-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%233d5275' d='M5 6 0 0h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:34px;}
.inp-2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}

/* CARDS */
.card{background:var(--s1);border:1px solid var(--border);border-radius:var(--r3);overflow:hidden;}
/* Table scroll wrapper — place around any <table> that should scroll horizontally */
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;touch-action:pan-x pan-y;}
.ch{padding:15px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:10px;}
.ch-l{display:flex;align-items:center;gap:9px;}
.ci{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;}
.ci.lime{background:rgba(184,255,87,.1);}
.ci.teal{background:rgba(0,217,184,.1);}
.ci.blue{background:rgba(61,127,255,.1);}
.ci.purple{background:rgba(159,110,255,.1);}
.ci.orange{background:rgba(255,122,47,.1);}
.ci.gold{background:rgba(255,184,48,.1);}
.ci.red{background:rgba(255,69,69,.1);}
.ci.pink{background:rgba(255,79,163,.1);}
.ct{font-size:13px;font-weight:800;}
.cp{padding:18px;}

/* TABLE */
table{width:100%;border-collapse:collapse;}
th{padding:10px 14px;text-align:left;font-size:10px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.1em;background:var(--s2);}
td{padding:12px 14px;border-top:1px solid var(--border);font-size:12px;vertical-align:middle;}
tr:hover td{background:rgba(184,255,87,.015);}
.mono{font-family:var(--fm);font-size:11px;}
.tl{color:var(--lime);}
.td{color:var(--t2);}
.tb{font-weight:700;}

/* METRICS */
.mg{display:grid;grid-template-columns:repeat(auto-fill,minmax(195px,1fr));gap:13px;margin-bottom:20px;}
.m{background:var(--s1);border:1px solid var(--border);border-radius:var(--r3);padding:18px;position:relative;overflow:hidden;transition:all .25s;}
.m:hover{border-color:var(--border2);transform:translateY(-2px);}
/* Metric icon badge (optional — appears above value) */
.mi{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;margin-bottom:10px;flex-shrink:0;}
.mi.lime{background:rgba(184,255,87,.12);}
.mi.teal{background:rgba(0,217,184,.12);}
.mi .ti{font-size:15px;}
.mi.lime .ti{color:var(--lime);}
.mi.teal .ti{color:var(--teal);}
.m::after{content:'';position:absolute;top:-30%;right:-20%;width:90px;height:90px;border-radius:50%;opacity:.06;}
.m.lime::after{background:var(--lime);}.m.teal::after{background:var(--teal);}
.m.blue::after{background:var(--blue);}.m.orange::after{background:var(--orange);}
.m.purple::after{background:var(--purple);}.m.gold::after{background:var(--gold);}
.m.pink::after{background:var(--pink);}
.mt{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px;}
.mi{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:17px;}
.mi.lime{background:rgba(184,255,87,.1);border:1px solid rgba(184,255,87,.18);}
.mi.teal{background:rgba(0,217,184,.1);border:1px solid rgba(0,217,184,.18);}
.mi.blue{background:rgba(61,127,255,.1);border:1px solid rgba(61,127,255,.18);}
.mi.orange{background:rgba(255,122,47,.1);border:1px solid rgba(255,122,47,.18);}
.mi.purple{background:rgba(159,110,255,.1);border:1px solid rgba(159,110,255,.18);}
.mi.gold{background:rgba(255,184,48,.1);border:1px solid rgba(255,184,48,.18);}
.mi.red{background:rgba(255,69,69,.1);border:1px solid rgba(255,69,69,.18);}
.mi.pink{background:rgba(255,79,163,.1);border:1px solid rgba(255,79,163,.18);}
.mtr{font-size:10px;font-weight:800;padding:2px 7px;border-radius:100px;}
.up{color:var(--green);background:rgba(45,206,137,.1);}
.dn{color:var(--red);background:rgba(255,69,69,.1);}
.mv{font-family:var(--fd);font-size:24px;font-weight:700;line-height:1;margin-bottom:3px;}
.ml{font-size:11px;color:var(--t2);}
.ms{font-size:10px;color:var(--t3);margin-top:2px;}

/* BADGES */
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:100px;font-size:10px;font-weight:700;}
.badge::before{content:'';width:5px;height:5px;border-radius:50%;flex-shrink:0;}
.bp{background:rgba(255,184,48,.1);color:var(--gold);border:1px solid rgba(255,184,48,.22);}
.bp::before{background:var(--gold);animation:blink 2s infinite;}
.bd{background:rgba(45,206,137,.1);color:var(--green);border:1px solid rgba(45,206,137,.22);}
.bd::before{background:var(--green);}
.bf{background:rgba(255,69,69,.1);color:var(--red);border:1px solid rgba(255,69,69,.22);}
.bf::before{background:var(--red);}
.bl{background:rgba(184,255,87,.08);color:var(--lime);border:1px solid rgba(184,255,87,.22);}
.bl::before{background:var(--lime);animation:blink 1.4s infinite;}
.bi{background:rgba(61,82,117,.12);color:var(--t3);border:1px solid rgba(61,82,117,.18);}
.bi::before{background:var(--t3);}
.ba{background:rgba(159,110,255,.1);color:var(--purple);border:1px solid rgba(159,110,255,.22);}
.ba::before{background:var(--purple);}
.bg2{background:rgba(255,184,48,.1);color:var(--gold);border:1px solid rgba(255,184,48,.22);}
.bg2::before{background:var(--gold);}
.bpaid{background:rgba(0,217,184,.12);color:var(--teal);border:1px solid rgba(0,217,184,.3);}
.bpaid::before{background:var(--teal);animation:blink 1.8s infinite;}
.bpart{background:rgba(249,115,22,.12);color:#f97316;border:1px solid rgba(249,115,22,.3);}
.bpart::before{background:#f97316;}
.bteal{background:rgba(0,217,184,.1);color:var(--teal);border:1px solid rgba(0,217,184,.22);}
.bteal::before{background:var(--teal);}
.bpink{background:rgba(255,79,163,.1);color:var(--pink);border:1px solid rgba(255,79,163,.22);}
.bpink::before{background:var(--pink);}

/* DASHBOARD SHELL */
.shell{display:flex;min-height:calc(100vh - 62px);min-height:calc(100dvh - 62px);}
.sb{width:240px;flex-shrink:0;background:var(--s1);border-right:1px solid var(--border);position:fixed;left:0;top:62px;height:calc(100vh - 62px);height:calc(100dvh - 62px);overflow-y:auto;display:flex;flex-direction:column;scrollbar-width:thin;scrollbar-color:var(--s4) transparent;z-index:200;}
.sb::-webkit-scrollbar{width:3px;}.sb::-webkit-scrollbar-thumb{background:var(--s4);}
.sb-user{padding:16px 14px 14px;}
.sb-av{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,var(--purple),var(--lime));display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:900;margin-bottom:10px;box-shadow:0 4px 14px rgba(159,110,255,.3);}
.sb-nm{font-size:13px;font-weight:800;}
.sb-rl{font-size:9px;color:var(--lime);font-weight:700;text-transform:uppercase;letter-spacing:.1em;margin-top:2px;}
.sb-bal{margin-top:10px;padding:9px 11px;background:rgba(184,255,87,.06);border:1px solid rgba(184,255,87,.12);border-radius:9px;}
.sb-bl{font-size:8px;color:var(--t3);font-weight:700;text-transform:uppercase;letter-spacing:.1em;}
.sb-bv{font-family:var(--fd);font-size:17px;font-weight:700;color:var(--lime);margin-top:2px;}
.sb-sec{padding:3px 0 1px;}
.sb-sl{font-size:8px;font-weight:800;color:var(--t3);text-transform:uppercase;letter-spacing:.12em;padding:7px 14px 3px;}
.si{display:flex;align-items:center;gap:8px;padding:8px 11px;margin:1px 7px;border-radius:9px;font-size:12px;font-weight:600;color:var(--t2);cursor:pointer;transition:all .18s;position:relative;}
.si:hover{background:var(--s2);color:var(--t1);}
.si.on{background:rgba(184,255,87,.08);color:var(--lime);}
.si.on::before{content:'';position:absolute;left:-1px;top:7px;bottom:7px;width:3px;border-radius:0 3px 3px 0;background:var(--lime);}
.sii{width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:13px;background:rgba(255,255,255,.04);flex-shrink:0;}
.si.on .sii{background:rgba(184,255,87,.1);}
.sbadge{margin-left:auto;background:var(--red);color:#fff;font-size:9px;font-weight:800;padding:1px 5px;border-radius:100px;min-width:16px;text-align:center;animation:blink 2s infinite;}
.sbadge.g{background:var(--green);}
.sb-ft{margin-top:auto;padding:12px;}
.sb-out{display:flex;align-items:center;gap:7px;padding:9px 12px;border-radius:9px;font-size:12px;font-weight:700;color:var(--red);cursor:pointer;background:rgba(255,69,69,.06);border:1px solid rgba(255,69,69,.12);transition:all .2s;width:100%;}
.sb-out:hover{background:rgba(255,69,69,.14);}
.main{flex:1;margin-left:240px;padding:22px;overflow-x:hidden;min-width:0;}
.ph{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:20px;gap:14px;flex-wrap:wrap;}
.pt{font-family:var(--fd);font-size:20px;font-weight:700;line-height:1.2;}
.ps{font-size:12px;color:var(--t2);margin-top:3px;}
.pr{display:flex;gap:8px;flex-shrink:0;}

/* TAB BAR */
.tbr{display:flex;gap:3px;background:var(--s2);border-radius:10px;padding:3px;margin-bottom:16px;flex-wrap:wrap;}
.tbt{flex:1;min-width:60px;padding:7px 8px;border-radius:8px;border:none;cursor:pointer;background:transparent;color:var(--t2);font-family:var(--ff);font-size:11px;font-weight:700;transition:all .2s;}
.tbt.on{background:var(--s4);color:var(--t1);}
.tc{display:none;}.tc.on{display:block;}

/* MODALS */
.mw{display:none;position:fixed;inset:0;background:rgba(0,0,0,.8);backdrop-filter:blur(8px);z-index:800;align-items:center;justify-content:center;padding:18px;padding-bottom:calc(18px + env(safe-area-inset-bottom,0px));}
.mw.open{display:flex;}
.modal{background:var(--s1);border:1px solid var(--border2);border-radius:22px;padding:28px;max-width:480px;width:100%;max-height:92vh;max-height:92dvh;overflow-y:auto;animation:mpop .25s cubic-bezier(.34,1.56,.64,1);}
.modal::-webkit-scrollbar{width:3px;}.modal::-webkit-scrollbar-thumb{background:var(--s4);}
@keyframes mpop{from{opacity:0;transform:scale(.92) translateY(14px)}to{opacity:1;transform:scale(1) translateY(0)}}
.mhd{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;}
.mf{position:sticky;bottom:0;background:var(--s1);padding-top:6px;}
.mttl{font-family:var(--fd);font-size:19px;font-weight:700;}
.mx{width:30px;height:30px;border-radius:7px;background:var(--s2);border:none;cursor:pointer;color:var(--t2);font-size:15px;display:flex;align-items:center;justify-content:center;transition:all .2s;}
.mx:hover{background:var(--s4);color:var(--t1);}

/* TOASTS */
.tz{position:fixed;bottom:20px;right:20px;z-index:900;display:flex;flex-direction:column;gap:9px;max-width:320px;}
.toast{background:var(--s2);border:1px solid var(--border2);border-radius:12px;padding:12px 15px;display:flex;align-items:flex-start;gap:10px;box-shadow:0 10px 40px rgba(0,0,0,.5);animation:tin .3s cubic-bezier(.34,1.56,.64,1);}
@keyframes tin{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:translateX(0)}}
.toast.lime{border-left:3px solid var(--lime);}
.toast.red{border-left:3px solid var(--red);}
.toast.teal{border-left:3px solid var(--teal);}
.toast.gold{border-left:3px solid var(--gold);}
.toast.pink{border-left:3px solid var(--pink);}
.toast-ico{font-size:18px;flex-shrink:0;}
.toast-msg{font-size:12px;font-weight:700;line-height:1.3;}

/* NOTIF PANEL */
.np{position:fixed;top:65px;right:13px;width:330px;background:var(--s1);border:1px solid var(--border2);border-radius:16px;box-shadow:0 18px 50px rgba(0,0,0,.5);z-index:600;display:none;overflow:hidden;animation:mpop .2s ease;}
.np.open{display:block;}
.np-h{padding:13px 16px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;}
.np-ht{font-size:13px;font-weight:800;}
.np-cl{font-size:11px;color:var(--lime);cursor:pointer;font-weight:700;}
.ni{padding:11px 16px;border-bottom:1px solid var(--border);display:flex;gap:10px;cursor:pointer;transition:background .15s;}
.ni:hover{background:var(--s2);}
.ni.unread{background:rgba(184,255,87,.02);}
.nd{width:6px;height:6px;border-radius:50%;background:var(--lime);flex-shrink:0;margin-top:5px;}
.nd.r{background:transparent;border:1.5px solid var(--t3);}
.nt{font-size:12px;line-height:1.45;}
.ntm{font-size:10px;color:var(--t3);margin-top:2px;}

/* STEPS */
.steps{display:flex;margin-bottom:26px;}
.step{flex:1;display:flex;flex-direction:column;align-items:center;position:relative;}
.step::after{content:'';position:absolute;top:13px;left:50%;width:100%;height:2px;background:var(--border2);z-index:0;}
.step:last-child::after{display:none;}
.step.done::after{background:var(--purple);}
.sn{width:26px;height:26px;border-radius:50%;border:2px solid var(--border2);background:var(--s2);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;position:relative;z-index:1;transition:all .3s;}
.step.on .sn{border-color:var(--lime);color:var(--lime);background:rgba(184,255,87,.1);box-shadow:0 0 10px rgba(184,255,87,.2);}
.step.done .sn{border-color:var(--purple);background:var(--purple);color:#fff;}
.slb{font-size:9px;color:var(--t3);margin-top:6px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;}
.step.on .slb{color:var(--t1);}

/* WALLET GLASS */
.wg{background:linear-gradient(135deg,rgba(184,255,87,.1),rgba(0,217,184,.09));border:1px solid rgba(184,255,87,.18);border-radius:18px;padding:22px;position:relative;overflow:hidden;margin-bottom:18px;}
.wg::before{content:'';position:absolute;top:-45px;right:-45px;width:160px;height:160px;border-radius:50%;background:rgba(184,255,87,.07);}
.wg::after{content:'';position:absolute;bottom:-25px;left:-25px;width:110px;height:110px;border-radius:50%;background:rgba(0,217,184,.05);}
.wl{font-size:10px;color:rgba(255,255,255,.45);font-weight:700;text-transform:uppercase;letter-spacing:.12em;margin-bottom:6px;}
.wa{font-family:var(--fd);font-size:40px;font-weight:700;line-height:1;}
.wa span{font-size:20px;opacity:.5;}
.wm{font-size:11px;color:rgba(255,255,255,.35);margin-top:5px;}
.wax{display:flex;gap:9px;margin-top:18px;position:relative;z-index:1;}

/* PROGRESS */
.prog{height:6px;background:var(--s3);border-radius:100px;overflow:hidden;margin-top:6px;}
.pf{height:100%;border-radius:100px;transition:width .5s cubic-bezier(.4,0,.2,1);}

/* REFERRAL */
.rb{background:var(--s2);border-radius:9px;padding:11px 13px;display:flex;align-items:center;gap:9px;}
.rl{font-family:var(--fm);font-size:10px;color:var(--t2);flex:1;word-break:break-all;line-height:1.4;}
.cpbtn{flex-shrink:0;padding:5px 11px;border-radius:7px;background:rgba(184,255,87,.09);border:1px solid rgba(184,255,87,.18);color:var(--lime);cursor:pointer;font-size:10px;font-weight:800;transition:all .2s;font-family:var(--ff);}
.cpbtn:hover{background:rgba(184,255,87,.18);}
.cpbtn.ok{background:rgba(45,206,137,.12);color:var(--green);border-color:rgba(45,206,137,.28);}

/* TOGGLE */
.tgl{position:relative;width:40px;height:22px;cursor:pointer;}
.tgl input{display:none;}
.tgl-t{position:absolute;inset:0;background:var(--s3);border-radius:100px;transition:.25s;border:1px solid var(--border2);}
.tgl-t::before{content:'';position:absolute;width:16px;height:16px;left:2px;top:2px;background:var(--t3);border-radius:50%;transition:.25s;}
.tgl input:checked~.tgl-t{background:rgba(184,255,87,.16);border-color:rgba(184,255,87,.32);}
.tgl input:checked~.tgl-t::before{transform:translateX(18px);background:var(--lime);}
.nr{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-bottom:1px solid var(--border);}
.nr:last-child{border:none;}
.nrt{font-size:12px;font-weight:700;}
.nrd{font-size:10px;color:var(--t3);margin-top:1px;}

/* ALERT */
.alert{padding:11px 13px;border-radius:var(--r2);font-size:12px;display:flex;gap:9px;line-height:1.5;margin-bottom:13px;}
.ai{background:rgba(184,255,87,.06);border:1px solid rgba(184,255,87,.16);color:var(--lime2);}
.aw{background:rgba(255,184,48,.06);border:1px solid rgba(255,184,48,.2);color:#fde68a;}
.ae{background:rgba(255,69,69,.06);border:1px solid rgba(255,69,69,.2);color:#fca5a5;}
.as{background:rgba(45,206,137,.06);border:1px solid rgba(45,206,137,.2);color:#6ee7b7;}

/* BARS / CHARTS */
.bc{display:flex;align-items:flex-end;gap:5px;height:140px;padding-top:8px;}
.bcol{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;}
.bfill{width:100%;border-radius:4px 4px 0 0;min-height:3px;cursor:pointer;transition:opacity .2s;}
.bfill:hover{opacity:.75;}
.blbl{font-size:8px;color:var(--t3);font-weight:600;text-transform:uppercase;letter-spacing:.04em;}
.donut-row{display:flex;align-items:center;gap:20px;}
.dsvg{width:90px;height:90px;flex-shrink:0;}
.dl{font-size:12px;flex:1;}
.dli{display:flex;align-items:center;gap:7px;margin-bottom:7px;}
.dld{width:8px;height:8px;border-radius:2px;flex-shrink:0;}

/* Admin 2-panel chat — responsive by default */
.admin-chat-grid{display:grid;grid-template-columns:280px 1fr;gap:0;min-height:520px;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--s1);}
.admin-chat-left{border-right:1px solid var(--border);display:flex;flex-direction:column;}
.admin-chat-list{flex:1;overflow-y:auto;}
/* 3 and 4-column metrics variants */
.mg3{grid-template-columns:repeat(3,1fr)!important;}
.mg4{grid-template-columns:repeat(4,1fr)!important;}

/* SEARCH */
.sr{display:flex;align-items:center;gap:9px;background:var(--s2);border:1.5px solid var(--border);border-radius:var(--r2);padding:8px 13px;margin-bottom:14px;transition:all .2s;}
.sr:focus-within{border-color:rgba(184,255,87,.28);}
.si2{font-size:14px;color:var(--t3);flex-shrink:0;}
.sinp{background:transparent;border:none;outline:none;color:var(--t1);font-family:var(--ff);font-size:12px;flex:1;}
.sinp::placeholder{color:var(--t3);}

/* KYC */
.kyc{display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:100px;font-size:9px;font-weight:800;}
.kv{background:rgba(45,206,137,.08);color:var(--green);border:1px solid rgba(45,206,137,.18);}
.kw{background:rgba(255,184,48,.08);color:var(--gold);border:1px solid rgba(255,184,48,.18);}
.kn{background:rgba(255,69,69,.08);color:var(--red);border:1px solid rgba(255,69,69,.18);}

/* QUICK */
.qg{display:grid;grid-template-columns:repeat(auto-fill,minmax(105px,1fr));gap:10px;margin-bottom:20px;}
.qc{background:var(--s1);border:1px solid var(--border);border-radius:13px;padding:14px 11px;text-align:center;cursor:pointer;transition:all .22s;}
.qc:hover{border-color:rgba(184,255,87,.22);transform:translateY(-3px);box-shadow:0 8px 28px rgba(0,0,0,.3);}
.qi{font-size:22px;margin-bottom:8px;}
.ql{font-size:10px;font-weight:700;color:var(--t2);}

/* PRICE ROW */
.pr2{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;border-bottom:1px solid var(--border);}
.pr2:last-child{border:none;}
.pri{font-size:12px;font-weight:700;}
.prc{font-size:10px;color:var(--t3);}
.pin{display:flex;align-items:center;gap:7px;}
.pinp{width:78px;padding:5px 9px;border-radius:7px;background:var(--s2);border:1.5px solid var(--border);color:var(--t1);font-size:11px;font-family:var(--ff);text-align:right;outline:none;transition:.2s;}
.pinp:focus{border-color:rgba(184,255,87,.35);}
.pm{font-size:9px;font-weight:800;}

/* LEADERBOARD */
.lbr{display:flex;align-items:center;gap:11px;padding:11px 16px;border-bottom:1px solid var(--border);}
.lbr:last-child{border:none;}
.lrk{width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;flex-shrink:0;}
.lrk-gold{background:rgba(255,184,48,.14);}.lrk-silver{background:rgba(148,163,184,.1);}.lrk-bronze{background:rgba(180,83,9,.1);}.gn{background:var(--s2);color:var(--t3);font-size:11px;}
.lin{flex:1;}
.lnm{font-size:12px;font-weight:800;}
.lmt{font-size:10px;color:var(--t3);margin-top:1px;}
.lam{font-family:var(--fd);font-size:13px;font-weight:700;color:var(--lime);}

/* ORDER TRACK */
.otrack{display:flex;flex-direction:column;}
.ots{display:flex;gap:12px;padding-bottom:16px;position:relative;}
.ots:last-child{padding-bottom:0;}
.ots::before{content:'';position:absolute;left:13px;top:28px;bottom:0;width:2px;background:var(--border2);}
.ots:last-child::before{display:none;}
.ots.done::before{background:var(--purple);}
.oti{width:26px;height:26px;border-radius:50%;border:2px solid var(--border2);background:var(--s2);display:flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0;z-index:1;}
.ots.done .oti{border-color:var(--purple);background:var(--purple);}
.ots.active .oti{border-color:var(--lime);animation:glow 2s infinite;}
@keyframes glow{0%,100%{box-shadow:0 0 0 0 rgba(184,255,87,.3)}50%{box-shadow:0 0 0 6px rgba(184,255,87,0)}}
.ott{font-size:12px;font-weight:700;margin-bottom:1px;}
.otm{font-size:10px;color:var(--t3);}

/* TICKER */
.tkw{overflow:hidden;background:rgba(184,255,87,.03);border-top:1px solid rgba(184,255,87,.07);border-bottom:1px solid rgba(184,255,87,.07);padding:8px 0;-webkit-mask-image:linear-gradient(90deg,transparent,black 7%,black 93%,transparent);mask-image:linear-gradient(90deg,transparent,black 7%,black 93%,transparent);}
.tkt{display:flex;gap:40px;white-space:nowrap;will-change:transform;-webkit-animation:tik 35s linear infinite;animation:tik 35s linear infinite;}
.tki{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--lime);flex-shrink:0;opacity:.95;}
.tks{opacity:.3;}
@-webkit-keyframes tik{from{-webkit-transform:translateX(0);transform:translateX(0)}to{-webkit-transform:translateX(-50%);transform:translateX(-50%)}}
@keyframes tik{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* SERVICE CARDS */
.svc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:12px;}
.svc-card{background:var(--s1);border:1.5px solid var(--border);border-radius:15px;padding:16px 13px;cursor:pointer;transition:all .22s;text-align:center;position:relative;overflow:hidden;}
.svc-card:hover{border-color:rgba(184,255,87,.28);transform:translateY(-3px);box-shadow:0 10px 32px rgba(0,0,0,.35);}
.svc-card.sel{border-color:var(--lime);background:rgba(184,255,87,.055);}
.svc-card.hot{border-color:rgba(255,184,48,.35);}
.hot-t{position:absolute;top:0;right:0;background:var(--gold);color:var(--bg);font-size:7px;font-weight:900;padding:3px 7px;border-radius:0 13px 0 7px;letter-spacing:.05em;}
.svc-ico-wrap{width:54px;height:54px;border-radius:14px;background:var(--s3);border:1px solid var(--border2);display:flex;align-items:center;justify-content:center;margin:0 auto 12px;transition:all .22s;}
.svc-card:hover .svc-ico-wrap{background:rgba(184,255,87,.1);border-color:rgba(184,255,87,.25);}
.svc-ico{font-size:26px;line-height:1;}
.svc-nm{font-family:var(--fd);font-size:12px;font-weight:800;margin-bottom:3px;}
.svc-sub{font-size:10px;color:var(--t3);}
.svc-price{display:inline-block;padding:4px 12px;border-radius:100px;background:rgba(184,255,87,.1);border:1px solid rgba(184,255,87,.22);font-size:11px;font-weight:800;color:var(--lime);margin-top:10px;}

/* PKG TILE */
.pkg-tile{background:var(--s1);border:1.5px solid var(--border);border-radius:13px;padding:14px 11px;cursor:pointer;transition:all .22s;text-align:center;position:relative;overflow:hidden;}
.pkg-tile:hover{border-color:rgba(184,255,87,.28);transform:translateY(-3px);box-shadow:0 10px 32px rgba(0,0,0,.3);}
.pkg-tile.sel{border-color:var(--lime);background:rgba(184,255,87,.055);}
.pkg-tile.hot{border-color:rgba(255,184,48,.32);}
.pkg-sz{font-family:var(--fd);font-size:20px;font-weight:700;margin-bottom:3px;}
.pkg-pr{font-size:14px;font-weight:800;color:var(--lime);}
.pkg-b{display:inline-block;padding:2px 6px;border-radius:100px;font-size:8px;font-weight:700;background:rgba(45,206,137,.09);color:var(--green);border:1px solid rgba(45,206,137,.18);margin-top:4px;}
.pkg-v{font-size:9px;color:var(--t3);margin-top:2px;}

/* INVITE */
.inv-card{background:linear-gradient(135deg,rgba(159,110,255,.14),rgba(184,255,87,.07));border:1px solid rgba(159,110,255,.22);border-radius:16px;padding:20px;position:relative;overflow:hidden;}
.inv-card::after{content:'🎯';position:absolute;right:-6px;top:-6px;font-size:52px;opacity:.07;}

/* NET PILLS */
.np2{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px;}
.npl{padding:9px 16px;border-radius:100px;background:var(--s1);border:1.5px solid var(--border);cursor:pointer;font-size:12px;font-weight:700;color:var(--t2);transition:all .22s;font-family:var(--ff);}
.npl:hover{border-color:var(--border2);}
.npl.on{background:rgba(184,255,87,.07);border-color:rgba(184,255,87,.32);color:var(--lime);}

/* SERVICE CATEGORY */
.cat-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px;}
.cat-tab{display:flex;align-items:center;gap:6px;padding:8px 14px;min-height:44px;border-radius:100px;background:var(--s1);border:1.5px solid var(--border);cursor:pointer;font-size:12px;font-weight:700;color:var(--t2);transition:all .22s;font-family:var(--ff);}
.cat-tab:hover{border-color:var(--border2);}
.cat-tab.on{border-color:var(--lime);color:var(--lime);background:rgba(184,255,87,.06);box-shadow:0 0 0 1px rgba(184,255,87,.1),0 4px 16px rgba(184,255,87,.08);}

/* PLAN CARDS */
.plan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:20px;}
.plan-card{background:var(--s1);border:1.5px solid var(--border);border-radius:16px;padding:18px;cursor:pointer;transition:all .22s;position:relative;overflow:hidden;}
.plan-card:hover{border-color:rgba(184,255,87,.28);transform:translateY(-3px);}
.plan-card.sel{border-color:var(--lime);background:rgba(184,255,87,.05);}
.plan-card.popular::before{content:'POPULAR';position:absolute;top:12px;right:12px;background:var(--lime);color:var(--bg);font-size:8px;font-weight:900;padding:2px 7px;border-radius:100px;letter-spacing:.06em;}
.plan-ico{font-size:28px;margin-bottom:10px;}
.plan-nm{font-size:15px;font-weight:800;margin-bottom:3px;}
.plan-sub{font-size:11px;color:var(--t2);margin-bottom:10px;}
.plan-pr{font-family:var(--fd);font-size:22px;font-weight:700;color:var(--lime);}
.plan-dur{font-size:10px;color:var(--t3);}
.plan-feats{margin-top:12px;}
.pf-item{font-size:11px;color:var(--t2);margin-bottom:4px;}
.pf-item::before{content:'✓ ';color:var(--green);}

/* FOLLOWERS GRID */
.fol-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:11px;}
.fol-card{background:var(--s1);border:1.5px solid var(--border);border-radius:13px;padding:14px;cursor:pointer;transition:all .22s;text-align:center;}
.fol-card:hover{border-color:rgba(184,255,87,.25);transform:translateY(-3px);}
.fol-card.sel{border-color:var(--lime);background:rgba(184,255,87,.05);}
.fol-ico{font-size:26px;margin-bottom:7px;}
.fol-nm{font-size:12px;font-weight:800;margin-bottom:2px;}
.fol-am{font-size:11px;color:var(--lime);font-weight:800;}
.fol-pr{font-size:14px;font-weight:800;color:var(--lime);margin-top:5px;}

/* FEAT TILE */
.ft{background:var(--s1);border:1px solid var(--border);border-radius:16px;padding:22px;transition:all .25s;position:relative;overflow:hidden;}
.ft::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(184,255,87,.28),transparent);opacity:0;transition:.3s;}
.ft:hover{border-color:rgba(184,255,87,.16);transform:translateY(-3px);}
.ft:hover::before{opacity:1;}
.ftico{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:14px;}
.ft h3{font-size:14px;font-weight:800;margin-bottom:7px;}
.ft p{font-size:12px;color:var(--t2);line-height:1.6;}

/* STAT BLOCK */
.sb2{padding:28px 18px;background:var(--s1);text-align:center;border-right:1px solid var(--border);}
.sb2:last-child{border:none;}
.sv{font-family:var(--fd);font-size:40px;font-weight:900;color:var(--lime);}
.sl{font-size:12px;color:var(--t2);margin-top:4px;}

/* HOW CARD */
.hwc{background:var(--s1);border:1px solid var(--border);border-radius:16px;padding:22px;position:relative;}
.hwn{font-family:var(--fd);font-size:42px;font-weight:900;color:rgba(184,255,87,.07);line-height:1;margin-bottom:10px;}
.hwc h3{font-size:14px;font-weight:800;margin-bottom:6px;}
.hwc p{font-size:12px;color:var(--t2);line-height:1.6;}

/* CALC */
.calc-res{background:var(--s2);border-radius:11px;padding:16px;text-align:center;margin-top:12px;}
.crv{font-family:var(--fd);font-size:30px;font-weight:700;color:var(--lime);}

/* TIER CARD */
.tier-c{padding:12px;border-radius:11px;border:1px solid var(--border);margin-bottom:9px;}
.tier-c.atier{border-color:rgba(184,255,87,.28);background:rgba(184,255,87,.04);}

/* FAB */
.fab{position:fixed;bottom:24px;bottom:calc(24px + env(safe-area-inset-bottom,0px));right:24px;width:50px;height:50px;border-radius:50%;background:var(--lime);display:flex;align-items:center;justify-content:center;font-size:21px;cursor:pointer;z-index:200;box-shadow:0 5px 22px rgba(184,255,87,.4);transition:all .2s;border:none;}
.fab:hover{transform:scale(1.12) rotate(10deg);}
.fab.off{display:none;}

/* BANNER */
.banner{display:flex;align-items:center;gap:11px;padding:12px 16px;border-radius:13px;margin-bottom:18px;background:rgba(255,184,48,.06);border:1px solid rgba(255,184,48,.18);animation:sld .4s ease;}
@keyframes sld{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:translateY(0)}}
.bni{font-size:20px;flex-shrink:0;}
.bnt{flex:1;font-size:12px;color:#fde68a;line-height:1.5;}
.bnx{background:none;border:none;color:var(--gold);cursor:pointer;font-size:17px;padding:2px;}

/* UTILS */
.row{display:flex;align-items:center;}
.rsb{display:flex;justify-content:space-between;align-items:center;}
.col{display:flex;flex-direction:column;}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;}
.g4{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;}
.gap-2{gap:8px;}.gap-3{gap:12px;}.gap-4{gap:16px;}
.w100{width:100%;}.tc2{text-align:center;}
.mb1{margin-bottom:4px;}.mb2{margin-bottom:8px;}.mb3{margin-bottom:12px;}.mb4{margin-bottom:16px;}.mb5{margin-bottom:20px;}.mb6{margin-bottom:24px;}
.mt1{margin-top:4px;}.mt2{margin-top:8px;}.mt3{margin-top:12px;}.mt4{margin-top:16px;}.mt5{margin-top:20px;}
.fw7{font-weight:700;}.fw8{font-weight:800;}
.tl2{color:var(--lime);}.ttl{color:var(--teal);}.tg{color:var(--green);}
.tr{color:var(--red);}.tgo{color:var(--gold);}.tm{color:var(--t2);}
.tp{color:var(--purple);}.tpk{color:var(--pink);}
.xs{font-size:10px;}.sm{font-size:11px;}.lg{font-size:15px;}
.mono{font-family:var(--fm);}
.div{height:1px;background:var(--border);margin:14px 0;}
.hid{display:none!important;}
.an1{animation:fup .5s ease both;}
.an2{animation:fup .5s .1s ease both;}
.an3{animation:fup .5s .2s ease both;}
.an4{animation:fup .5s .3s ease both;}
.an5{animation:fup .5s .4s ease both;}
@keyframes fup{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* ══════════════════════════════════════════
   VISUAL ENHANCEMENTS
══════════════════════════════════════════ */

/* Hero background orbs */
.hero-orb{position:absolute;border-radius:50%;pointer-events:none;z-index:0;filter:blur(80px);}
.hero-orb-1{width:500px;height:500px;background:radial-gradient(circle,rgba(184,255,87,.07),transparent 70%);top:-120px;left:-100px;}
.hero-orb-2{width:400px;height:400px;background:radial-gradient(circle,rgba(159,110,255,.07),transparent 70%);top:80px;right:-80px;}
.hero-orb-3{width:300px;height:300px;background:radial-gradient(circle,rgba(0,217,184,.05),transparent 70%);bottom:0;left:40%;}

/* Floating stat chips in hero */
.hero-chip{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:100px;background:rgba(10,20,38,.85);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(16px);box-shadow:0 8px 32px rgba(0,0,0,.4);font-size:12px;font-weight:700;}
.hero-chips{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:36px;}

/* Pulse on CTA */
@keyframes pulse-lime{0%,100%{box-shadow:0 8px 28px rgba(184,255,87,.35)}50%{box-shadow:0 8px 28px rgba(184,255,87,.35),0 0 0 14px rgba(184,255,87,.0)}}
.btn-lime.pulse{animation:pulse-lime 2.5s ease-in-out infinite;}

/* Stats: individual glowing cards */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:0;}
.stat-card{background:var(--s1);border:1px solid var(--border);border-radius:20px;padding:24px 18px;text-align:center;position:relative;overflow:hidden;transition:all .3s;}
.stat-card::before{content:'';position:absolute;inset:0;opacity:0;transition:.3s;border-radius:20px;}
.stat-card:hover{transform:translateY(-4px);}
.stat-card:hover::before{opacity:1;}
.stat-card.sc-lime{border-color:rgba(184,255,87,.15);}.stat-card.sc-lime::before{background:rgba(184,255,87,.03);}.stat-card.sc-lime:hover{box-shadow:0 12px 40px rgba(184,255,87,.1);}
.stat-card.sc-teal{border-color:rgba(0,217,184,.15);}.stat-card.sc-teal::before{background:rgba(0,217,184,.03);}.stat-card.sc-teal:hover{box-shadow:0 12px 40px rgba(0,217,184,.1);}
.stat-card.sc-purple{border-color:rgba(159,110,255,.15);}.stat-card.sc-purple::before{background:rgba(159,110,255,.03);}.stat-card.sc-purple:hover{box-shadow:0 12px 40px rgba(159,110,255,.1);}
.stat-card.sc-gold{border-color:rgba(255,184,48,.15);}.stat-card.sc-gold::before{background:rgba(255,184,48,.03);}.stat-card.sc-gold:hover{box-shadow:0 12px 40px rgba(255,184,48,.1);}
.stat-card.sc-orange{border-color:rgba(255,122,47,.15);}.stat-card.sc-orange::before{background:rgba(255,122,47,.03);}.stat-card.sc-orange:hover{box-shadow:0 12px 40px rgba(255,122,47,.1);}
.sv{font-family:var(--fd);font-size:38px;font-weight:900;line-height:1;margin-bottom:6px;}
.stat-card.sc-lime .sv{background:linear-gradient(135deg,var(--lime),var(--teal));-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.stat-card.sc-teal .sv{background:linear-gradient(135deg,var(--teal),var(--blue));-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.stat-card.sc-purple .sv{background:linear-gradient(135deg,var(--purple),var(--pink));-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.stat-card.sc-gold .sv{background:linear-gradient(135deg,var(--gold),var(--orange));-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.stat-card.sc-orange .sv{background:linear-gradient(135deg,var(--orange),var(--pink));-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.sl{font-size:12px;color:var(--t2);font-weight:600;}

/* Feature cards — enhanced */
.ft{background:linear-gradient(145deg,var(--s1),rgba(10,20,38,.8));box-shadow:0 2px 16px rgba(0,0,0,.2);}
.ft:hover{box-shadow:0 12px 40px rgba(0,0,0,.3);}
.ftico{border:1px solid rgba(255,255,255,.06);box-shadow:0 4px 14px rgba(0,0,0,.15);}

/* Service cards — enhanced */
.svc-card:hover{border-color:rgba(184,255,87,.45);box-shadow:0 0 0 1px rgba(184,255,87,.08),0 12px 40px rgba(0,0,0,.4),0 0 24px rgba(184,255,87,.04);}

/* pkg-tile enhanced hover */
.pkg-tile:hover{border-color:rgba(184,255,87,.45);box-shadow:0 0 0 1px rgba(184,255,87,.08),0 12px 40px rgba(0,0,0,.4);}

/* Metric cards — colored hover glow */
.m{box-shadow:0 2px 12px rgba(0,0,0,.18);}
.m.lime:hover{border-color:rgba(184,255,87,.3);box-shadow:0 8px 32px rgba(184,255,87,.08);}
.m.teal:hover{border-color:rgba(0,217,184,.3);box-shadow:0 8px 32px rgba(0,217,184,.08);}
.m.blue:hover{border-color:rgba(61,127,255,.3);box-shadow:0 8px 32px rgba(61,127,255,.08);}
.m.gold:hover{border-color:rgba(255,184,48,.3);box-shadow:0 8px 32px rgba(255,184,48,.08);}
.m.purple:hover{border-color:rgba(159,110,255,.3);box-shadow:0 8px 32px rgba(159,110,255,.08);}
.m.orange:hover{border-color:rgba(255,122,47,.3);box-shadow:0 8px 32px rgba(255,122,47,.08);}
.m.pink:hover{border-color:rgba(255,79,163,.3);box-shadow:0 8px 32px rgba(255,79,163,.08);}

/* Cards — subtle depth */
.card{box-shadow:0 2px 16px rgba(0,0,0,.18);}

/* HOW IT WORKS — gradient step number */
.hwn{background:linear-gradient(135deg,rgba(184,255,87,.25),rgba(0,217,184,.12));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.hwc{background:linear-gradient(145deg,var(--s1),var(--s2));box-shadow:0 2px 16px rgba(0,0,0,.15);}
.hwc:hover{border-color:rgba(184,255,87,.18);box-shadow:0 10px 36px rgba(0,0,0,.25),0 0 0 1px rgba(184,255,87,.05);}

/* CTA section */
.cta-sec{background:linear-gradient(135deg,rgba(184,255,87,.07),rgba(0,217,184,.04),rgba(159,110,255,.07));border:1px solid rgba(184,255,87,.14);border-radius:28px;padding:70px 36px;text-align:center;position:relative;overflow:hidden;margin:0 0 70px;}
.cta-sec::before{content:'';position:absolute;top:-100px;left:-100px;width:350px;height:350px;border-radius:50%;background:radial-gradient(circle,rgba(184,255,87,.07),transparent 70%);pointer-events:none;}
.cta-sec::after{content:'';position:absolute;bottom:-100px;right:-100px;width:350px;height:350px;border-radius:50%;background:radial-gradient(circle,rgba(159,110,255,.07),transparent 70%);pointer-events:none;}

/* Trust pills */
.trust-row{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:22px;}
.trust-pill{display:inline-flex;align-items:center;gap:7px;padding:8px 16px;border-radius:100px;background:var(--s2);border:1px solid var(--border2);font-size:12px;font-weight:700;color:var(--t2);}
.cta-sec .trust-pill{background:rgba(184,255,87,.08);border-color:rgba(184,255,87,.2);color:var(--lime);}

/* Sidebar — enhanced hover */
.si:hover{background:rgba(255,255,255,.04);color:var(--t1);}
.si.on{background:linear-gradient(90deg,rgba(184,255,87,.1),rgba(184,255,87,.04));}
.si.on .sii{background:rgba(184,255,87,.14);}

/* Nav logo — subtle glow on hover */
.nav-logo:hover .nl-mark{box-shadow:0 0 24px rgba(184,255,87,.4);}

/* Improved modal */
.modal{box-shadow:0 24px 80px rgba(0,0,0,.6);}
.mhd{border-bottom:1px solid var(--border);padding-bottom:18px;margin-bottom:22px;}

/* Footer gradient */
.site-footer{background:linear-gradient(180deg,transparent,rgba(6,13,26,.8));border-top:1px solid var(--border);padding:56px 24px 36px;}
.footer-link{font-size:13px;color:var(--t2);text-decoration:none;transition:color .2s;display:block;}
.footer-link:hover{color:var(--lime);}

/* ══════════════════════════════════════════
   MOBILE & RESPONSIVE
══════════════════════════════════════════ */

/* Hamburger button — hidden on desktop */
.mob-ham{display:none;align-items:center;justify-content:center;width:36px;height:36px;background:var(--s2);border:1px solid var(--border2);border-radius:9px;cursor:pointer;font-size:19px;color:var(--t1);flex-shrink:0;}

/* Sidebar overlay backdrop */
.sb-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:498;}
.sb-overlay.open{display:block;}

/* Mobile sidebar open toggle button inside dashboard */
.mob-sb-btn{display:none;align-items:center;gap:8px;padding:8px 14px;background:var(--s2);border:1px solid var(--border);border-radius:10px;color:var(--t1);font-size:13px;font-weight:700;cursor:pointer;margin-bottom:16px;}

/* Mobile nav dropdown */
.mob-nav-menu{display:none;flex-direction:column;position:fixed;top:62px;left:0;right:0;background:var(--s1);border-bottom:1px solid var(--border2);z-index:310;padding:10px 14px 14px;gap:4px;box-shadow:0 8px 32px rgba(0,0,0,.4);}
.mob-nav-menu.open{display:flex;}
.mob-nav-menu .nl{text-align:left;padding:13px 14px;font-size:13px;border-radius:10px;width:100%;min-height:48px;}

@media(max-width:900px){
  /* Nav — disable backdrop-filter on mobile to prevent WebKit compositor blur bug */
  .nav-links{display:none;}
  .mob-ham{display:flex;}
  .nav{padding:0 14px;backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(3,6,14,.97);overflow:hidden;}
  /* Hide all action buttons — they live in the hamburger dropdown */
  .nb-s,.nb-chat{display:none;}
  /* Compact user pill — avatar only, no name/role text */
  .unm,.url{display:none;}
  .upill{padding:3px;gap:0;}
  .nav-r{gap:6px;flex-shrink:0;}
  /* Prevent logo from pushing nav wider */
  .nav-logo{min-width:0;overflow:hidden;}
  .nl-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

  /* Category tabs — scroll instead of wrap */
  .cat-tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:6px;scrollbar-width:none;}
  .cat-tabs::-webkit-scrollbar{display:none;}
  .cat-tab{flex-shrink:0;}

  /* Sidebar items — larger touch target */
  .si{min-height:44px;padding:10px 11px;}

  /* Chat modals — flexible height on mobile */
  #chatMBody,#privateChatBody{height:clamp(260px,55vh,420px);}

  /* Grids */
  .g2,.g3,.inp-2{grid-template-columns:1fr;}

  /* Sidebar: becomes a slide-in drawer */
  .sb{
    display:block!important;
    position:fixed!important;
    top:0;left:0;
    width:260px!important;
    height:100vh!important;
    height:100dvh!important;
    z-index:600;
    transform:translateX(-270px);
    transition:transform .28s cubic-bezier(.4,0,.2,1);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    padding-top:62px;
  }
  .sb.mob-open{transform:translateX(0);box-shadow:6px 0 40px rgba(0,0,0,.6);}
  /* Overlay must not cover the sidebar — only the content area beside it */
  .sb-overlay.open{left:260px;}

  /* Dashboard mobile toggle button */
  .mob-sb-btn{display:flex;}

  /* Shell: full width, no flex sidebar gap */
  .shell{display:block;}
  .main{padding:14px;margin-left:0;}

  /* Page header row wrap */
  .ph{flex-wrap:wrap;gap:10px;}
  .ph .pr{width:100%;display:flex;flex-wrap:wrap;gap:8px;}

  /* Tables: scroll via .tscroll wrapper; table fills full width via table layout algorithm. */
  .card{overflow:visible;}
  .card table,.tbr table,.tscroll table{white-space:nowrap;width:100%;}

  /* Filter tab rows */
  .tbr{display:flex;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y;gap:6px;padding-bottom:6px;scrollbar-width:none;}
  .tbr::-webkit-scrollbar{display:none;}
  .tbt{flex-shrink:0;white-space:nowrap;}

  /* Buy page steps */
  .bst{gap:0;}
  .bstn{display:none;}
  .bsti{width:28px;height:28px;font-size:11px;}

  /* Notification panel */
  .np{right:8px;left:8px;width:auto;max-width:none;}

  /* Metrics grid: 2 col on tablet */
  .mg{grid-template-columns:1fr 1fr;}

  /* Card padding reduction */
  .cp{padding:14px;}
  .ch{padding:14px 14px 0;}

  /* Admin chat: stack panels vertically */
  .admin-chat-grid{grid-template-columns:1fr;min-height:auto;}
  .admin-chat-left{border-right:none;border-bottom:1px solid var(--border);}
  .admin-chat-list{max-height:220px;}

  /* 4-col metrics: 2 per row on tablet */
  .mg4{grid-template-columns:repeat(2,1fr)!important;}

  /* Donut chart: stack on tablet */
  .donut-row{flex-direction:column;align-items:flex-start;gap:14px;}
  .dsvg{width:110px;height:110px;}
  .dl{width:100%;}
}

@media(max-width:600px){
  /* Nav: keep only logo + notification + avatar + hamburger */
  .nb-chat,.nb-g{display:none;}
  .nav{padding:0 10px;overflow:visible;}
  .nl-s{display:none;}

  /* Buy steps: compact */
  .steps{gap:0;}
  .sn{width:24px;height:24px;font-size:10px;}
  .slb{font-size:8px;letter-spacing:0;}
  .step::after{top:12px;}

  /* Price manager row: stack on tiny screens */
  .pr2{flex-wrap:wrap;gap:6px;}
  .pin{margin-left:auto;}

  /* Agent banner: allow wrapping on tiny screens */
  #agentBanner{flex-wrap:wrap;}

  /* Dashboard open sidebar button */
  .mob-sb-btn{margin-bottom:12px;}

  /* Modals: bottom sheet with iOS safe-area */
  .mw{align-items:flex-end;padding:0;padding-bottom:env(safe-area-inset-bottom,0px);}
  .modal{border-radius:20px 20px 0 0;max-width:100%;width:100%;margin:0;max-height:90vh;max-height:90dvh;border-left:none;border-right:none;border-bottom:none;padding-bottom:calc(28px + env(safe-area-inset-bottom,0px));}

  /* Metrics grid: 2 col */
  .mg{grid-template-columns:1fr 1fr;gap:10px;}
  .m .mv{font-size:18px;}

  /* Padding / spacing */
  .main{padding:10px;}
  .card{border-radius:14px;}
  .cp{padding:12px;}

  /* .main has no overflow-x override here — tables scroll inside their own display:block containers */

  /* Force dashboard 2-col grids to single column on phone */
  .g2{grid-template-columns:1fr!important;}
  .g3{grid-template-columns:1fr!important;}

  /* Toasts: full width with safe-area so they clear the home bar */
  .tz{bottom:0;right:0;left:0;padding:8px;padding-bottom:calc(8px + env(safe-area-inset-bottom,0px));max-width:none;border-radius:0;}
  .toast{border-radius:10px;}
  /* iOS Safari zooms in on inputs with font-size < 16px — prevent by bumping to 16px on mobile */
  .inp,.inp-pfx .inp,.sinp,.ai-inp,.chat-inp{font-size:16px;}

  /* Buy steps text hidden */
  .bstn{display:none;}

  /* Service cards */
  .svc-grid{grid-template-columns:repeat(2,1fr);}
  .fol-grid{grid-template-columns:repeat(2,1fr);}

  /* Quick grid: 2 col */
  .qg{grid-template-columns:repeat(2,1fr);}

  /* FAB — move to left so it doesn't conflict with speed-dial at right */
  .fab{bottom:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));right:auto;left:16px;width:46px;height:46px;font-size:20px;}
  /* Safe-area bottom padding so content clears the FAB cluster + browser chrome */
  .page{padding-bottom:calc(90px + env(safe-area-inset-bottom,0px));}
  .main{padding-bottom:calc(90px + env(safe-area-inset-bottom,0px));}

  /* Table cells: smaller text */
  td{padding:8px 9px;font-size:11px;white-space:nowrap;max-width:160px;overflow:hidden;text-overflow:ellipsis;}
  th{padding:7px 9px;font-size:9px;white-space:nowrap;}

  /* Buttons row */
  .row.gap-2{flex-wrap:wrap;}

  /* Charts: compact on small phones */
  .bc{height:110px;gap:3px;}
  .blbl{font-size:7px;}

  /* Donut: center on phones */
  .donut-row{align-items:center;}
  .dsvg{width:90px;height:90px;}

  /* ── TABLE SCROLL FIX ──
     .card overflow:visible lets the .tscroll wrapper show its scrollbar.
     Table uses full width via native table layout algorithm. ── */
  .card{overflow:visible;}
  .card table,.tscroll table{white-space:nowrap;width:100%;}

  /* Page header: stack vertically on phones */
  .ph{flex-direction:column;align-items:flex-start;gap:10px;}
  .ph .pr{width:100%;display:flex;flex-wrap:wrap;gap:7px;}
  .ph .pr .btn{flex:1;min-width:calc(50% - 4px);text-align:center;justify-content:center;font-size:11px;padding:9px 8px;}
  .ph .pt{font-size:16px;}
  .ph .ps{font-size:11px;}

  /* Mob sidebar button: full-width, easier to tap */
  .mob-sb-btn{
    width:100%;
    justify-content:center;
    padding:11px 14px;
    font-size:13px;
    background:var(--s2);
    border:1px solid var(--border2);
    border-radius:12px;
    margin-bottom:14px;
  }

  /* Filter tab row: horizontal scroll, no scrollbar, no wrap */
  .tbr{
    display:flex;
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-x pan-y;
    scrollbar-width:none;
    gap:6px;
    padding:0 0 8px;
    margin-bottom:4px;
  }
  .tbr::-webkit-scrollbar{display:none;}
  .tbt{flex-shrink:0;white-space:nowrap;font-size:11px;padding:6px 12px;}

  /* Sidebar items: prevent text overflow */
  .si{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

  /* Metrics: prevent cards from getting too small */
  .m{padding:14px 10px;}
  .m .ml{font-size:10px;}

  /* 3 and 4-col metrics: 2 per row on phones */
  .mg3,.mg4{grid-template-columns:repeat(2,1fr)!important;}

  /* Hide lower-priority table columns on phones to cut width */
  /* Admin All Orders (9 cols): hide col 1=ID, 3=Agent, 8=Date — Recipient(6) kept visible per admin request */
  #dt-ord table th:nth-child(1),#dt-ord table td:nth-child(1),
  #dt-ord table th:nth-child(3),#dt-ord table td:nth-child(3),
  #dt-ord table th:nth-child(8),#dt-ord table td:nth-child(8){display:none;}
  /* Agent My Orders (7 cols): hide col 1=ID, 6=Date */
  #at-ord table th:nth-child(1),#at-ord table td:nth-child(1),
  #at-ord table th:nth-child(6),#at-ord table td:nth-child(6){display:none;}
}

@media(max-width:400px){
  .mg{grid-template-columns:1fr;}
  .modal{padding:20px 16px;}
  /* Hide admin-only nav button at this width */
  .nb-o{display:none;}
  /* Steps: hide labels completely */
  .slb{display:none;}
}

/* ═══ THEME SYSTEM ═══ */

/* Admin theme gallery */
.th-section-label{font-size:10px;font-weight:800;color:var(--t3);text-transform:uppercase;letter-spacing:.1em;margin-bottom:12px;}
.th-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;}
.th-card{background:var(--s2);border:1.5px solid var(--border);border-radius:14px;padding:14px 12px;cursor:pointer;transition:all .22s;position:relative;overflow:hidden;text-align:center;}
.th-card:hover{border-color:var(--lime);transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.3);}
.th-card.active{border-color:var(--lime);background:linear-gradient(135deg,rgba(255,255,255,.04),rgba(255,255,255,.01));box-shadow:0 0 0 2px var(--lime),0 8px 24px rgba(0,0,0,.3);}
.th-card.active::after{content:'✓';position:absolute;top:8px;right:10px;font-size:11px;font-weight:900;color:var(--lime);}
.th-swatches{display:flex;gap:3px;justify-content:center;margin-bottom:10px;border-radius:8px;overflow:hidden;}
.th-sw{flex:1;height:28px;}
.th-emo{font-size:22px;margin-bottom:5px;line-height:1;}
.th-nm{font-size:12px;font-weight:800;color:var(--t1);margin-bottom:3px;}
.th-desc{font-size:10px;color:var(--t3);line-height:1.4;}
.th-badge{display:inline-block;margin-top:6px;padding:2px 7px;border-radius:100px;background:rgba(159,110,255,.12);border:1px solid rgba(159,110,255,.25);font-size:8px;font-weight:900;color:var(--purple);letter-spacing:.08em;}

/* Seasonal body decorations */
body.theme-christmas::before{content:'❄️';position:fixed;top:70px;right:16px;font-size:22px;pointer-events:none;z-index:299;opacity:.5;animation:snowfall 4s ease-in-out infinite;}
body.theme-halloween::before{content:'🕷️';position:fixed;top:65px;right:16px;font-size:20px;pointer-events:none;z-index:299;opacity:.55;animation:spider 3s ease-in-out infinite;}
body.theme-valentine::before{content:'💕';position:fixed;top:70px;right:16px;font-size:20px;pointer-events:none;z-index:299;opacity:.55;animation:heartbeat 1.8s ease-in-out infinite;}
body.theme-easter::before{content:'🌷';position:fixed;top:70px;right:16px;font-size:20px;pointer-events:none;z-index:299;opacity:.55;}
body.theme-mothers-day::before{content:'🌸';position:fixed;top:70px;right:16px;font-size:20px;pointer-events:none;z-index:299;opacity:.55;animation:heartbeat 2.4s ease-in-out infinite;}
body.theme-ghana::before{content:'🇬🇭';position:fixed;top:70px;right:16px;font-size:20px;pointer-events:none;z-index:299;opacity:.7;}
body.theme-new-year::before{content:'🎇';position:fixed;top:70px;right:16px;font-size:20px;pointer-events:none;z-index:299;opacity:.6;animation:sparkle 1.5s ease-in-out infinite;}

@keyframes snowfall{0%,100%{transform:translateY(0) rotate(0deg);opacity:.5}50%{transform:translateY(8px) rotate(15deg);opacity:.8}}
@keyframes spider{0%,100%{transform:translateY(0)}50%{transform:translateY(12px)}}
@keyframes heartbeat{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}
@keyframes sparkle{0%,100%{transform:scale(1) rotate(0deg);opacity:.6}50%{transform:scale(1.2) rotate(20deg);opacity:1}}

@media(max-width:600px){
  .th-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));}
}

/* ═══ AI CHAT WIDGET ═══ */

/* Floating bubble — hidden; trigger lives in the speed-dial FAB instead */
#aiChatBubble{display:none!important;}
.ai-bubble{position:fixed;bottom:212px;right:22px;z-index:500;width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,var(--purple),var(--lime));border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:20px;color:#fff;box-shadow:0 4px 24px rgba(159,110,255,.45);transition:transform .25s,box-shadow .25s;}
.ai-bubble:hover{transform:scale(1.12) translateY(-2px);box-shadow:0 6px 32px rgba(159,110,255,.6);}
.ai-bubble.active{transform:scale(1.05);}
.ai-bubble-ico{position:relative;z-index:1;line-height:1;}
.ai-bubble-ring{position:absolute;inset:-4px;border-radius:50%;border:2px solid rgba(159,110,255,.4);animation:ai-ring 2.4s ease-in-out infinite;}
@keyframes ai-ring{0%,100%{transform:scale(1);opacity:.6}50%{transform:scale(1.18);opacity:0}}

/* Chat panel — centered on desktop, bottom-sheet on mobile */
.ai-panel{position:fixed;left:50%;top:50%;right:auto;bottom:auto;z-index:501;width:min(420px,92vw);max-height:min(600px,85vh);background:var(--s1);border:1px solid rgba(159,110,255,.25);border-radius:20px;box-shadow:0 20px 60px rgba(0,0,0,.65),0 0 0 1px rgba(159,110,255,.08);display:flex;flex-direction:column;opacity:0;transform:translate(-50%,-50%) scale(.95);pointer-events:none;transition:opacity .28s cubic-bezier(.4,0,.2,1),transform .28s cubic-bezier(.4,0,.2,1);overflow:hidden;}
.ai-panel.open{opacity:1;transform:translate(-50%,-50%) scale(1);pointer-events:all;}

/* Panel header */
.ai-panel-hd{display:flex;align-items:center;gap:11px;padding:14px 16px;background:linear-gradient(135deg,rgba(159,110,255,.12),rgba(184,255,87,.06));border-bottom:1px solid rgba(255,255,255,.06);flex-shrink:0;}
.ai-panel-av{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--purple),var(--lime));display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0;box-shadow:0 0 14px rgba(159,110,255,.4);}
.ai-panel-info{flex:1;min-width:0;}
.ai-panel-nm{font-size:14px;font-weight:800;color:var(--t1);}
.ai-panel-st{font-size:11px;color:var(--t3);margin-top:1px;display:flex;align-items:center;gap:5px;}
.ai-dot{width:7px;height:7px;border-radius:50%;background:var(--green);display:inline-block;flex-shrink:0;animation:blink 2.5s infinite;}
.ai-close{background:none;border:none;color:var(--t3);cursor:pointer;font-size:16px;padding:4px;border-radius:6px;transition:color .15s,background .15s;flex-shrink:0;}
.ai-close:hover{color:var(--t1);background:rgba(255,255,255,.06);}

/* Messages */
.ai-msgs{flex:1;overflow-y:auto;padding:14px 14px 6px;display:flex;flex-direction:column;gap:10px;scrollbar-width:thin;scrollbar-color:var(--s4) transparent;}
.ai-msgs::-webkit-scrollbar{width:3px;}.ai-msgs::-webkit-scrollbar-thumb{background:var(--s4);border-radius:2px;}

.ai-msg{display:flex;gap:8px;animation:fup .25s ease both;}
.ai-msg-user{flex-direction:row-reverse;}
.ai-av{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--purple),var(--lime));display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0;align-self:flex-end;}
.ai-bbl{padding:10px 13px;border-radius:16px;font-size:13px;line-height:1.55;word-break:break-word;max-width:240px;}
.ai-msg-assistant .ai-bbl{background:var(--s2);color:var(--t1);border-radius:4px 16px 16px 16px;border:1px solid var(--border);}
.ai-msg-user .ai-bbl{background:linear-gradient(135deg,var(--purple),#7c3aed);color:#fff;border-radius:16px 16px 4px 16px;}

/* Typing indicator */
.ai-typing{display:flex;align-items:center;gap:4px;padding:12px 14px;}
.ai-typing span{width:6px;height:6px;border-radius:50%;background:var(--t3);display:inline-block;}
.ai-typing span:nth-child(1){animation:ai-bounce .9s .0s ease-in-out infinite;}
.ai-typing span:nth-child(2){animation:ai-bounce .9s .15s ease-in-out infinite;}
.ai-typing span:nth-child(3){animation:ai-bounce .9s .3s ease-in-out infinite;}
@keyframes ai-bounce{0%,80%,100%{transform:translateY(0);background:var(--t3)}40%{transform:translateY(-6px);background:var(--purple)}}

/* Quick suggestion chips */
.ai-suggs{display:flex;flex-wrap:wrap;gap:6px;padding:8px 14px 4px;flex-shrink:0;}
.ai-sq{padding:5px 11px;border-radius:100px;background:var(--s2);border:1px solid rgba(159,110,255,.22);font-size:11px;font-weight:700;color:var(--t2);cursor:pointer;font-family:var(--ff);transition:all .18s;white-space:nowrap;}
.ai-sq:hover{border-color:rgba(159,110,255,.5);color:var(--t1);background:rgba(159,110,255,.08);}

/* Input row */
.ai-inp-row{display:flex;gap:8px;padding:10px 12px 12px;border-top:1px solid var(--border);flex-shrink:0;background:var(--s2);}
.ai-inp{flex:1;background:var(--s3);border:1px solid var(--border2);border-radius:20px;padding:9px 14px;color:var(--t1);font-size:13px;font-family:var(--ff);outline:none;transition:border-color .2s;}
.ai-inp:focus{border-color:rgba(159,110,255,.5);box-shadow:0 0 0 3px rgba(159,110,255,.08);}
.ai-inp::placeholder{color:var(--t3);}
.ai-send{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--purple),var(--lime));border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s;align-self:center;}
.ai-send:hover{transform:scale(1.1);box-shadow:0 4px 12px rgba(159,110,255,.4);}
.ai-send:disabled{opacity:.45;cursor:not-allowed;transform:none;}

@media(max-width:600px){
  .ai-bubble{bottom:20px;right:14px;width:48px;height:48px;font-size:18px;}
  /* Full-height bottom sheet; override the desktop-centered positioning */
  .ai-panel{left:0!important;right:0!important;top:auto!important;bottom:0!important;width:auto!important;max-width:none!important;max-height:calc(100dvh - 62px);border-radius:20px 20px 0 0;padding-bottom:env(safe-area-inset-bottom,0px);transform:translateY(20px) scale(.95)!important;}
  .ai-panel.open{transform:translateY(0) scale(1)!important;}
  /* ai-inp-row: extra breathing room above iOS home bar */
  .ai-inp-row{padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));}
}

/* scrollP keyframe from home page section */
@keyframes scrollP{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}100%{transform:scaleY(0);transform-origin:bottom}}

/* buy page animations */
@keyframes rpop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes cnf{from{opacity:0;transform:translateX(-50%) translateY(0)}to{opacity:1;transform:translateX(-50%) translateY(-26px)}}
@keyframes slideDown{from{opacity:0;transform:translateX(-50%) translateY(-20px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}

/* ═══ DARK / LIGHT MODE ═══ */
body.light-mode{
  --bg:#f0f4f8;--s1:#e2e8f0;--s2:#d1dae7;--s3:#c4cfde;--s4:#b8c5d6;--s5:#adbccf;
  --t1:#0f172a;--t2:#334155;--t3:#64748b;
  --border:rgba(0,0,0,0.09);--border2:rgba(0,0,0,0.16);
  --glow:0 0 40px rgba(60,140,0,0.15);
  --lime:#2e7d00;--lime2:#3a9900;
}
body.light-mode .nav{background:rgba(240,244,248,.95);}
body.light-mode .bg-mesh,body.light-mode .bg-grid{opacity:.4;}
body.light-mode .card,body.light-mode .modal,body.light-mode .np,body.light-mode .sb{background:var(--s1);border-color:var(--border);}
body.light-mode .inp{background:var(--s2);color:var(--t1);border-color:var(--border2);}
body.light-mode .inp::placeholder{color:var(--t3);}
body.light-mode table td,body.light-mode table th{border-bottom-color:var(--border);}
body.light-mode .m{background:var(--s2);border-color:var(--border);}
body.light-mode .wl{color:var(--t2);}
body.light-mode .wm{color:var(--t3);}
body.light-mode .wg{background:linear-gradient(135deg,rgba(80,140,30,.1),rgba(0,120,100,.08));}
body.light-mode .alert.aw{color:#92400e;background:rgba(180,120,0,.09);border-color:rgba(180,120,0,.18);}
body.light-mode .alert.ae{color:#991b1b;background:rgba(220,38,38,.07);border-color:rgba(220,38,38,.15);}
body.light-mode .alert.as{color:#065f46;background:rgba(5,150,105,.07);border-color:rgba(5,150,105,.15);}
body.light-mode .alert.ai{color:#1e3a8a;background:rgba(29,78,216,.07);border-color:rgba(29,78,216,.15);}
body.light-mode .sb-rl{color:var(--t2);}
body.light-mode .sb-bl{color:var(--t3);}
body.light-mode .sbadge{color:var(--t2);}
body.light-mode .np-hd,body.light-mode .np-sub{color:var(--t1);}
body.light-mode .pkg-tile{background:var(--s2);border-color:var(--border2);}
body.light-mode .pkg-sz{color:var(--t1);}
body.light-mode .pkg-b,body.light-mode .pkg-v{color:var(--t3);}
body.light-mode .svc-card{background:var(--s1);border-color:var(--border);}
body.light-mode .svc-card:hover{background:var(--s2);}
body.light-mode .svc-ico-wrap{background:var(--s2);border-color:var(--border2);}
body.light-mode .svc-card:hover .svc-ico-wrap{background:rgba(46,125,0,.08);border-color:rgba(46,125,0,.2);}
body.light-mode .btn-dark{background:var(--s3);color:var(--t1);border-color:var(--border2);}
body.light-mode select.inp{background:var(--s2);color:var(--t1);}
body.light-mode .tab-btn{color:var(--t2);}
body.light-mode .tab-btn.on{color:var(--t1);}
body.light-mode .adm-stat .num{color:var(--t1);}
body.light-mode .adm-stat .lbl{color:var(--t3);}
body.light-mode table th{color:var(--t2);background:var(--s2);}
body.light-mode table td{color:var(--t1);}
body.light-mode .ticker-item{color:var(--t2);}
/* Sidebar icon bubbles */
body.light-mode .sii{background:rgba(0,0,0,.06);}
body.light-mode .si.on .sii{background:rgba(46,125,0,.1);}
body.light-mode .si:hover{background:var(--s3);}
/* Sidebar balance widget */
body.light-mode .sb-bal{background:rgba(46,125,0,.07);border-color:rgba(46,125,0,.13);}
/* Search focus ring — replace neon lime with dark-mode-safe green */
body.light-mode .sr:focus-within{border-color:rgba(46,125,0,.4);}
body.light-mode .inp:focus{box-shadow:0 0 0 4px rgba(46,125,0,.08);}
body.light-mode .pinp:focus{border-color:rgba(46,125,0,.35);}
/* Banner text (was near-white, invisible on light bg) */
body.light-mode .bnt{color:#78350f;}
/* Lime "active" badge — pale neon bg unreadable on light */
body.light-mode .bl{background:rgba(46,125,0,.1);border-color:rgba(46,125,0,.2);}
body.light-mode .bl::before{background:var(--lime);}
/* Tab bar — add contrast */
body.light-mode .tbr{background:var(--s3);}
body.light-mode .tbt.on{background:var(--s1);color:var(--t1);box-shadow:0 1px 4px rgba(0,0,0,.1);}
/* Table hover — neon lime barely visible; swap to green tint */
body.light-mode tr:hover td{background:rgba(46,125,0,.04);}
/* Service / pkg card hover shadows — dark ones look bad on light */
body.light-mode .svc-card:hover{box-shadow:0 8px 24px rgba(0,0,0,.1);}
body.light-mode .pkg-tile:hover{box-shadow:0 8px 24px rgba(0,0,0,.1);}
body.light-mode .qc:hover{box-shadow:0 6px 20px rgba(0,0,0,.1);}
/* Invite card */
body.light-mode .inv-card{background:linear-gradient(135deg,rgba(80,50,200,.08),rgba(46,125,0,.06));border-color:rgba(80,50,200,.18);}
/* Toast shadow on light bg */
body.light-mode .toast{box-shadow:0 8px 28px rgba(0,0,0,.15);}
/* Code session card hover */
body.light-mode .code-session-card:hover{border-color:rgba(46,125,0,.25);}
/* Feature tile highlight line */
body.light-mode .ft:hover::before{background:linear-gradient(90deg,transparent,rgba(46,125,0,.25),transparent);}
body.light-mode .ft:hover{border-color:rgba(46,125,0,.2);}

/* Bottom mobile nav */
body.light-mode .mob-bnav{background:rgb(240,244,248);border-top-color:rgba(0,0,0,.1);box-shadow:0 -2px 20px rgba(0,0,0,.1);}
body.light-mode .mbn-dot{border-color:rgba(240,244,248,.97);}
body.light-mode .mbn-tab{color:var(--t3);}
body.light-mode .mbn-tab.on{color:var(--lime);}
body.light-mode .mbn-tab.on .mbn-iw{background:rgba(46,125,0,.1);}
body.light-mode .mbn-tab.on::before{background:var(--lime);}

/* Step indicators */
body.light-mode .sn{background:var(--s2);border-color:var(--border2);color:var(--t2);}
body.light-mode .step.on .sn{background:rgba(46,125,0,.08);box-shadow:0 0 10px rgba(46,125,0,.12);}
body.light-mode .step::after{background:var(--border2);}

/* Ghost button — white border invisible on light bg */
body.light-mode .btn-ghost{border-color:rgba(0,0,0,.22);color:var(--t1);}

/* Drawer / right nav panel */
body.light-mode .rdrawer{background:var(--s1);border-left-color:var(--border);}
body.light-mode .rdrawer-row{color:var(--t1);}
body.light-mode .rdrawer-row:hover{background:var(--s2);}

/* SMS page cards in light mode */
body.light-mode .sms-cap-tab{background:var(--s2);border-color:var(--border);color:var(--t2);}
body.light-mode .sms-cap-tab.on{background:rgba(46,125,0,.1);border-color:var(--lime);color:var(--lime);}
body.light-mode .sms-svc-card{background:var(--s2);border-color:var(--border);}
body.light-mode .sms-svc-card:hover{border-color:var(--lime);}
body.light-mode .sms-active-card{background:var(--s2);border-color:var(--border);}
body.light-mode .sms-order-row{background:var(--s2);border-color:var(--border);}
body.light-mode .sms-search-input{background:var(--s2);color:var(--t1);}
body.light-mode .sms-msg-item,body.light-mode .sms-msg-empty{background:var(--s1);}
body.light-mode .sms-tabs{border-bottom-color:var(--border);}
body.light-mode .sms-tab{color:var(--t3);}
body.light-mode .sms-tab.on{color:var(--lime);border-bottom-color:var(--lime);}

/* Smooth theme transitions on key elements */
body,html{transition:background-color .25s ease;}
.btn,.card,.inp,.nav,.mob-bnav,.modal,.svc-card,.pkg-tile,.sms-svc-card,.sms-cap-tab,.sms-active-card,.sms-order-row,.sms-search-input,.sn{transition:background-color .2s ease,border-color .2s ease,color .15s ease;}

/* Dark/Light toggle button */
.theme-toggle{width:34px;height:34px;border-radius:8px;background:var(--s2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:15px;transition:all .2s;flex-shrink:0;}
.theme-toggle:hover{border-color:var(--border2);transform:translateY(-1px);}

/* ═══ WHATSAPP FLOAT BUTTON ═══ */
.wa-fab{position:fixed;bottom:82px;right:22px;z-index:500;width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,#25d366,#128c7e);box-shadow:0 4px 20px rgba(37,211,102,.4);display:flex;align-items:center;justify-content:center;font-size:24px;cursor:pointer;transition:all .25s;border:none;text-decoration:none;color:white;}
.wa-fab:hover{transform:scale(1.12) translateY(-2px);box-shadow:0 6px 28px rgba(37,211,102,.55);}
.wa-fab-tip{position:absolute;right:62px;background:var(--s2);color:var(--t1);font-size:11px;font-weight:700;padding:5px 10px;border-radius:8px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s;border:1px solid var(--border2);}
.wa-fab:hover .wa-fab-tip{opacity:1;}
@media(max-width:600px){
  .wa-fab{bottom:72px;right:14px;width:46px;height:46px;font-size:20px;}
  /* Buy/find-agent pages: full-width padding on mobile */
  #page-buy .main-wrap,#page-find-agent .main-wrap{padding:16px 12px;}
  /* Hero chips: wrap tightly */
  .hero-chips{gap:7px;margin-top:20px;}
  .hero-chip{font-size:11px;padding:7px 12px;}
  /* Footer: single column */
  .site-footer{padding:36px 16px 24px;}
  /* CTA section */
  .cta-sec{padding:44px 18px;border-radius:18px;}
  /* Hero CTA buttons: stack vertically */
  #page-home .an4{flex-direction:column;align-items:center;width:100%;}
  #page-home .an4 .btn-xl{width:100%;max-width:340px;justify-content:center;}
}

/* ═══ STAR REVIEW ═══ */
.star-rating{display:flex;gap:4px;font-size:22px;cursor:pointer;}
.star-rating span{color:var(--t3);transition:color .15s;}
.star-rating span.on{color:#ffb830;}

/* ═══ SERVICE STATUS BADGE ═══ */
.svc-status{position:absolute;bottom:7px;right:8px;font-size:8px;font-weight:800;padding:2px 7px;border-radius:100px;letter-spacing:.06em;text-transform:uppercase;}
.svc-status.live{background:rgba(45,206,137,.12);color:var(--green);border:1px solid rgba(45,206,137,.25);}
.svc-status.down{background:rgba(255,69,69,.1);color:var(--red);border:1px solid rgba(255,69,69,.2);}
.svc-status.slow{background:rgba(255,184,48,.1);color:var(--gold);border:1px solid rgba(255,184,48,.2);}

/* ═══ FAQ SECTION ═══ */
.faq-item{border:1px solid var(--border);border-radius:var(--r2);overflow:hidden;margin-bottom:10px;transition:border-color .2s;}
.faq-item.open{border-color:rgba(184,255,87,.25);}
.faq-q{padding:18px 20px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px;font-weight:700;color:var(--t1);user-select:none;}
.faq-q:hover{background:rgba(255,255,255,.03);}
.faq-arrow{font-size:12px;color:var(--lime);transition:transform .25s;flex-shrink:0;}
.faq-item.open .faq-arrow{transform:rotate(180deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;}
.faq-item.open .faq-a{max-height:300px;}
.faq-a-inner{padding:0 20px 18px;font-size:13px;color:var(--t2);line-height:1.75;}

/* ═══ ORDER LOOKUP ═══ */
.lookup-status{padding:7px 14px;border-radius:100px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;}
.lookup-status.success{background:rgba(45,206,137,.1);color:var(--green);border:1px solid rgba(45,206,137,.25);}
.lookup-status.pending{background:rgba(255,184,48,.1);color:var(--gold);border:1px solid rgba(255,184,48,.25);}
.lookup-status.failed{background:rgba(255,69,69,.1);color:var(--red);border:1px solid rgba(255,69,69,.25);}

/* ═══ LOYALTY POINTS ═══ */
.lp-card{background:linear-gradient(135deg,rgba(159,110,255,.12),rgba(0,217,184,.08));border:1px solid rgba(159,110,255,.25);border-radius:var(--r);padding:22px;text-align:center;}
.lp-pts{font-family:var(--fd);font-size:42px;font-weight:900;background:linear-gradient(135deg,var(--purple),var(--teal));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.lp-val{font-size:13px;color:var(--t2);margin-top:4px;}
.lp-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:100px;background:rgba(159,110,255,.1);border:1px solid rgba(159,110,255,.2);font-size:10px;font-weight:700;color:var(--purple);margin-top:10px;}

/* ═══ INLINE COPY BUTTON ═══ */
.btn-cp-tiny{display:inline-flex;align-items:center;justify-content:center;padding:1px 5px;border-radius:4px;background:var(--s2);border:1px solid var(--border);font-size:11px;cursor:pointer;color:var(--t3);transition:all .15s;vertical-align:middle;margin-left:4px;line-height:1.4;}
.btn-cp-tiny:hover{background:rgba(184,255,87,.15);color:var(--lime);border-color:rgba(184,255,87,.3);}

/* ═══ COMMISSION HISTORY ═══ */
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.comm-tbl{width:100%;border-collapse:collapse;font-size:13px;}
.comm-tbl th{padding:10px 12px;text-align:left;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--t3);border-bottom:1px solid var(--border);white-space:nowrap;}
.comm-tbl td{padding:11px 12px;border-bottom:1px solid var(--border);vertical-align:middle;color:var(--t1);}
.comm-tbl tr:last-child td{border-bottom:none;}
.comm-tbl tr:hover td{background:var(--s1);}
.comm-tbl .td{font-family:var(--fm);font-size:12px;}
.comm-tbl .fw6{font-weight:600;}
.comm-tbl .fw7{font-weight:700;}
.comm-tbl .ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;}
.comm-sum-chip{display:flex;flex-direction:column;gap:3px;background:var(--s1);border:1px solid var(--border);border-radius:10px;padding:8px 14px;min-width:100px;}
.comm-sum-val{font-size:16px;font-weight:800;color:var(--t1);}
.comm-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;color:var(--t3);text-align:center;}
@media(max-width:640px){
  /* Override inherited white-space:nowrap from .card table rule */
  .comm-tbl{white-space:normal;overflow-x:hidden;}
  .comm-tbl thead{display:none;}
  .comm-tbl tr{display:flex;flex-direction:column;padding:12px 14px;border-bottom:1px solid var(--border);gap:4px;width:100%;box-sizing:border-box;}
  .comm-tbl td{padding:0;border:none;font-size:12px;white-space:normal;word-break:break-word;width:100%;box-sizing:border-box;max-width:none;overflow:visible;text-overflow:clip;}
  .comm-tbl td:first-child{font-weight:700;color:var(--t2);}
  .comm-tbl td[data-label]::before{content:attr(data-label) ': ';font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--t3);margin-right:4px;}
}

/* ═══ COUPON INPUT ═══ */
.coupon-row{display:flex;gap:8px;align-items:stretch;}
.coupon-row .inp{flex:1;}
.coupon-row .btn{flex-shrink:0;padding:0 16px;}
.coupon-applied{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:8px;background:rgba(45,206,137,.08);border:1px solid rgba(45,206,137,.2);font-size:12px;color:var(--green);font-weight:700;}

/* ─── Sidebar extras (customer/agent sidebar header) ─── */
.sb-h{display:flex;align-items:center;gap:12px;padding:16px 14px 14px;}
.sb-sep{height:1px;background:var(--border);margin:8px 14px;}
/* ═══ SHARED DASHBOARD COMPONENTS ═══ */
.tab-pane{display:block;}
.tab-pane.hid{display:none!important;}
.sec-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;border-bottom:1px solid var(--border);padding-bottom:10px;}
.sec-t{font-size:13px;font-weight:700;color:var(--t1);text-transform:uppercase;letter-spacing:.08em;}
.sec-act{font-size:11px;font-weight:700;color:var(--lime);cursor:pointer;opacity:.8;transition:opacity .15s;}
.sec-act:hover{opacity:1;}
.ph-t{font-family:var(--fd);font-size:22px;font-weight:700;color:var(--t1);margin:0 0 4px;}
.ph-s{font-size:12px;color:var(--t3);}

/* ═══ CUSTOMER DASHBOARD ═══ */
.locker-card{background:var(--s2);border:1px solid var(--border);border-radius:var(--r);padding:20px;transition:all .2s;}
.locker-card:hover{border-color:rgba(184,255,87,.2);transform:translateY(-1px);}
.locker-card-h{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;}
.locker-access{animation:fadeIn .25s ease;}
@keyframes fadeIn{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}
.locker-access pre{font-family:var(--fm,monospace);font-size:12.5px;color:#e0e7ef;word-break:break-all;white-space:pre-wrap;background:#060d1a;border-radius:10px;padding:14px 16px;margin:0;line-height:1.9;}
.expiry-pill{display:inline-flex;align-items:center;padding:3px 10px;border-radius:100px;background:rgba(255,184,48,.08);border:1px solid rgba(255,184,48,.2);font-size:10px;font-weight:700;color:var(--gold);margin-top:6px;}
.ticket-item{background:var(--s2);border:1px solid var(--border);border-radius:var(--r);padding:16px 18px;transition:border-color .2s;}
.ticket-item:hover{border-color:rgba(0,217,184,.2);}
.slot-pill{display:inline-block;padding:2px 8px;border-radius:6px;font-size:10px;font-weight:700;margin:2px;}
.slot-pill.avail{background:rgba(45,206,137,.12);color:var(--green);border:1px solid rgba(45,206,137,.2);}
.slot-pill.used{background:rgba(255,100,100,.1);color:#f87171;border:1px solid rgba(255,100,100,.2);}
.slot-pill.exp{background:rgba(255,184,48,.08);color:var(--gold);border:1px solid rgba(255,184,48,.2);}
.cn-item{display:flex;align-items:flex-start;gap:12px;padding:10px 12px;border-radius:8px;background:var(--s1);cursor:pointer;transition:background .15s;}
.cn-item:hover{background:var(--s2);}
.nb-c{background:rgba(184,255,87,.1);color:var(--lime);border:1px solid rgba(184,255,87,.25);}
.nb-c:hover{background:rgba(184,255,87,.2);}
.nb-reg{background:rgba(0,217,184,.12);color:#00d9b8;border:1px solid rgba(0,217,184,.25);}
.nb-reg:hover{background:rgba(0,217,184,.2);}
@media(max-width:900px){
  .nb-c,.nb-reg{display:none;}
}
.coupon-applied .cx{cursor:pointer;color:var(--red);font-size:14px;margin-left:auto;}

/* ═══ CUSTOMER DASHBOARD v2 ═══ */
.cust-hero{display:flex;justify-content:space-between;align-items:center;background:linear-gradient(135deg,rgba(0,217,184,.07),rgba(184,255,87,.04));border:1px solid rgba(0,217,184,.15);border-radius:var(--r3);padding:24px 28px;margin-bottom:24px;gap:16px;flex-wrap:wrap;}
.cust-qa-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:4px;}
.cust-qa{background:var(--s1);border:1px solid var(--border);border-radius:var(--r3);padding:22px 12px 18px;text-align:center;cursor:pointer;transition:all .2s;}
.cust-qa:hover{border-color:rgba(184,255,87,.3);transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.2);background:var(--s2);}
.cust-qa-ico{font-size:30px;margin-bottom:9px;line-height:1;}
.cust-qa-lbl{font-size:12px;font-weight:800;color:var(--t1);margin-bottom:3px;}
.cust-qa-sub{font-size:10px;color:var(--t3);font-weight:500;line-height:1.3;}
/* Chat */
.chat-wrap{background:var(--s1);border:1px solid var(--border);border-radius:var(--r3);overflow:hidden;display:flex;flex-direction:column;height:520px;}
.chat-header{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--border);background:var(--s2);flex-shrink:0;}
.chat-av{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--teal),var(--lime));display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;}
.chat-msgs{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:8px;scrollbar-width:thin;scrollbar-color:var(--s4) transparent;}
.chat-msgs::-webkit-scrollbar{width:4px;}.chat-msgs::-webkit-scrollbar-thumb{background:var(--s4);}
.chat-inp-row{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--border);background:var(--s2);flex-shrink:0;}
.chat-inp{flex:1;background:var(--s3);border:1px solid var(--border2);border-radius:22px;padding:10px 16px;color:var(--t1);font-size:13px;font-family:var(--ff);outline:none;transition:border-color .2s;}
.chat-inp:focus{border-color:rgba(0,217,184,.5);box-shadow:0 0 0 3px rgba(0,217,184,.08);}
.chat-send{width:40px;height:40px;border-radius:50%;background:var(--teal);color:#fff;border:none;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s;}
.chat-send:hover{background:var(--lime);color:var(--bg);transform:scale(1.08);}
.cmsg{display:flex;flex-direction:column;max-width:72%;}
.cmsg.mine{align-self:flex-end;align-items:flex-end;}
.cmsg.theirs{align-self:flex-start;}
.cmsg-bbl{padding:10px 14px;border-radius:18px;font-size:13px;line-height:1.55;word-break:break-word;}
.cmsg.mine .cmsg-bbl{background:linear-gradient(135deg,var(--teal),#00b8a9);color:#fff;border-radius:18px 18px 4px 18px;}
.cmsg.theirs .cmsg-bbl{background:var(--s3);color:var(--t1);border-radius:4px 18px 18px 18px;}
.cmsg-meta{font-size:10px;color:var(--t3);margin-top:3px;padding:0 4px;}
.cmsg-img{max-width:220px;border-radius:12px;margin-top:4px;cursor:pointer;}
.chat-day-sep{text-align:center;font-size:11px;color:var(--t3);font-weight:700;background:var(--s2);border-radius:20px;padding:3px 12px;align-self:center;margin:6px 0;}
/* Loyalty */
.pts-hero{background:linear-gradient(135deg,rgba(159,110,255,.12),rgba(184,255,87,.06));border:1px solid rgba(159,110,255,.25);border-radius:var(--r3);padding:36px;text-align:center;margin-bottom:8px;}
.pts-big{font-family:var(--fd);font-size:64px;font-weight:900;background:linear-gradient(135deg,var(--lime),var(--teal));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1;margin:8px 0;}
.pts-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);}
.pts-row:last-child{border-bottom:none;}
/* Order filter */
.ord-card{background:var(--s1);border:1px solid var(--border);border-radius:var(--r3);padding:16px 18px;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;transition:border-color .2s;}
.ord-card:hover{border-color:rgba(184,255,87,.2);}
/* Agent profile */
.agent-prof-card{background:linear-gradient(135deg,rgba(255,122,47,.07),rgba(255,184,48,.04));border:1px solid rgba(255,122,47,.2);border-radius:var(--r3);padding:24px;margin-bottom:16px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
/* Quick stat strip */
.stat-strip{display:flex;gap:20px;background:var(--s2);border-radius:12px;padding:14px 20px;margin-bottom:20px;flex-wrap:wrap;}
.stat-strip-item{display:flex;flex-direction:column;gap:2px;}
.stat-strip-val{font-family:var(--fd);font-size:18px;font-weight:700;color:var(--t1);}
.stat-strip-lbl{font-size:10px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.08em;}
@media(max-width:900px){
  .cust-qa-grid{grid-template-columns:repeat(2,1fr);}
  .cust-hero{padding:16px 18px;}
  .chat-wrap{height:400px;}
  .pts-big{font-size:44px;}
}
@media(max-width:600px){
  .cust-qa-grid{grid-template-columns:repeat(2,1fr);}
  .cmsg{max-width:88%;}
}

/* ═══ AGENT STOREFRONT ═══ */
.store-wrap{max-width:960px;margin:0 auto;padding:24px 20px 60px;}
.store-topbar{display:flex;gap:10px;margin-bottom:22px;}

/* Hero */
.store-hero{background:linear-gradient(135deg,rgba(184,255,87,.06),rgba(0,217,184,.04));border:1px solid rgba(184,255,87,.15);border-radius:var(--r4);padding:32px;margin-bottom:28px;display:flex;align-items:flex-start;gap:24px;flex-wrap:wrap;}
.store-avatar{width:72px;height:72px;border-radius:18px;background:linear-gradient(135deg,var(--purple),var(--lime));display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:900;color:var(--bg);flex-shrink:0;box-shadow:0 8px 24px rgba(184,255,87,.2);}
.store-hero-info{flex:1;min-width:220px;}
.store-name{font-family:var(--fd);font-size:24px;font-weight:800;}
.store-tier-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 12px;border-radius:100px;font-size:11px;font-weight:800;}
.tier-standard{background:rgba(61,82,117,.15);color:var(--t2);}
.tier-bronze{background:rgba(205,127,50,.12);color:#cd7f32;border:1px solid rgba(205,127,50,.3);}
.tier-silver{background:rgba(148,163,184,.1);color:#94a3b8;border:1px solid rgba(148,163,184,.3);}
.tier-gold{background:rgba(255,184,48,.12);color:var(--gold);border:1px solid rgba(255,184,48,.3);}
.tier-platinum{background:rgba(159,110,255,.12);color:var(--purple);border:1px solid rgba(159,110,255,.3);}
.store-stats{display:flex;gap:24px;margin-top:16px;flex-wrap:wrap;}
.store-stat{display:flex;flex-direction:column;gap:2px;}
.store-stat-v{font-family:var(--fd);font-size:20px;font-weight:700;color:var(--t1);}
.store-stat-l{font-size:10px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.08em;}

/* Pricing grid */
.store-price-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin-bottom:32px;}
.store-price-card{background:var(--s1);border:1px solid var(--border);border-radius:var(--r3);overflow:hidden;transition:border-color .2s,transform .2s;}
.store-price-card:hover{border-color:var(--svc-color,rgba(184,255,87,.3));transform:translateY(-2px);}
.spc-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border);background:rgba(255,255,255,.02);}
.spc-ico{font-size:22px;width:36px;text-align:center;flex-shrink:0;}
.spc-nm{font-size:13px;font-weight:800;}
.spc-sub{font-size:10px;color:var(--t3);margin-top:1px;}
.spc-plans{padding:10px 0;}
.spc-plan{display:flex;justify-content:space-between;align-items:center;padding:8px 16px;cursor:pointer;transition:background .15s;}
.spc-plan:hover{background:rgba(184,255,87,.04);}
.spc-plan-nm{font-size:12px;color:var(--t2);}
.spc-plan-pr{font-size:13px;font-weight:800;color:var(--lime);}

/* Reviews */
.store-reviews-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin-bottom:32px;}
.store-review-card{background:var(--s1);border:1px solid var(--border);border-radius:var(--r3);padding:16px;}
.src-stars{color:var(--gold);font-size:15px;margin-bottom:4px;}
.src-svc{font-size:10px;font-weight:700;color:var(--teal);text-transform:uppercase;letter-spacing:.07em;margin-bottom:8px;}
.src-comment{font-size:13px;color:var(--t2);line-height:1.55;margin-bottom:8px;font-style:italic;}
.src-date{font-size:11px;color:var(--t3);}

/* CTA */
.store-cta{text-align:center;background:linear-gradient(135deg,rgba(184,255,87,.06),rgba(0,217,184,.04));border:1px solid rgba(184,255,87,.15);border-radius:var(--r4);padding:40px 24px;margin-top:8px;}

/* Agent directory cards */
.agent-dir-card{background:var(--s1);border:1px solid var(--border);border-radius:var(--r3);padding:18px;cursor:pointer;transition:all .2s;display:flex;flex-direction:column;gap:10px;}
.agent-dir-card:hover{border-color:rgba(184,255,87,.3);transform:translateY(-3px);box-shadow:0 8px 28px rgba(0,0,0,.2);}
.adc-head{display:flex;align-items:center;gap:12px;}
.adc-av{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,var(--purple),var(--lime));display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:900;color:var(--bg);flex-shrink:0;}
.adc-nm{font-size:14px;font-weight:800;margin-bottom:4px;}
.adc-stats{display:flex;gap:12px;font-size:11px;color:var(--t2);flex-wrap:wrap;}
.adc-since{font-size:10px;color:var(--t3);}
.adc-actions{display:flex;gap:8px;margin-top:4px;}

@media(max-width:700px){
  .store-hero{padding:20px;}
  .store-name{font-size:19px;}
  .store-avatar{width:56px;height:56px;font-size:22px;}
}

/* ═══ CODE RELAY — CUSTOMER PANEL ═══ */
.cr-wrap{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:12px;border:1px solid var(--border);}
.cr-waiting{background:rgba(255,184,48,.06);border-color:rgba(255,184,48,.22);}
.cr-expired{background:rgba(255,69,69,.06);border-color:rgba(255,69,69,.22);}
.cr-active{background:rgba(45,206,137,.06);border-color:rgba(45,206,137,.22);}
.cr-pending{background:rgba(0,217,184,.06);border-color:rgba(0,217,184,.22);}
.cr-code{background:rgba(184,255,87,.07);border-color:rgba(184,255,87,.25);}
.cr-done{background:rgba(45,206,137,.06);border-color:rgba(45,206,137,.22);}
.cr-icon{font-size:24px;flex-shrink:0;width:32px;text-align:center;}
.cr-title{font-size:13px;font-weight:700;color:var(--t1);}
.cr-sub{font-size:11px;color:var(--t2);margin-top:3px;}
.cr-countdown{color:var(--gold);font-weight:800;font-family:var(--fm);}
.cr-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;}
.cr-code-display{font-family:var(--fm);font-size:28px;font-weight:900;color:var(--lime);letter-spacing:6px;padding:10px 0 4px;}
@keyframes cr-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.1)}}
@keyframes cr-spin{to{transform:rotate(360deg)}}
.cr-pulse-anim{animation:cr-pulse 1.4s ease-in-out infinite;display:inline-block;}
.cr-spin-anim{animation:cr-spin 1s linear infinite;display:inline-block;}

/* ═══ CODE RELAY — ADMIN PANEL ═══ */
.code-session-card{background:var(--s1);border:1px solid var(--border);border-radius:var(--r3);padding:16px 18px;}
.code-session-card:hover{border-color:rgba(184,255,87,.2);}
.csc-head{display:flex;align-items:center;gap:12px;margin-bottom:10px;}
.csc-svc-icon{width:40px;height:40px;border-radius:10px;background:var(--s3);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;}
.csc-actions{display:flex;gap:8px;flex-wrap:wrap;}

/* ═══════════════════════════════════════════════════════════════════
   FLASH DEALS
═══════════════════════════════════════════════════════════════════ */
@keyframes flashPulse { 0%,100%{transform:scale(1);opacity:1;} 50%{transform:scale(1.15);opacity:.8;} }
@keyframes flashShimmer { 0%{background-position:-200% 0;} 100%{background-position:200% 0;} }

.flash-card{
  position:relative;background:var(--s1);border:1px solid rgba(255,69,69,.18);border-radius:14px;
  padding:18px 16px;cursor:pointer;transition:all .22s cubic-bezier(.4,0,.2,1);overflow:hidden;
}
.flash-card::before{
  content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,69,69,.04),rgba(255,122,47,.04));opacity:0;transition:.22s;
}
.flash-card:hover{border-color:rgba(255,69,69,.4);transform:translateY(-3px);box-shadow:0 8px 28px rgba(255,69,69,.15);}
.flash-card:hover::before{opacity:1;}
.flash-badge{
  display:inline-block;padding:3px 10px;background:rgba(255,69,69,.15);border:1px solid rgba(255,69,69,.3);
  border-radius:6px;font-size:10px;font-weight:800;color:#ff4545;letter-spacing:.08em;margin-bottom:10px;
  animation:flashPulse 1.4s ease-in-out infinite;
}
.flash-disc{
  position:absolute;top:12px;right:12px;width:44px;height:44px;border-radius:50%;
  background:linear-gradient(135deg,#ff4545,#ff7a2f);display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:900;color:#fff;text-align:center;line-height:1.2;
}
.flash-name{font-weight:800;font-size:15px;color:var(--t1);margin-bottom:4px;padding-right:50px;}
.flash-plan{font-size:11px;color:var(--t3);margin-bottom:10px;}
.flash-prices{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.flash-orig{font-size:12px;color:var(--t3);text-decoration:line-through;}
.flash-sale{font-size:20px;font-weight:900;color:var(--lime);}
.flash-cta{font-size:12px;font-weight:700;color:#ff4545;letter-spacing:.06em;}

/* ═══════════════════════════════════════════════════════════════════
   STREAK REWARDS
═══════════════════════════════════════════════════════════════════ */
@keyframes streakFire { 0%,100%{transform:scale(1) rotate(-3deg);} 50%{transform:scale(1.1) rotate(3deg);} }

.streak-banner{
  display:flex;align-items:center;gap:16px;
  background:linear-gradient(135deg,rgba(255,122,47,.09),rgba(255,69,69,.06));
  border:1px solid rgba(255,122,47,.25);border-radius:14px;padding:14px 18px;margin-bottom:20px;
}
.streak-fire{font-size:32px;animation:streakFire 1s ease-in-out infinite;flex-shrink:0;}
.streak-fire .ti{font-size:32px;color:#ff7a2f;}
.streak-count{font-family:var(--fd,sans-serif);font-size:36px;font-weight:900;color:#ff7a2f;line-height:1;}
.streak-label{font-size:11px;color:var(--t3);text-transform:uppercase;letter-spacing:.1em;margin-top:2px;}
.streak-next{margin-left:auto;text-align:right;flex-shrink:0;}
.streak-next-label{font-size:10px;color:var(--t3);margin-bottom:4px;}
.streak-next-val{font-size:14px;font-weight:700;color:var(--lime);}

/* Milestone badges */
.streak-milestones{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px;}
.streak-ms{display:flex;align-items:center;gap:8px;padding:8px 14px;background:var(--s1);border:1px solid var(--border);border-radius:10px;flex:1;min-width:120px;}
.streak-ms.achieved{border-color:rgba(184,255,87,.3);background:rgba(184,255,87,.06);}
.streak-ms-ico{font-size:20px;}
.streak-ms-day{font-size:12px;font-weight:700;color:var(--t1);}
.streak-ms-pts{font-size:10px;color:var(--lime);font-weight:700;}
.streak-ms-status{margin-left:auto;font-size:10px;color:var(--t3);}
.streak-ms.achieved .streak-ms-status{color:var(--lime);}


/* ── Locker cards ── */
.locker-card{background:var(--s1);border:1px solid var(--border);border-radius:14px;padding:18px 20px;margin-bottom:16px;transition:border-color .2s;}
.locker-card:hover{border-color:rgba(184,255,87,.18);}
.locker-card-h{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.locker-access{overflow:hidden;}

/* ═══ PHASE-2 UTILITY TOKENS ═══ */

/* ── Reduced motion ── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important;}
  .hero-orb,.bg-mesh,.bg-grid,.pulse,.npip{animation:none!important;}
  /* Keep ticker looping — just slow it way down so motion-sensitive users still benefit */
  .tkt{-webkit-animation-duration:120s!important;animation-duration:120s!important;-webkit-animation-iteration-count:infinite!important;animation-iteration-count:infinite!important;}
}

/* ── Universal focus rings (keyboard only) ── */
:focus-visible{outline:2px solid var(--lime);outline-offset:3px;border-radius:4px;}
.btn:focus-visible{outline:2px solid var(--lime);outline-offset:3px;}
.inp:focus-visible{outline:none;}
a:focus-visible{outline:2px solid var(--lime);outline-offset:3px;border-radius:3px;}

/* ── Status dot ── */
.sdot{display:inline-block;width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.sdot-lime{background:var(--lime);animation:blink 2s infinite;}
.sdot-red{background:var(--red);}
.sdot-gold{background:var(--gold);}
.sdot-teal{background:var(--teal);}
.sdot-t2{background:var(--t2);}

/* ── Skeleton loader ── */
@keyframes sk-shine{0%{background-position:-400px 0}100%{background-position:400px 0}}
.sk{background:linear-gradient(90deg,var(--s2) 25%,var(--s3) 50%,var(--s2) 75%);background-size:800px 100%;animation:sk-shine 1.4s ease-in-out infinite;border-radius:8px;color:transparent!important;user-select:none;pointer-events:none;}
.sk-line{height:12px;border-radius:6px;margin-bottom:8px;}
.sk-line.w80{width:80%;}
.sk-line.w60{width:60%;}
.sk-line.w40{width:40%;}
.sk-circle{border-radius:50%;}
.sk-card{height:120px;border-radius:var(--r3);}

/* ── Empty state ── */
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;text-align:center;gap:12px;}
.empty-state-ico{font-size:44px;opacity:.55;}
.empty-state-title{font-size:15px;font-weight:800;color:var(--t1);}
.empty-state-sub{font-size:13px;color:var(--t3);max-width:280px;line-height:1.6;}
.empty-state-action{margin-top:4px;}

/* ── Copyable row ── */
.copy-row{display:flex;align-items:center;gap:8px;background:var(--s2);border:1px solid var(--border);border-radius:var(--r2);padding:9px 12px;transition:border-color .18s;}
.copy-row:hover{border-color:var(--border2);}
.copy-row-label{font-size:10px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.1em;flex-shrink:0;}
.copy-row-val{flex:1;font-size:13px;font-weight:700;color:var(--t1);font-family:var(--fm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.copy-row-btn{flex-shrink:0;padding:4px 9px;border-radius:6px;background:var(--s3);border:1px solid var(--border2);font-size:10px;font-weight:700;color:var(--t2);cursor:pointer;transition:all .16s;white-space:nowrap;}
.copy-row-btn:hover{background:rgba(184,255,87,.1);color:var(--lime);border-color:rgba(184,255,87,.25);}
.copy-row-btn.ok{background:rgba(184,255,87,.1);color:var(--lime);border-color:rgba(184,255,87,.25);}

/* ── Section header helper ── */
.sh{margin-bottom:40px;text-align:center;}
.sh.sh-left{text-align:left;}
.sh-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 16px;border-radius:100px;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px;border:1px solid;}
.sh-title{font-family:var(--fd);font-size:clamp(22px,4vw,40px);font-weight:800;line-height:1.15;margin-bottom:10px;}
.sh-sub{font-size:14px;color:var(--t2);max-width:500px;margin:0 auto;line-height:1.7;}
.sh.sh-left .sh-sub{margin:0;}

/* ── Right-side drawer (guest / universal) ── */
.rdrawer{position:fixed;top:0;right:0;bottom:0;width:300px;max-width:92vw;background:var(--s1);border-left:1px solid var(--border);z-index:600;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .28s cubic-bezier(.4,0,.2,1);overflow-y:auto;}
.rdrawer.open{transform:translateX(0);box-shadow:-8px 0 48px rgba(0,0,0,.55);}
.rdrawer-ov{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:599;display:none;}
.rdrawer-ov.open{display:block;}
.rdrawer-head{display:flex;align-items:center;justify-content:space-between;padding:18px 18px 14px;border-bottom:1px solid var(--border);}
.rdrawer-av{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--purple),var(--lime));display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:900;flex-shrink:0;}
.rdrawer-nm{font-size:13px;font-weight:800;}
.rdrawer-rl{font-size:9px;color:var(--lime);font-weight:700;text-transform:uppercase;letter-spacing:.1em;margin-top:2px;}
.rdrawer-close{width:30px;height:30px;border-radius:8px;background:var(--s2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;color:var(--t2);flex-shrink:0;transition:all .15s;}
.rdrawer-close:hover{background:var(--s3);color:var(--t1);}
.rdrawer-body{flex:1;padding:8px 0;}
.rdrawer-sec-label{font-size:9px;font-weight:800;color:var(--t3);text-transform:uppercase;letter-spacing:.14em;padding:14px 18px 5px;}
.rdrawer-row{display:flex;align-items:center;gap:11px;padding:11px 18px;min-height:48px;cursor:pointer;transition:background .15s;border:none;background:transparent;width:100%;text-align:left;color:var(--t1);font-family:var(--ff);font-size:13px;font-weight:600;}
.rdrawer-row:hover{background:var(--s2);}
.rdrawer-row.active{color:var(--lime);background:rgba(184,255,87,.05);}
.rdrawer-row-ico{width:32px;height:32px;border-radius:9px;background:var(--s2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;}
.rdrawer-row-chev{margin-left:auto;font-size:10px;color:var(--t3);}
.rdrawer-sep{height:1px;background:var(--border);margin:8px 18px;}
.rdrawer-footer{padding:14px 18px;border-top:1px solid var(--border);}
.rdrawer-theme-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;}
.rdrawer-theme-label{font-size:12px;font-weight:700;color:var(--t2);}

/* ── Live clock ── */
.live-clock{font-family:var(--fm);font-size:13px;font-weight:700;color:var(--t1);letter-spacing:.04em;}

/* ── Pill action row ── */
.pill-actions{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0 0;}
.pill-act{display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 14px;background:var(--s2);border:1px solid var(--border);border-radius:14px;cursor:pointer;transition:all .2s;min-width:64px;}
.pill-act:hover{border-color:var(--border2);background:var(--s3);transform:translateY(-2px);}
.pill-act-ico{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:17px;}
.pill-act-lbl{font-size:10px;font-weight:700;color:var(--t2);white-space:nowrap;}
@media(max-width:480px){.pill-act{padding:8px 10px;min-width:56px;}.pill-act-ico{width:30px;height:30px;font-size:14px;}}

/* ── System status strip ── */
.sys-strip{display:flex;align-items:center;flex-wrap:wrap;gap:16px;background:rgba(184,255,87,.04);border:1px solid rgba(184,255,87,.1);border-radius:12px;padding:10px 18px;margin:20px 0;}
.sys-strip-dot{width:9px;height:9px;border-radius:50%;background:var(--lime);animation:blink 2s infinite;flex-shrink:0;}
.sys-strip-status{font-size:12px;font-weight:800;color:var(--lime);}
.sys-strip-sep{width:1px;height:14px;background:var(--border2);}
.sys-strip-badge{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--t2);font-weight:600;}

/* ── Collapsible help row ── */
.help-row{background:var(--s1);border:1px solid var(--border);border-radius:12px;margin:20px 0;overflow:hidden;}
.help-row-hd{display:flex;align-items:center;gap:10px;padding:13px 16px;cursor:pointer;user-select:none;transition:background .15s;}
.help-row-hd:hover{background:var(--s2);}
.help-row-hd-ico{font-size:18px;}
.help-row-hd-txt{flex:1;font-size:13px;font-weight:700;}
.help-row-chev{font-size:10px;color:var(--t3);transition:transform .22s;}
.help-row.open .help-row-chev{transform:rotate(180deg);}
.help-row-body{max-height:0;overflow:hidden;transition:max-height .3s ease;}
.help-row.open .help-row-body{max-height:400px;}
.help-row-inner{padding:0 16px 16px;display:flex;flex-direction:column;gap:8px;}
.help-row-link{display:flex;align-items:center;gap:10px;padding:9px 12px;background:var(--s2);border:1px solid var(--border);border-radius:9px;cursor:pointer;transition:border-color .16s;font-size:12px;font-weight:600;color:var(--t1);}
.help-row-link:hover{border-color:var(--border2);}

/* ── Network-themed category hero ── */
.net-hero{border-radius:var(--r3);padding:20px 22px;margin-bottom:20px;border:1px solid;display:flex;align-items:center;gap:14px;}
.net-hero-ico{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:26px;flex-shrink:0;}
.net-hero-title{font-family:var(--fd);font-size:18px;font-weight:800;line-height:1.2;}
.net-hero-sub{font-size:12px;margin-top:3px;opacity:.8;}
.net-hero-badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:100px;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;margin-top:6px;border:1px solid currentColor;opacity:.7;}

/* ── Out-of-stock ribbon ── */
.oos-wrap{position:relative;}
.oos-ribbon{position:absolute;top:10px;right:-4px;background:var(--red);color:#fff;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;padding:3px 9px;border-radius:4px;box-shadow:0 2px 8px rgba(255,69,69,.4);z-index:2;pointer-events:none;}
.oos-ribbon::after{content:'';position:absolute;right:0;bottom:-4px;border-left:4px solid transparent;border-top:4px solid rgba(180,0,0,.7);}
.oos-overlay{position:absolute;inset:0;background:rgba(3,6,14,.55);border-radius:inherit;z-index:1;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--red);pointer-events:none;border-radius:14px;}

/* ── 404 page ── */
.p404{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:calc(100vh - 62px);padding:40px 24px;text-align:center;}
.p404-num{font-family:var(--fd);font-size:clamp(100px,20vw,180px);font-weight:900;line-height:1;background:linear-gradient(135deg,var(--purple),var(--lime));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:0;}
.p404-title{font-family:var(--fd);font-size:clamp(20px,4vw,36px);font-weight:800;margin:12px 0 10px;}
.p404-sub{font-size:15px;color:var(--t2);max-width:380px;line-height:1.7;margin-bottom:32px;}

/* ── Support chat FAB ── */
.support-fab{position:fixed;bottom:146px;right:22px;z-index:500;width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,var(--purple),var(--blue));box-shadow:0 4px 20px rgba(159,110,255,.4);display:flex;align-items:center;justify-content:center;font-size:22px;cursor:pointer;transition:all .25s;border:none;color:white;text-decoration:none;}
.support-fab:hover{transform:scale(1.12) translateY(-2px);box-shadow:0 6px 28px rgba(159,110,255,.55);}
.support-fab-tip{position:absolute;right:62px;background:var(--s2);color:var(--t1);font-size:11px;font-weight:700;padding:5px 10px;border-radius:8px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s;border:1px solid var(--border2);}
.support-fab:hover .support-fab-tip{opacity:1;}
@media(max-width:760px){.support-fab{bottom:126px;right:14px;width:46px;height:46px;font-size:19px;}}
@media(max-width:700px){.home-li-grid{grid-template-columns:1fr!important;}}

/* ── Speed-dial support FAB ── */
.fab-dial{position:fixed;bottom:24px;bottom:calc(24px + env(safe-area-inset-bottom,0px));right:24px;z-index:500;display:flex;flex-direction:column;align-items:flex-end;gap:10px;}
.fab-dial.fab-dial-hidden{display:none!important;}
.fab-dial-menu{display:flex;flex-direction:column;align-items:flex-end;gap:10px;opacity:0;pointer-events:none;transform:translateY(8px) scale(.96);transition:opacity .22s cubic-bezier(.4,0,.2,1),transform .22s cubic-bezier(.4,0,.2,1);}
.fab-dial.open .fab-dial-menu{opacity:1;pointer-events:all;transform:none;}
.fab-dial-item{position:relative;width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;cursor:pointer;border:none;color:white;text-decoration:none;transition:transform .2s,box-shadow .2s;flex-shrink:0;}
.fab-dial-item:hover{transform:scale(1.1) translateX(-2px);}
.fdi-wa{background:linear-gradient(135deg,#25d366,#128c7e);box-shadow:0 4px 16px rgba(37,211,102,.4);}
.fdi-sup{background:linear-gradient(135deg,var(--purple),var(--blue));box-shadow:0 4px 16px rgba(159,110,255,.4);}
.fdi-ai{background:linear-gradient(135deg,var(--purple),var(--lime));box-shadow:0 4px 16px rgba(159,110,255,.4);font-size:16px;}
.fdi-tip{position:absolute;right:54px;top:50%;transform:translateY(-50%);background:var(--s2);color:var(--t1);font-size:11px;font-weight:700;padding:5px 10px;border-radius:8px;white-space:nowrap;border:1px solid var(--border2);pointer-events:none;opacity:0;transition:opacity .15s;}
.fab-dial.open .fab-dial-item:hover .fdi-tip{opacity:1;}
.fab-dial-trigger{width:54px;height:54px;border-radius:50%;background:linear-gradient(135deg,var(--purple),var(--blue));color:white;font-size:22px;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 5px 22px rgba(159,110,255,.45);transition:transform .22s,box-shadow .22s;flex-shrink:0;}
.fab-dial-trigger:hover{transform:scale(1.1);box-shadow:0 8px 30px rgba(159,110,255,.55);}
.fab-dial.open .fab-dial-trigger{transform:rotate(45deg);}
.fab-dial-ico-x{display:none;font-style:normal;}
.fab-dial.open .fab-dial-ico{display:none;}
.fab-dial.open .fab-dial-ico-x{display:block;}
@media(max-width:600px){
  .fab-dial{right:14px;}
  .fab-dial-item{width:42px;height:42px;font-size:18px;}
  .fab-dial-trigger{width:50px;height:50px;font-size:20px;}
}
/* AI panel — lift above speed-dial on mobile bottom-sheet */
@media(max-width:600px){
  .ai-panel{z-index:502;}
}

/* ── Promo modal overlay ── */
#promoM .modal{max-width:460px;}
.promo-m-hero{border-radius:14px;padding:28px 22px 22px;text-align:center;margin-bottom:18px;background:linear-gradient(135deg,rgba(184,255,87,.08),rgba(0,217,184,.06));border:1px solid rgba(184,255,87,.15);}
.promo-m-ico{font-size:52px;margin-bottom:10px;}
.promo-m-title{font-family:var(--fd);font-size:20px;font-weight:900;margin-bottom:6px;}
.promo-m-sub{font-size:13px;color:var(--t2);line-height:1.6;}
.promo-m-dismiss{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--t3);cursor:pointer;margin-top:14px;user-select:none;}
.promo-m-dismiss input{accent-color:var(--lime);}

/* ── Recent activity list (homepage) ── */
.activity-list{display:flex;flex-direction:column;gap:10px;}
.activity-item{display:flex;align-items:center;gap:12px;background:var(--s1);border:1px solid var(--border);border-radius:12px;padding:12px 14px;transition:border-color .18s;}
.activity-item:hover{border-color:var(--border2);}
.activity-ico{width:38px;height:38px;border-radius:10px;background:var(--s2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0;}
.activity-info{flex:1;min-width:0;}
.activity-title{font-size:13px;font-weight:700;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.activity-meta{font-size:11px;color:var(--t3);margin-top:2px;}
.activity-amt{font-size:13px;font-weight:800;color:var(--lime);flex-shrink:0;}
.activity-status{flex-shrink:0;}

/* ── Quick actions grid ── */
.qa-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:10px;}
.qa-tile{display:flex;flex-direction:column;align-items:center;gap:7px;padding:14px 8px;background:var(--s1);border:1px solid var(--border);border-radius:14px;cursor:pointer;transition:all .2s;text-align:center;}
.qa-tile:hover{border-color:var(--border2);background:var(--s2);transform:translateY(-2px);}
.qa-ico{width:38px;height:38px;border-radius:11px;background:var(--s2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:18px;transition:all .2s;}
.qa-tile:hover .qa-ico{background:var(--s3);}
.qa-lbl{font-size:10px;font-weight:700;color:var(--t2);line-height:1.3;}

/* ── Homepage category cards ── */
.home-cat-card{background:var(--s2);border:1px solid var(--border);border-radius:16px;padding:20px 16px;cursor:pointer;transition:all .22s;text-align:center;}
.home-cat-card:hover{background:var(--s3);border-color:rgba(184,255,87,.2);transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.18);}
.home-cat-ico{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:26px;margin:0 auto 12px;}
.home-cat-nm{font-family:var(--fd);font-size:14px;font-weight:800;margin-bottom:3px;}
.home-cat-sub{font-size:10px;color:var(--t3);margin-bottom:8px;line-height:1.4;}
.home-cat-hint{font-size:11px;font-weight:700;}
body.light-mode .home-cat-card{background:var(--s2);border-color:var(--border);}
body.light-mode .home-cat-card:hover{background:var(--s3);border-color:rgba(46,125,0,.2);box-shadow:0 8px 24px rgba(0,0,0,.1);}

/* ── Onboarding getting-started steps ── */
.gs-step{display:flex;align-items:center;gap:12px;background:var(--s1);border:1px solid var(--border);border-radius:10px;padding:11px 14px;cursor:pointer;transition:all .2s;}
.gs-step:hover{background:var(--s2);border-color:rgba(184,255,87,.2);transform:translateX(2px);}
.gs-ico{font-size:20px;flex-shrink:0;width:32px;text-align:center;}
.gs-body{flex:1;min-width:0;}
.gs-title{font-size:13px;font-weight:700;margin-bottom:2px;}
.gs-sub{font-size:11px;color:var(--t3);}
.gs-arr{color:var(--lime);font-size:16px;flex-shrink:0;transition:transform .2s;}
.gs-step:hover .gs-arr{transform:translateX(3px);}
body.light-mode .gs-step{background:var(--s1);border-color:var(--border);}
body.light-mode .gs-step:hover{background:var(--s2);}

/* ── Ticket quick-topic pills ── */
.tk-quick{background:var(--s2);border:1px solid var(--border);border-radius:100px;padding:5px 12px;font-size:11px;font-weight:700;color:var(--t2);cursor:pointer;transition:all .18s;white-space:nowrap;}
.tk-quick:hover{background:var(--s3);border-color:rgba(184,255,87,.3);color:var(--t1);}
.tk-quick.on{background:rgba(184,255,87,.1);border-color:var(--lime);color:var(--lime);}
/* ── Ticket list cards ── */
.ticket-item{background:var(--s2);border:1px solid var(--border);border-radius:12px;padding:14px 16px;transition:border-color .2s;}
.ticket-item:hover{border-color:rgba(184,255,87,.15);}
body.light-mode .tk-quick{background:var(--s2);border-color:var(--border);}
body.light-mode .tk-quick:hover{background:var(--s3);}
body.light-mode .tk-quick.on{background:rgba(46,125,0,.08);border-color:rgba(46,125,0,.5);color:#2e7d00;}
body.light-mode .ticket-item{background:var(--s2);border-color:var(--border);}

/* ── Wallet top-up preset tiles ── */
.tu-preset{background:var(--s2);border:1px solid var(--border);border-radius:10px;padding:12px 8px;font-family:var(--fd);font-size:14px;font-weight:700;color:var(--t1);cursor:pointer;transition:all .18s;text-align:center;}
.tu-preset:hover{background:var(--s3);border-color:rgba(184,255,87,.3);}
.tu-preset.on{background:rgba(184,255,87,.1);border-color:var(--lime);color:var(--lime);}
body.light-mode .tu-preset{background:var(--s2);border-color:var(--border);}
body.light-mode .tu-preset:hover{background:var(--s3);}
body.light-mode .tu-preset.on{background:rgba(46,125,0,.08);border-color:rgba(46,125,0,.5);color:#2e7d00;}

/* ── Pagination row (orders) ── */
#adOPagination{display:flex;align-items:center;gap:8px;justify-content:center;padding:12px 0;flex-wrap:wrap;}
@media(max-width:600px){
  .home-cat-card{padding:16px 12px;}
  .home-cat-ico{width:44px;height:44px;font-size:22px;}
  .home-cat-nm{font-size:12px;}
  #adOPagination{padding:10px 0;}
  #adOPagination span{font-size:10px;}
  /* Commission filter tabs + search: stack vertically on narrow */
  #commHistCard .cp>div{flex-direction:column;align-items:stretch;}
  #commFilterTabs{width:100%;}
  #commHistCard .sr{width:100%;}
  /* Agent page: stat strip wraps more tightly */
  .stat-strip{gap:12px;padding:12px 14px;}
  /* Customer quick-action grid: min 2 columns */
  .cust-qa-grid{grid-template-columns:repeat(2,1fr);}
  /* Ensure modal action buttons in admin always wrap */
  #adDeliverModal .btn{font-size:11px;padding:9px 12px;}
  /* Large loyalty points: reduce further on phones */
  .pts-big{font-size:36px;}
  /* Notif panel fill screen on small phones */
  .np{right:6px;left:6px;}
  /* Agent profile card stack */
  .agent-prof-card{flex-direction:column;gap:12px;}
  /* Leaderboard: fix small avatar overlap */
  .lbr{padding:9px 12px;gap:9px;}
}

/* ══════════════════════════════════════════
   LANDING PAGE — lp-* system
══════════════════════════════════════════ */

/* ── Layout ── */
.lp-wrap{max-width:1140px;margin:0 auto;padding-left:24px;padding-right:24px;}
.lp-section{padding-top:80px;padding-bottom:80px;}
.lp-alt-bg{background:var(--s1);}

/* ── Hero ── */
.lp-hero{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:96px 24px 88px;}
.lp-hero-inner{position:relative;z-index:1;max-width:720px;margin:0 auto;text-align:center;}
.lp-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:100px;background:rgba(184,255,87,.07);border:1px solid rgba(184,255,87,.18);font-size:11px;font-weight:700;color:var(--lime);letter-spacing:.04em;margin-bottom:24px;}
.lp-badge-dot{width:6px;height:6px;border-radius:50%;background:var(--lime);animation:blink 2s infinite;flex-shrink:0;}
.lp-h1{font-family:var(--fd);font-size:clamp(36px,6vw,68px);font-weight:900;line-height:1.06;margin-bottom:22px;letter-spacing:-.02em;}
.lp-h1-grad{background:linear-gradient(135deg,var(--lime),var(--teal));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.lp-sub{font-size:clamp(14px,2vw,18px);color:var(--t2);line-height:1.7;max-width:560px;margin:0 auto 32px;}
.lp-cta-row{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin-bottom:28px;}
.lp-chips{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;margin-bottom:28px;margin-top:0;}
.lp-chip{display:flex;align-items:center;gap:6px;padding:5px 13px;border-radius:100px;background:var(--s2);border:1px solid var(--border);font-size:11px;font-weight:600;color:var(--t2);}
.lp-chip-dot{width:6px;height:6px;border-radius:50%;background:var(--lime);animation:blink 2s infinite;flex-shrink:0;}
.lp-status{display:inline-flex;align-items:center;gap:8px;font-size:11px;color:var(--t3);font-weight:600;}
.lp-status-dot{width:7px;height:7px;border-radius:50%;background:var(--lime);animation:blink 2s infinite;flex-shrink:0;}
.lp-status-sep{color:var(--t3);opacity:.45;}
.lp-hero-visual{display:flex;flex-direction:column;gap:8px;margin:24px auto 20px;max-width:340px;width:100%;}
.lp-hero-card{display:flex;align-items:center;padding:10px 14px;border-radius:13px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);backdrop-filter:blur(10px);animation:hcFadeIn .45s ease both;animation-delay:var(--hc-delay,0s);}
@keyframes hcFadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ── Section headers ── */
.lp-sec-hd{text-align:center;max-width:640px;margin:0 auto 52px;}
.lp-sec-label{display:inline-flex;align-items:center;padding:4px 12px;border-radius:100px;border:1px solid;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;margin-bottom:14px;}
.lp-sec-h2{font-family:var(--fd);font-size:clamp(22px,4vw,40px);font-weight:900;line-height:1.12;letter-spacing:-.02em;margin-bottom:12px;}
.lp-sec-p{font-size:15px;color:var(--t2);line-height:1.7;}
.lp-grad-teal{background:linear-gradient(135deg,var(--teal),var(--lime));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.lp-grad-lime{background:linear-gradient(135deg,var(--lime),var(--teal));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.lp-grad-purple{background:linear-gradient(135deg,var(--purple),var(--pink));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}

/* ── Service cards ── */
.lp-svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:14px;margin-bottom:40px;}
.lp-svc-card{background:var(--s2);border:1px solid var(--border);border-radius:16px;padding:22px 18px 18px;cursor:pointer;transition:all .22s;}
.lp-svc-card:hover{background:var(--s3);border-color:var(--border2);transform:translateY(-4px);box-shadow:0 14px 36px rgba(0,0,0,.28);}
.lp-svc-ico{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:26px;margin-bottom:14px;}
.lp-svc-nm{font-family:var(--fd);font-size:13px;font-weight:800;margin-bottom:5px;}
.lp-svc-sub{font-size:11px;color:var(--t3);margin-bottom:9px;line-height:1.5;}
.lp-svc-price{font-size:12px;font-weight:700;}

/* ── Stats strip ── */
.lp-stats{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:0;background:var(--s2);border:1px solid var(--border);border-radius:16px;padding:24px 32px;}
.lp-stat{display:flex;flex-direction:column;align-items:center;gap:5px;padding:0 32px;}
.lp-stat-n{font-family:var(--fd);font-size:30px;font-weight:900;line-height:1;}
.lp-stat-l{font-size:11px;color:var(--t3);font-weight:600;text-align:center;}
.lp-stat-div{width:1px;height:44px;background:var(--border);}

/* ══════════ DELIVERY STATUS — shared colour tokens ══════════ */
:root{
  --ds-fast-c:#b8ff57;--ds-fast-glow:rgba(184,255,87,.35);--ds-fast-bg:rgba(184,255,87,.07);--ds-fast-border:rgba(184,255,87,.3);
  --ds-normal-c:#ffb830;--ds-normal-glow:rgba(255,184,48,.35);--ds-normal-bg:rgba(255,184,48,.07);--ds-normal-border:rgba(255,184,48,.3);
  --ds-slow-c:#ff4f4f;--ds-slow-glow:rgba(255,79,79,.35);--ds-slow-bg:rgba(255,79,79,.07);--ds-slow-border:rgba(255,79,79,.3);
}

/* ── Big card (home page) ── */
.ds-card{display:flex;align-items:center;justify-content:space-between;gap:20px;background:var(--s2);border:1px solid var(--border);border-radius:22px;padding:24px 30px;position:relative;overflow:hidden;transition:border-color .4s,box-shadow .4s;}
.ds-card::before{content:'';position:absolute;inset:0;pointer-events:none;transition:background .4s;background:radial-gradient(ellipse 70% 100% at 10% 50%,rgba(184,255,87,.04),transparent 65%);}
.ds-card.ds-fast {border-color:var(--ds-fast-border);box-shadow:0 0 32px var(--ds-fast-glow),inset 0 0 40px rgba(184,255,87,.04);}
.ds-card.ds-fast::before{background:radial-gradient(ellipse 70% 100% at 10% 50%,var(--ds-fast-bg),transparent 65%);}
.ds-card.ds-normal{border-color:var(--ds-normal-border);box-shadow:0 0 32px var(--ds-normal-glow),inset 0 0 40px rgba(255,184,48,.04);}
.ds-card.ds-normal::before{background:radial-gradient(ellipse 70% 100% at 10% 50%,var(--ds-normal-bg),transparent 65%);}
.ds-card.ds-slow  {border-color:var(--ds-slow-border);box-shadow:0 0 32px var(--ds-slow-glow),inset 0 0 40px rgba(255,79,79,.04);}
.ds-card.ds-slow::before{background:radial-gradient(ellipse 70% 100% at 10% 50%,var(--ds-slow-bg),transparent 65%);}

.ds-left{display:flex;align-items:center;gap:20px;flex:1;min-width:0;}
.ds-icon-col{position:relative;flex-shrink:0;width:58px;height:58px;display:flex;align-items:center;justify-content:center;}
.ds-icon-bg{position:absolute;inset:0;border-radius:50%;background:rgba(184,255,87,.1);transition:background .4s;}
.ds-card.ds-fast  .ds-icon-bg{background:rgba(184,255,87,.15);}
.ds-card.ds-normal .ds-icon-bg{background:rgba(255,184,48,.15);}
.ds-card.ds-slow  .ds-icon-bg{background:rgba(255,79,79,.15);}
.ds-icon{font-size:28px;position:relative;z-index:2;}

/* Radar pulse rings */
.ds-pulse-ring,.ds-pulse-ring2{position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--lime);opacity:0;animation:dsRadar 2.4s ease-out infinite;}
.ds-pulse-ring2{animation-delay:1.2s;}
.ds-card.ds-fast  .ds-pulse-ring,.ds-card.ds-fast  .ds-pulse-ring2{border-color:var(--ds-fast-c);}
.ds-card.ds-normal .ds-pulse-ring,.ds-card.ds-normal .ds-pulse-ring2{border-color:var(--ds-normal-c);}
.ds-card.ds-slow  .ds-pulse-ring,.ds-card.ds-slow  .ds-pulse-ring2{border-color:var(--ds-slow-c);}
.ds-card.ds-unknown .ds-pulse-ring,.ds-card.ds-unknown .ds-pulse-ring2{border-color:var(--t3);animation-duration:4s;}
@keyframes dsRadar{0%{transform:scale(1);opacity:.7;}100%{transform:scale(2.2);opacity:0;}}

.ds-body{min-width:0;}
.ds-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--t3);margin-bottom:5px;}
.ds-title{font-size:18px;font-weight:900;line-height:1.15;margin-bottom:5px;transition:color .4s,text-shadow .4s;}
.ds-card.ds-fast  .ds-title{color:var(--ds-fast-c);text-shadow:0 0 18px var(--ds-fast-glow);}
.ds-card.ds-normal .ds-title{color:var(--ds-normal-c);text-shadow:0 0 18px var(--ds-normal-glow);}
.ds-card.ds-slow  .ds-title{color:var(--ds-slow-c);text-shadow:0 0 18px var(--ds-slow-glow);}
.ds-sub{font-size:12px;color:var(--t2);line-height:1.5;}

/* Speed badge pill */
.ds-badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:100px;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;margin-top:7px;transition:all .4s;}
.ds-card.ds-fast  .ds-badge{background:rgba(184,255,87,.15);color:var(--ds-fast-c);border:1px solid rgba(184,255,87,.35);}
.ds-card.ds-normal .ds-badge{background:rgba(255,184,48,.15);color:var(--ds-normal-c);border:1px solid rgba(255,184,48,.35);}
.ds-card.ds-slow  .ds-badge{background:rgba(255,79,79,.15);color:var(--ds-slow-c);border:1px solid rgba(255,79,79,.35);}
.ds-card.ds-unknown .ds-badge{background:rgba(255,255,255,.05);color:var(--t3);border:1px solid var(--border);}

.ds-right{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex-shrink:0;}
.ds-metrics{display:flex;align-items:center;gap:0;}
.ds-metric{display:flex;flex-direction:column;align-items:center;gap:3px;padding:0 20px;}
.ds-metric-val{font-family:var(--fd);font-size:22px;font-weight:900;transition:color .4s;}
.ds-card.ds-fast   .ds-metric-val{color:var(--ds-fast-c);}
.ds-card.ds-normal .ds-metric-val{color:var(--ds-normal-c);}
.ds-card.ds-slow   .ds-metric-val{color:var(--ds-slow-c);}
.ds-metric-lbl{font-size:10px;color:var(--t3);font-weight:600;white-space:nowrap;}
.ds-metric-div{width:1px;height:36px;background:var(--border);}
.ds-last{font-size:11px;color:var(--t3);}
body.light-mode .ds-card{background:#fff;}
@media(max-width:600px){
  .ds-card{flex-direction:column;align-items:flex-start;padding:18px 20px;gap:14px;}
  .ds-right{align-items:flex-start;width:100%;}
  .ds-metrics{justify-content:flex-start;}
  .ds-title{font-size:16px;}
}

/* ── Mini strip (buy page / dashboards) ── */
.ds-mini{display:flex;align-items:center;gap:10px;padding:11px 16px;background:var(--s2);border:1px solid var(--border);border-left:3px solid var(--border);border-radius:12px;font-size:12px;font-weight:600;color:var(--t1);transition:all .4s;}
.ds-mini.ds-fast  {border-left-color:var(--ds-fast-c);background:var(--ds-fast-bg);border-color:var(--ds-fast-border);box-shadow:0 0 16px var(--ds-fast-glow);}
.ds-mini.ds-normal{border-left-color:var(--ds-normal-c);background:var(--ds-normal-bg);border-color:var(--ds-normal-border);box-shadow:0 0 16px var(--ds-normal-glow);}
.ds-mini.ds-slow  {border-left-color:var(--ds-slow-c);background:var(--ds-slow-bg);border-color:var(--ds-slow-border);box-shadow:0 0 16px var(--ds-slow-glow);}

.ds-mini-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;background:var(--t3);transition:background .4s,box-shadow .4s;}
.ds-mini.ds-fast   .ds-mini-dot{background:var(--ds-fast-c);box-shadow:0 0 8px var(--ds-fast-c),0 0 18px var(--ds-fast-glow);animation:dsMiniPulse 1.5s ease-in-out infinite;}
.ds-mini.ds-normal .ds-mini-dot{background:var(--ds-normal-c);box-shadow:0 0 8px var(--ds-normal-c),0 0 18px var(--ds-normal-glow);animation:dsMiniPulse 2s ease-in-out infinite;}
.ds-mini.ds-slow   .ds-mini-dot{background:var(--ds-slow-c);box-shadow:0 0 8px var(--ds-slow-c),0 0 18px var(--ds-slow-glow);animation:dsMiniPulse 2.5s ease-in-out infinite;}
@keyframes dsMiniPulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.55;transform:scale(.82);}}

.ds-mini-label{flex:1;transition:color .4s;}
.ds-mini.ds-fast  .ds-mini-label{color:var(--ds-fast-c);}
.ds-mini.ds-normal .ds-mini-label{color:var(--ds-normal-c);}
.ds-mini.ds-slow  .ds-mini-label{color:var(--ds-slow-c);}
.ds-mini-avg{margin-left:auto;font-size:11px;color:var(--t2);font-weight:500;white-space:nowrap;}

/* ── Nav delivery chip ── */
.ds-nav-chip{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:100px;font-size:10px;font-weight:800;border:1px solid var(--border);background:var(--s2);cursor:default;transition:all .4s;white-space:nowrap;}
.ds-nav-chip.fast  {border-color:var(--ds-fast-border);background:var(--ds-fast-bg);color:var(--ds-fast-c);box-shadow:0 0 10px var(--ds-fast-glow);}
.ds-nav-chip.normal{border-color:var(--ds-normal-border);background:var(--ds-normal-bg);color:var(--ds-normal-c);box-shadow:0 0 10px var(--ds-normal-glow);}
.ds-nav-chip.slow  {border-color:var(--ds-slow-border);background:var(--ds-slow-bg);color:var(--ds-slow-c);box-shadow:0 0 10px var(--ds-slow-glow);}
.ds-nav-dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex-shrink:0;animation:dsMiniPulse 2s ease-in-out infinite;}
@media(max-width:680px){.ds-nav-chip{display:none;}}

/* ── Logged-in activity + quick-action columns ── */
.lp-li-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;width:100%;}
.lp-li-grid > div{min-width:0;overflow:hidden;}
.lp-li-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;font-size:13px;font-weight:700;}

/* ── Feature rows ── */
.lp-feat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
.lp-feat{display:flex;align-items:flex-start;gap:16px;background:var(--s2);border:1px solid var(--border);border-radius:14px;padding:20px;transition:all .2s;}
.lp-feat:hover{border-color:var(--border2);background:var(--s3);}
.lp-feat-ico{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;}
.lp-feat-h{font-size:14px;font-weight:800;margin-bottom:5px;}
.lp-feat-p{font-size:12px;color:var(--t2);line-height:1.65;}

/* ── How it works steps ── */
.lp-steps{display:flex;align-items:flex-start;justify-content:center;gap:0;}
.lp-step{flex:1;text-align:center;padding:32px 24px;background:var(--s2);border:1px solid var(--border);border-radius:16px;}
.lp-step-ico{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:22px;margin:0 auto 14px;}
.lp-step-n{font-family:var(--fd);font-size:10px;font-weight:900;color:var(--lime);letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px;}
.lp-step-h{font-size:15px;font-weight:800;margin-bottom:8px;}
.lp-step-p{font-size:12px;color:var(--t2);line-height:1.65;}
.lp-step-arrow{display:flex;align-items:center;padding:32px 0 0;font-size:20px;color:var(--t3);flex-shrink:0;width:40px;justify-content:center;}

/* ── CTA banner ── */
.lp-cta{border-radius:20px;background:linear-gradient(135deg,var(--s2),var(--s3));border:1px solid rgba(184,255,87,.14);overflow:hidden;position:relative;}
.lp-cta::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 50% at 50% -10%,rgba(184,255,87,.08),transparent 65%);pointer-events:none;}
.lp-cta-inner{position:relative;z-index:1;text-align:center;padding:60px 40px;}
.lp-cta-h{font-family:var(--fd);font-size:clamp(22px,4vw,38px);font-weight:900;margin-bottom:14px;line-height:1.1;}
.lp-cta-p{font-size:15px;color:var(--t2);line-height:1.7;max-width:480px;margin:0 auto 28px;}
.lp-cta-btns{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin-bottom:24px;}
.lp-trust{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:20px;}
.lp-trust-item{font-size:12px;color:var(--t2);font-weight:600;}

/* ── Order lookup side-by-side ── */
.lp-lookup{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center;}
.lp-lookup-copy{}
.lp-lookup-form{background:var(--s2);border:1px solid var(--border);border-radius:16px;padding:28px;}

/* ── Footer grid ── */
.lp-footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px;padding:52px 0 40px;}
.lp-footer-col-h{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--t3);margin-bottom:14px;}
.lp-footer-links{display:flex;flex-direction:column;gap:10px;}
.lp-footer-bottom{display:flex;align-items:center;justify-content:space-between;padding:20px 0;border-top:1px solid var(--border);font-size:12px;color:var(--t3);gap:12px;}

/* ── Light mode overrides ── */
body.light-mode .lp-alt-bg{background:#f0f2f5;}
body.light-mode .lp-chip{background:var(--s2);border-color:var(--border);}
body.light-mode .lp-svc-card{background:var(--s2);border-color:var(--border);}
body.light-mode .lp-svc-card:hover{background:var(--s3);border-color:rgba(46,125,0,.2);box-shadow:0 14px 36px rgba(0,0,0,.1);}
body.light-mode .lp-stats{background:var(--s2);border-color:var(--border);}
body.light-mode .lp-feat{background:var(--s2);border-color:var(--border);}
body.light-mode .lp-feat:hover{background:var(--s3);}
body.light-mode .lp-step{background:var(--s2);border-color:var(--border);}
body.light-mode .lp-cta{background:linear-gradient(135deg,var(--s2),var(--s3));border-color:rgba(46,125,0,.15);}
body.light-mode .lp-cta::before{background:radial-gradient(ellipse 80% 50% at 50% -10%,rgba(46,125,0,.06),transparent 65%);}
body.light-mode .lp-lookup-form{background:var(--s2);border-color:var(--border);}

/* ── Responsive ── */
@media(max-width:900px){
  .lp-feat-grid{grid-template-columns:1fr;}
  .lp-footer-grid{grid-template-columns:1fr 1fr;gap:28px;}
  .lp-lookup{grid-template-columns:1fr;gap:28px;}
  .lp-li-grid{grid-template-columns:1fr;}
  .lp-stat{padding:0 20px;}
}
@media(max-width:680px){
  .lp-hero{padding:72px 20px 56px;}
  .lp-hero-visual{max-width:100%;}
  .lp-section{padding-top:56px;padding-bottom:56px;}
  .lp-sec-hd{margin-bottom:36px;}
  .lp-svc-grid{grid-template-columns:repeat(2,1fr);gap:10px;}
  .lp-steps{flex-direction:column;align-items:stretch;}
  .lp-step{border-radius:12px;padding:22px 18px;}
  .lp-step-arrow{width:auto;padding:2px 0;height:20px;align-items:center;justify-content:center;font-size:14px;opacity:.4;}
  /* Rotate arrow to point down in vertical layout */
  .lp-step-arrow::after{content:'↓';display:block;}
  .lp-step-arrow{font-size:0;} /* hide the → text */
  .lp-stats{padding:18px 16px;gap:12px;}
  .lp-stat{padding:0 8px;}
  .lp-stat-div{display:none;}
  .lp-cta-inner{padding:40px 24px;}
  .lp-footer-grid{grid-template-columns:1fr;gap:24px;padding:40px 0 28px;}
  .lp-footer-bottom{flex-direction:column;text-align:center;gap:8px;}
  .lp-stat-n{font-size:22px;}
  /* Logged-in section: single column, full width */
  .lp-li-grid{grid-template-columns:1fr;gap:20px;max-width:100%;overflow:hidden;}
  /* Quick actions: 3 per row centered */
  .qa-grid{grid-template-columns:repeat(3,1fr);gap:8px;}
  /* Activity items: prevent overflow */
  .activity-item{min-width:0;}
}
@media(max-width:480px){
  /* Stats strip: force 2×2 grid so no lone stat on its own row */
  .lp-stats{padding:12px 8px;gap:0!important;display:grid;grid-template-columns:1fr 1fr;}
  .lp-stat{padding:14px 8px;}
  .lp-stat-div{display:none;}
}

/* ══════════════════════════════════════════
   DASHBOARD MOBILE — comprehensive fixes
   Covers agent & admin dashboards on phones
══════════════════════════════════════════ */

/* ── Wallet glass: reduce padding on phones ── */
@media(max-width:600px){
  .wg{padding:16px 14px;}
  /* Wallet balance amount: too large on small screens */
  .wa{font-size:28px;}
  .wa span{font-size:16px;}
  /* Wallet action buttons: wrap so they don't overflow */
  .wax{flex-wrap:wrap;gap:8px;}
  .wax .btn{flex:1;min-width:calc(50% - 4px);font-size:11px;padding:9px 8px;justify-content:center;text-align:center;}

  /* Calculator result value */
  .crv{font-size:22px;}

  /* Referral code display: shrink font + letter-spacing so it fits */
  #agRefCode{font-size:18px!important;letter-spacing:2px!important;padding:12px!important;}

  /* Referral link box: allow wrapping */
  .rb{flex-wrap:wrap;gap:8px;}
  .rb .cpbtn{width:100%;}

  /* Commission summary chips: don't get too narrow */
  .comm-sum-chip{flex-shrink:0;min-width:90px;}

  /* Store banner wrapping */
  #storeContent .stat-strip{gap:8px;padding:10px 12px;}
}

/* ── Table column hiding — admin dashboard ── */
@media(max-width:600px){
  /* Agents table (9 cols): hide ID(2), Tier(3), Revenue(5), KYC(7) */
  #dt-agents table th:nth-child(2),#dt-agents table td:nth-child(2),
  #dt-agents table th:nth-child(3),#dt-agents table td:nth-child(3),
  #dt-agents table th:nth-child(5),#dt-agents table td:nth-child(5),
  #dt-agents table th:nth-child(7),#dt-agents table td:nth-child(7){display:none;}
  /* Agents action buttons: compress and hide Demote on mobile */
  #dt-agents td:nth-child(9){white-space:nowrap;}
  #dt-agents td:nth-child(9) .btn:nth-child(3){display:none;}

  /* Customers table (7 cols): hide Last Order(5), Joined(6) */
  #dt-cust table th:nth-child(5),#dt-cust table td:nth-child(5),
  #dt-cust table th:nth-child(6),#dt-cust table td:nth-child(6){display:none;}

  /* Withdrawals table (6 cols): hide Network(4), Requested(5) */
  #dt-wd table th:nth-child(4),#dt-wd table td:nth-child(4),
  #dt-wd table th:nth-child(5),#dt-wd table td:nth-child(5){display:none;}

  /* Promotions table (7 cols): hide Service(3), Expires(5) */
  #dt-promo table th:nth-child(3),#dt-promo table td:nth-child(3),
  #dt-promo table th:nth-child(5),#dt-promo table td:nth-child(5){display:none;}

  /* Subscriptions table (8 cols): hide ID(1), Method(5), Expires(7) */
  #dt-subs table th:nth-child(1),#dt-subs table td:nth-child(1),
  #dt-subs table th:nth-child(5),#dt-subs table td:nth-child(5),
  #dt-subs table th:nth-child(7),#dt-subs table td:nth-child(7){display:none;}

  /* Activity Logs table (5 cols): hide Details(4), IP(5) */
  #dt-logs table th:nth-child(4),#dt-logs table td:nth-child(4),
  #dt-logs table th:nth-child(5),#dt-logs table td:nth-child(5){display:none;}

  /* Pending deliveries overview (4 cols: Ref/Service/Customer/Action):
     hide Ref, truncate Customer so rows don't get excessively tall */
  #adPM table th:nth-child(1),#adPM table td:nth-child(1){display:none;}
  #adPM table td:nth-child(3){max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
}

/* ── Table column hiding — agent dashboard ── */
@media(max-width:600px){
  /* Sales History at-hist (7 cols): hide Reference(2), Customer(4) */
  #at-hist table th:nth-child(2),#at-hist table td:nth-child(2),
  #at-hist table th:nth-child(4),#at-hist table td:nth-child(4){display:none;}

  /* My Team at-sub (6 cols): hide Tier(3), Joined(6) */
  #at-sub table th:nth-child(3),#at-sub table td:nth-child(3),
  #at-sub table th:nth-child(6),#at-sub table td:nth-child(6){display:none;}

  /* Customer list at-cust (5 cols): hide Joined(4) */
  #at-cust table th:nth-child(4),#at-cust table td:nth-child(4){display:none;}
}

/* ── 900px tablet fixes for dashboards ── */
@media(max-width:900px){
  /* Wallet action buttons: wrap on tablet too */
  .wax{flex-wrap:wrap;}
  /* Agent/admin stat strips: tighter gap */
  .stat-strip{gap:14px;padding:12px 16px;}
}

/* ── Small overview tables: allow text wrap so Revenue/Action stays visible ── */
@media(max-width:600px){
  /* Top Agents & Pending Deliveries are compact summary tables — let names wrap
     so the Revenue/Action column is never pushed off-screen */
  #adTopAg table,#adPM table{
    white-space:normal;
    min-width:0;
    overflow-x:visible;
  }
  #adTopAg td,#adTopAg th,
  #adPM td,#adPM th{
    white-space:normal;
    word-break:break-word;
  }
  /* Revenue/Action columns: keep on one line, right-align */
  #adTopAg td:last-child,#adTopAg th:last-child,
  #adPM td:last-child,#adPM th:last-child{
    white-space:nowrap;
    text-align:right;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE BOTTOM NAVIGATION BAR  (≤768px)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hidden on desktop/tablet */
.mob-bnav{display:none;}

@media(max-width:768px){
  /* Prevent iOS rubber-band bounce from exposing bare background beneath fixed bottom nav.
     Placed here (mobile only) so desktop scroll is never affected. */
  body{overscroll-behavior-y:contain;}

  /* ── The bar ── */
  .mob-bnav{
    display:flex;
    position:fixed;
    bottom:0;left:0;right:0;
    z-index:500;
    background:rgb(4,8,18);
    /* backdrop-filter kept for glass look on iOS 26 Liquid Glass */
    backdrop-filter:blur(28px);
    -webkit-backdrop-filter:blur(28px);
    border-top:1px solid rgba(255,255,255,.07);
    /* Tabs area + home-bar / iOS 26 bottom pill clearance */
    padding-bottom:env(safe-area-inset-bottom,0px);
    box-shadow:0 -2px 24px rgba(0,0,0,.55);
    /* overflow:hidden removed — was clipping the background extension needed for iOS 26 */
  }
  /* iOS 26 Safari: fill the physical gap between the bar and the screen bottom.
     The floating pill toolbar can expose background otherwise when scrolling. */
  .mob-bnav::after{
    content:'';
    position:absolute;
    bottom:calc(-1 * env(safe-area-inset-bottom,34px));
    left:-1px;right:-1px;
    height:calc(env(safe-area-inset-bottom,34px) + 2px);
    background:inherit;
    pointer-events:none;
    z-index:-1;
  }

  /* ── Individual tab ── */
  .mbn-tab{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    padding:7px 4px 5px;
    min-height:52px;
    background:none;
    border:none;
    cursor:pointer;
    color:var(--t3);
    font-family:var(--ff);
    position:relative;
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
    transition:color .18s;
    /* Active indicator line — hidden by default */
  }
  .mbn-tab::before{
    content:'';
    position:absolute;
    top:0;left:50%;
    transform:translateX(-50%) scaleX(0);
    width:28px;height:3px;
    background:var(--lime);
    border-radius:0 0 4px 4px;
    transition:transform .2s cubic-bezier(.34,1.56,.64,1);
  }

  /* ── Icon wrapper — gets pill background when active ── */
  .mbn-iw{
    width:40px;height:26px;
    display:flex;align-items:center;justify-content:center;
    border-radius:14px;
    transition:background .18s, transform .15s cubic-bezier(.34,1.56,.64,1);
  }

  /* ── SVG icon ── */
  .mbn-svg{
    width:19px;height:19px;
    transition:stroke .18s;
    stroke:currentColor;
    display:block;
  }

  /* ── Label ── */
  .mbn-lbl{
    font-size:8px;font-weight:700;
    letter-spacing:.04em;text-transform:uppercase;
    font-family:var(--ff);
    transition:color .18s;
  }

  /* ── ACTIVE state ── */
  .mbn-tab.on{color:var(--lime);}
  .mbn-tab.on::before{transform:translateX(-50%) scaleX(1);}
  .mbn-tab.on .mbn-iw{
    background:rgba(184,255,87,.11);
    transform:translateY(-2px);
  }

  /* ── Notification badge on More tab ── */
  .mbn-dot{
    position:absolute;
    top:-4px;right:-6px;
    min-width:14px;height:14px;
    background:var(--red);
    border-radius:7px;
    font-size:8px;font-weight:900;
    color:#fff;
    display:flex;align-items:center;justify-content:center;
    padding:0 3px;
    font-family:var(--fm);
    border:1.5px solid rgba(4,8,18,.98);
    pointer-events:none;
  }
  .mbn-dot.hid{display:none;}

  /* ══ Top nav cleanup on mobile ══ */

  /* Keep hamburger visible next to notification bell — opens the right nav drawer */
  #mobHam{display:flex!important;}

  /* Guest: hide auth buttons — sign-in/register lives in the drawer */
  #navGuest .nb-c,
  #navGuest .nb-reg,
  #navGuest .nb-s,
  #navGuest .nb-chat{display:none!important;}

  /* Logged-in: hide user pill and logout — accessible via More drawer */
  #navUser .upill,
  #navUser .nb-g{display:none!important;}

  /* Theme toggle — moved to drawer footer */
  .theme-toggle{display:none!important;}

  /* ── Content bottom padding — no content hidden behind the bar ── */
  .page,.main{
    padding-bottom:calc(80px + env(safe-area-inset-bottom,0px))!important;
  }

  /* ── Shop FAB: hidden (bottom nav has Shop tab) ── */
  #fab{display:none!important;}
  /* ── Support speed-dial: float above bottom nav, draggable ── */
  .fab-dial{
    bottom:calc(62px + env(safe-area-inset-bottom,0px))!important;
    right:14px!important;
    z-index:510;
    touch-action:none;
    cursor:grab;
  }
  .fab-dial-trigger{touch-action:manipulation;}

  /* ── DataMart tracker widget: hidden on mobile (overlaps FAB + bottom nav) ── */
  #dm-tracker-toggle,.dm-toggle{display:none!important;}

  /* ── Dashboard "☰ Menu" button: replaced by bottom nav Menu tab ── */
  .mob-sb-btn{display:none!important;}

  /* ── Dashboard sidebar: add bottom padding so last items aren't
     hidden behind the bottom nav ── */
  .sb{padding-bottom:calc(80px + env(safe-area-inset-bottom,0px))!important;}
}

/* ══════════ DELAY FAQ PAGE ══════════ */
.dfaq-section{margin-bottom:32px;}
.dfaq-tag{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:100px;background:var(--s2);border:1px solid var(--border2);font-size:10px;font-weight:800;color:var(--t2);letter-spacing:.07em;text-transform:uppercase;margin-bottom:14px;}
.dfaq-p{font-size:13px;color:var(--t2);line-height:1.75;margin-bottom:12px;}
/* Numbered process steps */
.dfaq-steps{display:flex;flex-direction:column;gap:8px;}
.dfaq-step{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border-radius:11px;border:1px solid var(--border);}
.dfaq-ok{background:rgba(184,255,87,.04);border-color:rgba(184,255,87,.12);}
.dfaq-warn{background:rgba(255,184,48,.04);border-color:rgba(255,184,48,.12);}
.dfaq-sn{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;flex-shrink:0;background:var(--s2);}
.dfaq-ok .dfaq-sn{background:rgba(184,255,87,.12);color:var(--lime);}
.dfaq-warn .dfaq-sn{background:rgba(255,184,48,.12);color:var(--gold);}
.dfaq-st{font-size:12px;font-weight:700;color:var(--t1);margin-bottom:2px;}
.dfaq-sm{font-size:11px;color:var(--t3);}
/* Icon list items */
.dfaq-list{display:flex;flex-direction:column;gap:10px;}
.dfaq-item{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;background:var(--s1);border:1px solid var(--border);border-radius:11px;}
.dfaq-ibullet{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;}
.dfaq-it{font-size:12px;font-weight:700;color:var(--t1);margin-bottom:3px;}
.dfaq-id{font-size:11px;color:var(--t3);line-height:1.6;}
/* Ordered action steps */
.dfaq-ordered{display:flex;flex-direction:column;gap:12px;}
.dfaq-oitem{display:flex;align-items:flex-start;gap:14px;}
.dfaq-on{width:28px;height:28px;border-radius:50%;background:rgba(0,217,184,.12);color:var(--teal);font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;}
.dfaq-ot{font-size:13px;font-weight:700;color:var(--t1);margin-bottom:3px;}
.dfaq-od{font-size:12px;color:var(--t3);line-height:1.6;}

/* ══════════ DELIVERY STATUS CARD (buy flow step 3 — data bundles) ══════════ */
.dc-wrap{
  background:var(--dc-bg,rgba(0,217,184,.07));
  border:1px solid var(--dc-bdr,rgba(0,217,184,.22));
  border-radius:var(--r2);
  padding:12px 14px;
  font-size:12px;
  line-height:1.5;
}
.dc-head{display:flex;align-items:flex-start;gap:10px;}
.dc-dot{
  width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:4px;
  box-shadow:0 0 8px currentColor;
  animation:blink 2s ease-in-out infinite;
}
.dc-ico{font-size:18px;flex-shrink:0;line-height:1.2;}
.dc-headline{font-weight:700;color:var(--dc-col,var(--teal));margin-bottom:3px;}
.dc-sub{margin-bottom:2px;}
.dc-link{color:var(--dc-col,var(--teal));text-decoration:underline;text-underline-offset:2px;font-size:11px;font-weight:600;}
.dc-link:hover{opacity:.8;}
.dc-terms{font-size:10px;color:var(--t3);margin-top:2px;}
.dc-stats{
  margin-top:9px;padding-top:9px;
  border-top:1px solid var(--dc-bdr,rgba(0,217,184,.15));
  color:var(--t2);font-size:11px;
}
.dc-track{
  margin-top:6px;font-size:11px;color:var(--t2);
  padding:6px 9px;background:rgba(255,255,255,.03);border-radius:7px;
}
.dc-check{
  margin-top:6px;font-size:11px;color:var(--dc-col,var(--teal));font-weight:600;
  display:flex;align-items:center;gap:6px;
}
.dc-ref{font-family:var(--fm);font-size:10px;background:rgba(255,255,255,.06);padding:1px 6px;border-radius:4px;}
@keyframes dc-spin{to{transform:rotate(360deg);}}
.dc-spin{display:inline-block;animation:dc-spin 1.4s linear infinite;font-style:normal;}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE-FIRST SUPPLEMENTAL IMPROVEMENTS
   Additional targeted fixes for 320px–430px viewports, touch targets,
   sticky modal headers, and layout polish across all mobile breakpoints.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Nav: prevent logo text overflow on 320px viewports ── */
@media(max-width:360px){
  .nav{padding:0 8px;}
  .nl-mark{width:30px;height:30px;border-radius:8px;font-size:14px;flex-shrink:0;}
  .nl-t{font-size:11px;}
  .nav-r{gap:4px;}
}

/* ── 2. Landing wrapper: reduce padding on tiny phones ── */
@media(max-width:400px){
  .lp-wrap{padding-left:16px;padding-right:16px;}
  .lp-section{padding-top:44px;padding-bottom:44px;}
  .lp-sec-hd{margin-bottom:24px;}
  .lp-sec-h2{font-size:20px;}
}

/* ── 3. Hero: reduce vertical space on very small screens ── */
@media(max-width:400px){
  .lp-hero{padding:70px 16px 48px;}
  .lp-sub{font-size:14px;margin-bottom:20px;}
}

/* ── 4. Landing service cards: compact on small phones ── */
@media(max-width:480px){
  .lp-svc-card{padding:16px 12px 14px;}
  .lp-svc-ico{width:44px;height:44px;font-size:22px;margin-bottom:10px;}
  .lp-svc-nm{font-size:12px;}
  .lp-svc-sub{font-size:10px;}
}

/* ── 5. Landing bottom CTA: stack buttons vertically on mobile ── */
@media(max-width:600px){
  .lp-cta-btns{flex-direction:column;align-items:stretch;}
  .lp-cta-btns .btn{width:100%;justify-content:center;}
  .lp-cta-inner{padding:36px 20px;}
}

/* ── 6. Stats strip: compact at tiny sizes ── */
@media(max-width:400px){
  .lp-stats{padding:10px 6px;grid-template-columns:1fr 1fr;}
  .lp-stat{padding:10px 6px;}
  .lp-stat-n{font-size:20px;}
}

/* ── 7. Buy page: force 2-column category grid on 320px screens (auto-fill handles 360px+) ── */
@media(max-width:340px){
  #bCatGrid{grid-template-columns:repeat(2,1fr)!important;gap:8px;}
  #bServiceGrid,#bPlanGrid{grid-template-columns:repeat(2,1fr)!important;gap:8px;}
}

/* ── 8. Quantity buttons: guaranteed 44×44 touch target ── */
#bQtyRow button{min-width:44px;min-height:44px;}

/* ── 9. Modal: sticky header so close button stays visible when scrolling ── */
@media(max-width:600px){
  .mhd{position:sticky;top:0;background:var(--s1);z-index:10;margin-bottom:16px;padding-bottom:14px;}
  body.light-mode .mhd{background:var(--s1);}
}

/* ── 10. Bottom nav: expanded touch area + slightly larger labels ── */
@media(max-width:768px){
  .mbn-tab{min-height:56px;}
  .mbn-lbl{font-size:9px;letter-spacing:.03em;}
}

/* ── 11. Notification panel: constrained height on small phones ── */
@media(max-width:480px){
  .np{max-height:calc(80vh - 62px);overflow-y:auto;}
}

/* ── 12. Hero trust chips: left-align on narrowest phones ── */
@media(max-width:360px){
  .lp-chips{justify-content:flex-start;gap:6px;}
  .lp-chip{font-size:10px;padding:4px 10px;}
  .hero-chips{justify-content:flex-start;gap:6px;}
  .hero-chip{font-size:10px;padding:6px 10px;}
}

/* ── 13. Referral link: stack copy button on tiny screens ── */
@media(max-width:380px){
  .rb{flex-direction:column;gap:8px;}
  .rb .cpbtn{width:100%;text-align:center;padding:8px 12px;}
}

/* ── 14. Feature rows: vertical on narrowest phones ── */
@media(max-width:360px){
  .lp-feat{padding:14px;}
  .lp-feat-h{font-size:13px;}
}

/* ── 15. Footer: reduced padding on smallest phones ── */
@media(max-width:400px){
  .site-footer{padding:28px 16px 16px;}
  .lp-footer-grid{padding:28px 0 18px;gap:18px;}
  .footer-link{font-size:12px;}
}

/* ── 16. Customer dashboard hero: compact on mobile ── */
@media(max-width:600px){
  .cust-hero{padding:16px;gap:12px;}
}

/* ── 17. Wallet action buttons: wrap tightly on narrowest phones ── */
@media(max-width:360px){
  .wax{flex-wrap:wrap;}
  .wax .btn{flex:1 1 calc(50% - 4px);}
}

/* ── 18. Buy step indicators: prevent overflow/text-clipping at 320px ── */
@media(max-width:360px){
  .steps{overflow:hidden;}
  .sn{width:22px;height:22px;font-size:9px;}
  .step::after{top:11px;}
}

/* ── 19. FAQ: comfortable padding on small phones ── */
@media(max-width:400px){
  .faq-q{padding:14px 16px;font-size:13px;}
  .faq-a-inner{padding:0 16px 14px;font-size:12px;}
}

/* ── 20. Help row links: compact tap targets on tiny screens ── */
@media(max-width:400px){
  .help-row-link{padding:9px 12px;font-size:12px;}
}

/* ── 21. Order track overlay: ensure success screen scrolls on mobile ── */
@media(max-width:480px){
  #bS5 > div{padding:28px 10px!important;}
}

/* ── 22. Promo modal content: ensure boxes stay readable on narrowest phones ── */
@media(max-width:360px){
  #promoM .promo-m-hero{padding:20px 14px 16px;}
  #promoM .promo-m-title{font-size:17px;}
}

/* ── 23. Admin chat panel: readable on mobile ── */
@media(max-width:480px){
  .admin-chat-list{max-height:180px;}
}

/* ── 24. Locker access pre: wrap long codes ── */
.locker-access pre{word-break:break-all;white-space:pre-wrap;}

/* ── 25. Stat strip: ensure readable values on smallest phones ── */
@media(max-width:360px){
  .stat-strip{gap:10px;padding:10px 12px;}
  .stat-strip-val{font-size:15px;}
  .stat-strip-lbl{font-size:9px;}
}

/* ── 26. Buy page heading row: wrap gracefully on tiny screens ── */
@media(max-width:360px){
  #bS2 .row.gap-3,#bS3 .row.gap-3,#bS4 .row.gap-3{flex-wrap:wrap;gap:8px;}
}

/* ── 27. Category tabs: always scroll without wrapping on mobile ── */
@media(max-width:600px){
  .cat-tabs{flex-wrap:nowrap!important;}
}

/* ── 28. Flash deals grid: 1-column → 2-column at 360px+ ── */
@media(max-width:600px){
  #flashDealsGrid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))!important;}
}

/* ── 29. Quick action tiles: clear text on very small phones ── */
@media(max-width:360px){
  .qa-tile{padding:12px 6px;}
  .qa-lbl{font-size:9px;}
  .qa-ico{width:32px;height:32px;font-size:15px;}
}

/* ── 30. lp-lookup form: remove excess padding on tiny phones ── */
@media(max-width:400px){
  .lp-lookup-form{padding:18px 14px;}
}

/* ── 31. Payment bottom sheets: safe-area padding for iPhone home bar ── */
#bPayModal > div:last-child,
#bMoMoConfirm > div:last-child{
  padding-bottom:calc(32px + env(safe-area-inset-bottom,0px))!important;
}

/* ── 32. Buy page success screen: compact on very small phones ── */
@media(max-width:360px){
  #bS5 h2{font-size:20px!important;}
  #bS5 > div{padding:24px 8px!important;}
}

/* ── 33. Toasts: ensure they're above bottom nav on mobile ── */
@media(max-width:768px){
  .tz{bottom:calc(70px + env(safe-area-inset-bottom,0px));right:10px;left:10px;max-width:none;}
  .toast{border-radius:12px;}
}

/* ── 34. Speed-dial FAB: smaller on very narrow screens ── */
@media(max-width:360px){
  .fab-dial-trigger{width:46px;height:46px;font-size:18px;}
  .fab-dial-item{width:38px;height:38px;font-size:16px;}
}

/* ── 35. Step arrows on how-it-works: bigger tap area ── */
.lp-step-arrow{min-height:24px;}

/* ── 36. Table tscroll: overflow indicator ── */
@media(max-width:600px){
  .tscroll{border-radius:0 0 var(--r2) var(--r2);}
}

/* ── 37. Textarea inputs: prevent iOS zoom, consistent with .inp rule ── */
@media(max-width:600px){
  textarea.inp{font-size:16px;}
}

/* ── 38. Buy page agent referral banner: stack on mobile ── */
@media(max-width:480px){
  #buyAgentBanner{flex-wrap:wrap;}
}

/* ── 39. Customer hero: ensure greeting text doesn't overflow ── */
@media(max-width:480px){
  .cust-hero > div:first-child{min-width:0;word-break:break-word;}
}

/* ── 40. Ensure lp-wrap never causes horizontal scroll ── */
.lp-section,.lp-wrap{box-sizing:border-box;max-width:100%;}
/* Restore the 1140px centred cap for sections that carry both classes —
   this selector (2 classes) beats the group rule above (1 class each). */
.lp-section.lp-wrap{max-width:1140px;margin-left:auto;margin-right:auto;}

/* ── Light-mode supplemental overrides ── */
body.light-mode #bQtyRow{background:rgba(0,0,0,.03)!important;}
body.light-mode .lp-chip{color:var(--t2);}
body.light-mode .hero-chip{background:rgba(240,244,248,.9);color:var(--t1);}
body.light-mode .lp-cta-btns .btn-ghost{border-color:rgba(0,0,0,.18);color:var(--t1);}
body.light-mode .lp-cta-btns .btn-ghost:hover{border-color:var(--lime);color:var(--lime);}

/* ═══════════════════════════════════════════════════════════════════════════
   DESIGN SYSTEM v3 — Two-Brand-Color System + Professional Icon Support
   Brand primaries: --lime (primary CTA) and --teal (secondary accent).
   All other accent colors (purple/blue/orange/gold/pink) are reduced to
   neutral or remapped to the two-brand palette throughout the UI.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Design Tokens ─── */
:root{
  --brand:var(--lime);
  --brand-s:rgba(184,255,87,.08);
  --brand-m:rgba(184,255,87,.14);
  --brand-bd:rgba(184,255,87,.18);
  --brand-gw:rgba(184,255,87,.22);
  --accent:var(--teal);
  --accent-s:rgba(0,217,184,.08);
  --accent-m:rgba(0,217,184,.14);
  --accent-bd:rgba(0,217,184,.18);
  --err-s:rgba(255,69,69,.08);--err-bd:rgba(255,69,69,.16);
  --warn-s:rgba(255,184,48,.08);--warn-bd:rgba(255,184,48,.16);
  --ok-s:rgba(45,206,137,.08);--ok-bd:rgba(45,206,137,.16);
  --sh1:0 1px 3px rgba(0,0,0,.12);
  --sh2:0 2px 8px rgba(0,0,0,.18);
  --sh3:0 4px 16px rgba(0,0,0,.22);
  --sh4:0 8px 32px rgba(0,0,0,.28);
  --sh5:0 16px 48px rgba(0,0,0,.34);
}

/* ─── Tabler icon sizing across all component slots ─── */
.ti{line-height:1;display:inline-flex;align-items:center;justify-content:center;}
.mi .ti,.mi-ico{font-size:18px;}
.sii .ti{font-size:14px;}
.qi .ti{font-size:20px;}
.ci .ti{font-size:12px;}
.ftico .ti{font-size:22px;}
.lp-feat-ico .ti{font-size:20px;}
.lp-svc-ico .ti{font-size:28px;}
.lp-step-ico .ti{font-size:22px;}
.rdrawer-row-ico .ti{font-size:16px;}
.activity-ico .ti{font-size:16px;}
.qa-ico .ti{font-size:18px;}
.notif-ico .ti{font-size:16px;}
.nb .ti,.btn .ti{font-size:14px;line-height:1;}
.fab-dial-item .ti,.fab-dial-trigger .ti{font-size:20px;}
.help-row-hd-ico .ti{font-size:18px;}
.help-row-link .ti{font-size:15px;}
.footer-social .ti{font-size:18px;}
.lp-chip .ti{font-size:11px;}
.sb-out .ti{font-size:14px;}
.theme-toggle .ti{font-size:15px;}
.mob-sb-btn .ti{font-size:15px;}

/* ─── Metric cards — brand-only color system ─── */
.m{background:var(--s1);border:1px solid var(--border);box-shadow:var(--sh1);}
.m::after{display:none!important;}
.m:hover{transform:translateY(-1px)!important;box-shadow:var(--sh2)!important;}
.m.lime:hover{border-color:var(--brand-bd)!important;box-shadow:0 4px 14px rgba(184,255,87,.07)!important;}
.m.teal:hover{border-color:var(--accent-bd)!important;box-shadow:0 4px 14px rgba(0,217,184,.07)!important;}
.m.blue:hover,.m.purple:hover,.m.orange:hover,.m.gold:hover,.m.pink:hover{border-color:var(--border2)!important;box-shadow:var(--sh2)!important;}

/* ─── Metric icons — brand-only backgrounds ─── */
.mi{border:none!important;}
.mi.lime{background:var(--brand-s)!important;}
.mi.teal{background:var(--accent-s)!important;}
.mi.blue,.mi.purple,.mi.orange,.mi.gold,.mi.pink{background:rgba(255,255,255,.05)!important;}
.mi.red{background:var(--err-s)!important;}

/* ─── Card icons — simplified ─── */
.ci{background:rgba(255,255,255,.05)!important;border-radius:8px;}
.ci.lime{background:var(--brand-s)!important;}
.ci.teal{background:var(--accent-s)!important;}
.ci.orange,.ci.purple,.ci.gold,.ci.blue,.ci.pink{background:rgba(255,255,255,.05)!important;}
.ci.red{background:var(--err-s)!important;}

/* ─── Buttons — refined two-brand palette ─── */
.btn::after{display:none!important;}
.btn-lime{box-shadow:0 1px 4px rgba(184,255,87,.18);}
.btn-lime:hover{transform:translateY(-1px)!important;box-shadow:0 3px 14px rgba(184,255,87,.28)!important;}
.btn-teal{box-shadow:0 1px 4px rgba(0,217,184,.18);}
.btn-teal:hover{transform:translateY(-1px)!important;box-shadow:0 3px 14px rgba(0,217,184,.28)!important;}
/* Non-brand buttons → neutral */
.btn-blue{background:var(--s3)!important;color:var(--t1)!important;border:1px solid var(--border)!important;box-shadow:none!important;}
.btn-blue:hover{background:var(--s4)!important;transform:none!important;box-shadow:none!important;}
.btn-purple{background:var(--brand-s)!important;color:var(--brand)!important;border:1px solid var(--brand-bd)!important;box-shadow:none!important;}
.btn-purple:hover{background:var(--brand-m)!important;transform:none!important;box-shadow:none!important;}
.btn-orange,.btn-gold{background:var(--s3)!important;color:var(--t2)!important;border:1px solid var(--border)!important;box-shadow:none!important;}
.btn-orange:hover,.btn-gold:hover{background:var(--s4)!important;color:var(--t1)!important;transform:none!important;box-shadow:none!important;}
.btn-pink{background:var(--s3)!important;color:var(--t2)!important;border:1px solid var(--border)!important;box-shadow:none!important;}
.btn-pink:hover{background:var(--s4)!important;color:var(--t1)!important;transform:none!important;}
.btn-dark:hover{transform:none!important;}
.btn-ghost:hover{border-color:var(--brand-bd)!important;color:var(--brand)!important;}
.btn-success{background:var(--accent-s)!important;color:var(--accent)!important;border:1px solid var(--accent-bd)!important;}
.btn-success:hover{background:var(--accent-m)!important;transform:none!important;}
.btn-danger{background:var(--err-s)!important;color:var(--err)!important;border:1px solid var(--err-bd)!important;}
.btn-danger:hover{background:rgba(255,69,69,.14)!important;transform:none!important;}

/* ─── Badges — simplified ─── */
.ba{background:var(--brand-s)!important;color:var(--brand)!important;border-color:var(--brand-bd)!important;}
.ba::before{background:var(--brand)!important;}
.bteal{background:var(--accent-s)!important;color:var(--accent)!important;border-color:var(--accent-bd)!important;}
.bteal::before{background:var(--accent)!important;}
.bpink{background:var(--s2)!important;color:var(--t2)!important;border-color:var(--border)!important;}
.bpink::before{background:var(--t3)!important;animation:none!important;}
.bg2{background:var(--warn-s)!important;color:var(--gold)!important;border-color:var(--warn-bd)!important;}

/* ─── Navigation — polished ─── */
.nav{height:60px;background:rgba(3,6,14,.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 1px 0 var(--border);}
.nl-mark{width:36px;height:36px;border-radius:10px;box-shadow:0 0 14px rgba(184,255,87,.2);}
.nl-t{font-size:12px;letter-spacing:-.01em;}
.nl.on{color:var(--brand)!important;background:var(--brand-s);}
.nb-s{background:var(--brand);color:#0a1220;font-weight:800;box-shadow:0 2px 8px rgba(184,255,87,.22);}
.nb-s:hover{background:var(--lime2);transform:translateY(-1px);box-shadow:0 4px 14px rgba(184,255,87,.32);}
.nb-c{background:transparent;color:var(--t2);border:1px solid var(--border2);}
.nb-c:hover{color:var(--t1);background:rgba(255,255,255,.04);}
.nb-reg{background:var(--accent-s);color:var(--accent);border:1px solid var(--accent-bd);}
.nb-reg:hover{background:var(--accent-m);}
.nb-chat{background:var(--brand-s)!important;color:var(--brand)!important;border:1px solid var(--brand-bd)!important;}
.nb-chat:hover{background:var(--brand-m)!important;transform:translateY(-1px);}
.upill{background:rgba(255,255,255,.04);border:1px solid var(--border);}
.upill:hover{border-color:var(--brand-bd);}
.uav{background:linear-gradient(135deg,var(--brand),var(--accent));}
.notif-ico{background:rgba(255,255,255,.04);border:1px solid var(--border);width:32px;height:32px;}
.notif-ico:hover{border-color:var(--border2);}
.theme-toggle{background:rgba(255,255,255,.04);border:1px solid var(--border);}
.theme-toggle:hover{border-color:var(--border2);}

/* ─── Sidebar — dark panel, brand-only highlights ─── */
.sb{background:var(--bg)!important;border-right:1px solid var(--border);}
.sb-av{border-radius:12px!important;background:linear-gradient(135deg,var(--brand),var(--accent))!important;box-shadow:none!important;}
.sb-bal{background:var(--brand-s);border:1px solid var(--brand-bd);border-radius:9px;}
.sb-bv{color:var(--brand)!important;font-size:15px;font-weight:800;}
.sb-sl{font-size:9px;letter-spacing:.14em;font-weight:800;color:var(--t3);}
.si{font-size:12px;font-weight:600;letter-spacing:.01em;border-radius:9px;}
.si:hover{background:rgba(255,255,255,.04)!important;color:var(--t1)!important;}
.si.on{background:linear-gradient(90deg,var(--brand-s),transparent)!important;color:var(--brand)!important;}
.si.on::before{background:var(--brand)!important;}
.sii{background:rgba(255,255,255,.04)!important;border-radius:7px;}
.si.on .sii{background:var(--brand-s)!important;}
.sb-out{font-size:12px;font-weight:700;border-radius:9px;}
.mob-sb-btn{font-size:12px;font-weight:700;letter-spacing:.01em;gap:8px;}

/* ─── Cards — consistent shadow ─── */
.card{box-shadow:var(--sh1);}
.ch{padding:14px 18px;}
.ci{width:26px;height:26px;border-radius:7px;font-size:12px;}
.ct{font-size:13px;font-weight:700;}

/* ─── Inputs — refined ─── */
.inp{border:1.5px solid var(--border);background:var(--s2);}
.inp:focus{border-color:var(--brand)!important;box-shadow:0 0 0 3px rgba(184,255,87,.08)!important;}
.il{font-size:10px;font-weight:700;letter-spacing:.1em;}
.inp-pfx:focus-within{border-color:var(--brand)!important;}

/* ─── Tables ─── */
th{font-size:10px;font-weight:700;color:var(--t3);letter-spacing:.1em;background:var(--s2);}
td{font-size:13px;}
tr:hover td{background:rgba(184,255,87,.012)!important;}

/* ─── Search ─── */
.sr:focus-within{border-color:var(--brand)!important;box-shadow:0 0 0 3px rgba(184,255,87,.08)!important;}

/* ─── Tab bar ─── */
.tbr{background:var(--s2);border-radius:10px;}
.tbt.on{background:var(--s4);color:var(--t1);box-shadow:var(--sh1);}

/* ─── Service / Plan / Fol cards ─── */
.svc-card:hover{border-color:var(--brand-bd)!important;box-shadow:var(--sh2)!important;transform:translateY(-2px)!important;}
.svc-card.sel{border-color:var(--brand)!important;background:var(--brand-s)!important;}
.svc-ico-wrap{background:rgba(255,255,255,.04)!important;border:1px solid var(--border)!important;}
.svc-card:hover .svc-ico-wrap{background:var(--brand-s)!important;border-color:var(--brand-bd)!important;}
.svc-price{background:var(--brand-s)!important;border:1px solid var(--brand-bd)!important;color:var(--brand)!important;}
.pkg-tile:hover{border-color:var(--brand-bd)!important;box-shadow:var(--sh2)!important;transform:translateY(-2px)!important;}
.pkg-tile.sel{border-color:var(--brand)!important;background:var(--brand-s)!important;}
.plan-card:hover{border-color:var(--brand-bd)!important;transform:translateY(-2px)!important;}
.plan-card.sel{border-color:var(--brand)!important;background:var(--brand-s)!important;}
.fol-card:hover{border-color:var(--brand-bd)!important;transform:translateY(-2px)!important;}
.fol-card.sel{border-color:var(--brand)!important;background:var(--brand-s)!important;}
.lp-svc-card:hover{border-color:var(--brand-bd)!important;transform:translateY(-3px)!important;box-shadow:var(--sh3)!important;}
.svc-card:hover{box-shadow:var(--sh2)!important;}

/* ─── Category filters ─── */
.cat-tab.on{background:var(--brand-s)!important;border-color:var(--brand-bd)!important;color:var(--brand)!important;box-shadow:none!important;}
.npl.on{background:var(--brand-s)!important;border-color:var(--brand-bd)!important;color:var(--brand)!important;}

/* ─── Quick action grid ─── */
.qc{background:var(--s2);border:1px solid var(--border);border-radius:12px;transition:all .18s;}
.qc:hover{background:var(--s3);border-color:var(--brand-bd);transform:translateY(-2px);box-shadow:var(--sh2);}
.qi{display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:8px;}

/* ─── Alerts ─── */
.ai{background:var(--brand-s)!important;border-color:var(--brand-bd)!important;color:var(--lime2)!important;}
.as{background:var(--ok-s)!important;border-color:var(--ok-bd)!important;color:var(--accent)!important;}
.aw{background:var(--warn-s)!important;border-color:var(--warn-bd)!important;}
.ae{background:var(--err-s)!important;border-color:var(--err-bd)!important;}

/* ─── Modals ─── */
.modal{border-radius:20px;box-shadow:var(--sh5);border:1px solid var(--border2);}
.mhd{border-bottom:1px solid var(--border);padding-bottom:16px;margin-bottom:20px;}
.mttl{font-size:17px;font-weight:800;letter-spacing:-.02em;}

/* ─── Step progress ─── */
.step.on .sn{border-color:var(--brand)!important;color:var(--brand)!important;background:var(--brand-s)!important;box-shadow:0 0 0 3px rgba(184,255,87,.1)!important;}
.step.done .sn{border-color:var(--accent)!important;background:var(--accent)!important;color:#0a1220!important;}
.step.done::after{background:var(--accent)!important;}

/* ─── Wallet glass ─── */
.wg{background:linear-gradient(135deg,var(--brand-s),var(--accent-s))!important;border-color:var(--brand-bd)!important;}
.wa{font-size:34px;letter-spacing:-.03em;}
.wl{color:var(--t3);font-size:9px;letter-spacing:.14em;}

/* ─── Right drawer ─── */
.rdrawer{background:var(--bg);border-left:1px solid var(--border);}
.rdrawer-row{font-size:13px;font-weight:600;min-height:48px;}
.rdrawer-row:hover{background:rgba(255,255,255,.04)!important;}
.rdrawer-row-ico{background:rgba(255,255,255,.04)!important;border:1px solid var(--border)!important;border-radius:9px;}
.rdrawer-av{background:linear-gradient(135deg,var(--brand),var(--accent))!important;}

/* ─── Bottom nav (Design System v3 overrides) ─── */
@media(max-width:768px){
  /* Fully opaque so ::after background-filler is solid — no gap on iOS 26 Safari */
  .mob-bnav{background:rgb(3,6,14);border-top:1px solid var(--border);box-shadow:0 -4px 20px rgba(0,0,0,.4);}
  .mbn-tab.on{color:var(--brand);}
  .mbn-tab.on .mbn-iw{background:var(--brand-s);}
  .mbn-tab.on::before{background:var(--brand);}
}

/* ─── Speed-dial FAB ─── */
.fab-dial-trigger{background:var(--s3);border:1px solid var(--border2);box-shadow:var(--sh3);}
.fab-dial-trigger:hover{background:var(--s4);box-shadow:var(--sh4);}
.fab-dial.open .fab-dial-trigger{transform:scale(1.04) rotate(45deg);}
.fdi-ai,.fdi-sup,.fdi-wa{box-shadow:none;}
.fdi-ai{background:var(--s4);border:1px solid var(--border2);}
.fdi-sup{background:var(--s4);border:1px solid var(--border2);}
.fdi-wa{background:linear-gradient(135deg,#25d366,#128c7e);}

/* ─── Flash deals ─── */
.flash-card{border-radius:14px;}
.flash-card:hover{transform:translateY(-2px)!important;box-shadow:var(--sh2)!important;}

/* ─── Toasts ─── */
.toast{box-shadow:var(--sh3)!important;}

/* ─── Landing page ─── */
.lp-badge{background:var(--brand-s);border:1px solid var(--brand-bd);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;}
.lp-h1{letter-spacing:-.03em;}
.lp-hero-card{background:rgba(10,20,38,.7);border:1px solid rgba(255,255,255,.06);backdrop-filter:blur(12px);border-radius:14px;box-shadow:0 4px 20px rgba(0,0,0,.3);}
.lp-feat:hover{border-color:var(--brand-bd)!important;background:var(--s3)!important;}
.lp-feat-ico{border-radius:12px;}
.lp-step{border-radius:14px;}
.lp-cta{border-radius:20px;}
.lp-svc-ico{border-radius:12px;}

/* Stat cards — brand gradient for all variants */
.stat-card.sc-lime .sv,.stat-card.sc-teal .sv,
.stat-card.sc-purple .sv,.stat-card.sc-gold .sv,.stat-card.sc-orange .sv{
  background:linear-gradient(135deg,var(--brand),var(--accent));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

/* ─── Tier badges — keep semantic colors ─── */
.tier-platinum{background:var(--brand-s);color:var(--brand);border-color:var(--brand-bd);}

/* ─── Light mode overrides ─── */
body.light-mode .sb{background:var(--s1)!important;}
body.light-mode .rdrawer{background:var(--s1)!important;}
body.light-mode .mi.lime{background:rgba(46,125,0,.08)!important;}
body.light-mode .mi.teal{background:rgba(0,150,136,.08)!important;}
body.light-mode .mi.blue,.body.light-mode .mi.purple,.body.light-mode .mi.orange,.body.light-mode .mi.gold,.body.light-mode .mi.pink{background:rgba(0,0,0,.04)!important;}
body.light-mode .ci{background:rgba(0,0,0,.04)!important;}
body.light-mode .ci.lime{background:rgba(46,125,0,.08)!important;}
body.light-mode .ci.teal{background:rgba(0,150,136,.08)!important;}
body.light-mode .sii{background:rgba(0,0,0,.04)!important;}
body.light-mode .si.on .sii{background:rgba(46,125,0,.08)!important;}
body.light-mode .nav{background:rgba(248,250,252,.97)!important;}
body.light-mode .mob-bnav{background:rgba(248,250,252,.97)!important;border-top-color:rgba(0,0,0,.08)!important;}
body.light-mode .qc{background:var(--s2)!important;}
body.light-mode .qc:hover{background:var(--s3)!important;}
body.light-mode .tbr{background:var(--s3)!important;}
body.light-mode .tbt.on{background:var(--s1)!important;}
body.light-mode .rdrawer-row:hover{background:var(--s2)!important;}
body.light-mode .rdrawer-row-ico{background:var(--s3)!important;border-color:var(--border)!important;}
body.light-mode .btn-blue,.body.light-mode .btn-orange,.body.light-mode .btn-gold{background:var(--s3)!important;color:var(--t2)!important;}
body.light-mode .btn-purple{background:rgba(46,125,0,.08)!important;color:var(--lime)!important;border-color:rgba(46,125,0,.2)!important;}
body.light-mode .lp-feat:hover{background:var(--s3)!important;}
body.light-mode .npl.on{background:rgba(46,125,0,.08)!important;border-color:rgba(46,125,0,.25)!important;color:var(--lime)!important;}
body.light-mode .cat-tab.on{background:rgba(46,125,0,.08)!important;border-color:rgba(46,125,0,.25)!important;color:var(--lime)!important;}
body.light-mode .svc-card:hover{box-shadow:0 4px 14px rgba(0,0,0,.1)!important;}
body.light-mode .pkg-tile:hover{box-shadow:0 4px 14px rgba(0,0,0,.1)!important;}
body.light-mode .wg{background:linear-gradient(135deg,rgba(46,125,0,.08),rgba(0,150,136,.06))!important;}
body.light-mode .ai{background:rgba(46,125,0,.06)!important;border-color:rgba(46,125,0,.15)!important;}
body.light-mode .as{background:rgba(0,150,136,.06)!important;border-color:rgba(0,150,136,.15)!important;}

/* ═══════════════════════════════════════════════════════════════════════════
   FINAL POLISH — Icon sizing, chat send, search icons, misc cleanup
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Chat send button: icon alignment ── */
.chat-send{display:flex;align-items:center;justify-content:center;}
.chat-send .ti{font-size:17px;}

/* ── Search bar icon: Tabler icon sizing ── */
.si2 .ti{font-size:16px;color:var(--t3);}

/* ── Getting-started step icons ── */
.gs-ico .ti{font-size:20px;color:var(--lime);}

/* ── Customer quick-action tiles: icon inside cust-qa-ico ── */
.cust-qa-ico .ti{font-size:26px;color:var(--lime);}

/* ── Streak milestone icons ── */
.streak-ms-ico .ti{font-size:20px;}

/* ── dfaq bullet icons ── */
.dfaq-ibullet .ti{font-size:16px;}

/* ── Help row link icons ── */
.help-row-link .ti{font-size:15px;flex-shrink:0;}

/* ── Alert box icons ── */
.alert .ti{font-size:14px;flex-shrink:0;}

/* ── Store avatar: remove emoji, show initial properly ── */
.store-avatar{font-size:22px;font-weight:900;}

/* ── Agent status icon in sidebar profile ── */
.ag-status-ico{width:40px;height:40px;border-radius:10px;background:var(--brand-s);display:flex;align-items:center;justify-content:center;}

/* ── Mob sb btn consistent style ── */
.mob-sb-btn{gap:8px;}
.mob-sb-btn .ti{font-size:16px;}

/* ── Tab bar buttons: clean without emoji ── */
.tbt{font-size:11px;font-weight:700;letter-spacing:.01em;}

/* ── Wallet glass: action button icons ── */
.wax .btn .ti{font-size:14px;}

/* ── Nav report button icon ── */
.nav .btn .ti,.ph .btn .ti{font-size:13px;}

/* ── Flash deals badge: icon alignment ── */
.flash-badge .ti,.flash-badge i{font-size:10px;line-height:1;}

/* ── Price alert bell icon ── */
.ci.teal .ti.ti-bell-ringing{font-size:13px;}

/* ── Store page: hero CTA icon ── */
.store-cta .ti{font-size:26px;display:block;margin:0 auto 10px;}

/* ── Delivery icon in MoMo confirm ── */
#bMC_delivIco.ti{font-size:20px;color:var(--lime);flex-shrink:0;}

/* ── dfaq-tag: flex with icon ── */
.dfaq-tag{display:inline-flex;align-items:center;gap:6px;}

/* ── Tutorial search icon ── */
.sr i.ti{font-size:14px;flex-shrink:0;}

/* ── Button icons: consistent gap ── */
.btn>.ti:first-child{margin-right:1px;}

/* ── Customer hero wallet card ── */
.cust-qa-ico .ti{font-size:28px;color:var(--lime);}
.cust-qa-sub{font-size:10px;color:var(--t3);font-weight:500;line-height:1.3;}
/* on very small screens the wallet card goes full-width */
@media(max-width:500px){
  .cust-hero>div:last-child{width:100%;}
  .cust-hero>div:last-child>div,
  .cust-hero>div:last-child>button{width:100%;}
}
/* ── Hero "Welcome back" icon ── */
.cust-hero .ti.ti-user-check{font-size:11px;}
/* ── Streak fire icon ── */
.streak-fire .ti{font-size:30px;color:#ff7a2f;display:inline-block;}
/* ── sec-act arrow/refresh icons ── */
.sec-act .ti{font-size:11px;vertical-align:middle;}

/* ── Remove outdated active ring from speed-dial trigger ── */
.fab-dial.open .fab-dial-trigger{box-shadow:var(--sh4);}

/* ── Chat avatar: icon fill ── */
.chat-av{display:flex;align-items:center;justify-content:center;}
.chat-av .ti{font-size:18px;}

/* ── Loyalty badge: no emoji needed ── */
.lp-badge{font-size:11px;}

/* ── Progress bar consistent: brand gradient ── */
.pf{background:linear-gradient(90deg,var(--teal),var(--lime));}

/* ── Active filter tabs: subtle text label ── */
.tbt.on{font-weight:800;}

/* ── Light mode: chat avatar background ── */
body.light-mode .chat-av{background:linear-gradient(135deg,rgba(46,125,0,.12),rgba(0,150,136,.12));}
body.light-mode .chat-av .ti{color:var(--lime);}

/* ── Notification bell count badge: error/red background ── */
.npip{background:var(--err);}

/* ── SMM search bar ── */
#smmSearchInput+.si2 .ti,
#agentSearch~.si2 .ti{font-size:16px;}

/* ── Fix: icon-only buttons keep minimum tap target ── */
button:has(>.ti:only-child){min-width:36px;}

/* ── Fix: ci icons consistent with Tabler font size ── */
.ci>.ti{font-size:12px;}

/* ── Footer social hover ── */
.footer-social:hover{opacity:.8;transform:translateY(-1px);transition:all .2s;}

/* ── store loading/error icons: remove emoji fallback styling ── */
#storeLoading i.ti{font-size:32px;display:block;margin:0 auto 12px;color:var(--lime);}
#storeError i.ti{font-size:40px;display:block;margin:0 auto 14px;color:var(--t3);}

/* ─── ORDER STATUS PILLS ─── */
.ord-pill{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:800;padding:3px 9px;border-radius:100px;white-space:nowrap;letter-spacing:.02em;}
.ord-pill .ti{font-size:10px;}
.ord-pill.delivered{background:rgba(184,255,87,.1);color:var(--lime);}
.ord-pill.processing{background:rgba(255,184,48,.1);color:var(--gold);}
.ord-pill.partial{background:rgba(0,217,184,.1);color:var(--teal);}
.ord-pill.unpaid{background:rgba(255,69,69,.1);color:var(--red);}
.ord-pill.expired{background:rgba(100,116,139,.1);color:var(--t3);}
.ord-pill.failed{background:rgba(255,69,69,.1);color:var(--red);}

/* ─── EMPTY STATE ─── */
.empty-state{display:flex;flex-direction:column;align-items:center;padding:36px 20px;text-align:center;gap:10px;}
.empty-state .es-ico{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.empty-state .es-ico.lime{background:rgba(184,255,87,.08);}
.empty-state .es-ico.teal{background:rgba(0,217,184,.08);}
.empty-state .es-ico .ti{font-size:24px;}
.empty-state .es-ico.lime .ti{color:var(--lime);}
.empty-state .es-ico.teal .ti{color:var(--teal);}
.empty-state .es-ttl{font-size:14px;font-weight:800;color:var(--t1);}
.empty-state .es-sub{font-size:12px;color:var(--t3);line-height:1.6;max-width:260px;}

/* ─── SKELETON SHIMMER ─── */
@keyframes shimmer{0%{background-position:-400px 0}100%{background-position:400px 0}}
.skel{border-radius:6px;background:linear-gradient(90deg,var(--s2) 25%,var(--s3) 50%,var(--s2) 75%);background-size:800px 100%;animation:shimmer 1.4s infinite linear;}
.skel-line{height:12px;margin-bottom:6px;}
.skel-line.sm{width:40%;height:10px;}
.skel-line.lg{width:75%;}
.skel-line.full{width:100%;}

/* ─── REFERRAL MINI CARD ─── */
.ref-mini{display:flex;align-items:center;gap:14px;padding:14px 16px;background:rgba(184,255,87,.04);border:1px solid rgba(184,255,87,.12);border-radius:12px;margin-bottom:20px;}
.ref-mini-ico{width:38px;height:38px;border-radius:10px;background:rgba(184,255,87,.1);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.ref-mini-ico .ti{font-size:18px;color:var(--lime);}
.ref-mini-body{flex:1;min-width:0;}
.ref-mini-body .rm-stat{font-size:18px;font-weight:900;color:var(--lime);font-family:var(--fd);}
.ref-mini-body .rm-sub{font-size:11px;color:var(--t3);margin-top:1px;}
.ref-mini-act{font-size:12px;font-weight:700;color:var(--lime);cursor:pointer;white-space:nowrap;display:flex;align-items:center;gap:4px;}
.ref-mini-act .ti{font-size:12px;}

/* ─── COPY REF BUTTON ─── */
.cp-ref{display:inline-flex;align-items:center;gap:3px;font-size:9px;font-weight:700;color:var(--t3);cursor:pointer;padding:2px 5px;border-radius:4px;background:transparent;border:none;transition:all .15s;}
.cp-ref:hover{background:rgba(184,255,87,.08);color:var(--lime);}
.cp-ref .ti{font-size:10px;}

/* ── Consistent border-radius on search bars ── */
.sr{border-radius:var(--r2);}

/* ── Agent banner avatar icon ── */
#buyAgentBannerAv .ti{font-size:13px;}

/* ── lp-feat-ico: ensure icon is centered ── */
.lp-feat-ico{display:flex;align-items:center;justify-content:center;}

/* ── Step arrows on lp-steps: consistent ── */
.lp-step-ico{display:flex;align-items:center;justify-content:center;}

/* ── Metric icon colors: match brand palette ── */
.mi.lime .ti{color:var(--lime);}
.mi.teal .ti{color:var(--teal);}

/* ── Customer wallet card: hover lift ── */
.cust-hero .btn-lime:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(184,255,87,.25);}
.cust-hero .btn-dark:hover{transform:translateY(-1px);}

/* ── Referral loading icon ── */
#custRefLoading .ti{animation:spin 1.2s linear infinite;}

/* ── Loader spin animation (if not already defined) ── */
@keyframes spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}

/* ── New ticket icon button ── */
.ph .btn-lime .ti{font-size:12px;}

/* ── Store loading/error: updated icon sizing ── */
#storeLoading .ti.ti-building-store{font-size:36px;display:block;margin:0 auto 12px;color:var(--teal);opacity:.7;}
#storeError .ti.ti-user-off{font-size:44px;display:block;margin:0 auto 14px;color:var(--t3);}