:root {
  --bg: #07080d;
  --surface: #0d1018;
  --surface-2: #131722;
  --surface-3: #191e2a;
  --line: rgba(255, 255, 255, .09);
  --line-strong: rgba(255, 255, 255, .16);
  --text: #f7f8fb;
  --muted: #9298a8;
  --muted-2: #687082;
  --accent: #ff365f;
  --accent-2: #c61cff;
  --accent-3: #ff6552;
  --green: #42dc88;
  --blue: #4ba4ff;
  --warning: #ffb74d;
  --danger: #ff4b63;
  --radius-xl: 28px;
  --radius-lg: 22px;
  --radius-md: 16px;
  --shadow: 0 22px 70px rgba(0, 0, 0, .45);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); }
body { overflow: hidden; }
button, input, textarea { font: inherit; }
button { color: inherit; }

.app {
  min-height: 100dvh;
  max-width: 560px;
  margin: 0 auto;
  background:
    radial-gradient(circle at 15% -10%, rgba(255, 50, 96, .14), transparent 35%),
    radial-gradient(circle at 110% 18%, rgba(198, 28, 255, .10), transparent 30%),
    var(--bg);
  position: relative;
  overflow: hidden;
}

.screen {
  min-height: 100dvh;
  padding: calc(12px + var(--safe-top)) 16px calc(92px + var(--safe-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
}

.screen.no-nav { padding-bottom: calc(24px + var(--safe-bottom)); }
.screen::-webkit-scrollbar { display: none; }

.topbar {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 850;
  letter-spacing: -.03em;
  font-size: 22px;
}

.brand-mark {
  width: 31px;
  height: 31px;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--accent-3), var(--accent), var(--accent-2));
  display: grid;
  place-items: center;
  box-shadow: 0 7px 26px rgba(255, 54, 95, .35);
}
.brand-mark svg { width: 21px; height: 21px; }
.brand em { font-style: normal; color: var(--accent); }

