a {
  cursor: pointer;
}
a:hover {
  text-decoration: none;
}
ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
/* 基础动效类 - 建议所有动效按钮都使用 */
.btn-animation {
  cursor: pointer;
  /* 添加过渡效果：适用于背景色、变换、阴影 */
  transition: background-color 0.3s ease, transform 0.2s ease,
    box-shadow 0.3s ease;
  /* 设置变换的原点为元素中心 */
  transform-origin: center;
  /* 添加定位以便使用伪元素 */
  position: relative;
  /* 隐藏溢出的内容（对于涟漪效果很重要） */
  overflow: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* 点击效果：瞬间缩小 */
.btn-animation:active {
  transform: scale(0.95);
}
/* 涟漪效果（使用伪元素实现） */
.btn-animation::after {
  content: "";
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: 0;
  height: 0;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.2); /* 涟漪颜色 */
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  transition: none; /* 初始状态无过渡 */
}
.btn-animation:active::before {
  width: 150px;
  height: 150px;
  opacity: 0;
  transition: width 0.3s ease-out, height 0.3s ease-out, opacity 0.3s ease-out;
}
/* 可选：添加轻微阴影提升立体感 */
.header-right-bottom:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.header-right-bottom:active {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* 全局的滑动栏样式 */
html::-webkit-scrollbar {
  width: 5px; /* 设置垂直滚动条的宽度 */
  height: 5px; /* 设置水平滚动条的高度 */
}

html::-webkit-scrollbar-thumb {
  border-radius: 4px; /* 滑块的圆角 */
  background: #a0a0a0; /* 滑块的颜色 */
}

html::-webkit-scrollbar-thumb:hover {
  background: #808080; /* 滑块在鼠标悬停时的颜色 */
}

html::-webkit-scrollbar-track {
  background: transparent; /* 滚动条轨道的颜色 */
}

html::-webkit-scrollbar-track-piece {
  background: transparent; /* 滚动条未被滑块覆盖的轨道部分颜色，可选 */
}

html::-webkit-scrollbar-corner {
  background: #f0f0f0; /* 当同时有垂直和水平滚动条时，它们交角的样式 */
}