/* 皮肤名称: 雪花 */
/* ============================================================
   主题皮肤：粉蓝雪梦（雪花）
   灵感来源：桌面《雪花.html》
   （淡粉 + 淡蓝梦幻渐变 + 柔和闪烁星光 + 三层远山剪影
     + 六角结晶雪花漫天飘落）

   说明：
   - 星光层 / 远山 SVG / 雪花 canvas 由同目录 xuehua.js
     注入（start 注入并启动动画、stop 整体移除）；
   - 星光闪烁动画为纯 CSS（ms-twinkle）；
   - 仅背景层，不改动导航、卡片等任何页面内容。
   ============================================================ */

body.theme-xuehua {
    background:
        /* 左上：淡粉光晕 */
        radial-gradient(ellipse 70% 50% at 20% 10%, rgba(255, 200, 220, 0.55) 0%, transparent 65%),
        /* 右上：淡蓝光晕 */
        radial-gradient(ellipse 65% 45% at 80% 5%, rgba(180, 215, 255, 0.55) 0%, transparent 65%),
        /* 中间：粉蓝交融 */
        radial-gradient(ellipse 100% 60% at 50% 35%, rgba(220, 210, 245, 0.4) 0%, transparent 70%),
        /* 左下：淡蓝 */
        radial-gradient(ellipse 80% 50% at 15% 95%, rgba(190, 220, 255, 0.45) 0%, transparent 70%),
        /* 右下：淡粉 */
        radial-gradient(ellipse 80% 50% at 85% 100%, rgba(255, 205, 225, 0.45) 0%, transparent 70%),
        /* 主渐变：从淡粉到淡蓝 */
        linear-gradient(160deg, #fde8f0 0%, #e8e4f8 35%, #dce8fb 65%, #d4e4fa 100%);
    background-color: #e8e4f8;
    background-attachment: fixed;
}

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

/* ---- 柔和星光层（淡色背景下用淡淡的亮点） ---- */
#xuehua-bg .ms-stars {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(2px 2px at 12% 18%, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(1.5px 1.5px at 25% 8%, rgba(255, 240, 250, 0.85), transparent),
        radial-gradient(1.8px 1.8px at 38% 22%, rgba(230, 240, 255, 0.9), transparent),
        radial-gradient(1.5px 1.5px at 52% 6%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(2.2px 2.2px at 66% 15%, rgba(255, 235, 245, 0.9), transparent),
        radial-gradient(1.5px 1.5px at 78% 10%, rgba(220, 235, 255, 0.85), transparent),
        radial-gradient(1.8px 1.8px at 88% 25%, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(1.5px 1.5px at 8% 35%, rgba(255, 245, 250, 0.7), transparent),
        radial-gradient(1.6px 1.6px at 45% 38%, rgba(230, 240, 255, 0.8), transparent),
        radial-gradient(2px 2px at 70% 42%, rgba(255, 255, 255, 0.85), transparent),
        radial-gradient(1.5px 1.5px at 92% 45%, rgba(255, 240, 250, 0.7), transparent),
        radial-gradient(1.7px 1.7px at 18% 52%, rgba(220, 235, 255, 0.75), transparent),
        radial-gradient(1.5px 1.5px at 58% 55%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(2px 2px at 32% 62%, rgba(255, 235, 245, 0.8), transparent),
        radial-gradient(1.5px 1.5px at 82% 58%, rgba(230, 240, 255, 0.65), transparent),
        radial-gradient(1.6px 1.6px at 5% 10%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(1.9px 1.9px at 95% 5%, rgba(255, 240, 250, 0.85), transparent);
    animation: ms-twinkle 6s ease-in-out infinite alternate;
}
@keyframes ms-twinkle {
    0%   { opacity: 0.5; }
    50%  { opacity: 1; }
    100% { opacity: 0.65; }
}

/* ---- 远山剪影（淡紫蓝色调，三层） ---- */
#xuehua-bg .ms-mountains {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 38vh;
    min-height: 200px;
    opacity: 0.85;
}
#xuehua-bg .ms-mountains svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* ---- 雪花画布 ---- */
#xuehua-bg canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* 皮肤徽章（用户管理页皮肤列自动识别） */
.badge-theme-xuehua {
    background-color: #fde8f0;
    color: #9d6ea8;
}