/*
 * SSA Neon Framework
 * Layer: Page Shells
 * Version: 1.0.0
 * Updated: 2026-06-17
 *
 * Known exported page/landing shells from the CSS intelligence export. This is
 * intentionally shell-scoped, so page systems can be expanded without touching
 * arbitrary third-party widgets.
 */

body :where(
  #sssss-shell,
  #sth-page-shell,
  #fin-shell,
  #zodiac-page-shell,
  #ubcc-page-shell,
  #love-page-shell,
  #nnt-page-shell,
  #pd-books-shell,
  #berc-shell,
  #ayur-shell,
  #baby-shell,
  #rel-shell,
  #nick-shell,
  #spooky-shell,
  #health-shell,
  #name-shell,
  #fun-shell,
  #rel-hub-shell,
  #sound-advice-shell,
  #ssa-life-purpose-shell,
  #ssa-ennea-tool,
  #ssa-mbti-tool,
  #ssa-big5-tool,
  #ssa-book-app,
  #homeschool-dyscalculia-page,
  #math-curriculum-dyscalculia-page,
  #dyscalculia-program-page,
  #online-math-tutoring-page,
  #elementary-math-tutor-falling-behind-page,
  #tutor-vs-app-page,
  #math-facts-signs-page,
  #math-fluency-no-timed-tests-page,
  #shy-kids-confidence-page,
  #english-speaking-confidence-page,
  #ssa-online-reading-help-spoke,
  #ssa-reading-program-spoke,
  #ssa-reading-comprehension-spoke,
  #ssa-screening-women-shell,
  #famrel-shell,
  .anniversary-calculator,
  .credit-calculator,
  .ssa-subhub
) {
  box-sizing: border-box !important;
  max-width: min(100%, 1120px) !important;
  margin-inline: auto !important;
  color: var(--ssa-site-ink-soft) !important;
  color-scheme: dark !important;
  overflow-wrap: break-word !important;
}

body :where(
  #sssss-shell,
  #sth-page-shell,
  #fin-shell,
  #zodiac-page-shell,
  #ubcc-page-shell,
  #love-page-shell,
  #nnt-page-shell,
  #pd-books-shell,
  #berc-shell,
  #ayur-shell,
  #baby-shell,
  #rel-shell,
  #nick-shell,
  #spooky-shell,
  #health-shell,
  #name-shell,
  #fun-shell,
  #rel-hub-shell,
  #sound-advice-shell,
  #ssa-life-purpose-shell,
  #ssa-ennea-tool,
  #ssa-mbti-tool,
  #ssa-big5-tool,
  #ssa-book-app,
  #homeschool-dyscalculia-page,
  #math-curriculum-dyscalculia-page,
  #dyscalculia-program-page,
  #online-math-tutoring-page,
  #elementary-math-tutor-falling-behind-page,
  #tutor-vs-app-page,
  #math-facts-signs-page,
  #math-fluency-no-timed-tests-page,
  #shy-kids-confidence-page,
  #english-speaking-confidence-page,
  #ssa-online-reading-help-spoke,
  #ssa-reading-program-spoke,
  #ssa-reading-comprehension-spoke,
  #ssa-screening-women-shell,
  #famrel-shell,
  .anniversary-calculator,
  .credit-calculator,
  .ssa-subhub
) :where(*) {
  box-sizing: border-box !important;
  min-width: 0;
}

body :where(
  #sssss-shell,
  #sth-page-shell,
  #fin-shell,
  #zodiac-page-shell,
  #ubcc-page-shell,
  #love-page-shell,
  #nnt-page-shell,
  #pd-books-shell,
  #berc-shell,
  #ayur-shell,
  #baby-shell,
  #rel-shell,
  #nick-shell,
  #spooky-shell,
  #health-shell,
  #name-shell,
  #fun-shell,
  #rel-hub-shell,
  #sound-advice-shell,
  #ssa-life-purpose-shell,
  #homeschool-dyscalculia-page,
  #math-curriculum-dyscalculia-page,
  #dyscalculia-program-page,
  .anniversary-calculator,
  .credit-calculator,
  .ssa-subhub
) :where(.card, .panel, .box, .section, .content, .collapsible, .faq-item, .toc-container, .result, .results, .summary, .notice, .callout, .step, fieldset, details, table, form) {
  border: 1px solid var(--ssa-site-line) !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, rgba(8, 18, 34, 0.98), rgba(3, 8, 18, 0.98)) !important;
  color: var(--ssa-site-ink) !important;
}

/*
 * Known page-shell pale div panels from exports.
 *
 * These catch white/pale div wrappers such as intro boxes, mini cards,
 * related blocks, quick-answer cards, TOCs, picks, and hero-side panels.
 */
body :where(
  #sssss-shell,
  #sth-page-shell,
  #sth-sr-shell,
  #fin-shell,
  #zodiac-page-shell,
  #ubcc-page-shell,
  #eos-page-shell,
  #love-page-shell,
  #rel-shell,
  #rel-tools-shell,
  #nnt-page-shell,
  #pd-books-shell,
  #berc-shell,
  #bng-page-shell,
  #bnn-page-shell,
  #erc-page-shell,
  #ayur-shell,
  #baby-shell,
  #health-shell,
  #name-shell,
  #sound-advice-shell,
  #ssa-life-purpose-shell,
  #homeschool-dyscalculia-page,
  #math-curriculum-dyscalculia-page,
  #dyscalculia-program-page,
  .anniversary-calculator,
  .credit-calculator,
  .ssa-subhub
) :where(
  [class*="-intro"],
  [class*="-mini"],
  [class*="-mini-card"],
  [class*="-toc-panel"],
  [class*="-toc-wrap"],
  [class*="-quick-answer"],
  [class*="-related"],
  [class*="-picks"],
  [class*="-hero-side"],
  [class*="-hub-render-wrap"],
  [class*="-directory-card"],
  [class*="-faq"] details,
  .faq-section,
  .faq-container,
  .content,
  .container,
  .result,
  .countdown
) {
  border: 1px solid rgba(56, 189, 248, 0.42) !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, rgba(8, 18, 34, 0.98), rgba(3, 8, 18, 0.98)) !important;
  color: var(--ssa-site-ink-soft) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

body :where(
  #sssss-shell,
  #sth-page-shell,
  #sth-sr-shell,
  #fin-shell,
  #zodiac-page-shell,
  #ubcc-page-shell,
  #eos-page-shell,
  #love-page-shell,
  #rel-shell,
  #rel-tools-shell,
  #nnt-page-shell,
  #pd-books-shell,
  #berc-shell,
  #bng-page-shell,
  #bnn-page-shell,
  #erc-page-shell,
  #ayur-shell,
  #baby-shell,
  #health-shell,
  #name-shell,
  #sound-advice-shell,
  #ssa-life-purpose-shell,
  #homeschool-dyscalculia-page,
  #math-curriculum-dyscalculia-page,
  #dyscalculia-program-page,
  .anniversary-calculator,
  .credit-calculator,
  .ssa-subhub
) :where(
  [class*="-intro"],
  [class*="-mini"],
  [class*="-mini-card"],
  [class*="-toc-panel"],
  [class*="-toc-wrap"],
  [class*="-quick-answer"],
  [class*="-related"],
  [class*="-picks"],
  [class*="-hero-side"],
  [class*="-hub-render-wrap"],
  [class*="-directory-card"],
  [class*="-faq"] details,
  .faq-section,
  .faq-container,
  .content,
  .container,
  .result,
  .countdown
) :where(h1, h2, h3, h4, h5, h6, p, li, span, strong, em, a, small, div) {
  color: var(--ssa-site-ink-soft) !important;
  opacity: 1 !important;
}

body :is(
  #sssss-shell,
  #sth-page-shell,
  #sth-sr-shell,
  #fin-shell,
  #zodiac-page-shell,
  #ubcc-page-shell,
  #eos-page-shell,
  #love-page-shell,
  #rel-shell,
  #rel-tools-shell,
  #nnt-page-shell,
  #pd-books-shell,
  #berc-shell,
  #bng-page-shell,
  #bnn-page-shell,
  #erc-page-shell,
  #ayur-shell,
  #baby-shell,
  #health-shell,
  #name-shell,
  #sound-advice-shell,
  #ssa-life-purpose-shell,
  #homeschool-dyscalculia-page,
  #math-curriculum-dyscalculia-page,
  #dyscalculia-program-page,
  .anniversary-calculator,
  .credit-calculator,
  .ssa-subhub
) :is(
  [class*="-intro"],
  [class*="-mini"],
  [class*="-mini-card"],
  [class*="-toc-panel"],
  [class*="-toc-wrap"],
  [class*="-quick-answer"],
  [class*="-related"],
  [class*="-picks"],
  [class*="-hero-side"],
  [class*="-hub-render-wrap"],
  [class*="-directory-card"],
  .faq-section,
  .faq-container,
  .content,
  .container,
  .result,
  .countdown
) {
  color: var(--ssa-site-ink-soft) !important;
}

