/* =========================================================
   Фаза — elevate pass
   Cinematic depth, sharper surfaces, quieter luxury
   ========================================================= */

:root {
  --ink: #030d0b;
  --ink-soft: #2a3f37;
  --paper: #e4efe8;
  --lift-edge: inset 0 1px 0 rgba(255, 255, 255, 0.55);
  --surface: linear-gradient(
    165deg,
    rgba(255, 255, 255, 0.78) 0%,
    rgba(255, 255, 255, 0.38) 100%
  );
  --mesh-a: rgba(214, 255, 58, 0.05);
  --mesh-b: rgba(12, 122, 109, 0.06);
  --logo-from: #04110e;
  --logo-to: #0a7568;
}

/* —— atmosphere (vars → full theme recolor) —— */
body {
  background:
    radial-gradient(860px 540px at 102% -6%, var(--bg-spot-2), transparent 48%),
    radial-gradient(640px 420px at 50% 110%, var(--bg-spot-3), transparent 50%),
    radial-gradient(420px 320px at 18% 70%, var(--bg-spot-4), transparent 62%),
    linear-gradient(
      168deg,
      var(--bg-base-1) 0%,
      var(--bg-base-1) 24%,
      var(--bg-base-2) 54%,
      var(--bg-base-2) 70%,
      var(--bg-base-3) 100%
    );
  transition: background 0.55s var(--ease), color 0.4s ease;
}

body::before {
  background-size: 80px 80px;
  opacity: 0.75;
  mask-image: radial-gradient(ellipse at 50% 18%, #000 6%, transparent 68%);
}

.noise {
  opacity: 0.1;
}

.vignette {
  background:
    radial-gradient(ellipse at 50% 28%, transparent 28%, rgba(3, 13, 11, 0.14) 100%),
    linear-gradient(180deg, transparent 0%, transparent 70%, rgba(3, 13, 11, 0.08) 100%);
}

.aurora-blob.a {
  /* top-left flare removed — caused a bright white/yellow blotch behind «Фаза» */
  opacity: 0;
  visibility: hidden;
}

.aurora-blob.b {
  opacity: 0.45;
}

/* —— chrome —— */
.top {
  padding-top: 1.15rem;
}

.logo-word {
  background: linear-gradient(120deg, var(--logo-from), var(--logo-to));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  transition: filter 0.4s ease;
}

.logo-mark {
  transition: filter 0.45s var(--ease);
}

.top-link,
.step-pill {
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.58);
  box-shadow: var(--lift-edge), 0 10px 26px rgba(3, 13, 11, 0.06);
  backdrop-filter: blur(16px) saturate(1.25);
}

.invite-fab {
  box-shadow: var(--lift-edge), 0 12px 30px rgba(3, 13, 11, 0.1);
}

.kb-help-btn {
  box-shadow: 0 14px 34px rgba(3, 13, 11, 0.32);
}

/* —— welcome cinematic —— */
.welcome-horizon {
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: 0;
  height: 42%;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(216, 255, 60, 0.22), transparent 55%),
    linear-gradient(180deg, transparent, rgba(10, 117, 104, 0.08) 40%, rgba(3, 13, 11, 0.06));
  pointer-events: none;
}

.welcome-orbit {
  left: 64%;
  top: 38%;
  width: min(105vw, 880px);
  height: min(105vw, 880px);
  transform: translate(-36%, -46%);
}

.welcome-ring {
  border-width: 1px;
  box-shadow: inset 0 0 40px rgba(10, 117, 104, 0.04);
}

.welcome-ring.wr-1 {
  border-style: dashed;
  border-color: rgba(10, 117, 104, 0.28);
  animation-duration: 42s;
}

.welcome-ring.wr-2 {
  border-color: rgba(216, 255, 60, 0.42);
  animation-duration: 28s;
}

.welcome-ring.wr-3 {
  border-color: rgba(10, 117, 104, 0.3);
  animation-duration: 18s;
}

