/* ================================================================
   CRUSH — Dating Landing  |  Romantic Dark Theme  |  Mobile-First
   ================================================================ */

:root {
  --cr-bg:        #0e0610;
  --cr-bg2:       #1a0820;
  --cr-rose:      #ff3d6b;
  --cr-pink:      #ff7eb4;
  --cr-lilac:     #d170ff;
  --cr-gold:      #ffc4a0;
  --cr-text:      #fff5f8;
  --cr-muted:     rgba(255,220,235,0.72);
  --cr-card:      rgba(28,8,38,0.85);
  --cr-border:    rgba(255,140,190,0.18);
  --cr-input-bg:  rgba(255,255,255,0.07);
  --cr-input-bd:  rgba(255,160,210,0.22);
}

/* ---- Base ---- */
html.landing-dating,
html.landing-dating body {
  margin: 0; min-height: 100%; overflow-x: hidden;
  background:
    radial-gradient(ellipse 110% 55% at 50% -8%, rgba(255,60,110,0.42) 0%, transparent 52%),
    radial-gradient(circle at 15% 20%,  rgba(255,61,107,0.3)  0%, transparent 36%),
    radial-gradient(circle at 85% 18%,  rgba(200,70,255,0.22) 0%, transparent 34%),
    radial-gradient(circle at 75% 85%,  rgba(255,110,170,0.18) 0%, transparent 38%),
    radial-gradient(circle at 22% 80%,  rgba(180,60,255,0.16) 0%, transparent 36%),
    linear-gradient(160deg, var(--cr-bg) 0%, #160820 50%, #1a0a26 100%);
  color: var(--cr-text);
}
html.landing-dating body {
  display: block;
  font-family: "Roboto", system-ui, -apple-system, sans-serif;
}

/* ---- Page wrapper ---- */
html.landing-dating .dating-page {
  position: relative;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding:
    max(16px, env(safe-area-inset-top))
    16px
    max(28px, env(safe-area-inset-bottom));
  box-sizing: border-box;
  overflow: hidden;
}

/* ---- Ambient bokeh ---- */
html.landing-dating .dating-bokeh {
  position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden;
}
html.landing-dating .dating-bokeh-dot {
  position: absolute; border-radius: 50%; filter: blur(55px);
  animation: cr-bokeh-drift 13s ease-in-out infinite alternate;
}
html.landing-dating .dating-bokeh-dot--1 { width:280px;height:280px;top:5%;left:2%;   background:rgba(255,61,107,0.4);  animation-delay:0s; }
html.landing-dating .dating-bokeh-dot--2 { width:320px;height:320px;top:52%;right:-6%;background:rgba(200,70,255,0.32); animation-delay:-2s; animation-duration:16s; }
html.landing-dating .dating-bokeh-dot--3 { width:220px;height:220px;bottom:10%;left:14%;background:rgba(255,120,180,0.3);animation-delay:-4s; animation-duration:11s; }
html.landing-dating .dating-bokeh-dot--4 { width:200px;height:200px;top:-4%;right:25%; background:rgba(255,90,150,0.28); animation-delay:-1s; animation-duration:14s; }

/* ---- Aurora ---- */
html.landing-dating .dating-aurora {
  position: fixed; inset: -20%; pointer-events: none; z-index: 0;
  background: conic-gradient(from 200deg at 50% 50%,
    rgba(255,61,107,0.11), rgba(200,70,255,0.16), rgba(255,120,180,0.09), rgba(255,61,107,0.11));
  filter: blur(65px);
  animation: cr-aurora 20s ease-in-out infinite alternate;
}

/* ---- Grain ---- */
html.landing-dating .dating-grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- Floating petals ---- */
html.landing-dating .dating-petals {
  position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden;
}
html.landing-dating .dating-petal {
  position: absolute; bottom: -10%; left: var(--x,50%);
  font-size: var(--size,13px);
  opacity: 0;
  animation: cr-petal-rise 16s linear infinite;
  animation-delay: var(--delay,0s);
}

/* ---- Reveal animation ---- */
html.landing-dating .dating-reveal {
  opacity: 0; transform: translateY(16px);
  animation: cr-reveal 0.7s cubic-bezier(0.22,1,0.36,1) forwards;
  animation-delay: var(--reveal-delay, 0s);
}

/* ---- Header ---- */
html.landing-dating .dating-header {
  position: relative; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 4px 16px;
  flex-shrink: 0;
}
html.landing-dating .dating-brand {
  display: flex; align-items: center; gap: 10px;
  font-size: 22px; font-weight: 800; letter-spacing: -0.03em; color: #fff;
}
html.landing-dating .dating-brand-icon {
  width: 38px; height: 38px; border-radius: 13px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--cr-rose), var(--cr-lilac));
  box-shadow: 0 6px 22px rgba(255,61,107,0.5);
  font-size: 20px;
}
html.landing-dating .dating-badge {
  padding: 7px 13px; border-radius: 999px;
  background: rgba(255,100,160,0.15);
  border: 1px solid rgba(255,140,190,0.3);
  font-size: 13px; font-weight: 600; color: #ffd6e8;
}
html.landing-dating .dating-badge--pulse {
  animation: cr-badge-glow 3s ease-in-out infinite;
}

