:root {
  --extend-scrollbar-size: 12px;
  --extend-scrollbar-track-color: rgba(214, 198, 159, 0.32);
  --extend-scrollbar-track-bg: linear-gradient(180deg, rgba(245, 239, 226, 0.96), rgba(232, 222, 202, 0.94));
  --extend-scrollbar-track-border: rgba(119, 101, 66, 0.22);
  --extend-scrollbar-thumb-color: rgba(87, 117, 135, 0.84);
  --extend-scrollbar-thumb-bg: linear-gradient(180deg, rgba(118, 150, 170, 0.96), rgba(63, 90, 109, 0.98));
  --extend-scrollbar-thumb-hover-bg: linear-gradient(180deg, rgba(138, 170, 191, 0.98), rgba(77, 107, 128, 0.99));
  --extend-scrollbar-thumb-border: rgba(247, 243, 230, 0.34);
  --extend-scrollbar-corner-bg: rgba(235, 226, 208, 0.92);
  --extend-scrollbar-thumb-shadow: inset 0 0 0 1px rgba(24, 42, 54, 0.28), 0 0 10px rgba(0, 0, 0, 0.12);
  --extend-scrollbar-track-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), inset 0 0 12px rgba(0, 0, 0, 0.06);
}

body.itemFilterShell {
  --extend-scrollbar-track-color: rgba(176, 154, 96, 0.28);
  --extend-scrollbar-track-bg: linear-gradient(180deg, rgba(8, 11, 16, 0.94), rgba(19, 26, 38, 0.92));
  --extend-scrollbar-track-border: rgba(122, 103, 59, 0.26);
  --extend-scrollbar-thumb-color: rgba(201, 170, 92, 0.9);
  --extend-scrollbar-thumb-bg: linear-gradient(180deg, rgba(173, 145, 83, 0.98), rgba(94, 70, 31, 1));
  --extend-scrollbar-thumb-hover-bg: linear-gradient(180deg, rgba(195, 168, 103, 0.99), rgba(115, 86, 40, 1));
  --extend-scrollbar-thumb-border: rgba(235, 207, 123, 0.34);
  --extend-scrollbar-corner-bg: rgba(8, 11, 16, 0.92);
  --extend-scrollbar-thumb-shadow: inset 0 0 0 1px rgba(255, 235, 178, 0.12), 0 0 12px rgba(117, 83, 21, 0.18);
  --extend-scrollbar-track-shadow: inset 0 0 0 1px rgba(255, 239, 186, 0.05), inset 0 0 14px rgba(0, 0, 0, 0.18);
}

body.itemRateShell,
body.gameMapShell {
  --extend-scrollbar-track-color: rgba(176, 154, 96, 0.3);
  --extend-scrollbar-track-bg: linear-gradient(180deg, rgba(7, 11, 17, 0.94), rgba(19, 26, 38, 0.9));
  --extend-scrollbar-track-border: rgba(129, 108, 54, 0.28);
  --extend-scrollbar-thumb-color: rgba(224, 194, 108, 0.92);
  --extend-scrollbar-thumb-bg: linear-gradient(180deg, rgba(255, 231, 154, 0.96), rgba(168, 118, 33, 0.94));
  --extend-scrollbar-thumb-hover-bg: linear-gradient(180deg, rgba(255, 241, 186, 0.99), rgba(201, 145, 44, 0.97));
  --extend-scrollbar-thumb-border: rgba(255, 239, 186, 0.36);
  --extend-scrollbar-corner-bg: rgba(8, 12, 19, 0.9);
  --extend-scrollbar-thumb-shadow: inset 0 0 0 1px rgba(122, 79, 16, 0.34), 0 0 14px rgba(255, 196, 80, 0.12);
  --extend-scrollbar-track-shadow: inset 0 0 0 1px rgba(255, 237, 171, 0.05), inset 0 0 16px rgba(0, 0, 0, 0.22);
}

