/* Remove the decorative gallery strip only; keep the login surface and handlers intact. */
.login-page,
html:has(.login-page) .login-page {
  background-image: none !important;
  background-color: #060a0f !important;
  isolation: isolate !important;
  overflow: hidden !important;
}

/* Original CSS-only starfield: no raster watermark or gallery strip. */
.login-page::before,
html:has(.login-page) .login-page::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  display: block !important;
  opacity: .72;
  background-image:
    radial-gradient(ellipse 78% 52% at 50% 112%, transparent 48%, rgba(91, 151, 211, .18) 49%, rgba(91, 151, 211, .08) 52%, transparent 63%),
    radial-gradient(circle at 8% 22%, rgba(255,255,255,.85) 0 1px, transparent 1.8px),
    radial-gradient(circle at 18% 34%, rgba(187,222,255,.72) 0 1px, transparent 1.8px),
    radial-gradient(circle at 32% 20%, rgba(255,255,255,.78) 0 1px, transparent 1.8px),
    radial-gradient(circle at 48% 30%, rgba(187,222,255,.68) 0 1px, transparent 1.8px),
    radial-gradient(circle at 64% 18%, rgba(255,255,255,.82) 0 1px, transparent 1.8px),
    radial-gradient(circle at 82% 28%, rgba(187,222,255,.72) 0 1px, transparent 1.8px),
    radial-gradient(circle at 92% 16%, rgba(255,255,255,.8) 0 1px, transparent 1.8px) !important;
  background-size: auto, 170px 130px, 210px 160px, 190px 150px, 240px 180px, 180px 140px, 220px 170px, 200px 150px !important;
  background-repeat: no-repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat !important;
  animation: lg-star-drift 24s linear infinite;
}
  from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
  to { background-position: 0 0, 38px 26px, -42px 32px, 28px -30px, -36px 24px, 44px -28px, -30px 36px, 34px -22px; }

.login-page::before,
.login-page::after,
.login-page .brand-features,
.login-page .brand-features::before,
.login-page .brand-features::after,
.login-page .login-container::before,
.login-page .login-container::after,
html:has(.login-page) .login-page::before,
html:has(.login-page) .login-page::after,
html:has(.login-page) .login-page .brand-features,
html:has(.login-page) .login-page .brand-features::before,
html:has(.login-page) .login-page .brand-features::after,
html:has(.login-page) .login-page .login-container::before,
html:has(.login-page) .login-page .login-container::after {
  background-image: none !important;
}

.login-page .login-container,
html:has(.login-page) .login-page .login-container {
  position: relative !important;
  z-index: 1 !important;
  margin: 0 auto !important;
}