/* ---- Main scrollable area ---- */
html.landing-dating .dating-main {
  position: relative; z-index: 1;
  display: flex; align-items: flex-start; justify-content: center;
  flex: 1; min-height: 0; width: 100%;
}
html.landing-dating .container.svelte-12qhfyh,
html.landing-dating .container.svelte-vywflk {
  width: 100%; max-width: 480px; min-height: auto; height: auto;
  display: block; background: transparent !important; padding: 0; margin: 0;
}
html.landing-dating .background.svelte-vywflk,
html.landing-dating .background.svelte-1afbb1c,
html.landing-dating .layer.layer-base { display: none !important; }

/* ---- Auth card (desktop keeps glass card, mobile = transparent) ---- */
html.landing-dating .auth.auth--regular.svelte-vywflk {
  width: 100%; margin: 0 auto;
  min-height: auto; height: auto;
  border-radius: 28px;
  border: 1px solid var(--cr-border);
  background: var(--cr-card) !important;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 24px 80px rgba(0,0,0,0.45), 0 0 60px rgba(255,61,107,0.08);
  padding: 0;
}
html.landing-dating .auth--regular.svelte-vywflk .header.svelte-vywflk,
html.landing-dating .logoWrapper.svelte-vywflk { display: none; }
html.landing-dating .auth--regular.svelte-vywflk .form.svelte-vywflk {
  width: 100%; padding: 28px 22px 8px; gap: 0; margin: 0; position: relative;
}

/* ---- Hero section ---- */
html.landing-dating .dating-hero { text-align: center; margin-bottom: 22px; }
html.landing-dating.dating-hide-hero .dating-hero { display: none; }

html.landing-dating .dating-hero-emoji {
  font-size: 52px; line-height: 1; margin-bottom: 12px; display: block;
  filter: drop-shadow(0 0 22px rgba(255,61,107,0.6));
  animation: cr-heartbeat 1.5s ease-in-out infinite;
}

