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


@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* Strict Integration of Your Colors */
:root {
  --bg-main: #050706;         /* Pure black canvas */
  --text-main: #111827;       /* Crisp white headings */
  --text-muted: #6b7280;      /* Soft gray for details/labels */
  --accent-cyan: #059669;     /* Premium electric cyan */
  --accent-glow: rgba(5, 150, 105, 0.15);
  --border-subtle: #e5e7eb;   /* Input base borders */
  
  /* New Invest Card Variables */
  --bg:#050706;
  --card-grad-1:#0E1411;
  --card-grad-2:#060907;
  --surface:rgba(255,255,255,0.025);
  --hairline:rgba(255,255,255,0.08);
  --hairline-strong:rgba(255,255,255,0.14);
  --white:#F4F7F5;
  --muted:#80948A;
  --green:#00FF88;
  --green-dim:#0ECB71;
  --green-soft:rgba(0,255,136,0.14);
  --green-border:rgba(0,255,136,0.28);
}

/* Global Setup */
* { 
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--bg-main);
  color: var(--text-main);
  font-family: 'Inter', sans-serif;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Base Visibility Logic */
/* ================= PROFESSIONAL RESPONSIVE AUTHENTICATION CONTAINER ================= */
.honda-auth-container {
  display: none !important;
  width: 100vw;
  max-width: none;
  min-height: 100vh;
  padding: 14px 10px;
  box-sizing: border-box;
  margin: 0;
  background-image: linear-gradient(rgba(17, 24, 39, 0.38), rgba(17, 24, 39, 0.42)),
    url('https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?auto=format&fit=crop&w=1600&q=80');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  border-radius: 0;
  box-shadow: none;
}

.honda-auth-container.active {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  width: 100vw;
  max-width: none;
}

/* Premium Card Wrapper with Soft Shadows and Clean Border */
.fieldmark-card {
  width: 100%;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 18px;
  padding: 18px 18px 16px;
  box-shadow: 0 10px 30px -5px rgba(5, 150, 105, 0.04), 
              0 20px 40px -10px rgba(5, 150, 105, 0.04), 
              0 1px 3px rgba(0, 0, 0, 0.05);
  box-sizing: border-box;
  transition: all 0.3s ease;
}

/* Form Title & Logo Layout */
.fieldmark-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 12px;
}

.fieldmark-logo-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 6px;
}

.fieldmark-logo-shape {
  width: 24px;
  height: 30px;
  background-color: #059669; /* Green Accent Logo */
  clip-path: polygon(0% 25%, 100% 0%, 100% 75%, 50% 100%, 50% 50%, 0% 50%);
  opacity: 0.95;
}

.fieldmark-logo-text {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: green; /* Dark Slate Header Text */
  font-family: 'Inter', sans-serif;
}

.fieldmark-title {
  font-size: 15px;
  font-weight: 500;
  color: #6b7280; /* Soft gray subtitle */
  margin: 0;
  letter-spacing: -0.01em;
}

/* Form Inputs Grid and Spacing */
.auth-mode-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
  background: #edf4f1;
  border: 1px solid #dfeae4;
  border-radius: 12px;
  padding: 5px;
  margin-bottom: 16px;
}

.auth-tab {
  border: none;
  border-radius: 8px;
  padding: 8px 8px;
  background: transparent;
  color: #557065;
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s ease;
}

.auth-tab.active {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #fff;
  box-shadow: 0 8px 18px rgba(5, 150, 105, 0.18);
}

.fieldmark-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fieldmark-input-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fieldmark-input-group label {
  font-size: 12px;
  font-weight: 600;
  color: #374151; /* Dark Grey Labels */
}

/* Premium Rounded Input Fields */
.fieldmark-field-box {
  background-color: #f9fafb; /* Light backdrop fill */
  border: 1.5px solid #e5e7eb;   /* Soft border line */
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-sizing: border-box;
}

.fieldmark-phone-box {
  display: flex;
  align-items: center;
  gap: 10px;
  background-color: #f9fafb;
  border: 1.5px solid #e5e7eb;
  border-radius: 12px;
  padding: 12px 14px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-sizing: border-box;
}

.fieldmark-phone-box:focus-within {
  border-color: #10b981;
  background-color: #ffffff;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1);
}

.phone-prefix {
  color: #0f172a;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  flex-shrink: 0;
}

.fieldmark-field-box:focus-within {
  border-color: #10b981;
  background-color: #ffffff;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1);
}

.fieldmark-field-box input,
.fieldmark-phone-box input {
  background: transparent;
  border: none;
  outline: none;
  width: 100%;
  color: #111827;
  font-size: 15px;
  font-family: inherit;
}

.fieldmark-field-box input::placeholder,
.fieldmark-phone-box input::placeholder {
  color: #9ca3af;
}

/* Eye Toggle for Password Fields */
.eye-toggle {
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 0 4px;
  color: #9ca3af;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: color 0.2s ease;
}

.eye-toggle:hover {
  color: #059669;
}

.eye-toggle.active {
  color: #059669;
}

/* Action Button styling - Gradient, hover shadow, micro-animations */
.fieldmark-btn-submit {
  width: 100%;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  border: none;
  border-radius: 12px;
  padding: 13px 14px;
  cursor: pointer;
  margin-top: 4px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.15);
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.fieldmark-btn-submit:hover {
  filter: brightness(1.05);
  box-shadow: 0 6px 20px rgba(5, 150, 105, 0.25);
  transform: translateY(-1px);
}

.fieldmark-btn-submit:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.15);
}

.fieldmark-btn-submit.is-loading {
  cursor: wait;
}

.typing-loader {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 24px;
}

.typing-loader span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  animation: typingBounce 1.2s infinite ease-in-out;
}

.typing-loader span:nth-child(2) {
  animation-delay: 0.15s;
}

.typing-loader span:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes typingBounce {
  0%,
  80%,
  100% {
    opacity: 0.35;
    transform: translateY(0);
  }
  40% {
    opacity: 1;
    transform: translateY(-5px);
  }
}

/* Form Footer Navigation */
.fieldmark-switch-action {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  font-size: 12px;
  color: #6b7280;
}

.fieldmark-link-btn {
  background: transparent;
  border: none;
  color: #059669; /* Branding Green Link */
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: color 0.2s ease;
  padding: 2px 4px;
}

.fieldmark-link-btn:hover {
  color: #047857;
  text-decoration: underline;
}

