/* 皮肤名称: 波纹 */
/* ============================================================
   主题皮肤：圆点扩散波纹（随机版 · 三层涟漪）
   灵感来源：桌面《波纹.html》，已按需求增强：

   - 每个涟漪群颜色随机（柔和色板）；
   - 位置随机（视口内任意处扩散）；
   - 大小 / 时长随机；
   - 每个位置保留原版"三层"效果：3 层波纹从同一点
     错开 0s / -2.3s / -4.6s 连续扩散（负延迟实现）；
   - 同一时刻展示 1~3 个涟漪群（数量随机波动）；
   - 背景颜色保持浅青 #f0fdfa 不变。

   说明：
   - 波纹 DOM 由同目录 bowen.js 动态生成与回收
     （start 启动定时器、stop 全部移除并停止）；
   - 扩散动画为纯 CSS（bw-dotRipple），随机参数通过
     CSS 变量 --dot-color / --dot-scale / --dot-duration 注入；
   - 仅背景层，不改动导航、卡片等任何页面内容。
   ============================================================ */

body.theme-bowen {
    background: #f0fdfa;
    background-attachment: fixed;
}

/* ---- 全屏背景容器（由 bowen.js 注入到 body 末尾） ---- */
#bowen-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1; /* 负层级：body 背景之上、所有页面内容之下 */
    overflow: hidden;
    pointer-events: none;
}

/* 扩散波纹：20px 圆点从随机位置放大扩散并淡出 */
#bowen-bg .dot {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--dot-color, #5eead4);   /* 随机颜色 */
    opacity: 0;                              /* 动画未启动前不可见 */
    transform: translate(-50%, -50%) scale(1);
    animation: bw-dotRipple var(--dot-duration, 7s) ease-out forwards;
    will-change: transform, opacity;
}

@keyframes bw-dotRipple {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.6;
    }
    100% {
        transform: translate(-50%, -50%) scale(var(--dot-scale, 30));
        opacity: 0;
    }
}

/* 皮肤徽章（用户管理页皮肤列自动识别） */
.badge-theme-bowen {
    background-color: #ccfbf1;
    color: #0f766e;
}