/* ================= GENERAL RESET ================= */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


:root{
  --auth-yellow:#FFD400;
  --auth-yellow-dim:#D9A900;
  --auth-ink:#111111;
  --auth-muted:#6B6B6B;
  --auth-faint:#9A9A9A;
  --auth-line:#E6E6E6;
  --auth-card-bg:#F4F4F4;
  --auth-weak:#E5484D;
  --auth-medium:#D9A900;
  --auth-strong:#2E9E5B;
}

.honda-auth-container{
  display:none;
  position:fixed;
  inset:0;
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:'Inter',sans-serif;
  background:#ffffff;
  overflow-y:auto;
  overflow-x:hidden;
  z-index:9999;
}
.honda-auth-container.active{
  display:flex;
  flex-direction:column;
  align-items:center;
}
.honda-auth-container *{ box-sizing:border-box; }

.auth-page-inner{
  position:relative;
  width:100%;
  max-width:430px;
  margin:0 auto;
  min-height:100%;
  padding:28px 20px 40px;
  display:flex;
  flex-direction:column;
}

/* LOGO */
.auth-logo-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  margin-bottom:26px;
}
.auth-logo-badge{
  width:34px;
  height:34px;
  border-radius:10px;
  background:var(--auth-ink);
  color:var(--auth-yellow);
  display:flex;
  align-items:center;
  justify-content:center;
}
.auth-logo-text{
  font-size:16px;
  font-weight:700;
  color:var(--auth-ink);
  letter-spacing:.5px;
}
.auth-logo-text span{ color:var(--auth-yellow-dim); }

/* HEADING */
.auth-heading{
  margin-bottom:20px;
}
.auth-heading h1{
  margin:0 0 6px;
  font-size:19px;
  font-weight:700;
  color:var(--auth-ink);
  letter-spacing:.3px;
}
.auth-heading p{
  margin:0;
  font-size:12.5px;
  color:var(--auth-muted);
  line-height:1.5;
}

/* CARD — dimmed light-gray panel like the reference */
.auth-card{
  background:var(--auth-card-bg);
  border:1px solid var(--auth-line);
  border-radius:18px;
  padding:20px 18px;
}

/* INPUT GROUPS */
.fieldmark-input-group{ margin-bottom:16px; }

.fieldmark-input-group label{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12.5px;
  font-weight:600;
  color:var(--auth-ink);
  margin-bottom:8px;
}
.label-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:8px;
}
.label-row label{ margin-bottom:0; }

.label-bar{
  width:3px;
  height:13px;
  border-radius:2px;
  background:var(--auth-yellow-dim);
  flex-shrink:0;
}

.optional-tag{ opacity:.6; font-weight:400; }

.forgot-link{
  font-size:11.5px;
  font-weight:600;
  color:var(--auth-yellow-dim);
  text-decoration:none;
}
.forgot-link:hover{ text-decoration:underline; }

.fieldmark-field-box{
  display:flex;
  align-items:center;
  background:#ffffff;
  border:1.5px solid var(--auth-line);
  border-radius:12px;
  padding:13px 14px;
  gap:10px;
  transition:.15s;
}
.fieldmark-field-box:focus-within{
  border-color:var(--auth-yellow-dim);
  box-shadow:0 0 0 3px rgba(217,169,0,.12);
}
.fieldmark-field-box input{
  border:none;
  outline:none;
  width:100%;
  min-width:0;
  font-size:13.5px;
  background:transparent;
  color:var(--auth-ink);
  font-family:inherit;
}
.fieldmark-field-box input::placeholder{ color:var(--auth-faint); }

.eye-icon{
  cursor:pointer;
  color:var(--auth-faint);
  flex-shrink:0;
  display:flex;
  align-items:center;
}
.eye-icon:hover{ color:var(--auth-ink); }

/* PASSWORD STRENGTH */
.pw-strength-wrap{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:9px;
  padding:0 2px;
}
.pw-strength-track{
  flex:1;
  height:5px;
  border-radius:999px;
  background:var(--auth-line);
  overflow:hidden;
}
.pw-strength-fill{
  height:100%;
  width:0%;
  border-radius:999px;
  background:var(--auth-weak);
  transition:width .25s ease, background .25s ease;
}
.pw-strength-label{
  font-size:10.5px;
  font-weight:700;
  color:var(--auth-faint);
  min-width:50px;
  text-align:right;
}

/* CAPTCHA — small, sits BESIDE the input in one row */
.captcha-inline-row{
  display:flex;
  align-items:center;
  gap:8px;
}
.captcha-input-box{
  flex:1;
  min-width:0;
  padding:11px 12px;
}
#captchaCanvas{
  flex:0 0 auto;
  width:80px;
  height:38px;
  border-radius:9px;
  border:1.5px dashed #C9C9C9;
  background:#FAFAFA;
}
.captcha-refresh-btn{
  flex:0 0 auto;
  width:38px;
  height:38px;
  border-radius:9px;
  background:var(--auth-ink);
  border:none;
  color:var(--auth-yellow);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform .4s ease, filter .15s ease;
}
.captcha-refresh-btn:hover{ filter:brightness(1.15); }
.captcha-refresh-btn:active{ transform:rotate(180deg) scale(.92); }

/* BUTTON */
.fieldmark-btn-submit{
  position:relative;
  overflow:hidden;
  width:100%;
  padding:14px;
  border:none;
  border-radius:12px;
  background:var(--auth-yellow);
  color:var(--auth-ink);
  font-weight:700;
  cursor:pointer;
  font-size:14px;
  font-family:inherit;
  margin-top:4px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform .1s, filter .15s;
}
.fieldmark-btn-submit .btn-content,
.fieldmark-btn-submit .btn-spinner{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.fieldmark-btn-submit .btn-spinner{ display:none; }
.fieldmark-btn-submit.is-loading .btn-content{ display:none; }
.fieldmark-btn-submit.is-loading .btn-spinner{ display:flex; }
.fieldmark-btn-submit.is-loading{ cursor:not-allowed; filter:brightness(.96); }
.fieldmark-btn-submit:disabled{ pointer-events:none; opacity:.6; }
.fieldmark-btn-submit:hover{ filter:brightness(.96); }
.fieldmark-btn-submit:active{ transform:scale(.98); }

.spin-icon{ animation:auth-spin 0.8s linear infinite; }
@keyframes auth-spin{ to{ transform:rotate(360deg); } }

/* SWITCH LINK */
.fieldmark-switch-action{
  text-align:center;
  margin-top:16px;
  font-size:12.5px;
  color:var(--auth-muted);
}
.fieldmark-link-btn{
  background:none;
  border:none;
  color:var(--auth-yellow-dim);
  font-weight:700;
  cursor:pointer;
  font-size:12.5px;
  font-family:inherit;
  padding:0;
}
.fieldmark-link-btn:hover{ text-decoration:underline; }

/* LEGAL NOTE */
.auth-legal-note{
  margin-top:16px;
  font-size:10.5px;
  line-height:1.6;
  color:var(--auth-faint);
  text-align:center;
}
.auth-legal-note a{
  color:var(--auth-ink);
  text-decoration:none;
  font-weight:600;
}
.auth-legal-note a:hover{ text-decoration:underline; }

/* MOBILE */
@media (max-width:380px){
  .auth-page-inner{ padding:24px 16px 32px; }
  .auth-card{ padding:16px 14px; }
  .fieldmark-field-box{ padding:11px 12px; }
  #captchaCanvas{ width:68px; }
}

/* SLIGHTLY LARGER SCREENS */
@media (min-width:480px){
  .auth-page-inner{ padding-top:44px; }
}

:root {
  --brand-yellow: #FFD400;
  --ink: #111111;
  --ink-muted: rgba(17, 17, 17, 0.56);
  --white: #FFFFFF;
  --line: #ECECEC;
}

/* ── DASHBOARD BODY ── */
.dashboard {
  width: 100%;
  max-width: 430px;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 100vh;
  margin: 0 auto;
  padding: 28px 0 24px 0;
  box-sizing: border-box;
  background: #ffffff;
  color: var(--ink);
}

/* ── BANNER CAROUSEL — swipeable, auto-rotating ── */
.mx-banner-carousel {
  position: relative;
  width: calc(100% - 24px);
  margin: 0 auto 16px auto;
  border-radius: 18px;
  overflow: hidden;
  box-sizing: border-box;
}

.mx-banner-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.mx-banner-track::-webkit-scrollbar { display: none; }

.mx-banner-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
}

.mx-banner-slide img {
  width: 100%;
  height: 190px;
  object-fit: cover;
  display: block;
}

.mx-banner-dots {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  z-index: 2;
}

.mx-banner-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  box-shadow: 0 1px 3px rgba(17, 17, 17, 0.25);
  transition: width 0.2s ease, background 0.2s ease, border-radius 0.2s ease;
}

.mx-banner-dot.active {
  width: 16px;
  border-radius: 3px;
  background: var(--brand-yellow);
}

/* ── ACTION ROW — small flat icon buttons in one panel, matching the reference ── */
.main-container {
  width: 100%;
  box-sizing: border-box;
  padding: 0 12px 4px;
}

.action-grid {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px 6px;
}

.action-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  flex: 1;
  -webkit-tap-highlight-color: transparent;
}

.action-card:active { opacity: 0.65; }

.action-icon {
  font-size: 20px;
  color: var(--brand-yellow);
  -webkit-text-stroke: 0.4px var(--ink);
}

.action-text {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ink);
  text-align: center;
  letter-spacing: 0.1px;
}

@media (max-width: 380px) {
  .action-icon { font-size: 18px; }
  .action-text { font-size: 10px; }
}


/* =========================================================
   REDEEM GIFT — WHITE + YELLOW + BLACK
   ========================================================= */
:root{
  --gc-yellow:#FFD400;
  --gc-yellow-dim:#D9A900;
  --gc-ink:#111111;
  --gc-muted:#6B6B6B;
  --gc-faint:#9A9A9A;
  --gc-line:#E6E6E6;
  --gc-bg:#F6F6F6;
  --gc-danger:#E5484D;
}

#giftCodePage{
  width:100%;
  max-width:430px;
  margin:0 auto;
  min-height:100vh;
  background:#ffffff;
  box-sizing:border-box;
  font-family:'Inter',sans-serif;
  color:var(--gc-ink);
}
#giftCodePage *{ box-sizing:border-box; }

/* HEADER */
.gift-page-header{
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px;
  border-bottom:1px solid var(--gc-line);
}
.gift-back-btn{
  width:30px;
  height:30px;
  flex:0 0 30px;
  border-radius:50%;
  background:#fff;
  border:1px solid var(--gc-line);
  color:var(--gc-ink);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:.15s;
}
.gift-back-btn:hover{ border-color:var(--gc-yellow-dim); }
.gift-back-btn:active{ transform:scale(.92); }

.gift-header-title{
  font-size:16px;
  font-weight:700;
  color:var(--gc-ink);
}

.gift-content{
  padding:0 0 30px;
  width:100%;
}

/* BANNER IMAGE */
.gift-banner{
  width:100%;
  height:220px;
  overflow:hidden;
}
.gift-banner-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* INTRO TEXT */
.gift-intro-text{
  margin:18px 16px 12px;
  color:var(--gc-ink);
  font-size:13.5px;
  font-weight:500;
}

/* TELEGRAM ROW */
.gift-telegram-row{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 16px 22px;
  padding:13px 14px;
  border-radius:12px;
  background:var(--gc-bg);
  text-decoration:none;
  color:var(--gc-ink);
  transition:.15s;
}
.gift-telegram-row:hover{ background:#EFEFEF; }
.gift-telegram-row:active{ transform:scale(.99); }
.gift-telegram-icon{
  width:32px;
  height:32px;
  flex:0 0 32px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#27A9E1;
  color:#fff;
}
.gift-telegram-label{
  flex:1;
  font-size:13.5px;
  font-weight:500;
}
.gift-telegram-arrow{
  color:var(--gc-faint);
  flex-shrink:0;
}

/* GIFT CODE LABEL + INPUT */
.gift-label{
  display:block;
  margin:0 16px 10px;
  font-size:13.5px;
  font-weight:600;
  color:var(--gc-ink);
}
.gift-required{
  color:var(--gc-danger);
  margin-right:3px;
}

.gift-input-wrapper{
  margin:0 16px 26px;
}
#giftCodeInput{
  width:100%;
  padding:14px 16px;
  border-radius:10px;
  border:1.5px solid var(--gc-line);
  background:var(--gc-bg);
  color:var(--gc-ink);
  font-family:inherit;
  font-size:13.5px;
  font-weight:500;
  outline:none;
  transition:.15s;
}
#giftCodeInput::placeholder{
  color:var(--gc-faint);
  font-weight:400;
}
#giftCodeInput:focus{
  border-color:var(--gc-yellow-dim);
  background:#fff;
  box-shadow:0 0 0 4px rgba(217,169,0,.12);
}

/* CONFIRM BUTTON */
.gift-receive-btn{
  display:block;
  width:calc(100% - 32px);
  margin:8px 16px 0;
  padding:15px;
  border:none;
  border-radius:24px;
  background:var(--gc-yellow);
  color:var(--gc-ink);
  font-family:inherit;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  transition:.15s;
}
.gift-receive-btn:hover{ filter:brightness(0.97); }
.gift-receive-btn:active{ transform:scale(.98); }
.gift-receive-btn:disabled{
  background:#E5E5E5;
  color:#B0B0B0;
  cursor:not-allowed;
}

@media (max-width:380px){
  .gift-banner{ height:190px; }
  .gift-intro-text{ margin:16px 14px 10px; }
  .gift-telegram-row{ margin:0 14px 20px; }
  .gift-label{ margin:0 14px 10px; }
  .gift-input-wrapper{ margin:0 14px 22px; }
  .gift-receive-btn{ width:calc(100% - 28px); margin:8px 14px 0; }
}

