body[data-peso-page='forgot-password'] {
    --role-accent: #e1b72e;
    --role-accent-soft: rgba(225,183,46,.14);
}

body[data-peso-page='forgot-password'] .auth-background::before {
    inset: auto;
    top: 50%;
    left: 50%;
    width: min(72vw, 720px);
    height: min(72vw, 720px);
    opacity: .045;
    background: url('../images/peso_logo.jpg') center / contain no-repeat;
    border-radius: 50%;
    mask-image: none;
    transform: translate(-50%, -47%);
}

body[data-peso-page='forgot-password'] main.recovery-shell,
html body.peso-product-ui[data-peso-page='forgot-password'] main.recovery-shell {
    position: relative;
    z-index: 2;
    width: min(calc(100% - 28px), 460px) !important;
    max-width: 460px !important;
    margin: clamp(12px, 4vh, 44px) auto 40px !important;
    padding: 0 !important;
}

body[data-peso-page='forgot-password'] .auth-toolbar { grid-template-columns: 1fr auto; }

.recovery-card {
    padding: clamp(26px, 5vw, 38px);
    color: var(--auth-ink);
    background: color-mix(in srgb, var(--auth-surface) 96%, transparent);
    border: 1px solid var(--auth-line);
    border-radius: 24px;
    box-shadow: var(--auth-shadow);
    backdrop-filter: blur(22px);
}

.recovery-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 28px; color: var(--auth-ink); text-decoration: none; }
.recovery-brand > span { width: 48px; height: 48px; padding: 2px; display: grid; place-items: center; background: linear-gradient(145deg,#e2bb37,#22a96a); border-radius: 50%; }
.recovery-brand img { width: 43px; height: 43px; object-fit: cover; background: #fff; border-radius: 50%; }
.recovery-brand strong { display: grid; gap: 2px; font-size: .9rem; }
.recovery-brand small { color: var(--auth-muted); font-size: .61rem; letter-spacing: .075em; text-transform: uppercase; }
.recovery-icon { width: 46px; height: 46px; display: grid; place-items: center; margin-bottom: 18px; color: #071c14; background: #f0ca49; border-radius: 14px; box-shadow: 0 10px 26px rgba(225,183,46,.22); }
.recovery-heading > span { color: var(--auth-accent); font-size: .68rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.recovery-heading h1 { margin: 7px 0 9px; color: var(--auth-ink) !important; font-size: clamp(1.75rem, 5vw, 2.2rem); line-height: 1.08; letter-spacing: -.035em; }
.recovery-heading p { margin: 0; color: var(--auth-muted); font-size: .84rem; line-height: 1.65; }
.recovery-form { margin-top: 24px; }
.recovery-note { display: flex; align-items: flex-start; gap: 9px; margin: 18px 0 0; padding-top: 17px; color: var(--auth-muted); border-top: 1px solid var(--auth-line); font-size: .72rem; line-height: 1.55; }
.recovery-note i { margin-top: 2px; color: var(--role-accent); }
.recovery-action-link { margin-top: 18px; text-decoration: none; }
.recovery-start-over { display: inline-flex; align-items: center; gap: 7px; margin-top: 17px; color: var(--auth-muted); font-size: .72rem; font-weight: 750; text-decoration: none; }
.recovery-start-over:hover { color: var(--auth-accent); }

html[data-theme='light'] body[data-peso-page='forgot-password'] .auth-background::before { opacity: .05; mix-blend-mode: multiply; }

@media (max-width: 520px) {
    body[data-peso-page='forgot-password'] .auth-toolbar { width: min(calc(100% - 24px), 460px); min-height: 70px; }
    body[data-peso-page='forgot-password'] .auth-back-link span { max-width: 155px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    body[data-peso-page='forgot-password'] .auth-theme-toggle span { display: none; }
    .recovery-shell { margin-top: 5px; }
    .recovery-card { border-radius: 20px; }
}