/* ============================================
   LoveAI - Global AI Dating Platform
   Complete Design System
   ============================================ */

/* === Design Tokens === */
:root {
  --pink: #FF6B8A;
  --magenta: #D946EF;
  --violet: #8B5CF6;
  --blue: #3B82F6;
  --orange: #FF8C42;
  --love: #FF4D7E;
  --bg-deep: #0B0B1A;
  --bg-surface: #16162A;
  --bg-card: #1E1E38;
  --bg-elevated: #252545;
  --glass: rgba(255,255,255,0.06);
  --glass-border: rgba(255,255,255,0.1);
  --glass-strong: rgba(255,255,255,0.12);
  --text-primary: #FFFFFF;
  --text-secondary: rgba(255,255,255,0.65);
  --text-muted: rgba(255,255,255,0.4);
  --success: #10B981;
  --warning: #F59E0B;
  --error: #EF4444;
  --info: #3B82F6;
  --gradient-aurora: linear-gradient(135deg,#FF6B8A 0%,#D946EF 50%,#8B5CF6 100%);
  --gradient-sunset: linear-gradient(135deg,#FF8C42 0%,#FF6B8A 50%,#D946EF 100%);
  --gradient-ocean: linear-gradient(135deg,#3B82F6 0%,#8B5CF6 100%);
  --gradient-love: linear-gradient(135deg,#FF4D7E 0%,#FF6B8A 100%);
  --gradient-glass: linear-gradient(135deg,rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.05) 100%);
  --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px;
  --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px;
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px;
  --radius-xl: 20px; --radius-2xl: 24px; --radius-full: 9999px;
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.2);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.3);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.4);
  --shadow-glow-pink: 0 0 20px rgba(255,107,138,0.3);
  --shadow-glow-violet: 0 0 20px rgba(139,92,246,0.3);
  --font-family: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --ease-out: cubic-bezier(0.4,0,0.2,1);
  --ease-spring: cubic-bezier(0.34,1.56,0.64,1);
  --duration-fast: 150ms; --duration-normal: 200ms; --duration-slow: 300ms;
  --sidebar-width: 280px; --bottom-nav-height: 64px; --top-bar-height: 56px;
}

/* === Reset === */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { font-size:16px; -webkit-font-smoothing:antialiased; scroll-behavior:smooth; }
body { font-family:var(--font-family); background:var(--bg-deep); color:var(--text-primary); line-height:1.5; overflow:hidden; height:100vh; width:100vw; }
a { color:inherit; text-decoration:none; }
button { cursor:pointer; border:none; background:none; font-family:inherit; }
input,textarea,select { font-family:inherit; border:none; outline:none; }
img { max-width:100%; display:block; }
ul,ol { list-style:none; }
::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.15); border-radius:4px; }

/* === App Shell === */
#app { width:100%; height:100vh; position:relative; overflow:hidden; }
.page { position:absolute; top:0; left:0; width:100%; height:100%; opacity:0; visibility:hidden; transition:opacity var(--duration-slow) var(--ease-out),visibility var(--duration-slow); overflow-y:auto; overflow-x:hidden; }
.page.active { opacity:1; visibility:visible; z-index:1; }

