.image-resizing-page[data-v-9cd3adba]{background:linear-gradient(180deg,#fafbfc 0,#fff);margin:0 auto;max-width:1400px;min-height:100vh;padding:20px;position:relative;text-align:center}.image-resizing-page .file-input[data-v-9cd3adba]{display:none}.image-resizing-page .page-intro[data-v-9cd3adba]{margin-bottom:20px;padding:0 4px;text-align:left}.image-resizing-page .page-intro .page-intro__row[data-v-9cd3adba]{align-items:flex-start;display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between}.image-resizing-page .page-intro .page-intro__lead[data-v-9cd3adba]{align-items:flex-start;display:flex;flex:1;gap:20px;min-width:0}.image-resizing-page .page-intro .page-intro__icon[data-v-9cd3adba]{filter:drop-shadow(0 2px 4px rgba(0,0,0,.08));flex-shrink:0;height:56px;width:56px}.image-resizing-page .page-intro .page-intro__text[data-v-9cd3adba]{flex:1;min-width:0}.image-resizing-page .page-intro .page-intro__title[data-v-9cd3adba]{color:#111827;font-size:28px;font-weight:700;letter-spacing:-.3px;line-height:1.25;margin:0 0 10px}.image-resizing-page .page-intro .page-intro__desc[data-v-9cd3adba]{color:#4b5563;font-size:15px;line-height:1.75;margin:0}.image-resizing-page .page-intro .page-intro__examples-btn[data-v-9cd3adba]{background:#eff6ff;border:1px solid #bfdbfe;border-radius:8px;color:#2563eb;cursor:pointer;flex-shrink:0;font-size:14px;font-weight:600;margin-top:2px;padding:8px 16px;transition:background .2s ease,border-color .2s ease}.image-resizing-page .page-intro .page-intro__examples-btn[data-v-9cd3adba]:hover{background:#dbeafe;border-color:#93c5fd}.image-resizing-page .upload-area[data-v-9cd3adba]{align-items:center;background:linear-gradient(135deg,#f9fafb,#fff);border:2px dashed #d1d5db;border-radius:12px;box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;justify-content:center;min-height:340px;overflow:hidden;padding:28px;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1);width:100%}.image-resizing-page .upload-area[data-v-9cd3adba]:before{background:radial-gradient(circle at 30% 50%,rgba(59,130,246,.05) 0,transparent 50%);bottom:0;content:"";left:0;opacity:0;position:absolute;right:0;top:0;transition:opacity .3s ease}.image-resizing-page .upload-area[data-v-9cd3adba]:hover{background:linear-gradient(135deg,#eff6ff,#f9fafb);border-color:#60a5fa;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;transform:translateY(-2px)}.image-resizing-page .upload-area[data-v-9cd3adba]:hover:before{opacity:1}.image-resizing-page .upload-area.is-dragging[data-v-9cd3adba]{background:linear-gradient(135deg,#dbeafe,#eff6ff);border-color:#3b82f6;box-shadow:0 10px 15px -3px #3b82f64d,0 4px 6px -2px #3b82f633;transform:scale(1.01)}.image-resizing-page .upload-area.is-dragging[data-v-9cd3adba]:before{opacity:1}.image-resizing-page .upload-area .upload-btn[data-v-9cd3adba]{align-items:center;background:linear-gradient(135deg,#3b82f6,#2563eb);border:none;border-radius:8px;box-shadow:0 4px 6px -1px #3b82f64d,0 2px 4px -1px #3b82f633;color:#fff;cursor:pointer;display:inline-flex;font-size:16px;font-weight:600;justify-content:center;padding:14px 56px;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1);z-index:1}.image-resizing-page .upload-area .upload-btn[data-v-9cd3adba]:hover{background:linear-gradient(135deg,#2563eb,#1d4ed8);box-shadow:0 10px 15px -3px #3b82f666,0 4px 6px -2px #3b82f64d;transform:translateY(-1px)}.image-resizing-page .upload-area .upload-btn[data-v-9cd3adba]:active{box-shadow:0 2px 4px -1px #3b82f64d;transform:translateY(0)}.image-resizing-page .upload-area .upload-btn svg[data-v-9cd3adba]{height:18px;margin-right:10px;width:18px}.image-resizing-page .upload-area .upload-tip[data-v-9cd3adba]{color:#6b7280;font-size:14px;line-height:1.7;margin-top:14px;max-width:100%;padding:0 10px;text-align:center}@media (max-width:968px){.image-resizing-page .page-intro .page-intro__row[data-v-9cd3adba]{align-items:stretch;flex-direction:column}.image-resizing-page .page-intro .page-intro__examples-btn[data-v-9cd3adba]{align-self:flex-end}.image-resizing-page .page-intro .page-intro__title[data-v-9cd3adba]{font-size:26px}.image-resizing-page .page-intro .page-intro__desc[data-v-9cd3adba]{font-size:14px}.image-resizing-page .main-layout-new[data-v-9cd3adba]{grid-template-columns:1fr;min-height:0}.image-resizing-page .main-layout-new .workspace-main[data-v-9cd3adba]{height:auto;max-height:none;min-height:0;overflow:visible}.image-resizing-page .main-layout-new .operation-sidebar[data-v-9cd3adba]{align-self:stretch;height:auto;max-width:none;min-width:0;width:100%}.image-resizing-page .main-layout-new .operation-sidebar .operation-card[data-v-9cd3adba]{height:auto;max-height:none}.image-resizing-page .main-layout-new .workspace-main .upload-area[data-v-9cd3adba]{min-height:320px;padding:28px 20px}}@media (max-width:640px){.image-resizing-page .page-intro .page-intro__icon[data-v-9cd3adba]{height:48px;width:48px}.image-resizing-page .page-intro .page-intro__title[data-v-9cd3adba]{font-size:22px}.image-resizing-page .page-intro .page-intro__desc[data-v-9cd3adba]{font-size:13px}.image-resizing-page .main-layout-new .workspace-main .upload-area[data-v-9cd3adba]{min-height:280px;padding:24px 16px}.image-resizing-page .main-layout-new .workspace-main .upload-area .upload-btn[data-v-9cd3adba]{font-size:15px;padding:12px 40px}.image-resizing-page .main-layout-new .workspace-main .upload-area .upload-tip[data-v-9cd3adba]{font-size:13px;margin-top:20px}}.image-resizing-page[data-v-9cd3adba] .tool-example-dialog .el-dialog__body{max-height:min(80vh,720px);overflow-y:auto;padding:12px 16px 20px}.image-resizing-page .example-section[data-v-9cd3adba]{margin:30px auto 0;max-width:900px;padding:0 20px}.image-resizing-page .example-section.example-section--dialog[data-v-9cd3adba]{margin:0;max-width:none;padding:0}.image-resizing-page .example-section .example-title[data-v-9cd3adba]{color:#333;font-size:16px;font-weight:600;margin-bottom:16px;text-align:center}.image-resizing-page .example-section .example-grid[data-v-9cd3adba]{display:grid;gap:16px;grid-template-columns:repeat(3,1fr)}.image-resizing-page .example-section .example-grid .example-item[data-v-9cd3adba]{align-items:center;display:flex;flex-direction:column}.image-resizing-page .example-section .example-grid .example-item .example-label[data-v-9cd3adba]{color:#666;font-size:13px;font-weight:500;margin-bottom:8px;transition:color .3s ease}.image-resizing-page .example-section .example-grid .example-item:hover .example-label[data-v-9cd3adba]{color:#007aff}.image-resizing-page .example-section .example-grid .example-item .example-image-wrapper[data-v-9cd3adba]{aspect-ratio:4/3;background:#f9fafb;border:1px solid #e5e7eb;border-radius:6px;cursor:pointer;max-width:220px;overflow:hidden;position:relative;transition:all .3s ease;width:100%}.image-resizing-page .example-section .example-grid .example-item .example-image-wrapper[data-v-9cd3adba]:hover{border-color:#007aff;box-shadow:0 8px 24px #007aff33;transform:translateY(-4px)}.image-resizing-page .example-section .example-grid .example-item .example-image-wrapper:hover .example-image[data-v-9cd3adba]{transform:scale(1.05)}.image-resizing-page .example-section .example-grid .example-item .example-image-wrapper:hover .example-size-indicator .size-arrow[data-v-9cd3adba]{opacity:.9}.image-resizing-page .example-section .example-grid .example-item .example-image-wrapper .example-image[data-v-9cd3adba]{display:block;height:100%;-o-object-fit:cover;object-fit:cover;transition:transform .3s ease;width:100%}.image-resizing-page .example-section .example-grid .example-item .example-image-wrapper .example-resized[data-v-9cd3adba]{-o-object-position:center;object-position:center;transform:scale(.7)}.image-resizing-page .example-section .example-grid .example-item .example-image-wrapper:hover .example-resized[data-v-9cd3adba]{transform:scale(.75)}.image-resizing-page .example-section .example-grid .example-item .example-image-wrapper .example-size-indicator[data-v-9cd3adba]{bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0}.image-resizing-page .example-section .example-grid .example-item .example-image-wrapper .example-size-indicator .size-arrow[data-v-9cd3adba]{color:#007aff;position:absolute;transition:opacity .3s ease}.image-resizing-page .example-section .example-grid .example-item .example-image-wrapper .example-size-indicator .size-arrow.size-arrow-horizontal[data-v-9cd3adba]{align-items:center;display:flex;justify-content:center;left:15%;right:15%;top:50%;transform:translateY(-50%)}.image-resizing-page .example-section .example-grid .example-item .example-image-wrapper .example-size-indicator .size-arrow.size-arrow-horizontal .arrow-line[data-v-9cd3adba]{background:#007aff;flex:1;height:2px;position:relative}.image-resizing-page .example-section .example-grid .example-item .example-image-wrapper .example-size-indicator .size-arrow.size-arrow-horizontal .arrow-line[data-v-9cd3adba]:before{border-color:transparent #007aff transparent transparent;border-style:solid;border-width:4px 6px 4px 0;content:"";height:0;left:0;position:absolute;top:50%;transform:translateY(-50%);width:0}.image-resizing-page .example-section .example-grid .example-item .example-image-wrapper .example-size-indicator .size-arrow.size-arrow-horizontal .arrow-line[data-v-9cd3adba]:after{border-color:transparent transparent transparent #007aff;border-style:solid;border-width:4px 0 4px 6px;content:"";height:0;position:absolute;right:0;top:50%;transform:translateY(-50%);width:0}.image-resizing-page .example-section .example-grid .example-item .example-image-wrapper .example-size-indicator .size-arrow.size-arrow-horizontal .arrow-head[data-v-9cd3adba]{display:none}.image-resizing-page .example-section .example-grid .example-item .example-image-wrapper .example-size-indicator .size-arrow.size-arrow-horizontal .size-text[data-v-9cd3adba]{background:#007aff;border-radius:4px;box-shadow:0 2px 4px #0000001a;color:#fff;font-size:11px;font-weight:600;left:50%;padding:2px 8px;position:absolute;top:-22px;transform:translate(-50%);white-space:nowrap}.image-resizing-page .example-section .example-grid .example-item .example-image-wrapper .example-size-indicator .size-arrow.size-arrow-vertical[data-v-9cd3adba]{align-items:center;bottom:15%;display:flex;flex-direction:column;justify-content:center;left:50%;top:15%;transform:translate(-50%)}.image-resizing-page .example-section .example-grid .example-item .example-image-wrapper .example-size-indicator .size-arrow.size-arrow-vertical .arrow-line[data-v-9cd3adba]{background:#007aff;flex:1;position:relative;width:2px}.image-resizing-page .example-section .example-grid .example-item .example-image-wrapper .example-size-indicator .size-arrow.size-arrow-vertical .arrow-line[data-v-9cd3adba]:before{border-color:transparent transparent #007aff;border-style:solid;border-width:0 4px 6px;content:"";height:0;left:50%;position:absolute;top:0;transform:translate(-50%);width:0}.image-resizing-page .example-section .example-grid .example-item .example-image-wrapper .example-size-indicator .size-arrow.size-arrow-vertical .arrow-line[data-v-9cd3adba]:after{border-color:#007aff transparent transparent;border-style:solid;border-width:6px 4px 0;bottom:0;content:"";height:0;left:50%;position:absolute;transform:translate(-50%);width:0}.image-resizing-page .example-section .example-grid .example-item .example-image-wrapper .example-size-indicator .size-arrow.size-arrow-vertical .arrow-head[data-v-9cd3adba]{display:none}.image-resizing-page .example-section .example-grid .example-item .example-image-wrapper .example-size-indicator .size-arrow.size-arrow-vertical .size-text[data-v-9cd3adba]{background:#007aff;border-radius:4px;box-shadow:0 2px 4px #0000001a;color:#fff;font-size:11px;font-weight:600;left:-38px;padding:2px 8px;position:absolute;top:50%;transform:translateY(-50%) rotate(-90deg);white-space:nowrap}.image-resizing-page .main-layout-new[data-v-9cd3adba]{align-items:stretch;display:grid;gap:12px;grid-template-columns:minmax(0,1fr) 320px;margin:0 auto;max-width:1400px;min-height:0;--tool-workbench-height:520px}.image-resizing-page .main-layout-new .workspace-main[data-v-9cd3adba]{align-items:stretch;display:flex;flex-direction:column;height:var(--tool-workbench-height);max-height:var(--tool-workbench-height);min-height:var(--tool-workbench-height);min-width:0;overflow:hidden}.image-resizing-page .main-layout-new .workspace-main .upload-area[data-v-9cd3adba]{align-self:stretch;box-sizing:border-box;flex:1;min-height:320px;width:100%}.image-resizing-page .main-layout-new .workspace-main .preview-main[data-v-9cd3adba]{align-items:center;background:#fff;border:1px solid #e5e7eb;border-radius:6px;display:flex;flex:1;justify-content:center;min-height:0;overflow:auto;padding:12px}.image-resizing-page .main-layout-new .workspace-main .preview-main .preview-container[data-v-9cd3adba]{align-items:center;display:flex;height:100%;justify-content:center;position:relative;width:100%}.image-resizing-page .main-layout-new .workspace-main .preview-main .preview-container .preview-img[data-v-9cd3adba]{display:block;height:auto;max-height:100%;max-width:100%}.image-resizing-page .main-layout-new .operation-sidebar[data-v-9cd3adba]{align-self:start;display:flex;flex-direction:column;max-width:320px;min-height:0;min-width:320px;width:320px}.image-resizing-page .main-layout-new .operation-sidebar .operation-card[data-v-9cd3adba]{background:#fff;border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 2px 8px #0000000d;box-sizing:border-box;display:flex;flex:none;flex-direction:column;height:var(--tool-workbench-height);min-height:0;overflow:hidden;padding:12px;width:100%}.image-resizing-page .main-layout-new .operation-sidebar .operation-card .operation-card-scroll[data-v-9cd3adba]{flex:1;min-height:0;overflow-y:auto;padding-right:2px}.image-resizing-page .main-layout-new .operation-sidebar .operation-card .panel-title[data-v-9cd3adba]{color:#333;font-size:14px;font-weight:600;margin:0 0 12px;text-align:left}.image-resizing-page .main-layout-new .operation-sidebar .operation-card .tip-box[data-v-9cd3adba]{align-items:center;background:#eff6ff;border:1px solid #bfdbfe;border-radius:6px;color:#1e40af;display:flex;font-size:12px;gap:6px;line-height:1.4;margin-bottom:12px;padding:8px}.image-resizing-page .main-layout-new .operation-sidebar .operation-card .tip-box svg[data-v-9cd3adba]{color:#3b82f6;flex-shrink:0}.image-resizing-page .main-layout-new .operation-sidebar .operation-card .tip-box span[data-v-9cd3adba]{flex:1}.image-resizing-page .main-layout-new .operation-sidebar .operation-card .size-input-panel[data-v-9cd3adba]{margin-bottom:16px}.image-resizing-page .main-layout-new .operation-sidebar .operation-card .size-input-panel .size-input-group[data-v-9cd3adba]{margin-bottom:12px}.image-resizing-page .main-layout-new .operation-sidebar .operation-card .size-input-panel .size-input-group .size-label[data-v-9cd3adba]{color:#333;display:block;font-size:13px;font-weight:500;margin-bottom:6px;text-align:left}.image-resizing-page .main-layout-new .operation-sidebar .operation-card .size-input-panel .size-input-group .size-input[data-v-9cd3adba]{border:1px solid #d1d5db;border-radius:4px;box-sizing:border-box;font-size:13px;padding:8px 10px;width:100%}.image-resizing-page .main-layout-new .operation-sidebar .operation-card .size-input-panel .size-input-group .size-input[data-v-9cd3adba]:focus{border-color:#007aff;outline:none}.image-resizing-page .main-layout-new .operation-sidebar .operation-card .size-input-panel .size-input-group .size-input[data-v-9cd3adba]::-moz-placeholder{color:#9ca3af}.image-resizing-page .main-layout-new .operation-sidebar .operation-card .size-input-panel .size-input-group .size-input[data-v-9cd3adba]::placeholder{color:#9ca3af}.image-resizing-page .main-layout-new .operation-sidebar .operation-card .size-input-panel .aspect-ratio-option[data-v-9cd3adba]{margin-top:8px;text-align:left}.image-resizing-page .main-layout-new .operation-sidebar .operation-card .size-input-panel .aspect-ratio-option .checkbox-label[data-v-9cd3adba]{align-items:center;color:#333;cursor:pointer;display:flex;font-size:13px}.image-resizing-page .main-layout-new .operation-sidebar .operation-card .size-input-panel .aspect-ratio-option .checkbox-label input[type=checkbox][data-v-9cd3adba]{cursor:pointer;height:16px;margin-right:8px;width:16px}.image-resizing-page .main-layout-new .operation-sidebar .operation-card .size-input-panel .aspect-ratio-option .checkbox-label span[data-v-9cd3adba]{-webkit-user-select:none;-moz-user-select:none;user-select:none}.image-resizing-page .main-layout-new .operation-sidebar .operation-card .image-info[data-v-9cd3adba]{border-top:1px solid #e5e7eb;display:flex;flex-direction:column;font-size:13px;gap:8px;margin:12px 0;padding:12px 0}.image-resizing-page .main-layout-new .operation-sidebar .operation-card .image-info .info-item[data-v-9cd3adba]{display:flex;gap:8px;justify-content:space-between}.image-resizing-page .main-layout-new .operation-sidebar .operation-card .image-info .info-item .info-label[data-v-9cd3adba]{color:#666}.image-resizing-page .main-layout-new .operation-sidebar .operation-card .image-info .info-item .info-value[data-v-9cd3adba]{color:#333;font-weight:500}.image-resizing-page .main-layout-new .operation-sidebar .operation-card .image-info .info-item .info-value.target-pixel-value[data-v-9cd3adba]{color:#ef4444;font-weight:600}.image-resizing-page .main-layout-new .operation-sidebar .operation-card .bottom-actions[data-v-9cd3adba]{border-top:1px solid #e5e7eb;box-shadow:0 -4px 12px #0000000a;display:flex;flex-direction:column;flex-shrink:0;gap:8px;margin-top:auto;padding-top:12px}.image-resizing-page .main-layout-new .operation-sidebar .operation-card .bottom-actions .reupload-btn[data-v-9cd3adba]{background:#fff;border:1px solid #d1d5db;border-radius:4px;color:#333;cursor:pointer;font-size:14px;padding:10px 20px;transition:all .2s;width:100%}.image-resizing-page .main-layout-new .operation-sidebar .operation-card .bottom-actions .reupload-btn[data-v-9cd3adba]:hover{background:#f3f4f6;border-color:#9ca3af}.image-resizing-page .main-layout-new .operation-sidebar .operation-card .bottom-actions .download-btn[data-v-9cd3adba]{background:#007aff;border:none;border-radius:4px;color:#fff;cursor:pointer;font-size:14px;padding:10px 20px;transition:background .2s;width:100%}.image-resizing-page .main-layout-new .operation-sidebar .operation-card .bottom-actions .download-btn[data-v-9cd3adba]:hover:not(:disabled){background:#2563eb}.image-resizing-page .main-layout-new .operation-sidebar .operation-card .bottom-actions .download-btn[data-v-9cd3adba]:disabled{cursor:not-allowed;opacity:.6}