* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; background: #14110d; color: #eadfc8; font: 16px/1.4 system-ui, sans-serif; }
main { width: min(340px, 100vw - 32px); }
h1 { margin: 0 0 4px; font-size: 28px; letter-spacing: .04em; }
.sub { margin: 0 0 20px; color: #a89a80; }
label { display: block; margin-bottom: 12px; font-size: 14px; color: #c9bb9f; }
input { display: block; width: 100%; margin-top: 4px; padding: 12px; font-size: 16px; color: inherit; background: #221d16; border: 1px solid #4a3f30; border-radius: 8px; }
input:focus { outline: 2px solid #d9a441; border-color: transparent; }
button { width: 100%; padding: 12px; font-size: 16px; font-weight: 600; color: #14110d; background: #d9a441; border: 0; border-radius: 8px; cursor: pointer; }
button:disabled { opacity: .6; cursor: wait; }
#err { min-height: 1.4em; margin: 12px 0 0; color: #e07a5f; font-size: 14px; }