* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 24px; background: #f0f4fa; color: #0b1a33; font-family: system-ui,-apple-system,"Microsoft YaHei",sans-serif; }
.reset-card { width: min(100%, 960px); min-height: 560px; display: grid; grid-template-columns: 42% 58%; overflow: hidden; border-radius: 28px; background: #fff; box-shadow: 0 20px 60px rgba(11,26,51,.1); }
.reset-aside { display: flex; flex-direction: column; padding: 38px; color: #fff; background: linear-gradient(145deg, #0757a6 0%, #006acd 55%, #38a9d3 100%); }.reset-brand { display: inline-flex; align-items: center; gap: 9px; color: #fff; font-size: 21px; font-weight: 700; text-decoration: none; }.reset-brand img { display: block; width: 42px; height: 42px; flex: 0 0 42px; object-fit: contain; filter: brightness(0) invert(1); }
.reset-aside-content { margin: auto 0; }.reset-icon { display: grid; place-items: center; width: 62px; height: 62px; margin-bottom: 22px; border-radius: 18px; background: rgba(255,255,255,.16); font-size: 30px; }.reset-aside h2 { margin: 0 0 12px; font-size: 28px; }.reset-aside p { margin: 0; max-width: 270px; color: rgba(255,255,255,.84); line-height: 1.8; }.aside-footer { font-size: 12px; opacity: .75; }.aside-footer a { color: inherit; text-decoration: none; }.aside-footer a:hover { text-decoration: underline; }
.reset-form-panel { position: relative; padding: 64px 58px 42px; }.back-login { position: absolute; top: 34px; right: 42px; color: #536579; font-size: 14px; text-decoration: none; }.back-login:hover { color: #006acd; }
h1 { margin: 0 0 8px; font-size: 28px; }.intro,.help { margin: 0; color: #6c7a8a; font-size: 14px; line-height: 1.65; }.help { margin-top: 18px; font-size: 12px; }
.method-tabs { display: flex; gap: 8px; margin: 25px 0 20px; padding: 4px; border-radius: 10px; background: #f0f4fa; }.method-tabs button { flex: 1; padding: 9px; border: 0; border-radius: 7px; background: transparent; color: #526274; cursor: pointer; }.method-tabs button.active { background: #fff; color: #006acd; font-weight: 600; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
label { display: block; margin: 14px 0 6px; font-size: 14px; font-weight: 600; } input { width: 100%; padding: 12px 13px; border: 1px solid #dbe3ec; border-radius: 10px; font: inherit; outline: none; } input:focus { border-color: #006acd; box-shadow: 0 0 0 3px rgba(0,106,205,.1); }.code-row { display: grid; grid-template-columns: 1fr 116px; gap: 10px; align-items: end; }.code-row label { margin-top: 14px; }.code-row button { height: 45px; border: 1px solid #006acd; border-radius: 10px; color: #006acd; background: #fff; cursor: pointer; }.code-row button:disabled { color: #97a5b3; border-color: #dbe3ec; cursor: not-allowed; }
#resetMessage { min-height: 21px; margin: 13px 0 0; font-size: 13px; color: #c0392b; }.submit { width: 100%; margin-top: 8px; padding: 13px; border: 0; border-radius: 10px; background: #006acd; color: #fff; font-size: 16px; font-weight: 600; cursor: pointer; }.submit:disabled { opacity: .65; cursor: not-allowed; }
@media (max-width: 720px) { body { padding: 14px; }.reset-card { display: block; min-height: 0; }.reset-aside { min-height: 155px; padding: 24px; }.reset-aside-content { display: none; }.aside-footer { margin-top: auto; }.reset-form-panel { padding: 54px 24px 28px; }.back-login { top: 26px; right: 24px; } }