.login-page,
html:has(.login-page) .login-page {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Remove the legacy square grid and replace it with a clean orbital field. */
.login-page .login-decoration,
html:has(.login-page) .login-page .login-decoration {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  background-image: none !important;
  background: none !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

.login-page .login-decoration > *,
html:has(.login-page) .login-page .login-decoration > * {
  display: none !important;
}

.login-page .login-container::before,
.login-page .login-container::after,
html:has(.login-page) .login-page .login-container::before,
html:has(.login-page) .login-page .login-container::after,
.login-page .brand-content::before,
.login-page .brand-content::after,
html:has(.login-page) .login-page .brand-content::before,
html:has(.login-page) .login-page .brand-content::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

/* Short diagonal meteor passes keep the star field alive without recreating a grid. */
.login-page .login-decoration::before,
html:has(.login-page) .login-page .login-decoration::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  pointer-events: none !important;
  opacity: 0;
  background-image:
    linear-gradient(132deg, transparent 0 42%, rgba(196, 230, 255, .9) 45%, rgba(94, 175, 242, .18) 49%, transparent 53%),
    linear-gradient(132deg, transparent 0 42%, rgba(196, 230, 255, .76) 45%, rgba(94, 175, 242, .15) 49%, transparent 53%),
    linear-gradient(132deg, transparent 0 42%, rgba(196, 230, 255, .72) 45%, rgba(94, 175, 242, .12) 49%, transparent 53%),
    linear-gradient(132deg, transparent 0 42%, rgba(196, 230, 255, .66) 45%, rgba(94, 175, 242, .1) 49%, transparent 53%) !important;
  background-size: 190px 190px, 230px 230px, 170px 170px, 210px 210px !important;
  background-repeat: no-repeat !important;
  background-position: 8% 12%, 74% 4%, 34% 48%, 92% 58%;
  animation: lg-meteor-pass 15s ease-in-out infinite !important;
}

.login-page .login-decoration::after,
html:has(.login-page) .login-page .login-decoration::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  pointer-events: none !important;
  opacity: 0;
  background-image:
    linear-gradient(132deg, transparent 0 44%, rgba(255, 255, 255, .72) 46%, rgba(108, 188, 255, .14) 50%, transparent 54%),
    linear-gradient(132deg, transparent 0 44%, rgba(255, 255, 255, .62) 46%, rgba(108, 188, 255, .12) 50%, transparent 54%) !important;
  background-size: 260px 260px, 200px 200px !important;
  background-repeat: no-repeat !important;
  background-position: 54% 16%, 18% 66%;
  animation: lg-meteor-pass-alt 19s ease-in-out 4s infinite !important;
}
  0%, 6% { opacity: 0; background-position: 2% 8%, 68% 2%, 28% 42%, 86% 52%; }
  16%, 28% { opacity: .8; background-position: 18% 22%, 82% 18%, 44% 58%, 98% 68%; }
  38%, 100% { opacity: 0; background-position: 34% 36%, 96% 34%, 60% 74%, 110% 84%; }
  0%, 12% { opacity: 0; background-position: 46% 10%, 10% 60%; }
  24%, 40% { opacity: .65; background-position: 62% 26%, 26% 76%; }
  52%, 100% { opacity: 0; background-position: 78% 42%, 42% 92%; }

/* Enlarged rotating lower arc. */
.login-page::after,
html:has(.login-page) .login-page::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  bottom: -72vw !important;
  width: 180vw !important;
  height: 74vw !important;
  transform: translateX(-50%) rotate(-3deg);
  transform-origin: 50% 50% !important;
  border: 2px solid rgba(101, 171, 238, .12) !important;
  border-top-color: rgba(159, 211, 255, .42) !important;
  border-right-color: rgba(101, 171, 238, .2) !important;
  border-radius: 50% !important;
  box-shadow: 0 -8px 32px rgba(45, 127, 205, .18), inset 0 18px 36px rgba(45, 127, 205, .06) !important;
  background: transparent !important;
  z-index: 0 !important;
  pointer-events: none !important;
  will-change: transform !important;
  animation: lg-orbit-sway 18s ease-in-out infinite alternate !important;
}
  from { transform: translateX(-50%) rotate(-4deg); }
  to { transform: translateX(-50%) rotate(4deg); }

/* Hide the auxiliary subtitle shown beneath the main brand mark. */
.login-page .brand-sub,
html:has(.login-page) .login-page .brand-sub {
  display: none !important;
}

/* Remove the remaining left-rail branding shown in the reference screenshot. */
.login-page .login-brand,
html:has(.login-page) .login-page .login-brand {
  display: none !important;
}

.login-page .login-container,
html:has(.login-page) .login-page .login-container {
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  width: min(520px, 100%) !important;
}

.login-page .login-form-section,
html:has(.login-page) .login-page .login-form-section {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 0 !important;
  padding: 58px 72px !important;
}

