tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    colors: {
                        'primary-light': '#f9fafb',
                        'card-light': '#ffffff',
                        'text-light': '#111827',
                        'subtext-light': '#6b7280',
                        'accent-light': '#3b82f6',
                        'primary-dark': '#1f2937',
                        'card-dark': '#374151',
                        'text-dark': '#f9fafb',
                        'subtext-dark': '#d1d5db',
                        'accent-dark': '#60a5fa',
                    }
                }
            }
        }

  const signInView = document.getElementById('sign-in-view');
        const createAccountView = document.getElementById('create-account-view');
        const forgotPasswordView = document.getElementById('forgot-password-view');
        const createAccountLink = document.getElementById('create-account-link');
        const forgotPasswordLink = document.getElementById('forgot-password-link');
        const backToSignInLinks = document.querySelectorAll('.back-to-signin-link');

        function showView(viewToShow) {
            signInView.classList.add('hidden');
            createAccountView.classList.add('hidden');
            forgotPasswordView.classList.add('hidden');
            viewToShow.classList.remove('hidden');
        }

        createAccountLink.addEventListener('click', (e) => {
            e.preventDefault();
            showView(createAccountView);
        });

        forgotPasswordLink.addEventListener('click', (e) => {
            e.preventDefault();
            showView(forgotPasswordView);
        });

        backToSignInLinks.forEach(link => {
            link.addEventListener('click', (e) => {
                e.preventDefault();
                showView(signInView);
            });
        });

        const themeToggleBtn = document.getElementById('theme-toggle');
        const themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
        const themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');

        const setTheme = (isDark) => {
            if (isDark) {
                document.documentElement.classList.add('dark');
                themeToggleLightIcon.classList.remove('hidden');
                themeToggleDarkIcon.classList.add('hidden');
                localStorage.setItem('color-theme', 'dark');
            } else {
                document.documentElement.classList.remove('dark');
                themeToggleLightIcon.classList.add('hidden');
                themeToggleDarkIcon.classList.remove('hidden');
                localStorage.setItem('color-theme', 'light');
            }
        };

        if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
            setTheme(true);
        } else {
            setTheme(false);
        }

        themeToggleBtn.addEventListener('click', () => {
            setTheme(!document.documentElement.classList.contains('dark'));
        });

        const securityTipBtn = document.getElementById('security-tip-btn');
        const securityTipContainer = document.getElementById('security-tip-container');

        securityTipBtn.addEventListener('click', async () => {
            securityTipContainer.innerHTML = '<div class="loader"></div><span class="italic">Generating tip...</span>';
            securityTipBtn.disabled = true;

            const prompt = "Provide a concise and useful security tip for a user logging into a web service. The tip should be easy to understand for a general audience and no more than 25 words.";
            const apiKey = "";
            const apiUrl = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-05-20:generateContent?key=${apiKey}`;
            const payload = { contents: [{ parts: [{ text: prompt }] }] };

            let response;
            let retries = 3;
            let delay = 1000;
            while (retries > 0) {
                try {
                    response = await fetch(apiUrl, {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify(payload)
                    });
                    if (response.ok) break;
                } catch (error) {}
                retries--;
                if (retries > 0) await new Promise(resolve => setTimeout(resolve, delay *= 2));
            }
            
            try {
                if (!response || !response.ok) throw new Error(`API request failed after retries.`);
                const result = await response.json();
                if (result.candidates && result.candidates.length > 0 && result.candidates[0].content && result.candidates[0].content.parts && result.candidates[0].content.parts.length > 0) {
                    securityTipContainer.textContent = result.candidates[0].content.parts[0].text.trim();
                } else {
                    securityTipContainer.textContent = 'Could not retrieve a tip. Please try again later.';
                }
            } catch (error) {
                console.error('Error fetching security tip:', error);
                securityTipContainer.textContent = 'Failed to load security tip. Check the console for details.';
            } finally {
                securityTipBtn.disabled = false;
            }
        });