.sidebar {
  width: 220px;
  background: #07090c;
  border-right: 1px solid #1f2933;
  padding: 16px;
}

.sidebar a {
  display:block;
  padding:10px;
  color:#9ca3af;
  text-decoration:none;
  border-radius:6px;
  margin-bottom:6px;
}

.sidebar a.active,
.sidebar a:hover {
  background:#111418;
  color:#fff;
}

.brand {
  color:#22d3ee;
  font-weight:700;
}

.bg-panel {
  background:#111418;
  border:1px solid #1f2933;
  border-radius:10px;
}

.metric {
  padding:20px;
}

.label {
  font-size:.7rem;
  letter-spacing:.08em;
  color:#9ca3af;
}

.value {
  font-weight:600;
}

.sub {
  font-size:.75rem;
  color:#38bdf8;
}

.mount-title {
  background:#0b0e12;
  padding:6px;
  border-radius:6px;
  text-align:center;
  color:#22d3ee;
  font-weight:600;
}

.gauge {
  --size: 90px;
  --thickness: 14px;

  width: var(--size);
  height: calc(var(--size) / 2);
  margin: 10px auto;

  background:
    conic-gradient(
      from 180deg,
      currentColor calc(var(--v) * 1.8deg),
      #2a2a2a 0
    );

  border-radius: var(--size) var(--size) 0 0;

  /* Proper semi-circle cut */
  mask:
    radial-gradient(
      circle at center,
      transparent calc(50% - var(--thickness)),
      black calc(50% - var(--thickness) + 1px)
    );
}


.green { color:#19c37d; }
.cyan  { color:#22d3ee; }
.yellow{ color:#facc15; }
.pink  { color:#ec4899; }