.image-filter-modal{position:fixed;top:0;left:0;right:0;bottom:0;background-color:var(--bg-overlay);display:flex;justify-content:center;align-items:center;z-index:var(--z-modal-overlay);backdrop-filter:blur(8px);padding:var(--safe-area-top) var(--safe-area-right) var(--safe-area-bottom) var(--safe-area-left);box-sizing:border-box}.image-filter-modal__content{width:min(90vw,1400px);max-width:100%;height:min(85vh,900px);max-height:calc(100vh - var(--safe-area-top) - var(--safe-area-bottom));min-height:min(700px,calc(100vh - 100px));background:var(--bg-primary);border-radius:var(--radius-xl);border:var(--border-width) solid var(--border-default);box-shadow:var(--shadow-xl);display:flex;flex-direction:column;overflow:hidden;position:relative}.image-filter-modal__header{display:flex;justify-content:space-between;align-items:center;padding:var(--space-lg) var(--space-xl);border-bottom:var(--border-width) solid var(--border-default);background:rgba(0,0,0,.2);flex-shrink:0}.image-filter-modal__title{margin:0;font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);color:var(--text-primary);text-transform:uppercase;letter-spacing:var(--letter-spacing-wide)}.image-filter-modal__close{background:rgba(255,255,255,.08);border:var(--border-width) solid var(--border-default);border-radius:var(--radius-sm);color:var(--text-primary);width:var(--touch-target-min);height:var(--touch-target-min);min-width:var(--touch-target-min);min-height:var(--touch-target-min);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-base);padding:0;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.image-filter-modal__close:hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.25);transform:scale(1.05)}.image-filter-modal__close-icon{width:20px;height:20px;stroke:currentColor;stroke-width:2;stroke-linecap:round}.image-filter-modal__body{display:flex;flex:1;overflow:hidden;min-height:0}.image-filter-modal__canvas-section{flex:1 1 60%;max-width:65%;padding:24px;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.1)}.image-filter-modal__canvas-container{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,rgba(13,16,28,.95),rgba(24,30,52,.95));border-radius:12px;border:1px solid rgba(255,255,255,.05);padding:20px;box-shadow:inset 0 4px 16px rgba(0,0,0,.3)}.image-filter-modal__canvas{max-width:100%;max-height:100%;border-radius:8px;box-shadow:0 8px 32px rgba(0,0,0,.4);background-color:#1b1d24;background-image:linear-gradient(45deg,rgba(255,255,255,.05) 25%,transparent 0,transparent 75%,rgba(255,255,255,.05) 0,rgba(255,255,255,.05)),linear-gradient(45deg,rgba(255,255,255,.05) 25%,transparent 0,transparent 75%,rgba(255,255,255,.05) 0,rgba(255,255,255,.05));background-size:24px 24px;background-position:0 0,12px 12px}.image-filter-modal__loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;color:#ffffff;height:100%}.image-filter-modal__spinner{width:40px;height:40px;border:4px solid rgba(255,255,255,.2);border-top-color:#22d5ff;border-radius:50%;animation:spin .8s linear infinite}.image-filter-modal__loading-text{font-size:.9rem;color:#e3e7ff;text-transform:uppercase;letter-spacing:.1em}@keyframes spin{to{transform:rotate(1turn)}}.image-filter-modal__error{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:#ffffff;height:100%;text-align:center;padding:20px}.image-filter-modal__error-icon{width:48px;height:48px;color:#ff4757;stroke-width:2}.image-filter-modal__error-text{font-size:1rem;font-weight:600;color:#ffffff;text-transform:uppercase;letter-spacing:.1em}.image-filter-modal__error-details{font-size:.85rem;color:#ff6b8a;line-height:1.4}.image-filter-modal__warning{display:flex;align-items:center;gap:8px;padding:10px 12px;background:rgba(255,193,7,.1);border:1px solid rgba(255,193,7,.3);border-radius:8px;color:#ffc107}.image-filter-modal__warning-icon{width:16px;height:16px;flex-shrink:0;stroke-width:2}.image-filter-modal__warning-text{font-size:.75rem;font-weight:500;line-height:1.3}.image-filter-modal__controls{flex:0 0 40%;min-width:320px;max-width:50%;padding:20px;background:rgba(0,0,0,.2);border-left:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column;gap:18px;overflow-y:auto}.image-filter-modal__section{display:flex;flex-direction:column;gap:8px}.image-filter-modal__section-title{margin:0;font-size:.9rem;font-weight:600;color:#ffffff;text-transform:uppercase;letter-spacing:.08em;border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:6px}.image-filter-modal__presets{display:flex;flex-wrap:wrap;gap:8px}.image-filter-modal__preset{flex:1 1 calc(50% - 4px);min-width:0;padding:var(--space-md) var(--space-sm);background:rgba(255,255,255,.06);border:var(--border-width) solid var(--border-default);border-radius:var(--radius-sm);color:var(--text-primary);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);text-transform:uppercase;letter-spacing:var(--letter-spacing-normal);cursor:pointer;transition:all var(--transition-base);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:var(--touch-target-min);-webkit-tap-highlight-color:transparent;touch-action:manipulation}.image-filter-modal__preset:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.2);transform:translateY(-1px)}.image-filter-modal__preset.active{background:linear-gradient(135deg,#0f65ff,#22d5ff);border-color:#0f65ff;box-shadow:0 4px 15px rgba(15,101,255,.3)}.image-filter-modal__slider-group{display:flex;flex-direction:column;gap:8px}.image-filter-modal__slider-label{display:flex;justify-content:space-between;align-items:center}.image-filter-modal__slider-name{font-size:.85rem;color:#e3e7ff;font-weight:500;text-transform:capitalize}.image-filter-modal__slider-value{font-size:.8rem;color:#22d5ff;font-weight:600;background:rgba(34,213,255,.1);padding:2px 8px;border-radius:6px;min-width:35px;text-align:center}.image-filter-modal__slider{width:100%;height:6px;background:rgba(255,255,255,.1);border-radius:3px;outline:none;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.image-filter-modal__slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;background:linear-gradient(135deg,#0f65ff,#22d5ff);border-radius:50%;cursor:pointer;box-shadow:0 2px 8px rgba(15,101,255,.4);-webkit-transition:all .2s ease;transition:all .2s ease}.image-filter-modal__slider::-webkit-slider-thumb:hover{transform:scale(1.1);box-shadow:0 4px 12px rgba(15,101,255,.6)}.image-filter-modal__slider::-moz-range-thumb{width:18px;height:18px;background:linear-gradient(135deg,#0f65ff,#22d5ff);border-radius:50%;cursor:pointer;border:none;box-shadow:0 2px 8px rgba(15,101,255,.4);-moz-transition:all .2s ease;transition:all .2s ease}.image-filter-modal__slider::-moz-range-thumb:hover{transform:scale(1.1);box-shadow:0 4px 12px rgba(15,101,255,.6)}.image-filter-modal__download{padding:var(--space-md) var(--space-xl);background:linear-gradient(135deg,var(--color-primary),var(--color-primary-hover));border:none;border-radius:var(--radius-md);color:var(--text-primary);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:var(--letter-spacing-wide);cursor:pointer;transition:all var(--transition-base);box-shadow:var(--shadow-primary);text-align:center;min-height:var(--touch-target-comfortable);width:100%;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.image-filter-modal__download:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(15,101,255,.4);background:linear-gradient(135deg,#1a75ff,#32e6ff)}.image-filter-modal__download:active{transform:translateY(0)}@media (max-width:1024px){.image-filter-modal__content{width:95vw;height:90vh;max-height:calc(100vh - var(--safe-area-top) - var(--safe-area-bottom))}.image-filter-modal__canvas-section{flex:1 1 60%;max-width:60%;padding:var(--space-lg)}.image-filter-modal__controls{flex:0 0 40%;min-width:280px;max-width:45%;padding:var(--space-lg);gap:var(--space-lg);overflow-y:auto;-webkit-overflow-scrolling:touch}.image-filter-modal__presets{display:flex;flex-wrap:wrap;gap:var(--space-xs)}.image-filter-modal__preset{flex:1 1 calc(50% - 3px);font-size:var(--font-size-xs);padding:var(--space-sm) var(--space-xs);min-height:var(--touch-target-min)}}@media (max-width:768px){.image-filter-modal{padding:0;align-items:stretch}.image-filter-modal__content{width:100vw;height:100vh;max-height:100vh;border-radius:0;border:none;display:flex;flex-direction:column}.image-filter-modal__header{padding:var(--space-md) var(--space-lg);flex-shrink:0}.image-filter-modal__title{font-size:var(--font-size-lg)}.image-filter-modal__body{flex-direction:column;overflow-y:auto;-webkit-overflow-scrolling:touch;flex:1;min-height:0}.image-filter-modal__canvas-section{flex:1 1 45%;max-width:100%;padding:var(--space-md);min-height:0}.image-filter-modal__controls{flex:1 1 55%;min-width:100%;max-width:100%;padding:var(--space-md);gap:var(--space-md);overflow-y:auto;-webkit-overflow-scrolling:touch}.image-filter-modal__presets{display:flex;flex-wrap:wrap;gap:var(--space-xs)}.image-filter-modal__preset{flex:1 1 calc(50% - 3px);font-size:var(--font-size-xs);padding:var(--space-sm) var(--space-xs);min-height:var(--touch-target-min)}}