:root { --red: #e63946; --red-dark: #b8202d; --blue: #2f7dd9; --ink: #232042; --paper: #fffaf3; --line: #eadfd3; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--paper); color: var(--ink); font-family: 'Avenir Next', 'Trebuchet MS', system-ui, sans-serif; display: grid; place-items: center; padding: 16px; }
form { background: #fff; border-radius: 36px; box-shadow: 0 14px 40px rgba(35,32,66,.14); padding: 36px 32px; width: min(460px, 100%); display: flex; flex-direction: column; gap: 18px; text-align: center; }
.logo { font-size: 84px; line-height: 1; }
h1 { margin: 0; color: var(--red); font-size: 40px; }
label { display: flex; align-items: center; gap: 12px; background: var(--paper); border-radius: 22px; padding: 6px 16px; border: 3px solid var(--line); }
label span { font-size: 34px; }
input { flex: 1; min-width: 0; border: 0; background: none; font-size: 30px; padding: 14px 0; color: var(--ink); outline: none; font-family: inherit; }
button { height: 84px; border: 0; border-radius: 28px; background: var(--red); color: #fff; font-size: 38px; font-weight: 700; box-shadow: 0 7px 0 var(--red-dark); cursor: pointer; font-family: inherit; }
button:active { transform: translateY(5px); box-shadow: 0 2px 0 var(--red-dark); }
.err { color: var(--red); font-size: 22px; min-height: 28px; margin: 0; }
.parent { font-size: 16px; color: #8a86a8; }