.image-workspace .btn-tooltip-wrap{width:100%;position:relative}.image-workspace .btn-tooltip{background:var(--color-bg-inset,#1a1a2e);color:var(--color-text-primary,#fff);border-radius:var(--radius-md,6px);white-space:nowrap;pointer-events:none;z-index:10;box-shadow:var(--shadow-md);padding:6px 12px;font-size:.75rem;display:none;position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%)}.image-workspace .btn-tooltip:after{content:"";border:5px solid #0000;border-top-color:var(--color-bg-inset,#1a1a2e);position:absolute;top:100%;left:50%;transform:translate(-50%)}.image-workspace .btn-tooltip-wrap:hover .btn-tooltip{display:block}.image-workspace button[disabled],.image-workspace .btn[disabled]{opacity:.5;cursor:not-allowed}.progress-wrap{background-color:var(--color-bg-elevated);border:1px solid var(--color-border-default);border-radius:var(--radius-xl);padding:var(--space-4) var(--space-5);margin-bottom:var(--space-4);width:100%;box-shadow:var(--shadow-sm)}.processing-card{align-items:center;gap:var(--space-4);margin-bottom:var(--space-3);display:flex}.processing-spinner{border:2px solid var(--color-border-default);border-top:2px solid var(--tool-accent);border-radius:50%;width:18px;height:18px;animation:.8s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.processing-info{flex-direction:column;gap:2px;display:flex}.processing-title{font-size:var(--text-xs);font-weight:var(--weight-bold);color:var(--color-text-primary);animation:1.4s ease-in-out infinite blink}@keyframes blink{0%,to{opacity:.6}50%{opacity:1}}.processing-subtitle{font-size:var(--text-2xs);color:var(--color-text-muted)}.progress-track{background-color:var(--color-bg-base);border-radius:var(--radius-full);border:1px solid var(--color-border-default);height:6px;position:relative;overflow:hidden}.progress-bar-sweep{background-color:var(--tool-accent);border-radius:var(--radius-full);width:30%;height:100%;animation:1.5s ease-in-out infinite sweep;position:absolute;top:0;left:-30%}@keyframes sweep{0%{left:-30%}50%{left:100%}to{left:100%}}.custom-file-input{font-size:var(--text-xs);color:var(--color-text-secondary);cursor:pointer;width:100%}.custom-file-input::file-selector-button{background-color:var(--color-bg-base);color:var(--color-text-primary);border:1px solid var(--color-border-default);border-radius:var(--radius-md);font-weight:var(--weight-bold);font-size:var(--text-xs);cursor:pointer;transition:all var(--duration-fast) var(--ease-default);margin-right:8px;padding:6px 12px}.custom-file-input::file-selector-button:hover{background-color:var(--color-hover);border-color:var(--color-border-strong)}.image-workspace{gap:var(--space-6);flex-direction:row;align-items:stretch;min-height:520px;display:flex}.workspace-control-panel{gap:var(--space-4);flex-direction:column;flex:.85;min-width:0;display:flex}.workspace-preview-panel{gap:var(--space-4);background-color:var(--color-bg-elevated);border:1px solid var(--color-border-default);border-radius:var(--radius-xl);min-width:0;padding:var(--space-5);min-height:480px;box-shadow:var(--shadow-sm);flex-direction:column;flex:1.15;justify-content:flex-start;display:flex}@media (width<=1024px){.image-workspace{flex-direction:column}}.empty-preview-placeholder{text-align:center;padding:var(--space-6);color:var(--color-text-secondary);flex-direction:column;justify-content:center;align-items:center;margin:auto;display:flex}.empty-preview-placeholder .placeholder-icon{margin-bottom:var(--space-4);opacity:.6;font-size:3.2rem;animation:2s ease-in-out infinite placeholder-pulse}@keyframes placeholder-pulse{0%,to{opacity:.5;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}.empty-preview-placeholder h4{margin:0 0 var(--space-2);font-size:var(--text-base);font-weight:var(--weight-bold);color:var(--color-text-primary)}.empty-preview-placeholder p{font-size:var(--text-xs);color:var(--color-text-muted);max-width:290px;margin:0;line-height:1.5}.segmented-tabs{background:var(--color-bg-base);border:1px solid var(--color-border-default);border-radius:var(--radius-lg);gap:2px;padding:2px;display:flex}.segmented-tabs.wrap-tabs{flex-wrap:wrap}.tab-btn{border-radius:calc(var(--radius-lg) - 2px);min-width:60px;font-size:var(--text-xs);font-weight:var(--weight-bold);color:var(--color-text-secondary);cursor:pointer;text-align:center;transition:all var(--duration-fast) var(--ease-default);white-space:nowrap;background:0 0;border:none;flex:1;padding:8px 12px}.tab-btn.active{background:var(--tool-accent);color:#fff;box-shadow:0 2px 6px #7c3aed33}.image-workspace select option{background-color:var(--color-bg-elevated)!important;color:var(--color-text-primary)!important}.image-workspace .workspace-options-panel{background-color:var(--color-bg-elevated);border:1px solid var(--color-border-default);border-radius:var(--radius-xl);padding:var(--space-5);gap:var(--space-4);flex-direction:column;width:100%;display:flex}.image-workspace .panel-section-title{font-size:var(--text-md);font-weight:var(--weight-bold);color:var(--color-text-primary);border-bottom:1px solid var(--color-border-default);padding-bottom:var(--space-2);margin:0}.image-workspace .tool-opt-group{gap:var(--space-4);flex-direction:column;display:flex}.image-workspace .resizer-inputs{gap:var(--space-3);grid-template-columns:repeat(2,1fr);display:grid}.image-workspace .form-group{gap:var(--space-2);flex-direction:column;display:flex}.image-workspace .form-label{font-size:var(--text-2xs);font-weight:var(--weight-bold);color:var(--color-text-secondary)}.image-workspace .opt-checkbox-row{align-items:center;gap:var(--space-2);font-size:var(--text-xs);color:var(--color-text-secondary);display:flex}.image-workspace .opt-checkbox-row input{cursor:pointer}.image-workspace .preset-tabs{flex-wrap:wrap;gap:6px;display:flex}.image-workspace .preset-tab{background-color:var(--color-bg-base);border:1px solid var(--color-border-default);color:var(--color-text-secondary);border-radius:var(--radius-md);font-size:var(--text-2xs);font-weight:var(--weight-bold);cursor:pointer;transition:all var(--duration-fast) var(--ease-default);padding:6px 12px;outline:none!important}.image-workspace .preset-tab:focus{outline:none!important}.image-workspace .preset-tab:hover{background-color:var(--color-hover);color:var(--color-text-primary);border-color:var(--color-border-strong)}.image-workspace .preset-tab.active{background-color:var(--tool-accent);color:#fff;border-color:var(--tool-accent);box-shadow:0 2px 6px #7c3aed33}.image-workspace .angle-btn-row,.image-workspace .flip-btn-row{gap:var(--space-2);flex-wrap:wrap;display:flex}.image-workspace .angle-btn,.image-workspace .flip-btn{background-color:var(--color-bg-base);border:1px solid var(--color-border-default);color:var(--color-text-primary);border-radius:var(--radius-md);font-size:var(--text-xs);font-weight:var(--weight-semibold);cursor:pointer;transition:all var(--duration-fast) var(--ease-default);text-align:center;flex:1;min-width:60px;padding:6px 12px}.image-workspace .angle-btn:hover,.image-workspace .flip-btn:hover{background-color:var(--color-hover);border-color:var(--color-border-strong)}.image-workspace .angle-btn.active,.image-workspace .flip-btn.active{background-color:var(--tool-accent);color:var(--color-text-inverse);border-color:var(--tool-accent)}.image-workspace .refine-tabs{gap:var(--space-2);margin-bottom:var(--space-3);display:flex}.image-workspace .refine-tab{border-radius:var(--radius-md);font-size:var(--text-xs);font-weight:var(--weight-semibold);border:1px solid var(--color-border-default);background-color:var(--color-bg-base);cursor:pointer;color:var(--color-text-primary);transition:all var(--duration-fast) var(--ease-default);flex:1;padding:8px 12px}.image-workspace .refine-tab:hover{background-color:var(--color-hover);border-color:var(--color-border-strong)}.image-workspace .refine-tab.active{background-color:var(--tool-accent)!important;color:var(--color-text-inverse)!important;border-color:var(--tool-accent)!important}.image-workspace .custom-range-slider{width:100%;accent-color:var(--tool-accent);cursor:pointer}.image-workspace .color-picker-input-row{align-items:center;gap:var(--space-3);display:flex}.image-workspace .styled-color-picker{border:1px solid var(--color-border-default);border-radius:var(--radius-md);cursor:pointer;background:0 0;width:44px;height:40px;padding:0}.image-workspace .editor-tools-grid{gap:var(--space-2);grid-template-columns:repeat(3,1fr);display:grid}.image-workspace .editor-tool-btn{background-color:var(--color-bg-base);border:1px solid var(--color-border-default);color:var(--color-text-primary);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);font-size:var(--text-xs);font-weight:var(--weight-semibold);cursor:pointer;transition:all var(--duration-fast) var(--ease-default)}.image-workspace .editor-tool-btn:hover{background-color:var(--color-hover)}.image-workspace .editor-tool-btn.active{background-color:var(--tool-accent);color:var(--color-text-inverse);border-color:var(--tool-accent)}.image-workspace .custom-file-input{color:var(--color-text-secondary);background-color:var(--color-bg-elevated);border:1px solid var(--color-border-default);border-radius:var(--radius-md);cursor:pointer;padding:4px 8px;font-size:11px}.image-workspace .upload-zone{border-radius:var(--radius-2xl);padding:var(--space-4) var(--space-4);text-align:center;background-color:var(--color-bg-elevated);cursor:pointer;transition:all var(--duration-normal) var(--ease-default);justify-content:center;align-items:center;gap:var(--space-2);border:2px dashed #7c3aed40;flex-direction:column;min-height:120px;display:flex;position:relative;box-shadow:inset 0 0 20px #00000005}.image-workspace .upload-zone:hover,.image-workspace .upload-zone.dragover{border-color:var(--tool-accent);background-color:var(--color-hover);box-shadow:0 0 0 4px #7c3aed1a,inset 0 0 20px #7c3aed08}.image-workspace .upload-icon-wrapper{background:var(--color-bg-base);border:1px solid var(--color-border-default);width:38px;height:38px;box-shadow:var(--shadow-sm);transition:all var(--duration-normal) var(--ease-default);border-radius:50%;justify-content:center;align-items:center;margin-bottom:0;font-size:18px;display:flex}.image-workspace .upload-zone:hover .upload-icon-wrapper{border-color:var(--tool-accent);background-color:var(--color-accent-subtle);transform:scale(1.08);box-shadow:0 4px 12px #7c3aed26}.image-workspace .upload-zone h3{font-size:var(--text-xs);font-weight:var(--weight-bold);color:var(--color-text-primary);margin:0}.image-workspace .upload-limit{display:none}.image-workspace .browse-button-styled{background-color:var(--tool-accent);color:#fff;border-radius:var(--radius-md);font-size:10px;font-weight:var(--weight-bold);transition:all var(--duration-fast) var(--ease-default);padding:5px 14px;display:inline-block;box-shadow:0 2px 6px #7c3aed26}.image-workspace .upload-zone:hover .browse-button-styled{background-color:var(--color-accent-hover);transform:translateY(-1px);box-shadow:0 4px 10px #7c3aed40}.preview-actions-bar{width:100%}.image-workspace .upload-icon{font-size:var(--text-3xl);margin-bottom:var(--space-2)}.image-workspace .upload-zone h3{font-size:var(--text-base);color:var(--color-text-primary);margin:0}.image-workspace .upload-zone p{font-size:var(--text-xs);color:var(--color-text-secondary);margin:0}.image-workspace .upload-limit{font-size:var(--text-2xs);color:var(--color-text-muted);margin-top:var(--space-2)}.image-workspace .canvas-viewer-panel{background-color:var(--color-bg-base);border:1px solid var(--color-border-default);border-radius:var(--radius-xl);padding:var(--space-4);align-items:center;gap:var(--space-4);flex-direction:column;justify-content:center;width:100%;min-height:380px;display:flex}.image-workspace .canvas-wrapper{border-radius:var(--radius-lg);border:1px solid var(--color-border-subtle);background-color:#111;justify-content:center;align-items:center;width:100%;max-width:100%;max-height:420px;display:flex;position:relative;overflow:hidden}.image-workspace .editor-canvas-element{object-fit:contain;max-width:100%;max-height:420px;display:block}.image-workspace .crop-overlay-box{cursor:move;z-index:10;border:2px dashed #fff;position:absolute;box-shadow:0 0 0 9999px #0009}.image-workspace .crop-handle{background-color:var(--tool-accent);border:2px solid #fff;border-radius:50%;width:12px;height:12px;position:absolute}.image-workspace .crop-tl{cursor:nwse-resize;top:-6px;left:-6px}.image-workspace .crop-tr{cursor:nesw-resize;top:-6px;right:-6px}.image-workspace .crop-bl{cursor:nesw-resize;bottom:-6px;left:-6px}.image-workspace .crop-br{cursor:nwse-resize;bottom:-6px;right:-6px}.image-workspace .picker-results-card{background-color:var(--color-bg-base);border:1px solid var(--color-border-default);border-radius:var(--radius-lg);padding:var(--space-3) var(--space-4);align-items:center;gap:var(--space-4);margin-top:var(--space-2);width:100%;max-width:320px;box-shadow:var(--shadow-sm);display:flex}.image-workspace .color-swatch{border-radius:var(--radius-md);width:48px;height:48px;box-shadow:0 0 0 1px var(--color-border-default);border:2px solid #fff}.image-workspace .color-values{gap:var(--space-1);flex-direction:column;flex:1;display:flex}.image-workspace .val-group{font-size:var(--text-2xs);color:var(--color-text-secondary);justify-content:space-between;align-items:center;display:flex}.image-workspace .val-group code{font-weight:var(--weight-bold);color:var(--color-text-primary);background-color:var(--color-bg-elevated);border-radius:var(--radius-sm);padding:2px 6px;font-family:monospace}.image-workspace .copy-small-btn{cursor:pointer;opacity:.7;transition:opacity var(--duration-fast);background:0 0;border:none;padding:2px;font-size:11px}.image-workspace .copy-small-btn:hover{opacity:1}.image-workspace .action-bar{background-color:var(--color-bg-elevated);border:1px solid var(--color-border-default);border-radius:var(--radius-xl);padding:var(--space-5);flex-direction:column;align-items:stretch;display:flex}.image-workspace .action-group{gap:var(--space-2);margin-top:var(--space-2);flex-direction:column;display:flex}.image-workspace .image-cards-grid{gap:var(--space-3);grid-template-columns:repeat(auto-fill,minmax(180px,1fr));width:100%;display:grid}.image-workspace .img-card{background-color:var(--color-bg-base);border:1px solid var(--color-border-default);border-radius:var(--radius-xl);transition:transform var(--duration-normal) var(--ease-default);box-shadow:var(--shadow-sm);overflow:hidden}.image-workspace .img-card.active-preview-card{box-shadow:0 0 0 2px var(--color-accent);background-color:#4589f70d;border-color:var(--color-accent)!important}.image-workspace .img-card:hover{transform:translateY(-2px)}.image-workspace .img-card-thumb-wrapper{background-color:var(--color-bg-base);width:100%;height:auto;position:relative;overflow:hidden}.image-workspace .img-card-thumb{object-fit:contain;width:100%;height:auto;max-height:200px;display:block}.image-workspace .img-card-body{padding:var(--space-3);gap:var(--space-2);flex-direction:column;flex-grow:1;justify-content:space-between;display:flex}.image-workspace .img-card-name{font-size:var(--text-2xs);font-weight:var(--weight-bold);color:var(--color-text-primary);white-space:nowrap;text-overflow:ellipsis;margin:0;overflow:hidden}.image-workspace .badges-row{flex-wrap:wrap;gap:4px;display:flex}.image-workspace .size-badge{border-radius:var(--radius-full);font-size:9px;font-weight:var(--weight-bold);padding:2px 8px;display:inline-block}.image-workspace .size-orig{background-color:var(--color-bg-elevated);color:var(--color-text-secondary);border:1px solid var(--color-border-default)}.image-workspace .size-new{background-color:var(--color-success-subtle);color:var(--color-success-text);border:1px solid var(--color-success-border)}.image-workspace .status-processing{color:var(--color-warning-text);font-size:9px;font-weight:var(--weight-medium)}.image-workspace .status-done{color:var(--color-success-text);font-size:9px;font-weight:var(--weight-semibold)}.image-workspace .status-error{color:var(--color-error-text);font-size:9px;font-weight:var(--weight-semibold)}.image-workspace .card-actions{gap:6px;margin-top:4px;display:flex}.image-workspace .dl-btn{padding:5px var(--space-2);font-size:10px;font-weight:var(--weight-bold);background-color:var(--tool-accent);color:var(--color-text-inverse);border-radius:var(--radius-md);transition:background-color var(--duration-fast) var(--ease-default);flex:1;justify-content:center;align-items:center;text-decoration:none;display:inline-flex}.image-workspace .dl-btn:hover{background-color:var(--color-accent-hover)}.image-workspace .remove-btn{border:1px solid var(--color-border-default);color:var(--color-text-secondary);padding:5px var(--space-2);font-size:10px;font-weight:var(--weight-bold);border-radius:var(--radius-md);cursor:pointer;transition:all var(--duration-fast) var(--ease-default);background:0 0;justify-content:center;align-items:center;display:inline-flex}.image-workspace .remove-btn:hover{background-color:var(--color-hover);border-color:var(--color-border-strong);color:var(--color-text-primary)}.image-workspace .remover-canvas-grid{gap:var(--space-4);grid-template-columns:repeat(2,1fr);width:100%;height:100%;min-height:320px;display:grid}@media (width<=768px){.image-workspace .remover-canvas-grid{grid-template-columns:1fr}}.image-workspace .canvas-preview-box{gap:var(--space-2);flex-direction:column;height:100%;display:flex;overflow:hidden}.image-workspace .preview-box-title{font-size:var(--text-2xs);font-weight:var(--weight-bold);color:var(--color-text-secondary);text-transform:uppercase}.image-workspace .canvas-box-inner{border:1px solid var(--color-border-default);border-radius:var(--radius-lg);background-color:#111;flex:1;justify-content:center;align-items:center;min-height:0;display:flex;position:relative;overflow:hidden}.image-workspace .canvas-box-inner canvas{object-fit:contain;cursor:crosshair;z-index:1;max-width:100%;max-height:100%;display:block}.image-workspace .checkers-bg{background-color:#1a1a1a}.image-workspace .checkers-bg:before{content:"";z-index:0;background-image:linear-gradient(45deg,#262626 25%,#0000 25%),linear-gradient(-45deg,#262626 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#262626 75%),linear-gradient(-45deg,#0000 75%,#262626 75%);background-position:0 0,0 8px,8px -8px,-8px 0;background-size:16px 16px;position:absolute;inset:0}.image-workspace .comparison-slider-wrapper{justify-content:center;align-items:center;width:100%;height:100%;max-height:400px;display:flex;overflow:hidden}.image-workspace .comparison-slider{border-radius:var(--radius-xl);border:1px solid var(--color-border-default);user-select:none;cursor:ew-resize;background-color:#111;width:100%;height:100%;max-height:400px;position:relative;overflow:hidden}.image-workspace .slider-layer{pointer-events:none;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.image-workspace .layer-before{z-index:1}.image-workspace .layer-after{z-index:2;clip-path:inset(0 0 0 50%)}.image-workspace .slider-layer canvas{object-fit:contain;width:100%;height:100%;display:block}.image-workspace .slider-badge{bottom:var(--space-4);font-size:10px;font-weight:var(--weight-bold);color:#fff;border-radius:var(--radius-md);text-transform:uppercase;z-index:10;padding:4px 10px;position:absolute}.image-workspace .badge-before{right:var(--space-4);background-color:#000000b3}.image-workspace .badge-after{left:var(--space-4);background-color:var(--tool-accent)}.image-workspace .slider-divider{background-color:var(--tool-accent);z-index:5;pointer-events:none;width:3px;position:absolute;top:0;bottom:0;left:50%;transform:translate(-50%)}.image-workspace .slider-divider-button{border:2px solid var(--tool-accent);color:#fff;cursor:ew-resize;background-color:#fff;border-radius:50%;justify-content:center;align-items:center;width:30px;height:30px;font-size:12px;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 2px 6px #0000004d}
