/* ═══════════════════════════════════════════
   详细生图 — tldraw 无限画布「生图编排板」
   必须最后加载（在 mobile.css 之后）以覆盖布局
   ═══════════════════════════════════════════ */

/* ── 主区：工具栏 + 画布挂载点 ── */
#page-create-detail .cr-main--canvas { overflow: hidden; }
.cr-canvas__toolbar {
  display: flex; align-items: center; gap: 8px;
  flex-shrink: 0;
  height: 48px; padding: 0 14px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  overflow-x: auto; scrollbar-width: none;
}
.cr-canvas__toolbar::-webkit-scrollbar { display: none; }
.cr-canvas__toolbar-spacer { flex: 1; }
/* 工具组 */
.cr-tb-group { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.cr-tb-group--tools .cr-tb-label { display: none; }   /* 桌面：工具图标化（title 提示） */
.cr-tool-sep { width: 1px; height: 20px; background: var(--border); margin: 0 4px; flex-shrink: 0; }
/* 工具按钮：32px 方形圆角、透明描边、hover 浅底 */
#page-create-detail .cr-canvas__toolbar .cr-iconbtn.cr-tool {
  width: 32px; height: 32px; padding: 0;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid transparent;
  color: var(--fg-muted);
  transition: background var(--dur-1), color var(--dur-1), border-color var(--dur-1);
}
#page-create-detail .cr-canvas__toolbar .cr-iconbtn.cr-tool .icon-svg { width: 18px; height: 18px; }
#page-create-detail .cr-canvas__toolbar .cr-iconbtn.cr-tool:hover { background: var(--bg-hover); color: var(--fg); border-color: transparent; }
/* 激活工具：彝红描边 + 浅红底（小范围跳色） */
#page-create-detail .cr-canvas__toolbar .cr-iconbtn.cr-tool.active {
  background: var(--pop-soft); color: var(--pop); border-color: color-mix(in srgb, var(--pop) 45%, transparent);
}
#page-create-detail .cr-canvas__toolbar .cr-iconbtn.cr-tool.active .icon-svg { color: var(--pop); }
/* 工具组内的辅助按钮（图片/适配）与工具同风格（桌面/平板图标化） */
#page-create-detail .cr-canvas__toolbar .cr-tb-group--tools > .cr-iconbtn:not(.cr-tool) {
  width: 32px; height: 32px; padding: 0;
  justify-content: center;
  border-radius: 8px; border-color: transparent;
  color: var(--fg-muted);
  transition: background var(--dur-1), color var(--dur-1);
}
#page-create-detail .cr-canvas__toolbar .cr-tb-group--tools > .cr-iconbtn:not(.cr-tool):hover { background: var(--bg-hover); color: var(--fg); border-color: transparent; }
/* 动作组：次级按钮描边收敛 */
#page-create-detail .cr-canvas__toolbar .cr-tb-group--actions .cr-iconbtn {
  height: 32px; border-radius: 8px; border-color: var(--border);
  color: var(--fg);
}
#page-create-detail .cr-canvas__toolbar .cr-tb-group--actions .cr-iconbtn:hover { border-color: var(--border-strong); background: var(--bg-hover); }
/* 主按钮（生图区/生成）：实心黑，悬停彝红 */
#page-create-detail .cr-canvas__toolbar .cr-tb-group--actions .cr-iconbtn.cr-tb-primary {
  background: var(--fg); color: var(--bg); border-color: var(--fg);
  font-weight: 500;
}
#page-create-detail .cr-canvas__toolbar .cr-tb-group--actions .cr-iconbtn.cr-tb-primary .icon-svg { color: var(--bg); }
#page-create-detail .cr-canvas__toolbar .cr-tb-group--actions .cr-iconbtn.cr-tb-primary:hover { background: var(--pop); border-color: var(--pop); }
#page-create-detail .cr-canvas__toolbar .cr-tb-group--actions .cr-iconbtn.cr-tb-primary:hover .icon-svg { color: #fff; }
/* 绘图工具 → 自研十字光标（注：cursor.css 对 mount 内元素有 auto !important，这里用 id 域 + !important 压过它） */
#page-create-detail .cr-main--canvas[data-tool="rect"] .board__viewport,
#page-create-detail .cr-main--canvas[data-tool="ellipse"] .board__viewport,
#page-create-detail .cr-main--canvas[data-tool="line"] .board__viewport,
#page-create-detail .cr-main--canvas[data-tool="arrow"] .board__viewport,
#page-create-detail .cr-main--canvas[data-tool="pencil"] .board__viewport,
#page-create-detail .cr-main--canvas[data-tool="pen"] .board__viewport,
#page-create-detail .cr-main--canvas[data-tool="frame"] .board__viewport,
#page-create-detail .cr-main--canvas[data-tool="marker"] .board__viewport { cursor: url("../assets/icons/tools/cur-crosshair.svg") 12 12, crosshair !important; }
/* 文本工具 → 自研 I-beam */
#page-create-detail .cr-main--canvas[data-tool="text"] .board__viewport { cursor: url("../assets/icons/tools/cur-text.svg") 12 12, text !important; }
/* 抓手工具（未按下）：自定义张开手掌光标；平移中由 .board--panning 覆盖为握紧 */
#page-create-detail .cr-main--canvas[data-tool="hand"] .board__viewport {
  cursor: url("../assets/icons/tools/cursor-grab.svg") 17 7, grab !important;
}
/* 平移态（中键/空格/抓手按下）：紧握光标 —— 必须在十字光标块之后，相同优先级后声明者胜 */
#page-create-detail .cr-main--canvas .board__viewport.board--panning {
  cursor: url("../assets/icons/tools/cursor-grabbing.svg") 13 11, grabbing !important;
}
/* 画布默认光标 = 自研圆角箭头（与主站气质一致） */
#page-create-detail .cr-main--canvas .board__viewport {
  cursor: url("../assets/icons/tools/cur-default.svg") 6 3, default !important;
}
/* 形状/画板/生图区悬停 = 四向移动光标（输入控件仍原生 I-beam） */
#page-create-detail .cr-main--canvas .board__viewport .b-shape:hover,
#page-create-detail .cr-main--canvas .board__viewport .b-frame:hover { cursor: url("../assets/icons/tools/cur-move.svg") 12 12, move !important; }
#page-create-detail .cr-main--canvas .board__plate { cursor: url("../assets/icons/tools/cur-move.svg") 12 12, move !important; }
#page-create-detail .cr-main--canvas .board__plate input,
#page-create-detail .cr-main--canvas .board__plate textarea { cursor: text !important; }
/* 拖动任意对象中 = 握紧手掌（最高优先） */
#page-create-detail .cr-main--canvas .board__viewport.board--dragging,
#page-create-detail .cr-main--canvas .board__viewport.board--dragging * {
  cursor: url("../assets/icons/tools/cursor-grabbing.svg") 13 11, grabbing !important;
}
/* 选中框手柄 / 旋转柄光标 */
#page-create-detail .cr-main--canvas .b-rh--nw, #page-create-detail .cr-main--canvas .b-rh--se { cursor: url("../assets/icons/tools/cur-resize-nwse.svg") 12 12, nwse-resize !important; }
#page-create-detail .cr-main--canvas .b-rh--ne, #page-create-detail .cr-main--canvas .b-rh--sw { cursor: url("../assets/icons/tools/cur-resize-nesw.svg") 12 12, nesw-resize !important; }
#page-create-detail .cr-main--canvas .b-rh--n, #page-create-detail .cr-main--canvas .b-rh--s { cursor: url("../assets/icons/tools/cur-resize-ns.svg") 12 12, ns-resize !important; }
#page-create-detail .cr-main--canvas .b-rh--w, #page-create-detail .cr-main--canvas .b-rh--e { cursor: url("../assets/icons/tools/cur-resize-ew.svg") 12 12, ew-resize !important; }
#page-create-detail .cr-main--canvas .b-rh--point { cursor: url("../assets/icons/tools/cur-move.svg") 12 12, move !important; }
#page-create-detail .cr-main--canvas .b-rotate-handle { cursor: url("../assets/icons/tools/cur-rotate.svg") 12 12, grab !important; }
#page-create-detail .cr-main--canvas .b-frame-resize { cursor: url("../assets/icons/tools/cur-resize-nwse.svg") 12 12, nwse-resize !important; }
/* 属性面板 / 空态引导 = 默认箭头 */
#page-create-detail .cr-main--canvas .board__stylebar,
#page-create-detail .cr-main--canvas .board__stylebar *,
#page-create-detail .cr-main--canvas .board__empty { cursor: url("../assets/icons/tools/cur-default.svg") 6 3, default !important; }
#page-create-detail .cr-main--canvas .board__stylebar input,
#page-create-detail .cr-main--canvas .board__stylebar [contenteditable] { cursor: text !important; }
.cr-canvas__mount {
  position: relative; flex: 1; min-height: 0;
  overflow: hidden;
  overscroll-behavior: contain;
}
/* 详细生图画布内不显示积分胶囊（挡生图区） */
#page-create-detail .cr-points { display: none !important; }
/* 参数/历史按钮（平板抽屉开关）与参数按钮（移动端底部弹出参数用）默认隐藏 */
.cr-canvas__parambtn, .cr-canvas__histbtn { display: none; }

