* { box-sizing: border-box; }
body { margin: 0; padding: 2rem 1rem; min-height: 100vh; display: grid; place-items: center; background: #f4f6f8; color: #182333; font: 1rem/1.5 system-ui, sans-serif; }
.card { width: 100%; max-width: 30rem; padding: 2rem; background: white; border: 1px solid #dce2e8; border-radius: .75rem; }
h1 { font-size: 1.5rem; margin-top: 0; }
h2 { font-size: 1.2rem; }
form { display: grid; gap: .7rem; }
input, button { width: 100%; padding: .75rem; border: 1px solid #7c8999; border-radius: .3rem; font: inherit; }
button { margin-top: .7rem; background: #203c61; color: white; cursor: pointer; }
button:hover { background: #142d4e; }
:focus-visible { outline: 3px solid #2873c6; outline-offset: 3px; }
.error { padding: .7rem; color: #8c1726; background: #fff0f1; }