/* 主题设置样式 */

/* 主题切换按钮 - 提高特异性，确保覆盖默认样式 */
button.theme-toggle-btn {
    padding: 8px 16px;
    border: 2px solid transparent;
    border-radius: 20px;
    color: white;
    font-size: 14px;
    cursor: pointer;
    transition: none !important; /* 移除过渡，立即切换颜色 */
    outline: none;
    min-width: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* 日落月出按钮样式（亮色模式） */
button.theme-toggle-btn.sunset-moonrise {
    background: linear-gradient(135deg, #ff7e5f, #feb47b) !important;
    border-color: transparent !important;
    box-shadow: 0 2px 8px rgba(255, 126, 95, 0.3) !important;
}

/* 月落日出按钮样式（暗色模式） */
button.theme-toggle-btn.moonset-sunrise {
    background: linear-gradient(135deg, #4b6cb7, #182848) !important;
    border-color: transparent !important;
    box-shadow: 0 2px 8px rgba(75, 108, 183, 0.3) !important;
}

/* 移除悬停效果 - 根据用户要求只保留切换时的动画 */
/* 按钮在悬停时保持静态 */

/* 日落月出/月落日出仿真动画样式 */

/* 动画容器 */
#theme-animation-container {
    pointer-events: none; /* 防止动画容器干扰用户交互 */
}

/* 天空渐变层 */
.sky-layer {
    transition: opacity 2s ease-in-out;
}

/* 日落天空渐变 */
.sky-layer.sunset-sky {
    background: linear-gradient(to bottom, 
        #ff7e5f 0%, 
        #feb47b 20%, 
        #6a11cb 40%, 
        #2575fc 60%, 
        #0a0a2a 80%, 
        #000000 100%
    );
}

/* 日出天空渐变 */
.sky-layer.sunrise-sky {
    background: linear-gradient(to bottom, 
        #000000 0%, 
        #0a0a2a 20%, 
        #2575fc 40%, 
        #6a11cb 60%, 
        #feb47b 80%, 
        #ff7e5f 100%
    );
}

/* 太阳元素 */
.sun-element {
    border-radius: 50%;
    background: radial-gradient(circle, #ffcc00, #ff9900);
    box-shadow: 0 0 60px #ff9900, 0 0 120px rgba(255, 153, 0, 0.5);
    transition: all 2.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 月亮元素 */
.moon-element {
    border-radius: 50%;
    background: radial-gradient(circle, #ffffff, #e6e6e6);
    box-shadow: 0 0 40px #ffffff, 0 0 80px rgba(255, 255, 255, 0.3);
    transition: all 2.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 星星层 */
.stars-layer {
    transition: opacity 1.5s ease-in-out;
}

/* 单个星星 */
.star {
    position: absolute;
    background: white;
    border-radius: 50%;
    box-shadow: 0 0 4px white;
    transition: opacity 0.5s ease-in-out;
}

/* 星星闪烁动画 */
@keyframes star-twinkle {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.8; }
}

.star.twinkling {
    animation: star-twinkle 2s infinite;
}

/* 太阳/月亮移动动画 */
@keyframes sun-set {
    0% { 
        transform: translate(100px, -100px);
        opacity: 1;
    }
    100% { 
        transform: translate(0, calc(100vh + 100px));
        opacity: 0;
    }
}

@keyframes moon-rise {
    0% { 
        transform: translate(-100px, calc(100vh + 100px));
        opacity: 0;
    }
    100% { 
        transform: translate(0, -100px);
        opacity: 1;
    }
}

@keyframes moon-set {
    0% { 
        transform: translate(100px, -100px);
        opacity: 1;
    }
    100% { 
        transform: translate(0, calc(100vh + 100px));
        opacity: 0;
    }
}

@keyframes sun-rise {
    0% { 
        transform: translate(-100px, calc(100vh + 100px));
        opacity: 0;
    }
    100% { 
        transform: translate(0, -100px);
        opacity: 1;
    }
}

/* 按钮涟漪动画 */
@keyframes ripple-animation {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* 按钮点击效果 */
.theme-toggle-btn:active {
    transform: scale(0.95) !important;
    transition: transform 0.1s ease !important;
}

/* 确保按钮有相对定位以便涟漪效果 */
.theme-toggle-btn {
    position: relative !important;
    overflow: hidden !important;
}

/* 主题模式选择区域 */
.theme-mode-selector {
    margin-bottom: 15px;
    padding: 15px;
    background: rgba(40, 40, 40, 0.3);
    border-radius: 12px;
}

/* 主题设置区域 */
#imageBackgroundSettings,
#colorBackgroundSettings {
    transition: opacity 0.3s ease;
}

/* 背景类型选择区域 */
.background-type-selector {
    margin-bottom: 15px;
    padding: 15px;
    background: rgba(40, 40, 40, 0.3);
    border-radius: 12px;
}

/* 主题模式按钮（保留用于兼容性） */
.mode-btn {
    padding: 8px 16px;
    background: rgba(66, 66, 66, 0.8);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 20px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    outline: none;
}

.mode-btn:hover {
    background: rgba(80, 80, 80, 0.9);
    border-color: rgba(255, 255, 255, 0.5);
    color: rgba(255, 255, 255, 0.9);
}

.mode-btn.active {
    background: linear-gradient(135deg, #00b09b, #96c93d);
    border-color: transparent;
    color: white;
    box-shadow: 0 2px 8px rgba(0, 176, 155, 0.3);
}