:root {
  --card-radius: 18px;
  --bg: #f4f7fb;
}

body {
  background: var(--bg);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

.navbar {
  background: #ffffff;
  border-bottom: 1px solid rgba(15, 20, 35, 0.08);
}

.card {
  border: 0;
  border-radius: var(--card-radius);
  box-shadow: 0 14px 36px rgba(0, 20, 50, 0.08);
}

.btn,
.form-control,
.form-select {
  border-radius: 12px;
}

.small-muted {
  color: rgba(0, 0, 0, 0.58);
  font-size: 0.9rem;
}

.badge {
  border-radius: 999px;
  font-weight: 600;
}

.table td,
.table th {
  vertical-align: middle;
}

.kpi-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.kpi-item {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 14px;
  padding: 12px;
}