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

        .recovery-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;
        }

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

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

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

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

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

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

        .back-to-login-link:hover {
            text-decoration: underline;
            color: var(--color-primary);
        }

        /* Mensagem de sucesso */
        .success-message {
            text-align: center;
            animation: fadeIn 0.5s ease-in;
        }

        .success-icon {
            width: 60px;
            height: 60px;
            background-color: var(--color-success);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: var(--font-size-2xl);
            font-weight: bold;
            margin: 0 auto var(--spacing-lg);
        }

        .success-message h2 {
            color: var(--color-primary);
            margin-bottom: var(--spacing-md);
        }

        .success-message p {
            color: var(--color-text);
            margin-bottom: var(--spacing-md);
        }

        .small-text {
            font-size: var(--font-size-sm);
            color: var(--color-gray-dark);
        }

        .small-text a {
            color: var(--color-link);
        }

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

        /* Animações */
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .fade-out {
            animation: fadeOut 0.3s ease-out forwards;
        }

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