:root {
  --purple-0: #fcf9fd;
  --purple-1: #f3edf5;
  --purple-2: #e8ddec;
  --purple-3: #745183;
  --purple-4: #472056;
  --purple-5: #27102f;
  --care-gold: #ddb978;
  --care-gold-light: #f2d59e;
}

html {
  background: #eae4ed;
}

body.care-space-purple {
  --cream-0: var(--purple-0);
  --cream-1: var(--purple-1);
  --cream-2: var(--purple-2);
  --gold-1: #ead2a8;
  --gold-2: var(--care-gold);
  --gold-3: #a4763d;
  --coffee-1: #312338;
  --coffee-2: #6f6175;
  --coffee-3: #938797;
  --line: rgba(92, 55, 106, .13);
  --shadow: 0 18px 48px rgba(48, 25, 57, .11);
  color: var(--coffee-1);
  background:
    radial-gradient(circle at 12% 14%, rgba(104, 55, 128, .12), transparent 25rem),
    radial-gradient(circle at 88% 70%, rgba(91, 42, 113, .09), transparent 26rem),
    #eae4ed;
}

body.care-space-purple button:focus-visible,
body.care-space-purple input:focus-visible,
body.care-space-purple textarea:focus-visible {
  outline-color: rgba(220, 183, 119, .85);
}

.intro-screen,
.question-screen,
.loading-screen,
.result-screen {
  width: min(100%, 430px) !important;
  min-height: 100svh;
  margin: 0 auto;
  border-radius: 0 !important;
  box-shadow: 0 0 44px rgba(42, 25, 49, .11) !important;
}

/* 封面：沿用护理空间紫金视觉，不改变问卷启动逻辑。 */
.intro-screen.intro-cover-screen {
  background: #1e0929;
}

.intro-cover-button {
  position: relative;
  isolation: isolate;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: max(34px, env(safe-area-inset-top)) 30px max(30px, env(safe-area-inset-bottom));
  overflow: hidden;
  color: #fffaf6;
  background:
    linear-gradient(180deg, rgba(12, 3, 20, .08), rgba(17, 4, 26, .86)),
    url("/hero-purple-silk.png") 54% 50% / cover no-repeat;
  text-align: left;
}

.intro-cover-button::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 18px;
  border: 1px solid rgba(232, 198, 139, .2);
  border-radius: 20px;
  box-shadow: inset 0 0 40px rgba(255, 255, 255, .025);
}

.intro-cover-button::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 30px;
  right: 30px;
  bottom: 126px;
  height: 1px;
  background: linear-gradient(90deg, rgba(231, 196, 135, .76), rgba(231, 196, 135, 0));
}

.care-cover-brand {
  font-family: var(--font-song);
  font-size: 24px;
  font-weight: 650;
  letter-spacing: .18em;
  text-shadow: 0 3px 18px rgba(0, 0, 0, .3);
}

.care-cover-kicker {
  margin-top: auto;
  color: rgba(240, 209, 155, .82);
  font: 9px/1.5 Georgia, serif;
  letter-spacing: .28em;
}

.care-cover-title {
  max-width: 8em;
  margin-top: 16px;
  font-family: var(--font-song);
  font-size: clamp(36px, 10vw, 46px);
  font-weight: 500;
  line-height: 1.34;
  letter-spacing: .04em;
  text-wrap: balance;
}

.care-cover-copy {
  margin-top: 16px;
  color: rgba(255, 247, 251, .64);
  font-family: var(--font-song);
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: .06em;
}

.care-cover-action {
  position: relative;
  min-width: 152px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 34px;
  padding: 0 40px 0 20px;
  border: 1px solid rgba(232, 198, 139, .52);
  border-radius: 24px;
  color: #f1cd91;
  background: rgba(255, 255, 255, .055);
  box-shadow: 0 10px 24px rgba(7, 0, 13, .18), inset 0 0 18px rgba(255, 255, 255, .025);
  font-size: 13px;
  letter-spacing: .08em;
  backdrop-filter: blur(10px);
}

.care-cover-action::after {
  content: "";
  position: absolute;
  right: 19px;
  width: 7px;
  height: 7px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}

.care-cover-foot {
  width: 100%;
  margin-top: 58px;
  color: rgba(255, 246, 250, .38);
  font-size: 10px;
  line-height: 1.6;
  letter-spacing: .04em;
}

/* 题目页：顶部保持沉浸，答题区使用珍珠白呼吸空间。 */
.question-screen {
  background:
    linear-gradient(rgba(252, 249, 253, .96), rgba(245, 239, 247, .98)),
    url("/hero-purple-silk.png") 72% 78% / 720px auto no-repeat;
}

.survey-header {
  min-height: 74px;
  padding-top: max(10px, env(safe-area-inset-top));
  color: #fffaf6;
  background:
    linear-gradient(115deg, rgba(32, 10, 43, .94), rgba(70, 28, 86, .88)),
    url("/hero-purple-silk.png") 55% 48% / cover no-repeat;
  box-shadow: 0 10px 28px rgba(31, 12, 40, .18);
}

.back-button {
  color: #f0d09b;
}

.header-title {
  color: #fffaf7;
  font-weight: 550;
}

.progress-count {
  color: rgba(255, 246, 251, .58);
}

.progress-track {
  height: 2px;
  background: #24102c;
}

