body{

    margin:0;
    min-height:100vh;

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

    background:linear-gradient(135deg,#080808,#151515,#1d1d1d);

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

}

.login{

    width:100%;
    padding:20px;

}

.login-box{

    max-width:430px;

    margin:auto;

    background:#111;

    border-radius:20px;

    padding:45px;

    border:1px solid rgba(255,255,255,.05);

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

}

.logo{

    text-align:center;

    margin-bottom:20px;

}

.logo img{

    width:90px;

}

.login-box h1{

    color:#fff;

    text-align:center;

    margin-bottom:8px;

    font-size:28px;

}

.login-box p{

    text-align:center;

    color:#8c8c8c;

    margin-bottom:35px;

}

.form-group{

    margin-bottom:22px;

}

.form-group label{

    display:block;

    margin-bottom:8px;

    color:#ddd;

    font-size:14px;

}

.form-group input{

    width:100%;

    height:54px;

    padding:0 18px;

    background:#1b1b1b;

    border:1px solid #2b2b2b;

    border-radius:12px;

    color:#fff;

    transition:.3s;

    font-size:15px;

}

.form-group input:focus{

    outline:none;

    border-color:var(--primary);

    box-shadow:0 0 0 4px rgba(212,175,55,.15);

}

.btn{

    width:100%;

    height:54px;

    border-radius:12px;

    font-size:16px;

    font-weight:bold;

    cursor:pointer;

}

.login-footer{

    margin-top:28px;

    text-align:center;

    color:#999;

}

.login-footer a{

    color:var(--primary);

    font-weight:bold;

}

.login-footer a:hover{

    text-decoration:underline;

}

.alert-success{

    padding:15px;

    background:#13361d;

    border:1px solid #2e7d32;

    color:#b9f6ca;

    border-radius:10px;

    margin-bottom:20px;

}
.alert-error{

    padding:15px;

    background:#3b1414;

    border:1px solid #b71c1c;

    color:#ffcdd2;

    border-radius:10px;

    margin-bottom:20px;

}

.login-box{

    animation:fade .5s ease;

}

@keyframes fade{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.form-group input::placeholder{

    color:#666;

}