/* ==========================================
   全局 / 公共自定义滚动条样式
   ========================================== */

/* 1. WebKit 引擎浏览器 (Chrome, Edge, Safari, Opera) */
::-webkit-scrollbar {
  width: 8px;  /* Y轴（垂直）滚动条宽度：想更粗就加大这个值 */
  height: 8px; /* X轴（水平）滚动条高度 */
}

/* 滚动条轨道（背景） */
::-webkit-scrollbar-track {
  background: transparent; /* 轨道设为透明，视觉上更干净 */
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  background-color: #DDDDDD; /* 指定滚动条颜色 */
  border-radius: 4px;         /* 圆角随宽度一起放大，视觉更协调 */
}

/* 鼠标悬停滑块时稍微加深，提升交互手感（可选） */
::-webkit-scrollbar-thumb:hover {
  background-color: #CCCCCC;
}


/* 2. Firefox 兼容（标准属性）
   注意：Chrome 121+ 一旦设置 scrollbar-width / scrollbar-color，
   就会忽略上面的 ::-webkit-scrollbar，3px 极细和 hover 效果都会失效。
   所以这里用 @-moz-document 限定只在 Firefox 生效，Chrome/Edge/Safari 继续走 webkit 方案。 */
@-moz-document url-prefix() {
  * {
    /* Firefox 只有 auto / thin / none 三档：thin 更细，auto 是系统默认（比 thin 粗） */
    scrollbar-width: auto;
    scrollbar-color: #DDDDDD transparent; /* 滑块颜色 轨道颜色 */
  }
}