.glass-surface {
  position: relative;
  overflow: hidden;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.glass-surface__filter {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

/* browsers that support backdrop-filter: url(#svgFilter) — Chrome/Edge */
.glass-surface--svg {
  background: rgba(20, 25, 34, var(--glass-frost, 0.08));
  backdrop-filter: var(--filter-id) saturate(var(--glass-saturation, 1.3)) brightness(1.05);
  -webkit-backdrop-filter: saturate(var(--glass-saturation, 1.3)) brightness(1.05);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 8px 30px rgba(0, 0, 0, 0.45);
}

/* Safari / Firefox fallback: no SVG-filter backdrop support, use a
   plain frosted blur instead so it still looks intentional. */
.glass-surface--fallback {
  background: rgba(20, 25, 34, calc(var(--glass-frost, 0.08) + 0.55));
  backdrop-filter: blur(14px) saturate(var(--glass-saturation, 1.3));
  -webkit-backdrop-filter: blur(14px) saturate(var(--glass-saturation, 1.3));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 8px 30px rgba(0, 0, 0, 0.45);
}