:root{
  --bg:#070812;
  --bg2:#0b0d1c;
  --card:#0f1224;
  --glass: rgba(18, 18, 26, 0.44);
  --glass2: rgba(24, 24, 34, 0.52);
  --stroke: rgba(255,255,255,0.10);
  --stroke2: rgba(255,255,255,0.08);
  --text:#f2f2f7;
  --muted: rgba(242,242,247,0.64);
  --accent:#8b5cf6;
  --accent2:#b26cff;
  --danger:#ff4d6d;
  --shadow: 0 22px 50px rgba(0,0,0,0.55);
  --r: 24px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; width:100%; overflow:hidden; touch-action:manipulation; }
body{
  margin:0;
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  overflow:hidden;
  -webkit-text-size-adjust:100%;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background: radial-gradient(1000px 600px at 50% -10%, rgba(139,92,246,0.28), transparent 60%),
              radial-gradient(900px 500px at 10% 110%, rgba(178,108,255,0.18), transparent 60%),
              linear-gradient(180deg, var(--bg), var(--bg2));
  color: var(--text);
}

a{ color: rgba(242,242,247,0.85); text-decoration:none; }
a:hover{ text-decoration:underline; }

#app{
  display:flex;
  justify-content:center;
  padding: 18px;
}

.phone{
  width: 390px;
  height: 820px;
  border-radius: 36px;
  overflow:hidden;
  position:relative;
  background: linear-gradient(180deg, rgba(14,14,22,0.92), rgba(10,10,18,0.95));
  box-shadow: 0 20px 70px rgba(0,0,0,0.6);
  border: 1px solid rgba(255,255,255,0.06);
}

.topbar{
  position:absolute;
  top:0; left:0; right:0;
  height: 64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 14px;
  z-index: 20;
  background: linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0));
}

.brand{ display:flex; align-items:center; gap:10px; }
.logo{
  width:34px; height:34px;
  border-radius: 12px;
  display:flex; align-items:center; justify-content:center;
  padding:6px;
  background: radial-gradient(circle at 30% 30%, rgba(178,108,255,0.9), rgba(139,92,246,0.6));
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 10px 24px rgba(0,0,0,0.45);
  font-weight:800;
}
.brandName{ font-weight:750; letter-spacing:0.2px; }
.brandTier{ font-size:12px; color: var(--muted); margin-top:2px; }

.topActions{ display:flex; gap:8px; }
.iconBtn{
  width:40px; height:40px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(15,16,26,0.42);
  color: rgba(242,242,247,0.92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  cursor:pointer;
}
.iconBtn:hover{ border-color: rgba(255,255,255,0.16); }
.ico{ font-size:16px; }
.svgIco{ display:inline-flex; align-items:center; justify-content:center; }
.svgIco svg{ width:18px; height:18px; display:block; }
.iconBtn .svgIco svg{ width:18px; height:18px; }
.tab .svgIco svg{ width:20px; height:20px; }



.viewport{
  position:absolute;
  top:0; bottom:0; left:0; right:0;
  padding-top: 64px;
  padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  overflow:auto;
  -webkit-overflow-scrolling: touch;
}


.tabbar{
  position:absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  height: 58px;
  border-radius: 20px;
  display:flex;
  align-items:center;
  justify-content:space-around;
  background: rgba(15, 15, 22, 0.52);
  border: 1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.55);
  z-index: 30;
}

.tab{
  width: 52px;
  height: 46px;
  border:0;
  background: transparent;
  color: rgba(242,242,247,0.72);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 3px;
  cursor:pointer;
}
.tab .tIco{ font-size:16px; line-height:16px; }
.tab .tLbl{ font-size:9px; }
.tab.active{ color: rgba(242,242,247,0.98); }
.tab.active .tIco{ filter: drop-shadow(0 0 10px rgba(139,92,246,0.6)); }

.page{ width:100%; height:100%; position:relative; animation: pageIn 180ms ease both; display:flex; flex-direction:column; }
@keyframes pageIn{ from{ opacity:0; transform: translateY(6px);} to{ opacity:1; transform: translateY(0);} }

.glass{
  background: var(--glass);
  border: 1px solid var(--stroke);
  border-radius: var(--r);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  box-shadow: var(--shadow);
}

.muted{ color: var(--muted); }
.accent{ color: rgba(178,108,255,0.95); }

/* Auth */
.authPage{ display:flex; align-items:center; justify-content:center; padding: 22px; }
.authCard{ width:100%; padding: 22px; }
.authTitle{ font-weight:800; font-size: 22px; }
.authSub{ margin-top:6px; color: var(--muted); font-size:13px; }
.seg{ display:flex; gap:10px; margin-top:16px; }
.segBtn{
  flex:1;
  height: 40px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.20);
  color: rgba(242,242,247,0.80);
  cursor:pointer;
}
.segBtn.active{
  border-color: rgba(178,108,255,0.35);
  background: rgba(139,92,246,0.20);
  color: rgba(242,242,247,0.98);
}
.form{ margin-top: 14px; display:flex; flex-direction:column; gap: 12px; }
.field label{ display:block; font-size:12px; color: rgba(242,242,247,0.70); margin-bottom:6px; }
.field input, .field textarea, .field select{
  width:100%;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.28);
  color: rgba(242,242,247,0.95);
  padding: 12px 12px;
  outline:none;
}
.field textarea{ resize:none; }
.primaryBtn{
  margin-top: 4px;
  height: 46px;
  border-radius: 16px;
  border: 1px solid rgba(178,108,255,0.35);
  background: linear-gradient(180deg, rgba(178,108,255,0.92), rgba(139,92,246,0.85));
  color: white;
  font-weight: 800;
  cursor:pointer;
  box-shadow: 0 16px 36px rgba(139,92,246,0.25);
}
.primaryBtn:active{ transform: translateY(1px); }

.tinyLinks{ margin-top: 12px; font-size:12px; display:flex; gap:8px; justify-content:center; align-items:center; color: var(--muted); }
.demoHint{ margin-top: 12px; font-size: 11px; color: rgba(242,242,247,0.60); }
.demoHint code{ color: rgba(242,242,247,0.90); }


.authPage{ position:relative; overflow:hidden; }
.authHeroGlow{ position:absolute; inset:-10% -20% auto -20%; height:320px; background:radial-gradient(closest-side, rgba(133,92,255,.30), rgba(133,92,255,0) 72%); filter: blur(8px); pointer-events:none; }
.authCardPremium{ position:relative; max-width:460px; margin:0 auto; border-radius:28px; padding:24px; }
.authBrandRow{ display:flex; align-items:center; gap:14px; margin-bottom:6px; }
.authBrandBadge{ width:54px; height:54px; border-radius:18px; display:flex; align-items:center; justify-content:center; font-size:26px; font-weight:900; color:#fff; background:linear-gradient(180deg, rgba(176,110,255,.96), rgba(112,79,235,.92)); box-shadow:0 18px 40px rgba(112,79,235,.36); }
.authEyebrow{ font-size:11px; letter-spacing:.24em; color:rgba(242,242,247,.54); font-weight:800; }
.authModeSeg{ margin-top:14px; }
.authFormModern{ margin-top:14px; }
.fieldRowDouble{ display:grid; grid-template-columns:1fr 110px; gap:12px; }
.authDivider{ display:flex; align-items:center; gap:12px; margin:16px 0 10px; color:rgba(242,242,247,.55); font-size:12px; text-transform:uppercase; letter-spacing:.08em; }
.authDivider::before,.authDivider::after{ content:''; height:1px; flex:1; background:rgba(255,255,255,.10); }
.authAppleBtn{ margin-top:16px; height:54px; border-radius:18px; font-size:15px; }
.authSubmitBtn{ margin-top:8px; }
.authHelperRow{ display:flex; gap:10px; margin-top:14px; }
.authHelperRow .chip{ flex:1; justify-content:center; display:flex; align-items:center; }
@media (max-width:420px){ .fieldRowDouble{ grid-template-columns:1fr 92px; } }

/* Onboarding */
.onboardPage{ display:flex; align-items:center; justify-content:center; }
.onboardHero{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding: 24px; }
.onboardGlow{ position:absolute; inset:-30px; background: radial-gradient(700px 420px at 50% 25%, rgba(139,92,246,0.28), transparent 65%); filter: blur(0px); }
.onboardCard{ position:relative; width:100%; padding: 22px; }
.onTitle{ font-size: 24px; font-weight: 900; }
.onText{ margin-top: 8px; color: var(--muted); font-size: 13px; }
.onList{ margin-top: 14px; display:flex; flex-direction:column; gap: 10px; }
.onItem{ display:flex; gap:10px; align-items:flex-start; }
.dot{ width:10px; height:10px; border-radius: 999px; background: rgba(178,108,255,0.95); margin-top:5px; box-shadow: 0 0 16px rgba(139,92,246,0.5); }

/* Discover */
.discoverPage{ padding: 14px; }
.filtersBar{ position:sticky; top:0; z-index: 20; display:flex; justify-content:space-between; align-items:center; gap:12px; padding: 12px 14px; margin: 0 0 10px; background: rgba(0,0,0,0.12); backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,0.06); border-radius: 18px; }
.chip{
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.22);
  color: rgba(242,242,247,0.88);
  cursor:pointer;
}

.deckStage{ position:absolute; inset: 64px 14px 120px 14px; display:flex; align-items:center; justify-content:center; }

