.login-brand-panel {
  position: relative;
  isolation: isolate;
}

.login-logo-row,
.login-brand-copy,
.login-brand-footer {
  position: relative;
  z-index: 2;
}

.login-orbit-stage {
  position: relative;
  width: min(350px, 92%);
  aspect-ratio: 1;
  margin: 10px auto 0;
  display: grid;
  place-items: center;
}

.login-orbit {
  position: absolute;
  inset: 50%;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
  border-radius: 50%;
  animation: loginOrbit 24s linear infinite;
}

.login-orbit-one {
  width: 142px;
  height: 142px;
  margin: -71px;
  animation-duration: 11s;
}

.login-orbit-one .login-orbit-icon { animation-duration: 11s; }

.login-orbit-two {
  width: 238px;
  height: 238px;
  margin: -119px;
  animation-duration: 18s;
  animation-direction: reverse;
  border-style: dashed;
}

.login-orbit-icon {
  position: absolute;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border2);
  border-radius: 11px;
  background: var(--surface);
  color: var(--accent);
  box-shadow: var(--shadow-sm);
  font-size: 19px;
  animation: loginOrbitCounter 24s linear infinite;
}

.login-orbit-two .login-orbit-icon {
  animation-duration: 18s;
  animation-direction: reverse;
}

.login-orbit-three {
  width: 330px;
  height: 330px;
  margin: -165px;
  animation-duration: 26s;
  border-color: color-mix(in srgb, var(--accent) 18%, var(--border));
}

.login-orbit-three .login-orbit-icon { animation-duration: 26s; }

.orbit-web { top: -19px; left: calc(50% - 19px); }
.orbit-backup { bottom: -19px; left: calc(50% - 19px); }
.orbit-security { top: 18px; right: 2px; }
.orbit-server { bottom: 6px; left: 22px; }
.orbit-report { top: 78px; left: -19px; }
.orbit-ticket { top: 14px; left: 43px; }
.orbit-privacy { top: 112px; right: -19px; }
.orbit-device { bottom: 3px; left: 78px; }

.login-orbit-signal {
  position: absolute;
  width: 112px;
  height: 112px;
  border: 1px solid color-mix(in srgb, var(--accent) 48%, transparent);
  border-radius: 28px;
  animation: loginSignal 2.4s ease-out infinite;
}

.login-orbit-core {
  position: relative;
  z-index: 1;
  width: 92px;
  height: 92px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--border));
  border-radius: 22px;
  background: var(--surface);
  box-shadow: var(--shadow-md);
  animation: loginCoreEntrance 480ms ease-out both;
}

.login-orbit-core img {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  object-fit: cover;
}

.login-orbit-core strong {
  position: absolute;
  top: calc(100% + 10px);
  white-space: nowrap;
  color: var(--text2);
  font: 800 10px var(--font-display);
}

.login-brand-copy {
  margin: 0;
  padding: 4px 0 22px;
}

.login-brand-copy .login-benefits { display: none; }
.login-brand-title { font-size: 27px; }

.login-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 17px 0;
  color: var(--text4);
  font-size: 10px;
  font-weight: 700;
}

.login-divider::before,
.login-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.google-login-btn {
  width: 100%;
  min-height: 43px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid var(--border2);
  border-radius: 9px;
  background: var(--surface2);
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: background 160ms ease-out, border-color 160ms ease-out, transform 160ms ease-out;
}

.google-login-btn:hover {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border2));
  background: var(--surface3);
  transform: translateY(-1px);
}

.google-login-btn:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent);
  outline-offset: 2px;
}

.google-mark {
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: #fff;
  color: #4285f4;
  font: 800 14px Arial, sans-serif;
}

.login-mfa-input {
  margin: 8px 0 14px;
  text-align: center;
  font: 700 20px var(--mono);
}

@keyframes loginOrbit {
  to { transform: rotate(360deg); }
}

@keyframes loginOrbitCounter {
  to { transform: rotate(-360deg); }
}

@keyframes loginCoreEntrance {
  from { opacity: 0; transform: scale(.9); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes loginSignal {
  from { opacity: .55; transform: scale(.78); }
  to { opacity: 0; transform: scale(1.35); }
}

@media (max-width: 820px) {
  .login-orbit-stage {
    width: 180px;
    margin: 8px auto 0;
  }
  .login-orbit-one { width: 104px; height: 104px; margin: -52px; }
  .login-orbit-two { width: 168px; height: 168px; margin: -84px; }
  .login-orbit-three { width: 216px; height: 216px; margin: -108px; }
  .login-orbit-icon { width: 32px; height: 32px; font-size: 16px; }
  .orbit-web { top: -16px; left: calc(50% - 16px); }
  .orbit-backup { bottom: -16px; left: calc(50% - 16px); }
  .orbit-security { top: 8px; right: -1px; }
  .orbit-server { bottom: 0; left: 11px; }
  .orbit-report { top: 54px; left: -16px; }
  .orbit-ticket { top: 7px; left: 24px; }
  .orbit-privacy { top: 72px; right: -16px; }
  .orbit-device { bottom: -3px; left: 47px; }
  .login-orbit-core { width: 66px; height: 66px; border-radius: 18px; }
  .login-orbit-core img { width: 50px; height: 50px; border-radius: 13px; }
}

@media (max-width: 520px) {
  .login-orbit-stage { display: none; }
  .login-brand-copy { padding: 20px 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .login-orbit,
  .login-orbit-icon,
  .login-orbit-core,
  .login-orbit-signal { animation: none; }
}

/* The login has an explicit play/pause control. An intentional user choice may
   override the operating-system motion preference for this decorative scene. */
[data-login-motion="on"] .login-orbit-one { animation: loginOrbit 11s linear infinite !important; }
[data-login-motion="on"] .login-orbit-one .login-orbit-icon { animation: loginOrbitCounter 11s linear infinite !important; }
[data-login-motion="on"] .login-orbit-two { animation: loginOrbit 18s linear infinite reverse !important; }
[data-login-motion="on"] .login-orbit-two .login-orbit-icon { animation: loginOrbitCounter 18s linear infinite reverse !important; }
[data-login-motion="on"] .login-orbit-three { animation: loginOrbit 26s linear infinite !important; }
[data-login-motion="on"] .login-orbit-three .login-orbit-icon { animation: loginOrbitCounter 26s linear infinite !important; }
[data-login-motion="on"] .login-orbit-signal { animation: loginSignal 2.4s ease-out infinite !important; }
[data-login-motion="off"] .login-orbit,
[data-login-motion="off"] .login-orbit-icon,
[data-login-motion="off"] .login-orbit-signal { animation: none !important; }