/* === DOTYK — Modern Dating App 2026 === */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800&display=swap');

:root {
    --pink: #E84057;
    --pink-light: #FF6B7A;
    --pink-glow: rgba(232,64,87,0.35);
    --purple: #8B5CF6;
    --gradient: linear-gradient(135deg, #E84057 0%, #D946A8 50%, #8B5CF6 100%);
    --gradient-subtle: linear-gradient(135deg, rgba(232,64,87,0.12), rgba(139,92,246,0.12));
    --bg: #0a0a0f;
    --bg-2: #111118;
    --bg-glass: rgba(18,18,24,0.88);
    --card: #16161e;
    --card-hover: #1e1e28;
    --text: #f0f0f5;
    --text-sec: #8888a0;
    --text-muted: #55556a;
    --border: rgba(255,255,255,0.07);
    --border-focus: rgba(232,64,87,0.5);
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.2);
    --shadow-sm: 0 2px 6px rgba(0,0,0,0.25);
    --shadow: 0 4px 16px rgba(0,0,0,0.3);
    --shadow-md: 0 8px 32px rgba(0,0,0,0.35);
    --shadow-lg: 0 16px 48px rgba(0,0,0,0.4);
    --shadow-xl: 0 24px 64px rgba(0,0,0,0.5);
    --radius: 16px;
    --radius-lg: 22px;
    --radius-xl: 32px;
    --radius-full: 9999px;
    --nav-h: 64px;
    --safe-b: env(safe-area-inset-bottom, 0px);
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { font-size:16px; -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh; min-height: 100dvh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    line-height: 1.6;
}

/* ===== APP CONTAINER ===== */
.app-container { width:100%; min-height:100vh; min-height:100dvh; position:relative; }

/* ===== BOTTOM NAV ===== */
.bottom-nav {
    position:fixed; bottom:0; left:0; right:0;
    height:var(--nav-h); padding-bottom:var(--safe-b);
    background:var(--bg-glass);
    backdrop-filter:blur(40px) saturate(180%);
    -webkit-backdrop-filter:blur(40px) saturate(180%);
    border-top:1px solid var(--border);
    display:flex; justify-content:space-around; align-items:center;
    z-index:100;
}
.bottom-nav a {
    display:flex; flex-direction:column; align-items:center; gap:3px;
    color:var(--text-muted); text-decoration:none; font-size:10px; font-weight:600;
    padding:6px 0; border-radius:12px; transition:all 0.25s var(--ease);
    min-width:0; flex:1; letter-spacing:0.01em;
}
.bottom-nav a i { font-size:22px; transition:all 0.25s var(--ease); }
.bottom-nav a.active { color:var(--pink); }
.bottom-nav a.active i { transform:scale(1.1) translateY(-1px); filter:drop-shadow(0 2px 8px var(--pink-glow)); }
.bottom-nav a:not(.active):hover { color:var(--text-sec); }

/* ===== PAGE HEADER ===== */
.page-header {
    background:var(--bg-glass);
    backdrop-filter:blur(40px) saturate(180%);
    -webkit-backdrop-filter:blur(40px) saturate(180%);
    padding:18px 20px; border-bottom:1px solid var(--border);
    position:sticky; top:0; z-index:50;
}
.page-header h1 { font-size:26px; font-weight:800; letter-spacing:-0.5px; line-height:1.2; }
.page-logo {
    font-size:14px; font-weight:800; color:var(--text-sec);
    display:inline-flex; align-items:center; gap:5px; letter-spacing:-0.3px;
}
.page-logo i { color:var(--pink); font-size:20px; -webkit-text-fill-color:var(--pink); }

/* ===== BUTTONS ===== */
.btn {
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:14px 28px; border:none; border-radius:var(--radius);
    font-family:inherit; font-size:15px; font-weight:700; cursor:pointer;
    transition:all 0.2s var(--ease); text-decoration:none; white-space:nowrap;
    -webkit-tap-highlight-color:transparent; letter-spacing:-0.01em;
}
.btn-primary {
    background:var(--gradient); color:white;
    box-shadow:0 4px 20px var(--pink-glow), inset 0 1px 0 rgba(255,255,255,0.15);
}
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 32px var(--pink-glow); }
.btn-primary:active { transform:translateY(0) scale(0.98); }
.btn-ghost { background:transparent; color:var(--text-sec); }
.btn-ghost:hover { background:rgba(255,255,255,0.06); }
.btn-full { width:100%; }
.btn-icon-sm { width:40px; height:40px; border-radius:50%; padding:0; font-size:18px; }

/* ===== CARDS ===== */
.card {
    background:var(--card); border-radius:var(--radius-lg);
    box-shadow:var(--shadow-xs); overflow:hidden;
    border:1px solid var(--border); transition:box-shadow 0.2s;
}

/* ===== INPUTS ===== */
.input {
    width:100%; padding:14px 16px; border:1.5px solid rgba(255,255,255,0.08);
    border-radius:var(--radius); font-family:inherit; font-size:15px;
    transition:all 0.2s var(--ease); background:var(--card); outline:none; color:var(--text);
    -webkit-appearance:none; font-weight:500;
}
.input:focus { border-color:var(--pink); box-shadow:0 0 0 4px rgba(232,64,87,0.12); }
.input::placeholder { color:var(--text-muted); font-weight:400; }
.input-group { position:relative; }
.input-group i {
    position:absolute; left:14px; top:50%; transform:translateY(-50%);
    color:var(--text-muted); transition:color 0.2s; pointer-events:none; font-size:15px;
}
.input-group .input { padding-left:44px; }
.input-group:focus-within i { color:var(--pink); }
select.input { cursor:pointer; padding-right:36px; font-weight:500; }

