/* ═══════════════════════════════════════════════════
   Liquid Glass — cool-tinted, no warm artifacts
   ═══════════════════════════════════════════════════ */

:root {
    /* ═══ Базовая стеклянная поверхность (Softer) ═══ */
    --glass-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.1),
        0 4px 24px -4px rgba(0, 0, 0, 0.12),
        0 8px 32px -4px rgba(0, 0, 0, 0.08);

    /* ═══ Активное / нажатое состояние ═══ */
    --glass-shadow-active:
        inset 0 0 0 1px rgba(255, 255, 255, 0.08),
        inset 0 2px 8px rgba(0, 0, 0, 0.04),
        0 2px 8px rgba(0, 0, 0, 0.08);

    /* ═══ Ползунок-индикатор ═══ */
    --glass-shadow-indicator:
        inset 0 0 0 1px rgba(255, 255, 255, 0.15),
        0 2px 8px rgba(0, 0, 0, 0.12),
        0 1px 2px rgba(0, 0, 0, 0.08);
}

/* Базовое стекло — вешать на любую поверхность */
.glass {
    box-shadow: var(--glass-shadow);
}

/* Активное стекло — подсветка нажатого/выбранного элемента */
.glass-active {
    box-shadow: var(--glass-shadow-active);
}

/* Стеклянный ползунок-индикатор */
.glass-indicator {
    box-shadow: var(--glass-shadow-indicator);
}