.record-id {
  font-weight: 700;           /* Makes it bold */
  font-family: 'Courier New', Courier, monospace; /* Monospace for numbers */
  color: #000000;                /* Slightly darker for readability */
  background: #f0f0f0;        /* Light grey background badge */
  padding: 2px 6px;           /* Space inside the badge */
  border-radius: 4px;         /* Rounded corners */
  display: inline-block;      /* Keeps the background tight to the text */
  margin-top: 4px;            /* Space from the time above */
  font-size: 11px;            /* Keeps it small but clear */
  letter-spacing: 0.5px;      /* Spacing between numbers */
  user-select: all;           /* Allows user to select full ID with one tap */
}


:root {
  --brand-yellow-dim: #D9A900;
  --ink: #111111;
  --nav-inactive: #8A8A8A;
}

.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  margin: 0;
  background: #ffffff;
  border-top: 1px solid rgba(17, 17, 17, 0.08);
  border-radius: 0;
  box-shadow: 0 -2px 10px rgba(17, 17, 17, 0.05);
  z-index: 9999;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.nav-pill-container {
  height: 58px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 100%;
  align-items: center;
  justify-items: center;
  padding: 0 4px;
  box-sizing: border-box;
}

.nav-item {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--nav-inactive);
  gap: 3px;
  -webkit-tap-highlight-color: transparent;
}

.nav-item svg {
  color: var(--nav-inactive);
  transition: color 0.2s;
}

.nav-item .nav-label-text {
  font-size: 10.5px;
  font-weight: 500;
  font-family: 'Inter', sans-serif;
  color: var(--nav-inactive);
  transition: color 0.2s;
}

.nav-item.active svg {
  color: var(--brand-yellow-dim);
}

.nav-item.active .nav-label-text {
  color: var(--brand-yellow-dim);
  font-weight: 700;
}

.nav-item:active {
  opacity: 0.7;
}

.nav-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}

/* Default state */
#bottomNav {
    display: none; 
}

/* Visibility state */
.nav-visible {
    display: flex !important;
}




.ticker-search-bar {
  width: 90%;
  max-width: 400px;
  margin: 15px auto; /* Spacing between flyer and action buttons */
  height: 45px;
  background: #ffffff;
  border-radius: 50px;
  display: flex;
  align-items: center;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(157, 78, 221, 0.2);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.ticker-track {
  display: flex;
  white-space: nowrap;
  animation: ticker-scroll 35s linear infinite; /* Adjust speed here */
}

.ticker-item {
  display: flex;
  align-items: center;
  padding: 0 20px;
  font-size: 13px;
  font-weight: 600;
  color: #5c6a7e;
  gap: 8px;
}

.user-icon {
  width: 24px;
  height: 24px;
  background: #9d4edd;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
}

@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}


/* =========================================================
   FORDBRIDGE PROFILE — floating cards, matched to reference
   Yellow #FFD400 · Black #111111 · White #FFFFFF
   ========================================================= */

#profilePage{
  --yellow:#FFD400;
  --yellow-deep:#E6BE00;
  --ink:#111111;
  --muted:#7C7C7C;
  --line:#F0F0F0;
  --page-bg:#F4F4F5;
  --danger:#E5484D;

  position:fixed;
  inset:0;
  width:100%;
  height:100vh;
  display:flex;
  flex-direction:column;
  overflow-y:auto;
  overflow-x:hidden;
  background:var(--page-bg);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  z-index:500;
  box-sizing:border-box;
}

#profilePage *{ box-sizing:border-box; }

/* =========================================================
   HERO — full-bleed blurred banner
   ========================================================= */

#profilePage .pf-hero{
  position:relative;
  height:236px;
  overflow:hidden;
  flex:0 0 auto;
}

#profilePage .pf-hero-bg-img{
  position:absolute;
  inset:0;
  z-index:1;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:blur(5px) brightness(0.9) saturate(1.05);
  transform:scale(1.08);
}

#profilePage .pf-hero-shade{
  position:absolute;
  inset:0;
  z-index:2;
  background:linear-gradient(180deg, rgba(17,17,17,.25) 0%, rgba(17,17,17,.05) 45%, rgba(17,17,17,.10) 100%);
}

#profilePage .pf-hero-content{
  position:relative;
  z-index:3;
  padding:26px 16px 0;
}

#profilePage .pf-logout-icon{
  position:absolute;
  top:14px;
  right:14px;
  z-index:4;
  width:30px;
  height:30px;
  border-radius:9px;
  border:1px solid rgba(255,255,255,.35);
  background:rgba(17,17,17,.30);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

/* AVATAR + IDENTITY ROW — mirrors reference: avatar top-left, text beside it */

#profilePage .pf-identity-row{
  display:flex;
  align-items:flex-start;
  gap:14px;
}

#profilePage .pf-avatar-wrap{
  position:relative;
  flex:0 0 auto;
}

#profilePage .pf-avatar-ring{
  width:78px;
  height:78px;
  border-radius:50%;
  padding:3px;
  background:#fff;
  box-shadow:0 6px 14px rgba(0,0,0,.25);
}

#profilePage .pf-avatar-img{
  width:100%;
  height:100%;
  border-radius:50%;
  object-fit:cover;
  display:block;
  border:2px solid var(--yellow);
}

#profilePage .pf-vip-badge{
  position:absolute;
  left:50%;
  bottom:-8px;
  transform:translateX(-50%);
  padding:3px 10px;
  border-radius:999px;
  background:var(--yellow);
  color:var(--ink);
  font-size:9.5px;
  font-weight:600;
  white-space:nowrap;
  box-shadow:0 3px 8px rgba(0,0,0,.20);
}

#profilePage .pf-identity-text{
  flex:1;
  min-width:0;
  padding-top:6px;
  display:flex;
  flex-direction:column;
  gap:8px;
  color:#fff;
  font-size:13px;
}

#profilePage .pf-phone{
  color:#fff;
  font-size:14px;
  font-weight:600;
  letter-spacing:.2px;
}

#profilePage .pf-id-chip{
  display:inline-block;
  width:fit-content;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.18);
  color:#fff;
  font-size:10px;
  font-weight:400;
}

/* PROGRESS ROW */

#profilePage .pf-progress-row{
  width:100%;
  margin-top:0;
  display:flex;
  align-items:center;
  gap:8px;
}

#profilePage .pf-progress-track{
  flex:1;
  min-width:0;
  height:7px;
  border-radius:999px;
  background:rgba(255,255,255,.35);
  overflow:hidden;
}

#profilePage .pf-progress-fill{
  height:100%;
  border-radius:999px;
  background:var(--yellow);
}

#profilePage .pf-progress-text{
  font-size:9px;
  color:#fff;
  font-weight:500;
  white-space:nowrap;
}

/* =========================================================
   FLOATING STAT CARD — overlaps hero bottom, bold yellow
   ========================================================= */

#profilePage .pf-stats-card{
  position:relative;
  z-index:5;
  margin:-34px 16px 0;
  padding:16px 10px;
  display:grid;
  grid-template-columns:1fr 1px 1fr 1px 1fr;
  align-items:center;
  border-radius:18px;
  background:var(--yellow);
  box-shadow:0 14px 28px rgba(0,0,0,.16), 0 2px 6px rgba(0,0,0,.06);
  flex:0 0 auto;
}

#profilePage .pf-stat{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
}

#profilePage .pf-stat strong{
  color:var(--ink);
  font-size:15px;
  font-weight:700;
}

#profilePage .pf-stat span{
  color:rgba(17,17,17,.65);
  font-size:9.5px;
  font-weight:500;
}

#profilePage .pf-stat-divider{
  width:1px;
  height:26px;
  background:rgba(17,17,17,.14);
  justify-self:center;
}

/* =========================================================
   SCROLL CONTAINER + FLOATING LIST CARD
   ========================================================= */

#profilePage .profile-scroll-container{
  width:100%;
  max-width:430px;
  margin:0 auto;
  padding:16px 16px calc(74px + env(safe-area-inset-bottom,0px));
  flex:1;
  display:flex;
  flex-direction:column;
}

#profilePage .pf-menu-card{
  margin-top:auto;
  overflow:hidden;
  border-radius:18px;
  background:#fff;
  box-shadow:0 12px 26px rgba(0,0,0,.07), 0 2px 6px rgba(0,0,0,.04);
}

#profilePage .pf-list-item{
  min-height:56px;
  padding:12px 16px;
  display:flex;
  align-items:center;
  gap:14px;
  border-top:1px solid var(--line);
  cursor:pointer;
  transition:background .15s ease;
}

#profilePage .pf-list-item:first-child{ border-top:none; }

#profilePage .pf-list-item:active{ background:#FAFAFA; }

#profilePage .pf-list-icon{
  width:22px;
  flex:0 0 22px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--ink);
}

#profilePage .pf-list-content{
  flex:1;
  min-width:0;
}

#profilePage .pf-list-content strong{
  color:var(--ink);
  font-size:13.5px;
  font-weight:400;
}

#profilePage .pf-list-chevron{
  color:#C7C7C7;
  flex-shrink:0;
}

#profilePage .pf-icon-danger{ color:var(--danger); }
#profilePage .pf-logout-item .pf-list-content strong{ color:var(--danger); }

/* SMALL SCREENS */

@media(max-width:360px){
  #profilePage .pf-hero{ height:220px; }
  #profilePage .pf-avatar-ring{ width:70px; height:70px; }
  #profilePage .pf-phone{ font-size:13px; }
}




:root {
  --y: #D9A900;
  --ink: #111111;
  --ink-muted: rgba(17, 17, 17, 0.56);
  --ink-faint: rgba(17, 17, 17, 0.36);
  --ash: #F1F1F1;
  --line: #ECECEC;
  --white: #FFFFFF;
}

.bank-page {
  background: var(--white);
  min-height: 100vh;
  font-family: 'Inter', sans-serif;
  color: var(--ink);
  box-sizing: border-box;
}

/* ── FLAT HEADER — no banner, matching the screenshot ── */
.bank-flat-header {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  position: relative;
}

.bank-flat-back {
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  flex-shrink: 0;
}

.bank-flat-header h2 {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  pointer-events: none;
}

/* ── LANDING VIEW ── */
.bank-landing-body {
  max-width: 430px;
  margin: 0 auto;
  padding: 16px 16px 40px;
  box-sizing: border-box;
}

/* Empty state — box illustration + Add pill, matching the screenshot */
.bank-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 90px;
}

.bank-empty-box {
  width: 110px;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 40px;
  position: relative;
}

.bank-empty-box::before {
  content: "";
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 130px;
  height: 30px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(17,17,17,0.08) 0%, transparent 70%);
}

.bank-empty-box i {
  position: relative;
  font-size: 68px;
  color: #D8D8D8;
}

.bank-pill-btn {
  width: 100%;
  max-width: 260px;
  padding: 15px;
  border: none;
  border-radius: 999px;
  background: var(--ink);
  color: var(--white);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}

.bank-pill-btn:active { opacity: 0.85; }

/* Linked summary — shown once both channels are bound */
.bank-linked-summary {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bank-summary-card {
  background: var(--ash);
  border-radius: 14px;
  padding: 16px;
  box-sizing: border-box;
}

.bank-summary-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.bank-summary-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
}

.bank-summary-lock {
  color: var(--y);
  font-size: 12px;
}

.bank-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: 12.5px;
}

.bank-summary-row span {
  color: var(--ink-faint);
}

.bank-summary-row strong {
  color: var(--ink);
  font-weight: 700;
}

/* ── FORM VIEW ── */
.bank-form-body {
  max-width: 430px;
  margin: 0 auto;
  padding: 20px 16px 40px;
  box-sizing: border-box;
}

.bank-ash-box {
  background: var(--ash);
  border-radius: 14px;
  padding: 16px;
  box-sizing: border-box;
  margin-bottom: 20px;
}

.bank-field { margin-bottom: 16px; }
.bank-field:last-child { margin-bottom: 0; }

.bank-field label {
  display: block;
  font-size: 13px;
  color: var(--ink);
  margin-bottom: 8px;
}

.bank-field select,
.bank-field input {
  width: 100%;
  padding: 13px 14px;
  border: none;
  border-radius: 10px;
  background: #E2E2E2;
  color: var(--ink);
  font-size: 13.5px;
  font-family: inherit;
  box-sizing: border-box;
  outline: none;
  appearance: none;
}

.bank-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

.bank-field input::placeholder { color: var(--ink-faint); }

.bank-field select:focus,
.bank-field input:focus {
  box-shadow: 0 0 0 2px var(--y);
}

/* Locked read-only view */
.bank-locked-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 0;
  font-size: 13px;
  border-bottom: 1px dashed #E0E0E0;
}
.bank-locked-row:last-of-type { border-bottom: none; }

.bank-locked-row span { color: var(--ink-faint); }
.bank-locked-row strong { color: var(--ink); font-weight: 700; }

.bank-locked-note {
  margin: 10px 0 0;
  font-size: 11.5px;
  color: var(--ink-faint);
  display: flex;
  align-items: center;
  gap: 6px;
}
.bank-locked-note i { color: var(--y); }

/* Submit — solid black, full width */
.bank-submit-btn {
  width: 100%;
  padding: 15px;
  border: none;
  border-radius: 999px;
  background: var(--ink);
  color: var(--white);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}
.bank-submit-btn:active { opacity: 0.85; }

/* Switch account — small pill, bottom right */
.bank-switch-wrap {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}

.bank-switch-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border: none;
  border-radius: 999px;
  background: var(--y);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}
.bank-switch-pill i { font-size: 10px; }
.bank-switch-pill:active { opacity: 0.85; }

@media (max-width: 380px) {
  .bank-empty-state { padding-top: 70px; }
  .bank-empty-box { width: 90px; height: 90px; margin-bottom: 32px; }
  .bank-empty-box i { font-size: 56px; }
}


/* =========================================================
   RECHARGE — WHITE + DIM YELLOW + BLACK
   ========================================================= */

#rechargePage{
  --y:#D9A900;
  --y-soft:#FFF6DA;
  --ink:#111111;
  --muted:rgba(17,17,17,.56);
  --faint:rgba(17,17,17,.36);
  --line:#ECECEC;
  --warn:#E4572E;

  position:fixed;
  inset:0;
  width:100%;
  height:100vh;
  overflow-y:auto;
  overflow-x:hidden;
  background:#ffffff;
  color:var(--ink);
  z-index:500;
  font-family:inherit;
  box-sizing:border-box;
  -webkit-overflow-scrolling:touch;
}

