/* ===========================================================================
   app.css  -  Plamora's ONE stylesheet (build spec: one stylesheet, one JS
   file, no framework). The admin panel does not load it; it has its own
   compact token set inline in admin/_layout.php.

   Sections, in order:
     TOKENS + BASE + PRIMITIVES   colours, type, buttons, forms, pills, alerts
     SHELL                        preloader, drawer, top bar, nav, desktop
     COMPONENTS                   lists, empty states, VTU, plans, courses, auth, landing
     MONEY                        result sheets, receipts, deposits, withdraw form
     REWARDS                      Rewards hub, tasks, sponsored posts
     PAGES                        dashboard, Sales, Bank details, PIN, notifications

   Every component family has its own prefix and no prefix is reused.
   =========================================================================== */


:root{
  --accent:          #8B5CF6;   /* Brand accent, highlights and glow */
  --accent-soft:     #C4B5FD;   /* Lighter accent for gradients */
  --primary:         #6D28D9;   /* Primary action colour (buttons, active nav) */
  --primary-dark:    #5B21B6;   /* Primary hover / pressed */
  --on-primary:      #FFFFFF;   /* Text and icons on a solid primary fill */
  --primary-bg:      #F5F3FF;   /* Tinted chip background only, never the page */
  --primary-bg2:     #EDE9FE;   /* Tinted chip, stronger */
  --primary-border:  #DDD6FE;   /* Border on tinted chips */

  --bg:              #FFFFFF;   /* Page background */
  --bg-input:        #F4F5F7;   /* Form field background */
  --border:          #ECEDF0;   /* Hairline divider */
  --card:            #FFFFFF;   /* Card surface */
  --card-border:     #E6E7EB;   /* Card border */
  --surface:         #FAFAFC;   /* Alternating section band */

  --text:            #110D18;   /* Primary text */
  --text-2:          #4B4857;   /* Secondary text */
  --text-3:          #777385;   /* Muted / label text */

  --green:           #15803D;   /* Success */
  --green-bg:        #ECFDF3;
  --amber:           #8A6100;   /* Warning text */
  --amber-bg:        #FEF7E6;
  --red:             #C81E1E;   /* Destructive and error (darkened from #DC2626 to pass 4.5:1 on its tint) */
  --red-bg:          #FEF2F2;   /* Error tint */

  --gold:            #FACC15;   /* Reward / premium accent */
  --gold-bg:         #FEF9C3;   /* Reward chip background */
  --gold-dark:       #8A6100;   /* Reward text on tint */
  --gold-light:      #FDE68A;

  --tg:              #229ED9;   /* Telegram brand blue */
  --tg-bg:           #EAF6FD;
  --tg-border:       #A9DAF2;
  --tg-text:         #0B4E6B;

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

  --font: 'Nunito Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  color-scheme: light;
}

/* Dark theme. Applied by setting data-theme="dark" on <html> (see head.php).
   Only tokens change here; no component redefines a colour for dark mode. */
[data-theme="dark"]{
  --accent:          #A78BFA;
  --primary:         #A78BFA;
  --primary-dark:    #C4B5FD;
  --on-primary:      #16102A;
  --primary-bg:      #1A1528;
  --primary-bg2:     #221B35;
  --primary-border:  #3A2E5C;

  --bg:              #0C0B10;
  --bg-input:        #1C1B22;
  --border:          #24232B;
  --card:            #16151B;
  --card-border:     #27262E;
  --surface:         #111016;

  --text:            #F2F1F5;
  --text-2:          #BAB7C4;
  --text-3:          #8C8899;

  --green:           #4ADE80;
  --green-bg:        #0F2418;
  --amber:           #FBBF24;
  --amber-bg:        #2A2110;
  --red:             #F87171;
  --red-bg:          #2A1414;

  --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);
  color-scheme: dark;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}

/* The hidden attribute must always win. A class like .row{display:flex} beats
   the browser's own [hidden] rule, so an element marked hidden still renders. */
[hidden]{display:none !important}

/* Nothing may scroll the page sideways (clip keeps position:sticky working). */
body{overflow-x:clip}
html,body{background:var(--bg);color:var(--text);font-family:var(--font);
          -webkit-font-smoothing:antialiased;text-rendering:optimizeSpeed}
body{font-size:14px;line-height:1.45;font-weight:600}

a{text-decoration:none;color:inherit}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer;border:0;background:transparent}
img{max-width:100%;display:block}
sup{font-size:.55em;vertical-align:.7em;opacity:.75;margin-left:1px}
.mono{font-family:ui-monospace,'JetBrains Mono',monospace;font-weight:600}
.muted{color:var(--text-3)}
.right{text-align:right}

/* Keyboard users see where they are; mouse users don't get a ring on click. */
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:6px}

/* Never let a long money value or reference stretch the layout. */
.wrap-any{overflow-wrap:anywhere}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* --------------------------------------------------------------------------
   Primitives (shared by app and admin)
   -------------------------------------------------------------------------- */
.card{background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius);padding:16px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;
     border-radius:12px;font-weight:900;font-size:14px;padding:0 18px;white-space:nowrap;
     transition:background .15s,transform .1s,opacity .15s}
