:root {
  --bio-forest-green: #1B4332;
  --genomic-teal: #2A9D8F;
  --biodiversity-amber: #E9C46A;
  --earth-terracotta: #BC6C25;
  --bg: #F8F9FA;
  --text: #2B2B2B;
}

body {
  background-color: var(--bg);
  color: var(--text);
}

.navbar-brand,
.navbar {
  background-color: var(--bio-forest-green) !important;
}

.navbar .nav-link {
  color: rgba(255, 255, 255, 0.85) !important;
}

.navbar .nav-link:hover,
.navbar .nav-link.active {
  color: #fff !important;
}

.navbar .nav-link.disabled {
  color: rgba(255, 255, 255, 0.4) !important;
}

.btn-primary {
  background-color: var(--genomic-teal);
  border-color: var(--genomic-teal);
}

.btn-primary:hover {
  background-color: #22796d;
  border-color: #22796d;
}

.btn-accent {
  background-color: var(--biodiversity-amber);
  border-color: var(--biodiversity-amber);
  color: var(--text);
}

.text-forest {
  color: var(--bio-forest-green);
}

.text-teal {
  color: var(--genomic-teal);
}

.badge-live {
  background-color: var(--genomic-teal);
}

.badge-planned {
  background-color: var(--earth-terracotta);
}

.hero {
  background: linear-gradient(135deg, var(--bio-forest-green), var(--genomic-teal));
  color: #fff;
  padding: 4rem 1rem;
}

.feature-card {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 0.5rem;
  height: 100%;
  transition: box-shadow 0.15s ease-in-out;
}

.feature-card:hover {
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.08);
}

footer {
  background-color: var(--bio-forest-green);
  color: rgba(255, 255, 255, 0.85);
}

a {
  color: var(--genomic-teal);
}

a:hover {
  color: var(--bio-forest-green);
}

/* Nucleotide-colored sequence viewer (Gene Search / gene detail) */
.seq-mono {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.82rem;
  line-height: 1.7;
  word-break: break-all;
}

.nt-a { background-color: #d3ecd9; color: #1B4332; }
.nt-t { background-color: #f3ddd0; color: #8a3a10; }
.nt-g { background-color: #faf1d9; color: #8a6a1a; }
.nt-c { background-color: #d6ede9; color: #14554d; }
.nt-n { background-color: #e6e6e6; color: #555; }

.exon-diagram {
  width: 100%;
  height: auto;
  max-width: 100%;
}

.exon-diagram-wrap {
  overflow-x: auto;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 0.5rem;
  padding: 0.5rem;
  background: #fff;
}

.seq-length-pills .btn {
  padding: 0.15rem 0.6rem;
  font-size: 0.8rem;
}