/* ============================================================
   通用捏人系统 样式
   - 中心一列布局，两边留白；竖屏移动端友好
   - 上半 = 预览区 + 顶栏；下半 = 标签 + 图片网格 / 编辑面板
   - 全部样式作用域在 .oc-creator 下，避免污染外部页面
   ============================================================ */

.oc-creator {
  --c-bg: #f4f4f4;
  --c-panel: #ffffff;
  --c-line: #e4e4e4;
  --c-text: #1f1f1f;
  --c-text-soft: #888888;
  --c-accent: #1f1f1f;
  --c-accent-soft: #ececec;
  --c-checker: #e8e8e8;
  --c-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
  --c-radius: 12px;
  --c-side: #e8e8e8;

  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  background: var(--c-side);
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  color: var(--c-text);
  font-size: 14px;
  line-height: 1.4;
  -webkit-tap-highlight-color: transparent;
}

.oc-creator.is-open { display: block; }

.oc-creator * { box-sizing: border-box; }

/* ==========================================================
   触屏行为统一（iOS / Android 神经操作一锅端）
   - touch-action: manipulation 禁双击放大，但保留 pan / pinch（grid 滚动不受影响）
   - text-size-adjust: 禁 iOS 横屏自动放大字号
   - tap-highlight-color: transparent 禁 iOS 点击灰色高亮 box
   - touch-callout: none 禁 iOS 长按弹"复制 / 查找"菜单
   - user-select: none 禁文字选中（输入框 / textarea / contenteditable 单独放开）
   ========================================================== */
