/* 滤镜控制面板 */
.filter-controls {display: grid;grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));gap: 20px;margin-bottom: 30px;}
.filter-item {background: #f8f9fa;padding: 15px;border-radius: 8px;border: 1px solid #e9ecef;}
.filter-item label {display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px;font-weight: 500;color: #555;}
.filter-item label span {color: #2196F3;font-weight: 600;}
.filter-item input[type="range"] {width: 100%;height: 6px;accent-color: #2196F3;cursor: pointer;}
.filter-item input[type="number"] {width: 80px;padding: 5px;border: 1px solid #ddd;border-radius: 4px;text-align: center;}

/* 阴影控制 */
.filter-shadow-controls {background: #f8f9fa;padding: 15px;border-radius: 8px;border: 1px solid #e9ecef;margin-bottom: 20px;}
.filter-shadow-controls h4 {margin-bottom: 15px;color: #555;}
.filter-shadow-inputs {display: grid;grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));gap: 15px;}
.filter-shadow-input {display: flex;flex-direction: column;gap: 5px;}
.filter-shadow-input label {font-size: 13px;color: #666;}
.filter-shadow-input input[type="number"] {width: 100%;padding: 8px;border: 1px solid #ddd;border-radius: 4px;}
.filter-shadow-input input[type="color"] {width: 100%;height: 40px;border: 2px solid #dee2e6;border-radius: 8px;cursor: pointer;}

/* 预览区域 */
.filter-preview-section {margin-bottom: 30px;}
.filter-preview-container {display: grid;grid-template-columns: 1fr 1fr;gap: 20px;margin-top: 20px;}
.filter-preview-box {border: 2px dashed #e0e3eb;border-radius: 8px;min-height: 300px;display: flex;flex-direction: column;align-items: center;justify-content: center;position: relative;overflow: hidden;background: linear-gradient(45deg, #f0f0f0 25%, transparent 25%), linear-gradient(-45deg, #f0f0f0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #f0f0f0 75%), linear-gradient(-45deg, transparent 75%, #f0f0f0 75%);background-size: 20px 20px;background-position: 0 0, 0 10px, 10px -10px, -10px 0px;}
.filter-preview-box h4 {position: absolute;top: 10px;left: 10px;background: rgba(255,255,255,0.9);padding: 5px 15px;border-radius: 20px;font-size: 13px;color: #666;}
.filter-preview-image {max-width: 90%;max-height: 280px;object-fit: contain;transition: filter 0.3s ease;}
.filter-upload-btn {position: absolute;bottom: 10px;background: #2196F3;color: white;padding: 8px 20px;border-radius: 20px;cursor: pointer;font-size: 13px;transition: all 0.3s;}
.filter-upload-btn:hover {background: #1976D2;transform: translateY(-2px);}

/* 预设效果按钮组 */
.filter-presets-section {margin-bottom: 30px;}
.filter-presets-section h3 {margin-bottom: 15px;color: #555;font-size: 16px;}
.filter-preset-buttons {display: flex;flex-wrap: wrap;gap: 10px;}
.filter-preset-btn {padding: 10px 20px;background: white;border: 2px solid #e0e3eb;border-radius: 20px;cursor: pointer;font-size: 14px;transition: all 0.3s;color: #555;}
.filter-preset-btn:hover {border-color: #2196F3;color: #2196F3;transform: translateY(-2px);box-shadow: 0 4px 8px rgba(33, 150, 243, 0.2);}
.filter-preset-btn.active {background: #2196F3;color: white;border-color: #2196F3;}

/* 代码生成区域 */
.filter-code-section {margin-bottom: 30px;}
.filter-code-section h3 {margin-bottom: 15px;color: #555;font-size: 16px;}
.filter-code-output {background: #2d3748;color: #e2e8f0;border-radius: 8px;padding: 20px;font-family: 'Courier New', monospace;font-size: 14px;position: relative;overflow-x: auto;}
.filter-code-output pre {margin: 0;white-space: pre-wrap;word-wrap: break-word;}

/* 响应式设计 */
@media (max-width: 768px) {
    .filter-preview-container {grid-template-columns: 1fr;}
    .filter-controls {grid-template-columns: 1fr;}
}