.auth-page{
    min-height:100vh;
    background:
        linear-gradient(rgba(7,17,31,.88), rgba(7,17,31,.95)),
        url("../images/hero-banner.webp");
    background-size:cover;
    background-position:center;
}

.auth-wrapper{
    min-height:calc(100vh - 90px);
    display:flex;
    justify-content:center;
    align-items:center;
    padding:140px 20px 60px;
}

.auth-box{
    width:100%;
    max-width:460px;
    background:rgba(13,27,47,.92);
    border:1px solid rgba(132,204,22,.25);
    border-radius:24px;
    padding:42px;
    box-shadow:0 0 40px rgba(0,0,0,.35);
    backdrop-filter:blur(14px);
}

.auth-header{
    text-align:center;
    margin-bottom:32px;
}

.auth-header h1{
    font-size:42px;
    color:#fff;
    margin-bottom:10px;
}

.auth-header p{
    color:#b9c3d3;
}

.auth-form{
    display:flex;
    flex-direction:column;
    gap:22px;
}

.form-group{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.form-group label{
    font-weight:600;
    color:#fff;
}

.form-group input{
    width:100%;
    padding:15px 16px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.12);
    background:#07111f;
    color:#fff;
    font-size:16px;
    outline:none;
    transition:.3s;
}

.form-group input:focus{
    border-color:#84CC16;
    box-shadow:0 0 0 3px rgba(132,204,22,.12);
}

.form-group input::placeholder{
    color:#6f7b8f;
}

.auth-options{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px;
    font-size:14px;
}

.auth-options a{
    color:#84CC16;
}

.remember{
    display:flex;
    align-items:center;
    gap:8px;
    color:#b9c3d3;
}

.auth-submit{
    border:none;
    padding:16px;
    border-radius:12px;
    background:#84CC16;
    color:#07111f;
    font-size:17px;
    font-weight:800;
    cursor:pointer;
    transition:.3s;
}

.auth-submit:hover{
    background:#9ee31f;
    transform:translateY(-2px);
}

.auth-footer{
    margin-top:28px;
    text-align:center;
    color:#b9c3d3;
}

.auth-footer a{
    color:#84CC16;
    font-weight:700;
}

@media(max-width:600px){
    .auth-box{
        padding:30px 24px;
    }

    .auth-header h1{
        font-size:34px;
    }

    .auth-options{
        flex-direction:column;
        align-items:flex-start;
    }
}
.terms{
    display:flex;
    gap:10px;
    align-items:flex-start;
    color:#b9c3d3;
    font-size:14px;
    line-height:1.5;
}

.terms input{
    margin-top:4px;
}