/* ══════════════════════════════
   TOPBAR
══════════════════════════════ */
.topbar {
  height: var(--topbar-height);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center;
  padding: 0 14px; gap: 8px;
  position: sticky; top: 0;
  z-index: var(--z-topbar); flex-shrink: 0;
}
.topbar__menu-btn {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius); color: var(--text-secondary);
  transition: all var(--ease); flex-shrink: 0;
}
.topbar__menu-btn:hover  { background: var(--gray-100); color: var(--text-primary); }
.topbar__menu-btn:active { transform: scale(.9); }
.topbar__title {
  flex: 1; font-size: 17px; font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar__actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.topbar__action-btn {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius); color: var(--text-secondary);
  transition: all var(--ease);
}
.topbar__action-btn:hover  { background: var(--gray-100); color: var(--text-primary); }
.topbar__action-btn:active { transform: scale(.9); }

@media (min-width: 768px) {
  .topbar__menu-btn { display: none; }
  .topbar { padding: 0 24px; gap: 12px; }
}