* { font-family: var(--app-font-family, 'Cairo', Tahoma, Arial, sans-serif); box-sizing: border-box; }
        body { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%); min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 15px; }
        .login-card { background: #fff; border-radius: 20px; box-shadow: 0 25px 80px rgba(0,0,0,0.4); width: 100%; max-width: 420px; overflow: hidden; }
        .login-header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 40px 30px; text-align: center; color: #fff; }
        .login-header i { font-size: 50px; margin-bottom: 10px; }
        .login-body { padding: 30px; }
        .form-control { border-radius: 10px; padding: 12px 15px; border: 2px solid #e9ecef; font-size: 16px; }
        .form-control:focus { border-color: #667eea; box-shadow: 0 0 0 0.2rem rgba(102,126,234,0.25); }
        .btn-login { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none; border-radius: 10px; padding: 12px; font-size: 16px; font-weight: 600; min-height: 48px; }
        .btn-login:hover { opacity: 0.9; transform: translateY(-1px); }
        .input-group-text { border-radius: 0 10px 10px 0; background: #f8f9fa; border: 2px solid #e9ecef; border-left: none; }
        .form-control.with-icon { border-radius: 10px 0 0 10px; border-right: none; }
        @media (max-width: 480px) {
            body { padding: 10px; align-items: flex-start; padding-top: 30px; }
            .login-card { border-radius: 15px; }
            .login-header { padding: 25px 20px; }
            .login-header i { font-size: 36px; }
            .login-header h3 { font-size: 1.2rem; }
            .login-header p { font-size: 13px; }
            .login-body { padding: 20px 15px; }
            .form-label { font-size: 13px; }
        }

.login-logo {
    max-height: 70px;
    max-width: 200px;
    margin-bottom: 10px;
}

.login-dev-credit,
.login-dev-credit strong {
    font-size: 16px;
    color: rgb(10 33 84);
}