.mt-password-access { color: var(--mt-text); background: var(--mt-bg); font-family: var(--wp--preset--font-family--ui), Geist, sans-serif; }
.mt-password-access-main { display: grid; min-height: 475px; grid-template-columns: minmax(0,560px) 480px; align-items: center; justify-content: center; gap: 80px; padding: 64px var(--mt-gutter); }
.mt-password-access-intro { width: 560px; max-width: 100%; }
.mt-password-access-eyebrow { margin: 0 0 24px; color: var(--mt-link); font: 600 11px/14px var(--wp--preset--font-family--mono), monospace; letter-spacing: 1.4px; text-transform: uppercase; }
.mt-password-access-intro h1 { margin: 0; font: 600 48px/1.08 var(--wp--preset--font-family--display), Newsreader, serif; letter-spacing: -1.2px; }
.mt-password-access-intro > p:last-child { max-width: 560px; margin: 24px 0 0; color: var(--mt-muted); font-size: 15px; line-height: 24px; }
.mt-password-access-card { box-sizing: border-box; width: 480px; min-height: 347px; padding: 31px; border: 1px solid var(--mt-border); border-radius: 12px; background: var(--mt-surface); box-shadow: none; }
.mt-password-access-card.is-confirmation { min-height: 374px; }
.mt-password-form { display: flex; flex-direction: column; margin: 0; }
.mt-password-form h2,.mt-password-confirmation h2 { margin: 0; color: var(--mt-text); font: 600 28px/36px var(--wp--preset--font-family--ui), Geist, sans-serif; letter-spacing: normal; }
.mt-password-form-copy { margin: 20px 0; color: var(--mt-muted); font-size: 14px; line-height: 21px; }
.mt-password-field { position: relative; display: flex; height: 60px; box-sizing: border-box; flex-direction: column; justify-content: flex-start; gap: 5px; margin: 0 0 20px; padding: 12px 14px; border: 1px solid var(--mt-border); border-radius: 8px; background: var(--mt-account-field, var(--mt-surface-raised)); transition: border-color var(--mt-transition-fast) ease, background-color var(--mt-transition-fast) ease, box-shadow var(--mt-transition-fast) ease; }
.mt-password-field > span { color: var(--mt-text-subtle); font-size: 10px; line-height: 13px; letter-spacing: .5px; text-transform: uppercase; }
.mt-password-field input { width: 100%; height: 18px; min-height: 0; padding: 0; color: var(--mt-text); background: transparent; border: 0; outline: 0; font: 400 14px/18px var(--wp--preset--font-family--ui), Geist, sans-serif; }
.mt-password-field input::placeholder { color: var(--mt-text); opacity: 1; }
.mt-password-field input:focus-visible { outline: 0; }
/* Cover the browser autofill paint while preserving the themed field state. */
.mt-password-field input:autofill { -webkit-text-fill-color: var(--mt-text); caret-color: var(--mt-text); box-shadow: 0 0 0 1000px var(--mt-field-focus, #292c25) inset; }
.mt-password-field:focus-within, .mt-password-field:has(input[name="user_login"]:not(:placeholder-shown)) { border-color: var(--mt-interaction-strong, rgba(174,241,114,.72)); background: var(--mt-field-focus, #292c25); box-shadow: 0 0 0 2px var(--mt-interaction-soft, rgba(174,241,114,.07)); }
.mt-password-field--secure { padding-right: 50px; }
.mt-password-field .mt-login-visibility { position: absolute; top: 50%; right: 1px; width: 44px; height: 44px; padding: 0; color: var(--mt-muted); background: transparent; border: 0; border-radius: 6px; transform: translateY(-50%); cursor: pointer; }
.mt-password-field .mt-login-visibility:focus-visible { outline: 2px solid var(--mt-focus); outline-offset: -3px; }
.mt-password-submit,.mt-password-confirmation-back { display: inline-flex; height: 48px; box-sizing: border-box; align-items: center; justify-content: center; gap: 10px; padding: 0 18px; color: var(--mt-accent-ink); background: var(--mt-accent); border: 1px solid var(--mt-accent); border-radius: 8px; font: 600 14px/18px var(--wp--preset--font-family--ui), Geist, sans-serif; text-decoration: none; cursor: pointer; transition: background-color 160ms ease, border-color 160ms ease; }
.mt-password-back { margin: 20px 0 0; color: var(--mt-muted); font-size: 13px; line-height: 17px; text-align: center; }
.mt-password-back a { margin-left: 6px; font-weight: 600; color: var(--mt-link); text-decoration: none; }
.mt-password-form--new .mt-password-field { margin-bottom: 20px; }
.mt-password-strength-hint { margin: 0 0 20px; color: var(--mt-muted); font-size: 12px; line-height: 18px; }
.mt-password-guidance { margin: 20px 0 0; color: var(--mt-muted); font-size: 11px; line-height: 17px; }
.mt-password-confirmation { display: flex; min-height: 308px; gap: 20px; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; }
.mt-password-confirmation-icon { display: grid; box-sizing: border-box; width: 48px; height: 48px; margin-bottom: 0; color: var(--mt-link); background: var(--mt-success-bg); border: 1px solid var(--mt-border); border-radius: 50%; place-items: center; }
.mt-password-confirmation-icon svg { width: 24px; height: 24px; }
.mt-password-confirmation > p { margin: 0; color: var(--mt-muted); font-size: 14px; line-height: 22px; }
.mt-password-confirmation > small { margin: 0; color: var(--mt-muted); font-size: 12px; line-height: 16px; }
.mt-password-confirmation-back { width: 100%; margin-top: auto; color: var(--mt-text); background: var(--mt-account-field, var(--mt-surface-raised)); border-color: #3b3f34; }
.mt-password-access-help { display: flex; min-height: 139px; box-sizing: border-box; align-items: center; justify-content: space-between; gap: 32px; margin: 0 var(--mt-gutter); padding: 32px 0; border-top: 1px solid var(--mt-border); }
.mt-password-access-help h2 { margin: 0 0 8px; font: 600 18px/23px var(--wp--preset--font-family--ui), Geist, sans-serif; }
.mt-password-access-help p { margin: 0; color: var(--mt-muted); font-size: 13px; line-height: 20px; }
.mt-password-access-help > a { display: inline-flex; height: 48px; box-sizing: border-box; align-items: center; gap: 10px; padding: 0 19px; color: var(--mt-text); border: 1px solid #3b3f34; border-radius: 8px; font-size: 14px; font-weight: 600; text-decoration: none; transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease; }
@media (hover:hover) and (pointer:fine) { .mt-password-field:hover { border-color: var(--mt-interaction-border, rgb(174 241 114 / 34%)); background: var(--mt-field-hover, #282a24); } .mt-password-field:focus-within:hover, .mt-password-field:has(input[name="user_login"]:not(:placeholder-shown)):hover { border-color: var(--mt-interaction-strong, rgba(174,241,114,.72)); background: var(--mt-field-focus, #292c25); } .mt-password-submit:hover { border-color: var(--mt-accent-hover, #c1f69a); background: var(--mt-accent-hover, #c1f69a); } .mt-password-confirmation-back:hover,.mt-password-access-help > a:hover { color: var(--mt-link); border-color: var(--mt-selection-border); background: var(--mt-interaction-soft, rgb(174 241 114 / 3%)); } .mt-password-back a:hover { text-decoration: underline; text-underline-offset: 3px; } }
@media (max-width:960px) { .mt-password-access-main { grid-template-columns: 1fr; gap: 48px; padding-block: 56px 64px; } .mt-password-access-intro { width: min(100%,560px); margin-inline: auto; } .mt-password-access-card { width: min(100%,480px); margin-inline: auto; } }
@media (max-width:600px) { .mt-password-access-main { gap: 36px; padding: 42px 20px 52px; } .mt-password-access-intro h1 { font-size: 44px; line-height: 45px; } .mt-password-access-card { min-height: 0; padding: 24px; border-radius: 12px; } .mt-password-access-help { align-items: flex-start; flex-direction: column; margin-inline: 20px; } }
@media (max-width:380px) { .mt-password-access-main { padding-inline: 16px; } .mt-password-access-card { padding: 20px; } .mt-password-access-help { margin-inline: 16px; } }
@media (prefers-reduced-motion:reduce) { .mt-password-access * { transition-duration:.01ms !important; } }

:where(.mt-password-form) .mt-password-field:not(:focus-within, :hover, :has(input[name="user_login"]:not(:placeholder-shown))) { border-color: #3b3f34; }
.mt-password-mail-icon, .mt-password-access-help > a > span { width: 17px; height: 17px; flex: none; background: currentColor; mask: url('../icons/lucide/mail.svg') center / contain no-repeat; }
.mt-password-access-help > a > span { font-size: 0; mask-image: url('../icons/lucide/arrow-up-right.svg'); }
@media (min-width: 1400px) { .mt-password-access-main { grid-template-columns: 560px 480px; justify-content: start; padding-left: 160px; } }

.mt-password-check-icon, .mt-password-arrow-icon { width: 17px; height: 17px; flex: none; background: currentColor; mask: url('../icons/lucide/check.svg') center / contain no-repeat; }
.mt-password-arrow-icon { mask-image: url('../icons/lucide/arrow-left.svg'); }
.mt-password-field .mt-login-visibility::before { display: block; width: 19px; height: 19px; margin: auto; content: ""; background: currentColor; mask: url('../icons/lucide/eye.svg') center / contain no-repeat; }
.mt-password-field .mt-login-visibility[aria-pressed="true"]::before { mask-image: url('../icons/lucide/eye-off.svg'); }
.mt-password-form--new > .woocommerce-password-strength { margin: 0 0 20px; padding: 8px; border-radius: 8px; font-size: 12px; }
.mt-password-form--new:has(.woocommerce-password-strength:not([style*="display: none"])) .mt-password-strength-hint { display: none; }
.mt-password-submit:disabled { opacity: .55; cursor: not-allowed; }

html[data-theme="light"] .mt-password-confirmation-icon { border-color: #b5c6a6; }
.mt-password-form--new > .woocommerce-password-hint { margin: 0 0 20px; color: var(--mt-muted); font-size: 12px; line-height: 18px; }
