.login-page {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            padding: var(--spacing-lg);
        }

        .login-container {
            background-color: var(--color-white);
            border-radius: var(--border-radius-xl);
            box-shadow: var(--shadow-lg);
            padding: var(--spacing-3xl);
            width: 100%;
            max-width: 400px;
        }

        .login-header {
            margin-bottom: var(--spacing-2xl);
        }

        .logo {
            max-width: 200px;
            height: auto;
            margin-bottom: var(--spacing-lg);
        }

        .login-header h1 {
            color: var(--color-primary);
            margin-bottom: var(--spacing-sm);
        }

        .login-header p {
            color: var(--color-gray-dark);
            margin-bottom: 0;
        }

        .login-form {
            margin-bottom: var(--spacing-lg);
        }

        .forgot-password-link {
            font-size: var(--font-size-sm);
            color: var(--color-link);
            text-decoration: none;
            transition: all var(--transition-fast);
        }

        .forgot-password-link:hover {
            text-decoration: underline;
            color: var(--color-primary);
        }

        /* Responsividade para mobile */
        @media (max-width: 480px) {
            .login-page {
                padding: var(--spacing-md);
            }
            
            .login-container {
                padding: var(--spacing-xl);
            }
            
            .logo {
                max-width: 150px;
            }
        }

        /* Estados de loading */
        .btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }

        .loading {
            position: relative;
        }

        .loading::after {
            content: '';
            position: absolute;
            width: 16px;
            height: 16px;
            margin: auto;
            border: 2px solid transparent;
            border-top-color: var(--color-white);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }