/*
 * SSA Anniversary Pages Suite - Neon Interface
 * Fresh scoped visual layer for restored legacy calculators and account saves.
 */

.ssaa-shell {
  --ssaa-bg: #020611;
  --ssaa-bg-2: #07101f;
  --ssaa-panel: rgba(8, 16, 31, 0.96);
  --ssaa-panel-2: rgba(11, 23, 42, 0.94);
  --ssaa-card: rgba(13, 25, 45, 0.96);
  --ssaa-card-2: rgba(17, 34, 58, 0.92);
  --ssaa-line: rgba(45, 212, 191, 0.34);
  --ssaa-line-hot: rgba(56, 189, 248, 0.68);
  --ssaa-text: #edfaff;
  --ssaa-soft: #c8e8f2;
  --ssaa-muted: #92aebe;
  --ssaa-dim: #6f8b9c;
  --ssaa-cyan: #22d3ee;
  --ssaa-teal: #2dd4bf;
  --ssaa-blue: #60a5fa;
  --ssaa-magenta: #f0abfc;
  --ssaa-violet: #a78bfa;
  --ssaa-amber: #facc15;
  --ssaa-green: #86efac;
  --ssaa-danger: #fb7185;
  --ssaa-radius: 18px;
  --ssaa-radius-sm: 12px;
  --ssaa-shadow: 0 24px 70px rgba(0, 0, 0, 0.48), 0 0 34px rgba(34, 211, 238, 0.14);
  --ssaa-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color-scheme: dark;
  position: relative;
  width: min(100%, 1160px);
  margin: clamp(18px, 4vw, 44px) auto;
  padding: clamp(16px, 3vw, 32px);
  border: 1px solid var(--ssaa-line);
  border-radius: 22px;
  background:
    radial-gradient(circle at 8% 0%, rgba(34, 211, 238, 0.18), transparent 34%),
    radial-gradient(circle at 92% 7%, rgba(240, 171, 252, 0.14), transparent 32%),
    radial-gradient(circle at 50% 100%, rgba(45, 212, 191, 0.10), transparent 38%),
    linear-gradient(145deg, var(--ssaa-bg-2), var(--ssaa-bg));
  box-shadow: var(--ssaa-shadow);
  color: var(--ssaa-text);
  font-family: var(--ssaa-font);
  isolation: isolate;
  overflow: hidden;
}


/* Per-tool neon accents */
.ssaa-shell--simple {
  --ssaa-cyan: #38bdf8;
  --ssaa-teal: #2dd4bf;
  --ssaa-magenta: #f0abfc;
}

.ssaa-shell--relationship {
  --ssaa-cyan: #f0abfc;
  --ssaa-teal: #fb7185;
  --ssaa-magenta: #a78bfa;
  --ssaa-line: rgba(240, 171, 252, 0.38);
  --ssaa-line-hot: rgba(251, 113, 133, 0.70);
}

.ssaa-shell--friendship {
  --ssaa-cyan: #67e8f9;
  --ssaa-teal: #60a5fa;
  --ssaa-magenta: #2dd4bf;
  --ssaa-line: rgba(96, 165, 250, 0.38);
  --ssaa-line-hot: rgba(103, 232, 249, 0.70);
}

.ssaa-shell--wedding {
  --ssaa-cyan: #f0abfc;
  --ssaa-teal: #fde68a;
  --ssaa-magenta: #c4b5fd;
  --ssaa-line: rgba(253, 230, 138, 0.34);
  --ssaa-line-hot: rgba(240, 171, 252, 0.70);
}

.ssaa-shell--job {
  --ssaa-cyan: #93c5fd;
  --ssaa-teal: #34d399;
  --ssaa-magenta: #facc15;
  --ssaa-line: rgba(52, 211, 153, 0.36);
  --ssaa-line-hot: rgba(147, 197, 253, 0.70);
}

.ssaa-shell--sobriety {
  --ssaa-cyan: #a7f3d0;
  --ssaa-teal: #22d3ee;
  --ssaa-magenta: #c4b5fd;
  --ssaa-line: rgba(167, 243, 208, 0.34);
  --ssaa-line-hot: rgba(34, 211, 238, 0.70);
}

.ssaa-shell--hub {
  --ssaa-cyan: #22d3ee;
  --ssaa-teal: #a78bfa;
  --ssaa-magenta: #f0abfc;
  --ssaa-line: rgba(167, 139, 250, 0.34);
  --ssaa-line-hot: rgba(34, 211, 238, 0.70);
}
.ssaa-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, black, transparent 78%);
}

.ssaa-shell,
.ssaa-shell *,
.ssaa-shell *::before,
.ssaa-shell *::after {
  box-sizing: border-box !important;
}

.ssaa-shell :where(*) {
  letter-spacing: 0 !important;
}

.ssaa-shell :where(h1, h2, h3, h4, h5, h6, legend) {
  margin: 0 0 0.7em !important;
  color: #ffffff !important;
  font-family: var(--ssaa-font) !important;
  font-weight: 850 !important;
  line-height: 1.13 !important;
  text-shadow: 0 0 24px rgba(34, 211, 238, 0.38) !important;
  -webkit-text-fill-color: currentColor !important;
}

.ssaa-shell h1,
.ssaa-shell .tool-title {
  font-size: clamp(2rem, 5vw, 3.7rem) !important;
}

.ssaa-shell h2 {
  font-size: clamp(1.55rem, 3.4vw, 2.55rem) !important;
}

.ssaa-shell h3 {
  font-size: clamp(1.2rem, 2.4vw, 1.65rem) !important;
}

.ssaa-shell :where(p, li, label, span, small, em, strong, div, td, th, summary, output) {
  color: var(--ssaa-soft) !important;
  font-family: var(--ssaa-font) !important;
  -webkit-text-fill-color: currentColor !important;
}

.ssaa-shell :where(p, li, td, th, label) {
  font-size: clamp(1rem, 1.2vw, 1.08rem) !important;
  line-height: 1.68 !important;
}

.ssaa-shell :where(p, ul, ol, table, form, fieldset, details) {
  margin-top: 0 !important;
  margin-bottom: 18px !important;
}

.ssaa-shell :where(ul, ol) {
  padding-left: 1.2rem !important;
}

.ssaa-shell :where(a) {
  color: #8eeaff !important;
  text-decoration-color: rgba(142, 234, 255, 0.48) !important;
  text-underline-offset: 3px !important;
}

.ssaa-shell :where(a:hover, a:focus-visible) {
  color: #ffffff !important;
  text-decoration-color: var(--ssaa-magenta) !important;
}

.ssaa-shell :where(strong, b) {
  color: #ffffff !important;
  font-weight: 850 !important;
}

.ssaa-shell :where(table) {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  overflow: hidden !important;
}

.ssaa-shell :where(th, td) {
  border: 1px solid rgba(45, 212, 191, 0.24) !important;
  padding: 11px 12px !important;
}

.ssaa-shell :where(th) {
  background: rgba(45, 212, 191, 0.14) !important;
  color: #ffffff !important;
}

.ssaa-shell :where(img, svg, canvas, video) {
  max-width: 100% !important;
  height: auto;
}

.ssaa-shell :where(.hidden, [hidden], .is-hidden) {
  display: none !important;
}

.ssaa-shell .sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 1px, 1px) !important;
  white-space: normal !important;
  border: 0 !important;
}

/* Shells, cards, and imported page containers */
.ssaa-shell :where(
  .anniversary-calculator,
  #ssa-friend-shell,
  .ssa-card,
  .ssa-article-card,
  .ssa-highlight,
  .ssa-related-tools,
  .ssa-related__card,
  .ssa-toc,
  .ssa-chooser,
  .milestone-card,
  .result,
  .countdown,
  .download-buttons,
  .social-share,
  .content,
  .faq,
  details,
  fieldset,
  .ssaa-account-calculator,
  .ssaa-legacy-save,
  .ssaa-account-save,
  .ssaa-result-card,
  .bg-white
) {
  border: 1px solid var(--ssaa-line) !important;
  border-radius: var(--ssaa-radius) !important;
  background:
    linear-gradient(180deg, rgba(13, 25, 45, 0.96), rgba(5, 10, 20, 0.96)) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  color: var(--ssaa-text) !important;
}

.ssaa-shell .anniversary-calculator {
  position: relative !important;
  width: min(100%, 980px) !important;
  margin: 0 auto clamp(18px, 4vw, 34px) !important;
  padding: clamp(20px, 4vw, 38px) !important;
  overflow: hidden !important;
}

.ssaa-shell .anniversary-calculator::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 0% 0%, rgba(34, 211, 238, 0.16), transparent 36%),
    radial-gradient(circle at 100% 0%, rgba(240, 171, 252, 0.12), transparent 36%);
}

.ssaa-shell .anniversary-calculator > * {
  position: relative;
  z-index: 1;
}