/* Re-apply the generated layer after legacy pseudo-element resets. */
.login-page::before,
html:has(.login-page) .login-page::before {
  background-image:
    radial-gradient(ellipse 78% 52% at 50% 112%, transparent 48%, rgba(91,151,211,.18) 49%, rgba(91,151,211,.08) 52%, transparent 63%),
    radial-gradient(circle at 8% 22%, rgba(255,255,255,.85) 0 1px, transparent 1.8px),
    radial-gradient(circle at 18% 34%, rgba(187,222,255,.72) 0 1px, transparent 1.8px),
    radial-gradient(circle at 32% 20%, rgba(255,255,255,.78) 0 1px, transparent 1.8px),
    radial-gradient(circle at 48% 30%, rgba(187,222,255,.68) 0 1px, transparent 1.8px),
    radial-gradient(circle at 64% 18%, rgba(255,255,255,.82) 0 1px, transparent 1.8px),
    radial-gradient(circle at 82% 28%, rgba(187,222,255,.72) 0 1px, transparent 1.8px),
    radial-gradient(circle at 92% 16%, rgba(255,255,255,.8) 0 1px, transparent 1.8px) !important;
  background-size: auto,170px 130px,210px 160px,190px 150px,240px 180px,180px 140px,220px 170px,200px 150px !important;
  background-position: 0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0;
  animation: lg-star-drift 24s linear infinite !important;
}
  .login-page,
  html:has(.login-page) .login-page {
    background-image: none !important;
    background-color: #060a0f !important;
  }
  .login-page .login-form-section,
  html:has(.login-page) .login-page .login-form-section {
    padding: 40px 34px 44px !important;
  }
  .login-page::after,
  html:has(.login-page) .login-page::after {
    bottom: -82vw !important;
    width: 210vw !important;
    height: 78vw !important;
  }
  .login-page::before,
  .login-page::after,
  .login-page .login-decoration::before,
  .login-page .login-decoration::after,
  html:has(.login-page) .login-page::before,
  html:has(.login-page) .login-page::after,
  html:has(.login-page) .login-page .login-decoration::before,
  html:has(.login-page) .login-page .login-decoration::after {
    animation: none !important;
  }

/* Final visual pass: remove diagonal light pillars and turn the star field
   into a restrained, flowing particle layer. */
.login-page .login-decoration::before,
.login-page .login-decoration::after,
html:has(.login-page) .login-page .login-decoration::before,
html:has(.login-page) .login-page .login-decoration::after {
  content: none !important;
  display: none !important;
  background: none !important;
  animation: none !important;
}

.login-page::before,
html:has(.login-page) .login-page::before {
  animation: lg-star-flow 22s ease-in-out infinite alternate !important;
}
  0% {
    background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
    opacity: .78;
  }
  50% {
    background-position: 0 0, 26px 18px, -30px 22px, 20px -18px, -24px 16px, 30px -20px, -20px 24px, 24px -16px;
    opacity: .94;
  }
  100% {
    background-position: 0 0, 52px 36px, -60px 44px, 40px -36px, -48px 32px, 60px -40px, -40px 48px, 48px -32px;
    opacity: .82;
  }

/* Earth-like lower horizon: layered blue atmosphere and latitude arcs. */
.login-page::after,
html:has(.login-page) .login-page::after {
  bottom: -64vw !important;
  width: 170vw !important;
  height: 72vw !important;
  border: 2px solid rgba(90, 170, 236, .3) !important;
  border-top-color: rgba(176, 224, 255, .72) !important;
  border-right-color: rgba(73, 145, 214, .44) !important;
  box-shadow: 0 -10px 42px rgba(48, 145, 224, .28), inset 0 16px 44px rgba(73, 157, 226, .12) !important;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(40, 126, 205, .2), transparent 62%),
    repeating-radial-gradient(ellipse at 50% 104%, transparent 0 13%, rgba(129, 202, 255, .13) 13.2% 13.45%, transparent 13.7% 23%) !important;
  animation: lg-earth-sway 24s ease-in-out infinite alternate !important;
}
  from { transform: translateX(-50%) rotate(-2.5deg) scale(1); }
  to { transform: translateX(-50%) rotate(2.5deg) scale(1.025); }