.card{
  position:absolute;
  width: 100%;
  height: 100%;
  border-radius: 28px;
  overflow:hidden;
  box-shadow: 0 26px 60px rgba(0,0,0,0.58);
  border: 1px solid rgba(255,255,255,0.10);
  background: #101020;
  touch-action: none;
}
.card.next{ transform: scale(0.965) translateY(8px); opacity: 0.65; filter: blur(0.2px); }
.cardBg{ position:absolute; inset:0; background-size: cover; background-position: center; }
.cardBg.isBlurred{ filter: blur(18px) saturate(0.9) contrast(1.05); transform: scale(1.07); }
.cardOverlay{ position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,0.10), rgba(0,0,0,0.65) 70%, rgba(0,0,0,0.82)); }

.cardGlass{
  position:absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  padding: 14px;
  border-radius: 22px;
  background: var(--glass2);
  border: 1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

.revealBar{ position:absolute; left:14px; right:14px; bottom:112px; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px; border-radius:18px; background: var(--glass2); border: 1px solid rgba(255,255,255,0.10); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); }
.revealTxt{ font-size: 13px; color: rgba(242,242,247,0.92); }
.revealBtn{ padding:10px 14px; border-radius:14px; }

.qmHero{ height:120px; border-radius:18px; margin:12px 0; background-size:cover; background-position:center; border:1px solid rgba(255,255,255,0.10); }
.qmHero.isBlurred{ filter: blur(14px) saturate(0.9); transform: scale(1.03); }
.qmInput{ width:100%; min-height:92px; resize:none; border-radius:16px; padding:12px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10); color:#fff; outline:none; font-size:15px; line-height:1.35; }
.qmInput::placeholder{ color: rgba(242,242,247,0.50); }

.badgeRow{ display:flex; gap:8px; }
.pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 6px 10px;
  font-size: 12px;
  color: rgba(242,242,247,0.90);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 999px;
  background: rgba(0,0,0,0.22);
}
.dotOnline{ width:8px; height:8px; border-radius: 999px; background: rgba(242,242,247,0.25); }
.dotOnline.on{ background: rgba(80, 255, 150, 0.9); box-shadow: 0 0 10px rgba(80,255,150,0.6); }

.titleRow{ margin-top: 10px; display:flex; justify-content:space-between; align-items:center; }
.name{ font-size: 22px; font-weight: 900; }
.age{ color: rgba(242,242,247,0.85); font-weight: 700; }
.subRow{ margin-top: 4px; font-size: 12px; color: rgba(242,242,247,0.68); }
.bio{ margin-top: 8px; font-size: 13px; color: rgba(242,242,247,0.88); line-height: 1.25; }
.tags{ margin-top: 10px; display:flex; gap:8px; flex-wrap:wrap; }
.tag{ font-size: 12px; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(178,108,255,0.25); background: rgba(139,92,246,0.12); }

.iconBtn2{
  width:34px; height:34px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.22);
  color: rgba(242,242,247,0.95);
  cursor:pointer;
}


.iconBtnMini{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: var(--text);
  width:28px;
  height:28px;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.iconBtnMini:active{ transform: scale(.98); }

.actionsRow{
  position:absolute;
  left: 0; right: 0;
  bottom: 88px;
  display:flex;
  justify-content:center;
  gap: 16px;
  z-index: 15;
}
.actionBtn{
  width: 62px;
  height: 62px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(15,16,24,0.55);
  color: rgba(242,242,247,0.92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  cursor:pointer;
  box-shadow: 0 18px 40px rgba(0,0,0,0.55);
}
.actionBtn .ico{ font-size: 20px; }
.actionBtn.primary{
  width: 70px;
  height: 70px;
  border-color: rgba(178,108,255,0.30);
  background: rgba(139,92,246,0.25);
}

.stamps{ position:absolute; inset:0; pointer-events:none; }
.stamp{ position:absolute; top: 28px; padding: 10px 14px; border-radius: 14px; font-weight: 900; letter-spacing: 2px; opacity: 0; }
.stamp.like{ left: 18px; border: 2px solid rgba(80,255,150,0.85); color: rgba(80,255,150,0.95); transform: rotate(-12deg); }
.stamp.nope{ right: 18px; border: 2px solid rgba(255,77,109,0.85); color: rgba(255,77,109,0.95); transform: rotate(12deg); }

.card.dragging{ transition:none; }
.card.fly{ transition: transform 160ms ease-out; }

/* Lists */
.listHeader{ padding: 12px 14px; }
.hTitle{ font-size: 18px; font-weight: 900; }
.list{ padding: 0 12px 12px; flex:1; overflow:auto; }

.row{
  width:100%;
  border:0;
  background: transparent;
  padding: 0;
  text-align:left;
  cursor:pointer;
}
.glassRow{
  display:flex;
  gap: 12px;
  padding: 12px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(12, 12, 18, 0.40);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 14px 34px rgba(0,0,0,0.45);
  margin-bottom: 10px;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.glassRow:hover{ transform: translateY(-1px); box-shadow: 0 18px 42px rgba(0,0,0,0.52); border-color: rgba(178,108,255,0.18); }
.glassRow:active{ transform: translateY(0px) scale(0.995); }
.avatar{ width:48px; height:48px; border-radius: 16px; background-size: cover; background-position: center; border: 1px solid rgba(255,255,255,0.10); }
.rowMid{ flex:1; display:flex; flex-direction:column; gap: 6px; }
.rowTop{ display:flex; justify-content:space-between; }
.rowName{ font-weight: 850; }
.rowName{ color: var(--text); }
.rowSub{ font-size: 12px; }
.rowTime{ font-size: 11px; }
.chev{ color: rgba(242,242,247,0.55); font-size: 22px; }

/* Chat */
.chatPage{ display:flex; flex-direction:column; height:100%; padding: 12px; gap: 10px; }
.chatTop{ height: 58px; display:flex; align-items:center; gap: 10px; padding: 10px 12px; border-radius: 20px; }
.chatTitle{ flex:1; }
.chatName{ font-weight: 900; }
.chatName{ color: var(--text); }
.chatStatus{ font-size: 11px; }
.chatMsgs{ flex:1; overflow:auto; padding: 4px 2px; display:flex; flex-direction:column; gap: 10px; }
.bubble{ max-width: 78%; padding: 10px 12px; border-radius: 18px; border: 1px solid rgba(255,255,255,0.08); }
.bubble.them{ background: rgba(255,255,255,0.07); align-self:flex-start; }
.bubble.me{ background: rgba(139,92,246,0.35); border-color: rgba(178,108,255,0.22); align-self:flex-end; }
.bText{ font-size: 13px; line-height: 1.25; }
.bTime{ font-size: 10px; margin-top: 6px; text-align:right; }

.composer{ height: 58px; display:flex; align-items:center; gap: 10px; padding: 10px 12px; border-radius: 20px; }
.composerInput{ flex:1; height: 40px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.10); background: rgba(0,0,0,0.22); color: rgba(242,242,247,0.95); padding: 0 12px; outline:none; }
.sendBtn{ width: 40px; height: 40px; border-radius: 14px; border: 1px solid rgba(178,108,255,0.35); background: rgba(139,92,246,0.25); color: rgba(242,242,247,0.95); cursor:pointer; }

/* Profile */
.profileHero{ position:absolute; inset:0; }
.heroBg{ position:absolute; inset:0; background-size: cover; background-position: center; transform: scale(1.02); }
.heroBg.isBlurred{ filter: blur(16px) saturate(0.9); transform: scale(1.07); }
.revealRow{ margin-top: 10px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.heroShade{ position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.70) 65%, rgba(0,0,0,0.88)); }
.heroTop{ position:absolute; top: 12px; left: 12px; right: 12px; display:flex; justify-content:space-between; z-index: 2; }
.profileGlass{ position:absolute; left: 12px; right: 12px; bottom: 120px; padding: 14px; border-radius: 24px; }
.nameLine{ font-size: 22px; font-weight: 900; }
.vBadge{ display:inline-block; margin-left:8px; padding:4px 8px; border-radius:999px; font-size:11px; font-weight:900; background: linear-gradient(135deg, rgba(170,120,255,0.28), rgba(120,90,255,0.18)); border:1px solid rgba(170,120,255,0.65); vertical-align: middle; box-shadow: 0 0 0 rgba(170,120,255,0.0); animation: vBadgePulse 2.4s ease-in-out infinite; }
@keyframes vBadgePulse{ 0%{ box-shadow: 0 0 0 rgba(170,120,255,0.0);} 50%{ box-shadow: 0 0 18px rgba(170,120,255,0.35);} 100%{ box-shadow: 0 0 0 rgba(170,120,255,0.0);} }
.subLine{ margin-top: 4px; font-size: 12px; }
.section{ margin-top: 14px; }
.secTitle{ font-weight: 900; margin-bottom: 8px; }
.photoRow{ display:flex; gap: 8px; flex-wrap:wrap; }
.photoThumb{ width: 92px; height: 92px; border-radius: 18px; background-size: cover; background-position:center; border: 1px solid rgba(255,255,255,0.10); }

/* Photo grid on profile: reorder + set profile pic */
.photoGrid{ display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.photoCell{ position:relative; aspect-ratio: 3/4; border-radius: 18px; background-size: cover; background-position:center; border: 1px solid rgba(255,255,255,0.10); overflow:hidden; box-shadow: 0 14px 34px rgba(0,0,0,0.35); }
.photoCell.dragover{ outline: 2px solid rgba(160,110,255,0.95); }
.photoCell.dragging{ opacity: 0.65; }
.photoBadge{ position:absolute; top: 8px; left: 8px; padding: 6px 10px; border-radius: 999px; font-size: 12px; font-weight: 900; background: rgba(0,0,0,0.45); border: 1px solid rgba(255,255,255,0.16); }
.photoActions{ position:absolute; top: 8px; right: 8px; display:flex; gap: 8px; }
.photoAction{ width: 34px; height: 34px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.16); background: rgba(0,0,0,0.45); color: rgba(255,255,255,0.95); font-weight: 900; cursor:pointer; }
.photoAction:active{ transform: scale(0.98); }
.profileActions{ position:absolute; left:0; right:0; bottom: 88px; display:flex; justify-content:center; gap: 16px; z-index: 3; }

/* Settings */
.mePage{ padding: 12px; overflow:auto; }
.meHeader{ padding: 14px; margin-bottom: 10px; }
.meTitle{ font-size: 18px; font-weight: 900; }
.meCard{ padding: 14px; margin-bottom: 10px; }
.grid2{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sheetBtn{
  height: 46px;
  width: 100%;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.20);
  color: rgba(242,242,247,0.92);
  cursor:pointer;
}
.sheetBtn.danger{ border-color: rgba(255,77,109,0.35); color: rgba(255,77,109,0.95); background: rgba(255,77,109,0.10); }

/* Sheets / Modals */
/* Use fixed positioning so sheets always fit the viewport on mobile-sized layouts */
.sheet{ position:fixed; inset:0; z-index: 60; }
.sheetBackdrop{ position:absolute; inset:0; background: rgba(0,0,0,0.55); }
.sheetBody{ position:absolute; left: 12px; right: 12px; bottom: 12px; padding: 14px; border-radius: 22px; }
.sheetTitle{ font-size: 16px; font-weight: 900; margin-bottom: 10px; }
.sheetBtn{ margin-top: 8px; }

.matchModal{ position:fixed; inset:0; z-index: 80; display:flex; align-items:center; justify-content:center; padding: 16px; }
.matchBackdrop{ position:absolute; inset:0; background: rgba(0,0,0,0.60); }
.matchCard{ position:relative; width: min(360px, 92vw); padding: 18px; text-align:center; }
.matchTitle{ font-size: 22px; font-weight: 950; }
.matchSub{ margin-top: 6px; font-size: 12px; }
.matchAvatar{ width: 110px; height:110px; border-radius: 28px; margin: 14px auto; background-size: cover; background-position:center; border: 1px solid rgba(255,255,255,0.10); }
.matchBtns{ display:flex; flex-direction:column; gap: 10px; }

/* Info */
.infoPage{ padding: 12px; }
.infoTop{ display:flex; align-items:center; justify-content:space-between; padding: 6px 0 10px; }
.infoTitle{ font-weight: 950; }
.infoBody{ padding: 14px; }
.p{ margin: 0 0 10px 0; font-size: 13px; color: rgba(242,242,247,0.88); line-height: 1.35; }

/* Empty */
.empty{ text-align:center; padding: 18px; }
.emptyTitle{ font-weight: 950; font-size: 18px; }
.emptySub{ margin-top: 6px; color: var(--muted); font-size: 13px; }

/* Toast */
.toast{
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(10px);
  opacity: 0;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(15,16,26,0.70);
  border: 1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  color: rgba(242,242,247,0.95);
  font-size: 13px;
  z-index: 200;
  transition: opacity 180ms ease, transform 180ms ease;
}
.toast.show{ opacity: 1; transform: translateX(-50%) translateY(0px); }

/* Action sheet (scoped so it doesn't break modal sheets) */
.sheetOverlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.55);
  backdrop-filter:blur(6px);
  display:flex;
  align-items:flex-end;
  justify-content:center;
  z-index:9999;
  padding:18px;
}
.sheetOverlay .actionSheet{
  width:min(520px,100%);
  border-radius:24px;
  padding:14px 14px 12px;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.14);
  box-shadow:0 18px 60px rgba(0,0,0,0.45);
  animation:sheetIn 180ms ease both;
}
@keyframes sheetIn{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:translateY(0);}}
.sheetOverlay .sheetTitle{font-size:14px;font-weight:800;opacity:0.9;margin:2px 6px 10px;}
.sheetOverlay .sheetActions{display:flex;flex-direction:column;gap:10px;}
.sheetOverlay .sheetBtn{
  width:100%;
  text-align:left;
  border:0;
  border-radius:16px;
  padding:14px 14px;
  background:rgba(255,255,255,0.08);
  color:rgba(255,255,255,0.95);
  font-weight:800;
  cursor:pointer;
}
.sheetOverlay .sheetBtn.danger{background:rgba(255,45,85,0.16);}
.sheetOverlay .sheetBtn:active{transform:scale(0.99);}
.sheetOverlay .sheetCancel{
  margin-top:10px;
  width:100%;
  border:0;
  border-radius:16px;
  padding:14px 14px;
  background:rgba(255,255,255,0.06);
  color:rgba(255,255,255,0.8);
  font-weight:800;
  cursor:pointer;
}

