/* ============================================================================
 * AI 产品编辑工作台 · 第二板块样式（.pe- 前缀，不污染第一板块）
 * ============================================================================*/

/* 侧边栏 Beta 徽标 */
.pe-beta {
  font-size: 0.67rem; padding: 1px 6px; border-radius: var(--radius-pill);
  background: var(--accent-amber-soft); color: var(--accent-amber);
}

/* 板块容器 */
.pe-board { padding: 12px 16px 24px; }
.pe-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 6px 2px 10px; }
.pe-title { margin: 0; font-size: 1.15rem; color: var(--text); }
.pe-cap-note { margin: 6px 0 0; font-size: 0.8rem; color: var(--muted); max-width: 64rem; }

/* 五个子菜单（设计书 5.1） */
.pe-submenu-btn {
  position: relative;
  border: 1px solid var(--line); background: var(--surface); color: var(--text);
  border-radius: var(--radius-pill); padding: 4px 12px; font-size: 0.78rem; cursor: pointer;
  transition: all .15s;
}
.pe-submenu-btn:hover { border-color: var(--brand); color: var(--text); }
.pe-submenu-btn.active { color: #fff; background: var(--brand-gradient); border-color: transparent; font-weight: 700; }
.pe-soon {
  position: absolute; top: -8px; right: -6px; font-size: 0.6rem; font-weight: 400;
  background: var(--accent-amber); color: #fff; border-radius: var(--radius-pill); padding: 0 6px;
  line-height: 1.5; white-space: nowrap;
}

/* 三段式布局（左 240px+ / 中 320px+ / 右 260px+；1100px 以下折叠单列） */
.pe-panel { display: grid; gap: 0; }
.pe-layout-3col {
  display: grid; grid-template-columns: minmax(240px, .9fr) minmax(320px, 1.5fr) minmax(260px, 1fr);
  gap: 14px; align-items: start;
}
.pe-col { display: grid; gap: 12px; min-width: 0; }

/* 字段块 */
.pe-field {
  border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius-card);
  padding: 10px 12px; display: grid; gap: 8px;
}
.pe-field-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.pe-field-label { font-size: 0.9rem; font-weight: 700; color: var(--text); }
.pe-field-hint { font-size: 0.75rem; color: var(--muted); }
.pe-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pe-label { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--muted); }
.pe-note { font-size: 0.75rem; color: var(--accent-amber); margin: 0; }

/* 上传（单图） */
.pe-upload { display: grid; gap: 8px; }
.pe-drop {
  border: 1px dashed var(--line); border-radius: var(--radius);
  background: var(--surface-2); color: var(--muted);
  padding: 14px 12px; text-align: center; font-size: 0.82rem; cursor: pointer;
}
.pe-drop:hover, .pe-drop.dragging { border-color: var(--brand); color: var(--text); background: var(--brand-soft); }
.pe-thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.pe-thumb-item { position: relative; width: 64px; height: 64px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.pe-thumb-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pe-thumb-remove {
  position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; line-height: 15px;
  border: none; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff;
  font-size: 0.68rem; cursor: pointer; padding: 0;
}
.pe-tool-btn {
  border: 1px solid var(--line); background: var(--surface); color: var(--muted);
  border-radius: var(--radius); padding: 6px 4px; font-size: 0.78rem; cursor: pointer;
  display: grid; gap: 1px; justify-items: center;
}
.pe-tool-btn small { font-size: 0.62rem; color: var(--muted); }
.pe-tool-btn:hover { border-color: var(--brand); }
.pe-op-btn {
  border: 1px solid var(--line); background: var(--surface); color: var(--text);
  border-radius: var(--radius-pill); padding: 4px 12px; font-size: 0.78rem; cursor: pointer;
}
.pe-op-btn:hover:not(:disabled) { border-color: var(--brand); }
.pe-op-btn:disabled { opacity: .45; cursor: not-allowed; }
.pe-op-btn.active { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-strong); font-weight: 700; }
.pe-op-btn.ghost { color: var(--muted); }
.pe-toolbar-sep { width: 1px; height: 18px; background: var(--line); margin: 0 2px; }

/* 编辑状态 */
.pe-edit-status { font-size: 0.8rem; color: var(--muted); line-height: 1.5; }
.pe-edit-status b { color: var(--text); }
.pe-edit-status .ok { color: var(--accent-emerald); font-weight: 700; }

