.scroll-top-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  pointer-events: none;
  transform: translateZ(0);
}

.scroll-top-blur,
.scroll-top-gradient {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  pointer-events: none;
}

.scroll-top-gradient {
  height: 80%;
}

.scroll-top-title {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 36rpx;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0;
  pointer-events: none;
}

.scroll-top-back {
  position: absolute;
  left: 30rpx;
  width: 80rpx;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  pointer-events: auto;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.55) 0%,
    rgba(255, 255, 255, 0.28) 45%,
    rgba(255, 255, 255, 0.42) 100%
  );
  backdrop-filter: blur(24px) saturate(1.7) brightness(1.05);
  -webkit-backdrop-filter: blur(24px) saturate(1.7) brightness(1.05);
  border: 1rpx solid rgba(255, 255, 255, 0.35);
  box-shadow:
    inset 0 2rpx 3rpx rgba(255, 255, 255, 0.65),
    inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.06),
    inset 0 0 0 1rpx rgba(255, 255, 255, 0.18),
    0 12rpx 40rpx rgba(0, 0, 0, 0.18),
    0 4rpx 12rpx rgba(0, 0, 0, 0.08);
}

.theme-dark .scroll-top-back {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.16) 0%,
    rgba(255, 255, 255, 0.06) 45%,
    rgba(255, 255, 255, 0.12) 100%
  );
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow:
    inset 0 2rpx 3rpx rgba(255, 255, 255, 0.22),
    inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.28),
    inset 0 0 0 1rpx rgba(255, 255, 255, 0.1),
    0 12rpx 40rpx rgba(0, 0, 0, 0.5),
    0 4rpx 12rpx rgba(0, 0, 0, 0.3);
}

.scroll-top-back-arrow {
  font-size: 44rpx;
  font-weight: 600;
  line-height: 1;
  color: var(--text-primary);
}

.scroll-top-blur-mid {
  backdrop-filter: blur(12rpx);
  -webkit-backdrop-filter: blur(12rpx);
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.8) 42%,
    rgba(0, 0, 0, 0) 76%
  );
  mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.8) 42%,
    rgba(0, 0, 0, 0) 76%
  );
}

.scroll-top-blur-soft {
  backdrop-filter: blur(6rpx);
  -webkit-backdrop-filter: blur(6rpx);
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.65) 52%,
    rgba(0, 0, 0, 0) 100%
  );
  mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.65) 52%,
    rgba(0, 0, 0, 0) 100%
  );
}

.theme-light .scroll-top-gradient {
  background: linear-gradient(
    to bottom,
    rgba(250, 247, 242, 0.94) 0%,
    rgba(250, 247, 242, 0.9) 50%,
    rgba(250, 247, 242, 0.58) 78%,
    rgba(250, 247, 242, 0) 100%
  );
}

.theme-dark .scroll-top-gradient {
  background: linear-gradient(
    to bottom,
    rgba(25, 25, 25, 0.94) 0%,
    rgba(25, 25, 25, 0.9) 50%,
    rgba(25, 25, 25, 0.58) 78%,
    rgba(25, 25, 25, 0) 100%
  );
}