/* === 拖拽编辑器（Phase 3 自由布局） === */
/* 与剪纸编辑器同构：SVG viewBox mm 坐标系 + mouse/touch 拖拽 */

.ff-editor {
  position: relative;
  background: #FFF8F0;
  border: 1px solid #D4CFC2;
  border-radius: 8px;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

.ff-editor__canvas {
  display: block;
  width: 100%;
  background: white;
}

/* 元素基础样式 */
.ff-el {
  cursor: grab;
  transition: filter 0.15s;
}
.ff-el:hover {
  filter: brightness(0.95);
}
.ff-el.dragging {
  cursor: grabbing;
  filter: brightness(0.9);
  opacity: 0.85;
}

/* 选中框 */
.ff-select-box {
  fill: none;
  stroke: #5B7A5B;
  stroke-width: 0.5;
  stroke-dasharray: 2,1;
  pointer-events: none;
}

/* 缩放手柄 */
.ff-handle {
  fill: white;
  stroke: #5B7A5B;
  stroke-width: 0.3;
  cursor: nwse-resize;
  r: 2;
}
.ff-handle--tl, .ff-handle--br { cursor: nwse-resize; }
.ff-handle--tr, .ff-handle--bl { cursor: nesw-resize; }

/* 旋转手柄 */
.ff-rotate-handle {
  fill: #5B7A5B;
  cursor: grab;
  r: 1.5;
}
.ff-rotate-line {
  stroke: #5B7A5B;
  stroke-width: 0.3;
  stroke-dasharray: 1,0.5;
}

/* 删除按钮 */
.ff-delete-btn {
  fill: #e74c3c;
  cursor: pointer;
  r: 3.5;
  stroke: white;
  stroke-width: 0.5;
}
.ff-delete-btn:hover { fill: #c0392b; r: 4; }
.ff-delete-icon {
  fill: white;
  font-size: 5px;
  font-weight: bold;
  pointer-events: none;
  text-anchor: middle;
  dominant-baseline: central;
}

/* 工具栏 */
.ff-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #F5F0EB;
  border-top: 1px solid #E8E4DB;
  flex-wrap: wrap;
}
.ff-toolbar__btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 1px solid #D4CFC2;
  border-radius: 6px;
  background: white;
  font-size: 13px;
  color: #5B4A3A;
  cursor: pointer;
  transition: all 0.15s;
}
.ff-toolbar__btn:hover {
  background: #F0F5EE;
  border-color: #5B7A5B;
  color: #3A5B3A;
}
.ff-toolbar__btn.active {
  background: #5B7A5B;
  color: white;
  border-color: #5B7A5B;
}

.ff-toolbar__sep {
  width: 1px;
  height: 20px;
  background: #D4CFC2;
}

