.dns-managed-backdrop {
  --dns-bg-primary: #22d3ee;
  --dns-bg-secondary: #4f46e5;
  --dns-bg-accent: #f59e0b;
  --dns-bg-overlay: .62;
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(90% 82% at 72% 46%, color-mix(in srgb, var(--dns-bg-primary) 19%, transparent), transparent 58%),
    radial-gradient(76% 72% at 88% 78%, color-mix(in srgb, var(--dns-bg-secondary) 22%, transparent), transparent 62%),
    radial-gradient(70% 64% at 10% 12%, color-mix(in srgb, var(--dns-bg-accent) 7%, transparent), transparent 60%),
    linear-gradient(138deg, #020813 0%, #061526 48%, #090d25 72%, #030711 100%);
  contain: strict;
}

.dns-managed-backdrop--embedded {
  position: absolute;
}

.dns-managed-backdrop__media,
.dns-managed-backdrop__canvas,
.dns-managed-backdrop__aurora,
.dns-managed-backdrop__grid,
.dns-managed-backdrop__shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.dns-managed-backdrop__media {
  object-fit: var(--dns-bg-fit, cover);
  object-position: center;
  filter: saturate(1.08) contrast(1.04);
}

.dns-managed-backdrop__aurora {
  inset: -8%;
  width: 116%;
  height: 116%;
  opacity: .82;
  background:
    radial-gradient(44% 30% at 68% 44%, color-mix(in srgb, var(--dns-bg-primary) 34%, transparent), transparent 72%),
    radial-gradient(48% 34% at 78% 58%, color-mix(in srgb, var(--dns-bg-secondary) 30%, transparent), transparent 74%),
    radial-gradient(30% 26% at 52% 48%, rgba(225, 248, 255, .11), transparent 72%),
    radial-gradient(38% 32% at 18% 28%, color-mix(in srgb, var(--dns-bg-accent) 10%, transparent), transparent 78%);
  transform: translate3d(0, 0, 0) scale(1.01);
  animation: dnsAuroraDrift calc(34s / var(--dns-bg-speed, 1)) ease-in-out infinite alternate;
  will-change: transform;
}

.dns-managed-backdrop__grid {
  opacity: .045;
  background-image:
    linear-gradient(color-mix(in srgb, var(--dns-bg-primary) 24%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--dns-bg-primary) 18%, transparent) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse at 50% 56%, #000 0%, transparent 76%);
}

.dns-managed-backdrop__canvas {
  z-index: 2;
  transform: translateZ(0);
}

.dns-managed-backdrop__canvas--static {
  z-index: 1;
  opacity: .98;
}

.dns-managed-backdrop__canvas--dynamic {
  z-index: 2;
}

.dns-managed-backdrop__shade {
  z-index: 3;
  background:
    radial-gradient(82% 68% at 68% 46%, rgba(3, 10, 18, calc(var(--dns-bg-overlay) * .06)), rgba(3, 9, 16, calc(var(--dns-bg-overlay) * .56)) 82%),
    linear-gradient(rgba(2, 8, 15, calc(var(--dns-bg-overlay) * .12)), rgba(2, 8, 15, calc(var(--dns-bg-overlay) * .38)));
}

body.has-managed-panel-background .dns-content {
  position: relative;
  isolation: isolate;
  background: transparent !important;
}

body.has-managed-panel-background .dns-content > *:not(.dns-managed-backdrop) {
  position: relative;
  z-index: 1;
}

body.has-managed-panel-background .auth-neo::before,
body.has-managed-panel-background .auth-neo::after,
body.has-managed-panel-background .page-bg::before,
body.has-managed-panel-background .page-bg::after,
.auth-neo.has-code-backdrop::before,
.auth-neo.has-code-backdrop::after {
  display: none !important;
}

body.has-managed-panel-background .auth-neo,
body.has-managed-panel-background .page-bg,
.auth-neo.has-code-backdrop {
  background: transparent !important;
}

.auth-neo.has-code-backdrop > *:not(.dns-managed-backdrop) {
  position: relative;
  z-index: 2;
}

/* Animated pixels behind glass blur force expensive full-card repaints. */
.auth-neo.has-code-backdrop .neo-card,
body.has-managed-panel-background .glass-card {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.auth-neo.has-code-backdrop .neo-card {
  background: linear-gradient(180deg, rgba(8, 18, 29, .94), rgba(6, 13, 24, .9)) !important;
}

.auth-neo.has-code-backdrop .auth-visual-stage {
  filter: none !important;
}

.auth-neo.has-code-backdrop .dns-reactor::before {
  filter: none !important;
}

.auth-neo.has-code-backdrop .dns-status {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: rgba(3, 10, 16, .9) !important;
}

body.has-managed-panel-background .glass-card {
  background-color: rgba(8, 20, 34, .9) !important;
}

@keyframes dnsAuroraDrift {
  0% { transform: translate3d(-2%, -1%, 0) scale(1.01); }
  50% { transform: translate3d(1.5%, 2%, 0) scale(1.045); }
  100% { transform: translate3d(2.5%, -.5%, 0) scale(1.025); }
}

@keyframes dnsAuroraDriftLite {
  0% { transform: translate3d(-1.2%, -.6%, 0) scale(1.01); }
  50% { transform: translate3d(.8%, 1%, 0) scale(1.025); }
  100% { transform: translate3d(1.2%, -.3%, 0) scale(1.015); }
}

@media (max-width: 700px) {
  .dns-managed-backdrop__aurora {
    opacity: .68;
    animation: dnsAuroraDriftLite calc(46s / var(--dns-bg-speed, 1)) ease-in-out infinite alternate;
    backface-visibility: hidden;
  }
  .dns-managed-backdrop__grid {
    background-size: 54px 54px;
    opacity: .035;
  }
}

.dns-managed-backdrop--lite .dns-managed-backdrop__aurora {
  animation: dnsAuroraDriftLite calc(46s / var(--dns-bg-speed, 1)) ease-in-out infinite alternate;
  will-change: transform;
  backface-visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .dns-managed-backdrop__aurora {
    animation: none;
  }
}