.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 20px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}

.high {
  background: var(--danger-dim);
  color: var(--danger);
  border: 1px solid rgba(255, 77, 109, 0.3);
}

.high .dot {
  background: var(--danger);
  box-shadow: 0 0 4px var(--danger);
}

.medium {
  background: var(--warning-dim);
  color: var(--warning);
  border: 1px solid rgba(244, 162, 97, 0.3);
}

.medium .dot {
  background: var(--warning);
  box-shadow: 0 0 4px var(--warning);
}

.low {
  background: var(--safe-dim);
  color: var(--safe);
  border: 1px solid rgba(46, 196, 182, 0.3);
}

.low .dot {
  background: var(--safe);
  box-shadow: 0 0 4px var(--safe);
}

.critical {
  background: rgba(255, 23, 68, 0.2);
  color: #ff1744;
  border: 1px solid rgba(255, 23, 68, 0.4);
}

.critical .dot {
  background: #ff1744;
  box-shadow: 0 0 6px #ff1744;
}