:root {
  --sky: #f3f7fb; --paper: #fff; --ink: #0b2a55; --navy: #0b3a75; --blue: #1597d8;
  --slate: #4d6690; --mute: #7d8fab; --line: #d6e2ee; --danger: #c43a3a;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--sky); color: var(--ink);
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 16px; gap: 20px; }
.card {
  width: 100%; max-width: 400px; background: var(--paper); border: 1px solid var(--line);
  border-radius: 20px; padding: 36px 28px 30px; text-align: center;
  box-shadow: 0 20px 50px -28px rgba(11, 58, 117, .35);
}
.logo { display: block; width: 150px; height: auto; margin: 0 auto 22px; }
h1 { margin: 0 0 6px; font-size: 1.3rem; font-weight: 600; color: var(--navy); }
.sub { margin: 0 0 22px; font-size: .9rem; color: var(--slate); line-height: 1.5; }
input {
  width: 100%; font: inherit; font-size: 1rem; text-align: center; letter-spacing: .08em;
  padding: 13px 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink);
}
input::placeholder { letter-spacing: 0; color: var(--mute); }
input:focus { outline: 2px solid var(--blue); outline-offset: 1px; border-color: transparent; }
button {
  width: 100%; margin-top: 12px; font: inherit; font-size: 1rem; font-weight: 500; cursor: pointer;
  padding: 13px 16px; border: 0; border-radius: 12px; background: var(--navy); color: #fff;
  transition: background .15s;
}
button:hover { background: var(--blue); }
button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
button:disabled { opacity: .6; cursor: default; }
.msg { min-height: 1.4em; margin: 14px 0 0; font-size: .88rem; color: var(--danger); }
.foot { margin: 0; font-size: .8rem; color: var(--mute); }
.shake { animation: shake .35s; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
@media (prefers-reduced-motion: reduce) { .shake { animation: none; } }