body.recovery-page { --recovery-header-slot: 86px; margin: 0; background: #f4f6fa; color: #172941; font-family: "Cabinet Grotesk", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif; }
body.recovery-page *, body.recovery-page *::before, body.recovery-page *::after { box-sizing: border-box; }
body.recovery-page :focus-visible { outline: 3px solid #4e85ed; outline-offset: 3px; }
body.recovery-page [data-shared-header] { height: 0; }
.recovery-shell { width: min(1040px, calc(100% - 80px)); margin: 0 auto; }
.recovery-skip-link { position: fixed; z-index: 200; top: 8px; left: 8px; padding: 12px 16px; border-radius: 8px; background: #fff; color: #14243b; transform: translateY(-150%); }
.recovery-skip-link:focus { transform: translateY(0); }
.recovery-hero { position: relative; isolation: isolate; overflow: hidden; min-height: calc(340px + var(--recovery-header-slot)); color: #f4f6ff; background: radial-gradient(ellipse at 83% 60%, #583caa60, transparent 34%), radial-gradient(ellipse at 5% 120%, #146dc458, transparent 48%), linear-gradient(112deg, #071426, #0c1933 56%, #17152f); }
.recovery-hero::after { position: absolute; z-index: -1; right: 0; bottom: 0; left: 0; height: 1px; background: linear-gradient(90deg, transparent, #61a9f27c 24%, #9c75ef90 78%, transparent); content: ""; }
.recovery-hero-beams { position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; width: min(680px, 57vw); overflow: hidden; opacity: .72; pointer-events: none; }
.recovery-hero-beams::before, .recovery-hero-beams::after, .recovery-hero-beams i { position: absolute; top: -45%; height: 155%; filter: blur(30px); transform-origin: top center; content: ""; }
.recovery-hero-beams::before { left: 19%; width: 23%; background: linear-gradient(180deg, #74caff05, #428dff30 31%, #559aff07 83%); transform: rotate(20deg); }
.recovery-hero-beams::after { left: 59%; width: 26%; background: linear-gradient(180deg, #d6a4ff08, #9c61fa2c 38%, #9b6eff06 84%); transform: rotate(-17deg); }
.recovery-hero-beams i:nth-child(1) { left: 2%; width: 15%; background: linear-gradient(180deg, #68bbff04, #3980e91b 39%, #3980e900 88%); transform: rotate(8deg); }
.recovery-hero-beams i:nth-child(2) { left: 40%; width: 18%; background: linear-gradient(180deg, #a6b7ff04, #716cf027 43%, #716cf000 87%); transform: rotate(-5deg); }
.recovery-hero-beams i:nth-child(3) { left: 82%; width: 16%; background: linear-gradient(180deg, #e5b8ff03, #a45ef21e 42%, #a45ef200 88%); transform: rotate(-28deg); }
.recovery-hero-inner { position: relative; min-height: calc(340px + var(--recovery-header-slot)); padding-top: calc(112px + var(--recovery-header-slot)); padding-bottom: 34px; }
.recovery-breadcrumb { position: absolute; top: calc(26px + var(--recovery-header-slot)); left: 0; display: flex; align-items: center; gap: 10px; color: #97a9c4; font-size: 12px; }
.recovery-breadcrumb a { display: inline-flex; align-items: center; min-height: 32px; color: #bfcee3; text-decoration: none; }
.recovery-breadcrumb a:hover { color: #fff; }
.recovery-breadcrumb [aria-current="page"] { color: #edf2ff; }
.recovery-eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 12px; color: #aac0e8; font-size: 11px; letter-spacing: .17em; }
.recovery-eyebrow > span { width: 7px; height: 7px; border-radius: 50%; background: #a483ff; box-shadow: 0 0 14px #a17bff; }
.recovery-hero h1 { margin: 0; color: #f4f6ff; font-size: clamp(36px, 4.1vw, 52px); font-weight: 630; line-height: 1.18; letter-spacing: -.05em; }
.recovery-hero h1 span { color: #b5b8ff; }
.recovery-hero-copy { margin: 13px 0 0; color: #c1cce0; font-size: 14px; line-height: 1.7; }
.recovery-content { padding: 48px 0 72px; background: linear-gradient(180deg, #f2f5fa, #f7f8fb 56%, #f3f6fa); }
.recovery-card { padding: 34px 38px 30px; border: 1px solid #dbe3ee; border-radius: 16px; background: #fff; box-shadow: 0 16px 50px #1a36540d, 0 2px 8px #182f4e06; }
.recovery-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding-bottom: 23px; border-bottom: 1px solid #e6ebf2; }
.recovery-card-eyebrow { margin: 0 0 6px; color: #5976a1; font-size: 10px; letter-spacing: .15em; }
.recovery-card-heading h2 { margin: 0; color: #1b2f49; font-size: 25px; font-weight: 620; line-height: 1.35; letter-spacing: -.03em; }
.recovery-card-heading > div > p:last-child { margin: 7px 0 0; color: #6e7d91; font-size: 12px; line-height: 1.7; }
.recovery-heading-actions { display: flex; flex: 0 0 auto; flex-direction: column; align-items: flex-end; gap: 14px; }
.recovery-required-note { margin: 7px 0 0; color: #6d7d92; font-size: 11px; white-space: nowrap; }
.recovery-required-note span, .recovery-field label > span[aria-hidden="true"] { color: #df4965; }
.recovery-bulk-consult { display: inline-flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 48px; padding: 11px 16px; border: 1px solid #7768e3; border-radius: 8px; background: linear-gradient(105deg, #346ee6, #7650d9 72%, #9149d8); color: #fff; box-shadow: 0 7px 16px #604ccb26; font: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease; }
.recovery-bulk-consult:hover { filter: brightness(1.06); box-shadow: 0 9px 22px #604ccb35; transform: translateY(-1px); }
.recovery-bulk-consult > span { font-size: 17px; font-weight: 400; }
.recovery-fieldset { min-width: 0; margin: 0; padding: 26px 0 0; border: 0; }
.recovery-fieldset legend { display: flex; align-items: center; gap: 10px; padding: 0; color: #233a58; font-size: 16px; font-weight: 620; }
.recovery-fieldset legend > span { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid #c3d3ec; border-radius: 8px; background: #eef4ff; color: #3569b5; font-size: 10px; font-weight: 650; }
.recovery-photo-field { margin-top: 20px; }
.recovery-field-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 9px; }
.recovery-field label, .recovery-field-heading label { display: inline-flex; align-items: center; gap: 4px; color: #2b405c; font-size: 13px; font-weight: 580; }
.recovery-field-hint { color: #7b899c; font-size: 11px; }
.recovery-file-input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; }
/* The shared input styles must not expand the visually hidden file control. */
.recovery-photo-field .recovery-file-input { width: 1px; min-width: 0; max-width: 1px; height: 1px; min-height: 0; padding: 0; border: 0; }
.recovery-upload { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 100px; padding: 17px 18px; border: 1px dashed #abbdd6; border-radius: 10px; background: linear-gradient(105deg, #f7f9fd, #f7f6ff); color: #324967; text-align: left; cursor: pointer; transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease; }
.recovery-upload:hover { border-color: #6d8cd0; background: linear-gradient(105deg, #f1f6ff, #f5f0ff); box-shadow: 0 4px 16px #4967a00c; }
.recovery-upload:focus-visible { outline: 3px solid #4e85ed; outline-offset: 3px; }
.recovery-upload[aria-invalid="true"] { border-color: #d44b67; background: #fffafb; }
.recovery-upload-icon { display: grid; flex: 0 0 auto; place-items: center; width: 42px; height: 42px; border: 1px solid #d1daea; border-radius: 11px; background: #fff; color: #547bb9; }
.recovery-upload-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.recovery-upload > span:nth-child(2) { display: grid; gap: 5px; min-width: 0; }
.recovery-upload strong { color: #304967; font-size: 12px; font-weight: 620; }
.recovery-upload small { color: #79889c; font-size: 11px; line-height: 1.5; }
.recovery-upload-action { display: inline-flex; align-items: center; justify-content: center; min-width: 92px; min-height: 38px; margin-left: auto; padding: 6px 12px; border: 1px solid #b6c8e2; border-radius: 7px; background: #fff; color: #3f659e; font-size: 11px; white-space: nowrap; }
.recovery-photo-preview { display: grid; grid-template-columns: repeat(auto-fill, minmax(94px, 112px)); gap: 10px; margin-top: 11px; }
.recovery-photo-preview:empty { display: none; }
.recovery-photo-item { position: relative; aspect-ratio: 1; overflow: hidden; border: 1px solid #d8e0ec; border-radius: 8px; background: #eef2f7; }
.recovery-photo-item img { display: block; width: 100%; height: 100%; object-fit: cover; }
.recovery-photo-remove { position: absolute; top: 5px; right: 5px; display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid #ffffffb8; border-radius: 50%; background: #101b2fc7; color: #fff; font-size: 18px; line-height: 1; cursor: pointer; }
.recovery-photo-remove:hover { background: #a83556; }
.recovery-photo-name { position: absolute; right: 0; bottom: 0; left: 0; overflow: hidden; padding: 15px 7px 6px; background: linear-gradient(transparent, #0c1422c9); color: #fff; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.recovery-fields { display: grid; gap: 17px 22px; margin-top: 20px; }
.recovery-fields-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.recovery-field { display: flex; min-width: 0; flex-direction: column; align-items: stretch; gap: 7px; }
.recovery-field > label { min-height: 19px; }
.recovery-optional { margin-left: 4px; color: #8b97a8; font-size: 10px; font-weight: 400; }
.recovery-field input, .recovery-field textarea { width: 100%; min-width: 0; min-height: 48px; padding: 11px 13px; border: 1px solid #cad4e1; border-radius: 8px; outline: none; background: #fff; color: #1e3551; font: inherit; font-size: 13px; line-height: 1.5; transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease; }
.recovery-field textarea { min-height: 106px; resize: vertical; }
.recovery-field input::placeholder, .recovery-field textarea::placeholder { color: #9aa6b5; }
.recovery-field input:focus, .recovery-field textarea:focus { border-color: #648ce0; box-shadow: 0 0 0 3px #5081df20; }
.recovery-field [aria-invalid="true"] { border-color: #d44b67; background: #fffafb; box-shadow: 0 0 0 3px #d44b6715; }
.recovery-field .recovery-unit-input { position: relative; display: flex; align-items: center; }
.recovery-unit-input input { padding-right: 60px; }
.recovery-unit-input > span { position: absolute; right: 14px; color: #71829a; font-size: 11px; pointer-events: none; }
.recovery-field-wide { grid-column: 1 / -1; }
.recovery-field-hint { color: #7b899c; font-size: 10px; line-height: 1.5; }
.recovery-field-error { min-height: 0; color: #b43c58; font-size: 11px; line-height: 1.45; }
.recovery-field-error:empty { display: none; }
.recovery-character-count { align-self: flex-end; margin-top: -3px; color: #8794a5; font-size: 10px; }
.recovery-contact-fieldset { margin-top: 3px; border-top: 1px solid #e6ebf2; }
.recovery-submit-area { margin-top: 26px; padding-top: 21px; border-top: 1px solid #e6ebf2; }
.recovery-submit-buttons { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(180px, .72fr); gap: 12px; }
.recovery-submit-primary, .recovery-submit-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 13px; min-height: 50px; padding: 10px 18px; border-radius: 8px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease; }
.recovery-submit-primary { border: 1px solid #6653d2; background: linear-gradient(105deg, #346ee6, #7650d9 72%, #9149d8); color: #fff; box-shadow: 0 7px 16px #604ccb26; }
.recovery-submit-primary:hover { filter: brightness(1.06); box-shadow: 0 9px 22px #604ccb35; transform: translateY(-1px); }
.recovery-submit-primary:disabled { cursor: wait; filter: grayscale(.25); opacity: .75; transform: none; }
.recovery-submit-primary > span { font-size: 17px; font-weight: 400; }
.recovery-submit-secondary { border: 1px solid #d5dce7; background: #f4f6f9; color: #8792a2; cursor: not-allowed; }
.recovery-submit-secondary > span { padding: 3px 7px; border: 1px solid #d9dee7; border-radius: 999px; color: #828e9e; font-size: 9px; font-weight: 500; }
.recovery-login-hint { margin: 12px 0 0; color: #63748b; font-size: 11px; line-height: 1.7; text-align: center; }
.recovery-prototype-note { margin: 5px 0 0; color: #939eac; font-size: 10px; line-height: 1.6; text-align: center; }
.recovery-form-status { min-height: 0; margin: 0; color: #a83956; font-size: 12px; line-height: 1.6; text-align: center; }
.recovery-form-status:not(:empty) { margin-top: 11px; }
.recovery-success-dialog { width: min(400px, calc(100% - 32px)); padding: 32px 28px 26px; border: 1px solid #d8ddef; border-radius: 18px; background: radial-gradient(circle at 100% 0, #bdaaff28, transparent 45%), #fff; color: #203650; box-shadow: 0 24px 80px #16223b40; text-align: center; }
.recovery-success-dialog::backdrop { background: #07122485; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.recovery-success-mark { display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 15px; border: 1px solid #b9d9ca; border-radius: 50%; background: #eef8f3; color: #2f986c; }
.recovery-success-mark svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.recovery-success-dialog h2 { margin: 0; color: #203650; font-size: 22px; font-weight: 650; }
.recovery-success-dialog p { margin: 9px 0 22px; color: #64758b; font-size: 14px; line-height: 1.6; }
.recovery-success-dialog button { min-width: 150px; min-height: 46px; padding: 9px 20px; border: 0; border-radius: 8px; background: linear-gradient(105deg, #356ee4, #7950db); color: #fff; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.recovery-success-dialog button:hover { filter: brightness(1.07); }
.recovery-fallback-footer { padding: 20px; color: #c4d1e7; background: #091426; }

@media (max-width: 760px) {
  body.recovery-page { --recovery-header-slot: 68px; }
  .recovery-shell { width: calc(100% - 40px); }
  .recovery-hero { min-height: calc(315px + var(--recovery-header-slot)); }
  .recovery-hero-inner { min-height: calc(315px + var(--recovery-header-slot)); padding-top: calc(105px + var(--recovery-header-slot)); padding-bottom: 27px; }
  .recovery-breadcrumb { top: calc(21px + var(--recovery-header-slot)); gap: 8px; font-size: 11px; }
  .recovery-hero h1 { font-size: clamp(34px, 8vw, 44px); }
  .recovery-hero-copy { max-width: 29em; font-size: 12px; }
  .recovery-hero-beams { right: -95px; width: 365px; opacity: .45; }
  .recovery-content { padding: 28px 0 46px; }
  .recovery-card { padding: 25px 22px 22px; border-radius: 14px; }
  .recovery-card-heading { gap: 12px; padding-bottom: 18px; }
  .recovery-card-heading h2 { font-size: 22px; }
  .recovery-card-heading > div > p:last-child { max-width: 25em; font-size: 11px; }
  .recovery-required-note { font-size: 10px; }
  .recovery-fieldset { padding-top: 22px; }
  .recovery-fields { gap: 15px; margin-top: 17px; }
  .recovery-upload { gap: 10px; min-height: 92px; padding: 13px; }
  .recovery-upload-icon { width: 38px; height: 38px; }
  .recovery-upload-action { min-width: 76px; min-height: 40px; padding-inline: 9px; font-size: 10px; }
  .recovery-photo-preview { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; }
}
@media (max-width: 520px) {
  .recovery-shell { width: calc(100% - 32px); }
  .recovery-hero { min-height: calc(302px + var(--recovery-header-slot)); }
  .recovery-hero-inner { min-height: calc(302px + var(--recovery-header-slot)); padding-top: calc(99px + var(--recovery-header-slot)); padding-bottom: 25px; }
  .recovery-hero h1 { font-size: 35px; }
  .recovery-hero-beams { right: -150px; width: 340px; opacity: .36; }
  .recovery-content { padding: 20px 0 38px; }
  .recovery-card { padding: 21px 16px 19px; }
  .recovery-card-heading { flex-direction: column; gap: 4px; }
  .recovery-heading-actions { align-items: stretch; align-self: stretch; gap: 10px; margin-top: 8px; }
  .recovery-required-note { margin: 0; }
  .recovery-bulk-consult { width: 100%; }
  .recovery-fields-two { grid-template-columns: minmax(0, 1fr); }
  .recovery-field-wide { grid-column: auto; }
  .recovery-upload { flex-wrap: wrap; }
  .recovery-upload > span:nth-child(2) { flex: 1; }
  .recovery-upload-action { width: 100%; margin: 0; }
  .recovery-submit-buttons { grid-template-columns: minmax(0, 1fr); gap: 9px; }
  .recovery-submit-primary, .recovery-submit-secondary { width: 100%; min-height: 48px; }
  .recovery-login-hint { text-align: left; }
  .recovery-prototype-note { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .recovery-upload, .recovery-field input, .recovery-field textarea, .recovery-submit-primary, .recovery-submit-secondary, .recovery-bulk-consult { transition: none; }
  .recovery-submit-primary:hover, .recovery-bulk-consult:hover { transform: none; }
}

/* Let long upload hints shrink within the form instead of widening mobile pages. */
.recovery-upload { min-width: 0; max-width: 100%; }
.recovery-upload small { overflow-wrap: anywhere; }
.recovery-photo-item { min-width: 0; margin: 0; }
.recovery-photo-remove { top: 2px; right: 2px; width: 44px; height: 44px; }
.recovery-photo-legacy { display: grid; height: 100%; place-items: center; padding: 12px; color: #536b8b; font-size: 11px; text-align: center; }
.recovery-submit-primary:disabled, .recovery-upload:disabled { cursor: default; opacity: .65; }
@media (max-width: 520px) {
  .recovery-field-heading { flex-wrap: wrap; gap: 6px; }
  .recovery-upload > span:nth-child(2) { flex-basis: calc(100% - 48px); }
  .recovery-upload-action { white-space: normal; }
}