/* ================= AUTH SCREEN REFRESH ================= */
.honda-auth-container {
  position: relative;
  overflow: hidden;
  max-width: 480px;
  padding: 26px 18px;
  background: radial-gradient(circle at 50% -10%, #d9f1df 0, #f4f8f5 43%, #eaf1ec 100%);
}
.honda-auth-container.active { min-height: 100dvh; }
.honda-auth-container::before, .honda-auth-container::after { content: ''; position: absolute; pointer-events: none; border-radius: 50%; border: 1px solid rgba(21,151,101,.12); animation: authFloat 8s ease-in-out infinite; }
.honda-auth-container::before { width: 260px; height: 260px; top: -110px; right: -110px; }
.honda-auth-container::after { width: 190px; height: 190px; bottom: -85px; left: -85px; animation-delay: -3s; }
.fieldmark-card {
  position: relative;
  overflow: hidden;
  max-width: 420px;
  padding: 35px 30px 27px;
  border: 1px solid #dce9df;
  border-radius: 28px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 24px 55px rgba(32,83,52,.11), 0 2px 6px rgba(32,83,52,.04);
  animation: authCardIn .65s cubic-bezier(.22,1,.36,1) both;
}
.fieldmark-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: linear-gradient(90deg, #0d8c59, #b6da79); }
.fieldmark-header { margin-bottom: 28px; }
.fieldmark-auth-image { display: block; width: 72px; height: 72px; margin: 0 auto 15px; border: 4px solid #fff; border-radius: 22px; object-fit: cover; object-position: center; box-shadow: 0 10px 20px rgba(21,76,49,.16); animation: authImageIn .7s .08s both; }
.fieldmark-logo-wrapper { gap: 9px; margin-bottom: 15px; }
.fieldmark-logo-shape { position: relative; width: 38px; height: 38px; border-radius: 13px; background: #0b9560; box-shadow: 0 8px 15px rgba(11,149,96,.22); animation: logoBreath 3.5s ease-in-out infinite; }
.fieldmark-logo-shape::after { content: 'R'; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 21px; font-weight: 900; letter-spacing: -.08em; }
.fieldmark-logo-text { color: #17382d; font-size: 25px; letter-spacing: .08em; }
.fieldmark-kicker { display: block; margin-bottom: 7px; color: #7e9a8b; font-size: 9px; font-weight: 850; letter-spacing: .15em; }
.fieldmark-title { color: #17382d; font-size: 25px; font-weight: 850; letter-spacing: -.04em; }
.fieldmark-intro { margin-top: 7px; color: #84918b; font-size: 12px; line-height: 1.45; }
.fieldmark-form { gap: 17px; }
.fieldmark-input-group { gap: 7px; }
.fieldmark-input-group label { color: #355247; font-size: 12px; font-weight: 800; }
.fieldmark-field-box { min-height: 52px; padding: 13px 14px; border: 1px solid #dce8df; border-radius: 14px; background: #f7faf8; transition: border-color .25s ease, background .25s ease, box-shadow .25s ease, transform .25s ease; }
.fieldmark-field-box:focus-within { border-color: #159765; background: #fff; box-shadow: 0 0 0 4px rgba(21,151,101,.1), 0 7px 15px rgba(21,151,101,.06); transform: translateY(-1px); }
.fieldmark-field-box input { color: #17382d; font-size: 14px; }
.fieldmark-field-box input::placeholder { color: #a2ada7; }
.fieldmark-btn-submit { position: relative; overflow: hidden; margin-top: 5px; padding: 15px; border-radius: 14px; background: #0c955d; box-shadow: 0 10px 20px rgba(12,149,93,.2); }
.fieldmark-btn-submit::after { content: ''; position: absolute; top: 0; left: -70%; width: 45%; height: 100%; background: rgba(255,255,255,.2); transform: skewX(-20deg); transition: left .45s ease; }
.fieldmark-btn-submit:hover::after { left: 125%; }
.fieldmark-switch-action { margin-top: 22px; color: #7d8b84; font-size: 12px; }
.fieldmark-link-btn { color: #0a8a57; font-size: 12px; }

@keyframes authCardIn { from { opacity: 0; transform: translateY(16px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes authImageIn { from { opacity: 0; transform: scale(.82) rotate(-5deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes authFloat { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-9px, 10px) scale(1.04); } }
@keyframes logoBreath { 0%, 100% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(-4deg) scale(1.05); } }

/* Responsive adjustments for mobile screens */
@media (max-width: 480px) {
  .fieldmark-card {
    padding: 31px 22px 24px;
    border-radius: 24px;
  }
  .honda-auth-container,
  .honda-auth-container.active {
    width: 100vw !important;
    max-width: none !important;
    min-height: 100dvh !important;
    padding: 16px 12px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
  }
}

/* Dashboard container */
.dashboard {
  width: 100%;
  max-width: 400px;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 100vh;
  margin: 0;
  box-sizing: border-box;
  
  /* UPDATED: Deep Electric Purple Radial Gradient */
  background: #f2f2f2;
  background-attachment: fixed; 
  
  color: #111827;
}


/* ================= DASHBOARD HEADER (ELECTRIC THEME) ================= */
.dashboard-header {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 600px;
  height: 70px; /* Adjusted to fit the square buttons comfortably */
  background: #f2f2f2; /* Matches the deep navy from your image */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  z-index: 10000;
  box-sizing: border-box;
  border-bottom: 1px solid #e5e7eb; /* Subtle bottom glow line */
}

.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Square-ish Avatar Styling */
.header-avatar {
  width: 50px;
  height: 50px;
  background: #f2f2f2;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 15px rgba(0, 212, 255, 0.3);
}

.header-avatar img {
  width: 80%;
  height: 80%;
  object-fit: contain;
}

/* Electric Vision Text */
.welcome-text {
  margin: 0;
  font-family: 'Orbitron', sans-serif;
  font-size: 18px;
  letter-spacing: 2px;
  font-weight: 700;
}

.text-white { color: #111827; }
.text-cyan { 
  color: var(--accent-cyan); 
  text-shadow: 0 0 10px rgba(0, 212, 255, 0.6); 
}

/* Right Side Action Buttons */
.header-actions {
  display: flex;
  gap: 10px;
}

.action-btn {
  width: 45px;
  height: 45px;
  background: transparent;
  border: 1px solid #e5e7eb;
  border-radius: 12px; /* Rounded square look from image */
  color: var(--accent-cyan);
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 0.3s;
}

.action-btn:hover {
  border-color: var(--accent-cyan);
  box-shadow: inset 0 0 10px var(--accent-glow), 0 0 10px var(--accent-glow);
}

/* Ensure FontAwesome icons glow */
.action-btn i {
  filter: drop-shadow(0 0 3px var(--accent-cyan));
}

.user-phone {
  margin: 2px 0 0 0;
  font-size: 15px;
  color: #94a3b8; /* Muted grey for the phone number */
  font-weight: 400;
  letter-spacing: 0.5px;
}
/* Push main content down */
body {
  padding-top: 65px;
}

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

:root {
  --bg-main: #f9fafb;         /* Pure dark canvas */
  --bg-card: #f2f2f2;         /* Deep charcoal container */
  --text-muted: #6b7280;      /* Soft grey */
  --accent-cyan: #059669;     /* Electric cyan */
  --accent-glow: rgba(5, 150, 105, 0.15);
  --border-subtle: #e5e7eb;   /* Flat layout border lines */
}

/* Base structural wrapper sitting natively on your purple/black background */
.main-container {
  width: 100%;
  max-width: 400px; /* Locked to standard compact mobile flow width */
  margin: 0 auto;
  padding: 16px;
  box-sizing: border-box;
  background: transparent; /* No heavy external background container boxes */
}

/* FORCE SINGLE LINE GRID ROW AS SHOWN IN SCREENSHOT */
.action-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* Exactly 4 slots in a single clean horizontal line */
  gap: 10px; /* Seamless spacing, not too big */
  width: 100%;
}

/* THE PREMIUM STRUCTURAL FLAT BUTTON CARDS */
.action-card {
  background-color: #fff; /* Perfectly flat, sits raw on the canvas */
  border: 1px solid var(--border-subtle); /* Perfectly clean frame lines precisely like the sample */
  border-radius: 22px; /* Smooth rounded corners as seen in screenshot */
  box-shadow: 0 20px 12px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 80px;
  gap: 14px;
  aspect-ratio: 1 / 1.35; /* Ensures perfect tall rectangle proportions naturally */
  padding: 12px 6px;
  box-sizing: border-box;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Clean UI Hover and Interactive States */
.action-card:hover {
  border-color: var(--accent-cyan);
  box-shadow: 0 0 15px var(--accent-glow);
  transform: translateY(-2px);
}

.action-card div{
  border-radius: 14px;
  font-size: 22px;
  height: 42px;
  width: 42px;
  align-items: center;
  justify-content: center;
  display: flex;
  margin: 0 auto 10px;
  background-color: #e8f8f1;
}

.action-card i{
  color: inherit;
}

.action-card span {
  color: black;
}

.action-card:active {
  transform: scale(0.95);
}

.floating-gift-code-btn {
  position: fixed;
  right: 18px;
  bottom: 86px;
  z-index: 50;
  display: none;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #10b981, #0ea5e9);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 16px 30px rgba(16, 185, 129, 0.35);
  cursor: pointer;
}

.floating-gift-code-btn i {
  font-size: 16px;
}

.gift-code-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.64);
  padding: 18px;
}

.gift-code-modal-card {
  width: min(420px, 100%);
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0 30px 70px rgba(15, 23, 42, 0.4);
  padding: 20px;
  color: #0f172a;
}

.gift-code-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.gift-code-modal-header h3 {
  margin: 0;
  font-size: 22px;
}

.gift-code-modal-close {
  border: none;
  background: #f1f5f9;
  color: #0f172a;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
}

.gift-code-modal-card label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 8px;
}

.gift-code-modal-card input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 16px;
  margin-bottom: 14px;
}

.gift-code-modal-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.gift-code-modal-actions button {
  border: none;
  border-radius: 12px;
  padding: 12px 14px;
  font-weight: 700;
  cursor: pointer;
}

.gift-code-modal-actions .primary {
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
}

.gift-code-modal-actions .secondary {
  background: #f8fafc;
  color: #0f172a;
}

/* COMPACT VECTOR ICONS (Not too big, exactly matches sample layout) */
.action-icon {
  width: 26px;
  height: 26px;
  transition: transform 0.2s ease;
}

.action-card:hover .action-icon {
  transform: scale(1.08);
}

/* Precise Color Layouts from Screenshot Mapped to Dark Canvas */
.icon-cyan   { color: #10b981; } /* Royal Blue theme precisely from picture */
.icon-green  { color: #10b981; } /* Clean Emerald Green */
.icon-orange { color: #f59e0b; } /* Vivid Tech Gold */
.icon-purple { color: #a855f7; } /* Electric Purple */

/* CRISP BALANCED TYPOGRAPHY (No giant text weights) */
.action-text {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  letter-spacing: -0.01em;
}

.text-cyan   { color: #10b981; }
.text-green  { color: #34d399; }
.text-orange { color: #fbbf24; }
.text-purple { color: #c084fc; }

/* Desktop scaling optimization without widening the small grid row */
@media (min-width: 576px) {
  .main-container {
    padding: 24px 16px;
  }
  .action-grid {
    gap: 12px;
  }
  .action-text {
    font-size: 14px;
  }
}

/* HEADER INFO (Icon + Title) */
.card-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.card-header i {
  font-size: 22px;
}

/* Dynamic Text/Icon Coloring matching the top gradients */
.card-recharge .card-header { color: #ff944d; }
.card-withdraw .card-header { color: #4ade80; }
.card-team .card-header { color: #79a6ff; }
.card-checkin .card-header { color: #c084fc; }

.card-header span {
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-align: center;
}

/* THE FUTURISTIC ANGLED BUTTONS */
.tech-btn-wrapper {
  width: 100%;
  padding: 0 4px;
  box-sizing: border-box;
}

.tech-btn {
  width: 100%;
  border: none;
  padding: 8px 0;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: #ffffff;
  cursor: pointer;
  
  /* Creates the signature cyber-cut tech corners */
  clip-path: polygon(10px 0%, calc(100% - 10px) 0%, 100% 30%, 100% 70%, calc(100% - 10px) 100%, 10px 100%, 0% 70%, 0% 30%);
  
  transition: filter 0.2s ease;
}

/* Button Gradients matched to look outstanding against the cards */
.card-recharge .tech-btn {
  background: linear-gradient(90deg, #ff416c, #ff4b2b);
}
.card-withdraw .tech-btn {
  background: linear-gradient(90deg, #00b4db, #0083b0);
}
.card-team .tech-btn {
  background: linear-gradient(90deg, #7f00ff, #e100ff);
}
.card-checkin .tech-btn {
  background: linear-gradient(90deg, #11998e, #38ef7d);
}

.tech-btn:hover {
  filter: brightness(1.2);
}

/* CONTAINER & HEADER */
.features-section {
  padding: 20px;
  background: transparent;
  font-family: sans-serif;
}

.features-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.features-header h2 {
  font-size: 20px;
  font-weight: 800;
  color: #1a1a1a;
  margin: 0;
}

.view-all-link {
  color: #059669; /* Matching Syncox Blue */
  text-decoration: none;
  font-size: 15px;
  font-weight: 700;
}

/* HORIZONTAL SCROLLING WRAPPER */
.features-scroll-container {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 10px;
  /* Hide scrollbar for Chrome/Safari */
  scrollbar-width: none; 
}

.features-scroll-container::-webkit-scrollbar {
  display: none;
}

/* THE CARDS - Optimized for Mobile */
.feature-card {
  flex: 1 1 calc(33.33% - 10px); /* Adjusts to fit 3 cards per row */
  max-width: calc(33.33% - 10px); 
  background: #ffffff;
  border-radius: 15px; /* Slightly smaller radius for mobile */
  padding: 15px 5px;   /* Reduced padding to save space */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
  border: 1px solid #f0f0f0;
  box-sizing: border-box;
  margin: 5px; /* Adds breathing room between cards */
}

.feature-title {
  font-size: 18px; /* Scaled down from 22px for mobile */
  font-weight: 800;
  color: #1a1a1a; 
  margin-bottom: 2px;
  text-align: center;
}

/* The 100% Blue Highlight */
.highlight-text {
  color: #059669 !important;
}

.feature-subtitle {
  font-size: 11px; /* Scaled down from 14px */
  font-weight: 600;
  color: #99a1b7; 
  text-align: center;
  white-space: nowrap; /* Prevents text from wrapping ugly */
}

/* ===== LIVE PAYOUT NOTIFICATION ===== */
.live-payout-container {
  display: flex;
  align-items: center;
  gap: 12px;
  background-color: #ffffff;
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: 12px 16px;
  margin: 16px 16px 8px 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
  overflow: hidden;
}

.live-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  background-color: #e6f4ea; /* Soft green */
  color: #137333; /* Dark green */
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 20px;
  border: 1px solid rgba(19, 115, 51, 0.15);
  flex-shrink: 0;
}

.live-dot {
  width: 6px;
  height: 6px;
  background-color: #10b981;
  border-radius: 50%;
  animation: live-pulse 1.6s infinite ease-in-out;
}

.payout-ticker {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

#payoutText {
  display: inline-block;
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 1;
  transform: translateY(0);
}

#payoutText.fade {
  opacity: 0;
  transform: translateY(-8px);
}

@keyframes live-pulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.25); }
}

/* ===== FLYER CONTAINER ===== */
.flyer-container {
  width: 100%;
  background: transparent;
  margin-top: 16px;
  padding: 0 16px;
  box-sizing: border-box;
}

/* ===== STRUCTURE CARD (The "Fieldmark" Look) ===== */
.balance-flyer {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
  aspect-ratio: 9 / 10;
  background: linear-gradient(135deg, #f8fafc, #eef2f7);
  display: flex;
  align-items: center;
  justify-content: center;
  scrollbar-width: none; /* Hide scrollbar for Firefox */
}

.balance-flyer::-webkit-scrollbar {
  display: none; /* Hide scrollbar for Chrome/Safari */
}

/* .flyer-slider {
  display: flex;
  width: 100%;
  height: 100%;
} */

.flyer-card {
  width: 42%;
  height: 42%;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
  opacity: 0.98;
  transform: translateY(-2px);
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.08));
}

/* Products Header */
.products-header {
  margin-bottom: 12px;
  text-align: left; /* align text to left */
}

.products-header h2 {
  display: inline-block;        
  padding: 6px 16px;            
  font-size: 18px;
  font-weight: bold;
  color: #D4AF37;               /* white text */
  background: #d01e1e;          /* sky blue background */
  border-radius: 50px;          
  font-family: 'Arial Black', 'Helvetica', sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;    
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); /* subtle black shadow */
}





.welcome-card {
  background-color: #064e3b; /* SONY-style blue */
  color: #ffffff;
  border-radius: 12px;       
  padding: 30px;             
  margin: 0;                 /* remove side margins */
  width: 100%;               /* full width of container/screen */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}


.welcome-content {
  display: flex;
  flex-direction: column;   /* stack vertically */
  align-items: flex-start;  /* all left aligned */
}

.welcome-text {
  font-size: 16px;           
  font-weight: 300;          
  margin: 0;                 
}

.user-number {
  font-size: 20px;           
  font-weight: 700;          
  margin: 4px 0 0 0;         /* small space below header */
  letter-spacing: 1px;
}


.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 */
}

/* ================= PREMIUM ELECTRIC THEME GROUNDED NAV ================= */
.bottom-nav {
  position: fixed;
  bottom: 0; /* Tied directly to base of viewport with zero floating gaps */
  left: 0;
  width: 100%;
  background: #e8e8e8; /* Dark white background */
  border-top: 1px solid #d0d0d0; /* Subtle light border */
  z-index: 9999;
  box-sizing: border-box;
  padding-bottom: env(safe-area-inset-bottom, 0px); /* Clean layout padding for modern screen tracks */
}

.nav-pill-container {
  width: 100%;
  max-width: 480px; /* Perfect containment profile for high-density rendering screens */
  margin: 0 auto;
  height: 64px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)); /* keeps all items visible on small screens */
  align-items: center;
  justify-items: center;
  box-sizing: border-box;
  gap: 2px;
  background: #e8e8e8; /* Dark white - matches nav background */
}

/* ================= NAV ITEMS GRID INTERFACES ================= */
.nav-item {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  gap: 3px;
  color: #64748b; /* Clean inactive silver slate tone */
  -webkit-tap-highlight-color: transparent;
  position: relative;
  padding: 4px 2px 2px;
  box-sizing: border-box;
}

/* Vector Framework Wrap Scaling */
.nav-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 26px;
  border-radius: 12px; /* Matches layout pill profile from screen track references */
  transition: none;
}

.nav-icon-wrapper svg {
  width: 18px;
  height: 18px;
}

/* Component Navigation Text Labels */
.nav-label-text {
  font-size: 9.5px;
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: color 0.15s ease;
  text-align: center;
  white-space: nowrap;
}

/* ================= THE ELECTRIC CYAN ACTIVE MATRIX ================= */
.nav-item.active {
  color: var(--boutique-green);
}

.nav-item.active .nav-icon-wrapper {
  background: var(--boutique-green-soft);
  color: var(--boutique-green);
}

.nav-item.active .nav-label-text {
  /* color: var(--accent-cyan); Active label text matches indicator color */
  font-weight: 700;
}

/* Clean UI Haptic Pressure Indicator — Removed */


/* ================= THE FIX: AUTOMATIC SCROLL SPACING OFFSET ================= */
/* This rule safely injects extra breathing room at the bottom of your scroll container.
  It dynamically calculates the 64px height of your nav bar, the mobile safe zone, plus extra layout padding.
*/
.profile-scroll-container {
  padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px)) !important;
}

/* Global fall-back: If you have other pages using this navigation track, 
  this class can be added to their main containers to keep items from getting blocked.
*/
.nav-spacer-fix {
  padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px)) !important;
}


@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --bg-main: #f9fafb;         /* Pure absolute black profile canvas background */
  --bg-top-block: #ffffff;    /* Distinct charcoal accent block for upper dashboard section */
  --bg-card: #ffffff;         /* Floating cards background color mapping */
  --text-main: #111827;       /* Solid white header fonts */
  --text-muted: #6b7280;      /* Soft grey list title subtext typography */
  --accent-cyan: #059669;     /* High contrast electric cyan branding accents */
  --border-line: #e5e7eb;     /* Clean border separators */
}

body {
  background-color: var(--bg-main);
  margin: 0;
  padding: 0;
  font-family: 'Inter', sans-serif;
  color: var(--text-main);
}

.profile-page {
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
  min-height: 100vh;
  box-sizing: border-box;
  background-color: var(--bg-main);
}

/* ===== DISTINCT UPPER DASHBOARD SECTION BLOCK ===== */
.dashboard-top-section {
  background-color: var(--bg-main); /* Premium dark white canvas */
  padding: 28px 16px 32px 16px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* ── Keyframes ── */
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}
@keyframes popIn {
  0%   { opacity: 0; transform: scale(0.7); }
  70%  { transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes borderGlow {
  0%, 100% { opacity: 0.4; }
  50%       { opacity: 1; }
}
@keyframes slideRight {
  from { width: 0; }
  to   { width: 60px; }
}

/* Profile header row containing logo and status */
.profile-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 24px;
}

/* Fieldmark Asset Branding Row */
.profile-brand-logo {
  display: flex;
  align-items: center;
  gap: 8px;
}

.logo-geometric-shape {
  width: 18px;
  height: 22px;
  background-color: var(--accent-cyan);
  clip-path: polygon(0% 25%, 100% 0%, 100% 75%, 50% 100%, 50% 50%, 0% 50%);
}

.logo-text {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--text-main);
}

/* Verified Account Status Badge */
.profile-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: #e6f4ea; /* Soft light green background */
  color: #137333; /* Readable dark green text */
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid rgba(19, 115, 51, 0.15);
}

.status-dot {
  width: 6px;
  height: 6px;
  background-color: #10b981;
  border-radius: 50%;
  box-shadow: 0 0 8px #10b981;
}

/* Circular Avatar Frame Placeholder */
.profile-avatar-container {
  position: relative;
  margin-bottom: 16px;
}

.profile-avatar {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background-color: #e5e7eb; /* Dark white placeholder background */
  display: flex;
  justify-content: center;
  align-items: center;
  border: 3px solid #eefaf2; /* Soft light green frame ring */
  box-shadow: 0 0 0 1.5px var(--accent-cyan);
}

.profile-avatar i {
  font-size: 32px;
  color: #111827; /* Dark black icon */
}

.profile-verified-badge {
  position: absolute;
  bottom: 2px;
  right: 2px;
  background-color: var(--accent-cyan);
  color: #ffffff;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid #ffffff;
  font-size: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* User identity meta */
.honda-user-meta h2 {
  font-size: 20px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 4px 0;
  letter-spacing: -0.01em;
}

.honda-user-meta p {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 24px 0;
}

/* ===== FLOATING SLIM BALANCE CARD ===== */
.honda-main-card {
  background: #111827; /* Solid charcoal/black background */
  border: 1px solid rgba(5, 150, 105, 0.2); /* Light green subtle border */
  border-radius: 20px;
  padding: 24px 20px;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}

.honda-main-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.2);
  border-color: rgba(5, 150, 105, 0.35);
}

.balance-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.honda-label {
  font-size: 12px;
  color: #9ca3af; /* Dark white text */
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.currency-tag {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-cyan);
  background-color: rgba(5, 150, 105, 0.15);
  padding: 2px 8px;
  border-radius: 8px;
}

.honda-amount-row {
  font-size: 32px;
  font-weight: 800;
  color: #10b981; /* Vibrant light green */
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-shadow: 0 2px 10px rgba(16, 185, 129, 0.12);
}

/* ===== STREAM TIMELINE CONTAINER ===== */
.profile-scroll-container {
  padding: 20px 16px 40px 16px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  box-sizing: border-box;
}

/* ===== RE-ENGINEERED BUTTON INTERFACE ===== */
.honda-action-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: 100%;
  margin-top: -8px;
}

.honda-btn-primary, .honda-btn-outline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 14px;
  border-radius: 12px; /* Smooth rounded shape base matching original imagery */
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.15s ease;
  border: none;
  color: #ffffff;
}

.honda-btn-primary {
  background-color: #16b67a; /* Royal blue layout profile standard */
}

.honda-btn-outline {
  background-color: #4285f4; //* Premium success variant green text */
}

.honda-btn-primary:active, .honda-btn-outline:active {
  transform: scale(0.97);
}

.btn-icon {
  width: 16px;
  height: 16px;
}

/* ===== HIGH DENSITY LIST SECTIONS ===== */
.settings-group-wrapper {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #f2f2f2;
  border: 0.5px solid #c0ddc9;
  border-radius: 18px;
  padding: 8px;
  overflow: hidden;
  position: relative;
}

.settings-group-wrapper::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: #2d5a0e;
  border-radius: 18px 18px 0 0;
}

.settings-group-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.03em;
  padding-left: 2px;
}

.settings-list-box {
  background-color: var(--bg-card);
  border: 1px solid var(--border-line);
  border-radius: 14px;
  overflow: hidden;
}

.settings-item-link {
  text-decoration: none;
  color: inherit;
}

.settings-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-line);
  cursor: pointer;
  transition: background-color 0.1s ease;
}

.settings-item-row:last-child {
  border-bottom: none;
}

.settings-item-row:hover {
  background-color: rgba(255, 255, 255, 0.02);
}

.item-left-side {
  display: flex;
  align-items: center;
  gap: 12px;
}

.item-left-side i {
  font-size: 15px;
  width: 20px;
  text-align: center;
}

.icon-cyan { color: var(--accent-cyan); }
.icon-red  { color: #ff4d4d; }
.text-red  { color: #ff4d4d !important; }

.item-left-side span {
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.chevron-indicator {
  font-size: 11px;
  color: #3b475c;
}

.indicator-red {
  color: rgba(255, 77, 77, 0.3) !important;
}

/* Responsiveness Rules for Wider Desktop Displays */
@media (min-width: 576px) {
  .dashboard-top-section {
    padding: 32px 24px 40px 24px;
  }
  .profile-scroll-container {
    padding: 24px 24px 40px 24px;
    gap: 28px;
  }
}

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* Strict Integration of Your Brand Theme Colors */
:root {
  --bg-canvas: #f9fafb;       /* Pure black page backdrop */
  --bg-card: #ffffff;         /* Deep premium charcoal black */
  --text-main: #111827;       /* Crisp white for readable headers */
  --text-muted: #6b7280;      /* Soft subtle silver for labels */
  --accent-cyan: #059669;     /* Premium electric cyan highlight */
  --accent-glow: rgba(5, 150, 105, 0.12);
  --border-subtle: #e5e7eb;   /* Flat layout border lines */
}

/* Global Styling Setup Overrides */
.bank-page {
  background-color: var(--bg-canvas);
  min-height: 100vh;
  width: 100%;
  font-family: 'Inter', sans-serif;
  color: var(--text-main);
  box-sizing: border-box;
}

/* ==========================================================================
   HEADER ARTIFACTS
   ========================================================================== */
.bank-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 56px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  background-color: var(--bg-canvas); /* Flat seamless top sweep */
  border-bottom: 1px solid var(--border-subtle);
  z-index: 1000;
}

.bank-back-btn {
  background: transparent;
  border: none;
  font-size: 18px;
  color: var(--text-main);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  transition: background 0.2s ease;
  z-index: 2;
}

.bank-back-btn:active {
  background: var(--border-subtle);
}

.bank-header h2 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-main);
  letter-spacing: -0.01em;
  z-index: 1;
}

/* ==========================================================================
   CONTAINER AND INTERACTION FORM LAYOUTS
   ========================================================================== */
.honda-bank-container {
  width: 100%;
  max-width: 400px; /* Locked to clean compact desktop/mobile container limits */
  margin: 0 auto;
  padding: 80px 16px 40px 16px; /* 80px top shifts down content clean from fixed top header bar */
  box-sizing: border-box;
}

.honda-bank-form {
  width: 100%;
  background-color: var(--bg-card); /* Charcoal card base exactly from picture */
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 20px; /* Elegant tight spacing layouts */
  box-sizing: border-box;
}

.honda-input-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.honda-input-label {
  color: var(--text-main);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Form inputs & selection controls styled cleanly to match your brand style */
.honda-bank-form input,
.honda-bank-form select {
  background-color: var(--bg-canvas); /* Inner input area drops to dark backdrop */
  border: 1.5px solid var(--border-subtle);
  border-radius: 12px;
  padding: 14px 16px;
  color: var(--text-main);
  font-size: 15px;
  font-family: inherit;
  outline: none;
  width: 100%;
  box-sizing: border-box;
  transition: all 0.2s ease;
  -webkit-appearance: none; /* Disables default old mobile styles */
  appearance: none;
}

.honda-bank-form input:focus,
.honda-bank-form select:focus {
  border-color: var(--accent-cyan);
  box-shadow: 0 0 10px var(--accent-glow);
}

/* Specific styling overrides for read-only dynamic verification lookups */
.honda-bank-form input[readonly] {
  background-color: rgba(33, 38, 45, 0.3);
  color: var(--text-muted);
  border-style: dashed; /* Visual hint for automated API fields */
  cursor: not-allowed;
}

/* Placeholders mapped precisely to screenshot tone */
.honda-bank-form input::placeholder {
  color: #9ca3af;
}

/* Custom dropdown chevron arrow geometry */
.honda-select-wrapper {
  position: relative;
  width: 100%;
}

.honda-select-wrapper::after {
  content: '';
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  transform: translateY(-65%) rotate(45deg);
  pointer-events: none;
}

/* Centered verification notice style directly above submit action */
.honda-verification-notice {
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
  margin: 4px 0;
  font-weight: 400;
}

/* ==========================================================================
   PRIMARY ACTION SUBMIT CONTROLS
   ========================================================================== */
.honda-submit-btn {
  width: 100%;
  background-color: var(--accent-cyan);
  color: #ffffff;
  border: none;
  padding: 16px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.honda-submit-btn:hover {
  background-color: #00d2ff;
  transform: translateY(-1px);
}

.honda-submit-btn:active {
  transform: translateY(0);
}

/* ==========================================================================
   IMPORTANT PRIVACY/SECURITY INFO CARD AT BOTTOM
   ========================================================================== */
.honda-notice-card {
  background-color: rgba(22, 27, 34, 0.4);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 14px;
  margin-top: 10px;
  box-sizing: border-box;
}

.notice-header {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.03em;
  margin-bottom: 8px;
}

.notice-circle {
  width: 15px;
  height: 15px;
  border: 1.5px solid var(--text-muted);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
}

.notice-content {
  color: #6b7280;
  font-size: 11px;
  line-height: 1.5;
  margin: 0;
}

/* ==========================================================================
   RESPONSIVENESS DESKTOP OPTIMIZATIONS
   ========================================================================== */
@media (min-width: 576px) {
  .honda-bank-container {
    padding-top: 100px;
  }
  .honda-bank-form {
    padding: 32px 24px;
  }
}





:root {
    --brand-pink: #FF2A7A;
    --brand-black: #000000;
    --brand-white: #ffffff;
    --bg-gray: #f4f7f9;
    --border-gray: #e2e8f0;
}

/* ================= BANK PAGE - MODERN ACCOUNT SETTINGS ================= */
.bank-page#bankPage {
  min-height: 100dvh;
  background: #f3f6f8 !important;
  color: #17262f;
  font-family: "Poppins", "Inter", sans-serif;
}

.bank-page#bankPage .bank-header {
  position: sticky;
  top: 0;
  z-index: 20;
  height: 72px;
  padding: 0 18px;
  background: #173b48;
  border: 0;
  box-shadow: 0 8px 20px rgba(23,59,72,.16);
}

.bank-page#bankPage .bank-back-btn {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 10px;
  color: #fff;
}

.bank-page#bankPage .bank-back-btn:active {
  background: rgba(255,255,255,.14);
}

.bank-page#bankPage .bank-header h2 {
  color: #fff;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.02em;
}

.bank-page#bankPage .honda-bank-container {
  width: min(100%, 680px);
  max-width: none;
  padding: 30px 18px 42px;
}

.bank-page#bankPage .honda-bank-container::before {
  display: block;
  margin: 0 0 16px 2px;
  color: #60747d;
  content: "SECURE PAYOUT ACCOUNT";
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .14em;
}

.bank-page#bankPage .honda-bank-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 14px;
  padding: 24px;
  border: 1px solid #dce5e9;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 14px 30px rgba(37,59,68,.08);
}

.bank-page#bankPage .honda-input-group:first-child,
.bank-page#bankPage .honda-verification-notice,
.bank-page#bankPage .honda-submit-btn,
.bank-page#bankPage .honda-notice-card {
  grid-column: 1 / -1;
}

.bank-page#bankPage .honda-input-group {
  gap: 8px;
}

.bank-page#bankPage .honda-input-label {
  color: #334a55;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
}

.bank-page#bankPage .honda-bank-form input,
.bank-page#bankPage .honda-bank-form select {
  height: 48px;
  padding: 0 14px;
  border: 1px solid #d3dfe4;
  border-radius: 10px;
  outline: 0;
  background: #f8fafb;
  color: #17262f;
  font-size: 13px;
  font-weight: 600;
  box-shadow: none;
}

.bank-page#bankPage .honda-bank-form input:focus,
.bank-page#bankPage .honda-bank-form select:focus {
  border-color: #238b71;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(35,139,113,.1);
}

.bank-page#bankPage .honda-bank-form input::placeholder {
  color: #9aaab1;
  font-weight: 500;
}

.bank-page#bankPage .honda-select-wrapper::after {
  right: 16px;
  border-color: #61747c;
}

.bank-page#bankPage .honda-select-wrapper {
  display: grid;
  gap: 8px;
}

.bank-page#bankPage .honda-select-wrapper::after {
  top: calc(100% - 20px);
}

.bank-page#bankPage .bank-search-input {
  height: 42px;
  padding: 0 13px 0 38px;
  border: 1px solid #d3dfe4;
  border-radius: 10px;
  outline: 0;
  background: #fff;
  color: #17262f;
  font: inherit;
  font-size: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2361747c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 13px center;
  background-size: 16px;
}

