.filter-presets{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:8px;max-height:350px;overflow-y:auto;padding:4px}.filter-preset{position:relative;border:2px solid #e5e7eb;border-radius:10px;overflow:hidden;cursor:pointer;transition:all 0.2s ease}.filter-preset:hover{border-color:#a5b4fc;transform:scale(1.02)}.filter-preset.active{border-color:#6366f1;box-shadow:0 0 0 2px rgb(99 102 241 / .3)}.filter-preset canvas{width:100%;aspect-ratio:1;display:block;object-fit:cover}.filter-preset-label{text-align:center;font-size:11px;font-weight:600;color:#4b5563;padding:4px 2px;background:#f9fafb}.filter-preset.active .filter-preset-label{background:#eef2ff;color:#4f46e5}.filter-sliders{display:flex;flex-direction:column;gap:12px}.slider-group{display:flex;flex-direction:column;gap:4px}.slider-group label{display:flex;justify-content:space-between;font-size:13px;font-weight:600;color:#4b5563}.slider-group label span{color:#6366f1;font-weight:700}.filter-slider{-webkit-appearance:none;appearance:none;width:100%;height:8px;background:#e5e7eb;border-radius:4px;outline:none}.filter-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;background:#6366f1;border-radius:50%;cursor:pointer}.filter-canvas-container{position:relative;border-radius:12px;overflow:hidden;display:flex;align-items:center;justify-content:center;min-height:300px;border:2px dashed #d1d5db;background:#f9fafb}.filter-canvas-container canvas{max-width:100%;max-height:500px}.filter-canvas-container .placeholder{color:#9ca3af;text-align:center;padding:40px}.compare-toggle{display:flex;align-items:center;gap:8px;padding:8px 14px;background:#f9fafb;border:1px solid #e5e7eb;border-radius:8px;font-size:13px;font-weight:600;color:#4b5563}.compare-toggle input[type="checkbox"]{accent-color:#6366f1;width:16px;height:16px}.reset-filters-btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:8px;border:2px solid #e5e7eb;border-radius:8px;background:#fff;cursor:pointer;color:#6b7280;font-weight:600;font-size:13px;transition:all 0.2s ease}.reset-filters-btn:hover{border-color:#ef4444;color:#ef4444;background:#fef2f2}.filter-tabs{display:flex;gap:4px;margin-bottom:12px}.filter-tab{flex:1;padding:8px 12px;border:2px solid #e5e7eb;border-radius:8px;background:#fff;cursor:pointer;font-size:13px;font-weight:600;color:#6b7280;text-align:center;transition:all 0.2s ease}.filter-tab:hover{border-color:#a5b4fc}.filter-tab.active{border-color:#6366f1;background:#eef2ff;color:#4f46e5}@media (max-width:640px){.filter-presets{grid-template-columns:repeat(auto-fill,minmax(70px,1fr))}.filter-canvas-container canvas{max-height:300px}}#download-btn.generating{pointer-events:none;opacity:.7}#download-btn.generating::after{content:'';display:inline-block;width:16px;height:16px;margin-left:8px;border:2px solid rgb(255 255 255 / .3);border-top-color:#fff;border-radius:50%;animation:spin 0.6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}