/* ===== AVATARS ===== */
.avatar { width:48px; height:48px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.avatar-sm { width:40px; height:40px; }
.avatar-lg { width:60px; height:60px; }

/* ===== ONLINE DOT ===== */
.online-dot {
    width:12px; height:12px; background:#22C55E; border-radius:50%;
    border:2.5px solid var(--bg-2); box-shadow:0 0 0 0 rgba(34,197,94,0.4);
}
.online-dot-pulse::after {
    content:''; position:absolute; inset:-4px; border-radius:50%;
    border:2px solid #22C55E; animation:pulse 2s infinite;
}
@keyframes pulse { 0%{transform:scale(1);opacity:1} 100%{transform:scale(2);opacity:0} }

/* ===== MESSAGES ===== */
.msg-sent {
    background:var(--gradient); color:white;
    border-radius:20px 20px 6px 20px; max-width:78%; margin-left:auto;
    padding:12px 16px; word-wrap:break-word;
    box-shadow:0 2px 12px var(--pink-glow);
}
.msg-received {
    background:var(--card); color:var(--text);
    border-radius:20px 20px 20px 6px; max-width:78%; margin-right:auto;
    padding:12px 16px; word-wrap:break-word;
    box-shadow:var(--shadow-xs); border:1px solid var(--border);
}
.msg-time { font-size:10px; opacity:0.5; margin-top:4px; display:block; font-weight:500; }

/* ===== CHAT ===== */
.chat-container {
    display:flex; flex-direction:column; height:100vh; height:100dvh;
    background:var(--bg);
}
.chat-header {
    padding:12px 16px; background:var(--bg-glass);
    backdrop-filter:blur(40px) saturate(180%);
    -webkit-backdrop-filter:blur(40px) saturate(180%);
    border-bottom:1px solid var(--border);
    display:flex; align-items:center; gap:12px; flex-shrink:0;
}
.chat-messages {
    flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:8px;
    -webkit-overflow-scrolling:touch; background:var(--bg);
}
.chat-input-area {
    padding:12px 14px; background:var(--bg-glass);
    backdrop-filter:blur(40px) saturate(180%);
    -webkit-backdrop-filter:blur(40px) saturate(180%);
    border-top:1px solid var(--border);
    display:flex; gap:10px; align-items:center; flex-shrink:0;
    padding-bottom:calc(12px + var(--safe-b));
}
.chat-input-area input {
    flex:1; padding:12px 18px; border:1.5px solid rgba(255,255,255,0.08);
    border-radius:var(--radius-full); font-family:inherit; font-size:14px;
    outline:none; background:var(--card); color:var(--text); transition:all 0.2s; font-weight:500;
}
.chat-input-area input:focus { border-color:var(--pink); box-shadow:0 0 0 3px rgba(232,64,87,0.12); }
.chat-send-btn {
    width:44px; height:44px; border-radius:50%; border:none;
    background:var(--gradient); color:white; cursor:pointer;
    display:flex; align-items:center; justify-content:center; font-size:16px;
    flex-shrink:0; box-shadow:0 4px 16px var(--pink-glow);
    transition:all 0.2s var(--ease); -webkit-tap-highlight-color:transparent;
}
.chat-send-btn:active { transform:scale(0.9); }

/* ===== DATE SEPARATOR ===== */
.date-separator {
    text-align:center; color:var(--text-muted); font-size:11px; font-weight:600;
    padding:8px 0; position:relative; letter-spacing:0.02em;
}
.date-separator::before, .date-separator::after {
    content:''; position:absolute; top:50%; width:30%; height:1px;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
}
.date-separator::before { left:0; }
.date-separator::after { right:0; }

/* ===== EMPTY STATE ===== */
.empty-state { text-align:center; padding:60px 24px; }
.empty-state-icon {
    width:80px; height:80px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    margin:0 auto 20px; font-size:32px;
}
.empty-state h3 { font-size:18px; font-weight:700; margin-bottom:6px; letter-spacing:-0.3px; }
.empty-state p { color:var(--text-sec); font-size:14px; font-weight:400; }

/* ===== TOAST ===== */
.toast {
    position:fixed; top:16px; left:50%; transform:translateX(-50%) translateY(-100px);
    padding:14px 24px; border-radius:var(--radius); z-index:9999;
    transition:transform 0.4s var(--ease-bounce); font-size:14px; font-weight:600;
    box-shadow:var(--shadow-lg); max-width:88%; text-align:center;
    backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
}
.toast.show { transform:translateX(-50%) translateY(0); }
.toast-success { background:rgba(34,197,94,0.95); color:white; }
.toast-error { background:rgba(239,68,68,0.95); color:white; }

/* ===== PHOTO GRID ===== */
.photo-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.photo-item {
    aspect-ratio:1; border-radius:var(--radius); overflow:hidden;
    position:relative; cursor:pointer;
}
.photo-item img { width:100%; height:100%; object-fit:cover; transition:transform 0.3s; }

/* ===== GENDER CARD ===== */
.gender-card {
    border:2px solid var(--border); border-radius:var(--radius);
    padding:20px; cursor:pointer; transition:all 0.2s var(--ease);
    display:flex; align-items:center; gap:14px;
    -webkit-tap-highlight-color:transparent; background:var(--card);
}
.gender-card:hover { border-color:rgba(255,255,255,0.15); }
.gender-card.selected { border-color:var(--pink); background:linear-gradient(135deg, rgba(232,64,87,0.08), rgba(139,92,246,0.08)); }
.gender-card input { display:none; }

/* ===== GRADIENT TEXT ===== */
.gradient-text {
    background:var(--gradient); -webkit-background-clip:text;
    -webkit-text-fill-color:transparent; background-clip:text;
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.1); border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,0.2); }

