/* ============================================================================
   RetpicAfrica — main.css
   Emerald design system. Nunito Sans. Mobile-first. Light + dark mode.
   Variable NAMES kept as --purple* (values are emerald) per the brief.
   ============================================================================ */

:root{
  /* Neon green stays the accent. Surfaces are neutral now: a clean white page in
     light mode, near-black in dark mode. No green tint on backgrounds. */
  --neon:#2BFF37;
  --neon-soft:#7CFF85;

  --purple:#0B8A1C;
  --purple-light:#2BFF37;
  --purple-dark:#076313;
  --purple-bg:#F2FBF3;      /* used only for small tinted chips, not the page */
  --purple-bg2:#DFF7E2;
  --purple-border:#BCEFC2;

  --gold:#FACC15;
  --gold-light:#FDE68A;
  --gold-dark:#8A6100;
  --gold-bg:#FEF9C3;

  --bg:#FFFFFF;             /* page: pure white */
  --card:#FFFFFF;
  --card-border:#E6E8EA;    /* neutral grey, no green cast */
  --border:#ECEEF0;
  --bg-input:#F4F6F7;
  --surface:#FAFBFC;        /* faint neutral band for alternating sections */

  --text:#0D1214;
  --text-2:#4A5459;
  --text-3:#78858B;

  --red:#DC2626;
  --red-bg:#FEF2F2;
  --green:#0B8A1C;
  --amber:#8A6100;

  /* Telegram blue, so the join buttons read correctly in both themes */
  --tg:#229ED9;
  --tg-bg:#EAF6FD;
  --tg-border:#A9DAF2;
  --tg-text:#0B4E6B;

  --radius:16px;
  --radius-sm:12px;
  --shadow:0 6px 22px rgba(13,18,20,0.07);
  --shadow-lg:0 16px 40px rgba(13,18,20,0.13);
}

[data-theme="dark"]{
  /* True dark, neutral. Not green-tinted. */
  --bg:#0B0D0F;
  --card:#15181C;
  --card-border:#252A2F;
  --border:#22272B;
  --bg-input:#1B1F23;
  --surface:#101316;
  --text:#F0F3F4;
  --text-2:#B3BEC3;
  --text-3:#828F96;
  --purple:#2BFF37;
  --purple-dark:#7CFF85;
  --purple-bg:#12210F;
  --purple-bg2:#172D14;
  --purple-border:#274A24;
  --gold-bg:#2E2712;
  --gold-dark:#FDE68A;
  --tg:#4FC0F0;
  --tg-bg:#12252F;
  --tg-border:#1E4256;
  --tg-text:#9BDCF5;
  --shadow:0 6px 22px rgba(0,0,0,0.5);
  --shadow-lg:0 16px 40px rgba(0,0,0,0.6);
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
/* ============================================================================
   The hidden attribute must always win.
   A class like .tk-act{display:flex} beats the browser's own [hidden] rule, so
   an element marked hidden still rendered. That is what put Perform, the
   countdown and Claim on screen all at once. This makes hidden mean hidden,
   whatever a later rule says.
   ============================================================================ */
[hidden]{display:none !important}

html,body{background:var(--bg);color:var(--text);
  /* Nunito Sans when it has loaded, otherwise the device's own UI font. Text is
     painted immediately either way: nothing waits on a webfont download. */
  font-family:'Nunito Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeSpeed}
body{max-width:480px;margin:0 auto;min-height:100vh;position:relative;padding-bottom:100px}
a{text-decoration:none;color:inherit}
button{font-family:inherit;cursor:pointer;font-size:inherit;border:0;background:transparent;color:inherit}
img{max-width:100%}
.mono{font-family:ui-monospace,'JetBrains Mono',monospace}
.money{font-family:inherit;font-weight:900;letter-spacing:-.01em}


/* ============================================================================
   GREEN SURFACE + BUBBLES
   One gradient for every coloured card on the site, with drifting orbs.
   ============================================================================ */
.gsurf{position:relative;overflow:hidden;color:#fff;
  background-color:#0F8A22;
  background-image:linear-gradient(152deg,#18A82C 0%,#0F8A22 46%,#0A6B1A 100%);
  box-shadow:0 16px 36px rgba(15,138,34,.30)}
.gsurf-sm{box-shadow:0 10px 24px rgba(15,138,34,.24)}
.gsurf > *{position:relative;z-index:1}

.bub{position:absolute;border-radius:50%;pointer-events:none;z-index:0;will-change:transform}
.bub-a{width:150px;height:150px;right:-46px;top:-56px;background:rgba(255,255,255,.16);animation:bubA 11s ease-in-out infinite}
.bub-b{width:92px;height:92px;right:24px;top:-38px;background:rgba(43,255,55,.22);animation:bubB 8.5s ease-in-out infinite}
.bub-c{width:118px;height:118px;left:-52px;bottom:-54px;background:rgba(255,255,255,.11);animation:bubC 13s ease-in-out infinite}
.bub-d{width:56px;height:56px;left:44px;bottom:-30px;background:rgba(250,204,21,.20);animation:bubD 9.5s ease-in-out infinite}
.bub-e{width:26px;height:26px;right:64px;bottom:44px;background:rgba(255,255,255,.13);animation:bubB 7s ease-in-out infinite}
/* small rising bubbles */
.bub-r{width:10px;height:10px;bottom:-14px;background:rgba(255,255,255,.5);animation:bubRise 9s linear infinite}
.bub-r2{width:7px;height:7px;bottom:-14px;background:rgba(43,255,55,.6);animation:bubRise 11s linear infinite 2.5s}
.bub-r3{width:13px;height:13px;bottom:-14px;background:rgba(255,255,255,.38);animation:bubRise 13s linear infinite 5s}
@keyframes bubA{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-14px,16px) scale(1.12)}}
@keyframes bubB{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(12px,-13px) scale(.88)}}
@keyframes bubC{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(18px,10px) scale(1.18)}}
@keyframes bubD{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-10px,-14px) scale(1.06)}}
@keyframes bubRise{0%{transform:translateY(0) scale(.6);opacity:0}18%{opacity:.55}100%{transform:translateY(-150px) scale(1.25);opacity:0}}
@media (prefers-reduced-motion:reduce){.bub{animation:none!important}}

