*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Inter', sans-serif;
}

body{
    background: radial-gradient(circle at top left, #0e2433, #050d14 70%);
    color:#fff;
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
}

.main-wrapper{
    width:100%;
    max-width:1100px;
    display:flex;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 40px 80px rgba(0,0,0,0.6);
    animation:fadeIn 1s ease forwards;
}

.left-side{
    flex:1;
    padding:60px;
    background:linear-gradient(160deg,#0f2a3a,#07141c);
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.left-side h1{
    font-size:3rem;
    font-weight:700;
    color:#f5c542;
    margin-bottom:20px;
}

.left-side p{
    font-size:1.1rem;
    color:#cfe1ee;
    margin-bottom:30px;
}

.feature{
    margin-bottom:15px;
    font-weight:400;
    color:#9cc3d9;
}

.feature i{
    color:#f5c542;
    margin-right:10px;
}

.right-side{
    flex:1;
    background:#07141c;
    padding:60px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.login-box{
    width:100%;
    max-width:350px;
}

.login-box h2{
    font-weight:600;
    margin-bottom:25px;
}

/* ===================== INPUTS ===================== */
.form-control{
    background:transparent;
    border:none;
    border-bottom:1px solid #1f3a4a;
    border-radius:0;
    color:#fff;
    padding:15px 12px; /* INCREASED padding */
    font-size:1rem;
}

.form-control:focus{
    box-shadow:none;
    border-color:#f5c542;
    background:transparent;
    color:#fff;
}

.btn-gold{
    background:#f5c542;
    border:none;
    padding:12px;
    width:100%;
    font-weight:600;
    margin-top:25px;
    border-radius:8px;
    transition:0.3s;
}

.btn-gold:hover{
    background:#e0b437;
}

.links{
    margin-top:20px;
    font-size:0.9rem;
}

.links a{
    color:#f5c542;
    text-decoration:none;
}

.links a:hover{
    text-decoration:underline;
}

.alert{
    font-size:0.85rem;
}

/* Password Toggle Styles */
.position-relative {
    position: relative;
}

.password-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #9cc3d9;
    cursor: pointer;
    padding: 5px;
    font-size: 0.9rem;
    transition: color 0.3s ease;
    z-index: 10;
}

.position-relative .form-control {
    padding-right: 40px;
}

.password-toggle:hover {
    color: #f5c542;
}

.password-toggle:focus {
    outline: none;
    box-shadow: none;
}

@keyframes fadeIn{
    from{opacity:0; transform:translateY(20px);}
    to{opacity:1; transform:translateY(0);}
}

@media(max-width:900px){
    .main-wrapper{
        flex-direction:column;
    }
    .left-side, .right-side{
        padding:40px 30px;
    }
    .left-side h1{
        font-size:2rem;
    }
}