/* Curated + Store */
.panelHead{ padding: 14px; margin: 12px; border-radius: 18px; }
.panelTitle{ font-weight: 950; font-size: 16px; margin-bottom: 6px; }

.curatedList{ padding: 0 12px 14px; display: grid; gap: 10px; }
.curCard{ display:flex; gap: 10px; padding: 10px; border-radius: 18px; align-items: center; }
.curThumb{ width: 64px; height: 64px; border-radius: 16px; background-size: cover; background-position: center; flex: 0 0 auto; border: 1px solid rgba(255,255,255,0.10); }
.curThumb.isBlurred{ filter: blur(10px) saturate(0.9); transform: scale(1.05); }
.curMeta{ flex: 1; min-width: 0; }
.curName{ font-weight: 900; }
.curBio{ margin-top: 4px; font-size: 12px; color: rgba(242,242,247,0.82); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.miniBtn{ padding: 10px 12px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.12); background: rgba(10,10,16,0.35); color: rgba(242,242,247,0.95); font-weight: 800; }

.storeCard{ padding: 14px; margin: 12px; border-radius: 18px; }
.storeGrid{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.storeBtn{ text-align:left; padding: 12px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.12); background: rgba(10,10,16,0.35); color: rgba(242,242,247,0.95); }
.storeAmt{ font-weight: 900; }

.logo svg{ width:22px; height:22px; }

.topbar.scrolled{
  background: rgba(8,8,14,0.55);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.tab .tIco{ transition: transform .18s ease, filter .18s ease, opacity .18s ease; opacity: 0.92; }
.tab.active .tIco{ transform: translateY(-1px) scale(1.08); filter: drop-shadow(0 0 10px rgba(139,92,246,0.45)); opacity: 1; }
.tab:active .tIco{ transform: translateY(0) scale(0.98); }



/* --- Likes (Liked Me) --- */
.likesPage .pageTitleRow{display:flex;flex-direction:column;gap:6px;margin:8px 8px 14px}
.likesPage .pageTitle{font-size:20px;font-weight:800;letter-spacing:.2px}
.likesPage .pageSub{font-size:12px;opacity:.7}
.likesGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:0 8px 18px}
.likeCard{border:1px solid var(--stroke2);background:var(--glass);backdrop-filter: blur(18px);-webkit-backdrop-filter: blur(18px);border-radius:18px;overflow:hidden;position:relative;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.likeImg{height:170px;background-size:cover;background-position:center}
.likeMeta{padding:10px 10px 12px;display:flex;flex-direction:column;gap:6px}
.likeName{font-weight:800;font-size:14px}
.likeCity{font-size:12px;opacity:.7}
.likeCard.blurred .likeImg{filter:blur(18px) saturate(1.1);transform:scale(1.05)}
.likeCard.blurred::after{content:'';position:absolute;inset:0;background:linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.10) 60%, rgba(0,0,0,0));pointer-events:none}
.likeCard .btn.mini{padding:8px 10px;font-size:12px}
@media (max-width:380px){.likeImg{height:150px}}


.likedList{ display:flex; flex-direction:column; gap:12px; padding: 12px 0 90px; }
.likedCard{ display:flex; align-items:center; gap:12px; padding:12px; }
.likedCard .curThumb{ width: 74px; height: 96px; border-radius: 18px; flex:0 0 auto; }
.likedActions{ display:flex; flex-direction:column; gap:8px; margin-left:auto; }
.likedActions .miniBtn{ width: 92px; }


.infoSection{ margin-top:14px; }
.infoSection .h{ font-weight:900; margin:12px 0 6px; }
.infoSection .bul{ margin:6px 0 0 18px; padding:0; }
.infoSection .bul li{ margin:6px 0; }


/* Bottom sheet rules */
.sheetBackdrop{position:fixed;inset:0;background:rgba(0,0,0,0.55);z-index:999;}
.bottomSheet{position:fixed;left:0;right:0;bottom:0;z-index:1000;border-top-left-radius:22px;border-top-right-radius:22px;background:rgba(15,23,42,0.90);border:1px solid rgba(255,255,255,0.10);backdrop-filter:blur(22px);box-shadow:0 -20px 60px rgba(0,0,0,0.55);padding:10px 14px 18px;max-height:70vh;overflow:auto;}
.sheetHandle{width:44px;height:5px;border-radius:999px;background:rgba(255,255,255,0.18);margin:6px auto 10px;}
.sheetHeader{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 2px 10px;}
.sheetHeader h3{font-size:16px;margin:0;color:rgba(255,255,255,0.95);}
.sheetClose{width:34px;height:34px;border-radius:12px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.10);color:rgba(255,255,255,0.9);font-size:16px;}
.rulesList{margin:0;padding-left:18px;color:rgba(255,255,255,0.85);line-height:1.5;}
.rulesList li{margin:10px 0;}
.sheetTip{margin-top:14px;padding:12px;border-radius:16px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.10);color:rgba(255,255,255,0.82);}
.noScroll{overflow:hidden;}


/* Apple Sign In button */
.appleBtn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:14px 16px;border-radius:16px;border:1px solid rgba(255,255,255,.16);background:rgba(20,20,20,.85);color:#fff;font-weight:700;margin-top:10px;}
.appleBtn:active{transform:scale(.99)}
.appleIcon{width:18px;height:18px;display:inline-block}


