/* 基础样式：适用于 WebKit 内核（Chrome/Safari） */
::-webkit-scrollbar {
  width: 8px; /* 滚动条宽度 */
  height: 8px; /* 横向滚动条高度 */
}

::-webkit-scrollbar-track {
  background: #f0f2f5; /* 轨道背景色 */
  border-radius: 4px; /* 轨道圆角 */
}

::-webkit-scrollbar-thumb {
  background: #d1d5db; /* 拇指默认颜色 */
  border-radius: 4px;
  border: 2px solid transparent; /* 防止拇指粘边 */
  background-clip: content-box; /* 确保圆角生效 */
}

/* 悬停/激活状态 */
::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

::-webkit-scrollbar-thumb:active {
  background: #6b7280;
}

/* 滚动条角落（解决底部横纵滚动条交汇留白） */
::-webkit-scrollbar-corner {
  background: transparent;
}

/* Firefox 兼容（需配合 scrollbar-width） */
@supports (scrollbar-color: #d1d5db #f0f2f5) {
  * {
    scrollbar-width: thin; /* auto | thin | none */
    scrollbar-color: #d1d5db #f0f2f5; /* 拇指 轨道 */
  }
}