:root{--primary-color:#41907c;--primary-hover:#367a68;--primary-light:#e8f5f3;--success-color:#28a745;--error-color:#dc3545;--warning-color:#ffc107;--info-color:#17a2b8;--text-primary:#333;--text-secondary:#666;--text-muted:#999;--border-color:#ddd;--bg-light:#f8f9fa;--bg-white:#fff;--spacing-xs:4px;--spacing-sm:8px;--spacing-md:16px;--spacing-lg:24px;--spacing-xl:32px;--border-radius-sm:4px;--border-radius-md:8px;--border-radius-lg:12px;--shadow-sm:0 1px 3px rgba(0,0,0,0.1);--shadow-md:0 4px 6px rgba(0,0,0,0.1);--shadow-lg:0 10px 15px rgba(0,0,0,0.1);--transition-fast:0.15s ease;--transition-normal:0.3s ease;--transition-slow:0.5s ease}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.image-filter .filter-grid{display:flex;overflow-x:auto;gap:var(--spacing-sm);padding:var(--border-radius-sm) 0 var(--spacing-sm) 6px;scrollbar-width:thin;scrollbar-color:#cbd5e1 #f1f5f9;max-width:60vw}.image-filter .filter-grid::-webkit-scrollbar{height:6px}.image-filter .filter-grid::-webkit-scrollbar-track{background:#f1f5f9;border-radius:3px}.image-filter .filter-grid::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}.image-filter .filter-grid::-webkit-scrollbar-thumb:hover{background:#94a3b8}.image-filter .filter-grid .filter-item{background:#fff;border:2px solid #e5e7eb;border-radius:6px;padding:var(--border-radius-sm);cursor:pointer;transition:all .2s ease;display:flex;flex-direction:column;align-items:center;flex-shrink:0;min-width:60px}.image-filter .filter-grid .filter-item:hover{border-color:#408f7c;transform:translateY(-1px);box-shadow:0 2px 6px rgba(59,130,246,.15)}.image-filter .filter-grid .filter-item.active{border-color:#408f7c;background:#eff6ff;box-shadow:0 2px 6px rgba(59,130,246,.2)}.image-filter .filter-grid .filter-item .filter-preview{width:32px;height:32px;border-radius:var(--border-radius-sm);overflow:hidden;margin-bottom:var(--border-radius-sm);background:#f3f4f6;display:flex;align-items:center;justify-content:center}.image-filter .filter-grid .filter-item .filter-preview img{width:100%;height:100%;object-fit:cover}.image-filter .filter-grid .filter-item .filter-preview .preview-placeholder{color:#6b7280;font-size:var(--spacing-sm);text-align:center}.image-filter .filter-grid .filter-item .filter-name{font-size:9px;font-weight:500;color:#374151;text-align:center;line-height:1.1;max-width:52px;word-break:break-word}.image-filter .parameter-controls{display:flex;gap:20px}.image-filter .parameter-controls .control-item{display:flex;align-items:center;gap:10px;min-width:200px;flex:1}.image-filter .parameter-controls .control-item label{font-weight:500;min-width:80px;color:#374151;font-size:1var --border-radius-sm}.image-filter .parameter-controls .control-item .slider-input-container{flex:1}@media(max-width:76var --spacing-sm){.image-filter .parameter-controls{flex-direction:column;gap:12px;padding:12px}.image-filter .parameter-controls .control-item{min-width:auto;gap:var(--spacing-sm)}.image-filter .parameter-controls .control-item label{min-width:70px;font-size:13px}.image-filter .result-display .canvas-container .nub{width:1var --spacing-sm;height:1var --spacing-sm;border-width:3px}}@media(hover:none)and (pointer:coarse){.image-filter .result-display .canvas-container .nub{width:20px;height:20px;border-width:3px}}.image-filter .result-display .canvas-container{position:relative;display:inline-block}.image-filter .result-display .canvas-container .result-canvas{max-width:100%;height:auto;border-radius:var(--spacing-sm);display:block;max-height:60vh}.image-filter .result-display .canvas-container .nub{position:absolute;width:12px;height:12px;background:#408f7c;border:2px solid #fff;border-radius:50%;cursor:grab;transform:translate(-50%,-50%);box-shadow:0 2px var(--border-radius-sm) rgba(0,0,0,.2);z-index:10;transition:all .1s ease;touch-action:none;user-select:none}.image-filter .result-display .canvas-container .nub:hover{background:#4ea692;transform:translate(-50%,-50%) scale(1.1)}.image-filter .result-display .canvas-container .nub.dragging{cursor:grabbing;background:#4ea692;transform:translate(-50%,-50%) scale(1.2);box-shadow:0 var(--border-radius-sm) var(--spacing-sm) rgba(0,0,0,.3)}