:root {
  --brand-gradient: linear-gradient(135deg, #1f2937 0%, #111827 45%, #0f172a 100%);
}

body {
  background: #f5f7fb;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
}

.navbar {
  background-image: var(--brand-gradient);
}

.card {
  border: none;
  border-radius: 1rem;
}

.faces-indicator {
  min-width: 140px;
}

.emotion-list {
  display: grid;
  gap: 0.75rem;
}

.emotion-row {
  display: grid;
  grid-template-columns: 90px 1fr 60px;
  align-items: center;
  gap: 0.75rem;
}

.emotion-row .progress {
  height: 10px;
}

.table thead th {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6c757d;
}

#ambientLabel {
  font-weight: 700;
}

.badge-emotion {
  text-transform: capitalize;
}

.toast {
  border-radius: 0.75rem;
}

@media (max-width: 991px) {
  .emotion-row {
    grid-template-columns: 80px 1fr 50px;
  }
}