:root { color-scheme: light dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
* { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; display: grid; place-items: center; padding: 24px; background: #f4f7f5; color: #15201b; }
main { width: min(100%, 380px); padding: 34px; border: 1px solid #d7e1db; border-radius: 18px; background: #fff; box-shadow: 0 18px 60px rgb(21 32 27 / 8%); }
p { margin: 0; }
.eyebrow { color: #168c63; font-size: .76rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
h1 { margin: 9px 0 26px; font-size: 1.8rem; letter-spacing: -.05em; }
label { display: grid; gap: 8px; font-size: .88rem; font-weight: 700; }
input { width: 100%; padding: 13px 14px; border: 1px solid #becbc3; border-radius: 10px; background: transparent; color: inherit; font: inherit; letter-spacing: .2em; }
button { width: 100%; margin-top: 18px; padding: 13px; border: 0; border-radius: 10px; background: #168c63; color: #fff; cursor: pointer; font: inherit; font-weight: 800; }
button:disabled { cursor: wait; opacity: .7; }
#message { min-height: 1.3em; margin-top: 16px; font-size: .9rem; color: #b42318; }
#message.success { color: #168c63; }
@media (prefers-color-scheme: dark) {
  body { background: #101712; color: #eef5f0; }
  main { background: #172019; border-color: #304238; }
  input { border-color: #496052; }
}