html,
body {
  background:
    linear-gradient(rgba(52, 235, 224, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(52, 235, 224, 0.028) 1px, transparent 1px),
    radial-gradient(circle at 18% 12%, rgba(52, 235, 224, 0.18), transparent 32rem),
    radial-gradient(circle at 90% 10%, rgba(112, 167, 255, 0.15), transparent 34rem),
    #02080d;
  background-size: 42px 42px, 42px 42px, auto, auto, auto;
}

.mx_AuthPage {
  background:
    repeating-linear-gradient(90deg, rgba(52, 235, 224, 0.06) 0 1px, transparent 1px 120px),
    linear-gradient(145deg, rgba(2, 8, 13, 0.88), rgba(8, 20, 31, 0.82)) !important;
  background-color: #02080d !important;
}

.mx_AuthPage_modal {
  border: 1px solid rgba(52, 235, 224, 0.16);
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.58),
    0 0 44px rgba(52, 235, 224, 0.14);
}

.mx_AuthHeaderLogo,
.mx_AuthHeaderLogo img {
  filter: drop-shadow(0 0 18px rgba(52, 235, 224, 0.42));
}

.mx_AuthHeaderLogo img {
  content: url("/assets/images/zmath-shield-logo.svg");
  animation: callchat-shield-breathe 7s ease-in-out infinite;
  transform-origin: center;
  width: 120px !important;
  height: 120px !important;
  object-fit: contain;
  border-radius: 28px;
}

.mx_AuthBody::before {
  content: "CallChat ZERO";
  display: block;
  margin-bottom: 6px;
  color: #34ebe0;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mx_AuthBody h1 {
  letter-spacing: 0;
}

.mx_AuthBody .mx_Login_submit {
  background: linear-gradient(135deg, #34ebe0 0%, #70a7ff 100%) !important;
  color: #02080d !important;
  font-weight: 800 !important;
}

.mx_AuthBody .mx_Field:focus-within {
  border-color: #34ebe0;
  box-shadow: 0 0 0 1px rgba(52, 235, 224, 0.45);
}

.mx_AuthFooter {
  display: none !important;
}

@keyframes callchat-shield-breathe {
  0%,
  100% {
    filter: drop-shadow(0 0 14px rgba(52, 235, 224, 0.36));
    transform: translateY(0) scale(1);
  }

  45% {
    filter: drop-shadow(0 0 28px rgba(52, 235, 224, 0.68));
    transform: translateY(-2px) scale(1.035);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mx_AuthHeaderLogo img {
    animation: none;
  }
}