:root {
  color-scheme: light;
  font-family: Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
  background: #f9fafb;
  color: #182630;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #f9fafb; }
body { min-height: 100svh; }
.login-page {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 40px 24px;
}
.login-panel { width: min(100%, 30rem); }
h1 {
  margin: 0 0 14px;
  font-size: clamp(2.4rem, 8vw, 4rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.025em;
}
.login-intro {
  margin: 0 0 32px;
  color: #60727f;
  font-size: 1.15rem;
  line-height: 1.55;
}
label {
  display: block;
  margin-bottom: 9px;
  font-size: 1rem;
  font-weight: 700;
}
input {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 12px 15px;
  border: 1px solid #c8d5de;
  border-radius: 10px;
  color: #182630;
  background: #f9fafb;
  font: 1.1rem/1.25 Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
  outline: none;
}
input:focus {
  border-color: #3f6482;
  box-shadow: 0 0 0 3px rgba(63, 100, 130, 0.18);
}
input[aria-invalid="true"] { border-color: #9d3d3d; }
.login-error {
  margin: 10px 0 0;
  color: #8b3030;
  font-size: 0.98rem;
  line-height: 1.45;
}
button {
  width: 100%;
  min-height: 52px;
  margin-top: 22px;
  padding: 12px 18px;
  border: 1px solid #31536d;
  border-radius: 10px;
  color: #fff;
  background: #31536d;
  font: 700 1.05rem/1.2 Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
  cursor: pointer;
}
button:hover { background: #29485f; }
button:focus-visible {
  outline: 3px solid rgba(63, 100, 130, 0.35);
  outline-offset: 3px;
}
.private-page { min-height: 100svh; }
.logout-form { position: fixed; top: 24px; right: 24px; }
.logout-form button {
  width: auto;
  min-height: 44px;
  margin: 0;
  padding: 9px 16px;
  color: #31536d;
  background: transparent;
}
.logout-form button:hover { color: #fff; background: #31536d; }
@media (max-width: 480px) {
  .login-page { place-items: start center; padding-top: 18vh; }
  .login-intro { margin-bottom: 26px; }
  .logout-form { top: 16px; right: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
}