.login-page {
  display: grid;
  place-items: center;
  padding: 20px;
}
.login-card {
  width: min(480px, 100%);
  padding: 34px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(23,31,45,.98), rgba(13,18,27,.98));
  box-shadow: 0 24px 80px rgba(0,0,0,.38);
}
.login-card h1 { font-size: clamp(40px, 11vw, 66px); }
.login-copy { color: #c5ccd7; line-height: 1.55; margin: 20px 0 24px; }
.login-card label { display: grid; gap: 8px; margin: 15px 0; color: var(--muted); font-weight: 750; }
.login-card input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 15px;
  background: #0b1018;
  color: var(--text);
  font: inherit;
  outline: none;
}
.login-card input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(100,164,255,.15); }
.login-card button { width: 100%; margin-top: 10px; padding: 14px; }
.login-error { color: #ffd9de; background: rgba(255,101,119,.1); border-radius: 11px; padding: 11px; }
@media (max-width: 480px) { .login-card { padding: 25px 20px; } }