html, body {
  font-family: -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 1.5rem;
  background-color: #0e1117;
  color: #fafafa;
}

h1 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: #fafafa;
}

.tiles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 1rem 0 0.5rem;
}

@media (max-width: 900px) {
  .tiles-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .tiles-grid {
    grid-template-columns: 1fr;
  }
}

.tile {
  background-color: #262730;
  border: 1px solid #3b3c46;
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
}

.tile-caption {
  font-size: 0.8rem;
  color: #a3a8b8;
  margin-top: 0.25rem;
}

.source-caption {
  font-size: 0.8rem;
  color: #a3a8b8;
  margin-top: 0.5rem;
}

/* dcc.Tabs dark theme */
.tab-container {
  border-bottom-color: #3b3c46 !important;
}

.tab {
  background-color: #0e1117 !important;
  color: #a3a8b8 !important;
  border-color: #3b3c46 !important;
}

.tab--selected {
  background-color: #0e1117 !important;
  color: #fafafa !important;
  border-top-color: #ff4b4b !important;
}