/* XHub — Fond vitrine noir & blanc + fumée légère */



.xhub-galaxy-bg {

  position: fixed;

  inset: 0;

  z-index: -1;

  pointer-events: none;

  overflow: hidden;

  contain: strict;

  isolation: isolate;

  background:

    radial-gradient(ellipse 80% 55% at 50% -10%, rgba(225, 6, 0, 0.28), transparent 55%),

    radial-gradient(ellipse 60% 40% at 10% 90%, rgba(225, 6, 0, 0.12), transparent 50%),

    radial-gradient(ellipse 50% 35% at 90% 80%, rgba(255, 255, 255, 0.05), transparent 45%),

    linear-gradient(180deg, #000000 0%, #050505 45%, #0a0a0a 100%);

}



.xhub-galaxy-bg__stars {

  position: absolute;

  inset: -10%;

  opacity: 0.4;

  background-image:

    radial-gradient(1px 1px at 12% 18%, rgba(255, 255, 255, 0.55), transparent),

    radial-gradient(1px 1px at 28% 62%, rgba(255, 255, 255, 0.35), transparent),

    radial-gradient(1.5px 1.5px at 44% 34%, rgba(255, 255, 255, 0.45), transparent),

    radial-gradient(1px 1px at 58% 78%, rgba(255, 255, 255, 0.3), transparent),

    radial-gradient(1px 1px at 72% 22%, rgba(255, 255, 255, 0.4), transparent),

    radial-gradient(1.5px 1.5px at 86% 55%, rgba(255, 255, 255, 0.35), transparent),

    radial-gradient(1px 1px at 18% 88%, rgba(255, 255, 255, 0.4), transparent),

    radial-gradient(1px 1px at 92% 12%, rgba(255, 255, 255, 0.3), transparent);

  background-size: 100% 100%;

  animation: xhubGalaxyTwinkle 18s ease-in-out infinite alternate;

  will-change: opacity;

}



.xhub-galaxy-bg__nebula {

  position: absolute;

  width: 70vmax;

  height: 70vmax;

  border-radius: 50%;

  opacity: 0.18;

  will-change: transform, opacity;

}



.xhub-galaxy-bg__nebula--1 {

  top: -25vmax;

  left: -15vmax;

  background: radial-gradient(circle at 40% 40%, rgba(0, 0, 0, 0.06) 0%, rgba(0, 0, 0, 0.02) 42%, transparent 68%);

  animation: xhubNebulaDrift1 72s ease-in-out infinite;

}



.xhub-galaxy-bg__nebula--2 {

  bottom: -30vmax;

  right: -20vmax;

  background: radial-gradient(circle at 55% 55%, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.02) 45%, transparent 70%);

  animation: xhubNebulaDrift2 88s ease-in-out infinite;

}



.xhub-galaxy-bg__nebula--3 {

  top: 35%;

  left: 40%;

  width: 45vmax;

  height: 45vmax;

  opacity: 0.1;

  background: radial-gradient(circle, rgba(0, 0, 0, 0.05) 0%, rgba(255, 255, 255, 0.15) 35%, transparent 65%);

  animation: xhubNebulaDrift3 64s ease-in-out infinite;

}



.xhub-galaxy-bg__smoke {

  position: absolute;

  width: 120%;

  height: 55%;

  left: -10%;

  opacity: 0.06;

  will-change: transform, opacity;

  background: radial-gradient(ellipse 55% 80% at 50% 100%, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.02) 40%, transparent 72%);

  border-radius: 50%;

}



.xhub-galaxy-bg__smoke--1 {

  bottom: -8%;

  animation: xhubSmokeFloat1 48s ease-in-out infinite;

}



.xhub-galaxy-bg__smoke--2 {

  bottom: 5%;

  opacity: 0.04;

  transform: scaleX(-1);

  animation: xhubSmokeFloat2 62s ease-in-out infinite;

}



