*{margin: 0;padding: 0;box-sizing: border-box} body{font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);min-height: 100vh;color: #333} .container{max-width: 1440px;margin: 0 auto;padding: 20px} header{text-align: center;margin-bottom: 30px;color: white} header h1{font-size: 2.5rem;font-weight: 700;margin-bottom: 10px;text-shadow: 0 2px 4px rgba(0,0,0,0.3)} header p{font-size: 1.1rem;opacity: 0.9} .toolbar{background: white;border-radius: 16px;padding: 20px;margin-bottom: 20px;box-shadow: 0 8px 32px rgba(0,0,0,0.1);display: flex;flex-wrap: wrap;gap: 20px;align-items: center} .upload-section{flex: 1;min-width: 200px} .file-input{display: none} .upload-btn{display: inline-block;background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);color: white;padding: 12px 24px;border-radius: 12px;cursor: pointer;font-weight: 600;transition: all 0.3s ease;border: none;font-size: 1rem} .upload-btn:hover{transform: translateY(-2px);box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4)} .tools-section{display: flex;gap: 12px;flex-wrap: wrap} .tool-btn{background: #f8f9fa;border: 2px solid #e9ecef;border-radius: 12px;padding: 12px 20px;cursor: pointer;font-weight: 600;transition: all 0.3s ease;display: flex;align-items: center;gap: 8px;font-size: 0.9rem} .tool-btn:hover{background: #e9ecef;transform: translateY(-1px)} .tool-btn.active{background: linear-gradient(135deg, #007bff, #0056b3);color: white;transform: translateY(-2px);box-shadow: 0 6px 20px rgba(0, 123, 255, 0.3)} .tool-btn[data-tool="select"].active{background: linear-gradient(135deg, #28a745, #20c997);box-shadow: 0 6px 20px rgba(40, 167, 69, 0.3)} .tool-btn[data-tool="rect"].active{background: linear-gradient(135deg, #007bff, #0056b3);box-shadow: 0 6px 20px rgba(0, 123, 255, 0.3)} .tool-btn[data-tool="circle"].active{background: linear-gradient(135deg, #6f42c1, #5a32a3);box-shadow: 0 6px 20px rgba(111, 66, 193, 0.3)} .tool-btn[data-tool="select"] span{color: #28a745;font-weight: bold} .tool-btn[data-tool="rect"] span{color: #007bff;font-weight: bold} .tool-btn[data-tool="circle"] span{color: #6f42c1;font-weight: bold} .tool-btn[data-tool="select"].active span, .tool-btn[data-tool="rect"].active span, .tool-btn[data-tool="circle"].active span{color: white} .tool-btn:disabled{opacity: 0.5;cursor: not-allowed} .tool-btn:disabled:hover{transform: none} .clear-btn:hover{background: #dc3545;color: white;border-color: #dc3545} .export-btn:not(:disabled):hover{background: #28a745;color: white;border-color: #28a745} .auto-generate-btn:not(:disabled):hover{background: #17a2b8;color: white;border-color: #17a2b8} .canvas-container{background: white;border-radius: 16px;padding: 20px;margin-bottom: 20px;box-shadow: 0 8px 32px rgba(0,0,0,0.1);position: relative;min-height: 400px;display: flex;justify-content: center;align-items: center} #canvas{max-width: 100%;max-height: 70vh;border-radius: 12px;box-shadow: 0 4px 20px rgba(0,0,0,0.1)} .canvas-overlay{position: absolute;top: 0;left: 0;right: 0;bottom: 0;display: flex;justify-content: center;align-items: center;pointer-events: none} .placeholder{text-align: center;color: #6c757d} .placeholder-icon{font-size: 4rem;margin-bottom: 15px;opacity: 0.5} .placeholder-text{font-size: 1.2rem;font-weight: 500} .info-panel{background: white;border-radius: 16px;padding: 20px;box-shadow: 0 8px 32px rgba(0,0,0,0.1)} .info-panel h3{margin-bottom: 15px;color: #495057;font-size: 1.2rem} .selections-list{display: grid;grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));gap: 15px} .selection-item{background: #f8f9fa;border: 1px solid #e9ecef;border-radius: 12px;padding: 15px;transition: all 0.3s ease} .selection-item:hover{background: #e9ecef;transform: translateY(-2px)} .selection-header{display: flex;align-items: center;gap: 12px;margin-bottom: 0} .selection-thumbnail-container{flex-shrink: 0} .selection-thumbnail{width: 60px;height: 60px;border-radius: 8px;object-fit: cover;border: 2px solid #e9ecef;transition: all 0.3s ease} .selection-thumbnail-placeholder{width: 60px;height: 60px;border-radius: 8px;background: #f8f9fa;border: 2px solid #e9ecef;display: flex;align-items: center;justify-content: center;font-size: 1.5rem;color: #6c757d} .selection-info{flex: 1;min-width: 0} .selection-title{font-weight: 600;color: #495057;margin-bottom: 4px;font-size: 0.95rem} .selection-size{font-size: 0.85rem;color: #6c757d;line-height: 1.3} .selection-delete{background: #dc3545;color: white;border: none;border-radius: 6px;padding: 6px 10px;cursor: pointer;font-size: 0.8rem;transition: all 0.3s ease;flex-shrink: 0;align-self: flex-start} .selection-delete:hover{background: #c82333} @media (min-width: 1200px){.selections-list{grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))} .canvas-container{padding: 30px} .toolbar{padding: 25px} } @media (max-width: 768px){.container{padding: 15px} header h1{font-size: 2rem} .toolbar{flex-direction: column;align-items: stretch} .tools-section{justify-content: center} .tool-btn{flex: 1;min-width: 120px;justify-content: center} } .selection-area{position: absolute;border: 2px dashed #007bff;background: rgba(0, 123, 255, 0.1);pointer-events: none} .selection-area.circle{border-radius: 50%} .selection-area.rect{border-radius: 4px} .selection-item.selected{background: linear-gradient(135deg, #ff6b6b, #ff8e8e);color: white;border-color: #ff6b6b;transform: translateY(-2px);box-shadow: 0 8px 25px rgba(255, 107, 107, 0.3)} .selection-item.selected .selection-title{color: white} .selection-item.selected .selection-size{color: rgba(255, 255, 255, 0.9)} .selection-item.selected .selection-thumbnail{border-color: rgba(255, 255, 255, 0.5);box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2)} .selection-item.selected .selection-thumbnail-placeholder{border-color: rgba(255, 255, 255, 0.5);background: rgba(255, 255, 255, 0.1);color: rgba(255, 255, 255, 0.8)} .canvas-container::after{content: '';position: absolute;top: 10px;left: 10px;background: rgba(0, 0, 0, 0.7);color: white;padding: 8px 12px;border-radius: 6px;font-size: 0.8rem;opacity: 0;transition: opacity 0.3s ease;pointer-events: none;z-index: 10} .canvas-container.show-hint::after{opacity: 1} .canvas-container[data-hint="drag"]::after{content: '按住拖动来移动选择区域'} .canvas-container[data-hint="resize"]::after{content: '拖动控制点来调整大小'} .canvas-container[data-hint="select"]::after{content: '点击选择区域进行编辑'} .canvas-container[data-hint="create"]::after{content: '拖动创建新的选择区域'} .control-point{position: absolute;width: 8px;height: 8px;background: #ff6b6b;border: 2px solid white;border-radius: 2px;cursor: pointer;z-index: 1000} .control-point:hover{background: #ff5252;transform: scale(1.2)} @media (max-width: 480px){.selection-item{padding: 12px} .selection-header{flex-direction: column;align-items: flex-start;gap: 8px} .selection-delete{align-self: flex-end} .tool-btn{padding: 10px 16px;font-size: 0.8rem} } .shortcuts-btn{background: linear-gradient(135deg, #17a2b8, #20c997);color: white} .shortcuts-btn:hover{background: linear-gradient(135deg, #138496, #1e7e34);transform: translateY(-2px)} .modal{display: none;position: fixed;z-index: 1000;left: 0;top: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.5);backdrop-filter: blur(4px)} .modal-content{background: white;margin: 5% auto;padding: 0;border-radius: 16px;width: 90%;max-width: 600px;box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);animation: modalSlideIn 0.3s ease-out} @keyframes modalSlideIn{from{opacity: 0;transform: translateY(-50px) scale(0.95)} to{opacity: 1;transform: translateY(0) scale(1)} } .modal-header{display: flex;justify-content: space-between;align-items: center;padding: 20px 24px;border-bottom: 1px solid #e9ecef;background: linear-gradient(135deg, #667eea, #764ba2);color: white;border-radius: 16px 16px 0 0} .modal-header h3{margin: 0;font-size: 1.3rem;font-weight: 600} .modal-close{cursor: pointer;font-size: 28px;font-weight: bold;line-height: 1;color: white;opacity: 0.8;transition: opacity 0.2s ease} .modal-close:hover{opacity: 1} .modal-body{padding: 24px} .shortcuts-grid{margin-bottom: 24px} .shortcut-row{display: flex;justify-content: space-between;align-items: center;padding: 12px 0;border-bottom: 1px solid #f1f3f4} .shortcut-row:last-child{border-bottom: none} .shortcut-keys{display: flex;align-items: center;gap: 8px;font-weight: 500} .shortcut-keys kbd{background: linear-gradient(135deg, #f8f9fa, #e9ecef);border: 1px solid #ced4da;border-radius: 6px;padding: 6px 12px;font-size: 12px;font-family: 'Courier New', monospace;color: #495057;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);font-weight: 600} .shortcut-keys span{color: #6c757d;font-size: 14px} .shortcut-desc{color: #495057;font-size: 14px} .shortcuts-tips{background: #f8f9fa;border-radius: 12px;padding: 16px;border-left: 4px solid #17a2b8} .shortcuts-tips h4{margin: 0 0 12px 0;color: #495057;font-size: 1rem} .shortcuts-tips ul{margin: 0;padding-left: 20px} .shortcuts-tips li{color: #6c757d;font-size: 13px;line-height: 1.5;margin-bottom: 6px} .shortcuts-tips li:last-child{margin-bottom: 0} @media (max-width: 768px){.modal-content{margin: 10px;width: calc(100% - 20px);max-height: calc(100vh - 20px);overflow-y: auto} .modal-header{padding: 16px 20px} .modal-header h3{font-size: 1.1rem} .modal-body{padding: 20px} .shortcut-row{flex-direction: column;align-items: flex-start;gap: 8px;padding: 16px 0} .shortcut-keys{width: 100%} .shortcut-desc{width: 100%;font-size: 13px;color: #6c757d} } #canvas.tool-rect{cursor: crosshair} #canvas.tool-circle{cursor: crosshair} #canvas.tool-select{cursor: default}