/* ═══════════════════════════════════════════════════════════════
   EZEEPAY — design tokens and app shell
   Light theme only. Brand colours are injected per request from
   app_settings, so the admin repaints the app without a deploy.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --native-safe-top:0px;
  --native-safe-bottom:0px;
  /* brand */
  --violet:#5B2AA5;
  --violet-deep:#331066;
  --violet-lift:#8355D6;
  --violet-mist:#EFE9FA;
  --violet-ink:#3B1B70;
  --green:#0E9F57;
  --green-lift:#22BE72;
  --green-soft:#E6F7EE;
  --saffron:#F08A1E;
  --saffron-soft:#FEF1E1;
  --red:#D63B45;
  --red-soft:#FDECEE;
  --cyan:#0E93B8;
  --amber:#C97A0A;

  /* neutrals, biased toward the violet — never a flat grey */
  --ink:#191029;
  --ink-2:#4C4064;
  --muted:#7E7595;
  --faint:#A79FBB;
  --hair:#EAE5F3;
  --hair-2:#F1EDF8;
  --surface:#FFFFFF;
  --surface-2:#FAF8FE;
  --bed:#FAF8FE;
  --ground:#F2F0F8;

  --shadow-tile:0 1px 2px rgba(51,16,102,.04), 0 4px 12px -4px rgba(51,16,102,.10);
  --shadow-card:0 1px 3px rgba(51,16,102,.05), 0 10px 28px -12px rgba(51,16,102,.20);
  --shadow-head:0 1px 0 rgba(255,255,255,.06), 0 10px 30px -14px rgba(51,16,102,.55);

  --r-tile:16px;
  --r-card:20px;
  --r-field:14px;

  --f-display:"Bricolage Grotesque","Hanken Grotesk",system-ui,sans-serif;
  --f-ui:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,monospace;

  --tabbar-h:72px;
  --head-h:60px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; height:100%}
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--f-ui);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  /* The page itself never scrolls — only .appscroll does. That is what keeps
     the tab bar still: it is a flex sibling of the scroller, not a fixed
     element chasing a mobile URL bar that grows and shrinks. */
  height:100vh;
  height:100dvh;
  overflow:hidden;
  overscroll-behavior:none;
}
button{font:inherit; color:inherit}
a{color:inherit; text-decoration:none}
input,select,textarea{font:inherit; color:inherit}
:focus-visible{outline:2.5px solid var(--violet); outline-offset:2px; border-radius:8px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important}
}
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.tnum{font-variant-numeric:tabular-nums}
.tnum.upper{text-transform:uppercase}

/* ═══════════════════════════════════════════════════════════════
   PAGE ENTRY — the header settles, then the content rises under it
   ═══════════════════════════════════════════════════════════════ */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes riseIn{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:none}}

/* No transform on the header: a transformed ancestor would break its sticking. */
.apphead,.pagehead{animation:fadeIn .26s ease both}
.balpanel{animation:riseIn .34s cubic-bezier(.2,.85,.3,1) both; animation-delay:.04s}
.body{animation:riseIn .36s cubic-bezier(.2,.85,.3,1) both; animation-delay:.06s}

/* Arriving straight from the MPIN screen gets a longer, warmer entrance. */
@keyframes unlockHead{from{opacity:0; transform:scale(1.04)}to{opacity:1; transform:none}}
@keyframes unlockRise{from{opacity:0; transform:translateY(30px) scale(.985)}to{opacity:1; transform:none}}
body.just-unlocked .apphead{animation:unlockHead .5s cubic-bezier(.2,.85,.3,1) both}
body.just-unlocked .balpanel{animation:unlockRise .58s cubic-bezier(.2,.85,.3,1) both; animation-delay:.1s}
body.just-unlocked .body{animation:unlockRise .6s cubic-bezier(.2,.85,.3,1) both; animation-delay:.2s}
body.just-unlocked .tabbar{animation:unlockRise .5s cubic-bezier(.2,.85,.3,1) both; animation-delay:.34s}
body.just-unlocked .sec{animation:riseIn .46s cubic-bezier(.2,.85,.3,1) both}
body.just-unlocked .sec:nth-of-type(1){animation-delay:.3s}
body.just-unlocked .sec:nth-of-type(2){animation-delay:.38s}
body.just-unlocked .sec:nth-of-type(3){animation-delay:.46s}
body.just-unlocked .sec:nth-of-type(n+4){animation-delay:.54s}

/* Browsers that support cross-document view transitions get a real one. */
@view-transition{navigation:auto}
::view-transition-old(root){animation:fadeIn .18s ease reverse both}
::view-transition-new(root){animation:riseIn .3s cubic-bezier(.2,.85,.3,1) both}

/* ── jaali: the eight-point star screen ───────────────────────────
   Painted as an overlay, not a background layer, so an element can set
   its own `background` shorthand without wiping the pattern out.       */
.jaali{position:relative}
.jaali::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.1' opacity='.15'%3E%3Crect x='9' y='9' width='26' height='26'/%3E%3Crect x='9' y='9' width='26' height='26' transform='rotate(45 22 22)'/%3E%3Ccircle cx='22' cy='22' r='4.4'/%3E%3C/g%3E%3C/svg%3E");
  background-size:44px 44px;
}
.jaali > *{position:relative; z-index:1}

/* ── shell: a fixed-height column, mobile and tablet only ─────
   [ .appscroll  — the only thing that scrolls ]
   [ .tabbar     — flex:none, pinned by layout, not by position:fixed ] */
