:root { color-scheme: light dark; --teal:#1f6f6a; }
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; display:flex; align-items:center; justify-content:center; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; background:#f3f7f6; }
.card { width:min(92vw,380px); background:#fff; padding:28px; border-radius:14px; box-shadow:0 6px 24px rgba(0,0,0,.08); }
h1 { margin:0 0 4px; color:var(--teal); }
.muted { margin:0 0 20px; color:#667; font-size:14px; }
label { display:block; font-weight:600; margin-bottom:6px; }
#code-row { margin-top:14px; }
#code:not(:placeholder-shown) { letter-spacing:4px; }
input { width:100%; padding:11px 12px; font-size:16px; border:1px solid #bcc9c7; border-radius:8px; }
button { width:100%; margin-top:14px; padding:12px; font-size:16px; font-weight:600; color:#fff; background:var(--teal); border:0; border-radius:8px; cursor:pointer; }
.msg { min-height:20px; margin:12px 0 0; color:#b3261e; font-size:14px; }