/* ── 自研画布引擎 board（.board__*，替换旧 tldraw .tl-*） ── */
.board__viewport {
  position: absolute; inset: 0;
  overflow: hidden;
  touch-action: none;
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
  overscroll-behavior: contain;
  font-family: var(--font);
  background-image: radial-gradient(circle, var(--border) 1px, transparent 1px);
  background-repeat: repeat;
}
.board__world {
  position: absolute; left: 0; top: 0;
  transform-origin: 0 0;
  will-change: transform;
}
.board__plate {
  position: absolute;
  transform-origin: 0 0;
  cursor: move;
}
.board__plate--selected .cp-card {
  outline: 2px solid var(--fg);
  outline-offset: 2px;
  box-shadow: var(--shadow-sm);
}
.board__resize {
  position: absolute; right: 4px; bottom: 4px;
  width: 22px; height: 22px;
  display: none;
  cursor: nwse-resize;
  z-index: 2;
}
.board__plate--selected .board__resize { display: block; }
.board__resize::after {
  content: '';
  position: absolute; right: 3px; bottom: 3px;
  width: 10px; height: 10px;
  border-right: 2px solid var(--fg);
  border-bottom: 2px solid var(--fg);
}
.board__marquee {
  position: absolute;
  border: 1px dashed var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  pointer-events: none;
  z-index: 5;
}

