.compatibility-page-body {
  --compat-ink: #fff7fa;
  --compat-copy: rgba(218, 197, 207, .72);
  --compat-coral: #d985a4;
  --compat-pink: #dba0b6;
  --compat-peach: #b7a2c8;
  --compat-mint: #67c8a4;
  --compat-paper: #171219;
  background:
    radial-gradient(circle at 75% 4%, rgba(236, 85, 121, .16), transparent 28rem),
    radial-gradient(circle at 17% 33%, rgba(255, 182, 130, .1), transparent 25rem),
    #09080d;
}

.compatibility-app-shell { width: min(980px, 100%); margin: 0 auto; }
.compatibility-back { display: inline-flex; align-items: center; justify-content: center; width: fit-content; min-height: 35px; padding: 0 12px; border: 1px solid rgba(219, 160, 182, .2); border-radius: 11px; color: #e4b7c8; background: rgba(255, 255, 255, .045); font-size: .72rem; font-weight: 800; text-decoration: none; box-shadow: 0 7px 18px rgba(0, 0, 0, .12); }
.compatibility-back:hover { color: #21131b; background: #dba0b6; border-color: #dba0b6; }
.compatibility-root { min-height: 0; }

.compatibility-panel {
  display: grid;
  gap: 14px;
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid rgba(219, 160, 182, .14);
  border-radius: 27px;
  color: var(--compat-ink);
  background:
    radial-gradient(circle at 95% 0, rgba(142, 84, 117, .13), transparent 25rem),
    linear-gradient(145deg, #281923, #13131c 68%, #18131b);
  box-shadow: 0 24px 64px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .025);
}
.compatibility-panel h1,
.compatibility-panel h2,
.compatibility-panel h3,
.compatibility-panel p { margin: 0; }
.compatibility-eyebrow { color: #dc9ab2; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.compatibility-title { max-width: 780px; font-size: clamp(2.45rem, 5vw, 4rem); line-height: .98; letter-spacing: -.055em; }
.compatibility-lead { max-width: 780px; color: var(--compat-copy); font-size: clamp(.92rem, 1.6vw, 1.03rem); line-height: 1.52; }
.compatibility-meta { display: flex; flex-wrap: wrap; gap: 5px 13px; color: rgba(205, 183, 194, .7); font-size: .72rem; font-weight: 800; }
.compatibility-meta span + span::before { content: '•'; margin-right: 13px; color: var(--compat-coral); }

.profile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.participant-profile { display: grid; gap: 9px; padding: 14px; border: 1px solid rgba(219, 160, 182, .13); border-radius: 19px; background: rgba(255, 255, 255, .035); box-shadow: 0 10px 26px rgba(0, 0, 0, .12); }
.participant-profile__head { display: flex; align-items: center; gap: 10px; }
.participant-profile__number { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #fff; background: linear-gradient(135deg, var(--compat-coral), #d83d72); font-size: .8rem; font-weight: 800; }
.participant-profile__head strong { display: block; font-size: .92rem; }
.participant-profile__head span:last-child { color: rgba(194, 170, 181, .66); font-size: .7rem; }
.profile-field { display: grid; gap: 6px; }
.profile-field > span,
.profile-field legend { color: #d7bdc8; font-size: .7rem; font-weight: 800; }
.profile-fieldset { margin: 0; padding: 0; border: 0; }
.profile-name-wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px; padding: 4px; border: 1px solid rgba(219, 160, 182, .18); border-radius: 13px; background: rgba(7, 8, 13, .56); transition: border-color .2s ease, box-shadow .2s ease; }
.profile-name-wrap:focus-within,
.profile-age-wrap:focus-within { border-color: rgba(219, 160, 182, .66); box-shadow: 0 0 0 3px rgba(217, 133, 164, .1); }
.profile-name-wrap input,
.profile-age-input { width: 100%; min-height: 37px; border: 0; outline: 0; color: var(--compat-ink); background: transparent; font: inherit; font-size: .87rem; }
.profile-name-wrap input,
.profile-age-input { padding: 0 9px; }
.profile-name-wrap input::placeholder,
.profile-age-input::placeholder { color: #806b76; }
.profile-name-done,
.profile-age-done { min-width: 76px; border: 0; border-radius: 10px; color: #b99ba8; background: rgba(217, 133, 164, .1); font: inherit; font-size: .69rem; font-weight: 800; cursor: pointer; transition: .2s ease; }
.profile-name-done.is-ready,
.profile-age-done.is-ready { color: #24151d; background: #dba0b6; }
.profile-name-done:focus-visible,
.profile-age-done:focus-visible { outline: 2px solid #e3a9bd; outline-offset: 2px; }
.profile-age-wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 7px; align-items: center; min-height: 45px; padding: 4px; border: 1px solid rgba(219, 160, 182, .18); border-radius: 13px; background: rgba(7, 8, 13, .56); transition: border-color .2s ease, box-shadow .2s ease; }
.profile-age-input { min-width: 0; }
.profile-age-wrap .profile-age-unit { color: #a88a98; font-size: .72rem; font-weight: 700; }
.gender-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.gender-option { position: relative; }
.gender-option input { position: absolute; opacity: 0; pointer-events: none; }
.gender-option span { display: grid; place-items: center; min-height: 37px; padding: 6px; border: 1px solid rgba(219, 160, 182, .18); border-radius: 11px; color: #cbb0bc; background: rgba(7, 8, 13, .48); font-size: .67rem; font-weight: 800; text-align: center; cursor: pointer; transition: .18s ease; }
.gender-option input:checked + span { border-color: #dba0b6; color: #26161e; background: #dba0b6; box-shadow: 0 7px 16px rgba(133, 72, 99, .22); }
.gender-option input:focus-visible + span { outline: 2px solid #e3a9bd; outline-offset: 2px; }
.compatibility-note { display: flex; gap: 9px; padding: 10px 12px; border-radius: 13px; color: #cbb0bc; background: rgba(217, 133, 164, .08); font-size: .72rem; line-height: 1.42; }
.compatibility-note i { display: grid; place-items: center; flex: 0 0 20px; width: 20px; height: 20px; border-radius: 50%; color: #fff; background: var(--compat-coral); font-style: normal; font-size: .68rem; font-weight: 800; }
.compatibility-intro-footer { display: flex; justify-content: flex-end; }
.compatibility-intro-footer .compatibility-primary { min-width: 205px; }
.compatibility-primary,
.compatibility-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 18px; min-height: 49px; padding: 0 20px; border: 0; border-radius: 13px; font: inherit; font-size: .86rem; font-weight: 800; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease; }
.compatibility-primary { color: #24151d; background: linear-gradient(135deg, #dca2b7, #bc829e); box-shadow: 0 10px 22px rgba(88, 40, 64, .28), inset 0 1px 0 rgba(255, 255, 255, .28); }
.compatibility-primary__mark { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24); transition: transform .22s ease, background .22s ease; }
.compatibility-primary__mark svg { display: block; width: 17px; height: 17px; overflow: visible; fill: currentColor; }
.compatibility-primary__spark { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.compatibility-primary:hover .compatibility-primary__mark { transform: scale(1.08) rotate(-5deg); background: rgba(255, 255, 255, .26); }
.compatibility-secondary { color: #d7bec9; background: rgba(255, 255, 255, .055); box-shadow: inset 0 0 0 1px rgba(219, 160, 182, .16); }
.compatibility-primary:hover,
.compatibility-secondary:hover { transform: translateY(-2px); }
.compatibility-primary:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.compatibility-actions { display: flex; gap: 10px; justify-content: space-between; align-items: center; }
.compatibility-actions .compatibility-primary { min-width: 205px; }
.compatibility-error { min-height: 18px; color: #ee9eb6; font-size: .72rem; font-weight: 700; }
.intro-panel .compatibility-error:empty { display: none; }

.question-panel { width: min(900px, 100%); margin: 0 auto; align-content: start; }
.question-progress { display: grid; gap: 8px; }
.question-progress__copy { display: flex; justify-content: space-between; gap: 16px; color: rgba(205, 181, 192, .72); font-size: .72rem; font-weight: 800; }
.question-progress__track { height: 6px; overflow: hidden; border-radius: 999px; background: rgba(219, 160, 182, .13); }
.question-progress__track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--compat-coral), var(--compat-peach)); transition: width .3s ease; }
.question-person { display: flex; gap: 8px; align-items: center; width: fit-content; color: #ceb3bf; font-size: .72rem; font-weight: 800; }
.question-person i { width: 8px; height: 8px; border-radius: 50%; background: var(--compat-mint); }
.question-dimension { display: flex; align-items: center; gap: 8px; color: #df9db5; font-size: .69rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.question-dimension span { font-size: 1.05rem; }
.question-copy { display: grid; gap: 11px; padding-top: 2px; }
.question-copy h2 { max-width: 780px; font-size: clamp(1.65rem, 4vw, 2.85rem); line-height: 1.12; letter-spacing: -.035em; }
.question-copy p { color: rgba(202, 180, 190, .7); font-size: .78rem; }
.answer-scale { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.answer-option { min-height: 82px; padding: 10px 7px; border: 1px solid rgba(219, 160, 182, .16); border-radius: 14px; color: #cdb3bf; background: rgba(255, 255, 255, .04); font: inherit; font-size: .68rem; font-weight: 800; line-height: 1.28; cursor: pointer; transition: .16s ease; }
.answer-option strong { display: grid; place-items: center; width: 28px; height: 28px; margin: 0 auto 7px; border-radius: 50%; color: #c8aab7; background: rgba(219, 160, 182, .1); font-size: .76rem; }
.answer-option:hover,
.answer-option.is-selected { border-color: #dba0b6; color: #fff7fa; background: rgba(217, 133, 164, .16); transform: translateY(-2px); }
.answer-option.is-selected strong { color: #25151d; background: #dba0b6; }

.handoff-panel { width: min(760px, 100%); min-height: 0; margin: 0 auto; padding-block: clamp(42px, 7vw, 70px); place-items: center; align-content: center; text-align: center; }
.handoff-panel .compatibility-back { justify-self: start; }
.handoff-visual { position: relative; display: grid; place-items: center; width: 120px; height: 100px; margin-bottom: 2px; }
.handoff-visual::before,
.handoff-visual::after { content: ''; position: absolute; width: 74px; height: 74px; border: 2px solid rgba(236, 85, 121, .45); border-radius: 50%; transform: translateX(-20px); }
.handoff-visual::after { border-color: rgba(255, 182, 130, .75); transform: translateX(20px); }
.handoff-visual span { position: relative; z-index: 1; font-size: 2.1rem; }
.handoff-panel h2 { font-size: clamp(1.9rem, 4.5vw, 3.1rem); letter-spacing: -.045em; }
.handoff-panel > p { max-width: 560px; color: var(--compat-copy); line-height: 1.55; }
.handoff-privacy { max-width: 540px; padding: 11px 13px; border: 1px solid rgba(103, 200, 164, .13); border-radius: 13px; background: rgba(103, 200, 164, .07); color: #9ed8c2; font-size: .72rem; line-height: 1.45; }

.result-panel { gap: 24px; }
.result-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; padding-bottom: 22px; border-bottom: 1px solid rgba(219, 160, 182, .14); }
.result-hero__copy { display: grid; gap: 11px; }
.result-hero h1 { max-width: 680px; font-size: clamp(2rem, 4.6vw, 3.55rem); line-height: 1.02; letter-spacing: -.05em; }
.result-hero p { max-width: 700px; color: var(--compat-copy); line-height: 1.55; }
.result-score { position: relative; display: grid; place-items: center; width: 150px; height: 150px; border-radius: 50%; background: conic-gradient(#dba0b6 var(--score), #392832 0); }
.result-score::before { content: ''; position: absolute; inset: 9px; border-radius: 50%; background: #19141b; }
.result-score strong,
.result-score span { position: relative; z-index: 1; }
.result-score strong { font-size: 2.65rem; letter-spacing: -.05em; }
.result-score span { margin-top: -29px; color: #b99fac; font-size: .64rem; font-weight: 800; text-transform: uppercase; }
.result-summary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.result-summary-card { display: grid; gap: 6px; padding: 15px; border: 1px solid rgba(219, 160, 182, .1); border-radius: 15px; background: rgba(255, 255, 255, .035); }
.result-summary-card span { color: #bda4af; font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.result-summary-card strong { font-size: .9rem; line-height: 1.32; }
.result-section { display: grid; gap: 13px; }
.result-section__head { display: grid; gap: 5px; }
.result-section__head h2 { font-size: clamp(1.35rem, 2.7vw, 1.9rem); }
.result-section__head p { color: rgba(205, 182, 193, .68); font-size: .78rem; line-height: 1.5; }
.dimension-list { display: grid; gap: 8px; }
.dimension-row { display: grid; grid-template-columns: minmax(170px, .45fr) minmax(200px, 1fr) 48px; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .035); }
.dimension-row__label { display: flex; align-items: center; gap: 8px; font-size: .76rem; font-weight: 800; }
.dimension-row__label span { font-size: 1rem; }
.dimension-bar { height: 7px; overflow: hidden; border-radius: 999px; background: rgba(219, 160, 182, .12); }
.dimension-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--compat-coral), var(--compat-peach)); }
.dimension-row > strong { text-align: right; }
.report-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.report-card { display: grid; gap: 8px; padding: 17px; border: 1px solid rgba(219, 160, 182, .09); border-radius: 16px; background: rgba(255, 255, 255, .035); }
.report-card__title { display: flex; align-items: center; gap: 8px; }
.report-card__title span { font-size: 1.18rem; }
.report-card h3 { font-size: .92rem; }
.report-card p { color: #c7aebb; font-size: .77rem; line-height: 1.53; }
.difference-list,
.steps-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.difference-card { display: grid; gap: 8px; padding: 14px; border: 1px solid rgba(219, 160, 182, .09); border-radius: 15px; background: rgba(255, 255, 255, .035); }
.difference-card > strong { font-size: .8rem; line-height: 1.42; }
.difference-answers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
.difference-answers span { padding: 9px 10px; border-radius: 11px; background: rgba(217, 133, 164, .08); color: #cdb4bf; font-size: .69rem; line-height: 1.32; }
.difference-answers b { display: block; margin-bottom: 3px; color: #e0a0b7; }
.steps-list { counter-reset: result-step; }
.steps-list li { counter-increment: result-step; display: grid; grid-template-columns: auto 1fr; gap: 11px; align-items: start; padding: 12px 13px; border: 1px solid rgba(219, 160, 182, .09); border-radius: 14px; background: rgba(255, 255, 255, .035); color: #cdb4bf; font-size: .78rem; line-height: 1.5; }
.steps-list li::before { content: counter(result-step); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: #25151d; background: #dba0b6; font-size: .74rem; font-weight: 800; }
.life-stage-card { display: grid; grid-template-columns: auto 1fr; gap: 12px; padding: 15px; border-radius: 15px; background: linear-gradient(135deg, rgba(83, 189, 150, .12), rgba(255, 182, 130, .14)); }
.life-stage-card > span { font-size: 1.5rem; }
.life-stage-card strong { display: block; margin-bottom: 5px; }
.life-stage-card p { color: #c8b1bb; font-size: .76rem; line-height: 1.52; }
.result-disclaimer { color: #a98f9b; font-size: .67rem; line-height: 1.48; }
.result-premium-lock {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 17px;
  border: 1px solid rgba(226, 175, 199, .16);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(93, 49, 71, .28), rgba(255, 255, 255, .035));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
}
.result-premium-lock__icon { display: grid; width: 43px; height: 43px; place-items: center; border-radius: 14px; color: #291720; background: linear-gradient(135deg, #e2adc1, #b98ba8); font-size: 1.15rem; box-shadow: 0 9px 20px rgba(76, 34, 54, .25); }
.result-premium-lock > div:nth-child(2) { display: grid; gap: 4px; }
.result-premium-lock span { color: #dda3b9; font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }
.result-premium-lock h2 { font-size: 1.03rem; line-height: 1.25; }
.result-premium-lock p { max-width: 610px; color: #c4aab6; font-size: .73rem; line-height: 1.45; }
.result-premium-lock .compatibility-primary { min-height: 43px; padding-inline: 16px; font-size: .74rem; white-space: nowrap; }
.result-saved-note { padding: 10px 12px; border-radius: 12px; color: #9fd8c2; background: rgba(103, 200, 164, .07); font-size: .7rem; line-height: 1.45; }
.result-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.result-actions a { text-decoration: none; }

:root[data-theme='light'] .compatibility-page-body { background: radial-gradient(circle at 74% 5%, rgba(142, 84, 117, .12), transparent 28rem), #09080d; }

@media (max-width: 760px) {
  .compatibility-panel { gap: 16px; padding: 22px 16px; border-radius: 22px; }
  .compatibility-title { font-size: clamp(2.3rem, 11vw, 3.25rem); }
  .compatibility-lead { font-size: .86rem; }
  .compatibility-meta { gap: 4px 10px; font-size: .66rem; }
  .compatibility-meta span + span::before { margin-right: 10px; }
  .profile-grid { grid-template-columns: 1fr; gap: 10px; }
  .participant-profile { padding: 15px; }
  .compatibility-intro-footer .compatibility-primary { width: 100%; }
  .answer-scale { grid-template-columns: 1fr; gap: 6px; }
  .answer-option { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; min-height: 51px; padding: 8px 11px; text-align: left; }
  .answer-option strong { width: 30px; height: 30px; margin: 0; }
  .compatibility-actions { align-items: stretch; }
  .compatibility-actions .compatibility-primary { min-width: 0; }
  .result-hero { grid-template-columns: 1fr; }
  .result-score { width: 132px; height: 132px; justify-self: center; grid-row: 1; }
  .result-summary-grid { grid-template-columns: 1fr; }
  .dimension-row { grid-template-columns: minmax(0, 1fr) 43px; gap: 8px; }
  .dimension-bar { grid-column: 1 / -1; grid-row: 2; }
  .report-grid { grid-template-columns: 1fr; }
  .difference-answers { grid-template-columns: 1fr; }
  .result-premium-lock { grid-template-columns: auto minmax(0, 1fr); padding: 15px; }
  .result-premium-lock .compatibility-primary { grid-column: 1 / -1; width: 100%; }
  .result-actions > * { flex: 1 1 180px; }
}

@media (max-width: 430px) {
  .compatibility-panel { padding: 20px 14px; }
  .compatibility-meta span { width: auto; }
  .gender-options { gap: 5px; }
  .gender-option span { min-height: 38px; font-size: .63rem; }
  .profile-name-done,
  .profile-age-done { min-width: 70px; }
  .compatibility-note { font-size: .68rem; }
  .compatibility-actions { flex-direction: column-reverse; }
  .compatibility-actions .compatibility-primary,
  .compatibility-actions .compatibility-secondary { width: 100%; }
}