/* Вход и регистрация: утверждённый эскиз docs/design/sketches/2-71-454-registration/auth.html,
   числа — numbers.md рядом. Все правила под .auth, чтобы не задеть другие экраны. */
.auth { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 24px; padding: 40px 24px 100px;
  background: linear-gradient(180deg, #2563eb 0, #2563eb 46%, #f0f2f5 46%); }
.auth a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.auth a:hover { color: var(--accent-dark); }
.auth .brand { display: flex; align-items: center; gap: 12px; color: #fff; font-size: 24px; font-weight: 600;
  letter-spacing: -.24px; text-decoration: none; }
.auth .brand:hover { color: #fff; }
.auth .brand-mark { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px;
  background: #fff; color: var(--accent); }
.auth .icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round;
  stroke-linejoin: round; }
.auth .brand-mark .icon { width: 24px; height: 24px; }
.auth .card { width: 568px; max-width: 100%; padding: 32px; background: #fff; border: 1px solid var(--line);
  border-radius: 14px; box-shadow: 0 10px 30px #0f285a29; }
.auth .card.compact { width: 400px; }
.auth h1 { font-size: 22px; line-height: 30px; font-weight: 500; letter-spacing: -.22px; color: var(--ink); }
.auth .trial { margin-top: 8px; margin-bottom: 0; color: var(--muted); }
.auth .recipient { margin-top: 8px; color: var(--muted); }
.auth .fields { display: flex; flex-direction: column; gap: 16px; }
.auth .compact .fields { margin-top: 24px; }
.auth .fio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.auth .field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.auth label { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ink); }
.auth input:not([type=checkbox]), .auth select { width: 100%; height: 40px; padding: 0 12px; border: 1px solid #cbd2dd;
  border-radius: 6px; background: #fff; color: var(--ink); font: inherit; }
.auth input::placeholder { color: var(--muted); }
.auth input:hover, .auth select:hover { border-color: #98a5b8; }
.auth input:focus, .auth select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px #2563eb18; }
.auth input[aria-invalid=true] { border-color: var(--red); box-shadow: 0 0 0 3px #b23c4812; }
.auth .code-input { height: 48px; font-size: 22px; letter-spacing: 8px; }
.auth .error { margin: 0; color: var(--red); font-size: 13px; line-height: 18px; }
.auth .form-error { margin-top: 16px; }
.auth .password-wrap { position: relative; }
.auth .password-wrap input { padding-right: 44px; }
.auth .eye { position: absolute; right: 6px; top: 6px; width: 28px; height: 28px; padding: 0; display: grid;
  place-items: center; border: 0; border-radius: 6px; background: #fff; color: var(--muted); cursor: pointer; }
.auth .eye:hover { background: #f7f8fa; }
.auth .eye .icon { width: 16px; height: 16px; }
.auth .password-label { display: flex; justify-content: space-between; align-items: center; }
.auth .email-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 16px 0 24px; }
.auth .email-address { overflow-wrap: anywhere; }
.auth .email-line .link-button { flex: none; }
.auth .verified { display: flex; align-items: center; gap: 6px; color: #187452; }
.auth .verified .icon { width: 16px; height: 16px; }
.auth .consent { margin-top: 24px; }
.auth .consent-row { display: flex; gap: 10px; align-items: flex-start; }
.auth .consent-row input { flex: none; appearance: none; -webkit-appearance: none; margin: 2px 0 0; width: 18px; height: 18px;
  border: 1px solid #9ba7b8; border-radius: 4px; background: #fff; cursor: pointer; }
.auth .consent-row input:checked { background: var(--accent); border-color: var(--accent); }
.auth .consent-row input:checked::after { content: ""; display: block; width: 9px; height: 5px; border: solid white;
  border-width: 0 0 2px 2px; transform: rotate(-45deg); margin: 4px 3px; }
.auth .consent-row input[aria-invalid=true] { border-color: var(--red); }
.auth .consent-text { font-size: 13px; font-weight: 400; line-height: 20px; }
.auth .consent .error { margin-top: 6px; padding-left: 28px; }
.auth .primary { width: 100%; height: 44px; margin-top: 24px; border: 1px solid transparent; border-radius: 8px;
  background: var(--accent); color: #fff; font-size: 15px; font-weight: 500; cursor: pointer;
  box-shadow: inset 0 1px 0 #ffffff25, 0 2px 3px #174dc618; }
.auth .primary:hover { background: var(--accent-dark); }
.auth .primary:disabled { opacity: .7; cursor: default; }
.auth .link-button { padding: 0; border: 0; background: none; color: var(--accent); font-size: 13px;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.auth .link-button:hover { color: var(--accent-dark); }
.auth .resend { margin-top: 20px; display: flex; align-items: center; justify-content: space-between; font-size: 13px;
  color: var(--muted); }
.auth button:focus-visible, .auth a:focus-visible, .auth input[type=checkbox]:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px; }
/* Узкий экран: в эскизе не нарисован — колонки в одну, поля карточки не шире экрана */
@media (max-width: 620px) {
  .auth { padding: 24px 16px 40px; }
  .auth .card { padding: 24px; }
  .auth .fio { grid-template-columns: minmax(0, 1fr); }
}