.login-page {
  --login-blue: #175ea8;
  --login-blue-soft: #d6e6fb;
  --login-deep: #15365f;
  --login-ink: #16263d;
  --login-muted: #66768d;
  --login-warm: #eddcc9;
  --login-rose: #e7c4cc;
  --login-gold: #e8d7b3;
  --login-line: rgba(148, 163, 184, 0.24);
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(32px, 6vh, 72px) 20px;
  overflow: hidden;
  background:
    radial-gradient(circle at 14% 14%, rgba(167, 204, 255, 0.34), transparent 28%),
    radial-gradient(circle at 52% 18%, rgba(255, 235, 215, 0.18), transparent 22%),
    radial-gradient(circle at 86% 18%, rgba(231, 196, 204, 0.24), transparent 24%),
    radial-gradient(circle at 50% 76%, rgba(214, 230, 251, 0.24), transparent 28%),
    radial-gradient(circle at 82% 84%, rgba(232, 215, 179, 0.2), transparent 24%),
    linear-gradient(180deg, #fbfdff 0%, #f3f8ff 44%, #edf4fc 100%);
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
  color: var(--login-ink);
}

.login-page__backdrop {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.42), transparent 24%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.22), transparent 36%, rgba(255, 255, 255, 0.1)),
    linear-gradient(135deg, rgba(214, 230, 251, 0.16), transparent 32%, rgba(231, 196, 204, 0.1) 76%, transparent 100%);
  pointer-events: none;
}

.login-page__watermark {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.login-page__watermark::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(1160px, 96vw);
  height: min(720px, 72vh);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.56), rgba(255, 255, 255, 0.18) 42%, transparent 74%),
    radial-gradient(circle at 28% 42%, rgba(214, 230, 251, 0.34), transparent 48%),
    radial-gradient(circle at 74% 48%, rgba(231, 196, 204, 0.16), transparent 42%);
  filter: blur(18px);
}

.login-page__watermark-mark {
  position: absolute;
  display: block;
  max-width: none;
  filter: saturate(1.06);
  pointer-events: none;
}

.login-page__watermark-mark--main {
  top: 18%;
  left: 52%;
  width: min(940px, 78vw);
  opacity: 0.055;
  transform: translateX(-50%);
}

.login-page__watermark-mark--upper-left {
  left: 4%;
  top: 9%;
  width: min(260px, 18vw);
  opacity: 0.022;
  transform: rotate(-10deg);
}

.login-page__watermark-mark--left {
  left: -4%;
  bottom: 10%;
  width: min(420px, 30vw);
  opacity: 0.032;
  transform: rotate(-7deg);
}

.login-page__watermark-mark--right {
  right: 4%;
  bottom: 18%;
  width: min(340px, 24vw);
  opacity: 0.028;
  transform: rotate(8deg);
}

.login-page__watermark-mark--lower-center {
  left: 58%;
  bottom: 6%;
  width: min(300px, 22vw);
  opacity: 0.02;
  transform: translateX(-50%) rotate(5deg);
}

.login-page__shell {
  position: relative;
  z-index: 1;
  width: min(960px, 100%);
  display: grid;
  gap: 42px;
  align-content: center;
  transform: translateY(clamp(-118px, -10vh, -68px));
}

.login-page__shell::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 58%;
  width: min(760px, 78vw);
  height: 420px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background:
    radial-gradient(circle at 32% 42%, rgba(214, 230, 251, 0.42), transparent 48%),
    radial-gradient(circle at 72% 58%, rgba(231, 196, 204, 0.22), transparent 42%),
    radial-gradient(circle at 58% 82%, rgba(232, 215, 179, 0.16), transparent 36%);
  filter: blur(36px);
  pointer-events: none;
}

.login-page__intro,
.login-page__panel {
  position: relative;
  width: 100%;
}

.login-page__intro {
  text-align: center;
  animation: login-fade-up 0.48s ease both;
  transform: translateY(-30px);
}

.login-page__eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(23, 94, 168, 0.14);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(245, 249, 255, 0.72)),
    rgba(255, 255, 255, 0.62);
  box-shadow: 0 10px 24px rgba(23, 94, 168, 0.08);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.login-page__eyebrow-text {
  background:
    linear-gradient(
      90deg,
      rgba(23, 94, 168, 0.96) 0%,
      rgba(72, 131, 214, 0.92) 26%,
      rgba(198, 138, 154, 0.92) 52%,
      rgba(232, 178, 96, 0.9) 76%,
      rgba(23, 94, 168, 0.96) 100%
    );
  background-size: 220% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: login-eyebrow-flow 8s ease-in-out infinite alternate;
}

