/* ====== SCROLLER BASE (dark transparent style) ====== */

/* === ОСНОВНОЙ КЛАСС (тёмный фон по умолчанию) === */
.scrollable {
    overflow: auto;
    scrollbar-gutter: stable;
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: rgba(255, 255, 255, 0.4) rgba(0, 0, 0, 0.1);
}

    /* ===== Chrome / Edge / Safari ===== */
    .scrollable::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }

    .scrollable::-webkit-scrollbar-track {
        background-color: rgba(0, 0, 0, 0.1);
    }

    .scrollable::-webkit-scrollbar-thumb {
        background-color: rgba(255, 255, 255, 0.3);
        border-radius: 8px;
        transition: background-color 0.25s ease;
    }

    .scrollable:hover::-webkit-scrollbar-thumb {
        background-color: rgba(255, 255, 255, 0.6);
    }

    .scrollable::-webkit-scrollbar-button {
        display: none;
    }

    /* === СВЕТЛЫЙ ВАРИАНТ === */
    .scrollable.scrollbar-light {
        scrollbar-color: rgba(0, 0, 0, 0.1) transparent; /* Firefox */
    }

        .scrollable.scrollbar-light::-webkit-scrollbar-track {
            background-color: transparent;
        }

        .scrollable.scrollbar-light::-webkit-scrollbar-thumb {
            background-color: rgba(0, 0, 0, 0.10);
            transition: background-color 0.25s ease;
        }

        .scrollable.scrollbar-light:hover::-webkit-scrollbar-thumb {
            background-color: rgba(0, 0, 0, 0.1);
        }