/* ── v2 形状图层（SVG；0 尺寸 + overflow visible → 场景坐标自由渲染） ── */
.board__frames, .board__shapes, .board__sel, .board__edit {
  position: absolute; left: 0; top: 0;
  /* 不能是 0×0：Chrome 对 0 尺寸的 SVG 根不再光栅化子元素（overflow:visible 也无效），
     必须给真实尺寸。100000×100000 覆盖整个可用画板；overflow:visible 兜底超出部分。 */
  width: 100000px; height: 100000px; overflow: visible;
}
.board__frames, .board__shapes { pointer-events: none; }
.board__frames > *, .board__shapes > * { pointer-events: auto; }
.board__sel { pointer-events: none; z-index: 6; }
/* 编辑层：锚点/手柄可点 */
.board__edit { pointer-events: none; z-index: 7; }
.board__edit > * { pointer-events: auto; }

/* ── 形状样式 ── */
.b-shape--rect { fill: var(--bg-card); stroke: var(--fg-muted); stroke-width: 1.5; }
.b-shape--ellipse { fill: var(--bg-card); stroke: var(--fg-muted); stroke-width: 1.5; }
.b-shape--line, .b-shape--arrow { fill: none; }
.b-shape--line line, .b-shape--arrow line { stroke: var(--fg); stroke-width: 2; stroke-linecap: round; }
.b-arrowhead { fill: var(--fg); }
.b-shape--pencil { fill: none; stroke: var(--fg); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.b-shape--text { overflow: visible; }
.board__text {
  min-height: 18px; min-width: 60px;
  font-size: 14px; line-height: 1.4;
  color: var(--fg); white-space: pre-wrap; word-break: break-word;
  padding: 2px 4px; outline: none; cursor: text;
  /* 覆盖 .board__viewport 的 user-select:none，否则打字时无法选中/输入 */
  user-select: text; -webkit-user-select: text;
}
.board__text--editing {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  box-shadow: 0 0 0 1px var(--accent);
}
.b-shape--image { filter: drop-shadow(0 2px 6px rgba(0,0,0,0.15)); }
.b-shape--marker rect {
  fill: rgba(0,0,0,0.08); stroke: var(--pop); stroke-width: 2;
  stroke-dasharray: 6 4;
}
.board__marker-label { font-size: 11px; font-weight: 600; color: var(--pop); white-space: nowrap; }
.board__selbox {
  fill: color-mix(in srgb, var(--accent) 8%, transparent);
  stroke: var(--accent); stroke-width: 1; stroke-dasharray: 4 3;
}

/* ── 画板（frame 容器） ── */
.b-frame__body {
  fill: color-mix(in srgb, var(--fg-muted) 5%, transparent);
  stroke: var(--border-strong); stroke-width: 1.5;
}
.b-frame__head { fill: var(--bg-soft); stroke: var(--border-strong); stroke-width: 1; }
.b-frame:hover .b-frame__body { stroke: var(--accent); }
.board__frame-title {
  font-size: 12px; font-weight: 500; color: var(--fg-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: grab; padding: 1px 4px; line-height: 1.4;
  user-select: text; -webkit-user-select: text;
}
.board__frame-title--editing {
  background: var(--bg-card); outline: 1px solid var(--accent);
  cursor: text; color: var(--fg); white-space: normal;
}

/* ── 生图区卡片（自研 board 渲染，类名 cp- 前缀防撞） ── */
.cp-card {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  font-family: var(--font);
  transition: border-color var(--dur-1) var(--ease);
}
.cp-card:hover { border-color: var(--border-strong); }
.cp-card--done { border-color: var(--border-strong); }
.cp-card--failed { border-color: color-mix(in srgb, var(--err) 45%, var(--border)); }

.cp-card__head {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.cp-card__title {
  flex: 1; min-width: 0;
  background: transparent; border: none; outline: none;
  font-size: 0.78rem; font-weight: 500; color: var(--fg);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-radius: var(--radius-sm); padding: 2px 4px; margin-left: -4px;
  transition: background var(--dur-1);
}
.cp-card__title:hover, .cp-card__title:focus { background: var(--bg-soft); }
.cp-card__title::placeholder { color: var(--fg-dim); font-weight: 400; }
/* 比例/尺寸小标识 */
.cp-card__meta {
  flex-shrink: 0;
  font-size: 0.62rem; color: var(--fg-muted);
  background: var(--bg-soft); border: 1px solid var(--border);
  padding: 1px 6px; border-radius: var(--radius-sm);
  font-variant-numeric: tabular-nums;
}
/* 状态胶囊：排队/生成中=中性，完成=绿，失败=红 */
.cp-card__badge {
  flex-shrink: 0;
  font-size: 0.66rem; line-height: 1.4;
  color: var(--fg-muted);
  background: var(--bg-soft); border: 1px solid var(--border);
  padding: 2px 9px; border-radius: var(--radius-pill);
}
.cp-card--pending .cp-card__badge, .cp-card--running .cp-card__badge {
  color: var(--fg); border-color: var(--border-strong); background: var(--bg-hover);
}
.cp-card--done .cp-card__badge {
  color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent);
  background: color-mix(in srgb, var(--ok) 9%, transparent);
}
.cp-card--failed .cp-card__badge {
  color: var(--err); border-color: color-mix(in srgb, var(--err) 45%, transparent);
  background: color-mix(in srgb, var(--err) 8%, transparent);
}

.cp-card__body {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px;
}
.cp-card__result {
  flex: none;
  width: 100%;
  aspect-ratio: 1 / 1;            /* 默认值；inline style 按 plate 参数覆盖为 rw/rh */
  border-radius: 8px; overflow: hidden;
  background: var(--bg-soft);
}
.cp-card__result img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cp-card__placeholder {
  flex: none;
  width: 100%;
  aspect-ratio: 1 / 1;            /* 与结果区同槽位同比例；inline style 覆盖 */
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  font-size: 0.72rem; color: var(--fg-dim);
  background: var(--bg-soft); border: 1px dashed var(--border-strong);
  border-radius: 8px; padding: 10px;
  line-height: 1.6;
}
.cp-card__placeholder--idle { border-color: var(--border); }
.cp-card__placeholder--failed {
  color: var(--err); border-color: color-mix(in srgb, var(--err) 40%, transparent);
  background: color-mix(in srgb, var(--err) 4%, var(--bg-soft));
}
.cp-card__placeholder .gen-wait { font-size: 0.76rem; }
.cp-card__prompt {
  flex-shrink: 0;
  width: 100%; height: 64px; resize: none;
  background: var(--bg-soft); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 10px;
  font-size: 0.76rem; line-height: 1.5; color: var(--fg);
  outline: none;
  transition: border-color var(--dur-1), background var(--dur-1), box-shadow var(--dur-1);
}
.cp-card__prompt:focus {
  border-color: var(--fg); background: var(--bg-card);
  box-shadow: 0 2px 10px rgba(20,18,15,0.06);
}
.cp-card__prompt::placeholder { color: var(--fg-dim); }

.cp-card__foot {
  flex-shrink: 0;
  padding: 0 10px 10px;
}
.cp-card__gen {
  width: 100%; height: 34px;
  border-radius: 8px;
  background: var(--fg); color: var(--bg);
  font-size: 0.78rem; font-weight: 500;
  transition: background var(--dur-2) var(--ease), opacity var(--dur-1), transform var(--dur-1);
}
.cp-card__gen:hover:not(:disabled) { background: var(--pop); }
.cp-card__gen:active:not(:disabled) { transform: translateY(1px); }
.cp-card__gen:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── 参数栏：头部选中标记 + 底部生成按钮 + 禁用态 ── */
.cr-params__head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.cr-params__head-title { flex-shrink: 0; }
.cr-params__head-plate {
  font-size: 0.7rem; font-weight: 400; color: var(--fg-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 150px;
}
.cr-params__foot {
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--border);
}
.cr-params__genbtn { width: 100%; min-height: 38px; }
.cr-params--disabled .cr-cselect,
.cr-params--disabled select,
.cr-params--disabled input,
.cr-params--disabled .cr-params__genbtn { opacity: 0.45; pointer-events: none; }

/* ── 移动端（≤500px）：历史隐藏、参数→底部 sheet、工具栏→底部横滚工具条 ── */
@media (max-width: 500px) {
  /* 详细页沉浸：画布全屏 + 隐藏底部 tabbar（canvas.css 最后加载，权威） */
  #page-create-detail { padding-bottom: 0; }
  #page-create-detail.active ~ .mob-tabbar { display: none; }
  /* 画布高度链显式兜底：dvh 优先、svh 回退、vh 兜底（杜绝 auto 塌陷） */
  #page-create-detail .cr-detail {
    height: calc(100vh - var(--nav-h));
    height: calc(100svh - var(--nav-h));
    height: calc(100dvh - var(--nav-h));
  }
  #page-create-detail .cr-main--canvas { min-height: 0; }
  #page-create-detail .cr-canvas__mount { flex: 1 1 0%; min-height: 0; }

  #page-create-detail .cr-side--left { display: none !important; }

  /* 工具栏 → 底部横滚工具条（参数按钮排首位；Figma/tldraw 移动端范式） */
  #page-create-detail .cr-canvas__toolbar {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto;
    z-index: 120;
    flex-direction: row; align-items: center;
    height: auto; width: auto;
    overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
    padding: 6px 8px;
    padding-bottom: calc(6px + env(safe-area-inset-bottom));
    gap: 4px;
    background: var(--bg-card);
    border: none; border-top: 1px solid var(--border);
    border-radius: 0;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.08);
  }
  #page-create-detail .cr-canvas__toolbar::-webkit-scrollbar { display: none; }
  #page-create-detail .cr-canvas__toolbar-spacer { display: none; }
  /* 分组取消，按钮直接铺一行 */
  #page-create-detail .cr-tb-group { display: contents; }
  #page-create-detail .cr-tool-sep { display: none; }
  #page-create-detail .cr-canvas__toolbar .cr-iconbtn {
    flex-shrink: 0;
    min-height: 44px; padding: 2px 8px;
    flex-direction: column; gap: 1px;
    font-size: 0.62rem; line-height: 1.1;
    border-radius: 8px; border: none;
  }
  #page-create-detail .cr-canvas__toolbar .cr-iconbtn .icon-svg { width: 18px; height: 18px; }
  /* 覆盖 create.css 移动端隐藏 span 的规则，露出工具文字 */
  #page-create-detail .cr-canvas__toolbar .cr-tb-label { display: inline; }
  #page-create-detail .cr-canvas__toolbar .cr-canvas__parambtn { order: -1; }

  /* 右侧参数栏 → 底部 sheet（悬浮在工具栏之上） */
  #page-create-detail .cr-side--right {
    display: flex !important;
    position: fixed; left: 0; right: 0; top: auto;
    bottom: calc(56px + env(safe-area-inset-bottom));
    flex-direction: column;
    z-index: 130;
    max-height: 58vh;
    background: var(--bg-card);
    border-top: 1px solid var(--border);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 30px rgba(0,0,0,0.18);
    transform: translateY(120%);
    transition: transform 0.3s var(--ease);
    flex-shrink: 0;
  }
  #page-create-detail .cr-side--right.open-sheet { transform: translateY(0); }
  #page-create-detail .cr-side--right .cr-panel {
    width: 100% !important; height: auto !important;
    max-height: 56vh; overflow-y: auto;
    display: block !important;
    border-left: none !important;
    padding-bottom: max(14px, env(safe-area-inset-bottom));
  }
  #page-create-detail .cr-side--right .cr-toggle { display: none !important; }

  /* 参数按钮（底部弹出参数）在移动端显示 */
  .cr-canvas__parambtn { display: inline-flex; }

  /* 触摸目标 ≥44px */
  #page-create-detail .cr-cselect__btn { min-height: 40px; }
  #page-create-detail .cr-params input { min-height: 40px; }
  /* 缩放手柄移动端加大命中区 */
  #page-create-detail .board__resize { width: 28px; height: 28px; right: 6px; bottom: 6px; }
}