.welcome-core {
  width: min(28vw, 190px);
  height: min(28vw, 190px);
  background:
    radial-gradient(circle at 28% 24%, rgba(255, 255, 255, 0.72), transparent 38%),
    radial-gradient(circle at 70% 70%, rgba(216, 255, 60, 0.35), transparent 45%),
    radial-gradient(circle at 50% 55%, #0a7568, #032822 62%, #010806);
  box-shadow:
    0 0 0 16px rgba(10, 117, 104, 0.07),
    0 0 0 34px rgba(216, 255, 60, 0.05),
    0 40px 80px rgba(3, 13, 11, 0.3);
}

.welcome-waveband {
  opacity: 0.62;
  bottom: 8%;
  filter: drop-shadow(0 10px 28px rgba(10, 117, 104, 0.18));
}

.welcome-wrap {
  max-width: 46rem;
  padding-left: clamp(1.25rem, 5.5vw, 4rem);
}

.welcome-wrap .brand {
  font-size: clamp(4.2rem, 15vw, 8.8rem);
}

.welcome-wrap h1 {
  font-size: clamp(1.7rem, 4vw, 2.8rem);
  max-width: 15ch;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.welcome-wrap .lead {
  font-size: 1.08rem;
  max-width: 32ch;
  color: color-mix(in srgb, var(--ink-soft) 88%, var(--teal));
}

/* —— landing —— */
.hero-copy {
  padding: 0.5rem 0 0;
  max-width: 640px;
  background: none;
  margin: 0;
  mask-image: none;
  box-shadow: none;
  backdrop-filter: none;
}

.hero-visual::after {
  display: none;
  content: none;
  background: none;
}

.orbit-stage {
  transform: scale(1.16);
}

.orbit-ring {
  border-width: 1.25px;
}

.phase-core {
  width: min(50vw, 300px);
  height: min(50vw, 300px);
  filter: drop-shadow(0 32px 56px rgba(3, 13, 11, 0.2));
}

.hero h1 {
  font-size: clamp(1.45rem, 3.2vw, 2.25rem);
  letter-spacing: -0.04em;
}

.btn-relation {
  border-radius: 1.15rem;
  min-height: 3.15rem;
}

.btn-probe {
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.22);
  box-shadow: none;
  border-color: color-mix(in srgb, var(--teal) 35%, transparent);
}

.probe-title {
  font-size: 1.32rem;
}

/* —— buttons —— */
.btn-primary {
  border-radius: 14px;
  background:
    linear-gradient(160deg, #1c3a30 0%, #030d0b 50%, #010706 100%);
  box-shadow:
    0 18px 44px rgba(3, 13, 11, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.btn-cta {
  min-width: 12rem;
  padding: 1.15rem 2.1rem;
  font-size: 1.04rem;
}

.btn-primary:hover {
  background: linear-gradient(160deg, #0a7568, #032822);
}

/* —— how / setup / modes —— */
.how-wrap h2,
.setup-wrap h2,
.modes-wrap h2 {
  letter-spacing: -0.05em;
  max-width: 16ch;
}

.how-steps li {
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--lift-edge), 0 14px 34px rgba(3, 13, 11, 0.05);
  border-left-width: 4px;
}

.how-steps li:hover {
  transform: translateX(12px);
}

.person-panel {
  background: var(--surface);
  box-shadow: var(--lift-edge), 0 16px 38px rgba(3, 13, 11, 0.06);
  border-radius: 20px;
}

.person-panel input,
.person-panel select {
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(3, 13, 11, 0.1);
}

.mode-card {
  border-radius: 24px;
  background: var(--surface);
  box-shadow: var(--lift-edge), 0 18px 42px rgba(3, 13, 11, 0.06);
  padding: 1.7rem 1.55rem;
}

.mode-card::after {
  content: "";
  position: absolute;
  left: 1.2rem;
  right: 1.2rem;
  top: 0;
  height: 3px;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, transparent, var(--teal), var(--lime), transparent);
  opacity: 0.55;
}

.mode-card.is-mid::after {
  background: linear-gradient(90deg, transparent, var(--teal), transparent);
  opacity: 0.85;
}

.mode-card.is-pro::after {
  background: linear-gradient(90deg, transparent, var(--lime-ink), var(--lime), transparent);
  opacity: 0.9;
}

.mode-card:hover {
  transform: translateY(-12px);
}

.mode-price {
  font-size: 2.15rem;
}

/* —— quiz atmosphere + richer options —— */
#view-quiz {
  isolation: isolate;
}

.quiz-atmosphere {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.quiz-ring {
  position: absolute;
  border-radius: 50%;
  border: 1.5px dashed color-mix(in srgb, var(--teal) 28%, transparent);
  opacity: 0.45;
  animation: quizSpin 48s linear infinite;
}

.quiz-ring.qr-1 {
  width: min(70vw, 520px);
  height: min(70vw, 520px);
  right: -12%;
  top: 8%;
}

.quiz-ring.qr-2 {
  width: min(48vw, 340px);
  height: min(48vw, 340px);
  right: 2%;
  top: 18%;
  border-style: solid;
  border-color: color-mix(in srgb, var(--lime) 35%, transparent);
  animation-direction: reverse;
  animation-duration: 36s;
  opacity: 0.35;
}

.quiz-ring.qr-3 {
  width: min(28vw, 180px);
  height: min(28vw, 180px);
  right: 14%;
  top: 28%;
  border-style: dotted;
  animation-duration: 22s;
  opacity: 0.4;
}

.quiz-wave {
  position: absolute;
  left: -5%;
  width: 110%;
  height: 120px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--teal) 18%, transparent);
  opacity: 0.35;
}

.quiz-wave.qw-a {
  bottom: 18%;
  transform: scaleY(0.45);
  animation: quizWave 7s ease-in-out infinite alternate;
}

.quiz-wave.qw-b {
  bottom: 10%;
  border-color: color-mix(in srgb, var(--lime) 22%, transparent);
  transform: scaleY(0.35);
  animation: quizWave 9s ease-in-out infinite alternate-reverse;
  opacity: 0.28;
}

.quiz-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  opacity: 0.5;
}