body :is(
  #sssss-shell,
  #sth-page-shell,
  #sth-sr-shell,
  #fin-shell,
  #zodiac-page-shell,
  #ubcc-page-shell,
  #eos-page-shell,
  #love-page-shell,
  #rel-shell,
  #rel-tools-shell,
  #nnt-page-shell,
  #pd-books-shell,
  #berc-shell,
  #bng-page-shell,
  #bnn-page-shell,
  #erc-page-shell,
  #ayur-shell,
  #baby-shell,
  #health-shell,
  #name-shell,
  #sound-advice-shell,
  #ssa-life-purpose-shell,
  #homeschool-dyscalculia-page,
  #math-curriculum-dyscalculia-page,
  #dyscalculia-program-page,
  .anniversary-calculator,
  .credit-calculator,
  .ssa-subhub
) :is(
  [class*="-intro"],
  [class*="-mini"],
  [class*="-mini-card"],
  [class*="-toc-panel"],
  [class*="-toc-wrap"],
  [class*="-quick-answer"],
  [class*="-related"],
  [class*="-picks"],
  [class*="-hero-side"],
  [class*="-hub-render-wrap"],
  [class*="-directory-card"],
  .faq-section,
  .faq-container,
  .content,
  .container,
  .result,
  .countdown
) :is(p, li, span, small, em, label, figcaption, div, a) {
  color: var(--ssa-site-ink-soft) !important;
  opacity: 1 !important;
}

body :is(
  #sssss-shell,
  #sth-page-shell,
  #sth-sr-shell,
  #fin-shell,
  #zodiac-page-shell,
  #ubcc-page-shell,
  #eos-page-shell,
  #love-page-shell,
  #rel-shell,
  #rel-tools-shell,
  #nnt-page-shell,
  #pd-books-shell,
  #berc-shell,
  #bng-page-shell,
  #bnn-page-shell,
  #erc-page-shell,
  #ayur-shell,
  #baby-shell,
  #health-shell,
  #name-shell,
  #sound-advice-shell,
  #ssa-life-purpose-shell,
  #homeschool-dyscalculia-page,
  #math-curriculum-dyscalculia-page,
  #dyscalculia-program-page,
  .anniversary-calculator,
  .credit-calculator,
  .ssa-subhub
) :is(
  [class*="-intro"],
  [class*="-mini"],
  [class*="-mini-card"],
  [class*="-toc-panel"],
  [class*="-toc-wrap"],
  [class*="-quick-answer"],
  [class*="-related"],
  [class*="-picks"],
  [class*="-hero-side"],
  [class*="-hub-render-wrap"],
  [class*="-directory-card"],
  .faq-section,
  .faq-container,
  .content,
  .container,
  .result,
  .countdown
) :is(h1, h2, h3, h4, h5, h6, strong, b) {
  color: #ffffff !important;
  opacity: 1 !important;
  text-shadow: 0 0 16px rgba(56, 189, 248, 0.25) !important;
}

body :where(
  #sssss-shell,
  #sth-page-shell,
  #fin-shell,
  #zodiac-page-shell,
  #ubcc-page-shell,
  #love-page-shell,
  #nnt-page-shell,
  #pd-books-shell,
  #berc-shell,
  #ayur-shell,
  #baby-shell,
  #rel-shell,
  #nick-shell,
  #spooky-shell,
  #health-shell,
  #name-shell,
  #fun-shell,
  #rel-hub-shell,
  #sound-advice-shell,
  #ssa-life-purpose-shell,
  #homeschool-dyscalculia-page,
  #math-curriculum-dyscalculia-page,
  #dyscalculia-program-page,
  .anniversary-calculator,
  .credit-calculator,
  .ssa-subhub
) :where(.cta-primary, .cta-secondary, .nav-btn, .try-btn, .timer-btn, .concern-btn, .experience-btn, .mood-btn, .download-buttons .btn, .download-table .btn, #toggleSections) {
  border: 1px solid rgba(45, 212, 191, 0.72) !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, var(--ssa-site-teal), var(--ssa-site-cyan)) !important;
  color: #031018 !important;
  font-weight: 850 !important;
  text-decoration: none !important;
}

/*
 * Sleep/stress/financial legacy shell.
 *
 * Exported pages under #sssss-shell carry highly specific inline styles,
 * including black text, pale panels, and literal entity arrows. Keep this
 * scoped tightly to that shell so it does not leak into unrelated blocks.
 */
body #sssss-shell .sssss-nav-wrap,
body #sssss-shell .sssss-content-wrap {
  border: 1px solid var(--ssa-site-line) !important;
  border-radius: var(--ssa-neon-radius) !important;
  background:
    radial-gradient(circle at 8% 0%, rgba(45, 212, 191, 0.14), transparent 34%),
    linear-gradient(180deg, rgba(8, 18, 34, 0.98), rgba(3, 8, 18, 0.98)) !important;
  color: var(--ssa-site-ink) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

body #sssss-shell .sssss-nav-wrap {
  margin-top: 0 !important;
}

body #sssss-shell .sssss-content-wrap,
body #sssss-shell .sssss-content-wrap p,
body #sssss-shell .sssss-content-wrap li,
body #sssss-shell .sssss-content-wrap span,
body #sssss-shell .sssss-content-wrap strong,
body #sssss-shell .sssss-content-wrap em,
body #sssss-shell .sssss-content-wrap label,
body #sssss-shell .sssss-content-wrap legend,
body #sssss-shell .sssss-content-wrap td,
body #sssss-shell .sssss-content-wrap th,
body #sssss-shell .sssss-content-wrap a,
body #sssss-shell .sssss-content-wrap h1,
body #sssss-shell .sssss-content-wrap h2,
body #sssss-shell .sssss-content-wrap h3,
body #sssss-shell .sssss-content-wrap h4,
body #sssss-shell .sssss-content-wrap h5,
body #sssss-shell .sssss-content-wrap h6,
body #sssss-shell .sssss-nav-wrap,
body #sssss-shell .sssss-nav-wrap p,
body #sssss-shell .sssss-nav-wrap li,
body #sssss-shell .sssss-nav-wrap span,
body #sssss-shell .sssss-nav-wrap strong,
body #sssss-shell .sssss-nav-wrap a,
body #sssss-shell .sssss-nav-wrap h1,
body #sssss-shell .sssss-nav-wrap h2,
body #sssss-shell .sssss-nav-wrap h3,
body #sssss-shell .sssss-nav-wrap h4 {
  color: var(--ssa-site-ink-soft) !important;
  opacity: 1 !important;
}

body #sssss-shell .sssss-content-wrap h1,
body #sssss-shell .sssss-content-wrap h2,
body #sssss-shell .sssss-content-wrap h3,
body #sssss-shell .sssss-content-wrap h4,
body #sssss-shell .sssss-content-wrap h5,
body #sssss-shell .sssss-content-wrap h6,
body #sssss-shell .sssss-nav-wrap h1,
body #sssss-shell .sssss-nav-wrap h2,
body #sssss-shell .sssss-nav-wrap h3,
body #sssss-shell .sssss-nav-wrap h4 {
  color: #ffffff !important;
  text-shadow: 0 0 16px rgba(56, 189, 248, 0.28) !important;
}

body #sssss-shell .sssss-content-wrap button,
body #sssss-shell .sssss-content-wrap #calculate,
body #sssss-shell .sssss-content-wrap #toggleSections,
body #sssss-shell .sssss-content-wrap #toc-toggle-btn,
body #sssss-shell .sssss-content-wrap .collapsible,
body #sssss-shell .sssss-content-wrap .collapsible-btn,
body #sssss-shell .sssss-content-wrap .faq-question,
body #sssss-shell button#toggleSections {
  display: inline-flex !important;
  width: 100% !important;
  min-height: 44px !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  border: 1px solid rgba(45, 212, 191, 0.72) !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, rgba(45, 212, 191, 0.92), rgba(56, 189, 248, 0.92)) !important;
  color: #031018 !important;
  font-weight: 850 !important;
  line-height: 1.25 !important;
  text-align: left !important;
  box-shadow: 0 12px 28px rgba(34, 211, 238, 0.22) !important;
}

body #sssss-shell .sssss-content-wrap button *,
body #sssss-shell .sssss-content-wrap #toggleSections *,
body #sssss-shell .sssss-content-wrap .collapsible *,
body #sssss-shell .sssss-content-wrap .collapsible-btn *,
body #sssss-shell .sssss-content-wrap .faq-question * {
  color: #031018 !important;
}

