.app-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--overlay-backdrop, rgba(15, 23, 42, 0.55));
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s ease, visibility 0.22s ease;
}

.app-loading-overlay--visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

body.app-loading-active {
  overflow: hidden;
}

.app-loading-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  min-width: 200px;
  padding: 28px 36px;
  border-radius: var(--radius-lg, 16px);
  background: var(--bg-content, #fff);
  box-shadow: var(--shadow-soft, 0 18px 45px rgba(15, 23, 42, 0.12));
  border: 1px solid var(--border-subtle, rgba(148, 163, 184, 0.4));
}

.app-loading-spinner {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 4px solid color-mix(in srgb, var(--accent, #16a1d8) 18%, transparent);
  border-top-color: var(--accent, #16a1d8);
  border-right-color: var(--accent-secondary, #008b95);
  animation: app-loading-spin 0.85s cubic-bezier(0.45, 0.05, 0.35, 0.95) infinite;
  box-shadow: 0 0 24px color-mix(in srgb, var(--accent, #16a1d8) 25%, transparent);
}

.app-loading-text {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-main, #111827);
  text-align: center;
}

@keyframes app-loading-spin {
  to {
    transform: rotate(360deg);
  }
}