* { box-sizing: border-box; }
:root {
  color-scheme: dark;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  background: #0b1220;
  color: #edf2f7;
}
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background:
    radial-gradient(ellipse at 15% 15%, rgba(38, 112, 180, .24), transparent 42%),
    radial-gradient(ellipse at 85% 80%, rgba(45, 90, 150, .18), transparent 38%),
    #0b1220;
}
.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 34px 18px 18px;
}
.notice {
  width: min(760px, 100%);
  text-align: center;
  line-height: 1.5;
  font-size: clamp(16px, 2.3vw, 20px);
  font-weight: 600;
  padding: 10px 12px;
  color: #e6edf7;
}
.login-card, .message-card {
  width: min(420px, 100%);
  margin: auto;
  padding: 34px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 20px;
  background: rgba(20, 31, 49, .78);
  box-shadow: 0 24px 70px rgba(0,0,0,.35);
  backdrop-filter: blur(14px);
}
.brand {
  color: #82c5ff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .18em;
  text-align: center;
  margin-bottom: 18px;
}
h1 {
  margin: 0;
  text-align: center;
  font-size: 27px;
  letter-spacing: -.02em;
}
.subheading, .message-card p {
  text-align: center;
  color: #aab8ca;
  line-height: 1.5;
}
.subheading { margin: 9px 0 26px; }
form { display: flex; flex-direction: column; }
form > label:not(.remember) {
  margin: 0 0 8px;
  color: #dbe5f1;
  font-size: 14px;
}
input[type="text"], input[type="password"] {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  margin-bottom: 18px;
  border: 1px solid #34445b;
  border-radius: 10px;
  outline: none;
  background: #101b2b;
  color: #fff;
  font: inherit;
}
input:focus { border-color: #58aef2; box-shadow: 0 0 0 3px rgba(88,174,242,.15); }
input::placeholder { color: #72839a; }
.remember {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #c3cfdd;
  font-size: 14px;
  margin: 0 0 22px;
  cursor: pointer;
}
.remember input { width: 17px; height: 17px; accent-color: #3799e8; }
button {
  height: 49px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(100deg, #1687d5, #2868bd);
  color: white;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: filter .15s, transform .15s;
}
button:hover { filter: brightness(1.12); }
button:active { transform: translateY(1px); }
.safe-note {
  margin: 18px 0 0;
  text-align: center;
  color: #7f91a8;
  font-size: 11px;
  line-height: 1.45;
}
footer {
  margin-top: auto;
  padding: 24px 0 8px;
  color: #7d8da3;
  font-size: 13px;
  text-align: center;
}
.error-page { justify-content: center; }
.message-card { margin: auto; text-align: center; }
.error-icon {
  width: 54px; height: 54px;
  display: grid; place-items: center;
  margin: 0 auto 20px;
  border: 1px solid rgba(255, 126, 126, .45);
  border-radius: 50%;
  color: #ff9292;
  font-size: 30px;
  font-weight: 500;
}
.message-card p { margin: 12px 0 0; }
.message-card .countdown { color: #7f91a8; font-size: 13px; margin-top: 22px; }
@media (max-width: 480px) {
  .page { padding: 22px 14px 14px; }
  .login-card, .message-card { padding: 27px 22px; border-radius: 16px; }
  h1 { font-size: 24px; }
}