/* Вход (spec §5): одна колонка 400 px на тёмной сцене. Кнопки, поля, шаги, shake — из base.css. */
body{background:transparent}   /* иначе фон body закрывает .scene (z-index:-1) */
.auth{display:flex;flex-direction:column;min-height:100dvh;max-width:432px;margin:0 auto;
  padding:calc(16px + var(--safe-top)) 16px calc(24px + var(--safe-bottom));outline:none}
.auth-brand{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;min-height:44px;font-size:17px;font-weight:700;letter-spacing:-.02em}
.auth-logo{width:28px;height:28px;fill:var(--text)}
#auth-stage{padding-top:clamp(24px,9vh,88px);overflow-x:clip}
.auth-title{margin:0 0 8px;font-size:32px;font-weight:700;letter-spacing:-.035em;line-height:1.06;text-wrap:balance}
[data-step=email] .auth-title{margin-bottom:24px}
.auth-text{margin:0 0 24px;color:var(--muted)}
.auth-text b,.auth-who{color:var(--text);font-weight:600}
.auth-mail{overflow-wrap:anywhere}
.auth-who{margin:0 0 24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.auth-gap{margin-top:10px}
.auth-notice{margin:0 0 20px}
.auth-notice .link,.auth-note .link{display:inline-flex;align-items:center;min-height:44px}

/* Telegram и подпись */
.tg-glyph{width:20px;height:17px;fill:currentColor}
.tg-widget{display:flex;justify-content:center;align-items:center;min-height:54px}
.tg-widget iframe{max-width:100%}
.auth-note{margin:10px 0 0;color:var(--muted);font-size:13px;text-align:center}
.auth-or{display:flex;align-items:center;gap:12px;margin:24px 0 20px;color:var(--muted);font-size:14px}
.auth-or::before,.auth-or::after{content:"";flex:1;height:1px;background:var(--line)}

/* поле на тёмном: в base.css .text-input светлое */
.auth .field{margin-bottom:14px}
.auth .field-label{color:var(--muted);cursor:pointer}
.auth .text-input{background:var(--surface);border-color:var(--surface-3);color:var(--text)}
.auth .text-input:focus{border-color:var(--lime)}
.auth .text-input::placeholder{color:var(--faint)}
.auth .text-input[aria-invalid=true]{border-color:var(--danger)}
.auth .text-input:-webkit-autofill{-webkit-text-fill-color:var(--text);box-shadow:0 0 0 40px var(--surface) inset;caret-color:var(--text)}

/* сообщения: контейнер role=alert есть всегда, иначе первое сообщение не будет озвучено */
.auth-err{color:var(--danger);font-size:14px;line-height:1.4}
.auth-err:not(:empty){margin:8px 4px 0}
.auth-err-top:not(:empty){margin:0 0 20px;padding:14px 18px;border-radius:var(--r);background:rgba(255,122,107,.1)}
.auth-status{min-height:0;margin:0;color:var(--muted);font-size:14px;text-align:center}
.auth-status:not(:empty){margin-top:12px}
.auth-hint{margin:12px 0 0;color:var(--muted);font-size:14px;text-align:center}
.auth-captcha{margin:0 0 14px}

/* код: одно настоящее поле поверх шести ячеек, поэтому автозаполнение и вставка работают как в обычном поле */
.otp{position:relative;margin:0 0 4px}
.otp.shake{animation:shake .32s var(--ease-out)}
.otp-cells{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.otp-cell{display:grid;place-items:center;height:60px;border-radius:var(--r);border:1.5px solid var(--surface-3);background:var(--surface);
  font-family:var(--num);font-size:22px;font-weight:600;transition:border-color .16s var(--ease-out)}
.otp-cell.on{border-color:var(--lime)}
.otp-bad .otp-cell{border-color:var(--danger)}
.otp input{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;background:transparent;font-size:16px;
  color:transparent;-webkit-text-fill-color:transparent;caret-color:transparent;cursor:text}
.otp input::selection{background:transparent;color:transparent}
#code-form{margin-bottom:6px}
#code-form .btn{margin-top:14px}
#code-step .btn-quiet{display:flex}
#code-step .btn-quiet:disabled{cursor:default;color:var(--muted)}
.btn:disabled{opacity:.45;cursor:default}
.btn-quiet:disabled{opacity:1;font-variant-numeric:tabular-nums}

/* Google и Яндекс */
.auth-alt{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:24px}
.auth-alt .btn{padding:0 12px}
.auth-alt .btn:only-child{grid-column:1/-1}
.auth-alt .btn:not(:only-child) .alt-pre{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.alt-ic{width:20px;height:20px}

.auth-foot{margin-top:auto;padding-top:32px;color:var(--muted);font-size:13px;text-align:center;text-wrap:balance}
.auth-foot p{margin:0}
.auth-foot a{display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}

@media (hover:hover) and (pointer:fine){
  .auth-brand{transition:opacity .2s var(--ease-out)}
  .auth-brand:hover{opacity:.72}
  .auth-foot a:hover{color:var(--text)}
}
@media (max-width:360px){.auth-title{font-size:28px}.otp-cells{gap:6px}.otp-cell{height:56px;font-size:20px}}
@media (prefers-reduced-motion:reduce){.otp.shake{animation:none}}