.playerPlus.isSubscribed,
.avatarPlus.isSubscribed{
    opacity: 0;
    transform: scale(.7) translateY(.15vw);
    pointer-events: none;
    background: linear-gradient(135deg, #2f8b61, #22c55e);
    animation: subscribeFadeOut .28s ease forwards;
}

.subscriptionToast{
    position: fixed;
    right: 1.4vw;
    bottom: 1.4vw;
    z-index: 9999;
    color: #f4fff8;
    padding: .7vw 1vw;
    border-radius: .8vw;
    box-shadow: 0 .5vw 1.1vw rgba(0, 0, 0, 0.24);
    font-size: .9vw;
    opacity: 0;
    transform: translateY(.5vw);
    transition: opacity .2s ease, transform .2s ease;
    pointer-events: none;
}

.subscriptionToastNigative{
    background: linear-gradient(135deg, #3a2424, #6d1f1f);
}

.subscriptionToastDefaault{
    background: linear-gradient(135deg, #243a31, #1f6d45);
}

.subscriptionToast.isVisible{
    opacity: 1;
    transform: translateY(0);
}

@keyframes subscribeFadeOut {
    0% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
    100% {
        opacity: 0;
        transform: scale(.7) translateY(.15vw);
    }
}

html {
    scrollbar-width: thin;
    scrollbar-color: #24272c rgba(255, 255, 255, 0.04);
}

body::-webkit-scrollbar,
.galleryTrack::-webkit-scrollbar {
    width: .55vw;
    height: .55vw;
}

body::-webkit-scrollbar-track,
.galleryTrack::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 999px;
}

body::-webkit-scrollbar-thumb,
.galleryTrack::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #5A9CFF, #2D7DFF);
    border-radius: 999px;
    border: .1vw solid rgba(255, 255, 255, 0.05);
}

body::-webkit-scrollbar-thumb:hover,
.galleryTrack::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #75b9ff, #4aabff);
}


@media (max-width: 768px) {
    .subscriptionToast {
        position: fixed;
        left: 16px;
        right: 16px;
        bottom: 20px;
        width: auto;

        padding: 12px 18px;
        border-radius: 12px;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);

        font-size: 14px;
        line-height: 1.4;
        text-align: center;

        opacity: 0;
        transform: translateY(12px);
        transition: opacity 0.25s ease, transform 0.25s ease;
        pointer-events: none;
        z-index: 9999;
    }

    .subscriptionToast.isVisible {
        opacity: 1;
        transform: translateY(0);
    }

    @keyframes subscribeFadeOut {
        0% {
            opacity: 1;
            transform: scale(1) translateY(0);
        }
        100% {
            opacity: 0;
            transform: scale(0.9) translateY(6px);
        }
    }
}