body #sssss-shell .sssss-content-wrap #collapsible-sections,
body #sssss-shell .sssss-content-wrap #toc-content,
body #sssss-shell .sssss-content-wrap #results,
body #sssss-shell .sssss-content-wrap .collapsible-content,
body #sssss-shell .sssss-content-wrap .faq-answer,
body #sssss-shell .sssss-content-wrap .faq-item,
body #sssss-shell .sssss-content-wrap .info-box,
body #sssss-shell .sssss-content-wrap .sssss-info-box,
body #sssss-shell .sssss-content-wrap .sssss-highlight-box,
body #sssss-shell .sssss-content-wrap .container {
  border: 1px solid rgba(56, 189, 248, 0.42) !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, rgba(8, 18, 34, 0.98), rgba(3, 8, 18, 0.98)) !important;
  color: var(--ssa-site-ink-soft) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28) !important;
}

body #sssss-shell .sssss-content-wrap .faq-question::after,
body #sssss-shell .sssss-content-wrap .collapsible-btn::after,
body #sssss-shell .sssss-content-wrap .collapsible::after {
  color: #031018 !important;
  content: "\25BE" !important;
  margin-left: auto !important;
  font-size: 1rem !important;
  font-weight: 900 !important;
}

body #sssss-shell .sssss-content-wrap .faq-question[aria-expanded="true"]::after,
body #sssss-shell .sssss-content-wrap .collapsible-btn[aria-expanded="true"]::after,
body #sssss-shell .sssss-content-wrap .collapsible[aria-expanded="true"]::after {
  content: "\25B4" !important;
}

body #sssss-shell .sssss-content-wrap :where(button, #toggleSections, .collapsible, .collapsible-btn, .faq-question) > span[aria-hidden="true"] {
  font-size: 0 !important;
  line-height: 0 !important;
}

body #sssss-shell .sssss-content-wrap :where(button, #toggleSections, .collapsible, .collapsible-btn, .faq-question) > span[aria-hidden="true"]::after {
  content: "\25BE" !important;
  display: inline-block !important;
  color: #031018 !important;
  font-size: 1rem !important;
  line-height: 1 !important;
  font-weight: 900 !important;
}

body #sssss-shell .sssss-content-wrap :where(button, #toggleSections, .collapsible, .collapsible-btn, .faq-question)[aria-expanded="true"] > span[aria-hidden="true"]::after {
  content: "\25B4" !important;
}

@media (max-width: 780px) {
  body :where(
    #sssss-shell,
    #sth-page-shell,
    #fin-shell,
    #zodiac-page-shell,
    #ubcc-page-shell,
    #love-page-shell,
    #rel-shell,
    #health-shell,
    #fun-shell,
    #rel-hub-shell,
    .anniversary-calculator,
    .credit-calculator,
    .ssa-subhub
  ) {
    width: 100% !important;
    max-width: 100% !important;
  }

  body #sssss-shell .sssss-nav-wrap,
  body #sssss-shell .sssss-content-wrap {
    padding: 14px !important;
  }
}

/*
 * Export-discovered page shells.
 *
 * These IDs appeared in all-pages-post-content.tsv but were not all present in
 * the first shell registry. Keep them ID-scoped so third-party widgets are not
 * swept into the page-shell treatment.
 */
body :where(
  #dating-shell,
  #casual-shell,
  #newrel-shell,
  #love-shell,
  #poly-shell,
  #rel-tools-shell,
  #eos-page-shell,
  #bng-page-shell,
  #bnn-page-shell,
  #erc-page-shell,
  #sth-sr-shell,
  #toolkit-hub,
  #games,
  #section-hero,
  #section-features,
  #section-comparison,
  #section-cta,
  #faq-container,
  #faq-mobile
) {
  box-sizing: border-box !important;
  max-width: min(100%, 1120px) !important;
  margin-inline: auto !important;
  color: var(--ssa-site-ink-soft) !important;
  color-scheme: dark !important;
  overflow-wrap: break-word !important;
}

body :where(
  #dating-shell,
  #casual-shell,
  #newrel-shell,
  #love-shell,
  #poly-shell,
  #rel-tools-shell,
  #eos-page-shell,
  #bng-page-shell,
  #bnn-page-shell,
  #erc-page-shell,
  #sth-sr-shell,
  #toolkit-hub
) :where(*) {
  box-sizing: border-box !important;
  min-width: 0 !important;
}

body :where(
  #dating-shell,
  #casual-shell,
  #newrel-shell,
  #love-shell,
  #poly-shell,
  #rel-tools-shell,
  #eos-page-shell,
  #bng-page-shell,
  #bnn-page-shell,
  #erc-page-shell,
  #sth-sr-shell,
  #toolkit-hub
) :where(.card, .panel, .box, .section, .content, .faq-item, .faq-answer, .faq-question, .toc-container, .result, .results, .summary, .notice, .callout, .step, fieldset, details, table, form, [class*="-card"], [class*="-box"], [class*="-panel"], [class*="-section"], [class*="-callout"]) {
  border: 1px solid var(--ssa-site-line) !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, rgba(8, 18, 34, 0.98), rgba(3, 8, 18, 0.98)) !important;
  color: var(--ssa-site-ink-soft) !important;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

body :where(
  #dating-shell,
  #casual-shell,
  #newrel-shell,
  #love-shell,
  #poly-shell,
  #rel-tools-shell,
  #eos-page-shell,
  #bng-page-shell,
  #bnn-page-shell,
  #erc-page-shell,
  #sth-sr-shell,
  #toolkit-hub
) :where(h1, h2, h3, h4, h5, h6, strong, b) {
  color: #ffffff !important;
  opacity: 1 !important;
  text-shadow: 0 0 16px rgba(56, 189, 248, 0.25) !important;
}

body :where(
  #dating-shell,
  #casual-shell,
  #newrel-shell,
  #love-shell,
  #poly-shell,
  #rel-tools-shell,
  #eos-page-shell,
  #bng-page-shell,
  #bnn-page-shell,
  #erc-page-shell,
  #sth-sr-shell,
  #toolkit-hub
) :where(p, li, span, small, em, label, div, td, th) {
  color: var(--ssa-site-ink-soft) !important;
  opacity: 1 !important;
}

/*
 * SSA homepage experience shell.
 *
 * The homepage is managed as page content, so these rules live in the MU page
 * layer instead of relying on inline styles surviving editor/theme filters.
 */
