body {
  background-color: #282a2c;
}

.modal-overlay {
  /* 定位：固定在屏幕上 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  /* 背景：半透明黑色 */
  background-color: rgba(0, 0, 0, 0.5);

  /* 核心：使用 Flex 让子元素居中 */
  /* display: flex; */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */

  /* 层级：确保在最上方 */
  z-index: 1000;

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  /* 默认隐藏（可选） */
  display: none;
}
.modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
  display: flex;
}
.modal-content {
  background-color: rgba(0, 0, 0, 0);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: contain;
  transform: translateY(-20px);
  transition: transform 0.3s ease;
}
.modal-overlay.active .modal-content {
  transform: translateY(0);
}
/** 美化windows 平台滚动条 */
.beautify-scrollbar ::-webkit-scrollbar {
  width: 0.08rem; /* 纵向宽度 */
  height: 0.08rem; /* 横向高度 */
}
.beautify-scrollbar ::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 0.1rem;
}
.beautify-scrollbar ::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 0.1rem;
  border: 0.02rem solid transparent;
  background-clip: content-box;
}

/* 鼠标悬停或激活时加深 */
.beautify-scrollbar ::-webkit-scrollbar-thumb:hover,
.beautify-scrollbar ::-webkit-scrollbar-thumb:active {
  background-color: rgba(0, 0, 0, 0.4);
}

/* 兼容 Firefox (Windows 端) */
.beautify-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}