/* Login motion adapted from the existing WeChat bot platform. */
.login-container {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 14% 18%, rgba(59, 130, 246, 0.25), transparent 30%),
    radial-gradient(circle at 84% 16%, rgba(125, 211, 252, 0.18), transparent 31%),
    radial-gradient(circle at 68% 88%, rgba(191, 219, 254, 0.12), transparent 34%),
    linear-gradient(135deg, #07172f, #0b2856 48%, #0f3f92);
}

.login-container::before {
  position: absolute;
  z-index: 0;
  inset: -8%;
  width: 116%;
  height: 116%;
  pointer-events: none;
  content: '';
  opacity: 0.42;
  background-image:
    linear-gradient(rgba(147, 197, 253, 0.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(125, 211, 252, 0.1) 1px, transparent 1px),
    linear-gradient(115deg, transparent 0 46%, rgba(219, 234, 254, 0.14) 49%, transparent 52%);
  background-size: 34px 34px, 34px 34px, 220px 220px;
  animation: cw-login-grid-drift 64s linear infinite;
}

.login-container::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  content: '';
  opacity: 0.8;
  background:
    radial-gradient(circle at 12% 24%, rgba(219, 234, 254, 0.9) 0 2px, transparent 3px),
    radial-gradient(circle at 28% 72%, rgba(125, 211, 252, 0.72) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 76% 22%, rgba(191, 219, 254, 0.78) 0 2px, transparent 3px),
    radial-gradient(circle at 88% 68%, rgba(96, 165, 250, 0.75) 0 1.5px, transparent 2.5px),
    linear-gradient(110deg, transparent 0 42%, rgba(219, 234, 254, 0.12) 47%, transparent 54%);
  animation: cw-login-scan-drift 9s ease-in-out infinite;
}

.login-shell {
  position: relative;
  z-index: 4;
  box-shadow: 0 28px 80px rgba(1, 10, 28, 0.48), 0 0 70px rgba(59, 130, 246, 0.12);
  animation: cw-login-card-in 0.72s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both;
}

.platform-panel::before {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 52%;
  width: 680px;
  height: 680px;
  pointer-events: none;
  content: '';
  opacity: 0.66;
  border-radius: 50%;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(219, 234, 254, 0.78) 0deg 2deg,
    transparent 2deg 9deg,
    rgba(125, 211, 252, 0.38) 9deg 11deg,
    transparent 11deg 18deg
  );
  -webkit-mask: radial-gradient(circle, transparent 0 41%, #000 41.3% 41.8%, transparent 42.1% 55%, #000 55.3% 55.8%, transparent 56.1% 68%, #000 68.3% 68.7%, transparent 69%);
  mask: radial-gradient(circle, transparent 0 41%, #000 41.3% 41.8%, transparent 42.1% 55%, #000 55.3% 55.8%, transparent 56.1% 68%, #000 68.3% 68.7%, transparent 69%);
  transform: translate(-50%, -50%);
  transform-origin: center;
  animation: cw-login-orbit-spin 42s linear infinite;
}

.platform-panel::after {
  right: -150px;
  bottom: -180px;
  width: 430px;
  height: 430px;
  border-color: rgba(219, 234, 254, 0.34) rgba(125, 211, 252, 0.12) rgba(96, 165, 250, 0.3) rgba(219, 234, 254, 0.12);
  box-shadow: 0 0 0 34px rgba(255, 255, 255, 0.045), 0 0 0 68px rgba(255, 255, 255, 0.028);
  animation: cw-login-orbit-reverse 28s linear infinite;
}

.platform-topline,
.platform-copy,
.platform-metrics,
.platform-tags {
  position: relative;
  z-index: 2;
}

.platform-status i {
  box-shadow: 0 0 14px rgba(134, 239, 172, 0.9);
  animation: cw-login-status-pulse 2.6s ease-in-out infinite;
}

@keyframes cw-login-grid-drift { to { transform: translate3d(72px, -72px, 0); } }
@keyframes cw-login-scan-drift {
  0%, 100% { opacity: 0.5; transform: translate3d(-16px, -10px, 0); }
  50% { opacity: 0.82; transform: translate3d(16px, 10px, 0); }
}
@keyframes cw-login-orbit-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes cw-login-orbit-reverse { to { transform: rotate(-360deg); } }
@keyframes cw-login-card-in {
  from { opacity: 0; transform: translateY(22px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes cw-login-status-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

@media (max-width: 760px) {
  .login-container::before { opacity: 0.24; }
  .login-container::after { opacity: 0.44; }
  .platform-panel::before { left: 58%; width: 520px; height: 520px; opacity: 0.42; }
}

@media (prefers-reduced-motion: reduce) {
  .login-container::before,
  .login-container::after,
  .login-shell,
  .platform-panel::before,
  .platform-panel::after,
  .platform-status i {
    animation: none !important;
  }
}