How to add separator between default and custom panels in WordPress customizer?

Although the customizer is the official way to work with the theme options, and everything that can be managed in WordPress, really there is no primitive to add the separator.

It is not that obvious, but that Iframe we are targeting to add the separator typically can contain Panels and Sections on the top level.

enter image description here

Furthermore, did you know that panels and sections are managed via JavaScript?

File: /wp-admin/customize.php
167:            <div id="customize-theme-controls">
168:                <ul class="customize-pane-parent"><?php // Panels and sections are managed here via JavaScript ?></ul>
169:            </div>

The possible road to add the panel or the section that would be empty is not smart. These are containers and would not appear if they do not have controls with associated settings. And to create custom controls that would be empty is simple not so smart.

JavaScript again would be a hack for a common WordPress developer also, so I think the CSS is the way to go.

Speaking of JavaScript, when we added the Backbone.js together with Underscore.js ( at WordPress version 3.5 ) Nacin announced JavaScript will soon dominate the WordPress world. I think this will happen but not that fast.