.oc-creator {
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
.oc-creator * {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.oc-creator input,
.oc-creator textarea,
.oc-creator [contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

/* 中心列：手机全占，宽屏限 480px 居中 */
.oc-stage {
  position: absolute;
  inset: 0;
  margin: 0 auto;
  max-width: 480px;
  background: var(--c-bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ========== 顶部工具栏 ==========
   两行结构：上行 = 居中标题 + 右上关闭；下行 = 操作按钮 */
.oc-topbar {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--c-line);
  background: var(--c-panel);
}
.oc-topbar-title {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 28px;
}
.oc-topbar-title-text {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--c-text);
}
.oc-topbar-title-close {
  position: absolute;
  right: 0;
  top: -2px;
}
.oc-topbar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.oc-topbar-spacer {
  flex: 1 1 auto;
  min-width: 4px;
}
.oc-btn {
  flex: 0 0 auto;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--c-line);
  background: var(--c-panel);
  border-radius: 10px;
  color: var(--c-text);
  cursor: pointer;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  user-select: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.oc-btn:active { background: var(--c-accent-soft); }
.oc-btn[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}
.oc-btn.is-primary {
  background: var(--c-accent);
  color: #fff;
  border-color: var(--c-accent);
}
.oc-btn.is-icon {
  width: 36px;
  padding: 0;
  justify-content: center;
  color: var(--c-text);
}
.oc-btn.is-icon.is-primary { color: #fff; }
.oc-btn.is-close {
  border-color: transparent;
  background: transparent;
  color: var(--c-text-soft);
}
.oc-btn.is-close:active { background: var(--c-bg); }

/* SVG 图标统一尺寸 / 颜色 */
.oc-svg {
  display: inline-flex;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
}
.oc-svg svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ========== 预览区 ==========
   - .oc-preview = 整体容器，背景深灰 = "出画区"（1024 外的部分）
   - .oc-canvas-area = 1:1 居中区域 = 真正的画布范围（1024×1024 内）
   - 这样拖部件超出 1024 时，会从棋盘格区跑到深灰区，肉眼立刻看出"出画了"
   - container-type: size 让 canvas-area 用 100cqw/100cqh 取 preview 的"实际宽/高"
     （之前 width: min(100%,100%) 实际是 100%，aspect-ratio 被 max-height 打架失效，
      导致 canvas 被横拉成长方形，人物变形）*/
.oc-preview {
  flex: 0 0 auto;
  position: relative;
  width: 100%;
  height: min(45vh, 480px);
  background: #c8c8c8;
  overflow: hidden;
  container-type: size;
}
/* 画布区：1:1 居中，size = min(容器宽,高)；画布范围内是棋盘格 */
.oc-canvas-area {
  position: absolute;
  inset: 0;
  margin: auto;
  width: min(100cqw, 100cqh);
  height: min(100cqw, 100cqh);
  background:
    linear-gradient(45deg, var(--c-checker) 25%, transparent 25%),
    linear-gradient(-45deg, var(--c-checker) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--c-checker) 75%),
    linear-gradient(-45deg, transparent 75%, var(--c-checker) 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
  background-color: #fff;
  box-shadow: 0 0 0 2px var(--c-text), 0 4px 16px rgba(0, 0, 0, 0.18);
}
.oc-preview canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  /* 改回 fill：canvas 自身 1024×1024，CSS 容器也已经 1:1，不用 contain */
  object-fit: fill;
}

/* 预览区左侧：当前组已选部件小栏 */
.oc-stack {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 56px;
  max-height: calc(100% - 16px);
  background: rgba(255, 255, 255, 0.92);
  border-radius: 10px;
  border: 1px solid var(--c-line);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width 0.2s;
}
.oc-stack.is-collapsed { width: 28px; }
.oc-stack.is-empty { display: none; }

.oc-stack-toggle {
  flex: 0 0 auto;
  height: 24px;
  border: none;
  background: var(--c-accent-soft);
  cursor: pointer;
  font-size: 11px;
  color: var(--c-text-soft);
}
.oc-stack-list {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.oc-stack.is-collapsed .oc-stack-list { display: none; }
.oc-stack-item {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
}
.oc-stack-item.is-active {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 2px var(--c-accent);
}
.oc-stack-item .oc-thumb { width: 100%; height: 100%; }
.oc-stack-item .oc-stack-num {
  position: absolute;
  top: 1px;
  right: 2px;
  font-size: 10px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  border-radius: 4px;
  padding: 0 3px;
  line-height: 1.4;
}

/* 预览区右侧：操作按钮竖列（撤销/重做/随机/清空/编辑/完成） */
.oc-side-actions {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 5;
}
.oc-side-btn {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--c-line);
  cursor: pointer;
  color: var(--c-text);
  transition: background 0.15s, color 0.15s;
}
.oc-side-btn:active { background: var(--c-accent-soft); }
.oc-side-btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
.oc-side-btn .oc-svg { width: 18px; height: 18px; }
.oc-side-btn.is-on,
.oc-side-btn.is-primary {
  background: var(--c-accent);
  color: #fff;
  border-color: var(--c-accent);
}

/* ========== 下半区：标签 + 内容 ========== */
.oc-bottom {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  background: var(--c-panel);
  overflow: hidden;
  border-top: 1px solid var(--c-line);
}

/* 标签条横向滚动 - 纯图标，无文字 */
.oc-tabs {
  flex: 0 0 auto;
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding: 6px 8px;
  border-bottom: 1px solid var(--c-line);
  scrollbar-width: none;
}
.oc-tabs::-webkit-scrollbar { display: none; }
.oc-tab {
  flex: 0 0 auto;
  position: relative;
  width: 36px;
  height: 36px;
  border: 1px solid var(--c-line);
  background: var(--c-panel);
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px;
  box-sizing: border-box;
}
.oc-tab.is-active {
  background: var(--c-accent-soft);
  border-color: var(--c-accent);
  box-shadow: 0 0 0 1px var(--c-accent) inset;
}
.oc-tab .oc-tab-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.oc-tab .oc-tab-fallback {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--c-text-soft);
  opacity: 0.4;
}
.oc-tab .oc-tab-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--c-accent);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
  pointer-events: none;
  box-sizing: border-box;
}

/* 子标签条已废弃 —— meta/composite 子层已展平到主标签条同一排 */

/* ========== 自家 toast 弹层（替代系统 alert） ==========
   覆盖整个 stage，点遮罩或 × 或"知道了"都关 */