#rechargePage *{box-sizing:border-box}

/* ── BANNER PHOTO HEADER — scrolls with content, controls overlaid ── */
#rechargePage .recharge-banner-photo{
  position:relative;
  width:100%;
  height:170px;
  overflow:hidden;
}

#rechargePage .recharge-banner-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

#rechargePage .recharge-back-btn-v2{
  position:absolute;
  top:14px;
  left:14px;
  z-index:2;
  width:32px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:none;
  border-radius:50%;
  background:rgba(17,17,17,.55);
  color:#ffffff;
  font-size:13px;
  cursor:pointer;
}

#rechargePage .recharge-banner-title{
  position:absolute;
  top:20px;
  left:0;
  right:0;
  z-index:1;
  margin:0;
  text-align:center;
  color:#ffffff;
  font-size:14px;
  font-weight:800;
  letter-spacing:1px;
  text-shadow:0 2px 6px rgba(0,0,0,.4);
}

#rechargePage .recharge-history-btn{
  position:absolute;
  top:14px;
  right:14px;
  z-index:2;
  width:32px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:none;
  border-radius:50%;
  background:rgba(17,17,17,.55);
  color:#ffffff;
  font-size:13px;
  cursor:pointer;
}


/* ── CONTAINER ── */
#rechargePage .recharge-page-container{
  width:100%;
  max-width:430px;
  margin:auto;
  padding:16px 14px calc(100px + env(safe-area-inset-bottom,0px));
  display:flex;
  flex-direction:column;
  gap:14px;
}


/* ── CARDS ── */
#rechargePage .rech-card{
  padding:14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#ffffff;
}

#rechargePage .rech-card-heading{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:12px;
}

#rechargePage .rech-heading-bar{
  width:4px;
  height:15px;
  border-radius:2px;
  background:var(--y);
  flex-shrink:0;
}

#rechargePage .rech-card-heading h3{
  margin:0;
  color:var(--ink);
  font-size:13.5px;
  font-weight:700;
}


/* ── AMOUNT INPUT ── */
#rechargePage .main-amount-input{
  height:48px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 14px;
  border:1.5px solid var(--line);
  border-radius:10px;
  background:#FAFAFA;
  margin-bottom:12px;
}

#rechargePage .main-amount-input:focus-within{
  border-color:var(--y);
  background:#ffffff;
}

#rechargePage .main-amount-currency{
  color:var(--faint);
  font-size:15px;
  font-weight:700;
}

#rechargePage #customAmount{
  width:100%;
  min-width:0;
  border:0;
  outline:0;
  background:transparent;
  color:var(--ink);
  font-size:14px;
  font-weight:700;
}

#rechargePage #customAmount::placeholder{ color:var(--faint); }

#rechargePage #customAmount::-webkit-inner-spin-button,
#rechargePage #customAmount::-webkit-outer-spin-button{
  -webkit-appearance:none;
}


/* ── QUICK AMOUNTS — 4 + 3 grid, matching the reference ── */
#rechargePage .quick-amount-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:7px;
  margin-bottom:12px;
}

#rechargePage .amount-option{
  height:38px;
  padding:0 2px;
  border:1.5px solid var(--line);
  border-radius:9px;
  background:#ffffff;
  color:var(--ink);
  font-size:11px;
  font-weight:600;
  cursor:pointer;
  transition:.15s ease;
}

#rechargePage .amount-option:hover{ border-color:var(--y); }

#rechargePage .amount-option.active,
#rechargePage .amount-option.selected{
  border-color:var(--ink);
  background:var(--y-soft);
  font-weight:800;
}

#rechargePage .rech-minimum-note{
  color:var(--warn);
  font-size:11px;
  font-weight:500;
  line-height:1.4;
}


/* ── PAYMENT CHANNELS ── */
#rechargePage .channel-select-list{
  display:flex;
  flex-direction:column;
  gap:9px;
}

#rechargePage .channel-card{
  position:relative;
  min-width:0;
  padding:12px 13px;
  display:flex;
  align-items:center;
  gap:11px;
  border:1.5px solid var(--y);
  border-radius:12px;
  background:#ffffff;
  cursor:pointer;
  transition:.15s ease;
}

#rechargePage .channel-card.selected{
  background:var(--y);
  border-color:var(--y);
}

#rechargePage .channel-card-icon{
  flex-shrink:0;
  width:32px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  background:var(--y-soft);
  color:var(--y);
  font-size:13px;
}

#rechargePage .channel-card.selected .channel-card-icon{
  background:rgba(255,255,255,.25);
  color:#ffffff;
}

#rechargePage .channel-card-info{
  flex:1;
  min-width:0;
}

#rechargePage .channel-card-name{
  color:var(--ink);
  font-size:13px;
  font-weight:700;
}

#rechargePage .channel-card.selected .channel-card-name{
  color:#ffffff;
}

#rechargePage .channel-card-radio{
  flex-shrink:0;
  width:18px;
  height:18px;
  display:flex;
  align-items:center;
  justify-content:center;
}

#rechargePage .channel-card-radio i{
  display:none;
  color:#ffffff;
  font-size:13px;
}

#rechargePage .channel-card.selected .channel-card-radio i{
  display:flex;
}


/* ── CONFIRM BUTTON — small, solid black, no blur/dimming ── */
#rechargePage .deposit-btn{
  width:100%;
  min-height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:0 16px;
  border:0;
  border-radius:10px;
  background:var(--ink);
  color:#ffffff;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
}

#rechargePage .deposit-btn:hover{ filter:brightness(1.1); }
#rechargePage .deposit-btn:active{ transform:scale(.98); }

/* Reference's disabled state looked washed-out/blurry — keep this
   solid and legible instead, regardless of disabled state */
#rechargePage .deposit-btn:disabled{
  opacity:1;
  cursor:not-allowed;
}

/* icon + arrow not shown in the reference button — hide even if JS
   re-injects them */
#rechargePage .deposit-btn-icon,
#rechargePage .deposit-arrow{
  display:none;
}


/* ── SUPPORT LINK ── */
#rechargePage .rech-support-line{
  text-align:center;
  font-size:12px;
}

#rechargePage .rech-support-link{
  color:var(--y);
  font-weight:700;
  text-decoration:none;
}


/* ── INSTRUCTIONS — plain numbered list, no card/icon styling ── */
#rechargePage .rech-info-box{
  padding:2px 2px 0;
}

#rechargePage .rech-info-icon{ display:none; }
#rechargePage .rech-info-title{ display:none; }

#rechargePage .rech-instruction-row{
  display:flex;
  gap:6px;
  margin-bottom:10px;
}

#rechargePage .rech-instruction-row:last-child{ margin-bottom:0; }

#rechargePage .rech-instruction-row span{
  flex-shrink:0;
  color:var(--ink);
  font-size:11.5px;
  font-weight:700;
}

#rechargePage .rech-instruction-row p{
  margin:0;
  color:var(--muted);
  font-size:11.5px;
  line-height:1.55;
}


/* ── HIDDEN COMPATIBILITY ── */
#rechargePage #manualTransferCard,
#rechargePage #rechargeRulesBox,
#rechargePage .rech-balance-card{
  display:none!important;
}


/* ── SCROLLBAR ── */
#rechargePage::-webkit-scrollbar{ width:3px }
#rechargePage::-webkit-scrollbar-thumb{
  background:rgba(217,169,0,.35);
  border-radius:99px;
}


/* ── SMALL PHONES ── */
@media(max-width:360px){
  #rechargePage .recharge-page-container{ padding-left:11px; padding-right:11px; }
  #rechargePage .rech-card{ padding:12px; }
  #rechargePage .quick-amount-grid{ gap:5px; }
  #rechargePage .amount-option{ font-size:10px; height:36px; }
  #rechargePage .channel-card{ padding:10px 11px; gap:9px; }
  #rechargePage .recharge-banner-photo{ height:150px; }
}


/* =========================================================
   PAYMENT LOADER — small, dim yellow / black / white
   ========================================================= */

.gle-payment-loader-popup{
  width:min(260px, calc(100vw - 60px)) !important;
  padding:0 !important;
  border-radius:20px !important;
  overflow:hidden !important;
  background:#ffffff !important;
  border:1px solid #ECECEC !important;
  box-shadow:0 20px 50px rgba(17,17,17,.22) !important;
}

.gle-payment-loader{
  padding:26px 20px 20px;
  text-align:center;
  color:#111111;
}

.gle-loader-brand{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin-bottom:18px;
  color:rgba(17,17,17,.4);
  font-size:8.5px;
  font-weight:700;
  letter-spacing:1px;
}

.gle-loader-brand-dot{
  width:4px;
  height:4px;
  border-radius:50%;
  background:#D9A900;
}

.gle-loader-orbit{
  width:62px;
  height:62px;
  margin:0 auto 16px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}

.gle-loader-orbit::before{
  content:"";
  position:absolute;
  inset:3px;
  border-radius:50%;
  border:1px solid #F2E7BF;
}

.gle-loader-orbit::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  border:2px solid transparent;
  border-top-color:#D9A900;
  border-right-color:#D9A900;
  animation:recharge-loader-spin 1s linear infinite;
}

.gle-loader-core{
  width:38px;
  height:38px;
  border-radius:50%;
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#111111;
}

.gle-loader-core-icon{
  color:#D9A900;
  font-size:13px;
}

.gle-loader-title{
  margin:0 0 5px;
  color:#111111;
  font-size:14px;
  font-weight:800;
}

.gle-loader-subtitle{
  max-width:210px;
  margin:0 auto;
  color:rgba(17,17,17,.55);
  font-size:10.5px;
  line-height:1.5;
}

.gle-loader-dots{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  margin-top:14px;
}

.gle-loader-dots span{
  width:5px;
  height:5px;
  border-radius:50%;
  background:#D9A900;
  animation:recharge-loader-dot 1.2s ease-in-out infinite;
}

.gle-loader-dots span:nth-child(2){ animation-delay:.15s; }
.gle-loader-dots span:nth-child(3){ animation-delay:.3s; }

.gle-loader-security{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  margin-top:16px;
  padding-top:12px;
  border-top:1px solid #F1F1F1;
  color:rgba(17,17,17,.4);
  font-size:9px;
}

.gle-loader-security i{ color:#D9A900; font-size:9px; }

@keyframes recharge-loader-spin{
  to{ transform:rotate(360deg); }
}

@keyframes recharge-loader-dot{
  0%,70%,100%{ opacity:.3; transform:translateY(0); }
  35%{ opacity:1; transform:translateY(-2px); }
}



:root {
  --brand-yellow: #FFD400;
  --ink: #111111;
  --ink-soft: #2A2A2A;
  --white: #FFFFFF;
  --stripe: #FFF6D1;   /* pale yellow tint for alternating rows */
}

.popup-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(17, 17, 17, 0.55);
  backdrop-filter: blur(2px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 999998;
  box-sizing: border-box;
  padding: 20px;
}

/* ── CARD ── */
.mx-unique-modal {
  position: relative;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  box-sizing: border-box;
  animation: mx-pop-in 0.25s ease-out;
}

.mx-modal-inner {
  border-radius: 22px;
  padding: 0 0 18px;
  max-height: 90vh;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--white);
  box-shadow: 0 24px 60px rgba(17, 17, 17, 0.28);
}

@keyframes mx-pop-in {
  from { transform: scale(0.92); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

/* ── CLOSE-X, SITTING ON THE CORNER LIKE THE FANTA MODAL ── */
.mx-close-x-btn {
  position: absolute;
  top: -14px; right: -14px;
  z-index: 3;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--ink);
  border: 3px solid var(--white);
  cursor: pointer;
  color: var(--white);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(17, 17, 17, 0.4);
  transition: transform 0.15s;
}
.mx-close-x-btn:active { transform: scale(0.92); }

/* ── BANNER HEADER — image fills the whole rectangle, edge-to-edge ── */
.mx-logo-wrap {
  position: relative;
  width: 100%;
  height: 120px;
  border-radius: 22px 22px 0 0;
  overflow: hidden;
  margin: 0 0 18px;
  background: var(--brand-yellow);
}

.mx-logo-img {
  width: 100%;
  height: 100%;
  border-radius: 0;
  object-fit: cover;
  display: block;
  border: none;
  box-shadow: none;
}

.mx-welcome-title {
  font-size: 19px;
  font-weight: 800;
  color: var(--ink);
  text-align: center;
  margin: 0 0 14px;
  letter-spacing: -0.2px;
  padding: 0 20px;
}

/* ── SINGLE-COLUMN LIST, ALTERNATING STRIPES — like the Fanta modal ── */
.mx-bullet-list {
  display: flex;
  flex-direction: column;
  margin-bottom: 18px;
}

.mx-bullet-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  background: var(--white);
}

.mx-bullet-row:nth-child(even) {
  background: var(--stripe);
}

.mx-bullet-row--last {
  background: var(--white);
}

.mx-bullet-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  font-size: 15px;
}

.mx-bullet-icon--check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--brand-yellow);
  font-size: 11px;
}

.mx-bullet-text {
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-soft);
  margin: 0;
}

.mx-bullet-text strong {
  color: var(--ink);
  font-weight: 700;
}

/* ── BUTTONS — uniform solid pills, same as the Fanta modal's two identical pills ── */
.mx-action-btn {
  width: calc(100% - 40px);
  margin: 8px 20px 0;
  padding: 13px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  transition: transform 0.15s, filter 0.2s;
  font-family: inherit;
  border: none;
}

.mx-action-btn--primary {
  color: var(--brand-yellow);
  background: var(--ink);
  box-shadow: 0 10px 20px -6px rgba(17, 17, 17, 0.4);
}

.mx-action-btn--primary:hover { filter: brightness(1.15); }

.mx-action-btn--secondary {
  color: var(--ink);
  background: var(--brand-yellow);
  box-shadow: 0 10px 20px -6px rgba(255, 212, 0, 0.5);
}

.mx-action-btn--secondary:hover { filter: brightness(1.05); }

