/* ZPrompts Safe Visual Module: CSS only, no output buffering, no response rewriting, no JavaScript. */
:root {
  --zpsv-bg: #00090b;
  --zpsv-bg-2: #001416;
  --zpsv-surface: #062327;
  --zpsv-surface-2: #07383b;
  --zpsv-heading: #f5fffd;
  --zpsv-body: #b9d9d5;
  --zpsv-muted: #8fbab5;
  --zpsv-teal: #2bdac4;
  --zpsv-lime: #a1ed31;
  --zpsv-border: #2c8985;
  --zpsv-focus: #a4ef39;
}

html,
body,
body.bunny-home-ready,
#root,
#root > div,
.app-shell,
.site-main,
main {
  background: var(--zpsv-bg) !important;
  color: var(--zpsv-heading) !important;
}

body,
#root,
.app-shell,
main,
section,
article,
.homepage-main {
  color: var(--zpsv-heading) !important;
}

/* Global readable text roles for the permanent-dark presentation. */
#root h1,
#root h2,
#root h3,
#root h4,
#root h5,
#root h6,
.homepage-main h1,
.homepage-main h2,
.homepage-main h3 {
  color: var(--zpsv-heading) !important;
  text-shadow: 0 1px 14px rgba(0,0,0,.22);
}

#root p,
#root li,
#root label,
#root dt,
#root dd,
#root small,
.homepage-main p,
.homepage-main .hero-note,
.homepage-main .brand-intro-text-only p {
  color: var(--zpsv-body) !important;
}

#root a,
#root a:visited,
.site-header a,
.reference-footer a,
#root button {
  color: var(--zpsv-teal) !important;
}

#root input,
#root select,
#root textarea {
  color: var(--zpsv-heading) !important;
  background: #061b1e !important;
  border-color: var(--zpsv-border) !important;
}

#root input::placeholder,
#root textarea::placeholder {
  color: var(--zpsv-muted) !important;
  opacity: 1 !important;
}

#root button,
#root .solid-button,
#root .button-primary,
#root .catalog-cta,
#root input[type=submit] {
  color: #042927 !important;
}

#root .solid-button,
#root .button-primary,
#root .catalog-cta,
#root input[type=submit] {
  background: linear-gradient(135deg, var(--zpsv-teal), var(--zpsv-lime)) !important;
  border-color: var(--zpsv-lime) !important;
}

/* Dark navigation and footer surfaces; prevents white-theme text loss. */
.site-header,
.bunny-home-ready .site-header {
  background: rgba(0, 9, 11, .96) !important;
  color: var(--zpsv-heading) !important;
}

.site-header .nav-shell,
.bunny-home-ready .site-header .nav-shell {
  background: #062327 !important;
  border-color: rgba(43,218,196,.55) !important;
}

.site-header .brand,
.site-header .nav-links,
.site-header .nav-links a,
.site-header .nav-login,
.site-header .icon-button,
.site-header .menu-toggle {
  color: var(--zpsv-heading) !important;
}

.site-header .nav-links a:hover,
.reference-footer a:hover,
#root a:hover {
  color: var(--zpsv-lime) !important;
}

/* Permanently dark: hide, rather than execute, the old theme switch control. */
.theme-toggle,
.theme-switcher,
[data-theme-toggle],
button[aria-label*="mode" i],
button[title*="mode" i] {
  display: none !important;
}

.reference-footer,
.bunny-home-ready .reference-footer,
footer {
  background: #03171a !important;
  color: var(--zpsv-heading) !important;
  border-color: rgba(43,218,196,.24) !important;
}

.reference-footer h1,
.reference-footer h2,
.reference-footer h3,
.reference-footer p,
.reference-footer span,
footer h1,
footer h2,
footer h3,
footer p,
footer span {
  color: var(--zpsv-body) !important;
}

.reference-footer h1,
.reference-footer h2,
.reference-footer h3,
footer h1,
footer h2,
footer h3 {
  color: var(--zpsv-heading) !important;
}

#root a:focus-visible,
#root button:focus-visible,
#root input:focus-visible,
#root select:focus-visible,
#root textarea:focus-visible {
  outline: 3px solid var(--zpsv-focus) !important;
  outline-offset: 3px !important;
}

