.image-resizing-page[data-v-0597fd2f]{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-0597fd2f]{display:none}.image-resizing-page .upload-layout[data-v-0597fd2f]{align-items:stretch;display:flex;gap:40px;margin:0 auto 50px;max-width:1400px;padding:0 24px}.image-resizing-page .upload-layout .page-header-left[data-v-0597fd2f]{align-items:center;display:flex;flex:0 0 42%;min-width:0;padding-right:20px}.image-resizing-page .upload-layout .page-header-left .header-content[data-v-0597fd2f]{display:flex;flex-direction:column;gap:24px;text-align:left;width:100%}.image-resizing-page .upload-layout .page-header-left .header-content .top-icon[data-v-0597fd2f]{filter:drop-shadow(0 2px 4px rgba(0,0,0,.1));flex-shrink:0;height:64px;width:64px}.image-resizing-page .upload-layout .page-header-left .header-content .title[data-v-0597fd2f]{color:#111827;font-size:32px;font-weight:700;letter-spacing:-.5px;line-height:1.2;margin:0}.image-resizing-page .upload-layout .page-header-left .header-content .desc[data-v-0597fd2f]{color:#4b5563;font-size:15px;line-height:1.75;margin:0}.image-resizing-page .upload-layout .upload-area-right[data-v-0597fd2f]{align-items:stretch;display:flex;flex:1;min-width:0}.image-resizing-page .page-header-2[data-v-0597fd2f]{align-items:center;display:flex;flex-direction:row;margin-bottom:12px}.image-resizing-page .page-header-2 .top-icon[data-v-0597fd2f]{height:50px;width:50px}.image-resizing-page .page-header-2 .title[data-v-0597fd2f]{color:#333;font-size:18px;font-weight:600;margin-bottom:0;margin-left:6px;margin-top:0}.image-resizing-page .upload-area[data-v-0597fd2f]{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:380px;overflow:hidden;padding:50px 32px;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1);width:100%}.image-resizing-page .upload-area[data-v-0597fd2f]: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-0597fd2f]: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-0597fd2f]:hover:before{opacity:1}.image-resizing-page .upload-area.is-dragging[data-v-0597fd2f]{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-0597fd2f]:before{opacity:1}.image-resizing-page .upload-area .upload-btn[data-v-0597fd2f]{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-0597fd2f]: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-0597fd2f]:active{box-shadow:0 2px 4px -1px #3b82f64d;transform:translateY(0)}.image-resizing-page .upload-area .upload-btn svg[data-v-0597fd2f]{height:18px;margin-right:10px;width:18px}.image-resizing-page .upload-area .upload-tip[data-v-0597fd2f]{color:#6b7280;font-size:14px;line-height:1.7;margin-top:24px;max-width:100%;padding:0 10px;text-align:center}@media (max-width:968px){.image-resizing-page .upload-layout[data-v-0597fd2f]{flex-direction:column;gap:32px;margin-bottom:40px;padding:0 20px}.image-resizing-page .upload-layout .page-header-left[data-v-0597fd2f]{flex:1;padding-right:0}.image-resizing-page .upload-layout .page-header-left .header-content[data-v-0597fd2f]{align-items:center;gap:16px;text-align:center}.image-resizing-page .upload-layout .page-header-left .header-content .top-icon[data-v-0597fd2f]{height:56px;width:56px}.image-resizing-page .upload-layout .page-header-left .header-content .title[data-v-0597fd2f]{font-size:26px}.image-resizing-page .upload-layout .page-header-left .header-content .desc[data-v-0597fd2f]{font-size:14px;max-width:600px;text-align:left}.image-resizing-page .upload-layout .upload-area-right[data-v-0597fd2f]{width:100%}.image-resizing-page .upload-layout .upload-area-right .upload-area[data-v-0597fd2f]{min-height:320px;padding:40px 24px}}@media (max-width:640px){.image-resizing-page .upload-layout[data-v-0597fd2f]{gap:24px;padding:0 16px}.image-resizing-page .upload-layout .page-header-left .header-content .top-icon[data-v-0597fd2f]{height:48px;width:48px}.image-resizing-page .upload-layout .page-header-left .header-content .title[data-v-0597fd2f]{font-size:22px}.image-resizing-page .upload-layout .page-header-left .header-content .desc[data-v-0597fd2f]{font-size:13px}.image-resizing-page .upload-layout .upload-area-right .upload-area[data-v-0597fd2f]{min-height:280px;padding:32px 20px}.image-resizing-page .upload-layout .upload-area-right .upload-area .upload-btn[data-v-0597fd2f]{font-size:15px;padding:12px 40px}.image-resizing-page .upload-layout .upload-area-right .upload-area .upload-tip[data-v-0597fd2f]{font-size:13px;margin-top:20px}}.image-resizing-page .example-section[data-v-0597fd2f]{margin:30px auto 0;max-width:900px;padding:0 20px}.image-resizing-page .example-section .example-title[data-v-0597fd2f]{color:#333;font-size:16px;font-weight:600;margin-bottom:16px;text-align:center}.image-resizing-page .example-section .example-grid[data-v-0597fd2f]{display:grid;gap:16px;grid-template-columns:repeat(3,1fr)}.image-resizing-page .example-section .example-grid .example-item[data-v-0597fd2f]{align-items:center;display:flex;flex-direction:column}.image-resizing-page .example-section .example-grid .example-item .example-label[data-v-0597fd2f]{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-0597fd2f]{color:#007aff}.image-resizing-page .example-section .example-grid .example-item .example-image-wrapper[data-v-0597fd2f]{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-0597fd2f]: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-0597fd2f]{transform:scale(1.05)}.image-resizing-page .example-section .example-grid .example-item .example-image-wrapper:hover .example-crop-box .crop-box-overlay[data-v-0597fd2f]{background:#007aff26}.image-resizing-page .example-section .example-grid .example-item .example-image-wrapper:hover .example-crop-box .crop-box-border[data-v-0597fd2f]{stroke:#0056d6;stroke-width:2.5}.image-resizing-page .example-section .example-grid .example-item .example-image-wrapper .example-image[data-v-0597fd2f]{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-cropped[data-v-0597fd2f]{clip-path:inset(20% 20% 20% 20%);-o-object-position:center;object-position:center;transition:transform .3s ease}.image-resizing-page .example-section .example-grid .example-item .example-image-wrapper .example-cropped-border[data-v-0597fd2f]{border:2px solid #007aff;border-radius:2px;bottom:20%;box-sizing:border-box;left:20%;pointer-events:none;position:absolute;right:20%;top:20%;transition:all .3s ease}.image-resizing-page .example-section .example-grid .example-item .example-image-wrapper:hover .example-cropped[data-v-0597fd2f]{transform:scale(1.05)}.image-resizing-page .example-section .example-grid .example-item .example-image-wrapper:hover .example-cropped-border[data-v-0597fd2f]{border-color:#0056d6;box-shadow:0 0 12px #007aff4d}.image-resizing-page .example-section .example-grid .example-item .example-image-wrapper .example-crop-box[data-v-0597fd2f]{height:60%;left:50%;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);transition:all .3s ease;width:60%}.image-resizing-page .example-section .example-grid .example-item .example-image-wrapper .example-crop-box .crop-box-svg[data-v-0597fd2f]{height:100%;left:0;position:absolute;top:0;width:100%}.image-resizing-page .example-section .example-grid .example-item .example-image-wrapper .example-crop-box .crop-box-svg .crop-box-border[data-v-0597fd2f]{stroke:#007aff;stroke-width:2;stroke-dasharray:8 4;stroke-dashoffset:0;fill:none;animation:cropBoxDash-0597fd2f 1.5s linear infinite;transition:stroke .3s ease,stroke-width .3s ease}.image-resizing-page .example-section .example-grid .example-item .example-image-wrapper .example-crop-box .crop-box-overlay[data-v-0597fd2f]{background:#007aff1a;height:100%;left:0;pointer-events:none;position:absolute;top:0;transition:background .3s ease;width:100%}@keyframes cropBoxDash-0597fd2f{0%{stroke-dashoffset:0}to{stroke-dashoffset:12}}.image-resizing-page .main-layout-new[data-v-0597fd2f]{display:flex;gap:12px;height:calc(100vh - 150px);margin:0 auto;max-width:1400px;min-height:500px}.image-resizing-page .main-layout-new .preview-main[data-v-0597fd2f]{align-items:center;background:#fff;border:1px solid #e5e7eb;border-radius:6px;display:flex;flex:1;justify-content:center;overflow:auto;padding:12px}.image-resizing-page .main-layout-new .preview-main .preview-container[data-v-0597fd2f]{align-items:center;display:flex;height:100%;justify-content:center;position:relative;width:100%}.image-resizing-page .main-layout-new .preview-main .preview-container .preview-img[data-v-0597fd2f]{display:block;height:auto;max-height:100%;max-width:100%}.image-resizing-page .main-layout-new .preview-main .preview-container .crop-box[data-v-0597fd2f]{background:#007aff1a;border:2px dashed #007aff;box-sizing:border-box;cursor:move;position:absolute}.image-resizing-page .main-layout-new .preview-main .preview-container .crop-box .crop-handle[data-v-0597fd2f]{background:#007aff;border:2px solid #fff;border-radius:50%;cursor:pointer;height:10px;position:absolute;width:10px}.image-resizing-page .main-layout-new .preview-main .preview-container .crop-box .crop-handle.handle-nw[data-v-0597fd2f]{cursor:nw-resize}.image-resizing-page .main-layout-new .preview-main .preview-container .crop-box .crop-handle.handle-ne[data-v-0597fd2f]{cursor:ne-resize}.image-resizing-page .main-layout-new .preview-main .preview-container .crop-box .crop-handle.handle-sw[data-v-0597fd2f]{cursor:sw-resize}.image-resizing-page .main-layout-new .preview-main .preview-container .crop-box .crop-handle.handle-se[data-v-0597fd2f]{cursor:se-resize}.image-resizing-page .main-layout-new .preview-main .preview-container .crop-box .crop-handle.handle-n[data-v-0597fd2f]{cursor:n-resize}.image-resizing-page .main-layout-new .preview-main .preview-container .crop-box .crop-handle.handle-s[data-v-0597fd2f]{cursor:s-resize}.image-resizing-page .main-layout-new .preview-main .preview-container .crop-box .crop-handle.handle-w[data-v-0597fd2f]{cursor:w-resize}.image-resizing-page .main-layout-new .preview-main .preview-container .crop-box .crop-handle.handle-e[data-v-0597fd2f]{cursor:e-resize}.image-resizing-page .operation-sidebar[data-v-0597fd2f]{display:flex;flex-direction:column;height:100%;width:320px}.image-resizing-page .operation-sidebar .operation-card[data-v-0597fd2f]{background:#fff;border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 2px 8px #0000000d;display:flex;flex-direction:column;height:100%;overflow:hidden;padding:12px}.image-resizing-page .operation-sidebar .operation-card .panel-title[data-v-0597fd2f]{color:#333;flex-shrink:0;font-size:14px;font-weight:600;margin:0 0 16px;text-align:left}.image-resizing-page .operation-sidebar .operation-card .scrollable-content[data-v-0597fd2f]{flex:1;margin-right:-4px;overflow-x:hidden;overflow-y:auto;padding-right:4px}.image-resizing-page .operation-sidebar .operation-card .scrollable-content[data-v-0597fd2f]::-webkit-scrollbar{width:6px}.image-resizing-page .operation-sidebar .operation-card .scrollable-content[data-v-0597fd2f]::-webkit-scrollbar-track{background:#f3f4f6;border-radius:3px}.image-resizing-page .operation-sidebar .operation-card .scrollable-content[data-v-0597fd2f]::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:3px}.image-resizing-page .operation-sidebar .operation-card .scrollable-content[data-v-0597fd2f]::-webkit-scrollbar-thumb:hover{background:#9ca3af}.image-resizing-page .operation-sidebar .operation-card .action-buttons[data-v-0597fd2f]{display:grid;gap:8px;grid-template-columns:1fr 1fr;margin-bottom:16px}.image-resizing-page .operation-sidebar .operation-card .action-buttons .action-btn[data-v-0597fd2f]{background:#fff;border:1px solid #d1d5db;border-radius:4px;color:#333;cursor:pointer;font-size:14px;padding:10px 16px;transition:all .2s;width:100%}.image-resizing-page .operation-sidebar .operation-card .action-buttons .action-btn[data-v-0597fd2f]:hover{background:#f3f4f6;border-color:#9ca3af}.image-resizing-page .operation-sidebar .operation-card .action-buttons .action-btn.active[data-v-0597fd2f]{background:#007aff;border-color:#007aff;color:#fff}.image-resizing-page .operation-sidebar .operation-card .custom-size-panel[data-v-0597fd2f]{background:#f9fafb;border:1px solid #e5e7eb;border-radius:6px;margin-bottom:16px;padding:12px}.image-resizing-page .operation-sidebar .operation-card .custom-size-panel .size-input-group[data-v-0597fd2f]{display:flex;flex-direction:column;gap:12px}.image-resizing-page .operation-sidebar .operation-card .custom-size-panel .size-input-group .size-input-wrapper[data-v-0597fd2f]{align-items:center;display:flex;gap:8px}.image-resizing-page .operation-sidebar .operation-card .custom-size-panel .size-input-group .size-input-wrapper label[data-v-0597fd2f]{color:#333;font-size:14px;min-width:50px;white-space:nowrap}.image-resizing-page .operation-sidebar .operation-card .custom-size-panel .size-input-group .size-input-wrapper .size-input[data-v-0597fd2f]{border:1px solid #d1d5db;border-radius:4px;flex:1;font-size:14px;padding:8px 10px}.image-resizing-page .operation-sidebar .operation-card .custom-size-panel .size-input-group .size-input-wrapper .size-input[data-v-0597fd2f]:focus{border-color:#007aff;outline:none}.image-resizing-page .operation-sidebar .operation-card .preset-buttons[data-v-0597fd2f]{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}.image-resizing-page .operation-sidebar .operation-card .preset-buttons .dropdown-btn[data-v-0597fd2f]{position:relative}.image-resizing-page .operation-sidebar .operation-card .preset-buttons .dropdown-btn.active .preset-btn[data-v-0597fd2f]{background:#007aff;border-color:#007aff;color:#fff}.image-resizing-page .operation-sidebar .operation-card .preset-buttons .dropdown-btn .preset-btn[data-v-0597fd2f]{align-items:center;background:#fff;border:1px solid #d1d5db;border-radius:4px;color:#333;cursor:pointer;display:flex;font-size:14px;justify-content:space-between;padding:10px 16px;transition:all .2s;width:100%}.image-resizing-page .operation-sidebar .operation-card .preset-buttons .dropdown-btn .preset-btn svg[data-v-0597fd2f]{height:12px;width:12px}.image-resizing-page .operation-sidebar .operation-card .preset-buttons .dropdown-btn .preset-btn[data-v-0597fd2f]:hover{background:#f3f4f6;border-color:#9ca3af}.image-resizing-page .operation-sidebar .operation-card .preset-buttons .dropdown-btn .dropdown-menu[data-v-0597fd2f]{background:#fff;border:1px solid #e5e7eb;border-radius:4px;box-shadow:0 4px 12px #0000001a;left:0;max-height:300px;min-width:200px;overflow-y:auto;position:absolute;right:0;top:calc(100% + 4px);z-index:100}.image-resizing-page .operation-sidebar .operation-card .preset-buttons .dropdown-btn .dropdown-menu .dropdown-item[data-v-0597fd2f]{color:#333;cursor:pointer;font-size:14px;padding:10px 16px;text-align:left;transition:background .2s}.image-resizing-page .operation-sidebar .operation-card .preset-buttons .dropdown-btn .dropdown-menu .dropdown-item[data-v-0597fd2f]:hover{background:#f3f4f6}.image-resizing-page .operation-sidebar .operation-card .preset-buttons .dropdown-btn .dropdown-menu .dropdown-item .item-name[data-v-0597fd2f]{font-weight:500}.image-resizing-page .operation-sidebar .operation-card .preset-buttons .dropdown-btn .dropdown-menu .dropdown-item .item-size[data-v-0597fd2f]{color:#9ca3af;font-size:12px;margin-left:8px}.image-resizing-page .operation-sidebar .operation-card .image-info[data-v-0597fd2f]{border-top:1px solid #e5e7eb;display:flex;flex-direction:column;font-size:13px;gap:8px;margin:12px 0;padding:12px 0}.image-resizing-page .operation-sidebar .operation-card .image-info .info-item[data-v-0597fd2f]{display:flex;gap:8px;justify-content:space-between}.image-resizing-page .operation-sidebar .operation-card .image-info .info-item .info-label[data-v-0597fd2f]{color:#666}.image-resizing-page .operation-sidebar .operation-card .image-info .info-item .info-value[data-v-0597fd2f]{color:#333;font-weight:500}.image-resizing-page .operation-sidebar .operation-card .image-info .info-item .info-value.target-pixel-value[data-v-0597fd2f]{color:#ef4444;font-weight:600}.image-resizing-page .operation-sidebar .operation-card .bottom-actions[data-v-0597fd2f]{background:#fff;border-top:1px solid #e5e7eb;display:flex;flex-direction:column;flex-shrink:0;gap:8px;padding-top:12px}.image-resizing-page .operation-sidebar .operation-card .bottom-actions .reupload-btn[data-v-0597fd2f]{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 .operation-sidebar .operation-card .bottom-actions .reupload-btn[data-v-0597fd2f]:hover{background:#f3f4f6;border-color:#9ca3af}.image-resizing-page .operation-sidebar .operation-card .bottom-actions .download-btn[data-v-0597fd2f]{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 .operation-sidebar .operation-card .bottom-actions .download-btn[data-v-0597fd2f]:hover:not(:disabled){background:#2563eb}.image-resizing-page .operation-sidebar .operation-card .bottom-actions .download-btn[data-v-0597fd2f]:disabled{cursor:not-allowed;opacity:.6}