.oc-toast {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
  z-index: 50;
  padding: 24px;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.oc-toast.is-show { display: flex; }
.oc-toast-panel {
  position: relative;
  background: var(--c-panel);
  border-radius: 14px;
  padding: 28px 18px 16px;
  width: 100%;
  max-width: 320px;
  box-shadow: var(--c-shadow);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.oc-toast-close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--c-text-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}
.oc-toast-close:active { background: var(--c-bg); }
.oc-toast-close .oc-svg { width: 16px; height: 16px; }
.oc-toast-msg {
  font-size: 13px;
  line-height: 1.6;
  color: var(--c-text);
  white-space: pre-line;
}
.oc-toast-ok {
  align-self: stretch;
  text-align: center;
  justify-content: center;
}

/* ========== 预加载进度条 ==========
   覆盖整个创作弹窗内部，加载完才隐藏 → 主 UI 不会一闪一闪 */
.oc-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: var(--c-bg);
  z-index: 30;
  gap: 18px;
  padding: 24px;
}
.oc-loading-title {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--c-text);
  margin-bottom: 4px;
}
.oc-loading-text {
  font-size: 12px;
  color: var(--c-text-soft);
}
.oc-loading-bar {
  width: 240px;
  max-width: 70%;
  height: 6px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 3px;
  overflow: hidden;
}
.oc-loading-bar-inner {
  height: 100%;
  background: var(--c-accent);
  width: 0%;
  transition: width 0.18s ease-out;
  border-radius: 3px;
}

/* 网格区
   .oc-cell 用 padding-top trick 强制正方形 —— grid item 上的 aspect-ratio
   会脱离 grid row 高度计算导致 cell 实际高度溢出到下一行（上下重叠 15px） */
.oc-grid {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 8px 8px 32px;  /* 底部多留空间防最后一行被切 */
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  align-content: start;
}
.oc-cell {
  position: relative;
  height: 0;
  padding-top: 100%;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
}
.oc-cell.is-empty {
  background: var(--c-bg);
}
/* 深色背景 cell：用于白色 / 浅色素材（高光等）看不清的层 */
.oc-cell.is-dark {
  background: #2b2b2b;
}
/* 空 cell 用 × 叉（两条线交叉）而不是单斜杠 */
.oc-cell.is-empty::before,
.oc-cell.is-empty::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 32%;
  height: 2px;
  background: var(--c-text-soft);
  opacity: 0.4;
  border-radius: 1px;
}
.oc-cell.is-empty::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.oc-cell.is-empty::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.oc-cell.is-empty .oc-thumb { display: none; }
.oc-cell .oc-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.oc-thumb-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.oc-cell.is-selected {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 2px var(--c-accent-soft);
}
/* 必选 cell 不再显示"必"字标记 —— 宝宝不要 */
.oc-cell-num {
  position: absolute;
  top: 2px;
  right: 3px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--c-accent);
  color: #fff;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}
.oc-cell-plus {
  position: absolute;
  bottom: 2px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--c-accent);
  border: 1px solid var(--c-accent);
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}
.oc-cell.is-selected.is-multi .oc-cell-plus { display: flex; }

/* 缩略图（自动裁剪 bbox） */
.oc-thumb {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* ========== 编辑模式下半区 ========== */
.oc-editor {
  flex: 1 1 auto;
  display: none;
  flex-direction: column;
  overflow: hidden;
}
.oc-bottom.is-editing .oc-grid,
.oc-bottom.is-editing .oc-tabs,
.oc-bottom.is-editing .oc-subtabs { display: none; }
.oc-bottom.is-editing .oc-editor { display: flex; }

.oc-editor-header {
  flex: 0 0 auto;
  display: flex;
  gap: 4px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--c-line);
  background: var(--c-bg);
}
.oc-editor-tab {
  flex: 1 1 0;
  padding: 6px 8px;
  border-radius: 8px;
  text-align: center;
  font-size: 13px;
  color: var(--c-text-soft);
  cursor: pointer;
  border: 1px solid transparent;
}
.oc-editor-tab.is-active {
  background: var(--c-panel);
  color: var(--c-text);
  border-color: var(--c-line);
}