body :where(.ssa-home) {
  box-sizing: border-box !important;
  width: min(100%, 1180px) !important;
  max-width: min(100%, 1180px) !important;
  margin: 0 auto !important;
  padding: clamp(8px, 2vw, 22px) clamp(14px, 3vw, 34px) clamp(14px, 3vw, 34px) !important;
  background:
    linear-gradient(rgba(56, 189, 248, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(45, 212, 191, 0.045) 1px, transparent 1px),
    radial-gradient(circle at 8% 2%, rgba(45, 212, 191, 0.22), transparent 28rem),
    radial-gradient(circle at 92% 8%, rgba(244, 114, 182, 0.16), transparent 30rem),
    radial-gradient(circle at 50% 0%, rgba(167, 139, 250, 0.13), transparent 34rem),
    linear-gradient(180deg, #020617, var(--ssa-site-page)) !important;
  background-size: 42px 42px, 42px 42px, auto, auto, auto, auto !important;
  color: var(--ssa-site-ink-soft) !important;
  color-scheme: dark !important;
  font-family: var(--ssa-site-font) !important;
  line-height: 1.65 !important;
  overflow-x: hidden !important;
  overflow-wrap: break-word !important;
}

body :where(.ssa-home, .ssa-home *) {
  box-sizing: border-box !important;
  min-width: 0 !important;
}

body :where(.ssa-home) :where(section) {
  margin-block: clamp(22px, 4vw, 46px) !important;
}

body :where(.ssa-home) :where(h1, h2, h3, h4) {
  color: var(--ssa-site-ink) !important;
  line-height: 1.12 !important;
  letter-spacing: 0 !important;
  margin: 0 !important;
  opacity: 1 !important;
  text-shadow: 0 0 18px rgba(56, 189, 248, 0.24) !important;
}

body :where(.ssa-home) :where(p, li, span, small, label, div) {
  color: var(--ssa-site-ink-soft) !important;
  opacity: 1 !important;
}

body :where(.ssa-home) :where(a:not(.ssa-home-button)) {
  color: #8eeaff !important;
  text-decoration-color: rgba(142, 234, 255, 0.55) !important;
  text-underline-offset: 0.18em !important;
}

body :where(.ssa-home) :where(img, iframe) {
  max-width: 100% !important;
}

body :where(.ssa-home-hero) {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr) !important;
  gap: clamp(18px, 3vw, 34px) !important;
  align-items: stretch !important;
  min-height: clamp(520px, 72vh, 760px) !important;
  margin-top: 10px !important;
  padding: clamp(24px, 5vw, 62px) !important;
  border: 1px solid rgba(56, 189, 248, 0.48) !important;
  border-radius: var(--ssa-site-radius) !important;
  background:
    linear-gradient(90deg, rgba(2, 6, 23, 0.94), rgba(2, 6, 23, 0.66)),
    radial-gradient(circle at 12% 8%, rgba(45, 212, 191, 0.28), transparent 34%),
    radial-gradient(circle at 86% 18%, rgba(244, 114, 182, 0.20), transparent 36%),
    linear-gradient(145deg, var(--ssa-site-shell), #020617) !important;
  box-shadow: var(--ssa-site-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  overflow: hidden !important;
  opacity: 1 !important;
  transform: none !important;
}

body :where(.ssa-home > .ssa-home-hero:first-child) {
  margin-top: 0 !important;
  margin-block-start: 0 !important;
  visibility: visible !important;
}

body :where(.ssa-affiliate-disclosure + .ssa-home) {
  margin-top: 0 !important;
  padding-top: 8px !important;
}

body :where(.ssa-home-hero > *) {
  position: relative !important;
  z-index: 2 !important;
  visibility: visible !important;
  opacity: 1 !important;
}

body :where(.ssa-home-hero)::before {
  content: "" !important;
  position: absolute !important;
  inset: auto -10% -34% 34% !important;
  height: 68% !important;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.20), transparent 68%) !important;
  pointer-events: none !important;
}

body :where(.ssa-home-hero)::after {
  content: "SSA" !important;
  position: absolute !important;
  left: clamp(18px, 5vw, 78px) !important;
  right: auto !important;
  bottom: clamp(-10px, 1vw, 18px) !important;
  z-index: 0 !important;
  color: rgba(142, 234, 255, 0.075) !important;
  font-size: clamp(5rem, 17vw, 13rem) !important;
  font-weight: 900 !important;
  line-height: 0.8 !important;
  text-shadow: 0 0 42px rgba(56, 189, 248, 0.22) !important;
  pointer-events: none !important;
}

body :where(.ssa-home-eyebrow, .ssa-home-kicker) {
  display: inline-flex !important;
  width: fit-content !important;
  align-items: center !important;
  color: #dffef8 !important;
  font-size: 0.84rem !important;
  font-weight: 850 !important;
  text-transform: uppercase !important;
}

body :where(.ssa-home-eyebrow) {
  gap: 8px !important;
  margin-bottom: 16px !important;
  padding: 7px 11px !important;
  border: 1px solid rgba(45, 212, 191, 0.44) !important;
  border-radius: 999px !important;
  background: rgba(2, 6, 23, 0.68) !important;
  box-shadow: 0 0 24px rgba(45, 212, 191, 0.16) !important;
}

body :where(.ssa-home-kicker) {
  color: var(--ssa-site-amber) !important;
}

body :where(.ssa-home-hero h1) {
  max-width: 820px !important;
  font-size: clamp(2.8rem, 7vw, 6.25rem) !important;
  text-wrap: balance !important;
}

body :where(.ssa-home-lede) {
  max-width: 790px !important;
  margin-top: 20px !important;
  color: #dbeafe !important;
  font-size: clamp(1.05rem, 2vw, 1.28rem) !important;
}

body :where(.ssa-home-actions) {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin-top: 26px !important;
}

body :where(.ssa-home-button) {
  display: inline-flex !important;
  min-height: 46px !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px 18px !important;
  border: 1px solid rgba(45, 212, 191, 0.72) !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, var(--ssa-site-teal), var(--ssa-site-cyan)) !important;
  color: #031018 !important;
  font-weight: 850 !important;
  text-align: center !important;
  text-decoration: none !important;
  text-shadow: none !important;
  box-shadow: 0 14px 30px rgba(34, 211, 238, 0.24) !important;
}