.mx-btn-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  flex-shrink: 0;
  color: inherit;
}

.mx-btn-icon--dark {
  background: rgba(17, 17, 17, 0.12);
}

.mx-action-btn:active { transform: scale(0.97); }

@media (max-width: 380px) {
  .mx-welcome-title { font-size: 18px; }
}
#welcomePopup {
  display: none; /* Changed from none to flex for visibility during testing */
}



.ft-alert-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(11, 15, 25, 0.55);
  backdrop-filter: blur(2px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 999999;
  padding: 20px;
  box-sizing: border-box;
}

.ft-alert-overlay.show {
  display: flex;
}

.ft-alert-card {
  width: 100%;
  max-width: 340px;
  background: #ffffff;
  border-radius: 20px;
  padding: 28px 22px 22px;
  text-align: center;
  box-shadow: 0 24px 60px rgba(17, 17, 17, 0.18);
  animation: ft-alert-pop 0.2s ease-out;
  font-family: 'Inter', sans-serif;
}

@keyframes ft-alert-pop {
  from { transform: scale(0.94); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

.ft-alert-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

.ft-alert-icon.warning { background: #fff7e6; color: #d99a06; }
.ft-alert-icon.error   { background: #fdecec; color: #e5484d; }
.ft-alert-icon.success { background: #eaf6ec; color: #1a9c4a; }
.ft-alert-icon.info    { background: #FFF6DA; color: #D9A900; }

.ft-alert-title {
  font-size: 16px;
  font-weight: 800;
  color: #111111;
  margin: 0 0 8px;
}

.ft-alert-text {
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(17, 17, 17, 0.56);
  margin: 0 0 20px;
}

/* review details block (used by ftConfirm's `html` option) */
.ft-alert-html {
  text-align: left;
  font-size: 13.5px;
  line-height: 1.7;
  color: #111111;
  margin: -10px 0 20px;
}

/* side-by-side confirm/cancel layout */
.ft-alert-btn-row {
  display: flex;
  gap: 10px;
}

.ft-alert-btn-row .ft-alert-btn {
  flex: 1;
  margin: 0; /* was width:100% standalone before, now shares the row */
}

.ft-alert-btn {
  border: none;
  background: #D9A900;
  color: #111111;
  font-weight: 700;
  font-size: 14px;
  padding: 12px;
  border-radius: 12px;
  cursor: pointer;
  font-family: inherit;
}

/* neutral cancel styling, sits next to the confirm button */
.ft-alert-btn-cancel {
  background: #F1F1F1;
  color: #111111;
}

.ft-alert-btn:active { transform: scale(0.98); }

.referral-promo-card {
  background: #ffffff;
  border-radius: 18px;
  padding: 16px 18px;
  border: 1px solid #e7edfb;
  box-shadow: 0 8px 24px rgba(3, 87, 238, 0.08);
  max-width: 500px;
  
  /* 🌟 CHANGE THIS LINE: Adds negative top margin to shift it up, and pushes the bottom up */
  margin: -20px auto 35px auto; 
  
  box-sizing: border-box;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.referral-promo-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(3, 87, 238, 0.16);
}

.referral-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 15px;
}

.referral-text-col { flex: 1; }

.referral-eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: #0357EE;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.referral-headline {
  font-size: 21px;
  font-weight: 800;
  color: #0b1220;
  margin: 0 0 4px 0;
  letter-spacing: -0.3px;
}

.referral-subtext {
  font-size: 12px;
  color: #64748b;
  margin: 0;
}

.referral-icon-badge {
  width: 42px;
  height: 42px;
  background: #eaf0fe;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  color: #0357EE;
  flex-shrink: 0;
  border: 1px solid #d7e3fb;
}

.referral-pills-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.referral-pill {
  font-size: 11.5px;
  font-weight: 700;
  padding: 6px 13px;
  border-radius: 30px;
  white-space: nowrap;
}

.referral-pill.green {
  background: #e8f8ef;
  color: #16a34a;
  border: 1px solid #c8ede0;
}

.referral-pill.amber {
  background: #fff6e6;
  color: #b45309;
  border: 1px solid #fbe3b0;
}

.referral-cta-btn {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 13px;
  background: #0357EE;
  color: #ffffff;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 8px 18px rgba(3, 87, 238, 0.25);
  transition: background 0.2s, transform 0.15s;
}

.referral-cta-btn:hover {
  background: #0241b8;
}

.referral-cta-btn:active {
  transform: scale(0.97);
}

@media (max-width: 380px) {
  .referral-headline { font-size: 19px; }
  .referral-icon-badge { width: 38px; height: 38px; border-radius: 10px; font-size: 15px; }
}


/* DAILY LOADER OVERLAY */
.daily-loader{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.55);
  display:none;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  z-index:9999;
}

/* 3D SPINNER */
.spinner-3d{
  width:60px;
  height:60px;
  border:6px solid rgba(255,255,255,0.2);
  border-top:6px solid #00c2ff;
  border-radius:50%;
  animation:spin3d 1s linear infinite;
  margin-bottom:15px;
}

@keyframes spin3d{
  0%{transform:rotate(0deg);}
  100%{transform:rotate(360deg);}
}

.daily-loader p{
  color:white;
  font-weight:600;
  font-size:16px;
}


/* ===== PRODUCT PAGE ===== */
.product-page {
  width: 100%;
  padding: 20px;
  padding-bottom: 80px;
  padding-top: 65px; /* space for fixed header */
  background: #ffffff; /* white background */
  min-height: 100vh;
  color: #ffffff;      /* white text */
  display: none;       /* show when active */
}

/* ===== FIXED HEADER ===== */
.product-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #1e40ff; /* blue header */
  padding: 12px 0;
  z-index: 1000;
  text-align: center;
  font-size: 22px;
  font-weight: bold;
  color: #ffffff;      /* white text */
  box-shadow: 0 3px 8px rgba(30, 64, 255, 0.2); /* subtle blue shadow */
}

.product-header i {
  margin-right: 8px;
  color: #ffffff; /* white icon */
}

/* ===== PREMIUM PRODUCT CARD - REDESIGNED ===== */
.premium-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 0;
  margin-top: -12px;
  margin-bottom: 16px;
  border: 1px solid #ede9f6;
  box-shadow: 0 4px 18px rgba(75, 0, 130, 0.07);
  width: 100%;
  max-width: 500px;
  box-sizing: border-box;
  overflow: hidden;
}

/* ── TOP STRIP ── */
.inv-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: linear-gradient(135deg, #4b0082, #9d4edd);
}

.inv-vip-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  font-family: 'Poppins', sans-serif;
}

.inv-vip-badge i {
  color: #e9d5ff;
  font-size: 14px;
}

.inv-days-pill {
  background: rgba(255,255,255,0.2);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,0.3);
}

/* ── BODY: IMAGE + STATS GRID ── */
.inv-card-body {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
}

.inv-product-img {
  width: 85px;
  height: 85px;
  min-width: 85px;
  border-radius: 12px;
  background: #f5f0ff;
  border: 1px solid #ede9f6;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.inv-product-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.inv-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  flex: 1;
}

.inv-stat-box {
  background: #faf7ff;
  border-radius: 10px;
  padding: 9px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  border: 1px solid #ede9f6;
}

.inv-stat-label {
  font-size: 10px;
  color: #94a3b8;
  font-weight: 600;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 4px;
}

.inv-stat-label i {
  color: #9d4edd;
  font-size: 9px;
}

.inv-stat-val {
  font-size: 13px;
  font-weight: 700;
  color: #9d4edd;
}

.inv-stat-val.dark {
  color: #0f172a;
}

.inv-stat-val.green {
  color: #16a34a;
}

/* ── FOOTER: DATE + PROGRESS BAR ── */
.inv-card-footer {
  padding: 0 16px 14px 16px;
  border-top: 1px solid #f3eeff;
  padding-top: 12px;
}

.inv-date-range {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: #7c3aed;
  font-weight: 600;
  margin-bottom: 8px;
}

.inv-date-range i {
  color: #9d4edd;
}

.inv-progress-bar-wrap {
  width: 100%;
  height: 6px;
  background: #ede9f6;
  border-radius: 99px;
  overflow: hidden;
}

.inv-progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #4b0082, #9d4edd);
  border-radius: 99px;
  transition: width 0.5s ease;
}

/* ── COUNTDOWN ROW ── */
.inv-countdown-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: #faf7ff;
  border-top: 1px solid #f3eeff;
}

.inv-next-label {
  color: #94a3b8;
  font-size: 12px;
  font-weight: 500;
}

.inv-countdown-timer {
  font-family: monospace;
  font-weight: 700;
  color: #4b0082;
  font-size: 13px;
  letter-spacing: 1px;
}

/* ── MOBILE ── */
@media (max-width: 480px) {
  .inv-product-img {
    width: 72px;
    height: 72px;
    min-width: 72px;
  }
  .inv-stat-val {
    font-size: 12px;
  }
}



:root {
  --brand-yellow-dim: #D9A900;
  --brand-yellow-soft: #FFF6DA;
  --ink: #111111;
  --ink-muted: rgba(17, 17, 17, 0.6);
  --white: #FFFFFF;
  --line: #ECECEC;
}

.invite-page {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  z-index: 999;
  display: none;
  flex-direction: column;
  box-sizing: border-box;
  background: var(--white);
  color: var(--ink);
  padding-bottom: 40px;
}

/* ── CONTAINER ── */
.referral-container {
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
  padding: 0 0 32px 0;
  box-sizing: border-box;
}
.invite-header-fixed-v2 {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.invite-back-btn-v2 {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.invite-header-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.invite-header-title h2 {
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
  margin: 0;
}

.invite-header-icon {
  color: var(--brand-yellow-dim);
  font-size: 15px;
}

.invite-header-spacer {
  width: 32px;
}

/* ── CONTAINER ── */
.referral-container {
  padding: 0 0 32px 0;
  box-sizing: border-box;
}

/* ── TOP BANNER PHOTO ── */
.invite-banner-photo {
  position: relative;
  width: 100%;
  height: 190px;
  overflow: hidden;
}

.invite-banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.invite-banner-label {
  position: absolute;
  left: 16px;
  bottom: 14px;
  color: var(--white);
  font-size: 22px;
  font-weight: 800;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* ── SECTION HEADING ── */
.invite-section-heading {
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin: 18px 16px 14px;
}

/* ── LEVEL CARDS ── */
.invite-level-row {
  display: flex;
  justify-content: center;
  gap: 28px;
  padding: 0 16px 18px;
}

.invite-level-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1;
  max-width: 140px;
}

.invite-level-badge {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1.5px solid var(--brand-yellow-dim);
  color: var(--brand-yellow-dim);
  font-weight: 800;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
  position: relative;
}

.invite-level-badge::before {
  content: "";
  position: absolute;
  top: 14px;
  width: 18px;
  height: 1.5px;
  background: var(--brand-yellow-dim);
}

.invite-level-stat {
  font-size: 11.5px;
  color: var(--ink-muted);
  text-align: center;
}

/* ── TASK CENTER / TEAM RECORDS ── */
.invite-action-row {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 0 16px 20px;
}

.invite-task-btn,
.invite-records-btn {
  flex: 1;
  max-width: 170px;
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: inherit;
}

.invite-task-btn {
  background: var(--brand-yellow-dim);
  color: var(--ink);
  border: none;
}

.invite-records-btn {
  background: var(--white);
  color: var(--ink);
  border: 1.5px solid var(--brand-yellow-dim);
}

.invite-task-btn i,
.invite-records-btn i {
  font-size: 10px;
}

/* ── START INVITING CARD ── */
.invite-tools-card {
  background: var(--white);
  margin: 0 16px 16px;
  border-radius: 16px;
  padding: 16px;
  box-sizing: border-box;
  box-shadow: 0 4px 16px rgba(17, 17, 17, 0.06);
}

.invite-tools-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.invite-tools-image {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--brand-yellow-soft);
}

.invite-tools-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.invite-tools-heading h4 {
  font-size: 14.5px;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 3px;
}

.invite-tools-heading p {
  font-size: 12px;
  color: var(--ink-muted);
  margin: 0;
}

.invite-field-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.invite-field-row:last-child { margin-bottom: 0; }

.invite-field-pill {
  flex: 1;
  min-width: 0;
  border: 1.5px solid var(--brand-yellow-dim);
  border-radius: 999px;
  padding: 9px 16px;
  color: var(--brand-yellow-dim);
  font-weight: 700;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.invite-field-link input {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  color: var(--brand-yellow-dim);
  font-weight: 700;
  font-size: 13px;
  font-family: inherit;
}

.invite-copy-btn {
  flex-shrink: 0;
  background: var(--brand-yellow-dim);
  color: var(--ink);
  border: none;
  border-radius: 999px;
  padding: 9px 18px;
  font-weight: 800;
  font-size: 12.5px;
  cursor: pointer;
  font-family: inherit;
}

/* ── MY PROGRESS PANEL ── */
.invite-progress-panel {
  background: var(--brand-yellow-dim);
  margin: 0 0 16px;
  padding: 22px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-sizing: border-box;
}

.invite-progress-text h3 {
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 12px;
}

.invite-progress-stat {
  margin-bottom: 8px;
}

.invite-progress-num {
  display: block;
  font-size: 20px;
  font-weight: 800;
  color: var(--ink);
}

.invite-progress-link {
  font-size: 12px;
  color: rgba(17, 17, 17, 0.75);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.invite-progress-link i { font-size: 9px; }

.invite-progress-image {
  flex-shrink: 0;
  width: 120px;
  height: 100px;
  border-radius: 12px;
  overflow: hidden;
}

.invite-progress-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── INVITATION RULE ── */
.invite-rule-card {
  margin: 0 16px;
  padding: 0 2px;
}

.invite-rule-card p {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-muted);
  margin: 0 0 10px;
}

.invite-rule-card strong {
  color: var(--ink);
  font-weight: 800;
}

@media (max-width: 380px) {
  .invite-progress-image { width: 96px; height: 84px; }
  .invite-level-row { gap: 16px; }
}



/* =========================================================
   TEAM PAGE — WHITE + YELLOW + BLACK
   ========================================================= */

:root {
  --team-yellow: #FFD400;
  --team-yellow-dim: #D9A900;
  --team-ink: #111111;
  --team-muted: #6B6B6B;
  --team-faint: #9A9A9A;
  --team-line: #ECECEC;
  --team-bg: #F6F6F6;
  --team-green: #16A34A;
  --team-red: #E11D48;
}

#earningsPage {
  position: relative;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 100vh;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--team-bg);
  color: var(--team-ink);
  font-family: 'Inter', sans-serif;
  box-sizing: border-box;
  overflow-x: hidden;
}
#earningsPage * { box-sizing: border-box; }

