/* ============================================================
   PIXELFANTASIA · 像素拆解
   ============================================================ */
.sp-head{padding:var(--sp8) 0 var(--sp6);position:relative;overflow:hidden}
.sp-head::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:
    linear-gradient(90deg,rgba(108,255,181,.07) 1px,transparent 1px) 0 0/48px 48px,
    linear-gradient(rgba(108,255,181,.05) 1px,transparent 1px) 0 0/48px 48px;
  mask-image:radial-gradient(120% 80% at 20% 0%,#000 0%,transparent 70%);
  -webkit-mask-image:radial-gradient(120% 80% at 20% 0%,#000 0%,transparent 70%);
}
.sp-head__h{max-width:16em}
.sp-head__lead{max-width:56ch;margin-top:var(--sp3)}
.sp-facts{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:var(--sp6);padding:0}
.sp-facts li{
  border:1px solid var(--line);background:rgba(20,26,41,.6);padding:12px 14px;
  display:flex;flex-direction:column;gap:4px;
}
.sp-facts b{font-size:14px;color:var(--mint);font-weight:600}
.sp-facts span{font-size:13px;color:var(--text-muted);line-height:1.6}

.sp-work{
  display:grid;grid-template-columns:322px minmax(0,1fr);gap:var(--sp5);
  padding-bottom:var(--sp8);align-items:start;
}

/* ---------- 左栏 ---------- */
.sp-side{
  position:sticky;top:76px;border:1px solid var(--line);background:var(--panel);
  padding:14px;
}
.sp-side__hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;
  font-size:12px;letter-spacing:.14em;color:var(--text-faint)}
.sp-side__n{color:var(--mint)}
.sp-drop{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  min-height:104px;border:1px dashed var(--line-ui);background:var(--panel-sunken);
  cursor:pointer;transition:border-color .12s,background .12s;text-align:center;padding:12px;
}
.sp-drop:hover,.sp-drop.is-over{border-color:var(--mint-line);background:var(--mint-dim)}
.sp-drop__ico{font-size:22px;line-height:1;color:var(--mint)}
.sp-drop__t{font-size:13px;color:var(--text)}
.sp-drop__s{font-size:11.5px;color:var(--text-faint)}
.sp-or{display:flex;align-items:center;gap:8px;margin:14px 0 10px;color:var(--text-faint);font-size:11.5px}
.sp-or::before,.sp-or::after{content:"";flex:1;height:1px;background:var(--line)}
.sp-lb{display:block;font-size:12px;color:var(--text-muted);margin:8px 0 4px}
.sp-ta{min-height:56px;padding:8px;line-height:1.55;resize:vertical;font-size:13px}
.sp-gen{margin-top:8px;height:36px;font-size:13px}
.sp-hint{font-size:11.5px;color:var(--text-faint);margin-top:6px}
.sp-opts{border-top:1px solid var(--line);margin-top:14px;padding-top:12px}
.sp-row{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}
.sp-row .input{height:34px;font-size:13px}
.sp-row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sp-row2 .input{height:34px;font-size:13px}
.sp-check{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-muted);margin:6px 0 12px}
.sp-check input{accent-color:var(--mint);width:14px;height:14px}
.sp-note{font-size:12px;color:var(--text-faint);margin-top:10px;line-height:1.6}
.sp-side .btn--block{height:38px;font-size:13px}

/* ---------- 拆解方式二选一 ---------- */
.sp-way{display:flex;flex-direction:column;gap:6px}
.sp-way__b{
  display:flex;flex-direction:column;gap:2px;text-align:left;cursor:pointer;
  padding:9px 11px;border:1px solid var(--line);background:var(--panel-sunken);
  transition:border-color .1s,background .1s;
}
.sp-way__b b{font-size:13px;font-weight:600;color:var(--text-muted)}
.sp-way__b span{font-size:11.5px;color:var(--text-faint);line-height:1.5}
.sp-way__b:hover{border-color:var(--line-ui)}
.sp-way__b:hover b{color:var(--text)}
.sp-way__b[aria-pressed="true"]{border-color:var(--mint-line);background:var(--mint-dim)}
.sp-way__b[aria-pressed="true"] b{color:var(--mint)}
.sp-way__b[aria-pressed="true"] span{color:var(--text-muted)}
.sp-cost{margin-top:6px;text-align:center;color:var(--text-muted)}
.sp-cost.is-paid{color:var(--gold)}

/* ---------- 右栏舞台 ---------- */
.sp-stage{border:1px solid var(--line);background:var(--panel-sunken);min-width:0;display:flex;flex-direction:column;min-height:620px}
.sp-stage__tabs{display:flex;align-items:center;gap:4px;padding:8px 10px;border-bottom:1px solid var(--line);background:var(--panel)}
.sp-stage__tabs button[role="tab"]{
  height:30px;padding:0 12px;font-size:12.5px;color:var(--text-muted);
  border:1px solid transparent;background:transparent;cursor:pointer;
}
.sp-stage__tabs button[role="tab"]:hover{color:var(--text)}
.sp-stage__tabs button[aria-selected="true"]{
  color:var(--mint);border-color:var(--mint-line);background:var(--mint-dim);
}
.sp-stage__tabs b{font-weight:600;margin-left:4px}
.sp-stage__sp{flex:1}
.sp-stage__tabs .btn{height:30px}

.sp-canvas{
  flex:1 1 auto;min-height:0;position:relative;overflow:auto;padding:16px;
  background:
    repeating-conic-gradient(rgba(255,255,255,.045) 0% 25%,transparent 0% 50%) 0 0/20px 20px,
    #0A0E18;
}
.sp-empty{height:100%;min-height:320px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--text-faint);text-align:center}
.sp-empty p{margin:0;font-size:13px}
.sp-empty .mono{font-size:11.5px;letter-spacing:.24em}

