/* splitter.css —— 「合图拆分」独立页
 * 只加载 style.css + landing.css 之外自己需要的那部分。
 * 两条规矩：
 *   ① 容器上显式声明 color —— body 在 data-theme 作用域外，不写会继承成浅色字；
 *   ② 棋盘格用局部 --ck-a/--ck-b，不写死深色值（首页 .checker 就是这么踩的坑）。 */

.sp-tool{margin-top:26px}

.sp-step{display:flex;gap:14px;margin-bottom:16px}
.sp-step-n{
  flex:none;width:28px;height:28px;border-radius:50%;
  background:var(--primary);color:#fff;font-size:13px;font-weight:700;
  display:flex;align-items:center;justify-content:center;margin-top:2px;
}
.sp-step-b{
  flex:1;min-width:0;background:var(--bg-panel);border:1px solid var(--border);
  border-radius:12px;padding:16px;color:var(--text-1);
}
.sp-step-b .sec-title{color:var(--text-1)}
.sp-step-b .hint{color:var(--muted)}

/* ---- 棋盘格（透明区） ---- */
.sp-canvas-box,.sp-anim-box,.sp-frame img{
  --ck-a:#e9ecf2;--ck-b:#f7f8fb;
  background-image:repeating-conic-gradient(var(--ck-a) 0% 25%,var(--ck-b) 0% 50%);
  background-size:16px 16px;
}
[data-theme="dark"] .sp-canvas-box,
[data-theme="dark"] .sp-anim-box,
[data-theme="dark"] .sp-frame img{--ck-a:#1b1b20;--ck-b:#24242a}

/* ---- ② 原图 + 网格 ---- */
.sp-stage{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:16px;margin-top:10px}
.sp-canvas-box{
  position:relative;border:1px solid var(--border);border-radius:10px;
  overflow:hidden;min-height:120px;line-height:0;
}
#spCanvas{display:block;width:100%;height:auto}
#spGrid{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
.sp-empty{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:13px;color:var(--muted);line-height:1.6;
}
.sp-side{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.sp-info{
  width:100%;background:var(--primary-soft);color:var(--accent);
  border-radius:9px;padding:9px 11px;font-size:12.5px;line-height:1.7;
}
[data-theme="dark"] .sp-info{background:rgba(124,92,255,.18);color:var(--text-1)}
.sp-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sp-lab{font-size:12.5px;color:var(--text-2)}
.sp-stat{font-size:12.5px;color:var(--text-2);min-height:18px}
.sp-status{font-size:12.5px;color:var(--text-2)}
.sp-status.sp-ok{color:var(--accent);font-weight:600}

.sp-num,.sp-txt{
  background:var(--bg-inset);border:1px solid var(--border);border-radius:8px;
  color:var(--text-1);font-size:13px;padding:5px 8px;
}
.sp-num{width:64px}
.sp-txt{width:150px}
.sp-num:focus,.sp-txt:focus{outline:none;border-color:var(--primary)}

/* ---- ③ 帧网格 ---- */
.sp-none{padding:26px 10px;text-align:center;font-size:13px;color:var(--muted);line-height:1.7}
.sp-frame{position:relative;border:1px solid var(--border);border-radius:9px;overflow:hidden;background:var(--bg-panel)}
.sp-frame img{display:block;width:100%;height:auto}
.sp-frame-n{
  position:absolute;left:4px;top:4px;min-width:19px;height:19px;padding:0 5px;
  border-radius:10px;background:rgba(15,15,18,.72);color:#fff;
  font-size:11.5px;font-weight:600;display:flex;align-items:center;justify-content:center;
}
.sp-frame-del{
  position:absolute;right:4px;top:4px;width:20px;height:20px;border:none;cursor:pointer;
  border-radius:50%;background:rgba(15,15,18,.6);color:#fff;font-size:14px;line-height:1;
  display:none;align-items:center;justify-content:center;
}
.sp-frame:hover .sp-frame-del{display:flex}
.sp-frame-del:hover{background:#e5484d}

.sp-anim{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px}
.sp-anim-box{border:1px solid var(--border);border-radius:10px;padding:6px;line-height:0}
#spAnim{display:block;max-width:150px;max-height:150px;width:auto;height:auto}

/* ---- ④ 导出 ---- */
.sp-opt{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:12px 0}

@media (max-width:760px){
  .sp-stage{grid-template-columns:1fr}
  .sp-step-n{width:24px;height:24px;font-size:12px}
  .sp-step-b{padding:13px}
}