/* =========================================================
   HEADER
   ========================================================= */

.team-header-main {
  position: sticky;
  top: 0;
  z-index: 20;
  width: 100%;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  background: var(--team-yellow);
}

.team-header-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

.team-header-kicker {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 1.4px;
  color: rgba(17,17,17,.55);
}

.team-header-center > span:last-child {
  font-size: 15px;
  font-weight: 700;
  color: var(--team-ink);
}

.back-btn-white {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(17,17,17,.12);
  color: var(--team-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .15s ease;
}
.back-btn-white:active { transform: translateY(-50%) scale(.92); }

.team-header-mark {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(17,17,17,.12);
  color: var(--team-ink);
}

/* =========================================================
   CONTAINER
   ========================================================= */

.team-page-container {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: 0 0 130px;
  box-sizing: border-box;
}

/* =========================================================
   HERO IMAGE BANNER
   ========================================================= */

.team-hero-image {
  position: relative;
  width: 100%;
  height: 260px;
  overflow: hidden;
}
.team-hero-image-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.team-hero-image-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(17,17,17,0) 55%, var(--team-bg) 100%);
}

/* =========================================================
   DASHBOARD STATS — Team size = black/white, Deposit = dim yellow
   ========================================================= */

.team-stats-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: -34px 15px 18px;
  position: relative;
  z-index: 2;
}

.team-stat-box {
  min-height: 74px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  box-shadow: 0 10px 22px -12px rgba(0,0,0,.25);
}

.team-stat-box-label {
  font-size: 11px;
  font-weight: 500;
}

.team-stat-box strong {
  font-size: 18px;
  font-weight: 700;
}

.team-stat-deposit {
  background: var(--team-yellow-dim);
  color: var(--team-ink);
}
.team-stat-deposit .team-stat-box-label { color: rgba(17,17,17,.65); }

.team-stat-size {
  background: var(--team-ink);
  color: #ffffff;
}
.team-stat-size .team-stat-box-label { color: rgba(255,255,255,.65); }

/* =========================================================
   LEVEL SWITCHER
   ========================================================= */

   .team-level-switcher {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0 15px 18px;
}

.team-tab-btn {
  min-height: 54px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 1.5px solid var(--team-line);
  border-radius: 14px;
  background: #ffffff;
  color: var(--team-ink);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: .15s ease;
}

.team-tab-sub {
  font-size: 9.5px;
  font-weight: 500;
  color: var(--team-muted);
}

.team-tab-btn.active {
  background: var(--team-yellow);
  border-color: var(--team-yellow-dim);
  color: var(--team-ink);
}
.team-tab-btn.active .team-tab-sub { color: rgba(17,17,17,.65); }

.team-tab-btn:active { transform: scale(.98); }

/* =========================================================
   TEAM LIST
   ========================================================= */

.team-list-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 15px;
}

/* =========================================================
   MEMBER CARD — matches reference: logo left, status badge,
   deposit/withdraw row, timestamp
   ========================================================= */

.team-list-row {
  position: relative;
  padding: 14px 15px;
  background: #ffffff;
  border: 1px solid var(--team-line);
  border-radius: 16px;
  box-shadow: 0 6px 16px -12px rgba(0,0,0,.18);
}

.team-list-row-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.team-member-avatar {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  overflow: hidden;
  border: 1.5px solid var(--team-line);
}
.team-member-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.team-member-info {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.team-list-number-row {
  display: flex;
  align-items: baseline;
  gap: 5px;
  min-width: 0;
}
.team-list-number-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--team-ink);
}
.team-list-number {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--team-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.team-status-badge {
  flex-shrink: 0;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
}
.team-status-purchased {
  background: rgba(22,163,74,.12);
  color: var(--team-green);
}
.team-status-inactive {
  background: rgba(225,29,72,.10);
  color: var(--team-red);
}

.team-list-row-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
  border-top: 1px solid var(--team-line);
}

.team-row-figures {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  font-weight: 600;
}
.team-row-figures span { color: var(--team-muted); font-weight: 500; }
.team-deposit-value { color: var(--team-green); }
.team-withdraw-value { color: var(--team-red); }

.team-row-time {
  font-size: 10.5px;
  color: var(--team-faint);
}

/* =========================================================
   EMPTY / LOADING / ERROR STATES
   ========================================================= */

.team-list-empty-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 40px 22px;
  background: #ffffff;
  border: 1px solid var(--team-line);
  border-radius: 18px;
}

.team-list-empty-icon {
  width: 56px;
  height: 56px;
  margin-bottom: 14px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--team-yellow);
  color: var(--team-ink);
  font-size: 20px;
}

.team-error-state .team-list-empty-icon {
  background: #FDEBEC;
  color: var(--team-red);
}

.team-list-empty-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--team-ink);
  margin: 0 0 6px;
}

.team-list-empty-sub {
  font-size: 11.5px;
  color: var(--team-muted);
  line-height: 1.55;
  max-width: 250px;
  margin: 0;
}

.team-loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 46px 0;
  color: var(--team-muted);
  font-size: 12px;
  font-weight: 600;
}

.team-loading-icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--team-yellow);
  color: var(--team-ink);
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 380px) {
  .team-hero-image { height: 220px; }
  .team-stats-row { margin: -28px 12px 16px; }
  .team-stat-box { min-height: 66px; }
  .team-stat-box strong { font-size: 16px; }
  .team-level-switcher { margin: 0 12px 16px; gap: 6px; }
  .team-tab-btn { min-height: 50px; font-size: 12px; }
  .team-list-rows { padding: 0 12px; }
  .team-member-avatar { width: 40px; height: 40px; }
}

/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 700px) {
  .team-page-container { max-width: 560px; }
  .team-hero-image { height: 300px; }
}


/* ============ WITHDRAWAL — WHITE + YELLOW + BLACK ============ */
:root{
  --wd-yellow:#FFD400;
  --wd-yellow-dim:#D9A900;
  --wd-ink:#111111;
  --wd-muted:#6B6B6B;
  --wd-faint:#9A9A9A;
  --wd-line:#E6E6E6;
  --wd-bg:#F6F6F6;
}

.withdraw-page{
  position:relative;
  min-height:100vh;
  width:100%;
  background:var(--wd-bg);
  color:var(--wd-ink);
  font-family:'Inter',sans-serif;
  overflow-x:hidden;
  box-sizing:border-box;
  padding-bottom:40px;
}
.withdraw-page *{ box-sizing:border-box; }

/* HERO */
.wd-hero{
  position:relative;
  height:220px;
  overflow:hidden;
  background:#111;
}
.wd-hero-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.wd-hero-back{
  position:absolute;
  top:14px;
  left:14px;
  z-index:2;
  width:32px;
  height:32px;
  border-radius:50%;
  border:none;
  background:rgba(255,255,255,.85);
  color:var(--wd-ink);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.wd-hero-title{
  position:absolute;
  top:20px;
  left:0;
  right:0;
  z-index:2;
  text-align:center;
  color:#fff;
  font-size:13px;
  font-weight:700;
  letter-spacing:1.4px;
}
.wd-hero-records{
  position:absolute;
  top:14px;
  right:14px;
  z-index:2;
  width:32px;
  height:32px;
  border-radius:9px;
  border:none;
  background:rgba(255,255,255,.85);
  color:var(--wd-ink);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

/* CONTAINER */
.wd-container{
  width:100%;
  max-width:480px;
  margin:0 auto;
  padding:16px 14px 0;
  display:flex;
  flex-direction:column;
  gap:14px;
}

/* CARD */
.wd-card{
  background:#fff;
  border:1px solid var(--wd-line);
  border-radius:14px;
  padding:16px;
}

.wd-card-heading{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  font-weight:600;
  color:var(--wd-ink);
  margin-bottom:12px;
}
.wd-heading-bar{
  width:3px;
  height:14px;
  border-radius:2px;
  background:var(--wd-yellow-dim);
  flex-shrink:0;
}

/* BALANCE */
.wd-balance-amount{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:6px;
  padding:14px 0 10px;
  color:var(--wd-ink);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:26px;
  font-weight:700;
}
.wd-balance-amount .wd-currency{
  font-size:17px;
  font-weight:600;
  color:var(--wd-muted);
}

/* ACCOUNT CHANNEL CARDS */
.wd-account-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
}
.wd-account-item{
  position:relative;
  min-width:0;
  min-height:104px;
  padding:12px;
  border-radius:12px;
  background:#fff;
  border:1.5px solid var(--wd-line);
  cursor:pointer;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  transition:.15s;
}
.wd-account-item:hover{ border-color:var(--wd-yellow-dim); }
.wd-account-item.selected{
  background:#FFFDF5;
  border-color:var(--wd-yellow-dim);
}
.wd-account-item:active{ transform:scale(.98); }
.wd-account-logo{
  width:26px;
  height:26px;
  border-radius:7px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--wd-ink);
  background:var(--wd-yellow);
}
.wd-account-content{
  display:flex;
  flex-direction:column;
  min-width:0;
  margin-top:8px;
}
.wd-account-label{
  font-size:8px;
  font-weight:700;
  letter-spacing:1px;
  color:var(--wd-yellow-dim);
  margin-bottom:3px;
}
.wd-channel-name{
  color:var(--wd-ink);
  font-size:10.5px;
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.wd-channel-sub{
  color:var(--wd-faint);
  font-size:8.5px;
  margin-top:3px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.wd-account-check{
  position:absolute;
  top:10px;
  right:10px;
  width:17px;
  height:17px;
  border-radius:50%;
  border:1px solid var(--wd-line);
  display:flex;
  align-items:center;
  justify-content:center;
  color:transparent;
  background:#fff;
}
.wd-account-item.selected .wd-account-check{
  background:var(--wd-ink);
  border-color:var(--wd-ink);
  color:var(--wd-yellow);
}
.wd-channel-note{
  margin:9px 2px 0;
  color:var(--wd-faint);
  font-size:9.5px;
  line-height:1.45;
}

/* AMOUNT INPUT */
.wd-amount-input{
  display:flex;
  align-items:center;
  gap:8px;
  height:46px;
  padding:0 12px;
  border-radius:10px;
  border:1.5px solid var(--wd-line);
  background:#FAFAFA;
  margin-bottom:10px;
}
.wd-amount-input:focus-within{
  border-color:var(--wd-yellow-dim);
  background:#fff;
}
.wd-currency{
  color:var(--wd-faint);
  font-size:15px;
  font-weight:600;
}
.wd-input{
  flex:1;
  min-width:0;
  border:0;
  outline:0;
  background:transparent;
  font-family:inherit;
  font-size:13px;
  font-weight:500;
  color:var(--wd-ink);
}
.wd-input::placeholder{ color:var(--wd-faint); }

.wd-amount-meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:var(--wd-muted);
  font-size:10.5px;
}
.wd-amount-meta strong{
  color:var(--wd-ink);
  font-weight:700;
}

/* SUMMARY */
.wd-summary-grid{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
}
.wd-summary-item{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.wd-summary-item > span{ color:var(--wd-faint); font-size:9.5px; }
.wd-summary-item strong{
  color:var(--wd-ink);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:15px;
  font-weight:700;
}
.wd-summary-item small{ color:var(--wd-faint); font-size:8.5px; }
.wd-summary-receive{ text-align:right; }
.wd-summary-receive strong{ color:var(--wd-yellow-dim); }
.wd-summary-divider{
  width:1px;
  height:36px;
  background:var(--wd-line);
  margin:0 16px;
}

/* CONFIRM — solid black, not blur/dim */
.wd-action{ padding:4px 0; }
.wd-confirm-btn{
  width:100%;
  height:48px;
  border:none;
  border-radius:24px;
  background:var(--wd-ink);
  color:#fff;
  font-family:inherit;
  font-size:13.5px;
  font-weight:700;
  cursor:pointer;
  opacity:1;
  transition:.15s;
}
.wd-confirm-btn:hover{ background:#000; }
.wd-confirm-btn:active{ transform:scale(.98); }
.wd-confirm-btn:disabled{
  background:var(--wd-ink);
  color:#fff;
  opacity:.5;
  cursor:not-allowed;
}

/* INSTRUCTIONS */
.wd-instructions{
  margin:4px 0 0;
  padding-left:18px;
  display:flex;
  flex-direction:column;
  gap:8px;
  color:var(--wd-muted);
  font-size:11px;
  line-height:1.5;
}
.wd-instructions li{ padding-left:2px; }

/* MOBILE */
@media (max-width:390px){
  .wd-hero{ height:190px; }
  .wd-container{ padding:14px 12px 0; gap:12px; }
  .wd-card{ padding:13px; }
  .wd-balance-amount{ font-size:23px; }
  .wd-account-item{ min-height:98px; padding:10px; }
  .wd-amount-input{ height:44px; }
}

@media (min-width:700px){
  .wd-container{ max-width:520px; padding-top:22px; }
  .wd-hero{ height:250px; }
}





:root {
  --ink: #111111;
  --ink-muted: rgba(17, 17, 17, 0.55);
  --ink-faint: rgba(17, 17, 17, 0.4);
  --line: #ECECEC;
  --card-ash: #F1F1F1;

  --in: #16A34A;
  --out: #E11D48;
  --pending: #B45309;
}

.bank-page {
  position: relative;
  background: #ffffff;
  min-height: 100vh;
  width: 100%;
  font-family: 'Inter', sans-serif;
  color: var(--ink);
  box-sizing: border-box;
  overflow-x: hidden;
}

/* ── HEADER — plain, no blur/dot texture ── */
.records-hero {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #ffffff;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  box-sizing: border-box;
}

.records-hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.records-back-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

.records-hero-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
  text-align: center;
}

/* ── CONTENT ── */
.records-content-container {
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
  padding: 16px 14px 100px 14px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

/* Not shown in the reference — hidden but kept for compatibility */
.records-total-banner,
.records-torn-edge {
  display: none;
}

/* ── LEDGER LIST ── */
#recordsContainer {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── FLAT ASH CARD — no hover, no icon, no gradient ── */
.record-card {
  width: 100%;
  background: var(--card-ash);
  border-radius: 10px;
  padding: 14px 16px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* Icon puck not used in this design — hidden, kept in DOM for compatibility */
.record-icon-wrap {
  display: none;
}

.record-card-body {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
}

/* reference / order id — bold black, first line */
.record-ref {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.2px;
}

/* type label + amount row */
.record-type-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.record-type-label {
  font-size: 13px;
  font-weight: 700;
}

.record-type-amount {
  font-size: 13.5px;
  font-weight: 700;
}

.record-type-row.debit .record-type-label,
.record-type-row.debit .record-type-amount {
  color: var(--out);
}

.record-type-row.credit .record-type-label,
.record-type-row.credit .record-type-amount {
  color: var(--in);
}

/* amount received (withdrawals only) */
.record-received {
  font-size: 12.5px;
  color: var(--ink-faint);
}

/* bottom row — date/time left, status right */
.record-bottom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
}

.record-date {
  font-size: 12px;
  color: var(--ink-faint);
}

.record-status {
  font-size: 12.5px;
  font-weight: 600;
}

.record-status.status-approved { color: var(--in); }
.record-status.status-failed   { color: var(--out); }
.record-status.status-pending  { color: var(--pending); }

/* legacy badge classes kept mapped, in case any old markup still
   uses the pill version elsewhere */
.record-status-badge {
  font-size: 12.5px;
  font-weight: 600;
  background: none;
  border: none;
  padding: 0;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  gap: 0;
}
.record-status-badge svg { display: none; }
.record-status-badge.status-approved { color: var(--in); }
.record-status-badge.status-failed   { color: var(--out); }
.record-status-badge.status-pending  { color: var(--pending); }

.record-order-id { display: none; }

.records-empty-text {
  text-align: center;
  color: var(--ink-faint);
  font-size: 13px;
  margin-top: 40px;
}

@media (max-width: 380px) {
  .record-card { padding: 12px 14px; }
}

/* ================= MODAL OVERLAY ================= */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
}

.modal-overlay.active {
  display: flex;
}

/* ================= MODAL CARD ================= */
.modal-card {
  background: #ffffff;
  border-radius: 22px;
  padding: 24px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
  display: flex;
  flex-direction: column;
}

/* ================= HEADER ================= */
.sheet-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.sheet-title {
  font-size: 22px;
  font-weight: 700;
  color: #000000;
}

.close-sheet {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: #ffffff;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
}

/* ================= INNER CARD ================= */
.slim-card {
  background: #f7f7f7;
  border-radius: 18px;
  padding: 18px;
  margin-bottom: 25px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

/* ================= PRODUCT ROW ================= */
.product-main-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.check-icon-container {
  width: 48px;
  height: 48px;
  background: #2D6BEF;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.check-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: white;
  color: #000000;
  font-weight: 700;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ================= PRODUCT DETAILS ================= */
.product-details strong {
  font-size: 17px;
  font-weight: 700;
  display: block;
  color: #111;
}

.product-details p {
  font-size: 14px;
  color: #444;
  margin-top: 3px;
}

/* ================= DIVIDER ================= */
.divider-line {
  height: 1px;
  background: #e5e5e5;
  margin: 14px 0;
}

/* ================= BALANCE ================= */
.account-balance-row {
  font-size: 14px;
  color: #333;
  font-weight: 600;
}

/* ================= PURCHASE BUTTON ================= */
.purchase-btn {
  background: #2D6BEF;
  color: white;
  border: none;
  border-radius: 40px;
  padding: 12px 28px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  display: block;
  margin: auto;
  box-shadow: 0 6px 15px rgba(47,72,236,0.4);
  transition: transform 0.15s ease;
}

.purchase-btn:active {
  transform: scale(0.95);
}

/* ================= MOBILE ================= */
@media (max-width:480px){

.modal-card{
padding:20px;
}

.sheet-title{
font-size:20px;
}

.product-details strong{
font-size:16px;
}

.product-details p,
.account-balance-row{
font-size:13px;
}

.purchase-btn{
font-size:14px;
padding:10px 22px;
}

}


:root {
  --y: #FFD400;
  --y-dim: #D9A900;
  --ink: #111111;
  --ink-muted: rgba(17, 17, 17, 0.56);
  --ink-faint: rgba(17, 17, 17, 0.36);
  --line: #ECECEC;
  --ash: #F5F5F5;
  --up: #16A34A;
  --up-soft: #EAFBF0;
}

.investment-page {
  position: relative;
  background: #ffffff;
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Inter', sans-serif;
  color: var(--ink);
}


/* =========================================================
   HEADER — solid black, flows into the black hero card below
   ========================================================= */

.investment-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  z-index: 10000;
  box-sizing: border-box;
}

.investment-header-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.investment-header-kicker {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.8px;
  color: var(--y);
}

.investment-header h2 {
  margin: 0;
  font-size: 15.5px;
  font-weight: 800;
  color: #ffffff;
}

.investment-back-btn {
  position: absolute;
  left: 16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: none;
  color: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}
.investment-back-btn:active { background: rgba(255, 255, 255, 0.22); }

.investment-header-mark {
  position: absolute;
  right: 16px;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--y);
  color: var(--ink);
  font-size: 13px;
}

/* =========================================================
   CONTAINER
   ========================================================= */

.card-wrapper {
  position: relative;
  z-index: 1;
  flex: 1;
  padding: calc(58px + env(safe-area-inset-top, 0px) + 16px) 16px 100px 16px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 600px;
  margin: 0 auto;
  width: 100%;
}


/* =========================================================
   PORTFOLIO HERO — solid black, flat, no gradient/texture
   ========================================================= */

.inv-hero-card {
  padding: 20px;
  box-sizing: border-box;
  border-radius: 18px;
  background: var(--ink);
  color: #ffffff;
}

.inv-hero-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 18px;
}

.inv-hero-label {
  display: block;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 1.4px;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 8px;
}

.inv-hero-value {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.3px;
}

.inv-hero-icon {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--y);
  color: var(--ink);
  font-size: 16px;
}

