/* CC-02b Wave 1 - extracted from FRONTEND/02_profiles/family-background.html */
.form-section {
            background: linear-gradient(135deg, rgba(65, 105, 225, 0.05), rgba(139, 92, 246, 0.05));
            backdrop-filter: blur(0.625rem);
            transition: all 0.3s ease;
        }
        
        .form-section:hover {
            background: linear-gradient(135deg, rgba(65, 105, 225, 0.08), rgba(139, 92, 246, 0.08));
        }
        
        .input-group {
            position: relative;
        }
        
        .input-group input:focus + label,
        .input-group input:not(:placeholder-shown) + label,
        .input-group select:focus + label,
        .input-group select:not([value=""]) + label,
        .input-group textarea:focus + label,
        .input-group textarea:not(:placeholder-shown) + label {
            transform: translateY(-1rem) scale(0.875);
            color: #D4AF37;
        }
        
        .input-group label {
            position: absolute;
            left: 0.75rem;
            top: 0.75rem;
            transition: all 0.3s ease;
            pointer-events: none;
            background: #1f2937;
            padding: 0 0.25rem;
            color: #9ca3af;
        }
        
        .family-member-card {
            background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), rgba(255, 105, 180, 0.1));
            border: 0.0625rem solid rgba(212, 175, 55, 0.2);
            transition: all 0.3s ease;
        }
        
        .family-member-card:hover {
            background: linear-gradient(135deg, rgba(212, 175, 55, 0.15), rgba(255, 105, 180, 0.15));
            border-color: rgba(212, 175, 55, 0.3);
        }
        
        .step-navigation {
            position: sticky;
            top: 0;
            z-index: 40;
            backdrop-filter: blur(0.625rem);
        }
        
        @keyframes fadeInLeft {
            from { opacity: 0; transform: translateX(-2rem); }
            to { opacity: 1; transform: translateX(0); }
        }
        
        @keyframes fadeInRight {
            from { opacity: 0; transform: translateX(2rem); }
            to { opacity: 1; transform: translateX(0); }
        }
        
        .slide-in-up {
            animation: slideInUp 0.6s ease-out;
        }
        
        .fade-in-left {
            animation: fadeInLeft 0.5s ease-out;
        }
        
        .fade-in-right {
            animation: fadeInRight 0.5s ease-out;
        }
        
        .required-field::after {
            content: '*';
            color: #ef4444;
            margin-left: 0.25rem;
        }
        
        .family-tree-node {
            position: relative;
        }
        
        .family-tree-connector::before {
            content: '';
            position: absolute;
            left: 50%;
            top: -1.0rem;
            width: 0.125rem;
            height: 1rem;
            background: linear-gradient(to bottom, #D4AF37, transparent);
        }