/* === Splash Screen === */
.splash-screen { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100vh; background:var(--bg-deep); position:relative; overflow:hidden; z-index:100; }
.splash-bg { position:absolute; inset:0; background:linear-gradient(135deg,#1a0a2e 0%,#0B0B1A 30%,#0a1628 60%,#1a0a2e 100%); animation:splashGrad 8s ease infinite; }
@keyframes splashGrad { 0%,100%{background:linear-gradient(135deg,#1a0a2e 0%,#0B0B1A 30%,#0a1628 60%,#1a0a2e 100%)} 33%{background:linear-gradient(135deg,#2a0a3e 0%,#0B0B1A 30%,#0a1628 60%,#1a0a2e 100%)} 66%{background:linear-gradient(135deg,#1a0a2e 0%,#1a0a2e 30%,#0B0B1A 60%,#0a1628 100%)} }
.splash-particles { position:absolute; inset:0; overflow:hidden; }
.particle { position:absolute; border-radius:50%; animation:floatUp linear infinite; opacity:0; }
@keyframes floatUp { 0%{transform:translateY(100vh) scale(0);opacity:0} 10%{opacity:1} 90%{opacity:1} 100%{transform:translateY(-10vh) scale(1);opacity:0} }
.splash-heart { position:absolute; font-size:20px; animation:heartFloat 6s ease-in-out infinite; opacity:0; }
@keyframes heartFloat { 0%{transform:translateY(100vh) rotate(0deg) scale(0.5);opacity:0} 20%{opacity:0.8} 80%{opacity:0.6} 100%{transform:translateY(-20vh) rotate(360deg) scale(1.2);opacity:0} }
.splash-content { position:relative; z-index:2; text-align:center; }
.splash-logo { width:120px; height:120px; margin:0 auto 32px; background:var(--gradient-aurora); border-radius:30px; display:flex; align-items:center; justify-content:center; font-size:48px; animation:logoPulse 2s ease-in-out infinite; box-shadow:0 0 40px rgba(217,70,239,0.4); }
@keyframes logoPulse { 0%,100%{transform:scale(1);box-shadow:0 0 40px rgba(217,70,239,0.4)} 50%{transform:scale(1.05);box-shadow:0 0 60px rgba(217,70,239,0.6)} }
.splash-title { font-size:40px; font-weight:800; background:var(--gradient-aurora); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-bottom:12px; letter-spacing:-1px; }
.splash-subtitle { font-size:18px; color:var(--text-secondary); margin-bottom:48px; animation:fadeInUp 1s ease 0.5s both; }
@keyframes fadeInUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
.splash-progress { width:200px; height:3px; background:rgba(255,255,255,0.1); border-radius:3px; margin:0 auto; overflow:hidden; }
.splash-progress-bar { height:100%; background:var(--gradient-aurora); border-radius:3px; animation:progressLoad 2.5s ease-in-out forwards; }
@keyframes progressLoad { 0%{width:0} 30%{width:40%} 60%{width:70%} 100%{width:100%} }
.splash-welcome { margin-top:24px; font-size:12px; color:var(--text-muted); animation:fadeInUp 1s ease 1s both; }

/* === Landing Page === */
.landing-page { background:var(--bg-deep); min-height:100vh; }
.landing-hero { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:var(--space-lg); position:relative; overflow:hidden; }
.landing-hero::before { content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background:radial-gradient(ellipse at 30% 20%,rgba(255,107,138,0.15) 0%,transparent 50%),radial-gradient(ellipse at 70% 80%,rgba(139,92,246,0.15) 0%,transparent 50%),radial-gradient(ellipse at 50% 50%,rgba(217,70,239,0.08) 0%,transparent 70%); animation:heroGlow 10s ease infinite; }
@keyframes heroGlow { 0%,100%{transform:rotate(0deg) scale(1)} 50%{transform:rotate(3deg) scale(1.05)} }
.landing-nav { position:fixed; top:0; left:0; right:0; z-index:50; padding:var(--space-md) var(--space-lg); display:flex; align-items:center; justify-content:space-between; backdrop-filter:blur(20px); background:rgba(11,11,26,0.8); border-bottom:1px solid var(--glass-border); }
.landing-nav-brand { display:flex; align-items:center; gap:var(--space-sm); font-size:20px; font-weight:700; }
.brand-icon { width:36px; height:36px; background:var(--gradient-aurora); border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:18px; }
.landing-nav-links { display:flex; gap:var(--space-lg); align-items:center; }
.landing-nav-links a { font-size:14px; color:var(--text-secondary); transition:color var(--duration-normal); }
.landing-nav-links a:hover { color:var(--text-primary); }
.hero-badge { display:inline-flex; align-items:center; gap:var(--space-sm); padding:6px 16px; background:var(--glass); border:1px solid var(--glass-border); border-radius:var(--radius-full); font-size:12px; color:var(--text-secondary); margin-bottom:var(--space-lg); position:relative; z-index:1; }
.hero-badge .dot { width:6px; height:6px; background:var(--success); border-radius:50%; animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.5} }
.hero-title { font-size:clamp(36px,8vw,72px); font-weight:800; line-height:1.1; margin-bottom:var(--space-lg); position:relative; z-index:1; letter-spacing:-2px; }
.gradient-text { background:var(--gradient-aurora); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.hero-desc { font-size:18px; color:var(--text-secondary); max-width:540px; margin:0 auto var(--space-xl); line-height:1.6; position:relative; z-index:1; }
.hero-actions { display:flex; gap:var(--space-md); justify-content:center; flex-wrap:wrap; position:relative; z-index:1; }
.hero-stats { display:flex; gap:var(--space-2xl); margin-top:var(--space-3xl); position:relative; z-index:1; }
.hero-stat { text-align:center; }
.hero-stat-value { font-size:32px; font-weight:700; background:var(--gradient-aurora); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.hero-stat-label { font-size:12px; color:var(--text-muted); margin-top:4px; }

/* Landing Features Section */
.landing-features { padding:var(--space-3xl) var(--space-lg); max-width:1000px; margin:0 auto; }
.section-title { font-size:32px; font-weight:800; text-align:center; margin-bottom:var(--space-sm); }
.section-subtitle { font-size:16px; color:var(--text-secondary); text-align:center; margin-bottom:var(--space-2xl); }
.features-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:var(--space-lg); }
.feature-card { background:var(--bg-card); border:1px solid var(--glass-border); border-radius:var(--radius-xl); padding:var(--space-xl); transition:all var(--duration-normal); }
.feature-card:hover { transform:translateY(-4px); border-color:rgba(217,70,239,0.3); box-shadow:var(--shadow-glow-violet); }
.feature-icon { width:52px; height:52px; border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; font-size:24px; margin-bottom:var(--space-md); }
.feature-icon.pink { background:rgba(255,107,138,0.15); }
.feature-icon.violet { background:rgba(139,92,246,0.15); }
.feature-icon.blue { background:rgba(59,130,246,0.15); }
.feature-icon.orange { background:rgba(255,140,66,0.15); }
.feature-name { font-size:18px; font-weight:600; margin-bottom:var(--space-sm); }
.feature-desc { font-size:14px; color:var(--text-secondary); line-height:1.6; }

/* Landing CTA */
.landing-cta { padding:var(--space-3xl) var(--space-lg); text-align:center; position:relative; }
.landing-cta::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at center,rgba(217,70,239,0.1) 0%,transparent 70%); }
.cta-title { font-size:36px; font-weight:800; margin-bottom:var(--space-md); position:relative; }
.cta-desc { font-size:16px; color:var(--text-secondary); margin-bottom:var(--space-xl); position:relative; }

/* === Buttons === */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:var(--space-sm); padding:12px 24px; border-radius:var(--radius-md); font-size:14px; font-weight:600; transition:all var(--duration-normal) var(--ease-out); white-space:nowrap; }
.btn:active { transform:scale(0.97); }
.btn-primary { background:var(--gradient-aurora); color:white; box-shadow:var(--shadow-glow-pink); }
.btn-primary:hover { box-shadow:0 0 30px rgba(255,107,138,0.5); transform:translateY(-1px); }
.btn-secondary { background:var(--glass); color:var(--text-primary); border:1px solid var(--glass-border); backdrop-filter:blur(10px); }
.btn-secondary:hover { background:var(--glass-strong); border-color:rgba(255,255,255,0.2); }
.btn-love { background:var(--gradient-love); color:white; }
.btn-lg { padding:16px 32px; font-size:16px; border-radius:var(--radius-lg); }
.btn-sm { padding:8px 16px; font-size:12px; }
.btn-block { width:100%; }

/* === Auth Pages === */
.auth-page { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:var(--space-lg); background:var(--bg-deep); position:relative; }
.auth-page::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 0%,rgba(217,70,239,0.12) 0%,transparent 60%); }
.auth-container { width:100%; max-width:420px; position:relative; z-index:1; }
.auth-card { background:var(--bg-surface); border:1px solid var(--glass-border); border-radius:var(--radius-xl); padding:var(--space-xl); }
.auth-header { text-align:center; margin-bottom:var(--space-xl); }
.auth-logo { width:64px; height:64px; background:var(--gradient-aurora); border-radius:18px; display:flex; align-items:center; justify-content:center; font-size:28px; margin:0 auto var(--space-md); }
.auth-title { font-size:24px; font-weight:700; margin-bottom:var(--space-sm); }
.auth-subtitle { font-size:14px; color:var(--text-secondary); }
.form-group { margin-bottom:var(--space-md); }
.form-label { display:block; font-size:12px; font-weight:500; color:var(--text-secondary); margin-bottom:var(--space-sm); }
.form-input { width:100%; padding:12px 16px; background:var(--bg-card); border:1px solid var(--glass-border); border-radius:var(--radius-md); color:var(--text-primary); font-size:14px; transition:border-color var(--duration-normal); }
.form-input:focus { border-color:var(--magenta); box-shadow:0 0 0 3px rgba(217,70,239,0.15); }
.form-input::placeholder { color:var(--text-muted); }
.auth-divider { display:flex; align-items:center; gap:var(--space-md); margin:var(--space-lg) 0; color:var(--text-muted); font-size:12px; }
.auth-divider::before,.auth-divider::after { content:''; flex:1; height:1px; background:var(--glass-border); }
.social-login { display:flex; gap:var(--space-sm); justify-content:center; }
.social-btn { width:48px; height:48px; border-radius:var(--radius-md); background:var(--bg-card); border:1px solid var(--glass-border); display:flex; align-items:center; justify-content:center; font-size:20px; transition:all var(--duration-normal); }
.social-btn:hover { background:var(--bg-elevated); transform:translateY(-2px); }
.auth-footer { text-align:center; margin-top:var(--space-lg); font-size:13px; color:var(--text-secondary); }
.auth-footer a { color:var(--pink); font-weight:500; cursor:pointer; }

