.gate {
  min-height: 100%;
  display: grid;
  place-content: center;
  justify-items: center;
  padding: 32px 16px 64px;
}

.gate-card {
  width: min(360px, 100%);
  display: grid;
  gap: 18px;
  padding: 26px 26px 24px;
  border: 1px solid var(--line);
  border-top: 2px solid var(--accent);
  border-radius: var(--r);
  background: var(--panel);
  box-shadow: var(--shadow);
  animation: rise 600ms var(--ease) both;
}

.gate-head { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.gate-head h1 { margin: 0; font-size: 20px; }

.code-field.reveal { animation: rise 260ms var(--ease) both; }

.gate-error {
  margin: 0;
  padding: 9px 11px;
  border-left: 2px solid var(--danger);
  background: var(--danger-soft);
  color: var(--text);
  font-size: 13.5px;
}

.gate-submit { height: 42px; justify-content: center; font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; }
.gate-submit[aria-busy="true"] { cursor: progress; }

@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }