*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; display: grid; place-items: center;
  background: #f4f6f8; color: #1F3A5F;
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC",
        "Microsoft JhengHei", Roboto, sans-serif;
  padding: 24px;
}

/* Dead-centre is right on a laptop and wrong on a big display: at 1400px tall the card
   lands ~500px down with nothing around it, which reads as adrift rather than centred
   (it is centred — measured at 0px offset both ways; it just doesn't look it). Above
   that height, anchor it in the upper third, where sign-in forms belong and where the
   eye already is. */
@media (min-height: 860px) {
  body { align-items: start; padding-top: clamp(48px, 14vh, 190px); }
}

.box { width: 100%; max-width: 420px; }
.brand {
  font-weight: 700; font-size: 19px; letter-spacing: -0.01em; margin-bottom: 14px;
  text-align: center;  /* left-aligned, it hung off the side of a centred card */
}
.brand span { color: #3B82F6; }
.card {
  background: #fff; border: 1px solid #e3e8ef; border-radius: 12px; padding: 28px;
  /* Enough shadow to sit on the grey rather than float in it. */
  box-shadow: 0 1px 2px rgba(31, 58, 95, 0.04), 0 8px 24px rgba(31, 58, 95, 0.06);
}
h1 { font-size: 19px; margin: 0 0 5px; }
p.sub { margin: 0 0 20px; color: #6B7C93; font-size: 13.5px; }
label { display: block; font-size: 12.5px; color: #6B7C93; margin: 14px 0 5px; }
input {
  width: 100%; padding: 10px 12px; border: 1px solid #d7dee8; border-radius: 7px;
  font-size: 15px; font-family: inherit; background: #fff; color: #1F3A5F;
}
input:focus { outline: 2px solid #3B82F6; outline-offset: -1px; border-color: #3B82F6; }
button {
  width: 100%; margin-top: 20px; padding: 11px; border: 0; border-radius: 7px;
  background: #1F3A5F; color: #fff; font-size: 15px; font-weight: 600;
  font-family: inherit; cursor: pointer;
}
button:hover { background: #2a4d7a; }
button:disabled { opacity: .55; cursor: default; }
.err {
  display: none; margin-top: 14px; padding: 9px 11px; border-radius: 7px;
  background: #fdeceb; border: 1px solid #f5c6c2; color: #a3271c; font-size: 13px;
}
.err.on { display: block; }
.hint { margin-top: 14px; font-size: 12px; color: #6B7C93; }
.hint code {
  background: #eef2f7; padding: 1px 5px; border-radius: 4px; font-size: 11px;
}