/* Страницы входа и установки пароля: зелёный экран, форма в белом бабле. */

*, *::before, *::after { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  background: var(--brand);
  color: var(--ink);
  font: 400 16px/24px var(--font-text);
  -webkit-font-smoothing: antialiased;
}
h1, p { margin: 0; }
[hidden] { display: none !important; }

.gate {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding-block: max(32px, env(safe-area-inset-top, 0px)) max(32px, env(safe-area-inset-bottom, 0px));
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.gate__pattern { position: absolute; inset: 0; pointer-events: none; color: var(--green-80); }
.gate__pattern .vv-silhouette { position: absolute; }
.gate__p1 { width: 320px; height: 320px; left: -90px; top: -70px; transform: rotate(-16deg); }
.gate__p2 { width: 260px; height: 220px; right: -60px; top: 12%; transform: rotate(10deg); }
.gate__p3 { width: 280px; height: 280px; left: 8%; bottom: -120px; transform: rotate(22deg); }
.gate__p4 { width: 220px; height: 220px; right: 10%; bottom: -60px; transform: rotate(-12deg); }

.gate__col { position: relative; width: 100%; max-width: 440px; display: grid; gap: var(--space-5); }
.gate__logo { width: 196px; height: auto; }
.gate__card {
  --vv-bubble-pad: var(--space-6);
  --vv-bubble-tail-at: 0.16;
  --vv-bubble-rise: 16px;
  --vv-bubble-side: 12px;
  display: grid;
  gap: var(--space-4);
}
.gate__title { color: var(--ink); font-size: clamp(30px, 8vw, 40px); }
.gate__lead { color: var(--ink-muted); font-size: 15px; line-height: 22px; }
.gate__lead b { color: var(--ink); font-weight: 500; }
.gate__form { display: grid; gap: var(--space-4); }
.gate__form .vv-btn { width: 100%; margin-top: var(--space-1); }
.gate__note { color: var(--on-brand); font-size: 14px; line-height: 20px; padding-inline: var(--space-2); }
.gate__note a { color: inherit; font-weight: 500; }

.pw { position: relative; }
.pw .vv-input { padding-right: 48px; }
.pw__toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: var(--radius-s);
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
}
.pw__toggle:hover { color: var(--ink); background: var(--surface-tint); }
.pw__toggle svg { width: 20px; height: 20px; }

@media (max-width: 520px) {
  .gate__card { --vv-bubble-pad: var(--space-5); }
  .gate__p2, .gate__p4 { display: none; }
}