/* ─── Вход в браузере (03.09.2026) ────────────────────────────────────────
   Экран видит только тот, кто открыл приложение НЕ из Telegram. Идиома та же,
   что у остального: серая канва, белая карточка, зелёный акцент.
   ──────────────────────────────────────────────────────────────────────── */

#screen-login {
  min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-6) var(--sp-4);
  background: var(--canvas);
}

.lg-box { width: 100%; max-width: 380px; }

.lg-brand {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: var(--sp-6);
}
/* Скругление здесь, а не в картинке: сама иконка идёт полем до края — iOS
   накладывает СВОЮ маску, и вторая поверх первой выглядит как картинка
   внутри иконки (см. докстринг `scripts/make_web_icons.py`). */
.lg-brand .mark {
  width: 40px; height: 40px; border-radius: 12px; display: block;
}
.lg-brand .name {
  font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: var(--ink);
}

.lg-card {
  background: var(--bg); border-radius: var(--r);
  padding: var(--sp-4); box-shadow: var(--shadow);
}
.lg-card h1 {
  margin: 0 0 4px; font-size: var(--fs-title); font-weight: 700; color: var(--ink);
}
.lg-card .sub { margin: 0 0 var(--sp-4); color: var(--ink-soft); font-size: var(--fs-small); }

.lg-field { margin-bottom: var(--sp-3); }
.lg-field label {
  display: block; margin-bottom: 5px;
  font-size: var(--fs-meta); font-weight: 600; letter-spacing: .02em;
  text-transform: uppercase; color: var(--ink-soft);
}
.lg-field input {
  width: 100%; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--bg); color: var(--ink);
  padding: 12px 13px; font: inherit; font-size: var(--fs-ui);
}
.lg-field input:focus { border-color: var(--accent); outline: none; }
/* Код второго шага — цифры вразрядку: шесть слипшихся цифр читаются как одно
   число, и опечатку в них не видно. */
.lg-field input.code {
  letter-spacing: .5em; text-align: center; font-size: 22px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.lg-btn {
  width: 100%; border: 0; border-radius: var(--r-sm); padding: 13px;
  background: var(--accent); color: var(--on-accent);
  font: inherit; font-size: var(--fs-ui); font-weight: 700;
}
.lg-btn:disabled { opacity: .55; }
.lg-back {
  width: 100%; border: 0; background: none; color: var(--ink-soft);
  font: inherit; font-size: var(--fs-small); padding: 12px 0 0;
}

.lg-err {
  margin: 0 0 var(--sp-3); padding: 10px 12px;
  background: var(--danger-soft); color: var(--danger);
  border-radius: var(--r-sm); font-size: var(--fs-small);
}
.lg-note {
  margin: var(--sp-3) 0 0; color: var(--ink-soft);
  font-size: var(--fs-small); text-align: center;
}
/* Код, показанный на экране, — это НЕ второй фактор, и экран обязан сказать
   это прямо, а не выглядеть защищённым. */
.lg-onscreen {
  margin: var(--sp-3) 0 0; padding: 10px 12px;
  background: var(--warn-soft); color: var(--warn);
  border-radius: var(--r-sm); font-size: var(--fs-small);
}