body :where(.ssa-home-button.secondary) {
  border-color: rgba(142, 234, 255, 0.5) !important;
  background: rgba(3, 8, 18, 0.72) !important;
  color: #eaf8ff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

body :where(.ssa-home-button:hover, .ssa-home-button:focus-visible) {
  filter: brightness(1.08) saturate(1.06) !important;
  transform: translateY(-1px) !important;
}

body :where(
  .ssa-home-hero-panel,
  .ssa-home-card,
  .ssa-home-band,
  .ssa-home-feature,
  .ssa-home-spotlight,
  .ssa-home-search-box,
  .youtube-placeholder
) {
  border: 1px solid var(--ssa-site-line) !important;
  border-radius: var(--ssa-site-radius) !important;
  background: linear-gradient(180deg, rgba(8, 18, 34, 0.98), rgba(3, 8, 18, 0.98)) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  color: var(--ssa-site-ink-soft) !important;
}

body :where(.ssa-home-hero-panel, .ssa-home-card, .ssa-home-band, .ssa-home-feature, .ssa-home-spotlight, .ssa-home-search-box) {
  padding: clamp(18px, 3vw, 28px) !important;
}

body :where(.ssa-home-hero-panel, .ssa-home-card, .ssa-home-band, .ssa-home-search-box) {
  display: grid !important;
  gap: 14px !important;
}

body :where(.ssa-home-hero-panel) {
  align-content: start !important;
  backdrop-filter: blur(10px) !important;
}

body :where(.ssa-home-hero-panel img, .ssa-home-feature img) {
  width: 100% !important;
  aspect-ratio: 16 / 10 !important;
  object-fit: cover !important;
  border: 1px solid rgba(56, 189, 248, 0.28) !important;
  border-radius: var(--ssa-site-radius-sm) !important;
}

body :where(.ssa-home-stat-grid) {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

body :where(.ssa-home-stat) {
  padding: 12px !important;
  border: 1px solid rgba(56, 189, 248, 0.28) !important;
  border-radius: var(--ssa-site-radius-sm) !important;
  background: rgba(2, 6, 23, 0.72) !important;
}

body :where(.ssa-home-stat strong) {
  display: block !important;
  color: #ffffff !important;
  font-size: 1.05rem !important;
}

body :where(.ssa-home-stat span) {
  display: block !important;
  color: var(--ssa-site-muted) !important;
  font-size: 0.85rem !important;
}

body :where(.ssa-home-nav) {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin-top: 18px !important;
}

body :where(.ssa-home-nav a) {
  display: flex !important;
  min-height: 46px !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px !important;
  border: 1px solid rgba(45, 212, 191, 0.28) !important;
  border-radius: 999px !important;
  background: rgba(3, 8, 18, 0.7) !important;
  color: #dffafe !important;
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  text-align: center !important;
  text-decoration: none !important;
}

body :where(.ssa-home-section-head) {
  display: grid !important;
  gap: 10px !important;
  max-width: 850px !important;
  margin-bottom: 18px !important;
}

body :where(.ssa-home-grid) {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

body :where(.ssa-home-grid.two) {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

body :where(.ssa-home-feature) {
  display: grid !important;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr) !important;
  gap: 20px !important;
  align-items: center !important;
}

body :where(.ssa-home-band.inline) {
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
}

body :where(.ssa-home-card) {
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease !important;
}

body :where(.ssa-home-card:hover) {
  border-color: rgba(56, 189, 248, 0.62) !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.34), 0 0 28px rgba(45, 212, 191, 0.10) !important;
  transform: translateY(-2px) !important;
}

body :where(.ssa-home-card ul, .ssa-home-link-list) {
  display: grid !important;
  gap: 8px !important;
}

body :where(.ssa-home-card .link-list, .ssa-home-link-list) {
  padding-left: 0 !important;
  list-style: none !important;
}

body :where(.ssa-home-card .link-list a, .ssa-home-link-list a) {
  font-weight: 700 !important;
}

body :where(.ssa-home-badges) {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 12px !important;
}

body :where(.ssa-home-badge) {
  display: inline-flex !important;
  align-items: center !important;
  padding: 5px 9px !important;
  border: 1px solid rgba(56, 189, 248, 0.34) !important;
  border-radius: 999px !important;
  background: rgba(56, 189, 248, 0.10) !important;
  color: #dffafe !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
}

body :where(.ssa-home-note) {
  border-left: 3px solid var(--ssa-site-teal) !important;
  padding-left: 14px !important;
  color: #dbeafe !important;
}

body :where(.ssa-home-spotlight) {
  border-color: rgba(251, 191, 36, 0.38) !important;
  background:
    radial-gradient(circle at 8% 0%, rgba(251, 191, 36, 0.12), transparent 32%),
    linear-gradient(180deg, rgba(8, 18, 34, 0.98), rgba(3, 8, 18, 0.98)) !important;
}

body :where(.ssa-home-search-box input, .ssa-home-search-box button, .ssa-home-newsletter input, .ssa-home-newsletter button) {
  min-height: 46px !important;
  border-radius: 999px !important;
  font: inherit !important;
}

body :where(.ssa-home-search-box input, .ssa-home-newsletter input) {
  width: 100% !important;
  border: 1px solid rgba(148, 163, 184, 0.44) !important;
  background: rgba(2, 6, 23, 0.92) !important;
  color: #ffffff !important;
  padding: 12px 16px !important;
}

body :where(.ssa-home-search-box button, .ssa-home-newsletter button) {
  border: 1px solid rgba(45, 212, 191, 0.72) !important;
  background: linear-gradient(135deg, var(--ssa-site-teal), var(--ssa-site-cyan)) !important;
  color: #031018 !important;
  font-weight: 850 !important;
  padding: 12px 18px !important;
  cursor: pointer !important;
}

body :where(.ssa-home-newsletter) {
  display: grid !important;
  gap: 10px !important;
  max-width: 620px !important;
}

body :where(.youtube-placeholder) {
  position: relative !important;
  display: grid !important;
  min-height: 260px !important;
  place-items: center !important;
  overflow: hidden !important;
  background: rgba(2, 6, 23, 0.86) !important;
  cursor: pointer !important;
}

body :where(.youtube-thumbnail) {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  opacity: 0.72 !important;
}

body :where(.youtube-overlay) {
  position: absolute !important;
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
  gap: 10px !important;
  padding: 20px !important;
  background: linear-gradient(180deg, rgba(3, 8, 18, 0.2), rgba(3, 8, 18, 0.78)) !important;
  text-align: center !important;
}

body :where(.youtube-title) {
  color: #ffffff !important;
  font-size: 1.4rem !important;
  font-weight: 850 !important;
}

body :where(.youtube-play-button) {
  min-height: 44px !important;
  padding: 10px 16px !important;
  border: 1px solid rgba(45, 212, 191, 0.72) !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, var(--ssa-site-teal), var(--ssa-site-cyan)) !important;
  color: #031018 !important;
  font-weight: 850 !important;
  cursor: pointer !important;
}

@media (max-width: 980px) {
  body :where(.ssa-home-hero, .ssa-home-feature, .ssa-home-band.inline) {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }

  body :where(.ssa-home-grid, .ssa-home-grid.two) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body :where(.ssa-home-nav) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  body :where(.ssa-home) {
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px !important;
  }

  body :where(.ssa-home-hero) {
    padding: 18px !important;
    min-height: 0 !important;
  }

  body :where(.ssa-home-hero h1) {
    font-size: clamp(2.25rem, 15vw, 3.5rem) !important;
  }

  body :where(.ssa-home-grid, .ssa-home-grid.two, .ssa-home-nav, .ssa-home-stat-grid) {
    grid-template-columns: 1fr !important;
  }

  body :where(.ssa-home-actions, .ssa-home-badges) {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  body :where(.ssa-home-button, .ssa-home-search-box button, .ssa-home-newsletter button) {
    width: 100% !important;
  }
}

/*
 * High-specificity page shell hardening.
 *
 * Some exported pages include their own single-ID light styles inside post
 * content. Repeating the shell match through :is() gives this global layer
 * enough specificity to beat those local rules without editing the pages.
 */
body :is(
  #sssss-shell,
  #sth-page-shell,
  #fin-shell,
  #zodiac-page-shell,
  #ubcc-page-shell,
  #love-page-shell,
  #nnt-page-shell,
  #pd-books-shell,
  #berc-shell,
  #ayur-shell,
  #baby-shell,
  #rel-shell,
  #nick-shell,
  #spooky-shell,
  #health-shell,
  #name-shell,
  #fun-shell,
  #rel-hub-shell,
  #sound-advice-shell,
  #ssa-life-purpose-shell,
  #ssa-ennea-tool,
  #ssa-mbti-tool,
  #ssa-big5-tool,
  #ssa-book-app
):is(
  #sssss-shell,
  #sth-page-shell,
  #fin-shell,
  #zodiac-page-shell,
  #ubcc-page-shell,
  #love-page-shell,
  #nnt-page-shell,
  #pd-books-shell,
  #berc-shell,
  #ayur-shell,
  #baby-shell,
  #rel-shell,
  #nick-shell,
  #spooky-shell,
  #health-shell,
  #name-shell,
  #fun-shell,
  #rel-hub-shell,
  #sound-advice-shell,
  #ssa-life-purpose-shell,
  #ssa-ennea-tool,
  #ssa-mbti-tool,
  #ssa-big5-tool,
  #ssa-book-app
) {
  background:
    radial-gradient(circle at 8% 0%, rgba(45, 212, 191, 0.16), transparent 34%),
    radial-gradient(circle at 92% 8%, rgba(167, 139, 250, 0.12), transparent 34%),
    linear-gradient(145deg, var(--ssa-site-shell), var(--ssa-site-page)) !important;
  border-color: var(--ssa-site-line) !important;
  color: var(--ssa-site-ink-soft) !important;
}

body :is(
  #sssss-shell,
  #sth-page-shell,
  #fin-shell,
  #zodiac-page-shell,
  #ubcc-page-shell,
  #love-page-shell,
  #nnt-page-shell,
  #pd-books-shell,
  #berc-shell,
  #ayur-shell,
  #baby-shell,
  #rel-shell,
  #nick-shell,
  #spooky-shell,
  #health-shell,
  #name-shell,
  #fun-shell,
  #rel-hub-shell,
  #sound-advice-shell,
  #ssa-life-purpose-shell,
  #ssa-ennea-tool,
  #ssa-mbti-tool,
  #ssa-big5-tool,
  #ssa-book-app
):is(
  #sssss-shell,
  #sth-page-shell,
  #fin-shell,
  #zodiac-page-shell,
  #ubcc-page-shell,
  #love-page-shell,
  #nnt-page-shell,
  #pd-books-shell,
  #berc-shell,
  #ayur-shell,
  #baby-shell,
  #rel-shell,
  #nick-shell,
  #spooky-shell,
  #health-shell,
  #name-shell,
  #fun-shell,
  #rel-hub-shell,
  #sound-advice-shell,
  #ssa-life-purpose-shell,
  #ssa-ennea-tool,
  #ssa-mbti-tool,
  #ssa-big5-tool,
  #ssa-book-app
) :is(
  .card,
  .panel,
  .box,
  .section,
  .content,
  .collapsible,
  .faq-item,
  .toc-container,
  .result,
  .results,
  .summary,
  .notice,
  .callout,
  .step,
  fieldset,
  details,
  table,
  form,
  [class*="-card"],
  [class*="-box"],
  [class*="-panel"],
  [class*="-section"],
  [class*="-callout"],
  [class*="-grid"],
  [class*="-tools"]
) {
  border-color: var(--ssa-site-line) !important;
  background: linear-gradient(180deg, rgba(8, 18, 34, 0.98), rgba(3, 8, 18, 0.98)) !important;
  color: var(--ssa-site-ink-soft) !important;
}

body :is(
  #sssss-shell,
  #sth-page-shell,
  #fin-shell,
  #zodiac-page-shell,
  #ubcc-page-shell,
  #love-page-shell,
  #nnt-page-shell,
  #pd-books-shell,
  #berc-shell,
  #ayur-shell,
  #baby-shell,
  #rel-shell,
  #nick-shell,
  #spooky-shell,
  #health-shell,
  #name-shell,
  #fun-shell,
  #rel-hub-shell,
  #sound-advice-shell,
  #ssa-life-purpose-shell,
  #ssa-ennea-tool,
  #ssa-mbti-tool,
  #ssa-big5-tool,
  #ssa-book-app
):is(
  #sssss-shell,
  #sth-page-shell,
  #fin-shell,
  #zodiac-page-shell,
  #ubcc-page-shell,
  #love-page-shell,
  #nnt-page-shell,
  #pd-books-shell,
  #berc-shell,
  #ayur-shell,
  #baby-shell,
  #rel-shell,
  #nick-shell,
  #spooky-shell,
  #health-shell,
  #name-shell,
  #fun-shell,
  #rel-hub-shell,
  #sound-advice-shell,
  #ssa-life-purpose-shell,
  #ssa-ennea-tool,
  #ssa-mbti-tool,
  #ssa-big5-tool,
  #ssa-book-app
) :is(h1, h2, h3, h4, h5, h6, strong, b) {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  color: var(--ssa-site-ink) !important;
  opacity: 1 !important;
  text-shadow: 0 0 16px rgba(56, 189, 248, 0.24) !important;
}

/*
 * Ultimate Birth Chart page override.
 *
 * This page ships its own light-mode #ubcc-page-shell stylesheet inside post
 * content. These higher-specificity selectors intentionally beat that local
 * CSS without editing the page itself.
 */
body #ubcc-page-shell:is(#ubcc-page-shell) {
  --ubcc-bg: linear-gradient(145deg, var(--ssa-site-shell), var(--ssa-site-page)) !important;
  --ubcc-surface: rgba(8, 18, 34, 0.98) !important;
  --ubcc-surface-alt: rgba(12, 23, 40, 0.96) !important;
  --ubcc-surface-soft: rgba(15, 27, 46, 0.94) !important;
  --ubcc-border: rgba(45, 212, 191, 0.34) !important;
  --ubcc-border-soft: rgba(56, 189, 248, 0.32) !important;
  --ubcc-text: var(--ssa-site-ink) !important;
  --ubcc-text-muted: var(--ssa-site-ink-soft) !important;
  --ubcc-primary: var(--ssa-site-cyan) !important;
  --ubcc-primary-dark: var(--ssa-site-teal) !important;
  --ubcc-title-gradient: linear-gradient(135deg, #ffffff, #8eeaff) !important;
  --ubcc-shadow-soft: 0 18px 42px rgba(0, 0, 0, 0.34), 0 0 24px rgba(45, 212, 191, 0.10) !important;
  background:
    radial-gradient(circle at 8% 0%, rgba(45, 212, 191, 0.16), transparent 34%),
    radial-gradient(circle at 92% 8%, rgba(167, 139, 250, 0.12), transparent 34%),
    linear-gradient(145deg, var(--ssa-site-shell), var(--ssa-site-page)) !important;
  border: 1px solid var(--ssa-site-line) !important;
  color: var(--ssa-site-ink-soft) !important;
  box-shadow: var(--ssa-site-shadow) !important;
}

body #ubcc-page-shell:is(#ubcc-page-shell),
body #ubcc-page-shell:is(#ubcc-page-shell) :is(p, li, span, strong, em, label, th, td, h1, h2, h3, h4, h5, h6) {
  color: var(--ssa-site-ink-soft) !important;
  opacity: 1 !important;
}

body #ubcc-page-shell:is(#ubcc-page-shell) :is(h1, h2, h3, h4, h5, h6, strong, b, .ubcc-hero__chip strong, .ssa-related__text strong) {
  color: var(--ssa-site-ink) !important;
  text-shadow: 0 0 16px rgba(56, 189, 248, 0.24) !important;
}

