:root {
  color-scheme: light;
  --login-navy: #092d53;
  --login-paper: #f7f9fc;
  --login-muted: #c6d6e7;
  --login-accent: #9221b6;
  --login-focus: #f3b76b;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100dvh; display: grid; place-items: center; padding: 24px; background: var(--login-paper); color: #fff; font: 16px/1.6 system-ui, sans-serif; }
main { width: min(100%, 480px); padding: 40px; background: var(--login-navy); border: 1px solid #25496d; border-radius: 12px; box-shadow: 0 16px 48px rgb(9 45 83 / 12%); }
img { max-width: 100%; height: auto; }
h1 { color: #fff; font: 42px/1.1 Georgia, serif; margin: 20px 0; }
main > p { color: #e1eaf4; }
.eyebrow { font-size: 11px; letter-spacing: .12em; margin-top: 24px; color: var(--login-muted); }
label { display: block; margin-top: 16px; color: #fff; font-weight: 600; }
input, button { font: inherit; width: 100%; min-height: 48px; border-radius: 6px; }
input { border: 1px solid #bdccdc; padding: 10px 12px; background: #fff; color: var(--login-navy); caret-color: var(--login-navy); }
button { margin-top: 24px; border: 1px solid #ba65d4; background: var(--login-accent); color: #fff; font-weight: 600; cursor: pointer; }
button:hover { background: #7b1b99; }
button:disabled { opacity: .65; cursor: wait; }
input:focus-visible, button:focus-visible { outline: 3px solid var(--login-focus); outline-offset: 3px; }
#status { font-size: 14px; color: #fff; }
footer { font-size: 12px; color: var(--login-muted); margin-top: 24px; }
@media (max-width: 480px) { main { padding: 24px; } h1 { font-size: 36px; } }