.oc-editor-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 10px;
}
.oc-editor-section { display: none; }
.oc-editor-section.is-active { display: block; }

.oc-editor-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.oc-editor-label {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--c-text-soft);
  width: 60px;
}

/* 渐变预设：一行 12 个紧凑小方条 */
.oc-grad-presets {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 3px;
}
.oc-grad-preset {
  position: relative;
  width: 100%;
  height: 18px;
  border-radius: 4px;
  border: 1px solid var(--c-line);
  cursor: pointer;
  overflow: hidden;
}
.oc-grad-preset.is-editing {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}
.oc-grad-preset.is-add {
  background: var(--c-bg);
  border-style: dashed;
  border-color: var(--c-text-soft);
}
/* 第一格"不上色"：棋盘格底（视觉表"透明 / 无色"）*/
.oc-grad-preset.is-cancel {
  background:
    linear-gradient(45deg, var(--c-checker) 25%, transparent 25%),
    linear-gradient(-45deg, var(--c-checker) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--c-checker) 75%),
    linear-gradient(-45deg, transparent 75%, var(--c-checker) 75%);
  background-size: 8px 8px;
  background-position: 0 0, 0 4px, 4px -4px, -4px 0;
  background-color: #fff;
}
/* 多选删除模式下被勾选的格子：黑色描边 + 选中标记色覆盖 */
.oc-grad-preset.is-multisel {
  outline: 2px solid var(--c-accent);
  outline-offset: 1px;
  box-shadow: inset 0 0 0 99px rgba(0, 0, 0, 0.35);
}
/* 标题行右侧的两按钮组（编辑 / 删除 / 完成 / 取消 等）*/
.oc-grad-header-btns {
  display: flex;
  gap: 4px;
  margin-left: auto;
}

/* 渐变覆盖区：渐变映射下方分隔，独立色板 + 方向按钮 */
.oc-overlay-section {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--c-line);
}
.oc-overlay-color-row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 3px;
  margin-bottom: 8px;
}
.oc-overlay-angle-row {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
}
.oc-overlay-angle-row .oc-btn {
  font-size: 16px;
  padding: 4px 0;
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1;
}

/* 用户保存的预设 / overlay 色，右上角 × 单击删 */
.oc-grad-preset .oc-preset-del {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 12px;
  height: 12px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  border-radius: 50%;
  font-size: 9px;
  line-height: 12px;
  text-align: center;
  cursor: pointer;
  z-index: 1;
}

/* 内嵌渐变编辑器（直接在颜色面板里展开，不开任何模态弹窗） */
.oc-grad-inline {
  margin-top: 12px;
  padding: 12px;
  background: var(--c-bg);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.oc-grad-bar {
  position: relative;
  width: 80%;
  margin: 0 auto;
  height: 44px;
  border-radius: 8px;
  border: 1px solid var(--c-line);
  cursor: pointer;
  overflow: visible;
}
.oc-grad-stop {
  position: absolute;
  top: -6px;
  width: 14px;
  height: 56px;
  margin-left: -7px;
  border: 2px solid #fff;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  z-index: 2;
}
.oc-grad-stop.is-selected {
  z-index: 3;
  box-shadow: 0 0 0 2px var(--c-accent);
}

/* 色环 + 当前色 */
.oc-color-picker-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.oc-hue-ring-wrap {
  flex: 0 0 auto;
}
.oc-hue-ring {
  position: relative;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    hsl(0,100%,50%), hsl(60,100%,50%), hsl(120,100%,50%),
    hsl(180,100%,50%), hsl(240,100%,50%), hsl(300,100%,50%), hsl(360,100%,50%));
  cursor: grab;
}
.oc-hue-ring:active { cursor: grabbing; }
.oc-hue-ring::before {
  content: "";
  position: absolute;
  left: 22px;
  top: 22px;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--c-panel);
}
.oc-hue-dot {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--c-text);
  z-index: 2;
  pointer-events: none;
}
.oc-grad-swatch-big {
  flex: 1 1 auto;
  height: 64px;
  border-radius: 10px;
  border: 1px solid var(--c-line);
}

