:root { color-scheme: light dark; --bg: #f6f3ee; --panel: #fffdf9; --ink: #2b2620; --muted: #7a7064; --line: #ddd4c7; --accent: #8a4b2a; --bad: #a3361f; }
@media (prefers-color-scheme: dark) { :root { --bg: #16130f; --panel: #1f1b16; --ink: #ebe3d6; --muted: #a39887; --line: #3a332a; --accent: #d98c5f; --bad: #e5735a; } }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; background: var(--bg); color: var(--ink); font: 16px/1.5 system-ui, sans-serif; padding: 16px; }
form { width: 100%; max-width: 340px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 28px; display: grid; gap: 14px; }
h1 { margin: 0 0 4px; font: 600 1.6rem Georgia, serif; }
label { display: grid; gap: 4px; font-size: .9rem; color: var(--muted); }
input { font: inherit; padding: 9px 11px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--ink); }
input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
button { font: inherit; font-weight: 600; padding: 10px; border: 0; border-radius: 6px; background: var(--accent); color: var(--panel); cursor: pointer; }
.failed { display: none; color: var(--bad); margin: 0; font-size: .9rem; }
.failed.shown { display: block; }
p { margin: 0; }
a { color: var(--accent); }