/* Mobile hero: image is first and visible; copy and CTAs remain inside the same hero. */
@media (max-width: 760px) {
  .homepage-main .hero {
    min-height: 0 !important;
    background-image: none !important;
    background-color: var(--zpsv-bg) !important;
  }

  .homepage-main .hero-inner {
    display: grid !important;
    grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr) !important;
    align-items: stretch !important;
    width: min(calc(100% - 24px), 720px) !important;
    min-height: 0 !important;
    gap: 14px !important;
    padding: 18px 0 30px !important;
  }

  .homepage-main .hero-media {
    display: block !important;
    min-height: 360px !important;
    order: 1 !important;
    border: 1px solid rgba(43,218,196,.44) !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    background: #001619 url("../images/bunny-creator-hero-mobile.png") center / cover no-repeat !important;
  }

  .homepage-main .hero-media img,
  .homepage-main .hero-media video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .homepage-main .hero-copy {
    position: relative !important;
    inset: auto !important;
    z-index: 4 !important;
    order: 2 !important;
    max-width: none !important;
    padding: 20px 0 0 !important;
  }

  .homepage-main .hero h1 {
    font-size: clamp(30px, 7.4vw, 54px) !important;
    line-height: 1 !important;
  }

  .homepage-main .hero-copy > p {
    max-width: none !important;
    margin: 16px 0 18px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  .homepage-main .hero-actions {
    width: 100% !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 9px !important;
  }

  .homepage-main .hero .solid-button,
  .homepage-main .hero .hero-secondary-cta {
    width: 100% !important;
    min-height: 46px !important;
  }

  .homepage-main .hero-note {
    position: static !important;
    display: flex !important;
    margin-top: 16px !important;
    max-width: none !important;
    color: var(--zpsv-teal) !important;
  }
}

@media (max-width: 480px) {
  .homepage-main .hero-inner {
    display: flex !important;
    flex-direction: column !important;
    width: min(calc(100% - 24px), 520px) !important;
    gap: 0 !important;
  }

  .homepage-main .hero-media {
    order: 1 !important;
    width: 100% !important;
    min-height: 300px !important;
    aspect-ratio: 16 / 11 !important;
  }

  .homepage-main .hero-copy {
    order: 2 !important;
    padding-top: 22px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Public React route contrast layer: override legacy light cards and controls. */
#root .prompt-card,
#root .prompt-card-grid,
#root .prompt-card-list,
#root .browse-prompt-list,
#root .pricing-card,
#root .form-card,
#root .legal-page,
#root .account-card,
#root .policy-reference-card,
#root .contact-info-card,
#root .contact-form-card,
#root .membership-reference-card,
#root .auth-reference-card,
#root .detail-prompt-content,
#root .detail-prompt-meta,
#root .prompt-box {
  color: var(--zpsv-heading) !important;
  background: linear-gradient(145deg, var(--zpsv-surface-2), var(--zpsv-surface)) !important;
  border-color: rgba(43,218,196,.58) !important;
}

#root .prompt-card h1,
#root .prompt-card h2,
#root .prompt-card h3,
#root .prompt-card h4,
#root .prompt-card p,
#root .prompt-card span,
#root .prompt-card small,
#root .prompt-card label,
#root .prompt-card .card-copy h3,
#root .prompt-card .card-category,
#root .prompt-card .card-meta-line,
#root .prompt-card .card-format,
#root .prompt-card-grid h1,
#root .prompt-card-grid h2,
#root .prompt-card-grid h3,
#root .prompt-card-grid p,
#root .prompt-card-grid span,
#root .prompt-card-grid small,
#root .prompt-card-list h1,
#root .prompt-card-list h2,
#root .prompt-card-list h3,
#root .prompt-card-list p,
#root .prompt-card-list span,
#root .prompt-card-list small,
#root .pricing-card h1,
#root .pricing-card h2,
#root .pricing-card h3,
#root .pricing-card p,
#root .pricing-card li,
#root .pricing-card span,
#root .form-card h1,
#root .form-card h2,
#root .form-card h3,
#root .form-card p,
#root .form-card label,
#root .legal-page h1,
#root .legal-page h2,
#root .legal-page h3,
#root .legal-page p,
#root .account-card h1,
#root .account-card h2,
#root .account-card h3,
#root .account-card p,
#root .detail-prompt-content h1,
#root .detail-prompt-content h2,
#root .detail-prompt-content h3,
#root .detail-prompt-content p,
#root .detail-prompt-meta span,
#root .prompt-box h1,
#root .prompt-box h2,
#root .prompt-box h3,
#root .prompt-box p {
  color: var(--zpsv-heading) !important;
}

