/* 登录页独立样式，避免影响业务页面。 */
body.login-page {
  display: flow-root;
  background: #dcecf5;
  color: #153953;
  isolation: isolate;
}

.login-page::before,
.login-page::after {
  content: none;
}

.login-background {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url("./assets/biopharma-login-background-20260924.png") center / cover no-repeat;
  transform-origin: 35% 40%;
  animation: login-background-breathe 24s ease-in-out infinite alternate;
}

.login-page .container {
  position: relative;
  width: min(440px, calc(100% - 32px));
  margin: clamp(48px, 17vh, 180px) auto 32px;
}

.login-page h1 {
  font-size: 30px;
  line-height: 1.45;
  margin-bottom: 24px;
  color: #153953;
  text-shadow: 0 1px 12px rgba(255, 255, 255, 0.6);
}

.login-page .card {
  border-radius: 20px;
  padding: 28px;
  animation: none;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(22px) saturate(1.12);
  -webkit-backdrop-filter: blur(22px) saturate(1.12);
  box-shadow: 0 12px 32px rgba(25, 103, 157, 0.16),
    0 0 16px rgba(118, 224, 255, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.login-page .form-item label {
  color: #22445d;
}
.login-page .form-item { display: grid; gap: 8px; }
.login-page .form-item label { width: auto; text-align: left; font-size: 13px; }
.login-page .form-grid { gap: 20px; }
.login-page .form-actions { margin-top: 4px; }
.login-page .form-actions button { width: 100%; }

.login-page input {
  color: #153953;
  background: rgba(255, 255, 255, 0.68);
  border-color: rgba(75, 129, 162, 0.38);
  min-height: 44px;
  min-width: 0;
}

.login-page button {
  animation: none;
  min-height: 44px;
  background: #146caf;
}

.login-page input:focus-visible,
.login-page button:focus-visible {
  outline: 2px solid #146caf;
  outline-offset: 3px;
}

@keyframes login-background-breathe {
  from { transform: scale(1.03) translate3d(-0.3%, 0, 0); }
  to { transform: scale(1.055) translate3d(0.3%, -0.3%, 0); }
}

@media (max-width: 480px) {
  .login-page .form-item label {
    width: 64px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .login-background { animation: none; transform: none; }
}