/* ---- Bar under the neck: action · view · practice ---- */
.view-buttons { display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap; }
.vb-group { display: flex; align-items: center; gap: 8px; padding-left: 22px; border-left: 1px solid var(--line); }
.vb-label { font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-muted); }
.vb-seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 3px; overflow: hidden; }
.vb-seg button { border: none; border-radius: 0; padding: 7px 12px; font-size: 11px; background: var(--surface-panel); color: var(--control-ink); }
.vb-seg button.on { background: var(--selected); color: var(--on-selected); }
.vb-chip, .vb-mode { padding: 7px 12px; font-size: 11px; background: var(--surface-panel); color: var(--ink-soft); border: 1px solid var(--line-strong); border-radius: 3px; }
.vb-chip.active { background: var(--selected); color: var(--on-selected); border-color: var(--selected); box-shadow: none; }
.vb-mode:hover, .vb-chip:hover { border-color: var(--action); color: var(--text-strong); }

/* ---- One bar under the neck: play & tempo · view ---- */
.view-buttons { white-space: nowrap; }
.play-group { border-left: none; padding-left: 0; gap: 6px; }
.view-bar .bpm-value { font-family: 'Oswald', sans-serif; font-size: 18px; color: var(--action); min-width: 82px; text-align: center; }
.tempo-step { padding: 7px 10px; font-weight: 800; }
.vb-chip.active { background: var(--selected); color: var(--on-selected); border-color: var(--selected); }
.pop-anchor { position: relative; display: inline-block; }
.rhythm-pop { left: 0; top: calc(100% + 6px); width: 340px; white-space: normal; }
.rhythm-pop .bpm-line { margin-bottom: 10px; }
.rhythm-pop .seg { margin-bottom: 6px; }
.view-bar .vb-chip, .view-bar .vb-seg button { white-space: nowrap; }