---
layout: page
title: "Login"
subtitle: "Login or register for your account"
active: playground
header-img: "img/bg/login-bg.jpg"
hideNewsLetter: true
hideSearch: true
compact_login_header: true
---

<style>
        /* Shorter hero on login page (layout adds .compact-login-header) */
        .intro-header.compact-login-header {
            min-height: 240px !important;
            margin-bottom: 28px !important;
            background-position: center 45% !important;
        }
        @media only screen and (min-width: 768px) {
            .intro-header.compact-login-header {
                min-height: 280px !important;
            }
        }
        .intro-header.compact-login-header .site-heading {
            padding: 72px 0 40px !important;
        }
        @media only screen and (min-width: 768px) {
            .intro-header.compact-login-header .site-heading {
                padding: 88px 0 48px !important;
            }
        }
        .user-auth-container {
            max-width: 450px;
            margin: 1.75rem auto 2.25rem;
            background: #18191c;
            color: #eee;
            border-radius: 12px;
            box-shadow: 0 4px 24px rgba(0,0,0,0.18);
            padding: 2rem;
            text-align: center;
        }
        .user-auth-container h2 {
            margin-top: 0;
            margin-bottom: 1.25rem;
            color: #a8d4af;
        }
        .user-auth-container .forgot-password {
            margin-top: 0.75rem;
            margin-bottom: 0;
        }
        .login-panel .error {
            margin-bottom: 1rem;
        }
        .auth-tabs {
            display: flex;
            margin-bottom: 2rem;
            border-radius: 6px;
            overflow: hidden;
            background: #18191c;
            border: 1.5px solid #444;
        }
        .auth-tab {
            flex: 1;
            padding: 0.7rem;
            background: #18191c;
            color: #aaa;
            border: none;
            cursor: pointer;
            transition: all 0.2s;
            font-size: 1rem;
        }
        .auth-tab.active {
            background: #5F7FFF;
            color: #fff;
        }
        .auth-tab:hover:not(.active) {
            background: #232428;
            color: #eee;
        }
        .auth-form {
            display: none;
        }
        .auth-form.active {
            display: block;
        }
        .form-group {
            margin-bottom: 1.2rem;
            text-align: left;
        }
        .form-group label {
            display: block;
            margin-bottom: 0.3rem;
            color: #ccc;
            font-size: 0.9rem;
        }
        .user-auth-container input[type="text"],
        .user-auth-container input[type="email"],
        .user-auth-container input[type="password"] {
            width: 100%;
            padding: 0.7rem;
            border: 1.5px solid #444;
            border-radius: 6px;
            font-size: 1.05rem; /* slightly larger for readability */
            background: #232428;
            color: #eee;
            transition: border 0.2s, background 0.2s;
            box-sizing: border-box;
            text-align: left;
        }
        .user-auth-container input[type="text"]::selection,
        .user-auth-container input[type="email"]::selection,
        .user-auth-container input[type="password"]::selection {
            background: #5F7FFF;
            color: #fff;
        }
        /* Improve readability for text/email with monospaced metrics but keep left aligned */
        .user-auth-container input[type="text"],
        .user-auth-container input[type="email"] {
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
            letter-spacing: 0.02em;
        }
        .user-auth-container input[type="text"]:focus,
        .user-auth-container input[type="email"]:focus,
        .user-auth-container input[type="password"]:focus {
            border: 1.5px solid #5F7FFF;
            background: #23283a;
            outline: none;
        }
        /* Password inputs (login/register) use mono font and centered text */
        .user-auth-container .input-with-eye input[type="password"],
        .user-auth-container .input-with-eye input[type="text"] {
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
            letter-spacing: 0.02em;
            text-align: center;
        }
        /* Password visibility toggle - auth forms */
        .user-auth-container .input-with-eye { position: relative; display: flex; align-items: center; }
        .user-auth-container .input-with-eye input { padding-right: 2.4rem; }
        .user-auth-container .toggle-visibility {
            position: absolute;
            right: 0.5rem;
            top: 50%;
            transform: translateY(-50%);
            background: transparent;
            color: #bbb;
            border: none;
            padding: 0;
            width: 2rem;
            height: 2rem;
            cursor: pointer;
        }
        .user-auth-container .toggle-visibility:hover { color: #fff; }
        .user-auth-container button {
            background: #232428;
            color: #eee;
            border: none;
            border-radius: 6px;
            padding: 0.7rem 1.5rem;
            font-size: 1rem;
            cursor: pointer;
            transition: background 0.2s, color 0.2s;
            width: 100%;
        }
        .user-auth-container button:hover {
            background: #5F7FFF;
            color: #fff;
        }
        .user-auth-container button:disabled {
            background: #444;
            color: #888;
            cursor: not-allowed;
        }
        
        /* Button styles */
        .btn-primary {
            background: #232428 !important;
            color: #eee !important;
        }
        .btn-primary:hover {
            background: #5F7FFF !important;
            color: #fff !important;
        }
        .btn-secondary {
            background: #666 !important;
            color: #eee !important;
        }
        .btn-secondary:hover {
            background: #888 !important;
            color: #fff !important;
        }
        .form-actions {
            display: flex;
            gap: 10px;
            align-items: center;
        }
        .form-actions button {
            flex: 1;
        }
        .form-actions .btn-secondary {
            flex: 0 0 auto;
            width: auto;
            padding: 0.7rem 1rem;
            font-size: 0.9rem;
        }
        
        .user-auth-container .error {
            color: #b00020;
            margin-bottom: 1rem;
            font-size: 0.9rem;
        }
        .user-auth-container .success {
            color: #5cb85c;
            margin-bottom: 1rem;
            font-size: 0.9rem;
        }
        .logged-in-message {
            margin: 2rem 0;
            color: #a8d4af;
            font-weight: bold;
            font-size: 1.2rem;
        }
        .logout-button {
            background: #b2c4b8 !important;
            color: #304A34 !important;
            width: auto !important;
            margin: 0 0.5rem !important;
            display: inline-block;
            border-radius: 6px;
            padding: 0.7rem 1.5rem;
            font-size: 1rem;
            cursor: pointer;
        }
        .logout-button:hover {
            background: #7f917f !important;
            color: #fff !important;
        }
        .user-info {
            background: #232428;
            padding: 1rem;
            border-radius: 6px;
            margin-bottom: 1rem;
        }
        .validation-hints {
            font-size: 1rem;
            color: #999;
            text-align: left;
            margin-top: 0.5rem;
        }
        /* Inline, pre-submission field validation */
        .field-error {
            font-size: 1rem;
            color: #e06c75;
            text-align: left;
            margin-top: 0.5rem;
        }
        .auth-form input.input-invalid {
            border-color: #e06c75;
        }
        .forgot-password {
            text-align: center;
            margin-top: 1rem;
        }
        .forgot-password a {
            color: #5F7FFF;
            text-decoration: none;
            font-size: 0.9rem;
        }
        .forgot-password a:hover {
            text-decoration: underline;
        }
        .forgot-password-form {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: rgba(0, 0, 0, 0.8);
            z-index: 1000;
            align-items: center;
            justify-content: center;
        }
        .forgot-password-form.active {
            display: flex;
        }
        .forgot-password-form form {
            background: #18191c;
            padding: 2rem;
            border-radius: 12px;
            width: 90%;
            max-width: 450px;
            position: relative;
        }
        .forgot-password-form form h2 {
            margin: 0 0 1.5rem;
        }
        .back-to-login {
            text-align: center;
            margin-top: 1rem;
        }
        .back-to-login a {
            color: #aaa;
            text-decoration: none;
            font-size: 0.9rem;
        }
        .back-to-login a:hover {
            color: #5F7FFF;
            text-decoration: underline;
        }
        .captcha-container {
            background: #232428;
            padding: 1rem;
            border-radius: 6px;
            border: 1px solid #444;
            margin: 0.5rem 0;
        }
        .captcha-question-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 10px;
        }
        .captcha-question {
            color: #5F7FFF;
            font-weight: bold;
            font-size: 1.2rem;
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        }
        .refresh-captcha-btn {
            background: #444;
            color: #aaa;
            border: none;
            padding: 0.35rem 0.6rem;
            border-radius: 4px;
            cursor: pointer;
            font-size: 0.8rem;
            transition: background 0.2s;
            width: auto !important; /* override global button width */
            display: inline-flex !important;
            align-items: center;
            justify-content: center;
            flex: 0 0 auto; /* do not grow */
        }
        .refresh-captcha-btn:hover {
            background: #555;
            color: #eee;
        }
        .captcha-answer-input {
            width: clamp(180px, 32%, 260px) !important;
            margin-right: 10px;
            text-align: center;
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        }
        .captcha-hint { color:#999; font-size: 0.85rem; margin-top: 8px; }
        .change-password-button {
            background: #5F7FFF !important;
            color: #fff !important;
            width: auto !important;
            margin: 0 0.5rem !important;
            display: inline-block;
            border-radius: 6px;
            padding: 0.7rem 1.5rem;
            font-size: 1rem;
            cursor: pointer;
        }
        .change-password-button:hover {
            background: #304A34 !important;
            color: #fff !important;
        }
        .text-link {
            background: none !important;
            color: #999 !important;
            width: auto !important;
            margin: 0 0.5rem !important;
            display: inline-block;
            border: none !important;
            padding: 0 !important;
            font-size: 0.85rem !important;
            text-decoration: none;
            cursor: pointer;
        }
        .text-link:hover {
            background: none !important;
            color: #bbb !important;
            text-decoration: underline;
        }
        .account-links {
            margin-top: 1.5rem;
            margin-bottom: 1rem;
            text-align: center;
            font-size: 0.85rem;
        }
        .link-separator {
            color: #666;
            margin: 0 0.3rem;
        }
        
        /* Toast Notification */
        .toast {
            position: fixed;
            bottom: 2rem;
            right: 2rem;
            background: #232428;
            color: #eee;
            padding: 1rem 1.5rem;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
            z-index: 10000;
            min-width: 300px;
            max-width: 500px;
            transform: translateY(calc(100% + 3rem));
            transition: transform 0.3s ease;
            border-left: 4px solid #5F7FFF;
        }
        .toast.show {
            transform: translateY(0);
        }
        .toast.success {
            border-left-color: #5cb85c;
        }
        .toast.error {
            border-left-color: #ff6b6b;
        }
        .toast.warning {
            border-left-color: #f0ad4e;
        }
        
        /* Confirmation Modal */
        .confirm-modal {
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            right: 0 !important;
            bottom: 0 !important;
            width: 100% !important;
            height: 100% !important;
            background: rgba(0,0,0,0.7) !important;
            z-index: 9999 !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.2s ease;
        }
        .confirm-modal.show {
            opacity: 1 !important;
            pointer-events: auto !important;
        }
        .confirm-modal-content {
            background: #232428;
            color: #eee;
            border-radius: 12px;
            padding: 2rem;
            max-width: 500px;
            width: 90%;
        }
        .confirm-modal-content h3 {
            margin: 0 0 1rem 0;
            color: #ff6b6b;
        }
        .confirm-modal-content p {
            margin: 0.5rem 0;
            line-height: 1.6;
        }
        .confirm-modal-content input {
            width: 100%;
            padding: 0.7rem;
            margin: 1rem 0;
            background: #18191c;
            border: 1.5px solid #444;
            color: #eee;
            border-radius: 6px;
            font-size: 1rem;
        }
        .confirm-modal-buttons {
            display: flex;
            gap: 1rem;
            margin-top: 1.5rem;
        }
        .confirm-modal-buttons button {
            flex: 1;
            padding: 0.7rem 1.5rem;
            border-radius: 6px;
            border: none;
            cursor: pointer;
            font-size: 1rem;
        }
        .confirm-modal-buttons .btn-danger {
            background: #ff6b6b;
            color: #fff;
        }
        .confirm-modal-buttons .btn-danger:hover {
            background: #ff5252;
        }
        .confirm-modal-buttons .btn-cancel {
            background: #666;
            color: #eee;
        }
        .confirm-modal-buttons .btn-cancel:hover {
            background: #888;
        }
        
        /* Email Verification Notice */
        .verification-notice {
            background: #2a2b2e;
            border-left: 4px solid #f0ad4e;
            padding: 1rem;
            margin: 1rem 0;
            border-radius: 6px;
        }
        .verification-notice h4 {
            margin: 0 0 0.5rem 0;
            color: #f0ad4e;
            font-size: 1rem;
        }
        .verification-notice p {
            margin: 0 0 0.5rem 0;
            color: #ccc;
            font-size: 0.9rem;
            line-height: 1.5;
        }
        .verification-notice button {
            background: #f0ad4e;
            color: #fff;
            border: none;
            padding: 0.5rem 1rem;
            border-radius: 6px;
            cursor: pointer;
            font-size: 0.9rem;
            margin-top: 0.5rem;
        }
        .verification-notice button:hover {
            background: #ec971f;
        }
        .verification-notice .verification-email-field {
            margin-top: 0.75rem;
        }
        .verification-notice .verification-email-field label {
            display: block;
            color: #aaa;
            font-size: 0.85rem;
            margin-bottom: 0.35rem;
        }
        .verification-notice .verification-email-field input {
            width: 100%;
            box-sizing: border-box;
            padding: 0.45rem 0.5rem;
            border-radius: 4px;
            border: 1px solid #444;
            background: #1e1f22;
            color: #eee;
            font-size: 0.9rem;
            position: relative;
            z-index: 6;
            pointer-events: auto !important;
            user-select: text !important;
            -webkit-user-select: text !important;
            touch-action: manipulation;
        }
        .verification-notice {
            position: relative;
            z-index: 5;
            pointer-events: auto;
        }
        .verification-notice .verification-email-hint {
            color: #888 !important;
            font-size: 0.8rem !important;
            margin-top: 0.35rem !important;
        }
        .verification-notice .register-sent-to {
            color: #b8d4b8 !important;
        }
        
        /* Change Password Modal Styling */
        #changePasswordModal .form-group {
            margin-bottom: 1.2rem;
            text-align: left;
        }
        #changePasswordModal .form-group label {
            display: block;
            margin-bottom: 0.3rem;
            color: #ccc;
            font-size: 0.9rem;
        }
        #changePasswordModal input[type="password"],
        #changePasswordModal input[type="text"] {
            display: block; /* avoid baseline alignment shifts */
            margin: 0;      /* normalize default margins */
            width: 100%;
            padding: 0 0.7rem;
            border-width: 2px; /* use whole pixels to prevent subpixel jitter on focus */
            border-style: solid;
            border-color: #444;
            border-radius: 6px;
            font-size: 1.25rem;
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
            letter-spacing: 0.02em;
            background: #232428;
            color: #eee;
            transition: background-color 0.2s, border-color 0.2s;
            box-sizing: border-box;
            height: 100%; /* fill wrapper height for stability */
            line-height: normal; /* avoid font metrics altering box height while typing */
            box-shadow: none;
            outline: none;
            -webkit-appearance: none;
            appearance: none;
        }
        /* When visible (type=text), center text and use monospaced font */
        #changePasswordModal .input-with-eye input[type="text"] {
            text-align: center;
        }
        /* Obscured password state rendered with same metrics */
        #changePasswordModal .pw-obscured {
            -webkit-text-security: disc;
            text-align: center; /* keep centered even when hidden */
        }
        #changePasswordModal input[type="password"]:focus,
        #changePasswordModal input[type="text"]:focus {
            border-width: 2px; /* keep identical width when focused */
            border-color: #5F7FFF;
            background: #23283a;
            outline: none;
            box-shadow: none;
        }
        #changePasswordModal button {
            background: #232428;
            color: #eee;
            border: 1.5px solid #444;
            border-radius: 6px;
            padding: 0.7rem 1.5rem;
            font-size: 1rem;
            cursor: pointer;
            transition: background 0.2s, color 0.2s;
        }
        #changePasswordModal button:hover {
            background: #5F7FFF;
            color: #fff;
            border-color: #5F7FFF;
        }
        #changePasswordModal button[type="button"]:hover {
            background: #666;
        }
        /* visibility toggle */
        #changePasswordModal .input-with-eye {
            position: relative;
            width: 100%;
            height: 2.8rem; /* lock row height to prevent spacing changes */
            display: flex;
            align-items: center;
        }
        #changePasswordModal .input-with-eye input {
            padding-right: 2.4rem; /* room for eye */
        }
        #changePasswordModal .toggle-visibility {
            position: absolute;
            right: 0.5rem;
            top: 50%;
            transform: translateY(-50%);
            background: transparent;
            color: #bbb;
            border: none;
            padding: 0;
            width: 2rem;
            height: 2rem;
            outline: none;
            box-shadow: none;
            -webkit-appearance: none;
            appearance: none;
        }
        #changePasswordModal .toggle-visibility:focus,
        #changePasswordModal .toggle-visibility:focus-visible {
            outline: none;
            box-shadow: none;
        }
        #changePasswordModal .toggle-visibility:hover {
            background: transparent;
            color: #fff;
            border: none;
        }
        /* Scope status messages to their specific elements to avoid affecting other 'success' classes */
        #changePasswordModal #changePasswordError {
            color: #ff6b6b;
            font-size: 0.9rem;
            margin-bottom: 0.5rem;
            text-align: left;
        }
        #changePasswordModal #changePasswordSuccess {
            color: #5cb85c;
            font-size: 0.9rem;
            margin-bottom: 0.5rem;
            text-align: left;
        }
        /* Keep spacing consistent even if a parent gets a 'success' class */
        #changePasswordModal .form-group.success { margin-bottom: 1.2rem; }
    </style>
    <script>
        // Turnstile sitekey is sourced at runtime from the backend
        // (process.env.TURNSTILE_SITEKEY via /api/generate-captcha) during
        // DOMContentLoaded — single source of truth, no build-time config.
        window.TURNSTILE_SITEKEY = '';
    </script>
    <script src="https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit" defer></script>
    <!-- Include the new authentication utility -->
    <script src="js/auth.js"></script>
    
    <!-- Disable global form handlers that might conflict -->
    <script>
        console.log('=== LOGIN PAGE SCRIPT STARTING ===');
        const isLocalhost = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1';
        
        // Disable jQuery form handlers if present
        if (window.jQuery) {
            const originalOn = window.jQuery.fn.on;
            window.jQuery.fn.on = function(events, selector, data, handler) {
                if (events === 'submit' && authFormIds.some(id => this.is('#' + id))) {
                    console.log('Blocking jQuery submit handler');
                    return this;
                }
                return originalOn.apply(this, arguments);
            };
        }
    </script>
    
    <div class="user-auth-container">
        <div id="authSection">
            <h2>Please sign in</h2>
            
            <div class="auth-tabs" id="authTabs">
                <button class="auth-tab active" data-tab="login">Login</button>
                <button class="auth-tab" data-tab="register">Register</button>
            </div>

            <!-- Login: fields in form; verification callout outside form so the email field is never affected by form submit/focus quirks -->
            <div id="loginPanel" class="auth-form active login-panel">
                <form id="loginForm">
                    <div class="form-group">
                        <label for="loginUsername">Username</label>
                        <input type="text" id="loginUsername" placeholder="Enter your username" autocomplete="username" required />
                    </div>
                    <div class="form-group">
                        <label for="loginPassword">Password</label>
                        <div class="input-with-eye">
                        <input type="password" id="loginPassword" placeholder="Enter your password" autocomplete="current-password" required />
                        <button type="button" class="toggle-visibility" aria-label="Show password" data-target="loginPassword">👁</button>
                        </div>
                    </div>
                    <button type="submit">Login</button>
                </form>
                <div id="emailVerificationNotice" class="verification-notice" style="display:none;">
                    <h4>📧 Email Verification Required</h4>
                    <p id="verificationMessage"></p>
                    <div class="verification-email-field">
                        <label for="verificationEmailEdit">Email for verification</label>
                        <input type="text" id="verificationEmailEdit" name="verificationEmailEdit" inputmode="email" autocomplete="email" autocorrect="off" autocapitalize="none" spellcheck="false" placeholder="your@email.com" />
                        <p class="verification-email-hint">Edit this if you made a typo, then click resend (your password must still be filled in above).</p>
                    </div>
                    <button type="button" id="resendVerificationBtn">Resend Verification Email</button>
                </div>
                <div class="error" id="loginError" style="display:none;"></div>
                <div class="forgot-password">
                    <a href="#" id="forgotPasswordLink">Forgot your password?</a>
                </div>
            </div>

            <!-- Register Form -->
            <form id="registerForm" class="auth-form">
                <div class="form-group">
                    <label for="registerUsername">Username</label>
                    <input type="text" id="registerUsername" placeholder="Choose a username" autocomplete="username" aria-describedby="registerUsernameError" required />
                    <div class="validation-hints">3-20 characters, letters and numbers only</div>
                    <div class="field-error" id="registerUsernameError" style="display:none;"></div>
                </div>
                <div class="form-group">
                    <label for="registerEmail">Email</label>
                    <input type="email" id="registerEmail" placeholder="Enter your email address" autocomplete="email" aria-describedby="registerEmailError" required />
                    <div class="validation-hints">Used for password reset and notifications</div>
                    <div class="field-error" id="registerEmailError" style="display:none;"></div>
                </div>
                <!-- Honeypot (bots often fill hidden fields) -->
                <input type="text" id="hpField" name="website" autocomplete="off" tabindex="-1" style="position:absolute;left:-9999px;opacity:0;height:0;width:0;" aria-hidden="true" />
                <div class="form-group">
                    <label for="registerPassword">Password</label>
                    <div class="input-with-eye">
                    <input type="password" id="registerPassword" placeholder="Choose a password" autocomplete="new-password" aria-describedby="registerPasswordError" required />
                    <button type="button" class="toggle-visibility" aria-label="Show password" data-target="registerPassword">👁</button>
                    </div>
                    <div class="validation-hints">At least 6 characters</div>
                    <div class="field-error" id="registerPasswordError" style="display:none;"></div>
                </div>
                <div class="form-group">
                    <label for="confirmPassword">Confirm Password</label>
                    <div class="input-with-eye">
                    <input type="password" id="confirmPassword" placeholder="Confirm your password" autocomplete="new-password" aria-describedby="confirmPasswordError" required />
                    <button type="button" class="toggle-visibility" aria-label="Show password" data-target="confirmPassword">👁</button>
                    </div>
                    <div class="field-error" id="confirmPasswordError" style="display:none;"></div>
                </div>
                
                <!-- CAPTCHA Section -->
                <div class="form-group" id="captchaSection">
                    <label for="captchaAnswer">Security Verification</label>
                    <div class="captcha-container">
                        <div class="captcha-question-row">
                            <span id="captchaQuestion" class="captcha-question">Loading...</span>
                            <button type="button" id="refreshCaptcha" class="refresh-captcha-btn">↻ Refresh</button>
                        </div>
                        <!-- Optional Cloudflare Turnstile widget -->
                        <div id="turnstileContainer" style="margin-bottom:10px; display:none;"></div>
                        <input type="hidden" id="turnstileToken" />
                        <input type="text" id="captchaAnswer" name="captchaAnswer" class="captcha-answer-input" placeholder="Enter your answer" required />
                        <input type="hidden" id="captchaId" />
                        <div class="captcha-hint">Solve the math problem to verify you're human</div>
                    </div>
                </div>
                
                <div class="error" id="registerError" style="display:none;"></div>
                <div class="success" id="registerSuccess" style="display:none;"></div>
                <button type="submit" id="registerButton">Register</button>
                <div id="registerVerificationNotice" class="verification-notice" style="display:none; margin-top: 1rem;">
                    <h4>✅ Registration Successful!</h4>
                    <p>Please check your email inbox for a verification link to activate your account.</p>
                    <p id="registerVerificationEmailLine" class="register-sent-to" style="display:none;"></p>
                    <div class="verification-email-field">
                        <label for="registerVerificationEmailEdit">Email for verification</label>
                        <input type="email" id="registerVerificationEmailEdit" name="registerVerificationEmailEdit" inputmode="email" autocomplete="email" autocorrect="off" autocapitalize="none" spellcheck="false" placeholder="your@email.com" />
                        <p class="verification-email-hint">If you made a typo, edit the address here and resend (your password must still be filled in above).</p>
                    </div>
                    <button type="button" id="registerResendVerificationBtn">Resend Verification Email</button>
                </div>
            </form>

            <!-- Forgot Password Modal -->
            <div id="forgotPasswordForm" class="forgot-password-form">
                <form>
                    <h2>Reset Password</h2>
                    <div class="form-group">
                        <label for="forgotEmail">Email Address</label>
                        <input type="email" id="forgotEmail" placeholder="Enter your email address" autocomplete="email" required />
                        <div class="validation-hints">We'll send you a password reset link</div>
                    </div>
                    <div class="error" id="forgotError" style="display:none;"></div>
                    <div class="success" id="forgotSuccess" style="display:none;"></div>
                    <button type="submit" id="forgotButton">Send Reset Link</button>
                    <div class="back-to-login">
                        <a href="#" id="backToLoginLink">Back to Login</a>
                    </div>
                </form>
            </div>
        </div>

        <!-- Logged In Section -->
        <div id="loggedInSection" style="display:none;">
            <div class="logged-in-message">You are logged in!</div>
            <div class="user-info" id="userInfo"></div>
            <div class="account-links">
                <button class="change-password-button" id="changePasswordBtn">Change Password</button>
                <button class="logout-button" id="logoutBtn">Logout</button>
            </div>
            <div class="account-links" style="margin-top: 0.5rem;">
                <button class="text-link" id="exportDataBtn">Export My Data</button>
                <span class="link-separator">|</span>
                <button class="text-link" id="deleteAccountBtn">Delete Account</button>
            </div>
        </div>
    </div>

    <!-- Toast Notification -->
    <div id="toast" class="toast"></div>

    <!-- Confirmation Modal for Delete Account -->
    <div id="deleteConfirmModal" class="confirm-modal">
        <div class="confirm-modal-content">
            <h3>⚠️ Delete Account</h3>
            <p>This will <strong>permanently delete</strong> your account and all associated data.</p>
            <p>This action <strong>cannot be undone</strong>.</p>
            <p>To confirm, please type <strong>DELETE</strong> below:</p>
            <input type="text" id="deleteConfirmInput" placeholder="Type DELETE to confirm">
            <div class="confirm-modal-buttons">
                <button class="btn-cancel" id="deleteCancelBtn">Cancel</button>
                <button class="btn-danger" id="deleteConfirmBtn">Delete My Account</button>
            </div>
        </div>
    </div>

    <div id="changePasswordModal" style="display:none; position:fixed; top:0; left:0; width:100vw; height:100vh; background:rgba(0,0,0,0.7); z-index:1000; align-items:center; justify-content:center;">
        <div style="background:#232428; color:#eee; border-radius:12px; padding:1.5rem; max-width:400px; width:90%; position:relative;">
            <h2 style="color:#a8d4af; margin-top:0; margin-bottom:1rem;">Change Password</h2>
            <form id="changePasswordForm">
                <div class="form-group password-field">
                    <label for="currentPassword">Current Password</label>
                    <div class="input-with-eye">
                    <input type="password" id="currentPassword" autocomplete="current-password" required />
                        <button type="button" class="toggle-visibility" aria-label="Show current password" data-target="currentPassword">👁</button>
                </div>
                </div>
                <div class="form-group password-field">
                    <label for="newPassword">New Password</label>
                    <div class="input-with-eye">
                    <input type="password" id="newPassword" autocomplete="new-password" required />
                        <button type="button" class="toggle-visibility" aria-label="Show new password" data-target="newPassword">👁</button>
                </div>
                </div>
                <div class="form-group password-field">
                    <label for="confirmNewPassword">Confirm New Password</label>
                    <div class="input-with-eye">
                    <input type="password" id="confirmNewPassword" autocomplete="new-password" required />
                        <button type="button" class="toggle-visibility" aria-label="Show confirm password" data-target="confirmNewPassword">👁</button>
                    </div>
                </div>
                <div class="error" id="changePasswordError" style="display:none;"></div>
                <div class="success" id="changePasswordSuccess" style="display:none;"></div>
                <button type="submit" style="margin-top:1rem;">Change Password</button>
                <button type="button" id="closeChangePasswordBtn" style="margin-top:1rem; margin-left:1rem;">Cancel</button>
            </form>
        </div>
    </div>

    <script>
        // Legacy auth functions for backward compatibility are now handled by auth.js

        function showError(elementId, message) {
            const errorElement = document.getElementById(elementId);
            if (errorElement) {
                errorElement.textContent = message;
                errorElement.style.display = 'block';
            }
        }

        function showSuccess(elementId, message) {
            const successElement = document.getElementById(elementId);
            if (successElement) {
                successElement.textContent = message;
                successElement.style.display = 'block';
            }
        }

        function clearErrors() {
            const errorElements = document.querySelectorAll('.error, .success');
            errorElements.forEach(el => {
                el.textContent = '';
                el.style.display = 'none';
            });
        }

        // Real implementation is assigned in setupRegisterLiveValidation() (DOMContentLoaded);
        // a no-op default means switchTab never has to guard against it being undefined.
        window.clearRegisterFieldErrors = function () {};

        function switchTab(tab) {
            // Stop any running resend cooldown and restore its owning button so neither
            // resend button is left frozen at "Resend in Ns" after a tab change.
            stopResendCooldown();

            // Clear leaked state from a prior successful registration so a new attempt
            // works: hide the register verification notice and re-enable the main email.
            const regNotice = document.getElementById('registerVerificationNotice');
            if (regNotice) regNotice.style.display = 'none';
            const mainRegEmail = document.getElementById('registerEmail');
            if (mainRegEmail) mainRegEmail.disabled = false;

            // Clear any inline register field-validation errors from a prior visit.
            if (window.clearRegisterFieldErrors) window.clearRegisterFieldErrors();

            // Hide all forms
            document.querySelectorAll('.auth-form').forEach(form => {
                form.classList.remove('active');
            });
            
            // Remove active class from all tabs
            document.querySelectorAll('.auth-tab').forEach(tabBtn => {
                tabBtn.classList.remove('active');
            });
            
            // Show selected form and activate tab
            if (tab === 'login') {
                document.getElementById('loginPanel').classList.add('active');
                document.querySelector('[data-tab="login"]').classList.add('active');
            } else if (tab === 'register') {
                document.getElementById('registerForm').classList.add('active');
                document.querySelector('[data-tab="register"]').classList.add('active');
                // Load CAPTCHA when switching to register tab
                loadCaptcha();
                // Prefer Turnstile if configured
                if (window.TURNSTILE_SITEKEY && window.TURNSTILE_SITEKEY.trim()) {
                    const container = document.getElementById('turnstileContainer');
                    if (container) container.style.display = 'block';
                    const mathRow = document.querySelector('.captcha-question-row');
                    const answer = document.getElementById('captchaAnswer');
                    const hint = document.querySelector('.captcha-hint');
                    if (mathRow) mathRow.style.display = 'none';
                    if (answer) {
                        answer.style.display = 'none';
                        answer.removeAttribute('required');
                    }
                    if (hint) hint.textContent = 'Protected by Cloudflare Turnstile';
                } else {
                    // Show math captcha and ensure it's required
                    const answer = document.getElementById('captchaAnswer');
                    if (answer) {
                        answer.style.display = '';
                        answer.setAttribute('required', 'required');
                    }
                }
            }
            
            clearErrors();
        }

        function showForgotPassword() {
            document.getElementById('forgotPasswordForm').classList.add('active');
            clearErrors();
        }

        function showLogin() {
            document.getElementById('forgotPasswordForm').classList.remove('active');
            clearErrors();
        }

        async function handleLogin(event) {
            console.log('handleLogin called', event);
            event.preventDefault();
            
            // Ensure AuthManager is available
            if (!window.auth || typeof window.auth.login !== 'function') {
                console.error('AuthManager not available');
                showError('loginError', 'Authentication system not ready. Please refresh the page.');
                return;
            }
            
            console.log('AuthManager is available, proceeding with login');
            const usernameEl = document.getElementById('loginUsername');
            const passwordEl = document.getElementById('loginPassword');
            
            if (!usernameEl || !passwordEl) {
                console.error('Login form elements not found');
                showError('loginError', 'Login form not properly loaded. Please refresh the page.');
                return;
            }
            
            const username = usernameEl.value;
            const password = passwordEl.value;
            
            console.log('Login attempt for username:', username);
            clearErrors();
            
            try {
                const data = await window.auth.login(username, password);
                
                // Ensure authentication is properly established before proceeding
                console.log('Login successful, ensuring authentication is established...');
                const confirmedUser = await window.auth.ensureAuthenticated(3, 1000);
                
                if (!confirmedUser) {
                    console.warn('Authentication could not be confirmed, but login was successful');
                    showError('loginError', 'Login successful but authentication verification failed. Please try again.');
                    return;
                }
                
                // Handle redirect or popup close
                const params = new URLSearchParams(window.location.search);
                const redirectUrl = params.get('redirect');
                
                if (window.opener) {
                    window.opener.postMessage({ 
                        type: 'user-login-success', 
                        user: data.user
                    }, '*');
                    window.close();
                } else if (redirectUrl) {
                    console.log('Login successful, redirecting to:', redirectUrl);
                    window.location.href = redirectUrl;
                } else {
                    console.log('Login successful, reloading page');
                    window.location.reload();
                }
            } catch (error) {
                let errorMessage = error.message;
                
                // Handle email verification error
                const errBody = error && typeof error.body === 'object' && error.body ? error.body : {};
                const needsEmailVerification =
                    error.status === 403 &&
                    (error.emailNotVerified === true ||
                        errBody.emailNotVerified === true ||
                        (error.message && error.message.toLowerCase().includes('verify your email')) ||
                        (errBody.message && String(errBody.message).toLowerCase().includes('verify your email')));
                if (needsEmailVerification) {
                    const verificationNotice = document.getElementById('emailVerificationNotice');
                    const verificationMessage = document.getElementById('verificationMessage');
                    verificationMessage.textContent = error.message || errBody.message || 'Please verify your email address.';
                    verificationNotice.style.display = 'block';
                    document.getElementById('loginError').style.display = 'none';

                    const emailField = document.getElementById('verificationEmailEdit');
                    const accountEmail = String(
                        error.email || errBody.email || errBody.registeredEmail || ''
                    ).trim();
                    if (emailField) {
                        emailField.value = accountEmail;
                    }
                    if (accountEmail) {
                        sessionStorage.setItem('pendingVerificationEmail', accountEmail.toLowerCase().trim());
                    } else {
                        sessionStorage.setItem('pendingVerificationEmail', username.trim());
                    }
                    sessionStorage.setItem('pendingVerificationUsername', username.trim());
                    return;
                }
                
                // Handle rate limiting errors
                if (error.status === 429) {
                    const retryAfter = error.retryAfter;
                    errorMessage = formatRateLimitError(error.message, retryAfter);
                }
                
                // Hide verification notice if shown
                document.getElementById('emailVerificationNotice').style.display = 'none';
                showError('loginError', errorMessage);
                document.getElementById('loginPassword').value = '';
            }
        }

        function getAuthApiBase() {
            const isLocalhost = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1';
            const isLocaldev = window.location.hostname.endsWith('localdev.com');
            const templatedAuthBase = "{{ site.auth_api_base }}";

            if (isLocalhost) {
                return 'http://localhost:3001';
            }

            if (isLocaldev) {
                return 'https://auth.localdev.com:3001';
            }

            if (window.auth?.apiBase) {
                return window.auth.apiBase;
            }

            if (window.AUTH_API_BASE) {
                return window.AUTH_API_BASE;
            }

            return !templatedAuthBase || templatedAuthBase.includes('site.auth_api_base')
                ? 'https://auth.sophiebi.com'
                : templatedAuthBase;
        }

        // Test-mode (non-secret): when the testCaptchaMode cookie is set AND the server
        // kill-switch (ENABLE_TEST_CAPTCHA_MODE) is on, render Cloudflare's always-pass
        // TEST sitekey so automated browser tests can complete the widget. This grants
        // nothing by itself — the server still requires the real bypass token, which the
        // test injects as a request header and which never lives in page state.
        async function maybeEnableTestCaptcha() {
          try {
            if (!/(?:^|;\s*)testCaptchaMode=1(?:;|$)/.test(document.cookie)) return;
            const base = getAuthApiBase();
            const r = await fetch(`${base}/api/client-config`, { credentials: 'omit' });
            if (!r.ok) return;
            const cfg = await r.json();
            if (cfg && cfg.testCaptchaMode === true) {
              window.TURNSTILE_SITEKEY = '1x00000000000000000000AA'; // Cloudflare always-pass test key
              window.__testCaptchaForced = true; // don't let loadCaptcha overwrite with the real key
            }
          } catch (_) { /* fail closed: keep the real sitekey */ }
        }

        // CAPTCHA handling functions
        async function loadCaptcha() {
            try {
                const apiBase = getAuthApiBase();
                const response = await fetch(`${apiBase}/api/generate-captcha`, {
                    method: 'GET',
                    headers: {
                        'Content-Type': 'application/json',
                        'Origin': window.location.origin
                    },
                    credentials: 'include'
                });
                
                if (response.ok) {
                    const data = await response.json();
                    if (data.success) {
                        document.getElementById('captchaQuestion').textContent = data.captcha.question;
                        document.getElementById('captchaId').value = data.captcha.id;
                        document.getElementById('captchaAnswer').value = '';
                        // Belt-and-suspenders: adopt the Turnstile sitekey from this
                        // response too, so the register tab renders the widget even if
                        // it opened before the load-time fetch resolved. Never clobber
                        // the always-pass key when test mode forced it.
                        if (data.turnstile && data.turnstile.siteKey && !window.__testCaptchaForced) {
                            window.TURNSTILE_SITEKEY = data.turnstile.siteKey;
                        }
                        initTurnstile();
                    } else {
                        document.getElementById('captchaQuestion').textContent = 'Error loading CAPTCHA';
                    }
                } else {
                    document.getElementById('captchaQuestion').textContent = 'CAPTCHA unavailable';
                }
            } catch (error) {
                console.error('CAPTCHA loading error:', error);
                document.getElementById('captchaQuestion').textContent = 'CAPTCHA unavailable';
            }
        }

        function refreshCaptcha() {
            document.getElementById('captchaQuestion').textContent = 'Loading...';
            loadCaptcha();
        }

        // Turnstile integration (optional)
        let turnstileRendered = false;
        let turnstileWidgetId = null;
        // Clear the hidden token field so a dead (expired/used) token can't be posted.
        function clearTurnstileToken() {
            const tokenInput = document.getElementById('turnstileToken');
            if (tokenInput) tokenInput.value = '';
        }
        // Force the widget to mint a fresh token. Used after every submit attempt so a
        // retry never reuses a single-use token (which /siteverify rejects as
        // timeout-or-duplicate even though the widget still shows "Success!").
        function resetTurnstile() {
            clearTurnstileToken();
            if (turnstileWidgetId != null && window.turnstile?.reset) {
                try { window.turnstile.reset(turnstileWidgetId); } catch (e) { /* widget gone */ }
            }
        }
        window.onTurnstileSuccess = function(token) {
            const tokenInput = document.getElementById('turnstileToken');
            if (tokenInput) tokenInput.value = token;
            // Clear any existing error messages when Turnstile succeeds
            const registerError = document.getElementById('registerError');
            if (registerError) {
                registerError.style.display = 'none';
                registerError.textContent = '';
            }
        };

        // Render the Turnstile widget when a sitekey is configured. Idempotent and
        // reads window.TURNSTILE_SITEKEY fresh, so it works whether the sitekey is
        // known at load or arrives later via loadCaptcha. If the Turnstile script
        // hasn't loaded yet, it polls briefly and retries.
        function initTurnstile() {
            const sitekey = window.TURNSTILE_SITEKEY && window.TURNSTILE_SITEKEY.trim();
            const container = document.getElementById('turnstileContainer');
            if (!sitekey || !container) return;
            if (!window.turnstile || typeof window.turnstile.render !== 'function') {
                let tries = 0;
                const iv = setInterval(() => {
                    tries++;
                    if (window.turnstile || tries > 50) {
                        clearInterval(iv);
                        if (window.turnstile) initTurnstile();
                    }
                }, 100);
                return;
            }
            container.style.display = 'block';
            if (!turnstileRendered) {
                turnstileWidgetId = window.turnstile.render('#turnstileContainer', {
                    sitekey,
                    callback: function (token) {
                        if (typeof window.onTurnstileSuccess === 'function') {
                            window.onTurnstileSuccess(token);
                        }
                    },
                    // A Turnstile token is single-use and expires ~300s after issue.
                    // Without these, an expired/errored token leaves the widget showing
                    // its green "Success!" state while the hidden field holds a dead
                    // token — which /siteverify rejects as timeout-or-duplicate. Clear
                    // the field so the stale token can't be submitted.
                    'expired-callback': function () { clearTurnstileToken(); },
                    'timeout-callback': function () { clearTurnstileToken(); },
                    'error-callback': function () { clearTurnstileToken(); },
                    appearance: 'always',
                    theme: 'dark'
                });
                turnstileRendered = true;
            }
            // Hide math captcha UI when Turnstile is enabled
            const mathRow = document.querySelector('.captcha-question-row');
            const answer = document.getElementById('captchaAnswer');
            const hint = document.querySelector('.captcha-hint');
            if (mathRow) mathRow.style.display = 'none';
            if (answer) {
                answer.style.display = 'none';
                answer.removeAttribute('required');
            }
            if (hint) hint.textContent = 'Protected by Cloudflare Turnstile';
        }

        function formatRateLimitError(error, retryAfter) {
            if (retryAfter) {
                const minutes = Math.ceil(retryAfter / 60);
                if (minutes > 60) {
                    const hours = Math.ceil(minutes / 60);
                    return `${error} Please try again in ${hours} hour${hours > 1 ? 's' : ''}.`;
                }
                return `${error} Please try again in ${minutes} minute${minutes > 1 ? 's' : ''}.`;
            }
            return error;
        }

        async function handleRegister(event) {
            console.log('handleRegister called', event);
            event.preventDefault();
            
            // Safety: Remove required attribute from captcha input if it's hidden
            const captchaAnswerInput = document.getElementById('captchaAnswer');
            if (captchaAnswerInput && (captchaAnswerInput.style.display === 'none' || captchaAnswerInput.offsetParent === null)) {
                captchaAnswerInput.removeAttribute('required');
            }
            
            // Ensure AuthManager is available
            if (!window.auth || typeof window.auth.register !== 'function') {
                console.error('AuthManager not available');
                showError('registerError', 'Authentication system not ready. Please refresh the page.');
                return;
            }
            
            const username = document.getElementById('registerUsername').value;
            const email = document.getElementById('registerEmail').value;
            const password = document.getElementById('registerPassword').value;
            const confirmPassword = document.getElementById('confirmPassword').value;
            const captchaId = document.getElementById('captchaId').value;
            const captchaAnswer = document.getElementById('captchaAnswer').value;
            // Sync token from Turnstile API (callback sometimes does not update the hidden field in time)
            const sitekeyActive = window.TURNSTILE_SITEKEY && window.TURNSTILE_SITEKEY.trim();
            if (sitekeyActive && turnstileWidgetId != null && window.turnstile?.getResponse) {
              const live = (window.turnstile.getResponse(turnstileWidgetId) || '').trim();
              if (live) {
                const tokenInput = document.getElementById('turnstileToken');
                if (tokenInput) tokenInput.value = live;
              }
            }
            const turnstileToken = (document.getElementById('turnstileToken')?.value || '').trim();
            const hpValue = (document.getElementById('hpField')?.value || '').trim();
            
            clearErrors();
            
            // Honeypot (client-side pre-check; server enforces too)
            if (hpValue.length > 0) {
                showError('registerError', 'Submission blocked.');
                return;
            }

            // Client-side validation
            if (password !== confirmPassword) {
                showError('registerError', 'Passwords do not match');
                return;
            }
            
            if (username.length < 3 || username.length > 20) {
                showError('registerError', 'Username must be between 3 and 20 characters');
                return;
            }
            
            if (!/^[a-zA-Z0-9]+$/.test(username)) {
                showError('registerError', 'Username can only contain letters and numbers');
                return;
            }

            // Basic email validation
            if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
                showError('registerError', 'Please enter a valid email address');
                return;
            }
            
            if (password.length < 6) {
                showError('registerError', 'Password must be at least 6 characters');
                return;
            }

            // Check CAPTCHA verification
            const isTurnstileActive = window.TURNSTILE_SITEKEY && window.TURNSTILE_SITEKEY.trim();
            if (isTurnstileActive) {
                // If Turnstile is configured, require Turnstile token
                if (!turnstileToken) {
                    showError('registerError', 'Please complete the security verification');
                    return;
                }
            } else {
                // Otherwise, require math CAPTCHA
                if (!captchaId || !captchaAnswer) {
                    showError('registerError', 'Please complete the security verification');
                    return;
                }
            }
            
            const registerButton = document.getElementById('registerButton');
            registerButton.disabled = true;
            registerButton.textContent = 'Registering...';
            
            try {
                const data = await window.auth.register(
                    username,
                    email,
                    password,
                    captchaId,
                    captchaAnswer,
                    { hp: hpValue, turnstileToken }
                );
                
                // Show verification notice
                const normalizedRegEmail = email.toLowerCase().trim();
                // Suppress the static "We sent the link to:" line — the editable
                // prefilled field below already shows the address (avoid duplication).
                const regLine = document.getElementById('registerVerificationEmailLine');
                if (regLine) {
                    regLine.textContent = '';
                    regLine.style.display = 'none';
                }
                // Prefill the editable email field (full-mode resend reads it directly).
                const regEmailEdit = document.getElementById('registerVerificationEmailEdit');
                if (regEmailEdit) {
                    regEmailEdit.value = normalizedRegEmail;
                }
                document.getElementById('registerVerificationNotice').style.display = 'block';
                document.getElementById('registerSuccess').style.display = 'none';
                document.getElementById('registerError').style.display = 'none';

                // Do NOT reset the form: registerUsername/registerPassword must stay
                // populated so the full-mode resend can re-send with credentials.
                // Disable the main email input while the notice is shown to avoid confusion
                // (edit the address in the notice field instead).
                const mainRegEmail = document.getElementById('registerEmail');
                if (mainRegEmail) {
                    mainRegEmail.disabled = true;
                }

                // Start the resend cooldown (rate-limit UX).
                startResendCooldown(document.getElementById('registerResendVerificationBtn'), 60);

                // The token we just spent is now consumed; reset so any follow-up
                // register attempt mints a fresh one instead of reusing a dead token.
                resetTurnstile();

                // Scroll to top to show notice
                document.querySelector('.user-auth-container').scrollIntoView({ behavior: 'smooth' });
            } catch (error) {
                let errorMessage = error.message;
                
                // Handle rate limiting errors
                if (error.status === 429) {
                    const retryAfter = error.retryAfter;
                    errorMessage = formatRateLimitError(error.message, retryAfter);
                }
                
                showError('registerError', errorMessage);

                // Refresh CAPTCHA on error. The Turnstile token is single-use, so reset
                // the widget too — otherwise a retry resubmits the same (now consumed)
                // token and /siteverify rejects it as timeout-or-duplicate.
                refreshCaptcha();
                resetTurnstile();
            } finally {
                registerButton.disabled = false;
                registerButton.textContent = 'Register';
            }
        }

        async function handleForgotPassword(event) {
            event.preventDefault();
            event.stopPropagation(); // Prevent event bubbling
            const email = document.getElementById('forgotEmail').value;
            
            clearErrors();

            if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
                showError('forgotError', 'Please enter a valid email address');
                return false;
            }

            const forgotButton = document.getElementById('forgotButton');
            forgotButton.disabled = true;
            forgotButton.textContent = 'Sending...';

            try {
                const apiBase = getAuthApiBase();
                const response = await fetch(`${apiBase}/api/forgot-password`, {
                    method: 'POST',
                    headers: { 
                        'Content-Type': 'application/json',
                        'Origin': window.location.origin
                    },
                    credentials: 'include',
                    body: JSON.stringify({ email })
                });
                
                const data = await response.json();
                
                if (response.ok) {
                    showSuccess('forgotSuccess', data.message);
                } else {
                    showError('forgotError', data.message || 'Failed to send reset email');
                }
            } catch (err) {
                showError('forgotError', 'Network error. Please try again.');
            } finally {
                forgotButton.disabled = false;
                forgotButton.textContent = 'Send Reset Link';
            }
            
            return false; // Additional prevention
        }

        function showChangePassword() {
            const modal = document.getElementById('changePasswordModal');
            modal.style.display = 'flex';
            document.getElementById('changePasswordError').style.display = 'none';
            document.getElementById('changePasswordSuccess').style.display = 'none';
            document.getElementById('changePasswordForm').reset();
            // Initialize inputs to text type with obscured class to keep metrics identical
            ['currentPassword','newPassword','confirmNewPassword'].forEach(id => {
                const input = document.getElementById(id);
                if (!input) return;
                input.type = 'text';
                input.classList.add('pw-obscured');
            });
            // wire up visibility toggles each time modal opens
            document.querySelectorAll('#changePasswordModal .toggle-visibility').forEach(btn => {
                btn.onclick = () => {
                    const targetId = btn.getAttribute('data-target');
                    const input = document.getElementById(targetId);
                    if (!input) return;
                    const isObscured = input.classList.toggle('pw-obscured');
                    btn.textContent = isObscured ? '👁' : '🙈';
                    btn.setAttribute('aria-label', (isObscured ? 'Show' : 'Hide') + ' password');
                };
            });
        }

        function closeChangePassword() {
            document.getElementById('changePasswordModal').style.display = 'none';
        }

        function showToast(message, type = 'info') {
            const toast = document.getElementById('toast');
            toast.textContent = message;
            toast.className = 'toast ' + type;
            
            setTimeout(() => {
                toast.classList.add('show');
            }, 10);
            
            setTimeout(() => {
                toast.classList.remove('show');
            }, 4000);
        }

        async function handleExportData() {
            try {
                const result = await window.auth.exportData();
                
                // Create a downloadable file
                const dataStr = JSON.stringify(result, null, 2);
                const dataBlob = new Blob([dataStr], { type: 'application/json' });
                const url = URL.createObjectURL(dataBlob);
                const link = document.createElement('a');
                link.href = url;
                link.download = `user-data-export-${new Date().toISOString().split('T')[0]}.json`;
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
                URL.revokeObjectURL(url);
                
                showToast('Your data has been exported and downloaded successfully!', 'success');
            } catch (error) {
                console.error('Export data error:', error);
                showToast('Failed to export data: ' + error.message, 'error');
            }
        }

        function handleDeleteAccount() {
            const modal = document.getElementById('deleteConfirmModal');
            const input = document.getElementById('deleteConfirmInput');
            modal.classList.add('show');
            input.value = '';
        }

        async function confirmDeleteAccount() {
            const input = document.getElementById('deleteConfirmInput');
            const modal = document.getElementById('deleteConfirmModal');
            
            if (input.value !== 'DELETE') {
                showToast('Please type DELETE to confirm account deletion', 'warning');
                return;
            }
            
            modal.classList.remove('show');
            
            try {
                await window.auth.deleteAccount();
                showToast('Your account has been successfully deleted.', 'success');
                setTimeout(() => {
                    window.location.href = '/login/';
                }, 2000);
            } catch (error) {
                console.error('Delete account error:', error);
                showToast('Failed to delete account: ' + error.message, 'error');
            }
        }

        function cancelDeleteAccount() {
            const modal = document.getElementById('deleteConfirmModal');
            modal.classList.remove('show');
        }

        // Single shared cooldown timer for resend buttons (one active at a time).
        // resendCooldownBtn tracks which button currently owns the interval so we can
        // always restore it (label + enabled state) before another button takes over.
        let resendCooldownInterval = null;
        let resendCooldownBtn = null;

        // Clear the running cooldown and restore the owning button to a usable state.
        // Safe to call when nothing is running.
        function stopResendCooldown() {
            if (resendCooldownInterval) {
                clearInterval(resendCooldownInterval);
                resendCooldownInterval = null;
            }
            if (resendCooldownBtn) {
                const label = resendCooldownBtn.dataset.resendLabel || resendCooldownBtn.textContent;
                resendCooldownBtn.disabled = false;
                resendCooldownBtn.textContent = label;
                resendCooldownBtn = null;
            }
        }

        function startResendCooldown(btn, seconds) {
            if (!btn) return;
            // Restore whichever button previously owned the interval so it can never be
            // left frozen at "Resend in Ns" when a different button takes over.
            stopResendCooldown();
            // Capture the original (non-countdown) label once so repeated cooldowns restore it.
            if (!btn.dataset.resendLabel) {
                btn.dataset.resendLabel = btn.textContent;
            }
            const originalText = btn.dataset.resendLabel;
            let remaining = Math.max(0, Math.ceil(Number(seconds) || 0));
            if (remaining <= 0) {
                btn.disabled = false;
                btn.textContent = originalText;
                return;
            }
            resendCooldownBtn = btn;
            btn.disabled = true;
            btn.textContent = `Resend in ${remaining}s`;
            resendCooldownInterval = setInterval(() => {
                remaining -= 1;
                if (remaining <= 0) {
                    clearInterval(resendCooldownInterval);
                    resendCooldownInterval = null;
                    btn.disabled = false;
                    btn.textContent = originalText;
                    resendCooldownBtn = null;
                } else {
                    btn.textContent = `Resend in ${remaining}s`;
                }
            }, 1000);
        }

        async function handleResendVerification() {
            const loginNoticeEl = document.getElementById('emailVerificationNotice');
            const onLoginVerification = loginNoticeEl && loginNoticeEl.style.display !== 'none';

            const loginUser = document.getElementById('loginUsername')?.value?.trim() || '';
            const loginPass = document.getElementById('loginPassword')?.value || '';
            const editedEmail = (document.getElementById('verificationEmailEdit')?.value || '').trim();

            const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

            // The button this resend belongs to (used for the cooldown countdown).
            const activeBtn = onLoginVerification
                ? document.getElementById('resendVerificationBtn')
                : document.getElementById('registerResendVerificationBtn');

            // Guard: ignore clicks while the button is disabled (in cooldown or in-flight).
            if (activeBtn && activeBtn.disabled) {
                return;
            }

            let payload;
            if (onLoginVerification) {
                if (!emailPattern.test(editedEmail)) {
                    showToast('Please enter a valid email address.', 'error');
                    return;
                }
                if (!loginUser || !loginPass) {
                    showToast('Enter your password above, then resend the verification email.', 'error');
                    return;
                }
                payload = { username: loginUser, password: loginPass, email: editedEmail };
            } else {
                // Register notice: full mode using the still-populated register form
                // credentials plus the (editable) verification email field.
                const regUser = document.getElementById('registerUsername')?.value?.trim() || '';
                const regPass = document.getElementById('registerPassword')?.value || '';
                const regEditedEmail = (document.getElementById('registerVerificationEmailEdit')?.value || '').trim();
                if (!emailPattern.test(regEditedEmail)) {
                    showToast('Please enter a valid email address.', 'error');
                    return;
                }
                if (!regUser || !regPass) {
                    showToast('Enter your password above, then resend the verification email.', 'error');
                    return;
                }
                payload = { username: regUser, password: regPass, email: regEditedEmail };
            }

            // Capture the resend label once so cooldown/restore use the right text.
            if (activeBtn && !activeBtn.dataset.resendLabel) {
                activeBtn.dataset.resendLabel = activeBtn.textContent;
            }
            const originalText = activeBtn ? activeBtn.dataset.resendLabel : '';

            // In-flight: stop any running cooldown (restoring the owning button) and
            // show a sending state on the button we're about to use.
            stopResendCooldown();
            if (activeBtn) {
                activeBtn.disabled = true;
                activeBtn.textContent = 'Sending...';
            }

            // Default cooldown to apply after a successful send.
            const SUCCESS_COOLDOWN_SECONDS = 60;

            try {
                const apiBase = getAuthApiBase();

                const response = await fetch(`${apiBase}/api/resend-verification`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Origin': window.location.origin
                    },
                    credentials: 'include',
                    body: JSON.stringify(payload)
                });

                const data = await response.json().catch(() => ({}));

                if (response.ok) {
                    if (onLoginVerification && editedEmail) {
                        sessionStorage.setItem('pendingVerificationEmail', editedEmail.toLowerCase().trim());
                    }
                    showToast('Verification email sent! Please check your inbox.', 'success');
                    if (activeBtn) {
                        activeBtn.textContent = originalText;
                        startResendCooldown(activeBtn, SUCCESS_COOLDOWN_SECONDS);
                    }
                } else if (response.status === 429) {
                    // Rate limited: restart the countdown from Retry-After (header or body).
                    const headerRetry = parseInt(response.headers.get('Retry-After'), 10);
                    const bodyRetry = parseInt(data.retryAfter, 10);
                    const retryAfter = Number.isFinite(headerRetry) ? headerRetry
                        : (Number.isFinite(bodyRetry) ? bodyRetry : SUCCESS_COOLDOWN_SECONDS);
                    const detail = [data.message, data.error].filter(Boolean).join(' — ');
                    console.warn('Resend verification rate limited:', response.status, data);
                    showToast(formatRateLimitError(detail || 'Too many requests.', retryAfter), 'error');
                    if (activeBtn) {
                        activeBtn.textContent = originalText;
                        startResendCooldown(activeBtn, retryAfter);
                    }
                } else {
                    const detail = [data.message, data.error].filter(Boolean).join(' — ');
                    console.warn('Resend verification failed:', response.status, data);
                    showToast(detail || 'Failed to send verification email', 'error');
                    if (activeBtn) {
                        activeBtn.disabled = false;
                        activeBtn.textContent = originalText;
                    }
                }
            } catch (error) {
                console.error('Resend verification error:', error);
                showToast('Network error. Please try again.', 'error');
                if (activeBtn) {
                    activeBtn.disabled = false;
                    activeBtn.textContent = originalText;
                }
            }
        }

        document.getElementById('changePasswordForm').addEventListener('submit', async function(event) {
            event.preventDefault();
            const currentPassword = document.getElementById('currentPassword').value;
            const newPassword = document.getElementById('newPassword').value;
            const confirmNewPassword = document.getElementById('confirmNewPassword').value;
            const errorDiv = document.getElementById('changePasswordError');
            const successDiv = document.getElementById('changePasswordSuccess');
            errorDiv.style.display = 'none';
            successDiv.style.display = 'none';
            if (newPassword !== confirmNewPassword) {
                errorDiv.textContent = 'New passwords do not match.';
                errorDiv.style.display = 'block';
                return;
            }
            if (newPassword.length < 6) {
                errorDiv.textContent = 'New password must be at least 6 characters.';
                errorDiv.style.display = 'block';
                return;
            }
            try {
                const apiBase = getAuthApiBase();
                const response = await fetch(`${apiBase}/api/change-password`, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    credentials: 'include',
                    body: JSON.stringify({ currentPassword, newPassword })
                });
                const data = await response.json();
                if (response.ok) {
                    successDiv.textContent = 'Password changed successfully!';
                    successDiv.style.display = 'block';
                    setTimeout(closeChangePassword, 1500);
                } else {
                    errorDiv.textContent = data.message || 'Failed to change password.';
                    errorDiv.style.display = 'block';
                }
            } catch (err) {
                errorDiv.textContent = 'Network error. Please try again.';
                errorDiv.style.display = 'block';
            }
        });

        // Live, pre-submission inline validation for the register form. Mirrors the
        // existing on-submit checks (which remain as the final gate) but surfaces
        // problems inline as the user types/blurs, before they click Register.
        function setupRegisterLiveValidation() {
            const usernameInput = document.getElementById('registerUsername');
            const emailInput = document.getElementById('registerEmail');
            const passwordInput = document.getElementById('registerPassword');
            const confirmInput = document.getElementById('confirmPassword');
            if (!usernameInput || !emailInput || !passwordInput || !confirmInput) return;

            const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            const USERNAME_RE = /^[a-zA-Z0-9]+$/;

            function setFieldError(input, errorId, message) {
                const el = document.getElementById(errorId);
                if (message) {
                    if (el) { el.textContent = message; el.style.display = 'block'; }
                    input.classList.add('input-invalid');
                    input.setAttribute('aria-invalid', 'true');
                } else {
                    if (el) { el.textContent = ''; el.style.display = 'none'; }
                    input.classList.remove('input-invalid');
                    input.removeAttribute('aria-invalid');
                }
            }

            // Each returns '' when valid (or empty), else the message to show.
            // Empty fields are NOT flagged here — that's the submit-time "required" job.
            function usernameMessage() {
                const v = usernameInput.value;
                if (v === '') return '';
                if (v.length < 3 || v.length > 20) return 'Username must be between 3 and 20 characters';
                if (!USERNAME_RE.test(v)) return 'Username can only contain letters and numbers';
                return '';
            }
            function emailMessage() {
                const v = emailInput.value.trim();
                if (v === '') return '';
                return EMAIL_RE.test(v) ? '' : 'Please enter a valid email address';
            }
            function passwordMessage() {
                const v = passwordInput.value;
                if (v === '') return '';
                return v.length >= 6 ? '' : 'Password must be at least 6 characters';
            }
            function confirmMessage() {
                const v = confirmInput.value;
                if (v === '') return '';
                return v === passwordInput.value ? '' : 'Passwords do not match';
            }

            // Show the error on blur; on input, only update when an error is already
            // shown or the field is now valid (live-good: don't nag mid-typing).
            function wire(input, errorId, messageFn) {
                input.addEventListener('blur', function () {
                    setFieldError(input, errorId, messageFn());
                });
                input.addEventListener('input', function () {
                    const el = document.getElementById(errorId);
                    const errorShown = el && el.style.display !== 'none';
                    const msg = messageFn();
                    if (errorShown || !msg) setFieldError(input, errorId, msg);
                });
            }

            wire(usernameInput, 'registerUsernameError', usernameMessage);
            wire(emailInput, 'registerEmailError', emailMessage);
            wire(passwordInput, 'registerPasswordError', passwordMessage);

            // Confirm password: mismatch feedback is shown live on input (expected for a
            // confirm field) and on blur.
            confirmInput.addEventListener('input', function () {
                setFieldError(confirmInput, 'confirmPasswordError', confirmMessage());
            });
            confirmInput.addEventListener('blur', function () {
                setFieldError(confirmInput, 'confirmPasswordError', confirmMessage());
            });
            // When the password changes, re-check the confirm match (clear/update live).
            passwordInput.addEventListener('input', function () {
                if (confirmInput.value !== '') {
                    setFieldError(confirmInput, 'confirmPasswordError', confirmMessage());
                }
            });

            // Exposed so switchTab can clear stale inline errors on tab changes.
            window.clearRegisterFieldErrors = function () {
                setFieldError(usernameInput, 'registerUsernameError', '');
                setFieldError(emailInput, 'registerEmailError', '');
                setFieldError(passwordInput, 'registerPasswordError', '');
                setFieldError(confirmInput, 'confirmPasswordError', '');
            };
        }

        document.addEventListener('DOMContentLoaded', async function() {
            // Clear legacy tokens that might cause conflicts
            if (localStorage.getItem('authToken') && !localStorage.getItem('accessToken')) {
                localStorage.removeItem('authToken');
            }
            
            // Wait for AuthManager to be loaded
            let authLoadAttempts = 0;
            while (!window.auth && authLoadAttempts < 50) {
                await new Promise(resolve => setTimeout(resolve, 100));
                authLoadAttempts++;
            }
            
            if (!window.auth) {
                console.error('AuthManager failed to load');
                // Show auth forms as fallback
                document.getElementById('authSection').style.display = 'block';
                document.getElementById('loggedInSection').style.display = 'none';
                return;
            }
            
            // Add a small delay to ensure any existing authentication state is properly established
            await new Promise(resolve => setTimeout(resolve, 500));
            
            // FIRST: Completely isolate our forms from global interference
            const authForms = ['loginForm', 'registerForm', 'forgotPasswordForm'];
            authForms.forEach(formId => {
                const form = document.getElementById(formId);
                if (form) {
                    const newForm = form.cloneNode(true);
                    form.parentNode.replaceChild(newForm, form);
                }
            });
            // After replacement, re-select the new forms
            const loginForm = document.getElementById('loginForm');
            const registerForm = document.getElementById('registerForm');
            const forgotForm = document.getElementById('forgotPasswordForm');
            
            // Bind our clean form events (after cloning and re-selecting)
            if (loginForm) {
                loginForm.addEventListener('submit', function(event) {
                    event.preventDefault();
                    event.stopPropagation();
                    event.stopImmediatePropagation();
                    handleLogin(event);
                    return false;
                }, true);
                loginForm.setAttribute('onsubmit', 'return false;');
            }
            if (registerForm) {
                registerForm.addEventListener('submit', function(event) {
                    console.log('registerForm submit event fired', event);
                    event.preventDefault();
                    event.stopPropagation();
                    event.stopImmediatePropagation();
                    handleRegister(event);
                    return false;
                }, true);
                registerForm.setAttribute('onsubmit', 'return false;');
            }
            if (forgotForm) {
                forgotForm.addEventListener('submit', function(event) {
                    event.preventDefault();
                    event.stopPropagation();
                    event.stopImmediatePropagation();
                    handleForgotPassword(event);
                    return false;
                }, true);
                forgotForm.setAttribute('onsubmit', 'return false;');
            }
            // Bind CAPTCHA refresh button
            const refreshBtn = document.getElementById('refreshCaptcha');
            if (refreshBtn) {
                refreshBtn.addEventListener('click', refreshCaptcha);
            }
            // Safety: Ensure captcha field isn't required if hidden
            const captchaAnswerInput = document.getElementById('captchaAnswer');
            if (captchaAnswerInput && (captchaAnswerInput.style.display === 'none' || captchaAnswerInput.offsetParent === null)) {
                captchaAnswerInput.removeAttribute('required');
            }
            // Source the sitekey + apply test-mode + render — in a NON-BLOCKING IIFE
            // so these network fetches (generate-captcha, client-config) do NOT delay
            // attachment of the tab/forgot listeners below (awaiting inline left those
            // click handlers unbound while the page was already interactive, breaking
            // the register-tab and forgot-password flows). initTurnstile is idempotent
            // and loadCaptcha re-renders on register-tab open, so deferring is safe.
            (async () => {
            // Source the Turnstile sitekey from the backend
            // (process.env.TURNSTILE_SITEKEY) instead of build-time Jekyll config,
            // so there is a single source of truth. Runs before the test-captcha
            // override below so test mode can still swap in the always-pass key.
            try {
                const cfgBase = getAuthApiBase();
                const cfgRes = await fetch(`${cfgBase}/api/generate-captcha`, { credentials: 'include' });
                if (cfgRes.ok) {
                    const cfgData = await cfgRes.json();
                    if (cfgData && cfgData.turnstile && cfgData.turnstile.siteKey) {
                        window.TURNSTILE_SITEKEY = cfgData.turnstile.siteKey;
                    }
                }
            } catch (_) { /* no sitekey -> math captcha fallback */ }

            // Initialize Turnstile if a sitekey is present (set above from the
            // backend; the test-captcha override may swap in the always-pass key).
            await maybeEnableTestCaptcha();
            initTurnstile();
            })();

            // Bind auth tab buttons
            const authTabs = document.querySelectorAll('.auth-tab');
            authTabs.forEach(tab => {
                tab.addEventListener('click', function() {
                    switchTab(this.getAttribute('data-tab'));
                });
            });
            // Bind password visibility toggles for login/register forms
            document.querySelectorAll('.user-auth-container .toggle-visibility').forEach(btn => {
                btn.addEventListener('click', () => {
                    const targetId = btn.getAttribute('data-target');
                    const input = document.getElementById(targetId);
                    if (!input) return;
                    const showing = input.type === 'text';
                    input.type = showing ? 'password' : 'text';
                    btn.textContent = showing ? '👁' : '🙈';
                    btn.setAttribute('aria-label', (showing ? 'Show' : 'Hide') + ' password');
                });
            });
            
            // Bind forgot password and back to login links
            const forgotPasswordLink = document.getElementById('forgotPasswordLink');
            if (forgotPasswordLink) {
                forgotPasswordLink.addEventListener('click', function(e) {
                    e.preventDefault();
                    showForgotPassword();
                });
            }
            
            const backToLoginLink = document.getElementById('backToLoginLink');
            if (backToLoginLink) {
                backToLoginLink.addEventListener('click', function(e) {
                    e.preventDefault();
                    showLogin();
                });
            }
            
            // Bind close change password button
            const closeChangePasswordBtn = document.getElementById('closeChangePasswordBtn');
            if (closeChangePasswordBtn) {
                closeChangePasswordBtn.addEventListener('click', closeChangePassword);
            }
            
            // Bind delete account confirmation modal buttons
            const deleteConfirmBtn = document.getElementById('deleteConfirmBtn');
            const deleteCancelBtn = document.getElementById('deleteCancelBtn');
            if (deleteConfirmBtn) {
                deleteConfirmBtn.addEventListener('click', confirmDeleteAccount);
            }
            if (deleteCancelBtn) {
                deleteCancelBtn.addEventListener('click', cancelDeleteAccount);
            }
            
            // Bind resend verification button
            const resendVerificationBtn = document.getElementById('resendVerificationBtn');
            if (resendVerificationBtn) {
                resendVerificationBtn.addEventListener('click', handleResendVerification);
            }
            const registerResendVerificationBtn = document.getElementById('registerResendVerificationBtn');
            if (registerResendVerificationBtn) {
                registerResendVerificationBtn.addEventListener('click', handleResendVerification);
            }

            // Live, pre-submission inline validation for the register form.
            setupRegisterLiveValidation();

            // Check authentication status with retry logic
            let authData = null;
            let authAttempts = 0;
            const maxAuthAttempts = 3;
            
            while (authAttempts < maxAuthAttempts) {
                try {
                    // Use the new ensureAuthenticated method for better reliability
                    authData = await window.auth.ensureAuthenticated(2, 1000);
                    console.log('Auth data:', authData);
                    break; // Success, exit the retry loop
                } catch (error) {
                    console.warn(`Auth check attempt ${authAttempts + 1} failed:`, error);
                    authAttempts++;
                    if (authAttempts < maxAuthAttempts) {
                        await new Promise(resolve => setTimeout(resolve, 1000)); // Wait 1 second before retry
                    }
                }
            }
            
            if (authData && (authData.role === 'user' || authData.role === 'admin')) {
                // User is logged in, show user info
                document.getElementById('authSection').style.display = 'none';
                document.getElementById('loggedInSection').style.display = 'block';
                
                document.getElementById('userInfo').innerHTML = `
                    <strong>Username:</strong> ${authData.username}<br>
                    <strong>Email:</strong> ${authData.email || 'N/A'}<br>
                `;
                
                // Bind account management buttons
                const changePasswordBtn = document.getElementById('changePasswordBtn');
                const logoutBtn = document.getElementById('logoutBtn');
                const exportDataBtn = document.getElementById('exportDataBtn');
                const deleteAccountBtn = document.getElementById('deleteAccountBtn');
                
                if (changePasswordBtn) {
                    changePasswordBtn.addEventListener('click', showChangePassword);
                }
                if (logoutBtn) {
                    logoutBtn.addEventListener('click', () => window.auth.logout('/login/'));
                }
                if (exportDataBtn) {
                    exportDataBtn.addEventListener('click', handleExportData);
                }
                if (deleteAccountBtn) {
                    deleteAccountBtn.addEventListener('click', handleDeleteAccount);
                }
                
                // Add a delay before handling redirects to ensure authentication is fully established
                await new Promise(resolve => setTimeout(resolve, 1000));
                
                // Handle redirect or popup close
                if (window.opener) {
                    window.opener.postMessage({ 
                        type: 'user-login-success', 
                        user: { 
                            username: authData.username, 
                            email: authData.email,
                            role: authData.role
                        } 
                    }, '*');
                    window.close();
                }
                
                const params = new URLSearchParams(window.location.search);
                const redirectUrl = params.get('redirect');
                if (redirectUrl) {
                    console.log('Redirecting to:', redirectUrl);
                    window.location.href = redirectUrl;
                }
            } else {
                // Not logged in, show auth forms
                document.getElementById('authSection').style.display = 'block';
                document.getElementById('loggedInSection').style.display = 'none';
                
                // Load CAPTCHA for registration form
                loadCaptcha();
            }
        });
    </script>