*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:'Inter',sans-serif;
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    padding:20px;
    position:relative;
}

/* LOGIN CARD */

.login-wrapper{
    width:100%;
    max-width:460px;
    position:relative;
    z-index:10;
}

.login-card{
    border:1px solid rgba(255,255,255,0.6);
    padding:45px;
    transition:0.35s ease;
    border-radius:28px;
    background-color:#FAFAFA;
    box-shadow:
    0px 7.77px 16px 0px rgba(0,0,0,0.06),
    0px 3px 3px 0px rgba(0,0,0,0.10),
    0px -4px 0px 0px rgba(0,0,0,0.05) inset,
    0px 4px 0px 0px rgba(255,255,255,0.6) inset;
}

/* BRAND */

.brand{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    margin-bottom:35px;
}

.brand h2{
    font-size:30px;
    color:#111827;
    font-weight:700;
    margin-bottom:5px;
}
.brand p{
    color:#6b7280;
    font-size:15px;
    text-align:center;
    line-height:1.6;
    max-width:280px;
}

/* FORM */

.form-group{
    margin-bottom:22px;
}

.form-label{
    display:block;
    margin-bottom:10px;
    color:#374151;
    font-size:14px;
    font-weight:600;
}

.input-wrapper{
    position:relative;
}

.input-wrapper i{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    left:18px;
    color:#9ca3af;
    font-size:15px;
}

.form-control{
    width:100%;
    height:58px;
    border-radius:16px;
    border:1px solid #e5e7eb;
    background:#FAFAFA;
    padding:0 50px 0 48px;
    font-size:15px;
    outline:none;
    transition:all 0.3s ease;
    color:#111827;
}

.form-control:focus{
    border-color:#1e71bf;
    box-shadow:0 0 0 5px rgba(30,113,191,0.10);
}

/* PASSWORD TOGGLE */

.password-toggle{
    position:absolute;
    top:50%;
    right:50px;
    transform:translateY(-50%);
    cursor:pointer;
    color:#9ca3af;
    font-size:15px;
}

/* OPTIONS */

.form-options{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:28px;
    gap:15px;
    flex-wrap:wrap;
}

.remember{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:14px;
    color:#6b7280;
    white-space:nowrap;
}

.remember input{
    accent-color:#1e71bf;
}

.forgot-password{
    text-decoration:none;
    font-size:14px;
    color:#1e71bf;
    font-weight:600;
    white-space:nowrap;
}

/* BUTTON */

.login-btn{
    width:100%;
    height:58px;
    border:none;
    border-radius:16px;
    color:#fff;
    font-size:16px;
    font-weight:600;
    cursor:pointer;
    transition:all 0.3s ease;
    background: linear-gradient(180deg, #1e71bf 0%, #1c64a8 100%);

box-shadow:
0px 3.44px 5.57px 0px rgba(0, 0, 0, 0.08),
0px 22.91px 37.08px 0px rgba(30, 113, 191, 0.18),
0px 76px 123px 0px rgba(30, 113, 191, 0.06),
0px 5.05px 8.18px 0px rgba(30, 113, 191, 0.12),
0px 16.98px 27.47px 0px rgba(30, 113, 191, 0.08),
0px 56px 83px 0px rgba(30, 113, 191, 0.22),
0px 14px 34px 0px rgba(30, 113, 191, 0.20),
0px 1px 2px 0px rgba(30, 113, 191, 0.16),
0px -3px 0px 0px rgba(0, 0, 0, 0.06) inset,
0px 1px 0px 0px rgba(255, 255, 255, 0.55) inset;
}

.login-btn:hover{
    transform:translateY(-2px);
   background: linear-gradient(180deg, #185d9e 0%, #154f86 100%);
}

/* DIVIDER */

.divider{
    display:flex;
    align-items:center;
    gap:14px;
    margin:28px 0 0;
    color:#9ca3af;
    font-size:13px;
}

.divider::before,
.divider::after{
    content:'';
    flex:1;
    height:1px;
    background:#e5e7eb;
}

/* RESPONSIVE */

@media(max-width:768px){

    .login-card{
        padding:35px 25px;
        border-radius:24px;
    }

    .brand h2{
        font-size:26px;
    }

    /* SAME LINE ON MOBILE */
    .form-options{
        flex-direction:row;
        align-items:center;
        justify-content:space-between;
    }
}

/* MOBILE */

@media(max-width:480px){

    body{
        padding:15px;
    }

    .login-card{
        padding:28px 20px;
        border-radius:22px;
    }

    .brand h2{
        font-size:24px;
        text-align:center;
    }

    .form-control{
        height:54px;
        border-radius:14px;
        font-size:14px;
    }

    .login-btn{
        height:54px;
        border-radius:14px;
        font-size:15px;
    }
.brand p{
        font-size:13px;
        max-width:100%;
        margin-bottom: -5px;
        text-align:center;
    }
    .remember{
        font-size:13px;
    }

    .forgot-password{
        font-size:13px;
    }

    .divider{
        font-size:11px;
        text-align:center;
    }
}