.session-restoring #login {
  visibility: hidden;
  opacity: 0;
}

.login-page {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  background: #020b18;
}
.login-card .product { letter-spacing:3px; line-height:1.5; }

.rotating-globe {
  position: fixed;
  inset: -3%;
  z-index: 0;
  pointer-events: none;
  opacity: 1;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  contain: strict;
  overflow: hidden;
}

.login-world-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  contain: strict;
}

.rotating-globe::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 36% 49%, transparent 0 28%, rgba(22, 188, 235, .08) 28.2% 28.35%, transparent 28.6%),
    linear-gradient(90deg, rgba(2, 11, 24, .14), transparent 48%, rgba(2, 11, 24, .4));
}

.rotating-globe::after {
  content: "";
  position: absolute;
  left: 3%;
  top: 2%;
  width: min(68vw, 920px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(71, 204, 255, .2);
  background: none;
  box-shadow: 0 0 34px rgba(10, 155, 225, .05);
  backface-visibility: hidden;
  will-change: transform;
  animation: datarix-orbit-spin 58s linear infinite;
}

@keyframes datarix-orbit-spin { to { transform: rotate(360deg); } }

.login-page::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(2, 12, 27, .38), rgba(3, 17, 35, .08) 52%, rgba(2, 12, 27, .58)),
    linear-gradient(rgba(31, 135, 198, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(31, 135, 198, .035) 1px, transparent 1px);
  background-size: auto, 48px 48px, 48px 48px;
}

.login-card {
  position: relative;
  z-index: 2;
  background: linear-gradient(145deg, rgba(9, 29, 54, .9), rgba(4, 18, 36, .86));
  border-color: rgba(57, 159, 218, .4);
  box-shadow: 0 30px 80px #000b, 0 0 48px rgba(10, 160, 225, .16);
  contain: layout paint;
}

@media (max-width: 700px) {
  .login-page { padding: max(14px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom)); overflow-y: auto; }
  .rotating-globe {
    inset: -3%;
  }
  .rotating-globe::after { left: -20vw; top: 8vh; width: 130vw; animation-duration: 64s; }
  .rotating-globe::before { background: radial-gradient(circle at 50% 35%, transparent 0 24%, rgba(22, 188, 235, .14) 24.2% 24.4%, transparent 24.7% 36%, rgba(22, 188, 235, .08) 36.2% 36.4%, transparent 36.7%); }
  .login-card { width: min(390px, 100%); padding: 22px 20px; margin: auto; border-radius: 18px; -webkit-backdrop-filter:none; backdrop-filter:none; }
  .login-logo { width: min(230px, 82%); }
  .login-card h1 { font-size: 19px; margin: 14px 0; }
  .login-card label { margin: 10px 0; }
  .login-card details { margin-top: 12px; }
}

@media (max-width: 380px), (max-height: 700px) {
  .login-card { padding: 16px; }
  .login-logo { width: 190px; }
  .product { margin-bottom: 10px; }
  .login-card h1 { font-size: 17px; margin: 8px 0; }
  .login-card input { padding: 10px; }
}