.xhub-galaxy-bg__vitrine {

  position: absolute;

  inset: 0;

  opacity: 0.2;

  background:

    linear-gradient(125deg, transparent 42%, rgba(0, 0, 0, 0.03) 50%, transparent 58%),

    linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, transparent 22%, transparent 78%, rgba(0, 0, 0, 0.02) 100%);

  animation: xhubVitrineShimmer 24s ease-in-out infinite;

  will-change: opacity;

}



@keyframes xhubGalaxyTwinkle {

  0% { opacity: 0.32; }

  100% { opacity: 0.48; }

}



@keyframes xhubNebulaDrift1 {

  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.14; }

  50% { transform: translate3d(3vw, 2vh, 0) scale(1.06); opacity: 0.22; }

}



@keyframes xhubNebulaDrift2 {

  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.12; }

  50% { transform: translate3d(-2vw, -1.5vh, 0) scale(1.04); opacity: 0.2; }

}



@keyframes xhubNebulaDrift3 {

  0%, 100% { transform: translate3d(-50%, -50%, 0) scale(1); opacity: 0.08; }

  50% { transform: translate3d(calc(-50% + 2vw), calc(-50% - 1vh), 0) scale(1.08); opacity: 0.14; }

}



@keyframes xhubSmokeFloat1 {

  0%, 100% { transform: translate3d(0, 0, 0); opacity: 0.05; }

  50% { transform: translate3d(4vw, -2vh, 0); opacity: 0.08; }

}



@keyframes xhubSmokeFloat2 {

  0%, 100% { transform: scaleX(-1) translate3d(0, 0, 0); opacity: 0.03; }

  50% { transform: scaleX(-1) translate3d(-3vw, -1.5vh, 0); opacity: 0.06; }

}



@keyframes xhubVitrineShimmer {

  0%, 100% { opacity: 0.16; }

  50% { opacity: 0.26; }

}



/* Vitrine glass — coins arrondis partout */

body.has-galaxy-bg .login-card,

body.has-galaxy-bg .dx-route,

body.has-galaxy-bg .dx-code-block,

body.has-galaxy-bg .gk-step-card,

body.has-galaxy-bg .card,

body.has-galaxy-bg .sidebar,

body.has-galaxy-bg .main {

  background: rgba(255, 255, 255, 0.82);

  backdrop-filter: blur(12px);

  -webkit-backdrop-filter: blur(12px);

  border-radius: 20px;

}

body.has-galaxy-bg .dx-nav {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}



body.has-galaxy-bg .app .page-toolbar,

body.has-galaxy-bg .table-wrap {

  background: rgba(255, 255, 255, 0.7);

  backdrop-filter: blur(8px);

  -webkit-backdrop-filter: blur(8px);

  border-radius: 14px;

}



