/* Страница входа: тот же язык, что у рабочих экранов. Каркас кнопок, полей,
   ошибки и полосы ошибок — общий слой ui.css; здесь только раскладка страницы. */

.login-page{min-height:100dvh;display:flex;align-items:center;justify-content:center;
  padding:24px 14px;padding-bottom:calc(24px + env(safe-area-inset-bottom))}

/* одна панель по центру — на экране больше ничего нет */
.login{width:100%;max-width:380px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-panel);padding:26px 24px 20px;display:flex;flex-direction:column;gap:16px}
.login-brand{display:flex;align-items:center;gap:9px}
/* на узком экране ui.css прячет .brand-name — там это горизонтальное меню, а здесь шапка входа */
.login-brand .brand-name{display:inline}
.login h1{margin:0;font-size:24px;font-weight:800;color:var(--ink);letter-spacing:-0.02em;line-height:1.1}

form{display:flex;flex-direction:column;gap:14px}
.field{display:flex;flex-direction:column;gap:5px}
/* поле как в диалогах, но крупнее: 16px — чтобы iOS не зумил страницу при фокусе */
.login .dlg-input{min-height:46px;font-size:16px;font-weight:600}
.login .dlg-input:focus-visible{border-color:var(--green-2)}

.login .btn{margin-top:2px;min-height:48px;width:100%;font-size:15px;font-weight:700}

.login .dlg-err{font-weight:600;overflow-wrap:anywhere}

.hint{margin:0;padding-top:14px;border-top:1px solid var(--line-2);font-size:12.5px;
  color:var(--muted);text-align:center;line-height:1.5}
.hint b{font-weight:700;color:var(--ink-2)}
.hint[hidden]{display:none}