/* HEADER / TOPBAR — app top bar: brand + nav.
   BEM block: topbar. Elements: __brand, __brand-star, __nav, __link. */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 16px 26px;
  background: var(--primary);
  border-bottom: var(--border-w-bold) solid var(--border);
}
.topbar__brand {
  display: inline-flex; align-items: center; gap: 11px;
  font-family: var(--font-display); font-size: 24px; color: var(--on-color);
  text-decoration: none;
}
.topbar__brand-star { width: 23px; height: 23px; flex: none; color: var(--highlight); }

.topbar__nav { display: flex; align-items: center; gap: 8px; }
.topbar__link {
  font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 1px;
  color: var(--on-color); text-decoration: none;
  padding: 8px 12px; background: transparent; border: none; cursor: pointer;
}
.topbar__link--on { background: var(--on-color); color: var(--text); border-radius: var(--radius-pill); }