/* ===== 背景方案选择 ===== */
/* 强制覆盖所有其他背景样式 */

/* 全局强制覆盖规则 */
body[class*="background-option-"] .main-content.grid-bg,
body[class*="background-option-"] .page-container .main-content.grid-bg {
    background-attachment: scroll !important;
    background-clip: border-box !important;
    background-origin: padding-box !important;
    background-repeat: repeat !important;
    background-size: auto !important;
}

/* 方案1: 简洁渐变背景 (推荐) */
body.background-option-1.io-grey-mode .main-content.grid-bg,
body.background-option-1.io-grey-mode .page-container .main-content.grid-bg {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 50%, #90caf9 100%) !important;
    position: relative;
}

body.background-option-1.io-grey-mode .main-content.grid-bg::before,
body.background-option-1.io-grey-mode .page-container .main-content.grid-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 80%, rgba(102, 126, 234, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(118, 75, 162, 0.15) 0%, transparent 50%);
    pointer-events: none;
}

/* 方案2: 微妙的点状图案 */
body.background-option-2.io-grey-mode .main-content.grid-bg,
body.background-option-2.io-grey-mode .page-container .main-content.grid-bg {
    background: #f0f8ff !important;
    background-image: 
        radial-gradient(circle at 25% 25%, rgba(102, 126, 234, 0.15) 2px, transparent 2px),
        radial-gradient(circle at 75% 75%, rgba(118, 75, 162, 0.15) 2px, transparent 2px) !important;
    background-size: 50px 50px;
    background-position: 0 0, 25px 25px;
}

/* 方案3: 波浪纹理背景 */
body.background-option-3.io-grey-mode .main-content.grid-bg,
body.background-option-3.io-grey-mode .page-container .main-content.grid-bg {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    background-size: 400% 400%;
    animation: gradientShift 20s ease infinite;
    position: relative;
}

body.background-option-3.io-grey-mode .main-content.grid-bg::before,
body.background-option-3.io-grey-mode .page-container .main-content.grid-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.08) 0%, transparent 50%);
    pointer-events: none;
}

/* 方案4: 几何图案背景 */
body.background-option-4.io-grey-mode .main-content.grid-bg,
body.background-option-4.io-grey-mode .page-container .main-content.grid-bg {
    background: #f0f8ff !important;
    background-image: 
        linear-gradient(45deg, rgba(102, 126, 234, 0.12) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(118, 75, 162, 0.12) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(102, 126, 234, 0.12) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(118, 75, 162, 0.12) 75%) !important;
    background-size: 35px 35px;
    background-position: 0 0, 0 17.5px, 17.5px -17.5px, -17.5px 0px;
}

/* 方案5: 纯色背景 */
body.background-option-5.io-grey-mode .main-content.grid-bg,
body.background-option-5.io-grey-mode .page-container .main-content.grid-bg {
    background: #f5f5f5 !important;
}

/* 方案6: 云朵纹理背景 */
body.background-option-6.io-grey-mode .main-content.grid-bg,
body.background-option-6.io-grey-mode .page-container .main-content.grid-bg {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    position: relative;
}

body.background-option-6.io-grey-mode .main-content.grid-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 10% 20%, rgba(255, 255, 255, 0.2) 0%, transparent 40%),
        radial-gradient(circle at 90% 80%, rgba(255, 255, 255, 0.15) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 40%),
        radial-gradient(circle at 80% 10%, rgba(255, 255, 255, 0.12) 0%, transparent 40%),
        radial-gradient(circle at 20% 90%, rgba(255, 255, 255, 0.08) 0%, transparent 40%);
    pointer-events: none;
}

/* 深色模式对应方案 */
body.background-option-1.io-black-mode .main-content.grid-bg,
body.background-option-1.io-black-mode .page-container .main-content.grid-bg {
    background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%) !important;
    position: relative;
}

body.background-option-1.io-black-mode .main-content.grid-bg::before,
body.background-option-1.io-black-mode .page-container .main-content.grid-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 80%, rgba(102, 126, 234, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(118, 75, 162, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

body.background-option-2.io-black-mode .main-content.grid-bg,
body.background-option-2.io-black-mode .page-container .main-content.grid-bg {
    background: #1a202c !important;
    background-image: 
        radial-gradient(circle at 25% 25%, rgba(102, 126, 234, 0.1) 1px, transparent 1px),
        radial-gradient(circle at 75% 75%, rgba(118, 75, 162, 0.1) 1px, transparent 1px) !important;
    background-size: 60px 60px;
    background-position: 0 0, 30px 30px;
}

body.background-option-3.io-black-mode .main-content.grid-bg {
    background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%) !important;
    background-size: 400% 400%;
    animation: gradientShift 20s ease infinite;
    position: relative;
}

body.background-option-3.io-black-mode .main-content.grid-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 80%, rgba(102, 126, 234, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(118, 75, 162, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(240, 147, 251, 0.08) 0%, transparent 50%);
    pointer-events: none;
}

body.background-option-4.io-black-mode .main-content.grid-bg {
    background: #1a202c !important;
    background-image: 
        linear-gradient(45deg, rgba(102, 126, 234, 0.1) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(118, 75, 162, 0.1) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(102, 126, 234, 0.1) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(118, 75, 162, 0.1) 75%) !important;
    background-size: 40px 40px;
    background-position: 0 0, 0 20px, 20px -20px, -20px 0px;
}

body.background-option-5.io-black-mode .main-content.grid-bg {
    background: #1a202c !important;
}

body.background-option-6.io-black-mode .main-content.grid-bg {
    background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%) !important;
    position: relative;
}

body.background-option-6.io-black-mode .main-content.grid-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 10% 20%, rgba(102, 126, 234, 0.2) 0%, transparent 40%),
        radial-gradient(circle at 90% 80%, rgba(118, 75, 162, 0.15) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(240, 147, 251, 0.1) 0%, transparent 40%),
        radial-gradient(circle at 80% 10%, rgba(102, 126, 234, 0.12) 0%, transparent 40%),
        radial-gradient(circle at 20% 90%, rgba(118, 75, 162, 0.08) 0%, transparent 40%);
    pointer-events: none;
}

/* 渐变动画 */
@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* 响应式优化 */
@media (max-width: 768px) {
    body.background-option-2.io-grey-mode .main-content.grid-bg,
    body.background-option-2.io-black-mode .main-content.grid-bg {
        background-size: 40px 40px;
        background-position: 0 0, 20px 20px;
    }
    
    body.background-option-4.io-grey-mode .main-content.grid-bg,
    body.background-option-4.io-black-mode .main-content.grid-bg {
        background-size: 30px 30px;
        background-position: 0 0, 0 15px, 15px -15px, -15px 0px;
    }
}