.exploded-editor-wrap{display:grid;grid-template-columns:240px minmax(0,1fr) 300px;gap:16px;align-items:start}
.exploded-editor-toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.exploded-editor-toolbar select{min-width:180px}
.exploded-editor-hint{
  font-size:0.78rem;color:#777;line-height:1.55;margin:0 0 14px;
  padding:10px 12px;background:rgba(96,144,240,0.06);border-radius:8px;border:1px solid rgba(96,144,240,0.15);
}
.exploded-material-panel{
  background:#141414;border:1px solid #2a2a2a;border-radius:12px;padding:12px;
  max-height:780px;display:flex;flex-direction:column;overflow:hidden;
}
.exploded-material-head{display:flex;flex-direction:column;gap:2px;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid #2a2a2a}
.exploded-material-head strong{font-size:0.88rem;color:#ddd}
.exploded-material-sub{font-size:0.72rem;color:#666}
.exploded-material-library{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding-right:2px}
.exploded-material-group{display:flex;flex-direction:column;gap:6px;margin-bottom:4px}
.exploded-material-group-title{
  font-size:0.72rem;color:#888;font-weight:600;letter-spacing:0.02em;
  padding:4px 2px 2px;border-bottom:1px solid #252525;margin-bottom:2px;
}
.exploded-material-empty{padding:16px 8px;color:#666;font-size:0.8rem;text-align:center}
.part-material-card{
  display:flex;align-items:center;gap:10px;padding:8px;background:#1a1a1a;border:1px solid #2e2e2e;
  border-radius:8px;cursor:grab;transition:border-color .15s,background .15s;user-select:none;
}
.part-material-card:hover{border-color:rgba(96,144,240,0.5);background:#222}
.part-material-card:active{cursor:grabbing}
.part-material-card.placed{border-color:rgba(96,160,96,0.35)}
.part-material-card.placed::after{
  content:'✓';margin-left:auto;font-size:0.75rem;color:#60a060;flex-shrink:0;
}
.part-material-card .part-sprite-thumb,
.part-material-card .part-graphic-thumb,
.part-material-card .part-material-img-thumb{
  width:52px;height:52px;flex-shrink:0;background:linear-gradient(145deg,#1a1a1a,#0a0a0a);
  border-radius:6px;border:1px solid #333;overflow:hidden;
  display:flex;align-items:center;justify-content:center;padding:4px;box-sizing:border-box;
}
.part-material-card .part-sprite-thumb img,
.part-material-card .part-material-img-thumb img{max-width:100%;max-height:100%;display:block;object-fit:contain}
.part-material-img-thumb{background:
  repeating-conic-gradient(#2a2a2a 0% 25%, #1e1e1e 0% 50%) 50% / 10px 10px;
}
.exploded-hotspot-box .hs-part-graphic .part-material-img{
  width:100%;height:100%;max-width:100%;max-height:100%;display:block;object-fit:contain;
}
.part-graphic-thumb .part-graphic-svg{width:100%;height:100%;display:block}
.part-graphic-missing{color:#666;font-size:1.2rem}
.part-material-meta{min-width:0;flex:1}
.part-material-meta .pm-label{display:block;font-size:0.78rem;color:#ddd;font-weight:500;line-height:1.3}
.part-material-meta .pm-sub{display:block;font-size:0.68rem;color:#777;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.exploded-editor-main{min-width:0}
.exploded-editor-viewport.composite-view .exploded-editor-hotspots,
.exploded-viewport.composite-view .exploded-hotspots-layer{
  left:0!important;top:0!important;width:100%!important;height:100%!important;
}
.exploded-editor-viewport{
  position:relative;overflow:hidden;border-radius:12px;
  min-height:680px;background:#111;border:1px solid #2a2a2a;
}
.exploded-editor-stage{
  position:relative;min-height:680px;touch-action:none;user-select:none;cursor:crosshair;
}
.exploded-editor-stage.has-diagram .exploded-editor-viewport{cursor:crosshair}
.exploded-editor-stage.preview-mode{cursor:default}
.exploded-editor-stage.drag-over .exploded-editor-viewport{box-shadow:inset 0 0 0 2px rgba(59,130,246,0.6)}
.exploded-viewport-img-wrap{
  position:absolute;left:0;width:100%;transition:top .15s ease;
}
.exploded-viewport-img-wrap img{
  display:block;width:100%;height:auto;pointer-events:none;
}
.exploded-editor-placeholder{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:#666;font-size:0.9rem;padding:24px;text-align:center;z-index:1;
}
.exploded-editor-viewport.composite-view .exploded-editor-placeholder{display:none}
.exploded-editor-hotspots{position:absolute;inset:0;pointer-events:none;overflow:visible;z-index:2}
.exploded-hotspot-box{
  position:absolute;border:2px dashed rgba(96,144,240,0.75);
  background:rgba(96,144,240,0.06);border-radius:4px;pointer-events:auto;
  cursor:move;box-sizing:border-box;min-width:18px;min-height:18px;
  transition:background .15s,border-color .15s;overflow:visible;
}
.exploded-hotspot-box .hs-part-graphic{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  pointer-events:none;z-index:0;overflow:hidden;border-radius:2px;
}
.exploded-hotspot-box .hs-part-graphic .part-material-img,
.exploded-hotspot-box .hs-part-graphic .part-graphic-svg{
  width:100%;height:100%;max-width:100%;max-height:100%;display:block;object-fit:contain;
}
.exploded-hotspot-box.preview-box .hs-part-graphic{opacity:1}
.exploded-hotspot-box .hs-sprite-clip{
  position:absolute;inset:0;overflow:hidden;border-radius:2px;pointer-events:none;z-index:0;
}
.exploded-hotspot-box:hover:not(.active){background:rgba(180,180,180,0.1);border-color:rgba(180,180,180,0.6)}
.exploded-hotspot-box.draw-preview{
  border-style:solid;background:rgba(96,160,240,0.22);border-color:rgba(96,160,240,0.95);pointer-events:none;
}
.exploded-hotspot-box.active{
  border:2px solid rgba(59,130,246,0.95);background:rgba(59,130,246,0.12);
  box-shadow:0 0 0 2px rgba(59,130,246,0.25);
}
.exploded-hotspot-box.locked{cursor:not-allowed;opacity:0.85}
.exploded-hotspot-box.hs-disabled{opacity:0.35;border-style:dotted}
.exploded-hotspot-box.preview-box{
  border:2px solid transparent;background:transparent;cursor:pointer;
}
.exploded-hotspot-box.preview-box .hs-sprite-clip{opacity:1}
.exploded-hotspot-box.preview-box:hover{background:rgba(180,180,180,0.08)}
.exploded-hotspot-box.preview-box.active{
  border-color:rgba(240,160,64,0.85);background:rgba(240,160,64,0.1);
}
.exploded-editor-stage.preview-mode .hs-handle{display:none}
.exploded-hotspot-box .hs-label{
  position:absolute;left:50%;bottom:100%;transform:translate(-50%,-4px);
  font-size:0.68rem;color:#fff;font-weight:500;
  background:rgba(0,0,0,0.82);padding:3px 8px;border-radius:4px;
  white-space:nowrap;max-width:min(140px,28vw);overflow:hidden;text-overflow:ellipsis;
  pointer-events:none;z-index:2;box-shadow:0 2px 8px rgba(0,0,0,0.35);
}
.exploded-hotspot-box.active .hs-label{background:rgba(37,99,235,0.92)}
.exploded-hotspot-box .hs-lock-badge{
  position:absolute;top:2px;right:2px;font-size:0.65rem;pointer-events:none;z-index:3;
}
.exploded-hotspot-box .hs-handle{
  position:absolute;width:10px;height:10px;background:#3b82f6;border:1px solid #fff;
  border-radius:2px;pointer-events:auto;z-index:3;
}
.exploded-hotspot-box .hs-handle.se{right:-5px;bottom:-5px;cursor:se-resize}
.exploded-hotspot-box .hs-handle.sw{left:-5px;bottom:-5px;cursor:sw-resize}
.exploded-hotspot-box .hs-handle.ne{right:-5px;top:-5px;cursor:ne-resize}
.exploded-hotspot-box .hs-handle.nw{left:-5px;top:-5px;cursor:nw-resize}
.exploded-editor-side .panel{margin-bottom:0}
.exploded-editor-side .form-group{margin-bottom:10px}
.exploded-editor-side label{font-size:0.78rem;color:#888;display:block;margin-bottom:4px}
.exploded-editor-coords,.exploded-editor-drag-status{
  font-size:0.75rem;color:#aaa;font-family:ui-monospace,monospace;
  padding:8px 10px;background:#141414;border-radius:6px;border:1px solid #2a2a2a;margin-bottom:10px;min-height:2.2em;
}
.exploded-editor-drag-status{color:#6090d0}
.exploded-editor-prop-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.exploded-editor-status{font-size:0.78rem;color:#888;margin-top:8px;min-height:1.2em}
.exploded-editor-status.ok{color:#60a060}
.exploded-editor-status.err{color:#d06060}
.exploded-editor-list{max-height:180px;overflow-y:auto;border:1px solid #2a2a2a;border-radius:8px}
.exploded-editor-list .hs-list-empty{padding:12px;color:#666;font-size:0.82rem}
.exploded-editor-list button{
  display:block;width:100%;text-align:left;padding:10px 12px;background:transparent;
  border:none;border-bottom:1px solid #222;color:#ccc;font-size:0.82rem;cursor:pointer;
}
.exploded-editor-list button:last-child{border-bottom:none}
.exploded-editor-list button:hover{background:#1e1e1e}
.exploded-editor-list button.active{background:rgba(59,130,246,0.12);color:#6090f0}
.exploded-editor-list button.disabled-item{opacity:0.5}
.exploded-editor-list .hs-list-title{display:block;font-weight:500}
.exploded-editor-list .hs-list-sub{display:block;font-size:0.72rem;color:#666;margin-top:2px}
.exploded-editor-actions{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}

/* Admin editor canvas — match homepage exploded-canvas sizing */
.exploded-canvas--admin{
  flex:1;min-width:0;position:relative;width:100%;
  background:#1a1a1f;border-radius:20px;overflow:hidden;
  border:1px solid rgba(255,255,255,0.08);
  display:flex;align-items:center;justify-content:center;
  min-height:clamp(280px,38vw,520px);
  max-height:min(56vh,520px);
  box-shadow:0 8px 32px rgba(0,0,0,0.35);
}
.exploded-canvas--admin .exploded-editor-stage,
.exploded-canvas--admin .exploded-editor-viewport{
  min-height:280px;height:100%;width:100%;
  background:transparent;border:none;border-radius:0;
}
.exploded-canvas--admin .exploded-editor-stage{
  display:flex;align-items:center;justify-content:center;
  touch-action:none;user-select:none;cursor:crosshair;
}
.exploded-canvas--admin .exploded-editor-viewport{
  display:flex;align-items:flex-start;justify-content:center;overflow:hidden;
}
.exploded-canvas--admin .exploded-viewport-img-wrap img,
.exploded-canvas--admin .exploded-editor-viewport.composite-view .exploded-viewport-img-wrap img,
.exploded-canvas--admin .exploded-editor-viewport.composite-view #hotspotEditorImg{
  display:block;width:100%;height:auto;pointer-events:none;object-fit:contain;
  max-width:none;max-height:none;
}
.exploded-canvas--admin .exploded-editor-viewport:not(.composite-view) #hotspotEditorImg{
  position:relative;z-index:0;display:block;
  width:auto;height:auto;object-fit:contain;
  max-width:calc(100% - 48px);max-height:calc(100% - 48px);
}
.exploded-canvas--admin.drag-over,
.exploded-canvas--admin .exploded-editor-stage.drag-over .exploded-editor-viewport{
  box-shadow:inset 0 0 0 2px rgba(59,130,246,0.6);
}

@media(max-width:1200px){
  .exploded-editor-wrap{grid-template-columns:200px minmax(0,1fr) 280px}
}
@media(max-width:960px){
  .exploded-editor-wrap{grid-template-columns:1fr}
  .exploded-editor-viewport:not(.exploded-canvas--admin .exploded-editor-viewport),
  .exploded-editor-stage:not(.exploded-canvas--admin .exploded-editor-stage){min-height:420px}
  .exploded-canvas--admin{min-height:240px;max-height:min(52vh,400px)}
  .exploded-material-panel{max-height:320px}
}

/* Frontend hotspots */
.exploded-stage{position:relative;width:100%;height:100%;min-height:280px;display:flex;align-items:center;justify-content:center}
.exploded-canvas .exploded-viewport{
  position:relative;width:100%;height:100%;min-height:280px;overflow:hidden;
  display:flex;align-items:flex-start;justify-content:center;
}
.exploded-viewport-img-wrap{position:absolute;left:0;width:100%}
.exploded-stage img,.exploded-canvas .exploded-viewport img{
  position:relative;z-index:0;width:100%;height:auto;object-fit:contain;display:block;
  max-width:calc(100% - 48px);max-height:none;
}
.exploded-hotspots-layer{position:absolute;inset:0;z-index:2;pointer-events:none;box-sizing:border-box;overflow:visible}
.exploded-hotspot-hit{
  position:absolute;border:2px solid rgba(240,160,64,0.35);background:rgba(240,160,64,0.06);
  border-radius:4px;cursor:pointer;pointer-events:auto;transition:border-color .2s,background .2s;
  box-sizing:border-box;min-width:12px;min-height:12px;padding:0;overflow:visible;
}
.exploded-hotspot-hit .hs-part-graphic{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  pointer-events:none;overflow:hidden;border-radius:2px;
}
.exploded-hotspot-hit .hs-part-graphic .part-material-img,
.exploded-hotspot-hit .hs-part-graphic img{
  width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;display:block;
}
.exploded-hotspot-hit .hs-part-graphic .part-graphic-svg{width:100%;height:100%;display:block}
.exploded-hotspot-hit .hs-hit-label{
  position:absolute;left:50%;bottom:100%;transform:translate(-50%,-4px);
  font-size:clamp(0.62rem,1.8vw,0.75rem);color:#fff;font-weight:500;line-height:1.3;
  background:rgba(8,8,12,0.88);padding:3px 8px;border-radius:4px;
  white-space:nowrap;max-width:min(120px,28vw);overflow:hidden;text-overflow:ellipsis;
  pointer-events:none;z-index:2;box-shadow:0 2px 10px rgba(0,0,0,0.4);
  border:1px solid rgba(240,160,64,0.25);
}
.exploded-hotspot-hit:hover{background:rgba(180,180,180,0.12);border-color:rgba(180,180,180,0.5)}
.exploded-hotspot-hit:hover .hs-hit-label{border-color:rgba(180,180,180,0.4)}
.exploded-hotspot-hit.active{
  border-color:rgba(240,160,64,0.9);background:rgba(240,160,64,0.18);
}
.exploded-hotspot-hit.active .hs-hit-label{
  background:rgba(240,160,64,0.92);color:#111;border-color:transparent;
}
.exploded-canvas.has-diagram .no-image-hint{display:none!important}

/* 首页拆解图 · 手机端 */
@media (max-width: 768px) {
  .exploded-canvas .exploded-stage,
  .exploded-canvas .exploded-viewport {
    min-height: 0;
  }

  .exploded-hotspots-layer {
    overflow: visible;
  }

  .exploded-hotspot-hit {
    min-width: 36px;
    min-height: 36px;
    border-radius: 6px;
  }

  .exploded-hotspot-hit .hs-hit-label {
    display: none;
    font-size: 0.7rem;
    max-width: min(100px, 40vw);
    bottom: calc(100% + 3px);
  }

  .exploded-hotspot-hit.active .hs-hit-label {
    display: block;
  }

  .exploded-hotspot-hit.active {
    border-color: rgba(240, 160, 64, 0.95);
    background: rgba(240, 160, 64, 0.2);
    box-shadow: 0 0 0 2px rgba(240, 160, 64, 0.35);
    z-index: 8;
  }

  .exploded-stage img,
  .exploded-canvas .exploded-viewport img {
    width: auto !important;
    height: auto !important;
    max-width: calc(100% - 20px) !important;
    max-height: calc(100% - 20px) !important;
  }
}