.peptflow-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
  transition: transform 0.25s ease, filter 0.25s ease;
}

.peptflow-logo:hover {
  text-decoration: none;
}

.peptflow-logo-mark {
  height: 36px;
  width: auto;
  flex-shrink: 0;
  display: block;
  object-fit: contain;
}

.peptflow-logo-text {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 1.45rem;
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.logo-pept {
  color: var(--logo-pept, #ffffff);
}

.logo-flow {
  color: var(--logo-flow, #00e5ff);
}

[data-theme="light"] {
  --logo-pept: #0c1219;
  --logo-flow: #00a8cc;
}

@media (max-width: 768px) {
  .peptflow-logo-mark {
    height: 32px;
  }

  .peptflow-logo-text {
    font-size: 1.25rem;
  }
}