* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 28px 24px; background: #f7f8fc; color: #202939; font-family: system-ui, sans-serif; }
main { width: 100%; max-width: 360px; }
main > img { display: block; margin-bottom: 12px; }
.brand { font-size: 14px; font-weight: 650; color: #69758c; margin: 0 0 24px; }
h1 { font-size: 30px; letter-spacing: -.04em; margin: 0 0 8px; }
#description { color: #6b7588; line-height: 1.5; margin: 0 0 28px; }
form { display: flex; flex-direction: column; gap: 9px; }
label { font-size: 14px; font-weight: 550; }
input { width: 100%; border: 1px solid #dce1eb; border-radius: 12px; background: white; padding: 13px 14px; font: inherit; margin-bottom: 12px; }
button { min-height: 48px; border: 0; border-radius: 12px; background: #5867e9; color: white; font: inherit; font-weight: 600; cursor: pointer; margin-top: 6px; }
button:disabled { opacity: .65; cursor: wait; }
:focus-visible { outline: 3px solid #a5adff; outline-offset: 3px; }
#error { font-size: 14px; color: #b33243; line-height: 1.5; }
[hidden] { display: none !important; }