.fuel-glass-scroll-target {
    scrollbar-width:none;
    -ms-overflow-style:none;
}

.fuel-glass-scroll-target::-webkit-scrollbar {
    width:0;
    height:0;
}

.fuel-glass-scrollbar {
    --fuel-scroll-width:34px;
    --fuel-scroll-radius:999px;
    --fuel-scroll-track-padding:3px;
    --fuel-scroll-red:#dc655f;
    --fuel-scroll-orange:#e9a23b;
    --fuel-scroll-green:#38a875;
    --fuel-scroll-glow:rgba(74,111,225,.24);
    width:var(--fuel-scroll-width);
    min-height:150px;
    position:fixed;
    z-index:420;
    display:grid;
    grid-template-rows:28px minmax(70px,1fr) 28px;
    gap:4px;
    padding:5px 4px;
    border:1px solid rgba(255,255,255,.68);
    border-radius:var(--fuel-scroll-radius);
    background:linear-gradient(145deg,rgba(247,251,255,.72),rgba(203,218,238,.54));
    box-shadow:0 8px 22px rgba(42,57,91,.15),inset 0 1px 0 rgba(255,255,255,.86),inset 0 -1px 0 rgba(82,102,145,.09);
    backdrop-filter:blur(12px) saturate(118%);
    -webkit-backdrop-filter:blur(12px) saturate(118%);
    transition:box-shadow .2s ease,opacity .2s ease;
    direction:ltr;
    touch-action:none;
}

.fuel-glass-scrollbar:hover,
.fuel-glass-scrollbar:focus-within {
    box-shadow:0 0 0 3px var(--fuel-scroll-glow),0 9px 24px rgba(42,57,91,.17),inset 0 1px 0 rgba(255,255,255,.88);
}

.fuel-glass-scrollbar.is-dragging {
    box-shadow:0 0 0 4px var(--fuel-scroll-glow),0 10px 26px rgba(42,57,91,.2),inset 0 1px 0 rgba(255,255,255,.9);
}

.fuel-glass-scrollbar.is-idle {
    opacity:0;
    pointer-events:none;
}

.fuel-glass-scrollbar__icon {
    display:grid;
    place-items:center;
    color:#4766a7;
    font-size:16px;
    filter:drop-shadow(0 2px 3px rgba(53,72,113,.16));
}

.fuel-glass-scrollbar__icon.is-top { color:#4a76d9; }
.fuel-glass-scrollbar__icon.is-bottom { color:#328d68; }

.fuel-glass-scrollbar__track {
    position:relative;
    overflow:hidden;
    margin-inline:auto;
    width:12px;
    border:1px solid rgba(255,255,255,.6);
    border-radius:var(--fuel-scroll-radius);
    background:linear-gradient(to bottom,var(--fuel-scroll-red) 0 32%,var(--fuel-scroll-orange) 36% 64%,var(--fuel-scroll-green) 68% 100%);
    box-shadow:inset 0 2px 5px rgba(48,55,76,.2),0 1px 0 rgba(255,255,255,.6);
}

.fuel-glass-scrollbar__thumb {
    width:calc(100% - (var(--fuel-scroll-track-padding) * 2));
    position:absolute;
    top:0;
    left:var(--fuel-scroll-track-padding);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    min-height:44px;
    padding:0;
    border:1px solid rgba(112,132,166,.88);
    border-radius:var(--fuel-scroll-radius);
    background:linear-gradient(145deg,#596b88,#33445f);
    box-shadow:0 4px 11px rgba(22,35,62,.36),inset 0 1px 0 rgba(255,255,255,.2);
    cursor:grab;
    touch-action:none;
    will-change:transform,height;
}

.fuel-glass-scrollbar__thumb span {
    width:4px;
    height:1px;
    display:block;
    border-radius:2px;
    background:rgba(226,236,250,.78);
}

.fuel-glass-scrollbar__thumb:hover { background:linear-gradient(145deg,#4f6382,#293b57); }
.fuel-glass-scrollbar__thumb:active,
.fuel-glass-scrollbar.is-dragging .fuel-glass-scrollbar__thumb { cursor:grabbing; }
.fuel-glass-scrollbar__thumb:focus-visible { outline:2px solid rgba(63,100,210,.65); outline-offset:2px; }
.fuel-scroll-dragging,
.fuel-scroll-dragging * { user-select:none; }

html[data-theme="dark"] .fuel-glass-scrollbar {
    border-color:rgba(255,255,255,.12);
    background:linear-gradient(145deg,rgba(45,56,73,.82),rgba(25,34,47,.72));
    box-shadow:0 9px 24px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.1);
}

@media (max-width:768px) {
    .fuel-glass-scrollbar {
        --fuel-scroll-width:30px;
        grid-template-rows:24px minmax(62px,1fr) 24px;
        padding:4px 3px;
    }
    .fuel-glass-scrollbar__icon { font-size:14px; }
    .fuel-glass-scrollbar__track { width:10px; }
}

@media (prefers-reduced-motion:reduce) {
    .fuel-glass-scrollbar { transition:none; }
}