/* ———— 纯滚动条美化（仅作用于滚动条，不影响任何其他样式） ———— */
/* 1. Chrome/Edge/Safari 全局滚动条（页面级） */
::-webkit-scrollbar {
  width: 8px;    /* 垂直滚动条宽度 */
  height: 8px;   /* 水平滚动条高度 */
}
::-webkit-scrollbar-track {
  background: #f5f5f5;  /* 轨道背景色 */
  border-radius: 10px;  /* 轨道圆角 */
}
::-webkit-scrollbar-thumb {
  background: #c4c4c4;  /* 滑块默认颜色 */
  border-radius: 10px;  /* 滑块圆角 */
  box-shadow: inset 0 0 3px rgba(0,0,0,0.1); /* 内阴影增强立体感 */
  transition: all 0.3s ease;  /* 过渡动画 */
}
::-webkit-scrollbar-thumb:hover {
  background: #999;  /* 滑块 hover 颜色 */
  transform: scaleX(1.1);  /* 轻微放大 */
}
::-webkit-scrollbar-thumb:active {
  background: #666;  /* 滑块激活颜色 */
}

/* 2. Chrome/Edge/Safari 局部滚动容器（.local-scroll 类）滚动条 */
.local-scroll::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.local-scroll::-webkit-scrollbar-track {
  background: #f0f0f0;
  border-radius: 8px;
}
.local-scroll::-webkit-scrollbar-thumb {
  background: #a8a8a8;
  border-radius: 8px;
  box-shadow: inset 0 0 2px rgba(0,0,0,0.1);
  transition: background 0.3s ease;
}
.local-scroll::-webkit-scrollbar-thumb:hover {
  background: #888;
}
.local-scroll::-webkit-scrollbar-thumb:active {
  background: #666;
}

/* 3. Firefox 全局滚动条 */
html {
  scrollbar-width: thin;  /* 滚动条宽度：细款 */
  scrollbar-color: #c4c4c4 #f5f5f5;  /* 滑块颜色 轨道颜色 */
}

/* 4. Firefox 局部滚动容器（.local-scroll 类）滚动条 */
.local-scroll {
  scrollbar-width: thin;
  scrollbar-color: #a8a8a8 #f0f0f0;
}