.quiz-orb.qo-a {
  width: 14px;
  height: 14px;
  background: var(--teal);
  right: 22%;
  top: 22%;
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--teal) 12%, transparent);
  animation: quizFloat 8s var(--ease) infinite;
}

.quiz-orb.qo-b {
  width: 10px;
  height: 10px;
  background: var(--lime);
  right: 18%;
  top: 42%;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--lime) 16%, transparent);
  animation: quizFloat 10s var(--ease) infinite reverse;
}

.quiz-mark {
  position: absolute;
  right: 8%;
  bottom: 22%;
  font-family: var(--font-brand);
  font-weight: 800;
  font-size: clamp(7rem, 22vw, 14rem);
  line-height: 0.8;
  letter-spacing: -0.08em;
  color: color-mix(in srgb, var(--teal) 10%, transparent);
  user-select: none;
  transform: rotate(-8deg);
}

#view-quiz .top,
#view-quiz .quiz-progress,
#view-quiz .quiz-stage {
  position: relative;
  z-index: 1;
}

#view-quiz[data-cat="быт"] .quiz-mark { color: color-mix(in srgb, var(--teal) 12%, transparent); }
#view-quiz[data-cat="поведение"] .quiz-mark { color: color-mix(in srgb, #e85a4f 14%, transparent); }
#view-quiz[data-cat="взгляды"] .quiz-mark { color: color-mix(in srgb, #2b6cb0 14%, transparent); }
#view-quiz[data-cat="принципы"] .quiz-mark { color: color-mix(in srgb, #a67c00 16%, transparent); }

#view-quiz[data-cat="быт"] .quiz-ring.qr-2 { border-color: color-mix(in srgb, var(--lime) 40%, transparent); }
#view-quiz[data-cat="поведение"] .quiz-ring.qr-2 { border-color: color-mix(in srgb, #e85a4f 40%, transparent); }
#view-quiz[data-cat="взгляды"] .quiz-ring.qr-2 { border-color: color-mix(in srgb, #38bdf8 40%, transparent); }
#view-quiz[data-cat="принципы"] .quiz-ring.qr-2 { border-color: color-mix(in srgb, #ffb020 40%, transparent); }

@keyframes quizSpin {
  to { transform: rotate(360deg); }
}

@keyframes quizWave {
  from { transform: scaleY(0.4) translateY(0); }
  to { transform: scaleY(0.55) translateY(-12px); }
}

@keyframes quizFloat {
  0%,
  100% { transform: translate(0, 0); }
  50% { transform: translate(-18px, 14px); }
}

.option.tone-1 {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.78), color-mix(in srgb, var(--teal) 8%, rgba(255, 255, 255, 0.45)));
  border-left: 3px solid color-mix(in srgb, var(--teal) 55%, transparent);
}

.option.tone-2 {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.78), color-mix(in srgb, var(--lime) 14%, rgba(255, 255, 255, 0.45)));
  border-left: 3px solid color-mix(in srgb, var(--lime-ink) 45%, var(--lime));
}

