/* 预览区 */
.tool-preview {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.tool-canvas {
  border: 2px solid #666;
  border-radius: 8px;
}

/* 按钮 */
.tool-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  transition: all 0.3s ease;
}

.tool-btn-primary {
  background-color: #4CAF50;
  color: white;
}

.tool-btn-primary:hover {
  background-color: #45a049;
}

.tool-btn-secondary {
  background-color: #2196F3;
  color: white;
}

.tool-btn-secondary:hover {
  background-color: #0b7dda;
}

/* 控件区 */
.tool-controls {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.tool-scale {
  display: flex;
  gap: 10px;
  align-items: center;
}

.tool-scale select {
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #2a2a2a;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}

/* 状态消息 */
.tool-status {
  display: none;
  text-align: center;
  padding: 10px;
  border-radius: 4px;
}

.tool-status.visible {
  display: block;
}

.tool-status-error {
  background-color: #ffdddd;
  color: #cc0000;
}

.tool-status-success {
  background-color: #ddffdd;
  color: #00cc00;
}

.tool-status-info {
  background-color: #ddddff;
  color: #0000cc;
}