.role_body{
    height:100vh;
    margin:0;
    font-family:'Segoe UI',sans-serif;

    background:
        linear-gradient(135deg, rgba(0,0,0,0.5), rgba(0,0,0,0.3));

    background-size:cover;
    background-position:center;

    display:flex;
    align-items:center;
    justify-content:center;
}

/* Glass Card */
.account-card{
    width:100%;
    max-width:420px;
    padding:30px 25px;
    border-radius:16px;

    background:rgba(255,255,255,0.15);
    backdrop-filter:blur(12px);

    box-shadow:0 8px 30px rgba(0,0,0,0.3);

    color:#fff;

    animation:fadeIn 0.5s ease;
}

@keyframes fadeIn{
    from{
        opacity:0;
        transform:translateY(20px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* Brand */
.brand-title{
    font-size:32px;
    font-weight:700;
    letter-spacing:1px;

    background:linear-gradient(45deg,#43e97b,#38f9d7);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

    text-shadow:0 0 10px rgba(79,172,254,0.6);
}

/* Subtitle */
.sub-text{
    color:#ddd;
    font-size:14px;
}

/* Account Box */
.account-box{
    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:15px;
    margin-bottom:15px;

    border-radius:14px;

    background:rgba(255,255,255,0.10);

    border:1px solid rgba(255,255,255,0.08);

    transition:all 0.3s ease;

    cursor:pointer;
}

.account-box:hover{
    transform:translateY(-3px);

    background:rgba(255,255,255,0.18);

    border-color:#38f9d7;

    box-shadow:0 6px 18px rgba(56,249,215,0.2);
}

/* Left */
.account-left{
    display:flex;
    align-items:center;
    gap:14px;
}

/* Avatar */
.avatar{
    width:52px;
    height:52px;

    border-radius:50%;

    background:linear-gradient(45deg,#43e97b,#38f9d7);

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:20px;
    font-weight:700;

    color:#000;
}

/* Text */
.account-info h5{
    margin:0;
    font-size:16px;
    font-weight:600;
}

.account-info p{
    margin:0;
    color:#ddd;
    font-size:13px;
}

/* Continue Button */
.btn-enter{
    background:linear-gradient(45deg,#43e97b,#38f9d7);

    border:none;

    border-radius:10px;

    padding:8px 14px;

    font-size:14px;
    font-weight:600;

    color:#000;

    transition:0.3s;
}

.btn-enter:hover{
    transform:scale(1.03);

    box-shadow:0 5px 15px rgba(56,249,215,0.35);

    color:#000;
}

/* Footer */
.bottom-link{
    text-align:center;
    margin-top:15px;
}

.bottom-link a{
    color:#ddd;
    text-decoration:none;
    font-size:14px;
}

.bottom-link a:hover{
    text-decoration:underline;
}

/* Mobile */
@media(max-width:576px){

    .account-card{
        margin:15px;
        padding:25px 20px;
    }

    .account-box{
        flex-direction:column;
        align-items:flex-start;
        gap:15px;
    }

    .btn-enter{
        width:100%;
    }
}