@import "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap";.navbar{z-index:1000;background:#121212;border-bottom:1px solid #282828;justify-content:space-between;align-items:center;height:64px;padding:0 24px;display:flex;position:fixed;top:0;left:0;right:0}.nav-left,.nav-center,.nav-right{align-items:center;gap:8px;display:flex}.nav-center{gap:4px}.nav-logo{color:#fff;align-items:center;gap:10px;text-decoration:none;display:flex}.nav-logo-icon{color:#1db954}.nav-logo-text{letter-spacing:-.5px;font-size:20px;font-weight:700}.nav-logo-lockup{filter:drop-shadow(0 0 12px #ff2d7873);width:auto;height:42px;animation:2s infinite pulse}.nav-logo-mark{filter:drop-shadow(0 0 10px #a855f7cc);width:36px;height:36px;animation:2s infinite pulse;display:none}.nav-link{color:#b3b3b3;border-radius:8px;align-items:center;gap:6px;padding:8px 16px;font-size:14px;font-weight:500;text-decoration:none;transition:all .2s;display:flex}.nav-link:hover,.nav-link.active{color:#fff;background:#282828}.nav-user{align-items:center;gap:10px;display:flex}.nav-avatar{object-fit:cover;border:2px solid #1db954;border-radius:50%;width:32px;height:32px}.nav-avatar-fallback{color:#000;background:#1db954;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;display:flex}.nav-username{color:#fff;font-size:14px;font-weight:500}.nav-logout{color:#b3b3b3;cursor:pointer;background:0 0;border:none;border-radius:6px;align-items:center;padding:6px;transition:all .2s;display:flex}.nav-logout:hover{color:#f44;background:#ff44441a}.nav-login-btn{color:#000;background:#1db954;border-radius:20px;padding:8px 20px;font-size:14px;font-weight:600;text-decoration:none;transition:all .2s}.nav-login-btn:hover{background:#1ed760;transform:scale(1.02)}@media (width<=768px){.navbar{height:56px;padding:0 12px}.nav-logo-text,.nav-logo-lockup{display:none}.nav-logo-mark{display:block}.nav-link span{display:none}.nav-link{padding:8px}.nav-username{display:none}}.home-page{flex-direction:column;align-items:center;min-height:100vh;padding:80px 24px 40px;display:flex}.home-hero{text-align:center;max-width:500px;margin-bottom:60px}.home-logo{color:#000;background:linear-gradient(135deg,#1db954,#1ed760);border-radius:24px;justify-content:center;align-items:center;width:100px;height:100px;margin:0 auto 24px;display:flex}.home-title{color:#fff;letter-spacing:-1px;margin:0 0 12px;font-size:42px;font-weight:800}.home-subtitle{color:#b3b3b3;margin:0 0 28px;font-size:16px;line-height:1.6}.home-login-btn{color:#000;cursor:pointer;background:#1db954;border:none;border-radius:30px;align-items:center;gap:10px;margin-bottom:12px;padding:14px 32px;font-size:16px;font-weight:700;transition:all .2s;display:inline-flex}.home-login-btn:hover{background:#1ed760;transform:translateY(-2px);box-shadow:0 8px 24px #1db9544d}.home-hint{color:#666;margin:0;font-size:13px}.home-features{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;width:100%;max-width:800px;display:grid}.feature-card{text-align:center;background:#181818;border-radius:16px;padding:24px;transition:background .2s}.feature-card:hover{background:#282828}.feature-icon-wrap{color:#1db954;background:#282828;border-radius:14px;justify-content:center;align-items:center;width:56px;height:56px;margin:0 auto 16px;display:flex}.feature-card h3{color:#fff;margin:0 0 8px;font-size:16px}.feature-card p{color:#b3b3b3;margin:0;font-size:14px;line-height:1.5}@media (width<=768px){.home-page{padding:60px 16px 32px}.home-title{font-size:32px}.home-features{grid-template-columns:1fr}}@keyframes spin{to{transform:rotate(360deg)}}.home-error{color:#f44;background:#ff44441a;border-radius:8px;align-items:center;gap:8px;margin-bottom:16px;padding:10px 16px;font-size:14px;display:flex}.spinner-wrap{flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:40px 20px;display:flex}.spinner{width:var(--spinner-size,40px);height:var(--spinner-size,40px);border:3px solid #1db95433;border-top-color:#1db954;border-radius:50%;animation:.8s linear infinite spin}.spinner-text{color:#b3b3b3;margin:0;font-size:14px}.discover-page{flex-direction:column;align-items:center;max-width:420px;min-height:100vh;margin:0 auto;padding:88px 24px 24px;display:flex}.discover-card{background:#181818;border-radius:20px;width:100%;overflow:hidden;box-shadow:0 8px 32px #0006}.discover-photo{aspect-ratio:1;background:#282828;justify-content:center;align-items:center;width:100%;display:flex}.discover-photo img{object-fit:cover;width:100%;height:100%}.discover-photo-placeholder{color:#666}.discover-info{padding:20px}.discover-name{color:#fff;margin:0 0 6px;font-size:22px;font-weight:700}.discover-location{color:#b3b3b3;align-items:center;gap:4px;margin:0 0 10px;font-size:13px;display:flex}.discover-bio{color:#b3b3b3;margin:0 0 12px;font-size:14px;line-height:1.5}.discover-genres{flex-wrap:wrap;gap:6px;display:flex}.discover-genre{color:#1db954;background:#282828;border-radius:12px;padding:4px 10px;font-size:12px;font-weight:500}.discover-actions{justify-content:center;gap:20px;padding:16px 20px 24px;display:flex}.action-btn{cursor:pointer;color:#fff;border:none;border-radius:50%;justify-content:center;align-items:center;width:64px;height:64px;transition:all .2s;display:flex}.action-btn.pass{background:#f44}.action-btn.pass:hover{background:#f66;transform:scale(1.05)}.action-btn.like{background:#1db954}.action-btn.like:hover{background:#1ed760;transform:scale(1.05)}.action-btn:disabled{opacity:.6;cursor:not-allowed;transform:none!important}.discover-count{color:#666;margin-top:16px;font-size:13px}.discover-empty,.discover-error{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:16px;padding:80px 20px;display:flex}.discover-empty h2,.discover-error h2{color:#fff;margin:0;font-size:20px}.discover-empty p,.discover-error p{color:#b3b3b3;margin:0;font-size:14px}.empty-icon{color:#1db954}@media (width<=768px){.discover-page{padding:72px 16px 16px}}.matches-page{max-width:900px;margin:0 auto;padding:88px 24px 24px}.matches-title{color:#fff;align-items:center;gap:10px;margin:0 0 24px;font-size:24px;font-weight:700;display:flex}.title-icon{color:#ff6b6b}.matches-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px;display:grid}.match-card{background:#181818;border-radius:16px;transition:background .2s;overflow:hidden}.match-card:hover{background:#282828}.match-photo{aspect-ratio:1;background:#282828;justify-content:center;align-items:center;width:100%;display:flex}.match-photo img{object-fit:cover;width:100%;height:100%}.match-photo-placeholder{color:#666}.match-info{padding:16px}.match-name{color:#fff;margin:0 0 4px;font-size:16px;font-weight:600}.match-score{color:#1db954;margin:0 0 8px;font-size:14px;font-weight:600}.match-genres{flex-wrap:wrap;gap:4px;display:flex}.match-genre{color:#b3b3b3;background:#282828;border-radius:10px;padding:2px 8px;font-size:11px}.match-message-btn{color:#000;background:#1db954;justify-content:center;align-items:center;gap:6px;padding:12px 16px;font-size:14px;font-weight:600;text-decoration:none;transition:background .2s;display:flex}.match-message-btn:hover{background:#1ed760}.matches-empty,.matches-error{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:16px;padding:80px 20px;display:flex}.matches-empty h2,.matches-error h2{color:#fff;margin:0;font-size:20px}.matches-empty p,.matches-error p{color:#b3b3b3;margin:0;font-size:14px}@media (width<=768px){.matches-page{padding:72px 16px 16px}.matches-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}}.messages-page{height:calc(100vh - 64px);margin-top:64px;display:flex}.conv-list{background:#121212;border-right:1px solid #282828;flex-shrink:0;width:320px;overflow-y:auto}.conv-title{color:#fff;border-bottom:1px solid #282828;margin:0;padding:20px;font-size:20px;font-weight:700}.conv-empty{text-align:center;flex-direction:column;align-items:center;gap:12px;padding:40px 20px;display:flex}.conv-empty p{color:#b3b3b3;margin:0;font-size:14px}.conv-item{cursor:pointer;border-bottom:1px solid #1a1a1a;align-items:center;gap:12px;padding:14px 20px;transition:background .2s;display:flex}.conv-item:hover{background:#1a1a1a}.conv-item.active{background:#1a1a1a;border-left:3px solid #1db954}.conv-avatar{color:#b3b3b3;background:#282828;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:44px;height:44px;display:flex;overflow:hidden}.conv-avatar img{object-fit:cover;width:100%;height:100%}.conv-details{flex:1;min-width:0}.conv-name{color:#fff;margin:0 0 2px;font-size:14px;font-weight:600}.conv-preview{color:#b3b3b3;white-space:nowrap;text-overflow:ellipsis;margin:0;font-size:13px;overflow:hidden}.conv-badge{color:#000;background:#1db954;border-radius:10px;flex-shrink:0;padding:2px 7px;font-size:11px;font-weight:700}.chat-area{background:#0a0a0a;flex-direction:column;flex:1;display:flex}.chat-area.empty{justify-content:center;align-items:center}.chat-placeholder{color:#666;flex-direction:column;align-items:center;gap:16px;display:flex}.placeholder-icon{color:#282828}.chat-header{background:#121212;border-bottom:1px solid #282828;align-items:center;gap:12px;padding:16px 20px;display:flex}.chat-back{color:#b3b3b3;cursor:pointer;background:0 0;border:none;border-radius:6px;align-items:center;padding:6px;transition:all .2s;display:flex}.chat-back:hover{color:#fff;background:#282828}.chat-header-name{color:#fff;font-size:16px;font-weight:600}.chat-messages{flex-direction:column;flex:1;gap:12px;padding:20px;display:flex;overflow-y:auto}.chat-empty{color:#666;text-align:center;margin:auto}.chat-bubble{border-radius:16px;max-width:70%;padding:12px 16px;font-size:14px;line-height:1.5}.chat-bubble.me{color:#000;background:#1db954;border-bottom-right-radius:4px;align-self:flex-end}.chat-bubble.them{color:#fff;background:#282828;border-bottom-left-radius:4px;align-self:flex-start}.chat-text{margin:0}.chat-time{opacity:.6;text-align:right;margin-top:4px;font-size:11px;display:block}.chat-input-wrap{background:#121212;border-top:1px solid #282828;align-items:center;gap:10px;padding:12px 20px;display:flex}.chat-input{color:#fff;background:#282828;border:1px solid #404040;border-radius:20px;outline:none;flex:1;padding:10px 18px;font-size:14px}.chat-input:focus{border-color:#1db954}.chat-send{color:#000;cursor:pointer;background:#1db954;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;transition:all .2s;display:flex}.chat-send:hover{background:#1ed760}.chat-send:disabled{opacity:.5;cursor:not-allowed}@media (width<=768px){.messages-page{height:calc(100vh - 56px);margin-top:56px}.conv-list{width:100%}.conv-list.hidden-mobile{display:none}.chat-area{width:100%}.chat-area.empty{display:none}}body{color:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#0a0a0a;min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif}#root{min-height:100vh}button{font-family:inherit}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#121212}::-webkit-scrollbar-thumb{background:#404040;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#666}.spin{animation:1s linear infinite spin}:root{--bg-primary:#0f0f1a;--bg-secondary:#1a1a2e;--bg-card:#16213e;--accent:#e94560;--accent-hover:#ff6b6b;--text-primary:#fff;--text-secondary:#a0a0b0;--text-muted:#6c6c7d;--success:#00d9a5;--warning:#ffc107;--border:#2a2a3e;--gradient-start:#e94560;--gradient-end:#533483}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg-primary);color:var(--text-primary);min-height:100vh;font-family:Space Grotesk,-apple-system,BlinkMacSystemFont,sans-serif;line-height:1.6}h1,h2,h3,h4{letter-spacing:-.02em;font-weight:700}button,.btn{letter-spacing:.01em;font-weight:600}.badge-genre{letter-spacing:.02em;font-weight:500}.artist-name,a[href*=spotify\.com]{font-weight:600}a{color:var(--accent);text-decoration:none}a:hover{color:var(--accent-hover)}button{cursor:pointer;font-family:inherit}.container{max-width:1200px;margin:0 auto;padding:0 1.5rem}.card{background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:1.5rem;transition:transform .2s,box-shadow .2s}.card:hover{transform:translateY(-2px);box-shadow:0 8px 32px #e945601a}.btn{border:none;border-radius:12px;justify-content:center;align-items:center;gap:.5rem;padding:.75rem 1.5rem;font-size:.95rem;font-weight:600;transition:all .2s;display:inline-flex}.btn-primary{background:linear-gradient(135deg, var(--gradient-start), var(--gradient-end));color:#fff}.btn-primary:hover{opacity:.9;transform:translateY(-1px)}.btn-secondary{background:var(--bg-secondary);color:var(--text-primary);border:1px solid var(--border)}.btn-secondary:hover{background:var(--border)}.btn-spotify{color:#fff;background:#1db954}.btn-spotify:hover{background:#1ed760}.btn-danger{color:var(--accent);border:1px solid var(--accent);background:#e9456033}.btn-danger:hover{background:var(--accent);color:#fff}.input{border:1px solid var(--border);background:var(--bg-secondary);width:100%;color:var(--text-primary);border-radius:10px;padding:.75rem 1rem;font-size:.95rem;transition:border-color .2s}.input:focus{border-color:var(--accent);outline:none}.select{border:1px solid var(--border);background:var(--bg-secondary);width:100%;color:var(--text-primary);cursor:pointer;border-radius:10px;padding:.75rem 1rem;font-size:.95rem}.select:focus{border-color:var(--accent);outline:none}.badge{border-radius:20px;align-items:center;padding:.25rem .75rem;font-size:.8rem;font-weight:500;display:inline-flex}.badge-genre{color:var(--accent);background:#e9456026}.badge-match{color:var(--success);background:#00d9a526}.loading{color:var(--text-secondary);justify-content:center;align-items:center;gap:.5rem;display:flex}.error{color:var(--accent);background:#e945601a;border:1px solid #e9456033;border-radius:10px;padding:1rem}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.pulse{animation:2s infinite pulse}.toggle{cursor:pointer;width:50px;height:28px;display:inline-block;position:relative}.toggle input{opacity:0;width:0;height:0}.toggle-slider{background:var(--bg-secondary);border:1px solid var(--border);border-radius:28px;transition:all .3s;position:absolute;inset:0}.toggle-slider:before{content:"";background:var(--text-muted);border-radius:50%;width:22px;height:22px;transition:all .3s;position:absolute;bottom:2px;left:2px}.toggle input:checked+.toggle-slider{background:linear-gradient(135deg, var(--accent), var(--gradient-end));border-color:var(--accent)}.toggle input:checked+.toggle-slider:before{background:#fff;transform:translate(22px)}@media (width<=768px){.container{padding:0 1rem}.card{padding:1rem}.nav-links{gap:1rem}.user-name{display:none}}.navbar{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);z-index:100;background:#0f0f1af2;position:fixed;top:0;left:0;right:0}.navbar-content{justify-content:space-between;align-items:center;height:70px;display:flex}.logo{color:var(--text-primary);align-items:center;gap:.5rem;font-size:1.4rem;font-weight:800;display:flex}.logo-icon{font-size:1.6rem}.logo-text{background:linear-gradient(135deg, var(--accent), var(--gradient-end));-webkit-text-fill-color:transparent;-webkit-background-clip:text}.nav-links{align-items:center;gap:2rem;display:flex}.nav-link{color:var(--text-secondary);border-bottom:2px solid #0000;padding:.5rem 0;font-weight:500;transition:all .2s}.nav-link:hover,.nav-link.active{color:var(--text-primary);border-bottom-color:var(--accent)}.user-menu{align-items:center;gap:1rem;display:flex}.user-name{color:var(--text-secondary);font-size:.9rem}.btn-sm{padding:.5rem 1rem;font-size:.85rem}@media (width<=768px){.nav-links{gap:1rem}.user-name{display:none}}