:root {
  --ink: #282021;
  --muted: #897b7c;
  --rose: #d95d70;
  --rose-dark: #af3e55;
  --cream: #fff8f5;
  --line: #eadfdd;
  --soft: #fff0ef;
  --card: #fffdfc;
  --mint: #6f9b8a;
}

* { box-sizing: border-box; }
html { background: var(--cream); }
body {
  margin: 0;
  background: radial-gradient(circle at 50% 0, #fff 0, transparent 34rem), var(--cream);
  color: var(--ink);
  font-family: "Plus Jakarta Sans", "PingFang SC", "Microsoft YaHei", sans-serif;
}
button { font: inherit; cursor: pointer; }

.app-shell { max-width: 1300px; min-height: 100vh; margin: auto; padding: 0 46px; }
.screen { min-height: 100vh; padding: 64px 0 78px; }

.intro-screen {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: auto;
  overflow: hidden;
  padding: 20px 0 80px;
}

.intro-ambient { position: absolute; z-index: -1; pointer-events: none; filter: blur(1px); }
.intro-ambient--one { top: 120px; left: -190px; width: 430px; height: 430px; border-radius: 50%; background: radial-gradient(circle, #ffd9df 0, #fff5f2 41%, transparent 72%); opacity: .8; }
.intro-ambient--two { top: 310px; right: -250px; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, #f6d6c9 0, #fff8f4 49%, transparent 74%); opacity: .72; }

.intro-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 48px; border-bottom: 1px solid #ecdeda; color: #836f70; font-size: 11px; letter-spacing: .14em; }
.intro-nav > span { color: #9d4557; font-weight: 900; }
.intro-nav p { margin: 0; font-size: 11px; letter-spacing: .04em; }
.intro-nav small { justify-self: end; font-size: 10px; font-weight: 800; letter-spacing: .16em; }

.intro-hero { display: grid; grid-template-columns: minmax(0, 1.07fr) minmax(400px, .93fr); align-items: center; gap: clamp(36px, 7vw, 100px); min-height: 650px; }
.intro-hero__copy { position: relative; z-index: 1; padding: 54px 0 36px; }
.intro-kicker { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; color: #ba5366; font-size: 11px; font-weight: 900; letter-spacing: .16em; }
.intro-kicker i { width: 26px; height: 1px; background: #da93a0; }
.intro-kicker b { color: #967d7e; font-size: 10px; letter-spacing: .08em; }

.eyebrow {
  margin-bottom: 18px;
  color: var(--rose);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .18em;
}

.result-screen h2 {
  margin: 0 0 22px;
  font: 600 clamp(42px, 7vw, 76px) / 1.15 "Noto Serif SC", "Songti SC", serif;
  letter-spacing: -.05em;
}

.intro-screen h1 { max-width: 720px; margin: 0; color: #2c2022; font: 600 clamp(47px, 5.9vw, 79px) / 1.14 "Noto Serif SC", "Songti SC", serif; letter-spacing: -.065em; }
.intro-screen h1 em,
.result-screen h2 em { color: var(--rose); font-style: normal; }
.lead,
.result-intro { max-width: 620px; color: #695b5b; font-size: 17px; line-height: 1.9; }
.intro-screen .lead { max-width: 660px; margin: 25px 0 0; color: #67585a; font-size: 16px; line-height: 1.95; }
.intro-screen .lead strong { color: #ad4b5f; font-weight: 800; }

.intro-pain-points { display: grid; gap: 8px; max-width: 640px; margin: 29px 0 25px; }
.intro-pain-point { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 11px; border: 1px solid rgba(228, 200, 198, .76); border-radius: 13px; background: rgba(255, 253, 251, .72); padding: 10px 14px; box-shadow: 0 8px 22px rgba(151, 85, 91, .035); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.intro-pain-point:hover { border-color: #dda4ad; box-shadow: 0 13px 26px rgba(158, 74, 89, .09); transform: translateX(5px); }
.intro-pain-point > span { grid-row: 1 / 3; padding-top: 3px; color: #d55f73; font-size: 10px; font-weight: 900; letter-spacing: .08em; }
.intro-pain-point p { margin: 0; color: #382c2d; font-size: 14px; font-weight: 800; line-height: 1.55; }
.intro-pain-point i { margin-top: 2px; color: #998788; font-size: 11px; font-style: normal; line-height: 1.55; }

.intro-cta-wrap { display: flex; align-items: center; flex-wrap: wrap; gap: 15px 19px; }
.intro-start-btn { min-width: 270px; padding: 16px 28px; background: linear-gradient(105deg, #df677b, #bd4a61); box-shadow: 0 16px 31px rgba(199, 75, 98, .24); }
.intro-start-btn:hover { background: linear-gradient(105deg, #ce526a, #a93e55); box-shadow: 0 19px 36px rgba(177, 62, 84, .28); }
.intro-cta-wrap p { margin: 0; color: #8d7778; font-size: 12px; line-height: 1.55; }

.intro-orbit { position: relative; z-index: 0; display: grid; min-height: 570px; place-items: center; }
.orbit-shell { position: relative; width: min(100%, 530px); aspect-ratio: 1; border: 1px solid rgba(215, 150, 159, .36); border-radius: 50%; background: radial-gradient(circle at 50% 47%, #fffefd 0 16%, #ffeceb 17%, #fff9f6 43%, rgba(255, 248, 245, .3) 64%, transparent 65%); box-shadow: inset 0 0 0 34px rgba(255, 255, 255, .42), 0 28px 78px rgba(193, 102, 111, .13); }
.orbit-shell::before,
.orbit-shell::after { position: absolute; border: 1px solid rgba(214, 124, 139, .33); border-radius: 50%; content: ""; }
.orbit-shell::before { inset: 9%; transform: rotate(-26deg) scaleX(.72); }
.orbit-shell::after { inset: 19%; transform: rotate(34deg) scaleX(.66); }
.orbit-ring { position: absolute; inset: 3%; border: 1px solid rgba(226, 172, 179, .42); border-radius: 50%; }
.orbit-ring--one { transform: rotate(48deg) scaleX(.72); }
.orbit-ring--two { inset: 27%; border-color: rgba(204, 104, 121, .25); transform: rotate(-28deg) scaleX(1.22); }
.orbit-star { position: absolute; color: #ca6678; font-size: 19px; filter: drop-shadow(0 4px 9px #f0abb4); }
.orbit-star--one { top: 19%; left: 22%; animation: love-float 4.5s ease-in-out infinite; }
.orbit-star--two { right: 20%; bottom: 24%; font-size: 13px; animation: love-float 4.8s ease-in-out .7s infinite reverse; }
.orbit-core { position: absolute; inset: 27%; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid #e5a2ac; border-radius: 50%; background: linear-gradient(145deg, #fffefc, #ffefed); box-shadow: 0 17px 36px rgba(198, 87, 105, .16); color: #b34e62; text-align: center; }
.orbit-core > span { margin-bottom: 12px; font-size: 9px; font-weight: 900; letter-spacing: .18em; line-height: 1.55; }
.orbit-core strong { color: #332526; font: 600 clamp(20px, 2vw, 28px) / 1.25 "Noto Serif SC", "Songti SC", serif; }
.orbit-core em { color: #d75e72; font-style: normal; }
.orbit-core small { max-width: 130px; margin-top: 13px; color: #947d7e; font-size: 10px; line-height: 1.5; }
.orbit-note { position: absolute; z-index: 2; min-width: 128px; border: 1px solid rgba(222, 169, 176, .72); border-radius: 13px; background: rgba(255, 253, 251, .86); box-shadow: 0 14px 28px rgba(150, 79, 91, .12); padding: 10px 12px; backdrop-filter: blur(8px); animation: love-float 5s ease-in-out infinite; }
.orbit-note span { display: block; color: #473435; font-size: 11px; font-weight: 800; line-height: 1.4; }
.orbit-note i { display: block; margin-top: 4px; color: #cf6073; font-size: 10px; font-style: normal; }
.orbit-note--top { top: 5%; right: 9%; }
.orbit-note--left { bottom: 21%; left: -4%; animation-delay: .8s; }
.orbit-note--right { right: -2%; bottom: 12%; animation-delay: 1.4s; }
.orbit-caption { position: absolute; bottom: 2px; left: 50%; display: grid; gap: 5px; width: 280px; transform: translateX(-50%); text-align: center; }
.orbit-caption span { color: #b14e60; font-size: 10px; font-weight: 900; letter-spacing: .15em; }
.orbit-caption b { color: #725c5e; font-size: 12px; font-weight: 600; }

.intro-report-preview { position: relative; margin-top: 34px; overflow: hidden; border: 1px solid #ebd9d6; border-radius: 26px; background: linear-gradient(130deg, rgba(255, 253, 251, .94), rgba(255, 241, 238, .83)); box-shadow: 0 20px 54px rgba(172, 96, 105, .09); padding: clamp(25px, 4vw, 45px); }
.intro-report-preview::after { position: absolute; top: -150px; right: -130px; width: 350px; height: 350px; border-radius: 50%; background: radial-gradient(circle, rgba(232, 159, 166, .24), transparent 69%); content: ""; pointer-events: none; }
.intro-preview-title { position: relative; z-index: 1; max-width: 640px; }
.intro-preview-title > span { color: #c55b6d; font-size: 10px; font-weight: 900; letter-spacing: .17em; }
.intro-preview-title h2 { margin: 10px 0 8px; font: 600 clamp(27px, 3vw, 37px) / 1.25 "Noto Serif SC", "Songti SC", serif; }
.intro-preview-title p { margin: 0; color: #806d6e; font-size: 14px; line-height: 1.8; }
.intro-preview-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 28px; }
.intro-preview-grid article { min-height: 228px; border: 1px solid rgba(235, 216, 213, .92); border-radius: 18px; background: rgba(255, 254, 252, .82); padding: 20px; }
.intro-preview-grid article > span { color: #d1697b; font-size: 10px; font-weight: 900; letter-spacing: .08em; }
.intro-preview-grid h3 { margin: 13px 0 7px; color: #352829; font: 600 21px / 1.4 "Noto Serif SC", "Songti SC", serif; }
.intro-preview-grid p { margin: 0; color: #806e6f; font-size: 12px; line-height: 1.75; }
.preview-radar { position: relative; width: 66px; aspect-ratio: 1; margin: 17px auto 0; clip-path: polygon(50% 0, 92% 25%, 100% 70%, 50% 100%, 0 70%, 8% 25%); background: conic-gradient(from 20deg, #d66377, #f0a1a7, #e37a8b, #d66377); opacity: .86; }
.preview-radar::after { position: absolute; inset: 17%; border: 1px solid rgba(255,255,255,.75); clip-path: inherit; content: ""; }
.preview-bars { display: grid; gap: 7px; margin-top: 24px; }
.preview-bars i { display: block; width: 90%; height: 6px; border-radius: 99px; background: linear-gradient(90deg, #e98392 0 54%, #f4e2e1 54%); }
.preview-bars i:nth-child(2) { width: 74%; background: linear-gradient(90deg, #e98392 0 72%, #f4e2e1 72%); }
.preview-bars i:nth-child(3) { width: 82%; background: linear-gradient(90deg, #e98392 0 39%, #f4e2e1 39%); }
.preview-bars i:nth-child(4) { width: 58%; background: linear-gradient(90deg, #e98392 0 83%, #f4e2e1 83%); }
.preview-levels { display: flex; align-items: center; gap: 8px; margin-top: 24px; }
.preview-levels i { display: grid; width: 27px; height: 27px; place-items: center; border: 1px solid #edc8cc; border-radius: 50%; color: #ad8990; font-size: 11px; font-style: normal; }
.preview-levels .active { border-color: #d55d72; background: #d95d70; box-shadow: 0 6px 13px #d95d7038; color: #fff; font-weight: 900; transform: scale(1.16); }

@keyframes love-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

.primary-btn,
.secondary-btn {
  border-radius: 999px;
  padding: 15px 26px;
  font-weight: 800;
  transition: transform .2s, box-shadow .2s, background .2s;
}

.primary-btn { border: 0; background: var(--rose); box-shadow: 0 10px 24px #d95d7033; color: #fff; }
.primary-btn:hover { background: var(--rose-dark); box-shadow: 0 13px 28px #d95d7045; transform: translateY(-2px); }
.primary-btn span,
.secondary-btn span { margin-left: 8px; font-size: 17px; }
.secondary-btn { border: 1px solid #deb7bc; background: transparent; color: var(--rose-dark); }
.secondary-btn:hover { background: #fff3f2; transform: translateY(-2px); }
.privacy-note { margin-top: 18px; color: var(--muted); font-size: 12px; line-height: 1.8; }
.intro-privacy-note { max-width: 760px; margin: 16px auto 0; text-align: center; }

.quiz-screen { --question-slot-height: 174px; width: 100%; max-width: 720px; margin: auto; }
.quiz-head { display: flex; align-items: center; gap: 20px; margin-bottom: 62px; }
.icon-btn { border: 0; background: transparent; padding: 6px; color: var(--muted); font-size: 25px; }
.icon-btn:hover { color: var(--rose); }
.progress-wrap { flex: 1; }
.progress-label { display: flex; justify-content: space-between; margin-bottom: 9px; color: var(--muted); font-size: 12px; }
.progress { height: 5px; overflow: hidden; border-radius: 99px; background: #f0dfde; }
.progress span { display: block; width: 3%; height: 100%; background: var(--rose); transition: width .35s; }
.question-card { min-height: var(--question-slot-height); }
.question-card .question-kind { margin-bottom: 17px; color: var(--rose); font-size: 11px; font-weight: 800; letter-spacing: .13em; }
.question-card h2 { margin: 0; font: 600 clamp(26px, 4vw, 38px) / 1.45 "Noto Serif SC", "Songti SC", serif; letter-spacing: -.03em; }
.answer-area { display: grid; gap: 12px; margin-top: 45px; }
.answer-btn { border: 1px solid var(--line); border-radius: 15px; background: var(--card); padding: 19px 22px; color: var(--ink); line-height: 1.6; text-align: left; transition: .2s; }
.answer-btn:hover,
.answer-btn.selected { border-color: var(--rose); background: #fff0ef; box-shadow: 0 5px 14px #d95d7012; }
.answer-btn.selected { color: var(--rose-dark); font-weight: 600; }
.answer-btn .mark { float: right; color: var(--rose); font-size: 20px; }
.hint { margin-top: 22px; color: var(--muted); font-size: 12px; text-align: center; }

/* The full report is deliberately one contained sheet, matching the other
   finished assessments instead of leaving individual modules on the page. */
.result-screen,
#result[data-tp-result-container="framed"].tp-result-frame {
  --tp-result-frame-width: 1080px;
  width: min(1080px, 100%) !important;
  min-height: 0 !important;
  margin: clamp(28px, 4vw, 58px) auto !important;
  overflow: hidden !important;
  border: 1px solid rgba(226, 190, 188, .88) !important;
  border-radius: 28px !important;
  background: radial-gradient(circle at 94% 3%, rgba(238, 175, 181, .17), transparent 25rem), linear-gradient(145deg, #fffefd 0%, #fff8f5 100%) !important;
  box-shadow: 0 28px 78px rgba(72, 43, 45, .14) !important;
  padding: clamp(30px, 5vw, 64px) !important;
  isolation: isolate !important;
}

.result-screen h2 { margin-bottom: 15px; font-size: clamp(40px, 6vw, 64px); }
.result-intro { margin: 0 0 31px; font-size: 15px; }

.score-panel {
  display: grid;
  grid-template-columns: 164px minmax(0, 1fr);
  align-items: center;
  gap: 30px;
  margin: 0 0 18px;
  border: 1px solid #f0dfdd;
  border-radius: 24px;
  background: var(--card);
  padding: 24px;
  box-shadow: 0 14px 36px #c77c8510;
}

.grade-badge {
  display: flex;
  min-height: 136px;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  border-radius: 19px;
  background: linear-gradient(145deg, #e77f8f, #c84e65);
  box-shadow: 0 12px 23px #d95d7030;
  color: #fff;
  padding: 17px;
  text-align: center;
}

.grade-badge small { width: 100%; font-size: 11px; letter-spacing: .12em; opacity: .9; }
.grade-badge strong { margin: 7px 2px 0 0; font: 600 54px / 1 "Noto Serif SC", "Songti SC", serif; letter-spacing: -.08em; }
.grade-badge span { align-self: flex-end; margin-bottom: 10px; font-size: 16px; }
.result-grade-caption { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 7px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.result-grade-caption b { color: var(--rose-dark); font-size: 14px; }
.result-grade-caption i { width: 3px; height: 3px; margin: 0 3px; border-radius: 50%; background: #d8afb2; }
.score-copy h3 { margin: 7px 0 8px; font: 600 clamp(23px, 3vw, 30px) / 1.35 "Noto Serif SC", "Songti SC", serif; }
.score-copy p { margin: 0; color: #796c6d; font-size: 14px; line-height: 1.75; }

.affirmation-card {
  border: 1px solid #f2dcdc;
  border-radius: 22px;
  background: linear-gradient(120deg, #fff0ef, #fff9f6);
  padding: 27px 30px;
}

.affirmation-card > span,
.love-note > span,
.profile-card > span { display: block; margin-bottom: 10px; color: var(--rose); font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.affirmation-card h3 { margin: 0; font: 600 24px / 1.45 "Noto Serif SC", "Songti SC", serif; }
.affirmation-card p { margin: 10px 0 0; color: #796c6d; font-size: 13px; line-height: 1.8; }

.result-section { margin-top: 47px; }
.section-title,
.mini-section-title { display: flex; align-items: flex-start; gap: 15px; margin-bottom: 20px; }
.section-title > span,
.mini-section-title > span { padding-top: 5px; color: var(--rose); font-size: 12px; font-weight: 800; }
.section-title h3,
.mini-section-title h3 { margin: 0; font: 600 25px / 1.3 "Noto Serif SC", "Songti SC", serif; }
.section-title p,
.mini-section-title p { margin: 6px 0 0; color: var(--muted); font-size: 13px; line-height: 1.7; }

.relationship-map { display: grid; grid-template-columns: minmax(300px, .9fr) minmax(340px, 1.1fr); gap: 16px; }
.radar-card,
.profile-card { min-height: 360px; border: 1px solid #eee1df; border-radius: 23px; background: var(--card); }
.radar-card { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 18px 20px 22px; }
.radar-card > p { max-width: 345px; margin: -1px 0 0; color: var(--muted); font-size: 12px; line-height: 1.75; text-align: center; }
.radar-chart { width: min(100%, 340px); }
.radar-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.radar-grid { fill: none; stroke: #efdbd8; stroke-width: 1; }
.radar-spoke { stroke: #f3e5e2; stroke-width: 1; }
.radar-value { fill: url(#loveRadarFill); stroke: #d95d70; stroke-width: 2; }
.radar-dot { fill: #d95d70; stroke: #fffdfc; stroke-width: 2; }
.radar-label { fill: #6f5e60; font: 700 10px "PingFang SC", "Microsoft YaHei", sans-serif; }

.profile-card { display: flex; flex-direction: column; justify-content: center; padding: 34px; background: linear-gradient(145deg, #fffdfc, #fff2ef); }
.profile-card h3 { max-width: 420px; margin: 0; font: 600 clamp(25px, 3vw, 32px) / 1.36 "Noto Serif SC", "Songti SC", serif; }
.profile-card > p { max-width: 435px; margin: 16px 0 26px; color: #705f60; font-size: 15px; line-height: 1.9; }
.radar-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; border-top: 1px solid #eedddb; padding-top: 17px; }
.radar-stats span { display: flex; align-items: center; gap: 6px; color: #7b6b6c; font-size: 12px; white-space: nowrap; }
.radar-stats i { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: #df7281; }
.radar-stats b { margin-left: auto; color: var(--rose-dark); font-size: 13px; }

.signal-bars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.signal-bar { border: 1px solid #f0e1df; border-radius: 15px; background: #fffdfc; padding: 14px 15px 13px; }
.signal-bar__meta { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: baseline; gap: 7px; }
.signal-bar__meta span { min-width: 0; color: #514445; font-size: 13px; font-weight: 700; }
.signal-bar__meta small { color: #a08f8f; font-size: 10px; white-space: nowrap; }
.signal-bar__meta b { color: var(--rose-dark); font-size: 14px; }
.signal-bar__track { height: 7px; margin-top: 10px; overflow: hidden; border-radius: 99px; background: #f3e5e3; }
.signal-bar__track i { display: block; height: 100%; min-width: 3px; border-radius: inherit; background: linear-gradient(90deg, #ed98a4, #d95d70); }

.heart-keywords { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.heart-keyword { min-height: 174px; border: 1px solid #eee1df; border-radius: 17px; background: var(--card); padding: 20px 18px; }
.heart-keyword > span { display: block; color: var(--rose); font-size: 11px; font-weight: 800; letter-spacing: .1em; }
.heart-keyword h4 { margin: 15px 0 8px; font: 600 18px / 1.45 "Noto Serif SC", "Songti SC", serif; }
.heart-keyword p { margin: 0; color: #796c6d; font-size: 12px; line-height: 1.75; }

.report-guidance { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 16px; margin-top: 47px; }
.strength-panel,
.practice-panel { border-radius: 22px; padding: 26px; }
.strength-panel { border: 1px solid #f0e1df; background: #fffdfc; }
.practice-panel { background: linear-gradient(135deg, #fdf0ed, #fff9f5); border: 1px solid #f1dcd9; }
.mini-section-title { gap: 12px; margin-bottom: 17px; }
.mini-section-title h3 { font-size: 21px; }
.mini-section-title p { font-size: 12px; }
.strength-cards { display: grid; gap: 10px; }
.strength-cards article { border-left: 2px solid #e98997; background: #fff8f6; padding: 12px 14px; }
.strength-cards span { color: var(--rose); font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.strength-cards h4,
.practice-steps h4 { margin: 6px 0 3px; font: 600 17px / 1.4 "Noto Serif SC", "Songti SC", serif; }
.strength-cards p,
.practice-steps p { margin: 0; color: #796c6d; font-size: 12px; line-height: 1.72; }
.practice-steps { display: grid; gap: 12px; }
.practice-steps article { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; }
.practice-steps article > span { width: 28px; height: 28px; border-radius: 50%; background: #d95d70; color: #fff; font-size: 10px; font-weight: 800; line-height: 28px; text-align: center; }
.practice-steps h4 { margin-top: 1px; }

.love-note { margin-top: 26px; border-left: 3px solid var(--rose); background: #fff8f6; padding: 22px 25px; }
.love-note p { margin: 0; color: #58494a; font: 500 17px / 1.85 "Noto Serif SC", "Songti SC", serif; }
.result-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 30px; }
.result-actions button { min-height: 52px; }
.result-actions #posterBtn { grid-column: 1 / -1; border-radius: 14px; background: linear-gradient(105deg, #dc667b, #a94259); box-shadow: 0 10px 21px #c84e6530; }
.result-actions .secondary-btn { border-radius: 14px; background: #fffdfc; }

/* The shared TestPlanet actions replace the fallback once Nginx injects them.
   Keep their order identical: poster first, then copy and retake below. */
#result .tp-result-actions[data-tp-universal="true"] {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  width: 100% !important;
  margin: 27px 0 10px !important;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
}

#result .tp-result-actions[data-tp-universal="true"] button {
  min-height: 48px !important;
  border: 1px solid #e1b6bc !important;
  border-radius: 12px !important;
  background: #fffdfc !important;
  box-shadow: none !important;
  color: #a64055 !important;
  font-size: 14px !important;
}

#result .tp-result-actions[data-tp-universal="true"] .tp-result-actions__poster {
  grid-column: 1 / -1 !important;
  border: 0 !important;
  background: linear-gradient(105deg, #dc667b, #a94259) !important;
  box-shadow: 0 10px 21px #c84e6530 !important;
  color: #fff !important;
}

[hidden] { display: none !important; }

@media (max-width: 760px) {
  .app-shell { padding: 0 22px; }
  .screen { padding: 48px 0 62px; }
  .intro-screen { padding-top: 15px; }
  .intro-hero { grid-template-columns: 1fr; gap: 5px; min-height: 0; }
  .intro-hero__copy { padding: 46px 0 18px; }
  .intro-orbit { min-height: 485px; }
  .orbit-shell { width: min(100%, 470px); }
  .intro-report-preview { margin-top: 22px; }
  .intro-preview-grid { grid-template-columns: 1fr; }
  .intro-preview-grid article { min-height: 0; }
  .preview-radar { margin-top: 14px; }
  .preview-bars,
  .preview-levels { margin-top: 17px; }
  .relationship-map,
  .report-guidance { grid-template-columns: 1fr; }
  .radar-card,
  .profile-card { min-height: 0; }
  .profile-card { padding: 27px 24px; }
  .signal-bars { grid-template-columns: 1fr; }
  .heart-keywords { grid-template-columns: 1fr; }
  .heart-keyword { min-height: 0; }
  .heart-keyword h4 { margin: 9px 0 5px; }
}

@media (max-width: 600px) {
  .app-shell { padding: 0 20px; }
  .intro-screen { min-height: 100vh; padding-top: 8px; }
  .intro-nav { grid-template-columns: 1fr auto; min-height: 43px; font-size: 10px; }
  .intro-nav p { display: none; }
  .intro-nav small { font-size: 9px; }
  .intro-hero__copy { padding-top: 38px; }
  .intro-kicker { margin-bottom: 16px; font-size: 10px; }
  .intro-screen h1 { font-size: clamp(42px, 12vw, 55px); line-height: 1.16; }
  .intro-screen .lead { margin-top: 20px; font-size: 14px; line-height: 1.85; }
  .intro-pain-points { gap: 7px; margin: 23px 0 21px; }
  .intro-pain-point { padding: 10px 11px; }
  .intro-pain-point p { font-size: 13px; }
  .intro-pain-point i { font-size: 10px; }
  .intro-cta-wrap { display: grid; gap: 10px; }
  .intro-start-btn { width: 100%; min-width: 0; }
  .intro-cta-wrap p { font-size: 11px; text-align: center; }
  .intro-orbit { min-height: 395px; }
  .orbit-shell { width: min(100%, 350px); }
  .orbit-note { min-width: 101px; padding: 8px 9px; }
  .orbit-note span { font-size: 10px; }
  .orbit-note i { font-size: 9px; }
  .orbit-note--top { top: 3%; right: 0; }
  .orbit-note--left { bottom: 20%; left: -2%; }
  .orbit-note--right { right: -1%; bottom: 8%; }
  .orbit-caption { bottom: -1px; width: 250px; }
  .orbit-caption b { font-size: 11px; }
  .intro-report-preview { border-radius: 20px; padding: 23px 18px; }
  .intro-preview-title h2 { font-size: 28px; }
  .intro-preview-title p { font-size: 13px; }
  .intro-preview-grid { gap: 9px; margin-top: 21px; }
  .intro-preview-grid article { padding: 17px; }
  .intro-preview-grid h3 { margin-top: 10px; font-size: 19px; }
  .intro-privacy-note { margin-top: 15px; font-size: 11px; }
  .quiz-head { margin-bottom: 42px; }
  .question-card h2 { font-size: 27px; }
  .answer-area { margin-top: 32px; }
  .result-screen h2 { font-size: 42px; }
  .score-panel { grid-template-columns: 104px minmax(0, 1fr); gap: 16px; padding: 17px; }
  .grade-badge { min-height: 104px; padding: 11px; }
  .grade-badge strong { font-size: 44px; }
  .grade-badge span { margin-bottom: 8px; font-size: 14px; }
  .score-copy h3 { font-size: 20px; }
  .score-copy p { font-size: 12px; }
  .affirmation-card { padding: 23px 21px; }
  .affirmation-card h3 { font-size: 20px; }
  .section-title h3 { font-size: 21px; }
  .section-title p { font-size: 12px; }
  .radar-stats { gap: 7px; }
  .radar-stats span { font-size: 11px; }
  .signal-bar { padding: 13px; }
  .signal-bar__meta small { display: none; }
  .strength-panel,
  .practice-panel { padding: 22px 19px; }
  .love-note { padding: 20px; }
  .love-note p { font-size: 15px; }
  .result-actions { gap: 9px; }
  .result-actions button { min-height: 49px; padding: 12px 10px; font-size: 13px; }
  #result .tp-result-actions[data-tp-universal="true"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; margin-top: 23px !important; }
  #result .tp-result-actions[data-tp-universal="true"] button { min-height: 47px !important; }
}

/* Narrow phones wrap the longest of the 37 prompts to four lines.  Keeping
   that room reserved stops the answer deck jumping between questions. */
@media (max-width: 380px) {
  .quiz-screen { --question-slot-height: 216px; }
}

@media (prefers-reduced-motion: reduce) {
  .orbit-star,
  .orbit-note { animation: none; }
}