.sp-parts{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:12px;align-content:start}
.sp-part{
  position:relative;border:1px solid var(--line);background:rgba(20,26,41,.82);
  display:flex;flex-direction:column;overflow:hidden;cursor:pointer;
  transition:border-color .1s,transform .1s;
}
.sp-part:hover{border-color:var(--mint);transform:translateY(-2px)}
.sp-part.is-on{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset}
.sp-part__art{
  display:grid;place-items:center;min-height:124px;padding:8px;
  background:repeating-conic-gradient(rgba(255,255,255,.05) 0% 25%,transparent 0% 50%) 0 0/12px 12px;
}
.sp-part__art img{max-width:100%;max-height:112px;image-rendering:pixelated;display:block}
.sp-part__meta{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:6px 8px;border-top:1px solid var(--line)}
.sp-part__name{font-size:12px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-part__name input{width:100%;background:var(--panel-sunken);border:1px solid var(--mint-line);color:var(--text);font-size:12px;padding:1px 3px}
.sp-part__tag{font-family:var(--font-mono);font-size:11px;color:var(--text-faint)}
.sp-part__n{position:absolute;left:5px;top:5px;font-family:var(--font-mono);font-size:11px;
  color:var(--text);background:rgba(7,9,17,.8);border:1px solid var(--line);padding:0 4px}
.sp-part__dl{position:absolute;right:4px;top:4px;width:22px;height:22px;display:grid;place-items:center;
  border:1px solid var(--line-ui);background:rgba(7,9,17,.8);color:var(--text-muted);cursor:pointer;font-size:12px;opacity:0}
.sp-part:hover .sp-part__dl{opacity:1}
.sp-part__dl:hover{border-color:var(--mint);color:var(--mint)}

.sp-overlayview,.sp-srcview{display:grid;place-items:center;min-height:100%}
.sp-overlayview img,.sp-srcview img{max-width:100%;image-rendering:pixelated;display:block;border:1px solid var(--line)}

.sp-stage__ft{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:8px 12px;border-top:1px solid var(--line);background:var(--panel);font-size:11.5px;color:var(--text-faint)}
.sp-stage__ft p{margin:0}

/* ---------- 说明 ---------- */
.sp-why__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.sp-why__card{border:1px solid var(--line);padding:18px;background:rgba(20,26,41,.55)}
.sp-why__card p.mono{font-size:11.5px;letter-spacing:.18em;color:var(--mint);margin-bottom:8px}
.sp-why__card p:not(.mono){font-size:13.5px;line-height:1.8;color:var(--text-muted);margin-top:8px}

/* ---------- toast ---------- */
.toast-wrap{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:80;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{
  display:flex;align-items:center;gap:8px;max-width:92vw;
  background:var(--panel-2);border:1px solid var(--line-strong);border-left:4px solid var(--mint);
  padding:10px 14px;box-shadow:0 6px 24px rgba(0,0,0,.5);
  font-size:13px;color:var(--text);animation:toastIn 140ms ease-out;
}
.toast--err{border-left-color:var(--rose)}
@keyframes toastIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

@media (max-width:1023px){
  .sp-work{grid-template-columns:1fr}
  .sp-side{position:static}
  .sp-facts{grid-template-columns:1fr}
  .sp-why__grid{grid-template-columns:1fr}
  .sp-stage{min-height:480px}
}

/* 图标兜底（base.css 里已有，这里再锁一遍，防止顺序问题） */
.i{fill:none;stroke:currentColor;stroke-width:2}

/* ============================================================
   拆解模板（2026-11 追加）
   ============================================================ */
.sp-tpl{border-top:1px solid var(--line);margin-top:14px;padding-top:12px}
.sp-lb span{font-size:10.5px;letter-spacing:.06em;color:var(--text-faint);margin-left:6px}
.sp-tpl__row{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:8px 0 6px}
.sp-tpl__b{
  height:32px;font-size:12.5px;cursor:pointer;
  color:var(--text-muted);background:var(--panel-sunken);
  border:1px solid var(--line);
  transition:color 100ms, border-color 100ms, background-color 100ms;
}
.sp-tpl__b:hover{color:var(--text);border-color:var(--line-2)}
.sp-tpl__b[aria-pressed="true"]{
  color:var(--mint);border-color:var(--mint-line);background:var(--mint-soft);
}

/* 真实案例 */
.sp-case{border-top:1px solid var(--line)}
.sp-case__hd{max-width:720px}
.sp-case__lead{margin-top:10px;font-size:14px;line-height:1.75;color:var(--text-muted)}
.sp-case__grid{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:var(--sp5);align-items:start;margin-top:var(--sp5);
}
.sp-case__fig{margin:0;border:1px solid var(--line);background:var(--panel-sunken)}
.sp-case__fig img{display:block;width:100%;height:auto;max-height:560px;object-fit:contain;image-rendering:pixelated}
.sp-case__fig figcaption{padding:8px 10px;font-size:11px;letter-spacing:.08em;color:var(--text-faint)}
.sp-case__parts{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;
  align-content:start;
}
.sp-case__parts img{
  display:block;width:100%;height:auto;image-rendering:pixelated;
  border:1px solid var(--line);
  background:repeating-conic-gradient(rgba(232,238,252,.06) 0% 25%,transparent 0% 50%) 0 0/12px 12px;
}
.sp-case__ft{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:var(--sp5)}
.sp-case__n{margin-left:auto;font-size:11px;letter-spacing:.1em;color:var(--text-faint)}
@media (max-width:1023px){
  .sp-case__grid{grid-template-columns:minmax(0,1fr)}
  .sp-case__parts{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:520px){
  .sp-case__parts{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sp-case__n{margin-left:0}
}