:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  background: #0f0e0c;
  color: #f5f1e8;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at top, #292319, #0f0e0c 55%); }
.login-card { width: min(100%, 390px); padding: 36px; border: 1px solid #3a3226; border-radius: 18px; background: rgba(24, 21, 17, .94); box-shadow: 0 24px 80px rgba(0, 0, 0, .35); }
.eyebrow { margin: 0 0 8px; color: #e8b75d; font-size: 12px; font-weight: 700; letter-spacing: .16em; }
h1 { margin: 0; font-size: 28px; }
.subtitle { margin: 10px 0 28px; color: #aaa197; }
form { display: grid; gap: 10px; }
label { margin-top: 8px; color: #d7d0c5; font-size: 14px; }
input { width: 100%; border: 1px solid #4a4032; border-radius: 10px; padding: 12px 14px; background: #11100e; color: #fff; font: inherit; outline: none; }
input:focus { border-color: #e8b75d; box-shadow: 0 0 0 3px rgba(232, 183, 93, .12); }
button { margin-top: 12px; border: 0; border-radius: 10px; padding: 12px 16px; background: #e8b75d; color: #17120a; font: inherit; font-weight: 700; cursor: pointer; }
button:disabled { opacity: .55; cursor: wait; }
#error { min-height: 20px; margin: 4px 0 -4px; color: #fca5a5; font-size: 14px; }