/* ═══════════════════════════════════════════
   画布页重设计 v2 — 专业工具感（Figma/tldraw 式克制）
   ═══════════════════════════════════════════ */

/* ── 缩放控件：左下角浮动 − / 百分比 / + ── */
.cr-zoomctl {
  position: absolute; left: 14px; bottom: 14px; z-index: 20;
  display: flex; align-items: center; gap: 2px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  padding: 3px;
}
.cr-zoomctl__btn, .cr-zoomctl__pct {
  height: 26px; min-width: 28px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill);
  font-size: 0.86rem; color: var(--fg);
  transition: background var(--dur-1);
  user-select: none; -webkit-user-select: none;
}
.cr-zoomctl__btn:hover, .cr-zoomctl__pct:hover { background: var(--bg-hover); }
.cr-zoomctl__pct {
  font-size: 0.7rem; color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
  min-width: 44px;
}

/* ── 空画布引导：中心虚线圆角框（board.js 控制显隐） ── */
.board__empty {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 8;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 22px 30px;
  border: 1.5px dashed var(--border-strong);
  border-radius: 16px;
  background: color-mix(in srgb, var(--bg-card) 78%, transparent);
  color: var(--fg-dim);
  pointer-events: none;
  max-width: min(78%, 340px);
  text-align: center;
}
.board__empty .icon-svg { width: 22px; height: 22px; color: var(--fg-dim); }
.board__empty-text { font-size: 0.78rem; line-height: 1.7; }

