/* ============================================================
   FanCloud 站点背景 · 墨山流云 v2（2026-11-04）
   ------------------------------------------------------------
   两层结构：
     1) 场景层（::after）：水墨远山 + 流云 + 月晕 + 星链，SVG 无损缩放
     2) 纹样层（::before）：宝相花菱格平铺，做古风底纹
   两个伪元素都 position:fixed 铺满视口，容器加 isolation 限制层级；
   纹样用 mask 在左上（标题区）渐隐，保证正文对比度。
   ============================================================ */

/* ---------- 通用：让最外层容器成为层叠边界 ---------- */
#root > div.bg-background,
#root > div.h-svh,
#root > div.relative.grid.h-svh {
  isolation: isolate;
}

/* ============ 深色主题 ============ */
html.dark #root > div.bg-background {
  background-color: #05080f;
}

html.dark #root > div.bg-background::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-color: #05080f;
  background-image: url("/brand/bg/scene-dark-v1.svg?v=2");
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
}

html.dark #root > div.bg-background::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("/brand/bg/pattern-dark-v1.svg?v=2");
  background-size: 420px 420px;
  background-repeat: repeat;
  opacity: 0.34;
  -webkit-mask-image: radial-gradient(125% 100% at 15% 12%, rgba(0, 0, 0, 0.10), rgba(0, 0, 0, 0.34) 38%, rgba(0, 0, 0, 1) 100%);
  mask-image: radial-gradient(125% 100% at 15% 12%, rgba(0, 0, 0, 0.10), rgba(0, 0, 0, 0.34) 38%, rgba(0, 0, 0, 1) 100%);
}

/* ============ 浅色主题 ============ */
html:not(.dark) #root > div.bg-background {
  background-color: #fbf7ee;
}

html:not(.dark) #root > div.bg-background::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-color: #fbf7ee;
  background-image: url("/brand/bg/scene-light-v1.svg?v=2");
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
}

html:not(.dark) #root > div.bg-background::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("/brand/bg/pattern-light-v1.svg?v=2");
  background-size: 420px 420px;
  background-repeat: repeat;
  opacity: 0.46;
  -webkit-mask-image: radial-gradient(125% 100% at 15% 12%, rgba(0, 0, 0, 0.10), rgba(0, 0, 0, 0.34) 38%, rgba(0, 0, 0, 1) 100%);
  mask-image: radial-gradient(125% 100% at 15% 12%, rgba(0, 0, 0, 0.10), rgba(0, 0, 0, 0.34) 38%, rgba(0, 0, 0, 1) 100%);
}

/* ============ 其余整页容器（模型广场、控制台、登录等） ============
   这些页面信息密集，只上淡纹样，不铺山景，避免干扰阅读。 */
html.dark #root > div.h-svh,
html.dark #root > div.relative.grid.h-svh {
  background-color: #05080f;
}

html.dark #root > div.h-svh::before,
html.dark #root > div.relative.grid.h-svh::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("/brand/bg/pattern-dark-v1.svg?v=2");
  background-size: 420px 420px;
  background-repeat: repeat;
  opacity: 0.24;
}

html:not(.dark) #root > div.h-svh,
html:not(.dark) #root > div.relative.grid.h-svh {
  background-color: #fbf7ee;
}

html:not(.dark) #root > div.h-svh::before,
html:not(.dark) #root > div.relative.grid.h-svh::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("/brand/bg/pattern-light-v1.svg?v=2");
  background-size: 420px 420px;
  background-repeat: repeat;
  opacity: 0.34;
}

/* ============ 窄屏：纹样密度在手机上看会偏挤，降低存在感 ============ */
@media (max-width: 640px) {
  html.dark #root > div.bg-background::before { opacity: 0.20; }
  html:not(.dark) #root > div.bg-background::before { opacity: 0.28; }
  html.dark #root > div.bg-background::after,
  html:not(.dark) #root > div.bg-background::after { background-position: center top; }
}