/* Базовый стиль (для нормальных браузеров) */
.glass-light,
.glass-dark {
  backdrop-filter: blur(10px) url(#liquid-prism-intense);
  -webkit-backdrop-filter: blur(10px) url(#liquid-prism-intense);
  border-radius: 50px;
  transition: transform 0.3s ease;
  padding: 20px;
}

/* Светлая версия */
.glass-light {
  background: rgba(255, 255, 255, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #000;
}

/* Тёмная версия */
.glass-dark {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
}

.glass-light:hover,
.glass-dark:hover {
  transform: scale(1.02);
}

/* ===== Мобильная версия (без SVG, только блюр) ===== */
@media (max-width: 768px) {
  .glass-light,
  .glass-dark {
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
  }

  .glass-light {
    background: rgba(255, 255, 255, 0.4);
  }

  .glass-dark {
    background: rgba(0, 0, 0, 0.4);
  }
}

/* ===== Safari (отключаем SVG-фильтр, чтобы хоть блюр работал) ===== */
@supports (-webkit-backdrop-filter: blur(0)) {
  .glass-light,
  .glass-dark {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    /* убираем преломление (url), чтобы Safari применил хотя бы блюр */
  }
}