/* 标签编辑器样式 */
*{box-sizing:border-box}
html,body{height:100%;overflow:hidden;margin:0}
body{background:#f0f2f5}

/* 顶部菜单栏 */
.editor-topbar{height:48px;background:#fff;border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 12px;gap:4px;z-index:50;position:relative}
.editor-topbar .logo{font-size:16px;font-weight:700;color:var(--primary);margin-right:8px;white-space:nowrap;display:flex;align-items:center;gap:6px}
.editor-topbar .logo .logo-img{height:34px;width:auto;object-fit:contain}
.tb-group{display:flex;align-items:center;gap:2px;padding:0 6px;border-right:1px solid var(--border)}
.tb-group:last-child{border-right:none}
.tb-btn{padding:6px 10px;border-radius:5px;color:var(--text-2);font-size:13px;display:flex;align-items:center;gap:4px;cursor:pointer;transition:all .12s;background:none;border:none;white-space:nowrap}
.tb-btn:hover{background:var(--bg);color:var(--text)}
.tb-btn.active{background:var(--primary-light,#e8ebff);color:var(--primary);font-weight:500}
.tb-btn.primary{background:var(--primary);color:#fff}
.tb-btn.primary:hover{background:var(--primary-dark);color:#fff}
.tb-btn.success{background:var(--success);color:#fff}
.tb-btn.success:hover{background:#06ad55;color:#fff}
.tb-btn .icon{font-size:15px}
.tb-btn.user-btn{gap:6px}
.tb-btn.user-btn .username{font-weight:500}
.tb-btn.user-btn .badge{background:linear-gradient(135deg,#f6d365,#fda085);color:#fff;font-size:10px;padding:1px 5px;border-radius:10px;font-weight:600}
.tb-btn.logout-btn{padding:6px 8px}
.tb-btn.logout-btn:hover{color:#e64545;background:#fef0f0}
.tb-btn.login-btn{background:#f0f0f0;color:var(--text)}
.tb-btn.login-btn:hover{background:#e5e5e5}
.tb-btn.disabled{color:#bbb;cursor:not-allowed;opacity:.5}
.tb-btn.disabled:hover{background:none;color:#bbb}
.tb-btn.disabled .icon{opacity:.5}
.btn.disabled{color:#777;cursor:not-allowed;opacity:1;background:#e0e2e6;border-color:#d5d8dd}
.btn.disabled:hover{background:#e0e2e6;color:#777}
.tb-btn.remove-watermark{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;font-weight:600}
.tb-btn.remove-watermark:hover{background:linear-gradient(135deg,#5568d3 0%,#633d8c 100%);color:#fff;transform:translateY(-1px);box-shadow:0 4px 12px rgba(102,126,234,.3)}
.tb-btn.remove-watermark .icon{animation:sparkle 2s infinite}
@keyframes sparkle{0%,100%{opacity:1}50%{opacity:.5}}
.guest-badge{display:inline-flex;align-items:center;gap:3px;background:linear-gradient(135deg,#f093fb,#f5576c);color:#fff;font-size:11px;padding:2px 8px;border-radius:10px;font-weight:600;margin-left:6px}
.tb-divider{width:1px;height:20px;background:var(--border);margin:0 4px}
.tb-dropdown{position:relative}
.tb-dropdown .caret{font-size:10px;opacity:.6;margin-left:2px}
.tb-menu{display:none;position:absolute;top:100%;left:0;margin-top:4px;min-width:130px;border:1px solid var(--border);border-radius:6px;background:#fff;box-shadow:0 6px 20px rgba(0,0,0,.12);z-index:9999;overflow:hidden}
.tb-menu.show{display:block}
.tb-menu-item{padding:9px 12px;font-size:13px;color:var(--text-2);cursor:pointer;display:flex;align-items:center;gap:8px;transition:background .12s}
.tb-menu-item:hover{background:var(--primary-light);color:var(--primary)}
.tb-menu-item .icon{font-size:15px;flex-shrink:0}
.tb-menu-item .desc{margin-left:auto;font-size:11px;color:var(--text-3)}
.tb-spacer{flex:1}
.zoom-float{position:absolute;top:10px;right:10px;display:flex;align-items:center;gap:2px;background:#fff;border:1px solid #e0e0e0;border-radius:6px;padding:3px;box-shadow:0 2px 8px rgba(0,0,0,.1);z-index:100}
.zoom-float button{width:22px;height:22px;border:none;background:transparent;color:#5f6368;cursor:pointer;border-radius:4px;display:flex;align-items:center;justify-content:center;transition:all .15s}
.zoom-float button:hover{background:#f1f3f4;color:#4460ff}
.zoom-float .val{min-width:40px;text-align:center;font-size:11px;font-weight:600;color:#5f6368;padding:0 4px}
.canvas-wrap{flex:1;overflow:auto;background:#e8eaed;display:flex;align-items:flex-start;justify-content:center;padding:24px;position:relative}
/* 主体三栏布局 */
.editor-body{display:flex;height:calc(100vh - 48px);overflow:hidden}

/* 左侧元素面板 */
.editor-left{width:160px;background:#fff;border-right:1px solid var(--border);overflow-y:auto;flex-shrink:0;display:flex;flex-direction:column}
.left-section{border-bottom:1px solid var(--border)}
.left-section .title{padding:8px 12px;font-size:12px;color:var(--text-3);font-weight:600;background:#fafbfc}
.element-list{padding:6px;display:grid;grid-template-columns:1fr 1fr;gap:5px}
.element-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:8px 2px;border:1px solid var(--border);border-radius:5px;background:#fff;cursor:pointer;transition:all .12s;font-size:11px;color:var(--text-2)}
.element-btn:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-light)}
.element-btn .icon{font-size:18px;display:flex;align-items:center;justify-content:center}
.element-btn .icon svg{display:block}
.element-btn .barcode-arrow{font-size:10px;color:var(--text-3);margin-left:2px}
.element-btn.barcode-trigger{position:relative}
.element-btn.perm-disabled{opacity:.45;cursor:not-allowed;background:#f5f5f5;color:#bbb}
.element-btn.perm-disabled:hover{border-color:var(--border);color:#bbb;background:#f5f5f5}
.tb-btn.perm-disabled{opacity:.5;cursor:not-allowed}
.tb-btn.perm-disabled:hover{background:none}
.btn.perm-disabled{opacity:1;cursor:not-allowed;color:#777;background:#e0e2e6;border-color:#d5d8dd}
.btn.perm-disabled:hover{background:#e0e2e6;color:#777}

/* 条码类型下拉菜单 (position:fixed 浮层,不再占文档流) */
.barcode-menu{display:none;position:fixed;z-index:9999;margin:0;border:1px solid var(--border);border-radius:6px;background:#fff;box-shadow:0 6px 20px rgba(0,0,0,.12);overflow:hidden;max-height:70vh;overflow-y:auto}
.barcode-menu.show{display:block}
.barcode-menu .bc-menu-title{padding:6px 10px;font-size:11px;color:var(--text-3);background:#fafbfc;font-weight:600;position:sticky;top:0}
.barcode-menu .bc-item{padding:7px 10px;font-size:14px;color:var(--text-2);cursor:pointer;display:flex;align-items:center;justify-content:space-between;transition:background .12s}
.barcode-menu .bc-item:hover{background:var(--primary-light);color:var(--primary)}
.barcode-menu .bc-item .bc-name{font-weight:500}
/* 形状菜单: 三分类显示 (方形 / 多边形 / 圆形) */
.shape-cat-group{border-bottom:1px solid #f0f2f5}
.shape-cat-group:last-child{border-bottom:none}
.shape-cat-title{padding:6px 10px;font-size:11px;color:var(--text-3);background:#fafbfc;font-weight:600;position:sticky;top:0;display:flex;align-items:center;gap:4px}
.shape-cat-title .cat-icon{font-size:12px;opacity:.8}
.shape-cat-items{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:#f0f2f5}
.shape-cat-items .bc-item{padding:10px 6px;flex-direction:column;gap:3px;font-size:11px;text-align:center;justify-content:center;background:#fff}
.shape-cat-items .bc-item .bc-name{display:flex;flex-direction:column;align-items:center;gap:3px;width:100%}
.shape-cat-items .bc-item .shape-ico{font-size:18px;line-height:1;color:var(--primary);opacity:.85}
.shape-cat-items .bc-item:hover .shape-ico{opacity:1}
.left-templates{padding:8px}
.left-templates .tpl-item{padding:8px 10px;border-radius:5px;cursor:pointer;font-size:12px;color:var(--text-2);display:flex;align-items:center;gap:6px}
.left-templates .tpl-item:hover{background:var(--bg);color:var(--text)}
.left-templates .tpl-item .tpl-del-btn{flex:0 0 24px;width:24px;height:24px;padding:0;border:1px solid transparent;background:transparent;color:#aaa;border-radius:4px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:13px;line-height:1}
.left-templates .tpl-item .tpl-del-btn:hover{border-color:#f2c6c6;background:#fff1f1;color:#d64545}
.tpl-card .tpl-card-del{background:#fff;color:#d64545;border:1px solid #f2c6c6}
.tpl-card .tpl-card-del:hover{background:#fff1f1;border-color:#d64545;color:#b53232}

/* 图标选择面板 */
.icon-modal{max-width:820px}
.icon-modal .modal-header{padding:8px 16px}
.icon-modal .modal-body{padding:0}
/* 父标签 (系统图标 / 自定义图标) */
.icon-parent-tabs{display:flex;gap:0;border-bottom:2px solid var(--border)}
.icon-parent-tab{padding:8px 20px;font-size:14px;color:var(--text-3);background:transparent;border:none;border-bottom:2px solid transparent;margin-bottom:-2px;cursor:pointer;transition:all .12s;font-weight:500}
.icon-parent-tab:hover{color:var(--primary)}
.icon-parent-tab.active{color:var(--primary);border-bottom-color:var(--primary);font-weight:600}
/* 子标签 */
.icon-subtabs{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;padding:6px 8px;border-bottom:1px solid var(--border)}
.icon-subtab{padding:4px 6px;font-size:12px;color:var(--text-3);background:transparent;border:1px solid transparent;border-radius:4px 4px 0 0;cursor:pointer;transition:all .12s;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.icon-subtab:hover{color:var(--primary);background:var(--primary-light)}
.icon-subtab.active{color:var(--primary);background:#fff;border-color:var(--border);border-bottom-color:#fff;margin-bottom:-1px;font-weight:600}
/* 图标网格 */
.icon-grids-wrap{position:relative}
.icon-picker-grid{display:none;grid-template-columns:repeat(10,1fr);gap:4px;padding:8px;max-height:52vh;overflow-y:auto}
.icon-picker-grid.show{display:grid}
.icon-picker-grid .icon-cell{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:1;font-size:24px;border:1px solid var(--border);border-radius:4px;cursor:pointer;transition:all .12s}
.icon-picker-grid .icon-cell:hover{border-color:var(--primary);background:var(--primary-light);color:var(--primary)}
.icon-picker-grid .icon-cert{font-size:13px;color:var(--text-2);display:flex;align-items:center;justify-content:center}
.icon-picker-grid .icon-cert img{max-width:36px;max-height:36px;object-fit:contain}
.icon-picker-grid .cert-placeholder{color:var(--text-3);font-size:16px;line-height:1}
.icon-picker-grid .cert-fallback{font-weight:600;font-size:11px;text-align:center;word-break:break-all;line-height:1.2}
.icon-picker-grid .icon-subtitle{grid-column:1 / -1;margin:4px 2px 0;padding:4px 6px;font-size:11px;color:var(--text-3);background:var(--bg-2);border-radius:3px;font-weight:600}

/* 文本预设弹窗 */
.preset-tabs-wrap{border-bottom:1px solid var(--border);padding-bottom:0}
.preset-tabs{display:flex;gap:2px;padding:6px 8px;overflow-x:auto}
.preset-tab{padding:5px 10px;font-size:12px;color:var(--text-3);background:#f5f5f5;border:1px solid transparent;border-radius:4px;cursor:pointer;white-space:nowrap;transition:all .12s}
.preset-tab:hover{color:var(--primary);background:var(--primary-light)}
.preset-tab.active{color:#fff;background:var(--primary);border-color:var(--primary)}
.preset-grids-wrap{max-height:52vh;overflow-y:auto;padding:8px}
.preset-grid{display:none;grid-template-columns:repeat(2,1fr);gap:6px}
.preset-grid.show{display:grid}
.preset-item{
  padding:8px 10px;border:1px solid var(--border);border-radius:5px;
  background:#fff;cursor:pointer;transition:all .12s;
}
.preset-item:hover{border-color:var(--primary);background:var(--primary-light);transform:translateY(-1px)}
.preset-label{font-size:12px;font-weight:500;color:var(--text);margin-bottom:3px}
.preset-preview{font-size:11px;color:var(--text-3);line-height:1.4;white-space:pre-line;max-height:48px;overflow:hidden}
.preset-item{position:relative}
.preset-del{
  position:absolute;top:4px;right:6px;width:16px;height:16px;line-height:14px;text-align:center;
  border-radius:50%;background:rgba(255,77,79,.85);color:#fff;font-size:12px;cursor:pointer;
  display:none;z-index:2;transition:background .12s;
}
.preset-item:hover .preset-del{display:block}
.preset-del:hover{background:var(--danger)}
.preset-empty{grid-column:1/-1;padding:30px;text-align:center;color:var(--text-3);font-size:13px}
.preset-new-bar{display:flex;justify-content:center;padding:10px;border-top:1px solid var(--border);margin-top:4px}
.preset-new-btn{background:var(--primary);color:#fff;border:none;padding:6px 16px;border-radius:4px;cursor:pointer;font-size:12px}
.preset-new-btn:hover{background:var(--primary-dark)}
.preset-tab.empty{opacity:.6;font-style:italic}

/* 中间画布区 */
.editor-center{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
.canvas-toolbar{height:36px;background:#fff;border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 12px;gap:8px;font-size:12px;color:var(--text-3)}
.canvas-toolbar .info{display:flex;gap:16px}
.canvas-toolbar .tabs{display:flex;gap:0;margin-left:auto}
.canvas-toolbar .tab{padding:6px 14px;cursor:pointer;color:var(--text-2);border-bottom:2px solid transparent;font-size:13px}
.canvas-toolbar .tab.active{color:var(--primary);border-bottom-color:var(--primary);font-weight:500}
.canvas-area{flex:1;display:flex;position:relative;overflow:hidden;min-height:0}
/* 标尺覆盖层: 固定在视口边缘, 不随画布滚动/缩放移动 (像 Figma/PS) */
.ruler-overlay{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:20;display:none}
.ruler-overlay.on{display:block}
.ruler-corner{position:absolute;top:0;left:0;width:22px;height:22px;background:#e8e8e8;border-right:1px solid #c8c8c8;border-bottom:1px solid #c8c8c8}
.ruler-top{position:absolute;top:0;left:22px;right:0;height:22px;background:#f5f5f5;border-bottom:1px solid #c8c8c8;overflow:hidden}
.ruler-left{position:absolute;top:22px;left:0;width:22px;bottom:0;background:#f5f5f5;border-right:1px solid #c8c8c8;overflow:hidden}
.ruler-top svg,.ruler-left svg{display:block}
/* 标尺追踪游标线 (放在 ruler-overlay 顶层, 覆盖在标尺上方) */
.ruler-guide-h{position:absolute;top:0;left:22px;right:0;height:22px;pointer-events:none;display:none;z-index:5}
.ruler-guide-h.active{display:block}
.ruler-guide-h .guide-line{position:absolute;top:0;bottom:0;background:#4460ff;opacity:.75}
.ruler-guide-h .guide-label{position:absolute;background:#4460ff;color:#fff;font-size:9px;padding:1px 3px;border-radius:2px;white-space:nowrap}
.ruler-guide-v{position:absolute;top:22px;left:0;width:22px;bottom:0;pointer-events:none;display:none;z-index:5}
.ruler-guide-v.active{display:block}
.ruler-guide-v .guide-line{position:absolute;left:0;right:0;background:#4460ff;opacity:.75}
.ruler-guide-v .guide-label{position:absolute;background:#4460ff;color:#fff;font-size:9px;padding:1px 3px;border-radius:2px;white-space:nowrap}
.ruler-guide-v .guide-label-v{transform:rotate(-90deg);transform-origin:center center;-webkit-transform:rotate(-90deg);-webkit-font-smoothing:antialiased;font-smooth:always;backface-visibility:hidden;padding:2px 3px}
.canvas-wrap{flex:1;overflow:auto;background:#e8eaed;display:flex;align-items:center;justify-content:center}
.canvas-wrap>*{margin:0}
.canvas-stage{background:transparent;box-shadow:none;position:absolute;left:0;top:0}
.canvas-stage:not(.ready){visibility:hidden}
.canvas-stage .dim-label{position:absolute;font-size:12px;color:#4460ff;font-weight:500;white-space:nowrap;pointer-events:none;z-index:10}
.canvas-stage .dim-w{bottom:-22px;left:50%;transform:translateX(-50%)}
.canvas-stage .dim-h{right:-30px;top:50%;transform:translateY(-50%) rotate(90deg);transform-origin:center}
/* 弧线端点拖动把手 */
.canvas-stage .arc-handles{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none;z-index:50}
.canvas-stage .arc-handle{position:absolute;display:none;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.35);pointer-events:auto;cursor:crosshair;user-select:none;touch-action:none}
.canvas-stage .arc-handle:active{transform:scale(1.25)}
/* 4 种把手颜色 */
.canvas-stage .arc-handle.handle-start {background:#8e24aa}  /* 起点紫 */
.canvas-stage .arc-handle.handle-end   {background:#ef6c00}  /* 终点橙 */
.canvas-stage .arc-handle.handle-origin{background:#1e88e5}  /* 圆心蓝 */
.canvas-stage .arc-handle.handle-radius{background:#43a047}  /* 半径绿 */

/* 模式: half_arc (弧线) → 显示 start + end + radius */
.canvas-stage .arc-handles.mode-half_arc .handle-start,
.canvas-stage .arc-handles.mode-half_arc .handle-end,
.canvas-stage .arc-handles.mode-half_arc .handle-radius{display:block}
/* 模式: sector (扇形) → 显示 origin + radius + start + end */
.canvas-stage .arc-handles.mode-sector .handle-origin,
.canvas-stage .arc-handles.mode-sector .handle-radius,
.canvas-stage .arc-handles.mode-sector .handle-start,
.canvas-stage .arc-handles.mode-sector .handle-end{display:block}

/* ===== 表格列宽/行高拖动把手 ===== */
/*   容器: 与 .arc-handles 对齐  (position:absolute; left:0; top:0; width:0; height:0; pointer-events:none)
 *   把手的 left/top 直接使用 "虚拟画布坐标 × state.zoom" 作为 CSS 像素 (与 ArcHandles 同一套坐标系,
 *   杜绝 Experience 476189 的双缩放 bug). 单条 resize 线长度通过 height/width CSS 变量或绝对定位值给出.       */
.canvas-stage .table-handles{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none;z-index:45}
/* 列把手: 纵向 8px 热区. height = 当前表格的 CSS 像素高 (通过 inline style 指定). */
.canvas-stage .table-handles .th-col{position:absolute;width:8px;pointer-events:auto;cursor:col-resize;user-select:none;touch-action:none;margin-left:-4px;background:transparent;border-left:1px dashed transparent;border-right:1px dashed transparent;transition:background .12s,border-color .12s}
.canvas-stage .table-handles .th-row{position:absolute;height:8px;pointer-events:auto;cursor:row-resize;user-select:none;touch-action:none;margin-top:-4px;background:transparent;border-top:1px dashed transparent;border-bottom:1px dashed transparent;transition:background .12s,border-color .12s}
.canvas-stage .table-handles .th-col::before,
.canvas-stage .table-handles .th-row::before{content:'';position:absolute;border-radius:2px;transition:background .12s}
.canvas-stage .table-handles .th-col::before{left:50%;top:0;transform:translateX(-50%);width:2px;height:100%;background:rgba(99,102,241,0)}
.canvas-stage .table-handles .th-row::before{top:50%;left:0;transform:translateY(-50%);height:2px;width:100%;background:rgba(99,102,241,0)}
.canvas-stage .table-handles .th-col:hover,
.canvas-stage .table-handles .th-col.dragging{background:rgba(99,102,241,.08);border-color:rgba(99,102,241,.45)}
.canvas-stage .table-handles .th-row:hover,
.canvas-stage .table-handles .th-row.dragging{background:rgba(99,102,241,.08);border-color:rgba(99,102,241,.45)}
.canvas-stage .table-handles .th-col:hover::before,
.canvas-stage .table-handles .th-col.dragging::before{background:rgba(99,102,241,.9)}
.canvas-stage .table-handles .th-row:hover::before,
.canvas-stage .table-handles .th-row.dragging::before{background:rgba(99,102,241,.9)}
/* 把手两头显示两个小圆点增加可辨识度 (类似 Excel 列边框提示) */
.canvas-stage .table-handles .th-col::after,
.canvas-stage .table-handles .th-row::after{content:'';position:absolute;background:#6366f1;border-radius:50%;box-shadow:0 0 0 2px #fff;border:0}
.canvas-stage .table-handles .th-col::after{left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px}
.canvas-stage .table-handles .th-row::after{top:50%;left:50%;width:8px;height:8px;margin:-4px 0 0 -4px}
/* 临时"实时位置线" (dragging 时显示) — 父容器 width=0;height=0 所以 100% 不生效, 全部用 JS 写内联具体尺寸 */
.canvas-stage .table-handles .th-ghost-col,
.canvas-stage .table-handles .th-ghost-row{position:absolute;pointer-events:none;display:none;background:#6366f1;opacity:.95;z-index:100;box-shadow:0 0 0 1px rgba(255,255,255,.5)}
.canvas-stage .table-handles .th-ghost-col{top:0;width:2px}
.canvas-stage .table-handles .th-ghost-row{left:0;height:2px}
.canvas-stage .table-handles.dragging-col .th-ghost-col,
.canvas-stage .table-handles.dragging-row .th-ghost-row{display:block}

#c{display:block;background:#fff}

/* 画布元素右键菜单 */
.cm-ctx{display:none;position:fixed;z-index:10000;min-width:180px;background:#fff;border:1px solid var(--border);border-radius:6px;box-shadow:0 8px 24px rgba(0,0,0,.14);padding:4px;overflow:hidden}
.cm-ctx.show{display:block}
.cm-ctx .cm-item{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:4px;font-size:13px;color:var(--text);cursor:pointer;white-space:nowrap}
.cm-ctx .cm-item:hover{background:var(--primary-light);color:var(--primary)}
.cm-ctx .cm-item.danger{color:var(--danger)}
.cm-ctx .cm-item.danger:hover{background:#ffecec;color:var(--danger)}
.cm-ctx .cm-item .cm-ic{font-size:14px;min-width:16px;text-align:center}
.cm-ctx .cm-sep{height:1px;background:var(--border);margin:4px 2px}

/* 数据输入区(底部可折叠) */
.data-panel{background:#fff;border-top:1px solid var(--border);height:240px;display:flex;flex-direction:column;overflow:hidden}
.data-panel.collapsed{height:36px}
.data-panel .head{height:36px;display:flex;align-items:center;padding:0 12px;border-bottom:1px solid var(--border);gap:8px;cursor:pointer;user-select:none}
.data-panel .head .title{font-size:13px;font-weight:500;color:var(--text)}
.data-panel .head .info{font-size:12px;color:var(--text-3)}
.data-panel .head .actions{margin-left:auto;display:flex;gap:6px}
.data-grid-wrap{flex:1;overflow:auto;padding:8px}
.data-grid{width:100%;border-collapse:collapse;font-size:12px}
.data-grid th,.data-grid td{border:1px solid var(--border);padding:4px 8px;min-width:80px;white-space:nowrap}
.data-grid th{background:#fafbfc;position:sticky;top:0;font-weight:500}
.data-grid td input{width:100%;border:none;background:transparent;font-size:12px;padding:2px 0;outline:none}
.data-grid td input:focus{background:var(--primary-light)}
.data-grid .row-num{background:#fafbfc;text-align:center;color:var(--text-3);width:40px;cursor:pointer;user-select:none}
.data-grid .row-num:hover{background:#eef1ff;color:#4460ff}
.data-grid tr.row-active .row-num{background:#4460ff;color:#fff}
.data-grid tr.row-active{background:#f5f7ff}

/* 右侧属性面板 */
.editor-right{width:260px;background:#fff;border-left:1px solid var(--border);overflow-y:auto;flex-shrink:0}
.right-empty{padding:40px 20px;text-align:center;color:var(--text-3);font-size:13px}
.right-empty .icon{font-size:40px;margin-bottom:8px}
.prop-group{border-bottom:1px solid var(--border);padding:12px 14px}
.prop-group .group-title{font-size:11px;color:var(--text-3);font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px}
.prop-row{display:flex;align-items:center;margin-bottom:8px;gap:8px}
.prop-row:last-child{margin-bottom:0}
.prop-row label{width:auto;font-size:12px;color:var(--text-2);flex-shrink:0}
.var-btns-wrap{display:inline-flex;align-items:center;flex-wrap:wrap;gap:3px;margin-left:4px}
.var-ins-btn{display:inline-block;font-size:11px;padding:1px 6px;background:#eef1ff;color:#4460ff;border:1px solid #c8d2ff;border-radius:3px;cursor:pointer;line-height:1.4;vertical-align:middle}
.var-ins-btn:hover{background:#4460ff;color:#fff;border-color:#4460ff}
.var-add-btn{font-size:11px;padding:1px 8px;background:#4460ff;color:#fff;border:none;border-radius:3px;cursor:pointer;line-height:1.5;white-space:nowrap}
.var-add-btn:hover{background:#3340cc}
.prop-row input,.prop-row select{flex:1;padding:4px 8px;border:1px solid var(--border);border-radius:4px;font-size:12px;min-width:0}
.prop-row input:focus,.prop-row select:focus{border-color:var(--primary);outline:none}
.prop-row input[type=number]{width:60px}
.prop-row input[type=color]{width:32px;height:28px;padding:2px;cursor:pointer}
.prop-row .two{display:flex;gap:4px;flex:1}
/* 旋转行:缩短角度框 + 右侧两个小翻转按钮 */
.prop-row.prop-row-angle > label{width:auto}
.angle-row{display:flex;align-items:center;gap:4px;flex:1;min-width:0}
.angle-row .p-angle{flex:0 0 62px;width:62px !important;max-width:62px;text-align:center}
.flip-btn{flex:0 0 auto;width:28px;height:28px;padding:0 !important;display:inline-flex !important;align-items:center;justify-content:center;border:1px solid var(--border);background:#fff;color:var(--text);border-radius:4px;cursor:pointer;line-height:1}
.flip-btn svg{display:block}
.flip-btn:hover{background:var(--primary-light);color:var(--primary);border-color:var(--primary)}
/* 字体上传小按钮: 不会撑大整行 */
.prop-row .btn-font-mini{flex:0 0 auto;padding:3px 8px;font-size:11px;border:1px solid var(--border);background:var(--bg-1,#f5f6f8);color:var(--text-2,#666);border-radius:3px;cursor:pointer;line-height:1.4}
.prop-row .btn-font-mini:hover{background:var(--primary,#3a7afe);color:#fff;border-color:var(--primary,#3a7afe)}
.prop-row .btn-font-mini:disabled{opacity:.6;cursor:not-allowed}
.prop-row .two input{width:50%}
.color-input-wrap{display:flex;align-items:center;gap:4px;flex:1}
.color-input-wrap input[type=text]{flex:1}
.btn-row{display:flex;gap:6px;flex-wrap:wrap}
.btn-row .btn{flex:1;font-size:11px;padding:5px 8px;line-height:1.2;min-height:24px}
.btn-xs,.btn-sm{display:inline-block;flex:0 0 auto;padding:3px 10px;font-size:12px;line-height:1.3;border-radius:4px;min-height:24px;border:1px solid var(--border,#d5dbe1);background:#fff;color:var(--text,#333);cursor:pointer}
.btn-xs:hover,.btn-sm:hover{background:var(--primary,#3a7afe);color:#fff;border-color:var(--primary,#3a7afe)}
.btn-xs{padding:2px 8px;font-size:11px;min-height:22px}

/* 多选元素 6 向对齐按钮 */
.align-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:5px}
.align-grid .align-btn{display:inline-flex;align-items:center;justify-content:center;gap:0;padding:3px 0;min-width:0;height:28px;font-size:12px;color:var(--text)}
.align-grid .align-btn svg{display:block;stroke:var(--text)}
.align-grid .align-btn:hover{background:var(--primary-light)}
.align-grid .align-btn:hover svg{stroke:var(--primary)}
/* 去掉旧的标签行样式 (不再使用) */
.align-grid .align-label{display:none}

.prop-actions{padding:12px 14px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:6px}
.prop-actions .btn{width:100%;font-size:12px}

/* 页面设置弹窗内样式 */
.page-presets{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}
.preset-card{padding:10px 6px;border:1px solid var(--border);border-radius:6px;cursor:pointer;text-align:center;font-size:12px;transition:background .12s,border-color .12s,color .12s}
.preset-card:hover{border-color:var(--primary);background:var(--primary-light)}
.preset-card.active{border-color:var(--primary);background:var(--primary-light);box-shadow:0 0 0 1px var(--primary) inset}
.preset-card.active .dim{color:var(--primary)}
.preset-card .dim{font-weight:600;color:var(--text)}
.preset-card .name{color:var(--text-3);font-size:11px;margin-top:2px}
.preset-card.paper-card .dim{font-size:14px;color:var(--primary)}
.preset-card.paper-card .name{font-size:10px}
.preset-section-title{font-size:12px;color:var(--text-3);margin:8px 0 6px;padding-left:2px;border-left:3px solid var(--primary);padding-left:8px}
.orientation-toggle{display:inline-flex;gap:6px}
.orient-btn{flex:0 0 auto;padding:4px 10px;border:1px solid var(--border);background:#fff;border-radius:5px;cursor:pointer;font-size:12px;transition:all .12s;white-space:nowrap}
.orient-btn:hover{border-color:var(--primary);color:var(--primary)}
.orient-btn.active{background:var(--primary);color:#fff;border-color:var(--primary)}

/* 页面设置:网格控件在 prop-row 内 */
.grid-controls{display:flex;align-items:center;gap:12px;flex:1}
.grid-check{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--text-2);cursor:pointer;white-space:nowrap}
.grid-check input[type=checkbox]{margin:0;cursor:pointer}
.grid-size-wrap{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--text-2)}
.grid-size-wrap input[type=number]{width:60px;padding:3px 6px;border:1px solid var(--border);border-radius:4px;font-size:12px}
.grid-size-wrap input[type=number]:focus{border-color:var(--primary);outline:none}

/* 预览模态 */
.preview-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;max-height:60vh;overflow:auto;padding:4px}
.preview-item{text-align:center}
.preview-item canvas{border:1px solid var(--border);background:#fff;max-width:100%}
.preview-item .idx{font-size:11px;color:var(--text-3);margin-top:4px}

/* 滚动条 */
.editor-left::-webkit-scrollbar,.editor-right::-webkit-scrollbar,.canvas-wrap::-webkit-scrollbar,.data-grid-wrap::-webkit-scrollbar{width:8px;height:8px}
.editor-left::-webkit-scrollbar-thumb,.editor-right::-webkit-scrollbar-thumb,.canvas-wrap::-webkit-scrollbar-thumb,.data-grid-wrap::-webkit-scrollbar-thumb{background:#d0d3d9;border-radius:4px}
.editor-left::-webkit-scrollbar-track,.editor-right::-webkit-scrollbar-track,.canvas-wrap::-webkit-scrollbar-track,.data-grid-wrap::-webkit-scrollbar-track{background:transparent}

/* 响应式:小屏隐藏右栏,改为浮动 */
@media(max-width:900px){
  .editor-left{width:120px}
  .editor-right{position:absolute;right:0;top:48px;bottom:0;z-index:40;transform:translateX(100%);transition:transform .2s;box-shadow:-4px 0 12px rgba(0,0,0,.1)}
  .editor-right.show{transform:translateX(0)}
}

/* UDI (GS1-128) 标识符行编辑器 - 独立于 .prop-row, 避免 CSS 冲突 */
#udiComposer{margin-top:2px;padding-left:0;padding-right:0}
#udiComposer .group-title{margin-bottom:6px}
.udi-ai-selector{margin-bottom:6px}
.udi-ai-selector select{width:100%;font-size:12px;padding:4px 6px;border:1px solid var(--border);border-radius:4px;background:#fff}
#udiRows{display:flex;flex-direction:column;gap:6px;width:100%}
.udi-row{display:flex;flex-direction:column;gap:2px;width:100%}
.udi-row-main{display:flex;align-items:center;gap:4px;flex-wrap:nowrap;width:100%}
.udi-ai{flex:0 0 auto;min-width:36px;font-size:12px;font-weight:600;padding:2px 5px;border:1px solid var(--border);border-radius:3px;background:#f0f0f0;color:#555;text-align:center;line-height:18px;user-select:none;width:fit-content}
.udi-val{flex:1 1 0%;min-width:0;font-size:12px;padding:3px 6px;border:1px solid var(--border);border-radius:3px}
.udi-val:focus{outline:none;border-color:var(--primary)}
.udi-val:invalid{border-color:#e64545}
/* UDI 行编辑器: 插入变量按钮 *️⃣ (次要动作, 灰色小按钮) */
.udi-var{flex:0 0 auto;padding:0 4px;font-size:12px;line-height:20px;border:1px solid var(--border);border-radius:3px;background:#f3f3f3;color:#777;cursor:pointer}
.udi-var:hover{background:#e6e6e6;color:#444}
.udi-del{flex:0 0 auto;padding:0 6px;font-size:15px;line-height:20px;border:1px solid var(--border);border-radius:3px;background:#f0f0f0;color:#666;cursor:pointer}
.udi-del:hover{background:#e5e5e5;color:#333}
/* 校验成功 ✓: 主行右侧, 绿色小标记, 不单独换行 */
.udi-check{flex:0 0 auto;min-width:16px;font-size:12px;line-height:20px;text-align:center}
.udi-check:empty{display:none}
.udi-check-ok{color:#06ad55}
.udi-hint{font-size:11px;color:#999;line-height:1.4;margin-top:6px}
/* 校验错误信息: 显示在横向主行下方, 与上面对齐不缩进, 允许换行 */
.udi-msg{font-size:11px;line-height:1.4}
.udi-msg:empty{display:none}
.udi-msg-ok{color:#06ad55}
.udi-msg-err{color:#e64545}