.bank-page#bankPage .bank-search-input:focus {
  border-color: #238b71;
  box-shadow: 0 0 0 4px rgba(35,139,113,.1);
}

.bank-page#bankPage .bank-search-input::placeholder {
  color: #9aaab1;
}

.bank-page#bankPage .honda-verification-notice {
  margin: -2px 0 0;
  padding: 11px 13px;
  border-left: 3px solid #e3b944;
  background: #fff9e9;
  color: #7a641f;
  font-size: 11px;
  line-height: 1.45;
  text-align: left;
}

.bank-page#bankPage .honda-submit-btn {
  height: 50px;
  padding: 0 18px;
  border: 0;
  border-radius: 10px;
  background: #238b71;
  color: #fff;
  box-shadow: 0 9px 17px rgba(35,139,113,.2);
  font-size: 13px;
  font-weight: 850;
  letter-spacing: .03em;
}

.bank-page#bankPage .honda-submit-btn:hover {
  background: #1c765f;
  transform: translateY(-1px);
}

.bank-page#bankPage .honda-submit-btn:disabled {
  cursor: wait;
  opacity: .65;
  transform: none;
}

.bank-page#bankPage .honda-notice-card {
  margin-top: 2px;
  padding: 15px;
  border: 1px solid #dce5e9;
  border-radius: 12px;
  background: #f7f9fa;
}

.bank-page#bankPage .notice-header {
  margin-bottom: 8px;
  color: #334a55;
  font-size: 10px;
  font-weight: 850;
}

.bank-page#bankPage .notice-circle {
  width: 18px;
  height: 18px;
  border: 0;
  background: #173b48;
  color: #fff;
}

.bank-page#bankPage .notice-content {
  color: #71838b;
  font-size: 11px;
  line-height: 1.55;
}

@media (max-width: 560px) {
  .bank-page#bankPage .honda-bank-container {
    padding: 24px 14px 34px;
  }

  .bank-page#bankPage .honda-bank-form {
    display: flex;
    gap: 15px;
    padding: 18px;
    border-radius: 15px;
  }

  .bank-page#bankPage .honda-submit-btn {
    margin-top: 2px;
  }
}

/* Container for the page */
.topup-wrapper {
    background-color: var(--bg-gray);
    font-family: 'Inter', sans-serif;
    position: fixed; top: 0; left: 0;
    width: 100%; height: 100vh;
    overflow-y: auto;
}

.topup-header {
    position: sticky;
    top: 0;
    height: 60px;
    background: var(--brand-white);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    border-bottom: 1px solid var(--border-gray);
    z-index: 100;
    position: relative;
}

.topup-header h2 {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: var(--brand-black);
    pointer-events: none;
}

#rechargeBackBtn, .recharge-history-btn {
    background: transparent;
    border: none;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.2s;
    z-index: 10;
    color: var(--brand-black);
}

#rechargeBackBtn:active, .recharge-history-btn:active {
    background: #fdf2f5;
}

/* Balance Card - Updated to Black & Pink */
.balance-card-module {
    margin: 16px; padding: 20px;
    background: var(--brand-black);
    border-radius: 16px;
    border: 1px solid var(--brand-black);
}
.balance-label-text { font-size: 11px; color: #a1a1a1; font-weight: 700; }
.balance-value-text { font-size: 26px; font-weight: 700; color: var(--brand-white); margin-top: 5px; }

/* Amount Grid Module */
.amount-section-module {
    background: var(--brand-white); margin: 0 16px 16px 16px;
    padding: 20px; border-radius: 16px;
    border: 1px solid var(--border-gray);
}
.amount-grid-layout {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 8px; margin: 15px 0;
}
.amount-btn-item {
    background: var(--brand-white); border: 1px solid var(--border-gray);
    padding: 12px 2px; border-radius: 8px;
    text-align: center; font-size: 12px; font-weight: 600; cursor: pointer;
}
.amount-btn-item.active { background: var(--brand-pink); color: var(--brand-white); border-color: var(--brand-pink); }

/* Input Styling */
.custom-input-box {
    background: #f8fafc; border: 1px solid var(--border-gray);
    border-radius: 10px; display: flex; align-items: center;
    padding: 0 16px; height: 50px;
}

/* Payment Section */
.payment-section-module {
    background: var(--brand-white); margin: 16px;
    padding: 16px; border-radius: 16px;
    border: 1px solid var(--border-gray);
}
.channel-row-item {
    border: 1px solid var(--border-gray); border-radius: 12px;
    padding: 14px; display: flex; align-items: center;
    justify-content: space-between; margin-bottom: 10px;
}
.channel-row-item.active { border: 2px solid var(--brand-pink); }
.radio-select-dot { width: 20px; height: 20px; border: 2px solid #cbd5e1; border-radius: 50%; }
.channel-row-item.active .radio-select-dot { background: var(--brand-pink); border-color: var(--brand-pink); }









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

/* ===== PREMIUM CENTER FLOATING POPUP OVERLAY ===== */
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center; /* Centered layout placement */
  background: rgba(17, 24, 39, 0.65); /* Modern deep translucent dark background */
  backdrop-filter: blur(10px); 
  -webkit-backdrop-filter: blur(10px); 
  z-index: 10000;
  padding: 20px;
  box-sizing: border-box;
}

/* ===== HIGH END FLOATING CONTAINER - MODERN PREMIUM LIGHT THEME ===== */
.mx-unique-modal {
  width: 100%;
  max-width: 340px; 
  background: #ffffff;
  border: 1px solid var(--border-subtle);
  border-radius: 24px;
  padding: 28px 18px 18px;
  text-align: center;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  position: relative;
  box-shadow: 0 25px 60px -10px rgba(0, 0, 0, 0.12),
              0 1px 3px rgba(0, 0, 0, 0.02);
  box-sizing: border-box;
  animation: popInModal 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes popInModal {
  0% { transform: scale(0.88) translateY(12px); opacity: 0; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

/* Absolute Corner Close Button */
.mx-close-x-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #f9fafb; 
  border: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
}

.mx-close-x-btn:hover {
  background: #f3f4f6;
  color: var(--text-main);
}

.mx-close-x-btn svg {
  width: 12px;
  height: 12px;
}

/* ===== BRAND FLOATING INSIGNIA TOKEN ===== */
.mx-modal-brand-token {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(5, 150, 105, 0.12);
  margin: -56px auto 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-subtle);
}

.mx-token-shape {
  width: 12px;
  height: 15px;
  background-color: var(--accent-cyan); /* Clean branding token center match */
  clip-path: polygon(0% 25%, 100% 0%, 100% 75%, 50% 100%, 50% 50%, 0% 50%);
  margin-bottom: 2px;
}

.mx-token-text {
  font-size: 7px;
  font-weight: 800;
  color: #111827;
  letter-spacing: 0.2px;
}

/* ===== COMPONENT HEADER FONTS ===== */
.mx-modal-title {
  font-size: 21px;
  font-weight: 700;
  color: #111827; /* Sharp white header typography */
  margin: 0 0 6px;
  letter-spacing: -0.02em;
}

/* ===== COMPACT WELCOME CONTENT ===== */
.mx-modal-subtitle { margin: 0 0 16px; color: #7b8490; font-size: 12px; line-height: 1.4; }
.mx-mini-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin: 0 0 18px; }
.mx-mini-item { display: inline-flex; align-items: center; gap: 5px; padding: 7px 9px; border: 1px solid #e5eee9; border-radius: 10px; background: #f7fbf8; color: #3f5d4b; font-size: 10px; font-weight: 700; }
.mx-mini-item i { color: var(--accent-cyan); font-size: 10px; }

.mx-benefit-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

/* Icons adjusted to uniform Electric Cyan theme accents */
.mx-item-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--accent-cyan); /* Pure electric cyan theme alignment */
}

.mx-item-icon svg {
  width: 18px;
  height: 18px;
}

.mx-benefit-text {
  font-size: 14px;
  color: #8b949e; /* Clean readable muted silver grey */
  line-height: 1.45;
  font-weight: 500;
}

.mx-benefit-text strong {
  color: var(--accent-cyan); /* Highlights pop up in glowing cyan text */
  font-weight: 600;
}

/* Subscript Footnotes */
.mx-popup-sub-notice {
  font-size: 12.5px;
  color: #8b949e;
  text-align: left;
  margin: 0 0 24px 0;
  padding-left: 34px;
  font-style: italic;
}

/* ===== PREMIUM INTERFACE CTA ACTION RULES ===== */
.mx-button-group {
  width: 100%;
  margin-bottom: 16px;
}

.mx-telegram-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #10b981; /* Flat royal blue layout profile matching main app CTA */
  color: #ffffff;
  width: 100%;
  padding: 15px;
  border-radius: 12px;
  font-weight: 600;
  text-decoration: none;
  font-size: 15px;
  box-sizing: border-box;
  box-shadow: 0 4px 12px rgba(47, 116, 255, 0.3);
  transition: opacity 0.15s ease;
}

.mx-telegram-btn:active {
  opacity: 0.9;
}

.mx-tg-svg {
  width: 18px;
  height: 18px;
}

/* Muted Reminder Toggle Option button */
.mx-btn-off {
  width: auto;
  background: none;
  color: #ff4d4d; /* Distinct system accent focus action toggle */
  padding: 8px 16px;
  border: none;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: -0.01em;
  transition: opacity 0.1s ease;
}

.mx-btn-off:active {
  opacity: 0.7;
}

#welcomePopup {
  display: none; /* Changed from none to flex for visibility during testing */
}

/* 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: #111827;
  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: #111827;      /* white text */
  display: none;       /* show when active */
}

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

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

/* ================= NEW INVEST CARD STYLES ================= */
.invest-card{
  width:100%;
  max-width:380px;
  position:relative;
  padding:26px 24px 28px;
  border-radius:22px;
  background:
    radial-gradient(circle at 88% -12%, rgba(0,255,136,0.16), transparent 55%),
    linear-gradient(165deg, var(--card-grad-1) 0%, var(--card-grad-2) 75%);
  border:1px solid var(--green-border);
  box-shadow:
    0 35px 70px -30px rgba(0,0,0,0.85),
    inset 0 1px 0 rgba(255,255,255,0.05);
  overflow:hidden;
  font-family: 'Inter', sans-serif;
  transition:transform .4s ease, box-shadow .4s ease, border-color .4s ease;
  margin: 0 auto 20px;
  color: var(--white);
}

.invest-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:22px;
  padding:1px;
  background:linear-gradient(180deg, rgba(0,255,136,0.35), transparent 30%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
}

.invest-card:hover{
  transform:translateY(-5px);
  border-color:rgba(0,255,136,0.45);
  box-shadow:
    0 45px 80px -28px rgba(0,0,0,0.9),
    0 0 50px -10px rgba(0,255,136,0.18),
    inset 0 1px 0 rgba(255,255,255,0.06);
}

.invest-card .header-main{
  display:flex;
  align-items:flex-start;
  gap:14px;
  margin-bottom:22px;
  position:relative;
  z-index:1;
}

.invest-card .plan-icon-box{
  flex:0 0 auto;
  width:46px;
  height:46px;
  border-radius:13px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  color:var(--green);
  background:linear-gradient(145deg, rgba(0,255,136,0.2), rgba(0,255,136,0.03));
  border:1px solid var(--green-border);
  box-shadow:inset 0 0 18px rgba(0,255,136,0.12);
}

.invest-card .title-group{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:5px;
  text-align: left;
}

.invest-card .plan-title{
  font-size:11.5px;
  font-weight:600;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--muted);
}

.invest-card .plan-price{
  margin:0;
  font-size:27px;
  font-weight:700;
  color:var(--white);
  letter-spacing:-0.01em;
  line-height:1.1;
}

.invest-card .active-tag{
  flex:0 0 auto;
  align-self:flex-start;
  font-size:11px;
  font-weight:600;
  letter-spacing:0.03em;
  color:var(--green);
  background:var(--green-soft);
  border:1px solid var(--green-border);
  padding:6px 11px;
  border-radius:20px;
  white-space:nowrap;
  animation:tagGlow 2.6s ease-in-out infinite;
}

.invest-card .timer-box{
  position:relative;
  margin:0 0 22px;
  padding:16px 18px 18px;
  text-align:center;
  border-radius:16px;
  background:linear-gradient(180deg, #060907 0%, #0A0F0C 100%);
  border:1px solid rgba(0,255,136,0.12);
  box-shadow:
    inset 0 3px 12px rgba(0,0,0,0.65),
    inset 0 -1px 0 rgba(255,255,255,0.03);
  overflow:hidden;
  z-index:1;
}

.invest-card .countdown{
  position:relative;
  z-index:1;
  font-size:32px;
  font-weight:700;
  letter-spacing:0.05em;
  color:var(--green);
  text-shadow:0 0 22px rgba(0,255,136,0.5), 0 0 2px rgba(0,255,136,0.7);
}

.invest-card .stats-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-bottom:22px;
  position:relative;
  z-index:1;
}

.invest-card .stat-box{
  padding:13px 14px;
  border-radius:12px;
  background:var(--surface);
  border:1px solid var(--hairline);
  display:flex;
  flex-direction:column;
  gap:6px;
  transition:border-color .25s ease, transform .25s ease, background .25s ease;
  text-align: left;
}

.invest-card .stat-label{
  font-size:9.5px;
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--muted);
}

.invest-card .stat-value{
  font-size:16px;
  font-weight:700;
  color:var(--white);
}

.invest-card .progress-bar-bg{
  height:7px;
  border-radius:6px;
  background:rgba(255,255,255,0.06);
  overflow:hidden;
  margin-top: 8px;
}

.invest-card .progress-fill{
  height:100%;
  border-radius:6px;
  background:linear-gradient(90deg, var(--green-dim), var(--green), var(--green-dim));
  background-size:200% 100%;
  box-shadow:0 0 14px rgba(0,255,136,0.55);
  animation:shimmer 3.2s linear infinite;
}

@keyframes shimmer{
  0%   { background-position:0% 0%; }
  100% { background-position:200% 0%; }
}

@keyframes tagGlow{
  0%, 100% { box-shadow:0 0 0 rgba(0,255,136,0); }
  50%      { box-shadow:0 0 14px rgba(0,255,136,0.35); }
}

/* DETAILS */
.details-list {
  margin-top: 12px;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: wheat;
  padding: 5px 0;
}

.detail-item span:last-child {
  color: wheat;
}

/* PROGRESS */
.progress-bar-bg {
  height: 5px;
  background: #111827;
  border-radius: 10px;
  overflow: hidden;
  margin-top: 5px;
}

.progress-fill {
  height: 100%;
  background: #00ff88;
}

/* MOBILE FIX */
@media (max-width: 480px) {
  .premium-card {
    padding: 15px;
  }

  .plan-price {
    font-size: 18px;
  }

  .countdown {
    font-size: 18px;
  }
}


@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* Strict Integration of Your Colors */
:root {
  --bg-main: #f9fafb;         /* Pure black background canvas */
  --bg-card: #ffffff;         /* Deep charcoal containers */
  --text-main: #111827;       /* Crisp white labels and title text */
  --text-muted: #6b7280;      /* Soft grey details */
  --accent-cyan: #059669;     /* The premium electric cyan */
  --accent-glow: rgba(5, 150, 105, 0.15);
  --border-subtle: #e5e7eb;   /* Subtle divider boundaries */
}

/* Master Fixed Overlay Settings */
.invite-page {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  z-index: 999;
  background-color: var(--bg-main);
  font-family: 'Inter', sans-serif;
  color: var(--text-main);
  display: none;
  flex-direction: column;
  padding-top: 0;
  padding-bottom: 88px;
  box-sizing: border-box;
}

/* ================= CLEAN FIXED INVITE HEADER ================= */
.invite-header-fixed-v2 {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  background: linear-gradient(135deg, #0b0b0d 0%, #1b1c1f 100%);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  box-sizing: border-box;
  z-index: 1000;
}

.invite-header-fixed-v2 h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.02em;
  line-height: 1;
  text-align: center;
}

/* ================= MINIMAL BACK TOGGLE SWITCH ================= */
.invite-back-btn-v2 {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  background: rgba(255,255,255,0.08);
  color: #ffffff;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  padding: 0;
}

.invite-back-btn-v2:hover,
.invite-back-btn-v2:active {
  background: rgba(255,255,255,0.16);
  color: #ffffff;
}

/* ================= SCROLL CONTAINER STREAM ================= */
.referral-container {
  width: 100%;
  max-width: 450px;
  margin: 0 auto;
  padding: 24px 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 28px; /* Clean dynamic separation spacing */
}

/* Structural Header Sections block */
.section-block-wrapper {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.section-block-title {
  font-size: 16px;
  font-weight: 600;
  color: green;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}

/* Core Element Info Boxes sitting flat on canvas background */
.referral-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-sizing: border-box;
}

.card-label {
  color: var(--text-muted);
  font-weight: 500;
  font-size: 14px;
  margin: 0;
}

/* Rebuilt Premium Action Copy Utility */
.copy-input-wrapper {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

/* Code layout mapping */
.code-display {
  color: var(--text-main);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: 1px;
  font-family: monospace;
  padding: 4px 0;
}

/* Link element styling */
.link-display {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-muted);
  font-size: 14px;
  font-family: inherit;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  padding: 6px 0;
}

/* Wide flat premium buttons to replicate screenshot behavior */
.copy-action-btn {
  width: 100%;
  background-color: #d01e1e;
  color: white;
  border: none;
  border-radius: 10px;
  padding: 14px;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px var(--accent-glow);
}

.copy-action-btn:hover {
  background-color: #00d2ff;
  transform: translateY(-1px);
}

.copy-action-btn:active {
  transform: translateY(1px);
}

/* ================= EARNINGS STRUCTURE COMPONENT ROW ================= */
.earnings-tier-row {
  background-color: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  box-sizing: border-box;
}

.tier-badge-indicator {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  flex-shrink: 0;
}

.accent-gold {
  background: linear-gradient(135deg, #ffd700, #b8860b);
  color: #000000;
}

.accent-silver {
  background: linear-gradient(135deg, #e2e8f0, #94a3b8);
  color: #000000;
}

.tier-info-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0; /* Prevents text clipping breakout layout bugs */
}

.tier-info-text h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
}

.tier-info-text p {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Capsule metric badge styling */
.tier-value-pill {
  background-color: rgba(0, 240, 255, 0.1);
  border: 1px solid rgba(0, 240, 255, 0.2);
  color: var(--accent-cyan);
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

/* ================= THE HOW IT WORKS LOGISTIC SHEET ================= */
.how-it-works-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-sizing: border-box;
  width: 100%;
}

.how-header {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-main);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-subtle);
}

.how-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.how-header i {
  color: var(--accent-cyan);
  font-size: 16px;
}

.step-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.step-check-icon {
  color: var(--accent-cyan);
  font-size: 15px;
  display: flex;
  align-items: center;
  padding-top: 2px;
}

.step-content p {
  margin: 0;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.5;
}

.highlight-cyan {
  color: var(--accent-cyan);
  font-weight: 600;
}

/* Flawless Desktop Responsiveness Layout */
@media (min-width: 576px) {
  .copy-input-wrapper {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background-color: #161b22;
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    padding: 6px 8px 6px 16px;
    height: 56px;
    gap: 16px;
  }
  
  .code-display, .link-display {
    padding: 0;
  }
  
  .copy-action-btn {
    width: auto;
    padding: 0 20px;
    height: 100%;
    white-space: nowrap;
  }
}

/* --- TEAM SECTION --- */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.title-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.title-group h2 {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-main);
}

