* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--pe-bg); color: var(--pe-text); font: var(--pe-body); display: flex; align-items: center; justify-content: center; min-height: 100dvh; padding: 24px 16px calc(24px + env(safe-area-inset-bottom)); }
.card { width: 100%; max-width: 380px; }
.mark img { display: block; height: 36px; width: auto; margin: 0 0 40px; }
h1 { font: 800 34px/40px var(--pe-font); font-stretch: 85%; margin: 0 0 8px; letter-spacing: -0.01em; }
.sub { font: var(--pe-subhead); color: var(--pe-text-2); margin: 0 0 24px; }
label { display: block; font: var(--pe-label); text-transform: uppercase; letter-spacing: .08em; color: var(--pe-text-2); margin: 0 0 6px; }
input { width: 100%; font: 400 19px/24px var(--pe-font); padding: 14px 14px; border-radius: var(--pe-radius-control); border: 1px solid var(--pe-separator); background: var(--pe-surface); color: var(--pe-text); }
input:focus { outline: 2px solid var(--pe-tint); outline-offset: 1px; border-color: transparent; }
#code { font: 700 28px/32px var(--pe-font); letter-spacing: .3em; text-align: center; }
#captcha { margin: 16px 0 0; min-height: 0; }
button { width: 100%; font: var(--pe-headline); border-radius: var(--pe-radius-control); padding: 15px; border: 0; cursor: pointer; margin-top: 16px; }
.primary { background: var(--pe-red); color: var(--pe-on-tint); }
.primary:active { background: var(--pe-sleeper); }
.primary[disabled] { opacity: .5; cursor: default; }
.plain { background: none; color: var(--pe-text-2); margin-top: 8px; text-decoration: underline; text-underline-offset: 3px; }
#msg { font: var(--pe-footnote); color: var(--pe-text-2); min-height: 18px; margin: 16px 0 0; }
#msg.err { color: var(--pe-tint); }