body{margin:0;padding:0;min-height:100vh;display:block}#app{width:100%;margin:0;padding:0}:root{--primary: #FF6B6B;--primary-dark: #FF5252;--secondary: #4ECDC4;--success: #95E1D3;--background: #0F0F0F;--surface: #1A1A1A;--surface-light: #2A2A2A;--text: #FFFFFF;--text-secondary: #B0B0B0;--border: #333333;--shadow: rgba(0, 0, 0, .5)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:var(--background);color:var(--text);overflow-x:hidden;-webkit-font-smoothing:antialiased}.loading-screen{position:fixed;inset:0;background:linear-gradient(135deg,var(--primary) 0%,var(--secondary) 100%);display:flex;align-items:center;justify-content:center;z-index:9999}.loader{width:50px;height:50px;border:4px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.navbar{position:fixed;bottom:0;left:50%;transform:translate(-50%);width:100%;max-width:500px;background:var(--surface);border-top:1px solid var(--border);display:flex;justify-content:space-around;padding:12px 0 max(12px,env(safe-area-inset-bottom));z-index:100;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}.nav-btn{background:none;border:none;color:var(--text-secondary);display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11px;font-weight:500;cursor:pointer;transition:all .3s ease;padding:8px 16px;border-radius:12px;position:relative;text-decoration:none}.nav-btn.active{color:var(--primary);background:#ff6b6b1a}.nav-btn svg{transition:transform .3s ease}.nav-btn:active svg{transform:scale(.9)}.badge{position:absolute;top:4px;right:8px;background:var(--primary);color:#fff;font-size:10px;padding:2px 6px;border-radius:10px;font-weight:600;min-width:18px;height:18px;display:flex;align-items:center;justify-content:center}.unread-badge{background:var(--primary);color:#fff;font-size:11px;font-weight:700;min-width:20px;height:20px;border-radius:10px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px #ff6b6b66;position:absolute;bottom:16px;right:20px;padding:0 6px}.container{width:100%;max-width:500px;margin:0 auto;display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch}.page-title{font-size:32px;font-weight:700;margin:30px 0 20px;padding:0 20px}.page-container{padding-bottom:120px;min-height:100vh}.auth-page{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:24px;background:linear-gradient(135deg,var(--primary) 0%,var(--secondary) 100%)}.auth-card{background:var(--surface);border-radius:24px;padding:32px;width:100%;max-width:500px;box-shadow:0 20px 60px var(--shadow)}.auth-title{font-size:28px;font-weight:700;margin-bottom:8px;background:linear-gradient(135deg,var(--primary),var(--secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent}.auth-subtitle{color:var(--text-secondary);margin-bottom:24px}.form-group{margin-bottom:20px}.form-label{display:block;margin-bottom:8px;font-weight:500;font-size:14px}.form-input{width:100%;padding:14px 16px;background:var(--surface-light);border:2px solid var(--border);border-radius:12px;color:var(--text);font-size:16px;transition:all .3s ease}.form-input:focus{outline:none;border-color:var(--primary);background:var(--background)}.btn{width:100%;padding:16px;border:none;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease}.btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;box-shadow:0 4px 20px #ff6b6b66}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 30px #ff6b6b99}.btn-primary:active{transform:translateY(0)}.btn-secondary{background:var(--surface-light);color:var(--text)}.link{color:var(--primary);text-decoration:none;font-weight:500}.discover-page{padding:20px;padding-top:max(20px,env(safe-area-inset-top))}.card-stack{position:relative;height:calc(100vh - 200px);max-height:600px}.profile-card{position:absolute;width:100%;height:100%;background:var(--surface);border-radius:24px;overflow:hidden;box-shadow:0 10px 40px var(--shadow);transition:transform .3s ease}.profile-image{width:100%;height:70%;object-fit:cover;background:linear-gradient(135deg,var(--primary),var(--secondary))}.profile-info{padding:20px;background:linear-gradient(to top,var(--surface) 0%,transparent 100%);position:absolute;bottom:0;left:0;right:0}.profile-name{font-size:24px;font-weight:700;margin-bottom:8px}.profile-details{color:var(--text-secondary);font-size:14px;display:flex;flex-wrap:wrap;gap:12px}.swipe-buttons{display:flex;justify-content:center;gap:20px;margin-top:20px}.swipe-btn{width:64px;height:64px;border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 20px var(--shadow)}.swipe-btn:active{transform:scale(.9)}.swipe-btn-skip{background:var(--surface-light);color:var(--text-secondary)}.swipe-btn-like{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;width:72px;height:72px}.matches-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;padding:0 20px 20px}.match-card{background:var(--surface);border-radius:16px;overflow:hidden;cursor:pointer;transition:transform .3s ease}.match-card:active{transform:scale(.95)}.match-image{width:100%;aspect-ratio:3/4;object-fit:cover;background:var(--surface-light);color:transparent;text-indent:10000px}.match-image[src=""]{opacity:0}.match-info{padding:12px}.match-name{font-weight:600;margin-bottom:4px}.match-message{font-size:12px;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chat-list{padding:0}.chat-item{display:flex;gap:12px;padding:16px 20px;background:var(--surface);border-bottom:1px solid var(--border);cursor:pointer;transition:all .3s ease;position:relative}.chat-item:active{transform:scale(.98)}.chat-avatar{width:56px;height:56px;border-radius:50%;object-fit:cover;background:var(--surface-light)}.chat-content{flex:1}.chat-header{display:flex;justify-content:space-between;margin-bottom:4px}.chat-name{font-weight:600}.chat-time{font-size:12px;color:var(--text-secondary)}.chat-preview{color:var(--text-secondary);font-size:14px}.conversation-header{background:var(--surface);padding:16px 20px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--border);width:100%}.messages-container{padding:20px;height:calc(100vh - 200px);overflow-y:auto}.message{display:flex;margin-bottom:16px}.message.sent{justify-content:flex-end}.message-bubble{max-width:70%;padding:12px 16px;border-radius:18px;word-wrap:break-word}.message.received .message-bubble{background:var(--surface)}.message.sent .message-bubble{background:linear-gradient(135deg,var(--primary),var(--primary-dark))}.message-input-container{position:fixed;bottom:0;left:50%;transform:translate(-50%);width:100%;max-width:500px;background:var(--surface);padding:12px 12px max(12px,env(safe-area-inset-bottom));display:flex;gap:12px;border-top:1px solid var(--border);z-index:101}.message-input{flex:1;padding:12px 16px;background:var(--surface-light);border:none;border-radius:24px;color:var(--text)}.send-btn{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--primary-dark));border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}.profile-page{padding:20px}.profile-header{text-align:center;margin-bottom:32px}.profile-photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:24px}.photo-item{aspect-ratio:1;border-radius:12px;overflow:hidden;background:var(--surface)}.photo-item img{width:100%;height:100%;object-fit:cover}.loading-container{display:flex;justify-content:center;align-items:center;min-height:200px;width:100%;margin:auto}.text-center{text-align:center}.mt-2{margin-top:16px}.error{color:var(--primary);font-size:14px;margin-top:8px}.success{color:var(--success);font-size:14px;margin-top:8px}@keyframes slideIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:slideIn .3s ease}.profile-section{background:var(--surface);border-radius:16px;padding:20px;margin-bottom:24px;box-shadow:0 4px 12px #0000001a}.section-title{font-size:18px;font-weight:600;margin-bottom:16px;color:var(--primary)}.photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}.photo-upload-btn{aspect-ratio:1;border:2px dashed var(--text-secondary);border-radius:12px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-secondary);background:#ffffff0d;transition:all .3s ease}.photo-upload-btn:hover{border-color:var(--primary);color:var(--primary);background:#ff6b6b1a}.photo-upload-btn svg{width:32px;height:32px}.primary-badge{position:absolute;top:8px;left:8px;background:var(--primary);color:#fff;font-size:10px;padding:4px 8px;border-radius:4px;font-weight:600;box-shadow:0 2px 4px #0003}.photo-actions{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(to top,rgba(0,0,0,.8),transparent);display:flex;justify-content:space-around;padding:20px 8px 8px}.photo-action-btn{background:#fff3;border:none;color:#fff;padding:6px;border-radius:50%;cursor:pointer;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:all .2s}.photo-action-btn:hover{background:var(--primary);transform:scale(1.1)}.form-textarea{width:100%;padding:14px 16px;background:var(--surface-light);border:2px solid var(--border);border-radius:12px;color:var(--text);font-size:16px;font-family:inherit;resize:vertical;min-height:120px;transition:all .3s ease}.form-textarea:focus{outline:none;border-color:var(--primary);background:var(--background)}.form-select{width:100%;padding:14px 16px;background:var(--surface-light);border:2px solid var(--border);border-radius:12px;color:var(--text);font-size:16px;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:16px}.form-select:focus{outline:none;border-color:var(--primary)}.btn-save{width:100%;padding:16px;background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;border:none;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;margin-top:16px;box-shadow:0 4px 20px #ff6b6b4d;transition:all .3s ease}.btn-save:hover{transform:translateY(-2px);box-shadow:0 6px 30px #ff6b6b80}.btn-logout{width:100%;padding:16px;background:var(--surface-light);color:var(--text-secondary);border:1px solid var(--border);border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;margin-top:32px;transition:all .3s ease}.btn-logout:hover{background:var(--surface);color:var(--primary);border-color:var(--primary)}.modal-overlay{position:fixed;inset:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;visibility:hidden;transition:all .3s ease}.modal-overlay.fade-in{opacity:1;visibility:visible}.modal-overlay.fade-out{opacity:0;visibility:hidden}.modal-content{background:var(--surface);width:90%;max-width:400px;border-radius:24px;padding:24px;transform:translateY(20px);transition:all .3s ease;box-shadow:0 20px 60px #00000080}.modal-overlay.fade-in .modal-content{transform:translateY(0)}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.modal-header h3{font-size:20px;font-weight:700}.close-btn{background:none;border:none;color:var(--text-secondary);font-size:24px;cursor:pointer;padding:4px;line-height:1}.close-btn:hover{color:var(--text)}.range-slider-container{position:relative;height:40px;margin-top:10px}.range-input{position:absolute;left:0;top:5px;width:100%;height:5px;-webkit-appearance:none;background:none;pointer-events:none}.range-input::-webkit-slider-thumb{-webkit-appearance:none;height:20px;width:20px;border-radius:50%;background:var(--primary);cursor:pointer;pointer-events:auto;position:relative;z-index:10;box-shadow:0 2px 6px #0000004d}.range-slider-container:before{content:"";position:absolute;left:0;right:0;top:7px;height:4px;background:var(--surface-light);border-radius:2px;z-index:0}.checkbox-scroll-area{max-height:150px;overflow-y:auto;background:var(--surface-light);border:1px solid var(--border);border-radius:12px;padding:12px}.checkbox-item{display:flex;align-items:center;gap:8px;padding:6px 0;cursor:pointer;font-size:14px}.checkbox-item:hover{color:var(--primary)}.checkbox-group{display:flex;gap:16px}.checkbox-scroll-area::-webkit-scrollbar{width:6px}.checkbox-scroll-area::-webkit-scrollbar-track{background:transparent}.checkbox-scroll-area::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}.fade-enter-active,.fade-leave-active{transition:opacity .3s ease}.fade-enter-from,.fade-leave-to{opacity:0}.nav-btn.router-link-active{color:var(--primary)!important}