.glow-effect {
  position: absolute;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(92, 45, 145, 0.3) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  filter: blur(40px);
  animation: float 8s ease-in-out infinite;
}

.glow-effect:nth-child(1) {
  top: -100px;
  left: -100px;
  animation-delay: 0s;
}

.glow-effect:nth-child(2) {
  bottom: -100px;
  right: -100px;
  animation-delay: 4s;
  background: radial-gradient(circle, rgba(166, 206, 57, 0.3) 0%, transparent 70%);
}

.floating-icon {
  position: fixed;
  font-size: 24px;
  color: rgba(102, 126, 234, 0.3);
  pointer-events: none;
  z-index: 0;
}

@keyframes pulseGlow {
  0%, 100% {
    opacity: 0.5;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 0.8;
    transform: translate(-50%, -50%) scale(1.1);
  }
}

@keyframes gradientBorder {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(30px, -30px) scale(1.1); }
}

.decorative-shapes {
  position: fixed;
  inset: 0;
  height: 100vh;
  height: 100dvh;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

.shape {
  position: absolute;
  display: block;
  transform-style: preserve-3d;
  filter: drop-shadow(0 20px 36px rgba(0, 0, 0, 0.28));
  opacity: 0.9;
}

.shape-ring {
  width: clamp(96px, 11vw, 168px);
  height: clamp(96px, 11vw, 168px);
  top: 10vh;
  right: max(24px, calc((100vw - var(--content-width)) / 2 - var(--dashboard-safe-gap) - 148px));
  border: 18px solid rgba(166, 206, 57, 0.62);
  border-left-color: rgba(103, 232, 249, 0.52);
  border-radius: 50%;
  transform: rotateX(62deg) rotateZ(-28deg);
  box-shadow: inset 0 0 28px rgba(255, 255, 255, 0.24), 0 0 44px rgba(166, 206, 57, 0.34);
  animation: shapeFloat 11s ease-in-out infinite;
}

.shape-cube {
  width: clamp(78px, 9vw, 132px);
  height: clamp(78px, 9vw, 132px);
  top: 46vh;
  left: max(24px, calc((100vw - var(--content-width)) / 2 - var(--dashboard-safe-gap) - 88px));
  border: 3px solid rgba(167, 139, 250, 0.72);
  background: linear-gradient(135deg, rgba(92, 45, 145, 0.34), rgba(103, 232, 249, 0.12));
  transform: rotateX(58deg) rotateY(0deg) rotateZ(43deg);
  box-shadow: 24px 24px 0 rgba(92, 45, 145, 0.2), 0 0 40px rgba(123, 67, 151, 0.38);
  animation: shapeDrift 13s ease-in-out infinite;
}

.shape-orb {
  width: clamp(74px, 8vw, 118px);
  height: clamp(74px, 8vw, 118px);
  right: max(22px, calc((100vw - var(--content-width)) / 2 - var(--dashboard-safe-gap) - 56px));
  bottom: 12vh;
  border-radius: 36% 64% 50% 50%;
  background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.82), rgba(103, 232, 249, 0.42) 28%, rgba(92, 45, 145, 0.32) 68%, rgba(15, 23, 42, 0.1));
  animation: shapeFloat 9s ease-in-out infinite reverse;
}

.shape-diamond {
  width: clamp(58px, 7vw, 94px);
  height: clamp(58px, 7vw, 94px);
  left: max(22px, calc((100vw - var(--content-width)) / 2 - var(--dashboard-safe-gap) - 92px));
  top: 16vh;
  border: 2px solid rgba(166, 206, 57, 0.62);
  background: linear-gradient(145deg, rgba(166, 206, 57, 0.24), rgba(92, 45, 145, 0.28));
  transform: rotate(45deg) skew(-8deg, -8deg);
  box-shadow: 0 0 38px rgba(166, 206, 57, 0.26);
  animation: shapeDrift 10s ease-in-out infinite reverse;
}

@keyframes shapeFloat {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  50% { translate: 0 -24px; rotate: 8deg; }
}

@keyframes shapeDrift {
  0%, 100% { translate: 0 0; }
  50% { translate: 18px 22px; }
}


@media (max-width: 1120px) {
  .shape-ring,
  .shape-cube,
  .shape-orb,
  .shape-diamond {
    opacity: 0.48;
  }

  .shape-ring { top: 3vh; right: 12px; }
  .shape-cube { top: auto; bottom: 5vh; left: 12px; }
  .shape-orb { right: 14px; bottom: 4vh; }
  .shape-diamond { left: 14px; top: 5vh; }
}