.ssaa-shell .anniversary-calculator h2 {
  text-align: center !important;
  margin-bottom: clamp(18px, 3vw, 28px) !important;
}

.ssaa-shell :where(.form-group, form label, .ssaa-tool-form label) {
  display: grid !important;
  gap: 8px !important;
  margin: 0 0 16px !important;
  font-weight: 800 !important;
}

.ssaa-shell :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) {
  width: 100% !important;
  min-height: 48px !important;
  border: 1px solid rgba(148, 163, 184, 0.42) !important;
  border-radius: 13px !important;
  background: rgba(2, 6, 23, 0.88) !important;
  color: #ffffff !important;
  caret-color: var(--ssaa-teal) !important;
  font: 750 1rem/1.35 var(--ssaa-font) !important;
  padding: 12px 14px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 0 1px rgba(45, 212, 191, 0.03) !important;
}

.ssaa-shell :where(input::placeholder, textarea::placeholder) {
  color: rgba(200, 232, 242, 0.66) !important;
}

.ssaa-shell :where(input:focus, select:focus, textarea:focus) {
  outline: 3px solid rgba(45, 212, 191, 0.28) !important;
  outline-offset: 2px !important;
  border-color: var(--ssaa-line-hot) !important;
  box-shadow: 0 0 22px rgba(34, 211, 238, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.ssaa-shell :where(input[type="checkbox"], input[type="radio"]) {
  width: 18px !important;
  height: 18px !important;
  accent-color: var(--ssaa-teal) !important;
}

.ssaa-shell :where(button, .btn, .button, input[type="button"], input[type="submit"], a.btn, a.button, .btn-email, .ssaa-account-link, .ssaa-save-result, .ssaa-save-legacy-result) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 44px !important;
  max-width: 100% !important;
  border: 1px solid rgba(45, 212, 191, 0.70) !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, var(--ssaa-teal), var(--ssaa-cyan)) !important;
  color: #031018 !important;
  -webkit-text-fill-color: #031018 !important;
  font-family: var(--ssaa-font) !important;
  font-size: 0.98rem !important;
  font-weight: 850 !important;
  line-height: 1.1 !important;
  text-decoration: none !important;
  text-shadow: none !important;
  padding: 11px 18px !important;
  box-shadow: 0 12px 28px rgba(34, 211, 238, 0.22) !important;
  cursor: pointer !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease !important;
  white-space: normal !important;
}

.ssaa-shell :where(button:hover, .btn:hover, .button:hover, input[type="button"]:hover, input[type="submit"]:hover, a.btn:hover, a.button:hover, .btn-email:hover, .ssaa-account-link:hover, .ssaa-save-result:hover, .ssaa-save-legacy-result:hover) {
  transform: translateY(-1px) !important;
  filter: brightness(1.04) !important;
  box-shadow: 0 16px 34px rgba(34, 211, 238, 0.30), 0 0 22px rgba(240, 171, 252, 0.16) !important;
}

.ssaa-shell :where(button:focus-visible, .btn:focus-visible, a:focus-visible) {
  outline: 3px solid rgba(240, 171, 252, 0.42) !important;
  outline-offset: 3px !important;
}

.ssaa-shell :where(button:disabled, input[type="button"]:disabled, input[type="submit"]:disabled, .btn:disabled, .ssaa-save-result:disabled, .ssaa-save-legacy-result:disabled) {
  cursor: not-allowed !important;
  opacity: 0.58 !important;
  filter: grayscale(0.4) !important;
  transform: none !important;
  box-shadow: none !important;
}

.ssaa-shell #clearButton,
.ssaa-shell .btn[style*="secondary"],
.ssaa-shell .btn[style*="--secondary-color"] {
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.94), rgba(240, 171, 252, 0.92)) !important;
  border-color: rgba(240, 171, 252, 0.70) !important;
  color: #12051d !important;
  -webkit-text-fill-color: #12051d !important;
}

.ssaa-shell .btn-email {
  margin: 10px auto 0 !important;
  background: rgba(2, 6, 23, 0.62) !important;
  color: #8eeaff !important;
  -webkit-text-fill-color: #8eeaff !important;
}

.ssaa-shell .download-buttons,
.ssaa-shell .social-share,
.ssaa-shell .cta-wrap {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  margin: 18px 0 !important;
  padding: clamp(14px, 2vw, 20px) !important;
}

.ssaa-shell .social-share button {
  width: 48px !important;
  min-width: 48px !important;
  height: 48px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  font-size: 1.05rem !important;
}