/* === Main App Layout === */
.app-layout { display:flex; height:100vh; background:var(--bg-deep); }
.app-sidebar { width:var(--sidebar-width); height:100vh; background:var(--bg-surface); border-right:1px solid var(--glass-border); display:flex; flex-direction:column; flex-shrink:0; transition:width var(--duration-slow) var(--ease-out); overflow:hidden; }
.app-sidebar.collapsed { width:72px; }
.sidebar-header { padding:var(--space-lg); display:flex; align-items:center; gap:var(--space-md); border-bottom:1px solid var(--glass-border); }
.sidebar-brand { display:flex; align-items:center; gap:var(--space-sm); font-size:18px; font-weight:700; white-space:nowrap; }
.sidebar-brand-icon { width:40px; height:40px; min-width:40px; background:var(--gradient-aurora); border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:20px; }
.sidebar-nav { flex:1; padding:var(--space-md); overflow-y:auto; }
.sidebar-nav-item { display:flex; align-items:center; gap:var(--space-md); padding:12px 16px; border-radius:var(--radius-md); color:var(--text-secondary); font-size:14px; font-weight:500; transition:all var(--duration-normal); margin-bottom:2px; white-space:nowrap; cursor:pointer; }
.sidebar-nav-item:hover { background:var(--glass); color:var(--text-primary); }
.sidebar-nav-item.active { background:var(--gradient-aurora); color:white; }
.sidebar-nav-item .nav-icon { width:24px; height:24px; min-width:24px; display:flex; align-items:center; justify-content:center; font-size:18px; }
.sidebar-nav-item .nav-badge { margin-left:auto; background:var(--love); color:white; font-size:10px; font-weight:600; padding:2px 6px; border-radius:var(--radius-full); min-width:18px; text-align:center; }
.sidebar-user { padding:var(--space-md); border-top:1px solid var(--glass-border); display:flex; align-items:center; gap:var(--space-md); }
.sidebar-user-avatar { width:40px; height:40px; min-width:40px; border-radius:50%; object-fit:cover; border:2px solid var(--glass-border); }
.sidebar-user-name { font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sidebar-user-status { font-size:11px; color:var(--success); }

/* === App Content === */
.app-content { flex:1; display:flex; flex-direction:column; overflow:hidden; }
.app-topbar { height:var(--top-bar-height); padding:0 var(--space-lg); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--glass-border); background:rgba(11,11,26,0.8); backdrop-filter:blur(20px); flex-shrink:0; }
.topbar-title { font-size:18px; font-weight:600; }
.topbar-actions { display:flex; align-items:center; gap:var(--space-sm); }
.topbar-btn { width:40px; height:40px; border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; color:var(--text-secondary); transition:all var(--duration-normal); position:relative; }
.topbar-btn:hover { background:var(--glass); color:var(--text-primary); }
.topbar-btn .badge-dot { position:absolute; top:8px; right:8px; width:8px; height:8px; background:var(--love); border-radius:50%; border:2px solid var(--bg-deep); }
.app-main { flex:1; overflow-y:auto; padding:var(--space-lg); }

