/* Shared dashboard/plan loader. The halo is a continuous circle, with no segmented paths. */
.ms-loading-splash {
  --ms-loading-ink: #244476;
  --ms-loading-disc: rgba(255, 255, 255, .86);
  --ms-loading-motion: running;
  position: relative;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1.8rem;
  min-height: 20rem;
  width: 100%;
  padding: 2rem 1rem;
  box-sizing: border-box;
  isolation: isolate;
  overflow: hidden;
  color: var(--ms-loading-ink);
  background:
    radial-gradient(ellipse at 34% 40%, rgba(79, 209, 248, .15), transparent 49%),
    radial-gradient(ellipse at 67% 62%, rgba(237, 89, 180, .11), transparent 48%),
    #f7fbff;
}
.ms-loading-splash--dark {
  --ms-loading-ink: #ccdef3;
  --ms-loading-disc: rgba(16, 35, 57, .9);
  background:
    radial-gradient(ellipse at 34% 40%, rgba(15, 164, 211, .13), transparent 49%),
    radial-gradient(ellipse at 67% 62%, rgba(170, 45, 137, .11), transparent 48%),
    #0a1427;
}
.ms-loading-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(8.5rem, 16vw, 10.5rem);
  aspect-ratio: 1;
  isolation: isolate;
  border: 1px solid rgba(151, 208, 239, .24);
  border-radius: 50%;
  background: var(--ms-loading-disc);
  box-shadow: 0 16px 48px -28px rgba(14, 77, 132, .36), inset 0 0 24px rgba(111, 212, 242, .08);
}
.ms-loading-mark::before,
.ms-loading-mark::after {
  content: '';
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
}
.ms-loading-mark::before {
  inset: -5px;
  padding: 2px;
  background: conic-gradient(from 25deg, #38ccef, #9acded, #ed80c5, #cba8e9, #38ccef);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  animation: ms-loading-orbit 5.5s linear infinite;
}
.ms-loading-mark::after {
  z-index: -1;
  inset: -18%;
  background: conic-gradient(from 40deg, rgba(46, 209, 245, .27), rgba(221, 87, 184, .16), rgba(46, 209, 245, .27));
  filter: blur(23px);
  animation: ms-loading-breathe 3.6s ease-in-out infinite;
}
.ms-loading-logo {
  display: block;
  width: 56%;
  height: 56%;
  object-fit: contain;
  filter: drop-shadow(0 7px 10px rgba(27, 103, 157, .16));
  animation: ms-loading-float 3.6s ease-in-out infinite;
}
.ms-loading-label {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .7rem;
  margin: 0;
  max-width: 100%;
  color: var(--ms-loading-ink);
  font: 600 .85rem/1.6 'Inter', 'Poppins', system-ui, sans-serif;
  letter-spacing: .035em;
  text-align: center;
}
.ms-loading-dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 1rem;
}
.ms-loading-dots i {
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #309fc9;
  opacity: .38;
  animation: ms-loading-dot 1.5s ease-in-out infinite;
}
.ms-loading-dots i:nth-child(2) { animation-delay: .18s; background: #9a88d0; }
.ms-loading-dots i:nth-child(3) { animation-delay: .36s; background: #db6bac; }
.ms-loading-mark::before,
.ms-loading-mark::after,
.ms-loading-logo,
.ms-loading-dots i { animation-play-state: var(--ms-loading-motion); }
.ms-loading-splash:is(.is-hidden, [hidden], [aria-hidden="true"], [data-motion-paused="true"]) {
  --ms-loading-motion: paused;
}
.ms-loading-splash[hidden] { display: none !important; }
@keyframes ms-loading-orbit { to { transform: rotate(360deg); } }
@keyframes ms-loading-breathe {
  0%, 100% { opacity: .6; transform: scale(.95); }
  50% { opacity: .9; transform: scale(1.05); }
}
@keyframes ms-loading-float {
  0%, 100% { transform: translateY(2px); }
  50% { transform: translateY(-3px); }
}
@keyframes ms-loading-dot {
  0%, 75%, 100% { opacity: .38; transform: translateY(0); }
  35% { opacity: 1; transform: translateY(-3px); }
}
@media (max-height: 480px) {
  .ms-loading-splash { gap: .65rem; padding: .75rem; }
  .ms-loading-mark { width: min(25vh, 6.5rem); }
  .ms-loading-label { font-size: .75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ms-loading-mark::before,
  .ms-loading-mark::after,
  .ms-loading-logo,
  .ms-loading-dots i { animation: none; }
  .ms-loading-splash { transition: none !important; }
  .ms-loading-dots i { opacity: .7; }
}