

            #photoUrlList_03fed688a6144186a5ea340da352cd47 .lead_swiper_container{
                --swiper_wrapperWidth: 100%;
                --swiper_main_ratio: 1 / 1;
                --swiper_main_width: 100%;
                --swiper_thumb_align: start;
                --swiper_thumb_gap: 20px;
                --swiper_thumb_space: 20px;
                --swiper_thumb_ratio: 1 / 1;
                --swiper_video_icon_size: 30px;
                --swiper_slidesPerView: 5;
                --swiper_thumbsWidth: 100%;
                --swiper_thumbsSlideHeight: 80px;
                --swiper_swiperSlideSpaceBetween:10px;
                --swiper_waterfall_num: 2;
                --swiper_waterfall_space: 20px;
                --swiper_icon_space: 10px;
                --swiper-icon-size: 20px;
            }
    
            @media (max-width: 768px) {
                div #photoUrlList_03fed688a6144186a5ea340da352cd47 .lead_swiper_container{
                --swiper_wrapperHeight: auto;
                --swiper_thumbsSlideHeight: auto;
              }
            }
        

        .prodName{
            font-size:22px;
        }
    

    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      background-color: #f1f5f9;
      color: #0f172a;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      padding: 24px 16px;
    }
    
    /* 主卡片容器 */
    .unit-widget-wrapper {
      width: 100%;
      max-width: 720px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 14px;
      overflow: hidden;
      box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.08), 0 8px 10px -6px rgba(15, 23, 42, 0.04);
      user-select: none;
    }

    /* 隐藏底层单选控制器 */
    .comp-radio { display: none !important; }

    /* 顶部标题栏 */
    .unit-header {
      padding: 16px 20px;
      background: #f8fafc;
      border-bottom: 1px solid #e2e8f0;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .unit-title-group h3 {
      font-size: 16px;
      font-weight: 700;
      color: #0f172a;
      margin-bottom: 3px;
    }
    .model-tag {
      display: inline-block;
      background: #0284c7;
      color: #ffffff;
      font-size: 11px;
      font-weight: 700;
      padding: 2px 7px;
      border-radius: 4px;
      margin-left: 6px;
      vertical-align: middle;
      letter-spacing: 0.5px;
    }
    .unit-title-group p {
      font-size: 12px;
      color: #64748b;
    }
    .unit-hint-badge {
      font-size: 11px;
      padding: 5px 12px;
      border-radius: 20px;
      background: #e0f2fe;
      color: #0284c7;
      font-weight: 600;
      border: 1px solid #bae6fd;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    /* 型号参数解码条 */
    .model-decode-bar {
      display: flex;
      gap: 8px;
      padding: 10px 20px;
      background: #f1f5f9;
      border-bottom: 1px solid #e2e8f0;
      overflow-x: auto;
      font-size: 11.5px;
    }
    .decode-chip {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      padding: 4px 10px;
      border-radius: 6px;
      color: #334155;
      white-space: nowrap;
    }
    .decode-chip b { color: #0284c7; }

    /* 产品展示与热点区域 */
    .unit-stage {
      position: relative;
      width: 100%;
      background: radial-gradient(circle at center, #ffffff 0%, #f8fafc 100%);
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 22px 0 16px 0;
      border-bottom: 1px solid #e2e8f0;
    }
    .unit-img-box {
      position: relative;
      width: 350px;
      max-width: 92%;
      aspect-ratio: 1 / 1;
    }
    .unit-img-box img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
      pointer-events: none;
    }

    /* 12 个互动图钉 */
    .hotspot-pin {
      position: absolute;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: #0284c7;
      color: #ffffff;
      font-size: 10.5px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transform: translate(-50%, -50%);
      box-shadow: 0 2px 6px rgba(2, 132, 199, 0.45);
      border: 2px solid #ffffff;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      z-index: 10;
    }
    .hotspot-pin:hover {
      transform: translate(-50%, -50%) scale(1.18);
      background: #0369a1;
      box-shadow: 0 4px 10px rgba(2, 132, 199, 0.6);
      z-index: 20;
    }

    /* 12 个精确位置映射 */
    .pin-1  { left: 45%; top: 66%; } /* Compressor */
    .pin-2  { left: 27%; top: 38%; } /* Condenser */
    .pin-3  { left: 64%; top: 66%; } /* Receiver */
    .pin-4  { left: 40%; top: 76%; } /* Filter Drier */
    .pin-5  { left: 58%; top: 76%; } /* Sight Glass */
    .pin-6  { left: 60%; top: 56%; } /* Solenoid Valve */
    .pin-7  { left: 74%; top: 56%; } /* Pressure Switch */
    .pin-8  { left: 52%; top: 35%; } /* Controls & Accessories */
    .pin-9  { left: 50%; top: 48%; } /* Box Enclosure */
    .pin-10 { left: 48%; top: 18%; } /* Condenser Fan Motor */
    .pin-11 { left: 76%; top: 72%; } /* Refrigerant Piping */
    .pin-12 { left: 62%; top: 34%; } /* Electrical Control Box */

    /* 下方检查器布局 */
    .unit-inspector {
      display: flex;
      min-height: 330px;
      background: #ffffff;
    }

    /* 左侧列表 (12 项) */
    .component-list-pane {
      width: 48%;
      border-right: 1px solid #e2e8f0;
      overflow-y: auto;
      max-height: 340px;
      padding: 10px 8px;
    }
    .component-item {
      display: flex;
      align-items: center;
      gap: 7px;
      padding: 6px 9px;
      border-radius: 7px;
      margin-bottom: 3px;
      cursor: pointer;
      background: #f8fafc;
      border: 1px solid transparent;
      transition: all 0.15s ease;
    }
    .component-item:hover {
      background: #f1f5f9;
    }
    .item-badge {
      width: 19px;
      height: 19px;
      border-radius: 50%;
      background: #cbd5e1;
      color: #475569;
      font-size: 10px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: all 0.15s ease;
    }
    .item-label {
      font-size: 11.5px;
      font-weight: 500;
      color: #334155;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* 右侧详情面板 */
    .component-detail-pane {
      flex: 1;
      padding: 20px;
      position: relative;
    }
    .detail-card {
      display: none;
      height: 100%;
    }
    .detail-header-tag {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.5px;
      color: #0284c7;
      text-transform: uppercase;
      margin-bottom: 4px;
    }
    .detail-title {
      font-size: 15.5px;
      font-weight: 700;
      color: #0f172a;
      margin: 0 0 12px 0;
      padding-bottom: 8px;
      border-bottom: 1px dashed #cbd5e1;
    }
    .detail-field { margin-bottom: 11px; }
    .detail-label {
      font-size: 11px;
      font-weight: 600;
      color: #64748b;
      text-transform: uppercase;
      margin-bottom: 2px;
    }
    .detail-value {
      font-size: 12.5px;
      color: #334155;
      line-height: 1.5;
    }
    .detail-tag-pill {
      display: inline-block;
      padding: 3px 9px;
      background: #f1f5f9;
      border: 1px solid #e2e8f0;
      border-radius: 4px;
      font-size: 11px;
      color: #475569;
      margin-top: 4px;
    }

    /* 纯 CSS 状态机切换规则 (12 状态联动) */
    #c1:checked ~ .unit-stage .pin-1,
    #c2:checked ~ .unit-stage .pin-2,
    #c3:checked ~ .unit-stage .pin-3,
    #c4:checked ~ .unit-stage .pin-4,
    #c5:checked ~ .unit-stage .pin-5,
    #c6:checked ~ .unit-stage .pin-6,
    #c7:checked ~ .unit-stage .pin-7,
    #c8:checked ~ .unit-stage .pin-8,
    #c9:checked ~ .unit-stage .pin-9,
    #c10:checked ~ .unit-stage .pin-10,
    #c11:checked ~ .unit-stage .pin-11,
    #c12:checked ~ .unit-stage .pin-12 {
      background: #0284c7;
      transform: translate(-50%, -50%) scale(1.28);
      box-shadow: 0 0 0 4px rgba(2, 132, 199, 0.25), 0 4px 12px rgba(2, 132, 199, 0.6);
      z-index: 30;
    }

    #c1:checked ~ .unit-inspector .item-1,
    #c2:checked ~ .unit-inspector .item-2,
    #c3:checked ~ .unit-inspector .item-3,
    #c4:checked ~ .unit-inspector .item-4,
    #c5:checked ~ .unit-inspector .item-5,
    #c6:checked ~ .unit-inspector .item-6,
    #c7:checked ~ .unit-inspector .item-7,
    #c8:checked ~ .unit-inspector .item-8,
    #c9:checked ~ .unit-inspector .item-9,
    #c10:checked ~ .unit-inspector .item-10,
    #c11:checked ~ .unit-inspector .item-11,
    #c12:checked ~ .unit-inspector .item-12 {
      background: #e0f2fe;
      border-color: #bae6fd;
    }

    #c1:checked ~ .unit-inspector .item-1 .item-badge,
    #c2:checked ~ .unit-inspector .item-2 .item-badge,
    #c3:checked ~ .unit-inspector .item-3 .item-badge,
    #c4:checked ~ .unit-inspector .item-4 .item-badge,
    #c5:checked ~ .unit-inspector .item-5 .item-badge,
    #c6:checked ~ .unit-inspector .item-6 .item-badge,
    #c7:checked ~ .unit-inspector .item-7 .item-badge,
    #c8:checked ~ .unit-inspector .item-8 .item-badge,
    #c9:checked ~ .unit-inspector .item-9 .item-badge,
    #c10:checked ~ .unit-inspector .item-10 .item-badge,
    #c11:checked ~ .unit-inspector .item-11 .item-badge,
    #c12:checked ~ .unit-inspector .item-12 .item-badge {
      background: #0284c7;
      color: #ffffff;
    }

    #c1:checked ~ .unit-inspector .item-1 .item-label,
    #c2:checked ~ .unit-inspector .item-2 .item-label,
    #c3:checked ~ .unit-inspector .item-3 .item-label,
    #c4:checked ~ .unit-inspector .item-4 .item-label,
    #c5:checked ~ .unit-inspector .item-5 .item-label,
    #c6:checked ~ .unit-inspector .item-6 .item-label,
    #c7:checked ~ .unit-inspector .item-7 .item-label,
    #c8:checked ~ .unit-inspector .item-8 .item-label,
    #c9:checked ~ .unit-inspector .item-9 .item-label,
    #c10:checked ~ .unit-inspector .item-10 .item-label,
    #c11:checked ~ .unit-inspector .item-11 .item-label,
    #c12:checked ~ .unit-inspector .item-12 .item-label {
      color: #0369a1;
      font-weight: 600;
    }

    #c1:checked ~ .unit-inspector .card-1,
    #c2:checked ~ .unit-inspector .card-2,
    #c3:checked ~ .unit-inspector .card-3,
    #c4:checked ~ .unit-inspector .card-4,
    #c5:checked ~ .unit-inspector .card-5,
    #c6:checked ~ .unit-inspector .card-6,
    #c7:checked ~ .unit-inspector .card-7,
    #c8:checked ~ .unit-inspector .card-8,
    #c9:checked ~ .unit-inspector .card-9,
    #c10:checked ~ .unit-inspector .card-10,
    #c11:checked ~ .unit-inspector .card-11,
    #c12:checked ~ .unit-inspector .card-12 {
      display: flex;
      flex-direction: column;
      justify-content: center;
      animation: fadeIn 0.15s ease-out;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(4px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .component-list-pane::-webkit-scrollbar { width: 4px; }
    .component-list-pane::-webkit-scrollbar-track { background: transparent; }
    .component-list-pane::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
  

      .code-box { fill: #F1F3F5; stroke: #E2E8F0; stroke-width: 1.5; }
      .code-font { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; font-size: 14px; font-weight: 700; fill: #1E293B; text-anchor: middle; dominant-baseline: central; }
      .label-font { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; font-size: 12px; font-weight: 400; fill: #334155; dominant-baseline: central; }
      .line-tf { stroke: #2563EB; fill: #2563EB; }
      .line-15 { stroke: #D97706; fill: #D97706; }
      .line-m  { stroke: #64748B; fill: #64748B; }
      .line-y  { stroke: #0D9488; fill: #0D9488; }
      .connector { fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
    

        .emptyNodeData {
            display:none;
        }
   

    #productDetail_28412_03fed688a6144186a5ea340da352cd47_leftColumn{
        width:40%;
        max-width:100%;
        flex: 1 1 40%;
    }
    #productDetail_28412_03fed688a6144186a5ea340da352cd47_rightColumn{
        width:60%;
        max-width:100%;
        flex: 1 1 60%;
    }

    #productDetail_28412_03fed688a6144186a5ea340da352cd47_rowContainer_ip5413{
        padding: 0px;
    }

    #productDetail_28412_03fed688a6144186a5ea340da352cd47_column_iojrko{
        padding: 5px 15px 5px 0px;
    }
