body { margin: 0; min-height: 100vh; background: #f0f4f8; color: #203448; font-family: "Vazirmatn", Tahoma, sans-serif; font-size: 14px; line-height: 1.9; padding: 32px 20px; display: grid; place-items: center; }
*, *::before, *::after { box-sizing: border-box; }
a { text-underline-offset: 4px; }
:focus-visible { outline: 3px solid #9c7436; outline-offset: 4px; }
.recovery-shell { width: min(960px, 100%); display: grid; grid-template-columns: minmax(280px, 38%) minmax(0, 1fr); overflow: hidden; background: #fff; border: 1px solid #d2dce5; border-radius: 18px; box-shadow: 0 25px 65px #152b431a; }
.recovery-aside { padding: 30px; background: #152b43; color: #fff; display: flex; flex-direction: column; gap: 40px; }
.recovery-brand { display: flex; gap: 13px; align-items: center; color: #fff; text-decoration: none; }
.recovery-brand .brand-logo { width: 43px; height: 60px; flex-shrink: 0; background: #fff; border-radius: 6px; }
.recovery-brand strong { display: block; font-size: 17px; }
.recovery-brand small { display: block; color: #c7d5e1; font-size: 11px; margin-top: 3px; }
.recovery-aside-message { margin: auto 0; }
.recovery-aside-message > span { color: #ddc396; font-size: 45px; line-height: 1; }
.recovery-aside h2 { font-size: 24px; margin-block: 16px 10px; line-height: 1.8; }
.recovery-aside p { font-size: 12px; line-height: 2.1; color: #c7d5e1; margin: 0; }
.recovery-aside > a:last-child { font-size: 12px; color: #ddc396; }
.recovery-aside :focus-visible { outline-color: #ddc396; }
.recovery-main { padding: 42px; min-width: 0; }
.recovery-eyebrow { color: #85622d; font-size: 11px; font-weight: 750; }
.recovery-main h1 { margin: 6px 0 12px; font-size: 25px; line-height: 1.7; }
.recovery-intro { color: #596b7a; font-size: 13px; margin: 0 0 24px; line-height: 2; }
.recovery-form { display: grid; gap: 18px; }
.recovery-form label { display: block; font-weight: 750; font-size: 13px; margin-bottom: 7px; }
.recovery-input { font: inherit; font-size: 16px; min-height: 48px; width: 100%; border: 1px solid #b8c9d6; border-radius: 8px; background: #fff; color: #203448; padding: 10px 12px; }
.recovery-input[aria-invalid="true"] { border-color: #b14e60; }
.recovery-input::placeholder { font-size: 13px; color: #778794; }
.recovery-button { min-height: 48px; width: 100%; padding: 11px 18px; font: inherit; font-size: 13px; font-weight: 750; display: flex; align-items: center; justify-content: center; background: #203f5b; border: 1px solid #203f5b; border-radius: 8px; color: #fff; text-decoration: none; cursor: pointer; }
.recovery-button:hover { background: #152b43; }
.recovery-back { display: block; margin-top: 18px; text-align: center; color: #775d31; font-size: 12px; }
.recovery-privacy { color: #667988; font-size: 11px; margin: 15px 0 0; }
.recovery-help { border-top: 1px solid #dce5ed; padding-top: 20px; margin-top: 28px; }
.recovery-help strong { font-size: 12px; }
.recovery-help p { color: #667988; font-size: 11px; margin-block: 6px; }
.recovery-help a { color: #775d31; font-weight: 750; font-size: 12px; }
.recovery-errors { color: #923348; background: #fff0f2; border: 1px solid #e4c0c7; padding: 11px 15px; border-radius: 8px; font-size: 12px; margin-bottom: 18px; }
.recovery-errors p { margin: 3px 0; }
.recovery-field-help { padding: 8px 12px; background: #f5f8fa; color: #596b7a; font-size: 11px; margin-top: 8px; border-radius: 7px; }
.recovery-field-help ul { padding-inline-start: 17px; margin-block: 4px; }
.recovery-result-icon { width: 52px; height: 52px; border-radius: 50%; background: #eef5f9; color: #426781; font-size: 27px; display: grid; place-items: center; margin-top: 20px; }
.recovery-result-warning { background: #fff5df; color: #805b1e; }
.recovery-tip { padding: 14px 16px; background: #f5f8fa; color: #596b7a; border-radius: 8px; font-size: 12px; margin-bottom: 23px; }
.recovery-tip p { margin: 5px 0 0; font-size: 12px; }
@media (max-width: 720px) { body { padding: 12px; } .recovery-shell { grid-template-columns: minmax(0, 1fr); border-radius: 12px; } .recovery-aside { padding: 18px 22px; gap: 14px; } .recovery-aside-message { display: none; } .recovery-aside > a:last-child { display: none; } .recovery-brand .brand-logo { width: 35px; height: 48px; } .recovery-main { padding: 28px 22px; } .recovery-main h1 { font-size: 22px; } }