.detail-btn {
  /* Light Purple Button */
  background: #f3e8ff;
  color: var(--purple-accent);
  border: none;
  padding: 6px 12px;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

/* --- MEMBER CARDS --- */
.member-card {
  background: white;
  border-radius: 20px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 15px;
  box-shadow: var(--card-shadow);
  margin-bottom: 12px;
  position: relative;
  border: 1px solid #fafafa;
}

.level-indicator {
  font-size: 36px;
  font-weight: 900;
  color: #121b1e; /* Purple for L1 */
  min-width: 40px;
}

.level-indicator.level-2 { color: #10b981; } /* Blue for L2 */
.level-indicator.level-3 { color: #a855f7; } /* Light Purple for L3 */

.member-stats {
  flex-grow: 1;
}

.level-badge {
  padding: 2px 10px;
  border-radius: 50px;
  font-size: 11px;
  font-weight: 700;
}

/* Updated badge colors for Purple/Blue/Lavender theme */
.blue-badge { background: #f3e8ff; color: #6a11cb; }
.green-badge { background: #eef2ff; color: #10b981; }
.orange-badge { background: #faf5ff; color: #a855f7; }

.stats-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-muted);
}

.commission-info {
  text-align: right;
}

.commission-info .label {
  display: block;
  font-size: 10px;
  color: #aaa;
  font-weight: 600;
}

.commission-info .amount {
  font-weight: 800;
  font-size: 14px;
}

/* Text colors to match the icons/badges */
.blue-text { color: #6a11cb; }
.green-text { color: #10b981; }
.orange-text { color: #a855f7; }

/* Responsive adjustments */
@media (max-width: 380px) {
  .stats-grid span { width: 100%; }
  .level-indicator { font-size: 28px; }
}


/* ================= CLEAN FIXED TEAM HEADER ================= */
.team-header-main {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  /* Swapped Red for Brand Purple Gradient */
  background: linear-gradient(135deg, green 50%, #fff 100%);
  color: #111827;
  z-index: 1000;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 18px;
}

/* Header text */
.team-header-main span {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #111827;
}

/* ================= CIRCULAR BACK BUTTON ================= */
.back-btn-white {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px; /* Slightly smaller for a tighter look */
  height: 36px;
  border-radius: 50%;
  border: none;
  /* Premium Glassmorphism Effect */
background: #ffffff;
backdrop-filter: blur(12px);         /* The Glass Blur */
-webkit-backdrop-filter: blur(12px); /* Support for Safari */

/* Glass Definition */
border: 1px solid rgba(0, 0, 0, 0.3); 
box-shadow: 0 8px 32px rgba(3, 3, 3, 0.05); /* Very subtle purple tint in shadow */
  /* Icon color is now Purple */
  color: #111827; 
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  transition: all 0.2s ease;
  outline: none;
  z-index: 1100;
}

/* Press effect */
.back-btn-white:active {
  transform: translateY(-50%) scale(0.92);
  background: #f3e8ff; /* Soft purple tint on press */
}


/* Container Background - Dark Navy */
.team-reward-page {
  background: #f5f7f6;
  min-height: 100vh;
  color: #111827;
  font-family: 'Inter', sans-serif;
}

.reward-page-body {
  max-width: 500px;
  margin: 0 auto;
  padding: 84px 16px 30px;
}

.reward-overview-card,
.reward-claim-box,
.reward-tier-card {
  background: #ffffff;
  border: 1px solid #e7e5e4;
  border-radius: 24px;
  box-shadow: 0 12px 28px rgba(17, 24, 39, 0.05);
}

.reward-overview-card {
  padding: 22px 18px 18px;
}

.reward-tier-list {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.reward-tier-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
}

.reward-tier-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
  color: #fff;
  font-size: 20px;
  box-shadow: 0 8px 18px rgba(245, 158, 11, 0.3);
}

.reward-tier-main {
  flex: 1;
  min-width: 0;
}

.reward-tier-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.reward-tier-title {
  font-size: 14px;
  font-weight: 800;
  color: #111827;
}

.reward-tier-reward {
  font-size: 13px;
  font-weight: 800;
  color: #f59e0b;
}

.reward-tier-copy {
  font-size: 12px;
  color: #6b7280;
}

.reward-tier-claim-btn {
  border: 0;
  border-radius: 10px;
  background: #f59e0b;
  color: #fff;
  padding: 10px 12px;
  min-width: 96px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.reward-tier-claim-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.reward-tier-card--locked {
  opacity: 0.8;
}

.reward-kicker {
  display: inline-block;
  margin-bottom: 12px;
  color: #f59e0b;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.reward-overview-card h2 {
  margin: 0 0 10px;
  font-size: clamp(28px, 5vw, 38px);
  letter-spacing: -0.05em;
}

.reward-overview-card p {
  margin: 0 0 18px;
  color: #4b5563;
  line-height: 1.55;
}

.reward-progress-wrap {
  margin-bottom: 12px;
}

.reward-progress-bar {
  width: 100%;
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  background: #f3f4f6;
}

.reward-progress-fill {
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #f59e0b 0%, #fbbf24 100%);
  transition: width 0.3s ease;
}

.reward-progress-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  color: #111827;
  font-weight: 700;
}

.reward-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 999px;
  background: #fff7ed;
  color: #b45309;
  font-size: 12px;
  font-weight: 700;
}

.reward-claim-box {
  margin-top: 18px;
  padding: 18px;
}

.reward-claim-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  font-size: 14px;
  color: #4b5563;
}

.reward-claim-row strong {
  color: #111827;
}

.reward-claim-btn {
  width: 100%;
  border: 0;
  border-radius: 14px;
  background: #f59e0b;
  color: #fff;
  padding: 15px 18px;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.reward-claim-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.reward-claim-btn:not(:disabled):active {
  transform: scale(0.98);
}

#earningsPage {
    background-color: #111827; 
    color: #111827;
    font-family: 'Inter', sans-serif;
    min-height: 100vh;
    padding-top: 20px;
}

.recharge-page-container {
    padding: 15px;
    max-width: 500px;
    margin: 0 auto;
}

/* | TIER SYSTEM Header */
.tier-system-title {
    color: var(--accent-cyan);
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: 2px;
    margin-bottom: 25px;
    border-left: 3px solid #10b981;
    padding-left: 10px;
}

/* The Main Tier Cards (Team 1 & Team 2) */
.tier-card-main {
   background: linear-gradient(135deg, green 50%, #fff 100%);
    border: 1px solid #1c2333;
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 20px;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.tier-card-main:active {
    transform: scale(0.98);
}

.tier-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.tier-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.2rem;
    font-weight: 700;
    color: #111827;
}

.tier-title i {
    color: #10b981; /* Blue icon */
    font-size: 1.1rem;
}

/* Blue Tier Pill */
.tier-badge {
    background: rgba(30, 58, 138, 0.5);
    color: var(--accent-cyan);
    padding: 3px 14px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
    border: 1px solid rgba(0, 212, 255, 0.2);
}

/* Grid for the 3 Stats (Members, Invest, Commission) */
.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}

.stat-box {
    background: #ffffff; /* Inner dark box */
    border: 1px solid #1c2333;
    border-radius: 12px;
    padding: 15px 5px;
    text-align: center;
}

.stat-value {
    color: var(--accent-cyan);
    font-size: 1.1rem;
    font-weight: 800;
    margin-bottom: 5px;
}

.stat-label {
    color: #64748b;
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.2;
}

/* Team Benefits Description Box (Yellow Theme) */
.benefits-container {
    background: rgba(251, 191, 36, 0.03);
    border: 1px solid rgba(251, 191, 36, 0.15);
    border-radius: 20px;
    padding: 20px;
    margin-top: 30px;
}

.benefits-title {
    color: #fbbf24;
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: #8a8d91;
    font-size: 0.85rem;
    margin-bottom: 12px;
    line-height: 1.5;
}

.benefit-item i {
    color: var(--accent-cyan); /* Cyan bullet point icon */
    font-size: 0.7rem;
    margin-top: 4px;
}

/* User List Detail View (Hidden by default) */
#detailView {
    padding-bottom: 40px;
}

.user-list-card {
    background: #121826;
    border: 1px solid #1c2333;
    border-radius: 12px;
    padding: 12px 15px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ================= WITHDRAW PAGE ================= */
.withdraw-page {
  width: 100%;
  background: #ffffff; /* The deep dark blue/black from the image */
  font-family: 'Inter', -apple-system, sans-serif;
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  color: #111827;
}

/* ================= CLEAN HEADER ================= */
.withdraw-header-fixed {
  width: 100%;
  height: 60px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  border-bottom: 1px solid #050b18;
}

.withdraw-header-fixed h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #111827; /* Dark Navy */
  font-family: 'Poppins', sans-serif;
}

.withdraw-back-btn-v2 {
  position: absolute;
  left: 15px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  color: #111827;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}


.history-btn {
  position: absolute;
  right: 15px; /* push to right */
  background: rgba(255,255,255,0.2);
  border: none;
  color: #111827;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

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

body {
  background-color: #111827; /* Deep Honda Dark Blue */
  font-family: 'Inter', sans-serif;
}

.recharge-container {
  padding: 20px 15px 50px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ================= 1. BALANCE CARD (GOLD) ================= */
.balance-card-ev {
  background: linear-gradient(180deg, #0f1d33 0%, #070e1b 100%);
  border: 1px solid #1c2e4a;
  border-radius: 20px;
  padding: 40px 20px;
  text-align: center;
  position: relative;
}

.satellite-icon {
  position: absolute;
  top: 15px;
  left: 15px;
  width: 20px;
  height: 20px;
}

.balance-label-ev {
  color: #8a94a6;
  font-size: 11px;
  letter-spacing: 1px;
  display: block;
  margin-bottom: 10px;
}

#withdrawBalance {
  color: #fbbf24; /* Honda Gold */
  font-size: 38px;
  font-weight: 800;
  text-shadow: 0 0 10px rgba(251, 191, 36, 0.2);
}

/* ================= 2. INPUT CARD ================= */
.input-card-ev {
   background: linear-gradient(135deg, green 50%, #fff 100%);
  border: 1px solid #1c2e4a;
  border-radius: 20px;
  padding: 20px;
}

.card-header-ev {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  color: #111827;
}

.min-text-ev {
  color: #536077;
  font-size: 11px;
  margin: 15px 0 10px;
}

.withdraw-input-box-ev {
  background: white;
  border: 1px solid #1c2e4a;
  border-radius: 12px;
  padding: 15px;
  display: flex;
  align-items: center;
}

.currency-neon {
  color: var(--accent-cyan);
  font-weight: bold;
  margin-right: 12px;
  font-size: 18px;
}

#withdrawAmountInput {
  background: transparent;
  border: none;
  outline: none;
  color: #111827;
  width: 100%;
  font-size: 16px;
}

.max-btn-link {
  color: var(--accent-cyan);
  font-size: 12px;
  text-align: right;
  margin-top: 12px;
  cursor: pointer;
}

/* ================= 3. BANK GRID ================= */
.bank-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.bank-sub-card {
  background: #0d1626;
  border: 1px solid #1c2e4a;
  border-radius: 15px;
  padding: 15px;
}

.sub-card-label {
  color: #536077;
  font-size: 10px;
  margin-bottom: 8px;
}

.sub-card-value {
  color: #111827;
  font-size: 13px;
  font-weight: bold;
  line-height: 1.4;
}

/* ================= 4. MAIN BUTTON ================= */
#withdrawSubmitBtn {
  background: linear-gradient(90deg, #10b981 0%, #059669 100%);
  color: #111827;
  width: 100%;
  padding: 18px;
  border-radius: 35px;
  border: none;
  font-weight: 700;
  font-size: 16px;
  text-transform: uppercase;
  box-shadow: 0 4px 15px rgba(0, 212, 255, 0.3);
  cursor: pointer;
}

/* ================= 5. RULES CARD ================= */
.rules-card-ev {
  background: #0d1626;
  border: 1px solid #1c2e4a;
  border-radius: 20px;
  padding: 20px;
}

.rules-title-ev {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: bold;
  font-size: 14px;
  margin-bottom: 20px;
  color: #111827;
}

.rule-item-ev {
  display: flex;
  gap: 12px;
  margin-bottom: 15px;
  font-size: 13px;
  color: #8a94a6;
  line-height: 1.5;
}

.rule-num {
  background: #10b981;
  color: #000000;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: bold;
  flex-shrink: 0;
}

.warning-text {
  color: #fbbf24;
  font-weight: 600;
}

.add-bank-btn {
  background: #10b981;
  color: #000;
  border: none;
  padding: 12px;
  width: 100%;
  border-radius: 12px;
  font-weight: bold;
  cursor: pointer;
}
/* ================= RECORDS PAGE ================= */
.records-page {
  width: 100vw;
  padding-top: 60px;
  margin: 0;
  font-family: Arial, sans-serif;
  height: 100vh;
  overflow-y: auto;
  background: #ffffff;
  box-sizing: border-box;
}


/* ================= BANK EMPTY STATE (Honda EV Style) ================= */
.bank-empty {
  background: #0d1626; /* Matches the inner card color */
  border: 2px dashed #1c2e4a; /* Dashed border to show it's an "empty slot" */
  border-radius: 20px;
  padding: 30px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 10px 0;
}

.bank-icon {
  font-size: 40px;
  margin-bottom: 5px;
  filter: drop-shadow(0 0 10px rgba(0, 212, 255, 0.3)); /* Slight neon glow */
}

/* ================= WITHDRAW PAGE - FRESH WALLET LAYOUT ================= */
.withdraw-page {
  min-height: 100vh;
  background: #f4f7f5;
  color: #1d2b24;
  font-family: "Poppins", "Inter", sans-serif;
}

.withdraw-header-fixed {
  position: sticky;
  top: 0;
  height: 72px;
  padding: 0 18px;
  justify-content: space-between;
  background: #176b4b;
  border: 0;
  box-shadow: 0 5px 16px rgba(20, 74, 51, .16);
  box-sizing: border-box;
}

.withdraw-header-fixed h2 {
  position: static;
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.02em;
}

.withdraw-back-btn-v2 {
  position: static;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.12);
  color: #fff;
  box-shadow: none;
}

.history-btn {
  position: static;
  padding: 8px 11px;
  border: 1px solid rgba(255,255,255,.28);
  background: transparent;
  color: #fff;
  border-radius: 9px;
  font-size: 11px;
}

.withdraw-page .recharge-container {
  width: min(100%, 560px);
  margin: 0 auto;
  padding: 18px 16px 36px;
  gap: 14px;
  box-sizing: border-box;
}

.withdraw-page .balance-card-ev {
  min-height: 132px;
  padding: 22px 20px;
  border: 0;
  border-radius: 18px;
  background: linear-gradient(135deg, #176b4b 0%, #2f9870 100%);
  text-align: left;
  box-shadow: 0 12px 24px rgba(23,107,75,.18);
}

.withdraw-page .satellite-icon {
  top: 20px;
  right: 20px;
  left: auto;
  color: #f7ce65;
  opacity: .9;
}

.withdraw-page .balance-label-ev {
  margin-bottom: 12px;
  color: rgba(255,255,255,.72);
  font-size: 10px;
  letter-spacing: .08em;
}

.withdraw-page #withdrawBalance {
  color: #fff;
  font-size: 32px;
  letter-spacing: -.04em;
  text-shadow: none;
}

.withdraw-page .input-card-ev,
.withdraw-page #withdrawBankCard,
.withdraw-page .rules-card-ev {
  border: 1px solid #dfe8e2;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 5px 14px rgba(30, 70, 50, .05);
}

.withdraw-page .input-card-ev {
  padding: 16px;
  background: #fff;
}

.withdraw-page .card-header-ev,
.withdraw-page .rules-title-ev {
  color: #24372d;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .03em;
}

.withdraw-page .min-text-ev {
  margin: 8px 0 10px;
  color: #8a968f;
  font-size: 10px;
}

.withdraw-page .withdraw-input-box-ev {
  padding: 12px 13px;
  border: 1px solid #cbdacf;
  border-radius: 11px;
  background: #f8fbf9;
}

.withdraw-page .currency-neon,
.withdraw-page .max-btn-link {
  color: #176b4b;
}

.withdraw-page #withdrawAmountInput {
  color: #1d2b24;
  font-size: 18px;
  font-weight: 700;
}

.withdraw-page .max-btn-link {
  margin-top: 9px;
  font-size: 11px;
  font-weight: 700;
}

.withdraw-page > .recharge-container > .card-header-ev {
  margin: 4px 3px -4px !important;
  padding: 0;
}

.withdraw-page #withdrawBankCard {
  padding: 12px;
}

.withdraw-page .bank-info-grid {
  gap: 8px;
}

.withdraw-page .bank-sub-card {
  padding: 12px;
  border: 1px solid #e0e9e3;
  border-radius: 11px;
  background: #f8fbf9;
}

.withdraw-page .sub-card-label {
  margin-bottom: 6px;
  color: #8a968f;
  font-size: 9px;
  font-weight: 700;
}

.withdraw-page .sub-card-value,
.withdraw-page #withdrawBankCard p {
  color: #24372d;
  font-size: 12px;
  font-weight: 700;
}

.withdraw-page #withdrawBankCard p {
  margin: 5px 2px;
}

.withdraw-page #withdrawSubmitBtn {
  padding: 14px;
  border-radius: 11px;
  background: #f0bb3f;
  color: #27341d;
  box-shadow: 0 8px 16px rgba(188, 137, 24, .18);
  font-size: 13px;
  letter-spacing: .04em;
}

.withdraw-page .rules-card-ev {
  padding: 16px;
}

.withdraw-page .rules-title-ev {
  margin-bottom: 14px;
}

.withdraw-page .rule-item-ev {
  gap: 9px;
  margin-bottom: 10px;
  color: #64746b;
  font-size: 11px;
  line-height: 1.45;
}

.withdraw-page .rule-num {
  width: 19px;
  height: 19px;
  background: #e3f2e9;
  color: #176b4b;
  font-size: 10px;
}

.withdraw-page .warning-text {
  color: #a56d09;
}

.withdraw-page .bank-empty {
  margin: 0;
  padding: 18px 12px;
  border: 1px dashed #b9d3c3;
  border-radius: 11px;
  background: #f8fbf9;
  box-shadow: none;
}

.withdraw-page .bank-empty h4 {
  color: #24372d;
}

.withdraw-page .bank-empty p {
  color: #76857c;
  font-size: 11px;
}

.withdraw-page .add-bank-btn {
  background: #176b4b;
  color: #fff;
  font-size: 11px;
}

.bank-empty h4 {
  color: #111827;
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}

.bank-empty p {
  color: #536077; /* Muted grey-blue text */
  font-size: 12px;
  line-height: 1.5;
  margin: 0;
  max-width: 80%;
}

#addAccountBtn {
  margin-top: 10px;
  background: linear-gradient(90deg, #10b981 0%, #059669 100%);
  color: #111827;
  border: none;
  padding: 12px 25px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(0, 212, 255, 0.2);
  transition: transform 0.2s ease;
}

#addAccountBtn:active {
  transform: scale(0.95);
  opacity: 0.9;
}

/* ===============================================
   RECORDS PAGE SPACING
   =============================================== */
.records-page {
  padding-top: 0px;
}


/* Specific Purple color for the Registration Bonus Icon */
.icon-bonus {
  background: rgba(168, 85, 247, 0.1);
  color: #a855f7;
  border: 1px solid rgba(168, 85, 247, 0.2);
}

/* ================= CLEAN FIXED HEADER ================= */
.records-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background: black; /* Clean white background */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  border-bottom: 1px solid #0d1117;
  font-family: 'Poppins', sans-serif;
}

/* Header title */
.records-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: green; /* Dark Navy for high contrast */
  letter-spacing: 0.5px;
}

/* ================= CIRCULAR BACK BUTTON ================= */
.records-back-btn {
  position: absolute;
  left: 15px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #e5e7eb; /* Subtle border like the image */
  background: green;
  color: #fff6e5;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Soft shadow for depth */
  transition: transform 0.1s ease;
  outline: none;
  font-size: 16px;
}

.records-back-btn:active {
  transform: scale(0.95);
  background: #f9f9f9;
}


#recordsContainer {
  padding: 10px 0;
}


#recordsContainer {
  padding: 15px;
  background-color: white; /* Dark background like the screenshot */
  min-height: 100vh;
}

