:root{
  --primary:#6c5ce7;
  --primary2:#8e44ff;
  --secondary:#00c9a7;
  --warning:#ffb703;
  --danger:#ff5d73;
  --info:#26a7ff;
  --dark:#101828;
  --muted:#667085;
  --soft:#f5f7fb;
  --card:#ffffff;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:linear-gradient(180deg,#f7f5ff 0%,#eef8ff 45%,#f8fbff 100%);
  color:var(--dark);
  min-height:100vh;
}
a{text-decoration:none}
.app-shell{
  max-width:none;
  margin:0 auto;
  min-height:100vh;
  background:#f7f8fc;
  position:relative;
  box-shadow:0 0 40px rgba(16,24,40,.08);
  overflow-x:hidden;
  padding-bottom:92px;
}
.topbar{
  padding:18px 18px 28px;
  background:
    radial-gradient(circle at top right,rgba(255,255,255,.22),transparent 34%),
    linear-gradient(135deg,#5b45e0,#8f4ef7 58%,#a355ff);
  color:#fff;
  border-radius:0 0 30px 30px;
  position:relative;
  overflow:hidden;
}
.topbar::after{
  content:"";
  position:absolute;
  right:-40px;
  bottom:-70px;
  width:160px;height:160px;
  border-radius:50%;
  border:25px solid rgba(255,255,255,.08);
}
.menu-btn,.icon-btn{
  width:42px;height:42px;
  border:0;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.16);
  color:#fff;font-size:20px;
  backdrop-filter:blur(10px);
}
.avatar{
  width:52px;height:52px;border-radius:18px;
  background:linear-gradient(135deg,#fff,#dccfff);
  color:#6542d6;
  display:flex;align-items:center;justify-content:center;
  font-size:24px;
  box-shadow:0 8px 25px rgba(0,0,0,.13);
}
.status-pill{
  background:#eafff7;color:#07956f;
  padding:5px 10px;border-radius:999px;
  font-weight:700;font-size:11px;
  display:inline-flex;align-items:center;gap:5px;
}
.status-dot{width:7px;height:7px;border-radius:50%;background:#18c38c}
.content{padding:0 14px 20px;margin-top:-10px}
.glass-card,.card-ui{
  background:#fff;
  border:1px solid rgba(16,24,40,.04);
  border-radius:22px;
  box-shadow:0 12px 28px rgba(16,24,40,.07);
}
.referral-card{padding:16px;margin-bottom:14px}
.referral-box{
  border:1px dashed #cabdff;
  background:#f8f6ff;
  border-radius:16px;
  padding:11px 12px;
  font-size:13px;font-weight:700;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.mini-action{
  width:40px;height:40px;border:none;border-radius:13px;
  display:flex;align-items:center;justify-content:center;
  font-size:17px;
}
.copy-btn{background:#eee9ff;color:#704be6}
.share-btn{background:#e7fff8;color:#0a9a78}
.stat-card{
  border-radius:20px;
  padding:16px;color:#fff;
  min-height:118px;
  position:relative;overflow:hidden;
  box-shadow:0 10px 24px rgba(16,24,40,.10);
}
.stat-card::after{
  content:"";
  position:absolute;right:-24px;top:-24px;
  width:85px;height:85px;
  border:15px solid rgba(255,255,255,.11);
  border-radius:50%;
}
.stat-purple{background:linear-gradient(135deg,#6d5dfc,#9b5cff)}
.stat-green{background:linear-gradient(135deg,#00ad8d,#35d0b1)}
.stat-blue{background:linear-gradient(135deg,#1677ff,#43b8ff)}
.stat-orange{background:linear-gradient(135deg,#f59e0b,#ffbe45)}
.stat-icon{
  width:36px;height:36px;border-radius:12px;
  background:rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:10px;
}
.stat-label{font-size:12px;opacity:.88}
.stat-value{font-weight:800;font-size:20px;letter-spacing:-.3px}
.section-title{font-size:16px;font-weight:800;margin:20px 3px 12px}
.portfolio-card{padding:16px;display:flex;align-items:center;gap:13px;margin-bottom:12px}
.portfolio-icon{
  flex:0 0 auto;width:48px;height:48px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;font-size:21px;
}
.pi-purple{background:#eee9ff;color:#6946dc}
.pi-pink{background:#fff0f5;color:#f2447c}
.progress{height:7px;border-radius:100px;background:#eef1f6}
.progress-bar{border-radius:100px}
.bottom-nav{
  position:fixed;left:50%;transform:translateX(-50%);bottom:0;
  width:100%;
  background:rgba(255,255,255,.96);
  border-top:1px solid #edf0f5;
  box-shadow:0 -8px 25px rgba(16,24,40,.08);
  z-index:1050;
  padding:8px 8px calc(8px + env(safe-area-inset-bottom));
  backdrop-filter:blur(12px);
}
.nav-item-app{
  flex:1;border:none;background:transparent;color:#98a2b3;
  text-align:center;font-size:10px;font-weight:700;
  padding:4px 2px;border-radius:14px;
}
.nav-item-app i{display:block;font-size:21px;margin-bottom:2px}
.nav-item-app.active{color:#704be6;background:#f1edff}
.drawer-overlay{
  position:fixed;inset:0;background:rgba(16,24,40,.45);
  z-index:2000;display:none;backdrop-filter:blur(2px)
}
.drawer-overlay.show{display:block}
.side-drawer{
  position:fixed;top:0;left:0;bottom:0;
  width:min(330px,86%);
  background:#fff;z-index:2001;
  transform:translateX(-102%);
  transition:.3s ease;
  box-shadow:20px 0 45px rgba(0,0,0,.12);
  overflow:auto;
}
.side-drawer.show{transform:translateX(0)}
.drawer-head{background:linear-gradient(135deg,#6047e7,#9c55ff);color:#fff;padding:24px 18px}
.drawer-link{
  margin:5px 10px;padding:12px 14px;border-radius:14px;
  color:#344054;display:flex;align-items:center;gap:12px;font-weight:650;
}
.drawer-link:hover,.drawer-link.active{background:#f1edff;color:#6c4de6}
.auth-page{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:22px;
  background:
    radial-gradient(circle at 10% 10%,rgba(113,75,230,.18),transparent 30%),
    radial-gradient(circle at 90% 90%,rgba(0,201,167,.16),transparent 34%),
    #f8f9ff;
}
.auth-wrap{width:100%;max-width:none}
.brand-badge{
  width:64px;height:64px;border-radius:20px;margin:0 auto 14px;
  display:flex;align-items:center;justify-content:center;
  color:white;font-size:30px;
  background:linear-gradient(135deg,#6946e7,#9f58ff);
  box-shadow:0 12px 28px rgba(105,70,231,.28);
}
.auth-card{
  padding:22px;border-radius:26px;background:#fff;
  box-shadow:0 18px 50px rgba(16,24,40,.09);
  border:1px solid rgba(16,24,40,.04);
}
.form-control{
  min-height:50px;border-radius:14px;border-color:#e6e8ef;padding-left:14px
}
.form-control:focus{
  border-color:#9b7cf7;
  box-shadow:0 0 0 .2rem rgba(108,92,231,.12)
}
.btn-gradient{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:50px;border:none;border-radius:14px;color:#fff;font-weight:800;
  background:linear-gradient(135deg,#6650e7,#9852f8);
  box-shadow:0 10px 25px rgba(108,92,231,.22);
}
.auth-switch{color:#6d4ee8;font-weight:800;cursor:pointer}
.toast-copy{
  position:fixed;left:50%;bottom:100px;transform:translateX(-50%);
  background:#101828;color:#fff;padding:10px 14px;border-radius:12px;
  font-size:12px;z-index:4000;display:none;
}
@media (min-width:700px){
  body{padding:20px 0}
  .app-shell{border-radius:30px;min-height:calc(100vh - 40px);overflow:hidden}
  .bottom-nav{bottom:20px;border-radius:0 0 30px 30px}
}
.profile-summary{z-index:2}
.sponsor-progress{width:0%;background:#7654ea}
.parent-income{color:#ed4f82}
.parent-progress{width:0%;background:#ef5b89}

.payment-shell{width:100%;max-width:none;box-sizing:border-box;margin:24px auto;padding:0 18px 40px}
.admin-shell{width:100%;max-width:none}
.payment-header{display:flex;align-items:center;justify-content:space-between;gap:16px;background:linear-gradient(135deg,#6047e7,#9c55ff);color:#fff;padding:24px;border-radius:24px;margin-bottom:22px}
.payment-header h1{font-size:24px;font-weight:800;margin:6px 0 0}
.payment-shell h2{font-size:21px;font-weight:800;margin-bottom:14px}
.payment-account{display:flex;flex-direction:column;gap:4px;margin:18px 2px;color:#667085}
.payment-account strong{color:#101828}
.payment-step{font-size:12px;text-transform:uppercase;letter-spacing:1px;color:#704be6;font-weight:800;margin-bottom:12px}
.network-label{display:inline-block;border-radius:999px;background:#fff7dd;color:#795900;padding:6px 12px;font-size:13px;font-weight:700}
.payment-qr{display:block;max-width:220px;width:100%;height:auto;margin:15px auto 25px;border:1px solid #edf0f5;border-radius:14px;padding:10px;background:white}
.admin-qr{margin-left:0;max-width:160px}
.wallet-address{font-family:ui-monospace,monospace;font-size:13px;overflow-wrap:anywhere}
.payment-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 32px);background:#101828;color:#fff;border-radius:14px;padding:14px 18px;box-shadow:0 10px 30px #10182833;z-index:5000;font-size:14px}
.payment-toast[hidden]{display:none}
.admin-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:24px}
.admin-stats span{font-size:13px;color:#667085;display:block}
.admin-stats strong{font-size:28px;color:#704be6}
.back-link{display:inline-block;margin-bottom:20px}
@media(max-width:480px){.payment-shell{margin:12px auto}.payment-header{padding:20px}.payment-header h1{font-size:21px}.admin-stats{gap:8px}.admin-stats span{font-size:11px}}

.activation-hero{text-align:center;padding:12px 0 20px}
.activation-hero-icon{display:grid;place-items:center;width:64px;height:64px;border-radius:22px;color:#7353e7;background:#f0ebff;margin:0 auto 18px;font-size:30px}
.activation-hero h2{font-size:42px;letter-spacing:-1.5px;margin:12px 0}.activation-hero h2 small{font-size:18px;letter-spacing:0;color:#8b86a1}
.activation-hero p{font-size:13px;color:#8c879d;margin:0}
.scan-card{text-align:center;background:linear-gradient(145deg,#f8f5ff,#f3fafb);border:1px solid #ece7fa;border-radius:22px;padding:22px;margin:12px 0 24px}
.scan-caption{font-size:14px;font-weight:700;color:#6a53b1}.scan-caption i{margin-right:8px}.scan-card p{font-size:12px;color:#9389a7;margin:12px 0 0}
.generated-qr{width:220px;max-width:100%;margin:18px auto;background:white;border-radius:16px;overflow:hidden}.generated-qr svg{display:block;width:100%;height:auto}.scan-card .payment-qr{margin:18px auto 0;border-radius:16px}
.fee-summary{border:1px solid #ece7fa;border-radius:18px;padding:18px;background:#fcfbff;margin:18px 0}.fee-summary div{display:flex;justify-content:space-between;gap:18px;padding:10px 0;color:#77748a;font-size:14px}.fee-summary div:last-child{border-top:1px solid #ece7fa;margin-top:6px;padding-top:16px;color:#514078;font-weight:700}

.payment-method-tabs{display:flex;gap:6px;padding:5px;background:#f1edf9;border-radius:14px;margin:20px 0}.payment-method-tabs button{flex:1;border:0;background:transparent;color:#8a7da9;font-size:13px;font-weight:700;padding:12px 8px;border-radius:10px}.payment-method-tabs button[aria-selected="true"]{background:white;color:#6b4bd7;box-shadow:0 3px 8px #604d8610}.payment-progress{padding:15px;background:#f0f5ff;border:1px solid #dbe7ff;border-radius:14px;color:#46638a;font-size:13px;overflow-wrap:anywhere}.payment-progress.error{background:#fff0f0;border-color:#ffdfdf;color:#b34b4b}.verification-checklist{border-top:1px solid #eee8f8;margin-top:22px;padding-top:18px;display:grid;gap:8px;font-size:12px;color:#8b829d}.verification-checklist strong{color:#6d647e;margin-bottom:4px}.verification-checklist i{color:#18a383;margin-right:5px}#paymentExplorer[hidden]{display:none!important}

.tree-preview{padding:20px 0;text-align:center}.tree-person{display:inline-block;background:#f0edff;border:1px solid #c9bef8;border-radius:12px;padding:12px 8px;font-weight:700;min-width:80px;color:#513ba5}.tree-person small{display:block;font-weight:400;font-size:11px;margin-top:5px}.tree-branches{display:flex;justify-content:space-between;gap:8px;margin-top:24px;position:relative;border-top:2px solid #c9bef8;padding-top:14px}.tree-branches:before{content:'';position:absolute;left:50%;top:-25px;height:24px;border-left:2px solid #c9bef8}.tree-empty{background:#f7f7fb;border-style:dashed;color:#737387}

.payment-header .header-back{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:#fff;text-decoration:none;font-size:14px;font-weight:600;margin-bottom:4px}.payment-header .header-back span{font-size:23px;line-height:1}.payment-header .header-back:hover{text-decoration:underline}.payment-header .header-back:focus-visible{outline:2px solid #fff;outline-offset:4px;border-radius:4px}.payment-header>div{min-width:0}.payment-header>form{flex-shrink:0}
.payment-method-tabs button{min-width:0;overflow-wrap:anywhere}@media(max-width:380px){.payment-method-tabs{flex-direction:column}}
.payment-shell{padding-bottom:110px}.payment-shell.team-shell{padding-bottom:110px}.bottom-nav a{text-decoration:none}.payment-header .header-back{max-width:100%}
.btn-gradient.btn-sm{min-height:44px;padding:10px 18px;line-height:1.25;border-radius:12px;white-space:nowrap;flex-shrink:0}
.app-install-banner{display:flex;align-items:center;justify-content:center;gap:14px;padding:12px 18px;background:#eeeaff;color:#423782;font-size:14px;flex-wrap:wrap}.app-install-banner button{border:0;border-radius:10px;background:#6c5ce7;color:white;padding:11px 16px;font:inherit;font-weight:700;cursor:pointer}.app-install-banner .install-dismiss{background:transparent;color:#423782;font-size:24px;padding:4px 10px}.app-install-banner button:focus-visible{outline:3px solid #35277e;outline-offset:3px}

/* Sponsor business and Club membership */
.club-business{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);margin:24px 0;border:1px solid var(--theme-border,#ddd5f5);border-radius:24px;overflow:hidden;box-shadow:0 12px 30px #2914550d;background:#fff}
.club-business-main{padding:28px;background:linear-gradient(125deg,var(--theme-primary,#6542d6),var(--theme-secondary,#9246de));color:#fff}
.club-eyebrow{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:10px;font-weight:800;letter-spacing:1px}.club-eyebrow span{margin-left:auto;padding:5px 9px;background:#ffffff20;border-radius:8px;font-size:11px;letter-spacing:0}
.club-business h2{font-size:20px;font-weight:700;margin:19px 0 10px;color:inherit}.club-business-value{font-size:clamp(27px,4vw,40px);font-weight:800;line-height:1.2;overflow-wrap:anywhere}.club-business-value small{font-size:13px;font-weight:600;opacity:.85}.club-business-main p{font-size:12px;line-height:1.6;margin:12px 0 18px;max-width:400px;color:#fff;opacity:.88}.club-business-link{display:inline-flex;align-items:center;gap:14px;border:1px solid #ffffff60;border-radius:10px;padding:9px 13px;color:#fff!important;text-decoration:none;font-size:12px;font-weight:700;background:#ffffff15}.club-business-link:hover{background:#ffffff30}
.club-business-status{padding:28px;display:flex;flex-direction:column;justify-content:center;color:var(--theme-ink,#34294c);min-width:0}.club-status-heading{display:flex;gap:12px;align-items:center;margin-bottom:22px}.club-award,.club-modal-icon{display:grid;place-items:center;background:var(--theme-soft,#f0ebff);color:var(--theme-primary,#6542d6);border-radius:16px;width:48px;height:48px;flex-shrink:0;font-size:25px}.club-status-label{font-size:10px;letter-spacing:1.4px;font-weight:800;color:var(--theme-primary,#6542d6)}.club-status-heading h3{font-size:17px;line-height:1.35;margin:4px 0 0;font-weight:750}.club-progress-label{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12px}.club-progress-label strong{font-size:23px;color:var(--theme-primary,#6542d6)}.club-progress-label strong span{font-size:13px;color:#687080}.club-progress-track{height:8px;border-radius:9px;background:var(--theme-soft,#f0ebff);overflow:hidden;margin:10px 0 12px}.club-progress-track>span{display:block;height:100%;background:var(--theme-primary,#6542d6);border-radius:inherit}.club-status-foot{font-size:12px;color:#687080;line-height:1.6;margin-bottom:0}.club-business-status p strong{display:block;font-size:24px;margin:7px 0;color:var(--theme-primary,#6542d6)}
.club-reminder{border:1px solid var(--theme-border,#ddd5f5);border-radius:26px;padding:32px;max-width:440px;width:calc(100% - 32px);max-height:calc(100dvh - 40px);overflow:auto;color:var(--theme-ink,#34294c);box-shadow:0 25px 90px #160d4540;text-align:center}.club-reminder::backdrop{background:#17122c99;backdrop-filter:blur(5px)}.club-modal-close{position:absolute;right:13px;top:13px;background:var(--theme-soft,#f0ebff);border:0;border-radius:50%;width:32px;height:32px;color:var(--theme-ink,#34294c)}.club-modal-icon{width:70px;height:70px;font-size:36px;border-radius:22px;margin:3px auto 20px}.club-reminder h2{font-size:25px;font-weight:800;margin:10px 0 14px}.club-reminder p{font-size:14px;line-height:1.7;color:#646b79}.club-modal-stats{display:grid;grid-template-columns:1fr 1fr;background:var(--theme-soft,#f0ebff);padding:16px;border-radius:16px;margin:20px 0}.club-modal-stats strong{display:block;font-size:25px;color:var(--theme-primary,#6542d6)}.club-modal-stats span{font-size:11px;color:#646b79}.club-modal-stats>div+div{border-left:1px solid var(--theme-border,#ddd5f5)}.club-modal-later{background:none;border:0;color:#646b79;margin-top:16px;font-size:13px}.club-reminder button:focus-visible,.club-business a:focus-visible{outline:3px solid var(--theme-primary,#6542d6);outline-offset:3px}
@media(max-width:650px){.club-business{grid-template-columns:1fr;border-radius:20px}.club-business-main,.club-business-status{padding:22px}.club-eyebrow span{margin-left:0}.club-status-heading{margin-bottom:16px}.club-reminder{padding:28px 22px}}

.package-tabs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px}.package-tabs a{white-space:nowrap}