/* 携保知研AI · Aurora login theme, scoped to the existing login page. */
.login-page.login-page {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  min-height: 100vh;
  min-height: 100svh;
  padding: 48px 24px;
  overflow: hidden;
  color-scheme: dark;
  background:
    radial-gradient(ellipse at 10% 20%, #113253 0, transparent 48%),
    radial-gradient(ellipse at 88% 72%, #192a51 0, transparent 46%),
    radial-gradient(ellipse at 52% 110%, #113653 0, transparent 56%),
    #050b16;
}
.login-page.login-page::before,
.login-page.login-page::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  width: max(118vw, 1100px);
  height: clamp(380px, 52vw, 840px);
  border-radius: 50%;
  will-change: transform;
}
.login-page.login-page::before {
  left: -23%;
  top: -2%;
  background: radial-gradient(ellipse at center,
    transparent 47%,
    rgb(20 107 203 / 4%) 49%,
    rgb(41 164 245 / 15%) 52%,
    rgb(78 215 254 / 46%) 54%,
    rgb(156 240 255 / 75%) 54.4%,
    rgb(58 175 242 / 22%) 55%,
    rgb(35 110 198 / 8%) 59%,
    transparent 64%);
  transform: rotate(-28deg) translate3d(0,0,0);
  animation: zhiyan-aurora-blue 22s ease-in-out infinite alternate;
}
.login-page.login-page::after {
  right: -29%;
  bottom: -16%;
  opacity: .65;
  background: radial-gradient(ellipse at center,
    transparent 46%,
    rgb(53 91 194 / 6%) 49%,
    rgb(90 126 239 / 22%) 52%,
    rgb(147 173 255 / 60%) 53.7%,
    rgb(185 211 255 / 72%) 54%,
    rgb(79 120 230 / 20%) 54.7%,
    rgb(36 92 176 / 8%) 59%,
    transparent 65%);
  transform: rotate(-30deg) translate3d(0,0,0);
  animation: zhiyan-aurora-violet 28s ease-in-out infinite alternate;
}
.login-page.login-page .login-card {
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  width: min(424px, 100%);
  margin: 0;
  padding: 42px 38px 38px;
  border: 1px solid rgb(171 208 248 / 17%);
  border-radius: 24px;
  color: #eef5ff;
  background: linear-gradient(150deg, rgb(21 37 59 / 95%), rgb(10 20 36 / 97%));
  box-shadow: 0 28px 90px rgb(0 0 0 / 36%), inset 0 1px 0 rgb(229 243 255 / 7%);
}
.login-page.login-page .login-card::before {
  content: "";
  position: absolute;
  pointer-events: none;
  height: 1px;
  left: 18%;
  right: 18%;
  top: -1px;
  background: linear-gradient(90deg, transparent, #78bfe9, transparent);
  opacity: .7;
}
.login-page.login-page .login-logo {
  box-sizing: border-box;
  width: 60px;
  height: 60px;
  margin: 0 auto 23px;
  padding: 3px;
  border: 1px solid rgb(183 220 255 / 42%);
  border-radius: 19px;
  background: #fff;
  box-shadow: 0 6px 28px rgb(42 121 209 / 20%);
}
.login-page.login-page .login-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 14px;
}
.login-page.login-page .login-card h1 {
  margin: 0;
  color: #f3f7ff;
  font-size: 26px;
  font-weight: 650;
  line-height: 1.4;
  text-align: center;
  letter-spacing: .035em;
}
.login-page.login-page .login-subtitle {
  margin: 12px 0 34px;
  color: #a8b9d0;
  font-size: 13px;
  line-height: 1.8;
  text-align: center;
}
.login-page.login-page .login-field { margin-bottom: 20px; }
.login-page.login-page .login-field label {
  display: block;
  margin-bottom: 9px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: #d2def0;
}
.login-page.login-page .login-field input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 48px;
  padding: 0 14px;
  border: 1px solid #344761;
  border-radius: 11px;
  outline: 0;
  background: #0c192b;
  color: #f0f5ff;
  caret-color: #8bd8ff;
  font-family: inherit;
  font-size: 16px;
  line-height: normal;
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.login-page.login-page .login-field input::placeholder { color: #91a4bf; opacity: 1; }
.login-page.login-page .login-field input:hover { border-color: #4c6789; }
.login-page.login-page .login-field input:focus {
  border-color: #78bcff;
  background: #101f34;
  box-shadow: 0 0 0 3px rgb(80 155 248 / 15%);
}
.login-page.login-page .login-field input:-webkit-autofill,
.login-page.login-page .login-field input:-webkit-autofill:hover,
.login-page.login-page .login-field input:-webkit-autofill:focus {
  -webkit-text-fill-color: #f0f5ff;
  -webkit-box-shadow: 0 0 0 1000px #101f34 inset;
  caret-color: #8bd8ff;
}
.login-page.login-page .login-button {
  width: 100%;
  height: 48px;
  margin-top: 6px;
  padding: 0 16px;
  border: 1px solid rgb(153 203 255 / 30%);
  border-radius: 11px;
  background: linear-gradient(115deg, #2675dc, #305cce);
  box-shadow: inset 0 1px 0 rgb(215 237 255 / 15%), 0 8px 24px rgb(21 87 191 / 20%);
  color: #fff;
  font-size: 15px;
  font-family: inherit;
  font-weight: 600;
  letter-spacing: .12em;
  cursor: pointer;
  transition: box-shadow .2s, border-color .2s, background-color .2s;
}
.login-page.login-page .login-button:hover {
  border-color: rgb(177 221 255 / 65%);
  background: linear-gradient(115deg, #3080e9, #3a6ade);
  box-shadow: inset 0 1px 0 rgb(215 237 255 / 20%), 0 8px 30px rgb(34 105 224 / 32%);
}
.login-page.login-page .login-button:focus-visible { outline: 2px solid #9bd8ff; outline-offset: 4px; }
.login-page.login-page .login-button:disabled { opacity: .55; cursor: wait; }
.login-page.login-page .login-error {
  margin: 0 0 15px;
  padding: 10px 12px;
  border: 1px solid rgb(255 154 162 / 28%);
  border-radius: 9px;
  background: rgb(128 32 51 / 17%);
  color: #ffc1c7;
  font-size: 13px;
  line-height: 1.6;
}
@keyframes zhiyan-aurora-blue {
  from { transform: translate3d(-2%, -4%, 0) rotate(-30deg); }
  to { transform: translate3d(5%, 8%, 0) rotate(-19deg); }
}
@keyframes zhiyan-aurora-violet {
  from { transform: translate3d(4%, 6%, 0) rotate(-24deg); }
  to { transform: translate3d(-4%, -6%, 0) rotate(-36deg); }
}
@media (max-width: 600px) {
  .login-page.login-page { padding: 32px 20px; }
  .login-page.login-page .login-card { padding: 34px 26px 30px; border-radius: 22px; }
  .login-page.login-page .login-card h1 { font-size: 24px; }
  .login-page.login-page .login-subtitle { margin-bottom: 28px; font-size: 12px; }
  .login-page.login-page::before { width: 900px; height: 540px; left: -550px; top: -90px; }
  .login-page.login-page::after { width: 800px; height: 480px; right: -480px; bottom: -120px; opacity: .5; }
}
@media (prefers-reduced-motion: reduce) {
  .login-page.login-page::before,
  .login-page.login-page::after { animation: none; will-change: auto; }
  .login-page.login-page .login-button,
  .login-page.login-page .login-field input { transition: none; }
}
@media (forced-colors: active) {
  .login-page.login-page::before,
  .login-page.login-page::after,
  .login-page.login-page .login-card::before { display: none; }
  .login-page.login-page .login-card,
  .login-page.login-page .login-field input,
  .login-page.login-page .login-button { border: 1px solid CanvasText; }
}