.inv-hero-progress-wrap {
  margin-bottom: 18px;
}

.inv-hero-progress-labels {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.65);
}

.inv-hero-progress-labels span:last-child {
  color: var(--y);
}

.inv-hero-progress-track {
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
}

.inv-hero-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--y);
  transition: width 0.6s cubic-bezier(.4,0,.2,1);
}

.inv-hero-stats-row {
  display: flex;
  align-items: center;
}

.inv-hero-stat {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.inv-hero-stat-label {
  font-size: 9px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.inv-hero-stat strong {
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inv-hero-stat-divider {
  width: 1px;
  height: 24px;
  margin: 0 12px;
  background: rgba(255, 255, 255, 0.14);
  flex-shrink: 0;
}


/* =========================================================
   PROJECTION STRIP — flat ash card, yellow accent value
   ========================================================= */

.inv-projection-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--ash);
  box-sizing: border-box;
}

.inv-projection-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  color: var(--y);
  font-size: 13px;
}

.inv-projection-text,
.inv-projection-remaining {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.inv-projection-text { flex: 1; min-width: 0; }

.inv-projection-label {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.inv-projection-value {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--ink);
}

.inv-projection-remaining-value {
  color: var(--up);
}

.inv-projection-remaining {
  align-items: flex-end;
  text-align: right;
  flex-shrink: 0;
}


/* =========================================================
   LIST HEADING
   ========================================================= */

.inv-list-heading {
  padding: 4px 2px 0;
}

.inv-list-heading-small {
  display: block;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: var(--y-dim);
  margin-bottom: 4px;
}

.inv-list-heading h3 {
  margin: 0;
  font-size: 14.5px;
  font-weight: 800;
  color: var(--ink);
}



/* =========================================================
   EMPTY STATE
   ========================================================= */

.inv-empty-state{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:52px 24px;
  margin:10px 0;
  border:1.5px dashed var(--ash);
  border-radius:20px;
  background:#FAFAFA;
  box-sizing:border-box;
}

.inv-empty-mark{
  width:56px;
  height:56px;
  margin-bottom:18px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--ink);
  color:var(--y);
}

.inv-empty-title{
  margin:0 0 6px;
  font-size:14.5px;
  font-weight:800;
  color:var(--ink);
}

.inv-empty-sub{
  margin:0 0 20px;
  max-width:230px;
  font-size:12px;
  font-weight:400;
  line-height:1.55;
  color:var(--ink-muted);
}

.inv-empty-cta{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:12px 24px;
  border:none;
  border-radius:999px;
  background:var(--y-dim);
  color:var(--ink);
  font-family:inherit;
  font-size:13px;
  font-weight:800;
  cursor:pointer;
  transition:.15s;
}
.inv-empty-cta:hover{ filter:brightness(0.96); }
.inv-empty-cta:active{ opacity:0.85; transform:scale(.97); }


/* =========================================================
   INVESTMENT LIST
   ========================================================= */

#investmentCardsList {
  display: flex;
  flex-direction: column;
  gap: 12px;
}


/* =========================================================
   PRODUCT CARD — flat white, no hover lift/glow
   ========================================================= */

.premium-card {
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid var(--line);
  padding: 16px;
  box-sizing: border-box;
}

.premium-card.is-completed {
  opacity: 0.85;
}

.inv-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  gap: 10px;
}

.inv-card-top-left {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.inv-card-thumb {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  object-fit: cover;
}

.inv-card-title-col {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.inv-plan-title {
  font-size: 14.5px;
  font-weight: 800;
  color: var(--ink);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inv-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 8px;
  border-radius: 999px;
}

.inv-status-chip.status-active {
  color: var(--up);
  background: var(--up-soft);
}

.inv-status-chip.status-completed {
  color: var(--ink-muted);
  background: var(--ash);
}

.inv-status-chip .status-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.inv-price-badge {
  flex-shrink: 0;
  background: var(--y);
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  padding: 6px 12px;
  border-radius: 999px;
  white-space: nowrap;
}

/* per-card cycle progress bar */
.inv-card-progress-wrap {
  margin-bottom: 14px;
}

.inv-card-progress-labels {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 7px;
}

.inv-card-progress-labels span:first-child {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ink-muted);
}

.inv-card-progress-labels span:last-child {
  font-size: 11px;
  font-weight: 800;
  color: var(--ink);
}

.inv-card-progress-track {
  height: 6px;
  border-radius: 999px;
  background: var(--ash);
  overflow: hidden;
}

.inv-card-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--ink);
  transition: width 0.6s cubic-bezier(.4,0,.2,1);
}

.inv-card-progress-fill.is-complete {
  background: var(--up);
}

.inv-grid-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}

.inv-mini-box {
  background: var(--ash);
  border-radius: 10px;
  padding: 10px 12px;
}

.inv-mini-box.full-width {
  grid-column: span 2;
  background: var(--ink);
}

.inv-mini-label {
  font-size: 10px;
  color: var(--ink-faint);
  margin-bottom: 4px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.inv-mini-box.full-width .inv-mini-label {
  color: rgba(255, 255, 255, 0.5);
}

.inv-mini-value {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--ink);
}

.inv-mini-value.value-up { color: var(--up); }

.inv-mini-box.full-width .inv-mini-value {
  color: var(--y);
  font-size: 15px;
}

/* ── Countdown — new digital-chip style, not a plain footer row ── */
.inv-countdown-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--ink);
  border-radius: 999px;
  padding: 9px 14px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--y);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.3px;
}

.inv-countdown-footer i {
  font-family: 'Font Awesome 6 Free';
  color: var(--y);
  font-size: 11px;
}

.inv-countdown-footer.is-complete {
  background: var(--up-soft);
  color: var(--up);
}

.inv-countdown-footer.is-complete i {
  color: var(--up);
}

@media (max-width: 380px) {
  .inv-hero-value { font-size: 22px; }
  .inv-mini-box.full-width .inv-mini-value { font-size: 14px; }
}



.channel-card.channel-disabled {
  filter: blur(1px);
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}

.channel-card-disabled-badge {
  display: none;
  font-size: 10px;
  font-weight: 700;
  color: #ef4444;
  margin-top: 2px;
}

.channel-card.channel-disabled .channel-card-disabled-badge {
  display: block;
}



/* =========================================================
   SWAL POPUP (unchanged)
   ========================================================= */

.gle-swal-popup {
  border-radius: 20px !important;
  padding: 28px 22px !important;
  box-shadow: 0 20px 50px rgba(2, 65, 184, 0.15) !important;
}

.gle-swal-title {
  font-family: 'Inter', sans-serif !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #0b1220 !important;
}

.gle-swal-text {
  font-family: 'Inter', sans-serif !important;
  font-size: 13.5px !important;
  color: #64748b !important;
}

.gle-swal-confirm {
  background: #0032A0 !important;
  color: #ffffff !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  padding: 12px 28px !important;
  border-radius: 12px !important;
  border: none !important;
  box-shadow: 0 6px 16px rgba(0, 50, 160, 0.25) !important;
}

.gle-swal-confirm:hover {
  background: #001F66 !important;
}

.gle-swal-icon {
  border-color: #eaf0fe !important;
}


@media (max-width: 380px) {
  .inv-hero-value { font-size: 23px; }
  .inv-hero-stat-divider { margin: 0 8px; }
  .premium-card { padding: 15px; }
  .inv-price-badge { font-size: 11px; padding: 6px 11px; }
}



:root {
  --y: #FFD400;
  --y-dim: #D9A900;
  --ink: #111111;
  --ink-muted: rgba(17, 17, 17, 0.5);
  --page-bg: #F5F5F5;
  --border: #ECECEC;
}