.login-page__brand-title {
  margin: 16px auto 0;
  max-width: 820px;
  color: var(--login-deep);
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1.14;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.login-page__intro-note {
  margin: 16px auto 0;
  max-width: 580px;
  color: var(--login-muted);
  font-size: 16px;
  line-height: 1.8;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
}

.login-page__panel {
  animation: login-fade-up 0.56s ease 0.06s both;
}

.login-page__card {
  position: relative;
  width: min(560px, 100%);
  margin: 0 auto;
  padding: 34px 36px 24px;
  border: 1px solid var(--login-line);
  border-radius: 24px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(251, 252, 255, 0.95)),
    rgba(255, 255, 255, 0.94);
  box-shadow:
    0 30px 64px rgba(15, 23, 42, 0.1),
    0 8px 28px rgba(23, 94, 168, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(14px);
}

.login-page__card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  border-radius: 24px 24px 0 0;
  background:
    linear-gradient(
      90deg,
      rgba(23, 94, 168, 0.76) 0%,
      rgba(120, 164, 220, 0.5) 22%,
      rgba(231, 196, 204, 0.42) 48%,
      rgba(232, 215, 179, 0.42) 72%,
      rgba(23, 94, 168, 0.76) 100%
    );
  background-size: 220% 100%;
  animation: login-ribbon-flow 7s ease-in-out infinite alternate;
}

.login-page__card-header {
  margin-bottom: 20px;
  text-align: center;
}

.login-page__card-kicker {
  color: var(--login-blue);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.login-page__card-header h2 {
  margin: 10px 0 0;
  color: var(--login-deep);
  font-size: 32px;
  line-height: 1.2;
  font-weight: 800;
}

.login-page__card-copy {
  max-width: 360px;
  margin: 8px auto 0;
  color: var(--login-muted);
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
}

.login-page__form .ant-form-item-label > label {
  color: var(--login-ink);
  font-size: 13px;
  font-weight: 700;
}

.login-page__form .ant-input,
.login-page__form .ant-input-affix-wrapper,
.login-page__form .ant-btn,
.login-page__form .verification-code-input__cell {
  border-radius: 14px;
}

.login-page__form .ant-input,
.login-page__form .ant-input-affix-wrapper {
  min-height: 52px;
  border-color: rgba(148, 163, 184, 0.28);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 253, 0.92)),
    rgba(255, 255, 255, 0.92);
  box-shadow: none;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background-color 0.18s ease;
  cursor: text;
}

.login-page__form .ant-input:hover,
.login-page__form .ant-input-affix-wrapper:hover,
.login-page__form .ant-input:focus,
.login-page__form .ant-input-affix-wrapper-focused {
  border-color: rgba(23, 94, 168, 0.42);
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(214, 230, 251, 0.38);
}

.login-page__form .ant-input[disabled],
.login-page__form .ant-input-affix-wrapper-disabled {
  cursor: not-allowed;
}

