/* 背景样式文件 */

/* 页面主背景 */
body {
    background: linear-gradient(135deg, #e8f5e8 0%, #f0fdf4 25%, #dcfce7 50%, #f0fdf4 75%, #e8f5e8 100%);
    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite;
    background-attachment: fixed;
}

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

/* 容器背景 */
.container {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* 翻译框背景 */
.translate-box {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(116, 198, 157, 0.3);
}

/* 输入框背景 */
#input-text {
    background: rgba(255, 255, 255, 0.9);
}

#input-text:focus {
    background: rgba(255, 255, 255, 1);
}

/* 输出框背景 */
.output-text {
    background: #f8fffe;
}

/* 按钮背景 */
.translate-btn {
    background: linear-gradient(135deg, #74c69d, #52b788);
}

.translate-btn:hover {
    background: linear-gradient(135deg, #52b788, #40916c);
}

.translate-btn:disabled {
    background: #b7e4c7;
}

.swap-btn {
    background: #74c69d;
}

.swap-btn:hover {
    background: #52b788;
}

/* 语言选择器背景 */
.lang-select {
    background: white;
}

.lang-select:focus {
    background: rgba(255, 255, 255, 1);
}

/* 发音信息背景 */
.pronounce-item {
    background: rgba(116, 198, 157, 0.1);
}

/* 清除和复制按钮背景 */
.clear-btn:hover,
.copy-btn:hover {
    background: rgba(116, 198, 157, 0.1);
}

/* 提示消息背景 */
.toast {
    background: #52b788;
}

.toast.error {
    background: #e74c3c;
}

/* 响应式背景调整 */
@media (max-width: 767px) {
    body {
        background-size: 200% 200%;
        animation-duration: 10s;
    }
    
    .container {
        background: rgba(255, 255, 255, 0.05);
        backdrop-filter: blur(5px);
    }
    
    .translate-box {
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(15px);
    }
}

@media (max-width: 480px) {
    body {
        background-size: 150% 150%;
        animation-duration: 8s;
    }
    
    .container {
        background: transparent;
        backdrop-filter: none;
        border: none;
    }
    
    .translate-box {
        background: rgba(255, 255, 255, 0.99);
        backdrop-filter: blur(10px);
    }
}