body {
  font-family: system-ui, -apple-system, sans-serif;
}

html {
  scroll-behavior: smooth;
}

main section h2 {
  position: relative;
  padding-bottom: 0.5rem;
}

.table-responsive {
  margin-top: 1rem;
}

.card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
  transform: translateY(-4px);
}

.form-control:not(:focus):invalid {
  border-color: #EF4444;
}

.form-control:valid {
  border-color: #16A34A;
}

.error-message {
  color: #EF4444;
  font-size: 0.85rem;
}

body.dark-mode {
  background-color: #1a1a2e !important;
  color: #eee !important;
}

body.dark-mode .card,
body.dark-mode .bg-white,
body.dark-mode .table-responsive {
  background-color: #24243e !important;
  color: #eee !important;
  border-color: #3f3f5f !important;
}

body.dark-mode .text-muted,
body.dark-mode .text-secondary,
body.dark-mode .form-text {
  color: #b0b0c5 !important;
}

body.dark-mode .table {
  color: #eee !important;
}

#char-counter {
  font-size: 0.85rem;
  color: #6b7280;
}