/* ===== UTILITIES ===== */
.truncate { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.line-clamp-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.spinner { width:32px; height:32px; border:3px solid var(--border); border-top-color:var(--pink); border-radius:50%; animation:spin 0.7s linear infinite; margin:40px auto; }
@keyframes spin { to{transform:rotate(360deg)} }
.hidden { display:none!important; }

/* ===== CATALOG ===== */
.filter-bar { display:flex; gap:8px; padding:10px 12px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.filter-bar::-webkit-scrollbar { display:none; }
.filter-chip {
    display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:var(--radius-full);
    font-size:13px; font-weight:600; white-space:nowrap; cursor:pointer;
    border:2px solid var(--border); background:var(--card); color:var(--text);
    transition:all 0.2s var(--ease); -webkit-tap-highlight-color:transparent;
}
.filter-chip.active { border-color:var(--pink); background:rgba(232,64,87,0.12); color:var(--pink); }
.filter-chip:hover { border-color:var(--pink); }
.catalog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; padding:4px 12px 100px; }
.catalog-card {
    position:relative; border-radius:var(--radius); overflow:hidden; aspect-ratio:3/4;
    cursor:pointer; background:var(--bg-2);
}
.catalog-card img { width:100%; height:100%; object-fit:cover; transition:transform 0.3s var(--ease); }
.catalog-card:active img { transform:scale(1.05); }
.catalog-card .card-info {
    position:absolute; bottom:0; left:0; right:0; padding:10px 12px;
    background:linear-gradient(transparent, rgba(0,0,0,0.8));
}
.catalog-card .card-name { color:white; font-size:13px; font-weight:700; line-height:1.2; }
.catalog-card .card-city { color:rgba(255,255,255,0.7); font-size:10px; margin-top:1px; }
.catalog-card .online-badge { position:absolute; top:8px; right:8px; width:10px; height:10px; background:#22C55E; border-radius:50%; border:2px solid var(--bg-2); box-shadow:0 0 6px rgba(34,197,94,0.5); }
.catalog-empty { text-align:center; padding:60px 20px; }
.catalog-empty i { font-size:48px; color:var(--text-muted); margin-bottom:16px; }
.catalog-empty h3 { font-size:18px; font-weight:700; margin-bottom:6px; }
.catalog-empty p { color:var(--text-sec); font-size:14px; }

/* ===== FILTER PANEL ===== */
.filter-panel {
    position:fixed; bottom:0; left:0; right:0; background:var(--bg-2);
    border-radius:var(--radius-xl) var(--radius-xl) 0 0;
    box-shadow:0 -8px 30px rgba(0,0,0,0.5); z-index:200;
    transform:translateY(100%); transition:transform 0.35s var(--ease);
    padding:0 16px 30px; padding-bottom:calc(30px + var(--safe-b));
}
.filter-panel.open { transform:translateY(0); }
.filter-panel-handle { width:40px; height:4px; border-radius:2px; background:var(--text-muted); margin:12px auto; opacity:0.4; }
.filter-panel h3 { font-size:18px; font-weight:800; margin-bottom:16px; letter-spacing:-0.3px; }
.filter-group { margin-bottom:16px; }
.filter-group label { display:block; font-size:12px; font-weight:600; color:var(--text-sec); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:8px; }
.range-row { display:flex; align-items:center; gap:12px; }
.range-row input[type=range] {
    flex:1; -webkit-appearance:none; height:4px; background:rgba(255,255,255,0.1);
    border-radius:2px; outline:none;
}
.range-row input[type=range]::-webkit-slider-thumb {
    -webkit-appearance:none; width:22px; height:22px; border-radius:50%;
    background:var(--gradient); cursor:pointer; box-shadow:0 2px 8px var(--pink-glow);
}
.range-val { font-size:14px; font-weight:700; color:var(--pink); min-width:50px; text-align:center; }
.gender-pills { display:flex; gap:8px; }
.gender-pill {
    flex:1; padding:10px; border-radius:var(--radius); border:2px solid var(--border);
    background:var(--card); text-align:center; cursor:pointer; font-size:13px; font-weight:600;
    transition:all 0.2s var(--ease); color:var(--text);
}
.gender-pill.active { border-color:var(--pink); background:rgba(232,64,87,0.12); color:var(--pink); }

/* ===== PAGINATION ===== */
.pagination { display:flex; justify-content:center; align-items:center; gap:8px; padding:16px 12px 100px; }
.pagination a, .pagination span {
    width:36px; height:36px; border-radius:var(--radius); display:flex;
    align-items:center; justify-content:center; font-size:13px; font-weight:600;
    text-decoration:none; transition:all 0.2s var(--ease);
}
.pagination a { background:var(--card); color:var(--text); border:1px solid var(--border); }
.pagination a:hover { border-color:var(--pink); color:var(--pink); }
.pagination .current { background:var(--gradient); color:white; }

/* ===== MATCH LIST ===== */
.match-item {
    display:flex; align-items:center; gap:14px; padding:14px 16px;
    border-radius:var(--radius); text-decoration:none; color:var(--text);
    transition:background 0.15s; margin-bottom:4px;
}
.match-item:hover { background:var(--card-hover); }
.match-info { flex:1; min-width:0; }
.match-top { display:flex; align-items:center; justify-content:space-between; }
.match-name { font-weight:600; font-size:16px; letter-spacing:-0.2px; }
.match-time { font-size:12px; color:var(--text-sec); white-space:nowrap; margin-left:8px; }
.match-msg {
    font-size:14px; color:var(--text-sec); margin-top:3px;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.match-new { color:var(--pink); font-weight:600; font-size:12px; white-space:nowrap; margin-left:8px; }
.match-chevron { color:var(--text-muted); font-size:14px; }

/* ===== CONVERSATION LIST (chat) ===== */
.conv-item {
    display:flex; align-items:center; gap:14px; padding:14px 16px;
    border-radius:var(--radius); text-decoration:none; color:var(--text);
    transition:background 0.15s; margin-bottom:4px;
}
.conv-item:hover { background:var(--card-hover); }
.conv-info { flex:1; min-width:0; }
.conv-top { display:flex; justify-content:space-between; align-items:center; }
.conv-name { font-weight:600; font-size:15px; letter-spacing:-0.2px; }
.conv-time { font-size:12px; color:var(--text-sec); white-space:nowrap; margin-left:8px; }
.conv-preview { font-size:13px; color:var(--text-sec); margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.unread-badge {
    background:var(--gradient); color:white; font-size:11px; font-weight:700;
    min-width:20px; height:20px; border-radius:var(--radius-full);
    display:flex; align-items:center; justify-content:center; padding:0 6px;
    flex-shrink:0; box-shadow:0 2px 8px var(--pink-glow);
}

/* ===== PROFILE ===== */
.profile-card { background:var(--card); border-radius:var(--radius-lg); box-shadow:var(--shadow-xs); border:1px solid var(--border); padding:20px; }
.profile-card h3 { font-size:15px; font-weight:700; margin-bottom:14px; letter-spacing:-0.2px; }
.profile-card h3 span { color:var(--text-sec); font-weight:400; }
.profile-avatar-wrap {
    width:80px; height:80px; border-radius:50%; border:3px solid var(--pink);
    overflow:hidden; flex-shrink:0; box-shadow:0 4px 16px var(--pink-glow);
}
.profile-avatar-wrap img { width:100%; height:100%; object-fit:cover; }
.profile-avatar-fallback {
    width:80px; height:80px; border-radius:50%; background:var(--gradient);
    color:white; font-size:28px; font-weight:700; display:flex;
    align-items:center; justify-content:center; flex-shrink:0;
}
.profile-name { font-weight:700; font-size:18px; letter-spacing:-0.3px; }
.profile-city { font-size:13px; color:var(--text-sec); margin-top:2px; }
.profile-edit-link { cursor:pointer; font-size:13px; color:var(--pink); font-weight:600; }
.profile-edit-link i { margin-right:4px; }

/* ===== INTERESTS TAGS ===== */
.interest-tag {
    display:inline-flex; align-items:center; gap:4px; padding:6px 12px;
    border-radius:var(--radius-full); font-size:13px; font-weight:500;
    cursor:pointer; transition:all 0.15s var(--ease); border:1.5px solid var(--border);
    background:var(--card); color:var(--text-sec);
}
.interest-tag.active { border-color:var(--pink); background:rgba(232,64,87,0.12); color:var(--pink); }
.interest-tag:hover { border-color:var(--pink); }

/* ===== TOAST (legacy compat) ===== */
.toast-success { background:rgba(34,197,94,0.95); color:white; }
.toast-error { background:rgba(239,68,68,0.95); color:white; }

/* ===== PHOTO GALLERY FULLSCREEN ===== */
.photo-overlay {
    position:fixed; inset:0; background:rgba(0,0,0,0.92); z-index:300;
    display:flex; align-items:center; justify-content:center;
}
.photo-overlay img { max-width:100%; max-height:90vh; border-radius:var(--radius); object-fit:contain; }

/* ===== PROFILE VIEW STATS ===== */
.stats-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; text-align:center; }
.stat-item { padding:12px 8px; border-radius:var(--radius); background:var(--bg); }
.stat-num { font-size:20px; font-weight:800; letter-spacing:-0.5px; background:var(--gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.stat-label { font-size:11px; color:var(--text-sec); font-weight:600; margin-top:2px; }

/* ===== ACTION BUTTONS ROW ===== */
.action-row { display:flex; justify-content:center; gap:16px; padding:16px 0; }
.action-btn {
    width:56px; height:56px; border-radius:50%; border:2px solid var(--border);
    background:var(--card); cursor:pointer; display:flex; align-items:center;
    justify-content:center; font-size:20px; color:var(--text-sec);
    transition:all 0.25s var(--ease); -webkit-tap-highlight-color:transparent;
}
.action-btn:hover { border-color:var(--pink); color:var(--pink); transform:translateY(-2px); }
.action-btn.pass { color:var(--text-sec); }
.action-btn.pass:hover { border-color:#EF4444; color:#EF4444; }
.action-btn.super { color:var(--purple); border-color:rgba(139,92,246,0.3); }
.action-btn.super:hover { border-color:var(--purple); transform:translateY(-2px) scale(1.08); }
.action-btn.like { border-color:var(--pink); color:var(--pink); }
.action-btn.like:hover { background:var(--gradient); color:white; transform:translateY(-2px) scale(1.08); }

/* ===== ALERTS / NOTIFICATIONS ===== */
.alert {
    margin:12px 16px; padding:12px 16px; border-radius:var(--radius);
    font-size:14px; display:flex; align-items:center; gap:8px;
}
.alert-success { background:rgba(34,197,94,0.15); color:#4ADE80; border:1px solid rgba(34,197,94,0.2); }
.alert-error { background:rgba(239,68,68,0.15); color:#F87171; border:1px solid rgba(239,68,68,0.2); }

/* ===== DISCOVER (Dark Theme) ===== */
.discover-app {
    width:100%; height:100vh; height:100dvh;
    background:var(--bg); position:relative;
    display:flex; flex-direction:column; overflow:hidden;
}
.discover-header {
    padding:14px 20px; display:flex; align-items:center;
    justify-content:space-between; flex-shrink:0;
    background:transparent; position:relative; z-index:5;
}
.discover-logo {
    font-size:22px; font-weight:800; color:var(--text);
    display:flex; align-items:center; gap:8px; letter-spacing:-0.5px;
}
.discover-logo i { color:var(--pink); font-size:20px; }
.discover-header-actions { display:flex; align-items:center; gap:8px; }
.badge-btn {
    position:relative; display:flex; align-items:center; justify-content:center;
    width:40px; height:40px; border-radius:50%;
    background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.08);
    color:var(--text-sec); font-size:16px; text-decoration:none;
    transition:all 0.2s var(--ease);
}
.badge-btn:active { transform:scale(0.92); }
.badge-btn .count {
    position:absolute; top:-2px; right:-2px; min-width:18px; height:18px;
    border-radius:9px; background:var(--pink); color:white;
    font-size:10px; font-weight:700; display:flex; align-items:center;
    justify-content:center; padding:0 5px; box-shadow:0 2px 8px var(--pink-glow);
}
.card-stack {
    flex:1; position:relative; margin:0 8px; overflow:hidden; min-height:0;
}
.swipe-card {
    position:absolute; inset:0; border-radius:var(--radius-xl); overflow:hidden;
    background:var(--card); transition:transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94), opacity 0.35s;
    will-change:transform; touch-action:none; user-select:none;
    box-shadow:0 8px 40px rgba(0,0,0,0.4);
}
.swipe-card:active { transition:none; }
.swipe-card.gone-left { transform:translateX(-150%) rotate(-25deg) !important; opacity:0 !important; }
.swipe-card.gone-right { transform:translateX(150%) rotate(25deg) !important; opacity:0 !important; }
.swipe-card img { width:100%; height:100%; object-fit:cover; }
.swipe-card-gradient {
    position:absolute; bottom:0; left:0; right:0; height:55%;
    background:linear-gradient(transparent, rgba(0,0,0,0.8));
    pointer-events:none;
}
.swipe-card-info { position:absolute; bottom:0; left:0; right:0; padding:24px 20px; pointer-events:none; }
.swipe-card-name { color:white; font-size:28px; font-weight:800; line-height:1.15; letter-spacing:-0.5px; text-shadow:0 2px 12px rgba(0,0,0,0.5); }
.swipe-card-name span { font-weight:400; opacity:0.85; }
.swipe-card-meta { display:flex; align-items:center; gap:10px; margin-top:6px; flex-wrap:wrap; }
.swipe-card-meta span { color:rgba(255,255,255,0.8); font-size:13px; display:flex; align-items:center; gap:4px; font-weight:500; }
.swipe-card-meta .online { color:#4ADE80; }
.swipe-card-meta .online::before { content:''; width:7px; height:7px; background:#4ADE80; border-radius:50%; animation:pulse 2s infinite; }
.swipe-card-bio {
    color:rgba(255,255,255,0.65); font-size:13px; margin-top:8px; line-height:1.4;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.stamp {
    position:absolute; top:48px; padding:8px 22px; border-radius:12px;
    font-size:28px; font-weight:900; letter-spacing:4px;
    opacity:0; pointer-events:none; z-index:10; transform-origin:center;
}
.stamp-like { left:24px; color:#22C55E; border:3px solid #22C55E; transform:rotate(-12deg); }
.stamp-nope { right:24px; color:#EF4444; border:3px solid #EF4444; transform:rotate(12deg); }
.discover-actions {
    display:flex; align-items:center; justify-content:center;
    gap:16px; padding:12px 0 6px; flex-shrink:0;
}
.act {
    border:none; border-radius:50%; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:all 0.2s cubic-bezier(0.34,1.56,0.64,1);
    -webkit-tap-highlight-color:transparent;
}
.act:active { transform:scale(0.85); }
.act-nope { width:56px; height:56px; background:rgba(239,68,68,0.1); color:#EF4444; font-size:22px; border:2px solid rgba(239,68,68,0.25); }
.act-nope:hover { background:rgba(239,68,68,0.2); }
.act-nope:active { transform:scale(0.85); background:rgba(239,68,68,0.3); box-shadow:0 0 20px rgba(239,68,68,0.3); }
.act-super { width:46px; height:46px; background:rgba(59,130,246,0.1); color:#3B82F6; font-size:17px; border:2px solid rgba(59,130,246,0.25); }
.act-super:hover { background:rgba(59,130,246,0.2); }
.act-like { width:56px; height:56px; background:rgba(34,197,94,0.1); color:#22C55E; font-size:22px; border:2px solid rgba(34,197,94,0.25); }
.act-like:hover { background:rgba(34,197,94,0.2); }
.act-like:active { transform:scale(0.85); background:rgba(34,197,94,0.3); box-shadow:0 0 20px rgba(34,197,94,0.3); }
.discover-nav {
    display:flex; justify-content:space-around; padding:8px 0 6px;
    background:var(--bg-glass); backdrop-filter:blur(40px) saturate(180%);
    -webkit-backdrop-filter:blur(40px) saturate(180%);
    border-top:1px solid var(--border); flex-shrink:0;
}
.discover-nav a {
    display:flex; flex-direction:column; align-items:center; gap:3px;
    color:var(--text-muted); text-decoration:none; font-size:10px;
    font-weight:600; padding:4px 0; flex:1; transition:color 0.2s;
}
.discover-nav a i { font-size:20px; transition:all 0.2s; }
.discover-nav a.active { color:var(--pink); }
.discover-nav a.active i { transform:scale(1.15); filter:drop-shadow(0 2px 8px var(--pink-glow)); }
.discover-empty {
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    height:100%; text-align:center; padding:40px; color:var(--text-sec);
}
.discover-empty i { font-size:56px; margin-bottom:16px; color:var(--text-muted); }
.discover-empty h3 { color:var(--text); font-size:18px; font-weight:700; margin-bottom:6px; }
.discover-empty p { font-size:14px; color:var(--text-sec); }

/* ===== MATCH POPUP ===== */
.match-overlay {
    position:fixed; inset:0; background:rgba(10,10,15,0.95);
    display:none; align-items:center; justify-content:center;
    z-index:9999; backdrop-filter:blur(24px);
    -webkit-backdrop-filter:blur(24px);
}
.match-inner {
    text-align:center; padding:40px 32px; position:relative;
    animation:mIn 0.5s cubic-bezier(0.175,0.885,0.32,1.275);
}
.match-heart {
    font-size:72px; color:var(--pink);
    animation:hPulse 0.8s ease infinite;
    filter:drop-shadow(0 0 40px var(--pink-glow));
}
.match-title {
    font-size:36px; font-weight:900; background:var(--gradient);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    margin:12px 0 8px; letter-spacing:-1px;
}
.match-sub { color:var(--text-sec); font-size:15px; margin-bottom:24px; }
.match-photos { display:flex; justify-content:center; gap:12px; margin-bottom:28px; align-items:center; }
.match-photos img {
    width:88px; height:88px; border-radius:50%; border:3px solid rgba(255,255,255,0.2);
    object-fit:cover; box-shadow:0 8px 32px rgba(0,0,0,0.4);
}
.match-vs {
    width:38px; height:38px; border-radius:50%; background:var(--gradient);
    color:white; display:flex; align-items:center; justify-content:center;
    font-size:14px; margin:0 -8px; z-index:1;
    box-shadow:0 4px 16px var(--pink-glow);
}
.match-btn {
    display:block; width:100%; padding:16px; background:var(--gradient);
    color:white; border-radius:28px; font-weight:700; font-size:15px;
    text-decoration:none; text-align:center; border:none; cursor:pointer;
    box-shadow:0 6px 24px var(--pink-glow); transition:transform 0.2s var(--ease);
}
.match-btn:active { transform:scale(0.97); }
.match-skip {
    padding:14px; background:transparent; color:var(--text-sec);
    border:none; font-size:15px; cursor:pointer; font-family:inherit; margin-top:4px;
}
@keyframes mIn { from { transform:translateY(30px) scale(0.9); opacity:0 } to { transform:none; opacity:1 } }
@keyframes hPulse { 0%,100% { transform:scale(1) } 15% { transform:scale(1.12) } 30% { transform:scale(1) } 45% { transform:scale(1.08) } }
@keyframes fw { 0% { transform:translate(0,0) scale(1); opacity:1 } 100% { transform:translate(var(--tx),var(--ty)) scale(0); opacity:0 } }

/* ===== PROFILE VIEW (Dark Theme) ===== */
.pv-full {
    position:relative; height:100vh; height:100dvh;
    overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch;
    background:var(--bg);
}
.pv-photo-section { position:relative; height:65vh; min-height:400px; }
.pv-photo-section img { width:100%; height:100%; object-fit:cover; }
.pv-gradient {
    position:absolute; bottom:0; left:0; right:0; height:40%;
    background:linear-gradient(transparent, rgba(10,10,15,0.8));
}
.pv-name {
    position:absolute; bottom:24px; left:20px; right:20px; z-index:2;
}
.pv-name h1 { color:#fff; font-size:32px; font-weight:800; text-shadow:0 2px 12px rgba(0,0,0,0.6); }
.pv-name .age { font-weight:400; opacity:0.9; }
.pv-meta { display:flex; align-items:center; gap:16px; margin-top:8px; flex-wrap:wrap; }
.pv-meta span { color:rgba(255,255,255,0.85); font-size:13px; display:flex; align-items:center; gap:4px; text-shadow:0 1px 4px rgba(0,0,0,0.4); }
.pv-online { display:inline-flex; align-items:center; gap:4px; color:#4ADE80; font-size:12px; font-weight:600; }
.pv-online::before { content:''; width:8px; height:8px; background:#4ADE80; border-radius:50%; animation:pulse 2s infinite; }
.pv-dots {
    position:absolute; top:16px; left:0; right:0;
    display:flex; justify-content:center; gap:4px; z-index:5;
}
.pv-dot { width:100%; height:3px; border-radius:2px; background:rgba(255,255,255,0.3); transition:background 0.2s; }
.pv-dot.active { background:white; }
.pv-back {
    position:absolute; top:16px; left:12px; z-index:10;
    width:40px; height:40px; border-radius:50%;
    background:rgba(0,0,0,0.3); backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,0.1); color:white; font-size:16px; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:all 0.2s;
}
.pv-back:active { transform:scale(0.92); background:rgba(0,0,0,0.5); }
.pv-info {
    background:var(--bg-2); border-radius:var(--radius-xl) var(--radius-xl) 0 0;
    margin-top:-24px; position:relative; z-index:3;
    padding:28px 20px 120px;
    box-shadow:0 -4px 24px rgba(0,0,0,0.3);
}
.pv-tag {
    display:inline-flex; align-items:center; gap:6px; padding:8px 14px;
    border-radius:var(--radius-full); font-size:13px; font-weight:600; margin:4px;
    background:rgba(255,255,255,0.06); color:var(--text);
}
.pv-section-title { font-size:18px; font-weight:800; margin-bottom:12px; letter-spacing:-0.3px; }
.pv-bio { font-size:15px; line-height:1.7; color:var(--text); }
.pv-stat-row { display:flex; gap:12px; margin:20px 0; }
.pv-stat-item {
    flex:1; text-align:center; padding:14px 8px; border-radius:var(--radius);
    background:rgba(255,255,255,0.04); border:1px solid var(--border);
}
.pv-stat-num { font-size:22px; font-weight:800; color:var(--pink); letter-spacing:-0.5px; }
.pv-stat-label { font-size:11px; color:var(--text-sec); margin-top:2px; font-weight:600; }
.pv-action-bar {
    position:fixed; bottom:0; left:0; right:0; padding:12px 20px;
    padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));
    background:var(--bg-glass); backdrop-filter:blur(40px) saturate(180%);
    -webkit-backdrop-filter:blur(40px) saturate(180%);
    border-top:1px solid var(--border); display:flex; gap:12px; z-index:20;
}
.pv-action-bar .pv-btn {
    flex:1; height:52px; border-radius:26px; font-size:16px; font-weight:700;
    display:flex; align-items:center; justify-content:center; gap:8px;
    border:none; cursor:pointer; transition:all 0.2s var(--ease); text-decoration:none;
    -webkit-tap-highlight-color:transparent;
}
.pv-btn-pass {
    background:rgba(239,68,68,0.1); color:#EF4444; border:1px solid rgba(239,68,68,0.25);
}
.pv-btn-pass:active { transform:scale(0.95); background:rgba(239,68,68,0.2); }
.pv-btn-super {
    background:rgba(59,130,246,0.1); color:#3B82F6; border:1px solid rgba(59,130,246,0.25);
    width:52px; height:52px; border-radius:50%; flex:0 0 52px; font-size:20px;
}
.pv-btn-super:active { transform:scale(0.9); background:rgba(59,130,246,0.2); }
.pv-btn-like {
    background:var(--gradient); color:white;
    box-shadow:0 4px 20px var(--pink-glow);
}
.pv-btn-like:active { transform:scale(0.95); }
.pv-btn-msg {
    background:var(--gradient); color:white;
    box-shadow:0 4px 20px var(--pink-glow);
}
.pv-liked-badge {
    position:absolute; top:12px; right:12px; z-index:10;
    background:rgba(0,0,0,0.4); backdrop-filter:blur(12px);
    color:var(--pink); padding:6px 14px; border-radius:var(--radius-full);
    font-size:12px; font-weight:700;
    border:1px solid rgba(232,64,87,0.3);
}
.pv-match-badge {
    position:absolute; top:12px; right:12px; z-index:10;
    background:rgba(0,0,0,0.4); backdrop-filter:blur(12px);
    color:#4ADE80; padding:6px 14px; border-radius:var(--radius-full);
    font-size:12px; font-weight:700;
    border:1px solid rgba(34,197,94,0.3);
}

/* ===== AUTH PAGES ===== */
.auth-page {
    min-height:100vh; min-height:100dvh; display:flex; flex-direction:column;
    align-items:center; justify-content:center; padding:24px;
    background:var(--bg);
}
.auth-card { background:var(--card); border-radius:var(--radius-lg); padding:36px 28px; width:100%; max-width:400px; border:1px solid var(--border); }
.auth-title { font-size:28px; font-weight:800; text-align:center; margin-bottom:4px; }
.auth-subtitle { color:var(--text-sec); text-align:center; font-size:14px; margin-bottom:28px; }
.auth-link { text-align:center; margin-top:20px; font-size:14px; color:var(--text-sec); }
.auth-link a { color:var(--pink); font-weight:600; text-decoration:none; }
.auth-link a:hover { text-decoration:underline; }
.auth-error {
    padding:12px 16px; background:rgba(239,68,68,0.12); color:#F87171;
    border-radius:12px; margin-bottom:20px; font-size:14px;
    border:1px solid rgba(239,68,68,0.2);
}
.steps { display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:28px; }
.step-dot {
    width:32px; height:32px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:13px; font-weight:700; transition:all 0.3s;
}
.step-active { background:var(--gradient); color:white; }
.step-done { background:#10b981; color:white; }
.step-inactive { background:rgba(255,255,255,0.08); color:var(--text-muted); }
.step-line { width:32px; height:3px; border-radius:2px; background:rgba(255,255,255,0.08); }
.step-line-done { background:#10b981; }
.gender-card {
    border:2px solid var(--border); border-radius:var(--radius); padding:20px;
    cursor:pointer; transition:all 0.2s; display:flex; align-items:center; gap:16px;
    background:var(--card);
}
.gender-card:hover { border-color:rgba(255,255,255,0.15); }
.gender-card.selected { border-color:var(--pink); background:rgba(232,64,87,0.08); }
.gender-card input { display:none; }
.gender-icon { width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:24px; }

/* ===== LANDING PAGE ===== */
.landing-hero {
    background:var(--bg); min-height:100vh;
    display:flex; flex-direction:column;
}
.landing-hero-content {
    flex:1; display:flex; flex-direction:column; justify-content:center;
    align-items:center; text-align:center; padding:40px 24px;
}
.landing-hero h1 { font-size:56px; font-weight:900; background:var(--gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; margin-bottom:8px; }
.landing-hero p { font-size:20px; color:var(--text-sec); margin-bottom:40px; }
.landing-btns { display:flex; flex-direction:column; gap:12px; width:100%; max-width:320px; }
.landing-btn-primary {
    background:var(--gradient); color:white; padding:16px; border-radius:var(--radius);
    font-weight:700; font-size:17px; text-decoration:none; text-align:center;
    transition:all 0.2s; box-shadow:0 4px 20px var(--pink-glow);
}
.landing-btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 32px var(--pink-glow); }
.landing-btn-secondary {
    border:2px solid var(--border); color:var(--text); padding:14px;
    border-radius:var(--radius); font-weight:600; font-size:16px;
    text-decoration:none; text-align:center; transition:all 0.2s;
    background:var(--card);
}
.landing-btn-secondary:hover { border-color:var(--pink); color:var(--pink); }
.landing-features { background:var(--bg-2); padding:60px 24px; }
.feature-item { display:flex; gap:20px; margin-bottom:40px; align-items:flex-start; }
.feature-icon {
    width:56px; height:56px; border-radius:16px; background:var(--gradient);
    display:flex; align-items:center; justify-content:center;
    color:white; font-size:24px; flex-shrink:0;
}
.feature-item h4 { font-size:18px; font-weight:700; margin-bottom:4px; }
.feature-item p { color:var(--text-sec); font-size:14px; line-height:1.5; }
.landing-stats { background:var(--gradient); padding:48px 24px; }
.landing-stats-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; text-align:center; }
.landing-stats-grid div { color:white; }
.landing-stats-grid .num { font-size:32px; font-weight:900; }
.landing-stats-grid .label { font-size:13px; opacity:0.8; margin-top:4px; }
.landing-cta { padding:60px 24px; text-align:center; background:var(--bg); }
.landing-cta h3 { font-size:24px; font-weight:800; margin-bottom:8px; }
.landing-cta p { color:var(--text-sec); margin-bottom:24px; }
.landing-footer {
    background:var(--bg-2); color:var(--text); padding:40px 24px; text-align:center;
    border-top:1px solid var(--border);
}
.landing-footer a {
    color:var(--text-muted); text-decoration:none; margin:0 12px;
    font-size:20px; transition:color 0.2s;
}
.landing-footer a:hover { color:var(--pink); }

/* ===== SETTINGS ===== */
.settings-row {
    padding:16px 20px; display:flex; align-items:center;
    justify-content:space-between; border-bottom:1px solid var(--border);
}
.settings-row:last-child { border-bottom:none; }
.settings-label { display:flex; align-items:center; gap:12px; }
.settings-label i { color:var(--text-sec); }
.settings-value { color:var(--text-sec); font-size:14px; }
.settings-link {
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 20px; text-decoration:none; color:var(--text);
    border-bottom:1px solid var(--border);
}
.settings-link:last-child { border-bottom:none; }
.settings-logout {
    width:100%; padding:16px 20px; display:flex; align-items:center; gap:12px;
    color:#EF4444; border:none; background:none; cursor:pointer;
    font-family:inherit; font-size:15px;
}

/* ===== CITY AUTOCOMPLETE ===== */
.ac-wrap { position:relative; }
.ac-wrap .input { width:100%; }
.ac-list {
    position:absolute; top:100%; left:0; right:0; z-index:100;
    max-height:240px; overflow-y:auto;
    background:var(--card); border:1px solid var(--border); border-radius:12px;
    margin-top:4px; display:none;
    box-shadow:0 8px 32px rgba(0,0,0,.3);
}
.ac-list.open { display:block; }
.ac-group-label {
    padding:8px 14px 4px; font-size:11px; font-weight:700;
    color:var(--text-sec); text-transform:uppercase; letter-spacing:0.5px;
    position:sticky; top:0; background:var(--card); z-index:1;
}
.ac-item {
    padding:10px 14px; cursor:pointer; font-size:14px; color:var(--text);
    transition:background 0.15s;
}
.ac-item:hover, .ac-item.active { background:rgba(255,68,88,0.1); color:var(--pink); }
.ac-empty { padding:16px; text-align:center; color:var(--text-sec); font-size:13px; }

/* ===================================================================
   DESKTOP (>= 768px) — same as mobile, just wider and centered
   =================================================================== */
@media (min-width:768px) {
    .app-container, .chat-container, .discover-app {
        max-width:600px; margin-left:auto; margin-right:auto;
    }
    .bottom-nav, .pv-action-bar {
        width:100%; max-width:600px; left:50%; right:auto; transform:translateX(-50%);
    }
}

/* ===== TELEGRAM MINI APP ===== */
body.telegram-app {
    padding-top:env(safe-area-inset-top, 0px);
    padding-bottom:env(safe-area-inset-bottom, 0px);
}
body.telegram-app .bottom-nav,
body.telegram-app .discover-nav {
    padding-bottom:env(safe-area-inset-bottom, 0px);
}
body.telegram-app .page-header {
    padding-top:calc(18px + env(safe-area-inset-top, 0px));
}