.login-page {
  display: grid;
  min-height: 100vh;
  grid-template-rows: auto 1fr auto;
  background: var(--page);
}

.login-topbar {
  display: flex;
  min-height: 64px;
  align-items: center;
  padding: 10px max(20px, calc((100vw - 1480px) / 2 + 24px));
  background: var(--navy);
  color: #fff;
}

.login-brand {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 14px;
  color: #fff;
  text-decoration: none;
}

.login-brand:hover { color: #fff; }
.login-brand img { display: block; width: 180px; max-width: 42vw; height: auto; }

.login-brand-divider {
  width: 1px;
  height: 24px;
  flex: 0 0 auto;
  background: rgb(133 183 226 / 45%);
}

.login-brand-product { font-size: 14px; font-weight: 600; }

.login-main {
  display: grid;
  min-width: 0;
  place-items: center;
  padding: 32px 16px;
}

.login-card {
  width: min(100%, 440px);
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.login-card h1 { margin: 0; font-size: 24px; }
.login-intro { margin: 6px 0 20px; color: var(--muted); }

.login-status {
  min-height: 21px;
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 13px;
}

.login-error {
  margin: 0 0 16px;
  padding: 10px 12px;
  border: 1px solid #dca2b1;
  border-radius: 8px;
  background: #fff2f5;
  color: #7b1d38;
}

.login-form { display: grid; gap: 14px; }
.login-field { display: grid; gap: 5px; font-size: 13px; font-weight: 600; }
.login-submit { width: 100%; min-height: 44px; margin-top: 4px; }

.login-footer {
  padding: 12px 16px 20px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

.login-topbar :focus-visible { outline-color: #85b7e2; }

@media (max-width: 480px) {
  .login-topbar { padding-inline: 14px; }
  .login-brand { gap: 10px; }
  .login-brand img { width: min(160px, 44vw); }
  .login-brand-product { font-size: 13px; }
  .login-main { padding: 20px 14px; }
  .login-card { padding: 24px 20px; }
}