/* --- HOTFIX: bottom nav not clickable (touch blocked by overlay) --- */
.bottomNav, .bottomNav * { pointer-events: auto !important; }
.bottomNav { position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; z-index: 999999 !important; }

/* Common overlays/effects should not steal taps */
.giftFX, .bgFX, .overlay, .glassOverlay, .fxLayer, .sparkles, .noise, .vignette {
  pointer-events: none !important;
}


/* === Voice Intro (Waveform) === */
.voiceIntroBox{
  margin-top:14px;
  padding:14px;
  border-radius:22px;
}
.voiceIntroRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.waveWrap{
  display:flex;
  align-items:center;
  gap:10px;
  flex:1;
  min-width:0;
}
.waveBars{
  display:flex;
  align-items:flex-end;
  gap:3px;
  height:22px;
  flex:1;
  min-width:120px;
}
.waveBars .bar{
  width:4px;
  height:6px;
  border-radius:4px;
  background: rgba(255,255,255,0.65);
  transition: height 120ms ease;
}
.waveMeta{
  white-space:nowrap;
  font-size:12px;
}
.waveBtn{
  padding:10px 14px;
  border-radius:16px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.92);
  font-weight:800;
}
.voiceLocked{
  opacity:0.85;
  font-size:12px;
}


.storyRing{
  width:64px;
  height:64px;
  border-radius:999px;
  padding:2px;
  background: linear-gradient(135deg, rgba(178,108,255,0.9), rgba(139,92,246,0.9));
}
.storyAv{
  width:100%;
  height:100%;
  border-radius:999px;
  background-size:cover;
  background-position:center;
  border:2px solid rgba(0,0,0,0.35);
}
.storyBtn{
  border:none;
  background:transparent;
  color:inherit;
  text-align:center;
}

