body {
  background-color: #f4f6f8;
  font-family: 'Segoe UI', sans-serif;
}

.card {
  border: none;
  border-radius: 10px;
  transition: transform 0.2s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.card:hover {
  transform: scale(1.02);
}

.card-header {
  font-weight: bold;
}

.status-ok {
  border-left: 6px solid #198754;
}

.status-low {
  border-left: 6px solid #ffc107;
  background-color: #fffbe6;
}

.status-critical {
  border-left: 6px solid #dc3545;
  background-color: #fff2f2;
}

@media (max-width: 768px) {
  .card {
    font-size: 0.95rem;
  }
}