body{
    margin:0;
    min-height:100vh;

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

    padding:20px;

background:

radial-gradient(circle at top left,#198754 0,#20c997 100%);

overflow-x:hidden;


    font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
}
body::before{

content:"";

position:fixed;

width:420px;

height:420px;

border-radius:50%;

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

top:-120px;

left:-120px;

}
body::after{

content:"";

position:fixed;

width:350px;

height:350px;

border-radius:50%;

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

right:-80px;

bottom:-80px;

}
.login-card{

max-width:920px;

margin:auto;

border:none;

border-radius:24px;

overflow:hidden;

box-shadow:0 25px 60px rgba(0,0,0,.18);

}
.login-brand{

background:linear-gradient(
180deg,
#198754,
#157347
);

color:white;

display:flex;

align-items:center;

justify-content:center;

padding:50px 40px;

}
.brand-logo{

width:110px;

margin-bottom:20px;

}
.login-brand h2{

font-size:34px;

font-weight:700;

margin-bottom:10px;

}
.brand-divider{

width:70px;

height:4px;

background:white;

margin:25px auto;

border-radius:30px;

opacity:.8;

}
.brand-feature{

margin-top:14px;

font-size:17px;

opacity:.95;

}

.brand-feature i{

margin-right:8px;

}
.login-body{

padding:45px;

}
.login-header{
    padding:24px 24px 10px;
}

.logo{
    width:72px;
}

.login-title{
    font-size:28px;
}

.login-subtitle{

    font-size:15px;
    line-height:1.4;
    color:#6c757d;

}
.login-info{

    font-size:14px;

    padding:12px;

    margin-top:18px;

}
.card-body{
    padding:22px 26px;
}

.form-control{

height:54px;

border-radius:14px;

font-size:17px;

}
.form-control:focus{

border-color:#198754;

box-shadow:

0 0 0 .2rem

rgba(25,135,84,.18);

}
.input-group .btn{
    border-radius:0 12px 12px 0;
}

.btn-login{

height:54px;

border-radius:14px;

font-size:18px;

font-weight:600;

transition:.3s;

}

.btn-login:hover{

transform:translateY(-2px);

box-shadow:

0 10px 25px

rgba(25,135,84,.25);

}

.footer-login{

    margin-top:15px;
    font-size:12px;
    
}

@media(max-width:576px){

.login-card{

    margin:20px;

}

}

.login-card{
    animation:fadeUp .5s ease;
}

@keyframes fadeUp{

from{

opacity:0;
transform:translateY(25px);

}

to{

opacity:1;
transform:none;

}

}

@media(max-width:991px){

.login-brand{

display:none;

}

.login-body{

padding:35px;

}

}