* { box-sizing: border-box; outline: none; -webkit-tap-highlight-color: transparent; }
body, html { margin: 0; padding: 0; height: 100%; font-family: 'Nunito', sans-serif; background-color: #FFB6C1; color: #5D2E36; overflow: hidden; }


#loading-screen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #FCE6EE; z-index: 9999; display: flex; justify-content: center; align-items: center; transition: opacity 0.5s ease-out; }
.splash-content { text-align: center; }
.splash-logo { width: 220px; height: 220px; margin-bottom: 10px; animation: float 3s infinite ease-in-out; }
.splash-title { font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 18px; color: #D66D85; margin: 0; letter-spacing: 1px; opacity: 0.8; }


.login-header-fixed, .profile-header-fixed { position: fixed; top: 0; left: 0; width: 100%; height: 90px; background: #FCE6EE; display: flex; justify-content: center; align-items: center; z-index: 100; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
.header-logo-img { height: 60px; }
.profile-header-fixed h2 { margin: 0; color: #D66D85; }


.split-nav { position: fixed; bottom: 40px; left: 0; width: 100%; display: flex; justify-content: center; gap: 60px; z-index: 2000; pointer-events: none; }
.nav-btn { pointer-events: auto; width: 65px; height: 65px; border-radius: 22px; background: rgba(255, 255, 255, 0.25); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.3); box-shadow: 0 8px 20px rgba(0,0,0,0.15); display: flex; justify-content: center; align-items: center; color: white; transition: 0.3s; cursor: pointer; }
.nav-btn svg { width: 32px; height: 32px; opacity: 0.8; }
.nav-btn.active { background: rgba(255, 255, 255, 0.85); color: #FF69B4; transform: translateY(-5px); box-shadow: 0 10px 25px rgba(255, 105, 180, 0.3); }
.nav-btn.active svg { opacity: 1; }


.glass-card { background: rgba(255, 255, 255, 0.65); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border: 1px solid rgba(255, 255, 255, 0.8); box-shadow: 0 10px 30px rgba(255, 105, 180, 0.2); border-radius: 30px; padding: 30px; width: 100%; max-width: 380px; text-align: center; }
.info-card { text-align: left; background: rgba(255, 255, 255, 0.5); }
.info-card h3 { color: #D66D85; margin-top: 0; }
.features-list { padding-left: 20px; line-height: 1.8; color: #555; list-style-type: none; }
.features-list li { margin-bottom: 10px; display: flex; align-items: flex-start; gap: 12px; }
.scroll-screen { overflow-y: auto; height: 100%; width: 100%; position: absolute; top: 0; left: 0; padding-bottom: 20px; background: transparent; z-index: 10; }
.content-wrapper { padding: 0 20px; display: flex; flex-direction: column; gap: 20px; align-items: center; }
.reveal { opacity: 0; transform: translateY(50px); transition: all 0.8s ease; }
.reveal.active { opacity: 1; transform: translateY(0); }
.screen { width: 100%; height: 100%; position: absolute; top: 0; left: 0; transition: opacity 0.4s ease; }
.flex-center { display: flex; justify-content: center; align-items: center; padding: 20px; }
.hidden { display: none !important; opacity: 0; pointer-events: none; }


form { display: flex; flex-direction: column; gap: 15px; }
input, textarea { width: 100%; padding: 15px; background: #FFF; border: none; border-radius: 12px; font-size: 16px; font-family: inherit; box-shadow: inset 0 2px 5px rgba(0,0,0,0.03); color: #5D2E36; }
input:focus { outline: 2px solid #FF69B4; }
.input-with-icon, .password-group { position: relative; width: 100%; }
.input-with-icon input, .password-group input { padding-right: 45px; }
.eye-icon, .check-icon { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); cursor: pointer; opacity: 0.6; display: flex; align-items: center; justify-content: center; }
.eye-icon svg, .check-icon svg { width: 20px; height: 20px; stroke: #333; }
.check-icon svg { stroke: #FF69B4; }
.forgot-pass-link { text-align: right; font-size: 12px; color: #D66D85; cursor: pointer; margin-top: -10px; margin-bottom: 5px; }
.forgot-pass-link:hover { text-decoration: underline; }
.policy-link, .policy-link-bottom { font-size: 11px; color: #999; text-decoration: underline; cursor: pointer; margin-top: 15px; width: 100%; text-align: center; opacity: 0.7; }
.policy-link-bottom:hover { opacity: 1; }


.pink-btn { padding: 15px; width: 100%; background: linear-gradient(90deg, #FF9A9E 0%, #FECFEF 100%); color: #fff; border: none; border-radius: 12px; font-size: 18px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 15px rgba(255, 105, 180, 0.3); }
.small-btn { padding: 10px; font-size: 14px; margin-top: 10px; }
.text-btn { background: none; border: none; color: #666; margin-top: 15px; cursor: pointer; }
.bottom-link { font-size: 14px; margin-top: 15px; color: #666; }
.bottom-link span { color: #D66D85; font-weight: bold; text-decoration: underline; cursor: pointer; }
.subtle-btn { margin-top: 10px; background: transparent; border: none; color: #AAA; font-size: 12px; cursor: pointer; transition: 0.2s; text-decoration: underline; }
.subtle-btn:hover { color: #555; }


.profile-card-large { text-align: left; display: flex; flex-direction: column; align-items: center; }
.partner-card-bg { background: rgba(255, 230, 240, 0.6); border-color: #FFC0CB; }
.avatar-large { width: 100px; height: 100px; border-radius: 50%; background: #EEE; border: 4px solid white; box-shadow: 0 5px 15px rgba(0,0,0,0.1); position: relative; overflow: hidden; margin-bottom: 15px; }
.avatar-large img { width: 100%; height: 100%; object-fit: cover; }
.edit-icon { position: absolute; bottom: 0; width: 100%; background: rgba(0,0,0,0.5); display: flex; justify-content: center; padding: 2px; }
.stats-row { display: flex; gap: 20px; margin: 10px 0; }
.stat-item { text-align: center; }
.stat-num { display: block; font-weight: 800; font-size: 20px; color: #D66D85; }
.stat-label { font-size: 12px; color: #888; }
.helper-text { font-size: 12px; color: #aaa; margin: 5px 0 0; }
.danger-btn { color: #ff6b6b; margin-top: 20px; border: none; background: none; cursor: pointer; }
.profile-actions { margin-top: 25px; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid rgba(0,0,0,0.05); padding-top: 15px; width: 100%; }
.danger-text { color: #ff4757 !important; font-size: 13px; opacity: 0.7; }
.warning-btn { margin-top: 10px; background: transparent; border: 1px solid #FF9800; color: #FF9800; padding: 5px 10px; border-radius: 8px; font-size: 12px; cursor: pointer; transition: 0.2s; }


#map { width: 100%; height: 100%; z-index: 1; background-color: #050505; position: fixed; top: 0; left: 0; }


.cluster-marker { background-color: rgba(255, 105, 180, 0.9); color: white; width: 40px; height: 40px; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-weight: bold; font-family: 'Nunito', sans-serif; border: 3px solid rgba(255, 255, 255, 0.5); box-shadow: 0 4px 10px rgba(255, 105, 180, 0.4); cursor: pointer; transition: transform 0.2s; }
.cluster-marker:active { transform: scale(0.9); }


.modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); z-index: 3000; display: flex; justify-content: center; align-items: center; }
.modal-card { position: relative; margin: 20px; width: 90%; max-width: 350px; }
.close-modal { position: absolute; right: 20px; top: 15px; font-size: 30px; color: #D66D85; cursor: pointer; z-index: 5; }
.compact-modal { padding: 25px; }
.invite-section { display: flex; flex-direction: column; gap: 10px; margin-top: 15px; }
.invite-item { background: white; padding: 10px; margin-top: 10px; border-radius: 10px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.photo-btn { display: flex; gap: 10px; align-items: center; justify-content: center; width: 100%; padding: 10px; border: 2px dashed #FF69B4; border-radius: 10px; text-align: center; color: #D66D85; cursor: pointer; font-weight: bold; }
input[type="file"] { display: none; }
#file-count { font-size: 12px; color: #888; margin-top: 5px; text-align: center; }
.blobs { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; }
.blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.7; animation: move 10s infinite alternate; }
.blob-1 { top: -10%; left: -10%; width: 50vw; height: 50vw; background: #FFC0CB; }
.blob-2 { bottom: -10%; right: -10%; width: 60vw; height: 60vw; background: #FF69B4; animation-delay: -2s; }
.blob-3 { top: 40%; left: 30%; width: 40vw; height: 40vw; background: #FFF0F5; animation-delay: -5s; }
@keyframes move { from { transform: translate(0, 0); } to { transform: translate(20px, -20px); } }


.maplibregl-popup-content { padding: 0; border-radius: 15px; overflow: hidden; box-shadow: 0 10px 25px rgba(0,0,0,0.3) !important; font-family: 'Nunito', sans-serif; background: #FFF; width: 260px; }
.maplibregl-popup-close-button { color: white; font-size: 24px; right: 5px; top: 5px; z-index: 10; text-shadow: 0 1px 3px rgba(0,0,0,0.5); }
.mapbox-popup .popup-gallery { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; width: 100%; height: 180px; scrollbar-width: none; }
.mapbox-popup .popup-gallery::-webkit-scrollbar { display: none; }
.mapbox-popup .popup-img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: center; }
.mapbox-popup .popup-text { padding: 15px; }
.mapbox-popup .popup-title { font-weight: 800; color: #D66D85; font-size: 18px; margin-bottom: 5px; }
.mapbox-popup .popup-desc { color: #555; font-size: 14px; line-height: 1.4; margin-bottom: 8px; }
.mapbox-popup .popup-author { color: #aaa; font-size: 11px; text-transform: uppercase; font-weight: bold; }