.option.tone-3 {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.8), rgba(243, 232, 214, 0.45));
  border-left: 3px solid color-mix(in srgb, var(--ink-soft) 35%, transparent);
}

.option.tone-4 {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.78), color-mix(in srgb, var(--teal-deep) 10%, rgba(255, 255, 255, 0.42)));
  border-left: 3px solid color-mix(in srgb, var(--teal-deep) 50%, transparent);
}

.option.tone-1:hover,
.option.tone-2:hover,
.option.tone-3:hover,
.option.tone-4:hover {
  border-left-width: 4px;
}

.option.is-picked,
.option.is-picked.tone-1,
.option.is-picked.tone-2,
.option.is-picked.tone-3,
.option.is-picked.tone-4 {
  border-left-color: var(--lime);
  background: linear-gradient(145deg, #0a7568, #030d0b);
  color: var(--lime);
}

body.theme-couple .option.is-picked,
body.theme-couple .option.is-picked.tone-1,
body.theme-couple .option.is-picked.tone-2,
body.theme-couple .option.is-picked.tone-3,
body.theme-couple .option.is-picked.tone-4 {
  background: linear-gradient(145deg, #ff4d6d, #3a0f1c);
  border-left-color: #ffb3c6;
  color: #fff;
}

body.theme-friends .option.is-picked,
body.theme-friends .option.is-picked.tone-1,
body.theme-friends .option.is-picked.tone-2,
body.theme-friends .option.is-picked.tone-3,
body.theme-friends .option.is-picked.tone-4 {
  background: linear-gradient(145deg, #ff9f1a, #2a2208);
  border-left-color: #ffe566;
  color: #fff;
}

body.theme-family .option.is-picked,
body.theme-family .option.is-picked.tone-1,
body.theme-family .option.is-picked.tone-2,
body.theme-family .option.is-picked.tone-3,
body.theme-family .option.is-picked.tone-4 {
  background: linear-gradient(145deg, #38bdf8, #0b1a2e);
  border-left-color: #93c5fd;
  color: #fff;
}

/* —— quiz —— */
.quiz-stage {
  padding: 0.5rem 0 2rem;
}

.q-cat {
  display: inline-flex;
  padding: 0.35rem 0.65rem;
  border-radius: 8px;
  background: rgba(10, 117, 104, 0.08);
  margin-bottom: 0.35rem;
}

.q-text {
  font-size: clamp(1.55rem, 3.8vw, 2.3rem);
  letter-spacing: -0.04em;
  max-width: 22ch;
  text-wrap: balance;
}

.who-badge {
  border-radius: 12px;
  letter-spacing: -0.015em;
}

.progress-track {
  height: 6px;
  background: rgba(3, 13, 11, 0.07);
}

.progress-fill {
  background: linear-gradient(90deg, var(--teal-deep), var(--teal) 45%, var(--lime));
}

.option {
  border-radius: 17px;
  border: 1px solid rgba(3, 13, 11, 0.09);
  background: var(--surface);
  box-shadow: var(--lift-edge), 0 12px 30px rgba(3, 13, 11, 0.04);
  padding: 1.1rem 1.2rem 1.1rem 3.2rem;
}

.option::before {
  border-radius: 9px;
  font-family: var(--font-display);
}

.option:hover {
  transform: translateY(-3px) translateX(6px);
  border-color: color-mix(in srgb, var(--teal) 40%, transparent);
  box-shadow: 0 18px 40px rgba(10, 117, 104, 0.12);
}

.option.is-picked {
  background: linear-gradient(145deg, #0a7568, #030d0b);
  color: var(--lime);
  border-color: transparent;
  box-shadow: 0 20px 44px rgba(3, 13, 11, 0.3);
}

/* —— context —— */
.context-q {
  background: var(--surface);
  box-shadow: var(--lift-edge), 0 14px 34px rgba(3, 13, 11, 0.05);
  border-radius: 20px;
}

.context-option {
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.62);
}

.context-option:has(input:checked) {
  background: color-mix(in srgb, var(--teal) 12%, white);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--teal) 45%, transparent);
}

/* —— results —— */
.results-wrap {
  padding-top: 0.5rem;
}

.score-hero {
  padding: 1.25rem 1.35rem;
  border-radius: 24px;
  background: var(--surface);
  box-shadow: var(--lift-edge), 0 20px 50px rgba(3, 13, 11, 0.07);
}

.score-ring-wrap {
  filter: drop-shadow(0 0 calc(18px + var(--ring-fill, 0.5) * 26px) var(--ring-glow, rgba(255, 92, 138, 0.32)));
}

.score-copy h2 {
  font-size: clamp(1.9rem, 4.4vw, 2.85rem);
  letter-spacing: -0.045em;
  max-width: 14ch;
}

.pair-line {
  display: inline-block;
  margin-top: 0.55rem;
  padding: 0.4rem 0.75rem;
  border-radius: 10px;
  background: color-mix(in srgb, var(--teal) 10%, transparent);
}

.cat-row {
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--lift-edge);
  margin-bottom: 0.65rem;
}

.cat-fill {
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--teal-deep), var(--teal), var(--lime));
}