/* ── 面板头部统一：小标题 + 操作，底部细分隔线 ── */
#page-create-detail .cr-history__head,
#page-create-detail .cr-params__head {
  padding: 2px 4px 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
  font-size: 0.8rem; font-weight: 500; color: var(--fg);
}
#page-create-detail .cr-history__item { transition: background var(--dur-1); }
#page-create-detail .cr-history__thumb { border-radius: 8px; }
#page-create-detail .cr-history__add { transition: background var(--dur-1), border-color var(--dur-1); }
#page-create-detail .cr-history__add:hover { background: var(--fg); border-color: var(--fg); color: var(--bg); }

/* ── 平板区间（501–900px）：参数/历史 → 两侧抽屉，工具栏露出开关 ── */
@media (min-width: 501px) and (max-width: 900px) {
  #page-create-detail .cr-canvas__parambtn,
  #page-create-detail .cr-canvas__histbtn { display: inline-flex; }

  /* 动作组压缩为纯图标，保证整栏可达不横向滚动 */
  #page-create-detail .cr-tb-group--actions .cr-tb-label { display: none; }
  #page-create-detail .cr-tb-group--actions .cr-iconbtn { width: 32px; padding: 0; justify-content: center; }
  /* 智能切换按钮无图标，保留文字 */
  #page-create-detail .cr-tb-group--actions .cr-canvas__modeswitch { width: auto; padding: 0 12px; }
  #page-create-detail .cr-tb-group--actions .cr-canvas__modeswitch .cr-tb-label { display: inline; }

  /* 右侧参数抽屉 */
  #page-create-detail .cr-side--right {
    position: fixed; top: var(--nav-h); right: 0; bottom: 0;
    z-index: 140;
    transform: translateX(106%);
    transition: transform var(--dur-3) var(--ease);
    box-shadow: var(--shadow-lg);
  }
  #page-create-detail .cr-side--right.open-sheet { transform: translateX(0); }
  #page-create-detail .cr-side--right .cr-panel {
    display: block !important;
    width: 280px !important; height: 100%;
    border-left: 1px solid var(--border);
  }
  /* 左侧历史抽屉 */
  #page-create-detail .cr-side--left {
    position: fixed; top: var(--nav-h); bottom: 0; left: 0;
    z-index: 140;
    transform: translateX(-106%);
    transition: transform var(--dur-3) var(--ease);
    box-shadow: var(--shadow-lg);
  }
  #page-create-detail .cr-side--left.open-sheet { transform: translateX(0); }
  #page-create-detail .cr-side--left .cr-panel {
    display: block !important;
    width: 240px !important; height: 100%;
    border-right: 1px solid var(--border);
  }
  /* 抽屉态隐藏桌面折叠箭头 */
  #page-create-detail .cr-side .cr-toggle { display: none !important; }
}

