Status Uptime Tile

<div class="nuda-kpi-uptime">
  <div class="nuda-kpi-uptime__header">
    <span class="nuda-kpi-uptime__title">System Status</span>
    <span class="nuda-kpi-uptime__badge nuda-kpi-uptime__badge--ok">Operational</span>
  </div>
  <div class="nuda-kpi-uptime__pct">99.97%</div>
  <div class="nuda-kpi-uptime__label">Uptime last 90 days</div>
  <div class="nuda-kpi-uptime__bars">
    <!-- Repeat nuda-kpi-uptime__bar--ok / nuda-kpi-uptime__bar--down as needed -->
    <div class="nuda-kpi-uptime__bar nuda-kpi-uptime__bar--ok"></div>
    <div class="nuda-kpi-uptime__bar nuda-kpi-uptime__bar--ok"></div>
    <div class="nuda-kpi-uptime__bar nuda-kpi-uptime__bar--down"></div>
    <div class="nuda-kpi-uptime__bar nuda-kpi-uptime__bar--ok"></div>
    <div class="nuda-kpi-uptime__bar nuda-kpi-uptime__bar--ok"></div>
  </div>
</div>

.nuda-kpi-uptime {
  background: #141414;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  padding: 1.1rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  min-width: 230px;
}

.nuda-kpi-uptime__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nuda-kpi-uptime__title {
  color: #cfcfcf;
  font-size: .82rem;
  font-weight: 600;
}

.nuda-kpi-uptime__badge {
  font-size: .68rem;
  font-weight: 700;
  padding: .2rem .55rem;
  border-radius: 20px;
}

.nuda-kpi-uptime__badge--ok {
  background: rgba(228,255,84,.12);
  color: #e4ff54;
}

.nuda-kpi-uptime__badge--warn {
  background: rgba(255,170,0,.12);
  color: #ffaa00;
}

.nuda-kpi-uptime__badge--err {
  background: rgba(255,107,107,.12);
  color: #ff6b6b;
}

.nuda-kpi-uptime__pct {
  color: #fafafa;
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
}

.nuda-kpi-uptime__label {
  color: #555;
  font-size: .72rem;
}

.nuda-kpi-uptime__bars {
  display: flex;
  gap: 2px;
  align-items: flex-end;
  height: 24px;
  margin-top: .3rem;
}

.nuda-kpi-uptime__bar {
  flex: 1;
  height: 100%;
  border-radius: 2px;
}

.nuda-kpi-uptime__bar--ok {
  background: rgba(228,255,84,.55);
}

.nuda-kpi-uptime__bar--down {
  background: #ff6b6b;
  height: 60%;
}