/* —— handoff —— */
.handoff-wrap h2 {
  font-size: clamp(2.3rem, 6.5vw, 3.8rem);
  letter-spacing: -0.05em;
}

.handoff-orb {
  background:
    radial-gradient(circle at 38% 32%, rgba(216, 255, 60, 0.6), transparent 42%),
    radial-gradient(circle at 62% 68%, rgba(10, 117, 104, 0.45), transparent 48%);
}

/* —— modals —— */
.invite-modal-card,
.kb-modal-card {
  box-shadow: var(--lift-edge), 0 30px 80px rgba(3, 13, 11, 0.22);
  backdrop-filter: blur(20px);
}

/* —— view enter —— */
@keyframes elevateIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.view.is-active {
  animation: elevateIn 0.7s var(--ease) both;
}

/* —— theme surfaces stay coherent —— */
body.theme-couple .hero-copy,
body.theme-friends .hero-copy,
body.theme-family .hero-copy {
  background: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  mask-image: none !important;
}

body.theme-couple .welcome-horizon {
  background:
    radial-gradient(ellipse at 50% 100%, rgba(255, 143, 171, 0.28), transparent 55%),
    linear-gradient(180deg, transparent, rgba(217, 72, 108, 0.08));
}

body.theme-friends .welcome-horizon {
  background:
    radial-gradient(ellipse at 50% 100%, rgba(255, 229, 102, 0.3), transparent 55%),
    linear-gradient(180deg, transparent, rgba(212, 160, 23, 0.08));
}

body.theme-family .welcome-horizon {
  background:
    radial-gradient(ellipse at 50% 100%, rgba(147, 197, 253, 0.3), transparent 55%),
    linear-gradient(180deg, transparent, rgba(43, 108, 176, 0.08));
}

/* —— mobile —— */
@media (max-width: 820px) {
  .welcome-orbit {
    left: 50%;
    top: 24%;
    width: min(135vw, 480px);
    height: min(135vw, 480px);
    transform: translate(-50%, -50%);
  }

  .welcome-wrap .brand {
    font-size: clamp(3.8rem, 19vw, 5.2rem);
  }

  .hero-copy {
    margin: 0;
    padding: 0.35rem 0 0;
    mask-image: none;
  }

  .orbit-stage {
    transform: none !important;
  }

  .phase-core {
    width: min(40vw, 156px);
    height: min(40vw, 156px);
  }

  .quiz-ring.qr-1 {
    width: min(90vw, 320px);
    height: min(90vw, 320px);
    opacity: 0.3;
  }

  .quiz-mark {
    font-size: clamp(5rem, 28vw, 8rem);
    right: 4%;
    bottom: 28%;
    opacity: 0.7;
  }

  .quiz-wave.qw-b,
  .quiz-orb.qo-b {
    display: none;
  }

  .score-hero {
    grid-template-columns: 1fr;
    text-align: left;
    padding: 1.1rem;
  }

  .mode-card::after {
    left: 1rem;
    right: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .view.is-active {
    animation: none !important;
  }

  .quiz-ring,
  .quiz-wave,
  .quiz-orb {
    animation: none !important;
  }
}

/* —— mode tiers: light → mid → dark —— */
.mode-card[data-mode="free"] {
  background: linear-gradient(
    165deg,
    rgba(255, 255, 255, 0.92) 0%,
    rgba(255, 255, 255, 0.72) 100%
  );
  border-color: rgba(3, 13, 11, 0.08);
  color: var(--ink);
}

.mode-card[data-mode="free"] .mode-tag {
  color: color-mix(in srgb, var(--teal) 75%, var(--ink-soft));
}

.mode-card[data-mode="free"] .mode-price,
.mode-card[data-mode="free"] h3 {
  color: var(--ink);
}

.mode-card[data-mode="free"] li {
  color: var(--ink-soft);
}

.mode-card.is-mid,
.mode-card[data-mode="ads"] {
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--teal) 22%, #fff) 0%,
    color-mix(in srgb, var(--teal-deep) 18%, #e8f0ec) 100%
  );
  border-color: color-mix(in srgb, var(--teal) 28%, transparent);
  border-top: 3px solid color-mix(in srgb, var(--teal) 70%, var(--teal-deep));
  color: var(--ink);
}