body #ubcc-page-shell:is(#ubcc-page-shell) :is(h2.wp-block-heading, h3.wp-block-heading, .ubcc-hero h1, .ubcc-hero h2, #cosmic-tools h2) {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  color: var(--ssa-site-ink) !important;
  letter-spacing: 0 !important;
}

body #ubcc-page-shell:is(#ubcc-page-shell) a {
  color: #8eeaff !important;
  text-decoration-color: rgba(142, 234, 255, 0.55) !important;
}

body #ubcc-page-shell:is(#ubcc-page-shell) :is(.ubcc-related-links) {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  background: transparent !important;
}

body #ubcc-page-shell:is(#ubcc-page-shell) :is(.ubcc-related-links a, .ubcc-related-links a:visited) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 42px !important;
  max-width: 100% !important;
  padding: 9px 14px !important;
  border: 1px solid rgba(56, 189, 248, 0.62) !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, rgba(2, 6, 23, 0.97), rgba(8, 47, 73, 0.92)) !important;
  color: #f4fdff !important;
  -webkit-text-fill-color: #f4fdff !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  text-decoration: none !important;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.42) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.24) !important;
}

body #ubcc-page-shell:is(#ubcc-page-shell) :is(.ubcc-related-links a:hover, .ubcc-related-links a:focus-visible) {
  border-color: rgba(45, 212, 191, 0.88) !important;
  background: linear-gradient(135deg, rgba(6, 78, 87, 0.98), rgba(8, 47, 73, 0.96)) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: 0 10px 24px rgba(34, 211, 238, 0.20) !important;
}

body #ubcc-page-shell:is(#ubcc-page-shell) :is(.ubcc-related-links a *) {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
}

body #ubcc-page-shell:is(#ubcc-page-shell) :is(
  .ubcc-hero,
  .ubcc-hero__chip,
  figure,
  .wp-block-image,
  .wp-block-gallery,
  .ubcc-chart-section,
  .ubcc-chart-wrap,
  .ubcc-chart-panel,
  .ubcc-chart-card,
  .chart-container,
  .chart-wrapper,
  .chart-panel,
  .chart-card,
  .zodiac-wheel,
  .zodiac-wheel-wrap,
  .zodiac-wheel-container,
  .birth-chart,
  .birth-chart-wrap,
  .birth-chart-container,
  .toc-container,
  .toc-container nav,
  #rank-math-toc,
  .ubcc-card,
  .ubcc-card--soft,
  .ubcc-compare-card,
  .ssa-related-tools,
  .ssa-related__card,
  .ubcc-faq-item,
  .ubcc-faq-answer,
  #cosmic-tools,
  .cosmic-nav-panel,
  .wp-block-afpb-review-style-one
) {
  border: 1px solid var(--ssa-site-line) !important;
  border-radius: 14px !important;
  background:
    radial-gradient(circle at 8% 0%, rgba(45, 212, 191, 0.12), transparent 32%),
    linear-gradient(180deg, rgba(8, 18, 34, 0.98), rgba(3, 8, 18, 0.98)) !important;
  color: var(--ssa-site-ink-soft) !important;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

body #ubcc-page-shell:is(#ubcc-page-shell) :is(
  figure,
  .wp-block-image,
  .wp-block-gallery,
  .ubcc-chart-section,
  .ubcc-chart-wrap,
  .ubcc-chart-panel,
  .ubcc-chart-card,
  .chart-container,
  .chart-wrapper,
  .chart-panel,
  .chart-card,
  .zodiac-wheel,
  .zodiac-wheel-wrap,
  .zodiac-wheel-container,
  .birth-chart,
  .birth-chart-wrap,
  .birth-chart-container,
  svg,
  canvas
) {
  background: #020617 !important;
  color: var(--ssa-site-ink) !important;
}

body #ubcc-page-shell:is(#ubcc-page-shell) :is(
  figure h1,
  figure h2,
  figure h3,
  .wp-block-image h1,
  .wp-block-image h2,
  .wp-block-image h3,
  .ubcc-chart-section h1,
  .ubcc-chart-section h2,
  .ubcc-chart-section h3,
  .chart-container h1,
  .chart-container h2,
  .chart-container h3,
  .chart-wrapper h1,
  .chart-wrapper h2,
  .chart-wrapper h3,
  .zodiac-wheel h1,
  .zodiac-wheel h2,
  .zodiac-wheel h3
) {
  background: #020617 !important;
  color: var(--ssa-site-ink) !important;
}

body #zodiac-page-shell:is(#zodiac-page-shell) :is(
  figure,
  .wp-block-image,
  .wp-block-gallery,
  .zodiac-wheel-section,
  .zodiac-wheel-container,
  .zodiac-wheel,
  .chart-container,
  .chart-wrapper,
  .chart-panel,
  .chart-card,
  svg,
  canvas
) {
  background: #020617 !important;
  color: var(--ssa-site-ink) !important;
}

body #zodiac-page-shell:is(#zodiac-page-shell) :is(
  figure h1,
  figure h2,
  figure h3,
  .wp-block-image h1,
  .wp-block-image h2,
  .wp-block-image h3,
  .zodiac-wheel-section h1,
  .zodiac-wheel-section h2,
  .zodiac-wheel-section h3,
  .zodiac-wheel-container h1,
  .zodiac-wheel-container h2,
  .zodiac-wheel-container h3,
  .zodiac-wheel h1,
  .zodiac-wheel h2,
  .zodiac-wheel h3
) {
  background: #020617 !important;
  color: var(--ssa-site-ink) !important;
}

body #ubcc-page-shell:is(#ubcc-page-shell) :is(.ubcc-hero__eyebrow, .toc-toggle-button, #cosmic-tools .button-wrapper a, .ssa-related__badge) {
  border: 1px solid rgba(45, 212, 191, 0.72) !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, var(--ssa-site-teal), var(--ssa-site-cyan)) !important;
  color: #031018 !important;
  font-weight: 850 !important;
  text-decoration: none !important;
  text-shadow: none !important;
  box-shadow: 0 12px 30px rgba(34, 211, 238, 0.22) !important;
}

body #ubcc-page-shell:is(#ubcc-page-shell) :is(.toc-container nav a, #rank-math-toc a) {
  color: #8eeaff !important;
  font-weight: 750 !important;
}

body #ubcc-page-shell:is(#ubcc-page-shell) :is(.ubcc-list-clean) {
  list-style: none !important;
  padding-left: 0 !important;
}