/* ================= RECORD CARD ================= */
.record-card {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 18px;
  background: #161b22; /* Card background color */
  border-radius: 12px; /* Rounded corners for the card */
  margin-bottom: 12px;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* ================= ICON SECTION ================= */
.record-icon-box {
  width: 42px;
  height: 42px;
  border-radius: 50%; /* Circular icons as seen in screenshot */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  margin-right: 15px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Colors based on screenshot */
.icon-withdrawal, .icon-minus { 
  background: transparent; 
  color: #111827; 
  border: 1px solid rgba(255,255,255,0.2);
}

/* ================= CONTENT SECTION ================= */
.record-middle {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.record-transaction {
  font-weight: 600;
  font-size: 15px;
  color: #fff6e5;
  margin-bottom: 4px;
}

.record-time {
  font-size: 12px;
  color: #8b949e; /* Muted gray */
}

.record-right {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.record-amount {
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 8px;
}

/* Withdrawal Red/Pink Color from image */
.amount-minus { color: #f85149; } 
.amount-plus { color: #f59e0b; }

/* ================= STATUS PILL ================= */
.record-status {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255, 255, 255, 0.05); /* Dark pill bg */
}

/* Status: Confirmed / Success */
.status-success {
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.12);
}

.status-success::before {
  content: '';
  width: 6px;
  height: 6px;
  background-color: #f59e0b;
  border-radius: 50%;
  display: inline-block;
}

/* Status: Pending */
.status-pending {
  color: #d29922;
  background: rgba(210, 153, 34, 0.1);
}

/* Status: Failed */
.status-failed {
  color: #f85149;
  background: rgba(248, 81, 73, 0.1);
}


/* ================= FILTER (DARK THEME) ================= */
.records-filter {
  display: flex;
  gap: 25px; /* Slightly wider gap for a cleaner look */
  padding: 15px 10px;
  overflow-x: auto;
  justify-content: center;
  background-color: #f3e8ff; /* Matches the dark background */
  border-bottom: 1px solid rgba(255, 255, 255, 0.05); /* Subtle dark border */
}

.filter-btn {
  border: none;
  padding: 8px 0;
  background: transparent;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  color: #8b949e; /* Muted gray for inactive text */
  white-space: nowrap;
  transition: all 0.2s ease;
  position: relative;
  outline: none;
}

/* Active Text State - Bright Blue and Bold */
.filter-btn.active {
  color: #059669; /* Your brand blue */
  font-weight: 700;
}

/* Bottom line for active text */
.filter-btn.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: #059669;
  border-radius: 10px 10px 0 0; /* Slightly rounded top for the line */
}

.filter-btn:active {
  transform: scale(0.95);
  opacity: 0.8;
}

/* Hide scrollbar for cleaner look while keeping functionality */
.records-filter::-webkit-scrollbar {
  display: none;
}
.records-filter {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

/* ================= RESPONSIVE ================= */
@media (max-width: 480px) {
  .record-card { padding: 14px; min-height: 90px; }
  .record-transaction { font-size: 16px; }
}


/* ================= 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: #059669;
  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: #059669;
  color: #ffffff;
  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;
}

}


/* ================= PAGE WRAPPER ================= */
.investment-page {
  background: #f4f6f2;
  min-height: 100vh;
  width: 100%;
  padding-bottom: 92px;
  display: flex;
  flex-direction: column;
  /* Crucial: Forces content to start at the top, not center */
  justify-content: flex-start !important; 
  align-items: stretch; 
  overflow-y: auto;
  box-sizing: border-box;
  margin: 0;
  padding: 0; /* Removed the 75px padding from here */
}

/* ================= FIXED HEADER ================= */
.investment-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 64px;
  background: #17382d;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 5px 18px rgba(20,55,43,.18);
}

.investment-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
  font-family: 'Poppins', sans-serif;
}

/* Back Button */
.investment-back-btn {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: #ffffff;
  cursor: pointer;
}

/* ================= SUB-HEADER (SNAPS TO TOP) ================= */
.investment-sub-header {
  /* 60px for header height + 20px extra breathing room = 80px */
  padding: 88px 18px 18px;
  background: linear-gradient(145deg, #17382d 0%, #215541 100%);
  width: 100%;
  box-sizing: border-box;
}

.investment-sub-header h1 {
  margin: 0;
  font-size: 25px;
  font-weight: 850;
  color: #ffffff;
  font-family: 'Poppins', sans-serif;
}

.investment-sub-header p {
  margin: 5px 0 0 0;
  font-size: 14px;
  color: rgba(255,255,255,.68);
  line-height: 1.4;
}

.investment-kicker { display: block; margin-bottom: 7px; color: #c6e8a3; font-size: 9px; font-weight: 800; letter-spacing: .15em; }
.investment-summary-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 18px; }
.investment-summary-strip > div { padding: 10px 8px; border: 1px solid rgba(255,255,255,.12); border-radius: 13px; background: rgba(255,255,255,.1); text-align: center; }
.investment-summary-strip strong, .investment-summary-strip span { display: block; }
.investment-summary-strip strong { color: #fff; font-size: 13px; }
.investment-summary-strip strong i { color: #c6e8a3; }
.investment-summary-strip span { margin-top: 3px; color: rgba(255,255,255,.6); font-size: 9px; }

/* ================= CARD WRAPPER ================= */
.card-wrapper {
  padding: 16px 14px 40px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
}

.investment-page .card-wrapper .invest-card { padding: 16px; border: 1px solid #dce8df; border-radius: 20px; background: #fff; box-shadow: 0 9px 20px rgba(26,67,50,.06); }
.investment-page .card-wrapper .header-main { gap: 10px; }
.investment-page .card-wrapper .plan-icon-box { width: 40px; height: 40px; border-radius: 13px; background: #e3f5e8; color: #138252; }
.investment-page .card-wrapper .plan-title { color: #7c8d85; font-size: 10px; letter-spacing: .08em; }
.investment-page .card-wrapper .plan-price { margin-top: 3px; color: #17382d; font-size: 20px; }
.investment-page .card-wrapper .active-tag { padding: 5px 8px; border-radius: 999px; background: #e7f6ec; color: #198454; font-size: 10px; font-weight: 800; }
.investment-page .card-wrapper .timer-box { margin: 14px 0; padding: 13px; border: 1px solid #e4efe7; border-radius: 14px; background: #f7fbf8; }
.investment-page .card-wrapper .timer-label { color: #7b9186; font-size: 9px; letter-spacing: .1em; }
.investment-page .card-wrapper .countdown { margin-top: 5px; color: #147b51; font-size: 18px; font-weight: 850; }
.investment-page .card-wrapper .progress-bar-bg { height: 7px; border-radius: 999px; background: #e6eee9; }
.investment-page .card-wrapper .progress-fill { border-radius: inherit; background: #159765; }
.investment-page .card-wrapper .stats-grid { gap: 8px; margin-top: 14px; }
.investment-page .card-wrapper .stat-box { padding: 10px 8px; border: 1px solid #edf1ed; border-radius: 12px; background: #fafcf9; }
.investment-page .card-wrapper .stat-label { color: #8b9992; font-size: 8px; }
.investment-page .card-wrapper .stat-value { margin-top: 4px; color: #214b3b; font-size: 12px; }

/* Section Title styling sitting flat on your dark canvas background */
.product-section-title {
  font-family: 'Inter', sans-serif;
  font-size: 20px;            /* Compact, crisp, and clean—no giant text weights */
  font-weight: 700;
  color: var(--text-main);    /* Sharp white text color */
  letter-spacing: -0.02em;
  margin-bottom: 20px;        /* Spacing above your dynamic list cards */
  padding-left: 16px;         /* Perfectly aligned with your mobile/desktop stream padding */
  text-align: left;           /* Left-aligned exactly like the image */
}

/* Optional desktop adjustment to prevent it shifting out of bounds */
@media (min-width: 576px) {
  .product-section-title {
    max-width: 440px;
    margin: 0 auto 24px auto; /* Centers flawlessly with the list on desktop */
    padding-left: 16px;
  }
}

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* Integration of your exact palette */
:root {
  --bg-main: #f9fafb;         /* Pure black canvas background */
  --bg-card: #ffffff;         /* Deep charcoal box container base */
  --text-main: #111827;       /* Headings */
  --text-muted: #6b7280;      /* Labels */
  --accent-cyan: #059669;     /* The premium electric cyan */
  --accent-glow: rgba(5, 150, 105, 0.15);
  --border-line: #e5e7eb;     /* Flat layout rule separators */
}

/* Container adjustment for single stream layout across mobile/desktop */
#dynamicProductList {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
  padding: 16px !important;
  padding-bottom: 100px !important; 
  background: #f2f2f2 !important; /* Managed by your primary background */
  width: 100%;
  max-width: 400px; /* Aligns with login/signup and dashboard flow specifications */
  margin: 0 auto;
  box-sizing: border-box;
}

/* THE UPGRADED CARD COMPONENT */
/* ── Card shell ── */
.mx-product-card {
  background: #fff;
  border: 0.5px solid #c0ddc9;
  border-radius: 24px;
  width: 100%;
  overflow: hidden;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.mx-product-card:hover {
  transform: translateY(-3px);
  border-color: #639922;
}

/* ── Header ── */
.mx-card-header {
  background: #2d5a0e;
  padding: 20px 20px 18px;
}
.mx-header-top {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 18px;
}

/* ── Image slot ── */
.mx-img-slot {
  width: 50px;
  height: 50px;
  border-radius: 13px;
  background: #1e3d09;
  border: 1.5px solid #639922;
  overflow: hidden;
  flex-shrink: 0;
}
.mx-img-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Brand pill ── */
.mx-brand-col  { display: flex; flex-direction: column; gap: 5px; }
.mx-brand-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #1e3d09;
  border-radius: 30px;
  padding: 4px 10px;
  width: fit-content;
}
.mx-brand-dot  { width: 5px; height: 5px; border-radius: 50%; background: #97C459; }
.mx-brand-text { font-size: 10px; font-weight: 500; color: #97C459; letter-spacing: 0.1em; }
.mx-plan-name  { font-size: 15px; font-weight: 500; color: #fff; }

/* ── Price block ── */
.mx-price-block {
  border-top: 0.5px solid #3b6d11;
  padding-top: 14px;
}
.mx-price-label {
  font-size: 11px;
  color: #97C459;
  letter-spacing: 0.04em;
  display: block;
  margin-bottom: 3px;
}
.mx-main-price {
  font-size: 32px;
  font-weight: 500;
  color: #fff;
  line-height: 1;
}

/* ── Data rows ── */
.mx-card-body { padding: 4px 0; }

.mx-data-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 20px;
  border-bottom: 0.5px solid #eaf3de;
}
.mx-data-row:last-child { border-bottom: none; }

.mx-row-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mx-row-left i {
  font-size: 15px;
  color: #3b6d11;
  background: #eaf3de;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mx-info-label { font-size: 12px; color: #5f5e5a; }
.mx-info-value { font-size: 13px; font-weight: 500; color: #27500A; }

/* ── Highlight row ── */
.mx-highlight-row { background: #f6fcf1; }
.mx-highlight-row .mx-info-label { color: #3b6d11; font-weight: 500; }
.mx-highlight-row i {
  background: #c0dd97 !important;
  color: #1e3d09 !important;
}
.mx-earnings-val {
  background: #c0dd97;
  border-radius: 8px;
  padding: 3px 10px;
  font-size: 14px;
  font-weight: 500;
  color: #1e3d09;
}

/* ── Footer & button ── */
.mx-card-footer { padding: 16px 20px 20px; }

.mx-invest-btn {
  width: 100%;
  background: #2d5a0e;
  color: #fff;
  border: none;
  border-radius: 13px;
  padding: 14px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  letter-spacing: 0.01em;
  transition: background 0.15s ease, transform 0.1s ease;
}
.mx-invest-btn i   { font-size: 16px; }
.mx-invest-btn:hover  { background: #1e3d09; }
.mx-invest-btn:active { transform: scale(0.97); } 

/* THE PLASTERED VECTOR BRANDING LOGO (Recreated perfectly via pure code) */

/* Desktop Responsiveness Scaling */
@media (min-width: 576px) {
  #dynamicProductList {
    max-width: 440px;
    gap: 28px !important;
  }
}


/* 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: 20px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: #111827;
  border: 0.5px solid #2d2d2d;
  border-radius: 50px;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  width: max-content;
  max-width: 90%;
  z-index: 999999;
  opacity: 0;
  pointer-events: none;
  transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.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: #111827;
  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);
}

/* Typography styles */
.loader-brand-title {
  color: var(--text-main);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 4px;
  margin-bottom: 6px;
}

.loader-status-text {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 20px;
}

/* Horizontal slide progress bar */
.loader-progress-bar {
  width: 120px;
  height: 4px;
  background: var(--border-subtle);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

.loader-progress-fill {
  width: 45%;
  height: 100%;
  background: var(--accent-cyan);
  border-radius: 10px;
  position: absolute;
  animation: progress-loop 1.6s ease-in-out infinite;
}

@keyframes shimmerSweep { 0% { transform: translateX(0); } 100% { transform: translateX(360%); } }

/* --- ANIMATION KEYFRAMES --- */
@keyframes spin-clockwise {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes spin-counterclockwise {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}

@keyframes logo-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 4px 12px rgba(5, 150, 105, 0.1); }
  50% { transform: scale(1.08); box-shadow: 0 6px 20px rgba(5, 150, 105, 0.25); }
}

@keyframes progress-loop {
  0% { left: -45%; }
  50% { left: 100%; }
  100% { left: 100%; }
}


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


/* 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: #10b981; /* 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: #111827;   /* 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;
  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;
}


/* ================= PROTECTED UI ================= */
#dashboard,
#bottomNav {
  display: none;
}


/* ================= FLOATING NAV CONTROL (BLACK + GOLD) ================= */
#navToggle {
  position: fixed;
  bottom: 90px; /* sits above bottom nav */
  right: 20px;

  width: 64px;
  height: 44px;
  border-radius: 999px;

  background: rgba(255, 255, 255, 0.9); /* black semi-transparent */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  color: #D4AF37;  /* gold text/icon */
  font-size: 22px;

  border: 1px solid rgba(212,175,55,0.35); /* subtle gold border */
  cursor: pointer;

  z-index: 2001;
  display: none; /* auth decides */

  box-shadow: 0 8px 18px rgba(212,175,55,0.25); /* subtle gold shadow */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Show toggle ONLY when logged in */
body.logged-in #navToggle {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Hover / press feedback */
#navToggle:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(212,175,55,0.35); /* stronger gold glow */
}

#navToggle:active {
  transform: scale(0.95);
}


/* ================= BOTTOM NAV ================= */

/* Hidden forever by default */
#bottomNav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  transform: translateY(100%);
  transition: transform 0.3s ease;
  z-index: 2000;
}

/* Visible ONLY when toggled */
#bottomNav.open {
  transform: translateY(0);
}


/* ================= 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: #059669;       /* Telegram blue */
  color: #111827;            /* white icon/text */

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

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

  box-shadow: 0 8px 20px rgba(5, 150, 105,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(5, 150, 105,0.45); /* stronger blue shadow */
}

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




/* ================= MODERN TOAST NOTIFICATIONS ================= */
#toast-container {
  position: fixed;
  top: 84px;
  right: 18px;
  z-index: 10001;
  display: flex;
  width: min(360px, calc(100vw - 36px));
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.modern-toast {
  pointer-events: auto;
  display: flex;
  width: 100%;
  align-items: center;
  gap: 11px;
  padding: 12px 14px 12px 12px;
  overflow: hidden;
  border: 1px solid rgba(26, 72, 52, .12);
  border-radius: 14px;
  background: rgba(255,255,255,.96);
  color: #24352c;
  box-shadow: 0 12px 28px rgba(24, 61, 43, .14), 0 2px 5px rgba(24,61,43,.06);
  font-family: "Poppins", "Inter", sans-serif;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.4;
  box-sizing: border-box;
  position: relative;
  isolation: isolate;
  transform: translateX(22px);
  opacity: 0;
  animation: toastSlideIn .32s cubic-bezier(.22, 1, .36, 1) forwards;
}

.modern-toast::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  content: "";
  background: #238463;
}

.modern-toast::after {
  position: absolute;
  z-index: -1;
  top: -22px;
  right: -18px;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  content: "";
  background: rgba(35,139,99,.08);
}

@keyframes toastSlideIn {
  to { transform: translateX(0); opacity: 1; }
}

.modern-toast.toast-error::before { background: #d95c55; }
.modern-toast.toast-error::after { background: rgba(217,92,85,.09); }
.modern-toast.toast-warning::before { background: #d59d28; }
.modern-toast.toast-warning::after { background: rgba(213,157,40,.1); }

.modern-toast .toast-icon {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  place-items: center;
  border-radius: 10px;
  background: #e5f5ec;
  color: #238463;
  font-size: 15px;
}

.modern-toast.toast-error .toast-icon {
  background: #fde9e7;
  color: #d95c55;
}

.modern-toast.toast-warning .toast-icon {
  background: #fff4d7;
  color: #b17c13;
}

.modern-toast > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 480px) {
  #toast-container {
    top: 76px;
    right: 12px;
    width: calc(100vw - 24px);
  }
}

/* Legacy component helpers kept for any older toast markup. */
.toast-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.toast-title { font-size: 13px; font-weight: 700; color: #24352c; }
.toast-sub { font-size: 11px; color: #718078; }
.pulse-dot { display: none; }

/* Legacy animation alias for older markup. */
@keyframes dynamicPop {
  from { transform: translateY(-6px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* Legacy icon wrapper. */
.icon-wrap {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: #e5f5ec;
  color: #238463;
  display: grid;
  place-items: center;
}

/* ================= PROFILE PAGE — MOBILE BANK STYLE ================= */
.profile-page {
  --profile-yellow: #f5d32c;
  --profile-ink: #111827;
  --profile-soft: #f3f4f6;
  --profile-line: #e5e7eb;
  max-width: 480px;
  min-height: 100dvh;
  margin: 0 auto;
  background: var(--profile-soft);
  padding-bottom: 84px;
  color: var(--profile-ink);
}

.profile-page .dashboard-top-section {
  position: relative;
  padding: 16px 16px 96px;
  background: linear-gradient(180deg, #0b0b0d 0%, #4a4a4b 100%);
  border: 0;
  min-height: 230px;
  box-sizing: border-box;
}

.profile-page .profile-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 20px;
  gap: 12px;
}

.profile-page .profile-brand-logo {
  display: flex;
  align-items: center;
  gap: 8px;
}

.profile-page .logo-geometric-shape {
  width: 18px;
  height: 18px;
  border-radius: 8px;
  background: var(--profile-yellow);
}

.profile-page .logo-text {
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.profile-page .profile-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
}

.profile-page .status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--profile-yellow);
  box-shadow: 0 0 0 3px rgba(245,211,44,0.18);
}

.profile-page .profile-avatar-container {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 8px;
}

.profile-page .profile-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid var(--profile-yellow);
  background: #f4f4f2 url('Rambo logo.jpg') center / 78% no-repeat;
  box-shadow: 0 8px 18px rgba(0,0,0,0.2);
}

.profile-page .profile-avatar i { display: none; }

.profile-page .profile-verified-badge {
  position: absolute;
  left: 52px;
  bottom: -2px;
  min-width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--profile-yellow);
  border: 2px solid #111827;
  color: #111827;
  font-size: 10px;
  font-weight: 800;
}

.profile-page .profile-verified-badge i { display: none; }

.profile-page .honda-user-meta {
  min-height: auto;
  padding: 0;
}

.profile-page .honda-user-meta h2 {
  margin: 0;
  color: #fff;
  font-size: 18px;
  line-height: 1.2;
  font-weight: 700;
}

.profile-page .honda-user-meta h2::before { content: ''; }

.profile-page .honda-user-meta p {
  margin: 6px 0 0;
  color: rgba(255,255,255,0.75);
  font-size: 12px;
}

.profile-page .profile-meter {
  display: none;
}

.profile-page .profile-summary {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: -32px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--profile-yellow);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 18px 28px rgba(0,0,0,0.12);
}

.profile-page .profile-summary-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 88px;
  padding: 16px 6px;
  border: 0;
  background: transparent;
  color: var(--profile-ink);
}

.profile-page .profile-summary-item + .profile-summary-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 1px;
  background: rgba(17,24,39,0.18);
}

.profile-page .profile-summary-item strong {
  font-size: clamp(18px, 4vw, 26px);
  font-weight: 800;
  letter-spacing: -0.05em;
  color: var(--profile-ink);
}

.profile-page .profile-summary-item span {
  font-size: 12px;
  font-weight: 600;
  color: rgba(17,24,39,0.72);
}

.profile-page .income-summary-item {
  background: linear-gradient(155deg, #fff6cf 0%, #f4c95d 100%);
  cursor: pointer;
}

.profile-page .income-summary-item:hover {
  background: linear-gradient(155deg, #fff9df 0%, #f8d879 100%);
}

.profile-page .income-summary-icon {
  color: #107a5a;
  font-size: 15px;
  margin-bottom: -2px;
}

.records-page.income-view .records-header {
  background: linear-gradient(135deg, #113c35 0%, #176b55 100%);
  color: #fff;
}

.records-page.income-view .records-header h2::after {
  content: '  •  Package income';
  display: block;
  margin-top: 3px;
  color: rgba(255, 255, 255, .68);
  font-size: 11px;
  font-weight: 500;
}

.profile-page .profile-scroll-container {
  padding: 52px 16px 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: var(--profile-soft);
}

.profile-page .settings-group-wrapper {
  padding: 14px 12px 12px;
  border: 1px solid #dfe8e2;
  border-radius: 18px;
  background: rgba(255,255,255,.66);
  box-shadow: 0 8px 18px rgba(28,69,48,.045);
}

.profile-page .settings-group-wrapper::before,
.profile-page .settings-group-wrapper::before { display: none; }

.profile-page .settings-group-title {
  display: block;
  margin: 0 4px 9px;
  color: #74877d;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .14em;
}

.profile-page .settings-list-box {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: #fff;
  border: 1px solid #e3ebe6;
  border-radius: 13px;
  overflow: hidden;
}

.profile-page .password-change-panel {
  margin: 8px;
  padding: 13px;
  border: 1px solid #e3ebe6;
  border-radius: 11px;
  background: #f7faf8;
}

.profile-page .password-change-heading {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.profile-page .password-change-heading .item-left-side {
  gap: 14px;
}

.profile-page .password-change-heading .item-left-side i {
  width: 22px;
  color: #111827 !important;
  text-align: center;
  font-size: 18px;
}

.profile-page .password-change-heading .item-left-side span {
  color: #111827;
  font-size: 13px;
  font-weight: 700;
}

.profile-page .password-change-chevron {
  color: #64748b;
  font-size: 13px;
  transition: transform .2s ease;
}

.profile-page .password-change-panel.is-open .password-change-chevron {
  transform: rotate(180deg);
}

.profile-page .password-change-form {
  display: none;
  gap: 7px;
  margin-top: 14px;
}

.profile-page .password-change-panel.is-open .password-change-form {
  display: grid;
}

.profile-page .password-change-form label {
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
}

.profile-page .password-change-form input {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--profile-line);
  border-radius: 10px;
  background: #fff;
  color: #111827;
  font: inherit;
  box-sizing: border-box;
}

.profile-page .password-change-submit {
  margin-top: 6px;
  padding: 12px;
  border: 0;
  border-radius: 10px;
  background: var(--boutique-green);
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
}

.profile-page .password-change-submit:disabled {
  cursor: wait;
  opacity: .65;
}

.profile-page .settings-item-row,
.profile-page .settings-item-link .settings-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 58px;
  padding: 0 13px;
  margin: 0;
  background: #fff;
  border: 0;
  border-radius: 0;
  box-sizing: border-box;
}

.profile-page .settings-item-row + .settings-item-row,
.profile-page .settings-item-link + .settings-item-row,
.profile-page .settings-item-link + .settings-item-link {
  margin-top: 8px;
  border-top: 1px solid #edf2ee;
}

.profile-page .item-left-side {
  display: flex;
  align-items: center;
  gap: 11px;
}

.profile-page .item-left-side i {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 9px;
  background: #e8f4ed;
  text-align: center;
  font-size: 13px;
  color: var(--boutique-green) !important;
}

.profile-page .item-left-side span {
  font-size: 13px;
  font-weight: 700;
  color: #111827;
}

.profile-page .chevron-indicator {
  color: #9aaba2;
  font-size: 12px;
}

.profile-page .logout-row {
  background: #fffafa;
}

.profile-page .logout-row .item-left-side i,
.profile-page .logout-row .item-left-side span {
  color: #ef4444 !important;
}

.profile-page .profile-legacy-summary,
.profile-page .honda-action-group,
.profile-page .profile-meter { display: none; }

@media (max-width: 380px) {
  .profile-page .dashboard-top-section { padding-left: 14px; padding-right: 14px; }
  .profile-page .profile-summary { left: 14px; right: 14px; }
  .profile-page .item-left-side span { font-size: 16px; }
}

/* ================= DASHBOARD & TOP-UP — RESPONSIVE REFRESH ================= */
:root { --rambo-yellow: #ffd400; --rambo-dark: #151515; --rambo-paper: #f5f5f3; }

.dashboard {
  width: 100%;
  max-width: 520px;
  min-height: 100dvh;
  margin: 0 auto;
  padding: 14px 14px calc(98px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, #f8f8f5 0%, #f1f1ed 100%);
  color: var(--rambo-dark);
}
.dashboard-welcome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 4px 18px;
}
.dashboard-welcome-copy {
  position: relative;
  flex: 1;
  min-width: 0;
}
.dashboard-welcome-copy::before {
  content: '';
  position: absolute;
  inset: -8px auto auto -8px;
  width: 70px;
  height: 70px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(245,158,11,.16), rgba(255,255,255,0));
  z-index: 0;
}
.dashboard-welcome p {
  position: relative;
  z-index: 1;
  margin: 0 0 6px;
  color: #8a8a83;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .18em;
}
.dashboard-welcome h1 {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--rambo-dark);
  font-size: clamp(27px, 7vw, 34px);
  font-weight: 900;
  line-height: .95;
  letter-spacing: -.08em;
  text-shadow: 0 8px 18px rgba(30,42,37,.08);
}
.dashboard-welcome-mark {
  position: relative;
  display: grid;
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  place-items: center;
  border: 3px solid rgba(255,255,255,.9);
  border-radius: 18px;
  background: linear-gradient(135deg, #f8c766 0%, #f59e0b 55%, #d97706 100%);
  color: #fff;
  box-shadow: 0 14px 26px rgba(245,158,11,.28), inset 0 1px 0 rgba(255,255,255,.35);
  font-size: 21px;
  transform: rotate(-6deg);
  animation: welcomeBadgeFloat 2.8s ease-in-out infinite;
}
.dashboard-welcome-mark::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 22px;
  border: 1px solid rgba(245,158,11,.22);
  animation: welcomeBadgeGlow 2.8s ease-in-out infinite;
}
.dashboard-welcome-mark i {
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.12));
}

@keyframes welcomeBadgeFloat {
  0%,
  100% { transform: rotate(-6deg) translateY(0); }
  50% { transform: rotate(-2deg) translateY(-4px); }
}

@keyframes welcomeBadgeGlow {
  0%,
  100% { opacity: .4; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}

.dashboard .live-payout-container {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  min-height: 52px;
  margin: 0 0 14px;
  padding: 8px 12px;
  border: 1px solid rgba(239,68,68,.16);
  border-radius: 18px;
  background: linear-gradient(135deg, #fff4f4 0%, #fffaf5 100%);
  box-shadow: 0 10px 24px rgba(239,68,68,.08);
}
.dashboard .live-indicator {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(239,68,68,.09);
}
.dashboard .live-label {
  color: #d93d3d;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .12em;
}
.dashboard .live-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 0 4px rgba(239,68,68,.12), 0 0 10px rgba(239,68,68,.55);
  animation: livePulse 1.7s ease-in-out infinite;
}
.dashboard .payout-ticker {
  min-width: 0;
  overflow: hidden;
  color: #5b5149;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@keyframes livePulse {
  0%,
  100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.18); opacity: .8; }
}

.dashboard .flyer-container {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 4px;
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(245,158,11,.22), rgba(18,26,34,.06), rgba(245,158,11,.15));
  box-shadow: 0 20px 28px rgba(22,22,22,.08);
}
.dashboard .balance-flyer {
  position: relative;
  width: 100%;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.75);
  border-radius: 24px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28), 0 12px 22px rgba(0,0,0,.08);
}
.dashboard .balance-flyer::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,0));
  pointer-events: none;
  z-index: 1;
}
.dashboard .flyer-slider { display: flex; }
.dashboard .flyer-card {
  display: block;
  width: 100%;
  min-width: 100%;
  height: clamp(155px, 48vw, 225px);
  object-fit: cover;
  border-radius: 24px;
  transform: scale(1.02);
}
.dashboard .main-container { width: 100%; max-width: none; margin: 12px 0 16px; padding: 14px 12px 16px; border: 1px solid #eee9d9; border-radius: 20px; background: #fffdf7; box-shadow: 0 8px 18px rgba(111,91,30,.06); box-sizing: border-box; }
.dashboard-section-label { display: flex; align-items: baseline; justify-content: space-between; margin: 0 2px 10px; color: #202020; font-size: 13px; font-weight: 900; letter-spacing: -.01em; }
.dashboard-section-label span { color: #999991; font-size: 10px; font-weight: 600; letter-spacing: 0; }
.dashboard .action-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 8px; }
.dashboard .action-card { width: 100%; max-width: 88px; min-width: 0; min-height: 92px; flex-direction: column; justify-content: center; gap: 6px; padding: 10px 6px 8px; border: 1px solid rgba(17,24,39,.06); border-radius: 18px; background: #fff; box-shadow: 0 8px 16px rgba(17,24,39,.04); animation: dashboardCardIn .45s both; }
.dashboard .action-card:nth-child(2) { animation-delay: .05s; }
.dashboard .action-card:nth-child(3) { animation-delay: .1s; }
.dashboard .action-card:nth-child(4) { animation-delay: .15s; }
.dashboard .action-card:nth-child(5) { animation-delay: .2s; }
.dashboard .action-card:nth-child(6) { animation-delay: .25s; }
.dashboard .action-icon { width: 38px; height: 38px; flex: 0 0 38px; margin: 0; display: grid; place-items: center; border-radius: 12px; font-size: 16px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25), 0 5px 10px rgba(0,0,0,.06); transition: transform .25s ease; color: inherit; }
.dashboard .action-icon i { color: inherit; }
.dashboard .action-icon-gold { background: #fff1c7 !important; color: #b7791f !important; }
.dashboard .action-icon-blue { background: #dfeeff !important; color: #2563eb !important; }
.dashboard .action-icon-purple { background: #f3e8ff !important; color: #7c3aed !important; }
.dashboard .action-icon-green { background: #ffedd5 !important; color: #ea580c !important; }
.dashboard .action-icon-orange { background: #ffedd5 !important; color: #f97316 !important; }
.dashboard .action-icon-red { background: #ffe4e6 !important; color: #dc2626 !important; }
.dashboard .action-copy { min-width: 0; text-align: center; }
.dashboard .action-copy strong, .dashboard .action-copy small { display: block; }
.dashboard .action-copy strong { overflow: hidden; color: #4c4941; font-size: 10px; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }
.dashboard .action-copy small { margin-top: 2px; color: #aaa69a; font-size: 8px; font-weight: 600; }
.dashboard .action-card-link { text-decoration: none; }
.dashboard .action-card:hover { transform: translateY(-3px); }
.dashboard .action-card:hover .action-icon { transform: rotate(-7deg) scale(1.08); }

@keyframes dashboardCardIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.dashboard .product-section { width: 100%; box-sizing: border-box; margin: 0; }
.dashboard .product-section-heading { display: flex; align-items: flex-end; justify-content: space-between; margin: 4px 2px 11px; }
.dashboard .product-section-heading .dashboard-section-label { margin: 0 0 3px; color: #a18a27; font-size: 9px; letter-spacing: .1em; }
.dashboard .product-section-title { margin: 0; color: var(--rambo-dark) !important; font-size: 19px; font-weight: 900; letter-spacing: -.04em; }
.dashboard .product-section-heading > i { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 11px; background: #fff4c8; color: #957800; font-size: 14px; }
.dashboard .product-list-container { width: calc(100% + 8px); margin-left: -4px; }
.dashboard #dynamicProductList { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; flex-direction: initial !important; gap: 8px !important; padding: 2px !important; background: transparent !important; }
.dashboard #dynamicProductList .mx-product-card { display: block; border: 1px solid #cfe1da; border-radius: 19px; background: #fff; box-shadow: 0 7px 16px rgba(29,74,57,.07); }
.dashboard #dynamicProductList .mx-product-card:hover { border-color: #159765; transform: translateY(-3px); }
.dashboard #dynamicProductList .mx-product-image { position: relative; overflow: hidden; aspect-ratio: 1.18 / 1; background: #dfeee7; }
.dashboard #dynamicProductList .mx-product-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dashboard #dynamicProductList .mx-quota-badge { position: absolute; top: 9px; left: 9px; padding: 5px 9px; border: 1px solid rgba(21,151,101,.18); border-radius: 999px; background: rgba(244,251,247,.94); color: #19724f; font-size: 10px; font-weight: 800; }
.dashboard #dynamicProductList .mx-product-content { padding: 13px 12px 12px; }
.dashboard #dynamicProductList .mx-product-name { margin: 0 0 11px; overflow: hidden; color: #193d31; font-size: 14px; font-weight: 850; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.dashboard #dynamicProductList .mx-product-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 0 0 9px; color: #71817b; font-size: 11px; }
.dashboard #dynamicProductList .mx-product-row strong { color: #1d3f34; font-size: 11px; font-weight: 800; text-align: right; white-space: nowrap; }
.dashboard #dynamicProductList .mx-product-row:nth-of-type(2) strong, .dashboard #dynamicProductList .mx-product-row:nth-of-type(3) strong { color: #167b54; }
.dashboard #dynamicProductList .mx-invest-btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 36px; margin-top: 12px; border: 0; border-radius: 999px; background: #07965d; color: #fff; font-size: 12px; font-weight: 800; cursor: pointer; transition: background .2s ease, transform .2s ease; }
.dashboard #dynamicProductList .mx-invest-btn:hover { background: #057b4d; transform: translateY(-1px); }
.dashboard #dynamicProductList .mx-product-card.is-presale .mx-quota-badge { border-color: #f2d7bd; background: #fff7ef; color: #b06a32; }
.dashboard #dynamicProductList .mx-product-card.is-presale .mx-invest-btn { background: #e7f2ed; color: #64776e; cursor: not-allowed; }
.dashboard #dynamicProductList .mx-product-card.is-presale .mx-product-image { filter: saturate(.88); }
.dashboard #dynamicProductList .mx-card-header { padding: 10px 9px 9px; }
.dashboard #dynamicProductList .mx-header-top { gap: 7px; margin-bottom: 9px; }
.dashboard #dynamicProductList .mx-img-slot { width: 30px; height: 30px; border-radius: 9px; }
.dashboard #dynamicProductList .mx-brand-col { gap: 3px; min-width: 0; }
.dashboard #dynamicProductList .mx-brand-pill { padding: 2px 5px; }
.dashboard #dynamicProductList .mx-brand-text { font-size: 8px; }
.dashboard #dynamicProductList .mx-plan-name { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.dashboard #dynamicProductList .mx-price-block { padding-top: 8px; }
.dashboard #dynamicProductList .mx-price-label { font-size: 8px; }
.dashboard #dynamicProductList .mx-main-price { font-size: 17px; }
.dashboard #dynamicProductList .mx-data-row { padding: 6px 9px; }
.dashboard #dynamicProductList .mx-row-left { gap: 4px; }
.dashboard #dynamicProductList .mx-row-left i { width: 19px; height: 19px; border-radius: 6px; font-size: 9px; }
.dashboard #dynamicProductList .mx-info-label { font-size: 9px; }
.dashboard #dynamicProductList .mx-info-value { font-size: 9px; }
.dashboard #dynamicProductList .mx-earnings-val { padding: 2px 4px; font-size: 9px; }
.dashboard #dynamicProductList .mx-card-footer { padding: 8px 9px 9px; }
.dashboard #dynamicProductList .mx-invest-btn { padding: 8px 5px; border-radius: 8px; font-size: 10px; gap: 4px; }
.dashboard #dynamicProductList .mx-invest-btn i { font-size: 10px; }
.dashboard .secure_box { display: none; }

/* Recharge is a full-height, app-like surface on every screen size. */
.topup-wrapper {
  width: 100%;
  max-width: 520px;
  min-height: 100dvh;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 0 16px calc(35px + env(safe-area-inset-bottom, 0px));
  background: var(--rambo-paper);
  color: var(--rambo-dark);
}
.topup-wrapper .topup-header {
  height: 68px;
  margin: 0 -16px 17px;
  padding: 0 16px;
  border: 0;
  background: rgba(245,245,243,.93);
  backdrop-filter: blur(10px);
}
.topup-wrapper .topup-header h2 { font-size: 19px; font-weight: 800; letter-spacing: -.03em; }
.topup-wrapper #rechargeBackBtn, .topup-wrapper .recharge-history-btn { width: 42px; height: 42px; border-radius: 14px; background: #fff; border: 1px solid #e7e7e4; }
.topup-wrapper .balance-card-module {
  position: relative;
  overflow: hidden;
  margin: 0 0 16px;
  padding: 22px;
  border: 0;
  border-radius: 23px;
  background: var(--rambo-dark);
  box-shadow: 0 15px 25px rgba(0,0,0,.18);
}
.topup-wrapper .balance-card-module::after { content: ''; position: absolute; width: 130px; height: 130px; right: -44px; top: -55px; border-radius: 50%; background: var(--rambo-yellow); opacity: .95; }
.topup-wrapper .balance-label-text { color: rgba(255,255,255,.65); font-size: 11px; letter-spacing: .08em; }
.topup-wrapper .balance-value-text { position: relative; z-index: 1; margin: 7px 0 0; color: #fff; font-size: clamp(29px, 8vw, 37px); letter-spacing: -.05em; }
.topup-wrapper .amount-section-module, .topup-wrapper .payment-section-module {
  margin: 0 0 15px;
  padding: 19px;
  border: 1px solid #e6e6e2;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 7px 17px rgba(0,0,0,.035);
}
.topup-wrapper .amount-section-module > p, .topup-wrapper .payment-section-module > p { margin: 0 0 15px !important; color: #202020; font-size: 15px; font-weight: 800 !important; }
.topup-wrapper .recharge-section-heading { display: flex; align-items: center; justify-content: space-between; margin: 0 0 15px; }
.topup-wrapper .recharge-section-heading p { margin: 2px 0 0; color: #202020; font-size: 16px; font-weight: 800; }
.topup-wrapper .recharge-section-heading > i { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 11px; background: #fff7cf; color: #8b7100; font-size: 14px; }
.topup-wrapper .recharge-kicker { color: #a18a27; font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.topup-wrapper .amount-grid-layout { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin: 0 0 15px; }
.topup-wrapper .amount-btn-item { padding: 12px 2px; border: 1px solid #e4e4e0; border-radius: 11px; background: #fff; color: #333; font-size: 12px; font-weight: 700; }
.topup-wrapper .amount-btn-item.active { border-color: var(--rambo-yellow); background: var(--rambo-yellow); color: #171717; box-shadow: none; }
.topup-wrapper .custom-input-box { height: 54px; padding: 0 15px; border: 1px solid #deded9; border-radius: 13px; background: #fafaf8; }
.topup-wrapper .custom-input-box input { color: #171717; font-size: 16px; font-weight: 600; }
.topup-wrapper .channel-row-item { position: relative; margin: 0 0 10px; padding: 14px; border: 1px solid #e3e3df; border-radius: 14px; transition: transform .2s ease, box-shadow .2s ease; }
.topup-wrapper .channel-row-item.active { border: 2px solid var(--rambo-yellow); background: #fffdf1; }
.topup-wrapper .channel-row-item.is-pointing {
  box-shadow: 0 18px 28px rgba(247, 211, 155, 0.28);
  border-color: #f7d39b;
  transform: scale(1.01);
}
.topup-wrapper .channel-row-item strong { display: block; color: #222; font-size: 14px; }
.topup-wrapper .channel-main { display: flex; align-items: center; gap: 11px; }
.topup-wrapper .channel-main small { display: block; margin-top: 3px; color: #777; font-size: 11px; }
.topup-wrapper .channel-icon { display: grid; width: 36px; height: 36px; flex: 0 0 36px; place-items: center; border-radius: 11px; font-size: 14px; }
.topup-wrapper .manual-transfer-callout {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  height: 12px;
  line-height: 1;
}
.topup-wrapper .manual-transfer-pointer {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 50%;
  background: rgba(247, 211, 155, 0.95);
  border: 3px solid rgba(180, 83, 9, 0.18);
  color: #b45309;
  font-size: 18px;
  pointer-events: none;
  box-shadow: 0 10px 18px rgba(180, 83, 9, 0.18);
  animation: manual-transfer-point 1.2s ease-in-out infinite;
}
@keyframes manual-transfer-point {
  0% { transform: translateY(0) scale(0.96); opacity: 0.8; }
  25% { transform: translateY(2px) scale(1); opacity: 1; }
  50% { transform: translateY(8px) scale(1.02); opacity: 1; }
  100% { transform: translateY(0) scale(0.96); opacity: 0.8; }
}
.topup-wrapper .channel-icon-gold { background: #fff1b8; color: #856900; }
.topup-wrapper .channel-icon-green { background: #fff1dc; color: #b45309; }
.topup-wrapper .radio-select-dot { width: 18px; height: 18px; }
.topup-wrapper .channel-row-item.active .radio-select-dot { border-color: var(--rambo-dark); background: var(--rambo-dark); box-shadow: inset 0 0 0 4px var(--rambo-yellow); }
.topup-wrapper .manual-transfer-note { display: flex; align-items: flex-start; gap: 8px; margin: 2px 0 12px; padding: 11px 12px; border: 1px solid #f3dfbf; border-radius: 12px; background: #fffaf0; color: #8a5a13; font-size: 11px; line-height: 1.4; }
.topup-wrapper [hidden] { display: none !important; }
.topup-wrapper .manual-transfer-note i { margin-top: 1px; color: #b45309; }
.topup-wrapper .manual-recipient-details { display: grid; gap: 3px; margin-top: 6px; }
.topup-wrapper .manual-transfer-form { display: grid; gap: 7px; margin: 2px 0 14px; padding: 12px; border: 1px solid #e3e8ef; border-radius: 12px; background: #fff; color: #344054; font-size: 11px; }
.topup-wrapper .manual-transfer-form input { width: 100%; box-sizing: border-box; padding: 10px; border: 1px solid #d0d5dd; border-radius: 8px; font: inherit; }
.topup-wrapper .manual-transfer-form small { color: #667085; }
.topup-wrapper #depositBtn { width: 100% !important; margin: 8px 0 0 !important; padding: 16px !important; border-radius: 14px !important; background: var(--rambo-yellow) !important; color: var(--rambo-dark) !important; font: 800 15px Inter, sans-serif; box-shadow: 0 8px 16px rgba(174,142,0,.22); }
.topup-wrapper .rech-rules-box { margin: 0; overflow: hidden; border: 1px solid #e4e4e0; border-radius: 18px; background: #fff; box-shadow: 0 7px 17px rgba(0,0,0,.035); }
.topup-wrapper .rech-rules-header { display: flex; width: 100%; align-items: center; justify-content: space-between; padding: 15px 16px; border: 0; background: #fff; color: #202020; text-align: left; cursor: pointer; }
.topup-wrapper .rech-rules-heading { display: flex; align-items: center; gap: 10px; }
.topup-wrapper .rech-rules-heading > i { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 10px; background: #fff7cf; color: #8b7100; font-size: 13px; }
.topup-wrapper .rech-rules-heading small, .topup-wrapper .rech-rules-heading strong { display: block; }
.topup-wrapper .rech-rules-heading small { color: #9b9b93; font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.topup-wrapper .rech-rules-heading strong { margin-top: 2px; color: #242424; font-size: 14px; }
.topup-wrapper .rech-rules-chevron { color: #777; transition: transform .2s ease; }
.topup-wrapper .rech-rules-box.open .rech-rules-chevron { transform: rotate(180deg); }
.topup-wrapper .rech-rules-body { padding: 0 16px 14px; border-top: 1px solid #f0f0ec; }
.topup-wrapper .rech-rules-body .info-list { margin: 12px 0 0; padding: 0; }
.topup-wrapper .rech-rules-body .info-list li { display: flex; align-items: flex-start; gap: 9px; padding: 8px 0; border-bottom: 1px solid #f0f0ec; }
.topup-wrapper .rech-rules-body .info-list li:last-child { border-bottom: 0; }
.topup-wrapper .rech-rules-body .info-list p { margin: 0; color: #65655e; font-size: 11px; line-height: 1.45; }
.topup-wrapper .rech-rules-body .info-icon { display: grid; width: 20px; height: 20px; flex: 0 0 20px; place-items: center; border-radius: 7px; background: #f7edb8; color: #806800; font-size: 10px; font-weight: 800; }

/* ================= BOUTIQUE GRAY + ORANGE THEME ================= */
:root {
  --boutique-green: #f59e0b;
  --boutique-green-dark: #d97706;
  --boutique-green-soft: #fff1dc;
  --boutique-gray-50: #f5f7f6;
  --boutique-gray-100: #edf1ef;
  --boutique-gray-200: #dbe3df;
  --boutique-gray-500: #71807a;
  --boutique-ink: #1e2a25;
  --rambo-yellow: #f7d39b;
  --rambo-dark: #1e2a25;
  --rambo-paper: #f5f7f6;
  --accent-cyan: #f59e0b;
  --accent-glow: rgba(245,158,11,.14);
}

body { background: var(--boutique-gray-50); color: var(--boutique-ink); }
.honda-auth-container {
  background-image: linear-gradient(rgba(17, 24, 39, 0.38), rgba(17, 24, 39, 0.42)),
    url('https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?auto=format&fit=crop&w=1200&q=80');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.fieldmark-card, .mx-unique-modal { border-color: var(--boutique-gray-200); }
.fieldmark-logo-text, .fieldmark-title { color: var(--boutique-ink); }
.fieldmark-logo-shape, .fieldmark-btn-submit { background: var(--boutique-green); }
.fieldmark-input-group label { color: #40534a; }
.fieldmark-field-box { border-color: var(--boutique-gray-200); background: #f8faf9; }
.fieldmark-field-box:focus-within { border-color: var(--boutique-green); box-shadow: 0 0 0 4px rgba(19,138,88,.1); }
.fieldmark-btn-submit { box-shadow: 0 10px 20px rgba(19,138,88,.18); }
.fieldmark-link-btn, .eye-toggle:hover, .eye-toggle.active { color: var(--boutique-green); }

.dashboard, .topup-wrapper, .invite-page, .profile-page, .records-page, .bank-page, .withdraw-page, .investment-page { background: var(--boutique-gray-50); color: var(--boutique-ink); }
.dashboard-welcome h1, .dashboard .product-section-title, .topup-wrapper .topup-header h2, .invite-page .section-block-title { color: var(--boutique-ink) !important; }
.dashboard-welcome-mark, .dashboard .product-section-heading > i { background: var(--boutique-green-soft); color: var(--boutique-green); box-shadow: none; }
.dashboard .main-container { border-color: var(--boutique-gray-200); background: #fff; box-shadow: 0 10px 24px rgba(25,59,43,.06); }
.dashboard .action-card, .dashboard #dynamicProductList .mx-product-card, .topup-wrapper .amount-section-module, .topup-wrapper .payment-section-module, .topup-wrapper .rech-rules-box, .invite-page .referral-card, .profile-page .settings-list-box, .records-page #recordsContainer, .investment-page .card-wrapper .invest-card { border-color: var(--boutique-gray-200); }
.dashboard .action-icon-gold { background: #fff0b2; color: #a67500; }
.dashboard .action-icon-blue { background: #dfeeff; color: #3978c7; }
.dashboard .action-icon-purple { background: #eee4ff; color: #7755bd; }
.dashboard .action-icon-green { background: #ffedd5; color: #b45309; }
.dashboard .action-icon-orange { background: #ffe6c7; color: #d87918; }
.dashboard .action-icon-red { background: #ffe2dc; color: #d35b45; }
.dashboard .action-card:hover, .dashboard #dynamicProductList .mx-product-card:hover { border-color: var(--boutique-green); box-shadow: 0 10px 20px rgba(245,158,11,.12); }
.dashboard #dynamicProductList .mx-product-image { background: var(--boutique-gray-100); }
.dashboard #dynamicProductList .mx-quota-badge { border-color: rgba(245,158,11,.2); color: var(--boutique-green-dark); }
.dashboard #dynamicProductList .mx-product-row strong, .dashboard #dynamicProductList .mx-product-row:nth-of-type(2) strong, .dashboard #dynamicProductList .mx-product-row:nth-of-type(3) strong { color: var(--boutique-green-dark); }
.dashboard #dynamicProductList .mx-invest-btn, .topup-wrapper #depositBtn { background: var(--boutique-green) !important; color: #fff !important; box-shadow: 0 8px 16px rgba(245,158,11,.16); }
.dashboard #dynamicProductList .mx-invest-btn:hover { background: var(--boutique-green-dark) !important; }

.topup-wrapper .balance-card-module, .invite-page .referral-container::before { background: linear-gradient(135deg, #1e2a25, #345d4b); }
.topup-wrapper .balance-card-module::after { background: var(--boutique-green); opacity: .75; }
.topup-wrapper .amount-btn-item.active, .topup-wrapper .channel-row-item.active { border-color: var(--boutique-green); background: var(--boutique-green-soft); }
.topup-wrapper .channel-row-item.active .radio-select-dot { border-color: var(--boutique-green); background: var(--boutique-green); box-shadow: inset 0 0 0 4px var(--boutique-green-soft); }
.topup-wrapper .recharge-section-heading > i, .topup-wrapper .rech-rules-heading > i, .topup-wrapper .rech-rules-body .info-icon { background: var(--boutique-green-soft); color: var(--boutique-green); }
.topup-wrapper .recharge-kicker { color: var(--boutique-green); }

.bottom-nav { background: rgba(255,255,255,.96); border-top-color: var(--boutique-gray-200); }
.bottom-nav .nav-item.active, .bottom-nav .nav-item.active .nav-label-text { color: var(--boutique-green) !important; }
.bottom-nav .nav-item.active .nav-icon-wrapper { background: var(--boutique-green-soft); color: var(--boutique-green); }
.investment-header { background: #1e2a25; }
.investment-sub-header { background: linear-gradient(145deg, #1e2a25, #345d4b); }
.investment-page .card-wrapper .plan-icon-box, .investment-page .card-wrapper .active-tag { background: var(--boutique-green-soft); color: var(--boutique-green); }
.investment-page .card-wrapper .countdown, .investment-page .card-wrapper .progress-fill { color: var(--boutique-green);  }
.mx-mini-item { border-color: var(--boutique-gray-200); background: var(--boutique-green-soft); color: var(--boutique-green-dark); }
.mx-mini-item i, .mx-tg-svg { color: var(--boutique-green); }
.dashboard .product-section-heading > i,
.topup-wrapper .recharge-section-heading > i,
.topup-wrapper .channel-icon-gold,
.topup-wrapper .rech-rules-heading > i,
.topup-wrapper .rech-rules-body .info-icon { background: var(--boutique-green-soft); color: var(--boutique-green); }
.topup-wrapper .amount-btn-item.active { background: var(--boutique-green); color: #fff; }
.satellite-icon { stroke: var(--boutique-green) !important; }
.tier-value-pill, .highlight-cyan { color: var(--boutique-green) !important; }
.profile-page {
  --profile-yellow: var(--boutique-green);
  --profile-ink: var(--boutique-ink);
  --profile-soft: var(--boutique-gray-50);
  --profile-line: var(--boutique-gray-200);
}
.profile-page .dashboard-top-section { background: linear-gradient(180deg, #1e2a25 0%, #345d4b 100%); }
.profile-page .logo-geometric-shape,
.profile-page .status-dot,
.profile-page .profile-avatar,
.profile-page .profile-verified-badge,
.profile-page .profile-summary { border-color: var(--boutique-green); }
.profile-page .logo-geometric-shape,
.profile-page .status-dot,
.profile-page .profile-verified-badge,
.profile-page .profile-summary { background: var(--boutique-green); }
.profile-page .status-dot { box-shadow: 0 0 0 3px rgba(245,158,11,.2); }
.profile-page .profile-avatar { border-color: var(--boutique-green); }
.profile-page #myRecordsBtn .item-left-side i { color: var(--boutique-green) !important; }
.profile-page .logo-text { font-size: 14px; }
.profile-page .profile-status-badge { padding: 5px 8px; font-size: 9px; }
.profile-page .profile-avatar { width: 62px; height: 62px; }
.profile-page .honda-user-meta h2 { font-size: 16px; }
.profile-page .honda-user-meta p { margin-top: 4px; font-size: 10px; }
.profile-page .profile-summary-item { min-height: 76px; padding: 12px 5px; gap: 4px; }
.profile-page .profile-summary-item strong { font-size: 17px; }
.profile-page .profile-summary-item span { font-size: 10px; }
.profile-page .profile-scroll-container { gap: 14px; }
.profile-page .item-left-side span { font-size: 13px; }
.profile-page .item-left-side i { font-size: 14px; }
.profile-page .chevron-indicator { font-size: 13px; }

/* ================= BOUTIQUE FLOATING NAV ================= */
.bottom-nav {
  bottom: 12px;
  left: 50%;
  width: min(94%, 470px);
  padding: 0;
  border: 1px solid var(--boutique-gray-200);
  border-radius: 22px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 12px 30px rgba(30,70,50,.14);
  transform: translateX(-50%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.nav-pill-container {
  height: 68px;
  border-radius: inherit;
  background: transparent;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 2px;
}
.nav-item {
  height: 54px;
  width: 100%;
  gap: 2px;
  border-radius: 16px;
  color: #829089;
  transition: color .2s ease, background .2s ease, transform .2s ease;
  padding: 4px 2px 2px;
}
.nav-item:hover { color: var(--boutique-green); transform: translateY(-2px); }
.nav-icon-wrapper {
  position: relative;
  width: 32px;
  height: 28px;
  border: 1px solid #d7e2dc;
  border-radius: 11px;
  background: #f7faf8;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 4px 9px rgba(28,69,48,.05);
  transition: background .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.nav-icon-wrapper svg { width: 16px; height: 16px; filter: drop-shadow(0 1px 1px rgba(28,69,48,.08)); }
.nav-label-text { font-size: 9px; font-weight: 750; letter-spacing: 0; }
.nav-item.active { position: relative; color: var(--boutique-green) !important; background: transparent; }
.nav-item.active::before { content: ''; position: absolute; top: -6px; width: 22px; height: 3px; border-radius: 999px; background: var(--boutique-green); box-shadow: 0 2px 7px rgba(245,158,11,.28); }
.nav-item.active .nav-icon-wrapper { border-color: var(--boutique-green); color: #fff; background: linear-gradient(145deg, #f7b62a, #d97706); transform: translateY(-1px); box-shadow: 0 7px 14px rgba(245,158,11,.22), inset 0 1px 0 rgba(255,255,255,.2); }
.nav-item.active .nav-label-text { color: var(--boutique-green); font-weight: 850; }

@media (max-width: 380px) {
  .bottom-nav {
    width: min(96%, 470px);
    bottom: 10px;
  }
  .nav-pill-container {
    height: 62px;
  }
  .nav-item {
    gap: 2px;
    padding-top: 3px;
  }
  .nav-label-text {
    font-size: 8px;
    white-space: nowrap;
  }
  .nav-icon-wrapper {
    width: 28px;
    height: 24px;
    border-radius: 10px;
  }
  .nav-icon-wrapper svg {
    width: 14px;
    height: 14px;
  }
}

@media (min-width: 600px) {
  .dashboard, .topup-wrapper { margin-top: 16px; margin-bottom: 16px; border-radius: 28px; box-shadow: 0 14px 42px rgba(0,0,0,.08); }
  .dashboard { padding: 24px 24px 105px; }
  .topup-wrapper { padding-right: 24px; padding-left: 24px; }
  .topup-wrapper .topup-header { margin-right: -24px; margin-left: -24px; padding-right: 24px; padding-left: 24px; border-radius: 28px 28px 0 0; }
  .dashboard .action-card { min-height: 64px; }
}
@media (max-width: 370px) {
  .dashboard { padding-right: 12px; padding-left: 12px; }
  .dashboard .action-grid { gap: 12px 5px; }
  .dashboard .main-container { padding-right: 8px; padding-left: 8px; }
  .dashboard .action-card { min-height: 60px; padding: 0 1px; }
  .dashboard .action-icon { width: 38px; height: 38px; flex-basis: 38px; font-size: 16px; }
  .dashboard .action-card .action-text { font-size: 10px; }
  .topup-wrapper { padding-right: 12px; padding-left: 12px; }
  .topup-wrapper .topup-header { margin-right: -12px; margin-left: -12px; padding-right: 12px; padding-left: 12px; }
  .topup-wrapper .amount-section-module, .topup-wrapper .payment-section-module { padding: 15px; }
  .topup-wrapper .amount-grid-layout { grid-template-columns: repeat(2, 1fr); }
}

/* ================= INVITE & PROFILE — ACCOUNT EXPERIENCE ================= */
.invite-page {
  width: 100%;
  max-width: 520px;
  min-height: 100dvh;
  margin: 0 auto;
  padding-bottom: calc(94px + env(safe-area-inset-bottom, 0px));
  background: var(--rambo-paper);
  color: var(--rambo-dark);
}
.invite-page .invite-header-fixed-v2 {
  position: sticky;
  top: 0;
  z-index: 50;
  width: auto;
  height: 67px;
  padding: 0 18px;
  background: rgba(245,245,243,.94);
  border-bottom: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 4px 14px rgba(0,0,0,.035);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.invite-page .invite-header-fixed-v2 h2 { color: var(--rambo-dark); font-size: 19px; font-weight: 800; letter-spacing: -.03em; }
.invite-page .invite-back-btn-v2 { width: 42px; height: 42px; border: 1px solid #e3e3de; border-radius: 14px; background: #fff; color: var(--rambo-dark); }
.invite-page .referral-container { max-width: none; padding: 0 16px; }
.invite-page .referral-container::before {
  display: block;
  margin: 0 0 20px;
  padding: 23px 22px;
  content: 'Invite friends\A Earn more together';
  white-space: pre-line;
  border-radius: 23px;
  background: linear-gradient(127deg, #181818 0%, #31312d 100%);
  box-shadow: 0 15px 25px rgba(0,0,0,.17);
  color: var(--rambo-yellow);
  font: 800 25px/1.24 Inter, sans-serif;
  letter-spacing: -.05em;
}
.invite-page .section-block-wrapper { margin: 0 0 20px; }
.invite-page .section-block-title { margin: 0 3px 10px; color: #292929; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.invite-page .referral-card { margin: 0 0 10px; padding: 17px; border: 1px solid #e5e5e1; border-radius: 18px; background: #fff; box-shadow: 0 7px 18px rgba(0,0,0,.035); }
.invite-page .card-label { margin: 0 0 10px; color: #777; font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.invite-page .copy-input-wrapper { display: flex; min-width: 0; gap: 9px; }
.invite-page .code-display, .invite-page .link-display { min-width: 0; height: 46px; box-sizing: border-box; padding: 0 13px; border: 1px solid #e4e4df; border-radius: 12px; background: #fafaf8; color: #242424; font: 700 14px/46px Inter, sans-serif; }
.invite-page .link-display { flex: 1; line-height: normal; text-overflow: ellipsis; }
.invite-page .copy-action-btn { flex: 0 0 auto; padding: 0 14px; border: 0; border-radius: 12px; background: var(--rambo-yellow); color: #1b1b1b; font: 800 12px Inter, sans-serif; cursor: pointer; }
.invite-page .copy-action-btn:active { transform: scale(.96); }
.invite-page .earnings-tier-row { min-height: 81px; margin: 0 0 10px; padding: 13px; border: 1px solid #e5e5e1; border-radius: 18px; background: #fff; box-shadow: 0 7px 18px rgba(0,0,0,.035); }
.invite-page .tier-badge-indicator { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; border-radius: 13px; background: var(--rambo-yellow) !important; color: #1c1c1c !important; font-weight: 800; }
.invite-page .tier-info-text { min-width: 0; }
.invite-page .tier-info-text h4 { margin: 0 0 4px; color: #242424; font-size: 14px; }
.invite-page .tier-info-text p { margin: 0; color: #777; font-size: 11px; line-height: 1.35; }
.invite-page .tier-value-pill { flex: 0 0 auto; padding: 7px 9px; border-radius: 9px; background: #fff7c4; color: #6c5600 !important; font-size: 11px; font-weight: 800; }
.invite-page .how-it-works-card { margin: 0; padding: 19px; border: 1px solid #e5e5e1; border-radius: 21px; background: #fff; box-shadow: 0 7px 18px rgba(0,0,0,.035); }
.invite-page .how-header { margin-bottom: 13px; color: var(--rambo-dark); }
.invite-page .how-header i { color: #e0b900; }
.invite-page .how-header h3 { font-size: 16px; }
.invite-page .step-item { gap: 12px; padding: 12px 0; border-bottom-color: #eeeeea; }
.invite-page .step-check-icon { color: #d6af00; }
.invite-page .step-content p { color: #555; font-size: 13px; line-height: 1.45; }

/* A neutral hero keeps the profile readable with any marketing image or logo asset. */
.profile-page .dashboard-top-section {
  background: linear-gradient(130deg, #1c1c1b 0%, #3a3934 100%);
}
.profile-page .dashboard-top-section::before {
  inset: 0;
  background: radial-gradient(circle at 86% 13%, rgba(255,212,0,.34), transparent 27%), radial-gradient(circle at 13% 94%, rgba(255,255,255,.14), transparent 33%);
  filter: none;
  transform: none;
}
.profile-page .profile-status-badge { background: rgba(255,255,255,.12); }
.profile-page .profile-avatar { background-color: #fff; background-size: 76%; }
.profile-page .settings-item-row { transition: background .16s ease, padding .16s ease; }
.profile-page .settings-item-row:active { background: #fff9d9; }

@media (min-width: 600px) {
  .invite-page { margin-top: 16px; margin-bottom: 16px; border-radius: 28px; box-shadow: 0 14px 42px rgba(0,0,0,.08); }
  .invite-page .referral-container { padding: 0 24px; }
}
@media (max-width: 370px) {
  .invite-page .referral-container { padding-right: 12px; padding-left: 12px; }
  .invite-page .referral-container::before { padding: 20px 18px; font-size: 22px; }
  .invite-page .tier-value-pill { font-size: 10px; }
  .invite-page .tier-info-text h4 { font-size: 12px; }
}

/* Invite page structure: real referral hero and practical sharing controls. */
.invite-page .referral-container::before { display: none; }
.invite-page .invite-hero-card {
  position: relative;
  display: flex;
  min-height: 184px;
  margin: 0 16px 23px;
  padding: 23px;
  overflow: hidden;
  align-items: center;
  justify-content: space-between;
  border-radius: 0 0 24px 24px;
  background: #191919;
  box-shadow: 0 16px 30px rgba(0,0,0,.19);
}
.invite-page .invite-hero-card::before {
  position: absolute;
  width: 170px;
  height: 170px;
  right: -68px;
  bottom: -75px;
  border-radius: 50%;
  content: '';
  background: var(--rambo-yellow);
}
.invite-page .invite-hero-card::after {
  position: absolute;
  width: 92px;
  height: 92px;
  top: -40px;
  right: 44px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%;
  content: '';
}
.invite-page .invite-hero-copy { position: relative; z-index: 1; max-width: 230px; }
.invite-page .invite-eyebrow { display: block; margin-bottom: 9px; color: var(--rambo-yellow); font-size: 10px; font-weight: 800; letter-spacing: .15em; }
.invite-page .invite-hero-card h1 { margin: 0; color: #fff; font-size: clamp(25px, 7vw, 34px); font-weight: 800; line-height: 1.03; letter-spacing: -.06em; }
.invite-page .invite-hero-card h1 em { color: var(--rambo-yellow); font-style: normal; }
.invite-page .invite-hero-card p { margin: 12px 0 0; color: rgba(255,255,255,.68); font-size: 12px; line-height: 1.42; }
.invite-page .invite-hero-icon { position: relative; z-index: 1; display: grid; width: 50px; height: 50px; flex: 0 0 50px; place-items: center; border-radius: 17px; background: var(--rambo-yellow); color: #191919; font-size: 21px; box-shadow: 0 8px 16px rgba(0,0,0,.22); }

.invite-page .referral-container { display: flex; flex-direction: column; gap: 22px; }
.invite-page .section-block-wrapper { margin: 0; }
.invite-page .section-block-title { display: flex; align-items: center; gap: 9px; margin: 0 3px 11px; }
.invite-page .section-block-title::before { display: block; width: 5px; height: 5px; border-radius: 50%; background: var(--rambo-yellow); content: ''; }
.invite-page .referral-card { padding: 16px; }
.invite-page .copy-input-wrapper { width: 100%; }
.invite-page .code-display, .invite-page .link-display { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.invite-page .code-display { letter-spacing: .08em; }
.invite-page .copy-action-btn { min-width: 80px; }
.invite-page .earnings-tier-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; column-gap: 12px; align-items: center; }
.invite-page .tier-badge-indicator { margin: 0; }
.invite-page .how-it-works-card { position: relative; overflow: hidden; }
.invite-page .how-it-works-card::before { position: absolute; top: 0; left: 0; right: 0; height: 4px; content: ''; background: var(--rambo-yellow); }
.invite-page .step-item:last-child { border-bottom: 0; padding-bottom: 0; }

@media (min-width: 600px) {
  .invite-page .invite-hero-card { margin-right: 24px; margin-left: 24px; }
  .invite-page .referral-container { padding-right: 24px; padding-left: 24px; }
}
@media (max-width: 370px) {
  .invite-page .invite-hero-card { min-height: 166px; margin-right: 12px; margin-left: 12px; padding: 19px; }
  .invite-page .invite-hero-icon { width: 43px; height: 43px; flex-basis: 43px; }
  .invite-page .copy-action-btn { min-width: 69px; padding: 0 9px; }
  .invite-page .earnings-tier-row { grid-template-columns: 34px minmax(0, 1fr) auto; column-gap: 9px; }
  .invite-page .tier-badge-indicator { width: 34px; height: 34px; flex-basis: 34px; }
}

/* ================= WITHDRAW PAGE - SECOND VISUAL SYSTEM ================= */
.withdraw-page#withdrawPage {
  min-height: 100dvh;
  background: #edf1f3 !important;
  color: #17232b;
  font-family: "Poppins", "Inter", sans-serif;
}

.withdraw-page#withdrawPage .withdraw-header-fixed {
  position: sticky;
  top: 0;
  z-index: 10;
  height: 68px;
  padding: 0 18px;
  background: #17232b;
  border: 0;
  box-shadow: 0 8px 18px rgba(23,35,43,.18);
}

.withdraw-page#withdrawPage .withdraw-header-fixed h2 {
  color: #fff;
  font-size: 17px;
  font-weight: 800;
}

.withdraw-page#withdrawPage .withdraw-back-btn-v2 {
  position: static;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255,255,255,.22);
  background: transparent;
  color: #fff;
  box-shadow: none;
}

.withdraw-page#withdrawPage .history-btn {
  position: static;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 8px;
  background: transparent;
  color: #d8e2e5;
  font-size: 10px;
}

.withdraw-page#withdrawPage .recharge-container {
  display: grid;
  width: min(100%, 760px);
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 16px;
  margin: 0 auto;
  padding: 22px 18px 40px;
  box-sizing: border-box;
}

.withdraw-page#withdrawPage .balance-card-ev {
  grid-column: 1 / -1;
  min-height: 154px;
  padding: 24px;
  border: 0;
  border-radius: 4px 28px 4px 28px;
  background: #f59e0b;
  text-align: left;
  box-shadow: 10px 10px 0 #f8d7a0;
}

.withdraw-page#withdrawPage .satellite-icon {
  top: 22px;
  right: 23px;
  left: auto;
  opacity: .8;
}

.withdraw-page#withdrawPage .balance-label-ev {
  margin-bottom: 14px;
  color: rgba(255,255,255,.7);
  font-size: 10px;
  letter-spacing: .12em;
}

.withdraw-page#withdrawPage .withdraw-method-switch {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  padding: 5px;
  border: 1px solid #d6e2dc;
  border-radius: 10px;
  background: #dfeae5;
}

.withdraw-page#withdrawPage .withdraw-method-tab {
  padding: 11px 8px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #668075;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
}

.withdraw-page#withdrawPage .withdraw-method-tab i {
  margin-right: 5px;
}

.withdraw-page#withdrawPage .withdraw-method-tab.is-active {
  background: #fff;
  color: #1b3d31;
  box-shadow: 0 3px 8px rgba(27,61,49,.1);
}

.withdraw-page#withdrawPage .withdraw-method-panel {
  display: none;
  grid-column: 1 / -1;
}

.withdraw-page#withdrawPage .automatic-withdrawal-panel.is-visible {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 16px;
}

.withdraw-page#withdrawPage .automatic-withdrawal-panel > .input-card-ev {
  grid-column: 1;
  grid-row: 1 / span 2;
}

.withdraw-page#withdrawPage .manual-withdrawal-panel.is-visible {
  display: block;
  grid-column: 1 / -1;
  grid-row: 3;
}

.withdraw-page#withdrawPage #withdrawBalance {
  color: #fff;
  font-size: 36px;
  font-weight: 850;
  letter-spacing: -.05em;
  text-shadow: none;
}

.withdraw-page#withdrawPage .input-card-ev,
.withdraw-page#withdrawPage #withdrawBankCard,
.withdraw-page#withdrawPage .rules-card-ev {
  border: 1px solid #d6dfe2;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(45,61,68,.06);
}

.withdraw-page#withdrawPage .input-card-ev {
  padding: 18px;
  background: #fff;
}

.withdraw-page#withdrawPage .card-header-ev,
.withdraw-page#withdrawPage .rules-title-ev {
  color: #17232b;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .04em;
}

.withdraw-page#withdrawPage .min-text-ev {
  margin: 9px 0 12px;
  color: #829098;
  font-size: 10px;
}

.withdraw-page#withdrawPage .withdraw-input-box-ev {
  padding: 13px 14px;
  border: 1px solid #c5d0d4;
  border-radius: 3px;
  background: #f6f8f8;
}

.withdraw-page#withdrawPage .currency-neon,
.withdraw-page#withdrawPage .max-btn-link {
  color: #f59e0b;
}

.withdraw-page#withdrawPage #withdrawAmountInput {
  color: #17232b;
  font-size: 18px;
  font-weight: 750;
}

.withdraw-page#withdrawPage .max-btn-link {
  margin-top: 10px;
  font-size: 11px;
  font-weight: 750;
}

.withdraw-page#withdrawPage .automatic-withdrawal-panel > .card-header-ev {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  margin: 0 0 -7px !important;
  padding: 0;
}

.withdraw-page#withdrawPage #withdrawBankCard {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  padding: 13px;
}

.withdraw-page#withdrawPage .bank-info-grid {
  display: block;
}

.withdraw-page#withdrawPage .bank-sub-card {
  padding: 12px;
  border: 0;
  border-bottom: 1px solid #e2e8ea;
  border-radius: 0;
  background: transparent;
}

.withdraw-page#withdrawPage .bank-sub-card:last-child {
  border-bottom: 0;
}

.withdraw-page#withdrawPage .sub-card-label {
  margin-bottom: 5px;
  color: #849198;
  font-size: 9px;
  font-weight: 800;
}

.withdraw-page#withdrawPage .sub-card-value,
.withdraw-page#withdrawPage #withdrawBankCard p {
  color: #17232b;
  font-size: 12px;
  font-weight: 750;
}

.withdraw-page#withdrawPage #withdrawBankCard p {
  margin: 6px 2px;
}

.withdraw-page#withdrawPage #withdrawSubmitBtn {
  grid-column: 1 / -1;
  grid-row: 3;
  padding: 16px;
  border-radius: 3px;
  background: #f59e0b;
  color: #17232b;
  box-shadow: 6px 6px 0 #f8d7a0;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .06em;
}

.withdraw-page#withdrawPage .manual-withdrawal-panel {
  padding: 18px;
  border: 1px solid #f5d39d;
  border-radius: 4px;
  background: #fffaf0;
}

.withdraw-page#withdrawPage .manual-withdrawal-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.withdraw-page#withdrawPage .manual-withdrawal-kicker {
  color: #d97706;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .14em;
}

.withdraw-page#withdrawPage .manual-withdrawal-heading h3 {
  margin: 4px 0 0;
  color: #17232b;
  font-size: 16px;
}

.withdraw-page#withdrawPage .manual-withdrawal-heading > i {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 9px;
  background: #f59e0b;
  color: #fff;
}

.withdraw-page#withdrawPage .manual-withdrawal-copy {
  margin: 9px 0 13px;
  color: #657b70;
  font-size: 11px;
  line-height: 1.45;
}

.withdraw-page#withdrawPage .manual-withdrawal-input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 12px;
  border: 1px solid #bdd3c8;
  border-radius: 3px;
  background: #fff;
}

.withdraw-page#withdrawPage .manual-withdrawal-input-wrap > span {
  color: #f59e0b;
  font-size: 18px;
  font-weight: 850;
}

.withdraw-page#withdrawPage #manualWithdrawAmountInput {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: #17232b;
  font: inherit;
  font-size: 16px;
  font-weight: 750;
}

.withdraw-page#withdrawPage #manualWithdrawRequestBtn {
  width: 100%;
  margin-top: 11px;
  padding: 12px;
  border: 0;
  border-radius: 3px;
  background: #f59e0b;
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 850;
}

.withdraw-page#withdrawPage #manualWithdrawRequestBtn:disabled {
  cursor: wait;
  opacity: .65;
}

.withdraw-page#withdrawPage .rules-card-ev {
  grid-column: 1 / -1;
  grid-row: 5;
  padding: 18px;
}

.withdraw-page#withdrawPage .rules-title-ev {
  margin-bottom: 15px;
}

.withdraw-page#withdrawPage .rule-item-ev {
  gap: 10px;
  margin-bottom: 10px;
  color: #6e7d84;
  font-size: 11px;
}

.withdraw-page#withdrawPage .rule-num {
  width: 20px;
  height: 20px;
  border-radius: 3px;
  background: #fff1d6;
  color: #d97706;
}

.withdraw-page#withdrawPage .warning-text {
  color: #9b6b0d;
}

.withdraw-page#withdrawPage .bank-empty {
  margin: 0;
  padding: 20px 12px;
  border: 1px dashed #abc5ba;
  border-radius: 3px;
  background: #f6f9f7;
  box-shadow: none;
}

.withdraw-page#withdrawPage .bank-empty h4 { color: #17232b; }
.withdraw-page#withdrawPage .bank-empty p { color: #718087; font-size: 11px; }
.withdraw-page#withdrawPage .add-bank-btn { background: #f59e0b; color: #fff; font-size: 11px; }

@media (max-width: 600px) {
  .withdraw-page#withdrawPage .recharge-container {
    display: flex;
    width: 100%;
    padding: 18px 14px 34px;
  }
  .withdraw-page#withdrawPage .balance-card-ev,
  .withdraw-page#withdrawPage .withdraw-method-switch,
  .withdraw-page#withdrawPage .withdraw-method-panel,
  .withdraw-page#withdrawPage .input-card-ev,
  .withdraw-page#withdrawPage #withdrawBankCard,
  .withdraw-page#withdrawPage .rules-card-ev,
  .withdraw-page#withdrawPage .manual-withdrawal-panel,
  .withdraw-page#withdrawPage #withdrawSubmitBtn,
  .withdraw-page#withdrawPage > .recharge-container > .card-header-ev {
    width: 100%;
    grid-column: auto;
    grid-row: auto;
  }
  .withdraw-page#withdrawPage .automatic-withdrawal-panel > .card-header-ev {
    align-self: auto;
    margin: 2px 0 -5px !important;
  }

  .withdraw-page#withdrawPage .automatic-withdrawal-panel.is-visible {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .withdraw-page#withdrawPage .automatic-withdrawal-panel > .input-card-ev,
  .withdraw-page#withdrawPage .automatic-withdrawal-panel > .card-header-ev,
  .withdraw-page#withdrawPage #withdrawBankCard,
  .withdraw-page#withdrawPage #withdrawSubmitBtn {
    grid-column: auto;
    grid-row: auto;
  }
}

/* ================= TRANSACTION HISTORY - LEDGER VIEW ================= */
.records-page#recordsPage {
  min-height: 100dvh;
  padding: 0 0 34px;
  overflow-y: auto;
  background: #f3f6f4 !important;
  color: #1b2a23;
  font-family: "Poppins", "Inter", sans-serif;
}

.records-page#recordsPage .records-header {
  position: sticky;
  top: 0;
  height: 72px;
  padding: 0 18px;
  justify-content: center;
  background: #1b3d31;
  border: 0;
  box-shadow: 0 8px 18px rgba(27,61,49,.15);
}

.records-page#recordsPage .records-header h2 {
  color: #fff;
  font-size: 18px;
  font-weight: 850;
  letter-spacing: -.02em;
}

.records-page#recordsPage .records-back-btn {
  left: 18px;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 10px;
  background: transparent;
  color: #fff;
  box-shadow: none;
}

.records-page#recordsPage .records-back-btn:active {
  background: rgba(255,255,255,.14);
}

.records-page#recordsPage .records-filter {
  display: flex;
  width: min(100% - 28px, 720px);
  gap: 7px;
  margin: 18px auto 14px;
  padding: 5px;
  justify-content: flex-start;
  overflow-x: auto;
  border: 1px solid #dce7e0;
  border-radius: 13px;
  background: #e7eeea;
  box-sizing: border-box;
}

.records-page#recordsPage .filter-btn {
  min-width: 86px;
  padding: 9px 13px;
  border: 0;
  border-radius: 9px;
  color: #718078;
  font-size: 11px;
  font-weight: 750;
}

.records-page#recordsPage .filter-btn.active {
  background: #fff;
  color: #1b3d31;
  box-shadow: 0 3px 8px rgba(27,61,49,.1);
}

.records-page#recordsPage .filter-btn.active::after {
  display: none;
}

.records-page#recordsPage #recordsContainer {
  width: min(100% - 28px, 720px);
  min-height: 0;
  margin: 0 auto;
  padding: 0;
  background: transparent;
}

.records-page#recordsPage .record-card {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 78px;
  margin: 0 0 9px;
  padding: 13px 14px;
  overflow: hidden;
  border: 1px solid #dfe8e2;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 5px 13px rgba(29,64,48,.05);
}

.records-page#recordsPage .record-card::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  content: "";
  background: #2c9a70;
}

.records-page#recordsPage .record-icon-box {
  width: 42px;
  height: 42px;
  margin: 0;
  border: 0;
  border-radius: 12px;
  background: #e3f3eb !important;
  color: #21805b !important;
  font-size: 15px;
}

.records-page#recordsPage .record-middle {
  min-width: 0;
  gap: 4px;
}

.records-page#recordsPage .record-transaction {
  margin: 0;
  overflow: hidden;
  color: #21352b;
  font-size: 13px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.records-page#recordsPage .record-middle > div[style] {
  color: #7a8b82 !important;
  font-size: 10px !important;
}

.records-page#recordsPage .record-time {
  color: #9aa8a0;
  font-size: 10px;
}

.records-page#recordsPage .record-right {
  min-width: 92px;
  gap: 6px;
}

.records-page#recordsPage .record-amount {
  margin: 0;
  color: #f59e0b;
  font-size: 13px;
  font-weight: 850;
}

.records-page#recordsPage .record-amount.amount-minus {
  color: #cf5f55;
}

.records-page#recordsPage .record-status {
  padding: 4px 8px;
  border-radius: 7px;
  font-size: 9px;
  font-weight: 800;
}

.records-page#recordsPage .status-success {
  background: #fff4d8;
  color: #d97706;
}

.records-page#recordsPage .status-pending {
  background: #fff4d8;
  color: #a57918;
}

.records-page#recordsPage .status-failed {
  background: #fde8e6;
  color: #bd534b;
}

@media (max-width: 430px) {
  .records-page#recordsPage .records-filter,
  .records-page#recordsPage #recordsContainer {
    width: calc(100% - 22px);
  }

  .records-page#recordsPage .record-card {
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 9px;
    padding: 11px 10px;
  }

  .records-page#recordsPage .record-icon-box {
    width: 38px;
    height: 38px;
  }

  .records-page#recordsPage .record-right {
    min-width: 78px;
  }
}