/* Reusable glass utilities for cross-page consistency */
.glass-popup {
    border: 1px solid var(--surface-popup-edge);
    border-radius: var(--radius-popup);
    background: var(--surface-popup-bg);
    box-shadow: var(--liquid-glass-elevated-shadow);
    -webkit-backdrop-filter: blur(calc(var(--liquid-glass-blur) * 0.95)) saturate(var(--liquid-glass-saturation));
    backdrop-filter: blur(calc(var(--liquid-glass-blur) * 0.95)) saturate(var(--liquid-glass-saturation));
}

.glass-surface {
    border: 1px solid var(--liquid-glass-edge);
    background: var(--liquid-glass-surface);
    box-shadow: var(--liquid-glass-shadow);
    -webkit-backdrop-filter: blur(var(--liquid-glass-blur)) saturate(var(--liquid-glass-saturation));
    backdrop-filter: blur(var(--liquid-glass-blur)) saturate(var(--liquid-glass-saturation));
}

.glass-surface-soft {
    border: 1px solid var(--liquid-glass-edge);
    background: var(--liquid-glass-surface-soft);
    -webkit-backdrop-filter: blur(calc(var(--liquid-glass-blur) * 0.45)) saturate(var(--liquid-glass-saturation));
    backdrop-filter: blur(calc(var(--liquid-glass-blur) * 0.45)) saturate(var(--liquid-glass-saturation));
}

.glass-control {
    border: 1px solid var(--liquid-glass-control-edge);
    background: var(--liquid-glass-control-bg);
    color: var(--liquid-glass-control-text);
}

.glass-control:hover {
    border-color: var(--liquid-glass-control-edge-strong);
    background: var(--liquid-glass-control-bg-hover);
}