:root { color-scheme: light dark; }
body {
  margin: 0; min-height: 100vh; display: grid; place-items: center;
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: #ffffff; color: #16181d;
}
main { width: min(360px, 88vw); text-align: center; }
h1 { font-size: 1.25rem; font-weight: 600; margin: 0 0 .5rem; }
p { margin: 0 0 1.5rem; opacity: .75; font-size: .9rem; }
button {
  width: 100%; padding: .8rem 1rem; font: inherit; font-weight: 600;
  border: 0; border-radius: .6rem; cursor: pointer;
  background: #2563eb; color: #fff;
}
button:disabled { opacity: .5; cursor: default; }
.error { margin-top: 1rem; font-size: .875rem; min-height: 1.25rem; color: #dc2626; }
a { font-weight: 600; text-decoration: none; color: #2563eb; }
a:hover { text-decoration: underline; }
@media (prefers-color-scheme: dark) {
  body { background: #0f1115; color: #e6e8eb; }
  .error { color: #f87171; }
  a { color: #6b9bff; }
}