.tr-profile-container {

    max-width: 700px;

    margin: 30px auto;

    padding: 20px;

    color: #1E293B;

}


/* =========================
   PROFILE HEADER
   ========================= */

.tr-profile-header {

    display: flex;

    gap: 20px;

    align-items: center;

    background: #FFFFFF;

    padding: 25px;

    border-radius: 15px;

    border: 1px solid #E2EAF2;

    box-shadow: 0 8px 25px rgba(30, 64, 100, 0.08);

}


/* =========================
   AVATAR
   ========================= */

.tr-avatar-placeholder,
.tr-avatar img {

    width: 120px;

    height: 120px;

    border-radius: 50%;

    object-fit: cover;

}


.tr-avatar-placeholder {

    background: #EAF3FF;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #64748B;

    border: 3px solid #D7E8FA;

}


/* =========================
   PROFILE CARD
   ========================= */

.tr-profile-card {

    margin-top: 20px;

    background: #FFFFFF;

    padding: 20px;

    border-radius: 15px;

    border: 1px solid #E2EAF2;

    box-shadow: 0 8px 25px rgba(30, 64, 100, 0.07);

}


/* =========================
   PROFILE ROW
   ========================= */

.tr-profile-row {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 14px 0;

    border-bottom: 1px solid #E2EAF2;

}


/* Remove border from last row */

.tr-profile-row:last-child {

    border-bottom: none;

}


/* =========================
   ALIAS
   ========================= */

.tr-alias {

    color: #64748B;

}


/* =========================
   PROFILE LABELS
   ========================= */

.tr-profile-row strong {

    color: #334155;

    font-weight: 600;

}


/* =========================
   PROFILE VALUES
   ========================= */

.tr-profile-row span {

    color: #1E293B;

}


/* =========================
   MOBILE
   ========================= */

@media(max-width:600px) {

    .tr-profile-container {

        margin: 20px auto;

        padding: 15px;

    }


    .tr-profile-header {

        flex-direction: column;

        text-align: center;

        padding: 22px 18px;

    }


    .tr-avatar-placeholder,
    .tr-avatar img {

        width: 110px;

        height: 110px;

    }


    .tr-profile-card {

        padding: 18px;

    }


    .tr-profile-row {

        flex-direction: column;

        align-items: flex-start;

        gap: 5px;

        padding: 12px 0;

    }

}