.oc-light-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.oc-grad-edit-actions {
  display: flex;
  gap: 6px;
}
.oc-grad-edit-actions .oc-btn { flex: 1 1 0; }

/* stop 取色小悬浮窗：position:fixed 挂到 .oc-creator 下，按 stage rect 夹边
   （不用 window.innerWidth，否则桌面端会飞出 stage 跑到浅灰侧栏外）*/
.oc-color-pop {
  position: fixed;
  z-index: 10001;
  background: var(--c-panel);
  border: 1px solid var(--c-line);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
  width: 240px;
  box-sizing: border-box;
}
/* popup 内：ring 居中、滑块行紧凑布局（label 缩到 36px、滑块吃剩余空间）*/
.oc-color-pop .oc-color-picker-row {
  justify-content: center;
}
.oc-color-pop .oc-editor-label {
  width: 36px;
  font-size: 12px;
}
.oc-color-pop .oc-color-slider {
  min-width: 0;
}
.oc-color-pop > .oc-btn {
  width: 100%;
}
.oc-color-pop::after {
  /* 小三角指向 stop（向下时显示在 popup 底部）；
     左偏移由 JS 注入 --arrow-left 调整（夹边后让三角仍对准 stop 中心）*/
  content: "";
  position: absolute;
  bottom: -7px;
  left: var(--arrow-left, 50%);
  transform: translateX(-50%) rotate(45deg);
  width: 12px;
  height: 12px;
  background: var(--c-panel);
  border-right: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}
.oc-color-pop.is-below::after {
  /* popup 反转到 stop 下方时，三角显示在 popup 顶部指向上 */
  bottom: auto;
  top: -7px;
  border: none;
  border-top: 1px solid var(--c-line);
  border-left: 1px solid var(--c-line);
}

/* 饱和度滑块行：与 .oc-light-row 同结构（label + .oc-color-slider，渐变 inline 注入）*/
.oc-sat-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 取色用滑块：轨道用 inline background 显示渐变（饱和度=灰→鲜艳；明度=黑→纯→白）*/
.oc-color-slider {
  flex: 1 1 0;
  -webkit-appearance: none;
  appearance: none;
  height: 14px;
  border-radius: 7px;
  outline: none;
  margin: 6px 0;
  cursor: pointer;
  border: 1px solid var(--c-line);
}
.oc-color-slider::-webkit-slider-runnable-track {
  height: 14px;
  border-radius: 7px;
  background: transparent;
}
.oc-color-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -3px;
  background: #fff;
  border-radius: 50%;
  border: 2px solid var(--c-text);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  cursor: pointer;
}
.oc-color-slider::-moz-range-track {
  height: 14px;
  border-radius: 7px;
  background: transparent;
}
.oc-color-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  border: 2px solid var(--c-text);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.oc-gradient-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.oc-gradient-stops {
  flex: 1 1 auto;
  height: 28px;
  border-radius: 8px;
  border: 1px solid var(--c-line);
  position: relative;
  background: linear-gradient(to right, #000, #fff);
}
.oc-gradient-stop {
  position: absolute;
  top: -3px;
  width: 12px;
  height: 34px;
  border: 2px solid #fff;
  border-radius: 4px;
  box-shadow: 0 0 0 1px var(--c-text);
  transform: translateX(-50%);
  cursor: ew-resize;
}

.oc-binding-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.oc-binding-chip {
  padding: 4px 8px;
  border-radius: 12px;
  border: 1px solid var(--c-line);
  background: var(--c-panel);
  font-size: 12px;
  cursor: pointer;
  color: var(--c-text-soft);
}
.oc-binding-chip.is-on {
  background: var(--c-accent-soft);
  color: var(--c-text);
  border-color: var(--c-accent);
}

.oc-eye-side {
  display: flex;
  gap: 8px;
}
.oc-eye-side button {
  flex: 1 1 0;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid var(--c-line);
  background: var(--c-panel);
  cursor: pointer;
  font-size: 12px;
}
.oc-eye-side button.is-active {
  background: var(--c-accent-soft);
  border-color: var(--c-accent);
}

/* 变换控制 */
.oc-transform-mode {
  display: flex;
  gap: 6px;
}
.oc-transform-mode button {
  flex: 1 1 0;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid var(--c-line);
  background: var(--c-panel);
  font-size: 12px;
  cursor: pointer;
}
.oc-transform-mode button.is-active {
  background: var(--c-accent);
  color: #fff;
  border-color: var(--c-accent);
}
/* 美化 range 滑块（覆盖浏览器默认） */
.oc-range {
  flex: 1 1 0;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 3px;
  outline: none;
  margin: 6px 0;
  cursor: pointer;
}
.oc-range::-webkit-slider-runnable-track {
  height: 6px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 3px;
}
.oc-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  margin-top: -7px;
  background: var(--c-accent);
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}
.oc-range::-moz-range-track {
  height: 6px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 3px;
}
.oc-range::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: var(--c-accent);
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

