.account-shell { box-sizing: border-box; min-height: 100dvh; display: grid; place-items: center; margin: 0; padding: 28px 16px; background: #f4f1e8; color: #173d37; font-family: 'Inter', system-ui, sans-serif; }
.account-shell *, .password-panel * { box-sizing: border-box; }
.recovery-wrap { width: 100%; max-width: 440px; }
.recovery-brand { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 24px; text-decoration: none; color: #173d37; }
.recovery-brand img { width: 44px; height: 44px; object-fit: contain; }
.recovery-brand strong { display: block; font-size: 14px; font-weight: 800; }
.recovery-brand small { display: block; margin-top: 4px; font-size: 11px; color: #758075; }
.recovery-card { padding: 30px; border: 1px solid #e1e4d9; border-radius: 20px; background: #fff; box-shadow: 0 16px 40px -24px #28473766; }
.account-icon { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; border-radius: 13px; background: #eaf3ec; color: #226553; font-size: 18px; }
.recovery-card > .account-icon { width: 52px; height: 52px; margin-bottom: 20px; background: #f4edda; color: #8d6a28; }
.account-eyebrow { margin: 0 0 7px; color: #8d784a; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.recovery-title { margin: 0; color: #143f37; font-size: 25px; font-weight: 800; letter-spacing: -.04em; }
.account-description { margin: 9px 0 22px; color: #728077; font-size: 12px; line-height: 1.75; }
.account-steps { display: flex; gap: 8px; margin: 0 0 24px; padding: 0; list-style: none; }
.account-steps li { flex: 1; padding-top: 9px; border-top: 3px solid #e9eee8; color: #8c958d; font-size: 10px; font-weight: 600; }
.account-steps .is-current { border-color: #4b8875; color: #286452; }
.account-field { margin-bottom: 16px; }
.account-label { display: block; margin: 0 0 7px; color: #305147; font-size: 12px; font-weight: 700; }
.account-input-wrap { position: relative; }
.account-input-wrap > i { position: absolute; left: 14px; top: 16px; color: #8a9d90; font-size: 14px; pointer-events: none; }
.account-input { width: 100%; min-height: 46px; border: 1px solid #dce3d9; border-radius: 10px; background: #fafbf8; color: #193e35; padding: 12px 44px 12px 40px; font: inherit; font-size: 14px; outline: none; }
.account-input:focus { border-color: #5d9681; background: #fff; box-shadow: 0 0 0 3px #eaf2eb; }
.account-input::placeholder { color: #a0a99f; font-size: 12px; }
.account-field-help { display: block; margin-top: 6px; font-size: 10px; line-height: 1.6; color: #869084; }
.account-password-toggle { position: absolute; right: 2px; top: 2px; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 0; background: transparent; color: #809183; cursor: pointer; }
.account-code { padding-left: 14px; font-size: 22px; font-weight: 700; letter-spacing: .4em; }
.account-primary { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 46px; padding: 12px 18px; border: 1px solid #174e42; border-radius: 10px; background: #174e42; color: #fff; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; text-decoration: none; }
.account-primary:hover { background: #103e34; color: #fff; }
.account-secondary { min-height: 44px; border: 1px solid #dde4d9; border-radius: 10px; background: #fff; padding: 10px 16px; color: #6a7a6d; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.account-back { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; margin-top: 12px; color: #708273; font-size: 11px; font-weight: 600; text-decoration: none; }
.account-back:hover { color: #174e42; }
.account-help { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid #edf0e8; color: #849080; font-size: 10px; line-height: 1.7; text-align: center; }
.account-alert { display: flex; align-items: flex-start; gap: 9px; padding: 12px; margin-bottom: 18px; border: 1px solid #efcfc7; border-radius: 10px; background: #fff5f0; color: #9c4b3c; font-size: 11px; line-height: 1.65; }
.account-alert i { margin-top: 3px; }
.account-alert--success { border-color: #cde3d3; background: #f0f8f0; color: #34704e; }
.account-alert p { margin: 0; }
.password-panel { border: 1px solid #dce3d8 !important; border-radius: 18px !important; overflow: hidden; background: #fff; color: #173d37; font-family: 'Inter', system-ui, sans-serif; }
.password-panel .modal-header { align-items: flex-start; gap: 12px; padding: 22px; border-bottom: 1px solid #e6ece2; background: #f5f8f1; }
.password-panel .modal-title { margin: 0; color: #244f40; font-size: 17px; font-weight: 800; }
.password-panel .account-description { margin: 4px 0 0; font-size: 11px; }
.password-panel .modal-body { padding: 22px; }
.password-panel .modal-footer { display: grid; grid-template-columns: auto 1fr; gap: 10px; padding: 16px 22px; border-top: 1px solid #e8ede4; background: #fafbf8; }
.password-panel .modal-footer > * { margin: 0; }
.account-retry { text-align: center; margin: 10px 0 0; }
.account-retry button { border: 0; background: none; color: #718270; min-height: 44px; font-size: 11px; cursor: pointer; text-decoration: underline; }
form[aria-busy="true"] :is(button[type="submit"], input[type="submit"]) { opacity: .6; pointer-events: none; }
@media (max-width: 575.98px) { .account-shell { padding: 20px 12px; } .recovery-card { padding: 24px 20px; } .recovery-title { font-size: 23px; } .account-input { font-size: 16px; } .password-panel .modal-header, .password-panel .modal-body { padding: 18px; } .password-panel .modal-footer { padding: 14px 18px; } }
.account-description,.account-help { font-size: 14px; color: #3e5749; }.account-steps li { font-size: 12px; color: #536751; }.account-eyebrow { font-size: 12px; color: #76622e; }.account-label { font-size: 14px; }.account-field-hint,.account-support { font-size: 12px; color: #4f6555; }
.account-field-help { font-size: 12px; color: #50624e; }.account-primary,.account-secondary { font-size: 13px; }.account-back,.account-retry button { font-size: 12px; color: #466148; }.account-alert { font-size: 13px; }.password-panel .account-description { font-size: 12px; color: #52634e; }