.glass-panel {
    background: var(--surface-glass);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-md);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: var(--shadow-glass);
}

.glass-panel-strong {
    background: var(--surface-glass-strong);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-md);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    box-shadow: var(--shadow-glass);
}

/*
 * The header's glass background lives on a separate absolutely-positioned
 * child (.site-header-glass-bg) rather than on .site-header itself, because
 * backdrop-filter on an element makes it a containing block for fixed-position
 * descendants (like the mobile nav panel) - which would break that panel's
 * full-viewport positioning.
 */
.site-header-glass-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(11, 18, 32, 0.65);
    border-bottom: 1px solid var(--border-glass);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .glass-panel,
    .glass-panel-strong {
        background: var(--navy-800);
    }

    .site-header-glass-bg {
        background: var(--navy-900);
    }
}