html.landing-dating .dating-online {
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 16px; padding: 6px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,150,195,0.2);
  font-size: 13px; color: var(--cr-muted);
}
html.landing-dating .dating-online-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #5cff9a;
  box-shadow: 0 0 10px rgba(92,255,154,0.8);
  animation: cr-dot-pulse 2s ease-in-out infinite;
}
html.landing-dating .dating-online strong { color: #fff; font-weight: 700; }

html.landing-dating .dating-title {
  margin: 0 0 12px;
  font-size: clamp(26px, 7vw, 34px);
  line-height: 1.15; font-weight: 800; letter-spacing: -0.04em; color: #fff;
}
html.landing-dating .dating-accent {
  background: linear-gradient(90deg, #ff7eb8, #e080ff, #ffc8e8, #e080ff, #ff7eb8);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  background-size: 200% auto;
}
html.landing-dating .dating-shimmer { animation: cr-shimmer 4s linear infinite; }

html.landing-dating .dating-subtitle {
  margin: 0 0 20px;
  font-size: 15px; line-height: 1.5; color: var(--cr-muted);
}

/* ---- Stats pills ---- */
html.landing-dating .dating-stats {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 8px; margin-bottom: 18px;
}
html.landing-dating .dating-stat {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: 999px;
  background: rgba(255,80,140,0.12);
  border: 1px solid rgba(255,150,195,0.18);
  font-size: 13px;
}
html.landing-dating .dating-stat strong {
  font-size: 15px; font-weight: 800;
  background: linear-gradient(135deg, #fff 0%, #ffd4e8 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
html.landing-dating .dating-stat span { color: var(--cr-muted); }

/* ---- Feature pills ---- */
html.landing-dating .dating-features {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 8px; margin-bottom: 18px;
}
html.landing-dating .dating-feature-pill {
  padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 500;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,160,210,0.15);
  color: var(--cr-muted);
}

/* ---- MAX banner ---- */
html.landing-dating .dating-max-banner {
  display: flex; align-items: center; gap: 12px; text-align: left;
  padding: 12px 14px; margin-bottom: 6px; border-radius: 16px;
  background: rgba(80,140,255,0.12);
  border: 1px solid rgba(120,170,255,0.22);
  font-size: 13px; line-height: 1.45; color: #ddeeff;
}
html.landing-dating .dating-max-icon {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center;
  font-weight: 800; font-size: 16px; color: #fff;
  background: linear-gradient(135deg, #5b9dff, #2d6fe8);
}

/* ---- Auth steps ---- */
html.landing-dating .auth-step { display: block !important; transition: opacity 0.3s, transform 0.3s; }
html.landing-dating .auth-step:not(.active) {
  opacity: 0; transform: translateY(8px);
  pointer-events: none; position: absolute; visibility: hidden;
}
html.landing-dating .auth-step.active {
  opacity: 1; transform: translateY(0); position: relative; visibility: visible;
}

html.landing-dating .auth-step .explainer.svelte-vywflk .subheader { color: #fff; font-size: 18px; font-weight: 700; }
html.landing-dating .auth-step .explainer.svelte-vywflk .detail,
html.landing-dating .auth-step .field.svelte-vywflk .hint { color: var(--cr-muted); font-size: 13px; }

/* ---- Phone input ---- */
html.landing-dating .auth-step .input.input--secondary.input--neutral.svelte-14rzpox {
  background: var(--cr-input-bg) !important;
  border-color: var(--cr-input-bd) !important;
  border-radius: 14px !important; height: 54px !important;
  transition: border-color 0.2s, box-shadow 0.2s;
}
html.landing-dating .auth-step .input.input--secondary.input--neutral.svelte-14rzpox:focus-within {
  border-color: rgba(255,80,140,0.55) !important;
  box-shadow: 0 0 0 3px rgba(255,61,107,0.14) !important;
}
html.landing-dating .auth-step .country.svelte-1cug6p,
html.landing-dating .auth-step input.field.svelte-14rzpox { color: #fff; font-size: 16px; }

/* ---- Code digits ---- */
html.landing-dating #code-inputs .digit {
  background: var(--cr-input-bg) !important;
  border-color: var(--cr-input-bd) !important;
  border-radius: 12px !important;
  color: #fff; font-size: 20px; font-weight: 700;
}
html.landing-dating #code-inputs .digit:focus {
  border-color: rgba(255,80,140,0.55) !important;
}

/* ---- Buttons ---- */
html.landing-dating #submit-btn.button--primary,
html.landing-dating #code-submit-btn.button--primary,
html.landing-dating #password-submit-btn.button--primary,
html.landing-dating #password-reset-btn.button--primary,
html.landing-dating #return-btn.button--primary {
  background: linear-gradient(130deg, #ff2d55 0%, #e040c8 50%, #9b5de5 100%) !important;
  border: none !important; color: #fff !important;
  font-weight: 700 !important; font-size: 16px !important;
  height: 54px !important; border-radius: 16px !important;
  box-shadow: 0 10px 32px rgba(255,45,85,0.38) !important;
  transition: transform 0.15s, box-shadow 0.15s, filter 0.15s;
  letter-spacing: -0.01em;
}
html.landing-dating #submit-btn.button--primary:not(.button--disabled):hover,
html.landing-dating #code-submit-btn.button--primary:not(.button--disabled):hover {
  transform: translateY(-1px); filter: brightness(1.08);
  box-shadow: 0 14px 40px rgba(255,45,85,0.5) !important;
}
html.landing-dating #submit-btn.button--primary:not(.button--disabled):active,
html.landing-dating #code-submit-btn.button--primary:not(.button--disabled):active { transform: scale(0.98); }

html.landing-dating #submit-btn .content,
html.landing-dating #code-submit-btn .content,
html.landing-dating #password-submit-btn .content,
html.landing-dating #password-reset-btn .content,
html.landing-dating #return-btn .content { color: #fff !important; font-weight: 700; opacity: 1 !important; }

html.landing-dating #submit-btn.button--disabled .content,
html.landing-dating #code-submit-btn.button--disabled .content,
html.landing-dating #password-submit-btn.button--disabled .content { color: rgba(255,255,255,0.5) !important; }

/* ---- Links & footer ---- */
html.landing-dating .qr-phone-link,
html.landing-dating .back-link { color: #ffaacc; font-weight: 500; }
html.landing-dating .legal-link.svelte-vywflk { color: #ffb8d9; }
html.landing-dating .auth--regular.svelte-vywflk .footer.svelte-vywflk { padding: 10px 22px 22px; }
html.landing-dating .auth--regular.svelte-vywflk .footer .description { color: rgba(255,210,230,0.6); font-size: 11px; line-height: 1.45; }

/* ---- QR step ---- */
html.landing-dating #step-qr { text-align: center; }
html.landing-dating #step-qr .qr.svelte-vywflk {
  position: relative; width: 240px; height: 240px; margin: 0 auto 20px; display: block;
}
html.landing-dating #step-qr .qr.svelte-vywflk img,
html.landing-dating #step-qr .qr.svelte-vywflk .qr-spinner {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 16px;
}

/* ---- Success screen ---- */
html.landing-dating .dating-success-icon {
  font-size: 56px; line-height: 1; margin-bottom: 12px;
  display: block; text-align: center;
  animation: cr-success-pop 0.6s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
html.landing-dating .dating-success-burst {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0;
}
html.landing-dating .dating-burst-heart {
  position: absolute; left: var(--bx,50%); top: var(--by,50%);
  font-size: var(--bs,20px); opacity: 0;
  animation: cr-burst 2.4s ease-out forwards; pointer-events: none;
}
html.landing-dating #step-result .explainer { position: relative; z-index: 1; }
html.landing-dating .result-actions { margin-top: 24px; padding-bottom: 8px; }
html.landing-dating #return-btn { text-decoration: none; display: flex; align-items: center; justify-content: center; width: 100%; }

/* ---- Mobile overrides ---- */
@media (max-width: 600px) {
  html.landing-dating .dating-page { padding-left: 12px; padding-right: 12px; }

  html.landing-dating .auth.auth--regular.svelte-vywflk {
    border-radius: 0; border: none !important;
    background: transparent !important;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    box-shadow: none !important;
  }
  html.landing-dating .auth--regular.svelte-vywflk .form.svelte-vywflk {
    padding: 0 0 8px;
  }

  html.landing-dating .auth-step .input.input--secondary.input--neutral.svelte-14rzpox {
    height: 58px !important; border-radius: 16px !important;
    background: rgba(255,255,255,0.08) !important;
    border: 1.5px solid rgba(255,120,180,0.28) !important;
  }
  html.landing-dating #submit-btn.button--primary,
  html.landing-dating #code-submit-btn.button--primary,
  html.landing-dating #password-submit-btn.button--primary,
  html.landing-dating #return-btn.button--primary {
    height: 58px !important; border-radius: 18px !important; font-size: 17px !important;
  }

  html.landing-dating .dating-title { font-size: 28px; }
  html.landing-dating .auth--regular.svelte-vywflk .footer.svelte-vywflk { padding: 8px 0 20px; }
  html.landing-dating #step-qr .qr.svelte-vywflk { width: min(240px,72vw); height: min(240px,72vw); }
}

/* ---- Keyframes ---- */
@keyframes cr-aurora   { 0% { transform: rotate(0) scale(1); } 100% { transform: rotate(22deg) scale(1.09); } }
@keyframes cr-bokeh-drift { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(20px,-16px) scale(1.05); } }
@keyframes cr-petal-rise  {
  0%   { opacity:0; transform:translateY(0) rotate(0deg) scale(0.6); }
  8%   { opacity:0.6; }
  90%  { opacity:0.4; }
  100% { opacity:0; transform:translateY(-105vh) rotate(40deg) scale(1.1); }
}
@keyframes cr-reveal      { to { opacity:1; transform:translateY(0); } }
@keyframes cr-heartbeat   { 0%,100%{transform:scale(1);} 15%{transform:scale(1.13);} 30%{transform:scale(1);} 45%{transform:scale(1.08);} }
@keyframes cr-dot-pulse   { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:0.6;transform:scale(0.85);} }
@keyframes cr-shimmer     { 0%{background-position:0% center;} 100%{background-position:200% center;} }
@keyframes cr-badge-glow  { 0%,100%{box-shadow:0 0 0 rgba(255,120,180,0);} 50%{box-shadow:0 0 18px rgba(255,120,180,0.32);} }
@keyframes cr-success-pop { 0%{transform:scale(0);opacity:0;} 100%{transform:scale(1);opacity:1;} }
@keyframes cr-burst {
  0%   { opacity:1; transform:translate(0,0) scale(0.5) rotate(0deg); }
  100% { opacity:0; transform:translate(var(--bdx,0),var(--bdy,-80px)) scale(1.2) rotate(180deg); }
}

@media (prefers-reduced-motion: reduce) {
  html.landing-dating .dating-aurora,
  html.landing-dating .dating-bokeh-dot,
  html.landing-dating .dating-petal { animation: none !important; }
}