.progress-fill {
  background: linear-gradient(90deg, #bd8d50, #f1d59d 60%, #c69555);
  box-shadow: 0 0 10px rgba(237, 203, 145, .32);
}

.question-stage {
  padding-top: 34px;
}

.question-meta {
  color: #a37743;
  letter-spacing: .14em;
}

.question-stage h2 {
  color: #302238;
  font-weight: 600;
}

.question-hint {
  color: #8b7f8f;
}

.option-button {
  min-height: 58px;
  border-color: rgba(84, 48, 97, .12);
  border-radius: 12px;
  color: #49384f;
  background: rgba(255, 254, 255, .84);
  box-shadow: 0 7px 20px rgba(46, 27, 52, .045);
  backdrop-filter: blur(8px);
}

.option-button:hover {
  border-color: rgba(161, 116, 70, .38);
}

.option-button[aria-checked="true"] {
  border-color: rgba(211, 169, 99, .58);
  background:
    linear-gradient(100deg, rgba(83, 38, 102, .10), rgba(255, 254, 255, .95));
  box-shadow: inset 3px 0 #d1aa69, 0 9px 24px rgba(63, 31, 74, .07);
}

.option-state {
  border-color: rgba(95, 61, 106, .32);
}

.option-button[aria-checked="true"] .option-state {
  border-color: #d6b06d;
  background: #d6b06d;
  box-shadow: 0 0 0 3px rgba(214, 176, 109, .13);
}

.other-input {
  border-bottom-color: rgba(142, 96, 158, .42);
  background: rgba(238, 228, 241, .55);
}

.question-footer {
  background: linear-gradient(180deg, rgba(252,249,253,0), rgba(252,249,253,.96) 28%, #fcf9fd 56%);
}

.primary-button {
  border-color: rgba(226, 190, 129, .4);
  color: #fffaf6;
  background:
    linear-gradient(105deg, rgba(255,255,255,.08), transparent 32%),
    linear-gradient(105deg, #32133f, #613071 55%, #40204d);
  box-shadow: 0 13px 30px rgba(42, 16, 52, .22), inset 0 1px rgba(255,255,255,.16);
}

.primary-button:active {
  box-shadow: 0 8px 18px rgba(42, 16, 52, .17);
}

/* 过渡页与结果页。 */
.loading-screen {
  color: #33243a;
  background:
    radial-gradient(circle at 50% 42%, rgba(122, 73, 143, .13), transparent 12rem),
    linear-gradient(160deg, #fcf9fd, #eee5f1);
}

.loading-mark {
  border-color: rgba(183, 139, 84, .34);
  box-shadow: 0 0 34px rgba(109, 58, 130, .09);
}

.loading-mark::before,
.loading-mark::after {
  border-color: rgba(146, 91, 166, .22);
}

.loading-mark::after {
  background: rgba(216, 180, 119, .32);
}

.result-screen {
  background:
    linear-gradient(rgba(252, 249, 253, .96), rgba(244, 238, 246, .98)),
    url("/hero-purple-silk.png") 76% 82% / 760px auto no-repeat;
}

.result-hero {
  padding-top: max(24px, calc(env(safe-area-inset-top) + 14px));
}

.result-eyebrow,
.consult-kicker {
  color: #a87940;
}

.result-back {
  color: #785e7f;
}

.result-conclusion {
  border-color: rgba(232, 198, 139, .22);
  border-radius: 16px;
  background:
    radial-gradient(circle at 88% 10%, rgba(226, 187, 122, .12), transparent 38%),
    linear-gradient(135deg, rgba(36, 11, 48, .97), rgba(83, 36, 101, .91)),
    url("/hero-purple-silk.png") 55% 52% / cover no-repeat;
  box-shadow: 0 16px 38px rgba(38, 14, 49, .22), inset 0 0 0 1px rgba(255,255,255,.03);
}

.result-salutation {
  color: rgba(255, 247, 251, .68);
}

.result-hero h1 {
  color: #fffaf6;
  text-shadow: 0 2px 12px rgba(8, 1, 13, .18);
}

.result-section {
  border-color: rgba(89, 54, 101, .13);
}

.result-index {
  color: rgba(169, 119, 61, .9);
}

.result-index::after {
  background: rgba(206, 166, 97, .46);
}

.result-section h2 {
  color: #34243b;
}

.result-section p {
  color: #6d6171;
}

.result-cognition {
  border-color: rgba(137, 87, 153, .18);
  background: linear-gradient(125deg, rgba(235, 225, 239, .78), rgba(255,255,255,.5));
}

.result-cognition::before {
  color: rgba(127, 76, 145, .22);
}

.result-cognition-statement {
  color: #38243f;
}

.result-cognition-explanation {
  color: #756579;
}

.care-complete-panel {
  border-color: rgba(197, 155, 91, .26);
  border-radius: 14px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.78), rgba(231, 219, 235, .5));
  box-shadow: 0 13px 30px rgba(53, 30, 60, .07);
}

.care-complete-panel .text-button {
  min-width: 166px;
  margin-top: 2px;
  border: 1px solid rgba(100, 54, 117, .24);
  border-radius: 24px;
  color: #653a74;
  background: rgba(255, 255, 255, .58);
}

.result-disclaimer {
  color: #948799;
}

.toast {
  border-color: rgba(228, 192, 131, .24);
  color: #fffaf6;
  background: rgba(42, 16, 53, .96);
  box-shadow: 0 13px 36px rgba(28, 8, 37, .24);
}

@media (min-width: 720px) {
  body.care-space-purple {
    padding: 24px 0;
  }

  .intro-screen,
  .question-screen,
  .loading-screen,
  .result-screen {
    min-height: calc(100vh - 48px);
    border-radius: 28px !important;
  }
}

@media (max-width: 389px) {
  .intro-cover-button {
    padding-inline: 25px;
  }

  .care-cover-title {
    font-size: 35px;
  }

  .question-stage {
    padding-inline: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .loading-mark::before,
  .loading-mark::after {
    animation: none;
  }
}