.page-loading {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at center, rgba(var(--bs-primary-rgb), .045), transparent 34%),
    var(--bs-body-bg);
  transition: opacity .24s ease, visibility .24s ease;
}

.page-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding: 22px 26px;
  border-radius: 22px;
  background: rgba(var(--bs-body-bg-rgb), .88);
  border: 1px solid rgba(var(--bs-primary-rgb), .10);
  box-shadow: 0 18px 45px rgba(15, 23, 42, .08);
  backdrop-filter: blur(10px);
}

.loader {
  position: relative;
  width: 76px;
  height: 76px;
  border-radius: 50%;
}

.loader-core {
  position: absolute;
  inset: 17px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 18px;
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-gray-200);
  box-shadow: 0 8px 24px rgba(15, 23, 42, .08);
}

.loader-core img {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  object-fit: cover;
}

.loader .loader-item {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid transparent;
  will-change: transform;
}

.loader .loader-item:nth-child(2) {
  border-top-color: rgba(var(--bs-primary-rgb), .95);
  animation: kt-loader-spin 1s linear infinite;
}

.loader .loader-item:nth-child(3) {
  inset: 7px;
  border-right-color: rgba(var(--bs-primary-rgb), .42);
  animation: kt-loader-spin-reverse 1.35s linear infinite;
}

.loader .loader-item:nth-child(4) {
  inset: 14px;
  border-bottom-color: rgba(var(--bs-primary-rgb), .22);
  animation: kt-loader-spin 1.7s linear infinite;
}

.loader-text {
  margin-top: 14px;
  color: var(--bs-gray-600);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
}

.page-loading.hide,
.page-loading.page-loading-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@keyframes kt-loader-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes kt-loader-spin-reverse {
  to {
    transform: rotate(-360deg);
  }
}

/* 深色模式适配 */
[data-bs-theme="dark"] .page-loading,
.dark-mode .page-loading {
  background:
    radial-gradient(circle at center, rgba(var(--bs-primary-rgb), .13), transparent 34%),
    var(--bs-app-bg-color, #151521);
}

[data-bs-theme="dark"] .page-loader,
.dark-mode .page-loader {
  background: rgba(21, 21, 33, .88);
  border-color: rgba(var(--bs-primary-rgb), .18);
  box-shadow: 0 18px 45px rgba(0, 0, 0, .38);
}

[data-bs-theme="dark"] .loader-core,
.dark-mode .loader-core {
  background: var(--bs-body-bg);
  border-color: rgba(255, 255, 255, .08);
}

@media (max-width: 768px) {
  .page-loader {
    padding: 18px 22px;
    border-radius: 18px;
  }

  .loader {
    width: 66px;
    height: 66px;
  }

  .loader-core {
    inset: 15px;
    border-radius: 15px;
  }

  .loader-core img {
    width: 24px;
    height: 24px;
  }
}

/* 自定义滚动条整体样式 */
::-webkit-scrollbar {
  width: 6px; /* 设置滚动条宽度 */
  background-color: #f9f9f9; /* 滚动条背景色 */
}

/* 自定义滚动条滑块样式 */
::-webkit-scrollbar-thumb {
  background-color: #bdbdbd; /* 滑块背景色 */
}

/* 自定义滚动条轨道样式 */
::-webkit-scrollbar-track {
  background-color: transparent; /* 轨道背景色 */
}