/* 皮肤名称: 多样 */
/* ============================================================
   主题皮肤：丰富悬浮几何背景（多样）
   灵感来源：桌面《多样.html》
   （浅色渐变底 + 矩形/圆形/三角形/五角星/六边形/菱形
     共 34 个元素，多层次浮动节奏）

   说明：
   - 形状 DOM 由同目录 duoyang.js 注入（start 注入、stop 移除）；
   - 动画为纯 CSS（floatA/floatB/floatC，前缀 dy- 防冲突）；
   - 仅背景层，不改动导航、卡片等任何页面内容。
   ============================================================ */

/* 浅色渐变兜底 */
body.theme-duoyang {
    background: linear-gradient(135deg, #fef7ff 0%, #f0f9ff 45%, #f0fdf4 100%);
    background-attachment: fixed;
}

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

/* 所有几何图形统一固定在背景层 */
#duoyang-bg .geo { position: absolute; opacity: 0.55; }

/* ========== 大号基础形状 ========== */
#duoyang-bg .geo-1 { width: 260px; height: 260px; border-radius: 28px; background: #ddd6fe; top: 6%; left: 4%; animation: dy-floatA 11s ease-in-out infinite; }
#duoyang-bg .geo-2 { width: 220px; height: 220px; border-radius: 50%; background: #bfdbfe; top: 10%; right: 6%; animation: dy-floatB 9s ease-in-out infinite reverse; }
#duoyang-bg .geo-3 { width: 240px; height: 180px; border-radius: 22px; background: #fed7aa; bottom: 8%; left: 6%; animation: dy-floatC 12s ease-in-out infinite; }
#duoyang-bg .geo-4 { width: 200px; height: 200px; border-radius: 30px; background: #c7d2fe; bottom: 6%; right: 4%; animation: dy-floatA 10s ease-in-out infinite reverse; }
#duoyang-bg .geo-5 { width: 280px; height: 160px; border-radius: 24px; background: #bbf7d0; top: 42%; left: -4%; animation: dy-floatB 8.5s ease-in-out infinite; }
#duoyang-bg .geo-6 { width: 180px; height: 240px; border-radius: 22px; background: #fbcfe8; top: 38%; right: -2%; animation: dy-floatC 9.5s ease-in-out infinite reverse; }

/* ========== 中号矩形与圆形 ========== */
#duoyang-bg .geo-7 { width: 140px; height: 140px; border-radius: 22px; background: #fef08a; top: 18%; left: 34%; animation: dy-floatA 7.4s ease-in-out infinite reverse; }
#duoyang-bg .geo-8 { width: 160px; height: 120px; border-radius: 18px; background: #a5b4fc; bottom: 20%; right: 30%; animation: dy-floatB 8s ease-in-out infinite; }
#duoyang-bg .geo-9 { width: 120px; height: 160px; border-radius: 20px; background: #99f6e4; top: 62%; left: 10%; animation: dy-floatC 6.6s ease-in-out infinite; }
#duoyang-bg .geo-10 { width: 150px; height: 150px; border-radius: 50%; background: #fda4af; bottom: 34%; left: 24%; animation: dy-floatA 9s ease-in-out infinite reverse; }
#duoyang-bg .geo-11 { width: 130px; height: 130px; border-radius: 24px; background: #d8b4fe; top: 26%; right: 32%; animation: dy-floatB 7.8s ease-in-out infinite; }
#duoyang-bg .geo-12 { width: 170px; height: 110px; border-radius: 16px; background: #bae6fd; bottom: 46%; right: 12%; animation: dy-floatC 10.2s ease-in-out infinite; }

/* ========== 小图形点缀 ========== */
#duoyang-bg .geo-13 { width: 70px; height: 70px; border-radius: 14px; background: #fde047; top: 8%; left: 46%; animation: dy-floatA 5.4s ease-in-out infinite; }
#duoyang-bg .geo-14 { width: 90px; height: 90px; border-radius: 50%; background: #c4b5fd; top: 74%; left: 40%; animation: dy-floatB 6.2s ease-in-out infinite reverse; }
#duoyang-bg .geo-15 { width: 80px; height: 80px; border-radius: 16px; background: #fb7185; bottom: 14%; left: 42%; animation: dy-floatC 4.8s ease-in-out infinite; }
#duoyang-bg .geo-16 { width: 100px; height: 100px; border-radius: 20px; background: #67e8f9; top: 16%; right: 42%; animation: dy-floatA 7s ease-in-out infinite reverse; }
#duoyang-bg .geo-17 { width: 60px; height: 60px; border-radius: 12px; background: #a3e635; top: 54%; right: 6%; animation: dy-floatB 5.6s ease-in-out infinite; }
#duoyang-bg .geo-18 { width: 75px; height: 75px; border-radius: 50%; background: #f472b6; bottom: 58%; left: 50%; animation: dy-floatC 6.8s ease-in-out infinite reverse; }

/* ========== 三角形：大中小三种尺寸 ========== */
#duoyang-bg .geo-tri {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0.55;
    border-left: transparent solid 0;
    border-right: transparent solid 0;
    border-bottom-style: solid;
}
#duoyang-bg .tri-1 { border-left: 90px solid transparent; border-right: 90px solid transparent; border-bottom: 156px solid #a5b4fc; top: 4%; left: 42%; animation: dy-floatA 8.6s ease-in-out infinite; }
#duoyang-bg .tri-2 { border-left: 60px solid transparent; border-right: 60px solid transparent; border-bottom: 104px solid #fda4af; bottom: 6%; left: 34%; animation: dy-floatB 7.2s ease-in-out infinite reverse; }
#duoyang-bg .tri-3 { border-left: 40px solid transparent; border-right: 40px solid transparent; border-bottom: 69px solid #fde047; top: 30%; left: 54%; animation: dy-floatC 6s ease-in-out infinite; }
#duoyang-bg .tri-4 { border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 87px solid #99f6e4; bottom: 30%; right: 40%; animation: dy-floatA 6.4s ease-in-out infinite reverse; }
#duoyang-bg .tri-5 { border-left: 30px solid transparent; border-right: 30px solid transparent; border-bottom: 52px solid #c4b5fd; top: 70%; right: 24%; animation: dy-floatB 5.8s ease-in-out infinite; }

