/* ═══════════════════════════════════════════════════════════════
   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{
  /* 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}

/* ═══════════════════════════════════════════════════════════════
   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(env(safe-area-inset-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}
.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(env(safe-area-inset-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}

.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;
  height:calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom:env(safe-area-inset-bottom, 0px); 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
   ═══════════════════════════════════════════════════════════════ */
.profilecard{display:flex; align-items:center; gap:13px}
.avatar{
  width:62px; height:62px; border-radius:20px; flex:none; overflow:hidden;
  display:grid; place-items:center;
  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:26px;
  box-shadow:0 5px 14px -5px rgba(91,42,165,.7);
}
.avatar img{width:100%; height:100%; object-fit:cover}
.profilecard .who{flex:1; min-width:0}
.profilecard .who h2{font-family:var(--f-display); font-weight:800; font-size:18px; letter-spacing:-.025em; margin:0 0 2px}
.profilecard .who p{margin:0; font-size:12.5px; color:var(--muted); line-height:1.4}
.profilecard .who .pip{margin-top:6px}
.avatarpick{display:flex; align-items:center; gap:13px}

/* deposit / withdraw */
.moneyrow{display:grid; grid-template-columns:1fr 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.withdraw{background:linear-gradient(150deg,#FFB65A,var(--saffron) 55%,#B03D08)}
.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}

/* ═══════════════════════════════════════════════════════════════
   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(152deg,var(--violet-lift) 0%,var(--violet) 46%,var(--violet-deep) 100%);
  transition:opacity .42s ease, transform .42s cubic-bezier(.4,0,.2,1);
}
.splash[data-gone]{opacity:0; transform:scale(1.06); pointer-events:none}
.splash-bg{position:absolute; inset:0}

@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}
.splash-word{
  position:relative; margin-top:18px; font-family:var(--f-display); font-weight:800;
  font-size:25px; letter-spacing:-.03em; color:#fff;
  animation:wordIn .42s ease .26s both;
}
.splash-tag{
  position:relative; margin-top:3px; font-size:12px; color:rgba(255,255,255,.72); font-weight:600;
  animation:wordIn .42s ease .36s both;
}
.splash-bar{
  position:relative; margin-top:26px; width:132px; height:3px; border-radius:99px;
  background:rgba(255,255,255,.2); overflow:hidden;
  animation:wordIn .42s ease .44s 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-word,.splash-tag,.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(152deg,var(--violet-lift) 0%,var(--violet) 46%,var(--violet-deep) 100%);
  padding:calc(env(safe-area-inset-top, 0px) + 20px) 22px 46px;
  border-radius:0 0 26px 26px;
}
.authbrand{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.authbrand img{max-height:26px; max-width:150px; object-fit:contain}
.authbrand .mark{
  width:28px; height:28px; border-radius:9px; display:grid; place-items:center; flex:none;
  background:rgba(255,255,255,.18); box-shadow:inset 0 0 0 1px rgba(255,255,255,.24);
}
.authbrand .word{font-family:var(--f-display); font-weight:800; font-size:19px; color:#fff; letter-spacing:-.035em}
.authbrand .word i{font-style:normal; color:#FFD9A0}
.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:-30px 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;
}
.authfoot{padding:16px 18px calc(env(safe-area-inset-bottom, 0px) + 20px); text-align:center}
.socrow{display:flex; justify-content:center; gap:10px}
.soc{width:40px; height:40px; border-radius:13px; display:grid; place-items:center; box-shadow:var(--shadow-tile)}

/* 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:env(safe-area-inset-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);
}