* { box-sizing: border-box; }
body { margin: var(--sp-0); background: var(--canvas); color: var(--text); font: var(--fs-lg)/var(--lh-lg) var(--font-sans); }
main { min-height: 100dvh; display: grid; place-items: center; padding: var(--sp-6); }
form { display: flex; flex-direction: column; gap: var(--sp-6); width: 100%; max-width: calc(var(--config-w) + var(--sp-12)); padding: var(--sp-8); background: var(--surface); border: var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
h1 { margin: var(--sp-0); font-size: var(--fs-xl); line-height: var(--lh-xl); }
label { display: flex; flex-direction: column; gap: var(--sp-2); }
input, button { font: inherit; min-height: var(--sp-12); border-radius: var(--radius); padding: var(--sp-2) var(--sp-3); }
input { width: 100%; border: var(--border); color: var(--text); background: var(--surface); }
button { border: var(--border-w) solid var(--accent); background: var(--accent); color: var(--on-accent); cursor: pointer; font-weight: var(--fw-semibold); }
button:hover { background: var(--accent-hover); }
button:disabled { cursor: wait; background: var(--text-2); }
:focus-visible { outline: var(--focus-ring-w) solid var(--focus-ring); outline-offset: var(--sp-1); }
#error { margin: var(--sp-0); min-height: var(--lh-lg); color: var(--danger); font-size: var(--fs-md); }