:root {
            /* Light mode variables */
            --background: 0 0% 100%;
            --foreground: 222.2 47% 11%;
            --primary: 201 96% 32%;
            --primary-light: 201 96% 40%;
            --primary-foreground: 210 40% 98%;
            --muted: 210 40% 96.1%;
            --muted-foreground: 215.4 16.3% 46.9%;
            --border: 214.3 31.8% 91.4%;
            --radius: 0.75rem;

            /* Gradient for login-right (Light Mode) */
            --right-bg-light-from: 210 90% 45%;
            --right-bg-light-to: 210 90% 32%;
        }

        /* Dark mode variables - only applied when body has 'dark' class */
        [data-theme="dark"] {
            --background: 222 47% 11%;
            --foreground: 210 20% 98%;
            --primary: 200 80% 60%;
            --primary-light: 200 80% 65%;
            --primary-foreground: 210 20% 98%;
            --muted: 222 47% 16%;
            --muted-foreground: 215.4 16.3% 46.9%;
            --border: 222 47% 20%;

            /* Gradient for login-right (Dark Mode) */
            --right-bg-dark-from: 201 96% 45%;
            --right-bg-dark-to: 201 96% 35%;
        }

        /* --- VLibras Fix: Override potentially problematic VLibras inline styles --- */
        html, body {
            /* Reset positioning and overflow that VLibras might set globally */
            position: static !important; /* Forces normal flow, overriding absolute/fixed */
            margin: 0 !important;
            padding: 0 !important;
            width: 100% !important;
            min-height: 100vh !important;
            /* Ensure no unwanted transforms or offsets */
            top: auto !important;
            bottom: auto !important;
            left: auto !important;
            right: auto !important;
            transform: none !important;
            overflow-x: hidden !important; /* Prevent horizontal scroll from VLibras */
            overflow-y: auto !important; /* Allow vertical scrolling */
        }
        /* Make sure body is a flex container for your layout */
        body {
            display: flex !important; /* Override if VLibras sets block */
            flex-direction: column !important; /* Override if VLibras sets row */
            min-height: 100vh; /* Ensure it takes full viewport height */
        }

        /* General body styles */
        body {
            font-family: 'Open Sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            color: hsl(var(--foreground)) !important;
            line-height: 1.6;
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        /* Ensure all elements inherit border-color from --border */
        * {
            box-sizing: border-box;
            border-color: hsl(var(--border));
        }

        /* Container for content */
        .container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 1rem;
        }

        /* Header Styles */
        header {
            background-color: hsl(var(--background)) !important;
            color: hsl(var(--foreground)) !important;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            position: fixed; /* Keep header fixed at the top */
            width: 100%;
            top: 0;
            left: 0; /* Ensure it starts from the left edge */
            z-index: 100; /* High z-index to stay on top */
            transition: background-color 0.3s ease, color 0.3s ease;
            height: 70px; /* Define a consistent height for the header */
            display: flex; /* Use flexbox to center content */
            align-items: center; /* Vertically align items */
        }

        .header-container {

            display: flex;
            justify-content: space-between; /* Pushes left and right groups apart */
            align-items: center;
            padding: 0 2rem; /* Adjusted padding to be consistent */
            width: 100%; /* Take full width of the header */
            max-width: 1200px; /* Limit width like other containers */
            margin: 0 auto; /* Center the content within the fixed header */ /* Removida transição de background */
        }

        .logo {
            font-size: 1.5rem;
            font-weight: bold;
            background: linear-gradient(to right, hsl(201, 96%, 60%), hsl(201, 96%, 45%));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            transition: all 0.3s;
            z-index: 101;
        }

        .logo:hover {
            opacity: 0.8;
        }

        /* Navigation Links (now directly in header) */
        .nav-links {
            display: flex; /* Always display flex */
            align-items: center;
            gap: 1rem; /* Space between language selector and dark mode toggle */
            background-color: transparent; /* No background on nav-links itself */
            color: hsl(var(--foreground)) !important;
            transition: all 0.3s ease;
        }
                #languageSwitcher {
        background-color: transparent;
        border: 1px solid hsl(var(--primary));
        border-radius: var(--radius);
        padding: 0.5rem 1rem;
        font-size: 0.875rem; /* text-sm */
        color: hsl(var(--foreground)) !important;
        cursor: pointer;
        transition: all 0.3s;
        }

  .language-selector {
            background: transparent;
            color: inherit;
            border: 1px solid hsl(var(--primary));
            padding: 0.25rem 0.5rem;
            border-radius: var(--radius);
            margin-left: 1rem;
        }

        .language-selector option {
            background-color: hsl(var(--background));
            color: hsl(var(--foreground));
        }
        .language-selector:hover {
            background-color: hsl(var(--muted));
            color: hsl(var(--foreground));
        }


        

        /* Call to Action Buttons (now just dark mode toggle) */
        .cta-buttons {
            display: flex; /* Always display flex */
            gap: 1rem;
            margin: 0;
            padding: 0;
        }

        .btn {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.75rem 1.5rem;
            border-radius: 0.5rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s;
            border: 1px solid transparent;
            background: none;
        }

        button.btn.btn-primary, a.btn.btn-primary, input.btn.btn-primary {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            background-color: #0369A0;
            color: #fff;
            border: 1.5px solid #38bdf8;
            border-radius: 0.5rem;
            font-weight: 600;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            padding: 0.75rem 1.5rem;
            transition: background 0.3s, color 0.3s, border 0.3s, box-shadow 0.3s, transform 0.2s;
        }
        button.btn.btn-primary:hover, a.btn.btn-primary:hover, input.btn.btn-primary:hover {
            background-color: #025b8c;
            color: #fff;
            border-color: #0ea5e9;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.15);
        }

        .btn-outline {
            background-color: transparent;
            border-color: hsl(var(--primary));
            color: hsl(var(--primary));
        }

        .btn-outline:hover {
            background-color: hsl(var(--primary) / 0.1);
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        /* Spacer div to push content below fixed header */
        .header-spacer {
            height: 70px; /* Must match header height */
            width: 100%;
        }

        /* Main content area */
        .main-content-wrapper {
            flex-grow: 1; /* Allow content to grow and fill remaining space */
            display: flex; /* Keep it as flex for md:flex-row */
            flex-direction: column; /* Default for mobile */
            min-height: calc(100vh - 70px); /* Adjust to viewport height minus header height */
        }

        /* Register Left (Form) */
        .register-left {
            background-color: hsl(var(--background)) !important;
            color: hsl(var(--foreground)) !important;
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        .register-left h2, .register-left p, .register-left label { 
            color: hsl(var(--foreground)) !important; 
        }
        
        .register-left input[type="text"], 
        .register-left input[type="email"], 
        .register-left input[type="password"] {
            background-color: hsl(var(--background)) !important;
            color: hsl(var(--foreground)) !important;
            border: 1px solid hsl(var(--border)) !important;
            transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
        }

        .register-left input:focus {
            border-color: hsl(var(--primary)) !important;
            box-shadow: 0 0 0 2px hsl(var(--primary) / 0.3) !important;
            outline: none; /* Remove default outline */
        }

        .register-left p a { 
            color: hsl(var(--primary)) !important; 
            transition: color 0.3s ease; 
        }

        /* Login Right (Info Section) */
        .login-right {
            background-image: linear-gradient(to bottom, hsl(var(--right-bg-light-from)), hsl(var(--right-bg-light-to))) !important;
            color: white; /* Text always white on this side */
            transition: background-image 0.3s ease;
        }

        .login-right h2, .login-right h3, .login-right p, .login-right i { 
            color: white !important; 
        }

        /* Decorative Elements */
        .decorativo { 
            opacity: 0.1; 
            background-color: white; 
            border-radius: 9999px; 
        }

        /* Dark Mode Specific Styles */
        [data-theme="dark"] .login-right { 
            background-image: linear-gradient(to bottom, hsl(var(--right-bg-dark-from)), hsl(var(--right-bg-dark-to))) !important; 
        }
        
        [data-theme="dark"] .register-left {
            background-color: hsl(var(--background)) !important;
            color: hsl(var(--foreground)) !important;
        }
        
        [data-theme="dark"] .register-left h2, 
        [data-theme="dark"] .register-left p, 
        [data-theme="dark"] .register-left label { 
            color: hsl(var(--foreground)) !important; 
        }
        
        [data-theme="dark"] .register-left input[type="text"], 
        [data-theme="dark"] .register-left input[type="email"], 
        [data-theme="dark"] .register-left input[type="password"] {
            background-color: hsl(var(--muted)) !important;
            color: hsl(var(--foreground)) !important;
            border-color: hsl(var(--border)) !important;
        }
        
        [data-theme="dark"] .pricing-card, 
        [data-theme="dark"] .feature-card, 
        [data-theme="dark"] .testimonial-card, 
        [data-theme="dark"] form { 
            background-color: hsl(var(--background)) !important; 
            color: hsl(var(--foreground)) !important; 
        }
        
        [data-theme="dark"] .btn-outline { 
            color: hsl(var(--primary)) !important; 
            border-color: hsl(var(--primary)) !important; 
        }
        
        [data-theme="dark"] .btn-outline:hover { 
            background-color: hsl(var(--primary) / 0.1) !important; 
        }
        
        [data-theme="dark"] .hero p, 
        [data-theme="dark"] .section-header p, 
        [data-theme="dark"] .faq-answer, 
        [data-theme="dark"] .testimonial-card p, 
        [data-theme="dark"] .testimonial-role { 
            color: hsl(var(--muted-foreground)) !important; 
        }
        
        [data-theme="dark"] #feedback-type-select, 
        [data-theme="dark"] #feedback-type-select option, 
        [data-theme="dark"] textarea, 
        [data-theme="dark"] input[type="text"], 
        [data-theme="dark"] input[type="email"], 
        [data-theme="dark"] input[type="password"], 
        [data-theme="dark"] select {
         
            color: hsl(var(--foreground)) !important;
            border-color: hsl(var(--border)) !important;
        }
        
        [data-theme="dark"] .feedback label { 
            color: hsl(var(--foreground)) !important; 
        }
        
        [data-theme="dark"] .feedback h2 { 
            color: hsl(var(--primary)) !important; 
        }
        
        [data-theme="dark"] footer { 
            background-color: hsl(222 47% 8%) !important; 
        }

        /* Responsive Styles */
        @media (max-width: 1024px) { 
          #languageSwitcher { 
              max-width: 120px; 
              font-size: 0.75rem; 
              padding: 0.25rem 0.5rem; 
          } 
        }
        
        @media (max-width: 768px) {
            .header-container {
                padding: 0 1rem;
                transition: color 0.3s !important; /* Removida transição de background no responsivo */
            }
            .main-content-wrapper { 
                flex-direction: column; 
            }
            .login-right { 
                display: none; 
            }
            .register-left { 
                padding: 2rem; 
            }
            .btn { 
                padding: 0.5rem 0.75rem; 
            }
            #languageSwitcher { 
                padding: 0.5rem 0.75rem; 
            }
        }
        
        @media (min-width: 769px) {
            .main-content-wrapper { 
                flex-direction: row; 
            }
            .header-spacer { 
                height: 80px; 
            } /* Adjust if desktop header is taller */
            header { 
                height: 80px; 
            } /* Adjust desktop header height */
        }
        
        .user-name { 
            font-weight: 500; 
            color: hsl(var(--foreground)) !important; 
        }

        @media (max-width: 768px) {
            .main-content-wrapper {
                flex-direction: column-reverse;
            }
            .login-right {
                display: block; /* Garante que apareça no mobile */
            }
            .login-left {
                order: 1; /* Garante que apareça no mobile */
            }
            .register-left {
                order: 1; /* Garante que o register fique abaixo do login-right no mobile */
            }
        }

        /* Dark mode toggle button styles */
        #toggleDarkMode {
            background: hsl(var(--background));
            border: 2px solid #38bdf8;
            color: #0ea5e9;
            transition: background 0.3s, color 0.3s, border 0.3s, box-shadow 0.3s;
            z-index: 10001 !important;
            position: relative !important;
            box-shadow: 0 2px 8px rgba(56, 189, 248, 0.10);
        }
        
        #toggleDarkMode:hover {
            background: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 100%);
            color: #fff;
            border-color: #0369A0;
            box-shadow: 0 4px 16px rgba(56, 189, 248, 0.25), 0 1.5px 6px rgba(0,0,0,0.10);
        }
        
        #toggleDarkMode:hover .fa-moon {
            color: #fff;
        }
        
        #toggleDarkMode .fa-sun {
            color: #fff;
        }
        
        #toggleDarkMode .fa-moon {
            color: #0ea5e9;
        }

        /* Regras específicas para sobrescrever conflitos */
        body.login-page,
        body.cadastro-page {
            background-color: hsl(var(--background)) !important;
            color: hsl(var(--foreground)) !important;
        }

        /* Garantir que os formulários tenham as cores corretas */
        .register-left form {
            background-color: transparent !important;
        }

        .register-left form input,
        .register-left form label,
        .register-left form p {
           
            color: hsl(var(--foreground)) !important;
        }

        /* Sobrescrever qualquer estilo do Tailwind que possa interferir */
        .text-\[#111827\] {
            color: hsl(var(--foreground)) !important;
        }

        .border-gray-300 {
            border-color: hsl(var(--border)) !important;
        }

        .bg-white {
            background-color: hsl(var(--background)) !important;
        }

        /* Garantir que o gradiente do lado direito seja sempre aplicado */
        .login-right {
            background: linear-gradient(to bottom, hsl(var(--right-bg-light-from)), hsl(var(--right-bg-light-to))) !important;
        }

        [data-theme="dark"] .login-right {
            background: linear-gradient(to bottom, hsl(var(--right-bg-dark-from)), hsl(var(--right-bg-dark-to))) !important;
        }

        /* Language Switcher no modo escuro */
        [data-theme="dark"] #languageSwitcher {
            background-color: hsl(var(--muted)) !important;
            color: hsl(var(--foreground)) !important;
            border-color: hsl(var(--primary)) !important;
        }

        [data-theme="dark"] #languageSwitcher:hover {
            background-color: hsl(var(--primary) / 0.1) !important;
            border-color: hsl(var(--primary)) !important;
        }

        [data-theme="dark"] #languageSwitcher:focus {
            outline: none !important;
            border-color: hsl(var(--primary)) !important;
            box-shadow: 0 0 0 2px hsl(var(--primary) / 0.3) !important;
            background-color: hsl(var(--muted)) !important;
        }

        [data-theme="dark"] #languageSwitcher option {
            background-color: hsl(var(--muted)) !important;
            color: hsl(var(--foreground)) !important;
        }

        [data-theme="dark"] .feedback label { 
            color: hsl(var(--foreground)) !important; 
        }

        [data-theme="dark"] .btn-primary {
            background-color: hsl(var(--primary));
            color: hsl(var(--primary-foreground));
        }
        [data-theme="dark"] .btn-primary:hover {
            background-color: hsl(var(--primary-light));
            color: hsl(var(--primary-foreground));
        }