/* ========== 五角星：大中小三种尺寸 ========== */
#duoyang-bg .geo-star { position: absolute; opacity: 0.55; }
#duoyang-bg .geo-star svg { display: block; }
#duoyang-bg .star-1 { width: 180px; height: 180px; top: 22%; left: 2%; animation: dy-floatA 10.4s ease-in-out infinite; }
#duoyang-bg .star-2 { width: 120px; height: 120px; bottom: 42%; right: 2%; animation: dy-floatB 8.8s ease-in-out infinite reverse; }
#duoyang-bg .star-3 { width: 70px; height: 70px; top: 46%; right: 24%; animation: dy-floatC 7.6s ease-in-out infinite; }
#duoyang-bg .star-4 { width: 50px; height: 50px; bottom: 52%; left: 16%; animation: dy-floatA 5.2s ease-in-out infinite reverse; }
#duoyang-bg .star-5 { width: 40px; height: 40px; top: 12%; right: 28%; animation: dy-floatB 4.6s ease-in-out infinite; }

/* ========== 六边形 ========== */
#duoyang-bg .geo-hex {
    position: absolute;
    opacity: 0.55;
    width: 110px;
    height: 127px;
    background: #bbf7d0;
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
#duoyang-bg .hex-1 { width: 140px; height: 161px; top: 34%; left: 44%; animation: dy-floatA 9.4s ease-in-out infinite; }
#duoyang-bg .hex-2 { width: 90px; height: 104px; bottom: 44%; left: 44%; animation: dy-floatB 7.8s ease-in-out infinite reverse; }
#duoyang-bg .hex-3 { width: 60px; height: 69px; top: 58%; left: 26%; animation: dy-floatC 6.2s ease-in-out infinite; }

/* ========== 菱形 ========== */
#duoyang-bg .geo-diamond {
    position: absolute;
    opacity: 0.55;
    width: 100px;
    height: 100px;
    background: #fbcfe8;
    transform: rotate(45deg);
    border-radius: 18px;
}
#duoyang-bg .dia-1 { width: 140px; height: 140px; top: 8%; right: 34%; animation: dy-floatA 8.2s ease-in-out infinite reverse; }
#duoyang-bg .dia-2 { width: 80px; height: 80px; bottom: 16%; right: 24%; animation: dy-floatB 6.6s ease-in-out infinite; }
#duoyang-bg .dia-3 { width: 50px; height: 50px; top: 44%; left: 22%; animation: dy-floatC 5.4s ease-in-out infinite reverse; }

/* ========== 动画系统 ========== */
@keyframes dy-floatA {
    0%   { transform: translateY(0) rotate(-5deg); }
    50%  { transform: translateY(-50px) rotate(6deg); }
    100% { transform: translateY(0) rotate(-5deg); }
}
@keyframes dy-floatB {
    0%   { transform: translateY(0) rotate(4deg); }
    50%  { transform: translateY(42px) rotate(-6deg); }
    100% { transform: translateY(0) rotate(4deg); }
}
@keyframes dy-floatC {
    0%   { transform: translateY(0) rotate(-3deg); }
    50%  { transform: translateY(-35px) rotate(5deg); }
    100% { transform: translateY(0) rotate(-3deg); }
}

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