/**** Base ****/
body { font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; }

/**** Progress bar ****/
.progress { height: 8px; }
.progress .bar { transition: width .3s ease; }

/**** Modal ****/
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.4); display: flex; align-items: center; justify-content: center; }
.modal .panel { width: 100%; max-width: 900px; max-height: 90vh; overflow: auto; }

/**** Disease Tags ****/
.disease-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: 0.75rem;
  font-weight: 500;
  color: #065f46;
  background-color: #d1fae5;
  border: 1px solid #6ee7b7;
  border-radius: 9999px;
  white-space: nowrap;
}

/**** Microbiome-derived Disease Tags ****/
.disease-tag.microbiome-tag {
  color: #1e3a8a;
  background-color: #dbeafe;
  border: 1px solid #93c5fd;
  font-weight: 600;
}

/**** Suggest Box ****/
#suggest-box {
  z-index: 50;
  max-height: 400px;
  overflow-y: auto;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

#suggest-box::-webkit-scrollbar {
  width: 8px;
}

#suggest-box::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

#suggest-box::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

#suggest-box::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.suggest-item {
  transition: background-color 0.15s ease;
}

.suggest-item:hover {
  transform: translateX(2px);
}