#slider svg {
  width: 35px;
  height: 35px;
}

#sliderRange {
    display: none; /* 默认隐藏透明度滑块 */
    margin-left: 14px;
  }


.card-controls {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  align-items: center;
  gap: 20px;
  }

.opacity-controls {
    display: flex;
    align-items: center;
    margin-left: 8px;
  }

.light .icon-darkpair {
    color: #000;
  }

.dark .icon-darkpair {
    color: #fff;
  }

.icon-darkpair {
    font-size: 26px;
  }

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: #fff;
  border: 2.5px solid #1976d2;
  border-radius: 50%;
  cursor: pointer;
  transition: box-shadow 0.22s cubic-bezier(.4,0,.2,1), border-color 0.22s cubic-bezier(.4,0,.2,1);
}

input[type="range"]:active::-webkit-slider-thumb,
input[type="range"]:focus::-webkit-slider-thumb {
  border-color: #1565c0;
  box-shadow: 0 0 0 12px #1976d23a, 0 2px 8px rgba(25,118,210,0.17);
}

/********************************
 * Moonlight 控件适配
 ********************************/
/* 平板端适配 */
@media (max-width: 768px) {
  .card-controls {
    top: 8px;
    left: 8px;
    gap: 12px;
  }
  .icon-darkpair {
    font-size: 22px;
  }
  #sliderRange {
    margin-left: 10px;
  }
}

/* 手机端适配 */
@media (max-width: 500px) {
  .card-controls {
    top: 6px;
    left: 8px;
    gap: 8px;
  }
  .icon-darkpair {
    font-size: 20px; /* 缩小图标 */
  }
  .opacity-controls {
    margin-left: 8px; /* 缩小间距 */
  }
  #sliderRange {
    width: 80px; /* 缩短滑块长度 */
    margin-left: 8px;
  }
  input[type="range"]::-webkit-slider-thumb {
    width: 16px;
    height: 16px;
  }
}