.cell span {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.cell small {
  padding: 2px 5px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 700;
}

.cell-high {
  border-color: #d8a936;
  background: #211c10;
}
.cell-high em { color: #ffd166; }
.cell-high small { background: #5a4618; color: #ffe39a; }

.cell-low {
  border-color: #438ad0;
  background: #0c1c2e;
}
.cell-low em { color: #69b7ff; }
.cell-low small { background: #153f67; color: #a9d8ff; }

.cell-abnormal {
  border-color: var(--danger);
  background: #33171c;
  box-shadow: 0 0 0 1px #ff6b6b40, 0 0 16px #ff313126;
}
.cell-abnormal em { color: #ff8d8d; font-weight: 800; }
.cell-abnormal small { background: #7d252c; color: #fff; }

.cell-battery { position: relative; width: 19px; height: 11px; border: 1.5px solid currentColor; border-radius: 2px; flex: none; overflow: visible; }
.cell-battery::after { content: ""; position: absolute; right: -4px; top: 3px; width: 2px; height: 5px; border-radius: 0 2px 2px 0; background: currentColor; }
.cell-battery u { position: absolute; left: 2px; bottom: 2px; width: var(--level); max-width: 13px; height: 5px; border-radius: 1px; background: currentColor; text-decoration: none; }