.ssaa-shell .social-share .facebook { background: linear-gradient(135deg, #60a5fa, #38bdf8) !important; }
.ssaa-shell .social-share .twitter { background: linear-gradient(135deg, #22d3ee, #2dd4bf) !important; }
.ssaa-shell .social-share .linkedin { background: linear-gradient(135deg, #818cf8, #38bdf8) !important; }
.ssaa-shell .social-share .pinterest { background: linear-gradient(135deg, #fb7185, #f0abfc) !important; }

/* Results */
.ssaa-shell :where(.result, .countdown) {
  width: 100% !important;
  margin: 20px auto !important;
  padding: clamp(16px, 3vw, 28px) !important;
}

.ssaa-shell .result:not(.hidden),
.ssaa-shell .countdown:not(.hidden) {
  animation: ssaaFadeUp 0.3s ease both;
}

.ssaa-shell .result h2,
.ssaa-shell .result h3,
.ssaa-shell .result h4 {
  color: #ffffff !important;
}

.ssaa-shell .result :where(section, .bg-white, .card, .panel) {
  margin-bottom: 16px !important;
}

.ssaa-shell .countdown {
  text-align: center !important;
  font-size: clamp(1.05rem, 2vw, 1.35rem) !important;
  font-weight: 850 !important;
  color: var(--ssaa-amber) !important;
  border-color: rgba(250, 204, 21, 0.34) !important;
  box-shadow: 0 0 28px rgba(250, 204, 21, 0.10) !important;
}

.ssaa-shell #errorMessage,
.ssaa-shell .text-red-500,
.ssaa-shell .ssaa-error {
  display: block;
  width: 100%;
  color: #fecdd3 !important;
  background: rgba(127, 29, 29, 0.34) !important;
  border: 1px solid rgba(251, 113, 133, 0.38) !important;
  border-radius: 12px !important;
  padding: 10px 12px !important;
  font-weight: 800 !important;
}

.ssaa-shell #errorMessage.hidden,
.ssaa-shell .text-red-500.hidden {
  display: none !important;
}

/* Dashboard save panels */
.ssaa-shell .ssaa-legacy-save,
.ssaa-shell .ssaa-account-save {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 12px !important;
  width: min(100%, 980px) !important;
  margin: 18px auto !important;
  padding: clamp(16px, 2.4vw, 24px) !important;
}

.ssaa-shell .ssaa-legacy-save h3 {
  width: 100% !important;
  margin-bottom: 4px !important;
}

.ssaa-shell .ssaa-legacy-save p,
.ssaa-shell .ssaa-save-status {
  margin: 0 !important;
  color: var(--ssaa-soft) !important;
  font-weight: 750 !important;
}

.ssaa-shell .ssaa-save-status {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 36px !important;
}

.ssaa-shell .ssaa-sensitive-note,
.ssaa-shell .ssaa-privacy-note {
  width: 100% !important;
  padding: 11px 13px !important;
  border: 1px solid rgba(250, 204, 21, 0.34) !important;
  border-radius: 12px !important;
  background: rgba(250, 204, 21, 0.08) !important;
  color: #fff7cc !important;
  font-size: 0.96rem !important;
  line-height: 1.55 !important;
}

.ssaa-shell .ssaa-privacy-note {
  border-color: rgba(96, 165, 250, 0.34) !important;
  background: rgba(96, 165, 250, 0.08) !important;
  color: #dbeafe !important;
}

.ssaa-shell .ssaa-support-resource {
  display: inline-flex !important;
  align-items: center !important;
  padding: 2px 8px !important;
  border: 1px solid rgba(167, 243, 208, 0.28) !important;
  border-radius: 999px !important;
  background: rgba(167, 243, 208, 0.08) !important;
  color: #d1fae5 !important;
  font-weight: 800 !important;
}

.ssaa-shell .ssaa-result-card {
  padding: 16px !important;
  margin: 12px 0 !important;
}

/* Hub and related cards */
.ssaa-shell .ssa-chooser,
.ssaa-shell .ssa-related-tools,
.ssaa-shell #ssa-friend-shell {
  width: 100% !important;
  margin: 0 auto 22px !important;
  padding: clamp(16px, 3vw, 28px) !important;
}

.ssaa-shell .ssa-chooser__title,
.ssaa-shell .ssa-related__title {
  text-align: center !important;
}

.ssaa-shell .ssa-chooser__intro,
.ssaa-shell .ssa-related__intro,
.ssaa-shell .ssa-sub {
  color: var(--ssaa-muted) !important;
  text-align: center !important;
}

.ssaa-shell .ssa-chooser__list,
.ssaa-shell .ssa-related__grid {
  list-style: none !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 14px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.ssaa-shell .ssa-chooser__list a,
.ssaa-shell .ssa-related__card {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  min-height: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 16px !important;
  text-decoration: none !important;
  text-align: left !important;
  white-space: normal !important;
}

.ssaa-shell .ssa-related__icon {
  color: var(--ssaa-teal) !important;
}

.ssaa-shell .ssa-related__text strong,
.ssaa-shell .ssa-chooser__list a strong {
  display: block !important;
  color: #ffffff !important;
}

.ssaa-shell .ssa-related__text em,
.ssaa-shell .ssa-chooser__list a span {
  display: block !important;
  color: var(--ssaa-muted) !important;
  font-style: normal !important;
}

/* Article companion page */
.ssaa-shell #ssa-friend-shell {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.ssaa-shell #ssa-friend-shell .ssa-card {
  padding: clamp(16px, 3vw, 26px) !important;
  margin-bottom: 18px !important;
}

.ssaa-shell .ssa-kicker,
.ssaa-shell .ssaa-kicker,
.ssaa-shell .badge {
  display: inline-flex !important;
  width: fit-content !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 0 10px !important;
  padding: 6px 10px !important;
  border: 1px solid rgba(45, 212, 191, 0.40) !important;
  border-radius: 999px !important;
  background: rgba(45, 212, 191, 0.12) !important;
  color: #a7fff3 !important;
  font-weight: 850 !important;
}

.ssaa-shell .ssa-highlight {
  padding: 14px 16px !important;
  border-color: rgba(250, 204, 21, 0.38) !important;
  background: linear-gradient(180deg, rgba(120, 83, 9, 0.22), rgba(15, 23, 42, 0.92)) !important;
}

.ssaa-shell .ssa-toc__toggle {
  width: 100% !important;
  justify-content: space-between !important;
}

.ssaa-shell .ssa-toc__content {
  margin-top: 12px !important;
}

.ssaa-shell .ssa-toc__list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  gap: 8px !important;
}

.ssaa-shell .ssa-faq,
.ssaa-shell .ssa-faq__item,
.ssaa-shell details {
  padding: 14px 16px !important;
}

.ssaa-shell summary {
  cursor: pointer !important;
  color: var(--ssaa-teal) !important;
  font-weight: 850 !important;
}

/* Gift and affiliate cards inside generated results */
.ssaa-shell .gift-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important;
  gap: 12px !important;
  margin-top: 12px !important;
}

.ssaa-shell .gift-card {
  display: grid !important;
  gap: 6px !important;
  padding: 14px !important;
  border: 1px solid rgba(45, 212, 191, 0.34) !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, rgba(12, 24, 43, 0.96), rgba(5, 10, 20, 0.96)) !important;
  text-decoration: none !important;
}

.ssaa-shell .gift-title {
  color: #ffffff !important;
  font-weight: 850 !important;
}

.ssaa-shell .gift-sub {
  color: var(--ssaa-muted) !important;
  font-size: 0.92rem !important;
}

.ssaa-shell .celebrate-banner,
.ssaa-shell #stickyCelebrate {
  padding: 14px 16px !important;
  border: 1px solid rgba(250, 204, 21, 0.36) !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, rgba(45, 212, 191, 0.12), rgba(240, 171, 252, 0.10)) !important;
}

.ssaa-shell .celebrate-header {
  color: #ffffff !important;
  font-weight: 850 !important;
}

.ssaa-shell .celebrate-disclosure {
  color: var(--ssaa-muted) !important;
  font-size: 0.9rem !important;
}

/* Utility aliases from imported Tailwind-style markup */
.ssaa-shell .text-center { text-align: center !important; }
.ssaa-shell .text-left { text-align: left !important; }
.ssaa-shell .font-bold,
.ssaa-shell .font-semibold,
.ssaa-shell .font-extrabold { font-weight: 850 !important; }
.ssaa-shell .text-sm { font-size: 0.9rem !important; }
.ssaa-shell .text-xl { font-size: 1.25rem !important; }
.ssaa-shell .text-2xl { font-size: 1.5rem !important; }
.ssaa-shell .text-3xl { font-size: clamp(1.7rem, 3vw, 2rem) !important; }
.ssaa-shell .text-blue-600,
.ssaa-shell .text-green-600,
.ssaa-shell .text-gray-600 { color: var(--ssaa-cyan) !important; }
.ssaa-shell .list-disc { list-style-type: disc !important; }
.ssaa-shell .list-inside { list-style-position: inside !important; }
.ssaa-shell .inline-flex { display: inline-flex !important; }
.ssaa-shell .items-center { align-items: center !important; }
.ssaa-shell .justify-center { justify-content: center !important; }
.ssaa-shell .grid { display: grid !important; }
.ssaa-shell .flex { display: flex !important; }
.ssaa-shell .flex-wrap { flex-wrap: wrap !important; }
.ssaa-shell .gap-2 { gap: 8px !important; }
.ssaa-shell .gap-4 { gap: 16px !important; }
.ssaa-shell .space-y-4 > * + * { margin-top: 16px !important; }
.ssaa-shell .space-y-6 > * + * { margin-top: 20px !important; }
.ssaa-shell .space-y-8 > * + * { margin-top: 24px !important; }
.ssaa-shell .mt-1 { margin-top: 4px !important; }
.ssaa-shell .mt-2 { margin-top: 8px !important; }
.ssaa-shell .mt-4 { margin-top: 16px !important; }
.ssaa-shell .mt-6 { margin-top: 24px !important; }
.ssaa-shell .mb-4 { margin-bottom: 16px !important; }
.ssaa-shell .ml-2 { margin-left: 8px !important; }
.ssaa-shell .p-4 { padding: 16px !important; }
.ssaa-shell .p-6 { padding: clamp(16px, 2.4vw, 24px) !important; }
.ssaa-shell .rounded-lg,
.ssaa-shell .rounded-xl { border-radius: var(--ssaa-radius-sm) !important; }
.ssaa-shell .shadow-md,
.ssaa-shell .shadow-lg,
.ssaa-shell .hover\:shadow-lg:hover { box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28) !important; }
.ssaa-shell .transition-shadow,
.ssaa-shell .duration-300 { transition: box-shadow 0.2s ease, transform 0.2s ease !important; }

/* Old layout helpers */
.ssaa-shell .kv,
.ssaa-shell .duration-list li.duration-item,
.ssaa-shell .duration-list li {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  gap: 0.5ch !important;
}

.ssaa-shell .kv .badge {
  margin: 0 !important;
}

.ssaa-shell .num,
.ssaa-shell .duration-list .num {
  font-variant-numeric: tabular-nums !important;
}

.ssaa-shell .collapsible {
  width: 100% !important;
  justify-content: space-between !important;
  margin-top: 12px !important;
}

.ssaa-shell .content {
  padding: 14px 16px !important;
  margin-top: 10px !important;
}

/* Remove embedded legacy theme toggles; the plugin now owns the theme. */
.ssaa-shell .theme-switcher,
.ssaa-shell #themeSwitcher,
.ssaa-shell button[aria-label*="Toggle theme" i],
.ssaa-shell button[aria-label*="toggle theme" i] {
  display: none !important;
}

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

@media (max-width: 760px) {
  .ssaa-shell {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 14px !important;
    border-radius: 18px !important;
  }

  .ssaa-shell .anniversary-calculator,
  .ssaa-shell .ssaa-legacy-save,
  .ssaa-shell .ssaa-account-save,
  .ssaa-shell .ssa-card,
  .ssaa-shell .ssa-related-tools,
  .ssaa-shell .ssa-chooser {
    padding: 16px !important;
    border-radius: 16px !important;
  }

  .ssaa-shell :where(button, .btn, .button, input[type="button"], input[type="submit"], a.btn, a.button, .btn-email, .ssaa-account-link, .ssaa-save-result, .ssaa-save-legacy-result) {
    width: 100% !important;
  }

  .ssaa-shell .social-share button {
    width: 46px !important;
    min-width: 46px !important;
  }

  .ssaa-shell .download-buttons,
  .ssaa-shell .cta-wrap {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .ssaa-shell .ssa-chooser__list,
  .ssaa-shell .ssa-related__grid,
  .ssaa-shell .gift-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ssaa-shell *,
  .ssaa-shell *::before,
  .ssaa-shell *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
/* Emergency-strength generated result normalization.
   Legacy calculators inject Tailwind-like white sections after calculation; keep them compact and neon. */
.ssaa-shell .anniversary-calculator #result.result,
.ssaa-shell .anniversary-calculator .result {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  background: linear-gradient(180deg, rgba(8, 16, 31, 0.96), rgba(3, 7, 18, 0.96)) !important;
  color: var(--ssaa-text) !important;
}

.ssaa-shell .anniversary-calculator #result.result > *,
.ssaa-shell .anniversary-calculator .result > *,
.ssaa-shell .anniversary-calculator #result.result .ssaa-rich-friendship-results,
.ssaa-shell .anniversary-calculator #result.result .space-y-8,
.ssaa-shell .anniversary-calculator #result.result .space-y-6,
.ssaa-shell .anniversary-calculator #result.result .space-y-4 {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  transform: none !important;
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  overflow: visible !important;
}

.ssaa-shell .anniversary-calculator #result.result .space-y-8,
.ssaa-shell .anniversary-calculator #result.result .space-y-6,
.ssaa-shell .anniversary-calculator #result.result .space-y-4,
.ssaa-shell .anniversary-calculator #result.result .ssaa-rich-friendship-results {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 14px !important;
  padding: 0 !important;
}

.ssaa-shell .anniversary-calculator #result.result .space-y-8 > * + *,
.ssaa-shell .anniversary-calculator #result.result .space-y-6 > * + *,
.ssaa-shell .anniversary-calculator #result.result .space-y-4 > * + * {
  margin-top: 0 !important;
}