/* ── 移动端补充：缩放控件让位底部工具条（捏合缩放已可用） ── */
@media (max-width: 500px) {
  #page-create-detail .cr-zoomctl { display: none; }
  /* 还原移动底部工具条的纵向图标+文字布局（桌面方形/描边规则特异性更高，需显式覆盖） */
  #page-create-detail .cr-canvas__toolbar .cr-iconbtn.cr-tool,
  #page-create-detail .cr-canvas__toolbar .cr-tb-group--tools > .cr-iconbtn:not(.cr-tool),
  #page-create-detail .cr-canvas__toolbar .cr-tb-group--actions .cr-iconbtn {
    width: auto; height: auto; min-height: 44px; padding: 2px 8px;
    flex-direction: column; gap: 1px;
    border: none;
  }
  #page-create-detail .cr-canvas__toolbar .cr-iconbtn.cr-tool .icon-svg { width: 18px; height: 18px; }
  /* 动作组主按钮在底部工具条保持实心小方块 */
  #page-create-detail .cr-canvas__toolbar .cr-tb-group--actions .cr-iconbtn.cr-tb-primary {
    background: var(--fg); color: var(--bg); border: none;
  }
  #page-create-detail .cr-canvas__toolbar .cr-tb-group--actions .cr-iconbtn.cr-tb-primary .icon-svg { color: var(--bg); }
  /* 空画布引导避让底部工具条 */
  #page-create-detail .board__empty {
    top: 42%;
    padding: 16px 20px;
  }
}