#root .prompt-card .card-category,
#root .prompt-card .card-meta-line,
#root .prompt-card .card-format,
#root .prompt-card p,
#root .prompt-card small,
#root .pricing-card .muted,
#root .form-card small,
#root .account-card small,
#root .detail-prompt-meta small {
  color: var(--zpsv-body) !important;
}

#root .filter-rail,
#root .filter-group,
#root .filter-chip,
#root .filter button,
#root .filter select,
#root .filter input,
#root .sort-control,
#root .search-control {
  color: var(--zpsv-heading) !important;
  background: #061b1e !important;
  border-color: rgba(43,218,196,.55) !important;
}

#root .filter-chip:hover,
#root .filter-chip.active,
#root .filter button:hover,
#root .filter button.active {
  color: #042927 !important;
  background: linear-gradient(135deg, var(--zpsv-teal), var(--zpsv-lime)) !important;
  border-color: var(--zpsv-lime) !important;
}

#root .catalog-cta,
#root .catalog-cta-free,
#root .catalog-cta-premium,
#root .card-actions button,
#root .card-actions a,
#root .pricing-card button,
#root .pricing-card a,
#root .form-card button,
#root .form-card input[type=submit] {
  color: #042927 !important;
  background: linear-gradient(135deg, var(--zpsv-teal), var(--zpsv-lime)) !important;
  border-color: var(--zpsv-lime) !important;
}

#root .access,
#root .card-free-corner,
#root .card-premium-corner,
#root .card-category-free,
#root .card-category-premium {
  color: #042927 !important;
  background: var(--zpsv-lime) !important;
  border-color: var(--zpsv-lime) !important;
}

#root .page-heading p,
#root .pricing-context p,
#root .contact-reference-head p,
#root .policy-reference-page p,
#root .account-reference-page p,
#root .auth-reference-card p,
#root .membership-reference-head p {
  color: var(--zpsv-body) !important;
}

#root .pricing-card hr,
#root .form-card hr,
#root .account-card hr,
#root .detail-prompt-content hr {
  border-color: rgba(43,218,196,.28) !important;
}

/* Pricing-specific readability: the legacy card uses light-theme price and trust colors. */
#root .pricing-page,
#root .pricing-top,
#root .pricing-context,
#root .membership-reference-page,
#root .membership-reference-head,
#root .membership-trust-row,
#root .membership-support-note,
#root .membership-login-note {
  color: var(--zpsv-body) !important;
}

#root .membership-price,
#root .membership-price strong,
#root .membership-price span,
#root .pricing-card .membership-price,
#root .pricing-card .membership-price strong,
#root .pricing-card .membership-price span,
#root .pricing-card .price,
#root .pricing-card .price strong,
#root .pricing-card .price span,
#root .pricing-card [class*="price"] {
  color: var(--zpsv-heading) !important;
  text-shadow: 0 2px 18px rgba(43,218,196,.18) !important;
}

#root .pricing-card .membership-trust-row,
#root .pricing-card .membership-trust-row > div,
#root .pricing-card .membership-trust-row article,
#root .pricing-card .trust-card,
#root .membership-trust-row > div,
#root .membership-trust-row article {
  color: var(--zpsv-heading) !important;
  background: #f1fbfa !important;
  border-color: rgba(43,218,196,.45) !important;
}

#root .membership-trust-row strong,
#root .membership-trust-row b,
#root .membership-trust-row span,
#root .membership-trust-row small,
#root .membership-trust-row p,
#root .membership-support-note,
#root .membership-login-note {
  color: #063437 !important;
}

#root .membership-join-button,
#root .membership-login-note a,
#root .membership-support-note a,
#root .payment-support-line a {
  color: #042927 !important;
}

