/* ===== Dynamic Background (lines + particles) — FULL REPLACEMENT ===== */
:root{
  /* Light (day) — 极简低饱和 */
  --fx-c1: #ffa378;  /* 淡暖色斑（很浅） */
  --fx-c2: #76b3ff;  /* 淡冷色斑（很浅） */
  --fx-dot:  rgba(0,0,0,.45);  /* 日间点：中性灰 */
  --fx-line: rgba(0,0,0,.16);  /* 日间线：很淡的灰 */

  /* Dark (night) — 黑绿科技感 */
  --fx-dark-bg:   #0b0c0d;
  --fx-dark-c1:   rgba(10,255,157,.08);
  --fx-dark-c2:   rgba(0,240,255,.06);
  --fx-dark-dot:  rgba(0,255,170,.9);
  --fx-dark-line: rgba(0,255,170,.26);
}

/* 容器固定在最底层，完全不遮挡交互 */
#bgFX{
  position: fixed; inset:0;
  z-index: -1;
  pointer-events: none;
  overflow:hidden;
}

/* 日间：浅灰主底 + 两个极淡色斑；动画幅度小、节奏慢 */
html[data-theme="light"] #bgFX{
  background:
    radial-gradient(1200px 1200px at var(--fx-x,55%) var(--fx-y,45%),
      color-mix(in srgb, var(--fx-c1) 20%, transparent) 0%, transparent 55%),
    radial-gradient(1000px 1000px at calc(100% - var(--fx-x,45%)) calc(100% - var(--fx-y,55%)),
      color-mix(in srgb, var(--fx-c2) 20%, transparent) 0%, transparent 55%),
    linear-gradient(120deg, #fafbfc 0%, #f4f6f8 60%, #eef3f7 100%);
  animation: fxGlow 30s ease-in-out infinite alternate;
  filter: none;
}

/* 夜间：黑底+轻微青绿晕染 */
html[data-theme="dark"] #bgFX{
  background:
    radial-gradient(1200px 1200px at 70% 30%, var(--fx-dark-c1), transparent 60%),
    radial-gradient(900px 900px at 20% 80%, var(--fx-dark-c2), transparent 60%),
    var(--fx-dark-bg);
}

/* 渐变缓动（幅度很小，避免“花”） */
@keyframes fxGlow{
  0%   { --fx-x: 35%; --fx-y: 35%; }
  100% { --fx-x: 65%; --fx-y: 65%; }
}

/* 画布全屏 */
#fxCanvas{
  display:block;
  width:100vw; height:100vh;
}

/* 可访问性：减少动画时，停用渐变动画，JS 也会降粒子量 */
@media (prefers-reduced-motion: reduce){
  html[data-theme="light"] #bgFX{ animation: none; }
}
/* ===== Dynamic Background (clean day / neon night + effects) ===== */
:root{
  /* Day (low-sat) */
  --fx-c1: #ffa378;
  --fx-c2: #76b3ff;
  --fx-dot:  rgba(0,0,0,.55);  /* 点更明显 */
  --fx-line: rgba(0,0,0,.36);  /* 线更明显 */

  /* Night (black + neon green/teal) */
  --fx-dark-bg:   #0b0c0d;
  --fx-dark-c1:   rgba(10,255,157,.08);
  --fx-dark-c2:   rgba(0,240,255,.06);
  --fx-dark-dot:  rgba(170,255,220,.95);
  --fx-dark-line: rgba(0,255,170,.55); /* 提升线的可见度 */
}

/* 容器在最底层，不挡交互 */
#bgFX{
  position: fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden;
}

/* 日间：浅灰主底 + 两个极淡色斑；动画幅度小、节奏慢 */
html[data-theme="light"] #bgFX{
  background:
    radial-gradient(1200px 1200px at var(--fx-x,55%) var(--fx-y,45%),
      color-mix(in srgb, var(--fx-c1) 16%, transparent) 0%, transparent 55%),
    radial-gradient(1000px 1000px at calc(100% - var(--fx-x,45%)) calc(100% - var(--fx-y,55%)),
      color-mix(in srgb, var(--fx-c2) 16%, transparent) 0%, transparent 55%),
    linear-gradient(120deg, #fafbfc 0%, #f4f6f8 60%, #eef3f7 100%);
  animation: fxGlow 30s ease-in-out infinite alternate;
}

/* 夜间：黑底+轻微青绿晕染 + 细微晕影 */
html[data-theme="dark"] #bgFX{
  background:
    radial-gradient(1200px 1200px at 70% 30%, var(--fx-dark-c1), transparent 60%),
    radial-gradient(900px 900px at 20% 80%, var(--fx-dark-c2), transparent 60%),
    var(--fx-dark-bg);
}
#bgFX::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(120% 100% at 50% 70%, rgba(0,0,0,.08), transparent 60%);
}

/* 渐变缓动（幅度小，避免“花”） */
@keyframes fxGlow{
  0%   { --fx-x: 35%; --fx-y: 35%; }
  100% { --fx-x: 65%; --fx-y: 65%; }
}

/* 画布 */
#fxCanvas{ display:block; width:100vw; height:100vh; }

/* 可访问性 */
@media (prefers-reduced-motion: reduce){
  html[data-theme="light"] #bgFX{ animation:none; }
}