:root { --ink: #18211d; --paper: #f2f0e8; --panel: #fbfaf5; --soil: #8d4f32; --muted: #647069; }
* { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; display: grid; place-items: center; padding: 24px; background: var(--paper); color: var(--ink); font: 14px/1.45 "Segoe UI", sans-serif; }
.login-card { width: min(420px, 100%); padding: 42px; border: 1px solid #d5d1c3; background: var(--panel); box-shadow: 0 18px 50px rgba(30, 34, 27, .14); }
.eyebrow { color: var(--soil); font-size: 10px; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; }
h1 { margin: 7px 0 10px; font: 32px/1.08 Georgia, serif; }
p { margin: 0 0 26px; color: var(--muted); }
form, label { display: grid; gap: 7px; }
form { gap: 17px; }
label { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
input { width: 100%; padding: 11px 12px; border: 1px solid #aaa594; border-radius: 4px; background: white; color: var(--ink); font: 14px/1.2 "Segoe UI", sans-serif; }
input:focus { border-color: var(--soil); outline: 2px solid rgba(141, 79, 50, .18); }
button { padding: 11px 15px; border: 1px solid var(--soil); border-radius: 4px; background: var(--soil); color: white; font: 700 14px/1.2 "Segoe UI", sans-serif; cursor: pointer; }
.error { min-height: 20px; color: #a44435; font-size: 12px; }