/* 首页币种闪兑按钮与“开始交易”使用同一交互与品牌效果。 */
#home .vx-v6-swap-form > button{
  min-width:158px!important;
  height:48px!important;
  padding:13px 28px!important;
  border:0!important;
  border-radius:5px!important;
  background:var(--v6-primary,#27e6d3)!important;
  color:#07110f!important;
  font-size:13px!important;
  font-weight:850!important;
  box-shadow:0 12px 30px rgba(39,230,211,.14)!important;
  transition:
    transform .2s ease,
    background .2s ease,
    box-shadow .2s ease!important;
}
#home .vx-v6-swap-form > button:hover{
  transform:translateY(-1px)!important;
  background:#4df2df!important;
  box-shadow:0 16px 34px rgba(39,230,211,.19)!important;
}
#home .vx-v6-swap-form > button:active{
  transform:translateY(0)!important;
}

/* 实时行情滚动栏前方加入低光呼吸指示灯。 */
.vx-live-price-label i{
  position:relative!important;
  display:inline-block!important;
  width:8px!important;
  height:8px!important;
  flex:0 0 8px!important;
  border-radius:50%!important;
  background:#27e6d3!important;
  box-shadow:
    0 0 0 0 rgba(39,230,211,.34),
    0 0 10px rgba(39,230,211,.42)!important;
  animation:vx13LiveDotBreathe 1.55s ease-in-out infinite!important;
}
.vx-live-price-label i::after{
  content:""!important;
  position:absolute!important;
  inset:-5px!important;
  border:1px solid rgba(39,230,211,.30)!important;
  border-radius:50%!important;
  opacity:0!important;
  animation:vx13LiveDotRing 1.55s ease-out infinite!important;
}
@keyframes vx13LiveDotBreathe{
  0%,100%{
    opacity:.55;
    transform:scale(.82);
    box-shadow:
      0 0 0 0 rgba(39,230,211,.30),
      0 0 7px rgba(39,230,211,.30);
  }
  50%{
    opacity:1;
    transform:scale(1.08);
    box-shadow:
      0 0 0 6px rgba(39,230,211,.08),
      0 0 14px rgba(39,230,211,.58);
  }
}
@keyframes vx13LiveDotRing{
  0%{opacity:.52;transform:scale(.55);}
  75%,100%{opacity:0;transform:scale(1.55);}
}

/* HC 移动端 K 线完整显示，不再被固定高度裁切。 */
@media(max-width:900px){
  #coin-detail.vx13-hc-mode .vx10-chart-panel{
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:hidden!important;
  }

  #coin-detail.vx13-hc-mode .vx10-chart-panel .chart-box{
    display:block!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
  }

  #coin-detail.vx13-hc-mode .hc-pro-chart-wrap{
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:hidden!important;
  }

  #coin-detail.vx13-hc-mode .hc-pro-chart-head{
    flex:0 0 auto!important;
    height:auto!important;
    min-height:0!important;
    padding:18px 16px 14px!important;
  }

  #coin-detail.vx13-hc-mode .hc-pro-stats{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:14px 18px!important;
    width:100%!important;
    min-width:0!important;
    margin-top:16px!important;
  }

  #coin-detail.vx13-hc-mode .hc-pro-periods{
    flex:0 0 auto!important;
    display:flex!important;
    gap:10px!important;
    width:100%!important;
    height:auto!important;
    padding:10px 14px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    white-space:nowrap!important;
    -webkit-overflow-scrolling:touch!important;
  }

  #coin-detail.vx13-hc-mode #hc-chart,
  #coin-detail.vx13-hc-mode .hc-pro-chart{
    display:block!important;
    flex:0 0 clamp(340px,92vw,430px)!important;
    width:100%!important;
    height:clamp(340px,92vw,430px)!important;
    min-height:clamp(340px,92vw,430px)!important;
    max-height:none!important;
    overflow:hidden!important;
  }

  /* HC 顶部 24H 涨跌在数据同步后始终保持可见。 */
  #coin-detail.vx13-hc-mode #detail-change.positive,
  #coin-detail.vx13-hc-mode #detail-change.up{
    color:#18c992!important;
  }
  #coin-detail.vx13-hc-mode #detail-change.negative,
  #coin-detail.vx13-hc-mode #detail-change.down{
    color:#ef5b6a!important;
  }
}

@media(max-width:430px){
  #coin-detail.vx13-hc-mode #hc-chart,
  #coin-detail.vx13-hc-mode .hc-pro-chart{
    flex-basis:350px!important;
    height:350px!important;
    min-height:350px!important;
  }
}
