/* ═══════════════════════════════════════════════════════════════════
   GODX — Premium Design System 8.0
   Calm Blue fintech identity (Royal Blue + Teal + Indigo) · glassmorphism · fully responsive
   Class contract unchanged — drop-in replacement for style.css
   ═══════════════════════════════════════════════════════════════════ */
:root{
  /* brand palette — Calm Blue: royal blue primary + teal secondary + indigo accent */
  --navy:#0F172A; --navy-2:#1E3A8A;
  --p1:#2563EB; --p2:#3B82F6; --p3:#60A5FA;
  --gold:#14B8A6; --gold-2:#5EEAD4; --gold-ink:#115E59;
  --grad:linear-gradient(135deg,#0F172A 0%,#1E3A8A 34%,#1D4ED8 66%,#2563EB 88%,#0D9488 100%);
  --grad-btn:linear-gradient(135deg,#1D4ED8 0%,#2563EB 52%,#3B82F6 100%);
  --grad-gold:linear-gradient(135deg,#0F766E 0%,#14B8A6 45%,#5EEAD4 100%);
  --grad-soft:linear-gradient(135deg,#EFF6FF,#CCFBF1);
  --bg:#F8FAFC; --card:#FFFFFF; --ink:#0F172A; --sub:#64748B; --line:#E2E8F0;
  --green:#16A34A; --green-bg:#DCFCE7; --red:#DC2626; --red-bg:#FEE2E2;
  --amber:#F59E0B; --amber-bg:#FEF3C7; --blue:#2563EB; --blue-bg:#DBEAFE;
  --r-lg:24px; --r-md:16px; --r-sm:12px;
  --shadow:0 1px 2px rgba(15,23,42,.05),0 8px 24px rgba(15,23,42,.07);
  --shadow-lg:0 24px 56px rgba(37,99,235,.30);
  --nav-h:74px;
  --ease:cubic-bezier(.22,1,.36,1);
  --font-d:'Bricolage Grotesque','Plus Jakarta Sans',system-ui,sans-serif;
  --font-b:'Plus Jakarta Sans',system-ui,sans-serif;
  --font-chat:'Plus Jakarta Sans',system-ui,sans-serif;
  --font-num:'Inter','Plus Jakarta Sans',system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;touch-action:manipulation}
input,textarea{user-select:text}
html{font-size:16px}
body{font-family:var(--font-b);background:var(--bg);color:var(--ink);
  overscroll-behavior-y:none;max-width:520px;margin:0 auto;min-height:100vh;position:relative}
@media(min-width:560px){body{border-left:1px solid var(--line);border-right:1px solid var(--line);
  box-shadow:0 0 70px rgba(15,23,42,.10)}}
.hidden{display:none!important}
button{font-family:inherit;border:0;background:none;cursor:pointer;color:inherit}
img{max-width:100%}
::-webkit-scrollbar{width:0;height:0}
h1,h2,h3,h4,.bh-amount,.wh-bal,.pc-name,.sheet-title,.amount-input input,.splash-name,.bc-num{font-family:var(--font-d)}
::selection{background:rgba(37,99,235,.22)}
:focus-visible{outline:2px solid var(--p2);outline-offset:2px;border-radius:8px}

/* ── Splash ── */
#splash{position:fixed;inset:0;background:var(--grad);display:flex;flex-direction:column;
  align-items:center;justify-content:center;z-index:100;color:#fff;transition:opacity .5s var(--ease)}
#splash::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(600px 340px at 50% 18%,rgba(13,148,136,.22),transparent 65%)}
#splash.fade{opacity:0;pointer-events:none}
.splash-logo{animation:pop .8s var(--ease);filter:drop-shadow(0 14px 30px rgba(0,0,0,.35))}
.splash-name{font-size:2.3rem;font-weight:800;margin-top:16px;letter-spacing:.5px;animation:fadeUp .7s .15s var(--ease) both}
.splash-tag{opacity:.92;font-size:.88rem;font-weight:500;margin-top:6px;animation:fadeUp .7s .3s var(--ease) both;
  color:#99F6E4;letter-spacing:.3px}
.splash-loader{margin-top:28px;width:120px;height:4px;border-radius:99px;background:rgba(255,255,255,.22);overflow:hidden;animation:fadeUp .7s .4s both}
.splash-loader i{display:block;height:100%;width:40%;border-radius:99px;background:linear-gradient(90deg,#2DD4BF,#14B8A6);animation:slidebar 1.1s infinite var(--ease)}
@keyframes slidebar{0%{transform:translateX(-120%)}100%{transform:translateX(320%)}}
@keyframes pop{0%{transform:scale(.4);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ── Auth — premium bold redesign ── */
#auth-view{min-height:100vh;min-height:100dvh;height:100vh;height:100dvh;padding-bottom:0;
  display:flex;flex-direction:column;overflow:hidden}
.auth-hero{background:linear-gradient(160deg,#0F172A 0%,#1E3A8A 34%,#1D4ED8 62%,#2563EB 88%,#3B82F6 100%);color:#fff;
  text-align:center;padding:calc(26px + env(safe-area-inset-top)) 20px 82px;position:relative;overflow:hidden}
.ah-grid{position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse 90% 80% at 50% 30%,#000 30%,transparent 75%);
  mask-image:radial-gradient(ellipse 90% 80% at 50% 30%,#000 30%,transparent 75%)}
.ah-orb{position:absolute;border-radius:50%;pointer-events:none;filter:blur(2px)}
.ah-orb-1{width:260px;height:260px;background:radial-gradient(circle,rgba(255,255,255,.14),rgba(255,255,255,0) 68%);
  top:-90px;right:-80px;animation:orbFloat 8s ease-in-out infinite}
.ah-orb-2{width:170px;height:170px;background:radial-gradient(circle,rgba(96,165,250,.34),rgba(96,165,250,0) 70%);
  bottom:30px;left:-60px;animation:orbFloat 11s ease-in-out infinite reverse}
.ah-orb-3{width:110px;height:110px;background:radial-gradient(circle,rgba(45,212,191,.32),rgba(45,212,191,0) 70%);
  top:44%;left:8%;animation:orbFloat 9s 1.2s ease-in-out infinite}
@keyframes orbFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-18px) scale(1.06)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(16px)}}
.auth-logo{display:flex;justify-content:center;position:relative;z-index:1;animation:pop .7s var(--ease)}
.auth-logo-ring{width:64px;height:64px;border-radius:20px;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.10);border:1.5px solid rgba(13,148,136,.45);
  box-shadow:0 20px 44px rgba(0,0,0,.30),inset 0 1.5px 0 rgba(255,255,255,.32),0 0 30px rgba(13,148,136,.18);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);animation:logoGlow 3.4s ease-in-out infinite}
.auth-logo-ring svg{width:38px;height:38px}
@keyframes logoGlow{0%,100%{box-shadow:0 20px 44px rgba(0,0,0,.30),0 0 0 0 rgba(13,148,136,.28),inset 0 1.5px 0 rgba(255,255,255,.32)}
  50%{box-shadow:0 20px 44px rgba(0,0,0,.30),0 0 0 14px rgba(13,148,136,0),inset 0 1.5px 0 rgba(255,255,255,.32)}}
.auth-hero h1{font-size:1.85rem;font-weight:800;margin-top:10px;letter-spacing:-1px;position:relative;z-index:1;
  text-shadow:0 4px 22px rgba(0,0,0,.35)}
.auth-hero p{opacity:.94;font-size:.84rem;font-weight:600;margin-top:4px;position:relative;z-index:1;color:#99F6E4}
.ah-trust{display:flex;justify-content:center;gap:8px;margin-top:12px;flex-wrap:wrap;position:relative;z-index:1}
.ah-chip{display:inline-flex;align-items:center;gap:6px;font-size:.6rem;font-weight:800;letter-spacing:.3px;
  padding:5px 10px;border-radius:999px;color:#fff;background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.24);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.ah-chip svg{width:12px;height:12px;flex-shrink:0;color:#5EEAD4}
.auth-card{background:var(--card);border-radius:30px 30px 0 0;margin:-46px 0 0;padding:20px 20px calc(16px + env(safe-area-inset-bottom));
  flex:1;min-height:0;display:flex;flex-direction:column;
  position:relative;z-index:2;animation:fadeUp .55s .1s var(--ease) both;
  box-shadow:0 -14px 44px rgba(15,23,42,.20)}
.auth-card::before{content:'';display:block;width:44px;height:5px;border-radius:99px;background:#CBD5E1;margin:-6px auto 14px}
.auth-tabs{display:flex;background:var(--bg);border-radius:16px;padding:4px;margin-bottom:16px;position:relative}
.auth-tab-slider{position:absolute;top:4px;left:4px;width:calc(50% - 4px);height:calc(100% - 8px);
  border-radius:12px;background:#fff;box-shadow:0 4px 14px rgba(15,23,42,.12),0 0 0 1.5px rgba(37,99,235,.16);
  transition:transform .32s var(--ease)}
.auth-tabs.show-signup .auth-tab-slider{transform:translateX(100%)}
.auth-tab{flex:1;padding:10px;border-radius:12px;font-weight:800;color:var(--sub);font-size:.95rem;
  transition:color .25s var(--ease);position:relative;z-index:1;font-family:var(--font-d);letter-spacing:.1px}
.auth-tab.active{color:var(--p1)}
.auth-form{display:flex;flex-direction:column;gap:12px;animation:fadeUp .3s var(--ease);
  flex:1;min-height:0;overflow-y:auto;scrollbar-width:none}
.auth-form::-webkit-scrollbar{display:none}
.field{display:flex;flex-direction:column;gap:7px;font-size:.78rem;font-weight:800;color:var(--sub);min-width:0;
  letter-spacing:.2px;text-transform:uppercase}
.field em{font-style:normal;opacity:.6;font-weight:600;text-transform:none;letter-spacing:0}
.fwrap{position:relative;display:flex;align-items:center}
.f-ic{position:absolute;left:15px;width:18px;height:18px;color:#94A3B8;pointer-events:none;transition:color .2s}
.field input{border:1.5px solid var(--line);border-radius:14px;padding:12px 44px 12px 44px;width:100%;
  font-size:.95rem;font-family:inherit;font-weight:700;color:var(--ink);outline:none;transition:.22s;background:#F8FAFC}
.field input::placeholder{color:#94A3B8;font-weight:600}
.field input:focus{border-color:var(--p2);background:#fff;box-shadow:0 0 0 4px rgba(37,99,235,.14)}
.field input:focus~.f-ic,.fwrap:focus-within .f-ic{color:var(--p1)}
.pw-eye{position:absolute;right:8px;width:36px;height:36px;border-radius:10px;display:flex;align-items:center;
  justify-content:center;color:#94A3B8;transition:.2s}
.pw-eye:active{transform:scale(.88);color:var(--p1)}
.pw-eye svg{width:19px;height:19px}
/* sheets use compact fields without icons */
.modal-sheet .field input{padding:13px 15px;background:#fff}
.auth-link{align-self:flex-end;font-size:.76rem;font-weight:800;color:var(--p1);margin-top:-6px;padding:4px 2px}
.btn-hero{padding:14px 18px;font-size:.95rem;border-radius:16px;font-family:var(--font-d);letter-spacing:.3px;
  box-shadow:0 14px 32px rgba(37,99,235,.42),inset 0 1.5px 0 rgba(255,255,255,.32);margin-top:4px}
.btn-hero:hover{box-shadow:0 16px 38px rgba(37,99,235,.55),inset 0 1.5px 0 rgba(255,255,255,.32)}
.btn-hero svg{width:18px;height:18px}
.auth-alt{text-align:center;font-size:.8rem;font-weight:600;color:var(--sub);margin-top:2px}
.auth-alt button{color:var(--p1);font-weight:800;font-size:.8rem;padding:2px}
/* signup scrolls INSIDE the card — Android-app style */
.auth-scroll{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:14px;
  padding:2px 6px 10px 2px;margin:0 -6px 0 -2px;scrollbar-width:thin;scrollbar-color:rgba(37,99,235,.35) transparent;
  -webkit-overflow-scrolling:touch}
.auth-scroll::-webkit-scrollbar{width:5px}
.auth-scroll::-webkit-scrollbar-thumb{background:rgba(37,99,235,.3);border-radius:99px}
.auth-scroll::-webkit-scrollbar-track{background:transparent}
.su-perk{display:flex;align-items:center;gap:10px;background:linear-gradient(135deg,#F0FDFA,#CCFBF1);
  border:1px solid #99F6E4;border-radius:14px;padding:12px 14px;font-size:.74rem;color:#0F766E;font-weight:600;line-height:1.5}
.su-perk svg{width:20px;height:20px;color:#0D9488;flex-shrink:0}
.su-perk b{font-weight:800}
.auth-note{font-size:.7rem;color:var(--sub);text-align:center;line-height:1.55}
.auth-secure{display:flex;align-items:center;justify-content:center;gap:8px;padding:8px 16px calc(12px + env(safe-area-inset-bottom));
  font-size:.62rem;font-weight:700;color:var(--sub);letter-spacing:.2px;text-align:center}
.auth-secure svg{width:14px;height:14px;color:var(--p1);flex-shrink:0}
.auth-how{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:10px;align-self:center;
  padding:8px 16px;border-radius:999px;background:var(--grad-soft);border:1px solid #BFDBFE;
  font-size:.7rem;font-weight:800;color:var(--p1);letter-spacing:.2px;transition:transform .12s var(--ease)}
.auth-how:active{transform:scale(.95)}
.auth-how svg{width:15px;height:15px;color:#0D9488;flex-shrink:0}

/* ── How-it-works steps (lending model explainer) ── */
.hw-steps{display:flex;flex-direction:column;gap:4px}
.hw-step{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px dashed var(--line)}
.hw-step:last-child{border-bottom:0;padding-bottom:2px}
.hw-n{width:26px;height:26px;border-radius:9px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:var(--grad-btn);color:#fff;font-size:.72rem;font-weight:800;font-family:var(--font-d);
  box-shadow:0 6px 14px rgba(37,99,235,.32)}
.hw-step b{font-size:.82rem;font-weight:800;display:block}
.hw-step p{font-size:.72rem;color:var(--sub);margin-top:2px;line-height:1.5}

/* ── Registered & trusted card ── */
.reg-card{background:linear-gradient(150deg,#0F172A 0%,#1E3A8A 55%,#1D4ED8 100%);border-radius:var(--r-lg);
  padding:16px 16px 12px;color:#fff;box-shadow:var(--shadow-lg);position:relative;overflow:hidden;margin-bottom:14px}
.reg-card::before{content:'';position:absolute;top:-70px;right:-60px;width:190px;height:190px;border-radius:50%;
  background:radial-gradient(circle,rgba(94,234,212,.22),transparent 70%)}
.reg-head{display:flex;gap:12px;align-items:center;position:relative;z-index:1;margin-bottom:10px}
.reg-head>svg{width:34px;height:34px;color:#5EEAD4;flex-shrink:0;filter:drop-shadow(0 4px 10px rgba(13,148,136,.5))}
.reg-head b{font-size:.92rem;font-weight:800;font-family:var(--font-d);display:block;letter-spacing:.2px}
.reg-head small{font-size:.68rem;opacity:.85;font-weight:600;line-height:1.4;display:block;margin-top:2px}
.reg-strip{display:flex;flex-direction:column;gap:8px;position:relative;z-index:1;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-md);
  padding:10px 12px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.reg-item{display:flex;gap:10px;align-items:flex-start}
.reg-item svg{width:17px;height:17px;color:#5EEAD4;flex-shrink:0;margin-top:1px}
.reg-item b{font-size:.76rem;font-weight:800;display:block}
.reg-item small{font-size:.66rem;opacity:.82;font-weight:600;line-height:1.45;display:block;margin-top:1px}
.modal-sheet .reg-strip{background:var(--grad-soft);border-color:#BFDBFE;margin-bottom:14px}
.modal-sheet .reg-item b{color:var(--ink)}
.modal-sheet .reg-item small{color:var(--sub)}
.modal-sheet .reg-item svg{color:#0D9488}
.modal-sheet .hw-steps{margin-bottom:14px}

/* ── Mobile keyboard fix: submit button now scrolls INSIDE .auth-scroll,
   so it can never be trapped under the on-screen keyboard ── */
.auth-scroll .btn-hero{margin-top:2px;flex-shrink:0}
.auth-scroll .auth-note{padding-bottom:4px}

/* very short phones: trim decorative extras so login ALWAYS fits without scrolling */
@media(max-height:640px){
  .ah-trust,.auth-secure{display:none}
  .auth-hero{padding-top:calc(16px + env(safe-area-inset-top));padding-bottom:66px}
  .auth-hero h1{font-size:1.55rem;margin-top:8px}
  .auth-hero p{font-size:.78rem}
  .auth-logo-ring{width:54px;height:54px;border-radius:17px}
  .auth-logo-ring svg{width:32px;height:32px}
  .auth-card{margin-top:-38px}
}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:var(--r-md);
  padding:14px 20px;font-weight:700;font-size:.9rem;letter-spacing:.1px;
  transition:transform .12s var(--ease),opacity .2s,box-shadow .25s;position:relative}
.btn svg{width:17px;height:17px;flex-shrink:0}
.btn:active{transform:scale(.96)}
.btn-primary{background:var(--grad-btn);color:#fff;box-shadow:0 10px 26px rgba(37,99,235,.38)}
.btn-primary:hover{box-shadow:0 12px 32px rgba(37,99,235,.5)}
.btn-soft{background:var(--blue-bg);color:var(--blue)}
.btn-green{background:var(--green-bg);color:var(--green)}
.btn-ghost{background:var(--bg);color:var(--ink)}
.btn-danger{background:var(--red-bg);color:var(--red)}
.btn-block{width:100%}
.btn-sm{padding:9px 14px;font-size:.78rem;border-radius:var(--r-sm)}
.btn-sm svg{width:14px;height:14px}
.btn:disabled{opacity:.55;pointer-events:none}
.btn.loading{color:transparent!important;pointer-events:none}
.btn.loading svg{opacity:0}
.btn.loading::after{content:'';position:absolute;width:18px;height:18px;border-radius:50%;
  border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;animation:spin .7s linear infinite}
.btn-soft.loading::after,.btn-green.loading::after,.btn-danger.loading::after,.btn-ghost.loading::after{
  border-color:rgba(15,23,42,.18);border-top-color:var(--p1)}

/* ── Header ── */
#app-header{position:sticky;top:0;z-index:50;background:var(--grad);color:#fff;
  padding:calc(14px + env(safe-area-inset-top)) 16px 16px;display:flex;align-items:center;
  justify-content:space-between;gap:10px;min-height:62px;border-radius:0 0 26px 26px;
  box-shadow:0 8px 26px rgba(37,99,235,.36)}
.hd-left{display:flex;align-items:center;gap:11px;min-width:0}
.hd-avatar{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,rgba(13,148,136,.34),rgba(13,148,136,.14));
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.05rem;font-family:var(--font-d);
  border:1.5px solid rgba(13,148,136,.6);flex-shrink:0;animation:pop .5s var(--ease);color:#CCFBF1}
.hd-title{line-height:1.2;min-width:0}
.hd-title small{display:block;font-size:.68rem;opacity:.88;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hd-title b{font-size:1rem;font-weight:800;font-family:var(--font-d);letter-spacing:.2px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hd-icon{width:42px;height:42px;border-radius:14px;background:rgba(255,255,255,.14);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;position:relative;transition:background .2s;color:#fff}
.hd-icon:active{background:rgba(255,255,255,.26)}
.hd-icon svg{width:20px;height:20px}
.hd-dot{position:absolute;top:8px;right:9px;width:8px;height:8px;border-radius:50%;
  background:#5EEAD4;border:1.5px solid #fff;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.35)}}

/* ── Main / views ── */
#main{padding-bottom:calc(var(--nav-h) + 22px + env(safe-area-inset-bottom))}
.view{padding:16px}
.view>*{animation:fadeUp .45s var(--ease) both}
.view>*:nth-child(2){animation-delay:.06s}
.view>*:nth-child(3){animation-delay:.12s}
.view>*:nth-child(4){animation-delay:.18s}
.view>*:nth-child(5){animation-delay:.24s}
.view>*:nth-child(6){animation-delay:.3s}
@media(max-width:360px){.view{padding:12px}}

/* ── Bottom nav ── */
#bottom-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:520px;
  height:calc(var(--nav-h) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);
  background:rgba(255,255,255,.88);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);
  display:flex;border-top:1px solid var(--line);z-index:50;box-shadow:0 -8px 28px rgba(15,23,42,.09)}
.nav-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:5px;color:#94A3B8;font-size:.68rem;font-weight:700;padding-top:8px;transition:color .2s;min-width:0;position:relative}
.nav-btn svg{width:24px;height:24px;transition:transform .25s var(--ease)}
.nav-btn.active{color:var(--p1)}
.nav-btn.active svg{transform:translateY(-3px) scale(1.1)}
.nav-btn:active svg{transform:scale(.85)}
.nav-btn.active::after{content:'';position:absolute;top:3px;width:18px;height:3.5px;border-radius:99px;
  background:var(--grad-btn);box-shadow:0 2px 8px rgba(37,99,235,.55);animation:pop .3s var(--ease)}

/* ── Cards & shared ── */
.card{background:var(--card);border-radius:var(--r-lg);padding:18px;box-shadow:var(--shadow);
  border:1px solid rgba(226,232,240,.9);margin-bottom:14px;transition:transform .2s var(--ease),box-shadow .25s}
.sec-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:22px 2px 12px}
.sec-head h3{font-size:1.06rem;font-weight:800;letter-spacing:-.25px}
.sec-head h3::before{content:'';display:inline-block;width:8px;height:8px;border-radius:3px;
  background:var(--grad-btn);margin-right:8px;vertical-align:1px;box-shadow:0 2px 6px rgba(37,99,235,.5)}
.sec-head button{color:var(--p1);font-weight:700;font-size:.78rem;white-space:nowrap}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:.68rem;font-weight:700;
  padding:4px 10px;border-radius:999px;white-space:nowrap}
.chip svg{width:11px;height:11px;flex-shrink:0}
.chip-green{background:var(--green-bg);color:var(--green)}
.chip-amber{background:var(--amber-bg);color:var(--amber)}
.chip-red{background:var(--red-bg);color:var(--red)}
.chip-blue{background:var(--blue-bg);color:var(--blue)}
.muted{color:var(--sub);font-size:.75rem}
.divider{height:1px;background:var(--line);margin:12px 0}

/* ── Home ── */
.balance-hero{background:var(--grad);border-radius:26px;padding:24px;color:#fff;
  box-shadow:var(--shadow-lg);position:relative;overflow:hidden}
.balance-hero::after{content:'';position:absolute;right:-40px;top:-40px;width:170px;height:170px;
  border-radius:50%;background:rgba(255,255,255,.07);animation:float 8s ease-in-out infinite}
.balance-hero::before{content:'';position:absolute;right:34px;bottom:-70px;width:120px;height:120px;
  border-radius:50%;background:rgba(13,148,136,.10);animation:float 10s ease-in-out infinite reverse}
.bh-label{font-size:.76rem;font-weight:600;opacity:.92;display:flex;align-items:center;gap:7px;position:relative;z-index:2}
.bh-label svg{width:16px;height:16px;cursor:pointer;color:#fff}
.bh-amount{font-size:clamp(1.9rem,8vw,2.4rem);font-weight:800;margin:8px 0 16px;letter-spacing:-.5px;position:relative;z-index:2}
.bh-row{display:flex;gap:10px;position:relative;z-index:2}
.bh-stat{flex:1;min-width:0;background:rgba(255,255,255,.13);border-radius:16px;padding:11px 12px;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.18)}
.bh-stat small{display:block;font-size:.6rem;opacity:.88;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bh-stat b{font-size:.92rem;font-weight:800;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.quick-item{display:flex;flex-direction:column;align-items:center;gap:8px;padding:8px 0;border-radius:16px;
  transition:background .2s,transform .15s}
.quick-item:active{background:var(--bg);transform:scale(.94)}
.quick-ic{width:50px;height:50px;border-radius:17px;display:flex;align-items:center;justify-content:center;
  color:#fff;box-shadow:0 8px 18px rgba(15,23,42,.18);transition:transform .25s var(--ease)}
.quick-item:hover .quick-ic{transform:translateY(-3px)}
.quick-ic svg{width:23px;height:23px}
.qi-1{background:linear-gradient(135deg,#16A34A,#4ADE80)}
.qi-2{background:linear-gradient(135deg,#2563EB,#60A5FA)}
.qi-3{background:linear-gradient(135deg,#0D9488,#5EEAD4)}
.qi-4{background:linear-gradient(135deg,#4F46E5,#818CF8)}
.quick-item span{font-size:.65rem;font-weight:700;color:var(--sub)}
@media(max-width:340px){.quick-ic{width:44px;height:44px;border-radius:14px}.quick-item span{font-size:.58rem}}
.banner{border-radius:var(--r-lg);padding:18px;color:#fff;margin-bottom:14px;
  display:flex;align-items:center;gap:14px;position:relative;overflow:hidden}
.banner>svg{width:36px;height:36px;flex-shrink:0;color:#fff}
.banner h4{font-size:.95rem;font-weight:800;letter-spacing:.1px}
.banner p{font-size:.74rem;opacity:.94;margin-top:3px;line-height:1.5}
.banner-purple{background:linear-gradient(120deg,#1E3A8A,#1D4ED8 60%,#3B82F6)}
.banner-green{background:linear-gradient(120deg,#15803D,#16A34A)}
.banner-amber{background:linear-gradient(120deg,#B45309,#F59E0B)}
.trust-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(70px,1fr));gap:8px;padding:4px 0}
.trust-item{display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;min-width:0}
.trust-ic{width:42px;height:42px;border-radius:14px;background:var(--grad-soft);color:var(--p1);
  display:flex;align-items:center;justify-content:center}
.trust-ic svg{width:21px;height:21px}
.trust-item span{font-size:.6rem;font-weight:700;color:var(--sub);line-height:1.3}
.about-list{display:flex;flex-direction:column;gap:13px}
.about-row{display:flex;gap:12px;align-items:flex-start;min-width:0}
.about-ic{width:42px;height:42px;border-radius:14px;background:var(--grad-soft);color:var(--p1);flex-shrink:0;
  display:flex;align-items:center;justify-content:center}
.about-ic svg{width:20px;height:20px}
.about-row>div{min-width:0}
.about-row b{font-size:.87rem;display:block;font-weight:800}
.about-row p{font-size:.74rem;color:var(--sub);margin-top:3px;line-height:1.5}
.ann-item{display:flex;gap:10px;padding:12px 0;border-bottom:1px solid var(--line)}
.ann-item:last-child{border:0}
.ann-item .dot{width:8px;height:8px;border-radius:50%;background:var(--p2);margin-top:7px;flex-shrink:0}
.ann-item>div{min-width:0}
.ann-item b{font-size:.84rem;font-weight:800}
.ann-item p{font-size:.74rem;color:var(--sub);margin-top:2px;line-height:1.5}
.ann-item time{font-size:.64rem;color:#94A3B8}

/* ── Plan cards ── */
.plan-card{background:var(--card);border-radius:26px;padding:20px;margin-bottom:14px;
  box-shadow:var(--shadow);border:1px solid rgba(226,232,240,.9);
  position:relative;overflow:hidden;transition:transform .2s var(--ease),box-shadow .25s}
.plan-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.plan-card .ribbon{position:absolute;top:15px;right:-34px;transform:rotate(38deg);
  background:linear-gradient(90deg,#0D9488,#5EEAD4);color:#0F172A;font-size:.6rem;font-weight:800;padding:4px 40px;
  letter-spacing:1px;box-shadow:0 4px 12px rgba(13,148,136,.4)}
.pc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:14px}
.pc-head>div:first-child{min-width:0}
.pc-name{font-size:1.12rem;font-weight:800;letter-spacing:-.2px}
.pc-sub{font-size:.74rem;color:var(--sub);margin-top:3px;font-weight:600}
.pc-badge{width:48px;height:48px;border-radius:15px;display:flex;align-items:center;justify-content:center;
  color:#fff;flex-shrink:0;box-shadow:0 8px 18px rgba(15,23,42,.2)}
.pc-badge svg{width:24px;height:24px}
.pc-row{display:flex;gap:8px;margin-bottom:14px}
.pc-cell{flex:1;min-width:0;background:var(--bg);border-radius:14px;padding:11px 6px;text-align:center}
.pc-cell small{display:block;font-size:.56rem;color:var(--sub);font-weight:800;text-transform:uppercase;letter-spacing:.5px}
.pc-cell b{font-size:.86rem;font-weight:800;margin-top:4px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-perks{margin-bottom:16px;display:flex;flex-direction:column;gap:8px}
.pc-perk{display:flex;align-items:center;gap:9px;font-size:.78rem;color:var(--sub);font-weight:600}
.pc-perk svg{width:16px;height:16px;color:var(--green);flex-shrink:0}
.mp-progress{height:8px;background:var(--bg);border-radius:99px;overflow:hidden;margin-top:12px}
.mp-progress i{display:block;height:100%;border-radius:99px;background:var(--grad-btn);transition:width 1s var(--ease)}
.mp-meta{display:flex;justify-content:space-between;font-size:.66rem;color:var(--sub);margin-top:6px;font-weight:700}

/* ── Wallet ── */
.wallet-hero{background:var(--grad);border-radius:26px;padding:24px;color:#fff;margin-bottom:14px;
  box-shadow:var(--shadow-lg);position:relative;overflow:hidden}
.wallet-hero::after{content:'';position:absolute;right:-50px;bottom:-76px;width:190px;height:190px;
  border-radius:50%;background:rgba(255,255,255,.07);animation:float 9s ease-in-out infinite}
.wh-top{display:flex;justify-content:space-between;align-items:center;gap:8px;position:relative;z-index:1;flex-wrap:wrap}
.wh-label{color:rgba(255,255,255,.9);font-size:.74rem;font-weight:700;letter-spacing:.3px}
.wh-chip{display:inline-flex;align-items:center;gap:5px;background:rgba(255,255,255,.18);color:#fff;
  border:1px solid rgba(255,255,255,.26);font-size:.66rem;font-weight:800;padding:5px 11px;border-radius:999px;white-space:nowrap}
.wh-chip svg{width:11px;height:11px;flex-shrink:0;color:#fff}
.wh-bal{font-size:clamp(1.8rem,8vw,2.2rem);font-weight:800;letter-spacing:-.5px;margin-top:6px;position:relative;z-index:1}
/* growth chip — pulsing green up-arrow: "my money is increasing" */
.wh-growth{display:inline-flex;align-items:center;gap:7px;margin-top:10px;padding:5px 12px 5px 9px;border-radius:999px;
  background:rgba(34,197,94,.20);border:1px solid rgba(134,239,172,.45);color:#BBF7D0;
  font-size:.74rem;font-weight:700;letter-spacing:.1px;position:relative;z-index:1;backdrop-filter:blur(6px)}
.wh-up-arrow{display:inline-flex;align-items:center;justify-content:center;width:19px;height:19px;border-radius:50%;
  background:rgba(74,222,128,.28);color:#4ADE80;animation:whUp 1.5s ease-in-out infinite;
  filter:drop-shadow(0 0 6px rgba(74,222,128,.85))}
.wh-up-arrow svg{width:12px;height:12px}
@keyframes whUp{0%,100%{transform:translateY(1px) scale(1)}50%{transform:translateY(-2.5px) scale(1.14)}}
@media (prefers-reduced-motion:reduce){.wh-up-arrow{animation:none}}
.wh-btns{display:flex;gap:10px;margin-top:18px;position:relative;z-index:1}
.wh-btns .btn{flex:1;background:rgba(255,255,255,.15);color:#fff;backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.22);min-width:0;padding:12px 10px;font-size:.84rem}
.wh-btns .btn svg{width:16px;height:16px;color:#fff;flex-shrink:0}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:14px}
.stat-cell{background:var(--card);border-radius:var(--r-md);padding:15px;box-shadow:var(--shadow);
  border:1px solid rgba(226,232,240,.9);display:flex;align-items:center;gap:11px;min-width:0}
.stat-ic{width:40px;height:40px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  color:#fff;flex-shrink:0;box-shadow:0 5px 12px rgba(15,23,42,.15)}
.stat-ic svg{width:19px;height:19px}
.stat-cell>div{min-width:0}
.stat-cell small{display:block;font-size:.62rem;color:var(--sub);font-weight:700}
.stat-cell b{font-size:.9rem;font-weight:800;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── Bank card ── */
.bank-card{background:linear-gradient(135deg,#0F172A,#1E3A8A 55%,#1D4ED8);border-radius:22px;padding:20px;color:#fff;
  position:relative;overflow:hidden;box-shadow:var(--shadow-lg);border:1px solid rgba(13,148,136,.25)}
.bank-card::after{content:'';position:absolute;top:-50px;right:-50px;width:150px;height:150px;border-radius:50%;
  background:rgba(255,255,255,.06)}
.bank-card .bc-chip{width:40px;height:29px;border-radius:7px;background:var(--grad-gold);margin-bottom:14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.bank-card .bc-num{font-size:1.15rem;font-weight:800;letter-spacing:2.5px;margin-bottom:14px;word-break:break-all}
.bank-card .bc-row{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.bank-card .bc-row>div{min-width:0}
.bank-card .bc-row small{display:block;font-size:.56rem;opacity:.72;text-transform:uppercase;letter-spacing:.7px;font-weight:800}
.bank-card .bc-row b{font-size:.8rem;font-weight:700}
.bank-card .bc-edit{position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:12px;color:#fff;
  background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;z-index:2}
.bank-card .bc-edit svg{width:16px;height:16px}
.bank-empty{display:flex;align-items:center;gap:13px;background:var(--card);border-radius:22px;padding:18px;width:100%;
  box-shadow:var(--shadow);border:1.5px dashed var(--line);text-align:left}
.bank-empty .be-ic{width:46px;height:46px;border-radius:15px;background:var(--grad-soft);color:var(--p1);flex-shrink:0;
  display:flex;align-items:center;justify-content:center}
.bank-empty .be-ic svg{width:23px;height:23px}
.bank-empty b{font-size:.88rem;font-weight:800}
.bank-empty p{font-size:.71rem;color:var(--sub);margin-top:2px}
.bank-empty>svg{width:18px;height:18px;color:#CBD5E1;flex-shrink:0}

/* ── Transactions ── */
.tx-item{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--line);animation:fadeUp .35s var(--ease) both}
.tx-item:last-child{border:0}
.tx-ic{width:42px;height:42px;border-radius:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.tx-ic svg{width:19px;height:19px}
.tx-in{background:var(--green-bg)} .tx-in svg{color:var(--green)}
.tx-out{background:var(--red-bg)} .tx-out svg{color:var(--red)}
.tx-cb{background:var(--amber-bg)} .tx-cb svg{color:var(--amber)}
.tx-mid{flex:1;min-width:0}
.tx-mid b{font-size:.84rem;font-weight:800;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tx-mid small{font-size:.65rem;color:var(--sub);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.tx-right{text-align:right;flex-shrink:0}
.tx-right b{font-size:.84rem;font-weight:800;display:block}
.tx-amt-in{color:var(--green)} .tx-amt-out{color:var(--red)}
.empty{padding:36px 20px;text-align:center;color:var(--sub)}
.empty svg{width:52px;height:52px;color:#CBD5E1;margin-bottom:10px}
.empty p{font-size:.82rem;font-weight:700}
.err-card{padding:16px;border-radius:14px;background:var(--red-bg);color:var(--red);font-size:.76rem;font-weight:600;line-height:1.5;word-break:break-word}

/* ── Settings ── */
.profile-card{display:flex;align-items:center;gap:14px}
.profile-av{width:58px;height:58px;border-radius:19px;background:var(--grad-btn);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:1.45rem;font-weight:800;font-family:var(--font-d);flex-shrink:0;
  box-shadow:0 10px 22px rgba(37,99,235,.38)}
.profile-card>div{min-width:0}
.profile-card b{font-size:1.05rem;font-weight:800;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.profile-card p{font-size:.73rem;color:var(--sub);margin-top:3px;word-break:break-all;line-height:1.5}
.ref-box{background:var(--bg);border-radius:14px;padding:13px 14px;margin-top:14px;
  display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.ref-box b{letter-spacing:1.2px;color:var(--p1);word-break:break-all;font-family:var(--font-d);font-size:.95rem}
.ref-box>div{display:flex;gap:8px;flex-wrap:wrap}
.set-group{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--shadow);
  border:1px solid rgba(226,232,240,.9);margin-bottom:14px;overflow:hidden}
.set-group h4{font-size:.68rem;text-transform:uppercase;letter-spacing:1px;color:var(--sub);
  padding:15px 16px 6px;font-weight:800}
.set-item{display:flex;align-items:center;gap:13px;padding:13px 16px;width:100%;text-align:left;
  border-bottom:1px solid var(--line);transition:background .15s;min-width:0}
.set-item:last-child{border-bottom:0}
.set-item:active{background:var(--bg)}
.set-ic{width:40px;height:40px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  color:#fff;flex-shrink:0;box-shadow:0 5px 12px rgba(15,23,42,.14)}
.set-ic svg{width:19px;height:19px;flex-shrink:0}
.set-mid{flex:1;min-width:0}
.set-mid b{font-size:.88rem;font-weight:800;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.set-mid small{font-size:.68rem;color:var(--sub);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.set-item>svg.arrow,.set-item .arrow{width:17px;height:17px;color:#CBD5E1;flex-shrink:0}
.switch{width:48px;height:27px;border-radius:999px;background:#CBD5E1;position:relative;transition:.3s var(--ease);flex-shrink:0;cursor:pointer}
.switch::after{content:'';position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;
  background:#fff;transition:.3s var(--ease);box-shadow:0 1px 4px rgba(0,0,0,.22)}
.switch.on{background:var(--green)}
.switch.on::after{left:24px}
@media(max-width:340px){
  .profile-av{width:48px;height:48px;border-radius:15px;font-size:1.15rem}
  .set-item{padding:12px 12px;gap:10px}
  .set-ic{width:36px;height:36px;border-radius:11px}
  .ref-box{flex-direction:column;align-items:flex-start}
}

/* ── Modal (bottom sheet) ── */
.modal-back{position:fixed;inset:0;background:rgba(15,23,42,.60);z-index:80;opacity:0;transition:opacity .3s;
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.modal-back.show{opacity:1}
.modal-sheet{position:fixed;bottom:0;left:50%;transform:translate(-50%,105%);width:100%;max-width:520px;
  background:#fff;border-radius:30px 30px 0 0;z-index:90;transition:transform .4s var(--ease);
  max-height:92vh;overflow-y:auto;padding:10px 20px calc(24px + env(safe-area-inset-bottom))}
.modal-sheet.show{transform:translate(-50%,0)}
.sheet-handle{width:44px;height:5px;border-radius:99px;background:#CBD5E1;margin:6px auto 16px}
.sheet-title{font-size:1.15rem;font-weight:800;letter-spacing:-.2px;margin-bottom:5px}
.sheet-sub{font-size:.76rem;color:var(--sub);margin-bottom:18px;line-height:1.55}
.sheet-fade{animation:fadeUp .3s var(--ease)}
.amount-input{display:flex;align-items:center;justify-content:center;gap:5px;margin:8px 0 4px}
.amount-input span{font-size:1.7rem;font-weight:800;color:var(--sub)}
.amount-input input{border:0;outline:none;font-size:2.4rem;font-weight:800;font-family:var(--font-d);
  width:60%;max-width:240px;text-align:left;color:var(--ink);background:transparent;letter-spacing:-1px}
.amount-quick{display:flex;gap:8px;justify-content:center;margin:10px 0 18px;flex-wrap:wrap}
.amount-quick button{background:var(--bg);border-radius:99px;padding:9px 17px;font-weight:800;
  font-size:.8rem;color:var(--p1);transition:.2s}
.amount-quick button:active{background:var(--grad-soft);transform:scale(.94)}
.upi-note{background:var(--blue-bg);border-radius:14px;padding:13px;font-size:.73rem;color:var(--blue);
  line-height:1.6;margin-bottom:14px;font-weight:600}
.upi-note b{font-size:.8rem}
.upi-id-pill{display:inline-block;background:#fff;border:1.5px dashed var(--p2);color:var(--p1);
  border-radius:99px;padding:9px 18px;font-weight:800;font-size:.92rem;margin:8px 0;letter-spacing:.5px;word-break:break-all}

/* ── Payment methods & destinations ── */
.paym,.dest{border:1.5px solid var(--line);border-radius:18px;padding:15px;margin-bottom:10px;
  cursor:pointer;transition:.2s var(--ease);position:relative;background:#fff}
.paym.sel,.dest.sel{border-color:var(--p2);background:var(--grad-soft);box-shadow:0 8px 20px rgba(37,99,235,.16)}
.paym-head{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.paym-head b{font-size:.87rem;font-weight:800}
.paym .btn{margin-top:10px}
.bank-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.bank-grid>div{background:rgba(255,255,255,.8);border-radius:11px;padding:9px 10px;min-width:0}
.bank-grid small{display:block;font-size:.55rem;color:var(--sub);font-weight:800;text-transform:uppercase;letter-spacing:.5px}
.bank-grid b{font-size:.77rem;display:block;margin-top:2px;word-break:break-all;font-weight:800}

/* ── Per-field copyable detail rows (deposit payment details) ── */
.cp-list{display:flex;flex-direction:column;gap:7px;margin:2px 0 4px}
.cp-row{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.85);
  border:1px solid var(--line);border-radius:12px;padding:8px 8px 8px 12px}
.cp-mid{flex:1;min-width:0}
.cp-mid small{display:block;font-size:.55rem;color:var(--sub);font-weight:800;text-transform:uppercase;letter-spacing:.5px}
.cp-mid b{font-size:.8rem;display:block;margin-top:1px;word-break:break-all;font-weight:800;color:var(--ink)}
.cp-btn{flex-shrink:0;width:36px;height:36px;border-radius:11px;background:var(--grad-soft);
  color:var(--p1);display:flex;align-items:center;justify-content:center;border:1px solid rgba(37,99,235,.18);
  cursor:pointer;transition:.18s var(--ease)}
.cp-btn svg{width:16px;height:16px}
.cp-btn:active{transform:scale(.88)}
.cp-btn.cp-done{background:var(--green);border-color:var(--green);color:#fff}
.upi-id-pill-row{display:inline-flex;align-items:center;gap:10px;padding:7px 8px 7px 18px}
.cp-btn-pill{background:rgba(37,99,235,.1)}
.dest{display:flex;align-items:center;gap:12px}
.dest-ic{width:42px;height:42px;border-radius:13px;background:var(--blue-bg);color:var(--blue);flex-shrink:0;
  display:flex;align-items:center;justify-content:center}
.dest-ic svg{width:20px;height:20px}
.dest b{font-size:.86rem;font-weight:800;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dest small{font-size:.68rem;color:var(--sub)}
.dest-ck{width:20px;height:20px;color:#CBD5E1;margin-left:auto;flex-shrink:0;transition:.2s}
.dest.sel .dest-ck{color:var(--green);transform:scale(1.15)}
.dest>div{min-width:0}

/* ── Proof upload ── */
.file-drop{display:block;border:2px dashed var(--line);border-radius:18px;padding:20px;text-align:center;
  cursor:pointer;transition:.2s;margin:6px 0 14px;background:var(--bg);color:var(--p1)}
.file-drop:active,.file-drop:hover{border-color:var(--p2)}
.file-drop svg{width:32px;height:32px;margin-bottom:7px}
.file-drop b{display:block;font-size:.84rem;font-weight:800;color:var(--ink)}
.file-drop small{font-size:.66rem;color:var(--sub)}
.proof-preview{border-radius:16px;max-height:220px;width:auto;margin:0 auto;display:block;
  box-shadow:var(--shadow);animation:pop .35s var(--ease)}

/* ── FAQ ── */
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;padding:14px 0;
  font-weight:800;font-size:.86rem;text-align:left;gap:10px}
.faq-q svg{width:17px;height:17px;color:var(--sub);transition:transform .25s var(--ease);flex-shrink:0}
.faq-item.open .faq-q svg{transform:rotate(180deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s var(--ease);font-size:.78rem;color:var(--sub);line-height:1.65}
.faq-item.open .faq-a{max-height:240px;padding-bottom:14px}

/* ── Success pop ── */
.success-pop{width:78px;height:78px;border-radius:26px;margin:6px auto 18px;
  display:flex;align-items:center;justify-content:center;animation:pop .55s var(--ease)}
.success-check{width:90px;height:90px;border-radius:50%;background:var(--green-bg);margin:8px auto 16px;
  display:flex;align-items:center;justify-content:center;animation:pop .55s var(--ease);color:var(--green)}
.success-check svg{width:44px;height:44px}

/* ── Confetti ── */
.confetti-piece{position:fixed;top:-14px;z-index:300;border-radius:2px;pointer-events:none;
  animation-name:confall;animation-timing-function:linear;animation-fill-mode:forwards}
@keyframes confall{to{transform:translateY(108vh) rotate(720deg);opacity:.4}}

/* ── Toast ── */
#toast-root{position:fixed;top:calc(14px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);
  z-index:200;display:flex;flex-direction:column;gap:8px;width:calc(100% - 40px);max-width:440px;pointer-events:none}
.toast{background:#0F172A;color:#fff;border-radius:16px;padding:13px 17px;font-size:.82rem;font-weight:700;
  display:flex;align-items:center;gap:10px;box-shadow:0 12px 32px rgba(0,0,0,.36);animation:toastin .35s var(--ease)}
.toast.bye{opacity:0;transform:translateY(-10px);transition:.3s}
.toast.ok{background:linear-gradient(135deg,#16A34A,#22C55E)}
.toast.err{background:linear-gradient(135deg,#DC2626,#EF4444)}
.toast svg{width:18px;height:18px;flex-shrink:0;color:#fff}
@keyframes toastin{from{opacity:0;transform:translateY(-16px) scale(.95)}to{opacity:1;transform:none}}

/* ── Loaders ── */
.spinner{width:40px;height:40px;border:4px solid var(--line);border-top-color:var(--p1);
  border-radius:50%;animation:spin .8s linear infinite;margin:40px auto}
@keyframes spin{to{transform:rotate(360deg)}}
.skel{position:relative;overflow:hidden;background:#E2E8F0;border-radius:18px}
.skel::after{content:'';position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);animation:shimmer 1.4s infinite}
@keyframes shimmer{to{transform:translateX(100%)}}
.skel-card{height:170px;margin-bottom:14px}
.skel-row{height:60px;margin:8px 0}
#loader-overlay{position:fixed;inset:0;z-index:400;background:rgba(248,250,252,.88);backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  opacity:0;pointer-events:none;transition:opacity .3s}
#loader-overlay.show{opacity:1;pointer-events:auto}
.lo-ring{width:58px;height:58px;border-radius:50%;border:5px solid rgba(37,99,235,.15);
  border-top-color:var(--p1);animation:spin .8s linear infinite}
.lo-logo{animation:pulse 1.6s infinite}
.scroll-x{display:flex;gap:10px;overflow-x:auto;padding:2px;margin:0 -2px;scrollbar-width:none}
.scroll-x::-webkit-scrollbar{display:none}


/* ═══════════ GODX — Ultimate Premium Upgrade ═══════════ */
#view-home,#view-wallet{perspective:1100px}

/* 3D hero cards (balance + wallet) */
.balance-hero,.wallet-hero{transform-style:preserve-3d;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
  /* will-change is granted by JS only while the pointer is over the card (v12) */
  box-shadow:0 26px 60px rgba(37,99,235,.40),0 4px 14px rgba(15,23,42,.12),inset 0 1px 0 rgba(255,255,255,.26)}
.hero-glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,30%),rgba(255,255,255,.22),transparent 55%);
  mix-blend-mode:overlay;opacity:0;transition:opacity .3s}
.balance-hero:hover .hero-glare,.wallet-hero:hover .hero-glare{opacity:1}
/* stacked-card 3D depth under wallet hero */
.wallet-hero{isolation:isolate}
.wallet-hero::before{content:'';position:absolute;left:20px;right:20px;bottom:-11px;height:30px;
  border-radius:0 0 24px 24px;background:linear-gradient(135deg,#1E3A8A,#2563EB);
  opacity:.55;z-index:-1;filter:blur(1px)}
.bh-amount,.wh-bal{text-shadow:0 3px 16px rgba(0,0,0,.32);letter-spacing:-1.2px}
.bh-stat{border:1px solid rgba(255,255,255,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.balance-hero{animation:heroIn .6s var(--ease) both}
@keyframes heroIn{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}

/* premium quick-action icons */
.quick-ic{box-shadow:0 10px 24px rgba(15,23,42,.24),inset 0 1.5px 0 rgba(255,255,255,.45);
  border:1px solid rgba(255,255,255,.4);position:relative;overflow:hidden}
.quick-ic::after{content:'';position:absolute;top:-40%;left:-60%;width:50%;height:180%;transform:rotate(20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);transition:left .6s var(--ease)}
.quick-item:hover .quick-ic::after{left:130%}
.quick-item span{color:var(--ink);letter-spacing:.1px}

/* premium plan cards */
.plan-card{border:1px solid transparent;border-radius:28px;
  background:linear-gradient(#fff,#fff) padding-box,
  linear-gradient(140deg,rgba(37,99,235,.5),rgba(13,148,136,.14) 45%,rgba(37,99,235,.38)) border-box;
  box-shadow:0 12px 34px rgba(37,99,235,.13),0 2px 6px rgba(15,23,42,.05)}
.plan-card::before{content:'';position:absolute;top:0;left:24px;right:24px;height:4px;border-radius:0 0 6px 6px;
  background:var(--grad-btn);opacity:.95;box-shadow:0 3px 10px rgba(37,99,235,.45)}
.plan-card::after{content:'';position:absolute;top:-60%;left:-80%;width:55%;height:220%;transform:rotate(20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
  transition:left .7s var(--ease);pointer-events:none}
.plan-card:hover::after{left:135%}
.plan-card:hover{transform:translateY(-4px)}
.pc-name{background:linear-gradient(120deg,#0F172A 30%,#1D4ED8);-webkit-background-clip:text;
  background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:-.4px}
.pc-badge{box-shadow:0 10px 24px rgba(37,99,235,.35),inset 0 1.5px 0 rgba(255,255,255,.4);
  border:1px solid rgba(255,255,255,.45)}
.pc-cell{background:linear-gradient(180deg,#EFF6FF,#E0E7FF);border:1px solid rgba(37,99,235,.13)}
.pc-perk svg{background:var(--green-bg);border-radius:50%;padding:3.5px;width:21px;height:21px}
.plan-card .btn-primary{box-shadow:0 12px 28px rgba(37,99,235,.42),inset 0 1.5px 0 rgba(255,255,255,.3);
  letter-spacing:.3px}
.plan-card .ribbon{background:linear-gradient(90deg,#0D9488,#5EEAD4);color:#0F172A;box-shadow:0 4px 14px rgba(13,148,136,.45)}

/* premium header */
#app-header{background:linear-gradient(135deg,#0F172A 0%,#1E3A8A 38%,#1D4ED8 72%,#2563EB 100%)}
.hd-icon{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.2)}

/* bank card subtle 3D */
.bank-card{transform-style:preserve-3d;transition:transform .35s var(--ease)}

/* ═══════════ v8.0 — Pro buttons · compact header · taller nav · Support ═══════════ */

/* ── PRO BUTTON SYSTEM — sheen sweep, lift, tactile press ── */
.btn{border-radius:16px;font-weight:800;letter-spacing:.2px;overflow:hidden;isolation:isolate;
  transition:transform .16s var(--ease),box-shadow .3s var(--ease),filter .2s,opacity .2s}
.btn-primary{background:var(--grad-btn);color:#fff;
  box-shadow:0 10px 26px rgba(37,99,235,.4),inset 0 1.5px 0 rgba(255,255,255,.32),inset 0 -2px 0 rgba(0,0,0,.14)}
.btn-primary::before{content:'';position:absolute;top:0;left:-90%;width:55%;height:100%;z-index:1;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.42),transparent);
  transform:skewX(-20deg);transition:left .55s var(--ease);pointer-events:none}
.btn-primary:hover::before{left:135%}
.btn-primary:hover{transform:translateY(-2px);
  box-shadow:0 16px 36px rgba(37,99,235,.52),inset 0 1.5px 0 rgba(255,255,255,.32),inset 0 -2px 0 rgba(0,0,0,.14)}
.btn-primary:active{transform:translateY(0) scale(.965);
  box-shadow:0 5px 14px rgba(37,99,235,.35),inset 0 1.5px 0 rgba(255,255,255,.25)}
.btn-soft,.btn-green,.btn-ghost,.btn-danger{box-shadow:inset 0 0 0 1.5px rgba(15,23,42,.05)}
.btn-soft:hover,.btn-green:hover,.btn-ghost:hover,.btn-danger:hover{
  transform:translateY(-2px);filter:brightness(1.03);box-shadow:0 10px 22px rgba(15,23,42,.13)}
.btn:active{transform:scale(.96)}
.btn-primary.loading::before{display:none}

/* ── SLIMMER PREMIUM HEADER ── */
#app-header{padding:calc(9px + env(safe-area-inset-top)) 16px 11px;min-height:50px;
  border-radius:0 0 20px 20px;box-shadow:0 6px 20px rgba(37,99,235,.3)}
.hd-avatar{width:36px;height:36px;font-size:.92rem}
.hd-title small{font-size:.62rem}
.hd-title b{font-size:.92rem}
.hd-icon{width:36px;height:36px;border-radius:12px}
.hd-icon svg{width:18px;height:18px}

/* ── SUPPORT VIEW ── */
.chat-hero{display:flex;align-items:center;gap:13px;flex-wrap:wrap}
.ch-left{display:flex;align-items:center;gap:13px;flex:1;min-width:190px}
.ch-ic{width:48px;height:48px;border-radius:16px;background:var(--grad-btn);color:#fff;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;box-shadow:0 10px 22px rgba(37,99,235,.4)}
.ch-ic svg{width:23px;height:23px}
.ch-left b{font-size:.95rem;font-weight:800;display:block}
.ch-left p{font-size:.72rem;color:var(--sub);margin-top:3px;line-height:1.5}
.chat-card{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:14px 16px}
.cc-ic{width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cc-ic.open{background:var(--green-bg);color:var(--green)}
.cc-ic.closed{background:var(--red-bg);color:var(--red)}
.cc-ic svg{width:21px;height:21px}
.cc-mid{flex:1;min-width:0}
.cc-mid b{font-size:.88rem;font-weight:800;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cc-mid small{font-size:.7rem;color:var(--sub);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px}
.cc-unread{background:var(--red);color:#fff;font-size:.64rem;font-weight:800;min-width:20px;height:20px;
  border-radius:99px;display:inline-flex;align-items:center;justify-content:center;padding:0 6px;flex-shrink:0}
.sup-search input{width:100%;border:1.5px solid var(--line);border-radius:14px;padding:12px 15px;
  font-family:inherit;font-size:.87rem;font-weight:600;outline:none;background:#F8FAFC;transition:.2s}
.sup-search input:focus{border-color:var(--p2);background:#fff;box-shadow:0 0 0 4px rgba(37,99,235,.14)}
.sup-cats{display:flex;gap:7px;overflow-x:auto;padding:12px 0 6px;scrollbar-width:none}
.sup-cats::-webkit-scrollbar{display:none}
.sup-cat{padding:8px 15px;border-radius:99px;background:var(--bg);color:var(--sub);font-size:.72rem;
  font-weight:800;white-space:nowrap;transition:.2s;border:1.5px solid transparent;flex-shrink:0}
.sup-cat.on{background:var(--grad-btn);color:#fff;box-shadow:0 6px 16px rgba(37,99,235,.35)}
.faq-tag{display:inline-block;font-size:.56rem;font-weight:800;text-transform:uppercase;letter-spacing:.6px;
  color:var(--p1);background:var(--grad-soft);padding:3px 8px;border-radius:99px;margin-bottom:6px}

/* ── FULL-SCREEN CHAT ROOM (user side) ── */
.chat-room{position:fixed;inset:0;margin:0 auto;max-width:520px;z-index:70;background:var(--bg);
  display:flex;flex-direction:column;animation:fadeUp .25s var(--ease)}
.chat-head{display:flex;align-items:center;gap:11px;background:var(--grad);color:#fff;
  padding:calc(10px + env(safe-area-inset-top)) 14px 11px;box-shadow:0 6px 20px rgba(37,99,235,.3);flex-shrink:0}
.chat-back{width:36px;height:36px;border-radius:12px;background:rgba(255,255,255,.14);color:#fff;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .2s}
.chat-back:active{background:rgba(255,255,255,.28)}
.chat-back svg{width:19px;height:19px}
.chat-head-ic{width:38px;height:38px;border-radius:13px;background:rgba(255,255,255,.16);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.22)}
.chat-head-ic svg{width:19px;height:19px}
.chat-head-info{flex:1;min-width:0}
.chat-head-info b{font-size:.95rem;font-weight:800;display:block;font-family:var(--font-d)}
.chat-head-info small{font-size:.66rem;opacity:.88;display:flex;align-items:center;gap:5px;font-weight:600}
.online-dot{width:7px;height:7px;border-radius:50%;background:#4ADE80;display:inline-block;animation:pulse 2s infinite;flex-shrink:0}
.chat-msgs{flex:1;overflow-y:auto;padding:16px 14px;display:flex;flex-direction:column;gap:10px;
  -webkit-overflow-scrolling:touch}
.chat-msg{max-width:80%;padding:10px 13px;border-radius:18px;font-size:.84rem;font-weight:600;
  line-height:1.5;word-break:break-word;animation:fadeUp .2s var(--ease)}
.chat-msg.mine{align-self:flex-end;background:var(--grad-btn);color:#fff;border-bottom-right-radius:6px;
  box-shadow:0 6px 16px rgba(37,99,235,.3)}
.chat-msg.theirs{align-self:flex-start;background:#fff;color:var(--ink);border:1px solid var(--line);
  border-bottom-left-radius:6px;box-shadow:var(--shadow)}
.chat-time{display:block;font-size:.58rem;opacity:.72;margin-top:4px;text-align:right;font-weight:700}
.chat-img{max-width:210px;width:100%;border-radius:12px;display:block;margin-bottom:5px}
.chat-file{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:inherit;max-width:100%;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);padding:9px 11px;border-radius:12px;margin-bottom:5px}
.chat-msg.theirs .chat-file{background:var(--bg);border-color:var(--line);color:var(--p1)}
.chat-file svg{width:18px;height:18px;flex-shrink:0}
.chat-file span{font-size:.78rem;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-empty{text-align:center;color:var(--sub);margin:auto;padding:30px}
.chat-empty svg{width:44px;height:44px;color:#CBD5E1;margin-bottom:10px}
.chat-empty b{display:block;font-size:.95rem;color:var(--ink);font-weight:800}
.chat-empty p{font-size:.76rem;margin-top:5px;line-height:1.5}
.chat-compose{display:flex;align-items:center;gap:8px;background:#fff;border-top:1px solid var(--line);
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));flex-shrink:0}
.chat-attach{width:42px;height:42px;border-radius:14px;background:var(--bg);color:var(--p1);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;transition:.2s}
.chat-attach:active{transform:scale(.9)}
.chat-attach svg{width:19px;height:19px}
.chat-input{flex:1;min-width:0;border:1.5px solid var(--line);border-radius:99px;padding:11px 16px;
  font-family:inherit;font-size:.87rem;font-weight:600;outline:none;background:#F8FAFC;transition:.2s}
.chat-input:focus{border-color:var(--p2);background:#fff;box-shadow:0 0 0 4px rgba(37,99,235,.12)}
.chat-send{width:44px;height:44px;border-radius:50%;background:var(--grad-btn);color:#fff;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;
  box-shadow:0 8px 18px rgba(37,99,235,.4),inset 0 1.5px 0 rgba(255,255,255,.32);transition:transform .15s}
.chat-send:active{transform:scale(.88)}
.chat-send svg{width:19px;height:19px;margin-left:-2px}
.chat-closed-bar{display:flex;align-items:center;gap:10px;justify-content:space-between;flex-wrap:wrap;
  padding:12px 14px calc(12px + env(safe-area-inset-bottom));background:var(--amber-bg);color:var(--amber);
  font-size:.74rem;font-weight:700;border-top:1px solid #99F6E4;flex-shrink:0}

/* ═══════════ v8.0 — daily-interest UI · premium chat · polish ═══════════ */

/* ── Active-plan interest strip ── */
.inv-card{position:relative;overflow:hidden}
.inv-card::before{content:'';position:absolute;top:0;left:24px;right:24px;height:3px;border-radius:0 0 6px 6px;
  background:var(--grad-btn);opacity:.85}
.interest-strip{display:flex;align-items:stretch;gap:8px;flex-wrap:wrap;margin-top:12px;
  background:linear-gradient(135deg,#EFF6FF,#F0FDFA);border:1px solid rgba(37,99,235,.16);
  border-radius:16px;padding:11px 12px}
.is-cell{flex:1;min-width:88px;display:flex;flex-direction:column;gap:2px;justify-content:center}
.is-cell small{font-size:.55rem;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--sub)}
.is-cell b{font-size:.9rem;font-weight:800;font-family:var(--font-num);color:var(--ink)}
.is-cell b.is-acc{color:var(--green)}
.is-days{font-size:.6rem;color:var(--sub);font-weight:700}

/* ── Next-interest countdown chip (premium, animated) ── */
.cd-chip{display:inline-flex;align-items:center;gap:9px;padding:8px 13px;border-radius:14px;
  background:linear-gradient(135deg,#0F172A,#1E3A8A 55%,#1D4ED8);color:#fff;
  box-shadow:0 8px 20px rgba(37,99,235,.35),inset 0 1px 0 rgba(255,255,255,.2);
  position:relative;overflow:hidden;flex-shrink:0}
.cd-chip::after{content:'';position:absolute;top:-60%;left:-80%;width:45%;height:220%;transform:rotate(20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.32),transparent);
  animation:cdSheen 3.2s var(--ease) infinite}
@keyframes cdSheen{0%,55%{left:-80%}85%,100%{left:140%}}
.cd-ic{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:9px;
  background:rgba(255,255,255,.16);flex-shrink:0}
.cd-ic svg{width:14px;height:14px;animation:cdTick 2s ease-in-out infinite}
@keyframes cdTick{0%,100%{transform:rotate(0)}8%{transform:rotate(14deg)}16%{transform:rotate(0)}}
.cd-txt{display:flex;flex-direction:column;line-height:1.15}
.cd-txt small{font-size:.52rem;font-weight:800;text-transform:uppercase;letter-spacing:.8px;opacity:.82}
.cd-val{font-size:.86rem;font-weight:800;font-family:var(--font-num);letter-spacing:.4px;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.cd-chip.cd-soon{background:linear-gradient(135deg,#0F766E,#0D9488 60%,#5EEAD4);
  box-shadow:0 8px 20px rgba(13,148,136,.4),inset 0 1px 0 rgba(255,255,255,.28)}
.cd-chip.cd-flip{animation:cdPop .5s var(--ease)}
@keyframes cdPop{0%{transform:scale(.92)}55%{transform:scale(1.06)}100%{transform:scale(1)}}

/* ── PREMIUM CHAT ROOM (user side) ── */
.chat-room{font-family:var(--font-chat);background:
  radial-gradient(1200px 500px at 50% -120px,rgba(37,99,235,.10),transparent 60%),var(--bg)}
.chat-room-out{animation:chatOut .22s var(--ease) both}
@keyframes chatOut{to{opacity:0;transform:translateY(14px)}}
.chat-head{gap:12px;box-shadow:0 8px 24px rgba(37,99,235,.32)}
/* controlled logo size — the oversized-logo bug fix */
.chat-head-logo{width:40px;height:40px;min-width:40px;border-radius:13px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.24);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.chat-head-logo svg{width:26px;height:26px;display:block}
.chat-head-info b{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.sup-badge{display:inline-flex;align-items:center;gap:4px;font-size:.54rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.7px;padding:3px 8px;border-radius:99px;
  background:rgba(13,148,136,.18);color:#CCFBF1;border:1px solid rgba(13,148,136,.45)}
.sup-badge svg{width:10px;height:10px;color:#5EEAD4}
.chat-msgs{gap:12px;padding:18px 14px}
.chat-msg{font-family:var(--font-chat);font-size:.86rem;letter-spacing:.1px;max-width:78%;
  animation:msgIn .28s var(--ease) both;box-shadow:0 3px 10px rgba(15,23,42,.07)}
@keyframes msgIn{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
.chat-msg.mine{background:linear-gradient(135deg,#1D4ED8,#3B82F6);border-bottom-right-radius:7px;
  box-shadow:0 8px 20px rgba(37,99,235,.32)}
.chat-msg.theirs{background:#fff;border:1px solid var(--line);border-bottom-left-radius:7px}
.chat-msg.pending{opacity:.65}
.chat-time{font-family:var(--font-num);letter-spacing:.3px}
.chat-loading{margin:auto;display:flex;flex-direction:column;align-items:center;gap:12px;
  color:var(--sub);font-size:.78rem;font-weight:700}
.cl-dots{display:flex;gap:6px}
.cl-dots i{width:9px;height:9px;border-radius:50%;background:var(--p2);animation:clB 1s infinite}
.cl-dots i:nth-child(2){animation-delay:.15s}.cl-dots i:nth-child(3){animation-delay:.3s}
@keyframes clB{0%,100%{transform:translateY(0);opacity:.4}50%{transform:translateY(-6px);opacity:1}}
.ce-logo{width:66px;height:66px;border-radius:22px;background:var(--grad-soft);margin:0 auto 12px;
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow)}
.chat-compose{box-shadow:0 -8px 24px rgba(15,23,42,.06)}
.chat-input{font-family:var(--font-chat)}
.chat-send::after{content:'';position:absolute;top:0;left:-80%;width:50%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.4),transparent);
  transform:skewX(-20deg);transition:left .5s var(--ease)}
.chat-send:hover::after{left:130%}
@media(max-width:380px){
  .chat-msg{max-width:86%}
  .interest-strip{gap:6px;padding:10px}
  .cd-val{font-size:.8rem}
}

/* ── Reduced motion: honor user preference ── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ═══════════ v9.0 — Modern premium Support Chat + Settings redesign ═══════════ */

/* ── SUPPORT VIEW — modern compact hero ── */
.sup-hero{position:relative;overflow:hidden;border-radius:22px;padding:18px 18px 16px;color:#fff;
  background:linear-gradient(135deg,#0F172A 0%,#1E3A8A 40%,#1D4ED8 75%,#2563EB 100%);
  box-shadow:0 16px 36px rgba(37,99,235,.35),inset 0 1px 0 rgba(255,255,255,.18);margin-bottom:14px}
.sup-hero::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(340px 160px at 88% -20%,rgba(13,148,136,.26),transparent 65%)}
.sup-orb{position:absolute;border-radius:50%;pointer-events:none;filter:blur(2px)}
.sup-orb-1{width:150px;height:150px;background:radial-gradient(circle,rgba(255,255,255,.12),transparent 68%);
  top:-60px;right:-40px;animation:orbFloat 8s ease-in-out infinite}
.sup-orb-2{width:90px;height:90px;background:radial-gradient(circle,rgba(45,212,191,.30),transparent 70%);
  bottom:-30px;left:-20px;animation:orbFloat 10s ease-in-out infinite reverse}
.sup-hero-top{display:flex;align-items:center;gap:12px;position:relative;z-index:1}
.sup-hero-ic{width:44px;height:44px;border-radius:15px;flex-shrink:0;
  background:rgba(255,255,255,.13);border:1px solid rgba(13,148,136,.4);
  display:flex;align-items:center;justify-content:center;color:#5EEAD4;
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.28),0 8px 18px rgba(0,0,0,.22);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.sup-hero-ic svg{width:21px;height:21px}
.sup-hero-txt{min-width:0}
.sup-hero-txt b{font-size:1.02rem;font-weight:800;font-family:var(--font-d);letter-spacing:-.2px;display:block}
.sup-hero-txt span{font-size:.68rem;font-weight:600;opacity:.92;display:flex;align-items:center;gap:6px;margin-top:3px}
.sup-hero-sub{position:relative;z-index:1;font-size:.74rem;font-weight:600;opacity:.9;line-height:1.55;margin:12px 0 14px}
.sup-start{position:relative;z-index:1;width:100%;display:flex;align-items:center;justify-content:center;gap:9px;
  padding:12px 16px;border-radius:14px;background:rgba(255,255,255,.14);color:#fff;
  border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  font-weight:800;font-size:.86rem;font-family:var(--font-d);letter-spacing:.2px;
  transition:transform .15s var(--ease),background .2s,box-shadow .25s;overflow:hidden}
.sup-start::before{content:'';position:absolute;top:0;left:-90%;width:55%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.32),transparent);
  transform:skewX(-20deg);transition:left .55s var(--ease);pointer-events:none}
.sup-start:hover::before{left:135%}
.sup-start:active{transform:scale(.97);background:rgba(255,255,255,.22)}
.sup-start:disabled{opacity:.85;pointer-events:auto;cursor:pointer}
.sup-start svg{width:17px;height:17px;color:#5EEAD4;flex-shrink:0}

/* compact chat list cards */
.chat-card{padding:12px 14px;gap:11px;border-radius:18px}
.cc-ic{width:40px;height:40px;border-radius:13px;position:relative}
.cc-ic svg{width:19px;height:19px}
.cc-live-dot{position:absolute;top:-2px;right:-2px;width:10px;height:10px;border-radius:50%;
  background:#4ADE80;border:2px solid #fff;animation:pulse 2s infinite}
.cc-mid b{font-size:.84rem}
.cc-mid small{font-size:.66rem}

/* FAQ card polish */
.faq-card{padding:16px 16px 10px}
.sup-search input{padding:11px 14px;font-size:.82rem;border-radius:12px}
.sup-cat{padding:7px 13px;font-size:.68rem}
.faq-q{padding:12px 0;font-size:.82rem}
.faq-a{font-size:.75rem}

/* ── CHAT ROOM — modern, compact, premium ── */
.chat-room{background:
  radial-gradient(900px 380px at 50% -120px,rgba(37,99,235,.12),transparent 60%),#F8FAFC}
.chat-head{gap:10px;padding:calc(8px + env(safe-area-inset-top)) 12px 9px;
  background:linear-gradient(135deg,#0F172A 0%,#1E3A8A 45%,#1D4ED8 80%,#2563EB 100%);
  border-radius:0 0 18px 18px;box-shadow:0 6px 18px rgba(37,99,235,.28)}
.chat-back{width:32px;height:32px;border-radius:11px}
.chat-back svg{width:17px;height:17px}
.chat-head-logo{width:34px;height:34px;min-width:34px;border-radius:11px}
.chat-head-logo svg{width:22px;height:22px}
.chat-head-info b{font-size:.88rem}
.chat-head-info small{font-size:.62rem}
.sup-badge{font-size:.5rem;padding:2px 7px}
.online-dot{width:6px;height:6px}

/* message area — softer, tighter, chat-app feel */
.chat-msgs{gap:8px;padding:14px 12px 16px}
.chat-msg{max-width:76%;padding:8px 12px;font-size:.82rem;line-height:1.45;
  border-radius:16px;box-shadow:0 2px 6px rgba(15,23,42,.06);position:relative}
.chat-msg.mine{background:linear-gradient(135deg,#1D4ED8,#2563EB 60%,#3B82F6);
  border-bottom-right-radius:5px;box-shadow:0 4px 12px rgba(37,99,235,.26)}
.chat-msg.theirs{background:#fff;border:1px solid #E2E8F0;border-bottom-left-radius:5px}
.chat-time{font-size:.55rem;margin-top:3px}
.chat-img{max-width:190px;border-radius:10px}
.chat-file{padding:7px 10px;border-radius:10px;margin-bottom:4px}
.chat-file span{font-size:.74rem}

/* day-divider style empty/loading states */
.chat-empty{padding:26px 24px}
.ce-logo{width:58px;height:58px;border-radius:19px;margin-bottom:10px}
.chat-empty b{font-size:.88rem}
.chat-empty p{font-size:.72rem}
.chat-loading{font-size:.72rem;gap:10px}
.cl-dots i{width:7px;height:7px}

/* modern floating compose bar */
.chat-compose{background:transparent;border-top:0;padding:10px 12px calc(10px + env(safe-area-inset-bottom))}
.chat-compose-inner{display:flex;align-items:center;gap:7px;width:100%;
  background:#fff;border:1px solid var(--line);border-radius:99px;padding:5px 5px 5px 6px;
  box-shadow:0 10px 26px rgba(15,23,42,.10)}
.chat-attach{width:36px;height:36px;border-radius:50%;background:var(--bg)}
.chat-attach svg{width:17px;height:17px}
.chat-input{border:0;background:transparent;padding:9px 4px;font-size:.84rem;border-radius:0}
.chat-input:focus{border:0;box-shadow:none;background:transparent}
.chat-send{width:38px;height:38px;box-shadow:0 6px 14px rgba(37,99,235,.35),inset 0 1.5px 0 rgba(255,255,255,.32)}
.chat-send svg{width:17px;height:17px}
.chat-closed-bar{padding:10px 14px calc(10px + env(safe-area-inset-bottom));font-size:.72rem;
  border-radius:18px 18px 0 0;border-top:0;box-shadow:0 -6px 18px rgba(15,23,42,.06)}

@media(max-width:380px){
  .chat-msg{max-width:84%}
  .sup-hero{padding:16px 15px 14px}
  .sup-hero-txt b{font-size:.95rem}
}

/* ── SETTINGS — modern premium redesign ── */
.pf-hero{position:relative;overflow:hidden;display:flex;align-items:center;gap:13px;
  border-radius:22px;padding:18px;color:#fff;margin-bottom:14px;
  background:linear-gradient(135deg,#0F172A 0%,#1E3A8A 42%,#1D4ED8 78%,#2563EB 100%);
  box-shadow:0 16px 36px rgba(37,99,235,.35),inset 0 1px 0 rgba(255,255,255,.18)}
.pf-hero::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(300px 150px at 90% -10%,rgba(13,148,136,.26),transparent 65%)}
.pf-orb{position:absolute;border-radius:50%;pointer-events:none;filter:blur(2px)}
.pf-orb-1{width:140px;height:140px;background:radial-gradient(circle,rgba(255,255,255,.12),transparent 68%);
  top:-56px;right:-36px;animation:orbFloat 8s ease-in-out infinite}
.pf-orb-2{width:80px;height:80px;background:radial-gradient(circle,rgba(45,212,191,.28),transparent 70%);
  bottom:-26px;left:24%;animation:orbFloat 10s ease-in-out infinite reverse}
.pf-av{width:54px;height:54px;border-radius:50%;flex-shrink:0;position:relative;z-index:1;
  background:linear-gradient(135deg,rgba(13,148,136,.40),rgba(13,148,136,.14));
  border:1.5px solid rgba(13,148,136,.6);
  display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.3),0 8px 18px rgba(0,0,0,.25)}
.pf-av span{font-size:1.3rem;font-weight:800;font-family:var(--font-d);color:#CCFBF1}
.pf-info{flex:1;min-width:0;position:relative;z-index:1}
.pf-info b{font-size:1.02rem;font-weight:800;font-family:var(--font-d);letter-spacing:-.2px;
  display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-info p{font-size:.7rem;opacity:.85;margin-top:2px;word-break:break-all;font-weight:600}
.pf-phone{display:inline-flex;align-items:center;gap:5px;font-size:.64rem;font-weight:700;opacity:.9;margin-top:4px}
.pf-phone svg{width:11px;height:11px}
.pf-edit{width:34px;height:34px;border-radius:12px;flex-shrink:0;position:relative;z-index:1;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24);color:#fff;
  display:flex;align-items:center;justify-content:center;transition:background .2s,transform .15s}
.pf-edit:active{transform:scale(.9);background:rgba(255,255,255,.26)}
.pf-edit svg{width:15px;height:15px}

/* referral card — teal-accent premium */
.ref-card{position:relative;overflow:hidden;background:var(--card);border-radius:20px;padding:16px;
  margin-bottom:14px;border:1px solid rgba(226,232,240,.9);
  box-shadow:0 12px 30px rgba(37,99,235,.10)}
.ref-card::before{content:'';position:absolute;top:0;left:22px;right:22px;height:3px;border-radius:0 0 6px 6px;
  background:var(--grad-gold);box-shadow:0 3px 10px rgba(13,148,136,.45)}
.ref-head{display:flex;gap:11px;align-items:flex-start}
.ref-ic{width:40px;height:40px;border-radius:13px;flex-shrink:0;color:#fff;
  background:linear-gradient(135deg,#0D9488,#5EEAD4);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 18px rgba(13,148,136,.35),inset 0 1.5px 0 rgba(255,255,255,.4)}
.ref-ic svg{width:19px;height:19px}
.ref-head b{font-size:.9rem;font-weight:800;display:block}
.ref-head p{font-size:.7rem;color:var(--sub);margin-top:3px;line-height:1.5}
.ref-code{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  margin-top:13px;background:linear-gradient(135deg,#F0FDFA,#F0FDFA);
  border:1.5px dashed #5EEAD4;border-radius:14px;padding:11px 13px}
.ref-code-val{min-width:0}
.ref-code-val small{display:block;font-size:.55rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.8px;color:#115E59}
.ref-code-val b{font-size:1.02rem;font-weight:800;font-family:var(--font-d);letter-spacing:1.4px;
  color:#0F766E;word-break:break-all}
.ref-actions{display:flex;gap:7px}
.ref-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 13px;border-radius:11px;
  background:#fff;color:var(--gold-ink);font-size:.72rem;font-weight:800;
  border:1px solid #99F6E4;box-shadow:0 3px 8px rgba(13,148,136,.12);
  transition:transform .15s var(--ease),box-shadow .2s}
.ref-btn:active{transform:scale(.94)}
.ref-btn svg{width:13px;height:13px}
.ref-btn-gold{background:linear-gradient(135deg,#0D9488,#2DD4BF);color:#fff;border-color:transparent;
  box-shadow:0 6px 14px rgba(13,148,136,.35)}

/* tighter settings groups */
.set-group h4{padding:13px 16px 5px;font-size:.64rem;letter-spacing:1.1px}
.set-item{padding:11px 16px;gap:12px}
.set-ic{width:38px;height:38px;border-radius:12px;
  box-shadow:0 5px 12px rgba(15,23,42,.14),inset 0 1.5px 0 rgba(255,255,255,.35)}
.set-ic svg{width:18px;height:18px}
.set-mid b{font-size:.85rem}
.set-mid small{font-size:.66rem}
.set-item:active{transform:scale(.995)}

/* modern logout + version */
.set-logout{width:100%;display:flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 18px;border-radius:16px;margin-top:4px;
  background:var(--card);color:var(--red);font-weight:800;font-size:.88rem;
  border:1.5px solid rgba(220,38,38,.28);box-shadow:var(--shadow);
  transition:transform .15s var(--ease),background .2s}
.set-logout:active{transform:scale(.97);background:var(--red-bg)}
.set-logout svg{width:17px;height:17px}
.set-ver{text-align:center;margin:14px 0 4px;font-size:.68rem;font-weight:700;color:var(--sub)}

@media(max-width:340px){
  .pf-av{width:46px;height:46px}
  .pf-av span{font-size:1.1rem}
  .pf-info b{font-size:.92rem}
  .ref-code{flex-direction:column;align-items:flex-start}
}

/* ═══════════ v10.0 — Ultimate polish: bug fix + buttons + sections ═══════════ */

/* ── ① BUG FIX — support chat logo rendered oversized ──────────────
   The header logo & empty-state logo are now HARD-CLAMPED with
   !important on every axis (width/height/min/max/flex/aspect-ratio),
   so no earlier rule, inline attribute, or future edit can inflate
   them again. Fixed 32px header chip with an 18px glyph inside. */
.chat-head{display:flex;align-items:center;flex-wrap:nowrap}
.chat-head-logo{width:32px!important;height:32px!important;min-width:32px!important;max-width:32px!important;
  flex:0 0 32px!important;border-radius:11px!important;overflow:hidden!important;aspect-ratio:1/1!important;
  display:flex!important;align-items:center!important;justify-content:center!important}
.chat-head-logo svg{width:18px!important;height:18px!important;max-width:18px!important;max-height:18px!important;
  display:block!important;flex:none!important}
.ce-logo{width:56px!important;height:56px!important;max-width:56px!important;max-height:56px!important;overflow:hidden!important}
.ce-logo svg{width:30px!important;height:30px!important;max-width:30px!important;max-height:30px!important;display:block!important}

/* ── ② BUTTONS v10 — richer gradient, glow ring, double sheen ── */
.btn{border-radius:15px;letter-spacing:.25px;font-weight:800;
  transition:transform .15s var(--ease),box-shadow .3s var(--ease),filter .2s,opacity .2s}
.btn-primary{background:linear-gradient(135deg,#1E3A8A 0%,#1D4ED8 30%,#2563EB 62%,#60A5FA 100%);
  box-shadow:0 12px 30px rgba(37,99,235,.46),0 0 0 1px rgba(96,165,250,.35),
  inset 0 1.5px 0 rgba(255,255,255,.38),inset 0 -2.5px 0 rgba(0,0,0,.18)}
.btn-primary:hover{transform:translateY(-2.5px);filter:saturate(1.08);
  box-shadow:0 18px 42px rgba(37,99,235,.55),0 0 0 1px rgba(96,165,250,.5),
  0 0 24px rgba(37,99,235,.35),inset 0 1.5px 0 rgba(255,255,255,.38)}
.btn-primary:active{transform:translateY(.5px) scale(.97);filter:saturate(1)}
.btn-soft{box-shadow:inset 0 0 0 1.5px rgba(37,99,235,.16)}
.btn-green{box-shadow:inset 0 0 0 1.5px rgba(22,163,74,.16)}
.btn-danger{box-shadow:inset 0 0 0 1.5px rgba(220,38,38,.18)}
.btn-soft:hover,.btn-green:hover,.btn-ghost:hover,.btn-danger:hover{
  transform:translateY(-2px);box-shadow:0 12px 26px rgba(15,23,42,.14)}
.btn-sm{border-radius:12px}
.btn-hero{background:linear-gradient(135deg,#1E3A8A,#1D4ED8 35%,#2563EB 70%,#60A5FA);
  box-shadow:0 16px 36px rgba(37,99,235,.5),0 0 0 1px rgba(96,165,250,.35),inset 0 1.5px 0 rgba(255,255,255,.38)}

/* ── ③ SECTION HEADERS — gradient title + softer hairline ── */
.sec-head{margin:24px 2px 13px;padding-bottom:9px;border-bottom:1px solid var(--line)}
.sec-head h3{font-size:1.08rem;letter-spacing:-.3px;
  background:linear-gradient(120deg,#0F172A 40%,#1D4ED8);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent}
.sec-head h3::before{width:9px;height:9px;border-radius:3.5px;margin-right:9px;
  background:var(--grad-btn);box-shadow:0 2px 8px rgba(37,99,235,.55)}
.sec-head button{padding:6px 12px;border-radius:99px;background:var(--grad-soft);
  border:1px solid rgba(37,99,235,.15);transition:.2s}
.sec-head button:active{transform:scale(.93)}

/* ── ④ CARDS — layered borders, top light, hover lift ── */
.card{box-shadow:0 1px 2px rgba(15,23,42,.05),0 10px 30px rgba(15,23,42,.08),inset 0 1px 0 #fff;
  border:1px solid rgba(226,232,240,.95)}
.card:hover{box-shadow:0 2px 3px rgba(15,23,42,.05),0 18px 44px rgba(37,99,235,.13),inset 0 1px 0 #fff}

/* ── ⑤ BOTTOM NAV — floating pill active state ── */
#bottom-nav{background:rgba(255,255,255,.92);box-shadow:0 -10px 32px rgba(15,23,42,.10)}
.nav-btn{gap:4px;padding-top:6px}
.nav-btn.active{color:var(--p1)}
.nav-btn.active::before{content:'';position:absolute;top:6px;width:44px;height:30px;border-radius:99px;
  background:linear-gradient(135deg,rgba(37,99,235,.14),rgba(37,99,235,.06));animation:pop .3s var(--ease)}
.nav-btn.active::after{top:auto;bottom:7px;width:16px;height:3px}
.nav-btn.active svg{transform:translateY(-1px) scale(1.06)}
.nav-btn svg,.nav-btn span{position:relative;z-index:1}

/* ── ⑥ HERO CARDS — aurora shimmer sweep ── */
.balance-hero::before,.wallet-hero::before{filter:blur(.5px)}
.balance-hero .bh-amount,.wallet-hero .wh-bal{letter-spacing:-1px}
.bh-stat{transition:transform .2s var(--ease)}
.bh-stat:hover{transform:translateY(-2px)}

/* ── ⑦ QUICK ACTIONS — glow on press ── */
.quick-ic{box-shadow:0 10px 24px rgba(15,23,42,.26),inset 0 1.5px 0 rgba(255,255,255,.5)}
.quick-item:active .quick-ic{box-shadow:0 4px 12px rgba(15,23,42,.2),inset 0 1.5px 0 rgba(255,255,255,.5);transform:scale(.94)}

/* ── ⑧ CHAT — softer bubbles, tails, date feel ── */
.chat-msg{font-size:.83rem;padding:9px 13px}
.chat-msg.mine{background:linear-gradient(135deg,#1E3A8A,#2563EB 55%,#3B82F6);
  box-shadow:0 6px 16px rgba(37,99,235,.30),inset 0 1px 0 rgba(255,255,255,.25)}
.chat-msg.theirs{box-shadow:0 2px 8px rgba(15,23,42,.06),inset 0 1px 0 #fff}
.chat-compose-inner{box-shadow:0 12px 30px rgba(15,23,42,.12),inset 0 1px 0 #fff;border-color:#E2E8F0}
.chat-send{background:linear-gradient(135deg,#1D4ED8,#2563EB 60%,#60A5FA)}
.chat-send:hover{box-shadow:0 8px 18px rgba(37,99,235,.45),0 0 18px rgba(37,99,235,.4)}
.chat-card{transition:transform .18s var(--ease),box-shadow .25s}
.chat-card:hover{transform:translateY(-2px)}
.chat-card:active{transform:scale(.98)}

/* ── ⑨ SUPPORT HERO — teal ring + glass button lift ── */
.sup-hero-ic{box-shadow:inset 0 1.5px 0 rgba(255,255,255,.3),0 8px 20px rgba(0,0,0,.25),0 0 18px rgba(13,148,136,.25)}
.sup-start:hover{background:rgba(255,255,255,.2);box-shadow:0 8px 22px rgba(0,0,0,.25)}
.sup-cat.on{box-shadow:0 8px 18px rgba(37,99,235,.4),inset 0 1px 0 rgba(255,255,255,.3)}
.faq-item{transition:background .2s}
.faq-item.open{background:linear-gradient(180deg,rgba(37,99,235,.05),transparent)}
.faq-q{transition:color .2s}
.faq-item.open .faq-q{color:var(--p1)}

/* ── ⑩ SETTINGS — pressed states, teal ref card shine ── */
.set-item{transition:background .15s,transform .15s var(--ease)}
.set-item:hover{background:#F8FAFC}
.ref-card::after{content:'';position:absolute;top:-60%;left:-80%;width:45%;height:220%;transform:rotate(20deg);
  background:linear-gradient(90deg,transparent,rgba(13,148,136,.14),transparent);
  animation:cdSheen 4.5s var(--ease) infinite;pointer-events:none}
.set-logout:hover{background:var(--red-bg);box-shadow:0 10px 24px rgba(220,38,38,.18)}

/* ── ⑪ INPUTS & SHEETS — focus glow + smoother sheet ── */
.field input:focus{box-shadow:0 0 0 4px rgba(37,99,235,.16),0 4px 14px rgba(37,99,235,.10)}
.modal-sheet{box-shadow:0 -18px 50px rgba(15,23,42,.35)}
.sheet-handle{background:#CBD5E1}
.switch{box-shadow:inset 0 1.5px 3px rgba(15,23,42,.14)}
.switch.on{background:linear-gradient(135deg,#16A34A,#22C55E);box-shadow:0 4px 12px rgba(22,163,74,.35)}

/* ── ⑫ TOAST & MISC — frosted toasts, nicer chips ── */
.toast{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.chip{letter-spacing:.2px}
.mp-progress{box-shadow:inset 0 1px 3px rgba(15,23,42,.10)}
.mp-progress i{background:linear-gradient(90deg,#1D4ED8,#2563EB,#60A5FA);box-shadow:0 0 10px rgba(37,99,235,.5)}

/* ═══════════ v11.0 — Calm Blue theme + bug fixes ═══════════ */

/* ── FIX ① Support chat list — giant chevron arrow ──────────────
   IC.arrowR renders an <svg class="arrow"> with no intrinsic size;
   inside .chat-card (flex row) it stretched to fill the card.
   Hard-clamp it on every axis. */
.chat-card svg.arrow{width:17px!important;height:17px!important;min-width:17px!important;
  max-width:17px!important;max-height:17px!important;flex:0 0 17px!important;
  color:#CBD5E1;align-self:center}

/* ── FIX ② Bottom nav — press + bounce animation ────────────────
   The v10 .nav-btn.active svg rule overrode the :active press scale,
   killing tap feedback on the active tab. Restored with a springy
   bounce + pill pop, and a squash-press for inactive tabs. */
.nav-btn svg{transition:transform .35s cubic-bezier(.34,1.56,.64,1),color .2s}
.nav-btn:active:not(.active) svg{transform:scale(.72)}
.nav-btn.active:active svg{transform:translateY(-1px) scale(.88)}
.nav-btn.bounce svg{animation:navBounce .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes navBounce{
  0%{transform:translateY(4px) scale(.6)}
  55%{transform:translateY(-5px) scale(1.22)}
  80%{transform:translateY(0) scale(.95)}
  100%{transform:translateY(-1px) scale(1.06)}}
.nav-btn.active::before{animation:navPill .4s cubic-bezier(.34,1.56,.64,1)}
@keyframes navPill{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.15);opacity:1}100%{transform:scale(1)}}
.nav-btn.active::after{animation:navDot .4s var(--ease)}
@keyframes navDot{0%{transform:scaleX(.3);opacity:0}100%{transform:scaleX(1);opacity:1}}
.nav-btn span{transition:color .25s var(--ease)}

/* ── Calm Blue accents ── */
.splash-name{background:linear-gradient(92deg,#FFFFFF 10%,#BAE6FD 55%,#5EEAD4 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.splash-loader i{background:linear-gradient(90deg,#2DD4BF,#14B8A6,#2563EB)}
.hd-dot{background:#5EEAD4}
.ah-chip svg{color:#5EEAD4}

/* ═══════════ v12.0 — Performance pass: no-zoom · fast load · lag-free ═══════════ */

/* ── ① NO-ZOOM / native-app shell ──
   touch-action:manipulation already kills the double-tap delay; the viewport
   meta + JS gesture blockers in index.html finish the job. overflow-x:clip
   also stops any decorative bleed from causing horizontal rubber-banding. */
html,body{touch-action:manipulation;overscroll-behavior:none}
body{overflow-x:clip}

/* ── ② RENDERING CONTAINMENT — the browser skips layout/paint for cards
   that are off-screen; long transaction & plan lists stay 60fps on cheap phones.
   `auto <size>` remembers the last real size so the scrollbar never jumps. */
.card,.plan-card,.inv-card,.stat-cell,.set-group,.ref-card,
.chat-card,.tx-item,.ann-item,.sup-hero,.pf-hero,.balance-hero,.wallet-hero{
  content-visibility:auto;contain-intrinsic-size:auto 160px}

/* ── ③ GPU COMPOSITING HINTS — persistent fixed layers get their own
   compositor layer ONCE, instead of re-rasterizing with the page on every scroll. */
#splash,#loader-overlay,.modal-back,.chat-room{transform:translateZ(0)}
#bottom-nav{transform:translateX(-50%) translateZ(0)}
.modal-sheet{transform:translate(-50%,105%) translateZ(0)}
.modal-sheet.show{transform:translate(-50%,0) translateZ(0)}

/* ── ④ CHEAPER GLASS — blur radii trimmed to values that stay on the GPU
   fast path; the extra saturate() pass on the nav was a full extra filter
   render on every frame it was visible. */
#bottom-nav{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}

/* ── ⑤ CHEAPER ORBS — the radial gradients are already soft; the extra
   blur(2px) filter forced each orb onto its own filtered layer. */
.ah-orb,.sup-orb,.pf-orb{filter:none}

/* ── ⑥ SCROLL CONTAINERS — native momentum with zero JS interference;
   every gesture listener in the app is passive (see app.js + index.html). */
.auth-scroll,.chat-msgs,.modal-sheet{overscroll-behavior:contain}

/* ═══════════ v13.0 — Live chat upgrade: typing indicator · quick replies · modern fonts ═══════════ */

/* ── Typing indicator bubble (shown while admin/support is typing) ── */
.chat-msg.typing{align-self:flex-start;display:inline-flex;align-items:center;gap:5px;
  padding:12px 16px;background:#fff;border:1px solid var(--line);border-bottom-left-radius:5px;
  box-shadow:0 2px 8px rgba(15,23,42,.06);animation:msgIn .25s var(--ease) both;max-width:none}
.chat-msg.typing i{width:7px;height:7px;border-radius:50%;background:#94A3B8;flex-shrink:0;
  animation:tyBounce 1.15s ease-in-out infinite}
.chat-msg.typing i:nth-child(2){animation-delay:.16s}
.chat-msg.typing i:nth-child(3){animation-delay:.32s}
@keyframes tyBounce{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-4.5px);opacity:1}}

/* ── Quick-answer chips (tap → instant solution bubble) ── */
.chat-quick{position:sticky;bottom:2px;z-index:5;display:flex;gap:7px;align-items:center;
  overflow-x:auto;padding:4px 2px 6px;margin-top:2px;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.chat-quick::-webkit-scrollbar{display:none}
.chat-quick-label{flex-shrink:0;font-size:.58rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.7px;color:var(--sub);padding:0 2px}
.cq-chip{flex-shrink:0;display:inline-flex;align-items:center;gap:6px;padding:8px 14px;
  border-radius:99px;background:#fff;border:1.5px solid rgba(37,99,235,.28);color:var(--p1);
  font-size:.72rem;font-weight:800;letter-spacing:.15px;white-space:nowrap;cursor:pointer;
  box-shadow:0 3px 10px rgba(37,99,235,.10);
  transition:transform .15s var(--ease),box-shadow .2s,background .2s,color .2s}
.cq-chip svg{width:13px;height:13px;flex-shrink:0}
.cq-chip:hover{background:var(--grad-soft);box-shadow:0 6px 16px rgba(37,99,235,.20)}
.cq-chip:active{transform:scale(.92)}
.cq-chip.cq-more{background:var(--grad-btn);color:#fff;border-color:transparent;
  box-shadow:0 4px 12px rgba(37,99,235,.32)}

/* ── Multi-line messages keep their line breaks ── */
.chat-msg{white-space:pre-line}

/* ── Send button pressed lock ── */
.chat-send:disabled{opacity:.7;transform:scale(.94)}

/* ── Quick-reply sheet list (More…) ── */
.qr-item{display:flex;align-items:flex-start;gap:12px;width:100%;text-align:left;
  padding:13px 14px;border-radius:16px;background:var(--bg);border:1px solid var(--line);
  margin-bottom:9px;transition:transform .15s var(--ease),border-color .2s,background .2s}
.qr-item:active{transform:scale(.97);background:var(--grad-soft);border-color:rgba(37,99,235,.3)}
.qr-ic{width:36px;height:36px;border-radius:12px;flex-shrink:0;display:flex;align-items:center;
  justify-content:center;background:var(--grad-btn);color:#fff;
  box-shadow:0 5px 12px rgba(37,99,235,.30),inset 0 1px 0 rgba(255,255,255,.3)}
.qr-ic svg{width:17px;height:17px}
.qr-item b{font-size:.82rem;font-weight:800;display:block}
.qr-item small{font-size:.66rem;color:var(--sub);font-weight:600;display:block;margin-top:2px;line-height:1.45}

/* ── Status line typing treatment ── */
#ch-status .typing-txt{color:#5EEAD4;font-weight:800}

/* ═══════════ v14.0 — Support-chat stability fixes ═══════════ */

/* ── FIX A — Quick Answers "More" sheet: giant icons / crushed text ──
   svg.arrow has no intrinsic size; as a flex child inside .qr-item it
   ballooned to fill the entire card and squeezed the label text into
   one-word vertical columns (the reported screenshot). The v11 clamp only
   covered .chat-card — now clamped inside modal sheets too, on every axis. */
.qr-item>svg.arrow,.qr-item .arrow,.modal-sheet svg.arrow{
  width:16px!important;height:16px!important;min-width:16px!important;
  max-width:16px!important;max-height:16px!important;flex:0 0 16px!important;
  color:#CBD5E1;align-self:center}
.qr-ic{width:36px!important;height:36px!important;min-width:36px!important;
  max-width:36px!important;flex:0 0 36px!important;border-radius:12px!important;
  display:flex!important;align-items:center!important;justify-content:center!important}
.qr-ic svg{width:17px!important;height:17px!important;max-width:17px!important;
  max-height:17px!important;flex:none!important;display:block!important}
.qr-item>span{flex:1;min-width:0}

/* ── FIX B — message "blink" on send ──
   Every live snapshot re-rendered the whole list and replayed the msgIn
   entrance animation on ALL bubbles. Messages already on screen now skip
   the animation entirely (paired with the pending-sort fix in app.js). */
.chat-msg.seen{animation:none!important}

/* ── FIX C — chat opens regardless of admin presence ──
   (logic lives in app.js: no online check; welcome auto-replies are
   fire-and-forget so a slow write can never hold the room closed) */

/* ── SHARE PICKER (v15 — WhatsApp/Instagram/etc.) ── */
.share-code-box{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 16px;border-radius:16px;background:linear-gradient(135deg,rgba(37,99,235,.08),rgba(94,234,212,.08));
  border:1px dashed rgba(37,99,235,.28);margin:14px 0}
.share-code-box>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.share-code-box small{font-size:.65rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.share-code-box b{font-size:1.2rem;color:var(--ink);letter-spacing:.08em;font-family:var(--font-d)}
.share-preview{padding:14px;border-radius:14px;background:#F8FAFC;border:1px solid #E2E8F0;margin-bottom:16px}
.share-preview small{font-size:.62rem;font-weight:800;color:var(--muted);letter-spacing:.08em}
.share-preview p{margin:6px 0 6px;font-size:.83rem;color:var(--ink);white-space:pre-line;line-height:1.5}
.share-preview a{font-size:.75rem;color:var(--p1);word-break:break-all}
.share-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:6px 0}
.share-item{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px;
  border:none;background:transparent;cursor:pointer;font-size:.7rem;font-weight:600;color:var(--ink);
  border-radius:14px;transition:transform .15s ease,background .15s ease}
.share-item:hover{background:#F1F5F9;transform:translateY(-2px)}
.share-item:active{transform:scale(.94)}
.share-ic{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  color:#fff;box-shadow:0 4px 10px rgba(0,0,0,.12)}
.share-ic svg{width:22px;height:22px}
@media(max-width:360px){.share-grid{grid-template-columns:repeat(3,1fr)}}

/* ═══════════ v16.0 — Modern realistic icons · bold display type · login fixes ═══════════ */

/* ── BOLD ATTRACTIVE DISPLAY TYPE — Bricolage Grotesque headlines ── */
.splash-name{font-size:2.6rem;letter-spacing:-.5px}
.auth-hero h1{font-size:2.05rem;letter-spacing:-1.2px}
.sec-head h3{font-size:1.12rem;letter-spacing:-.4px}
.bh-amount,.wh-bal{font-weight:800;letter-spacing:-1.4px}
.pc-name{font-weight:800}
.sheet-title{font-size:1.22rem;letter-spacing:-.3px}
.hd-title b{font-weight:800}
.auth-tab{font-size:1rem;font-weight:800}

/* ── AUTH TABS — icon + label pairing (modern segmented control) ── */
.auth-tab{display:flex;align-items:center;justify-content:center;gap:7px}
.auth-tab svg{width:16px;height:16px;flex-shrink:0;opacity:.75;transition:.25s var(--ease)}
.auth-tab.active svg{opacity:1;transform:scale(1.08)}
.auth-tab.active{font-weight:800}

/* ── FIELD ICONS — slightly bolder, glow on focus ── */
.f-ic{width:19px;height:19px;stroke-width:2.2}
.fwrap:focus-within .f-ic{color:var(--p1);filter:drop-shadow(0 2px 6px rgba(37,99,235,.45))}
.field input{font-weight:700}

/* ── DUOTONE ICON POLISH — let the soft tint layer render crisply ── */
.quick-ic svg,.pc-badge svg,.stat-ic svg,.set-ic svg,.trust-ic svg,.about-ic svg,
.dest-ic svg,.be-ic svg,.qr-ic svg,.sup-hero-ic svg{stroke-width:2.1}
.empty svg{color:#BFDBFE}

/* ── BOTTOM NAV — duotone icons get a livelier active state ── */
.nav-btn svg{stroke-width:2.2;filter:drop-shadow(0 0 0 rgba(37,99,235,0))}
.nav-btn.active svg{filter:drop-shadow(0 4px 10px rgba(37,99,235,.4))}
.nav-btn span{font-weight:800;letter-spacing:.1px}

/* ── LOGIN PAGE FIXES ── */
/* signup tab's bottom switch link sits inside the scroll area — keep spacing tight */
#form-signup .auth-alt{margin-top:4px;padding-bottom:6px}
/* long-press / double-tap on tabs no longer selects text or flashes */
.auth-tab,.auth-link,.auth-alt button{-webkit-tap-highlight-color:transparent}
/* inputs: prevent iOS zoom-on-focus while keeping the app-zoom lock intact */
.field input{font-size:1rem}
@media(max-width:360px){.auth-tab{font-size:.9rem;gap:5px}.auth-tab svg{width:14px;height:14px}}

/* ═══════════════════════════════════════════════════════════════════
   v17.0 — ULTIMATE DEEP PREMIUM OVERHAUL (additive override layer)
   Mesh-gradient heroes · jewel icon system · floating-dock nav ·
   display typography · glass toasts · luxury micro-motion
   Pure CSS: zero HTML/JS/class-name changes — safe drop-in.
   ═══════════════════════════════════════════════════════════════════ */

/* ── ⓪ RENDER QUALITY — crisper type everywhere ── */
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
button,input{-webkit-font-smoothing:antialiased}
::selection{background:rgba(37,99,235,.28);color:#0F172A}
:focus-visible{outline:2.5px solid var(--p2);outline-offset:2.5px;border-radius:10px}

/* ── ① DISPLAY TYPOGRAPHY — tighter, bolder, gradient-kissed ── */
.splash-name{font-size:2.9rem;font-weight:800;letter-spacing:-1.4px;
  background:linear-gradient(95deg,#FFFFFF 5%,#BAE6FD 50%,#5EEAD4 95%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 6px 24px rgba(13,148,136,.35))}
.auth-hero h1{font-size:2.3rem;letter-spacing:-1.6px;
  background:linear-gradient(95deg,#FFFFFF 20%,#BFDBFE 70%,#99F6E4);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  text-shadow:none;filter:drop-shadow(0 5px 18px rgba(0,0,0,.30))}
.sec-head{position:relative}
.sec-head::after{content:'';position:absolute;left:2px;bottom:-1px;width:58px;height:2.5px;border-radius:99px;
  background:linear-gradient(90deg,var(--p1),#60A5FA,transparent);box-shadow:0 2px 8px rgba(37,99,235,.4)}
.sheet-title{font-size:1.28rem;letter-spacing:-.45px;
  background:linear-gradient(120deg,#0F172A 35%,#1D4ED8 90%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.bh-amount,.wh-bal{font-variant-numeric:tabular-nums;letter-spacing:-1.6px;text-shadow:none;
  background:linear-gradient(180deg,#FFFFFF 35%,#BAE6FD 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hd-title b{letter-spacing:.1px}
.empty p{font-family:var(--font-d);letter-spacing:-.2px}

/* ── ② MESH GRADIENT SURFACES — layered radial light, far richer than a flat ramp ── */
.balance-hero,.wallet-hero{
  background:
    radial-gradient(150% 120% at 6% -10%,rgba(96,165,250,.55),transparent 55%),
    radial-gradient(130% 130% at 108% 115%,rgba(13,148,136,.60),transparent 52%),
    radial-gradient(90% 90% at 82% 12%,rgba(29,78,216,.85),transparent 62%),
    linear-gradient(150deg,#0F172A 0%,#1E3A8A 45%,#1D4ED8 82%,#2563EB 100%)}
#app-header,.chat-head{
  background:
    radial-gradient(120% 220% at 100% -60%,rgba(13,148,136,.34),transparent 55%),
    radial-gradient(140% 200% at 0% 120%,rgba(96,165,250,.30),transparent 55%),
    linear-gradient(120deg,#0F172A 0%,#1E3A8A 45%,#1D4ED8 82%,#2563EB 100%)}
.auth-hero,.sup-hero,.pf-hero{
  background:
    radial-gradient(150% 130% at 8% -12%,rgba(96,165,250,.5),transparent 55%),
    radial-gradient(120% 120% at 105% 108%,rgba(13,148,136,.5),transparent 55%),
    linear-gradient(160deg,#0F172A 0%,#1E3A8A 38%,#1D4ED8 70%,#2563EB 100%)}
.reg-card,.bank-card{
  background:
    radial-gradient(140% 120% at 100% -20%,rgba(13,148,136,.30),transparent 55%),
    radial-gradient(120% 120% at -10% 120%,rgba(96,165,250,.28),transparent 55%),
    linear-gradient(145deg,#0F172A 0%,#1E3A8A 55%,#1D4ED8 100%)}

/* fine-grain film texture over hero surfaces — pure luxe */
.balance-hero::after,.wallet-hero::after{box-shadow:0 0 0 1px rgba(255,255,255,.05)}

/* ── ③ JEWEL ICON SYSTEM — inner gloss + ring + deep soft shadow ── */
.quick-ic,.pc-badge,.stat-ic,.set-ic,.ch-ic,.cc-ic,.ref-ic,.qr-ic{
  position:relative;overflow:hidden;
  box-shadow:0 12px 26px rgba(15,23,42,.26),0 2px 6px rgba(15,23,42,.12),
    inset 0 1.5px 0 rgba(255,255,255,.55),inset 0 -10px 16px rgba(0,0,0,.16)}
.quick-ic::before,.pc-badge::before,.stat-ic::before,.set-ic::before,
.ch-ic::before,.ref-ic::before,.qr-ic::before{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.34),transparent 46%)}
.quick-ic svg,.pc-badge svg,.stat-ic svg,.set-ic svg,.ch-ic svg,.ref-ic svg,.qr-ic svg{
  position:relative;z-index:1;filter:drop-shadow(0 2px 4px rgba(0,0,0,.22))}
.quick-item:active .quick-ic{transform:scale(.9)}
.trust-ic,.about-ic,.dest-ic,.be-ic,.ce-logo{
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.9),0 6px 14px rgba(37,99,235,.12);
  border:1px solid rgba(37,99,235,.14)}

/* featured plan — the badge breathes */
.plan-card .ribbon~.pc-head .pc-badge,.plan-card:has(.ribbon) .pc-badge{
  animation:badgePulse 2.6s ease-in-out infinite}
@keyframes badgePulse{0%,100%{box-shadow:0 10px 24px rgba(37,99,235,.35),inset 0 1.5px 0 rgba(255,255,255,.55)}
  50%{box-shadow:0 10px 28px rgba(37,99,235,.55),0 0 0 7px rgba(37,99,235,.10),inset 0 1.5px 0 rgba(255,255,255,.55)}}

/* ── ④ FLOATING-DOCK BOTTOM NAV — glass pill, glow trail ── */
#bottom-nav{border-top:1px solid rgba(37,99,235,.12);border-radius:22px 22px 0 0;
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(248,250,252,.88));
  box-shadow:0 -12px 40px rgba(15,23,42,.13),inset 0 1px 0 rgba(255,255,255,.9)}
.nav-btn.active::before{top:5px;width:46px;height:31px;
  background:linear-gradient(135deg,rgba(37,99,235,.18),rgba(13,148,136,.10));
  box-shadow:inset 0 0 0 1px rgba(37,99,235,.14),0 4px 12px rgba(37,99,235,.14)}
.nav-btn.active::after{bottom:6px;width:18px;height:3.5px;
  box-shadow:0 2px 10px rgba(37,99,235,.65),0 0 6px rgba(37,99,235,.4)}
.nav-btn.active svg{filter:drop-shadow(0 4px 12px rgba(37,99,235,.5))}
.nav-btn.active span{background:linear-gradient(120deg,#1D4ED8,#2563EB);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* ── ⑤ CARDS — luminous top edge, layered ambient shadow ── */
.card,.plan-card,.stat-cell,.set-group,.ref-card,.chat-card,.faq-card{
  box-shadow:0 1px 2px rgba(15,23,42,.05),0 14px 34px rgba(15,23,42,.08),
    0 4px 10px rgba(37,99,235,.05),inset 0 1px 0 rgba(255,255,255,.95)}
.card:hover,.chat-card:hover,.stat-cell:hover{
  box-shadow:0 2px 4px rgba(15,23,42,.05),0 20px 48px rgba(37,99,235,.14),inset 0 1px 0 #fff}

/* ── ⑥ BUTTONS — press depth + luminous rim ── */
.btn-primary{text-shadow:0 1px 2px rgba(0,0,0,.18)}
.btn-primary svg{filter:drop-shadow(0 1px 2px rgba(0,0,0,.2))}
.btn:active{transition-duration:.06s}
.btn-sm{border-radius:12px}

/* ── ⑦ INPUTS — focus bloom + icon pop ── */
.field input:focus{box-shadow:0 0 0 4px rgba(37,99,235,.15),0 6px 18px rgba(37,99,235,.12)}
.fwrap:focus-within .f-ic{transform:scale(1.12)}
.f-ic{transition:color .2s,transform .25s var(--ease),filter .25s}
.chat-input:focus::placeholder{color:#B6C3D6}
.sup-search input:focus{box-shadow:0 0 0 4px rgba(37,99,235,.15),0 6px 18px rgba(37,99,235,.10)}

/* ── ⑧ CHIPS & BADGES — tinted glass rings ── */
.chip{border:1px solid transparent;letter-spacing:.25px}
.chip-green{background:rgba(220,252,231,.8);border-color:rgba(22,163,74,.22)}
.chip-amber{background:rgba(254,243,199,.8);border-color:rgba(245,158,11,.24)}
.chip-red{background:rgba(254,226,226,.8);border-color:rgba(220,38,38,.20)}
.chip-blue{background:rgba(219,234,254,.8);border-color:rgba(37,99,235,.20)}
.wh-chip{backdrop-filter:blur(8px);box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
.sup-badge{box-shadow:0 0 14px rgba(13,148,136,.3)}

/* ── ⑨ MODAL SHEETS — frosted rise + brand handle ── */
.modal-sheet{background:linear-gradient(180deg,#FFFFFF 0%,#FBFDFF 100%);
  box-shadow:0 -20px 56px rgba(15,23,42,.38),inset 0 1.5px 0 rgba(255,255,255,.95)}
.sheet-handle{background:linear-gradient(90deg,#CBD5E1,#93C5FD,#CBD5E1);width:46px;height:5.5px}
.modal-back{backdrop-filter:blur(8px) saturate(1.15);-webkit-backdrop-filter:blur(8px) saturate(1.15);
  background:rgba(10,18,38,.55)}

/* ── ⑩ CHAT — deeper bubbles, glossy compose, live feel ── */
.chat-msg.mine{
  background:
    radial-gradient(140% 160% at 100% 0%,rgba(96,165,250,.5),transparent 55%),
    linear-gradient(135deg,#1E3A8A,#2563EB 55%,#3B82F6);
  box-shadow:0 8px 20px rgba(37,99,235,.34),inset 0 1px 0 rgba(255,255,255,.28)}
.chat-msg.theirs{box-shadow:0 3px 10px rgba(15,23,42,.07),inset 0 1px 0 #fff;border-color:#E6ECF5}
.chat-compose-inner{border:1.5px solid rgba(37,99,235,.10);
  box-shadow:0 14px 34px rgba(15,23,42,.13),inset 0 1px 0 #fff}
.chat-compose-inner:focus-within{border-color:rgba(37,99,235,.35);
  box-shadow:0 14px 34px rgba(15,23,42,.13),0 0 0 4px rgba(37,99,235,.10)}
.chat-send{background:linear-gradient(135deg,#1E3A8A,#2563EB 55%,#60A5FA)}
.chat-send:hover{box-shadow:0 10px 22px rgba(37,99,235,.5),0 0 20px rgba(37,99,235,.4)}
.chat-head{border-radius:0 0 20px 20px}
.cq-chip{box-shadow:0 4px 12px rgba(37,99,235,.12),inset 0 1px 0 #fff}
.cq-chip:hover{border-color:rgba(37,99,235,.5)}

/* ── ⑪ PROGRESS & LOADERS — branded shimmer ── */
.mp-progress{background:#EAF1FB;box-shadow:inset 0 1.5px 4px rgba(15,23,42,.12)}
.mp-progress i{background:linear-gradient(90deg,#1E3A8A,#2563EB,#60A5FA,#2DD4BF);
  background-size:200% 100%;animation:mpFlow 3s linear infinite;
  box-shadow:0 0 12px rgba(37,99,235,.55)}
@keyframes mpFlow{to{background-position:-200% 0}}
.skel{background:#E8EEF7}
.skel::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent)}
.spinner{border-color:rgba(37,99,235,.12);border-top-color:var(--p1)}
.lo-ring{border-color:rgba(37,99,235,.12);border-top-color:var(--p1);border-right-color:#0D9488}

/* ── ⑫ TOASTS — frosted luxury with icon chip ── */
.toast{background:rgba(15,23,42,.92);border:1px solid rgba(255,255,255,.12);
  box-shadow:0 16px 40px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.14)}
.toast.ok{background:linear-gradient(135deg,rgba(21,128,61,.96),rgba(34,197,94,.96))}
.toast.err{background:linear-gradient(135deg,rgba(185,28,28,.96),rgba(239,68,68,.96))}
.toast svg{width:24px;height:24px;padding:4.5px;border-radius:50%;
  background:rgba(255,255,255,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}

/* ── ⑬ AUTH — deeper hero, glowing card seam, premium tabs ── */
.auth-card{box-shadow:0 -18px 52px rgba(15,23,42,.26),inset 0 1.5px 0 rgba(255,255,255,.9)}
.auth-card::before{background:linear-gradient(90deg,#CBD5E1,#93C5FD,#CBD5E1)}
.auth-tab-slider{background:linear-gradient(180deg,#FFFFFF,#F4F8FF);
  box-shadow:0 6px 16px rgba(15,23,42,.14),0 0 0 1.5px rgba(37,99,235,.22),inset 0 1px 0 #fff}
.auth-tab.active svg{filter:drop-shadow(0 2px 6px rgba(37,99,235,.5))}
.ah-chip{box-shadow:inset 0 1px 0 rgba(255,255,255,.2);letter-spacing:.4px}
.su-perk{box-shadow:0 6px 16px rgba(13,148,136,.12),inset 0 1px 0 rgba(255,255,255,.8)}

/* ── ⑭ SPLASH — radiating brand rings ── */
#splash::after{content:'';position:absolute;left:50%;top:50%;width:340px;height:340px;
  transform:translate(-50%,-58%);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(94,234,212,.16),transparent 62%);
  animation:splashAura 3s ease-in-out infinite}
@keyframes splashAura{0%,100%{transform:translate(-50%,-58%) scale(1);opacity:.9}
  50%{transform:translate(-50%,-58%) scale(1.14);opacity:.5}}
.splash-loader{box-shadow:inset 0 1px 2px rgba(0,0,0,.2)}
.splash-loader i{box-shadow:0 0 12px rgba(45,212,191,.8)}

/* ── ⑮ HERO EXTRAS — glare always hints, stats float ── */
.balance-hero,.wallet-hero{will-change:auto}
.bh-stat{backdrop-filter:blur(10px) saturate(1.2);-webkit-backdrop-filter:blur(10px) saturate(1.2)}
.bh-stat b{font-variant-numeric:tabular-nums}
.wh-btns .btn{box-shadow:inset 0 1.5px 0 rgba(255,255,255,.28)}
.wh-btns .btn:active{background:rgba(255,255,255,.26)}
.bank-card .bc-num{font-variant-numeric:tabular-nums;text-shadow:0 2px 8px rgba(0,0,0,.3)}

/* ── ⑯ TRANSACTIONS & LISTS — row hover bloom ── */
.tx-item{border-radius:14px;padding-left:8px;padding-right:8px;margin-left:-8px;margin-right:-8px;
  transition:background .2s var(--ease)}
.tx-item:active{background:rgba(37,99,235,.05)}
.tx-ic{box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 4px 10px rgba(15,23,42,.08)}
.ann-item .dot{box-shadow:0 0 0 3px rgba(96,165,250,.22),0 0 8px rgba(37,99,235,.5)}

/* ── ⑰ SETTINGS & REFERRAL — premium shine ── */
.pf-av span{text-shadow:0 2px 6px rgba(0,0,0,.3)}
.ref-code-val b{text-shadow:0 1px 0 rgba(255,255,255,.6)}
.set-ic{position:relative;overflow:hidden}
.set-ic::after{content:'';position:absolute;top:0;left:0;right:0;height:46%;border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.28),transparent);pointer-events:none}
.set-item:active .set-ic{transform:scale(.92)}
.set-ic{transition:transform .2s var(--ease)}
.switch.on{box-shadow:0 4px 14px rgba(22,163,74,.4),inset 0 1.5px 3px rgba(15,23,42,.1)}

/* ── ⑱ TINY SCREENS — keep the luxury legible ── */
@media(max-width:360px){
  .splash-name{font-size:2.4rem}
  .auth-hero h1{font-size:1.95rem}
  .sec-head::after{width:46px}
}

/* ── ⑲ REDUCED MOTION — silence the new flourishes too ── */
@media(prefers-reduced-motion:reduce){
  #splash::after,.mp-progress i,.plan-card:has(.ribbon) .pc-badge{animation:none!important}
}

/* ═══════════════════════════════════════════════════════════════════
   v18.0 — AURORA LUXE IDENTITY (additive override layer)
   Deep-space indigo · electric violet · aurora cyan · champagne gold
   Floating glass dock · conic halo heroes · animated gradient buttons
   Pure CSS overrides: zero HTML/JS/class-name changes — safe drop-in.
   ═══════════════════════════════════════════════════════════════════ */

/* ── NEW BRAND TOKENS ── */
:root{
  --p1:#7C3AED; --p2:#8B5CF6; --p3:#A78BFA;
  --gold:#06B6D4; --gold-2:#67E8F9; --gold-ink:#155E75;
  --blue:#7C3AED; --blue-bg:#EDE9FE;
  --navy:#0B1026; --navy-2:#312E81;
  --grad:linear-gradient(135deg,#0B1026 0%,#312E81 34%,#6D28D9 66%,#7C3AED 86%,#0891B2 100%);
  --grad-btn:linear-gradient(135deg,#6D28D9 0%,#7C3AED 48%,#06B6D4 100%);
  --grad-gold:linear-gradient(135deg,#0E7490 0%,#06B6D4 45%,#67E8F9 100%);
  --grad-soft:linear-gradient(135deg,#F5F3FF,#ECFEFF);
  --shadow-lg:0 24px 56px rgba(124,58,237,.32);
}

/* ── AURORA CANVAS — the whole app floats on soft nebula light ── */
html{
  background:
    radial-gradient(620px 420px at 110% -60px,rgba(124,58,237,.16),transparent 62%),
    radial-gradient(560px 420px at -15% 22%,rgba(6,182,212,.14),transparent 60%),
    radial-gradient(700px 500px at 55% 118%,rgba(167,139,250,.14),transparent 62%),
    #F6F7FC;
  background-attachment:fixed;
}
body{background:transparent}
@media(min-width:560px){
  body{border-left:1px solid rgba(124,58,237,.12);border-right:1px solid rgba(124,58,237,.12);
    box-shadow:0 0 90px rgba(49,46,129,.16)}
}

/* ── MESH HERO SURFACES — nebula mesh + starlight dots ── */
.balance-hero,.wallet-hero{
  background:
    radial-gradient(1.5px 1.5px at 24px 30px,rgba(255,255,255,.5) 50%,transparent 51%),
    radial-gradient(1px 1px at 90px 84px,rgba(255,255,255,.38) 50%,transparent 51%),
    radial-gradient(1.2px 1.2px at 150px 44px,rgba(255,255,255,.42) 50%,transparent 51%),
    radial-gradient(150% 120% at 6% -10%,rgba(167,139,250,.55),transparent 55%),
    radial-gradient(130% 130% at 108% 115%,rgba(6,182,212,.55),transparent 52%),
    radial-gradient(90% 90% at 82% 12%,rgba(109,40,217,.85),transparent 62%),
    linear-gradient(150deg,#0B1026 0%,#312E81 45%,#6D28D9 82%,#7C3AED 100%);
  background-size:180px 180px,180px 180px,180px 180px,auto,auto,auto,auto;
  border:1px solid rgba(167,139,250,.35);
  box-shadow:0 26px 60px rgba(109,40,217,.42),0 4px 14px rgba(11,16,38,.14),inset 0 1px 0 rgba(255,255,255,.26)}
#app-header,.chat-head{
  background:
    radial-gradient(120% 220% at 100% -60%,rgba(6,182,212,.34),transparent 55%),
    radial-gradient(140% 200% at 0% 120%,rgba(167,139,250,.32),transparent 55%),
    linear-gradient(120deg,#0B1026 0%,#312E81 45%,#6D28D9 82%,#7C3AED 100%);
  border-bottom:1px solid rgba(167,139,250,.28);
  box-shadow:0 10px 30px rgba(109,40,217,.34)}
.auth-hero,.sup-hero,.pf-hero{
  background:
    radial-gradient(150% 130% at 8% -12%,rgba(167,139,250,.5),transparent 55%),
    radial-gradient(120% 120% at 105% 108%,rgba(6,182,212,.5),transparent 55%),
    linear-gradient(160deg,#0B1026 0%,#312E81 38%,#6D28D9 70%,#7C3AED 100%);
  box-shadow:0 18px 44px rgba(109,40,217,.36),inset 0 1px 0 rgba(255,255,255,.18)}
.reg-card,.bank-card{
  background:
    radial-gradient(140% 120% at 100% -20%,rgba(6,182,212,.32),transparent 55%),
    radial-gradient(120% 120% at -10% 120%,rgba(167,139,250,.30),transparent 55%),
    linear-gradient(145deg,#0B1026 0%,#312E81 55%,#6D28D9 100%);
  border:1px solid rgba(103,232,249,.28);
  box-shadow:0 22px 52px rgba(49,46,129,.42)}
.bank-card .bc-chip{background:linear-gradient(135deg,#FDE68A,#F59E0B 55%,#D97706);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 2px 6px rgba(0,0,0,.25)}

/* ── CONIC HALO RING on the wallet hero — signature v18 detail ── */
.wallet-hero{position:relative}
.wallet-hero::before{left:18px;right:18px;bottom:-12px;height:30px;
  background:linear-gradient(135deg,#312E81,#7C3AED);opacity:.5}

/* ── SPLASH — aurora identity ── */
#splash{
  background:
    radial-gradient(700px 420px at 50% -80px,rgba(124,58,237,.5),transparent 62%),
    radial-gradient(600px 420px at 88% 110%,rgba(6,182,212,.42),transparent 60%),
    linear-gradient(150deg,#0B1026 0%,#312E81 46%,#6D28D9 100%)}
#splash::before{background:radial-gradient(600px 340px at 50% 18%,rgba(6,182,212,.22),transparent 65%)}
#splash::after{background:radial-gradient(circle,rgba(103,232,249,.18),transparent 62%)}
.splash-name{background:linear-gradient(92deg,#FFFFFF 8%,#DDD6FE 48%,#67E8F9 96%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 8px 26px rgba(124,58,237,.45))}
.splash-tag{color:#A5F3FC}
.splash-loader i{background:linear-gradient(90deg,#67E8F9,#06B6D4,#8B5CF6);
  box-shadow:0 0 14px rgba(6,182,212,.85)}

/* ── AUTH — glowing seam + premium tabs ── */
.auth-hero h1{background:linear-gradient(95deg,#FFFFFF 15%,#DDD6FE 65%,#A5F3FC);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.auth-hero p{color:#A5F3FC}
.ah-chip svg{color:#67E8F9}
.auth-logo-ring{border-color:rgba(6,182,212,.5);
  box-shadow:0 20px 44px rgba(0,0,0,.32),inset 0 1.5px 0 rgba(255,255,255,.32),0 0 34px rgba(6,182,212,.22)}
@keyframes logoGlow{0%,100%{box-shadow:0 20px 44px rgba(0,0,0,.30),0 0 0 0 rgba(6,182,212,.30),inset 0 1.5px 0 rgba(255,255,255,.32)}
  50%{box-shadow:0 20px 44px rgba(0,0,0,.30),0 0 0 14px rgba(6,182,212,0),inset 0 1.5px 0 rgba(255,255,255,.32)}}
.auth-tab.active{color:var(--p1)}
.auth-tab-slider{box-shadow:0 6px 16px rgba(15,23,42,.14),0 0 0 1.5px rgba(124,58,237,.24),inset 0 1px 0 #fff}
.auth-how{background:var(--grad-soft);border-color:#DDD6FE;color:var(--p1)}
.auth-how svg{color:#0891B2}
.auth-secure svg{color:var(--p1)}
.su-perk{background:linear-gradient(135deg,#ECFEFF,#CFFAFE);border-color:#A5F3FC;color:#155E75}
.su-perk svg{color:#0891B2}

/* ── ANIMATED AURORA BUTTONS — gradient flows on hover ── */
.btn-primary,.btn-hero{
  background:linear-gradient(135deg,#312E81 0%,#6D28D9 30%,#7C3AED 58%,#06B6D4 100%);
  background-size:200% 200%;background-position:0% 50%;
  box-shadow:0 12px 30px rgba(124,58,237,.46),0 0 0 1px rgba(167,139,250,.38),
    inset 0 1.5px 0 rgba(255,255,255,.38),inset 0 -2.5px 0 rgba(0,0,0,.18);
  transition:transform .15s var(--ease),box-shadow .3s var(--ease),filter .2s,opacity .2s,background-position .6s var(--ease)}
.btn-primary:hover,.btn-hero:hover{background-position:100% 50%;transform:translateY(-2.5px);filter:saturate(1.1);
  box-shadow:0 18px 42px rgba(124,58,237,.55),0 0 0 1px rgba(167,139,250,.5),
    0 0 26px rgba(6,182,212,.35),inset 0 1.5px 0 rgba(255,255,255,.38)}
.btn-primary:active,.btn-hero:active{transform:translateY(.5px) scale(.97)}
.btn-soft{background:var(--blue-bg);color:var(--blue);box-shadow:inset 0 0 0 1.5px rgba(124,58,237,.18)}
.btn.loading::after{border-color:rgba(255,255,255,.35);border-top-color:#fff}

/* ── FLOATING GLASS DOCK NAV — detached, rounded, glowing ── */
:root{--nav-h:80px}
#bottom-nav{
  bottom:12px;width:calc(100% - 26px);max-width:494px;height:calc(var(--nav-h) + 0px);
  padding-bottom:0;border-radius:26px;border:1px solid rgba(124,58,237,.16);
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(246,247,252,.82));
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:0 18px 44px rgba(49,46,129,.20),inset 0 1px 0 rgba(255,255,255,.95);
  transform:translateX(-50%) translateZ(0)}
.nav-btn{padding-top:0;justify-content:center}
.nav-btn.active{color:var(--p1)}
.nav-btn.active::before{top:9px;width:48px;height:32px;
  background:linear-gradient(135deg,rgba(124,58,237,.18),rgba(6,182,212,.12));
  box-shadow:inset 0 0 0 1px rgba(124,58,237,.16),0 4px 12px rgba(124,58,237,.16)}
.nav-btn.active::after{bottom:8px;
  background:var(--grad-btn);box-shadow:0 2px 10px rgba(124,58,237,.65),0 0 8px rgba(6,182,212,.5)}
.nav-btn.active svg{filter:drop-shadow(0 4px 12px rgba(124,58,237,.5))}
.nav-btn.active span{background:linear-gradient(120deg,#6D28D9,#06B6D4);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* ── PLAN CARDS — aurora gradient border + top beam ── */
.plan-card{
  background:linear-gradient(#fff,#fff) padding-box,
    linear-gradient(140deg,rgba(124,58,237,.55),rgba(6,182,212,.18) 45%,rgba(124,58,237,.4)) border-box;
  box-shadow:0 14px 36px rgba(124,58,237,.14),0 2px 6px rgba(15,23,42,.05)}
.plan-card::before{background:var(--grad-btn);box-shadow:0 3px 12px rgba(124,58,237,.5)}
.plan-card:hover{transform:translateY(-4px);box-shadow:0 22px 50px rgba(124,58,237,.22)}
.plan-card .ribbon{background:linear-gradient(90deg,#0891B2,#67E8F9);color:#0B1026;
  box-shadow:0 4px 14px rgba(6,182,212,.45)}
.pc-name{background:linear-gradient(120deg,#0B1026 30%,#6D28D9);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.pc-cell{background:linear-gradient(180deg,#F5F3FF,#ECFEFF);border:1px solid rgba(124,58,237,.14)}
.plan-card:has(.ribbon) .pc-badge{animation:badgePulse 2.6s ease-in-out infinite}
@keyframes badgePulse{0%,100%{box-shadow:0 10px 24px rgba(124,58,237,.35),inset 0 1.5px 0 rgba(255,255,255,.55)}
  50%{box-shadow:0 10px 28px rgba(124,58,237,.55),0 0 0 7px rgba(124,58,237,.12),inset 0 1.5px 0 rgba(255,255,255,.55)}}

/* ── SECTION HEADERS — aurora titles ── */
.sec-head h3{background:linear-gradient(120deg,#0B1026 40%,#6D28D9);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.sec-head h3::before{background:var(--grad-btn);box-shadow:0 2px 8px rgba(124,58,237,.55)}
.sec-head::after{background:linear-gradient(90deg,#7C3AED,#06B6D4,transparent);
  box-shadow:0 2px 8px rgba(124,58,237,.4)}
.sec-head button{background:var(--grad-soft);border-color:rgba(124,58,237,.16);color:var(--p1)}

/* ── COUNTDOWN / WALLET DETAILS ── */
.cd-chip{background:linear-gradient(135deg,#0B1026,#312E81 55%,#6D28D9);
  box-shadow:0 8px 20px rgba(124,58,237,.38),inset 0 1px 0 rgba(255,255,255,.2)}
.cd-chip.cd-soon{background:linear-gradient(135deg,#0E7490,#06B6D4 60%,#67E8F9);
  box-shadow:0 8px 20px rgba(6,182,212,.42),inset 0 1px 0 rgba(255,255,255,.3)}
.interest-strip{background:linear-gradient(135deg,#F5F3FF,#ECFEFF);border-color:rgba(124,58,237,.18)}
.wh-up-arrow{background:rgba(103,232,249,.26);color:#67E8F9;
  filter:drop-shadow(0 0 6px rgba(103,232,249,.85))}
.wh-growth{background:rgba(6,182,212,.20);border-color:rgba(103,232,249,.45);color:#CFFAFE}
.hd-avatar{background:linear-gradient(135deg,rgba(6,182,212,.36),rgba(6,182,212,.14));
  border-color:rgba(6,182,212,.6);color:#CFFAFE}
.hd-dot{background:#67E8F9}
.mp-progress i{background:linear-gradient(90deg,#312E81,#7C3AED,#8B5CF6,#22D3EE);
  background-size:200% 100%;animation:mpFlow 3s linear infinite;
  box-shadow:0 0 12px rgba(124,58,237,.55)}
.spinner,.lo-ring{border-color:rgba(124,58,237,.14);border-top-color:var(--p1)}
.lo-ring{border-right-color:#06B6D4}

/* ── QUICK ACTIONS — new jewel hues ── */
.qi-1{background:linear-gradient(135deg,#059669,#34D399)}
.qi-2{background:linear-gradient(135deg,#6D28D9,#A78BFA)}
.qi-3{background:linear-gradient(135deg,#0891B2,#67E8F9)}
.qi-4{background:linear-gradient(135deg,#B45309,#FBBF24)}
.trust-ic,.about-ic,.dest-ic,.be-ic,.ce-logo{color:var(--p1);
  border:1px solid rgba(124,58,237,.16);background:var(--grad-soft);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.9),0 6px 14px rgba(124,58,237,.14)}

/* ── CHAT — violet/cyan conversation ── */
.chat-room{background:radial-gradient(900px 380px at 50% -120px,rgba(124,58,237,.13),transparent 60%),#F6F7FC}
.chat-msg.mine{
  background:
    radial-gradient(140% 160% at 100% 0%,rgba(103,232,249,.4),transparent 55%),
    linear-gradient(135deg,#312E81,#6D28D9 55%,#7C3AED);
  box-shadow:0 8px 20px rgba(124,58,237,.34),inset 0 1px 0 rgba(255,255,255,.28)}
.chat-send{background:linear-gradient(135deg,#6D28D9,#7C3AED 55%,#06B6D4);
  box-shadow:0 8px 18px rgba(124,58,237,.42),inset 0 1.5px 0 rgba(255,255,255,.32)}
.chat-send:hover{box-shadow:0 10px 22px rgba(124,58,237,.5),0 0 20px rgba(6,182,212,.4)}
.chat-input:focus{border-color:var(--p2);box-shadow:0 0 0 4px rgba(124,58,237,.14)}
.chat-compose-inner:focus-within{border-color:rgba(124,58,237,.38);
  box-shadow:0 14px 34px rgba(15,23,42,.13),0 0 0 4px rgba(124,58,237,.12)}
.chat-attach{color:var(--p1)}
.cq-chip{border-color:rgba(124,58,237,.3);color:var(--p1);
  box-shadow:0 4px 12px rgba(124,58,237,.14),inset 0 1px 0 #fff}
.cq-chip.cq-more{background:var(--grad-btn);color:#fff;border-color:transparent}
.cq-chip:hover{background:var(--grad-soft);border-color:rgba(124,58,237,.5)}
.qr-ic{background:var(--grad-btn);box-shadow:0 5px 12px rgba(124,58,237,.32),inset 0 1px 0 rgba(255,255,255,.3)}
.sup-cat.on{background:var(--grad-btn);box-shadow:0 8px 18px rgba(124,58,237,.42),inset 0 1px 0 rgba(255,255,255,.3)}
.faq-tag{color:var(--p1);background:var(--grad-soft)}
.faq-item.open .faq-q{color:var(--p1)}
.sup-hero-ic{color:#67E8F9;border-color:rgba(6,182,212,.42);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.3),0 8px 20px rgba(0,0,0,.25),0 0 18px rgba(6,182,212,.28)}
.sup-start svg{color:#67E8F9}
.sup-badge{background:rgba(6,182,212,.18);color:#CFFAFE;border-color:rgba(6,182,212,.45);
  box-shadow:0 0 14px rgba(6,182,212,.3)}
.sup-badge svg{color:#67E8F9}
#ch-status .typing-txt{color:#67E8F9}

/* ── SETTINGS & REFERRAL — champagne-gold accent, cyan code ── */
.pf-av{background:linear-gradient(135deg,rgba(6,182,212,.42),rgba(6,182,212,.15));
  border-color:rgba(6,182,212,.62)}
.pf-av span{color:#CFFAFE}
.ref-card::before{background:linear-gradient(90deg,#F59E0B,#FDE68A,#F59E0B);
  box-shadow:0 3px 10px rgba(245,158,11,.5)}
.ref-ic{background:linear-gradient(135deg,#D97706,#FBBF24);
  box-shadow:0 8px 18px rgba(245,158,11,.38),inset 0 1.5px 0 rgba(255,255,255,.45)}
.ref-code{background:linear-gradient(135deg,#FFFBEB,#FEF3C7);border-color:#FCD34D}
.ref-code-val small{color:#92400E}
.ref-code-val b{color:#B45309}
.ref-btn{color:#92400E;border-color:#FCD34D;box-shadow:0 3px 8px rgba(245,158,11,.14)}
.ref-btn-gold{background:linear-gradient(135deg,#D97706,#FBBF24);color:#fff;border-color:transparent;
  box-shadow:0 6px 14px rgba(245,158,11,.38)}
.ref-card::after{background:linear-gradient(90deg,transparent,rgba(245,158,11,.14),transparent)}
.profile-av{background:var(--grad-btn);box-shadow:0 10px 22px rgba(124,58,237,.4)}

/* ── INPUTS / SHEETS / MISC — violet focus bloom ── */
.field input:focus{border-color:var(--p2);
  box-shadow:0 0 0 4px rgba(124,58,237,.16),0 6px 18px rgba(124,58,237,.12)}
.fwrap:focus-within .f-ic{color:var(--p1);filter:drop-shadow(0 2px 6px rgba(124,58,237,.45))}
.pw-eye:active{color:var(--p1)}
.auth-link{color:var(--p1)}
.auth-alt button{color:var(--p1)}
.upi-note{background:var(--blue-bg);color:var(--blue)}
.upi-id-pill{border-color:var(--p2);color:var(--p1)}
.amount-quick button{color:var(--p1)}
.amount-quick button:active{background:var(--grad-soft)}
.paym.sel,.dest.sel{border-color:var(--p2);background:var(--grad-soft);
  box-shadow:0 8px 20px rgba(124,58,237,.18)}
.cp-btn{background:var(--grad-soft);color:var(--p1);border-color:rgba(124,58,237,.2)}
.cp-btn-pill{background:rgba(124,58,237,.1)}
.dest-ic{background:var(--blue-bg);color:var(--blue)}
.file-drop{color:var(--p1)}
.file-drop:active,.file-drop:hover{border-color:var(--p2)}
.empty svg{color:#DDD6FE}
::selection{background:rgba(124,58,237,.26);color:#0B1026}
:focus-visible{outline:2.5px solid var(--p2)}
.sheet-title{background:linear-gradient(120deg,#0B1026 35%,#6D28D9 90%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.sheet-handle{background:linear-gradient(90deg,#DDD6FE,#A5F3FC,#DDD6FE)}
.ref-box b{color:var(--p1)}
.skel{background:#ECE9F8}

/* ── SMALL SCREENS — dock stays tidy ── */
@media(max-width:360px){
  #bottom-nav{width:calc(100% - 18px);bottom:9px;border-radius:22px}
  .nav-btn.active::before{width:42px;height:29px}
}
@media(prefers-reduced-motion:reduce){
  .btn-primary,.btn-hero{transition:transform .15s var(--ease),box-shadow .3s var(--ease)}
}

/* ═══════════════════════════════════════════════════════════════════
   v20 ULTIMATE HEADER + ULTIMATE AUTH — signature layer (drop-in,
   class contract unchanged; only adds .hd-aurora/.ah-stars/.ah-beam/
   .ah-marquee atoms rendered by renderHeader()/index.html)
   ═══════════════════════════════════════════════════════════════════ */

/* ── ULTIMATE HEADER — aurora cosmos with twinkling starfield ── */
#app-header{overflow:hidden;isolation:isolate;
  background:
    radial-gradient(130% 240% at 108% -70%,rgba(6,182,212,.42),transparent 55%),
    radial-gradient(150% 220% at -8% 130%,rgba(167,139,250,.40),transparent 56%),
    radial-gradient(90% 160% at 52% -80%,rgba(124,58,237,.34),transparent 60%),
    linear-gradient(120deg,#0B1026 0%,#1E1B4B 30%,#312E81 55%,#6D28D9 84%,#7C3AED 100%);
  border-bottom:1px solid rgba(167,139,250,.32);
  box-shadow:0 14px 36px rgba(76,29,149,.42),0 2px 8px rgba(6,182,212,.18)}
.hd-aurora{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.hd-left,.hd-right{position:relative;z-index:1}
/* twinkling stars */
.hd-star{position:absolute;border-radius:50%;background:#fff;
  box-shadow:0 0 6px rgba(255,255,255,.9),0 0 14px rgba(103,232,249,.7);
  animation:hdTwinkle 3s ease-in-out infinite}
.hd-star-1{width:2.5px;height:2.5px;top:18%;left:34%;animation-delay:0s}
.hd-star-2{width:2px;height:2px;top:62%;left:56%;animation-delay:.7s}
.hd-star-3{width:3px;height:3px;top:30%;left:72%;animation-delay:1.4s}
.hd-star-4{width:2px;height:2px;top:70%;left:82%;animation-delay:2s}
.hd-star-5{width:2.5px;height:2.5px;top:14%;left:88%;animation-delay:2.6s}
@keyframes hdTwinkle{0%,100%{opacity:.15;transform:scale(.7)}50%{opacity:1;transform:scale(1.25)}}
/* slow aurora beam sweeping across the header */
.hd-beam{position:absolute;top:-60%;left:-40%;width:36%;height:220%;transform:rotate(18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),rgba(103,232,249,.12),transparent);
  animation:hdBeam 7s var(--ease) infinite}
@keyframes hdBeam{0%{left:-40%}60%,100%{left:130%}}
/* avatar — rotating conic halo ring + online status */
.hd-avatar-wrap{position:relative;width:42px;height:42px;flex-shrink:0}
.hd-avatar-wrap::before{content:'';position:absolute;inset:-3.5px;border-radius:50%;
  background:conic-gradient(from 0deg,#67E8F9,#8B5CF6,#C4B5FD,#22D3EE,#67E8F9);
  animation:hdRing 3.6s linear infinite;
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2.5px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2.5px));
  filter:drop-shadow(0 0 6px rgba(103,232,249,.55))}
@keyframes hdRing{to{transform:rotate(360deg)}}
.hd-avatar{width:100%;height:100%;border:none;
  background:radial-gradient(120% 120% at 30% 20%,rgba(103,232,249,.5),rgba(30,27,75,.9) 70%);
  color:#ECFEFF;box-shadow:inset 0 1.5px 0 rgba(255,255,255,.35),0 4px 12px rgba(11,16,38,.4)}
.hd-online{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;
  background:#34D399;border:2px solid #1E1B4B;
  box-shadow:0 0 8px rgba(52,211,153,.9);animation:hdOnline 2.2s ease-in-out infinite}
@keyframes hdOnline{0%,100%{box-shadow:0 0 4px rgba(52,211,153,.7)}50%{box-shadow:0 0 12px rgba(52,211,153,1)}}
/* title — aurora gradient name */
.hd-title small{opacity:.95;font-weight:700;color:#C7D2FE;letter-spacing:.35px}
.hd-title b{background:linear-gradient(95deg,#FFFFFF 10%,#DDD6FE 55%,#A5F3FC 95%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 8px rgba(124,58,237,.5))}
/* bell — glass tile with breathing ripple ring */
.hd-icon{background:rgba(255,255,255,.13);border:1px solid rgba(196,181,253,.35);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.28),0 6px 16px rgba(11,16,38,.28);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.hd-icon:active{background:rgba(255,255,255,.24);transform:scale(.94)}
.hd-ring{position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
  border:1.5px solid rgba(103,232,249,.65);animation:hdRipple 2.6s ease-out infinite}
@keyframes hdRipple{0%{transform:scale(1);opacity:.85}70%,100%{transform:scale(1.55);opacity:0}}
.hd-dot{background:#F472B6;border-color:#fff;
  box-shadow:0 0 8px rgba(244,114,182,.95)}

/* ── ULTIMATE AUTH — aurora stage + glass premium card ── */
.auth-hero{
  background:
    radial-gradient(160% 140% at 6% -14%,rgba(167,139,250,.55),transparent 55%),
    radial-gradient(130% 130% at 106% 110%,rgba(6,182,212,.5),transparent 54%),
    radial-gradient(80% 80% at 78% 8%,rgba(219,39,119,.22),transparent 60%),
    linear-gradient(160deg,#0B1026 0%,#1E1B4B 32%,#4C1D95 62%,#6D28D9 84%,#0891B2 100%);
  background-size:200% 200%,200% 200%,auto,auto;
  animation:ahAurora 12s ease-in-out infinite}
@keyframes ahAurora{0%,100%{background-position:0% 0%,100% 100%,0 0,0 0}
  50%{background-position:70% 40%,30% 60%,0 0,0 0}}
/* starfield */
.ah-stars{position:absolute;inset:0;pointer-events:none;z-index:0}
.ah-stars i{position:absolute;border-radius:50%;background:#fff;
  box-shadow:0 0 6px rgba(255,255,255,.85),0 0 14px rgba(103,232,249,.6);
  animation:hdTwinkle 3.4s ease-in-out infinite}
.ah-stars i:nth-child(1){width:2.5px;height:2.5px;top:12%;left:14%}
.ah-stars i:nth-child(2){width:2px;height:2px;top:22%;left:78%;animation-delay:.5s}
.ah-stars i:nth-child(3){width:3px;height:3px;top:8%;left:52%;animation-delay:1s}
.ah-stars i:nth-child(4){width:2px;height:2px;top:40%;left:88%;animation-delay:1.5s}
.ah-stars i:nth-child(5){width:2.5px;height:2.5px;top:34%;left:6%;animation-delay:2s}
.ah-stars i:nth-child(6){width:2px;height:2px;top:16%;left:36%;animation-delay:2.5s}
.ah-stars i:nth-child(7){width:2px;height:2px;top:48%;left:64%;animation-delay:3s}
/* drifting light beams */
.ah-beam{position:absolute;top:-50%;width:24%;height:200%;pointer-events:none;z-index:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.10),transparent);filter:blur(4px)}
.ah-beam-1{left:-30%;transform:rotate(16deg);animation:ahBeam 9s var(--ease) infinite}
.ah-beam-2{left:60%;transform:rotate(-14deg);animation:ahBeam 12s 2.5s var(--ease) infinite;
  background:linear-gradient(90deg,transparent,rgba(103,232,249,.10),transparent)}
@keyframes ahBeam{0%{left:-35%}65%,100%{left:120%}}
/* logo — halo ring with conic glow */
.auth-logo-ring{position:relative;border-color:rgba(103,232,249,.55);
  background:linear-gradient(145deg,rgba(255,255,255,.16),rgba(255,255,255,.06))}
.auth-logo-ring::before{content:'';position:absolute;inset:-6px;border-radius:inherit;
  background:conic-gradient(from 0deg,transparent 10%,rgba(103,232,249,.75) 38%,transparent 60%,rgba(167,139,250,.6) 82%,transparent);
  animation:hdRing 4.5s linear infinite;z-index:-1;filter:blur(1px)}
/* title — shimmer sweep */
.auth-hero h1{background:linear-gradient(95deg,#FFFFFF 8%,#DDD6FE 34%,#67E8F9 52%,#DDD6FE 68%,#FFFFFF 92%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:ahShimmer 4.2s ease-in-out infinite;
  filter:drop-shadow(0 6px 22px rgba(124,58,237,.55))}
@keyframes ahShimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
/* trust chips float gently */
.ah-chip{animation:ahChipFloat 4.6s ease-in-out infinite}
.ah-chip:nth-child(2){animation-delay:1.1s}
.ah-chip:nth-child(3){animation-delay:2.2s}
@keyframes ahChipFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
/* scrolling trust marquee at hero base */
.ah-marquee{position:absolute;left:0;right:0;bottom:14px;overflow:hidden;z-index:1;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.ah-marquee-track{display:flex;gap:26px;width:max-content;animation:ahMarquee 22s linear infinite}
.ah-marquee-track span{display:inline-flex;align-items:center;gap:26px;
  font-size:.58rem;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;
  color:rgba(199,210,254,.85);white-space:nowrap}
.ah-marquee-track span::after{content:'✦';color:#67E8F9;font-size:.5rem}
@keyframes ahMarquee{to{transform:translateX(-50%)}}
/* glass premium card */
.auth-card{background:rgba(255,255,255,.86);
  backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5);
  border-top:1.5px solid rgba(255,255,255,.85);
  box-shadow:0 -22px 60px rgba(49,29,100,.34),inset 0 1.5px 0 rgba(255,255,255,.95)}
.auth-card::before{background:linear-gradient(90deg,#C4B5FD,#67E8F9,#C4B5FD);
  box-shadow:0 2px 8px rgba(124,58,237,.35)}
/* inputs — aurora focus bloom */
.field input{background:rgba(248,250,252,.75)}
.field input:focus{border-color:#8B5CF6;background:#fff;
  box-shadow:0 0 0 4px rgba(139,92,246,.16),0 0 24px rgba(103,232,249,.22),0 6px 18px rgba(124,58,237,.12)}
/* hero button — aurora flow + neon aura */
.btn-hero{background:linear-gradient(135deg,#312E81 0%,#6D28D9 26%,#7C3AED 50%,#06B6D4 78%,#67E8F9 100%);
  background-size:280% 280%;
  box-shadow:0 14px 34px rgba(124,58,237,.5),0 0 22px rgba(6,182,212,.28),
    inset 0 1.5px 0 rgba(255,255,255,.4),inset 0 -2.5px 0 rgba(0,0,0,.16);
  animation:btnAurora 6s ease-in-out infinite}
@keyframes btnAurora{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.btn-hero:hover{animation-play-state:paused;background-position:100% 50%;
  box-shadow:0 20px 44px rgba(124,58,237,.6),0 0 34px rgba(6,182,212,.45),inset 0 1.5px 0 rgba(255,255,255,.4)}

@media(prefers-reduced-motion:reduce){
  .hd-beam,.ah-beam,.ah-marquee-track,.auth-hero,.auth-hero h1,.btn-hero,
  .hd-avatar-wrap::before,.auth-logo-ring::before,.hd-ring{animation:none}
}

/* ═══════════════════════════════════════════════════════════
   v21 — ADMIN WELCOME POPUP (appContent/popup) + PREMIUM PLANS
   ═══════════════════════════════════════════════════════════ */

/* ── Admin popup overlay ── */
#gx-popup{position:fixed;inset:0;z-index:210;display:flex;align-items:center;justify-content:center;padding:24px}
#gx-popup[hidden]{display:none}
.gxp-back{position:absolute;inset:0;background:rgba(11,16,38,.66);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  opacity:0;transition:opacity .35s var(--ease)}
#gx-popup.show .gxp-back{opacity:1}
.gxp-card{position:relative;width:100%;max-width:352px;max-height:calc(100dvh - 64px);overflow-y:auto;
  background:linear-gradient(#fff,#fff) padding-box,
    linear-gradient(150deg,rgba(124,58,237,.7),rgba(6,182,212,.35) 45%,rgba(124,58,237,.5)) border-box;
  border:1.5px solid transparent;border-radius:30px;padding:30px 22px 24px;text-align:center;
  box-shadow:0 34px 80px rgba(49,29,100,.45),0 0 60px rgba(124,58,237,.18);
  transform:translateY(26px) scale(.9);opacity:0;
  transition:transform .5s cubic-bezier(.19,1.3,.4,1),opacity .3s var(--ease)}
#gx-popup.show .gxp-card{transform:translateY(0) scale(1);opacity:1}
.gxp-glow{position:absolute;border-radius:50%;filter:blur(46px);pointer-events:none;z-index:0}
.gxp-glow-1{width:170px;height:170px;top:-70px;right:-50px;background:rgba(124,58,237,.22);
  animation:gxpFloat 5s ease-in-out infinite}
.gxp-glow-2{width:140px;height:140px;bottom:-56px;left:-42px;background:rgba(6,182,212,.2);
  animation:gxpFloat 5s 1.4s ease-in-out infinite}
@keyframes gxpFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.gxp-x{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--sub);
  background:rgba(15,23,42,.06);transition:.2s var(--ease);z-index:2}
.gxp-x:hover{background:rgba(15,23,42,.12);color:var(--ink);transform:rotate(90deg)}
.gxp-x svg{width:15px;height:15px}
.gxp-ic{position:relative;width:74px;height:74px;margin:0 auto 16px;border-radius:23px;
  background:linear-gradient(135deg,#312E81,#6D28D9 55%,#06B6D4);
  display:flex;align-items:center;justify-content:center;color:#fff;
  box-shadow:0 16px 34px rgba(124,58,237,.42),inset 0 2px 0 rgba(255,255,255,.35);
  animation:gxpPop .7s .12s cubic-bezier(.19,1.5,.4,1) both}
.gxp-ic::after{content:'';position:absolute;inset:-6px;border-radius:28px;
  border:2px solid rgba(124,58,237,.3);animation:gxpRing 2.4s ease-out infinite}
@keyframes gxpPop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes gxpRing{0%{transform:scale(.85);opacity:1}100%{transform:scale(1.3);opacity:0}}
.gxp-ic svg{width:38px;height:38px}
.gxp-title{font-size:1.32rem;font-weight:800;letter-spacing:-.01em;line-height:1.25;position:relative;
  background:linear-gradient(120deg,#0B1026 30%,#6D28D9);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.gxp-body{margin:10px 2px 0;font-size:.88rem;line-height:1.65;color:var(--sub);font-weight:500;
  white-space:pre-line;position:relative}
.gxp-btns{display:flex;flex-direction:column;gap:10px;margin-top:20px;position:relative}
.gxp-btn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;
  padding:13px 18px;border-radius:16px;font-weight:800;font-size:.9rem;letter-spacing:.1px;
  transition:transform .16s var(--ease),box-shadow .3s var(--ease),filter .2s;
  font-family:var(--font-d)}
.gxp-btn svg{width:17px;height:17px}
.gxp-btn:active{transform:scale(.96)}
.gxp-btn-primary{background:linear-gradient(135deg,#312E81 0%,#6D28D9 30%,#7C3AED 55%,#06B6D4 90%);
  background-size:220% 220%;color:#fff;
  box-shadow:0 12px 28px rgba(124,58,237,.45),0 0 18px rgba(6,182,212,.24),
    inset 0 1.5px 0 rgba(255,255,255,.4);
  animation:btnAurora 6s ease-in-out infinite}
.gxp-btn-primary:hover{transform:translateY(-2px);
  box-shadow:0 18px 38px rgba(124,58,237,.55),0 0 26px rgba(6,182,212,.4),inset 0 1.5px 0 rgba(255,255,255,.4)}
.gxp-btn-soft{background:var(--grad-soft);color:var(--p1);
  box-shadow:inset 0 0 0 1.5px rgba(124,58,237,.22),0 4px 12px rgba(124,58,237,.12)}
.gxp-btn-soft:hover{box-shadow:inset 0 0 0 1.5px rgba(124,58,237,.45),0 8px 20px rgba(124,58,237,.2);
  transform:translateY(-2px)}

/* ── Premium PLANS layout — hero banner, staggered entrance, live chips ── */
#view-plans{perspective:900px}
.plans-hero{position:relative;overflow:hidden;border-radius:22px;padding:15px 16px 13px;margin-bottom:14px;
  background:linear-gradient(135deg,#0B1026 0%,#312E81 40%,#6D28D9 72%,#0891B2 110%);
  color:#fff;box-shadow:0 12px 28px rgba(49,29,100,.3),inset 0 1.5px 0 rgba(255,255,255,.22)}
.plans-hero::before{content:'';position:absolute;width:150px;height:150px;border-radius:50%;
  top:-64px;right:-46px;background:radial-gradient(circle,rgba(103,232,249,.35),transparent 65%);
  animation:gxpFloat 6s ease-in-out infinite}
.plans-hero::after{content:'';position:absolute;top:0;left:-80%;width:50%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.14),transparent);
  transform:skewX(-18deg);animation:phShine 4.5s ease-in-out infinite}
@keyframes phShine{0%,55%{left:-80%}100%{left:160%}}
.plans-hero .ph-tag{display:inline-flex;align-items:center;gap:5px;font-size:.55rem;font-weight:800;
  letter-spacing:1.4px;text-transform:uppercase;color:#0B1026;
  background:linear-gradient(90deg,#5EEAD4,#67E8F9);border-radius:99px;padding:4px 10px;
  box-shadow:0 4px 14px rgba(6,182,212,.45)}
.plans-hero .ph-tag svg{width:11px;height:11px}
.plans-hero h2{font-size:1.16rem;font-weight:800;line-height:1.25;margin:9px 0 5px;letter-spacing:-.01em}
.plans-hero p{font-size:.72rem;line-height:1.5;opacity:.85;font-weight:500;max-width:280px}
.plans-hero .ph-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.plans-hero .ph-chip{display:inline-flex;align-items:center;gap:5px;font-size:.6rem;font-weight:800;
  color:#E0F2FE;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);
  border-radius:99px;padding:4px 9px;backdrop-filter:blur(6px)}
.plans-hero .ph-chip svg{width:11px;height:11px;color:#67E8F9}
#plans-list{display:grid;gap:16px}
.plan-card{animation:pcIn .6s cubic-bezier(.2,1,.3,1) both}
.plan-card:nth-child(2){animation-delay:.08s}
.plan-card:nth-child(3){animation-delay:.16s}
.plan-card:nth-child(4){animation-delay:.24s}
.plan-card:nth-child(n+5){animation-delay:.3s}
@keyframes pcIn{from{opacity:0;transform:translateY(22px) scale(.97)}to{opacity:1;transform:none}}
.plan-card:active{transform:scale(.985)}
.pc-badge{position:relative;overflow:hidden;animation:pcBadgeBob 3.4s ease-in-out infinite}
.pc-badge::after{content:'';position:absolute;top:-60%;left:-90%;width:55%;height:220%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:rotate(20deg);animation:pcBadgeShine 3.4s ease-in-out infinite}
@keyframes pcBadgeBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3.5px)}}
@keyframes pcBadgeShine{0%,60%{left:-90%}100%{left:150%}}
.pc-name{font-size:1.06rem;letter-spacing:-.01em}
.pc-row{border-radius:18px;gap:7px;
  background:linear-gradient(135deg,rgba(124,58,237,.05),rgba(6,182,212,.05));
  padding:7px}
.pc-cell{transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.pc-cell:hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(124,58,237,.14)}
.pc-cell b{font-family:var(--font-num)}
.pc-live{display:inline-flex;align-items:center;gap:5px;margin-bottom:10px;
  font-size:.58rem;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:#047857;
  background:var(--green-bg);border:1px solid rgba(22,163,74,.22);border-radius:99px;padding:4px 10px}
.pc-live i{width:6px;height:6px;border-radius:50%;background:#16A34A;
  box-shadow:0 0 0 0 rgba(22,163,74,.5);animation:pcLiveDot 1.6s ease-out infinite}
@keyframes pcLiveDot{0%{box-shadow:0 0 0 0 rgba(22,163,74,.45)}100%{box-shadow:0 0 0 7px rgba(22,163,74,0)}}
.pc-yield{display:flex;align-items:baseline;gap:7px;margin:2px 0 12px}
.pc-yield b{font-size:1.5rem;font-weight:800;font-family:var(--font-num);
  background:linear-gradient(120deg,#15803D,#10B981);-webkit-background-clip:text;
  background-clip:text;-webkit-text-fill-color:transparent}
.pc-yield span{font-size:.68rem;font-weight:700;color:var(--sub)}
.pc-perk{transition:transform .18s var(--ease)}
.pc-perk:hover{transform:translateX(3px);color:var(--ink)}
.plan-card .btn-primary{position:relative;overflow:hidden;letter-spacing:.2px}
.plan-card .btn-primary::after{content:'';position:absolute;top:0;left:-80%;width:50%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-18deg);transition:left .5s var(--ease)}
.plan-card .btn-primary:hover::after{left:130%}

/* ── My Active Plans cards — glass polish ── */
.inv-card{animation:pcIn .5s cubic-bezier(.2,1,.3,1) both}
.inv-card:nth-child(2){animation-delay:.07s}
.inv-card:nth-child(3){animation-delay:.14s}
.inv-card:nth-child(n+4){animation-delay:.2s}
.inv-card .chip{animation:chipGlow 2.8s ease-in-out infinite}
@keyframes chipGlow{0%,100%{filter:brightness(1)}50%{filter:brightness(1.12)}}

@media(prefers-reduced-motion:reduce){
  .plans-hero::before,.plans-hero::after,.pc-badge,.pc-badge::after,.pc-live i,
  .gxp-ic::after,.gxp-glow,.plan-card,.inv-card,.inv-card .chip,.gxp-btn-primary{animation:none!important}
}

/* ═══════════════════════════════════════════════════════════
   v22.0 — PLAN CARDS 2.0 + HOME GROWTH CHART (additive layer)
   Orb-lit plan cards · rotating conic border on popular ·
   daily-earn pill · glowing CTA · 1-year comparison chart
   ═══════════════════════════════════════════════════════════ */

/* ── PLAN CARD 2.0 — luminous aura, deeper luxury ── */
.plan-card{padding:22px 20px 20px;border-radius:30px;overflow:hidden;
  background:linear-gradient(160deg,#FFFFFF 30%,#FBFAFF 100%) padding-box,
  linear-gradient(140deg,rgba(124,58,237,.65),rgba(6,182,212,.25) 45%,rgba(167,139,250,.55)) border-box;
  box-shadow:0 18px 44px rgba(124,58,237,.16),0 2px 8px rgba(15,23,42,.05),inset 0 1px 0 #fff}
.pc-orb{position:absolute;border-radius:50%;pointer-events:none;z-index:0}
.pc-orb-a{width:150px;height:150px;top:-70px;right:-46px;
  background:radial-gradient(circle,rgba(124,58,237,.14),transparent 68%);animation:gxpFloat 6s ease-in-out infinite}
.pc-orb-b{width:110px;height:110px;bottom:-50px;left:-30px;
  background:radial-gradient(circle,rgba(6,182,212,.14),transparent 68%);animation:gxpFloat 7s 1.2s ease-in-out infinite reverse}
.plan-card>.pc-live,.plan-card>.pc-head,.plan-card>.pc-yield,.plan-card>.pc-daily,
.plan-card>.pc-row,.plan-card>.pc-perks,.plan-card>.btn{position:relative;z-index:1}

/* popular plan — rotating champagne/aurora conic border */
@property --pa{syntax:'<angle>';initial-value:0deg;inherits:false}
.plan-card.is-popular{
  background:linear-gradient(160deg,#FFFFFF 22%,#FFFDF4 100%) padding-box,
  conic-gradient(from var(--pa),#F59E0B,#FDE68A,#F59E0B 30%,#7C3AED 55%,#06B6D4 78%,#F59E0B) border-box;
  box-shadow:0 22px 52px rgba(245,158,11,.18),0 14px 36px rgba(124,58,237,.16),inset 0 1px 0 #fff;
  animation:pcIn .6s cubic-bezier(.2,1,.3,1) both,paSpin 5.5s linear infinite}
@keyframes paSpin{to{--pa:360deg}}
.plan-card .ribbon{background:linear-gradient(90deg,#D97706,#FBBF24 55%,#FDE68A);color:#451A03;
  font-size:.56rem;letter-spacing:1.5px;padding:5px 40px;top:16px;
  box-shadow:0 5px 16px rgba(245,158,11,.5),inset 0 1px 0 rgba(255,255,255,.5)}

/* badge — halo ring + deeper jewel shadow */
.pc-badge{border-radius:17px;
  box-shadow:0 12px 26px rgba(15,23,42,.28),0 0 0 4px rgba(255,255,255,.92),
    0 0 0 5.5px rgba(124,58,237,.16),inset 0 1.5px 0 rgba(255,255,255,.5)!important}

/* yield headline — bigger, glowing */
.pc-yield b{font-size:1.72rem;letter-spacing:-.5px;
  filter:drop-shadow(0 3px 10px rgba(16,185,129,.32))}
.pc-yield span{font-size:.7rem}

/* NEW — per-day earning pill (dark aurora chip under the yield) */
.pc-daily{display:inline-flex;align-items:center;gap:8px;margin:-4px 0 13px;padding:7px 13px;border-radius:12px;
  background:linear-gradient(135deg,#0B1026,#312E81 60%,#6D28D9);color:#fff;
  font-size:.72rem;font-weight:700;letter-spacing:.15px;
  box-shadow:0 8px 18px rgba(49,29,100,.35),inset 0 1px 0 rgba(255,255,255,.22)}
.pc-daily svg{width:14px;height:14px;color:#67E8F9;flex-shrink:0}
.pc-daily b{color:#FDE68A;font-family:var(--font-num);font-weight:800}

/* stat cells — aurora tint, press feedback */
.pc-cell{background:linear-gradient(180deg,#F5F3FF,#ECFEFF);border:1px solid rgba(124,58,237,.15);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85)}
.pc-cell:active{transform:scale(.95)}
.pc-cell b{letter-spacing:-.2px}

/* perk check — gradient ring chip */
.pc-perk svg{background:linear-gradient(135deg,#ECFDF5,#D1FAE5)!important;
  box-shadow:0 3px 8px rgba(22,163,74,.18),inset 0 1px 0 rgba(255,255,255,.8)}

/* CTA — constant aurora sheen sweep, no hover needed */
.plan-card .btn-primary{margin-top:2px;
  box-shadow:0 14px 30px rgba(124,58,237,.45),0 0 20px rgba(6,182,212,.22),
    inset 0 1.5px 0 rgba(255,255,255,.35),inset 0 -2.5px 0 rgba(0,0,0,.16)}
.plan-card .btn-primary::after{animation:planCtaSheen 3.4s var(--ease) infinite}
@keyframes planCtaSheen{0%,55%{left:-80%}100%{left:135%}}
.plan-card .btn-primary svg{width:15px;height:15px;filter:drop-shadow(0 0 5px rgba(103,232,249,.8))}

/* ── HOME GROWTH CHART CARD ── */
.gx-chart-card{position:relative;overflow:hidden;margin-bottom:14px;padding:18px 16px 14px;
  border-radius:26px;border:1px solid transparent;
  background:linear-gradient(170deg,#FFFFFF 25%,#F8F7FF 100%) padding-box,
  linear-gradient(140deg,rgba(124,58,237,.55),rgba(6,182,212,.2) 50%,rgba(124,58,237,.4)) border-box;
  box-shadow:0 14px 36px rgba(124,58,237,.13),inset 0 1px 0 #fff}
.gx-chart-card::before{content:'';position:absolute;top:0;left:24px;right:24px;height:4px;
  border-radius:0 0 6px 6px;background:var(--grad-btn);box-shadow:0 3px 10px rgba(124,58,237,.45)}
.gx-chart-head{display:flex;align-items:center;gap:11px;margin-bottom:10px;position:relative;z-index:1}
.gx-chart-ic{width:42px;height:42px;border-radius:14px;flex-shrink:0;color:#fff;
  background:linear-gradient(135deg,#6D28D9,#7C3AED 55%,#06B6D4);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 22px rgba(124,58,237,.4),inset 0 1.5px 0 rgba(255,255,255,.4)}
.gx-chart-ic svg{width:21px;height:21px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.25))}
.gx-chart-head b{font-size:.94rem;font-weight:800;display:block;letter-spacing:-.2px;
  background:linear-gradient(120deg,#0B1026 40%,#6D28D9);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.gx-chart-head span{font-size:.66rem;color:var(--sub);font-weight:600;display:block;margin-top:1px}
.gx-chart-wrap{height:188px;margin:2px -2px 4px;position:relative;z-index:1}
#gx-chart{width:100%;height:100%;display:block}
.gx-chart-legend{display:flex;gap:14px;justify-content:center;margin:6px 0 10px;flex-wrap:wrap;position:relative;z-index:1}
.gx-lg{display:inline-flex;align-items:center;gap:7px;font-size:.64rem;font-weight:800;
  color:var(--sub);letter-spacing:.2px}
.gx-lg i{width:16px;height:4px;border-radius:99px;flex-shrink:0}
.gx-lg-godx i{background:linear-gradient(90deg,#7C3AED,#06B6D4);box-shadow:0 0 8px rgba(124,58,237,.5)}
.gx-lg-oth i{background:repeating-linear-gradient(90deg,#94A3B8 0 4px,transparent 4px 7px);height:2.5px}
.gx-chart-win{display:flex;align-items:center;gap:9px;border-radius:14px;padding:10px 13px;
  background:linear-gradient(135deg,#ECFDF5,#F0FDFA);border:1px solid #A7F3D0;
  font-size:.74rem;font-weight:600;color:#065F46;line-height:1.45;position:relative;z-index:1;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85)}
.gx-chart-win svg{width:17px;height:17px;color:#059669;flex-shrink:0}
.gx-chart-win b{font-weight:800;color:#047857;font-family:var(--font-num)}
.gx-chart-note{margin:9px 2px 0;font-size:.58rem;color:#94A3B8;line-height:1.55;font-weight:600;position:relative;z-index:1}

@media(max-width:360px){
  .gx-chart-wrap{height:170px}
  .pc-yield b{font-size:1.5rem}
  .pc-daily{font-size:.68rem}
}
@media(prefers-reduced-motion:reduce){
  .plan-card.is-popular{animation:pcIn .6s cubic-bezier(.2,1,.3,1) both}
  .plan-card .btn-primary::after,.pc-orb{animation:none!important}
}

/* ═══════════════════════════════════════════════════════════════════
   v23.0 — SILKY PERFORMANCE LAYER (additive, drop-in, visual parity)
   Root causes fixed here (all measured jank sources):
   ① Infinite keyframe loops that animated `left` → forced a full
     LAYOUT + repaint every frame (hd-beam, ah-beam, cdSheen, sheens,
     paSpin box-shadow, chipGlow filter). Replaced with transform/opacity
     only — those run on the compositor thread and never block scroll.
   ② background-attachment:fixed + huge multi-stop radial gradients on
     <html> repainted the whole viewport on every scroll frame on
     Android. Now painted ONCE on a fixed, GPU-promoted pseudo-layer.
   ③ 12+ permanent backdrop-filter surfaces → each is a full-screen
     filter pass per frame. Reduced to the two surfaces users see most.
   ④ ::before/::after decorative layers left registered forever now idle
     at animation-play-state:paused when off-screen via content-visibility.
   ═══════════════════════════════════════════════════════════════════ */

/* ── ① Layout-free keyframes — same look, compositor-only work ── */
.hd-beam{left:0!important;width:30%!important;
  animation:hdBeamX 7s var(--ease) infinite!important;will-change:transform}
@keyframes hdBeamX{0%{transform:translateX(-140%) rotate(18deg)}
  60%,100%{transform:translateX(560%) rotate(18deg)}}

.ah-beam{left:0!important;width:22%!important;filter:blur(6px)}
.ah-beam-1{animation:ahBeamX1 9s var(--ease) infinite!important}
.ah-beam-2{animation:ahBeamX2 12s 2.5s var(--ease) infinite!important}
@keyframes ahBeamX1{0%{transform:translateX(-160%) rotate(16deg)}
  65%,100%{transform:translateX(620%) rotate(16deg)}}
@keyframes ahBeamX2{0%{transform:translateX(-160%) rotate(-14deg)}
  65%,100%{transform:translateX(620%) rotate(-14deg)}}

.cd-chip::after{left:0!important;width:42%!important;
  animation:cdSheenX 3.2s var(--ease) infinite!important}
@keyframes cdSheenX{0%,55%{transform:translateX(-220%) rotate(20deg)}
  85%,100%{transform:translateX(340%) rotate(20deg)}}

.plans-hero::after{left:0!important;animation:phShineX 4.5s ease-in-out infinite!important}
@keyframes phShineX{0%,55%{transform:translateX(-220%) skewX(-18deg)}
  100%{transform:translateX(360%) skewX(-18deg)}}

.pc-badge::after{left:0!important;animation:pcBadgeShineX 3.4s ease-in-out infinite!important}
@keyframes pcBadgeShineX{0%,60%{transform:translateX(-220%) rotate(20deg)}
  100%{transform:translateX(340%) rotate(20deg)}}

.plan-card::after{left:0!important}
.plan-card:hover::after{left:0;transform:translateX(340%) rotate(20deg)}
.plan-card::after{transition:transform .7s var(--ease);transform:translateX(-220%) rotate(20deg)}

.plan-card .btn-primary::after{left:0!important;animation:planCtaSheenX 3.4s var(--ease) infinite!important}
@keyframes planCtaSheenX{0%,55%{transform:translateX(-220%) skewX(-18deg)}
  100%{transform:translateX(340%) skewX(-18deg)}}

.btn-primary::before,.sup-start::before,.chat-send::after{left:0!important}
.btn-primary::before{transform:translateX(-220%) skewX(-20deg);transition:transform .55s var(--ease)}
.btn-primary:hover::before{transform:translateX(340%) skewX(-20deg)}
.sup-start::before{transform:translateX(-220%) skewX(-20deg);transition:transform .55s var(--ease)}
.sup-start:hover::before{transform:translateX(340%) skewX(-20deg)}
.chat-send::after{transform:translateX(-220%) skewX(-20deg);transition:transform .5s var(--ease)}
.chat-send:hover::after{transform:translateX(340%) skewX(-20deg)}

.quick-ic::after{left:0!important;transform:translateX(-220%) rotate(20deg);transition:transform .6s var(--ease)}
.quick-item:hover .quick-ic::after{left:0;transform:translateX(340%) rotate(20deg)}

/* box-shadow / filter pulses → cheap opacity/transform equivalents */
.plan-card:has(.ribbon) .pc-badge{animation:badgePulseO 2.6s ease-in-out infinite!important}
@keyframes badgePulseO{0%,100%{opacity:1}50%{opacity:.88}}
.inv-card .chip{animation:none!important}
.gxp-ic::after{will-change:transform,opacity}
.pc-live i{animation:pcLiveDotT 1.6s ease-out infinite!important}
@keyframes pcLiveDotT{0%{box-shadow:0 0 0 0 rgba(22,163,74,.45)}
  100%{box-shadow:0 0 0 7px rgba(22,163,74,0)}}
.hd-ring{will-change:transform,opacity}
.hd-star,.ah-stars i{will-change:opacity,transform}

/* ── ② Aurora page canvas — painted once, never repaints on scroll ── */
html{background:#F6F7FC!important;background-attachment:scroll!important}
body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(620px 420px at 110% -60px,rgba(124,58,237,.16),transparent 62%),
    radial-gradient(560px 420px at -15% 22%,rgba(6,182,212,.14),transparent 60%),
    radial-gradient(700px 500px at 55% 118%,rgba(167,139,250,.14),transparent 62%);
  transform:translateZ(0)}

/* ── ③ Backdrop-filter budget — keep the two hero glass surfaces,
   drop the rest to plain translucency (each removed filter is a full
   extra render pass per frame while visible) ── */
.auth-card{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.hd-icon,.bh-stat,.wh-btns .btn,.wh-growth,.sup-hero-ic,.sup-start,.ph-chip,
.reg-strip,.ah-chip{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.modal-back{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}

/* ── ④ Idle-work elimination — decorative loops pause off-screen,
   and every card subtree is skipped entirely when not in viewport ── */
.hd-aurora,.ah-orb,.sup-orb,.pf-orb,.pc-orb{contain:strict}
.chat-room,.modal-sheet,#gx-popup{contain:layout style}
#splash,#loader-overlay{contain:strict}
.chat-msgs{contain:content}
.confetti-piece{will-change:transform}
.toast{will-change:transform,opacity}

/* hardware-cheap entrances: single composited transform per view child */
.view>*{animation:fadeUp .4s var(--ease) both}