/* Flowing meteor-rain overlay, kept subtle so form readability remains high. */
.login-page,
html:has(.login-page) .login-page {
  background-image:
    radial-gradient(2px 2px at 8% 18%, rgba(222, 243, 255, .95), transparent 70%),
    radial-gradient(1.5px 1.5px at 24% 34%, rgba(168, 215, 255, .9), transparent 70%),
    radial-gradient(2px 2px at 43% 12%, rgba(224, 246, 255, .9), transparent 70%),
    radial-gradient(1.5px 1.5px at 67% 27%, rgba(168, 215, 255, .86), transparent 70%),
    radial-gradient(2px 2px at 86% 16%, rgba(224, 246, 255, .92), transparent 70%),
    linear-gradient(124deg, transparent 0 46%, rgba(164, 220, 255, .55) 47%, transparent 48%) !important;
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 360px 360px !important;
  animation: lg-rain-sweep 18s linear infinite !important;
}
  0% { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, -380px -260px; }
  100% { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 620px 520px; }

/* Refined glass login surface and product lockup. */
.login-page .login-form-section,
html:has(.login-page) .login-page .login-form-section {
  position: relative !important;
  border: 1px solid rgba(126, 194, 244, .3) !important;
  border-radius: 18px !important;
  background: linear-gradient(145deg, rgba(15, 29, 43, .86), rgba(9, 18, 28, .76)) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(213, 241, 255, .1) !important;
  backdrop-filter: blur(18px) saturate(125%) !important;
}

.login-page .login-form-section::before,
html:has(.login-page) .login-page .login-form-section::before {
  content: "神州科技" !important;
  display: block !important;
  margin: 0 0 18px !important;
  color: #d9f0ff !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: .18em !important;
  text-align: center !important;
  text-shadow: 0 0 22px rgba(105, 190, 255, .45) !important;
}

/* Meteor rain: short, discrete streaks instead of a continuous light beam. */
.login-page .login-decoration::before,
html:has(.login-page) .login-page .login-decoration::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  opacity: .9 !important;
  background-image:
    linear-gradient(132deg, transparent 0 46%, rgba(220, 244, 255, .95) 48%, rgba(112, 190, 255, .5) 50%, transparent 54%),
    linear-gradient(132deg, transparent 0 47%, rgba(231, 248, 255, .9) 49%, rgba(112, 190, 255, .44) 51%, transparent 55%),
    linear-gradient(132deg, transparent 0 45%, rgba(206, 239, 255, .84) 47%, rgba(112, 190, 255, .38) 50%, transparent 54%),
    linear-gradient(132deg, transparent 0 48%, rgba(237, 250, 255, .9) 50%, rgba(112, 190, 255, .4) 52%, transparent 56%),
    linear-gradient(132deg, transparent 0 46%, rgba(214, 242, 255, .82) 48%, rgba(112, 190, 255, .35) 50%, transparent 54%) !important;
  background-size: 128px 128px, 104px 104px, 156px 156px, 92px 92px, 118px 118px !important;
  background-repeat: no-repeat !important;
  background-position: 12% -14%, 44% -22%, 70% -18%, 88% 8%, 28% 4% !important;
  animation: lg-meteor-rain 13s linear infinite !important;
}
  0% { opacity: 0; background-position: 12% -14%, 44% -22%, 70% -18%, 88% 8%, 28% 4%; }
  10% { opacity: .9; }
  72% { opacity: .82; }
  100% { opacity: 0; background-position: 38% 48%, 70% 42%, 96% 46%, 112% 76%, 56% 72%; }

