:root {
  --blue: #0a4b90;
  --deep-blue: #041e42;
  --light-blue: #dcecff;
  --white: #ffffff;
}

* { box-sizing: border-box; }

body {
  align-items: center;
  background: linear-gradient(135deg, #062f67, #0a5bab 60%, #1480cf);
  color: var(--deep-blue);
  display: flex;
  font-family: Arial, Helvetica, sans-serif;
  justify-content: center;
  margin: 0;
  min-height: 100vh;
  padding: 24px;
}

.card {
  background: var(--white);
  border-radius: 12px;
  box-shadow: 0 18px 45px rgba(0, 22, 58, .34);
  text-align: center;
  width: min(100%, 390px);
}

.login-card { padding: 38px 42px 28px; }
.admin-card { padding: 48px 42px; width: min(100%, 600px); }

.mark {
  color: var(--blue);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .22em;
}

h1 { color: var(--deep-blue); font-size: 1.7rem; margin: 10px 0 3px; }
.subtitle { color: var(--blue); font-size: 1rem; margin: 0 0 30px; }
form { text-align: left; }
label { color: var(--deep-blue); display: block; font-size: .85rem; font-weight: 700; margin: 15px 0 6px; }
input {
  background: #fff;
  border: 1px solid #b7c9de;
  border-radius: 5px;
  color: var(--deep-blue);
  font-size: 1rem;
  padding: 11px 12px;
  width: 100%;
}
input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--light-blue); outline: 0; }
button {
  background: var(--blue);
  border: 0;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  font-size: .98rem;
  font-weight: 700;
  margin-top: 24px;
  padding: 12px;
  width: 100%;
}
button:hover { background: var(--deep-blue); }
.error { color: #a32121; font-size: .85rem; margin: 15px 0 -4px; text-align: center; }
.notice { color: #61748c; font-size: .77rem; margin: 27px 0 0; }
.eyebrow { color: var(--blue); font-size: .82rem; font-weight: 700; letter-spacing: .09em; margin: 16px 0 0; text-transform: uppercase; }
.admin-copy { color: #52667e; margin: 20px 0 29px; }
.flag { background: var(--light-blue); border-left: 4px solid var(--blue); border-radius: 4px; color: var(--deep-blue); font-family: monospace; font-size: 1rem; font-weight: 700; overflow-wrap: anywhere; padding: 16px; }