/* 画布 */
.pe-canvas-wrap {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface-2); overflow: hidden;
}
.pe-canvas { display: block; max-width: 100%; cursor: crosshair; touch-action: none; }
.pe-canvas-hint { font-size: 0.75rem; color: var(--muted); margin: 6px 0 0; }

/* 标注列表（1-8 编号） */
.pe-ann-list { display: grid; gap: 6px; }
.pe-ann-item {
  display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2);
  padding: 6px 8px;
}
.pe-ann-num {
  width: 20px; height: 20px; border-radius: 50%; flex: none;
  background: var(--brand); color: #fff; font-size: 0.72rem; font-weight: 700;
  display: grid; align-items: center; justify-items: center;
}
.pe-ann-text { font-size: 0.82rem; color: var(--text); word-break: break-all; }
.pe-ann-remove:hover { color: var(--danger); }

/* 快捷建议（上下文分组 chip） */
.pe-suggest { display: flex; flex-wrap: wrap; gap: 6px; }
.pe-suggest-chip {
  border: 1px solid var(--line); background: var(--surface); color: var(--muted);
  border-radius: var(--radius-pill); padding: 4px 12px; font-size: 0.78rem; cursor: pointer;
}
.pe-suggest-chip:hover { border-color: var(--brand); color: var(--text); }
.pe-suggest-chip.active { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-strong); }
.pe-suggest-hint { font-size: 0.72rem; color: var(--muted); width: 100%; }

/* 诚实能力说明 */
.pe-capability-note {
  border: 1px solid var(--line); border-left: 3px solid var(--accent-amber);
  background: var(--accent-amber-soft); border-radius: var(--radius);
  padding: 8px 10px; font-size: 0.78rem; color: var(--text);
}

/* 占位子菜单页（设计书 5.1：低干扰“开发中”） */
.pe-placeholder {
  border: 1px dashed var(--line); border-radius: var(--radius-card);
  background: var(--surface); padding: 42px 24px; text-align: center; display: grid;
  justify-items: center; gap: 8px; color: var(--muted);
}
.pe-placeholder-icon { font-size: 2rem; }
.pe-placeholder h3 { margin: 0; font-size: 1.05rem; color: var(--text); }
.pe-placeholder p { margin: 0; font-size: 0.84rem; max-width: 30rem; }

/* 输入 */
.pe-input {
  border: 1px solid var(--line); background: var(--surface); color: var(--text);
  border-radius: var(--radius); padding: 4px 8px; font-size: 0.84rem;
}

/* 勾选组（chip 风格，保留给后续子模块） */
.pe-check-group { display: flex; gap: 6px; flex-wrap: wrap; }
.pe-check {
  border: 1px solid var(--line); background: var(--surface); color: var(--muted);
  border-radius: var(--radius-pill); padding: 3px 10px; font-size: 0.78rem; cursor: pointer;
}
.pe-check:hover { border-color: var(--brand); }
.pe-check.active { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-strong); }

/* 按钮 */
.pe-btn {
  border: 1px solid var(--brand); background: var(--brand); color: #fff;
  border-radius: var(--radius); padding: 5px 14px; font-size: 0.84rem; cursor: pointer;
}
.pe-btn:disabled { opacity: .45; cursor: not-allowed; }
.pe-btn.ghost { background: var(--surface); color: var(--brand-strong); border-color: var(--line); }
.pe-btn.ghost:hover { border-color: var(--brand); }

/* 生成行 */
.pe-generate-row { display: grid; gap: 8px; }
.pe-gen-controls { display: flex; gap: 10px; flex-wrap: wrap; }
.pe-generate-btn {
  border: none; background: var(--brand-gradient); color: #fff;
  border-radius: var(--radius); padding: 9px 16px; font-size: 0.95rem; font-weight: 700; cursor: pointer;
}
.pe-generate-btn:disabled { opacity: .5; cursor: not-allowed; }

/* 结果与进度 */
.pe-progress { font-size: 0.8rem; color: var(--muted); min-height: 1.2em; }
.pe-progress.err { color: var(--danger); }
.pe-result { display: grid; gap: 8px; }
.pe-result img { max-width: 100%; border-radius: var(--radius); border: 1px solid var(--line); }

