.auth-container{

    width:100%;
    max-width:450px;

    margin:80px auto;

    padding:40px;

    background:#fff;

    border-radius:10px;

    box-shadow:0 0 20px rgba(0,0,0,0.1);

}

.auth-container button:hover{

    background:#e9e536;
    color:#000;

}

.auth-container h2{

    text-align:center;

    margin-bottom:30px;

}

.auth-container input{

    width:100%;

    height:50px;

    padding:10px;

    margin-bottom:20px;

    border:1px solid #ddd;

    border-radius:5px;

}

.auth-container button{

    width:100%;

    height:50px;

    background:#000;

    color:#fff;

    border:none;

    border-radius:5px;

    cursor:pointer;

}

.auth-container p{

    margin-top:20px;

    text-align:center;

}

.auth-error{

    background:#ffebeb;

    color:red;

    padding:10px;

    margin-bottom:20px;

}

.auth-success{

    background:#ebffef;

    color:green;

    padding:10px;

    margin-bottom:20px;

}

/* OTP UI */

.otp-wrapper{
    text-align:center;
}

.otp-title{
    font-size:32px;
    margin-bottom:10px;
    color:#000;
}

.otp-subtitle{
    color:#777;
    margin-bottom:20px;
}

.otp-timer{
    font-size:22px;
    font-weight:bold;
    color:#e9e536;
    margin-bottom:30px;
}

.otp-inputs{
    display:flex;
    justify-content:center;
    gap:15px;
    margin-bottom:30px;
}

.otp-box{
    width:65px !important;
    height:65px !important;
    text-align:center;
    font-size:28px !important;
    font-weight:bold;
    border:2px solid #ddd !important;
    border-radius:12px !important;
    background:#fff !important;
    transition:0.3s;
}

.otp-box:focus{
    border-color:#e9e536 !important;
    box-shadow:0 0 10px rgba(233,229,54,0.4);
}

.otp-resend{
    margin-top:25px;
    font-size:15px;
}

.otp-resend a{
    color:#000;
    font-weight:bold;
}

.auth-container button:hover{
    background:#e9e536 !important;
    color:#000 !important;
}