/* 主站自定义背景层 */
html.has-site-bg {
  background: #06070b;
}

html.has-site-bg body {
  background: transparent !important;
}

.site-bg-layer {
  position: fixed;
  inset: -24px;
  z-index: -1;
  pointer-events: none;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  filter: blur(var(--site-bg-blur, 0px));
  transform: scale(1.04);
}

.site-bg-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(2, 4, 10, calc(var(--site-bg-overlay, 0.55) * 0.76)), rgba(2, 4, 10, var(--site-bg-overlay, 0.55))),
    radial-gradient(ellipse 80% 70% at 50% 40%, transparent 20%, rgba(0, 0, 0, 0.18) 100%);
}

html[data-site-bg="midnight"] .site-bg-layer {
  background-image:
    radial-gradient(ellipse 70% 55% at 74% 18%, rgba(83, 105, 175, 0.32), transparent 62%),
    radial-gradient(ellipse 55% 50% at 16% 82%, rgba(52, 92, 95, 0.22), transparent 68%),
    linear-gradient(160deg, #090e1c 0%, #04060d 55%, #010205 100%);
}

html[data-site-bg="nebula"] .site-bg-layer {
  background-image:
    radial-gradient(ellipse 55% 45% at 72% 28%, rgba(170, 83, 116, 0.28), transparent 64%),
    radial-gradient(ellipse 52% 48% at 22% 72%, rgba(72, 103, 182, 0.3), transparent 68%),
    radial-gradient(ellipse 40% 38% at 82% 82%, rgba(73, 152, 143, 0.17), transparent 70%),
    linear-gradient(150deg, #0a0a15, #03030a);
}

html[data-site-bg="aurora"] .site-bg-layer {
  background-image:
    radial-gradient(ellipse 70% 35% at 46% 18%, rgba(72, 192, 169, 0.22), transparent 68%),
    radial-gradient(ellipse 55% 40% at 78% 48%, rgba(73, 102, 196, 0.2), transparent 70%),
    linear-gradient(175deg, #061014, #03070b 80%);
}

html[data-site-bg="sunset"] .site-bg-layer {
  background-image:
    radial-gradient(ellipse 70% 50% at 66% 10%, rgba(223, 125, 79, 0.3), transparent 64%),
    radial-gradient(ellipse 55% 50% at 12% 78%, rgba(123, 61, 104, 0.2), transparent 70%),
    linear-gradient(165deg, #120c0b, #080506 80%);
}

html[data-site-bg="mono"] .site-bg-layer {
  background-image: none;
  background-color: #030304;
}

html[data-site-bg="image"] .site-bg-layer {
  background-color: #05060a;
}