:root {
    /* Сила рефракции фона по краям (отрицательное = выпуклое стекло) */
    --glass-displace: -15;
    --glass-blur: 3px;
    --glass-blur-webkit: 5px;

    --glass-rim-gradient: linear-gradient(135deg,
            rgba(255, 255, 255, 0.7) 0%,
            rgba(255, 255, 255, 0.12) 22%,
            rgba(255, 255, 255, 0) 48%,
            rgba(255, 255, 255, 0) 58%,
            rgba(255, 255, 255, 0.1) 80%,
            rgba(255, 255, 255, 0.45) 100%);
    --glass-inset-highlight: rgba(255, 255, 255, 0.5);
    --glass-inset-light: rgba(255, 255, 255, 0.45);
    --glass-inset-dim: rgba(255, 255, 255, 0.12);
    --glass-drop-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

/* --- Подложка: только background с альфой, без glass-эффектов --- */
.glass-substrate,
.glass--max {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    filter: none;
    border: none;
    outline: none;
}

.glass-substrate::before,
.glass--max::before,
.glass-substrate::after,
.glass--max::after {
    content: none;
    display: none;
}

.glass-substrate {
    background: var(--glass-substrate-bg, rgba(0, 150, 225, 0.1)); /* #0096E1 10% */
}

.glass--max {
    background: rgba(153, 51, 221, 0.1); /* #9933DD 10% */
}

/* --- Эффект стекла: только с классом .glass --- */
.glass {
    position: relative;
    backdrop-filter: blur(var(--glass-blur)) url(#glass-displace);
    -webkit-backdrop-filter: blur(var(--glass-blur-webkit));
    box-shadow:
        inset 0 1px 1px var(--glass-inset-highlight),
        inset 2px 2px 8px -3px var(--glass-inset-light),
        inset -2px -3px 10px -4px var(--glass-inset-dim),
        var(--glass-drop-shadow);
}

.glass::before {
    content: '';
    display: block;
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: var(--glass-rim-gradient);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.glass > * {
    position: relative;
    z-index: 1;
}

.glass.glass--max {
    --glass-rim-gradient: linear-gradient(135deg,
            rgba(235, 215, 255, 0.65) 0%,
            rgba(150, 120, 190, 0.12) 22%,
            rgba(58, 45, 85, 0) 48%,
            rgba(58, 45, 85, 0) 58%,
            rgba(150, 120, 190, 0.12) 80%,
            rgba(235, 215, 255, 0.4) 100%);
    --glass-inset-highlight: rgba(235, 215, 255, 0.5);
    --glass-inset-light: rgba(220, 200, 240, 0.45);
    --glass-inset-dim: rgba(220, 200, 240, 0.14);
}