.ssaa-shell .anniversary-calculator #result.result section,
.ssaa-shell .anniversary-calculator #result.result section.bg-white,
.ssaa-shell .anniversary-calculator #result.result .bg-white,
.ssaa-shell .anniversary-calculator #result.result .p-6,
.ssaa-shell .anniversary-calculator #result.result .rounded-lg,
.ssaa-shell .anniversary-calculator #result.result .shadow-md,
.ssaa-shell .anniversary-calculator #result.result .hover\:shadow-lg,
.ssaa-shell .anniversary-calculator .result section,
.ssaa-shell .anniversary-calculator .result .bg-white {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: clamp(14px, 2.4vw, 20px) !important;
  border: 1px solid rgba(45, 212, 191, 0.36) !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, rgba(11, 23, 42, 0.98), rgba(4, 10, 22, 0.98)) !important;
  color: var(--ssaa-text) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  transform: none !important;
  position: static !important;
  overflow: visible !important;
}

.ssaa-shell .anniversary-calculator #result.result section + section,
.ssaa-shell .anniversary-calculator .result section + section {
  margin-top: 14px !important;
}

.ssaa-shell .anniversary-calculator #result.result h2,
.ssaa-shell .anniversary-calculator #result.result h3,
.ssaa-shell .anniversary-calculator #result.result h4,
.ssaa-shell .anniversary-calculator #result.result p,
.ssaa-shell .anniversary-calculator #result.result li,
.ssaa-shell .anniversary-calculator #result.result strong,
.ssaa-shell .anniversary-calculator #result.result span,
.ssaa-shell .anniversary-calculator #result.result div,
.ssaa-shell .anniversary-calculator .result h2,
.ssaa-shell .anniversary-calculator .result h3,
.ssaa-shell .anniversary-calculator .result h4,
.ssaa-shell .anniversary-calculator .result p,
.ssaa-shell .anniversary-calculator .result li,
.ssaa-shell .anniversary-calculator .result strong,
.ssaa-shell .anniversary-calculator .result span,
.ssaa-shell .anniversary-calculator .result div {
  color: var(--ssaa-soft) !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: none !important;
}

.ssaa-shell .anniversary-calculator #result.result h2,
.ssaa-shell .anniversary-calculator #result.result h3,
.ssaa-shell .anniversary-calculator #result.result h4,
.ssaa-shell .anniversary-calculator .result h2,
.ssaa-shell .anniversary-calculator .result h3,
.ssaa-shell .anniversary-calculator .result h4,
.ssaa-shell .anniversary-calculator #result.result strong,
.ssaa-shell .anniversary-calculator .result strong {
  color: #ffffff !important;
}

.ssaa-shell .anniversary-calculator #result.result ul,
.ssaa-shell .anniversary-calculator .result ul {
  display: grid !important;
  gap: 8px !important;
  margin: 10px 0 0 !important;
  padding-left: 1.1rem !important;
}

.ssaa-shell .anniversary-calculator #result.result li,
.ssaa-shell .anniversary-calculator .result li {
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

@media (max-width: 760px) {
  .ssaa-shell .anniversary-calculator #result.result,
  .ssaa-shell .anniversary-calculator .result {
    padding: 12px !important;
  }

  .ssaa-shell .anniversary-calculator #result.result section,
  .ssaa-shell .anniversary-calculator #result.result section.bg-white,
  .ssaa-shell .anniversary-calculator #result.result .bg-white,
  .ssaa-shell .anniversary-calculator .result section,
  .ssaa-shell .anniversary-calculator .result .bg-white {
    padding: 12px !important;
    border-radius: 12px !important;
  }
}
/* Flat generated result sections. These replace the old section.bg-white utility output. */
.ssaa-shell .anniversary-calculator #result.result .ssaa-result-section,
.ssaa-shell .anniversary-calculator .result .ssaa-result-section {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: clamp(14px, 2.2vw, 20px) !important;
  border: 1px solid rgba(45, 212, 191, 0.38) !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, rgba(10, 23, 43, 0.98), rgba(4, 10, 22, 0.98)) !important;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255,255,255,0.04) !important;
  color: var(--ssaa-text) !important;
  position: static !important;
  transform: none !important;
  overflow: visible !important;
}

.ssaa-shell .anniversary-calculator #result.result .ssaa-result-section + .ssaa-result-section,
.ssaa-shell .anniversary-calculator .result .ssaa-result-section + .ssaa-result-section {
  margin-top: 14px !important;
}

.ssaa-shell .anniversary-calculator #result.result .ssaa-result-section-title,
.ssaa-shell .anniversary-calculator .result .ssaa-result-section-title {
  margin: 0 0 10px !important;
  color: #ffffff !important;
  font-size: clamp(1.05rem, 2vw, 1.35rem) !important;
  line-height: 1.2 !important;
  text-align: left !important;
  text-shadow: none !important;
}

.ssaa-shell .anniversary-calculator #result.result .ssaa-result-section-body,
.ssaa-shell .anniversary-calculator .result .ssaa-result-section-body {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--ssaa-soft) !important;
}

.ssaa-shell .anniversary-calculator #result.result .ssaa-result-section-body > *:last-child,
.ssaa-shell .anniversary-calculator .result .ssaa-result-section-body > *:last-child {
  margin-bottom: 0 !important;
}

.ssaa-shell .anniversary-calculator #result.result .ssaa-result-section ul,
.ssaa-shell .anniversary-calculator .result .ssaa-result-section ul {
  display: grid !important;
  gap: 8px !important;
  margin: 8px 0 0 !important;
  padding-left: 1.15rem !important;
}

@media (max-width: 760px) {
  .ssaa-shell .anniversary-calculator #result.result .ssaa-result-section,
  .ssaa-shell .anniversary-calculator .result .ssaa-result-section {
    padding: 12px !important;
    border-radius: 12px !important;
  }
}

/* Friendship article controls. This is scoped to the WP article wrapper so
   pasted page content and plugin-rendered content behave the same way. */
#ssa-friend-shell {
  --ssaa-article-bg: #050914;
  --ssaa-article-panel: rgba(8, 18, 34, 0.96);
  --ssaa-article-card: rgba(10, 24, 43, 0.94);
  --ssaa-article-line: rgba(45, 212, 191, 0.34);
  --ssaa-article-line-hot: rgba(56, 189, 248, 0.58);
  --ssaa-article-text: #eefcff;
  --ssaa-article-soft: #c8eef7;
  --ssaa-article-muted: #92b7c5;
  --ssaa-article-accent: #2dd4bf;
  --ssaa-article-blue: #38bdf8;
  color: var(--ssaa-article-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

#ssa-friend-shell *,
#ssa-friend-shell *::before,
#ssa-friend-shell *::after {
  box-sizing: border-box;
}

#ssa-friend-shell :where(.is-hidden, [hidden]) {
  display: none !important;
}

#ssa-friend-shell :where(p, li, td, th, dd) {
  color: var(--ssaa-article-soft);
  line-height: 1.68;
}

#ssa-friend-shell :where(h1, h2, h3, h4, strong) {
  color: #ffffff;
}

#ssa-friend-shell :where(a) {
  color: #8eeaff;
  text-underline-offset: 3px;
}

#ssa-friend-shell :where(.ssa-toc, .ssa-faqs, .ssa-faq, .ssa-related-tools, .ssa-related__card, .wp-block-group, .wp-block-columns) {
  border: 1px solid var(--ssaa-article-line);
  border-radius: 16px;
  background: linear-gradient(180deg, var(--ssaa-article-card), rgba(4, 10, 22, 0.96));
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

#ssa-friend-shell .ssa-toc,
#ssa-friend-shell .ssa-faqs {
  display: grid;
  gap: 12px;
  margin: 22px 0;
  padding: clamp(14px, 2vw, 20px);
}

