.liquid-glass {
    position: relative;
    isolation: isolate;
    border: 1px solid var(--border);
    background:
        linear-gradient(135deg,
            rgba(255, 255, 255, 0.16),
            rgba(255, 255, 255, 0.045) 46%,
            rgba(145, 190, 255, 0.075));
    box-shadow:
        var(--shadow),
        inset 0 1px 0 rgba(255, 255, 255, 0.26),
        inset 0 -1px 0 rgba(255, 255, 255, 0.03);
    -webkit-backdrop-filter: blur(22px) saturate(145%);
    backdrop-filter: blur(22px) saturate(145%);
}

.liquid-glass::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    border-radius: inherit;
    background:
        radial-gradient(280px circle at var(--glass-x, 18%) var(--glass-y, 0%),
            rgba(255, 255, 255, 0.28),
            transparent 58%);
    content: "";
    opacity: 0.72;
    pointer-events: none;
    transition: opacity 180ms ease;
}

.liquid-glass::after {
    position: absolute;
    z-index: -1;
    inset: 1px;
    border-radius: inherit;
    background:
        linear-gradient(110deg,
            rgba(255, 255, 255, 0.18),
            transparent 21%,
            transparent 78%,
            rgba(175, 202, 255, 0.08));
    content: "";
    opacity: 0.58;
    pointer-events: none;
}

.liquid-glass:hover::before {
    opacity: 1;
}

:root[data-theme="light"] .liquid-glass {
    background:
        linear-gradient(135deg,
            rgba(255, 255, 255, 0.76),
            rgba(255, 255, 255, 0.36) 48%,
            rgba(207, 226, 255, 0.42));
    -webkit-backdrop-filter: blur(23px) saturate(140%);
    backdrop-filter: blur(23px) saturate(140%);
}

.hero-panel.liquid-glass::after,
.list-card.liquid-glass::after {
    border-radius: inherit;
}

.filters.liquid-glass {
    border-radius: 20px;
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .liquid-glass {
        background: var(--surface-strong);
    }
}