*{box-sizing:border-box;margin:0;padding:0}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;color:#333;line-height:1.6;background-color:#f9f9f9}.filter-generator{max-width:1200px;margin:0 auto;padding:20px}.filter-generator header{text-align:center;margin-bottom:30px}.filter-generator header h1{font-size:2.5rem;margin-bottom:10px;color:#2c3e50}.filter-generator header p{font-size:1.1rem;color:#7f8c8d}.filter-generator .container{background-color:#fff;border-radius:6px;box-shadow:0 2px 10px rgba(0,0,0,.1);overflow:hidden}.filter-generator .container .tabs{display:flex;background-color:#2c3e50}.filter-generator .container .tabs button{flex:1;padding:15px;background:none;border:none;color:#fff;font-size:1rem;cursor:pointer;transition:all .3s ease}.filter-generator .container .tabs button.active{background-color:#3498db;font-weight:700}.filter-generator .container .tabs button:hover:not(.active){background-color:hsla(0,0%,100%,.1)}.filter-generator .container .content{padding:20px}.filter-generator footer{text-align:center;margin-top:30px;color:#7f8c8d;font-size:.9rem}.edit-panel{display:grid;grid-template-columns:1fr;gap:20px}@media(min-width:768px){.edit-panel{grid-template-columns:1fr 1fr}}.edit-panel .controls{display:flex;flex-direction:column;gap:20px}.edit-panel .controls h2{font-size:1.5rem;margin-bottom:15px;color:#2c3e50}.edit-panel .upload-section{padding:20px;background-color:#ecf0f1;border-radius:6px}.edit-panel .upload-section input[type=file]{display:none}.edit-panel .upload-section .upload-btn{padding:8px 16px;background-color:#3498db;color:#fff;border:none;border-radius:6px;cursor:pointer;transition:all .3s ease;font-weight:500;display:inline-block;margin-right:10px}.edit-panel .upload-section .upload-btn:hover{background-color:rgb(33.1380753138,125.1882845188,186.8619246862)}.edit-panel .upload-section .upload-btn:active{transform:translateY(1px)}.edit-panel .upload-section .reset-btn{padding:8px 16px;background-color:#3498db;color:#fff;border:none;border-radius:6px;cursor:pointer;transition:all .3s ease;font-weight:500;background-color:#7f8c8d}.edit-panel .upload-section .reset-btn:hover{background-color:rgb(33.1380753138,125.1882845188,186.8619246862)}.edit-panel .upload-section .reset-btn:active{transform:translateY(1px)}.edit-panel .upload-section .reset-btn:hover{background-color:hsl(184.2857142857,5.7851239669%,42.5490196078%)}.edit-panel .filters-section{padding:20px;background-color:#ecf0f1;border-radius:6px}.edit-panel .filters-section .filter-control{margin-bottom:15px}.edit-panel .filters-section .filter-control label{display:flex;justify-content:space-between;margin-bottom:5px;font-weight:500}.edit-panel .filters-section .filter-control label .value{color:#3498db;font-weight:700}.edit-panel .filters-section .filter-control input[type=range]{width:100%;height:6px;-webkit-appearance:none;background:#bdc3c7;border-radius:5px;outline:none}.edit-panel .filters-section .filter-control input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#3498db;cursor:pointer;transition:all .3s ease}.edit-panel .filters-section .filter-control input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}.edit-panel .filters-section .filter-control input[type=range]::-moz-range-thumb{width:16px;height:16px;border:none;border-radius:50%;background:#3498db;cursor:pointer;transition:all .3s ease}.edit-panel .filters-section .filter-control input[type=range]::-moz-range-thumb:hover{transform:scale(1.2)}.edit-panel .presets-section{padding:20px;background-color:#ecf0f1;border-radius:6px}.edit-panel .presets-section .save-preset{display:flex;margin-bottom:15px}.edit-panel .presets-section .save-preset input{flex:1;padding:8px 12px;border:1px solid #bdc3c7;border-radius:6px 0 0 6px;outline:none}.edit-panel .presets-section .save-preset input:focus{border-color:#3498db}.edit-panel .presets-section .save-preset button{padding:8px 16px;background-color:#3498db;color:#fff;border:none;border-radius:6px;cursor:pointer;transition:all .3s ease;font-weight:500;border-radius:0 6px 6px 0}.edit-panel .presets-section .save-preset button:hover{background-color:rgb(33.1380753138,125.1882845188,186.8619246862)}.edit-panel .presets-section .save-preset button:active{transform:translateY(1px)}.edit-panel .presets-section .preset-list{max-height:200px;overflow-y:auto}.edit-panel .presets-section .preset-list .preset-item{display:flex;justify-content:space-between;align-items:center;padding:10px;margin-bottom:5px;background-color:#fff;border-radius:6px}.edit-panel .presets-section .preset-list .preset-item:hover{background-color:#ecf0f1}.edit-panel .presets-section .preset-list .preset-item .preset-actions{display:flex;gap:5px}.edit-panel .presets-section .preset-list .preset-item .preset-actions button{background-color:#3498db;color:#fff;border:none;border-radius:6px;cursor:pointer;transition:all .3s ease;font-weight:500;padding:4px 8px;font-size:.8rem}.edit-panel .presets-section .preset-list .preset-item .preset-actions button:hover{background-color:rgb(33.1380753138,125.1882845188,186.8619246862)}.edit-panel .presets-section .preset-list .preset-item .preset-actions button:active{transform:translateY(1px)}.edit-panel .presets-section .preset-list .preset-item .preset-actions button.delete{background-color:#e74c3c}.edit-panel .presets-section .preset-list .preset-item .preset-actions button.delete:hover{background-color:rgb(213.698630137,43.8356164384,26.301369863)}.edit-panel .preview{padding:20px;background-color:#ecf0f1;border-radius:6px}.edit-panel .preview h2{font-size:1.5rem;margin-bottom:15px;color:#2c3e50}.edit-panel .preview .image-preview{background-color:#fff;border-radius:6px;overflow:hidden;min-height:300px;display:flex;justify-content:center;align-items:center}.edit-panel .preview .image-preview img{max-width:100%;max-height:400px;object-fit:contain}.edit-panel .preview .image-preview .placeholder{display:flex;justify-content:center;align-items:center;min-height:300px;width:100%;background-color:#bdc3c7;color:#fff;text-align:center;padding:20px}.edit-panel .preview .image-preview .placeholder p{font-size:1.1rem}.code-panel h2{font-size:1.5rem;margin-bottom:15px;color:#2c3e50}.code-panel .code-display{background-color:#2c3e50;color:#fff;padding:20px;border-radius:6px;margin-bottom:15px;overflow-x:auto}.code-panel .code-display pre{font-family:Courier New,Courier,monospace;font-size:1rem}.code-panel .copy-btn{padding:8px 16px;background-color:#3498db;color:#fff;border:none;border-radius:6px;cursor:pointer;transition:all .3s ease;font-weight:500;margin-bottom:20px}.code-panel .copy-btn:hover{background-color:rgb(33.1380753138,125.1882845188,186.8619246862)}.code-panel .copy-btn:active{transform:translateY(1px)}.code-panel .code-examples{margin-top:30px}.code-panel .code-examples h3{font-size:1.3rem;margin-bottom:15px;color:#2c3e50}.code-panel .code-examples .example{margin-bottom:20px}.code-panel .code-examples .example h4{font-size:1.1rem;margin-bottom:10px;color:#3498db}.code-panel .code-examples .example pre{background-color:#ecf0f1;padding:15px;border-radius:6px;overflow-x:auto;font-family:Courier New,Courier,monospace}@media(max-width:767px){.filter-generator header h1{font-size:2rem}.filter-generator .edit-panel .preview .image-preview{min-height:200px}.filter-generator .edit-panel .preview .image-preview img{max-height:300px}.filter-generator .edit-panel .preview .image-preview .placeholder{min-height:200px}}