/* 美化 number 输入 */
.oc-number {
  width: 70px;
  height: 32px;
  padding: 0 22px 0 8px;
  border: 1px solid var(--c-line);
  border-radius: 8px;
  font-size: 13px;
  text-align: right;
  outline: none;
  background: var(--c-panel);
  color: var(--c-text);
  -moz-appearance: textfield;
}
.oc-number::-webkit-outer-spin-button,
.oc-number::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.oc-number:focus { border-color: var(--c-accent); }
.oc-input-with-suffix {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.oc-input-suffix {
  position: absolute;
  right: 8px;
  font-size: 12px;
  color: var(--c-text-soft);
  pointer-events: none;
}

.oc-reset-transform {
  width: 100%;
  margin-top: 6px;
}

/* 选中部件的虚线变换边框（编辑模式实时跟随 transform）
   pointer-events:none 让 frame 自身透传，拖动由 preview 的 mousedown 监听（=移动）；
   handle 子元素 pointer-events:auto 拦截事件做缩放 */
.oc-transform-frame {
  position: absolute;
  display: none;
  pointer-events: none;
  border: 2px dashed var(--c-text);
  box-sizing: border-box;
  outline: 1px solid rgba(255, 255, 255, 0.7);
  outline-offset: -3px;
  z-index: 2;
}
/* 8 个变换 handle：4 角 + 4 边中点；默认不可见，自由变换模式下显示并接收事件 */
.oc-tf-handle {
  position: absolute;
  width: 14px;
  height: 14px;
  background: var(--c-panel);
  border: 2px solid var(--c-text);
  box-sizing: border-box;
  border-radius: 3px;
  pointer-events: none;
  display: none;
}
/* 自由变换模式下显示 + 可点（is-free 由 _renderTransformFrame 加在 frame 上）*/
.oc-transform-frame.is-free .oc-tf-handle {
  display: block;
  pointer-events: auto;
}
.oc-tf-handle.is-tl { top: -8px;    left: -8px;   cursor: nwse-resize; }
.oc-tf-handle.is-tr { top: -8px;    right: -8px;  cursor: nesw-resize; }
.oc-tf-handle.is-bl { bottom: -8px; left: -8px;   cursor: nesw-resize; }
.oc-tf-handle.is-br { bottom: -8px; right: -8px;  cursor: nwse-resize; }
.oc-tf-handle.is-t  { top: -8px;    left: 50%;    margin-left: -7px; cursor: ns-resize; }
.oc-tf-handle.is-b  { bottom: -8px; left: 50%;    margin-left: -7px; cursor: ns-resize; }
.oc-tf-handle.is-l  { top: 50%;     left: -8px;   margin-top: -7px;  cursor: ew-resize; }
.oc-tf-handle.is-r  { top: 50%;     right: -8px;  margin-top: -7px;  cursor: ew-resize; }

/* 旋转手柄："茎 + 头"组合，从顶边中点向上延伸 24px；自由变换模式下显示
   头是圆形（与 4 角 / 4 边的方形 handle 区分），grab 光标 */
.oc-tf-rotate {
  position: absolute;
  top: -28px;
  left: 50%;
  margin-left: -8px;
  width: 16px;
  height: 28px;
  pointer-events: none;
  display: none;
}
.oc-transform-frame.is-free .oc-tf-rotate {
  display: block;
  pointer-events: auto;
  cursor: grab;
}
.oc-transform-frame.is-free .oc-tf-rotate:active { cursor: grabbing; }
.oc-tf-rotate-stem {
  position: absolute;
  top: 14px;
  left: 50%;
  margin-left: -1px;
  width: 2px;
  height: 14px;
  background: var(--c-text);
}
.oc-tf-rotate-knob {
  position: absolute;
  top: 0;
  left: 0;
  width: 16px;
  height: 16px;
  background: var(--c-panel);
  border: 2px solid var(--c-text);
  box-sizing: border-box;
  border-radius: 50%;
}

/* ========== 内嵌完成 / 下载弹层 ==========
   覆盖在创作弹窗内部（不开新页面）；点 × 关闭弹层回创作 */
.oc-done-overlay {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
  z-index: 20;
  padding: 16px;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.oc-done-overlay.is-show { display: flex; }

.oc-done-panel {
  position: relative;
  background: var(--c-panel);
  border-radius: 16px;
  width: 100%;
  max-width: 360px;
  max-height: 100%;
  overflow-y: auto;
  padding: 14px 14px 16px;
  box-shadow: var(--c-shadow);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.oc-done-close {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--c-text-soft);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}
.oc-done-close:active { background: var(--c-bg); }
.oc-done-close .oc-svg { width: 18px; height: 18px; }

.oc-done-title {
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--c-text);
  padding-top: 4px;
}

/* 全身图 + 头像左右二分 */
.oc-done-imgs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.oc-done-cell {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background:
    linear-gradient(45deg, var(--c-checker) 25%, transparent 25%),
    linear-gradient(-45deg, var(--c-checker) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--c-checker) 75%),
    linear-gradient(-45deg, transparent 75%, var(--c-checker) 75%);
  background-size: 14px 14px;
  background-position: 0 0, 0 7px, 7px -7px, -7px 0;
  background-color: #fff;
  border-radius: 10px;
  overflow: hidden;
}
.oc-done-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.oc-done-cell-label {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  text-align: center;
  font-size: 11px;
  color: var(--c-text-soft);
  background: rgba(255, 255, 255, 0.85);
  padding: 2px 0;
}

