:root { color-scheme: light dark; font-family: system-ui, sans-serif; }
body { margin: 0; padding: 1.5rem 1rem; max-width: 28rem; margin-inline: auto; line-height: 1.4; }
h1 { font-size: 1.5rem; margin: 0 0 0.5rem; }
h2 { font-size: 1.1rem; margin: 0 0 0.75rem; }
.note { font-size: 0.9rem; opacity: 0.8; }
.panel { border: 1px solid rgba(127, 127, 127, 0.4); border-radius: 0.5rem; padding: 1rem; margin-block: 1rem; }
label { display: block; margin-bottom: 0.75rem; }
input { display: block; width: 100%; box-sizing: border-box; margin-top: 0.25rem; padding: 0.5rem; font: inherit; }
#user-code { text-transform: uppercase; letter-spacing: 0.15em; font-family: ui-monospace, monospace; }
button { font: inherit; padding: 0.5rem 1rem; border-radius: 0.375rem; border: 1px solid currentColor; background: transparent; cursor: pointer; }
button[disabled] { opacity: 0.5; cursor: wait; }
.actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.secondary { opacity: 0.8; }
.link { border: none; padding: 0; margin-top: 1rem; text-decoration: underline; }
#message { min-height: 1.5rem; font-weight: 600; }
#message.error { color: #b00020; }