/* 版本链 */
.pe-versions { margin-top: 16px; }
.pe-subtitle { font-size: 1rem; color: var(--text); margin: 0 0 8px; }
.pe-version-count { font-size: 0.78rem; color: var(--muted); font-weight: 400; }
.pe-version-list {
  display: grid;
  gap: 8px;
  /* 版本较多时出现纵向滚动条（约 6-7 张后开始滚动） */
  max-height: 620px;
  overflow-y: auto;
  padding-right: 6px;
}
.pe-version-card {
  display: flex; gap: 12px; border: 1px solid var(--line); background: var(--surface);
  border-radius: var(--radius-card); padding: 10px 12px;
}
.pe-v-thumb { width: 74px; height: 74px; border-radius: var(--radius); object-fit: cover; border: 1px solid var(--line); flex: none; cursor: zoom-in; }
.pe-v-info { min-width: 0; display: grid; gap: 4px; flex: 1; }
.pe-v-summary { font-size: 0.85rem; color: var(--text); word-break: break-all; }
.pe-v-meta { font-size: 0.73rem; color: var(--muted); display: flex; gap: 8px; flex-wrap: wrap; }
.pe-v-flag { font-size: 0.68rem; padding: 1px 8px; border-radius: var(--radius-pill); border: 1px solid var(--line); color: var(--muted); cursor: pointer; background: var(--surface); }
.pe-v-flag.on-developable { border-color: var(--accent-emerald); color: var(--accent-emerald); background: var(--accent-emerald-soft); }
.pe-v-flag.on-inspiration { border-color: var(--accent-amber); color: var(--accent-amber); background: var(--accent-amber-soft); }
.pe-v-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.pe-v-action {
  border: 1px solid var(--line); background: var(--surface); color: var(--brand-strong);
  border-radius: var(--radius); padding: 3px 10px; font-size: 0.76rem; cursor: pointer;
}
.pe-v-action:hover { border-color: var(--brand); }
.pe-v-action.primary { background: var(--brand); color: #fff; border-color: var(--brand); }
/* 版本卡片：4 个生成出口按钮（生成产品摄影图 / 电商主图 / 详情页 / 套图） */
.pe-v-gen-group { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.pe-v-gen {
  border: 1px solid var(--line); background: var(--surface); color: var(--brand-strong);
  border-radius: var(--radius); padding: 3px 10px; font-size: 0.72rem; cursor: pointer;
}
.pe-v-gen:hover { border-color: var(--brand); }
.pe-v-mode-badge {
  font-size: 0.68rem; padding: 1px 8px; border-radius: var(--radius-pill);
  border: 1px solid var(--line); color: var(--muted); background: var(--surface-2);
}

/* 并排对比浮层 */
.pe-compare-overlay {
  position: fixed; inset: 0; z-index: 300; background: rgba(15, 23, 42, .8);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
}
.pe-compare-box { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; justify-content: center; padding: 10px; }
.pe-compare-box figure { margin: 0; display: grid; gap: 4px; text-align: center; }
.pe-compare-box img { max-height: 72vh; max-width: 44vw; border-radius: var(--radius); border: 2px solid var(--surface); }
.pe-compare-box figcaption { color: #d1d5db; font-size: 0.78rem; }
.pe-compare-close {
  border: 1px solid rgba(255, 255, 255, .4); background: transparent; color: #fff;
  border-radius: var(--radius-pill); padding: 5px 16px; cursor: pointer; font-size: 0.84rem;
}

/* 窄屏：三段式折叠为单列（设计书 5.2：上传工具 → 画布 → 描述 → 生成） */
@media (max-width: 1100px) {
  .pe-layout-3col { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .pe-compare-box img { max-width: 92vw; max-height: 40vh; }
}

/* V3.2 · Apple-style image editing studio */
.pe-studio-layout {
  grid-template-columns: minmax(230px, 0.82fr) minmax(430px, 1.8fr) minmax(240px, 0.88fr);
  gap: 16px;
  min-height: 650px;
}

.pe-studio-left,
.pe-studio-right { align-content: start; }

.pe-studio-center {
  min-width: 0;
  min-height: 650px;
}

.pe-drop {
  min-height: 168px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 6px;
}

.pe-drop strong { color: var(--text); font-size: 0.88rem; font-weight: 650; }
.pe-drop small { color: var(--muted); font-size: 0.72rem; line-height: 1.6; }
.pe-drop-icon { width: 34px; height: 34px; }

.pe-prompt-input { min-height: 154px; line-height: 1.65; }

/* P0-四整改：文字输入框降级 —— 快捷建议已是主入口，输入框变矮、退居次要 */
#peGlobalDesc { min-height: 52px; font-size: 12.5px; }

.pe-studio-generate {
  margin-top: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  padding: 12px;
}

.pe-studio-generate .pe-gen-controls {
  display: grid;
  grid-template-columns: 1fr;
}

.pe-studio-generate .pe-label {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
}

.pe-canvas-stage {
  position: relative;
  /* P0-四整改：舞台高度交给 studio 网格行（minmax(460px,1fr)），自身不参与内容撑高，避免挤掉下方快捷面板 */
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background-color: var(--surface-2);
  background-image: radial-gradient(circle, color-mix(in srgb, var(--muted) 22%, transparent) 1px, transparent 1px);
  background-size: 18px 18px;
}

.pe-canvas-wrap {
  width: min(82%, 760px);
  min-height: 360px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 16px 44px rgba(26, 40, 61, 0.10);
}

.pe-canvas {
  width: 100%;
  max-height: 510px;
  object-fit: contain;
  top: 50%;
  transform: translateY(-50%);
}
.pe-toolbar-vertical {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 5px;
}

.pe-toolbar-vertical .pe-tool-btn {
  width: 42px;
  height: 42px;
  min-height: 42px;
  padding: 0;
  display: grid;
  place-items: center;
}

.pe-canvas-actions {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 5px;
  white-space: nowrap;
}

.pe-canvas-actions .pe-op-btn {
  border: 0;
  background: transparent;
}

.pe-canvas-actions .pe-op-btn.danger { color: var(--danger); }

.pe-mode-segment {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface-2);
}

.pe-mode-segment .pe-op-btn {
  min-height: 34px;
  border: 0;
  border-radius: 8px;
  background: transparent;
}

.pe-mode-segment .pe-op-btn.active {
  background: var(--surface);
  box-shadow: 0 1px 5px rgba(20, 32, 51, 0.10);
}

@media (max-width: 1220px) {
  .pe-studio-layout { grid-template-columns: minmax(220px, .8fr) minmax(390px, 1.5fr) minmax(220px, .82fr); gap: 10px; }
  .pe-board { padding-inline: 12px; }
  .pe-canvas-wrap { width: 80%; }
}

@media (max-width: 1040px) {
  .pe-studio-layout { grid-template-columns: minmax(220px, .8fr) minmax(420px, 1.5fr); }
  .pe-studio-right { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .pe-studio-layout { grid-template-columns: 1fr; }
  .pe-studio-left,
  .pe-studio-center,
  .pe-studio-right { grid-column: auto; }
  .pe-studio-right { grid-template-columns: 1fr; }
  .pe-studio-center,
  .pe-canvas-stage { min-height: 420px; }
  .pe-canvas-wrap { width: calc(100% - 84px); }
}

/* V4 · AI Native local editor: canvas first, controls on demand */
.pe-ai-studio {
  display: grid;
  /* P0-四整改：画布行最低 420px，让位给快捷建议面板，保证面板首屏可见 */
  grid-template-rows: auto minmax(420px, 1fr) auto auto auto;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  overflow: hidden;
}

.pe-editor-topbar,
.pe-topbar-group,
.pe-prompt-dock,
.pe-compact-settings {
  display: flex;
  align-items: center;
  min-width: 0;
}

.pe-editor-topbar {
  justify-content: space-between;
  gap: 8px;
  min-height: 44px;
  padding: 5px 8px;
  border: 1px solid var(--glass-edge, var(--line));
  border-radius: 15px;
  background: var(--glass-regular, var(--surface));
  box-shadow: var(--glass-highlight, none), var(--glass-shadow-soft, 0 8px 24px rgba(20,32,51,.07));
  backdrop-filter: blur(24px) saturate(1.25);
}

.pe-topbar-group { gap: 3px; }
.pe-topbar-end { margin-left: auto; }

.pe-icon-btn,
.pe-text-btn {
  border: 0;
  color: var(--text);
  background: transparent;
  cursor: pointer;
}

.pe-icon-btn {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  font-size: 18px;
}

.pe-text-btn {
  min-height: 34px;
  padding: 0 11px;
  border-radius: 10px;
  white-space: nowrap;
}

.pe-icon-btn:hover:not(:disabled),
.pe-text-btn:hover:not(:disabled),
.pe-text-btn.active,
.pe-icon-btn.active { background: var(--apple-control-bg, var(--surface-2)); color: var(--apple-blue, var(--accent)); }
.pe-icon-btn:disabled,
.pe-text-btn:disabled { opacity: .36; cursor: default; }
.pe-text-btn.danger { color: var(--danger); }
.pe-zoom-label { min-width: 45px; color: var(--muted); text-align: center; font-size: .78rem; }

.pe-ai-studio .pe-canvas-stage {
  /* P0-四整改：舞台高度让位给快捷建议面板/版本条（100vh-500 ≈ 固定占用 345 + 余量），保证全部首屏可见 */
  min-height: clamp(420px, calc(100vh - 500px), 760px);
  border-radius: 22px;
  overflow: hidden;
  isolation: isolate;
}

.pe-canvas-viewport {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  pointer-events: none;
}

.pe-canvas-viewport.has-image { pointer-events: auto; }

.pe-ai-studio .pe-canvas-wrap {
  position: relative;
  width: auto;
  min-width: 120px;
  min-height: 120px;
  max-width: calc(100% - 150px);
  max-height: calc(100% - 154px);
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 20px 60px rgba(20, 35, 55, .14);
  transform-origin: center;
  transition: box-shadow .2s ease;
  will-change: transform;
}

.pe-canvas-annotation-markers {
  position: absolute;
  inset: 1px;
  z-index: 4;
  pointer-events: none;
}
.pe-canvas-annotation-marker {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 6px;
  transform: translate(-12px, -50%);
  pointer-events: auto;
}
.pe-canvas-annotation-marker.is-right-edge {
  flex-direction: row-reverse;
  transform: translate(calc(-100% + 12px), -50%);
}
.pe-canvas-annotation-point {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border: 1.5px solid #fff;
  border-radius: 50%;
  background: #dc2626;
  box-shadow: 0 1px 7px rgba(0, 0, 0, .35);
  color: #fff;
  font: 700 11px/1 sans-serif;
  cursor: pointer;
}
.pe-canvas-annotation-cancel {
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  padding: 5px 9px;
  background: rgba(20, 28, 42, .94);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
  color: #fff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-3px);
  transition: opacity .14s ease, transform .14s ease;
  cursor: pointer;
}
.pe-canvas-annotation-marker:hover .pe-canvas-annotation-cancel,
.pe-canvas-annotation-marker:focus-within .pe-canvas-annotation-cancel {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}
.pe-canvas-annotation-cancel:hover { background: #b91c1c; }
.pe-canvas-annotation-marker.is-right-edge .pe-canvas-annotation-cancel {
  transform: translateX(3px);
}
.pe-canvas-annotation-marker.is-right-edge:hover .pe-canvas-annotation-cancel,
.pe-canvas-annotation-marker.is-right-edge:focus-within .pe-canvas-annotation-cancel {
  transform: translateX(0);
}

.pe-ai-studio .pe-canvas {
  position: static;
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100vh - 330px);
  transform: none;
  object-fit: contain;
  cursor: crosshair;
}

.pe-ai-studio .pe-toolbar-vertical {
  z-index: 8;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  border-radius: 18px;
}

.pe-ai-studio .pe-toolbar-vertical .pe-tool-btn {
  position: relative;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 13px;
  color: var(--muted);
  background: transparent;
}

.pe-ai-studio .pe-toolbar-vertical .pe-tool-btn::before { display: none; }
.pe-ai-studio .pe-toolbar-vertical .pe-tool-btn span { display: block; font-size: 11px; font-weight: 650; line-height: 1; }
.pe-ai-studio .pe-toolbar-vertical .pe-tool-btn.active { color: var(--apple-blue, var(--accent)); background: color-mix(in srgb, var(--apple-blue, var(--accent)) 12%, var(--surface)); }

.pe-context-bar {
  position: absolute;
  z-index: 8;
  left: 82px;
  top: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 104px);
  padding: 6px;
  border: 1px solid var(--glass-edge, var(--line));
  border-radius: 15px;
  background: var(--glass-regular, var(--surface));
  box-shadow: var(--glass-highlight, none), var(--glass-shadow-soft, 0 8px 24px rgba(20,32,51,.07));
  backdrop-filter: blur(22px) saturate(1.2);
}

.pe-range-control { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: .72rem; white-space: nowrap; }
.pe-range-control input { width: 92px; accent-color: var(--apple-blue, var(--accent)); }
.pe-range-control output { min-width: 22px; text-align: right; color: var(--text); }
.pe-context-bar .pe-mode-segment { display: flex; min-width: 154px; }

.pe-upload-overlay {
  position: absolute;
  z-index: 6;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.pe-upload-overlay .pe-drop { width: min(420px, calc(100% - 120px)); min-height: 210px; pointer-events: auto; }
.pe-upload-overlay.has-image .pe-drop { display: none; }
.pe-upload-overlay.has-image .pe-thumbs,
.pe-thumbs {
  position: absolute !important;
  top: 18px !important;
  right: 18px !important;
  bottom: auto !important;
  left: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end;
  gap: 26px;
  width: auto !important;
  max-height: calc(100% - 36px);
  overflow-y: auto;
  overflow-x: visible;
  padding: 22px 6px 12px 6px;
  pointer-events: auto !important;
  z-index: 60 !important;
  scrollbar-width: none;
}
.pe-thumbs::-webkit-scrollbar {
  display: none;
}
.pe-upload-overlay.has-image .pe-thumb-item,
.pe-thumb-item {
  position: relative;
  width: 60px;
  height: 60px;
  flex: 0 0 60px;
  border-radius: 12px;
  background: var(--liquid-card, rgba(30, 36, 48, 0.85));
  border: 1.5px solid var(--liquid-border, rgba(255, 255, 255, 0.16));
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  cursor: pointer;
  transition: all .2s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: visible;
  box-sizing: border-box;
}
.pe-thumb-item:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.42);
  border-color: rgba(255, 255, 255, 0.38);
}
.pe-thumb-item.is-active {
  border-color: var(--apple-blue, #0071e3) !important;
  box-shadow: 0 0 0 2px var(--apple-blue, #0071e3), 0 8px 24px rgba(0, 113, 227, 0.4) !important;
}
.pe-upload-overlay.has-image .pe-thumb-item img,
.pe-thumb-item img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  object-fit: cover;
  display: block;
}

.pe-status-pill,
.pe-capability-float {
  position: absolute;
  z-index: 7;
  bottom: 16px;
  border: 1px solid var(--glass-edge, var(--line));
  background: var(--glass-regular, var(--surface));
  backdrop-filter: blur(18px);
}
.pe-status-pill { left: 16px; max-width: calc(100% - 100px); padding: 7px 10px; border-radius: 999px; color: var(--muted); font-size: .73rem; }
.pe-capability-float { right: 86px; max-width: 360px; padding: 7px 10px; border-radius: 12px; font-size: .67rem; opacity: .78; }

.pe-prompt-dock {
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--glass-edge, var(--line));
  border-radius: 18px;
  background: var(--glass-regular, var(--surface));
  box-shadow: var(--glass-highlight, none), var(--glass-shadow-soft, 0 10px 30px rgba(20,32,51,.08));
  backdrop-filter: blur(26px) saturate(1.25);
}

.pe-prompt-dock .pe-prompt-input {
  flex: 1 1 320px;
  min-width: 160px;
  min-height: 42px;
  max-height: 112px;
  padding: 10px 12px;
  resize: none;
  overflow-y: auto;
}

.pe-compact-settings { gap: 5px; flex: 0 1 auto; }
.pe-compact-settings .pe-select { width: auto; min-width: 76px; max-width: 150px; min-height: 38px; }
.pe-prompt-dock .pe-generate-btn { flex: 0 0 auto; min-width: 118px; min-height: 42px; }
.pe-progress-inline { min-height: 18px; padding: 0 10px; }

.pe-quick-panel { padding: 8px 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }

@media (max-width: 1180px) {
  .pe-ai-studio { grid-template-rows: auto minmax(400px, 1fr) auto auto auto; }
  .pe-editor-topbar { flex-wrap: wrap; }
  .pe-capability-float { display: none; }
  .pe-prompt-dock { flex-wrap: wrap; }
  .pe-prompt-dock .pe-prompt-input { flex-basis: calc(100% - 52px); }
  .pe-compact-settings { flex: 1 1 auto; }
}

@media (max-width: 760px) {
  .pe-ai-studio { padding: 8px; grid-template-rows: auto minmax(460px, 66vh) auto auto auto; }
  .pe-ai-studio .pe-canvas-stage { min-height: 0; }
  .pe-editor-topbar { justify-content: center; }
  .pe-topbar-end { width: 100%; justify-content: center; margin-left: 0; }
  .pe-ai-studio .pe-toolbar-vertical { left: 50%; top: auto; bottom: 12px; width: auto; flex-direction: row; transform: translateX(-50%); }
  .pe-context-bar { left: 10px; right: 10px; top: 10px; max-width: none; flex-wrap: wrap; justify-content: center; }
  .pe-range-control input { width: 72px; }
  .pe-ai-studio .pe-canvas-wrap { max-width: calc(100% - 28px); max-height: calc(100% - 170px); }
  .pe-ai-studio .pe-canvas { max-height: 48vh; }
  .pe-status-pill { display: none; }
  .pe-upload-overlay .pe-drop { width: calc(100% - 34px); }
  .pe-upload-overlay.has-image .pe-thumbs { top: 86px; right: 10px; bottom: auto; }
  .pe-compact-settings { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, minmax(64px, .45fr)); }
  .pe-compact-settings .pe-select { width: 100%; max-width: none; min-width: 0; }
  .pe-prompt-dock .pe-generate-btn { flex: 1 1 100%; }
}

@media (max-width: 460px) {
  .pe-zoom-group .pe-text-btn { display: none; }
  .pe-ai-studio .pe-toolbar-vertical .pe-tool-btn { width: 38px; height: 38px; }
  .pe-context-bar .pe-mode-segment { min-width: 138px; }
  .pe-range-control { flex: 1 1 120px; justify-content: center; }
}

/* ---------- 图片素材库（画布右上角） ---------- */

.pe-material-btn {
  position: absolute;
  z-index: 9;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--glass-edge);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ui-text);
  background: var(--glass-regular);
  box-shadow: var(--glass-highlight), var(--glass-shadow-soft);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.pe-prompt-dock .pe-material-btn,