.btn:active{transform:scale(.98)}
.btn[disabled],.btn.is-busy{opacity:.55;pointer-events:none}
.btn-block{width:100%}
.btn-sm{height:36px;padding:0 12px;font-size:12.5px;border-radius:10px}
.btn-primary{background:var(--primary);color:var(--on-primary)}
.btn-primary:hover{background:var(--primary-dark)}
.btn-outline{border:1.5px solid var(--card-border);color:var(--text);background:var(--card)}
.btn-outline:hover{border-color:var(--primary-border)}
.btn-ghost{color:var(--text-2)}
.btn-ghost:hover{background:var(--bg-input)}
.btn-danger{background:var(--red);color:#fff}
.btn-gold{background:var(--gold);color:#3D2B00}
.btn-tg{background:var(--tg);color:#fff}

/* Inline SVG sized to the text it sits in, coloured by its context.
   Solar Line Duotone: an outline plus a second, softer tone (.ic-2). The
   second tone follows the line colour unless a context sets --ic-tint
   (colour) or --ic-tint-o (opacity). */
.ic{width:1.15em;height:1.15em;display:inline-block;vertical-align:-0.22em;flex-shrink:0;fill:currentColor}
.ic .ic-2{stroke:var(--ic-tint,currentColor);opacity:var(--ic-tint-o,.5)}

/* Brand lockup (app and admin) */
.brand{display:inline-flex;align-items:center;gap:8px;font-weight:900;font-size:17px;letter-spacing:-.01em}
.brand img{border-radius:8px}

/* Pills / status */
.pill{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 9px;border-radius:999px;
      font-size:11px;font-weight:800;white-space:nowrap;background:var(--bg-input);color:var(--text-2)}
.pill-ok{background:var(--green-bg);color:var(--green)}
.pill-warn{background:var(--amber-bg);color:var(--amber)}
.pill-bad{background:var(--red-bg);color:var(--red)}
.pill-brand{background:var(--primary-bg2);color:var(--primary)}
.pill-gold{background:var(--gold-bg);color:var(--gold-dark)}

/* Forms */
.frm-field{display:block;margin-bottom:14px}
.frm-label{display:block;font-size:12.5px;font-weight:800;color:var(--text-2);margin-bottom:6px}
.frm-input{width:100%;height:48px;border-radius:12px;border:1.5px solid transparent;background:var(--bg-input);
           padding:0 14px;font-weight:700;font-size:14.5px;outline:none;transition:border-color .15s}
textarea.frm-input{height:auto;min-height:96px;padding:12px 14px;line-height:1.45}
select.frm-input{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--text-3) 50%),linear-gradient(135deg,var(--text-3) 50%,transparent 50%);
                 background-position:calc(100% - 19px) 21px,calc(100% - 14px) 21px;background-size:5px 5px;background-repeat:no-repeat;padding-right:36px}
.frm-input:focus{border-color:var(--primary)}
.frm-help{font-size:11.5px;color:var(--text-3);margin-top:5px;font-weight:700}
.frm-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* Alerts */
.alr{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:12px;font-size:13px;font-weight:700;margin-bottom:14px}
.alr-ok{background:var(--green-bg);color:var(--green)}
.alr-bad{background:var(--red-bg);color:var(--red)}
.alr-warn{background:var(--amber-bg);color:var(--amber)}
.alr-info{background:var(--primary-bg);color:var(--primary)}

/* ===========================================================================
   SHELL  -  build spec section 1: preloader, drawer, main column, top bar,
   spacer and the fixed bottom nav. Phone first: the body is a 480px column;
   from 1100px the drawer becomes a fixed sidebar and the nav goes away.
   =========================================================================== */
body.is-app{max-width:480px;margin:0 auto;min-height:100vh;position:relative}
body.is-bare{min-height:100vh}
.desk-main{display:block;padding:0 16px;min-height:100vh}
.spacer{height:calc(110px + env(safe-area-inset-bottom))}
.section{margin-top:16px}
.section:first-of-type{margin-top:4px}

/* ---- preloader: once per session, hides itself even without JS ---- */
.pre{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:var(--bg);pointer-events:none;
     animation:preOut .35s ease .55s forwards}
.pre-mark{position:relative;width:64px;height:64px;border-radius:20px;display:grid;place-items:center;
          background:radial-gradient(circle at 30% 25%,#C4B5FD,#7C3AED 55%,#3B0F8C);box-shadow:0 14px 36px -10px rgba(109,40,217,.7);
          animation:prePulse 1s ease-in-out infinite}
.pre-mark img{width:38px;height:38px;border-radius:10px}
.pre-seen .pre,.pre.is-done{display:none}
@keyframes preOut{to{opacity:0;visibility:hidden}}
@keyframes prePulse{50%{transform:scale(1.06)}}

/* ---- impersonation strip ---- */
.imp{position:sticky;top:0;z-index:31;display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 -16px;padding:8px 16px;
     background:#F59E0B;color:#2A1A00;font-size:12.5px;font-weight:800}
.imp span{display:flex;align-items:center;gap:6px;min-width:0}
.imp b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.imp button{height:30px;padding:0 12px;border-radius:9px;background:#2A1A00;color:#FEF3C7;font-weight:900;font-size:12px;flex-shrink:0}

/* ---- top bar: avatar + greeting + theme + bell + menu ---- */
.tb{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:8px;height:66px;margin:0 -16px;padding:0 16px;
    background:color-mix(in srgb,var(--bg) 86%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px)}
.imp + .tb{top:46px}
.pg-referrals .tb,.pg-dashboard .tb{background:color-mix(in srgb,var(--dash-bg) 86%,transparent)}
.tb-av{width:42px;height:42px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;font-weight:900;font-size:14.5px;color:#fff;
       background:radial-gradient(circle at 30% 25%,#A78BFA,#6D28D9 60%,#3B0F8C);box-shadow:0 0 0 3px var(--primary-bg2)}
.tb-hi{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2}
.tb-g{font-size:11.5px;font-weight:800;color:var(--text-3)}
.tb-n{font-size:16px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-btn,.top-icon{position:relative;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;
                  color:var(--text-2);font-size:20px;flex-shrink:0}
.tb-btn:hover,.top-icon:hover{background:var(--bg-input)}
.tb-dot{position:absolute;top:4px;right:3px;min-width:17px;height:17px;padding:0 4px;border-radius:99px;display:grid;place-items:center;
        background:var(--red);color:#fff;font-size:9.5px;font-weight:900;box-shadow:0 0 0 2px var(--bg)}
.only-dark{display:none}
[data-theme="dark"] .only-dark{display:inline-block}
[data-theme="dark"] .only-light{display:none}

/* ---- back head (profile-bank.php only; no top bar there) ---- */
.back-head{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:8px;height:62px;margin:0 -16px;padding:0 10px;
           background:color-mix(in srgb,var(--bg) 86%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.back-head a{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:12px;font-size:22px;color:var(--text)}
.back-head a:hover{background:var(--bg-input)}
.back-head h1{font-size:17px;font-weight:900}

/* ---- drawer: div.ra-scrim#raScrim + aside.ra-drawer#raDrawer ---- */
.ra-scrim{position:fixed;inset:0;z-index:70;background:rgba(10,8,18,.55);opacity:0;pointer-events:none;transition:opacity .25s}
.ra-scrim.open{opacity:1;pointer-events:auto}
.ra-drawer{position:fixed;top:0;bottom:0;left:0;z-index:71;width:min(86vw,312px);display:flex;flex-direction:column;background:var(--card);
           transform:translateX(-104%);transition:transform .32s cubic-bezier(.2,.8,.2,1);box-shadow:var(--shadow-lg);visibility:hidden}
.ra-drawer.open{transform:none;visibility:visible}
body.ra-lock{overflow:hidden}
.ra-head{position:relative;overflow:hidden;isolation:isolate;padding:18px 16px 16px;color:#fff;
         background:radial-gradient(130% 120% at 100% 0%,#A78BFA 0%,#7C3AED 30%,#5B21B6 60%,#2E1065 100%)}
.ra-head > :not(.bub){position:relative;z-index:1}
.ra-who{display:flex;align-items:center;gap:11px}
.ra-av{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:16px;background:rgba(255,255,255,.18);
       border:1.5px solid rgba(255,255,255,.4);flex-shrink:0}
.ra-id{flex:1;min-width:0;display:flex;flex-direction:column}
.ra-id b{font-size:15px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ra-id span{font-size:12px;opacity:.8;font-weight:700}
.ra-x{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.12);font-size:18px}
.ra-bal{margin-top:16px}
.ra-bal span{display:block;font-size:11.5px;font-weight:800;opacity:.78}
.ra-bal b{display:block;font-size:24px;font-weight:900;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ra-plan{display:inline-flex;align-items:center;gap:5px;margin-top:10px;height:26px;padding:0 10px;border-radius:99px;font-size:11.5px;font-weight:900;
         background:rgba(250,204,21,.92);color:#3D2B00}
.ra-plan.is-free{background:rgba(255,255,255,.16);color:#fff}
.ra-plan .ic{--ic-tint:#3D2B00}
.ra-nav{flex:1;overflow-y:auto;padding:8px 10px 10px;overscroll-behavior:contain}
.ra-grp{font-size:11px;font-weight:900;color:var(--text-3);padding:14px 10px 5px}
.ra-a{display:flex;align-items:center;gap:12px;height:44px;padding:0 10px;border-radius:12px;font-weight:800;font-size:14px;color:var(--text-2)}
.ra-a > .ic:first-child{font-size:20px;color:var(--text-3)}
.ra-a span{flex:1}
.ra-a:hover{background:var(--surface)}
.ra-a.is-on{background:var(--primary-bg);color:var(--primary)}
.ra-a.is-on > .ic:first-child{color:var(--primary)}
.ra-ext{font-size:14px;color:var(--text-3)}
.ra-badge{min-width:20px;height:20px;padding:0 6px;border-radius:99px;display:grid;place-items:center;background:var(--red);color:#fff;font-size:10.5px;font-weight:900;flex:0 0 auto !important}
.ra-up{flex:0 0 auto !important;height:22px;padding:0 8px;border-radius:99px;display:grid;place-items:center;background:var(--gold);color:#3D2B00;font-size:10.5px;font-weight:900}
.ra-foot{padding:10px;border-top:1px solid var(--border)}
.ra-out{display:flex;align-items:center;gap:12px;width:100%;height:44px;padding:0 10px;border-radius:12px;font-weight:900;font-size:14px;color:var(--red)}
.ra-out:hover{background:var(--red-bg)}
.ra-out .ic{font-size:20px}

/* ---- bubbles: gradient surfaces carry 8 .bub spans; app.js lets them drift ---- */
.bub{position:absolute;left:0;top:0;z-index:0;pointer-events:none;border-radius:50%;will-change:transform}
.bub-a{width:46px;height:46px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.28);box-shadow:inset 0 1px 6px rgba(255,255,255,.18)}
.bub-b{width:32px;height:32px;border:2px solid rgba(255,255,255,.34)}
.bub-c{width:22px;height:22px;border-radius:5px;background:rgba(255,255,255,.12);border:1.2px solid rgba(255,255,255,.3)}
.bub-d{width:26px;height:26px;border-radius:7px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.45);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.bub-e{width:14px;height:14px;background:radial-gradient(circle,#FDE68A,#FACC15 60%);opacity:.8}
.bub-f{width:18px;height:18px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.3)}
.bub-g{width:9px;height:9px;background:rgba(255,255,255,.55)}
.bub-h{width:60px;height:60px;background:radial-gradient(circle,rgba(255,255,255,.14),transparent 70%)}
.bub-a{transform:translate(70%,20px)}.bub-b{transform:translate(240px,90px)}.bub-c{transform:translate(160px,30px)}.bub-d{transform:translate(30px,120px)}
.bub-e{transform:translate(200px,150px)}.bub-f{transform:translate(110px,160px)}.bub-g{transform:translate(260px,30px)}.bub-h{transform:translate(-10px,60px)}

/* ---- bottom nav: an always-dark glass dock; Rewards is the cut gem ---- */
.dock{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));transform:translateX(-50%);
      width:calc(100% - 28px);max-width:452px;z-index:40}
.dock-bar{position:relative;display:grid;grid-template-columns:1fr 1.2fr 1fr 1fr;height:66px;padding:0 6px 9px;border-radius:24px;
          background:linear-gradient(180deg,rgba(34,26,56,.93),rgba(14,10,24,.95));
          -webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);
          box-shadow:0 18px 40px -12px rgba(24,8,56,.6),0 2px 6px rgba(0,0,0,.22),
                     inset 0 1px 0 rgba(255,255,255,.07),inset 0 0 0 1px rgba(167,139,250,.2)}
.dock-bar::before{content:"";position:absolute;left:14%;right:14%;top:0;height:1px;
                  background:linear-gradient(90deg,transparent,rgba(196,181,253,.55),transparent)}
.dock-i,.dock-orb{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;
                  font-size:10.5px;font-weight:800;letter-spacing:.01em;color:rgba(232,226,255,.62);transition:color .2s}
.dock-i .ic{font-size:23px;--ic-tint-o:.55;transition:transform .3s cubic-bezier(.2,.8,.2,1),color .2s,filter .2s}
.dock-i:hover{color:rgba(232,226,255,.82)}
.dock-i.is-on{color:#fff}
.dock-i.is-on .ic{color:#E4DCFF;--ic-tint:#C4B5FD;--ic-tint-o:.9;transform:translateY(-2px);filter:drop-shadow(0 0 8px rgba(167,139,250,.85))}
.dock-i:active .ic{transform:scale(.88)}
.dock-led{position:absolute;top:0;left:50%;width:22px;height:3px;margin-left:-11px;border-radius:0 0 4px 4px;background:#DDD6FE;
          box-shadow:0 0 8px 1px rgba(196,181,253,.9),0 0 22px 5px rgba(139,92,246,.45);opacity:0;transform:scaleX(.2);
          transition:opacity .25s,transform .35s cubic-bezier(.2,.8,.2,1)}
.dock-i.is-on .dock-led{opacity:1;transform:none}
.dock-orb{color:rgba(232,226,255,.86);font-weight:900}
.dock-orb.is-on{color:#fff}
.dock-core{position:absolute;left:50%;top:-22px;width:56px;height:56px;margin-left:-28px;border-radius:50%;
           display:flex;align-items:center;justify-content:center;color:#fff;
           background:radial-gradient(circle at 32% 26%,#C4B5FD 0%,#8B5CF6 30%,#6D28D9 62%,#3B0F8C 100%);
           box-shadow:0 0 0 5px #1E1632,0 12px 26px -4px rgba(109,40,217,.8),
                      inset 0 -7px 12px rgba(30,0,80,.5),inset 0 2px 3px rgba(255,255,255,.4);
           transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s}
.dock-core .ic{font-size:25px;filter:drop-shadow(0 1px 2px rgba(30,0,80,.55)) drop-shadow(0 0 6px rgba(237,233,254,.45))}
.dock-core::before{content:"";position:absolute;inset:-9px;border-radius:50%;pointer-events:none;
                   background:conic-gradient(from 0deg,transparent 0 58%,rgba(196,181,253,.95) 80%,transparent 94%);
                   -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));
                   mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));
                   animation:dock-spin 5s linear infinite}
.dock-orb:hover .dock-core{transform:translateY(-2px)}
.dock-orb:active .dock-core{transform:scale(.93)}
.dock-orb.is-on .dock-core{box-shadow:0 0 0 5px #1E1632,0 0 0 7px rgba(167,139,250,.35),0 14px 30px -4px rgba(139,92,246,.95),
                                      inset 0 -7px 12px rgba(30,0,80,.5),inset 0 2px 3px rgba(255,255,255,.4)}
.dock-i:focus-visible,.dock-orb:focus-visible{outline:2px solid #C4B5FD;outline-offset:-4px;border-radius:14px}
@keyframes dock-spin{to{transform:rotate(360deg)}}

/* ---- link loading state (app.js; skipped for logout/cancel/delete/...) ---- */
.navbar{position:fixed;top:0;left:0;height:3px;width:0;z-index:300;background:linear-gradient(90deg,var(--accent),var(--gold));
        box-shadow:0 0 10px var(--accent);transition:width 8s cubic-bezier(.1,.9,.2,1),opacity .3s}
.navbar.go{width:88%}
.navbar.done{width:100%;opacity:0;transition:width .2s,opacity .3s .2s}

/* ---- wide screens: the drawer is a sidebar, the nav goes away ---- */
@media (min-width:1100px){
  body.is-app{max-width:none;margin:0}
  .ra-drawer{transform:none;visibility:visible;box-shadow:none;border-right:1px solid var(--card-border);width:288px}
  .ra-scrim,.ra-x,.tb-menu,.dock{display:none}
  body.ra-lock{overflow:auto}
  .desk-main{margin-left:288px;padding:0 32px;max-width:1240px}
  .tb,.back-head,.imp{margin:0 -32px;padding-left:32px;padding-right:32px}
  .spacer{height:40px}
  .desk-cols.dash-cols{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:24px;align-items:start}
  .desk-narrow{max-width:640px}
  /* Every page except the dashboard reads as one comfortable column. */
  body.is-app:not(.pg-dashboard) .desk-main > :not(.tb):not(.imp):not(.back-head):not(.spacer){max-width:640px}
}
@media (prefers-reduced-motion: reduce){.dock-core::before{animation:none;transform:rotate(200deg)}.pre{display:none}}

/* ===========================================================================
   COMPONENTS
   =========================================================================== */

/* ---- section head ---- */
.sec{display:flex;align-items:center;justify-content:space-between;margin:22px 2px 10px}
.sec-t{font-size:15.5px;font-weight:900}
.sec-a{font-size:12.5px;font-weight:800;color:var(--primary)}
.page-h{font-size:22px;font-weight:900;letter-spacing:-.01em;margin:8px 2px 4px}
.page-s{color:var(--text-2);font-size:13.5px;margin:0 2px 16px}

/* ---- quick actions ---- */
.qa{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.qa-i{display:flex;flex-direction:column;align-items:center;gap:7px;font-size:11.5px;font-weight:800;color:var(--text-2);text-align:center}
.qa-ic{--ic-tint-o:.6;width:54px;height:54px;border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:25px;
       background:var(--primary-bg);color:var(--primary);border:1px solid var(--primary-border)}
.qa-i:nth-child(2) .qa-ic{background:var(--tg-bg);color:var(--tg);border-color:var(--tg-border)}
.qa-i:nth-child(3) .qa-ic{background:var(--gold-bg);color:var(--gold-dark);border-color:var(--gold-light)}
.qa-i:nth-child(4) .qa-ic{background:var(--green-bg);color:var(--green);border-color:transparent}

/* ---- announcement / banners ---- */
.ban{display:flex;gap:12px;align-items:center;padding:14px;border-radius:var(--radius);
     background:var(--primary-bg);border:1px solid var(--primary-border);margin-top:14px}
.ban-ic{width:40px;height:40px;border-radius:12px;background:var(--primary);color:var(--on-primary);display:flex;align-items:center;justify-content:center;font-size:19px;flex-shrink:0}
.ban-t{font-weight:900;font-size:13.5px}
.ban-b{font-size:12.5px;color:var(--text-2);font-weight:700}
.ban-gold{background:var(--gold-bg);border-color:var(--gold-light)}
.ban-gold .ban-ic{background:var(--gold);color:#3D2B00}

/* ---- list rows ---- */
.lst{background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius);overflow:hidden}
.lst-r{display:flex;align-items:center;gap:12px;padding:13px 14px;border-top:1px solid var(--border)}
.lst-r:first-child{border-top:0}
a.lst-r:hover{background:var(--surface)}
.lst-ic{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:17px;
        background:var(--bg-input);color:var(--text-2);flex-shrink:0}
.lst-ic.is-in{background:var(--green-bg);color:var(--green)}
.lst-ic.is-out{background:var(--primary-bg);color:var(--primary)}
.lst-m{flex:1;min-width:0}
.lst-t{font-weight:800;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lst-s{font-size:11.5px;color:var(--text-3);font-weight:700;margin-top:1px}
.lst-v{text-align:right;font-weight:900;font-size:13.5px;white-space:nowrap;font-variant-numeric:tabular-nums}
.lst-v.is-in{color:var(--green)}
.lst-v .pill{margin-top:3px}

/* ---- empty state ---- */
.emp{text-align:center;padding:30px 20px;color:var(--text-3)}
.emp > .ic{font-size:34px;color:var(--primary);opacity:.8}
.emp-t{font-weight:900;color:var(--text);margin-top:10px;font-size:14.5px}
.emp-b{font-size:12.5px;margin:4px 0 14px;font-weight:700}

/* ---- segmented control ---- */
.seg{display:flex;background:var(--bg-input);border-radius:12px;padding:4px;gap:4px;margin-bottom:14px;overflow-x:auto}
.seg-i{flex:1;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-weight:800;
       font-size:12.5px;color:var(--text-2);white-space:nowrap;padding:0 10px}
.seg-i.is-on{background:var(--card);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.08)}

/* ---- VTU hub tiles ---- */
.vtu-g{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.vtu-t{display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:var(--radius);background:var(--card);border:1px solid var(--card-border)}
.vtu-t:hover{border-color:var(--primary-border)}
.vtu-t .qa-ic{width:44px;height:44px;border-radius:14px;font-size:20px}
.vtu-tt{font-weight:900;font-size:14.5px}
.vtu-ts{font-size:11.5px;color:var(--text-3);font-weight:700}
.vtu-t.is-soon{opacity:.55;pointer-events:none}

/* ---- network picker ---- */
.net{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px}
.net input{position:absolute;opacity:0;pointer-events:none}
.net-o{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px;border-radius:14px;
       border:1.5px solid var(--card-border);background:var(--card);font-size:11.5px;font-weight:800;cursor:pointer}
.net-dot{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:900;color:#fff}
.net-mtn .net-dot{background:#FFCB05;color:#1A1A1A}
.net-airtel .net-dot{background:#E40000}
.net-glo .net-dot{background:#3BA935}
.net-9mobile .net-dot{background:#006E53}
.net input:checked + .net-o{border-color:var(--primary);background:var(--primary-bg)}
.net input:focus-visible + .net-o{outline:2px solid var(--primary);outline-offset:2px}

/* ---- data plans ---- */
.dpl{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.dpl input{position:absolute;opacity:0;pointer-events:none}
.dpl-o{display:flex;flex-direction:column;gap:2px;padding:11px 10px;border-radius:14px;border:1.5px solid var(--card-border);
       background:var(--card);cursor:pointer;height:100%}
.dpl-n{font-weight:900;font-size:14px;line-height:1.2}
.dpl-d{font-size:10.5px;color:var(--text-3);font-weight:800}
.dpl-p{font-weight:900;font-size:12.5px;color:var(--primary);margin-top:4px}
.dpl input:checked + .dpl-o{border-color:var(--primary);background:var(--primary-bg)}
.dpl input:focus-visible + .dpl-o{outline:2px solid var(--primary);outline-offset:2px}
.amt-chips{display:flex;gap:8px;flex-wrap:wrap;margin:-4px 0 14px}
.amt-chip{height:32px;padding:0 12px;border-radius:999px;background:var(--bg-input);font-weight:800;font-size:12.5px}
.amt-chip:hover{background:var(--primary-bg2);color:var(--primary)}

/* ---- summary box (confirm before paying) ---- */
.sum{background:var(--surface);border:1px dashed var(--card-border);border-radius:14px;padding:12px 14px;margin-bottom:14px}
.sum-r{display:flex;justify-content:space-between;font-size:13px;font-weight:700;padding:3px 0;color:var(--text-2)}
.sum-r b{color:var(--text);font-weight:900}

/* ---- join plans ---- */
.pln{border:1.5px solid var(--card-border);border-radius:20px;padding:18px;background:var(--card);margin-bottom:12px;position:relative}
.pln.is-best{border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-bg)}
.pln-tag{position:absolute;top:-11px;right:16px;background:var(--primary);color:var(--on-primary);font-size:10.5px;font-weight:900;padding:4px 10px;border-radius:999px}
.pln-n{font-weight:900;font-size:16px}
.pln-p{font-size:28px;font-weight:900;letter-spacing:-.02em;margin:4px 0 10px}
.pln-ul{list-style:none;margin-bottom:14px}
.pln-ul li{display:flex;gap:8px;align-items:flex-start;font-size:13px;font-weight:700;color:var(--text-2);padding:3px 0}
.pln-ul .ic{color:var(--green);margin-top:1px}

/* ---- courses ---- */
.crs-g{display:grid;gap:12px}
.crs{display:flex;gap:12px;padding:12px;border-radius:var(--radius);background:var(--card);border:1px solid var(--card-border)}
.crs:hover{border-color:var(--primary-border)}
.crs-cv{width:92px;height:92px;border-radius:14px;flex-shrink:0;object-fit:cover;background:linear-gradient(135deg,var(--primary-bg2),var(--gold-bg));
        display:flex;align-items:center;justify-content:center;color:var(--primary);font-size:30px}
.crs-m{flex:1;min-width:0;display:flex;flex-direction:column}
.crs-t{font-weight:900;font-size:14.5px;line-height:1.25}
.crs-s{font-size:12px;color:var(--text-3);font-weight:700;margin-top:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.crs-f{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:8px}
.crs-p{font-weight:900;color:var(--primary);font-size:14px}
.crs-hero{border-radius:20px;overflow:hidden;aspect-ratio:16/9;background:linear-gradient(135deg,var(--primary-bg2),var(--gold-bg));
          display:flex;align-items:center;justify-content:center;color:var(--primary);font-size:46px;margin-bottom:14px}
.crs-hero img{width:100%;height:100%;object-fit:cover}
.crs-desc{color:var(--text-2);font-size:13.5px;line-height:1.6;white-space:pre-line;margin:6px 2px 14px}
.crs-bar{height:6px;background:var(--bg-input);border-radius:99px;overflow:hidden;margin-top:8px}
.crs-bar i{display:block;height:100%;background:var(--primary);border-radius:99px}

/* ---- lessons ---- */
.les-n{width:30px;height:30px;border-radius:10px;background:var(--bg-input);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:12px;flex-shrink:0}
.les-n.is-done{background:var(--green-bg);color:var(--green)}
.les-video{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#000;margin-bottom:14px}
.les-video iframe,.les-video video{position:absolute;inset:0;width:100%;height:100%;border:0}
.les-body{font-size:14px;line-height:1.65;color:var(--text-2);white-space:pre-line}

/* ---- tasks ---- */
.tsk{display:flex;gap:12px;align-items:center;padding:14px;border-radius:var(--radius);background:var(--card);border:1px solid var(--card-border);margin-bottom:10px}
.tsk-ic{width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;background:var(--primary-bg);color:var(--primary)}
.tsk-ic.is-telegram{background:var(--tg-bg);color:var(--tg)}
.tsk-ic.is-sponsored{background:var(--gold-bg);color:var(--gold-dark)}
.tsk-m{flex:1;min-width:0}
.tsk-t{font-weight:900;font-size:13.5px}
.tsk-s{font-size:11.5px;color:var(--text-3);font-weight:700;margin-top:2px}
.tsk-r{font-weight:900;color:var(--green);font-size:13.5px;white-space:nowrap}
.tsk-steps{counter-reset:s;list-style:none;margin:4px 0 14px}
.tsk-steps li{counter-increment:s;display:flex;gap:10px;font-size:13px;font-weight:700;color:var(--text-2);padding:6px 0}
.tsk-steps li::before{content:counter(s);width:22px;height:22px;border-radius:50%;background:var(--primary-bg2);color:var(--primary);
                      font-size:11px;font-weight:900;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.tsk-wait{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:800;color:var(--amber);margin-bottom:12px}
.gate{text-align:center;padding:22px 18px}
.gate > .ic{font-size:30px;color:var(--primary)}
.gate-t{font-weight:900;font-size:16px;margin:8px 0 4px}
.gate-b{font-size:13px;color:var(--text-2);margin-bottom:14px}

/* ---- sales / referral ---- */
.sal-link{display:flex;align-items:center;gap:8px;background:var(--bg-input);border-radius:12px;padding:6px 6px 6px 12px;margin-top:10px}
.sal-link input{flex:1;min-width:0;border:0;background:transparent;font-weight:800;font-size:12.5px;outline:none}
.sal-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.sal-s{background:var(--surface);border:1px solid var(--card-border);border-radius:14px;padding:12px 10px}
.sal-s .l{font-size:10.5px;font-weight:800;color:var(--text-3);text-transform:uppercase;letter-spacing:.04em}
.sal-s .v{font-size:17px;font-weight:900;margin-top:3px;font-variant-numeric:tabular-nums}

/* ---- leaderboard ---- */
.lb-pod{display:grid;grid-template-columns:1fr 1.15fr 1fr;align-items:end;gap:8px;margin:6px 0 14px}
.lb-p{text-align:center}
.lb-av{width:52px;height:52px;margin:0 auto 6px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:900;
       background:var(--primary-bg2);color:var(--primary);border:3px solid var(--card)}
.lb-p.is-1 .lb-av{width:64px;height:64px;background:var(--gold);color:#3D2B00;box-shadow:0 0 0 3px var(--gold-light)}
.lb-u{font-weight:900;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-a{font-weight:800;font-size:11.5px;color:var(--text-3)}
.lb-blk{margin-top:8px;border-radius:14px 14px 0 0;background:var(--primary-bg);color:var(--primary);font-weight:900;font-size:18px;display:flex;align-items:center;justify-content:center}
.lb-p.is-1 .lb-blk{height:84px;background:var(--primary);color:var(--on-primary)}
.lb-p.is-2 .lb-blk{height:62px}
.lb-p.is-3 .lb-blk{height:48px}
.lb-rk{width:26px;font-weight:900;color:var(--text-3);font-size:12.5px;text-align:center}
.lb-me{background:var(--primary-bg)}

/* ---- profile ---- */
.prf-head{display:flex;gap:14px;align-items:center;padding:6px 2px 4px}
.prf-av{width:60px;height:60px;border-radius:50%;background:var(--primary);color:var(--on-primary);display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:900}
.prf-n{font-weight:900;font-size:18px}
.prf-e{font-size:12.5px;color:var(--text-3);font-weight:700}

/* ---- auth ---- */
.aut{min-height:100vh;display:flex;flex-direction:column;max-width:440px;margin:0 auto;padding:24px 20px 40px}
.aut-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}
.aut-h{font-size:26px;font-weight:900;letter-spacing:-.02em}
.aut-s{color:var(--text-2);margin:4px 0 22px;font-size:14px}
.aut-foot{text-align:center;margin-top:18px;font-size:13px;color:var(--text-2)}
.aut-foot a{color:var(--primary);font-weight:900}
.pw{position:relative;display:block}
.pw .frm-input{padding-right:48px}
.pw-t{position:absolute;right:6px;top:6px;width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--text-3);font-size:18px}

/* ---- landing ---- */
.lnd{max-width:1080px;margin:0 auto;padding:0 20px}
.lnd-nav{display:flex;justify-content:space-between;align-items:center;height:72px}
.lnd-nav .r{display:flex;gap:8px;align-items:center}
.lnd-hero{display:grid;gap:28px;padding:28px 0 40px;align-items:center}
.lnd-k{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:999px;background:var(--primary-bg);color:var(--primary);font-size:12px;font-weight:900;border:1px solid var(--primary-border)}
.lnd-h{font-size:40px;line-height:1.05;font-weight:900;letter-spacing:-.03em;margin:14px 0 12px}
.lnd-h em{font-style:normal;color:var(--primary)}
.lnd-p{font-size:16px;color:var(--text-2);max-width:520px;font-weight:600}
.lnd-cta{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.lnd-phone{justify-self:center;width:100%;max-width:340px;border-radius:36px;padding:14px;background:var(--card);border:1px solid var(--card-border);box-shadow:var(--shadow-lg)}
.lnd-sec{padding:40px 0;border-top:1px solid var(--border)}
.lnd-st{font-size:26px;font-weight:900;letter-spacing:-.02em;margin-bottom:6px}
.lnd-ss{color:var(--text-2);margin-bottom:22px}
.lnd-g{display:grid;gap:12px}
.lnd-f{padding:18px;border-radius:var(--radius);border:1px solid var(--card-border);background:var(--card)}
.lnd-f .qa-ic{width:44px;height:44px;border-radius:14px;font-size:20px;margin-bottom:12px}
.lnd-ft{font-weight:900;font-size:15.5px}
.lnd-fb{color:var(--text-2);font-size:13.5px;margin-top:4px}
.lnd-foot{padding:28px 0 40px;border-top:1px solid var(--border);color:var(--text-3);font-size:12.5px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
@media (min-width:860px){
  .lnd-hero{grid-template-columns:1.1fr .9fr;padding:56px 0 64px}
  .lnd-h{font-size:58px}
  .lnd-g{grid-template-columns:repeat(4,1fr)}
}

/* ---- modal (replaces native confirm) ---- */
.mdl{position:fixed;inset:0;z-index:80;display:flex;align-items:flex-end;justify-content:center;background:rgba(10,8,16,.55);padding:16px}
.mdl-b{width:100%;max-width:440px;background:var(--card);border-radius:22px;padding:20px;box-shadow:var(--shadow-lg)}
.mdl-t{font-weight:900;font-size:17px;margin-bottom:6px}
.mdl-p{color:var(--text-2);font-size:13.5px;margin-bottom:16px}
.mdl-a{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (min-width:600px){.mdl{align-items:center}}

/* ---- toast ---- */
.tst{position:fixed;left:50%;bottom:118px;transform:translateX(-50%);z-index:90;background:var(--text);color:var(--bg);
     padding:10px 16px;border-radius:12px;font-weight:800;font-size:13px;box-shadow:var(--shadow-lg)}

/* very small phones */
@media (max-width:360px){
  .desk-main{padding-left:12px;padding-right:12px}
  .tb,.back-head,.imp{margin:0 -12px;padding-left:12px;padding-right:12px}
  .dpl{grid-template-columns:repeat(2,1fr)}
}

/* ===========================================================================
   money.css  -  wallets, deposits, withdrawals, receipts, result screens.
   Families: wdk- wallet deck · res- result sheet · rcp- receipt
             dep- deposit account · wdw- withdraw form · bnk- bank picker
   =========================================================================== */

/* ---- res: result sheet (processing / success / failed / review) -------- */
.res{position:fixed;inset:0;z-index:95;display:flex;align-items:flex-end;justify-content:center;padding:14px;
     background:rgba(10,8,18,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:resFade .25s ease both}
.res-sheet{position:relative;width:100%;max-width:440px;background:var(--card);border-radius:28px;padding:30px 22px 20px;text-align:center;
           box-shadow:var(--shadow-lg);animation:resUp .5s cubic-bezier(.2,.9,.25,1) both}
@media (min-width:600px){.res{align-items:center}}
@keyframes resFade{from{opacity:0}to{opacity:1}}
@keyframes resUp{from{opacity:0;transform:translateY(40px) scale(.98)}to{opacity:1;transform:none}}
.res-x{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:12px;display:grid;place-items:center;color:var(--text-3);font-size:18px}
.res-x:hover{background:var(--bg-input)}
.res-anim{position:relative;width:124px;height:124px;margin:0 auto 18px;display:grid;place-items:center}
.res-core{position:relative;z-index:2;width:76px;height:76px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:36px}
.res-core .ic{--ic-tint:#fff;--ic-tint-o:.7}
.res-title{font-size:21px;font-weight:900;letter-spacing:-.01em}
.res-text{font-size:13.5px;color:var(--text-2);margin:6px auto 0;max-width:320px;line-height:1.55}
.res-amt{font-size:30px;font-weight:900;letter-spacing:-.02em;margin-top:10px;font-variant-numeric:tabular-nums}
.res-box{display:flex;gap:10px;align-items:flex-start;text-align:left;border-radius:16px;padding:13px;margin-top:16px;font-size:12.5px;font-weight:700;line-height:1.5}
.res-box .ic{font-size:20px;flex-shrink:0;margin-top:1px}
.res-box b{display:block;font-size:13px;font-weight:900}
.res-act{display:grid;gap:8px;margin-top:18px}

.res-processing .res-core{background:radial-gradient(circle at 32% 26%,#C4B5FD,#7C3AED 55%,#4C1D95);box-shadow:0 10px 28px -6px rgba(124,58,237,.7);
                          animation:resPulse 2.2s ease-in-out infinite}
.res-ring{position:absolute;inset:0;border-radius:50%;border:3px solid var(--primary-bg2);border-top-color:var(--primary);animation:resSpin 1.3s linear infinite}
.res-ring.is-two{inset:11px;border-width:2px;border-color:transparent;border-bottom-color:var(--gold);animation-duration:2s;animation-direction:reverse}
.res-processing .res-box{background:var(--primary-bg);color:var(--text-2)}
.res-processing .res-box .ic{color:var(--primary)}
.res-dots::after{content:"";display:inline-block;width:1.2em;text-align:left;animation:resDots 1.4s steps(4,end) infinite}
@keyframes resDots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
@keyframes resSpin{to{transform:rotate(360deg)}}
@keyframes resPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}

.res-success .res-core{background:radial-gradient(circle at 32% 26%,#86EFAC,#16A34A 55%,#14532D);box-shadow:0 12px 30px -6px rgba(22,163,74,.7);
                       animation:resPop .6s cubic-bezier(.2,1.6,.35,1) both}
.res-burst{position:absolute;inset:6px;border-radius:50%;border:2px solid #22C55E;opacity:0;animation:resBurst 1.8s ease-out .2s infinite}
.res-burst.is-two{animation-delay:.75s}
.res-spark{position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px;border-radius:2px;background:var(--gold);opacity:0;
           transform:rotate(var(--a)) translateY(-30px);animation:resSpark 1.5s cubic-bezier(.2,.8,.3,1) .25s both}
.res-spark:nth-child(even){background:#A78BFA;border-radius:50%}
.res-success .res-box{background:var(--green-bg);color:var(--text-2)}
.res-success .res-box .ic{color:var(--green)}
@keyframes resPop{0%{transform:scale(.2) rotate(-30deg);opacity:0}60%{transform:scale(1.14) rotate(6deg)}100%{transform:none;opacity:1}}
@keyframes resBurst{0%{transform:scale(.7);opacity:.8}100%{transform:scale(1.35);opacity:0}}
@keyframes resSpark{0%{opacity:0;transform:rotate(var(--a)) translateY(-26px) scale(.4)}30%{opacity:1}100%{opacity:0;transform:rotate(var(--a)) translateY(-66px) scale(1)}}

.res-failed .res-core{background:radial-gradient(circle at 32% 26%,#FCA5A5,#DC2626 55%,#7F1D1D);box-shadow:0 12px 30px -6px rgba(220,38,38,.6);
                      animation:resPop .5s cubic-bezier(.2,1.6,.35,1) both,resShake .5s ease .55s both}
.res-failed .res-box{background:var(--red-bg);color:var(--text-2)}
.res-failed .res-box .ic{color:var(--red)}
@keyframes resShake{0%,100%{transform:none}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}

.res-review .res-core{background:radial-gradient(circle at 32% 26%,#FDE68A,#F59E0B 55%,#92400E);box-shadow:0 12px 30px -6px rgba(245,158,11,.6);
                      animation:resPop .5s cubic-bezier(.2,1.6,.35,1) both}
.res-review .res-box{background:var(--amber-bg);color:var(--text-2)}
.res-review .res-box .ic{color:var(--amber)}
.res-warn-shake .res-core{animation:resPop .5s cubic-bezier(.2,1.6,.35,1) both,resWarn 2.4s ease-in-out 1s infinite}
@keyframes resWarn{0%,86%,100%{transform:rotate(0)}90%{transform:rotate(-8deg)}95%{transform:rotate(8deg)}}

/* ---- rcp: receipt --------------------------------------------------------
   A ticket: status header, cut line with punched notches, detail rows and a
   signed footer. Prints cleanly (Save as PDF). */
.rcp{position:relative;background:var(--card);border:1px solid var(--card-border);border-radius:26px;box-shadow:var(--shadow-lg);margin-top:6px}
.rcp-head{position:relative;overflow:hidden;padding:26px 20px 20px;text-align:center;border-radius:26px 26px 0 0;
          background:radial-gradient(90% 80% at 50% 0%,var(--rcp-tint,var(--primary-bg)) 0%,transparent 72%)}
.rcp-badge{width:62px;height:62px;border-radius:50%;margin:0 auto 12px;display:grid;place-items:center;color:#fff;font-size:30px;
           background:var(--rcp-c,var(--primary));box-shadow:0 0 0 7px var(--rcp-ring,var(--primary-bg2))}
.rcp-badge .ic{--ic-tint:#fff;--ic-tint-o:.7}
.rcp-st{font-size:13px;font-weight:900;color:var(--rcp-c,var(--primary))}
.rcp-amt{font-size:34px;font-weight:900;letter-spacing:-.025em;margin-top:4px;font-variant-numeric:tabular-nums}
.rcp-what{font-size:13px;color:var(--text-2);font-weight:700;margin-top:2px}
.rcp-ok{--rcp-c:var(--green);--rcp-tint:var(--green-bg);--rcp-ring:var(--green-bg)}
.rcp-wait{--rcp-c:var(--amber);--rcp-tint:var(--amber-bg);--rcp-ring:var(--amber-bg)}
.rcp-bad{--rcp-c:var(--red);--rcp-tint:var(--red-bg);--rcp-ring:var(--red-bg)}
.rcp-cut{position:relative;height:24px}
.rcp-cut::before{content:"";position:absolute;left:18px;right:18px;top:50%;border-top:2px dashed var(--card-border)}
.rcp-cut i{position:absolute;top:0;width:24px;height:24px;border-radius:50%;background:var(--bg);border:1px solid var(--card-border)}
.rcp-cut i:first-child{left:-13px;clip-path:inset(0 0 0 50%)}
.rcp-cut i:last-child{right:-13px;clip-path:inset(0 50% 0 0)}
.rcp-rows{padding:4px 20px 6px}
.rcp-r{display:flex;justify-content:space-between;gap:14px;padding:9px 0;font-size:13px;border-bottom:1px solid var(--border)}
.rcp-r:last-child{border-bottom:0}
.rcp-r span{color:var(--text-3);font-weight:700;flex-shrink:0}
.rcp-r b{font-weight:900;text-align:right;overflow-wrap:anywhere}
.rcp-r b.mono{font-size:12px;letter-spacing:.02em}
.rcp-note{margin:4px 20px 0;padding:12px;border-radius:14px;background:var(--surface);font-size:12.5px;font-weight:700;color:var(--text-2);line-height:1.5}
.rcp-foot{display:flex;align-items:center;gap:10px;padding:16px 20px 20px;margin-top:8px;border-top:1px solid var(--border)}
.rcp-foot img{width:30px;height:30px;border-radius:9px}
.rcp-foot b{display:block;font-size:13px;font-weight:900}
.rcp-foot span{display:block;font-size:11px;color:var(--text-3);font-weight:700}
.rcp-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
@media print{
  .tb,.dock,.ra-drawer,.ra-scrim,.pre,.imp,.rcp-actions,.res,.alr{display:none !important}
  body.is-app{padding:0;max-width:none}
  .desk-main{margin:0 !important}
  .rcp{box-shadow:none;border:1px solid #ddd}
}

/* ---- dep: deposit account card ------------------------------------------ */
.dep-card{position:relative;overflow:hidden;border-radius:26px;padding:20px;color:#fff;isolation:isolate;
          background:radial-gradient(120% 120% at 100% 0%,#4C1D95 0%,#1E1236 55%,#0E0A1A 100%);box-shadow:0 18px 40px -16px rgba(46,16,101,.8)}
.dep-card::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(118deg,rgba(255,255,255,.14),transparent 36%)}
.dep-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.dep-bank{font-size:13px;font-weight:900;opacity:.92}
.dep-timer{position:relative;width:52px;height:52px;flex-shrink:0}
.dep-timer svg{width:100%;height:100%;transform:rotate(-90deg)}
.dep-timer circle{fill:none;stroke-width:4}
.dep-timer .bg{stroke:rgba(255,255,255,.16)}
.dep-timer .fg{stroke:#C4B5FD;stroke-linecap:round;transition:stroke-dashoffset 1s linear,stroke .3s}
.dep-timer.is-low .fg{stroke:#FCA5A5}
.dep-timer b{position:absolute;inset:0;display:grid;place-items:center;font-size:11.5px;font-weight:900;font-variant-numeric:tabular-nums}
.dep-l{font-size:11.5px;font-weight:800;opacity:.7;margin-top:16px}
.dep-num{display:flex;align-items:center;gap:10px;margin-top:2px}
.dep-num b{font-size:30px;font-weight:900;letter-spacing:.06em;font-variant-numeric:tabular-nums}
.dep-copy{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border-radius:11px;background:rgba(255,255,255,.14);font-size:12px;font-weight:900;color:#fff}
.dep-copy:hover{background:rgba(255,255,255,.24)}
.dep-name{font-size:13px;font-weight:800;opacity:.9;margin-top:2px}
.dep-amt{display:flex;justify-content:space-between;align-items:center;margin-top:16px;padding-top:14px;border-top:1px dashed rgba(255,255,255,.22)}
.dep-amt span{font-size:12px;font-weight:800;opacity:.75}
.dep-amt b{font-size:20px;font-weight:900}
.dep-wait{display:flex;align-items:center;gap:12px;margin-top:14px;padding:14px;border-radius:16px;background:var(--primary-bg);border:1px solid var(--primary-border)}
.dep-pulse{position:relative;width:14px;height:14px;flex-shrink:0;border-radius:50%;background:var(--primary)}
.dep-pulse::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--primary);animation:depPulse 1.6s ease-out infinite}
@keyframes depPulse{from{transform:scale(.5);opacity:.9}to{transform:scale(1.4);opacity:0}}
.dep-wait b{display:block;font-size:13.5px;font-weight:900}
.dep-wait span{display:block;font-size:12px;color:var(--text-3);font-weight:700}
.dep-steps{counter-reset:d;list-style:none;margin:14px 0 0}
.dep-steps li{counter-increment:d;display:flex;gap:10px;align-items:flex-start;font-size:12.5px;font-weight:700;color:var(--text-2);padding:5px 0}
.dep-steps li::before{content:counter(d);width:22px;height:22px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;font-size:11px;font-weight:900;
                      background:var(--primary-bg2);color:var(--primary)}
.amt-big{position:relative}
.amt-big .frm-input{height:64px;font-size:28px;font-weight:900;text-align:center;padding:0 44px;letter-spacing:-.01em}
.amt-big i{position:absolute;left:18px;top:50%;transform:translateY(-50%);font-style:normal;font-size:22px;font-weight:900;color:var(--text-3)}

/* ---- wdw: withdraw form -------------------------------------------------- */
.wdw-pick{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.wdw-pick input{position:absolute;opacity:0;pointer-events:none}
.wdw-o{position:relative;display:block;padding:14px;border-radius:18px;border:1.5px solid var(--card-border);background:var(--card);cursor:pointer;
       transition:border-color .2s,box-shadow .2s,transform .1s;overflow:hidden}
.wdw-o:active{transform:scale(.98)}
.wdw-o .ic{font-size:22px}
.wdw-o-l{display:block;font-size:12px;font-weight:800;color:var(--text-3);margin-top:8px}
.wdw-o-v{display:block;font-size:19px;font-weight:900;margin-top:1px;font-variant-numeric:tabular-nums}
.wdw-o-m{display:block;font-size:11px;font-weight:800;color:var(--text-3);margin-top:4px}
.wdw-o-h{display:inline-flex;align-items:center;gap:4px;margin-top:6px;padding:2px 7px;border-radius:99px;font-size:10.5px;font-weight:800;color:var(--amber);background:var(--amber-bg)}
.wdw-o-h .ic{width:12px;height:12px}
.wdw-tick{position:absolute;top:10px;right:10px;width:22px;height:22px;border-radius:50%;border:2px solid var(--card-border);display:grid;place-items:center;font-size:15px}
.wdw-o .wdw-tick .ic{color:transparent;--ic-tint:transparent}
.wdw-earn .ic{color:#0F766E}
.wdw-aff .ic{color:#C2410C}
[data-theme="dark"] .wdw-earn .ic{color:#5EEAD4}
[data-theme="dark"] .wdw-aff .ic{color:#FDBA74}
.wdw-pick input:checked + .wdw-earn{border-color:#14B8A6;box-shadow:0 0 0 4px rgba(20,184,166,.14)}
.wdw-pick input:checked + .wdw-aff{border-color:#F59E0B;box-shadow:0 0 0 4px rgba(245,158,11,.16)}
.wdw-pick input:checked + .wdw-o .wdw-tick{border-color:transparent;background:var(--green)}
.wdw-pick input:checked + .wdw-o .wdw-tick .ic{color:#fff;--ic-tint:#fff}
.wdw-pick input:focus-visible + .wdw-o{outline:2px solid var(--primary);outline-offset:2px}
.wdw-chips{display:flex;gap:8px;justify-content:center;margin:10px 0 16px}
.wdw-sum .sum-r.is-total{border-top:1px dashed var(--card-border);margin-top:6px;padding-top:9px}
.wdw-sum .sum-r.is-total b{font-size:16px;color:var(--green)}

/* ---- bnk: bank card, picker and name check ------------------------------- */
.bnk-card{display:flex;align-items:center;gap:12px;padding:14px;border-radius:18px;background:var(--surface);border:1px solid var(--card-border)}
.bnk-av{width:44px;height:44px;border-radius:14px;flex-shrink:0;display:grid;place-items:center;font-weight:900;font-size:14px;color:#fff;
        background:linear-gradient(135deg,#7C3AED,#4C1D95)}
.bnk-m{flex:1;min-width:0}
.bnk-m > span{display:block}
.bnk-n{font-weight:900;font-size:14px;overflow-wrap:anywhere}
.bnk-s{font-size:12px;color:var(--text-3);font-weight:700;margin-top:1px}
.bnk-m > .bnk-ok,.bnk-ok{display:flex;align-items:center;gap:4px;font-size:11px;font-weight:900;color:var(--green);margin-top:3px}
.bnk-trigger{display:flex;align-items:center;justify-content:space-between;width:100%;height:48px;padding:0 14px;border-radius:12px;background:var(--bg-input);
             font-weight:800;font-size:14.5px;text-align:left;border:1.5px solid transparent}
.bnk-trigger:focus-visible{border-color:var(--primary)}
.bnk-trigger .muted{font-weight:700}
.bnk-sheet{position:fixed;inset:0;z-index:96;display:flex;align-items:flex-end;justify-content:center;background:rgba(10,8,18,.55);animation:resFade .2s both}
.bnk-panel{width:100%;max-width:480px;height:min(78vh,640px);display:flex;flex-direction:column;background:var(--card);border-radius:24px 24px 0 0;
           padding:16px 16px 0;animation:resUp .35s cubic-bezier(.2,.9,.25,1) both}
.bnk-panel .frm-input{margin:10px 0 8px}
.bnk-list{flex:1;overflow-y:auto;margin:0 -16px;padding:0 8px 20px}
.bnk-item{display:flex;align-items:center;gap:12px;width:100%;padding:10px 8px;border-radius:12px;text-align:left;font-weight:800;font-size:14px}
.bnk-item:hover,.bnk-item:focus-visible{background:var(--surface)}
.bnk-item .bnk-av{width:34px;height:34px;border-radius:10px;font-size:11.5px}
.bnk-verify{display:flex;align-items:center;gap:10px;min-height:48px;padding:10px 14px;border-radius:12px;margin-bottom:14px;font-size:13px;font-weight:800}
.bnk-verify.is-wait{background:var(--bg-input);color:var(--text-3)}
.bnk-verify.is-ok{background:var(--green-bg);color:var(--green)}
.bnk-verify.is-bad{background:var(--red-bg);color:var(--red)}
.bnk-spin{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:resSpin .8s linear infinite;flex-shrink:0}

/* ---- history rows shared by withdrawals and deposits --------------------- */
.hist .lst-ic.is-ok{background:var(--green-bg);color:var(--green)}
.hist .lst-ic.is-wait{background:var(--amber-bg);color:var(--amber)}
.hist .lst-ic.is-bad{background:var(--red-bg);color:var(--red)}


@media (prefers-reduced-motion: reduce){
  .res-ring,.res-burst,.res-spark,.dep-pulse::after{animation:none !important}
  .res-spark{opacity:0}
}

/* ===========================================================================
   earn.css  -  Rewards hub, tasks and sponsored posts.
   Families: rwd- rewards hub · tk- task rows · spo- sponsored post · gd- guide
   =========================================================================== */

/* ---- rwd: Rewards hub ----------------------------------------------------- */
.rwd-wallets{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:6px}
.rwd-w{position:relative;overflow:hidden;border-radius:20px;padding:14px;color:#fff;isolation:isolate;min-height:128px;display:flex;flex-direction:column}
.rwd-w::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(118deg,rgba(255,255,255,.18),transparent 40%)}
.rwd-w.is-earn{background:radial-gradient(130% 120% at 100% 0%,#5EEAD4 0%,#14B8A6 26%,#0F766E 60%,#062F2C 100%)}
.rwd-w.is-aff{background:radial-gradient(130% 120% at 100% 0%,#FDE68A 0%,#F59E0B 24%,#C2410C 58%,#4A1504 100%)}
.rwd-w .ic{font-size:20px;--ic-tint:#fff;--ic-tint-o:.6}
.rwd-l{font-size:11.5px;font-weight:800;opacity:.85;margin-top:8px}
.rwd-v{font-size:20px;font-weight:900;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.rwd-go{margin-top:auto;padding-top:10px;font-size:11.5px;font-weight:900;display:inline-flex;align-items:center;gap:4px;opacity:.95}
.rwd-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rwd-t{position:relative;display:flex;flex-direction:column;gap:10px;padding:15px;border-radius:20px;background:var(--card);border:1px solid var(--card-border);
       transition:border-color .2s,transform .12s}
.rwd-t:hover{border-color:var(--primary-border)}
.rwd-t:active{transform:scale(.98)}
.rwd-t .qa-ic{width:44px;height:44px;border-radius:14px;font-size:22px}
.rwd-tt{font-weight:900;font-size:14.5px}
.rwd-ts{font-size:11.5px;color:var(--text-3);font-weight:700;margin-top:1px}
.rwd-badge{position:absolute;top:12px;right:12px;min-width:22px;height:22px;padding:0 7px;border-radius:99px;display:grid;place-items:center;
           background:var(--primary);color:var(--on-primary);font-size:11px;font-weight:900}
.rwd-badge.is-hot{background:var(--gold);color:#3D2B00;animation:tkGlow 1.8s ease-in-out infinite}

/* ---- gd: first-time guide ------------------------------------------------- */
.gd{position:relative;background:var(--primary-bg);border:1.5px solid var(--primary-border);border-radius:20px;padding:16px;margin-bottom:14px}
.gd-x{position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;color:var(--text-3)}
.gd-x:hover{background:var(--card)}
.gd-h{display:flex;gap:11px;align-items:flex-start;margin-bottom:12px;padding-right:30px}
.gd-h .gd-ic{width:38px;height:38px;border-radius:12px;flex-shrink:0;display:grid;place-items:center;background:var(--primary);color:var(--on-primary);font-size:21px;margin:0}
.gd-ic .ic{--ic-tint:currentColor;--ic-tint-o:.7}
.gd-h b{display:block;font-size:14px;font-weight:900;color:var(--text)}
.gd-h > span:last-child > span{display:block;font-size:12px;color:var(--text-3);font-weight:700;margin-top:2px}
.gd-steps{list-style:none;display:grid;gap:9px;counter-reset:g}
.gd-steps li{counter-increment:g;display:flex;gap:11px;align-items:flex-start;font-size:12px;color:var(--text-3);font-weight:600;line-height:1.5}
.gd-steps li::before{content:counter(g);width:24px;height:24px;flex-shrink:0;border-radius:50%;display:grid;place-items:center;
                     background:var(--card);border:1.5px solid var(--primary);color:var(--primary);font-size:11.5px;font-weight:900}
.gd-steps b{display:block;font-size:13px;font-weight:900;color:var(--text)}

/* ---- tk: task rows ---------------------------------------------------------
   The action button keeps the same box in every state (start, waiting,
   claim, done), so nothing on the row jumps as it changes. */
.tk{background:var(--card);border:1px solid var(--card-border);border-radius:18px;padding:13px;margin-bottom:10px;transition:border-color .2s,box-shadow .2s}
.tk.is-open{border-color:var(--primary-border);box-shadow:0 0 0 4px var(--primary-bg)}
.tk.is-done{opacity:.86}
.tk-row{display:flex;align-items:center;gap:12px}
.tk-plat{width:46px;height:46px;border-radius:15px;flex-shrink:0;display:grid;place-items:center;font-size:23px;background:var(--primary-bg);color:var(--primary)}
.tk-plat.is-telegram{background:var(--tg-bg);color:var(--tg)}
.tk-plat.is-social{background:#FFF1E6;color:#C2410C}
.tk-plat.is-website{background:#E6FFFA;color:#0F766E}
.tk-plat.is-app{background:var(--gold-bg);color:var(--gold-dark)}
[data-theme="dark"] .tk-plat.is-social{background:#2A1609;color:#FDBA74}
[data-theme="dark"] .tk-plat.is-website{background:#082522;color:#5EEAD4}
.tk-head{flex:1;min-width:0}
.tk-t{font-size:14px;font-weight:900;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk-sub{font-size:11.5px;color:var(--text-3);font-weight:700;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk-tags{display:flex;align-items:center;gap:6px;margin-top:6px;flex-wrap:wrap}
.tk-pay{background:var(--green-bg);color:var(--green);font-size:11.5px;font-weight:900;padding:3px 9px;border-radius:99px}
.tk-meta{font-size:11px;color:var(--text-3);font-weight:800}
.tk-act{flex-shrink:0;width:92px;height:42px;border-radius:13px;display:flex;align-items:center;justify-content:center;gap:6px;
        font-size:13px;font-weight:900;white-space:nowrap;background:var(--primary);color:var(--on-primary);transition:background .15s,transform .1s}
.tk-act:active{transform:scale(.95)}
.tk-act .ic{font-size:16px;--ic-tint:currentColor}
.tk-act.is-wait{background:var(--bg-input);color:var(--text-2);border:1px solid var(--card-border);cursor:default;font-variant-numeric:tabular-nums}
.tk-act.is-claim{background:var(--gold);color:#3D2B00;animation:tkGlow 1.8s ease-in-out infinite}
.tk-act.is-review{background:var(--amber-bg);color:var(--amber);font-size:12px}
.tk-act.is-paid{background:var(--green-bg);color:var(--green);font-size:12px}
.tk-act.is-off{background:var(--red-bg);color:var(--red);font-size:12px}
@keyframes tkGlow{0%,100%{box-shadow:0 0 0 0 rgba(250,204,21,.55)}50%{box-shadow:0 0 0 7px rgba(250,204,21,0)}}
.tk-ring{width:16px;height:16px;transform:rotate(-90deg)}
.tk-ring circle{fill:none;stroke-width:3}
.tk-ring .bg{stroke:var(--border)}
.tk-ring .fg{stroke:var(--primary);stroke-linecap:round;stroke-dasharray:50.3;transition:stroke-dashoffset .9s linear}
.tk-extra{margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
.tk-steps{font-size:12.5px;color:var(--text-2);line-height:1.7;background:var(--surface);border:1px solid var(--card-border);border-radius:12px;padding:10px 12px;white-space:pre-line;margin-bottom:12px}
.tk-review{display:flex;align-items:center;gap:11px;background:var(--card);border:1.5px solid var(--green);border-radius:16px;padding:12px;margin-bottom:12px;
           animation:tkIn .5s cubic-bezier(.2,.9,.25,1) both}
.tk-review-ic{width:38px;height:38px;border-radius:12px;flex-shrink:0;display:grid;place-items:center;background:var(--green);color:#fff;font-size:20px;animation:tkPulse 2.4s ease-in-out infinite}
.tk-review-ic .ic{--ic-tint:#fff}
.tk-review b{display:block;font-size:13.5px;font-weight:900}
.tk-review span{display:block;font-size:11.5px;color:var(--text-3);font-weight:700;margin-top:1px}
.tk-review-amt{margin-left:auto;font-weight:900;font-size:16px;color:var(--green);flex-shrink:0}
@keyframes tkIn{from{opacity:0;transform:translateY(-8px) scale(.97)}to{opacity:1;transform:none}}
@keyframes tkPulse{0%,100%{box-shadow:0 0 0 0 rgba(22,163,74,.45)}50%{box-shadow:0 0 0 8px rgba(22,163,74,0)}}
.tk-group{font-size:12px;font-weight:900;color:var(--text-3);margin:18px 2px 8px}

/* ---- spo: sponsored post -------------------------------------------------- */
.spo{background:var(--card);border:1px solid var(--card-border);border-radius:22px;overflow:hidden;margin-bottom:14px}
.spo-media{position:relative;background:var(--bg-input)}
.spo-media img{width:100%;max-height:340px;object-fit:cover}
.spo-save{position:absolute;right:10px;bottom:10px;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 13px;border-radius:99px;
          background:rgba(14,10,24,.72);color:#fff;font-size:12px;font-weight:900;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.spo-save .ic{--ic-tint:#fff}
.spo-body{padding:16px}
.spo-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.spo-pay{background:var(--primary);color:var(--on-primary);font-weight:900;font-size:14px;padding:6px 14px;border-radius:99px}
.spo-time{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:800;color:var(--text-3)}
.spo-title{font-size:16px;font-weight:900}
.spo-cap{font-size:12.5px;color:var(--text-2);line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere;margin-top:6px;background:var(--surface);
         border-radius:12px;padding:10px 12px;border:1px dashed var(--card-border)}
.spo-copy{margin-top:8px}
.spo-steps{display:grid;gap:8px;margin-top:14px}
.spo-step{display:flex;align-items:center;gap:12px;padding:12px;border-radius:16px;border:1px solid var(--card-border)}
.spo-step.is-now{border-color:var(--primary);background:var(--primary-bg)}
.spo-step.is-done{opacity:.7}
.spo-n{width:30px;height:30px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;font-weight:900;font-size:13px;background:var(--bg-input);color:var(--text-2)}
.spo-step.is-now .spo-n{background:var(--primary);color:var(--on-primary)}
.spo-step.is-done .spo-n{background:var(--green);color:#fff}
.spo-step-m{flex:1;min-width:0}
.spo-step-m b{display:block;font-size:13.5px;font-weight:900}
.spo-step-m span{display:block;font-size:11.5px;color:var(--text-3);font-weight:700;margin-top:1px}
.spo-proof{margin-top:12px}
.spo-count{font-variant-numeric:tabular-nums}

/* ===========================================================================
   DASHBOARD  -  build spec section 2, blocks in document order.
   =========================================================================== */

/* ---- page: light grey behind the dashboard, so its white cards stand out.
   The wallet card's cut-out corner is painted in this same colour. ---- */
:root{--dash-bg:#F4F3F8}
[data-theme="dark"]{--dash-bg:var(--bg)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--dash-bg:var(--bg)}}
html:has(body.pg-dashboard),body.pg-dashboard,html:has(body.pg-referrals),body.pg-referrals{background:var(--dash-bg)}
.pg-dashboard .section,.pg-referrals .section{margin-top:22px}
.pg-dashboard .section:first-of-type,.pg-referrals .section:first-of-type{margin-top:6px}
.pg-dashboard .wdeck-hint{margin-top:8px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- .onb setup card: bank -> PIN -> plan, a numbered timeline. Sits at the
   top until every step is done, then the dashboard leaves it out. ---- */
.onb{padding:16px;border-radius:24px;background:var(--card);border:1px solid var(--card-border);box-shadow:0 10px 26px -22px rgba(17,13,24,.4)}
.onb-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.onb-t{font-size:16px;font-weight:900}
.onb-n{font-size:12px;font-weight:800;color:var(--text-2);white-space:nowrap}
.onb-note{display:flex;align-items:center;gap:5px;margin-top:3px;font-size:11.5px;font-weight:700;color:var(--text-2)}
.onb-note .ic{font-size:13px}
.onb-list{list-style:none;margin-top:14px}
.onb-step{position:relative;display:flex;gap:12px;padding-bottom:14px}
.onb-step:last-child{padding-bottom:0}
.onb-step:not(:last-child)::before{content:"";position:absolute;left:14px;top:34px;bottom:4px;width:2px;border-radius:2px;background:var(--border)}
.onb-step.is-done:not(:last-child)::before{background:var(--green)}
.onb-node{width:30px;height:30px;flex-shrink:0;box-sizing:border-box;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:900;
          border:2px solid var(--card-border);color:var(--text-2);background:var(--card)}
.onb-node .ic{font-size:18px;--ic-tint:#fff;--ic-tint-o:0}
.is-cur .onb-node{background:var(--primary);border-color:var(--primary);color:var(--on-primary);box-shadow:0 0 0 4px var(--primary-bg)}
.is-done .onb-node{background:var(--green);border-color:var(--green);color:#fff}
.onb-body{flex:1;min-width:0;padding-top:4px}
.onb-st{font-size:14px;font-weight:900;line-height:1.25}
.is-done .onb-st{color:var(--text-2);text-decoration:line-through}
.onb-ss{margin-top:2px;font-size:12px;font-weight:700;color:var(--text-2)}
.onb-go{display:inline-flex;align-items:center;gap:4px;margin-top:9px;height:38px;padding:0 12px 0 16px;border-radius:12px;background:var(--primary);color:var(--on-primary);font-size:13px;font-weight:900}
.onb-go .ic{font-size:16px}
.onb-later{display:inline-block;margin-top:4px;font-size:12px;font-weight:900;color:var(--primary)}
.onb-bar{height:6px;margin-top:10px;border-radius:99px;background:var(--primary-bg);overflow:hidden}
.onb-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--primary),var(--accent));animation:onbFill 1s .3s cubic-bezier(.2,.8,.2,1) both}
/* Motion: the card slides in, steps follow one by one, the current step
   sends out ripples, a finished step's tick pops and its line draws down,
   and the button catches a light sweep every few seconds. */
.onb{animation:onbIn .5s cubic-bezier(.2,.8,.2,1) both}
.onb-step{animation:onbIn .45s cubic-bezier(.2,.8,.2,1) both}
.onb-step:nth-child(1){animation-delay:.12s}.onb-step:nth-child(2){animation-delay:.22s}.onb-step:nth-child(3){animation-delay:.32s}
.onb-node{position:relative;z-index:1}
.is-cur .onb-node::before,.is-cur .onb-node::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--primary);pointer-events:none;
  animation:onbRipple 2.4s cubic-bezier(.2,.6,.35,1) infinite}
.is-cur .onb-node::after{animation-delay:1.2s}
.is-done .onb-node .ic{animation:onbPop .55s .45s cubic-bezier(.3,1.6,.5,1) both}
.onb-step.is-done:not(:last-child)::before{transform-origin:50% 0;animation:onbLine .6s .5s ease-out both}
.onb-go{position:relative;overflow:hidden;isolation:isolate}
.onb-go::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.38) 50%,transparent 70%);
  transform:translateX(-120%);animation:onbShine 3.4s 1.2s ease-in-out infinite}
@keyframes onbIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes onbRipple{0%{transform:scale(1);opacity:.6}100%{transform:scale(2.4);opacity:0}}
@keyframes onbPop{0%{transform:scale(0)}100%{transform:scale(1)}}
@keyframes onbLine{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes onbFill{from{width:0}}
@keyframes onbShine{0%{transform:translateX(-120%)}45%,100%{transform:translateX(120%)}}
@media (prefers-reduced-motion: reduce){.onb,.onb *,.onb *::before,.onb *::after{animation:none!important}}

/* ---- .wdeck: four stacked wallet cards, swiped like a real deck ----------
   RetpicAfrica fans its cards out in a rotated pile. Plamora stacks them
   like a wallet: the front card is whole, the next ones peek out below it
   in their own colours, and a swipe throws the front card to the back.
   initWalletDeck() in app.js places them; without JS they still stack. */
.wdeck{position:relative}
.wdeck-stage{position:relative;height:204px;touch-action:pan-y;user-select:none;-webkit-user-select:none;outline:none}
.wallet-card3{position:absolute;left:0;right:0;top:0;height:164px;overflow:hidden;isolation:isolate;border-radius:26px;padding:16px 16px 14px;color:#fff;
              display:flex;flex-direction:column;transform-origin:50% 100%;will-change:transform;
              transition:transform .45s cubic-bezier(.2,.85,.25,1),opacity .35s,filter .35s}
.wallet-card3.is-drag{transition:none}
.wallet-card3::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;
                      background:linear-gradient(118deg,rgba(255,255,255,.2) 0%,rgba(255,255,255,0) 34%),
                                 radial-gradient(60% 50% at 100% 100%,rgba(255,255,255,.14),transparent 70%);
                      box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 0 0 1px rgba(255,255,255,.08)}
.wallet-card3 > :not(.bub){position:relative;z-index:1}
.wallet-card3{background:radial-gradient(130% 120% at 100% 0%,#6D28D9 0%,#3B0F8C 38%,#1A0B3A 72%,#0D0620 100%);box-shadow:0 18px 38px -14px rgba(46,16,101,.85)}
.wallet-card3.wc3-deposit{background:radial-gradient(130% 120% at 100% 0%,#A78BFA 0%,#7C3AED 30%,#5B21B6 60%,#2E1065 100%);box-shadow:0 18px 38px -14px rgba(91,33,182,.7)}
.wallet-card3.wc3-engage{background:radial-gradient(130% 120% at 100% 0%,#5EEAD4 0%,#14B8A6 24%,#0F766E 56%,#062F2C 100%);box-shadow:0 18px 38px -14px rgba(15,118,110,.7)}
.wallet-card3.wc3-sales{background:radial-gradient(130% 120% at 100% 0%,#FDE68A 0%,#F59E0B 22%,#C2410C 54%,#4A1504 100%);box-shadow:0 18px 38px -14px rgba(194,65,12,.7)}
.wc3-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.wc3-label{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:800;opacity:.9}
.wc3-label .ic{font-size:17px;--ic-tint:#fff;--ic-tint-o:.6}
.wc3-eye{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;color:#fff;font-size:16px;background:rgba(255,255,255,.12)}
/* Corner cut-out: the card's top-right corner is cut away (painted in the
   page colour, with curved edges) and the Withdraw / Add money button sits in it. */
.wallet-card3 > .wc3-notch{position:absolute;z-index:2;top:0;right:0;width:144px;height:56px;border-bottom-left-radius:22px;background:var(--dash-bg)}
.wallet-card3 > .wc3-fil{position:absolute;z-index:2;width:22px;height:22px;background:radial-gradient(circle at 0 100%,transparent 21.5px,var(--dash-bg) 22px)}
.wallet-card3 > .wc3-fil-a{top:0;right:144px}
.wallet-card3 > .wc3-fil-b{top:56px;right:0}
.wallet-card3 > .wc3-cta{position:absolute;z-index:3;top:0;right:0;width:134px;height:46px;box-sizing:border-box;border-radius:99px;padding:0 12px 0 7px;
  display:flex;align-items:center;gap:8px;background:#6D28D9;color:#fff;font-size:13.5px;font-weight:900;white-space:nowrap;
  box-shadow:0 8px 18px -10px rgba(76,29,149,.8);transition:transform .12s,background .15s}
.wallet-card3 > .wc3-cta:hover{background:#5B21B6}
.wallet-card3 > .wc3-cta:active{transform:scale(.96)}
.wc3-cta-ic{width:32px;height:32px;flex-shrink:0;border-radius:50%;display:grid;place-items:center;background:#fff;color:#6D28D9}
.wc3-cta-ic .ic{font-size:17px;--ic-tint:currentColor}
.wc3-top{padding-right:150px;min-height:30px}
/* Bottom row: balance on the left, the payout bank on the right. */
.wc3-foot{margin-top:auto;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:6px 10px}
.wc3-bank{flex:0 1 auto;min-width:96px;max-width:100%;margin-left:auto;display:flex;align-items:center;gap:7px;padding:6px 10px 6px 8px;border-radius:12px;
          background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.2);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:#fff}
.wc3-bank .ic{flex-shrink:0;font-size:18px;--ic-tint:#fff;--ic-tint-o:.55}
.wc3-bank span{min-width:0;display:flex;flex-direction:column;line-height:1.15}
.wc3-bank b{font-size:11.5px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wc3-bank i{font-style:normal;font-size:10.5px;font-weight:800;opacity:.8;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.wc3-bank.is-none{border-style:dashed;border-color:rgba(255,255,255,.45)}
.wc3-amount{flex:0 0 auto;font-size:30px;font-weight:900;letter-spacing:-.025em;line-height:1.05;white-space:nowrap;font-variant-numeric:tabular-nums;text-shadow:0 2px 16px rgba(0,0,0,.2)}
.wc3-sub{display:flex;align-items:center;gap:6px;margin-top:5px;font-size:11.5px;font-weight:800;opacity:.85;min-height:16px}
.wc3-sub .ic{font-size:14px;--ic-tint:#fff}
.wc3-sub a{text-decoration:underline;text-underline-offset:2px}
/* Quick actions: their own card under the deck, one set per wallet; the
   deck script shows the set for the card in front. */
.wqa{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:14px 6px 12px;border-radius:24px;background:var(--card);border:1px solid var(--card-border);
     box-shadow:0 10px 26px -22px rgba(17,13,24,.4)}
.wqa[hidden]{display:none}
.wqa-a{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:12.5px;font-weight:800;color:var(--text)}
.wqa-ic{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:var(--primary-bg);color:var(--primary);transition:transform .12s,background .15s}
.wqa-ic .ic{font-size:24px}
.wqa-a:hover .wqa-ic{background:var(--primary-bg2,var(--primary-border))}
.wqa-a:active .wqa-ic{transform:scale(.94)}
.wdeck-dots{display:flex;justify-content:center;gap:6px;margin-top:2px}
.wdeck-dot{width:7px;height:7px;border-radius:99px;background:var(--border);transition:width .3s,background .3s;cursor:pointer}
.wdeck-dot.on{width:22px;background:var(--wdeck-c,var(--primary))}
.wdeck-hint{text-align:center;font-size:11px;font-weight:800;color:var(--text-3);margin-top:6px;display:flex;align-items:center;justify-content:center;gap:5px}
.bal-hidden .mask-me,.bal-hidden [data-live]{filter:blur(9px);user-select:none}
.bal-hidden .wc3-eye .ic-show,.wc3-eye .ic-hide{display:none}
.bal-hidden .wc3-eye .ic-hide{display:inline-block}

/* ---- .overview: two stat tiles. Each has its icon sitting in a cut-out
   corner, the same shape as the wallet card's button. ---- */
.overview{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ov-t{position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:124px;padding:14px;border-radius:22px;background:var(--card);
      box-shadow:0 10px 26px -20px rgba(17,13,24,.45);transition:transform .15s}
.ov-t:active{transform:scale(.98)}
.ov-cut{position:absolute;top:0;right:0;width:60px;height:60px;border-bottom-left-radius:20px;background:var(--dash-bg)}
.ov-fil{position:absolute;width:20px;height:20px;background:radial-gradient(circle at 0 100%,transparent 19.5px,var(--dash-bg) 20px)}
.ov-fil-a{top:0;right:60px}
.ov-fil-b{top:60px;right:0}
.ov-ic{position:absolute;top:0;right:0;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:23px}
.ov-ic .ic{--ic-tint:#fff;--ic-tint-o:.55}
.ov-ic.is-out{background:linear-gradient(145deg,#8B5CF6,#5B21B6);box-shadow:0 8px 16px -8px rgba(91,33,182,.8)}
.ov-ic.is-task{background:linear-gradient(145deg,#2DD4BF,#0F766E);box-shadow:0 8px 16px -8px rgba(15,118,110,.8)}
.ov-l{padding-right:56px;font-size:12px;font-weight:800;color:var(--text-2)}
.ov-v{margin-top:auto;font-size:21px;font-weight:900;letter-spacing:-.01em;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ov-s{margin-top:2px;font-size:11.5px;font-weight:700;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---- .te-card: top earners ---- */
.te-card{padding:14px;border-radius:20px;background:linear-gradient(135deg,var(--gold-bg),var(--card) 60%);border:1px solid var(--gold-light)}
[data-theme="dark"] .te-card{border-color:#4A3A10}
.te-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.te-h b{display:flex;align-items:center;gap:7px;font-size:14.5px;font-weight:900}
.te-h b .ic{color:var(--gold-dark);font-size:19px}
.te-h a{font-size:12px;font-weight:900;color:var(--primary)}
.te-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.te-p{display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 6px;border-radius:14px;background:var(--card);border:1px solid var(--card-border);text-align:center;min-width:0}
.te-av{position:relative;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:13px;background:var(--primary-bg2);color:var(--primary)}
.te-p.is-1 .te-av{background:var(--gold);color:#3D2B00}
.te-rk{position:absolute;right:-4px;bottom:-4px;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:10px;font-weight:900;background:var(--text);color:var(--bg)}
.te-u{font-size:12px;font-weight:900;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.te-a{font-size:11.5px;font-weight:800;color:var(--green)}

/* ---- telegram card ---- */
.tg-card{display:flex;gap:12px;align-items:center;padding:14px;border-radius:20px;background:var(--tg-bg);border:1px solid var(--tg-border)}
.tg-ic{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--tg);color:#fff;font-size:21px;flex-shrink:0}
.tg-ic .ic{--ic-tint:#fff}
.tg-m{flex:1;min-width:0}
.tg-m b{display:block;font-size:14px;font-weight:900;color:var(--tg-text)}
.tg-m span{display:block;font-size:12px;font-weight:700;color:var(--tg-text);opacity:.8}
.tg-acts{display:flex;gap:6px;margin-top:10px}
.tg-acts .btn{height:34px;font-size:12px;padding:0 12px}

/* ---- .up-card: upgrade banner ---- */
.up-card{position:relative;overflow:hidden;display:flex;gap:12px;align-items:center;padding:15px;border-radius:20px;color:#3D2B00;
         background:linear-gradient(120deg,#FDE68A,#FACC15 45%,#F59E0B);box-shadow:0 14px 30px -16px rgba(245,158,11,.9)}
.up-card::after{content:"";position:absolute;right:-30px;top:-40px;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.55),transparent 70%)}
.up-ic{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:#3D2B00;color:#FDE68A;font-size:22px;flex-shrink:0;position:relative;z-index:1}
.up-ic .ic{--ic-tint:#FDE68A}
.up-m{flex:1;min-width:0;position:relative;z-index:1}
.up-m b{display:block;font-size:14.5px;font-weight:900}
.up-m span{display:block;font-size:12px;font-weight:700;opacity:.85}
.up-card > .ic{position:relative;z-index:1;font-size:20px}

/* ---- .ref-card: invite card. Faces of the last friends who joined, the
   best commission, and the invite code with Copy and Share. ---- */
.ref-card{position:relative;overflow:hidden;padding:16px;border-radius:24px;
  background:radial-gradient(120% 90% at 100% 0%,#FFE4D2 0%,rgba(255,228,210,0) 55%),radial-gradient(90% 90% at 0% 100%,#E9E0FF 0%,rgba(233,224,255,0) 60%),#FFF8F3;
  box-shadow:0 10px 26px -20px rgba(17,13,24,.45)}
[data-theme="dark"] .ref-card{background:radial-gradient(120% 90% at 100% 0%,#3A2117 0%,rgba(58,33,23,0) 55%),radial-gradient(90% 90% at 0% 100%,#251B3F 0%,rgba(37,27,63,0) 60%),#17141D}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .ref-card{background:radial-gradient(120% 90% at 100% 0%,#3A2117 0%,rgba(58,33,23,0) 55%),radial-gradient(90% 90% at 0% 100%,#251B3F 0%,rgba(37,27,63,0) 60%),#17141D}}
.rc2-top{display:flex;align-items:center;justify-content:space-between}
.rc2-faces{display:flex}
.rc2-face{width:40px;height:40px;margin-left:-10px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:900;color:#fff;
          border:3px solid #FFF8F3;background:#7C3AED}
[data-theme="dark"] .rc2-face{border-color:#17141D}
.rc2-face:first-child{margin-left:0}
.rc2-face:nth-child(2){background:#0F766E}
.rc2-face:nth-child(3){background:#C2410C}
.rc2-face.is-empty{background:transparent;color:var(--text-2);border-style:dashed;border-color:var(--card-border);border-width:2px;width:40px;height:40px;font-size:16px}
.rc2-more{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--card);color:var(--text);font-size:18px;box-shadow:0 4px 12px -6px rgba(17,13,24,.3)}
.rc2-t{margin-top:14px;font-size:18px;font-weight:900;letter-spacing:-.01em;line-height:1.2}
.rc2-s{margin-top:3px;font-size:12.5px;font-weight:700;color:var(--text-2)}
.rc2-code{display:flex;align-items:center;gap:8px;margin-top:14px;padding:6px;border-radius:16px;background:var(--card);box-shadow:0 4px 14px -10px rgba(17,13,24,.4)}
.rc2-code-v{flex:1;min-width:0;padding-left:8px;display:flex;flex-direction:column}
.rc2-code-v span{font-size:10.5px;font-weight:800;color:var(--text-2)}
.rc2-code-v b{font-family:ui-monospace,'JetBrains Mono',monospace;font-size:15px;font-weight:800;letter-spacing:.08em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc2-copy{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 14px;border-radius:12px;background:var(--text);color:var(--bg);font-size:12.5px;font-weight:900;white-space:nowrap}
.rc2-copy .ic{font-size:16px}
.rc2-share{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--primary-bg);color:var(--primary);font-size:18px}
.rc2-share[hidden]{display:none}
.copy-btn{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 13px;border-radius:11px;background:var(--primary);color:var(--on-primary);font-weight:900;font-size:12.5px;flex-shrink:0}
.copy-btn .ic{--ic-tint:currentColor}

/* ---- .rc: recent activity ---- */
.rc{background:var(--card);border:1px solid var(--card-border);border-radius:20px;overflow:hidden}
.rc-h{display:flex;align-items:center;justify-content:space-between;padding:14px 14px 4px}
.rc-h b{font-size:14.5px;font-weight:900}
.rc-h a{font-size:12px;font-weight:900;color:var(--primary)}
.rc-r{display:flex;align-items:center;gap:12px;padding:11px 14px;border-top:1px solid var(--border)}
.rc-h + .rc-r{border-top:0}
.rc-ic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:17px;flex-shrink:0;background:var(--primary-bg);color:var(--primary)}
.rc-ic.is-in{background:var(--green-bg);color:var(--green)}
.rc-m{flex:1;min-width:0}
.rc-t{font-weight:800;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc-s{font-size:11.5px;color:var(--text-3);font-weight:700;margin-top:1px}
.rc-v{font-weight:900;font-size:13.5px;white-space:nowrap;font-variant-numeric:tabular-nums}
.rc-v.is-in{color:var(--green)}

/* ---- .lb-list: people lists (top earners) ---- */
.lb-list{background:var(--card);border:1px solid var(--card-border);border-radius:20px;overflow:hidden}
.lb-row{display:flex;align-items:center;gap:12px;padding:11px 14px;border-top:1px solid var(--border)}
.lb-row:first-child{border-top:0}
.lb-row .lb-av{width:38px;height:38px;border:0;margin:0;border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:13px;background:var(--primary-bg2);color:var(--primary);flex-shrink:0}
.lb-m{flex:1;min-width:0}
.lb-n{font-weight:900;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-d{font-size:11.5px;color:var(--text-3);font-weight:700}
.status{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:99px;font-size:11px;font-weight:900;white-space:nowrap}
.status.completed{background:var(--green-bg);color:var(--green)}
.status.pending{background:var(--amber-bg);color:var(--amber)}
.status.rejected{background:var(--red-bg);color:var(--red)}
.card.empty{text-align:center;padding:30px 20px}
.card.empty > .ic{font-size:34px;color:var(--primary);opacity:.85}
.card.empty p{font-size:13px;font-weight:700;color:var(--text-2);margin-top:8px}

/* ===========================================================================
   BANK DETAILS (profile-bank.php)  -  build spec section 4
   =========================================================================== */
.alert{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:14px;font-size:13px;font-weight:800}
.alert.ok{background:var(--green-bg);color:var(--green)}
.alert.err{background:var(--red-bg);color:var(--red)}
.bankcard{position:relative;overflow:hidden;isolation:isolate;border-radius:24px;padding:18px;color:#fff;min-height:170px;display:flex;flex-direction:column;
          background:radial-gradient(130% 120% at 100% 0%,#6D28D9 0%,#3B0F8C 40%,#140A2C 100%);box-shadow:0 18px 38px -16px rgba(46,16,101,.85)}
.bankcard::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(118deg,rgba(255,255,255,.16),transparent 38%)}
.bc-top{display:flex;align-items:center;justify-content:space-between}
.bc-chip{width:42px;height:32px;border-radius:7px;background:linear-gradient(135deg,#FDE68A,#D4A017 55%,#FDE68A);position:relative;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.bc-chip::before,.bc-chip::after{content:"";position:absolute;left:8px;right:8px;top:50%;height:1px;background:rgba(61,43,0,.45)}
.bc-chip::after{top:0;bottom:0;left:50%;right:auto;width:1px;height:auto}
.bc-ok{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 10px;border-radius:99px;background:rgba(74,222,128,.18);color:#BBF7D0;font-size:11.5px;font-weight:900;border:1px solid rgba(74,222,128,.35)}
.bc-ok .ic{--ic-tint:#BBF7D0}
.bc-num{font-family:ui-monospace,'JetBrains Mono',monospace;font-size:22px;font-weight:700;letter-spacing:.14em;margin-top:auto;padding-top:20px}
.bc-name{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;margin-top:6px}
.bc-name b{font-size:14px;font-weight:900;text-transform:uppercase;letter-spacing:.02em;overflow-wrap:anywhere}
.bc-name span{font-size:12px;font-weight:800;opacity:.8;text-align:right}
.bank-form .frm-label{display:flex;align-items:center;gap:8px}
.bank-form .frm-label i{font-style:normal;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--primary-bg2);color:var(--primary);font-size:11px;font-weight:900}
.bank-select{display:flex;align-items:center;gap:10px;width:100%;height:52px;padding:0 14px;border-radius:14px;background:var(--bg-input);
             font-weight:800;font-size:14.5px;text-align:left;border:1.5px solid transparent}
.bank-select:focus-visible{border-color:var(--primary)}
.bank-select .bk-av{width:30px;height:30px;font-size:11px}
.bank-select #bankLabel{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bank-select #bankLabel.is-empty{color:var(--text-3);font-weight:700}
#acctNum{font-family:ui-monospace,'JetBrains Mono',monospace;font-size:19px;letter-spacing:.12em;height:52px}
.verify-box{display:flex;align-items:center;gap:10px;min-height:50px;padding:10px 14px;border-radius:14px;margin-bottom:14px;font-size:13px;font-weight:800;
            background:var(--bg-input);color:var(--text-3)}
.verify-box.loading{background:var(--primary-bg);color:var(--primary)}
.verify-box.ok{background:var(--green-bg);color:var(--green)}
.verify-box.bad{background:var(--red-bg);color:var(--red)}
.verify-box .vb-t{flex:1;min-width:0}
.verify-box.ok .vb-t{font-size:14.5px;font-weight:900;text-transform:uppercase}
.vb-retry{height:32px;padding:0 12px;border-radius:10px;background:var(--red);color:#fff;font-size:12px;font-weight:900;flex-shrink:0}
.vb-spin{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:resSpin .8s linear infinite;flex-shrink:0}
#saveBtn[disabled]{opacity:.45}

/* ---- bank picker: .modal-scrim + .modal (.open slides it up) ---- */
.modal-scrim{position:fixed;inset:0;z-index:90;background:rgba(10,8,18,.55);opacity:0;pointer-events:none;transition:opacity .25s}
.modal-scrim.open{opacity:1;pointer-events:auto}
.modal{position:fixed;left:50%;bottom:0;z-index:91;width:100%;max-width:480px;height:min(82vh,660px);display:flex;flex-direction:column;
       background:var(--card);border-radius:26px 26px 0 0;padding:10px 16px 0;transform:translate(-50%,104%);transition:transform .35s cubic-bezier(.2,.9,.25,1);
       box-shadow:0 -20px 50px -20px rgba(0,0,0,.4);visibility:hidden}
.modal.open{transform:translate(-50%,0);visibility:visible}
.modal-grab{width:42px;height:5px;border-radius:99px;background:var(--border);margin:0 auto 12px}
.modal-t{font-size:17px;font-weight:900}
.modal .frm-input{margin:12px 0 4px}
.bank-list{flex:1;overflow-y:auto;margin:0 -16px;padding:0 10px calc(20px + env(safe-area-inset-bottom));overscroll-behavior:contain}
.bank-grp{font-size:11.5px;font-weight:900;color:var(--text-3);padding:12px 8px 6px}
.bank-item{display:flex;align-items:center;gap:12px;width:100%;padding:9px 8px;border-radius:12px;text-align:left;font-weight:800;font-size:14px;border:1.5px solid transparent}
.bank-item:hover,.bank-item:focus-visible{background:var(--surface)}
.bank-item.on{border-color:var(--green);background:var(--green-bg)}
.bank-item .bk-check{margin-left:auto;color:var(--green);font-size:18px;opacity:0}
.bank-item.on .bk-check{opacity:1}
.bk-av{width:36px;height:36px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;font-weight:900;font-size:11.5px;color:#fff;background:linear-gradient(135deg,#7C3AED,#4C1D95)}
.bank-empty{text-align:center;padding:28px 10px;color:var(--text-3);font-weight:800;font-size:13px}

/* ---- PIN boxes: one real input drawn as four boxes ---- */
.pin{position:relative;width:224px;margin:4px auto 0}
.pin-in{width:100%;height:58px;border:0;outline:none;background:transparent;color:transparent;caret-color:transparent;font-size:1px;position:relative;z-index:2}
.pin-boxes{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;pointer-events:none}
.pin-boxes i{display:grid;place-items:center;border-radius:15px;background:var(--bg-input);border:1.5px solid var(--card-border);font-style:normal;font-size:26px;font-weight:900}
.pin-boxes i.is-on{border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-bg)}
.pin-boxes i.is-full::after{content:"";width:13px;height:13px;border-radius:50%;background:var(--text)}
.pin-note{text-align:center;font-size:12px;color:var(--text-3);font-weight:700;margin-top:8px}

/* ---- notifications ---- */
.ntf{display:flex;gap:12px;padding:13px 14px;border-top:1px solid var(--border)}
.ntf:first-child{border-top:0}
.ntf.is-new{background:var(--primary-bg)}
.ntf-ic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:18px;flex-shrink:0;background:var(--bg-input);color:var(--text-2)}
.ntf-ic.is-ok{background:var(--green-bg);color:var(--green)}
.ntf-ic.is-bad{background:var(--red-bg);color:var(--red)}
.ntf-ic.is-money{background:var(--primary-bg2);color:var(--primary)}
.ntf-m{flex:1;min-width:0}
.ntf-t{font-weight:900;font-size:13.5px}
.ntf-b{font-size:12.5px;color:var(--text-2);font-weight:700;margin-top:1px}
.ntf-s{font-size:11px;color:var(--text-3);font-weight:800;margin-top:3px}

/* ---- simple text pages (terms, privacy) ---- */
.doc{font-size:14px;line-height:1.7;color:var(--text-2)}
.doc h2{font-size:16px;font-weight:900;color:var(--text);margin:20px 0 6px}
.doc p,.doc li{margin-bottom:8px}
.doc ul{padding-left:18px}

/* ---- top earners page ---- */
.te-me{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:16px;background:var(--primary-bg);border:1px solid var(--primary-border);font-size:13px;font-weight:800}
.te-me b{margin-left:auto;font-weight:900}

@media (max-width:360px){
  .wc3-amount{font-size:26px}
}
@media (prefers-reduced-motion: reduce){.wallet-card3{transition:none}}

/* ===========================================================================
   SALES (referrals.php): Plamora's own layout.
   .inv-pass  an invite ticket: violet top with the best commission and your
              code, cut-out notches on the seam, white bottom with the link
              and round share buttons
   .aff-card  Affiliate wallet, Withdraw in a cut-out corner (like the cards)
   .how       three steps joined by a dashed line
   .team      funnel bar, pill tabs, members with a green ring when on a plan
   =========================================================================== */
.inv-pass{position:relative;border-radius:26px;background:var(--card);box-shadow:0 14px 30px -22px rgba(17,13,24,.5)}
.ip-top{position:relative;overflow:hidden;isolation:isolate;padding:20px 18px 24px;border-radius:26px 26px 0 0;color:#fff;
        background:radial-gradient(130% 120% at 100% 0%,#8B5CF6 0%,#5B21B6 42%,#2E1065 82%,#1A0B3A 100%)}
.ip-top > :not(.bub){position:relative;z-index:1}
.ip-k{font-size:12px;font-weight:800;opacity:.85}
.ip-amt{margin-top:4px;font-size:34px;font-weight:900;letter-spacing:-.025em;line-height:1.05}
.ip-amt span{font-size:15px;font-weight:800;letter-spacing:0;opacity:.85}
.ip-s{margin-top:6px;max-width:30ch;font-size:12.5px;font-weight:700;opacity:.88}
.ip-code{display:inline-flex;flex-direction:column;margin-top:16px;padding:8px 14px;border-radius:14px;background:rgba(255,255,255,.12);border:1.5px dashed rgba(255,255,255,.45)}
.ip-code span{font-size:10.5px;font-weight:800;opacity:.8}
.ip-code b{font-family:ui-monospace,'JetBrains Mono',monospace;font-size:20px;font-weight:800;letter-spacing:.16em}
.ip-perf{position:relative;height:0}
.ip-perf::before,.ip-perf::after{content:"";position:absolute;top:-12px;width:24px;height:24px;border-radius:50%;background:var(--dash-bg)}
.ip-perf::before{left:-12px}
.ip-perf::after{right:-12px}
.ip-bot{padding:16px}
.ip-link{display:flex;align-items:center;gap:8px;padding:6px 6px 6px 14px;border-radius:14px;background:var(--bg-input)}
.ip-url{flex:1;min-width:0;font-size:12.5px;font-weight:800;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ip-copy{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 14px;border-radius:11px;background:var(--text);color:var(--bg);font-size:12.5px;font-weight:900;flex-shrink:0}
.ip-copy .ic{font-size:16px}
.ip-share{display:flex;justify-content:space-around;gap:6px;margin-top:14px}
.ip-share > *{flex:1;max-width:84px}
.ip-sh{display:flex;flex-direction:column;align-items:center;gap:6px;padding:0;border:0;background:none;font:inherit;font-size:11.5px;font-weight:800;color:var(--text);cursor:pointer}
.ip-sh[hidden]{display:none}
.ip-sh > span{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-size:21px;color:#fff;transition:transform .12s}
.ip-sh:active > span{transform:scale(.93)}
.ip-sh .ic{--ic-tint:#fff}
.ip-sh.is-wa > span{background:#1FA855}
.ip-sh.is-tg > span{background:var(--tg)}
.ip-sh.is-x > span{background:#111}
[data-theme="dark"] .ip-sh.is-x > span{background:#2B2B33}
.ip-sh.is-more > span{background:var(--primary-bg);color:var(--primary)}
.ip-sh.is-more .ic{--ic-tint:currentColor}

.aff-card{position:relative;overflow:hidden;padding:18px;border-radius:24px;background:var(--card);box-shadow:0 10px 26px -20px rgba(17,13,24,.45)}
.ac-cut{position:absolute;top:0;right:0;width:136px;height:54px;border-bottom-left-radius:20px;background:var(--dash-bg)}
.ac-fil{position:absolute;width:20px;height:20px;background:radial-gradient(circle at 0 100%,transparent 19.5px,var(--dash-bg) 20px)}
.ac-fil-a{top:0;right:136px}
.ac-fil-b{top:54px;right:0}
.ac-cta{position:absolute;top:0;right:0;width:126px;height:44px;box-sizing:border-box;border-radius:99px;padding:0 12px 0 6px;display:flex;align-items:center;gap:8px;
        background:#6D28D9;color:#fff;font-size:13px;font-weight:900;box-shadow:0 8px 18px -10px rgba(76,29,149,.8)}
.ac-cta-ic{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#6D28D9;font-size:17px}
.ac-cta-ic .ic{--ic-tint:currentColor}
.ac-l{display:flex;align-items:center;gap:7px;padding-right:140px;font-size:12.5px;font-weight:800;color:var(--text-2)}
.ac-l .ic{font-size:18px;color:#C2410C}
.ac-v{margin-top:16px;font-size:30px;font-weight:900;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ac-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.ac-row > div{padding:10px 12px;border-radius:14px;background:var(--surface);border:1px solid var(--border)}
.ac-row span{display:block;font-size:11px;font-weight:800;color:var(--text-2)}
.ac-row b{display:block;margin-top:2px;font-size:15px;font-weight:900;font-variant-numeric:tabular-nums}

.how{padding:16px;border-radius:24px;background:var(--card);box-shadow:0 10px 26px -20px rgba(17,13,24,.45)}
.how-t{font-size:15px;font-weight:900}
.how-steps{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:14px}
.how-steps li{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px}
.how-steps li:not(:last-child)::after{content:"";position:absolute;top:17px;left:calc(50% + 24px);right:calc(-50% + 24px);border-top:2px dashed var(--primary-border)}
.how-n{width:36px;height:36px;margin-bottom:5px;border-radius:50%;display:grid;place-items:center;font-size:14px;font-weight:900;background:var(--primary-bg);color:var(--primary)}
.how-steps li:last-child .how-n{background:var(--primary);color:var(--on-primary)}
.how-steps b{font-size:12.5px;font-weight:900;line-height:1.2}
.how-steps span:not(.how-n){font-size:11px;font-weight:700;color:var(--text-2);line-height:1.3}

.team{padding:16px;border-radius:24px;background:var(--card);box-shadow:0 10px 26px -20px rgba(17,13,24,.45)}
.tm-h{display:flex;justify-content:space-between;align-items:baseline}
.tm-t{font-size:15px;font-weight:900}
.tm-c{font-size:12px;font-weight:800;color:var(--text-2)}
.tm-funnel{margin-top:12px}
.tm-fl{display:flex;justify-content:space-between;gap:10px;font-size:12px;font-weight:700;color:var(--text-2)}
.tm-fl b{color:var(--text);font-weight:900}
.tm-bar{height:8px;margin-top:6px;border-radius:99px;background:var(--bg-input);overflow:hidden}
.tm-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#14B8A6,#15803D);animation:onbFill 1s .2s cubic-bezier(.2,.8,.2,1) both}
.tm-seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-top:14px;padding:4px;border-radius:14px;background:var(--bg-input)}
.tm-seg a{display:flex;align-items:center;justify-content:center;gap:6px;height:38px;border-radius:10px;font-size:12.5px;font-weight:900;color:var(--text-2)}
.tm-seg a.is-on{background:var(--card);color:var(--text);box-shadow:0 2px 8px rgba(17,13,24,.1)}
.tm-seg i{font-style:normal;min-width:20px;height:20px;padding:0 6px;border-radius:99px;display:grid;place-items:center;font-size:11px;background:var(--primary-bg);color:var(--primary)}
.tm-list{list-style:none;margin-top:8px}
.tm-row{display:flex;align-items:center;gap:12px;padding:11px 2px;border-top:1px solid var(--border)}
.tm-row:first-child{border-top:0}
.tm-av{width:40px;height:40px;flex-shrink:0;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:900;background:var(--primary-bg);color:var(--primary)}
.tm-av.is-on{box-shadow:0 0 0 2px var(--card),0 0 0 4px #15803D}
.tm-m{flex:1;min-width:0;display:flex;flex-direction:column}
.tm-m b{font-size:13.5px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tm-m span{font-size:11.5px;font-weight:700;color:var(--text-2)}
.tm-plan{padding:5px 10px;border-radius:99px;font-size:11.5px;font-weight:900;background:var(--green-bg);color:var(--green)}
.tm-plan.is-free{background:var(--amber-bg);color:var(--amber)}
.tm-empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:20px 8px 6px;text-align:center}
.tm-empty > span{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-size:24px;background:var(--primary-bg);color:var(--primary)}
.tm-empty p{max-width:30ch;font-size:13px;font-weight:700;color:var(--text-2)}