/* NXR_ACTIVEPLANS_FINISH_V1 */
/* Scoped: actual Active Plans page only */

html:has(.active-plans-page) body,
html:has(.active-plans-page) #root,
html:has(.active-plans-page) #root .app,
html body #root .active-plans-page.active-plans-page {
  background:#24262D !important;
  background-image:none !important;
  color:#F7F8FA !important;
  color-scheme:dark;
}

html body #root .active-plans-page.active-plans-page .apv2-empty-state {
  background:linear-gradient(
    155deg,#30333B 0%,#252830 100%
  ) !important;
  background-color:#30333B !important;
  border:1px solid rgba(225,232,240,.10) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 12px 25px rgba(0,0,0,.12)
    !important;
  color:#F7F8FA !important;
}

html body #root .active-plans-page.active-plans-page .apv2-empty-state :is(h1,h2,h3,strong,b) {
  color:#F7F8FA !important;
  -webkit-text-fill-color:#F7F8FA !important;
}

html body #root .active-plans-page.active-plans-page .apv2-empty-state :is(p,small,span) {
  color:#BAC1CC !important;
  -webkit-text-fill-color:#BAC1CC !important;
}

html body #root .active-plans-page.active-plans-page .apv2-empty-state :is(button,a) {
  background:#E7FF51 !important;
  background-image:none !important;
  border-color:#E7FF51 !important;
  color:#191C22 !important;
  -webkit-text-fill-color:#191C22 !important;
  box-shadow:0 5px 18px rgba(231,255,81,.12) !important;
}

html body #root .active-plans-page.active-plans-page .apv2-empty-state :is(button,a) :is(span,strong,svg) {
  color:#191C22 !important;
  -webkit-text-fill-color:#191C22 !important;
}


html body #root .active-plans-page.active-plans-page .apv2-empty-icon {
  background:#353941 !important;
  background-image:none !important;
  border-color:#505560 !important;
  color:#E7FF51 !important;
  box-shadow:none !important;
}
html body #root .active-plans-page.active-plans-page .apv2-empty-icon svg {
  color:#E7FF51 !important;
  stroke:currentColor !important;
}


/* NXR_ACTIVEPLANS_FINAL_V2 */
/* Graphite + Lime — exact Active Plans structure */

/* 1. Entire page and surrounding canvas */

html:has(.active-plans-page.apv2-page),
html body:has(.active-plans-page.apv2-page),
html body #root:has(.active-plans-page.apv2-page),
html body #root .app:has(.active-plans-page.apv2-page),
html body #root main.active-plans-page.apv2-page {
    background:#24262D !important;
    background-image:none !important;
    color:#F7F8FA !important;
    color-scheme:dark;
}

/* 2. Fix actual OUTER WHITE CARD */

html body #root .app
main.active-plans-page.apv2-page
.apv2-hero-stack > section.apv2-primary.empty {
    background:
      linear-gradient(
        155deg,
        #30333B 0%,
        #262930 100%
      ) !important;
    background-color:#30333B !important;
    border:1px solid rgba(220,226,235,.10) !important;
    border-radius:21px !important;
    outline:none !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.045),
      0 10px 24px rgba(0,0,0,.12)
      !important;
    color:#F7F8FA !important;
    overflow:hidden;
}

/* 3. Remove extra internal rectangular panel */

html body #root .app
main.active-plans-page.apv2-page
.apv2-primary.empty > .apv2-empty-state {
    background:transparent !important;
    background-image:none !important;
    background-color:transparent !important;
    border:0 !important;
    outline:0 !important;
    box-shadow:none !important;
    color:#F7F8FA !important;
}

/* Remove decorative overlays on the empty outer card */

html body #root .app
main.active-plans-page.apv2-page
.apv2-primary.empty::before,
html body #root .app
main.active-plans-page.apv2-page
.apv2-primary.empty::after {
    display:none !important;
    content:none !important;
}

/* 4. Clear title and supporting text */

html body #root .app
main.active-plans-page.apv2-page
.apv2-empty-state h2 {
    background:transparent !important;
    color:#F7F8FA !important;
    -webkit-text-fill-color:#F7F8FA !important;
    text-shadow:none !important;
}

html body #root .app
main.active-plans-page.apv2-page
.apv2-empty-state p {
    background:transparent !important;
    color:#BCC4CF !important;
    -webkit-text-fill-color:#BCC4CF !important;
    text-shadow:none !important;
}

/* 5. Calendar icon — small graphite tile */

html body #root .app
main.active-plans-page.apv2-page
.apv2-empty-state .apv2-empty-icon {
    background:#353941 !important;
    background-image:none !important;
    border:1px solid rgba(231,255,81,.15) !important;
    border-radius:14px !important;
    box-shadow:none !important;
    color:#E7FF51 !important;
}

html body #root .app
main.active-plans-page.apv2-page
.apv2-empty-state .apv2-empty-icon svg {
    color:#E7FF51 !important;
    stroke:#E7FF51 !important;
    fill:none !important;
}

/* 6. Browse VIP Plans and retry actions */

html body #root .app
main.active-plans-page.apv2-page
.apv2-empty-state > button {
    background:#E7FF51 !important;
    background-image:none !important;
    border:1px solid #E7FF51 !important;
    color:#191C22 !important;
    -webkit-text-fill-color:#191C22 !important;
    box-shadow:0 6px 16px rgba(231,255,81,.10) !important;
    font-weight:700 !important;
    cursor:pointer;
}

html body #root .app
main.active-plans-page.apv2-page
.apv2-empty-state > button :is(span,strong,svg) {
    color:#191C22 !important;
    -webkit-text-fill-color:#191C22 !important;
}

html body #root .app
main.active-plans-page.apv2-page
.apv2-empty-state > button:focus-visible {
    outline:2px solid #E7FF51 !important;
    outline-offset:3px !important;
}

/* 7. Error message: readable without a white panel */

html body #root .app
main.active-plans-page.apv2-page
.apv2-empty-state.error {
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
}

html body #root .app
main.active-plans-page.apv2-page
.apv2-empty-state.error .apv2-empty-icon {
    background:#392D30 !important;
    border-color:#755358 !important;
    color:#FFC7C7 !important;
}

/* 8. Loading state uses the same single surface */

html body #root .app
main.active-plans-page.apv2-page
.apv2-primary.empty > .apv2-loading {
    background:transparent !important;
    background-image:none !important;
    border:0 !important;
    box-shadow:none !important;
    color:#F7F8FA !important;
}

html body #root .app
main.active-plans-page.apv2-page
.apv2-primary.empty .apv2-loading strong {
    color:#F7F8FA !important;
    -webkit-text-fill-color:#F7F8FA !important;
}

/* No changes to DepositUserHeader or Bottom Navigation */