.profile-page{

    max-width:1100px;

    margin:auto;

}



/* Header */

.profile-header{

    background:
    linear-gradient(135deg,#2563eb,#4f46e5);

    padding:35px;

    border-radius:25px;

    display:flex;

    align-items:center;

    gap:25px;

    color:white;

    margin-bottom:25px;

}



.profile-avatar{

    width:90px;

    height:90px;

    border-radius:50%;

    background:white;

    color:#2563eb;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:45px;

}



.profile-head-info h2{

    margin:0;

}



.profile-role{

    display:inline-block;

    margin-top:10px;

    padding:6px 18px;

    border-radius:20px;

    background:rgba(255,255,255,.2);

}





/* Info */

.profile-card{

    background:white;

    border-radius:22px;

    padding:30px;

    box-shadow:
    0 10px 30px rgba(0,0,0,.08);

    margin-bottom:25px;

}



.profile-card-title{
    

    font-size:22px;

    font-weight:800;

    margin-bottom:25px;

}



.profile-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(250px,1fr));

    gap:20px;

}



.profile-item{

    background:#f8fafc;

    padding:18px;

    border-radius:15px;

}



.profile-item label{

    display:block;

    color:#64748b;

    font-size:14px;

    margin-bottom:5px;

}



/* Summary */


.profile-summary{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(250px,1fr));

    gap:20px;

}



.summary-card{

    padding:25px;

    border-radius:22px;

    color:white;

}



.summary-card h2{

    margin-top:15px;

}



.summary-card.blue{

    background:#2563eb;

}


.summary-card.green{

    background:#16a34a;

}


.summary-card.dark{

    background:#334155;

}





/* Button */

.profile-actions{

    margin-top:25px;

    display:flex;

    gap:15px;

}



.profile-btn{

    padding:14px 25px;

    border-radius:15px;

    text-decoration:none;

    font-weight:700;

}



.profile-btn.primary{

    background:#2563eb;

    color:white;

}



.profile-btn.warning{

    background:#f59e0b;

    color:white;

}





/* Dark */

body.dark-mode .profile-card{

    background:#1e293b;

    color:white;

}



body.dark-mode .profile-item{

    background:#334155;

}



body.dark-mode .profile-item label{

    color:#cbd5e1;

}

.summary-card {

    text-decoration:none;

    color:inherit;

}


.summary-card:hover {

    color:inherit;

    transform:translateY(-3px);

}

.summary-card h2 {

    color:white !important;

}



.member-card {

    background:
    linear-gradient(
        135deg,
        #1f2937,
        #111827
    );

    color:white;

    border-radius:24px;

    padding:28px;

    box-shadow:
    0 10px 30px rgba(0,0,0,.15);

}



.member-header {

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:25px;

}



.member-header small {

    opacity:.7;

}



.member-header h2 {

    margin-top:8px;

}



.level-pill {

    padding:10px 22px;

    border-radius:50px;

    background:#f59e0b;

    font-weight:bold;

}



.member-stats {

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:15px;

}



.member-stat {

    background:
    rgba(255,255,255,.1);

    padding:18px;

    border-radius:18px;

}



.member-stat span {

    display:block;

    opacity:.7;

}



.member-stat strong {

    display:block;

    font-size:28px;

    margin-top:8px;

}



.member-progress {

    margin-top:25px;

}



.progress-title {

    display:flex;

    justify-content:space-between;

}



.progress-bar {

    height:12px;

    background:
    rgba(255,255,255,.2);

    border-radius:20px;

    overflow:hidden;

    margin-top:10px;

}



.progress-bar div {

    height:100%;

    background:#22c55e;

}

.progress-fill {
    width: var(--progress-width);
    height: 100%;
}