html {
    scrollbar-width: thin;
    scrollbar-color: #e2e8f0e0 rgba(2, 6, 23, 0.9);
    scrollbar-gutter: auto;
    overflow-y: auto;
}

html[data-app-shell="true"],
html[data-app-shell="true"] body {
    height: 100%;
    overflow: hidden;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
    width: 0.62rem;
    height: 0.62rem;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
    background: rgba(2, 6, 23, 0.94);
    border-left: 1px solid rgba(148, 163, 184, 0.05);
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
    border: 2px solid rgba(2, 6, 23, 0.94);
    border-radius: 9999px;
    background: rgba(226, 232, 240, 0.9);
    background-clip: padding-box;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover {
    background: rgba(248, 250, 252, 0.96);
}

html::-webkit-scrollbar-corner,
body::-webkit-scrollbar-corner {
    background: transparent;
}

@media (prefers-color-scheme: dark) {
    html {
        scrollbar-color: rgba(226, 232, 240, 0.88) rgba(2, 6, 23, 0.92);
    }

    html::-webkit-scrollbar-track,
    body::-webkit-scrollbar-track {
        background: rgba(2, 6, 23, 0.96);
        border-left: 1px solid rgba(148, 163, 184, 0.05);
    }
}