/* Glass Surface - with SVG support when available */

.glass-surface {
    position: relative;
    border-radius: 0;
    border: none !important;
    background: hsl(0 0% 100% / 0.1);
    backdrop-filter: blur(12px) saturate(1.8) brightness(1.1);
    -webkit-backdrop-filter: blur(12px) saturate(1.8) brightness(1.1);
    overflow: hidden;
    transition: opacity 260ms ease-out;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    .glass-surface {
        border: none !important;
        background: hsl(0 0% 0% / 0.1);
        backdrop-filter: blur(12px) saturate(1.8) brightness(1.2);
        -webkit-backdrop-filter: blur(12px) saturate(1.8) brightness(1.2);
    }
}

.glass-surface-svg {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0;
    z-index: -1;
}

/* Fallback without backdrop-filter support */
@supports not (backdrop-filter: blur(12px)) {
    .glass-surface {
        border: none !important;
        background: rgba(255, 255, 255, 0.4);
    }
    
    @media (prefers-color-scheme: dark) {
        .glass-surface {
            border: none !important;
            background: rgba(0, 0, 0, 0.4);
        }
    }
}