/*
 * PESO authentication overhaul
 * -----------------------------
 * A compact, single-form treatment inspired by the supplied Job Finder
 * template.  The selectors intentionally target existing authentication
 * markup, so validation, redirects, and database workflows remain untouched.
 */
:root {
    --auth-green-950: #062c20;
    --auth-green-900: #074b35;
    --auth-green-700: #08794e;
    --auth-green-500: #1fa36c;
    --auth-gold: #e9b929;
    --auth-ink: #10251d;
    --auth-muted: #60766c;
    --auth-line: #d5e4dd;
    --auth-soft: #eef7f2;
    --auth-danger: #b42318;
    --auth-shadow: 0 26px 70px rgba(4, 50, 34, .15);
}

/* Login, two-factor, and recovery pages */
html:has(body.auth-page),
html:has(body[data-peso-page="verify-email"]),
html:has(body[data-peso-page="employer-set-password"]),
html:has(body[data-peso-page="jobseeker-register"]) { background: #f4f8f6 !important; }

body.auth-page,
body[data-peso-page="verify-email"],
body[data-peso-page="employer-set-password"],
body[data-peso-page="jobseeker-register"] {
    min-height: 100vh !important;
    margin: 0 !important;
    color: var(--auth-ink) !important;
    background:
        linear-gradient(118deg, rgba(246, 250, 248, .98) 0%, rgba(246, 250, 248, .92) 50%, rgba(236, 247, 241, .87) 100%),
        url('../images/dasma-city-hall-hero-bg-hq-v2.png') center / cover fixed !important;
    font-family: "Segoe UI Variable", "Segoe UI", Inter, Arial, sans-serif !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
}

body.auth-page::before,
body[data-peso-page="verify-email"]::before,
body[data-peso-page="employer-set-password"]::before,
body[data-peso-page="jobseeker-register"]::before {
    content: "";
    position: fixed;
    z-index: 0;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 78% 12%, rgba(233, 185, 41, .14), transparent 34%), radial-gradient(circle at 12% 92%, rgba(8, 121, 78, .12), transparent 34%);
}

body.auth-page .auth-background { display: none !important; }
body.auth-page .auth-skip-link { position: fixed; z-index: 30; }

