:root {
  --blue: #003a96;
  --teal: #01828e;
  --ink: #183143;
  --muted: #60717d;
  --line: #d9e1e5;
  --soft: #f5f8f9;
  --white: #fff;
  --serif: Georgia, "Times New Roman", serif;
  --sans: Calibri, "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }
body { min-width: 320px; min-height: 100vh; display: grid; place-items: center; margin: 0; padding: 24px; color: var(--ink); background: var(--soft); font-family: var(--sans); }
.login-shell { width: min(100%, 420px); }
.login-card { padding: 30px 34px 34px; background: var(--white); border: 1px solid var(--line); border-top: 5px solid var(--blue); box-shadow: 0 12px 34px rgba(0, 58, 150, .09); }
.login-card img { display: block; width: min(100%, 310px); height: auto; }
.rule { width: 42px; height: 3px; margin: 25px 0 20px; background: var(--teal); }
.program-label { margin: 0 0 5px; color: var(--teal); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
h1 { margin: 0; color: var(--blue); font: 400 30px/1.1 var(--serif); }
.intro { margin: 8px 0 22px; color: var(--muted); font-size: 13px; line-height: 1.45; }
label { display: block; margin-bottom: 5px; color: var(--ink); font-size: 11px; font-weight: 700; }
input { width: 100%; height: 38px; padding: 7px 10px; color: var(--ink); border: 1px solid #b8c7ce; border-radius: 2px; font: 14px var(--sans); outline: none; }
input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0, 58, 150, .12); }
button { width: 100%; min-height: 38px; margin-top: 12px; color: var(--white); background: var(--blue); border: 1px solid var(--blue); border-radius: 2px; font: 700 12px var(--sans); cursor: pointer; }
button:hover, button:focus-visible { background: #002f79; outline: 3px solid rgba(0, 58, 150, .14); outline-offset: 2px; }
button:disabled { cursor: wait; opacity: .7; }
.error { margin: 10px 0 0; color: #8b3d28; font-size: 12px; }

@media (max-width: 480px) {
  body { padding: 14px; }
  .login-card { padding: 24px 22px 27px; }
}