.image-size-calculator[data-v-9f893227]{padding:15px;max-width:1200px;margin:0 auto}.page-title[data-v-9f893227]{font-size:24px;font-weight:600;color:#2c3e50;text-align:center;margin-bottom:24px;line-height:36px}.calculator-container[data-v-9f893227]{display:flex;flex-direction:column;gap:20px}.image-section[data-v-9f893227]{flex:1;min-width:0}.upload-area[data-v-9f893227]{border:2px dashed #dee2e6;border-radius:12px;background-color:#f8f9fa;padding:60px 20px;text-align:center;cursor:pointer;transition:all .3s ease}.upload-area[data-v-9f893227]:hover,.upload-area.drag-over[data-v-9f893227]{border-color:#3498db;background-color:#3498db0d}.upload-icon[data-v-9f893227]{font-size:48px;color:#3498db;margin-bottom:16px;font-weight:300;line-height:48px}.upload-text[data-v-9f893227]{font-size:16px;color:#2c3e50;margin-bottom:8px;line-height:24px}.upload-link[data-v-9f893227]{color:#3498db;font-weight:500}.upload-hint[data-v-9f893227]{font-size:14px;color:#7f8c8d;line-height:20px}.hidden-input[data-v-9f893227]{display:none}.canvas-wrapper[data-v-9f893227]{background-color:#fff;border-radius:12px;box-shadow:0 2px 8px #00000014;overflow:hidden}.canvas-header[data-v-9f893227]{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid #dee2e6;background-color:#f8f9fa}.canvas-title[data-v-9f893227]{font-size:14px;font-weight:600;color:#2c3e50;line-height:22px}.mode-indicator[data-v-9f893227]{font-size:13px;padding:4px 12px;border-radius:4px;line-height:20px}.mode-indicator.reference[data-v-9f893227]{background-color:#3498db26;color:#2980b9}.mode-indicator.target[data-v-9f893227]{background-color:#2ecc7126;color:#27ae60}.canvas-container[data-v-9f893227]{position:relative;width:100%;height:500px;background-color:#e8e8e8;display:flex;align-items:center;justify-content:center;overflow:hidden}.main-canvas[data-v-9f893227]{max-width:100%;max-height:100%;cursor:crosshair}.canvas-actions[data-v-9f893227]{padding:12px 16px;border-top:1px solid #dee2e6;display:flex;justify-content:flex-end}.action-btn[data-v-9f893227]{padding:8px 20px;background-color:#f8f9fa;border:1px solid #dee2e6;border-radius:6px;color:#2c3e50;font-size:14px;cursor:pointer;transition:all .2s ease;line-height:22px}.action-btn[data-v-9f893227]:hover{background-color:#e9ecef;border-color:#adb5bd}.control-panel[data-v-9f893227]{display:flex;flex-direction:column;gap:16px}.panel-card[data-v-9f893227]{background-color:#fff;border-radius:12px;box-shadow:0 2px 8px #00000014;padding:20px}.card-title[data-v-9f893227]{font-size:16px;font-weight:600;color:#2c3e50;margin-bottom:16px;line-height:24px}.form-group[data-v-9f893227]{margin-bottom:16px}.form-label[data-v-9f893227]{display:block;font-size:14px;font-weight:500;color:#2c3e50;margin-bottom:8px;line-height:20px}.form-input[data-v-9f893227]{width:100%;padding:10px 12px;border:1px solid #dee2e6;border-radius:6px;font-size:14px;color:#2c3e50;transition:border-color .2s ease;box-sizing:border-box;line-height:22px}.form-input[data-v-9f893227]:focus{outline:none;border-color:#3498db;box-shadow:0 0 0 3px #3498db1a}.size-inputs[data-v-9f893227]{display:grid;grid-template-columns:1fr 1fr;gap:12px}.select-search-wrapper[data-v-9f893227]{position:relative}.search-input[data-v-9f893227]{width:100%;padding:10px 36px 10px 12px;border:1px solid #dee2e6;border-radius:6px;font-size:14px;color:#2c3e50;transition:border-color .2s ease;box-sizing:border-box;line-height:22px}.search-input[data-v-9f893227]:focus{outline:none;border-color:#3498db;box-shadow:0 0 0 3px #3498db1a}.clear-btn[data-v-9f893227]{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;color:#95a5a6;font-size:16px;cursor:pointer;padding:4px;line-height:16px}.clear-btn[data-v-9f893227]:hover{color:#2c3e50}.dropdown-list[data-v-9f893227]{position:absolute;top:100%;left:0;right:0;max-height:240px;overflow-y:auto;background-color:#fff;border:1px solid #dee2e6;border-top:none;border-radius:0 0 6px 6px;box-shadow:0 4px 12px #0000001a;z-index:100}.dropdown-item[data-v-9f893227]{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;cursor:pointer;transition:background-color .2s ease}.dropdown-item[data-v-9f893227]:hover{background-color:#f8f9fa}.item-name[data-v-9f893227]{font-size:14px;color:#2c3e50;line-height:20px}.item-size[data-v-9f893227]{font-size:13px;color:#7f8c8d;line-height:18px}.no-result[data-v-9f893227]{justify-content:center;color:#95a5a6;font-size:14px;line-height:20px}.box-status[data-v-9f893227]{display:flex;flex-direction:column;gap:10px;margin-top:12px;padding-top:12px;border-top:1px solid #eee}.status-item[data-v-9f893227]{display:flex;align-items:center;gap:8px;font-size:14px;color:#95a5a6;line-height:20px}.status-item.completed[data-v-9f893227]{color:#27ae60}.status-item.target .status-dot[data-v-9f893227]{background-color:#2ecc71}.status-dot[data-v-9f893227]{width:8px;height:8px;border-radius:50%;background-color:#3498db;flex-shrink:0}.status-text[data-v-9f893227]{line-height:20px}.action-buttons[data-v-9f893227]{display:flex;flex-direction:column;gap:10px}.op-btn[data-v-9f893227]{padding:10px 16px;border:1px solid #dee2e6;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease;text-align:center;line-height:22px}.op-btn[data-v-9f893227]:disabled{opacity:.5;cursor:not-allowed}.op-btn.reference[data-v-9f893227]{background-color:#fff;color:#2980b9;border-color:#3498db}.op-btn.reference[data-v-9f893227]:not(:disabled):hover{background-color:#3498db1a}.op-btn.target[data-v-9f893227]{background-color:#fff;color:#27ae60;border-color:#2ecc71}.op-btn.target[data-v-9f893227]:not(:disabled):hover{background-color:#2ecc711a}.op-btn.reset[data-v-9f893227]{background-color:#fff;color:#e74c3c;border-color:#e74c3c}.op-btn.reset[data-v-9f893227]:not(:disabled):hover{background-color:#e74c3c1a}.result-card[data-v-9f893227]{background:linear-gradient(135deg,#f8f9fa,#fff);border:1px solid #e9ecef}.result-main[data-v-9f893227]{text-align:center;padding:20px;background-color:#fff;border-radius:8px;margin-bottom:16px}.result-value[data-v-9f893227]{display:flex;align-items:baseline;justify-content:center;gap:8px;margin-bottom:8px}.result-number[data-v-9f893227]{font-size:36px;font-weight:700;color:#2c3e50;line-height:44px}.result-unit[data-v-9f893227]{font-size:18px;color:#7f8c8d;font-weight:500;line-height:24px}.result-label[data-v-9f893227]{font-size:14px;color:#7f8c8d;margin-bottom:8px;line-height:20px}.result-dimensions[data-v-9f893227]{font-size:16px;color:#2c3e50;font-weight:500;line-height:24px}.result-table[data-v-9f893227]{width:100%;border-collapse:collapse;font-size:14px}.result-table th[data-v-9f893227],.result-table td[data-v-9f893227]{padding:10px 12px;text-align:left;border-bottom:1px solid #eee;line-height:20px}.result-table th[data-v-9f893227]{background-color:#f8f9fa;font-weight:600;color:#2c3e50}.result-table td[data-v-9f893227]{color:#495057}.result-table tr:last-child td[data-v-9f893227]{border-bottom:none}.help-card[data-v-9f893227]{background-color:#f8f9fa}.help-steps[data-v-9f893227]{margin:0;padding-left:20px;color:#495057}.help-steps li[data-v-9f893227]{font-size:14px;line-height:28px;margin-bottom:4px}@media(min-width:768px){.image-size-calculator[data-v-9f893227]{padding:20px}.page-title[data-v-9f893227]{font-size:28px;margin-bottom:30px;line-height:40px}.calculator-container[data-v-9f893227]{flex-direction:row;align-items:flex-start}.image-section[data-v-9f893227]{flex:1.2;min-width:0}.control-panel[data-v-9f893227]{flex:0 0 380px;flex-shrink:0}.canvas-container[data-v-9f893227]{height:560px}.size-inputs[data-v-9f893227]{gap:16px}.box-status[data-v-9f893227]{flex-direction:row;gap:20px}.action-buttons[data-v-9f893227]{flex-direction:row;flex-wrap:wrap}.op-btn[data-v-9f893227]{flex:1;min-width:calc(33.333% - 10px)}}@media(max-width:767px){.image-size-calculator[data-v-9f893227]{padding:12px}.page-title[data-v-9f893227]{font-size:20px;margin-bottom:16px;line-height:30px}.upload-area[data-v-9f893227]{padding:40px 16px}.upload-icon[data-v-9f893227]{font-size:40px;margin-bottom:12px;line-height:40px}.upload-text[data-v-9f893227]{font-size:15px;line-height:22px}.upload-hint[data-v-9f893227]{font-size:13px;line-height:18px}.canvas-container[data-v-9f893227]{height:350px}.panel-card[data-v-9f893227]{padding:16px}.card-title[data-v-9f893227]{font-size:15px;margin-bottom:12px;line-height:22px}.size-inputs[data-v-9f893227]{grid-template-columns:1fr;gap:10px}.form-input[data-v-9f893227],.search-input[data-v-9f893227]{padding:9px 11px;font-size:14px}.result-number[data-v-9f893227]{font-size:28px;line-height:36px}.result-unit[data-v-9f893227]{font-size:16px;line-height:22px}.result-table[data-v-9f893227]{font-size:13px}.result-table th[data-v-9f893227],.result-table td[data-v-9f893227]{padding:8px 10px;line-height:18px}.help-steps li[data-v-9f893227]{font-size:13px;line-height:26px}.form-group[data-v-9f893227]{margin-bottom:12px}.action-buttons[data-v-9f893227]{gap:8px}.op-btn[data-v-9f893227]{padding:9px 14px;font-size:13px;line-height:20px}.box-status[data-v-9f893227]{gap:8px;margin-top:10px;padding-top:10px}}