/* 背景图层（可替换为本地图片） */
/*#bg-layer {*/
/*    position: fixed;*/
/*    inset: 0;*/
/*    z-index: 0;*/
/*    !* 如果你有本地背景图，放在 static/images/ 下，用下面这行替换 *!*/
/*    !* background: url('/images/star-bg.jpg') center center / cover no-repeat; *!*/
/*    !*background: url('https://images.unsplash.com/photo-1541701494587-cb58502866ab?w=1920&q=80') center center / cover no-repeat;*!*/
/*    background-color: #0a0e1a;*/
/*    filter: brightness(0.9);*/
/*}*/
/* 图片加载失败时叠加渐变 */
#bg-layer::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 30% 40%, rgba(30, 60, 120, 0.3), transparent 70%),
    radial-gradient(ellipse at 70% 60%, rgba(80, 40, 120, 0.2), transparent 60%);
    pointer-events: none;
}

/* 粒子容器 */
#particles-container {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

/* 单个光点 */
.star-particle {
    position: absolute;
    border-radius: 50%;
    will-change: transform, opacity;
    pointer-events: none;
    left: 0;
    top: 0;
    transform: translate(0, 0);
    transition: box-shadow 0.2s;
}
/* 颜色类（背景径向渐变） */
.star-particle.white   { background: radial-gradient(circle at 30% 30%, #ffffff, #e0f7fa); }
.star-particle.blue    { background: radial-gradient(circle at 30% 30%, #b3e5fc, #4fc3f7); }
.star-particle.purple  { background: radial-gradient(circle at 30% 30%, #e1bee7, #ab47bc); }
.star-particle.cyan    { background: radial-gradient(circle at 30% 30%, #b2ebf2, #26c6da); }
.star-particle.gold    { background: radial-gradient(circle at 30% 30%, #fff9c4, #fdd835); }
.star-particle.pink    { background: radial-gradient(circle at 30% 30%, #f8bbd0, #ec407a); }

/* 小屏适配 */
@media (max-width: 600px) {
    .star-particle {
        box-shadow: 0 0 8px 1px rgba(255,255,255,0.15);
    }
}