:root{
  --bg:#101217;
  --bg2:#171a21;
  --panel:#171a21;
  --panel2:#20242d;
  --text:#fff9fc;
  --muted:#b9a7b9;
  --pink:#ff4f88;
  --pink2:#ff2f76;
  --orange:#ff9d59;
  --violet:#8b5cff;
  --green:#62e3b4;
  --line:rgba(255,255,255,.10);
  --glass:rgba(29,14,29,.84);
  --safe-bottom:env(safe-area-inset-bottom);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;background:
  radial-gradient(circle at 50% -10%,#4b2039 0,#211020 35%,#120912 72%),
  #120912;
  color:var(--text);
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
body{overflow-x:hidden}
button,input,textarea{font:inherit}
button{cursor:pointer}
.bg-glow{position:fixed;border-radius:50%;filter:blur(85px);pointer-events:none;z-index:0}
.glow-one{width:260px;height:260px;left:-120px;top:80px;background:#ff2f76;opacity:.18}
.glow-two{width:280px;height:280px;right:-140px;top:360px;background:#a83cff;opacity:.14}
.glow-three{width:240px;height:240px;left:20%;bottom:20px;background:#ff9958;opacity:.08}

#app{
  position:relative;
  z-index:1;
  width:min(100%,560px);
  margin:0 auto;
  padding:14px 15px calc(104px + var(--safe-bottom));
}
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:5px 1px 14px;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  border:0;
  background:none;
  color:#fff;
  padding:0;
  text-align:left;
}
.brand-logo{width:39px;height:47px;filter:drop-shadow(0 0 16px rgba(255,74,134,.25))}
.brand-name{font-size:25px;font-weight:950;letter-spacing:-.7px}
.brand-sub{font-size:9px;color:#c9b8c5;letter-spacing:.7px;margin-top:1px}
.avatar{
  width:42px;height:42px;border-radius:50%;
  border:1px solid rgba(255,255,255,.14);
  color:#fff;background:
  linear-gradient(#241426,#241426) padding-box,
  linear-gradient(135deg,#ff9459,#ff4d8c,#a635ff) border-box;
  box-shadow:0 0 24px rgba(255,69,128,.12);
}
.screen{display:none}
.screen.active{display:block;animation:screenIn .2s ease}
@keyframes screenIn{from{opacity:.3;transform:translateY(6px)}to{opacity:1;transform:none}}

.hero-copy{padding:6px 4px 13px}
.eyebrow{
  font-size:9px;
  line-height:1;
  letter-spacing:1.7px;
  color:#e69ac2;
  font-weight:900;
}
.hero-copy h1,.section-hero h2{
  margin:8px 0 0;
  color:#fff;
  letter-spacing:-1px;
}
.hero-copy h1{
  max-width:440px;
  font-size:31px;
  line-height:1.04;
  font-weight:950;
}
.hero-copy h1 span,.section-hero h2 span{
  background:linear-gradient(90deg,#ff9b63,#ff568d 42%,#e94bff);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero-copy p,.section-hero p{
  color:#baa7b8;
  font-size:12px;
  line-height:1.45;
  margin:10px 0 0;
}
.section-hero{padding:10px 4px 17px}
.section-hero h2{font-size:30px;line-height:1.05;font-weight:950}

.mode-strip{
  display:flex;gap:8px;
  overflow:auto;
  padding:2px 0 12px;
  scrollbar-width:none;
}
.mode-strip::-webkit-scrollbar{display:none}
.chip{
  flex:none;
  white-space:nowrap;
  border:1px solid rgba(255,255,255,.08);
  color:#d2c2cf;
  background:rgba(255,255,255,.045);
  border-radius:999px;
  padding:9px 12px;
  font-size:11px;
  font-weight:800;
  backdrop-filter:blur(12px);
}
.chip.active{
  color:#fff;
  border-color:rgba(255,91,146,.4);
  background:linear-gradient(135deg,rgba(255,86,145,.28),rgba(167,53,255,.18));
  box-shadow:inset 0 0 18px rgba(255,93,143,.08),0 0 20px rgba(255,65,129,.08);
}

.card{
  position:relative;
  overflow:hidden;
  height:min(62vh,590px);
  min-height:465px;
  border-radius:29px;
  background:#241323;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:
    0 28px 90px rgba(0,0,0,.44),
    0 0 0 1px rgba(255,60,130,.04),
    0 0 55px rgba(255,53,130,.10);
}
.card::before{
  content:"";
  position:absolute;
  z-index:2;
  inset:0;
  background:
    linear-gradient(180deg,rgba(21,8,15,.01) 35%,rgba(18,8,15,.22) 52%,rgba(13,5,12,.97) 100%);
}
.card::after{
  content:"♡";
  position:absolute;
  z-index:3;
  right:15px;
  bottom:105px;
  font-size:48px;
  line-height:1;
  color:#ff4d8a;
  opacity:.88;
  transform:rotate(-10deg);
  font-family:cursive;
  text-shadow:0 0 18px rgba(255,65,130,.34);
}
.card-photo{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  filter:saturate(.96) contrast(1.02);
}
.card-content{
  position:absolute;
  z-index:4;
  left:19px;right:19px;bottom:18px;
}
.name-row{display:flex;align-items:flex-end;gap:8px}
.name{
  font-size:30px;
  line-height:1;
  font-weight:950;
  letter-spacing:-.8px;
}
.age{font-size:23px;color:#f4e9ef;font-weight:500}
.meta{
  margin-top:7px;
  color:#f3e8ef;
  font-size:12px;
}
.chem{
  display:inline-flex;
  align-items:center;
  margin-top:10px;
  padding:8px 10px;
  border-radius:12px;
  color:#fff;
  background:linear-gradient(135deg,rgba(255,75,135,.36),rgba(167,53,255,.22));
  border:1px solid rgba(255,136,183,.24);
  backdrop-filter:blur(16px);
  font-size:11px;font-weight:900;
  box-shadow:0 0 20px rgba(255,57,125,.10);
}
.bio{
  margin-top:10px;
  color:#f0e7ed;
  font-size:12px;
  line-height:1.42;
  max-width:87%;
  max-height:53px;
  overflow:hidden;
}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.tag{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(26,12,23,.48);
  color:#fff;
  backdrop-filter:blur(12px);
  border-radius:999px;
  padding:6px 8px;
  font-size:10px;
}
.story-dot{
  position:absolute;
  z-index:5;
  top:14px;left:14px;
  padding:7px 10px;
  border-radius:999px;
  background:linear-gradient(135deg,#ff8b5f,#ff4d8a,#c139ff);
  color:white;font-size:10px;font-weight:900;
  box-shadow:0 8px 22px rgba(255,61,128,.26);
}
.actions{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:21px;
  padding:16px 0 2px;
}
.round{
  width:58px;height:58px;border-radius:50%;
  border:1px solid rgba(255,255,255,.10);
  background:#1d111e;
  color:#fff;
  font-size:28px;
  box-shadow:0 13px 30px rgba(0,0,0,.28);
}
.nope{color:#ff829e}
.like{
  color:white;
  border:0;
  background:linear-gradient(135deg,#ff935d,#ff4f88 55%,#d437ff);
  box-shadow:0 14px 35px rgba(255,59,127,.30);
}
.spark{
  width:49px;height:49px;
  font-size:20px;
  border:0;
  background:linear-gradient(135deg,#ff7f5c,#ff3e86 48%,#a935ff);
  box-shadow:0 12px 28px rgba(210,54,255,.22);
}
.micro-copy{
  text-align:center;
  margin-top:5px;
  color:#d98bb3;
  font-family:cursive;
  font-size:15px;
  transform:rotate(-2deg);
}

.glass,.profile-card,.match-item{
  background:
    linear-gradient(145deg,rgba(42,20,39,.92),rgba(25,12,27,.93));
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 22px 65px rgba(0,0,0,.30);
  backdrop-filter:blur(18px);
}
.panel{padding:18px;border-radius:24px}
.panel::before{
  content:"";
  display:block;
  width:56px;height:3px;border-radius:99px;
  margin:0 0 14px;
  background:linear-gradient(90deg,#ff965d,#ff4e8b,#cc39ff);
}
.big-icon{font-size:46px;filter:drop-shadow(0 0 18px rgba(255,64,130,.18))}
.panel h3{font-size:20px;margin:10px 0 7px}
.panel p{color:var(--muted);font-size:12px;line-height:1.5}

.primary,.secondary,.danger{
  width:100%;
  border-radius:15px;
  padding:13px 15px;
  margin-top:10px;
  font-weight:900;
}
.primary{
  border:0;
  color:#fff;
  background:linear-gradient(90deg,#ff955c,#ff4f87 50%,#ee31a5);
  box-shadow:0 12px 28px rgba(255,53,125,.22);
}
.secondary{
  color:#fff;
  border:1px solid rgba(255,255,255,.09);
  background:#251527;
}
.danger{
  color:#ff94aa;
  background:rgba(255,73,117,.08);
  border:1px solid rgba(255,86,130,.17);
}
.match-list{display:grid;gap:10px}
.match-item{
  display:flex;align-items:center;gap:12px;
  padding:10px;border-radius:20px;
}
.match-item img{
  width:61px;height:61px;
  border-radius:17px;
  object-fit:cover;
}
.match-main{min-width:0;flex:1}
.match-name{font-weight:900;font-size:14px}
.match-sub{
  color:#aa98a9;
  font-size:11px;
  margin-top:4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.badge{
  font-size:10px;font-weight:900;
  color:#fff;
  background:linear-gradient(135deg,#ff5d8d,#b338ff);
  border-radius:999px;
  padding:6px 8px;
}
.profile-card{overflow:hidden;border-radius:25px}
.profile-card .cover{
  width:100%;height:275px;object-fit:cover;display:block;
}
.profile-body{padding:17px}
.profile-body h3{font-size:24px;margin:0}
.label{
  margin:17px 0 7px;
  font-size:9px;
  color:#c994b0;
  text-transform:uppercase;
  letter-spacing:1.3px;
  font-weight:900;
}
.field{
  width:100%;
  color:#fff;
  background:#160d17;
  border:1px solid rgba(255,255,255,.08);
  border-radius:13px;
  padding:12px;
  outline:none;
}
.field:focus{
  border-color:rgba(255,80,140,.44);
  box-shadow:0 0 0 3px rgba(255,57,127,.06);
}
textarea.field{min-height:92px;resize:vertical}
.toggle{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:16px;padding:13px 14px;
  background:#160d17;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
}
.switch{
  width:48px;height:28px;
  padding:3px;border-radius:20px;background:#493647;
}
.switch.on{background:linear-gradient(90deg,#ff6e83,#df3cff)}
.switch i{
  display:block;width:22px;height:22px;
  border-radius:50%;background:#fff;transition:.2s;
}
.switch.on i{transform:translateX(20px)}

.secret-card{text-align:center;padding:18px}
.secret-orb{
  width:98px;height:98px;margin:4px auto 16px;
  display:grid;place-items:center;
  border-radius:50%;
  font-size:38px;font-weight:950;
  background:
    radial-gradient(circle at 35% 25%,#ffb26e 0,#ff4d8d 47%,#9c32ff 100%);
  box-shadow:0 0 55px rgba(255,63,132,.28);
}
.secret-card h3{font-size:20px}
.secret-card p{color:#c3afbf;line-height:1.5;font-size:12px}

.spark-chat{
  height:46vh;min-height:330px;
  overflow:auto;
  display:flex;flex-direction:column;gap:8px;
  padding:12px;
  background:#120b14;
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
}
.msg{
  max-width:80%;
  padding:9px 11px;
  font-size:12px;
  line-height:1.4;
  border-radius:14px;
}
.msg.mine{
  margin-left:auto;
  color:#fff;
  background:linear-gradient(135deg,#ff5c87,#c137ff);
}
.msg.theirs{background:#2a192a;color:#fff}
.chat-row{display:flex;gap:8px;margin-top:10px}
.chat-row input{
  flex:1;color:#fff;
  background:#160d17;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  padding:12px;
}
.chat-row button{
  width:48px;border:0;border-radius:14px;color:#fff;
  background:linear-gradient(135deg,#ff7a62,#ff3f86);
}
.choice-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}

.loading-card{display:grid;place-items:center}
.empty{
  padding:42px 20px;text-align:center;color:#b8a7b6;
}
.empty h3{color:white;margin:11px 0 5px}
.loader{
  width:34px;height:34px;border-radius:50%;
  border:3px solid rgba(255,255,255,.10);
  border-top-color:#ff5b8e;
  animation:spin .8s linear infinite;
  position:absolute;left:50%;top:50%;margin:-17px;
}
@keyframes spin{to{transform:rotate(360deg)}}

.bottom-nav{
  position:fixed;
  z-index:30;
  left:50%;bottom:0;
  transform:translateX(-50%);
  width:min(100%,560px);
  display:grid;
  grid-template-columns:repeat(5,1fr);
  padding:8px 6px calc(8px + var(--safe-bottom));
  background:rgba(18,8,17,.92);
  border-top:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(22px);
}
.nav{
  border:0;background:none;color:#7f677c;
  display:flex;flex-direction:column;
  align-items:center;gap:3px;
  font-size:19px;
}
.nav span{height:24px}
.nav small{font-size:9px;font-weight:850}
.nav.active{
  color:#ff6f9d;
  text-shadow:0 0 16px rgba(255,66,135,.28);
}
.toast{
  position:fixed;z-index:50;
  left:50%;bottom:90px;
  transform:translateX(-50%) translateY(18px);
  max-width:85%;
  opacity:0;pointer-events:none;
  padding:10px 14px;
  border-radius:14px;
  color:#fff;
  font-size:11px;font-weight:900;
  background:linear-gradient(135deg,#ff5d88,#b43cff);
  box-shadow:0 14px 35px rgba(0,0,0,.28);
  transition:.2s;
}
.toast.show{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}
@media(max-height:720px){
  .hero-copy h1{font-size:27px}
  .card{height:55vh;min-height:410px}
}