.top-actions { display: flex; gap: 8px; }
.icon-button, .round-button {
  border: 1px solid var(--line);
  background: rgba(16, 19, 27, .82);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.icon-button { width: 42px; height: 42px; border-radius: 14px; }
.round-button { width: 52px; height: 52px; border-radius: 50%; }
.icon-button:active, .round-button:active, .btn:active { transform: scale(.97); }

.premium-pill {
  border: 1px solid rgba(255, 184, 65, .22);
  background: linear-gradient(180deg, rgba(255, 193, 67, .13), rgba(255, 193, 67, .05));
  color: #ffd574;
  border-radius: 999px;
  padding: 9px 12px;
  font-size: 12px;
  font-weight: 800;
}

.section-title {
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: -.04em;
  margin: 6px 0 5px;
}
.section-subtitle { margin: 0 0 18px; color: var(--muted); font-size: 14px; line-height: 1.5; }

.bottom-nav {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: calc(8px + var(--safe-bottom));
  height: 70px;
  border: 1px solid var(--line);
  background: rgba(9, 11, 17, .93);
  backdrop-filter: blur(22px);
  border-radius: 23px;
  box-shadow: var(--shadow);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  padding: 7px;
  z-index: 20;
}

.nav-item {
  border: 0;
  background: transparent;
  color: var(--muted-2);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 10px;
  position: relative;
  cursor: pointer;
}
.nav-item svg { width: 22px; height: 22px; }
.nav-item.active { color: #ff4f78; background: rgba(255, 56, 99, .09); }
.nav-badge {
  position: absolute;
  top: 3px;
  right: 18%;
  min-width: 17px;
  height: 17px;
  border-radius: 999px;
  background: var(--accent);
  color: white;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 9px;
  border: 2px solid #0c0f16;
}

.onboarding {
  min-height: 100dvh;
  padding: calc(36px + var(--safe-top)) 24px calc(28px + var(--safe-bottom));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  position: relative;
}
.onboarding::before {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  top: -180px;
  right: -180px;
  background: radial-gradient(circle, rgba(255, 50, 92, .20), transparent 67%);
}
.logo-stack { text-align: center; padding-top: 28px; position: relative; }
.logo-large {
  width: 126px; height: 126px; margin: 0 auto 18px; border-radius: 38px;
  display: grid; place-items: center;
  background: linear-gradient(145deg, rgba(255, 74, 100, .17), rgba(190, 26, 255, .08));
  border: 1px solid rgba(255, 84, 119, .22);
  box-shadow: 0 26px 80px rgba(255, 35, 88, .17), inset 0 0 32px rgba(255,255,255,.03);
}
.logo-large svg { width: 82px; height: 82px; filter: drop-shadow(0 10px 22px rgba(255, 52, 95, .3)); }
.logo-title { font-size: 40px; font-weight: 900; letter-spacing: -.055em; margin: 0; }
.logo-title span { background: linear-gradient(90deg, #ff6a68, #ff2f67, #d326ff); -webkit-background-clip: text; color: transparent; }
.logo-copy { margin: 9px auto 0; color: var(--muted); max-width: 320px; line-height: 1.5; }
.feature-list { display: grid; gap: 13px; margin: 36px 0 28px; }
.feature-row { display: flex; align-items: center; gap: 12px; color: #d9dce5; }
.feature-icon { width: 38px; height: 38px; border-radius: 13px; background: rgba(255, 56, 100, .09); color: #ff5278; display: grid; place-items: center; }
.login-actions { display: grid; gap: 11px; }

.btn {
  min-height: 52px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  padding: 0 18px;
  font-weight: 750;
  cursor: pointer;
  transition: transform .16s ease, opacity .16s ease;
}
.btn-primary {
  border: 0;
  background: linear-gradient(100deg, #ff465f 0%, #ff275f 42%, #bd20f3 100%);
  box-shadow: 0 14px 36px rgba(255, 41, 95, .25);
}
.btn-secondary { background: transparent; }
.btn-danger { background: rgba(255, 53, 82, .1); color: #ff6680; border-color: rgba(255, 53, 82, .2); }
.btn-small { min-height: 40px; border-radius: 13px; padding: 0 14px; font-size: 13px; }
.btn-block { width: 100%; }

.profile-card {
  height: min(61dvh, 630px);
  min-height: 470px;
  border-radius: 27px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  box-shadow: 0 25px 80px rgba(0,0,0,.48);
  background: #131720;
}
.profile-photo {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.profile-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.02) 35%, rgba(3,4,8,.25) 58%, rgba(3,4,8,.95) 100%);
}
.card-progress { position: absolute; left: 12px; right: 12px; top: 11px; display: grid; grid-auto-flow: column; gap: 5px; z-index: 2; }
.card-progress i { height: 3px; border-radius: 9px; background: rgba(255,255,255,.3); }
.card-progress i.active { background: white; }
.profile-card-content { position: absolute; z-index: 2; left: 18px; right: 18px; bottom: 18px; }
.profile-name { font-size: 29px; font-weight: 850; letter-spacing: -.04em; display: flex; align-items: center; gap: 8px; }
.verified { width: 19px; height: 19px; border-radius: 50%; background: var(--blue); color: white; font-size: 12px; display: inline-grid; place-items: center; font-weight: 900; }
.profile-meta { color: #d1d4db; font-size: 13px; margin-top: 5px; display: flex; gap: 7px; align-items: center; }
.chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.chip { border: 1px solid rgba(255,255,255,.12); background: rgba(17,19,25,.62); backdrop-filter: blur(10px); padding: 7px 10px; border-radius: 999px; font-size: 12px; color: #e9ebef; }
.profile-bio { margin: 11px 0 0; color: #e6e8ec; font-size: 13px; line-height: 1.45; }

.swipe-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 16px; }
.swipe-action {
  height: 62px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--surface);
  display: grid; place-items: center;
  font-size: 24px;
  cursor: pointer;
}
.swipe-action.like { background: linear-gradient(145deg, #ff4767, #e62479); box-shadow: 0 13px 28px rgba(255, 52, 98, .24); border: 0; }
.swipe-action.pass { color: #ff4c62; }
.swipe-action.star { color: #a960ff; }
.swipe-action.undo { color: #ffbe42; }
.empty-state { min-height: 55dvh; display: grid; place-items: center; text-align: center; color: var(--muted); padding: 40px; }
.empty-state .big { font-size: 56px; margin-bottom: 14px; }

.quick-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 20px; }
.quick-card { min-height: 132px; border-radius: 22px; border: 1px solid var(--line); padding: 15px; background: var(--surface); position: relative; overflow: hidden; cursor: pointer; }
.quick-card::after { content:""; position:absolute; width:100px; height:100px; border-radius:50%; right:-35px; top:-35px; background: var(--glow, rgba(255, 54, 95, .12)); }
.quick-icon { width: 46px; height: 46px; border-radius: 16px; display:grid; place-items:center; font-size:22px; background: var(--icon-bg, rgba(255, 54, 95, .12)); margin-bottom: 12px; }
.quick-card strong { display:block; font-size:16px; }
.quick-card span { display:block; color:var(--muted); font-size:12px; margin-top:5px; line-height:1.35; }

.map-card { border-radius: 23px; overflow: hidden; height: 180px; border: 1px solid var(--line); background:
  linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
  linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
  radial-gradient(circle at 44% 55%, rgba(73, 151, 255, .3), transparent 11%),
  #10141d;
  background-size: 32px 32px, 32px 32px, auto, auto;
  position: relative;
}
.map-road { position:absolute; height:4px; background:rgba(255,255,255,.06); border-radius:99px; transform-origin:left; }
.map-pin { position:absolute; width:13px; height:13px; border-radius:50%; background:#ff3e71; box-shadow:0 0 0 6px rgba(255,62,113,.12),0 0 20px rgba(255,62,113,.8); }
.map-pin.me { background:#4aa6ff; box-shadow:0 0 0 6px rgba(74,166,255,.14),0 0 20px rgba(74,166,255,.8); }

.list { display:grid; gap: 9px; }
.person-row, .chat-row, .room-row, .verification-row {
  border: 1px solid var(--line);
  background: rgba(15,18,26,.78);
  border-radius: 18px;
  padding: 11px;
  display:flex;
  align-items:center;
  gap:12px;
}
.person-row { cursor:pointer; }
.chat-button { width:100%; color:var(--text); text-align:left; cursor:pointer; font:inherit; }
.avatar { width:52px; height:52px; border-radius:50%; object-fit:cover; flex:0 0 auto; background:#1a1f29; border:1px solid rgba(255,255,255,.08); }
.avatar.large { width:112px; height:112px; }
.avatar-wrap { position:relative; flex:0 0 auto; }
.online-dot { position:absolute; width:12px; height:12px; border-radius:50%; right:1px; bottom:3px; background:var(--green); border:3px solid #0e1118; }
.row-main { min-width:0; flex:1; }
.row-title { display:flex; align-items:center; gap:6px; font-weight:750; }
.row-subtitle { color:var(--muted); font-size:12px; margin-top:4px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }
.row-action { width:41px; height:41px; border-radius:50%; border:0; background:rgba(255,54,95,.13); color:#ff4b72; display:grid; place-items:center; cursor:pointer; }

.tabs { display:flex; border-bottom:1px solid var(--line); margin:0 -16px 14px; padding:0 16px; }
.tab { border:0; background:transparent; color:var(--muted); padding:13px 14px; position:relative; cursor:pointer; }
.tab.active { color:#ff4a74; }
.tab.active::after { content:""; position:absolute; left:12px; right:12px; bottom:-1px; height:2px; background:linear-gradient(90deg,#ff415e,#e721a5); }

.like-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:12px; }
.like-card { border:1px solid var(--line); border-radius:22px; overflow:hidden; background:var(--surface); }
.like-photo { height:210px; width:100%; object-fit:cover; display:block; }
.like-info { padding:12px; }
.like-name { font-weight:800; font-size:16px; display:flex; gap:5px; align-items:center; }
.like-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px; }
.like-actions button { min-height:40px; border-radius:13px; border:1px solid var(--line); background:var(--surface-2); cursor:pointer; }
.like-actions .accept { background:linear-gradient(100deg,#ff4762,#db2588); border:0; }

.voice-stage { min-height:72dvh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.voice-rings { width:270px; height:270px; border-radius:50%; display:grid; place-items:center; position:relative; margin-bottom:32px; }
.voice-rings::before, .voice-rings::after { content:""; position:absolute; border-radius:50%; border:1px solid rgba(255,53,100,.28); animation:pulse 2s ease-out infinite; }
.voice-rings::before { inset:20px; }
.voice-rings::after { inset:0; animation-delay:.5s; }
.voice-core { width:118px; height:118px; border-radius:50%; display:grid; place-items:center; font-size:42px; background:linear-gradient(145deg,#ff4a65,#ce259b); box-shadow:0 0 45px rgba(255,48,97,.38); z-index:2; }
@keyframes pulse { 0%{transform:scale(.82);opacity:.25} 55%{opacity:1} 100%{transform:scale(1.08);opacity:0} }
.voice-status { font-size:23px; font-weight:850; }
.voice-note { color:var(--muted); margin-top:7px; }
.voice-avatars { display:flex; margin-top:25px; }
.voice-avatars img { width:48px; height:48px; border-radius:50%; margin-left:-8px; border:3px solid var(--bg); }

.room-row { padding:13px; }
.room-button { width:100%; color:var(--text); border:0; text-align:left; cursor:pointer; }
.room-icon { width:45px; height:45px; border-radius:15px; display:grid; place-items:center; font-size:21px; background:linear-gradient(145deg,rgba(255,60,96,.17),rgba(159,34,255,.13)); }
.wave { color:#ff4a74; letter-spacing:-2px; font-weight:900; }

.chat-screen { display:flex; flex-direction:column; height:100dvh; padding:calc(9px + var(--safe-top)) 10px calc(10px + var(--safe-bottom)); }
.chat-header { display:flex; align-items:center; gap:10px; min-height:58px; border-bottom:1px solid var(--line); }
.chat-messages { flex:1; overflow:auto; padding:16px 4px; display:flex; flex-direction:column; gap:10px; }
.bubble { max-width:78%; border-radius:18px; padding:11px 13px; line-height:1.4; font-size:14px; background:var(--surface-2); align-self:flex-start; border-bottom-left-radius:6px; }
.bubble.mine { align-self:flex-end; background:linear-gradient(135deg,#dc246f,#8e2ad7); border-bottom-left-radius:18px; border-bottom-right-radius:6px; }
.bubble time { display:block; color:rgba(255,255,255,.55); font-size:9px; text-align:right; margin-top:4px; }
.bubble-author { display:block; color:#ff7b98; font-size:11px; margin-bottom:4px; }
.chat-compose { min-height:57px; display:flex; gap:8px; align-items:center; }
.chat-compose input { flex:1; min-width:0; height:48px; border:1px solid var(--line); background:var(--surface); border-radius:17px; padding:0 15px; color:var(--text); outline:none; }
.chat-compose button { width:48px; height:48px; border-radius:16px; border:0; background:linear-gradient(145deg,#ff3f61,#d32496); cursor:pointer; }

.profile-hero { text-align:center; padding:12px 0 22px; }
.profile-hero .avatar-wrap { display:inline-block; }
.profile-hero h2 { margin:13px 0 4px; font-size:25px; }
.profile-hero p { color:var(--muted); margin:0; }
.badges { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin:15px 0; }
.badge-card { border:1px solid var(--line); border-radius:16px; background:var(--surface); text-align:center; padding:12px 5px; font-size:11px; color:var(--muted); }
.badge-card b { display:block; font-size:20px; margin-bottom:5px; }
.info-card { border:1px solid var(--line); border-radius:20px; background:var(--surface); padding:16px; margin-bottom:12px; }
.info-card h3 { margin:0 0 10px; }
.info-card p { margin:0; color:#cdd1da; font-size:14px; line-height:1.55; }
.menu-list { border:1px solid var(--line); border-radius:20px; background:var(--surface); overflow:hidden; }
.menu-row { width:100%; min-height:58px; border:0; border-bottom:1px solid var(--line); background:transparent; color:var(--text); display:flex; align-items:center; gap:12px; padding:0 15px; text-align:left; cursor:pointer; }
.menu-row:last-child { border-bottom:0; }
.menu-row-icon { width:36px; height:36px; border-radius:12px; background:rgba(255,54,95,.1); color:#ff5276; display:grid; place-items:center; }
.menu-row span:nth-child(2) { flex:1; }
.status-pill { font-size:11px; padding:6px 9px; border-radius:999px; background:rgba(255,183,77,.1); color:#ffc466; }
.status-pill.approved { background:rgba(66,220,136,.1); color:#5be59a; }
.status-pill.rejected { background:rgba(255,75,99,.1); color:#ff6f85; }

.verification-hero { border:1px solid var(--line); border-radius:26px; padding:22px; background:linear-gradient(145deg,rgba(255,50,94,.1),rgba(139,32,220,.08)); text-align:center; }
.verify-symbol { width:84px; height:84px; margin:0 auto 14px; border-radius:50%; display:grid; place-items:center; font-size:38px; background:linear-gradient(145deg,#ff4a65,#b624ed); box-shadow:0 17px 45px rgba(255,45,95,.25); }
.steps { display:grid; gap:10px; margin:16px 0; }
.step { display:flex; gap:11px; padding:13px; border:1px solid var(--line); border-radius:16px; background:var(--surface); text-align:left; }
.step-number { width:28px; height:28px; border-radius:50%; background:rgba(255,54,95,.13); color:#ff5276; display:grid; place-items:center; font-weight:800; flex:0 0 auto; }
.file-input { border:1px dashed rgba(255,86,118,.36); min-height:150px; border-radius:19px; display:grid; place-items:center; padding:18px; text-align:center; color:var(--muted); position:relative; overflow:hidden; }
.file-input input { position:absolute; inset:0; opacity:0; cursor:pointer; }
.preview-img { width:100%; max-height:300px; object-fit:cover; border-radius:16px; }

.premium-card { border:1px solid rgba(255,98,130,.2); border-radius:28px; padding:24px; background:
  radial-gradient(circle at 90% 0%,rgba(198,28,255,.22),transparent 35%),
  radial-gradient(circle at 0% 100%,rgba(255,60,88,.18),transparent 42%),
  var(--surface); text-align:center; }
.crown { font-size:58px; filter:drop-shadow(0 12px 22px rgba(255,175,51,.25)); }
.premium-list { display:grid; gap:12px; margin:22px 0; text-align:left; }
.premium-row { display:flex; gap:10px; align-items:center; }
.premium-check { width:23px; height:23px; border-radius:50%; background:linear-gradient(145deg,#ff4967,#d020b8); display:grid; place-items:center; font-size:12px; }
.price { font-size:32px; font-weight:900; letter-spacing:-.04em; margin:8px 0 2px; }
.price-note { color:var(--muted); font-size:13px; }

.modal-backdrop { position:fixed; inset:0; z-index:100; background:rgba(0,0,0,.72); backdrop-filter:blur(12px); display:grid; place-items:center; padding:18px; }
.modal { width:min(100%,430px); border-radius:28px; border:1px solid var(--line-strong); background:#10131b; padding:22px; box-shadow:var(--shadow); text-align:center; }
.settings-modal { max-height:90dvh; overflow:auto; }
.match-pair { display:flex; justify-content:center; align-items:center; margin:18px 0 24px; }
.match-pair img { width:104px; height:104px; border-radius:50%; object-fit:cover; border:4px solid #171a22; }
.match-heart { width:54px; height:54px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(145deg,#ff4463,#d7259b); margin:0 -12px; z-index:2; font-size:23px; box-shadow:0 10px 28px rgba(255,56,97,.3); }
.modal-actions { display:grid; gap:10px; }

.toast-root { position:fixed; left:50%; transform:translateX(-50%); bottom:calc(92px + var(--safe-bottom)); z-index:300; width:min(90%,420px); pointer-events:none; }
.toast { background:#1a1e29; border:1px solid var(--line-strong); border-radius:16px; padding:13px 15px; box-shadow:var(--shadow); animation:toast-in .25s ease; }
@keyframes toast-in { from{opacity:0;transform:translateY(12px)} }

.loader { min-height:100dvh; display:grid; place-items:center; }
.loader-dot { width:48px; height:48px; border-radius:50%; border:3px solid rgba(255,255,255,.1); border-top-color:#ff3c65; animation:spin .7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

.admin-key { display:flex; gap:8px; margin-bottom:14px; }
.admin-key input, textarea, .field { flex:1; min-width:0; background:var(--surface); border:1px solid var(--line); border-radius:14px; color:var(--text); padding:13px; outline:none; }
.form-label { display:block; color:var(--muted); font-size:12px; margin:14px 0 6px; }
.field-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.switch-row { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:52px; border-bottom:1px solid var(--line); cursor:pointer; }
.switch-row input { width:20px; height:20px; accent-color:#ff416b; }
.chat-meta { display:grid; justify-items:end; gap:6px; }
.unread-badge { min-width:20px; height:20px; padding:0 6px; border-radius:999px; display:grid; place-items:center; background:#ed316c; color:white; font-size:10px; }
.verification-row { align-items:flex-start; }
.verification-row img { width:92px; height:112px; object-fit:cover; border-radius:14px; }
.admin-actions { display:flex; gap:7px; margin-top:10px; }

@media (max-width: 380px) {
  .screen { padding-left:12px; padding-right:12px; }
  .profile-card { min-height:430px; }
  .swipe-actions { gap:8px; }
  .like-photo { height:180px; }
}

@media (min-width: 700px) {
  body { background:#030407; }
  .app { border-left:1px solid var(--line); border-right:1px solid var(--line); box-shadow:0 0 100px rgba(0,0,0,.7); }
}