body #ubcc-page-shell:is(#ubcc-page-shell) :is(.ubcc-list-clean li) {
  position: relative !important;
  padding-left: 26px !important;
  color: var(--ssa-site-ink-soft) !important;
  text-align: left !important;
}

body #ubcc-page-shell:is(#ubcc-page-shell) :is(.ubcc-list-clean li)::before {
  content: "\2726" !important;
  position: absolute !important;
  left: 0 !important;
  color: var(--ssa-site-amber) !important;
  font-weight: 900 !important;
}

body #ubcc-page-shell:is(#ubcc-page-shell) :is(.ubcc-faq-item summary) {
  color: var(--ssa-site-ink) !important;
  background: linear-gradient(180deg, rgba(8, 18, 34, 0.98), rgba(3, 8, 18, 0.98)) !important;
}

body #ubcc-page-shell:is(#ubcc-page-shell) :is(.ubcc-faq-item summary)::after {
  color: var(--ssa-site-cyan) !important;
}

body #ubcc-page-shell:is(#ubcc-page-shell) :is(.ubcc-faq-item[open] summary)::after {
  content: "-" !important;
}

@media (max-width: 920px) {
  body #ubcc-page-shell:is(#ubcc-page-shell) :is(.ubcc-intro-grid, .ubcc-compare-grid, .ubcc-hero__grid, .ssa-related__grid) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/*
 * Generated page-shell catch-up.
 *
 * Anniversary and imported hub pages use several `#ssa-*-shell` wrappers plus
 * a local `--bg-color` token for pale cards. Normalize those at the shell so
 * old exported pages do not need individual edits.
 */
body :is(
  #ssa-anniversary-hub-shell,
  #ssa-friend-shell,
  #ssa-job-shell,
  #ssa-relationship-shell,
  #ssa-simple-shell,
  #ssa-sobriety-shell,
  #ssa-wedding-shell,
  #ssa-personality-hub,
  #ssa-ennea-tool,
  #ssa-mbti-tool,
  #ssa-big5-tool,
  #sth-sr-shell,
  #eos-page-shell,
  #bnn-page-shell,
  #bng-page-shell,
  #berc-shell
) {
  --bg-color: #030712 !important;
  --card-bg: rgba(8, 18, 34, 0.98) !important;
  --card-color: #f4fdff !important;
  --surface: rgba(8, 18, 34, 0.98) !important;
  --surface-alt: rgba(15, 27, 46, 0.94) !important;
  color-scheme: dark !important;
  color: var(--ssa-site-ink-soft) !important;
}

body :is(
  #ssa-anniversary-hub-shell,
  #ssa-friend-shell,
  #ssa-job-shell,
  #ssa-relationship-shell,
  #ssa-simple-shell,
  #ssa-sobriety-shell,
  #ssa-wedding-shell,
  #ssa-personality-hub,
  #ssa-ennea-tool,
  #ssa-mbti-tool,
  #ssa-big5-tool,
  #sth-sr-shell,
  #eos-page-shell,
  #bnn-page-shell,
  #bng-page-shell,
  #berc-shell
) :is(
  .ssa-card,
  .ssa-highlight,
  .ssa-chooser,
  .ssa-toc,
  .ssa-faq,
  .ssa-faq__a,
  .ssa-related-tools,
  .ssa-related__card,
  .hub-shell,
  .hub-card,
  .card,
  .panel,
  .box,
  .content,
  .container,
  .section,
  .result,
  .results,
  .faq-item,
  details,
  fieldset,
  table
) {
  border: 1px solid var(--ssa-site-line) !important;
  border-radius: 14px !important;
  background:
    radial-gradient(circle at 8% 0%, rgba(45, 212, 191, 0.12), transparent 32%),
    linear-gradient(180deg, rgba(8, 18, 34, 0.98), rgba(3, 8, 18, 0.98)) !important;
  color: var(--ssa-site-ink-soft) !important;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

body :is(
  #ssa-anniversary-hub-shell,
  #ssa-friend-shell,
  #ssa-job-shell,
  #ssa-relationship-shell,
  #ssa-simple-shell,
  #ssa-sobriety-shell,
  #ssa-wedding-shell,
  #ssa-personality-hub,
  #ssa-ennea-tool,
  #ssa-mbti-tool,
  #ssa-big5-tool,
  #sth-sr-shell,
  #eos-page-shell,
  #bnn-page-shell,
  #bng-page-shell,
  #berc-shell
) :is(h1, h2, h3, h4, h5, h6, strong, b, summary) {
  color: var(--ssa-site-ink) !important;
  opacity: 1 !important;
  text-shadow: 0 0 16px rgba(56, 189, 248, 0.28) !important;
}

body :is(
  #ssa-anniversary-hub-shell,
  #ssa-friend-shell,
  #ssa-job-shell,
  #ssa-relationship-shell,
  #ssa-simple-shell,
  #ssa-sobriety-shell,
  #ssa-wedding-shell,
  #ssa-personality-hub,
  #ssa-ennea-tool,
  #ssa-mbti-tool,
  #ssa-big5-tool,
  #sth-sr-shell,
  #eos-page-shell,
  #bnn-page-shell,
  #bng-page-shell,
  #berc-shell
) :is(p, li, span, small, em, div, label, td, th) {
  color: var(--ssa-site-ink-soft) !important;
  opacity: 1 !important;
}

@media (max-width: 700px) {
  body :is(
    #sssss-shell,
    #sth-page-shell,
    #sth-sr-shell,
    #fin-shell,
    #zodiac-page-shell,
    #ubcc-page-shell,
    #eos-page-shell,
    #love-page-shell,
    #rel-shell,
    #rel-hub-shell,
    #rel-tools-shell,
    #health-shell,
    #ayur-shell,
    #ssa-anniversary-hub-shell,
    #ssa-friend-shell,
    #ssa-job-shell,
    #ssa-relationship-shell,
    #ssa-simple-shell,
    #ssa-sobriety-shell,
    #ssa-wedding-shell,
    #ssa-personality-hub,
    #ssa-ennea-tool,
    #ssa-mbti-tool,
    #ssa-big5-tool,
    #bnn-page-shell,
    #bng-page-shell,
    #berc-shell
  ) :is(
    nav,
    .nav,
    .ssa-nav,
    .tool-nav,
    .eos-nav,
    .eos-nav-row,
    .health-nav,
    .ayur-nav,
    .rel-nav,
    .fin-nav,
    .sssss-nav,
    .ssa-chooser,
    .ssa-related__grid,
    .ssa-related-tools,
    [class*="-grid"],
    [class*="-cards"],
    [class*="-actions"],
    [class*="-buttons"]
  ) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body :is(
    #sssss-shell,
    #sth-page-shell,
    #sth-sr-shell,
    #fin-shell,
    #zodiac-page-shell,
    #ubcc-page-shell,
    #eos-page-shell,
    #love-page-shell,
    #rel-shell,
    #rel-hub-shell,
    #rel-tools-shell,
    #health-shell,
    #ayur-shell,
    #ssa-anniversary-hub-shell,
    #ssa-friend-shell,
    #ssa-job-shell,
    #ssa-relationship-shell,
    #ssa-simple-shell,
    #ssa-sobriety-shell,
    #ssa-wedding-shell,
    #ssa-personality-hub,
    #ssa-ennea-tool,
    #ssa-mbti-tool,
    #ssa-big5-tool,
    #bnn-page-shell,
    #bng-page-shell,
    #berc-shell
  ) :is(
    a,
    button,
    .button,
    .btn,
    .nav-btn,
    .ssa-button,
    .wp-block-button__link,
    [role="button"]
  ) {
    max-width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }

  body :is(
    #ssa-anniversary-hub-shell,
    #ssa-friend-shell,
    #ssa-job-shell,
    #ssa-relationship-shell,
    #ssa-simple-shell,
    #ssa-sobriety-shell,
    #ssa-wedding-shell
  ) :is(.ssa-related__card) {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    min-height: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px !important;
    border-radius: 14px !important;
    text-align: left !important;
  }

  body :is(
    #ssa-anniversary-hub-shell,
    #ssa-friend-shell,
    #ssa-job-shell,
    #ssa-relationship-shell,
    #ssa-simple-shell,
    #ssa-sobriety-shell,
    #ssa-wedding-shell
  ) :is(.ssa-related__icon) {
    flex: 0 0 32px !important;
  }

  body :is(
    #ssa-anniversary-hub-shell,
    #ssa-friend-shell,
    #ssa-job-shell,
    #ssa-relationship-shell,
    #ssa-simple-shell,
    #ssa-sobriety-shell,
    #ssa-wedding-shell
  ) :is(.ssa-related__text) {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
}

/* Anniversary calculators: keep related icons and action buttons from inheriting oversized global tool styles. */
body :is(
  #ssa-anniversary-hub-shell,
  #ssa-friend-shell,
  #ssa-job-shell,
  #ssa-relationship-shell,
  #ssa-general-shell,
  #ssa-simple-shell,
  #ssa-sobriety-shell,
  #ssa-wedding-shell
) :is(.ssa-related__grid) {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)) !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 100% !important;
}

/*
 * Tool Hub final guard.
 *
 * The page-normalizer rules above intentionally catch broad exported classes
 * like "-related", "-mini", and "-section". Tool Hub uses those words for
 * real layout pieces, so keep the hub dark-neon and readable after the broad
 * normalizer has run.
 */
body #sth-page-shell#sth-page-shell .sth-hub-render-wrap,
body .ssa-tool-hub-shell.ssa-tool-hub-shell {
  color: #f4fdff !important;
  -webkit-text-fill-color: #f4fdff !important;
}

body #sth-page-shell#sth-page-shell .sth-hub-render-wrap :is(
  .ssa-decision-section,
  .ssa-bridge-section,
  .ssa-combo-strip,
  .ssa-directory,
  .ssa-subhub-directory,
  .ssa-journey-bundles,
  .ssa-featured-article,
  .ssa-hub-related-articles,
  .ssa-tool-related,
  .ssa-tool-article,
  .ssa-subhub-context,
  .ssa-subhub-featured,
  .ssa-subhub-next,
  .ssa-subhub-articles,
  .ssa-subhub-format-bundle,
  .ssa-subhub-note,
  .ssa-subhub-faq
),
body .ssa-tool-hub-shell.ssa-tool-hub-shell :is(
  .ssa-decision-section,
  .ssa-bridge-section,
  .ssa-combo-strip,
  .ssa-directory,
  .ssa-subhub-directory,
  .ssa-journey-bundles,
  .ssa-featured-article,
  .ssa-hub-related-articles,
  .ssa-tool-related,
  .ssa-tool-article,
  .ssa-subhub-context,
  .ssa-subhub-featured,
  .ssa-subhub-next,
  .ssa-subhub-articles,
  .ssa-subhub-format-bundle,
  .ssa-subhub-note,
  .ssa-subhub-faq
) {
  border: 1px solid rgba(45, 212, 191, 0.34) !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, rgba(8, 18, 34, 0.98), rgba(3, 8, 18, 0.98)) !important;
  color: #f4fdff !important;
  -webkit-text-fill-color: #f4fdff !important;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