#root .membership-support-note,
#root .membership-login-note,
#root .payment-support-line {
  color: var(--zpsv-body) !important;
}

#root .membership-support-note a,
#root .membership-login-note a,
#root .payment-support-line a {
  color: var(--zpsv-teal) !important;
}


/* Stable shared header layout: CSS-only, route-independent, and safe if optional links are absent. */
.site-header .nav-shell {
  position: relative !important;
  justify-content: center !important;
  gap: 18px !important;
}
.site-header .nav-shell > .brand,
.site-header .nav-shell > a:first-child {
  margin-right: auto !important;
}
.site-header .nav-links {
  order: 2 !important;
  flex: 0 1 auto !important;
  justify-content: center !important;
  align-items: center !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  gap: 18px !important;
}
.site-header .nav-links a,
.site-header .nav-links .nav-login {
  white-space: nowrap !important;
}
.site-header .nav-links a[href*="/browse" i] { order: 10 !important; }
.site-header .nav-links a[href*="social" i],
.site-header .nav-links a[href*="community" i] { order: 20 !important; }
.site-header .nav-links a[href*="contact" i] { order: 30 !important; }
.site-header .nav-links a[href*="account" i] { order: 40 !important; }
.site-header .nav-links a[href*="lms" i],
.site-header .nav-links a[aria-label*="learning portal" i],
.site-header .nav-links a[title*="learning portal" i] {
  order: 50 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 36px !important;
  padding: 9px 16px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, var(--zpsv-teal), var(--zpsv-lime)) !important;
  color: #042927 !important;
  font-weight: 800 !important;
  box-shadow: 0 8px 18px rgba(43,218,196,.16) !important;
}
.site-header .nav-links .nav-login,
.site-header .nav-links button[aria-label*="logout" i],
.site-header .nav-links button[title*="logout" i] {
  order: 60 !important;
  min-height: 36px !important;
  padding: 9px 16px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, var(--zpsv-teal), var(--zpsv-lime)) !important;
  color: #042927 !important;
  font-weight: 800 !important;
}
.site-header .nav-links a[href*="lms" i]:hover,
.site-header .nav-links .nav-login:hover,
.site-header .nav-links button[aria-label*="logout" i]:hover,
.site-header .nav-links button[title*="logout" i]:hover {
  color: #042927 !important;
  filter: brightness(1.08) !important;
  transform: translateY(-1px) !important;
}
@media (max-width: 760px) {
  .site-header .nav-shell {
    justify-content: space-between !important;
  }
  .site-header .nav-shell > .brand,
  .site-header .nav-shell > a:first-child {
    margin-right: 0 !important;
  }
  .site-header .nav-links {
    margin: 0 !important;
    gap: 3px !important;
  }
  .site-header .nav-links a[href*="lms" i],
  .site-header .nav-links .nav-login,
  .site-header .nav-links button[aria-label*="logout" i],
  .site-header .nav-links button[title*="logout" i] {
    justify-content: flex-start !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
}


/* Header correction: flatten the desktop nav group so LMS can occupy the My Account slot. */
@media (min-width: 761px) {
  .site-header .nav-shell {
    justify-content: center !important;
    gap: 18px !important;
  }
  .site-header .nav-shell > .brand,
  .site-header .nav-shell > a:first-child {
    order: 1 !important;
    margin-right: auto !important;
  }
  .site-header .nav-shell > .nav-links {
    display: contents !important;
    order: 2 !important;
    margin: 0 !important;
  }
  .site-header .nav-shell > .nav-links a[href*="/account" i] {
    display: none !important;
  }
  .site-header .nav-shell > .nav-links a[href*="/browse" i] { order: 10 !important; }
  .site-header .nav-shell > .nav-links a[href*="social" i],
  .site-header .nav-shell > .nav-links a[href*="community" i] { order: 20 !important; }
  .site-header .nav-shell > .nav-links a[href*="contact" i] { order: 30 !important; }
  .site-header .nav-shell > a[href*="/lms" i],
  .site-header .nav-shell > a[aria-label*="learning portal" i],
  .site-header .nav-shell > a[title*="learning portal" i] {
    order: 40 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 36px !important;
    padding: 9px 16px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, var(--zpsv-teal), var(--zpsv-lime)) !important;
    color: #042927 !important;
    font-weight: 800 !important;
    box-shadow: 0 8px 18px rgba(43,218,196,.16) !important;
  }
  .site-header .nav-shell > .nav-login,
  .site-header .nav-shell > button[aria-label*="logout" i],
  .site-header .nav-shell > button[title*="logout" i] {
    order: 50 !important;
    min-height: 36px !important;
    padding: 9px 16px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, var(--zpsv-teal), var(--zpsv-lime)) !important;
    color: #042927 !important;
    font-weight: 800 !important;
  }
}


