/* LiveDev — фоновые сцены для 3 тем (без blur-анимаций) */

.theme-backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.theme-backdrop__scene,
.theme-backdrop__pattern,
.theme-backdrop__mesh,
.theme-backdrop__fx {
  position: absolute;
  inset: 0;
}

.theme-backdrop__scene {
  background: var(--theme-scene, none);
  opacity: var(--theme-scene-opacity, 1);
}

.theme-backdrop__pattern {
  background-image: var(--theme-pattern, none);
  background-size: var(--theme-pattern-size, 120px 120px);
  background-position: var(--theme-pattern-position, center);
  opacity: var(--theme-pattern-opacity, 0);
}

.theme-backdrop__mesh {
  background: var(--theme-mesh, none);
  opacity: var(--theme-mesh-opacity, 0);
}

.theme-backdrop__fx {
  background: var(--theme-fx, none);
  opacity: var(--theme-fx-opacity, 1);
  pointer-events: none;
}

[data-theme="dark"] {
  --page-gradient-opacity: .18;
  --theme-scene: radial-gradient(ellipse 120% 70% at 50% -20%, rgba(124, 92, 255, .55), transparent 58%), radial-gradient(circle at 88% 12%, rgba(168, 255, 53, .22), transparent 38%), radial-gradient(circle at 8% 80%, rgba(39, 217, 255, .12), transparent 42%), #050810;
  --theme-pattern: radial-gradient(rgba(255, 255, 255, .9) 0.6px, transparent 0.6px);
  --theme-pattern-size: 90px 90px;
  --theme-pattern-opacity: 0.14;
  --theme-mesh: radial-gradient(circle at 30% 20%, rgba(124, 92, 255, .35), transparent 50%), radial-gradient(circle at 75% 60%, rgba(168, 255, 53, .18), transparent 45%);
  --theme-mesh-opacity: 0.7;
  --theme-fx: radial-gradient(ellipse 50% 30% at 50% 0%, rgba(168, 255, 53, .08), transparent 70%);
}

[data-theme="light"] {
  --page-gradient-opacity: .1;
  --theme-scene: radial-gradient(circle at 8% 12%, rgba(91, 61, 255, .28), transparent 42%), radial-gradient(circle at 92% 8%, rgba(74, 158, 0, .22), transparent 38%), radial-gradient(circle at 50% 85%, rgba(26, 152, 232, .16), transparent 45%), linear-gradient(180deg, #f8faff 0%, #e4ebfa 100%);
  --theme-pattern: linear-gradient(rgba(10, 15, 30, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(10, 15, 30, .07) 1px, transparent 1px);
  --theme-pattern-size: 36px 36px;
  --theme-pattern-opacity: 0.45;
  --theme-mesh: radial-gradient(circle at 25% 30%, rgba(91, 61, 255, .2), transparent 52%), radial-gradient(circle at 78% 55%, rgba(74, 158, 0, .14), transparent 48%);
  --theme-mesh-opacity: 0.55;
  --theme-fx: none;
}

[data-theme="ocean"] {
  --page-gradient-opacity: .15;
  --theme-scene: radial-gradient(ellipse 120% 65% at 50% 115%, rgba(39, 184, 255, .45), transparent 58%), radial-gradient(circle at 15% 30%, rgba(61, 255, 224, .18), transparent 40%), linear-gradient(180deg, #041525 0%, #020810 100%);
  --theme-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40' viewBox='0 0 120 40'%3E%3Cpath d='M0 20 Q30 8 60 20 T120 20' fill='none' stroke='rgba(61,255,224,0.22)' stroke-width='2'/%3E%3Cpath d='M0 30 Q30 18 60 30 T120 30' fill='none' stroke='rgba(39,184,255,0.15)' stroke-width='2'/%3E%3C/svg%3E");
  --theme-pattern-size: 240px 80px;
  --theme-pattern-opacity: 0.85;
  --theme-mesh: radial-gradient(circle at 70% 25%, rgba(61, 255, 224, .28), transparent 48%), radial-gradient(circle at 20% 70%, rgba(39, 184, 255, .16), transparent 45%);
  --theme-mesh-opacity: 0.7;
  --theme-fx: linear-gradient(180deg, transparent 60%, rgba(39, 184, 255, .1) 100%);
}