#ssa-friend-shell .ssa-toc__toggle,
#ssa-friend-shell .ssa-faq__q {
  appearance: none;
  width: 100%;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid rgba(45, 212, 191, 0.58);
  border-radius: 999px;
  background: linear-gradient(135deg, var(--ssaa-article-accent), var(--ssaa-article-blue));
  color: #021018;
  font: 850 1rem/1.2 Inter, ui-sans-serif, system-ui, sans-serif;
  text-align: left;
  padding: 12px 18px;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(34, 211, 238, 0.22);
}

#ssa-friend-shell .ssa-toc__toggle::after,
#ssa-friend-shell .ssa-faq__q::after {
  content: "+";
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(2, 16, 24, 0.16);
  color: #021018;
  font-weight: 900;
}

#ssa-friend-shell .ssa-toc__toggle[aria-expanded="true"]::after,
#ssa-friend-shell .ssa-faq__q[aria-expanded="true"]::after {
  content: "-";
}

#ssa-friend-shell .ssa-toc__toggle:hover,
#ssa-friend-shell .ssa-faq__q:hover,
#ssa-friend-shell .ssa-toc__toggle:focus-visible,
#ssa-friend-shell .ssa-faq__q:focus-visible {
  border-color: rgba(255, 255, 255, 0.72);
  box-shadow: 0 16px 34px rgba(56, 189, 248, 0.30), 0 0 20px rgba(45, 212, 191, 0.18);
  outline: 3px solid rgba(45, 212, 191, 0.22);
  outline-offset: 2px;
}

#ssa-friend-shell .ssa-toc__content,
#ssa-friend-shell .ssa-faq__a {
  display: block;
  border: 1px solid var(--ssaa-article-line);
  border-radius: 14px;
  background: rgba(3, 9, 20, 0.72);
  color: var(--ssaa-article-soft);
  padding: clamp(14px, 2vw, 20px);
}

#ssa-friend-shell .ssa-toc__list,
#ssa-friend-shell .ssa-toc__content ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 1.2rem;
}

#ssa-friend-shell .ssa-toc__content li,
#ssa-friend-shell .ssa-faq__a > *:last-child {
  margin-bottom: 0;
}

#ssa-friend-shell .ssa-faq {
  padding: 12px;
}

#ssa-friend-shell .ssa-faq + .ssa-faq {
  margin-top: 10px;
}

#ssa-friend-shell .ssa-faq__a {
  margin-top: 10px;
}

#ssa-friend-shell .ssa-related-tools {
  margin: 26px 0;
  padding: clamp(16px, 2.4vw, 24px);
}

#ssa-friend-shell .ssa-related__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

#ssa-friend-shell .ssa-related__card {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 12px;
  min-height: 0;
  width: 100%;
  max-width: 100%;
  padding: 14px;
  text-decoration: none;
  text-align: left;
  white-space: normal;
}

#ssa-friend-shell .ssa-related__card .ssa-related__icon,
#ssa-friend-shell .ssa-related__card .ssa-related__text,
.ssaa-shell .ssa-related__card .ssa-related__icon,
.ssaa-shell .ssa-related__card .ssa-related__text {
  min-width: 0;
  max-width: 100%;
}

#ssa-friend-shell .ssa-related__card.is-current {
  border-color: var(--ssaa-article-line-hot);
  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.22), 0 12px 28px rgba(56, 189, 248, 0.18);
}

@media (max-width: 720px) {
  #ssa-friend-shell .ssa-toc__toggle,
  #ssa-friend-shell .ssa-faq__q {
    border-radius: 14px;
    align-items: flex-start;
  }

  #ssa-friend-shell .ssa-related__grid {
    grid-template-columns: 1fr;
  }
}

