/* 3dmodel/main.css
   仅负责 3d 容器布局与加载完成后的显示控制 */
   .model_main{
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .model_main .container{
    width: 100%;
    height: 980px;
    background:#FFFFFF;
  }
  body.model-assets-ready #model-stage {
    opacity: 1;
    pointer-events: none;
    position: absolute;
    width: 100%;
    height: 100%;
    background:transparent;
    /* canvas 必须在内容层之上才能看见 3D；pointer-events:none 让点击穿透到下方 */
    z-index: 2;
  }
  #model-stage canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    left:0px;
    top:0px;
    z-index: 2;
    pointer-events: none;
  }
  
  /* ===== Model toolbar (futuristic UI) ===== */
  .model-toolbar {
    position: absolute;
    transform: translateX(-50%);
    z-index: 100000; /* 覆盖 WebGL canvas，确保按钮能接收到指针事件 */
    user-select: none;
    pointer-events: auto; /* 允许 hover/click 触发；面板本身也已设置 pointer-events: auto */
  }
  
  .model-toolbar__panel {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(20, 28, 48, 0.70), rgba(10, 14, 24, 0.55));
    border: 1px solid rgba(120, 190, 255, 0.22);
    box-shadow:
      0 10px 30px rgba(0, 0, 0, 0.35),
      0 0 0 1px rgba(0, 190, 255, 0.08) inset,
      0 0 22px rgba(0, 190, 255, 0.16);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  
  .model-toolbar__btn {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    box-shadow:
      0 0 0 1px rgba(120, 190, 255, 0.14) inset,
      0 6px 18px rgba(0, 0, 0, 0.22);
    cursor: pointer;
    transition: transform 140ms ease, background 140ms ease, box-shadow 140ms ease;
  }
  
  .model-toolbar__btn:hover {
    transform: translateY(-1px);
    background: rgba(0, 190, 255, 0.10);
    box-shadow:
      0 0 0 1px rgba(120, 190, 255, 0.26) inset,
      0 10px 26px rgba(0, 0, 0, 0.26),
      0 0 18px rgba(0, 190, 255, 0.18);
  }
  
  .model-toolbar__btn:active {
    transform: translateY(0px) scale(0.98);
  }
  
  .model-toolbar__btn.is-active {
    background: rgba(0, 190, 255, 0.16);
    box-shadow:
      0 0 0 1px rgba(0, 190, 255, 0.45) inset,
      0 0 24px rgba(0, 190, 255, 0.22);
  }
  
  .model-toolbar__icon {
    width: 18px;
    height: 18px;
    display: block;
    filter: drop-shadow(0 0 10px rgba(0, 190, 255, 0.25));
  }
  
  .model-toolbar__divider {
    width: 1px;
    height: 26px;
    background: rgba(120, 190, 255, 0.18);
    margin: 0 2px;
  }
  
  .model-toolbar__swatch {
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 0 0 1px rgba(120, 190, 255, 0.12) inset;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease;
  }
  
  .model-toolbar__swatch:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.08);
    box-shadow:
      0 0 0 1px rgba(120, 190, 255, 0.22) inset,
      0 0 16px rgba(0, 190, 255, 0.12);
  }
  
  .model-toolbar__swatch.is-active {
    box-shadow:
      0 0 0 1px rgba(0, 190, 255, 0.42) inset,
      0 0 18px rgba(0, 190, 255, 0.22);
  }
  
  .model-toolbar__swatchDot {
    width: 14px;
    height: 14px;
    border-radius: 999px;
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.28) inset,
      0 0 12px rgba(0, 0, 0, 0.25);
  }
  
  .model-toolbar__swatchDot--silver { background: linear-gradient(145deg, #f6f7fb, #a8acb7); }
  .model-toolbar__swatchDot--pink { background: #ff4fa6; }
  .model-toolbar__swatchDot--green { background: #10c07c; }
  .model-toolbar__swatchDot--orange { background: #ff8a1a; }

  /* ===== Floating light panel ===== */
  .model-light-panel {
    position: fixed;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999999999;
    pointer-events: auto;
    user-select: none;
  }

  .model-light-panel__inner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(120, 190, 255, 0.25);
    background: linear-gradient(180deg, rgba(20, 28, 48, 0.78), rgba(10, 14, 24, 0.68));
    box-shadow:
      0 10px 26px rgba(0, 0, 0, 0.3),
      0 0 0 1px rgba(0, 190, 255, 0.1) inset;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  .model-light-panel__toggle {
    border: 1px solid rgba(120, 190, 255, 0.32);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    color: #dff2ff;
    height: 28px;
    padding: 0 10px;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
  }

  .model-light-panel__toggle:hover {
    background: rgba(74, 183, 255, 0.16);
  }

  .model-light-panel.is-collapsed .model-light-panel__title,
  .model-light-panel.is-collapsed .model-light-panel__group {
    display: none;
  }

  .model-light-panel.is-collapsed .model-light-panel__inner {
    padding: 8px 10px;
  }

  .model-light-panel__title {
    color: #d9f1ff;
    font-size: 12px;
    line-height: 1;
    padding-top: 8px;
    min-width: 86px;
    opacity: 0.9;
  }

  .model-light-panel__group {
    display: grid;
    gap: 6px;
    min-width: 210px;
    padding-left: 10px;
    border-left: 1px solid rgba(120, 190, 255, 0.18);
  }

  .model-light-panel__row {
    display: grid;
    grid-template-columns: 14px 1fr 56px;
    gap: 6px;
    align-items: center;
    color: rgba(228, 243, 255, 0.95);
    font-size: 11px;
    line-height: 1;
  }

  .model-light-panel__switch {
    grid-template-columns: auto 1fr;
    gap: 8px;
    cursor: pointer;
  }

  .model-light-panel input[type="range"] {
    width: 100%;
    accent-color: #4ab7ff;
  }

  .model-light-panel input[type="number"] {
    width: 56px;
    border: 1px solid rgba(120, 190, 255, 0.25);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
    color: #e8f4ff;
    height: 24px;
    padding: 0 6px;
    font-size: 11px;
    outline: none;
  }
.model_container{
  position:relative;
  z-index:1;
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  pointer-events:none;
}
.model_tmp{width:50%;height:100%;box-sizing:border-box;padding:120px 20px 90px 20px;overflow:hidden;}
.model_tmp.model-left{
  pointer-events:auto;
  cursor:grab;
  touch-action:none;
  background:transparent;
}
.model_tmp.model-left.is-bottle-dragging{cursor:grabbing;}
.model_tmp.model-right{
  pointer-events:auto;
  user-select:text;
  -webkit-user-select:text;
}
.model_tmp *{word-wrap: break-word;}
.model_tmp img{max-width:100%;height:auto;}
.model_tmp.model-right iframe,
.model_tmp.model-right video,
.model_tmp.model-right a{
  pointer-events:auto;
}
  @media screen and (max-width: 1080px) {
    .model_main{height:fit-content;display:flex;flex-wrap:wrap;}
    body.model-assets-ready #model-stage{
      position:relative;
      width:100%;
      height:620px;
      order:1;
      background:#F1F1F1;
      pointer-events:auto;
      z-index:auto;
    }
    /* body.model-assets-ready #model-stage canvas{transform:translateY(8%);} */
    
    #model-stage canvas{z-index:1;pointer-events:auto;}
    .model_container{z-index:0;}
    .model-light-panel {
      top: 8px;
      width: calc(100vw - 20px);
      max-width: 980px;
    }
    .model-light-panel__inner {
      flex-wrap: wrap;
    }
    .model-light-panel__group {
      min-width: 190px;
    }
    .model_tmp.model-left{display:none;}
    .model_tmp.model-right{width: 100% !important;padding:0.4rem 20px!important;}
    .model_main .container{height: auto !important;order:2;}
  }
  @media screen and (max-width: 992px) {
    body.model-assets-ready #model-stage{height:568px;}
    /* .model_main .container{display:none;} */
    
  }
  @media screen and (max-width: 768px) {
    body.model-assets-ready #model-stage{height:540px;}
    .model-toolbar__panel{padding:4px 6px;gap:6px;}
    .model-toolbar__btn{width:24px;height:24px;}
  }
  @media screen and (max-width: 680px) {
    body.model-assets-ready #model-stage{height:498px;}
  }
  @media screen and (max-width: 600px) {
    body.model-assets-ready #model-stage{height:498px;}
    /* body.model-assets-ready #model-stage canvas{transform:translateY(-5%);} */
  }
  @media screen and (max-width: 560px) {
    body.model-assets-ready #model-stage{height:480px;}
  }
  @media screen and (max-width: 430px) {
    body.model-assets-ready #model-stage{height:380px;}
  }
  @media screen and (max-width: 390px) {
    body.model-assets-ready #model-stage{height:360px;}
    /* body.model-assets-ready #model-stage canvas{transform:translateY(-8%);} */
  }
  @media screen and (max-width: 375px) {
    body.model-assets-ready #model-stage{height:340px;}
  }
  @media screen and (max-width: 360px) {
    .model_section{display:none;}
  }