:root { color-scheme: light dark; font-family: ui-sans-serif, system-ui, sans-serif; color: #18181b; background: #fafafa; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; display: grid; place-items: center; padding: 24px; }
main { width: min(100%, 360px); }
h1 { font-size: 1.25rem; font-weight: 600; letter-spacing: -.025em; text-align: center; margin: 0 0 24px; }
.brand { font-size: 1.5rem; font-weight: 650; text-align: center; margin-bottom: 32px; }
form { display: grid; gap: 16px; }
label { display: grid; gap: 8px; font-size: .875rem; font-weight: 500; }
input, button { font: inherit; border-radius: 8px; padding: 11px 12px; min-height: 44px; }
input { border: 1px solid #d4d4d8; background: white; color: inherit; width: 100%; }
button { cursor: pointer; background: #18181b; border: 1px solid #18181b; color: white; }
button:disabled { opacity: .6; cursor: wait; }
button.secondary { color: inherit; background: transparent; border-color: #d4d4d8; }
:focus-visible { outline: 2px solid #71717a; outline-offset: 3px; }
p { font-size: .875rem; line-height: 1.5; }
.error { color: #b91c1c; }
@media (prefers-color-scheme: dark) { :root { background: #09090b; color: #fafafa; } input { background: #18181b; border-color: #3f3f46; } button { color: #18181b; background: #fafafa; border-color: #fafafa; } .error { color: #fca5a5; } }