:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { display: grid; place-items: center; padding: 24px; background: #0C1412; color: #DCE3DD; font: 17px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
main { width: 100%; max-width: 320px; }
h1 { margin: 0 0 28px; font-size: 28px; font-weight: 500; letter-spacing: .02em; text-align: center; }
form { display: grid; gap: 10px; }
label { font-size: 14px; color: #9AA8A0; }
input { width: 100%; padding: 14px 16px; border: 1px solid #2A3833; border-radius: 12px; background: #13201C; color: inherit; font: inherit; font-size: 20px; }
#code { letter-spacing: .18em; text-align: center; text-transform: uppercase; }
#nom { font-size: 17px; }
input:focus { outline: 2px solid #6F8F80; outline-offset: 1px; }
button { margin-top: 12px; padding: 14px; border: 0; border-radius: 12px; background: #DCE3DD; color: #0C1412; font: inherit; font-weight: 600; cursor: pointer; }
button:disabled { opacity: .5; cursor: default; }
#message { min-height: 1.4em; margin: 6px 0 0; color: #E5764C; text-align: center; }