.password-page {
  background: var(--page-bg);
  min-height: 100vh;
  font-family: 'Inter', sans-serif;
  width: 100%;
  box-sizing: border-box;
}

/* ===================== ROUNDED HEADER — matching the reference ===================== */
.pw-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 16px;
  background: var(--ink);
  border-radius: 0 0 20px 20px;
  box-sizing: border-box;
}

.pw-back-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 13px;
}
.pw-back-btn:active { background: rgba(255, 255, 255, 0.3); }

.pw-topbar-title {
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
}

/* ===================== CONTAINER ===================== */
.pw-container {
  max-width: 460px;
  margin: 0 auto;
  padding: 20px 16px 60px;
  box-sizing: border-box;
}

/* ===================== CARD ===================== */
.pw-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 18px;
  box-sizing: border-box;
  box-shadow: 0 4px 16px rgba(17, 17, 17, 0.05);
}

/* ===================== FORM ===================== */
.pw-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Plain boxed inputs — matching the reference exactly */
.pw-field-group {
  position: relative;
  display: flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #ffffff;
}

.pw-field-group input {
  border: none;
  outline: none;
  background: transparent;
  font-size: 14px;
  font-weight: 400;
  color: var(--ink);
  width: 100%;
  font-family: inherit;
  padding: 15px 40px 15px 16px;
  box-sizing: border-box;
}

.pw-field-group input::placeholder {
  color: var(--ink-muted);
}

.pw-field-group input:focus {
  box-shadow: 0 0 0 2px var(--y);
  border-radius: 10px;
}

.pw-eye-icon {
  position: absolute;
  right: 14px;
  cursor: pointer;
  color: var(--ink-muted);
  font-size: 13px;
}
.pw-eye-icon:hover { color: var(--ink); }

/* ===================== SUBMIT BUTTON — solid black, matching header ===================== */
.pw-submit-btn {
  width: 100%;
  padding: 15px;
  border: none;
  border-radius: 10px;
  background: var(--ink);
  color: #ffffff;
  font-weight: 700;
  cursor: pointer;
  font-size: 14.5px;
  font-family: inherit;
  margin-top: 6px;
}

.pw-submit-btn:active { opacity: 0.85; }
.pw-submit-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ===================== NOT USED IN THIS DESIGN — kept for compatibility ===================== */
.pw-badge-wrap,
.pw-strength-row {
  display: none;
}




.gle-whatsapp-fab {
  position: fixed;
  bottom: 180px;
  right: 18px;
  width: 54px;
  height: 54px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 26px;
  box-shadow: 0 8px 20px rgba(37, 211, 102, 0.4);
  z-index: 9998;
  text-decoration: none;
  transition: transform 0.2s ease;
}

.gle-whatsapp-fab:active {
  transform: scale(0.92);
}


:root {
  --brand-yellow: #FFD400;
  --ink: #111111;
  --ink-muted: #6B6B6B;
  --white: #FFFFFF;
  --line-dash: #E2E2E2;

  /* zone glow colors — purely for the identifying label text */
  --zone-classic: #C9930A;
  --zone-first: #7C3AED;
  --zone-business: #059669;
  --zone-economy: #E11D48;
}

/* ── HEADER ROW (kept in CSS in case you reuse it elsewhere, but the
   markup itself is now empty — see the HTML file) ── */
.mx-products-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 4px 16px;
  box-sizing: border-box;
}

/* ── PRODUCT LIST ── */
#dynamicProductList {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 12px 16px 80px 16px;
  box-sizing: border-box;
  
  padding-top: 4px;
}


/* ── PRODUCT CARD — flat, no hover, no motion ── */
.mx-product-card {
  background: var(--white);
  border-radius: 16px;
  padding: 14px;
  box-sizing: border-box;
  box-shadow: 0 4px 18px rgba(17, 17, 17, 0.08);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── ZONE LABEL — glowing colored text identifier ── */
.mx-zone-label {
  text-align: center;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  animation: mx-zone-pulse 2.4s ease-in-out infinite;
}

@keyframes mx-zone-pulse {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 1; }
}

.mx-zone-classic  { color: var(--zone-classic);  text-shadow: 0 0 10px rgba(201, 147, 10, 0.45); }
.mx-zone-first    { color: var(--zone-first);    text-shadow: 0 0 10px rgba(124, 58, 237, 0.45); }
.mx-zone-business { color: var(--zone-business); text-shadow: 0 0 10px rgba(5, 150, 105, 0.45); }
.mx-zone-economy  { color: var(--zone-economy);  text-shadow: 0 0 10px rgba(225, 29, 72, 0.45); }

/* ── TOP ROW: image + dashed price box ── */
.mx-card-top {
  display: flex;
  align-items: stretch;
  gap: 12px;
}

/* Portrait image slot, name overlaid at the bottom */
.mx-card-media {
  position: relative;
  flex-shrink: 0;
  width: 128px;
  border-radius: 12px;
  overflow: hidden;
}

.mx-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mx-card-media-name {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 10px 8px 8px;
  background: linear-gradient(to top, rgba(17, 17, 17, 0.88), transparent);
  color: var(--white);
  font-weight: 700;
  font-size: 13px;
  text-align: center;
}

/* Dashed price box */
.mx-price-box {
  flex: 1;
  min-width: 0;
  border: 1.5px dashed var(--ink);
  border-radius: 12px;
  padding: 4px 14px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.mx-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 0;
}

.mx-price-row:not(:last-child) {
  border-bottom: 1px dashed var(--line-dash);
}

.mx-price-label {
  font-size: 12.5px;
  color: var(--ink-muted);
}

.mx-price-val {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
}

/* ── BUY BUTTON — slim, square edge, solid, no hover animation ── */
.mx-add-to-portfolio-btn {
  width: 100%;
  background: #D9A900;
  color: var(--ink);
  border: none;
  border-radius: 8px;
  padding: 12px;
  font-weight: 800;
  font-size: 14px;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
  font-family: inherit;
}

.mx-add-to-portfolio-btn:active { filter: brightness(0.95); }

.mx-loader, .mx-error {
  text-align: center;
  padding: 30px;
  color: var(--ink-muted);
  font-size: 14px;
}

@media (max-width: 380px) {
  .mx-card-media { width: 108px; }
  .mx-price-label, .mx-price-val { font-size: 12px; }
}
/* No hover state defined, so it will remain static */

/* This targets the <a> tag wrapping your settings item */
a.settings-link-wrapper {
    text-decoration: none !important; /* Forces the underline to disappear */
    color: inherit !important;        /* Forces the text to stay your app's color */
    display: block;                   /* Makes the whole row clickable */
    -webkit-tap-highlight-color: transparent; /* Removes the gray box on mobile tap */
}

/* Optional: Add a slight hover or active effect so the user knows it's a button */
a.settings-link-wrapper:active {
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 8px;
}

/* ================= CUSTOM ALERT ================= */
.custom-alert {
  position: fixed !important;

  top: 50% !important;
  left: 50% !important;

  transform: translate(-50%, -50%) !important;

  background: rgba(0, 0, 0, 0.85);
  color: #fff;

  padding: 14px 24px;
  border-radius: 12px;

  font-size: 15px;
  text-align: center;

  max-width: 90%;
  width: max-content;

  box-shadow: 0 8px 20px rgba(0,0,0,0.5);

  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;

  z-index: 999999; /* higher than EVERYTHING */
}

.custom-alert.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1) !important;
}
.custom-alert {
  right: auto;
  margin: 0;
}

.custom-alert.show {
  animation: alertPop 0.3s ease;
}

@keyframes alertPop {
  0% {
    transform: translate(-50%, -60%) scale(0.8);
    opacity: 0;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}


/* ================= EMPTY STATE UI (PRODUCT STYLE) ================= */
.empty-state-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  
  padding: 40px 20px; 
  margin: 15px;
  text-align: center;
  
  /* Card Design: Stretch like an ATM card */
  background: #ffffff;
  border-radius: 16px; 
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  border: 1px solid #f0f0f0;
  
  width: auto; 
  max-width: 100%; 
  box-sizing: border-box;
}

.empty-icon-circle {
  width: 70px; /* Slightly larger for product focus */
  height: 70px;
  background: #f8f9fa; /* Clean grey/white tint */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.empty-icon-circle i {
  font-size: 28px;
  color: #121b1e; /* Bold dark icon */
}

.empty-title {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  color: #1a1a1a;
  font-family: 'Poppins', sans-serif;
}

.empty-subtitle {
  margin: 8px 0 25px 0;
  font-size: 14px;
  color: #777;
  font-weight: 400;
  line-height: 1.5;
  max-width: 280px; /* Keeps text centered and readable */
}

/* THE BUTTON - Full width button */
.browse-plans-btn {
  background: #4b0082; 
  color: #ffffff;
  border: none;
  width: 100%; 
  max-width: 300px; /* Adjusted for better card balance */
  padding: 16px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.browse-plans-btn:active {
  transform: scale(0.97);
}


#pageLoader {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  background: transparent;
  z-index: 99999;

  opacity: 1;
  visibility: visible;

  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Small, semi-transparent black box — floats over the page,
   doesn't take over the whole screen */
.clean-loader-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;

  min-width: 84px;
  padding: 18px 22px;

  background: rgba(17, 17, 17, 0.8);
  border-radius: 14px;

  box-shadow: 0 8px 24px rgba(17, 17, 17, 0.25);
}

/* Small subtle spinner ring */
.clean-loader-spinner {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, 0.25);
  border-top-color: #ffffff;
  animation: cleanSpin 0.7s linear infinite;
}

@keyframes cleanSpin {
  to { transform: rotate(360deg); }
}

.clean-loading-text {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 1px;

  color: #ffffff;
  text-align: center;

  display: flex;
  align-items: center;
  justify-content: center;
}

/* Animated dots */
.loader-dots::after {
  content: "";
  color: #ffffff;
  animation: loadingDots 1.5s steps(4, end) infinite;
}

@keyframes loadingDots {
  0%   { content: ""; }
  25%  { content: "."; }
  50%  { content: ".."; }
  75%  { content: "..."; }
  100% { content: ""; }
}

/* Hidden State */
#pageLoader.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Header Image */
.product-header-img img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 15px;
}


.debit-amount  { color: #ef4444; font-weight: 700; }
.pending-amount { color: #f59e0b; font-weight: 700; }
.failed-amount  { color: #94a3b8; font-weight: 700; text-decoration: line-through; }
.record-amount-value { color: #16a34a; font-weight: 700; }

/* Reviews Ticker Wrapper - fills remaining viewport height */
.reviews-ticker-wrapper {
  width: 100%;
  height: calc(100vh - 250px); /* adjust based on your header/image height */
  overflow: hidden;
  border-radius: 12px;
  background: #ffffff; /* blue background */
  padding: 10px;
  box-sizing: border-box;
}

/* Ticker container */
.reviews-ticker {
  display: flex;
  flex-direction: column;
  gap: 15px;
  animation: scrollReviews 300s linear infinite; /* very slow scroll */
}

/* Each review item */
.review-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 15px;
  background: #ffffff; /* white card background */
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  min-height: 80px; /* make each review taller */
}

/* User logo / icon */
.review-item .user-img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0; /* keeps image from shrinking */
}

/* Review text */
.review-item .review-text {
  flex: 1;
  font-size: 14px;
  line-height: 1.6;
  color: #79a2e5; /* blue text */
}

/* Smooth scroll animation */
@keyframes scrollReviews {
  0% { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}



/* Full-width black box around dashboard image */
.dashboard-image-box-full {
    width: 100%;                 /* full width of parent container */
    background-color: #000000;   /* black box (you can change to green) */
    padding: 15px;               /* space inside box for image */
    border-radius: 16px;         /* rounded corners */
    box-sizing: border-box;
    text-align: center;          /* center image */
    margin: 20px 0;              /* vertical spacing only, no horizontal shift */
    overflow: hidden;            /* prevent any overflow */
}

/* Dashboard image inside the box */
.dashboard-image {
    max-width: 100%;             /* fit inside green box */
    height: auto;
    border-radius: 12px;         /* slightly rounded corners */
    display: inline-block;       /* center properly */
}




/* ===== PAYMENT TYPE ===== */
.payment-type {
  margin: 15px 0;
  text-align: left;
  width: 100%;
  position: relative;
  font-family: sans-serif;
}

.payment-type label {
  display: block;
  margin-bottom: 6px;
  color: #f4b400; /* green label */
  font-weight: 600;
  font-size: 14px;
}

/* The clickable box */
.payment-box {
  width: 100%;
  background: #ffffff;          /* white box */
  color: #000000;               /* green text */
  border: 1px solid #c0c0c0;   /* silver edge */
  border-radius: 12px;
  padding: 12px 15px;
  cursor: pointer;
  position: relative;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.2s;
}

.payment-box:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.payment-box .arrow {
  font-size: 14px;
}



/* Options list hidden by default */
.payment-options {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 48px; /* below the box */
  width: 100%;
  background: #ffffff;
  border: 1px solid #c0c0c0;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  display: none; /* hidden initially */
  z-index: 100;
}

.payment-options li {
  padding: 10px 15px;
  cursor: pointer;
  color: #000000;
  font-weight: 500;
  transition: background 0.2s;
}

.payment-options li:hover {
  background: rgba(15,157,88,0.1); /* light green hover */
}


/* Selected Amount Display */
.selected-amount {
  font-weight: bold;
  color: #000000;   /* black */
  font-size: 20px;
  margin-top: 8px;
  text-align: center;
}



#paymentCountdown {
  margin-top: 14px;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: #ff0707; /* green */
}


#paymentStatusMessage {
  margin-top: 16px;
  padding: 14px;
  border-radius: 10px;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  display: none;
}


.status-pending {
  background: #f0fff6;
  color: #d29922;
}

.status-approved {
  background: #e6fff1;
  color: #1faa59;
}

.status-declined {
  background: #ffecec;
  color: #d62828;
}

.status-timeout {
  background: #fff6e5;
  color: #c77700;
}




/* ================= FLOATING TELEGRAM (PROFILE PAGE) ================= */
.profile-page .telegram-float-profile {
  position: fixed;
  bottom: 90px;              /* above bottom nav */
  right: 16px;               /* move to right */
  z-index: 9999;

  width: 56px;
  height: 56px;
  border-radius: 50%;

  background: #0088cc;       /* Telegram blue */
  color: #ffffff;            /* white icon/text */

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 26px;
  text-decoration: none;

  box-shadow: 0 8px 20px rgba(0,136,204,0.35);  /* subtle blue shadow */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Hover / tap */
.profile-page .telegram-float-profile:hover {
  transform: scale(1.08);
  box-shadow: 0 12px 28px rgba(0,136,204,0.45); /* stronger blue shadow */
}

/* Mobile safe */
@media (max-width: 480px) {
  .profile-page .telegram-float-profile {
    bottom: 100px;
    right: 12px;            /* adjust right for mobile */
  }
}



#toast-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

#toast-overlay.toast-show {
  opacity: 1;
}

/* Small wide rectangle — not a tall square, matching the reference */
.toast-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  background: rgba(20, 20, 20, 0.88);
  backdrop-filter: blur(6px);
  color: #ffffff;

  padding: 12px 20px;
  border-radius: 10px;

  font-family: -apple-system, 'SF Pro Display', 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  text-align: center;

  max-width: 260px;
  width: max-content;
  box-sizing: border-box;

  transform: scale(0.94);
  transition: transform 0.25s ease;
}