/* === Discovery / Swipe === */
.discovery-container { display:flex; flex-direction:column; align-items:center; height:100%; padding:var(--space-md); }
.swipe-stack { position:relative; width:100%; max-width:360px; aspect-ratio:9/16; margin:0 auto; }
.swipe-card { position:absolute; width:100%; height:100%; border-radius:var(--radius-xl); overflow:hidden; background:var(--bg-card); box-shadow:var(--shadow-lg); cursor:grab; user-select:none; touch-action:none; }
.swipe-card:active { cursor:grabbing; }
.swipe-card-image { width:100%; height:65%; object-fit:cover; }
.swipe-card-info { padding:var(--space-lg); height:35%; display:flex; flex-direction:column; justify-content:space-between; }
.swipe-card-name { font-size:22px; font-weight:700; display:flex; align-items:center; gap:var(--space-sm); }
.swipe-card-name .age { font-weight:400; color:var(--text-secondary); }
.swipe-card-location { font-size:13px; color:var(--text-secondary); display:flex; align-items:center; gap:4px; }
.swipe-card-bio { font-size:13px; color:var(--text-secondary); line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.swipe-card-tags { display:flex; flex-wrap:wrap; gap:6px; }
.swipe-tag { padding:4px 10px; background:var(--glass); border:1px solid var(--glass-border); border-radius:var(--radius-full); font-size:11px; color:var(--text-secondary); }
.swipe-tag.match { background:rgba(217,70,239,0.15); border-color:rgba(217,70,239,0.3); color:var(--magenta); }
.swipe-actions { display:flex; gap:var(--space-md); margin-top:var(--space-lg); justify-content:center; }
.swipe-btn { width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:24px; transition:all var(--duration-normal) var(--ease-spring); border:2px solid; }
.swipe-btn:hover { transform:scale(1.1); }
.swipe-btn:active { transform:scale(0.95); }
.swipe-btn.pass { background:var(--bg-card); border-color:var(--error); color:var(--error); }
.swipe-btn.super { background:var(--bg-card); border-color:var(--blue); color:var(--blue); width:48px; height:48px; font-size:20px; }
.swipe-btn.like { background:var(--gradient-love); border-color:transparent; color:white; box-shadow:var(--shadow-glow-pink); }
.swipe-btn.rewind { background:var(--bg-card); border-color:var(--orange); color:var(--orange); width:48px; height:48px; font-size:20px; }
.swipe-overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; opacity:0; z-index:5; border-radius:var(--radius-xl); }
.swipe-overlay.like-ov { background:rgba(16,185,129,0.2); border:3px solid var(--success); }
.swipe-overlay.nope-ov { background:rgba(239,68,68,0.2); border:3px solid var(--error); }
.swipe-overlay-text { font-size:48px; font-weight:800; padding:8px 16px; border:4px solid; border-radius:var(--radius-md); }
.like-ov .swipe-overlay-text { color:var(--success); border-color:var(--success); transform:rotate(-15deg); }
.nope-ov .swipe-overlay-text { color:var(--error); border-color:var(--error); transform:rotate(15deg); }

/* === Match Overlay === */
.match-overlay { position:fixed; inset:0; z-index:200; display:flex; flex-direction:column; align-items:center; justify-content:center; background:rgba(11,11,26,0.95); backdrop-filter:blur(20px); opacity:0; visibility:hidden; transition:all var(--duration-slow); }
.match-overlay.active { opacity:1; visibility:visible; }
.match-title { font-size:40px; font-weight:800; background:var(--gradient-aurora); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-bottom:var(--space-xl); animation:matchBounce 0.6s var(--ease-spring); }
@keyframes matchBounce { 0%{transform:scale(0)} 100%{transform:scale(1)} }
.match-avatars { display:flex; align-items:center; gap:var(--space-lg); margin-bottom:var(--space-xl); }
.match-avatar { width:100px; height:100px; border-radius:50%; object-fit:cover; border:3px solid var(--magenta); }
.match-heart { font-size:36px; animation:heartBeat 1s ease infinite; }
@keyframes heartBeat { 0%,100%{transform:scale(1)} 50%{transform:scale(1.2)} }
.match-msg { font-size:16px; color:var(--text-secondary); margin-bottom:var(--space-xl); text-align:center; }

