/**
 * 液态氛围 — iOS 睿睿导航同款：深炭底 #0a0c11、左青 #00e5ff、右深紫、暗色气泡
 */

html {
  min-height: 100%;
  background-color: #0a0c11;
}

body.theme-liquid-glass:has(.liquid-background) {
  background: transparent !important;
}

/* 前台：霓虹青 + 电紫 光斑（相对深色底可见） */
body.theme-liquid-glass.page-public-index,
body.theme-liquid-glass.page-public-verify {
  --liquid-orb-1: rgba(90, 242, 255, 0.72);
  --liquid-orb-2: rgba(196, 120, 255, 0.58);
  --liquid-orb-3: rgba(124, 164, 255, 0.62);
  --liquid-bubble-highlight: rgba(255, 255, 255, 0.24);
  --liquid-bubble-mid: rgba(90, 242, 255, 0.22);
  --liquid-bubble-edge: rgba(167, 139, 250, 0.2);
  --liquid-bubble-stroke: rgba(255, 255, 255, 0.28);
  --liquid-bubble-shadow: rgba(90, 242, 255, 0.25);
  --liquid-vignette: rgba(0, 0, 0, 0.45);
}

/* 后台：同系略弱，不抢眼 */
body.theme-liquid-glass:not(.page-public-index):not(.page-public-verify) {
  --liquid-orb-1: rgba(0, 229, 255, 0.22);
  --liquid-orb-2: rgba(124, 58, 237, 0.2);
  --liquid-orb-3: rgba(99, 102, 241, 0.18);
  --liquid-bubble-highlight: rgba(255, 255, 255, 0.08);
  --liquid-bubble-mid: rgba(0, 229, 255, 0.06);
  --liquid-bubble-edge: rgba(167, 139, 250, 0.06);
  --liquid-bubble-stroke: rgba(255, 255, 255, 0.12);
  --liquid-bubble-shadow: rgba(0, 0, 0, 0.35);
  --liquid-vignette: rgba(0, 0, 0, 0.35);
}

.liquid-atmosphere-svg {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.liquid-background {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  isolation: isolate;
}

.liquid-bg-mesh {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* 导航页同款：深底 + 左青雾 + 右紫雾 */
body.theme-liquid-glass.page-public-index .liquid-bg-mesh,
body.theme-liquid-glass.page-public-verify .liquid-bg-mesh {
  background:
    radial-gradient(980px 760px at 8% 25%, rgba(90, 242, 255, 0.34), transparent 56%),
    radial-gradient(860px 640px at 92% 20%, rgba(167, 99, 255, 0.45), transparent 52%),
    radial-gradient(660px 520px at 70% 85%, rgba(124, 164, 255, 0.26), transparent 50%),
    linear-gradient(165deg, #0a0c11 0%, #0f1219 45%, #12151f 100%);
}

body.theme-liquid-glass:not(.page-public-index):not(.page-public-verify) .liquid-bg-mesh {
  background:
    radial-gradient(700px 500px at 12% 30%, rgba(0, 229, 255, 0.12), transparent 55%),
    radial-gradient(600px 480px at 88% 65%, rgba(91, 33, 182, 0.15), transparent 52%),
    linear-gradient(168deg, #0a0c11 0%, #12151c 50%, #0d0f14 100%);
}

.floating-elements {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.liquid-background::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(
    ellipse 100% 95% at 50% 40%,
    transparent 0%,
    transparent 35%,
    var(--liquid-vignette) 100%
  );
}

.orb-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.bubble-goo-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  filter: url(#liquid-goo);
}

.light-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(62px) saturate(1.45);
  opacity: 0.78;
  animation: liquid-orb-float 22s ease-in-out infinite;
  mix-blend-mode: screen;
}

.light-orb.orb-1 {
  width: min(90vw, 640px);
  height: min(90vw, 640px);
  top: -20%;
  left: -12%;
  background: radial-gradient(circle at 32% 28%, var(--liquid-orb-1), transparent 48%);
  animation-delay: 0s;
}

.light-orb.orb-2 {
  width: min(72vw, 520px);
  height: min(72vw, 520px);
  top: 22%;
  right: -18%;
  background: radial-gradient(circle at 50% 48%, var(--liquid-orb-2), transparent 50%);
  animation-delay: -7s;
  animation-duration: 26s;
}

.light-orb.orb-3 {
  width: min(60vw, 460px);
  height: min(60vw, 460px);
  bottom: -14%;
  left: 12%;
  background: radial-gradient(circle at 42% 34%, var(--liquid-orb-3), transparent 52%);
  animation-delay: -12s;
  animation-duration: 24s;
}

body.theme-liquid-glass:not(.page-public-index):not(.page-public-verify) .light-orb {
  opacity: 0.38;
  filter: blur(68px) saturate(1.15);
  mix-blend-mode: normal;
}

@keyframes liquid-orb-float {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(2.5%, 1.5%) scale(1.03);
  }
  66% {
    transform: translate(-1.5%, -1%) scale(0.99);
  }
}

.glass-bubble {
  position: absolute;
  border-radius: 50%;
  background: linear-gradient(
    145deg,
    var(--liquid-bubble-highlight) 0%,
    var(--liquid-bubble-mid) 38%,
    var(--liquid-bubble-edge) 100%
  );
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.35),
    0 16px 44px var(--liquid-bubble-shadow),
    inset 0 -1px 0 rgba(90, 242, 255, 0.26);
  border: 1px solid var(--liquid-bubble-stroke);
  animation: liquid-bubble-drift 18s ease-in-out infinite;
}

.glass-bubble.bubble-1 {
  width: 152px;
  height: 152px;
  top: 8%;
  left: 4%;
  animation-delay: 0s;
}

.glass-bubble.bubble-2 {
  width: 92px;
  height: 92px;
  top: 54%;
  left: 0;
  animation-delay: -3s;
  animation-duration: 21s;
}

.glass-bubble.bubble-3 {
  width: 122px;
  height: 122px;
  top: 18%;
  right: 8%;
  animation-delay: -6s;
}

.glass-bubble.bubble-4 {
  width: 70px;
  height: 70px;
  bottom: 14%;
  right: 4%;
  animation-delay: -2s;
  animation-duration: 20s;
}

.glass-bubble.bubble-5 {
  width: 108px;
  height: 108px;
  bottom: 24%;
  left: 34%;
  animation-delay: -9s;
}

.glass-bubble.bubble-6 {
  width: 84px;
  height: 84px;
  top: 38%;
  left: 44%;
  animation-delay: -11s;
  animation-duration: 23s;
}

@keyframes liquid-bubble-drift {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(12px, -8px) rotate(4deg);
  }
  50% {
    transform: translate(-6px, 14px) rotate(-3deg);
  }
  75% {
    transform: translate(8px, 6px) rotate(2deg);
  }
}

body.theme-liquid-glass.page-public-index:has(.liquid-background) .main-container,
body.theme-liquid-glass.page-public-verify:has(.liquid-background) .main-container {
  position: relative;
  z-index: 1;
}

body.theme-liquid-glass.page-public-index:has(.liquid-background) .footer-copyright,
body.theme-liquid-glass.page-public-verify:has(.liquid-background) .footer-copyright {
  position: relative;
  z-index: 1;
}

body.theme-liquid-glass.admin-login:has(.liquid-background) .main-container {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .light-orb,
  .glass-bubble {
    animation: none !important;
  }
}