/* Final precise header order based on the rendered React/MU-plugin markup. */
@media (min-width: 761px) {
  .site-header .nav-shell {
    position: relative !important;
    justify-content: center !important;
    gap: 18px !important;
  }
  .site-header .nav-shell > .brand,
  .site-header .nav-shell > a.bunny-brand {
    position: absolute !important;
    left: 0 !important;
    margin: 0 !important;
  }
  .site-header .nav-shell > .nav-utilities {
    position: absolute !important;
    right: 0 !important;
    margin: 0 !important;
  }
  .site-header .nav-shell > .nav-links {
    display: contents !important;
    margin: 0 !important;
  }
  .site-header .nav-shell > .nav-links a[href="/browse"] { order: 10 !important; }
  .site-header .nav-shell > .nav-links a[href="/community"] { order: 20 !important; }
  .site-header .nav-shell > a.baa-header-lms {
    order: 30 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 36px !important;
    padding: 9px 16px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, var(--zpsv-teal), var(--zpsv-lime)) !important;
    color: #000 !important;
    font-weight: 800 !important;
    box-shadow: 0 8px 18px rgba(43,218,196,.16) !important;
  }
  .site-header .nav-shell > .nav-links a[href="/account"] {
    order: 40 !important;
    display: inline-flex !important;
  }
  .site-header .nav-shell > button.nav-cta {
    order: 50 !important;
    min-height: 36px !important;
    padding: 9px 16px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, var(--zpsv-teal), var(--zpsv-lime)) !important;
    color: #000 !important;
    font-weight: 800 !important;
  }
  .site-header .nav-shell > a.bunny-contact-link {
    order: 60 !important;
    display: inline-flex !important;
  }
  .site-header .nav-shell > a.baa-header-lms:hover,
  .site-header .nav-shell > button.nav-cta:hover {
    color: #000 !important;
    filter: brightness(1.08) !important;
    transform: translateY(-1px) !important;
  }
}


/* Exact final order for the actual React header markup: nav-links is flattened on desktop. */
@media (min-width: 761px) {
  .site-header .nav-shell > .nav-links {
    display: contents !important;
  }
  .site-header .nav-shell > .nav-links > .bunny-home-nav-link {
    display: none !important;
  }
  .site-header .nav-shell > .nav-links > a[href="/browse"] {
    order: 10 !important;
    display: inline-flex !important;
  }
  .site-header .nav-shell > .nav-links > a[href="/community"] {
    order: 20 !important;
    display: inline-flex !important;
  }
  .site-header .nav-shell > .nav-links > a.baa-header-lms {
    order: 30 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 36px !important;
    padding: 9px 16px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, var(--zpsv-teal), var(--zpsv-lime)) !important;
    color: #000 !important;
    font-weight: 800 !important;
    box-shadow: 0 8px 18px rgba(43,218,196,.16) !important;
  }
  .site-header .nav-shell > .nav-links > a[href="/account"] {
    order: 40 !important;
    display: inline-flex !important;
  }
  .site-header .nav-shell > .nav-links > button.nav-cta {
    order: 50 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 36px !important;
    padding: 9px 16px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, var(--zpsv-teal), var(--zpsv-lime)) !important;
    color: #000 !important;
    font-weight: 800 !important;
  }
  .site-header .nav-shell > .nav-links > a.bunny-contact-link {
    order: 60 !important;
    display: inline-flex !important;
  }
  .site-header .nav-shell > .nav-links > a.baa-header-lms:hover,
  .site-header .nav-shell > .nav-links > button.nav-cta:hover {
    color: #000 !important;
    filter: brightness(1.08) !important;
    transform: translateY(-1px) !important;
  }
}