.loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: grid;
  place-items: center;
  background: rgba(244, 246, 242, 0.72);
}

.loading-overlay[hidden] {
  display: none !important;
}

.loading-overlay.is-contained {
  position: absolute;
  border-radius: inherit;
}

.loading-overlay-card {
  display: grid;
  justify-items: center;
  gap: 14px;
  min-width: 120px;
  padding: 22px 26px;
  border: 1px solid var(--line, #dfe5df);
  border-radius: var(--radius-md, 15px);
  background: var(--surface, #ffffff);
}

.loading-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--accent-soft, #e3f2ea);
  border-top-color: var(--accent, #1f7a55);
  border-radius: 50%;
  animation: loading-spin 0.7s linear infinite;
}

.loading-overlay-label {
  margin: 0;
  color: var(--muted, #66736c);
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.02em;
}

.creative-modal-shell {
  position: relative;
}

body.is-page-loading {
  cursor: progress;
}

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

@media (prefers-reduced-motion: reduce) {
  .loading-spinner {
    animation: none;
    border-top-color: var(--accent, #1f7a55);
  }
}