/* ====== GoGoGong 图片裁剪 — 工具专属样式 ====== */

/* ----- 工具描述 + FAQ 宽度 ----- */
.tool-header .tool-desc {
  max-width: none;
}

.faq-section {
  max-width: none;
}

/* ----- 上传区域 ----- */
.upload-zone {
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--duration-normal) var(--ease-default),
              background-color var(--duration-normal) var(--ease-default);
  background: var(--color-surface);
}

.upload-zone:hover,
.upload-zone.drag-over {
  border-color: var(--color-primary);
  background: var(--color-primary-bg);
}

.upload-placeholder {
  padding: var(--space-6) var(--space-6);
  text-align: center;
  pointer-events: none;
}

.upload-placeholder-icon {
  width: 48px;
  height: 48px;
  color: var(--color-text-muted);
}

.upload-placeholder-text {
  color: var(--color-text-secondary);
  font-size: var(--text-base);
  margin-top: var(--space-3);
}

.upload-placeholder-hint {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
}

/* ----- 参数面板 ----- */
.options-panel {
  margin-top: var(--space-6);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  background: var(--color-surface);
  border-top: 1px solid var(--color-border-light);
  border-bottom: 1px solid var(--color-border-light);
}

.options-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}

/* 比例 + 预设：非对称分栏，比例占主体，预设为紧凑快捷入口 */
.options-split-ratio {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-6);
  align-items: start;
}

.form-group-preset {
  min-width: 220px;
}

.form-group-preset select {
  width: 100%;
}

.preset-label-hint {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: 400;
  margin-left: var(--space-2);
}

.form-group-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.form-group-row input[type="range"] {
  flex: 1;
  min-width: 0;
}

.form-group-row input[type="number"] {
  width: 120px;
}

.slider-value {
  display: inline-block;
  min-width: 28px;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.form-hint {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.radio-group {
  display: flex;
  gap: var(--space-4);
  align-items: center;
}

.radio-group .png-note {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-left: var(--space-1);
}

.batch-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.batch-btns {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.batch-stats {
  display: flex;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

/* ----- 比例按钮栏 ----- */
.ratio-bar {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* ----- 变换按钮栏 ----- */
.transform-bar {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* ----- 裁剪工作区 ----- */
.crop-workspace {
  margin-top: var(--space-4);
  text-align: center;
}

.crop-canvas-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  min-height: 300px;
  max-height: 600px;
  overflow: hidden;
  position: relative;
}

.crop-canvas-wrap canvas {
  display: block;
  cursor: crosshair;
  /* Canvas 尺寸由 JS 动态设置 */
}

.crop-info-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
}

/* ----- 切片预览 ----- */
.slices-preview {
  margin-top: var(--space-6);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
}

.slices-label {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-3);
}

.slices-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}

.slice-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-card);
}

.slice-item img {
  display: block;
  max-width: 100%;
  max-height: 200px;
  object-fit: contain;
  background-image:
    repeating-conic-gradient(var(--color-bg-secondary) 0% 25%, transparent 0% 50%);
  background-size: 16px 16px;
}

@media (prefers-color-scheme: dark) {
  .slice-item img {
    background-image:
      repeating-conic-gradient(rgba(255, 255, 255, 0.05) 0% 25%, transparent 0% 50%);
  }
}

.slice-item .slice-meta {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  padding: 2px var(--space-2);
  text-align: center;
  font-family: var(--font-mono);
}

/* ----- 切片输入行 ----- */
.slice-input-row {
  gap: var(--space-2);
}

.slice-label {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.form-group-row input.slice-num-input {
  width: 60px;
}

/* ----- 自定义比例输入 ----- */
.custom-ratio-row {
  margin-top: var(--space-2);
  gap: var(--space-2);
}

.custom-ratio-sep {
  color: var(--color-text-muted);
  font-weight: 500;
}

/* ----- 参考线模式切换 ----- */
.grid-mode-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.grid-mode-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* ----- 裁剪信息栏 + 缩放控件 ----- */

.zoom-controls {
  display: flex;
  align-items: center;
  gap: 2px;
}

.zoom-value {
  display: inline-block;
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
  min-width: 40px;
  text-align: center;
}

/* ====== 响应式 ====== */
@media (max-width: 700px) {
  .options-split,
  .options-split-ratio {
    grid-template-columns: 1fr;
  }

  .batch-actions {
    flex-direction: column;
  }

  .radio-group {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  .crop-canvas-wrap {
    max-height: 400px;
  }

  .ratio-bar {
    gap: var(--space-1);
  }
}