/* ========== SETTINGS PAGE ========== */\n.settings-container {\n    max-width: 900px;\n    margin: 2rem auto;\n    padding: 0 2rem;\n}\n\n.settings-container h2 {\n    font-size: 2.5rem;\n    margin-bottom: 0.5rem;\n}\n\n.settings-intro {\n    color: #666;\n    margin-bottom: 2rem;\n    font-size: 1.1rem;\n}\n\n.settings-content {\n    display: flex;\n    flex-direction: column;\n    gap: 2rem;\n}\n\n.settings-section {\n    background: #fff;\n    padding: 2rem;\n    border-radius: 0.75rem;\n    box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n}\n\n.settings-section h3 {\n    margin-bottom: 1.5rem;\n    color: var(--dark);\n    font-size: 1.2rem;\n}\n\n.settings-section.danger {\n    border-left: 4px solid #e74c3c;\n}\n\n.setting-item {\n    margin-bottom: 1.5rem;\n}\n\n.setting-item label {\n    display: block;\n    font-weight: 600;\n    margin-bottom: 0.5rem;\n}\n\n.setting-input {\n    width: 100%;\n    padding: 0.75rem;\n    border: 1px solid #ccc;\n    border-radius: 0.5rem;\n    font-size: 1rem;\n    margin-bottom: 0.75rem;\n}\n\n.setting-description {\n    font-size: 0.9rem;\n    color: #666;\n    margin-bottom: 0.5rem;\n}\n\n.setting-item.checkbox {\n    display: flex;\n    align-items: center;\n    gap: 0.75rem;\n}\n\n.setting-item.checkbox input {\n    width: auto;\n    margin: 0;\n}\n\n.small-btn {\n    padding: 0.6rem 1.2rem;\n    font-size: 0.9rem;\n}\n\n.danger-btn {\n    background: #e74c3c;\n    color: #fff;\n}\n\n.danger-btn:hover {\n    background: #c0392b;\n}\n\n.save-btn {\n    background: var(--primary);\n    color: #fff;\n    padding: 1rem;\n    width: 100%;\n    border: none;\n    border-radius: 0.5rem;\n    font-weight: 600;\n    cursor: pointer;\n}\n\n/* ========== EDIT PROFILE PAGE ========== */\n.edit-profile-container {\n    max-width: 900px;\n    margin: 2rem auto;\n    padding: 0 2rem;\n}\n\n.edit-profile-form {\n    background: #fff;\n    padding: 2rem;\n    border-radius: 0.75rem;\n    box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n}\n\n.form-section {\n    margin-bottom: 2rem;\n    padding-bottom: 2rem;\n    border-bottom: 1px solid #eee;\n}\n\n.form-section h3 {\n    margin-bottom: 1.5rem;\n    color: var(--dark);\n}\n\n.photo-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n    gap: 1rem;\n    margin-bottom: 1rem;\n}\n\n.photo-upload {\n    position: relative;\n    aspect-ratio: 3/4;\n    border-radius: 0.75rem;\n    overflow: hidden;\n    box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n}\n\n.photo-upload img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n}\n\n.photo-upload.empty {\n    background: #f5f5f5;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    font-size: 2rem;\n    color: #999;\n}\n\n.form-row {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n    gap: 1rem;\n    margin-bottom: 1rem;\n}\n\n.form-group {\n    display: flex;\n    flex-direction: column;\n}\n\n.form-group label {\n    font-weight: 600;\n    margin-bottom: 0.5rem;\n}\n\n.form-group input,\n.form-group textarea,\n.form-group select {\n    padding: 0.75rem;\n    border: 1px solid #ccc;\n    border-radius: 0.5rem;\n    font-size: 1rem;\n    font-family: 'Poppins', sans-serif;\n}\n\n.form-group textarea {\n    resize: vertical;\n}\n\n.char-count {\n    font-size: 0.85rem;\n    color: #999;\n    margin-top: 0.25rem;\n}\n\n.interests-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n    gap: 0.75rem;\n}\n\n.interest-tag {\n    display: flex;\n    align-items: center;\n    padding: 0.75rem;\n    background: #f5f5f5;\n    border-radius: 0.5rem;\n    cursor: pointer;\n    transition: background 0.3s;\n}\n\n.interest-tag:hover {\n    background: #efefef;\n}\n\n.interest-tag input {\n    margin-right: 0.5rem;\n}\n\n.form-actions {\n    display: flex;\n    gap: 1rem;\n    justify-content: flex-end;\n    margin-top: 2rem;\n    padding-top: 2rem;\n    border-top: 1px solid #eee;\n}\n\n.cancel-btn {\n    background: #eee;\n    color: var(--dark);\n}\n\n/* ========== FAQ PAGE ========== */\n.faq-container {\n    max-width: 900px;\n    margin: 2rem auto;\n    padding: 0 2rem;\n}\n\n.faq-container h2 {\n    font-size: 2.5rem;\n    margin-bottom: 0.5rem;\n}\n\n.intro-text {\n    color: #666;\n    margin-bottom: 2rem;\n    font-size: 1.1rem;\n}\n\n.faq-content {\n    display: flex;\n    flex-direction: column;\n    gap: 2rem;\n}\n\n.faq-section {\n    background: #fff;\n    padding: 2rem;\n    border-radius: 0.75rem;\n    box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n}\n\n.faq-section h3 {\n    margin-bottom: 1.5rem;\n    color: var(--primary);\n    font-size: 1.2rem;\n}\n\n.faq-item {\n    margin-bottom: 1.5rem;\n    padding-bottom: 1.5rem;\n    border-bottom: 1px solid #eee;\n}\n\n.faq-item:last-child {\n    border-bottom: none;\n    margin-bottom: 0;\n    padding-bottom: 0;\n}\n\n.faq-question {\n    color: var(--dark);\n    font-weight: 600;\n    margin-bottom: 0.75rem;\n    cursor: pointer;\n    transition: color 0.3s;\n}\n\n.faq-question:hover {\n    color: var(--primary);\n}\n\n.faq-answer {\n    color: #555;\n    line-height: 1.7;\n}\n\n.faq-contact {\n    text-align: center;\n    padding: 2rem;\n    background: #f9f9f9;\n    border-radius: 0.75rem;\n    margin-top: 2rem;\n}\n\n.faq-contact a {\n    color: var(--primary);\n    text-decoration: none;\n    font-weight: 600;\n}\n\n.faq-contact a:hover {\n    text-decoration: underline;\n}\n\n/* ========== SAFETY PAGE ========== */\n.safety-container {\n    max-width: 900px;\n    margin: 2rem auto;\n    padding: 0 2rem;\n}\n\n.safety-container h2 {\n    font-size: 2.5rem;\n    margin-bottom: 0.5rem;\n}\n\n.safety-content {\n    display: flex;\n    flex-direction: column;\n    gap: 2rem;\n    margin: 2rem 0;\n}\n\n.safety-section {\n    background: #fff;\n    padding: 2rem;\n    border-radius: 0.75rem;\n    box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n}\n\n.safety-section h3 {\n    color: var(--primary);\n    margin-bottom: 1.5rem;\n    font-size: 1.2rem;\n}\n\n.safety-section ul {\n    list-style-position: inside;\n    color: #555;\n    line-height: 2;\n}\n\n.safety-contact {\n    text-align: center;\n    padding: 2rem;\n    background: #fff3cd;\n    border-radius: 0.75rem;\n    color: #856404;\n    border: 1px solid #ffeaa7;\n}\n\n.safety-contact a {\n    color: #e23e0f;\n    font-weight: 600;\n}\n\n/* ========== LEGAL PAGES (TERMS & PRIVACY) ========== */\n.legal-container {\n    max-width: 900px;\n    margin: 2rem auto;\n    padding: 0 2rem;\n}\n\n.legal-container h2 {\n    font-size: 2.5rem;\n    margin-bottom: 1rem;\n}\n\n.last-update {\n    color: #999;\n    font-size: 0.95rem;\n    margin-bottom: 2rem;\n}\n\n.legal-content {\n    background: #fff;\n    padding: 2rem;\n    border-radius: 0.75rem;\n    box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n    line-height: 1.8;\n}\n\n.legal-content h3 {\n    margin-top: 1.5rem;\n    margin-bottom: 1rem;\n    color: var(--dark);\n    font-size: 1.1rem;\n}\n\n.legal-content p {\n    margin-bottom: 1rem;\n    color: #555;\n}\n\n.legal-content ul {\n    margin-left: 2rem;\n    margin-bottom: 1rem;\n    color: #555;\n}\n\n.legal-content li {\n    margin-bottom: 0.5rem;\n}\n\n.legal-content a {\n    color: var(--primary);\n    text-decoration: none;\n}\n\n.legal-content a:hover {\n    text-decoration: underline;\n}\n\n@media (max-width: 768px) {\n    .settings-container,\n    .edit-profile-container,\n    .faq-container,\n    .safety-container,\n    .legal-container {\n        padding: 0 1rem;\n    }\n    \n    .form-row {\n        grid-template-columns: 1fr;\n    }\n    \n    .form-actions {\n        flex-direction: column;\n    }\n}\n