:root {
    --sb-track: rgba(192, 132, 160, 0.08);
    --sb-thumb: #c084a0;
    --sb-thumb-hover: #a0627e;
    --sb-width: 8px;
}

[data-theme="dark"] {
    --sb-track: rgba(192, 132, 160, 0.06);
    --sb-thumb: #a0627e;
    --sb-thumb-hover: #c084a0;
}

html {
    scrollbar-width: thin;
    scrollbar-color: var(--sb-thumb) var(--sb-track);
}

::-webkit-scrollbar {
    width: var(--sb-width);
    height: var(--sb-width);
}

::-webkit-scrollbar-track {
    background: var(--sb-track);
    border-radius: 100vw;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(
        180deg,
        #e8b4c8 0%,
        #c084a0 35%,
        #5eaaa8 70%,
        #7dab8a 100%
    );
    border-radius: 100vw;
    border: 2px solid transparent;
    background-clip: padding-box;
    transition: background 0.3s ease;
    box-shadow: inset 0 0 6px rgba(192, 132, 160, 0.2);
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(
        180deg,
        #c084a0 0%,
        #a0627e 35%,
        #3d8a88 70%,
        #5d8b6a 100%
    );
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:active {
    background: linear-gradient(
        180deg,
        #a0627e 0%,
        #804a5e 50%,
        #2d6a68 100%
    );
    background-clip: padding-box;
}

::-webkit-scrollbar-corner {
    background: transparent;
}

@keyframes scrollbar-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

::-webkit-scrollbar-thumb:hover {
    animation: scrollbar-pulse 1.5s ease-in-out infinite;
}