/* Underline tabs for single content (Modrinth-like) */
.single-content-nav .single-tabs {
  border-bottom: 1px solid rgba(0,0,0,.08);
  gap: .5rem;
}
.single-content-nav .single-tabs .nav-link {
  border: none;
  background: transparent;
  color: #46566b;
  padding: .5rem .75rem;
  margin-bottom: -1px; /* align underline with container border */
  border-radius: .25rem .25rem 0 0;
  position: relative;
  transition: color .15s ease;
}
.single-content-nav .single-tabs .nav-link:hover {
  color: #111827;
}
.single-content-nav .single-tabs .nav-link.active {
  color: #111827;
  background: transparent;
}
.single-content-nav .single-tabs .nav-link::after {
  content: "";
  position: absolute;
  left: .5rem;
  right: .5rem;
  bottom: -1px;
  height: 2px;
  background: transparent;
  transition: background-color .15s ease, left .15s ease, right .15s ease;
}
.single-content-nav .single-tabs .nav-link:hover::after {
  background: rgba(17,24,39,.3);
}
.single-content-nav .single-tabs .nav-link.active::after {
  background: #16a34a; /* emerald-600 */
}

/* Dark mode via Bootstrap 5.3 html[data-bs-theme="dark"] */
html[data-bs-theme="dark"] .single-content-nav .single-tabs {
  border-bottom-color: rgba(255,255,255,.12);
}
html[data-bs-theme="dark"] .single-content-nav .single-tabs .nav-link {
  color: #cbd5e1; /* slate-300 */
}
html[data-bs-theme="dark"] .single-content-nav .single-tabs .nav-link:hover,
html[data-bs-theme="dark"] .single-content-nav .single-tabs .nav-link.active {
  color: #e5e7eb; /* gray-200 */
}
html[data-bs-theme="dark"] .single-content-nav .single-tabs .nav-link:hover::after {
  background: rgba(229,231,235,.35);
}
html[data-bs-theme="dark"] .single-content-nav .single-tabs .nav-link.active::after {
  background: #22c55e; /* emerald-500 */
}