/* ═══════════════════════════════════════════
   形状属性面板（board.js 渲染，.sb- 前缀）+ 钢笔预览
   ═══════════════════════════════════════════ */
.board__stylebar {
  position: absolute; top: 12px; left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  display: flex; align-items: center; gap: 4px;
  max-width: calc(100% - 24px);
  overflow-x: auto; scrollbar-width: none;
  padding: 6px 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  font-family: var(--font);
}
.board__stylebar::-webkit-scrollbar { display: none; }
.sb-group { display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0; }
.sb-sep { width: 1px; height: 18px; background: var(--border); margin: 0 4px; flex-shrink: 0; }
/* 色板 */
.sb-sw {
  width: 20px; height: 20px; border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--c, transparent);
  cursor: pointer; flex-shrink: 0; padding: 0;
  transition: transform var(--dur-1), box-shadow var(--dur-1);
  position: relative;
}
.sb-sw:hover { transform: scale(1.12); }
.sb-sw.on { box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 4px var(--pop); }
.sb-sw--custom {
  display: inline-flex; align-items: center; justify-content: center;
  background: conic-gradient(#C6362C, #B7791F, #2F7D4F, #3A6EA5, #6D4FA3, #C6362C);
  overflow: hidden;
}
.sb-sw--custom::after {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--bg-card); border: 1px solid var(--border-strong);
}
.sb-sw--custom input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
/* 粗细 */
.sb-w {
  width: 26px; height: 24px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--fg-muted); transition: background var(--dur-1), color var(--dur-1);
}
.sb-w i { display: block; width: 14px; background: currentColor; border-radius: 2px; }
.sb-w:hover { background: var(--bg-hover); color: var(--fg); }
.sb-w.on { background: var(--pop-soft); color: var(--pop); }
/* 线型 */
.sb-line {
  width: 30px; height: 24px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--fg-muted); transition: background var(--dur-1), color var(--dur-1);
}
.sb-line:hover { background: var(--bg-hover); color: var(--fg); }
.sb-line.on { background: var(--pop-soft); color: var(--pop); }
/* 文字选项（无/实/半、低/中/高、字体、字号、B/U） */
.sb-opt {
  height: 24px; padding: 0 7px; border-radius: 6px;
  font-size: 0.7rem; color: var(--fg-muted);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--dur-1), color var(--dur-1);
  white-space: nowrap; flex-shrink: 0;
}
.sb-opt:hover { background: var(--bg-hover); color: var(--fg); }
.sb-opt.on { background: var(--pop-soft); color: var(--pop); font-weight: 500; }
.sb-opt--num { padding: 0 5px; font-variant-numeric: tabular-nums; }
.sb-b { font-weight: 700; }
.sb-u { text-decoration: underline; }
/* 钢笔端点续接 hover 提示：放大高亮方块 + 彝红描边 */
.b-pen-hover {
  fill: var(--pop-soft); stroke: var(--pop); stroke-width: 1.5;
  pointer-events: none;
}
/* 磁吸态：脉冲放大（transform-box 保证 SVG 元素以自身中心缩放） */
.b-pen-hover--magnet {
  stroke-width: 2;
  transform-box: fill-box; transform-origin: center;
  animation: b-pen-pulse 0.8s ease-in-out infinite;
}
@keyframes b-pen-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }
/* 磁吸中预览线变实线（连接预览） */
.b-pen-preview--join { stroke-dasharray: none; }
/* 磁吸中光标：带链接符号的钢笔 */
#page-create-detail .cr-main--canvas .board__viewport.board--penmagnet {
  cursor: url("../assets/icons/tools/cur-pen-join.svg") 10 4, crosshair !important;
}
/* 钢笔绘制预览 */
.b-pen-preview {
  stroke: var(--pop); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 5 4;
  pointer-events: none;
}
.b-shape--pen { fill: none; stroke: var(--fg); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 500px) {
  /* 移动端属性面板贴底部工具条上方 */
  #page-create-detail .board__stylebar {
    top: auto; bottom: calc(64px + env(safe-area-inset-bottom));
    max-width: calc(100% - 16px);
    padding: 5px 6px;
  }
}

