.auth-card {
  width: min(520px, calc(100% - 32px));
  margin: 42px auto;
  padding: 34px;
  border: 2px solid var(--ink);
  background: var(--paper);
  box-shadow: 0 16px 40px var(--shadow);
}
.auth-card small { font: 10px/1.5 "Courier New", monospace; letter-spacing: .15em; color: var(--red); }
.auth-card h2 { margin: 8px 0 10px; font-size: 30px; }
.auth-card > div > p { color: var(--muted); line-height: 1.5; }
.auth-form { display: grid; gap: 16px; margin-top: 24px; }
.auth-form button { justify-self: end; }
.auth-status { min-height: 1.4em; margin: 18px 0 0; color: var(--red); font-size: 13px; }
.invite-result { margin: 18px 0 0; padding: 16px; border: 1px dashed var(--red); }
.invite-result p { margin: 7px 0 12px; color: var(--muted); font-size: 13px; }
.invite-result div { display: grid; grid-template-columns: 1fr auto; gap: 8px; }

@media (max-width: 560px) {
  .auth-card { width: 100%; margin: 0; border-width: 0 0 2px; padding: 26px 18px; }
  .invite-result div { grid-template-columns: 1fr; }
}