/* === Profile Grid === */
.section-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--space-lg); }
.section-header h2 { font-size:20px; font-weight:700; }
.section-header a { font-size:13px; color:var(--pink); cursor:pointer; }
.profile-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:var(--space-md); }
.profile-card { border-radius:var(--radius-lg); overflow:hidden; background:var(--bg-card); transition:all var(--duration-normal); cursor:pointer; }
.profile-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.profile-card-img-wrap { position:relative; aspect-ratio:3/4; overflow:hidden; }
.profile-card-img { width:100%; height:100%; object-fit:cover; transition:transform var(--duration-slow); }
.profile-card:hover .profile-card-img { transform:scale(1.05); }
.profile-card-online { position:absolute; top:8px; right:8px; width:10px; height:10px; background:var(--success); border-radius:50%; border:2px solid var(--bg-card); }
.profile-card-match-pct { position:absolute; bottom:8px; left:8px; padding:3px 8px; background:rgba(217,70,239,0.9); border-radius:var(--radius-full); font-size:10px; font-weight:600; color:white; }
.profile-card-info { padding:var(--space-sm) var(--space-md); }
.profile-card-name { font-size:13px; font-weight:600; display:flex; align-items:center; gap:4px; }
.profile-card-name .age { font-weight:400; color:var(--text-secondary); }
.profile-card-loc { font-size:11px; color:var(--text-muted); margin-top:2px; }

/* === Chat === */
.chat-layout { display:flex; height:100%; }
.chat-list { width:320px; border-right:1px solid var(--glass-border); display:flex; flex-direction:column; flex-shrink:0; }
.chat-list-header { padding:var(--space-md) var(--space-lg); border-bottom:1px solid var(--glass-border); }
.chat-list-title { font-size:20px; font-weight:700; margin-bottom:var(--space-sm); }
.chat-search { width:100%; padding:10px 14px; background:var(--bg-card); border:1px solid var(--glass-border); border-radius:var(--radius-md); color:var(--text-primary); font-size:13px; }
.chat-search::placeholder { color:var(--text-muted); }
.chat-list-items { flex:1; overflow-y:auto; }
.chat-item { display:flex; align-items:center; gap:var(--space-md); padding:var(--space-md) var(--space-lg); cursor:pointer; transition:background var(--duration-normal); }
.chat-item:hover { background:var(--glass); }
.chat-item.active { background:var(--glass-strong); }
.chat-item-avatar { width:48px; height:48px; min-width:48px; border-radius:50%; object-fit:cover; }
.chat-item-avatar-wrap { position:relative; }
.chat-item-avatar-wrap .online-dot { position:absolute; bottom:2px; right:2px; width:12px; height:12px; background:var(--success); border-radius:50%; border:2px solid var(--bg-surface); }
.chat-item-info { flex:1; min-width:0; }
.chat-item-name { font-size:14px; font-weight:600; margin-bottom:2px; }
.chat-item-preview { font-size:13px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat-item-meta { text-align:right; }
.chat-item-time { font-size:11px; color:var(--text-muted); margin-bottom:4px; }
.chat-item-unread { background:var(--love); color:white; font-size:10px; font-weight:600; width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-left:auto; }
.chat-window { flex:1; display:flex; flex-direction:column; }
.chat-win-header { padding:var(--space-md) var(--space-lg); border-bottom:1px solid var(--glass-border); display:flex; align-items:center; gap:var(--space-md); }
.chat-win-avatar { width:40px; height:40px; border-radius:50%; object-fit:cover; }
.chat-win-name { font-weight:600; }
.chat-win-status { font-size:11px; color:var(--success); }
.chat-win-actions { margin-left:auto; display:flex; gap:var(--space-sm); }
.chat-messages { flex:1; overflow-y:auto; padding:var(--space-lg); display:flex; flex-direction:column; gap:var(--space-md); }
.chat-msg { display:flex; gap:var(--space-sm); max-width:75%; }
.chat-msg.sent { align-self:flex-end; flex-direction:row-reverse; }
.chat-msg-avatar { width:32px; height:32px; min-width:32px; border-radius:50%; object-fit:cover; }
.chat-bubble { padding:10px 14px; border-radius:var(--radius-lg); font-size:13px; line-height:1.5; }
.chat-msg.received .chat-bubble { background:var(--bg-card); border-bottom-left-radius:4px; }
.chat-msg.sent .chat-bubble { background:var(--gradient-aurora); color:white; border-bottom-right-radius:4px; }
.chat-bubble-time { font-size:10px; color:var(--text-muted); margin-top:4px; }
.chat-msg.sent .chat-bubble-time { text-align:right; color:rgba(255,255,255,0.6); }
.chat-input-area { padding:var(--space-md) var(--space-lg); border-top:1px solid var(--glass-border); display:flex; align-items:center; gap:var(--space-md); }
.chat-input { flex:1; padding:12px 16px; background:var(--bg-card); border:1px solid var(--glass-border); border-radius:var(--radius-full); color:var(--text-primary); font-size:13px; }
.chat-input::placeholder { color:var(--text-muted); }
.chat-send-btn { width:44px; height:44px; border-radius:50%; background:var(--gradient-aurora); color:white; display:flex; align-items:center; justify-content:center; font-size:18px; transition:all var(--duration-normal); }
.chat-send-btn:hover { transform:scale(1.05); box-shadow:var(--shadow-glow-pink); }

/* === Profile Page === */
.profile-page-content { max-width:600px; margin:0 auto; }
.profile-hero { position:relative; border-radius:var(--radius-xl); overflow:hidden; margin-bottom:var(--space-lg); }
.profile-hero-img { width:100%; aspect-ratio:3/4; object-fit:cover; max-height:450px; }
.profile-hero-gradient { position:absolute; bottom:0; left:0; right:0; height:50%; background:linear-gradient(to top,rgba(11,11,26,0.95),transparent); padding:var(--space-lg); display:flex; flex-direction:column; justify-content:flex-end; }
.profile-hero-name { font-size:24px; font-weight:700; display:flex; align-items:center; gap:var(--space-sm); }
.profile-hero-detail { font-size:14px; color:var(--text-secondary); margin-top:4px; }
.profile-section { background:var(--bg-card); border:1px solid var(--glass-border); border-radius:var(--radius-lg); padding:var(--space-lg); margin-bottom:var(--space-md); }
.profile-section-title { font-size:16px; font-weight:600; margin-bottom:var(--space-md); display:flex; align-items:center; gap:var(--space-sm); }
.profile-bio { font-size:14px; color:var(--text-secondary); line-height:1.7; }
.profile-interests { display:flex; flex-wrap:wrap; gap:var(--space-sm); }
.interest-tag { padding:6px 14px; background:var(--glass); border:1px solid var(--glass-border); border-radius:var(--radius-full); font-size:13px; color:var(--text-secondary); transition:all var(--duration-normal); cursor:pointer; }
.interest-tag:hover { background:rgba(217,70,239,0.15); border-color:rgba(217,70,239,0.3); color:var(--magenta); }
.profile-stats-row { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-md); text-align:center; }
.profile-stat-val { font-size:24px; font-weight:700; background:var(--gradient-aurora); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.profile-stat-lbl { font-size:11px; color:var(--text-muted); margin-top:2px; }

/* === AI Features === */
.ai-section { background:var(--gradient-glass); border:1px solid var(--glass-border); border-radius:var(--radius-xl); padding:var(--space-xl); margin-bottom:var(--space-lg); position:relative; overflow:hidden; }
.ai-section::before { content:''; position:absolute; top:-50%; right:-50%; width:100%; height:100%; background:radial-gradient(circle,rgba(139,92,246,0.1) 0%,transparent 70%); }
.ai-section-title { font-size:18px; font-weight:700; margin-bottom:var(--space-sm); display:flex; align-items:center; gap:var(--space-sm); position:relative; }
.ai-section-desc { font-size:14px; color:var(--text-secondary); margin-bottom:var(--space-lg); position:relative; }
.ai-features-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:var(--space-md); position:relative; }
.ai-feature-card { background:var(--bg-card); border:1px solid var(--glass-border); border-radius:var(--radius-lg); padding:var(--space-lg); transition:all var(--duration-normal); cursor:pointer; }
.ai-feature-card:hover { transform:translateY(-2px); border-color:rgba(139,92,246,0.3); box-shadow:var(--shadow-glow-violet); }
.ai-feature-icon { width:44px; height:44px; background:var(--gradient-ocean); border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; font-size:20px; margin-bottom:var(--space-md); }
.ai-feature-name { font-size:14px; font-weight:600; margin-bottom:4px; }
.ai-feature-desc { font-size:11px; color:var(--text-muted); }
.ai-chat-box { max-width:600px; margin:0 auto; background:var(--bg-card); border:1px solid var(--glass-border); border-radius:var(--radius-xl); overflow:hidden; }
.ai-chat-header { padding:var(--space-md) var(--space-lg); border-bottom:1px solid var(--glass-border); display:flex; align-items:center; gap:var(--space-md); }
.ai-chat-avatar { width:40px; height:40px; background:var(--gradient-ocean); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:18px; }
.ai-chat-msgs { padding:var(--space-lg); min-height:250px; max-height:350px; overflow-y:auto; display:flex; flex-direction:column; gap:var(--space-md); }
.ai-chat-input-area { padding:var(--space-md) var(--space-lg); border-top:1px solid var(--glass-border); display:flex; gap:var(--space-sm); }

/* === VIP === */
.vip-page { max-width:800px; margin:0 auto; }
.vip-header { text-align:center; margin-bottom:var(--space-2xl); }
.vip-title { font-size:32px; font-weight:800; background:linear-gradient(135deg,#FFD700,#FF8C42,#FF6B8A); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-bottom:var(--space-sm); }
.vip-subtitle { color:var(--text-secondary); }
.vip-plans { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:var(--space-lg); }
.vip-plan { background:var(--bg-card); border:1px solid var(--glass-border); border-radius:var(--radius-xl); padding:var(--space-xl); text-align:center; transition:all var(--duration-normal); position:relative; }
.vip-plan:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.vip-plan.featured { border-color:var(--magenta); background:linear-gradient(180deg,rgba(217,70,239,0.1) 0%,var(--bg-card) 100%); }
.vip-plan-badge { position:absolute; top:-12px; left:50%; transform:translateX(-50%); padding:4px 16px; background:var(--gradient-aurora); border-radius:var(--radius-full); font-size:11px; font-weight:600; white-space:nowrap; }
.vip-plan-name { font-size:18px; font-weight:700; margin-bottom:var(--space-sm); }
.vip-plan-price { font-size:32px; font-weight:800; margin-bottom:var(--space-xs); }
.vip-plan-price .currency { font-size:16px; font-weight:500; }
.vip-plan-price .period { font-size:13px; font-weight:400; color:var(--text-muted); }
.vip-plan-features { margin-top:var(--space-lg); text-align:left; }
.vip-plan-feature { display:flex; align-items:center; gap:var(--space-sm); padding:6px 0; font-size:13px; color:var(--text-secondary); }
.vip-plan-feature .check { color:var(--success); }
.vip-plan-feature .cross { color:var(--text-muted); }

/* === Feed === */
.feed-container { max-width:600px; margin:0 auto; }
.feed-composer { background:var(--bg-card); border:1px solid var(--glass-border); border-radius:var(--radius-lg); padding:var(--space-md); margin-bottom:var(--space-lg); display:flex; gap:var(--space-md); align-items:center; }
.feed-composer-avatar { width:40px; height:40px; border-radius:50%; object-fit:cover; }
.feed-composer-input { flex:1; padding:10px 16px; background:var(--bg-elevated); border:none; border-radius:var(--radius-full); color:var(--text-primary); font-size:13px; }
.feed-composer-input::placeholder { color:var(--text-muted); }
.feed-post { background:var(--bg-card); border:1px solid var(--glass-border); border-radius:var(--radius-lg); margin-bottom:var(--space-md); overflow:hidden; }
.feed-post-header { display:flex; align-items:center; gap:var(--space-md); padding:var(--space-md); }
.feed-post-avatar { width:40px; height:40px; border-radius:50%; object-fit:cover; }
.feed-post-user { flex:1; }
.feed-post-name { font-size:13px; font-weight:600; }
.feed-post-time { font-size:11px; color:var(--text-muted); }
.feed-post-content { padding:0 var(--space-md) var(--space-md); font-size:14px; line-height:1.6; color:var(--text-secondary); }
.feed-post-actions { display:flex; padding:var(--space-sm) var(--space-md); border-top:1px solid var(--glass-border); gap:var(--space-lg); }
.feed-action { display:flex; align-items:center; gap:6px; font-size:13px; color:var(--text-muted); transition:color var(--duration-normal); cursor:pointer; }
.feed-action:hover { color:var(--text-primary); }
.feed-action.liked { color:var(--love); }

/* === Bottom Nav (Mobile) === */
.bottom-nav { display:none; position:fixed; bottom:0; left:0; right:0; height:var(--bottom-nav-height); background:rgba(22,22,42,0.95); backdrop-filter:blur(20px); border-top:1px solid var(--glass-border); z-index:50; }
.bottom-nav-items { display:flex; align-items:center; justify-content:space-around; height:100%; }
.bottom-nav-item { display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 12px; color:var(--text-muted); transition:color var(--duration-normal); cursor:pointer; position:relative; }
.bottom-nav-item.active { color:var(--pink); }
.bottom-nav-item .bn-icon { font-size:22px; height:24px; display:flex; align-items:center; }
.bottom-nav-item .bn-label { font-size:10px; font-weight:500; }
.bottom-nav-item .bn-badge { position:absolute; top:4px; right:4px; width:16px; height:16px; background:var(--love); border-radius:50%; font-size:9px; display:flex; align-items:center; justify-content:center; color:white; font-weight:600; }
.bottom-nav-center { width:52px; height:52px; background:var(--gradient-aurora); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:24px; margin-top:-20px; box-shadow:0 4px 16px rgba(217,70,239,0.4); transition:transform var(--duration-normal); color:white; }
.bottom-nav-center:hover { transform:scale(1.1); }

/* === Settings === */
.settings-container { max-width:600px; margin:0 auto; }
.settings-group { background:var(--bg-card); border:1px solid var(--glass-border); border-radius:var(--radius-lg); margin-bottom:var(--space-md); overflow:hidden; }
.settings-group-title { padding:var(--space-md) var(--space-lg); font-size:12px; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.5px; border-bottom:1px solid var(--glass-border); }
.settings-item { display:flex; align-items:center; gap:var(--space-md); padding:var(--space-md) var(--space-lg); transition:background var(--duration-normal); cursor:pointer; }
.settings-item:hover { background:var(--glass); }
.settings-item + .settings-item { border-top:1px solid rgba(255,255,255,0.03); }
.settings-item-icon { width:36px; height:36px; border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; font-size:16px; }
.settings-item-content { flex:1; }
.settings-item-label { font-size:14px; font-weight:500; }
.settings-item-desc { font-size:11px; color:var(--text-muted); margin-top:2px; }
.toggle { width:44px; height:24px; background:var(--bg-elevated); border-radius:12px; position:relative; cursor:pointer; transition:background var(--duration-normal); flex-shrink:0; }
.toggle.active { background:var(--magenta); }
.toggle::after { content:''; position:absolute; top:2px; left:2px; width:20px; height:20px; background:white; border-radius:50%; transition:transform var(--duration-normal); }
.toggle.active::after { transform:translateX(20px); }

/* === Nearby === */
.nearby-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:var(--space-md); }
.nearby-card { text-align:center; cursor:pointer; transition:transform var(--duration-normal); }
.nearby-card:hover { transform:translateY(-2px); }
.nearby-avatar { width:80px; height:80px; border-radius:50%; object-fit:cover; margin:0 auto var(--space-sm); border:3px solid var(--glass-border); }
.nearby-card:hover .nearby-avatar { border-color:var(--pink); }
.nearby-name { font-size:12px; font-weight:600; }
.nearby-dist { font-size:11px; color:var(--text-muted); }

/* === Responsive === */
@media (max-width:768px) {
  .app-sidebar { display:none; }
  .bottom-nav { display:block; }
  .app-main { padding-bottom:calc(var(--bottom-nav-height) + 16px); }
  .chat-list { width:100%; }
  .chat-window { display:none; }
  .chat-window.mobile-active { display:flex; position:absolute; inset:0; z-index:10; background:var(--bg-deep); }
  .landing-nav-links { display:none; }
  .hero-stats { gap:var(--space-lg); }
  .profile-grid { grid-template-columns:repeat(2,1fr); }
  .vip-plans { grid-template-columns:1fr; }
  .features-grid { grid-template-columns:1fr; }
}

@media (max-width:480px) {
  .hero-title { font-size:32px; }
  .swipe-stack { max-width:320px; }
}

/* === Utility === */
.hidden { display:none !important; }
.text-center { text-align:center; }
.mt-sm { margin-top:var(--space-sm); }
.mt-md { margin-top:var(--space-md); }
.mt-lg { margin-top:var(--space-lg); }
.mb-md { margin-bottom:var(--space-md); }
.mb-lg { margin-bottom:var(--space-lg); }
.flex { display:flex; }
.flex-center { display:flex; align-items:center; justify-content:center; }
.gap-sm { gap:var(--space-sm); }
.gap-md { gap:var(--space-md); }
.w-full { width:100%; }

/* === Animations === */
@keyframes slideInRight { from{transform:translateX(100%);opacity:0} to{transform:translateX(0);opacity:1} }
@keyframes slideInLeft { from{transform:translateX(-100%);opacity:0} to{transform:translateX(0);opacity:1} }
@keyframes slideInUp { from{transform:translateY(30px);opacity:0} to{transform:translateY(0);opacity:1} }
@keyframes scaleIn { from{transform:scale(0.9);opacity:0} to{transform:scale(1);opacity:1} }
.animate-slide-up { animation:slideInUp 0.4s var(--ease-out) both; }
.animate-scale-in { animation:scaleIn 0.3s var(--ease-out) both; }

/* Stagger children */
.stagger > *:nth-child(1) { animation-delay:0.05s; }
.stagger > *:nth-child(2) { animation-delay:0.1s; }
.stagger > *:nth-child(3) { animation-delay:0.15s; }
.stagger > *:nth-child(4) { animation-delay:0.2s; }
.stagger > *:nth-child(5) { animation-delay:0.25s; }
.stagger > *:nth-child(6) { animation-delay:0.3s; }
.stagger > *:nth-child(7) { animation-delay:0.35s; }
.stagger > *:nth-child(8) { animation-delay:0.4s; }

/* === Enhanced Landing Page Visuals === */

/* Floating hearts background */
.landing-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,107,138,0.3) 0%, transparent 2%),
    radial-gradient(circle at 80% 20%, rgba(217,70,239,0.25) 0%, transparent 2%),
    radial-gradient(circle at 40% 70%, rgba(139,92,246,0.2) 0%, transparent 2%),
    radial-gradient(circle at 70% 60%, rgba(255,140,66,0.2) 0%, transparent 2%),
    radial-gradient(circle at 10% 80%, rgba(255,77,126,0.25) 0%, transparent 1.5%),
    radial-gradient(circle at 90% 90%, rgba(59,130,246,0.2) 0%, transparent 1.5%),
    radial-gradient(circle at 50% 10%, rgba(255,107,138,0.15) 0%, transparent 3%),
    radial-gradient(circle at 30% 50%, rgba(217,70,239,0.15) 0%, transparent 2.5%);
  animation: floatingDots 20s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes floatingDots {
  0%, 100% { transform: translateY(0) scale(1); opacity: 0.6; }
  25% { transform: translateY(-15px) scale(1.05); opacity: 0.8; }
  50% { transform: translateY(-5px) scale(1.02); opacity: 0.7; }
  75% { transform: translateY(-20px) scale(1.08); opacity: 0.9; }
}

