/* ZEAM_SIGNALS_REAL_CHARTS_V44 */

body.zs43-signals .zs44-viz-grid{
  display:grid!important;
  grid-template-columns:1.15fr .85fr!important;
  gap:14px!important;
  padding:18px!important;
}

.zs44-chart-card{
  position:relative;
  overflow:hidden;
  min-height:280px;
  border:1px solid rgba(40,231,255,.14);
  border-radius:24px;
  background:
    radial-gradient(circle at 80% 0%,rgba(40,231,255,.10),transparent 36%),
    linear-gradient(145deg,rgba(2,14,26,.88),rgba(1,8,17,.96));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 0 26px rgba(0,170,255,.06);
  padding:16px;
}

.zs44-chart-card.wide{
  grid-column:span 2;
  min-height:330px;
}

.zs44-chart-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}

.zs44-chart-title{
  color:#fff;
  font-size:16px;
  font-weight:1000;
  letter-spacing:-.2px;
}

.zs44-chart-sub{
  color:#93aabd;
  font-size:11px;
  line-height:1.7;
  margin-top:5px;
}

.zs44-chart-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
  border:1px solid rgba(255,217,130,.24);
  border-radius:999px;
  background:rgba(255,217,130,.08);
  color:#ffe4aa;
  padding:0 10px;
  font-size:10px;
  font-weight:1000;
  white-space:nowrap;
}

.zs44-svg-wrap{
  width:100%;
  min-height:210px;
  display:grid;
  place-items:center;
}

.zs44-svg{
  width:100%;
  height:auto;
  max-height:250px;
  overflow:visible;
}

.zs44-axis{
  stroke:rgba(180,210,230,.15);
  stroke-width:1;
}

.zs44-grid-line{
  stroke:rgba(180,210,230,.08);
  stroke-width:1;
}

.zs44-line{
  fill:none;
  stroke:#28e7ff;
  stroke-width:4;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:drop-shadow(0 0 10px rgba(40,231,255,.35));
}

.zs44-area{
  fill:url(#zs44AreaGradient);
  opacity:.75;
}

.zs44-point{
  fill:#28e7ff;
  stroke:#020914;
  stroke-width:3;
}

.zs44-bar{
  rx:8;
  fill:url(#zs44BarGradient);
  filter:drop-shadow(0 0 8px rgba(40,231,255,.22));
}

.zs44-bar.gold{
  fill:url(#zs44GoldGradient);
}

.zs44-bar.red{
  fill:url(#zs44RedGradient);
}

.zs44-label{
  fill:#c8f8ff;
  font-size:11px;
  font-weight:800;
}

.zs44-muted-label{
  fill:#93aabd;
  font-size:10px;
  font-weight:700;
}

.zs44-donut-layout{
  display:grid;
  grid-template-columns:210px 1fr;
  gap:14px;
  align-items:center;
}

.zs44-donut-svg{
  width:210px;
  height:210px;
  overflow:visible;
}

.zs44-donut-bg{
  fill:none;
  stroke:rgba(255,255,255,.07);
  stroke-width:22;
}

.zs44-donut-seg{
  fill:none;
  stroke-width:22;
  stroke-linecap:round;
  transform:rotate(-90deg);
  transform-origin:100px 100px;
  filter:drop-shadow(0 0 8px rgba(40,231,255,.20));
}

.zs44-donut-seg.s0{stroke:#28e7ff}
.zs44-donut-seg.s1{stroke:#50ffc8}
.zs44-donut-seg.s2{stroke:#ffd982}
.zs44-donut-seg.s3{stroke:#ff7898}
.zs44-donut-seg.s4{stroke:#147dff}
.zs44-donut-seg.s5{stroke:#ff9b55}

.zs44-donut-center{
  fill:#fff;
  font-size:24px;
  font-weight:1000;
  text-anchor:middle;
}

.zs44-donut-sub{
  fill:#93aabd;
  font-size:10px;
  font-weight:800;
  text-anchor:middle;
}

.zs44-legend{
  display:grid;
  gap:9px;
}

.zs44-legend-item{
  display:grid;
  grid-template-columns:12px 1fr auto;
  gap:8px;
  align-items:center;
  color:#dffcff;
  font-size:12px;
  font-weight:900;
}

.zs44-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background:#28e7ff;
  box-shadow:0 0 10px rgba(40,231,255,.35);
}

.zs44-dot.s1{background:#50ffc8}
.zs44-dot.s2{background:#ffd982}
.zs44-dot.s3{background:#ff7898}
.zs44-dot.s4{background:#147dff}
.zs44-dot.s5{background:#ff9b55}

.zs44-ranked{
  display:grid;
  gap:12px;
  margin-top:8px;
}

.zs44-rank-row{
  display:grid;
  grid-template-columns:110px 1fr 56px;
  align-items:center;
  gap:10px;
  color:#dffcff;
  font-size:12px;
  font-weight:900;
}

.zs44-rank-name{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.zs44-rank-track{
  height:18px;
  border-radius:999px;
  overflow:hidden;
  background:rgba(255,255,255,.065);
  border:1px solid rgba(40,231,255,.08);
}

.zs44-rank-fill{
  display:block;
  height:100%;
  min-width:5px;
  border-radius:999px;
  background:linear-gradient(90deg,#28e7ff,#147dff);
  box-shadow:0 0 12px rgba(40,231,255,.22);
}

.zs44-rank-fill.green{
  background:linear-gradient(90deg,#50ffc8,#28e7ff);
}

.zs44-rank-fill.gold{
  background:linear-gradient(90deg,#ffd982,#ff9b55);
}

.zs44-rank-fill.red{
  background:linear-gradient(90deg,#ff7898,#ff9b55);
}

.zs44-hist{
  width:100%;
  height:230px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:9px;
  border-bottom:1px solid rgba(180,210,230,.12);
  padding:10px 0 0;
}

.zs44-hist-col{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
}

.zs44-hist-bar{
  width:100%;
  max-width:44px;
  min-height:4px;
  border-radius:12px 12px 4px 4px;
  background:linear-gradient(180deg,#28e7ff,#147dff);
  box-shadow:0 0 14px rgba(40,231,255,.20);
}

.zs44-hist-bar.loss{
  background:linear-gradient(180deg,#ff7898,#ff9b55);
}

.zs44-hist-bar.win{
  background:linear-gradient(180deg,#50ffc8,#28e7ff);
}

.zs44-hist-value{
  color:#dffcff;
  font-size:11px;
  font-weight:1000;
}

.zs44-hist-label{
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  color:#93aabd;
  font-size:10px;
  max-height:70px;
  overflow:hidden;
}

.zs44-empty-chart{
  min-height:190px;
  display:grid;
  place-items:center;
  color:#93aabd;
  text-align:center;
  line-height:1.8;
  font-size:13px;
}

@media(max-width:1180px){
  body.zs43-signals .zs44-viz-grid{
    grid-template-columns:1fr!important;
  }

  .zs44-chart-card.wide{
    grid-column:span 1;
  }
}

@media(max-width:760px){
  body.zs43-signals .zs44-viz-grid{
    padding:14px!important;
  }

  .zs44-chart-card{
    border-radius:22px;
    min-height:auto;
    padding:14px;
  }

  .zs44-donut-layout{
    grid-template-columns:1fr;
    justify-items:center;
  }

  .zs44-ranked{
    gap:10px;
  }

  .zs44-rank-row{
    grid-template-columns:90px 1fr 42px;
    font-size:11px;
  }

  .zs44-hist{
    height:210px;
    gap:6px;
  }
}