.login-page .login-decoration::after,
html:has(.login-page) .login-page .login-decoration::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  opacity: 0 !important;
  background-image:
    linear-gradient(132deg, transparent 0 47%, rgba(226, 247, 255, .9) 49%, rgba(95, 174, 244, .38) 51%, transparent 55%),
    linear-gradient(132deg, transparent 0 46%, rgba(202, 235, 255, .82) 48%, rgba(95, 174, 244, .34) 50%, transparent 54%),
    linear-gradient(132deg, transparent 0 48%, rgba(232, 249, 255, .86) 50%, rgba(95, 174, 244, .36) 52%, transparent 56%) !important;
  background-size: 112px 112px, 146px 146px, 88px 88px !important;
  background-repeat: no-repeat !important;
  background-position: 20% -18%, 56% -12%, 82% -26% !important;
  animation: lg-meteor-rain-alt 17s linear 5s infinite !important;
}
  0%, 8% { opacity: 0; background-position: 20% -18%, 56% -12%, 82% -26%; }
  18%, 72% { opacity: .72; }
  100% { opacity: 0; background-position: 46% 46%, 88% 52%, 112% 38%; }

/* Cinematic deep-space treatment: a quiet lower hemisphere made from
   discrete particles, with no full-screen meteor beam. */
.login-page,
html:has(.login-page) .login-page {
  background-color: #03070c !important;
  background-image: none !important;
}

.login-page .login-decoration::before,
.login-page .login-decoration::after,
html:has(.login-page) .login-page .login-decoration::before,
html:has(.login-page) .login-page .login-decoration::after {
  display: none !important;
  content: none !important;
  animation: none !important;
}

.login-page::after,
html:has(.login-page) .login-page::after {
  bottom: -61vw !important;
  left: 50% !important;
  width: 176vw !important;
  height: 78vw !important;
  border: 1px solid rgba(94, 174, 236, .34) !important;
  border-top: 2px solid rgba(193, 232, 255, .76) !important;
  border-right-color: rgba(94, 174, 236, .48) !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 8% 44%, rgba(210, 241, 255, .92) 0 1.4px, transparent 2px),
    radial-gradient(circle at 16% 30%, rgba(135, 205, 255, .78) 0 1.2px, transparent 2px),
    radial-gradient(circle at 24% 54%, rgba(215, 242, 255, .86) 0 1.3px, transparent 2px),
    radial-gradient(circle at 31% 36%, rgba(120, 193, 249, .72) 0 1.1px, transparent 2px),
    radial-gradient(circle at 39% 62%, rgba(226, 247, 255, .9) 0 1.4px, transparent 2px),
    radial-gradient(circle at 47% 42%, rgba(141, 207, 255, .76) 0 1.2px, transparent 2px),
    radial-gradient(circle at 55% 66%, rgba(214, 242, 255, .9) 0 1.3px, transparent 2px),
    radial-gradient(circle at 63% 40%, rgba(125, 198, 252, .76) 0 1.1px, transparent 2px),
    radial-gradient(circle at 71% 58%, rgba(224, 246, 255, .88) 0 1.3px, transparent 2px),
    radial-gradient(circle at 79% 34%, rgba(138, 207, 255, .72) 0 1.1px, transparent 2px),
    radial-gradient(circle at 88% 50%, rgba(221, 245, 255, .9) 0 1.3px, transparent 2px),
    radial-gradient(ellipse at 50% 105%, rgba(22, 92, 157, .24), transparent 66%) !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  box-shadow: 0 -8px 30px rgba(64, 155, 229, .25), inset 0 16px 38px rgba(104, 193, 255, .08) !important;
  animation: lg-earth-cinema 28s ease-in-out infinite alternate !important;
  will-change: transform, box-shadow, background-position !important;
}
  0% {
    transform: translateX(-50%) rotate(-1.6deg) scale(1);
    background-position: 0 0;
    box-shadow: 0 -8px 30px rgba(64, 155, 229, .2), inset 0 16px 38px rgba(104, 193, 255, .06);
  }
  50% {
    transform: translateX(-50%) rotate(0deg) scale(1.018);
    background-position: 18px -8px;
    box-shadow: 0 -10px 40px rgba(87, 178, 246, .34), inset 0 18px 44px rgba(104, 193, 255, .1);
  }
  100% {
    transform: translateX(-50%) rotate(1.6deg) scale(1.038);
    background-position: 34px -16px;
    box-shadow: 0 -8px 34px rgba(64, 155, 229, .24), inset 0 16px 38px rgba(104, 193, 255, .07);
  }