html,
body,
.workspaceScroller,
.entityList,
.topFilterRow,
.searchDropdown,
.sideList,
.itemGridWrap,
.list-shell,
.overlay-body,
.search-results,
.graph-scroll {
  scrollbar-width: auto;
  scrollbar-color: var(--extend-scrollbar-thumb-color) var(--extend-scrollbar-track-color);
  scrollbar-gutter: stable;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
.workspaceScroller::-webkit-scrollbar,
.entityList::-webkit-scrollbar,
.topFilterRow::-webkit-scrollbar,
.searchDropdown::-webkit-scrollbar,
.sideList::-webkit-scrollbar,
.itemGridWrap::-webkit-scrollbar,
.list-shell::-webkit-scrollbar,
.overlay-body::-webkit-scrollbar,
.search-results::-webkit-scrollbar,
.graph-scroll::-webkit-scrollbar {
  width: var(--extend-scrollbar-size);
  height: var(--extend-scrollbar-size);
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
.workspaceScroller::-webkit-scrollbar-track,
.entityList::-webkit-scrollbar-track,
.topFilterRow::-webkit-scrollbar-track,
.searchDropdown::-webkit-scrollbar-track,
.sideList::-webkit-scrollbar-track,
.itemGridWrap::-webkit-scrollbar-track,
.list-shell::-webkit-scrollbar-track,
.overlay-body::-webkit-scrollbar-track,
.search-results::-webkit-scrollbar-track,
.graph-scroll::-webkit-scrollbar-track {
  background: var(--extend-scrollbar-track-bg);
  border: 1px solid var(--extend-scrollbar-track-border);
  border-radius: 999px;
  box-shadow: var(--extend-scrollbar-track-shadow);
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
.workspaceScroller::-webkit-scrollbar-thumb,
.entityList::-webkit-scrollbar-thumb,
.topFilterRow::-webkit-scrollbar-thumb,
.searchDropdown::-webkit-scrollbar-thumb,
.sideList::-webkit-scrollbar-thumb,
.itemGridWrap::-webkit-scrollbar-thumb,
.list-shell::-webkit-scrollbar-thumb,
.overlay-body::-webkit-scrollbar-thumb,
.search-results::-webkit-scrollbar-thumb,
.graph-scroll::-webkit-scrollbar-thumb {
  min-height: 42px;
  border: 1px solid var(--extend-scrollbar-thumb-border);
  border-radius: 999px;
  background: var(--extend-scrollbar-thumb-bg);
  box-shadow: var(--extend-scrollbar-thumb-shadow);
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
.workspaceScroller::-webkit-scrollbar-thumb:hover,
.entityList::-webkit-scrollbar-thumb:hover,
.topFilterRow::-webkit-scrollbar-thumb:hover,
.searchDropdown::-webkit-scrollbar-thumb:hover,
.sideList::-webkit-scrollbar-thumb:hover,
.itemGridWrap::-webkit-scrollbar-thumb:hover,
.list-shell::-webkit-scrollbar-thumb:hover,
.overlay-body::-webkit-scrollbar-thumb:hover,
.search-results::-webkit-scrollbar-thumb:hover,
.graph-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--extend-scrollbar-thumb-hover-bg);
}

html::-webkit-scrollbar-corner,
body::-webkit-scrollbar-corner,
.workspaceScroller::-webkit-scrollbar-corner,
.entityList::-webkit-scrollbar-corner,
.topFilterRow::-webkit-scrollbar-corner,
.searchDropdown::-webkit-scrollbar-corner,
.sideList::-webkit-scrollbar-corner,
.itemGridWrap::-webkit-scrollbar-corner,
.list-shell::-webkit-scrollbar-corner,
.overlay-body::-webkit-scrollbar-corner,
.search-results::-webkit-scrollbar-corner,
.graph-scroll::-webkit-scrollbar-corner {
  background: var(--extend-scrollbar-corner-bg);
}