/* MGO Loader System
 * Curated CSS-only loading states inspired by Colorion CSS Loaders.
 * Shared by Core and extensions; no external runtime dependency.
 */
:root{
  --mgo-loader-color:var(--mgo-primary,var(--page-primary,#2563eb));
  --mgo-loader-size:40px;
  --mgo-loader-backdrop:rgba(15,23,42,.18);
}
.mgo-loader-host{position:relative}
.mgo-loader-layer{position:absolute;inset:0;z-index:90;display:grid;place-items:center;min-height:72px;background:color-mix(in srgb,var(--mgo-loader-backdrop) 58%,transparent);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);border-radius:inherit}
.mgo-loader-layer.is-page-loader{position:fixed;z-index:9999;border-radius:0;background:color-mix(in srgb,#fff 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:1;transition:opacity .18s ease}.mgo-loader-layer.is-page-loader.is-leaving{opacity:0;pointer-events:none}
html[data-theme="dark"] .mgo-loader-layer.is-page-loader{background:color-mix(in srgb,#0b1120 90%,transparent)}
.mgo-loader-layer.is-inline{position:static;display:inline-grid;min-height:0;background:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.mgo-loader-box{display:grid;justify-items:center;gap:10px;padding:14px;color:var(--mgo-loader-color)}
.mgo-loader__visual{position:relative;display:block;width:var(--mgo-loader-size);height:var(--mgo-loader-size);color:inherit}
.mgo-loader__visual>i{position:absolute;display:block;box-sizing:border-box}
.mgo-loader__label{max-width:240px;color:currentColor;font-size:12px;font-weight:700;line-height:1.35;text-align:center}

/* Spinner */
.mgo-loader--spinner .mgo-loader__visual{border:3px solid color-mix(in srgb,currentColor 18%,transparent);border-top-color:currentColor;border-radius:50%;animation:mgoLoaderSpin .78s linear infinite}

/* Signal */
.mgo-loader--signal .mgo-loader__visual{display:flex;align-items:flex-end;justify-content:center;gap:4px;padding:6px}
.mgo-loader--signal .mgo-loader__visual>i{position:static;width:5px;height:28%;border-radius:999px;background:currentColor;animation:mgoLoaderSignal .9s ease-in-out infinite}
.mgo-loader--signal .mgo-loader__visual>i:nth-child(2){height:58%;animation-delay:.12s}.mgo-loader--signal .mgo-loader__visual>i:nth-child(3){height:88%;animation-delay:.24s}.mgo-loader--signal .mgo-loader__visual>i:nth-child(4){height:48%;animation-delay:.36s}

/* Orbitra */
.mgo-loader--orbitra .mgo-loader__visual{border:2px solid color-mix(in srgb,currentColor 24%,transparent);border-radius:50%}
.mgo-loader--orbitra .mgo-loader__visual::before,.mgo-loader--orbitra .mgo-loader__visual::after{content:"";position:absolute;border-radius:50%}
.mgo-loader--orbitra .mgo-loader__visual::before{inset:7px;border:2px solid color-mix(in srgb,currentColor 38%,transparent);border-right-color:currentColor;animation:mgoLoaderSpin .9s linear infinite reverse}
.mgo-loader--orbitra .mgo-loader__visual::after{width:7px;height:7px;top:-4px;left:50%;background:currentColor;box-shadow:0 0 10px currentColor;transform:translateX(-50%);transform-origin:3px calc(var(--mgo-loader-size)/2 + 4px);animation:mgoLoaderOrbit 1.05s linear infinite}

/* Echo pulse */
.mgo-loader--echo-pulse .mgo-loader__visual>i{inset:50%;border:2px solid currentColor;border-radius:50%;transform:translate(-50%,-50%);animation:mgoLoaderEcho 1.35s ease-out infinite}
.mgo-loader--echo-pulse .mgo-loader__visual>i:nth-child(2){animation-delay:.34s}.mgo-loader--echo-pulse .mgo-loader__visual>i:nth-child(3){animation-delay:.68s}.mgo-loader--echo-pulse .mgo-loader__visual>i:nth-child(4){display:none}

/* Radar X */
.mgo-loader--radar-x .mgo-loader__visual{overflow:hidden;border:2px solid currentColor;border-radius:50%;background:radial-gradient(circle at center,color-mix(in srgb,currentColor 10%,transparent) 0 2px,transparent 3px),linear-gradient(90deg,transparent 49%,color-mix(in srgb,currentColor 22%,transparent) 50%,transparent 51%),linear-gradient(transparent 49%,color-mix(in srgb,currentColor 22%,transparent) 50%,transparent 51%)}
.mgo-loader--radar-x .mgo-loader__visual::before{content:"";position:absolute;inset:50% 50% 0 50%;width:50%;height:2px;background:linear-gradient(90deg,currentColor,transparent);transform-origin:left center;animation:mgoLoaderRadar 1.15s linear infinite}
.mgo-loader--radar-x .mgo-loader__visual::after{content:"";position:absolute;width:6px;height:6px;right:8px;top:9px;border-radius:50%;background:currentColor;box-shadow:0 0 9px currentColor;animation:mgoLoaderBlink 1.15s ease-in-out infinite}

/* Scan line */
.mgo-loader--scan-line .mgo-loader__visual{overflow:hidden;border:2px solid currentColor;border-radius:7px;background:repeating-linear-gradient(0deg,color-mix(in srgb,currentColor 7%,transparent) 0 2px,transparent 2px 5px)}
.mgo-loader--scan-line .mgo-loader__visual::before{content:"";position:absolute;left:4px;right:4px;top:5px;height:2px;border-radius:999px;background:currentColor;box-shadow:0 0 8px currentColor;animation:mgoLoaderScan 1.15s ease-in-out infinite alternate}

/* Pixel 8 */
.mgo-loader--pixel-8 .mgo-loader__visual{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:3px}
.mgo-loader--pixel-8 .mgo-loader__visual>i{position:static;aspect-ratio:1;border-radius:2px;background:currentColor;animation:mgoLoaderPixel .9s steps(2,end) infinite}
.mgo-loader--pixel-8 .mgo-loader__visual>i:nth-child(2){animation-delay:.15s}.mgo-loader--pixel-8 .mgo-loader__visual>i:nth-child(3){animation-delay:.3s}.mgo-loader--pixel-8 .mgo-loader__visual>i:nth-child(4){animation-delay:.45s}
.mgo-loader--pixel-8 .mgo-loader__visual::before,.mgo-loader--pixel-8 .mgo-loader__visual::after{content:"";display:block;border-radius:2px;background:currentColor;animation:mgoLoaderPixel .9s steps(2,end) infinite .6s}

/* Halo */
.mgo-loader--halo .mgo-loader__visual{border:2px solid color-mix(in srgb,currentColor 18%,transparent);border-radius:50%;box-shadow:0 0 16px color-mix(in srgb,currentColor 30%,transparent)}
.mgo-loader--halo .mgo-loader__visual::before,.mgo-loader--halo .mgo-loader__visual::after{content:"";position:absolute;border-radius:50%}
.mgo-loader--halo .mgo-loader__visual::before{inset:4px;border:3px solid transparent;border-top-color:currentColor;border-right-color:currentColor;animation:mgoLoaderSpin .85s linear infinite}
.mgo-loader--halo .mgo-loader__visual::after{inset:11px;background:color-mix(in srgb,currentColor 12%,transparent);box-shadow:0 0 14px currentColor;animation:mgoLoaderHalo 1.05s ease-in-out infinite}

/* Pulse EKG */
.mgo-loader--pulse-ekg .mgo-loader__visual{width:calc(var(--mgo-loader-size)*1.45);overflow:hidden}
.mgo-loader--pulse-ekg .mgo-loader__visual::before{content:"";position:absolute;left:-45%;top:50%;width:145%;height:2px;background:currentColor;clip-path:polygon(0 45%,28% 45%,34% 45%,40% 0,47% 100%,54% 34%,61% 45%,100% 45%,100% 58%,60% 58%,55% 65%,47% 100%,39% 18%,35% 58%,0 58%);animation:mgoLoaderEkg 1.15s linear infinite}
.mgo-loader--pulse-ekg .mgo-loader__visual::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,currentColor 48%,transparent);opacity:.16;transform:translateX(-100%);animation:mgoLoaderSweep 1.15s linear infinite}

@keyframes mgoLoaderSpin{to{transform:rotate(360deg)}}
@keyframes mgoLoaderOrbit{to{transform:translateX(-50%) rotate(360deg)}}
@keyframes mgoLoaderSignal{0%,100%{transform:scaleY(.55);opacity:.45}50%{transform:scaleY(1.08);opacity:1}}
@keyframes mgoLoaderEcho{0%{width:0;height:0;opacity:.9}100%{width:100%;height:100%;opacity:0}}
@keyframes mgoLoaderRadar{to{transform:rotate(360deg)}}
@keyframes mgoLoaderBlink{0%,100%{opacity:.25;transform:scale(.75)}50%{opacity:1;transform:scale(1.15)}}
@keyframes mgoLoaderScan{from{transform:translateY(0)}to{transform:translateY(calc(var(--mgo-loader-size) - 12px))}}
@keyframes mgoLoaderPixel{0%,100%{opacity:.22;transform:scale(.72)}50%{opacity:1;transform:scale(1)}}
@keyframes mgoLoaderHalo{0%,100%{transform:scale(.72);opacity:.25}50%{transform:scale(1);opacity:.75}}
@keyframes mgoLoaderEkg{to{transform:translateX(100%)}}
@keyframes mgoLoaderSweep{to{transform:translateX(100%)}}

.mgo-loader-demo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px}.mgo-loader-demo{display:grid;min-height:128px;place-items:center;gap:8px;padding:14px;border:1px solid var(--mgo-border,#e2e8f0);border-radius:12px;background:var(--mgo-surface,#fff);cursor:pointer}.mgo-loader-demo.is-selected{border-color:var(--mgo-primary,#2563eb);box-shadow:0 0 0 2px color-mix(in srgb,var(--mgo-primary,#2563eb) 18%,transparent)}.mgo-loader-demo small{font-size:10px;font-weight:750}

@media(prefers-reduced-motion:reduce){
  .mgo-loader__visual,.mgo-loader__visual::before,.mgo-loader__visual::after,.mgo-loader__visual>i{animation:none!important}
  .mgo-loader--spinner .mgo-loader__visual{border-color:color-mix(in srgb,currentColor 30%,transparent);border-top-color:currentColor}
}