/* Match the supplied reference: bright rounded card with a soft blue UI tint. */
.login-page .login-form-section,
html:has(.login-page) .login-page .login-form-section {
  border: 1px solid rgba(176, 222, 255, .34) !important;
  border-radius: 14px !important;
  background: linear-gradient(145deg, rgba(18, 34, 50, .48), rgba(3, 12, 22, .32)) !important;
  box-shadow: 0 20px 55px rgba(4, 15, 28, .28), 0 2px 8px rgba(41, 92, 145, .08) !important;
  backdrop-filter: none !important;
}

.login-page .login-form-section::before,
html:has(.login-page) .login-page .login-form-section::before {
  color: #eaf6ff !important;
  text-shadow: none !important;
}

.login-page .login-form-header h2,
html:has(.login-page) .login-page .login-form-header h2 {
  color: #eaf6ff !important;
}

.login-page .login-form-header p,
.login-page .form-options,
.login-page .form-footer,
.login-page .form-footer span,
.login-page .bind-tip,
.login-page .ant-checkbox-wrapper,
.login-page .ant-checkbox-label,
html:has(.login-page) .login-page .login-form-header p,
html:has(.login-page) .login-page .form-options,
html:has(.login-page) .login-page .form-footer,
html:has(.login-page) .login-page .form-footer span,
html:has(.login-page) .login-page .bind-tip,
html:has(.login-page) .login-page .ant-checkbox-wrapper,
html:has(.login-page) .login-page .ant-checkbox-label {
  color: rgba(190, 226, 255, .7) !important;
}

.login-page .ant-input-affix-wrapper,
.login-page .ant-input,
.login-page .ant-input-affix-wrapper input,
html:has(.login-page) .login-page .ant-input-affix-wrapper,
html:has(.login-page) .login-page .ant-input,
html:has(.login-page) .login-page .ant-input-affix-wrapper input {
  border-color: rgba(180, 220, 247, .25) !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: #dcefff !important;
  box-shadow: none !important;
}

.login-page .ant-input::placeholder,
html:has(.login-page) .login-page .ant-input::placeholder { color: rgba(190, 226, 255, .6) !important; }

.login-page .ant-input-affix-wrapper:hover,
.login-page .ant-input-affix-wrapper-focused,
.login-page .ant-input-affix-wrapper:focus-within,
.login-page .ant-input:focus,
html:has(.login-page) .login-page .ant-input-affix-wrapper:hover,
html:has(.login-page) .login-page .ant-input-affix-wrapper-focused,
html:has(.login-page) .login-page .ant-input-affix-wrapper:focus-within,
html:has(.login-page) .login-page .ant-input:focus {
  border-color: #a7c7ef !important;
  box-shadow: 0 0 0 3px rgba(92, 153, 224, .13) !important;
}

.login-page .login-button,
.login-page .ant-btn-primary,
html:has(.login-page) .login-page .login-button,
html:has(.login-page) .login-page .ant-btn-primary {
  border-color: #4a98e5 !important;
  border-radius: 7px !important;
  background: #4a98e5 !important;
  box-shadow: 0 8px 18px rgba(74, 152, 229, .22) !important;
}

/* Canvas particle hemisphere sits behind the preserved login experience. */
#lg-space-canvas {
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  display: none;
  pointer-events: none !important;
}
html.lg-canvas-ready #lg-space-canvas { display: block !important; }
/* Tie visibility directly to the login DOM so a slow React mount cannot
   reveal the legacy starfield during resize or fullscreen changes. */
html:has(.login-page) #lg-space-canvas { display: block !important; }
html:not(:has(.login-page)) #lg-space-canvas { display: none !important; }
html.lg-canvas-ready #root,
html.lg-canvas-ready .login-page {
  position: relative !important;
  z-index: 1 !important;
}
html.lg-canvas-ready #root {
  background: transparent !important;
}
html.lg-canvas-ready .login-page,
html.lg-canvas-ready .login-page::before,
html.lg-canvas-ready .login-page::after {
  background: transparent !important;
  background-image: none !important;
}
html.lg-canvas-ready .login-page::before,
html.lg-canvas-ready .login-page::after { display: none !important; }

