
.vrs-health-panel{
  margin-top:10px;
  padding:12px;
  border:1px solid rgba(143,177,211,.13);
  border-radius:10px;
  background:rgba(255,255,255,.02);
}
.vrs-health-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.vrs-health-head strong{
  color:#e7eff7;
  font-size:10px;
  letter-spacing:.05em;
}
.vrs-health-main{
  display:grid;
  grid-template-columns:120px minmax(0,1fr);
  gap:14px;
  align-items:center;
}
.vrs-health-ring{
  --health-score:0deg;
  width:110px;
  height:110px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at center,#0a1723 0 58%,transparent 59%),
    conic-gradient(#6f8295 0 var(--health-score),rgba(143,177,211,.12) var(--health-score) 360deg);
}
.vrs-health-ring.good{
  background:
    radial-gradient(circle at center,#0a1723 0 58%,transparent 59%),
    conic-gradient(#55dca2 0 var(--health-score),rgba(143,177,211,.12) var(--health-score) 360deg);
}
.vrs-health-ring.warn{
  background:
    radial-gradient(circle at center,#0a1723 0 58%,transparent 59%),
    conic-gradient(#f1c45c 0 var(--health-score),rgba(143,177,211,.12) var(--health-score) 360deg);
}
.vrs-health-ring.bad{
  background:
    radial-gradient(circle at center,#0a1723 0 58%,transparent 59%),
    conic-gradient(#ff6f81 0 var(--health-score),rgba(143,177,211,.12) var(--health-score) 360deg);
}
.vrs-health-ring-inner{
  text-align:center;
}
.vrs-health-ring-inner strong{
  display:block;
  color:#f4f8fc;
  font-size:23px;
  font-weight:950;
}
.vrs-health-ring-inner span{
  display:block;
  margin-top:3px;
  color:#8498ad;
  font-size:9px;
  font-weight:900;
}
.vrs-health-reasons{
  color:#9fb2c6;
  font-size:11px;
  line-height:1.5;
}
.vrs-health-mini{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin-top:10px;
}
.vrs-health-mini>div{
  padding:9px;
  border:1px solid rgba(143,177,211,.12);
  border-radius:8px;
  background:rgba(255,255,255,.02);
}
.vrs-health-mini small{
  display:block;
  color:#7f93a8;
  font-size:8px;
  font-weight:900;
}
.vrs-health-mini strong{
  display:block;
  margin-top:5px;
  color:#f2f7fb;
  font-size:11px;
}
@media(max-width:560px){
  .vrs-health-main{grid-template-columns:1fr}
  .vrs-health-ring{margin:auto}
  .vrs-health-mini{grid-template-columns:1fr}
}
