:root { color-scheme: light dark; --bg: #f6f7f9; --fg: #14171c; --ok: #0a7a3d; --bad: #b3261e; --line: #c9ced6; --btn: #1f4fd8; }
@media (prefers-color-scheme: dark) { :root { --bg: #14171c; --fg: #e8eaee; --ok: #5ad08a; --bad: #ff8a80; --line: #3a414c; --btn: #6c8dff; } }
html, body { background: var(--bg); color: var(--fg); margin: 0; font: 16px/1.5 system-ui, sans-serif; }
main { max-width: 28rem; margin: 0 auto; padding: 2rem 16px; }
button { font: inherit; padding: .7rem 1rem; border: 1px solid var(--btn); background: var(--btn); color: #fff; border-radius: .5rem; cursor: pointer; }
button:disabled { opacity: .5; cursor: progress; }
#register { width: 100%; margin: 1rem 0; }
details { border: 1px solid var(--line); border-radius: .5rem; padding: .75rem 1rem; }
input { width: 100%; box-sizing: border-box; padding: .6rem; margin: .4rem 0 .8rem; font: inherit; border: 1px solid var(--line); border-radius: .4rem; background: transparent; color: inherit; }
#status.ok { color: var(--ok); } #status.bad { color: var(--bad); }