body {
  background-color: #f8f9fa;
}

pre {
  white-space: pre-wrap;
  word-wrap: break-word;
}

body {
  background-color: #f8f9fa;
  color: #212529;
  transition: background 0.2s, color 0.2s;
}
.card, .bg-light {
  background-color: #fff !important;
  color: #212529 !important;
  transition: background 0.2s, color 0.2s;
}

/* Dark mode styles */
body.darkmode, body[data-theme="dark"] {
  background-color: #181a1b;
  color: #f1f3f4;
}
body.darkmode .card, body[data-theme="dark"] .card,
body.darkmode .bg-light, body[data-theme="dark"] .bg-light {
  background-color: #23272b !important;
  color: #f1f3f4 !important;
}

body.darkmode input,
body[data-theme="dark"] input,
body.darkmode select,
body[data-theme="dark"] select,
body.darkmode textarea,
body[data-theme="dark"] textarea {
  background-color: #23272b !important;
  color: #f1f3f4 !important;
  border-color: #444950 !important;
}

body.darkmode input::placeholder,
body[data-theme="dark"] input::placeholder,
body.darkmode textarea::placeholder,
body[data-theme="dark"] textarea::placeholder {
  color: #b0b3b8 !important;
  opacity: 1;
}

.logo-title-box {
  background-color: #23272b;
  border-radius: 1rem;
  padding: 0.5rem 1.5rem;
  display: flex;
  align-items: center;
}
.logo-title-box h1 {
  color: #f1f3f4;
  margin-bottom: 0;
  display: inline;
}