body.auth-page .auth-toolbar {
    position: relative !important;
    z-index: 2;
    width: min(1240px, calc(100% - 48px)) !important;
    max-width: none !important;
    min-height: 68px !important;
    margin: 22px auto 0 !important;
    padding: 10px 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(8, 121, 78, .16) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
html body.peso-product-ui.auth-page .auth-toolbar .peso-language-picker--inline {
    position: static !important;
    inset: auto !important;
    margin: 0 12px 0 auto !important;
    order: 50 !important;
}
html body.peso-product-ui.auth-page .auth-toolbar .auth-back-link { position: static !important; inset: auto !important; order: 0 !important; }
html body.peso-product-ui.auth-page .auth-toolbar .auth-theme-toggle { position: static !important; margin: 0 !important; order: 60 !important; }
body.auth-page .peso-language-picker,
body[data-peso-page="verify-email"] .peso-language-picker,
body[data-peso-page="employer-set-password"] .peso-language-picker,
body[data-peso-page="jobseeker-register"] .peso-language-picker {
    position: fixed !important;
    z-index: 5 !important;
    top: 22px !important;
    right: 24px !important;
    bottom: auto !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
}
body.auth-page .peso-language-picker select,
body[data-peso-page="verify-email"] .peso-language-picker select,
body[data-peso-page="employer-set-password"] .peso-language-picker select,
body[data-peso-page="jobseeker-register"] .peso-language-picker select {
    min-height: 42px !important;
    min-width: 124px !important;
    padding: 0 32px 0 14px !important;
    border: 1px solid var(--auth-line) !important;
    border-radius: 999px !important;
    color: var(--auth-green-900) !important;
    background: rgba(255, 255, 255, .86) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
}

body.auth-page .auth-back-link,
body.auth-page .auth-theme-toggle {
    min-height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    border: 1px solid var(--auth-line) !important;
    border-radius: 999px !important;
    color: var(--auth-green-900) !important;
    background: rgba(255, 255, 255, .74) !important;
    box-shadow: 0 8px 22px rgba(3, 67, 46, .06) !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    transition: border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease !important;
}
body.auth-page .auth-back-link { padding: 0 17px !important; }
body.auth-page .auth-theme-toggle { padding: 0 16px !important; cursor: pointer !important; }
body.auth-page .auth-back-link:hover,
body.auth-page .auth-theme-toggle:hover { border-color: var(--auth-green-700) !important; color: var(--auth-green-700) !important; transform: translateY(-1px); box-shadow: 0 12px 28px rgba(3, 67, 46, .12) !important; }
/* Keep the gold brand cue, but use an accessible bronze on pale toolbar surfaces. */
body.auth-page .auth-back-link i { color: #8a6500 !important; }
html[data-theme="dark"] body.auth-page .auth-back-link i { color: #f4ca55 !important; }

body.auth-page .auth-shell {
    position: relative !important;
    z-index: 1;
    width: min(620px, calc(100% - 48px)) !important;
    max-width: 620px !important;
    margin: 48px auto 64px !important;
    padding: 0 !important;
}
html body.peso-product-ui.auth-page main.auth-shell,
html body.peso-product-ui.auth-page main.auth-shell.auth-shell--compact { width: min(620px, calc(100% - 48px)) !important; max-width: 620px !important; min-height: 0 !important; margin: 48px auto 64px !important; grid-template-columns: minmax(0, 1fr) !important; }
html body.peso-product-ui.auth-page .auth-form-panel {
    width: 100% !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid rgba(8, 121, 78, .18) !important;
    border-radius: 22px !important;
    background: rgba(255, 255, 255, .96) !important;
    min-height: 0 !important;
    box-shadow: var(--auth-shadow) !important;
}
html body.peso-product-ui.auth-page .auth-form-wrap { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 40px 46px 34px !important; }
body.auth-page .auth-login-identity,
body.auth-page .role-login-identity {
    width: max-content;
    max-width: 100%;
    margin: 0 auto 32px !important;
    display: flex !important;
    align-items: center !important;
    gap: 13px !important;
    color: var(--auth-ink) !important;
    text-decoration: none !important;
}
body.auth-page .auth-login-logo,
body.auth-page .role-login-logo {
    width: 62px !important;
    height: 62px !important;
    flex: 0 0 62px !important;
    display: grid !important;
    place-items: center !important;
    overflow: hidden !important;
    border: 3px solid #fff !important;
    border-radius: 50% !important;
    background: #fff !important;
    box-shadow: 0 6px 16px rgba(2, 54, 37, .16) !important;
}
body.auth-page .auth-login-logo img,
body.auth-page .role-login-logo img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
body.auth-page .auth-login-identity strong,
body.auth-page .role-login-identity strong { display: block !important; color: var(--auth-green-900) !important; font-size: 20px !important; font-weight: 850 !important; letter-spacing: -.02em !important; line-height: 1.1 !important; }
body.auth-page .auth-login-identity small,
body.auth-page .role-login-identity small { display: block !important; margin-top: 5px !important; color: var(--auth-muted) !important; font-size: 12px !important; font-weight: 700 !important; }
body.auth-page .role-login-identity > i { margin-left: 8px !important; color: var(--auth-gold) !important; font-size: 20px !important; }

body.auth-page .auth-form-heading { margin: 0 0 28px !important; text-align: center !important; }
body.auth-page .auth-form-heading h1 { margin: 0 0 8px !important; color: var(--auth-ink) !important; font-size: clamp(30px, 4vw, 38px) !important; font-weight: 850 !important; letter-spacing: -.045em !important; line-height: 1.08 !important; }
body.auth-page .auth-form-heading p { margin: 0 !important; color: var(--auth-muted) !important; font-size: 15px !important; line-height: 1.55 !important; }
body.auth-page .admin-form-marker { display: flex !important; justify-content: center !important; margin: 0 0 15px !important; }
body.auth-page .admin-secure-state { padding: 7px 12px !important; border: 1px solid rgba(233, 185, 41, .42) !important; border-radius: 999px !important; color: #8a6600 !important; background: #fff8dd !important; font-size: 11px !important; font-weight: 850 !important; letter-spacing: .08em !important; text-transform: uppercase !important; }

body.auth-page .auth-message {
    min-height: 50px !important;
    margin: 0 0 20px !important;
    padding: 13px 15px !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    border: 1px solid transparent !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
}
body.auth-page .auth-message i { margin-top: 2px !important; flex: 0 0 auto !important; }
body.auth-page .auth-message--error { border-color: #f2b8b5 !important; color: var(--auth-danger) !important; background: #fff2f1 !important; }
body.auth-page .auth-message--info { border-color: #c8ddf2 !important; color: #12598c !important; background: #eff7ff !important; }
body.auth-page .auth-message--success { border-color: #b7e0c8 !important; color: #17613a !important; background: #effaf3 !important; }

body.auth-page .auth-form { display: grid !important; gap: 20px !important; }
body.auth-page .auth-field { min-width: 0 !important; display: grid !important; gap: 8px !important; }
body.auth-page .auth-field label,
body.auth-page .auth-label-row label { color: var(--auth-ink) !important; font-size: 13px !important; font-weight: 800 !important; }
body.auth-page .auth-label-row { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; }
body.auth-page .auth-label-row a,
body.auth-page .auth-secondary-action a,
body.auth-page .admin-login-help a { color: var(--auth-green-700) !important; font-size: 13px !important; font-weight: 800 !important; text-decoration: none !important; }
body.auth-page .auth-label-row a:hover,
body.auth-page .auth-secondary-action a:hover,
body.auth-page .admin-login-help a:hover { color: var(--auth-green-900) !important; text-decoration: underline !important; }
body.auth-page .auth-input-wrap {
    min-height: 52px !important;
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
    padding: 0 15px !important;
    border: 1px solid var(--auth-line) !important;
    border-radius: 11px !important;
    background: #fff !important;
    transition: border-color .2s ease, box-shadow .2s ease !important;
}
body.auth-page .auth-input-wrap:focus-within { border-color: var(--auth-green-700) !important; box-shadow: 0 0 0 4px rgba(8, 121, 78, .13) !important; }
body.auth-page .auth-input-wrap > i { width: 18px !important; color: var(--auth-green-700) !important; text-align: center !important; }
body.auth-page .auth-input-wrap input {
    min-width: 0 !important;
    width: 100% !important;
    height: 50px !important;
    padding: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    color: var(--auth-ink) !important;
    background: transparent !important;
    font: inherit !important;
    font-size: 15px !important;
}
body.auth-page .auth-input-wrap input::placeholder { color: #8a9b94 !important; opacity: 1 !important; }
body.auth-page .auth-password-toggle { width: 32px !important; height: 32px !important; flex: 0 0 32px !important; border: 0 !important; color: #71867d !important; background: transparent !important; cursor: pointer !important; }
body.auth-page .auth-password-toggle:hover { color: var(--auth-green-700) !important; }
body.auth-page .auth-submit {
    width: 100% !important;
    min-height: 54px !important;
    margin-top: 2px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    border: 1px solid var(--auth-green-700) !important;
    border-radius: 11px !important;
    color: #fff !important;
    background: var(--auth-green-700) !important;
    box-shadow: 0 12px 24px rgba(8, 121, 78, .2) !important;
    font-size: 16px !important;
    font-weight: 850 !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: transform .2s ease, background .2s ease, box-shadow .2s ease !important;
}
body.auth-page .auth-submit:hover { background: var(--auth-green-900) !important; transform: translateY(-1px); box-shadow: 0 16px 28px rgba(8, 121, 78, .27) !important; }
body.auth-page .auth-submit:focus-visible,
body.auth-page .auth-back-link:focus-visible,
body.auth-page .auth-theme-toggle:focus-visible { outline: 3px solid rgba(233, 185, 41, .7) !important; outline-offset: 3px !important; }
body.auth-page .auth-secondary-action { margin-top: 25px !important; padding-top: 22px !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important; border-top: 1px solid #e5eee9 !important; color: var(--auth-muted) !important; font-size: 14px !important; text-align: center !important; }
body.auth-page .auth-login-security,
body.auth-page .auth-security-note { margin-top: 20px !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; color: #6b8278 !important; font-size: 12px !important; font-weight: 700 !important; }
body.auth-page .auth-login-security i,
body.auth-page .auth-security-note i { color: var(--auth-green-700) !important; }
body.auth-page .admin-login-help { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; color: var(--auth-muted) !important; font-size: 12px !important; }

/* Verification form */
body.auth-page .verification-shell { width: min(560px, calc(100% - 48px)) !important; }
body.auth-page .verification-icon,
body.auth-page .recovery-icon {
    width: 60px !important;
    height: 60px !important;
    margin: 0 auto 18px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 18px !important;
    color: var(--auth-green-700) !important;
    background: #e4f4eb !important;
    font-size: 24px !important;
}
body.auth-page .verification-form,
body.auth-page .recovery-form { display: grid !important; gap: 18px !important; }
body.auth-page .verification-code-wrap { display: grid !important; gap: 8px !important; }
body.auth-page .verification-code-wrap input { letter-spacing: .42em !important; text-align: center !important; font-size: 23px !important; font-weight: 850 !important; }
body.auth-page .verification-actions { display: grid !important; gap: 10px !important; }
body.auth-page .verification-link,
body.auth-page .verification-options a,
body.auth-page .recovery-card a { color: var(--auth-green-700) !important; font-weight: 800 !important; text-decoration: none !important; }
body.auth-page .verification-link:hover,
body.auth-page .verification-options a:hover,
body.auth-page .recovery-card a:hover { text-decoration: underline !important; }
body.auth-page .verification-options { display: flex !important; justify-content: center !important; flex-wrap: wrap !important; gap: 13px 20px !important; color: var(--auth-muted) !important; font-size: 13px !important; }

/* Forgot/reset pages */
body.auth-page .recovery-shell { position: relative !important; z-index: 1; width: min(560px, calc(100% - 48px)) !important; max-width: none !important; margin: 64px auto !important; padding: 0 !important; }
body.auth-page .recovery-card { padding: 42px 46px 36px !important; border: 1px solid rgba(8, 121, 78, .18) !important; border-radius: 22px !important; background: rgba(255, 255, 255, .96) !important; box-shadow: var(--auth-shadow) !important; }
body.auth-page .recovery-brand { width: max-content; margin: 0 auto 28px !important; display: flex !important; align-items: center !important; gap: 12px !important; color: var(--auth-green-900) !important; font-size: 20px !important; font-weight: 850 !important; text-decoration: none !important; }
body.auth-page .recovery-brand img { width: 58px !important; height: 58px !important; border: 3px solid #fff !important; border-radius: 50% !important; box-shadow: 0 6px 16px rgba(2, 54, 37, .16) !important; }
body.auth-page .recovery-heading { margin: 0 0 24px !important; text-align: center !important; }
body.auth-page .recovery-heading h1 { margin: 0 0 7px !important; font-size: 32px !important; font-weight: 850 !important; letter-spacing: -.04em !important; }
body.auth-page .recovery-heading p { margin: 0 !important; color: var(--auth-muted) !important; }

/* Registration: keep the existing four-step workflow, but put it in the same
   centered Job Finder card language. */
body[data-peso-page="jobseeker-register"] { display: block !important; padding: 0 24px 56px !important; }
body[data-peso-page="jobseeker-register"] .page { position: relative !important; z-index: 1; width: min(980px, 100%) !important; max-width: none !important; margin: 40px auto 0 !important; }
body[data-peso-page="jobseeker-register"] .card { overflow: hidden !important; border: 1px solid rgba(8, 121, 78, .18) !important; border-radius: 22px !important; background: rgba(255, 255, 255, .96) !important; box-shadow: var(--auth-shadow) !important; }
body[data-peso-page="jobseeker-register"] .card-header { padding: 34px 42px !important; text-align: left !important; background: linear-gradient(120deg, var(--auth-green-950), var(--auth-green-700)) !important; }
body[data-peso-page="jobseeker-register"] .card-header h1 { font-size: clamp(28px, 4vw, 40px) !important; letter-spacing: -.04em !important; }
body[data-peso-page="jobseeker-register"] .card-header p { font-size: 15px !important; }
body[data-peso-page="jobseeker-register"] .logo-container { justify-content: flex-start !important; margin-bottom: 20px !important; }
body[data-peso-page="jobseeker-register"] .card-body { padding: 34px 42px !important; }
body[data-peso-page="jobseeker-register"] .section { margin-bottom: 28px !important; padding: 24px !important; border: 1px solid var(--auth-line) !important; border-radius: 15px !important; background: #fbfdfc !important; }
body[data-peso-page="jobseeker-register"] .section-head { margin-bottom: 20px !important; padding-bottom: 15px !important; border-bottom: 1px solid #e4eee9 !important; }
body[data-peso-page="jobseeker-register"] .section-title { color: var(--auth-green-900) !important; font-size: 18px !important; font-weight: 850 !important; }
body[data-peso-page="jobseeker-register"] .section-heading-copy small { color: var(--auth-muted) !important; font-size: 13px !important; }
body[data-peso-page="jobseeker-register"] .section-number { width: 30px !important; height: 30px !important; display: grid !important; place-items: center !important; border-radius: 50% !important; color: #fff !important; background: var(--auth-green-700) !important; font-weight: 850 !important; }
body[data-peso-page="jobseeker-register"] .grid { gap: 18px !important; }
body[data-peso-page="jobseeker-register"] .field { gap: 7px !important; }
body[data-peso-page="jobseeker-register"] .field label { color: var(--auth-ink) !important; font-size: 13px !important; font-weight: 800 !important; }
body[data-peso-page="jobseeker-register"] .input-group { min-height: 50px !important; border: 1px solid var(--auth-line) !important; border-radius: 10px !important; background: #fff !important; }
body[data-peso-page="jobseeker-register"] .input-group:focus-within { border-color: var(--auth-green-700) !important; box-shadow: 0 0 0 4px rgba(8, 121, 78, .13) !important; }
body[data-peso-page="jobseeker-register"] .input-group input,
body[data-peso-page="jobseeker-register"] .input-group select { min-height: 48px !important; color: var(--auth-ink) !important; font-size: 15px !important; }
body[data-peso-page="jobseeker-register"] .registration-step-actions { gap: 10px !important; margin-top: 20px !important; }
body[data-peso-page="jobseeker-register"] .registration-step-button,
body[data-peso-page="jobseeker-register"] .btn-submit { min-height: 48px !important; border-radius: 10px !important; font-size: 14px !important; font-weight: 850 !important; }
body[data-peso-page="jobseeker-register"] .registration-step-button--primary,
body[data-peso-page="jobseeker-register"] .btn-submit { color: #fff !important; background: var(--auth-green-700) !important; border-color: var(--auth-green-700) !important; }
body[data-peso-page="jobseeker-register"] .registration-step-button--secondary { color: var(--auth-green-900) !important; background: #fff !important; border-color: var(--auth-line) !important; }
body[data-peso-page="jobseeker-register"] .login-link { margin-top: 24px !important; color: var(--auth-muted) !important; font-size: 14px !important; text-align: center !important; }
body[data-peso-page="jobseeker-register"] .login-link a { color: var(--auth-green-700) !important; font-weight: 850 !important; text-decoration: none !important; }
body[data-peso-page="jobseeker-register"] .message { min-height: 50px !important; border-radius: 12px !important; font-size: 14px !important; }
body[data-peso-page="jobseeker-register"] .modal-overlay { z-index: 50 !important; }
body[data-peso-page="jobseeker-register"] .modal-container { width: min(760px, calc(100% - 32px)) !important; border-radius: 18px !important; }

/* Simple verification and password-set pages share the same surface. */
body[data-peso-page="verify-email"] main,
body[data-peso-page="employer-set-password"] main { position: relative !important; z-index: 1; width: min(560px, calc(100% - 48px)) !important; margin: 70px auto !important; padding: 42px 46px !important; border: 1px solid rgba(8, 121, 78, .18) !important; border-radius: 22px !important; background: rgba(255, 255, 255, .96) !important; box-shadow: var(--auth-shadow) !important; }
body[data-peso-page="verify-email"] .mark,
body[data-peso-page="employer-set-password"] .mark { width: 60px !important; height: 60px !important; margin: 0 auto 18px !important; display: grid !important; place-items: center !important; border-radius: 18px !important; color: var(--auth-green-700) !important; background: #e4f4eb !important; font-size: 25px !important; }
body[data-peso-page="verify-email"] h1,
body[data-peso-page="employer-set-password"] h1 { margin: 0 0 8px !important; color: var(--auth-ink) !important; font-size: 32px !important; font-weight: 850 !important; letter-spacing: -.04em !important; text-align: center !important; }
body[data-peso-page="verify-email"] .lead,
body[data-peso-page="employer-set-password"] .lead { margin: 0 0 22px !important; color: var(--auth-muted) !important; text-align: center !important; }
body[data-peso-page="verify-email"] .message,
body[data-peso-page="employer-set-password"] .message { margin: 0 0 18px !important; padding: 13px 15px !important; border-radius: 11px !important; font-size: 14px !important; }
body[data-peso-page="verify-email"] .field,
body[data-peso-page="employer-set-password"] .field { display: grid !important; gap: 8px !important; margin-bottom: 18px !important; }
body[data-peso-page="verify-email"] .field label,
body[data-peso-page="employer-set-password"] .field label { color: var(--auth-ink) !important; font-size: 13px !important; font-weight: 800 !important; }
body[data-peso-page="verify-email"] .field input,
body[data-peso-page="employer-set-password"] .field input { width: 100% !important; min-height: 50px !important; padding: 0 14px !important; border: 1px solid var(--auth-line) !important; border-radius: 10px !important; background: #fff !important; color: var(--auth-ink) !important; font: inherit !important; font-size: 15px !important; }
body[data-peso-page="verify-email"] button.primary,
body[data-peso-page="verify-email"] button.secondary,
body[data-peso-page="employer-set-password"] button,
body[data-peso-page="employer-set-password"] .login { width: 100% !important; min-height: 50px !important; margin-top: 8px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border: 1px solid var(--auth-green-700) !important; border-radius: 10px !important; color: #fff !important; background: var(--auth-green-700) !important; font-size: 14px !important; font-weight: 850 !important; text-decoration: none !important; }
body[data-peso-page="verify-email"] button.secondary { color: var(--auth-green-900) !important; background: #fff !important; border-color: var(--auth-line) !important; }
body[data-peso-page="verify-email"] .theme,
body[data-peso-page="employer-set-password"] .theme { position: fixed !important; z-index: 4; top: 22px !important; right: 24px !important; width: 42px !important; height: 42px !important; border: 1px solid var(--auth-line) !important; border-radius: 50% !important; color: var(--auth-green-900) !important; background: rgba(255, 255, 255, .84) !important; }
body[data-peso-page="verify-email"] .theme,
body[data-peso-page="employer-set-password"] .theme { right: 174px !important; }
html body[data-peso-page="verify-email"] button.theme,
html body[data-peso-page="employer-set-password"] button.theme { width: 42px !important; min-width: 42px !important; min-height: 42px !important; height: 42px !important; }
body.auth-page .peso-assistant__launcher,
body[data-peso-page="verify-email"] .peso-assistant__launcher,
body[data-peso-page="employer-set-password"] .peso-assistant__launcher,
body[data-peso-page="jobseeker-register"] .peso-assistant__launcher {
    width: max-content !important;
    min-width: 154px !important;
    left: auto !important;
    right: 20px !important;
}

/* Dark theme remains high contrast and uses the same geometry. */
html[data-theme="dark"] body.auth-page,
html[data-theme="dark"] body[data-peso-page="verify-email"],
html[data-theme="dark"] body[data-peso-page="employer-set-password"],
html[data-theme="dark"] body[data-peso-page="jobseeker-register"],
body.auth-page.dark-mode,
body[data-peso-page="verify-email"].dark-mode,
body[data-peso-page="employer-set-password"].dark-mode,
body[data-peso-page="jobseeker-register"].dark-mode { color: #e8f5ef !important; background: linear-gradient(120deg, #071c14, #0b3326) !important; }
html[data-theme="dark"] body.auth-page .auth-form-panel,
html[data-theme="dark"] body.auth-page .recovery-card,
html[data-theme="dark"] body[data-peso-page="verify-email"] main,
html[data-theme="dark"] body[data-peso-page="employer-set-password"] main,
html[data-theme="dark"] body[data-peso-page="jobseeker-register"] .card,
body.auth-page.dark-mode .auth-form-panel,
body.auth-page.dark-mode .recovery-card { border-color: #285b47 !important; background: #0e2a20 !important; box-shadow: 0 26px 70px rgba(0, 0, 0, .35) !important; }
html[data-theme="dark"] body.auth-page :is(.auth-form-heading h1, .auth-field label, .auth-label-row label, .auth-input-wrap input, .recovery-heading h1, body[data-peso-page="verify-email"] h1),
html[data-theme="dark"] body[data-peso-page="verify-email"] h1,
html[data-theme="dark"] body[data-peso-page="employer-set-password"] h1,
html[data-theme="dark"] body[data-peso-page="jobseeker-register"] .field label,
html[data-theme="dark"] body[data-peso-page="jobseeker-register"] .section-title { color: #e8f5ef !important; }
html[data-theme="dark"] body.auth-page :is(.auth-form-heading p, .auth-secondary-action, .auth-login-security, .auth-security-note, .admin-login-help, .recovery-heading p),
html[data-theme="dark"] body[data-peso-page="verify-email"] .lead,
html[data-theme="dark"] body[data-peso-page="employer-set-password"] .lead { color: #abc4b7 !important; }
html[data-theme="dark"] body.auth-page :is(.auth-login-security, .auth-security-note) i { color: #72dfa5 !important; }

/* Compact sign-in cards: keep every primary action visible on common laptop screens. */
body[data-peso-page="jobseeker-login"] main.auth-shell.auth-shell--compact,
body[data-peso-page="employer-login"] main.auth-shell.employer-login-shell,
body[data-peso-page="admin-login"] main.auth-shell.admin-login-shell {
    width: min(calc(100% - 32px), 410px) !important;
    max-width: 410px !important;
    margin: clamp(8px, 1.5vh, 16px) auto 24px !important;
}
body[data-peso-page="jobseeker-login"] .auth-login-card,
body[data-peso-page="employer-login"] .role-login-card,
body[data-peso-page="admin-login"] .role-login-card {
    padding: 24px 26px 22px !important;
}
body[data-peso-page="jobseeker-login"] .auth-form-wrap,
body[data-peso-page="employer-login"] .auth-form-wrap,
body[data-peso-page="admin-login"] .auth-form-wrap {
    padding: 0 !important;
}
body[data-peso-page="jobseeker-login"] .auth-login-identity,
body:is([data-peso-page="employer-login"], [data-peso-page="admin-login"]) .role-login-identity {
    margin-bottom: 14px !important;
}
body[data-peso-page="jobseeker-login"] .auth-login-logo,
body:is([data-peso-page="employer-login"], [data-peso-page="admin-login"]) .role-login-logo {
    width: 44px !important;
    height: 44px !important;
    flex-basis: 44px !important;
}
body[data-peso-page="jobseeker-login"] .auth-login-logo img,
body:is([data-peso-page="employer-login"], [data-peso-page="admin-login"]) .role-login-logo img {
    width: 38px !important;
    height: 38px !important;
}
body:is([data-peso-page="jobseeker-login"], [data-peso-page="employer-login"], [data-peso-page="admin-login"]) .auth-form-heading {
    margin: 0 0 16px !important;
}
body:is([data-peso-page="jobseeker-login"], [data-peso-page="employer-login"], [data-peso-page="admin-login"]) .auth-form-heading h1 {
    margin-bottom: 5px !important;
    font-size: clamp(1.65rem, 4vw, 1.9rem) !important;
}
body:is([data-peso-page="jobseeker-login"], [data-peso-page="employer-login"], [data-peso-page="admin-login"]) .auth-form-heading p {
    font-size: .78rem !important;
    line-height: 1.4 !important;
}
body[data-peso-page="jobseeker-login"] .auth-google-btn {
    min-height: 44px !important;
    margin-bottom: 12px !important;
}
body[data-peso-page="jobseeker-login"] .auth-or {
    margin: 0 0 12px !important;
}
body:is([data-peso-page="jobseeker-login"], [data-peso-page="employer-login"], [data-peso-page="admin-login"]) .auth-form {
    margin-top: 14px !important;
    gap: 10px !important;
}
body:is([data-peso-page="jobseeker-login"], [data-peso-page="employer-login"], [data-peso-page="admin-login"]) .auth-field {
    gap: 6px !important;
}
body:is([data-peso-page="jobseeker-login"], [data-peso-page="employer-login"], [data-peso-page="admin-login"]) .auth-input-wrap {
    min-height: 46px !important;
}
body:is([data-peso-page="jobseeker-login"], [data-peso-page="employer-login"], [data-peso-page="admin-login"]) .auth-input-wrap input {
    height: 44px !important;
}
body:is([data-peso-page="jobseeker-login"], [data-peso-page="employer-login"], [data-peso-page="admin-login"]) .auth-submit {
    min-height: 46px !important;
}
body:is([data-peso-page="jobseeker-login"], [data-peso-page="employer-login"], [data-peso-page="admin-login"]) .auth-secondary-action {
    margin-top: 13px !important;
    padding-top: 12px !important;
    font-size: .78rem !important;
}
body[data-peso-page="jobseeker-login"] .auth-login-security,
body:is([data-peso-page="employer-login"], [data-peso-page="admin-login"]) :is(.role-login-security, .auth-security-note) {
    margin-top: 9px !important;
}

@media (max-width: 520px) {
    body[data-peso-page="jobseeker-login"] .auth-login-card,
    body[data-peso-page="employer-login"] .role-login-card,
    body[data-peso-page="admin-login"] .role-login-card { padding: 22px 20px 20px !important; }
}

/* Specificity guard for the production auth template. */
html body.peso-product-ui.auth-page[data-peso-page="jobseeker-login"] main.auth-shell.auth-shell--compact,
html body.peso-product-ui.auth-page[data-peso-page="employer-login"] main.auth-shell.employer-login-shell,
html body.peso-product-ui.auth-page[data-peso-page="admin-login"] main.auth-shell.admin-login-shell {
    width: min(calc(100% - 32px), 410px) !important;
    max-width: 410px !important;
    margin: clamp(8px, 1.5vh, 16px) auto 24px !important;
}
html body.peso-product-ui.auth-page[data-peso-page="jobseeker-login"] :is(.auth-login-card, .auth-form-panel),
html body.peso-product-ui.auth-page[data-peso-page="employer-login"] :is(.role-login-card, .auth-form-panel),
html body.peso-product-ui.auth-page[data-peso-page="admin-login"] :is(.role-login-card, .auth-form-panel) {
    padding: 0 !important;
}
html body.peso-product-ui.auth-page[data-peso-page="jobseeker-login"] .auth-form-wrap,
html body.peso-product-ui.auth-page[data-peso-page="employer-login"] .auth-form-wrap,
html body.peso-product-ui.auth-page[data-peso-page="admin-login"] .auth-form-wrap {
    padding: 24px 26px 22px !important;
}
html body.peso-product-ui.auth-page[data-peso-page="jobseeker-login"] .auth-login-identity {
    width: max-content !important;
    flex-direction: row !important;
    justify-content: center !important;
    text-align: left !important;
}
html body.peso-product-ui.auth-page:is([data-peso-page="employer-login"], [data-peso-page="admin-login"]) .role-login-identity {
    width: max-content !important;
    margin-inline: auto !important;
    flex-direction: row !important;
    justify-content: center !important;
    text-align: left !important;
}
html body.peso-product-ui.auth-page:is([data-peso-page="jobseeker-login"], [data-peso-page="employer-login"], [data-peso-page="admin-login"]) .auth-form-heading {
    margin: 0 0 16px !important;
}
html body.peso-product-ui.auth-page:is([data-peso-page="jobseeker-login"], [data-peso-page="employer-login"], [data-peso-page="admin-login"]) .auth-secondary-action {
    margin-top: 13px !important;
    padding-top: 12px !important;
}
@media (max-width: 520px) {
    html body.peso-product-ui.auth-page[data-peso-page="jobseeker-login"] .auth-form-wrap,
    html body.peso-product-ui.auth-page[data-peso-page="employer-login"] .auth-form-wrap,
    html body.peso-product-ui.auth-page[data-peso-page="admin-login"] .auth-form-wrap { padding: 22px 20px 20px !important; }
}

/* One official seal treatment across sign-in, registration and recovery pages. */
html body.peso-product-ui.auth-page :is(.auth-login-logo, .role-login-logo) {
    width: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    padding: 3px !important;
    display: grid !important;
    place-items: center !important;
    flex: 0 0 46px !important;
    overflow: hidden !important;
    border: 1px solid color-mix(in srgb, var(--auth-green-700) 24%, transparent) !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    box-shadow: 0 7px 18px rgba(2, 54, 37, .16) !important;
}
html body.peso-product-ui.auth-page :is(.auth-login-logo, .role-login-logo) > img {
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    display: block !important;
    object-fit: contain !important;
    aspect-ratio: 1 / 1 !important;
    border: 0 !important;
    border-radius: 50% !important;
}
html body.auth-page .recovery-brand > span {
    width: 48px !important;
    min-width: 48px !important;
    height: 48px !important;
    padding: 3px !important;
    display: grid !important;
    place-items: center !important;
    flex: 0 0 48px !important;
    overflow: hidden !important;
    border-radius: 50% !important;
    background: #ffffff !important;
}
html body.auth-page .recovery-brand > span > img {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    display: block !important;
    object-fit: contain !important;
    aspect-ratio: 1 / 1 !important;
    border: 0 !important;
    border-radius: 50% !important;
}
html body[data-peso-page="jobseeker-register"] :is(.registration-brand, .reg-head__brand, .logo-container) img {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    display: block !important;
    object-fit: contain !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
}
html[data-theme="dark"] body.auth-page .auth-input-wrap,
html[data-theme="dark"] body.auth-page .auth-input-wrap input,
html[data-theme="dark"] body[data-peso-page="verify-email"] .field input,
html[data-theme="dark"] body[data-peso-page="employer-set-password"] .field input,
html[data-theme="dark"] body[data-peso-page="jobseeker-register"] .input-group { border-color: #356b56 !important; background: #0a2119 !important; color: #e8f5ef !important; }
html[data-theme="dark"] body.auth-page .auth-back-link,
html[data-theme="dark"] body.auth-page .auth-theme-toggle,
html[data-theme="dark"] body[data-peso-page="verify-email"] .theme,
html[data-theme="dark"] body[data-peso-page="employer-set-password"] .theme { border-color: #356b56 !important; color: #d7ece2 !important; background: #0e2a20 !important; }
html[data-theme="dark"] body.auth-page .peso-language-picker select,
html[data-theme="dark"] body[data-peso-page="verify-email"] .peso-language-picker select,
html[data-theme="dark"] body[data-peso-page="employer-set-password"] .peso-language-picker select,
html[data-theme="dark"] body[data-peso-page="jobseeker-register"] .peso-language-picker select { border-color: #356b56 !important; color: #e8f5ef !important; background: #0e2a20 !important; }
html[data-theme="dark"] body.auth-page .auth-login-identity strong,
html[data-theme="dark"] body.auth-page .role-login-identity strong { color: #73d9a8 !important; }
html[data-theme="dark"] body[data-peso-page="jobseeker-register"] .section { border-color: #285b47 !important; background: #0a2119 !important; }

@media (max-width: 720px) {
    body.auth-page .auth-toolbar { width: calc(100% - 32px) !important; margin-top: 12px !important; }
    body.auth-page .auth-theme-toggle { margin-right: 0 !important; }
    body.auth-page .peso-language-picker,
    body[data-peso-page="verify-email"] .peso-language-picker,
    body[data-peso-page="employer-set-password"] .peso-language-picker,
    body[data-peso-page="jobseeker-register"] .peso-language-picker { top: 12px !important; right: 66px !important; }
    body[data-peso-page="verify-email"] .theme,
    body[data-peso-page="employer-set-password"] .theme { top: 12px !important; right: 16px !important; }
    body.auth-page .auth-shell,
    body.auth-page .auth-shell.auth-shell--compact,
    body.auth-page .verification-shell,
    body.auth-page .recovery-shell,
    body[data-peso-page="verify-email"] main,
    body[data-peso-page="employer-set-password"] main { width: calc(100% - 32px) !important; margin-top: 32px !important; }
    body.auth-page .auth-form-wrap,
    body.auth-page .recovery-card,
    body[data-peso-page="verify-email"] main,
    body[data-peso-page="employer-set-password"] main { padding: 30px 24px 26px !important; }
    body[data-peso-page="jobseeker-register"] { padding-inline: 12px !important; }
    body[data-peso-page="jobseeker-register"] .page { margin-top: 18px !important; }
    body[data-peso-page="jobseeker-register"] .card-header,
    body[data-peso-page="jobseeker-register"] .card-body { padding: 26px 20px !important; }
    body[data-peso-page="jobseeker-register"] .section { padding: 18px !important; }
    body[data-peso-page="jobseeker-register"] .grid { grid-template-columns: 1fr !important; }
    body[data-peso-page="jobseeker-register"] .field.span-2 { grid-column: auto !important; }
}
@media (max-width: 430px) {
    body.auth-page .auth-toolbar { min-height: 56px !important; }
    body.auth-page .auth-back-link { padding-inline: 12px !important; font-size: 12px !important; }
    body.auth-page .auth-theme-toggle { width: 42px !important; padding: 0 !important; font-size: 0 !important; }
    body.auth-page .auth-theme-toggle i { font-size: 14px !important; }
    body.auth-page .auth-login-identity,
    body.auth-page .role-login-identity { margin-bottom: 24px !important; }
    body.auth-page .auth-login-logo,
    body.auth-page .role-login-logo { width: 52px !important; height: 52px !important; flex-basis: 52px !important; }
    body.auth-page .auth-login-identity strong,
    body.auth-page .role-login-identity strong { font-size: 17px !important; }
    body.auth-page .auth-form-heading h1 { font-size: 29px !important; }
    body.auth-page .auth-secondary-action { flex-direction: column !important; }
}