.app-bg,
.bg-mesh,
.bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.app-bg {
  background-color: var(--app-bg-color, var(--bg-base, var(--bg, var(--color-bg))));
}

.bg-mesh {
  z-index: 0;
  background:
    radial-gradient(ellipse 60% 50% at 15% 25%, rgba(99,102,241,.15) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 85% 75%, rgba(34,197,94,.10) 0%, transparent 70%),
    radial-gradient(ellipse 40% 30% at 60% 8%, rgba(6,182,212,.07) 0%, transparent 70%),
    var(--bg, var(--color-bg));
}

.bg-mesh::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.011) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.011) 1px, transparent 1px);
  background-size: 64px 64px;
}

.bg {
  z-index: -1;
  background: var(--bg-base, var(--color-bg));
}

.bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 65% 55% at 8% 5%, rgba(99,102,241,.32) 0%, transparent 65%),
    radial-gradient(ellipse 55% 50% at 92% 95%, rgba(168,85,247,.26) 0%, transparent 60%),
    radial-gradient(ellipse 40% 35% at 55% 0%, rgba(56,189,248,.18) 0%, transparent 55%),
    radial-gradient(ellipse 38% 28% at 0% 60%, rgba(244,114,182,.12) 0%, transparent 55%),
    radial-gradient(ellipse 70% 45% at 50% 50%, rgba(99,102,241,.07) 0%, transparent 70%);
}

.bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 30% 25% at 75% 20%, rgba(192,132,252,.18) 0%, transparent 55%),
    radial-gradient(ellipse 25% 20% at 25% 80%, rgba(56,189,248,.14) 0%, transparent 50%),
    radial-gradient(ellipse 20% 15% at 60% 75%, rgba(167,139,250,.1) 0%, transparent 50%);
}

.app-bg-noise,
.bg-noise {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(255,255,255,.008) 3px,
    rgba(255,255,255,.008) 4px
  );
}

@media (max-width: 768px) {
  .bg-mesh::after,
  .bg::after,
  .app-bg-noise,
  .bg-noise {
    display: none;
  }
}