.pe-prompt-dock #peMaterialBtn {
  position: static !important;
  top: auto !important;
  right: auto !important;
  z-index: auto !important;
  box-shadow: none !important;
}
.pe-material-btn:hover { border-color: color-mix(in srgb, var(--apple-blue) 55%, var(--glass-edge)); color: var(--apple-blue); }
.pe-material-btn[aria-expanded="true"] { border-color: var(--apple-blue); color: var(--apple-blue); }
.pe-material-btn-icon {
  width: 15px;
  height: 15px;
  border: 1.5px solid currentColor;
  border-radius: 3.5px;
  position: relative;
}
.pe-material-btn-icon::before {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 1.5px;
  background:
    radial-gradient(circle at 30% 35%, currentColor 0 1.6px, transparent 1.7px),
    radial-gradient(circle at 68% 55%, currentColor 0 1.3px, transparent 1.4px),
    linear-gradient(135deg, transparent 0 45%, currentColor 45% 58%, transparent 58%);
  opacity: .85;
}
.pe-material-badge {
  min-width: 26px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  text-align: center;
  color: var(--ui-muted);
  background: var(--apple-control-bg);
}
.pe-material-btn.has-pool .pe-material-badge { color: var(--apple-blue); background: color-mix(in srgb, var(--apple-blue) 14%, transparent); }