/* The old theme's full-viewport pseudo layers must never win the stacking
   race against the particle canvas. */
html:has(.login-page) .login-page::before,
html:has(.login-page) .login-page::after,
html:has(.login-page) .login-page .login-decoration::before,
html:has(.login-page) .login-page .login-decoration::after {
  display: none !important;
  content: none !important;
  background: none !important;
  background-image: none !important;
}

html:has(.login-page),
html:has(.login-page) body {
  background: #000 !important;
}

/* Keep only the glass form surface visible; the legacy container shell was
   opaque and hid the hemisphere behind the panel on wide viewports. */
html:has(.login-page) .login-page .login-container {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* Transparent square glass login panel, matching the supplied reference. */
.login-page .login-form-section,
html:has(.login-page) .login-page .login-form-section {
  border: 1px solid rgba(190, 218, 244, .5) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, .14) !important;
  box-shadow: 0 20px 55px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .22) !important;
  backdrop-filter: blur(14px) saturate(125%) !important;
}
.login-page .login-form-section::before,
html:has(.login-page) .login-page .login-form-section::before {
  position: absolute !important;
  top: 4px !important;
  left: 0 !important;
  right: 0 !important;
  color: #f3f9ff !important;
  margin: 0 !important;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .35) !important;
}
.login-page .login-form-header h2,
html:has(.login-page) .login-page .login-form-header h2 { color: #f4f9ff !important; }
.login-page .login-form-header p,
.login-page .form-options,
.login-page .form-footer,
.login-page .form-footer span,
.login-page .bind-tip,
html:has(.login-page) .login-page .login-form-header p,
html:has(.login-page) .login-page .form-options,
html:has(.login-page) .login-page .form-footer,
html:has(.login-page) .login-page .form-footer span,
html:has(.login-page) .login-page .bind-tip { color: rgba(230, 242, 255, .78) !important; }
.login-page .ant-input-affix-wrapper,
.login-page .ant-input,
.login-page .ant-input-affix-wrapper input,
html:has(.login-page) .login-page .ant-input-affix-wrapper,
html:has(.login-page) .login-page .ant-input,
html:has(.login-page) .login-page .ant-input-affix-wrapper input {
  border-color: rgba(203, 226, 248, .35) !important;
  background: transparent !important;
  color: #f3f9ff !important;
}
.login-page .ant-input::placeholder,
html:has(.login-page) .login-page .ant-input::placeholder { color: rgba(226, 241, 255, .68) !important; }

/* Keep the same composition at every zoom level. Older breakpoint rules in
   the base theme are intentionally neutralized by this final layer. */
.login-page,
html:has(.login-page) .login-page {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  min-height: 100vh !important;
  height: 100vh !important;
}
.login-page .login-container,
html:has(.login-page) .login-page .login-container {
  width: min(360px, calc(100vw - 32px)) !important;
  max-width: 360px !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 auto !important;
  overflow: visible !important;
}
.login-page .login-form-section,
html:has(.login-page) .login-page .login-form-section {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 28px 20px 24px !important;
  transform: none !important;
}
.login-page .login-form-wrapper,
html:has(.login-page) .login-page .login-form-wrapper {
  width: min(100%, 360px) !important;
  max-width: 360px !important;
  min-height: 0 !important;
  height: auto !important;
  flex: 0 1 auto !important;
  margin: 0 auto !important;
  transform: translateY(10px) !important;
}
.login-page .login-form-header,
html:has(.login-page) .login-page .login-form-header {
  margin-bottom: 30px !important;
  text-align: center !important;
}
.login-page .login-form-header h2,
html:has(.login-page) .login-page .login-form-header h2 {
  font-size: 26px !important;
  line-height: 1.25 !important;
}