:root { color-scheme: dark; }
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100dvh; display: grid; place-items: center; padding: 16px;
  background: radial-gradient(ellipse at top, #1b1b22, #0b0b0d 60%); color: #ececf1;
  font: 15px/1.45 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.card {
  width: min(360px, 100%); background: #141418; border: 1px solid #2a2a33; border-radius: 20px;
  padding: 28px; display: grid; gap: 12px; justify-items: center; text-align: center;
}
h1 { margin: 4px 0 0; font-size: 20px; }
p { margin: 0; color: #8d8d99; font-size: 14px; }
input, button { width: 100%; font: inherit; border-radius: 12px; padding: 11px 14px; }
input { background: #0b0b0d; border: 1px solid #2a2a33; color: #ececf1; }
input:focus { outline: 2px solid #f5f5f7; outline-offset: 1px; }
button { background: #f5f5f7; color: #0b0b0d; border: 0; font-weight: 600; cursor: pointer; }
button:disabled { opacity: .6; cursor: progress; }
.error { color: #ff5c6c; }
[hidden] { display: none !important; }