.auth-page { min-width: 320px; }
.auth-shell { width: min(100% - 40px, 440px); min-height: 100vh; margin: 0 auto; padding: 54px 0; display: flex; flex-direction: column; justify-content: center; }
.auth-brand { align-self: center; display: inline-flex; margin-bottom: 26px; }
.auth-brand img { display: block; width: 148px; height: 34px; }
.auth-card { padding: 34px; border-radius: var(--radius-card); background: var(--surface); }
.auth-card__header { margin-bottom: 30px; }
.auth-card__header h1 { margin: 0 0 9px; font-size: 30px; line-height: 1; letter-spacing: -.05em; }
.auth-card__header p { margin: 0; color: #666; font-size: 15px; line-height: 1.3; }
.auth-form { display: grid; gap: 19px; }
.auth-field { display: grid; gap: 8px; }
.auth-field label { color: var(--ink); font-size: 14px; font-weight: 700; }
.auth-field input { width: 100%; min-height: 48px; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface); color: var(--ink); font: inherit; outline: none; transition: border-color .18s ease, box-shadow .18s ease; }
.auth-field input:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgb(0 0 0 / 8%); }
.auth-form__message, .auth-field__error { color: #9c2020; font-size: 13px; line-height: 1.3; }
.auth-form__message ul, .auth-field__error ul { padding: 0; margin: 0; list-style: none; }
.auth-submit { width: 100%; min-height: 48px; margin-top: 5px; padding: 10px 18px; border: 1px solid var(--ink); border-radius: var(--radius-pill); background: var(--ink); color: var(--surface); cursor: pointer; font: inherit; font-size: 15px; font-weight: 700; transition: background-color .18s ease, color .18s ease; }
.auth-submit:hover { background: var(--surface); color: var(--ink); }
.auth-submit:focus-visible { outline: 3px solid rgb(0 0 0 / 18%); outline-offset: 3px; }
@media (max-width: 767px) {
  .auth-shell { width: min(100% - 32px, 440px); justify-content: flex-start; padding: 34px 0; }
  .auth-brand { margin-bottom: 22px; }
  .auth-card { padding: 27px 22px; border-radius: var(--radius-card); }
  .auth-card__header { margin-bottom: 25px; }
  .auth-card__header h1 { font-size: 28px; }
}
