:root { color-scheme: dark; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', sans-serif; background: #130b07; color: #fff; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100dvh; background: linear-gradient(#38261e, #130b07); }
main { max-width: 480px; margin: auto; padding: calc(56px + env(safe-area-inset-top)) 24px calc(32px + env(safe-area-inset-bottom)); }
h1 { font-size: 24px; line-height: 1.5; margin: 0 0 40px; color: #ffe0c3; }
label { display: block; margin: 24px 0 10px; color: #d0b9a7; }
input { width: 100%; min-width: 0; padding: 14px; font: inherit; font-size: 18px; border: 1px solid #927968; border-radius: 8px; background: #261910; color: #fff; }
.code-row { display: flex; gap: 12px; align-items: stretch; }
.code-row input { flex: 1; }
button { min-height: 48px; padding: 10px 16px; font: inherit; border: 0; border-radius: 24px; background: #ffe0c3; color: #633914; cursor: pointer; }
button:disabled { opacity: .55; cursor: default; }
#send { flex-shrink: 0; border-radius: 8px; }
#submit { width: 100%; margin-top: 12px; }
#status { min-height: 48px; line-height: 1.5; color: #ffe0c3; overflow-wrap: anywhere; }
:focus-visible { outline: 2px solid #ffb982; outline-offset: 3px; }
.consent-row { display: flex; gap: 10px; align-items: flex-start; margin-top: 24px; font-size: 14px; line-height: 1.8; color: #d0b9a7; }
#consent { width: 20px; height: 20px; padding: 0; flex: 0 0 20px; margin-top: 4px; accent-color: #ffe0c3; }
.text-button { min-height: 44px; padding: 0 2px; background: transparent; color: #ffe0c3; border-radius: 0; text-decoration: underline; text-underline-offset: 4px; }
dialog { width: min(92vw, 600px); max-height: 90dvh; padding: 20px; border: 1px solid #927968; border-radius: 12px; background: #261910; color: #fff; }
dialog::backdrop { background: rgb(0 0 0 / 65%); }
dialog h2 { margin: 0 0 16px; font-size: 20px; }
#agreement-content { display: block; width: 100%; height: 55dvh; border: 0; background: white; margin-bottom: 16px; }