{% block PHPComponents %}
    <div class="p42-header">
        <div class="p42-brand-logo-wrap">
            <img src="/wp-content/plugins/edidev-ai-assistant-for-perfection42/assets/images/plugin-brand-logo.svg"
                 alt="Perfection42 Logo" class="p42-brand-logo"/>
        </div>
        <h1 class="perfection-page-title">{{ page_title_label }}</h1>
    </div>
    <div class="wrap">
        <div class="p42-messages" aria-live="polite" aria-atomic="true">
            {% if success_notices is defined and success_notices is not empty %}
                {% for msg in success_notices %}
                    <div class="p42-message p42-message--success" role="status">{{ msg }}</div>
                {% endfor %}
            {% endif %}
            {% if error_notices is defined and error_notices is not empty %}
                {% for msg in error_notices %}
                    <div class="p42-message p42-message--error" role="alert">{{ msg }}</div>
                {% endfor %}
            {% endif %}
        </div>

        <div class="general-content-tab single-form">
            <div class="single-form-container">
                {# Account Panel (visible when connected) #}
                <section id="p42-account-panel" class="p42-account-panel"
                         style="{% if (username is not empty) and (password is not empty) %}display:block;{% else %}display:none;{% endif %}">
                    <h2 class="mt-0">{{ account_title_label }}</h2>
                    <div id="p42-account-body" class="p42-account-body" aria-live="polite" aria-atomic="true">
                        <div class="p42-account-loading">{{ loading_account_label }}</div>
                        <div id="p42-account-details" class="p42-account-details" style="display:none;"></div>
                    </div>
                    <div class="p42-account-actions">
                        {# Primary CTA: Open My Projects on Perfection42 Platform #}
                        <a
                                href="https://nodes.perfection42.com/projects"
                                id="p42-open-projects"
                                class="button button-primary mr-3"
                                target="_blank"
                                rel="noopener noreferrer"
                                aria-label="{{ my_projects_aria_label }}">
                            <span class="dashicons dashicons-portfolio" aria-hidden="true"></span>
                            <span>{{ my_projects_label }}</span>
                        </a>

                        {# Secondary CTA: Open My Profile on Perfection42 Platform #}
                        <a
                                href="https://nodes.perfection42.com/profile"
                                id="p42-open-profile"
                                class="button mr-3"
                                target="_blank"
                                rel="noopener noreferrer"
                                aria-label="{{ my_profile_aria_label }}">
                            <span class="dashicons dashicons-admin-users" aria-hidden="true"></span>
                            <span>{{ my_profile_label }}</span>
                        </a>

                        {# Existing account actions #}
                        <button type="button" id="p42-check-status"
                                class="button mr-3">{{ check_status_label }}</button>
                        <button type="button" id="p42-panel-sign-out"
                                class="button p42-button-danger">{{ sign_out_label }}</button>
                    </div>
                </section>

                {# Sign In form (default view when not connected) #}
                <form id="p42-sign-in-form" class="p42-auth-form" method="post" action="" novalidate="novalidate"
                      style="{% if show_signup_form %}display:none;{% else %}{% if (username is not empty) and (password is not empty) %}display:none;{% else %}display:block;{% endif %}{% endif %}">
                    <h2 class="mt-0">{{ title_login_panel }}</h2>
                    <table class="form-table" role="presentation">
                        <tbody>
                        <tr>
                            <th scope="row"><label for="username">{{ email_label }}</label></th>
                            <td>
                                <input name="username" type="text" id="username"
                                       value="{{ username }}"
                                       placeholder="name@example.com"
                                       class="regular-text"/>
                                {% if username is not empty and password is not empty %}
                                    <p class="description connection-status">{{ connected_as_label }}
                                        <strong>{{ username }}</strong></p>
                                {% endif %}
                            </td>
                        </tr>
                        <tr>
                            <th scope="row"><label for="password">{{ password_label }}</label></th>
                            <td class="td-password">
                                <div class="p42-password-wrap">
                                    <input name="password" type="password" id="password"
                                           aria-describedby="tagline-description"
                                           value="{{ password }}"
                                           class="regular-text p42-password-input">
                                    <button type="button"
                                            class="p42-toggle-password p42-eye-button"
                                            aria-controls="password"
                                            aria-pressed="false"
                                            aria-label="{{ show_password_label }}">
                                        <span class="dashicons dashicons-visibility" aria-hidden="true"></span>
                                        <span class="screen-reader-text">{{ show_password_label }}</span>
                                    </button>
                                </div>

                                <a class="p42-forgot-link" href="https://nodes.perfection42.com/auth/forgot-password"
                                   target="_blank" rel="noopener noreferrer">{{ forgot_password_label }}</a>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                    <div class="submit">
                        {{ nonce_field|raw }}
                        <input type="submit" class="button button-primary mr-3" value="{{ sign_in_label }}"/>
                        <input type="hidden" name="submitted-action" value="sign-in">
                        <span class="p42-inline-cta p42-right-cta">
                                {{ no_account_inline_label|default("Don’t have an account?") }}
                                <a href="#" id="p42-show-sign-up">{{ create_one_label|default('Create one') }}</a>
                            </span>
                    </div>

                    {# Inline CTA above replaces the old below-form switch on the Sign In panel #}
                </form>

                {# Sign Up form (hidden by default; shown when user clicks Sign up) #}
                {% if (username is empty) or (password is empty) %}
                    <form id="p42-sign-up-form" class="p42-auth-form" method="post" action="" novalidate="novalidate"
                          style="{% if show_signup_form %}display:block;{% else %}display:none;{% endif %}">
                        <h3 class="mt-0">{{ title_signup_panel }}</h3>
                        <table class="form-table" role="presentation">
                            <tbody>
                            <tr>
                                <th scope="row"><label for="signup_name">{{ name_label }}<span class="p42-required"
                                                                                               aria-hidden="true">*</span></label>
                                </th>
                                <td><input name="signup_name" type="text" id="signup_name"
                                           value=""
                                           class="regular-text"
                                           required aria-required="true" autocomplete="name"/></td>
                            </tr>
                            <tr>
                                <th scope="row"><label for="signup_email">{{ email_label }}<span class="p42-required"
                                                                                                 aria-hidden="true">*</span></label>
                                </th>
                                <td>
                                    <div class="p42-email-otp-row">
                                        <input name="signup_email" type="email" id="signup_email"
                                               value=""
                                               class="regular-text"
                                               required aria-required="true" autocomplete="email"/>
                                    </div>

                                </td>
                            </tr>
                            <tr>
                                <th scope="row"><label for="signup_password">{{ password_label }}<span
                                                class="p42-required" aria-hidden="true">*</span></label></th>
                                <td class="td-password">
                                    <div class="p42-password-wrap">
                                        <input name="signup_password" type="password" id="signup_password"
                                               value=""
                                               class="regular-text p42-password-input"
                                               required aria-required="true" autocomplete="new-password">
                                        <button type="button"
                                                class="p42-toggle-password p42-eye-button"
                                                aria-controls="signup_password"
                                                aria-pressed="false"
                                                aria-label="{{ show_password_label }}">
                                            <span class="dashicons dashicons-visibility" aria-hidden="true"></span>
                                            <span class="screen-reader-text">{{ show_password_label }}</span>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <th></th>
                                <td>
                                    <div>
                                        <button type="button" id="p42-send-otp" class="button hidden" style="margin-left:8px;">
                                            {{ otp_send_code_label|default('Send code') }}
                                        </button>
{#                                        <span id="p42-email-verified-badge" class="p42-badge p42-badge--success" style="display:none;margin-left:8px;">{{ otp_verified_badge|default('Verified') }}</span>#}
                                    </div>
                                    <div id="p42-otp-wrap" class="p42-otp-wrap" style="display:none;margin-top:8px;">
                                        <label for="signup_otp" class="screen-reader-text">{{ otp_code_label|default('Verification code') }}</label>
                                        <input type="text" id="signup_otp" inputmode="numeric" pattern="[0-9]*" maxlength="6" class="regular-text" placeholder="{{ otp_code_placeholder|default('6-digit code') }}" style="width:140px;" />
                                        <button type="button" id="p42-verify-otp" class="button button-primary" style="margin-left:8px;">{{ otp_verify_code_label|default('Verify') }}</button>
                                        <button type="button" id="p42-resend-otp" class="button" style="margin-left:8px;" disabled>{{ otp_resend_code_label|default('Resend') }}</button>
                                        <a href="#" id="p42-change-email" style="margin-left:8px;">{{ otp_change_email_label|default('Change email') }}</a>
                                        <p id="p42-otp-help" class="description" aria-live="polite" style="margin-top:6px;">{{ otp_sent_help|default('We sent a 6-digit code to your email. Enter it above within 5 minutes.') }}</p>
                                    </div>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                        <p class="submit mt-0">
                            {{ nonce_field|raw }}
                            <input type="hidden" name="email_verified_token" id="email_verified_token" value="" />
                            <input type="submit" class="button button-primary mr-3" value="{{ signup_label }}"/>
                            <input type="hidden" name="submitted-action" value="save-signup-tab">
                        </p>
                        <p class="p42-form-switch">
                            {{ have_account_label|default('Already have an account?') }}
                            <a href="#" id="p42-show-sign-in">{{ signin_link_label|default('Sign in') }}</a>
                        </p>
                    </form>
                {% endif %}
            </div>

        </div>

        <div class="p42-settings-disclosure" style="margin-top:16px;color:#444;max-width:960px;">
            {{ disclosure_paragraph|raw }}
        </div>
    </div>
{% endblock %}


<script>
    jQuery(document).ready(function ($) {
        // Switch between Sign In and Sign Up (only when not connected)
        $(document).on('click', '#p42-show-sign-up', function (e) {
            e.preventDefault();
            $('#p42-sign-in-form').hide();
            $('#p42-sign-up-form').show();
        });
        $(document).on('click', '#p42-show-sign-in', function (e) {
            e.preventDefault();
            $('#p42-sign-up-form').hide();
            $('#p42-sign-in-form').show();
        });

        // Password visibility toggle (icon button inside input)
        $(document).on('click', '.p42-toggle-password', function () {
            const $btn = $(this);
            const inputId = $btn.attr('aria-controls');
            const $input = $('#' + inputId);
            const isText = $input.attr('type') === 'text';
            $input.attr('type', isText ? 'password' : 'text');
            $btn.attr('aria-pressed', (!isText).toString());
            // swap dashicon and aria-label
            const $icon = $btn.find('.dashicons');
            if (isText) {
                $icon.removeClass('dashicons-hidden').addClass('dashicons-visibility');
                $btn.attr('aria-label', '{{ show_password_label }}');
                $btn.find('.screen-reader-text').text('{{ show_password_label }}');
            } else {
                $icon.removeClass('dashicons-visibility').addClass('dashicons-hidden');
                $btn.attr('aria-label', '{{ hide_password_label }}');
                $btn.find('.screen-reader-text').text('{{ hide_password_label }}');
            }
        });

        // ----------------------
        // Client-side validation
        // ----------------------
        function trimVal($el){ return ($el.val() || '').toString().trim(); }

        function isEmailLike(v){
            if (!v) return false;
            if (v.indexOf(' ') !== -1) return false;
            const at = v.indexOf('@');
            if (at <= 0) return false;
            const local = v.substring(0, at);
            const domain = v.substring(at + 1);
            if (!domain || domain.indexOf('.') === -1) return false;
            const lastDot = domain.lastIndexOf('.');
            if (lastDot < 1 || (domain.length - lastDot - 1) < 2) return false;
            return /^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(v);
        }

        function getErrorContainer($input){
            // Insert error paragraph just after the input's parent td
            const $td = $input.closest('td');
            let $err = $td.find('.p42-inline-error[aria-live]');
            if ($err.length === 0){
                $err = $('<p class="p42-inline-error" role="alert" aria-live="polite"></p>');
                $td.append($err);
            }
            return $err;
        }

        function showFieldError($input, message){
            const $err = getErrorContainer($input);
            $err.text(message).show();
            $input.attr('aria-invalid', 'true');
            // Link via aria-describedby
            if (!$input.attr('aria-describedby')){
                const id = $input.attr('id') + '-error';
                $err.attr('id', id);
                $input.attr('aria-describedby', id);
            }
        }

        function clearFieldError($input){
            const $td = $input.closest('td');
            const $err = $td.find('.p42-inline-error');
            if ($err.length){ $err.text('').hide(); }
            $input.removeAttr('aria-invalid');
            // Do not remove aria-describedby id to keep stable; just hide message.
        }

        function validateSignUp(){
            const $name = $('#signup_name');
            const $email = $('#signup_email');
            const $pass = $('#signup_password');
            let firstInvalid = null;

            clearFieldError($name); clearFieldError($email); clearFieldError($pass);

            const nameVal = trimVal($name);
            if (!nameVal || nameVal.length < 2){
                showFieldError($name, '{{ msg_required_name }}');
                firstInvalid = firstInvalid || $name;
            }

            const emailVal = trimVal($email);
            if (!emailVal){
                showFieldError($email, '{{ msg_required_email }}');
                firstInvalid = firstInvalid || $email;
            } else if (!isEmailLike(emailVal)){
                showFieldError($email, '{{ msg_invalid_email }}');
                firstInvalid = firstInvalid || $email;
            }

            const passVal = trimVal($pass);
            if (!passVal){
                showFieldError($pass, '{{ msg_required_password }}');
                firstInvalid = firstInvalid || $pass;
            } else if (passVal.length < 8){
                showFieldError($pass, '{{ msg_min_password }}');
                firstInvalid = firstInvalid || $pass;
            }

            return { valid: !firstInvalid, firstInvalid: firstInvalid };
        }

        function validateSignIn(){
            const $email = $('#username');
            const $pass = $('#password');
            let firstInvalid = null;

            clearFieldError($email); clearFieldError($pass);

            const emailVal = trimVal($email);
            if (!emailVal){
                showFieldError($email, '{{ msg_required_email }}');
                firstInvalid = firstInvalid || $email;
            } else if (!isEmailLike(emailVal)){
                showFieldError($email, '{{ msg_invalid_email }}');
                firstInvalid = firstInvalid || $email;
            }

            const passVal = trimVal($pass);
            if (!passVal){
                showFieldError($pass, '{{ msg_required_password }}');
                firstInvalid = firstInvalid || $pass;
            }

            return { valid: !firstInvalid, firstInvalid: firstInvalid };
        }

        // Submit handlers
        $(document).on('submit', '#p42-sign-up-form', function(e){
            try {
                const res = validateSignUp();
                if (!res.valid){
                    e.preventDefault();
                    if (res.firstInvalid && res.firstInvalid.length){ res.firstInvalid.focus(); }
                    return;
                }
                // Require verified token before allowing final submit
                const token = $('#email_verified_token').val();
                if (!token) {
                    e.preventDefault();
                    $('#p42-otp-wrap').show();
                    $('#signup_email').prop('disabled', true);
                    const sendCode = $('#p42-send-otp');
                    sendCode.trigger('click');
                    {#const $email = $('#signup_email');#}
                    {#showFieldError($email, '{{ otp_require_verify_msg|default("Please verify your email by entering the OTP code we sent.") }}');#}
                    {#// reveal OTP area if hidden#}
                    {#$('#p42-otp-wrap').show();#}
                    {#$('#signup_otp').focus();#}
                    return;
                }
            } catch(err){
                // Fail-open to avoid blocking
                console && console.warn && console.warn('Validation error', err);
            }
        });
        $(document).on('submit', '#p42-sign-in-form', function(e){
            try {
                const res = validateSignIn();
                if (!res.valid){
                    e.preventDefault();
                    if (res.firstInvalid && res.firstInvalid.length){ res.firstInvalid.focus(); }
                }
            } catch(err){
                console && console.warn && console.warn('Validation error', err);
            }
        });

        // ----------------------
        // OTP Flow (AJAX)
        // ----------------------
        let p42OtpCountdownTimer = null;
        function p42StartCountdown(seconds){
            const $help = $('#p42-otp-help');
            let remaining = parseInt(seconds || 0, 10);
            if (p42OtpCountdownTimer){ clearInterval(p42OtpCountdownTimer); }
            if (!remaining || remaining <= 0){ return; }
            p42OtpCountdownTimer = setInterval(function(){
                remaining -= 1;
                if (remaining <= 0){
                    clearInterval(p42OtpCountdownTimer);
                    $('#p42-resend-otp').prop('disabled', false);
                    $help.text('{{ otp_expired_help|default("Your code may have expired. You can request a new code.") }}');
                } else {
                    $help.text('{{ otp_countdown_help_prefix|default("Enter the code within") }} ' + remaining + ' {{ otp_countdown_help_suffix|default("seconds.") }}');
                }
            }, 1000);
        }
        function p42ResetOtpUI(){
            $('#p42-otp-wrap').hide();
            $('#signup_otp').val('');
            $('#p42-resend-otp').prop('disabled', true);
            // $('#p42-email-verified-badge').hide();
            $('#email_verified_token').val('');
            if (p42OtpCountdownTimer){ clearInterval(p42OtpCountdownTimer); }
        }
        function p42MarkVerified(token){
            $('#email_verified_token').val(token || '');
            // $('#p42-email-verified-badge').show();
            $('#p42-otp-wrap').hide();
        }

        // Send code
        $(document).on('click', '#p42-send-otp', function(){
            const $email = $('#signup_email');
            clearFieldError($email);
            const emailVal = trimVal($email);
            if (!emailVal){ showFieldError($email, '{{ msg_required_email }}'); return; }
            if (!isEmailLike(emailVal)){ showFieldError($email, '{{ msg_invalid_email }}'); return; }

            const $btn = $(this);
            $btn.prop('disabled', true).text(P42Settings?.i18n?.sendingCode || '{{ otp_sending_label|default("Sending…") }}');
            $.post(P42Settings.ajaxUrl, {
                action: 'p42_send_signup_otp',
                nonce: P42Settings.nonce,
                email: emailVal
            }).done(function(resp){
                if (resp && resp.success){
                    $('#p42-otp-wrap').show();
                    $('#signup_email').prop('disabled', true);
                    $('#p42-otp-help').text(P42Settings?.i18n?.otpSent || '{{ otp_sent_ok|default("We sent a 6-digit code to your email.") }}');
                    $('#p42-resend-otp').prop('disabled', true);
                    p42StartCountdown(resp.data && resp.data.ttl ? resp.data.ttl : 300);
                    $('#signup_otp').focus();
                } else {
                    const msg = (resp && resp.data && resp.data.messages && resp.data.messages[0]) || P42Settings?.i18n?.genericErr || 'Error';
                    showFieldError($email, msg);
                }
            }).fail(function(){
                showFieldError($email, P42Settings?.i18n?.genericErr || 'Error');
            }).always(function(){
                $btn.prop('disabled', false).text('{{ otp_send_code_label|default("Send code") }}');
            });
        });

        // Verify code
        $(document).on('click', '#p42-verify-otp', function(){
            const $email = $('#signup_email');
            const $otp = $('#signup_otp');
            clearFieldError($otp);
            const code = trimVal($otp);
            if (!code || code.length < 6){
                showFieldError($otp, '{{ otp_code_required|default("Please enter the 6-digit code.") }}');
                return;
            }
            const $btn = $(this);
            $btn.prop('disabled', true).text(P42Settings?.i18n?.verifying || '{{ otp_verifying_label|default("Verifying…") }}');
            $.post(P42Settings.ajaxUrl, {
                action: 'p42_verify_signup_otp',
                nonce: P42Settings.nonce,
                email: trimVal($email),
                otp: code
            }).done(function(resp){
                if (resp && resp.success && resp.data && resp.data.token){
                    p42MarkVerified(resp.data.token);
                    $('#p42-otp-help').text(P42Settings?.i18n?.otpVerified || '{{ otp_verified_ok|default("Email verified.") }}');
                    $('#p42-sign-up-form').trigger('submit')
                } else {
                    const msg = (resp && resp.data && resp.data.messages && resp.data.messages[0]) || P42Settings?.i18n?.genericErr || 'Error';
                    showFieldError($otp, msg);
                }
            }).fail(function(){
                showFieldError($otp, P42Settings?.i18n?.genericErr || 'Error');
            }).always(function(){
                $btn.prop('disabled', false).text('{{ otp_verify_code_label|default("Verify") }}');
            });
        });

        // Resend code
        $(document).on('click', '#p42-resend-otp', function(){
            $('#p42-send-otp').trigger('click');
        });

        // Change email
        $(document).on('click', '#p42-change-email', function(e){
            e.preventDefault();
            $('#signup_email').prop('disabled', false).focus();
            p42ResetOtpUI();
        });

        // Clear verification token when email changes
        $(document).on('input', '#signup_email', function(){
            p42ResetOtpUI();
        });

        // Blur field validation
        $(document).on('blur', '#signup_name', function(){
            const $el = $(this);
            clearFieldError($el);
            const v = trimVal($el);
            if (!v || v.length < 2){ showFieldError($el, '{{ msg_required_name }}'); }
        });
        $(document).on('blur', '#signup_email', function(){
            const $el = $(this);
            clearFieldError($el);
            const v = trimVal($el);
            if (!v){ showFieldError($el, '{{ msg_required_email }}'); }
            else if (!isEmailLike(v)){ showFieldError($el, '{{ msg_invalid_email }}'); }
        });
        $(document).on('blur', '#signup_password', function(){
            const $el = $(this);
            clearFieldError($el);
            const v = trimVal($el);
            if (!v){ showFieldError($el, '{{ msg_required_password }}'); }
            else if (v.length < 8){ showFieldError($el, '{{ msg_min_password }}'); }
        });
        $(document).on('blur', '#username', function(){
            const $el = $(this);
            clearFieldError($el);
            const v = trimVal($el);
            if (!v){ showFieldError($el, '{{ msg_required_email }}'); }
            else if (!isEmailLike(v)){ showFieldError($el, '{{ msg_invalid_email }}'); }
        });
        $(document).on('blur', '#password', function(){
            const $el = $(this);
            clearFieldError($el);
            const v = trimVal($el);
            if (!v){ showFieldError($el, '{{ msg_required_password }}'); }
        });

    });
</script>

<style>
    .p42-header {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
        margin: 8px 0 16px;
    }

    .p42-brand-logo-wrap {
        margin: 0;
    }

    .p42-brand-logo {
        height: 36px;
        width: auto;
    }

    .general-content-tab.single-form .single-form-container {
        max-width: 700px;
        background: #fff;
        padding: 16px 16px 8px;
        border: 1px solid #dcdcde;
        border-radius: 4px;
    }

    .td-password {
        display: flex;
        flex-direction: column;
    }

    .p42-password-wrap {
        position: relative;
        max-width: 400px;
    }

    .p42-password-input {
        padding-right: 40px;
    }

    .p42-eye-button {
        position: absolute;
        right: 8px;
        top: 50%;
        transform: translateY(-50%);
        background: transparent;
        border: 0;
        padding: 0;
        margin: 0;
        line-height: 1;
        cursor: pointer;
        color: #2271b1; /* WP primary */
    }

    .p42-eye-button:hover {
        color: #135e96;
    }

    .p42-eye-button:focus {
        outline: 2px solid #2271b1;
        outline-offset: 2px;
        border-radius: 2px;
    }

    .connection-status {
        margin-top: 6px;
        color: #666;
    }

    /* Forgot password link aligned with input's left edge */
    .td-password .p42-forgot-link {
        align-self: flex-start;
        margin: 6px 0 0 0;
        text-align: left;
    }

    .mt-0 {
        margin-top: 0px !important;
    }

    .p42-inline-error {
        margin-top: 8px;
        padding: 8px 10px;
        border-left: 4px solid #dc3232; /* WP error red */
        background: #fff;
    }

    /* Inline messages container and states */
    .p42-messages {
        margin: 0 0 16px;
        max-width: 700px;
    }

    .p42-message {
        padding: 10px 12px;
        background: #fff;
        border-left: 4px solid #72aee6; /* default info */
        margin-bottom: 8px;
    }

    .p42-message--success {
        border-left-color: #46b450;
    }

    .p42-message--error {
        border-left-color: #dc3232;
    }

    /* Loading state */
    .p42-auth-form.is-loading {
        opacity: 0.7;
        pointer-events: none;
    }

    /* Account panel */
    .p42-account-panel {
        max-width: 700px;
        background: #fff;
        padding: 16px 16px 12px;
        border: 1px solid #dcdcde;
        border-radius: 4px;
        margin-bottom: 16px;
    }

    .p42-account-body.is-loading {
        opacity: 0.7;
    }

    .p42-account-details {
        display: grid;
        grid-template-columns: 160px 1fr;
        gap: 8px 16px;
        margin: 8px 0 12px;
    }

    .p42-account-details .p42-k {
        color: #555;
    }

    .p42-account-details .p42-v {
        font-weight: 600;
    }

    .p42-account-actions {
        display: flex;
        gap: 8px;
    }

    /* Ensure Dashicons sit nicely centered next to labels in buttons */
    .p42-account-actions .button .dashicons,
    .p42-eye-button .dashicons {
        vertical-align: middle;
        line-height: 1;
    }

    /* Add a little space between icon and text for account action buttons */
    .p42-account-actions .button .dashicons {
        margin-right: 4px;
    }

    /* Submit row aligned and inline CTA on the right */
    .p42-auth-form .submit {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .p42-inline-cta {
        color: #50575e; /* WP gray */
        font-size: 13px;
    }

    .p42-inline-cta a {
        margin-left: 6px;
        text-decoration: none;
        color: #2271b1;
    }

    .p42-inline-cta a:hover {
        color: #135e96;
        text-decoration: underline;
    }

    .p42-right-cta {
        margin-left: auto;
    }

    /* Required field indicator */
    .p42-required {
        color: #d63638; /* WP error red (accessible) */
        margin-left: 4px;
        font-weight: 600;
    }

    /* Danger (destructive) button style for Sign Out */
    .button.p42-button-danger {
        background-color: #d63638; /* WP error red */
        border-color: #b32d2e;
        color: #fff;
    }

    .button.p42-button-danger:hover,
    .button.p42-button-danger:focus {
        background-color: #b32d2e;
        border-color: #8a2426;
        color: #fff;
    }

    .button.p42-button-danger:disabled,
    .button.p42-button-danger[disabled] {
        opacity: 0.6;
        cursor: default;
    }
</style>