.app{
  max-width:520px;
  margin:0 auto;
  height:100vh;
  height:100dvh;
  background:var(--ground);
  position:relative;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.appscroll{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;
  scrollbar-width:none;
}
.appscroll::-webkit-scrollbar{display:none}
.desktop-gate{display:none}
@media (min-width:1025px){
  body{background:#E9E5F2}
  .desktop-gate{
    display:grid; place-items:center; position:fixed; inset:0; z-index:99;
    background:linear-gradient(158deg,var(--violet-lift),var(--violet) 46%,var(--violet-deep));
    padding:40px; text-align:center; color:#fff;
  }
  .desktop-gate .inner{max-width:44ch}
  .desktop-gate h1{font-family:var(--f-display); font-weight:800; font-size:34px; letter-spacing:-.03em; margin:22px 0 10px; text-wrap:balance}
  .desktop-gate p{margin:0 0 22px; color:rgba(255,255,255,.82); font-size:16px; line-height:1.6}
  .desktop-gate .frame-btn{
    border:0; cursor:pointer; padding:14px 24px; border-radius:14px; background:#fff;
    color:var(--violet-deep); font-weight:800; font-size:15px;
  }
  body.forced-mobile .desktop-gate{display:none}
  body.forced-mobile .app{
    max-width:412px; margin:26px auto; height:calc(100dvh - 52px);
    border-radius:32px; box-shadow:0 30px 80px -28px rgba(25,16,41,.5);
  }
}

/* ═══════════════════════════════════════════════════════════════
   HEADER — pinned to the top at a CONSTANT height.
   The bar never changes size, so pinning it can never reflow the
   document, and the scroll position can never oscillate.
   The wallet lives in its own panel below, which scrolls away.
   ═══════════════════════════════════════════════════════════════ */
.apphead{
  position:sticky; top:0; z-index:30;
  background:linear-gradient(152deg,var(--violet-lift) 0%,var(--violet) 44%,var(--violet-deep) 100%);
  padding:calc(max(env(safe-area-inset-top, 0px), var(--native-safe-top, 0px)) + 9px) 0 10px;
  box-shadow:var(--shadow-head);
  overflow:hidden;
}
.apphead.has-image{background-size:cover; background-position:center}

.hd-row{display:flex; align-items:center; gap:9px; padding:0 14px; height:44px}
.iconbtn{
  width:37px; height:37px; border-radius:11px; flex:none; border:0; cursor:pointer;
  background:rgba(255,255,255,.17);
  display:grid; place-items:center; color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.17);
  transition:background .15s, transform .12s;
}
.iconbtn:hover{background:rgba(255,255,255,.26)}
.iconbtn:active{transform:scale(.94)}

/* The logo is a compact chip, not a banner — it sits with the balance and
   the search button rather than dominating the bar. */
.logoplate{
  flex:0 1 auto; min-width:0; height:34px; background:#fff; border-radius:10px;
  display:flex; align-items:center; justify-content:center; gap:5px; padding:0 10px;
  box-shadow:0 2px 7px rgba(20,9,31,.18);
}
.logoplate img{max-height:22px; max-width:132px; object-fit:contain; display:block}

/* An uploaded logo usually carries its own background and colours, so the
   white chip is dropped and the artwork is left to speak for itself. */
.logoplate.has-logo{
  background:none; box-shadow:none; padding:0; height:38px; border-radius:9px; overflow:hidden;
}
.logoplate.has-logo img{max-height:38px; max-width:168px}
.logoplate .lm{
  width:20px; height:20px; border-radius:6px; flex:none; display:grid; place-items:center;
  background:linear-gradient(150deg,#FFB65A,#D9640C);
}
.logoplate .lm svg{width:12px; height:12px}
.logoplate .lt{
  font-family:var(--f-display); font-weight:800; font-size:15px; letter-spacing:-.035em;
  color:var(--violet-ink); line-height:1;
}
.logoplate .lt i{font-style:normal; color:var(--saffron)}
.logoplate .lr{font-size:6.5px; vertical-align:super; color:#9A8DB5; font-weight:700}

/* With a smaller logo the balance chip can breathe and always stays visible. */
.hd-row .spacer{flex:1 1 auto}

/* The compact balance chip fades in once the wallet panel scrolls away.
   It lives inside the fixed-height bar, so showing it reflows nothing. */
.hd-mini{
  flex:none; display:flex; align-items:center; overflow:hidden;
  width:0; opacity:0; padding:8px 0; border-radius:11px;
  background:rgba(255,255,255,.18); box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);
  color:#fff; font-weight:800; font-size:13px; white-space:nowrap;
  transition:width .24s ease, opacity .18s ease, padding .24s ease, margin .24s ease;
  margin:0;
}
.apphead.is-compact .hd-mini{width:auto; opacity:1; padding:8px 11px; margin:0 1px}

/* wallet panel — sits below the bar and scrolls away like any content */
.balpanel{
  background:linear-gradient(168deg,var(--violet) 0%,var(--violet-deep) 100%);
  padding:2px 0 16px;
  border-radius:0 0 22px 22px;
  box-shadow:0 8px 22px -16px rgba(51,16,102,.7);
  overflow:hidden;
}

.balcard{
  margin:0 14px; border-radius:var(--r-card); padding:11px 11px 11px 12px;
  background:rgba(255,255,255,.13);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.2), 0 6px 18px -10px rgba(0,0,0,.45);
  display:flex; align-items:center; gap:11px;
}
.walicon{
  width:42px; height:42px; border-radius:12px; flex:none; display:grid; place-items:center;
  background:linear-gradient(150deg,#FFB65A,var(--saffron) 60%,#C9560A);
  box-shadow:0 3px 10px -3px rgba(201,86,10,.65);
}
.balmeta{flex:1; min-width:0}
.balbtn{border:0; background:none; padding:0; cursor:pointer; text-align:left; display:block; width:100%}
.ballab{
  font-size:10px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:rgba(255,255,255,.75); display:flex; align-items:center; gap:5px;
}
.ballab svg{transition:transform .25s}
.balbtn[aria-expanded="true"] .ballab svg{transform:rotate(180deg)}
.balamt{
  font-family:var(--f-display); font-weight:800; font-size:24px; color:#fff;
  letter-spacing:-.025em; line-height:1.2; font-variant-numeric:tabular-nums;
}
.balamt small{font-size:.6em; font-weight:700; opacity:.82}
.w2w{
  flex:none; border:0; cursor:pointer; padding:7px 10px; border-radius:10px;
  background:rgba(255,255,255,.92); color:var(--violet-deep);
  font-weight:800; font-size:11px; display:flex; align-items:center; gap:5px; letter-spacing:.01em;
}

.balsplit{
  margin:0 14px; display:grid; grid-template-columns:repeat(3,1fr); gap:7px;
  max-height:0; opacity:0; overflow:hidden;
  transition:max-height .28s ease, opacity .22s ease, margin-top .28s ease;
}
.balsplit[data-open]{max-height:100px; opacity:1; margin-top:8px}
.balsplit div{
  background:rgba(255,255,255,.12); border-radius:12px; padding:8px 9px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
}
.balsplit dt{
  font-size:9px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:rgba(255,255,255,.7); margin:0 0 2px;
}
.balsplit dd{
  margin:0; font-family:var(--f-display); font-weight:800; font-size:13.5px; color:#fff;
  font-variant-numeric:tabular-nums; letter-spacing:-.015em;
}

.addmoney{
  display:block; width:calc(100% - 28px); margin:9px 14px 0; text-align:center;
  border:0; cursor:pointer; padding:12px 15px; border-radius:13px;
  background:linear-gradient(180deg,var(--green-lift),var(--green));
  color:#fff; font-weight:800; font-size:14.5px; letter-spacing:.005em;
  box-shadow:0 4px 12px -4px rgba(14,159,87,.7), inset 0 1px 0 rgba(255,255,255,.3);
}

/* inner-page header — same bar, page title instead of the wallet */
.pagehead{
  position:sticky; top:0; z-index:30;
  background:linear-gradient(152deg,var(--violet-lift),var(--violet) 44%,var(--violet-deep));
  padding:calc(max(env(safe-area-inset-top, 0px), var(--native-safe-top, 0px)) + 9px) 14px 14px;
  box-shadow:var(--shadow-head);
  display:flex; align-items:center; gap:12px;
}
.pagehead .titles{min-width:0; flex:1}
.pagehead h1{
  font-family:var(--f-display); font-weight:700; font-size:18px; color:#fff;
  letter-spacing:-.02em; margin:0; line-height:1.2;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pagehead p{
  margin:1px 0 0; font-size:12px; color:rgba(255,255,255,.76);
  font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pagehead .bal{
  flex:none; text-align:right; color:#fff; font-weight:800; font-size:13.5px;
  font-variant-numeric:tabular-nums; padding:7px 10px; border-radius:11px;
  background:rgba(255,255,255,.15); box-shadow:inset 0 0 0 1px rgba(255,255,255,.19);
}

/* ═══════════════════════════════════════════════════════════════
   BODY
   ═══════════════════════════════════════════════════════════════ */
.body{padding:14px 0 20px; display:flex; flex-direction:column; gap:13px}

/* slider */
.slider{padding:0 14px}
.track{
  position:relative; border-radius:var(--r-card); overflow:hidden; aspect-ratio:16/7;
  box-shadow:var(--shadow-tile);
}
.slide{position:absolute; inset:0; opacity:0; transition:opacity .5s ease; pointer-events:none}
.slide[data-on]{opacity:1; pointer-events:auto}
.slide img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.slide-in{position:absolute; inset:0; padding:15px 16px; display:flex; flex-direction:column; justify-content:center; color:#fff}
.slide-kick{
  font-size:9px; font-weight:800; letter-spacing:.17em; text-transform:uppercase;
  background:rgba(255,255,255,.22); padding:3px 8px; border-radius:999px;
  align-self:flex-start; margin-bottom:7px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);
}
.slide-h{
  font-family:var(--f-display); font-weight:800; font-size:23px; line-height:1.05;
  letter-spacing:-.035em; margin:0 0 8px; text-shadow:0 2px 8px rgba(0,0,0,.2);
}
.slide-h em{font-style:italic; color:#FFE08A}
.pillrow{display:flex; gap:5px; flex-wrap:wrap}
.pill{font-size:9.5px; font-weight:700; padding:3.5px 8px; border-radius:999px; background:rgba(255,255,255,.93); color:#241539}
.dots{position:absolute; bottom:9px; right:12px; display:flex; gap:4px}
.dots button{
  width:5px; height:5px; padding:0; border:0; border-radius:999px; cursor:pointer;
  background:rgba(255,255,255,.5); transition:width .3s;
}
.dots button[data-on]{width:16px; background:#fff}

/* notice strip */
.notice{
  margin:0 14px; border-radius:13px; padding:9px 11px;
  display:flex; align-items:center; gap:9px;
  background:var(--green-soft); box-shadow:inset 0 0 0 1px #C8EDD9;
}
.notice.tone-violet{background:var(--violet-mist); box-shadow:inset 0 0 0 1px #DCD0F3}
.notice.tone-saffron{background:var(--saffron-soft); box-shadow:inset 0 0 0 1px #F8DCBB}
.noticon{
  width:25px; height:25px; border-radius:8px; flex:none; display:grid; place-items:center;
  background:linear-gradient(150deg,var(--green-lift),var(--green));
}
.notice.tone-violet .noticon{background:linear-gradient(150deg,var(--violet-lift),var(--violet))}
.notice.tone-saffron .noticon{background:linear-gradient(150deg,#FFB65A,#D9640C)}
.notice p{margin:0; flex:1; font-size:12px; font-weight:600; color:#0A7A43; line-height:1.35}
.notice.tone-violet p{color:var(--violet-ink)}
.notice.tone-saffron p{color:var(--amber)}
.notice .chev{flex:none; opacity:.65; color:currentColor}

/* section shelf */
.sec{margin:0 14px; background:var(--bed); border-radius:var(--r-card); padding:13px 11px 12px; box-shadow:inset 0 0 0 1px var(--hair-2)}
.sec-hd{display:flex; align-items:center; gap:9px; margin:0 3px 12px}
.sec-mark{
  width:27px; height:27px; border-radius:8px; flex:none; display:grid; place-items:center;
  background:var(--surface); box-shadow:var(--shadow-tile);
}
.sec-t{font-family:var(--f-display); font-weight:700; font-size:16px; letter-spacing:-.02em; color:var(--ink); flex:1; margin:0}
.prime{
  border:0; cursor:pointer; padding:6px 12px; border-radius:999px; white-space:nowrap;
  background:linear-gradient(100deg,#FFB65A,var(--saffron) 65%,#D9640C);
  color:#fff; font-weight:800; font-size:11px;
  box-shadow:0 3px 9px -3px rgba(217,100,12,.7), inset 0 1px 0 rgba(255,255,255,.32);
  display:flex; align-items:center; gap:5px;
}
.editbtn{
  border:0; cursor:pointer; padding:6px 14px; border-radius:10px;
  background:var(--violet); color:#fff; font-weight:700; font-size:11.5px;
  box-shadow:0 3px 9px -3px rgba(91,42,165,.6);
}

/* the tile grid — three per row on phones, four on tablets */
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
@media (min-width:700px){ .grid{grid-template-columns:repeat(4,1fr)} }

.tile{
  background:var(--surface); border-radius:var(--r-tile); padding:11px 5px 9px;
  display:flex; flex-direction:column; align-items:center; gap:7px;
  box-shadow:var(--shadow-tile); position:relative; cursor:pointer;
  transition:transform .16s cubic-bezier(.2,.9,.3,1.25), box-shadow .16s;
  border:0; text-align:center; -webkit-tap-highlight-color:transparent;
}
/* Lift only where a real pointer can hover. On touch the hover state sticks
   after a tap, which reads as the tile twitching. */
@media (hover:hover) and (pointer:fine){
  .tile:hover{transform:translateY(-2px); box-shadow:0 1px 3px rgba(51,16,102,.06), 0 10px 22px -8px rgba(91,42,165,.32)}
  .row:hover{transform:translateY(-1px)}
  .pick:hover{border-color:var(--violet-lift); transform:translateY(-2px)}
  .chip:hover{border-color:var(--violet-lift)}
}
.tile:active{transform:translateY(0) scale(.97)}
.tile img{width:40px; height:40px; object-fit:contain}
.tile b{font-size:10.5px; font-weight:600; line-height:1.3; color:var(--ink-2); display:block; letter-spacing:-.005em}
.tile.off{opacity:.5; cursor:not-allowed}
.tile.off:hover{transform:none; box-shadow:var(--shadow-tile)}
.tile.off svg,.tile.off img{filter:grayscale(1)}

.ribbon{
  position:absolute; top:-5px; right:-3px; font-size:7.5px; font-weight:800; color:#fff;
  padding:2.5px 7px; border-radius:999px; letter-spacing:.06em; text-transform:uppercase;
  box-shadow:0 2px 6px -1px rgba(0,0,0,.35); white-space:nowrap;
}
.rb-new{background:linear-gradient(100deg,#E0345F,#B01745)}
.rb-coming_soon{background:linear-gradient(100deg,#F0821E,#C25406)}
.rb-hot{background:linear-gradient(100deg,#8355D6,#4A1C8C)}
.rb-offer{background:linear-gradient(100deg,#22BE72,#0A6E3D)}
.rb-prime{background:linear-gradient(100deg,#FFB65A,#D9640C)}

.fav-empty{
  border:1.5px dashed var(--hair); border-radius:14px; padding:15px 14px; text-align:center;
  background:var(--surface);
}
.fav-empty p{margin:0; font-size:12.5px; color:var(--muted); line-height:1.45}
.fav-empty p b{color:var(--ink); font-weight:700}

.tile[hidden]{display:none}
.viewmore{
  grid-column:1 / -1; margin-top:2px; border:0; cursor:pointer;
  background:var(--surface); border-radius:12px; padding:9px; color:var(--violet);
  font-weight:700; font-size:12px; display:flex; align-items:center; justify-content:center; gap:6px;
  box-shadow:var(--shadow-tile);
}
.viewmore svg{transition:transform .25s}
.viewmore[aria-expanded="true"] svg{transform:rotate(180deg)}

/* ═══════════════════════════════════════════════════════════════
   FORMS — shared by every service screen
   ═══════════════════════════════════════════════════════════════ */
.card{
  margin:0 14px; background:var(--surface); border-radius:var(--r-card); padding:15px;
  box-shadow:var(--shadow-card);
}
.card + .card{margin-top:13px}
.card-hd{display:flex; align-items:center; gap:9px; margin:0 0 13px}
.card-hd h2{font-family:var(--f-display); font-weight:700; font-size:15.5px; letter-spacing:-.02em; margin:0; flex:1}
.hint{font-size:12px; color:var(--muted); margin:0 0 13px; line-height:1.45}

/* Install-app notification — drops from the top once per user, like the
   toast drops from the bottom. See the beforeinstallprompt handler in
   ezeepay.js: it sets data-show once, ever, then auto-hides on its own.
   Kept deliberately down to a mark and a button — nothing to read, just
   something to tap. The entrance and exit use different timing on purpose:
   a slower spring in, a quicker clean fade out, so each direction reads as
   its own deliberate motion rather than one animation played backwards. */
.install-banner{
  position:absolute; left:50%; top:calc(max(env(safe-area-inset-top, 0px), var(--native-safe-top, 0px)) + 10px);
  transform:translate(-50%,-20px) scale(.92); width:max-content; max-width:calc(100% - 28px); z-index:65;
  display:flex; align-items:center; gap:12px;
  background:var(--surface); border-radius:999px; padding:7px 7px 7px 7px;
  box-shadow:0 14px 34px -12px rgba(25,16,41,.4);
  opacity:0; pointer-events:none;
  transition:opacity .22s ease, transform .22s ease;
}
.install-banner[data-show]{
  opacity:1; transform:translate(-50%,0) scale(1); pointer-events:auto;
  transition:opacity .55s cubic-bezier(.2,.9,.3,1.4), transform .55s cubic-bezier(.2,.9,.3,1.4);
}
.install-banner-icon{
  flex:none; width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(150deg,var(--violet-lift),var(--violet-deep)); overflow:hidden;
  margin-left:3px;
}
.install-banner-icon img{width:100%; height:100%; object-fit:cover}
.install-banner .btn{padding-left:20px; padding-right:20px}

.flabel{
  display:block; font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-2); margin:0 0 7px;
}
.field{
  width:100%; min-height:52px; border-radius:var(--r-field); border:1.5px solid var(--hair);
  background:var(--surface-2); padding:0 14px; font-size:16px; font-weight:600; color:var(--ink);
  display:flex; align-items:center; gap:10px; transition:border-color .15s, box-shadow .15s;
}
input.field, select.field, textarea.field{-webkit-appearance:none; appearance:none}
select.field{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%237E7595' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:38px;
}
.field:focus,.field:focus-within{
  border-color:var(--violet); outline:none;
  box-shadow:0 0 0 3.5px var(--violet-mist);
}
.field::placeholder{color:var(--faint); font-weight:500}
.field.tnum{letter-spacing:.02em}
.field .prefix{color:var(--muted); font-weight:600; flex:none}
.field .rup{font-family:var(--f-display); font-weight:800; color:var(--violet); font-size:19px; flex:none}
.field input{border:0; background:none; outline:none; flex:1; min-width:0; font-size:16px; font-weight:600}
.field-row{display:flex; gap:9px}
.field-row > *{flex:1; min-width:0}
.fgroup{margin-bottom:14px}
.fgroup:last-child{margin-bottom:0}
.ferror{margin:6px 0 0; font-size:11.5px; font-weight:600; color:var(--red)}
.fnote{margin:6px 0 0; font-size:11.5px; color:var(--muted)}

.btn{
  width:100%; min-height:52px; border:0; cursor:pointer; border-radius:var(--r-field);
  font-weight:800; font-size:15.5px; display:flex; align-items:center; justify-content:center; gap:8px;
  transition:transform .12s, box-shadow .16s;
}
.btn:active{transform:scale(.985)}
.btn-primary{
  background:linear-gradient(100deg,var(--violet-deep),var(--violet) 55%,var(--violet-lift));
  color:#fff; box-shadow:0 6px 18px -6px rgba(91,42,165,.7), inset 0 1px 0 rgba(255,255,255,.18);
}
.btn-green{
  background:linear-gradient(180deg,var(--green-lift),var(--green));
  color:#fff; box-shadow:0 6px 18px -6px rgba(14,159,87,.7), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn-ghost{
  background:var(--surface-2); color:var(--ink); border:1.5px solid var(--hair); font-weight:700;
}
.btn:disabled{opacity:.5; cursor:not-allowed; box-shadow:none}
.btn-sm{min-height:42px; font-size:13.5px; border-radius:12px}

/* chips */
.chiprow{display:flex; gap:7px; flex-wrap:wrap}
.chip{
  display:inline-flex; align-items:center; gap:6px; background:var(--surface-2);
  border:1.5px solid var(--hair); border-radius:11px; padding:7px 11px;
  font-size:12px; font-weight:600; color:var(--ink-2); cursor:pointer;
  font-variant-numeric:tabular-nums; transition:border-color .14s, background .14s;
}
.chip[aria-pressed="true"],.chip.on{
  border-color:var(--violet); background:var(--violet-mist); color:var(--violet-ink);
}
.chip .dot{width:6px; height:6px; border-radius:999px; background:var(--green); flex:none}

/* operator / bank picker grid */
.pickgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:8px}
.pick{
  background:var(--surface); border:1.5px solid var(--hair); border-radius:14px;
  padding:10px 5px 8px; display:flex; flex-direction:column; align-items:center; gap:6px;
  cursor:pointer; text-align:center; transition:border-color .14s, transform .14s, box-shadow .14s;
}
.pick[aria-pressed="true"]{border-color:var(--violet); box-shadow:0 0 0 3px var(--violet-mist)}
.pick b{font-size:10px; font-weight:600; color:var(--ink-2); line-height:1.25}
.oplogo{
  width:34px; height:34px; border-radius:10px; flex:none; display:grid; place-items:center;
  color:#fff; font-family:var(--f-display); font-weight:800; font-size:14px; letter-spacing:-.03em;
  overflow:hidden;
}
.oplogo.sm{width:26px; height:26px; font-size:11px; border-radius:8px}
.oplogo.lg{width:44px; height:44px; font-size:18px; border-radius:13px}

/* A real operator mark: white chip, logo contained, never cropped or stretched. */
.oplogo.img{background:#fff; box-shadow:inset 0 0 0 1px var(--hair); padding:3px}
.oplogo.img.sm{padding:2px}
.oplogo.img.lg{padding:4px}
.oplogo.img img{width:100%; height:100%; object-fit:contain; display:block}

/* list rows — banks, beneficiaries, billers */
.list{display:flex; flex-direction:column; gap:8px}
.row{
  display:flex; align-items:center; gap:11px; background:var(--surface);
  border-radius:14px; padding:11px 12px; box-shadow:var(--shadow-tile);
  cursor:pointer; border:1.5px solid transparent; transition:border-color .14s, transform .14s;
  text-align:left; width:100%;
}
.row[aria-pressed="true"],.row.on{border-color:var(--violet); box-shadow:0 0 0 3px var(--violet-mist)}
.row-body{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.row-t{display:block; font-size:13.5px; font-weight:700; color:var(--ink); margin:0; line-height:1.3}
.row-s{display:block; font-size:11.5px; color:var(--muted); margin:0; font-variant-numeric:tabular-nums; line-height:1.35}
.row-s.mono{font-family:var(--f-mono); font-size:10.5px; letter-spacing:.01em}
.row-end{flex:none; text-align:right}
.row-amt{font-family:var(--f-display); font-weight:800; font-size:15px; letter-spacing:-.02em; font-variant-numeric:tabular-nums}

/* verified / status pips */
.pip{
  display:inline-flex; align-items:center; gap:4px; font-size:9.5px; font-weight:800;
  padding:2.5px 7px; border-radius:999px; letter-spacing:.05em; text-transform:uppercase;
}
.pip-ok{background:var(--green-soft); color:#0A7A43}
.pip-wait{background:var(--saffron-soft); color:var(--amber)}
.pip-no{background:var(--red-soft); color:var(--red)}
.pip-info{background:var(--violet-mist); color:var(--violet-ink)}

/* summary rows */
.sumrow{display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:7px 0; font-size:13.5px}
.sumrow span{color:var(--muted)}
.sumrow b{color:var(--ink); font-weight:700; font-variant-numeric:tabular-nums; text-align:right}
.sumrow.total{border-top:1.5px dashed var(--hair); margin-top:5px; padding-top:11px}
.sumrow.total span{color:var(--ink); font-weight:700; font-size:14.5px}
.sumrow.total b{font-family:var(--f-display); font-size:21px; font-weight:800; letter-spacing:-.025em}

.earn{
  display:flex; align-items:center; gap:10px; background:var(--green-soft); border-radius:13px;
  padding:11px 12px; margin-top:12px; box-shadow:inset 0 0 0 1px #C8EDD9;
}
.earn p{margin:0; flex:1; font-size:11.5px; color:#0A7A43; font-weight:600; line-height:1.35}
.earn b{font-family:var(--f-display); font-size:16px; font-weight:800; color:#0A7A43; font-variant-numeric:tabular-nums}

/* commission table */
.ctable{width:100%; border-collapse:separate; border-spacing:0; border-radius:13px; overflow:hidden; box-shadow:var(--shadow-tile)}
.ctable th{
  background:var(--violet); color:#fff; font-size:10.5px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; padding:9px 11px; text-align:left;
}
.ctable th:last-child{text-align:right}
.ctable td{background:var(--surface); padding:9px 11px; border-bottom:1px solid var(--hair); font-size:13px; font-weight:600; color:var(--ink)}
.ctable tr:last-child td{border-bottom:0}
.ctable td:last-child{text-align:right; font-variant-numeric:tabular-nums; color:var(--green); font-weight:800}
.oprow{display:flex; align-items:center; gap:9px}

/* plan cards */
.tabs{display:flex; gap:6px; padding:0 14px; overflow-x:auto; scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.ptab{
  border:0; cursor:pointer; white-space:nowrap; padding:8px 14px; border-radius:999px;
  background:var(--surface); color:var(--ink-2); font-size:12.5px; font-weight:700; box-shadow:var(--shadow-tile);
}
.ptab[data-on]{background:var(--violet); color:#fff; box-shadow:0 4px 12px -4px rgba(91,42,165,.7)}
.plan{
  background:var(--surface); border-radius:15px; padding:12px 13px;
  box-shadow:var(--shadow-tile); display:flex; gap:12px; align-items:flex-start; cursor:pointer;
  border:1.5px solid transparent; width:100%; text-align:left;
}
.plan[aria-pressed="true"]{border-color:var(--violet); box-shadow:0 0 0 3px var(--violet-mist)}
.plan-amt{
  font-family:var(--f-display); font-weight:800; font-size:19px; color:var(--ink);
  letter-spacing:-.025em; font-variant-numeric:tabular-nums; flex:none; min-width:62px;
}
.plan-body{flex:1; min-width:0}
.plan-meta{display:flex; gap:6px; margin-bottom:4px; flex-wrap:wrap}
.mchip{font-size:9.5px; font-weight:800; padding:2.5px 7px; border-radius:6px; letter-spacing:.02em}
.mc-v{background:var(--violet-mist); color:var(--violet-ink)}
.mc-d{background:#DDF1F8; color:#0A5F7A}
.mc-o{background:var(--saffron-soft); color:var(--amber)}
.mc-g{background:var(--green-soft); color:#0A7A43}
.plan-desc{font-size:11.5px; color:var(--muted); line-height:1.4; margin:0}

/* empty state */
.empty{
  text-align:center; padding:34px 22px; color:var(--muted);
}
.empty svg{opacity:.5; margin-bottom:12px}
.empty h3{font-family:var(--f-display); font-weight:700; font-size:16px; color:var(--ink); margin:0 0 5px}
.empty p{margin:0; font-size:13px; line-height:1.5}

/* receipt */
.receipt{margin:0 14px; background:var(--surface); border-radius:var(--r-card); overflow:hidden; box-shadow:var(--shadow-card)}
.rc-top{padding:22px 16px 18px; text-align:center; background:linear-gradient(168deg,#12A45E,var(--green) 55%,#0A6E3D)}
.rc-top.fail{background:linear-gradient(168deg,#E2545C,var(--red) 55%,#9E1F28)}
.rc-top.wait{background:linear-gradient(168deg,#FFB65A,var(--saffron) 55%,#B95F06)}
.tickmark{
  width:58px; height:58px; border-radius:50%; margin:0 auto 11px; display:grid; place-items:center;
  background:rgba(255,255,255,.2); box-shadow:inset 0 0 0 2px rgba(255,255,255,.42), 0 0 0 8px rgba(255,255,255,.08);
}
.rc-top h2{font-family:var(--f-display); font-weight:800; font-size:19px; color:#fff; margin:0 0 3px; letter-spacing:-.025em}
.rc-top p{margin:0; font-size:12.5px; color:rgba(255,255,255,.85)}
/* Higher specificity than `.rc-top p`, which would otherwise win on font-size. */
.rc-top p.rc-amt{
  font-family:var(--f-display); font-weight:800; font-size:36px; color:#fff;
  letter-spacing:-.04em; margin:12px 0 0; line-height:1; font-variant-numeric:tabular-nums;
}
.rc-top p.rc-amt span{font-size:.58em}
.perf{position:relative; height:19px; background:var(--surface)}
.perf::before,.perf::after{content:""; position:absolute; top:-9.5px; width:19px; height:19px; border-radius:50%; background:var(--ground)}
.perf::before{left:-9.5px}
.perf::after{right:-9.5px}
.perf span{position:absolute; left:14px; right:14px; top:9px; height:1.5px; background:repeating-linear-gradient(90deg,var(--hair) 0 5px,transparent 5px 10px)}
.rc-body{padding:2px 15px 15px}
.rline{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:8px 0; font-size:12.5px; border-bottom:1px solid var(--hair)}
.rline:last-child{border-bottom:0}
.rline span{color:var(--muted); flex:none}
.rline b{color:var(--ink); font-weight:600; text-align:right; font-family:var(--f-mono); font-size:11px; word-break:break-all}
.rline b.plain{font-family:var(--f-ui); font-size:12.5px; font-weight:700}
.bbps{display:flex; align-items:center; gap:9px; margin:11px 15px 0; padding:10px 11px; background:var(--surface-2); border-radius:12px; box-shadow:inset 0 0 0 1px var(--hair)}
.bbps p{margin:0; font-size:10.5px; color:var(--muted); line-height:1.35}
.bbps p b{color:var(--ink-2); font-weight:700; display:block; font-size:11.5px}
.actions{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:0 14px}
.act{
  border:0; cursor:pointer; padding:12px; border-radius:14px; font-weight:700; font-size:12.5px;
  display:flex; align-items:center; justify-content:center; gap:7px;
}
.act-1{background:var(--violet); color:#fff; box-shadow:0 5px 14px -5px rgba(91,42,165,.7)}
.act-2{background:var(--surface); color:var(--ink-2); box-shadow:var(--shadow-tile)}

/* slide to pay */
.slidepay{
  margin:0 14px; height:58px; border-radius:17px; position:relative; overflow:hidden;
  user-select:none; -webkit-user-select:none; touch-action:none;
  background:linear-gradient(100deg,var(--violet-deep),var(--violet) 60%,var(--violet-lift));
  box-shadow:0 8px 22px -8px rgba(91,42,165,.8), inset 0 1px 0 rgba(255,255,255,.18);
}
.slidepay.done{background:linear-gradient(100deg,#0A6E3D,var(--green) 60%,var(--green-lift))}
.slidepay .lbl{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:9px;
  color:rgba(255,255,255,.95); font-weight:800; font-size:15px;
  font-variant-numeric:tabular-nums; pointer-events:none; transition:opacity .15s;
}
.slidepay .knob{
  position:absolute; top:5px; left:5px; width:48px; height:48px; border-radius:14px;
  background:#fff; display:grid; place-items:center; cursor:grab;
  box-shadow:0 3px 10px -2px rgba(0,0,0,.4);
}
.slidepay .knob:active{cursor:grabbing}
.arrows{display:flex; align-items:center; opacity:.5}
.arrows svg + svg{margin-left:-9px; opacity:.6}

/* scan */
.scanview{
  margin:0 14px; aspect-ratio:1; border-radius:22px; position:relative; overflow:hidden;
  background:#150C26; display:grid; place-items:center;
}
.scanview video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.scanframe{
  position:absolute; inset:16%; border-radius:18px; pointer-events:none;
  box-shadow:0 0 0 100vmax rgba(21,12,38,.55);
}
.scanframe i{position:absolute; width:28px; height:28px; border:3px solid #fff; border-radius:5px}
.scanframe i:nth-child(1){top:-2px; left:-2px; border-right:0; border-bottom:0}
.scanframe i:nth-child(2){top:-2px; right:-2px; border-left:0; border-bottom:0}
.scanframe i:nth-child(3){bottom:-2px; left:-2px; border-right:0; border-top:0}
.scanframe i:nth-child(4){bottom:-2px; right:-2px; border-left:0; border-top:0}
.scanline{
  position:absolute; left:16%; right:16%; height:2.5px; border-radius:2px;
  background:linear-gradient(90deg,transparent,#22BE72,transparent);
  animation:sweep 2.4s ease-in-out infinite;
}
@keyframes sweep{0%,100%{top:18%}50%{top:80%}}
.scanmsg{position:relative; z-index:2; color:#fff; font-size:13px; font-weight:600; text-align:center; padding:0 26px; text-shadow:0 2px 8px rgba(0,0,0,.6)}

/* ═══════════════════════════════════════════════════════════════
   TAB BAR — pinned to the bottom, never scrolls
   ═══════════════════════════════════════════════════════════════ */
/* Not fixed, not sticky — the last row of the shell's flex column.
   It cannot drift, on any page, on any browser. */
.tabbar{
  flex:0 0 auto;
  position:relative; z-index:40;
  /* A floor of 22px, not just env(safe-area-inset-bottom): some Android TWA
     builds under-report (or never report) the gesture-bar inset, which used
     to let the system navigation bar sit half over the tab labels. The floor
     guarantees real clearance everywhere; a genuinely taller inset still wins. */
  height:calc(var(--tabbar-h) + max(max(env(safe-area-inset-bottom, 0px), var(--native-safe-bottom, 0px)), 22px));
  padding-bottom:max(max(env(safe-area-inset-bottom, 0px), var(--native-safe-bottom, 0px)), 22px); padding-top:9px;
  background:var(--surface);
  box-shadow:0 -1px 0 var(--hair), 0 -10px 28px -18px rgba(51,16,102,.4);
  display:grid; grid-template-columns:repeat(5,1fr); align-items:start;
}
.tab{
  border:0; background:none; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:4px; color:var(--faint); padding:0;
  transition:color .14s;
}
.tab b{font-size:9.5px; font-weight:600}
.tab[aria-current="page"]{color:var(--violet)}
.tab[aria-current="page"] b{font-weight:800}
.scanwrap{position:relative}
.scanfab{
  position:absolute; left:50%; top:-24px; transform:translateX(-50%);
  width:54px; height:54px; border-radius:18px; border:0; cursor:pointer;
  background:linear-gradient(150deg,var(--violet-lift),var(--violet) 55%,var(--violet-deep));
  display:grid; place-items:center;
  box-shadow:0 7px 18px -6px rgba(91,42,165,.85), inset 0 1px 0 rgba(255,255,255,.28), 0 0 0 5px var(--surface);
  transition:transform .14s;
}
.scanfab:active{transform:translateX(-50%) scale(.94)}
.scanwrap b{position:absolute; left:50%; transform:translateX(-50%); top:36px; font-size:9.5px; font-weight:600; color:var(--faint); white-space:nowrap}

/* ═══════════════════════════════════════════════════════════════
   PROFILE
   ═══════════════════════════════════════════════════════════════ */
/* Facebook-style header: a cover band, the avatar centred and overlapping it */
.profilecard{padding:0; overflow:hidden; text-align:center}
@keyframes coverIn{from{opacity:0; transform:scale(1.06)}to{opacity:1; transform:none}}
@keyframes avatarIn{0%{opacity:0; transform:translateY(10px) scale(.7)}70%{transform:translateY(-2px) scale(1.04)}100%{opacity:1; transform:none}}
@keyframes nameIn{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}}
.pc-cover{
  height:72px;
  background:linear-gradient(120deg,var(--violet-lift) 0%,var(--violet) 55%,var(--violet-deep) 100%);
  position:relative; overflow:hidden;
  animation:coverIn .5s cubic-bezier(.2,.85,.3,1.1) both;
}
.pc-cover::before{
  content:""; position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23fff' stroke-width='1' opacity='.14'%3E%3Crect x='8' y='8' width='24' height='24'/%3E%3Ccircle cx='20' cy='20' r='4'/%3E%3C/g%3E%3C/svg%3E");
  background-size:40px 40px;
}
.pc-center{padding:0 18px 20px; margin-top:-38px; display:flex; flex-direction:column; align-items:center}
.pc-center .avatar{
  width:80px; height:80px; border-radius:26px; flex:none; overflow:hidden;
  display:grid; place-items:center; margin-bottom:10px;
  background:linear-gradient(150deg,var(--violet-lift),var(--violet) 55%,var(--violet-deep));
  color:#fff; font-family:var(--f-display); font-weight:800; font-size:32px;
  box-shadow:0 8px 20px -8px rgba(91,42,165,.6), 0 0 0 4px var(--surface);
  animation:avatarIn .55s .08s cubic-bezier(.2,.85,.3,1.15) both;
}
.pc-center .avatar img{width:100%; height:100%; object-fit:cover}
.pc-center h2{
  font-family:var(--f-display); font-weight:800; font-size:19px; letter-spacing:-.025em; margin:0 0 2px;
  animation:nameIn .45s .16s cubic-bezier(.2,.85,.3,1.1) both;
}
.pc-center p{margin:0; font-size:12.5px; color:var(--muted); line-height:1.5}
.pc-center .pip{margin-top:8px}
.pc-center .editbtn{margin-top:14px}
.avatarpick{display:flex; align-items:center; gap:13px}

/* deposit / withdraw */
.moneyrow{display:grid; grid-template-columns:1fr; gap:10px; margin:0 14px}
.moneybtn{
  border-radius:var(--r-card); padding:14px 13px; color:#fff; display:block;
  box-shadow:0 6px 18px -8px rgba(51,16,102,.5); position:relative; overflow:hidden;
  transition:transform .14s;
}
.moneybtn:active{transform:scale(.98)}
.moneybtn.deposit{background:linear-gradient(150deg,var(--green-lift),var(--green) 60%,#0A6E3D)}
.moneybtn .ico{
  width:36px; height:36px; border-radius:12px; display:grid; place-items:center; margin-bottom:9px;
  background:rgba(255,255,255,.2); box-shadow:inset 0 0 0 1px rgba(255,255,255,.26);
}
.moneybtn b{display:block; font-family:var(--f-display); font-weight:800; font-size:16px; letter-spacing:-.02em}
.moneybtn small{display:block; margin-top:2px; font-size:11px; color:rgba(255,255,255,.82); line-height:1.35}

.notice.tone-red{background:#FDECEE; box-shadow:inset 0 0 0 1px #F6CDD1}
.notice.tone-red p{color:var(--red)}
.notice.tone-red .noticon{background:linear-gradient(150deg,#EE5A63,var(--red))}

/* plan list */
.planlist{display:flex; flex-direction:column; gap:8px; padding:0 14px}
.planlist:empty{display:none}

/* ═══════════════════════════════════════════════════════════════
   ENTRY ANIMATIONS — children arrive in sequence, not all at once
   ═══════════════════════════════════════════════════════════════ */
@keyframes popIn{from{opacity:0; transform:translateY(10px) scale(.97)}to{opacity:1; transform:none}}
.stagger > *{animation:popIn .3s cubic-bezier(.2,.85,.3,1.1) both}
.stagger > *:nth-child(1){animation-delay:.02s}
.stagger > *:nth-child(2){animation-delay:.05s}
.stagger > *:nth-child(3){animation-delay:.08s}
.stagger > *:nth-child(4){animation-delay:.11s}
.stagger > *:nth-child(5){animation-delay:.14s}
.stagger > *:nth-child(6){animation-delay:.17s}
.stagger > *:nth-child(7){animation-delay:.2s}
.stagger > *:nth-child(8){animation-delay:.23s}
.stagger > *:nth-child(n+9){animation-delay:.26s}

/* the receipt tick draws itself */
@keyframes tickPop{0%{transform:scale(.4); opacity:0}60%{transform:scale(1.12)}100%{transform:scale(1); opacity:1}}
.tickmark{animation:tickPop .46s cubic-bezier(.2,.9,.3,1.4) both; animation-delay:.1s}
@keyframes amountRise{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}
.rc-top p.rc-amt{animation:amountRise .4s cubic-bezier(.2,.85,.3,1) both; animation-delay:.24s}

/* ═══════════════════════════════════════════════════════════════
   ADD MONEY
   ═══════════════════════════════════════════════════════════════ */
.amountcard{text-align:center}
.amountcard .flabel{text-align:center}
.bigamount{
  display:flex; align-items:center; justify-content:center; gap:4px;
  padding:6px 0 10px; border-bottom:2px solid var(--hair); margin-bottom:14px;
  transition:border-color .18s;
}
.bigamount:focus-within{border-color:var(--violet)}
.bigamount .rupee{
  font-family:var(--f-display); font-weight:800; font-size:32px; color:var(--violet); line-height:1;
}
.bigamount input{
  border:0; background:none; outline:none; text-align:center;
  font-family:var(--f-display); font-weight:800; font-size:42px; letter-spacing:-.04em;
  color:var(--ink); width:100%; max-width:250px; min-width:0;
  font-variant-numeric:tabular-nums; line-height:1.05;
}
.bigamount input::placeholder{color:var(--hair)}

/* Add Money — a distinct green "hero" panel so top-up doesn't look like
   just another form card. */
.amountcard{padding:0; overflow:hidden}
.amt-hero{
  background:linear-gradient(160deg,var(--green-lift) 0%,var(--green) 55%,#0A6E3D 100%);
  padding:22px 18px 24px;
}
.amt-hero .flabel{color:rgba(255,255,255,.85)}
.amt-hero .bigamount{border-bottom:0; margin-bottom:0; padding:0}
.amt-hero .bigamount .rupee{color:#fff}
.amt-hero .bigamount input{color:#fff}
.amt-hero .bigamount input::placeholder{color:rgba(255,255,255,.45)}
.amt-badge{
  width:38px; height:38px; border-radius:12px; display:grid; place-items:center; margin:0 auto 10px;
  background:rgba(255,255,255,.18); box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);
}
.amt-body{padding:16px 15px 15px}

.payrow{width:100%}
.paylogo{
  width:46px; height:46px; border-radius:13px; flex:none; overflow:hidden;
  display:grid; place-items:center; background:#fff; box-shadow:inset 0 0 0 1px var(--hair);
}
.paylogo img{width:100%; height:100%; object-fit:contain; padding:4px}
.paylogo.plain{background:none; box-shadow:none}
.paylogo.lg{width:60px; height:60px; border-radius:18px}
.paylogo.lg svg{width:60px; height:60px}

/* Credit Card Payment — a live plastic-card preview that tracks the chosen bank */
@keyframes cardIn{from{opacity:0; transform:translateY(16px) rotateX(12deg) scale(.96)}to{opacity:1; transform:none}}
@keyframes cardFlip{0%{transform:rotateY(0)}50%{transform:rotateY(6deg) scale(1.01)}100%{transform:rotateY(0)}}
.cardpreview{
  --cf:#5B2AA5; --ct:#2E1065;
  margin:0 14px 13px; border-radius:20px; padding:20px 20px 18px; min-height:150px;
  background:linear-gradient(135deg,var(--cf) 0%,var(--ct) 100%);
  position:relative; overflow:hidden; color:#fff;
  box-shadow:0 14px 30px -12px rgba(20,10,40,.45), inset 0 1px 0 rgba(255,255,255,.18);
  transition:background 1.2s cubic-bezier(.2,.8,.3,1);
  animation:cardIn .5s cubic-bezier(.2,.85,.3,1.1) both;
  display:flex; flex-direction:column; justify-content:space-between;
}
.cardpreview::before{
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(circle at 85% -10%, rgba(255,255,255,.22), transparent 55%);
}
.cardpreview.flip{animation:cardFlip .5s ease}
.cp-top{display:flex; align-items:center; justify-content:space-between; position:relative}
.cp-chip{
  width:36px; height:26px; border-radius:6px;
  background:linear-gradient(150deg,#F4D98B,#C9963B);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);
}
.cp-chip::after{
  content:""; display:block; width:100%; height:100%; border-radius:6px;
  background-image:
    linear-gradient(rgba(0,0,0,.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.18) 1px, transparent 1px);
  background-size:33% 50%;
}
.cp-logo{height:26px; display:flex; align-items:center}
.cp-logo img{max-height:100%; max-width:64px; object-fit:contain; filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.cp-number{
  font-family:var(--f-mono,ui-monospace,monospace); font-size:19px; letter-spacing:.12em;
  font-weight:600; margin:14px 0; text-shadow:0 1px 2px rgba(0,0,0,.2); position:relative;
}
.cp-bottom{display:flex; flex-direction:column; gap:2px; position:relative}
.cp-label{font-size:9px; letter-spacing:.14em; color:rgba(255,255,255,.65); font-weight:700}
.cp-bank{font-family:var(--f-display); font-weight:700; font-size:15px; letter-spacing:-.01em}

.payfee{font-weight:700; color:var(--amber)}
.payfee.free{color:var(--green)}

.paycard{text-align:center}
.payhead{display:flex; align-items:center; gap:14px; justify-content:center; margin-bottom:18px; text-align:left}
.payhead h2{font-family:var(--f-display); font-weight:800; font-size:26px; letter-spacing:-.03em; margin:0; font-variant-numeric:tabular-nums}
.payhead p{margin:2px 0 0; font-size:12.5px; color:var(--muted)}

.qrwrap{margin-top:18px}
.qrframe{
  width:212px; margin:0 auto; padding:12px; border-radius:18px; background:#fff;
  box-shadow:inset 0 0 0 1.5px var(--hair), var(--shadow-tile);
}
.qrframe svg{width:100%; height:auto; display:block}

.upiid{
  display:flex; align-items:center; gap:10px; margin-top:18px; padding:11px 13px;
  border-radius:13px; background:var(--surface-2); box-shadow:inset 0 0 0 1px var(--hair); text-align:left;
}
.upiid span{flex:1; min-width:0}
.upiid b{display:block; font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--muted)}
.upiid code{display:block; font-family:var(--f-mono); font-size:13px; color:var(--ink); word-break:break-all; margin-top:2px}

.bankcard{
  border-radius:16px; background:var(--surface-2); box-shadow:inset 0 0 0 1px var(--hair);
  padding:13px; margin-bottom:11px;
}
.bankcard:last-child{margin-bottom:0}
.bankcard-top{display:flex; align-items:center; gap:11px; margin-bottom:11px}
.bankcard-top b{display:block; font-size:14px; font-weight:700; letter-spacing:-.01em}
.bankcard-top span{display:block; font-size:11.5px; color:var(--muted)}
.bankrow{
  display:flex; align-items:center; gap:10px; padding:7px 0; font-size:13px;
  border-top:1px solid var(--hair);
}
.bankrow > span:first-child{color:var(--muted); flex:none; width:104px}
.bankrow b{flex:1; min-width:0; font-weight:700; word-break:break-all}
.bankrow .chip{flex:none; padding:5px 10px; font-size:11.5px}

/* Contact & Support — official brand icons, each in its own colour */
.socialrow{display:flex; gap:12px; flex-wrap:wrap; justify-content:center; padding:4px 0}
.soclink{
  width:50px; height:50px; border-radius:16px; background:var(--surface);
  box-shadow:var(--shadow-tile); display:grid; place-items:center;
  -webkit-tap-highlight-color:transparent;
  transition:transform .18s cubic-bezier(.2,.9,.3,1.3), box-shadow .18s;
}
@media (hover:hover) and (pointer:fine){
  .soclink:hover{transform:translateY(-3px) scale(1.06); box-shadow:0 10px 22px -8px rgba(51,16,102,.3)}
}
.soclink:active{transform:scale(.9)}
@keyframes socPop{from{opacity:0; transform:scale(.5) translateY(10px)}to{opacity:1; transform:none}}
.socialrow .soclink{animation:socPop .42s cubic-bezier(.2,.85,.3,1.15) both}
.socialrow .soclink:nth-child(1){animation-delay:.02s}
.socialrow .soclink:nth-child(2){animation-delay:.07s}
.socialrow .soclink:nth-child(3){animation-delay:.12s}
.socialrow .soclink:nth-child(4){animation-delay:.17s}
.socialrow .soclink:nth-child(5){animation-delay:.22s}
.socialrow .soclink:nth-child(6){animation-delay:.27s}

/* ═══════════════════════════════════════════════════════════════
   SPLASH — one beat when the app opens, then it lifts away
   ═══════════════════════════════════════════════════════════════ */
.splash{
  position:fixed; inset:0; z-index:200; display:grid; place-content:center; justify-items:center;
  background:linear-gradient(165deg,#0A1560 0%,#0D2478 45%,#1638A8 100%);
  transition:opacity .42s ease, transform .42s cubic-bezier(.4,0,.2,1);
  overflow:hidden;
}
.splash[data-gone]{opacity:0; transform:scale(1.06); pointer-events:none}
.splash-bg{position:absolute; inset:0}

/* A soft radial glow behind the mark, and two drifting waves along the
   floor — the same quiet motion a native splash screen would have, built
   from nothing but the two gradients so no extra image ever has to load. */
.splash::before{
  content:""; position:absolute; left:50%; top:38%; width:130vw; aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(90,140,255,.22),transparent 60%);
  pointer-events:none;
}
.splash-wave{position:absolute; left:0; right:0; bottom:0; width:100%; height:26vh; min-height:150px; pointer-events:none}
.splash-wave svg{position:absolute; left:0; bottom:0; width:100%; height:100%}
.splash-wave .w1{opacity:.5; animation:waveDrift 9s ease-in-out infinite}
.splash-wave .w2{opacity:.85; animation:waveDrift 7s ease-in-out infinite reverse}
@keyframes waveDrift{0%,100%{transform:translateX(0)}50%{transform:translateX(-3%)}}

@keyframes markIn{0%{opacity:0; transform:scale(.55) rotate(-9deg)}60%{transform:scale(1.08) rotate(2deg)}100%{opacity:1; transform:scale(1) rotate(0)}}
@keyframes wordIn{from{opacity:0; transform:translateY(9px)}to{opacity:1; transform:none}}
@keyframes fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes halo{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.22)}50%{box-shadow:0 0 0 16px rgba(255,255,255,0)}}

.splash-mark{
  position:relative; width:88px; height:88px; border-radius:28px; display:grid; place-items:center;
  background:rgba(255,255,255,.16); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.26);
  animation:markIn .62s cubic-bezier(.2,.9,.3,1.5) both, halo 2s ease-in-out .6s infinite;
}
.splash-mark img{width:56px; height:56px; object-fit:contain}

/* A real logo gets the room to be seen, without a frame around it. */
.splash-mark.has-logo{
  width:auto; height:auto; max-width:74vw; border-radius:22px; padding:0;
  background:none; box-shadow:none; animation:markIn .62s cubic-bezier(.2,.9,.3,1.5) both;
  overflow:hidden;
}
.splash-mark.has-logo img{width:auto; height:auto; max-width:100%; max-height:38vh; border-radius:22px}
.splash-bar{
  position:relative; margin-top:30px; width:132px; height:3px; border-radius:99px;
  background:rgba(255,255,255,.2); overflow:hidden;
  animation:wordIn .42s ease .26s both;
}
.splash-bar i{display:block; height:100%; background:#fff; border-radius:99px; transform-origin:left; animation:fill 1s ease .3s both}

@media (prefers-reduced-motion:reduce){
  .splash-mark,.splash-bar,.splash-bar i{animation:none}
}

/* ═══════════════════════════════════════════════════════════════
   SIGN IN AND REGISTER — one screen, one switch
   ═══════════════════════════════════════════════════════════════ */
.authbody{height:auto; min-height:100dvh; overflow-y:auto; background:var(--surface-2)}
.authshell{max-width:520px; margin:0 auto; min-height:100dvh; display:flex; flex-direction:column}

.authtop{
  background:linear-gradient(158deg,#2E1065 0%,var(--violet) 40%,#8E2E86 78%,#C0399B 100%);
  padding:calc(max(env(safe-area-inset-top, 0px), var(--native-safe-top, 0px)) + 26px) 24px 52px;
  border-radius:0 0 30px 30px;
  position:relative; overflow:hidden;
}
.authtop::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(circle at 88% 8%, rgba(255,255,255,.16), transparent 55%);
}
.herotext{position:relative; animation:heroIn .5s cubic-bezier(.2,.85,.3,1.1) both}
@keyframes heroIn{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}
.herotext h1{
  font-family:var(--f-display); font-weight:800; font-size:25px; color:#fff;
  letter-spacing:-.02em; margin:0 0 6px; line-height:1.2;
}
.herotext h1 i{font-style:normal; color:#FFE08A}
.herotext .wave{display:inline-block; animation:waveHand 1.8s ease-in-out infinite; transform-origin:70% 70%}
@keyframes waveHand{0%,100%{transform:rotate(0)}15%{transform:rotate(16deg)}30%{transform:rotate(-8deg)}45%{transform:rotate(16deg)}60%{transform:rotate(0)}}
.herotext p{margin:0; font-size:13.5px; color:rgba(255,255,255,.86); line-height:1.5; max-width:70%}
.herotext p i{font-style:normal; font-weight:700; color:#fff}
.heroart{position:absolute; right:14px; top:50%; transform:translateY(-50%); opacity:.9}

.pillwrap{display:flex; justify-content:center; margin-top:-34px; position:relative; z-index:4}
.authbrand{
  display:flex; align-items:center; gap:8px; background:var(--surface); border-radius:20px;
  padding:12px 22px; box-shadow:0 10px 24px -10px rgba(20,10,40,.35);
  animation:pillIn .45s .1s cubic-bezier(.2,.85,.3,1.2) both;
}
@keyframes pillIn{from{opacity:0; transform:translateY(8px) scale(.9)}to{opacity:1; transform:none}}
.authbrand img{max-height:30px; max-width:160px; object-fit:contain}
.authbrand.has-logo img{max-height:52px; max-width:190px; border-radius:10px}
.authbrand .mark{
  width:28px; height:28px; border-radius:9px; display:grid; place-items:center; flex:none;
  background:var(--violet-mist); box-shadow:inset 0 0 0 1px var(--hair)
}
.authbrand .word{font-family:var(--f-display); font-weight:800; font-style:italic; font-size:23px; color:var(--violet); letter-spacing:-.03em}
.authbrand .word i{font-style:italic; color:var(--saffron)}
.authtag{
  width:100%; margin-top:6px; font-size:12px; color:rgba(255,255,255,.75); font-weight:600; letter-spacing:.01em;
}

.authcard{
  background:var(--surface); border-radius:22px; margin:14px 14px 0; padding:16px 16px 20px;
  box-shadow:var(--shadow-card); position:relative; z-index:2; flex:1;
  animation:riseIn .34s cubic-bezier(.2,.85,.3,1) both;
}

/* icon-badge inputs */
.icfield{gap:0}
.icbadge{
  width:30px; height:30px; border-radius:999px; flex:none; display:grid; place-items:center; margin-right:9px;
  background:var(--violet-mist);
}
.optional{font-weight:500; text-transform:none; letter-spacing:0; color:var(--faint); font-size:10px}
.otimer{
  flex:none; font-family:var(--f-mono); font-size:12px; font-weight:700; color:var(--violet);
  background:var(--violet-mist); padding:4px 9px; border-radius:999px;
}

/* pill buttons + outline variant */
.btn-pill{border-radius:999px !important}
.btn-outline{
  background:var(--surface); color:var(--violet); border:1.6px solid var(--violet);
  font-weight:800; padding:13px; width:100%; cursor:pointer; font-size:14.5px;
  display:flex; align-items:center; justify-content:center;
}
.btn-outline:active{transform:scale(.98)}

.ordiv{display:flex; align-items:center; gap:10px; margin:14px 0; color:var(--faint); font-size:12px; font-weight:700}
.ordiv span{flex:1; height:1px; background:var(--hair)}

.follow-lbl{margin:0 0 10px; font-size:12px; font-weight:700; color:var(--muted); text-align:center}
.reliable{
  display:flex; align-items:center; justify-content:center; gap:6px; margin:14px 0 0;
  font-size:11.5px; font-weight:700; color:var(--muted);
}
.encnote{
  display:flex; align-items:flex-start; gap:6px; margin:14px 2px 0; font-size:11px; color:var(--faint); line-height:1.5;
}
.encnote svg{flex:none; margin-top:1px}

/* Compact pass — the whole sign-in/register flow fits one phone screen. */
.authtop{padding-top:calc(max(env(safe-area-inset-top, 0px), var(--native-safe-top, 0px)) + 18px); padding-bottom:42px}
.herotext h1{font-size:21px; margin-bottom:4px}
.herotext p{font-size:12.5px}
.authcard{padding:14px 16px 16px}
.authcard .fgroup{margin-bottom:9px}
.authcard .flabel{margin-bottom:4px; font-size:10px}
.authcard .field{min-height:44px}
.authcard .btn{min-height:46px; font-size:14.5px}
.authcard .tickrow{margin:2px 0 10px}
.authcard .more summary{font-size:12px; padding:8px 0}
.authcard .more[open] .fgroup{margin-bottom:8px}
.ordiv{margin:10px 0}
.authfoot{padding-top:10px}
.follow-lbl{margin-bottom:8px}
.soc{width:38px; height:38px}
.authfoot{padding:16px 18px calc(max(env(safe-area-inset-bottom, 0px), var(--native-safe-bottom, 0px)) + 20px); text-align:center}
.socrow{display:flex; justify-content:center; gap:10px}
.soc{
  width:42px; height:42px; border-radius:999px; display:grid; place-items:center;
  background:var(--surface); box-shadow:var(--shadow-tile); transition:transform .15s;
}
.soc:active{transform:scale(.9)}

/* the switch */
.authtabs{
  position:relative; display:grid; grid-template-columns:1fr 1fr; gap:0; margin-bottom:18px;
  background:var(--surface-2); border-radius:13px; padding:4px; box-shadow:inset 0 0 0 1px var(--hair);
}
.authtab{
  position:relative; z-index:1; border:0; background:none; cursor:pointer; padding:10px 8px;
  font-weight:700; font-size:14px; color:var(--muted); border-radius:10px; transition:color .2s;
}
.authtab[data-on]{color:#fff}
.authtab-ink{
  position:absolute; z-index:0; top:4px; bottom:4px; left:4px; width:calc(50% - 4px);
  border-radius:10px; background:linear-gradient(100deg,var(--violet-deep),var(--violet) 60%,var(--violet-lift));
  box-shadow:0 4px 12px -5px rgba(91,42,165,.8);
  transition:transform .26s cubic-bezier(.3,.9,.3,1.2);
}
.authtab-ink[data-at="register"]{transform:translateX(100%)}

[data-auth-panel]{animation:panelIn .28s cubic-bezier(.2,.85,.3,1) both}
@keyframes panelIn{from{opacity:0; transform:translateX(10px)}to{opacity:1; transform:none}}
[data-auth-panel="login"]{animation-name:panelInLeft}
@keyframes panelInLeft{from{opacity:0; transform:translateX(-10px)}to{opacity:1; transform:none}}

.tickrow{
  display:flex; align-items:center; gap:9px; margin:0 0 14px; cursor:pointer;
  font-size:13.5px; font-weight:600; color:var(--ink-2);
}
.tickrow input{width:17px; height:17px; accent-color:var(--violet); flex:none}

.peek{
  width:32px; height:32px; border-radius:9px; border:0; cursor:pointer; flex:none;
  background:none; color:var(--muted); display:grid; place-items:center;
}
.peek:hover{color:var(--violet)}

.more{margin:0 0 14px}
.more summary{
  cursor:pointer; font-size:13px; font-weight:700; color:var(--violet); padding:6px 0;
  list-style:none; display:flex; align-items:center; gap:6px;
}
.more summary::-webkit-details-marker{display:none}
.more summary::before{
  content:"+"; width:19px; height:19px; border-radius:6px; background:var(--violet-mist);
  display:grid; place-items:center; font-size:14px; line-height:1; flex:none;
}
.more[open] summary::before{content:"−"}

/* the MPIN keypad */
.pinwho{display:flex; align-items:center; gap:12px; margin-bottom:22px}
.pinwho .avatar{width:52px; height:52px; border-radius:17px; font-size:21px}
.pinwho b{display:block; font-family:var(--f-display); font-weight:800; font-size:17px; letter-spacing:-.02em}
.pinwho span{display:block; font-size:12.5px; color:var(--muted); font-variant-numeric:tabular-nums}

.pindots{display:flex; justify-content:center; gap:15px; margin:6px 0 24px}
.pindots i{
  width:16px; height:16px; border-radius:999px; background:var(--surface-2);
  box-shadow:inset 0 0 0 2px var(--hair); transition:background .16s, box-shadow .16s, transform .16s;
}
.pindots i[data-on]{background:var(--violet); box-shadow:inset 0 0 0 2px var(--violet); transform:scale(1.12)}
.pindots.wrong{animation:shake .4s}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-9px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(3px)}}

.keypad{display:grid; grid-template-columns:repeat(3,1fr); gap:11px; max-width:300px; margin:0 auto}
.key{
  height:60px; border:0; cursor:pointer; border-radius:18px; background:var(--surface-2);
  box-shadow:inset 0 0 0 1.5px var(--hair);
  font-family:var(--f-display); font-weight:700; font-size:24px; color:var(--ink);
  display:grid; place-items:center; transition:transform .1s, background .14s;
  -webkit-tap-highlight-color:transparent;
}
.key:active{transform:scale(.94); background:var(--violet-mist)}
.key.ghost{background:none; box-shadow:none}
.key.act{color:var(--violet)}

/* toast — inside the shell, so it lands above the tab bar in the phone frame too */
.toast{
  position:absolute; left:50%; bottom:calc(var(--tabbar-h) + 18px); transform:translate(-50%,14px);
  z-index:60; background:var(--ink); color:#fff; border-radius:13px;
  padding:11px 16px; font-size:13px; font-weight:600; max-width:min(420px,88vw);
  box-shadow:0 12px 30px -10px rgba(0,0,0,.5);
  opacity:0; pointer-events:none; transition:opacity .22s, transform .22s;
}
.toast[data-show]{opacity:1; transform:translate(-50%,0)}

/* sheet — scoped to the shell so it never covers the desktop frame's surround */
.sheet{
  position:absolute; inset:0; z-index:70; display:none;
}
.sheet[data-open]{display:block}
/* A plain scrim, not a blur — backdrop-filter repaints the whole page
   behind it every frame, which is a common source of scroll flicker. */
.sheet-bg{position:absolute; inset:0; background:rgba(25,16,41,.55)}
.sheet-panel{
  position:absolute; left:50%; transform:translateX(-50%); bottom:0; width:100%;
  max-height:86%; background:var(--ground); border-radius:24px 24px 0 0;
  display:flex; flex-direction:column; animation:rise .26s cubic-bezier(.2,.9,.3,1);
  padding-bottom:max(env(safe-area-inset-bottom, 0px), var(--native-safe-bottom, 0px));
}
@keyframes rise{from{transform:translate(-50%,100%)}to{transform:translate(-50%,0)}}
.sheet-hd{padding:14px 16px 11px; display:flex; align-items:center; gap:10px; flex:none}
.sheet-hd h2{font-family:var(--f-display); font-weight:700; font-size:16.5px; margin:0; flex:1; letter-spacing:-.02em}
.sheet-grab{width:38px; height:4px; border-radius:999px; background:var(--hair); margin:9px auto 0; flex:none}
.sheet-body{overflow-y:auto; padding:0 14px 18px; flex:1}
.sheet-search{
  margin:0 14px 12px; height:46px; border-radius:13px; background:var(--surface);
  display:flex; align-items:center; gap:10px; padding:0 14px; box-shadow:var(--shadow-tile); flex:none;
}
.sheet-search input{border:0; background:none; outline:none; flex:1; min-width:0; font-size:15px; font-weight:600}
.closebtn{
  width:34px; height:34px; border-radius:11px; border:0; cursor:pointer; flex:none;
  background:var(--surface); color:var(--ink-2); display:grid; place-items:center; box-shadow:var(--shadow-tile);
}

/* ═══════════════════════════════════════════════════════════════
   REFER & EARN — profile card
   ═══════════════════════════════════════════════════════════════ */
.refercard{
  position:relative; overflow:hidden; text-align:center; color:#fff; padding:22px 18px 20px;
  background:linear-gradient(135deg,#FFC24B 0%,#F0821E 55%,#B03D08 100%);
  animation:riseIn .5s cubic-bezier(.2,.85,.3,1) both;
}
.refercard::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23fff' stroke-width='1' opacity='.16'%3E%3Ccircle cx='20' cy='20' r='10'/%3E%3C/g%3E%3C/svg%3E");
  background-size:40px 40px;
}
.rc-badge{
  position:relative; width:54px; height:54px; margin:0 auto 10px; border-radius:18px;
  display:grid; place-items:center; background:rgba(255,255,255,.2);
  animation:halo 2.4s ease-in-out .6s infinite, avatarIn .55s .1s cubic-bezier(.2,.85,.3,1.15) both;
}
.refercard h2{
  position:relative; font-family:var(--f-display); font-weight:800; font-size:19px; margin:0 0 4px; letter-spacing:-.02em;
  animation:nameIn .45s .16s cubic-bezier(.2,.85,.3,1.1) both;
}
.refercard > p{
  position:relative; margin:0 0 16px; font-size:12.5px; color:rgba(255,255,255,.9); line-height:1.5;
}
.refercard > p b{color:#fff}
.rc-code{
  position:relative; display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.16);
  border-radius:14px; padding:10px 14px; margin-bottom:10px;
}
.rc-code-label{font-size:10.5px; color:rgba(255,255,255,.78); flex:none}
.rc-code code{flex:1; min-width:0; text-align:left; font-weight:800; font-size:15px; letter-spacing:.03em}
.rc-linkrow{
  position:relative; display:flex; align-items:center; gap:8px; margin-bottom:16px;
}
.rc-link{
  flex:1; min-width:0; background:rgba(255,255,255,.16); border:0; border-radius:12px;
  padding:9px 12px; color:#fff; font-size:11px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.rc-stats{
  position:relative; display:grid; grid-template-columns:1fr 1fr; gap:10px;
}
.rc-stat{
  background:rgba(255,255,255,.15); border-radius:14px; padding:12px 8px;
  animation:popIn .4s cubic-bezier(.2,.85,.3,1) both;
}
.rc-stat:nth-child(2){animation-delay:.08s}
.rc-stat b{display:block; font-family:var(--f-display); font-weight:800; font-size:18px}
.rc-stat span{display:block; margin-top:2px; font-size:10.5px; color:rgba(255,255,255,.85)}

.refercard .chip{background:rgba(255,255,255,.94); color:#B03D08; border:0; font-weight:700; flex:none}
.refercard .chip.on{background:#fff; color:#0A7A43}

/* ── Refer & Earn — extra polish: a light sweep across the card and a
   gentle glow on the code, so the card reads as something worth tapping
   into rather than a plain settings row. */
.refercard{isolation:isolate}
.refercard::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.35) 50%,transparent 60%);
  background-size:220% 100%; background-position:150% 0;
  animation:refSweep 3.6s ease-in-out 1s infinite;
}
@keyframes refSweep{
  0%,60%{background-position:150% 0}
  100%{background-position:-50% 0}
}
.rc-code{
  animation:popIn .4s .18s cubic-bezier(.2,.85,.3,1) both, rcGlow 2.6s ease-in-out 1.2s infinite;
}
@keyframes rcGlow{
  0%,100%{box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
  50%{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5)}
}
.rc-link{text-overflow:ellipsis; overflow:hidden; white-space:nowrap}

/* ── Refer & Earn — the Share button. White-on-gradient with a real drop
   shadow so it reads as the primary action, not another link in the row. */
.rc-share-btn{
  position:relative; z-index:1; width:100%; margin-top:12px;
  display:flex; align-items:center; justify-content:center; gap:8px;
  background:#fff; color:#B03D08; font-weight:800; font-size:13.5px;
  border:0; border-radius:999px; padding:12px 16px; cursor:pointer;
  box-shadow:0 12px 26px -10px rgba(20,8,2,.55), 0 2px 6px rgba(20,8,2,.18);
  transition:transform .14s, box-shadow .14s;
}
.rc-share-btn:active{transform:scale(.96); box-shadow:0 6px 14px -8px rgba(20,8,2,.5)}
.rc-share-btn svg{flex:none}