/* ============================================================
   像素编辑器 UI — 依设计系统:克制的输入、张扬的焦点、胶囊按钮
   ============================================================ */
.pe-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr);
  gap: var(--space-6);
  align-items: start;
}

/* 画布外壳 */
.pe-board-shell {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-4);
  position: sticky;
  top: 76px;
}
.pe-board {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  display: block;
  image-rendering: pixelated;
  border-radius: var(--radius-sm);
  cursor: crosshair;
  touch-action: none; /* 触屏画布上禁止滚动干扰 */
}

/* 工具面板 */
.pe-panel {
  display: grid;
  gap: var(--space-5);
}
.pe-group-label {
  font: 600 var(--fs-caption)/1 var(--font-body);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

/* 工具按钮组 */
.pe-tools {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.pe-tool {
  font: 600 var(--fs-body-sm)/1 var(--font-body);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--color-border-default);
  background: var(--color-bg-page);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all 0.12s ease;
}
.pe-tool:hover { border-color: var(--color-border-strong); color: var(--color-text-strong); }
.pe-tool.is-active {
  background: var(--color-brand-ink);
  border-color: var(--color-brand-ink);
  color: var(--color-text-inverse);
}
.pe-tool:disabled { opacity: 0.4; cursor: not-allowed; }

/* 调色板 */
.pe-palette {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));
  gap: var(--space-2);
}
.pe-swatch {
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--radius-xs);
  border: 2px solid var(--color-border-subtle);
  cursor: pointer;
  transition: transform 0.1s ease, border-color 0.1s ease;
}
.pe-swatch:hover { transform: scale(1.1); }
.pe-swatch.is-active { border-color: var(--color-brand-coral); box-shadow: var(--shadow-glow-coral); }
.pe-custom-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.pe-custom-color {
  width: 44px;
  height: 34px;
  padding: 2px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-xs);
  background: var(--color-bg-page);
  cursor: pointer;
}

/* 动作按钮行 */
.pe-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* 展示画廊(首页示例角色) */
.pe-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-4);
}
.pe-gallery canvas {
  width: 100%;
  aspect-ratio: 1;
  image-rendering: pixelated;
  border-radius: var(--radius-md);
  background: var(--color-bg-soft);
}

/* 广告容器 */
.ad-slot {
  min-height: 0;
  margin-block: var(--space-8);
}

@media (max-width: 860px) {
  .pe-wrap { grid-template-columns: 1fr; }
  .pe-board-shell { position: static; }
}