.galax-loader{
  --gx-blue:#6E8FE0; --gx-pink:#E2A2CE; --gx-white:#F4F6FF; --gx-dim:#8C93B8;
  position:fixed; inset:0; z-index:9999;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px;
  font-family:'Exo 2','Segoe UI',system-ui,sans-serif; color:var(--gx-white);
  background:
    radial-gradient(circle at 78% 14%, #160C2E 0%, transparent 48%),
    radial-gradient(circle at 16% 90%, #0E1838 0%, transparent 52%),
    linear-gradient(150deg,#0B1430 0%,#0A0818 58%,#160C2E 100%);
  transition:opacity .8s ease, visibility .8s;
}
.galax-loader.is-done{opacity:0; visibility:hidden; pointer-events:none}

.galax-loader .gx-starfield{position:absolute; inset:0; overflow:hidden; pointer-events:none}
.galax-loader .gx-bgstar{position:absolute; width:2px; height:2px; border-radius:50%; background:#fff; animation:gx-bgtw 3.4s ease-in-out infinite}
@keyframes gx-bgtw{0%,100%{opacity:.12}50%{opacity:.6}}

.galax-loader .gx-stage{position:relative; width:min(82vw,400px); aspect-ratio:1; display:grid; place-items:center}
.galax-loader .gx-glow{position:absolute; width:78%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(155,127,212,.35), rgba(110,143,224,.12) 45%, transparent 70%);
  filter:blur(6px); animation:gx-glow 3.2s ease-in-out infinite}
@keyframes gx-glow{0%,100%{opacity:.7; transform:scale(.96)}50%{opacity:1; transform:scale(1.04)}}

.galax-loader .gx-spinner{position:absolute; width:100%; height:100%; overflow:visible}
.galax-loader .gx-arc{fill:none; stroke-linecap:round; transform-box:fill-box; transform-origin:center}
.galax-loader .gx-arc1{stroke:url(#gx-gA); stroke-width:3;   animation:gx-spin 8s linear infinite}
.galax-loader .gx-arc2{stroke:url(#gx-gB); stroke-width:2.5; animation:gx-spin 6s linear infinite reverse}
@keyframes gx-spin{to{transform:rotate(360deg)}}

.galax-loader .gx-galaxy{position:relative; width:82%; height:auto;
  animation:gx-breathe 5s ease-in-out infinite; filter:drop-shadow(0 8px 30px rgba(110,143,224,.25))}
@keyframes gx-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}

.galax-loader .gx-brand{display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center; margin-top:6px}
.galax-loader .gx-wordmark{line-height:.98; font-weight:800;
  background:linear-gradient(100deg,var(--gx-white) 0%,var(--gx-white) 40%,#fff 47%,#DCE8FF 50%,#fff 53%,var(--gx-white) 60%,var(--gx-white) 100%);
  background-size:230% 100%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  filter:drop-shadow(0 0 14px rgba(150,170,255,.35)); animation:gx-shine 3.6s ease-in-out infinite}
.galax-loader .gx-l1{display:block; font-size:clamp(26px,7vw,38px); letter-spacing:.18em; text-indent:.18em}
.galax-loader .gx-l2{display:block; font-size:clamp(26px,7vw,38px); letter-spacing:.34em; text-indent:.34em}
@keyframes gx-shine{0%{background-position:130% 0}55%,100%{background-position:-30% 0}}

.galax-loader .gx-status{font-size:11px; letter-spacing:.34em; text-transform:uppercase; color:var(--gx-dim)}
.galax-loader .gx-dots::after{content:""; animation:gx-dots 1.5s steps(4,end) infinite}
@keyframes gx-dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}

@media (prefers-reduced-motion:reduce){
  .galax-loader .gx-glow,.galax-loader .gx-arc,.galax-loader .gx-galaxy,
  .galax-loader .gx-wordmark,.galax-loader .gx-bgstar{animation:none!important}
}