.oc-done-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.oc-done-btn {
  height: 56px;
  border: 1px solid var(--c-line);
  background: var(--c-panel);
  border-radius: 10px;
  color: var(--c-text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 2px;
  font-size: 11px;
  text-decoration: none;
  user-select: none;
  transition: background 0.15s, transform 0.1s;
}
.oc-done-btn:active { background: var(--c-accent-soft); transform: translateY(1px); }
.oc-done-btn .oc-svg { width: 18px; height: 18px; }

/* ========== 颜色弹层（取色器） ========== */
.oc-popover {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--c-panel);
  border-top: 1px solid var(--c-line);
  border-radius: 12px 12px 0 0;
  padding: 12px;
  max-height: 60%;
  overflow-y: auto;
  display: none;
  z-index: 5;
  box-shadow: var(--c-shadow);
}
.oc-popover.is-open { display: block; }
.oc-popover-mask {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
  display: none;
  z-index: 4;
}
.oc-popover-mask.is-open { display: block; }

/* 子组（设定）扩展 */
.oc-meta-list {
  padding: 8px;
}
.oc-meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--c-line);
  border-radius: 8px;
  margin-bottom: 6px;
  background: var(--c-panel);
}
.oc-meta-item .oc-thumb {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
}
.oc-meta-item .oc-meta-name {
  flex: 1 1 auto;
  font-size: 13px;
}
.oc-meta-item .oc-meta-clear {
  font-size: 11px;
  color: var(--c-text-soft);
  cursor: pointer;
}

/* 宽屏左右遮罩点击关闭（可选） */
@media (min-width: 481px) {
  .oc-creator::before,
  .oc-creator::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: calc((100% - 480px) / 2);
    cursor: pointer;
  }
  .oc-creator::before { left: 0; }
  .oc-creator::after { right: 0; }
}