.shooting-stars {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}


.shooting-star {
  position: absolute;
  top: var(--top, 50%);
  left: -300px;
  height: 5px;  
  width: var(--len, 200px);
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--color, #fff) 30%,
    #fff 70%,
    transparent 100%
  );
  border-radius: 3px;
  box-shadow:
    0 0 20px var(--color, #fff),
    0 0 40px var(--color, #fff),
    0 0 80px var(--color, #fff),
    0 0 120px rgba(255, 255, 255, 0.3),
    -15px 0 25px rgba(255, 255, 255, 0.6);
  opacity: 0;
  transform: rotate(var(--angle, -25deg));
  animation: shoot var(--dur, 7s) linear var(--delay, 0s) infinite;
  z-index: 10;  
}

@keyframes shoot {
  0%   { transform: translateX(0) rotate(var(--angle, -25deg)); opacity: 0; }
  3%   { opacity: 1; }
  97%  { opacity: 1; }
  100% { transform: translateX(calc(100vw + 240px)) rotate(var(--angle, -25deg)); opacity: 0; }
}






.bg-stars-dense {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  
  background-image:
    
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='3' cy='8' r='0.3' fill='%23fff' opacity='0.95'/><circle cx='14' cy='22' r='0.3' fill='%2300d4ff' opacity='0.85'/><circle cx='27' cy='6' r='0.3' fill='%23fff' opacity='0.9'/><circle cx='36' cy='28' r='0.3' fill='%237c3aed' opacity='0.8'/><circle cx='47' cy='13' r='0.3' fill='%23fff' opacity='0.85'/><circle cx='52' cy='32' r='0.3' fill='%23ec4899' opacity='0.8'/><circle cx='61' cy='18' r='0.3' fill='%23fff' opacity='0.9'/><circle cx='68' cy='36' r='0.3' fill='%2300d4ff' opacity='0.85'/><circle cx='78' cy='11' r='0.3' fill='%23fff' opacity='0.85'/><circle cx='87' cy='28' r='0.3' fill='%237c3aed' opacity='0.8'/><circle cx='8' cy='42' r='0.3' fill='%23fff' opacity='0.85'/><circle cx='17' cy='52' r='0.3' fill='%23ec4899' opacity='0.8'/><circle cx='25' cy='38' r='0.3' fill='%23fff' opacity='0.9'/><circle cx='35' cy='58' r='0.3' fill='%2300d4ff' opacity='0.85'/><circle cx='45' cy='42' r='0.3' fill='%23fff' opacity='0.85'/><circle cx='57' cy='64' r='0.3' fill='%237c3aed' opacity='0.8'/><circle cx='67' cy='46' r='0.3' fill='%23fff' opacity='0.9'/><circle cx='75' cy='58' r='0.3' fill='%23ec4899' opacity='0.8'/><circle cx='87' cy='42' r='0.3' fill='%23fff' opacity='0.85'/><circle cx='4' cy='68' r='0.3' fill='%23fff' opacity='0.9'/><circle cx='13' cy='78' r='0.3' fill='%2300d4ff' opacity='0.8'/><circle cx='22' cy='86' r='0.3' fill='%237c3aed' opacity='0.8'/><circle cx='29' cy='72' r='0.3' fill='%23fff' opacity='0.9'/><circle cx='35' cy='88' r='0.3' fill='%23ec4899' opacity='0.8'/><circle cx='43' cy='76' r='0.3' fill='%23fff' opacity='0.85'/><circle cx='50' cy='92' r='0.3' fill='%2300d4ff' opacity='0.85'/></svg>"),
    
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='5' cy='15' r='0.3' fill='%23fff' opacity='0.75'/><circle cx='15' cy='32' r='0.3' fill='%2300d4ff' opacity='0.7'/><circle cx='25' cy='8' r='0.3' fill='%23fff' opacity='0.75'/><circle cx='38' cy='35' r='0.3' fill='%237c3aed' opacity='0.65'/><circle cx='45' cy='18' r='0.3' fill='%23fff' opacity='0.7'/><circle cx='58' cy='42' r='0.3' fill='%23ec4899' opacity='0.65'/><circle cx='65' cy='22' r='0.3' fill='%23fff' opacity='0.75'/><circle cx='78' cy='48' r='0.3' fill='%2300d4ff' opacity='0.65'/><circle cx='85' cy='28' r='0.3' fill='%23fff' opacity='0.7'/><circle cx='95' cy='55' r='0.3' fill='%237c3aed' opacity='0.65'/><circle cx='8' cy='38' r='0.3' fill='%23fff' opacity='0.7'/><circle cx='18' cy='55' r='0.3' fill='%23ec4899' opacity='0.65'/><circle cx='28' cy='35' r='0.3' fill='%23fff' opacity='0.75'/><circle cx='38' cy='58' r='0.3' fill='%2300d4ff' opacity='0.65'/><circle cx='48' cy='42' r='0.3' fill='%23fff' opacity='0.7'/><circle cx='58' cy='65' r='0.3' fill='%237c3aed' opacity='0.65'/><circle cx='68' cy='48' r='0.3' fill='%23fff' opacity='0.75'/><circle cx='78' cy='72' r='0.3' fill='%23ec4899' opacity='0.65'/><circle cx='88' cy='58' r='0.3' fill='%23fff' opacity='0.7'/><circle cx='98' cy='78' r='0.3' fill='%2300d4ff' opacity='0.65'/><circle cx='5' cy='65' r='0.3' fill='%23fff' opacity='0.7'/></svg>"),
    
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='4' cy='7' r='0.3' fill='%23fff' opacity='0.55'/><circle cx='14' cy='23' r='0.3' fill='%2300d4ff' opacity='0.5'/><circle cx='24' cy='6' r='0.3' fill='%23fff' opacity='0.55'/><circle cx='34' cy='29' r='0.3' fill='%237c3aed' opacity='0.45'/><circle cx='44' cy='14' r='0.3' fill='%23fff' opacity='0.5'/><circle cx='54' cy='36' r='0.3' fill='%23ec4899' opacity='0.45'/><circle cx='64' cy='18' r='0.3' fill='%23fff' opacity='0.55'/><circle cx='74' cy='42' r='0.3' fill='%2300d4ff' opacity='0.45'/><circle cx='84' cy='24' r='0.3' fill='%23fff' opacity='0.5'/><circle cx='94' cy='48' r='0.3' fill='%237c3aed' opacity='0.45'/><circle cx='6' cy='34' r='0.3' fill='%23fff' opacity='0.5'/><circle cx='16' cy='48' r='0.3' fill='%23ec4899' opacity='0.45'/><circle cx='26' cy='32' r='0.3' fill='%23fff' opacity='0.55'/><circle cx='36' cy='54' r='0.3' fill='%2300d4ff' opacity='0.45'/><circle cx='46' cy='38' r='0.3' fill='%23fff' opacity='0.5'/><circle cx='56' cy='62' r='0.3' fill='%237c3aed' opacity='0.45'/><circle cx='66' cy='44' r='0.3' fill='%23fff' opacity='0.55'/><circle cx='76' cy='68' r='0.3' fill='%23ec4899' opacity='0.45'/><circle cx='86' cy='54' r='0.3' fill='%23fff' opacity='0.5'/><circle cx='96' cy='74' r='0.3' fill='%2300d4ff' opacity='0.45'/><circle cx='4' cy='58' r='0.3' fill='%23fff' opacity='0.5'/></svg>");
  background-size: 50% 50%, 33% 33%, 25% 25%;
  background-repeat: repeat;
  opacity: 0.85;
  animation: bgDenseTwinkle 5s ease-in-out infinite alternate;
}

@keyframes bgDenseTwinkle {
  0%   { opacity: 0.6; }
  50%  { opacity: 0.95; }
  100% { opacity: 0.75; }
}


/* 2026-07-25: 浅色模式弱化星空背景 (Phase 3 — 内容适配)
   - 白底深色 SVG 星点反差太强, 直接把 opacity 调到 0.18
   - 禁用闪烁动画 (5s 重计算在 Edge 上反复触发)
   - 只针对 .bg-stars-dense (静态装饰层), 不影响 .shooting-star / .holo-particle-canvas */
:root[data-theme="light"] .bg-stars-dense {
  opacity: 0.18;
  animation: none;
}

@keyframes bgShootNatural {
  0%   { opacity: 0; transform: translate(0, 0) rotate(var(--angle)); }
  3%   { opacity: 1; }
  8%   { opacity: 1; box-shadow: 0 0 10px white, 0 0 20px var(--color, white), -10px 0 12px rgba(255,255,255,0.6); }
  85%  { opacity: 1; }
  95%  { opacity: 0.4; }
  100% { opacity: 0; transform: translate(var(--dx, 600px), var(--dy, 400px)) rotate(var(--angle)); }
}






.holo-particle-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 6;
  opacity: 0.85;
}