.pe-material-panel {
  position: absolute;
  z-index: 10;
  top: 52px;
  right: 12px;
  width: min(320px, calc(100% - 100px));
  max-height: calc(100% - 64px);
  display: flex;
  flex-direction: column;
  padding: 12px;
  border: 1px solid var(--glass-edge);
  border-radius: 18px;
  background: var(--glass-regular);
  box-shadow: var(--glass-highlight), 0 18px 48px rgba(10, 20, 35, .3);
  -webkit-backdrop-filter: blur(26px) saturate(1.4);
  backdrop-filter: blur(26px) saturate(1.4);
  overflow-y: auto;
}
.pe-material-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.pe-material-head strong { font-size: 13.5px; }
.pe-material-add {
  flex: 0 0 auto;
  height: 28px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  color: #fff;
  background: var(--apple-blue);
  cursor: pointer;
}
.pe-material-add:hover { filter: brightness(1.08); }
.pe-material-hint { margin: 8px 0 10px; font-size: 11px; color: var(--ui-muted); line-height: 1.5; }
.pe-material-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.pe-material-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 7px;
  border: 1.5px solid var(--glass-edge);
  border-radius: 13px;
  background: var(--glass-regular);
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.pe-material-card:hover { border-color: color-mix(in srgb, var(--apple-blue) 45%, var(--glass-edge)); }
.pe-material-card.selected {
  border-color: var(--apple-blue);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--apple-blue) 22%, transparent);
}
.pe-material-card img { width: 100%; height: 74px; object-fit: cover; border-radius: 9px; background: #fff; }
.pe-material-num {
  position: absolute;
  top: 11px;
  left: 11px;
  min-width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  color: #fff;
  background: rgba(20, 30, 45, .62);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.pe-material-card.selected .pe-material-num { background: var(--apple-blue); }
.pe-material-name {
  font-size: 10px;
  color: var(--ui-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pe-material-desc {
  width: 100%;
  box-sizing: border-box;
  padding: 5px 7px;
  border: 1px solid var(--glass-edge);
  border-radius: 8px;
  font-size: 11px;
  color: var(--ui-text);
  background: var(--apple-control-bg);
  outline: none;
}
.pe-material-desc:focus { border-color: var(--apple-blue); }
.pe-material-intents {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.pe-material-intent {
  padding: 2.5px 8px;
  border: 1px solid var(--glass-edge);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  color: var(--ui-muted);
  background: transparent;
  cursor: pointer;
}
.pe-material-intent:hover { border-color: var(--apple-blue); color: var(--apple-blue); }
.pe-material-intent.on {
  color: #fff;
  background: var(--apple-blue);
  border-color: var(--apple-blue);
}
.pe-material-remove {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  font-size: 11px;
  color: #fff;
  background: rgba(20, 30, 45, .62);
  cursor: pointer;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.pe-material-remove:hover { background: #ff453a; }
.pe-material-empty { padding: 18px 6px; color: var(--ui-muted); font-size: 11.5px; text-align: center; line-height: 1.6; }

/* 已选素材预览条（编号 1-8） */
.pe-material-selected {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--glass-edge);
  overflow-x: auto;
}
.pe-material-sel {
  position: relative;
  flex: 0 0 auto;
  width: 54px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.pe-material-sel img { width: 54px; height: 54px; object-fit: cover; border-radius: 9px; background: #fff; }
.pe-material-sel-num {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: var(--apple-blue);
}
.pe-material-sel-x {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  font-size: 9px;
  color: #fff;
  background: rgba(20, 30, 45, .6);
  cursor: pointer;
}
.pe-material-sel-x:hover { background: #ff453a; }
.pe-material-sel-name {
  width: 100%;
  font-size: 9px;
  color: var(--ui-muted);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 配件库折叠区 */
.pe-material-parts { margin-top: 10px; border-top: 1px solid var(--glass-edge); padding-top: 10px; }
.pe-material-parts summary {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ui-muted);
  cursor: pointer;
  user-select: none;
}
.pe-material-parts summary:hover { color: var(--apple-blue); }
.pe-material-parts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 8px;
}
.pe-material-part {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  border: 1px solid var(--glass-edge);
  border-radius: 11px;
  background: var(--glass-regular);
  cursor: pointer;
}
.pe-material-part:hover { border-color: var(--apple-blue); }
.pe-material-part img { width: 100%; height: 64px; object-fit: cover; border-radius: 8px; background: #fff; }
.pe-material-part span {
  font-size: 9.5px;
  color: var(--ui-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- 笔刷圆形光标（跟随鼠标，大小 = 笔刷粗细） ---------- */

.pe-brush-cursor {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .95);
  box-shadow: 0 0 0 1px rgba(20, 30, 45, .45), 0 1px 4px rgba(20, 30, 45, .35);
  pointer-events: none;
  /* CSS 圆形天然抗锯齿：无锯齿边缘、无转折破边 */
}
.pe-canvas.brush-mode { cursor: none; }

/* ---------- 标注简略版（prompt 操作栏内） ---------- */

.pe-ann-brief {
  flex: 1 1 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 10px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--ui-text);
  background: color-mix(in srgb, var(--apple-blue) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--apple-blue) 30%, transparent);
}
.pe-ann-brief b { color: var(--apple-blue); font-weight: 700; }
.pe-ann-brief span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- 底部「＋ 图片」按钮（添加素材图） ---------- */

.pe-add-img-btn {
  flex: 0 0 auto;
  height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 0 11px;
  border: 1px solid var(--glass-edge);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ui-text);
  background: var(--apple-control-bg);
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.pe-add-img-btn:hover {
  color: var(--apple-blue);
  border-color: color-mix(in srgb, var(--apple-blue) 55%, var(--glass-edge));
  background: color-mix(in srgb, var(--apple-blue) 8%, var(--apple-control-bg));
}
.pe-add-img-plus { font-size: 15px; font-weight: 700; line-height: 1; }
.pe-add-img-label { white-space: nowrap; }