html, body {
    background: #181a1b !important;
    color: #e9ecef !important;
}
body, .login-container, .form-label, label, input, .form-control, .alert, .btn-primary {
    background-color: #181a1b !important;
    color: #e9ecef !important;
    border-color: #343a40 !important;
}
.btn-primary {
    background: #0076a3 !important;
    border-color: #036085 !important;
}
.btn-primary:hover, .btn-primary:focus {
    background: #005978 !important;
    border-color: #024257 !important;
}
.alert {
    background: #343a40 !important;
    color: #ffe4e1 !important;
    border-color: #495057 !important;
}
body.dark-mode {
    background: #181a1b !important;
    color: #e9ecef !important;
}
.login-container.dark-mode {
    background: #23272b !important;
    color: #e9ecef !important;
    box-shadow: 0 2px 12px rgba(20,20,20,0.3);
}
.dark-mode .form-label,
.dark-mode label {
    color: #e9ecef !important;
}
.dark-mode .form-control,
.dark-mode input,
.dark-mode input[type="text"],
.dark-mode input[type="password"] {
    background: #181a1b !important;
    color: #e9ecef !important;
    border-color: #343a40 !important;
}
.dark-mode .alert {
    background: #343a40 !important;
    color: #ffe4e1 !important;
    border-color: #495057 !important;
}
.dark-mode .btn-primary {
    background: #0076a3;
    border-color: #036085;
}
.dark-mode .btn-primary:hover,
.dark-mode .btn-primary:focus {
    background: #005978;
    border-color: #024257;
}
/* Toggle Button */
.dark-toggle {
    position: absolute;
    top: 20px;
    right: 30px;
    z-index: 10;
    background: transparent;
    border: none;
    color: #586073;
    font-size: 1.7rem;
}
.dark-mode .dark-toggle {
    color: #fff !important;
}
body {
    font-family: 'Roboto', Arial, sans-serif;
    background: #f7f9fa;
}
.login-container {
    max-width: 380px;
    margin: 70px auto;
    padding: 40px 30px 30px 30px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(35, 50, 70, 0.09);
}