/* Shared WP article layer for every anniversary editorial page. */
:where(
  #ssa-anniversary-hub-shell,
  #ssa-job-shell,
  #ssa-relationship-shell,
  #ssa-general-shell,
  #ssa-sobriety-shell,
  #ssa-wedding-shell
) {
  --ssaa-article-card: rgba(10, 24, 43, 0.94);
  --ssaa-article-line: rgba(45, 212, 191, 0.34);
  --ssaa-article-line-hot: rgba(56, 189, 248, 0.58);
  --ssaa-article-text: #eefcff;
  --ssaa-article-soft: #c8eef7;
  --ssaa-article-accent: #2dd4bf;
  --ssaa-article-blue: #38bdf8;
  color: var(--ssaa-article-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

:where(
  #ssa-anniversary-hub-shell,
  #ssa-job-shell,
  #ssa-relationship-shell,
  #ssa-general-shell,
  #ssa-sobriety-shell,
  #ssa-wedding-shell
) *,
:where(
  #ssa-anniversary-hub-shell,
  #ssa-job-shell,
  #ssa-relationship-shell,
  #ssa-general-shell,
  #ssa-sobriety-shell,
  #ssa-wedding-shell
) *::before,
:where(
  #ssa-anniversary-hub-shell,
  #ssa-job-shell,
  #ssa-relationship-shell,
  #ssa-general-shell,
  #ssa-sobriety-shell,
  #ssa-wedding-shell
) *::after {
  box-sizing: border-box;
}

:where(
  #ssa-anniversary-hub-shell,
  #ssa-job-shell,
  #ssa-relationship-shell,
  #ssa-general-shell,
  #ssa-sobriety-shell,
  #ssa-wedding-shell
) :where(.is-hidden, .hidden, [hidden]) {
  display: none !important;
}

:where(
  #ssa-anniversary-hub-shell,
  #ssa-job-shell,
  #ssa-relationship-shell,
  #ssa-general-shell,
  #ssa-sobriety-shell,
  #ssa-wedding-shell
) :where(p, li, td, th, dd) {
  color: var(--ssaa-article-soft);
  line-height: 1.68;
}

:where(
  #ssa-anniversary-hub-shell,
  #ssa-job-shell,
  #ssa-relationship-shell,
  #ssa-general-shell,
  #ssa-sobriety-shell,
  #ssa-wedding-shell
) :where(h1, h2, h3, h4, strong) {
  color: #ffffff;
}

:where(
  #ssa-anniversary-hub-shell,
  #ssa-job-shell,
  #ssa-relationship-shell,
  #ssa-general-shell,
  #ssa-sobriety-shell,
  #ssa-wedding-shell
) :where(a) {
  color: #8eeaff;
  text-underline-offset: 3px;
}

:where(
  #ssa-anniversary-hub-shell,
  #ssa-job-shell,
  #ssa-relationship-shell,
  #ssa-general-shell,
  #ssa-sobriety-shell,
  #ssa-wedding-shell
) :where(.ssa-toc, .ssa-faqs, .ssa-faq, .faq, .ssa-related-tools, .ssa-related__card) {
  border: 1px solid var(--ssaa-article-line);
  border-radius: 16px;
  background: linear-gradient(180deg, var(--ssaa-article-card), rgba(4, 10, 22, 0.96));
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

:where(
  #ssa-anniversary-hub-shell,
  #ssa-job-shell,
  #ssa-relationship-shell,
  #ssa-general-shell,
  #ssa-sobriety-shell,
  #ssa-wedding-shell
) :where(.ssa-toc, .ssa-faqs) {
  display: grid;
  gap: 12px;
  margin: 22px 0;
  padding: clamp(14px, 2vw, 20px);
}

:where(
  #ssa-anniversary-hub-shell,
  #ssa-job-shell,
  #ssa-relationship-shell,
  #ssa-general-shell,
  #ssa-sobriety-shell,
  #ssa-wedding-shell
) :where(.ssa-toc__toggle, .ssa-faq__q, .faq-question) {
  appearance: none;
  width: 100%;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid rgba(45, 212, 191, 0.58);
  border-radius: 999px;
  background: linear-gradient(135deg, var(--ssaa-article-accent), var(--ssaa-article-blue));
  color: #021018;
  font: 850 1rem/1.2 Inter, ui-sans-serif, system-ui, sans-serif;
  text-align: left;
  padding: 12px 18px;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(34, 211, 238, 0.22);
}

:where(
  #ssa-anniversary-hub-shell,
  #ssa-job-shell,
  #ssa-relationship-shell,
  #ssa-general-shell,
  #ssa-sobriety-shell,
  #ssa-wedding-shell
) :where(.ssa-toc__toggle, .ssa-faq__q, .faq-question)::after {
  content: "+";
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(2, 16, 24, 0.16);
  color: #021018;
  font-weight: 900;
}

:where(
  #ssa-anniversary-hub-shell,
  #ssa-job-shell,
  #ssa-relationship-shell,
  #ssa-general-shell,
  #ssa-sobriety-shell,
  #ssa-wedding-shell
) :where(.ssa-toc__toggle, .ssa-faq__q, .faq-question)[aria-expanded="true"]::after {
  content: "-";
}

:where(
  #ssa-anniversary-hub-shell,
  #ssa-job-shell,
  #ssa-relationship-shell,
  #ssa-general-shell,
  #ssa-sobriety-shell,
  #ssa-wedding-shell
) :where(.ssa-toc__content, .ssa-faq__a, .faq-answer) {
  display: block;
  border: 1px solid var(--ssaa-article-line);
  border-radius: 14px;
  background: rgba(3, 9, 20, 0.72);
  color: var(--ssaa-article-soft);
  padding: clamp(14px, 2vw, 20px);
}

:where(
  #ssa-anniversary-hub-shell,
  #ssa-job-shell,
  #ssa-relationship-shell,
  #ssa-general-shell,
  #ssa-sobriety-shell,
  #ssa-wedding-shell
) :where(.ssa-toc__list, .ssa-toc__content ul) {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 1.2rem;
}

:where(
  #ssa-anniversary-hub-shell,
  #ssa-job-shell,
  #ssa-relationship-shell,
  #ssa-general-shell,
  #ssa-sobriety-shell,
  #ssa-wedding-shell
) :where(.ssa-faq, .faq) {
  padding: 12px;
}

:where(
  #ssa-anniversary-hub-shell,
  #ssa-job-shell,
  #ssa-relationship-shell,
  #ssa-general-shell,
  #ssa-sobriety-shell,
  #ssa-wedding-shell
) :where(.ssa-faq__a, .faq-answer) {
  margin-top: 10px;
}

@media (max-width: 720px) {
  :where(
    #ssa-anniversary-hub-shell,
    #ssa-job-shell,
    #ssa-relationship-shell,
    #ssa-general-shell,
    #ssa-sobriety-shell,
    #ssa-wedding-shell
  ) :where(.ssa-toc__toggle, .ssa-faq__q, .faq-question) {
    border-radius: 14px;
    align-items: flex-start;
  }
}

/* Result readability spacing pass: applies only inside calculated results. */
.ssaa-shell .anniversary-calculator #result.result .space-y-8,
.ssaa-shell .anniversary-calculator #result.result .space-y-6,
.ssaa-shell .anniversary-calculator #result.result .space-y-4,
.ssaa-shell .anniversary-calculator #result.result .ssaa-rich-friendship-results {
  gap: clamp(22px, 3vw, 34px) !important;
}

.ssaa-shell .anniversary-calculator #result.result .ssaa-result-section,
.ssaa-shell .anniversary-calculator .result .ssaa-result-section,
.ssaa-shell .anniversary-calculator #result.result section,
.ssaa-shell .anniversary-calculator .result section,
.ssaa-shell .anniversary-calculator #result.result .bg-white,
.ssaa-shell .anniversary-calculator .result .bg-white {
  margin-top: 0 !important;
  margin-bottom: clamp(18px, 2.5vw, 28px) !important;
  padding: clamp(18px, 2.8vw, 28px) !important;
}

.ssaa-shell .anniversary-calculator #result.result .ssaa-result-section + .ssaa-result-section,
.ssaa-shell .anniversary-calculator .result .ssaa-result-section + .ssaa-result-section,
.ssaa-shell .anniversary-calculator #result.result section + section,
.ssaa-shell .anniversary-calculator .result section + section {
  margin-top: clamp(18px, 2.5vw, 28px) !important;
}

.ssaa-shell .anniversary-calculator #result.result .ssaa-result-section-title,
.ssaa-shell .anniversary-calculator .result .ssaa-result-section-title,
.ssaa-shell .anniversary-calculator #result.result h3,
.ssaa-shell .anniversary-calculator .result h3 {
  margin-bottom: 14px !important;
}

.ssaa-shell .anniversary-calculator #result.result p,
.ssaa-shell .anniversary-calculator .result p,
.ssaa-shell .anniversary-calculator #result.result li,
.ssaa-shell .anniversary-calculator .result li {
  margin-bottom: 0.7em !important;
  line-height: 1.82 !important;
  word-spacing: 0.08em !important;
}

.ssaa-shell .anniversary-calculator #result.result .label,
.ssaa-shell .anniversary-calculator .result .label,
.ssaa-shell .anniversary-calculator #result.result strong,
.ssaa-shell .anniversary-calculator .result strong {
  margin-right: 0.35ch !important;
}

.ssaa-shell .anniversary-calculator #result.result .duration-list,
.ssaa-shell .anniversary-calculator .result .duration-list,
.ssaa-shell .anniversary-calculator #result.result .metrics-list,
.ssaa-shell .anniversary-calculator .result .metrics-list,
.ssaa-shell .anniversary-calculator #result.result .ssaa-rich-list,
.ssaa-shell .anniversary-calculator .result .ssaa-rich-list {
  gap: 10px !important;
}

/* 2026 UX polish: guidance panels, richer generated results, and tighter dashboard/affiliate placement rhythm. */
.ssaa-shell .ssaa-guidance-panel,
.ssaa-shell .ssaa-insight-grid > section,
.ssaa-shell .ssaa-plan-grid > section,
.ssaa-shell .ssaa-result-details,
.ssaa-shell .ssaa-related-inline {
  border: 1px solid rgba(45, 212, 191, 0.32) !important;
  border-radius: 16px !important;
  background:
    radial-gradient(circle at 10% 0%, rgba(45, 212, 191, 0.10), transparent 34%),
    linear-gradient(180deg, rgba(8, 18, 34, 0.96), rgba(3, 8, 18, 0.96)) !important;
  color: var(--ssaa-soft) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.30) !important;
}

.ssaa-shell .ssaa-guidance-panel {
  display: grid !important;
  gap: 14px !important;
  margin: 0 0 18px !important;
  padding: clamp(16px, 2.6vw, 24px) !important;
}

.ssaa-shell .ssaa-guidance-panel h3,
.ssaa-shell .ssaa-guidance-panel p,
.ssaa-shell .ssaa-guidance-panel ul {
  margin: 0 !important;
}

.ssaa-shell .ssaa-guidance-list {
  display: grid !important;
  gap: 9px !important;
  padding-left: 1.2rem !important;
}

.ssaa-shell .ssaa-related-inline {
  display: grid !important;
  gap: 10px !important;
  padding: 14px !important;
}

.ssaa-shell .ssaa-related-inline > div {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.ssaa-shell .ssaa-related-inline a,
.ssaa-shell .ssaa-related-inline span {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 32px !important;
  padding: 6px 10px !important;
  border: 1px solid rgba(125, 211, 252, 0.30) !important;
  border-radius: 999px !important;
  background: rgba(8, 47, 73, 0.52) !important;
  color: #dffbff !important;
  font-size: 0.9rem !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}

.ssaa-shell .ssaa-result-card {
  display: grid !important;
  gap: clamp(14px, 2vw, 20px) !important;
  padding: clamp(18px, 2.8vw, 30px) !important;
}

.ssaa-shell .ssaa-result-lede {
  margin: 0 !important;
  font-size: clamp(1rem, 1.5vw, 1.14rem) !important;
  color: #e0faff !important;
}

.ssaa-shell .ssaa-insight-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.ssaa-shell .ssaa-plan-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.ssaa-shell .ssaa-insight-grid > section {
  padding: 14px !important;
}

.ssaa-shell .ssaa-plan-grid > section {
  padding: 14px !important;
}

.ssaa-shell .ssaa-insight-grid h4,
.ssaa-shell .ssaa-insight-grid p,
.ssaa-shell .ssaa-plan-grid h4,
.ssaa-shell .ssaa-plan-grid p {
  margin: 0 !important;
}

.ssaa-shell .ssaa-insight-grid h4,
.ssaa-shell .ssaa-plan-grid h4 {
  margin-bottom: 7px !important;
}

.ssaa-shell .ssaa-result-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

.ssaa-shell .ssaa-result-actions button {
  flex: 1 1 160px !important;
}

.ssaa-shell .ssaa-result-details {
  padding: 12px 14px !important;
}

.ssaa-shell .ssaa-result-details summary {
  cursor: pointer !important;
  color: #ffffff !important;
  font-weight: 850 !important;
}

.ssaa-shell .ssaa-result-details ul {
  display: grid !important;
  gap: 8px !important;
  margin: 10px 0 0 !important;
  padding-left: 1.2rem !important;
}

.ssaa-shell .ssaa-account-save,
.ssaa-shell .ssaa-legacy-save,
.ssaa-shell .ssa-recommendation-block,
.ssaa-shell [class*="recommendation"] {
  margin-bottom: clamp(18px, 2.4vw, 28px) !important;
}

.ssaa-shell .ssaa-account-save,
.ssaa-shell .ssaa-legacy-save {
  gap: 12px !important;
}

.ssaa-shell .ssaa-save-status a {
  color: #8eeaff !important;
  font-weight: 850 !important;
}

@media (max-width: 820px) {
  .ssaa-shell .ssaa-insight-grid,
  .ssaa-shell .ssaa-plan-grid {
    grid-template-columns: 1fr !important;
  }

  .ssaa-shell .ssaa-related-inline > div {
    flex-direction: column !important;
  }

  .ssaa-shell .ssaa-related-inline a,
  .ssaa-shell .ssaa-related-inline span {
    width: 100% !important;
    border-radius: 12px !important;
  }
}

@media print {
  body.ssaa-print-result-active * {
    visibility: hidden !important;
  }

  body.ssaa-print-result-active .ssaa-result-card.is-print-target,
  body.ssaa-print-result-active .ssaa-result-card.is-print-target * {
    visibility: visible !important;
  }

  body.ssaa-print-result-active .ssaa-result-card.is-print-target {
    position: absolute !important;
    inset: 0 auto auto 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 18px !important;
    background: #ffffff !important;
    color: #111827 !important;
    box-shadow: none !important;
  }

  body.ssaa-print-result-active .ssaa-result-card.is-print-target * {
    color: #111827 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.ssaa-print-result-active .ssaa-result-actions {
    display: none !important;
  }
}

/* Hard containment for anniversary on-page recommendation cards and action controls. */
:where(
  .ssaa-shell,
  #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
) :where(.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;
}

:where(
  .ssaa-shell,
  #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
) :where(.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;
}

:where(
  .ssaa-shell,
  #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
) :where(.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;
}

:where(
  .ssaa-shell,
  #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
) :where(.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;
}

:where(
  .ssaa-shell,
  #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
) :where(.ssa-related__text) {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

:where(
  .ssaa-shell,
  #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
) :where(.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;
}

:where(
  .ssaa-shell,
  #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
) :where(.ssa-aie-card) {
  min-width: 0 !important;
  max-width: 100% !important;
  padding: 12px !important;
}

:where(
  .ssaa-shell,
  #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
) :where(.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;
}

:where(
  .ssaa-shell,
  #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
) :where(.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;
}

@media (max-width: 640px) {
  .ssaa-shell {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 12px !important;
    overflow-x: hidden !important;
  }

  .ssaa-shell :where(*) {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
  }

  .ssaa-shell :where(.grid, .gift-grid, .ssa-related__grid, .ssa-chooser__list, .ssa-aie-grid, [class*="-grid"], [class*="__grid"]) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}
/* SSA dark-neon hard stop for legacy pale anniversary widgets. */
body :is(
  .ssaa-shell.ssaa-shell,
  [class^="ssaa-"][class^="ssaa-"],
  [class*=" ssaa-"][class*=" ssaa-"]
) {
  --ssa-neon-bg: #050b12;
  --ssa-neon-surface: rgba(5, 14, 24, 0.98);
  --ssa-neon-surface-2: rgba(8, 26, 40, 0.96);
  --ssa-neon-border: rgba(45, 211, 218, 0.56);
  --ssa-neon-text: #f4fbff;
  --ssa-neon-muted: #cfefff;
  --ssa-neon-accent: #2ed3da;
  background: linear-gradient(135deg, var(--ssa-neon-bg), #061927) !important;
  border-color: var(--ssa-neon-border) !important;
  color: var(--ssa-neon-text) !important;
}

body :is(
  .ssaa-shell.ssaa-shell,
  [class^="ssaa-"][class^="ssaa-"],
  [class*=" ssaa-"][class*=" ssaa-"]
) :is(section, article, aside, fieldset, details, summary, table, thead, tbody, tfoot, tr, td, th, label, legend, [aria-live], [role="tabpanel"], [role="group"], [class*="card"], [class*="Card"], [class*="panel"], [class*="Panel"], [class*="box"], [class*="Box"], [class*="tile"], [class*="Tile"], [class*="widget"], [class*="Widget"], [class*="result"], [class*="Result"], [class*="summary"], [class*="Summary"], [class*="output"], [class*="Output"], [class*="metric"], [class*="Metric"], [class*="stat"], [class*="Stat"], [class*="notice"], [class*="Notice"], [class*="warning"], [class*="Warning"], [class*="callout"], [class*="Callout"], [class*="option"], [class*="Option"], [class*="question"], [class*="Question"], [class*="field"], [class*="Field"], [class*="group"], [class*="Group"], [class*="item"], [class*="Item"], [class*="row"], [class*="Row"], [class*="form"], [class*="Form"], [class*="input"], [class*="Input"], [class*="history"], [class*="History"], [class*="dashboard"], [class*="Dashboard"], [class*="profile"], [class*="Profile"], [class*="prompt"], [class*="Prompt"], [class*="intro"], [class*="Intro"], [class*="body"], [class*="Body"]) {
  background: linear-gradient(135deg, var(--ssa-neon-surface), var(--ssa-neon-surface-2)) !important;
  border-color: var(--ssa-neon-border) !important;
  box-shadow: 0 0 0 1px rgba(45, 211, 218, 0.16), 0 18px 44px rgba(0, 0, 0, 0.34) !important;
  color: var(--ssa-neon-text) !important;
}

body :is(
  .ssaa-shell.ssaa-shell,
  [class^="ssaa-"][class^="ssaa-"],
  [class*=" ssaa-"][class*=" ssaa-"]
) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select, textarea) {
  background: rgba(3, 10, 18, 0.98) !important;
  border-color: var(--ssa-neon-border) !important;
  color: var(--ssa-neon-text) !important;
  -webkit-text-fill-color: var(--ssa-neon-text) !important;
  box-shadow: inset 0 0 0 1px rgba(45, 211, 218, 0.14) !important;
}

body :is(
  .ssaa-shell.ssaa-shell,
  [class^="ssaa-"][class^="ssaa-"],
  [class*=" ssaa-"][class*=" ssaa-"]
) :is(input[type="checkbox"], input[type="radio"]) {
  accent-color: var(--ssa-neon-accent) !important;
  background-color: rgba(3, 10, 18, 0.98) !important;
  border-color: var(--ssa-neon-border) !important;
}

body :is(
  .ssaa-shell.ssaa-shell,
  [class^="ssaa-"][class^="ssaa-"],
  [class*=" ssaa-"][class*=" ssaa-"]
) input::placeholder,
body :is(
  .ssaa-shell.ssaa-shell,
  [class^="ssaa-"][class^="ssaa-"],
  [class*=" ssaa-"][class*=" ssaa-"]
) {
  --ssa-neon-bg: #050b12;
  --ssa-neon-surface: rgba(5, 14, 24, 0.98);
  --ssa-neon-surface-2: rgba(8, 26, 40, 0.96);
  --ssa-neon-border: rgba(45, 211, 218, 0.56);
  --ssa-neon-text: #f4fbff;
  --ssa-neon-muted: #cfefff;
  --ssa-neon-accent: #2ed3da;
  background: linear-gradient(135deg, var(--ssa-neon-bg), #061927) !important;
  border-color: var(--ssa-neon-border) !important;
  color: var(--ssa-neon-text) !important;
}

body :is(
  .ssaa-shell.ssaa-shell,
  [class^="ssaa-"][class^="ssaa-"],
  [class*=" ssaa-"][class*=" ssaa-"]
) :is(section, article, aside, fieldset, details, summary, table, thead, tbody, tfoot, tr, td, th, label, legend, [aria-live], [role="tabpanel"], [role="group"], [class*="card"], [class*="Card"], [class*="panel"], [class*="Panel"], [class*="box"], [class*="Box"], [class*="tile"], [class*="Tile"], [class*="widget"], [class*="Widget"], [class*="result"], [class*="Result"], [class*="summary"], [class*="Summary"], [class*="output"], [class*="Output"], [class*="metric"], [class*="Metric"], [class*="stat"], [class*="Stat"], [class*="notice"], [class*="Notice"], [class*="warning"], [class*="Warning"], [class*="callout"], [class*="Callout"], [class*="option"], [class*="Option"], [class*="question"], [class*="Question"], [class*="field"], [class*="Field"], [class*="group"], [class*="Group"], [class*="item"], [class*="Item"], [class*="row"], [class*="Row"], [class*="form"], [class*="Form"], [class*="input"], [class*="Input"], [class*="history"], [class*="History"], [class*="dashboard"], [class*="Dashboard"], [class*="profile"], [class*="Profile"], [class*="prompt"], [class*="Prompt"], [class*="intro"], [class*="Intro"], [class*="body"], [class*="Body"]) {
  background: linear-gradient(135deg, var(--ssa-neon-surface), var(--ssa-neon-surface-2)) !important;
  border-color: var(--ssa-neon-border) !important;
  box-shadow: 0 0 0 1px rgba(45, 211, 218, 0.16), 0 18px 44px rgba(0, 0, 0, 0.34) !important;
  color: var(--ssa-neon-text) !important;
}

body :is(
  .ssaa-shell.ssaa-shell,
  [class^="ssaa-"][class^="ssaa-"],
  [class*=" ssaa-"][class*=" ssaa-"]
) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select, textarea) {
  background: rgba(3, 10, 18, 0.98) !important;
  border-color: var(--ssa-neon-border) !important;
  color: var(--ssa-neon-text) !important;
  -webkit-text-fill-color: var(--ssa-neon-text) !important;
  box-shadow: inset 0 0 0 1px rgba(45, 211, 218, 0.14) !important;
}

body :is(
  .ssaa-shell.ssaa-shell,
  [class^="ssaa-"][class^="ssaa-"],
  [class*=" ssaa-"][class*=" ssaa-"]
) :is(input[type="checkbox"], input[type="radio"]) {
  accent-color: var(--ssa-neon-accent) !important;
  background-color: rgba(3, 10, 18, 0.98) !important;
  border-color: var(--ssa-neon-border) !important;
}

body :is(
  .ssaa-shell.ssaa-shell,
  [class^="ssaa-"][class^="ssaa-"],
  [class*=" ssaa-"][class*=" ssaa-"]
) textarea::placeholder {
  color: rgba(207, 239, 255, 0.72) !important;
  -webkit-text-fill-color: rgba(207, 239, 255, 0.72) !important;
}

body :is(
  .ssaa-shell.ssaa-shell,
  [class^="ssaa-"][class^="ssaa-"],
  [class*=" ssaa-"][class*=" ssaa-"]
) :is(button:not(.mf-danger-button), .button:not(.mf-danger-button), .btn:not(.mf-danger-button), [role="button"]:not(.mf-danger-button), input[type="button"], input[type="submit"], input[type="reset"], a.button, a.btn, [class*="-btn"]:not(.mf-danger-button), [class*="-button"]:not(.mf-danger-button), [class*="Button"]:not(.mf-danger-button)) {
  background: linear-gradient(135deg, #33f7ff, #21c6d3 55%, #1498ff) !important;
  border-color: rgba(84, 245, 255, 0.82) !important;
  color: #021018 !important;
  -webkit-text-fill-color: #021018 !important;
  box-shadow: 0 0 18px rgba(45, 211, 218, 0.28), 0 12px 28px rgba(0, 0, 0, 0.32) !important;
  text-shadow: none !important;
}

body :is(
  .ssaa-shell.ssaa-shell,
  [class^="ssaa-"][class^="ssaa-"],
  [class*=" ssaa-"][class*=" ssaa-"]
) :is(h1, h2, h3, h4, h5, h6, p, li, label, span, small, strong, b, em, legend, summary, td, th, output, div) {
  color: var(--ssa-neon-text) !important;
}

body :is(
  .ssaa-shell.ssaa-shell,
  [class^="ssaa-"][class^="ssaa-"],
  [class*=" ssaa-"][class*=" ssaa-"]
) a:not(.button):not(.btn) {
  color: #7ff7ff !important;
}

/* Anniversary final readability pass: some legacy pages use generic button and
   table-of-contents classes that override the shared neon theme late. */
body :is(.ssaa-shell.ssaa-shell, #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(.ssaa-save-result, .ssaa-save-legacy-result, .ssaa-hub-link, .ssaa-account-link, .ssa-aie-button, a.button, a.btn, button, input[type="button"], input[type="submit"]) {
  color: #021018 !important;
  -webkit-text-fill-color: #021018 !important;
  text-shadow: none !important;
}

body :is(.ssaa-shell.ssaa-shell, #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(.toc, .toc *, .table-of-contents, .table-of-contents *, .ssa-toc, .ssa-toc *, [class*="toc"], [class*="toc"] *) {
  color: #f8feff !important;
  -webkit-text-fill-color: #f8feff !important;
}

body :is(.ssaa-shell.ssaa-shell, #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(summary, summary *, details, details *) {
  color: #f8feff !important;
  -webkit-text-fill-color: #f8feff !important;
}

/* Final account CTA guard: logged-out milestone panels use links, not real
   buttons, so keep them visibly button-like even when global link rules win. */
body :is(.ssaa-shell.ssaa-shell, #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(.ssaa-account-save, .ssaa-legacy-save) {
  align-items: flex-start !important;
}

body :is(.ssaa-shell.ssaa-shell, #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(.ssaa-account-save, .ssaa-legacy-save) .ssaa-save-status {
  flex: 1 1 100% !important;
  width: 100% !important;
  color: #f8feff !important;
  -webkit-text-fill-color: #f8feff !important;
}

body :is(.ssaa-shell.ssaa-shell, #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(.ssaa-account-link, .ssaa-save-result, .ssaa-save-legacy-result) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 44px !important;
  min-width: min(100%, 146px) !important;
  max-width: 100% !important;
  padding: 11px 18px !important;
  border: 1px solid rgba(84, 245, 255, 0.82) !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #33f7ff, #21c6d3 55%, #1498ff) !important;
  color: #021018 !important;
  -webkit-text-fill-color: #021018 !important;
  font-weight: 900 !important;
  line-height: 1.12 !important;
  text-align: center !important;
  text-decoration: none !important;
  text-shadow: none !important;
  box-shadow: 0 0 18px rgba(45, 211, 218, 0.28), 0 12px 28px rgba(0, 0, 0, 0.32) !important;
  opacity: 1 !important;
}

body :is(.ssaa-shell.ssaa-shell, #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(.ssaa-save-result:disabled, .ssaa-save-legacy-result:disabled) {
  background: rgba(10, 31, 46, 0.94) !important;
  border-color: rgba(84, 245, 255, 0.46) !important;
  color: #dffbff !important;
  -webkit-text-fill-color: #dffbff !important;
  box-shadow: inset 0 0 0 1px rgba(84, 245, 255, 0.14) !important;
  opacity: 0.88 !important;
}

/* Last-word legacy save-panel guard. The legacy save component can render
   outside the main ssaa shell, so target the panel directly. */
body .ssaa-legacy-save.ssaa-legacy-save,
body .ssaa-account-save.ssaa-account-save {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

body .ssaa-legacy-save.ssaa-legacy-save :is(h3, p, span, strong),
body .ssaa-account-save.ssaa-account-save :is(h3, p, span, strong) {
  color: #f8feff !important;
  -webkit-text-fill-color: #f8feff !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  word-break: normal !important;
}

body .ssaa-legacy-save.ssaa-legacy-save .ssaa-save-status,
body .ssaa-account-save.ssaa-account-save .ssaa-save-status {
  flex: 1 1 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

body .ssaa-legacy-save.ssaa-legacy-save :is(.ssaa-account-link, .ssaa-save-legacy-result),
body .ssaa-account-save.ssaa-account-save :is(.ssaa-account-link, .ssaa-save-result) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 44px !important;
  min-width: min(100%, 146px) !important;
  max-width: 100% !important;
  padding: 11px 18px !important;
  border: 1px solid rgba(84, 245, 255, 0.86) !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #33f7ff, #21c6d3 55%, #1498ff) !important;
  color: #021018 !important;
  -webkit-text-fill-color: #021018 !important;
  font-weight: 900 !important;
  line-height: 1.12 !important;
  text-align: center !important;
  text-decoration: none !important;
  text-shadow: none !important;
  box-shadow: 0 0 18px rgba(45, 211, 218, 0.28), 0 12px 28px rgba(0, 0, 0, 0.32) !important;
  opacity: 1 !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
}

body .ssaa-legacy-save.ssaa-legacy-save :is(.ssaa-save-legacy-result:disabled),
body .ssaa-account-save.ssaa-account-save :is(.ssaa-save-result:disabled) {
  background: rgba(10, 31, 46, 0.94) !important;
  border-color: rgba(84, 245, 255, 0.46) !important;
  color: #dffbff !important;
  -webkit-text-fill-color: #dffbff !important;
  box-shadow: inset 0 0 0 1px rgba(84, 245, 255, 0.14) !important;
  opacity: 0.88 !important;
}

/* Final surface de-pyramid guard for imported anniversary pages. */
body :is(.ssaa-shell.ssaa-shell, #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(section, article, aside, fieldset, details, [class*="card"], [class*="Card"], [class*="panel"], [class*="Panel"], [class*="box"], [class*="Box"])
  :is(section, article, aside, fieldset, details, [class*="card"], [class*="Card"], [class*="panel"], [class*="Panel"], [class*="box"], [class*="Box"]) {
  border-color: rgba(45, 212, 191, 0.22) !important;
  background: rgba(3, 10, 18, 0.46) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
}

body :is(.ssaa-shell.ssaa-shell, #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([class*="grid"], [class*="Grid"], [class*="actions"], [class*="Actions"], .ssaa-related-inline, .ssaa-account-save, .ssaa-legacy-save) {
  box-shadow: none !important;
}

@media (max-width: 700px) {
  body :is(.ssaa-shell.ssaa-shell, #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(section, article, aside, fieldset, details, [class*="card"], [class*="Card"], [class*="panel"], [class*="Panel"], [class*="box"], [class*="Box"]) {
    padding: clamp(10px, 3.5vw, 14px) !important;
  }
}