.auth-page { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
.auth-page .header-inner { justify-content: space-between; }
.auth-support { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.auth-support .icon { width: 13px; height: 13px; color: #9297a1; }
.auth-support:hover { color: var(--ink); }
.auth-layout { display: flex; justify-content: center; flex: 1; padding: clamp(52px, 10vh, 100px) 24px 70px; }
.auth-panel { width: 100%; max-width: 380px; }
.auth-intro { margin-bottom: 30px; }
.auth-intro h1 { font-size: 29px; line-height: 1.25; font-weight: 580; letter-spacing: -.04em; outline: none; }
.auth-intro p { margin-top: 11px; color: var(--muted); font-size: 13px; line-height: 1.75; }
.auth-form .field { gap: 8px; margin-bottom: 20px; }
.auth-form .field > span, .field-label label { font-size: 12px; line-height: 1.5; font-weight: 500; color: #525762; }
.auth-form .field > input, .auth-form .password-input > input { height: 42px; padding: 10px 12px; font-size: 13px; border-color: #dedfe5; transition: border-color .15s, box-shadow .15s; }
.auth-form input::placeholder { color: #a0a4ad; }
.auth-form input:focus { border-color: #909bad; outline: none; box-shadow: 0 0 0 3px #7183a514; }
.field-label { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.field-label a { font-size: 11px; color: #727987; }
.field-label a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.password-input { display: flex; align-items: center; position: relative; }
.auth-form .password-input > input { padding-right: 43px; }
.password-toggle { position: absolute; right: 5px; top: 6px; }
.password-toggle .icon { width: 16px; height: 16px; }
.field-hint { color: #7b818c; font-size: 11px; line-height: 1.55; font-weight: 400; }
.field-error { margin: 0; color: #b34343; font-size: 11px; line-height: 1.55; }
.auth-form input[aria-invalid="true"] { border-color: #c97b7b; }
.auth-form input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px #be656512; }
.auth-submit { width: 100%; min-height: 41px; margin-top: 5px; }
.auth-switch { margin-top: 24px; color: var(--muted); font-size: 12px; text-align: center; }
.auth-switch a { margin-left: 4px; color: #3c414c; font-weight: 500; }
.auth-switch a:hover { text-decoration: underline; text-underline-offset: 3px; }
.auth-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; min-height: 66px; padding-block: 20px; color: #92959e; font-size: 11px; }
.auth-back { display: inline-flex; align-items: center; gap: 7px; color: #707784; font-size: 12px; margin-top: 24px; }
.auth-back .icon { width: 14px; height: 14px; }
.auth-back:hover { color: #303947; }
.auth-email { color: #3e444f; font-weight: 500; overflow-wrap: anywhere; }
.auth-form .field > .verification-code { height: 48px; font-size: 23px; text-align: center; letter-spacing: .45em; padding-left: 22px; font-variant-numeric: tabular-nums; }
.auth-form .verification-code::placeholder { letter-spacing: .45em; color: #c0c4cc; }
.auth-code-note { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -4px 0 20px; font-size: 11px; color: #858c98; }
.auth-code-note code { font: 12px/1.5 var(--mono); color: #697384; letter-spacing: .05em; }
.auth-code-note button { color: #5e687b; font-size: 11px; padding: 0; }
.auth-code-note button:hover { text-decoration: underline; text-underline-offset: 3px; }
.auth-feedback { padding: 11px 13px; margin-bottom: 16px; border: 1px solid #e3e7ed; border-radius: 6px; color: #657082; background: #fafbfc; font-size: 11px; line-height: 1.6; }
.auth-stage-controls { display: flex; flex-direction: column; align-items: center; }
.auth-success-mark { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid #ddece3; border-radius: 11px; background: #f3faf6; color: #418a62; margin-bottom: 24px; }
.auth-success-mark .icon { width: 21px; height: 21px; }
.auth-success .auth-intro { margin-bottom: 25px; }
.auth-stage[hidden] { display: none; }
.auth-stage:not([hidden]) { animation: auth-in .2s ease-out; }
@keyframes auth-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 540px) {
  .auth-layout { padding: 47px 24px 52px; }
  .auth-intro h1 { font-size: 28px; }
  .auth-intro { margin-bottom: 28px; }
  .auth-support { font-size: 11px; gap: 5px; }
  .auth-footer { min-height: 60px; font-size: 10px; gap: 10px; }
  .auth-form .field > input, .auth-form .password-input > input { font-size: 16px; }
}
@media (max-width: 370px) {
  .auth-layout { padding: 38px 20px 44px; }
  .auth-intro h1 { font-size: 26px; }
  .auth-intro p { font-size: 12px; }
  .auth-code-note { font-size: 10px; gap: 8px; }
  .auth-code-note button { font-size: 10px; }
}