/* ===========================================
   裁切模块样式
   =========================================== */

#upload-area {
  margin: 0 12px 8px; padding: 18px 0;
  border: 1.5px dashed #3A3A3A; border-radius: 8px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  cursor: pointer; background: #141414; transition: border-color 0.2s;
  position: relative;
}
#upload-area:hover { border-color: #00D4FF; }
#upload-area span { font-size: 11px; color: #666; margin-top: 4px; }
#upload-area input[type="file"] {
  position: absolute; inset: 0; opacity: 0; cursor: pointer;
}

#image-list {
  flex: 1; overflow-y: auto; padding: 0 12px 12px;
}


#canvas-toolbar {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 4px; background: #1A1A1A;
  padding: 4px; border-radius: 8px;
  border: 0.5px solid #2A2A2A;
  box-shadow: 0 2px 12px rgba(0,0,0,0.5); z-index: 10;
}
.toolbar-item {
  padding: 4px 8px; font-size: 12px; color: #AAA;
  cursor: pointer; border-radius: 4px; transition: background 0.2s;
  display: flex; align-items: center; gap: 4px;
}
.toolbar-item:hover { background: #252525; }
.toolbar-item.active { color: #00D4FF; }
.toolbar-divider { width: 1px; background: #2A2A2A; margin: 4px 0; }

#canvas-viewport {
  position: relative; display: flex; align-items: center; justify-content: center;
  flex: 1; width: 100%; overflow: hidden;
}
#canvas-container {
  position: relative; overflow: hidden;
  box-shadow: 0 0 30px rgba(0,0,0,0.6); border-radius: 4px;
  background: #1A1A1A;
}
#preview-image { display: block; max-width: none; width: 100%; height: 100%; }
#preview-image[hidden] { display: none; }

#empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; color: #444;
}
#empty-state p { font-size: 13px; color: #444; }
#empty-state.hidden { display: none; }

#crop-box {
  position: absolute; border: 2px solid #00D4FF;
  background: rgba(0,212,255,0.05);
  cursor: move;
  box-shadow: 0 0 12px rgba(0,212,255,0.15), inset 0 0 12px rgba(0,212,255,0.05);
}
#crop-box.hidden { display: none; }
#crop-box.dragging { user-select: none; }

.handle {
  position: absolute; width: 10px; height: 10px;
  background: #0D0D0D; border: 1.5px solid #00D4FF;
  border-radius: 2px; box-shadow: 0 0 6px rgba(0,212,255,0.5);
}
.handle-tl { top: -5px; left: -5px; cursor: nwse-resize; }
.handle-tr { top: -5px; right: -5px; cursor: nesw-resize; }
.handle-bl { bottom: -5px; left: -5px; cursor: nesw-resize; }
.handle-br { bottom: -5px; right: -5px; cursor: nwse-resize; }

.crop-label {
  position: absolute; bottom: -24px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, #00D4FF, #7B2FFF);
  color: #0D0D0D; font-size: 11px; font-weight: 500;
  padding: 2px 8px; border-radius: 3px; white-space: nowrap;
  box-shadow: 0 0 10px rgba(0,212,255,0.3);
}
.crop-crosshair-h {
  position: absolute; top: 50%; left: 0; width: 100%; height: 0.5px;
  background: rgba(0,212,255,0.2); pointer-events: none;
}
.crop-crosshair-v {
  position: absolute; left: 50%; top: 0; width: 0.5px; height: 100%;
  background: rgba(0,212,255,0.2); pointer-events: none;
}
.crop-overlay {
  position: absolute; background: rgba(0,0,0,0.6); pointer-events: none;
}

#alignment-indicator {
  margin-top: 16px; display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: #666;
}
#alignment-indicator span { color: #00D4FF; cursor: pointer; text-decoration: underline; font-size: 11px; }