.card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: var(--spacing-sm);
}

.status-dot.ok { background-color: var(--green); }
.status-dot.warning { background-color: var(--orange); }
.status-dot.critical { background-color: var(--red); }
.status-dot.unknown { background-color: var(--text-secondary); }

.badge-pill {
  display: inline-block;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: 20px;
  font-size: var(--font-size-sm);
  font-weight: 700;
  background-color: rgba(200, 255, 0, 0.12);
  color: var(--accent);
}

.badge-pill.warning {
  background-color: rgba(255, 107, 0, 0.12);
  color: var(--orange);
}

.badge-pill.critical {
  background-color: rgba(255, 45, 85, 0.12);
  color: var(--red);
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-lg);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-lg);
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-lg);
}