.cx-modern {
  position: relative;
  min-height: 100vh;
  isolation: isolate;
  overflow-x: clip;
  background:
    radial-gradient(circle at 80% -10%, rgba(49, 84, 143, .46), transparent 37%),
    radial-gradient(circle at 15% 98%, rgba(159, 175, 202, .10), transparent 34%),
    var(--cx-canvas);
}

.cx-modern::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: var(--cx-effect-grid-opacity);
  background-image:
    linear-gradient(var(--cx-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--cx-border) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(to bottom, #000, transparent 78%);
}

.cx-aurora {
  position: fixed;
  z-index: -1;
  width: 520px;
  height: 520px;
  right: -220px;
  top: 130px;
  border-radius: 50%;
  background: conic-gradient(from 120deg,
    rgba(159, 175, 202, .06),
    rgba(49, 84, 143, .36),
    rgba(232, 176, 75, .10),
    rgba(159, 175, 202, .06));
  filter: blur(58px);
  opacity: var(--cx-effect-glow);
  animation: cx-aurora-drift 13s ease-in-out infinite alternate;
  pointer-events: none;
}

.cx-glass {
  border: 1px solid var(--cx-border);
  background: linear-gradient(145deg, var(--cx-surface-strong), var(--cx-surface));
  backdrop-filter: blur(var(--cx-effect-blur));
  box-shadow: var(--cx-effect-shadow), inset 0 1px rgba(255, 255, 255, .04);
}

.cx-glow-accent {
  border-color: rgba(232, 176, 75, .32);
  background: linear-gradient(145deg, rgba(232, 176, 75, .10), var(--cx-surface));
}

.cx-glow-blue::after {
  content: "";
  position: absolute;
  width: 110px;
  height: 110px;
  right: -48px;
  top: -54px;
  border-radius: 50%;
  background: rgba(159, 175, 202, .17);
  filter: blur(36px);
  opacity: var(--cx-effect-glow);
  pointer-events: none;
}

@keyframes cx-aurora-drift {
  to { transform: translate(-100px, 45px) scale(1.12) rotate(24deg); }
}

@media (prefers-reduced-motion: reduce) {
  .cx-aurora { animation: none; }
}