/* 全局动态渐变背景样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 动态渐变背景 - 多彩色系 */
body {
    font-family: 'Microsoft YaHei', Arial, sans-serif;
    min-height: 100vh;
    color: #333;
    background: linear-gradient(-45deg, 
        #667eea, #764ba2, #ff6b6b, #4ecdc4,
        #45b7d1, #96ceb4, #feca57, #ff9ff3,
        #54a0ff, #5f27cd, #00d2d3, #ff9f43,
        #a55eea, #26de81, #fc5c65, #fd79a8,
        #fdcb6e, #6c5ce7, #74b9ff, #81ecec,
        #fab1a0, #e17055, #00b894, #00cec9,
        #e84393, #9b59b6, #3498db, #2ecc71,
        #f39c12, #e74c3c, #1abc9c, #34495e
    );
            background-size: 1600% 1600%;
        animation: gradientShift 120s ease infinite;
    position: relative;
}

/* 渐变动画关键帧 - 更复杂的路径 */
@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    10% {
        background-position: 20% 0%;
    }
    20% {
        background-position: 100% 30%;
    }
    30% {
        background-position: 80% 100%;
    }
    40% {
        background-position: 0% 70%;
    }
    50% {
        background-position: 50% 0%;
    }
    60% {
        background-position: 100% 50%;
    }
    70% {
        background-position: 70% 100%;
    }
    80% {
        background-position: 20% 80%;
    }
    90% {
        background-position: 80% 20%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* 添加微妙的纹理效果 */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle at 25% 25%, rgba(255,255,255,0.1) 0%, transparent 50%),
        radial-gradient(circle at 75% 75%, rgba(255,255,255,0.05) 0%, transparent 50%),
        radial-gradient(circle at 50% 10%, rgba(255,255,255,0.08) 0%, transparent 40%),
        radial-gradient(circle at 10% 80%, rgba(255,255,255,0.06) 0%, transparent 45%);
    pointer-events: none;
    z-index: -1;
}

/* 为了保证各种主题下的兼容性 */
.container,
.main-section,
.section {
    position: relative;
    z-index: 1;
}

/* 白色内容区域的透明度调整 */
.main-section,
.section {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
}

/* 确保表格等元素的背景适应 */
.table {
    background: rgba(255, 255, 255, 0.98);
}

/* 调整卡片透明度 */
.stat-card,
.payment-content,
.dropdown-menu {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
}

/* 添加一些特殊的颜色变化效果 */
@media (min-width: 1200px) {
    body {
        background-size: 2000% 2000%;
        animation-duration: 150s;
    }
}

/* 为移动设备优化动画性能 */
@media (max-width: 768px) {
    body {
        background-size: 800% 800%;
        animation-duration: 90s;
    }
}

/* 用户偏好：减少动画 */
@media (prefers-reduced-motion: reduce) {
    body {
        animation-duration: 240s;
    }
}