.profile-page{
    max-width:1200px;
    margin:auto;
}

.profile-hero{
    display:flex;
    gap:2rem;
    align-items:center;
    padding:2rem;
    border-radius:16px;
    margin-bottom:2rem;
    background:linear-gradient(
        135deg,
        rgba(79,70,229,.15),
        rgba(6,182,212,.12)
    );
    border:1px solid rgba(255,255,255,.08);
}

.profile-avatar img{
    width:140px;
    height:140px;
    border-radius:50%;
    object-fit:cover;
    border:4px solid #4f46e5;
}

.profile-info h1{
    font-size:2rem;
    margin-bottom:.4rem;
}

.role{
    color:#60a5fa;
    margin-bottom:.8rem;
}

.profile-actions{
    display:flex;
    gap:1rem;
    margin-top:1rem;
}

.btn-primary{
    background: #3694cd;
    color:white;
    padding:.8rem 1.2rem;
    border-radius:10px;
    text-decoration:none;
}

.btn-secondary{
    background:#1f2937;
    color:white;
    padding:.8rem 1.2rem;
    border-radius:10px;
    text-decoration:none;
}

.stats-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:1rem;
    margin-bottom:2rem;
}

.stat-card{
    text-align:center;
    padding:1.5rem;
    border-radius:12px;
    background:#111827;
    border:1px solid rgba(255,255,255,.08);
}

.stat-card h3{
    font-size:2rem;
    color:#4f46e5;
}

.profile-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1.5rem;
    margin-bottom:2rem;
}

.profile-card{
    padding:1.5rem;
    border-radius:12px;
    background:#111827;
    border:1px solid rgba(255,255,255,.08);
}

.account-list li,
.activity-list li{
    padding:.6rem 0;
    border-bottom:1px solid rgba(255,255,255,.05);
}

@media(max-width:768px){

    .profile-hero{
        flex-direction:column;
        text-align:center;
    }

    .profile-grid{
        grid-template-columns:1fr;
    }

}