/* 皮肤名称: 矩形 */
/* ============================================================
   主题皮肤：悬浮几何色块（矩形）
   灵感来源：桌面《矩形.html》
   （浅紫底色 + 12 个分散漂浮的圆角色块，三种浮动节奏）

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

/* 浅色兜底 */
body.theme-juxing {
    background: #fef7ff;
    background-attachment: fixed;
}

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

/* 背景几何公共样式 */
#juxing-bg .bg-shape {
    position: absolute;
    border-radius: 16px;
    opacity: 0.55;
}

/* 分散分布，四角+上下边缘，避开屏幕中心 */
#juxing-bg .s1 { width: 210px; height: 210px; background: #ddd6fe; top: 8%; left: 6%; animation: jx-floatA 10s ease-in-out infinite; }
#juxing-bg .s2 { width: 140px; height: 140px; background: #bfdbfe; bottom: 12%; left: 10%; animation: jx-floatB 7.5s ease-in-out infinite reverse; }
#juxing-bg .s3 { width: 170px; height: 170px; background: #fed7aa; top: 14%; right: 8%; animation: jx-floatC 11s ease-in-out infinite; }
#juxing-bg .s4 { width: 190px; height: 130px; background: #c7d2fe; bottom: 8%; right: 6%; animation: jx-floatA 8.2s ease-in-out infinite reverse; }
#juxing-bg .s5 { width: 120px; height: 120px; background: #bbf7d0; top: 22%; left: 32%; animation: jx-floatB 9s ease-in-out infinite; }
#juxing-bg .s6 { width: 150px; height: 150px; background: #fbcfe8; bottom: 24%; right: 34%; animation: jx-floatC 9.6s ease-in-out infinite reverse; }
#juxing-bg .s7 { width: 100px; height: 100px; background: #fef08a; top: 60%; left: 12%; animation: jx-floatA 6.8s ease-in-out infinite; }
#juxing-bg .s8 { width: 135px; height: 110px; background: #a5b4fc; top: 10%; left: 50%; animation: jx-floatB 10.4s ease-in-out infinite; }
#juxing-bg .s9 { width: 160px; height: 160px; background: #99f6e4; bottom: 10%; left: 48%; animation: jx-floatC 8.7s ease-in-out infinite reverse; }
#juxing-bg .s10 { width: 110px; height: 140px; background: #fda4af; top: 64%; right: 14%; animation: jx-floatA 7.3s ease-in-out infinite; }
#juxing-bg .s11 { width: 90px; height: 90px; background: #fde047; top: 36%; left: 4%; animation: jx-floatB 11.8s ease-in-out infinite reverse; }
#juxing-bg .s12 { width: 145px; height: 125px; background: #d8b4fe; bottom: 32%; left: 28%; animation: jx-floatC 9.2s ease-in-out infinite; }

/* 多组不同浮动动画，错开运动节奏 */
@keyframes jx-floatA {
    0%   { transform: translateY(0) rotate(-4deg); }
    50%  { transform: translateY(-45px) rotate(4deg); }
    100% { transform: translateY(0) rotate(-4deg); }
}
@keyframes jx-floatB {
    0%   { transform: translateY(0) rotate(3deg); }
    50%  { transform: translateY(38px) rotate(-5deg); }
    100% { transform: translateY(0) rotate(3deg); }
}
@keyframes jx-floatC {
    0%   { transform: translateY(0) rotate(-2deg); }
    50%  { transform: translateY(-30px) rotate(5deg); }
    100% { transform: translateY(0) rotate(-2deg); }
}

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