/* =========================================
   VELORA BACKGROUND FIX
   Target color: #0B0B0D
   ========================================= */

html,
body,
#root {
  background: #0B0B0D !important;
}

/* main app wrappers */
body,
#root,
main,
[class*="app"],
[class*="page"],
[class*="screen"],
[class*="layout"],
[class*="content"],
[class*="wrapper"] {
  background-color: #0B0B0D !important;
}

/* remove light backgrounds from the outer page only */
body::before,
body::after,
#root::before,
#root::after {
  background: transparent !important;
}

/* keep cards/components untouched */
.vip-card,
.plan-card,
.wallet-card,
.feature-card,
.shortcut-card,
[class*="card"] {
  background-clip: padding-box;
}

/* =========================================
   VELORA PAGE BACKGROUND - FORCE FIX
   ========================================= */

html,
body,
#root {
  background: #0B0B0D !important;
  background-color: #0B0B0D !important;
}

/* only top-level app/page containers */
#root > div,
#root > section,
#root > main,
#root > div > main,
#root > div > section {
  background: #0B0B0D !important;
  background-color: #0B0B0D !important;
  background-image: none !important;
}

/* remove pale page-layer effects */
#root > div::before,
#root > div::after,
#root > main::before,
#root > main::after {
  background: transparent !important;
  background-image: none !important;
}


/* =========================================
   VELORA DARK PAGE TEXT FIX
   turn dark section/page text to white
   ========================================= */

/* section headings like: Featured Plan / Quick Links */
h1, h2, h3, h4, h5, h6,
[class*="title"],
[class*="heading"],
[class*="section"] > h1,
[class*="section"] > h2,
[class*="section"] > h3,
[class*="section"] > h4,
[class*="section"] > h5,
[class*="section"] > h6 {
  color: #FFFFFF !important;
}

/* small upper labels like INVESTMENT PLANS / SHORTCUTS */
small,
[class*="label"],
[class*="subtitle"],
[class*="caption"],
[class*="eyebrow"] {
  color: rgba(255,255,255,.72) !important;
}

/* links like View all */
a,
[class*="view-all"],
[class*="viewAll"] {
  color: #FFFFFF !important;
}

/* specifically keep text inside white cards readable */
.vip-card *,
.plan-card *,
.wallet-card *,
.bottom-nav *,
header *,
button * {
  /* do not force everything inside components */
}

/* exact visible page texts from your screenshot */
body *:where(h1,h2,h3,h4,h5,h6,strong,b) {
  text-shadow: none !important;
}