#toast-overlay.toast-show .toast-inner {
  transform: scale(1);
}

/* Small inline icon, not a big centered graphic */
.toast-type-icon {
  font-size: 14px;
  flex-shrink: 0;
}

.toast-success .toast-type-icon { color: #16a34a; }
.toast-error   .toast-type-icon { color: #dc2626; }
.toast-warning .toast-type-icon { color: #f0b100; }
.toast-info    .toast-type-icon { color: #ffffff; }

.toast-msg {
  color: #ffffff;
}

@media (max-width: 480px) {
  .toast-inner {
    max-width: 82vw;
    padding: 11px 18px;
    font-size: 12.5px;
  }
}

.fintech-toast {
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  font-family: Inter, sans-serif;
}


.payment-confirm-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  padding: 24px;
}

.pc-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 320px;
}

.pc-ring {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 4px solid #f2e9c9;
  border-top-color: #f0b100;
  animation: pc-spin 0.9s linear infinite;
  margin-bottom: 20px;
}

@keyframes pc-spin {
  to { transform: rotate(360deg); }
}

.pc-icon-success, .pc-icon-fail {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: #fff;
  margin-bottom: 20px;
}

.pc-icon-success { background: #16a34a; }
.pc-icon-fail { background: #dc2626; }

.pc-title {
  font-size: 17px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 6px;
}

.pc-sub {
  font-size: 13.5px;
  color: #8a8a8a;
  margin: 0 0 24px;
  line-height: 1.5;
}

.pc-btn {
  background: #f0b100;
  color: #1a1a1a;
  border: none;
  padding: 12px 28px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}


.record-status-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  letter-spacing: 0.3px;
}
.status-approved {
  background: #dcfce7;
  color: #16a34a;
}
.status-pending {
  background: #fef9c3;
  color: #ca8a04;
}
.status-failed {
  background: #fee2e2;
  color: #dc2626;
}



/* =========================================================
   TASK CENTER — WHITE + YELLOW + BLACK, alternating cards
   ========================================================= */
:root{
  --tsk-yellow:#FFD400;
  --tsk-yellow-dim:#D9A900;
  --tsk-ink:#111111;
  --tsk-muted:#6B6B6B;
  --tsk-faint:#9A9A9A;
  --tsk-line:#E6E6E6;
  --tsk-bg:#F6F6F6;
}

#tasksPage{
  width:100%;
  min-height:100vh;
  background:var(--tsk-bg);
  font-family:'Inter',sans-serif;
  color:var(--tsk-ink);
  box-sizing:border-box;
  padding-bottom:100px;
}
#tasksPage *{ box-sizing:border-box; }

/* HEADER */
.tsk-header{
  display:flex;
  align-items:center;
  gap:10px;
  padding:16px;
  background:var(--tsk-ink);
}
.tsk-back-btn{
  width:34px;
  height:34px;
  flex:0 0 34px;
  border-radius:50%;
  border:none;
  background:rgba(255,255,255,.12);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.tsk-back-btn:active{ transform:scale(.92); }

.tsk-header-title{
  flex:1;
  margin:0;
  font-size:17px;
  font-weight:700;
  color:#fff;
}

.tsk-balance-pill{
  display:flex;
  align-items:center;
  gap:8px;
  padding:7px 12px;
  border-radius:999px;
  background:var(--tsk-yellow);
}
.tsk-balance-icon{
  width:22px;
  height:22px;
  flex:0 0 22px;
  border-radius:50%;
  background:var(--tsk-ink);
  color:var(--tsk-yellow);
  display:flex;
  align-items:center;
  justify-content:center;
}
.tsk-balance-text{
  display:flex;
  flex-direction:column;
  line-height:1.15;
}
.tsk-balance-text span{
  font-size:8px;
  font-weight:600;
  color:rgba(17,17,17,.65);
}
.tsk-balance-text strong{
  font-size:12.5px;
  font-weight:700;
  color:var(--tsk-ink);
}

/* BANNER */
.tsk-banner{
  width:100%;
  overflow:hidden;
}
.tsk-banner-img{
  width:100%;
  display:block;
  object-fit:cover;
}

/* LIST CONTAINER */
.tsk-list-container{
  padding:16px 14px 0;
  max-width:480px;
  margin:0 auto;
}

.tsk-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* TASK CARD — alternates white / black automatically */
.tsk-card{
  padding:14px 16px;
  border-radius:18px;
  border:1.5px solid var(--tsk-yellow-dim);
  box-shadow:0 8px 20px -14px rgba(0,0,0,.35);
}

/* odd cards (1st, 3rd, 5th...) = white */
.tsk-list .tsk-card:nth-child(odd){
  background:#ffffff;
  color:var(--tsk-ink);
}

/* even cards (2nd, 4th, 6th...) = black */
.tsk-list .tsk-card:nth-child(even){
  background:var(--tsk-ink);
  color:#ffffff;
}

.tsk-card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

.tsk-card-desc{
  flex:1;
  font-size:12.5px;
  font-weight:500;
  line-height:1.4;
}
.tsk-list .tsk-card:nth-child(even) .tsk-card-desc{
  color:rgba(255,255,255,.85);
}

/* CLAIM / REWARD BADGE BUTTON */
.tsk-reward-badge{
  flex-shrink:0;
  display:flex;
  align-items:center;
  gap:6px;
  padding:9px 14px;
  border-radius:999px;
  border:none;
  font-family:inherit;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  white-space:nowrap;
  transition:.15s;
}

/* default / locked state */
.tsk-reward-badge.locked{
  background:var(--tsk-yellow);
  color:var(--tsk-ink);
  opacity:.55;
}

/* ready to claim */
.tsk-reward-badge.ready{
  background:var(--tsk-ink);
  color:var(--tsk-yellow);
}
.tsk-list .tsk-card:nth-child(even) .tsk-reward-badge.ready{
  background:var(--tsk-yellow);
  color:var(--tsk-ink);
}

/* already claimed */
.tsk-reward-badge.received{
  background:#E9E9E9;
  color:var(--tsk-muted);
  cursor:default;
}

.tsk-reward-badge:active{ transform:scale(.96); }

/* PROGRESS ROW */
.tsk-progress-numbers-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:6px;
  font-size:11px;
  font-weight:600;
}
.tsk-progress-numbers{ color:inherit; opacity:.85; }
.tsk-progress-pct{ color:var(--tsk-yellow-dim); font-weight:700; }
.tsk-list .tsk-card:nth-child(even) .tsk-progress-pct{ color:var(--tsk-yellow); }

/* PROGRESS BAR */
.tsk-progress-bar-bg{
  width:100%;
  height:8px;
  border-radius:999px;
  background:rgba(0,0,0,.08);
  overflow:hidden;
}
.tsk-list .tsk-card:nth-child(even) .tsk-progress-bar-bg{
  background:rgba(255,255,255,.15);
}
.tsk-progress-bar-fill{
  height:100%;
  border-radius:999px;
  background:var(--tsk-yellow-dim);
  transition:width .4s ease;
}
.tsk-list .tsk-card:nth-child(even) .tsk-progress-bar-fill{
  background:var(--tsk-yellow);
}

/* INFO ROW */
.tsk-info-row{
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin:18px 2px 0;
  color:var(--tsk-muted);
}
.tsk-info-icon{
  flex-shrink:0;
  color:var(--tsk-yellow-dim);
  margin-top:1px;
}
.tsk-info-row p{
  margin:0;
  font-size:11px;
  line-height:1.5;
}

/* MOBILE */
@media (max-width:380px){
  .tsk-header{ padding:14px; }
  .tsk-header-title{ font-size:15px; }
  .tsk-list-container{ padding:14px 12px 0; }
  .tsk-card{ padding:12px 14px; border-radius:16px; }
}

.team-list-nodata {
  text-align: center;
  padding: 50px 0;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: #B0B0B0;
}


:root {
  --brand-yellow: #FFD400;
  --brand-black: #111111;
  --brand-white: #FFFFFF;
}

.brand-redirect-screen {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: var(--brand-white);
  font-family: 'Inter', sans-serif;
  overflow: hidden;
}

.brand-redirect-inner {
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  animation: brandFadeUp 0.5s ease-out;
}

@keyframes brandFadeUp {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Logo circle — yellow ring, matching reference's orange ring */
.brand-logo-circle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: var(--brand-white);
  border: 4px solid var(--brand-yellow);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 32px;
  box-shadow: 0 10px 28px rgba(255, 212, 0, 0.35);
  overflow: hidden;
}

.brand-logo-img {
  width: 78%;
  height: 78%;
  object-fit: contain;
}

/* Progress bar — thick, yellow fill, matching reference */
.brand-redirect-bar {
  width: 200px;
  height: 10px;
  border-radius: 999px;
  background: #E5E5E5;
  overflow: hidden;
}

.brand-redirect-bar-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: var(--brand-yellow);
  transition: width 0.05s linear;
}

.brand-redirect-percent {
  margin: 12px 0 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--brand-black);
}

@media (max-width: 380px) {
  .brand-logo-circle { width: 96px; height: 96px; margin-bottom: 24px; }
}
/* =========================================================================
   DESKTOP / TABLET RESPONSIVE LAYER
   -------------------------------------------------------------------------
   Nothing above this point was changed — every existing mobile rule and
   breakpoint in this file still applies exactly as before, at every width.
   Everything below only ACTIVATES at 768px and up, and only does 3 things:

     1. Fills the browser background behind the app on wide screens, so it
        no longer looks like a thin phone-width strip floating in blank
        white space.
     2. Widens the full-screen pages (dashboard, recharge, withdraw, bank,
        profile, tasks, etc.) and their inner content containers a
        moderate, readable amount — not edge-to-edge, since unbounded
        line-length at 1920px would be unreadable, but enough to visibly
        use the extra space and look intentional.
     3. Nudges base type size up slightly for comfortable reading at
        desktop viewing distance.
   ========================================================================= */

/* ---- 1. Desktop background behind the centered app ---- */
@media (min-width: 768px) {
  html, body {
    min-height: 100vh;
    background: linear-gradient(160deg, #f4f7fd 0%, #e9eefb 100%);
  }
}

/* ---- 2a. Full-screen page wrappers: framed + centered, tablet ---- */
@media (min-width: 768px) {
  .dashboard,
  #giftCodePage,
  #profilePage,
  .bank-page,
  #rechargePage,
  .recharge-page,
  .payment-confirm-page,
  .product-page,
  #earningsPage,
  .withdraw-page,
  .investment-page,
  .password-page,
  .tsk-wrapper,
  #tasksPage {
    max-width: 560px;
    margin: 0 auto;
    box-shadow:
      0 30px 80px rgba(3, 87, 238, 0.10),
      0 0 0 1px rgba(3, 87, 238, 0.05);
  }
}

/* ---- 2b. Same wrappers, wider again at true desktop sizes ---- */
@media (min-width: 1024px) {
  .dashboard,
  #giftCodePage,
  #profilePage,
  .bank-page,
  #rechargePage,
  .recharge-page,
  .payment-confirm-page,
  .product-page,
  #earningsPage,
  .withdraw-page,
  .investment-page,
  .password-page,
  .tsk-wrapper,
  #tasksPage {
    max-width: 640px;
  }
}

/* ---- 2c. Inner content containers: more breathing room on desktop ---- */
@media (min-width: 1024px) {
  .auth-page-inner,
  .header-top-row,
  #profilePage .profile-scroll-container,
  .bankdisp-container,
  #rechargePage .recharge-page-container,
  .records-content-container,
  .wd-container,
  .team-page-container,
  .ticker-search-bar {
    max-width: 560px;
  }

  .referral-promo-card,
  .premium-card,
  .referral-container,
  .card-wrapper {
    max-width: 640px;
  }

  .pw-container,
  .modal-card {
    max-width: 480px;
  }
}

/* ---- 2d. Popups/modals/alerts: stay compact, don't stretch ---- */
@media (min-width: 1024px) {
  .mx-unique-modal,
  .ft-alert-card {
    max-width: 400px;
  }
}

/* ---- 2e. Bottom nav follows the same widened frame ---- */
@media (min-width: 768px) {
  .bottom-nav {
    max-width: 560px;
  }
}

@media (min-width: 1024px) {
  .bottom-nav {
    max-width: 640px;
  }
}

/* ---- 3. Slightly larger base type for desktop reading distance ---- */
@media (min-width: 1024px) {
  body {
    font-size: 15.5px;
  }
}


.wd-account-item {
  position: relative;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.wd-account-check {
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.15s, transform 0.15s;
}

.wd-account-item.selected {
  border-color: #0057FF;
  background: #E5F0FF;
}

.wd-account-item.selected .wd-account-check {
  opacity: 1;
  transform: scale(1);
  color: #0057FF;
}

.wd-account-item.channel-disabled {
  opacity: 0.5;
  pointer-events: none;
}