/* ---- top bar ---- */
.topbar{padding:14px 16px 8px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.topbar-left{display:flex;align-items:center;gap:10px;min-width:0}
.icon-btn{width:36px;height:36px;border-radius:11px;background:var(--card);border:1px solid var(--card-border);display:grid;place-items:center;color:var(--purple);font-size:18px;flex-shrink:0;position:relative}
.icon-btn:hover{background:var(--purple-bg)}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--purple);color:#fff;display:grid;place-items:center;font-weight:900;font-size:13px;flex-shrink:0}
.hello{font-size:11px;font-weight:700;color:var(--text-2);line-height:1.1;min-width:0}
.hello strong{display:block;color:var(--text);font-weight:900;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-title{font-weight:900;font-size:16px}
.notif-dot{position:absolute;top:6px;right:7px;width:8px;height:8px;background:var(--red);border-radius:50%;border:1.5px solid var(--card)}

/* ---- sections / cards ---- */
.section{padding:0 12px;margin-top:14px}
.card{background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius);padding:16px}
.section-head{display:flex;align-items:center;justify-content:space-between;margin:20px 16px 10px}
.section-head h3{font-weight:900;font-size:14px}
.section-head a{font-size:11px;font-weight:800;color:var(--purple-light)}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;border-radius:12px;font-weight:900;font-size:14px;transition:background .15s,transform .1s;padding:0 18px}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--purple);color:#fff}
.btn-primary:hover{background:var(--purple-dark)}
.btn-outline{background:transparent;border:1.5px solid var(--purple);color:var(--purple)}
.btn-ghost{background:var(--purple-bg2);color:var(--purple)}
.btn-danger{background:var(--red);color:#fff}
.btn-gold{background:var(--gold);color:#0A1F17}
.w-full{width:100%}

/* ---- forms ---- */
.field{margin-bottom:14px}
.field label{display:block;font-size:12px;font-weight:800;color:var(--text-2);margin-bottom:6px}
.input{width:100%;height:50px;border-radius:12px;border:1.5px solid var(--card-border);background:var(--bg-input);padding:0 14px;font-family:inherit;font-size:15px;font-weight:600;color:var(--text)}
.input:focus{outline:none;border-color:var(--purple)}
textarea.input{height:auto;padding:12px 14px;min-height:90px;resize:vertical}
select.input{appearance:none}

/* ---- wallet deck ---- */
.wdeck{padding:18px 14px 0;position:relative}
.wdeck-stage{position:relative;height:206px;touch-action:pan-y;user-select:none}
.wallet-card3{position:absolute;inset:0;border-radius:24px;padding:20px;overflow:hidden;color:#fff;display:flex;flex-direction:column;transform-origin:bottom center;will-change:transform,opacity;cursor:grab;
  background-color:#0F8A22;background-image:linear-gradient(152deg,#18A82C 0%,#0F8A22 46%,#0A6B1A 100%);
  box-shadow:0 16px 36px rgba(15,138,34,.32)}
.wc3-deposit{background-image:linear-gradient(152deg,#149A27 0%,#0E7F1F 48%,#0A6318 100%)}
.wc3-engage{background-image:linear-gradient(152deg,#1CB431 0%,#129124 48%,#0B6E1B 100%)}
.wc3-sales{background-image:linear-gradient(152deg,#16A02A 0%,#0F8A22 48%,#0A6B1A 100%)}
.wc3-label{font-size:10.5px;font-weight:800;opacity:.62;text-transform:uppercase;letter-spacing:.14em}
.wc3-amount{font-family:inherit;font-size:33px;font-weight:900;margin-top:6px;letter-spacing:-.02em;line-height:1.02;
  text-shadow:0 2px 14px rgba(0,0,0,.35)}
.wc3-amount small{font-size:17px;font-weight:900;opacity:.75}
.wc3-bigico{position:absolute;right:-16px;top:-14px;opacity:.10;pointer-events:none;transform:rotate(-12deg);color:#fff;z-index:0}
.wc3-bigico .ic{width:118px;height:118px}
.wc3-ctx{position:absolute;top:16px;right:16px;z-index:3;background:var(--gold);color:#0A1F17;font-weight:900;font-size:12px;padding:7px 13px;border-radius:20px;display:inline-flex;align-items:center;gap:5px;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.wc3-ctx i{color:#0A1F17}
.wc3-vtu{margin-top:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:7px;position:relative;z-index:1}
.wc3-vq{background:rgba(255,255,255,.17);border:1px solid rgba(255,255,255,.16);border-radius:13px;padding:9px 4px;text-align:center;color:#fff;display:block;
  backdrop-filter:blur(3px);transition:background .18s,transform .12s}
.wc3-vq:active{transform:scale(.95)}
.wc3-vq .i{font-size:18px;display:block;line-height:1}
.wc3-vq .t{font-size:9.5px;font-weight:800;margin-top:3px;opacity:.95;display:block}
.wdeck-dots{display:flex;gap:6px;justify-content:center;margin-top:14px}
.wdeck-dot{width:6px;height:6px;border-radius:50%;background:var(--border);transition:all .25s}
.wdeck-dot.on{width:18px;border-radius:5px;background:var(--purple)}
.wdeck-hint{text-align:center;font-size:11px;font-weight:700;color:var(--text-3);margin-top:9px;display:flex;align-items:center;justify-content:center;gap:6px}
.wdeck-hint i{color:var(--purple)}

/* ---- overview cards ---- */
.overview{padding:16px 12px 0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ov{background:var(--card);border:1px solid var(--card-border);border-radius:14px;padding:12px}
.ov-head{display:flex;align-items:center;gap:6px;margin-bottom:8px}
.ov-ico{width:26px;height:26px;border-radius:8px;background:var(--purple-bg);color:var(--purple);display:grid;place-items:center;font-size:13px}
.ov-ico.gold{background:var(--gold-bg);color:var(--gold-dark)}
.ov-label{font-size:10px;font-weight:800;color:var(--text-3);text-transform:uppercase;letter-spacing:.05em}
.ov-val{font-family:inherit;font-weight:900;font-size:20px;color:var(--text);line-height:1.05}
.ov-val small{font-size:12px;color:var(--text-3);font-weight:900}
.ov-bank strong{font-weight:900;font-size:14px;color:var(--text);display:block}
.ov-bank code{font-family:ui-monospace,monospace;font-size:12px;color:var(--text-2);font-weight:700;letter-spacing:.08em;display:block;margin-top:3px}

/* ---- CTA banners ---- */
.cta-banner{margin:8px 12px 0;background:var(--card);border:1px solid var(--card-border);border-left:3px solid var(--purple);border-radius:12px;padding:11px 12px;display:flex;align-items:center;gap:10px;color:var(--text)}
.cta-banner.alt{border-left-color:var(--gold);background:var(--gold-bg)}
.cta-banner .cb-ico{font-size:18px;color:var(--purple);width:32px;height:32px;background:var(--purple-bg);border-radius:9px;display:grid;place-items:center;flex-shrink:0}
.cta-banner.alt .cb-ico{color:var(--gold-dark);background:var(--gold-bg)}
.cta-banner .cb-txt{flex:1}
.cta-banner .cb-txt strong{display:block;font-size:12.5px;font-weight:900}
.cta-banner .cb-txt span{font-size:11px;font-weight:600;color:var(--text-3)}
.cta-banner .cb-chv{color:var(--text-3);font-size:14px}

/* ---- referral card ---- */
.ref-card{margin:0 12px}
.ref-link-row{display:flex;align-items:center;gap:6px;background:var(--bg-input);border:1px solid var(--card-border);border-radius:9px;padding:8px 10px;margin-bottom:10px}
.ref-link-text{flex:1;font-family:ui-monospace,monospace;font-size:11px;font-weight:600;color:var(--purple-dark);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.copy-btn{background:var(--purple);color:#fff;border-radius:7px;padding:6px 10px;font-size:11px;font-weight:900;display:inline-flex;align-items:center;gap:3px}
.ref-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:10px}
.rs{background:var(--bg-input);border:1px solid var(--card-border);border-radius:10px;padding:8px;text-align:center}
.rs-val{font-weight:900;font-size:17px;line-height:1}
.rs-val.green{color:var(--purple)}
.rs-val.amber{color:var(--gold-dark)}
.rs-label{font-size:10px;font-weight:800;color:var(--text-3);text-transform:uppercase;margin-top:3px}
.plan-chip{background:var(--purple-bg2);color:var(--purple-dark);font-size:10px;font-weight:900;padding:4px 8px;border-radius:8px;display:inline-flex;align-items:center;gap:3px}

/* ---- recent activity ---- */
.rc{margin:0 12px;background:var(--card);border:1px solid var(--card-border);border-radius:14px;overflow:hidden}
.rc-row{display:flex;align-items:center;gap:10px;padding:11px 12px;border-bottom:1px solid var(--border)}
.rc-row:last-child{border-bottom:0}
.rc-ico{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;font-size:14px;flex-shrink:0}
.rc-ico.up{background:var(--purple-bg);color:var(--purple)}
.rc-ico.dn{background:var(--red-bg);color:var(--red)}
.rc-txt{flex:1;min-width:0}
.rc-txt b{font-weight:800;font-size:12.5px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc-txt s{font-weight:600;font-size:10.5px;color:var(--text-3);text-decoration:none;display:block;margin-top:1px}
.rc-amt{font-weight:900;font-size:13px;flex-shrink:0}
.rc-amt.up{color:var(--purple)}
.rc-amt.dn{color:var(--red)}

/* ---- bottom nav ---- */
.bottom-nav{position:fixed;left:0;right:0;bottom:16px;z-index:100;padding:0 16px;pointer-events:none}
.bottom-nav-inner{pointer-events:auto;max-width:448px;margin:0 auto;background:var(--card);border:1px solid var(--card-border);border-radius:999px;padding:6px;display:flex;align-items:center;gap:4px;box-shadow:var(--shadow-lg)}
.nav-item{flex:1;display:flex;align-items:center;justify-content:center;height:42px;border-radius:999px;color:var(--text-3);transition:flex .3s cubic-bezier(.2,.8,.2,1),background .25s,color .25s}
.nav-item i{font-size:19px;transition:font-size .25s}
.nav-item span{display:none;font-size:11.5px;font-weight:900}
.nav-item.active{flex:2;background:var(--purple);color:#fff}
.nav-item.active i{font-size:16px}
.nav-item.active span{display:inline;margin-left:6px}

/* ---- profile ---- */
.phead{margin:8px 12px 0;padding:16px;border-radius:20px;color:#fff;position:relative;overflow:hidden;display:flex;align-items:center;gap:14px;
  background-color:#0F8A22;background-image:linear-gradient(152deg,#18A82C 0%,#0F8A22 46%,#0A6B1A 100%);
  box-shadow:0 12px 28px rgba(11,138,28,.28)}
.phead .avatL{width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.16);border:2px solid rgba(255,255,255,.35);display:grid;place-items:center;font-weight:900;font-size:20px;font-family:inherit;flex-shrink:0}
.phead .pinfo{flex:1;min-width:0}
.phead .pname{font-weight:900;font-size:17px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.phead .puser{font-size:12px;font-weight:700;opacity:.8;margin-top:3px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.phead .edit-btn{background:var(--gold);color:#0A1F17;font-weight:900;font-size:11px;padding:8px 14px;border-radius:20px;display:inline-flex;align-items:center;gap:5px;flex-shrink:0}

.pstats{margin:12px 12px 0;background:var(--card);border:1px solid var(--card-border);border-radius:14px;display:grid;grid-template-columns:1fr 1px 1fr 1px 1fr;padding:14px 8px;align-items:center}
.pstat{text-align:center}
.pstat-v{font-family:inherit;font-weight:900;font-size:18px;line-height:1}
.pstat-l{font-size:9.5px;font-weight:800;color:var(--text-3);text-transform:uppercase;letter-spacing:.05em;margin-top:5px}
.pstat-div{background:var(--border);width:1px;height:30px;justify-self:center}

.menu-list{margin:14px 12px 0;background:var(--card);border:1px solid var(--card-border);border-radius:14px;overflow:hidden}
.menu-row{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--border);color:var(--text)}
.menu-row:last-child{border-bottom:0}
.menu-row:hover{background:var(--purple-bg)}
.menu-ico{width:34px;height:34px;border-radius:10px;background:var(--purple-bg);color:var(--purple);display:grid;place-items:center;font-size:16px;flex-shrink:0}
.menu-ico.wa{background:var(--purple-bg2);color:#0B8A1C}
.menu-ico.gold{background:var(--gold-bg);color:var(--gold-dark)}
.menu-label{flex:1;font-weight:800;font-size:13.5px;min-width:0}
.menu-label small{display:block;font-weight:600;font-size:11px;color:var(--text-3);margin-top:2px}
.menu-chv{color:var(--text-3);font-size:15px}

.logout-btn{display:flex;align-items:center;justify-content:center;gap:8px;margin:18px 12px 0;width:calc(100% - 24px);height:48px;background:var(--red);color:#fff;border-radius:12px;font-weight:900;font-size:14px;box-shadow:0 8px 20px rgba(220,38,38,.28)}
.logout-btn:hover{background:#B91C1C}
.logout-btn i{color:#fff}

/* ---- badges / pills / status ---- */
.badge{background:var(--red);color:#fff;font-size:9.5px;font-weight:900;padding:2px 6px;border-radius:8px}
.status{font-size:10.5px;font-weight:900;padding:4px 9px;border-radius:8px;display:inline-flex;align-items:center;gap:3px}
.status.completed,.status.success{background:var(--purple-bg2);color:var(--purple-dark)}
.status.pending,.status.processing{background:var(--gold-bg);color:var(--gold-dark)}
.status.rejected,.status.failed{background:var(--red-bg);color:var(--red)}

/* ---- gate card ---- */
.gate-card{text-align:center;padding:26px 20px}
.gate-ico{width:64px;height:64px;border-radius:20px;background:var(--purple-bg);color:var(--purple);display:grid;place-items:center;font-size:30px;margin:0 auto 16px}

/* ---- earn grid ---- */
.earn-grid{padding:0 12px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.earn-card{background:var(--card);border:1px solid var(--card-border);border-radius:16px;padding:14px;position:relative}
.earn-card .ei{width:34px;height:34px;border-radius:10px;background:var(--purple-bg);color:var(--purple);display:grid;place-items:center;font-size:16px;margin-bottom:10px}
.earn-card h4{font-weight:900;font-size:14px}
.earn-card p{font-size:11.5px;color:var(--text-3);margin-top:2px}
.earn-card .em{display:flex;align-items:center;justify-content:space-between;margin-top:10px;font-size:10.5px;font-weight:800;color:var(--purple)}
.earn-card.soon{opacity:.75}
.soon-chip{position:absolute;top:12px;right:12px;font-size:9px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-dark);background:var(--gold-bg);padding:2px 6px;border-radius:5px}

/* ---- toast ---- */
.toast{position:fixed;left:50%;top:16px;transform:translateX(-50%) translateY(-14px);background:var(--text);color:var(--bg);padding:12px 18px;border-radius:14px;font-weight:800;font-size:13px;z-index:3000;box-shadow:0 10px 30px rgba(0,0,0,.18);opacity:0;transition:opacity .25s,transform .25s;max-width:90%;text-align:center;pointer-events:none}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.err{background:var(--red);color:#fff}
.toast.ok{background:var(--purple);color:#fff}

/* ---- back header ---- */
.back-head{display:flex;align-items:center;gap:10px;padding:14px 16px 8px}
.back-head .back{width:36px;height:36px;border-radius:11px;background:var(--card);border:1px solid var(--card-border);display:grid;place-items:center;color:var(--text);font-size:18px}
.back-head .bt{font-size:15px;font-weight:900}
.back-head .bs{font-size:11px;color:var(--text-3);font-weight:600}

/* ---- misc ---- */
.spacer{height:20px}
.center{text-align:center}
.muted{color:var(--text-3)}
.divider{height:1px;background:var(--border);margin:12px 0}
.empty{text-align:center;padding:40px 20px;color:var(--text-3)}
.empty i{font-size:40px;opacity:.4;display:block;margin-bottom:10px}

/* ============================================================================
   INTERACTION LAYER — press/hover feedback so things feel alive
   ============================================================================ */
.tap{transition:transform .12s cubic-bezier(.2,.8,.2,1), background .18s, box-shadow .18s, border-color .18s, opacity .18s}
.tap:active{transform:scale(.96)}
@media (hover:hover){
  .btn:hover{filter:brightness(1.05)}
  .btn-primary:hover{box-shadow:0 8px 20px rgba(11,138,28,.28)}
  .card.hoverable:hover{border-color:var(--purple-border);box-shadow:var(--shadow);transform:translateY(-2px)}
  .menu-row:hover .menu-chv{transform:translateX(3px)}
  .chip:hover{border-color:var(--purple);color:var(--purple)}
  .rc-row:hover{background:var(--purple-bg)}
}
.menu-chv{transition:transform .18s}
.btn[disabled]{opacity:.5;cursor:not-allowed;filter:none!important;transform:none!important}
.btn .btn-spin{width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:spin .7s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---- alerts ---- */
.alert{display:flex;align-items:flex-start;gap:8px;padding:11px 13px;border-radius:12px;font-size:12.5px;font-weight:700;margin-bottom:14px;line-height:1.5}
.alert i{font-size:16px;flex-shrink:0;margin-top:1px}
.alert.ok{background:var(--purple-bg2);color:var(--purple-dark)}
.alert.err{background:var(--red-bg);color:var(--red)}
.alert.warn{background:var(--gold-bg);color:var(--gold-dark)}
.hint{font-size:11.5px;color:var(--text-3);line-height:1.5;margin:8px 0 14px;display:flex;gap:6px;align-items:flex-start}
.hint i{margin-top:1px}
.hint.warn{color:var(--gold-dark)}
.lead-note{font-size:13px;color:var(--text-2);line-height:1.6;margin-bottom:16px}

/* ---- inputs with leading icon + password toggle ---- */
.input-wrap{position:relative;display:flex;align-items:center}
.input-wrap .ipre{position:absolute;left:13px;font-size:17px;color:var(--text-3);pointer-events:none;z-index:2}
.input.has-pre{padding-left:40px}
.input-wrap:focus-within .ipre{color:var(--purple)}
.pw-toggle{position:absolute;right:6px;width:36px;height:36px;border-radius:9px;display:grid;place-items:center;color:var(--text-3);font-size:17px;z-index:2}
.pw-toggle:hover{color:var(--purple);background:var(--purple-bg)}
.input.has-post{padding-right:44px}
.big-amt{font-size:22px!important;font-weight:900!important}

/* ---- chips ---- */
.chip-row{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:16px}
.chip{flex:1;min-width:62px;background:var(--bg-input);border:1.5px solid var(--card-border);color:var(--text-2);border-radius:10px;padding:9px 6px;font-weight:900;font-size:11.5px;transition:all .15s}
.chip.on{background:var(--purple-bg);border-color:var(--purple);color:var(--purple)}

/* ---- bank verification box ---- */
.verify-box{margin:-2px 0 14px;border-radius:11px;overflow:hidden;animation:slideDown .25s ease}
@keyframes slideDown{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.vb-inner{display:flex;align-items:center;gap:9px;padding:11px 13px;font-size:12.5px;font-weight:800}
.verify-box.loading .vb-inner{background:var(--bg-input);color:var(--text-2)}
.verify-box.ok .vb-inner{background:var(--purple-bg2);color:var(--purple-dark)}
.verify-box.bad .vb-inner{background:var(--red-bg);color:var(--red)}
.vb-ok,.vb-bad{font-size:17px}
.ring-mini{width:15px;height:15px;border-radius:50%;border:2px solid var(--purple-border);border-top-color:var(--purple);animation:spin .7s linear infinite;display:block}
.verified-pill{background:var(--purple-bg2);color:var(--purple-dark);font-size:9.5px;font-weight:900;padding:2px 7px;border-radius:7px;display:inline-flex;align-items:center;gap:3px;vertical-align:middle;margin-left:5px}
.verified-pill i{font-size:11px}

/* ---- current bank card ---- */
.bank-current{display:flex;gap:12px;align-items:center;background:var(--card);border:1px solid var(--card-border);border-left:3px solid var(--purple);border-radius:14px;padding:13px;margin-bottom:14px}
.bc-ico{width:42px;height:42px;border-radius:12px;background:var(--purple);color:#fff;display:grid;place-items:center;font-size:20px;flex-shrink:0}
.bc-bank{font-weight:900;font-size:13.5px}
.bc-acct{font-size:13px;font-weight:700;color:var(--text-2);letter-spacing:.06em;margin-top:2px}
.bc-name{font-size:11.5px;color:var(--text-3);font-weight:700;margin-top:1px}

/* ---- deposit / payment card ---- */
.pay-card{padding:0;overflow:hidden}
.pay-top{position:relative;overflow:hidden;text-align:center;padding:22px 20px 18px;background-color:#0F8A22;background-image:linear-gradient(152deg,#18A82C 0%,#0F8A22 46%,#0A6B1A 100%);color:#fff}
.pay-label{font-size:11.5px;font-weight:800;opacity:.85;text-transform:uppercase;letter-spacing:.05em}
.pay-amt{font-size:34px;margin:4px 0 10px}
.pay-top .copy-btn{background:rgba(255,255,255,.2);color:#fff}
.acct-box{margin:16px;background:var(--bg-input);border:1px solid var(--card-border);border-radius:14px;padding:15px}
.acct-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.acct-lab{font-size:10.5px;color:var(--text-3);font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.acct-num{font-size:23px;font-weight:900;letter-spacing:1.5px;line-height:1.2}
.acct-meta{display:flex;gap:18px;margin-top:13px;padding-top:13px;border-top:1px solid var(--border)}
.acct-meta strong{display:block;font-size:13px;font-weight:900;margin-top:2px}
.pay-note{margin:0 16px;background:var(--gold-bg);color:var(--gold-dark);border-radius:11px;padding:11px 13px;font-size:11.5px;font-weight:700;line-height:1.5;display:flex;gap:8px}
.pay-note i{font-size:15px;flex-shrink:0;margin-top:1px}
.pay-status{margin:14px 16px 18px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:12.5px;font-weight:800;color:var(--text-2)}
.pay-status.ok{color:var(--purple)}
.pay-status.ok i{font-size:18px}
.pulse-dot{width:9px;height:9px;border-radius:50%;background:var(--gold);animation:pulseDot 1.4s infinite}
@keyframes pulseDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}

/* ---- VTU balance strip (nicer than before) ---- */
.vtu-bal{position:relative;overflow:hidden;display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:15px;color:#fff;
  background-color:#0F8A22;background-image:linear-gradient(152deg,#18A82C 0%,#0F8A22 46%,#0A6B1A 100%);
  box-shadow:0 10px 24px rgba(11,138,28,.22)}
.vtu-bal .vb-ico{width:40px;height:40px;border-radius:13px;background:rgba(255,255,255,.18);display:grid;place-items:center;font-size:20px;flex-shrink:0}
.vtu-bal .vb-l{font-size:10.5px;font-weight:800;opacity:.85;text-transform:uppercase;letter-spacing:.05em}
.vtu-bal .vb-v{font-family:inherit;font-weight:900;font-size:20px;line-height:1.1;margin-top:1px}
.vtu-bal .vb-fund{background:var(--gold);color:#0A1F17;font-weight:900;font-size:12px;padding:9px 14px;border-radius:11px;display:inline-flex;align-items:center;gap:5px;flex-shrink:0}

/* ---- selectable option grid (networks / providers) ---- */
.opt-grid{display:grid;gap:8px}
.opt-grid.c4{grid-template-columns:repeat(4,1fr)}
.opt-grid.c3{grid-template-columns:repeat(3,1fr)}
.opt-grid.c2{grid-template-columns:repeat(2,1fr)}
.opt{border:1.5px solid var(--card-border);background:var(--card);border-radius:12px;padding:11px 5px;text-align:center;font-weight:900;font-size:12px;color:var(--text);cursor:pointer;transition:all .16s}
.opt:active{transform:scale(.96)}
.opt.on{border-color:var(--purple);background:var(--purple-bg);color:var(--purple);box-shadow:0 0 0 3px var(--purple-bg2)}

/* ---- plan list (VTU variations) ---- */
.plan-list{display:flex;flex-direction:column;gap:8px;max-height:300px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.plan-row{border:1.5px solid var(--card-border);background:var(--card);border-radius:12px;padding:11px 13px;display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;transition:all .16s}
.plan-row:active{transform:scale(.99)}
.plan-row.on{border-color:var(--purple);background:var(--purple-bg);box-shadow:0 0 0 3px var(--purple-bg2)}
.plan-row .pl-n{font-weight:800;font-size:12.5px}
.plan-row .pl-p{font-family:inherit;font-weight:900;font-size:14px;color:var(--purple);flex-shrink:0}
.plan-skel{height:44px;border-radius:12px;background:linear-gradient(90deg,var(--bg-input) 25%,var(--purple-bg) 50%,var(--bg-input) 75%);background-size:200% 100%;animation:shimmer 1.2s infinite}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ============================================================================
   PRELOADER — logo sits still, a ring orbits it
   ============================================================================ */
#ra-preloader{position:fixed;inset:0;background:var(--bg);z-index:9999;display:flex;align-items:center;justify-content:center;transition:opacity .4s ease,visibility .4s}
#ra-preloader.hide{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s ease,visibility .22s}
.pl-wrap{position:relative;width:104px;height:104px;display:grid;place-items:center}
.pl-logo{width:56px;height:56px;object-fit:contain;z-index:2;animation:plBreathe 2.4s ease-in-out infinite}
@keyframes plBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.pl-ring{position:absolute;inset:0;border-radius:50%;border:3px solid var(--purple-bg2);border-top-color:var(--purple);border-right-color:var(--purple-light);animation:spin 1.1s linear infinite}
.pl-ring.two{inset:9px;border-width:2px;border-color:transparent;border-bottom-color:var(--gold);animation:spin 1.6s linear infinite reverse}
.pl-text{position:absolute;bottom:-34px;font-size:11.5px;font-weight:800;color:var(--text-3);letter-spacing:.04em;white-space:nowrap}

/* ============================================================================
   MODALS
   ============================================================================ */
.modal-scrim{position:fixed;inset:0;background:rgba(11,36,20,.55);z-index:500;opacity:0;visibility:hidden;transition:opacity .25s;backdrop-filter:blur(2px)}
.modal-scrim.open{opacity:1;visibility:visible}
.modal{position:fixed;left:0;right:0;bottom:0;z-index:501;background:var(--card);border-radius:24px 24px 0 0;padding:8px 18px 26px;max-width:480px;margin:0 auto;transform:translateY(102%);transition:transform .32s cubic-bezier(.2,.9,.25,1);min-height:78vh;max-height:94vh;overflow-y:auto;display:flex;flex-direction:column}
.modal.open{transform:translateY(0)}
.modal-grab{width:40px;height:4px;border-radius:3px;background:var(--border);margin:6px auto 14px}
.modal h3{font-size:17px;font-weight:900;text-align:center}
.modal .m-sub{font-size:12.5px;color:var(--text-3);text-align:center;margin-top:4px;line-height:1.5}
.m-row{display:flex;align-items:center;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--border);font-size:13px}
.m-row:last-of-type{border-bottom:0}
.m-row .k{color:var(--text-3);font-weight:700}
.m-row .v{font-weight:900;text-align:right}
.m-ico{width:62px;height:62px;border-radius:20px;display:grid;place-items:center;font-size:30px;margin:6px auto 12px}
.m-ico.ok{background:var(--purple-bg);color:var(--purple)}
.m-ico.pend{background:var(--gold-bg);color:var(--gold-dark)}
.m-ico.bad{background:var(--red-bg);color:var(--red)}
@media(min-width:560px){
  .modal{border-radius:22px;bottom:auto;top:50%;transform:translate(0,-42%) scale(.96);opacity:0;left:50%;margin-left:-240px;width:480px;min-height:auto;max-height:88vh}
  .modal.open{transform:translate(0,-50%) scale(1);opacity:1}
}

/* ============================================================================
   DESKTOP — make wide screens feel built for desktop, not a stretched phone
   ============================================================================ */
@media (min-width:900px){
  body{max-width:none;padding-bottom:40px;display:grid;grid-template-columns:264px minmax(0,1fr);grid-template-areas:"side main";min-height:100vh}
  body.no-shell{display:block;max-width:none}
  .bottom-nav{display:none}
  /* sidebar becomes a permanent rail */
  .ra-scrim{display:none!important}
  .ra-drawer{position:sticky;top:0;height:100vh;transform:none!important;width:264px;max-width:264px;border-radius:0;border-right:1px solid var(--border);box-shadow:none;grid-area:side}
  .desk-main{grid-area:main;max-width:1080px;width:100%;margin:0 auto;padding:0 26px}
  .topbar{padding:20px 0 10px}
  .back-head{padding:20px 0 10px}
  .section{padding:0;margin-top:16px}
  .section-head{margin:24px 0 12px}
  .rc,.ref-card,.menu-list,.pstats,.phead,.cta-banner,.logout-btn{margin-left:0;margin-right:0}
  .logout-btn{width:auto;min-width:220px}
  .overview{padding:16px 0 0;grid-template-columns:repeat(4,1fr)}
  .wdeck{padding:18px 0 0;max-width:560px}
  .earn-grid{padding:0;grid-template-columns:repeat(4,1fr)}
  .menu-toggle-btn{display:none!important}
  /* two-column content on wide screens */
  .desk-cols{display:grid;grid-template-columns:1.25fr 1fr;gap:22px;align-items:start}
  .desk-cols>*{min-width:0}
}
@media (min-width:1280px){
  .desk-main{max-width:1180px}
}

/* ---- segmented control ---- */
.seg{display:flex;gap:6px;background:var(--bg-input);padding:5px;border-radius:14px}
.seg-i{flex:1;text-align:center;padding:9px 6px;border-radius:10px;font-weight:900;font-size:12.5px;color:var(--text-3);transition:all .18s}
.seg-i.on{background:var(--card);color:var(--purple);box-shadow:var(--shadow)}

/* ---- legal / static pages ---- */
.legal{line-height:1.75;font-size:13.5px;color:var(--text-2)}
.legal h2{font-size:15.5px;font-weight:900;color:var(--text);margin:22px 0 8px}
.legal h2:first-child{margin-top:0}
.legal p{margin-bottom:12px}
.legal ul{margin:0 0 12px 18px}
.legal li{margin-bottom:6px}
.legal strong{color:var(--text);font-weight:800}
.legal .updated{font-size:11.5px;color:var(--text-3);font-weight:700;margin-bottom:18px}

/* ============================================================================
   AUTH PAGES
   ============================================================================ */
.auth-body{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:24px 16px;max-width:none}
.auth-wrap{width:100%;max-width:420px}
.auth-head{text-align:center;margin-bottom:20px}
.auth-logo{height:46px;object-fit:contain;margin-bottom:14px}
.auth-head h1{font-size:23px;font-weight:900;letter-spacing:-.01em}
.auth-head p{font-size:13.5px;color:var(--text-3);margin-top:5px;font-weight:600}
.auth-card{padding:20px}
.auth-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.auth-link{font-size:12.5px;font-weight:800;color:var(--purple)}
.auth-link:hover{text-decoration:underline}
.auth-alt{text-align:center;margin-top:18px;font-size:13.5px;color:var(--text-2);font-weight:600}
.auth-alt a{color:var(--purple);font-weight:900}
.auth-legal{text-align:center;margin-top:12px;font-size:11.5px;color:var(--text-3);line-height:1.6}
.auth-legal a{color:var(--purple);font-weight:800}
.ref-banner{display:flex;align-items:center;gap:8px;background:var(--purple-bg2);color:var(--purple-dark);padding:10px 12px;border-radius:11px;font-size:12.5px;font-weight:700;margin-bottom:16px}
.ref-banner i{font-size:17px}

/* custom checkbox */
.check{display:flex;align-items:flex-start;gap:9px;font-size:12.5px;font-weight:700;color:var(--text-2);cursor:pointer;line-height:1.55}
.check input{position:absolute;opacity:0;width:0;height:0}
.check .box{width:20px;height:20px;border-radius:6px;border:1.8px solid var(--card-border);background:var(--bg-input);display:grid;place-items:center;flex-shrink:0;transition:all .16s;margin-top:1px}
.check .box i{font-size:14px;color:#fff;opacity:0;transform:scale(.5);transition:all .16s}
.check input:checked + .box{background:var(--purple);border-color:var(--purple)}
.check input:checked + .box i{opacity:1;transform:scale(1)}
.check.agree{margin-bottom:18px}
.check.agree a{color:var(--purple);font-weight:900}

/* password strength */
.pw-bars{display:flex;gap:4px;flex:1}
.pw-bars span{height:4px;flex:1;border-radius:3px;background:var(--border);transition:background .2s}
.pw-label{font-size:11px;font-weight:800;color:var(--text-3)}

/* ---- withdraw page ---- */
.wd-bal{text-align:center;padding:22px 20px;color:#fff;border:0;position:relative;overflow:hidden;
  background-color:#0F8A22;background-image:linear-gradient(152deg,#18A82C 0%,#0F8A22 46%,#0A6B1A 100%);
  box-shadow:0 16px 36px rgba(15,138,34,.30)}
.wd-bal > *{position:relative;z-index:1}
.wd-l{font-size:11.5px;font-weight:800;opacity:.85;text-transform:uppercase;letter-spacing:.05em}
.wd-v{font-size:32px;margin:4px 0 8px}
.wd-note{font-size:11.5px;font-weight:700;opacity:.9;display:inline-flex;align-items:center;gap:5px}
.bank-mini{display:flex;align-items:center;gap:10px;background:var(--bg-input);border:1px solid var(--card-border);border-radius:12px;padding:11px 12px}
.bank-mini>i{font-size:19px;color:var(--purple);flex-shrink:0}
.bm-b{font-weight:900;font-size:12.5px}
.bm-a{font-size:11px;color:var(--text-2);font-weight:700;margin-top:2px}
.pin-in{letter-spacing:10px;text-align:center;font-size:20px!important}
.wd-open{cursor:pointer}

/* dashboard/earn tighten on tablet */
@media(min-width:600px) and (max-width:899px){
  body{max-width:640px}
  .overview{grid-template-columns:repeat(4,1fr)}
  .earn-grid{grid-template-columns:repeat(4,1fr)}
}

/* ---- avatars as images ---- */
.avatar{overflow:hidden;padding:0}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.ra-dhead .av{overflow:hidden;padding:0}
.ra-dhead .av img{width:100%;height:100%;object-fit:cover;display:block}
.phead .avatL{overflow:hidden;padding:0}
.phead .avatL img{width:100%;height:100%;object-fit:cover;display:block}

/* ---- topbar right cluster + currency button ---- */
.topbar-right{display:flex;align-items:center;gap:7px}
.cur-btn{width:auto;padding:0 10px;gap:5px;font-weight:900;font-size:11px}
.cur-lab{font-size:10.5px;font-weight:900;letter-spacing:.03em}

/* ---- currency sheet ---- */
.cur-list{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.cur-opt{display:flex;align-items:center;gap:12px;width:100%;padding:13px;border-radius:13px;border:1.5px solid var(--card-border);background:var(--card);text-align:left;transition:all .16s}
.cur-opt:active{transform:scale(.99)}
.cur-opt.on{border-color:var(--purple);background:var(--purple-bg)}
.cur-opt.soon{opacity:.5;cursor:default}
.cur-flag{width:38px;height:38px;border-radius:12px;background:var(--purple-bg2);color:var(--purple-dark);display:grid;place-items:center;font-weight:900;font-size:17px;flex-shrink:0}
.cur-opt.on .cur-flag{background:var(--purple);color:#fff}
.cur-txt{flex:1;min-width:0}
.cur-txt strong{display:block;font-size:13.5px;font-weight:900}
.cur-txt small{display:block;font-size:11px;color:var(--text-3);font-weight:700;margin-top:1px}
.cur-tick{font-size:19px;color:var(--purple);opacity:0;transition:opacity .16s}
.cur-opt.on .cur-tick{opacity:1}
.soon-tag{font-size:9.5px;font-weight:900;text-transform:uppercase;letter-spacing:.06em;color:var(--gold-dark);background:var(--gold-bg);padding:3px 7px;border-radius:6px}

/* ---- profile picture page ---- */
.pp-preview{position:relative;width:132px;height:132px;margin:6px auto 14px}
.pp-preview img{width:132px;height:132px;border-radius:50%;object-fit:cover;display:block;border:4px solid var(--card);box-shadow:0 10px 26px rgba(11,138,28,.22)}
.pp-ring{position:absolute;inset:-6px;border-radius:50%;border:2px dashed var(--purple-border);pointer-events:none}
.pp-name{font-weight:900;font-size:17px}
.pp-sub{font-size:12.5px;color:var(--text-3);font-weight:700;margin-top:2px}
.avatL{position:relative}
.av-edit{position:absolute;bottom:-2px;right:-2px;width:24px;height:24px;border-radius:50%;background:var(--gold);color:#0F2417;display:grid;place-items:center;font-size:13px;border:2px solid #fff}

/* ---- leaderboard rows ---- */
.lb-list{display:flex;flex-direction:column;gap:9px}
.lb-card{display:flex;align-items:center;gap:11px;background:var(--card);border:1px solid var(--card-border);border-radius:15px;padding:12px;transition:all .18s}
.lb-card:hover{border-color:var(--purple-border);box-shadow:var(--shadow);transform:translateY(-2px)}
.lb-card.is-me{border-color:var(--purple);background:var(--purple-bg)}
.lb-pos{width:26px;text-align:center;font-family:inherit;font-weight:900;font-size:14px;color:var(--text-3);flex-shrink:0}
.lb-card.is-me .lb-pos{color:var(--purple)}
.lb-av{width:44px;height:44px;border-radius:50%;overflow:hidden;flex-shrink:0;border:2px solid var(--purple-bg2)}
.lb-av img{width:100%;height:100%;object-fit:cover;display:block}
.lb-mid{flex:1;min-width:0}
.lb-nm{font-weight:900;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-bank{font-size:11px;color:var(--text-3);font-weight:700;margin-top:2px;display:flex;align-items:center;gap:5px}
.lb-bank .mono{letter-spacing:.06em}
.lb-amt{text-align:right;flex-shrink:0}
.lb-amt b{display:block;font-family:inherit;font-weight:900;font-size:14px;color:var(--purple)}
.lb-amt small{display:block;font-size:9.5px;color:var(--text-3);font-weight:800;text-transform:uppercase;letter-spacing:.04em;margin-top:1px}
.you{background:var(--purple);color:#fff;font-size:8.5px;padding:1px 5px;border-radius:5px;vertical-align:middle;font-weight:900;margin-left:4px}

/* podium avatars */
.pod-av{overflow:visible}
.pod-av img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.pod-bank{font-size:10px;color:var(--text-3);font-weight:800;letter-spacing:.06em;margin-top:2px}
.pay-note.alt{background:var(--purple-bg);color:var(--purple-dark);margin-top:10px}
.pay-actions{display:flex;gap:9px;margin:14px 16px 18px}
.ref-stats.two{grid-template-columns:1fr 1fr}

/* ---- pagination ---- */
.pager{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:16px;flex-wrap:wrap}
.pg-btn,.pg-num{min-width:36px;height:36px;padding:0 9px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;font-weight:900;font-size:12.5px;background:var(--card);border:1px solid var(--card-border);color:var(--text-2)}
.pg-num.on{background:var(--purple);border-color:var(--purple);color:#fff}
.pg-btn.off{opacity:.35;pointer-events:none}
.pg-dots{color:var(--text-3);font-weight:900;padding:0 2px}
.pg-info{text-align:center;font-size:11.5px;color:var(--text-3);font-weight:700;margin-top:9px}
@media(hover:hover){.pg-num:hover,.pg-btn:hover{border-color:var(--purple);color:var(--purple)}.pg-num.on:hover{color:#fff}}

/* ---- bank card (current details) ---- */
.bankcard{border-radius:18px;padding:18px;color:#fff;margin-bottom:14px;position:relative;overflow:hidden;
  background-color:#0F8A22;background-image:linear-gradient(152deg,#18A82C 0%,#0F8A22 46%,#0A6B1A 100%);
  box-shadow:0 14px 32px rgba(11,138,28,.28)}
.bankcard::after{content:'';position:absolute;right:-30px;bottom:-40px;width:150px;height:150px;border-radius:50%;background:rgba(255,255,255,.07)}
.bankcard-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;position:relative;z-index:1}
.bc-chip{width:36px;height:27px;border-radius:6px;background:linear-gradient(135deg,#FDE68A,#FACC15);display:grid;place-items:center;color:#7C5A00;font-size:14px}
.bc-verified{background:rgba(255,255,255,.2);font-size:10.5px;font-weight:900;padding:5px 10px;border-radius:20px;display:inline-flex;align-items:center;gap:4px}
.bc-unverified{background:rgba(220,38,38,.85);font-size:10.5px;font-weight:900;padding:5px 10px;border-radius:20px;display:inline-flex;align-items:center;gap:4px}
.bc-number{font-size:21px;font-weight:900;letter-spacing:2px;position:relative;z-index:1}
.bankcard-bot{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:18px;position:relative;z-index:1}
.bc-lab{display:block;font-size:9.5px;font-weight:800;opacity:.75;text-transform:uppercase;letter-spacing:.06em}
.bankcard-bot strong{display:block;font-size:12.5px;font-weight:900;margin-top:2px}

/* ---- bank select trigger + picker ---- */
.bank-select{display:flex;align-items:center;gap:10px;width:100%;height:50px;padding:0 14px;border-radius:12px;border:1.5px solid var(--card-border);background:var(--bg-input);font-weight:700;font-size:14px;color:var(--text);text-align:left}
.bank-select>i:first-child{color:var(--purple);font-size:18px}
.bank-select:hover{border-color:var(--purple)}
.bank-list{margin-top:12px;max-height:52vh;overflow-y:auto;display:flex;flex-direction:column;gap:5px;-webkit-overflow-scrolling:touch}
.bank-group{font-size:10.5px;font-weight:900;color:var(--text-3);text-transform:uppercase;letter-spacing:.07em;padding:10px 4px 4px;position:sticky;top:0;background:var(--card);z-index:2}
.bank-item{display:flex;align-items:center;gap:11px;width:100%;padding:11px;border-radius:12px;border:1.5px solid transparent;background:var(--bg-input);text-align:left;transition:all .14s}
.bank-item:hover{background:var(--purple-bg);border-color:var(--purple-border)}
.bank-item.on{border-color:var(--purple);background:var(--purple-bg)}
.bi-ico{width:34px;height:34px;border-radius:10px;background:var(--purple-bg2);color:var(--purple-dark);display:grid;place-items:center;font-weight:900;font-size:14px;flex-shrink:0}
.bank-item.on .bi-ico{background:var(--purple);color:#fff}
.bi-name{flex:1;font-weight:800;font-size:13px;min-width:0}
.bi-tick{font-size:17px;color:var(--purple);opacity:0}
.bank-item.on .bi-tick{opacity:1}
.bank-empty{text-align:center;padding:30px;color:var(--text-3);font-size:13px;font-weight:700}
.bank-empty i{display:block;font-size:32px;opacity:.4;margin-bottom:8px}

/* ---- sales page ---- */
.sales-hero{border-radius:20px;padding:18px;color:#fff;position:relative;overflow:hidden;
  background-color:#0F8A22;background-image:linear-gradient(152deg,#18A82C 0%,#0F8A22 46%,#0A6B1A 100%);
  box-shadow:0 14px 34px rgba(11,138,28,.26)}
.sh-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.sh-l{font-size:11.5px;font-weight:800;opacity:.88;text-transform:uppercase;letter-spacing:.05em}
.sh-badge{background:rgba(255,255,255,.2);font-size:10.5px;font-weight:900;padding:5px 10px;border-radius:20px;display:inline-flex;align-items:center;gap:4px}
.sh-v{font-size:33px;margin-top:5px}
.sh-meta{display:flex;gap:14px;margin-top:8px;flex-wrap:wrap}
.sh-meta span{font-size:11.5px;font-weight:700;opacity:.92;display:inline-flex;align-items:center;gap:4px}
.share-head{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.share-ico{width:36px;height:36px;border-radius:12px;background:var(--purple-bg);color:var(--purple);display:grid;place-items:center;font-size:17px;flex-shrink:0}
.share-btns{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.share-b{display:flex;align-items:center;justify-content:center;gap:5px;padding:10px 6px;border-radius:11px;font-weight:900;font-size:11.5px;border:1.5px solid var(--card-border);color:var(--text-2);transition:all .16s}
.share-b i{font-size:15px}
.share-b.wa:hover{background:var(--purple-bg2);border-color:var(--purple);color:var(--purple-dark)}
.share-b.tg:hover{background:var(--tg-bg);border-color:var(--tg);color:var(--tg-text)}
.share-b.tw:hover{background:var(--bg-input);border-color:var(--text);color:var(--text)}
.sales-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.ss{background:var(--card);border:1px solid var(--card-border);border-radius:14px;padding:13px 8px;text-align:center;transition:all .18s}
.ss:hover{border-color:var(--purple-border);transform:translateY(-2px);box-shadow:var(--shadow)}
.ss-v{font-family:inherit;font-weight:900;font-size:22px;line-height:1}
.ss-v.green{color:var(--purple)}
.ss-v.amber{color:var(--gold-dark)}
.ss-l{font-size:10px;font-weight:800;color:var(--text-3);text-transform:uppercase;letter-spacing:.05em;margin-top:5px}

/* ============================================================================
   TOP EARNERS PODIUM
   2nd on the left, 1st centre and highest, 3rd on the right and lowest.
   The card is the stand; see the raised-card rules further down.
   ============================================================================ */

@keyframes crownBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* the ring: yellow -> green conic sweep, slowly rotating */
@keyframes ringSpin{to{transform:rotate(360deg)}}


/* Medal colours are deliberately fixed in both themes (silver / bronze are the
   point) and each sets its own dark text, so they stay readable. */

.pb-bank{display:block;font-size:9px;font-weight:800;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase;letter-spacing:.03em}
.pb-acct{display:block;font-size:11px;font-weight:900;color:var(--text-2);letter-spacing:.08em;margin-top:1px}

.lb-av.ringed{border:2px solid transparent;background:linear-gradient(var(--card),var(--card)) padding-box, conic-gradient(from 0deg,var(--gold),var(--neon),var(--gold)) border-box}

/* "share your link to appear here" */
.join-board{display:flex;align-items:center;gap:12px;border-radius:16px;padding:14px;
  border:1.5px dashed var(--purple-border);background:var(--purple-bg);position:relative;overflow:hidden}
.jb-av{width:46px;height:46px;border-radius:50%;overflow:hidden;flex-shrink:0;opacity:.6;
  border:2px dashed var(--purple-border)}
.jb-av img{width:100%;height:100%;object-fit:cover;display:block}
.jb-txt{flex:1;min-width:0}
.jb-txt strong{display:block;font-size:13px;font-weight:900}
.jb-txt span{display:block;font-size:11.5px;color:var(--text-3);font-weight:600;line-height:1.5;margin-top:2px}
.jb-btn{height:38px;font-size:12px;flex-shrink:0}
@media(max-width:420px){
  .join-board{flex-wrap:wrap}
  .jb-btn{width:100%}
      }

/* ============================================================================
   GLOBAL INTERACTION PASS — nothing should feel static
   ============================================================================ */
a,button,.opt,.plan-row,.bank-item,.cur-opt,.seg-i,.chip,.nav-item,.rc-row,.lb-card,
.ss,.ov,.earn-card,.menu-row,.card.hoverable,.pg-num,.pg-btn,.share-b,.icon-btn,.copy-btn{
  transition:transform .14s cubic-bezier(.2,.8,.2,1),background .18s,border-color .18s,box-shadow .18s,color .18s,opacity .18s;
}
a:active,button:active,.opt:active,.plan-row:active,.bank-item:active,.cur-opt:active,
.chip:active,.rc-row:active,.lb-card:active,.earn-card:active,.menu-row:active{transform:scale(.985)}

@media (hover:hover){
  .rc-row.hoverable:hover{background:var(--purple-bg)}
  .ov:hover,.earn-card:hover{border-color:var(--purple-border);box-shadow:var(--shadow);transform:translateY(-2px)}
  .icon-btn:hover{background:var(--purple-bg);border-color:var(--purple-border);color:var(--purple)}
  .copy-btn:hover{filter:brightness(1.08)}
  .wc3-vq:hover{background:rgba(255,255,255,.28)}
  .wc3-ctx:hover{filter:brightness(1.06)}
  .seg-i:hover:not(.on){color:var(--purple)}
  .plan-row:hover:not(.on),.opt:hover:not(.on){border-color:var(--purple-border);background:var(--purple-bg)}
  .status:hover{filter:brightness(.97)}
  .ref-link-row:hover{border-color:var(--purple-border)}
  .bottom-nav-inner:hover{box-shadow:0 18px 42px rgba(43,255,55,.24)}
}

/* focus rings for keyboard users */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:none;box-shadow:0 0 0 3px var(--purple-bg2),0 0 0 4px var(--purple);border-radius:8px;
}
/* respect reduced-motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ============================================================================
   SMALL-PHONE TUNING
   Below 380px the dashboard was cramped: deck too tall, cards touching edges,
   money numbers overflowing. This tightens the rhythm without shrinking taps.
   ============================================================================ */
@media (max-width:400px){
  .section{padding:0 10px}
  .overview,.earn-grid{padding-left:10px;padding-right:10px;gap:8px}
  .rc,.ref-card,.menu-list,.pstats,.phead,.cta-banner{margin-left:10px;margin-right:10px}
  .logout-btn{margin-left:10px;margin-right:10px;width:calc(100% - 20px)}
  .wdeck{padding:14px 10px 0}
  .wdeck-stage{height:196px}
  .wallet-card3{padding:15px;border-radius:20px}
  .wc3-amount{font-size:29px}
  .wc3-amount small{font-size:15px}
  .wc3-ctx{font-size:11px;padding:6px 11px;top:12px;right:12px}
  .wc3-vq{padding:7px 3px;border-radius:11px}
  .wc3-vq .i{font-size:16px}
  .wc3-vq .t{font-size:9px}
  .wc3-bigico{font-size:60px;bottom:66px}
  .ov-val{font-size:18px}
  .ov{padding:11px}
  .section-head{margin:16px 12px 9px}
  .rc-row{padding:10px 11px;gap:9px}
  .rc-txt b{font-size:12px}
  .rc-amt{font-size:12.5px}
  .hello strong{font-size:13px;max-width:132px}
  .topbar{padding:12px 12px 6px}
  .topbar-right{gap:5px}
  .cur-btn{padding:0 7px}
  .cur-lab{display:none}
  .icon-btn{width:34px;height:34px}
  .avatar{width:34px;height:34px}
  .ref-stats{gap:7px}
  .rs-val{font-size:15px}
  .sh-v{font-size:28px}
  .wd-v{font-size:28px}
  .acct-num{font-size:20px;letter-spacing:1px}
  .pay-amt{font-size:29px}
  .bc-number{font-size:18px;letter-spacing:1.4px}
}
/* very small (iPhone SE and similar) */
@media (max-width:340px){
  .wdeck-stage{height:186px}
  .wc3-amount{font-size:26px}
  .overview{grid-template-columns:1fr}
  .money{letter-spacing:-.02em}
}
/* never let a long money value break the layout */
.money,.wc3-amount,.ov-val,.sh-v,.wd-v,.pay-amt,.lb-amt b{
  white-space:nowrap;overflow-wrap:normal;word-break:keep-all}

/* comfortable bottom clearance above the floating nav */
body{padding-bottom:104px}
@media (min-width:900px){body{padding-bottom:40px}}
.plat-badge{width:38px;height:38px;border-radius:12px;background:var(--bg-input);border:1px solid var(--card-border);display:grid;place-items:center;font-size:19px;flex-shrink:0}

/* ============================================================================
   LANDING PAGE
   ============================================================================ */
.land{max-width:none;padding-bottom:0}
.land section,.land header,.land footer{max-width:1140px;margin:0 auto}

/* nav */
.lnav{display:flex;align-items:center;gap:18px;padding:14px 20px;position:sticky;top:0;z-index:60;
  background:color-mix(in srgb, var(--bg) 88%, transparent);backdrop-filter:saturate(180%) blur(12px);
  max-width:none;border-bottom:1px solid transparent;transition:border-color .2s}
.lnav-brand img{height:34px;object-fit:contain;display:block}
.lnav-links{display:none;gap:22px;margin-left:auto}
.lnav-links a{font-size:13.5px;font-weight:800;color:var(--text-2);transition:color .16s}
.lnav-links a:hover{color:var(--purple)}
.lnav-cta{display:flex;gap:8px;margin-left:auto;align-items:center}
.lnav-cta .btn{height:38px;padding:0 16px;font-size:13px}
.lnav-login{display:none}

/* hero */
.lhero{display:grid;gap:34px;padding:34px 20px 44px;align-items:center}
.lpill{display:inline-flex;align-items:center;gap:6px;background:var(--purple-bg2);color:var(--purple-dark);
  font-size:11.5px;font-weight:900;padding:7px 13px;border-radius:20px;margin-bottom:16px}
.lhero h1{font-size:34px;line-height:1.12;font-weight:900;letter-spacing:-.02em}
.grad{background:linear-gradient(100deg,var(--purple),var(--neon));-webkit-background-clip:text;background-clip:text;color:transparent}
.lhero p{font-size:15px;color:var(--text-2);line-height:1.7;margin-top:14px;max-width:520px}
.lhero-btns{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap}
.lhero-btns .btn{height:52px;padding:0 22px;font-size:14.5px;flex:1;min-width:180px}
.ltrust{display:flex;gap:16px;margin-top:22px;flex-wrap:wrap}
.ltrust span{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;color:var(--text-3)}
.ltrust i{color:var(--purple);font-size:15px}

/* phone mock */
.lhero-art{display:flex;justify-content:center}
.phone{width:252px;border-radius:32px;padding:10px;position:relative;
  background-color:#0F8A22;background-image:linear-gradient(152deg,#18A82C 0%,#0F8A22 46%,#0A6B1A 100%);
  box-shadow:0 26px 60px rgba(11,138,28,.3)}
.phone-notch{position:absolute;top:16px;left:50%;transform:translateX(-50%);width:64px;height:5px;border-radius:4px;background:rgba(255,255,255,.35);z-index:2}
.phone-screen{background:var(--card);border-radius:24px;padding:22px 12px 14px;display:flex;flex-direction:column;gap:8px}
.pcard{border-radius:16px;padding:14px;color:#fff;margin-bottom:4px;
  background-color:#0F8A22;background-image:linear-gradient(152deg,#18A82C 0%,#0F8A22 46%,#0A6B1A 100%);}
.pcard-l{font-size:10.5px;font-weight:800;opacity:.85;text-transform:uppercase;letter-spacing:.05em}
.pcard-v{display:block;font-family:inherit;font-weight:900;font-size:23px;margin-top:3px}
.pcard-row{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:12px}
.pcard-row span{background:rgba(255,255,255,.18);border-radius:10px;padding:7px 2px;text-align:center;font-size:8.5px;font-weight:800;display:flex;flex-direction:column;align-items:center;gap:3px}
.pcard-row i{font-size:15px}
.prow{display:flex;align-items:center;gap:9px;padding:8px 6px;border-bottom:1px solid var(--border)}
.prow:last-child{border-bottom:0}
.pi{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;font-size:13px;background:var(--purple-bg);color:var(--purple);flex-shrink:0}
.pt{flex:1;min-width:0}
.pt b{display:block;font-size:11.5px;font-weight:900}
.pt s{display:block;font-size:9.5px;color:var(--purple);text-decoration:none;font-weight:800}
.pa{font-size:11px;font-weight:900;color:var(--text-2)}

/* sections */
.lsec{padding:52px 20px}
.lsec-alt{background:var(--surface);max-width:none;border-radius:0}
.lsec-alt>*{max-width:1140px;margin-left:auto;margin-right:auto}
.lsec-head{text-align:center;max-width:620px;margin:0 auto 32px}
.lkicker{display:inline-block;font-size:11px;font-weight:900;color:var(--purple);text-transform:uppercase;letter-spacing:.1em;margin-bottom:10px}
.lsec-head h2{font-size:26px;font-weight:900;line-height:1.2;letter-spacing:-.01em}
.lsec-head p{font-size:14.5px;color:var(--text-2);line-height:1.7;margin-top:12px}

.lgrid-4,.lgrid-3{display:grid;gap:13px}
.lcard{background:var(--card);border:1px solid var(--card-border);border-radius:16px;padding:20px}
.lcard-ico{width:46px;height:46px;border-radius:14px;background:var(--purple-bg2);color:var(--purple-dark);display:grid;place-items:center;font-size:22px;margin-bottom:14px}
.lcard h3{font-size:15.5px;font-weight:900}
.lcard p{font-size:13px;color:var(--text-3);line-height:1.65;margin-top:6px}
@media(hover:hover){.lcard:hover{border-color:var(--purple-border);transform:translateY(-3px);box-shadow:var(--shadow)}}

/* steps */
.lsteps{display:grid;gap:13px;max-width:820px;margin:0 auto}
.lstep{display:flex;gap:15px;background:var(--card);border:1px solid var(--card-border);border-radius:16px;padding:18px;transition:all .18s}
@media(hover:hover){.lstep:hover{border-color:var(--purple-border);box-shadow:var(--shadow)}}
.lstep-n{width:38px;height:38px;border-radius:50%;background:var(--purple);color:#fff;display:grid;place-items:center;
  font-family:inherit;font-weight:900;font-size:16px;flex-shrink:0}
.lstep h3{font-size:15px;font-weight:900}
.lstep p{font-size:13px;color:var(--text-3);line-height:1.65;margin-top:4px}

/* why */
.lwhy{display:flex;gap:13px;background:var(--card);border:1px solid var(--card-border);border-radius:16px;padding:18px}
.lwhy-ico{width:42px;height:42px;border-radius:13px;background:var(--gold-bg);color:var(--gold-dark);display:grid;place-items:center;font-size:20px;flex-shrink:0}
.lwhy h3{font-size:14.5px;font-weight:900}
.lwhy p{font-size:12.5px;color:var(--text-3);line-height:1.65;margin-top:4px}
@media(hover:hover){.lwhy:hover{border-color:var(--purple-border);transform:translateY(-3px);box-shadow:var(--shadow)}}

/* about */
.labout{display:grid;gap:30px;align-items:center}
.labout h2{font-size:25px;font-weight:900;line-height:1.22;letter-spacing:-.01em}
.labout p{font-size:14.5px;color:var(--text-2);line-height:1.8;margin-top:14px}
.labout-btns{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap}
.labout-btns .btn{height:48px;padding:0 20px}
.lstats{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.lstat{background:var(--card);border:1px solid var(--card-border);border-radius:16px;padding:22px 16px;text-align:center;transition:all .18s}
@media(hover:hover){.lstat:hover{border-color:var(--purple-border);transform:translateY(-3px);box-shadow:var(--shadow)}}
.ls-v{display:block;font-family:inherit;font-weight:900;font-size:32px;color:var(--purple);line-height:1}
.ls-l{display:block;font-size:11.5px;font-weight:800;color:var(--text-3);margin-top:7px}

/* faq */
.lfaq{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:9px}
.lfq{background:var(--card);border:1px solid var(--card-border);border-radius:14px;overflow:hidden;transition:border-color .18s}
.lfq[open]{border-color:var(--purple-border)}
.lfq summary{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 18px;cursor:pointer;
  font-weight:900;font-size:14px;list-style:none}
.lfq summary::-webkit-details-marker{display:none}
.lfq summary:hover{background:var(--purple-bg)}
.lfq summary i{color:var(--purple);font-size:18px;transition:transform .25s;flex-shrink:0}
.lfq[open] summary i{transform:rotate(45deg)}
.lfq-a{padding:0 18px 17px;font-size:13.5px;color:var(--text-2);line-height:1.75}

/* final cta */
.lcta{margin:16px 20px 0;padding:44px 24px;border-radius:24px;text-align:center;color:#fff;max-width:1100px;
  background-color:#0F8A22;background-image:linear-gradient(152deg,#18A82C 0%,#0F8A22 46%,#0A6B1A 100%);
  box-shadow:0 20px 46px rgba(11,138,28,.3)}
.lcta h2{font-size:25px;font-weight:900;line-height:1.22}
.lcta p{font-size:14.5px;opacity:.92;margin-top:10px;line-height:1.6}
.lcta .btn{margin-top:20px;height:52px;padding:0 30px;font-size:15px}

/* footer */
.lfoot{padding:46px 20px 30px;max-width:1140px}
.lfoot-top{display:grid;gap:26px;padding-bottom:26px;border-bottom:1px solid var(--border)}
.lfoot-brand img{height:34px;object-fit:contain}
.lfoot-brand p{font-size:13px;color:var(--text-3);line-height:1.7;margin-top:12px;max-width:280px}
.lfoot-col h4{font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.07em;color:var(--text);margin-bottom:12px}
.lfoot-col a{display:block;font-size:13px;color:var(--text-3);font-weight:600;margin-bottom:9px;transition:color .16s}
.lfoot-col a:hover{color:var(--purple)}
.lfoot-bot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-top:20px;font-size:12px;color:var(--text-3);font-weight:600}
.lfoot-note{max-width:420px}

/* ── landing: tablet and up ── */
@media(min-width:760px){
  .lgrid-4{grid-template-columns:repeat(2,1fr)}
  .lgrid-3{grid-template-columns:repeat(2,1fr)}
  .lhero h1{font-size:42px}
  .lsec-head h2,.labout h2,.lcta h2{font-size:31px}
  .lfoot-top{grid-template-columns:2fr 1fr 1fr 1fr}
  .lnav-links{display:flex}
  .lnav-cta{margin-left:0}
  .lnav-login{display:inline-flex}
}
@media(min-width:1000px){
  .lhero{grid-template-columns:1.1fr .9fr;padding:56px 20px 66px;gap:44px}
  .lhero h1{font-size:50px}
  .lhero-btns .btn{flex:0 0 auto}
  .lgrid-4{grid-template-columns:repeat(4,1fr)}
  .lgrid-3{grid-template-columns:repeat(3,1fr)}
  .labout{grid-template-columns:1.15fr .85fr;gap:48px}
  .lsteps{grid-template-columns:repeat(3,1fr)}
  .lstep{flex-direction:column}
  .lsec{padding:72px 20px}
  .lcta{padding:60px 30px}
}
.lnav-av{width:38px;height:38px;border-radius:50%;overflow:hidden;border:2px solid var(--purple-border);flex-shrink:0;display:block}
.lnav-av img{width:100%;height:100%;object-fit:cover;display:block}
@media(hover:hover){.lnav-av:hover{border-color:var(--purple)}}

/* ---- suspended / banned ---- */
.susp-ico{width:66px;height:66px;border-radius:22px;background:var(--red-bg);color:var(--red);display:grid;place-items:center;font-size:32px;margin:0 auto 14px}
.susp-reason{background:var(--red-bg);border-radius:12px;padding:13px;margin-top:14px;text-align:left}
.susp-reason span{display:block;font-size:10.5px;font-weight:900;color:var(--red);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}
.susp-reason{font-size:13.5px;color:var(--text-2);line-height:1.6;font-weight:700}
.ban-note{display:flex;gap:12px;background:var(--red-bg);border:1px solid #F3C0C0;border-radius:13px;padding:14px;margin-bottom:16px}
.ban-ico{width:38px;height:38px;border-radius:12px;background:var(--red);color:#fff;display:grid;place-items:center;font-size:19px;flex-shrink:0}
.ban-note strong{display:block;font-size:13.5px;font-weight:900;color:var(--red)}
.ban-note span{display:block;font-size:12.5px;color:var(--text-2);line-height:1.6;margin-top:3px}
.ban-reason{font-weight:700}
.ban-link{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:900;color:var(--red);margin-top:8px}

/* ---- sponsored post cards ---- */
.sp-imgwrap{position:relative;margin:-16px -16px 14px;overflow:hidden;border-radius:16px 16px 0 0}
.sp-img{width:100%;display:block;object-fit:cover;max-height:280px}
.sp-dl{position:absolute;right:10px;bottom:10px;background:rgba(10,31,13,.72);color:#fff;backdrop-filter:blur(6px);
  font-size:11.5px;font-weight:900;padding:8px 13px;border-radius:20px;display:inline-flex;align-items:center;gap:5px}
.sp-dl:hover{background:var(--purple)}
.sp-content{font-size:12.5px;color:var(--text-2);margin-top:8px;line-height:1.65;white-space:pre-wrap;word-break:break-word}
.sp-copy{margin-top:9px;background:var(--purple-bg);color:var(--purple);border-radius:9px;padding:8px 12px;
  font-size:11.5px;font-weight:900;display:inline-flex;align-items:center;gap:5px}
.sp-copy:hover{background:var(--purple-bg2)}
.sp-reopen{display:block;text-align:center;margin-top:9px;font-size:12px;font-weight:800;color:var(--purple)}
.sp-reward-line{margin-top:14px;text-align:center;font-size:13px;color:var(--text-2);font-weight:700;
  background:var(--purple-bg);border-radius:11px;padding:11px}
.sp-reward-line strong{color:var(--purple);font-weight:900}
.m-ico.warn{background:var(--gold-bg);color:var(--gold-dark)}
.modal .m-sub strong{color:var(--red);font-weight:900}

/* ---- advertise with us ---- */
.ladv{display:grid;gap:22px;align-items:start}
.ladv-main h3{font-size:18px;font-weight:900;margin-bottom:16px}
.ladv-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.ladv-list li{display:flex;gap:13px;background:var(--card);border:1px solid var(--card-border);border-radius:14px;padding:15px;transition:all .18s}
.ladv-list li>i{font-size:20px;color:var(--purple);flex-shrink:0;width:38px;height:38px;border-radius:12px;background:var(--purple-bg2);display:grid;place-items:center}
.ladv-list strong{display:block;font-size:14px;font-weight:900}
.ladv-list span{display:block;font-size:12.5px;color:var(--text-3);line-height:1.6;margin-top:3px}
@media(hover:hover){.ladv-list li:hover{border-color:var(--purple-border);transform:translateX(3px);box-shadow:var(--shadow)}}
.ladv-card{background:var(--card);border:1px solid var(--card-border);border-radius:18px;padding:22px;position:sticky;top:78px}
.ladv-ico{width:50px;height:50px;border-radius:16px;background:var(--gold-bg);color:var(--gold-dark);display:grid;place-items:center;font-size:24px;margin-bottom:14px}
.ladv-card h4{font-size:16px;font-weight:900}
.ladv-tags{display:flex;flex-wrap:wrap;gap:6px;margin:13px 0}
.ladv-tags span{font-size:11px;font-weight:800;background:var(--bg-input);color:var(--text-2);padding:6px 10px;border-radius:20px;border:1px solid var(--card-border)}
.ladv-card p{font-size:12.5px;color:var(--text-3);line-height:1.65;margin-bottom:16px}
.lfoot-rc{display:inline-flex;align-items:center;gap:4px;background:var(--purple-bg2);color:var(--purple-dark);
  font-size:11px;font-weight:900;padding:3px 9px;border-radius:20px;margin-left:8px}
@media(min-width:900px){.ladv{grid-template-columns:1.35fr .8fr;gap:30px}.ladv-list{grid-template-columns:1fr 1fr}}

/* ============================================================================
   ICONS — Solar Bold Duotone, inlined SVG
   ============================================================================ */
.ic{width:1.15em;height:1.15em;display:inline-block;vertical-align:-0.22em;flex-shrink:0;fill:currentColor}
.ic-lg{width:1.5em;height:1.5em}
.ic-sm{width:1em;height:1em}
/* icons inside round chips and buttons should centre cleanly */
.icon-btn .ic,.rc-ico .ic,.menu-ico .ic,.ov-ico .ic,.gate-ico .ic,.m-ico .ic,
.lcard-ico .ic,.lwhy-ico .ic,.share-ico .ic,.bc-ico .ic,.vb-ico .ic,.plat-badge .ic,
.cur-flag .ic,.bi-ico .ic,.ss .ic,.lstep-n .ic,.ladv-ico .ic{vertical-align:middle}
.nav-item .ic{width:20px;height:20px;vertical-align:middle}
.nav-item.active .ic{width:17px;height:17px}
.btn .ic{width:1.1em;height:1.1em;vertical-align:-0.2em}
.empty .ic{width:38px;height:38px;opacity:.35;display:block;margin:0 auto 10px}
.wc3-vq .ic{width:19px;height:19px;display:block;margin:0 auto}
.wc3-bigico .ic{width:1em;height:1em}


/* ============================================================================
   SIDEBAR DRAWER
   ============================================================================ */
.ra-scrim{position:fixed;inset:0;background:rgba(10,20,13,.5);z-index:200;opacity:0;visibility:hidden;transition:opacity .25s;backdrop-filter:blur(2px)}
.ra-scrim.open{opacity:1;visibility:visible}
.ra-drawer{position:fixed;top:0;left:0;bottom:0;width:82%;max-width:300px;background:var(--card);z-index:201;
  box-shadow:10px 0 44px rgba(10,20,13,.28);display:flex;flex-direction:column;
  transform:translateX(-102%);transition:transform .3s cubic-bezier(.2,.8,.2,1);overflow:hidden}
.ra-drawer.open{transform:translateX(0)}

/* header */
.rd-head{padding:16px 16px 14px;flex-shrink:0}
.rd-close{position:absolute;top:12px;right:12px;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.18);
  color:#fff;display:grid;place-items:center;z-index:2}
.rd-close:hover{background:rgba(255,255,255,.3)}
.rd-user{display:flex;align-items:center;gap:10px;color:#fff}
.rd-av{width:44px;height:44px;border-radius:50%;overflow:hidden;border:2px solid rgba(255,255,255,.4);flex-shrink:0}
.rd-av img{width:100%;height:100%;object-fit:cover;display:block}
.rd-id{min-width:0}
.rd-name{display:block;font-weight:900;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rd-handle{display:block;font-size:11.5px;opacity:.8;font-weight:700}
.rd-bal{margin-top:12px}
.rd-bal-l{display:block;font-size:9.5px;font-weight:800;opacity:.7;text-transform:uppercase;letter-spacing:.12em}
.rd-bal-v{display:block;font-family:inherit;font-weight:900;font-size:21px;margin-top:2px}
.rd-plan{display:inline-flex;align-items:center;gap:5px;margin-top:10px;background:rgba(255,255,255,.2);
  font-size:10.5px;font-weight:900;padding:5px 10px;border-radius:20px;color:#fff}
.rd-plan.on{background:var(--gold);color:#0D1214}

/* menu */
.rd-menu{flex:1;overflow-y:auto;padding:10px 10px 4px;-webkit-overflow-scrolling:touch}
.rd-group{font-size:9.5px;font-weight:900;color:var(--text-3);text-transform:uppercase;letter-spacing:.12em;
  padding:12px 8px 5px}
.rd-group:first-child{padding-top:4px}
.rd-item{display:flex;align-items:center;gap:11px;padding:9px 9px;border-radius:10px;color:var(--text-2);
  font-weight:800;font-size:13px;margin-bottom:1px;transition:all .15s}
.rd-item:hover{background:var(--purple-bg);color:var(--text)}
.rd-item.active{background:var(--purple);color:#fff}
.rd-ic{width:30px;height:30px;border-radius:9px;background:var(--bg-input);color:var(--purple);
  display:grid;place-items:center;flex-shrink:0;transition:all .15s}
.rd-ic .ic{width:17px;height:17px}
.rd-item:hover .rd-ic{background:var(--purple-bg2)}
.rd-item.active .rd-ic{background:rgba(255,255,255,.22);color:#fff}
.rd-ic.tg{color:#229ED9}
.rd-t{flex:1;min-width:0}
.rd-badge{background:var(--gold);color:#0D1214;font-size:9.5px;font-weight:900;padding:2px 7px;border-radius:20px}
.rd-item.active .rd-badge{background:#fff;color:#0B8A1C}
.rd-ext{width:13px;height:13px;opacity:.45}

.rd-logout{display:flex;align-items:center;justify-content:center;gap:8px;margin:8px 10px 12px;height:42px;
  background:var(--red-bg);color:var(--red);border-radius:11px;font-weight:900;font-size:13px;flex-shrink:0;transition:all .15s}
.rd-logout:hover{background:var(--red);color:#fff}

/* desktop: permanent rail */
@media (min-width:900px){
  .ra-drawer{position:sticky;top:0;height:100vh;transform:none!important;width:264px;max-width:264px;
    border-right:1px solid var(--border);box-shadow:none;grid-area:side}
  .rd-close{display:none}
}

/* ============================================================================
   ONBOARDING STEPS
   ============================================================================ */
.onb{background:var(--card);border:1px solid var(--card-border);border-radius:18px;padding:16px;box-shadow:var(--shadow)}
.onb-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.onb-title{font-weight:900;font-size:15px}
.onb-sub{font-size:12px;color:var(--text-3);margin-top:2px;font-weight:600}
.onb-ring{width:46px;height:46px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;position:relative;
  background:conic-gradient(var(--purple) calc(var(--pct)*1%), var(--bg-input) 0)}
.onb-ring::after{content:'';position:absolute;inset:4px;border-radius:50%;background:var(--card)}
.onb-ring span{position:relative;z-index:1;font-size:11.5px;font-weight:900;color:var(--purple)}
.onb-steps{display:flex;flex-direction:column;gap:8px;position:relative}
/* connector line between steps */
.onb-steps::before{content:'';position:absolute;left:23px;top:34px;bottom:34px;width:2px;
  background:repeating-linear-gradient(180deg,var(--border) 0 4px,transparent 4px 8px)}
.onb-step{display:flex;align-items:center;gap:12px;padding:11px;border-radius:13px;
  border:1.5px solid var(--card-border);background:var(--card);position:relative;z-index:1;transition:all .18s}
.onb-step:hover{border-color:var(--purple);background:var(--purple-bg)}
.onb-step.done{border-color:var(--purple-border);background:var(--purple-bg);pointer-events:none}
.onb-num{width:30px;height:30px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
  background:var(--bg-input);color:var(--text-3);font-weight:900;font-size:13px;border:2px solid var(--card)}
.onb-step.done .onb-num{background:var(--purple);color:#fff}
.onb-step.done .onb-num .ic{width:20px;height:20px}
.onb-body{flex:1;min-width:0}
.onb-t{display:block;font-weight:900;font-size:13.5px}
.onb-step.done .onb-t{color:var(--purple-dark)}
.onb-s{display:block;font-size:11.5px;color:var(--text-3);font-weight:600;margin-top:1px}
.onb-step.done .onb-s{color:var(--purple)}
.onb-chv{color:var(--text-3);width:16px;height:16px}

/* ============================================================================
   TOP EARNERS + UPGRADE CARDS
   ============================================================================ */
.te-card{background:var(--card);border:1px solid var(--card-border);border-radius:16px;padding:14px;margin-bottom:10px;transition:all .18s}
.te-card:hover{border-color:var(--purple-border);box-shadow:var(--shadow)}
.te-row{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.te-ico{width:42px;height:42px;border-radius:14px;background:var(--gold-bg);color:var(--gold-dark);
  display:grid;place-items:center;flex-shrink:0}
.te-ico .ic{width:22px;height:22px}
.te-txt{flex:1;min-width:0}
.te-txt strong{display:block;font-size:13.5px;font-weight:900}
.te-txt span{display:block;font-size:11.5px;color:var(--text-3);font-weight:600;margin-top:1px}
.te-btn{height:42px;font-size:13px}

.up-card{position:relative;overflow:hidden;display:flex;align-items:center;gap:12px;border-radius:16px;padding:14px;color:#fff}
.up-ico{width:42px;height:42px;border-radius:14px;background:rgba(255,255,255,.2);display:grid;place-items:center;flex-shrink:0}
.up-ico .ic{width:22px;height:22px}
.up-txt{flex:1;min-width:0}
.up-txt strong{display:block;font-size:13.5px;font-weight:900}
.up-txt span{display:block;font-size:11.5px;opacity:.9;font-weight:600;margin-top:1px;line-height:1.45}
.up-chv{opacity:.8;width:16px;height:16px}

/* ============================================================================
   WITHDRAWAL RESULT + HISTORY
   ============================================================================ */
.modal-tall{min-height:80vh}
.wres{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:12px 4px 0}
.wres-anim{position:relative;width:108px;height:108px;display:grid;place-items:center;margin-bottom:20px}
.wres-ring{position:absolute;inset:0;border-radius:50%;border:3px solid var(--purple-bg2);border-top-color:var(--purple);animation:spin 1.4s linear infinite}
.wres-ring.two{inset:10px;border-width:2px;border-color:transparent;border-bottom-color:var(--gold);animation:spin 2s linear infinite reverse}
.wres-core{width:64px;height:64px;border-radius:50%;background:var(--purple);color:#fff;display:grid;place-items:center;
  box-shadow:0 8px 22px rgba(15,138,34,.34);animation:wresPulse 2.2s ease-in-out infinite}
.wres-core .ic{width:30px;height:30px}
@keyframes wresPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
.wres h3{font-size:20px;font-weight:900}
.wres .m-sub{max-width:300px}
.wres-eta{display:flex;align-items:flex-start;gap:11px;text-align:left;background:var(--purple-bg);
  border-radius:14px;padding:13px;margin-top:20px;width:100%}
.wres-eta .ic{width:22px;height:22px;color:var(--purple);flex-shrink:0}
.wres-eta strong{display:block;font-size:13px;font-weight:900;color:var(--purple-dark)}
.wres-eta span{display:block;font-size:11.5px;color:var(--text-3);font-weight:600;margin-top:2px;line-height:1.5}
.wres-dest{width:100%;background:var(--bg-input);border-radius:14px;padding:13px;margin-top:10px;text-align:left}
.wres-dl{display:block;font-size:9.5px;font-weight:900;color:var(--text-3);text-transform:uppercase;letter-spacing:.1em}
.wres-dv{display:block;font-size:17px;font-weight:900;letter-spacing:.12em;margin-top:3px}
.wres-dn{display:block;font-size:12px;color:var(--text-3);font-weight:700;margin-top:1px}
.wres-foot{padding-top:18px;flex-shrink:0}

.wh-list{display:flex;flex-direction:column;gap:8px}
.wh-row{display:flex;align-items:center;gap:11px;background:var(--card);border:1px solid var(--card-border);
  border-radius:14px;padding:12px;cursor:pointer;transition:all .18s}
.wh-row:hover{border-color:var(--purple-border);box-shadow:var(--shadow);transform:translateY(-1px)}
.wh-ic{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;flex-shrink:0}
.wh-ic .ic{width:21px;height:21px}
.wh-ic.ok{background:var(--purple-bg2);color:var(--purple-dark)}
.wh-ic.pend{background:var(--gold-bg);color:var(--gold-dark)}
.wh-ic.bad{background:var(--red-bg);color:var(--red)}
.wh-mid{flex:1;min-width:0}
.wh-amt{display:block;font-family:inherit;font-weight:900;font-size:15px}
.wh-meta{display:block;font-size:11.5px;color:var(--text-3);font-weight:700;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wh-meta .mono{letter-spacing:.06em}
.wh-right{text-align:right;flex-shrink:0}
.wh-pill{display:inline-block;font-size:10px;font-weight:900;padding:3px 9px;border-radius:20px}
.wh-pill.ok{background:var(--purple-bg2);color:var(--purple-dark)}
.wh-pill.pend{background:var(--gold-bg);color:var(--gold-dark)}
.wh-pill.bad{background:var(--red-bg);color:var(--red)}
.wh-time{display:block;font-size:10.5px;color:var(--text-3);font-weight:700;margin-top:4px}
.lfoot-note a{color:var(--text-3);text-decoration:underline}
.lfoot-note a:hover{color:var(--purple)}
/* completed state for the withdrawal modal */
.wres-core.done{background:var(--purple);animation:wresPop .5s cubic-bezier(.2,1.4,.3,1) both}
.wres-core.done .ic{width:34px;height:34px}
@keyframes wresPop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
.wres-burst{position:absolute;inset:0;border-radius:50%;border:3px solid var(--purple);opacity:0;animation:wresBurst 1.1s ease-out .15s infinite}
@keyframes wresBurst{0%{transform:scale(.62);opacity:.65}100%{transform:scale(1.25);opacity:0}}
.wres-eta.ok{background:var(--purple-bg2)}
.wres-eta.ok .ic{color:var(--purple-dark)}
.vb-retry{margin-left:auto;background:var(--purple);color:#fff;font-size:11px;font-weight:900;padding:5px 12px;border-radius:8px;flex-shrink:0}
.vb-retry:hover{background:var(--purple-dark)}

/* ============================================================================
   DEPOSIT SUCCESS MODAL
   ============================================================================ */
.ds-wrap{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:14px 4px 0}
.ds-anim{position:relative;width:116px;height:116px;display:grid;place-items:center;margin-bottom:18px;overflow:hidden;border-radius:50%}
.ds-ring{position:absolute;inset:0;border-radius:50%;border:3px solid var(--purple);opacity:0;animation:dsPulse 1.8s ease-out infinite}
.ds-ring.two{animation-delay:.6s}
@keyframes dsPulse{0%{transform:scale(.62);opacity:.6}100%{transform:scale(1.28);opacity:0}}
.ds-core{width:76px;height:76px;border-radius:50%;color:#fff;display:grid;place-items:center;
  background-color:#0F8A22;background-image:linear-gradient(152deg,#18A82C 0%,#0F8A22 50%,#0A6B1A 100%);
  box-shadow:0 12px 30px rgba(15,138,34,.42);animation:dsPop .55s cubic-bezier(.2,1.5,.35,1) both}
.ds-core .ic{width:40px;height:40px}
@keyframes dsPop{0%{transform:scale(.3) rotate(-25deg);opacity:0}60%{transform:scale(1.14) rotate(4deg)}100%{transform:scale(1) rotate(0);opacity:1}}
.ds-anim .bub{width:8px;height:8px;background:var(--neon);opacity:.55;animation:bubRise 3.2s linear infinite}
.ds-anim .bub-r2{animation-delay:.9s}
.ds-anim .bub-r3{animation-delay:1.8s}

.ds-wrap h3{font-size:19px;font-weight:900;margin-bottom:4px}
.ds-amt{font-family:inherit;font-weight:900;font-size:36px;color:var(--purple);
  letter-spacing:-.02em;line-height:1.1;margin:2px 0 4px;animation:dsCount .5s ease-out both .15s}
@keyframes dsCount{0%{transform:translateY(8px);opacity:0}100%{transform:none;opacity:1}}
.ds-sub{font-size:12.5px;color:var(--text-3);font-weight:700;margin-bottom:4px}
.ds-rows{width:100%;background:var(--bg-input);border-radius:14px;padding:6px 14px;margin-top:18px}
.ds-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--border)}
.ds-row:last-child{border-bottom:0}
.ds-row .k{font-size:12px;color:var(--text-3);font-weight:700}
.ds-row .v{font-size:13.5px;font-weight:900;text-align:right}
.ds-foot{padding-top:18px;flex-shrink:0}

/* ---- VTU token box + history rows ---- */
.vtu-token{width:100%;background:var(--purple-bg);border:1.5px dashed var(--purple-border);border-radius:14px;
  padding:14px;margin-top:16px;text-align:center}
.vt-l{display:flex;align-items:center;justify-content:center;gap:5px;font-size:10.5px;font-weight:900;
  color:var(--purple-dark);text-transform:uppercase;letter-spacing:.08em}
.vt-l .ic{width:14px;height:14px}
.vt-v{display:block;font-size:19px;font-weight:900;letter-spacing:.1em;margin:7px 0 10px;word-break:break-all;color:var(--text)}
.vtu-list{display:flex;flex-direction:column;gap:8px}
.vtu-row{display:flex;align-items:center;gap:11px;background:var(--card);border:1px solid var(--card-border);
  border-radius:14px;padding:12px;cursor:pointer;transition:all .18s}
.vtu-row:hover{border-color:var(--purple-border);box-shadow:var(--shadow);transform:translateY(-1px)}
.vtu-ic{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;flex-shrink:0}
.vtu-ic .ic{width:21px;height:21px}
.vtu-ic.ok{background:var(--purple-bg2);color:var(--purple-dark)}
.vtu-ic.pend{background:var(--gold-bg);color:var(--gold-dark)}
.vtu-ic.bad{background:var(--red-bg);color:var(--red)}
.vtu-mid{flex:1;min-width:0}
.vtu-t{display:block;font-weight:900;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vtu-s{display:block;font-size:11.5px;color:var(--text-3);font-weight:700;margin-top:2px}
.vtu-right{text-align:right;flex-shrink:0}
.vtu-amt{display:block;font-family:inherit;font-weight:900;font-size:14px}
.vtu-pill{display:inline-block;font-size:9.5px;font-weight:900;padding:2px 8px;border-radius:20px;margin-top:4px}
.vtu-pill.ok{background:var(--purple-bg2);color:var(--purple-dark)}
.vtu-pill.pend{background:var(--gold-bg);color:var(--gold-dark)}
.vtu-pill.bad{background:var(--red-bg);color:var(--red)}
.vtu-unavail{display:flex;gap:12px;align-items:flex-start;background:var(--gold-bg);border:1px solid #F2DE8A;
  border-radius:14px;padding:14px;margin-bottom:12px}
.vtu-unavail .ic{width:22px;height:22px;color:var(--gold-dark);flex-shrink:0}
.vtu-unavail strong{display:block;font-size:13px;font-weight:900;color:var(--gold-dark)}
.vtu-unavail span{display:block;font-size:12px;color:var(--text-2);line-height:1.6;margin-top:2px}
.m-ico.pend{background:var(--gold-bg);color:var(--gold-dark)}
.m-ico.bad{background:var(--red-bg);color:var(--red)}


/* ============================================================================
   NO HORIZONTAL SCROLL
   Decorative bubbles sit outside their card on purpose (right:-46px and so on).
   If any container forgets overflow:hidden, that overhang becomes real page
   width and the phone lets you swipe into empty space. These rules make that
   impossible regardless.
   ============================================================================ */
html{overflow-x:hidden}
body{overflow-x:hidden;max-width:100%;position:relative}
/* any element carrying a bubble clips it, even if a specific rule was missed */
.gsurf,.pay-top,.vtu-bal,.phead,.wd-bal,.sales-hero,.up-card,
.rd-head,.bankcard,.lcta,.onb,.te-card{position:relative;overflow:hidden}
/* wallet cards clip their own bubbles, but the DECK around them stays open */
.wallet-card3{overflow:hidden}
/* The deck fans its cards out on purpose (rotate + offset), so it must NEVER be
   clipped: doing so slices the card behind in half. It cannot create sideways
   scroll anyway, because html/body already clip horizontal overflow above. */
.wdeck,.wdeck-stage{overflow:visible}
/* long unbroken strings (references, account names) must wrap, not stretch */
.mono,.acct-num,.ref-link-text,.wres-dv,.vt-v{overflow-wrap:anywhere}

/* ---- theme toggle: both icons render server-side, CSS picks one ----
   Previously the icon was painted by JS that ran before app.js had loaded, so
   it stayed blank until the button was clicked. This cannot fail. */
/* Theme toggle icons.
   Targeted by the .ico-light / .ico-dark classes ALONE, not by a parent class.
   Three pages carried their own toggle markup without the wrapper class, so a
   parent-scoped rule missed them and both icons showed at once. Order matters
   here: layout first, then hide, or the hide gets overridden. */
.ico-light,.ico-dark{align-items:center;justify-content:center}
.ico-light{display:inline-flex}
.ico-dark{display:none}
[data-theme="dark"] .ico-light{display:none}
[data-theme="dark"] .ico-dark{display:inline-flex}

/* ============================================================================
   TELEGRAM JOIN POPUP + INLINE CARD
   ============================================================================ */
.tg-modal{min-height:auto;text-align:center}
.tg-head{border-radius:18px;height:104px;display:grid;place-items:center;margin:6px 0 16px}
.tg-ico{width:60px;height:60px;border-radius:50%;background:rgba(255,255,255,.22);display:grid;place-items:center;
  color:#fff;position:relative;z-index:1;animation:tgFloat 3s ease-in-out infinite}
.tg-ico .ic{width:30px;height:30px}
@keyframes tgFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.tg-title{font-size:19px;font-weight:900;line-height:1.25}
.tg-sub{font-size:13px;color:var(--text-3);line-height:1.6;margin-top:7px;font-weight:600}
.tg-btns{display:flex;flex-direction:column;gap:9px;margin:18px 0 12px}
.tg-b{display:flex;align-items:center;gap:12px;padding:13px;border-radius:14px;text-align:left;
  border:1.5px solid var(--card-border);background:var(--card);transition:all .18s}
.tg-b:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.tg-b.chan{border-color:var(--tg-border);background:var(--tg-bg)}
.tg-b.chan:hover{border-color:#229ED9}
.tg-b.comm{border-color:var(--purple-border);background:var(--purple-bg)}
.tg-b.comm:hover{border-color:var(--purple)}
.tg-b-ic{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;flex-shrink:0;color:#fff}
.tg-b.chan .tg-b-ic{background:#229ED9}
.tg-b.comm .tg-b-ic{background:var(--purple)}
.tg-b-ic .ic{width:21px;height:21px}
.tg-b-t{flex:1;min-width:0}
.tg-b-t strong{display:block;font-size:13.5px;font-weight:900;color:var(--text)}
.tg-b-t small{display:block;font-size:11.5px;color:var(--text-3);font-weight:600;margin-top:1px}
.tg-b-chv{color:var(--text-3);width:16px;height:16px}
/* the dismiss control is deliberately large and obvious */
.tg-close{height:50px;font-size:14px;font-weight:900;border-width:1.5px}

/* inline version for the dashboard */
.tg-card{border-radius:16px;padding:14px;margin-top:10px;border:1px solid var(--card-border);background:var(--card)}
.tg-card-head{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.tg-card-ic{width:42px;height:42px;border-radius:13px;background:var(--tg-bg);color:var(--tg);display:grid;place-items:center;flex-shrink:0}
.tg-card-ic .ic{width:22px;height:22px}
.tg-card-t{flex:1;min-width:0}
.tg-card-t strong{display:block;font-size:13.5px;font-weight:900}
.tg-card-t span{display:block;font-size:11.5px;color:var(--text-3);font-weight:600;margin-top:1px;line-height:1.45}
.tg-card-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tg-mini{display:flex;align-items:center;justify-content:center;gap:6px;height:44px;border-radius:12px;
  font-weight:900;font-size:12.5px;transition:all .18s}
.tg-mini .ic{width:16px;height:16px}
.tg-mini.chan{background:#229ED9;color:#fff}
.tg-mini.chan:hover{background:#1B84B5}
.tg-mini.comm{background:var(--purple);color:#fff}
.tg-mini.comm:hover{background:var(--purple-dark)}
.tg-card-btns.one{grid-template-columns:1fr}
/* balance card cross-fade when switching wallet */
.wd-bal{transition:opacity .2s}
.wd-swap{opacity:.35}

/* ---- confirm modal (replaces native confirm) ---- */
.cfm-modal{min-height:auto;text-align:center;padding-bottom:22px}
.cfm-ico{width:66px;height:66px;border-radius:22px;display:grid;place-items:center;margin:6px auto 14px}
.cfm-ico .ic{width:32px;height:32px}
.cfm-ico.primary{background:var(--purple-bg2);color:var(--purple-dark)}
.cfm-ico.danger{background:var(--red-bg);color:var(--red)}
.cfm-ico.warn{background:var(--gold-bg);color:var(--gold-dark)}
.cfm-title{font-size:18px;font-weight:900;line-height:1.3}
.cfm-text{font-size:13.5px;color:var(--text-2);line-height:1.65;margin-top:8px}
.cfm-btns{display:flex;gap:9px;margin-top:20px}
.cfm-btns .btn{flex:1;height:50px;font-size:14px}
.btn-danger{background:var(--red);color:#fff}
.btn-danger:hover{filter:brightness(.93)}

/* ---- earn page balance card ---- */
.earn-bal{border:0;padding:18px;border-radius:20px;
  /* .card is declared later in this file and would otherwise paint over the
     green from .gsurf, leaving the card looking transparent in light mode. */
  background-color:#0F8A22;
  background-image:linear-gradient(152deg,#18A82C 0%,#0F8A22 46%,#0A6B1A 100%);
  box-shadow:0 16px 36px rgba(15,138,34,.30);color:#fff}
.eb-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.eb-l{font-size:10.5px;font-weight:800;opacity:.72;text-transform:uppercase;letter-spacing:.12em}
.eb-chip{display:inline-flex;align-items:center;gap:4px;background:rgba(255,255,255,.2);font-size:10px;
  font-weight:900;padding:4px 9px;border-radius:20px}
.eb-chip .ic{width:13px;height:13px}
.eb-v{font-size:32px;margin-top:6px;letter-spacing:-.02em;text-shadow:0 2px 14px rgba(0,0,0,.28)}
.eb-sub{font-size:11.5px;font-weight:700;opacity:.85;margin-top:4px}
.eb-btn{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:14px;height:44px;
  background:var(--gold);color:#0D1214;border-radius:13px;font-weight:900;font-size:13.5px;transition:all .18s}
.eb-btn:hover{filter:brightness(1.06);transform:translateY(-1px)}
/* animated ellipsis while a VTU order is being confirmed */
.dots i{font-style:normal;animation:dotBlink 1.4s infinite}
.dots i:nth-child(2){animation-delay:.2s}
.dots i:nth-child(3){animation-delay:.4s}
@keyframes dotBlink{0%,60%,100%{opacity:.25}30%{opacity:1}}

/* ---- hide balances (eye toggle on the wallet deck) ---- */
.wc3-label{display:flex;align-items:center;gap:7px}
.wc3-eye{width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.18);color:#fff;
  display:inline-grid;place-items:center;flex-shrink:0;transition:background .16s,transform .12s}
.wc3-eye:hover{background:rgba(255,255,255,.3)}
.wc3-eye:active{transform:scale(.9)}
.wc3-eye .ic{width:15px;height:15px}
/* which of the two icons shows depends on the current state */
.wc3-eye .eye-off{display:none}
body.hide-bal .wc3-eye .eye-on{display:none}
body.hide-bal .wc3-eye .eye-off{display:inline-flex}
/* the dots that stand in for a hidden amount */
.bal-dots{display:inline-flex;align-items:center;gap:6px;vertical-align:middle}
.bal-dots i{width:11px;height:11px;border-radius:50%;background:currentColor;display:block;opacity:.92}
.wc3-amount .bal-dots i{width:13px;height:13px}

/* ============================================================================
   TASKS
   ============================================================================ */
.tk-allow{background:var(--card);border:1px solid var(--card-border);border-radius:14px;padding:13px}
.tka-bar{height:6px;border-radius:6px;background:var(--bg-input);overflow:hidden}
.tka-bar span{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--purple),var(--neon));transition:width .5s}
.tka-txt{display:flex;align-items:center;justify-content:space-between;margin-top:9px;font-size:12px;color:var(--text-3);font-weight:700}
.tka-txt strong{color:var(--text);font-size:14px}
.tka-rate{background:var(--purple-bg2);color:var(--purple-dark);padding:3px 10px;border-radius:20px;font-weight:900;font-size:11.5px}
.sh-count{background:var(--purple);color:#fff;font-size:11px;font-weight:900;padding:2px 9px;border-radius:20px}

.tk{background:var(--card);border:1px solid var(--card-border);border-radius:18px;padding:16px;margin-bottom:11px;transition:all .2s}
.tk:hover{border-color:var(--purple-border);box-shadow:var(--shadow)}
.tk.soon{opacity:.72}
.tk.is-done{border-color:var(--purple-border);background:var(--purple-bg)}
.tk-top{display:flex;gap:12px;align-items:flex-start}
.tk-plat{width:46px;height:46px;border-radius:14px;background:var(--bg-input);border:1px solid var(--card-border);
  display:grid;place-items:center;flex-shrink:0}
.tk-plat .ic{width:24px;height:24px}
.tk-head{flex:1;min-width:0}
.tk-head h4{font-size:15px;font-weight:900;line-height:1.3}
.tk-meta{display:flex;align-items:center;gap:8px;margin-top:6px;flex-wrap:wrap}
.tk-pay{background:var(--purple);color:#fff;font-size:12px;font-weight:900;padding:3px 11px;border-radius:20px}
.tk-time,.tk-did{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:800;color:var(--text-3)}
.tk-time .ic,.tk-did .ic{width:14px;height:14px}
.tk-time.urgent{color:var(--red)}
.tk-desc{font-size:13px;color:var(--text-2);line-height:1.6;margin-top:11px}
.tk-steps{font-size:12.5px;color:var(--text-2);line-height:1.65;background:var(--bg-input);border-radius:12px;padding:12px;margin:11px 0}
.tk-reopen{display:block;text-align:center;margin-top:9px;font-size:12px;font-weight:800;color:var(--purple)}
.tk-form{margin-top:12px}
.tk-soon{margin-top:12px;display:flex;align-items:center;justify-content:center;gap:7px;height:44px;border-radius:12px;
  background:var(--bg-input);color:var(--text-3);font-weight:900;font-size:13px}
.tk-limit{margin-top:12px;display:flex;align-items:center;gap:8px;background:var(--gold-bg);color:var(--gold-dark);
  border-radius:12px;padding:12px;font-size:12.5px;font-weight:800}
.tk-done-card{margin-top:12px;display:flex;align-items:center;gap:11px;background:var(--card);
  border:1.5px solid var(--purple-border);border-radius:14px;padding:13px}
.tkd-ic{width:40px;height:40px;border-radius:13px;background:var(--purple);color:#fff;display:grid;place-items:center;flex-shrink:0}
.tkd-ic .ic{width:22px;height:22px}
.tk-done-card strong{display:block;font-size:13.5px;font-weight:900;color:var(--purple-dark)}
.tk-done-card span{display:block;font-size:11.5px;color:var(--text-3);font-weight:700;margin-top:1px}

/* separator before history */
.tk-divider{display:flex;align-items:center;gap:12px;margin:30px 14px 14px}
.tk-divider::before,.tk-divider::after{content:'';flex:1;height:1px;background:var(--border)}
.tk-divider span{font-size:11px;font-weight:900;color:var(--text-3);text-transform:uppercase;letter-spacing:.1em}

.tkh-list{display:flex;flex-direction:column;gap:8px}
.tkh{display:flex;align-items:center;gap:11px;background:var(--card);border:1px solid var(--card-border);border-radius:13px;padding:11px;transition:all .18s}
.tkh:hover{border-color:var(--purple-border)}
.tkh-ic{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;flex-shrink:0;background:var(--bg-input)}
.tkh-ic .ic{width:19px;height:19px}
.tkh-ic.ok{background:var(--purple-bg2)}
.tkh-ic.pend{background:var(--gold-bg)}
.tkh-ic.bad{background:var(--red-bg)}
.tkh-mid{flex:1;min-width:0}
.tkh-t{display:block;font-size:13px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tkh-d{display:block;font-size:11px;color:var(--text-3);font-weight:700;margin-top:1px}
.tkh-right{text-align:right;flex-shrink:0}
.tkh-amt{display:block;font-weight:900;font-size:13px}
.tkh-amt.ok{color:var(--purple)}
.tkh-amt.pend,.tkh-amt.bad{color:var(--text-3)}
.tkh-pill{display:inline-block;font-size:9.5px;font-weight:900;padding:2px 8px;border-radius:20px;margin-top:3px}
.tkh-pill.ok{background:var(--purple-bg2);color:var(--purple-dark)}
.tkh-pill.pend{background:var(--gold-bg);color:var(--gold-dark)}
.tkh-pill.bad{background:var(--red-bg);color:var(--red)}

/* ---- payout celebration ---- */
.pay-burst{position:relative;width:130px;height:130px;display:grid;place-items:center;margin:0 auto 20px}
.pb-ring{position:absolute;inset:0;border-radius:50%;border:2px solid var(--purple);opacity:0;animation:pbRing 2s ease-out infinite}
.pb-ring.two{animation-delay:.35s}
.pb-ring.three{animation-delay:.7s}
@keyframes pbRing{0%{transform:scale(.55);opacity:.7}100%{transform:scale(1.3);opacity:0}}
.pb-core{width:84px;height:84px;border-radius:50%;color:#fff;display:grid;place-items:center;
  background-color:#0F8A22;background-image:linear-gradient(152deg,#18A82C,#0A6B1A);
  box-shadow:0 14px 34px rgba(15,138,34,.45);animation:pbPop .6s cubic-bezier(.2,1.6,.35,1) both}
.pb-core .ic{width:44px;height:44px}
@keyframes pbPop{0%{transform:scale(.2) rotate(-40deg);opacity:0}60%{transform:scale(1.16) rotate(6deg)}100%{transform:scale(1) rotate(0);opacity:1}}
.pb-spark{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--gold);
  transform:rotate(var(--a)) translateY(-46px);opacity:0;animation:pbSpark 1.6s ease-out infinite;animation-delay:var(--d)}
@keyframes pbSpark{0%{opacity:0;transform:rotate(var(--a)) translateY(-30px) scale(.4)}
  35%{opacity:1}100%{opacity:0;transform:rotate(var(--a)) translateY(-68px) scale(1.1)}}
.pay-pop{animation:payPop .55s cubic-bezier(.2,1.5,.3,1) both .2s}
@keyframes payPop{0%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}}

/* ---- integrity warning ---- */
.warn-ico{width:76px;height:76px;border-radius:26px;background:var(--gold-bg);color:var(--gold-dark);
  display:grid;place-items:center;margin:6px auto 16px;animation:warnShake 2.4s ease-in-out infinite}
.warn-ico .ic{width:38px;height:38px}
@keyframes warnShake{0%,88%,100%{transform:rotate(0)}91%{transform:rotate(-7deg)}95%{transform:rotate(7deg)}}
.warn-lead{font-size:13.5px;color:var(--text-2);line-height:1.6;margin-top:6px}
.warn-task{margin:12px 0;background:var(--gold-bg);border:1.5px solid #F0DE9B;border-radius:13px;
  padding:14px;font-weight:900;font-size:15px;color:var(--gold-dark)}
.warn-body{font-size:13px;color:var(--text-2);line-height:1.7}
.warn-body strong{color:var(--red);font-weight:900}
.warn-body.soft{font-size:12px;color:var(--text-3);margin-top:10px}

/* ============================================================================
   SPONSORED POST
   ============================================================================ */
.sp-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--card);border:1px solid var(--card-border);border-radius:14px;padding:12px 14px}
.spb-pay{background:var(--purple);color:#fff;font-weight:900;font-size:14px;padding:5px 14px;border-radius:20px}
.spb-time{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:800;color:var(--text-3)}
.spb-time .ic{width:15px;height:15px}

.sp-step{background:var(--card);border:1px solid var(--card-border);border-radius:18px;padding:16px;margin-bottom:11px}
.sps-head{display:flex;align-items:center;gap:12px;margin-bottom:13px}
.sps-n{width:32px;height:32px;border-radius:50%;background:var(--purple);color:#fff;display:grid;place-items:center;
  font-family:inherit;font-weight:900;font-size:14px;flex-shrink:0}
.sps-head strong{display:block;font-size:14.5px;font-weight:900}
.sps-head span{display:block;font-size:11.5px;color:var(--text-3);font-weight:600;margin-top:1px}
.sp-imgbox{border-radius:14px;overflow:hidden;border:1px solid var(--card-border);margin-bottom:12px;background:var(--bg-input)}
.sp-imgbox img{width:100%;display:block;max-height:340px;object-fit:cover}
.sp-caption{background:var(--bg-input);border:1px solid var(--card-border);border-radius:14px;padding:14px;
  font-size:13.5px;line-height:1.7;color:var(--text);margin-bottom:12px;white-space:pre-wrap;word-break:break-word}
.btn.step-done{background:var(--purple-bg2);color:var(--purple-dark);border:1.5px solid var(--purple)}

.sp-warnbox{display:flex;gap:10px;align-items:flex-start;background:var(--red-bg);border:1px solid #F3C7C7;
  border-radius:13px;padding:13px;margin-top:16px;text-align:left}
.sp-warnbox .ic{width:20px;height:20px;color:var(--red);flex-shrink:0}
.sp-warnbox span{font-size:12.5px;color:var(--text-2);line-height:1.6}
.sp-warnbox strong{color:var(--red);font-weight:900}

.sp-checklist{width:100%;margin-top:16px;display:flex;flex-direction:column;gap:8px}
.spc-row{display:flex;align-items:center;gap:9px;background:var(--purple-bg);border-radius:11px;padding:11px 13px;
  font-size:13px;font-weight:800;color:var(--purple-dark);text-align:left}
.spc-row .ic{width:19px;height:19px;flex-shrink:0}

.sp-complete{border-radius:20px;padding:26px 20px;text-align:center;color:#fff}
.spc-ic{width:72px;height:72px;border-radius:50%;background:rgba(255,255,255,.22);display:grid;place-items:center;
  margin:0 auto 14px;animation:pbPop .6s cubic-bezier(.2,1.6,.35,1) both}
.spc-ic .ic{width:38px;height:38px}
.sp-complete h3{font-size:19px;font-weight:900}
.sp-complete p{font-size:13.5px;opacity:.92;margin-top:7px}
.sp-complete strong{font-weight:900}
.spc-next{display:inline-flex;align-items:center;gap:6px;margin-top:16px;background:rgba(255,255,255,.18);
  border-radius:20px;padding:8px 14px;font-size:12px;font-weight:800}
.spc-next .ic{width:15px;height:15px}

.sp-none{background:var(--card);border:1.5px dashed var(--card-border);border-radius:18px;padding:34px 22px;text-align:center}
.spn-ic{width:64px;height:64px;border-radius:22px;background:var(--bg-input);color:var(--text-3);
  display:grid;place-items:center;margin:0 auto 14px}
.spn-ic .ic{width:32px;height:32px}
.sp-none h3{font-size:16px;font-weight:900}
.sp-none p{font-size:13px;color:var(--text-3);line-height:1.65;margin-top:8px}

/* ---- sponsored: first-time guide ---- */
.sp-guide{background:var(--purple-bg);border:1.5px solid var(--purple-border);border-radius:18px;padding:16px}
.spg-head{display:flex;align-items:flex-start;gap:11px;margin-bottom:14px}
.spg-ic{width:38px;height:38px;border-radius:12px;background:var(--purple);color:#fff;display:grid;place-items:center;flex-shrink:0}
.spg-ic .ic{width:20px;height:20px}
.spg-head strong{display:block;font-size:14px;font-weight:900;color:var(--purple-dark)}
.spg-head span{display:block;font-size:12px;color:var(--text-3);font-weight:600;margin-top:2px}
.spg-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.spg-steps li{display:flex;gap:11px;align-items:flex-start}
.spg-n{width:24px;height:24px;border-radius:50%;background:var(--card);border:1.5px solid var(--purple);
  color:var(--purple-dark);display:grid;place-items:center;font-weight:900;font-size:11.5px;flex-shrink:0}
.spg-steps div{flex:1;min-width:0;font-size:12px;color:var(--text-3);line-height:1.55}
.spg-steps strong{display:block;font-size:13px;font-weight:900;color:var(--text);margin-bottom:1px}
.spg-note{display:flex;gap:8px;align-items:flex-start;margin-top:14px;padding-top:13px;
  border-top:1px solid var(--purple-border);font-size:11.5px;color:var(--text-3);line-height:1.55;font-weight:600}
.spg-note .ic{width:16px;height:16px;color:var(--purple);flex-shrink:0}

/* ============================================================================
   TASK CARD — compact row, action on the right
   ============================================================================ */
.tk{background:var(--card);border:1px solid var(--card-border);border-radius:16px;padding:13px;margin-bottom:9px;transition:all .2s}
.tk:hover{border-color:var(--purple-border);box-shadow:var(--shadow)}
.tk.soon{opacity:.7}
.tk.is-open{border-color:var(--purple-border);background:var(--purple-bg)}
.tk.is-done{background:var(--purple-bg);border-color:var(--purple-border)}

.tk-row{display:flex;align-items:center;gap:12px}
.tk-plat{width:46px;height:46px;border-radius:14px;background:var(--bg-input);border:1px solid var(--card-border);
  display:grid;place-items:center;flex-shrink:0}
.tk-plat .ic{width:24px;height:24px}
.tk-head{flex:1;min-width:0}
.tk-head h4{font-size:14.5px;font-weight:900;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk-sub{font-size:12px;color:var(--text-3);line-height:1.45;margin-top:3px;font-weight:600;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tk-tags{display:flex;align-items:center;gap:7px;margin-top:6px}
.tk-pay{background:var(--purple-bg2);color:var(--purple-dark);font-size:12px;font-weight:900;padding:3px 10px;border-radius:20px}
.tk-did{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--text-3);font-weight:800}
.tk-did .ic{width:13px;height:13px}

/* The action control. Every state occupies EXACTLY the same slot: same width,
   same height, one line of text. Nothing on the card shifts as it changes, and
   the countdown is replaced by the Claim button rather than sitting beside it. */
.tk-act{flex-shrink:0;width:86px;height:44px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;gap:6px;
  font-size:13.5px;font-weight:900;line-height:1;white-space:nowrap;
  background:var(--purple);color:#fff;border:0;padding:0;transition:background .16s,transform .1s}
.tk-act .ic{width:17px;height:17px;flex-shrink:0}
.tk-act:active{transform:scale(.95)}
.tk-act.perform:hover{background:var(--purple-dark)}
.tk-act.waiting{background:var(--bg-input);color:var(--text-3);border:1px solid var(--card-border);cursor:default;font-size:13px}
.tk-act.claim{background:var(--gold);color:#0D1214;animation:claimGlow 1.8s ease-in-out infinite}
@keyframes claimGlow{0%,100%{box-shadow:0 0 0 0 rgba(250,204,21,.5)}50%{box-shadow:0 0 0 7px rgba(250,204,21,0)}}
.tk-act.soon-act,.tk-act.limit-act{background:var(--bg-input);color:var(--text-3);border:1px solid var(--card-border);font-size:12px}
.tk-act.done-act{background:var(--purple-bg2);color:var(--purple-dark);border:1px solid var(--purple-border);font-size:12px}

/* countdown ring inside the waiting state */
.tk-ring{width:15px;height:15px;flex-shrink:0}
.tkr-bg{fill:none;stroke:var(--border);stroke-width:3}
.tkr-fg{fill:none;stroke:var(--purple);stroke-width:3;stroke-linecap:round;
  stroke-dasharray:50.3;stroke-dashoffset:50.3;transition:stroke-dashoffset .3s linear}

.tk-extra{margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
.tk-extra .tk-steps{font-size:12.5px;color:var(--text-2);line-height:1.7;background:var(--card);
  border:1px solid var(--card-border);border-radius:12px;padding:12px;white-space:pre-line}
.tk-extra .field{margin-top:11px;margin-bottom:0}
.tk-reopen{display:block;text-align:center;margin-top:10px;font-size:12px;font-weight:800;color:var(--purple)}

/* ---- approved + review ongoing ---- */
.tk-review{display:flex;align-items:center;gap:11px;background:var(--card);border:1.5px solid var(--purple);
  border-radius:13px;padding:11px;margin-bottom:12px;animation:tkrIn .5s cubic-bezier(.2,.9,.25,1) both}
@keyframes tkrIn{0%{opacity:0;transform:translateY(-8px) scale(.97)}100%{opacity:1;transform:none}}
.tkr-ic{width:38px;height:38px;border-radius:12px;background:var(--purple);color:#fff;display:grid;place-items:center;flex-shrink:0;
  animation:tkrPulse 2.4s ease-in-out infinite}
.tkr-ic .ic{width:21px;height:21px}
@keyframes tkrPulse{0%,100%{box-shadow:0 0 0 0 rgba(15,138,34,.45)}50%{box-shadow:0 0 0 8px rgba(15,138,34,0)}}
.tkr-body{flex:1;min-width:0}
.tkr-body strong{display:block;font-size:13.5px;font-weight:900;color:var(--purple-dark)}
.tkr-body span{display:block;font-size:11.5px;color:var(--text-3);font-weight:700;margin-top:1px}
.tkr-amt{font-family:inherit;font-weight:900;font-size:16px;color:var(--purple);flex-shrink:0;
  animation:tkrAmt .6s cubic-bezier(.2,1.5,.3,1) both .15s}
@keyframes tkrAmt{0%{transform:scale(.5);opacity:0}100%{transform:scale(1);opacity:1}}
.spb-note{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:800;color:var(--text-3)}
.spb-note .ic{width:15px;height:15px}
/* VTU plan picker */
.plan-opt{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 13px;
  border:1.5px solid var(--card-border);border-radius:13px;margin-bottom:7px;transition:all .16s;background:var(--card)}
.plan-opt:hover{border-color:var(--purple-border)}
.plan-opt.on{border-color:var(--purple);background:var(--purple-bg)}
.po-l{flex:1;min-width:0}
.po-l b{display:block;font-size:13.5px;font-weight:900}
.po-l small{display:block;font-size:11px;color:var(--text-3);font-weight:700;margin-top:1px}
.po-p{font-weight:900;font-size:14px;color:var(--purple);flex-shrink:0}
.plan-opt.on .po-p{color:var(--purple-dark)}
.plan-empty{padding:18px;text-align:center;font-size:12.5px;color:var(--text-3);font-weight:700;
  border:1.5px dashed var(--card-border);border-radius:13px}

/* ---- "use my number" chip ---- */
.usemine{display:inline-flex;align-items:center;gap:6px;margin-bottom:8px;padding:7px 12px;border-radius:20px;
  background:var(--purple-bg2);color:var(--purple-dark);border:1px solid var(--purple-border);
  font-size:12px;font-weight:800;transition:all .16s}
.usemine:hover{background:var(--purple);color:#fff;border-color:var(--purple)}
.usemine .ic{width:15px;height:15px}
.usemine.used{opacity:.55;pointer-events:none}

/* ---- history pagination ---- */
.vpage{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:14px;flex-wrap:wrap}
.vp-n,.vp-arrow{min-width:38px;height:38px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--card);border:1px solid var(--card-border);font-weight:900;font-size:13px;color:var(--text-2);transition:all .16s}
.vp-n:hover,.vp-arrow:hover{border-color:var(--purple-border);color:var(--purple-dark)}
.vp-n.on{background:var(--purple);color:#fff;border-color:var(--purple)}
.vp-arrow .ic{width:17px;height:17px}
.vp-arrow.off{opacity:.35;pointer-events:none}
.vp-gap{color:var(--text-3);font-weight:900;padding:0 2px}
.vpage-note{text-align:center;font-size:11.5px;color:var(--text-3);font-weight:700;margin-top:9px}
/* purchase confirmation */
.pconf-box{background:var(--bg-input);border:1.5px solid var(--card-border);border-radius:14px;
  padding:16px;text-align:center;margin-top:16px}
.pconf-l{display:block;font-size:10.5px;font-weight:900;color:var(--text-3);text-transform:uppercase;letter-spacing:.09em}
.pconf-v{display:block;font-size:24px;font-weight:900;letter-spacing:.04em;margin:6px 0 3px;color:var(--text)}
.pconf-s{display:block;font-size:12.5px;color:var(--purple-dark);font-weight:800}

/* ============================================================================
   WALLET SWITCHER
   The old version was a small grey pill pair that people scrolled straight
   past. Each side now shows its own balance, so it reads as a choice rather
   than decoration, and the active one is unmistakable.
   ============================================================================ */
.wsw{margin-bottom:12px}
.wsw-lead{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:800;color:var(--text-3);
  margin:0 2px 8px;text-transform:uppercase;letter-spacing:.05em}
.wsw-lead .ic{width:15px;height:15px;color:var(--purple)}
.seg-big{padding:6px;gap:7px;background:var(--bg-input);border:1px solid var(--card-border)}
.seg-big .seg-i{display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 8px;border-radius:12px;
  border:1.5px solid transparent;position:relative}
.seg-big .si-t{font-size:12.5px;font-weight:900;letter-spacing:.01em}
.seg-big .si-v{font-size:11.5px;font-weight:800;opacity:.72}
.seg-big .seg-i.on{background:var(--card);border-color:var(--purple);color:var(--purple-dark);
  box-shadow:0 4px 14px rgba(15,138,34,.18)}
.seg-big .seg-i.on .si-v{opacity:1;color:var(--purple)}
/* a small tick so the chosen side is obvious at a glance */
.seg-big .seg-i.on::after{content:'';position:absolute;top:6px;right:8px;width:7px;height:7px;
  border-radius:50%;background:var(--purple)}
.seg-big .seg-i:not(.on):hover{background:rgba(0,0,0,.03)}

/* Withdraw balance card.
   The bubbles already carry their own low alpha (0.11 to 0.22) in .bub-a..e,
   so an extra opacity on top multiplied them down to about 2% and made them
   invisible. Brighten the backgrounds instead of dimming the elements. */
.wd-bal .bub-a{background:rgba(255,255,255,.28)}
.wd-bal .bub-b{background:rgba(43,255,55,.34)}
.wd-bal .bub-c{background:rgba(255,255,255,.20)}
.wd-bal .bub-d{background:rgba(250,204,21,.32)}
.wd-bal .bub-e{background:rgba(255,255,255,.24)}
.wd-bal .bub-r{background:rgba(255,255,255,.75)}
.wd-bal .bub-r2{background:rgba(43,255,55,.85)}
.wd-bal .bub-r3{background:rgba(255,255,255,.6)}
/* the sheen must sit UNDER the bubbles, not over them */
.wd-bal::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(120% 70% at 50% -20%, rgba(255,255,255,.18), transparent 60%)}
.wd-bal .bub{z-index:0}
.wd-v{position:relative;z-index:1;animation:wdIn .5s cubic-bezier(.2,.9,.25,1) both}
@keyframes wdIn{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:none}}

/* ============================================================================
   PHOTO EARN
   ============================================================================ */
.pe-ask{background:var(--card);border:1px solid var(--card-border);border-radius:18px;padding:16px}
.pea-top{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.pea-ic{width:44px;height:44px;border-radius:14px;background:var(--purple);color:#fff;display:grid;place-items:center;flex-shrink:0}
.pea-ic .ic{width:23px;height:23px}
.pea-top strong{display:block;font-size:15px;font-weight:900}
.pea-top span{display:block;font-size:12px;color:var(--purple-dark);font-weight:800;margin-top:2px}
.pea-item{background:var(--purple-bg);border:1.5px dashed var(--purple-border);border-radius:14px;padding:14px;text-align:center}
.peai-l{display:block;font-size:10.5px;font-weight:900;color:var(--text-3);text-transform:uppercase;letter-spacing:.09em}
.peai-v{display:block;font-size:17px;font-weight:900;color:var(--purple-dark);margin-top:5px;line-height:1.35}
.pea-desc{font-size:13px;color:var(--text-2);line-height:1.65;margin-top:12px}
.pea-eg{margin-top:12px}
.pea-eg span{display:block;font-size:11px;font-weight:900;color:var(--text-3);text-transform:uppercase;margin-bottom:6px}
.pea-eg img{width:100%;border-radius:12px;border:1px solid var(--card-border);max-height:220px;object-fit:cover}

.pe-drop{border:2px dashed var(--card-border);border-radius:16px;min-height:190px;display:grid;place-items:center;
  cursor:pointer;overflow:hidden;background:var(--bg-input);transition:border-color .18s}
.pe-drop:hover{border-color:var(--purple)}
.pe-drop img{width:100%;max-height:340px;object-fit:contain;display:block}
.pe-empty{text-align:center;padding:26px 18px}
.pe-empty .ic{width:38px;height:38px;color:var(--text-3)}
.pe-empty span{display:block;font-size:13.5px;font-weight:900;margin-top:9px}
.pe-empty small{display:block;font-size:11.5px;color:var(--text-3);font-weight:700;margin-top:4px}
.pe-rules{display:flex;gap:9px;align-items:flex-start;background:var(--gold-bg);border-radius:12px;padding:12px;margin-top:12px}
.pe-rules .ic{width:18px;height:18px;color:var(--gold-dark);flex-shrink:0}
.pe-rules span{font-size:11.5px;color:var(--text-2);line-height:1.6;font-weight:600}

.pe-done{border-radius:20px;padding:26px 20px;text-align:center;position:relative;overflow:hidden;
  background:var(--card);border:1px solid var(--card-border)}
/* .gsurf is declared near the top of this file, so .pe-done's white background
   would otherwise win on source order alone. The green is restated here. */
.pe-done.gsurf{border:0;color:#fff;
  background-color:#0F8A22;
  background-image:linear-gradient(152deg,#18A82C 0%,#0F8A22 46%,#0A6B1A 100%);
  box-shadow:0 16px 36px rgba(15,138,34,.30)}
.ped-ic{width:70px;height:70px;border-radius:50%;background:rgba(255,255,255,.22);display:grid;place-items:center;
  margin:0 auto 14px;position:relative;z-index:1;animation:pbPop .6s cubic-bezier(.2,1.6,.35,1) both}
.pe-done:not(.gsurf) .ped-ic{background:var(--gold-bg);color:var(--gold-dark)}
.ped-ic .ic{width:36px;height:36px}
.pe-done h3{font-size:19px;font-weight:900;position:relative;z-index:1}
.pe-done p{font-size:13.5px;margin-top:7px;opacity:.92;position:relative;z-index:1}
.ped-note{display:inline-block;margin-top:12px;background:rgba(255,255,255,.18);border-radius:20px;
  padding:7px 13px;font-size:11.5px;font-weight:700;position:relative;z-index:1}
.pe-reject{display:flex;gap:11px;align-items:flex-start;background:var(--red-bg);border:1px solid #F3C7C7;
  border-radius:14px;padding:13px}
.pe-reject .ic{width:20px;height:20px;color:var(--red);flex-shrink:0}
.pe-reject strong{display:block;font-size:13.5px;font-weight:900;color:var(--red)}
.pe-reject span{display:block;font-size:12px;color:var(--text-2);line-height:1.6;margin-top:2px}

/* ============================================================================
   QUIZ
   ============================================================================ */
.qz-head{background:var(--card);border:1px solid var(--card-border);border-radius:18px;padding:16px}
.qzh-top{display:flex;align-items:center;gap:12px}
.qzh-ic{width:44px;height:44px;border-radius:14px;background:var(--purple);color:#fff;display:grid;place-items:center;flex-shrink:0}
.qzh-ic .ic{width:23px;height:23px}
.qzh-top strong{display:block;font-size:15px;font-weight:900}
.qzh-top > div{flex:1;min-width:0}
.qzh-top span{display:block;font-size:12px;color:var(--text-3);font-weight:700;margin-top:2px}
.qzh-pay{background:var(--purple-bg2);color:var(--purple-dark);font-weight:900;font-size:13px;
  padding:6px 13px;border-radius:20px;flex-shrink:0}
.qzh-desc{font-size:13px;color:var(--text-2);line-height:1.6;margin-top:12px}
.qzh-warn{display:flex;align-items:center;gap:8px;background:var(--gold-bg);color:var(--gold-dark);
  border-radius:12px;padding:11px;margin-top:12px;font-size:12px;font-weight:800}
.qzh-warn .ic{width:17px;height:17px;flex-shrink:0}

.qz-q{background:var(--card);border:1px solid var(--card-border);border-radius:16px;padding:15px;margin-bottom:10px;transition:border-color .18s}
.qz-q.answered{border-color:var(--purple-border)}
.qzq-n{font-size:10.5px;font-weight:900;color:var(--purple);text-transform:uppercase;letter-spacing:.08em}
.qzq-n span{color:var(--text-3);margin-left:4px}
.qz-q h4{font-size:14.5px;font-weight:900;line-height:1.45;margin:7px 0 12px}
.qzq-opts{display:flex;flex-direction:column;gap:7px}
.qzo{display:flex;align-items:center;gap:11px;padding:12px;border-radius:12px;border:1.5px solid var(--card-border);
  background:var(--card);cursor:pointer;transition:all .16s}
.qzo:hover{border-color:var(--purple-border)}
.qzo.on{border-color:var(--purple);background:var(--purple-bg)}
.qzo input{position:absolute;opacity:0;pointer-events:none}
.qzo-l{width:28px;height:28px;border-radius:50%;background:var(--bg-input);color:var(--text-3);
  display:grid;place-items:center;font-weight:900;font-size:12px;flex-shrink:0;transition:all .16s}
.qzo.on .qzo-l{background:var(--purple);color:#fff}
.qzo-t{flex:1;font-size:13.5px;font-weight:700;line-height:1.45}

.qz-progress{height:7px;border-radius:7px;background:var(--bg-input);overflow:hidden;margin-bottom:8px}
.qz-progress span{display:block;height:100%;width:0;border-radius:7px;
  background:linear-gradient(90deg,var(--purple),var(--neon));transition:width .35s}
.qz-count{text-align:center;font-size:12px;color:var(--text-3);font-weight:800;margin-bottom:12px}

.qz-done{border-radius:20px;padding:26px 20px;text-align:center;position:relative;overflow:hidden;
  background:var(--card);border:1px solid var(--card-border)}
.qz-done.gsurf{border:0;color:#fff;
  background-color:#0F8A22;
  background-image:linear-gradient(152deg,#18A82C 0%,#0F8A22 46%,#0A6B1A 100%);
  box-shadow:0 16px 36px rgba(15,138,34,.30)}
.qzd-score{display:block;font-family:inherit;font-size:46px;font-weight:900;line-height:1;
  position:relative;z-index:1;animation:payPop .55s cubic-bezier(.2,1.5,.3,1) both}
.qzd-score small{font-size:20px;opacity:.75}
.qz-done h3{font-size:19px;font-weight:900;margin-top:8px;position:relative;z-index:1}
.qz-done p{font-size:13.5px;margin-top:6px;opacity:.92;position:relative;z-index:1}
.qzd-note{display:inline-flex;align-items:center;gap:6px;margin-top:14px;background:rgba(255,255,255,.18);
  border-radius:20px;padding:7px 13px;font-size:11.5px;font-weight:800;position:relative;z-index:1}
.qz-done:not(.gsurf) .qzd-note{background:var(--bg-input);color:var(--text-3)}
.qzd-note .ic{width:14px;height:14px}

.qz-ring{width:120px;height:120px;border-radius:50%;margin:6px auto 16px;display:grid;place-items:center;
  background:conic-gradient(var(--purple) calc(var(--pct)*1%), var(--bg-input) 0)}
.qz-ring::before{content:'';position:absolute;width:96px;height:96px;border-radius:50%;background:var(--card)}
.qzr-v{position:relative;font-family:inherit;font-size:30px;font-weight:900;color:var(--text)}
.qzr-v small{font-size:15px;opacity:.7}


/* ============================================================================
   COOLDOWN CARD
   Shown when someone has finished their round and is waiting for the next one.
   ============================================================================ */
.cool-card{background:var(--card);border:1px solid var(--card-border);border-radius:20px;
  padding:28px 20px;text-align:center}
.cool-ic{width:70px;height:70px;border-radius:24px;background:var(--purple-bg2);color:var(--purple-dark);
  display:grid;place-items:center;margin:0 auto 15px}
.cool-ic.pend{background:var(--gold-bg);color:var(--gold-dark)}
.cool-ic .ic{width:34px;height:34px}
.cool-card h3{font-size:18px;font-weight:900}
.cool-card p{font-size:13.5px;color:var(--text-3);line-height:1.6;margin-top:7px}
.cool-card strong{color:var(--text-2);font-weight:900}

.cool-timer{margin-top:20px;padding:18px;border-radius:16px;position:relative;overflow:hidden;
  background-color:#0F8A22;background-image:linear-gradient(152deg,#18A82C 0%,#0F8A22 46%,#0A6B1A 100%);
  box-shadow:0 12px 30px rgba(15,138,34,.28)}
.ct-v{display:block;font-family:inherit;font-weight:900;font-size:34px;color:#fff;
  letter-spacing:.01em;line-height:1.1;text-shadow:0 2px 12px rgba(0,0,0,.25)}
.ct-l{display:block;font-size:11.5px;font-weight:800;color:rgba(255,255,255,.85);margin-top:5px;
  text-transform:uppercase;letter-spacing:.07em}
.cool-when{display:inline-flex;align-items:center;gap:6px;margin-top:14px;background:var(--bg-input);
  border-radius:20px;padding:8px 14px;font-size:12px;font-weight:800;color:var(--text-3)}
.cool-when .ic{width:15px;height:15px;color:var(--purple)}
.cool-left{margin-top:10px;font-size:12px;font-weight:800;color:var(--purple-dark)}

/* ============================================================================
   GSURF FINAL GUARD
   .gsurf is declared near the top of this file, so any class written later that
   sets its own background silently beat it. That is what made the earn card,
   the photo card and the quiz card render white despite carrying .gsurf.
   Restating it as the LAST rule means the green always wins, whatever a future
   rule further up does. Anything that genuinely wants a different background
   should simply not use .gsurf.
   ============================================================================ */
.gsurf{
  background-color:#0F8A22;
  background-image:linear-gradient(152deg,#18A82C 0%,#0F8A22 46%,#0A6B1A 100%);
  color:#fff;
}

/* ============================================================================
   PHOTO EARN — rebuilt
   ============================================================================ */
.pe-hero{border-radius:22px;padding:26px 20px 24px;position:relative;overflow:hidden;text-align:center}
.peh-pay{position:absolute;top:14px;right:14px;background:var(--gold);color:#0D1214;font-weight:900;
  font-size:14px;padding:6px 14px;border-radius:20px;z-index:2;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.peh-eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:900;
  color:rgba(255,255,255,.82);text-transform:uppercase;letter-spacing:.12em;position:relative;z-index:1}
.peh-eyebrow .ic{width:15px;height:15px}
.peh-item{font-size:24px;font-weight:900;color:#fff;line-height:1.25;margin-top:9px;
  position:relative;z-index:1;text-shadow:0 2px 14px rgba(0,0,0,.25)}
.peh-desc{font-size:13px;color:rgba(255,255,255,.88);line-height:1.6;margin-top:10px;
  position:relative;z-index:1;font-weight:600}

.peh-eg{background:var(--card);border:1px solid var(--card-border);border-radius:16px;padding:12px}
.pehg-l{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:900;color:var(--text-3);
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:9px}
.pehg-l .ic{width:15px;height:15px;color:var(--purple)}
.peh-eg img{width:100%;border-radius:12px;max-height:230px;object-fit:cover;display:block}

.pe-drop{position:relative;border:2px dashed var(--card-border);border-radius:18px;min-height:220px;
  display:grid;place-items:center;cursor:pointer;overflow:hidden;background:var(--bg-input);
  transition:border-color .18s,background .18s}
.pe-drop:hover,.pe-drop.has{border-color:var(--purple)}
.pe-drop.has{background:var(--card);border-style:solid}
.pe-drop img{width:100%;max-height:400px;object-fit:contain;display:block}
.pe-empty{text-align:center;padding:30px 20px}
.ped-badge{width:64px;height:64px;border-radius:22px;background:var(--purple);color:#fff;
  display:grid;place-items:center;margin:0 auto 13px;box-shadow:0 10px 24px rgba(15,138,34,.3)}
.ped-badge .ic{width:31px;height:31px}
.ped-t{display:block;font-size:15px;font-weight:900}
.ped-s{display:block;font-size:12.5px;color:var(--text-3);font-weight:700;margin-top:4px}
.pe-change{position:absolute;bottom:10px;right:10px;display:inline-flex;align-items:center;gap:6px;
  background:rgba(13,18,20,.72);color:#fff;font-size:12px;font-weight:800;padding:8px 13px;border-radius:20px;
  backdrop-filter:blur(4px)}
.pe-change .ic{width:15px;height:15px}

.pe-tries{display:flex;align-items:center;gap:10px;margin:13px 0 12px;padding:11px 13px;
  background:var(--bg-input);border-radius:12px}
.pet-dots{display:inline-flex;gap:5px;flex-shrink:0}
.pet-dots i{width:9px;height:9px;border-radius:50%;background:var(--purple);display:block}
.pet-dots i.used{background:var(--card-border)}
.pet-l{font-size:12px;font-weight:800;color:var(--text-3)}
.pe-privacy{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:12px;
  font-size:11.5px;color:var(--text-3);font-weight:700;text-align:center;line-height:1.5}
.pe-privacy .ic{width:15px;height:15px;color:var(--purple);flex-shrink:0}
.pe-left-box{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:16px;
  background:var(--gold-bg);border-radius:12px;padding:12px;font-size:12.5px;font-weight:800;color:var(--gold-dark)}
.pe-left-box .ic{width:17px;height:17px;flex-shrink:0}
.pe-left-box strong{font-size:15px}

/* ---- quiz: confirm before submitting ---- */
.qzc-box{background:var(--bg-input);border-radius:14px;padding:14px;text-align:center;margin-top:16px}
.qzc-l{display:block;font-size:10.5px;font-weight:900;color:var(--text-3);text-transform:uppercase;letter-spacing:.09em}
.qzc-v{display:block;font-size:22px;font-weight:900;margin-top:4px}

/* ---- quiz: answer review after submitting ---- */
.qz-rev{background:var(--card);border:1px solid var(--card-border);border-radius:16px;padding:14px;margin-bottom:10px}
.qz-rev.right{border-left:4px solid var(--purple)}
.qz-rev.wrong{border-left:4px solid var(--red)}
.qzr-head{display:flex;gap:9px;align-items:flex-start;margin-bottom:11px}
.qzr-ic{flex-shrink:0}
.qzr-ic .ic{width:20px;height:20px}
.qz-rev.right .qzr-ic{color:var(--purple)}
.qz-rev.wrong .qzr-ic{color:var(--red)}
.qzr-q{font-size:13.5px;font-weight:900;line-height:1.45}
.qzr-opts{display:flex;flex-direction:column;gap:6px}
.qzr-o{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:10px;background:var(--bg-input)}
.qzr-o.ans-right{background:var(--purple-bg);border:1.5px solid var(--purple)}
.qzr-o.ans-mine{background:var(--red-bg);border:1.5px solid #F3C7C7}
.qzro-l{width:24px;height:24px;border-radius:50%;background:var(--card);color:var(--text-3);
  display:grid;place-items:center;font-weight:900;font-size:11px;flex-shrink:0}
.qzr-o.ans-right .qzro-l{background:var(--purple);color:#fff}
.qzr-o.ans-mine .qzro-l{background:var(--red);color:#fff}
.qzro-t{flex:1;font-size:12.5px;font-weight:700;line-height:1.4}
.qzro-tag{font-size:10px;font-weight:900;padding:3px 8px;border-radius:20px;flex-shrink:0;text-transform:uppercase;letter-spacing:.04em}
.qzro-tag.ok{background:var(--purple);color:#fff}
.qzro-tag.bad{background:var(--red);color:#fff}

/* ============================================================================
   ICONS ON SOLID COLOUR BADGES
   The icon set is duotone: a backing shape at opacity .5 plus a solid detail.
   That reads well on a page background, but inside a filled badge the half
   opacity mixes with the badge colour and the icon looks grey and broken
   rather than crisp white. On these badges the whole glyph is forced solid.
   ============================================================================ */
/* Only for icons whose shape reads on its own: a camera, a TV, a bolt. Making
   those solid fixes the washed-out look on a filled badge.
   NOT for circle-check, circle-x and friends: their detail sits INSIDE the
   backing disc, so forcing the disc opaque paints over the tick and leaves a
   plain coloured blob. Those keep their two tones. */
.pea-ic .ic *, .ped-badge .ic *, .qzh-ic .ic *, .cool-ic .ic *,
.gate-ico .ic *, .spn-ic .ic *, .tka-plat .ic *, .soon-ic .ic *{opacity:1}

/* Status icons: lift the backing disc a little so it is not muddy on a colour,
   while leaving it well behind the detail drawn on top. */
.m-ico .ic [opacity], .pb-core .ic [opacity], .wres-core .ic [opacity],
.ped-ic .ic [opacity]{opacity:.34}
.pe-skips{background:var(--purple-bg2);color:var(--purple-dark);font-size:11px;font-weight:900;
  padding:3px 9px;border-radius:20px;margin-left:8px}
.pe-skip-note{font-size:11.5px;color:var(--text-3);font-weight:600;line-height:1.55;text-align:center;margin-top:9px}



/* ============================================================================
   A VTU SERVICE THAT IS SWITCHED OFF
   ============================================================================ */
.soon-card{border-radius:20px;padding:30px 20px;text-align:center;position:relative;overflow:hidden;
  background-color:#0F8A22;background-image:linear-gradient(152deg,#18A82C 0%,#0F8A22 46%,#0A6B1A 100%);
  color:#fff;box-shadow:0 16px 36px rgba(15,138,34,.28)}
.soon-ic{width:72px;height:72px;border-radius:26px;background:rgba(255,255,255,.2);display:grid;
  place-items:center;margin:0 auto 15px;position:relative;z-index:1}
.soon-ic .ic{width:36px;height:36px}
.soon-ic .ic *{opacity:1}
.soon-card h3{font-size:20px;font-weight:900;position:relative;z-index:1}
.soon-card p{font-size:13.5px;opacity:.9;line-height:1.6;margin-top:8px;position:relative;z-index:1;
  max-width:30ch;margin-left:auto;margin-right:auto}
.soon-alt{margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,.22);position:relative;z-index:1}
.soon-alt > span{display:block;font-size:10.5px;font-weight:900;opacity:.82;letter-spacing:.1em}
.soon-links{display:flex;gap:9px;justify-content:center;margin-top:11px}
.soon-links a{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.18);
  padding:11px 18px;border-radius:22px;font-size:13.5px;font-weight:900;color:#fff}
.soon-links a:active{background:rgba(255,255,255,.3)}
.soon-links .ic{width:17px;height:17px}
.soon-links .ic *{opacity:1}

/* ============================================================================
   PLANS
   The plan reads like a note: the price is the denomination and dominates,
   with what it earns per day sitting beside the name as the reason to look.
   Everything else is small print in the margin.
   ============================================================================ */
.pk-lead{margin-bottom:18px;text-align:center;padding:0 6px}
.pk-lead h2{font-size:21px;font-weight:900;line-height:1.3;letter-spacing:-.01em}
.pk-lead p{font-size:13px;color:var(--text-3);line-height:1.65;margin-top:8px;font-weight:600}

.note{position:relative;border-radius:16px;padding:18px;margin-bottom:12px;overflow:hidden;
  background:var(--card);border:1.5px solid var(--card-border)}
.note.is-filled{border:0;color:#fff;background-color:#0F8A22;
  background-image:linear-gradient(148deg,#18A82C 0%,#0F8A22 48%,#065012 100%);
  box-shadow:0 14px 32px rgba(15,138,34,.26)}
.note.is-current{border:2px solid var(--purple)}
.note.is-lower{opacity:.5}

.note-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.note-name{font-size:15.5px;font-weight:900;letter-spacing:.01em}
.note-daily{font-size:13px;font-weight:800;color:var(--purple);flex-shrink:0}
.note.is-filled .note-daily{color:rgba(255,255,255,.88)}

.note-fig{font-family:inherit;font-size:40px;font-weight:900;
  letter-spacing:-.03em;line-height:1.04;margin:10px 0 3px}
.note-fig sup{font-size:18px;font-weight:900;vertical-align:baseline;position:relative;top:-.5em;line-height:0;margin-right:2px;color:var(--text-3)}
.note.is-filled .note-fig sup{color:rgba(255,255,255,.7)}
.note-cap{font-size:12.5px;font-weight:700;color:var(--text-3)}
.note-withdraw{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;
  color:var(--text-3);margin-bottom:13px}
.note-withdraw .ic{width:14px;height:14px;color:var(--purple);flex-shrink:0}
.note.is-filled .note-withdraw{color:rgba(255,255,255,.8)}
.note.is-filled .note-withdraw .ic{color:rgba(255,255,255,.8)}
.note.is-filled .note-cap{color:rgba(255,255,255,.82)}

/* Four pills will not fit one row at 390px: as pills they either wrap into
   ragged two-line lumps or, with nowrap, run off the card edge. A two column
   tick list holds the same four facts, stays on one line each, and reads as a
   list of what you get rather than a row of tags. */
.note-chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 12px;margin:14px 0 12px}
.pk-tick{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:800;
  color:var(--text-2);min-width:0}
.pk-tick::before{content:'';width:14px;height:14px;border-radius:50%;flex-shrink:0;
  background:var(--purple-bg2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B8A1C' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/9px no-repeat}
.pk-tick span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pk-tick.pay{color:var(--purple-dark)}
.note.is-filled .pk-tick{color:rgba(255,255,255,.95)}
.note.is-filled .pk-tick.pay{color:#fff}
.note.is-filled .pk-tick::before{background-color:rgba(255,255,255,.28);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}

.btn-note{width:100%;height:48px;font-size:14px;font-weight:900;border-radius:12px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--purple);color:#fff;border:0;transition:filter .15s}
.btn-note:active{filter:brightness(.93)}
.note.is-filled .btn-note{background:#fff;color:var(--purple-dark)}
.btn-note.ghost{background:var(--bg-input);color:var(--text-3)}
.note.is-filled .btn-note.ghost{background:rgba(255,255,255,.16);color:#fff}
/* The outline variant has to beat .note.is-filled .btn-note, which is more
   specific than .btn-note.outline alone. Without matching that weight the
   filled card painted a white background under white text and the button
   vanished entirely. */
.note .btn-note.outline{background:transparent;border:1.5px solid var(--purple);color:var(--purple-dark)}
.note.is-filled .btn-note.outline{background:transparent;border-color:rgba(255,255,255,.75);color:#fff}

/* ============================================================================
   RULES THAT HAD NO DEFINITION
   Found by matching every literal class name in the PHP against this file.
   Each of these was being used in markup with nothing styling it.
   ============================================================================ */
.set-note{font-size:12px;color:var(--text-3);line-height:1.6;font-weight:600}
.proof-field{margin-top:12px}
.proof-field label{display:block;font-size:12px;font-weight:900;margin-bottom:6px;color:var(--text-2)}
.theme-btn{display:inline-flex;align-items:center;justify-content:center}
.vb-spin{display:inline-flex;align-items:center}
.vb-text{font-size:12.5px;font-weight:800;line-height:1.4}
.tk-confirmed{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;color:var(--purple-dark)}
.wtxt{min-width:0}
.dep-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 0;
  border-bottom:1px solid var(--border)}
.dep-row:last-child{border-bottom:0}
.myrank{display:flex;align-items:center;gap:11px;padding:12px 14px;border-radius:14px;
  background:var(--purple-bg);border:1.5px solid var(--purple-border);margin-bottom:12px}
.mr-pos{width:34px;height:34px;border-radius:50%;background:var(--purple);color:#fff;
  display:grid;place-items:center;font-weight:900;font-size:13px;flex-shrink:0}
.mr-txt{flex:1;min-width:0;font-size:13px;font-weight:800;color:var(--text-2)}
.lhero-copy,.labout-copy{max-width:60ch}
.ladv-side{min-width:0}

/* ============================================================================
   HEADLINE AMOUNTS
   The naira sign sits raised and small so the number itself carries the weight,
   the way a price is set on a note. Used only on display figures; amounts inside
   sentences stay plain text.
   ============================================================================ */
.amt{font-family:inherit;font-weight:900;letter-spacing:-.02em;white-space:nowrap;line-height:1.05}
/* vertical-align:super makes the line box grow to contain the raised glyph, so
   every card holding a money figure got noticeably taller with dead space under
   the number. Offsetting with position instead keeps the sign raised without
   affecting the line box at all. */
.amt sup{font-size:.46em;font-weight:900;vertical-align:baseline;position:relative;top:-.46em;
  line-height:0;margin-right:.06em;opacity:.72;letter-spacing:0}
.amt-plus{font-family:inherit;font-weight:900}

/* The .amt wrapper inherits the card's own size; only the sign needs sizing so
   it sits raised and small the way it does on the plan cards. */
.wc3-amount .amt,.wd-v .amt,.eb-v .amt,.ov-val .amt,.vb-v .amt,.ds-amt .amt{
  font-size:inherit;font-family:inherit;font-weight:900;letter-spacing:inherit}
.wc3-amount .amt sup,.wd-v .amt sup,.eb-v .amt sup{font-size:.42em;opacity:.66}

/* Apex: the concentric stripe that makes a note read as currency. Drawn with
   repeating radial gradients rather than an image so it costs nothing and
   scales with the card. */
.note.is-filled::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    repeating-radial-gradient(circle at 88% 8%, rgba(255,255,255,.16) 0 1px, transparent 1px 10px),
    repeating-radial-gradient(circle at 6% 96%, rgba(255,255,255,.11) 0 1px, transparent 1px 13px)}
.note.is-filled > *{position:relative;z-index:1}

/* ---- the site mark on receipts and success modals ---- */
.rbrand{display:flex;align-items:center;justify-content:center;gap:8px;padding:2px 0 14px;
  border-bottom:1px solid var(--border);margin-bottom:16px}
.rbrand-logo{width:26px;height:26px;border-radius:8px;object-fit:contain;display:block}
.rbrand-name{font-size:14px;font-weight:900;letter-spacing:-.01em;color:var(--text)}

/* ============================================================================
   RECEIPT MARK
   The site's favicon with a status badge tucked into its lower right. The badge
   ring uses the modal's own background so it looks cut out of the mark rather
   than laid over it, which is why it is redeclared for the green success modal.
   ============================================================================ */
.rmark{position:relative;width:66px;height:66px;margin:2px auto 14px;display:block}
.rmark-img{width:66px;height:66px;border-radius:50%;display:block;object-fit:cover}
/* A white badge on a white modal disappears; the ring alone is not enough
   separation. Solid colour with a white tick reads at a glance, and the ring
   still divides it from the logo behind. */
.rmark-badge{position:absolute;right:-3px;bottom:-3px;width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;border:3px solid var(--card);
  background:var(--purple);color:#fff}
.rmark-badge .ic{width:15px;height:15px}
.rmark-badge .ic *{opacity:1}
.rmark-badge.pending{background:var(--gold);color:#3d2f00}
.rmark-badge.ok{background:var(--purple);color:#fff}
.rmark-badge.bad{background:var(--red);color:#fff}
/* on a filled green modal the ring has to match that surface, not the card */
.gsurf .rmark-badge,.wres.is-done .rmark-badge,.modal.is-green .rmark-badge{border-color:#0F8A22}

/* The mark at the size the old animated tick used to be, so it sits inside the
   pulsing rings rather than beside them. The rings are positioned absolutely
   by their own rules, so the mark just needs to sit above them. */
.rmark.is-big{width:96px;height:96px;margin:0;position:relative;z-index:2;display:block}
.rmark.is-big .rmark-img{width:96px;height:96px}
.rmark.is-big .rmark-badge{width:34px;height:34px;right:0;bottom:0;border-width:4px}
.rmark.is-big .rmark-badge .ic{width:18px;height:18px}
/* centre it in the animation frames, which are flex or grid containers */
.ds-anim .rmark.is-big,.wres-anim .rmark.is-big{position:relative;margin:0 auto}

/* ============================================================================
   AUTH ON LARGER SCREENS
   A 420px card alone in the middle of a 1440px window looks unfinished. From
   900px the page becomes two panels: the brand and what the site does on the
   left, the form on the right. Below that it stays exactly as it is on a phone.
   ============================================================================ */
.auth-aside{display:none}   /* phone: form only */

@media (min-width: 900px){
  .auth-body{padding:0;align-items:stretch}
  .auth-aside{display:flex}
  .auth-body .auth-shell{display:grid;grid-template-columns:1.05fr 1fr;width:100%;min-height:100vh}

  .auth-aside{position:relative;overflow:hidden;padding:56px 52px;display:flex;flex-direction:column;
    justify-content:center;color:#fff;
    background-color:#0F8A22;
    background-image:linear-gradient(155deg,#18A82C 0%,#0F8A22 46%,#065012 100%)}
  .auth-aside::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
    background-image:repeating-radial-gradient(circle at 84% 10%, rgba(255,255,255,.13) 0 1px, transparent 1px 12px)}
  .auth-aside > *{position:relative;z-index:1}
  .auth-aside .aa-logo{width:52px;height:52px;border-radius:50%;object-fit:cover;margin-bottom:30px;
    align-self:flex-start;box-shadow:0 6px 18px rgba(0,0,0,.22)}
  .auth-aside h2{font-size:34px;line-height:1.18;font-weight:900;letter-spacing:-.02em;max-width:16ch}
  .auth-aside p{font-size:15px;line-height:1.65;margin-top:14px;max-width:44ch;color:rgba(255,255,255,.9);font-weight:600}
  .aa-points{list-style:none;margin-top:32px;display:flex;flex-direction:column;gap:13px}
  .aa-points li{display:flex;align-items:flex-start;gap:11px;font-size:14.5px;font-weight:700;
    color:rgba(255,255,255,.95)}
  .aa-points .ic{width:20px;height:20px;flex-shrink:0;margin-top:1px}
  .aa-points .ic *{opacity:1}

  .auth-main{display:flex;align-items:center;justify-content:center;padding:48px 40px;background:var(--bg)}
  .auth-wrap{max-width:400px}
  .auth-head{text-align:left}
  .auth-head .auth-logo{display:none}   /* the mark is on the panel already */
  .auth-card{border:0;box-shadow:none;padding:0;background:transparent}
}
@media (min-width: 1280px){
  .auth-aside{padding:64px 72px}
  .auth-aside h2{font-size:40px}
  .auth-main{padding:56px}
}


/* ============================================================================
   DASHBOARD ON LARGER SCREENS
   On a phone this is one column and stays that way. From 900px the wallet and
   its figures sit in a narrower left column while everything else fills the
   right, so the page uses the width instead of leaving a ragged empty margin.
   ============================================================================ */
@media (min-width: 900px){
  .dash-cols{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:24px;align-items:start;margin-top:16px}
  .dash-cols > *{min-width:0}
  .dash-col-a{position:sticky;top:18px}
  .dash-cols .wdeck{padding:0;max-width:none}
  .dash-cols .overview{padding:14px 0 0;grid-template-columns:repeat(2,1fr)}
  .dash-cols .section{margin-top:14px}
  .dash-cols .section-head{margin:18px 0 10px}
}
@media (min-width: 1280px){
  .dash-cols{grid-template-columns:minmax(0,460px) minmax(0,1fr);gap:28px}
}
/* tablet: keep one column but stop cards stretching to silly widths */
@media (min-width: 640px) and (max-width: 899px){
  body{max-width:720px;margin:0 auto}
  .overview{grid-template-columns:repeat(2,1fr)}
  .earn-grid{grid-template-columns:repeat(3,1fr)}
  .wdeck{max-width:520px;margin-left:auto;margin-right:auto}
}

/* ============================================================================
   AUTH — GREEN HEADER, WHITE SHEET
   The form sits on a sheet that overlaps a branded header, the way a bank app
   does, rather than floating in a card on an empty background. The bubbles are
   the same ones used on the wallet cards, so the two feel like one product.
   ============================================================================ */
.auth-body{display:block;padding:0;min-height:100vh;background:var(--card)}
.auth-wrap{max-width:none;width:100%}

.auth-top{position:relative;overflow:hidden;padding:calc(34px + env(safe-area-inset-top)) 22px 52px;
  background-color:#0F8A22;
  background-image:linear-gradient(155deg,#18A82C 0%,#0F8A22 48%,#0A6B1A 100%)}
.auth-top > h1,.auth-top > p,.auth-top > .auth-fav{position:relative;z-index:1}
.auth-fav{width:46px;height:46px;border-radius:50%;object-fit:cover;display:block;margin-bottom:16px;
  box-shadow:0 6px 18px rgba(0,0,0,.22)}
.auth-top h1{font-size:25px;font-weight:900;color:#fff;letter-spacing:-.02em;line-height:1.18}
.auth-top p{font-size:13.5px;color:rgba(255,255,255,.88);margin-top:6px;font-weight:600}

.auth-sheet{position:relative;z-index:2;margin-top:-26px;border-radius:24px 24px 0 0;
  background:var(--card);padding:26px 20px 34px;min-height:60vh;
  box-shadow:0 -8px 26px rgba(13,18,20,.07)}
.auth-sheet .field:first-child{margin-top:0}

/* the links under the form sit on the sheet, not on the page background */
.auth-alt,.auth-legal{padding:0}
.auth-alt{margin-top:2px}

@media (min-width: 900px){
  /* The aside carries the brand, so the green band would repeat it. The
     heading still has to appear though, or the form starts with no title. */
  .auth-body{background:var(--bg)}
  .auth-top{background:none;padding:0 0 20px;overflow:visible}
  .auth-top .bub,.auth-top .auth-fav{display:none}
  .auth-top h1{color:var(--text);font-size:27px}
  .auth-top p{color:var(--text-3)}
  .auth-sheet{margin-top:0;border-radius:0;box-shadow:none;padding:0;min-height:0;background:transparent}
  .auth-main .auth-wrap{max-width:400px}
}

/* brand lockup in the auth header */
.auth-brand{display:inline-flex;align-items:center;gap:10px;margin-bottom:16px;position:relative;z-index:1}
.auth-brand .auth-fav{margin-bottom:0}
.auth-brand-t{font-size:17px;font-weight:900;color:#fff;letter-spacing:-.01em}
@media (min-width:900px){ .auth-brand{display:none} }

/* Login only has two fields. Centring them inside a tall sheet left a wide dead
   band above the first label and another below the links. Giving the green
   header more height instead means the sheet starts lower, the form sits
   naturally under it, and the composition balances without any empty gap. */
.auth-body.is-login .auth-top{padding-top:calc(58px + env(safe-area-inset-top));padding-bottom:72px}
.auth-body.is-login .auth-top h1{font-size:29px}
.auth-body.is-login .auth-sheet{min-height:calc(100vh - 250px)}
@media (min-width:900px){
  .auth-body.is-login .auth-top{padding:0 0 20px}
  .auth-body.is-login .auth-sheet{min-height:0}
}
.hint.ok{color:var(--purple-dark);font-weight:800}
.hint.ok .ic{width:14px;height:14px;vertical-align:-2px;margin-right:3px}

/* ============================================================================
   TOP EARNERS — RAISED CARD PODIUM
   The card is the stand. No separate blocks underneath, which is the part that
   makes every other leaderboard look alike. First place is a white card against
   the green so the winner reads instantly; second and third are tinted glass at
   lower heights.
   ============================================================================ */
.pod-band{position:relative;overflow:hidden;padding:18px 12px 0;margin-top:10px;
  border-radius:20px 20px 0 0;
  background-color:#0F8A22;background-image:linear-gradient(155deg,#18A82C 0%,#0F8A22 50%,#0A6B1A 100%)}

.podium3{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1.16fr 1fr;
  align-items:end;gap:7px;max-width:420px;margin:0 auto}

.pod3{position:relative;text-align:center;min-width:0;padding:14px 8px 18px;
  border-radius:16px 16px 0 0;background:rgba(255,255,255,.16);color:#fff;
  animation:podRise .55s cubic-bezier(.2,.85,.25,1) both}
.pod3.silver{animation-delay:.06s}
.pod3.bronze{padding-bottom:12px;padding-top:11px;background:rgba(255,255,255,.12);animation-delay:.12s}
.pod3.gold{padding:16px 8px 26px;background:var(--card);color:var(--text);
  border-radius:18px 18px 0 0;box-shadow:0 -6px 24px rgba(0,0,0,.16)}
@keyframes podRise{0%{opacity:0;transform:translateY(18px)}100%{opacity:1;transform:none}}

.pod3-crown{font-size:20px;line-height:1;margin-bottom:4px;color:var(--gold);
  filter:drop-shadow(0 3px 8px rgba(250,204,21,.5));animation:crownBob 2.6s ease-in-out infinite}
@keyframes crownBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

.pod3-avwrap{position:relative;width:46px;height:46px;margin:0 auto 9px}
.pod3.gold .pod3-avwrap{width:56px;height:56px}
.pod3-av{position:absolute;inset:0;border-radius:50%;overflow:hidden;display:block;
  background:rgba(255,255,255,.3);border:2px solid #D8DDE0}
.pod3.gold .pod3-av{border:2.5px solid var(--gold);background:var(--bg-input)}
.pod3.bronze .pod3-av{border-color:#C98A52}
.pod3-av img{width:100%;height:100%;object-fit:cover;display:block}
.pod3-ring{display:none}
.pod3-num{position:absolute;bottom:-4px;left:50%;transform:translateX(-50%);
  min-width:21px;height:21px;padding:0 5px;border-radius:11px;font-size:11px;font-weight:900;
  display:grid;place-items:center;background:#D8DDE0;color:#2A2E31}
.pod3.gold .pod3-num{background:var(--gold);color:#3D2F00;min-width:23px;height:23px;font-size:12px}
.pod3.bronze .pod3-num{background:#C98A52;color:#2E1B08}

.pod3-name{font-size:12px;font-weight:800;margin-top:2px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.pod3.gold .pod3-name{font-size:12.5px}
.pod3-amt{font-size:12.5px;font-weight:900;margin-top:3px;color:rgba(255,255,255,.9)}
.pod3.gold .pod3-amt{font-size:15px;color:var(--purple-dark)}
.pod3-name .you{margin-left:5px;font-size:9.5px;font-weight:900;padding:2px 6px;border-radius:10px;
  background:rgba(255,255,255,.28)}
.pod3.gold .pod3-name .you{background:var(--purple-bg2);color:var(--purple-dark)}
.pod3-bank{font-size:10px;opacity:.8;margin-top:5px;line-height:1.4}
.pod3.empty-slot{background:transparent;box-shadow:none;animation:none}

/* compact list rows: the caption under every amount was making each row tall */
.lb-card{padding:11px 12px}
.lb-amt small{display:none}
.lb-you{display:flex;align-items:center;gap:11px;border-radius:15px;padding:12px;margin-top:10px;
  background-color:#0F8A22;background-image:linear-gradient(140deg,#18A82C 0%,#0F8A22 55%,#0A6B1A 100%);
  color:#fff;box-shadow:0 8px 22px rgba(15,138,34,.24)}
.lb-you .lb-pos{color:rgba(255,255,255,.85)}
.lb-you .lb-nm{color:#fff}
.lb-you .lb-bank{color:rgba(255,255,255,.82)}
.lb-you .lb-amt b{color:#fff}
.lb-you .lb-av{border-color:rgba(255,255,255,.5)}

/* ============================================================================
   PREMIUM FEATURE CARD
   ============================================================================ */

.prem{position:relative;overflow:hidden;border-radius:20px;padding:24px 20px 20px;text-align:center;
  color:#fff;background-color:#0F8A22;
  background-image:linear-gradient(155deg,#18A82C 0%,#0F8A22 48%,#0A6B1A 100%);
  box-shadow:0 16px 38px rgba(15,138,34,.26);
  animation:premIn .5s cubic-bezier(.2,.9,.25,1) both}
@keyframes premIn{0%{opacity:0;transform:translateY(16px)}100%{opacity:1;transform:none}}
.prem > *{position:relative;z-index:1}
.prem-tag{display:inline-block;font-size:10.5px;font-weight:900;letter-spacing:.1em;
  text-transform:uppercase;padding:5px 12px;border-radius:20px;background:var(--gold);color:#3D2F00}
.prem-ic{display:grid;place-items:center;width:66px;height:66px;border-radius:24px;margin:16px auto 14px;
  background:rgba(255,255,255,.2)}
.prem-ic .ic{width:32px;height:32px}
.prem-ic .ic *{opacity:1}
.prem-h{font-size:19px;font-weight:900;line-height:1.28;letter-spacing:-.01em}
.prem-p{font-size:13px;line-height:1.62;margin-top:9px;color:rgba(255,255,255,.9);font-weight:600;
  max-width:34ch;margin-left:auto;margin-right:auto}
.prem-cta{margin-top:18px;background:#fff;color:var(--purple-dark);height:50px}
.prem-cta .ic *{opacity:1}
.prem-back{display:inline-block;margin-top:13px;font-size:12.5px;font-weight:800;
  color:rgba(255,255,255,.86)}


/* ============================================================================
   WAITING CARD (photo / quiz cooldown)
   Every name here is prefixed wcool- and is used nowhere else, so this block
   cannot override anything and nothing can override it. The older .cool-card
   rules above are deliberately left alone.
   ============================================================================ */
.wcool{position:relative;overflow:hidden;border-radius:20px;padding:28px 20px 22px;text-align:center;
  color:#fff;background-color:#0F8A22;
  background-image:linear-gradient(155deg,#18A82C 0%,#0F8A22 48%,#0A6B1A 100%);
  box-shadow:0 16px 38px rgba(15,138,34,.24)}
.wcool > *{position:relative;z-index:1}

.wcool-blob{position:absolute;border-radius:50%;background:rgba(255,255,255,.09);z-index:0;
  animation:wcoolDrift 7s ease-in-out infinite}
.wcool-blob.a{width:150px;height:150px;top:-58px;right:-42px}
.wcool-blob.b{width:96px;height:96px;bottom:-34px;left:-28px;animation-delay:1.4s}
@keyframes wcoolDrift{0%,100%{transform:translate(0,0)}50%{transform:translate(10px,-12px)}}

.wbub{position:absolute;bottom:-24px;border-radius:50%;background:rgba(255,255,255,.28);z-index:0;
  animation:wcoolRise 6s linear infinite}
@keyframes wcoolRise{
  0%{transform:translateY(0) scale(1);opacity:0}
  12%{opacity:.5}
  100%{transform:translateY(-190px) scale(1.5);opacity:0}
}

.wcool-ic{display:grid;place-items:center;width:66px;height:66px;border-radius:24px;margin:0 auto 14px;
  background:rgba(255,255,255,.2)}
.wcool-ic .ic{width:31px;height:31px}
.wcool-ic .ic *{opacity:1}
.wcool-h{font-size:18px;font-weight:900;line-height:1.3}
.wcool-p{font-size:13px;line-height:1.6;margin:8px auto 0;max-width:30ch;
  color:rgba(255,255,255,.88);font-weight:600}

.wcool-timer{margin-top:20px;padding:18px;border-radius:16px;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.2)}
.wcool-v{display:block;font-family:inherit;font-weight:900;font-size:34px;color:#fff;
  letter-spacing:-.01em;line-height:1.1}
.wcool-l{display:block;font-size:11px;font-weight:900;margin-top:6px;color:rgba(255,255,255,.85);
  text-transform:uppercase;letter-spacing:.08em}

.wcool-when{display:inline-flex;align-items:center;gap:7px;margin-top:15px;
  background:rgba(255,255,255,.16);border-radius:20px;padding:8px 14px;
  font-size:12px;font-weight:800;color:rgba(255,255,255,.92)}
.wcool-when .ic{width:14px;height:14px}
.wcool-when .ic *{opacity:1}

/* respect the phone's reduce-motion setting */
@media (prefers-reduced-motion: reduce){
  .wcool-blob,.wbub{animation:none}
}