/* Universal Typography & Alignment */
.prof-wrapper-seamless * { box-sizing: border-box; font-family: 'Segoe UI', sans-serif; }

/* 1. Hero Card: Sync with Dashboard (15px margins) */
.prof-hero-card-full-width {
    position: relative; height: 280px; background: #000;
    margin: 0 15px 55px 15px; border-radius: 0 0 24px 24px; 
    box-shadow: 0 12px 30px rgba(0,0,0,0.15); z-index: 10;
}
.prof-cover-wrapper-flat { width: 100%; height: 100%; position: relative; overflow: hidden; border-radius: 0 0 24px 24px; }
.prof-full-img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; }
.prof-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(to bottom, transparent 30%, rgba(0,0,0,0.9) 100%); }

/* 2. ICON ENFORCEMENT (Regression-Free Fix) */
/* Force icons to render even if inherited styles are messy */
.prof-wrapper-seamless i.fas {
    display: inline-block !important;
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    -webkit-font-smoothing: antialiased;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
}

.prof-sec-header-full i.fas { font-size: 20px !important; color: #ffffff !important; }
.prof-center-action-glass i.fas { font-size: 22px !important; color: #ffffff !important; }
.prof-logout-btn-polished i.fas { font-size: 18px !important; color: #ffffff !important; }

/* 3. Data Rows with Zebra Coloring & Gradient Shadow */
.prof-container-sync { padding: 0 15px 40px 15px; }
.prof-info-block { width: 100%; margin-bottom: 30px; }

.prof-sec-header-full {
    width: 100%; background: #0A66C2; color: #ffffff; padding: 18px 25px; 
    display: flex; justify-content: space-between; align-items: center;
    border-radius: 18px 18px 0 0; font-size: 1.1rem; font-weight: 800;
}

.prof-content-inset {
    width: 100%; background: #ffffff; border: 1px solid #e2e8f0; border-top: none; 
    border-radius: 0 0 18px 18px; overflow: hidden;
}

.prof-data-row { 
    display: flex; justify-content: space-between; align-items: center; 
    padding: 18px 25px; border-bottom: 1px solid #f1f5f9;
    position: relative;
    /* Gradient Box Shadow: Subtle depth for each row */
    box-shadow: inset 0 -10px 15px -10px rgba(0,0,0,0.03); 
}

/* Zebra Coloring */
.prof-data-row:nth-child(even) { background-color: #f8fafc; }
.prof-data-row:last-child { border-bottom: none; }

.prof-label { color: #666; font-size: 0.85rem; font-weight: 400; }
.prof-value { color: #0A66C2; font-weight: 700; font-size: 0.95rem; }

/* 4. Action Elements */
.prof-camera-anchor { position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 50%); z-index: 100; }
.prof-center-action-glass {
    width: 62px; height: 62px; background: rgba(255, 255, 255, 0.25); border: 2px solid rgba(255, 255, 255, 0.5); 
    border-radius: 50%; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(15px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.2);
}

.prof-logout-btn-polished {
    width: 100%; padding: 18px; background: #d63031; color: white; border: none; border-radius: 18px; 
    font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 12px;
    box-shadow: 0 10px 20px rgba(214, 48, 49, 0.3), inset 0 -4px 0 rgba(0,0,0,0.15);
}

/* ... [Previous CSS preserved] ... */

/* 1. Animation Definitions */
@keyframes profRowSlideUp {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 2. Enhanced Data Rows with Gradient Shadow & Animation Base */
.prof-data-row { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 18px 25px; 
    border-bottom: 1px solid #f1f5f9;
    position: relative;
    background-color: #ffffff;
    /* Gradient Box Shadow for depth */
    box-shadow: inset 0 -10px 15px -10px rgba(0,0,0,0.03); 
    /* Animation settings */
    opacity: 0; /* Starts hidden for animation */
    animation: profRowSlideUp 0.5s ease forwards;
}

/* Zebra Coloring */
.prof-data-row:nth-child(even) { background-color: #f8fafc; }
.prof-data-row:last-child { border-bottom: none; }

/* 3. ICON ENFORCEMENT (Regression-Free) */
.prof-wrapper-seamless i.fas {
    display: inline-block !important;
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    color: inherit;
}

.prof-sec-header-full i.fas { font-size: 20px !important; color: #ffffff !important; }
.prof-center-action-glass i.fas { font-size: 22px !important; color: #ffffff !important; }

@keyframes popIn {
    0% { transform: translate(-50%, 50%) scale(0); opacity: 0; }
    70% { transform: translate(-50%, 50%) scale(1.1); opacity: 1; }
    100% { transform: translate(-50%, 50%) scale(1); opacity: 1; }
}

.prof-camera-anchor { 
    position: absolute; 
    bottom: 0; 
    left: 50%; 
    transform: translate(-50%, 50%); 
    z-index: 100;
    animation: popIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    animation-delay: 0.2s;
}

/* Add to profile-fragment.css */
.prof-reset-btn {
    width: 100%;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    color: #64748b;
    border: 1px solid #cbd5e1;
    padding: 14px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.prof-reset-btn:hover {
    background: #fee2e2;
    color: #dc2626;
    border-color: #fca5a5;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.prof-reset-btn:active {
    transform: translateY(0);
}