/* 20种背景主题样式 */

/* 1. 极简纯白 */
body.theme-pure-white {
    background: #FFFFFF;
    color: #333333;
}

body.theme-pure-white .stars {
    display: none;
}

body.theme-pure-white .container,
body.theme-pure-white .admin-card,
body.theme-pure-white .table-container {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #333;
}

/* 2. 炭灰色 */
body.theme-charcoal-gray {
    background: #333333;
    color: #ffffff;
}

body.theme-charcoal-gray .stars {
    background: #333333;
}

/* 3. 天蓝色 */
body.theme-sky-blue {
    background: #00CCFF;
    color: #ffffff;
}

body.theme-sky-blue .stars {
    background: linear-gradient(180deg, #00CCFF 0%, #0099CC 100%);
}

/* 4. 蓝紫渐变 */
body.theme-gradient-blue {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    background-attachment: fixed;
    color: #ffffff;
}

body.theme-gradient-blue .stars {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* 5. 粉紫渐变 */
body.theme-gradient-pink {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    background-attachment: fixed;
    color: #ffffff;
}

body.theme-gradient-pink .stars {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

/* 6. 橙金渐变 */
body.theme-gradient-orange {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    background-attachment: fixed;
    color: #ffffff;
}

body.theme-gradient-orange .stars {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

/* 7. 皮革纹理 */
body.theme-texture-leather {
    background: #3a2e1f;
    background-image: 
        repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(0,0,0,0.1) 2px, rgba(0,0,0,0.1) 4px),
        repeating-linear-gradient(-45deg, transparent, transparent 2px, rgba(0,0,0,0.05) 2px, rgba(0,0,0,0.05) 4px);
    color: #ffffff;
}

body.theme-texture-leather .stars {
    background: #3a2e1f;
}

/* 8. 混凝土质感 */
body.theme-texture-concrete {
    background: #7a7a7a;
    background-image: 
        radial-gradient(circle at 1px 1px, rgba(255,255,255,0.15) 1px, transparent 0);
    background-size: 20px 20px;
    color: #ffffff;
}

body.theme-texture-concrete .stars {
    background: #7a7a7a;
}

/* 9. 网格图案 */
body.theme-pattern-grid {
    background: #1a1a2e;
    background-image: 
        linear-gradient(rgba(74, 158, 255, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(74, 158, 255, 0.1) 1px, transparent 1px);
    background-size: 50px 50px;
    color: #ffffff;
}

body.theme-pattern-grid .stars {
    background: #1a1a2e;
}

/* 10. 六边形图案 */
body.theme-pattern-hexagon {
    background: #0f0f23;
    background-image: 
        repeating-linear-gradient(30deg, transparent, transparent 35px, rgba(74, 158, 255, 0.1) 35px, rgba(74, 158, 255, 0.1) 70px),
        repeating-linear-gradient(-30deg, transparent, transparent 35px, rgba(74, 158, 255, 0.1) 35px, rgba(74, 158, 255, 0.1) 70px);
    color: #ffffff;
}

body.theme-pattern-hexagon .stars {
    background: #0f0f23;
}

/* 11. 液态流动 */
body.theme-abstract-liquid {
    background: #0a0e27;
    background-image: 
        radial-gradient(ellipse at top, rgba(74, 158, 255, 0.3) 0%, transparent 50%),
        radial-gradient(ellipse at bottom right, rgba(147, 51, 234, 0.3) 0%, transparent 50%),
        radial-gradient(ellipse at bottom left, rgba(236, 72, 153, 0.3) 0%, transparent 50%);
    background-size: 200% 200%;
    animation: liquidFlow 20s ease infinite;
    color: #ffffff;
}

@keyframes liquidFlow {
    0%, 100% { background-position: 0% 50%, 100% 50%, 0% 50%; }
    50% { background-position: 100% 50%, 0% 50%, 100% 50%; }
}

body.theme-abstract-liquid .stars {
    background: #0a0e27;
}

/* 12. 抽象线条 */
body.theme-abstract-lines {
    background: #0d1117;
    background-image: 
        repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(74, 158, 255, 0.05) 10px, rgba(74, 158, 255, 0.05) 20px),
        repeating-linear-gradient(-45deg, transparent, transparent 10px, rgba(147, 51, 234, 0.05) 10px, rgba(147, 51, 234, 0.05) 20px);
    color: #ffffff;
}

body.theme-abstract-lines .stars {
    background: #0d1117;
}

/* 13. 自然风景 */
body.theme-nature-mountain {
    background: linear-gradient(180deg, #87CEEB 0%, #98D8C8 50%, #6B8E23 100%);
    background-attachment: fixed;
    color: #ffffff;
}

body.theme-nature-mountain .stars {
    background: linear-gradient(180deg, #87CEEB 0%, #98D8C8 50%, #6B8E23 100%);
}

/* 14. 海洋风光 */
body.theme-nature-ocean {
    background: linear-gradient(180deg, #1e3c72 0%, #2a5298 50%, #4a90e2 100%);
    background-attachment: fixed;
    color: #ffffff;
}

body.theme-nature-ocean .stars {
    background: linear-gradient(180deg, #1e3c72 0%, #2a5298 50%, #4a90e2 100%);
    animation: waveMotion 10s ease infinite;
}

@keyframes waveMotion {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* 15. 城市风光 */
body.theme-city-skyline {
    background: linear-gradient(180deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    background-attachment: fixed;
    color: #ffffff;
}

body.theme-city-skyline .stars {
    background: linear-gradient(180deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
}

/* 16. 暗黑模式 */
body.theme-dark-mode {
    background: #000000;
    color: #ffffff;
}

body.theme-dark-mode .stars {
    background: #000000;
}

body.theme-dark-mode .star {
    background: #00ff00;
    box-shadow: 0 0 6px #00ff00;
}

body.theme-dark-mode .meteor {
    background: linear-gradient(to bottom, transparent, #00ff00);
    box-shadow: 0 0 10px #00ff00;
}

/* 17. 复古怀旧 */
body.theme-retro-vintage {
    background: #f4e4bc;
    background-image: 
        repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(139, 69, 19, 0.03) 2px, rgba(139, 69, 19, 0.03) 4px);
    color: #5a4a3a;
}

body.theme-retro-vintage .stars {
    display: none;
}

body.theme-retro-vintage .container,
body.theme-retro-vintage .admin-card {
    background: rgba(244, 228, 188, 0.9);
    border: 2px solid rgba(139, 69, 19, 0.2);
    color: #5a4a3a;
}

/* 18. 手绘插画 */
body.theme-hand-drawn {
    background: #fff8e1;
    background-image: 
        radial-gradient(circle at 2px 2px, rgba(0,0,0,0.05) 1px, transparent 0);
    background-size: 40px 40px;
    color: #5d4037;
}

body.theme-hand-drawn .stars {
    display: none;
}

body.theme-hand-drawn .container,
body.theme-hand-drawn .admin-card {
    background: rgba(255, 248, 225, 0.95);
    border: 3px dashed rgba(93, 64, 55, 0.3);
    color: #5d4037;
}

/* 19. 金属质感 */
body.theme-metal-chrome {
    background: linear-gradient(135deg, #667db6 0%, #0082c8 25%, #0082c8 50%, #667db6 75%, #0082c8 100%);
    background-size: 200% 200%;
    animation: metalShine 5s linear infinite;
    color: #ffffff;
}

@keyframes metalShine {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

body.theme-metal-chrome .stars {
    background: linear-gradient(135deg, #667db6 0%, #0082c8 50%, #667db6 100%);
}

/* 20. 玻璃拟态 */
body.theme-glass-morphism {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    background-attachment: fixed;
    color: #ffffff;
}

body.theme-glass-morphism .container,
body.theme-glass-morphism .admin-card,
body.theme-glass-morphism .table-container {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

body.theme-glass-morphism .stars {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* 21. 赛博朋克 */
body.theme-cyberpunk {
    background: #0a0a0a;
    background-image: 
        repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 255, 255, 0.03) 2px, rgba(0, 255, 255, 0.03) 4px),
        repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(255, 0, 255, 0.03) 2px, rgba(255, 0, 255, 0.03) 4px);
    color: #00ffff;
}

body.theme-cyberpunk .stars {
    background: #0a0a0a;
}

body.theme-cyberpunk .star {
    background: #00ffff;
    box-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff;
}

body.theme-cyberpunk .meteor {
    background: linear-gradient(to bottom, transparent, #ff00ff);
    box-shadow: 0 0 15px #ff00ff;
}

/* 22. 植物图案 */
body.theme-plant-pattern {
    background: #2d5016;
    background-image: 
        radial-gradient(ellipse at 20% 50%, rgba(76, 175, 80, 0.2) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 50%, rgba(139, 195, 74, 0.2) 0%, transparent 50%);
    background-size: 300px 300px;
    color: #ffffff;
}

body.theme-plant-pattern .stars {
    background: #2d5016;
}

/* 23. 科技电路 */
body.theme-tech-circuit {
    background: #0a0e27;
    background-image: 
        repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 255, 0, 0.1) 2px, rgba(0, 255, 0, 0.1) 4px),
        repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(0, 255, 0, 0.1) 2px, rgba(0, 255, 0, 0.1) 4px);
    background-size: 50px 50px;
    color: #00ff00;
}

body.theme-tech-circuit .stars {
    background: #0a0e27;
}

body.theme-tech-circuit .star {
    background: #00ff00;
    box-shadow: 0 0 8px #00ff00;
}

/* 24. 传统文化 */
body.theme-traditional {
    background: #8b4513;
    background-image: 
        repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255, 215, 0, 0.1) 10px, rgba(255, 215, 0, 0.1) 20px);
    color: #ffd700;
}

body.theme-traditional .stars {
    background: #8b4513;
}

body.theme-traditional .container,
body.theme-traditional .admin-card {
    background: rgba(139, 69, 19, 0.9);
    border: 2px solid rgba(255, 215, 0, 0.3);
    color: #ffd700;
}

/* 25. 3D空间 */
body.theme-3d-space {
    background: #000000;
    background-image: 
        linear-gradient(45deg, rgba(74, 158, 255, 0.1) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(74, 158, 255, 0.1) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(74, 158, 255, 0.1) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(74, 158, 255, 0.1) 75%);
    background-size: 60px 60px;
    background-position: 0 0, 0 30px, 30px -30px, -30px 0px;
    color: #ffffff;
}

body.theme-3d-space .stars {
    background: #000000;
}

body.theme-3d-space .star {
    background: #4a9eff;
    box-shadow: 0 0 10px #4a9eff;
}