*{
    box-sizing:border-box;
}


body{

    margin:0;

    min-height:100vh;

    background:#101010;

    color:#eeeeee;

    font-family:Arial, Helvetica, sans-serif;

}



.container{

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:30px;

}



.center-card{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

}



.card,
.panel{

    width:100%;

    max-width:520px;

    background:#181818;

    padding:35px;

    border-radius:16px;

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

}



.logo{

    text-align:center;

    font-size:38px;

    font-weight:700;

    letter-spacing:2px;

    margin-bottom:10px;

}



.logo span{

    color:#5865f2;

}

.logo-perfil{

    text-align:left;

    font-size:24px;

    font-weight:700;

    letter-spacing:2px;

    margin-bottom:8px;

}

.logo-perfil span{

    color:#5865f2;

}

.subtitle{

    text-align:center;

    color:#bbbbbb;

    font-size:17px;

    line-height:1.5;

    margin-bottom:30px;

}



.line{

    width:80px;

    height:3px;

    background:#5865f2;

    margin:25px auto;

    border-radius:10px;

}



/* FORMULARIOS */


.input-group{

    margin-bottom:20px;

}



label{

    display:block;

    margin-bottom:8px;

    color:#cccccc;

    font-size:14px;

}



input,
textarea{

    width:100%;

    background:#101010;

    color:#eeeeee;

    border:1px solid #333;

    border-radius:10px;

    padding:14px;

    font-size:15px;

    outline:none;

    transition:.2s;

}



input:focus,
textarea:focus{

    border-color:#5865f2;

}



textarea{

    min-height:300px;

    resize:vertical;

    line-height:1.5;

}



/* BOTONES */


button,
.button{

    display:inline-block;

    border:none;

    background:#5865f2;

    color:white;

    padding:13px 30px;

    border-radius:10px;

    font-size:15px;

    cursor:pointer;

    transition:.2s;

    text-decoration:none;

}



button:hover,
.button:hover{

    opacity:.85;

}



/* MENSAJES */


.error,
.success{

    padding:12px;

    border-radius:10px;

    margin-bottom:20px;

    text-align:center;

    font-size:14px;

}



.error{

    background:#331b1b;

    color:#ffb4b4;

}



.success{

    background:#172d22;

    color:#b8f5c7;

}



/* PERFIL VIBES */


.panel{

    max-width:900px;

}



.topbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    margin-bottom:25px;

}



.topbar h4{

    margin:0 0 8px 0;

    font-size:22px;

    font-weight:500;

}



.topbar strong{

    color:#5865f2;

}



.topbar-actions{

    display:flex;

    flex-wrap:wrap;

    justify-content:flex-end;

    gap:8px;

}



.mini-btn{

    padding:9px 15px;

    font-size:13px;

    background:#252525;

}



.mini-btn:hover{

    background:#333;

}



.save-btn{

    background:#5865f2;

}



.logout-btn{

    background:#333;

}



/* RESPONSIVE */


@media(max-width:600px){


    .container{

        padding:15px;

    }


    .card,
    .panel{

        padding:25px;

    }


    .topbar{

        flex-direction:column;

        align-items:flex-start;

    }


    .topbar-actions{

        justify-content:flex-start;

    }


}