.auth-loading[hidden] { display: none !important; }
.auth-loading {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: grid;
  place-items: center;
  padding: max(24px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom));
  background: rgba(6, 9, 19, .95);
  backdrop-filter: blur(12px);
  color: #f6f5ff;
  outline: none;
  overscroll-behavior: contain;
  animation: auth-loading-appear .2s ease-out;
}
.auth-is-loading { overflow: hidden !important; }
.auth-loading-card { width: min(100%, 360px); text-align: center; }
.auth-loading-mark { display: block; width: 76px; height: 76px; margin: 0 auto 30px; border-radius: 22px; }
.auth-loading-spinner {
  display: block;
  width: 34px;
  height: 34px;
  margin: 0 auto 24px;
  border: 3px solid rgba(169, 150, 255, .18);
  border-top-color: #a996ff;
  border-radius: 50%;
  animation: auth-loading-spin .9s linear infinite;
}
.auth-loading-card h2 { margin: 0 0 12px; font: 650 24px/1.3 system-ui, sans-serif; }
.auth-loading-card p { margin: 0; min-height: 44px; color: #b6bacb; font: 400 15px/1.5 system-ui, sans-serif; }
@keyframes auth-loading-spin { to { transform: rotate(360deg); } }
@keyframes auth-loading-appear { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .auth-loading { animation: none; }
  .auth-loading-spinner { animation: none; border-color: #a996ff; border-right-color: transparent; }
}