/* Web UI 自动化 · 执行页背景 v3 — 天蓝主基调（仅 omniflow_hub） */

body.uia-hub-page {
  --uia-bg-blue-1: #f0f9ff;
  --uia-bg-blue-2: #e0f2fe;
  --uia-bg-blue-3: #dbeafe;
  --uia-bg-sky-glow: rgba(56, 189, 248, 0.22);
  --uia-bg-sky-soft: rgba(125, 211, 252, 0.18);
  --uia-bg-grid: rgba(14, 165, 233, 0.07);
  background-color: var(--uia-bg-blue-1);
  color: #334155;
}

body.uia-hub-page .uia-page__bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: linear-gradient(168deg, #f0f9ff 0%, #e0f2fe 34%, #dbeafe 62%, #eef6ff 100%);
}

body.uia-hub-page .uia-page__bg-img {
  display: none !important;
}

body.uia-hub-page .uia-page__bg-base {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse 92% 58% at 50% -10%, var(--uia-bg-sky-glow), transparent 62%),
    radial-gradient(ellipse 52% 44% at 92% 70%, rgba(96, 165, 250, 0.14), transparent 58%),
    radial-gradient(ellipse 46% 40% at 6% 74%, var(--uia-bg-sky-soft), transparent 55%);
}

body.uia-hub-page .uia-page__bg-grid {
  position: absolute;
  inset: -1px;
  z-index: 2;
  opacity: 0.5;
  background-image:
    linear-gradient(var(--uia-bg-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--uia-bg-grid) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(ellipse 88% 72% at 50% 40%, #000 18%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 88% 72% at 50% 40%, #000 18%, transparent 78%);
}

body.uia-hub-page .uia-page__bg-orb {
  position: absolute;
  z-index: 2;
  border-radius: 50%;
  filter: blur(80px);
  will-change: transform;
}

body.uia-hub-page .uia-page__bg-orb--a {
  width: min(44vw, 540px);
  height: min(44vw, 540px);
  top: -10%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(56, 189, 248, 0.24);
  animation: uia-bg-drift-a 28s ease-in-out infinite alternate;
}

body.uia-hub-page .uia-page__bg-orb--b {
  width: min(34vw, 400px);
  height: min(34vw, 400px);
  bottom: 6%;
  left: -5%;
  background: rgba(125, 211, 252, 0.2);
  animation: uia-bg-drift-b 34s ease-in-out infinite alternate;
}

body.uia-hub-page .uia-page__bg-orb--c {
  width: min(30vw, 360px);
  height: min(30vw, 360px);
  top: 44%;
  right: -3%;
  background: rgba(59, 130, 246, 0.16);
  animation: uia-bg-drift-c 30s ease-in-out infinite alternate;
}

@keyframes uia-bg-drift-a {
  0% { transform: translateX(-50%) translateY(0); opacity: 0.8; }
  100% { transform: translateX(-48%) translateY(16px); opacity: 1; }
}

@keyframes uia-bg-drift-b {
  0% { transform: translate(0, 0); opacity: 0.72; }
  100% { transform: translate(20px, -14px); opacity: 0.95; }
}

@keyframes uia-bg-drift-c {
  0% { transform: translate(0, 0); opacity: 0.68; }
  100% { transform: translate(-18px, 10px); opacity: 0.92; }
}

body.uia-hub-page .uia-page__bg-scan {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0.03;
  background: repeating-linear-gradient(
    180deg,
    transparent 0,
    transparent 3px,
    rgba(56, 189, 248, 0.4) 3px,
    rgba(56, 189, 248, 0.4) 4px
  );
  mix-blend-mode: soft-light;
}

body.uia-hub-page .uia-page__bg-scrim {
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    linear-gradient(180deg, rgba(240, 249, 255, 0.32) 0%, rgba(224, 242, 254, 0.18) 48%, rgba(219, 234, 254, 0.22) 100%),
    radial-gradient(ellipse 85% 50% at 50% 0%, rgba(125, 211, 252, 0.16), transparent 68%);
}

body.uia-hub-page .uia-page__bg-deco {
  position: absolute;
  inset: 0;
  z-index: 4;
  background:
    linear-gradient(180deg, rgba(224, 242, 254, 0.18) 0%, rgba(186, 230, 253, 0.12) 100%),
    url("/static/images/ui-automation/uia-page-bg-deco.png?v=20260711uia-blue1") center center / cover no-repeat;
  opacity: 0.5;
  pointer-events: none;
}

body.uia-hub-page .uia-page__bg-noise {
  position: absolute;
  inset: 0;
  z-index: 5;
  opacity: 0.03;
  background-image: url(data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E);
  background-size: 180px 180px;
}

@media (prefers-reduced-motion: reduce) {
  body.uia-hub-page .uia-page__bg-orb {
    animation: none !important;
  }
}