/* 文字属性面板 */
.ff-text-props {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ff-text-props select,
.ff-text-props input {
  font-size: 12px;
  padding: 3px 6px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

/* 状态提示 */
.ff-status {
  font-size: 11px;
  color: #8C8C8C;
  text-align: center;
  padding: 4px 0;
}

/* 图层面板 */
.ff-layers {
  border-top: 1px solid #E8E4DB;
  max-height: 120px;
  overflow-y: auto;
  background: #FAFAF5;
}
.ff-layer-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 12px;
  color: #5B4A3A;
  cursor: pointer;
  border-bottom: 1px solid #F0ECE5;
}
.ff-layer-item:hover { background: #F0F5EE; }
.ff-layer-item.active { background: #E8F0E5; font-weight: 500; }
.ff-layer-icon { font-size: 14px; }
.ff-layer-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ff-layer-btn {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 12px;
  color: #999;
  padding: 0 2px;
}
.ff-layer-btn:hover { color: #e74c3c; }

/* === 移动端底部操作栏 === */
.ff-actionbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
  background: #FFF8F0;
  border-top: 1px solid #E8E4DB;
  z-index: 10;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.ff-actionbar__btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 52px;
  padding: 6px 4px;
  border: 1px solid #D4CFC2;
  border-radius: 8px;
  background: white;
  font-size: 11px;
  color: #5B4A3A;
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}
.ff-actionbar__btn:active {
  background: #F0F5EE;
  border-color: #5B7A5B;
  color: #3A5B3A;
}

/* === 控制面板（旋转/缩放/文字编辑） === */
.ff-control-panel {
  position: fixed;
  bottom: calc(60px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  width: min(340px, 90vw);
  background: #FFF;
  border: 1px solid #E8E4DB;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
  z-index: 20;
  padding: 14px 16px;
}
.ff-control-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 600;
  color: #5B4A3A;
}
.ff-control-panel__value {
  font-weight: 400;
  color: #5B7A5B;
  margin-left: 8px;
}
.ff-control-panel__close {
  border: none;
  background: none;
  font-size: 16px;
  color: #999;
  cursor: pointer;
  padding: 0 4px;
}
.ff-control-panel__close:hover { color: #e74c3c; }
.ff-control-panel__slider {
  width: 100%;
  margin: 8px 0;
  accent-color: #5B7A5B;
}
.ff-control-panel__presets {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.ff-control-panel__presets button {
  padding: 4px 10px;
  border: 1px solid #D4CFC2;
  border-radius: 6px;
  background: #F5F0EB;
  font-size: 12px;
  color: #5B4A3A;
  cursor: pointer;
  transition: all 0.15s;
}
.ff-control-panel__presets button:hover {
  background: #5B7A5B;
  color: white;
  border-color: #5B7A5B;
}

/* 文字编辑输入区 */
.ff-text-edit-input {
  width: 100%;
  border: 1px solid #E8E4DB;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 14px;
  resize: vertical;
  margin-bottom: 8px;
}
.ff-text-edit-input:focus {
  outline: none;
  border-color: #5B7A5B;
}
.ff-text-edit-props {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.ff-text-edit-props select,
.ff-text-edit-props input[type="number"],
.ff-text-edit-props input[type="color"] {
  font-size: 12px;
  padding: 4px 6px;
  border: 1px solid #ddd;
  border-radius: 6px;
}

/* === 空画布提示 === */
.ff-empty-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 280px;
  padding: 40px 20px;
  text-align: center;
  color: #8C8C8C;
  background: #FAFAF5;
  border-radius: 12px;
}

/* === 移动端图层切换按钮 === */
.ff-layers-toggle {
  width: 44px;
  height: 44px;
  border: 1px solid #D4CFC2;
  border-radius: 10px;
  background: #FFF8F0;
  font-size: 20px;
  color: #5B4A3A;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.ff-layers-toggle:active {
  background: #F0F5EE;
}

/* 图层面板展开状态（移动端） */
.ff-layers.expanded {
  max-height: 220px;
  position: fixed;
  bottom: calc(60px + env(safe-area-inset-bottom, 0px));
  left: 8px;
  right: 8px;
  z-index: 9;
  border-radius: 12px 12px 0 0;
  border: 1px solid #E8E4DB;
  border-bottom: none;
  box-shadow: 0 -4px 16px rgba(0,0,0,0.08);
}

/* === 图片选择器 === */
.ff-image-picker__section {
  margin-bottom: 12px;
}
.ff-image-picker__title {
  font-size: 13px;
  font-weight: 600;
  color: #5B4A3A;
  margin-bottom: 8px;
}
.ff-image-picker__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.ff-image-picker__item {
  aspect-ratio: 1;
  border: 1px solid #E8E4DB;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.15s;
}
.ff-image-picker__item:hover {
  border-color: #5B7A5B;
  box-shadow: 0 0 0 2px rgba(91,122,91,0.2);
}
.ff-image-picker__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ff-image-picker__upload {
  min-height: 44px;
  font-size: 14px;
}

/* ══ 纹样选择面板 ══ */
.ff-tex-cat-btn {
  font-size: 12px; padding: 3px 10px; border-radius: 14px; cursor: pointer;
  border: 1px solid #E0DCD6; background: #FAFAF5; color: #666; transition: all .2s;
}
.ff-tex-cat-btn.active {
  background: #5B7A5B; color: #fff; border-color: #5B7A5B;
}
.ff-tex-cat-btn:hover:not(.active) {
  border-color: #8B7355; color: #5B4A3A;
}
.ff-tex-card:active {
  transform: scale(0.96);
}