body {
        margin: 0 !important;
        height: 100vh !important;
        background:  !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        font-family: 'Segoe UI', sans-serif !important;
    }

    .login-card {
        width: 420px !important;
        background: #1e293b !important;
        padding: 40px !important;
        border-radius: 18px !important;
        box-shadow: 0 15px 40px rgba(0,0,0,0.6) !important;
        border: 1px solid rgba(255,255,255,0.05) !important;
    }

    .login-title {
        color: #f8fafc !important;
        font-weight: 600 !important;
        margin-bottom: 30px !important;
    }

    .form-label {
        color: #cbd5e1 !important;
        font-size: 14px !important;
    }

    .form-control {
        background: #0f172a !important;
        border: 1px solid #334155 !important;
        color: #f1f5f9 !important;
        border-radius: 10px !important;
        padding: 10px 14px !important;
        transition: 0.3s !important;
    }

    .form-control:focus {
        background: #0f172a !important;
        color: #fff !important;
        border-color: #3b82f6 !important;
        box-shadow: 0 0 0 0.15rem rgba(59,130,246,0.4) !important;
    }

    .btn-primary {
        background: #3b82f6 !important;
        border: none !important;
        border-radius: 10px !important;
        padding: 10px !important;
        font-weight: 500 !important;
        transition: 0.3s !important;
    }

    .btn-primary:hover {
        background: #2563eb !important;
        transform: translateY(-2px) !important;
    }

    .alert {
        border-radius: 10px !important;
    }

    .footer-text {
        color: #64748b !important;
        font-size: 13px !important;
        margin-top: 20px !important;
        text-align: center !important;
    }

    @media (max-width: 480px) {
        .login-card {
            width: 90% !important;
            padding: 30px !important;
        }
    }