.mode-card.is-mid .mode-tag,
.mode-card[data-mode="ads"] .mode-tag {
  color: var(--teal-deep);
}

.mode-card.is-mid li,
.mode-card[data-mode="ads"] li {
  color: color-mix(in srgb, var(--ink-soft) 90%, var(--teal-deep));
}

.mode-card.is-pro,
.mode-card[data-mode="paid"] {
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--ink) 72%, var(--teal-deep)) 0%,
    color-mix(in srgb, var(--ink) 88%, #000) 55%,
    #030d0b 100%
  );
  border-color: color-mix(in srgb, var(--lime) 22%, transparent);
  border-top: 3px solid var(--lime);
  color: #f3faf5;
  box-shadow:
    var(--lift-edge),
    0 22px 48px rgba(3, 13, 11, 0.28);
}

.mode-card.is-pro .mode-tag,
.mode-card[data-mode="paid"] .mode-tag {
  color: var(--lime);
}

.mode-card.is-pro h3,
.mode-card.is-pro .mode-price,
.mode-card[data-mode="paid"] h3,
.mode-card[data-mode="paid"] .mode-price {
  color: #fff;
}

.mode-card.is-pro li,
.mode-card[data-mode="paid"] li {
  color: rgba(243, 250, 245, 0.78);
}

.mode-card.is-pro li::before,
.mode-card[data-mode="paid"] li::before {
  background: var(--lime);
}

.mode-card.is-pro::after,
.mode-card[data-mode="paid"]::after {
  background: linear-gradient(90deg, transparent, var(--lime), transparent);
  opacity: 0.95;
}

