/* ============================================================
   全站统一样式表（背景 + 配色）
   改这一个文件，所有引用它的页面一起变。

   引用方式（放在 <head> 里，越靠前越好）：
   <link rel="stylesheet" href="/static/统一样式.css">

   注意：如果页面自己的 <style> 里也写了 body{background:...}，
   会覆盖这里。新页面不要在页面内再写 body 背景。
   ============================================================ */

:root{
  /* 背景与配色：全站只在这里定义 */
  --底色渐变: linear-gradient(135deg,#e8f4ff,#f0faff,#e6f9f8);
  --光晕一: rgba(180,220,255,0.35);
  --光晕二: rgba(190,240,248,0.32);
  --星点光: #c8e8ff;
  --主色: #2478ff;
  --标题色: #112240;
  --正文色: #334;
  --卡片底: rgba(255,255,255,0.68);
  --卡片描边: rgba(255,255,255,0.8);
}

/* 背景主体：任何页面加了引用就有，不需要额外 DOM */
body{
  background: var(--底色渐变);
}

/* 光晕层：页面里放 <div class="bg-wave"></div> 即可出现 */
.bg-wave{
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(circle at 15% 75%, var(--光晕一), transparent 28%),
    radial-gradient(circle at 88% 82%, var(--光晕二), transparent 26%);
  animation: waveMove 12s ease-in-out infinite alternate;
  z-index:0;
}
@keyframes waveMove{
  0%{ transform: translate(-12px,-8px); }
  100%{ transform: translate(12px,8px); }
}

/* 星点：需要时放 <div class="star-dot" style="top:68%;left:13%;font-size:18px">✦</div> */
.star-dot{
  position:absolute;
  color:#fff;
  text-shadow:0 0 6px var(--星点光);
  opacity:0.75;
  animation: twinkle 3.2s ease-in-out infinite alternate;
}
@keyframes twinkle{
  from{ opacity:0.3; }
  to{ opacity:0.95; }
}