/* 主题系统 - 20种动态背景主题 */

/* 默认主题 - 深空流星 */
body.theme-default {
    background: #0a0e27;
}

.theme-default .stars {
    background: linear-gradient(180deg, #0a0e27 0%, #1a1f3a 100%);
}

/* 主题1 - 科技蓝光 */
body.theme-tech-blue {
    background: #0d1421;
}

.theme-tech-blue .stars {
    background: linear-gradient(180deg, #0d1421 0%, #1a2332 50%, #0d1421 100%);
    background-size: 100% 200%;
    animation: gradientShift 10s ease infinite;
}

.theme-tech-blue .star {
    background: #00d4ff;
    box-shadow: 0 0 6px #00d4ff, 0 0 12px #00d4ff;
}

.theme-tech-blue .meteor {
    background: linear-gradient(to bottom, transparent, #00d4ff);
    box-shadow: 0 0 10px #00d4ff;
}

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

/* 主题2 - 紫色梦幻 */
body.theme-purple-dream {
    background: #1a0d2e;
}

.theme-purple-dream .stars {
    background: radial-gradient(circle at 20% 50%, #2d1b4e 0%, #1a0d2e 50%, #0d0519 100%);
}

.theme-purple-dream .star {
    background: #b794f6;
    box-shadow: 0 0 8px #b794f6, 0 0 16px #b794f6;
}

.theme-purple-dream .meteor {
    background: linear-gradient(to bottom, transparent, #b794f6);
    box-shadow: 0 0 12px #b794f6;
}

/* 主题3 - 绿色森林 */
body.theme-forest-green {
    background: #0a1f0a;
}

.theme-forest-green .stars {
    background: linear-gradient(180deg, #0a1f0a 0%, #1a3f1a 50%, #0a1f0a 100%);
    background-size: 100% 200%;
    animation: forestWave 15s ease infinite;
}

.theme-forest-green .star {
    background: #4ade80;
    box-shadow: 0 0 6px #4ade80;
}

.theme-forest-green .meteor {
    background: linear-gradient(to bottom, transparent, #4ade80);
}

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

/* 主题4 - 橙色夕阳 */
body.theme-sunset-orange {
    background: #2d1b0d;
}

.theme-sunset-orange .stars {
    background: radial-gradient(ellipse at bottom, #ff6b35 0%, #f7931e 30%, #2d1b0d 70%);
}

.theme-sunset-orange .star {
    background: #ffb84d;
    box-shadow: 0 0 8px #ffb84d, 0 0 16px #ffb84d;
}

.theme-sunset-orange .meteor {
    background: linear-gradient(to bottom, transparent, #ff6b35);
    box-shadow: 0 0 10px #ff6b35;
}

/* 主题5 - 粉色樱花 */
body.theme-sakura-pink {
    background: #2d1b2d;
}

.theme-sakura-pink .stars {
    background: radial-gradient(circle at 50% 0%, #ff9ec7 0%, #ffb3d9 20%, #2d1b2d 60%);
}

.theme-sakura-pink .star {
    background: #ffb3d9;
    box-shadow: 0 0 6px #ffb3d9;
}

.theme-sakura-pink .meteor {
    background: linear-gradient(to bottom, transparent, #ff9ec7);
}

/* 主题6 - 青色海洋 */
body.theme-ocean-cyan {
    background: #0d1f2d;
}

.theme-ocean-cyan .stars {
    background: linear-gradient(180deg, #0d1f2d 0%, #1a3f4d 50%, #0d1f2d 100%);
    background-size: 100% 200%;
    animation: oceanFlow 12s ease infinite;
}

.theme-ocean-cyan .star {
    background: #00e5ff;
    box-shadow: 0 0 8px #00e5ff, 0 0 16px #00e5ff;
}

.theme-ocean-cyan .meteor {
    background: linear-gradient(to bottom, transparent, #00e5ff);
    box-shadow: 0 0 12px #00e5ff;
}

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

/* 主题7 - 红色火焰 */
body.theme-fire-red {
    background: #1a0d0d;
}

.theme-fire-red .stars {
    background: radial-gradient(ellipse at bottom, #ff3333 0%, #ff6600 30%, #1a0d0d 70%);
}

.theme-fire-red .star {
    background: #ff6666;
    box-shadow: 0 0 10px #ff3333, 0 0 20px #ff3333;
}

.theme-fire-red .meteor {
    background: linear-gradient(to bottom, transparent, #ff3333);
    box-shadow: 0 0 15px #ff3333;
}

/* 主题8 - 金色辉煌 */
body.theme-golden {
    background: #1f1a0d;
}

.theme-golden .stars {
    background: radial-gradient(circle at center, #ffd700 0%, #ffed4e 20%, #1f1a0d 60%);
}

.theme-golden .star {
    background: #ffd700;
    box-shadow: 0 0 8px #ffd700, 0 0 16px #ffd700;
}

.theme-golden .meteor {
    background: linear-gradient(to bottom, transparent, #ffd700);
    box-shadow: 0 0 12px #ffd700;
}

/* 主题9 - 深蓝星空 */
body.theme-deep-space {
    background: #000510;
}

.theme-deep-space .stars {
    background: radial-gradient(ellipse at center, #1a1a2e 0%, #16213e 50%, #000510 100%);
}

.theme-deep-space .star {
    background: #ffffff;
    box-shadow: 0 0 4px #ffffff;
}

.theme-deep-space .meteor {
    background: linear-gradient(to bottom, transparent, #ffffff);
}

/* 主题10 - 霓虹紫蓝 */
body.theme-neon-purple {
    background: #0d0d1f;
}

.theme-neon-purple .stars {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #0d0d1f 100%);
    background-size: 200% 200%;
    animation: neonPulse 8s ease infinite;
}

.theme-neon-purple .star {
    background: #a78bfa;
    box-shadow: 0 0 10px #a78bfa, 0 0 20px #a78bfa;
}

.theme-neon-purple .meteor {
    background: linear-gradient(to bottom, transparent, #a78bfa);
    box-shadow: 0 0 15px #a78bfa;
}

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

/* 主题11 - 青绿渐变 */
body.theme-teal-gradient {
    background: #0d1f1f;
}

.theme-teal-gradient .stars {
    background: linear-gradient(45deg, #0d1f1f 0%, #1a3f3f 50%, #0d1f1f 100%);
    background-size: 200% 200%;
    animation: tealFlow 10s ease infinite;
}

.theme-teal-gradient .star {
    background: #2dd4bf;
    box-shadow: 0 0 8px #2dd4bf;
}

.theme-teal-gradient .meteor {
    background: linear-gradient(to bottom, transparent, #2dd4bf);
    box-shadow: 0 0 12px #2dd4bf;
}

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

/* 主题12 - 粉紫渐变 */
body.theme-pink-purple {
    background: #1f0d1f;
}

.theme-pink-purple .stars {
    background: linear-gradient(135deg, #ec4899 0%, #a855f7 50%, #1f0d1f 100%);
    background-size: 200% 200%;
    animation: pinkPurpleFlow 9s ease infinite;
}

.theme-pink-purple .star {
    background: #f472b6;
    box-shadow: 0 0 8px #f472b6, 0 0 16px #f472b6;
}

.theme-pink-purple .meteor {
    background: linear-gradient(to bottom, transparent, #ec4899);
    box-shadow: 0 0 12px #ec4899;
}

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

/* 主题13 - 深绿科技 */
body.theme-dark-tech {
    background: #051a05;
}

.theme-dark-tech .stars {
    background: linear-gradient(180deg, #051a05 0%, #0a2e0a 50%, #051a05 100%);
    background-size: 100% 200%;
    animation: techPulse 11s ease infinite;
}

.theme-dark-tech .star {
    background: #10b981;
    box-shadow: 0 0 6px #10b981, 0 0 12px #10b981;
}

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

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

/* 主题14 - 蓝紫星空 */
body.theme-blue-purple-space {
    background: #0d0d2d;
}

.theme-blue-purple-space .stars {
    background: radial-gradient(ellipse at top, #3b82f6 0%, #8b5cf6 50%, #0d0d2d 100%);
}

.theme-blue-purple-space .star {
    background: #60a5fa;
    box-shadow: 0 0 8px #60a5fa, 0 0 16px #60a5fa;
}

.theme-blue-purple-space .meteor {
    background: linear-gradient(to bottom, transparent, #60a5fa);
    box-shadow: 0 0 12px #60a5fa;
}

/* 主题15 - 暖橙渐变 */
body.theme-warm-orange {
    background: #1f140d;
}

.theme-warm-orange .stars {
    background: linear-gradient(180deg, #1f140d 0%, #3f281a 50%, #1f140d 100%);
    background-size: 100% 200%;
    animation: warmFlow 13s ease infinite;
}

.theme-warm-orange .star {
    background: #fb923c;
    box-shadow: 0 0 8px #fb923c;
}

.theme-warm-orange .meteor {
    background: linear-gradient(to bottom, transparent, #fb923c);
    box-shadow: 0 0 12px #fb923c;
}

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

/* 主题16 - 冰蓝极光 */
body.theme-ice-aurora {
    background: #0d1a1f;
}

.theme-ice-aurora .stars {
    background: linear-gradient(135deg, #0d1a1f 0%, #1a3f4d 30%, #0d1a1f 60%, #1a3f4d 100%);
    background-size: 200% 200%;
    animation: auroraFlow 14s ease infinite;
}

.theme-ice-aurora .star {
    background: #7dd3fc;
    box-shadow: 0 0 10px #7dd3fc, 0 0 20px #7dd3fc;
}

.theme-ice-aurora .meteor {
    background: linear-gradient(to bottom, transparent, #7dd3fc);
    box-shadow: 0 0 15px #7dd3fc;
}

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

/* 主题17 - 暗红神秘 */
body.theme-dark-red {
    background: #1a0d0d;
}

.theme-dark-red .stars {
    background: radial-gradient(circle at center, #7f1d1d 0%, #991b1b 30%, #1a0d0d 70%);
}

.theme-dark-red .star {
    background: #ef4444;
    box-shadow: 0 0 8px #ef4444, 0 0 16px #ef4444;
}

.theme-dark-red .meteor {
    background: linear-gradient(to bottom, transparent, #ef4444);
    box-shadow: 0 0 12px #ef4444;
}

/* 主题18 - 青蓝渐变 */
body.theme-cyan-blue {
    background: #0d1a2d;
}

.theme-cyan-blue .stars {
    background: linear-gradient(90deg, #0d1a2d 0%, #1a3f5d 50%, #0d1a2d 100%);
    background-size: 200% 100%;
    animation: cyanFlow 10s ease infinite;
}

.theme-cyan-blue .star {
    background: #06b6d4;
    box-shadow: 0 0 8px #06b6d4, 0 0 16px #06b6d4;
}

.theme-cyan-blue .meteor {
    background: linear-gradient(to bottom, transparent, #06b6d4);
    box-shadow: 0 0 12px #06b6d4;
}

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

/* 主题19 - 紫红渐变 */
body.theme-purple-red {
    background: #1f0d1a;
}

.theme-purple-red .stars {
    background: linear-gradient(135deg, #a855f7 0%, #ec4899 50%, #1f0d1a 100%);
    background-size: 200% 200%;
    animation: purpleRedFlow 9s ease infinite;
}

.theme-purple-red .star {
    background: #c084fc;
    box-shadow: 0 0 10px #c084fc, 0 0 20px #c084fc;
}

.theme-purple-red .meteor {
    background: linear-gradient(to bottom, transparent, #c084fc);
    box-shadow: 0 0 15px #c084fc;
}

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

/* 主题20 - 绿蓝渐变 */
body.theme-green-blue {
    background: #0d1f1a;
}

.theme-green-blue .stars {
    background: linear-gradient(45deg, #0d1f1a 0%, #1a3f35 50%, #0d1f1a 100%);
    background-size: 200% 200%;
    animation: greenBlueFlow 12s ease infinite;
}

.theme-green-blue .star {
    background: #34d399;
    box-shadow: 0 0 8px #34d399, 0 0 16px #34d399;
}

.theme-green-blue .meteor {
    background: linear-gradient(to bottom, transparent, #34d399);
    box-shadow: 0 0 12px #34d399;
}

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

/* 主题选择器样式 - 已移至 admin-theme.css */
/* 确保背景元素不会遮挡下拉菜单 */
.stars {
    z-index: 0 !important;
}

/* 主题选择器折叠按钮 */
.theme-toggle-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 999;
    background: rgba(74, 158, 255, 0.8);
    backdrop-filter: blur(10px);
    padding: 12px 16px;
    border-radius: 50px;
    border: none;
    color: #fff;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(74, 158, 255, 0.3);
}

.theme-toggle-btn:hover {
    background: rgba(74, 158, 255, 1);
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(74, 158, 255, 0.5);
}

.theme-selector.collapsed {
    display: none;
}

@media (max-width: 768px) {
    .theme-selector {
        position: fixed;
        bottom: 80px;
        right: 10px;
        left: 10px;
        max-width: none;
        max-height: 60vh;
    }
    
    .theme-toggle-btn {
        bottom: 10px;
        right: 10px;
    }
}

.theme-selector h3 {
    font-size: 14px;
    margin-bottom: 10px;
    color: #fff;
}

.theme-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    max-height: 400px;
    overflow-y: auto;
}

.theme-grid::-webkit-scrollbar {
    width: 6px;
}

.theme-grid::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

.theme-grid::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
}

.theme-grid::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

.theme-option {
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 12px;
    text-align: center;
    color: #fff;
}

.theme-option:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: #4a9eff;
}

.theme-option.active {
    background: rgba(74, 158, 255, 0.3);
    border-color: #4a9eff;
    box-shadow: 0 0 10px rgba(74, 158, 255, 0.5);
}

.theme-preview {
    width: 100%;
    height: 30px;
    border-radius: 4px;
    margin-bottom: 5px;
    background: linear-gradient(90deg, var(--theme-color-1), var(--theme-color-2));
}

.theme-option[data-theme="default"] .theme-preview {
    background: linear-gradient(90deg, #0a0e27, #1a1f3a);
}

.theme-option[data-theme="tech-blue"] .theme-preview {
    background: linear-gradient(90deg, #0d1421, #00d4ff);
}

.theme-option[data-theme="purple-dream"] .theme-preview {
    background: linear-gradient(90deg, #1a0d2e, #b794f6);
}

.theme-option[data-theme="forest-green"] .theme-preview {
    background: linear-gradient(90deg, #0a1f0a, #4ade80);
}

.theme-option[data-theme="sunset-orange"] .theme-preview {
    background: linear-gradient(90deg, #2d1b0d, #ff6b35);
}

.theme-option[data-theme="sakura-pink"] .theme-preview {
    background: linear-gradient(90deg, #2d1b2d, #ffb3d9);
}

.theme-option[data-theme="ocean-cyan"] .theme-preview {
    background: linear-gradient(90deg, #0d1f2d, #00e5ff);
}

.theme-option[data-theme="fire-red"] .theme-preview {
    background: linear-gradient(90deg, #1a0d0d, #ff3333);
}

.theme-option[data-theme="golden"] .theme-preview {
    background: linear-gradient(90deg, #1f1a0d, #ffd700);
}

.theme-option[data-theme="deep-space"] .theme-preview {
    background: linear-gradient(90deg, #000510, #ffffff);
}

.theme-option[data-theme="neon-purple"] .theme-preview {
    background: linear-gradient(90deg, #0d0d1f, #a78bfa);
}

.theme-option[data-theme="teal-gradient"] .theme-preview {
    background: linear-gradient(90deg, #0d1f1f, #2dd4bf);
}

.theme-option[data-theme="pink-purple"] .theme-preview {
    background: linear-gradient(90deg, #1f0d1f, #f472b6);
}

.theme-option[data-theme="dark-tech"] .theme-preview {
    background: linear-gradient(90deg, #051a05, #10b981);
}

.theme-option[data-theme="blue-purple-space"] .theme-preview {
    background: linear-gradient(90deg, #0d0d2d, #60a5fa);
}

.theme-option[data-theme="warm-orange"] .theme-preview {
    background: linear-gradient(90deg, #1f140d, #fb923c);
}

.theme-option[data-theme="ice-aurora"] .theme-preview {
    background: linear-gradient(90deg, #0d1a1f, #7dd3fc);
}

.theme-option[data-theme="dark-red"] .theme-preview {
    background: linear-gradient(90deg, #1a0d0d, #ef4444);
}

.theme-option[data-theme="cyan-blue"] .theme-preview {
    background: linear-gradient(90deg, #0d1a2d, #06b6d4);
}

.theme-option[data-theme="purple-red"] .theme-preview {
    background: linear-gradient(90deg, #1f0d1a, #c084fc);
}

.theme-option[data-theme="green-blue"] .theme-preview {
    background: linear-gradient(90deg, #0d1f1a, #34d399);
}