* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; font-family: -apple-system, "Segoe UI", "Microsoft YaHei", sans-serif; background: #f0f2f5; color: #333; }
.app { display: flex; flex-direction: column; height: 100vh; }

.toolbar {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; background: #fff; border-bottom: 1px solid #e4e7ed;
  flex-wrap: wrap;
}
.group { display: flex; align-items: center; gap: 6px; }
.sep { width: 1px; height: 20px; background: #e4e7ed; margin: 0 4px; }

/* 主工具栏第二行：表格子工具栏（表格编辑时由 JS 加 .show 显示；起始 x 由 JS 对齐第一行表格图标下方偏左5px） */
.toolbar-row2 {
  display: none;             /* 默认整行隐藏 */
  width: 100%;               /* 独占一行，flex-wrap 自动落到第一行下方 */
  align-items: center;
  margin-top: -14px;         /* 抵消 .toolbar padding-bottom(10px) + 上移额外4px，使两行按钮视觉间距≈5px */
  padding: 5px 0 0;          /* 顶部与第一行间距 5px；左右无 padding（由 inner 控制） */
}
.toolbar-row2.show { display: flex; }
/* 灰底边框只包裹按钮组（与 .text-toolbar 同款），不延伸整行 */
.toolbar-row2 .table-toolbar-inner {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px;
  border: 1px solid #e4e7ed; border-radius: 4px; background: #fafbfc;
}
/* 合并/拆分文字按钮（沿用浮动菜单时代的紧凑尺寸） */
.toolbar-row2 .t2-text {
  min-width: 44px; height: 30px; padding: 0 8px;
  font-size: 13px; line-height: 1;
}
/* 第二行图标按钮：与第一行几何形状栏按钮同尺寸（26×26，图标 14px） */
.toolbar-row2 .btn.icon-only { width: 26px; height: 26px; }
.toolbar-row2 .btn.icon-only svg { width: 14px; height: 14px; }
.toolbar-row2 .t2-text:disabled { color: #c0c4cc; border-color: #e4e7ed; background: #f5f7fa; cursor: not-allowed; }

.btn {
  padding: 6px 14px; border: 1px solid #dcdfe6; background: #fff; border-radius: 4px;
  cursor: pointer; font-size: 14px; color: #606266; transition: all .15s;
}
.btn:hover { color: #409eff; border-color: #c6e2ff; background: #ecf5ff; }
.btn.primary { background: #409eff; color: #fff; border-color: #409eff; }
.btn.primary:hover { background: #66b1ff; border-color: #66b1ff; color: #fff; }
.btn.danger { color: #f56c6c; }
.btn.danger:hover { background: #fef0f0; border-color: #fbc4c4; color: #f56c6c; }
.btn:disabled { color: #c0c4cc; border-color: #e4e7ed; background: #f5f7fa; cursor: not-allowed; }
.btn:disabled:hover { color: #c0c4cc; border-color: #e4e7ed; background: #f5f7fa; }
/* 纯图标按钮（撤销 / 重做，仿 WPS 风格） */
.btn.icon-only {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 32px; padding: 0;
}
.btn.icon-only svg { width: 18px; height: 18px; display: block; }
.btn.icon-only img { width: 18px; height: 18px; display: block; pointer-events: none; }
.btn.icon-only:disabled img { opacity: .4; filter: grayscale(1); }
/* 撤销/重做：与复制/粘贴同款 PNG 图标按钮，但整体尺寸缩小 10%（34×32 → 31×29，图标 18 → 16，再放大 5% → 16.8） */
#undoBtn, #redoBtn { width: 31px; height: 29px; }
#undoBtn img, #redoBtn img { width: 16.8px; height: 16.8px; }
/* WPS 风格双色调图标：蓝色前景（复制/粘贴），禁用时转灰 */
.btn.icon-only .ico-accent { stroke: #409eff; }
.btn.icon-only:disabled .ico-accent { stroke: #c0c4cc; }
.file-btn { position: relative; }
.btn.icon-btn.file-btn { gap: 6px; flex: none; }
.icon-btn.file-btn img { flex: none; }
.canvas-bar .file-btn { margin-left: auto; }
.btn.icon-btn.export-btn { gap: 6px; flex: none; }
.canvas-bar .export-btn { margin-left: auto; }
/* 跨画布 Ctrl+拖动复制的浮动 ghost（容器与目标画布同构，本身无边框） */
.cross-drag-ghost {
  opacity: .9;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .25));
  user-select: none;
}
.cross-drag-ghost .ghost-box {
  fill: rgba(51, 126, 204, .06);
  stroke: #337ecc;
  stroke-width: 1;
  stroke-dasharray: 6 5;
}
.cross-drag-ghost.drop-ok .ghost-box {
  fill: rgba(103, 194, 58, .1);
  stroke: #67c23a;
}
.scale-label { min-width: 48px; text-align: center; font-size: 13px; color: #909399; }

.brand-logo { height: 26px; display: block; user-select: none; }
.bar-ico { height: 18px; vertical-align: -4px; margin-right: 6px; user-select: none; }

.workspace {
  flex: 1; min-width: 0; min-height: 0;
  display: flex; flex-direction: column; gap: 10px;
  padding: 10px; overflow: hidden;
}
.canvas-section {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  background: #eef0f3; border: 1px solid #c0c4cc; border-radius: 3px;
  overflow: hidden; position: relative;
}
.drop-hint {
  position: absolute; inset: 0; z-index: 30;
  display: flex; align-items: center; justify-content: center;
  background: rgba(51,126,204,.12);
}
.drop-hint[hidden] { display: none; }
.drop-hint-box {
  pointer-events: none; padding: 22px 36px;
  border: 2px dashed #337ecc; border-radius: 8px;
  background: rgba(255,255,255,.94); color: #337ecc;
  font-size: 15px; font-weight: 600; white-space: nowrap;
}
.canvas-section.active { border-color: #337ecc; box-shadow: none; }
.canvas-bar {
  flex: none; display: flex; align-items: center; gap: 10px;
  padding: 7px 14px; background: #fafbfc; border-bottom: 1px solid #e4e7ed;
  font-size: 13px; color: #606266;
}
.canvas-bar-title { font-weight: 600; color: #303133; white-space: nowrap; }
.bar-sep { width: 1px; height: 18px; background: #dcdfe6; }
.dim-row { display: flex; align-items: center; gap: 6px; }
.dim-row input {
  width: 60px; height: 24px; padding: 0 4px; line-height: 22px;
  border: 1px solid #dcdfe6; border-radius: 4px;
  font-size: 13px; text-align: center;
}
.dim-row input[type=number]::-webkit-inner-spin-button,
.dim-row input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none; margin: 0;
}
.dim-row input[type=number] { -moz-appearance: textfield; }
.dim-row input#dieL { width: 75px; }
.dim-row input:focus { outline: none; border-color: #409eff; }
.dim-row input::placeholder { color: #c0c4cc; text-align: center; font-size: 12.5px; }
/* 客户源 PDF 文件名（推算箱规右侧，只读） */
.mat-fname {
  flex: 1 1 auto; min-width: 140px; max-width: 560px;
  margin-left: 10px; height: 26px; padding: 0 10px;
  border: 1px solid #dcdfe6; border-radius: 4px; background: #f5f7fa;
  font-size: 13px; color: #303133; cursor: default;
}
.mat-fname:focus { outline: none; border-color: #409eff; }
.mat-fname::placeholder { color: #c0c4cc; }
#matSection .file-btn { margin-left: 8px; }
input#dieSpec { height: 26px; padding: 0 6px; border: 1px solid #dcdfe6; border-radius: 3px; background: #fff; font-size: 12px; color: #606266; }
input#dieSpec:focus { outline: none; border-color: #409eff; }
input#dieSpec::placeholder { color: #c0c4cc; font-size: 12.5px; }
.dim-sep { color: #606266; font-size: 14px; user-select: none; }
.dim-sep.dim-unit { font-size: 12px; }
/* 导出画布模式下拉：箱高 / 宽+高，选择即持久化为默认 */
.canvas-mode-label { font-size: 14px; color: #606266; white-space: nowrap; }
/* “默认：”“画布=”字号与“画刀版”按钮一致（12px） */
.dim-ttl { font-size: 12px; }
select.canvas-mode-select {
  flex: none; height: 28px; padding: 0 22px 0 8px;
  font-size: 13px; color: #303133;
  border: 1px solid #dcdfe6; border-radius: 5px; background: #fff;
  cursor: pointer; outline: none;
}
select.canvas-mode-select:hover { border-color: #c0c4cc; }
select.canvas-mode-select:focus { border-color: #409eff; }
.canvas-scroll {
  flex: 1; min-height: 0; overflow: auto; position: relative;
  display: flex; justify-content: flex-start; align-items: flex-start; padding: 18px 18px 18px 30px;
}
.canvas-wrap {
  position: relative; background: #f0f2f5;
  box-shadow: 0 2px 12px rgba(0,0,0,.1);
}
.canvas-wrap.has-no-doc { display: none; }
#canvasBg, #matBg { display: block; }
#svgOverlay, #matSvg {
  position: absolute; top: 0; left: 0;
  pointer-events: all; cursor: default;
}

/* ───────── 底部水平标尺 + 左侧垂直标尺 ───────── */
.canvas-wrap { display: flex; flex-direction: row; align-items: flex-start; }
.canvas-content { display: flex; flex-direction: column; position: relative; }

/* 垂直标尺 */
.ruler-v {
  width: 34px; flex-shrink: 0;
  background: linear-gradient(to right, #e8eaed 0%, #f0f2f5 3px, #f0f2f5 100%);
  border-left: 1px solid #d4d7db;
  border-right: 1px solid #d4d7db;
  position: relative;
  pointer-events: none;
  overflow: visible;
  margin-top: -20px;
  margin-bottom: -20px;
}
.ruler-v .tick {
  position: absolute; right: 0;
  height: 1px;
  background: linear-gradient(to bottom, #fff 0%, #c0c4cc 50%, #909399 100%);
}
.ruler-v .tick.minor { width: 6px; }
.ruler-v .tick.medium { width: 10px; background: linear-gradient(to bottom, #fff 0%, #707378 50%, #4a4d52 100%); }
.ruler-v .tick.major {
  width: 14px;
  height: 2px;
  top: -0.5px;
  background: linear-gradient(to bottom, #fff 0%, #409eff 40%, #2c6fb3 100%);
  border-radius: 1px;
}
.ruler-v .tick-label {
  position: absolute; right: 16px;
  font-size: 11px; color: #606266;
  line-height: 1; white-space: nowrap;
  font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
  transform: translateY(-50%);
  text-shadow: 0 1px 0 rgba(255,255,255,0.6);
}
.ruler-v .tick-label.zero {
  color: #e6a23c; font-weight: 600;
}

/* 水平标尺 */
.ruler-h {
  height: 34px; margin-top: 0;
  background: linear-gradient(to bottom, #e8eaed 0%, #f0f2f5 3px, #f0f2f5 100%);
  border-top: 1px solid #d4d7db;
  border-bottom: 1px solid #d4d7db;
  position: relative;
  pointer-events: none;
  overflow: visible;
  flex-shrink: 0;
  margin-left: -20px;
  margin-right: -20px;
}
.ruler-h .tick {
  position: absolute; top: 0;
  width: 1px;
  background: linear-gradient(to right, #fff 0%, #c0c4cc 50%, #909399 100%);
}
.ruler-h .tick.minor { height: 6px; }        /* 10cm */
.ruler-h .tick.medium { height: 10px; background: linear-gradient(to right, #fff 0%, #707378 50%, #4a4d52 100%); }  /* 20cm */
.ruler-h .tick.major {
  height: 14px;
  width: 2px;
  left: -0.5px;
  background: linear-gradient(to right, #fff 0%, #409eff 40%, #2c6fb3 100%);
  border-radius: 1px;
}
.ruler-h .tick-label {
  position: absolute; top: 16px;
  font-size: 11px; color: #606266;
  line-height: 1; white-space: nowrap;
  font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
  transform: translateX(-50%);
  text-shadow: 0 1px 0 rgba(255,255,255,0.6);
}

/* 变换工具组小按钮 */
.btn.mini { padding: 4px 9px; font-size: 12px; }
.hint {
  flex: none; display: flex; align-items: flex-start; gap: 12px;
  padding: 4px 12px; background: #fafafa; border-top: 1px solid #e4e7ed;
  font-size: 12px; color: #909399;
}
.hint-text { flex: 1; text-align: right; padding-top: 8px; }
/* 图标按钮（素材画布标题行的“打开 PDF”：打开图标 + PDF 文件图标） */
.btn.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 3px;
  height: 34px; padding: 0 8px;
}
.transform-group { flex-wrap: wrap; }

/* 底部嵌入式缩放栏（位于提示栏左侧） */
.zoom-dock {
  display: flex; align-items: center; gap: 2px;
  background: rgba(255, 255, 255, 0.5); border: 1px solid #d4d5d9;
  border-radius: 4px;
  padding: 1px 24px 1px 12px;
}
.zoom-btn {
  width: 30px; height: 30px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 6px; background: transparent;
  color: #606266; cursor: pointer;
  transition: background .12s, color .12s;
}
.zoom-btn:hover { background: #ecf5ff; color: #409eff; }
.zoom-btn:active { background: #d9ecff; }
.zoom-fit { width: auto; padding: 0 10px; font-size: 13px; }
.zoom-dock .scale-label {
  min-width: 54px; text-align: center; font-size: 13px; color: #606266;
  user-select: none;
}
.zoom-dock-sep { width: 1px; height: 18px; background: #e4e7ed; margin: 0 3px; }

/* 中部：画布 + 右侧属性边条（边条宽度永久预留，开合画布均不动） */
.main-row { flex: 1; display: flex; min-height: 0; overflow: hidden; }

/* 右侧属性边条：宽度永久预留（画布不动），整体在预留区内左右滑动。
   收起 translateX(224px)：竖排图标贴到屏幕右缘，表单隐到视口右侧外；
   展开 translateX(0)：图标带着表单一起向左弹出。 */
.side-panel {
  flex: none; width: 258px; display: flex; align-items: stretch;
  transform: translateX(224px);
  transition: transform .22s ease;
}
.side-panel.open { transform: translateX(0); }

.side-tab {
  flex: none; width: 34px; align-self: flex-start; margin-top: 18px;
  padding: 14px 0 12px;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  background: #409eff;
  border: none; border-radius: 9px 0 0 9px;
  box-shadow: -3px 3px 12px rgba(64, 158, 255, .4);
  cursor: pointer; color: #fff;
  transition: background .15s, box-shadow .15s;
}
.side-tab:hover { background: #66b1ff; box-shadow: -3px 3px 16px rgba(64, 158, 255, .55); }
.side-tab:active { background: #3a8ee6; }
.side-tab-icon { flex: none; }
.side-tab-text {
  writing-mode: vertical-rl; letter-spacing: normal;
  font-size: 14px; font-weight: 400;
}
.side-panel.open .side-tab { box-shadow: -2px 0 6px rgba(64, 158, 255, .2); }

.side-body {
  flex: 1; min-width: 0;
  background: #fff; border-left: 1px solid #e4e7ed;
  overflow-y: auto;
  padding: 14px 16px;
}

.prop-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.prop-title { font-size: 13px; font-weight: 600; color: #303133; }
.unit-switch { display: inline-flex; border: 1px solid #dcdfe6; border-radius: 3px; overflow: hidden; flex: none; }
.unit-btn {
  border: none; border-left: 1px solid #dcdfe6; background: #fff; color: #606266;
  padding: 2px 8px; font-size: 11px; line-height: 16px; cursor: pointer;
}
.unit-btn:first-child { border-left: none; }
.unit-btn:hover { background: #f0f7ff; }
.unit-btn.active { background: #409eff; color: #fff; }
.prop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 8px; }
.prop-cell { display: flex; flex-direction: column; gap: 2px; }
.prop-cell label { font-size: 11px; color: #909399; }
.prop-u { color: #a8abb2; font-weight: 400; }
.prop-cell input {
  width: 100%; padding: 4px 6px; border: 1px solid #dcdfe6; border-radius: 3px;
  font-size: 13px; color: #303133;
}
.prop-cell input:focus { outline: none; border-color: #409eff; }
.prop-angle { grid-column: 1 / 3; }
.prop-lock {
  display: flex; align-items: center; gap: 5px; margin: 9px 0 2px;
  font-size: 12px; color: #606266; cursor: pointer;
}
.prop-tip { font-size: 11px; color: #a8abb2; line-height: 1.55; margin-top: 6px; }

/* 对齐 / 分布图标区（仿 Illustrator 属性面板） */
.panel-sec { margin-top: 14px; padding-top: 10px; border-top: 1px solid #ebeef5; }
.panel-sec-title { font-size: 11px; color: #909399; margin-bottom: 7px; }
.align-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px;
}
.align-grid-dist { margin-top: 0; }
.align-grid + .panel-sec-title { margin-top: 10px; }
.align-btn {
  height: 32px; padding: 0; display: flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: 4px; background: transparent;
  color: #606266; cursor: pointer;
  transition: background .12s, color .12s;
}
.align-btn:hover { background: #ecf5ff; color: #409eff; }
.align-btn:active { background: #d9ecff; color: #3a8ee6; }
.align-btn:disabled { color: #c0c4cc; cursor: not-allowed; background: transparent; }
.align-btn:disabled:hover { background: transparent; color: #c0c4cc; }
.align-btn svg { width: 22px; height: 22px; }

/* ───────── 绘图 / 文字工具 ───────── */
.tool-btn { color: #606266; transition: all .15s; }
.tool-btn svg { width: 18px; height: 18px; display: block; }
/* “文字”工具按钮使用 PNG 图标（原图 33×30）；宽度固定 20px、高度 20px */
#toolText img { width: 20px; height: 20px; }
.tool-btn.active img { filter: brightness(0) invert(1); }
.tool-btn:hover { color: #409eff; border-color: #c6e2ff; background: #ecf5ff; }
.tool-btn.active { color: #fff; background: #409eff; border-color: #409eff; }
.tool-btn.active:hover { color: #fff; background: #3a8ee6; border-color: #3a8ee6; }
/* 几何形状栏按钮：与字体样式栏按钮同尺寸（26×26，图标 14px） */
.shape-toolbar .btn.icon-only { width: 26px; height: 26px; }
.shape-toolbar .btn.icon-only svg { width: 14px; height: 14px; }
.shape-toolbar .btn.icon-only img { width: 14px; height: 14px; }
/* 表格图标：原始 PNG 为 39×37 非正方形，强制方形会变形 → 等比缩放，横向 = 标准 14px × 120% = 16.8px */
#toolTable img { width: 16.8px; height: auto; }

.text-toolbar, .shape-toolbar {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px;
  border: 1px solid #e4e7ed; border-radius: 4px; background: #fafbfc;
}
.text-toolbar select {
  height: 26px; padding: 0 6px; border: 1px solid #dcdfe6; border-radius: 3px;
  background: #fff; font-size: 12px; color: #606266; cursor: pointer;
}
.text-toolbar select:focus { outline: none; border-color: #409eff; }
.text-toolbar input[type="number"] {
  height: 26px; padding: 0 6px; border: 1px solid #dcdfe6; border-radius: 3px;
  background: #fff; font-size: 12px; color: #606266; text-align: center;
}
.text-toolbar input[type="number"]:focus { outline: none; border-color: #409eff; }
/* 隐藏 number input 的上下箭头（与字号 A+/A- 按钮功能重复，避免视觉混乱） */
.text-toolbar input[type="number"]::-webkit-inner-spin-button,
.text-toolbar input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.text-toolbar input[type="number"] { -moz-appearance: textfield; }
.color-wrap { display: inline-flex; align-items: center; }
.color-wrap input[type="color"] {
  width: 28px; height: 26px; padding: 0; border: 1px solid #dcdfe6; border-radius: 3px;
  cursor: pointer; background: #fff; overflow: hidden;
}
.color-wrap input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.color-wrap input[type="color"]::-webkit-color-swatch { border: none; }

.text-tgl {
  width: 26px; height: 26px; font-size: 12px; font-weight: 700;
  padding: 0; border: 1px solid #dcdfe6; border-radius: 3px; background: #fff;
  cursor: pointer; color: #606266; display: inline-flex; align-items: center; justify-content: center;
}
.text-tgl:hover { color: #409eff; border-color: #c6e2ff; background: #ecf5ff; }
.text-tgl.active { color: #fff; background: #409eff; border-color: #409eff; }
.text-tgl:disabled, .text-tgl:disabled:hover {
  color: #c0c4cc; border-color: #e4e7ed; background: #f5f7fa; cursor: not-allowed;
}
/* 自动缩小按钮（双字，需更宽） */
#autofitBtn { width: auto; min-width: 38px; padding: 0 6px; }

/* 文字颜色 A 按钮：A 字母 + 底部色条 */
.color-btn-wrap { position: relative; }
.color-btn { padding: 0; width: auto; }
.color-a {
  display: inline-block;
  width: 18px; height: 18px;
  font-size: 13px; font-weight: 700;
  line-height: 18px; text-align: center;
  border-bottom: 3px solid #000;
  color: #606266;
}
/* 线条颜色按钮：图标在上，颜色横条在下（与文字颜色按钮同构）
   特异性 (0,3,0) 必须压过 .btn.icon-only img (0,2,1) 的 18x18 强制尺寸 */
.btn.icon-only .color-a .color-ico {
  display: block;
  width: 17px;
  height: 13px;
  margin: 2px auto 0;
  -webkit-user-drag: none;
  user-select: none;
}

/* ═══════════════════ 颜色选择 popover ═══════════════════ */
.color-popover {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 6px;
  background: #fff;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  padding: 10px 12px;
  z-index: 2000;
  min-width: 210px;
  font-size: 12px;
  color: #606266;
  user-select: none;
}
.color-popover .popover-row { margin-bottom: 8px; }
.color-popover .popover-row:last-child { margin-bottom: 0; }
.color-popover .popover-section-title {
  font-size: 11px; color: #909399;
  margin-bottom: 4px;
}

/* 主题色网格（5 行 × 8 列 = 40 个色块） */
.theme-grid {
  display: grid;
  grid-template-columns: repeat(8, 16px);
  gap: 2px;
}
.theme-grid .swatch {
  width: 16px; height: 16px;
  border: 1px solid #e4e7ed;
  border-radius: 2px;
  cursor: pointer;
  box-sizing: border-box;
  padding: 0;
  transition: transform .08s;
}
.theme-grid .swatch:hover {
  transform: scale(1.3);
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64,158,255,.2);
  z-index: 1;
  position: relative;
}

/* 标准色一行 */
.standard-row {
  display: flex;
  gap: 2px;
}
.standard-row .swatch {
  width: 16px; height: 16px;
  border: 1px solid #e4e7ed;
  border-radius: 2px;
  cursor: pointer;
  box-sizing: border-box;
  padding: 0;
  transition: transform .08s;
}
.standard-row .swatch:hover {
  transform: scale(1.25);
  border-color: #409eff;
}

/* 线条粗细：自定义下拉框（每项带预览线） */
.lw-dropdown { position: relative; }
.lw-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 8px;
  border: 1px solid #dcdfe6;
  border-radius: 3px;
  background: #fff;
  cursor: pointer;
  user-select: none;
}
.lw-trigger:hover { border-color: #c0c4cc; }
.lw-trigger-line {
  flex: 1;
  height: 0;
  background: none;
  border-top: 1px solid #303133;
  min-width: 30px;
}
.lw-trigger-label {
  font-size: 12px;
  color: #606266;
  min-width: 42px;
  font-variant-numeric: tabular-nums;
}
.lw-trigger-caret {
  font-size: 10px;
  color: #909399;
}
.lw-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 2px;
  background: #fff;
  border: 1px solid #dcdfe6;
  border-radius: 3px;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  z-index: 2100;
  max-height: 240px;
  overflow-y: auto;
}
.lw-menu .lw-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  cursor: pointer;
  transition: background .06s;
}
.lw-menu .lw-item:hover { background: #f5f7fa; }
.lw-menu .lw-item.active { background: #ecf5ff; }
.lw-menu .lw-line {
  flex: 1;
  height: 0;
  background: none;
  border-top-style: solid;
  border-top-color: #303133;
  min-width: 40px;
}
.lw-menu .lw-label {
  font-size: 11px;
  color: #606266;
  min-width: 50px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* 预览区 */
.preview-swatch {
  display: inline-block;
  width: 20px; height: 14px;
  border: 1px solid #dcdfe6;
  border-radius: 2px;
  vertical-align: middle;
  margin: 0 4px;
}
.preview-hex {
  font-family: Consolas, Monaco, monospace;
  color: #606266;
  font-size: 12px;
}

/* 自定义颜色行 */
.custom-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.custom-row input[type="color"] {
  width: 28px; height: 22px;
  border: 1px solid #dcdfe6;
  border-radius: 2px;
  padding: 0;
  cursor: pointer;
  background: #fff;
}
.custom-row .custom-hex {
  font-family: Consolas, Monaco, monospace;
  font-size: 12px;
  color: #606266;
}

/* 绘图模式下画布光标变十字 */
.drawing-crosshair .canvas-wrap { cursor: crosshair !important; }
.textmode-text .canvas-wrap { cursor: text !important; }

/* 临时绘制预览路径（虚线） */
.draw-preview { pointer-events: none; stroke: #409eff; stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* 画布上浮动的 textarea（用户输入文字时） */
.text-input-overlay {
  position: absolute; z-index: 1000;
  padding: 4px 6px; min-width: 60px; min-height: 24px;
  border: 1px solid #409eff; border-radius: 2px;
  background: rgba(255,255,255,.95); outline: none; resize: both;
  font-family: inherit; font-size: 14px; color: #333; line-height: 1.4;
  white-space: pre-wrap; overflow: hidden;
  box-shadow: 0 2px 8px rgba(64,158,255,.2);
}

/* 原地编辑：透明无边框输入框，经 .text-inline-box 旋转/定位后精确覆盖原文字 */
.text-inline-box {
  position: absolute; left: 0; top: 0; z-index: 1000;
  transform-origin: 0 0;
}
.text-input-overlay.is-inline {
  padding: 0; margin: 0; min-width: 0; min-height: 0;
  border: 0; border-radius: 0; background: transparent;
  box-shadow: none; resize: none; outline: none;
  white-space: pre; line-height: 1; overflow: hidden;
  caret-color: #0050c8;
}

/* ───────── 表格编辑覆盖层（所见即所得） ───────── */
.table-edit-overlay {
  position: absolute;
  z-index: 500;
  border-collapse: collapse;
  table-layout: fixed;
  background: transparent;
  pointer-events: auto;
}
/* 只读画布（素材页）上的表格视图：点击穿透给 SVG，由几何 OBB 负责命中/选中 */
.table-edit-overlay.is-readonly-canvas {
  pointer-events: none;
}
.table-edit-overlay td {
  /* 网格线由 HTML 边框自绘（颜色/线宽由模型经 --tbl-stroke/--tbl-lw 注入）；
     collapse 下相邻格边框自动合并，合并单元格天然无内线 */
  border: var(--tbl-lw, 1px) solid var(--tbl-stroke, #000);
  padding: 0;              /* 实际 padding 随缩放由 JS 写入 td.style.padding */
  margin: 0;
  vertical-align: top;     /* 逐格对齐由 JS 写 inline style（text-align + vertical-align） */
  overflow: hidden;
  position: relative;      /* 行列拖手柄的定位基准 */
  box-sizing: border-box;
  /* td 保持 table-cell（撑起 table-layout:fixed 的列宽/rowspan/colspan），
     对齐用 table-cell 原生机制：text-align 水平 + vertical-align 垂直，
     格内唯一行内盒是 .cell-input；line-height:0 消除 strut，避免垂直位置被
     td 自身行距顶偏（垂直居中完全由 .cell-input 的行盒决定） */
  line-height: 0;
}
.table-edit-overlay .cell-input {
  display: inline-block;   /* 行内盒：被 td 的 text-align/vertical-align 双向定位，空盒(0×0)也精确落点 */
  box-sizing: border-box;
  border: none;
  outline: none;
  background: transparent;
  margin: 0;
  padding: 0;
  max-width: 100%;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  font-style: inherit;
  color: inherit;
  line-height: 1;
  white-space: pre;
  /* 整表下划线经 text-decoration 传播不会进入原子行内盒（inline-block），
     显式 inherit 补上；逐格覆盖时 JS 写的 inline style 优先生效 */
  text-decoration: inherit;
  /* 宽度收缩到内容（inline-block 收缩包裹），空格宽 0，光标正好落在对齐位置 */
}
/* 矩形选区高亮（含当前焦点格，:focus-within 样式叠加在其上） */
.table-edit-overlay td.cell-sel {
  background: rgba(64,158,255,.10);
  box-shadow: inset 0 0 0 1px rgba(64,158,255,.55);
}
.table-edit-overlay td:focus-within {
  background: rgba(64,158,255,.16);
  box-shadow: inset 0 0 0 1.5px rgba(64,158,255,.85);
}
/* 非编辑态：点在文字上 = 进编辑（cell-input 可命中），点在空白 = 选中/移动整表 */
.table-edit-overlay:not(.is-editing) .cell-input {
  user-select: none;
  cursor: text;
  /* 空格无文字时给最小可点击宽度，否则点它永远命中 td 空白进不了编辑 */
  min-width: 12px;
}
/* 非编辑态空白处提示可拖动移表 */
.table-edit-overlay:not(.is-editing) td { cursor: grab; }
/* 提交后编辑 DOM 直接转只读：行列拖手柄隐藏（DOM 保留，重进编辑时整体替换） */
.table-edit-overlay:not(.is-editing) .table-col-resizer,
.table-edit-overlay:not(.is-editing) .table-row-resizer {
  display: none;
}

/* 列宽拖拽手柄 */
.table-col-resizer {
  position: absolute;
  top: 0; right: -3px;
  width: 6px; height: 100%;
  cursor: col-resize;
  z-index: 10;
}
.table-col-resizer:hover { background: rgba(64,158,255,.3); }
/* 行高拖拽手柄 */
.table-row-resizer {
  position: absolute;
  left: 0; bottom: -3px;
  width: 100%; height: 6px;
  cursor: row-resize;
  z-index: 10;
}
.table-row-resizer:hover { background: rgba(64,158,255,.3); }

/* ───────── 表格浮动操作按钮（WPS 风格：底部+加行 / 右侧+加列 / 右下角角标拖移） ───────── */
/* 按钮层与表格 AABB 重合，本身不拦截事件；仅编辑态加 is-active 显示 */
.table-actions {
  position: absolute;
  z-index: 501;
  display: none;
  pointer-events: none;
}
.table-actions.is-active { display: block; }
.table-action-btn {
  position: absolute;
  width: 22px;
  height: 22px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid #c8cdd6;
  border-radius: 3px;
  color: #5a5f6a;
  box-shadow: 0 1px 4px rgba(0,0,0,.14);
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
  transition: border-color .12s, color .12s;
}
.table-action-btn:hover {
  color: #0050c8;
  border-color: #0050c8;
}
.table-action-btn .ta-plus {
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  margin-top: -1px;   /* 光学居中：+ 字符视觉重心偏下 */
}
.table-action-btn .ta-minus {
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  margin-top: -2px;   /* 光学居中：− 字符视觉重心偏上 */
}
/* 底部正中：增加一行；间隙 8px（屏幕恒定 px，不随画布缩放） */
.table-action-btn.tbl-add-row {
  left: 50%;
  top: 100%;
  transform: translate(-50%, 8px);
}
/* 底部"+"右侧：删除最后一行（按钮 22px + 间隙 6px → 中心右移 28px） */
.table-action-btn.tbl-del-row {
  left: 50%;
  top: 100%;
  transform: translate(calc(-50% + 28px), 8px);
}
/* 右侧正中：增加一列 */
.table-action-btn.tbl-add-col {
  left: 100%;
  top: 50%;
  transform: translate(8px, -50%);
}
/* 右侧"+"外侧：删除最后一列 */
.table-action-btn.tbl-del-col {
  left: 100%;
  top: 50%;
  transform: translate(36px, -50%);
}
/* 删行/删列"-"：浅灰弱化外观 */
.table-action-btn.is-subtle {
  color: #b4b9c2;
  border-color: #dfe3e9;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.table-action-btn.is-subtle:hover {
  color: #8a909c;
  border-color: #b9bfc9;
}
/* 只剩 1 行/1 列：删按钮禁用 */
.table-action-btn:disabled {
  color: #ccd1da;
  border-color: #eaecf1;
  background: #f7f8fa;
  box-shadow: none;
  cursor: not-allowed;
}
.table-action-btn:disabled:hover {
  color: #ccd1da;
  border-color: #eaecf1;
}

/* ───────── 表格尺寸选择下拉面板 ───────── */
.table-dropdown {
  position: relative;
  display: inline-block;
}
.table-grid-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 2000;
  display: none;
  background: #fff;
  border: 1px solid #dcdfe6;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,.15);
  padding: 10px;
  /* 向下/向右动态扩展时面板随之变大，限高避免超出视口（右/下各留 12px 扩展触发区） */
  max-height: 70vh;
  overflow: auto;
}
.table-dropdown.open .table-grid-panel {
  display: block;
}
.table-grid-label {
  text-align: center;
  font-size: 13px;
  color: #303133;
  margin-bottom: 8px;
  font-weight: 600;
  /* 宽度跟随网格（3 列扁宽格 ≈ 206px），留出右扩触发区 */
  min-width: 100%;
  box-sizing: border-box;
}
.table-grid {
  display: grid;
  /* 轨道由 JS 按当前行列数动态写入（默认 3 列 × 8 行） */
  grid-template-columns: repeat(3, 66px);
  grid-template-rows: repeat(8, 22px);
  gap: 2px;
  /* 下/右留白 = 鼠标移出边界时持续新增行/列的触发区 */
  padding: 0 12px 12px 0;
}
.table-grid-cell {
  /* 宽 = 高 × 3：扁宽格，匹配横长箱面表格 */
  width: 66px;
  height: 22px;
  border: 1px solid #c0c4cc;
  background: #fff;
  box-sizing: border-box;
  cursor: pointer;
}
.table-grid-cell.active {
  background: #ff9a3c;
  border-color: #ff8c00;
}