:root { color-scheme: light dark; font-family: -apple-system, system-ui, "Segoe UI", Roboto, sans-serif; }
body { margin: 0; padding: 1.5rem; display: flex; justify-content: center; }
main { width: 100%; max-width: 26rem; }
h1 { font-size: 1.5rem; margin: 0 0 1rem; }
label { display: block; margin: 1rem 0 .35rem; font-weight: 600; }
input, select, button { width: 100%; box-sizing: border-box; padding: .7rem; font-size: 1rem; border-radius: .5rem; border: 1px solid #8888; }
input[type=checkbox] { width: auto; margin-right: .5rem; }
label.check { font-weight: 400; }
button { margin-top: 1.5rem; background: #1a5fb4; color: #fff; border: 0; font-weight: 600; cursor: pointer; }
.note { font-size: .875rem; opacity: .75; margin-top: 1rem; }
.error { color: #c01c28; font-weight: 600; }
.ok { color: #26a269; font-weight: 600; }
h2 { font-size: 1.15rem; margin: 2rem 0 .5rem; }
button.secondary { background: transparent; color: inherit; border: 1px solid #8888; font-weight: 400; margin-top: .5rem; }
form.inline { margin: 0; }
ul.codes { list-style: none; padding: 0; margin: 0 0 1rem; }
ul.codes li { padding: .75rem 0; border-bottom: 1px solid #8884; }
.newcode { border: 2px solid #1a5fb4; border-radius: .5rem; padding: .75rem 1rem; margin-bottom: 1rem; }
.code { font-size: 2.25rem; font-weight: 700; letter-spacing: .15em; text-align: center; margin: .5rem 0; font-family: ui-monospace, Menlo, monospace; }