/* Enhanced hero title glow */
.hero-title {
  text-shadow: 0 0 60px rgba(255,107,138,0.3), 0 0 120px rgba(139,92,246,0.15);
}

/* Enhanced gradient text */
.gradient-text {
  background: linear-gradient(135deg, #FF6B8A 0%, #FF8C42 25%, #D946EF 50%, #8B5CF6 75%, #3B82F6 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientShift 4s ease infinite;
}

@keyframes gradientShift {
  0%, 100% { background-position: 0% center; }
  50% { background-position: 100% center; }
}

/* Feature card hover glow */
.feature-card {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.feature-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 60px rgba(255,107,138,0.15), 0 0 0 1px rgba(255,107,138,0.2);
}

/* Enhanced CTA section */
.landing-cta {
  position: relative;
  overflow: hidden;
}
.landing-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(255,107,138,0.1) 0%, transparent 70%);
  animation: ctaPulse 4s ease-in-out infinite;
}
@keyframes ctaPulse {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.1); opacity: 0.8; }
}

/* Hero stats enhanced */
.hero-stat {
  transition: transform 0.3s ease;
}
.hero-stat:hover {
  transform: scale(1.1);
}
.hero-stat-value {
  text-shadow: 0 0 30px rgba(255,107,138,0.4);
}

/* Badge pulse enhancement */
.hero-badge {
  animation: badgeFloat 3s ease-in-out infinite;
}
@keyframes badgeFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

/* Button enhanced glow */
.btn-primary {
  box-shadow: 0 4px 20px rgba(255,107,138,0.3), inset 0 1px 0 rgba(255,255,255,0.15);
  transition: all 0.3s ease;
}
.btn-primary:hover {
  box-shadow: 0 8px 40px rgba(255,107,138,0.5), inset 0 1px 0 rgba(255,255,255,0.2);
  transform: translateY(-2px);
}

/* Section title enhancement */
.section-title {
  text-shadow: 0 0 40px rgba(255,107,138,0.2);
}