.page {
  --tarot-enter-duration: 1200ms;
  --tarot-return-duration: 1050ms;
  --tarot-switch-duration: 820ms;
  --tarot-switch-half-duration: 410ms;
  --tarot-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --tarot-gold: #eee4d2;
  --tarot-warning: #c3a080;
}

.page.is-entering-tarot .background,
.page.is-tarot .background {
  transform: scale(1.018);
  filter: saturate(0.72) sepia(0.12) brightness(0.8) contrast(0.96) blur(6px);
  transition-duration: var(--tarot-enter-duration);
  transition-timing-function: var(--tarot-ease);
}

.page.is-leaving-tarot .background { transition-duration: var(--tarot-return-duration); }
.page.is-entering-tarot .flowers-layer,
.page.is-tarot .flowers-layer {
  opacity: 0.76;
  filter: brightness(0.82) saturate(0.82) blur(4px);
  transition-duration: var(--tarot-enter-duration);
  transition-timing-function: var(--tarot-ease);
}
.page.is-leaving-tarot .flowers-layer { transition-duration: var(--tarot-return-duration); }

.tarot-screen {
  position: absolute;
  inset: 0;
  z-index: 32;
  overflow-x: hidden;
  overflow-y: auto;
  padding: max(78px, calc(env(safe-area-inset-top, 0px) + 62px)) max(24px, calc(env(safe-area-inset-right, 0px) + 20px)) max(68px, calc(env(safe-area-inset-bottom, 0px) + 52px)) max(24px, calc(env(safe-area-inset-left, 0px) + 20px));
  color: var(--tarot-gold);
  opacity: 0;
  filter: blur(4px);
  transform: translateY(8px);
  pointer-events: none;
  overscroll-behavior: contain;
  transition: opacity 720ms ease 260ms, filter 840ms ease 220ms, transform 840ms var(--tarot-ease) 220ms;
}
.page.is-entering-tarot .tarot-screen,
.page.is-tarot .tarot-screen { opacity: 1; filter: blur(0); transform: translateY(0); }
.page.is-tarot .tarot-screen { pointer-events: auto; }
.page.is-leaving-tarot .tarot-screen { opacity: 0; filter: blur(3px); transform: translateY(5px); transition: opacity 480ms ease, filter 560ms ease, transform 560ms var(--tarot-ease); }
.page.is-entering-tarot .booking-menu,
.page.is-tarot .booking-menu,
.page.is-entering-tarot .return-control,
.page.is-tarot .return-control { opacity: 0; filter: blur(2px); transform: translateY(-4px); pointer-events: none; transition-duration: 520ms; transition-delay: 0ms; }
.page.is-leaving-tarot .booking-menu,
.page.is-leaving-tarot .return-control { opacity: 1; filter: blur(0); transform: translateY(0); pointer-events: none; transition: opacity 720ms ease 180ms, filter 760ms ease 150ms, transform 760ms var(--tarot-ease) 150ms; }
.page.is-entering-tarot .booking-screen,
.page.is-tarot .booking-screen,
.page.is-leaving-tarot .booking-screen { pointer-events: none; }
.page.is-shared-payment .tarot-screen,
.page.is-tarot-personal .tarot-screen { opacity: 0; filter: blur(3px); transform: translateY(4px); pointer-events: none; transition: opacity 520ms ease, filter 620ms ease, transform 620ms var(--tarot-ease); }