.mode-card.is-pro .btn-primary,
.mode-card[data-mode="paid"] .btn-primary {
  background: linear-gradient(145deg, var(--lime), color-mix(in srgb, var(--lime) 70%, #fff));
  color: var(--lime-ink);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
}

.mode-card.is-pro .btn-primary:hover,
.mode-card[data-mode="paid"] .btn-primary:hover {
  background: #fff;
  color: var(--ink);
}

/* theme-aware mid/pro tint */
body.theme-couple .mode-card.is-mid,
body.theme-couple .mode-card[data-mode="ads"] {
  background: linear-gradient(
    165deg,
    color-mix(in srgb, #ff3b5c 16%, #fff) 0%,
    color-mix(in srgb, #b4234a 14%, #ffe8ef) 100%
  );
  border-top-color: #e0113a;
}

body.theme-couple .mode-card.is-pro,
body.theme-couple .mode-card[data-mode="paid"] {
  background: linear-gradient(160deg, #5c1828 0%, #3a0f1c 50%, #1a0810 100%);
  border-top-color: #ff8fab;
}

body.theme-couple .mode-card.is-pro .mode-tag,
body.theme-couple .mode-card[data-mode="paid"] .mode-tag {
  color: #ffb3c6;
}

body.theme-couple .mode-card.is-pro .btn-primary,
body.theme-couple .mode-card[data-mode="paid"] .btn-primary {
  background: linear-gradient(145deg, #ff8fab, #ffb3c6);
  color: #4a1024;
}

body.theme-friends .mode-card.is-mid,
body.theme-friends .mode-card[data-mode="ads"] {
  background: linear-gradient(
    165deg,
    color-mix(in srgb, #ff9f1a 18%, #fff) 0%,
    color-mix(in srgb, #a67c00 12%, #fff6d6) 100%
  );
  border-top-color: #f97316;
}

body.theme-friends .mode-card.is-pro,
body.theme-friends .mode-card[data-mode="paid"] {
  background: linear-gradient(160deg, #4a3810 0%, #2a2208 50%, #141008 100%);
  border-top-color: #ffe566;
}

body.theme-friends .mode-card.is-pro .mode-tag,
body.theme-friends .mode-card[data-mode="paid"] .mode-tag {
  color: #ffe566;
}

body.theme-friends .mode-card.is-pro .btn-primary,
body.theme-friends .mode-card[data-mode="paid"] .btn-primary {
  background: linear-gradient(145deg, #ffe566, #ffd54a);
  color: #3a2e00;
}

body.theme-family .mode-card.is-mid,
body.theme-family .mode-card[data-mode="ads"] {
  background: linear-gradient(
    165deg,
    color-mix(in srgb, #38bdf8 16%, #fff) 0%,
    color-mix(in srgb, #1e4e8c 12%, #e8f1fb) 100%
  );
  border-top-color: #2563eb;
}

body.theme-family .mode-card.is-pro,
body.theme-family .mode-card[data-mode="paid"] {
  background: linear-gradient(160deg, #152a44 0%, #0b1a2e 50%, #060e18 100%);
  border-top-color: #93c5fd;
}

body.theme-family .mode-card.is-pro .mode-tag,
body.theme-family .mode-card[data-mode="paid"] .mode-tag {
  color: #93c5fd;
}

body.theme-family .mode-card.is-pro .btn-primary,
body.theme-family .mode-card[data-mode="paid"] .btn-primary {
  background: linear-gradient(145deg, #93c5fd, #bfdbfe);
  color: #0f2744;
}

/* —— full theme skin: logo + kill leftover green —— */
/* base logo is teal (~173°) → rotate into theme hues */
body.theme-couple .logo-mark {
  filter:
    hue-rotate(177deg) saturate(1.55) brightness(1.04)
    drop-shadow(0 8px 18px rgba(224, 17, 58, 0.35));
}

body.theme-friends .logo-mark {
  /* sepia-pipeline → yellow/orange (hue-rotate alone made the lime half pink) */
  filter:
    sepia(0.92) saturate(5.2) hue-rotate(2deg) brightness(1.14) contrast(1.06)
    drop-shadow(0 8px 18px rgba(255, 160, 20, 0.42));
}

body.theme-family .logo-mark {
  filter:
    hue-rotate(32deg) saturate(1.5) brightness(1.1)
    drop-shadow(0 8px 18px rgba(56, 189, 248, 0.4));
}

body.theme-couple .logo-word {
  background: linear-gradient(120deg, #3a0f1c, #e0113a 45%, #ff5c7a);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

body.theme-friends .logo-word {
  background: linear-gradient(120deg, #ea580c, #f59e0b 48%, #fde047);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

body.theme-family .logo-word {
  background: linear-gradient(120deg, #1e4e8c, #38bdf8 45%, #93c5fd);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

body.theme-couple .btn-primary:hover,
body.theme-friends .btn-primary:hover,
body.theme-family .btn-primary:hover {
  background: linear-gradient(160deg, var(--teal), var(--teal-deep));
}

body.theme-couple .kb-help-btn,
body.theme-friends .kb-help-btn,
body.theme-family .kb-help-btn {
  background: var(--ink);
  color: var(--lime);
}

body.theme-couple .invite-fab:hover,
body.theme-couple .invite-fab.is-active,
body.theme-couple.coop-on .invite-fab {
  background: linear-gradient(145deg, #ffc2d1 0%, #ffe4ec 55%, #fff 100%);
  border-color: color-mix(in srgb, #d9486c 45%, transparent);
  box-shadow: 0 10px 28px rgba(217, 72, 108, 0.18);
}

body.theme-friends .invite-fab:hover,
body.theme-friends .invite-fab.is-active,
body.theme-friends.coop-on .invite-fab {
  background: linear-gradient(145deg, #ffe08a 0%, #fff6d6 55%, #fff 100%);
  border-color: color-mix(in srgb, #f97316 40%, transparent);
}

body.theme-family .invite-fab:hover,
body.theme-family .invite-fab.is-active,
body.theme-family.coop-on .invite-fab {
  background: linear-gradient(145deg, #93c5fd 0%, #dbeafe 55%, #fff 100%);
  border-color: color-mix(in srgb, #2563eb 40%, transparent);
}

body.theme-couple .spark,
body.theme-friends .spark,
body.theme-family .spark {
  background: var(--lime);
  box-shadow: 0 0 10px var(--spark-glow);
}

/* phase-core default green wash only when unthemed; themed cores already override */