.login-page__form .ant-btn-primary {
  min-height: 52px;
  border-color: transparent;
  color: #ffffff;
  font-weight: 700;
  background: linear-gradient(135deg, #165ba3 0%, #1e72c6 100%);
  background-size: 140% 140%;
  background-position: 50% 50%;
  box-shadow: 0 12px 24px rgba(23, 94, 168, 0.18);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background-position 0.24s ease,
    filter 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease;
  will-change: transform, box-shadow, background-position;
}

.login-page__form .ant-btn-primary:not(:disabled):not(.ant-btn-disabled):hover,
.login-page__form .ant-btn-primary:not(:disabled):not(.ant-btn-disabled):focus,
.login-page__form .ant-btn-primary:not(:disabled):not(.ant-btn-disabled):focus-visible {
  border-color: transparent;
  color: #ffffff;
  background: linear-gradient(135deg, #1a67b7 0%, #2c7fd4 100%);
  background-size: 140% 140%;
  background-position: 60% 50%;
  box-shadow: 0 16px 30px rgba(23, 94, 168, 0.22);
  filter: saturate(1.02);
}

.login-page__form .ant-btn-primary:not(:disabled):not(.ant-btn-disabled):active {
  border-color: transparent;
  color: #ffffff;
  background: linear-gradient(135deg, #15579c 0%, #216fbe 100%);
  background-size: 140% 140%;
  box-shadow: 0 10px 22px rgba(23, 94, 168, 0.18);
  transform: translateY(1px);
}

.login-page__form .ant-btn-primary.ant-btn-disabled,
.login-page__form .ant-btn-primary.ant-btn-disabled:hover,
.login-page__form .ant-btn-primary.ant-btn-disabled:focus,
.login-page__form .ant-btn-primary:disabled,
.login-page__form .ant-btn-primary:disabled:hover,
.login-page__form .ant-btn-primary:disabled:focus {
  color: #8ea0b5;
  border-color: rgba(203, 213, 225, 0.92);
  background: linear-gradient(180deg, #edf2f7 0%, #e2e8f0 100%);
  box-shadow: none;
}

.login-page__code-hint {
  margin-top: 8px;
  color: #78869a;
  font-size: 12px;
}

.login-page__success-copy {
  padding: 8px 0 2px;
  color: #0f8a5f;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
}

.login-page__support-copy {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(148, 163, 184, 0.18);
  color: #77859a;
  font-size: 12px;
}

.login-page__environment-access {
  margin-top: 14px;
  text-align: center;
}

.login-page__mode-switch {
  min-height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--login-blue);
  font-size: 12px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.login-page__mode-switch:hover,
.login-page__mode-switch:focus-visible {
  color: var(--login-deep);
}

.login-page__environment-note {
  margin: 0 0 16px;
  padding: 11px 13px;
  border: 1px solid rgba(217, 119, 6, 0.22);
  border-radius: 12px;
  background: #fffbeb;
  color: #92400e;
  font-size: 12px;
  line-height: 1.65;
  text-align: left;
}

.login-page__environment-note strong {
  display: block;
  margin-bottom: 2px;
}

.login-page__panel[hidden],
.login-page__environment-note[hidden] {
  display: none;
}

@keyframes login-fade-up {
  from {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes login-ribbon-flow {
  from {
    background-position: 0% 50%;
  }

  to {
    background-position: 100% 50%;
  }
}

@keyframes login-eyebrow-flow {
  from {
    background-position: 0% 50%;
  }

  to {
    background-position: 100% 50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .login-page__intro,
  .login-page__panel,
  .login-page__card::before,
  .login-page__eyebrow-text {
    animation: none;
  }
}

@media (max-width: 720px) {
  .login-page {
    padding: 34px 16px 24px;
  }

  .login-page__shell {
    gap: 32px;
    transform: translateY(clamp(-42px, -5vh, -18px));
  }

  .login-page__watermark-mark--main {
    top: 22%;
    width: min(720px, 92vw);
    opacity: 0.05;
  }

  .login-page__watermark-mark--upper-left {
    left: -2%;
    top: 12%;
    width: min(180px, 28vw);
    opacity: 0.016;
  }

  .login-page__watermark-mark--left {
    left: -14%;
    bottom: 12%;
    width: min(280px, 42vw);
    opacity: 0.024;
  }

  .login-page__watermark-mark--right {
    right: -10%;
    bottom: 28%;
    width: min(220px, 32vw);
    opacity: 0.02;
  }

  .login-page__watermark-mark--lower-center {
    left: 64%;
    bottom: 8%;
    width: min(180px, 28vw);
    opacity: 0.014;
  }

  .login-page__intro {
    transform: translateY(-16px);
  }

  .login-page__shell::before {
    width: min(560px, 92vw);
    height: 320px;
  }

  .login-page__card {
    padding: 24px 20px 20px;
    border-radius: 20px;
  }

  .login-page__card-header h2 {
    font-size: 28px;
  }

  .login-page__support-copy {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
  }
}

/* BizFoundry keeps the reference OA surface while using the existing IAM credential contract. */
.login-page.login-page--reference::before { content: none; }
.login-page__form .ant-form-item { margin: 0 0 18px; }
.login-page__form .ant-form-item-label { padding: 0 0 8px; }
.login-page__form .ant-form-item-label > label { display: inline-flex; }
.login-page__form .ant-input { width: 100%; padding: 0 15px; outline: none; }
.login-page__form .ant-btn { width: 100%; border-style: solid; cursor: pointer; }
.login-page__support-copy span { display: block; }