.tarot-shell { width: min(100%, 640px); min-height: calc(100% - 2px); margin: 0 auto; font-family: "HYYueXiChuKai", "Kaiti SC", "STKaiti", "KaiTi", "楷体", serif; font-weight: 400; }
.tarot-title { margin: 0 0 clamp(54px, 8vh, 82px); color: var(--tarot-gold); font: inherit; font-size: clamp(28px, 2.5vw, 35px); line-height: 1.2; letter-spacing: 0.2em; text-align: center; }
.tarot-form, .tarot-service-panel { display: flex; flex-direction: column; }
.tarot-form { gap: clamp(50px, 7vh, 72px); }
.tarot-service-panel { gap: clamp(42px, 6.2vh, 64px); opacity: 1; filter: blur(0); transform: translateY(0); transition: opacity var(--tarot-switch-half-duration) ease, filter var(--tarot-switch-half-duration) ease, transform var(--tarot-switch-half-duration) var(--tarot-ease); }
.tarot-service-panel[hidden],
.tarot-other-wrap[hidden],
.tarot-benefit[hidden],
.tarot-price-row[hidden] { display: none !important; }
.tarot-discount-note[hidden] { display: none !important; }
.tarot-shell.is-switching-service .tarot-service-panel { opacity: 0; filter: blur(2px); transform: translateY(5px); }
.tarot-field { min-width: 0; border: 0; }
.tarot-label, .tarot-description { color: rgba(238, 228, 210, 0.78); font: inherit; font-size: clamp(15px, 1.25vw, 18px); line-height: 1.65; letter-spacing: 0.14em; }
.tarot-description { margin: 0; color: rgba(238, 228, 210, 0.58); font-size: 14px; }
.tarot-label-line { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; }
.tarot-counter { color: rgba(238, 228, 210, 0.42); font-size: 12px; letter-spacing: 0.08em; }
.tarot-input { box-sizing: border-box; width: 100%; margin-top: 14px; padding: 9px 1px; border: 0; border-bottom: 1px solid rgba(238, 228, 210, 0.22); border-radius: 0; outline: 0; background: transparent; color: var(--tarot-gold); font: inherit; font-size: 16px; line-height: 1.8; letter-spacing: 0.08em; transition: border-color 260ms ease, color 260ms ease; }
.tarot-input::placeholder { color: rgba(238, 228, 210, 0.32); }
.tarot-input:focus { border-color: rgba(238, 228, 210, 0.62); }
.tarot-textarea { resize: vertical; min-height: 86px; }
.tarot-options { display: flex; flex-wrap: wrap; gap: 14px 30px; margin-top: 20px; }
.tarot-type-options { justify-content: center; margin-top: 0; }
.tarot-type-options .tarot-option span { font-size: clamp(17px, 1.45vw, 20px); }
.tarot-option, .tarot-benefit-choice { cursor: pointer; }
.tarot-option input, .tarot-benefit-choice input { position: absolute; opacity: 0; pointer-events: none; }
.tarot-option span, .tarot-benefit-choice span { color: rgba(238, 228, 210, 0.58); font-size: 15px; line-height: 1.5; letter-spacing: 0.14em; transition: color 260ms ease; }
.tarot-option:hover span, .tarot-option input:focus-visible + span, .tarot-option input:checked + span, .tarot-benefit-choice:hover span, .tarot-benefit-choice input:focus-visible + span, .tarot-benefit-choice input:checked + span { color: var(--tarot-gold); }
.tarot-discount-option input:disabled + span { opacity: 0.38; cursor: default; }
.tarot-other-wrap { margin-top: 18px; }
.tarot-error, .tarot-submit-status { min-height: 1.5em; margin: 10px 0 0; color: var(--tarot-warning); font-size: 12px; line-height: 1.5; letter-spacing: 0.08em; opacity: 0; transition: opacity 220ms ease; }
.tarot-error.is-visible, .tarot-submit-status.is-visible { opacity: 1; }
.tarot-price-list { margin: 18px 0 0; }
.tarot-price-row { display: flex; justify-content: space-between; gap: 28px; padding: 8px 0; color: rgba(238, 228, 210, 0.6); font-size: 14px; letter-spacing: 0.1em; }
.tarot-price-row dt, .tarot-price-row dd { margin: 0; }
.tarot-price-total { margin-top: 9px; padding-top: 17px; border-top: 1px solid rgba(238, 228, 210, 0.16); color: var(--tarot-gold); font-size: 17px; }
.tarot-benefit { padding: 20px 0; border-top: 1px solid rgba(238, 228, 210, 0.12); border-bottom: 1px solid rgba(238, 228, 210, 0.12); }
.tarot-benefit p { margin: 12px 0 0; color: rgba(238, 228, 210, 0.48); font-size: 12px; letter-spacing: 0.1em; }
.tarot-benefit-choice { display: inline-block; margin-top: 18px; }
.tarot-benefit-choice input:disabled + span { color: rgba(238, 228, 210, 0.32); cursor: default; }
.tarot-discount-options { display: grid; gap: 17px; margin-top: 20px; }
.tarot-discount-option { display: block; }
.tarot-discount-choice { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; width: min(100%, 360px); }
.tarot-discount-choice strong, .tarot-discount-option strong { font-weight: 400; }
.tarot-discount-choice small { color: rgba(238, 228, 210, 0.44); font-size: 12px; letter-spacing: 0.1em; }
.tarot-discount-note { margin: 20px 0 0; color: rgba(238, 228, 210, 0.46); font-size: 12px; line-height: 1.8; letter-spacing: 0.08em; }
.tarot-next-row { text-align: center; }
.tarot-text-action, .tarot-return { appearance: none; border: 0; background: transparent; color: rgba(238, 228, 210, 0.7); font: inherit; letter-spacing: 0.16em; cursor: pointer; transition: color 260ms ease; }
.tarot-text-action:hover, .tarot-text-action:focus-visible, .tarot-return:hover, .tarot-return:focus-visible { color: var(--tarot-gold); }
.tarot-return { position: fixed; z-index: 2; top: max(26px, calc(env(safe-area-inset-top, 0px) + 18px)); left: max(27px, calc(env(safe-area-inset-left, 0px) + 20px)); padding: 8px; font-family: "HYYueXiChuKai", "Kaiti SC", "STKaiti", "KaiTi", "楷体", "FangSong", serif; font-size: 14px; font-weight: 400; }
.tarot-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 768px) {
  .page { --tarot-enter-duration: 1050ms; --tarot-return-duration: 900ms; }
  .tarot-screen { padding: max(72px, calc(env(safe-area-inset-top, 0px) + 56px)) max(20px, calc(env(safe-area-inset-right, 0px) + 16px)) max(54px, calc(env(safe-area-inset-bottom, 0px) + 40px)) max(20px, calc(env(safe-area-inset-left, 0px) + 16px)); }
  .tarot-title { margin-bottom: 50px; font-size: clamp(27px, 8vw, 32px); }
  .tarot-form { gap: 48px; }
  .tarot-service-panel { gap: 44px; }
}
@media (max-width: 620px) { .tarot-type-options { gap: 13px 22px; } .tarot-type-options .tarot-option span { font-size: 17px; } .tarot-focus-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .tarot-screen, .tarot-service-panel, .tarot-shell.is-switching-service .tarot-service-panel { transition-duration: 30ms !important; transition-delay: 0ms !important; } }