/* ================= [PREVIEW] 原图 / 转换图全屏预览 =================
 * 原图与转换图不再占内容区页签（工程化改造）：它们改在顶栏右上角以缩略图出现，
 * 点开是这个整屏遮罩。缩略图与预览共用一套标签页切换（.sp-tab）。
 */

/* ---- 右上角缩略图 ---- */
#topThumbs{display:flex; gap:8px; align-items:center; margin-right:10px}
.top-thumb{
  position:relative; width:52px; height:52px; padding:0; cursor:pointer;
  border:1px solid var(--line); background:var(--panel2); clip-path:var(--cut-sm);
  overflow:hidden; transition:border-color .15s;
}
.top-thumb:hover{border-color:var(--teal)}
.top-thumb img{width:100%; height:100%; object-fit:cover; display:block}
.top-thumb span{
  position:absolute; left:0; right:0; bottom:0;
  background:rgba(15,25,35,.78); color:var(--txt2);
  font-family:var(--font-d); font-size:10px; line-height:1.6; letter-spacing:.08em; text-align:center;
}
.top-thumb.empty{opacity:.34; cursor:default}
.top-thumb.empty:hover{border-color:var(--line)}

#styleViewer{
  position:fixed; inset:0; z-index:70; display:none; flex-direction:column;
  align-items:center; justify-content:center; gap:14px;
  background:rgba(4,7,11,.94); padding:24px;
}
#styleViewer.show{display:flex}

.sp-tabs{display:flex; gap:6px; flex:none}
.sp-tab{
  appearance:none; border:1px solid var(--line); background:var(--panel2); color:var(--txt2);
  font-family:var(--font-d); font-size:13px; font-weight:700; letter-spacing:.14em;
  padding:8px 22px; cursor:pointer; transition:all .15s;
  clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);
}
.sp-tab:hover{color:var(--txt); border-color:var(--txt3)}
.sp-tab.on{background:var(--txt); color:var(--bg); border-color:var(--txt)}

.sp-stage{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  max-width:min(1100px, 92vw); min-height:0;
}
.sp-frame{
  border:1px solid var(--line2); clip-path:var(--cut); padding:10px; background:var(--panel2);
  max-width:100%; min-height:0; display:flex;
}
.sp-frame img{
  display:block; max-width:min(1000px, 88vw); max-height:74vh; object-fit:contain;
}
.sp-frame img.pixel{image-rendering:pixelated}
.sp-cap{
  font-family:var(--font-d); font-size:13px; letter-spacing:.24em; color:var(--txt2); flex:none;
}

#styleViewerClose{
  position:absolute; top:14px; right:14px; width:34px; height:34px;
  border:1px solid var(--line2); background:var(--panel2); color:var(--txt);
  cursor:pointer; font-size:16px; clip-path:var(--cut-sm);
}
#styleViewerClose:hover{border-color:var(--teal); color:var(--teal)}

@media (max-width:560px){
  #styleViewer{padding:16px 10px; gap:10px}
  .sp-frame img{max-width:94vw; max-height:66vh}
}