/* ═══════════════════════════════════════════
   第三轮：锚点编辑 / 画板缩放柄 / 填充色板提示态 / 会话名 chip
   ═══════════════════════════════════════════ */

/* ── 钢笔锚点编辑 ── */
.b-penedit-anchor {
  fill: var(--bg-card); stroke: var(--fg); stroke-width: 1.2;
  cursor: move;
}
.b-penedit-anchor.on { fill: var(--pop); stroke: var(--pop); }
.b-penedit-handle {
  fill: var(--bg-card); stroke: var(--pop); stroke-width: 1.2;
  cursor: move;
}
.b-penedit-arm { stroke: var(--pop); opacity: 0.7; pointer-events: none; }

/* ── 画板缩放手柄 ── */
.b-frame-resize {
  fill: var(--bg-card); stroke: var(--fg); stroke-width: 1.2;
  cursor: nwse-resize;
}
.b-frame-resize:hover { fill: var(--pop-soft); stroke: var(--pop); }

/* ── 填充色板：无填充时的半透明提示态（仍可点击，点击自动转纯色） ── */
.sb-fillcolors { display: inline-flex; align-items: center; gap: 3px; }
.sb-fillcolors--dim { opacity: 0.38; }
.sb-fillcolors--dim .sb-sw:hover { opacity: 1; }

/* ── 当前会话名 chip（工具栏左侧；点击内联改名） ── */
.cr-convchip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px; margin-right: 4px;
  max-width: 220px; flex-shrink: 0;
  border-radius: 8px; border: 1px solid var(--border);
  background: var(--bg-soft);
  font-size: 0.76rem; color: var(--fg);
  cursor: text;
  transition: border-color var(--dur-1), background var(--dur-1);
}
.cr-convchip:hover { border-color: var(--border-strong); background: var(--bg-hover); }
.cr-convchip__name {
  min-width: 0; max-width: 180px;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  outline: none; border-radius: 3px;
}
.cr-convchip__name[contenteditable="true"] {
  background: var(--bg-card); box-shadow: 0 0 0 1px var(--border-strong);
  padding: 0 4px; white-space: nowrap; overflow: hidden;
}
.cr-convchip--draft { color: var(--fg-muted); border-style: dashed; }
/* 平板/手机工具栏空间紧张：会话名在历史面板头部可见即可 */
@media (max-width: 900px) {
  #page-create-detail .cr-convchip { display: none; }
}

/* ═══════════════════════════════════════════
   第四轮：stylebar 分区小标题 / 角度输入 / 对齐 / 手柄 / 参考线
   ═══════════════════════════════════════════ */

/* 分区可见小标题 */
.sb-label {
  font-size: 0.64rem; color: var(--fg-dim);
  flex-shrink: 0; padding: 0 2px 0 4px;
  user-select: none; -webkit-user-select: none;
  white-space: nowrap;
}
/* 旋转角输入 */
.sb-rotinput {
  width: 48px; height: 24px;
  background: var(--bg-soft); border: 1px solid var(--border);
  border-radius: 6px; padding: 0 6px;
  font-size: 0.72rem; color: var(--fg);
  font-variant-numeric: tabular-nums;
  outline: none;
}
.sb-rotinput:focus { border-color: var(--fg); background: var(--bg-card); }

/* 旋转柄与连线 */
.b-rotate-handle {
  fill: var(--bg-card); stroke: var(--pop); stroke-width: 1.4;
}
.b-rotate-handle:hover { fill: var(--pop-soft); }
.b-rotate-arm { stroke: var(--border-strong); stroke-dasharray: 2 2; pointer-events: none; }

/* 选中框缩放柄（8 柄 / 线端点） */
.b-rh {
  fill: var(--bg-card); stroke: var(--fg); stroke-width: 1.2;
}
.b-rh:hover { fill: var(--pop-soft); stroke: var(--pop); }
.b-rh--point { stroke: var(--pop); }

/* 对齐吸附参考线 */
.b-guide { stroke: var(--pop); pointer-events: none; }

/* 会话 chip 的保存时间 */
.cr-convchip__time { font-size: 0.62rem; color: var(--fg-dim); flex-shrink: 0; }