/* ===== V4 premium rebuild overrides ===== */
.phone{
  background:
    radial-gradient(560px 280px at 50% -8%, rgba(127,86,255,.34), transparent 58%),
    radial-gradient(320px 240px at 110% 10%, rgba(196,113,255,.16), transparent 60%),
    linear-gradient(180deg, #0b0b17 0%, #0a0d20 55%, #090b16 100%);
}
.topbar{
  height:72px;
  padding:14px 16px;
  background:linear-gradient(180deg, rgba(4,5,14,.85), rgba(4,5,14,.18));
}
.viewport{ padding-top:72px; padding-bottom:92px; }
.logo{ width:38px; height:38px; border-radius:14px; }
.brandName{ font-size:18px; font-weight:900; }
.brandTier{ letter-spacing:.2px; }
.iconBtn{ width:42px; height:42px; border-radius:15px; }
.tabbar{ left:14px; right:14px; bottom:14px; height:66px; border-radius:24px; background:rgba(13,15,27,.72); }
.tab{ width:56px; height:54px; gap:4px; }
.tab .tLbl{ font-size:10px; }
.tab.active{ color:#fff; }
.tab.active .tLbl{ font-weight:800; }
.discoverWrap,.modernListPage{ padding:16px; display:flex; flex-direction:column; gap:14px; }
.sectionHero,.discoverTop,.featureStrip,.premiumBanner,.profileSection,.profileHeroCard,.wingmanHero{ padding:16px; border-radius:26px; }
.eyebrow{ font-size:11px; text-transform:uppercase; letter-spacing:1.3px; color:rgba(242,242,247,.56); font-weight:800; }
.heroTitle{ font-size:28px; line-height:1.05; font-weight:950; letter-spacing:-.03em; margin-top:6px; }
.heroSub,.featureSub,.emptyBlockSub,.emptyHeroSub,.conversationPreview,.historySub{ color:rgba(242,242,247,.68); font-size:13px; line-height:1.45; }
.heroMeta{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.discoverTop{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; }
.wingmanHero{ background:linear-gradient(180deg, rgba(66,48,124,.55), rgba(17,18,34,.58)); }
.wingmanBadge,.premiumTag{ display:inline-flex; padding:7px 10px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); font-size:11px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.wingmanTitle,.featureTitle,.premiumTitle{ margin-top:10px; font-size:20px; line-height:1.15; font-weight:900; }
.heroActionsRow{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
.heroActionsRow.center{ justify-content:center; }
.chip.soft,.pill.soft{ background:rgba(255,255,255,.06); }
.storyRail{ display:flex; gap:12px; overflow:auto; padding:2px 0 2px 2px; }
.modernStory{ min-width:72px; background:none; border:0; color:var(--text); padding:0; }
.storyName{ margin-top:6px; font-size:11px; max-width:72px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.modernDeck{ min-height:560px; display:flex; align-items:stretch; justify-content:center; }
.modernDeck.isEmpty{ min-height:420px; }
.modernProfileCard{ position:relative; min-height:560px; }
.modernOverlay{ background:linear-gradient(180deg, rgba(2,2,7,.05) 0%, rgba(2,2,8,.22) 40%, rgba(4,4,9,.78) 72%, rgba(6,6,10,.94) 100%); }
.cardTopMeta{ position:absolute; top:16px; left:16px; right:16px; display:flex; justify-content:space-between; gap:10px; z-index:2; }
.cardBottomPanel{ position:absolute; left:16px; right:16px; bottom:16px; z-index:2; display:flex; flex-direction:column; gap:12px; }
.cardIdentityRow{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.cardName{ font-size:32px; line-height:.98; letter-spacing:-.04em; font-weight:950; }
.cardMini{ margin-top:6px; font-size:13px; color:rgba(242,242,247,.72); max-width:240px; }
.modernChips{ display:flex; flex-wrap:wrap; gap:8px; }
.interestChip{ display:inline-flex; padding:8px 12px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); font-size:12px; }
.bioBlock{ padding:14px 16px; border-radius:20px; background:rgba(11,12,22,.54); border:1px solid rgba(255,255,255,.10); color:rgba(242,242,247,.92); line-height:1.42; }
.promptStrip{ display:flex; gap:10px; overflow:auto; }
.promptMini{ min-width:180px; padding:12px; border-radius:18px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10); }
.promptQ{ font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:rgba(242,242,247,.52); font-weight:800; }
.promptA{ margin-top:8px; font-size:13px; line-height:1.35; }
.actionDock{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; padding:10px; border-radius:24px; }
.actionPill{ height:56px; border:1px solid rgba(255,255,255,.10); border-radius:18px; color:#fff; font-weight:900; background:rgba(15,16,24,.72); }
.actionPill.danger{ background:linear-gradient(180deg, rgba(255,77,109,.28), rgba(255,77,109,.16)); }
.actionPill.feature{ background:linear-gradient(180deg, rgba(139,92,246,.34), rgba(139,92,246,.18)); }
.actionPill.success{ background:linear-gradient(180deg, rgba(63,213,143,.28), rgba(63,213,143,.16)); }
.emptyHero,.emptyBlock{ padding:28px 20px; border-radius:26px; text-align:center; }
.emptyHero.compact{ padding:22px 18px; }
.emptyHeroIcon{ width:56px; height:56px; border-radius:18px; display:inline-flex; align-items:center; justify-content:center; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); font-size:22px; }
.emptyHeroTitle,.emptyBlockTitle{ margin-top:12px; font-size:24px; line-height:1.05; font-weight:950; letter-spacing:-.03em; }
.likesGrid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.likePreviewCard{ position:relative; min-height:230px; overflow:hidden; border-radius:24px; border:1px solid rgba(255,255,255,.10); background:rgba(9,10,18,.82); }
.likePreviewImg,.curatedFeatureImg,.profileHeroPhoto{ position:absolute; inset:0; background-size:cover; background-position:center; }
.likePreviewShade,.curatedFeatureShade,.profileHeroShade{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(7,8,16,.02), rgba(7,8,16,.22) 45%, rgba(7,8,16,.88)); }
.likePreviewMeta,.curatedFeatureMeta{ position:absolute; left:14px; right:14px; bottom:14px; z-index:2; }
.likePreviewName,.curatedFeatureName,.profileHeroName{ font-size:24px; line-height:1.02; font-weight:950; letter-spacing:-.03em; }
.likePreviewSub,.curatedFeatureSub,.profileHeroSub{ margin-top:6px; font-size:13px; color:rgba(242,242,247,.72); }
.lockedLike{ position:absolute; right:14px; top:14px; z-index:2; padding:8px 10px; border-radius:999px; background:rgba(8,9,19,.58); border:1px solid rgba(255,255,255,.12); font-size:11px; font-weight:900; }
.conversationList,.curatedStack,.historyList,.productGrid{ display:flex; flex-direction:column; gap:12px; }
.conversationCard{ display:flex; align-items:center; gap:12px; padding:14px; border-radius:22px; }
.conversationAvatar{ width:58px; height:58px; border-radius:18px; background-size:cover; background-position:center; border:1px solid rgba(255,255,255,.10); flex:0 0 auto; }
.conversationMain{ flex:1; min-width:0; }
.conversationTop{ display:flex; justify-content:space-between; gap:10px; align-items:center; }
.conversationName{ font-size:17px; font-weight:900; }
.conversationTime{ font-size:12px; color:rgba(242,242,247,.54); }
.conversationPreview{ margin-top:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.conversationStatus{ width:10px; height:10px; border-radius:999px; background:#55f29c; box-shadow:0 0 16px rgba(85,242,156,.55); }
.curatedFeatureCard{ position:relative; min-height:220px; overflow:hidden; border-radius:26px; border:1px solid rgba(255,255,255,.10); background:rgba(11,11,18,.8); }
.premiumBanner{ display:flex; justify-content:space-between; gap:12px; align-items:flex-end; background:linear-gradient(180deg, rgba(57,43,112,.55), rgba(15,16,28,.66)); }
.productGrid{ display:grid; grid-template-columns:1fr 1fr; }
.storeProductCard{ padding:16px; border-radius:24px; min-height:174px; display:flex; flex-direction:column; justify-content:space-between; }
.storeProductTitle{ font-size:22px; line-height:1.05; font-weight:950; letter-spacing:-.03em; margin-top:10px; }
.storeProductPrice{ margin-top:8px; font-size:15px; color:rgba(242,242,247,.72); font-weight:700; }
.buyChip{ margin-top:18px; height:42px; }
.sectionMiniTitle{ font-size:16px; font-weight:900; margin-bottom:10px; }
.historyRow{ padding:14px; border-radius:20px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.historyTitle{ font-weight:850; }
.historyBadge{ padding:8px 10px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10); font-size:11px; font-weight:900; }
.profileHeroCard{ position:relative; min-height:290px; overflow:hidden; }
.profileHeroMeta{ position:absolute; left:16px; right:16px; bottom:16px; z-index:2; }
.statRow{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
.statPill{ min-width:88px; padding:10px 12px; border-radius:18px; background:rgba(9,10,18,.55); border:1px solid rgba(255,255,255,.12); display:flex; flex-direction:column; }
.statPill span{ font-size:18px; font-weight:950; }
.statPill small{ font-size:11px; color:rgba(242,242,247,.55); text-transform:uppercase; letter-spacing:.08em; }
.profileMediaGrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.profileMediaCard{ aspect-ratio:3/4; border-radius:18px; background-size:cover; background-position:center; border:1px solid rgba(255,255,255,.10); background-color:rgba(255,255,255,.06); }
.compactVoice{ padding:12px; border-radius:20px; }
.devToggleRow{ display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.actionListGrid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (max-width:390px){
  .heroTitle{ font-size:24px; }
  .cardName,.likePreviewName,.curatedFeatureName,.profileHeroName{ font-size:22px; }
  .productGrid,.likesGrid{ grid-template-columns:1fr; }
}


/* V5 structural rebuild overrides */
@media (pointer:coarse), (max-width:900px){
  #app{padding:0; min-height:100dvh;}
  .phone{width:100vw; height:100dvh; max-width:none; border-radius:0; border:0;}
  .viewport{padding-bottom:92px;}
  .topbar{padding:14px 16px; background:linear-gradient(180deg, rgba(5,6,15,.82), rgba(5,6,15,.22)); backdrop-filter:blur(20px);}
  .tabbar{left:10px; right:10px; bottom:10px; height:64px; border-radius:22px;}
  .tab{width:56px; height:50px;}
  .tab .tLbl{font-size:10px;}
}
.discoverWrap,.modernListPage{padding:14px 14px 24px; display:flex; flex-direction:column; gap:14px;}
.discoverHeroV5 .heroTitle,.sectionHero .heroTitle{font-size:22px; line-height:1.02; max-width:260px;}
.heroSub{font-size:13px; color:var(--muted); line-height:1.4; margin-top:8px;}
.heroMetaV5{display:flex; flex-direction:column; gap:10px; align-items:flex-end;}
.wingmanHeroSlim{display:flex; justify-content:space-between; gap:14px; align-items:flex-end; padding:18px; border-radius:24px; background:linear-gradient(180deg, rgba(88,58,166,.44), rgba(16,17,31,.84));}
.compactEnd{justify-content:flex-end;}
.storyRailV5{display:flex; gap:12px; overflow:auto; padding:2px 2px 4px;}
.previewRailSection{padding:16px; border-radius:24px;}
.previewRail{display:flex; gap:12px; overflow:auto; margin-top:12px;}
.previewMiniCard{min-width:134px; border:1px solid var(--stroke2); background:rgba(255,255,255,.03); color:var(--text); border-radius:20px; padding:10px; text-align:left;}
.previewMiniImg{height:128px; border-radius:16px; margin-bottom:10px;}
.previewMiniName{font-weight:800;}
.previewMiniSub{font-size:12px; color:var(--muted); margin-top:4px;}
.cardV5{min-height:560px; border-radius:30px; overflow:hidden; border:1px solid rgba(255,255,255,.08); box-shadow:0 28px 70px rgba(0,0,0,.55);}
.cardV5 .cardBg{position:absolute; inset:0; background-size:cover; background-position:center;}
.cardTopMetaV5{position:absolute; top:18px; left:18px; right:18px; display:flex; justify-content:space-between; z-index:2;}
.cardBottomPanelV5{position:absolute; left:0; right:0; bottom:0; z-index:2; padding:22px; background:linear-gradient(180deg, rgba(4,5,12,0) 0%, rgba(4,5,12,.18) 12%, rgba(4,5,12,.88) 100%);}
.cardName{font-size:34px; line-height:.96; font-weight:900; margin-bottom:8px;}
.cardMini{font-size:13px; color:rgba(242,242,247,.78); max-width:260px;}
.bioBlock{margin-top:12px; font-size:14px; line-height:1.4; color:rgba(242,242,247,.88);}
.modernChips{margin-top:12px;}
.interestChip{background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.10); padding:9px 12px; border-radius:999px; font-size:12px;}
.promptStripV5{margin-top:12px;}
.promptMini{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10); border-radius:18px; padding:12px;}
.promptQ{font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted);}
.promptA{font-size:14px; line-height:1.35; margin-top:6px;}
.actionDockV5{display:grid; grid-template-columns:1fr 1fr 1.2fr; gap:10px; margin-top:14px; padding:10px; border-radius:22px; background:rgba(10,10,18,.45);}
.actionPill{height:48px; border-radius:16px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.04); color:var(--text); font-weight:800;}
.actionPill.success{background:linear-gradient(180deg, rgba(139,92,246,.95), rgba(107,70,193,.92));}
.actionPill.feature{background:rgba(255,255,255,.07);}
.emptyHero{padding:28px 22px; border-radius:28px; min-height:360px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;}
.emptyHeroTitle{font-size:28px; line-height:.98; font-weight:900; max-width:260px;}
.emptyHeroSub{margin-top:10px; color:var(--muted); line-height:1.45; max-width:280px;}
.compact{min-height:220px;}
.conversationList,.likesGrid,.curatedStack,.productGrid{display:flex; flex-direction:column; gap:12px;}
.conversationCard,.curatedFeatureCardV5,.likePreviewCard,.storeProductCard,.historyRow,.profileSection,.sectionHero,.premiumBanner,.profileHeroCardV5{padding:16px; border-radius:24px;}
.curatedFeatureCardV5{position:relative; overflow:hidden; min-height:240px; padding:0;}
.curatedFeatureImg{position:absolute; inset:0; background-size:cover; background-position:center;}
.curatedFeatureShade{position:absolute; inset:0; background:linear-gradient(180deg, rgba(7,8,18,.15), rgba(7,8,18,.82));}
.curatedFeatureMeta{position:absolute; left:18px; right:18px; bottom:18px; z-index:2;}
.curatedFeatureName{font-size:28px; font-weight:900; line-height:1; margin-top:6px;}
.curatedFeatureSub{margin-top:8px; color:rgba(242,242,247,.78); line-height:1.35; max-width:240px;}
.storePageV5 .premiumBannerV5{display:flex; justify-content:space-between; gap:14px; align-items:flex-end; background:linear-gradient(135deg, rgba(87,55,173,.56), rgba(18,18,28,.88));}
.premiumTitle{font-size:24px; line-height:1.02; font-weight:900; max-width:240px;}
.premiumTag{align-self:center; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.08); border-radius:999px; padding:12px 14px; font-size:12px; font-weight:900; letter-spacing:.08em;}
.featureCompareRow{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.comparePill{padding:14px 16px; border-radius:20px; display:flex; flex-direction:column; gap:6px;}
.comparePill span{font-size:12px; color:var(--muted);}
.comparePill.highlight{background:linear-gradient(135deg, rgba(139,92,246,.20), rgba(255,255,255,.03));}
.productGridV5{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.storeProductCard{display:flex; flex-direction:column; gap:10px; min-height:190px;}
.storeProductTitle{font-size:22px; line-height:.98; font-weight:900;}
.storeProductPrice{font-size:16px; font-weight:800; color:rgba(242,242,247,.86);}
.buyChip{margin-top:auto; height:42px; justify-content:center; display:flex; align-items:center;}
.profileHeroCardV5{position:relative; overflow:hidden; min-height:290px; padding:0;}
.profileHeroPhoto{position:absolute; inset:0; background-size:cover; background-position:center;}
.profileHeroShade{position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,10,18,.08), rgba(10,10,18,.85));}
.profileHeroMeta{position:absolute; left:18px; right:18px; bottom:18px; z-index:2;}
.profileHeroName{font-size:32px; font-weight:900; line-height:.96; margin-top:6px;}
.profileHeroSub{margin-top:8px; color:rgba(242,242,247,.78); max-width:260px; line-height:1.35;}
.statRow{display:flex; gap:10px; margin-top:16px;}
.statPill{padding:10px 12px; border-radius:18px; background:rgba(6,6,14,.34); border:1px solid rgba(255,255,255,.12); display:flex; flex-direction:column; min-width:84px;}
.statPill span{font-weight:900; font-size:18px;}
.statPill small{text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-size:10px; margin-top:2px;}
.profileMediaGridV5{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px;}
.profileMediaCard{height:148px; border-radius:20px; background-size:cover; background-position:center;}
.profileActionsPanel .actionListGrid{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.sheetBody{position:absolute; left:12px; right:12px; bottom:20px; padding:18px; border-radius:26px;}
.sheetTitle{font-size:24px; font-weight:900; margin-bottom:12px;}
.sheetBackdrop{position:absolute; inset:0; background:rgba(4,5,12,.58); backdrop-filter:blur(8px);}
.devSectionWrap{display:none !important;}
@media (min-width:700px){
  .productGridV5{grid-template-columns:repeat(2, minmax(0,1fr));}
}

/* V6 tinder-style discover deck */
.tinderDiscoverPage{height:100%;}
.discoverFillPage{height:100%; display:flex; flex-direction:column; padding:0 0 8px;}
.swipeDeckShell{flex:1; min-height:0; display:flex; flex-direction:column; gap:14px; padding:10px 14px 0;}
.swipeDeckViewport{flex:1; min-height:0; display:flex; align-items:stretch; justify-content:center;}
.swipeDeck{position:relative; flex:1; min-height:0; width:100%;}
.swipeCard{
  position:absolute; inset:0; overflow:hidden; border-radius:30px;
  border:1px solid rgba(255,255,255,.08); background:#121322;
  box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.swipeCard--back{transform:scale(.965) translateY(10px); opacity:.62; filter:saturate(.88);}
.swipeCard--front{touch-action:none; cursor:grab; will-change:transform;}
.swipeCard--front.dragging{cursor:grabbing; transition:none !important;}
.swipeCardBg,.swipeCardShade{position:absolute; inset:0;}
.swipeCardBg{background-size:cover; background-position:center;}
.swipeCardShade{background:linear-gradient(180deg, rgba(4,6,14,.10) 0%, rgba(4,6,14,.22) 32%, rgba(4,6,14,.72) 68%, rgba(6,8,16,.96) 100%);}
.swipeCardMetaTop{position:absolute; top:16px; left:16px; right:16px; z-index:2; display:flex; justify-content:space-between; gap:10px;}
.swipeCardContent{position:absolute; left:0; right:0; bottom:0; z-index:2; padding:18px 18px 20px; display:flex; flex-direction:column; gap:12px;}
.swipeIdentityRow{display:flex; justify-content:space-between; gap:12px; align-items:flex-start;}
.swipeName{font-size:36px; line-height:.95; font-weight:950; letter-spacing:-.04em;}
.swipeSubtitle{margin-top:6px; max-width:230px; color:rgba(242,242,247,.75); font-size:13px; line-height:1.35;}
.swipeTagRow{display:flex; flex-wrap:wrap; gap:8px;}
.swipeBio,.swipePrompt{padding:14px 15px; border-radius:20px; border:1px solid rgba(255,255,255,.11); background:rgba(9,10,18,.46); backdrop-filter:blur(8px);}
.swipeBio{font-size:14px; line-height:1.42; color:rgba(242,242,247,.92);}
.swipePrompt .promptQ{font-size:11px; color:rgba(242,242,247,.55); text-transform:uppercase; letter-spacing:.08em; font-weight:800;}
.swipePrompt .promptA{margin-top:7px; font-size:14px; line-height:1.35;}
.swipeStamp{position:absolute; top:92px; z-index:3; padding:10px 16px; border:3px solid currentColor; border-radius:16px; font-size:28px; font-weight:1000; letter-spacing:.08em; opacity:0; transform:rotate(-12deg);}
.swipeStampPass{left:18px; color:#ff5d7f;}
.swipeStampLike{right:18px; color:#7dffcc; transform:rotate(12deg);}
.swipeCard.is-pass .swipeStampPass,.swipeCard.is-like .swipeStampLike{opacity:1;}
.swipeCard.is-super .swipeCardShade{background:linear-gradient(180deg, rgba(134,92,255,.30) 0%, rgba(4,6,14,.22) 28%, rgba(4,6,14,.72) 68%, rgba(6,8,16,.96) 100%);}
.swipeActionsBar{display:flex; align-items:center; justify-content:center; gap:18px; padding:0 4px 6px;}
.deckAction{
  border:none; width:58px; height:58px; border-radius:999px; font-size:24px; font-weight:900;
  color:#fff; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  box-shadow:0 14px 28px rgba(0,0,0,.28);
}
.deckActionPass{background:linear-gradient(180deg, rgba(255,91,121,.26), rgba(255,91,121,.12)); color:#ff6b92;}
.deckActionSuper{width:64px; height:64px; background:linear-gradient(180deg, rgba(122,92,255,.30), rgba(122,92,255,.12)); color:#c7b8ff;}
.deckActionLike{background:linear-gradient(180deg, rgba(56,214,153,.26), rgba(56,214,153,.12)); color:#7effc9;}
.tinderEmptyState{min-height:100%;}
@media (pointer:coarse), (max-width:900px){
  .discoverFillPage{padding:0;}
  .swipeDeckShell{padding:10px 12px 6px; gap:12px;}
  .swipeCard{border-radius:28px;}
  .swipeName{font-size:34px;}
}
@media (max-height:760px){
  .swipeCardContent{padding:16px 16px 18px; gap:10px;}
  .swipeName{font-size:32px;}
  .swipeBio,.swipePrompt{padding:12px 13px;}
  .deckAction{width:54px; height:54px;}
  .deckActionSuper{width:60px; height:60px;}
}


/* V6.5 fit + finishing pass */
.swipeDeckShell{height:100%; padding:8px 12px 4px;}
.swipeDeckViewport{min-height:calc(100dvh - 170px);}
.swipeCardContent{gap:10px; padding:16px 16px 18px;}
.swipeTagRow{gap:6px;}
.swipeName{font-size:clamp(30px, 8.2vw, 38px);}
.swipeSubtitle{max-width:unset; font-size:12px;}
.swipeBio,.swipePrompt{padding:12px 13px; border-radius:18px;}
.swipePrompt .promptA,.swipeBio{font-size:13px;}
.swipeActionsBar{padding:6px 0 calc(env(safe-area-inset-bottom, 0px) + 2px);}
.likePreviewCard{position:relative; min-height:188px; overflow:hidden; text-align:left;}
.likesGridPreview{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.likePreviewImg{height:100%; min-height:188px; background-size:cover; background-position:center; opacity:.95;}
.likePreviewShade{position:absolute; inset:0; background:linear-gradient(180deg, rgba(7,8,18,.06), rgba(7,8,18,.78));}
.likePreviewMeta{position:absolute; left:14px; right:14px; bottom:14px; z-index:2;}
.likePreviewSub{margin-top:4px; color:rgba(242,242,247,.78); font-size:12px;}
.lockedLike{position:absolute; right:12px; top:12px; z-index:2; padding:8px 10px; border-radius:999px; background:rgba(6,8,16,.58); border:1px solid rgba(255,255,255,.12); font-size:11px; font-weight:800;}
.conversationCard{display:flex; align-items:center; gap:12px; text-align:left; min-height:84px;}
.conversationAvatar{width:60px; height:60px; border-radius:18px; background-size:cover; background-position:center; background-color:rgba(255,255,255,.06); flex:0 0 auto;}
.conversationMain{min-width:0; flex:1;}
.conversationTop{display:flex; justify-content:space-between; gap:12px; align-items:center;}
.conversationName{font-size:16px; font-weight:850;}
.conversationTime{font-size:11px; color:var(--muted);}
.conversationHint{margin-top:8px; font-size:11px; color:#c9b6ff; font-weight:700;}
.conversationStatus{width:10px; height:10px; border-radius:999px; background:#6ff3a8; box-shadow:0 0 0 4px rgba(111,243,168,.12);}
.storyRailMessages{padding-top:6px;}
.authPromptCard .primaryBtn,.authPromptCard .sheetBtn{min-width:130px;}
.storeProductCard{min-height:180px;}
.buyChip{min-width:110px;}
@media (max-width:430px){
  .likesGridPreview{grid-template-columns:1fr 1fr;}
  .swipeDeckViewport{min-height:calc(100dvh - 160px);}
}


/* V6.2 core ux fixes */
.swipeDeckShell{padding:8px 12px 12px;}
.swipeDeckViewport{min-height:calc(100dvh - 220px);}
.swipeActionsBar{padding:10px 0 calc(env(safe-area-inset-bottom, 0px) + 74px);}
.likesGridLocked .likePreviewImg{filter:blur(14px) saturate(.85); transform:scale(1.06);}
.likePreviewCard.is-revealed .likePreviewImg{filter:none; transform:none;}
.likeBlurVeil{position:absolute; inset:0; background:rgba(6,8,18,.18); backdrop-filter:blur(2px); z-index:1;}
.unlockNomisBtn{background:linear-gradient(180deg, rgba(109,74,255,.38), rgba(109,74,255,.16)); color:#fff; border:1px solid rgba(255,255,255,.18);}
.unlockedLike{background:rgba(34,197,94,.18); color:#c7ffd7;}
.likePreviewMeta,.lockedLike{z-index:3;}
.likePreviewName{font-weight:900; font-size:18px;}
.storyAv,.conversationAvatar,.likePreviewImg,.profileHeroPhoto,.profileMediaCard,.setupPhotoSlot{background-size:cover; background-position:center;}
.profileSetupEditor .setupPhotoGrid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:12px;}
.setupPhotoSlot{position:relative; min-height:116px; border-radius:18px; border:1px solid rgba(255,255,255,.12); display:flex; align-items:flex-end; justify-content:flex-start; overflow:hidden; padding:10px; background-color:rgba(255,255,255,.05);}
.setupPhotoSlot::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(7,8,18,0) 40%, rgba(7,8,18,.72) 100%);}
.setupPhotoSlot span{position:relative; z-index:1; font-size:12px; font-weight:800; color:#fff;}
.messagesPageNew .conversationCard{cursor:pointer;}
.threadComposerSticky{position:sticky; bottom:0; padding:12px 14px calc(env(safe-area-inset-bottom,0px) + 12px); background: rgba(7,8,18,0.65); backdrop-filter: blur(14px);}


/* V6.3 auth + real portraits + thread fit */
.swipeCardBg{background:#0f1020;}
.swipeCardImg{width:100%; height:100%; object-fit:cover; object-position:center; display:block;}
.swipeActionsBar{padding:10px 0 calc(env(safe-area-inset-bottom, 0px) + 94px); position:relative; z-index:5;}
.swipeDeckViewport{min-height:calc(100dvh - 260px);}
.threadPageFull{height:100%;}
.threadFullWrap{height:100%; display:flex; flex-direction:column; padding:10px 12px 0; gap:10px;}
.threadHeader{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 14px; border-radius:22px;}
.threadHeaderMain{display:flex; align-items:center; gap:10px; min-width:0; flex:1; justify-content:center;}
.threadHeaderAvatar{width:42px; height:42px; border-radius:14px; background-size:cover; background-position:center;}
.threadHeaderName{font-size:17px; font-weight:900;}
.threadHeaderSub{font-size:11px; color:rgba(242,242,247,.68);}
.threadMessages{flex:1; min-height:0; overflow:auto; display:flex; flex-direction:column; gap:10px; padding:4px 4px 12px;}
.threadComposerRow{display:flex; gap:10px;}
.threadComposerInput{flex:1; border-radius:16px; border:1px solid rgba(255,255,255,.10); background:rgba(0,0,0,.28); color:rgba(242,242,247,.95); padding:14px 14px;}
.likesGridPreview .lockedLike{pointer-events:none;}


/* V7 tonight + stabilization */
.swipeDeckViewport{min-height:calc(100dvh - 290px) !important;}
.swipeActionsBar{padding:10px 0 calc(env(safe-area-inset-bottom, 0px) + 112px) !important;}
.likeRevealOverlay{position:absolute; left:12px; right:12px; top:50%; transform:translateY(-50%); z-index:4; text-align:center; padding:10px 12px; border-radius:16px; background:rgba(8,10,18,.46); border:1px solid rgba(255,255,255,.16); font-size:12px; font-weight:800; color:#fff; backdrop-filter:blur(10px);}
.likesGridPreview{grid-template-columns:1fr 1fr !important;}
.threadPageFull,.threadFullWrap{min-height:calc(100dvh - 132px) !important;}
.threadMessages{padding-bottom:22px !important;}
.threadComposerSticky{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 92px) !important;}
.storyAv{background-size:cover; background-position:center;}

/* V8 App Store prep fixes */
.authHelperRow{justify-content:center}
.demoHint{display:none !important}
.tinderDiscoverPage .swipeDeckShell{padding:8px 12px calc(env(safe-area-inset-bottom, 0px) + 18px) !important; gap:10px;}
.tinderDiscoverPage .swipeDeckViewport{min-height:calc(100dvh - 235px) !important;}
.tinderDiscoverPage .swipeActionsBar{padding:8px 0 calc(env(safe-area-inset-bottom, 0px) + 86px) !important; gap:16px;}
.tinderDiscoverPage .swipeCardContent{padding:14px 14px 16px !important; gap:9px !important;}
.tinderDiscoverPage .swipeName{font-size:clamp(28px,7.8vw,36px) !important;}
.tinderDiscoverPage .swipeBio,.tinderDiscoverPage .swipePrompt{padding:11px 12px !important; border-radius:16px !important;}
.tinderDiscoverPage .swipeCard{bottom:0;}
.tinderDiscoverPage .swipeCardImg{object-position:center top;}
.likesPageLocked .sectionHero{margin-bottom:10px;}
.likesGridPreview{padding-bottom:calc(env(safe-area-inset-bottom, 0px) + 24px) !important;}
.likeRevealOverlay{font-size:11px; line-height:1.2;}
.threadPageFull{display:flex; flex-direction:column; height:100%; min-height:100%;}
.threadFullWrap{flex:1; min-height:0; padding:10px 12px calc(env(safe-area-inset-bottom, 0px) + 12px) !important;}
.threadMessages{flex:1 1 auto; min-height:0; padding-bottom:12px !important;}
.threadComposerSticky{position:sticky; bottom:0; margin-top:auto; padding:10px 0 calc(env(safe-area-inset-bottom,0px) + 74px) !important; background:linear-gradient(180deg, rgba(7,8,18,0) 0%, rgba(7,8,18,.78) 22%, rgba(7,8,18,.96) 100%);} 
.threadComposerRow{align-items:center;}
.threadComposerInput{min-height:48px;}
.conversationCard{min-height:92px;}
.mePageV5 .profileSetupEditor .primaryBtn{min-width:140px;}
.mePageV5 .profileHeroCard{min-height:240px;}


/* V9 final submission pass */
.tinderDiscoverPage .swipeDeckViewport{min-height:calc(100dvh - 220px) !important;}
.tinderDiscoverPage .swipeCard{inset:0 0 0 0;}
.tinderDiscoverPage .swipeCardContent{padding-bottom:14px !important;}
.tinderDiscoverPage .swipeActionsBar{padding:8px 0 calc(env(safe-area-inset-bottom, 0px) + 72px) !important;}
.swipeCardImg{object-position:center center !important;}

.threadPageFull{display:flex; flex-direction:column; height:100%;}
.threadFullWrap{position:relative; flex:1; min-height:0; padding:10px 12px calc(env(safe-area-inset-bottom, 0px) + 86px) !important;}
.threadHeader{flex:0 0 auto;}
.threadMessages{flex:1 1 auto; min-height:0; overflow:auto; padding:4px 4px 112px !important;}
.threadComposerSticky{position:absolute !important; left:12px; right:12px; bottom:calc(env(safe-area-inset-bottom,0px) + 10px); margin-top:0 !important; padding:0 !important; background:none !important; z-index:5;}
.threadComposerRow{padding:10px; border-radius:20px; border:1px solid rgba(255,255,255,.10); background:rgba(8,10,18,.92); box-shadow:0 16px 32px rgba(0,0,0,.35);}

.tonightPageNew .tonightActions{margin:12px 0 4px;}
.tonightList{display:flex; flex-direction:column; gap:12px; padding-bottom:calc(env(safe-area-inset-bottom, 0px) + 12px);}
.tonightCard{display:flex; gap:12px; align-items:stretch; min-height:148px;}
.tonightCardMedia{width:104px; min-width:104px; border-radius:20px; background-size:cover; background-position:center;}
.tonightCardBody{flex:1; display:flex; flex-direction:column; gap:8px;}
.tonightCardTop{display:flex; align-items:center; justify-content:space-between; gap:12px;}
.tonightCardName{font-size:22px; font-weight:900; line-height:1;}
.tonightCardSub{font-size:13px; color:rgba(242,242,247,.72);}
.tonightCardBio{font-size:13px; line-height:1.4; color:rgba(242,242,247,.88);}
.tonightCardActions{margin-top:auto;}
.tonightCardActions .primaryBtn,.tonightCardActions .sheetBtn{min-width:110px;}

.mePageV5 .profileHeroPhoto,.mePageV5 .profileMediaCard,.mePageV5 .setupPhotoSlot{background-position:center center !important;}
.mePageV5 .profileSetupEditor textarea,.mePageV5 .profileSetupEditor input{font-size:14px;}



/* ===== V9.2 responsive + top chrome overrides ===== */
html,body,#app{height:100%;}
body{overflow:hidden;}
#app{padding:0 !important;}
.phone{
  width:100vw !important;
  height:100dvh !important;
  min-height:100dvh !important;
  border-radius:0 !important;
  max-width:none !important;
  border:none !important;
  box-shadow:none !important;
}
.topbar{
  height:auto !important;
  min-height:68px;
  padding:calc(env(safe-area-inset-top, 0px) + 10px) 16px 12px !important;
  background:linear-gradient(180deg, rgba(7,8,18,0.92), rgba(7,8,18,0.68) 72%, rgba(7,8,18,0));
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.brandName{font-size:18px;font-weight:800;}
.brandTier{font-size:12px;color:rgba(242,242,247,0.74);}
.topActions{gap:10px;}
.topTextBtn{
  width:auto !important;
  min-width:82px;
  padding:0 14px;
  border-radius:16px !important;
  font-size:13px;
  font-weight:700;
}
.topTextBtn span{display:block; line-height:1;}
.viewport{
  padding-top:84px !important;
  padding-bottom:calc(86px + env(safe-area-inset-bottom, 0px)) !important;
}
.tabbar{
  left:max(12px, env(safe-area-inset-left, 0px) + 12px) !important;
  right:max(12px, env(safe-area-inset-right, 0px) + 12px) !important;
  bottom:calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  height:64px !important;
  border-radius:22px !important;
}
.tab{width:auto; min-width:54px;}
.tab .tLbl{font-size:10px;}
.page{min-height:100%;}
.discoverFillPage{flex:1; min-height:0;}
.swipeDeckShell{
  width:min(100%, 620px);
  margin:0 auto;
  padding:8px 12px calc(env(safe-area-inset-bottom, 0px) + 8px) !important;
}
.swipeDeckViewport{
  min-height:calc(100dvh - 238px) !important;
  max-height:calc(100dvh - 238px) !important;
}
.swipeActionsBar{padding:10px 0 calc(env(safe-area-inset-bottom, 0px) + 82px) !important;}
.deckAction{width:60px;height:60px;}
.swipeCardImg{object-fit:cover; object-position:center center !important;}
.swipeCardContent{padding:16px 16px 18px !important;}
.swipeName{font-size:clamp(30px, 6vw, 40px) !important;}
.matchesPage,.likedPage,.storePage,.mePage,.tonightPage{width:min(100%, 760px);margin:0 auto;}
.profileHeroPhoto,.profileMediaCard,.setupPhotoSlot,.likePreviewMedia img,.matchAvatar img{object-fit:cover;object-position:center center !important;}
.sheetBody{max-width:min(92vw, 440px);margin:0 auto;border-radius:26px;}
.activityList{display:flex;flex-direction:column;gap:10px;margin-top:14px;}
.activityRow{width:100%; display:flex; align-items:flex-start; gap:12px; border:1px solid rgba(255,255,255,0.08); background:rgba(255,255,255,0.03); border-radius:18px; padding:14px; color:var(--text); text-align:left;}
.activityDot{width:10px;height:10px;border-radius:999px;background:linear-gradient(180deg,#b26cff,#8b5cf6);box-shadow:0 0 14px rgba(139,92,246,0.5); margin-top:6px;}
.activityTitle{font-weight:800;}
.activitySub{color:var(--muted); font-size:13px; margin-top:3px;}
@media (min-width: 768px){
  .viewport{padding-top:96px !important;}
  .topbar{padding-left:24px !important; padding-right:24px !important;}
  .swipeDeckShell{width:min(100%, 700px);}
  .swipeDeckViewport{min-height:calc(100dvh - 254px) !important; max-height:calc(100dvh - 254px) !important;}
  .topTextBtn{min-width:96px;}
}


/* V10 App Store candidate polish */
body{ min-height:100dvh; }
#app{ min-height:100dvh; padding:max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
.phone{
  width:min(100vw - 24px, 430px);
  height:min(100dvh - 24px, 932px);
  min-height:720px;
}
.topbar{
  height: calc(64px + env(safe-area-inset-top));
  padding-top: calc(12px + env(safe-area-inset-top));
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.viewport{
  padding-top: calc(72px + env(safe-area-inset-top));
  padding-bottom: calc(90px + env(safe-area-inset-bottom));
}
.tabbar{
  bottom: calc(12px + env(safe-area-inset-bottom));
}
.topTextBtn{ width:auto; min-width:72px; padding:0 12px; font-size:13px; font-weight:700; }
.topTextBtn span{ pointer-events:none; }
.onboardPageV10{ padding:18px; }
.onboardHeroV10{ padding:18px; }
.onboardCardV10{ max-width:480px; padding:24px; }
.onboardProgress{ display:flex; gap:8px; margin-bottom:18px; }
.onDot{ width:8px; height:8px; border-radius:999px; background:rgba(255,255,255,.18); }
.onDot.active{ width:26px; background:linear-gradient(90deg, rgba(178,108,255,.96), rgba(139,92,246,.92)); }
.onboardActionsRow{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:18px; align-items:center; }
.onSkipBtn{ margin-top:10px; background:none; border:0; color:rgba(242,242,247,.7); font-weight:700; }
.matchAvatarRow{ display:flex; justify-content:center; gap:12px; }
.matchAvatar{ width:96px; height:120px; border-radius:24px; }
.likePreviewCard[disabled]{ opacity:.85; }
.setupPhotoGrid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.setupPhotoSlot{ aspect-ratio:3/4; border-radius:18px; background-size:cover !important; background-position:center !important; border:1px solid rgba(255,255,255,.1); display:flex; align-items:end; justify-content:flex-start; padding:10px; color:#fff; overflow:hidden; }
.setupPhotoSlot span{ padding:6px 8px; border-radius:999px; background:rgba(0,0,0,.35); font-size:12px; }
@media (max-width:430px){
  #app{ padding:0; }
  .phone{ width:100vw; height:100dvh; min-height:100dvh; border-radius:0; border:0; }
  .tabbar{ left:10px; right:10px; }
}
@media (min-width:768px){
  .phone{ width:min(100vw - 40px, 820px); height:min(100dvh - 40px, 1180px); border-radius:40px; }
  .discoverFillPage{ padding-inline:24px; }
  .swipeDeckViewport{ max-width:520px; margin:0 auto; }
  .modernListPage, .discoverPage{ padding-inline:24px; }
  .authCardPremium, .onboardCardV10{ max-width:560px; }
}


.logo,.authBrandBadge{overflow:hidden;display:grid;place-items:center;}
.logoImg,.authBrandBadge img{width:100%;height:100%;object-fit:cover;display:block;}
.authBrandBadge{width:44px;height:44px;border-radius:16px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.12);}
.sheet{position:fixed !important;inset:0 !important;z-index:2147483000 !important;display:block !important;isolation:isolate;}
.sheetBackdrop{position:absolute !important;inset:0 !important;z-index:0 !important;background:rgba(4,5,12,.58) !important;backdrop-filter:blur(8px) !important;-webkit-backdrop-filter:blur(8px) !important;}
.sheetBody{position:absolute !important;left:max(12px, env(safe-area-inset-left, 0px) + 12px) !important;right:max(12px, env(safe-area-inset-right, 0px) + 12px) !important;bottom:calc(12px + env(safe-area-inset-bottom, 0px)) !important;z-index:2 !important;max-width:min(92vw, 440px);margin:0 auto;padding:18px;border-radius:26px;pointer-events:auto !important;display:block !important;opacity:1 !important;transform:none !important;}
.activityList,.field{position:relative;z-index:2;}
.topbar{z-index:50;}
.compactStoriesPanel{padding-top:14px !important;}
.messagesPageNew .storiesPanelInMessages{margin-top:0 !important;}
.tonightCard{grid-template-columns:120px 1fr !important;align-items:stretch;}
.tonightCardMedia{min-height:168px;border-radius:18px;overflow:hidden;background:rgba(255,255,255,0.04);}
.tonightCardMedia img,.tonightCardFallback{width:100%;height:100%;display:block;object-fit:cover;object-position:center;}
.tonightCardBody{display:flex;flex-direction:column;justify-content:center;}
.storePreviewNote{margin-bottom:12px;padding:10px 12px;border-radius:14px;background:rgba(130,87,229,0.14);border:1px solid rgba(166,139,250,0.24);color:rgba(255,255,255,0.9);font-size:12px;font-weight:700;}
.tabbar,.bottomNav{bottom:calc(env(safe-area-inset-bottom, 0px) + 2px) !important;padding-bottom:calc(4px + env(safe-area-inset-bottom, 0px)) !important;}
.viewport{padding-bottom:calc(82px + env(safe-area-inset-bottom, 0px)) !important;}
@media (max-width: 430px){
  .tabbar,.bottomNav{left:8px !important;right:8px !important;bottom:calc(4px + env(safe-area-inset-bottom, 0px)) !important;}
}

button, a, .tab, .iconBtn, .likePreviewCard, .sheetBtn, .primaryBtn{ touch-action:manipulation; }

.storeFine{margin-top:10px;font-size:12px;color:rgba(242,242,247,.68);}
.likePreviewCard.is-revealed{cursor:pointer;}
.likePreviewCard.is-revealed .likePreviewMeta{padding-bottom:12px;}
.likePreviewCard.is-revealed .likePreviewName{font-size:20px;}
.tonightCardMedia img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;}
@media (min-width:1024px){ .swipeDeckViewport{ max-width:680px !important; } .swipeDeck, .swipeCard{ max-width:680px; } }

/* Final nav alignment polish */
.tabbar{
  display:grid !important;
  grid-template-columns:repeat(6, minmax(0,1fr)) !important;
  align-items:stretch !important;
  justify-content:stretch !important;
  gap:0 !important;
  height:72px !important;
  padding:8px 10px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  box-sizing:border-box !important;
}
.tab{
  width:100% !important;
  min-width:0 !important;
  height:100% !important;
  padding:4px 0 3px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:4px !important;
  line-height:1 !important;
}
.tab .tIco,
.tab .svgIco,
.tab .svgIco svg{
  display:block !important;
  line-height:1 !important;
}
.tab .svgIco{
  width:20px !important;
  height:20px !important;
}
.tab .svgIco svg{
  width:20px !important;
  height:20px !important;
}
.tab .tLbl{
  display:block !important;
  font-size:10px !important;
  line-height:1.05 !important;
  margin:0 !important;
}
@media (max-width: 430px){
  .tabbar{
    height:70px !important;
    padding:8px 8px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  }
}
@media (min-width: 768px){
  .tabbar{
    height:74px !important;
    padding:9px 12px calc(9px + env(safe-area-inset-bottom, 0px)) !important;
  }
}


/* V10.3 final launch polish */
.messagesPageNew{padding-top:18px !important;}
.messagesPageNew .storiesPanelInMessages{margin-top:4px !important; overflow:visible;}
.messagesPageNew .sectionMiniTitle{padding-left:2px;}
.storyRailMessages{padding-top:4px; padding-left:2px;}
.storePreviewNote{display:none !important;}
.conversationHint{display:none !important;}


/* V10.3 launch polish */
.messagesPageNew{padding-top:18px !important;}
.messagesPageNew .storiesPanelInMessages{margin-top:0 !important; padding-top:18px !important; overflow:visible;}
.messagesPageNew .storiesPanelInMessages .sectionMiniTitle{padding-left:2px; line-height:1.15; margin-top:2px;}
.messagesPageNew .storyRailMessages{padding-top:8px !important;}
.storePageV5 .premiumBanner{align-items:start;}
.storePageV5 .storeProductCard{min-height:168px;}
.profileActionsPanel .actionListGrid{padding-bottom:4px;}


/* Final launch polish */
.swipeCardImg{object-position:center 22% !important;}
.profileHeroPhoto,.profileMediaCard,.setupPhotoSlot,.likePreviewMedia img,.matchAvatar img{background-position:center 20% !important; object-position:center 20% !important;}
.tonightCardMedia img{object-position:center 18% !important;}
.storeProductCard .buyChip{min-width:132px; font-weight:900;}
.storeProductTitle{max-width:18ch;}
.storeFine{margin-top:10px; color:rgba(242,242,247,.72); line-height:1.35;}