* { margin:0; padding:0; box-sizing:border-box; }
  /* 表单控件默认不继承字体，是"两边字体不一样"的根源：全局强制继承 */
  button, input, select, textarea { font-family:inherit; }
  body {
    font-family: "Segoe UI", "Microsoft YaHei", sans-serif;
    background:#f5f6f8; color:#1d2129;
    display:flex; flex-direction:column; height:100vh; overflow:hidden;
  }
  header {
    background:#fff; border-bottom:1px solid #e5e6eb;
    padding:14px 24px; display:flex; align-items:center; gap:12px;
  }
  header .logo {
    width:34px;height:34px;border-radius:8px;
    background:linear-gradient(135deg,#4f7cff,#22c1dc);
    display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;
  }
  header h1 { font-size:17px; font-weight:600; }
  header .sub { font-size:12px; color:#86909c; }
  main { display:flex; flex:1; overflow:hidden; }
  /* 左侧控制栏 */
  #side {
    width:300px; background:#fff; border-right:1px solid #e5e6eb;
    padding:18px 18px 30px; overflow-y:auto; flex-shrink:0; position:relative;
  }
  /* ===== 左侧栏：统一设计规范（两种模式面板共用同一套规格） ===== */
  /* 分区标题：渐变竖条 + 深色文字，统一节奏 */
  #side h2 {
    font-size:13px; color:#1d2129; font-weight:600; letter-spacing:.5px;
    margin:22px 0 12px; padding-left:9px; position:relative; line-height:1.3;
  }
  #side h2::before {
    content:""; position:absolute; left:0; top:1.5px; bottom:1.5px; width:3px;
    border-radius:2px; background:linear-gradient(180deg,#4f7cff,#22c1dc);
  }
  #side h2:first-child { margin-top:0; }
  #side h2.foldable { cursor:pointer; user-select:none; padding-right:22px; }
  #side h2.foldable::after {
    content:"+"; position:absolute; right:0; top:-1px; color:#86909c; font-size:16px; font-weight:700;
  }
  #side h2.foldable.open::after { content:"−"; color:#1652f0; }
  .foldHidden { display:none !important; }
  /* 功能模式切换大按钮（智能切图 / 网格切图） */
  .modeBtns { display:flex; gap:10px; margin-bottom:2px; }
  .mode-btn { flex:1; height:40px; border:none; border-radius:9px; font-size:14px; font-weight:600;
    cursor:pointer; transition:all .15s; background:#f2f3f5; color:#4e5969; }
  .mode-btn.active { background:linear-gradient(135deg,#00b42a,#23c343); color:#fff;
    box-shadow:0 4px 12px rgba(0,180,42,.28); }
  .mode-btn:not(.active):hover { background:#e5e6eb; }
  #panelGrid { display:none; }
  .toolTabs { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:12px; }
  .toolTab {
    height:34px; border:1px solid #e5e6eb; border-radius:8px; background:#fff; color:#4e5969;
    font-size:12px; font-weight:700; cursor:pointer;
  }
  .toolTab.active { border-color:#1652f0; color:#1652f0; background:#f0f4ff; }
  .toolPanel { display:none; }
  .toolPanel.active { display:block; }
  .toolPanel .panelTitle {
    font-size:13px; color:#1d2129; font-weight:700; margin:0 0 12px; line-height:1.3;
  }
  .compactGrid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .compactGrid .param { margin-bottom:10px; }
  .compactGrid label { min-height:34px; align-items:flex-start; }
  .compactGrid .hint { grid-column:1 / -1; }
  .inlineActions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  /* 控件统一规格：标签 12px / 输入框高 32px / 圆角 6px / 13px 字号 */
  #side label {
    display:block; font-size:12px; color:#4e5969; margin-bottom:6px; line-height:1.4;
  }
  #side label b { color:#1652f0; font-weight:600; }
  #side input[type=text], #side input[type=number], #side select {
    width:100%; height:32px; padding:0 10px; border:1px solid #e5e6eb; border-radius:6px;
    font-size:13px; color:#1d2129; outline:none; background:#fff;
  }
  #side input[type=text]:focus, #side input[type=number]:focus, #side select:focus {
    border-color:#1652f0; box-shadow:0 0 0 2px rgba(22,82,240,.12);
  }
  #side select { cursor:pointer; }
  #side input[type=checkbox] { accent-color:#1652f0; }
  /* 说明文字：全局统一 11px 灰色（两个面板共用） */
  .hint { font-size:11px; color:#a9aeb8; line-height:1.6; margin-top:4px; }
  .param { margin-bottom:14px; }
  .param label { display:flex; justify-content:space-between; align-items:center; }
  /* 双列数字输入（网格参数） */
  .gridNums { display:flex; gap:10px; margin-bottom:12px; }
  .gridNums .col { flex:1; }
  /* 勾选行 */
  .checkRow { font-size:12px; color:#4e5969; margin-bottom:12px; display:flex;
    align-items:flex-start; line-height:1.5; }
  .checkRow input { margin-right:6px; margin-top:1px; flex-shrink:0; }
  #gridDims { color:#1652f0; font-weight:600; }
  .colorRow { display:flex; gap:10px; align-items:center; }
  .colorRow input[type=color] {
    width:44px; height:32px; flex-shrink:0; padding:2px; border:1px solid #e5e6eb;
    border-radius:6px; background:#fff; cursor:pointer;
  }
  .colorRow input[type=text] { flex:1; }
  .keyActions { display:flex; gap:8px; margin-top:8px; }
  .keyActions .miniBtn {
    flex:1; height:30px; border:1px solid #e5e6eb; border-radius:7px; background:#fff;
    color:#4e5969; font-size:12px; font-weight:600; cursor:pointer;
  }
  .keyActions .miniBtn:hover { border-color:#1652f0; color:#1652f0; background:#f0f4ff; }
  #chromaPanel.disabled { opacity:.55; }
  .brushTools {
    display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px;
  }
  .brushTools .toolBtn {
    height:32px; border:1px solid #e5e6eb; border-radius:7px; background:#fff;
    color:#4e5969; font-size:12px; font-weight:600; cursor:pointer;
  }
  .brushTools .toolBtn.active { border-color:#00b42a; color:#00b42a; background:#f0fff4; }
  .brushTools .toolBtn.warn { color:#f53f3f; }
  .brushTools .toolBtn.warn:hover { border-color:#f53f3f; background:#fff1f1; }
  .compressProfiles { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-bottom:10px; }
  .compressProfile {
    height:30px; border:1px solid #d6e0ff; border-radius:999px; background:#f7f9ff;
    color:#4e5969; font-size:11px; font-weight:700; cursor:pointer;
  }
  .compressProfile.active { background:#1652f0; color:#fff; border-color:#1652f0; }
  .compressSummary {
    margin:10px 0; padding:8px 10px; border-radius:8px; background:#f0f4ff;
    color:#1652f0; font-size:12px; font-weight:700; line-height:1.5;
  }
  .compressActions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:10px; }
  .compressActions .btn { margin-bottom:0; }
  .compressList { display:flex; flex-direction:column; gap:4px; max-height:260px; overflow-y:auto; }
  .compressRow {
    display:grid; grid-template-columns:minmax(0,1.2fr) 58px 1fr 58px 42px 24px;
    gap:7px; align-items:center; min-height:30px; padding:4px 0;
    border-bottom:1px solid #eef0f3; font-size:11px; color:#4e5969;
  }
  .compressRow .crName { color:#1d2129; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
  .compressRow .crBar { height:4px; border-radius:999px; background:#e8efff; overflow:hidden; }
  .compressRow .crBar i { display:block; height:100%; border-radius:999px; background:#3b6fbd; }
  .compressRow .crPct { color:#1652f0; font-variant-numeric:tabular-nums; }
  .compressRow .crDownload {
    width:22px; height:22px; border:1px solid #1652f0; border-radius:6px; background:#fff;
    color:#1652f0; cursor:pointer; font-size:12px; line-height:18px;
  }
  /* 常显：合并与拆分操作提示（智能切图） */
  .mergeTip { font-size:12px; color:#4e5969; background:#f0f4ff; border:1px solid #d6e0ff;
    border-radius:7px; padding:8px 10px; margin:2px 0 14px; line-height:1.7; }
  .mergeTip b { color:#1652f0; font-weight:600; }
  /* 使用说明：默认收起，与按钮/参数同级的一行，点「?」展开 */
  .helpBar { display:flex; justify-content:space-between; align-items:center;
    margin:16px 0 0; padding:0; }
  .helpBar span { font-size:13px; color:#4e5969; font-weight:600; }
  .helpBtn { width:28px; height:28px; border-radius:50%; border:2px solid #f2a91e; background:#fff;
    color:#8a5a00; font-size:15px; font-weight:800; cursor:pointer; line-height:1;
    box-shadow:0 2px 6px rgba(242,169,30,.28); }
  .helpBtn:hover { background:#fff8e6; }
  .guide { display:none; position:fixed; left:18px; bottom:64px; width:264px; z-index:60;
    background:#fff; border:1px solid #dfe3e8; border-radius:10px; padding:12px 14px;
    box-shadow:0 10px 28px rgba(0,0,0,.16); max-height:58vh; overflow-y:auto; }
  .guide.show { display:block; }
  .guide .gTitle { font-size:13px; font-weight:700; color:#1d2129; margin-bottom:10px;
    display:flex; justify-content:space-between; align-items:center; }
  .guide .gClose { font-size:12px; font-weight:400; color:#86909c; cursor:pointer; }
  .guide .gClose:hover { color:#1652f0; }
  .guide .gItem { font-size:12px; color:#4e5969; line-height:1.75; margin-bottom:10px; }
  .guide .gItem:last-child { margin-bottom:0; }
  .guide .gNum { color:#1652f0; font-weight:700; margin-right:4px; }
  .guide .gItem .bHi { color:#fa8c16; font-weight:700; }
  /* 命名规则双列 */
  .naming { display:flex; gap:10px; }
  .naming .col { flex:1; }
  .renameRow { display:flex; gap:8px; align-items:center; }
  .renameRow input { flex:1; min-width:0; }
  .renameBtn {
    width:74px; height:32px; border:1px solid #f53f3f; border-radius:7px; background:#fff1f1;
    color:#f53f3f; font-size:12px; font-weight:700; cursor:pointer; flex-shrink:0;
  }
  .renameBtn:hover { background:#ffe8e8; }
  /* 按钮：统一高 36px / 13px 字号 / 600 字重 */
  .btn {
    display:block; width:100%; height:36px; padding:0 10px; border:none; border-radius:8px;
    font-size:13px; cursor:pointer; margin-bottom:10px; font-weight:600;
    transition:all .15s; line-height:34px;
  }
  .btn-primary { background:#1652f0; color:#fff; }
  .btn-primary:hover { background:#0e42d2; }
  .btn-primary:disabled { background:#c9cdd4; cursor:not-allowed; }
  .btn-outline { background:#fff; color:#1652f0; border:1px solid #1652f0; }
  .btn-outline:hover { background:#f0f4ff; }
  /* 右侧画布区 */
  #stage { flex:1; display:flex; flex-direction:column; padding:18px; overflow:hidden; }
  #dropzone {
    flex:1; border:2px dashed #c9cdd4; border-radius:14px;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    cursor:pointer; transition:all .2s; background:#fff; position:relative; min-height:300px;
  }
  #dropzone.dragover { border-color:#1652f0; background:#f0f4ff; }
  #dropzone .icon { font-size:44px; margin-bottom:12px; }
  #dropzone p { color:#86909c; font-size:14px; }
  #dropzone p b { color:#1652f0; }
  #canvasWrap {
    position:relative;
    flex:1; display:none; flex-direction:column; overflow:hidden;
    background:#fff; border-radius:14px; border:1px solid #e5e6eb; padding:12px;
  }
  #bodyRow { flex:1; display:flex; gap:12px; min-height:0; }
  #boardWrap { flex:1; overflow:auto; display:flex; align-items:flex-start; justify-content:flex-start;
    position:sticky;
    background:
      linear-gradient(45deg,#f2f3f5 25%,transparent 25%,transparent 75%,#f2f3f5 75%),
      linear-gradient(45deg,#f2f3f5 25%,transparent 25%,transparent 75%,#f2f3f5 75%);
    background-size:20px 20px; background-position:0 0,10px 10px;
    border-radius:8px;
  }
  #boardWrap.bg-solid { background:none; }
  #boardWrap.bg-black { background:#000; }
  #boardWrap.bg-white { background:#fff; }
  #boardWrap.bg-magenta { background:#ff00bb; }
  .canvasTools {
    position:absolute; top:22px; right:22px; z-index:55;
    display:flex; align-items:center; gap:8px;
    background:rgba(255,255,255,.94); border:1px solid #e5e6eb; border-radius:8px;
    box-shadow:0 4px 14px rgba(0,0,0,.12); padding:6px 8px;
    font-size:12px; color:#4e5969;
  }
  .canvasTools select {
    height:28px; border:1px solid #e5e6eb; border-radius:6px; background:#fff;
    color:#1d2129; font-size:12px; outline:none; cursor:pointer;
  }
  .zoomBtns { display:flex; align-items:center; gap:4px; border-left:1px solid #e5e6eb; padding-left:8px; }
  .zoomBtns button {
    width:28px; height:28px; border:1px solid #e5e6eb; border-radius:6px; background:#fff;
    color:#1d2129; font-size:16px; line-height:1; font-weight:700; cursor:pointer;
  }
  .zoomBtns button:hover { border-color:#1652f0; color:#1652f0; background:#f0f4ff; }
  #zoomLabel { min-width:42px; text-align:center; font-variant-numeric:tabular-nums; }
  #boardWrap canvas { max-width:none; max-height:none; }
  /* 合并结果预览：默认隐藏，合并后占据右侧，识别图随布局自动左移 */
  /* 合并结果预览：覆盖在识别图右上角，不挤动原图（原图不动） */
  #mergeResult {
    position:absolute; top:12px; right:12px; width:320px; display:none;
    flex-direction:column; overflow:hidden; z-index:60;
    border:1px solid #1652f0; border-radius:10px; background:#fff;
    box-shadow:0 10px 28px rgba(0,0,0,.18);
  }
  #mergeResult.show { display:flex; }
  #mergeResult .mrHead { display:flex; align-items:center; justify-content:space-between;
    padding:4px 8px; font-size:12px; color:#1652f0; font-weight:600; background:#f0f4ff;
    border-bottom:1px solid #e5e6eb; }
  #mergeResult .mrHead .close { border:none; background:none; cursor:pointer; font-size:14px; color:#86909c; line-height:1; }
  #mergeResult .mrBody { flex:1; overflow:auto; display:flex; align-items:center; justify-content:center;
    background:
      linear-gradient(45deg,#f2f3f5 25%,transparent 25%,transparent 75%,#f2f3f5 75%),
      linear-gradient(45deg,#f2f3f5 25%,transparent 25%,transparent 75%,#f2f3f5 75%);
    background-size:20px 20px; background-position:0 0,10px 10px;
    padding:8px; }
  #mergeResult .mrBody canvas { max-width:100%; max-height:100%; }
  #mergeResult .mrFoot { display:flex; gap:8px; padding:8px; align-items:center; border-top:1px solid #e5e6eb; }
  #mergeResult .mrName { flex:1; border:1px solid #e5e6eb; border-radius:7px; padding:5px 8px; font-size:12px; }
  #mergeResult .mrBtn { border:none; border-radius:7px; padding:6px 12px; font-size:12px; font-weight:600; cursor:pointer; }
  #mergeResult .mrBtn.dl { background:#1652f0; color:#fff; }
  #mergeResult .mrBtn.restore { background:#f2f3f5; color:#4e5969; }
  #mergeResult .mrHint { font-size:11px; color:#86909c; padding:0 8px 6px; }
  /* 「合并选中」按钮组：与 tab 同一行，靠右显示 */
  #mergeBar {
    display:none; gap:8px; align-items:center; margin-left:auto;
    font-size:12px; color:#4e5969; white-space:nowrap;
  }
  #mergeBar .mbtn { padding:5px 12px; border:none; border-radius:7px; cursor:pointer;
    font-size:12px; font-weight:600; }
  #mergeBar .mbtn.do { background:#1652f0; color:#fff; }
  #mergeBar .mbtn.do:disabled { background:#c9cdd4; cursor:not-allowed; }
  #mergeBar .mbtn.cancel { background:#f2f3f5; color:#4e5969; }
  canvas { max-width:100%; image-rendering:auto; }
  #statusBar {
    margin-top:10px; font-size:13px; color:#4e5969;
    display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px;
  }
  #statusBar .ok { color:#00b42a; font-weight:600; }
  #statusBar .warn { color:#ff7d00; font-weight:600; }
  #tip { font-size:11px; color:#a9aeb8; }

  /* tab 切换 */
  .tabs { display:flex; gap:8px; margin-bottom:12px; align-items:center; }
  .tab { padding:8px 18px; border:1px solid #e5e6eb; background:#fff; border-radius:8px;
    font-size:13px; color:#4e5969; cursor:pointer; }
  .tab.active { border-color:#1652f0; color:#1652f0; background:#f0f4ff; font-weight:600; }
  /* 参数已修改待应用：画布 tab 高亮闪烁引导点击 */
  .tab.stale { border-color:#ff9a2e; color:#d46b08; background:#fff7e6; font-weight:600;
    animation:stalePulse 1.1s ease-in-out infinite; }
  @keyframes stalePulse {
    0%,100% { box-shadow:0 0 0 0 rgba(255,138,46,.45); }
    50% { box-shadow:0 0 0 5px rgba(255,138,46,0); }
  }

  /* 切割预览网格 */
  #previewDock { display:none; flex:1 1 520px; min-width:0; background:#fff; border:1px solid #e5e6eb; border-radius:12px;
    padding:10px 12px; margin:0 0 0 16px; box-shadow:0 4px 14px rgba(29,33,41,.04); }
  #previewWrap { flex:1; display:none; flex-direction:column; overflow-y:auto;
    background:#fff; border-radius:14px; border:1px solid #e5e6eb; padding:16px; }
  #previewHead { display:grid; grid-template-columns:minmax(220px,1fr) minmax(0,auto);
    align-items:center; gap:8px 14px; }
  #previewHead h2 { font-size:16px; color:#1d2129; font-weight:600; white-space:nowrap; }
  #previewCount { font-size:15px; color:#1652f0; font-weight:600; margin-left:8px; }
  #previewHead .note { grid-column:1 / -1; font-size:12px; color:#86909c; }
  .batchBtns { display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap; min-width:0; }
  .batchBtns .bbtn { padding:6px 14px; border:1px solid #1652f0; background:#fff; color:#1652f0;
    border-radius:7px; font-size:12px; cursor:pointer; white-space:nowrap; }
  .batchBtns .bbtn:hover { background:#f0f4ff; }
  .batchBtns .bbtn.merge { border-color:#f53f3f; color:#f53f3f; }
  .batchBtns .bbtn.merge:hover { background:#fff1f1; }
  .batchBtns .bbtn.restore { border-color:#7d53e8; color:#7d53e8; }
  .batchBtns .bbtn.restore:hover { background:#f3efff; }
  /* 统一图片尺寸：勾选后导出/单独下载时把所有元素缩放到指定宽高（等比contain居中，透明底） */
  .batchBtns .sizebar { display:flex; align-items:center; flex-wrap:wrap; gap:6px; font-size:12px; color:#4e5969;
    border-left:1px solid #e5e6eb; padding-left:10px; min-width:0; }
  .batchBtns .sizebar .szcb { display:flex; align-items:center; gap:4px; font-weight:600; color:#1d2129; }
  .batchBtns .sizebar input[type=checkbox] { accent-color:#1652f0; }
  .batchBtns .sizebar label { display:flex; align-items:center; gap:3px; }
  .batchBtns .sizebar input[type=number] { width:58px; padding:5px 6px; border:1px solid #e5e6eb;
    border-radius:6px; font-size:12px; text-align:center; outline:none; background:#fafbfc; }
  .batchBtns .sizebar #unifyPad { width:48px; }
  .batchBtns .sizebar input[type=number]:focus { border-color:#1652f0; }
  .batchBtns .sizebar input[type=number]:disabled { background:#f2f3f5; color:#a9aeb8; }
  .batchBtns .bbtn.export { background:#1652f0; color:#fff; border-color:#1652f0; font-weight:600; }
  .batchBtns .bbtn.export:hover { background:#0f4bd6; }
  .batchBtns .bbtn.export:disabled { background:#a9b0ba; border-color:#a9b0ba; cursor:not-allowed; }
  @media (max-width: 1100px) {
    .tabs { flex-wrap:wrap; }
    #previewDock { flex-basis:100%; margin:4px 0 0; }
    #previewHead { grid-template-columns:1fr; align-items:start; }
    .batchBtns { justify-content:flex-start; }
    .batchBtns .sizebar { border-left:none; padding-left:0; width:100%; }
  }
  #grid { overflow:visible; display:grid;
    grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px; align-content:start; }
  .tile { border:1px solid #e5e6eb; border-radius:12px; background:#fafbfc;
    padding:10px; position:relative; }
  .tile.merged { outline:2px solid #f53f3f; outline-offset:1px; background:#fff1f1; }
  .tile .top { display:flex; align-items:center; gap:6px; font-size:12px; color:#4e5969; margin-bottom:8px; }
  .tile .top input { accent-color:#1652f0; }
  .tile .top .grp { display:flex; align-items:center; gap:3px; }
  .tile .top .grp.mg input { accent-color:#f53f3f; }
  .tile .top .grp.mg { margin-left:auto; }
  .tile .mergedTag { display:none; background:#f53f3f; color:#fff; font-size:11px; font-weight:600;
    padding:2px 8px; border-radius:6px; margin-left:4px; white-space:nowrap; }
  .tile.merged .mergedTag { display:inline-block; }
  .tile .thumb { width:100%; height:120px; display:flex; align-items:center; justify-content:center;
    border:1px dashed #c9cdd4; border-radius:8px; overflow:hidden;
    background:
      linear-gradient(45deg,#eceef0 25%,transparent 25%,transparent 75%,#eceef0 75%),
      linear-gradient(45deg,#eceef0 25%,transparent 25%,transparent 75%,#eceef0 75%);
    background-size:12px 12px; background-position:0 0,6px 6px; cursor:zoom-in; }
  .tile .thumb canvas, .tile .thumb img.compressedPreview { max-width:92%; max-height:92%; object-fit:contain; }
  .tile .meta { margin-top:8px; font-size:12px; text-align:center; line-height:1.4; }
  .tile .meta .nm { color:#4e5969; display:block; }
  .tile .meta .sz { color:#86909c; }
  .tile .meta .compressedSizeLine { color:#1652f0; font-weight:600; }
  /* 可编辑元素名输入框 */
  .tile .meta input.nm { width:100%; border:none; border-bottom:1px dashed #c9cdd4;
    background:transparent; text-align:center; font-size:12px; color:#4e5969;
    padding:2px 0; outline:none; margin-bottom:2px; }
  .tile .meta input.nm:focus { border-bottom-color:#1652f0; color:#1652f0; }
  .tile .dl { position:absolute; top:8px; right:8px; width:28px; height:28px; border:none; border-radius:7px;
    background:#eef1f5; color:#4e5969; cursor:pointer; font-size:13px;
    display:flex; align-items:center; justify-content:center; }
  .tile .dl:hover { background:#1652f0; color:#fff; }
  /* 已合并卡片：紫色「还原」勾选（勾选后点顶部紫色「还原」按钮拆回），与红/蓝区分 */
  .tile .top .grp.mg.rs input { accent-color:#7d53e8; }
  .tile .top .grp.mg.rs span { color:#7d53e8; font-weight:600; }
  .sliceViewer {
    position:fixed; inset:0; z-index:9999; display:none;
    background-color:#fff;
    background-image:
      linear-gradient(45deg,#eceef0 25%,transparent 25%,transparent 75%,#eceef0 75%),
      linear-gradient(45deg,#eceef0 25%,transparent 25%,transparent 75%,#eceef0 75%);
    background-size:18px 18px; background-position:0 0,9px 9px;
  }
  .sliceViewer.bg-black { background:#000; }
  .sliceViewer.bg-white { background:#fff; }
  .sliceViewer.bg-magenta { background:#ff00bb; }
  .sliceViewer.show { display:block; }
  .sliceViewer .svHead {
    position:absolute; top:20px; right:22px; z-index:2; display:flex; align-items:center; gap:14px;
  }
  .sliceViewer .svTitle {
    position:absolute; left:24px; top:22px; z-index:2; max-width:46vw;
    background:rgba(255,255,255,.86); border:1px solid #e5e6eb; border-radius:999px;
    padding:8px 12px; font-size:12px; font-weight:700; color:#1d2129;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .sliceViewer .svClose {
    width:34px; height:34px; border:none; border-radius:50%; background:#3f444c; color:#fff;
    cursor:pointer; font-weight:800; font-size:20px; line-height:1; box-shadow:0 4px 12px rgba(0,0,0,.18);
  }
  .sliceViewer .svClose:hover { background:#1f2329; }
  .sliceViewer .svBody {
    position:absolute; inset:0; overflow:auto; display:flex; align-items:center; justify-content:center; padding:80px 90px;
  }
  .sliceViewer .svBody canvas { max-width:none; max-height:none; image-rendering:auto; flex:0 0 auto; }
  .sliceViewer .svToolbar {
    position:absolute; left:50%; bottom:24px; transform:translateX(-50%); z-index:2;
    display:flex; align-items:center; gap:7px; background:rgba(255,255,255,.92);
    border:1px solid #e5e6eb; border-radius:999px; box-shadow:0 8px 26px rgba(0,0,0,.18);
    padding:8px 10px; color:#1d2129;
  }
  .sliceViewer .svToolbar button {
    width:32px; height:32px; border:none; border-radius:50%; background:#fff; color:#1d2129;
    cursor:pointer; font-weight:800; font-size:17px; line-height:1;
  }
  .sliceViewer .svToolbar button:hover { background:#f0f4ff; color:#1652f0; }
  .sliceViewer .svToolbar button:disabled { color:#c9cdd4; background:#f7f8fa; cursor:not-allowed; }
  .sliceViewer .svToolbar button.svBgBtn {
    width:auto; min-width:54px; border-radius:999px; padding:0 12px; font-size:13px;
  }


/* Toolbox visual refresh 2026-11-01: navigation and presentation only. */
.tool-home-link{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:9px 15px;border:1px solid var(--home-border,#dce4f3);border-radius:11px;background:var(--home-bg,#f0f4ff);color:var(--home-color,#4168ef);text-decoration:none;font:650 13px/1.4 "Segoe UI","Microsoft YaHei",sans-serif;white-space:nowrap;flex-shrink:0;transition:background .18s,border-color .18s}
.tool-home-link svg{display:block;width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tool-home-link:hover{background:var(--home-hover,#e3ebff);border-color:var(--home-color,#4168ef)}
.tool-home-link:focus-visible{outline:3px solid var(--home-color,#4168ef);outline-offset:3px}
.tool-header-actions{display:flex;align-items:center;gap:18px;margin-left:auto}
@media(max-width:680px){.tool-header-actions{gap:8px}.tool-home-link{min-height:38px;padding:8px 11px;font-size:12px}.tool-home-link svg{width:15px;height:15px}}

body{background:#f4f6fa;color:#283247;font-family:"Segoe UI","Microsoft YaHei",sans-serif}
body>header{padding:16px 24px;min-height:76px;flex-shrink:0;background:#fff;border-bottom:1px solid #e3e8f1;gap:12px}
header .logo{width:38px;height:38px;border-radius:12px;background:#4168ef;box-shadow:0 4px 10px #4168ef18;font-size:16px;flex-shrink:0}
header>div:nth-child(2){min-width:0}header h1{font-size:18px;font-weight:750;letter-spacing:-.4px}header .sub{font-size:11px;color:#8b95a7;margin-top:2px}
header>.tool-home-link{margin-left:auto}
body>main{padding:16px;gap:16px;min-height:0}
#side{border:1px solid #e1e7f1;border-radius:18px;background:#fff;padding:20px 18px;box-shadow:0 6px 24px #304d8305}
#side h2{font-size:12px;color:#53617a}
#side h2::before{background:#4168ef;border-radius:3px}
#stage{padding:0;min-width:0}
.mode-btn{border-radius:10px}.mode-btn.active{background:#4168ef;box-shadow:0 4px 10px #4168ef18}
.mode-btn:not(.active){background:#f2f5fb;color:#71809a}
.btn-primary{background:#4168ef;border-radius:10px}.btn-primary:hover{background:#345ad9}
.btn-outline{border-color:#dce4f8;background:#f4f7ff;color:#4168ef;border-radius:10px}
.btn-outline:hover{background:#eaf0ff;border-color:#a6baf7}
#dropzone{border:1.5px dashed #b9c9e8;border-radius:18px;background:#fff}
#dropzone.dragover{border-color:#4168ef;background:#f0f4ff}
#canvasWrap{border-color:#e1e7f1;border-radius:18px}
#side input[type=text],#side input[type=number],#side select{border-color:#dfe5ef;border-radius:8px}
.mergeTip{background:#f4f7ff;border-color:#e2e9fa;color:#6c7f9d;border-radius:10px}
.toolTab.active{border-color:#a3b8f9;color:#4168ef;background:#f0f4ff}
#side input[type=checkbox]{accent-color:#4168ef}
.hint{color:#8793a8}
@media(max-width:760px){body>header{padding:14px 16px;min-height:68px}header h1{font-size:16px}header .sub{display:none}header .logo{width:32px;height:32px;font-size:14px}body>main{padding:10px;gap:10px;overflow-x:auto}#side{width:260px;padding:16px 14px}#stage{min-width:340px}}

  .sliceViewer .svScale {
    min-width:54px; text-align:center; font-size:12px; color:#4e5969; font-variant-numeric:tabular-nums;
  }