.hc-pro-chart-wrap{
  width:100%;
  height:100%;
  background:#0b111b;
  border:1px solid rgba(255,255,255,.06);
  border-radius:18px;
  overflow:hidden;
}

.hc-pro-chart-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:14px 18px;
  border-bottom:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01));
}

.hc-pro-chart-head strong{
  display:block;
  color:#fff;
  font-size:20px;
  font-weight:900;
}

.hc-pro-chart-head span{
  display:block;
  color:#8f9bad;
  font-size:12px;
  margin-top:4px;
}

.hc-pro-stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  min-width:520px;
}

.hc-pro-stats div{
  text-align:right;
}

.hc-pro-stats em{
  display:block;
  color:#fff;
  font-style:normal;
  font-weight:900;
  font-size:15px;
}

.hc-up{color:#0ECB81!important}
.hc-down{color:#F6465D!important}

.hc-pro-periods{
  display:flex;
  gap:8px;
  padding:10px 14px;
  border-bottom:1px solid rgba(255,255,255,.05);
  background:#0b111b;
}

.hc-pro-periods button{
  min-width:44px;
  height:28px;
  border:0;
  border-radius:8px;
  background:rgba(255,255,255,.06);
  color:#8f9bad;
  font-weight:800;
  cursor:pointer;
}

.hc-pro-periods button.active{
  background:#FCD535;
  color:#0b111b;
}

.hc-pro-chart{
  width:100%;
  height:560px;
  min-height:560px;
}

@media(max-width:768px){
  .hc-pro-chart-head{
    display:block;
    text-align:left;
  }

  .hc-pro-stats{
    grid-template-columns:repeat(2,1fr);
    min-width:0;
    gap:12px;
    margin-top:12px;
  }

  .hc-pro-stats div{
    text-align:left;
  }

  .hc-pro-chart{
    height:420px;
    min-height:560px;
  }
}