/* ============================================================
   Вход (/login, /admin/login) · дизайн-система A.
   Кнопки, поля и плашки — из /ui.css; здесь только раскладка страницы.
   Только var(--…) из tokens.css.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { min-height: 100%; background: var(--bg); }
body {
  margin: 0; min-height: 100dvh;
  font: var(--t-body); font-family: var(--sans);
  background: var(--bg); /* непрозрачный: из него tg-bridge берёт цвет шапки Telegram */
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
#root { min-height: 100dvh; }

/* ---------- Раскладка ---------- */
.welcome-wrap {
  min-height: 100dvh;
  display: grid; place-items: center;
  padding:
    max(var(--space-6), env(safe-area-inset-top), var(--tg-safe-top, 0px))
    max(var(--space-6), env(safe-area-inset-right), var(--tg-safe-right, 0px))
    max(var(--space-6), env(safe-area-inset-bottom), var(--tg-safe-bottom, 0px))
    max(var(--space-6), env(safe-area-inset-left), var(--tg-safe-left, 0px));
}

.welcome-card {
  width: 400px; max-width: 100%;
  padding: var(--space-8);
  display: flex; flex-direction: column; gap: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
}

.welcome-brand { display: flex; flex-direction: column; gap: var(--space-1); }
.welcome-brand-sub { font: var(--t-small); color: var(--ink-2); }

.welcome-title { margin: var(--space-2) 0 0; font: var(--t-h2); }
.welcome-lead { margin: calc(var(--space-2) * -1) 0 0; font: var(--t-small); color: var(--ink-2); }
.welcome-hint { margin: 0; text-align: center; font: var(--t-small); color: var(--ink-2); }
.welcome-back { align-self: center; font: var(--t-small); }

.pass-row { display: flex; align-items: center; gap: var(--space-2); }
.pass-row .input { flex: 1; min-width: 0; }

.login-success {
  padding: var(--space-3); background: var(--green-bg); color: var(--green-ink);
  border-radius: var(--r-m); font: var(--t-small);
}

/* ---------- Узкие экраны и Telegram Mini App ---------- */
@media (max-width: 480px) {
  /* якорим сверху: экранная клавиатура не перекрывает форму */
  .welcome-wrap { align-items: start; padding-top: max(var(--space-6), env(safe-area-inset-top), var(--tg-safe-top, 0px)); }
  .welcome-card { width: 100%; padding: var(--space-6) var(--space-5); margin: auto 0; }
  /* 16px — чтобы iOS не зумил страницу при фокусе поля */
  .input { font-size: 16px; }
}
html[data-tg] .welcome-wrap { align-items: start; }
html[data-tg] .welcome-card { margin: auto 0; }
html[data-tg-fullscreen] .welcome-wrap { padding-top: max(var(--space-6), var(--tg-safe-top, 0px)); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }