/* ═══════════════════════════════════════════════════
   Liquid Glass — переиспользуемый эффект «жидкого стекла»
   ═══════════════════════════════════════════════════ */

:root {
    /* ═══ Базовая стеклянная поверхность ═══ */
    --glass-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.03),
        inset 1.8px 3px 0px -2px rgba(255, 255, 255, 0.27),
        inset -2px -2px 0px -2px rgba(255, 255, 255, 0.24),
        inset -3px -8px 1px -6px rgba(255, 255, 255, 0.18),
        inset -0.3px -1px 4px 0px rgba(0, 0, 0, 0.24),
        inset -1.5px 2.5px 0px -2px rgba(0, 0, 0, 0.4),
        inset 0px 3px 4px -2px rgba(0, 0, 0, 0.4),
        inset 2px -6.5px 1px -4px rgba(0, 0, 0, 0.2),
        0px 1px 5px 0px rgba(0, 0, 0, 0.2),
        0px 6px 16px 0px rgba(0, 0, 0, 0.16);

    /* ═══ Активное / нажатое состояние (табы, сегменты) ═══ */
    --glass-shadow-active:
        inset 0 0 0 1px rgba(255, 255, 255, 0.03),
        inset 1px 1px 0 0 rgba(255, 255, 255, 0.15),
        inset -1px -1px 0 0 rgba(255, 255, 255, 0.1),
        0 2px 4px rgba(0, 0, 0, 0.15);

    /* ═══ Ползунок-индикатор (сегментированный переключатель) ═══ */
    --glass-shadow-indicator:
        inset 0 0 0 1px #ffffff08,
        inset 2px 1px 0 -1px #ffffff45,
        inset -1.5px -1px 0 -1px #ffffff3d,
        inset -2px -6px 1px -5px #ffffff2e,
        inset -1px 2px 3px -1px #0006,
        inset 0 -4px 1px -2px #0003,
        0 3px 6px #00000029;
}

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

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

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