body #sth-page-shell#sth-page-shell .sth-hub-render-wrap :is(
  .ssa-mini-btn-row,
  .ssa-choice-grid,
  .ssa-journey-steps
),
body .ssa-tool-hub-shell.ssa-tool-hub-shell :is(
  .ssa-mini-btn-row,
  .ssa-choice-grid,
  .ssa-journey-steps
) {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body #sth-page-shell#sth-page-shell .sth-hub-render-wrap :is(.ssa-choice-grid),
body .ssa-tool-hub-shell.ssa-tool-hub-shell :is(.ssa-choice-grid) {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)) !important;
}

body #sth-page-shell#sth-page-shell .sth-hub-render-wrap :is(.ssa-journey-steps),
body .ssa-tool-hub-shell.ssa-tool-hub-shell :is(.ssa-journey-steps) {
  display: grid !important;
  grid-template-columns: 1fr !important;
}

body #sth-page-shell#sth-page-shell .sth-hub-render-wrap :is(
  .ssa-mini-btn,
  .ssa-choice-btn,
  .ssa-journey-step,
  .ssa-directory-btn,
  .ssa-tool-btn,
  .ssa-top-pick-card a,
  .ssa-bridge-card a,
  .ssa-journey-card a,
  .ssa-combo-card a,
  .ssa-directory-card a,
  .ssa-tool-card a
),
body .ssa-tool-hub-shell.ssa-tool-hub-shell :is(
  .ssa-mini-btn,
  .ssa-choice-btn,
  .ssa-journey-step,
  .ssa-directory-btn,
  .ssa-tool-btn,
  .ssa-top-pick-card a,
  .ssa-bridge-card a,
  .ssa-journey-card a,
  .ssa-combo-card a,
  .ssa-directory-card a,
  .ssa-tool-card a
) {
  border: 1px solid rgba(56, 189, 248, 0.52) !important;
  border-radius: 12px !important;
  background: rgba(2, 6, 23, 0.88) !important;
  color: #f4fdff !important;
  -webkit-text-fill-color: #f4fdff !important;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.34) !important;
}

body #sth-page-shell#sth-page-shell .sth-hub-render-wrap :is(
  h1, h2, h3, h4, h5, h6, p, li, span, strong, em, small, label, a, div
),
body .ssa-tool-hub-shell.ssa-tool-hub-shell :is(
  h1, h2, h3, h4, h5, h6, p, li, span, strong, em, small, label, a, div
) {
  color: #f4fdff !important;
  -webkit-text-fill-color: #f4fdff !important;
  opacity: 1 !important;
}

body :is(
  #ssa-anniversary-hub-shell,
  #ssa-friend-shell,
  #ssa-job-shell,
  #ssa-relationship-shell,
  #ssa-general-shell,
  #ssa-simple-shell,
  #ssa-sobriety-shell,
  #ssa-wedding-shell
) :is(.ssa-related__card) {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 14px !important;
  text-align: left !important;
  white-space: normal !important;
  overflow: hidden !important;
}

body :is(
  #ssa-anniversary-hub-shell,
  #ssa-friend-shell,
  #ssa-job-shell,
  #ssa-relationship-shell,
  #ssa-general-shell,
  #ssa-simple-shell,
  #ssa-sobriety-shell,
  #ssa-wedding-shell
) :is(.ssa-related__icon) {
  display: inline-flex !important;
  flex: 0 0 34px !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  max-width: 34px !important;
  max-height: 34px !important;
  overflow: hidden !important;
  border-radius: 10px !important;
}

body :is(
  #ssa-anniversary-hub-shell,
  #ssa-friend-shell,
  #ssa-job-shell,
  #ssa-relationship-shell,
  #ssa-general-shell,
  #ssa-simple-shell,
  #ssa-sobriety-shell,
  #ssa-wedding-shell
) :is(.ssa-related__icon svg, .ssa-related__card > svg, .ssa-related__card svg) {
  display: block !important;
  flex: 0 0 22px !important;
  width: 22px !important;
  height: 22px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 22px !important;
  max-height: 22px !important;
  background: transparent !important;
}

body :is(
  #ssa-anniversary-hub-shell,
  #ssa-friend-shell,
  #ssa-job-shell,
  #ssa-relationship-shell,
  #ssa-general-shell,
  #ssa-simple-shell,
  #ssa-sobriety-shell,
  #ssa-wedding-shell
) :is(.ssa-related__text) {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

body :is(
  #ssa-anniversary-hub-shell,
  #ssa-friend-shell,
  #ssa-job-shell,
  #ssa-relationship-shell,
  #ssa-general-shell,
  #ssa-simple-shell,
  #ssa-sobriety-shell,
  #ssa-wedding-shell
) :is(.ssa-aie-grid) {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)) !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 100% !important;
}

body :is(
  #ssa-anniversary-hub-shell,
  #ssa-friend-shell,
  #ssa-job-shell,
  #ssa-relationship-shell,
  #ssa-general-shell,
  #ssa-simple-shell,
  #ssa-sobriety-shell,
  #ssa-wedding-shell
) :is(.ssa-aie-card) {
  min-width: 0 !important;
  max-width: 100% !important;
  padding: 12px !important;
}

body :is(
  #ssa-anniversary-hub-shell,
  #ssa-friend-shell,
  #ssa-job-shell,
  #ssa-relationship-shell,
  #ssa-general-shell,
  #ssa-simple-shell,
  #ssa-sobriety-shell,
  #ssa-wedding-shell
) :is(.ssa-aie-button, .anniversary-calculator button, .anniversary-calculator .button, .anniversary-calculator .btn, .anniversary-calculator a.button, .anniversary-calculator a.btn, .anniversary-calculator input[type="button"], .anniversary-calculator input[type="submit"]) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 34px !important;
  padding: 8px 12px !important;
  border-radius: 10px !important;
  font-size: 0.85rem !important;
  line-height: 1.2 !important;
  white-space: normal !important;
}

body :is(
  #ssa-anniversary-hub-shell,
  #ssa-friend-shell,
  #ssa-job-shell,
  #ssa-relationship-shell,
  #ssa-general-shell,
  #ssa-simple-shell,
  #ssa-sobriety-shell,
  #ssa-wedding-shell
) :is(.anniversary-calculator [class*="-actions"], .anniversary-calculator [class*="-buttons"], .anniversary-calculator .actions, .anniversary-calculator .button-row, .anniversary-calculator .button-group, .anniversary-calculator .btn-group) {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
}