.gate { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.gate__card { width: 100%; max-width: 400px; padding: 44px 34px 34px; text-align: center; }
.gate__crest { width: 84px; height: 84px; margin: 0 auto 18px; color: var(--gold-400); filter: drop-shadow(0 0 20px rgba(201, 162, 74, 0.45)); }
.gate__title { font-family: var(--font-display); font-weight: 900; font-size: 26px; letter-spacing: 0.34em; padding-left: 0.34em; }
.gate__sub { margin: 10px 0 26px; font-size: 11px; letter-spacing: 0.34em; text-transform: uppercase; color: var(--muted); }

.field { position: relative; margin-bottom: 14px; }
.field .icon { position: absolute; left: 14px; top: 50%; width: 17px; height: 17px; transform: translateY(-50%); color: var(--gold-600); }
.field input {
  width: 100%;
  padding: 13px 14px 13px 42px;
  font: 500 16px var(--font-label); /* 16px evita o zoom automático do iPhone ao focar o campo */
  letter-spacing: 0.1em;
  color: var(--cream);
  background: var(--ink-950);
  border: 1px solid var(--line);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field input::placeholder { color: var(--muted); letter-spacing: 0.2em; text-transform: uppercase; font-size: 12px; }
.field input:focus { border-color: var(--gold-400); box-shadow: 0 0 0 3px rgba(201, 162, 74, 0.18); }

.gate .btn { width: 100%; justify-content: center; padding: 13px; color: var(--ink-950); background: linear-gradient(180deg, var(--gold-300), var(--gold-500)); border-color: var(--gold-400); }
.gate .btn:hover:not(:disabled) { background: linear-gradient(180deg, var(--gold-200), var(--gold-400)); }
.gate__err { min-height: 20px; margin-bottom: 8px; font-size: 13px; color: var(--blood-400); }
.gate__foot { margin-top: 22px; font-size: 10.5px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--muted); }
.gate__card.is-shake { animation: shake 0.4s; }
@keyframes shake { 20%, 60% { transform: translateX(-9px); } 40%, 80% { transform: translateX(9px); } }
@media (prefers-reduced-motion: reduce) { .gate__card.is-shake { animation: none; } }