/* styles/topbar.css */

:root {
  --topbar-height: 64px;
  --topbar-bg: #0b0c10;
  --topbar-text: #e6eaf2;
  --topbar-muted: #a5adbb;
  --topbar-accent: #5b7cfa;
  /* Preferred rendered height for the logo */
  --logo-height: 44px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--topbar-height);
  padding: 0 20px;
  background: var(--topbar-bg);
  color: var(--topbar-text);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.topbar-logo {
  /* Preserve aspect ratio; scale by height */
  height: var(--logo-height, calc(var(--topbar-height) - 16px));
  width: auto;
  max-height: calc(var(--topbar-height) - 12px);
  object-fit: contain;
  display: block;
}

.topbar-title {
  font-size: 1.2rem;
  font-weight: 600;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.topbar-link {
  text-decoration: none;
  color: var(--topbar-text);
  font-size: 0.95rem;
  transition: color 0.2s ease;
}

.topbar-link:hover {
  color: var(--topbar-accent);
}