:root { color-scheme: dark; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; background: #16202b; color: #fff;
  font: 16px/1.4 system-ui, sans-serif; }
main { width: min(360px, calc(100vw - 32px)); }
h1 { font-weight: 300; letter-spacing: 0.08em; text-align: center; text-transform: uppercase; }
form { display: grid; gap: 14px; }
label { display: grid; gap: 4px; font-size: 14px; }
input { font: inherit; padding: 10px 12px; border: 1px solid #3b5166; border-radius: 6px; background: #0e161f;
  color: inherit; }
input:focus { outline: 2px solid #2f9bff; outline-offset: 1px; }
.buttons { display: flex; gap: 10px; }
button { flex: 1; font: inherit; padding: 10px; border: 0; border-radius: 6px; background: #2f9bff; color: #fff;
  cursor: pointer; }
button[data-action="register"] { background: #3b5166; }
button:disabled { opacity: 0.6; cursor: default; }
#message { min-height: 1.4em; margin: 0; color: #ff8a80; font-size: 14px; }