html[data-site-theme="dark"] .xhub-galaxy-bg {

  background:

    radial-gradient(ellipse 70% 50% at 15% 10%, rgba(225, 6, 0, 0.28), transparent 55%),

    radial-gradient(ellipse 55% 45% at 90% 80%, rgba(225, 6, 0, 0.14), transparent 50%),

    linear-gradient(180deg, #000000 0%, #050505 55%, #0a0a0a 100%);

}



html[data-site-theme="dark"] .xhub-galaxy-bg__stars {

  opacity: 0.4;

  background-image:

    radial-gradient(1px 1px at 12% 18%, rgba(255, 255, 255, 0.4), transparent),

    radial-gradient(1px 1px at 28% 62%, rgba(255, 80, 80, 0.35), transparent),

    radial-gradient(1.5px 1.5px at 44% 34%, rgba(255, 255, 255, 0.3), transparent),

    radial-gradient(1px 1px at 72% 22%, rgba(255, 120, 120, 0.32), transparent),

    radial-gradient(1px 1px at 86% 55%, rgba(255, 255, 255, 0.25), transparent);

}



html[data-site-theme="dark"] .xhub-galaxy-bg__nebula--1 {

  opacity: 0.32;

  background: radial-gradient(circle at 40% 40%, rgba(255, 0, 0, 0.28) 0%, rgba(255, 0, 0, 0.06) 42%, transparent 68%);

}



html[data-site-theme="dark"] .xhub-galaxy-bg__nebula--2 {

  opacity: 0.28;

  background: radial-gradient(circle at 55% 55%, rgba(255, 30, 30, 0.2) 0%, rgba(0, 0, 0, 0.2) 50%, transparent 70%);

}



html[data-site-theme="dark"] .xhub-galaxy-bg__nebula--3 {

  opacity: 0.2;

  background: radial-gradient(circle, rgba(255, 0, 0, 0.18) 0%, rgba(255, 255, 255, 0.04) 40%, transparent 65%);

}



html[data-site-theme="dark"] .xhub-galaxy-bg__smoke {

  background: radial-gradient(ellipse 55% 80% at 50% 100%, rgba(255, 0, 0, 0.12) 0%, rgba(255, 255, 255, 0.04) 40%, transparent 72%);

  opacity: 0.18;

}



html[data-site-theme="dark"] .xhub-galaxy-bg__vitrine {

  opacity: 0.28;

  background:

    linear-gradient(125deg, transparent 40%, rgba(255, 0, 0, 0.06) 50%, transparent 60%),

    linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, transparent 25%, transparent 75%, rgba(255, 0, 0, 0.05) 100%);

}



html[data-site-theme="dark"] body.has-galaxy-bg .login-card,

html[data-site-theme="dark"] body.has-galaxy-bg .dx-route,

html[data-site-theme="dark"] body.has-galaxy-bg .dx-code-block,

html[data-site-theme="dark"] body.has-galaxy-bg .gk-step-card,

html[data-site-theme="dark"] body.has-galaxy-bg .card,

html[data-site-theme="dark"] body.has-galaxy-bg .sidebar,

html[data-site-theme="dark"] body.has-galaxy-bg .main {

  background: rgba(0, 0, 0, 0.92);

  border-color: rgba(255, 0, 0, 0.18);

}

html[data-site-theme="dark"] body.has-galaxy-bg .dx-nav {
  background: rgba(10, 10, 10, 0.92);
  border-color: rgba(255, 255, 255, 0.1);
}

html[data-site-theme="light"] .xhub-galaxy-bg {
  background:
    radial-gradient(ellipse 80% 55% at 50% -10%, rgba(225, 6, 0, 0.12), transparent 55%),
    radial-gradient(ellipse 60% 40% at 10% 90%, rgba(225, 6, 0, 0.06), transparent 50%),
    linear-gradient(180deg, #f5f5f5 0%, #ffffff 45%, #fafafa 100%);
}

html[data-site-theme="light"] .xhub-galaxy-bg__stars {
  opacity: 0.25;
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(0, 0, 0, 0.12), transparent),
    radial-gradient(1px 1px at 44% 34%, rgba(0, 0, 0, 0.1), transparent),
    radial-gradient(1px 1px at 72% 22%, rgba(0, 0, 0, 0.08), transparent);
}

@media (max-width: 768px), (max-height: 500px) {

  .xhub-galaxy-bg__nebula--3,

  .xhub-galaxy-bg__smoke--2 {

    display: none;

  }

}



@media (prefers-reduced-motion: reduce) {

  .xhub-galaxy-bg__stars,

  .xhub-galaxy-bg__nebula,

  .xhub-galaxy-bg__smoke,

  .xhub-galaxy-bg__vitrine {

    animation: none !important;

  }

}



.site-bg,

.holo-bg,

.holo-bg__grid,

.holo-bg__grid-fine,

.holo-bg__scanlines,

.holo-bg__orb,

.holo-bg__ring,

.holo-bg__beam,

.holo-bg__particles {

  display: none !important;

}