html, body { height: 100%; margin: 0; }

body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
  /* Gradient layered over the photo: dusk navy at the top to warm amber at the bottom. */
  background-color: #0b1026;
  background-image:
    linear-gradient(180deg,
      rgba(11, 16, 38, 0.85) 0%,
      rgba(11, 16, 38, 0.45) 45%,
      rgba(120, 50, 15, 0.55) 100%),
    url("../img/background-image.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #1b1f2a;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.card {
  width: 100%;
  max-width: 360px;
  padding: 32px 28px;
  box-sizing: border-box;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

h1 { margin: 0 0 8px; font-size: 1.5rem; }
.lead { margin: 0 0 20px; color: #4a5163; }

label { display: block; margin-bottom: 6px; font-weight: 600; }

input[type="password"] {
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 16px;
  box-sizing: border-box;
  font-size: 1rem;
  border: 1px solid #b8bfcf;
  border-radius: 6px;
}

button {
  width: 100%;
  padding: 11px;
  font-size: 1rem;
  font-weight: 600;
  color: #ffffff;
  background: #2b4bd6;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}

button:hover, button:focus-visible { background: #1f3aae; }

.error {
  margin: 0 0 16px;
  padding: 10px 12px;
  color: #8a1c1c;
  background: #fde8e8;
  border-radius: 6px;
}